chore: update select component

app/client/package.json

@@ -387,4 +387,4 @@
     "@types/react": "^17.0.2",
     "postcss": "8.4.31"
   }
-}
+}

app/client/packages/design-system/ads/src/Checkbox/Checkbox.tsx

@@ -27,7 +27,7 @@ function Checkbox(props: CheckboxProps) {
       isFocusVisible={isFocusVisible}
       isIndeterminate={isIndeterminate}
     >
-      {children}
+      <span>{children}</span>
       <input {...inputProps} {...focusProps} ref={ref} />
       <span className={CheckboxClassNameSquare} />
     </StyledCheckbox>

app/client/packages/design-system/ads/src/Select/Select.mdx

@@ -51,6 +51,10 @@ Select allows users to make single or multiple selections from a list of options
 
 <Canvas of={SelectStories.SelectInvalidStory} />
 
+### Grouping with Checkbox in options
+
+<Canvas of={SelectStories.SelectWithCheckboxAndGroup} />
+
 ## Best practices
 
 The select component should:

app/client/packages/design-system/ads/src/Select/Select.stories.tsx

@@ -1,9 +1,10 @@
 import React, { useState } from "react";
-import { Select, Option } from "./Select";
+import { Select, Option, OptGroup } from "./Select";
 import { Icon } from "../Icon";
 import { Checkbox } from "../Checkbox";
 import type { SelectProps } from "./Select.types";
 import type { StoryObj } from "@storybook/react";
+import type { DefaultOptionType } from "rc-select/lib/Select";
 
 export default {
   title: "ADS/Components/Select",
@@ -970,3 +971,75 @@ export function SelectWithCheckbox() {
     </Select>
   );
 }
+
+const groupOptions = [
+  {
+    label: "Group 1",
+    options: [
+      {
+        label: "Option 1",
+        value: "value 11",
+      },
+      {
+        label: "Very long label to force a line break in the option",
+        value: "Very long label to force a line break in the option",
+      },
+    ],
+  },
+  {
+    label: "Group 2",
+    options: Array.from({ length: 1000 }, (_, i) => ({
+      label: `Option ${i + 1}`,
+      value: `value ${i + 1}`,
+    })),
+  },
+];
+
+export function SelectWithCheckboxAndGroup() {
+  const [selectedOptions, setSelectedOptions] = useState<DefaultOptionType[]>(
+    [],
+  );
+
+  return (
+    <Select
+      isMultiSelect
+      onDeselect={(value, unselectedOption) =>
+        setSelectedOptions(
+          selectedOptions.filter((opt) => opt.value !== unselectedOption.value),
+        )
+      }
+      onSelect={(value, newSelectedOption) =>
+        setSelectedOptions([...selectedOptions, newSelectedOption])
+      }
+      placeholder="Select options"
+      showSearch
+      value={selectedOptions}
+      virtual
+    >
+      {groupOptions.map((group, groupIndex) => (
+        <OptGroup key={`${group.label}-${groupIndex}`} label={group.label}>
+          {group.options.map((option, optionIndex) => (
+            <Option
+              key={`${option.value}-${groupIndex}-${optionIndex}`}
+              label={option.label}
+              title={option.label}
+              value={option.value}
+            >
+              <Checkbox
+                // making it read only as it is interfering with selection of options of rc-select
+                isReadOnly
+                isSelected={Boolean(
+                  selectedOptions.find(
+                    (selectedOption) => selectedOption.value == option.value,
+                  ),
+                )}
+              >
+                {option.label}
+              </Checkbox>
+            </Option>
+          ))}
+        </OptGroup>
+      ))}
+    </Select>
+  );
+}

app/client/packages/design-system/ads/src/Select/Select.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef, useState } from "react";
 import RCSelect, {
   Option as RCOption,
   OptGroup as RCOptGroup,
@@ -12,6 +12,7 @@ import { SelectClassName, SelectDropdownClassName } from "./Select.constants";
 import { Tag } from "../Tag";
 import type { SelectProps } from "./Select.types";
 import { Spinner } from "../Spinner";
+import { SearchInput } from "../SearchInput";
 
 /*
   TODO:
@@ -29,15 +30,21 @@ function Select(props: SelectProps) {
     isLoading = false,
     isMultiSelect,
     isValid,
-    maxTagCount = 2,
+    maxTagCount = isMultiSelect
+      ? props.value?.length > 1
+        ? "responsive"
+        : 1
+      : undefined,
     maxTagPlaceholder,
-    maxTagTextLength = 5,
+    optionLabelProp = "label",
     placeholder = "Please select an option",
     showSearch = false,
     size = "md",
     virtual = false,
     ...rest
   } = props;
+  const searchRef = useRef<HTMLInputElement>(null);
+  const [searchValue, setSearchValue] = useState("");
 
   const getMaxTagPlaceholder = (omittedValues: any[]) => {
     return `+${omittedValues.length}`;
@@ -51,6 +58,24 @@ function Select(props: SelectProps) {
     return <Icon name="arrow-down-s-line" size="md" />;
   }
 
+  const handleDropdownVisibleChange = (open: boolean) => {
+    if (open) {
+      // this is a hack to get the search input to focus when the dropdown is opened
+      // the reason is, rc-select does not support putting the search input in the dropdown
+      // and rc-select focus its native searchinput element on dropdown open, but we need to focus the search input
+      // so we use a timeout to focus the search input after the dropdown is opened
+      setTimeout(() => {
+        if (!searchRef.current) return;
+
+        searchRef.current?.focus();
+      }, 200);
+
+      return;
+    }
+
+    setSearchValue("");
+  };
+
   return (
     <RCSelect
       {...rest}
@@ -64,20 +89,41 @@ function Select(props: SelectProps) {
         SelectDropdownClassName + `--${size}`,
         dropdownClassName,
       )}
+      dropdownRender={(menu: any) => {
+        return (
+          <div>
+            {showSearch && (
+              <SearchInput
+                onChange={setSearchValue}
+                placeholder="Type to search..."
+                ref={searchRef}
+                size="md"
+                value={searchValue}
+              />
+            )}
+            <div>{menu}</div>
+          </div>
+        );
+      }}
       inputIcon={<InputIcon />}
       maxTagCount={maxTagCount}
       maxTagPlaceholder={maxTagPlaceholder || getMaxTagPlaceholder}
-      maxTagTextLength={maxTagTextLength}
       menuItemSelectedIcon=""
-      mode={isMultiSelect ? "multiple" : undefined}
+      mode={isMultiSelect ? "tags" : undefined}
+      onDropdownVisibleChange={handleDropdownVisibleChange}
+      optionLabelProp={optionLabelProp}
       placeholder={placeholder}
+      searchValue={searchValue}
       showArrow
-      showSearch={showSearch}
       tagRender={(props) => {
+        if (rest.tagRender) {
+          return rest.tagRender(props);
+        }
+
         const { closable, label, onClose } = props;
 
         return (
-          <Tag isClosable={closable} onClose={onClose}>
+          <Tag isClosable={closable} kind="info" onClose={onClose}>
             {label}
           </Tag>
         );