feat(editable-select): add support for grouped options(#662)

* feat(editable-select): add support for grouped options * feat(editable-select): style group header * Fix SingleSelect story
logicalclocks · Jul 30, 2024 · a51a291 · a51a291
1 parent cca2d83
commit a51a291
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 4 deletions.
diff --git a/src/components/editableSelect/index.tsx b/src/components/editableSelect/index.tsx
@@ -12,18 +12,22 @@ import {
   OptionBase,
   Select,
   CreatableProps,
+  GroupBase,
 } from 'chakra-react-select';
 import * as R from 'ramda';
 import { useCallback, useMemo } from 'react';
 import Label from '../label';
 import Labeling from '../typography/labeling';
 
 export interface EditableSelectProps
-  extends Omit<CreatableProps<Option, boolean, any>, 'onChange' | 'value'> {
+  extends Omit<
+    CreatableProps<Option, boolean, any>,
+    'onChange' | 'value' | 'options'
+  > {
   label?: string;
   width?: string;
   value: string[];
-  options: string[];
+  options: string[] | GroupBase<Option>[];
   isMulti?: boolean;
   disabled?: boolean;
   placeholder: string;
@@ -56,8 +60,12 @@ const EditableSelect = ({
   ...props
 }: EditableSelectProps) => {
   const isSingle = !isMulti;
-  const options = useMemo<Option[]>(
-    () => optionsAsStrings.map(toOption),
+  const options = useMemo<Option[] | GroupBase<Option>[]>(
+    () =>
+      R.when(
+        (x: any[]) => R.type(x[0]) === 'String',
+        R.map(toOption),
+      )(optionsAsStrings as any) as any,
     [optionsAsStrings],
   );
 
@@ -134,6 +142,10 @@ const EditableSelect = ({
           multiValue: R.mergeLeft({
             bg: variant === 'white' ? 'grayShade3' : 'background',
           }),
+          groupHeading: R.mergeLeft({
+            color: 'gray',
+            bg: 'grayShade3',
+          }),
         }}
         closeMenuOnSelect={isSingle}
         isClearable={isSingle} // removes clear button [X] that clears the whole select

diff --git a/src/components/editableSelect/stories.tsx b/src/components/editableSelect/stories.tsx
@@ -176,3 +176,48 @@ export const Single: StoryObj<typeof EditableSelect> = {
     });
   },
 };
+
+export const GroupedSelect: StoryObj<typeof EditableSelect> = {
+  args: {
+    label: 'Label',
+    labelAction: '(optional)',
+    placeholder: 'placeholder',
+    noDataMessage: 'no options',
+    disabled: false,
+    isMulti: true,
+    value: ['integer'],
+    options: [
+      {
+        label: 'label1',
+        options: options.map((value) => ({ value, label: value })),
+      },
+      {
+        label: 'group 2',
+        options: options.map((value) => ({
+          value: `${value} second`,
+          label: `${value} second`,
+        })),
+      },
+    ],
+  },
+  render: ({ value: initialValue, options, ...props }) => {
+    const [value, setValue] = useState<string[]>(initialValue);
+
+    const handleChange = (data: string[]) => {
+      action('onChange')(data);
+      setValue(data);
+    };
+
+    return (
+      <Box minHeight="400px" width="600px">
+        <EditableSelect
+          // isOpen
+          {...props}
+          value={value}
+          options={options}
+          onChange={handleChange}
+        />
+      </Box>
+    );
+  },
+};