sellmate-design-system-react 9.0.0-beta.4 → 9.0.0-beta.6

package/dist/components/STree/README.md

@@ -40,6 +40,7 @@
 | `expandedIds?` | `string[]` | — | 펼쳐진 노드 ID 목록 |
 | `defaultExpandedIds?` | `string[]` | — | 비제어 펼침 초기값 |
 | `selectable?` | `boolean` | `true` | 체크박스 표시 여부 |
+| `useAll?` | `boolean` | `false` | 체크박스 사용 시 최상단 전체 선택 아이템 표시 여부 |
 | `guideline?` | `boolean` | `true` | depth 연결선 표시 여부 |
 | `border?` | `boolean` | `true` | 아이템 하단 border 표시 여부 |
 | `cascadeSelection?` | `boolean` | `true` | 부모 선택 시 하위 노드까지 함께 토글 |

package/dist/components/STree/STree.d.ts

@@ -61,6 +61,8 @@ export interface STreeProps extends Omit<HTMLAttributes<HTMLDivElement>, 'childr
     defaultExpandedIds?: string[];
     /** 체크박스 표시 여부 */
     selectable?: boolean;
+    /** 체크박스 사용 시 최상단 전체 선택 아이템 표시 여부 */
+    useAll?: boolean;
     /** depth 연결선 표시 여부 */
     guideline?: boolean;
     /** 아이템 하단 border 표시 여부 */

package/dist/index.cjs

@@ -4623,18 +4623,19 @@ function collectSelectableIds(node) {
 function toSelectedSet(value) {
   return new Set(value ?? []);
 }
-function getSelectionState(node, selectedSet) {
-  if (selectedSet.has(node.id)) {
-    return { selected: true, indeterminate: false };
+var TREE_ALL_NODE = { id: "__all__", label: "\uC804\uCCB4" };
+function getSelectionState(node, selectedSet, cascadeSelection) {
+  if (!cascadeSelection) {
+    return { selected: selectedSet.has(node.id), indeterminate: false };
   }
   const selectableChildren = (node.children ?? []).filter(
     (child) => collectSelectableIds(child).length > 0
   );
   if (selectableChildren.length === 0) {
-    return { selected: false, indeterminate: false };
+    return { selected: selectedSet.has(node.id), indeterminate: false };
   }
   const childStates = selectableChildren.map(
-    (child) => getSelectionState(child, selectedSet)
+    (child) => getSelectionState(child, selectedSet, cascadeSelection)
   );
   const selectedCount = childStates.filter((state2) => state2.selected).length;
   return {
@@ -4679,6 +4680,40 @@ function TreeConnector({
     ] })
   ] });
 }
+function STreeAllItem({
+  selected,
+  indeterminate,
+  border,
+  onSelect
+}) {
+  const checkboxValue = indeterminate ? null : selected;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "treeitem",
+      "aria-level": 1,
+      "aria-selected": selected,
+      onClick: onSelect,
+      className: cn(
+        "group/tree-item box-border flex h-[32px] w-full cursor-pointer items-center overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left hover:bg-(--cmp-tree-item-bg-hover)",
+        border && "border-b border-(--cmp-tree-item-border-default)"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "box-border flex h-full min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap) py-(--cmp-tree-item-paddingY)", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: (event) => event.stopPropagation(), className: "flex shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(SCheckbox, { value: checkboxValue, onValueChange: () => onSelect() }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "block min-w-0 flex-1 truncate text-[14px] leading-[24px]",
+              selected || indeterminate ? "font-bold text-(--cmp-tree-item-text-selected)" : "font-medium text-(--cmp-tree-item-text-default)"
+            ),
+            children: "\uC804\uCCB4"
+          }
+        )
+      ] })
+    }
+  );
+}
 var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
   node,
   depth = 1,
@@ -4729,7 +4764,7 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
       "aria-disabled": node.disabled || void 0,
       onClick: handleRowClick,
       className: cn(
-        "group/tree-item flex min-h-[32px] w-full items-center gap-(--cmp-tree-item-rowGap) bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left",
+        "group/tree-item box-border flex h-[32px] w-full items-center gap-(--cmp-tree-item-rowGap) overflow-hidden bg-(--cmp-tree-item-bg-default) px-(--cmp-tree-item-paddingX) text-left",
         border && "border-b border-(--cmp-tree-item-border-default)",
         !node.disabled && "hover:bg-(--cmp-tree-item-bg-hover)",
         node.disabled && "cursor-not-allowed opacity-60",
@@ -4748,7 +4783,7 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
             ancestorLast
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap) py-(--cmp-tree-item-paddingY)", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "box-border flex h-full min-w-0 flex-1 items-center gap-(--cmp-tree-item-contentGap) py-(--cmp-tree-item-paddingY)", children: [
           hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
             SGhostButton,
             {
@@ -4784,25 +4819,17 @@ var STreeItemImpl = /* @__PURE__ */ react.forwardRef(function STreeItem({
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
+              onClick: (event) => {
+                if (!selectable) return;
+                event.stopPropagation();
+                if (!node.disabled && selectable) onTreeSelect?.(node, event);
+              },
               className: cn(
-                "min-w-0 flex-1 text-[14px] leading-[24px]",
-                selected || indeterminate ? "font-bold text-(--cmp-tree-item-text-selected)" : "font-medium text-(--cmp-tree-item-text-default)"
+                "block min-w-0 flex-1 truncate text-[14px] leading-[24px]",
+                selected || indeterminate ? "font-bold text-(--cmp-tree-item-text-selected)" : "font-medium text-(--cmp-tree-item-text-default)",
+                node.disabled ? "cursor-not-allowed" : selectable ? "cursor-pointer" : void 0
               ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  onClick: (event) => {
-                    if (!selectable) return;
-                    event.stopPropagation();
-                    if (!node.disabled && selectable) onTreeSelect?.(node, event);
-                  },
-                  className: cn(
-                    "inline-block max-w-full truncate",
-                    node.disabled ? "cursor-not-allowed" : selectable ? "cursor-pointer" : void 0
-                  ),
-                  children: node.label
-                }
-              )
+              children: node.label
             }
           ),
           trailingNode
@@ -4819,6 +4846,7 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
   expandedIds,
   defaultExpandedIds,
   selectable = true,
+  useAll = false,
   cascadeSelection = true,
   guideline = true,
   border = true,
@@ -4837,6 +4865,11 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
   const currentExpandedIds = expandedIds ?? internalExpandedIds;
   const selectedSet = react.useMemo(() => toSelectedSet(currentValue), [currentValue]);
   const expandedSet = react.useMemo(() => new Set(currentExpandedIds), [currentExpandedIds]);
+  const selectableIds = react.useMemo(() => items.flatMap(collectSelectableIds), [items]);
+  const allSelected = selectableIds.length > 0 && selectableIds.every((id) => selectedSet.has(id));
+  const someSelected = selectableIds.some((id) => selectedSet.has(id));
+  const allIndeterminate = someSelected && !allSelected;
+  const showAllItem = selectable && useAll;
   const updateExpanded = (node) => {
     const next = new Set(currentExpandedIds);
     if (next.has(node.id)) next.delete(node.id);
@@ -4848,7 +4881,7 @@ 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).selected;
+    const everySelected = getSelectionState(node, selectedSet, cascadeSelection).selected;
     const next = new Set(selectedSet);
     targetIds.forEach((id) => {
       if (everySelected) next.delete(id);
@@ -4858,10 +4891,22 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
     if (value === void 0) setInternalValue(orderedIds);
     onValueChange?.(orderedIds, node);
   };
+  const updateAllSelected = (event) => {
+    event?.stopPropagation();
+    if (selectableIds.length === 0) return;
+    const next = new Set(selectedSet);
+    selectableIds.forEach((id) => {
+      if (allSelected) next.delete(id);
+      else next.add(id);
+    });
+    const orderedIds = collectIds(items).filter((id) => next.has(id));
+    if (value === void 0) setInternalValue(orderedIds);
+    onValueChange?.(orderedIds, TREE_ALL_NODE);
+  };
   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);
+    const { selected, indeterminate } = getSelectionState(node, selectedSet, cascadeSelection);
     return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         STreeItem2,
@@ -4895,14 +4940,25 @@ var STreeImpl = /* @__PURE__ */ react.forwardRef(function STree({
       ) : null
     ] }, node.id);
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref,
       role: "tree",
       className: cn("flex w-full flex-col items-start bg-(--cmp-tree-item-bg-default)", className),
       ...rest,
-      children: renderNodes(items)
+      children: [
+        showAllItem && /* @__PURE__ */ jsxRuntime.jsx(
+          STreeAllItem,
+          {
+            selected: allSelected,
+            indeterminate: allIndeterminate,
+            border,
+            onSelect: updateAllSelected
+          }
+        ),
+        renderNodes(items)
+      ]
     }
   );
 });