@beautinique/frontend-components 1.0.8 → 1.0.9

package/dist/hierarchy-select/index.cjs

@@ -0,0 +1,596 @@
+'use strict';
+
+var react = require('@iconify/react');
+var react$1 = require('react');
+var reactDom = require('react-dom');
+var inputs = require('@beautinique/frontend-components/inputs');
+var layout = require('@beautinique/frontend-components/layout');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/lib/dropdown-position.ts
+var DROPDOWN_GAP = 8;
+var getDropdownPlacement = /* @__PURE__ */ __name(({
+  rect,
+  viewportHeight,
+  desired,
+  needed
+}) => {
+  const below = viewportHeight - rect.bottom - DROPDOWN_GAP;
+  const above = rect.top - DROPDOWN_GAP;
+  const room = desired === "bottom" ? below : above;
+  const other = desired === "bottom" ? above : below;
+  if (room >= needed || other <= room) return desired;
+  return desired === "bottom" ? "top" : "bottom";
+}, "getDropdownPlacement");
+var getDropdownStyle = /* @__PURE__ */ __name((rect, placement, viewportHeight) => ({
+  left: rect.left,
+  width: rect.width,
+  ...placement === "top" ? { bottom: viewportHeight - rect.top + DROPDOWN_GAP } : { top: rect.bottom + DROPDOWN_GAP }
+}), "getDropdownStyle");
+
+// src/lib/scrollRowIntoView.ts
+var scrollRowIntoView = /* @__PURE__ */ __name((list, row) => {
+  const top = row.offsetTop;
+  const bottom = top + row.offsetHeight;
+  if (top < list.scrollTop) list.scrollTop = top;
+  else if (bottom > list.scrollTop + list.clientHeight) list.scrollTop = bottom - list.clientHeight;
+}, "scrollRowIntoView");
+
+// src/lib/typeahead.ts
+var findEnabledIndex = /* @__PURE__ */ __name((options, from, step) => {
+  for (let index = from + step; index >= 0 && index < options.length; index += step) {
+    if (!options[index]?.disabled) return index;
+  }
+  return -1;
+}, "findEnabledIndex");
+var useAnchoredBox = /* @__PURE__ */ __name(({
+  isOpen,
+  anchorRef,
+  position,
+  needed
+}) => {
+  const [box, setBox] = react$1.useState(null);
+  react$1.useLayoutEffect(() => {
+    if (!isOpen) return;
+    const update = /* @__PURE__ */ __name(() => {
+      const anchor = anchorRef.current;
+      if (!anchor) return;
+      const rect = anchor.getBoundingClientRect();
+      setBox({
+        rect,
+        placement: getDropdownPlacement({
+          rect,
+          viewportHeight: window.innerHeight,
+          desired: position,
+          needed
+        })
+      });
+    }, "update");
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [isOpen, anchorRef, position, needed]);
+  return box;
+}, "useAnchoredBox");
+var openStack = [];
+var useDismiss = /* @__PURE__ */ __name((onDismiss, { enabled = true, ignore, outside = true, escape = true } = {}) => {
+  const ref = react$1.useRef(null);
+  const onDismissRef = react$1.useRef(onDismiss);
+  const ignoreRef = react$1.useRef(ignore);
+  react$1.useLayoutEffect(() => {
+    onDismissRef.current = onDismiss;
+    ignoreRef.current = ignore;
+  });
+  react$1.useEffect(() => {
+    if (!enabled) return;
+    const token = /* @__PURE__ */ Symbol("dismissable");
+    if (escape) openStack.push(token);
+    const handlePress = /* @__PURE__ */ __name((event) => {
+      const element = ref.current;
+      if (!outside || !element) return;
+      const path = event.composedPath();
+      const isInside = path.includes(element) || (ignoreRef.current ?? []).some(({ current }) => current !== null && path.includes(current));
+      if (!isInside) onDismissRef.current("outside", event);
+    }, "handlePress");
+    const handleKey = /* @__PURE__ */ __name((event) => {
+      if (!escape || event.key !== "Escape" || event.defaultPrevented) return;
+      if (openStack.at(-1) !== token) return;
+      onDismissRef.current("escape", event);
+    }, "handleKey");
+    document.addEventListener("pointerdown", handlePress, true);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("pointerdown", handlePress, true);
+      document.removeEventListener("keydown", handleKey);
+      const index = openStack.indexOf(token);
+      if (index !== -1) openStack.splice(index, 1);
+    };
+  }, [enabled, outside, escape]);
+  return ref;
+}, "useDismiss");
+var createIconRegistry = /* @__PURE__ */ __name((sets) => {
+  let registered = false;
+  return {
+    register: /* @__PURE__ */ __name(() => {
+      if (registered) return;
+      for (const set of sets) react.addCollection(set);
+      registered = true;
+    }, "register"),
+    names: sets.flatMap(
+      ({ prefix, icons, aliases }) => [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`)
+    )
+  };
+}, "createIconRegistry");
+
+// src/hierarchy-select/hierarchy-select-icons.ts
+var ICON_SETS = [
+  {
+    prefix: "solar",
+    width: 24,
+    height: 24,
+    icons: {
+      "alt-arrow-down-linear": {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 9L12 15L5 9"/>'
+      },
+      "alt-arrow-right-linear": {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5L15 12L9 19"/>'
+      },
+      "folder-open-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M4 11.5V5.71231C4 5.05041 4 4.71946 4.05548 4.44379C4.29971 3.23023 5.31225 2.28098 6.60671 2.05201C6.90076 2 7.25377 2 7.9598 2C8.26914 2 8.42381 2 8.57246 2.01303C9.21332 2.06921 9.82122 2.30528 10.3168 2.69039C10.4317 2.77971 10.5411 2.88224 10.7598 3.08731L11.2 3.5C11.8526 4.11183 12.1789 4.41775 12.5697 4.62157C12.7844 4.73353 13.012 4.82195 13.2483 4.88508C13.6783 5 14.1398 5 15.0627 5H15.3617C17.4676 5 18.5205 5 19.2049 5.5771C19.2679 5.63018 19.3278 5.68635 19.3844 5.74537C20 6.38701 20 7.37415 20 9.34843V11.5"/><path d="M10 17H14"/><path d="M3.47674 17.4839C2.99958 14.7678 2.761 13.4097 3.33908 12.433C3.4866 12.1838 3.66852 11.9582 3.87908 11.7634C4.7042 11 6.0379 11 8.7053 11H15.2947C17.9621 11 19.2958 11 20.1209 11.7634C20.3315 11.9582 20.5134 12.1838 20.6609 12.433C21.239 13.4097 21.0004 14.7678 20.5233 17.4839C20.1798 19.4391 20.008 20.4167 19.4129 21.0655C19.2585 21.2338 19.0858 21.383 18.8982 21.5101C18.175 22 17.2149 22 15.2947 22H8.70531C6.7851 22 5.825 22 5.10183 21.5101C4.9142 21.383 4.74145 21.2338 4.58706 21.0655C3.99198 20.4167 3.82024 19.4391 3.47674 17.4839Z"/></g>'
+      },
+      "folder-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M18 10L13 10"/><path d="M2 6.94975C2 6.06722 2 5.62595 2.06935 5.25839C2.37464 3.64031 3.64031 2.37464 5.25839 2.06935C5.62595 2 6.06722 2 6.94975 2C7.33642 2 7.52976 2 7.71557 2.01738C8.51665 2.09229 9.27652 2.40704 9.89594 2.92051C10.0396 3.03961 10.1763 3.17633 10.4497 3.44975L11 4C11.8158 4.81578 12.2237 5.22367 12.7121 5.49543C12.9804 5.64471 13.2651 5.7626 13.5604 5.84678C14.0979 6 14.6747 6 15.8284 6H16.2021C18.8345 6 20.1506 6 21.0062 6.76946C21.0849 6.84024 21.1598 6.91514 21.2305 6.99383C22 7.84935 22 9.16554 22 11.7979V14C22 17.7712 22 19.6569 20.8284 20.8284C19.6569 22 17.7712 22 14 22H10C6.22876 22 4.34315 22 3.17157 20.8284C2 19.6569 2 17.7712 2 14V6.94975Z"/></g>'
+      },
+      "file-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M13 2.2627V5.0003C13 7.35732 13 8.53583 13.7322 9.26806C14.4645 10.0003 15.643 10.0003 18 10.0003H21.58"/><path stroke-linejoin="round" d="M3.17139 3.17157C4.34296 2 6.23851 2 10.0296 2C11.5546 2 12.3173 2.00011 13.0093 2.26562C13.7012 2.53114 14.2651 3.03857 15.3929 4.05365L19.3516 7.61621C20.6558 8.78998 21.3078 9.3774 21.6538 10.1543C21.9998 10.9312 22 11.8079 22 13.5625V14C22 17.7712 22 19.6566 20.8284 20.8281C19.6569 21.9997 17.7712 22 14 22L9.9969 21.9997C6.22761 21.9997 4.34284 21.9997 3.17157 20.8284C2 19.6569 2 17.7712 2 14V9.9982C2 6.22817 2 4.34296 3.17139 3.17157Z"/></g>'
+      },
+      "unread-linear": {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 12.9L10.1429 16.5L18 7.5"/>'
+      },
+      "magnifier-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><circle cx="11.5" cy="11.5" r="9.5"/><path d="M18.2173 18.2178L21.9999 22.0004"/></g>'
+      }
+    },
+    aliases: {
+      "magnifer-linear": { parent: "magnifier-linear" }
+    }
+  },
+  {
+    prefix: "lucide",
+    width: 24,
+    height: 24,
+    icons: {
+      x: {
+        body: '<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/>'
+      }
+    }
+  }
+];
+var { register: registerHierarchySelectIcons, names: HIERARCHY_SELECT_ICON_NAMES } = createIconRegistry(ICON_SETS);
+
+// src/hierarchy-select/tree.ts
+var searchTextOf = /* @__PURE__ */ __name((node) => node.searchLabel ?? (typeof node.label === "string" ? node.label : String(node.value)), "searchTextOf");
+var filterTree = /* @__PURE__ */ __name((nodes, keyword) => {
+  const text = keyword.trim().toLowerCase();
+  if (!text) return nodes;
+  return nodes.flatMap((node) => {
+    if (searchTextOf(node).toLowerCase().includes(text)) return [node];
+    const children = node.children ? filterTree(node.children, keyword) : [];
+    return children.length > 0 ? [{ ...node, children }] : [];
+  });
+}, "filterTree");
+var buildRows = /* @__PURE__ */ __name((nodes, expanded, forceExpanded, level = 1, parent) => nodes.flatMap((node, index) => {
+  const isBranch = !!node.children?.length;
+  const isExpanded = isBranch && (forceExpanded || expanded.includes(node.value));
+  const row = {
+    node,
+    level,
+    position: index + 1,
+    size: nodes.length,
+    isBranch,
+    isExpanded,
+    parent
+  };
+  return isExpanded ? [row, ...buildRows(node.children ?? [], expanded, forceExpanded, level + 1, node.value)] : [row];
+}), "buildRows");
+var findNode = /* @__PURE__ */ __name((nodes, value) => {
+  for (const node of nodes) {
+    if (node.value === value) return node;
+    const found = node.children ? findNode(node.children, value) : void 0;
+    if (found) return found;
+  }
+  return void 0;
+}, "findNode");
+var ancestorsOf = /* @__PURE__ */ __name((nodes, value, path = []) => {
+  for (const node of nodes) {
+    if (node.value === value) return path;
+    const found = node.children ? ancestorsOf(node.children, value, [...path, node.value]) : [];
+    if (found.length > 0) return found;
+  }
+  return [];
+}, "ancestorsOf");
+var LABELS = {
+  tree: "Options",
+  search: "Search options",
+  searchPlaceholder: "Search here...",
+  clearSearch: "Clear search",
+  noResultsTitle: "No matching options found",
+  noResultsDescription: "Try searching with a different keyword or clear the search.",
+  results: /* @__PURE__ */ __name((count) => `${String(count)} ${count === 1 ? "option" : "options"} found`, "results")
+};
+var POPUP_MAX_HEIGHT = 330;
+var HierarchySelect = /* @__PURE__ */ __name(({
+  label = "",
+  className = "",
+  error = "",
+  containerClassName = "",
+  optionsClassName = "",
+  icons,
+  selectProps,
+  options,
+  position = "bottom",
+  inputProps,
+  labels
+}) => {
+  registerHierarchySelectIcons();
+  const text = {
+    tree: labels?.tree ?? LABELS.tree,
+    search: labels?.search ?? LABELS.search,
+    searchPlaceholder: labels?.searchPlaceholder ?? LABELS.searchPlaceholder,
+    clearSearch: labels?.clearSearch ?? LABELS.clearSearch,
+    noResultsTitle: labels?.noResultsTitle ?? LABELS.noResultsTitle,
+    noResultsDescription: labels?.noResultsDescription ?? LABELS.noResultsDescription,
+    results: labels?.results ?? LABELS.results
+  };
+  const baseId = react$1.useId();
+  const triggerId = selectProps.id ?? `${baseId}-field`;
+  const popupId = `${baseId}-popup`;
+  const treeId = `${baseId}-tree`;
+  const errorId = `${baseId}-error`;
+  const rowId = /* @__PURE__ */ __name((index) => `${baseId}-row-${String(index)}`, "rowId");
+  const [isOpenState, setIsOpen] = react$1.useState(false);
+  const [ownSearch, setOwnSearch] = react$1.useState("");
+  const [expanded, setExpanded] = react$1.useState([]);
+  const [activeValue, setActiveValue] = react$1.useState(void 0);
+  const fieldBoxRef = react$1.useRef(null);
+  const triggerRef = react$1.useRef(null);
+  const popupRef = react$1.useRef(null);
+  const listRef = react$1.useRef(null);
+  const searchRef = react$1.useRef(null);
+  const activeRowRef = react$1.useRef(null);
+  const isSearchControlled = typeof inputProps?.value === "string";
+  const search = typeof inputProps?.value === "string" ? inputProps.value : ownSearch;
+  const isSearching = search.trim() !== "";
+  const canOpen = options.length > 0 && !selectProps.disabled;
+  if (isOpenState && !canOpen) setIsOpen(false);
+  const isOpen = isOpenState && canOpen;
+  const selected = findNode(options, selectProps.value);
+  const hasValue = selected !== void 0 && selected.value !== "";
+  const shown = react$1.useMemo(() => filterTree(options, search), [options, search]);
+  const rows = react$1.useMemo(
+    () => buildRows(shown, expanded, isSearching),
+    [shown, expanded, isSearching]
+  );
+  const navigable = rows.map((row) => ({ disabled: row.node.disabled }));
+  const foundIndex = rows.findIndex((row) => row.node.value === activeValue);
+  const firstChoosable = rows.findIndex((row) => !row.isBranch && !row.node.disabled);
+  const activeIndex = foundIndex === -1 && isSearching ? firstChoosable : foundIndex;
+  const activeRow = activeIndex === -1 ? void 0 : rows.at(activeIndex);
+  const popup = useAnchoredBox({
+    isOpen,
+    anchorRef: fieldBoxRef,
+    position,
+    needed: POPUP_MAX_HEIGHT
+  });
+  const close = /* @__PURE__ */ __name((returnFocus) => {
+    setIsOpen(false);
+    if (!isSearchControlled) setOwnSearch("");
+    if (returnFocus) triggerRef.current?.focus();
+  }, "close");
+  const containerRef = useDismiss(
+    (reason) => {
+      close(reason === "escape");
+    },
+    { enabled: isOpen, ignore: [popupRef] }
+  );
+  const open = /* @__PURE__ */ __name(() => {
+    if (!canOpen) return;
+    setExpanded(selected ? ancestorsOf(options, selected.value) : []);
+    setActiveValue(selected && !selected.disabled ? selected.value : void 0);
+    setIsOpen(true);
+  }, "open");
+  const toggle = /* @__PURE__ */ __name((value) => {
+    setExpanded(
+      (current) => current.includes(value) ? current.filter((item) => item !== value) : [...current, value]
+    );
+  }, "toggle");
+  const activate = /* @__PURE__ */ __name((row) => {
+    if (row.node.disabled) return;
+    setActiveValue(row.node.value);
+    if (row.isBranch) {
+      if (!isSearching) toggle(row.node.value);
+      return;
+    }
+    selectProps.onChange(row.node.value);
+    close(true);
+  }, "activate");
+  react$1.useEffect(() => {
+    const list = listRef.current;
+    const row = activeRowRef.current;
+    if (isOpen && list && row) scrollRowIntoView(list, row);
+  }, [isOpen, activeIndex, popup]);
+  const handleSearch = /* @__PURE__ */ __name((event) => {
+    inputProps?.onChange?.(event);
+    if (!isSearchControlled) setOwnSearch(event.target.value);
+  }, "handleSearch");
+  const clearSearch = /* @__PURE__ */ __name(() => {
+    const input = searchRef.current;
+    if (!input) return;
+    Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set?.call(input, "");
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+    input.focus();
+  }, "clearSearch");
+  const handleSearchKeyDown = /* @__PURE__ */ __name((event) => {
+    inputProps?.onKeyDown?.(event);
+    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowUp": {
+        event.preventDefault();
+        const next = activeIndex === -1 && event.key === "ArrowUp" ? findEnabledIndex(navigable, rows.length, -1) : findEnabledIndex(navigable, activeIndex, event.key === "ArrowDown" ? 1 : -1);
+        const target = next === -1 ? void 0 : rows.at(next);
+        if (target) setActiveValue(target.node.value);
+        return;
+      }
+      // Right and Left move the cursor in the text while there is a search: there is nothing to open
+      // or close then, because every branch is open
+      case "ArrowRight": {
+        if (isSearching || !activeRow?.isBranch) return;
+        event.preventDefault();
+        const firstChild = rows.at(activeIndex + 1);
+        if (!activeRow.isExpanded) toggle(activeRow.node.value);
+        else if (firstChild && !firstChild.node.disabled) setActiveValue(firstChild.node.value);
+        return;
+      }
+      case "ArrowLeft": {
+        if (isSearching || !activeRow) return;
+        if (activeRow.isExpanded) {
+          event.preventDefault();
+          toggle(activeRow.node.value);
+        } else if (activeRow.parent !== void 0) {
+          event.preventDefault();
+          setActiveValue(activeRow.parent);
+        }
+        return;
+      }
+      case "Enter":
+        event.preventDefault();
+        if (activeRow) activate(activeRow);
+        return;
+      case "Tab":
+        close(true);
+        return;
+    }
+  }, "handleSearchKeyDown");
+  const handleTriggerKeyDown = /* @__PURE__ */ __name((event) => {
+    if (isOpen || event.altKey || event.ctrlKey || event.metaKey) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      open();
+    }
+  }, "handleTriggerKeyDown");
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: `flex max-w-full min-w-0 flex-col gap-1.5 ${containerClassName}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", ref: fieldBoxRef, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(inputs.InputLabel, { htmlFor: triggerId, className: "z-2", children: label }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              "data-invalid": error ? "" : void 0,
+              className: `border-primary/10 bg-smoke-eerie focus-within:border-blue-crayola-c data-invalid:border-red-c flex items-center gap-3 overflow-hidden rounded-lg border px-3 ${className}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(inputs.InputIcon, { icon: icons?.left }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    id: triggerId,
+                    ref: triggerRef,
+                    type: "button",
+                    "aria-haspopup": "dialog",
+                    "aria-expanded": isOpen,
+                    "aria-controls": isOpen ? popupId : void 0,
+                    "aria-invalid": error ? true : void 0,
+                    "aria-describedby": error ? errorId : void 0,
+                    disabled: selectProps.disabled,
+                    onClick: () => {
+                      if (isOpen) close(false);
+                      else open();
+                    },
+                    onKeyDown: handleTriggerKeyDown,
+                    className: `text-primary flex min-w-0 flex-1 items-center justify-between gap-0.5 truncate border-none bg-transparent text-left text-[13px] outline-hidden ${selectProps.disabled ? "cursor-no-drop" : "cursor-pointer"}`,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: `flex-1 truncate py-2 first-letter:capitalize xl:py-3 ${hasValue ? "" : "text-primary/30"}`,
+                          children: selected?.label ?? selectProps.placeholder
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        react.Icon,
+                        {
+                          icon: "solar:alt-arrow-down-linear",
+                          className: `size-4 transition-transform motion-reduce:transition-none md:size-5 ${isOpen ? "rotate-180" : ""} ${hasValue ? "text-primary" : "text-primary/30"}`
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(inputs.InputIcon, { icon: icons?.right })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(inputs.InputError, { id: errorId, error }),
+        isOpen && popup && reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              ref: popupRef,
+              id: popupId,
+              role: "dialog",
+              "aria-label": label || text.tree,
+              className: `border-primary/10 bg-smoke-eerie fixed z-3 overflow-hidden rounded-lg border shadow-md ${optionsClassName}`,
+              style: getDropdownStyle(popup.rect, popup.placement, window.innerHeight),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  inputs.Input,
+                  {
+                    needRef: true,
+                    ref: searchRef,
+                    inputProps: {
+                      ...inputProps,
+                      value: search,
+                      onChange: handleSearch,
+                      onKeyDown: handleSearchKeyDown,
+                      placeholder: inputProps?.placeholder ?? text.searchPlaceholder,
+                      role: "combobox",
+                      "aria-label": inputProps?.["aria-label"] ?? text.search,
+                      "aria-expanded": true,
+                      "aria-controls": rows.length > 0 ? treeId : void 0,
+                      "aria-activedescendant": activeIndex === -1 ? void 0 : rowId(activeIndex),
+                      "aria-autocomplete": "list",
+                      autoComplete: "off",
+                      className: `py-2! ${inputProps?.className ?? ""}`
+                    },
+                    icons: {
+                      right: search ? {
+                        icon: "lucide:x",
+                        label: text.clearSearch,
+                        className: "size-4 text-primary",
+                        onClick: clearSearch
+                      } : { icon: "solar:magnifer-linear", className: "size-4 text-primary opacity-30" }
+                    },
+                    containerClassName: "p-2 border-b border-b-primary/20",
+                    className: "bg-silver-jet/8!"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { role: "status", className: "sr-only", children: isSearching && rows.length > 0 ? text.results(rows.length) : "" }),
+                rows.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "ul",
+                  {
+                    ref: listRef,
+                    id: treeId,
+                    role: "tree",
+                    "aria-label": label || text.tree,
+                    onMouseDown: (event) => {
+                      event.preventDefault();
+                    },
+                    className: "relative flex max-h-60 flex-col gap-0.5 overflow-auto p-1",
+                    children: rows.map((row, index) => {
+                      const isSelected = !row.isBranch && row.node.value === selectProps.value;
+                      const isActive = index === activeIndex;
+                      const isDisabled = !!row.node.disabled;
+                      return /* @__PURE__ */ jsxRuntime.jsxs(
+                        "li",
+                        {
+                          id: rowId(index),
+                          ref: isActive ? activeRowRef : null,
+                          role: "treeitem",
+                          "aria-level": row.level,
+                          "aria-posinset": row.position,
+                          "aria-setsize": row.size,
+                          "aria-expanded": row.isBranch ? row.isExpanded : void 0,
+                          "aria-selected": isSelected,
+                          "aria-disabled": isDisabled ? true : void 0,
+                          style: { paddingLeft: `${String(8 + (row.level - 1) * 12)}px` },
+                          className: `text-tertiary flex items-center gap-2 rounded-sm py-1.5 pr-2 text-[13px] ${isDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"} ${isActive ? "bg-primary/5" : ""} ${isSelected ? "bg-primary/8" : ""}`,
+                          onMouseMove: () => {
+                            if (!isDisabled && !isActive) setActiveValue(row.node.value);
+                          },
+                          onClick: () => {
+                            activate(row);
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "span",
+                              {
+                                "aria-hidden": "true",
+                                className: "flex size-5 shrink-0 items-center justify-center",
+                                children: row.isBranch && /* @__PURE__ */ jsxRuntime.jsx(
+                                  react.Icon,
+                                  {
+                                    icon: row.isExpanded ? "solar:alt-arrow-down-linear" : "solar:alt-arrow-right-linear",
+                                    className: "size-4"
+                                  }
+                                )
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "span",
+                              {
+                                "aria-hidden": "true",
+                                className: "flex size-5 shrink-0 items-center justify-center",
+                                children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  react.Icon,
+                                  {
+                                    icon: row.isBranch ? row.isExpanded ? "solar:folder-open-linear" : "solar:folder-linear" : "solar:file-linear",
+                                    className: "size-4"
+                                  }
+                                )
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-left text-[13px] first-letter:capitalize", children: row.node.label }),
+                            isSelected && /* @__PURE__ */ jsxRuntime.jsx(
+                              "span",
+                              {
+                                "aria-hidden": "true",
+                                className: "flex size-5 shrink-0 items-center justify-center",
+                                children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  react.Icon,
+                                  {
+                                    icon: "solar:unread-linear",
+                                    className: "text-primary size-4 md:size-5"
+                                  }
+                                )
+                              }
+                            )
+                          ]
+                        },
+                        String(row.node.value)
+                      );
+                    })
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  layout.ApiStatus,
+                  {
+                    status: "empty",
+                    title: text.noResultsTitle,
+                    description: text.noResultsDescription,
+                    className: "min-h-30!"
+                  }
+                )
+              ]
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}, "HierarchySelect");
+
+exports.HierarchySelect = HierarchySelect;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map