sellmate-design-system-react 0.12.0 → 1.0.0

package/dist/components/SExpansionItem/SExpansionItem.d.ts

@@ -14,6 +14,8 @@ export interface SExpansionItemProps extends Omit<HTMLAttributes<HTMLDivElement>
     trailing?: ReactNode;
     /** body 내부 패딩 사용 여부 */
     bodyPadding?: boolean;
+    /** 외곽 테두리 사용 여부 */
+    bordered?: boolean;
     expanded?: boolean;
     defaultExpanded?: boolean;
     dense?: boolean;

package/dist/components/SExpansionItem/SExpansionItem.js

@@ -1,5 +1,5 @@
 "use client";
-import { forwardRef, useState, Children, useId } from 'react';
+import { forwardRef, useState, useId } from 'react';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -2856,6 +2856,7 @@ var SExpansionItem = forwardRef(
     leading,
     trailing,
     bodyPadding = true,
+    bordered = false,
     expanded,
     defaultExpanded = false,
     dense = false,
@@ -2867,9 +2868,6 @@ var SExpansionItem = forwardRef(
   }, ref) {
     const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
     const isExpanded = expanded ?? internalExpanded;
-    const hasBody = Children.toArray(children).some(
-      (child) => child !== null && child !== void 0 && (typeof child !== "string" || child.trim() !== "")
-    );
     const leadingNode = typeof leading === "function" ? leading({ expanded: isExpanded, disabled }) : leading;
     const id = useId();
     return /* @__PURE__ */ jsxs(
@@ -2878,6 +2876,9 @@ var SExpansionItem = forwardRef(
         ref,
         className: cn(
           "group overflow-hidden bg-[var(--cmp-expansionItem-title-bg-default)]",
+          // TODO: expansionItem/bordered/radius 및 border intent 토큰 생성 후 고정값을 토큰으로 교체한다.
+          bordered && "rounded-[8px] border border-[#E1E1E1] hover:border-[#AAAAAA] [&:has(>button:hover)]:border-[#AAAAAA]",
+          bordered && isExpanded && "!border-[#93C4FF]",
           className
         ),
         ...rest,
@@ -2897,23 +2898,52 @@ var SExpansionItem = forwardRef(
               },
               className: cn(
                 "flex w-full items-center justify-between border-0 text-left text-[14px] font-bold leading-[24px] text-[var(--cmp-expansionItem-title-text-default)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--sys-color-border-accent)] disabled:cursor-not-allowed disabled:text-[var(--sys-color-disabled-text)] cursor-pointer",
-                isExpanded && "border-b border-[var(--cmp-expansionItem-title-border)]",
-                !isExpanded && "hover:bg-[var(--cmp-expansionItem-title-bg-hover)]",
-                dense ? "min-h-8 py-[var(--cmp-expansionItem-title-paddingY-dense)]" : "min-h-10 py-[var(--cmp-expansionItem-title-paddingY-normal)]",
-                "gap-[var(--cmp-expansionItem-title-gap)]",
-                "pr-[var(--cmp-expansionItem-title-paddingX)]",
-                depth === 2 ? "pl-[calc(var(--cmp-expansionItem-title-paddingX)+32px)]" : depth === 3 ? "pl-[calc(var(--cmp-expansionItem-title-paddingX)+64px)]" : "pl-[var(--cmp-expansionItem-title-paddingX)]",
-                isExpanded && "bg-[var(--cmp-expansionItem-title-bg-expanded)] text-[var(--cmp-expansionItem-title-text-expanded)]"
+                isExpanded && "border-b border-(--cmp-expansionItem-title-border)",
+                !isExpanded && "hover:bg-(--cmp-expansionItem-title-bg-hover)",
+                dense ? "min-h-8 py-(--cmp-expansionItem-title-paddingY-dense)" : "min-h-10 py-(--cmp-expansionItem-title-paddingY-normal)",
+                "gap-(--cmp-expansionItem-title-gap)",
+                "pr-(--cmp-expansionItem-title-paddingX)",
+                depth === 2 ? "pl-[calc(var(--cmp-expansionItem-title-paddingX)+32px)]" : depth === 3 ? "pl-[calc(var(--cmp-expansionItem-title-paddingX)+64px)]" : "pl-(--cmp-expansionItem-title-paddingX)",
+                isExpanded && "bg-(--cmp-expansionItem-title-bg-expanded) text-(--cmp-expansionItem-title-text-expanded)"
               ),
               children: [
-                !leading && hasBody && /* @__PURE__ */ jsx(SIcon, { name: isExpanded ? "caretUp" : "caretDown", size: 12 }),
+                !leading && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "flex transition-transform duration-200 ease-out motion-reduce:transition-none",
+                      isExpanded && "rotate-180"
+                    ),
+                    children: /* @__PURE__ */ jsx(SIcon, { name: "caretDown", size: 12 })
+                  }
+                ),
                 leadingNode,
                 /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsx("span", { children: title }) }),
                 trailing
               ]
             }
           ),
-          /* @__PURE__ */ jsx("div", { id, hidden: !isExpanded, className: "bg-[var(--cmp-expansionItem-body-bg)]", children: /* @__PURE__ */ jsx("div", { className: bodyPadding ? "p-[var(--cmp-expansionItem-body-padding)]" : void 0, children }) })
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id,
+              "aria-hidden": !isExpanded,
+              className: cn(
+                "grid overflow-hidden bg-[var(--cmp-expansionItem-body-bg)] transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
+                isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+              ),
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "min-h-0 overflow-hidden",
+                    bodyPadding && isExpanded && "p-(--cmp-expansionItem-body-padding)"
+                  ),
+                  children
+                }
+              )
+            }
+          )
         ]
       }
     );