From 40579f1b63ba7728a70dd6ceeb61d48a4444bda5 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Thu, 12 Sep 2024 10:16:37 +0530
Subject: [PATCH 01/15] feat(select): add core logic for isClearable

---
 packages/components/select/src/select.tsx     | 19 +++++--
 packages/components/select/src/use-select.ts  | 52 ++++++++++++++++++-
 .../select/stories/select.stories.tsx         | 39 ++++++++++++++
 packages/core/theme/src/components/select.ts  | 27 ++++++++++
 4 files changed, 130 insertions(+), 7 deletions(-)

diff --git a/packages/components/select/src/select.tsx b/packages/components/select/src/select.tsx
index 83aa324c9c..9b3f0011cd 100644
--- a/packages/components/select/src/select.tsx
+++ b/packages/components/select/src/select.tsx
@@ -1,6 +1,6 @@
 import {Listbox} from "@nextui-org/listbox";
 import {FreeSoloPopover} from "@nextui-org/popover";
-import {ChevronDownIcon} from "@nextui-org/shared-icons";
+import {ChevronDownIcon, CloseFilledIcon} from "@nextui-org/shared-icons";
 import {Spinner} from "@nextui-org/spinner";
 import {forwardRef} from "@nextui-org/system";
 import {ScrollShadow} from "@nextui-org/scroll-shadow";
@@ -30,7 +30,9 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
     placeholder,
     renderValue,
     isOutsideLeft,
+    isClearable,
     disableAnimation,
+    getClearButtonProps,
     getBaseProps,
     getLabelProps,
     getTriggerProps,
@@ -51,6 +53,15 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
   const labelContent = label ? <label {...getLabelProps()}>{label}</label> : null;
 
   const clonedIcon = cloneElement(selectorIcon as ReactElement, getSelectorIconProps());
+  const end = useMemo(() => {
+    if (isClearable) {
+      return state.selectedItems?.length ? (
+        <span {...getClearButtonProps()}>{endContent || <CloseFilledIcon />}</span>
+      ) : null;
+    }
+
+    return endContent;
+  }, [isClearable, getClearButtonProps]);
 
   const helperWrapper = useMemo(() => {
     if (!hasHelper) return null;
@@ -124,10 +135,8 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
           <div {...getInnerWrapperProps()}>
             {startContent}
             <span {...getValueProps()}>{renderSelectedItem}</span>
-            {endContent && state.selectedItems && (
-              <VisuallyHidden elementType="span">,</VisuallyHidden>
-            )}
-            {endContent}
+            {end && state.selectedItems && <VisuallyHidden elementType="span">,</VisuallyHidden>}
+            {end}
           </div>
           {renderIndicator}
         </Component>
diff --git a/packages/components/select/src/use-select.ts b/packages/components/select/src/use-select.ts
index 5f82069ed1..906225a5fe 100644
--- a/packages/components/select/src/use-select.ts
+++ b/packages/components/select/src/use-select.ts
@@ -17,7 +17,7 @@ import {useAriaButton} from "@nextui-org/use-aria-button";
 import {useFocusRing} from "@react-aria/focus";
 import {clsx, dataAttr, objectToDeps} from "@nextui-org/shared-utils";
 import {mergeProps} from "@react-aria/utils";
-import {useHover} from "@react-aria/interactions";
+import {useHover, usePress} from "@react-aria/interactions";
 import {PopoverProps} from "@nextui-org/popover";
 import {ScrollShadowProps} from "@nextui-org/scroll-shadow";
 import {
@@ -77,6 +77,9 @@ interface Props<T> extends Omit<HTMLNextUIProps<"select">, keyof SelectVariantPr
   startContent?: React.ReactNode;
   /**
    * Element to be rendered in the right side of the select.
+   * if you pass this prop and the `onClear` prop, the passed element
+   * will have the clear button props and it will be rendered instead of the
+   * default clear button.
    */
   endContent?: ReactNode;
   /**
@@ -132,6 +135,11 @@ interface Props<T> extends Omit<HTMLNextUIProps<"select">, keyof SelectVariantPr
    * Handler that is called when the selection changes.
    */
   onSelectionChange?: (keys: SharedSelection) => void;
+  /**
+   * Callback fired when the value is cleared.
+   * if you pass this prop, the clear button will be shown.
+   */
+  onClear?: () => void;
 }
 
 interface SelectData {
@@ -186,6 +194,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
     validationState,
     onChange,
     onClose,
+    onClear,
     className,
     classNames,
     ...otherProps
@@ -295,11 +304,23 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
     triggerRef,
   );
 
+  const handleClear = useCallback(() => {
+    state.setSelectedKeys(new Set([]));
+    if (onClear) onClear();
+  }, [onClear, state]);
+
+  const {pressProps: clearPressProps} = usePress({
+    isDisabled: !!originalProps?.isDisabled,
+    onPress: handleClear,
+  });
+
   const isInvalid = originalProps.isInvalid || validationState === "invalid" || isAriaInvalid;
 
   const {isPressed, buttonProps} = useAriaButton(triggerProps, triggerRef);
 
   const {focusProps, isFocused, isFocusVisible} = useFocusRing();
+  const {focusProps: clearFocusProps, isFocusVisible: isClearButtonFocusVisible} = useFocusRing();
+
   const {isHovered, hoverProps} = useHover({isDisabled: originalProps.isDisabled});
 
   const labelPlacement = useMemo<SelectVariantProps["labelPlacement"]>(() => {
@@ -316,6 +337,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
     (labelPlacement === "outside" && (hasPlaceholder || !!originalProps.isMultiline));
   const shouldLabelBeInside = labelPlacement === "inside";
   const isOutsideLeft = labelPlacement === "outside-left";
+  const isClearable = !!onClear || originalProps.isClearable;
 
   const isFilled =
     state.isOpen ||
@@ -334,11 +356,19 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
       select({
         ...variantProps,
         isInvalid,
+        isClearable,
         labelPlacement,
         disableAnimation,
         className,
       }),
-    [objectToDeps(variantProps), isInvalid, labelPlacement, disableAnimation, className],
+    [
+      objectToDeps(variantProps),
+      isClearable,
+      isInvalid,
+      labelPlacement,
+      disableAnimation,
+      className,
+    ],
   );
 
   // scroll the listbox to the selected item
@@ -630,6 +660,22 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
     [slots, spinnerRef, spinnerProps, classNames?.spinner],
   );
 
+  const getClearButtonProps: PropGetter = useCallback(
+    (props = {}) => {
+      return {
+        ...props,
+        role: "button",
+        tabIndex: 0,
+        "aria-label": "clear selection",
+        "data-slot": "clear-button",
+        "data-focus-visible": dataAttr(isClearButtonFocusVisible),
+        className: slots.clearButton({class: clsx(classNames?.clearButton, props?.className)}),
+        ...mergeProps(clearPressProps, clearFocusProps),
+      };
+    },
+    [slots, isClearButtonFocusVisible, clearPressProps, clearFocusProps, classNames?.clearButton],
+  );
+
   // store the data to be used in useHiddenSelect
   selectData.set(state, {
     isDisabled: originalProps?.isDisabled,
@@ -647,6 +693,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
     name,
     triggerRef,
     isLoading,
+    isClearable,
     placeholder,
     startContent,
     endContent,
@@ -665,6 +712,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
     errorMessage,
     getBaseProps,
     getTriggerProps,
+    getClearButtonProps,
     getLabelProps,
     getValueProps,
     getListboxProps,
diff --git a/packages/components/select/stories/select.stories.tsx b/packages/components/select/stories/select.stories.tsx
index 0a58ad10a3..cf2751e520 100644
--- a/packages/components/select/stories/select.stories.tsx
+++ b/packages/components/select/stories/select.stories.tsx
@@ -87,6 +87,37 @@ const Template = ({color, variant, ...args}: SelectProps) => (
   </Select>
 );
 
+const isClearableTemplate = ({color, variant, ...args}: SelectProps) => (
+  <div className="flex flex-col justify-center items-center h-full w-full">
+    <div className="my-1">
+      <h1>IsClearable = true</h1>
+      <Select
+        className="max-w-xs"
+        color={color}
+        isClearable={true}
+        label="Favorite Animal"
+        variant={variant}
+        {...args}
+      >
+        {items}
+      </Select>
+    </div>
+    <div className="my-1">
+      <h1>IsClearable = false</h1>
+      <Select
+        className="max-w-xs"
+        color={color}
+        isClearable={false}
+        label="Favorite Animal"
+        variant={variant}
+        {...args}
+      >
+        {items}
+      </Select>
+    </div>
+  </div>
+);
+
 const DynamicTemplate = ({color, variant, ...args}: SelectProps<Animal>) => (
   <Select
     className="max-w-xs"
@@ -1006,3 +1037,11 @@ export const CustomStyles = {
     },
   },
 };
+
+export const isClearable = {
+  render: isClearableTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};
diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts
index a490c59fba..07e50d2d39 100644
--- a/packages/core/theme/src/components/select.ts
+++ b/packages/core/theme/src/components/select.ts
@@ -28,6 +28,23 @@ const select = tv({
     listboxWrapper: "scroll-py-6 max-h-64 w-full",
     listbox: "",
     popoverContent: "w-full p-1 overflow-hidden",
+    clearButton: [
+      "w-4",
+      "h-4",
+      "z-10",
+      "absolute",
+      "end-12",
+      "start-auto",
+      "appearance-none",
+      "outline-none",
+      "select-none",
+      "hover:!opacity-100",
+      "cursor-pointer",
+      "active:!opacity-70",
+      "rounded-full",
+      // focus ring
+      ...dataFocusVisibleClasses,
+    ],
     helperWrapper: "p-1 flex relative flex-col gap-1.5",
     description: "text-tiny text-foreground-400",
     errorMessage: "text-tiny text-danger",
@@ -102,14 +119,17 @@ const select = tv({
         label: "text-tiny",
         trigger: "h-8 min-h-8 px-2 rounded-small",
         value: "text-small",
+        clearButton: "text-medium",
       },
       md: {
         trigger: "h-10 min-h-10 rounded-medium",
         value: "text-small",
+        clearButton: "text-large",
       },
       lg: {
         trigger: "h-12 min-h-12 rounded-large",
         value: "text-medium",
+        clearButton: "text-large",
       },
     },
     radius: {
@@ -147,6 +167,12 @@ const select = tv({
         base: "w-full",
       },
     },
+    isClearable: {
+      true: {
+        input: "peer pr-6 rtl:pr-0 rtl:pl-6",
+        clearButton: "peer-data-[filled=true]:opacity-70 peer-data-[filled=true]:block",
+      },
+    },
     isDisabled: {
       true: {
         base: "opacity-disabled pointer-events-none",
@@ -193,6 +219,7 @@ const select = tv({
           "motion-reduce:transition-none",
         ],
         selectorIcon: "transition-transform duration-150 ease motion-reduce:transition-none",
+        clearButton: ["transition-opacity", "motion-reduce:transition-none"],
       },
     },
     disableSelectorIconRotation: {

From 3954594ecd7e8142cb4f62c5353c5d7045c673e6 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Fri, 13 Sep 2024 18:05:28 +0530
Subject: [PATCH 02/15] fix: fix alignment for clear button in select component

---
 packages/components/select/src/select.tsx     | 15 +++--
 .../select/stories/select.stories.tsx         | 56 +++++++++----------
 packages/core/theme/src/components/select.ts  |  2 +-
 3 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/packages/components/select/src/select.tsx b/packages/components/select/src/select.tsx
index 9b3f0011cd..40b188baec 100644
--- a/packages/components/select/src/select.tsx
+++ b/packages/components/select/src/select.tsx
@@ -53,15 +53,14 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
   const labelContent = label ? <label {...getLabelProps()}>{label}</label> : null;
 
   const clonedIcon = cloneElement(selectorIcon as ReactElement, getSelectorIconProps());
-  const end = useMemo(() => {
+
+  const clearButton = useMemo(() => {
     if (isClearable) {
       return state.selectedItems?.length ? (
         <span {...getClearButtonProps()}>{endContent || <CloseFilledIcon />}</span>
       ) : null;
     }
-
-    return endContent;
-  }, [isClearable, getClearButtonProps]);
+  }, [isClearable, getClearButtonProps, state]);
 
   const helperWrapper = useMemo(() => {
     if (!hasHelper) return null;
@@ -135,9 +134,13 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
           <div {...getInnerWrapperProps()}>
             {startContent}
             <span {...getValueProps()}>{renderSelectedItem}</span>
-            {end && state.selectedItems && <VisuallyHidden elementType="span">,</VisuallyHidden>}
-            {end}
+            {endContent && state.selectedItems && (
+              <VisuallyHidden elementType="span">,</VisuallyHidden>
+            )}
+            {/* we display endContent only when we are not displaying clear button */}
+            {!isClearable && endContent}
           </div>
+          {clearButton}
           {renderIndicator}
         </Component>
         {helperWrapper}
diff --git a/packages/components/select/stories/select.stories.tsx b/packages/components/select/stories/select.stories.tsx
index cf2751e520..752b6d36e9 100644
--- a/packages/components/select/stories/select.stories.tsx
+++ b/packages/components/select/stories/select.stories.tsx
@@ -87,34 +87,30 @@ const Template = ({color, variant, ...args}: SelectProps) => (
   </Select>
 );
 
-const isClearableTemplate = ({color, variant, ...args}: SelectProps) => (
-  <div className="flex flex-col justify-center items-center h-full w-full">
-    <div className="my-1">
-      <h1>IsClearable = true</h1>
-      <Select
-        className="max-w-xs"
-        color={color}
-        isClearable={true}
-        label="Favorite Animal"
-        variant={variant}
-        {...args}
-      >
-        {items}
-      </Select>
-    </div>
-    <div className="my-1">
-      <h1>IsClearable = false</h1>
-      <Select
-        className="max-w-xs"
-        color={color}
-        isClearable={false}
-        label="Favorite Animal"
-        variant={variant}
-        {...args}
-      >
-        {items}
-      </Select>
-    </div>
+const ClearableTemplate = ({color, variant, ...args}: SelectProps) => (
+  <div className="flex flex-col h-full w-full items-center justify-center">
+    <h2>IsClearable = true</h2>
+    <Select
+      className="max-w-xs my-4"
+      color={color}
+      isClearable={true}
+      label="Favorite Animal"
+      variant={variant}
+      {...args}
+    >
+      {items}
+    </Select>
+    <h2>IsClearable = false</h2>
+    <Select
+      className="max-w-xs my-4"
+      color={color}
+      isClearable={false}
+      label="Favorite Animal"
+      variant={variant}
+      {...args}
+    >
+      {items}
+    </Select>
   </div>
 );
 
@@ -1038,8 +1034,8 @@ export const CustomStyles = {
   },
 };
 
-export const isClearable = {
-  render: isClearableTemplate,
+export const Clearable = {
+  render: ClearableTemplate,
 
   args: {
     ...defaultProps,
diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts
index 07e50d2d39..d2d52e5ab8 100644
--- a/packages/core/theme/src/components/select.ts
+++ b/packages/core/theme/src/components/select.ts
@@ -33,7 +33,7 @@ const select = tv({
       "h-4",
       "z-10",
       "absolute",
-      "end-12",
+      "end-10",
       "start-auto",
       "appearance-none",
       "outline-none",

From 798ee73eb7db15bcaf9357b900624f62c8f01f97 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Fri, 13 Sep 2024 18:07:33 +0530
Subject: [PATCH 03/15] docs: add docs for clear button, isClearable, onClear

---
 apps/docs/content/components/select/index.ts  |  2 +
 .../content/components/select/isClearable.ts  | 58 +++++++++++++++++++
 apps/docs/content/docs/components/select.mdx  | 10 +++-
 3 files changed, 69 insertions(+), 1 deletion(-)
 create mode 100644 apps/docs/content/components/select/isClearable.ts

diff --git a/apps/docs/content/components/select/index.ts b/apps/docs/content/components/select/index.ts
index 1b28504d4d..efbb02e79d 100644
--- a/apps/docs/content/components/select/index.ts
+++ b/apps/docs/content/components/select/index.ts
@@ -27,6 +27,7 @@ import multipleControlledOnChange from "./multiple-controlled-onchange";
 import multipleWithChips from "./multiple-chips";
 import customSelectorIcon from "./custom-selector-icon";
 import customStyles from "./custom-styles";
+import isClearable from "./isClearable";
 
 export const selectContent = {
   usage,
@@ -58,4 +59,5 @@ export const selectContent = {
   multipleWithChips,
   customSelectorIcon,
   customStyles,
+  isClearable,
 };
diff --git a/apps/docs/content/components/select/isClearable.ts b/apps/docs/content/components/select/isClearable.ts
new file mode 100644
index 0000000000..d29941f4bc
--- /dev/null
+++ b/apps/docs/content/components/select/isClearable.ts
@@ -0,0 +1,58 @@
+const data = `export const animals = [
+    {key: "cat", label: "Cat"},
+    {key: "dog", label: "Dog"},
+    {key: "elephant", label: "Elephant"},
+    {key: "lion", label: "Lion"},
+    {key: "tiger", label: "Tiger"},
+    {key: "giraffe", label: "Giraffe"},
+    {key: "dolphin", label: "Dolphin"},
+    {key: "penguin", label: "Penguin"},
+    {key: "zebra", label: "Zebra"},
+    {key: "shark", label: "Shark"},
+    {key: "whale", label: "Whale"},
+    {key: "otter", label: "Otter"},
+    {key: "crocodile", label: "Crocodile"}
+  ];`;
+
+const App = `import {Select, SelectItem} from "@nextui-org/react";
+import {animals} from "./data";
+
+export default function App() {
+  return (
+      <div className="flex flex-col w-screen justify-center items-center">
+              <h2>IsClearable = true</h2>
+              <Select
+                  className="max-w-xs my-5"
+                  isClearable={true}
+                  label="Favorite Animal"
+              >
+              {animals.map((animal) => (
+              <SelectItem key={animal.key}>
+                  {animal.label}
+              </SelectItem>
+              ))}
+              </Select>
+              <h2>IsClearable = true</h2>
+              <Select
+                  className="max-w-xs my-5"
+                  isClearable={true}
+                  label="Favorite Animal"
+              >
+              {animals.map((animal) => (
+              <SelectItem key={animal.key}>
+                  {animal.label}
+              </SelectItem>
+              ))}
+              </Select>
+    </div>
+  );
+}`;
+
+const react = {
+  "/App.jsx": App,
+  "/data.js": data,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/docs/components/select.mdx b/apps/docs/content/docs/components/select.mdx
index 40cc3e44ea..bd3805f45e 100644
--- a/apps/docs/content/docs/components/select.mdx
+++ b/apps/docs/content/docs/components/select.mdx
@@ -148,6 +148,13 @@ You can combine the `isInvalid` and `errorMessage` properties to show an invalid
 
 <CodeDemo title="With Error Message" files={selectContent.errorMessage} />
 
+### Clear Button
+
+If you pass the `isClearable` property to the select, or provide a `onClear` function, it will have a clear button which will be visible only when the some value is selected.
+A default clear button is displayed if `endContent` property is not passed.
+
+<CodeDemo title="Clear Button" files={selectContent.isClearable} />
+
 ### Controlled
 
 You can use the `selectedKeys` and `onSelectionChange` / `onChange` properties to control the select value.
@@ -383,6 +390,7 @@ the popover and listbox components.
 | isDisabled                  | `boolean`                                                                                                                                                                                                              | Whether the select is disabled.                                                                                        | `false`            |
 | isMultiline                 | `boolean`                                                                                                                                                                                                              | Whether the select should allow multiple lines of text.                                                                | `false`            |
 | isInvalid                   | `boolean`                                                                                                                                                                                                              | Whether the select is invalid.                                                                                         | `false`            |
+| isClearable                 | `boolean`                                                                                                                                                                                                              | Whether the select should have a clear button.                                                                         | `false`            |
 | validationState             | `valid` \| `invalid`                                                                                                                                                                                                   | Whether the select should display its "valid" or "invalid" visual styling. (**Deprecated**) use **isInvalid** instead. | -                  |
 | showScrollIndicators        | `boolean`                                                                                                                                                                                                              | Whether the select should show scroll indicators when the listbox is scrollable.                                       | `true`             |
 | autoFocus                   | `boolean`                                                                                                                                                                                                              | Whether the select should be focused on the first mount.                                                               | `false`            |
@@ -403,7 +411,7 @@ the popover and listbox components.
 | onSelectionChange | `(keys: "all" \| Set<React.Key> & {anchorKey?: string; currentKey?: string}) => void`                 | Callback fired when the selected keys change.                                        |
 | onChange          | `React.ChangeEvent<HTMLSelectElement>`        | Native select change event, fired when the selected value changes.                   |
 | renderValue       | [RenderValueFunction](#render-value-function) | Function to render the value of the select. It renders the selected item by default. |
-
+| onClear           | `() => void`                                  | Handler that is called when the clear button is clicked.
 ---
 
 ### SelectItem Props

From 6c0d2a31ade1bc0aa3313c1956c93ec6faf25f97 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Fri, 13 Sep 2024 18:17:55 +0530
Subject: [PATCH 04/15] chore: lint the code

---
 .../content/components/select/isClearable.ts  | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/apps/docs/content/components/select/isClearable.ts b/apps/docs/content/components/select/isClearable.ts
index d29941f4bc..27dee4c5d7 100644
--- a/apps/docs/content/components/select/isClearable.ts
+++ b/apps/docs/content/components/select/isClearable.ts
@@ -20,30 +20,30 @@ import {animals} from "./data";
 export default function App() {
   return (
       <div className="flex flex-col w-screen justify-center items-center">
-              <h2>IsClearable = true</h2>
-              <Select
-                  className="max-w-xs my-5"
-                  isClearable={true}
-                  label="Favorite Animal"
-              >
-              {animals.map((animal) => (
-              <SelectItem key={animal.key}>
-                  {animal.label}
-              </SelectItem>
-              ))}
-              </Select>
-              <h2>IsClearable = true</h2>
-              <Select
-                  className="max-w-xs my-5"
-                  isClearable={true}
-                  label="Favorite Animal"
-              >
-              {animals.map((animal) => (
-              <SelectItem key={animal.key}>
-                  {animal.label}
-              </SelectItem>
-              ))}
-              </Select>
+      <h2>IsClearable = true</h2>
+      <Select
+          className="max-w-xs my-5"
+          isClearable={true}
+          label="Favorite Animal"
+      >
+      {animals.map((animal) => (
+      <SelectItem key={animal.key}>
+          {animal.label}
+      </SelectItem>
+      ))}
+      </Select>
+      <h2>IsClearable = true</h2>
+      <Select
+          className="max-w-xs my-5"
+          isClearable={true}
+          label="Favorite Animal"
+      >
+      {animals.map((animal) => (
+      <SelectItem key={animal.key}>
+          {animal.label}
+      </SelectItem>
+      ))}
+      </Select>
     </div>
   );
 }`;

From c6836948465799463ff216b89f6e0c4b5e063ae6 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Fri, 13 Sep 2024 18:25:47 +0530
Subject: [PATCH 05/15] chore: add changeset

---
 .changeset/olive-buckets-own.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/olive-buckets-own.md

diff --git a/.changeset/olive-buckets-own.md b/.changeset/olive-buckets-own.md
new file mode 100644
index 0000000000..4951e30de5
--- /dev/null
+++ b/.changeset/olive-buckets-own.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/select": minor
+---
+
+Added isClearable prop, and onClear event handler to select component

From 179b53089225544c34f57cad2c7d6941552b5658 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sat, 14 Sep 2024 11:08:19 +0530
Subject: [PATCH 06/15] chore: remove case for isClearable=false from docs and
 story

---
 .../content/components/select/isClearable.ts  | 37 ++++++-------------
 .../select/stories/select.stories.tsx         | 34 +++++------------
 2 files changed, 22 insertions(+), 49 deletions(-)

diff --git a/apps/docs/content/components/select/isClearable.ts b/apps/docs/content/components/select/isClearable.ts
index 27dee4c5d7..30e28deb12 100644
--- a/apps/docs/content/components/select/isClearable.ts
+++ b/apps/docs/content/components/select/isClearable.ts
@@ -19,31 +19,18 @@ import {animals} from "./data";
 
 export default function App() {
   return (
-      <div className="flex flex-col w-screen justify-center items-center">
-      <h2>IsClearable = true</h2>
-      <Select
-          className="max-w-xs my-5"
-          isClearable={true}
-          label="Favorite Animal"
-      >
-      {animals.map((animal) => (
-      <SelectItem key={animal.key}>
-          {animal.label}
-      </SelectItem>
-      ))}
-      </Select>
-      <h2>IsClearable = true</h2>
-      <Select
-          className="max-w-xs my-5"
-          isClearable={true}
-          label="Favorite Animal"
-      >
-      {animals.map((animal) => (
-      <SelectItem key={animal.key}>
-          {animal.label}
-      </SelectItem>
-      ))}
-      </Select>
+      <div className="flex w-screen justify-center items-center">
+        <Select
+            className="max-w-xs my-5"
+            isClearable={true}
+            label="Favorite Animal"
+        >
+          {animals.map((animal) => (
+          <SelectItem key={animal.key}>
+              {animal.label}
+          </SelectItem>
+          ))}
+        </Select>
     </div>
   );
 }`;
diff --git a/packages/components/select/stories/select.stories.tsx b/packages/components/select/stories/select.stories.tsx
index 752b6d36e9..e31ada6b69 100644
--- a/packages/components/select/stories/select.stories.tsx
+++ b/packages/components/select/stories/select.stories.tsx
@@ -88,30 +88,16 @@ const Template = ({color, variant, ...args}: SelectProps) => (
 );
 
 const ClearableTemplate = ({color, variant, ...args}: SelectProps) => (
-  <div className="flex flex-col h-full w-full items-center justify-center">
-    <h2>IsClearable = true</h2>
-    <Select
-      className="max-w-xs my-4"
-      color={color}
-      isClearable={true}
-      label="Favorite Animal"
-      variant={variant}
-      {...args}
-    >
-      {items}
-    </Select>
-    <h2>IsClearable = false</h2>
-    <Select
-      className="max-w-xs my-4"
-      color={color}
-      isClearable={false}
-      label="Favorite Animal"
-      variant={variant}
-      {...args}
-    >
-      {items}
-    </Select>
-  </div>
+  <Select
+    className="max-w-xs my-4"
+    color={color}
+    isClearable={true}
+    label="Favorite Animal"
+    variant={variant}
+    {...args}
+  >
+    {items}
+  </Select>
 );
 
 const DynamicTemplate = ({color, variant, ...args}: SelectProps<Animal>) => (

From 5635e4f3c69e0b2514e68ae449eae5fdfc7cd352 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sun, 29 Sep 2024 22:42:28 +0530
Subject: [PATCH 07/15] chore(select): code refactor

---
 packages/components/select/src/select.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/components/select/src/select.tsx b/packages/components/select/src/select.tsx
index 40b188baec..90bee99b9e 100644
--- a/packages/components/select/src/select.tsx
+++ b/packages/components/select/src/select.tsx
@@ -55,11 +55,13 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
   const clonedIcon = cloneElement(selectorIcon as ReactElement, getSelectorIconProps());
 
   const clearButton = useMemo(() => {
-    if (isClearable) {
-      return state.selectedItems?.length ? (
-        <span {...getClearButtonProps()}>{endContent || <CloseFilledIcon />}</span>
-      ) : null;
+    if (isClearable && state.selectedItems?.length) {
+      return (
+        <span {...getClearButtonProps()}>{endContent ? endContent : <CloseFilledIcon />}</span>
+      );
     }
+
+    return null;
   }, [isClearable, getClearButtonProps, state]);
 
   const helperWrapper = useMemo(() => {
@@ -137,7 +139,10 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
             {endContent && state.selectedItems && (
               <VisuallyHidden elementType="span">,</VisuallyHidden>
             )}
-            {/* we display endContent only when we are not displaying clear button */}
+            {/**
+             * we display endContent seperately only when we are not displaying clear button.
+             * otherwise, we would use it as clear button.
+             */}
             {!isClearable && endContent}
           </div>
           {clearButton}

From 2d74e6d963f9f7ca1af8529900c4d49f28ba575e Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sat, 12 Oct 2024 12:54:08 +0530
Subject: [PATCH 08/15] chore(select): update logic for clear button and add
 docs

---
 .../content/components/select/isClearable.ts  | 37 +++++++++++++++++++
 apps/docs/content/docs/components/select.mdx  |  3 +-
 packages/components/select/src/select.tsx     | 24 +++++++-----
 packages/components/select/src/use-select.ts  |  6 +--
 .../select/stories/select.stories.tsx         | 18 ++-------
 packages/core/theme/src/components/select.ts  |  5 +--
 6 files changed, 61 insertions(+), 32 deletions(-)

diff --git a/apps/docs/content/components/select/isClearable.ts b/apps/docs/content/components/select/isClearable.ts
index 30e28deb12..f01fe820fc 100644
--- a/apps/docs/content/components/select/isClearable.ts
+++ b/apps/docs/content/components/select/isClearable.ts
@@ -14,8 +14,43 @@ const data = `export const animals = [
     {key: "crocodile", label: "Crocodile"}
   ];`;
 
+const PetBoldIcon = `export const PetBoldIcon = (props) => (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M19.0803 15.7203C18.4903 12.1903 15.1003 9.32031 11.5203 9.32031C7.63028 9.32031 4.21028 12.4703 3.88028 16.3503C3.75028 17.8503 4.23028 19.2703 5.22028 20.3403C6.20028 21.4103 7.58028 22.0003 9.08028 22.0003H13.7603C15.4503 22.0003 16.9303 21.3403 17.9403 20.1503C18.9503 18.9603 19.3503 17.3803 19.0803 15.7203Z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.2796 7.86C11.8978 7.86 13.2096 6.54819 13.2096 4.93C13.2096 3.31181 11.8978 2 10.2796 2C8.66141 2 7.34961 3.31181 7.34961 4.93C7.34961 6.54819 8.66141 7.86 10.2796 7.86Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.94 9.02844C18.2876 9.02844 19.38 7.93601 19.38 6.58844C19.38 5.24086 18.2876 4.14844 16.94 4.14844C15.5924 4.14844 14.5 5.24086 14.5 6.58844C14.5 7.93601 15.5924 9.02844 16.94 9.02844Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20.5496 12.9313C21.6266 12.9313 22.4996 12.0582 22.4996 10.9812C22.4996 9.90429 21.6266 9.03125 20.5496 9.03125C19.4727 9.03125 18.5996 9.90429 18.5996 10.9812C18.5996 12.0582 19.4727 12.9313 20.5496 12.9313Z"
+        fill="currentColor"
+      />
+      <path
+        d="M3.94 10.9816C5.28757 10.9816 6.38 9.88914 6.38 8.54156C6.38 7.19399 5.28757 6.10156 3.94 6.10156C2.59243 6.10156 1.5 7.19399 1.5 8.54156C1.5 9.88914 2.59243 10.9816 3.94 10.9816Z"
+        fill="currentColor"
+      />
+    </svg>
+  );`;
+
 const App = `import {Select, SelectItem} from "@nextui-org/react";
 import {animals} from "./data";
+import {PetBoldIcon} from "./PetBoldIcon";
 
 export default function App() {
   return (
@@ -24,6 +59,7 @@ export default function App() {
             className="max-w-xs my-5"
             isClearable={true}
             label="Favorite Animal"
+            endContent={<PetBoldIcon />}
         >
           {animals.map((animal) => (
           <SelectItem key={animal.key}>
@@ -38,6 +74,7 @@ export default function App() {
 const react = {
   "/App.jsx": App,
   "/data.js": data,
+  "/PetBoldIcon.jsx": PetBoldIcon,
 };
 
 export default {
diff --git a/apps/docs/content/docs/components/select.mdx b/apps/docs/content/docs/components/select.mdx
index d870168339..1edb25ae6a 100644
--- a/apps/docs/content/docs/components/select.mdx
+++ b/apps/docs/content/docs/components/select.mdx
@@ -150,8 +150,7 @@ You can combine the `isInvalid` and `errorMessage` properties to show an invalid
 
 ### Clear Button
 
-If you pass the `isClearable` property to the select, or provide a `onClear` function, it will have a clear button which will be visible only when the some value is selected.
-A default clear button is displayed if `endContent` property is not passed.
+If you pass the `isClearable` property to the select, it will have a clear button which will be visible only when some value is selected.
 
 <CodeDemo title="Clear Button" files={selectContent.isClearable} />
 
diff --git a/packages/components/select/src/select.tsx b/packages/components/select/src/select.tsx
index 90bee99b9e..e116d78a8f 100644
--- a/packages/components/select/src/select.tsx
+++ b/packages/components/select/src/select.tsx
@@ -56,13 +56,24 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
 
   const clearButton = useMemo(() => {
     if (isClearable && state.selectedItems?.length) {
+      return <span {...getClearButtonProps()}>{<CloseFilledIcon />}</span>;
+    }
+
+    return null;
+  }, [isClearable, getClearButtonProps, state.selectedItems?.length]);
+
+  const end = useMemo(() => {
+    if (clearButton) {
       return (
-        <span {...getClearButtonProps()}>{endContent ? endContent : <CloseFilledIcon />}</span>
+        <div className="flex end-18">
+          {clearButton}
+          {endContent && <span className="ms-3">{endContent}</span>}
+        </div>
       );
     }
 
-    return null;
-  }, [isClearable, getClearButtonProps, state]);
+    return endContent && <span className="mb-4">{endContent}</span>;
+  }, [clearButton, endContent]);
 
   const helperWrapper = useMemo(() => {
     if (!hasHelper) return null;
@@ -139,13 +150,8 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
             {endContent && state.selectedItems && (
               <VisuallyHidden elementType="span">,</VisuallyHidden>
             )}
-            {/**
-             * we display endContent seperately only when we are not displaying clear button.
-             * otherwise, we would use it as clear button.
-             */}
-            {!isClearable && endContent}
+            {end}
           </div>
-          {clearButton}
           {renderIndicator}
         </Component>
         {helperWrapper}
diff --git a/packages/components/select/src/use-select.ts b/packages/components/select/src/use-select.ts
index 628b2b30e0..a1e4453889 100644
--- a/packages/components/select/src/use-select.ts
+++ b/packages/components/select/src/use-select.ts
@@ -307,7 +307,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
 
   const handleClear = useCallback(() => {
     state.setSelectedKeys(new Set([]));
-    if (onClear) onClear();
+    onClear?.();
   }, [onClear, state]);
 
   const {pressProps: clearPressProps} = usePress({
@@ -338,7 +338,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
     (labelPlacement === "outside" && (hasPlaceholder || !!originalProps.isMultiline));
   const shouldLabelBeInside = labelPlacement === "inside";
   const isOutsideLeft = labelPlacement === "outside-left";
-  const isClearable = !!onClear || originalProps.isClearable;
+  const isClearable = originalProps.isClearable;
 
   const isFilled =
     state.isOpen ||
@@ -669,7 +669,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
       return {
         ...props,
         role: "button",
-        tabIndex: 0,
+        tabIndex: -1,
         "aria-label": "clear selection",
         "data-slot": "clear-button",
         "data-focus-visible": dataAttr(isClearButtonFocusVisible),
diff --git a/packages/components/select/stories/select.stories.tsx b/packages/components/select/stories/select.stories.tsx
index e31ada6b69..20e0ee9751 100644
--- a/packages/components/select/stories/select.stories.tsx
+++ b/packages/components/select/stories/select.stories.tsx
@@ -87,19 +87,6 @@ const Template = ({color, variant, ...args}: SelectProps) => (
   </Select>
 );
 
-const ClearableTemplate = ({color, variant, ...args}: SelectProps) => (
-  <Select
-    className="max-w-xs my-4"
-    color={color}
-    isClearable={true}
-    label="Favorite Animal"
-    variant={variant}
-    {...args}
-  >
-    {items}
-  </Select>
-);
-
 const DynamicTemplate = ({color, variant, ...args}: SelectProps<Animal>) => (
   <Select
     className="max-w-xs"
@@ -1021,9 +1008,10 @@ export const CustomStyles = {
 };
 
 export const Clearable = {
-  render: ClearableTemplate,
-
+  render: Template,
   args: {
     ...defaultProps,
+    isClearable: true,
+    endContent: <PetBoldIcon />,
   },
 };
diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts
index d2d52e5ab8..eff6392b2e 100644
--- a/packages/core/theme/src/components/select.ts
+++ b/packages/core/theme/src/components/select.ts
@@ -32,8 +32,8 @@ const select = tv({
       "w-4",
       "h-4",
       "z-10",
-      "absolute",
-      "end-10",
+      "mb-4",
+      "relative",
       "start-auto",
       "appearance-none",
       "outline-none",
@@ -169,7 +169,6 @@ const select = tv({
     },
     isClearable: {
       true: {
-        input: "peer pr-6 rtl:pr-0 rtl:pl-6",
         clearButton: "peer-data-[filled=true]:opacity-70 peer-data-[filled=true]:block",
       },
     },

From 450c77d0ab8fc30296ebe2e1abf85784b685af34 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Tue, 15 Oct 2024 19:22:44 +0530
Subject: [PATCH 09/15] chore(select): implement wingkwong's suggestions

---
 .changeset/olive-buckets-own.md                                | 3 ++-
 apps/docs/content/components/select/index.ts                   | 2 +-
 .../components/select/{isClearable.ts => is-clearable.ts}      | 0
 packages/components/select/package.json                        | 2 +-
 packages/components/select/src/select.tsx                      | 1 -
 packages/components/select/stories/select.stories.tsx          | 1 +
 6 files changed, 5 insertions(+), 4 deletions(-)
 rename apps/docs/content/components/select/{isClearable.ts => is-clearable.ts} (100%)

diff --git a/.changeset/olive-buckets-own.md b/.changeset/olive-buckets-own.md
index 4951e30de5..fe10eb7e7a 100644
--- a/.changeset/olive-buckets-own.md
+++ b/.changeset/olive-buckets-own.md
@@ -1,5 +1,6 @@
 ---
 "@nextui-org/select": minor
+"@nextui-org/theme": minor
 ---
 
-Added isClearable prop, and onClear event handler to select component
+add `isClearable` and `onClear` prop to Select component (#2239)
diff --git a/apps/docs/content/components/select/index.ts b/apps/docs/content/components/select/index.ts
index efbb02e79d..18d87e7e0a 100644
--- a/apps/docs/content/components/select/index.ts
+++ b/apps/docs/content/components/select/index.ts
@@ -27,7 +27,7 @@ import multipleControlledOnChange from "./multiple-controlled-onchange";
 import multipleWithChips from "./multiple-chips";
 import customSelectorIcon from "./custom-selector-icon";
 import customStyles from "./custom-styles";
-import isClearable from "./isClearable";
+import isClearable from "./is-clearable";
 
 export const selectContent = {
   usage,
diff --git a/apps/docs/content/components/select/isClearable.ts b/apps/docs/content/components/select/is-clearable.ts
similarity index 100%
rename from apps/docs/content/components/select/isClearable.ts
rename to apps/docs/content/components/select/is-clearable.ts
diff --git a/packages/components/select/package.json b/packages/components/select/package.json
index 7c2bf17fa8..1b0788ef12 100644
--- a/packages/components/select/package.json
+++ b/packages/components/select/package.json
@@ -35,7 +35,7 @@
   },
   "peerDependencies": {
     "@nextui-org/system": ">=2.0.0",
-    "@nextui-org/theme": ">=2.1.0",
+    "@nextui-org/theme": ">=2.2.0",
     "framer-motion": ">=10.17.0",
     "react": ">=18",
     "react-dom": ">=18"
diff --git a/packages/components/select/src/select.tsx b/packages/components/select/src/select.tsx
index da6c46ad0e..e64045434c 100644
--- a/packages/components/select/src/select.tsx
+++ b/packages/components/select/src/select.tsx
@@ -29,7 +29,6 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
     endContent,
     placeholder,
     renderValue,
-    isOutsideLeft,
     isClearable,
     shouldLabelBeOutside,
     disableAnimation,
diff --git a/packages/components/select/stories/select.stories.tsx b/packages/components/select/stories/select.stories.tsx
index 20e0ee9751..3f764c4b43 100644
--- a/packages/components/select/stories/select.stories.tsx
+++ b/packages/components/select/stories/select.stories.tsx
@@ -1013,5 +1013,6 @@ export const Clearable = {
     ...defaultProps,
     isClearable: true,
     endContent: <PetBoldIcon />,
+    onClear: () => console.log("Select cleared"),
   },
 };

From 60ecd78ebfbcf405c51206f86d9378675bd79064 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Wed, 23 Oct 2024 09:04:15 +0530
Subject: [PATCH 10/15] docs(select): pass onclear property to clear button

---
 apps/docs/content/components/select/is-clearable.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/docs/content/components/select/is-clearable.ts b/apps/docs/content/components/select/is-clearable.ts
index f01fe820fc..4fc20ad591 100644
--- a/apps/docs/content/components/select/is-clearable.ts
+++ b/apps/docs/content/components/select/is-clearable.ts
@@ -60,6 +60,7 @@ export default function App() {
             isClearable={true}
             label="Favorite Animal"
             endContent={<PetBoldIcon />}
+            onClear={() => console.log("Select cleared")}
         >
           {animals.map((animal) => (
           <SelectItem key={animal.key}>

From 5f49a0ddc3e5cf76f4fba2c4165ef3ea52f0946e Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sat, 26 Oct 2024 09:42:09 +0530
Subject: [PATCH 11/15] chore(select): theme version update, docs update

---
 apps/docs/content/docs/components/select.mdx          | 2 +-
 packages/components/select/package.json               | 2 +-
 packages/components/select/src/use-select.ts          | 3 ---
 packages/components/select/stories/select.stories.tsx | 1 +
 4 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/apps/docs/content/docs/components/select.mdx b/apps/docs/content/docs/components/select.mdx
index e95072ffd7..eee9c15922 100644
--- a/apps/docs/content/docs/components/select.mdx
+++ b/apps/docs/content/docs/components/select.mdx
@@ -150,7 +150,7 @@ You can combine the `isInvalid` and `errorMessage` properties to show an invalid
 
 ### Clear Button
 
-If you pass the `isClearable` property to the select, it will have a clear button which will be visible only when some value is selected.
+If you pass the `isClearable` property to the select, it will have a clear button which will be visible only when a value is selected.
 
 <CodeDemo title="Clear Button" files={selectContent.isClearable} />
 
diff --git a/packages/components/select/package.json b/packages/components/select/package.json
index 1b0788ef12..5eaee2016b 100644
--- a/packages/components/select/package.json
+++ b/packages/components/select/package.json
@@ -35,7 +35,7 @@
   },
   "peerDependencies": {
     "@nextui-org/system": ">=2.0.0",
-    "@nextui-org/theme": ">=2.2.0",
+    "@nextui-org/theme": ">=2.3.0",
     "framer-motion": ">=10.17.0",
     "react": ">=18",
     "react-dom": ">=18"
diff --git a/packages/components/select/src/use-select.ts b/packages/components/select/src/use-select.ts
index a1e4453889..0ed6d5beec 100644
--- a/packages/components/select/src/use-select.ts
+++ b/packages/components/select/src/use-select.ts
@@ -78,9 +78,6 @@ interface Props<T> extends Omit<HTMLNextUIProps<"select">, keyof SelectVariantPr
   startContent?: React.ReactNode;
   /**
    * Element to be rendered in the right side of the select.
-   * if you pass this prop and the `onClear` prop, the passed element
-   * will have the clear button props and it will be rendered instead of the
-   * default clear button.
    */
   endContent?: ReactNode;
   /**
diff --git a/packages/components/select/stories/select.stories.tsx b/packages/components/select/stories/select.stories.tsx
index 3f764c4b43..2cfde90d52 100644
--- a/packages/components/select/stories/select.stories.tsx
+++ b/packages/components/select/stories/select.stories.tsx
@@ -1013,6 +1013,7 @@ export const Clearable = {
     ...defaultProps,
     isClearable: true,
     endContent: <PetBoldIcon />,
+    // eslint-disable-next-line no-console
     onClear: () => console.log("Select cleared"),
   },
 };

From 50def02c0ca87517e2034fc0cea398f4bf6724ec Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Sat, 26 Oct 2024 11:55:14 +0530
Subject: [PATCH 12/15] fix(select): fix the focus behaviour of the clear
 button

---
 packages/components/select/src/select.tsx    | 2 +-
 packages/components/select/src/use-select.ts | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/components/select/src/select.tsx b/packages/components/select/src/select.tsx
index e64045434c..65a615a687 100644
--- a/packages/components/select/src/select.tsx
+++ b/packages/components/select/src/select.tsx
@@ -56,7 +56,7 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
 
   const clearButton = useMemo(() => {
     if (isClearable && state.selectedItems?.length) {
-      return <span {...getClearButtonProps()}>{<CloseFilledIcon />}</span>;
+      return <button {...getClearButtonProps()}>{<CloseFilledIcon />}</button>;
     }
 
     return null;
diff --git a/packages/components/select/src/use-select.ts b/packages/components/select/src/use-select.ts
index 0ed6d5beec..c9673015c6 100644
--- a/packages/components/select/src/use-select.ts
+++ b/packages/components/select/src/use-select.ts
@@ -305,6 +305,7 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
   const handleClear = useCallback(() => {
     state.setSelectedKeys(new Set([]));
     onClear?.();
+    domRef.current?.focus();
   }, [onClear, state]);
 
   const {pressProps: clearPressProps} = usePress({

From 0684bffceac38e50c7a165e6ab83a1680ed7a894 Mon Sep 17 00:00:00 2001
From: Abhinav Agarwal <abhinavagrawal700@gmail.com>
Date: Mon, 25 Nov 2024 10:45:03 +0530
Subject: [PATCH 13/15] fix(select): fix hover, remove endContent, remove
 onClear

---
 apps/docs/content/components/select/is-clearable.ts   | 2 --
 packages/components/select/stories/select.stories.tsx | 3 ---
 packages/core/theme/src/components/select.ts          | 1 +
 3 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/apps/docs/content/components/select/is-clearable.ts b/apps/docs/content/components/select/is-clearable.ts
index 4fc20ad591..6e5b295e9b 100644
--- a/apps/docs/content/components/select/is-clearable.ts
+++ b/apps/docs/content/components/select/is-clearable.ts
@@ -59,8 +59,6 @@ export default function App() {
             className="max-w-xs my-5"
             isClearable={true}
             label="Favorite Animal"
-            endContent={<PetBoldIcon />}
-            onClear={() => console.log("Select cleared")}
         >
           {animals.map((animal) => (
           <SelectItem key={animal.key}>
diff --git a/packages/components/select/stories/select.stories.tsx b/packages/components/select/stories/select.stories.tsx
index 2cfde90d52..d70e49b9a6 100644
--- a/packages/components/select/stories/select.stories.tsx
+++ b/packages/components/select/stories/select.stories.tsx
@@ -1012,8 +1012,5 @@ export const Clearable = {
   args: {
     ...defaultProps,
     isClearable: true,
-    endContent: <PetBoldIcon />,
-    // eslint-disable-next-line no-console
-    onClear: () => console.log("Select cleared"),
   },
 };
diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts
index 2d73f7fd4e..081ee3ed41 100644
--- a/packages/core/theme/src/components/select.ts
+++ b/packages/core/theme/src/components/select.ts
@@ -39,6 +39,7 @@ const select = tv({
       "appearance-none",
       "outline-none",
       "select-none",
+      "opacity-70",
       "hover:!opacity-100",
       "cursor-pointer",
       "active:!opacity-70",

From bf029abd1f415575d495098cc56825a7f379a332 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Fri, 29 Nov 2024 14:01:28 +0800
Subject: [PATCH 14/15] chore(changeset): change to patch

---
 .changeset/olive-buckets-own.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/olive-buckets-own.md b/.changeset/olive-buckets-own.md
index fe10eb7e7a..764f38fdc5 100644
--- a/.changeset/olive-buckets-own.md
+++ b/.changeset/olive-buckets-own.md
@@ -1,6 +1,6 @@
 ---
-"@nextui-org/select": minor
-"@nextui-org/theme": minor
+"@nextui-org/select": patch
+"@nextui-org/theme": patch
 ---
 
 add `isClearable` and `onClear` prop to Select component (#2239)

From c221d078b1e4ebb56780b4887a646e0842a2ab60 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Fri, 29 Nov 2024 14:03:22 +0800
Subject: [PATCH 15/15] refactor(docs): apply new structure to docs

---
 .../components/select/is-clearable.raw.jsx    | 65 ++++++++++++++++
 .../content/components/select/is-clearable.ts | 74 +------------------
 2 files changed, 66 insertions(+), 73 deletions(-)
 create mode 100644 apps/docs/content/components/select/is-clearable.raw.jsx

diff --git a/apps/docs/content/components/select/is-clearable.raw.jsx b/apps/docs/content/components/select/is-clearable.raw.jsx
new file mode 100644
index 0000000000..af93522aaa
--- /dev/null
+++ b/apps/docs/content/components/select/is-clearable.raw.jsx
@@ -0,0 +1,65 @@
+import {Select, SelectItem} from "@nextui-org/react";
+
+export const animals = [
+  {key: "cat", label: "Cat"},
+  {key: "dog", label: "Dog"},
+  {key: "elephant", label: "Elephant"},
+  {key: "lion", label: "Lion"},
+  {key: "tiger", label: "Tiger"},
+  {key: "giraffe", label: "Giraffe"},
+  {key: "dolphin", label: "Dolphin"},
+  {key: "penguin", label: "Penguin"},
+  {key: "zebra", label: "Zebra"},
+  {key: "shark", label: "Shark"},
+  {key: "whale", label: "Whale"},
+  {key: "otter", label: "Otter"},
+  {key: "crocodile", label: "Crocodile"},
+];
+
+export const PetBoldIcon = (props) => {
+  return (
+    <svg
+      aria-hidden="true"
+      fill="none"
+      focusable="false"
+      height="1em"
+      role="presentation"
+      viewBox="0 0 24 24"
+      width="1em"
+      {...props}
+    >
+      <path
+        d="M19.0803 15.7203C18.4903 12.1903 15.1003 9.32031 11.5203 9.32031C7.63028 9.32031 4.21028 12.4703 3.88028 16.3503C3.75028 17.8503 4.23028 19.2703 5.22028 20.3403C6.20028 21.4103 7.58028 22.0003 9.08028 22.0003H13.7603C15.4503 22.0003 16.9303 21.3403 17.9403 20.1503C18.9503 18.9603 19.3503 17.3803 19.0803 15.7203Z"
+        fill="currentColor"
+      />
+      <path
+        d="M10.2796 7.86C11.8978 7.86 13.2096 6.54819 13.2096 4.93C13.2096 3.31181 11.8978 2 10.2796 2C8.66141 2 7.34961 3.31181 7.34961 4.93C7.34961 6.54819 8.66141 7.86 10.2796 7.86Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.94 9.02844C18.2876 9.02844 19.38 7.93601 19.38 6.58844C19.38 5.24086 18.2876 4.14844 16.94 4.14844C15.5924 4.14844 14.5 5.24086 14.5 6.58844C14.5 7.93601 15.5924 9.02844 16.94 9.02844Z"
+        fill="currentColor"
+      />
+      <path
+        d="M20.5496 12.9313C21.6266 12.9313 22.4996 12.0582 22.4996 10.9812C22.4996 9.90429 21.6266 9.03125 20.5496 9.03125C19.4727 9.03125 18.5996 9.90429 18.5996 10.9812C18.5996 12.0582 19.4727 12.9313 20.5496 12.9313Z"
+        fill="currentColor"
+      />
+      <path
+        d="M3.94 10.9816C5.28757 10.9816 6.38 9.88914 6.38 8.54156C6.38 7.19399 5.28757 6.10156 3.94 6.10156C2.59243 6.10156 1.5 7.19399 1.5 8.54156C1.5 9.88914 2.59243 10.9816 3.94 10.9816Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex w-screen justify-center items-center">
+      <Select className="max-w-xs my-5" isClearable={true} label="Favorite Animal">
+        {animals.map((animal) => (
+          <SelectItem key={animal.key}>{animal.label}</SelectItem>
+        ))}
+      </Select>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/select/is-clearable.ts b/apps/docs/content/components/select/is-clearable.ts
index 6e5b295e9b..803dd33068 100644
--- a/apps/docs/content/components/select/is-clearable.ts
+++ b/apps/docs/content/components/select/is-clearable.ts
@@ -1,79 +1,7 @@
-const data = `export const animals = [
-    {key: "cat", label: "Cat"},
-    {key: "dog", label: "Dog"},
-    {key: "elephant", label: "Elephant"},
-    {key: "lion", label: "Lion"},
-    {key: "tiger", label: "Tiger"},
-    {key: "giraffe", label: "Giraffe"},
-    {key: "dolphin", label: "Dolphin"},
-    {key: "penguin", label: "Penguin"},
-    {key: "zebra", label: "Zebra"},
-    {key: "shark", label: "Shark"},
-    {key: "whale", label: "Whale"},
-    {key: "otter", label: "Otter"},
-    {key: "crocodile", label: "Crocodile"}
-  ];`;
-
-const PetBoldIcon = `export const PetBoldIcon = (props) => (
-    <svg
-      aria-hidden="true"
-      fill="none"
-      focusable="false"
-      height="1em"
-      role="presentation"
-      viewBox="0 0 24 24"
-      width="1em"
-      {...props}
-    >
-      <path
-        d="M19.0803 15.7203C18.4903 12.1903 15.1003 9.32031 11.5203 9.32031C7.63028 9.32031 4.21028 12.4703 3.88028 16.3503C3.75028 17.8503 4.23028 19.2703 5.22028 20.3403C6.20028 21.4103 7.58028 22.0003 9.08028 22.0003H13.7603C15.4503 22.0003 16.9303 21.3403 17.9403 20.1503C18.9503 18.9603 19.3503 17.3803 19.0803 15.7203Z"
-        fill="currentColor"
-      />
-      <path
-        d="M10.2796 7.86C11.8978 7.86 13.2096 6.54819 13.2096 4.93C13.2096 3.31181 11.8978 2 10.2796 2C8.66141 2 7.34961 3.31181 7.34961 4.93C7.34961 6.54819 8.66141 7.86 10.2796 7.86Z"
-        fill="currentColor"
-      />
-      <path
-        d="M16.94 9.02844C18.2876 9.02844 19.38 7.93601 19.38 6.58844C19.38 5.24086 18.2876 4.14844 16.94 4.14844C15.5924 4.14844 14.5 5.24086 14.5 6.58844C14.5 7.93601 15.5924 9.02844 16.94 9.02844Z"
-        fill="currentColor"
-      />
-      <path
-        d="M20.5496 12.9313C21.6266 12.9313 22.4996 12.0582 22.4996 10.9812C22.4996 9.90429 21.6266 9.03125 20.5496 9.03125C19.4727 9.03125 18.5996 9.90429 18.5996 10.9812C18.5996 12.0582 19.4727 12.9313 20.5496 12.9313Z"
-        fill="currentColor"
-      />
-      <path
-        d="M3.94 10.9816C5.28757 10.9816 6.38 9.88914 6.38 8.54156C6.38 7.19399 5.28757 6.10156 3.94 6.10156C2.59243 6.10156 1.5 7.19399 1.5 8.54156C1.5 9.88914 2.59243 10.9816 3.94 10.9816Z"
-        fill="currentColor"
-      />
-    </svg>
-  );`;
-
-const App = `import {Select, SelectItem} from "@nextui-org/react";
-import {animals} from "./data";
-import {PetBoldIcon} from "./PetBoldIcon";
-
-export default function App() {
-  return (
-      <div className="flex w-screen justify-center items-center">
-        <Select
-            className="max-w-xs my-5"
-            isClearable={true}
-            label="Favorite Animal"
-        >
-          {animals.map((animal) => (
-          <SelectItem key={animal.key}>
-              {animal.label}
-          </SelectItem>
-          ))}
-        </Select>
-    </div>
-  );
-}`;
+import App from "./is-clearable.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/data.js": data,
-  "/PetBoldIcon.jsx": PetBoldIcon,
 };
 
 export default {