moru-krds-react 0.1.0

package/dist/combobox/index.js

@@ -0,0 +1,416 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { cx } from "../lib/krds.js";
+function Combobox(props) {
+  const {
+    label,
+    labelledBy,
+    id: idProp,
+    size = "medium",
+    options,
+    groups,
+    value,
+    defaultValue,
+    onValueChange,
+    onSelect,
+    openOnFocus = true,
+    defaultOpen = false,
+    autoHighlight = false,
+    emptyMessage,
+    header,
+    footer,
+    listLabel = "\uC81C\uC548 \uBAA9\uB85D",
+    action,
+    searchLayout,
+    className,
+    inputClassName,
+    menuClassName,
+    onChange,
+    onFocus,
+    onKeyDown,
+    onBlur,
+    autoComplete = "off",
+    ref: forwardedRef,
+    ...rest
+  } = props;
+  const reactId = useId();
+  const id = idProp ?? `${reactId}-input`;
+  const listId = `${reactId}-list`;
+  const wrapRef = useRef(null);
+  const inputRef = useRef(null);
+  const [open, setOpen] = useState(defaultOpen);
+  const [activeIndex, setActiveIndex] = useState(defaultOpen && autoHighlight ? 0 : -1);
+  const [innerValue, setInnerValue] = useState(defaultValue ?? "");
+  const isControlled = value !== void 0;
+  const text = isControlled ? value : innerValue;
+  const setText = useCallback(
+    (next) => {
+      if (!isControlled) setInnerValue(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
+  const sections = useMemo(
+    () => groups?.length ? groups : [{ options: options ?? [] }],
+    [groups, options]
+  );
+  const flat = useMemo(
+    () => sections.flatMap(
+      (section, si) => section.options.map((option, oi) => ({
+        ...option,
+        id: `${reactId}-o-${si}-${oi}`
+      }))
+    ),
+    [sections, reactId]
+  );
+  const offsets = useMemo(
+    () => sections.map(
+      (_, si) => sections.slice(0, si).reduce((n, s) => n + s.options.length, 0)
+    ),
+    [sections]
+  );
+  const expanded = open && (flat.length > 0 || emptyMessage != null && text.length > 0);
+  const activeOption = expanded && activeIndex >= 0 ? flat[activeIndex] : void 0;
+  const closeMenu = useCallback(() => {
+    setOpen(false);
+    setActiveIndex(-1);
+  }, []);
+  const move = useCallback(
+    (delta) => {
+      if (!flat.length) return;
+      setActiveIndex((prev) => {
+        let next = prev < 0 ? delta > 0 ? -1 : 0 : prev;
+        for (let step = 0; step < flat.length; step += 1) {
+          next = (next + delta + flat.length) % flat.length;
+          if (!flat[next].disabled) return next;
+        }
+        return prev;
+      });
+    },
+    [flat]
+  );
+  const select = useCallback(
+    (option) => {
+      if (option.disabled) return;
+      setText(option.value);
+      closeMenu();
+      onSelect?.(option);
+      inputRef.current?.focus();
+    },
+    [setText, closeMenu, onSelect]
+  );
+  useEffect(() => {
+    if (!activeOption) return;
+    document.getElementById(activeOption.id)?.scrollIntoView({ block: "nearest" });
+  }, [activeOption]);
+  useEffect(() => {
+    if (!expanded) return;
+    const onPointerDown = (e) => {
+      if (!wrapRef.current?.contains(e.target)) closeMenu();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [expanded, closeMenu]);
+  const handleKeyDown = (e) => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented) return;
+    if (e.nativeEvent.isComposing) return;
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        if (!expanded) {
+          setOpen(true);
+          setActiveIndex(flat.findIndex((o) => !o.disabled));
+        } else {
+          move(1);
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (!expanded) {
+          setOpen(true);
+          setActiveIndex(flat.length - 1);
+        } else {
+          move(-1);
+        }
+        break;
+      case "Enter":
+        if (activeOption) {
+          e.preventDefault();
+          select(activeOption);
+        } else {
+          closeMenu();
+        }
+        break;
+      case "Escape":
+        if (expanded) {
+          e.preventDefault();
+          e.stopPropagation();
+          closeMenu();
+        }
+        break;
+      case "Tab":
+        closeMenu();
+        break;
+      default:
+        break;
+    }
+  };
+  const handleBlur = (e) => {
+    onBlur?.(e);
+    const next = e.relatedTarget;
+    if (next && !wrapRef.current?.contains(next)) closeMenu();
+  };
+  const status = !expanded ? "" : flat.length ? `\uC81C\uC548 ${flat.length}\uAC74` : "\uC81C\uC548 \uC5C6\uC74C";
+  const setInputRef = (node) => {
+    inputRef.current = node;
+    if (typeof forwardedRef === "function") forwardedRef(node);
+    else if (forwardedRef)
+      forwardedRef.current = node;
+  };
+  const renderItem = (option, index) => /* @__PURE__ */ jsx(
+    Item,
+    {
+      option,
+      index,
+      active: index === activeIndex,
+      onPick: select,
+      onHover: setActiveIndex
+    },
+    option.id
+  );
+  const row = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: setInputRef,
+        id,
+        type: "text",
+        className: cx("krds-input", size, inputClassName),
+        role: "combobox",
+        "aria-label": label,
+        "aria-labelledby": labelledBy,
+        "aria-expanded": expanded,
+        "aria-controls": listId,
+        "aria-autocomplete": "list",
+        "aria-activedescendant": activeOption?.id,
+        autoComplete,
+        value: text,
+        onChange: (e) => {
+          onChange?.(e);
+          setText(e.target.value);
+          setOpen(true);
+          setActiveIndex(autoHighlight ? 0 : -1);
+        },
+        onFocus: (e) => {
+          onFocus?.(e);
+          if (openOnFocus) setOpen(true);
+        },
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx("drop-menu w-full mt-1 before:hidden", menuClassName),
+        style: expanded ? { display: "block" } : void 0,
+        onMouseDown: (e) => e.preventDefault(),
+        children: /* @__PURE__ */ jsxs("div", { className: "drop-in", children: [
+          header && /* @__PURE__ */ jsx("div", { className: "drop-top", children: header }),
+          groups?.length ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: listId,
+              role: "listbox",
+              "aria-label": listLabel,
+              className: "w-full max-h-80 overflow-y-auto flex flex-col gap-2",
+              children: sections.map((section, si) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  role: "group",
+                  "aria-labelledby": `${reactId}-g-${si}`,
+                  className: "w-full",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "h3",
+                      {
+                        id: `${reactId}-g-${si}`,
+                        className: "px-4 py-1 text-xs font-bold text-fg-subtle",
+                        children: section.label
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("ul", { className: "drop-list", role: "none", children: section.options.map(
+                      (_, oi) => renderItem(flat[offsets[si] + oi], offsets[si] + oi)
+                    ) })
+                  ]
+                },
+                section.label ?? si
+              ))
+            }
+          ) : /* @__PURE__ */ jsx(
+            "ul",
+            {
+              id: listId,
+              role: "listbox",
+              "aria-label": listLabel,
+              className: "drop-list max-h-80 overflow-y-auto",
+              children: flat.map(renderItem)
+            }
+          ),
+          flat.length === 0 && emptyMessage != null && /* @__PURE__ */ jsx("p", { className: "w-full px-4 py-3 text-sm text-fg-subtle", children: emptyMessage }),
+          footer && /* @__PURE__ */ jsx("div", { className: "drop-bottom", children: footer })
+        ] })
+      }
+    ),
+    action
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapRef,
+      className: cx("krds-drop-wrap drop-left w-full", className),
+      children: [
+        searchLayout ? /* @__PURE__ */ jsx("div", { className: "sch-input w-full", children: row }) : row,
+        /* @__PURE__ */ jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", children: status })
+      ]
+    }
+  );
+}
+function Item({
+  option,
+  active,
+  index,
+  onPick,
+  onHover
+}) {
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      id: option.id,
+      role: "option",
+      "aria-selected": active,
+      "aria-disabled": option.disabled || void 0,
+      className: cx(
+        "item-link",
+        active && "active",
+        option.disabled ? "text-fg-disabled cursor-not-allowed" : "cursor-pointer"
+      ),
+      onClick: () => onPick(option),
+      onMouseMove: () => {
+        if (!option.disabled) onHover(index);
+      },
+      children: [
+        option.icon && /* @__PURE__ */ jsx("i", { className: `svg-icon ico-${option.icon}`, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: option.label ?? option.value }),
+        option.description && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-sm text-fg-subtle", children: option.description })
+      ]
+    }
+  );
+}
+function SearchCombobox({
+  label = "\uAC80\uC0C9\uC5B4",
+  buttonLabel = "\uAC80\uC0C9",
+  clearLabel = "\uAC80\uC0C9\uC5B4 \uC804\uCCB4 \uC0AD\uC81C",
+  clearable = true,
+  onClear,
+  onSearch,
+  buttonType = "submit",
+  buttonProps,
+  value,
+  defaultValue,
+  onValueChange,
+  onSelect,
+  onKeyDown,
+  inputClassName,
+  ref,
+  ...rest
+}) {
+  const inputRef = useRef(null);
+  const [innerValue, setInnerValue] = useState(defaultValue ?? "");
+  const text = value !== void 0 ? value : innerValue;
+  const handleValueChange = (next) => {
+    if (value === void 0) setInnerValue(next);
+    onValueChange?.(next);
+  };
+  const setRef = (node) => {
+    inputRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  return /* @__PURE__ */ jsx(
+    Combobox,
+    {
+      ...rest,
+      ref: setRef,
+      label,
+      searchLayout: true,
+      value: text,
+      onValueChange: handleValueChange,
+      onSelect: (option) => {
+        onSelect?.(option);
+        onSearch?.(option.value);
+      },
+      onKeyDown: (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented || e.key !== "Enter" || e.nativeEvent.isComposing)
+          return;
+        if (e.currentTarget.getAttribute("aria-activedescendant")) return;
+        onSearch?.(e.currentTarget.value);
+      },
+      inputClassName: cx(clearable && "pr-20", inputClassName),
+      action: (
+        // `.sch-input .ico-search{position:absolute;top:50%;right:1.6rem;transform:translateY(-50%)}`
+        // 킷의 그 위치 규칙을 감싸개가 받는다. gap-2(8px)는 킷 `--krds-gap-3` 과 같은 값.
+        /* @__PURE__ */ jsxs("div", { className: "ico-search flex items-center gap-2", children: [
+          clearable && text.length > 0 && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "krds-btn medium icon",
+              onClick: () => {
+                handleValueChange("");
+                onClear?.();
+                inputRef.current?.focus();
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: clearLabel }),
+                /* @__PURE__ */ jsx("i", { className: "svg-icon ico-del", "aria-hidden": "true" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: buttonType,
+              className: "krds-btn medium icon",
+              ...buttonProps,
+              onClick: (e) => {
+                buttonProps?.onClick?.(e);
+                onSearch?.(text);
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: buttonLabel }),
+                /* @__PURE__ */ jsx("i", { className: "svg-icon ico-sch", "aria-hidden": "true" })
+              ]
+            }
+          )
+        ] })
+      )
+    }
+  );
+}
+export {
+  Combobox,
+  SearchCombobox
+};
+//# sourceMappingURL=index.js.map

package/dist/combobox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/combobox/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type FocusEvent as ReactFocusEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n} from \"react\";\nimport { cx, type KrdsFieldSize, type KrdsIcon } from \"../lib/krds\";\n\n/**\n * 콤보박스 — 입력하면 목록이 좁혀지는 자동완성. KRDS 킷에 없는 보충 부품이다.\n *\n * 껍데기는 킷 드롭다운(`krds-drop-wrap`), 동작은 WAI-ARIA 1.2 콤보박스 패턴이다.\n * ↓↑ 는 양 끝에서 순환하고 Esc 는 닫기만 하며 값은 건드리지 않는다.\n * 검색칸(돋보기 · 검색어 삭제 · 실행 버튼)이 필요하면 {@link SearchCombobox} 를 쓴다.\n * 최근·인기·제안처럼 종류가 갈리면 `options` 대신 `groups` 로 계층화한다(규격 요구).\n *\n * @example\n * <Combobox label=\"기관명\" options={hits} onSelect={(o) => setOrg(o.value)} />\n * <SearchCombobox\n *   groups={[\n *     { label: '최근 검색어', options: recent },\n *     { label: '인기 검색어', options: popular },\n *   ]}\n *   emptyMessage=\"일치하는 검색어가 없습니다.\"\n *   onSearch={run}\n * />\n *\n * 자세히: docs/krds/09-부품-노트.md#콤보박스\n */\n\n/* ────────────────────────────── 자료 모양 ────────────────────────────── */\n\n/** 제안 항목 하나. */\nexport type ComboboxOption = {\n  /** 고르면 입력칸에 들어갈 글자. */\n  value: string;\n  /** 화면에 보일 것. 없으면 `value` 를 그대로 쓴다(일치 글자 강조를 넣을 자리). */\n  label?: ReactNode;\n  /** 오른쪽 끝 보조 설명(분류·결과 수 등). */\n  description?: ReactNode;\n  /** 앞 아이콘 이름(`ico-` 뺀 것). 최근 검색어에 `log`, 인기 검색어에 `like` 같은 식. */\n  icon?: KrdsIcon;\n  /** 보이되 고를 수 없다. ↑↓ 순회에서도 건너뛴다. */\n  disabled?: boolean;\n};\n\n/** 제안 묶음. 규격이 요구하는 계층화의 단위다 — 최근 / 인기 / 제안이 각각 한 묶음이다. */\nexport type ComboboxGroup = {\n  /** 묶음 제목. `<h3>` 으로 그리고 `role=\"group\"` 의 이름으로도 쓴다. */\n  label: string;\n  options: readonly ComboboxOption[];\n};\n\n/** 내부용 — 평평하게 편 항목. `id` 가 `aria-activedescendant` 로 가리킬 자리다. */\ntype FlatOption = ComboboxOption & { id: string };\n\n/* ────────────────────────────── Props ────────────────────────────── */\n\ntype ComboboxOwnProps = {\n  /** 입력칸의 접근 가능한 이름. 보이는 `<label>` 이 있으면 `labelledBy` 를 대신 준다. */\n  label?: string;\n  /** 보이는 `<label>` 의 id. `label` 과 함께 줄 수 없다. */\n  labelledBy?: string;\n  /** `<input>` 의 id. 생략하면 `useId()` 로 만든다. */\n  id?: string;\n  /** 기본 medium(48px). 같은 줄의 버튼과 같은 값을 준다. */\n  size?: KrdsFieldSize;\n\n  /** 한 덩어리 목록. `groups` 를 함께 주면 `groups` 만 그린다. */\n  options?: readonly ComboboxOption[];\n  /** 제목이 붙은 묶음 목록(계층화). */\n  groups?: readonly ComboboxGroup[];\n\n  /** 제어 입력값. 주면 제어 부품이 된다. */\n  value?: string;\n  /** 비제어 초기값. */\n  defaultValue?: string;\n  /** 입력값이 바뀔 때(사람이 치거나 항목을 골랐을 때 모두). */\n  onValueChange?: (value: string) => void;\n  /** 항목을 골랐을 때. 입력값을 `option.value` 로 바꾼 **뒤** 부른다. */\n  onSelect?: (option: ComboboxOption) => void;\n\n  /** 초점이 들어오면 값이 비어 있어도 목록을 연다. 기본 true(규격의 Focusin 동작). */\n  openOnFocus?: boolean;\n  /** 처음부터 펼친 채로 그린다. 비제어 초깃값이라 사람이 닫으면 다시 열리지 않는다(문서·시각 시험용). */\n  defaultOpen?: boolean;\n  /** 열 때 첫 항목을 미리 활성으로 둔다. 기본 false — 치던 글자가 Enter 로 바뀌는 사고를 막는다. */\n  autoHighlight?: boolean;\n\n  /** 결과가 없을 때 보일 글. **글자를 한 자 이상 친 뒤에만** 뜬다. 주지 않으면 목록이 열리지 않는다. */\n  emptyMessage?: ReactNode;\n  /** 목록 위 고정 영역(킷 `.drop-top`). 「검색 도움말」 같은 것. */\n  header?: ReactNode;\n  /** 목록 아래 고정 영역(킷 `.drop-bottom`). 「검색 기록 전체 삭제」 같은 것. */\n  footer?: ReactNode;\n\n  /** 목록의 접근 가능한 이름. 기본 「제안 목록」. */\n  listLabel?: string;\n  /** 입력칸 오른쪽에 놓일 것(검색 버튼 등). 목록보다 뒤에 그려진다(규격의 읽기 순서). */\n  action?: ReactNode;\n  /** 입력칸 줄을 킷 `.sch-input`(돋보기 겹침 규칙)으로 감싼다. {@link SearchCombobox} 가 켠다. */\n  searchLayout?: boolean;\n\n  /** `.krds-drop-wrap` 감싸개에 붙는다. 바깥 여백·너비는 여기서 조절한다. */\n  className?: string;\n  /** `<input>` 에 붙는다. */\n  inputClassName?: string;\n  /** `.drop-menu` 에 붙는다. */\n  menuClassName?: string;\n};\n\n/** `<input>` 에서 부품이 직접 다루는 것은 뺀다. `onSelect` 는 DOM 이벤트와 이름이 겹쳐 막았다. */\ntype ComboboxInputProps = Omit<\n  ComponentPropsWithRef<\"input\">,\n  | \"size\"\n  | \"value\"\n  | \"defaultValue\"\n  | \"onSelect\"\n  | \"role\"\n  | \"children\"\n  | \"list\"\n  | \"type\"\n>;\n\ntype ComboboxBaseProps = ComboboxInputProps & ComboboxOwnProps;\n\n/** 이름 없는 콤보박스를 만들 수 없게 타입으로 막는다 — `label` 이나 `labelledBy` 중 하나는 필수다. */\nexport type ComboboxProps = ComboboxBaseProps &\n  (\n    | { label: string; labelledBy?: never }\n    | { label?: never; labelledBy: string }\n  );\n\n/* ────────────────────────────── 부품 ────────────────────────────── */\n\nexport function Combobox(props: ComboboxProps) {\n  // 이름 유니온은 판별자가 없어 그대로 구조 분해가 안 된다. 넓은 쪽으로 한 번 받아 쓴다.\n  const {\n    label,\n    labelledBy,\n    id: idProp,\n    size = \"medium\",\n    options,\n    groups,\n    value,\n    defaultValue,\n    onValueChange,\n    onSelect,\n    openOnFocus = true,\n    defaultOpen = false,\n    autoHighlight = false,\n    emptyMessage,\n    header,\n    footer,\n    listLabel = \"제안 목록\",\n    action,\n    searchLayout,\n    className,\n    inputClassName,\n    menuClassName,\n    onChange,\n    onFocus,\n    onKeyDown,\n    onBlur,\n    autoComplete = \"off\",\n    ref: forwardedRef,\n    ...rest\n  }: ComboboxBaseProps = props;\n\n  const reactId = useId();\n  const id = idProp ?? `${reactId}-input`;\n  const listId = `${reactId}-list`;\n\n  const wrapRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  // `defaultOpen` 은 초깃값일 뿐이다 — 닫은 뒤에는 보통 부품과 똑같이 움직인다.\n  const [open, setOpen] = useState(defaultOpen);\n  const [activeIndex, setActiveIndex] = useState(defaultOpen && autoHighlight ? 0 : -1);\n  const [innerValue, setInnerValue] = useState(defaultValue ?? \"\");\n\n  const isControlled = value !== undefined;\n  const text = isControlled ? value : innerValue;\n\n  const setText = useCallback(\n    (next: string) => {\n      if (!isControlled) setInnerValue(next);\n      onValueChange?.(next);\n    },\n    [isControlled, onValueChange],\n  );\n\n  /** 묶음이 있으면 묶음, 없으면 제목 없는 묶음 하나. 아래 계산을 한 갈래로 만들려는 정규화다. */\n  const sections = useMemo<\n    ReadonlyArray<{ label?: string; options: readonly ComboboxOption[] }>\n  >(\n    () => (groups?.length ? groups : [{ options: options ?? [] }]),\n    [groups, options],\n  );\n\n  /** 평평하게 편 항목. 이 순서가 곧 ↑↓ 순서다. `id` 는 `aria-activedescendant` 가 가리킨다. */\n  const flat = useMemo<FlatOption[]>(\n    () =>\n      sections.flatMap((section, si) =>\n        section.options.map((option, oi) => ({\n          ...option,\n          id: `${reactId}-o-${si}-${oi}`,\n        })),\n      ),\n    [sections, reactId],\n  );\n\n  /**\n   * 묶음 si 의 첫 항목이 `flat` 에서 몇 번째인지. 묶음별로 그릴 때 전역 번호를 되찾는 데 쓴다\n   * (전역 번호가 곧 ↑↓ 순서라 묶음 안 번호로는 안 된다). 묶음은 서넛뿐이라 앞부분을 다시 세도 된다.\n   */\n  const offsets = useMemo(\n    () =>\n      sections.map((_, si) =>\n        sections.slice(0, si).reduce((n, s) => n + s.options.length, 0),\n      ),\n    [sections],\n  );\n\n  /**\n   * 빈 안내는 **친 글자가 있을 때만** 연다. 초점만으로 여는 자리(규격의 Focusin)는\n   * 「인기 검색어·이전 검색 기록」을 보여 주는 자리라, 항목이 하나도 없으면 보여 줄 것이 없다 —\n   * 예전에는 `emptyMessage` 만 주면 `options={[]}` 인 화면에서 초점을 줄 때마다 빈 상자가 떴다.\n   */\n  const expanded =\n    open && (flat.length > 0 || (emptyMessage != null && text.length > 0));\n  const activeOption =\n    expanded && activeIndex >= 0 ? flat[activeIndex] : undefined;\n\n  const closeMenu = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n  }, []);\n\n  /**\n   * ↑↓ 이동. **양 끝에서 순환한다** — 규격 표가 못 박은 동작이다.\n   * `disabled` 는 건너뛰고, 전부 disabled 면 한 바퀴만 돌고 제자리에 둔다.\n   */\n  const move = useCallback(\n    (delta: number) => {\n      if (!flat.length) return;\n      setActiveIndex((prev) => {\n        // 아직 아무 데도 없으면 ↓ 는 첫 항목, ↑ 는 마지막 항목에서 시작하게 자리를 잡아 둔다.\n        let next = prev < 0 ? (delta > 0 ? -1 : 0) : prev;\n        for (let step = 0; step < flat.length; step += 1) {\n          next = (next + delta + flat.length) % flat.length;\n          if (!flat[next].disabled) return next;\n        }\n        return prev;\n      });\n    },\n    [flat],\n  );\n\n  /** 항목을 고른다. 입력값을 바꾸고 닫는다(규격: Click/Enter 는 그 항목으로 검색 실행). */\n  const select = useCallback(\n    (option: ComboboxOption) => {\n      if (option.disabled) return;\n      setText(option.value);\n      closeMenu();\n      onSelect?.(option);\n      inputRef.current?.focus();\n    },\n    [setText, closeMenu, onSelect],\n  );\n\n  // 활성 항목이 스크롤 밖으로 나가지 않게 따라간다. `block:'nearest'` 라 필요할 때만 움직인다.\n  useEffect(() => {\n    if (!activeOption) return;\n    document\n      .getElementById(activeOption.id)\n      ?.scrollIntoView({ block: \"nearest\" });\n  }, [activeOption]);\n\n  // 바깥을 누르면 닫는다. click 이 아니라 pointerdown 이라 드래그로 나가도 닫힌다.\n  useEffect(() => {\n    if (!expanded) return;\n    const onPointerDown = (e: PointerEvent) => {\n      if (!wrapRef.current?.contains(e.target as Node)) closeMenu();\n    };\n    document.addEventListener(\"pointerdown\", onPointerDown);\n    return () => document.removeEventListener(\"pointerdown\", onPointerDown);\n  }, [expanded, closeMenu]);\n\n  const handleKeyDown = (e: ReactKeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(e);\n    if (e.defaultPrevented) return;\n\n    // ★ 한글 조합 중에는 어떤 키도 가로채지 않는다(함정 4). 조합을 끝내는 Enter 가 검색을 실행해 버린다.\n    if (e.nativeEvent.isComposing) return;\n\n    switch (e.key) {\n      case \"ArrowDown\":\n        e.preventDefault();\n        // 규격: 「방향키 ↓ → 제안 목록의 가장 첫 번째 요소로」. 닫혀 있으면 열면서 첫 항목으로 간다.\n        if (!expanded) {\n          setOpen(true);\n          setActiveIndex(flat.findIndex((o) => !o.disabled));\n        } else {\n          move(1);\n        }\n        break;\n      case \"ArrowUp\":\n        e.preventDefault();\n        if (!expanded) {\n          setOpen(true);\n          setActiveIndex(flat.length - 1);\n        } else {\n          move(-1);\n        }\n        break;\n      case \"Enter\":\n        // 활성 항목이 있을 때만 가로챈다 — 없으면 폼 제출(=검색 실행)이 그대로 지나가야 한다.\n        if (activeOption) {\n          e.preventDefault();\n          select(activeOption);\n        } else {\n          closeMenu();\n        }\n        break;\n      case \"Escape\":\n        // 규격: 「창이 닫히면서 초점이 검색어 입력 필드로 이동」. 값은 건드리지 않는다(함정 3).\n        // 초점은 이미 입력칸에 있으므로 닫기만 하면 규격을 만족한다.\n        if (expanded) {\n          e.preventDefault();\n          e.stopPropagation();\n          closeMenu();\n        }\n        break;\n      case \"Tab\":\n        // 열어 둔 채 다음 요소로 넘어가면 유령 상자가 남는다.\n        closeMenu();\n        break;\n      default:\n        break;\n    }\n  };\n\n  // 부품 밖으로 초점이 나가면 닫는다. relatedTarget 이 없으면(브라우저 UI 로 이동) 그대로 둔다.\n  const handleBlur = (e: ReactFocusEvent<HTMLInputElement>) => {\n    onBlur?.(e);\n    const next = e.relatedTarget as Node | null;\n    if (next && !wrapRef.current?.contains(next)) closeMenu();\n  };\n\n  /**\n   * 소리로 알리는 제안 개수(함정 5). 닫혀 있으면 빈 글자라 아무것도 읽지 않는다 —\n   * 닫힘 자체는 알리지 않는다(모든 Esc 마다 떠드는 화면이 된다).\n   */\n  const status = !expanded\n    ? \"\"\n    : flat.length\n      ? `제안 ${flat.length}건`\n      : \"제안 없음\";\n\n  /** 바깥에서 온 ref 와 부품이 쓰는 ref 를 함께 채운다. React 19 라 forwardRef 가 필요 없다. */\n  const setInputRef = (node: HTMLInputElement | null) => {\n    inputRef.current = node;\n    if (typeof forwardedRef === \"function\") forwardedRef(node);\n    else if (forwardedRef)\n      (forwardedRef as { current: HTMLInputElement | null }).current = node;\n  };\n\n  const renderItem = (option: FlatOption, index: number) => (\n    <Item\n      key={option.id}\n      option={option}\n      index={index}\n      active={index === activeIndex}\n      onPick={select}\n      onHover={setActiveIndex}\n    />\n  );\n\n  const row = (\n    <>\n      <input\n        ref={setInputRef}\n        id={id}\n        // `search` 로 두면 웹킷이 제 지우기 버튼을 그려 돋보기와 겹친다 — 킷 샘플도 text 다.\n        type=\"text\"\n        className={cx(\"krds-input\", size, inputClassName)}\n        /* ── WAI-ARIA 1.2 콤보박스 배선 ── */\n        role=\"combobox\"\n        aria-label={label}\n        aria-labelledby={labelledBy}\n        aria-expanded={expanded}\n        aria-controls={listId}\n        aria-autocomplete=\"list\"\n        aria-activedescendant={activeOption?.id}\n        // 브라우저 자동완성 상자가 우리 목록 위에 겹치는 것을 막는다.\n        autoComplete={autoComplete}\n        value={text}\n        onChange={(e) => {\n          onChange?.(e);\n          setText(e.target.value);\n          // 규격: 「Keyup — 한 글자 이상 입력되면 … 검색어 제안으로 변경된다」. 칠 때마다 연다.\n          setOpen(true);\n          setActiveIndex(autoHighlight ? 0 : -1);\n        }}\n        onFocus={(e) => {\n          onFocus?.(e);\n          // 규격: 「Focusin — 값이 비어 있으면 인기 검색어와 이전 검색 기록이 제공된다」.\n          if (openOnFocus) setOpen(true);\n        }}\n        onKeyDown={handleKeyDown}\n        onBlur={handleBlur}\n        {...rest}\n      />\n\n      {/*\n        ★ 목록은 입력칸의 「다음 요소」다 — 규격의 읽기 순서 요구(함정 1). action 보다 앞에 둔다.\n        여는 방법은 인라인 display:block — 킷에 여는 클래스가 없다(보충 1).\n        onMouseDown 을 막아 항목을 눌러도 입력칸이 초점을 잃지 않게 한다(닫혔다 열리는 깜빡임 방지).\n      */}\n      <div\n        className={cx(\"drop-menu w-full mt-1 before:hidden\", menuClassName)}\n        style={expanded ? { display: \"block\" } : undefined}\n        onMouseDown={(e) => e.preventDefault()}\n      >\n        <div className=\"drop-in\">\n          {header && <div className=\"drop-top\">{header}</div>}\n\n          {/*\n            역할 구조: listbox → (group → option) 또는 listbox → option.\n            묶음이 있을 땐 감싸개를 div(listbox)로 두고 `<ul class=\"drop-list\">` 는 role=\"none\" 으로 비운다 —\n            listbox 의 자식은 option 이나 group 만 허용되므로 ul/li 의 목록 역할을 지워야 한다.\n            제목 `<h3>` 은 group 안에 두고 aria-labelledby 로 그 group 의 이름이 되게 한다.\n            규격의 「제목 구조로 계층화」와 ARIA 구조를 동시에 만족시키는 배치다.\n          */}\n          {groups?.length ? (\n            <div\n              id={listId}\n              role=\"listbox\"\n              aria-label={listLabel}\n              className=\"w-full max-h-80 overflow-y-auto flex flex-col gap-2\"\n            >\n              {sections.map((section, si) => (\n                <div\n                  key={section.label ?? si}\n                  role=\"group\"\n                  aria-labelledby={`${reactId}-g-${si}`}\n                  className=\"w-full\"\n                >\n                  {/* 킷에 목록 소제목 규칙이 없다(보충 5) — 유틸리티로 그린다. 좌우 16px 은 .item-link 와 맞춘 값. */}\n                  <h3\n                    id={`${reactId}-g-${si}`}\n                    className=\"px-4 py-1 text-xs font-bold text-fg-subtle\"\n                  >\n                    {section.label}\n                  </h3>\n                  <ul className=\"drop-list\" role=\"none\">\n                    {section.options.map((_, oi) =>\n                      renderItem(flat[offsets[si] + oi], offsets[si] + oi),\n                    )}\n                  </ul>\n                </div>\n              ))}\n            </div>\n          ) : (\n            <ul\n              id={listId}\n              role=\"listbox\"\n              aria-label={listLabel}\n              className=\"drop-list max-h-80 overflow-y-auto\"\n            >\n              {flat.map(renderItem)}\n            </ul>\n          )}\n\n          {/* 빈 결과 안내. listbox 밖이라 option 개수에 섞이지 않는다. */}\n          {flat.length === 0 && emptyMessage != null && (\n            <p className=\"w-full px-4 py-3 text-sm text-fg-subtle\">\n              {emptyMessage}\n            </p>\n          )}\n\n          {footer && <div className=\"drop-bottom\">{footer}</div>}\n        </div>\n      </div>\n\n      {action}\n    </>\n  );\n\n  return (\n    <div\n      ref={wrapRef}\n      // `krds-drop-wrap` 이 있어야 `.drop-menu`·`.item-link` 규칙이 걸린다(전부 후손 선택자).\n      // `drop-left` 도 킷 클래스다 — 가운데 정렬을 왼쪽 맞춤으로 되돌린다.\n      className={cx(\"krds-drop-wrap drop-left w-full\", className)}\n    >\n      {searchLayout ? <div className=\"sch-input w-full\">{row}</div> : row}\n      {/* 함정 5 — 눈에는 안 보이고 소리로만 개수 변화를 알린다. */}\n      <span className=\"sr-only\" role=\"status\" aria-live=\"polite\">\n        {status}\n      </span>\n    </div>\n  );\n}\n\n/** 제안 항목 하나 — 킷 `.item-link`. 초점을 받으면 안 되므로 `<li role=\"option\">` 이다. */\nfunction Item({\n  option,\n  active,\n  index,\n  onPick,\n  onHover,\n}: {\n  option: FlatOption;\n  active: boolean;\n  index: number;\n  onPick: (option: ComboboxOption) => void;\n  onHover: (index: number) => void;\n}) {\n  return (\n    <li\n      id={option.id}\n      role=\"option\"\n      aria-selected={active}\n      aria-disabled={option.disabled || undefined}\n      // `.active` 는 킷 클래스다(굵게 + secondary 배경). 활성 표시를 새로 그리지 않는다.\n      className={cx(\n        \"item-link\",\n        active && \"active\",\n        option.disabled\n          ? \"text-fg-disabled cursor-not-allowed\"\n          : \"cursor-pointer\",\n      )}\n      onClick={() => onPick(option)}\n      // 마우스를 올리면 활성도 따라온다 — 키보드로 고른 자리와 마우스가 가리키는 자리가 갈라지지 않게.\n      onMouseMove={() => {\n        if (!option.disabled) onHover(index);\n      }}\n    >\n      {option.icon && (\n        <i className={`svg-icon ico-${option.icon}`} aria-hidden=\"true\" />\n      )}\n      {/* 항목 높이가 48px 고정이라 줄바꿈이 나면 넘친다. 규격이 금지한 말줄임은 「입력 필드」쪽 이야기다. */}\n      <span className=\"min-w-0 flex-1 truncate\">\n        {option.label ?? option.value}\n      </span>\n      {option.description && (\n        <span className=\"shrink-0 text-sm text-fg-subtle\">\n          {option.description}\n        </span>\n      )}\n    </li>\n  );\n}\n\n/* ────────────────────────────── 검색어 자동완성 ────────────────────────────── */\n\n/**\n * 검색어 자동완성 — {@link Combobox} + 킷 `sch-input`(돋보기 겹침) + 검색어 삭제 버튼.\n *\n * KRDS 검색 규격의 구성 요소 5(검색어 삭제)·7(실시간 제안)을 한 부품으로 채운다.\n * 규격이 정한 이름 셋이 기본값이다 — 입력 「검색어」·삭제 「검색어 전체 삭제」·실행 「검색」.\n * `buttonType` 기본이 `submit` 이라 `<form action>` 안에 두면 JS 없이도 검색이 된다.\n *\n * @example\n * <form action=\"/search\">\n *   <SearchCombobox name=\"q\" groups={suggestions} onSearch={run} />\n * </form>\n */\nexport type SearchComboboxProps = Omit<\n  ComboboxBaseProps,\n  \"action\" | \"searchLayout\" | \"label\" | \"labelledBy\"\n> & {\n  /** 입력칸의 접근 가능한 이름. 규격이 정한 기본값 「검색어」. */\n  label?: string;\n  /** 실행 버튼의 이름(`sr-only`). 규격이 정한 기본값 「검색」. */\n  buttonLabel?: string;\n  /** 삭제 버튼의 이름(`sr-only`). 규격이 정한 기본값 「검색어 전체 삭제」. */\n  clearLabel?: string;\n  /** 검색어 삭제 버튼을 둔다. 기본 true — 규격 구성 요소 5는 선택이 아니다. */\n  clearable?: boolean;\n  /** 삭제 버튼을 누른 뒤. 입력값은 부품이 이미 비운 뒤 부른다. */\n  onClear?: () => void;\n  /**\n   * 검색 실행. Enter(활성 항목이 없을 때)·돋보기 클릭·제안 선택 세 곳에서 부른다.\n   * `preventDefault` 를 하지 않으므로 `<form>` 안이면 폼 제출도 함께 일어난다.\n   */\n  onSearch?: (query: string) => void;\n  /** 기본 submit — `<form action>` 안에 두면 JS 없이도 검색이 된다. */\n  buttonType?: \"submit\" | \"button\";\n  buttonProps?: Omit<\n    ComponentPropsWithRef<\"button\">,\n    \"type\" | \"className\" | \"children\"\n  >;\n};\n\nexport function SearchCombobox({\n  label = \"검색어\",\n  buttonLabel = \"검색\",\n  clearLabel = \"검색어 전체 삭제\",\n  clearable = true,\n  onClear,\n  onSearch,\n  buttonType = \"submit\",\n  buttonProps,\n  value,\n  defaultValue,\n  onValueChange,\n  onSelect,\n  onKeyDown,\n  inputClassName,\n  ref,\n  ...rest\n}: SearchComboboxProps) {\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const [innerValue, setInnerValue] = useState(defaultValue ?? \"\");\n  const text = value !== undefined ? value : innerValue;\n\n  const handleValueChange = (next: string) => {\n    if (value === undefined) setInnerValue(next);\n    onValueChange?.(next);\n  };\n\n  const setRef = (node: HTMLInputElement | null) => {\n    inputRef.current = node;\n    if (typeof ref === \"function\") ref(node);\n    else if (ref) (ref as { current: HTMLInputElement | null }).current = node;\n  };\n\n  return (\n    <Combobox\n      {...rest}\n      ref={setRef}\n      label={label}\n      searchLayout\n      value={text}\n      onValueChange={handleValueChange}\n      onSelect={(option) => {\n        onSelect?.(option);\n        // 규격: 「Click — 선택된 항목으로 검색 실행」 / 「Enter — 초점을 가진 항목으로 검색 실행」.\n        onSearch?.(option.value);\n      }}\n      onKeyDown={(e) => {\n        onKeyDown?.(e);\n        if (\n          e.defaultPrevented ||\n          e.key !== \"Enter\" ||\n          e.nativeEvent.isComposing\n        )\n          return;\n        // 활성 항목이 있으면 Combobox 가 「항목 선택」으로 처리한다 — 여기서 두 번 실행하지 않는다.\n        if (e.currentTarget.getAttribute(\"aria-activedescendant\")) return;\n        onSearch?.(e.currentTarget.value);\n      }}\n      // 킷 여백(48px)은 돋보기 하나 몫이다. 삭제 버튼까지 둘이라 80px 로 넓힌다(값이 없어도 유지).\n      inputClassName={cx(clearable && \"pr-20\", inputClassName)}\n      action={\n        // `.sch-input .ico-search{position:absolute;top:50%;right:1.6rem;transform:translateY(-50%)}`\n        // 킷의 그 위치 규칙을 감싸개가 받는다. gap-2(8px)는 킷 `--krds-gap-3` 과 같은 값.\n        <div className=\"ico-search flex items-center gap-2\">\n          {clearable && text.length > 0 && (\n            <button\n              type=\"button\"\n              className=\"krds-btn medium icon\"\n              onClick={() => {\n                handleValueChange(\"\");\n                onClear?.();\n                inputRef.current?.focus();\n              }}\n            >\n              <span className=\"sr-only\">{clearLabel}</span>\n              <i className=\"svg-icon ico-del\" aria-hidden=\"true\" />\n            </button>\n          )}\n          <button\n            type={buttonType}\n            className=\"krds-btn medium icon\"\n            {...buttonProps}\n            onClick={(e) => {\n              buttonProps?.onClick?.(e);\n              onSearch?.(text);\n            }}\n          >\n            <span className=\"sr-only\">{buttonLabel}</span>\n            <i className=\"svg-icon ico-sch\" aria-hidden=\"true\" />\n          </button>\n        </div>\n      }\n    />\n  );\n}\n"],"mappings":";AAyXI,SAWA,UAXA,KA0EY,YA1EZ;AAvXJ;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AACP,SAAS,UAA6C;AAiI/C,SAAS,SAAS,OAAsB;AAE7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,IAAI;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf,KAAK;AAAA,IACL,GAAG;AAAA,EACL,IAAuB;AAEvB,QAAM,UAAU,MAAM;AACtB,QAAM,KAAK,UAAU,GAAG,OAAO;AAC/B,QAAM,SAAS,GAAG,OAAO;AAEzB,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,WAAW,OAAgC,IAAI;AAGrD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,WAAW;AAC5C,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,eAAe,gBAAgB,IAAI,EAAE;AACpF,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,gBAAgB,EAAE;AAE/D,QAAM,eAAe,UAAU;AAC/B,QAAM,OAAO,eAAe,QAAQ;AAEpC,QAAM,UAAU;AAAA,IACd,CAAC,SAAiB;AAChB,UAAI,CAAC,aAAc,eAAc,IAAI;AACrC,sBAAgB,IAAI;AAAA,IACtB;AAAA,IACA,CAAC,cAAc,aAAa;AAAA,EAC9B;AAGA,QAAM,WAAW;AAAA,IAGf,MAAO,QAAQ,SAAS,SAAS,CAAC,EAAE,SAAS,WAAW,CAAC,EAAE,CAAC;AAAA,IAC5D,CAAC,QAAQ,OAAO;AAAA,EAClB;AAGA,QAAM,OAAO;AAAA,IACX,MACE,SAAS;AAAA,MAAQ,CAAC,SAAS,OACzB,QAAQ,QAAQ,IAAI,CAAC,QAAQ,QAAQ;AAAA,QACnC,GAAG;AAAA,QACH,IAAI,GAAG,OAAO,MAAM,EAAE,IAAI,EAAE;AAAA,MAC9B,EAAE;AAAA,IACJ;AAAA,IACF,CAAC,UAAU,OAAO;AAAA,EACpB;AAMA,QAAM,UAAU;AAAA,IACd,MACE,SAAS;AAAA,MAAI,CAAC,GAAG,OACf,SAAS,MAAM,GAAG,EAAE,EAAE,OAAO,CAAC,GAAG,MAAM,IAAI,EAAE,QAAQ,QAAQ,CAAC;AAAA,IAChE;AAAA,IACF,CAAC,QAAQ;AAAA,EACX;AAOA,QAAM,WACJ,SAAS,KAAK,SAAS,KAAM,gBAAgB,QAAQ,KAAK,SAAS;AACrE,QAAM,eACJ,YAAY,eAAe,IAAI,KAAK,WAAW,IAAI;AAErD,QAAM,YAAY,YAAY,MAAM;AAClC,YAAQ,KAAK;AACb,mBAAe,EAAE;AAAA,EACnB,GAAG,CAAC,CAAC;AAML,QAAM,OAAO;AAAA,IACX,CAAC,UAAkB;AACjB,UAAI,CAAC,KAAK,OAAQ;AAClB,qBAAe,CAAC,SAAS;AAEvB,YAAI,OAAO,OAAO,IAAK,QAAQ,IAAI,KAAK,IAAK;AAC7C,iBAAS,OAAO,GAAG,OAAO,KAAK,QAAQ,QAAQ,GAAG;AAChD,kBAAQ,OAAO,QAAQ,KAAK,UAAU,KAAK;AAC3C,cAAI,CAAC,KAAK,IAAI,EAAE,SAAU,QAAO;AAAA,QACnC;AACA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AAGA,QAAM,SAAS;AAAA,IACb,CAAC,WAA2B;AAC1B,UAAI,OAAO,SAAU;AACrB,cAAQ,OAAO,KAAK;AACpB,gBAAU;AACV,iBAAW,MAAM;AACjB,eAAS,SAAS,MAAM;AAAA,IAC1B;AAAA,IACA,CAAC,SAAS,WAAW,QAAQ;AAAA,EAC/B;AAGA,YAAU,MAAM;AACd,QAAI,CAAC,aAAc;AACnB,aACG,eAAe,aAAa,EAAE,GAC7B,eAAe,EAAE,OAAO,UAAU,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,CAAC;AAGjB,YAAU,MAAM;AACd,QAAI,CAAC,SAAU;AACf,UAAM,gBAAgB,CAAC,MAAoB;AACzC,UAAI,CAAC,QAAQ,SAAS,SAAS,EAAE,MAAc,EAAG,WAAU;AAAA,IAC9D;AACA,aAAS,iBAAiB,eAAe,aAAa;AACtD,WAAO,MAAM,SAAS,oBAAoB,eAAe,aAAa;AAAA,EACxE,GAAG,CAAC,UAAU,SAAS,CAAC;AAExB,QAAM,gBAAgB,CAAC,MAA4C;AACjE,gBAAY,CAAC;AACb,QAAI,EAAE,iBAAkB;AAGxB,QAAI,EAAE,YAAY,YAAa;AAE/B,YAAQ,EAAE,KAAK;AAAA,MACb,KAAK;AACH,UAAE,eAAe;AAEjB,YAAI,CAAC,UAAU;AACb,kBAAQ,IAAI;AACZ,yBAAe,KAAK,UAAU,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC;AAAA,QACnD,OAAO;AACL,eAAK,CAAC;AAAA,QACR;AACA;AAAA,MACF,KAAK;AACH,UAAE,eAAe;AACjB,YAAI,CAAC,UAAU;AACb,kBAAQ,IAAI;AACZ,yBAAe,KAAK,SAAS,CAAC;AAAA,QAChC,OAAO;AACL,eAAK,EAAE;AAAA,QACT;AACA;AAAA,MACF,KAAK;AAEH,YAAI,cAAc;AAChB,YAAE,eAAe;AACjB,iBAAO,YAAY;AAAA,QACrB,OAAO;AACL,oBAAU;AAAA,QACZ;AACA;AAAA,MACF,KAAK;AAGH,YAAI,UAAU;AACZ,YAAE,eAAe;AACjB,YAAE,gBAAgB;AAClB,oBAAU;AAAA,QACZ;AACA;AAAA,MACF,KAAK;AAEH,kBAAU;AACV;AAAA,MACF;AACE;AAAA,IACJ;AAAA,EACF;AAGA,QAAM,aAAa,CAAC,MAAyC;AAC3D,aAAS,CAAC;AACV,UAAM,OAAO,EAAE;AACf,QAAI,QAAQ,CAAC,QAAQ,SAAS,SAAS,IAAI,EAAG,WAAU;AAAA,EAC1D;AAMA,QAAM,SAAS,CAAC,WACZ,KACA,KAAK,SACH,gBAAM,KAAK,MAAM,WACjB;AAGN,QAAM,cAAc,CAAC,SAAkC;AACrD,aAAS,UAAU;AACnB,QAAI,OAAO,iBAAiB,WAAY,cAAa,IAAI;AAAA,aAChD;AACP,MAAC,aAAsD,UAAU;AAAA,EACrE;AAEA,QAAM,aAAa,CAAC,QAAoB,UACtC;AAAA,IAAC;AAAA;AAAA,MAEC;AAAA,MACA;AAAA,MACA,QAAQ,UAAU;AAAA,MAClB,QAAQ;AAAA,MACR,SAAS;AAAA;AAAA,IALJ,OAAO;AAAA,EAMd;AAGF,QAAM,MACJ,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL;AAAA,QAEA,MAAK;AAAA,QACL,WAAW,GAAG,cAAc,MAAM,cAAc;AAAA,QAEhD,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,qBAAkB;AAAA,QAClB,yBAAuB,cAAc;AAAA,QAErC;AAAA,QACA,OAAO;AAAA,QACP,UAAU,CAAC,MAAM;AACf,qBAAW,CAAC;AACZ,kBAAQ,EAAE,OAAO,KAAK;AAEtB,kBAAQ,IAAI;AACZ,yBAAe,gBAAgB,IAAI,EAAE;AAAA,QACvC;AAAA,QACA,SAAS,CAAC,MAAM;AACd,oBAAU,CAAC;AAEX,cAAI,YAAa,SAAQ,IAAI;AAAA,QAC/B;AAAA,QACA,WAAW;AAAA,QACX,QAAQ;AAAA,QACP,GAAG;AAAA;AAAA,IACN;AAAA,IAOA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,uCAAuC,aAAa;AAAA,QAClE,OAAO,WAAW,EAAE,SAAS,QAAQ,IAAI;AAAA,QACzC,aAAa,CAAC,MAAM,EAAE,eAAe;AAAA,QAErC,+BAAC,SAAI,WAAU,WACZ;AAAA,oBAAU,oBAAC,SAAI,WAAU,YAAY,kBAAO;AAAA,UAS5C,QAAQ,SACP;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,WAAU;AAAA,cAET,mBAAS,IAAI,CAAC,SAAS,OACtB;AAAA,gBAAC;AAAA;AAAA,kBAEC,MAAK;AAAA,kBACL,mBAAiB,GAAG,OAAO,MAAM,EAAE;AAAA,kBACnC,WAAU;AAAA,kBAGV;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACC,IAAI,GAAG,OAAO,MAAM,EAAE;AAAA,wBACtB,WAAU;AAAA,wBAET,kBAAQ;AAAA;AAAA,oBACX;AAAA,oBACA,oBAAC,QAAG,WAAU,aAAY,MAAK,QAC5B,kBAAQ,QAAQ;AAAA,sBAAI,CAAC,GAAG,OACvB,WAAW,KAAK,QAAQ,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAE,IAAI,EAAE;AAAA,oBACrD,GACF;AAAA;AAAA;AAAA,gBAhBK,QAAQ,SAAS;AAAA,cAiBxB,CACD;AAAA;AAAA,UACH,IAEA;AAAA,YAAC;AAAA;AAAA,cACC,IAAI;AAAA,cACJ,MAAK;AAAA,cACL,cAAY;AAAA,cACZ,WAAU;AAAA,cAET,eAAK,IAAI,UAAU;AAAA;AAAA,UACtB;AAAA,UAID,KAAK,WAAW,KAAK,gBAAgB,QACpC,oBAAC,OAAE,WAAU,2CACV,wBACH;AAAA,UAGD,UAAU,oBAAC,SAAI,WAAU,eAAe,kBAAO;AAAA,WAClD;AAAA;AAAA,IACF;AAAA,IAEC;AAAA,KACH;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MAGL,WAAW,GAAG,mCAAmC,SAAS;AAAA,MAEzD;AAAA,uBAAe,oBAAC,SAAI,WAAU,oBAAoB,eAAI,IAAS;AAAA,QAEhE,oBAAC,UAAK,WAAU,WAAU,MAAK,UAAS,aAAU,UAC/C,kBACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAGA,SAAS,KAAK;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAI,OAAO;AAAA,MACX,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAe,OAAO,YAAY;AAAA,MAElC,WAAW;AAAA,QACT;AAAA,QACA,UAAU;AAAA,QACV,OAAO,WACH,wCACA;AAAA,MACN;AAAA,MACA,SAAS,MAAM,OAAO,MAAM;AAAA,MAE5B,aAAa,MAAM;AACjB,YAAI,CAAC,OAAO,SAAU,SAAQ,KAAK;AAAA,MACrC;AAAA,MAEC;AAAA,eAAO,QACN,oBAAC,OAAE,WAAW,gBAAgB,OAAO,IAAI,IAAI,eAAY,QAAO;AAAA,QAGlE,oBAAC,UAAK,WAAU,2BACb,iBAAO,SAAS,OAAO,OAC1B;AAAA,QACC,OAAO,eACN,oBAAC,UAAK,WAAU,mCACb,iBAAO,aACV;AAAA;AAAA;AAAA,EAEJ;AAEJ;AA2CO,SAAS,eAAe;AAAA,EAC7B,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,aAAa;AAAA,EACb,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,WAAW,OAAgC,IAAI;AACrD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,gBAAgB,EAAE;AAC/D,QAAM,OAAO,UAAU,SAAY,QAAQ;AAE3C,QAAM,oBAAoB,CAAC,SAAiB;AAC1C,QAAI,UAAU,OAAW,eAAc,IAAI;AAC3C,oBAAgB,IAAI;AAAA,EACtB;AAEA,QAAM,SAAS,CAAC,SAAkC;AAChD,aAAS,UAAU;AACnB,QAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,aAC9B,IAAK,CAAC,IAA6C,UAAU;AAAA,EACxE;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL;AAAA,MACA,cAAY;AAAA,MACZ,OAAO;AAAA,MACP,eAAe;AAAA,MACf,UAAU,CAAC,WAAW;AACpB,mBAAW,MAAM;AAEjB,mBAAW,OAAO,KAAK;AAAA,MACzB;AAAA,MACA,WAAW,CAAC,MAAM;AAChB,oBAAY,CAAC;AACb,YACE,EAAE,oBACF,EAAE,QAAQ,WACV,EAAE,YAAY;AAEd;AAEF,YAAI,EAAE,cAAc,aAAa,uBAAuB,EAAG;AAC3D,mBAAW,EAAE,cAAc,KAAK;AAAA,MAClC;AAAA,MAEA,gBAAgB,GAAG,aAAa,SAAS,cAAc;AAAA,MACvD;AAAA;AAAA;AAAA,QAGE,qBAAC,SAAI,WAAU,sCACZ;AAAA,uBAAa,KAAK,SAAS,KAC1B;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS,MAAM;AACb,kCAAkB,EAAE;AACpB,0BAAU;AACV,yBAAS,SAAS,MAAM;AAAA,cAC1B;AAAA,cAEA;AAAA,oCAAC,UAAK,WAAU,WAAW,sBAAW;AAAA,gBACtC,oBAAC,OAAE,WAAU,oBAAmB,eAAY,QAAO;AAAA;AAAA;AAAA,UACrD;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,WAAU;AAAA,cACT,GAAG;AAAA,cACJ,SAAS,CAAC,MAAM;AACd,6BAAa,UAAU,CAAC;AACxB,2BAAW,IAAI;AAAA,cACjB;AAAA,cAEA;AAAA,oCAAC,UAAK,WAAU,WAAW,uBAAY;AAAA,gBACvC,oBAAC,OAAE,WAAU,oBAAmB,eAAY,QAAO;AAAA;AAAA;AAAA,UACrD;AAAA,WACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/context-menu/index.d.ts

@@ -0,0 +1,94 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type KrdsIcon, type KrdsSize } from '../lib/krds';
+/**
+ * 상황 메뉴(더보기 · 우클릭) — KRDS 에 없는 보충 부품이다.
+ *
+ * 모양은 킷 드롭다운(`krds-drop-wrap`), 동작은 WAI-ARIA APG 의 Menu Button 패턴이다.
+ * 표 한 칸에 늘어선 행 동작을 하나로 접을 때 쓴다 — 「삭제」는 `danger` 로 표시하고
+ * 구분선(`{ separator: true }`)으로 나머지와 떼어 놓는다.
+ * **동작 목록에만 쓴다.** 메뉴는 Tab 을 가로막으므로 언어 전환·화면 크기처럼 Tab 으로 닿아야
+ * 하는 목록에는 `ui/resize` 의 드롭다운을 쓴다. 하위 메뉴(2단)는 지원하지 않는다.
+ *
+ * @example
+ * <ContextMenu
+ *   label={`${row.name} 행 더보기`}
+ *   items={[
+ *     { id: 'edit', label: '수정', icon: 'setting', onSelect: () => edit(row) },
+ *     { separator: true },
+ *     { id: 'delete', label: '삭제', icon: 'delete', danger: true, onSelect: () => remove(row) },
+ *   ]}
+ * />
+ *
+ * 자세히: docs/krds/09-부품-노트.md#컨텍스트메뉴
+ */
+/** 실행 항목. `href` 가 있으면 링크(`<a>`), 없으면 단추(`<button>`)로 그린다. */
+export type ContextMenuAction = {
+    id: string;
+    label: ReactNode;
+    /** 글자 탐색에 쓸 문자열. `label` 이 문자열이면 필요 없다. */
+    text?: string;
+    /** 킷 아이콘 이름(`ico-` 뺀 것). 예: `delete` · `setting` · `download` */
+    icon?: KrdsIcon;
+    /** 이동이면 링크로 그린다. 동작에는 주지 않는다. */
+    href?: string;
+    target?: string;
+    /** 초점은 받되 실행되지 않는다(`aria-disabled`). */
+    disabled?: boolean;
+    /** 되돌릴 수 없는 동작(삭제 등). 글자를 위험색으로 물들인다. */
+    danger?: boolean;
+    /** 현재 상태 표시(킷 `.active`). 정렬 기준처럼 「지금 이것」을 보일 때. */
+    active?: boolean;
+    onSelect?: (id: string) => void;
+    separator?: never;
+};
+/** 구분선. 「삭제」처럼 되돌릴 수 없는 항목을 나머지와 떼어 놓는다. */
+export type ContextMenuSeparatorItem = {
+    separator: true;
+    /** 목록 key 용. 없으면 순번으로 만든다. */
+    id?: string;
+};
+export type ContextMenuItem = ContextMenuAction | ContextMenuSeparatorItem;
+/** 킷의 드롭다운 정렬 클래스(`.drop-left` · `.drop-right`). 생략하면 가운데(킷 기본). */
+export type ContextMenuAlign = 'left' | 'center' | 'right';
+export type ContextMenuProps = Omit<ComponentPropsWithRef<'div'>, 'onSelect'> & {
+    items: ReadonlyArray<ContextMenuItem>;
+    /** 단추의 이름(`sr-only`). 표 안에서는 어느 행인지까지 담는다 — 「홍길동 행 더보기」. */
+    label: string;
+    /** 글자가 있는 단추로 그린다. 주면 아이콘 대신 「글자 + ico-toggle」이 된다. */
+    triggerLabel?: ReactNode;
+    /** 아이콘만인 단추의 아이콘. 기본 `more`(킷 `ico_more.svg`). */
+    icon?: KrdsIcon;
+    /** 단추 크기. 기본 small(40px) — 표 안 행 동작 자리에 맞춘 값이다. */
+    size?: KrdsSize;
+    /** 메뉴가 펼쳐지는 쪽. 기본 `right`(오른쪽 끝 열에 놓이는 자리라 왼쪽으로 편다). */
+    align?: ContextMenuAlign;
+    /** 항목별 `onSelect` 와 별개로, 무엇을 골랐든 한 번 부른다. */
+    onSelect?: (id: string) => void;
+    onOpenChange?: (open: boolean) => void;
+    /** 여는 단추에 붙일 클래스. */
+    triggerClassName?: string;
+};
+/** 더보기 메뉴 — 표 행 동작·카드 우상단처럼 「이 대상에 대한 동작 묶음」을 접는다. */
+export declare function ContextMenu({ items, label, triggerLabel, icon, size, align, onSelect, onOpenChange, triggerClassName, className, ref, ...rest }: ContextMenuProps): import("react").JSX.Element;
+export type ContextMenuAreaProps = Omit<ComponentPropsWithRef<'div'>, 'onSelect'> & {
+    items: ReadonlyArray<ContextMenuItem>;
+    /** 메뉴 이름. 여는 단추가 없으니 여기서 준다 — 「목록 항목 동작」처럼. */
+    label: string;
+    onSelect?: (id: string) => void;
+    onOpenChange?: (open: boolean) => void;
+    /** 우클릭을 가로채지 않는다(브라우저 기본 메뉴가 뜬다). */
+    disabled?: boolean;
+};
+/**
+ * 우클릭 메뉴 — 영역 안에서 오른쪽 단추(또는 Shift+F10 · ContextMenu 키)로 연다.
+ *
+ * **브라우저 기본 메뉴를 가린다.** 「새 탭에서 열기」를 빼앗으므로 꼭 필요한 곳에만 쓰고,
+ * 같은 동작을 여는 눈에 보이는 단추(`ContextMenu`)를 함께 둔다.
+ *
+ * @example
+ * <ContextMenuArea label="목록 항목 동작" items={rowActions}>
+ *   <ul>…</ul>
+ * </ContextMenuArea>
+ */
+export declare function ContextMenuArea({ items, label, onSelect, onOpenChange, disabled, className, children, ref, ...rest }: ContextMenuAreaProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/context-menu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context-menu/index.tsx"],"names":[],"mappings":"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"}