@atlaskit/charlie-hierarchy 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/charlie-hierarchy
 
+## 0.1.1
+
+### Patch Changes
+
+- [`d20026853a75b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d20026853a75b) -
+  [ux] Support basic stacking functionality
+
 ## 0.1.0
 
 ### Minor Changes

package/dist/cjs/charlie-hierarchy/charlie-hierarchy.js

@@ -16,6 +16,7 @@ var _react = _interopRequireDefault(require("react"));
 var _group = require("@visx/group");
 var _hierarchy = require("@visx/hierarchy");
 var _shape = require("@visx/shape");
+var _utils = require("./utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
  * CharlieHierarchy is meant to be a generic reusable component for building SVG rendered trees.
@@ -31,7 +32,7 @@ var staticStyles = {
   zoom: "_1tktglyw"
 };
 var CharlieHierarchy = exports.CharlieHierarchy = function CharlieHierarchy(props) {
-  var _props$size$, _props$size, _props$size$2, _props$size2, _props$nodeSize$, _props$nodeSize, _props$nodeSize$2, _props$nodeSize2, _props$top, _props$left, _props$renderDependen, _styles$transformMatr, _props$styles2;
+  var _props$size$, _props$size, _props$size$2, _props$size2, _props$nodeSize$, _props$nodeSize, _props$nodeSize$2, _props$nodeSize2, _props$top, _props$left, _props$renderDependen, _props$stackingSpacin, _styles$transformMatr, _props$styles2;
   var _React$useTransition = _react.default.useTransition(),
     _React$useTransition2 = (0, _slicedToArray2.default)(_React$useTransition, 2),
     isSuspending = _React$useTransition2[0],
@@ -56,6 +57,8 @@ var CharlieHierarchy = exports.CharlieHierarchy = function CharlieHierarchy(prop
   var cursor = zoom !== null && zoom !== void 0 && zoom.isDragging ? 'grabbing' : 'grab';
   var children = props.children;
   var renderDependencies = (_props$renderDependen = props.renderDependencies) !== null && _props$renderDependen !== void 0 ? _props$renderDependen : [];
+  var stackingThreshold = props.stackingThreshold;
+  var stackingSpacing = (_props$stackingSpacin = props.stackingSpacing) !== null && _props$stackingSpacin !== void 0 ? _props$stackingSpacin : 70;
 
   /**
    * If zoom is enabled, we need to apply the transform matrix to the SVG.
@@ -80,6 +83,15 @@ var CharlieHierarchy = exports.CharlieHierarchy = function CharlieHierarchy(prop
     }, function (tree) {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tree.links().map(function (link, linkIndex) {
         var _props$styles$lineAtt, _props$styles;
+        if (stackingThreshold) {
+          link.target.x = (0, _utils.calculateLinkTargetPosition)(link.target.x, link.source.children, stackingThreshold, nodeWidthWithPadding);
+
+          // For now, don't render links that are beyond the stacking threshold.
+          // In the future, we can render the links that are beyond the stacking threshold.
+          if (linkIndex > stackingThreshold - 1) {
+            return null;
+          }
+        }
         return /*#__PURE__*/_react.default.createElement(_shape.LinkVerticalStep, (0, _extends2.default)({
           key: "link-".concat(linkIndex),
           data: link,
@@ -104,9 +116,15 @@ var CharlieHierarchy = exports.CharlieHierarchy = function CharlieHierarchy(prop
       nodeSize: nodeSize
     }, function (tree) {
       var descendants = tree.descendants();
+      var stackLocations = [];
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, descendants.map(function (node, index) {
         var top = node.y - nodeHeight / 2;
         var left = node.x - nodeWidth / 2;
+        if (stackingThreshold) {
+          var layout = (0, _utils.updateNodeLayout)(index, stackingThreshold, nodeWidthWithPadding, stackLocations, stackingSpacing, top, left, node);
+          top = layout.top;
+          left = layout.left;
+        }
         return /*#__PURE__*/_react.default.createElement("div", {
           key: "tree-node-".concat(index),
           style: {

package/dist/cjs/charlie-hierarchy/utils.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateNodeLayout = exports.calculateStackingShift = exports.calculateNodePosition = exports.calculateLinkTargetPosition = void 0;
+/**
+ * Utility functions for Charlie Hierarchy component
+ */
+
+/**
+ * Calculates the horizontal shift needed to center nodes when some children are stacked vertically
+ * @param totalChildren - Total number of children for a parent node
+ * @param stackingThreshold - Maximum number of children to display horizontally
+ * @param nodeWidthWithPadding - Width of a node including padding
+ * @returns The horizontal offset to apply for centering
+ */
+var calculateStackingShift = exports.calculateStackingShift = function calculateStackingShift(totalChildren, stackingThreshold, nodeWidthWithPadding) {
+  var stackedChildren = Math.max(0, totalChildren - stackingThreshold);
+  return stackedChildren * nodeWidthWithPadding / 2;
+};
+
+/**
+ * Calculates the adjusted position for a node when stacking is enabled
+ * @param originalLeft - The original left position of the node
+ * @param parentChildren - Array of parent's children (to get total count)
+ * @param stackingThreshold - Maximum number of children to display horizontally
+ * @param nodeWidthWithPadding - Width of a node including padding
+ * @returns The adjusted left position
+ */
+var calculateNodePosition = exports.calculateNodePosition = function calculateNodePosition(originalLeft, parentChildren, stackingThreshold, nodeWidthWithPadding) {
+  if (!parentChildren || parentChildren.length <= stackingThreshold) {
+    return originalLeft;
+  }
+  var stackingShift = calculateStackingShift(parentChildren.length, stackingThreshold, nodeWidthWithPadding);
+  return originalLeft + stackingShift;
+};
+
+/**
+ * Calculates the adjusted x position for a link target when stacking is enabled
+ * @param originalX - The original x position of the link target
+ * @param sourceChildren - Array of source node's children (to get total count)
+ * @param stackingThreshold - Maximum number of children to display horizontally
+ * @param nodeWidthWithPadding - Width of a node including padding
+ * @returns The adjusted x position
+ */
+var calculateLinkTargetPosition = exports.calculateLinkTargetPosition = function calculateLinkTargetPosition(originalX, sourceChildren, stackingThreshold, nodeWidthWithPadding) {
+  if (!sourceChildren || sourceChildren.length <= stackingThreshold) {
+    return originalX;
+  }
+  var stackingShift = calculateStackingShift(sourceChildren.length, stackingThreshold, nodeWidthWithPadding);
+  return originalX + stackingShift;
+};
+
+/**
+ * Updates the layout position for a single node in a hierarchical tree with stacking support
+ * @param index - The index of the current node in the descendants array (0-based)
+ * @param stackingThreshold - Maximum number of nodes to display horizontally before stacking
+ * @param nodeWidthWithPadding - Width of a node including its padding for spacing calculations
+ * @param stackLocations - Mutable array storing positions of horizontal nodes for stacked node reference
+ * @param stackingSpacing - Vertical spacing in pixels between stacked nodes
+ * @param top - Initial top position of the node (before stacking adjustments)
+ * @param left - Initial left position of the node (before centering/stacking adjustments)
+ * @param node - The hierarchy node object containing parent/children relationships
+ * @returns Object containing the final calculated { top, left } position for the node
+ */
+var updateNodeLayout = exports.updateNodeLayout = function updateNodeLayout(index, stackingThreshold, nodeWidthWithPadding, stackLocations, stackingSpacing, top, left, node) {
+  if (index <= stackingThreshold) {
+    if (index > 0) {
+      var _node$parent;
+      left = calculateNodePosition(left, (_node$parent = node.parent) === null || _node$parent === void 0 ? void 0 : _node$parent.children, stackingThreshold, nodeWidthWithPadding);
+    }
+
+    // Add the stack location to the array so we can reference it later
+    stackLocations.push({
+      top: top,
+      left: left
+    });
+  } else {
+    var stackRefrencePoint = stackLocations[index - stackingThreshold];
+    top = stackRefrencePoint.top + stackingSpacing;
+    left = stackRefrencePoint.left;
+    stackLocations.push({
+      top: top,
+      left: left
+    });
+  }
+  return {
+    top: top,
+    left: left
+  };
+};

package/dist/es2019/charlie-hierarchy/charlie-hierarchy.js

@@ -13,6 +13,7 @@ import React from 'react';
 import { Group } from '@visx/group';
 import { Tree } from '@visx/hierarchy';
 import { LinkVerticalStep } from '@visx/shape';
+import { calculateLinkTargetPosition, updateNodeLayout } from './utils';
 const staticStyles = {
   hierarchyWrapper: "_kqswh2mm",
   nodeGroupWrapper: "_kqswstnw",
@@ -21,7 +22,7 @@ const staticStyles = {
   zoom: "_1tktglyw"
 };
 export const CharlieHierarchy = props => {
-  var _props$size$, _props$size, _props$size$2, _props$size2, _props$nodeSize$, _props$nodeSize, _props$nodeSize$2, _props$nodeSize2, _props$top, _props$left, _props$renderDependen, _styles$transformMatr, _props$styles2;
+  var _props$size$, _props$size, _props$size$2, _props$size2, _props$nodeSize$, _props$nodeSize, _props$nodeSize$2, _props$nodeSize2, _props$top, _props$left, _props$renderDependen, _props$stackingSpacin, _styles$transformMatr, _props$styles2;
   const [isSuspending, startSuspending] = React.useTransition();
   const styles = {
     ...{
@@ -46,6 +47,8 @@ export const CharlieHierarchy = props => {
   const cursor = zoom !== null && zoom !== void 0 && zoom.isDragging ? 'grabbing' : 'grab';
   const children = props.children;
   const renderDependencies = (_props$renderDependen = props.renderDependencies) !== null && _props$renderDependen !== void 0 ? _props$renderDependen : [];
+  const stackingThreshold = props.stackingThreshold;
+  const stackingSpacing = (_props$stackingSpacin = props.stackingSpacing) !== null && _props$stackingSpacin !== void 0 ? _props$stackingSpacin : 70;
 
   /**
    * If zoom is enabled, we need to apply the transform matrix to the SVG.
@@ -70,6 +73,15 @@ export const CharlieHierarchy = props => {
     }, tree => {
       return /*#__PURE__*/React.createElement(React.Fragment, null, tree.links().map((link, linkIndex) => {
         var _props$styles$lineAtt, _props$styles;
+        if (stackingThreshold) {
+          link.target.x = calculateLinkTargetPosition(link.target.x, link.source.children, stackingThreshold, nodeWidthWithPadding);
+
+          // For now, don't render links that are beyond the stacking threshold.
+          // In the future, we can render the links that are beyond the stacking threshold.
+          if (linkIndex > stackingThreshold - 1) {
+            return null;
+          }
+        }
         return /*#__PURE__*/React.createElement(LinkVerticalStep, _extends({
           key: `link-${linkIndex}`,
           data: link,
@@ -94,9 +106,15 @@ export const CharlieHierarchy = props => {
       nodeSize: nodeSize
     }, tree => {
       const descendants = tree.descendants();
+      const stackLocations = [];
       return /*#__PURE__*/React.createElement(React.Fragment, null, descendants.map((node, index) => {
-        const top = node.y - nodeHeight / 2;
-        const left = node.x - nodeWidth / 2;
+        let top = node.y - nodeHeight / 2;
+        let left = node.x - nodeWidth / 2;
+        if (stackingThreshold) {
+          const layout = updateNodeLayout(index, stackingThreshold, nodeWidthWithPadding, stackLocations, stackingSpacing, top, left, node);
+          top = layout.top;
+          left = layout.left;
+        }
         return /*#__PURE__*/React.createElement("div", {
           key: `tree-node-${index}`,
           style: {

package/dist/es2019/charlie-hierarchy/utils.js

@@ -0,0 +1,86 @@
+/**
+ * Utility functions for Charlie Hierarchy component
+ */
+
+/**
+ * Calculates the horizontal shift needed to center nodes when some children are stacked vertically
+ * @param totalChildren - Total number of children for a parent node
+ * @param stackingThreshold - Maximum number of children to display horizontally
+ * @param nodeWidthWithPadding - Width of a node including padding
+ * @returns The horizontal offset to apply for centering
+ */
+export const calculateStackingShift = (totalChildren, stackingThreshold, nodeWidthWithPadding) => {
+  const stackedChildren = Math.max(0, totalChildren - stackingThreshold);
+  return stackedChildren * nodeWidthWithPadding / 2;
+};
+
+/**
+ * Calculates the adjusted position for a node when stacking is enabled
+ * @param originalLeft - The original left position of the node
+ * @param parentChildren - Array of parent's children (to get total count)
+ * @param stackingThreshold - Maximum number of children to display horizontally
+ * @param nodeWidthWithPadding - Width of a node including padding
+ * @returns The adjusted left position
+ */
+export const calculateNodePosition = (originalLeft, parentChildren, stackingThreshold, nodeWidthWithPadding) => {
+  if (!parentChildren || parentChildren.length <= stackingThreshold) {
+    return originalLeft;
+  }
+  const stackingShift = calculateStackingShift(parentChildren.length, stackingThreshold, nodeWidthWithPadding);
+  return originalLeft + stackingShift;
+};
+
+/**
+ * Calculates the adjusted x position for a link target when stacking is enabled
+ * @param originalX - The original x position of the link target
+ * @param sourceChildren - Array of source node's children (to get total count)
+ * @param stackingThreshold - Maximum number of children to display horizontally
+ * @param nodeWidthWithPadding - Width of a node including padding
+ * @returns The adjusted x position
+ */
+export const calculateLinkTargetPosition = (originalX, sourceChildren, stackingThreshold, nodeWidthWithPadding) => {
+  if (!sourceChildren || sourceChildren.length <= stackingThreshold) {
+    return originalX;
+  }
+  const stackingShift = calculateStackingShift(sourceChildren.length, stackingThreshold, nodeWidthWithPadding);
+  return originalX + stackingShift;
+};
+
+/**
+ * Updates the layout position for a single node in a hierarchical tree with stacking support
+ * @param index - The index of the current node in the descendants array (0-based)
+ * @param stackingThreshold - Maximum number of nodes to display horizontally before stacking
+ * @param nodeWidthWithPadding - Width of a node including its padding for spacing calculations
+ * @param stackLocations - Mutable array storing positions of horizontal nodes for stacked node reference
+ * @param stackingSpacing - Vertical spacing in pixels between stacked nodes
+ * @param top - Initial top position of the node (before stacking adjustments)
+ * @param left - Initial left position of the node (before centering/stacking adjustments)
+ * @param node - The hierarchy node object containing parent/children relationships
+ * @returns Object containing the final calculated { top, left } position for the node
+ */
+export const updateNodeLayout = (index, stackingThreshold, nodeWidthWithPadding, stackLocations, stackingSpacing, top, left, node) => {
+  if (index <= stackingThreshold) {
+    if (index > 0) {
+      var _node$parent;
+      left = calculateNodePosition(left, (_node$parent = node.parent) === null || _node$parent === void 0 ? void 0 : _node$parent.children, stackingThreshold, nodeWidthWithPadding);
+    }
+
+    // Add the stack location to the array so we can reference it later
+    stackLocations.push({
+      top: top,
+      left: left
+    });
+  } else {
+    const stackRefrencePoint = stackLocations[index - stackingThreshold];
+    top = stackRefrencePoint.top + stackingSpacing;
+    left = stackRefrencePoint.left;
+    stackLocations.push({
+      top: top,
+      left: left
+    });
+  }
+  return {
+    top,
+    left
+  };
+};

package/dist/esm/charlie-hierarchy/charlie-hierarchy.js

@@ -18,6 +18,7 @@ import React from 'react';
 import { Group } from '@visx/group';
 import { Tree } from '@visx/hierarchy';
 import { LinkVerticalStep } from '@visx/shape';
+import { calculateLinkTargetPosition, updateNodeLayout } from './utils';
 var staticStyles = {
   hierarchyWrapper: "_kqswh2mm",
   nodeGroupWrapper: "_kqswstnw",
@@ -26,7 +27,7 @@ var staticStyles = {
   zoom: "_1tktglyw"
 };
 export var CharlieHierarchy = function CharlieHierarchy(props) {
-  var _props$size$, _props$size, _props$size$2, _props$size2, _props$nodeSize$, _props$nodeSize, _props$nodeSize$2, _props$nodeSize2, _props$top, _props$left, _props$renderDependen, _styles$transformMatr, _props$styles2;
+  var _props$size$, _props$size, _props$size$2, _props$size2, _props$nodeSize$, _props$nodeSize, _props$nodeSize$2, _props$nodeSize2, _props$top, _props$left, _props$renderDependen, _props$stackingSpacin, _styles$transformMatr, _props$styles2;
   var _React$useTransition = React.useTransition(),
     _React$useTransition2 = _slicedToArray(_React$useTransition, 2),
     isSuspending = _React$useTransition2[0],
@@ -51,6 +52,8 @@ export var CharlieHierarchy = function CharlieHierarchy(props) {
   var cursor = zoom !== null && zoom !== void 0 && zoom.isDragging ? 'grabbing' : 'grab';
   var children = props.children;
   var renderDependencies = (_props$renderDependen = props.renderDependencies) !== null && _props$renderDependen !== void 0 ? _props$renderDependen : [];
+  var stackingThreshold = props.stackingThreshold;
+  var stackingSpacing = (_props$stackingSpacin = props.stackingSpacing) !== null && _props$stackingSpacin !== void 0 ? _props$stackingSpacin : 70;
 
   /**
    * If zoom is enabled, we need to apply the transform matrix to the SVG.
@@ -75,6 +78,15 @@ export var CharlieHierarchy = function CharlieHierarchy(props) {
     }, function (tree) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, tree.links().map(function (link, linkIndex) {
         var _props$styles$lineAtt, _props$styles;
+        if (stackingThreshold) {
+          link.target.x = calculateLinkTargetPosition(link.target.x, link.source.children, stackingThreshold, nodeWidthWithPadding);
+
+          // For now, don't render links that are beyond the stacking threshold.
+          // In the future, we can render the links that are beyond the stacking threshold.
+          if (linkIndex > stackingThreshold - 1) {
+            return null;
+          }
+        }
         return /*#__PURE__*/React.createElement(LinkVerticalStep, _extends({
           key: "link-".concat(linkIndex),
           data: link,
@@ -99,9 +111,15 @@ export var CharlieHierarchy = function CharlieHierarchy(props) {
       nodeSize: nodeSize
     }, function (tree) {
       var descendants = tree.descendants();
+      var stackLocations = [];
       return /*#__PURE__*/React.createElement(React.Fragment, null, descendants.map(function (node, index) {
         var top = node.y - nodeHeight / 2;
         var left = node.x - nodeWidth / 2;
+        if (stackingThreshold) {
+          var layout = updateNodeLayout(index, stackingThreshold, nodeWidthWithPadding, stackLocations, stackingSpacing, top, left, node);
+          top = layout.top;
+          left = layout.left;
+        }
         return /*#__PURE__*/React.createElement("div", {
           key: "tree-node-".concat(index),
           style: {

package/dist/esm/charlie-hierarchy/utils.js

@@ -0,0 +1,86 @@
+/**
+ * Utility functions for Charlie Hierarchy component
+ */
+
+/**
+ * Calculates the horizontal shift needed to center nodes when some children are stacked vertically
+ * @param totalChildren - Total number of children for a parent node
+ * @param stackingThreshold - Maximum number of children to display horizontally
+ * @param nodeWidthWithPadding - Width of a node including padding
+ * @returns The horizontal offset to apply for centering
+ */
+export var calculateStackingShift = function calculateStackingShift(totalChildren, stackingThreshold, nodeWidthWithPadding) {
+  var stackedChildren = Math.max(0, totalChildren - stackingThreshold);
+  return stackedChildren * nodeWidthWithPadding / 2;
+};
+
+/**
+ * Calculates the adjusted position for a node when stacking is enabled
+ * @param originalLeft - The original left position of the node
+ * @param parentChildren - Array of parent's children (to get total count)
+ * @param stackingThreshold - Maximum number of children to display horizontally
+ * @param nodeWidthWithPadding - Width of a node including padding
+ * @returns The adjusted left position
+ */
+export var calculateNodePosition = function calculateNodePosition(originalLeft, parentChildren, stackingThreshold, nodeWidthWithPadding) {
+  if (!parentChildren || parentChildren.length <= stackingThreshold) {
+    return originalLeft;
+  }
+  var stackingShift = calculateStackingShift(parentChildren.length, stackingThreshold, nodeWidthWithPadding);
+  return originalLeft + stackingShift;
+};
+
+/**
+ * Calculates the adjusted x position for a link target when stacking is enabled
+ * @param originalX - The original x position of the link target
+ * @param sourceChildren - Array of source node's children (to get total count)
+ * @param stackingThreshold - Maximum number of children to display horizontally
+ * @param nodeWidthWithPadding - Width of a node including padding
+ * @returns The adjusted x position
+ */
+export var calculateLinkTargetPosition = function calculateLinkTargetPosition(originalX, sourceChildren, stackingThreshold, nodeWidthWithPadding) {
+  if (!sourceChildren || sourceChildren.length <= stackingThreshold) {
+    return originalX;
+  }
+  var stackingShift = calculateStackingShift(sourceChildren.length, stackingThreshold, nodeWidthWithPadding);
+  return originalX + stackingShift;
+};
+
+/**
+ * Updates the layout position for a single node in a hierarchical tree with stacking support
+ * @param index - The index of the current node in the descendants array (0-based)
+ * @param stackingThreshold - Maximum number of nodes to display horizontally before stacking
+ * @param nodeWidthWithPadding - Width of a node including its padding for spacing calculations
+ * @param stackLocations - Mutable array storing positions of horizontal nodes for stacked node reference
+ * @param stackingSpacing - Vertical spacing in pixels between stacked nodes
+ * @param top - Initial top position of the node (before stacking adjustments)
+ * @param left - Initial left position of the node (before centering/stacking adjustments)
+ * @param node - The hierarchy node object containing parent/children relationships
+ * @returns Object containing the final calculated { top, left } position for the node
+ */
+export var updateNodeLayout = function updateNodeLayout(index, stackingThreshold, nodeWidthWithPadding, stackLocations, stackingSpacing, top, left, node) {
+  if (index <= stackingThreshold) {
+    if (index > 0) {
+      var _node$parent;
+      left = calculateNodePosition(left, (_node$parent = node.parent) === null || _node$parent === void 0 ? void 0 : _node$parent.children, stackingThreshold, nodeWidthWithPadding);
+    }
+
+    // Add the stack location to the array so we can reference it later
+    stackLocations.push({
+      top: top,
+      left: left
+    });
+  } else {
+    var stackRefrencePoint = stackLocations[index - stackingThreshold];
+    top = stackRefrencePoint.top + stackingSpacing;
+    left = stackRefrencePoint.left;
+    stackLocations.push({
+      top: top,
+      left: left
+    });
+  }
+  return {
+    top: top,
+    left: left
+  };
+};

package/dist/types/charlie-hierarchy/charlie-hierarchy.d.ts

@@ -61,5 +61,15 @@ export interface CharlieHierarchyProps<Datum> extends Omit<TreeProps<Datum>, 'ch
      * Pass any dependencies that on change should trigger a re-render of the tree.
      */
     renderDependencies?: React.DependencyList;
+    /**
+     * When specified, enables vertical stacking of overflow children.
+     * Children beyond this threshold will be stacked vertically under the first child.
+     */
+    stackingThreshold?: number;
+    /**
+     * Vertical spacing between stacked nodes in pixels.
+     * @default 70
+     */
+    stackingSpacing?: number;
 }
 export declare const CharlieHierarchy: <Datum>(props: CharlieHierarchyProps<Datum>) => JSX.Element;

package/dist/types/charlie-hierarchy/utils.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Utility functions for Charlie Hierarchy component
+ */
+import type { HierarchyPointNode } from "@visx/hierarchy/lib/types";
+/**
+ * Calculates the horizontal shift needed to center nodes when some children are stacked vertically
+ * @param totalChildren - Total number of children for a parent node
+ * @param stackingThreshold - Maximum number of children to display horizontally
+ * @param nodeWidthWithPadding - Width of a node including padding
+ * @returns The horizontal offset to apply for centering
+ */
+export declare const calculateStackingShift: (totalChildren: number, stackingThreshold: number, nodeWidthWithPadding: number) => number;
+/**
+ * Calculates the adjusted position for a node when stacking is enabled
+ * @param originalLeft - The original left position of the node
+ * @param parentChildren - Array of parent's children (to get total count)
+ * @param stackingThreshold - Maximum number of children to display horizontally
+ * @param nodeWidthWithPadding - Width of a node including padding
+ * @returns The adjusted left position
+ */
+export declare const calculateNodePosition: (originalLeft: number, parentChildren: unknown[] | undefined, stackingThreshold: number, nodeWidthWithPadding: number) => number;
+/**
+ * Calculates the adjusted x position for a link target when stacking is enabled
+ * @param originalX - The original x position of the link target
+ * @param sourceChildren - Array of source node's children (to get total count)
+ * @param stackingThreshold - Maximum number of children to display horizontally
+ * @param nodeWidthWithPadding - Width of a node including padding
+ * @returns The adjusted x position
+ */
+export declare const calculateLinkTargetPosition: (originalX: number, sourceChildren: unknown[] | undefined, stackingThreshold: number, nodeWidthWithPadding: number) => number;
+/**
+ * Updates the layout position for a single node in a hierarchical tree with stacking support
+ * @param index - The index of the current node in the descendants array (0-based)
+ * @param stackingThreshold - Maximum number of nodes to display horizontally before stacking
+ * @param nodeWidthWithPadding - Width of a node including its padding for spacing calculations
+ * @param stackLocations - Mutable array storing positions of horizontal nodes for stacked node reference
+ * @param stackingSpacing - Vertical spacing in pixels between stacked nodes
+ * @param top - Initial top position of the node (before stacking adjustments)
+ * @param left - Initial left position of the node (before centering/stacking adjustments)
+ * @param node - The hierarchy node object containing parent/children relationships
+ * @returns Object containing the final calculated { top, left } position for the node
+ */
+export declare const updateNodeLayout: <Datum>(index: number, stackingThreshold: number, nodeWidthWithPadding: number, stackLocations: {
+    top: number;
+    left: number;
+}[], stackingSpacing: number, top: number, left: number, node: HierarchyPointNode<Datum>) => {
+    top: number;
+    left: number;
+};

package/dist/types-ts4.5/charlie-hierarchy/charlie-hierarchy.d.ts

@@ -61,5 +61,15 @@ export interface CharlieHierarchyProps<Datum> extends Omit<TreeProps<Datum>, 'ch
      * Pass any dependencies that on change should trigger a re-render of the tree.
      */
     renderDependencies?: React.DependencyList;
+    /**
+     * When specified, enables vertical stacking of overflow children.
+     * Children beyond this threshold will be stacked vertically under the first child.
+     */
+    stackingThreshold?: number;
+    /**
+     * Vertical spacing between stacked nodes in pixels.
+     * @default 70
+     */
+    stackingSpacing?: number;
 }
 export declare const CharlieHierarchy: <Datum>(props: CharlieHierarchyProps<Datum>) => JSX.Element;

package/dist/types-ts4.5/charlie-hierarchy/utils.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Utility functions for Charlie Hierarchy component
+ */
+import type { HierarchyPointNode } from "@visx/hierarchy/lib/types";
+/**
+ * Calculates the horizontal shift needed to center nodes when some children are stacked vertically
+ * @param totalChildren - Total number of children for a parent node
+ * @param stackingThreshold - Maximum number of children to display horizontally
+ * @param nodeWidthWithPadding - Width of a node including padding
+ * @returns The horizontal offset to apply for centering
+ */
+export declare const calculateStackingShift: (totalChildren: number, stackingThreshold: number, nodeWidthWithPadding: number) => number;
+/**
+ * Calculates the adjusted position for a node when stacking is enabled
+ * @param originalLeft - The original left position of the node
+ * @param parentChildren - Array of parent's children (to get total count)
+ * @param stackingThreshold - Maximum number of children to display horizontally
+ * @param nodeWidthWithPadding - Width of a node including padding
+ * @returns The adjusted left position
+ */
+export declare const calculateNodePosition: (originalLeft: number, parentChildren: unknown[] | undefined, stackingThreshold: number, nodeWidthWithPadding: number) => number;
+/**
+ * Calculates the adjusted x position for a link target when stacking is enabled
+ * @param originalX - The original x position of the link target
+ * @param sourceChildren - Array of source node's children (to get total count)
+ * @param stackingThreshold - Maximum number of children to display horizontally
+ * @param nodeWidthWithPadding - Width of a node including padding
+ * @returns The adjusted x position
+ */
+export declare const calculateLinkTargetPosition: (originalX: number, sourceChildren: unknown[] | undefined, stackingThreshold: number, nodeWidthWithPadding: number) => number;
+/**
+ * Updates the layout position for a single node in a hierarchical tree with stacking support
+ * @param index - The index of the current node in the descendants array (0-based)
+ * @param stackingThreshold - Maximum number of nodes to display horizontally before stacking
+ * @param nodeWidthWithPadding - Width of a node including its padding for spacing calculations
+ * @param stackLocations - Mutable array storing positions of horizontal nodes for stacked node reference
+ * @param stackingSpacing - Vertical spacing in pixels between stacked nodes
+ * @param top - Initial top position of the node (before stacking adjustments)
+ * @param left - Initial left position of the node (before centering/stacking adjustments)
+ * @param node - The hierarchy node object containing parent/children relationships
+ * @returns Object containing the final calculated { top, left } position for the node
+ */
+export declare const updateNodeLayout: <Datum>(index: number, stackingThreshold: number, nodeWidthWithPadding: number, stackLocations: {
+    top: number;
+    left: number;
+}[], stackingSpacing: number, top: number, left: number, node: HierarchyPointNode<Datum>) => {
+    top: number;
+    left: number;
+};

package/package.json

@@ -30,6 +30,7 @@
 		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/primitives": "^14.11.0",
+		"@atlaskit/range": "^9.2.0",
 		"@atlaskit/tokens": "^6.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
@@ -94,7 +95,7 @@
 		]
 	},
 	"name": "@atlaskit/charlie-hierarchy",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"description": "A component for building SVG-rendered trees, with support for custom node rendering, zooming, and panning.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",