@eightshift/ui-components 6.1.1 → 6.2.0

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

@@ -1,21 +1,22 @@
 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-CafsA525.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-BaN0n5h3.js";
-import { f as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../Dialog-D0jMcN-a.js";
-import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-CMLCUova.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, useState, useMemo, cloneElement } from "react";
 import { icons } from "../../icons/icons.js";
 import "../../react-jsx-parser.min-DAh4myol.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
 import { RichLabel } from "../rich-label/rich-label.js";
 import { c as cva } from "../../index-BHpUy2Ix.js";
 import { randomId } from "../../utilities/hash.js";
-import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../useFilter-8S94U4xM.js";
+import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../useFilter-NhAlifsK.js";
 /**
  * Select menu.
  *
@@ -31,6 +32,8 @@ import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../useFilter-8
  * @param {string|{label: string, value: string, metadata: Object<string, any>?}} props.value - Current value of the select.
  * @param {Function} props.onChange - Function to call when the value changes.
  * @param {boolean} [props.simpleValue=false] - If `true`, instead of using a `{label: '', value: ''}` value type, a string is used (just the value).
+ * @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.clearable] - Whether the select is clearable.
  * @param {boolean} [props.disabled] - Whether the select is disabled.
  * @param {string} [props.placeholder] - Placeholder text to show when no value is selected.
@@ -78,6 +81,8 @@ const Select = (props) => {
     onChange,
     options,
     simpleValue = false,
+    groupKey,
+    groupValueMapping,
     disabled = false,
     clearable = false,
     placeholder = __("Select...", "eightshift-ui-components"),
@@ -93,8 +98,44 @@ const Select = (props) => {
     ...rest
   } = props;
   const ref = useRef();
-  const currentValue = simpleValue ? value ?? null : value?.value ?? null;
+  const [searchTerm, setSearchTerm] = useState("");
   const { contains } = $bb77f239b46e8c72$export$3274cf84b703fff({ sensitivity: "base" });
+  const filteredOptions = useMemo(() => {
+    if (!searchable || searchTerm.length === 0) {
+      return options;
+    }
+    return options?.filter((item) => {
+      return contains(item.label ?? "", searchTerm) || contains(item?.subtitle ?? "", searchTerm);
+    });
+  }, [options, searchable, searchTerm, contains]);
+  const groupedOptions = useMemo(() => getGroupedOptions(filteredOptions, groupKey, groupValueMapping), [filteredOptions, groupKey, groupValueMapping]);
+  const currentValue = simpleValue ? value ?? null : value?.value ?? null;
+  const renderItem = (item) => {
+    let icon2 = item?.icon ?? null;
+    if (typeof item?.icon === "string") {
+      icon2 = icons?.[item.icon] ?? null;
+    }
+    return /* @__PURE__ */ jsxs(
+      OptionItemBase,
+      {
+        id: item?.value ?? randomId(8),
+        className: item?.className,
+        selectIndicator: true,
+        children: [
+          customMenuOption && customMenuOption(item),
+          !customMenuOption && /* @__PURE__ */ jsx(
+            RichLabel,
+            {
+              icon: icon2,
+              label: item?.label,
+              subtitle: item?.subtitle,
+              noColor: true
+            }
+          )
+        ]
+      }
+    );
+  };
   if (hidden) {
     return null;
   }
@@ -173,6 +214,11 @@ const Select = (props) => {
     {
       isDisabled: disabled,
       value: currentValue,
+      onOpenChange: (isOpen) => {
+        if (!isOpen) {
+          setSearchTerm("");
+        }
+      },
       onChange: (selected) => {
         if (selected === null || selected === void 0) {
           onChange(null);
@@ -190,12 +236,7 @@ const Select = (props) => {
         if (item && "id" in item) {
           delete item.id;
         }
-        onChange({
-          label: item?.label,
-          value: item?.value,
-          subtitle: item?.subtitle,
-          meta: item?.meta
-        });
+        onChange(item);
       },
       placeholder,
       ...rest,
@@ -296,92 +337,96 @@ const Select = (props) => {
                 maxHeight: 240,
                 triggerRef: ref,
                 children: [
-                  searchable && /* @__PURE__ */ jsxs($d2f53cda644affe3$export$2f2b9559550c7bbc, { filter: contains, children: [
-                    /* @__PURE__ */ jsxs(
-                      $440f4836bcb56932$export$b94867ecbd698f21,
-                      {
-                        "aria-label": __("Search", "eightshift-ui-components"),
-                        className: "es:flex es:items-center es:relative",
-                        autoFocus: true,
-                        children: [
-                          /* @__PURE__ */ jsx(
-                            $3985021b0ad6602f$export$f5b8910cec6cf069,
-                            {
-                              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: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"
-                              )
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
-                            {
-                              "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",
-                                "es:flex es:size-7 es:items-center es:justify-center es:rounded-3xl es:text-sm es:text-surface-700 es:transition es:hover:bg-accent-50 es:hover:text-accent-800 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300",
-                                "es:peer-placeholder-shown:opacity-0"
-                              ),
-                              children: icons.clearAlt
-                            }
-                          )
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      $eed445e0843c11d0$export$41f133550aa26f48,
-                      {
-                        className: "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",
-                        items: options,
-                        renderEmptyState: () => /* @__PURE__ */ jsx(
-                          RichLabel,
+                  searchable && /* @__PURE__ */ jsxs(
+                    $d2f53cda644affe3$export$2f2b9559550c7bbc,
+                    {
+                      filter: () => true,
+                      inputValue: searchTerm,
+                      onInputChange: setSearchTerm,
+                      children: [
+                        /* @__PURE__ */ jsxs(
+                          $440f4836bcb56932$export$b94867ecbd698f21,
                           {
-                            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 es:shrink-0",
-                            iconClassName: "es:text-accent-700 es:icon:size-7!",
-                            noColor: true
+                            "aria-label": __("Search", "eightshift-ui-components"),
+                            className: "es:flex es:items-center es:relative",
+                            autoFocus: true,
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                $3985021b0ad6602f$export$f5b8910cec6cf069,
+                                {
+                                  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: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"
+                                  )
+                                }
+                              ),
+                              /* @__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",
+                                    "es:flex es:size-7 es:items-center es:justify-center es:rounded-3xl es:text-sm es:text-surface-700 es:transition es:hover:bg-accent-50 es:hover:text-accent-800 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300",
+                                    "es:peer-placeholder-shown:opacity-0"
+                                  ),
+                                  children: icons.clearAlt
+                                }
+                              )
+                            ]
                           }
                         ),
-                        children: (item) => {
-                          let icon2 = item?.icon ?? null;
-                          if (typeof item?.icon === "string") {
-                            icon2 = icons?.[item.icon] ?? null;
+                        /* @__PURE__ */ jsxs(
+                          $eed445e0843c11d0$export$41f133550aa26f48,
+                          {
+                            className: "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",
+                            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 es:shrink-0",
+                                iconClassName: "es:text-accent-700 es:icon:size-7!",
+                                noColor: true
+                              }
+                            ),
+                            children: [
+                              groupedOptions && /* @__PURE__ */ jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: groupedOptions, children: (item) => /* @__PURE__ */ jsxs(
+                                $eed445e0843c11d0$export$dca12b0bb56e4fc,
+                                {
+                                  id: item.key,
+                                  className: "es:flex es:flex-col es:gap-0.75",
+                                  children: [
+                                    /* @__PURE__ */ jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "es:px-2.5 es:pb-1 es:pt-3 es:select-none", children: /* @__PURE__ */ jsx(
+                                      RichLabel,
+                                      {
+                                        icon: item?.icon,
+                                        label: item?.label,
+                                        subtitle: item?.subtitle,
+                                        endIcon: item?.endIcon,
+                                        fullWidth: true
+                                      }
+                                    ) }),
+                                    /* @__PURE__ */ jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: item.options, children: (subItem) => renderItem(subItem) })
+                                  ]
+                                }
+                              ) }),
+                              !groupedOptions && /* @__PURE__ */ jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: searchable ? filteredOptions : options, children: (item) => renderItem(item) })
+                            ]
                           }
-                          return /* @__PURE__ */ jsxs(
-                            OptionItemBase,
-                            {
-                              id: item?.value ?? randomId(8),
-                              className: item?.className,
-                              selectIndicator: true,
-                              children: [
-                                customMenuOption && customMenuOption(item),
-                                !customMenuOption && /* @__PURE__ */ jsx(
-                                  RichLabel,
-                                  {
-                                    icon: icon2,
-                                    label: item?.label,
-                                    subtitle: item?.subtitle,
-                                    noColor: true
-                                  }
-                                )
-                              ]
-                            }
-                          );
-                        }
-                      }
-                    )
-                  ] }),
-                  !searchable && /* @__PURE__ */ jsx(
+                        )
+                      ]
+                    }
+                  ),
+                  !searchable && /* @__PURE__ */ jsxs(
                     $eed445e0843c11d0$export$41f133550aa26f48,
                     {
                       className: "es:space-y-0.75 es:p-1.5 es:any-focus:outline-hidden es:h-full es:overflow-y-auto es:rounded-t-xl",
-                      items: options,
                       renderEmptyState: () => /* @__PURE__ */ jsx(
                         RichLabel,
                         {
@@ -393,32 +438,29 @@ const Select = (props) => {
                           noColor: true
                         }
                       ),
-                      children: (item) => {
-                        let icon2 = item?.icon ?? null;
-                        if (typeof item?.icon === "string") {
-                          icon2 = icons?.[item.icon] ?? null;
-                        }
-                        return /* @__PURE__ */ jsxs(
-                          OptionItemBase,
+                      children: [
+                        groupedOptions && /* @__PURE__ */ jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: groupedOptions, children: (item) => /* @__PURE__ */ jsxs(
+                          $eed445e0843c11d0$export$dca12b0bb56e4fc,
                           {
-                            id: item.value,
-                            className: item?.className,
-                            selectIndicator: true,
+                            id: item.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,
+                                  icon: item?.icon,
                                   label: item?.label,
                                   subtitle: item?.subtitle,
-                                  noColor: true
+                                  endIcon: item?.endIcon,
+                                  fullWidth: true
                                 }
-                              )
+                              ) }),
+                              /* @__PURE__ */ jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: item.options, children: (subItem) => renderItem(subItem) })
                             ]
                           }
-                        );
-                      }
+                        ) }),
+                        !groupedOptions && /* @__PURE__ */ jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: options, children: (item) => renderItem(item) })
+                      ]
                     }
                   )
                 ]

package/dist/components/tabs/tabs.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { c as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, b as $3ef42575df84b30b$export$9d1611c77c2fe928, d as $bdb11010cef70236$export$f680877a34711e37, k as $df56164dff5785e2$export$4338b53315abf666, h as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$df3a06d6289f983e, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, e as $64fa3d84918910a7$export$fabf2dc03a41866e, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../../utils-Cr3pLd9c.js";
-import { e as $880e95eb8b93ba9a$export$ecf600387e221c37, m as $ae20dd8cbca75726$export$d6daf82dcd84e87c, h as $e1995378a142960e$export$18af5c7a9e9b3664, g as $e1995378a142960e$export$fb8073518f34e6ec, f as $e1995378a142960e$export$bf788dd355e3a401, n as $23b9f4fcf0fe224b$export$d68d59712b04d9d1, j as $7135fc7d473fd974$export$4feb769f8ddf26c5, o as $7135fc7d473fd974$export$90e00781bc59d8f9, p as $7135fc7d473fd974$export$a164736487e3f0ae } from "../../SelectionManager-oojq6MOy.js";
+import { f as $880e95eb8b93ba9a$export$ecf600387e221c37, o as $ae20dd8cbca75726$export$d6daf82dcd84e87c, j as $e1995378a142960e$export$18af5c7a9e9b3664, $ as $e1995378a142960e$export$fb8073518f34e6ec, g as $e1995378a142960e$export$bf788dd355e3a401, p as $23b9f4fcf0fe224b$export$d68d59712b04d9d1, l as $7135fc7d473fd974$export$4feb769f8ddf26c5, q as $7135fc7d473fd974$export$90e00781bc59d8f9, r as $7135fc7d473fd974$export$a164736487e3f0ae } from "../../SelectionManager-iru59gc4.js";
 import { $ as $1d5b8b8664671ef2$export$c9549807523555e0 } from "../../SelectionIndicator-D7WMzeAW.js";
 import { $ as $c8a5a149f625efcf$export$758399f318e6385a } from "../../SharedElementTransition-CtoWSaF0.js";
 import { $ as $f39a9eba43920ace$export$86427a43e3e48ebb } from "../../Hidden-Rfj-STx7.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-eGTqWSTd.js";
-import { b as $cdc5a6778b766db2$export$a9d04c5684123369 } from "../../useListState-B22CApJO.js";
+import { b as $cdc5a6778b766db2$export$a9d04c5684123369 } from "../../useListState-HOvCQJFf.js";
 import { $ as $d3f049242431219c$export$45fda7c47f93fd48, a as $d3f049242431219c$export$6d3443f2c48bfc20 } from "../../animation-Dfl8uEb3.js";
 import $dbSRa$react__default, { useState, useMemo, useRef, useEffect, useContext, forwardRef, createContext, isValidElement, useId, cloneElement } from "react";
 import { E as $ea8dcbcb9ea1b556$export$7e924b3091a3bd18, $ as $f645667febf57a63$export$4c014de7c8940b4c, x as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-CmyvqeWX.js";
@@ -13,7 +13,7 @@ import { $ as $313b98861ee5dd6c$export$d6875122194c7b44 } from "../../useLabels-
 import { a as $9bf71ea28793e738$export$2d6ec8fc375ceafa } from "../../FocusScope-BJhC1-1e.js";
 import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "../../context-iUFQCK8m.js";
 import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-rUOwLdTK.js";
-import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../useSingleSelectListState-CDZGQDLC.js";
+import { $ as $a0d645289fe9b86b$export$e7f05e985daf4b5f } from "../../useSingleSelectListState-BtrMHGeE.js";
 import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
 import { _ as __ } from "../../default-i18n-CnQeC5Pl.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";

package/dist/{shared-CMLCUova.js → shared-HdRrpnhs.js}

@@ -1,14 +1,14 @@
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { _ as __ } from "./default-i18n-CnQeC5Pl.js";
 import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1, $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "./Button-CFnNdpNZ.js";
-import { c as $eed445e0843c11d0$export$7ff8f37d2d81a48d, d as $eed445e0843c11d0$export$7c5906fe4f1f2af2, e as $eed445e0843c11d0$export$a11e76429ed99b4 } from "./ListBox-BaN0n5h3.js";
+import { d as $eed445e0843c11d0$export$7ff8f37d2d81a48d, e as $eed445e0843c11d0$export$7c5906fe4f1f2af2, f as $eed445e0843c11d0$export$a11e76429ed99b4 } from "./ListBox-ByPsaVVK.js";
 import { b as $3ef42575df84b30b$export$9d1611c77c2fe928, d as $bdb11010cef70236$export$f680877a34711e37, o as $ff5963eb1fccf552$export$e08e3b67e392101e, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, e as $64fa3d84918910a7$export$fabf2dc03a41866e, h as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $64fa3d84918910a7$export$df3a06d6289f983e, f as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, g as $64fa3d84918910a7$export$ef03459518577ad4, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "./utils-Cr3pLd9c.js";
 import { a as $2baaea4c71418dea$export$294aa081a6c6f55d, $ as $ee014567cb39d3f0$export$ff05c3ac10437e03 } from "./FieldError-BPG0hKfB.js";
 import { $ as $d3e0e05bdfcf66bd$export$c24727297075ec6a } from "./Form-Cq3fu75_.js";
 import { a as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "./Label-BDlf9vIY.js";
-import { i as $325a3faab7a68acd$export$a16aca283550c30d, t as $2a25aae57d74318e$export$a05409b8bb224a5a, w as $168583247155ddda$export$dc9c12ed27dd1b49, n as $de32f1b87079253c$export$d2f961adcb0afbe, x as $07b14b47974efb58$export$9b9a0cd73afb7ca4 } from "./Dialog-D0jMcN-a.js";
+import { j as $325a3faab7a68acd$export$a16aca283550c30d, u as $2a25aae57d74318e$export$a05409b8bb224a5a, x as $168583247155ddda$export$dc9c12ed27dd1b49, o as $de32f1b87079253c$export$d2f961adcb0afbe, y as $07b14b47974efb58$export$9b9a0cd73afb7ca4 } from "./Dialog-DDfABlp4.js";
 import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "./Text-CjFEHSfr.js";
-import { s as $fb3050f43d946246$export$e32c88dfddc6e1d8, f as $e1995378a142960e$export$bf788dd355e3a401 } from "./SelectionManager-oojq6MOy.js";
+import { u as $fb3050f43d946246$export$e32c88dfddc6e1d8, g as $e1995378a142960e$export$bf788dd355e3a401 } from "./SelectionManager-iru59gc4.js";
 import { $ as $f39a9eba43920ace$export$86427a43e3e48ebb } from "./Hidden-Rfj-STx7.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-eGTqWSTd.js";
 import { $ as $fc909762b330b746$export$61c6a8c84e605fb6, d as $9daab02d461809db$export$683480f191c0e3ea } from "./OverlayArrow-Dy0qw7WL.js";
@@ -16,7 +16,7 @@ import $dbSRa$react__default, { useMemo, useRef, useCallback, useState, forwardR
 import { $ as $18f2051aff69b9bf$export$43bb16f9c6d9e3f7 } from "./context-iUFQCK8m.js";
 import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "./useLocalizedStringFormatter-CEDs0LsA.js";
 import { a as $e93e671b31057976$export$b8473d3665f3a75a, $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10 } from "./useFormValidation-DTmPrTD8.js";
-import { $ as $e72dd72e1c76a225$export$2f645645f7bca764 } from "./useListState-B22CApJO.js";
+import { $ as $e72dd72e1c76a225$export$2f645645f7bca764 } from "./useListState-HOvCQJFf.js";
 import { g as $d4ee10de306f2510$export$4282f70798064fe0, w as $507fabe10e71c6fb$export$8397ddfc504fdb9a, a as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "./useHover-CmyvqeWX.js";
 import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "./useFocusRing-rUOwLdTK.js";
 import { $ as $99facab73266f662$export$5add1d006293d136 } from "./useFormReset-BxtOoO5Q.js";
@@ -967,6 +967,7 @@ const OptionItemBase = (props) => /* @__PURE__ */ jsx(
         "es:bg-surface-50/90",
         "es:rounded-md",
         "es:first:rounded-t-xl es:last:rounded-b-xl",
+        "es:nth-2:rounded-t-xl",
         "es:after-current:rounded-t-xl es:before-current:rounded-b-xl",
         "es:hover:rounded-2xl es:pressed:rounded-3xl",
         "es:focus-visible:bg-white/90 es:focus-visible:rounded-2xl es:focus-visible:text-accent-950",
@@ -1066,11 +1067,44 @@ const SelectClearButton = ({ multi = false }) => {
     }
   );
 };
+const getGroupedOptions = (filteredOptions, groupKey, groupValueMapping) => {
+  if (!groupKey || !filteredOptions || filteredOptions?.length === 0) {
+    return null;
+  }
+  const groups = filteredOptions.reduce((acc, item) => {
+    const key = item[groupKey] ?? "_other";
+    if (!acc[key]) {
+      acc[key] = [];
+    }
+    acc[key].push(item);
+    return acc;
+  }, {});
+  return Object.entries(groups).map(([key, options]) => {
+    const mapping = groupValueMapping?.[key];
+    let icon = mapping?.icon;
+    if (typeof icon === "string") {
+      icon = icons?.[icon] ?? icon;
+    }
+    let endIcon = mapping?.endIcon;
+    if (typeof endIcon === "string") {
+      endIcon = icons?.[endIcon] ?? endIcon;
+    }
+    return {
+      key,
+      label: mapping?.label ?? (key === "_other" ? __("Other", "eightshift-ui-components") : key),
+      icon: icon || null,
+      subtitle: mapping?.subtitle || null,
+      endIcon: endIcon || null,
+      options
+    };
+  });
+};
 export {
   $82d7e5349645de74$export$ef9b1a59e592288f as $,
   OptionItemBase as O,
   SelectClearButton as S,
   $82d7e5349645de74$export$e288731fd71264f0 as a,
-  getValue as g,
+  getValue as b,
+  getGroupedOptions as g,
   moveArrayItem as m
 };

package/dist/{useFilter-8S94U4xM.js → useFilter-NhAlifsK.js}

@@ -1,4 +1,4 @@
-import { i as $325a3faab7a68acd$export$a16aca283550c30d } from "./Dialog-D0jMcN-a.js";
+import { j as $325a3faab7a68acd$export$a16aca283550c30d } from "./Dialog-DDfABlp4.js";
 import { useCallback, useMemo } from "react";
 function $bb77f239b46e8c72$export$3274cf84b703fff(options) {
   let collator = $325a3faab7a68acd$export$a16aca283550c30d({

package/dist/{useListState-B22CApJO.js → useListState-HOvCQJFf.js}

@@ -1,5 +1,5 @@
 import { version, useMemo, useCallback, useRef, useEffect } from "react";
-import { $ as $7af3f5b51489e0b5$export$253fe78d46329472, a as $7613b1592d41b092$export$6cd28814d92fa9c9, b as $d496c0a20b6e58ec$export$6c8a5aaad13c9852 } from "./SelectionManager-oojq6MOy.js";
+import { a as $7af3f5b51489e0b5$export$253fe78d46329472, b as $7613b1592d41b092$export$6cd28814d92fa9c9, c as $d496c0a20b6e58ec$export$6c8a5aaad13c9852 } from "./SelectionManager-iru59gc4.js";
 function $cdc5a6778b766db2$export$a9d04c5684123369(value) {
   const pieces = version.split(".");
   const major = parseInt(pieces[0], 10);

package/dist/{useSingleSelectListState-CDZGQDLC.js → useSingleSelectListState-BtrMHGeE.js}

@@ -1,4 +1,4 @@
-import { $ as $e72dd72e1c76a225$export$2f645645f7bca764 } from "./useListState-B22CApJO.js";
+import { $ as $e72dd72e1c76a225$export$2f645645f7bca764 } from "./useListState-HOvCQJFf.js";
 import { a as $458b0a5536c1a7cf$export$40bfa8c7b0832715 } from "./useHover-CmyvqeWX.js";
 import { useMemo } from "react";
 function $a0d645289fe9b86b$export$e7f05e985daf4b5f(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/ui-components",
-	"version": "6.1.1",
+	"version": "6.2.0",
 	"type": "module",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -58,10 +58,10 @@
 		"@react-stately/collections": "^3.12.9",
 		"@stylistic/eslint-plugin-js": "^4.4.1",
 		"@tailwindcss/vite": "^4.1.18",
-		"@thi.ng/color": "^5.8.9",
-		"@thi.ng/pixel": "^7.5.22",
-		"@thi.ng/pixel-analysis": "^2.0.24",
-		"@thi.ng/pixel-dominant-colors": "^2.0.28",
+		"@thi.ng/color": "^5.8.10",
+		"@thi.ng/pixel": "^7.5.23",
+		"@thi.ng/pixel-analysis": "^2.0.25",
+		"@thi.ng/pixel-dominant-colors": "^2.0.29",
 		"@types/react": "^18.3.28",
 		"@types/react-dom": "^18.3.7",
 		"@vitejs/plugin-react-swc": "^4.2.3",
@@ -74,7 +74,7 @@
 		"eslint-config-prettier": "^10.1.8",
 		"eslint-plugin-jsdoc": "^61.7.1",
 		"eslint-plugin-prettier": "^5.5.5",
-		"glob": "^13.0.1",
+		"glob": "^13.0.2",
 		"globals": "^16.5.0",
 		"just-camel-case": "^6.2.0",
 		"just-debounce-it": "^3.2.0",
@@ -88,7 +88,7 @@
 		"prettier-plugin-tailwindcss": "^0.7.2",
 		"react": "^18.3.1",
 		"react-aria": "^3.46.0",
-		"react-aria-components": "^1.15.0",
+		"react-aria-components": "^1.15.1",
 		"react-dom": "^18.3.1",
 		"react-jsx-parser": "^2.4.1",
 		"react-movable": "^3.4.1",
@@ -103,6 +103,6 @@
 	"dependencies": {
 		"@fontsource-variable/geist-mono": "^5.2.7",
 		"@fontsource-variable/roboto-flex": "^5.2.8",
-		"motion": "^12.31.2"
+		"motion": "^12.34.0"
 	}
 }