@eightshift/ui-components 5.1.3 → 5.2.0

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

@@ -1,21 +1,21 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { _ as __ } from "../../../default-i18n-OFa3zAyB.js";
+import { _ as __ } from "../../../default-i18n-DY6EfUSA.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 $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-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 { b as $d2f53cda644affe3$export$2f2b9559550c7bbc, c as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../../Separator-Fl7qSeN-.js";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-RTwMSBs-.js";
+import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../../Group-C4cXobNT.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../../Label-DWVaNd2E.js";
+import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../../ListBox-BeC97FZ4.js";
+import { e as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-Xf6AsnV-.js";
+import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, b as $82d7e5349645de74$export$ef445b55be0601bd } from "../../../Select-DEQf8ZWI.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 { unescapeHTML } from "../../../utilities/text-helpers.js";
-import { c as clsx } from "../../../utils-CZt7LCbO.js";
-import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66 } from "../../../useAsyncList-fLtZMvJO.js";
+import { c as clsx } from "../../../utils-cvK1vxO7.js";
+import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66 } from "../../../useAsyncList-ZqaIH2gh.js";
 /**
  * Select menu with async loading.
  *
@@ -30,14 +30,17 @@ import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66 } from "../../../useAsyn
  * @param {{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.clearable=false] - Whether the select is clearable.
- * @param {boolean} [props.noSearch=false] - Whether the search is disabled.
  * @param {boolean} [props.disabled=false] - Whether the select is disabled.
- * @param {boolean} [props.keepMenuOpenAfterSelect=false] - Whether the menu stays open after an select.
  * @param {string} [props.placeholder] - Placeholder text to show when no value is selected.
+ * @param {Function} [props.getLabel] - Function to get the label for the item from the fetched data. `(item: Object<string, any>) => string`
+ * @param {Function} [props.getValue] - Function to get the value for the item from the fetched data. `(item: Object<string, any>) => string`
+ * @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.getData] - Function to pre-process the fetched data before it is used in the select. `(data: Object<string, any>[]) => Object<string, any>[]`
  * @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.
@@ -68,7 +71,6 @@ const AsyncSelectNext = (props) => {
     inline,
     value,
     onChange,
-    noSearch = false,
     disabled = false,
     clearable = false,
     className,

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

@@ -0,0 +1,403 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { _ as __ } from "../../../default-i18n-DY6EfUSA.js";
+import { BaseControl } from "../../base-control/base-control.js";
+import { b as $d2f53cda644affe3$export$2f2b9559550c7bbc, c as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../../Separator-Fl7qSeN-.js";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-RTwMSBs-.js";
+import { g as $de32f1b87079253c$export$2e1e1122cf0cba88, e as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-Xf6AsnV-.js";
+import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../../Group-C4cXobNT.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../../Label-DWVaNd2E.js";
+import { $ as $eed445e0843c11d0$export$41f133550aa26f48, a as $eed445e0843c11d0$export$a11e76429ed99b4, b as $612b8eb6cb90e02d$export$62ed72bc21f6b8a6 } from "../../../ListBox-BeC97FZ4.js";
+import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../../Text-AxKZjtFm.js";
+import { $ as $d8f176866e6dc039$export$2cfc5be7a55829f6 } from "../../../useDragAndDrop-CddFteYC.js";
+import { useRef, cloneElement } 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 { c as clsx } from "../../../utils-cvK1vxO7.js";
+import { getValue, moveArrayItem } from "../shared.js";
+import { truncateEnd } from "../../../utilities/text-helpers.js";
+import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../../useFilter-Cl2ggwwq.js";
+/**
+ * Multi-select menu.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.icon] - Icon of the component.
+ * @param {string} [props.help] - Help text of the component.
+ * @param {string} [props.label] - Label of the component.
+ * @param {boolean} [props.inline] - Whether the Select menu is displayed inline with the label, to the right.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
+ * @param {string} [props.subtitle] - Subtitle of the component.
+ * @param {{label: string, value: string, metadata: Object<string, any>?}[]} props.options - Options to display in the select. `[{ label: string, value: string }]`.
+ * @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 {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.
+ * @param {JSX.Element} [props.customMenuOption] - If provided, replaces the default item in the dropdown menu (react-select's `components.Option`).
+ * @param {JSX.Element} [props.customValueDisplay] - If provided, replaces the default current value display of each selected item (react-select's `components.MultiValue`).
+ * @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 {boolean} [props.noMinWidth=false] - If `true`, the select menu will not have a minimum width.
+ * @param {boolean} [props.searchable] - If `true`, the menu will allow searching through the options.
+ * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The SelectNext component.
+ *
+ * @example
+ * const [value, setValue] = useState(null);
+ *
+ * const options = [
+ * 	{ label: 'Option 1', value: 'option-1' },
+ * 	{ label: 'Option 2', value: 'option-2' },
+ * 	{ label: 'Option 3', value: 'option-3' },
+ * ];
+ *
+ * <__MultiSelectNext
+ * 	label='Select items'
+ * 	options={loadOptions}
+ * 	value={value}
+ * 	onChange={setValue}
+ * />
+ *
+ * @preserve
+ */
+const __MultiSelectNext = (props) => {
+  const {
+    icon,
+    help,
+    label,
+    inline,
+    actions,
+    subtitle,
+    value,
+    onChange,
+    options,
+    simpleValue = false,
+    disabled = false,
+    clearable = false,
+    placeholder = __("Select...", "eightshift-ui-components"),
+    customMenuOption,
+    customValueDisplay,
+    customDropdownArrow,
+    className,
+    noMinWidth = false,
+    searchable,
+    hidden,
+    ...rest
+  } = props;
+  const ref = useRef();
+  const { contains } = $bb77f239b46e8c72$export$3274cf84b703fff({ sensitivity: "base" });
+  const currentValue = getValue(simpleValue, value, options);
+  const handleSelectionChange = (selected) => {
+    if (selected === null || selected === void 0) {
+      onChange(null);
+      return;
+    }
+    if (selected.size === 0) {
+      onChange(simpleValue ? "" : []);
+      return;
+    }
+    if (simpleValue) {
+      onChange([...selected]);
+      return;
+    }
+    const selectedValues = [...selected]?.map((item) => {
+      const option = options.find((option2) => option2.value === item);
+      if (!option) {
+        return null;
+      }
+      return {
+        ...option
+      };
+    })?.filter(Boolean);
+    onChange(selectedValues);
+  };
+  const selectedItems = new Set(currentValue?.map((item) => item?.value ?? item ?? null).filter(Boolean));
+  let { dragAndDropHooks } = $d8f176866e6dc039$export$2cfc5be7a55829f6({
+    getItems: (keys) => [...keys].map((key) => ({ "text/plain": key, text: currentValue.find((item) => item.value === key)?.label ?? key })),
+    onReorder(e) {
+      handleSelectionChange(new Set(moveArrayItem(selectedItems, [...e.keys][0], e.target.key, e.target.dropPosition)));
+    },
+    renderDragPreview(items) {
+      return /* @__PURE__ */ jsxs("div", { className: "es:bg-accent-700 es:rounded-md es:px-1.5 es:py-0.5 es:text-white es:translate-x-7 es:translate-y-6", children: [
+        truncateEnd(items[0]["text"], 20),
+        items.length > 1 && /* @__PURE__ */ jsx("span", { className: "badge", children: items.length })
+      ] });
+    },
+    renderDropIndicator(target) {
+      return /* @__PURE__ */ jsx(
+        $612b8eb6cb90e02d$export$62ed72bc21f6b8a6,
+        {
+          target,
+          className: "es:w-0.75 es:h-5.5 es:rounded-md es:transition es:inset-ring-0 es:drop-target:bg-accent-600 es:bg-accent-700/30 es:any-focus:outline-hidden es:any-focus:inset-ring-0"
+        }
+      );
+    },
+    isDisabled: disabled || selectedItems.size < 2
+  });
+  if (hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    BaseControl,
+    {
+      label,
+      icon,
+      subtitle,
+      actions,
+      help,
+      inline,
+      labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+      ...rest,
+      children: /* @__PURE__ */ jsxs($de32f1b87079253c$export$2e1e1122cf0cba88, { children: [
+        /* @__PURE__ */ jsxs(
+          $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
+          {
+            "aria-label": __("Select items", "eightshift-ui-components"),
+            className: clsx(
+              "es:group",
+              "es:relative es:flex es:items-center es:gap-1 es:py-0.75 es:pl-0.75 es:pr-1.5 es:focus-visible:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
+              "es:min-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: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(
+                $eed445e0843c11d0$export$41f133550aa26f48,
+                {
+                  "aria-label": __("Selected items", "eightshift-ui-components"),
+                  layout: "grid",
+                  items: currentValue,
+                  selectionMode: "none",
+                  dependencies: [currentValue],
+                  className: "es:peer es:w-full es:flex es:items-center es:flex-wrap es:gap-0.75 es:has-dragging:inset-ring-1 es:has-dragging:inset-ring-accent-500/10 es:rounded-md es:transition es:leading-tight",
+                  renderEmptyState: () => /* @__PURE__ */ jsx("div", { className: "es:text-secondary-500 es:pl-1.5 es:flex es:items-center", children: placeholder }),
+                  dragAndDropHooks,
+                  children: (item) => /* @__PURE__ */ jsxs(
+                    $eed445e0843c11d0$export$a11e76429ed99b4,
+                    {
+                      id: item?.value,
+                      textValue: item?.label,
+                      className: clsx(
+                        "es:inset-ring es:inset-ring-secondary-200/30 es:h-7 es:bg-secondary-100 es:focus-visible:inset-ring-accent-500 es:dragging:cursor-grabbing es:focus:outline-hidden es:py-1 es:px-1.5 es:rounded-7 es:dragging:inset-ring-accent-600/20 es:dragging:bg-transparent es:dragging:text-accent-600/40 es:transition es:flex es:items-center es:gap-1",
+                        !disabled && selectedItems.size >= 2 && "es:cursor-move"
+                      ),
+                      children: [
+                        customValueDisplay && customValueDisplay(truncateEnd(item?.label, 20), item),
+                        !customValueDisplay && /* @__PURE__ */ jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "label", children: truncateEnd(item?.label, 20) })
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "es:shrink-0 es:ml-auto es:peer-has-dragging:hidden", children: [
+                !customDropdownArrow && cloneElement(icons.dropdownCaretAlt, {
+                  className: "es:shrink-0 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:shrink-0 es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200",
+                    children: customDropdownArrow
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          $07b14b47974efb58$export$5b6b19405a83ff9d,
+          {
+            "aria-label": __("Items", "eightshift-ui-components"),
+            className: ({ isEntering, isExiting }) => clsx(
+              "es:flex es:w-76 es:min-w-9 es:max-w-76 es:flex-col es:-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",
+            maxHeight: 300,
+            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: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:px-2.5 es:shadow-none 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" }),
+                /* @__PURE__ */ jsx(
+                  $eed445e0843c11d0$export$41f133550aa26f48,
+                  {
+                    "aria-label": __("Items", "eightshift-ui-components"),
+                    selectedKeys: selectedItems,
+                    selectionMode: "multiple",
+                    selectionBehavior: "toggle",
+                    className: clsx("es:space-y-0.5 es:p-1 es:any-focus:outline-hidden es:min-h-16", options?.length > 0 && "es:overflow-y-auto"),
+                    items: options,
+                    onSelectionChange: handleSelectionChange,
+                    escapeKeyBehavior: "none",
+                    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: (item) => {
+                      let icon2 = item?.icon ?? null;
+                      if (typeof item?.icon === "string") {
+                        icon2 = icons?.[item.icon] ?? null;
+                      }
+                      return /* @__PURE__ */ jsxs(
+                        OptionItemBase,
+                        {
+                          id: item.value,
+                          className: item?.className,
+                          selectIndicator: true,
+                          children: [
+                            customMenuOption && customMenuOption(item),
+                            !customMenuOption && /* @__PURE__ */ jsx(
+                              RichLabel,
+                              {
+                                icon: icon2,
+                                label: item?.label,
+                                subtitle: item?.subtitle
+                              }
+                            )
+                          ]
+                        }
+                      );
+                    }
+                  }
+                )
+              ] }),
+              !searchable && /* @__PURE__ */ jsx(
+                $eed445e0843c11d0$export$41f133550aa26f48,
+                {
+                  "aria-label": __("Items", "eightshift-ui-components"),
+                  autoFocus: true,
+                  selectionMode: "multiple",
+                  selectionBehavior: "toggle",
+                  selectedKeys: selectedItems,
+                  onSelectionChange: handleSelectionChange,
+                  className: "es:space-y-0.5 es:p-1 es:any-focus:outline-hidden es:overflow-y-auto",
+                  items: options,
+                  escapeKeyBehavior: "none",
+                  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 = item?.icon ?? null;
+                    if (typeof item?.icon === "string") {
+                      icon2 = icons?.[item.icon] ?? null;
+                    }
+                    return /* @__PURE__ */ jsxs(
+                      OptionItemBase,
+                      {
+                        id: item.value,
+                        className: item?.className,
+                        selectIndicator: true,
+                        children: [
+                          customMenuOption && customMenuOption(item),
+                          !customMenuOption && /* @__PURE__ */ jsx(
+                            RichLabel,
+                            {
+                              icon: icon2,
+                              label: item?.label,
+                              subtitle: item?.subtitle
+                            }
+                          )
+                        ]
+                      }
+                    );
+                  }
+                }
+              ),
+              clearable && value.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { className: "es:w-full es:h-px es:bg-secondary-200 es:shrink-0" }),
+                /* @__PURE__ */ jsx(
+                  $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
+                  {
+                    slot: "close",
+                    onPress: () => handleSelectionChange([]),
+                    className: clsx(
+                      "es:flex es:h-10 es:m-1 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:any-focus:outline-hidden es:overflow-clip",
+                      "es:not-selected:hover:bg-secondary-100 es:not-selected:hover:outline-hidden",
+                      "es:selected:bg-accent-600/15 es:selected:text-accent-950",
+                      "es:selected:focus-visible:inset-ring es:selected:focus-visible:inset-ring-accent-600/30",
+                      "es:not-selected:focus-visible:bg-secondary-100 es:not-selected:focus-visible:outline-hidden",
+                      "es:active:bg-accent-700/15"
+                    ),
+                    children: /* @__PURE__ */ jsx(
+                      RichLabel,
+                      {
+                        icon: icons.clearAlt,
+                        label: __("Clear selection", "eightshift-ui-components")
+                      }
+                    )
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  __MultiSelectNext
+};

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

@@ -1,15 +1,19 @@
-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) => /* @__PURE__ */ jsxs(
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../../ListBox-BeC97FZ4.js";
+import { c as clsx } from "../../../utils-cvK1vxO7.js";
+import { icons } from "../../../icons/icons.js";
+import "react";
+import "../../../react-jsx-parser.min-LF707GK8.js";
+import { AnimatedVisibility } from "../../animated-visibility/animated-visibility.js";
+const OptionItemBase = (props) => /* @__PURE__ */ jsx(
   $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: [
+    children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [
       props.extraPre,
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         "div",
         {
           className: clsx(
@@ -21,11 +25,43 @@ const OptionItemBase = (props) => /* @__PURE__ */ jsxs(
             "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
+          children: [
+            props.children,
+            props.selectIndicator && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(
+                  "es:size-5 es:grid es:place-items-center es:grid-cols-1 es:grid-rows-1 es:*:row-start-1 es:*:col-start-1",
+                  "es:transition es:cursor-pointer",
+                  "es:bg-radial es:border es:rounded-md",
+                  "es:shadow-xs es:inset-ring es:inset-shadow-xs",
+                  "es:any-focus:outline-hidden es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/50",
+                  !isSelected && "es:group-focus-visible:border-accent-500",
+                  !isSelected && "es:border-secondary-300 es:inset-ring-secondary-100 es:inset-shadow-secondary-100/50",
+                  !isSelected && "es:from-secondary-50 es:to-white es:text-secondary-600 es:hover:text-accent-950",
+                  !isSelected && "es:hover:inset-shadow-secondary-100 es:hover:to-secondary-100 es:hover:inset-ring-secondary-100",
+                  isSelected && "es:text-white es:from-accent-500 es:to-accent-600",
+                  isSelected && "es:shadow-accent-600/30 es:border-accent-700 es:inset-ring es:inset-ring-accent-600 es:inset-shadow-accent-400/75",
+                  isSelected && "es:group-focus-visible:inset-ring-accent-600 es:group-focus-visible:inset-shadow-xs es:group-focus-visible:inset-shadow-accent-400",
+                  "es:ml-auto"
+                ),
+                children: /* @__PURE__ */ jsx(
+                  AnimatedVisibility,
+                  {
+                    transition: "scaleRotateFade",
+                    visible: isSelected,
+                    className: "es:transition-none es:icon:size-3 es:icon:stroke-3",
+                    noInitial: true,
+                    children: icons.check
+                  }
+                )
+              }
+            )
+          ]
         }
       ),
       props.extraAfter
-    ]
+    ] })
   }
 );
 export {

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

@@ -1,20 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { _ as __ } from "../../../default-i18n-OFa3zAyB.js";
+import { _ as __ } from "../../../default-i18n-DY6EfUSA.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 $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-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 { b as $d2f53cda644affe3$export$2f2b9559550c7bbc, c as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../../Separator-Fl7qSeN-.js";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-RTwMSBs-.js";
+import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../../Group-C4cXobNT.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../../Label-DWVaNd2E.js";
+import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../../ListBox-BeC97FZ4.js";
+import { e as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-Xf6AsnV-.js";
+import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, b as $82d7e5349645de74$export$ef445b55be0601bd } from "../../../Select-DEQf8ZWI.js";
 import { useRef, 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 { c as clsx } from "../../../utils-CZt7LCbO.js";
-import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../../useFilter-BR5z1A4Q.js";
+import { c as clsx } from "../../../utils-cvK1vxO7.js";
+import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../../useFilter-Cl2ggwwq.js";
 /**
  * Select menu.
  *
@@ -94,6 +94,7 @@ const SelectNext = (props) => {
   return /* @__PURE__ */ jsx(
     $82d7e5349645de74$export$ef9b1a59e592288f,
     {
+      isDisabled: disabled,
       selectedKey: currentValue,
       onSelectionChange: (selected) => {
         if (selected === null || selected === void 0) {

package/dist/components/slider/column-config-slider.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { _ as __ } from "../../default-i18n-OFa3zAyB.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-JS_ob-kh.js";
-import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-uOPcIpqS.js";
+import { _ as __ } from "../../default-i18n-DY6EfUSA.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
+import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b } from "../../Slider-BQFSEhvk.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { icons } from "../../icons/icons.js";
 import { getColumnConfigOutputText } from "./utils.js";

package/dist/components/slider/slider.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-CZt7LCbO.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5, a as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "../../Label-JS_ob-kh.js";
-import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b, d as $6f909507e6374d18$export$1e7083018727fa60 } from "../../Slider-uOPcIpqS.js";
+import { $ as $64fa3d84918910a7$export$fabf2dc03a41866e } from "../../utils-cvK1vxO7.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5, a as $01b77f81d0f07f68$export$75b6ee27786ba447 } from "../../Label-DWVaNd2E.js";
+import { $ as $6f909507e6374d18$export$472062a354075cee, a as $6f909507e6374d18$export$105594979f116971, b as $6f909507e6374d18$export$2c1b491743890dec, c as $6f909507e6374d18$export$a590f758a961cb5b, d as $6f909507e6374d18$export$1e7083018727fa60 } from "../../Slider-BQFSEhvk.js";
 import { BaseControl } from "../base-control/base-control.js";
 import { c as clsx } from "../../lite-DVmmD_-j.js";
 import { NumberPicker } from "../number-picker/number-picker.js";

package/dist/components/slider/utils.js

@@ -1,4 +1,5 @@
-import { _ as __, s as sprintf, a as _n } from "../../default-i18n-OFa3zAyB.js";
+import { s as sprintf } from "../../sprintf-DmNrJSYG.js";
+import { _ as __, a as _n } from "../../default-i18n-DY6EfUSA.js";
 /**
  * Generates an array of markers based on the provided minimum and maximum values and step.
  * If the step is less than 10, only markers divisible by 5 and 10 are included.