sellmate-design-system-react 0.1.10 → 0.2.0

package/dist/components/SSelect/SSelect.js

@@ -1,6 +1,5 @@
 "use client";
-import { createContext, forwardRef, useState, useRef, useImperativeHandle, useMemo, useContext, useEffect } from 'react';
-import * as Ariakit from '@ariakit/react';
+import { createContext, forwardRef, useState, useRef, useImperativeHandle, useMemo, useEffect, useContext } from 'react';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -17,10 +16,110 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 var PortalContainerContext = createContext(null);
+var InsideModalContext = createContext(false);
 PortalContainerContext.Provider;
+InsideModalContext.Provider;
 function usePortalContainer() {
   return useContext(PortalContainerContext) ?? void 0;
 }
+function useInsideModal() {
+  return useContext(InsideModalContext);
+}
+function runRules(value, rules) {
+  if (!rules || rules.length === 0) return "";
+  for (const rule of rules) {
+    const result = rule(value ?? "");
+    if (result !== true) return typeof result === "string" ? result : "\uC720\uD6A8\uD558\uC9C0 \uC54A\uC740 \uAC12\uC785\uB2C8\uB2E4.";
+  }
+  return "";
+}
+var FormContext = createContext(null);
+function useFormContext() {
+  return useContext(FormContext);
+}
+function useFormField(field) {
+  const ctx = useFormContext();
+  const cbRef = useRef(field);
+  cbRef.current = field;
+  const name = field.name ?? "";
+  useEffect(() => {
+    if (!ctx) return;
+    return ctx.register({
+      name,
+      validate: () => cbRef.current.validate(),
+      resetValidation: () => cbRef.current.resetValidation()
+    });
+  }, [ctx, name]);
+}
+
+// src/lib/sanitize-inline-html.ts
+var ALLOWED_INLINE_TAGS = /* @__PURE__ */ new Set(["A", "B", "STRONG", "I", "EM", "BR", "SPAN"]);
+var ALLOWED_ATTRS_BY_TAG = {
+  A: /* @__PURE__ */ new Set(["href", "target", "rel", "class"])
+};
+var COMMON_ALLOWED_ATTRS = /* @__PURE__ */ new Set(["class"]);
+var SAFE_HREF_RE = /^(https?:|mailto:|tel:|\/|#|\.)/i;
+var DROP_CONTENT_TAGS = /* @__PURE__ */ new Set([
+  "SCRIPT",
+  "STYLE",
+  "IFRAME",
+  "OBJECT",
+  "EMBED",
+  "META",
+  "LINK",
+  "BASE",
+  "NOSCRIPT",
+  // SVG/MATH 는 foreign-content 파싱 모드로 전환되어 재직렬화 시 다른 트리로
+  // 재파싱될 수 있다(mXSS 벡터). 인라인 라벨에 필요 없으므로 통째로 제거한다.
+  "SVG",
+  "MATH",
+  "TEMPLATE"
+]);
+var escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+var sanitizeNode = (node) => {
+  if (node.nodeType === Node.COMMENT_NODE) {
+    node.remove();
+    return;
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) return;
+  const element = node;
+  const tagName = element.tagName;
+  if (DROP_CONTENT_TAGS.has(tagName)) {
+    element.remove();
+    return;
+  }
+  Array.from(element.childNodes).forEach((child) => sanitizeNode(child));
+  if (ALLOWED_INLINE_TAGS.has(tagName)) {
+    if (element.hasAttribute("className")) {
+      const val = element.getAttribute("className");
+      element.removeAttribute("className");
+      if (!element.hasAttribute("class")) element.setAttribute("class", val);
+    }
+    const allowedAttrs = ALLOWED_ATTRS_BY_TAG[tagName] ?? COMMON_ALLOWED_ATTRS;
+    Array.from(element.attributes).forEach((attr) => {
+      if (!allowedAttrs.has(attr.name)) element.removeAttribute(attr.name);
+    });
+    if (tagName === "A") {
+      const href = element.getAttribute("href");
+      if (href !== null && href !== "" && !SAFE_HREF_RE.test(href)) element.removeAttribute("href");
+      if (element.hasAttribute("target")) {
+        element.setAttribute("rel", "noopener noreferrer");
+      }
+    }
+    return;
+  }
+  const parent = element.parentNode;
+  if (parent == null) return;
+  while (element.firstChild) parent.insertBefore(element.firstChild, element);
+  parent.removeChild(element);
+};
+var sanitizeInlineHtml = (value) => {
+  if (typeof document === "undefined") return escapeHtml(value);
+  const template = document.createElement("template");
+  template.innerHTML = value;
+  Array.from(template.content.childNodes).forEach((child) => sanitizeNode(child));
+  return template.innerHTML;
+};
 
 // src/lib/color.ts
 var COLOR_KEYS = [
@@ -2973,6 +3072,8 @@ function SGhostButton({
   tooltipText,
   disabled = false,
   onClick,
+  anchorClassName,
+  anchorStyle,
   className,
   style
 }) {
@@ -2995,6 +3096,8 @@ function SGhostButton({
   };
   const s = SIZE[size];
   const contentColor = disabled ? intent === "inverse" ? "var(--cmp-ghostButton-inverse-disabled)" : "var(--cmp-ghostButton-icon-disabled)" : `var(--cmp-ghostButton-${intent}-content)`;
+  const text = (tooltipText ?? "").trim();
+  const hasTooltip = text !== "";
   const btn = /* @__PURE__ */ jsxs(
     "button",
     {
@@ -3035,13 +3138,13 @@ function SGhostButton({
       ]
     }
   );
-  const text = (tooltipText ?? "").trim();
-  if (text === "") return btn;
+  if (!hasTooltip) return btn;
   return /* @__PURE__ */ jsxs(RPopover2.Root, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(RPopover2.Anchor, { asChild: true, children: /* @__PURE__ */ jsx(
       "span",
       {
-        className: "inline-flex",
+        className: cn("inline-flex", anchorClassName),
+        style: anchorStyle,
         onMouseEnter: openNow,
         onMouseLeave: startHide,
         onFocus: openNow,
@@ -3193,32 +3296,6 @@ var STooltip = forwardRef(function STooltip2({
   ] });
 });
 STooltip.displayName = "STooltip";
-function runRules(value, rules) {
-  if (!rules || rules.length === 0) return "";
-  for (const rule of rules) {
-    const result = rule(value ?? "");
-    if (result !== true) return typeof result === "string" ? result : "\uC720\uD6A8\uD558\uC9C0 \uC54A\uC740 \uAC12\uC785\uB2C8\uB2E4.";
-  }
-  return "";
-}
-var FormContext = createContext(null);
-function useFormContext() {
-  return useContext(FormContext);
-}
-function useFormField(field) {
-  const ctx = useFormContext();
-  const cbRef = useRef(field);
-  cbRef.current = field;
-  const name = field.name ?? "";
-  useEffect(() => {
-    if (!ctx) return;
-    return ctx.register({
-      name,
-      validate: () => cbRef.current.validate(),
-      resetValidation: () => cbRef.current.resetValidation()
-    });
-  }, [ctx, name]);
-}
 var FIELD_SIZE = {
   sm: { height: 28, radius: 4, fieldGap: 12, labelGap: 6, fontSize: 12, lineHeight: 20, icon: 16 },
   md: { height: 36, radius: 6, fieldGap: 16, labelGap: 8, fontSize: 14, lineHeight: 24, icon: 16 }
@@ -3233,6 +3310,7 @@ var SField = forwardRef(function SField2({
   name,
   label = "",
   icon,
+  iconColor,
   labelTooltip = "",
   labelTooltipProps,
   labelWidth,
@@ -3310,7 +3388,15 @@ var SField = forwardRef(function SField2({
               lineHeight: `${s.lineHeight}px`
             },
             children: [
-              icon && /* @__PURE__ */ jsx(SIcon, { name: icon, size: s.icon, style: { marginRight: s.labelGap } }),
+              icon && /* @__PURE__ */ jsx(
+                SIcon,
+                {
+                  name: icon,
+                  size: s.icon,
+                  color: iconColor,
+                  style: { marginRight: s.labelGap }
+                }
+              ),
               /* @__PURE__ */ jsx("span", { className: "min-w-0 overflow-hidden text-ellipsis whitespace-nowrap", children: label }),
               (labelTooltip !== "" || labelTooltipProps) && /* @__PURE__ */ jsx("span", { className: "shrink-0", style: { marginLeft: s.labelGap }, children: /* @__PURE__ */ jsx(
                 STooltip,
@@ -3360,7 +3446,7 @@ var SField = forwardRef(function SField2({
                       borderBottomLeftRadius: s.radius - 1
                     },
                     children: [
-                      icon && !label && /* @__PURE__ */ jsx(SIcon, { name: icon, size: s.icon }),
+                      icon && !label && /* @__PURE__ */ jsx(SIcon, { name: icon, size: s.icon, color: iconColor }),
                       effectiveAddonLabel
                     ]
                   }
@@ -3375,6 +3461,77 @@ var SField = forwardRef(function SField2({
     }
   );
 });
+function SPortal({
+  open,
+  onClose,
+  onOpenChange,
+  anchorRef,
+  placement = "bottom",
+  align = "start",
+  offset = 4,
+  alignOffset = 0,
+  fit = false,
+  maxHeight,
+  autoClose = false,
+  persistent = false,
+  viewportPadding = 0,
+  onOpenAutoFocus,
+  onCloseAutoFocus,
+  children,
+  className,
+  style,
+  ariaLabel
+}) {
+  const portalContainer = usePortalContainer();
+  return /* @__PURE__ */ jsxs(
+    RPopover2.Root,
+    {
+      open,
+      onOpenChange: (next) => {
+        onOpenChange?.(next);
+        if (!next) onClose?.();
+      },
+      children: [
+        /* @__PURE__ */ jsx(RPopover2.Anchor, { virtualRef: anchorRef }),
+        /* @__PURE__ */ jsx(RPopover2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(
+          RPopover2.Content,
+          {
+            side: placement,
+            align,
+            sideOffset: offset,
+            alignOffset,
+            collisionPadding: viewportPadding,
+            "aria-label": ariaLabel,
+            onPointerDownOutside: (e) => {
+              if (persistent || anchorRef.current?.contains(e.target)) {
+                e.preventDefault();
+              }
+            },
+            onFocusOutside: (e) => {
+              if (persistent || anchorRef.current?.contains(e.target)) {
+                e.preventDefault();
+              }
+            },
+            onEscapeKeyDown: persistent ? (e) => e.preventDefault() : void 0,
+            onOpenAutoFocus,
+            onCloseAutoFocus,
+            onClick: autoClose ? () => onClose?.() : void 0,
+            className: cn(
+              "z-50 overflow-hidden rounded-(--cmp-listBox-radius) bg-(--cmp-listBox-bg) shadow-normal-sm",
+              maxHeight != null && "overflow-y-auto",
+              fit && "min-w-(--radix-popover-trigger-width)",
+              FLOATING_SLIDE_ANIM,
+              className
+            ),
+            style: { maxHeight, ...style },
+            children
+          }
+        ) })
+      ]
+    }
+  );
+}
+SPortal.displayName = "SPortal";
 
 // src/components/SSelect/select.config.ts
 function flattenOptions(options, depth = 1) {
@@ -3409,75 +3566,6 @@ function flattenOptions(options, depth = 1) {
 var selectableOptions = (flat) => flat.filter((o) => !o.isGroup && !o.disabled);
 var isHtmlLabel = (label) => /<[a-z][\s\S]*>/i.test(label);
 var extractText = (html) => html.replace(/<[^>]*>/g, "");
-
-// src/lib/sanitize-inline-html.ts
-var ALLOWED_INLINE_TAGS = /* @__PURE__ */ new Set(["A", "B", "STRONG", "I", "EM", "BR", "SPAN"]);
-var ALLOWED_ATTRS_BY_TAG = {
-  A: /* @__PURE__ */ new Set(["href", "target", "rel", "class"])
-};
-var COMMON_ALLOWED_ATTRS = /* @__PURE__ */ new Set(["class"]);
-var SAFE_HREF_RE = /^(https?:|mailto:|tel:|\/|#|\.)/i;
-var DROP_CONTENT_TAGS = /* @__PURE__ */ new Set([
-  "SCRIPT",
-  "STYLE",
-  "IFRAME",
-  "OBJECT",
-  "EMBED",
-  "META",
-  "LINK",
-  "BASE",
-  "NOSCRIPT",
-  // SVG/MATH 는 foreign-content 파싱 모드로 전환되어 재직렬화 시 다른 트리로
-  // 재파싱될 수 있다(mXSS 벡터). 인라인 라벨에 필요 없으므로 통째로 제거한다.
-  "SVG",
-  "MATH",
-  "TEMPLATE"
-]);
-var escapeHtml = (value) => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-var sanitizeNode = (node) => {
-  if (node.nodeType === Node.COMMENT_NODE) {
-    node.remove();
-    return;
-  }
-  if (node.nodeType !== Node.ELEMENT_NODE) return;
-  const element = node;
-  const tagName = element.tagName;
-  if (DROP_CONTENT_TAGS.has(tagName)) {
-    element.remove();
-    return;
-  }
-  Array.from(element.childNodes).forEach((child) => sanitizeNode(child));
-  if (ALLOWED_INLINE_TAGS.has(tagName)) {
-    if (element.hasAttribute("className")) {
-      const val = element.getAttribute("className");
-      element.removeAttribute("className");
-      if (!element.hasAttribute("class")) element.setAttribute("class", val);
-    }
-    const allowedAttrs = ALLOWED_ATTRS_BY_TAG[tagName] ?? COMMON_ALLOWED_ATTRS;
-    Array.from(element.attributes).forEach((attr) => {
-      if (!allowedAttrs.has(attr.name)) element.removeAttribute(attr.name);
-    });
-    if (tagName === "A") {
-      const href = element.getAttribute("href");
-      if (href !== null && href !== "" && !SAFE_HREF_RE.test(href)) element.removeAttribute("href");
-      if (element.hasAttribute("target")) {
-        element.setAttribute("rel", "noopener noreferrer");
-      }
-    }
-    return;
-  }
-  const parent = element.parentNode;
-  if (parent == null) return;
-  while (element.firstChild) parent.insertBefore(element.firstChild, element);
-  parent.removeChild(element);
-};
-var sanitizeInlineHtml = (value) => {
-  if (typeof document === "undefined") return escapeHtml(value);
-  const template = document.createElement("template");
-  template.innerHTML = value;
-  Array.from(template.content.childNodes).forEach((child) => sanitizeNode(child));
-  return template.innerHTML;
-};
 var SEARCH_THRESHOLD = 11;
 var SSelect = forwardRef(function SSelect2({
   value,
@@ -3501,6 +3589,7 @@ var SSelect = forwardRef(function SSelect2({
   label,
   labelWidth,
   icon,
+  iconColor,
   labelTooltip,
   addonLabel,
   addonAlign,
@@ -3512,18 +3601,15 @@ var SSelect = forwardRef(function SSelect2({
 }, ref) {
   const multi = type === "multi" || type === "multi_depth";
   const portalContainer = usePortalContainer();
+  const insideModal = useInsideModal();
   const [search, setSearch] = useState("");
   const [ruleError, setRuleError] = useState("");
   const [open, setOpen] = useState(false);
+  const [pendingOpen, setPendingOpen] = useState(false);
+  const [focusedIndex, setFocusedIndex] = useState(-1);
   const triggerRef = useRef(null);
-  useImperativeHandle(
-    ref,
-    () => ({
-      focus: () => triggerRef.current?.focus(),
-      open: () => setOpen(true)
-    }),
-    []
-  );
+  const searchInputRef = useRef(null);
+  const listRef = useRef(null);
   const flat = useMemo(() => flattenOptions(options), [options]);
   const selectable = useMemo(() => selectableOptions(flat), [flat]);
   const hasLeaf = useMemo(() => flat.some((o) => !o.isGroup), [flat]);
@@ -3541,6 +3627,46 @@ var SSelect = forwardRef(function SSelect2({
     const arr = Array.isArray(value) ? value : [value];
     return arr.map((v) => v != null && typeof v === "object" ? v.value : v).filter((v) => v != null && v !== "").map(String);
   }, [value]);
+  const selectedRef = useRef(selected);
+  selectedRef.current = selected;
+  const emit = (next) => {
+    if (!onValueChange) return;
+    const mapped = next.map(
+      (v) => emitValue ? rawByValue.get(v) ?? v : optionByValue.get(v) ?? { value: v, label: v }
+    );
+    onValueChange(multi ? mapped : mapped[0] ?? (emitValue ? "" : null));
+  };
+  const commitOpen = (next) => {
+    setOpen(next);
+    onOpenChange?.(next);
+    if (!next) {
+      setPendingOpen(false);
+      setSearch("");
+      if (rules && rules.length > 0) {
+        setRuleError(runRules(multi ? selectedRef.current : selectedRef.current[0] ?? "", rules));
+      }
+    }
+  };
+  const requestOpen = (next) => {
+    if (next && insideModal && portalContainer == null) {
+      setPendingOpen(true);
+      return;
+    }
+    commitOpen(next);
+  };
+  useEffect(() => {
+    if (!insideModal || portalContainer == null || !pendingOpen) return;
+    setPendingOpen(false);
+    commitOpen(true);
+  }, [insideModal, pendingOpen, portalContainer]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      focus: () => triggerRef.current?.focus(),
+      open: () => requestOpen(true)
+    }),
+    [insideModal, portalContainer]
+  );
   useFormField({
     name,
     validate: () => {
@@ -3550,13 +3676,6 @@ var SSelect = forwardRef(function SSelect2({
     },
     resetValidation: () => setRuleError("")
   });
-  const emit = (next) => {
-    if (!onValueChange) return;
-    const mapped = next.map(
-      (v) => emitValue ? rawByValue.get(v) ?? v : optionByValue.get(v) ?? { value: v, label: v }
-    );
-    onValueChange(multi ? mapped : mapped[0] ?? (emitValue ? "" : null));
-  };
   const filtered = useMemo(() => {
     if (!showSearch || search.trim() === "") return flat;
     const q = search.trim().toLowerCase();
@@ -3567,6 +3686,16 @@ var SSelect = forwardRef(function SSelect2({
   const allValues = selectable.map((o) => o.value);
   const allSelected = allValues.length > 0 && allValues.every((v) => selected.includes(v));
   const hasItems = filtered.some((o) => !o.isGroup);
+  const navigableItems = useMemo(() => {
+    const items = [];
+    if (multi && useSelectAll && allValues.length > 0) {
+      items.push({ value: "__select_all__", isSelectAll: true });
+    }
+    filtered.forEach((o) => {
+      if (!o.isGroup && !o.disabled) items.push({ value: o.value });
+    });
+    return items;
+  }, [allValues.length, filtered, multi, useSelectAll]);
   const triggerText = (() => {
     if (selected.length === 0) return placeholder;
     if (multi) {
@@ -3576,26 +3705,119 @@ var SSelect = forwardRef(function SSelect2({
     return labelByValue.get(selected[0]) ?? selected[0];
   })();
   const isPlaceholder = selected.length === 0;
-  const selectStore = /* @__PURE__ */ jsxs(
-    Ariakit.SelectProvider,
+  const handleSelect = (nextValue) => {
+    if (multi) {
+      const next = selected.includes(nextValue) ? selected.filter((v) => v !== nextValue) : [...selected, nextValue];
+      emit(next);
+      return;
+    }
+    emit([nextValue]);
+    commitOpen(false);
+  };
+  const handleSelectAll = () => {
+    emit(allSelected ? [] : allValues);
+  };
+  useEffect(() => {
+    if (!open) {
+      setFocusedIndex(-1);
+      return;
+    }
+    setFocusedIndex(navigableItems.length > 0 ? 0 : -1);
+  }, [open, navigableItems.length]);
+  useEffect(() => {
+    if (!open) return;
+    setFocusedIndex(navigableItems.length > 0 ? 0 : -1);
+  }, [search, open, navigableItems.length]);
+  useEffect(() => {
+    if (!open || focusedIndex < 0) return;
+    const list = listRef.current;
+    const focusedEl = list?.querySelector('[data-select-focused="true"]');
+    if (!list || !focusedEl) return;
+    const listRect = list.getBoundingClientRect();
+    const itemRect = focusedEl.getBoundingClientRect();
+    if (itemRect.top < listRect.top) {
+      list.scrollTop += itemRect.top - listRect.top;
+    } else if (itemRect.bottom > listRect.bottom) {
+      list.scrollTop += itemRect.bottom - listRect.bottom;
+    }
+  }, [focusedIndex, open]);
+  const moveFocusedIndex = (direction) => {
+    if (!open || navigableItems.length === 0) return;
+    setFocusedIndex((current) => {
+      if (direction === "next") {
+        return current < 0 ? 0 : (current + 1) % navigableItems.length;
+      }
+      return current <= 0 ? navigableItems.length - 1 : current - 1;
+    });
+  };
+  const selectFocusedItem = () => {
+    if (focusedIndex < 0 || focusedIndex >= navigableItems.length) return;
+    const focused = navigableItems[focusedIndex];
+    if (focused.isSelectAll) {
+      handleSelectAll();
+      return;
+    }
+    handleSelect(focused.value);
+  };
+  const handleKeyDown = (event) => {
+    if (!open) {
+      if ((event.key === "ArrowDown" || event.key === "ArrowUp") && !effectiveDisabled) {
+        event.preventDefault();
+        requestOpen(true);
+      }
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      moveFocusedIndex("next");
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      moveFocusedIndex("prev");
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      selectFocusedItem();
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      commitOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    SField,
     {
-      animated: portalContainer == null ? 150 : false,
-      value: multi ? selected : selected[0] ?? "",
-      setValue: (v) => emit(Array.isArray(v) ? v : v === "" ? [] : [v]),
-      open,
-      setOpen: (o) => {
-        setOpen(o);
-        onOpenChange?.(o);
-        if (!o && rules && rules.length > 0) {
-          setRuleError(runRules(multi ? selected : selected[0] ?? "", rules));
-        }
-      },
+      label,
+      labelWidth,
+      icon,
+      iconColor,
+      labelTooltip,
+      labelTooltipProps,
+      addonLabel,
+      addonAlign,
+      hint,
+      error: error || ruleError !== "",
+      status: rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0,
+      errorMessage: ruleError !== "" ? ruleError : errorMessage,
+      disabled: effectiveDisabled,
+      width,
+      className,
+      style,
       children: [
+        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selected.join(",") }),
         /* @__PURE__ */ jsxs(
-          Ariakit.Select,
+          "button",
           {
             ref: triggerRef,
+            type: "button",
             disabled: effectiveDisabled,
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            onClick: () => requestOpen(!open),
+            onKeyDown: handleKeyDown,
             className: "flex h-full w-full cursor-pointer items-center justify-between gap-[8px] bg-transparent px-[12px] text-left text-[12px] leading-[20px] outline-none disabled:cursor-not-allowed",
             style: {
               color: effectiveDisabled ? "var(--cmp-select-text-disabled)" : isPlaceholder ? "var(--cmp-select-icon-default)" : "var(--cmp-select-text-default)"
@@ -3620,178 +3842,237 @@ var SSelect = forwardRef(function SSelect2({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(
-          Ariakit.SelectPopover,
+        /* @__PURE__ */ jsx(
+          SPortal,
           {
-            portal: true,
-            portalElement: portalContainer,
-            gutter: 4,
-            sameWidth: !dropdownWidth,
-            className: "z-50 overflow-auto rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)] data-[enter]:animate-floating-in-bottom data-[leave]:animate-floating-out-bottom",
+            open,
+            onClose: () => commitOpen(false),
+            onOpenChange: (next) => {
+              if (next) requestOpen(true);
+            },
+            anchorRef: triggerRef,
+            placement: "bottom",
+            align: "start",
+            offset: 4,
+            fit: !dropdownWidth,
+            onOpenAutoFocus: (event) => {
+              if (!showSearch) {
+                event.preventDefault();
+                return;
+              }
+              event.preventDefault();
+              requestAnimationFrame(() => searchInputRef.current?.focus());
+            },
+            onCloseAutoFocus: (event) => {
+              event.preventDefault();
+              triggerRef.current?.focus();
+            },
+            className: "rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
             style: {
-              maxHeight: dropdownHeight,
               ...dropdownWidth ? { width: dropdownWidth } : {},
               maxWidth: maxDropdownWidth
             },
-            children: [
-              showSearch && // 원본 sd-select-list-item-search: sticky + 검색 아이콘 + 테두리 input + focus-within + clear
-              /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-[1] bg-[var(--cmp-listBox-bg)] px-[8px] py-[4px]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[6px] rounded-[4px] border border-solid border-[color:var(--color-grey-45)] bg-white px-[8px] py-[4px] focus-within:border-[color:var(--sys-color-field-border-focus)]", children: [
-                /* @__PURE__ */ jsx(SIcon, { name: "search", size: 16, color: "var(--color-grey-70)", className: "shrink-0" }),
-                /* @__PURE__ */ jsx(
-                  Ariakit.Combobox,
-                  {
-                    autoSelect: true,
-                    placeholder: "\uAC80\uC0C9",
-                    className: "min-w-0 flex-1 border-none bg-transparent text-[12px] leading-[20px] text-[color:var(--cmp-select-text-default)] outline-none placeholder:text-[color:var(--color-grey-55)]"
-                  }
-                ),
-                search !== "" && /* @__PURE__ */ jsx(
-                  SGhostButton,
-                  {
-                    icon: "close",
-                    size: "xxs",
-                    intent: "default",
-                    ariaLabel: "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30",
-                    onClick: () => setSearch(""),
-                    className: "shrink-0"
-                  }
-                )
-              ] }) }),
-              multi && useSelectAll && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  className: "flex w-full items-center px-[12px] py-[4px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-default)] hover:bg-[var(--cmp-listItem-bg-hover)] hover:text-[color:var(--cmp-listItem-content-hover)]",
-                  onClick: () => emit(allSelected ? [] : allValues),
-                  children: allSelectedLabel
-                }
-              ),
-              hasItems ? /* @__PURE__ */ jsx(ItemList, { items: filtered, multi, selected, useSearch: showSearch }) : (
-                // 원본 sd-select-listbox__empty (표시할 항목이 없을 때)
-                /* @__PURE__ */ jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
-              )
-            ]
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: listRef,
+                className: "overflow-auto [scrollbar-width:auto] [&::-webkit-scrollbar]:w-[8px] [&::-webkit-scrollbar]:bg-[var(--color-grey-25)] [&::-webkit-scrollbar:horizontal]:h-[8px] [&::-webkit-scrollbar-thumb]:rounded-[4px] [&::-webkit-scrollbar-thumb]:bg-[var(--color-grey-45)] [&::-webkit-scrollbar-track]:bg-[var(--color-grey-25)]",
+                style: { maxHeight: dropdownHeight },
+                onMouseLeave: () => setFocusedIndex(-1),
+                children: [
+                  showSearch && /* @__PURE__ */ jsx("div", { className: "sticky top-0 z-[1] bg-[var(--cmp-listBox-bg)] px-[8px] py-[4px]", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[6px] rounded-[4px] border border-solid border-[color:var(--color-grey-45)] bg-white px-[8px] py-[4px] focus-within:border-[color:var(--sys-color-field-border-focus)]", children: [
+                    /* @__PURE__ */ jsx(SIcon, { name: "search", size: 16, color: "var(--color-grey-70)", className: "shrink-0" }),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        ref: searchInputRef,
+                        value: search,
+                        onChange: (e) => setSearch(e.target.value),
+                        onKeyDown: handleKeyDown,
+                        placeholder: "\uAC80\uC0C9",
+                        className: "min-w-0 flex-1 border-none bg-transparent text-[12px] leading-[20px] text-[color:var(--cmp-select-text-default)] outline-none placeholder:text-[color:var(--color-grey-55)]"
+                      }
+                    ),
+                    search !== "" && /* @__PURE__ */ jsx(
+                      SGhostButton,
+                      {
+                        icon: "close",
+                        size: "xxs",
+                        intent: "default",
+                        ariaLabel: "\uAC80\uC0C9\uC5B4 \uC9C0\uC6B0\uAE30",
+                        onClick: () => setSearch(""),
+                        className: "shrink-0"
+                      }
+                    )
+                  ] }) }),
+                  hasItems ? /* @__PURE__ */ jsx(
+                    ItemList,
+                    {
+                      items: filtered,
+                      multi,
+                      selected,
+                      focusedValue: navigableItems[focusedIndex]?.isSelectAll ? "__select_all__" : navigableItems[focusedIndex]?.value,
+                      showSelectAll: multi && useSelectAll && allValues.length > 0,
+                      selectAllLabel: allSelectedLabel,
+                      selectAllSelected: allSelected,
+                      onSelectAll: handleSelectAll,
+                      onSelect: handleSelect,
+                      onHoverValue: (value2) => {
+                        if (value2 == null) {
+                          setFocusedIndex(-1);
+                          return;
+                        }
+                        const index = navigableItems.findIndex(
+                          (item) => item.isSelectAll ? value2 === "__select_all__" : item.value === value2
+                        );
+                        if (index >= 0) setFocusedIndex(index);
+                      }
+                    }
+                  ) : /* @__PURE__ */ jsx("div", { className: "px-[12px] py-[12px] text-left text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-disabled)]", children: "\uD45C\uC2DC\uD560 \uD56D\uBAA9\uC774 \uC5C6\uC2B5\uB2C8\uB2E4." })
+                ]
+              }
+            )
           }
         )
       ]
     }
   );
-  const control = showSearch ? /* @__PURE__ */ jsx(Ariakit.ComboboxProvider, { value: search, setValue: setSearch, resetValueOnHide: true, children: selectStore }) : selectStore;
-  return /* @__PURE__ */ jsxs(
-    SField,
-    {
-      label,
-      labelWidth,
-      icon,
-      labelTooltip,
-      labelTooltipProps,
-      addonLabel,
-      addonAlign,
-      hint,
-      error: error || ruleError !== "",
-      status: rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0,
-      errorMessage: ruleError !== "" ? ruleError : errorMessage,
-      disabled: effectiveDisabled,
-      width,
-      className,
-      style,
-      children: [
-        name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selected.join(",") }),
-        control
-      ]
-    }
-  );
 });
 SSelect.displayName = "SSelect";
 function ItemList({
   items,
   multi,
   selected,
-  useSearch
+  focusedValue,
+  showSelectAll,
+  selectAllLabel,
+  selectAllSelected,
+  onSelectAll,
+  onSelect,
+  onHoverValue
 }) {
   const itemBase = cn(
-    // group: 체크박스 inverse(group-data-[active-item])를 위해 필요
-    "group flex cursor-pointer select-none items-center gap-[8px] text-[12px] leading-[20px] outline-none",
+    "group flex w-full cursor-pointer select-none items-center gap-[8px] border-none bg-transparent text-left text-[12px] leading-[20px] outline-none",
     "text-[color:var(--cmp-listItem-content-default)]",
-    // Ariakit은 disabled 항목에 aria-disabled를 붙이므로 aria-disabled 변형으로 스타일 (data-disabled 아님)
-    "aria-disabled:cursor-not-allowed aria-disabled:text-[color:var(--cmp-listItem-content-disabled)]"
-  );
-  const activeClass = "data-[active-item]:bg-[var(--cmp-listItem-bg-hover)] data-[active-item]:text-[color:var(--cmp-listItem-content-hover)]";
-  return /* @__PURE__ */ jsx(Fragment, { children: items.map((o) => {
-    const padLeft = o.depth === 1 ? 12 : o.depth === 2 ? 20 : 28;
-    if (o.isGroup) {
-      const isDepth1 = o.depth === 1;
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "select-none py-[4px] pr-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-default)]",
-            isDepth1 ? "border-t border-solid border-[color:var(--cmp-listItem-depth1-border-color)] bg-[var(--cmp-listItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listItem-depth2-middle-bg)] font-medium",
-            // 하위가 전부 비활성이면(select.config 에서 bubble-up) 어미 그룹도 비활성 처리:
-            // 텍스트는 회색(#888), depth1 그룹은 파란 배경 대신 회색(#EEE)으로 (depth2 는 #F6F6F6 유지)
-            o.disabled && "cursor-not-allowed text-[color:var(--cmp-listItem-content-disabled)]",
-            o.disabled && isDepth1 && "bg-[var(--cmp-listItem-depth1-bg-disabled)]"
-          ),
-          style: { paddingLeft: padLeft },
-          children: o.label
-        },
-        o.value
-      );
-    }
-    const isSelected = selected.includes(o.value);
-    return /* @__PURE__ */ jsxs(
-      Ariakit.SelectItem,
+    "disabled:cursor-not-allowed disabled:text-[color:var(--cmp-listItem-content-disabled)]"
+  );
+  const activeClass = "hover:bg-[var(--cmp-listItem-bg-hover)] hover:text-[color:var(--cmp-listItem-content-hover)] focus:bg-[var(--cmp-listItem-bg-hover)] focus:text-[color:var(--cmp-listItem-content-hover)]";
+  return /* @__PURE__ */ jsxs("div", { role: "listbox", "aria-multiselectable": multi || void 0, children: [
+    showSelectAll && /* @__PURE__ */ jsxs(
+      "button",
       {
-        value: o.value,
-        disabled: o.disabled,
-        accessibleWhenDisabled: true,
+        type: "button",
+        "data-select-focused": focusedValue === "__select_all__" ? "true" : void 0,
+        "data-select-active": focusedValue === "__select_all__" ? "true" : void 0,
         className: cn(
           itemBase,
-          isSelected && !multi && "font-bold text-[color:var(--cmp-listItem-content-selected)]",
-          // Ariakit은 disabled 항목도 hover 시 active(data-active-item) 처리하므로,
-          // 비활성 항목에는 hover 하이라이트를 적용하지 않아 회색 비활성 스타일을 유지한다.
-          // (원본 Stencil의 `--focused...:not(--disabled)` 규칙과 동일한 의도)
-          !o.disabled && activeClass
-        ),
-        style: { paddingTop: 4, paddingBottom: 4, paddingRight: 12, paddingLeft: padLeft },
-        render: useSearch ? /* @__PURE__ */ jsx(Ariakit.ComboboxItem, {}) : void 0,
+          focusedValue === "__select_all__" && "bg-[var(--cmp-listItem-bg-hover)] text-[color:var(--cmp-listItem-content-hover)]"
+        ),
+        style: { paddingTop: 4, paddingBottom: 4, paddingRight: 12, paddingLeft: 12 },
+        onMouseEnter: () => onHoverValue("__select_all__"),
+        onMouseLeave: () => onHoverValue(null),
+        onClick: onSelectAll,
         children: [
-          multi && // hover(active) 시 checkbox inverse — 파란 hover 배경 위에서 checked/unchecked 모두 흰 테두리 + 투명 배경
           /* @__PURE__ */ jsx(
             "span",
             {
               className: cn(
                 "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid",
-                o.disabled ? (
-                  // 비활성: 회색 채움(#E1E1E1) + 회색 테두리(#CCCCCC)
-                  "cursor-not-allowed border-[color:var(--cmp-checkbox-border-disabled)] bg-[var(--cmp-checkbox-bg-disabled)]"
-                ) : cn(
-                  "group-data-[active-item]:border-[color:var(--cmp-checkbox-checked-border-inverse)]",
-                  isSelected ? "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)] group-data-[active-item]:bg-transparent" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-transparent"
-                )
+                selectAllSelected ? focusedValue === "__select_all__" ? "border-[color:var(--cmp-checkbox-checked-border-inverse)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-[var(--cmp-checkbox-unchecked-bg-default)]"
               ),
-              children: isSelected && /* @__PURE__ */ jsx(
+              children: selectAllSelected && /* @__PURE__ */ jsx(
                 SIcon,
                 {
                   name: "checkboxCheck",
                   size: 12,
-                  color: o.disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : "var(--cmp-checkbox-checked-icon-default)"
+                  color: "var(--cmp-checkbox-checked-icon-default)"
                 }
               )
             }
           ),
-          isHtmlLabel(o.label) ? /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "flex-1 truncate",
-              dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(o.label) }
-            }
-          ) : /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: o.label })
+          /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: selectAllLabel })
         ]
-      },
-      o.value
-    );
-  }) });
+      }
+    ),
+    items.map((o) => {
+      const padLeft = o.depth === 1 ? 12 : o.depth === 2 ? 20 : 28;
+      if (o.isGroup) {
+        const isDepth1 = o.depth === 1;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "select-none py-[4px] pr-[12px] text-[12px] leading-[20px] text-[color:var(--cmp-listItem-content-default)]",
+              isDepth1 ? "border-t border-solid border-[color:var(--cmp-listItem-depth1-border-color)] bg-[var(--cmp-listItem-depth1-bg-default)] font-bold" : "bg-[var(--cmp-listItem-depth2-middle-bg)] font-medium",
+              // 하위가 전부 비활성이면(select.config 에서 bubble-up) 어미 그룹도 비활성 처리:
+              // 텍스트는 회색(#888), depth1 그룹은 파란 배경 대신 회색(#EEE)으로 (depth2 는 #F6F6F6 유지)
+              o.disabled && "cursor-not-allowed text-[color:var(--cmp-listItem-content-disabled)]",
+              o.disabled && isDepth1 && "bg-[var(--cmp-listItem-depth1-bg-disabled)]"
+            ),
+            style: { paddingLeft: padLeft },
+            children: o.label
+          },
+          o.value
+        );
+      }
+      const isSelected = selected.includes(o.value);
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: o.disabled,
+          role: "option",
+          "aria-selected": isSelected,
+          "data-select-focused": focusedValue === o.value ? "true" : void 0,
+          "data-select-active": focusedValue === o.value ? "true" : void 0,
+          className: cn(
+            itemBase,
+            isSelected && !multi && "font-bold text-[color:var(--cmp-listItem-content-selected)]",
+            focusedValue === o.value && "bg-[var(--cmp-listItem-bg-hover)] text-[color:var(--cmp-listItem-content-hover)]",
+            // 비활성 항목은 hover/focus 스타일 대상에서 제외한다.
+            // (:hover 는 disabled 버튼에도 매칭되므로 클래스 자체를 붙이지 않아야 한다)
+            !o.disabled && activeClass
+          ),
+          style: { paddingTop: 4, paddingBottom: 4, paddingRight: 12, paddingLeft: padLeft },
+          onMouseEnter: () => onHoverValue(o.value),
+          onMouseLeave: () => onHoverValue(null),
+          onClick: () => onSelect(o.value),
+          children: [
+            multi && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid",
+                  o.disabled ? (
+                    // 비활성: 회색 채움(#E1E1E1) + 회색 테두리(#CCCCCC)
+                    "cursor-not-allowed border-[color:var(--cmp-checkbox-border-disabled)] bg-[var(--cmp-checkbox-bg-disabled)]"
+                  ) : cn(
+                    isSelected ? focusedValue === o.value ? "border-[color:var(--cmp-checkbox-checked-border-inverse)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-checked-bg-default)] bg-[var(--cmp-checkbox-checked-bg-default)]" : "border-[color:var(--cmp-checkbox-unchecked-border-default)] bg-[var(--cmp-checkbox-unchecked-bg-default)]"
+                  )
+                ),
+                children: isSelected && /* @__PURE__ */ jsx(
+                  SIcon,
+                  {
+                    name: "checkboxCheck",
+                    size: 12,
+                    color: o.disabled ? "var(--cmp-checkbox-checked-icon-disabled)" : "var(--cmp-checkbox-checked-icon-default)"
+                  }
+                )
+              }
+            ),
+            isHtmlLabel(o.label) ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "flex-1 truncate",
+                dangerouslySetInnerHTML: { __html: sanitizeInlineHtml(o.label) }
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: o.label })
+          ]
+        },
+        o.value
+      );
+    })
+  ] });
 }
 
 export { SSelect };