@eightshift/ui-components 5.0.0 → 5.0.2

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

@@ -0,0 +1,297 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { _ as __ } from "../../../default-i18n-CT_oS1Fy.js";
+import { $ as $d2b4bc8c273e7be6$export$353f5b6fc5456de1 } from "../../../Button-BpwTmkAe.js";
+import { $ as $f86e6c1ec7da6ebb$export$bc3384a35de93d66, a as $d01f2c01039c0eec$export$72b9695b8216309a, b as $d01f2c01039c0eec$export$c02625b26074192c } from "../../../ComboBox-BJpTEATT.js";
+import { $ as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../../../Input-BmDS8Juy.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../../Label-JS_ob-kh.js";
+import { $ as $eed445e0843c11d0$export$41f133550aa26f48 } from "../../../ListBox-BTxlCGcc.js";
+import { $ as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../../../Dialog-O9uw63D7.js";
+import { $ as $514c0188e459b4c0$export$5f1af8db9871e1d6 } from "../../../Text-BuJgePCv.js";
+import { OptionItemBase } from "./shared.js";
+import { RichLabel } from "../../rich-label/rich-label.js";
+import { BaseControl } from "../../base-control/base-control.js";
+import { useEffect, useRef, cloneElement, useContext } from "react";
+import { icons } from "../../../icons/icons.js";
+import "../../../react-jsx-parser.min-DZCiis5V.js";
+import { unescapeHTML } from "../../../utilities/text-helpers.js";
+import { c as clsx } from "../../../utils-CZt7LCbO.js";
+/**
+ * Select menu with async loading.
+ *
+ * @component
+ * @param {Object} props - Component props.
+ * @param {string} [props.label] - Label of the component.
+ * @param {string} [props.help] - Help text of the component.
+ * @param {string} [props.icon] - Icon of the component.
+ * @param {string} [props.subtitle] - Subtitle of the component.
+ * @param {JSX.Element|JSX.Element[]} [props.actions] - Actions to show to the right of the label.
+ * @param {boolean} [props.inline] - Whether the Select menu is displayed inline with the label, to the right.
+ * @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 {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 {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.hidden] - If `true`, the component is not rendered.
+ *
+ * @returns {JSX.Element} The __ExperimentalAsyncSelect component.
+ *
+ * @example
+ * const [value, setValue] = useState(null);
+ *
+ * <__ExperimentalAsyncSelect
+ * 	label='Select items'
+ * 	fetchUrl={(searchText) => `https://api.example.com/items?q=${searchText}`}
+ * 	value={value}
+ * 	onChange={setValue}
+ * 	getLabel={(item) => item?.name}
+ * 	getValue={(item) => item?.id}
+ * />
+ *
+ * @preserve
+ */
+const __ExperimentalAsyncSelect = (props) => {
+  const {
+    label,
+    help,
+    icon,
+    subtitle,
+    actions,
+    inline,
+    value,
+    onChange,
+    noSearch = false,
+    disabled = false,
+    clearable = false,
+    className,
+    placeholder,
+    customMenuOption,
+    customValueDisplay,
+    processLoadedOptions = (options) => options,
+    fetchUrl,
+    fetchConfig = {},
+    getLabel,
+    getValue,
+    getMeta,
+    getIcon,
+    getSubtitle,
+    getData = (data) => data,
+    hidden,
+    ...rest
+  } = props;
+  let list = $f86e6c1ec7da6ebb$export$bc3384a35de93d66({
+    // initialFilterText: value?.label,
+    async load({ signal, filterText: rawFilterText }) {
+      let filterText = rawFilterText.trim();
+      const res = await fetch(fetchUrl(filterText), { ...fetchConfig, signal });
+      const json = getData(await res.json());
+      const output = json == null ? void 0 : json.map((item) => {
+        const id = getValue(item);
+        const entry = { label: unescapeHTML(getLabel(item)), value: id };
+        if (getMeta) {
+          entry.meta = getMeta(item);
+        }
+        if (getSubtitle) {
+          entry.subtitle = unescapeHTML(getSubtitle(item));
+        }
+        return entry;
+      });
+      return {
+        items: output
+      };
+    }
+  });
+  let listItems = [...list.items];
+  if (value == null ? void 0 : value.value) {
+    const selectedIndex = listItems.findIndex((item) => item.value === (value == null ? void 0 : value.value));
+    if (selectedIndex === -1) {
+      listItems = [{ ...value }, ...listItems];
+    }
+  }
+  useEffect(() => {
+    if (list.filterText !== (value == null ? void 0 : value.label)) {
+      list.setFilterText(value == null ? void 0 : value.label);
+    }
+    if (!value && list.filterText) {
+      list.setFilterText("");
+    }
+  }, [value]);
+  const ref = useRef();
+  if (hidden) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    $d01f2c01039c0eec$export$72b9695b8216309a,
+    {
+      onSelectionChange: (selected) => {
+        if (selected === null || selected === void 0) {
+          onChange(null);
+          list.setFilterText("");
+          return;
+        }
+        if (selected === (value == null ? void 0 : value.value) || list.filterText === (value == null ? void 0 : value.label)) {
+          return;
+        }
+        const item = (list == null ? void 0 : list.getItem(selected)) ?? listItems.find((item2) => item2.value === selected);
+        if (!item) {
+          onChange(null);
+          list.setFilterText("");
+          return;
+        }
+        list.setFilterText(item.label);
+        onChange(item);
+      },
+      allowsCustomValue: false,
+      allowsEmptyCollection: true,
+      selectedKey: (value == null ? void 0 : value.value) ?? null,
+      inputValue: list.filterText,
+      onInputChange: list.setFilterText,
+      items: listItems,
+      isDisabled: disabled,
+      menuTrigger: "focus",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          BaseControl,
+          {
+            icon,
+            label,
+            subtitle,
+            help,
+            actions,
+            labelAs: $01b77f81d0f07f68$export$b04be29aa201d4f5,
+            inline,
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: clsx(
+                  "es:relative es:flex es:max-w-80 es:items-center es:gap-1 es:p-1 es:focus-visible:outline-hidden es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
+                  "es:h-9 es:rounded-lg es:border es:border-secondary-300 es:bg-white es:text-sm es:shadow-xs es:transition",
+                  "es:any-focus:outline-hidden",
+                  !inline && "es:w-full",
+                  disabled && "es:select-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"
+                ),
+                ref,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    $3985021b0ad6602f$export$f5b8910cec6cf069,
+                    {
+                      className: clsx(
+                        "es:peer es:h-6 es:w-full es:grow es:rounded-sm es:p-1 es:pr-6 es:text-sm es:text-transparent es:transition",
+                        "es:focus:text-current es:any-focus:outline-hidden",
+                        "es:selection:bg-accent-500/20 es:selection:text-accent-950",
+                        disabled && "es:bg-transparent es:text-secondary-400 es:selection:bg-transparent es:selection:text-transparent"
+                      ),
+                      placeholder: placeholder ?? __("Select...", "eightshift-ui-components")
+                    }
+                  ),
+                  value && /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: clsx(
+                        "es:pointer-events-none es:absolute es:bottom-0 es:left-2 es:top-0 es:my-auto es:flex es:select-none es:items-center es:overflow-hidden",
+                        "es:has-[svg]:left-1 es:peer-data-[focused=true]:invisible es:peer-disabled:opacity-40",
+                        clearable ? "es:right-16" : "es:right-6"
+                      ),
+                      children: [
+                        customValueDisplay && customValueDisplay(value),
+                        !customValueDisplay && /* @__PURE__ */ jsx(
+                          RichLabel,
+                          {
+                            icon: getIcon(value),
+                            label: value == null ? void 0 : value.label,
+                            subtitle: value == null ? void 0 : value.subtitle,
+                            className: "es:[&_span]:overflow-hidden es:[&_span]:text-ellipsis es:[&_span]:text-nowrap"
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  clearable && /* @__PURE__ */ jsx(ClearButton, { disabled }),
+                  /* @__PURE__ */ jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: clsx("es:group es:absolute es:bottom-0 es:right-0 es:top-0 es:my-auto es:size-6", disabled ? "es:text-secondary-300" : "es:text-secondary-500"), children: cloneElement(icons.dropdownCaretAlt, {
+                    className: "es:w-4 es:group-aria-expanded:-scale-y-100 es:transition-transform es:duration-200",
+                    "aria-hidden": true
+                  }) })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          $07b14b47974efb58$export$5b6b19405a83ff9d,
+          {
+            className: ({ isEntering, isExiting }) => clsx(
+              "es:flex es:w-80 es:min-w-9 es:max-w-80 es:flex-col es:overflow-x-hidden es:rounded-lg es:border es:border-secondary-200 es:bg-white es:text-sm es:shadow-lg",
+              "es:any-focus:outline-hidden",
+              isEntering && "es:motion-safe:motion-preset-slide-down-sm es:motion-safe:motion-duration-300 es:motion-reduce:motion-preset-fade-md",
+              isExiting && "es:not-motion-reduce:motion-translate-y-out-[-2.5%] es:motion-opacity-out-0 es:motion-duration-200"
+            ),
+            placement: "bottom left",
+            triggerRef: ref,
+            children: [
+              !list.isLoading && list.items.length > 0 && /* @__PURE__ */ jsx($eed445e0843c11d0$export$41f133550aa26f48, { className: "es:space-y-0.5 es:p-1 es:any-focus:outline-hidden", children: (item) => {
+                return /* @__PURE__ */ jsxs(
+                  OptionItemBase,
+                  {
+                    id: item.value,
+                    className: item == null ? void 0 : item.className,
+                    children: [
+                      customMenuOption && customMenuOption(item),
+                      !customMenuOption && /* @__PURE__ */ jsx(
+                        RichLabel,
+                        {
+                          icon: (item == null ? void 0 : item.icon) ?? getIcon(item),
+                          label: item == null ? void 0 : item.label,
+                          subtitle: item.subtitle
+                        }
+                      )
+                    ]
+                  }
+                );
+              } }),
+              list.isLoading && cloneElement(icons.loader, { className: "es:mx-auto es:my-4 es:animate-spin es:size-5.5 es:text-accent-700" }),
+              !list.isLoading && list.items.length === 0 && /* @__PURE__ */ jsx("div", { className: "es:flex es:p-2", children: /* @__PURE__ */ jsxs(
+                $514c0188e459b4c0$export$5f1af8db9871e1d6,
+                {
+                  slot: "errorMessage",
+                  className: clsx("es:flex es:w-full es:items-center es:gap-1 es:rounded es:text-amber-950"),
+                  children: [
+                    icons.searchEmpty,
+                    __("Nothing found", "eightshift-ui-components")
+                  ]
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const ClearButton = ({ disabled }) => {
+  const state = useContext($d01f2c01039c0eec$export$c02625b26074192c);
+  const isEmpty = (state == null ? void 0 : state.selectedKey) === null || (state == null ? void 0 : state.inputValue) === "";
+  return /* @__PURE__ */ jsx(
+    $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
+    {
+      "aria-label": __("Clear value", "eightshift-ui-components"),
+      className: clsx(
+        "es:mr-7 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 == null ? void 0 : state.setSelectedKey(null),
+      slot: null,
+      isDisabled: disabled || isEmpty,
+      children: icons.clearAlt
+    }
+  );
+};
+export {
+  __ExperimentalAsyncSelect
+};

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

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import { a as $eed445e0843c11d0$export$a11e76429ed99b4 } from "../../../ListBox-BTxlCGcc.js";
+import { c as clsx } from "../../../utils-CZt7LCbO.js";
+const OptionItemBase = (props) => {
+  var _a;
+  return /* @__PURE__ */ jsx(
+    $eed445e0843c11d0$export$a11e76429ed99b4,
+    {
+      ...props,
+      textValue: (_a = props == null ? void 0 : props.value) == null ? void 0 : _a.label,
+      className: clsx(
+        "es:flex es:min-h-9 es:select-none es:items-center es:gap-1 es:rounded es:p-2 es:transition",
+        "es:any-focus:outline-hidden",
+        "es:hover:bg-secondary-100 es:hover:outline-hidden",
+        "selected:es:bg-accent-600/15 selected:es:text-accent-950",
+        "es:focus-visible:bg-secondary-100 es:focus-visible:outline-hidden",
+        "es:active:bg-accent-700/15"
+      )
+    }
+  );
+};
+export {
+  OptionItemBase
+};