sellmate-design-system-react 0.1.9 → 0.1.11

package/dist/components/SFilePicker/SFilePicker.d.ts

@@ -1,6 +1,7 @@
 import { type CSSProperties } from 'react';
 import { type SFieldSize, type SFieldAddonAlign, type SFieldStatus } from '../SField';
 import { type SIconName } from '../SIcon';
+import { type SColor } from '../../lib/color';
 import { type Rule } from '../../lib/form';
 import { type STooltipProps } from '../STooltip';
 export type SFilePickerValue = File[] | File | null;
@@ -23,7 +24,7 @@ export interface SFilePickerProps {
     /** 인라인 표시 — SField 테두리 박스만 사라지고 label/rules/hint 는 그대로 동작 */
     inline?: boolean;
     multiple?: boolean;
-    /** multiple 칩 목록을 리스트박스 카드(세로 나열) 형태로 표시 */
+    /** multiple 파일 목록을 필드 아래 칩 대신, caret(▼) 클릭 시 열리는 리스트박스 카드로 표시 (바깥 클릭 시 닫힘) */
     useMultipleListBox?: boolean;
     accept?: string;
     maxFileSize?: number | string;
@@ -36,6 +37,7 @@ export interface SFilePickerProps {
     label?: string;
     labelWidth?: number | string;
     icon?: SIconName;
+    iconColor?: SColor;
     labelTooltip?: string;
     labelTooltipProps?: Partial<STooltipProps>;
     addonLabel?: string;
@@ -48,4 +50,4 @@ export interface SFilePickerProps {
     style?: CSSProperties;
 }
 /** SFilePicker — sd-file-picker 포팅. 단일/다중 파일 + 크기·개수 검증 + 칩 목록. */
-export declare function SFilePicker({ value, onValueChange, onReject, placeholder, disabled, focused, hovered, inline, multiple, useMultipleListBox, accept, maxFileSize, maxTotalSize, maxFiles, name, rules, status, size, label, labelWidth, icon, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, width, className, style, }: SFilePickerProps): import("react").JSX.Element;
+export declare function SFilePicker({ value, onValueChange, onReject, placeholder, disabled, focused, hovered, inline, multiple, useMultipleListBox, accept, maxFileSize, maxTotalSize, maxFiles, name, rules, status, size, label, labelWidth, icon, iconColor, labelTooltip, labelTooltipProps, addonLabel, addonAlign, hint, error, errorMessage, width, className, style, }: SFilePickerProps): import("react").JSX.Element;

package/dist/components/SFilePicker/SFilePicker.js

@@ -1,5 +1,6 @@
 "use client";
 import { forwardRef, createContext, useState, useRef, useImperativeHandle, useEffect, useContext, useId } from 'react';
+import * as Ariakit from '@ariakit/react';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -2871,7 +2872,9 @@ var FLOATING_SLIDE_ANIM = [
   "data-[state=closed]:data-[side=right]:animate-floating-out-right"
 ].join(" ");
 var PortalContainerContext = createContext(null);
+var InsideModalContext = createContext(false);
 PortalContainerContext.Provider;
+InsideModalContext.Provider;
 function usePortalContainer() {
   return useContext(PortalContainerContext) ?? void 0;
 }
@@ -3126,7 +3129,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
   );
@@ -3232,6 +3235,7 @@ var SField = forwardRef(function SField2({
   name,
   label = "",
   icon,
+  iconColor,
   labelTooltip = "",
   labelTooltipProps,
   labelWidth,
@@ -3309,7 +3313,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,
@@ -3359,7 +3371,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
                     ]
                   }
@@ -3544,6 +3556,7 @@ function SFilePicker({
   label,
   labelWidth,
   icon,
+  iconColor,
   labelTooltip,
   labelTooltipProps,
   addonLabel,
@@ -3558,7 +3571,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;
@@ -3612,10 +3628,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();
@@ -3626,9 +3644,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: [
@@ -3683,25 +3704,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-start 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,
@@ -3710,6 +3740,7 @@ function SFilePicker({
         label,
         labelWidth,
         icon,
+        iconColor,
         labelTooltip,
         labelTooltipProps,
         addonLabel,