@eightshift/ui-components 5.6.1 → 6.0.0

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

@@ -1,358 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { _ as __ } from "../../../default-i18n-DBm-GqWM.js";
-import { BaseControl } from "../../base-control/base-control.js";
-import { $ as $d2f53cda644affe3$export$2f2b9559550c7bbc, a as $440f4836bcb56932$export$b94867ecbd698f21 } from "../../../SearchField-DWGdCvnn.js";
-import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-CQ5ZZJ2w.js";
-import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../../Input-8yja_IHC.js";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../../Label-DWVaNd2E.js";
-import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../../ListBox-DggfiuO_.js";
-import { e as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-BMgMUQuN.js";
-import { $ as $82d7e5349645de74$export$ef9b1a59e592288f, a as $82d7e5349645de74$export$e288731fd71264f0, b as $82d7e5349645de74$export$ef445b55be0601bd } from "../../../Select-BvggcFOX.js";
-import { useRef, cloneElement, useContext } from "react";
-import { icons } from "../../../icons/icons.js";
-import "../../../react-jsx-parser.min-VUl-CuCv.js";
-import { OptionItemBase } from "./shared.js";
-import { RichLabel } from "../../rich-label/rich-label.js";
-import { c as clsx } from "../../../utils-cvK1vxO7.js";
-import { $ as $bb77f239b46e8c72$export$3274cf84b703fff } from "../../../useFilter-BlkUH1Ma.js";
-/**
- * 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' },
- * ];
- *
- * <SelectNext
- * 	label='Select items'
- * 	options={loadOptions}
- * 	value={value}
- * 	onChange={setValue}
- * />
- *
- * @preserve
- */
-const SelectNext = (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 currentValue = simpleValue ? value ?? null : value?.value ?? null;
-  const { contains } = $bb77f239b46e8c72$export$3274cf84b703fff({ sensitivity: "base" });
-  if (hidden) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    $82d7e5349645de74$export$ef9b1a59e592288f,
-    {
-      isDisabled: disabled,
-      selectedKey: currentValue,
-      onSelectionChange: (selected) => {
-        if (selected === null || selected === void 0) {
-          onChange(null);
-          return;
-        }
-        if (simpleValue) {
-          onChange(selected);
-          return;
-        }
-        const item = options.find((item2) => item2.value === selected);
-        if (!item) {
-          onChange(null);
-          return;
-        }
-        if (item && "id" in item) {
-          delete item.id;
-        }
-        onChange(item);
-      },
-      placeholder,
-      ...rest,
-      children: /* @__PURE__ */ jsxs(
-        BaseControl,
-        {
-          label,
-          icon,
-          subtitle,
-          actions,
-          help,
-          inline,
-          labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
-          children: [
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: clsx(
-                  "es:relative es:flex es:items-center es:gap-1 es:px-1.5 es:focus-visible:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
-                  "es:h-9 es:rounded-10 es:border es:border-secondary-300 es:bg-white es:text-sm es:shadow-sm es:transition",
-                  "es:inset-ring es:inset-ring-secondary-100",
-                  "es:any-focus:outline-hidden",
-                  !noMinWidth && "es:min-w-48",
-                  !inline && "es:w-full",
-                  disabled && "es:select-none es: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__ */ jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: "es:any-focus:outline-hidden es:text-start es:size-full es:inline-block es:group es:overflow-x-clip", children: [
-                    /* @__PURE__ */ jsx($82d7e5349645de74$export$e288731fd71264f0, { children: ({ isPlaceholder, selectedItem }) => {
-                      if (!isPlaceholder && currentValue && customValueDisplay) {
-                        return customValueDisplay(selectedItem);
-                      }
-                      if (!currentValue) {
-                        return /* @__PURE__ */ jsx("span", { className: "es:pointer-events-none es:pr-6 es:text-sm es:text-secondary-500", children: placeholder });
-                      }
-                      let icon2 = selectedItem?.icon ?? null;
-                      if (typeof selectedItem?.icon === "string") {
-                        icon2 = icons?.[selectedItem.icon] ?? null;
-                      }
-                      return /* @__PURE__ */ jsx(
-                        RichLabel,
-                        {
-                          icon: icon2,
-                          label: selectedItem?.label,
-                          subtitle: selectedItem?.subtitle,
-                          className: clsx("es:pr-6 es:grow es:w-full", disabled && "es:grayscale es:pointer-events-none"),
-                          iconClassName: "es:pointer-events-none es:select-none"
-                        }
-                      );
-                    } }),
-                    /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        className: clsx("es:absolute es:bottom-0 es:right-1 es:top-0 es:my-auto es:flex es:items-center", disabled ? "es:text-secondary-300" : "es:text-secondary-500"),
-                        "aria-hidden": "true",
-                        children: [
-                          !customDropdownArrow && cloneElement(icons.dropdownCaretAlt, {
-                            className: "es:w-4 es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200"
-                          }),
-                          customDropdownArrow && /* @__PURE__ */ jsx(
-                            "div",
-                            {
-                              "aria-hidden": "true",
-                              className: "es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200",
-                              children: customDropdownArrow
-                            }
-                          )
-                        ]
-                      }
-                    )
-                  ] }),
-                  clearable && /* @__PURE__ */ jsx(SelectClearButton, {})
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              $07b14b47974efb58$export$5b6b19405a83ff9d,
-              {
-                className: ({ isEntering, isExiting }) => clsx(
-                  "es:flex es:w-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,
-                      {
-                        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,
-                        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,
-                              children: [
-                                customMenuOption && customMenuOption(item),
-                                !customMenuOption && /* @__PURE__ */ jsx(
-                                  RichLabel,
-                                  {
-                                    icon: icon2,
-                                    label: item?.label,
-                                    subtitle: item?.subtitle
-                                  }
-                                )
-                              ]
-                            }
-                          );
-                        }
-                      }
-                    )
-                  ] }),
-                  !searchable && /* @__PURE__ */ jsx(
-                    $eed445e0843c11d0$export$41f133550aa26f48,
-                    {
-                      className: "es:space-y-0.5 es:p-1 es:any-focus:outline-hidden es:overflow-y-auto",
-                      items: options,
-                      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,
-                            children: [
-                              customMenuOption && customMenuOption(item),
-                              !customMenuOption && /* @__PURE__ */ jsx(
-                                RichLabel,
-                                {
-                                  icon: icon2,
-                                  label: item?.label,
-                                  subtitle: item?.subtitle,
-                                  noColor: true
-                                }
-                              )
-                            ]
-                          }
-                        );
-                      }
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
-const SelectClearButton = () => {
-  const state = useContext($82d7e5349645de74$export$ef445b55be0601bd);
-  const isEmpty = state?.selectedKey === null;
-  return /* @__PURE__ */ jsx(
-    $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
-    {
-      "aria-label": __("Clear value", "eightshift-ui-components"),
-      className: clsx(
-        "es:mr-6 es:flex es:h-6 es:w-8 es:items-center es:justify-center es:rounded es:text-sm es:text-secondary-600 es:transition es:hover:bg-red-50 es:hover:text-red-900 es:any-focus:outline-hidden es:focus:ring-2 es:focus:ring-accent-500/50 es:disabled:text-secondary-300 es:cursor-pointer",
-        isEmpty ? "es:hidden" : "es:flex"
-      ),
-      onPress: () => state?.setSelectedKey(null),
-      slot: null,
-      children: icons.clearAlt
-    }
-  );
-};
-export {
-  SelectNext
-};