@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-combobox.js

@@ -0,0 +1,609 @@
+import {
+  cn,
+  cva,
+  devWarn,
+  generateId
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-combobox/dist/index.js
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+var defaultFilter = (option, query) => {
+  if (!query) return true;
+  return option.label.toLowerCase().includes(query.toLowerCase());
+};
+var comboboxTriggerVariants = cva({
+  base: "flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+  variants: {
+    size: {
+      sm: "h-8 text-xs",
+      default: "h-9 text-sm",
+      lg: "h-10 text-base"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var comboboxContentVariants = cva({
+  base: "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95"
+});
+var comboboxInputVariants = cva({
+  base: "flex h-9 w-full rounded-md border-0 border-b bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+});
+var comboboxListVariants = cva({
+  base: "max-h-[300px] overflow-y-auto overflow-x-hidden p-1"
+});
+var comboboxItemVariants = cva({
+  base: "relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  variants: {
+    selected: {
+      true: "bg-accent/50 font-medium",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    selected: "false"
+  }
+});
+var comboboxEmptyVariants = cva({
+  base: "py-6 text-center text-sm text-muted-foreground"
+});
+var ComboboxContext = React.createContext(null);
+function useComboboxContext() {
+  const ctx = React.useContext(ComboboxContext);
+  if (!ctx) {
+    devWarn(
+      "react-combobox/context-outside-provider",
+      "Combobox compound components (ComboboxInput/ComboboxContent/ComboboxItem/etc.) must be rendered inside a <Combobox>. The missing ComboboxContext makes this throw."
+    );
+    throw new Error("Combobox compound components must be used within <Combobox>");
+  }
+  return ctx;
+}
+function Combobox({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  options,
+  filter = defaultFilter,
+  disabled = false,
+  children
+}) {
+  const isValueControlled = valueProp !== void 0;
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const value = isValueControlled ? valueProp : internalValue;
+  const isOpenControlled = openProp !== void 0;
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const open = isOpenControlled ? openProp : internalOpen;
+  const [query, setQuery] = React.useState("");
+  const [highlightedValue, setHighlightedValue] = React.useState(void 0);
+  const [registry, setRegistry] = React.useState([]);
+  const [visibleCount, setVisibleCount] = React.useState(0);
+  const idBaseRef = React.useRef(generateId("combobox"));
+  const idBase = idBaseRef.current;
+  const triggerRef = React.useRef(null);
+  const contentRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const handleValueChange = React.useCallback(
+    (next) => {
+      if (!isValueControlled) setInternalValue(next);
+      onValueChange?.(next);
+    },
+    [isValueControlled, onValueChange]
+  );
+  const handleOpenChange = React.useCallback(
+    (next) => {
+      if (disabled && next) return;
+      if (!isOpenControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+      if (!next) {
+        setQuery("");
+        setHighlightedValue(void 0);
+      }
+    },
+    [disabled, isOpenControlled, onOpenChange]
+  );
+  const registerItem = React.useCallback((item) => {
+    setRegistry((prev) => {
+      const existing = prev.findIndex((i) => i.id === item.id);
+      if (existing >= 0) {
+        const next = prev.slice();
+        next[existing] = item;
+        return next;
+      }
+      return [...prev, item];
+    });
+  }, []);
+  const unregisterItem = React.useCallback((id) => {
+    setRegistry((prev) => prev.filter((i) => i.id !== id));
+  }, []);
+  const itemMatchesQuery = React.useCallback(
+    (label, itemValue, itemDisabled) => {
+      return filter({ value: itemValue, label, disabled: itemDisabled }, query);
+    },
+    [filter, query]
+  );
+  const matches = React.useCallback(
+    (option) => {
+      return filter(
+        { value: option.value, label: option.label, disabled: option.disabled },
+        query
+      );
+    },
+    [filter, query]
+  );
+  const selectedLabel = React.useMemo(() => {
+    if (value === void 0) return void 0;
+    if (options) {
+      const opt = options.find((o) => o.value === value);
+      if (opt) return opt.label;
+    }
+    const reg = registry.find((r) => r.value === value);
+    return reg?.label;
+  }, [value, options, registry]);
+  const ids = React.useMemo(
+    () => ({
+      trigger: `${idBase}-trigger`,
+      content: `${idBase}-content`,
+      list: `${idBase}-list`,
+      input: `${idBase}-input`,
+      item: (v) => `${idBase}-item-${v}`
+    }),
+    [idBase]
+  );
+  React.useEffect(() => {
+    if (!open) return;
+    if (typeof document === "undefined") return;
+    const handler = (e) => {
+      const target = e.target;
+      if (!target) return;
+      if (contentRef.current?.contains(target)) return;
+      if (triggerRef.current?.contains(target)) return;
+      handleOpenChange(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, handleOpenChange]);
+  React.useEffect(() => {
+    if (!open) return;
+    if (highlightedValue !== void 0) return;
+    const candidates = registry.filter(
+      (r) => !r.disabled && itemMatchesQuery(r.label, r.value, r.disabled)
+    );
+    if (candidates.length === 0) return;
+    const selected = candidates.find((r) => r.value === value);
+    setHighlightedValue(selected ? selected.value : candidates[0].value);
+  }, [open, highlightedValue, registry, value, itemMatchesQuery]);
+  React.useEffect(() => {
+    if (!open) return;
+    const candidates = registry.filter(
+      (r) => !r.disabled && itemMatchesQuery(r.label, r.value, r.disabled)
+    );
+    if (candidates.length === 0) {
+      setHighlightedValue(void 0);
+      return;
+    }
+    if (highlightedValue === void 0 || !candidates.some((c) => c.value === highlightedValue)) {
+      setHighlightedValue(candidates[0].value);
+    }
+  }, [query, open, registry, itemMatchesQuery, highlightedValue]);
+  const ctx = React.useMemo(
+    () => ({
+      value,
+      onValueChange: handleValueChange,
+      open,
+      setOpen: handleOpenChange,
+      query,
+      setQuery,
+      highlightedValue,
+      setHighlightedValue,
+      registerItem,
+      unregisterItem,
+      matches,
+      itemMatchesQuery,
+      visibleCount,
+      setVisibleCount,
+      ids,
+      disabled,
+      options: options ?? [],
+      hasOptions: !!options,
+      filter,
+      selectedLabel,
+      triggerRef,
+      contentRef,
+      inputRef
+    }),
+    [
+      value,
+      handleValueChange,
+      open,
+      handleOpenChange,
+      query,
+      highlightedValue,
+      registerItem,
+      unregisterItem,
+      matches,
+      itemMatchesQuery,
+      visibleCount,
+      ids,
+      disabled,
+      options,
+      filter,
+      selectedLabel
+    ]
+  );
+  return /* @__PURE__ */ jsx(ComboboxContext.Provider, { value: ctx, children });
+}
+var ComboboxTrigger = React.forwardRef(function ComboboxTrigger2({ className, children, size = "default", placeholder = "Select\u2026", ...props }, forwardedRef) {
+  const ctx = useComboboxContext();
+  const { open, setOpen, disabled, ids, selectedLabel, triggerRef } = ctx;
+  const ref = React.useCallback(
+    (node) => {
+      triggerRef.current = node;
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [forwardedRef, triggerRef]
+  );
+  const handleClick = (e) => {
+    if (disabled) return;
+    setOpen(!open);
+    props.onClick?.(e);
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      setOpen(!open);
+    } else if (e.key === "Escape") {
+      if (open) {
+        e.preventDefault();
+        setOpen(false);
+      }
+    } else if ((e.key === "ArrowDown" || e.key === "ArrowUp") && !open) {
+      e.preventDefault();
+      setOpen(true);
+    }
+    props.onKeyDown?.(e);
+  };
+  const label = children ?? selectedLabel ?? placeholder;
+  const isPlaceholder = !children && selectedLabel === void 0;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...props,
+      ref,
+      type: "button",
+      id: ids.trigger,
+      role: "combobox",
+      "aria-expanded": open,
+      "aria-controls": ids.content,
+      "aria-haspopup": "listbox",
+      "aria-disabled": disabled || void 0,
+      "data-state": open ? "open" : "closed",
+      "data-placeholder": isPlaceholder ? "" : void 0,
+      disabled,
+      className: cn(comboboxTriggerVariants({ size }), className),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn("truncate", isPlaceholder && "text-muted-foreground"), children: label }),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "h-4 w-4 opacity-50 shrink-0",
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+          }
+        )
+      ]
+    }
+  );
+});
+var ComboboxContent = React.forwardRef(
+  function ComboboxContent2({ className, children, portal = true, ...props }, forwardedRef) {
+    const ctx = useComboboxContext();
+    const { open, ids, contentRef, hasOptions, options, inputRef } = ctx;
+    const ref = React.useCallback(
+      (node) => {
+        contentRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef, contentRef]
+    );
+    React.useEffect(() => {
+      if (open) {
+        const t = setTimeout(() => inputRef.current?.focus(), 0);
+        return () => clearTimeout(t);
+      }
+    }, [open, inputRef]);
+    if (!open) return null;
+    const content = /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...props,
+        ref,
+        id: ids.content,
+        "data-state": open ? "open" : "closed",
+        className: cn(comboboxContentVariants(), className),
+        children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(ComboboxInput, {}),
+          /* @__PURE__ */ jsx(ComboboxList, { children: hasOptions ? options.map((opt) => /* @__PURE__ */ jsx(
+            ComboboxItem,
+            {
+              value: opt.value,
+              disabled: opt.disabled,
+              children: opt.label
+            },
+            opt.value
+          )) : null }),
+          /* @__PURE__ */ jsx(ComboboxEmpty, { children: "No results." })
+        ] })
+      }
+    );
+    if (portal && typeof document !== "undefined") {
+      return createPortal(content, document.body);
+    }
+    return content;
+  }
+);
+var ComboboxInput = React.forwardRef(
+  function ComboboxInput2({ className, onChange, onKeyDown, placeholder = "Search\u2026", ...props }, forwardedRef) {
+    const ctx = useComboboxContext();
+    const {
+      query,
+      setQuery,
+      ids,
+      open,
+      setOpen,
+      highlightedValue,
+      setHighlightedValue,
+      onValueChange,
+      itemMatchesQuery,
+      inputRef,
+      triggerRef
+    } = ctx;
+    const ref = React.useCallback(
+      (node) => {
+        inputRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef, inputRef]
+    );
+    const handleChange = (e) => {
+      setQuery(e.target.value);
+      onChange?.(e);
+    };
+    const getCandidates = () => {
+      const root = ctx.contentRef.current;
+      if (!root) return [];
+      const els = Array.from(
+        root.querySelectorAll(
+          '[role="option"]:not([data-disabled]):not([data-hidden])'
+        )
+      );
+      return els.map((el) => ({
+        value: el.getAttribute("data-value") ?? "",
+        label: el.textContent ?? ""
+      }));
+    };
+    const moveHighlight = (delta) => {
+      const candidates = getCandidates();
+      if (candidates.length === 0) {
+        setHighlightedValue(void 0);
+        return;
+      }
+      const idx = candidates.findIndex((c) => c.value === highlightedValue);
+      let next;
+      if (idx === -1) {
+        next = delta > 0 ? 0 : candidates.length - 1;
+      } else {
+        next = (idx + delta + candidates.length) % candidates.length;
+      }
+      setHighlightedValue(candidates[next].value);
+    };
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        moveHighlight(1);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        moveHighlight(-1);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        const candidates = getCandidates();
+        if (candidates.length) setHighlightedValue(candidates[0].value);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        const candidates = getCandidates();
+        if (candidates.length) setHighlightedValue(candidates[candidates.length - 1].value);
+      } else if (e.key === "Enter") {
+        if (highlightedValue !== void 0) {
+          e.preventDefault();
+          onValueChange(highlightedValue);
+          setOpen(false);
+          setTimeout(() => triggerRef.current?.focus(), 0);
+        }
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setOpen(false);
+        setTimeout(() => triggerRef.current?.focus(), 0);
+      } else if (e.key === "Tab") {
+        setOpen(false);
+      }
+      onKeyDown?.(e);
+    };
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ...props,
+        ref,
+        id: ids.input,
+        type: "text",
+        role: "combobox",
+        autoComplete: "off",
+        spellCheck: false,
+        "aria-autocomplete": "list",
+        "aria-expanded": open,
+        "aria-controls": ids.list,
+        "aria-activedescendant": highlightedValue ? ids.item(highlightedValue) : void 0,
+        value: query,
+        placeholder,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        className: cn(comboboxInputVariants(), className)
+      }
+    );
+  }
+);
+var ComboboxList = React.forwardRef(
+  function ComboboxList2({ className, children, ...props }, ref) {
+    const { ids } = useComboboxContext();
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...props,
+        ref,
+        id: ids.list,
+        role: "listbox",
+        className: cn(comboboxListVariants(), className),
+        children
+      }
+    );
+  }
+);
+var ComboboxItem = React.forwardRef(
+  function ComboboxItem2({ className, children, value: itemValue, disabled: itemDisabled = false, label, ...props }, ref) {
+    const ctx = useComboboxContext();
+    const {
+      value,
+      onValueChange,
+      setOpen,
+      highlightedValue,
+      setHighlightedValue,
+      registerItem,
+      unregisterItem,
+      itemMatchesQuery,
+      ids,
+      triggerRef
+    } = ctx;
+    const isSelected = value === itemValue;
+    const itemId = ids.item(itemValue);
+    const labelText = label ?? (typeof children === "string" ? children : itemValue);
+    React.useEffect(() => {
+      registerItem({ id: itemId, value: itemValue, disabled: itemDisabled, label: labelText });
+      return () => unregisterItem(itemId);
+    }, [itemId, itemValue, itemDisabled, labelText, registerItem, unregisterItem]);
+    const matches = itemMatchesQuery(labelText, itemValue, itemDisabled);
+    const isHighlighted = highlightedValue === itemValue && matches && !itemDisabled;
+    const handleClick = () => {
+      if (itemDisabled) return;
+      onValueChange(itemValue);
+      setOpen(false);
+      setTimeout(() => triggerRef.current?.focus(), 0);
+    };
+    const handlePointerMove = () => {
+      if (itemDisabled) return;
+      if (highlightedValue !== itemValue) setHighlightedValue(itemValue);
+    };
+    if (!matches) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref,
+          id: itemId,
+          "data-value": itemValue,
+          "data-hidden": "",
+          hidden: true,
+          "aria-hidden": "true"
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...props,
+        ref,
+        id: itemId,
+        role: "option",
+        "aria-selected": isSelected,
+        "aria-disabled": itemDisabled || void 0,
+        "data-value": itemValue,
+        "data-state": isSelected ? "checked" : void 0,
+        "data-highlighted": isHighlighted ? "" : void 0,
+        "data-disabled": itemDisabled ? "" : void 0,
+        className: cn(
+          comboboxItemVariants({ selected: isSelected ? "true" : "false" }),
+          className
+        ),
+        onClick: handleClick,
+        onPointerMove: handlePointerMove,
+        children
+      }
+    );
+  }
+);
+var ComboboxEmpty = React.forwardRef(
+  function ComboboxEmpty2({ className, children, ...props }, ref) {
+    const ctx = useComboboxContext();
+    const { contentRef, query, options, hasOptions, filter } = ctx;
+    const [hasVisible, setHasVisible] = React.useState(true);
+    React.useEffect(() => {
+      if (hasOptions) {
+        const visible = options.some(
+          (o) => filter({ value: o.value, label: o.label, disabled: o.disabled }, query)
+        );
+        setHasVisible(visible);
+        return;
+      }
+      const root = contentRef.current;
+      if (!root) {
+        setHasVisible(true);
+        return;
+      }
+      const els = root.querySelectorAll('[role="option"]:not([data-hidden])');
+      setHasVisible(els.length > 0);
+    });
+    if (hasVisible) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...props,
+        ref,
+        role: "presentation",
+        className: cn(comboboxEmptyVariants(), className),
+        children: children ?? "No results."
+      }
+    );
+  }
+);
+export {
+  Combobox,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxList,
+  ComboboxTrigger,
+  comboboxContentVariants,
+  comboboxEmptyVariants,
+  comboboxInputVariants,
+  comboboxItemVariants,
+  comboboxListVariants,
+  comboboxTriggerVariants
+};
+//# sourceMappingURL=react-combobox.js.map