sellmate-design-system-react 0.1.9 → 0.1.10

package/dist/components/SKeyValueTable/SKeyValueTable.js

@@ -3128,7 +3128,7 @@ var STooltip = forwardRef(function STooltip2({
   if (disabled || body == null) return /* @__PURE__ */ jsx(Fragment, { children: triggerNode });
   const isHover = trigger === "hover";
   const contentClass = cn(
-    "z-50 max-w-xs rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
+    "z-50 max-w-xs rounded-[6px] px-[16px] py-[12px] text-[12px] leading-[20px]",
     FLOATING_SLIDE_ANIM,
     className
   );
@@ -4471,7 +4471,7 @@ function ItemList({
             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 && "text-[color:var(--cmp-listItem-content-disabled)]",
+            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 },
@@ -4486,10 +4486,14 @@ function ItemList({
       {
         value: o.value,
         disabled: o.disabled,
+        accessibleWhenDisabled: true,
         className: cn(
           itemBase,
           isSelected && !multi && "font-bold text-[color:var(--cmp-listItem-content-selected)]",
-          activeClass
+          // 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,
@@ -4502,7 +4506,7 @@ function ItemList({
                 "flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[2px] border border-solid",
                 o.disabled ? (
                   // 비활성: 회색 채움(#E1E1E1) + 회색 테두리(#CCCCCC)
-                  "border-[color:var(--cmp-checkbox-border-disabled)] bg-[var(--cmp-checkbox-bg-disabled)]"
+                  "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"
@@ -4637,7 +4641,7 @@ function SRadioGroup({
       role: "radiogroup",
       className: cn(
         "inline-flex",
-        direction === "vertical" ? "flex-col gap-[8px]" : "flex-row gap-[20px]",
+        direction === "vertical" ? "flex-col gap-[var(--cmp-radio-group-gap-vertical)]" : "flex-row gap-[var(--cmp-radio-group-gap-horizontal)]",
         className
       ),
       style,
@@ -5615,7 +5619,10 @@ function SFilePicker({
   const autoId = useId();
   const resolvedName = name ?? autoId;
   const inputRef = useRef(null);
+  const contentBoxRef = useRef(null);
   const [ruleError, setRuleError] = useState("");
+  const [listOpen, setListOpen] = useState(false);
+  const portalContainer = usePortalContainer();
   const files = multiple ? Array.isArray(value) ? value : [] : value && !Array.isArray(value) ? value : null;
   const hasFiles = multiple ? files.length > 0 : !!files;
   const displayText = !hasFiles ? placeholder : multiple ? files.map((f) => f.name).join(", ") : files.name;
@@ -5669,10 +5676,12 @@ function SFilePicker({
     e.stopPropagation();
     if (disabled) return;
     onValueChange?.(multiple ? [] : null);
+    setListOpen(false);
   };
   const removeChip = (i) => {
     const next = files.filter((_, idx) => idx !== i);
     onValueChange?.(next);
+    if (next.length === 0) setListOpen(false);
   };
   const open = () => {
     if (!disabled) inputRef.current?.click();
@@ -5683,9 +5692,12 @@ function SFilePicker({
   const iconSize = size === "md" ? 20 : 16;
   const gapCls = size === "md" ? "gap-[var(--cmp-filepicker-md-gap)]" : "gap-[var(--cmp-filepicker-sm-gap)]";
   const inlinePlaceholder = inline && !disabled && !hasFiles;
-  const content = /* @__PURE__ */ jsxs(
+  const showListbox = multiple && useMultipleListBox;
+  const filesArr = multiple ? files : [];
+  const contentInner = /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: contentBoxRef,
       className: cn("group/filepicker flex h-full w-full items-center", gapCls),
       style: { padding: inline ? 0 : `0 ${padX}` },
       children: [
@@ -5740,25 +5752,34 @@ function SFilePicker({
             ]
           }
         ),
+        showListbox && hasFiles && !disabled && /* @__PURE__ */ jsx(
+          Ariakit.PopoverDisclosure,
+          {
+            render: /* @__PURE__ */ jsx(SGhostButton, { icon: "caretDown", size: "xxs", ariaLabel: "toggle file list" }),
+            className: cn("shrink-0 transition-transform duration-150", listOpen && "rotate-180")
+          }
+        ),
         !disabled && hasFiles && /* @__PURE__ */ jsx(SGhostButton, { icon: "close", size: "xxs", ariaLabel: "clear", onClick: clear })
       ]
     }
   );
-  const chips = multiple && files.length > 0 && /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: cn(
-        "mt-[8px] flex gap-[8px]",
-        useMultipleListBox ? "box-border flex-col items-start rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] p-[8px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]" : "flex-wrap"
-      ),
-      style: useMultipleListBox ? {
-        width: typeof width === "number" ? `${width}px` : width,
-        // label 이 있으면 SField 입력 박스 시작 위치(labelWidth + fieldGap)에 맞춰 정렬
-        marginLeft: label && labelWidth != null ? `calc(${typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth} + var(--sys-space-field-${size}-gap))` : void 0
-      } : void 0,
-      children: files.map((f, i) => /* @__PURE__ */ jsx(SChip, { value: f.name, editable: false, onRemove: () => removeChip(i) }, i))
-    }
-  );
+  const content = showListbox ? /* @__PURE__ */ jsxs(Ariakit.PopoverProvider, { open: listOpen, setOpen: setListOpen, placement: "bottom-start", children: [
+    contentInner,
+    /* @__PURE__ */ jsx(
+      Ariakit.Popover,
+      {
+        portal: true,
+        portalElement: portalContainer,
+        gutter: 4,
+        unmountOnHide: true,
+        getAnchorRect: () => contentBoxRef.current?.getBoundingClientRect() ?? null,
+        style: { minWidth: contentBoxRef.current?.offsetWidth },
+        className: "z-50 box-border flex flex-col items-stretch gap-[8px] rounded-[var(--cmp-listBox-radius)] bg-[var(--cmp-listBox-bg)] p-[8px] shadow-[2px_2px_12px_2px_rgba(0,0,0,0.1)]",
+        children: filesArr.map((f, i) => /* @__PURE__ */ jsx(SChip, { value: f.name, editable: false, onRemove: () => removeChip(i) }, i))
+      }
+    )
+  ] }) : contentInner;
+  const chips = multiple && !useMultipleListBox && filesArr.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-[8px] flex flex-wrap gap-[8px]", children: filesArr.map((f, i) => /* @__PURE__ */ jsx(SChip, { value: f.name, editable: false, onRemove: () => removeChip(i) }, i)) });
   return /* @__PURE__ */ jsxs("div", { className, style, children: [
     /* @__PURE__ */ jsx(
       SField,
@@ -5800,7 +5821,7 @@ function SKeyValueTable({
   if (fields.length === 0) return null;
   const emit = (name, value) => onChange?.({ name, value });
   const cellHeight = dense ? "var(--cmp-table-body-dense-height)" : "var(--cmp-table-keyValue-height)";
-  const cellPadY = dense ? "var(--cmp-table-body-dense-paddingY)" : "var(--cmp-table-keyValue-body-paddingY)";
+  const cellPadY = dense ? "var(--cmp-table-body-paddingY-dense)" : "var(--cmp-table-keyValue-body-paddingY)";
   const renderField = (f) => {
     if (f.render) return f.render;
     const opt = f.options ?? {};