@snack-uikit/tree 0.1.8-preview-85c5f47b.0

package/dist/helperComponents/ExpandableTreeNode/ExpandableTreeNode.js

@@ -0,0 +1,90 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import useTransition from 'react-transition-state';
+import { TEST_IDS, TRANSITION_TIMING } from '../../constants';
+import { useTreeContext } from '../../contexts/TreeContext';
+import { TreeItem } from '../TreeItem';
+import { TreeLine } from '../TreeLine';
+import { TreeNode } from '../TreeNode';
+import styles from './styles.module.css';
+export function ExpandableTreeNode(_a) {
+    var _b = _a.node, { 'data-test-id': dataTestId } = _b, node = __rest(_b, ['data-test-id']), { parentNode, tabIndexAvailable } = _a;
+    const { expandedNodes, onExpand, onDataLoad, showLines } = useTreeContext();
+    const isExpandable = Boolean(node.nested);
+    const isExpanded = (expandedNodes === null || expandedNodes === void 0 ? void 0 : expandedNodes.includes(node.id)) || false;
+    const [isLoading, setLoading] = useState(false);
+    const [state, toggle] = useTransition({
+        timeout: TRANSITION_TIMING.accordionFolding,
+        initialEntered: isExpanded || undefined,
+        enter: isExpanded,
+    });
+    const showContent = node.nested && node.nested.length > 0 && state.status !== 'exited';
+    const isLineHalfHeight = useMemo(() => {
+        var _a, _b;
+        if (!((_a = node.nested) === null || _a === void 0 ? void 0 : _a.length))
+            return false;
+        return !((_b = node.nested.at(-1)) === null || _b === void 0 ? void 0 : _b.nested);
+    }, [node.nested]);
+    useEffect(() => {
+        var _a;
+        if (((_a = node.nested) === null || _a === void 0 ? void 0 : _a.length) && isExpanded && state.status === 'exited') {
+            toggle(true);
+        }
+    }, [isExpanded, node.nested, state.status]);
+    const toggleExpand = () => __awaiter(this, void 0, void 0, function* () {
+        if (node.disabled)
+            return;
+        if (node.nested && !node.nested.length && !isExpanded && onDataLoad) {
+            setLoading(true);
+            yield onDataLoad(node).finally(() => {
+                setLoading(false);
+            });
+        }
+        onExpand(node);
+        toggle();
+    });
+    const handleKeyDown = e => {
+        if (!isExpandable)
+            return;
+        switch (e.key) {
+            case 'ArrowRight': {
+                if (!isExpanded) {
+                    toggleExpand();
+                }
+                return;
+            }
+            case 'ArrowLeft': {
+                if (isExpanded) {
+                    toggleExpand();
+                }
+                return;
+            }
+            default:
+                return;
+        }
+    };
+    return (_jsxs("div", Object.assign({ className: styles.expandableTreeNode, "data-test-id": dataTestId, "data-expandable": Boolean(node.nested) || undefined, "data-disabled": node.disabled || undefined }, { children: [_jsx(TreeNode, Object.assign({}, node, { isLoading: isLoading, parentNode: parentNode, onChevronClick: toggleExpand, onKeyDown: handleKeyDown, tabIndexAvailable: tabIndexAvailable })), node.nested && (_jsx("div", Object.assign({ className: styles.expandableWrap, "data-expanded": isExpanded || undefined, "data-test-id": TEST_IDS.expandable }, { children: showContent && (_jsxs("div", Object.assign({ className: styles.expandableContent, "data-test-id": TEST_IDS.expandableContent }, { children: [_jsx(TreeLine, { visible: showLines, halfHeight: isLineHalfHeight, "data-test-id": TEST_IDS.line }), _jsx("div", Object.assign({ className: styles.expandableNested }, { children: node.nested.map(nestedNode => {
+                                const parent = { id: node.id, nested: node.nested, parentNode };
+                                return _jsx(TreeItem, { node: nestedNode, parentNode: parent }, nestedNode.id);
+                            }) }))] }))) })))] })));
+}

package/dist/helperComponents/ExpandableTreeNode/index.d.ts

@@ -0,0 +1 @@
+export * from './ExpandableTreeNode';

package/dist/helperComponents/ExpandableTreeNode/index.js

@@ -0,0 +1 @@
+export * from './ExpandableTreeNode';

package/dist/helperComponents/ExpandableTreeNode/styles.module.css

@@ -0,0 +1,34 @@
+.expandableTreeNode{
+  position:relative;
+  width:100%;
+}
+
+.expandableContent{
+  overflow:hidden;
+  display:flex;
+  box-sizing:border-box;
+  min-height:0;
+  visibility:hidden;
+  transition:visibility 200ms;
+}
+
+.expandableWrap{
+  overflow:hidden;
+  display:grid;
+  grid-template-rows:0fr;
+  box-sizing:border-box;
+  width:100%;
+  transition:grid-template-rows 200ms;
+}
+.expandableWrap[data-expanded=true]{
+  overflow:unset;
+  grid-template-rows:1fr;
+}
+.expandableWrap[data-expanded=true] .expandableContent{
+  visibility:visible;
+}
+
+.expandableNested{
+  width:100%;
+  min-width:0;
+}

package/dist/helperComponents/TreeItem/TreeItem.d.ts

@@ -0,0 +1,8 @@
+import { ParentNode, TreeNodeProps } from '../../types';
+type TreeItemProps = {
+    node: TreeNodeProps;
+    parentNode?: ParentNode;
+    tabIndexAvailable?: boolean;
+};
+export declare function TreeItem({ node, tabIndexAvailable, parentNode }: TreeItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/helperComponents/TreeItem/TreeItem.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TEST_IDS } from '../../constants';
+import { ExpandableTreeNode } from '../ExpandableTreeNode';
+import { TreeNode } from '../TreeNode';
+export function TreeItem({ node, tabIndexAvailable, parentNode }) {
+    const dataTestId = node['data-test-id'] || TEST_IDS.node;
+    const nodeProps = Object.assign(Object.assign({}, node), { 'data-test-id': dataTestId });
+    if (node.nested) {
+        return _jsx(ExpandableTreeNode, { node: nodeProps, tabIndexAvailable: tabIndexAvailable, parentNode: parentNode });
+    }
+    return _jsx(TreeNode, Object.assign({}, nodeProps, { tabIndexAvailable: tabIndexAvailable, parentNode: parentNode }));
+}

package/dist/helperComponents/TreeItem/index.d.ts

@@ -0,0 +1 @@
+export * from './TreeItem';

package/dist/helperComponents/TreeItem/index.js

@@ -0,0 +1 @@
+export * from './TreeItem';

package/dist/helperComponents/TreeLine/TreeLine.d.ts

@@ -0,0 +1,7 @@
+export type TreeLineProps = {
+    halfWidth?: boolean;
+    halfHeight?: boolean;
+    visible?: boolean;
+    horizontal?: boolean;
+};
+export declare function TreeLine({ halfWidth, halfHeight, horizontal, visible }: TreeLineProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/TreeLine/TreeLine.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.css';
+export function TreeLine({ halfWidth, halfHeight, horizontal, visible }) {
+    return (_jsx("div", { className: styles.treeLine, "data-horizontal": horizontal || undefined, "data-half-width": halfWidth || undefined, "data-half-height": halfHeight || undefined, "data-visible": visible || undefined, "data-test-id": TEST_IDS.line }));
+}

package/dist/helperComponents/TreeLine/index.d.ts

@@ -0,0 +1 @@
+export * from './TreeLine';

package/dist/helperComponents/TreeLine/index.js

@@ -0,0 +1 @@
+export * from './TreeLine';

package/dist/helperComponents/TreeLine/styles.module.css

@@ -0,0 +1,37 @@
+.treeLine{
+  pointer-events:none;
+  position:relative;
+  flex-shrink:0;
+  width:var(--size-tree-item-line-width, 24px);
+  visibility:hidden;
+}
+.treeLine[data-visible]{
+  visibility:visible;
+}
+.treeLine[data-visible]::after{
+  content:"";
+  position:absolute;
+  top:0;
+  left:50%;
+  transform:translateX(-50%);
+  width:1px;
+  height:calc(100% - var(--size-tree-item-height, 32px) / 2);
+  background:var(--sys-neutral-decor-default, #dedede);
+}
+.treeLine[data-half-height]::after{
+  height:calc(100% - var(--size-tree-item-height, 32px) / 2);
+}
+.treeLine[data-horizontal]::after{
+  top:50%;
+  left:-50%;
+  transform:translateY(-50%);
+  width:calc(150% - var(--space-tree-item-child-line-padding, 8px));
+  height:1px;
+}
+.treeLine[data-horizontal][data-half-width]{
+  width:0;
+}
+.treeLine[data-horizontal][data-half-width]::after{
+  left:calc(0px - var(--size-tree-item-line-width, 24px) / 2);
+  width:calc(var(--size-tree-item-line-width, 24px) / 2);
+}

package/dist/helperComponents/TreeNode/TreeNode.d.ts

@@ -0,0 +1,11 @@
+import { KeyboardEventHandler, MouseEventHandler } from 'react';
+import { ParentNode, TreeNodeProps } from '../../types';
+export type { TreeNodeProps };
+type TreeNodeComponentProps = TreeNodeProps & {
+    onChevronClick?: MouseEventHandler<HTMLElement>;
+    onKeyDown?: KeyboardEventHandler<HTMLElement>;
+    isLoading?: boolean;
+    parentNode?: ParentNode;
+    tabIndexAvailable?: boolean;
+};
+export declare function TreeNode({ id, title, icon, expandedIcon, collapsedIcon, disabled, onClick, nested, className, onChevronClick, onKeyDown, isLoading, parentNode, tabIndexAvailable, ...rest }: TreeNodeComponentProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/TreeNode/TreeNode.js

@@ -0,0 +1,146 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { ButtonFunction } from '@snack-uikit/button';
+import { ChevronRightSVG, FileSVG, FolderOpenSVG, FolderSVG } from '@snack-uikit/icons';
+import { Checkbox } from '@snack-uikit/toggles';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { TEST_IDS } from '../../constants';
+import { useTreeContext } from '../../contexts/TreeContext';
+import { checkNestedNodesSelection } from '../../helpers';
+import { TreeLine } from '../TreeLine';
+import { TreeNodeActions } from './components';
+import styles from './styles.module.css';
+import { stopPropagationClick } from './utils';
+export function TreeNode(_a) {
+    var { id, title, icon = _jsx(FileSVG, { size: 24 }), expandedIcon = _jsx(FolderOpenSVG, { size: 24 }), collapsedIcon = _jsx(FolderSVG, { size: 24 }), disabled, onClick, nested, className, onChevronClick, onKeyDown, isLoading, parentNode, tabIndexAvailable } = _a, rest = __rest(_a, ["id", "title", "icon", "expandedIcon", "collapsedIcon", "disabled", "onClick", "nested", "className", "onChevronClick", "onKeyDown", "isLoading", "parentNode", "tabIndexAvailable"]);
+    const { isMultiSelect, onNodeClick, selected, expandedNodes, onSelect, nodeActions, parentActions, setFocusPosition, resetFocusPosition, focusedNodeId, setFocusIndex, focusableNodeIds, showLines, } = useTreeContext();
+    const [isDroplistOpen, setDroplistOpen] = useState(false);
+    const [isDroplistTriggerFocused, setFocusDroplistTrigger] = useState(false);
+    const ref = useRef(null);
+    const isExpandable = Array.isArray(nested);
+    const isExpanded = isExpandable ? expandedNodes === null || expandedNodes === void 0 ? void 0 : expandedNodes.includes(id) : undefined;
+    const nestedNodesSelection = useMemo(() => {
+        if (!nested || !Array.isArray(selected) || !(selected === null || selected === void 0 ? void 0 : selected.length))
+            return undefined;
+        return checkNestedNodesSelection(nested, selected);
+    }, [nested, selected]);
+    const isSelected = (Array.isArray(selected) ? selected.includes(id) || (nestedNodesSelection === null || nestedNodesSelection === void 0 ? void 0 : nestedNodesSelection.allSelected) : selected === id) || false;
+    const isFocused = focusedNodeId === id;
+    useEffect(() => {
+        if (ref.current && isFocused) {
+            ref.current.focus();
+        }
+    }, [isFocused]);
+    const treeNodeIcon = useMemo(() => {
+        if (isExpandable) {
+            return isExpanded ? expandedIcon : collapsedIcon;
+        }
+        return icon;
+    }, [isExpandable, icon, isExpanded, expandedIcon, collapsedIcon]);
+    const handleClick = e => {
+        onNodeClick({
+            id,
+            title,
+            disabled,
+            nested,
+            onClick,
+        }, e);
+    };
+    const handleSelect = () => {
+        onSelect({
+            id,
+            disabled,
+            nested,
+        }, parentNode);
+    };
+    const handleFocus = (e) => {
+        var _a;
+        setFocusPosition(id);
+        if (!e) {
+            setFocusDroplistTrigger(false);
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    const handleBlurActions = () => {
+        var _a;
+        if (isDroplistTriggerFocused && !isDroplistOpen) {
+            setFocusDroplistTrigger(false);
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.blur();
+        }
+    };
+    const handleKeyDown = e => {
+        var _a, _b;
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
+        const focusableCount = focusableNodeIds.length;
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                setFocusIndex((prev = 0) => {
+                    if (prev >= focusableCount - 1) {
+                        return focusableCount - 1;
+                    }
+                    return prev + 1;
+                });
+                return;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                setFocusIndex((prev = 0) => {
+                    if (!prev) {
+                        return 0;
+                    }
+                    return prev - 1;
+                });
+                return;
+            }
+            case 'ArrowRight': {
+                e.preventDefault();
+                if (isExpanded || !isExpandable || disabled) {
+                    setFocusDroplistTrigger(true);
+                }
+                return;
+            }
+            case 'ArrowLeft': {
+                e.preventDefault();
+                if (isDroplistTriggerFocused) {
+                    setFocusDroplistTrigger(false);
+                    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+                }
+                return;
+            }
+            case 'Escape': {
+                (_b = ref.current) === null || _b === void 0 ? void 0 : _b.blur();
+                return;
+            }
+            case ' ':
+            case 'Enter': {
+                e.preventDefault();
+                handleSelect();
+                return;
+            }
+            default:
+                return;
+        }
+    };
+    const getNodeActions = Boolean(nested) ? parentActions : nodeActions;
+    return (_jsxs("div", Object.assign({ role: 'presentation', className: cn(styles.treeNode, className) }, extractSupportProps(rest), { "data-node-id": id }, { children: [parentNode && (_jsx(TreeLine, { halfWidth: Boolean(nested), horizontal: true, visible: showLines, "data-test-id": TEST_IDS.line })), !parentNode && !Boolean(nested) && _jsx(TreeLine, { visible: false }), isExpandable && (_jsx(ButtonFunction, { size: ButtonFunction.sizes.Xs, icon: _jsx(ChevronRightSVG, {}), disabled: disabled, loading: isLoading, onClick: onChevronClick, "data-expanded": isExpanded || undefined, className: styles.treeNodeExpandButton, tabIndex: -1, "data-test-id": TEST_IDS.chevron })), _jsxs("div", Object.assign({ role: 'treeitem', "aria-expanded": isExpanded, "aria-selected": isSelected, "aria-disabled": disabled, "data-multiselect": isMultiSelect || undefined, "data-droplist-active": isDroplistOpen || isDroplistTriggerFocused || undefined, onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: resetFocusPosition, tabIndex: tabIndexAvailable ? 0 : -1, className: styles.treeNodeContent, "data-test-id": TEST_IDS.item, ref: ref }, { children: [isMultiSelect && (_jsx("div", Object.assign({ className: styles.treeNodeCheckboxWrap }, { children: _jsx(Checkbox, { size: Checkbox.sizes.S, disabled: disabled, checked: !disabled && isSelected, indeterminate: !disabled && !isSelected && (nestedNodesSelection === null || nestedNodesSelection === void 0 ? void 0 : nestedNodesSelection.someSelected), onChange: handleSelect, onClick: stopPropagationClick, "data-test-id": TEST_IDS.checkbox, tabIndex: -1 }) }))), _jsx("div", Object.assign({ className: styles.treeNodeIcon, "data-test-id": TEST_IDS.icon }, { children: treeNodeIcon })), _jsx(Typography.SansBodyM, Object.assign({ tag: Typography.tags.div, className: styles.treeNodeTitle }, { children: _jsx(TruncateString, { text: title, "data-test-id": TEST_IDS.title }) })), getNodeActions && (_jsx(TreeNodeActions, { getNodeActions: getNodeActions, node: {
+                            id,
+                            title,
+                            disabled,
+                            nested,
+                        }, focusNode: handleFocus, onBlurActions: handleBlurActions, isDroplistTriggerFocused: isDroplistTriggerFocused, isDroplistOpen: isDroplistOpen, setDroplistOpen: setDroplistOpen }))] }))] })));
+}

package/dist/helperComponents/TreeNode/components/TreeNodeActions.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch, SetStateAction } from 'react';
+import { ItemSingleProps } from '@snack-uikit/droplist';
+import { TreeNodeProps } from '../../../types';
+type TreeNodeActionsProps = {
+    isDroplistOpen: boolean;
+    setDroplistOpen: Dispatch<SetStateAction<boolean>>;
+    getNodeActions(node: TreeNodeProps): ItemSingleProps[];
+    node: TreeNodeProps;
+    isDroplistTriggerFocused: boolean;
+    focusNode(): void;
+    onBlurActions(): void;
+};
+export declare function TreeNodeActions({ getNodeActions, isDroplistTriggerFocused, focusNode, isDroplistOpen, setDroplistOpen, onBlurActions, node, }: TreeNodeActionsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/helperComponents/TreeNode/components/TreeNodeActions.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { ButtonFunction } from '@snack-uikit/button';
+import { Droplist } from '@snack-uikit/droplist';
+import { KebabSVG } from '@snack-uikit/icons';
+import { TEST_IDS } from '../../../constants';
+import styles from '../styles.module.css';
+import { stopPropagationClick } from '../utils';
+export function TreeNodeActions({ getNodeActions, isDroplistTriggerFocused, focusNode, isDroplistOpen, setDroplistOpen, onBlurActions, node, }) {
+    const droplistActions = getNodeActions(node);
+    const { triggerElementRef, handleDroplistFocusLeave, handleDroplistItemKeyDown, handleTriggerKeyDown, handleDroplistItemClick, firstElementRefCallback, } = Droplist.useKeyboardNavigation({ setDroplistOpen });
+    useEffect(() => {
+        if (triggerElementRef.current && isDroplistTriggerFocused) {
+            triggerElementRef.current.focus();
+        }
+    }, [isDroplistTriggerFocused, triggerElementRef]);
+    if (!droplistActions.length) {
+        return null;
+    }
+    const handleKeyDown = e => {
+        handleTriggerKeyDown(e);
+        switch (e.key) {
+            case 'Tab': {
+                e.preventDefault();
+                return;
+            }
+            case 'ArrowLeft': {
+                if (isDroplistTriggerFocused) {
+                    focusNode();
+                    setDroplistOpen(false);
+                }
+                return;
+            }
+            default:
+                return;
+        }
+    };
+    return (_jsx("div", Object.assign({ role: 'presentation', className: styles.treeNodeActions, "data-focused": isDroplistTriggerFocused || undefined, onClick: stopPropagationClick }, { children: _jsx(Droplist, Object.assign({ open: isDroplistOpen, onOpenChange: setDroplistOpen, onFocusLeave: handleDroplistFocusLeave, firstElementRefCallback: firstElementRefCallback, triggerRef: triggerElementRef, placement: Droplist.placements.BottomEnd, triggerElement: _jsx(ButtonFunction, { size: ButtonFunction.sizes.Xs, icon: _jsx(KebabSVG, { size: 24 }), onKeyDown: handleKeyDown, onBlur: onBlurActions, tabIndex: -1, "data-test-id": TEST_IDS.droplistTrigger }) }, { children: droplistActions.map(action => (_jsx(Droplist.ItemSingle, Object.assign({}, action, { onKeyDown: handleDroplistItemKeyDown, onClick: e => handleDroplistItemClick(e, action.onClick), "data-test-id": TEST_IDS.droplistAction }), action.option))) })) })));
+}

package/dist/helperComponents/TreeNode/components/index.d.ts

@@ -0,0 +1 @@
+export * from './TreeNodeActions';

package/dist/helperComponents/TreeNode/components/index.js

@@ -0,0 +1 @@
+export * from './TreeNodeActions';

package/dist/helperComponents/TreeNode/index.d.ts

@@ -0,0 +1 @@
+export * from './TreeNode';

package/dist/helperComponents/TreeNode/index.js

@@ -0,0 +1 @@
+export * from './TreeNode';

package/dist/helperComponents/TreeNode/styles.module.css

@@ -0,0 +1,114 @@
+.treeNode{
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+}
+
+.treeNodeIcon{
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  color:var(--sys-neutral-text-support, #565656);
+}
+.treeNodeIcon svg{
+  width:var(--dimension-3m, 24px) !important;
+  height:var(--dimension-3m, 24px) !important;
+}
+
+.treeNodeTitle{
+  flex-grow:1;
+  box-sizing:border-box;
+  min-width:var(--size-tree-item-checkbox-wrap, 24px);
+  color:var(--sys-neutral-text-main, #333333);
+}
+
+.treeNodeActions{
+  display:flex;
+  visibility:hidden;
+}
+.treeNodeActions:focus-visible, .treeNodeActions[data-focused]{
+  visibility:visible;
+}
+
+.treeNodeContent{
+  height:var(--size-tree-item-height, 32px);
+  gap:var(--space-tree-item-content-layout-gap, 4px);
+  padding-right:var(--space-tree-item-content-layout-padding, 4px);
+  padding-left:var(--space-tree-item-content-layout-padding, 4px);
+  border-radius:var(--radius-tree-item-content-layout, 8px);
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  align-items:center;
+  box-sizing:border-box;
+  width:100%;
+  border-radius:var(--radius-tree-item-content-layout, 8px);
+}
+.treeNodeContent::before{
+  pointer-events:none;
+  content:"";
+  position:absolute;
+  top:0;
+  left:0;
+  box-sizing:border-box;
+  width:100%;
+  height:100%;
+  opacity:0;
+  background-color:var(--sys-neutral-accent-default, #757575);
+  border-radius:inherit;
+}
+.treeNodeContent:hover::before, .treeNodeContent:focus-visible::before, .treeNodeContent[data-droplist-active]::before{
+  opacity:var(--opacity-a008, 0.08);
+}
+.treeNodeContent:hover .treeNodeActions, .treeNodeContent:focus-visible .treeNodeActions, .treeNodeContent[data-droplist-active] .treeNodeActions{
+  visibility:visible;
+}
+.treeNodeContent:focus-visible{
+  outline-width:var(--border-state-focus-s-border-width, 2px);
+  outline-style:var(--border-state-focus-s-border-style, solid);
+  outline-color:var(--border-state-focus-s-border-color, );
+  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
+  outline-color:var(--sys-available-complementary, #131313);
+}
+.treeNodeContent[data-multiselect]{
+  cursor:default;
+}
+.treeNodeContent[aria-disabled=true]{
+  cursor:not-allowed;
+}
+.treeNodeContent[aria-disabled=true]::before{
+  display:none;
+}
+.treeNodeContent[aria-disabled=true] .treeNodeTitle, .treeNodeContent[aria-disabled=true] .treeNodeIcon{
+  color:var(--sys-neutral-text-disabled, #9e9e9e);
+}
+.treeNodeContent[aria-selected=true]:not([data-multiselect])::before{
+  opacity:var(--opacity-a008, 0.08);
+  background-color:var(--sys-primary-accent-default, #794ed3);
+}
+.treeNodeContent[aria-selected=true]:not([data-multiselect]):hover::before{
+  opacity:var(--opacity-a016, 0.16);
+}
+
+.treeNodeCheckboxWrap{
+  width:var(--size-tree-item-checkbox-wrap, 24px);
+  height:var(--size-tree-item-checkbox-wrap, 24px);
+  display:flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+}
+
+.treeNodeExpandButton{
+  box-sizing:border-box;
+}
+.treeNodeExpandButton svg{
+  transition:transform 0.2s ease;
+}
+.treeNodeExpandButton[data-expanded] svg{
+  transform:rotate(90deg);
+}

package/dist/helperComponents/TreeNode/utils.d.ts

@@ -0,0 +1,2 @@
+import { MouseEvent } from 'react';
+export declare function stopPropagationClick(e: MouseEvent<HTMLInputElement>): void;

package/dist/helperComponents/TreeNode/utils.js

@@ -0,0 +1,3 @@
+export function stopPropagationClick(e) {
+    e.stopPropagation();
+}

package/dist/helperComponents/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ExpandableTreeNode';
+export * from './TreeNode';
+export * from './TreeLine';
+export * from './TreeItem';

package/dist/helperComponents/index.js

@@ -0,0 +1,4 @@
+export * from './ExpandableTreeNode';
+export * from './TreeNode';
+export * from './TreeLine';
+export * from './TreeItem';

package/dist/helpers.d.ts

@@ -0,0 +1,11 @@
+import { ParentNode, TreeNodeId, TreeNodeProps } from './types';
+export declare function checkNestedNodesSelection(nodes: TreeNodeProps[], selectedKeys: TreeNodeId[]): {
+    someSelected: boolean;
+    allSelected: boolean;
+};
+export declare function findAllExpandedChildNodeIds(nodes: TreeNodeProps[], expandedNodes: TreeNodeId[]): string[];
+export declare function lookupTreeForSelectedNodes({ node, selectedNodes, parentNode, }: {
+    node: Pick<TreeNodeProps, 'id' | 'nested' | 'disabled'>;
+    selectedNodes: TreeNodeId[];
+    parentNode?: ParentNode;
+}): string[];