sellmate-design-system-react 0.1.9 → 0.1.10

package/dist/components/SFilePicker/SFilePicker.cjs

@@ -2,6 +2,7 @@
 'use strict';
 
 var react = require('react');
+var Ariakit = require('@ariakit/react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
@@ -25,6 +26,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
+var Ariakit__namespace = /*#__PURE__*/_interopNamespace(Ariakit);
 var RPopover2__namespace = /*#__PURE__*/_interopNamespace(RPopover2);
 
 var twMerge = tailwindMerge.extendTailwindMerge({
@@ -3148,7 +3150,7 @@ var STooltip = react.forwardRef(function STooltip2({
   if (disabled || body == null) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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
   );
@@ -3580,7 +3582,10 @@ function SFilePicker({
   const autoId = react.useId();
   const resolvedName = name ?? autoId;
   const inputRef = react.useRef(null);
+  const contentBoxRef = react.useRef(null);
   const [ruleError, setRuleError] = react.useState("");
+  const [listOpen, setListOpen] = react.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;
@@ -3634,10 +3639,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();
@@ -3648,9 +3655,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__ */ jsxRuntime.jsxs(
+  const showListbox = multiple && useMultipleListBox;
+  const filesArr = multiple ? files : [];
+  const contentInner = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      ref: contentBoxRef,
       className: cn("group/filepicker flex h-full w-full items-center", gapCls),
       style: { padding: inline ? 0 : `0 ${padX}` },
       children: [
@@ -3705,25 +3715,34 @@ function SFilePicker({
             ]
           }
         ),
+        showListbox && hasFiles && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+          Ariakit__namespace.PopoverDisclosure,
+          {
+            render: /* @__PURE__ */ jsxRuntime.jsx(SGhostButton, { icon: "caretDown", size: "xxs", ariaLabel: "toggle file list" }),
+            className: cn("shrink-0 transition-transform duration-150", listOpen && "rotate-180")
+          }
+        ),
         !disabled && hasFiles && /* @__PURE__ */ jsxRuntime.jsx(SGhostButton, { icon: "close", size: "xxs", ariaLabel: "clear", onClick: clear })
       ]
     }
   );
-  const chips = multiple && files.length > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SChip, { value: f.name, editable: false, onRemove: () => removeChip(i) }, i))
-    }
-  );
+  const content = showListbox ? /* @__PURE__ */ jsxRuntime.jsxs(Ariakit__namespace.PopoverProvider, { open: listOpen, setOpen: setListOpen, placement: "bottom-start", children: [
+    contentInner,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Ariakit__namespace.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__ */ jsxRuntime.jsx(SChip, { value: f.name, editable: false, onRemove: () => removeChip(i) }, i))
+      }
+    )
+  ] }) : contentInner;
+  const chips = multiple && !useMultipleListBox && filesArr.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[8px] flex flex-wrap gap-[8px]", children: filesArr.map((f, i) => /* @__PURE__ */ jsxRuntime.jsx(SChip, { value: f.name, editable: false, onRemove: () => removeChip(i) }, i)) });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       SField,