@eightshift/ui-components 6.1.0 → 6.2.0

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

@@ -2,20 +2,20 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
 import { _ as __, a as _n } from "../../default-i18n-CnQeC5Pl.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { $ as $d2f53cda644affe3$export$2f2b9559550c7bbc, a as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../SearchField-CmRhtrQf.js";
-import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-BTCA69Lt.js";
-import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-Wrnm2nxy.js";
+import { $ as $d2f53cda644affe3$export$2f2b9559550c7bbc, a as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../SearchField-BME59dt-.js";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-CFnNdpNZ.js";
+import { f as $07b14b47974efb58$export$5b6b19405a83ff9d, i as $72a5793c14baf454$export$8b251419efc915eb } from "../../Dialog-DDfABlp4.js";
+import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-B4X6-x6r.js";
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BDlf9vIY.js";
-import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../ListBox-yHUyUAAH.js";
-import { f as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-BbNWvB5_.js";
-import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-DSTKnPjF.js";
-import { useRef, cloneElement } from "react";
+import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$dca12b0bb56e4fc } from "../../ListBox-ByPsaVVK.js";
+import { g as getGroupedOptions, $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-HdRrpnhs.js";
+import { $ as $e1995378a142960e$export$fb8073518f34e6ec } from "../../SelectionManager-iru59gc4.js";
+import { useMemo, useRef, cloneElement } from "react";
 import { icons } from "../../icons/icons.js";
-import "../../react-jsx-parser.min-B_hvYYa1.js";
+import "../../react-jsx-parser.min-DAh4myol.js";
 import { Spinner } from "../../icons/spinner.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { unescapeHTML } from "../../utilities/text-helpers.js";
-import { randomId } from "../../utilities/hash.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { c as cva } from "../../index-BHpUy2Ix.js";
 import { TriggeredPopover } from "../popover/popover.js";
@@ -43,6 +43,7 @@ import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66 } from "../../useAsyncLi
  * @param {Function} [props.getMeta] - Function to get the metadata for the item from the fetched data. `(item: Object<string, any>) => Object<string, any>` (optional)
  * @param {Function} [props.getIcon] - Function to get the icon for the item from the fetched data. `(item: Object<string, any>) => JSX.Element | string`
  * @param {Function} [props.getSubtitle] - Function to get the subtitle for the item from the fetched data. `(item: Object<string, any>) => string`
+ * @param {Function} [props.getGroup] - Function to get the group name for the item from the fetched data. `(item: Object<string, any>) => string`
  * @param {Function} [props.getData] - Function to pre-process the fetched data before it is used in the select. `(data: Object<string, any>[]) => Object<string, any>[]`
  * @param {Function} [props.fetchUrl] - Function to get the URL for fetching data. Provides typed search text if entered. `(searchText: string) => string`
  * @param {Object} [props.fetchConfig] - Configuration object for the fetch request, passed to the `fetch` function.
@@ -52,6 +53,8 @@ import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66 } from "../../useAsyncLi
  * @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 {string} props.className - Classes to pass to the select menu.
+ * @param {string} [props.groupKey] - If provided, the options will be grouped by this key.
+ * @param {Object} [props.groupValueMapping] - If provided, the group headers will be mapped to these labels/icons.
  * @param {boolean} [props.noMinWidth=false] - If `true`, the select menu will not have a minimum width.
  * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
  * @param {boolean} [props.noReorder] - If `true`, the option for reordering selected items is disabled.
@@ -98,11 +101,14 @@ const AsyncMultiSelect = (props) => {
     getMeta,
     getIcon,
     getSubtitle,
+    getGroup,
     getData = (data) => data,
     customMenuOption,
     customValueDisplay,
     customDropdownArrow,
     className,
+    groupKey,
+    groupValueMapping,
     flat,
     size = "default",
     noMinWidth = false,
@@ -121,7 +127,8 @@ const AsyncMultiSelect = (props) => {
         json = processLoadedOptions ? processLoadedOptions(getData(res)) : getData(res);
       } else {
         const res = await fetch(fetchUrl(filterText), { ...fetchConfig, signal });
-        json = processLoadedOptions ? processLoadedOptions(getData(await res.json())) : getData(res);
+        const data = await res.json();
+        json = processLoadedOptions ? processLoadedOptions(getData(data)) : getData(data);
       }
       const output = json?.map((item, index) => {
         const id = getValue?.(item) ?? index;
@@ -132,6 +139,9 @@ const AsyncMultiSelect = (props) => {
         if (getSubtitle) {
           entry.subtitle = unescapeHTML(getSubtitle(item));
         }
+        if (getGroup) {
+          entry[groupKey ?? "_group"] = getGroup(item);
+        }
         return entry;
       });
       if (filterText.length > 0) {
@@ -150,9 +160,58 @@ const AsyncMultiSelect = (props) => {
       };
     }
   });
+  const groupedItems = useMemo(
+    () => getGroupedOptions(list?.items, groupKey ?? (getGroup ? "_group" : null), groupValueMapping),
+    [list?.items, groupKey, groupValueMapping, getGroup]
+  );
+  const renderItem = (item) => {
+    let icon2 = item?.icon ?? null;
+    if (typeof item?.icon === "string") {
+      icon2 = icons?.[item.icon] ?? null;
+    }
+    if (getIcon && !icon2) {
+      icon2 = getIcon(item);
+    }
+    return /* @__PURE__ */ jsxs(
+      OptionItemBase,
+      {
+        id: item.value,
+        textValue: item.label,
+        selectIndicator: true,
+        children: [
+          customMenuOption && customMenuOption(item),
+          !customMenuOption && /* @__PURE__ */ jsx(
+            RichLabel,
+            {
+              icon: icon2,
+              label: item.label,
+              subtitle: item.subtitle,
+              noColor: true
+            }
+          )
+        ]
+      },
+      item.value
+    );
+  };
   const handleSelectionChange = (rawSelected) => {
-    const selected = list.filterText.length > 0 ? /* @__PURE__ */ new Set([...value?.map((item) => item?.value) ?? [], ...rawSelected]) : rawSelected;
-    list.filterText = "";
+    let selected;
+    if (list.filterText.length > 0) {
+      const visibleItemKeys = new Set(list.items?.map((item) => item.value) ?? []);
+      selected = /* @__PURE__ */ new Set();
+      for (const item of value ?? []) {
+        const key = item?.value ?? item;
+        if (!visibleItemKeys.has(key)) {
+          selected.add(key);
+        }
+      }
+      for (const key of rawSelected) {
+        selected.add(key);
+      }
+    } else {
+      selected = rawSelected;
+    }
+    list.setSelectedKeys(selected);
     if (selected === null || selected === void 0) {
       onChange(null);
       return;
@@ -170,14 +229,7 @@ const AsyncMultiSelect = (props) => {
         ...option
       };
     }).filter(Boolean);
-    onChange(
-      selectedValues.map((item) => ({
-        label: item?.label,
-        value: item?.value,
-        subtitle: item?.subtitle,
-        meta: item?.meta
-      }))
-    );
+    onChange(selectedValues);
   };
   const ref = useRef();
   const currentValueKeys = value?.map((item) => item?.value ?? item);
@@ -260,6 +312,13 @@ const AsyncMultiSelect = (props) => {
       selectionMode: "multiple",
       isDisabled: disabled,
       value: currentValueKeys ?? [],
+      onOpenChange: (isOpen) => {
+        if (!isOpen) {
+          setTimeout(() => {
+            list.setFilterText("");
+          }, 100);
+        }
+      },
       onChange: (selected) => handleSelectionChange(selected),
       placeholder,
       ...rest,
@@ -282,35 +341,35 @@ const AsyncMultiSelect = (props) => {
                 ref,
                 children: [
                   /* @__PURE__ */ jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: buttonClass({ size }), children: [
-                    /* @__PURE__ */ jsx($82d7e5349645de74$export$e288731fd71264f0, { className: "es:select-none es:pointer-events-none", children: ({ isPlaceholder, selectedItems }) => {
-                      const [selectedItem] = selectedItems;
-                      if (!currentValueKeys?.length || isPlaceholder) {
+                    /* @__PURE__ */ jsx($82d7e5349645de74$export$e288731fd71264f0, { className: "es:select-none es:pointer-events-none", children: () => {
+                      if (!currentValueKeys?.length) {
                         return /* @__PURE__ */ jsx("span", { className: "es:select-none es:pointer-events-none es:pr-6 es:text-sm es:text-surface-500", children: placeholder });
                       }
-                      let icon2 = getIcon ? getIcon(selectedItem) : selectedItem?.icon ?? null;
-                      if (typeof selectedItem?.icon === "string") {
-                        icon2 = icons?.[selectedItem.icon] ?? null;
+                      const currentItem = value?.[0];
+                      let icon2 = getIcon ? getIcon(currentItem) : currentItem?.icon ?? null;
+                      if (typeof currentItem?.icon === "string") {
+                        icon2 = icons?.[currentItem.icon] ?? null;
                       }
-                      if (selectedItems.length > 1) {
+                      if (value?.length > 1) {
                         return /* @__PURE__ */ jsx(
                           RichLabel,
                           {
                             icon: icons.multiple,
-                            label: sprintf(_n("%s item", "%s items", selectedItems.length, "eightshift-ui-components"), selectedItems.length),
-                            subtitle: selectedItems.map((item) => item?.label ?? item).join(", "),
+                            label: sprintf(_n("%s item", "%s items", value.length, "eightshift-ui-components"), value.length),
+                            subtitle: value.map((item) => item?.label ?? item).join(", "),
                             subtitleClassName: "es:line-clamp-1 es:max-w-56"
                           }
                         );
                       }
-                      if (!isPlaceholder && value && customValueDisplay) {
-                        return customValueDisplay(selectedItem);
+                      if (value && customValueDisplay) {
+                        return customValueDisplay(currentItem);
                       }
                       return /* @__PURE__ */ jsx(
                         RichLabel,
                         {
                           icon: icon2,
-                          label: selectedItem?.label,
-                          subtitle: selectedItem?.subtitle,
+                          label: currentItem?.label,
+                          subtitle: currentItem?.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",
                           labelClassName: "es:line-clamp-1",
@@ -362,28 +421,34 @@ const AsyncMultiSelect = (props) => {
                           DraggableList,
                           {
                             items: value ?? [],
-                            onChange: (value2) => {
-                              handleSelectionChange(new Set(value2?.map((item) => item?.value ?? item)));
+                            onChange: (reordered) => {
+                              onChange(
+                                reordered.map((item) => ({
+                                  label: item?.label,
+                                  value: item?.value,
+                                  subtitle: item?.subtitle,
+                                  meta: item?.meta
+                                }))
+                              );
                             },
                             className: "es:contents",
                             itemContainerClassName: "es:h-full es:max-h-60 es:overflow-y-auto es:pb-1.5 es:mt-0",
                             itemClassName: "es:z-999999",
                             children: (item) => {
-                              const realItem = list.getItem(item?.value);
-                              let icon2 = getIcon ? getIcon(realItem) : realItem?.icon ?? null;
-                              if (typeof realItem?.icon === "string") {
-                                icon2 = icons?.[realItem.icon] ?? null;
+                              let icon2 = getIcon ? getIcon(item) : item?.icon ?? null;
+                              if (typeof item?.icon === "string") {
+                                icon2 = icons?.[item.icon] ?? null;
                               }
                               return /* @__PURE__ */ jsx(
                                 DraggableListItem,
                                 {
                                   icon: icon2,
-                                  label: realItem?.label,
-                                  subtitle: realItem?.subtitle,
+                                  label: item?.label,
+                                  subtitle: item?.subtitle,
                                   iconClassName: "es:pointer-events-none es:select-none",
                                   labelClassName: "es:line-clamp-1",
                                   subtitleClassName: "es:line-clamp-1",
-                                  className: clsx("es:flex es:items-center es:justify-between", realItem?.icon ? "es:pl-1" : "es:pl-2")
+                                  className: clsx("es:flex es:items-center es:justify-between", item?.icon ? "es:pl-1" : "es:pl-2")
                                 }
                               );
                             }
@@ -441,7 +506,7 @@ const AsyncMultiSelect = (props) => {
                                 placeholder: __("Search...", "eightshift-ui-components"),
                                 className: clsx(
                                   "es:peer es:size-full es:h-9.5 es:outline-hidden! es:pl-3.5 es:pr-9 es:shadow-none! es:text-13! es:placeholder:text-surface-500 es:[&::-webkit-search-cancel-button]:hidden",
-                                  "es:bg-accent-900/8 es:m-1.5 es:rounded-3xl es:border-none!",
+                                  "es:bg-accent-900/8 es:m-1.5 es:rounded-3xl! es:border-none!",
                                   "es:inset-ring! es:inset-ring-accent-950/7 es:focus:inset-ring-accent-950/20",
                                   "es:text-accent-950 es:placeholder:text-accent-700/50",
                                   "es:transition"
@@ -451,6 +516,7 @@ const AsyncMultiSelect = (props) => {
                             /* @__PURE__ */ jsx(
                               $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
                               {
+                                slot: "clear",
                                 "aria-label": __("Clear", "eightshift-ui-components"),
                                 className: clsx(
                                   "es:absolute es:right-3 es:top-0 es:bottom-0 es:my-auto es:border-none es:bg-transparent",
@@ -464,16 +530,14 @@ const AsyncMultiSelect = (props) => {
                         }
                       ),
                       list.isLoading && /* @__PURE__ */ jsx("div", { className: "es:p-3 es:min-h-16 es:flex es:items-center es:justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }),
-                      /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsxs(
                         $eed445e0843c11d0$export$41f133550aa26f48,
                         {
                           className: clsx("es:space-y-0.75 es:p-1.5 es:pt-0 es:any-focus:outline-hidden es:h-full es:overflow-y-auto es:rounded-t-xl", list?.isLoading && "es:hidden"),
-                          items: list?.items ?? [],
                           selectedKeys: list.selectedKeys,
                           selectionMode: "multiple",
                           selectionBehavior: "toggle",
                           onSelectionChange: (selected) => {
-                            list.setSelectedKeys(selected);
                             handleSelectionChange(selected);
                           },
                           renderEmptyState: () => /* @__PURE__ */ jsx(
@@ -487,34 +551,29 @@ const AsyncMultiSelect = (props) => {
                               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,
+                          children: [
+                            groupedItems && /* @__PURE__ */ jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: groupedItems, children: (section) => /* @__PURE__ */ jsxs(
+                              $eed445e0843c11d0$export$dca12b0bb56e4fc,
                               {
-                                id: item?.value ?? randomId(8),
-                                className: item?.className,
-                                selectIndicator: true,
+                                id: section.key,
+                                className: "es:flex es:flex-col es:gap-0.75",
                                 children: [
-                                  customMenuOption && customMenuOption(item),
-                                  !customMenuOption && /* @__PURE__ */ jsx(
+                                  /* @__PURE__ */ jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "es:px-2.5 es:pb-1 es:pt-3 es:select-none", children: /* @__PURE__ */ jsx(
                                     RichLabel,
                                     {
-                                      icon: icon2,
-                                      label: item?.label,
-                                      subtitle: item?.subtitle,
-                                      labelClassName: "es:line-clamp-1",
-                                      subtitleClassName: "es:line-clamp-1",
-                                      noColor: true
+                                      icon: section?.icon,
+                                      label: section?.label,
+                                      subtitle: section?.subtitle,
+                                      endIcon: section?.endIcon,
+                                      fullWidth: true
                                     }
-                                  )
+                                  ) }),
+                                  /* @__PURE__ */ jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: section.options, children: (item) => renderItem(item) })
                                 ]
                               }
-                            );
-                          }
+                            ) }),
+                            !groupedItems && /* @__PURE__ */ jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: list.items ?? [], children: (item) => renderItem(item) })
+                          ]
                         }
                       )
                     ]

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

@@ -1,20 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { BaseControl } from "../base-control/base-control.js";
-import { $ as $d2f53cda644affe3$export$2f2b9559550c7bbc, a as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../SearchField-CmRhtrQf.js";
-import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-BTCA69Lt.js";
-import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-Wrnm2nxy.js";
+import { $ as $d2f53cda644affe3$export$2f2b9559550c7bbc, a as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../SearchField-BME59dt-.js";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-CFnNdpNZ.js";
+import { f as $07b14b47974efb58$export$5b6b19405a83ff9d, i as $72a5793c14baf454$export$8b251419efc915eb } from "../../Dialog-DDfABlp4.js";
+import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-B4X6-x6r.js";
 import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-BDlf9vIY.js";
-import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../ListBox-yHUyUAAH.js";
-import { f as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-BbNWvB5_.js";
-import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-DSTKnPjF.js";
-import { useRef, cloneElement } from "react";
+import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$dca12b0bb56e4fc } from "../../ListBox-ByPsaVVK.js";
+import { g as getGroupedOptions, $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-HdRrpnhs.js";
+import { $ as $e1995378a142960e$export$fb8073518f34e6ec } from "../../SelectionManager-iru59gc4.js";
+import { useRef, useMemo, cloneElement } from "react";
 import { icons } from "../../icons/icons.js";
-import "../../react-jsx-parser.min-B_hvYYa1.js";
+import "../../react-jsx-parser.min-DAh4myol.js";
 import { Spinner } from "../../icons/spinner.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { unescapeHTML } from "../../utilities/text-helpers.js";
-import { randomId } from "../../utilities/hash.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { c as cva } from "../../index-BHpUy2Ix.js";
 import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66 } from "../../useAsyncList-DsZvQXls.js";
@@ -39,6 +39,7 @@ import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66 } from "../../useAsyncLi
  * @param {Function} [props.getMeta] - Function to get the metadata for the item from the fetched data. `(item: Object<string, any>) => Object<string, any>` (optional)
  * @param {Function} [props.getIcon] - Function to get the icon for the item from the fetched data. `(item: Object<string, any>) => JSX.Element | string`
  * @param {Function} [props.getSubtitle] - Function to get the subtitle for the item from the fetched data. `(item: Object<string, any>) => string`
+ * @param {Function} [props.getGroup] - Function to get the group name for the item from the fetched data. `(item: Object<string, any>) => string`
  * @param {Function} [props.getData] - Function to pre-process the fetched data before it is used in the select. `(data: Object<string, any>[]) => Object<string, any>[]`
  * @param {Function} [props.fetchUrl] - Function to get the URL for fetching data. Provides typed search text if entered. `(searchText: string) => string`
  * @param {Object} [props.fetchConfig] - Configuration object for the fetch request, passed to the `fetch` function.
@@ -47,7 +48,9 @@ import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66 } from "../../useAsyncLi
  * @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 {string} props.className - Classes to pass to the select menu.
+ * @param {string} [props.className] - Classes to pass to the select menu.
+ * @param {string} [props.groupKey] - If provided, the options will be grouped by this key.
+ * @param {Object} [props.groupValueMapping] - If provided, the group headers will be mapped to these labels/icons.
  * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
  * @param {SelectSize} [props.size='default'] - Sets the size of the input field.
  * @param {boolean} [props.noMinWidth=false] - If `true`, the select menu will not have a minimum width.
@@ -98,9 +101,12 @@ const AsyncSelect = (props) => {
     getMeta,
     getIcon,
     getSubtitle,
+    getGroup,
     getData = (data) => data,
     extraItemProps,
     hidden,
+    groupKey,
+    groupValueMapping,
     flat,
     size = "default",
     noMinWidth = false,
@@ -116,7 +122,8 @@ const AsyncSelect = (props) => {
         json = processLoadedOptions ? processLoadedOptions(getData(res)) : getData(res);
       } else {
         const res = await fetch(fetchUrl(filterText), { ...fetchConfig, signal });
-        json = processLoadedOptions ? processLoadedOptions(getData(await res.json())) : getData(res);
+        const data = await res.json();
+        json = processLoadedOptions ? processLoadedOptions(getData(data)) : getData(data);
       }
       const output = json?.map((item, index) => {
         const id = getValue?.(item) ?? index;
@@ -127,6 +134,9 @@ const AsyncSelect = (props) => {
         if (getSubtitle) {
           entry.subtitle = unescapeHTML(getSubtitle(item));
         }
+        if (getGroup) {
+          entry[groupKey ?? "_group"] = getGroup(item);
+        }
         return entry;
       });
       if (filterText.length > 0) {
@@ -145,6 +155,40 @@ const AsyncSelect = (props) => {
     }
   });
   const ref = useRef();
+  const groupedItems = useMemo(
+    () => getGroupedOptions(list?.items, groupKey ?? (getGroup ? "_group" : null), groupValueMapping),
+    [list?.items, groupKey, groupValueMapping, getGroup]
+  );
+  const renderItem = (item) => {
+    let icon2 = item?.icon ?? null;
+    if (typeof item?.icon === "string") {
+      icon2 = icons?.[item.icon] ?? null;
+    }
+    if (getIcon && !icon2) {
+      icon2 = getIcon(item);
+    }
+    return /* @__PURE__ */ jsxs(
+      OptionItemBase,
+      {
+        id: item.value,
+        textValue: item.label,
+        selectIndicator: true,
+        children: [
+          customMenuOption && customMenuOption(item),
+          !customMenuOption && /* @__PURE__ */ jsx(
+            RichLabel,
+            {
+              icon: icon2,
+              label: item.label,
+              subtitle: item.subtitle,
+              noColor: true
+            }
+          )
+        ]
+      },
+      item.value
+    );
+  };
   if (hidden) {
     return null;
   }
@@ -219,7 +263,6 @@ const AsyncSelect = (props) => {
     }
   );
   const handleSelectionChange = (selected) => {
-    list.filterText = "";
     if (selected === null || selected === void 0) {
       onChange(null);
       return;
@@ -232,18 +275,20 @@ const AsyncSelect = (props) => {
     if (item && "id" in item) {
       delete item.id;
     }
-    onChange({
-      label: item?.label,
-      value: item?.value,
-      subtitle: item?.subtitle,
-      meta: item?.meta
-    });
+    onChange(item);
   };
   return /* @__PURE__ */ jsx(
     $82d7e5349645de74$export$ef9b1a59e592288f,
     {
       isDisabled: disabled,
       value: value?.value ?? null,
+      onOpenChange: (isOpen) => {
+        if (!isOpen) {
+          setTimeout(() => {
+            list.setFilterText("");
+          }, 100);
+        }
+      },
       onChange: (selected) => handleSelectionChange(selected),
       placeholder,
       ...rest,
@@ -363,7 +408,7 @@ const AsyncSelect = (props) => {
                                 placeholder: __("Search...", "eightshift-ui-components"),
                                 className: clsx(
                                   "es:peer es:size-full es:h-9.5 es:outline-hidden! es:pl-3.5 es:pr-9 es:shadow-none! es:text-13! es:placeholder:text-surface-500 es:[&::-webkit-search-cancel-button]:hidden",
-                                  "es:bg-accent-900/8 es:m-1.5 es:rounded-3xl es:border-none!",
+                                  "es:bg-accent-900/8 es:m-1.5 es:rounded-3xl! es:border-none!",
                                   "es:inset-ring! es:inset-ring-accent-950/7 es:focus:inset-ring-accent-950/20",
                                   "es:text-accent-950 es:placeholder:text-accent-700/50",
                                   "es:transition"
@@ -373,6 +418,7 @@ const AsyncSelect = (props) => {
                             /* @__PURE__ */ jsx(
                               $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
                               {
+                                slot: "clear",
                                 "aria-label": __("Clear", "eightshift-ui-components"),
                                 className: clsx(
                                   "es:absolute es:right-3 es:top-0 es:bottom-0 es:my-auto es:border-none es:bg-transparent",
@@ -386,11 +432,10 @@ const AsyncSelect = (props) => {
                         }
                       ),
                       list.isLoading && /* @__PURE__ */ jsx("div", { className: "es:p-3 es:min-h-16 es:flex es:items-center es:justify-center", children: /* @__PURE__ */ jsx(Spinner, {}) }),
-                      /* @__PURE__ */ jsx(
+                      /* @__PURE__ */ jsxs(
                         $eed445e0843c11d0$export$41f133550aa26f48,
                         {
                           className: clsx("es:space-y-0.75 es:p-1.5 es:pt-0 es:any-focus:outline-hidden es:h-full es:overflow-y-auto es:rounded-t-xl", list?.isLoading && "es:hidden"),
-                          items: list.items,
                           selectedKeys: list.selectedKeys,
                           onSelectionChange: (selected) => {
                             list.setSelectedKeys(selected);
@@ -407,34 +452,29 @@ const AsyncSelect = (props) => {
                               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,
+                          children: [
+                            groupedItems && /* @__PURE__ */ jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: groupedItems, children: (section) => /* @__PURE__ */ jsxs(
+                              $eed445e0843c11d0$export$dca12b0bb56e4fc,
                               {
-                                id: item?.value ?? randomId(8),
-                                className: item?.className,
-                                selectIndicator: true,
+                                id: section.key,
+                                className: "es:flex es:flex-col es:gap-0.75",
                                 children: [
-                                  customMenuOption && customMenuOption(item),
-                                  !customMenuOption && /* @__PURE__ */ jsx(
+                                  /* @__PURE__ */ jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "es:px-2.5 es:pb-1 es:pt-3 es:select-none", children: /* @__PURE__ */ jsx(
                                     RichLabel,
                                     {
-                                      icon: icon2,
-                                      label: item?.label,
-                                      subtitle: item?.subtitle,
-                                      labelClassName: "es:line-clamp-1",
-                                      subtitleClassName: "es:line-clamp-1",
-                                      noColor: true
+                                      icon: section?.icon,
+                                      label: section?.label,
+                                      subtitle: section?.subtitle,
+                                      endIcon: section?.endIcon,
+                                      fullWidth: true
                                     }
-                                  )
+                                  ) }),
+                                  /* @__PURE__ */ jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: section.options, children: (item) => renderItem(item) })
                                 ]
                               }
-                            );
-                          }
+                            ) }),
+                            !groupedItems && /* @__PURE__ */ jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: list.items, children: (item) => renderItem(item) })
+                          ]
                         }
                       )
                     ]