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

package/dist/index.js

@@ -16728,6 +16728,7 @@ var STableImpl = /* @__PURE__ */ forwardRef(function STable({
   onContextMenuItemClick,
   isRowSelectable,
   isRowIndeterminate,
+  rowClassName,
   selected = [],
   onSelectedChange,
   sort = null,
@@ -17624,7 +17625,8 @@ var STableImpl = /* @__PURE__ */ 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: [
@@ -17904,6 +17906,8 @@ var STableBar = /* @__PURE__ */ forwardRef(function STableBar2({ title, total, s
     }
   );
 });
+var NO_KEYS = /* @__PURE__ */ new Set();
+var ROW_ENTER_MS = 200;
 function STreeTable({
   rows = [],
   columns = [],
@@ -17916,6 +17920,7 @@ function STreeTable({
   onExpandedChange,
   selectable = false,
   isRowSelectable,
+  rowClassName,
   selected = [],
   onSelectedChange,
   ...rest
@@ -17960,6 +17965,21 @@ function STreeTable({
     walk(rows);
     return out;
   }, [rows, expandedSet, rowKey, childrenKey]);
+  const [enteringKeys, setEnteringKeys] = useState(NO_KEYS);
+  const prevVisibleRef = 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]);
+  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();
@@ -18018,16 +18038,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__ */ 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__ */ jsx(
+                TreeCell,
+                {
+                  depth: entry?.depth ?? 0,
+                  hasChildren,
+                  expanded: expandedSet.has(keyOf(row)),
+                  children: col.render ? col.render(row, value) : value
+                }
+              )
             }
           );
         }
@@ -18047,16 +18082,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__ */ jsxs(
@@ -18067,18 +18113,17 @@ function TreeCell({
         paddingLeft: `calc(${depth} * (var(--cmp-ghostButton-xxs-size) + var(--cmp-tree-item-contentGap)))`
       },
       children: [
-        hasChildren ? /* @__PURE__ */ 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__ */ jsx("span", { "data-tree-toggle": true, className: "flex shrink-0", children: /* @__PURE__ */ jsx(
+            SGhostButton,
+            {
+              icon: expanded ? "caretDown" : "caretRight",
+              size: "xxs",
+              ariaLabel: expanded ? "collapse row" : "expand row",
+              ariaExpanded: expanded
             }
-          }
+          ) })
         ) : (
           // 하위 행이 없는 행도 버튼 자리를 비워 형제끼리 내용의 시작점을 맞춘다
           /* @__PURE__ */ jsx("span", { className: "size-(--cmp-ghostButton-xxs-size) shrink-0", "aria-hidden": "true" })
@@ -23165,7 +23210,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
             },