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

package/dist/index.d.ts

@@ -60,6 +60,7 @@ export * from './components/SStepper';
 export * from './components/SCalendarBoard';
 export * from './components/STable';
 export * from './components/STableBar';
+export * from './components/STreeTable';
 export * from './components/SKeyValueTable';
 export * from './components/SBarChart';
 export * from './components/SLineChart';

package/dist/index.js

@@ -7568,10 +7568,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
   );
@@ -7579,7 +7576,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 {
@@ -7850,7 +7847,6 @@ var STreeImpl = /* @__PURE__ */ forwardRef(function STree({
   selectable = true,
   size = "sm",
   showSelectAll = false,
-  cascadeSelection = true,
   guideline = true,
   border = true,
   leading,
@@ -7911,8 +7907,8 @@ var STreeImpl = /* @__PURE__ */ 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);
@@ -7990,7 +7986,7 @@ var STreeImpl = /* @__PURE__ */ 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__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(
         STreeItem2,
@@ -16731,6 +16727,7 @@ var STableImpl = /* @__PURE__ */ forwardRef(function STable({
   contextMenuItems,
   onContextMenuItemClick,
   isRowSelectable,
+  isRowIndeterminate,
   selected = [],
   onSelectedChange,
   sort = null,
@@ -17657,7 +17654,7 @@ var STableImpl = /* @__PURE__ */ forwardRef(function STable({
                                         children: /* @__PURE__ */ jsx("div", { className: "flex select-none items-center justify-center", children: /* @__PURE__ */ jsx(
                                           SCheckbox,
                                           {
-                                            value: isSel,
+                                            value: isSel || !isRowIndeterminate?.(row) ? isSel : null,
                                             disabled: !canSelectRow(row),
                                             onValueChange: () => toggleRow(row, rowOffset + ri)
                                           }
@@ -17907,6 +17904,190 @@ var STableBar = /* @__PURE__ */ forwardRef(function STableBar2({ title, total, s
     }
   );
 });
+function STreeTable({
+  rows = [],
+  columns = [],
+  rowKey = "id",
+  childrenKey = "children",
+  resizable = true,
+  treeColumn,
+  expandedKeys,
+  defaultExpandedKeys,
+  onExpandedChange,
+  selectable = false,
+  isRowSelectable,
+  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 = 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] = useState(
+    () => defaultExpandedKeys ?? rows.filter((row) => childrenOf(row).length > 0).map(keyOf)
+  );
+  const currentExpandedKeys = expandedKeys ?? innerExpandedKeys;
+  const expandedSet = 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 = 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 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 = useMemo(
+    () => selectable ? selectionOf(new Set(selected.map(keyOf))) : null,
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [selectable, selected, entries4, isRowSelectable]
+  );
+  const tableSelected = 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 = 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,
+        render: (row, value) => {
+          const entry = entries4.get(keyOf(row));
+          return /* @__PURE__ */ jsx(
+            TreeCell,
+            {
+              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
+            }
+          );
+        }
+      };
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [columns, treeColumnName, entries4, expandedSet, currentExpandedKeys]
+  );
+  return /* @__PURE__ */ jsx(
+    STable2,
+    {
+      ...rest,
+      columns: tableColumns,
+      rows: visibleRows,
+      rowKey,
+      resizable,
+      selectable,
+      isRowSelectable,
+      isRowIndeterminate: selectionState ? (row) => !!selectionState.get(keyOf(row))?.indeterminate : void 0,
+      selected: tableSelected,
+      onSelectedChange: handleSelectedChange
+    }
+  );
+}
+function TreeCell({
+  depth,
+  hasChildren,
+  expanded,
+  onToggle,
+  children
+}) {
+  return /* @__PURE__ */ 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 ? /* @__PURE__ */ jsx(
+          SGhostButton,
+          {
+            icon: expanded ? "caretDown" : "caretRight",
+            size: "xxs",
+            ariaLabel: expanded ? "collapse row" : "expand row",
+            ariaExpanded: expanded,
+            onClick: (event) => {
+              event.stopPropagation();
+              onToggle();
+            }
+          }
+        ) : (
+          // 하위 행이 없는 행도 버튼 자리를 비워 형제끼리 내용의 시작점을 맞춘다
+          /* @__PURE__ */ jsx("span", { className: "size-(--cmp-ghostButton-xxs-size) shrink-0", "aria-hidden": "true" })
+        ),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children })
+      ]
+    }
+  );
+}
 var HIDE_DELAY_MS2 = 100;
 function mergeRefs(...refs) {
   return (node) => {
@@ -28582,6 +28763,6 @@ function STimeRangePicker({
   );
 }
 
-export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BAR_GAP, BAR_SIZE_MAX, BAR_SIZE_MIN, BUTTON_COLORS, BUTTON_SIZES, CALENDAR_BOARD_DAY_BG, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CHAT_ATTACHED_FILE_CONFIG, CHAT_FILE_CONFIG, CHAT_MESSAGE_DIRECTIONS, CHAT_MESSAGE_READ_STATUSES, CHAT_MESSAGE_VARIANTS, CHIP_COLORS, COLOR_KEYS, CONTEXT_ALERT_ICON_COLOR, CONTEXT_ALERT_INTENTS, CONTEXT_ALERT_SURFACE, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, LAUNCHER_LIST_BOX_CONSOLE_HEIGHT, LAUNCHER_LIST_BOX_CONSOLE_ICON, LAUNCHER_LIST_BOX_CONSOLE_LABEL, LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, LOGO_DEFAULT_SIZE, LOGO_DIRECTIONS, LOGO_MODES, LOGO_NAMES, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, PAGE_CONTENT_WIDTHS, PAGE_HEADER_VARIANTS, PAGE_PADDINGS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarChart, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCalendarBoard, SCallout, SCard, SChatAttachedFile2 as SChatAttachedFile, SChatFile2 as SChatFile, SChatInput2 as SChatInput, SChatMessage2 as SChatMessage, SChatSystemMessage2 as SChatSystemMessage, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SContextAlert, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDonutChart, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKELETON_ANIMATIONS, SKELETON_MODES, SKELETON_TYPES, SKELETON_TYPE_CONFIG, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLauncherListBox, SLayout, SLayoutContext, SLineChart, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoginCard2 as SLoginCard, SLogo, SMeatballButton2 as SMeatballButton, SModal, SModalOutlet, SNumberInput, SPage, SPageHeader, SPagination, SPieChart, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSkeleton, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable2 as STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, STimeline2 as STimeline, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, fileExtension, findGnbAncestors, findGnbRailValue, formatFileSize, isColorKey, isFieldWidthGrade, loading, normalizeExtension, resolveColor, useSLayout };
+export { ACCOUNT_LIST_BOX_ICONS, ACCOUNT_LIST_BOX_ITEM_TONES, ACCOUNT_LIST_BOX_LABELS, ACCOUNT_LIST_BOX_LAYOUT, ACCOUNT_LIST_BOX_TONE_CONFIG, BADGE_COLORS, BAR_GAP, BAR_SIZE_MAX, BAR_SIZE_MIN, BUTTON_COLORS, BUTTON_SIZES, CALENDAR_BOARD_DAY_BG, CALENDAR_BOARD_DAY_COLORS, CALENDAR_BOARD_EVENT_COLORS, CALENDAR_BOARD_EVENT_PRESETS, CALENDAR_BOARD_MAX_VISIBLE_EVENTS, CHAT_ATTACHED_FILE_CONFIG, CHAT_FILE_CONFIG, CHAT_MESSAGE_DIRECTIONS, CHAT_MESSAGE_READ_STATUSES, CHAT_MESSAGE_VARIANTS, CHIP_COLORS, COLOR_KEYS, CONTEXT_ALERT_ICON_COLOR, CONTEXT_ALERT_INTENTS, CONTEXT_ALERT_SURFACE, FIELD_WIDTH_GRADES, GNB_COLORS, GNB_COMMON, GNB_FOLD_MS, GNB_FULL_LOGO_WIDTH, GNB_HEADER, GNB_MENU, GNB_MENU_WIDTH, GNB_RAIL, GNB_RAIL_WIDTH, GNB_SYSTEM_COLORS, GNB_SYSTEM_COLOR_CONFIG, GNB_SYSTEM_LAYOUT, GNB_SYSTEM_PLACEMENTS, GNB_SYSTEM_TOP_COLOR_CONFIG, ICONS, IMAGE_FITS, LAUNCHER_LIST_BOX_CONSOLE_HEIGHT, LAUNCHER_LIST_BOX_CONSOLE_ICON, LAUNCHER_LIST_BOX_CONSOLE_LABEL, LAUNCHER_LIST_BOX_LAYOUT, LAUNCHER_LIST_BOX_LOGO_HEIGHT, LAUNCHER_LIST_BOX_TRAILING_ICON, LAUNCHER_LIST_BOX_WIDTH, LAUNCHER_SERVICES, LAUNCHER_SERVICE_CATALOG, LOGO_DEFAULT_SIZE, LOGO_DIRECTIONS, LOGO_MODES, LOGO_NAMES, PAGE_BACKGROUNDS, PAGE_CONTENT_HEIGHTS, PAGE_CONTENT_WIDTHS, PAGE_HEADER_VARIANTS, PAGE_PADDINGS, RangeCalendar, SAccountListBox, SActionModal, SBadge, SBarChart, SBarcodeInput, SButton, SCROLL_AREA_AXES, SCalendar, SCalendarBoard, SCallout, SCard, SChatAttachedFile2 as SChatAttachedFile, SChatFile2 as SChatFile, SChatInput2 as SChatInput, SChatMessage2 as SChatMessage, SChatSystemMessage2 as SChatSystemMessage, SCheckbox, SChip2 as SChip, SChipFilter, SChipInput, SCircleProgress, SConfirmModal, SContextAlert, SDatePicker, SDatePickerMonthListbox, SDatePickerYearListbox, SDateRangePicker, SDivider, SDonutChart, SDraggableGroup, SDraggableItem2 as SDraggableItem, SDraggableList, SDraggableProvider, SDrawer, SDropdownButton2 as SDropdownButton, SEDITOR_DEFAULT_FONT_SIZE, SEDITOR_HEADING_LABELS, SEDITOR_HEADING_LEVELS, SEditor, SExpansionItem, SExpansionList2 as SExpansionList, SField, SFilePicker, SForm, SGhostButton, SGnb, SGnbSystem, SGnbSystemContext, SGuide, SIcon, SImage, SInput, SKELETON_ANIMATIONS, SKELETON_MODES, SKELETON_TYPES, SKELETON_TYPE_CONFIG, SKeyValueTable, SLAYOUT_MIN_WIDTH, SLauncherListBox, SLayout, SLayoutContext, SLineChart, SLinearProgress, SList2 as SList, SListItem2 as SListItem, SLoadingContainer, SLoadingModal, SLoginCard2 as SLoginCard, SLogo, SMeatballButton2 as SMeatballButton, SModal, SModalOutlet, SNumberInput, SPage, SPageHeader, SPagination, SPieChart, SPopover, SPopup, SPortal, SRadio, SRadioButton, SRadioCard, SRadioCardGroup, SRadioGroup, SSPLITTER_UNITS, SScrollArea, SSearchInput, SSectionHeaderCard2 as SSectionHeaderCard, SSelect2 as SSelect, SSkeleton, SSplitter2 as SSplitter, SStepper, SSwitch, SSystemActionButton, STEPPER_SIZES, STable2 as STable, STableBar, STabs, STag, STextLink, STextarea, STimePicker, STimeRangePicker, STimeline2 as STimeline, SToast, SToastContainer, SToggle, STooltip2 as STooltip, STree2 as STree, STreeItem2 as STreeItem, STreeTable, SYSTEM_ACTION_BUTTON_COLORS, SYSTEM_ACTION_BUTTON_COLOR_CONFIG, SYSTEM_ACTION_BUTTON_LAYOUT, SYSTEM_ACTION_BUTTON_TYPES, SYSTEM_ACTION_BUTTON_TYPE_CONFIG, TAG_COLORS, TAG_SHAPES, TAG_SIZES, TIMEPICKER_SIZES, TIMEPICKER_SIZE_CONFIG, buttonPreset, cn, fieldWidthValue, fileExtension, findGnbAncestors, findGnbRailValue, formatFileSize, isColorKey, isFieldWidthGrade, loading, normalizeExtension, resolveColor, useSLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map