@multiplatform.one/components 7.4.0 → 7.5.0

package/dist/cjs/views/TreeView.cjs

@@ -38,21 +38,14 @@ var import_tamagui = require("tamagui");
 var import_kanbanDnd = require("./kanbanDnd.cjs");
 var import_treeViewDnd = require("./treeViewDnd.cjs");
 var import_treeViewMotion = require("./treeViewMotion.cjs");
+var import_treeViewLayout = require("./treeViewLayout.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const ENTER_RISE_PX = -4;
 const DRAG_THRESHOLD_PX = 4;
 const TOUCH_LONG_PRESS_MS = 200;
 const AUTO_SCROLL_EDGE_PX = 48;
 const AUTO_SCROLL_MAX_SPEED = 16;
-const LIFT_SHADOW = {
-  shadowColor: "#000",
-  shadowOffset: {
-    width: 0,
-    height: 10
-  },
-  shadowOpacity: 0.15,
-  shadowRadius: 20
-};
+const LIFT_SHADOW = import_treeViewLayout.TREE_LIFT_SHADOW;
 function collectBranchIds(items, into = /* @__PURE__ */new Set()) {
   for (const node of items) {
     if ((node.children?.length ?? 0) > 0) {
@@ -121,50 +114,18 @@ function TreeView({
   const onAccentLabel = (0, import_theme.useReadableTextOn)("$accentBackground");
   const transition = knobProps.transition;
   const nestedPx = knobProps.nestedControl.px;
+  const rowGap = knobProps.control.gap;
+  const iconSize = knobProps.controlIcon.width;
   const estimateSize = estimateSizeProp ?? nestedPx;
-  const height = heightProp ?? (nestedPx <= 28 ? 320 : nestedPx >= 36 ? 480 : 400);
-  const expandIconSize = nestedPx <= 28 ? 14 : nestedPx >= 36 ? 18 : 16;
-  const nodeIconSize = nestedPx <= 28 ? 14 : 18;
-  const caretSize = nestedPx <= 28 ? 12 : 14;
+  const height = heightProp ?? (0, import_treeViewLayout.treeDefaultHeight)(nestedPx);
+  const expandIconSize = iconSize;
+  const nodeIconSize = iconSize;
+  const caretSize = iconSize;
   const isRTL = (0, import_useDirection.useDirection)() === "rtl";
   const CollapsedCaretIcon = isRTL ? import_react.CaretLeftIcon : import_react.CaretRightIcon;
   const expandedCaretRotation = isRTL ? "-90deg" : "90deg";
-  const indentStep = knobProps.space === "small" ? 12 : knobProps.space === "large" ? 20 : 16;
-  const rowPad = (compressed ? {
-    small: {
-      y: 3,
-      x: 4
-    },
-    medium: {
-      y: 4,
-      x: 6
-    },
-    large: {
-      y: 6,
-      x: 10
-    }
-  } : {
-    small: {
-      y: 4,
-      x: 6
-    },
-    medium: {
-      y: 6,
-      x: 8
-    },
-    large: {
-      y: 10,
-      x: 13
-    }
-  })[knobProps.space] ?? (compressed ? {
-    y: 4,
-    x: 6
-  } : {
-    y: 6,
-    x: 8
-  });
-  const rowPadY = rowPad.y;
-  const rowPadX = rowPad.x;
+  const indentStep = (0, import_treeViewLayout.treeIndentStep)(nestedPx);
+  const rowPad = (0, import_treeViewLayout.treeEdgeRowPad)(knobProps.space);
   const treeId = (0, import_react2.useId)();
   const containerRef = (0, import_react2.useRef)(null);
   const flashListRef = (0, import_react2.useRef)(null);
@@ -796,6 +757,13 @@ function TreeView({
       ref: containerRef,
       role: "tree",
       "aria-label": resolvedAriaLabel,
+      ...{
+        "data-nested-px": nestedPx,
+        "data-indent-step": indentStep,
+        "data-space": knobProps.space,
+        "data-size": knobProps.size,
+        "data-viewport-height": height
+      },
       "aria-activedescendant": effectiveFocused >= 0 ? `${treeId}-node-${effectiveFocused}` : void 0,
       tabIndex: 0,
       outlineWidth: 0,
@@ -886,10 +854,10 @@ function TreeView({
             "aria-posinset": index + 1,
             alignItems: "center",
             minHeight: estimateSize,
-            paddingVertical: rowPadY,
-            paddingInlineEnd: rowPadX,
-            paddingInlineStart: rowPadX + depth * indentStep,
-            gap: "$2",
+            paddingVertical: rowPad.paddingVertical,
+            paddingInlineEnd: rowPad.paddingHorizontal,
+            paddingInlineStart: rowPad.paddingHorizontal,
+            gap: rowGap,
             cursor: "pointer",
             position: "relative",
             y: rowY,
@@ -926,27 +894,33 @@ function TreeView({
               if (hasChildren) toggleNode(node);
               onNodeSelect?.(node);
             },
-            children: [depth > 0 ? Array.from({
-              length: depth
-            }, (_, guide) => {
-              const inset = rowPadX + guide * indentStep + expandIconSize / 2;
-              return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-                position: "absolute",
-                top: 0,
-                bottom: 0,
-                width: 1,
-                pointerEvents: "none",
-                backgroundColor: isSelected ? "$color1" : "$borderColor",
-                opacity: isSelected ? 0.35 : 0.5,
-                ...(isRTL ? {
-                  right: inset
-                } : {
-                  left: inset
-                })
-              }, `guide-${guide}`);
+            children: [depth > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+              width: depth * indentStep,
+              flexShrink: 0,
+              alignSelf: "stretch",
+              position: "relative",
+              pointerEvents: "none",
+              children: Array.from({
+                length: depth
+              }, (_, guide) => {
+                const inset = guide * indentStep + expandIconSize / 2;
+                return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                  position: "absolute",
+                  top: 0,
+                  bottom: 0,
+                  ...import_theme.hairline.vline,
+                  pointerEvents: "none",
+                  backgroundColor: isSelected ? "$color1" : "$borderColor",
+                  opacity: isSelected ? 0.35 : 0.5,
+                  ...(isRTL ? {
+                    right: inset
+                  } : {
+                    left: inset
+                  })
+                }, `guide-${guide}`);
+              })
             }) : null, showExpansionArrows ? hasChildren ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-              width: expandIconSize,
-              height: expandIconSize,
+              ...knobProps.controlIcon,
               alignItems: "center",
               justifyContent: "center",
               pointerEvents: "none",
@@ -957,11 +931,9 @@ function TreeView({
                 weight: "bold"
               })
             }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-              width: expandIconSize,
-              height: expandIconSize
+              ...knobProps.controlIcon
             }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-              width: nodeIconSize + 2,
-              height: nodeIconSize + 2,
+              ...knobProps.controlIcon,
               alignItems: "center",
               justifyContent: "center",
               flexShrink: 0,
@@ -999,12 +971,13 @@ function TreeView({
               },
               children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.DotsSixVerticalIcon, {
                 size: caretSize,
-                weight: "bold"
+                weight: "bold",
+                color: knobProps.textAccentColor
               })
             }) : null]
           }, node.id);
         }
-      }), dragUi?.indicator?.kind === "line" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      }), dragUi?.indicator?.kind === "line" && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
         ...{
           "data-treeview-drop-indicator": "line"
         },
@@ -1014,17 +987,20 @@ function TreeView({
         right: 0,
         y: topOfFlatIndex(dragUi.indicator.flatIndex) - dragScrollY - 1,
         height: 2,
-        paddingInlineStart: rowPadX + dragUi.indicator.depth * indentStep,
-        paddingInlineEnd: rowPadX,
+        paddingInlineStart: rowPad.paddingHorizontal,
+        paddingInlineEnd: rowPad.paddingHorizontal,
         pointerEvents: "none",
         zIndex: 999,
         transition: dragUi.mode === "keyboard" ? transition : "none",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          width: dragUi.indicator.depth * indentStep,
+          flexShrink: 0
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
           flex: 1,
           height: 2,
           borderRadius: 1,
           backgroundColor: "$accentBackground"
-        })
+        })]
       }), overlayNode !== void 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
         ...{
           "data-treeview-overlay": "true",
@@ -1043,8 +1019,8 @@ function TreeView({
         children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
           alignItems: "center",
           height: "100%",
-          paddingHorizontal: rowPadX,
-          gap: "$2",
+          paddingHorizontal: rowPad.paddingHorizontal,
+          gap: rowGap,
           ...knobProps.borderRadius,
           backgroundColor: "$background",
           borderWidth: 1,
@@ -1057,8 +1033,7 @@ function TreeView({
           scale: dragUi ? 1.03 : 1,
           ...(dragUi ? LIFT_SHADOW : void 0),
           children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-            width: nodeIconSize + 2,
-            height: nodeIconSize + 2,
+            ...knobProps.controlIcon,
             alignItems: "center",
             justifyContent: "center",
             flexShrink: 0,

package/dist/cjs/views/TreeView.native.js

@@ -52,20 +52,13 @@ var import_tamagui = require("tamagui");
 var import_kanbanDnd = require("./kanbanDnd.native.js");
 var import_treeViewDnd = require("./treeViewDnd.native.js");
 var import_treeViewMotion = require("./treeViewMotion.native.js");
+var import_treeViewLayout = require("./treeViewLayout.native.js");
 var ENTER_RISE_PX = -4;
 var DRAG_THRESHOLD_PX = 4;
 var TOUCH_LONG_PRESS_MS = 200;
 var AUTO_SCROLL_EDGE_PX = 48;
 var AUTO_SCROLL_MAX_SPEED = 16;
-var LIFT_SHADOW = {
-  shadowColor: "#000",
-  shadowOffset: {
-    width: 0,
-    height: 10
-  },
-  shadowOpacity: 0.15,
-  shadowRadius: 20
-};
+var LIFT_SHADOW = import_treeViewLayout.TREE_LIFT_SHADOW;
 function collectBranchIds(items) {
   var into = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : /* @__PURE__ */new Set();
   var _iteratorNormalCompletion = true,
@@ -164,7 +157,7 @@ function TreeView(param) {
     hotkeys: hotkeyOverrides,
     ...stackProps
   } = param;
-  var _knobProps_space, _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _overlayNode_icon;
+  var _ref, _ref1, _ref2, _ref3, _ref4, _ref5, _ref6, _ref7, _ref8, _ref9, _ref10, _ref11, _ref12, _overlayNode_icon;
   var _overlayNode_children, _dragUi_indicator, _dragUi_ghost, _dragUi_ghost1;
   var {
     t
@@ -180,50 +173,18 @@ function TreeView(param) {
   var onAccentLabel = (0, import_theme.useReadableTextOn)("$accentBackground");
   var transition = knobProps.transition;
   var nestedPx = knobProps.nestedControl.px;
+  var rowGap = knobProps.control.gap;
+  var iconSize = knobProps.controlIcon.width;
   var estimateSize = estimateSizeProp !== null && estimateSizeProp !== void 0 ? estimateSizeProp : nestedPx;
-  var height = heightProp !== null && heightProp !== void 0 ? heightProp : nestedPx <= 28 ? 320 : nestedPx >= 36 ? 480 : 400;
-  var expandIconSize = nestedPx <= 28 ? 14 : nestedPx >= 36 ? 18 : 16;
-  var nodeIconSize = nestedPx <= 28 ? 14 : 18;
-  var caretSize = nestedPx <= 28 ? 12 : 14;
+  var height = heightProp !== null && heightProp !== void 0 ? heightProp : (0, import_treeViewLayout.treeDefaultHeight)(nestedPx);
+  var expandIconSize = iconSize;
+  var nodeIconSize = iconSize;
+  var caretSize = iconSize;
   var isRTL = (0, import_useDirection.useDirection)() === "rtl";
   var CollapsedCaretIcon = isRTL ? import_react.CaretLeftIcon : import_react.CaretRightIcon;
   var expandedCaretRotation = isRTL ? "-90deg" : "90deg";
-  var indentStep = knobProps.space === "small" ? 12 : knobProps.space === "large" ? 20 : 16;
-  var rowPad = (_knobProps_space = (compressed ? {
-    small: {
-      y: 3,
-      x: 4
-    },
-    medium: {
-      y: 4,
-      x: 6
-    },
-    large: {
-      y: 6,
-      x: 10
-    }
-  } : {
-    small: {
-      y: 4,
-      x: 6
-    },
-    medium: {
-      y: 6,
-      x: 8
-    },
-    large: {
-      y: 10,
-      x: 13
-    }
-  })[knobProps.space]) !== null && _knobProps_space !== void 0 ? _knobProps_space : compressed ? {
-    y: 4,
-    x: 6
-  } : {
-    y: 6,
-    x: 8
-  };
-  var rowPadY = rowPad.y;
-  var rowPadX = rowPad.x;
+  var indentStep = (0, import_treeViewLayout.treeIndentStep)(nestedPx);
+  var rowPad = (0, import_treeViewLayout.treeEdgeRowPad)(knobProps.space);
   var treeId = (0, import_react2.useId)();
   var containerRef = (0, import_react2.useRef)(null);
   var flashListRef = (0, import_react2.useRef)(null);
@@ -928,6 +889,11 @@ function TreeView(param) {
       ref: containerRef,
       role: "tree",
       "aria-label": resolvedAriaLabel,
+      "data-nested-px": nestedPx,
+      "data-indent-step": indentStep,
+      "data-space": knobProps.space,
+      "data-size": knobProps.size,
+      "data-viewport-height": height,
       "aria-activedescendant": effectiveFocused >= 0 ? `${treeId}-node-${effectiveFocused}` : void 0,
       tabIndex: 0,
       outlineWidth: 0,
@@ -1020,10 +986,10 @@ function TreeView(param) {
             "aria-posinset": index + 1,
             alignItems: "center",
             minHeight: estimateSize,
-            paddingVertical: rowPadY,
-            paddingInlineEnd: rowPadX,
-            paddingInlineStart: rowPadX + depth * indentStep,
-            gap: "$2",
+            paddingVertical: rowPad.paddingVertical,
+            paddingInlineEnd: rowPad.paddingHorizontal,
+            paddingInlineStart: rowPad.paddingHorizontal,
+            gap: rowGap,
             cursor: "pointer",
             position: "relative",
             y: rowY,
@@ -1066,27 +1032,33 @@ function TreeView(param) {
               if (hasChildren) toggleNode(node);
               onNodeSelect === null || onNodeSelect === void 0 ? void 0 : onNodeSelect(node);
             },
-            children: [depth > 0 ? Array.from({
-              length: depth
-            }, function (_, guide) {
-              var inset = rowPadX + guide * indentStep + expandIconSize / 2;
-              return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-                position: "absolute",
-                top: 0,
-                bottom: 0,
-                width: 1,
-                pointerEvents: "none",
-                backgroundColor: isSelected ? "$color1" : "$borderColor",
-                opacity: isSelected ? 0.35 : 0.5,
-                ...(isRTL ? {
-                  right: inset
-                } : {
-                  left: inset
-                })
-              }, `guide-${guide}`);
+            children: [depth > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+              width: depth * indentStep,
+              flexShrink: 0,
+              alignSelf: "stretch",
+              position: "relative",
+              pointerEvents: "none",
+              children: Array.from({
+                length: depth
+              }, function (_, guide) {
+                var inset = guide * indentStep + expandIconSize / 2;
+                return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+                  position: "absolute",
+                  top: 0,
+                  bottom: 0,
+                  ...import_theme.hairline.vline,
+                  pointerEvents: "none",
+                  backgroundColor: isSelected ? "$color1" : "$borderColor",
+                  opacity: isSelected ? 0.35 : 0.5,
+                  ...(isRTL ? {
+                    right: inset
+                  } : {
+                    left: inset
+                  })
+                }, `guide-${guide}`);
+              })
             }) : null, showExpansionArrows ? hasChildren ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-              width: expandIconSize,
-              height: expandIconSize,
+              ...knobProps.controlIcon,
               alignItems: "center",
               justifyContent: "center",
               pointerEvents: "none",
@@ -1100,11 +1072,9 @@ function TreeView(param) {
                 weight: "bold"
               })
             }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-              width: expandIconSize,
-              height: expandIconSize
+              ...knobProps.controlIcon
             }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-              width: nodeIconSize + 2,
-              height: nodeIconSize + 2,
+              ...knobProps.controlIcon,
               alignItems: "center",
               justifyContent: "center",
               flexShrink: 0,
@@ -1143,7 +1113,8 @@ function TreeView(param) {
               },
               children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.DotsSixVerticalIcon, {
                 size: caretSize,
-                weight: "bold"
+                weight: "bold",
+                color: knobProps.textAccentColor
               })
             }) : null]
           },
@@ -1151,7 +1122,7 @@ function TreeView(param) {
           // and the caret never tween across two different rows.
           node.id);
         }
-      }), (dragUi === null || dragUi === void 0 ? void 0 : (_dragUi_indicator = dragUi.indicator) === null || _dragUi_indicator === void 0 ? void 0 : _dragUi_indicator.kind) === "line" && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      }), (dragUi === null || dragUi === void 0 ? void 0 : (_dragUi_indicator = dragUi.indicator) === null || _dragUi_indicator === void 0 ? void 0 : _dragUi_indicator.kind) === "line" && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
         "data-treeview-drop-indicator": "line",
         position: "absolute",
         top: 0,
@@ -1159,17 +1130,20 @@ function TreeView(param) {
         right: 0,
         y: topOfFlatIndex(dragUi.indicator.flatIndex) - dragScrollY - 1,
         height: 2,
-        paddingInlineStart: rowPadX + dragUi.indicator.depth * indentStep,
-        paddingInlineEnd: rowPadX,
+        paddingInlineStart: rowPad.paddingHorizontal,
+        paddingInlineEnd: rowPad.paddingHorizontal,
         pointerEvents: "none",
         zIndex: 999,
         transition: dragUi.mode === "keyboard" ? transition : "none",
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+          width: dragUi.indicator.depth * indentStep,
+          flexShrink: 0
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
           flex: 1,
           height: 2,
           borderRadius: 1,
           backgroundColor: "$accentBackground"
-        })
+        })]
       }),
       /* Ghost overlay: clone of the dragged row outside the virtualized
       list. Pointer mode tracks 1:1 with no tween; the drop/cancel
@@ -1190,8 +1164,8 @@ function TreeView(param) {
         children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
           alignItems: "center",
           height: "100%",
-          paddingHorizontal: rowPadX,
-          gap: "$2",
+          paddingHorizontal: rowPad.paddingHorizontal,
+          gap: rowGap,
           ...knobProps.borderRadius,
           backgroundColor: "$background",
           borderWidth: 1,
@@ -1204,8 +1178,7 @@ function TreeView(param) {
           scale: dragUi ? 1.03 : 1,
           ...(dragUi ? LIFT_SHADOW : void 0),
           children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
-            width: nodeIconSize + 2,
-            height: nodeIconSize + 2,
+            ...knobProps.controlIcon,
             alignItems: "center",
             justifyContent: "center",
             flexShrink: 0,