@nexus-cross/design-system 1.0.13 → 1.1.0

package/dist/chunks/chunk-56ZOOQFE.mjs

@@ -0,0 +1,514 @@
+import { Spinner } from './chunk-BPUQ2CO2.mjs';
+import { cn } from './chunk-MCKOWMLS.mjs';
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var comboboxInputVariants = cva("nexus-combobox", {
+  variants: {
+    size: {
+      md: "nexus-combobox--md",
+      lg: "nexus-combobox--lg",
+      xl: "nexus-combobox--xl"
+    },
+    state: {
+      default: "nexus-combobox--default",
+      error: "nexus-combobox--error"
+    }
+  },
+  defaultVariants: { size: "md", state: "default" }
+});
+var ChevronDown = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4" })
+  }
+);
+var ClearIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    "aria-hidden": true,
+    children: /* @__PURE__ */ jsx("path", { d: "M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5" })
+  }
+);
+var CloseIcon = ({ className }) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className,
+    width: "12",
+    height: "12",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    "aria-hidden": true,
+    children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" })
+  }
+);
+function defaultFilter(option, query) {
+  if (!query) return true;
+  const label = typeof option.label === "string" ? option.label : typeof option.label === "number" ? String(option.label) : option.value;
+  return label.toLowerCase().includes(query.toLowerCase());
+}
+function useDebouncedCallback(callback, delay) {
+  const cbRef = React.useRef(callback);
+  React.useEffect(() => {
+    cbRef.current = callback;
+  }, [callback]);
+  const timer = React.useRef(null);
+  React.useEffect(() => {
+    return () => {
+      if (timer.current) clearTimeout(timer.current);
+    };
+  }, []);
+  return React.useCallback(
+    (...args) => {
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => cbRef.current?.(...args), delay);
+    },
+    [delay]
+  );
+}
+var Combobox = React.forwardRef(
+  function Combobox2(props, ref) {
+    const {
+      options,
+      onSearch,
+      searchDebounce = 250,
+      loading = false,
+      filter,
+      placeholder,
+      emptyMessage = "\uAC80\uC0C9 \uACB0\uACFC \uC5C6\uC74C",
+      loadingMessage = "\uAC80\uC0C9 \uC911\u2026",
+      size,
+      disabled,
+      error,
+      clearable = true,
+      autoOpenOnFocus = true,
+      label,
+      description,
+      className,
+      popoverClassName,
+      id,
+      multiple,
+      value: controlledValue,
+      defaultValue,
+      onValueChange
+    } = props;
+    const isMultiple = !!multiple;
+    const fallbackId = React.useRef(
+      `nexus-cmbx-${Math.random().toString(36).slice(2, 9)}`
+    );
+    const inputId = id || fallbackId.current;
+    const listboxId = `${inputId}-listbox`;
+    const inputRef = React.useRef(null);
+    const anchorRef = React.useRef(null);
+    const setInputRef = React.useCallback(
+      (node) => {
+        inputRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      [ref]
+    );
+    const isControlled = controlledValue !== void 0;
+    const initialInternal = React.useMemo(() => {
+      if (isMultiple) {
+        return Array.isArray(defaultValue) ? defaultValue : [];
+      }
+      return typeof defaultValue === "string" ? defaultValue : null;
+    }, [isMultiple, defaultValue]);
+    const [internalValue, setInternalValue] = React.useState(initialInternal);
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const selectedValues = React.useMemo(() => {
+      if (isMultiple) return Array.isArray(currentValue) ? currentValue : [];
+      return typeof currentValue === "string" ? [currentValue] : [];
+    }, [isMultiple, currentValue]);
+    const updateValue = React.useCallback(
+      (next) => {
+        if (!isControlled) setInternalValue(next);
+        if (isMultiple) {
+          onValueChange?.(
+            next ?? []
+          );
+        } else {
+          onValueChange?.(
+            next ?? null
+          );
+        }
+      },
+      [isControlled, isMultiple, onValueChange]
+    );
+    const [open, setOpen] = React.useState(false);
+    const [query, setQuery] = React.useState("");
+    const [activeIndex, setActiveIndex] = React.useState(0);
+    const debouncedSearch = useDebouncedCallback(onSearch, searchDebounce);
+    const visibleOptions = React.useMemo(() => {
+      if (onSearch) return options;
+      const filterFn = filter ?? defaultFilter;
+      return options.filter((o) => filterFn(o, query));
+    }, [onSearch, options, filter, query]);
+    React.useEffect(() => {
+      if (activeIndex >= visibleOptions.length) {
+        setActiveIndex(visibleOptions.length > 0 ? 0 : -1);
+      }
+    }, [visibleOptions, activeIndex]);
+    const handleInputChange = (e) => {
+      const next = e.target.value;
+      setQuery(next);
+      setOpen(true);
+      setActiveIndex(0);
+      if (onSearch) debouncedSearch(next);
+    };
+    const handleFocus = () => {
+      if (autoOpenOnFocus && !disabled) setOpen(true);
+    };
+    const selectOption = (option) => {
+      if (option.disabled) return;
+      if (isMultiple) {
+        const set = new Set(selectedValues);
+        if (set.has(option.value)) set.delete(option.value);
+        else set.add(option.value);
+        updateValue(Array.from(set));
+        setQuery("");
+        if (onSearch) debouncedSearch("");
+        inputRef.current?.focus();
+      } else {
+        updateValue(option.value);
+        const labelText = typeof option.label === "string" ? option.label : option.value;
+        setQuery(labelText);
+        setOpen(false);
+        inputRef.current?.blur();
+      }
+    };
+    const removeChip = (val) => {
+      if (!isMultiple) return;
+      updateValue(selectedValues.filter((v) => v !== val));
+      inputRef.current?.focus();
+    };
+    const clearAll = () => {
+      if (isMultiple) updateValue([]);
+      else updateValue(null);
+      setQuery("");
+      if (onSearch) debouncedSearch("");
+      inputRef.current?.focus();
+    };
+    const handleKeyDown = (e) => {
+      if (disabled) return;
+      if (e.nativeEvent.isComposing || e.keyCode === 229) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (!open) {
+          setOpen(true);
+          return;
+        }
+        if (visibleOptions.length === 0) return;
+        let next = activeIndex + 1;
+        while (next < visibleOptions.length && visibleOptions[next].disabled)
+          next++;
+        if (next < visibleOptions.length) setActiveIndex(next);
+        else setActiveIndex(visibleOptions.findIndex((o) => !o.disabled));
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (!open) {
+          setOpen(true);
+          return;
+        }
+        if (visibleOptions.length === 0) return;
+        let next = activeIndex - 1;
+        while (next >= 0 && visibleOptions[next].disabled) next--;
+        if (next >= 0) setActiveIndex(next);
+        else {
+          for (let i = visibleOptions.length - 1; i >= 0; i--) {
+            if (!visibleOptions[i].disabled) {
+              setActiveIndex(i);
+              break;
+            }
+          }
+        }
+        return;
+      }
+      if (e.key === "Home") {
+        e.preventDefault();
+        const idx = visibleOptions.findIndex((o) => !o.disabled);
+        if (idx >= 0) setActiveIndex(idx);
+        return;
+      }
+      if (e.key === "End") {
+        e.preventDefault();
+        for (let i = visibleOptions.length - 1; i >= 0; i--) {
+          if (!visibleOptions[i].disabled) {
+            setActiveIndex(i);
+            break;
+          }
+        }
+        return;
+      }
+      if (e.key === "Enter") {
+        if (open && activeIndex >= 0 && visibleOptions[activeIndex]) {
+          e.preventDefault();
+          selectOption(visibleOptions[activeIndex]);
+        }
+        return;
+      }
+      if (e.key === "Escape") {
+        if (open) {
+          e.preventDefault();
+          setOpen(false);
+        }
+        return;
+      }
+      if (e.key === "Backspace" && isMultiple && query === "" && selectedValues.length > 0) {
+        e.preventDefault();
+        removeChip(selectedValues[selectedValues.length - 1]);
+      }
+    };
+    const selectedOptionMap = React.useMemo(() => {
+      const map = /* @__PURE__ */ new Map();
+      for (const opt of options) map.set(opt.value, opt);
+      return map;
+    }, [options]);
+    const prevValueRef = React.useRef(
+      currentValue
+    );
+    React.useEffect(() => {
+      if (isMultiple) {
+        prevValueRef.current = currentValue;
+        return;
+      }
+      const valueChanged = prevValueRef.current !== currentValue;
+      prevValueRef.current = currentValue;
+      if (typeof currentValue !== "string") {
+        if (valueChanged) setQuery("");
+        return;
+      }
+      const opt = selectedOptionMap.get(currentValue);
+      const labelText = opt ? typeof opt.label === "string" ? opt.label : currentValue : currentValue;
+      if (valueChanged) {
+        setQuery(labelText);
+      } else {
+        setQuery((prev) => prev === currentValue ? labelText : prev);
+      }
+    }, [isMultiple, currentValue, selectedOptionMap]);
+    const hasValue = isMultiple && selectedValues.length > 0 || !isMultiple && typeof currentValue === "string" && currentValue !== "";
+    const showClear = clearable && !disabled && (hasValue || query.length > 0);
+    const state = error ? "error" : "default";
+    const hasField = !!(label || description);
+    const inputBox = /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: anchorRef,
+        className: cn(
+          comboboxInputVariants({ size, state }),
+          disabled && "nexus-combobox--disabled",
+          open && "nexus-combobox--open",
+          !hasField && className
+        ),
+        onClick: () => !disabled && inputRef.current?.focus(),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "nexus-combobox__content", children: [
+            isMultiple && selectedValues.map((val) => {
+              const opt = selectedOptionMap.get(val);
+              return /* @__PURE__ */ jsxs("span", { className: "nexus-combobox__chip", children: [
+                /* @__PURE__ */ jsx("span", { className: "nexus-combobox__chip-label", children: opt?.label ?? val }),
+                !disabled && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: "nexus-combobox__chip-remove",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      removeChip(val);
+                    },
+                    "aria-label": `Remove ${val}`,
+                    tabIndex: -1,
+                    children: /* @__PURE__ */ jsx(CloseIcon, { className: "nexus-combobox__chip-remove-icon" })
+                  }
+                )
+              ] }, val);
+            }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: setInputRef,
+                id: inputId,
+                type: "text",
+                role: "combobox",
+                autoComplete: "off",
+                spellCheck: false,
+                className: "nexus-combobox__input",
+                placeholder: isMultiple && selectedValues.length > 0 ? "" : placeholder,
+                value: query,
+                disabled,
+                "aria-expanded": open,
+                "aria-controls": listboxId,
+                "aria-autocomplete": "list",
+                "aria-activedescendant": open && activeIndex >= 0 && visibleOptions[activeIndex] ? `${inputId}-opt-${activeIndex}` : void 0,
+                "aria-invalid": error || void 0,
+                "aria-describedby": description ? `${inputId}-desc` : void 0,
+                onChange: handleInputChange,
+                onFocus: handleFocus,
+                onKeyDown: handleKeyDown
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "nexus-combobox__suffix", children: [
+            loading && /* @__PURE__ */ jsx("span", { className: "nexus-combobox__icon nexus-combobox__icon--loading", children: /* @__PURE__ */ jsx(Spinner, { size: 16 }) }),
+            showClear && !loading && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "nexus-combobox__clear",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  clearAll();
+                },
+                tabIndex: -1,
+                "aria-label": "Clear",
+                children: /* @__PURE__ */ jsx(ClearIcon, {})
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "nexus-combobox__chevron",
+                  open && "nexus-combobox__chevron--open"
+                ),
+                "aria-hidden": true,
+                children: /* @__PURE__ */ jsx(ChevronDown, {})
+              }
+            )
+          ] })
+        ]
+      }
+    );
+    const popoverBody = /* @__PURE__ */ jsxs(PopoverPrimitive.Root, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { asChild: true, children: inputBox }),
+      /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+        PopoverPrimitive.Content,
+        {
+          align: "start",
+          side: "bottom",
+          sideOffset: 4,
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          onCloseAutoFocus: (e) => e.preventDefault(),
+          onPointerDownOutside: (e) => {
+            if (anchorRef.current && e.target instanceof Node && anchorRef.current.contains(e.target)) {
+              e.preventDefault();
+            }
+          },
+          onInteractOutside: (e) => {
+            if (anchorRef.current && e.target instanceof Node && anchorRef.current.contains(e.target)) {
+              e.preventDefault();
+            }
+          },
+          className: cn("nexus-combobox-popover", popoverClassName),
+          style: { width: "var(--radix-popover-trigger-width)" },
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "listbox",
+              id: listboxId,
+              className: "nexus-combobox-listbox",
+              children: loading ? /* @__PURE__ */ jsxs("div", { className: "nexus-combobox-popover__status", children: [
+                /* @__PURE__ */ jsx(Spinner, { size: 16 }),
+                /* @__PURE__ */ jsx("span", { children: loadingMessage })
+              ] }) : visibleOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "nexus-combobox-popover__status", children: /* @__PURE__ */ jsx("span", { children: emptyMessage }) }) : visibleOptions.map((option, idx) => {
+                const selected = selectedValues.includes(option.value);
+                const active = idx === activeIndex;
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    id: `${inputId}-opt-${idx}`,
+                    role: "option",
+                    "aria-selected": selected,
+                    "data-disabled": option.disabled || void 0,
+                    "data-active": active || void 0,
+                    "data-selected": selected || void 0,
+                    className: cn(
+                      "nexus-combobox-option",
+                      active && "nexus-combobox-option--active",
+                      selected && "nexus-combobox-option--selected",
+                      option.disabled && "nexus-combobox-option--disabled"
+                    ),
+                    onMouseEnter: () => setActiveIndex(idx),
+                    onMouseDown: (e) => {
+                      e.preventDefault();
+                      selectOption(option);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "nexus-combobox-option__body", children: [
+                        /* @__PURE__ */ jsx("div", { className: "nexus-combobox-option__label", children: option.label }),
+                        option.description && /* @__PURE__ */ jsx("div", { className: "nexus-combobox-option__description", children: option.description })
+                      ] }),
+                      selected && /* @__PURE__ */ jsx(
+                        "svg",
+                        {
+                          className: "nexus-combobox-option__check",
+                          width: "14",
+                          height: "14",
+                          viewBox: "0 0 16 16",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: "2",
+                          strokeLinecap: "round",
+                          strokeLinejoin: "round",
+                          "aria-hidden": true,
+                          children: /* @__PURE__ */ jsx("path", { d: "M3 8l4 4 6-8" })
+                        }
+                      )
+                    ]
+                  },
+                  option.value
+                );
+              })
+            }
+          )
+        }
+      ) })
+    ] });
+    if (!hasField) return popoverBody;
+    return /* @__PURE__ */ jsxs("div", { className: cn("nexus-combobox-field", className), children: [
+      label && /* @__PURE__ */ jsx("label", { className: "nexus-combobox-field__label", htmlFor: inputId, children: label }),
+      popoverBody,
+      description && /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: `${inputId}-desc`,
+          className: cn(
+            "nexus-combobox-field__description",
+            error && "nexus-combobox-field__description--error"
+          ),
+          children: description
+        }
+      )
+    ] });
+  }
+);
+Combobox.displayName = "Combobox";
+
+export { Combobox, comboboxInputVariants };