fix(pf4): added disabled option to downshift select

Author: Hyperkid123

packages/pf4-component-mapper/demo/demo-schemas/select-schema.js

@@ -121,6 +121,12 @@ const selectSchema = {
       label: 'Clearable-select',
       options,
       isSearchable: true
+    },
+    {
+      component: componentTypes.SELECT,
+      name: 'dosbaled-option-select',
+      label: 'Disabled-option-select',
+      options: [...options, { label: 'Disabled option', value: 'disabled', isDisabled: true }]
     }
   ]
 };

packages/pf4-component-mapper/src/common/select/option.js

@@ -5,7 +5,14 @@ import { CheckIcon } from '@patternfly/react-icons';
 
 const Option = ({ item, isActive, isSelected, ...props }) => (
   <li>
-    <button {...props} type="button" className={`pf-c-select__menu-item${isSelected ? ' pf-m-selected' : ''}${isActive ? ' pf-m-focus' : ''}`}>
+    <button
+      {...props}
+      disabled={item.isDisabled || item.disabled}
+      type="button"
+      className={`pf-c-select__menu-item${isSelected ? ' pf-m-selected' : ''}${isActive ? ' pf-m-focus' : ''}${
+        item.isDisabled || item.disabled ? ' pf-m-disabled' : ''
+      }`}
+    >
       {item.label}
       {isSelected && (
         <span className="pf-c-select__menu-item-icon">
@@ -18,7 +25,9 @@ const Option = ({ item, isActive, isSelected, ...props }) => (
 
 Option.propTypes = {
   item: PropTypes.shape({
-    label: PropTypes.node
+    label: PropTypes.node,
+    isDisabled: PropTypes.bool,
+    disabled: PropTypes.bool
   }).isRequired,
   isActive: PropTypes.bool,
   isSelected: PropTypes.bool,