sellmate-design-system-react 9.0.0-beta.88 → 9.0.0-beta.89

package/AGENTS.md

@@ -1960,7 +1960,9 @@ const [from, setFrom] = useState<string | null>(null);
 - **하위 행은 각 행의 `children` 에 같은 모양으로 넣는다.** 필드 이름이 다르면 `childrenKey` 로 알려 준다. 평평한 목록에 `parentId` 를 달아 넘기지 않는다 — 계층으로 바꿔서 넘긴다.
 - **펼침 버튼·들여쓰기는 컴포넌트가 그린다.** 기본은 보이는 첫 컬럼이고 `treeColumn` 으로 옮긴다. 그 컬럼은 왼쪽 정렬로 두고, 셀 내용은 `render`·`format` 으로 바꾼다 — `renderCell` 은 펼침 버튼을 넣을 자리가 없어 에러가 난다.
 - **셀 병합은 가로(`colSpan`)만 한다.** 트리 컬럼이 아닌 컬럼은 `renderCell` 로 `<td>` 를 바꿀 수 있고, 한 행 안에서 끝나는 `colSpan` 은 접고 펴도 그대로다. **`rowSpan` 으로 세로 병합하지 않는다** — 행이 접히면 사라진 행 몫까지 병합이 남아 아래 행의 칸을 덮고, 덮인 행의 칸은 옆 컬럼으로 밀려난다. 부모와 하위 행에 같은 값이 반복되면 부모 행에만 쓰고 하위 행은 비워 둔다.
-- **행 클릭은 펼침이 아니다.** 펼침 버튼만 펼치고 접는다. 행 클릭(`onRowClick`)은 상세 열기 같은 자기 일을 그대로 한다.
+- **펼침 영역은 트리 컬럼 셀 전체다.** 하위 행이 있는 행은 펼침 버튼뿐 아니라 그 셀 어디를 눌러도 접고 편다. 다른 셀을 누르면 행 클릭(`onRowClick`)이다 — 트리 컬럼 셀을 누른 것은 행 클릭으로 가지 않는다.
+- **펼침 모션은 컴포넌트가 넣는다.** 펼쳐서 새로 보이게 된 행이 위에서 내려오며 나타나고(접을 때는 바로 사라진다), 모션을 줄인 환경에서는 꺼진다. 행에 애니메이션 클래스를 직접 붙이지 않는다.
+- **트리 컬럼에 링크·버튼을 넣어도 된다.** 셀 안의 링크·버튼·입력을 누르면 그 동작만 일어나고 펼침은 일어나지 않는다 — `stopPropagation` 을 직접 넣지 않는다. 상품명을 상세 링크로 거는 것처럼 쓴다.
 - **선택은 계층을 따른다.** 부모를 고르면 접힌 하위 행까지 함께 골라지고, 일부만 골라진 부모는 "일부 선택"으로 그려진다. 하위 행이 모두 골라지면 부모도 `selected` 에 들어간다 — 처리 대상이 잎 행뿐이면 받은 목록에서 하위 행이 없는 행만 걸러 쓴다.
 - **가로로 스크롤되는 표는 트리 컬럼을 왼쪽에 고정한다**(`stickyColumn={{ left: 1 }}`, 트리 컬럼이 첫 컬럼일 때). 스크롤로 들여쓰기가 밀려나면 어느 행이 누구의 하위인지 읽히지 않는다. 체크박스 열은 `selectable` 이면 늘 고정되므로 개수에 넣지 않는다.
 - **컬럼 폭 조절(`resizable`)은 `STable` 과 달리 기본으로 켜져 있다.** 폭이 고정이어야 하는 표만 `resizable={false}` 로 끈다.

package/dist/components/SRadioButton/README.md

@@ -12,7 +12,7 @@
 | `value?` | `string \| number \| null` | — | 현재 선택 값 |
 | `size?` | `SRadioButtonSize` | `'sm'` | 크기 |
 | `disabled?` | `boolean` | `false` | 전체 비활성 |
-| `readOnly?` | `boolean` | `false` | 읽기 전용. 선택 값을 보여주기만 하고 바꿀 수 없다. 모든 버튼이 readOnly 배경, 선택된 버튼만 readOnly 테두리·기본 글자색으로 구분하고 선택되지 않은 버튼의 글자는 disabled 색이다. 포커스·툴팁은 유지된다. `disabled`(그룹·옵션)가 함께 오면 disabled 가 우선한다. |
+| `readOnly?` | `boolean` | `false` | 읽기 전용. 선택 값을 보여주기만 하고 바꿀 수 없다. 모든 버튼이 readOnly 배경, 선택된 버튼만 readOnly 테두리·기본 글자색으로 구분하고 선택되지 않은 버튼은 글자가 disabled 색이고 반투명하게 흐려진다. 포커스·툴팁은 유지된다. `disabled`(그룹·옵션)가 함께 오면 disabled 가 우선한다. |
 | `name?` | `string` | — | input name 속성 |
 | `showTooltip?` | `boolean` | `false` | 옵션 호버 시 툴팁 노출. 문구는 옵션별 `tooltip` 으로 주며, 문구가 없는 옵션은 툴팁을 띄우지 않는다. 툴팁 타입은 `accent` 고정이다. |
 | `className?` | `string` | — |  |

package/dist/components/SRadioButton/SRadioButton.d.ts

@@ -19,7 +19,7 @@ export interface SRadioButtonProps {
     /**
      * 읽기 전용. 선택 값을 보여주기만 하고 바꿀 수 없다.
      * 모든 버튼이 readOnly 배경, 선택된 버튼만 readOnly 테두리·기본 글자색으로 구분하고
-     * 선택되지 않은 버튼의 글자는 disabled 색이다.
+     * 선택되지 않은 버튼은 글자가 disabled 색이고 반투명하게 흐려진다.
      * 포커스·툴팁은 유지된다. `disabled`(그룹·옵션)가 함께 오면 disabled 가 우선한다.
      */
     readOnly?: boolean;

package/dist/components/STable/README.md

@@ -17,6 +17,7 @@
 | `contextMenuItems?` | `STableContextMenuItem[]` | — | 드래그 선택에서 **행을 오른쪽 클릭했을 때** 커서 자리에 뜨는 메뉴의 항목. 주지 않거나 비면 메뉴가 뜨지 않고 브라우저 기본 메뉴가 나온다. **`dragSelectable` 에서만 동작한다** — 체크박스 모드에서는 무시된다. 고르지 않은 행에서 누르면 **그 행만 고른 뒤** 열린다. 메뉴가 다룰 대상과 화면에 칠해진 것이 어긋나지 않게 하기 위함이다. 잠긴 행(`isRowSelectable`) 위에서는 열리지 않는다 — 고를 수 없는 행을 대상으로 삼을 수 없기 때문이다. |
 | `isRowSelectable?` | `(row: TRow) => boolean` | — | 이 행을 고를 수 있는가. 주지 않으면 모든 행을 고를 수 있다. 고를 수 없는 행은 체크박스가 잠기고, **전체 선택·Shift 구간 선택의 셈에서도 빠진다** — 잠긴 행이 셈에 남으면 "전부 선택됨"에 닿지 못해 헤더 체크박스가 해제 방향으로 가지 못한다. 목록에서 지워 버리는 것과 다르다. 실패 0건인 차수처럼 **자리는 보여야 하지만 대상이 될 수는 없는 행**에 쓴다. 아예 대상이 아니라면 `rows` 에서 거르는 편이 낫다. 잠금은 그리기 시점의 판정일 뿐이라, 이미 `selected` 에 든 행이 나중에 잠겨도 DS 가 빼지 않는다(제어 상태를 말없이 바꾸지 않는다). 다만 헤더의 전체 해제로는 걷어낼 수 있다. |
 | `isRowIndeterminate?` | `(row: TRow) => boolean` | — | 이 행의 체크박스를 "일부 선택"(indeterminate)으로 그리는가. 주지 않으면 그리지 않는다. **표시만 바꾼다** — 선택 상태(`selected`)와 클릭 동작은 그대로다. 일부 선택된 행을 누르면 선택되지 않은 행을 누른 것과 같이 `selected` 에 더해진다. 선택된 행(`selected` 에 든 행)은 이 값과 무관하게 체크로 그린다. 하위 행을 가진 행처럼 **"아래가 일부만 골라졌다"를 행 스스로 말해야 하는 표**에 쓴다. 계층 선택을 통째로 맡기려면 `STreeTable` 을 쓴다 — 이 prop 은 그 표가 쓰는 통로다. |
+| `rowClassName?` | `(row: TRow) => string \| undefined` | — | 행(`<tr>`)에 더할 클래스. 행마다 다른 클래스를 줄 수 있다. 색·여백은 여기서 주지 않는다 — 셀이 배경을 칠하므로 행 배경은 보이지 않고, 여백은 토큰이 정한다. 행 전체에 걸리는 모션처럼 **셀 단위로는 줄 수 없는 것**만 쓴다. 셀 하나의 모양은 컬럼의 `tdClass` 다. |
 | `selected?` | `TRow[]` | `[]` |  |
 | `sort?` | `STableSort \| null` | `null` | 정렬 상태 (controlled). `null`·미지정이면 정렬 없음. 컴포넌트는 정렬 상태를 갖지 않는다 — 서버 정렬이면 이 값이 곧 조회 조건이고, 뒤로가기·새로고침·링크 공유로 복원돼야 하므로 진실은 URL·store 쪽에 있어야 한다. 행을 실제로 정렬하는 것도 소비 앱 몫이다 (`STable` 은 받은 순서대로 그린다). |
 | `resizable?` | `boolean` | `false` | 컬럼 너비 조절 |

package/dist/components/STable/STable.d.ts

@@ -309,6 +309,13 @@ export interface STableProps<TRow extends SRow = SRow> {
      * @nodemo 사용 예는 STreeTable 의 선택 데모가 보여준다 — 계층 없이 이 prop 만 쓰는 화면은 없다.
      */
     isRowIndeterminate?: (row: TRow) => boolean;
+    /**
+     * 행(`<tr>`)에 더할 클래스. 행마다 다른 클래스를 줄 수 있다.
+     *
+     * 색·여백은 여기서 주지 않는다 — 셀이 배경을 칠하므로 행 배경은 보이지 않고, 여백은 토큰이 정한다.
+     * 행 전체에 걸리는 모션처럼 **셀 단위로는 줄 수 없는 것**만 쓴다. 셀 하나의 모양은 컬럼의 `tdClass` 다.
+     */
+    rowClassName?: (row: TRow) => string | undefined;
     selected?: TRow[];
     onSelectedChange?: (rows: TRow[]) => void;
     /**

package/dist/components/STreeTable/README.md

@@ -11,7 +11,7 @@
 | `rows?` | `TRow[]` | `[]` | 최상위 행. 하위 행은 각 행의 `childrenKey` 필드에 같은 모양으로 넣는다. 펼친 행만 표에 그려진다. 나머지 prop(`columns` · `selectable` · `sort` · `stickyColumn` · `virtualScroll` …)은 `STable` 과 같다. `STable` 처럼 행을 직접 정렬하지 않고 받은 순서대로 그리므로, 정렬하려면 소비 앱이 **형제끼리** 정렬해 넘긴다. 그리는 행이 펼침에 따라 늘고 줄므로, 컬럼의 `renderCell` 로 **`rowSpan` 세로 병합을 하지 않는다** — 행이 접히면 사라진 행 몫까지 병합이 남아 아래 행의 칸을 덮는다. 한 행 안의 `colSpan` 은 된다. |
 | `childrenKey?` | `string` | `'children'` | 하위 행 배열이 든 필드 |
 | `resizable?` | `boolean` | `true` | 컬럼 폭 조절. **`STable` 과 달리 기본이 `true` 다** — 깊이에 따라 트리 컬럼이 필요로 하는 폭이 달라 화면마다 맞는 폭을 미리 정하기 어렵다. 폭이 고정이어야 하는 표만 `false` 로 끈다. 켜 두면 트리 컬럼에 `minWidth` 를 준다. 하한이 없으면 들여쓰기보다 좁게 줄어 깊은 행의 이름이 통째로 가려진다. |
-| `treeColumn?` | `string` | — | 펼침 버튼과 들여쓰기가 붙는 컬럼의 `name`. 주지 않으면 보이는 첫 컬럼이다. 이 컬럼에는 `renderCell` 을 쓰지 않는다 — `<td>` 를 통째로 바꾸면 펼침 버튼을 넣을 자리가 없다. 셀 내용은 `render` · `format` 으로 바꾼다. 들여쓰기가 왼쪽에서 쌓이므로 `align` 은 왼쪽으로 둔다. |
+| `treeColumn?` | `string` | — | 펼침 버튼과 들여쓰기가 붙는 컬럼의 `name`. 주지 않으면 보이는 첫 컬럼이다. 하위 행이 있는 행은 **이 셀 전체가 펼침 영역**이다 — 어디를 눌러도 접고 펴고, 행 클릭(`onRowClick`)으로는 가지 않는다. 셀 안에 넣은 링크·버튼·입력은 자기 동작만 하고 펼침은 일어나지 않는다. 이 컬럼에는 `renderCell` 을 쓰지 않는다 — `<td>` 를 통째로 바꾸면 펼침 버튼을 넣을 자리가 없다. 셀 내용은 `render` · `format` 으로 바꾼다. 들여쓰기가 왼쪽에서 쌓이므로 `align` 은 왼쪽으로 둔다. |
 | `expandedKeys?` | `STreeTableKey[]` | — | 펼친 행의 키 목록 (controlled) |
 | `defaultExpandedKeys?` | `STreeTableKey[]` | — | 비제어 펼침 초기값. 주지 않으면 하위 행이 있는 최상위 행이 펼쳐진 채로 시작한다 (`STree` 와 같다) |
 | `selected?` | `TRow[]` | `[]` | 고른 행 (controlled). 접혀서 보이지 않는 행도 들어 있을 수 있다. 선택은 계층을 따른다. 부모를 고르면 하위 행이 모두 함께 골라지고, 하위 행이 일부만 골라진 부모는 체크박스가 "일부 선택"으로 그려진다. 하위 행이 모두 골라지면 부모도 골라진 것으로 친다 — `onSelectedChange` 로 오는 목록에 부모가 들어간다. 고를 수 없는 행(`isRowSelectable`)과 그 아래는 함께 골라지지 않는다. |

package/dist/components/STreeTable/STreeTable.d.ts

@@ -35,6 +35,9 @@ export interface STreeTableProps<TRow extends SRow = SRow> extends Omit<STablePr
     /**
      * 펼침 버튼과 들여쓰기가 붙는 컬럼의 `name`. 주지 않으면 보이는 첫 컬럼이다.
      *
+     * 하위 행이 있는 행은 **이 셀 전체가 펼침 영역**이다 — 어디를 눌러도 접고 펴고, 행 클릭(`onRowClick`)으로는
+     * 가지 않는다. 셀 안에 넣은 링크·버튼·입력은 자기 동작만 하고 펼침은 일어나지 않는다.
+     *
      * 이 컬럼에는 `renderCell` 을 쓰지 않는다 — `<td>` 를 통째로 바꾸면 펼침 버튼을 넣을 자리가 없다.
      * 셀 내용은 `render` · `format` 으로 바꾼다. 들여쓰기가 왼쪽에서 쌓이므로 `align` 은 왼쪽으로 둔다.
      */
@@ -63,5 +66,5 @@ export interface STreeTableProps<TRow extends SRow = SRow> extends Omit<STablePr
  * 계층을 펼친 순서의 평평한 행 목록으로 바꿔 `STable` 에 넘기고, 트리 컬럼 셀에 들여쓰기와
  * 펼침 버튼을 넣는다. 그래서 헤더·셀·테두리·밀도·정렬 버튼·sticky·가상 스크롤은 `STable` 과 같다.
  */
-export declare function STreeTable<TRow extends SRow = SRow>({ rows, columns, rowKey, childrenKey, resizable, treeColumn, expandedKeys, defaultExpandedKeys, onExpandedChange, selectable, isRowSelectable, selected, onSelectedChange, ...rest }: STreeTableProps<TRow>): ReactElement | null;
+export declare function STreeTable<TRow extends SRow = SRow>({ rows, columns, rowKey, childrenKey, resizable, treeColumn, expandedKeys, defaultExpandedKeys, onExpandedChange, selectable, isRowSelectable, rowClassName, selected, onSelectedChange, ...rest }: STreeTableProps<TRow>): ReactElement | null;
 export {};

package/dist/index.cjs

@@ -16756,6 +16756,7 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
   onContextMenuItemClick,
   isRowSelectable,
   isRowIndeterminate,
+  rowClassName,
   selected = [],
   onSelectedChange,
   sort = null,
@@ -17652,7 +17653,8 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
                                     "group/table-row",
                                     rowHover && "hover:bg-[var(--color-grey-05)]",
                                     (onRowClick || onRowDoubleClick) && "cursor-pointer",
-                                    dragSelectOn && "select-none"
+                                    dragSelectOn && "select-none",
+                                    rowClassName?.(row)
                                   ),
                                   style: { height: virtualScroll ? effectiveRowHeight : rowH },
                                   children: [
@@ -17932,6 +17934,8 @@ var STableBar = /* @__PURE__ */ react.forwardRef(function STableBar2({ title, to
     }
   );
 });
+var NO_KEYS = /* @__PURE__ */ new Set();
+var ROW_ENTER_MS = 200;
 function STreeTable({
   rows = [],
   columns = [],
@@ -17944,6 +17948,7 @@ function STreeTable({
   onExpandedChange,
   selectable = false,
   isRowSelectable,
+  rowClassName,
   selected = [],
   onSelectedChange,
   ...rest
@@ -17988,6 +17993,21 @@ function STreeTable({
     walk(rows);
     return out;
   }, [rows, expandedSet, rowKey, childrenKey]);
+  const [enteringKeys, setEnteringKeys] = react.useState(NO_KEYS);
+  const prevVisibleRef = react.useRef(null);
+  useIsomorphicLayoutEffect(() => {
+    const keys = new Set(visibleRows.map(keyOf));
+    const prev = prevVisibleRef.current;
+    prevVisibleRef.current = { rows, keys };
+    if (!prev || prev.rows !== rows) return;
+    const added = [...keys].filter((key) => !prev.keys.has(key));
+    if (added.length > 0) setEnteringKeys(new Set(added));
+  }, [visibleRows]);
+  react.useEffect(() => {
+    if (enteringKeys.size === 0) return;
+    const timer = setTimeout(() => setEnteringKeys(NO_KEYS), ROW_ENTER_MS);
+    return () => clearTimeout(timer);
+  }, [enteringKeys]);
   const collectSelectable = (row) => canSelectRow(row) ? [row, ...childrenOf(row).flatMap(collectSelectable)] : [];
   const selectionOf = (keys) => {
     const state2 = /* @__PURE__ */ new Map();
@@ -18046,16 +18066,31 @@ function STreeTable({
       }
       return {
         ...col,
-        render: (row, value) => {
+        // 셀 전체를 펼침 영역으로 쓰려면 <td> 에 손을 대야 해서 render 가 아니라 renderCell 로 그린다.
+        // 소비 앱의 render 는 그 안쪽 내용 자리에 그대로 들어간다.
+        renderCell: ({ row, value, className, style }) => {
           const entry = entries4.get(keyOf(row));
+          const hasChildren = (entry?.children.length ?? 0) > 0;
           return /* @__PURE__ */ jsxRuntime.jsx(
-            TreeCell,
+            "td",
             {
-              depth: entry?.depth ?? 0,
-              hasChildren: (entry?.children.length ?? 0) > 0,
-              expanded: expandedSet.has(keyOf(row)),
-              onToggle: () => toggleExpanded(row),
-              children: col.render ? col.render(row, value) : value
+              className: cn(className, hasChildren && "cursor-pointer"),
+              style,
+              onClick: hasChildren ? (event) => {
+                if (isOwnControl(event.target, event.currentTarget)) return;
+                event.stopPropagation();
+                toggleExpanded(row);
+              } : void 0,
+              onDoubleClick: hasChildren ? (event) => event.stopPropagation() : void 0,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                TreeCell,
+                {
+                  depth: entry?.depth ?? 0,
+                  hasChildren,
+                  expanded: expandedSet.has(keyOf(row)),
+                  children: col.render ? col.render(row, value) : value
+                }
+              )
             }
           );
         }
@@ -18075,16 +18110,27 @@ function STreeTable({
       selectable,
       isRowSelectable,
       isRowIndeterminate: selectionState ? (row) => !!selectionState.get(keyOf(row))?.indeterminate : void 0,
+      rowClassName: (row) => cn(
+        rowClassName?.(row),
+        // 위에서 4px 내려오며 나타난다(theme.css --animate-table-row-in). 모션을 줄인 환경에서는 끈다
+        enteringKeys.has(keyOf(row)) && "motion-safe:animate-table-row-in"
+      ) || void 0,
       selected: tableSelected,
       onSelectedChange: handleSelectedChange
     }
   );
 }
+var OWN_CONTROL_SELECTOR = 'a, button, input, select, textarea, label, [role="button"], [role="checkbox"], [contenteditable="true"]';
+function isOwnControl(target, cell) {
+  if (!(target instanceof Element)) return false;
+  if (target.closest("[data-tree-toggle]")) return false;
+  const control = target.closest(OWN_CONTROL_SELECTOR);
+  return control != null && cell.contains(control);
+}
 function TreeCell({
   depth,
   hasChildren,
   expanded,
-  onToggle,
   children
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -18095,18 +18141,17 @@ function TreeCell({
         paddingLeft: `calc(${depth} * (var(--cmp-ghostButton-xxs-size) + var(--cmp-tree-item-contentGap)))`
       },
       children: [
-        hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
-          SGhostButton,
-          {
-            icon: expanded ? "caretDown" : "caretRight",
-            size: "xxs",
-            ariaLabel: expanded ? "collapse row" : "expand row",
-            ariaExpanded: expanded,
-            onClick: (event) => {
-              event.stopPropagation();
-              onToggle();
+        hasChildren ? (
+          // 누르면(키보드 Enter·Space 포함) 클릭이 셀로 올라가 셀이 접고 편다 — 버튼은 따로 처리하지 않는다
+          /* @__PURE__ */ jsxRuntime.jsx("span", { "data-tree-toggle": true, className: "flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
+            SGhostButton,
+            {
+              icon: expanded ? "caretDown" : "caretRight",
+              size: "xxs",
+              ariaLabel: expanded ? "collapse row" : "expand row",
+              ariaExpanded: expanded
             }
-          }
+          ) })
         ) : (
           // 하위 행이 없는 행도 버튼 자리를 비워 형제끼리 내용의 시작점을 맞춘다
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-(--cmp-ghostButton-xxs-size) shrink-0", "aria-hidden": "true" })
@@ -23193,7 +23238,8 @@ function SRadioButton({
                 ].join(" "),
                 background: od ? "var(--cmp-radioButton-bg-disabled)" : ro ? "var(--cmp-radioButton-bg-readOnly)" : "var(--cmp-radioButton-bg-default)",
                 borderColor: od ? "var(--cmp-radioButton-border-disabled)" : selected ? ro ? "var(--cmp-radioButton-border-readOnly)" : "var(--cmp-radioButton-border-select)" : "var(--cmp-radioButton-border-default)",
-                color: od || ro && !selected ? "var(--cmp-radioButton-content-disabled)" : selected && !ro ? "var(--cmp-radioButton-content-select)" : "var(--cmp-radioButton-content-default)"
+                color: od || ro && !selected ? "var(--cmp-radioButton-content-disabled)" : selected && !ro ? "var(--cmp-radioButton-content-select)" : "var(--cmp-radioButton-content-default)",
+                opacity: ro && !selected ? "var(--opacity-060)" : void 0
               },
               children: o.label
             },