sellmate-design-system-react 9.0.0-beta.12 → 9.0.0-beta.14

package/AGENTS.md

@@ -1106,14 +1106,16 @@ const columns: STableColumn[] = [
 
 - **항목 하나의 속성을 나열하는 것은 목록이 아니다.** `라벨: 값` 이 세로로 쌓이는 것은 `SKeyValueTable` 이다 (§4-4).
 - `SList` 는 레이아웃만 담당한다. 펼침·단일 선택 동작이 필요하면 `SExpansionList` 다 (§3-7-7).
-- **항목 사이 구분선은 리스트가 그린다.** `SListItem`·`SExpansionItem`·`SDraggableItem` 셋 다 스스로 구분선을 그리지 않으므로, 목록을 감싸는 `SList`·`SExpansionList`·`SDraggableList` 에 `separator` 를 준다 — 아이템에 `border-b` 를 직접 붙이지 않는다. 테두리형(`bordered`)은 테두리가 구분 역할을 하므로 `separator` 대신 `useGap` 으로 띄운다.
+- **`SList` 의 자식은 `SListItem` 을 권장한다.** 다른 자식도 그대로 렌더되지만, 펼치는 항목은 `SExpansionList` + `SExpansionItem` 이, 끌어서 순서를 바꾸는 항목은 `SDraggableList` + `SDraggableItem` 이 여닫힘·선택·정렬 동작까지 함께 관리하므로 그쪽을 쓴다 (§3-7-7).
+- **항목 사이 구분선은 리스트가 알아서 그린다.** `SListItem`·`SExpansionItem`·`SDraggableItem` 셋 다 스스로 구분선을 그리지 않는다. `SList`·`SExpansionList`·`SDraggableList` 가 자식 **사이에** 구분선을 넣으므로 아이템에 `border-b` 를 직접 붙이지 않고, 켜는 prop 도 따로 없다. 마지막 항목 아래에는 선이 남지 않는다. 테두리형(`bordered`)은 테두리가 구분 역할을 하므로 리스트가 구분선을 빼고, `useGap` 으로 띄운다 — `useGap` 을 준 목록에도 구분선은 들어가지 않는다.
 - **`SListItem` 은 기본이 표시 전용이다.** 눌러서 이동·선택하게 하려면 `clickable` 을 준다 — hover·`selected`·`interaction="chevron"` 표현이 전부 여기에 딸려 있어서, `clickable` 없이 `selected` 만 주면 선택 표시가 나오지 않는다. `SExpansionList` 는 선택을 자기가 관리하므로 자식 아이템을 알아서 클릭 가능하게 만든다.
 
 ```tsx
-✅ <SList separator><SListItem title="일반 문의" />…</SList>   {/* 줄로 구분되는 목록 */}
+✅ <SList><SListItem title="일반 문의" />…</SList>              {/* 줄로 구분되는 목록 — 구분선은 자동 */}
 ✅ <SList useGap><SListItem title="일반 문의" bordered />…</SList>  {/* 카드처럼 떨어진 목록 */}
 ✅ <SListItem title="일반 문의" clickable selected onClick={…} />   {/* 눌러서 고르는 목록 */}
-❌ <SList><SListItem title="일반 문의" className="border-b" />…</SList>
+❌ <SList><SListItem title="일반 문의" className="border-b" />…</SList>  {/* 구분선을 직접 붙이지 않는다 */}
+❌ <SList><><SListItem title="일반 문의" /><SListItem title="결제 문의" /></></SList>  {/* Fragment 로 묶으면 그 안쪽은 구분되지 않는다 */}
 ❌ <SListItem title="일반 문의" selected />                        {/* clickable 없으면 선택 표시가 안 나온다 */}
 ```
 
@@ -1125,7 +1127,7 @@ const columns: STableColumn[] = [
 | **한 번에 하나만** 열려야 한다 (아코디언) | `SExpansionList` + `SExpansionItem` |
 | **부모-자식 계층 자체**를 보여줘야 한다 (2단 이상, 연결선) | `STree` |
 
-`SExpansionList` 는 depth 별 단일 확장·선택을 관리하는 wrapper 다. 직접 `useState` 로 "열린 항목 하나"를 들고 있지 않는다. 항목 사이 구분선은 여기서도 리스트가 그린다 — `separator` 를 준다 (§3-7-6).
+`SExpansionList` 는 depth 별 단일 확장·선택을 관리하는 wrapper 다. 직접 `useState` 로 "열린 항목 하나"를 들고 있지 않는다. 항목 사이 구분선은 여기서도 리스트가 알아서 그린다 — 따로 줄 prop 이 없다 (§3-7-6).
 
 #### 3-7-8. SCard vs SSectionHeaderCard
 

package/dist/components/SCard/SCard.d.ts

@@ -3,5 +3,5 @@ export interface SCardProps extends HTMLAttributes<HTMLDivElement> {
     /** 테두리 표시 여부 */
     bordered?: boolean;
 }
-/** SCard — sd-card 포팅. 라운드 8px, 흰 배경, 옵션 테두리. */
+/** SCard — sd-card 포팅. 라운드 8px, 흰 배경, 옵션 테두리. 콘텐츠는 라운드 경계에서 잘린다. */
 export declare const SCard: import("react").ForwardRefExoticComponent<SCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/SDivider/README.md

@@ -16,6 +16,7 @@
 
  - [SCalendar](../SCalendar)
  - [SDateRangePicker](../SDateRangePicker)
+ - [SList](../SList)
  - [STableBar](../STableBar)
 
 ### Graph
@@ -24,6 +25,7 @@
 graph TD;
   SCalendar --> SDivider
   SDateRangePicker --> SDivider
+  SList --> SDivider
   STableBar --> SDivider
   style SDivider fill:#f9f,stroke:#333,stroke-width:4px
 ```

package/dist/components/SGnb/gnb.config.d.ts

@@ -162,3 +162,8 @@ export declare function findGnbRailValue(items: SGnbMenuItem[], value: string):
 export declare function findGnbSiblingValues(items: SGnbMenuItem[], value: string): string[];
 /** value 로 선택된 아이템의 조상 value 목록(자기 자신 제외)을 반환 → 자동 펼침용 */
 export declare function findGnbAncestors(items: SGnbMenuItem[], value: string): string[];
+/**
+ * value 를 가진 아이템 아래의 **하위 가지**(children 을 가진 자손) value 목록을 반환.
+ * 부모를 펼칠 때 그 아래 가지도 전부 함께 펼치는 용도 — 리프는 펼침 대상이 아니라 제외한다.
+ */
+export declare function findGnbDescendantBranchValues(items: SGnbMenuItem[], value: string): string[];

package/dist/components/SList/README.md

@@ -19,10 +19,15 @@
  - [SDraggableList](../SDraggableList)
  - [SExpansionList](../SExpansionList)
 
+### Depends on
+
+- [SDivider](../SDivider)
+
 ### Graph
 
 ```mermaid
 graph TD;
+  SList --> SDivider
   SDraggableList --> SList
   SExpansionList --> SList
   style SList fill:#f9f,stroke:#333,stroke-width:4px

package/dist/index.cjs

@@ -3373,7 +3373,11 @@ var SCard = /* @__PURE__ */ react.forwardRef(function SCard2({ bordered = false,
     "div",
     {
       ref,
-      className: cn("h-fit rounded-[8px] bg-white", bordered && "border border-grey-30", className),
+      className: cn(
+        "h-fit overflow-hidden rounded-[8px] bg-white",
+        bordered && "border border-grey-30",
+        className
+      ),
       ...rest,
       children
     }
@@ -3654,7 +3658,49 @@ var SDraggableItemImpl = /* @__PURE__ */ react.forwardRef(function SDraggableIte
   ] });
 });
 var SDraggableItem2 = /* @__PURE__ */ withDisplayName(SDraggableItemImpl, "SDraggableItem");
+var SDivider = /* @__PURE__ */ react.forwardRef(function SDivider2({ vertical = false, className, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "hr",
+    {
+      ref,
+      "aria-orientation": vertical ? "vertical" : "horizontal",
+      className: cn(
+        "shrink-0 border-0",
+        vertical ? "inline-block h-auto w-px self-stretch" : "block h-px w-full",
+        className
+      ),
+      style: { backgroundColor: "var(--sys-color-divider-default, #E1E1E1)", ...style },
+      ...rest
+    }
+  );
+});
+var dividerStyle = { backgroundColor: "var(--cmp-listItem-border-default)" };
+function hasBorderedChild(children) {
+  let bordered = false;
+  react.Children.forEach(children, (child) => {
+    if (!react.isValidElement(child)) return;
+    if (child.props.bordered === true) {
+      bordered = true;
+      return;
+    }
+    react.Children.forEach(child.props.children, (wrapped) => {
+      if (react.isValidElement(wrapped) && wrapped.props.bordered === true) {
+        bordered = true;
+      }
+    });
+  });
+  return bordered;
+}
+function withDividers(children) {
+  return react.Children.toArray(children).flatMap(
+    (child, index) => index === 0 ? [child] : [
+      /* @__PURE__ */ jsxRuntime.jsx(SDivider, { "aria-hidden": "true", style: dividerStyle }, `s-list-divider-${index}`),
+      child
+    ]
+  );
+}
 var SListImpl = /* @__PURE__ */ react.forwardRef(function SList({ className, children, useGap = false, usePadding = false, ...rest }, ref) {
+  const showDivider = !useGap && !hasBorderedChild(children);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -3662,11 +3708,10 @@ var SListImpl = /* @__PURE__ */ react.forwardRef(function SList({ className, chi
       className: cn(
         useGap && "flex flex-col gap-(--cmp-list-group-gap)",
         usePadding && "p-(--cmp-list-group-padding)",
-        "[&>*]:border-b [&>*]:border-(--cmp-listItem-border-default)",
         className
       ),
       ...rest,
-      children
+      children: showDivider ? withDividers(children) : children
     }
   );
 });
@@ -5381,22 +5426,6 @@ var SSectionHeaderCardRootImpl = /* @__PURE__ */ react.forwardRef(
   }
 );
 var SSectionHeaderCard2 = /* @__PURE__ */ withDisplayName(SSectionHeaderCardRootImpl, "SSectionHeaderCard");
-var SDivider = /* @__PURE__ */ react.forwardRef(function SDivider2({ vertical = false, className, style, ...rest }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "hr",
-    {
-      ref,
-      "aria-orientation": vertical ? "vertical" : "horizontal",
-      className: cn(
-        "shrink-0 border-0",
-        vertical ? "inline-block h-auto w-px self-stretch" : "block h-px w-full",
-        className
-      ),
-      style: { backgroundColor: "var(--sys-color-divider-default, #E1E1E1)", ...style },
-      ...rest
-    }
-  );
-});
 
 // src/lib/scrollbar.ts
 var FIREFOX_SCROLLBAR_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]";
@@ -5479,7 +5508,7 @@ var SSplitterRoot = /* @__PURE__ */ react.forwardRef(function SSplitter({
   vertical = false,
   disabled = false,
   dividerClassName,
-  dividerStyle,
+  dividerStyle: dividerStyle2,
   className,
   style,
   children,
@@ -5604,7 +5633,7 @@ var SSplitterRoot = /* @__PURE__ */ react.forwardRef(function SSplitter({
       ),
       style: {
         ...vertical ? { bottom: HIT_END, height: HIT } : { right: HIT_END, width: HIT },
-        ...dividerStyle
+        ...dividerStyle2
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(
         "span",
@@ -8304,6 +8333,29 @@ function findGnbAncestors(items, value) {
   };
   return walk(items, []) ?? [];
 }
+function findGnbDescendantBranchValues(items, value) {
+  const find = (list) => {
+    for (const item of list) {
+      if (item.value === value) return item;
+      if (item.children) {
+        const found = find(item.children);
+        if (found) return found;
+      }
+    }
+    return void 0;
+  };
+  const collect = (list, acc) => {
+    for (const item of list) {
+      if (item.children && item.children.length > 0) {
+        acc.push(item.value);
+        collect(item.children, acc);
+      }
+    }
+    return acc;
+  };
+  const target = find(items);
+  return target?.children ? collect(target.children, []) : [];
+}
 var LABEL_TIP_HIDE_DELAY_MS = 100;
 var DEPTH_PADDING_LEFT = (M, depth) => depth === 1 ? M.depth1PaddingLeft : depth === 2 ? M.depth2PaddingLeft : M.depth3PaddingLeft;
 var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
@@ -8344,8 +8396,12 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
   const H = GNB_HEADER[header];
   const M = GNB_MENU[type];
   const C = GNB_COLORS[color];
+  const branchWithDescendants = (key) => [
+    key,
+    ...findGnbDescendantBranchValues(items, key)
+  ];
   const [expandedKeys, setExpandedKeys] = react.useState(
-    () => new Set(findGnbAncestors(items, value))
+    () => new Set(findGnbAncestors(items, value).flatMap(branchWithDescendants))
   );
   const [hoveredKey, setHoveredKey] = react.useState(null);
   const [labelTip, setLabelTip] = react.useState(null);
@@ -8392,12 +8448,15 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
     () => findGnbRailValue(items, value) ?? items[0]?.value
   );
   react.useEffect(() => {
-    const ancestors = findGnbAncestors(items, value);
-    if (ancestors.length === 0) return;
+    const keys = findGnbAncestors(items, value).flatMap((ancestor) => [
+      ancestor,
+      ...findGnbDescendantBranchValues(items, ancestor)
+    ]);
+    if (keys.length === 0) return;
     setExpandedKeys((prev) => {
-      if (ancestors.every((a) => prev.has(a))) return prev;
+      if (keys.every((key) => prev.has(key))) return prev;
       const next = new Set(prev);
-      ancestors.forEach((a) => next.add(a));
+      keys.forEach((key) => next.add(key));
       return next;
     });
   }, [items, value]);
@@ -8414,10 +8473,12 @@ var SGnb = /* @__PURE__ */ react.forwardRef(function SGnb2({
     setExpandedKeys((prev) => {
       const next = new Set(prev);
       if (next.has(key)) {
-        next.delete(key);
+        branchWithDescendants(key).forEach((descendant) => next.delete(descendant));
       } else {
-        findGnbSiblingValues(items, key).forEach((sibling) => next.delete(sibling));
-        next.add(key);
+        findGnbSiblingValues(items, key).forEach(
+          (sibling) => branchWithDescendants(sibling).forEach((descendant) => next.delete(descendant))
+        );
+        branchWithDescendants(key).forEach((descendant) => next.add(descendant));
       }
       return next;
     });