@eightshift/ui-components 5.0.9 → 5.1.0

package/dist/components/select/v2/async-select.js

@@ -1,20 +1,21 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { _ as __ } from "../../../default-i18n-CT_oS1Fy.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { _ as __ } from "../../../default-i18n-OFa3zAyB.js";
+import { BaseControl } from "../../base-control/base-control.js";
+import { b as $d2f53cda644affe3$export$2f2b9559550c7bbc, c as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../../Separator-CTQWg_HO.js";
 import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-DH22t_SM.js";
-import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66, a as $d01f2c01039c0eec$export$72b9695b8216309a, b as $d01f2c01039c0eec$export$c02625b26074192c } from "../../../ComboBox-BANSEKnb.js";
-import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../../Input-BmDS8Juy.js";
+import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../../Input-DfSBLhDx.js";
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../../Label-JS_ob-kh.js";
-import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../../ListBox-_nDFq8-H.js";
-import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-CmAxaSUv.js";
-import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../../Text-BuJgePCv.js";
+import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../../ListBox-BY3gwI8c.js";
+import { e as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-D6EdDPeu.js";
+import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, b as $82d7e5349645de74$export$ef445b55be0601bd } from "../../../Select-BebwUgKB.js";
+import { useRef, useEffect, cloneElement, useContext } from "react";
+import { icons } from "../../../icons/icons.js";
+import "../../../react-jsx-parser.min-LF707GK8.js";
 import { OptionItemBase } from "./shared.js";
 import { RichLabel } from "../../rich-label/rich-label.js";
-import { BaseControl } from "../../base-control/base-control.js";
-import { useEffect, useRef, cloneElement, useContext } from "react";
-import { icons } from "../../../icons/icons.js";
-import "../../../react-jsx-parser.min-DZCiis5V.js";
 import { unescapeHTML } from "../../../utilities/text-helpers.js";
 import { c as clsx } from "../../../utils-CZt7LCbO.js";
+import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66 } from "../../../useAsyncList-fLtZMvJO.js";
 /**
  * Select menu with async loading.
  *
@@ -35,16 +36,18 @@ import { c as clsx } from "../../../utils-CZt7LCbO.js";
  * @param {string} [props.placeholder] - Placeholder text to show when no value is selected.
  * @param {JSX.Element} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu. `({ value: string, label: string, subtitle: string, metadata: any }) => JSX.Element`
  * @param {JSX.Element} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item. `({ value: string, label: string, subtitle: string, metadata: any }) => JSX.Element`
+ * @param {JSX.Element} [props.customDropdownArrow] - If provided, replaces the default dropdown arrow indicator.
  * @param {Function} [props.processLoadedOptions] - Allows modifying (filtering, grouping, ...) options output after the items have been dynamically fetched. Must include `label`, `value`, and `id` keys in the output, additional fields can be added as required.
  * @param {string} props.className - Classes to pass to the select menu.
+ * @param {boolean} [props.noMinWidth=false] - If `true`, the select menu will not have a minimum width.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
- * @returns {JSX.Element} The __ExperimentalAsyncSelect component.
+ * @returns {JSX.Element} The AsyncSelectNext component.
  *
  * @example
  * const [value, setValue] = useState(null);
  *
- * <__ExperimentalAsyncSelect
+ * <AsyncSelectNext
  * 	label='Select items'
  * 	fetchUrl={(searchText) => `https://api.example.com/items?q=${searchText}`}
  * 	value={value}
@@ -55,7 +58,7 @@ import { c as clsx } from "../../../utils-CZt7LCbO.js";
  *
  * @preserve
  */
-const __ExperimentalAsyncSelect = (props) => {
+const AsyncSelectNext = (props) => {
   const {
     label,
     help,
@@ -69,9 +72,10 @@ const __ExperimentalAsyncSelect = (props) => {
     disabled = false,
     clearable = false,
     className,
-    placeholder,
+    placeholder = __("Select...", "eightshift-ui-components"),
     customMenuOption,
     customValueDisplay,
+    customDropdownArrow,
     processLoadedOptions = (options) => options,
     fetchUrl,
     fetchConfig = {},
@@ -82,17 +86,17 @@ const __ExperimentalAsyncSelect = (props) => {
     getSubtitle,
     getData = (data) => data,
     hidden,
+    noMinWidth = false,
     ...rest
   } = props;
-  let list = $f86e6c1ec7da6ebb$export$bc3384a35de93d66({
-    // initialFilterText: value?.label,
-    async load({ signal, filterText: rawFilterText }) {
-      let filterText = rawFilterText.trim();
+  const list = $f86e6c1ec7da6ebb$export$bc3384a35de93d66({
+    getKey: (item) => item.value,
+    async load({ signal, filterText }) {
       const res = await fetch(fetchUrl(filterText), { ...fetchConfig, signal });
-      const json = getData(await res.json());
-      const output = json == null ? void 0 : json.map((item) => {
-        const id = getValue(item);
-        const entry = { label: unescapeHTML(getLabel(item)), value: id };
+      const json = processLoadedOptions(getData(await res.json()));
+      const output = json?.map((item, index) => {
+        const id = getValue?.(item) ?? index;
+        const entry = { label: unescapeHTML(getLabel?.(item) ?? ""), value: id };
         if (getMeta) {
           entry.meta = getMeta(item);
         }
@@ -101,197 +105,250 @@ const __ExperimentalAsyncSelect = (props) => {
         }
         return entry;
       });
+      if (value && value?.value && (filterText ?? "").length < 1 && output.length > 0 && !output?.find((item) => item.value === value?.value)) {
+        return {
+          items: [value, ...output.slice(0, -1)],
+          selectedKeys: [value?.value]
+        };
+      }
       return {
         items: output
       };
     }
   });
-  let listItems = [...list.items];
-  if (value == null ? void 0 : value.value) {
-    const selectedIndex = listItems.findIndex((item) => item.value === (value == null ? void 0 : value.value));
-    if (selectedIndex === -1) {
-      listItems = [{ ...value }, ...listItems];
-    }
-  }
+  const ref = useRef();
   useEffect(() => {
-    if (list.filterText !== (value == null ? void 0 : value.label)) {
-      list.setFilterText(value == null ? void 0 : value.label);
+    if (value?.value && !list.getItem(value?.value)) {
+      list.items[0] = value;
     }
-    if (!value && list.filterText) {
-      list.setFilterText("");
-    }
-  }, [value]);
-  const ref = useRef();
+    list.setSelectedKeys(value?.value ? [value.value] : []);
+    list.setFilterText("");
+  }, [value?.value]);
   if (hidden) {
     return null;
   }
-  return /* @__PURE__ */ jsxs(
-    $d01f2c01039c0eec$export$72b9695b8216309a,
+  return /* @__PURE__ */ jsx(
+    $82d7e5349645de74$export$ef9b1a59e592288f,
     {
+      isDisabled: disabled,
+      selectedKey: value?.value ?? null,
       onSelectionChange: (selected) => {
+        list.filterText = "";
         if (selected === null || selected === void 0) {
           onChange(null);
-          list.setFilterText("");
-          return;
-        }
-        if (selected === (value == null ? void 0 : value.value) || list.filterText === (value == null ? void 0 : value.label)) {
           return;
         }
-        const item = (list == null ? void 0 : list.getItem(selected)) ?? listItems.find((item2) => item2.value === selected);
+        const item = list.items.find((item2) => item2.value === selected);
         if (!item) {
           onChange(null);
-          list.setFilterText("");
           return;
         }
-        list.setFilterText(item.label);
+        if (item && "id" in item) {
+          delete item.id;
+        }
         onChange(item);
       },
-      allowsCustomValue: false,
-      allowsEmptyCollection: true,
-      selectedKey: (value == null ? void 0 : value.value) ?? null,
-      inputValue: list.filterText,
-      onInputChange: list.setFilterText,
-      items: listItems,
-      isDisabled: disabled,
-      menuTrigger: "focus",
+      placeholder,
       ...rest,
-      children: [
-        /* @__PURE__ */ jsx(
-          BaseControl,
-          {
-            icon,
-            label,
-            subtitle,
-            help,
-            actions,
-            labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
-            inline,
-            children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsxs(
+        BaseControl,
+        {
+          label,
+          icon,
+          subtitle,
+          actions,
+          help,
+          inline,
+          labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+          children: [
+            /* @__PURE__ */ jsxs(
               "div",
               {
                 className: clsx(
-                  "es:relative es:flex es:max-w-80 es:items-center es:gap-1 es:p-1 es:focus-visible:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
+                  "es:relative es:flex es:items-center es:gap-1 es:px-1.5 es:focus-visible:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
                   "es:h-9 es:rounded-10 es:border es:border-secondary-300 es:bg-white es:text-sm es:shadow-sm es:transition",
+                  "es:inset-ring es:inset-ring-secondary-100",
                   "es:any-focus:outline-hidden",
+                  !noMinWidth && "es:min-w-48",
                   !inline && "es:w-full",
-                  disabled && "es:select-none",
-                  "es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:border-accent-500 es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:ring-2 es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:ring-accent-500/50"
+                  disabled && "es:select-none es:shadow-none!",
+                  "es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:border-accent-500 es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:ring-2 es:has-[[aria-haspopup=listbox][data-focus-visible=true],[aria-autocomplete=list][data-focus-visible=true]]:ring-accent-500/50",
+                  className
                 ),
                 ref,
                 children: [
-                  /* @__PURE__ */ jsx(
-                    $3985021b0ad6602f$export$f5b8910cec6cf069,
-                    {
-                      className: clsx(
-                        "es:peer es:h-6 es:w-full es:grow es:rounded-sm es:p-1 es:pr-6 es:text-sm es:text-transparent es:transition",
-                        "es:focus:text-current es:any-focus:outline-hidden",
-                        "es:selection:bg-accent-500/20 es:selection:text-accent-950",
-                        disabled && "es:bg-transparent es:text-secondary-400 es:selection:bg-transparent es:selection:text-transparent"
-                      ),
-                      placeholder: placeholder ?? __("Select...", "eightshift-ui-components")
-                    }
-                  ),
-                  value && /* @__PURE__ */ jsxs(
-                    "div",
-                    {
-                      className: clsx(
-                        "es:pointer-events-none es:absolute es:bottom-0 es:left-2 es:top-0 es:my-auto es:flex es:select-none es:items-center es:overflow-hidden",
-                        "es:has-[svg]:left-1 es:peer-data-[focused=true]:invisible es:peer-disabled:opacity-40",
-                        clearable ? "es:right-16" : "es:right-6"
-                      ),
-                      children: [
-                        customValueDisplay && customValueDisplay(value),
-                        !customValueDisplay && /* @__PURE__ */ jsx(
-                          RichLabel,
-                          {
-                            icon: getIcon(value),
-                            label: value == null ? void 0 : value.label,
-                            subtitle: value == null ? void 0 : value.subtitle,
-                            className: "es:[&_span]:overflow-hidden es:[&_span]:text-ellipsis es:[&_span]:text-nowrap"
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  clearable && /* @__PURE__ */ jsx(ClearButton, { disabled }),
-                  /* @__PURE__ */ jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: clsx("es:group es:absolute es:bottom-0 es:right-0 es:top-0 es:my-auto es:size-6", disabled ? "es:text-secondary-300" : "es:text-secondary-500"), children: cloneElement(icons.dropdownCaretAlt, {
-                    className: "es:w-4 es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200",
-                    "aria-hidden": true
-                  }) })
+                  /* @__PURE__ */ jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: "es:any-focus:outline-hidden es:text-start es:size-full es:inline-block es:group es:overflow-x-clip", children: [
+                    /* @__PURE__ */ jsx($82d7e5349645de74$export$e288731fd71264f0, { children: ({ selectedItem }) => {
+                      if (!value?.value) {
+                        return /* @__PURE__ */ jsx("span", { className: "es:pointer-events-none es:pr-6 es:text-sm es:text-secondary-500", children: placeholder });
+                      }
+                      if (customValueDisplay) {
+                        return customValueDisplay(selectedItem);
+                      }
+                      let icon2 = getIcon ? getIcon(selectedItem) : selectedItem?.icon ?? null;
+                      if (typeof selectedItem?.icon === "string") {
+                        icon2 = icons?.[selectedItem.icon] ?? null;
+                      }
+                      return /* @__PURE__ */ jsx(
+                        RichLabel,
+                        {
+                          icon: icon2,
+                          label: /* @__PURE__ */ jsx("span", { className: "es:line-clamp-1", children: selectedItem?.label }),
+                          subtitle: /* @__PURE__ */ jsx("span", { className: "es:line-clamp-1", children: selectedItem?.subtitle }),
+                          className: clsx("es:pr-6 es:grow es:w-full", disabled && "es:grayscale es:pointer-events-none"),
+                          iconClassName: "es:pointer-events-none es:select-none"
+                        }
+                      );
+                    } }),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: clsx("es:absolute es:bottom-0 es:right-1 es:top-0 es:my-auto es:flex es:items-center", disabled ? "es:text-secondary-300" : "es:text-secondary-500"),
+                        "aria-hidden": "true",
+                        children: [
+                          !customDropdownArrow && cloneElement(icons.dropdownCaretAlt, {
+                            className: "es:w-4 es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200"
+                          }),
+                          customDropdownArrow && /* @__PURE__ */ jsx(
+                            "div",
+                            {
+                              "aria-hidden": "true",
+                              className: "es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200",
+                              children: customDropdownArrow
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ] }),
+                  clearable && /* @__PURE__ */ jsx(SelectClearButton, {})
                 ]
               }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          $07b14b47974efb58$export$5b6b19405a83ff9d,
-          {
-            className: ({ isEntering, isExiting }) => clsx(
-              "es:flex es:w-80 es:min-w-9 es:max-w-80 es:flex-col es:overflow-x-hidden es:rounded-lg es:border es:border-secondary-200 es:bg-white es:text-sm es:shadow-lg",
-              "es:any-focus:outline-hidden",
-              isEntering && "es:motion-safe:motion-preset-slide-down-sm es:motion-safe:motion-duration-300 es:motion-reduce:motion-preset-fade-md",
-              isExiting && "es:not-motion-reduce:motion-translate-y-out-[-2.5%] es:motion-opacity-out-0 es:motion-duration-200"
             ),
-            placement: "bottom left",
-            triggerRef: ref,
-            children: [
-              !list.isLoading && list.items.length > 0 && /* @__PURE__ */ jsx($eed445e0843c11d0$export$41f133550aa26f48, { className: "es:space-y-0.5 es:p-1 es:any-focus:outline-hidden", children: (item) => {
-                return /* @__PURE__ */ jsxs(
-                  OptionItemBase,
+            /* @__PURE__ */ jsx(
+              $07b14b47974efb58$export$5b6b19405a83ff9d,
+              {
+                className: ({ isEntering, isExiting }) => clsx(
+                  "es:flex es:w-76 es:min-w-9 es:max-w-76 es:flex-col es:overflow-hidden es:rounded-2xl es:border es:border-secondary-200 es:bg-white es:text-sm es:shadow-xl es:inset-ring es:inset-ring-secondary-100",
+                  "es:any-focus:outline-hidden",
+                  "es:motion-safe:motion-duration-200 es:motion-safe:motion-ease-spring-bouncy",
+                  "es:placement-bottom:origin-top-left es:placement-top:origin-bottom-left",
+                  "es:placement-left:origin-right es:placement-right:origin-left",
+                  isEntering && "es:motion-safe:motion-scale-in-95 es:motion-opacity-in-0",
+                  isEntering && "es:motion-safe:placement-top:motion-translate-y-in-[5%] es:motion-safe:placement-bottom:motion-translate-y-in-[-5%] es:motion-safe:placement-left:motion-translate-x-in-[5%] es:motion-safe:placement-right:motion-translate-x-in-[-5%]",
+                  isExiting && "es:motion-safe:motion-scale-out-95 es:motion-opacity-out-0",
+                  isExiting && "es:motion-safe:placement-top:motion-translate-y-out-[5%] es:motion-safe:placement-bottom:motion-translate-y-out-[-5%] es:motion-safe:placement-left:motion-translate-x-out-[5%] es:motion-safe:placement-right:motion-translate-x-out-[-5%]"
+                ),
+                placement: "bottom left",
+                triggerRef: ref,
+                children: /* @__PURE__ */ jsxs(
+                  $d2f53cda644affe3$export$2f2b9559550c7bbc,
                   {
-                    id: item.value,
-                    className: item == null ? void 0 : item.className,
+                    inputValue: list.filterText,
+                    onInputChange: list.setFilterText,
                     children: [
-                      customMenuOption && customMenuOption(item),
-                      !customMenuOption && /* @__PURE__ */ jsx(
-                        RichLabel,
+                      /* @__PURE__ */ jsxs(
+                        $440f4836bcb56932$export$b94867ecbd698f21,
+                        {
+                          "aria-label": __("Search", "eightshift-ui-components"),
+                          className: "es:flex es:items-center es:bg-secondary-100 es:m-2 es:rounded-lg es:relative es:placeholder:text-secondary-500",
+                          autoFocus: true,
+                          children: [
+                            /* @__PURE__ */ jsx(
+                              $3985021b0ad6602f$export$f5b8910cec6cf069,
+                              {
+                                placeholder: __("Search...", "eightshift-ui-components"),
+                                className: "es:peer es:size-full es:h-9 es:outline-hidden es:shadow-none es:px-2.5 es:text-sm es:py-0 es:[&::-webkit-search-cancel-button]:hidden"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
+                              {
+                                "aria-label": __("Clear", "eightshift-ui-components"),
+                                className: clsx(
+                                  "es:absolute es:right-2 es:top-0 es:bottom-0 es:my-auto",
+                                  "es:flex es:size-6 es:items-center es:justify-center es:rounded es:text-sm es:text-secondary-600 es:transition es:hover:bg-red-50 es:hover:text-red-900 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300 es:cursor-pointer",
+                                  "es:peer-placeholder-shown:opacity-0"
+                                ),
+                                children: icons.clearAlt
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("div", { className: "es:w-full es:h-px es:bg-secondary-200 es:shrink-0" }),
+                      list.isLoading && /* @__PURE__ */ jsx("div", { className: "es:p-3 es:min-h-16 es:flex es:items-center es:justify-center", children: cloneElement(icons.loader, { className: "es:text-accent-600! es:size-5.5 es:motion-preset-spin es:motion-duration-1500" }) }),
+                      /* @__PURE__ */ jsx(
+                        $eed445e0843c11d0$export$41f133550aa26f48,
                         {
-                          icon: (item == null ? void 0 : item.icon) ?? getIcon(item),
-                          label: item == null ? void 0 : item.label,
-                          subtitle: item.subtitle
+                          className: clsx("es:space-y-0.5 es:p-1 es:any-focus:outline-hidden es:overflow-y-auto es:max-h-72", list.isLoading && "es:hidden"),
+                          items: list.items,
+                          renderEmptyState: () => /* @__PURE__ */ jsx(
+                            RichLabel,
+                            {
+                              icon: icons.searchEmpty,
+                              label: __("No results", "eightshift-ui-components"),
+                              subtitle: __("Try a different search term", "eightshift-ui-components"),
+                              className: "es:min-h-14 es:p-2 es:w-fit es:mx-auto es:motion-preset-slide-up es:motion-ease-spring-bouncy es:motion-duration-200",
+                              iconClassName: "es:text-accent-700 es:icon:size-7!",
+                              noColor: true
+                            }
+                          ),
+                          children: (item) => {
+                            let icon2 = getIcon ? getIcon(item) : item?.icon ?? null;
+                            if (typeof item?.icon === "string") {
+                              icon2 = icons?.[item.icon] ?? null;
+                            }
+                            return /* @__PURE__ */ jsxs(
+                              OptionItemBase,
+                              {
+                                id: item.value,
+                                className: item?.className,
+                                children: [
+                                  customMenuOption && customMenuOption(item),
+                                  !customMenuOption && /* @__PURE__ */ jsx(
+                                    RichLabel,
+                                    {
+                                      icon: icon2,
+                                      label: item?.label,
+                                      subtitle: item.subtitle,
+                                      noColor: true
+                                    }
+                                  )
+                                ]
+                              }
+                            );
+                          }
                         }
                       )
                     ]
                   }
-                );
-              } }),
-              list.isLoading && cloneElement(icons.loader, { className: "es:mx-auto es:my-4 es:animate-spin es:size-5.5 es:text-accent-700" }),
-              !list.isLoading && list.items.length === 0 && /* @__PURE__ */ jsx("div", { className: "es:flex es:p-2", children: /* @__PURE__ */ jsxs(
-                $514c0188e459b4c0$export$5f1af8db9871e1d6,
-                {
-                  slot: "errorMessage",
-                  className: clsx("es:flex es:w-full es:items-center es:gap-1 es:rounded es:text-amber-950"),
-                  children: [
-                    icons.searchEmpty,
-                    __("Nothing found", "eightshift-ui-components")
-                  ]
-                }
-              ) })
-            ]
-          }
-        )
-      ]
+                )
+              }
+            )
+          ]
+        }
+      )
     }
   );
 };
-const ClearButton = ({ disabled }) => {
-  const state = useContext($d01f2c01039c0eec$export$c02625b26074192c);
-  const isEmpty = (state == null ? void 0 : state.selectedKey) === null || (state == null ? void 0 : state.inputValue) === "";
+const SelectClearButton = () => {
+  const state = useContext($82d7e5349645de74$export$ef445b55be0601bd);
+  const isEmpty = state?.selectedKey === null;
   return /* @__PURE__ */ jsx(
     $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
     {
       "aria-label": __("Clear value", "eightshift-ui-components"),
       className: clsx(
-        "es:mr-7 es:flex es:h-6 es:w-8 es:items-center es:justify-center es:rounded es:text-sm es:text-secondary-600 es:transition es:hover:bg-red-50 es:hover:text-red-900 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300 es:cursor-pointer",
+        "es:mr-6 es:flex es:h-6 es:w-8 es:items-center es:justify-center es:rounded es:text-sm es:text-secondary-600 es:transition es:hover:bg-red-50 es:hover:text-red-900 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300 es:cursor-pointer",
         isEmpty ? "es:hidden" : "es:flex"
       ),
-      onPress: () => state == null ? void 0 : state.setSelectedKey(null),
+      onPress: () => state?.setSelectedKey(null),
       slot: null,
-      isDisabled: disabled || isEmpty,
       children: icons.clearAlt
     }
   );
 };
 export {
-  __ExperimentalAsyncSelect
+  AsyncSelectNext
 };

package/dist/components/select/v2/shared.js

@@ -1,24 +1,33 @@
-import { jsx } from "react/jsx-runtime";
-import { a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../../ListBox-_nDFq8-H.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../../ListBox-BY3gwI8c.js";
 import { c as clsx } from "../../../utils-CZt7LCbO.js";
-const OptionItemBase = (props) => {
-  var _a;
-  return /* @__PURE__ */ jsx(
-    $eed445e0843c11d0$export$a11e76429ed99b4,
-    {
-      ...props,
-      textValue: (_a = props == null ? void 0 : props.value) == null ? void 0 : _a.label,
-      className: clsx(
-        "es:flex es:min-h-9 es:select-none es:items-center es:gap-1 es:rounded es:p-2 es:transition",
-        "es:any-focus:outline-hidden",
-        "es:hover:bg-secondary-100 es:hover:outline-hidden",
-        "selected:es:bg-accent-600/15 selected:es:text-accent-950",
-        "es:focus-visible:bg-secondary-100 es:focus-visible:outline-hidden",
-        "es:active:bg-accent-700/15"
-      )
-    }
-  );
-};
+const OptionItemBase = (props) => /* @__PURE__ */ jsxs(
+  $eed445e0843c11d0$export$a11e76429ed99b4,
+  {
+    ...props,
+    textValue: props?.value?.label,
+    className: "es:group es:any-focus:outline-hidden es:motion-preset-slide-down es:motion-ease-spring-bouncy es:motion-duration-200",
+    children: [
+      props.extraPre,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx(
+            "es:flex es:min-h-9 es:select-none es:items-center es:gap-1 es:rounded-xl es:px-2 es:py-1.5 es:transition es:scroll-m-1",
+            "es:group-any-focus:outline-hidden es:overflow-clip",
+            "es:group-not-selected:hover:bg-secondary-100 es:group-not-selected:hover:outline-hidden",
+            "es:group-selected:bg-accent-600/15 es:group-selected:text-accent-950",
+            "es:group-selected:group-focus-visible:inset-ring es:group-selected:group-focus-visible:inset-ring-accent-600/30",
+            "es:group-not-selected:group-focus-visible:bg-secondary-100 es:group-not-selected:group-focus-visible:outline-hidden",
+            "es:group-active:bg-accent-700/15"
+          ),
+          children: props.children
+        }
+      ),
+      props.extraAfter
+    ]
+  }
+);
 export {
   OptionItemBase
 };