@wallarm-org/design-system 3.4.1-rc-fix-data-display-category.3 → 4.0.0

package/dist/components/Tree/TreeItemContent.js

@@ -1,9 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { Collapse } from "../../utils/Collapse.js";
+import { useTestId } from "../../utils/testId.js";
 import { useTreeItemContext } from "./TreeItemContext.js";
 const TreeItemContent = (t0)=>{
-    const $ = c(16);
+    const $ = c(18);
     let children;
     let className;
     let props;
@@ -22,12 +23,14 @@ const TreeItemContent = (t0)=>{
         ref = $[4];
     }
     const { collapsible, open } = useTreeItemContext();
+    const testId = useTestId("content");
     if (!collapsible) {
         let t1;
-        if ($[5] !== children || $[6] !== className || $[7] !== props || $[8] !== ref) {
+        if ($[5] !== children || $[6] !== className || $[7] !== props || $[8] !== ref || $[9] !== testId) {
             t1 = /*#__PURE__*/ jsx("div", {
                 ref: ref,
                 "data-slot": "tree-item-content",
+                "data-testid": testId,
                 className: className,
                 ...props,
                 children: children
@@ -36,27 +39,30 @@ const TreeItemContent = (t0)=>{
             $[6] = className;
             $[7] = props;
             $[8] = ref;
-            $[9] = t1;
-        } else t1 = $[9];
+            $[9] = testId;
+            $[10] = t1;
+        } else t1 = $[10];
         return t1;
     }
     let t1;
-    if ($[10] !== children || $[11] !== className || $[12] !== open || $[13] !== props || $[14] !== ref) {
+    if ($[11] !== children || $[12] !== className || $[13] !== open || $[14] !== props || $[15] !== ref || $[16] !== testId) {
         t1 = /*#__PURE__*/ jsx(Collapse, {
             ref: ref,
             open: open,
             "data-slot": "tree-item-content",
+            "data-testid": testId,
             className: className,
             ...props,
             children: children
         });
-        $[10] = children;
-        $[11] = className;
-        $[12] = open;
-        $[13] = props;
-        $[14] = ref;
-        $[15] = t1;
-    } else t1 = $[15];
+        $[11] = children;
+        $[12] = className;
+        $[13] = open;
+        $[14] = props;
+        $[15] = ref;
+        $[16] = testId;
+        $[17] = t1;
+    } else t1 = $[17];
     return t1;
 };
 TreeItemContent.displayName = "TreeItemContent";

package/dist/components/Tree/TreeItemHeader.js

@@ -1,10 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { c } from "react/compiler-runtime";
 import { cn } from "../../utils/cn.js";
+import { useTestId } from "../../utils/testId.js";
 import { useTreeItemContext } from "./TreeItemContext.js";
 import { TreeItemIcon } from "./TreeItemIcon.js";
 const TreeItemHeader = (t0)=>{
-    const $ = c(42);
+    const $ = c(46);
     let action;
     let children;
     let className;
@@ -29,6 +30,8 @@ const TreeItemHeader = (t0)=>{
         ref = $[6];
     }
     const { collapsible, open, toggle } = useTreeItemContext();
+    const testId = useTestId("header");
+    const actionTestId = useTestId("action");
     if (collapsible) {
         const t1 = open ? "open" : "closed";
         let t2;
@@ -76,20 +79,23 @@ const TreeItemHeader = (t0)=>{
             $[17] = t6;
         } else t6 = $[17];
         let t7;
-        if ($[18] !== action) {
+        if ($[18] !== action || $[19] !== actionTestId) {
             t7 = action && /*#__PURE__*/ jsx("div", {
                 className: "relative ml-2 shrink-0",
                 "data-slot": "tree-item-action",
+                "data-testid": actionTestId,
                 children: action
             });
             $[18] = action;
-            $[19] = t7;
-        } else t7 = $[19];
+            $[19] = actionTestId;
+            $[20] = t7;
+        } else t7 = $[20];
         let t8;
-        if ($[20] !== props || $[21] !== ref || $[22] !== t1 || $[23] !== t2 || $[24] !== t6 || $[25] !== t7) {
+        if ($[21] !== props || $[22] !== ref || $[23] !== t1 || $[24] !== t2 || $[25] !== t6 || $[26] !== t7 || $[27] !== testId) {
             t8 = /*#__PURE__*/ jsxs("div", {
                 ref: ref,
                 "data-slot": "tree-item-header",
+                "data-testid": testId,
                 "data-state": t1,
                 className: t2,
                 ...props,
@@ -98,54 +104,58 @@ const TreeItemHeader = (t0)=>{
                     t7
                 ]
             });
-            $[20] = props;
-            $[21] = ref;
-            $[22] = t1;
-            $[23] = t2;
-            $[24] = t6;
-            $[25] = t7;
-            $[26] = t8;
-        } else t8 = $[26];
+            $[21] = props;
+            $[22] = ref;
+            $[23] = t1;
+            $[24] = t2;
+            $[25] = t6;
+            $[26] = t7;
+            $[27] = testId;
+            $[28] = t8;
+        } else t8 = $[28];
         return t8;
     }
     let t1;
-    if ($[27] !== className) {
+    if ($[29] !== className) {
         t1 = cn("group relative pt-2 pb-4 flex w-full items-start justify-between", className);
-        $[27] = className;
-        $[28] = t1;
-    } else t1 = $[28];
+        $[29] = className;
+        $[30] = t1;
+    } else t1 = $[30];
     let t2;
-    if ($[29] !== icon) {
+    if ($[31] !== icon) {
         t2 = /*#__PURE__*/ jsx(TreeItemIcon, {
             icon: icon
         });
-        $[29] = icon;
-        $[30] = t2;
-    } else t2 = $[30];
+        $[31] = icon;
+        $[32] = t2;
+    } else t2 = $[32];
     let t3;
-    if ($[31] !== children) {
+    if ($[33] !== children) {
         t3 = /*#__PURE__*/ jsx("div", {
             className: "min-w-0 flex-1",
             children: children
         });
-        $[31] = children;
-        $[32] = t3;
-    } else t3 = $[32];
+        $[33] = children;
+        $[34] = t3;
+    } else t3 = $[34];
     let t4;
-    if ($[33] !== action) {
+    if ($[35] !== action || $[36] !== actionTestId) {
         t4 = action && /*#__PURE__*/ jsx("div", {
             className: "ml-2 shrink-0",
             "data-slot": "tree-item-action",
+            "data-testid": actionTestId,
             children: action
         });
-        $[33] = action;
-        $[34] = t4;
-    } else t4 = $[34];
+        $[35] = action;
+        $[36] = actionTestId;
+        $[37] = t4;
+    } else t4 = $[37];
     let t5;
-    if ($[35] !== props || $[36] !== ref || $[37] !== t1 || $[38] !== t2 || $[39] !== t3 || $[40] !== t4) {
+    if ($[38] !== props || $[39] !== ref || $[40] !== t1 || $[41] !== t2 || $[42] !== t3 || $[43] !== t4 || $[44] !== testId) {
         t5 = /*#__PURE__*/ jsxs("div", {
             ref: ref,
             "data-slot": "tree-item-header",
+            "data-testid": testId,
             className: t1,
             ...props,
             children: [
@@ -154,14 +164,15 @@ const TreeItemHeader = (t0)=>{
                 t4
             ]
         });
-        $[35] = props;
-        $[36] = ref;
-        $[37] = t1;
-        $[38] = t2;
-        $[39] = t3;
-        $[40] = t4;
-        $[41] = t5;
-    } else t5 = $[41];
+        $[38] = props;
+        $[39] = ref;
+        $[40] = t1;
+        $[41] = t2;
+        $[42] = t3;
+        $[43] = t4;
+        $[44] = testId;
+        $[45] = t5;
+    } else t5 = $[45];
     return t5;
 };
 TreeItemHeader.displayName = "TreeItemHeader";

package/dist/components/TreeView/TreeViewItem.js

@@ -11,7 +11,7 @@ import { TREE_VIEW_INDENT_STEP } from "./TreeView.js";
 import { useTreeViewContext } from "./TreeViewContext.js";
 const RAIL_BASE_LEFT = 14;
 const TreeViewItem = (t0)=>{
-    const $ = c(83);
+    const $ = c(85);
     let children;
     let className;
     let controlledOpen;
@@ -57,6 +57,8 @@ const TreeViewItem = (t0)=>{
     const disabled = void 0 === t2 ? false : t2;
     const depth = useTreeDepth();
     const testId = useTestId("item");
+    const toggleTestId = useTestId("toggle");
+    const groupTestId = useTestId("group");
     const { selectable, selectedIds, toggleSelect } = useTreeViewContext();
     const [internalOpen, setInternalOpen] = useState(defaultOpen);
     const isControlled = void 0 !== controlledOpen;
@@ -205,10 +207,11 @@ const TreeViewItem = (t0)=>{
         $[49] = t20;
     } else t20 = $[49];
     let t21;
-    if ($[50] !== disabled || $[51] !== handleToggle || $[52] !== isBranch || $[53] !== isOpen) {
+    if ($[50] !== disabled || $[51] !== handleToggle || $[52] !== isBranch || $[53] !== isOpen || $[54] !== toggleTestId) {
         t21 = isBranch ? /*#__PURE__*/ jsx("button", {
             type: "button",
             "data-slot": "tree-view-toggle",
+            "data-testid": toggleTestId,
             "aria-label": isOpen ? "Collapse" : "Expand",
             disabled: disabled,
             className: "flex shrink-0 cursor-pointer items-center justify-center text-text-secondary disabled:cursor-not-allowed",
@@ -228,10 +231,11 @@ const TreeViewItem = (t0)=>{
         $[51] = handleToggle;
         $[52] = isBranch;
         $[53] = isOpen;
-        $[54] = t21;
-    } else t21 = $[54];
+        $[54] = toggleTestId;
+        $[55] = t21;
+    } else t21 = $[55];
     let t22;
-    if ($[55] !== content || $[56] !== t20 || $[57] !== t21) {
+    if ($[56] !== content || $[57] !== t20 || $[58] !== t21) {
         t22 = /*#__PURE__*/ jsxs("div", {
             className: "flex h-24 min-w-0 flex-1 items-center gap-4 text-xs text-text-primary [&>svg]:icon-xs [&>svg]:shrink-0 [&>svg]:text-text-secondary",
             style: t20,
@@ -241,13 +245,13 @@ const TreeViewItem = (t0)=>{
                 content
             ]
         });
-        $[55] = content;
-        $[56] = t20;
-        $[57] = t21;
-        $[58] = t22;
-    } else t22 = $[58];
+        $[56] = content;
+        $[57] = t20;
+        $[58] = t21;
+        $[59] = t22;
+    } else t22 = $[59];
     let t23;
-    if ($[59] !== t14 || $[60] !== t15 || $[61] !== t16 || $[62] !== t17 || $[63] !== t18 || $[64] !== t19 || $[65] !== t22) {
+    if ($[60] !== t14 || $[61] !== t15 || $[62] !== t16 || $[63] !== t17 || $[64] !== t18 || $[65] !== t19 || $[66] !== t22) {
         t23 = /*#__PURE__*/ jsxs("div", {
             "data-slot": "tree-view-row",
             "data-selected": t14,
@@ -260,22 +264,23 @@ const TreeViewItem = (t0)=>{
                 t22
             ]
         });
-        $[59] = t14;
-        $[60] = t15;
-        $[61] = t16;
-        $[62] = t17;
-        $[63] = t18;
-        $[64] = t19;
-        $[65] = t22;
-        $[66] = t23;
-    } else t23 = $[66];
+        $[60] = t14;
+        $[61] = t15;
+        $[62] = t16;
+        $[63] = t17;
+        $[64] = t18;
+        $[65] = t19;
+        $[66] = t22;
+        $[67] = t23;
+    } else t23 = $[67];
     let t24;
-    if ($[67] !== depth || $[68] !== isBranch || $[69] !== isOpen || $[70] !== nestedItems) {
+    if ($[68] !== depth || $[69] !== groupTestId || $[70] !== isBranch || $[71] !== isOpen || $[72] !== nestedItems) {
         t24 = isBranch && /*#__PURE__*/ jsx(Collapse, {
             open: isOpen,
             inertWhenClosed: true,
             role: "group",
             "data-slot": "tree-view-group",
+            "data-testid": groupTestId,
             children: /*#__PURE__*/ jsx(TreeDepthProvider, {
                 value: {
                     depth: depth + 1,
@@ -285,14 +290,15 @@ const TreeViewItem = (t0)=>{
                 children: nestedItems
             })
         });
-        $[67] = depth;
-        $[68] = isBranch;
-        $[69] = isOpen;
-        $[70] = nestedItems;
-        $[71] = t24;
-    } else t24 = $[71];
+        $[68] = depth;
+        $[69] = groupTestId;
+        $[70] = isBranch;
+        $[71] = isOpen;
+        $[72] = nestedItems;
+        $[73] = t24;
+    } else t24 = $[73];
     let t25;
-    if ($[72] !== props || $[73] !== ref || $[74] !== t10 || $[75] !== t11 || $[76] !== t12 || $[77] !== t13 || $[78] !== t23 || $[79] !== t24 || $[80] !== t9 || $[81] !== testId) {
+    if ($[74] !== props || $[75] !== ref || $[76] !== t10 || $[77] !== t11 || $[78] !== t12 || $[79] !== t13 || $[80] !== t23 || $[81] !== t24 || $[82] !== t9 || $[83] !== testId) {
         t25 = /*#__PURE__*/ jsxs("div", {
             ref: ref,
             role: "treeitem",
@@ -309,18 +315,18 @@ const TreeViewItem = (t0)=>{
                 t24
             ]
         });
-        $[72] = props;
-        $[73] = ref;
-        $[74] = t10;
-        $[75] = t11;
-        $[76] = t12;
-        $[77] = t13;
-        $[78] = t23;
-        $[79] = t24;
-        $[80] = t9;
-        $[81] = testId;
-        $[82] = t25;
-    } else t25 = $[82];
+        $[74] = props;
+        $[75] = ref;
+        $[76] = t10;
+        $[77] = t11;
+        $[78] = t12;
+        $[79] = t13;
+        $[80] = t23;
+        $[81] = t24;
+        $[82] = t9;
+        $[83] = testId;
+        $[84] = t25;
+    } else t25 = $[84];
     return t25;
 };
 TreeViewItem.displayName = "TreeViewItem";