@mezzanine-ui/react 0.6.4

package/Tree/Tree.d.ts

@@ -0,0 +1,70 @@
+import { TreeNodeValue, TreeSelectMethod } from '@mezzanine-ui/core/tree';
+import { Ref } from 'react';
+import { GetTreeNodeEntitiesProps } from './getTreeNodeEntities';
+import { TreeNodeListElementProps, TreeNodeListProps } from './TreeNodeList';
+import { TreeExpandControl, TreeNodeProp } from './typings';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+export interface TreeProps extends Pick<TreeNodeListProps, 'multiple' | 'selectable' | 'size' | 'treeNodeProps' | 'treeNodeRefs' | 'onExpand'>, Omit<NativeElementPropsWithoutKeyAndRef<'div'>, 'children' | 'defaultChecked' | 'defaultValue' | 'onChange' | 'onSelect'> {
+    /**
+     * Controls whether to expand all at first render.
+     */
+    defaultExpandAll?: boolean;
+    /**
+     * Provide if certain nodes should be disabled.
+     * Notice that there are two conditions for auto disabling.
+     * First, if the siblings are all disabled, the parent will be disabled as well.
+     * Second, if the parent is disabled, all its siblings will be disabled as well.
+     */
+    disabledValues?: GetTreeNodeEntitiesProps['disabledValues'];
+    /**
+     * Provide if access to expand control is needed.
+     */
+    expandControllerRef?: Ref<TreeExpandControl | null>;
+    /**
+     * By default expanded values of `Tree` is uncontrolled.
+     * However, you may specify `expandedValues` to gain full control.
+     * If that's the case, you should provide `onExpand` as well.
+     * Notices that if `expandedValues` is provided, `expandControllerRef` will not get the control methods.
+     */
+    expandedValues?: TreeNodeValue[];
+    /**
+     * By default Tree only passes the leaf values to the select handler.
+     * If you want to include all the node values, set `includeNodeValue` to `true`.
+     */
+    includeNodeValue?: GetTreeNodeEntitiesProps['includeNodeValue'];
+    /**
+     * The nodes to be rendered in `Tree`
+     */
+    nodes: TreeNodeProp[];
+    /**
+     * By default expanded values of `Tree` is uncontrolled, where `onExpand` is not needed.
+     * However, you may specify `expandedValues` to gain full control
+     * and that's where you should provide `onExpand` together.
+     */
+    onExpand?: TreeNodeListProps['onExpand'];
+    /**
+     * Select handler for `Tree`. Receives all the current selected values as its argument.
+     */
+    onSelect?: (selectedValues: TreeNodeValue[]) => void;
+    /**
+     * Controls the singular select logic.
+     * `Toggle` means the value will be toggled.
+     * `Target` means the target value will always be the result value and will not deselect if click again.
+     * @default 'toggle''
+     */
+    selectMethod?: TreeSelectMethod;
+    /**
+     * Other `ul` props you may provide to `TreeNodeList` component.
+     * A common use-case is to override classes and styles.
+     */
+    treeNodeListProps?: TreeNodeListElementProps;
+    /**
+     * The selected values are controlled values. Should be use with `selectable`.
+     */
+    values?: TreeNodeValue | TreeNodeValue[];
+}
+/**
+ * The react component for `mezzanine` tree.
+ */
+declare const Tree: import("react").ForwardRefExoticComponent<TreeProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Tree;

package/Tree/Tree.js

@@ -0,0 +1,131 @@
+import { jsx } from 'react/jsx-runtime';
+import { treeClasses } from '@mezzanine-ui/core/tree';
+import { forwardRef, useMemo, useImperativeHandle } from 'react';
+import castArray from 'lodash/castArray';
+import without from 'lodash/without';
+import uniq from 'lodash/uniq';
+import { getTreeNodeEntities } from './getTreeNodeEntities.js';
+import { toggleValueWithStatusControl } from './toggleValue.js';
+import { traverseTree } from './traverseTree.js';
+import TreeNodeList from './TreeNodeList.js';
+import { useTreeExpandedValue } from './useTreeExpandedValue.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` tree.
+ */
+const Tree = forwardRef(function Tree(props, ref) {
+    const { className, defaultExpandAll, disabledValues, expandControllerRef, expandedValues: expandedValuesProp, includeNodeValue, multiple, nodes, onExpand: onExpandProp, onSelect: onSelectProp, selectMethod = 'toggle', selectable, size, treeNodeListProps, treeNodeProps, treeNodeRefs, values, ...restRootProp } = props;
+    const selectedValues = values ? castArray(values) : undefined;
+    const { expandedValues, onExpand, setExpandedValues, } = useTreeExpandedValue({
+        nodes,
+        defaultExpandAll,
+        expandedValues: expandedValuesProp,
+        onExpand: onExpandProp,
+    });
+    const treeEntities = useMemo(() => getTreeNodeEntities({
+        disabledValues,
+        expandedValues,
+        includeNodeValue,
+        multiple,
+        nodes,
+        selectedValues,
+    }), [
+        disabledValues,
+        expandedValues,
+        includeNodeValue,
+        multiple,
+        nodes,
+        selectedValues,
+    ]);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const displayNodes = nodes.map((node) => treeEntities.get(node.value).node);
+    const getAllExpandSiblingValues = (value) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const currentEntity = treeEntities.get(value);
+        const allSiblingEntities = currentEntity.siblings;
+        const allSiblingNodes = allSiblingEntities === null || allSiblingEntities === void 0 ? void 0 : allSiblingEntities.map(({ node }) => node);
+        const allNodeValues = [];
+        if (allSiblingNodes === null || allSiblingNodes === void 0 ? void 0 : allSiblingNodes.length) {
+            allNodeValues.push(currentEntity.node.value);
+            traverseTree(allSiblingNodes, (node) => {
+                var _a;
+                if ((_a = node.nodes) === null || _a === void 0 ? void 0 : _a.length) {
+                    allNodeValues.push(node.value);
+                }
+            });
+        }
+        return allNodeValues;
+    };
+    const collapse = (value) => {
+        setExpandedValues(expandedValues.filter((v) => v !== value));
+    };
+    const collapseAll = () => {
+        const allNodeValues = nodes.reduce((acc, currentNode) => [...acc, ...getAllExpandSiblingValues(currentNode.value)], []);
+        const uniqAllNodeValues = uniq(allNodeValues);
+        const newExpandedValues = without(expandedValues, ...uniqAllNodeValues);
+        setExpandedValues(newExpandedValues);
+    };
+    const collapseAllFrom = (value) => {
+        const allNodeValues = getAllExpandSiblingValues(value);
+        const newExpandedValues = without(expandedValues, ...allNodeValues);
+        setExpandedValues(newExpandedValues);
+    };
+    const expand = (value) => {
+        setExpandedValues(uniq([...expandedValues, value]));
+    };
+    const expandAll = () => {
+        const allNodeValues = nodes.reduce((acc, currentNode) => [...acc, ...getAllExpandSiblingValues(currentNode.value)], []);
+        const newExpandedValues = uniq([...expandedValues, ...allNodeValues]);
+        setExpandedValues(newExpandedValues);
+    };
+    const expandAllFrom = (value) => {
+        const allNodeValues = getAllExpandSiblingValues(value);
+        const newExpandedValues = uniq([...expandedValues, ...allNodeValues]);
+        setExpandedValues(newExpandedValues);
+    };
+    useImperativeHandle(expandControllerRef, () => {
+        if (expandedValuesProp) {
+            return null;
+        }
+        return {
+            collapse,
+            collapseAll,
+            collapseAllFrom,
+            expand,
+            expandAll,
+            expandAllFrom,
+        };
+    });
+    const onMultipleSelect = onSelectProp
+        ? (value) => {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const targetEntity = treeEntities.get(value);
+            const { selected } = targetEntity.node;
+            const newCheckedValues = toggleValueWithStatusControl(!!selected, targetEntity.values, selectedValues || []);
+            onSelectProp(newCheckedValues);
+        }
+        : undefined;
+    const onSingleSelect = onSelectProp
+        ? (value) => {
+            var _a;
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const targetEntity = treeEntities.get(value);
+            const { selected } = targetEntity.node;
+            if (!((_a = targetEntity.siblings) === null || _a === void 0 ? void 0 : _a.length)) {
+                if (selectMethod === 'target') {
+                    onSelectProp([value]);
+                }
+                else {
+                    const newCheckedValues = toggleValueWithStatusControl(!!selected, targetEntity.values, []);
+                    onSelectProp(newCheckedValues);
+                }
+            }
+        }
+        : undefined;
+    const selectHandler = multiple ? onMultipleSelect : onSingleSelect;
+    const onSelect = selectable ? selectHandler : undefined;
+    return (jsx("div", Object.assign({ ref: ref, className: cx(treeClasses.host, className) }, restRootProp, { children: jsx(TreeNodeList, Object.assign({}, treeNodeListProps, { multiple: multiple, nodes: displayNodes, onExpand: onExpand, onSelect: onSelect, selectable: selectable, size: size, treeNodeProps: treeNodeProps, treeNodeRefs: treeNodeRefs }), void 0) }), void 0));
+});
+
+export default Tree;

package/Tree/TreeNode.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { TreeNodeValue, TreeSize } from '@mezzanine-ui/core/tree';
+import { CollapseProps } from '../Transition';
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { TreeNodeData } from './typings';
+export declare type TreeNodeElementProps = Omit<NativeElementPropsWithoutKeyAndRef<'li'>, 'children' | 'value' | 'onSelect'>;
+export interface TreeNodeProps extends TreeNodeData, TreeNodeElementProps {
+    /**
+     * Provided children will be wrapped under `Collapse`.
+     */
+    children?: CollapseProps['children'];
+    /**
+     * The list item will be rendered as `Checkbox` if multiple set to true.
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Handler for caret icon click event. Receive current node value as its argument.
+     */
+    onExpand?: (value: TreeNodeValue) => void;
+    /**
+     * Handler for label element click event. Receive current node value as its argument.
+     * Must use with selectable setting to `true`.
+     */
+    onSelect?: (value: TreeNodeValue) => void;
+    /**
+     * Controls whether to be selectable.
+     * @default false
+     */
+    selectable?: boolean;
+    /**
+     * Sizes for the layout.
+     * @default 'medium'
+     */
+    size?: TreeSize;
+}
+/**
+ * The react component for `mezzanine` tree node.
+ */
+declare const TreeNode: import("react").ForwardRefExoticComponent<TreeNodeProps & import("react").RefAttributes<HTMLLIElement>>;
+export default TreeNode;

package/Tree/TreeNode.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { treeClasses } from '@mezzanine-ui/core/tree';
+import { CaretRightIcon } from '@mezzanine-ui/icons';
+import { forwardRef, useMemo } from 'react';
+import Typography from '../Typography/Typography.js';
+import Icon from '../Icon/Icon.js';
+import Checkbox from '../Checkbox/Checkbox.js';
+import Collapse from '../Transition/Collapse.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` tree node.
+ */
+const TreeNode = forwardRef(function TreeNode(props, ref) {
+    const { children, className, disabled, expanded, indeterminate, label, multiple = false, onExpand: onExpandProp, onSelect: onSelectProp, selectable = false, selected, size = 'medium', value, ...restRootProps } = props;
+    const variant = useMemo(() => {
+        if (size === 'small') {
+            return 'input3';
+        }
+        if (size === 'large') {
+            return 'input1';
+        }
+        return 'input2';
+    }, [size]);
+    const onExpand = onExpandProp ? () => { onExpandProp(value); } : undefined;
+    const onSelect = selectable && onSelectProp && !disabled ? () => { onSelectProp(value); } : undefined;
+    return (jsxs("li", Object.assign({ ref: ref }, restRootProps, { className: cx(treeClasses.node, treeClasses.nodeSize(size), className) }, { children: [jsxs("div", Object.assign({ className: treeClasses.nodeStem }, { children: [children ? (jsx(Icon, { icon: CaretRightIcon, className: cx(treeClasses.nodeCaret, {
+                            [treeClasses.nodeCaretExpanded]: expanded,
+                        }), role: "button", onClick: onExpand }, void 0)) : (jsx("div", {}, void 0)),
+                    multiple
+                        ? (jsx(Checkbox, Object.assign({ checked: !!selected, disabled: disabled, indeterminate: indeterminate, onChange: onSelect, size: size, value: `${value}` }, { children: label }), void 0))
+                        : (jsx(Typography, Object.assign({ component: "span", variant: variant, onClick: onSelect, className: cx(treeClasses.nodeLabel, {
+                                [treeClasses.nodeLabelSelectable]: !children && selectable,
+                                [treeClasses.nodeLabelIndeterminate]: indeterminate,
+                                [treeClasses.nodeLabelActive]: selected,
+                                [treeClasses.nodeLabelDisabled]: disabled,
+                            }) }, { children: label }), void 0))] }), void 0),
+            children && (jsx(Collapse, Object.assign({ in: expanded, appear: false }, { children: children }), void 0))] }), void 0));
+});
+
+export default TreeNode;

package/Tree/TreeNodeList.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
+import { TreeNodeElementProps, TreeNodeProps } from './TreeNode';
+import { TreeNodeData, TreeNodeRefs } from './typings';
+export declare type TreeNodeListElementProps = Omit<NativeElementPropsWithoutKeyAndRef<'ul'>, 'children' | 'onSelect'>;
+export interface TreeNodeListProps extends TreeNodeListElementProps, Pick<TreeNodeProps, 'multiple' | 'onExpand' | 'onSelect' | 'selectable' | 'size'> {
+    /**
+     * Given nodes will be passed to `TreeNode` component orderly.
+     */
+    nodes?: TreeNodeData['nodes'];
+    /**
+     * Other props you may provide to `TreeNode` component. A common use-case is to override classes and styles.
+     */
+    treeNodeProps?: TreeNodeElementProps;
+    /**
+     * Provide if you want to access every list element. Paired with node key and the element.
+     * Usage example: `const treeNodeRefs = useRef<TreeNodeRefsShape | undefined>(undefined)`
+     */
+    treeNodeRefs?: TreeNodeRefs;
+}
+/**
+ * The react component for `mezzanine` tree node list.
+ */
+declare const TreeNodeList: import("react").ForwardRefExoticComponent<TreeNodeListProps & import("react").RefAttributes<HTMLUListElement>>;
+export default TreeNodeList;

package/Tree/TreeNodeList.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import { treeClasses } from '@mezzanine-ui/core/tree';
+import { forwardRef } from 'react';
+import TreeNode from './TreeNode.js';
+import cx from 'clsx';
+
+/**
+ * The react component for `mezzanine` tree node list.
+ */
+const TreeNodeList = forwardRef((props, ref) => {
+    const { className, multiple, nodes, onExpand, onSelect, selectable, size = 'medium', treeNodeProps, treeNodeRefs, ...restRootProp } = props;
+    const getNodeRefHandler = treeNodeRefs
+        ? (value) => (node) => {
+            treeNodeRefs.current = {
+                ...treeNodeRefs.current,
+                [value]: node,
+            };
+        }
+        : undefined;
+    if (!(nodes === null || nodes === void 0 ? void 0 : nodes.length))
+        return null;
+    return (jsx("ul", Object.assign({}, restRootProp, { ref: ref, className: cx(treeClasses.nodeList, treeClasses.nodeListSize(size), className) }, { children: nodes.map((node) => {
+            const { value, nodes: siblingNodes, ...restNodeProps } = node;
+            return (jsx(TreeNode, Object.assign({ ref: getNodeRefHandler === null || getNodeRefHandler === void 0 ? void 0 : getNodeRefHandler(value) }, treeNodeProps, { multiple: multiple, onExpand: onExpand, onSelect: onSelect, selectable: selectable, size: size, value: value }, restNodeProps, { children: (siblingNodes === null || siblingNodes === void 0 ? void 0 : siblingNodes.length) ? (jsx(TreeNodeList, Object.assign({}, restRootProp, { className: className, multiple: multiple, nodes: siblingNodes, onExpand: onExpand, onSelect: onSelect, selectable: selectable, size: size, treeNodeRefs: treeNodeRefs }), void 0))
+                    : undefined }), value));
+        }) }), void 0));
+});
+
+export default TreeNodeList;

package/Tree/getTreeNodeEntities.d.ts

@@ -0,0 +1,11 @@
+import { TreeNodeValue } from '@mezzanine-ui/core/tree';
+import { TreeNodeData, TreeNodeEntities } from './typings';
+export interface GetTreeNodeEntitiesProps {
+    disabledValues?: TreeNodeValue[];
+    expandedValues?: TreeNodeValue[];
+    includeNodeValue?: boolean;
+    multiple?: boolean;
+    nodes: TreeNodeData[];
+    selectedValues?: TreeNodeValue[];
+}
+export declare function getTreeNodeEntities({ disabledValues, expandedValues, includeNodeValue, multiple, nodes, selectedValues, }: GetTreeNodeEntitiesProps): TreeNodeEntities;

package/Tree/getTreeNodeEntities.js

@@ -0,0 +1,86 @@
+import xor from 'lodash/xor';
+
+function getTreeNodeEntities({ disabledValues, expandedValues, includeNodeValue = false, multiple, nodes, selectedValues, }) {
+    const entities = new Map();
+    const selectedValueMap = (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) ? new Map(selectedValues.map((val) => [val, true]))
+        : undefined;
+    const expandedValueMap = (expandedValues === null || expandedValues === void 0 ? void 0 : expandedValues.length) ? new Map(expandedValues.map((val) => [val, true]))
+        : undefined;
+    const disabledValueMap = (disabledValues === null || disabledValues === void 0 ? void 0 : disabledValues.length) ? new Map(disabledValues.map((val) => [val, true]))
+        : undefined;
+    function getTreeEntity(node, parentDisabled) {
+        const { nodes: currentSiblings, value, } = node;
+        const selected = selectedValueMap === null || selectedValueMap === void 0 ? void 0 : selectedValueMap.get(value);
+        const expanded = expandedValueMap === null || expandedValueMap === void 0 ? void 0 : expandedValueMap.get(value);
+        const disabled = disabledValueMap === null || disabledValueMap === void 0 ? void 0 : disabledValueMap.get(value);
+        const entity = {
+            node: {
+                ...node,
+                disabled: parentDisabled || disabled,
+                expanded,
+                selected,
+            },
+            values: [],
+        };
+        if (!(currentSiblings === null || currentSiblings === void 0 ? void 0 : currentSiblings.length)) {
+            entities.set(entity.node.value, entity);
+            entity.values.push(value);
+            return entity;
+        }
+        const { anyIndeterminate, directSiblings, disabledValues: siblingDisabledValues, selectedValues: siblingSelectedValues, siblingNodes, siblings: siblingEntities, values: siblingValues, } = currentSiblings.reduce((acc, sibling) => {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const siblingEntity = getTreeEntity(sibling, parentDisabled || disabled);
+            const currentAnyIndeterminate = (siblingEntity.node.indeterminate ||
+                acc.anyIndeterminate);
+            return {
+                anyIndeterminate: currentAnyIndeterminate,
+                directSiblings: [...acc.directSiblings, siblingEntity.node.value],
+                disabledValues: siblingEntity.node.disabled
+                    ? [...acc.disabledValues, siblingEntity.node.value]
+                    : acc.disabledValues,
+                selectedValues: siblingEntity.node.selected
+                    ? [...acc.selectedValues, siblingEntity.node.value]
+                    : acc.selectedValues,
+                siblingNodes: [...acc.siblingNodes, siblingEntity.node],
+                siblings: [...acc.siblings, siblingEntity],
+                values: [...acc.values, ...siblingEntity.values],
+            };
+        }, {
+            anyIndeterminate: false,
+            directSiblings: [],
+            disabledValues: [],
+            selectedValues: [],
+            siblingNodes: [],
+            siblings: [],
+            values: [],
+        });
+        entity.node.nodes = siblingNodes;
+        entity.siblings = siblingEntities;
+        entity.values.push(...siblingValues);
+        if (includeNodeValue) {
+            entity.values.push(value);
+        }
+        const shouldDisabled = siblingDisabledValues.length && !xor(siblingDisabledValues, directSiblings).length;
+        if (!disabled && shouldDisabled) {
+            entity.node.disabled = true;
+        }
+        if ((anyIndeterminate && !disabled && !shouldDisabled) ||
+            (!multiple && siblingSelectedValues.length)) {
+            entity.node.selected = false;
+            entity.node.indeterminate = true;
+            entities.set(entity.node.value, entity);
+            return entity;
+        }
+        const allDirectSiblingChecked = !!(siblingSelectedValues.length && !xor(siblingSelectedValues, directSiblings).length);
+        entity.node.selected = allDirectSiblingChecked;
+        entity.node.indeterminate = allDirectSiblingChecked ? false : !!siblingSelectedValues.length;
+        entities.set(entity.node.value, entity);
+        return entity;
+    }
+    nodes.forEach((node) => {
+        getTreeEntity(node, disabledValueMap === null || disabledValueMap === void 0 ? void 0 : disabledValueMap.get(node.value));
+    });
+    return entities;
+}
+
+export { getTreeNodeEntities };

package/Tree/index.d.ts

@@ -0,0 +1,8 @@
+export * from './typings';
+export { uniqueArray, toggleValue, toggleValueWithStatusControl, } from './toggleValue';
+export { traverseTree, } from './traverseTree';
+export { UseTreeExpandedValueProps, useTreeExpandedValue, } from './useTreeExpandedValue';
+export { GetTreeNodeEntitiesProps, getTreeNodeEntities, } from './getTreeNodeEntities';
+export { TreeNodeElementProps, TreeNodeProps, default as TreeNode, } from './TreeNode';
+export { TreeNodeListElementProps, TreeNodeListProps, default as TreeNodeList, } from './TreeNodeList';
+export { TreeProps, default, } from './Tree';

package/Tree/index.js

@@ -0,0 +1,7 @@
+export { toggleValue, toggleValueWithStatusControl, uniqueArray } from './toggleValue.js';
+export { traverseTree } from './traverseTree.js';
+export { useTreeExpandedValue } from './useTreeExpandedValue.js';
+export { getTreeNodeEntities } from './getTreeNodeEntities.js';
+export { default as TreeNode } from './TreeNode.js';
+export { default as TreeNodeList } from './TreeNodeList.js';
+export { default } from './Tree.js';

package/Tree/toggleValue.d.ts

@@ -0,0 +1,4 @@
+import { TreeNodeValue } from '@mezzanine-ui/core/tree';
+export declare function uniqueArray<T>(items: T[]): T[];
+export declare function toggleValue(value: TreeNodeValue | TreeNodeValue[], pool: TreeNodeValue[]): TreeNodeValue[];
+export declare function toggleValueWithStatusControl(existed: boolean, value: TreeNodeValue | TreeNodeValue[], pool: TreeNodeValue[]): TreeNodeValue[];

package/Tree/toggleValue.js

@@ -0,0 +1,19 @@
+import castArray from 'lodash/castArray';
+import xor from 'lodash/xor';
+
+function uniqueArray(items) {
+    return Array.from(new Set(items));
+}
+function toggleValue(value, pool) {
+    const castedValue = castArray(value);
+    return xor(castedValue, pool);
+}
+function toggleValueWithStatusControl(existed, value, pool) {
+    const castedValue = castArray(value);
+    if (!existed) {
+        return uniqueArray([...pool, ...castedValue]);
+    }
+    return pool.filter((val) => !castedValue.includes(val));
+}
+
+export { toggleValue, toggleValueWithStatusControl, uniqueArray };

package/Tree/traverseTree.d.ts

@@ -0,0 +1,2 @@
+import { TreeNodeData } from './typings';
+export declare function traverseTree(nodes: TreeNodeData[], callback: (node: TreeNodeData, parent?: TreeNodeData) => void, parent?: TreeNodeData): void;

package/Tree/traverseTree.js

@@ -0,0 +1,11 @@
+function traverseTree(nodes, callback, parent) {
+    nodes.forEach((node) => {
+        const { nodes: siblingNodes, } = node;
+        callback(node, parent);
+        if (siblingNodes) {
+            traverseTree(siblingNodes, callback, node);
+        }
+    });
+}
+
+export { traverseTree };

package/Tree/typings.d.ts

@@ -0,0 +1,16 @@
+import { MutableRefObject, ReactNode } from 'react';
+import { TreeNodeDataShape, TreeNodeEntityShape, TreeNodePropShape, TreeNodeValue } from '@mezzanine-ui/core/tree';
+export declare type TreeNodeProp = TreeNodePropShape<ReactNode>;
+export declare type TreeNodeData = TreeNodeDataShape<ReactNode>;
+export declare type TreeNodeEntity = TreeNodeEntityShape<ReactNode>;
+export declare type TreeNodeEntities = Map<TreeNodeValue, TreeNodeEntity>;
+export declare type TreeNodeRefsShape = Record<TreeNodeValue, HTMLLIElement>;
+export declare type TreeNodeRefs = MutableRefObject<TreeNodeRefsShape | undefined>;
+export declare type TreeExpandControl = {
+    collapse: (value: TreeNodeValue) => void;
+    collapseAll: () => void;
+    collapseAllFrom: (value: TreeNodeValue) => void;
+    expand: (value: TreeNodeValue) => void;
+    expandAll: () => void;
+    expandAllFrom: (value: TreeNodeValue) => void;
+};

package/Tree/useTreeExpandedValue.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { TreeNodeValue } from '@mezzanine-ui/core/tree';
+import { TreeNodeListProps } from './TreeNodeList';
+import { TreeNodeProp } from './typings';
+export interface UseTreeExpandedValueProps {
+    defaultExpandAll?: boolean;
+    expandedValues?: TreeNodeValue[];
+    nodes: TreeNodeProp[];
+    onExpand?: TreeNodeListProps['onExpand'];
+}
+export declare function useTreeExpandedValue(props: UseTreeExpandedValueProps): {
+    expandedValues: TreeNodeValue[];
+    onExpand: (value: TreeNodeValue) => void;
+    setExpandedValues: import("react").Dispatch<import("react").SetStateAction<TreeNodeValue[]>>;
+};

package/Tree/useTreeExpandedValue.js

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { toggleValue } from './toggleValue.js';
+import { traverseTree } from './traverseTree.js';
+
+function useTreeExpandedValue(props) {
+    const { defaultExpandAll, expandedValues: expandedValuesProp, nodes, onExpand: onExpandProp, } = props;
+    const [expandedValues, setExpandedValues] = useState(() => {
+        if (expandedValuesProp) {
+            return [];
+        }
+        const currentExpandedValues = [];
+        if (defaultExpandAll) {
+            traverseTree(nodes, (node) => {
+                if (node.nodes) {
+                    currentExpandedValues.push(node.value);
+                }
+            });
+        }
+        return currentExpandedValues;
+    });
+    const onExpand = (value) => {
+        const newExpandedValues = toggleValue(value, expandedValues);
+        setExpandedValues(newExpandedValues);
+    };
+    return {
+        expandedValues: expandedValuesProp || expandedValues,
+        onExpand: (expandedValuesProp && onExpandProp) ? onExpandProp : onExpand,
+        setExpandedValues,
+    };
+}
+
+export { useTreeExpandedValue };