@mercurjs/vendor 2.1.2 → 2.2.0-canary.1

package/dist/chunk-7SLWXX6L.js

@@ -0,0 +1,811 @@
+import {
+  useDebouncedSearch
+} from "./chunk-OVPAOBZB.js";
+import {
+  TextSkeleton
+} from "./chunk-INNFZYX2.js";
+import {
+  useProductCategories
+} from "./chunk-RZLN2Q6G.js";
+
+// src/pages/products/common/components/category-combobox/single-category-combobox.tsx
+import {
+  ArrowUturnLeft,
+  EllipseMiniSolid,
+  TriangleRightMini,
+  TrianglesMini
+} from "@medusajs/icons";
+import { Divider, Text, clx } from "@medusajs/ui";
+import { Popover as RadixPopover } from "radix-ui";
+import {
+  Fragment,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SingleCategoryCombobox = forwardRef(({ value, onChange, className, ...props }, ref) => {
+  const innerRef = useRef(null);
+  useImperativeHandle(
+    ref,
+    () => innerRef.current,
+    []
+  );
+  const [open, setOpen] = useState(false);
+  const { i18n, t } = useTranslation();
+  const [level, setLevel] = useState([]);
+  const { searchValue, onSearchValueChange, query } = useDebouncedSearch();
+  const { product_categories, isPending, isError, error } = useProductCategories(
+    {
+      q: query,
+      parent_category_id: !searchValue ? getParentId(level) : void 0,
+      include_descendants_tree: !searchValue ? true : false
+    },
+    {
+      enabled: open
+    }
+  );
+  const { product_categories: selectedCategories } = useProductCategories(
+    { id: value ? [value] : [] },
+    { enabled: !!value }
+  );
+  const selectedLabel = selectedCategories?.[0]?.name ?? null;
+  const [showLoading, setShowLoading] = useState(false);
+  useEffect(() => {
+    let timeoutId;
+    if (isPending) {
+      setShowLoading(true);
+    } else {
+      timeoutId = setTimeout(() => {
+        setShowLoading(false);
+      }, 150);
+    }
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [isPending]);
+  useEffect(() => {
+    if (searchValue) {
+      setLevel([]);
+    }
+  }, [searchValue]);
+  function handleLevelUp(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setLevel(level.slice(0, level.length - 1));
+    innerRef.current?.focus();
+  }
+  function handleLevelDown(option) {
+    return (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setLevel([...level, { id: option.value, label: option.label }]);
+      innerRef.current?.focus();
+    };
+  }
+  const handleSelect = useCallback(
+    (option) => {
+      return (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (value === option.value) {
+          onChange(null);
+        } else {
+          onChange(option.value);
+          handleOpenChange(false);
+        }
+        innerRef.current?.focus();
+      };
+    },
+    [value, onChange]
+  );
+  function handleOpenChange(open2) {
+    if (!open2) {
+      onSearchValueChange("");
+      setLevel([]);
+    }
+    if (open2) {
+      requestAnimationFrame(() => {
+        innerRef.current?.focus();
+      });
+    }
+    setOpen(open2);
+  }
+  const options = getOptions(product_categories || []);
+  const hasValue = !!value;
+  const hideInput = hasValue && !open;
+  const showLevelUp = !searchValue && level.length > 0;
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (!open) {
+        return;
+      }
+      const optionsLength = showLevelUp ? options.length + 1 : options.length;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setFocusedIndex((prev) => {
+          const nextIndex = prev < optionsLength - 1 ? prev + 1 : prev;
+          return nextIndex;
+        });
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setFocusedIndex((prev) => {
+          return prev > 0 ? prev - 1 : prev;
+        });
+      } else if (e.key === "ArrowRight") {
+        const index = showLevelUp ? focusedIndex - 1 : focusedIndex;
+        const hasChildren = options[index]?.has_children;
+        if (!hasChildren || !!searchValue) {
+          return;
+        }
+        e.preventDefault();
+        setLevel([
+          ...level,
+          {
+            id: options[index].value,
+            label: options[index].label
+          }
+        ]);
+        setFocusedIndex(0);
+      } else if (e.key === "Enter" && focusedIndex !== -1) {
+        e.preventDefault();
+        if (showLevelUp && focusedIndex === 0) {
+          setLevel(level.slice(0, level.length - 1));
+          setFocusedIndex(0);
+          return;
+        }
+        const index = showLevelUp ? focusedIndex - 1 : focusedIndex;
+        handleSelect(options[index])(e);
+      }
+    },
+    [open, focusedIndex, options, level, handleSelect, searchValue, showLevelUp]
+  );
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleKeyDown]);
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs(RadixPopover.Root, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx(
+      RadixPopover.Anchor,
+      {
+        asChild: true,
+        onClick: () => {
+          if (!open) {
+            handleOpenChange(true);
+          }
+        },
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-anchor": true,
+            className: clx(
+              "relative flex cursor-pointer items-center gap-x-2 overflow-hidden",
+              "h-8 w-full rounded-md",
+              "bg-ui-bg-field transition-fg shadow-borders-base",
+              "has-[input:focus]:shadow-borders-interactive-with-active",
+              "has-[:invalid]:shadow-borders-error has-[[aria-invalid=true]]:shadow-borders-error",
+              "has-[:disabled]:bg-ui-bg-disabled has-[:disabled]:text-ui-fg-disabled has-[:disabled]:cursor-not-allowed",
+              {
+                "shadow-borders-interactive-with-active": open
+              },
+              className
+            ),
+            children: [
+              hideInput && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-y-0 start-2 flex size-full items-center overflow-hidden", children: /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", className: "truncate", children: selectedLabel }) }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: innerRef,
+                  value: searchValue,
+                  onChange: (e) => {
+                    onSearchValueChange(e.target.value);
+                  },
+                  className: clx(
+                    "txt-compact-small size-full cursor-pointer appearance-none bg-transparent ps-2 pe-8 outline-none",
+                    "hover:bg-ui-bg-field-hover",
+                    "focus:cursor-text",
+                    "placeholder:text-ui-fg-muted",
+                    {
+                      "opacity-0": hideInput
+                    }
+                  ),
+                  ...props
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleOpenChange(true),
+                  className: "text-ui-fg-muted transition-fg hover:bg-ui-bg-field-hover absolute end-0 flex size-8 items-center justify-center rounded-r outline-none",
+                  children: /* @__PURE__ */ jsx(TrianglesMini, { className: "text-ui-fg-muted" })
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      RadixPopover.Content,
+      {
+        sideOffset: 4,
+        role: "listbox",
+        className: clx(
+          "shadow-elevation-flyout bg-ui-bg-base -start-2 z-50 w-[var(--radix-popper-anchor-width)] rounded-[8px]",
+          "max-h-[200px] overflow-y-auto",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=start]:slide-in-from-end-2 data-[side=end]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2"
+        ),
+        onInteractOutside: (e) => {
+          e.preventDefault();
+          const target = e.target;
+          if (target.closest("[data-anchor]")) {
+            return;
+          }
+          handleOpenChange(false);
+        },
+        children: [
+          showLevelUp && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "p-1", children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                "data-active": focusedIndex === 0,
+                role: "button",
+                className: clx(
+                  "transition-fg grid w-full appearance-none grid-cols-[20px_1fr] items-center justify-center gap-2 rounded-md px-2 py-1.5 text-start outline-none",
+                  "data-[active=true]:bg-ui-bg-field-hover"
+                ),
+                type: "button",
+                onClick: handleLevelUp,
+                onMouseEnter: () => setFocusedIndex(0),
+                onMouseLeave: () => setFocusedIndex(-1),
+                tabIndex: -1,
+                children: [
+                  /* @__PURE__ */ jsx(ArrowUturnLeft, { className: "text-ui-fg-muted" }),
+                  /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: getParentLabel(level) })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Divider, {})
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "p-1", children: [
+            options.length > 0 && !showLoading && options.map((option, index) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: clx(
+                  "transition-fg bg-ui-bg-base grid cursor-pointer grid-cols-1 items-center gap-2 overflow-hidden",
+                  {
+                    "grid-cols-[1fr_32px]": option.has_children && !searchValue
+                  }
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      "data-active": showLevelUp ? focusedIndex === index + 1 : focusedIndex === index,
+                      type: "button",
+                      role: "option",
+                      className: clx(
+                        "grid h-full w-full appearance-none grid-cols-[20px_1fr] items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-start outline-none",
+                        "data-[active=true]:bg-ui-bg-field-hover"
+                      ),
+                      onClick: handleSelect(option),
+                      onMouseEnter: () => setFocusedIndex(showLevelUp ? index + 1 : index),
+                      onMouseLeave: () => setFocusedIndex(-1),
+                      tabIndex: -1,
+                      children: [
+                        /* @__PURE__ */ jsx("div", { className: "flex size-5 items-center justify-center", children: value === option.value && /* @__PURE__ */ jsx(EllipseMiniSolid, {}) }),
+                        /* @__PURE__ */ jsx(
+                          Text,
+                          {
+                            as: "span",
+                            size: "small",
+                            leading: "compact",
+                            className: "w-full truncate",
+                            children: option.label
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  option.has_children && !searchValue && /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      className: clx(
+                        "text-ui-fg-muted flex size-8 appearance-none items-center justify-center rounded-md outline-none",
+                        "hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed"
+                      ),
+                      type: "button",
+                      onClick: handleLevelDown(option),
+                      tabIndex: -1,
+                      children: /* @__PURE__ */ jsx(TriangleRightMini, { className: "rtl:rotate-180" })
+                    }
+                  )
+                ]
+              },
+              option.value
+            )),
+            showLoading && Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "grid grid-cols-[20px_1fr_20px] gap-2 px-2 py-1.5",
+                children: [
+                  /* @__PURE__ */ jsx("div", {}),
+                  /* @__PURE__ */ jsx(TextSkeleton, { size: "small", leading: "compact" }),
+                  /* @__PURE__ */ jsx("div", {})
+                ]
+              },
+              index
+            )),
+            options.length === 0 && !showLoading && /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5", children: /* @__PURE__ */ jsx(Text, { size: "small", leading: "compact", children: query ? /* @__PURE__ */ jsx(
+              Trans,
+              {
+                i18n,
+                i18nKey: "general.noResultsTitle",
+                tOptions: {
+                  query
+                },
+                components: [/* @__PURE__ */ jsx("span", { className: "font-medium" }, "query")]
+              }
+            ) : t("general.noResultsTitle") }) })
+          ] })
+        ]
+      }
+    )
+  ] });
+});
+SingleCategoryCombobox.displayName = "SingleCategoryCombobox";
+function getParentId(level) {
+  if (!level.length) {
+    return "null";
+  }
+  return level[level.length - 1].id;
+}
+function getParentLabel(level) {
+  if (!level.length) {
+    return null;
+  }
+  return level[level.length - 1].label;
+}
+function getOptions(categories) {
+  return categories.map((cat) => {
+    return {
+      value: cat.id,
+      label: cat.name,
+      has_children: cat.category_children?.length > 0
+    };
+  });
+}
+
+// src/pages/products/common/components/category-combobox/category-combobox.tsx
+import {
+  ArrowUturnLeft as ArrowUturnLeft2,
+  EllipseMiniSolid as EllipseMiniSolid2,
+  TriangleRightMini as TriangleRightMini2,
+  TrianglesMini as TrianglesMini2,
+  XMarkMini
+} from "@medusajs/icons";
+import { Divider as Divider2, Text as Text2, clx as clx2 } from "@medusajs/ui";
+import { Popover as RadixPopover2 } from "radix-ui";
+import {
+  Fragment as Fragment2,
+  forwardRef as forwardRef2,
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useImperativeHandle as useImperativeHandle2,
+  useMemo,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { Trans as Trans2, useTranslation as useTranslation2 } from "react-i18next";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var TABLUAR_NUM_WIDTH = 8;
+var TAG_BASE_WIDTH = 28;
+var CategoryCombobox = forwardRef2(({ value, onChange, className, isSingleSelect: _isSingleSelect, allowClear: _allowClear, ...props }, ref) => {
+  const innerRef = useRef2(null);
+  useImperativeHandle2(
+    ref,
+    () => innerRef.current,
+    []
+  );
+  const [open, setOpen] = useState2(false);
+  const { i18n, t } = useTranslation2();
+  const [level, setLevel] = useState2([]);
+  const { searchValue, onSearchValueChange, query } = useDebouncedSearch();
+  const { product_categories, isPending, isError, error } = useProductCategories(
+    {
+      q: query,
+      parent_category_id: !searchValue ? getParentId2(level) : void 0,
+      include_descendants_tree: !searchValue
+    },
+    {
+      enabled: open
+    }
+  );
+  const [showLoading, setShowLoading] = useState2(false);
+  useEffect2(() => {
+    let timeoutId;
+    if (isPending) {
+      setShowLoading(true);
+    } else {
+      timeoutId = setTimeout(() => {
+        setShowLoading(false);
+      }, 150);
+    }
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [isPending]);
+  useEffect2(() => {
+    if (searchValue) {
+      setLevel([]);
+    }
+  }, [searchValue]);
+  function handleLevelUp(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setLevel(level.slice(0, level.length - 1));
+    innerRef.current?.focus();
+  }
+  function handleLevelDown(option) {
+    return (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setLevel([...level, { id: option.value, label: option.label }]);
+      innerRef.current?.focus();
+    };
+  }
+  const handleSelect = useCallback2(
+    (option) => {
+      return (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isSelected(value, option.value)) {
+          onChange(value.filter((v) => v !== option.value));
+        } else {
+          onChange([...value, option.value]);
+        }
+        innerRef.current?.focus();
+      };
+    },
+    [value, onChange]
+  );
+  function handleOpenChange(open2) {
+    if (!open2) {
+      onSearchValueChange("");
+      setLevel([]);
+    }
+    if (open2) {
+      requestAnimationFrame(() => {
+        innerRef.current?.focus();
+      });
+    }
+    setOpen(open2);
+  }
+  const options = getOptions2(product_categories || []);
+  const showTag = value.length > 0;
+  const showSelected = !open && value.length > 0;
+  const tagWidth = useMemo(() => {
+    const count = value.length;
+    const digits = count.toString().length;
+    return TAG_BASE_WIDTH + digits * TABLUAR_NUM_WIDTH;
+  }, [value]);
+  const showLevelUp = !searchValue && level.length > 0;
+  const [focusedIndex, setFocusedIndex] = useState2(-1);
+  const handleKeyDown = useCallback2(
+    (e) => {
+      if (!open) {
+        return;
+      }
+      const optionsLength = showLevelUp ? options.length + 1 : options.length;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setFocusedIndex((prev) => {
+          const nextIndex = prev < optionsLength - 1 ? prev + 1 : prev;
+          return nextIndex;
+        });
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setFocusedIndex((prev) => {
+          return prev > 0 ? prev - 1 : prev;
+        });
+      } else if (e.key === "ArrowRight") {
+        const index = showLevelUp ? focusedIndex - 1 : focusedIndex;
+        const hasChildren = options[index]?.has_children;
+        if (!hasChildren || !!searchValue) {
+          return;
+        }
+        e.preventDefault();
+        setLevel([
+          ...level,
+          {
+            id: options[index].value,
+            label: options[index].label
+          }
+        ]);
+        setFocusedIndex(0);
+      } else if (e.key === "Enter" && focusedIndex !== -1) {
+        e.preventDefault();
+        if (showLevelUp && focusedIndex === 0) {
+          setLevel(level.slice(0, level.length - 1));
+          setFocusedIndex(0);
+          return;
+        }
+        const index = showLevelUp ? focusedIndex - 1 : focusedIndex;
+        handleSelect(options[index])(e);
+      }
+    },
+    [
+      open,
+      focusedIndex,
+      options,
+      level,
+      handleSelect,
+      searchValue,
+      showLevelUp
+    ]
+  );
+  useEffect2(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleKeyDown]);
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs2(RadixPopover2.Root, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx2(
+      RadixPopover2.Anchor,
+      {
+        asChild: true,
+        onClick: () => {
+          if (!open) {
+            handleOpenChange(true);
+          }
+        },
+        children: /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            "data-anchor": true,
+            className: clx2(
+              "relative flex cursor-pointer items-center gap-x-2 overflow-hidden",
+              "h-8 w-full rounded-md",
+              "bg-ui-bg-field transition-fg shadow-borders-base",
+              "has-[input:focus]:shadow-borders-interactive-with-active",
+              "has-[:invalid]:shadow-borders-error has-[[aria-invalid=true]]:shadow-borders-error",
+              "has-[:disabled]:bg-ui-bg-disabled has-[:disabled]:text-ui-fg-disabled has-[:disabled]:cursor-not-allowed",
+              {
+                // Fake the focus state as long as the popover is open,
+                // this prevents the styling from flickering when navigating
+                // between levels.
+                "shadow-borders-interactive-with-active": open
+              },
+              className
+            ),
+            style: {
+              "--tag-width": `${tagWidth}px`
+            },
+            children: [
+              showTag && /* @__PURE__ */ jsxs2(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.preventDefault();
+                    onChange([]);
+                  },
+                  className: "bg-ui-bg-base hover:bg-ui-bg-base-hover txt-compact-small-plus text-ui-fg-subtle focus-within:border-ui-fg-interactive transition-fg absolute start-0.5 top-0.5 flex h-[28px] items-center rounded-[4px] border py-[3px] ps-1.5 pe-1 outline-none",
+                  children: [
+                    /* @__PURE__ */ jsx2("span", { className: "tabular-nums", children: value.length }),
+                    /* @__PURE__ */ jsx2(XMarkMini, { className: "text-ui-fg-muted" })
+                  ]
+                }
+              ),
+              showSelected && /* @__PURE__ */ jsx2("div", { className: "pointer-events-none absolute inset-y-0 start-[calc(var(--tag-width)+8px)] flex size-full items-center", children: /* @__PURE__ */ jsx2(Text2, { size: "small", leading: "compact", children: t("general.selected") }) }),
+              /* @__PURE__ */ jsx2(
+                "input",
+                {
+                  ref: innerRef,
+                  value: searchValue,
+                  onChange: (e) => {
+                    onSearchValueChange(e.target.value);
+                  },
+                  className: clx2(
+                    "txt-compact-small size-full cursor-pointer appearance-none bg-transparent pe-8 outline-none",
+                    "hover:bg-ui-bg-field-hover",
+                    "focus:cursor-text",
+                    "placeholder:text-ui-fg-muted",
+                    {
+                      "ps-2": !showTag,
+                      "ps-[calc(var(--tag-width)+8px)]": showTag
+                    }
+                  ),
+                  ...props
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => handleOpenChange(true),
+                  className: "text-ui-fg-muted transition-fg hover:bg-ui-bg-field-hover absolute end-0 flex size-8 items-center justify-center rounded-r outline-none",
+                  children: /* @__PURE__ */ jsx2(TrianglesMini2, { className: "text-ui-fg-muted" })
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs2(
+      RadixPopover2.Content,
+      {
+        sideOffset: 4,
+        role: "listbox",
+        className: clx2(
+          "shadow-elevation-flyout bg-ui-bg-base -start-2 z-50 w-[var(--radix-popper-anchor-width)] rounded-[8px]",
+          "max-h-[200px] overflow-y-auto",
+          "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=start]:slide-in-from-end-2 data-[side=end]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2"
+        ),
+        onInteractOutside: (e) => {
+          e.preventDefault();
+          const target = e.target;
+          if (target.closest("[data-anchor]")) {
+            return;
+          }
+          handleOpenChange(false);
+        },
+        children: [
+          showLevelUp && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+            /* @__PURE__ */ jsx2("div", { className: "p-1", children: /* @__PURE__ */ jsxs2(
+              "button",
+              {
+                "data-active": focusedIndex === 0,
+                className: clx2(
+                  "transition-fg grid w-full appearance-none grid-cols-[20px_1fr] items-center justify-center gap-2 rounded-md px-2 py-1.5 text-start outline-none",
+                  "data-[active=true]:bg-ui-bg-field-hover"
+                ),
+                type: "button",
+                onClick: handleLevelUp,
+                onMouseEnter: () => setFocusedIndex(0),
+                onMouseLeave: () => setFocusedIndex(-1),
+                tabIndex: -1,
+                children: [
+                  /* @__PURE__ */ jsx2(ArrowUturnLeft2, { className: "text-ui-fg-muted" }),
+                  /* @__PURE__ */ jsx2(Text2, { size: "small", leading: "compact", children: getParentLabel2(level) })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx2(Divider2, {})
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "p-1", children: [
+            options.length > 0 && !showLoading && options.map((option, index) => /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                className: clx2(
+                  "transition-fg bg-ui-bg-base grid cursor-pointer grid-cols-1 items-center gap-2 overflow-hidden",
+                  {
+                    "grid-cols-[1fr_32px]": option.has_children && !searchValue
+                  }
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs2(
+                    "button",
+                    {
+                      "data-active": showLevelUp ? focusedIndex === index + 1 : focusedIndex === index,
+                      type: "button",
+                      role: "option",
+                      "aria-selected": false,
+                      className: clx2(
+                        "grid h-full w-full appearance-none grid-cols-[20px_1fr] items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-start outline-none",
+                        "data-[active=true]:bg-ui-bg-field-hover"
+                      ),
+                      onClick: handleSelect(option),
+                      onMouseEnter: () => setFocusedIndex(showLevelUp ? index + 1 : index),
+                      onMouseLeave: () => setFocusedIndex(-1),
+                      tabIndex: -1,
+                      children: [
+                        /* @__PURE__ */ jsx2("div", { className: "flex size-5 items-center justify-center", children: isSelected(value, option.value) && /* @__PURE__ */ jsx2(EllipseMiniSolid2, {}) }),
+                        /* @__PURE__ */ jsx2(
+                          Text2,
+                          {
+                            as: "span",
+                            size: "small",
+                            leading: "compact",
+                            className: "w-full truncate",
+                            children: option.label
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  option.has_children && !searchValue && /* @__PURE__ */ jsx2(
+                    "button",
+                    {
+                      className: clx2(
+                        "text-ui-fg-muted flex size-8 appearance-none items-center justify-center rounded-md outline-none",
+                        "hover:bg-ui-bg-base-hover active:bg-ui-bg-base-pressed"
+                      ),
+                      type: "button",
+                      onClick: handleLevelDown(option),
+                      tabIndex: -1,
+                      children: /* @__PURE__ */ jsx2(TriangleRightMini2, { className: "rtl:rotate-180" })
+                    }
+                  )
+                ]
+              },
+              option.value
+            )),
+            showLoading && Array.from({ length: 5 }).map((_, index) => /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                className: "grid grid-cols-[20px_1fr_20px] gap-2 px-2 py-1.5",
+                children: [
+                  /* @__PURE__ */ jsx2("div", {}),
+                  /* @__PURE__ */ jsx2(TextSkeleton, { size: "small", leading: "compact" }),
+                  /* @__PURE__ */ jsx2("div", {})
+                ]
+              },
+              index
+            )),
+            options.length === 0 && !showLoading && /* @__PURE__ */ jsx2("div", { className: "px-2 py-1.5", children: /* @__PURE__ */ jsx2(Text2, { size: "small", leading: "compact", children: query ? /* @__PURE__ */ jsx2(
+              Trans2,
+              {
+                i18n,
+                i18nKey: "general.noResultsTitle",
+                tOptions: {
+                  query
+                },
+                components: [/* @__PURE__ */ jsx2("span", { className: "font-medium" }, "query")]
+              }
+            ) : t("general.noResultsTitle") }) })
+          ] })
+        ]
+      }
+    )
+  ] });
+});
+CategoryCombobox.displayName = "CategoryCombobox";
+function getParentId2(level) {
+  if (!level.length) {
+    return "null";
+  }
+  return level[level.length - 1].id;
+}
+function getParentLabel2(level) {
+  if (!level.length) {
+    return null;
+  }
+  return level[level.length - 1].label;
+}
+function getOptions2(categories) {
+  return categories.map((cat) => {
+    return {
+      value: cat.id,
+      label: cat.name,
+      has_children: cat.category_children?.length > 0
+    };
+  });
+}
+function isSelected(values, value) {
+  return values.includes(value);
+}
+
+export {
+  SingleCategoryCombobox
+};