@eightshift/ui-components 6.1.1 → 6.3.0

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

@@ -2,14 +2,15 @@ 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-CafsA525.js";
-import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-CFnNdpNZ.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 { g as getValue, $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-CMLCUova.js";
-import { useRef, cloneElement, isValidElement } from "react";
+import { $ as $d2f53cda644affe3$export$2f2b9559550c7bbc, a as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../SearchField-B_yKFXRk.js";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../Button-DtRmB6b8.js";
+import { f as $07b14b47974efb58$export$5b6b19405a83ff9d, i as $72a5793c14baf454$export$8b251419efc915eb } from "../../Dialog-DTIxSDhz.js";
+import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../Input-BG9DaxYN.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-_aSf9-8u.js";
+import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$dca12b0bb56e4fc } from "../../ListBox-DXFyyj_r.js";
+import { g as getGroupedOptions, b as getValue, $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, S as SelectClearButton, O as OptionItemBase } from "../../shared-CNH8QfV9.js";
+import { $ as $e1995378a142960e$export$fb8073518f34e6ec } from "../../SelectionManager-B02LcxLr.js";
+import { useRef, useState, useMemo, cloneElement, isValidElement } from "react";
 import { icons } from "../../icons/icons.js";
 import "../../react-jsx-parser.min-DAh4myol.js";
 import { c as clsx } from "../../clsx-DgYk2OaC.js";
@@ -19,7 +20,7 @@ import { TriggeredPopover } from "../popover/popover.js";
 import { DraggableList } from "../draggable-list/draggable-list.js";
 import { DraggableListItem } from "../draggable-list/draggable-list-item.js";
 import { randomId } from "../../utilities/hash.js";
-import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../useFilter-8S94U4xM.js";
+import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../useFilter-Bg5C34XC.js";
 /**
  * Multi-select menu.
  *
@@ -35,6 +36,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.
@@ -83,6 +86,8 @@ const MultiSelect = (props) => {
     onChange,
     options,
     simpleValue = false,
+    groupKey,
+    groupValueMapping,
     disabled = false,
     clearable = false,
     placeholder = __("Select...", "eightshift-ui-components"),
@@ -98,8 +103,44 @@ const MultiSelect = (props) => {
     hidden,
     ...rest
   } = props;
-  const ref = useRef();
+  const ref = useRef(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 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
+            }
+          )
+        ]
+      }
+    );
+  };
   const currentValue = getValue(simpleValue, value, options);
   const currentValueKeys = value?.map((item) => item?.value ?? item);
   const handleSelectionChange = (selected) => {
@@ -127,14 +168,7 @@ const MultiSelect = (props) => {
         ...option
       };
     })?.filter(Boolean);
-    onChange(
-      selectedValues.map((item) => ({
-        label: item?.label,
-        value: item?.value,
-        subtitle: item?.subtitle,
-        meta: item?.meta
-      }))
-    );
+    onChange(selectedValues);
   };
   if (hidden) {
     return null;
@@ -215,6 +249,11 @@ const MultiSelect = (props) => {
       selectionMode: "multiple",
       isDisabled: disabled,
       value: currentValueKeys,
+      onOpenChange: (isOpen) => {
+        if (!isOpen) {
+          setSearchTerm("");
+        }
+      },
       onChange: (selected) => handleSelectionChange(selected),
       placeholder,
       ...rest,
@@ -308,10 +347,12 @@ const MultiSelect = (props) => {
                         slot: null
                       },
                       className: "es:grid es:grid-cols-1 es:grid-rows-[auto_minmax(0,1fr)] es:p-0!",
-                      wrapperClassName: "es:w-72 es:px-1.5 es:h-fit es:from-surface-300/35 es:to-surface-300/35 es:overflow-clip es:rounded-20!",
+                      wrapperClassName: "es:w-(--select-width) es:min-w-72 es:px-1.5 es:h-fit es:from-surface-300/35 es:to-surface-300/35 es:overflow-clip es:rounded-20!",
                       hidden: noReorder || disabled || currentValue?.length < 2,
+                      style: { "--select-width": ref.current ? `${ref.current.offsetWidth}px` : "var(--trigger-width)" },
+                      triggerRef: ref,
                       children: [
-                        /* @__PURE__ */ jsx("span", { className: 'es:text-base es:mx-auto es:my-1 es:font-variation-["wdth"_140,"wght"_320] es:text-surface-600', children: __("Item order", "eightshift-ui-components") }),
+                        /* @__PURE__ */ jsx("span", { className: 'es:text-sm es:ml-3 es:mt-2 es:mb-1 es:font-variation-["wdth"_100,"wght"_325,"ROND"_100] es:text-surface-600', children: __("Item order", "eightshift-ui-components") }),
                         /* @__PURE__ */ jsx(
                           DraggableList,
                           {
@@ -349,7 +390,8 @@ const MultiSelect = (props) => {
               $07b14b47974efb58$export$5b6b19405a83ff9d,
               {
                 className: ({ isEntering, isExiting }) => clsx(
-                  "es:w-(--trigger-width) es:min-w-72",
+                  "es:font-sans",
+                  "es:w-(--select-width) es:min-w-72",
                   "es:outline-hidden",
                   searchable ? "es:rounded-b-xl es:rounded-t-3xl" : "es:rounded-2xl",
                   "es:overflow-clip es:grid es:grid-cols-1",
@@ -374,93 +416,98 @@ const MultiSelect = (props) => {
                 placement: "bottom left",
                 maxHeight: 260,
                 triggerRef: ref,
+                style: { "--select-width": ref.current ? `${ref.current.offsetWidth}px` : "var(--trigger-width)" },
                 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,
                         {
@@ -472,32 +519,29 @@ const MultiSelect = (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 ?? randomId(8),
-                            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/select/shared.js

@@ -1,8 +1,8 @@
 import "react/jsx-runtime";
 import "../../default-i18n-CnQeC5Pl.js";
-import "../../Button-CFnNdpNZ.js";
-import "../../ListBox-BaN0n5h3.js";
-import { O, S, g, m } from "../../shared-CMLCUova.js";
+import "../../Button-DtRmB6b8.js";
+import "../../ListBox-DXFyyj_r.js";
+import { O, S, g, b, m } from "../../shared-CNH8QfV9.js";
 import "../../icons/icons.js";
 import "react";
 import "../../react-jsx-parser.min-DAh4myol.js";
@@ -11,6 +11,7 @@ import "../animated-visibility/animated-visibility.js";
 export {
   O as OptionItemBase,
   S as SelectClearButton,
-  g as getValue,
+  g as getGroupedOptions,
+  b as getValue,
   m as moveArrayItem
 };