Add disabled prop to multi-select

assets/js/common/MultiSelect/MultiSelect.jsx

@@ -56,8 +56,14 @@ const defaultClassNames = {
   multiValue: () =>
     'rounded-md bg-green-100 text-green-800 px-1 py-2px space-x-1 mr-1',
   multiValueLabel: () => 'ml-1',
-  control: () =>
-    'relative w-full py-2 px-3 text-left bg-white rounded-lg cursor-default border border-gray-300 sm:text-sm',
+  control: ({ isDisabled }) =>
+    classNames(
+      {
+        'bg-gray-50': isDisabled,
+        'bg-white': !isDisabled,
+      },
+      'relative w-full py-2 px-3 text-left rounded-lg cursor-default border border-gray-300 sm:text-sm'
+    ),
   menu: () =>
     'absolute w-full py-1 mt-1 overflow-auto text-base bg-white rounded-md shadow-lg max-h-60 ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm z-[1]',
   option: ({ isFocused }) =>
@@ -72,6 +78,7 @@ const defaultClassNames = {
 function MultiSelect({
   options,
   values,
+  disabled = false,
   components = defaultComponents,
   selectClassNames = defaultClassNames,
   unstyled = true,
@@ -89,6 +96,7 @@ function MultiSelect({
       onChange={onChange}
       unstyled={unstyled}
       className={className}
+      isDisabled={disabled}
       {...props}
     />
   );

assets/js/common/MultiSelect/MultiSelect.stories.jsx

@@ -18,6 +18,13 @@ export default {
         type: 'array',
       },
     },
+    disabled: {
+      type: 'boolean',
+      description: 'Component is disabled or not',
+      control: {
+        type: 'boolean',
+      },
+    },
     onChange: {
       description: 'A function to be called when selected options are changed',
       table: {
@@ -59,3 +66,10 @@ export const WithInitialValues = {
     values: options[0],
   },
 };
+
+export const Disabled = {
+  args: {
+    ...WithInitialValues.args,
+    disabled: true,
+  },
+};

assets/js/common/MultiSelect/MultiSelect.test.jsx

@@ -23,14 +23,22 @@ describe('MultiSelect Component', () => {
     });
   });
 
-  it('should display initial values', async () => {
+  it('should display initial values', () => {
     const values = options.slice(0, 1);
 
     render(<MultiSelect options={options} values={values} />);
 
     expect(screen.getByText(values[0].label)).toBeVisible();
   });
 
+  it('should disable the component', () => {
+    render(<MultiSelect options={options} disabled />);
+
+    const disabled = document.querySelector('[aria-disabled="true"]');
+
+    expect(disabled).toBeInTheDocument();
+  });
+
   it('should change the values', async () => {
     const user = userEvent.setup();
     const mockOnChange = jest.fn();