npm - @pega/cosmos-react-core - Versions diffs - 4.0.0-dev.7.0 → 4.0.0-dev.8.1 - Mend

@pega/cosmos-react-core 4.0.0-dev.7.0 → 4.0.0-dev.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (98) hide show

package/lib/components/Tree/StandardTree.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, createContext, useMemo, useContext, useCallback, useState, useEffect, useRef } from 'react';
 import Progress from '../Progress';
-import { useDirection } from '../../hooks';
+import { useConsolidatedRef, useDirection, useFocusWithin } from '../../hooks';
 import Flex from '../Flex';
-import Button from '../Button';
 import Actions from '../Actions';
 import { cap } from '../../utils';
-import { StyledStandardTreeParent, StyledToggleIcon, StyledStandardTreeItemSubTree, StyledStandardTreeLeaf, StyledStandardTree, StyledNodeInteraction, StyledStandardTreeNode, StyledNodeActions, StyledLabelContent, StyledNodeIcon, StyledNodeText } from './StandardTree.styles';
+import Button from '../Button';
+import { StyledStandardTreeParent, StyledToggleIcon, StyledToggleIconWrapper, StyledStandardTreeItemSubTree, StyledStandardTreeLeaf, StyledStandardTree, StyledNodeInteraction, StyledStandardTreeNode, StyledNodeActions, StyledLabelContent, StyledNodeIcon, StyledNodeText } from './StandardTree.styles';
 import helpers from './helpers';
 const StandardTreeContext = createContext({
     currentNodeId: undefined,
@@ -16,20 +16,24 @@ const StandardTreeContext = createContext({
     firstNodeId: undefined,
     lastNodeId: undefined,
     focusedNodeId: undefined,
-    changeFocusedNodeId: () => { }
+    changeFocusedNodeId: () => { },
+    selectableParents: true
 });
-const NodeRenderer = ({ id, label, icon, depth, hasParentSibling, nodes, expanded = false, loading = false, subTree, actions, onClick }) => {
-    const { currentNodeId, onNodeClick, onNodeToggle, lined, focusedNodeId, changeFocusedNodeId, firstNodeId, lastNodeId } = useContext(StandardTreeContext);
+const NodeRenderer = ({ id, label, icon, depth, hasParentSibling, nodes, expanded = false, loading = false, subTree, actions, onClick, href }) => {
+    const { currentNodeId, onNodeClick, onNodeToggle, lined, focusedNodeId, changeFocusedNodeId, firstNodeId, lastNodeId, selectableParents } = useContext(StandardTreeContext);
     const current = currentNodeId === id;
     const focusedEl = focusedNodeId === id;
     const firstNode = firstNodeId === id;
     const { start, end } = useDirection();
+    const ariaCurrent = useMemo(() => {
+        return href ? 'page' : 'true';
+    }, [href]);
     const tabIndex = useMemo(() => {
         let index = -1;
         if (focusedNodeId) {
             index = focusedEl ? 0 : -1;
         }
-        else if (currentNodeId) {
+        else if (currentNodeId && nodes && helpers.getNode(nodes, currentNodeId)) {
             index = current ? 0 : -1;
         }
         else {
@@ -37,12 +41,20 @@ const NodeRenderer = ({ id, label, icon, depth, hasParentSibling, nodes, expande
         }
         return index;
     }, [focusedNodeId, currentNodeId, current, focusedEl]);
-    const handleToggleClick = useCallback((e) => {
+    const handleParentClick = useCallback((e) => {
         onNodeClick?.(id, e);
         changeFocusedNodeId(id);
     }, [id, onNodeClick, changeFocusedNodeId]);
+    const handleParentToggle = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onNodeToggle?.(id, e);
+        changeFocusedNodeId(id);
+    }, [id, onNodeToggle, changeFocusedNodeId]);
     const onKeyDown = useCallback((e) => {
-        if (['ArrowUp', 'ArrowDown', 'Enter', 'Home', 'End'].includes(e.key))
+        if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.key))
+            e.preventDefault();
+        if (e.key === 'Enter' && !href)
             e.preventDefault();
         switch (e.key) {
             case 'ArrowUp':
@@ -70,11 +82,18 @@ const NodeRenderer = ({ id, label, icon, depth, hasParentSibling, nodes, expande
                 }
                 break;
             case 'Enter':
-                if (onClick) {
-                    onClick(id, e);
+                onClick?.(id, e);
+                if (nodes) {
+                    if (selectableParents) {
+                        handleParentClick(e);
+                    }
+                    else {
+                        handleParentToggle(e);
+                    }
                 }
                 else {
-                    handleToggleClick(e);
+                    onNodeClick?.(id, e);
+                    changeFocusedNodeId(id);
                 }
                 break;
             case 'Home':
@@ -95,11 +114,19 @@ const NodeRenderer = ({ id, label, icon, depth, hasParentSibling, nodes, expande
                         ...action,
                         onClick: (actionId, e) => {
                             e.stopPropagation();
+                            e.preventDefault();
                             action?.onClick?.(actionId, e);
+                        },
+                        onKeyDown: (e) => {
+                            if (e.key === 'Enter')
+                                e.stopPropagation();
                         }
                     };
                 }), menuAt: 3, menuButtonProps: {
-                    onClick: (e) => e.stopPropagation(),
+                    onClick: (e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                    },
                     onKeyDown: (e) => {
                         e.stopPropagation();
                         if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
@@ -118,11 +145,11 @@ const NodeRenderer = ({ id, label, icon, depth, hasParentSibling, nodes, expande
         const internal = (
         // Wrapping in a div for handling of flex space-between when there are node actions.
         _jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: StyledLabelContent, children: [icon && _jsx(StyledNodeIcon, { name: icon }), _jsx(StyledNodeText, { children: label })] }));
-        return !nodes && (onClick ?? onNodeClick) ? (_jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 2 }, as: StyledNodeInteraction, role: 'treeitem', "aria-current": current ? 'true' : undefined, tabIndex: tabIndex, onClick: (e) => {
+        return !nodes && (onClick ?? onNodeClick) ? (_jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 2 }, as: StyledNodeInteraction, forwardedAs: href ? 'a' : 'div', role: 'treeitem', "aria-current": current ? ariaCurrent : undefined, tabIndex: tabIndex, onClick: (e) => {
                 onClick?.(id, e);
                 onNodeClick?.(id, e);
                 changeFocusedNodeId(id);
-            }, onKeyDown: onKeyDown, ref: elRef, children: [internal, actionsJSX] })) : (internal);
+            }, href: href, onKeyDown: onKeyDown, ref: elRef, children: [internal, actionsJSX] })) : (internal);
     }, [
         id,
         label,
@@ -137,16 +164,15 @@ const NodeRenderer = ({ id, label, icon, depth, hasParentSibling, nodes, expande
         changeFocusedNodeId,
         onKeyDown
     ]);
-    return (_jsx(StyledStandardTreeNode, { id: id, style: { '--depth': depth, '--has-parent-sibling': Number(hasParentSibling) }, "aria-busy": loading, children: nodes ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 2 }, as: StyledStandardTreeParent, role: 'treeitem', "aria-current": current ? 'true' : undefined, tabIndex: tabIndex, variant: 'text', onClick: handleToggleClick, "aria-expanded": expanded ? 'true' : 'false', "aria-label": label, onKeyDown: onKeyDown, ref: elRef, children: [_jsxs(Flex, { container: { alignItems: 'center', gap: 0.5 }, as: 'span', children: [_jsx(Button, { variant: 'simple', icon: true, compact: true, onClick: (e) => {
-                                        if (onNodeToggle) {
-                                            e.stopPropagation();
-                                            onNodeToggle(id, e);
-                                            changeFocusedNodeId(id);
-                                        }
-                                    }, children: _jsx(StyledToggleIcon, { name: 'caret-right' }) }), labelContent] }), actionsJSX] }), _jsxs(StyledStandardTreeItemSubTree, { lined: lined, children: [subTree, loading && _jsx(Progress, { variant: 'ring', placement: 'inline' })] })] })) : (_jsx(StyledStandardTreeLeaf, { children: labelContent })) }));
+    return (_jsx(StyledStandardTreeNode, { id: id, style: {
+            '--depth': depth,
+            '--has-parent': depth ? 1 : 0,
+            '--has-parent-sibling': hasParentSibling ? 1 : 0
+        }, "aria-busy": loading, children: nodes ? (_jsxs(_Fragment, { children: [_jsxs(Flex, { container: { alignItems: 'center', justify: 'between', gap: 2 }, as: StyledStandardTreeParent, forwardedAs: href ? 'a' : 'div', role: 'treeitem', "aria-current": current ? ariaCurrent : undefined, tabIndex: tabIndex, variant: 'text', onClick: selectableParents ? handleParentClick : handleParentToggle, href: selectableParents ? href : undefined, "aria-expanded": expanded ? 'true' : 'false', "aria-owns": `${id}-subtree`, "aria-label": label, onKeyDown: onKeyDown, ref: elRef, children: [_jsxs(Flex, { container: { alignItems: 'center' }, as: 'span', children: [selectableParents ? (_jsx(Button, { variant: 'simple', tabIndex: -1, icon: true, compact: true, onClick: handleParentToggle, children: _jsx(StyledToggleIcon, { name: 'caret-right' }) })) : (_jsx(Flex, { as: StyledToggleIconWrapper, container: { justify: 'center', alignItems: 'center' }, children: _jsx(StyledToggleIcon, { name: 'caret-right' }) })), labelContent] }), actionsJSX] }), _jsxs(StyledStandardTreeItemSubTree, { lined: lined, id: `${id}-subtree`, children: [subTree, loading && _jsx(Progress, { variant: 'ring', placement: 'inline' })] })] })) : (_jsx(StyledStandardTreeLeaf, { children: labelContent })) }));
 };
-const StandardTreeWithNodes = forwardRef(({ nodes, currentNodeId, onNodeClick, onNodeToggle, lined = false, ...restProps }, ref) => {
+const StandardTreeWithNodes = forwardRef(({ nodes, currentNodeId, onNodeClick, onNodeToggle, lined = false, selectableParents = true, ...restProps }, ref) => {
     const [focusedNodeId, setFocusedNodedId] = useState();
+    const treeRef = useConsolidatedRef(ref);
     const lastNodeId = useMemo(() => {
         return helpers.getDeepestNode(nodes, nodes[nodes.length - 1].id)?.id;
     }, [nodes]);
@@ -176,10 +202,18 @@ const StandardTreeWithNodes = forwardRef(({ nodes, currentNodeId, onNodeClick, o
                     setFocusedNodedId(childNode.id);
                 break;
             }
-            default:
-                setFocusedNodedId(id);
+            default: {
+                if (id !== focusedNodeId)
+                    setFocusedNodedId(id);
+                break;
+            }
         }
     }, [nodes]);
+    const onFocusChange = (focused) => {
+        if (!focused)
+            setFocusedNodedId('');
+    };
+    useFocusWithin([treeRef], onFocusChange);
     return (_jsx(StandardTreeContext.Provider, { value: useMemo(() => ({
             currentNodeId,
             focusedNodeId,
@@ -188,8 +222,17 @@ const StandardTreeWithNodes = forwardRef(({ nodes, currentNodeId, onNodeClick, o
             changeFocusedNodeId,
             onNodeClick,
             onNodeToggle,
-            lined
-        }), [currentNodeId, onNodeClick, lined, focusedNodeId, lastNodeId, onNodeToggle]), children: _jsx(StyledStandardTree, { ...restProps, ref: ref, nodes: nodes, nodeRenderer: NodeRenderer }) }));
+            lined,
+            selectableParents
+        }), [
+            currentNodeId,
+            onNodeClick,
+            lined,
+            focusedNodeId,
+            lastNodeId,
+            onNodeToggle,
+            selectableParents
+        ]), children: _jsx(StyledStandardTree, { ...restProps, ref: treeRef, nodes: nodes, nodeRenderer: NodeRenderer }) }));
 });
 const StandardTree = forwardRef((props, ref) => {
     return props.nodes.length > 0 ? _jsx(StandardTreeWithNodes, { ...props, ref: ref }) : null;

package/lib/components/Tree/StandardTree.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StandardTree.js","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EACV,aAAa,EACb,OAAO,EACP,UAAU,EACV,WAAW,EACX,QAAQ,EAER,SAAS,EACT,MAAM,EACP,MAAM,OAAO,CAAC;AAGf,OAAO,QAAQ,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,IAAI,MAAM,SAAS,CAAC;AAC3B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,OAAO,MAAM,YAAY,CAAC;AAEjC,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,OAAO,EACL,wBAAwB,EACxB,gBAAgB,EAChB,6BAA6B,EAC7B,sBAAsB,EACtB,kBAAkB,EAClB,qBAAqB,EACrB,sBAAsB,EACtB,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,cAAc,EACf,MAAM,uBAAuB,CAAC;AAQ/B,OAAO,OAAO,MAAM,WAAW,CAAC;AAEhC,MAAM,mBAAmB,GAAG,aAAa,CAYvC;IACA,aAAa,EAAE,SAAS;IACxB,KAAK,EAAE,KAAK;IACZ,WAAW,EAAE,GAAG,EAAE,GAAE,CAAC;IACrB,YAAY,EAAE,GAAG,EAAE,GAAE,CAAC;IACtB,WAAW,EAAE,SAAS;IACtB,UAAU,EAAE,SAAS;IACrB,aAAa,EAAE,SAAS;IACxB,mBAAmB,EAAE,GAAG,EAAE,GAAE,CAAC;CAC9B,CAAC,CAAC;AAEH,MAAM,YAAY,GAAgD,CAAC,EACjE,EAAE,EACF,KAAK,EACL,IAAI,EACJ,KAAK,EACL,gBAAgB,EAChB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,OAAO,EACP,OAAO,EACP,OAAO,EACR,EAAE,EAAE;IACH,MAAM,EACJ,aAAa,EACb,WAAW,EACX,YAAY,EACZ,KAAK,EACL,aAAa,EACb,mBAAmB,EACnB,WAAW,EACX,UAAU,EACX,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IACpC,MAAM,OAAO,GAAG,aAAa,KAAK,EAAE,CAAC;IACrC,MAAM,SAAS,GAAG,aAAa,KAAK,EAAE,CAAC;IACvC,MAAM,SAAS,GAAG,WAAW,KAAK,EAAE,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAEtC,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC;QACf,IAAI,aAAa,EAAE;YACjB,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC5B;aAAM,IAAI,aAAa,EAAE;YACxB,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC1B;aAAM;YACL,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC5B;QACD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAEvD,MAAM,iBAAiB,GAAG,WAAW,CACnC,CAAC,CAAuD,EAAE,EAAE;QAC1D,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;QACrB,mBAAmB,CAAC,EAAE,CAAC,CAAC;IAC1B,CAAC,EACD,CAAC,EAAE,EAAE,WAAW,EAAE,mBAAmB,CAAC,CACvC,CAAC;IAEF,MAAM,SAAS,GAAG,WAAW,CAC3B,CAAC,CAA6B,EAAE,EAAE;QAChC,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC;YAAE,CAAC,CAAC,cAAc,EAAE,CAAC;QACzF,QAAQ,CAAC,CAAC,GAAG,EAAE;YACb,KAAK,SAAS;gBACZ,mBAAmB,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;gBAC9B,MAAM;YACR,KAAK,WAAW;gBACd,mBAAmB,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;gBAChC,MAAM;YACR,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,EAAE;gBACrB,IAAI,KAAK,EAAE;oBACT,IAAI,QAAQ,EAAE;wBACZ,mBAAmB,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;qBAClC;yBAAM;wBACL,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC;qBACpB;iBACF;gBACD,MAAM;YACR,KAAK,QAAQ,GAAG,CAAC,KAAK,CAAC,EAAE;gBACvB,IAAI,QAAQ,EAAE;oBACZ,YAAY,EAAE,CAAC,EAAE,CAAC,CAAC;iBACpB;qBAAM;oBACL,mBAAmB,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;iBACjC;gBACD,MAAM;YACR,KAAK,OAAO;gBACV,IAAI,OAAO,EAAE;oBACX,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;iBAChB;qBAAM;oBACL,iBAAiB,CAAC,CAAC,CAAC,CAAC;iBACtB;gBACD,MAAM;YACR,KAAK,MAAM;gBACT,IAAI,WAAW;oBAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;gBAClD,MAAM;YACR,KAAK,KAAK;gBACR,IAAI,UAAU;oBAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;gBAChD,MAAM;YACR,QAAQ;SACT;IACH,CAAC,EACD,CAAC,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,mBAAmB,CAAC,CAClF,CAAC;IAEF,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,2FAA2F;QAC3F,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,KAAC,iBAAiB,cAChB,KAAC,OAAO,IACN,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;oBAC1B,OAAO;wBACL,GAAG,MAAM;wBACT,OAAO,EAAE,CACP,QAAsB,EACtB,CAAuE,EACvE,EAAE;4BACF,CAAC,CAAC,eAAe,EAAE,CAAC;4BACpB,MAAM,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;wBACjC,CAAC;qBACF,CAAC;gBACJ,CAAC,CAAC,EACF,MAAM,EAAE,CAAC,EACT,eAAe,EAAE;oBACf,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;oBAC/C,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;wBAC9B,CAAC,CAAC,eAAe,EAAE,CAAC;wBACpB,IAAI,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE;4BAC5C,CAAC,CAAC,cAAc,EAAE,CAAC;yBACpB;oBACH,CAAC;iBACF,GACD,GACgB,CACrB,CAAC,CAAC,CAAC,IAAI,CAAC;IACX,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,KAAK,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE3C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,EAAE;YACb,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;SACzB;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,MAAM,QAAQ,GAAG;QACf,oFAAoF;QACpF,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,kBAAkB,aACxE,IAAI,IAAI,KAAC,cAAc,IAAC,IAAI,EAAE,IAAI,GAAI,EACvC,KAAC,cAAc,cAAE,KAAK,GAAkB,IACnC,CACR,CAAC;QAEF,OAAO,CAAC,KAAK,IAAI,CAAC,OAAO,IAAI,WAAW,CAAC,CAAC,CAAC,CAAC,CAC1C,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,EAAE,EAC/D,EAAE,EAAE,qBAAqB,EACzB,IAAI,EAAC,UAAU,kBACD,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC1C,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAA0B,EAAE,EAAE;gBACtC,OAAO,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;gBACjB,WAAW,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;gBACrB,mBAAmB,CAAC,EAAE,CAAC,CAAC;YAC1B,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,KAAK,aAET,QAAQ,EACR,UAAU,IACN,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,CAAC;IACJ,CAAC,EAAE;QACD,EAAE;QACF,KAAK;QACL,IAAI;QACJ,KAAK;QACL,OAAO;QACP,OAAO;QACP,WAAW;QACX,OAAO;QACP,SAAS;QACT,QAAQ;QACR,mBAAmB;QACnB,SAAS;KACV,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,sBAAsB,IACrB,EAAE,EAAE,EAAE,EACN,KAAK,EACH,EAAE,SAAS,EAAE,KAAK,EAAE,sBAAsB,EAAE,MAAM,CAAC,gBAAgB,CAAC,EAAmB,eAE9E,OAAO,YAEjB,KAAK,CAAC,CAAC,CAAC,CACP,8BACE,MAAC,IAAI,IACH,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,EAAE,EAC/D,EAAE,EAAE,wBAAwB,EAC5B,IAAI,EAAC,UAAU,kBACD,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC1C,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,iBAAiB,mBACX,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,gBAC9B,KAAK,EACjB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,KAAK,aAEV,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,EAAC,MAAM,aAC5D,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,QACJ,OAAO,QACP,OAAO,EAAE,CAAC,CAA0B,EAAE,EAAE;wCACtC,IAAI,YAAY,EAAE;4CAChB,CAAC,CAAC,eAAe,EAAE,CAAC;4CACpB,YAAY,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;4CACpB,mBAAmB,CAAC,EAAE,CAAC,CAAC;yCACzB;oCACH,CAAC,YAED,KAAC,gBAAgB,IAAC,IAAI,EAAC,aAAa,GAAG,GAChC,EACR,YAAY,IACR,EACN,UAAU,IACN,EACP,MAAC,6BAA6B,IAAC,KAAK,EAAE,KAAK,aACxC,OAAO,EACP,OAAO,IAAI,KAAC,QAAQ,IAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAC,QAAQ,GAAG,IAC5B,IAC/B,CACJ,CAAC,CAAC,CAAC,CACF,KAAC,sBAAsB,cAAE,YAAY,GAA0B,CAChE,GACsB,CAC1B,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,qBAAqB,GAAwD,UAAU,CAC3F,CACE,EACE,KAAK,EACL,aAAa,EACb,WAAW,EACX,YAAY,EACZ,KAAK,GAAG,KAAK,EACb,GAAG,SAAS,EACuB,EACrC,GAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,aAAa,EAAE,iBAAiB,CAAC,GAAG,QAAQ,EAAsB,CAAC;IAE1E,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,OAAO,OAAO,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;IACvE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,MAAM,mBAAmB,GAAoD,WAAW,CACtF,CAAC,EAAE,EAAE,IAAI,EAAE,EAAE;QACX,QAAQ,IAAI,EAAE;YACZ,KAAK,IAAI,CAAC,CAAC;gBACT,MAAM,YAAY,GAAG,OAAO,CAAC,eAAe,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;gBACxD,IAAI,YAAY;oBAAE,iBAAiB,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC;gBACrD,MAAM;aACP;YACD,KAAK,MAAM,CAAC,CAAC;gBACX,MAAM,QAAQ,GAAG,OAAO,CAAC,WAAW,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;gBAChD,IAAI,QAAQ;oBAAE,iBAAiB,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;gBAC7C,MAAM;aACP;YACD,KAAK,MAAM,CAAC,CAAC;gBACX,MAAM,UAAU,GAAG,OAAO,CAAC,aAAa,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;gBACpD,IAAI,UAAU;oBAAE,iBAAiB,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;gBACjD,MAAM;aACP;YACD,KAAK,OAAO,CAAC,CAAC;gBACZ,MAAM,SAAS,GAAG,OAAO,CAAC,iBAAiB,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;gBACvD,IAAI,SAAS;oBAAE,iBAAiB,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;gBAC/C,MAAM;aACP;YACD;gBACE,iBAAiB,CAAC,EAAE,CAAC,CAAC;SACzB;IACH,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,OAAO,CACL,KAAC,mBAAmB,CAAC,QAAQ,IAC3B,KAAK,EAAE,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;YACL,aAAa;YACb,aAAa;YACb,UAAU;YACV,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE;YACxB,mBAAmB;YACnB,WAAW;YACX,YAAY;YACZ,KAAK;SACN,CAAC,EACF,CAAC,aAAa,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,CAAC,CAC7E,YAGD,KAAC,kBAAkB,OAAK,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,YAAY,GAAI,GAC5D,CAChC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,YAAY,GAAwD,UAAU,CAClF,CAAC,KAAyC,EAAE,GAA6B,EAAE,EAAE;IAC3E,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,KAAC,qBAAqB,OAAK,KAAK,EAAE,GAAG,EAAE,GAAG,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC;AACxF,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n forwardRef,\n createContext,\n useMemo,\n useContext,\n useCallback,\n useState,\n KeyboardEvent,\n useEffect,\n useRef\n} from 'react';\nimport type { FunctionComponent, PropsWithoutRef, CSSProperties, MouseEvent } from 'react';\n\nimport Progress from '../Progress';\nimport { useDirection } from '../../hooks';\nimport Flex from '../Flex';\nimport Button from '../Button';\nimport Actions from '../Actions';\nimport type { Action, ForwardProps } from '../../types';\nimport { cap } from '../../utils';\n\nimport {\n StyledStandardTreeParent,\n StyledToggleIcon,\n StyledStandardTreeItemSubTree,\n StyledStandardTreeLeaf,\n StyledStandardTree,\n StyledNodeInteraction,\n StyledStandardTreeNode,\n StyledNodeActions,\n StyledLabelContent,\n StyledNodeIcon,\n StyledNodeText\n} from './StandardTree.styles';\nimport type { TreeProps } from './Tree';\nimport type {\n StandardTreeContextProps,\n StandardTreeNode,\n StandardTreeProps,\n StandardTreePropsWithDefaults\n} from './StandardTree.types';\nimport helpers from './helpers';\n\nconst StandardTreeContext = createContext<\n Pick<\n StandardTreePropsWithDefaults,\n \| 'currentNodeId'\n \| 'lined'\n \| 'onNodeClick'\n \| 'onNodeToggle'\n \| 'firstNodeId'\n \| 'lastNodeId'\n \| 'focusedNodeId'\n \| 'changeFocusedNodeId'\n >\n>({\n currentNodeId: undefined,\n lined: false,\n onNodeClick: () => {},\n onNodeToggle: () => {},\n firstNodeId: undefined,\n lastNodeId: undefined,\n focusedNodeId: undefined,\n changeFocusedNodeId: () => {}\n});\n\nconst NodeRenderer: TreeProps<StandardTreeNode>['nodeRenderer'] = ({\n id,\n label,\n icon,\n depth,\n hasParentSibling,\n nodes,\n expanded = false,\n loading = false,\n subTree,\n actions,\n onClick\n}) => {\n const {\n currentNodeId,\n onNodeClick,\n onNodeToggle,\n lined,\n focusedNodeId,\n changeFocusedNodeId,\n firstNodeId,\n lastNodeId\n } = useContext(StandardTreeContext);\n const current = currentNodeId === id;\n const focusedEl = focusedNodeId === id;\n const firstNode = firstNodeId === id;\n const { start, end } = useDirection();\n\n const tabIndex = useMemo(() => {\n let index = -1;\n if (focusedNodeId) {\n index = focusedEl ? 0 : -1;\n } else if (currentNodeId) {\n index = current ? 0 : -1;\n } else {\n index = firstNode ? 0 : -1;\n }\n return index;\n }, [focusedNodeId, currentNodeId, current, focusedEl]);\n\n const handleToggleClick = useCallback(\n (e: MouseEvent<HTMLElement> \| KeyboardEvent<HTMLElement>) => {\n onNodeClick?.(id, e);\n changeFocusedNodeId(id);\n },\n [id, onNodeClick, changeFocusedNodeId]\n );\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent<HTMLElement>) => {\n if (['ArrowUp', 'ArrowDown', 'Enter', 'Home', 'End'].includes(e.key)) e.preventDefault();\n switch (e.key) {\n case 'ArrowUp':\n changeFocusedNodeId(id, 'up');\n break;\n case 'ArrowDown':\n changeFocusedNodeId(id, 'down');\n break;\n case `Arrow${cap(end)}`:\n if (nodes) {\n if (expanded) {\n changeFocusedNodeId(id, 'right');\n } else {\n onNodeToggle?.(id);\n }\n }\n break;\n case `Arrow${cap(start)}`:\n if (expanded) {\n onNodeToggle?.(id);\n } else {\n changeFocusedNodeId(id, 'left');\n }\n break;\n case 'Enter':\n if (onClick) {\n onClick(id, e);\n } else {\n handleToggleClick(e);\n }\n break;\n case 'Home':\n if (firstNodeId) changeFocusedNodeId(firstNodeId);\n break;\n case 'End':\n if (lastNodeId) changeFocusedNodeId(lastNodeId);\n break;\n default:\n }\n },\n [id, end, nodes, expanded, actions, firstNodeId, lastNodeId, changeFocusedNodeId]\n );\n\n const actionsJSX = useMemo(() => {\n // since Actions may render a frag of buttons and we need a wrapper for flex space-between.\n return actions ? (\n <StyledNodeActions>\n <Actions\n items={actions.map(action => {\n return {\n ...action,\n onClick: (\n actionId: Action['id'],\n e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement \| HTMLInputElement>\n ) => {\n e.stopPropagation();\n action?.onClick?.(actionId, e);\n }\n };\n })}\n menuAt={3}\n menuButtonProps={{\n onClick: (e: MouseEvent) => e.stopPropagation(),\n onKeyDown: (e: KeyboardEvent) => {\n e.stopPropagation();\n if (['ArrowUp', 'ArrowDown'].includes(e.key)) {\n e.preventDefault();\n }\n }\n }}\n />\n </StyledNodeActions>\n ) : null;\n }, [actions]);\n\n const elRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (focusedEl) {\n elRef?.current?.focus();\n }\n }, [focusedEl]);\n\n const labelContent = useMemo(() => {\n const internal = (\n // Wrapping in a div for handling of flex space-between when there are node actions.\n <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledLabelContent}>\n {icon && <StyledNodeIcon name={icon} />}\n <StyledNodeText>{label}</StyledNodeText>\n </Flex>\n );\n\n return !nodes && (onClick ?? onNodeClick) ? (\n <Flex\n container={{ alignItems: 'center', justify: 'between', gap: 2 }}\n as={StyledNodeInteraction}\n role='treeitem'\n aria-current={current ? 'true' : undefined}\n tabIndex={tabIndex}\n onClick={(e: MouseEvent<HTMLElement>) => {\n onClick?.(id, e);\n onNodeClick?.(id, e);\n changeFocusedNodeId(id);\n }}\n onKeyDown={onKeyDown}\n ref={elRef}\n >\n {internal}\n {actionsJSX}\n </Flex>\n ) : (\n internal\n );\n }, [\n id,\n label,\n icon,\n nodes,\n actions,\n onClick,\n onNodeClick,\n current,\n focusedEl,\n tabIndex,\n changeFocusedNodeId,\n onKeyDown\n ]);\n\n return (\n <StyledStandardTreeNode\n id={id}\n style={\n { '--depth': depth, '--has-parent-sibling': Number(hasParentSibling) } as CSSProperties\n }\n aria-busy={loading}\n >\n {nodes ? (\n <>\n <Flex\n container={{ alignItems: 'center', justify: 'between', gap: 2 }}\n as={StyledStandardTreeParent}\n role='treeitem'\n aria-current={current ? 'true' : undefined}\n tabIndex={tabIndex}\n variant='text'\n onClick={handleToggleClick}\n aria-expanded={expanded ? 'true' : 'false'}\n aria-label={label}\n onKeyDown={onKeyDown}\n ref={elRef}\n >\n <Flex container={{ alignItems: 'center', gap: 0.5 }} as='span'>\n <Button\n variant='simple'\n icon\n compact\n onClick={(e: MouseEvent<HTMLElement>) => {\n if (onNodeToggle) {\n e.stopPropagation();\n onNodeToggle(id, e);\n changeFocusedNodeId(id);\n }\n }}\n >\n <StyledToggleIcon name='caret-right' />\n </Button>\n {labelContent}\n </Flex>\n {actionsJSX}\n </Flex>\n <StyledStandardTreeItemSubTree lined={lined}>\n {subTree}\n {loading && <Progress variant='ring' placement='inline' />}\n </StyledStandardTreeItemSubTree>\n </>\n ) : (\n <StyledStandardTreeLeaf>{labelContent}</StyledStandardTreeLeaf>\n )}\n </StyledStandardTreeNode>\n );\n};\n\nconst StandardTreeWithNodes: FunctionComponent<StandardTreeProps & ForwardProps> = forwardRef(\n (\n {\n nodes,\n currentNodeId,\n onNodeClick,\n onNodeToggle,\n lined = false,\n ...restProps\n }: PropsWithoutRef<StandardTreeProps>,\n ref: StandardTreeProps['ref']\n ) => {\n const [focusedNodeId, setFocusedNodedId] = useState<string \| undefined>();\n\n const lastNodeId = useMemo(() => {\n return helpers.getDeepestNode(nodes, nodes[nodes.length - 1].id)?.id;\n }, [nodes]);\n\n const changeFocusedNodeId: StandardTreeContextProps['changeFocusedNodeId'] = useCallback(\n (id, type) => {\n switch (type) {\n case 'up': {\n const previousNode = helpers.getPreviousNode(nodes, id);\n if (previousNode) setFocusedNodedId(previousNode.id);\n break;\n }\n case 'down': {\n const nextNode = helpers.getNextNode(nodes, id);\n if (nextNode) setFocusedNodedId(nextNode.id);\n break;\n }\n case 'left': {\n const parentNode = helpers.getParentNode(nodes, id);\n if (parentNode) setFocusedNodedId(parentNode.id);\n break;\n }\n case 'right': {\n const childNode = helpers.getFirstChildNode(nodes, id);\n if (childNode) setFocusedNodedId(childNode.id);\n break;\n }\n default:\n setFocusedNodedId(id);\n }\n },\n [nodes]\n );\n\n return (\n <StandardTreeContext.Provider\n value={useMemo(\n () => ({\n currentNodeId,\n focusedNodeId,\n lastNodeId,\n firstNodeId: nodes[0].id,\n changeFocusedNodeId,\n onNodeClick,\n onNodeToggle,\n lined\n }),\n [currentNodeId, onNodeClick, lined, focusedNodeId, lastNodeId, onNodeToggle]\n )}\n >\n {/* FIXME: Types are having issues when styled(Tree) is typeof Tree. */}\n <StyledStandardTree {...restProps} ref={ref} nodes={nodes} nodeRenderer={NodeRenderer} />\n </StandardTreeContext.Provider>\n );\n }\n);\n\nconst StandardTree: FunctionComponent<StandardTreeProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<StandardTreeProps>, ref: StandardTreeProps['ref']) => {\n return props.nodes.length > 0 ? <StandardTreeWithNodes {...props} ref={ref} /> : null;\n }\n);\n\nexport default StandardTree;\n"]}
1	+ {"version":3,"file":"StandardTree.js","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n createContext,\n useMemo,\n useContext,\n useCallback,\n useState,\n KeyboardEvent,\n useEffect,\n useRef\n} from 'react';\nimport type { FunctionComponent, PropsWithoutRef, CSSProperties, MouseEvent } from 'react';\n\nimport Progress from '../Progress';\nimport { useConsolidatedRef, useDirection, useFocusWithin } from '../../hooks';\nimport Flex from '../Flex';\nimport Actions from '../Actions';\nimport type { Action, ForwardProps } from '../../types';\nimport { cap } from '../../utils';\nimport Button from '../Button';\n\nimport {\n StyledStandardTreeParent,\n StyledToggleIcon,\n StyledToggleIconWrapper,\n StyledStandardTreeItemSubTree,\n StyledStandardTreeLeaf,\n StyledStandardTree,\n StyledNodeInteraction,\n StyledStandardTreeNode,\n StyledNodeActions,\n StyledLabelContent,\n StyledNodeIcon,\n StyledNodeText\n} from './StandardTree.styles';\nimport type { TreeProps } from './Tree';\nimport type {\n StandardTreeContextProps,\n StandardTreeNode,\n StandardTreeProps,\n StandardTreePropsWithDefaults\n} from './StandardTree.types';\nimport helpers from './helpers';\n\nconst StandardTreeContext = createContext<\n Pick<\n StandardTreePropsWithDefaults,\n \| 'currentNodeId'\n \| 'lined'\n \| 'onNodeClick'\n \| 'onNodeToggle'\n \| 'firstNodeId'\n \| 'lastNodeId'\n \| 'focusedNodeId'\n \| 'changeFocusedNodeId'\n \| 'selectableParents'\n >\n>({\n currentNodeId: undefined,\n lined: false,\n onNodeClick: () => {},\n onNodeToggle: () => {},\n firstNodeId: undefined,\n lastNodeId: undefined,\n focusedNodeId: undefined,\n changeFocusedNodeId: () => {},\n selectableParents: true\n});\n\nconst NodeRenderer: TreeProps<StandardTreeNode>['nodeRenderer'] = ({\n id,\n label,\n icon,\n depth,\n hasParentSibling,\n nodes,\n expanded = false,\n loading = false,\n subTree,\n actions,\n onClick,\n href\n}) => {\n const {\n currentNodeId,\n onNodeClick,\n onNodeToggle,\n lined,\n focusedNodeId,\n changeFocusedNodeId,\n firstNodeId,\n lastNodeId,\n selectableParents\n } = useContext(StandardTreeContext);\n const current = currentNodeId === id;\n const focusedEl = focusedNodeId === id;\n const firstNode = firstNodeId === id;\n const { start, end } = useDirection();\n\n const ariaCurrent = useMemo(() => {\n return href ? 'page' : 'true';\n }, [href]);\n\n const tabIndex = useMemo(() => {\n let index = -1;\n if (focusedNodeId) {\n index = focusedEl ? 0 : -1;\n } else if (currentNodeId && nodes && helpers.getNode(nodes, currentNodeId)) {\n index = current ? 0 : -1;\n } else {\n index = firstNode ? 0 : -1;\n }\n return index;\n }, [focusedNodeId, currentNodeId, current, focusedEl]);\n\n const handleParentClick = useCallback(\n (e: MouseEvent<HTMLElement> \| KeyboardEvent<HTMLElement>) => {\n onNodeClick?.(id, e);\n changeFocusedNodeId(id);\n },\n [id, onNodeClick, changeFocusedNodeId]\n );\n\n const handleParentToggle = useCallback(\n (e: MouseEvent<HTMLElement> \| KeyboardEvent<HTMLElement>) => {\n e.preventDefault();\n e.stopPropagation();\n onNodeToggle?.(id, e);\n changeFocusedNodeId(id);\n },\n [id, onNodeToggle, changeFocusedNodeId]\n );\n\n const onKeyDown = useCallback(\n (e: KeyboardEvent<HTMLElement>) => {\n if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.key)) e.preventDefault();\n if (e.key === 'Enter' && !href) e.preventDefault();\n switch (e.key) {\n case 'ArrowUp':\n changeFocusedNodeId(id, 'up');\n break;\n case 'ArrowDown':\n changeFocusedNodeId(id, 'down');\n break;\n case `Arrow${cap(end)}`:\n if (nodes) {\n if (expanded) {\n changeFocusedNodeId(id, 'right');\n } else {\n onNodeToggle?.(id);\n }\n }\n break;\n case `Arrow${cap(start)}`:\n if (expanded) {\n onNodeToggle?.(id);\n } else {\n changeFocusedNodeId(id, 'left');\n }\n break;\n case 'Enter':\n onClick?.(id, e);\n if (nodes) {\n if (selectableParents) {\n handleParentClick(e);\n } else {\n handleParentToggle(e);\n }\n } else {\n onNodeClick?.(id, e);\n changeFocusedNodeId(id);\n }\n break;\n case 'Home':\n if (firstNodeId) changeFocusedNodeId(firstNodeId);\n break;\n case 'End':\n if (lastNodeId) changeFocusedNodeId(lastNodeId);\n break;\n default:\n }\n },\n [id, end, nodes, expanded, actions, firstNodeId, lastNodeId, changeFocusedNodeId]\n );\n\n const actionsJSX = useMemo(() => {\n // since Actions may render a frag of buttons and we need a wrapper for flex space-between.\n return actions ? (\n <StyledNodeActions>\n <Actions\n items={actions.map(action => {\n return {\n ...action,\n onClick: (\n actionId: Action['id'],\n e: MouseEvent<HTMLButtonElement \| HTMLAnchorElement \| HTMLInputElement>\n ) => {\n e.stopPropagation();\n e.preventDefault();\n action?.onClick?.(actionId, e);\n },\n onKeyDown: (e: KeyboardEvent) => {\n if (e.key === 'Enter') e.stopPropagation();\n }\n };\n })}\n menuAt={3}\n menuButtonProps={{\n onClick: (e: MouseEvent) => {\n e.stopPropagation();\n e.preventDefault();\n },\n onKeyDown: (e: KeyboardEvent) => {\n e.stopPropagation();\n if (['ArrowUp', 'ArrowDown'].includes(e.key)) {\n e.preventDefault();\n }\n }\n }}\n />\n </StyledNodeActions>\n ) : null;\n }, [actions]);\n\n const elRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (focusedEl) {\n elRef?.current?.focus();\n }\n }, [focusedEl]);\n\n const labelContent = useMemo(() => {\n const internal = (\n // Wrapping in a div for handling of flex space-between when there are node actions.\n <Flex container={{ alignItems: 'center', gap: 0.5 }} as={StyledLabelContent}>\n {icon && <StyledNodeIcon name={icon} />}\n <StyledNodeText>{label}</StyledNodeText>\n </Flex>\n );\n\n return !nodes && (onClick ?? onNodeClick) ? (\n <Flex\n container={{ alignItems: 'center', justify: 'between', gap: 2 }}\n as={StyledNodeInteraction}\n forwardedAs={href ? 'a' : 'div'}\n role='treeitem'\n aria-current={current ? ariaCurrent : undefined}\n tabIndex={tabIndex}\n onClick={(e: MouseEvent<HTMLElement>) => {\n onClick?.(id, e);\n onNodeClick?.(id, e);\n changeFocusedNodeId(id);\n }}\n href={href}\n onKeyDown={onKeyDown}\n ref={elRef}\n >\n {internal}\n {actionsJSX}\n </Flex>\n ) : (\n internal\n );\n }, [\n id,\n label,\n icon,\n nodes,\n actions,\n onClick,\n onNodeClick,\n current,\n focusedEl,\n tabIndex,\n changeFocusedNodeId,\n onKeyDown\n ]);\n\n return (\n <StyledStandardTreeNode\n id={id}\n style={\n {\n '--depth': depth,\n '--has-parent': depth ? 1 : 0,\n '--has-parent-sibling': hasParentSibling ? 1 : 0\n } as CSSProperties\n }\n aria-busy={loading}\n >\n {nodes ? (\n <>\n <Flex\n container={{ alignItems: 'center', justify: 'between', gap: 2 }}\n as={StyledStandardTreeParent}\n forwardedAs={href ? 'a' : 'div'}\n role='treeitem'\n aria-current={current ? ariaCurrent : undefined}\n tabIndex={tabIndex}\n variant='text'\n onClick={selectableParents ? handleParentClick : handleParentToggle}\n href={selectableParents ? href : undefined}\n aria-expanded={expanded ? 'true' : 'false'}\n aria-owns={`${id}-subtree`}\n aria-label={label}\n onKeyDown={onKeyDown}\n ref={elRef}\n >\n <Flex container={{ alignItems: 'center' }} as='span'>\n {selectableParents ? (\n <Button variant='simple' tabIndex={-1} icon compact onClick={handleParentToggle}>\n <StyledToggleIcon name='caret-right' />\n </Button>\n ) : (\n <Flex\n as={StyledToggleIconWrapper}\n container={{ justify: 'center', alignItems: 'center' }}\n >\n <StyledToggleIcon name='caret-right' />\n </Flex>\n )}\n {labelContent}\n </Flex>\n {actionsJSX}\n </Flex>\n <StyledStandardTreeItemSubTree lined={lined} id={`${id}-subtree`}>\n {subTree}\n {loading && <Progress variant='ring' placement='inline' />}\n </StyledStandardTreeItemSubTree>\n </>\n ) : (\n <StyledStandardTreeLeaf>{labelContent}</StyledStandardTreeLeaf>\n )}\n </StyledStandardTreeNode>\n );\n};\n\nconst StandardTreeWithNodes: FunctionComponent<StandardTreeProps & ForwardProps> = forwardRef(\n (\n {\n nodes,\n currentNodeId,\n onNodeClick,\n onNodeToggle,\n lined = false,\n selectableParents = true,\n ...restProps\n }: PropsWithoutRef<StandardTreeProps>,\n ref: StandardTreeProps['ref']\n ) => {\n const [focusedNodeId, setFocusedNodedId] = useState<string \| undefined>();\n const treeRef = useConsolidatedRef(ref);\n\n const lastNodeId = useMemo(() => {\n return helpers.getDeepestNode(nodes, nodes[nodes.length - 1].id)?.id;\n }, [nodes]);\n\n const changeFocusedNodeId: StandardTreeContextProps['changeFocusedNodeId'] = useCallback(\n (id, type) => {\n switch (type) {\n case 'up': {\n const previousNode = helpers.getPreviousNode(nodes, id);\n if (previousNode) setFocusedNodedId(previousNode.id);\n break;\n }\n case 'down': {\n const nextNode = helpers.getNextNode(nodes, id);\n if (nextNode) setFocusedNodedId(nextNode.id);\n break;\n }\n case 'left': {\n const parentNode = helpers.getParentNode(nodes, id);\n if (parentNode) setFocusedNodedId(parentNode.id);\n break;\n }\n case 'right': {\n const childNode = helpers.getFirstChildNode(nodes, id);\n if (childNode) setFocusedNodedId(childNode.id);\n break;\n }\n default: {\n if (id !== focusedNodeId) setFocusedNodedId(id);\n break;\n }\n }\n },\n [nodes]\n );\n\n const onFocusChange = (focused: boolean) => {\n if (!focused) setFocusedNodedId('');\n };\n\n useFocusWithin([treeRef], onFocusChange);\n\n return (\n <StandardTreeContext.Provider\n value={useMemo(\n () => ({\n currentNodeId,\n focusedNodeId,\n lastNodeId,\n firstNodeId: nodes[0].id,\n changeFocusedNodeId,\n onNodeClick,\n onNodeToggle,\n lined,\n selectableParents\n }),\n [\n currentNodeId,\n onNodeClick,\n lined,\n focusedNodeId,\n lastNodeId,\n onNodeToggle,\n selectableParents\n ]\n )}\n >\n {/* FIXME: Types are having issues when styled(Tree) is typeof Tree. */}\n <StyledStandardTree\n {...restProps}\n ref={treeRef}\n nodes={nodes}\n nodeRenderer={NodeRenderer}\n />\n </StandardTreeContext.Provider>\n );\n }\n);\n\nconst StandardTree: FunctionComponent<StandardTreeProps & ForwardProps> = forwardRef(\n (props: PropsWithoutRef<StandardTreeProps>, ref: StandardTreeProps['ref']) => {\n return props.nodes.length > 0 ? <StandardTreeWithNodes {...props} ref={ref} /> : null;\n }\n);\n\nexport default StandardTree;\n"]}

package/lib/components/Tree/StandardTree.styles.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ export declare const StyledNodeActions: import("styled-components").StyledCompon
 export declare const StyledLabelContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledNodeIcon: import("styled-components").StyledComponent<import("react").FunctionComponent<import("../Icon").IconProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledNodeText: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledToggleIconWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledStandardTreeItemSubTree: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<StandardTreePropsWithDefaults, "lined">, never>;
 export declare const StyledNodeInteraction: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledStandardTreeLeaf: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/lib/components/Tree/StandardTree.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StandardTree.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.styles.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,6BAA6B,EAAE,MAAM,sBAAsB,CAAC;AAErE,eAAO,MAAM,gBAAgB,iMAAiB,CAAC;AAE/C,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAE9C,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAE/C,eAAO,MAAM,cAAc,iMAAiB,CAAC;AAE7C,eAAO,MAAM,cAAc,0GAAgB,CAAC;AAE5C,eAAO,MAAM,6BAA6B,mJAgCxC,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGA8ChC,CAAC;AAIH,eAAO,MAAM,sBAAsB,~~yGAYjC~~,CAAC;AAKH,eAAO,MAAM,wBAAwB,EAAE,GA2BrC,CAAC;AAIH,eAAO,MAAM,sBAAsB,~~yGAWlC~~,CAAC;AAIF,eAAO,MAAM,kBAAkB,~~kQAI9B~~,CAAC"}
1	+ {"version":3,"file":"StandardTree.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.styles.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,6BAA6B,EAAE,MAAM,sBAAsB,CAAC;AAErE,eAAO,MAAM,gBAAgB,iMAAiB,CAAC;AAE/C,eAAO,MAAM,iBAAiB,yGAAe,CAAC;AAE9C,eAAO,MAAM,kBAAkB,yGAAe,CAAC;AAE/C,eAAO,MAAM,cAAc,iMAAiB,CAAC;AAE7C,eAAO,MAAM,cAAc,0GAAgB,CAAC;AAE5C,eAAO,MAAM,uBAAuB,yGAKlC,CAAC;AAIH,eAAO,MAAM,6BAA6B,mJAgCxC,CAAC;AAIH,eAAO,MAAM,qBAAqB,yGA8ChC,CAAC;AAIH,eAAO,MAAM,sBAAsB,yGASjC,CAAC;AAKH,eAAO,MAAM,wBAAwB,EAAE,GA2BrC,CAAC;AAIH,eAAO,MAAM,sBAAsB,yGAclC,CAAC;AAIF,eAAO,MAAM,kBAAkB,kQAU7B,CAAC"}

package/lib/components/Tree/StandardTree.styles.js CHANGED Viewed

@@ -11,6 +11,13 @@ export const StyledNodeActions = styled.div ``;
 export const StyledLabelContent = styled.div ``;
 export const StyledNodeIcon = styled(Icon) ``;
 export const StyledNodeText = styled.span ``;
+export const StyledToggleIconWrapper = styled.div(({ theme }) => {
+    return css `
+    min-height: ${theme.base['hit-area'].compact};
+    min-width: ${theme.base['hit-area'].compact};
+  `;
+});
+StyledToggleIconWrapper.defaultProps = defaultThemeProp;
 export const StyledStandardTreeItemSubTree = styled.div(({ theme, lined }) => {
     return css `
     position: relative;
@@ -45,9 +52,8 @@ export const StyledStandardTreeItemSubTree = styled.div(({ theme, lined }) => {
 StyledStandardTreeItemSubTree.defaultProps = defaultThemeProp;
 export const StyledNodeInteraction = styled.div(({ theme }) => {
     return css `
-    /* Could put on Flex pad prop but, needing logical prop below, maybe makes sense to keep here.
-     * We should fix Flex/Grid pad arrays to map to logical props...
-     */
+    color: ${theme.base.palette['foreground-color']};
+    text-decoration: none;
     min-height: 2.25rem;
     padding-inline-start: calc(var(--parent-caret-width) * var(--depth) + var(--initial-padding));
     padding-inline-end: calc(var(--initial-padding) + ${theme.base.spacing});
@@ -81,6 +87,7 @@ export const StyledNodeInteraction = styled.div(({ theme }) => {
       }
     }
+    &[aria-current='page'],
     &[aria-current='true'] {
       background-color: ${transparentize(0.95, theme.base.palette['foreground-color'])};
@@ -94,12 +101,9 @@ StyledNodeInteraction.defaultProps = defaultThemeProp;
 export const StyledStandardTreeLeaf = styled.div(() => {
     return css `
     ${StyledNodeInteraction} {
-      /* 1 when not at root and no parent sibling, 0 otherwise. */
-      --include-parent-icon-width: min((1.5 - var(--has-parent-sibling)), (var(--depth) + 0.5));
       padding-inline-start: calc(
-        var(--initial-padding) +
-          (var(--parent-caret-width) * (var(--depth) + var(--has-parent-sibling))) +
-          (var(--parent-icon-width) * var(--include-parent-icon-width))
+        var(--initial-padding) + (var(--parent-caret-width) * var(--depth)) +
+          (var(--parent-caret-spacing-width) * (max(var(--has-parent-sibling), var(--has-parent))))
       );
     }
   `;
@@ -135,21 +139,31 @@ export const StyledStandardTreeParent = styled(StyledNodeInteraction)(({ theme }
 });
 StyledStandardTreeParent.defaultProps = defaultThemeProp;
 export const StyledStandardTreeNode = styled.div(({ theme }) => css `
-    --initial-padding: calc(${theme.base.spacing} * 1);
-    --parent-caret-width: calc(1em + ${theme.base.spacing});
-    --parent-icon-width: calc(1em + ${theme.base.spacing} / 2);
+    --initial-padding: calc(${theme.base.spacing} * 0.5);
+    --parent-caret-width: 1em;
+    --parent-caret-spacing-width: max(
+      (var(--parent-caret-width) + (2 * ${theme.components.button['border-width']})),
+      ${theme.base['hit-area'].compact}
+    );
     ${StyledIcon} {
-      width: 1em;
-      height: 1em;
+      width: var(--parent-caret-width);
+      height: var(--parent-caret-width);
     }
   `);
 StyledStandardTreeNode.defaultProps = defaultThemeProp;
-export const StyledStandardTree = styled(Tree) `
-  ${StyledTreeListItem} {
-    display: block;
-  }
-`;
+export const StyledStandardTree = styled(Tree)(({ theme }) => {
+    return css `
+    ${StyledTreeListItem} {
+      display: block;
+    }
+    &:has(:focus-visible) {
+      box-shadow: ${theme.base.shadow['focus-group']};
+    }
+  `;
+});
+StyledStandardTree.defaultProps = defaultThemeProp;
 // FIXME: We need to determine why styled-component types are "eating" our types.
 StyledStandardTree.defaultProps = defaultThemeProp;
 //# sourceMappingURL=StandardTree.styles.js.map

package/lib/components/Tree/StandardTree.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StandardTree.styles.js","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,IAAI,EAAE,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE3C,OAAO,IAAI,EAAE,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAC;AAGlD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AAE/C,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE9C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAC;AAE/C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA,EAAE,CAAC;AAE7C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAA,EAAE,CAAC;AAE5C,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,CAErD,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IACrB,OAAO,GAAG,CAAA;;;MAGN,KAAK;QACP,GAAG,CAAA;;;;;;8BAMuB,KAAK,CAAC,IAAI,CAAC,OAAO;;;0CAGN,KAAK,CAAC,IAAI,CAAC,OAAO;cAC9C,KAAK,CAAC,IAAI,CAAC,OAAO;;;;8BAIF,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;KAEvF;;MAEC,kBAAkB;qBACH,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;GAKpC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,6BAA6B,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE9D,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA~~;;;;;;wDAM4C~~,KAAK,CAAC,IAAI,CAAC,OAAO;;;UAGhE,iBAAiB;;QAEnB,YAAY;oCACgB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;oBAMlC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;YAE/B,iBAAiB;;;;;;;;;;0BAUH,cAAc,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;;YAEzE,iBAAiB~~;;;;;;0BAMH~~,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;;YAE1E,kBAAkB,wBAAwB,kBAAkB;iBACvD,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW;;;GAG5C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IACpD,OAAO,GAAG,CAAA;MACN,qBAAqB~~;;;;;;;;;GASxB~~,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,4EAA4E;AAC5E,MAAM,CAAC,MAAM,wBAAwB,GAAQ,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvF,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,GAAG,CAAA;8BACkB,gBAAgB;;;;;QAKtC,gBAAgB;4BACI,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK;;;UAGnC,6BAA6B;;;;;gBAKvB,6BAA6B;;;;MAIvC,gBAAgB;mCACa,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK;UACnD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;GAEvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,wBAAwB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEzD,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAC9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;8BACU,KAAK,CAAC,IAAI,CAAC,OAAO~~;uCACT~~,KAAK,CAAC,~~IAAI~~,CAAC,~~OAAO~~;~~sCACnB~~,KAAK,CAAC,IAAI,CAAC,OAAO~~;;MAElD~~,UAAU;;;;GAIb,CACF,CAAC;AAEF,sBAAsB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEvD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;~~IAC1C~~,kBAAkB~~;;;CAGrB~~,CAAC;~~AACF~~,iFAAiF;AAChF,kBAA6D,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { StyledButton } from '../Button';\nimport Icon, { StyledIcon } from '../Icon';\nimport { StyledProgressRing } from '../Progress';\nimport { defaultThemeProp } from '../../theme';\nimport { useDirection } from '../../hooks';\n\nimport Tree, { StyledTreeListItem } from './Tree';\nimport { StandardTreePropsWithDefaults } from './StandardTree.types';\n\nexport const StyledToggleIcon = styled(Icon)``;\n\nexport const StyledNodeActions = styled.div``;\n\nexport const StyledLabelContent = styled.div``;\n\nexport const StyledNodeIcon = styled(Icon)``;\n\nexport const StyledNodeText = styled.span``;\n\nexport const StyledStandardTreeItemSubTree = styled.div<\n Pick<StandardTreePropsWithDefaults, 'lined'>\n>(({ theme, lined }) => {\n return css`\n position: relative;\n\n ${lined &&\n css`\n ::before {\n content: '';\n display: block;\n position: absolute;\n background-color: currentColor;\n inset-block-start: -${theme.base.spacing};\n inset-block-end: 0;\n inset-inline-start: calc(\n 0.5em * (var(--depth) + 1) + (${theme.base.spacing} * var(--depth) + 0.5em * var(--depth)) +\n ${theme.base.spacing} * 1.5\n );\n width: 0.0625rem;\n opacity: 0.2;\n transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n }\n `}\n\n ${StyledProgressRing} {\n margin: calc(${theme.base.spacing} * 1.25) 0;\n margin-inline-start: calc(\n var(--parent-caret-width) * (var(--depth) + 1) + var(--initial-padding)\n );\n }\n `;\n});\n\nStyledStandardTreeItemSubTree.defaultProps = defaultThemeProp;\n\nexport const StyledNodeInteraction = styled.div(({ theme }) => {\n return css`\n /* ~~Could put on Flex pad prop but, needing logical prop below, maybe makes sense to keep here.\~~n * ~~We should fix Flex/Grid pad arrays to map to logical props...\~~n /\n min-height: 2.25rem;\n padding-inline-start: calc(var(--parent-caret-width) var(--depth) + var(--initial-padding));\n padding-inline-end: calc(var(--initial-padding) + ${theme.base.spacing});\n cursor: pointer;\n\n & > ${StyledNodeActions} {\n display: none;\n ${StyledButton} {\n margin-inline-start: calc(${theme.base.spacing} / 2);\n }\n }\n\n &:focus,\n &:focus-within {\n box-shadow: ${theme.base.shadow.focus};\n\n & > ${StyledNodeActions} {\n display: block;\n }\n }\n\n &:focus-visible {\n outline: none;\n }\n\n &:hover {\n background-color: ${transparentize(0.9, theme.base.palette['foreground-color'])};\n\n & > ${StyledNodeActions} {\n display: block;\n }\n }\n\n &[aria-current='true'] {\n background-color: ${transparentize(0.95, theme.base.palette['foreground-color'])};\n\n & > ${StyledLabelContent}, & > :first-child > ${StyledLabelContent} {\n color: ${theme.base.palette.interactive};\n }\n }\n `;\n});\n\nStyledNodeInteraction.defaultProps = defaultThemeProp;\n\nexport const StyledStandardTreeLeaf = styled.div(() => {\n return css`\n ${StyledNodeInteraction} {\n ~~/* 1 when not at root and no parent sibling, 0 otherwise. /\n --include-parent-icon-width: min((1.5 - var(--has-parent-sibling)), (var(--depth) + 0.5));\n~~ padding-inline-start: calc(\n var(--initial-padding) ~~+\n~~ (var(--parent-caret-width) (var(--depth) ~~+ var(--has-parent-sibling~~))) +\n (var(--parent-~~icon~~-width) * var(--~~include~~-parent-~~icon~~-~~width~~))\n );\n }\n `;\n});\n\nStyledStandardTreeLeaf.defaultProps = defaultThemeProp;\n\n// FIXME: any is used since typeof StyledNodeInteraction not playing nicely.\nexport const StyledStandardTreeParent: any = styled(StyledNodeInteraction)(({ theme }) => {\n const { ltr } = useDirection();\n\n return css`\n &[aria-expanded='true'] ${StyledToggleIcon} {\n transform: rotate(90deg);\n }\n\n &[aria-expanded='false'] {\n ${StyledToggleIcon} {\n transform: rotate(${ltr ? '0' : '180'}deg);\n }\n\n + ${StyledStandardTreeItemSubTree} {\n display: none;\n }\n }\n\n &:hover + ${StyledStandardTreeItemSubTree}::before {\n opacity: 0.5;\n }\n\n ${StyledToggleIcon} {\n transition: transform calc(${theme.base.animation.speed} / 2)\n ${theme.base.animation.timing.ease};\n }\n `;\n});\n\nStyledStandardTreeParent.defaultProps = defaultThemeProp;\n\nexport const StyledStandardTreeNode = styled.div(\n ({ theme }) => css`\n --initial-padding: calc(${theme.base.spacing} * 1);\n --parent-caret-width: ~~calc(~~1em ~~+ ${theme.base.spacing})~~;\n --parent-~~icon~~-width: ~~calc~~(~~1em~~ + ${theme.base.~~spacing~~} ~~/ 2~~);\n\n ${StyledIcon} {\n width: ~~1em~~;\n height: ~~1em~~;\n }\n `\n);\n\nStyledStandardTreeNode.defaultProps = defaultThemeProp;\n\nexport const StyledStandardTree = styled(Tree)`\n ${StyledTreeListItem} {\n display: block;\n }\n`;\n// FIXME: We need to determine why styled-component types are \"eating\" our types.\n(StyledStandardTree as typeof Tree & { defaultProps: object }).defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"StandardTree.styles.js","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { transparentize } from 'polished';\n\nimport { StyledButton } from '../Button';\nimport Icon, { StyledIcon } from '../Icon';\nimport { StyledProgressRing } from '../Progress';\nimport { defaultThemeProp } from '../../theme';\nimport { useDirection } from '../../hooks';\n\nimport Tree, { StyledTreeListItem } from './Tree';\nimport { StandardTreePropsWithDefaults } from './StandardTree.types';\n\nexport const StyledToggleIcon = styled(Icon)``;\n\nexport const StyledNodeActions = styled.div``;\n\nexport const StyledLabelContent = styled.div``;\n\nexport const StyledNodeIcon = styled(Icon)``;\n\nexport const StyledNodeText = styled.span``;\n\nexport const StyledToggleIconWrapper = styled.div(({ theme }) => {\n return css`\n min-height: ${theme.base['hit-area'].compact};\n min-width: ${theme.base['hit-area'].compact};\n `;\n});\n\nStyledToggleIconWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledStandardTreeItemSubTree = styled.div<\n Pick<StandardTreePropsWithDefaults, 'lined'>\n>(({ theme, lined }) => {\n return css`\n position: relative;\n\n ${lined &&\n css`\n ::before {\n content: '';\n display: block;\n position: absolute;\n background-color: currentColor;\n inset-block-start: -${theme.base.spacing};\n inset-block-end: 0;\n inset-inline-start: calc(\n 0.5em * (var(--depth) + 1) + (${theme.base.spacing} * var(--depth) + 0.5em * var(--depth)) +\n ${theme.base.spacing} * 1.5\n );\n width: 0.0625rem;\n opacity: 0.2;\n transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n }\n `}\n\n ${StyledProgressRing} {\n margin: calc(${theme.base.spacing} * 1.25) 0;\n margin-inline-start: calc(\n var(--parent-caret-width) * (var(--depth) + 1) + var(--initial-padding)\n );\n }\n `;\n});\n\nStyledStandardTreeItemSubTree.defaultProps = defaultThemeProp;\n\nexport const StyledNodeInteraction = styled.div(({ theme }) => {\n return css`\n color: ${theme.base.palette['foreground-color']};\n text-decoration: none;\n min-height: 2.25rem;\n padding-inline-start: calc(var(--parent-caret-width) * var(--depth) + var(--initial-padding));\n padding-inline-end: calc(var(--initial-padding) + ${theme.base.spacing});\n cursor: pointer;\n\n & > ${StyledNodeActions} {\n display: none;\n ${StyledButton} {\n margin-inline-start: calc(${theme.base.spacing} / 2);\n }\n }\n\n &:focus,\n &:focus-within {\n box-shadow: ${theme.base.shadow.focus};\n\n & > ${StyledNodeActions} {\n display: block;\n }\n }\n\n &:focus-visible {\n outline: none;\n }\n\n &:hover {\n background-color: ${transparentize(0.9, theme.base.palette['foreground-color'])};\n\n & > ${StyledNodeActions} {\n display: block;\n }\n }\n\n &[aria-current='page'],\n &[aria-current='true'] {\n background-color: ${transparentize(0.95, theme.base.palette['foreground-color'])};\n\n & > ${StyledLabelContent}, & > :first-child > ${StyledLabelContent} {\n color: ${theme.base.palette.interactive};\n }\n }\n `;\n});\n\nStyledNodeInteraction.defaultProps = defaultThemeProp;\n\nexport const StyledStandardTreeLeaf = styled.div(() => {\n return css`\n ${StyledNodeInteraction} {\n padding-inline-start: calc(\n var(--initial-padding) + (var(--parent-caret-width) * var(--depth)) +\n (var(--parent-caret-spacing-width) * (max(var(--has-parent-sibling), var(--has-parent))))\n );\n }\n `;\n});\n\nStyledStandardTreeLeaf.defaultProps = defaultThemeProp;\n\n// FIXME: any is used since typeof StyledNodeInteraction not playing nicely.\nexport const StyledStandardTreeParent: any = styled(StyledNodeInteraction)(({ theme }) => {\n const { ltr } = useDirection();\n\n return css`\n &[aria-expanded='true'] ${StyledToggleIcon} {\n transform: rotate(90deg);\n }\n\n &[aria-expanded='false'] {\n ${StyledToggleIcon} {\n transform: rotate(${ltr ? '0' : '180'}deg);\n }\n\n + ${StyledStandardTreeItemSubTree} {\n display: none;\n }\n }\n\n &:hover + ${StyledStandardTreeItemSubTree}::before {\n opacity: 0.5;\n }\n\n ${StyledToggleIcon} {\n transition: transform calc(${theme.base.animation.speed} / 2)\n ${theme.base.animation.timing.ease};\n }\n `;\n});\n\nStyledStandardTreeParent.defaultProps = defaultThemeProp;\n\nexport const StyledStandardTreeNode = styled.div(\n ({ theme }) => css`\n --initial-padding: calc(${theme.base.spacing} * 0.5);\n --parent-caret-width: 1em;\n --parent-caret-spacing-width: max(\n (var(--parent-caret-width) + (2 * ${theme.components.button['border-width']})),\n ${theme.base['hit-area'].compact}\n );\n\n ${StyledIcon} {\n width: var(--parent-caret-width);\n height: var(--parent-caret-width);\n }\n `\n);\n\nStyledStandardTreeNode.defaultProps = defaultThemeProp;\n\nexport const StyledStandardTree = styled(Tree)(({ theme }) => {\n return css`\n ${StyledTreeListItem} {\n display: block;\n }\n\n &:has(:focus-visible) {\n box-shadow: ${theme.base.shadow['focus-group']};\n }\n `;\n});\n\nStyledStandardTree.defaultProps = defaultThemeProp;\n\n// FIXME: We need to determine why styled-component types are \"eating\" our types.\n(StyledStandardTree as typeof Tree & { defaultProps: object }).defaultProps = defaultThemeProp;\n"]}

package/lib/components/Tree/StandardTree.types.d.ts CHANGED Viewed

@@ -2,19 +2,46 @@ import type { MouseEvent, KeyboardEvent } from 'react';
 import type { Action, PropsWithDefaults } from '../../types';
 import type { TreeProps, TreeNode } from './Tree';
 export interface StandardTreeNode extends TreeNode {
+    /** A set of nested tree nodes. */
     nodes?: StandardTreeNode[];
+    /** The display text of the tree node. */
     label: string;
+    /** The name of the Cosmos Icon to render as a visual, next to the label. */
     icon?: string;
+    /**
+     * If true, the node's children will be displayed.
+     * @default false
+     */
     expanded?: boolean;
+    /**
+     * If true, the node will render a loading indicator in place of any children.
+     * @default false
+     */
     loading?: boolean;
+    /** A set of actions attached to the node. */
     actions?: Action[];
+    /** Click handler for the tree node. */
     onClick?: (id: TreeNode['id'], e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+    /** URL or DOM id to navigate to. This will render the tree node as a link. */
+    href?: string;
 }
 export interface StandardTreeProps extends TreeProps<StandardTreeNode> {
+    /** The id of the currently active tree node. */
     currentNodeId?: TreeNode['id'];
+    /**
+     * If true, a vertical line will render alongside nested nodes.
+     * @default false
+     */
     lined?: boolean;
+    /** Callback function for click events on tree nodes. This will only be called on parent nodes if selectableParents is true. It will always be called on leaf nodes. */
     onNodeClick?: (id: TreeNode['id'], e: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+    /** Callback function for toggling tree nodes between expanded/collapsed states. This is only ever called on parent nodes. */
     onNodeToggle?: (id: TreeNode['id'], e?: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
+    /**
+     * If true, parent tree nodes can be selected independently from being toggled expanded/collapsed.
+     * @default true
+     */
+    selectableParents?: boolean;
 }
 export interface StandardTreeContextProps extends StandardTreeProps {
     firstNodeId?: TreeNode['id'];

package/lib/components/Tree/StandardTree.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StandardTree.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElD,MAAM,WAAW,gBAAiB,SAAQ,QAAQ;IAChD,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;~~CACjG~~;AAED,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACpE,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,CACZ,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,EAClB,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KACpD,IAAI,CAAC;IACV,YAAY,CAAC,EAAE,CACb,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,EAClB,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KACrD,IAAI,CAAC;~~CACX~~;AAED,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;IACjE,WAAW,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,mBAAmB,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;CAC5F;AAED,oBAAY,6BAA6B,GAAG,iBAAiB,CAAC,wBAAwB,EAAE,OAAO,CAAC,CAAC"}
1	+ {"version":3,"file":"StandardTree.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,MAAM,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAElD,MAAM,WAAW,gBAAiB,SAAQ,QAAQ;IAChD,kCAAkC;IAClC,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,4EAA4E;IAC5E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,uCAAuC;IACvC,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAChG,8EAA8E;IAC9E,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACpE,gDAAgD;IAChD,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,uKAAuK;IACvK,WAAW,CAAC,EAAE,CACZ,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,EAClB,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KACpD,IAAI,CAAC;IACV,6HAA6H;IAC7H,YAAY,CAAC,EAAE,CACb,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,EAClB,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,GAAG,aAAa,CAAC,WAAW,CAAC,KACrD,IAAI,CAAC;IACV;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB;IACjE,WAAW,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7B,UAAU,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC5B,aAAa,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC/B,mBAAmB,EAAE,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,IAAI,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;CAC5F;AAED,oBAAY,6BAA6B,GAAG,iBAAiB,CAAC,wBAAwB,EAAE,OAAO,CAAC,CAAC"}

package/lib/components/Tree/StandardTree.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StandardTree.types.js","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MouseEvent, KeyboardEvent } from 'react';\n\nimport type { Action, PropsWithDefaults } from '../../types';\n\nimport type { TreeProps, TreeNode } from './Tree';\n\nexport interface StandardTreeNode extends TreeNode {\n nodes?: StandardTreeNode[];\n label: string;\n icon?: string;\n expanded?: boolean;\n loading?: boolean;\n actions?: Action[];\n onClick?: (id: TreeNode['id'], e: MouseEvent<HTMLElement> \| KeyboardEvent<HTMLElement>) => void;\n}\n\nexport interface StandardTreeProps extends TreeProps<StandardTreeNode> {\n currentNodeId?: TreeNode['id'];\n lined?: boolean;\n onNodeClick?: (\n id: TreeNode['id'],\n e: MouseEvent<HTMLElement> \| KeyboardEvent<HTMLElement>\n ) => void;\n onNodeToggle?: (\n id: TreeNode['id'],\n e?: MouseEvent<HTMLElement> \| KeyboardEvent<HTMLElement>\n ) => void;\n}\n\nexport interface StandardTreeContextProps extends StandardTreeProps {\n firstNodeId?: TreeNode['id'];\n lastNodeId?: TreeNode['id'];\n focusedNodeId?: TreeNode['id'];\n changeFocusedNodeId: (id: TreeNode['id'], type?: 'up' \| 'down' \| 'left' \| 'right') => void;\n}\n\nexport type StandardTreePropsWithDefaults = PropsWithDefaults<StandardTreeContextProps, 'lined'>;\n"]}
1	+ {"version":3,"file":"StandardTree.types.js","sourceRoot":"","sources":["../../../src/components/Tree/StandardTree.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { MouseEvent, KeyboardEvent } from 'react';\n\nimport type { Action, PropsWithDefaults } from '../../types';\n\nimport type { TreeProps, TreeNode } from './Tree';\n\nexport interface StandardTreeNode extends TreeNode {\n /** A set of nested tree nodes. /\n nodes?: StandardTreeNode[];\n /* The display text of the tree node. /\n label: string;\n /* The name of the Cosmos Icon to render as a visual, next to the label. /\n icon?: string;\n /\n If true, the node's children will be displayed.\n * @default false\n /\n expanded?: boolean;\n /\n If true, the node will render a loading indicator in place of any children.\n * @default false\n /\n loading?: boolean;\n /* A set of actions attached to the node. /\n actions?: Action[];\n /* Click handler for the tree node. /\n onClick?: (id: TreeNode['id'], e: MouseEvent<HTMLElement> \| KeyboardEvent<HTMLElement>) => void;\n /* URL or DOM id to navigate to. This will render the tree node as a link. /\n href?: string;\n}\n\nexport interface StandardTreeProps extends TreeProps<StandardTreeNode> {\n /* The id of the currently active tree node. /\n currentNodeId?: TreeNode['id'];\n /\n If true, a vertical line will render alongside nested nodes.\n * @default false\n /\n lined?: boolean;\n /* Callback function for click events on tree nodes. This will only be called on parent nodes if selectableParents is true. It will always be called on leaf nodes. /\n onNodeClick?: (\n id: TreeNode['id'],\n e: MouseEvent<HTMLElement> \| KeyboardEvent<HTMLElement>\n ) => void;\n /* Callback function for toggling tree nodes between expanded/collapsed states. This is only ever called on parent nodes. /\n onNodeToggle?: (\n id: TreeNode['id'],\n e?: MouseEvent<HTMLElement> \| KeyboardEvent<HTMLElement>\n ) => void;\n /\n If true, parent tree nodes can be selected independently from being toggled expanded/collapsed.\n * @default true\n */\n selectableParents?: boolean;\n}\n\nexport interface StandardTreeContextProps extends StandardTreeProps {\n firstNodeId?: TreeNode['id'];\n lastNodeId?: TreeNode['id'];\n focusedNodeId?: TreeNode['id'];\n changeFocusedNodeId: (id: TreeNode['id'], type?: 'up' \| 'down' \| 'left' \| 'right') => void;\n}\n\nexport type StandardTreePropsWithDefaults = PropsWithDefaults<StandardTreeContextProps, 'lined'>;\n"]}

package/lib/components/Tree/helpers.d.ts CHANGED Viewed

@@ -3,17 +3,19 @@ declare const helpers: {
     getNode<T extends TreeNode = TreeNode>(nodes: T[], id: T["id"]): T | undefined;
     getParentNode<T_1 extends TreeNode = TreeNode>(nodes: T_1[], id: T_1["id"]): T_1 | undefined;
     mapTree<T1 extends TreeNode = TreeNode, T2 extends TreeNode = T1>(nodes: T1[], fn: (node: T1, index: number, nodes: T1[]) => T2): T2[];
+    forEachNode<T_2 extends TreeNode = TreeNode>(nodes: T_2[], fn: (node: T_2, index: number, nodes: T_2[]) => void): void;
     mapNode<T1_1 extends TreeNode = TreeNode, T2_1 extends TreeNode = T1_1>(nodes: T1_1[], id: T1_1["id"], fn: (node: T1_1, index: number, array: T1_1[]) => T2_1): (T1_1 | T2_1)[];
-    flatten<T_2 extends TreeNode = TreeNode>(nodes: T_2[], ancestors?: T_2[] | undefined): (T_2 & {
-        ancestors?: T_2[] | undefined;
+    flatten<T_3 extends TreeNode = TreeNode>(nodes: T_3[], ancestors?: T_3[] | undefined): (T_3 & {
+        ancestors?: T_3[] | undefined;
     })[];
-    appendTo<T_3 extends TreeNode = TreeNode>(nodes: T_3[], id: T_3["id"], newNodes: T_3[]): T_3[];
-    expandTo<T_4 extends TreeNode = TreeNode>(nodes: T_4[], id: T_4["id"]): T_4[];
-    getFirstChildNode<T_5 extends TreeNode = TreeNode>(nodes: T_5[], id: T_5["id"]): T_5 | undefined;
-    getAdjacentNode<T_6 extends TreeNode = TreeNode>(nodes: T_6[], id: T_6["id"]): T_6 | undefined;
-    getNextNode<T_7 extends TreeNode = TreeNode>(nodes: T_7[], id: T_7["id"]): T_7 | undefined;
-    getDeepestNode<T_8 extends TreeNode = TreeNode>(nodes: T_8[], id: T_8["id"]): T_8 | undefined;
-    getPreviousNode<T_9 extends TreeNode = TreeNode>(nodes: T_9[], id: T_9["id"]): T_9 | undefined;
+    getAncestors<T_4 extends TreeNode = TreeNode>(nodes: T_4[], id: T_4["id"], ancestors?: T_4[]): T_4[];
+    appendTo<T_5 extends TreeNode = TreeNode>(nodes: T_5[], id: T_5["id"], newNodes: T_5[]): T_5[];
+    expandTo<T_6 extends TreeNode = TreeNode>(nodes: T_6[], id: T_6["id"], collapseOthers?: boolean): T_6[];
+    getFirstChildNode<T_7 extends TreeNode = TreeNode>(nodes: T_7[], id: T_7["id"]): T_7 | undefined;
+    getAdjacentNode<T_8 extends TreeNode = TreeNode>(nodes: T_8[], id: T_8["id"]): T_8 | undefined;
+    getNextNode<T_9 extends TreeNode = TreeNode>(nodes: T_9[], id: T_9["id"]): T_9 | undefined;
+    getDeepestNode<T_10 extends TreeNode = TreeNode>(nodes: T_10[], id: T_10["id"]): T_10 | undefined;
+    getPreviousNode<T_11 extends TreeNode = TreeNode>(nodes: T_11[], id: T_11["id"]): T_11 | undefined;
 };
 export default helpers;
 //# sourceMappingURL=helpers.d.ts.map

package/lib/components/Tree/helpers.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEvC,QAAA,MAAM,OAAO;;;yGA8Ca,MAAM;~~mIAmBN~~,MAAM~~;;;;;;;;;;;CA2I~~/B,CAAC;AAEF,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/Tree/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEvC,QAAA,MAAM,OAAO;;;yGA8Ca,MAAM;sFAkBP,MAAM,mBAAiB,IAAI,GAC/C,IAAI;mIAaiB,MAAM;;;;;;;;;;;;CA4J/B,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/lib/components/Tree/helpers.js CHANGED Viewed

@@ -45,6 +45,14 @@ const helpers = {
             return fn(newNode, index, array);
         });
     },
+    forEachNode(nodes, fn) {
+        nodes.forEach((node, index, array) => {
+            if (node.nodes) {
+                this.forEachNode(node.nodes, fn);
+            }
+            fn(node, index, array);
+        });
+    },
     mapNode(nodes, id, fn) {
         return nodes.map((node, index, array) => {
             let newNode = node;
@@ -72,6 +80,14 @@ const helpers = {
             return [...flatNodes, ancestors ? { ...node, ancestors } : node];
         }, []);
     },
+    getAncestors(nodes, id, ancestors = []) {
+        const directParent = this.getParentNode(nodes, id);
+        if (directParent) {
+            ancestors.push(directParent);
+            this.getAncestors(nodes, directParent.id, ancestors);
+        }
+        return ancestors;
+    },
     appendTo(nodes, id, newNodes) {
         if (id) {
             return this.mapNode(nodes, id, node => ({
@@ -81,7 +97,7 @@ const helpers = {
         }
         return [...nodes, ...newNodes];
     },
-    expandTo(nodes, id) {
+    expandTo(nodes, id, collapseOthers = false) {
         return nodes.map(node => {
             // leaf node
             if (node.id === id) {
@@ -91,14 +107,18 @@ const helpers = {
                 };
             }
             // parent node
-            if (node.nodes && !!this.getNode(node.nodes, id)) {
+            if (node.nodes) {
+                let expanded = collapseOthers ? false : node.expanded;
+                if (this.getNode(node.nodes, id)) {
+                    expanded = true;
+                }
                 return {
                     ...node,
-                    nodes: this.expandTo(node.nodes, id),
-                    expanded: true
+                    nodes: this.expandTo(node.nodes, id, collapseOthers),
+                    expanded
                 };
             }
-            return { ...node, expanded: false };
+            return { ...node, expanded: collapseOthers ? false : node.expanded };
         });
     },
     getFirstChildNode(nodes, id) {