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

package/dist/index.cjs

@@ -7596,10 +7596,7 @@ function toSelectedSet(value) {
   return new Set(value ?? []);
 }
 var TREE_ALL_NODE = { id: "__all__", label: "\uC804\uCCB4" };
-function getSelectionState(node, selectedSet, cascadeSelection) {
-  if (!cascadeSelection) {
-    return { selected: selectedSet.has(node.id), indeterminate: false };
-  }
+function getSelectionState(node, selectedSet) {
   const selectableChildren = (node.children ?? []).filter(
     (child) => collectSelectableIds(child).length > 0
   );
@@ -7607,7 +7604,7 @@ function getSelectionState(node, selectedSet, cascadeSelection) {
     return { selected: selectedSet.has(node.id), indeterminate: false };
   }
   const childStates = selectableChildren.map(
-    (child) => getSelectionState(child, selectedSet, cascadeSelection)
+    (child) => getSelectionState(child, selectedSet)
   );
   const selectedCount = childStates.filter((state2) => state2.selected).length;
   return {
@@ -7878,7 +7875,6 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
   selectable = true,
   size = "sm",
   showSelectAll = false,
-  cascadeSelection = true,
   guideline = true,
   border = true,
   leading,
@@ -7939,8 +7935,8 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
   };
   const updateSelected = (node) => {
     if (node.disabled) return;
-    const targetIds = cascadeSelection ? collectSelectableIds(node) : [node.id];
-    const everySelected = getSelectionState(node, selectedSet, cascadeSelection).selected;
+    const targetIds = collectSelectableIds(node);
+    const everySelected = getSelectionState(node, selectedSet).selected;
     const next = new Set(selectedSet);
     targetIds.forEach((id) => {
       if (everySelected) next.delete(id);
@@ -8018,7 +8014,7 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
   const renderNodes = (nodes, depth = 1, ancestorLast = []) => nodes.map((node, index) => {
     const isLast = index === nodes.length - 1;
     const isExpanded = expandedSet.has(node.id);
-    const { selected, indeterminate } = getSelectionState(node, selectedSet, cascadeSelection);
+    const { selected, indeterminate } = getSelectionState(node, selectedSet);
     return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         STreeItem2,
@@ -16759,6 +16755,8 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
   contextMenuItems,
   onContextMenuItemClick,
   isRowSelectable,
+  isRowIndeterminate,
+  rowClassName,
   selected = [],
   onSelectedChange,
   sort = null,
@@ -17655,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: [
@@ -17685,7 +17684,7 @@ var STableImpl = /* @__PURE__ */ react.forwardRef(function STable({
                                         children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex select-none items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
                                           SCheckbox,
                                           {
-                                            value: isSel,
+                                            value: isSel || !isRowIndeterminate?.(row) ? isSel : null,
                                             disabled: !canSelectRow(row),
                                             onValueChange: () => toggleRow(row, rowOffset + ri)
                                           }
@@ -17935,6 +17934,233 @@ var STableBar = /* @__PURE__ */ react.forwardRef(function STableBar2({ title, to
     }
   );
 });
+var NO_KEYS = /* @__PURE__ */ new Set();
+var ROW_ENTER_MS = 200;
+function STreeTable({
+  rows = [],
+  columns = [],
+  rowKey = "id",
+  childrenKey = "children",
+  resizable = true,
+  treeColumn,
+  expandedKeys,
+  defaultExpandedKeys,
+  onExpandedChange,
+  selectable = false,
+  isRowSelectable,
+  rowClassName,
+  selected = [],
+  onSelectedChange,
+  ...rest
+}) {
+  const keyOf = (row) => row[rowKey];
+  const childrenOf = (row) => {
+    const children = row[childrenKey];
+    return Array.isArray(children) ? children : [];
+  };
+  const canSelectRow = (row) => isRowSelectable ? isRowSelectable(row) : true;
+  const entries4 = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    const walk = (nodes, depth, parentKey) => {
+      nodes.forEach((row) => {
+        const children = childrenOf(row);
+        map.set(keyOf(row), { row, depth, children, parentKey });
+        walk(children, depth + 1, keyOf(row));
+      });
+    };
+    walk(rows, 0, null);
+    return map;
+  }, [rows, rowKey, childrenKey]);
+  const [innerExpandedKeys, setInnerExpandedKeys] = react.useState(
+    () => defaultExpandedKeys ?? rows.filter((row) => childrenOf(row).length > 0).map(keyOf)
+  );
+  const currentExpandedKeys = expandedKeys ?? innerExpandedKeys;
+  const expandedSet = react.useMemo(() => new Set(currentExpandedKeys), [currentExpandedKeys]);
+  const toggleExpanded = (row) => {
+    const key = keyOf(row);
+    const next = expandedSet.has(key) ? currentExpandedKeys.filter((k) => k !== key) : [...currentExpandedKeys, key];
+    if (expandedKeys === void 0) setInnerExpandedKeys(next);
+    onExpandedChange?.(next, row);
+  };
+  const visibleRows = react.useMemo(() => {
+    const out = [];
+    const walk = (nodes) => {
+      nodes.forEach((row) => {
+        out.push(row);
+        if (expandedSet.has(keyOf(row))) walk(childrenOf(row));
+      });
+    };
+    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();
+    const visit = (row) => {
+      const children = childrenOf(row);
+      const childStates = children.map(visit);
+      const counted = childStates.filter((_, i) => canSelectRow(children[i]));
+      const result = counted.length === 0 ? { selected: keys.has(keyOf(row)), indeterminate: false } : {
+        selected: counted.every((s) => s.selected),
+        indeterminate: !counted.every((s) => s.selected) && counted.some((s) => s.selected || s.indeterminate)
+      };
+      state2.set(keyOf(row), result);
+      return result;
+    };
+    rows.forEach(visit);
+    return state2;
+  };
+  const selectionState = react.useMemo(
+    () => selectable ? selectionOf(new Set(selected.map(keyOf))) : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selectable, selected, entries4, isRowSelectable]
+  );
+  const tableSelected = react.useMemo(() => {
+    if (!selectionState) return selected;
+    return [...entries4.values()].filter((entry) => selectionState.get(keyOf(entry.row))?.selected).map((entry) => entry.row);
+  }, [selectionState, selected, entries4]);
+  const handleSelectedChange = (next) => {
+    const prevKeys = new Set(tableSelected.map(keyOf));
+    const nextKeys = new Set(next.map(keyOf));
+    const keys = new Set(prevKeys);
+    prevKeys.forEach((key) => {
+      if (nextKeys.has(key)) return;
+      const entry = entries4.get(key);
+      keys.delete(key);
+      if (entry) collectSelectable(entry.row).forEach((row) => keys.delete(keyOf(row)));
+    });
+    nextKeys.forEach((key) => {
+      if (prevKeys.has(key)) return;
+      const entry = entries4.get(key);
+      keys.add(key);
+      if (entry) collectSelectable(entry.row).forEach((row) => keys.add(keyOf(row)));
+    });
+    const state2 = selectionOf(keys);
+    onSelectedChange?.(
+      [...entries4.values()].filter((entry) => state2.get(keyOf(entry.row))?.selected).map((entry) => entry.row)
+    );
+  };
+  const treeColumnName = treeColumn ?? columns.find((col) => col.visible !== false)?.name;
+  const tableColumns = react.useMemo(
+    () => columns.map((col) => {
+      if (col.name !== treeColumnName) return col;
+      if (col.renderCell) {
+        throw new Error(
+          `[STreeTable] \uD2B8\uB9AC \uCEEC\uB7FC(${col.name})\uC5D0\uB294 renderCell \uC744 \uC4F8 \uC218 \uC5C6\uC2B5\uB2C8\uB2E4. render \uB97C \uC4F0\uC138\uC694.`
+        );
+      }
+      return {
+        ...col,
+        // 셀 전체를 펼침 영역으로 쓰려면 <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(
+            "td",
+            {
+              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
+                }
+              )
+            }
+          );
+        }
+      };
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [columns, treeColumnName, entries4, expandedSet, currentExpandedKeys]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    STable2,
+    {
+      ...rest,
+      columns: tableColumns,
+      rows: visibleRows,
+      rowKey,
+      resizable,
+      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,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "flex min-w-0 items-center gap-(--cmp-tree-item-contentGap)",
+      style: {
+        paddingLeft: `calc(${depth} * (var(--cmp-ghostButton-xxs-size) + var(--cmp-tree-item-contentGap)))`
+      },
+      children: [
+        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" })
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children })
+      ]
+    }
+  );
+}
 var HIDE_DELAY_MS2 = 100;
 function mergeRefs(...refs) {
   return (node) => {
@@ -23012,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
             },
@@ -28783,6 +29010,7 @@ exports.SToggle = SToggle;
 exports.STooltip = STooltip2;
 exports.STree = STree2;
 exports.STreeItem = STreeItem2;
+exports.STreeTable = STreeTable;
 exports.SYSTEM_ACTION_BUTTON_COLORS = SYSTEM_ACTION_BUTTON_COLORS;
 exports.SYSTEM_ACTION_BUTTON_COLOR_CONFIG = SYSTEM_ACTION_BUTTON_COLOR_CONFIG;
 exports.SYSTEM_ACTION_BUTTON_LAYOUT = SYSTEM_ACTION_BUTTON_LAYOUT;