sellmate-design-system-react 3.5.0 → 3.6.0

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

@@ -1,9 +1,11 @@
 import { type HTMLAttributes, type MouseEvent, type ReactNode } from 'react';
 export interface SExpansionItemRenderState {
     expanded: boolean;
+    selected: boolean;
     disabled: boolean;
 }
 export type SExpansionItemRenderProp = (state: SExpansionItemRenderState) => ReactNode;
+export type SExpansionItemInteraction = 'chevron';
 export interface SExpansionItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onToggle' | 'title'> {
     title: ReactNode;
     /** 중첩 단계. Figma 기준 1~3단계 */
@@ -18,6 +20,11 @@ export interface SExpansionItemProps extends Omit<HTMLAttributes<HTMLDivElement>
     bordered?: boolean;
     expanded?: boolean;
     defaultExpanded?: boolean;
+    selected?: boolean;
+    /** hover/selected 상태에서 적용할 인터랙션 preset */
+    interaction?: SExpansionItemInteraction;
+    /** 아이템 왼쪽 accent stripe 표시 여부 */
+    accentStripe?: boolean;
     dense?: boolean;
     disabled?: boolean;
     onToggle?: (expanded: boolean, event: MouseEvent<HTMLButtonElement>) => void;

package/dist/components/SExpansionItem/SExpansionItem.js

@@ -1,5 +1,5 @@
 "use client";
-import { forwardRef, useState, useId } from 'react';
+import { forwardRef, createContext, useState, useContext, useCallback, useMemo, useId, useEffect } from 'react';
 import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
@@ -2849,6 +2849,9 @@ var SIcon = forwardRef(function SIcon2({ name, size = 24, color, rotate, label,
     }
   );
 });
+var SExpansionItemDescendantContext = createContext(
+  null
+);
 var SExpansionItem = forwardRef(
   function SExpansionItem2({
     title,
@@ -2859,6 +2862,9 @@ var SExpansionItem = forwardRef(
     bordered = false,
     expanded,
     defaultExpanded = false,
+    selected = false,
+    interaction,
+    accentStripe = false,
     dense = false,
     disabled = false,
     onToggle,
@@ -2867,15 +2873,39 @@ var SExpansionItem = forwardRef(
     ...rest
   }, ref) {
     const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+    const [expandedDescendantCount, setExpandedDescendantCount] = useState(0);
+    const [hovered, setHovered] = useState(false);
+    const parentDescendantContext = useContext(SExpansionItemDescendantContext);
     const isExpanded = expanded ?? internalExpanded;
-    const leadingNode = typeof leading === "function" ? leading({ expanded: isExpanded, disabled }) : leading;
+    const isSelected = isExpanded && (selected || expandedDescendantCount === 0);
+    const hasChevronInteraction = interaction === "chevron";
+    const showInteractionChevron = hasChevronInteraction && !disabled && (isSelected || hovered);
+    const interactionChevronColor = isSelected ? "var(--sys-color-fg-brand)" : "var(--sys-color-fg-quaternary)";
+    const reportExpandedDescendant = useCallback(
+      (delta) => {
+        setExpandedDescendantCount((current) => Math.max(0, current + delta));
+        parentDescendantContext?.reportExpandedDescendant(delta);
+      },
+      [parentDescendantContext]
+    );
+    const descendantContextValue = useMemo(
+      () => ({ reportExpandedDescendant }),
+      [reportExpandedDescendant]
+    );
+    const leadingNode = typeof leading === "function" ? leading({ expanded: isExpanded, selected: isSelected, disabled }) : leading;
     const id = useId();
+    useEffect(() => {
+      if (!isExpanded) return;
+      parentDescendantContext?.reportExpandedDescendant(1);
+      return () => parentDescendantContext?.reportExpandedDescendant(-1);
+    }, [isExpanded, parentDescendantContext]);
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         className: cn(
-          "group/expansion-item overflow-hidden bg-(--cmp-listExpansionItem-title-bg-default)",
+          "group/expansion-item relative overflow-hidden bg-(--cmp-listExpansionItem-title-bg-default)",
+          !bordered && "border-b border-(--cmp-listExpansionItem-border-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]",
@@ -2883,6 +2913,13 @@ var SExpansionItem = forwardRef(
         ),
         ...rest,
         children: [
+          accentStripe && !bordered && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute bottom-[-1px] left-0 top-0 z-[1] w-(--cmp-listItem-accentStripe-width) bg-(--cmp-listItem-accentStripe-color)"
+            }
+          ),
           /* @__PURE__ */ jsxs(
             "button",
             {
@@ -2890,6 +2927,8 @@ var SExpansionItem = forwardRef(
               disabled,
               "aria-expanded": isExpanded,
               "aria-controls": id,
+              onMouseEnter: () => setHovered(true),
+              onMouseLeave: () => setHovered(false),
               onClick: (event) => {
                 if (disabled) return;
                 const next = !isExpanded;
@@ -2897,14 +2936,17 @@ var SExpansionItem = forwardRef(
                 onToggle?.(next, event);
               },
               className: cn(
-                "flex w-full cursor-pointer items-center justify-between border-0 text-left text-[14px] font-bold leading-[24px] text-(--cmp-listExpansionItem-title-text-default) focus-visible:outline focus-visible:outline-2 focus-visible:outline-(--sys-color-border-accent) disabled:cursor-not-allowed disabled:text-(--sys-color-disabled-text)",
+                "group/expansion-item-button flex w-full cursor-pointer items-center justify-between border-0 text-left text-[14px] font-bold leading-[24px] text-(--cmp-listExpansionItem-title-text-default) focus-visible:outline focus-visible:outline-2 focus-visible:outline-(--sys-color-border-accent) disabled:cursor-not-allowed disabled:text-(--sys-color-disabled-text)",
                 isExpanded && "border-b border-(--cmp-listExpansionItem-title-border)",
-                !isExpanded && "hover:bg-(--cmp-listExpansionItem-title-bg-hover)",
+                hasChevronInteraction ? "hover:bg-(--sys-color-bg-neutralBright)" : !isExpanded && "hover:bg-(--cmp-listExpansionItem-title-bg-hover)",
                 dense ? "h-[32px] py-(--cmp-listExpansionItem-title-paddingY-dense)" : "h-[40px] py-(--cmp-listExpansionItem-title-paddingY-normal)",
                 "gap-(--cmp-listExpansionItem-title-gap)",
                 "pr-(--cmp-listExpansionItem-title-paddingX)",
-                depth === 2 ? "pl-[calc(var(--cmp-listExpansionItem-title-paddingX)+32px)]" : depth === 3 ? "pl-[calc(var(--cmp-listExpansionItem-title-paddingX)+64px)]" : "pl-(--cmp-listExpansionItem-title-paddingX)",
-                isExpanded && "bg-(--cmp-listExpansionItem-title-bg-expanded) text-(--cmp-listExpansionItem-title-text-expanded)"
+                depth === 2 ? "pl-[36px]" : depth === 3 ? "pl-[56px]" : "pl-[16px]",
+                isExpanded && cn(
+                  "text-(--cmp-listExpansionItem-title-text-expanded)",
+                  isSelected && "bg-(--cmp-listExpansionItem-title-bg-expanded)"
+                )
               ),
               children: [
                 !leading && /* @__PURE__ */ jsx(
@@ -2919,11 +2961,12 @@ var SExpansionItem = forwardRef(
                 ),
                 leadingNode,
                 /* @__PURE__ */ jsx("span", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsx("span", { children: title }) }),
-                trailing
+                trailing,
+                showInteractionChevron && /* @__PURE__ */ jsx(SIcon, { name: "chevronRight", size: 12, color: interactionChevronColor })
               ]
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(SExpansionItemDescendantContext.Provider, { value: descendantContextValue, children: /* @__PURE__ */ jsx(
             "div",
             {
               id,
@@ -2934,7 +2977,7 @@ var SExpansionItem = forwardRef(
               ),
               children: /* @__PURE__ */ jsx("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: cn(bodyPadding && "p-(--cmp-listExpansionItem-body-padding)"), children }) })
             }
-          )
+          ) })
         ]
       }
     );