Add disabled property to Select and ButtonSelect items

Author: vine77

packages/react-components/source/react/internal/action-menu-list/ActionMenuList.js

@@ -257,8 +257,12 @@ class ActionMenuList extends Component {
                 icon={icon}
                 svg={svg}
                 onMouseEnter={() => onMouseEnterItem(index)}
-                onClick={e => !disabled && executeAction(e, onClick, actionId)}
                 disabled={disabled}
+                onClick={
+                  disabled
+                    ? undefined
+                    : e => executeAction(e, onClick, actionId)
+                }
                 ref={el => {
                   this.actionRefs[index] = el;
                 }}

packages/react-components/source/react/internal/option-menu-list/OptionMenuList.js

@@ -26,6 +26,7 @@ const propTypes = {
       value: PropTypes.string.isRequired,
       label: PropTypes.node.isRequired,
       icon: PropTypes.oneOf(Icon.AVAILABLE_ICONS),
+      disabled: PropTypes.bool,
     }),
   ),
   selected: PropTypes.oneOfType([
@@ -344,15 +345,16 @@ class OptionMenuList extends Component {
         }}
         {...rest}
       >
-        {options.map(({ value, label, icon, svg }, index) => (
+        {options.map(({ value, label, icon, svg, disabled }, index) => (
           <OptionMenuListItem
             id={getOptionId(id, value)}
             key={value}
             focused={index === focusedIndex}
             selected={selectionSet.has(value)}
             icon={icon}
             svg={svg}
-            onClick={() => onClickItem(value)}
+            disabled={disabled}
+            onClick={disabled ? undefined : () => onClickItem(value)}
             onMouseEnter={() => onMouseEnterItem(index)}
             ref={option => {
               this.optionRefs[index] = option;

packages/react-components/source/react/internal/option-menu-list/OptionMenuListItem.js

@@ -15,17 +15,29 @@ const propTypes = {
   svg: PropTypes.element,
   onClick: PropTypes.func.isRequired,
   onMouseEnter: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
 };
 
 const defaultProps = {
   icon: null,
   svg: null,
+  disabled: false,
 };
 
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 const OptionMenuListItem = forwardRef(
   (
-    { id, children, focused, selected, icon, svg, onClick, onMouseEnter },
+    {
+      id,
+      children,
+      focused,
+      selected,
+      icon,
+      svg,
+      onClick,
+      onMouseEnter,
+      disabled,
+    },
     ref,
   ) => (
     <li
@@ -34,6 +46,7 @@ const OptionMenuListItem = forwardRef(
       className={classNames('rc-menu-list-item', {
         'rc-menu-list-item-focused': focused,
         'rc-menu-list-item-selected': selected,
+        'rc-menu-list-item-disabled': disabled,
       })}
       aria-selected={selected}
       onClick={onClick}

packages/react-components/source/react/library/button-select/ButtonSelect.md

@@ -24,6 +24,28 @@ const options = [
 />;
 ```
 
+### Disable rows
+
+Use the `disabled` object property to disable a row in a dropdown and prevent onClick actions from happening.
+
+```jsx
+const options = [
+  { value: 'hello', label: 'Hello' },
+  { value: 'world', label: 'World' },
+  { value: 'hi', label: 'Hi', disabled: true },
+  { value: 'mom', label: 'Mom', disabled: true },
+];
+
+<ButtonSelect
+  options={options}
+  value={state.value}
+  onChange={value => {
+    console.log('New Value:', value);
+    setState({ value });
+  }}
+/>;
+```
+
 ## Types
 
 The visual types of `ButtonSelect` are "primary", "secondary", "tertiary", "danger", "transparent", "text".

packages/react-components/source/react/library/select/Select.md

@@ -28,7 +28,6 @@ const style = { margin: 10 };
 
 <div>
   <Select
-    id="button-select-one"
     name="select-example"
     options={options}
     placeholder="Select your language"
@@ -42,6 +41,41 @@ const style = { margin: 10 };
 </div>;
 ```
 
+### Disable rows
+
+Use the `disabled` object property to disable a row in a dropdown and prevent onClick actions from happening.
+
+```jsx
+const options = [
+  { value: 'en', label: 'English' },
+  { value: 'ru', label: 'русский' },
+  { value: 'zh', label: '中文' },
+  { value: 'sq', label: 'Albanian' },
+  { value: 'ar', label: 'Arabic' },
+  { value: 'eu', label: 'Basque', disabled: true },
+  { value: 'bn', label: 'Bengali', disabled: true },
+  { value: 'bs', label: 'Bosnian', disabled: true },
+  { value: 'bg', label: 'Bulgarian', disabled: true },
+  { value: 'ca', label: 'Catalan', disabled: true },
+];
+
+const style = { margin: 10 };
+
+<div>
+  <Select
+    name="disabled-select-example"
+    options={options}
+    placeholder="Select your language"
+    style={style}
+    value={state.value1}
+    onChange={value1 => {
+      console.log('New Value:', value1);
+      setState({ value1 });
+    }}
+  />
+</div>;
+```
+
 ## Variations
 
 ### Autocomplete
@@ -65,8 +99,7 @@ const style = { margin: 10 };
 
 <div>
   <Select
-    id="button-select-one"
-    name="select-example-one"
+    name="autocomplete-example"
     options={options}
     placeholder="Select your fruit"
     style={style}
@@ -109,8 +142,7 @@ const style = { margin: 10 };
 
 <div>
   <Select
-    id="button-select-one"
-    name="select-example-one"
+    name="multi-select-example"
     options={options}
     placeholder="Select your language"
     style={style}
@@ -152,8 +184,7 @@ const style = { margin: 10 };
 
 <div>
   <Select
-    id="button-select-one"
-    name="select-example-one"
+    name="multi-select-immediate-example"
     options={options}
     placeholder="Select your language"
     style={style}