@neo4j-ndl/react 4.12.5 → 4.13.1

package/lib/cjs/next/tree-view/stories/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/index.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;;;;;;AAEH,+DAAwE;AAA/D,4IAAA,OAAO,OAAuB;AACvC,iEAAyE;AAAhE,6IAAA,OAAO,OAAuB;AACvC,mGAAmG;AAA1F,uKAAA,OAAO,OAAgC;AAChD,mEAA2E;AAAlE,+IAAA,OAAO,OAAwB;AACxC,qEAA2E;AAAlE,+IAAA,OAAO,OAAuB;AACvC,+EAA0F;AAAjF,8JAAA,OAAO,OAAiC;AACjD,uEAAoF;AAA3E,wJAAA,OAAO,OAA+B;AAC/C,qEAA2E;AAAlE,+IAAA,OAAO,OAAuB;AAEvC,gFAA4E;AAC5E,gGAAkE;AAClE,0FAAmE;AACnE,4FAAoE;AACpE,8HAA8F;AAC9F,8FAAsE;AACtE,gGAAkE;AAClE,kGAA2E;AAC3E,0GAAqF;AAExE,QAAA,kBAAkB,GAAG,IAAA,0CAAmB,EAAC,qCAAqB,CAAC,CAAC;AAChE,QAAA,sBAAsB,GAAG,IAAA,0CAAmB,EACvD,kCAAyB,CAC1B,CAAC;AACW,QAAA,sBAAsB,GAAG,IAAA,0CAAmB,EACvD,mCAAyB,CAC1B,CAAC;AACW,QAAA,+BAA+B,GAAG,IAAA,0CAAmB,EAChE,oDAAkC,CACnC,CAAC;AACW,QAAA,uBAAuB,GAAG,IAAA,0CAAmB,EACxD,oCAA0B,CAC3B,CAAC;AACW,QAAA,0BAA0B,GAAG,IAAA,0CAAmB,EAC3D,sCAA6B,CAC9B,CAAC;AACW,QAAA,kBAAkB,GAAG,IAAA,0CAAmB,EAAC,qCAAqB,CAAC,CAAC;AAChE,QAAA,gCAAgC,GAAG,IAAA,0CAAmB,EACjE,0CAAmC,CACpC,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nexport { default as TreeViewLazyLoading } from './tree-view-lazy.story';\nexport { default as TreeViewMultiSelect } from './tree-view-multi.story';\nexport { default as TreeViewNonSelectableFolders } from './tree-view-non-selectable-folders.story';\nexport { default as TreeViewSingleSelect } from './tree-view-single.story';\nexport { default as TreeViewWithActions } from './tree-view-actions.story';\nexport { default as TreeViewUncontrolledExpansion } from './tree-view-uncontrolled.story';\nexport { default as TreeViewWithTrailingContent } from './tree-view-trailing.story';\nexport { default as TreeViewWithTooltip } from './tree-view-tooltip.story';\n\nimport { removeLicenseHeader } from '../../../_common/export-stories-utils';\nimport TreeViewActionsSrcRaw from './tree-view-actions.story?raw';\nimport TreeViewLazyLoadingSrcRaw from './tree-view-lazy.story?raw';\nimport TreeViewMultiSelectSrcRaw from './tree-view-multi.story?raw';\nimport TreeViewNonSelectableFoldersSrcRaw from './tree-view-non-selectable-folders.story?raw';\nimport TreeViewSingleSelectSrcRaw from './tree-view-single.story?raw';\nimport TreeViewTooltipSrcRaw from './tree-view-tooltip.story?raw';\nimport TreeViewTrailingContentSrcRaw from './tree-view-trailing.story?raw';\nimport TreeViewUncontrolledExpansionSrcRaw from './tree-view-uncontrolled.story?raw';\n\nexport const TreeViewActionsSrc = removeLicenseHeader(TreeViewActionsSrcRaw);\nexport const TreeViewLazyLoadingSrc = removeLicenseHeader(\n  TreeViewLazyLoadingSrcRaw,\n);\nexport const TreeViewMultiSelectSrc = removeLicenseHeader(\n  TreeViewMultiSelectSrcRaw,\n);\nexport const TreeViewNonSelectableFoldersSrc = removeLicenseHeader(\n  TreeViewNonSelectableFoldersSrcRaw,\n);\nexport const TreeViewSingleSelectSrc = removeLicenseHeader(\n  TreeViewSingleSelectSrcRaw,\n);\nexport const TreeViewTrailingContentSrc = removeLicenseHeader(\n  TreeViewTrailingContentSrcRaw,\n);\nexport const TreeViewTooltipSrc = removeLicenseHeader(TreeViewTooltipSrcRaw);\nexport const TreeViewUncontrolledExpansionSrc = removeLicenseHeader(\n  TreeViewUncontrolledExpansionSrcRaw,\n);\n"]}

package/lib/cjs/next/tree-view/stories/tree-view-actions.story.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const icons_1 = require("@neo4j-ndl/react/icons");
+const next_1 = require("@neo4j-ndl/react/next");
+const react_2 = require("react");
+const Component = () => {
+    const [expanded, setExpanded] = (0, react_2.useState)({});
+    const [selected, setSelected] = (0, react_2.useState)(null);
+    const toggle = (key) => setExpanded((prev) => (Object.assign(Object.assign({}, prev), { [key]: !prev[key] })));
+    return ((0, jsx_runtime_1.jsxs)(next_1.TreeView, { ariaLabel: "Project files", children: [(0, jsx_runtime_1.jsxs)(next_1.TreeView.Item, { title: "src", hasChildren: true, isExpanded: expanded['src'], onExpandedChange: () => toggle('src'), isSelected: selected === 'src', onSelectedChange: () => setSelected('src'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), actionMenuItems: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "New File", onClick: () => alert('New file in src') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Rename", onClick: () => alert('Rename src') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Delete", onClick: () => alert('Delete src') })] }), children: [(0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "index.ts", isSelected: selected === 'index', onSelectedChange: () => setSelected('index'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}), actionMenuItems: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Open", onClick: () => alert('Open index.ts') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Rename", onClick: () => alert('Rename index.ts') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Delete", onClick: () => alert('Delete index.ts') })] }) }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "utils.ts", isSelected: selected === 'utils', onSelectedChange: () => setSelected('utils'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}), actionMenuItems: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Open", onClick: () => alert('Open utils.ts') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Rename", onClick: () => alert('Rename utils.ts') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Delete", onClick: () => alert('Delete utils.ts') })] }) })] }), (0, jsx_runtime_1.jsxs)(next_1.TreeView.Item, { title: "tests", hasChildren: true, isExpanded: expanded['tests'], onExpandedChange: () => toggle('tests'), isSelected: selected === 'tests', onSelectedChange: () => setSelected('tests'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), actionMenuItems: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Run Tests", onClick: () => alert('Run all tests') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "New Test", onClick: () => alert('New test in tests') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Delete", onClick: () => alert('Delete tests') })] }), children: [(0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "index.test.ts", isSelected: selected === 'index-test', onSelectedChange: () => setSelected('index-test'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}), actionMenuItems: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Run", onClick: () => alert('Run index.test.ts') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Rename", onClick: () => alert('Rename index.test.ts') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Delete", onClick: () => alert('Delete index.test.ts') })] }) }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "utils.test.ts", isSelected: selected === 'utils-test', onSelectedChange: () => setSelected('utils-test'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}), actionMenuItems: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Run", onClick: () => alert('Run utils.test.ts') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Rename", onClick: () => alert('Rename utils.test.ts') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Delete", onClick: () => alert('Delete utils.test.ts') })] }) })] }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "README.md", isSelected: selected === 'readme', onSelectedChange: () => setSelected('readme'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}), actionMenuItems: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Open", onClick: () => alert('Open README.md') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Rename", onClick: () => alert('Rename README.md') }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Delete", onClick: () => alert('Delete README.md') })] }) })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=tree-view-actions.story.js.map

package/lib/cjs/next/tree-view/stories/tree-view-actions.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-actions.story.js","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/tree-view-actions.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Menu } from '@neo4j-ndl/react';\nimport { DocumentIconOutline, FolderIconSolid } from '@neo4j-ndl/react/icons';\nimport { TreeView } from '@neo4j-ndl/react/next';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [expanded, setExpanded] = useState<Record<string, boolean>>({});\n  const [selected, setSelected] = useState<string | null>(null);\n\n  const toggle = (key: string) =>\n    setExpanded((prev) => ({ ...prev, [key]: !prev[key] }));\n\n  return (\n    <TreeView ariaLabel=\"Project files\">\n      <TreeView.Item\n        title=\"src\"\n        hasChildren\n        isExpanded={expanded['src']}\n        onExpandedChange={() => toggle('src')}\n        isSelected={selected === 'src'}\n        onSelectedChange={() => setSelected('src')}\n        leadingVisual={<FolderIconSolid />}\n        actionMenuItems={\n          <>\n            <Menu.Item\n              title=\"New File\"\n              onClick={() => alert('New file in src')}\n            />\n            <Menu.Item title=\"Rename\" onClick={() => alert('Rename src')} />\n            <Menu.Item title=\"Delete\" onClick={() => alert('Delete src')} />\n          </>\n        }\n      >\n        <TreeView.Item\n          title=\"index.ts\"\n          isSelected={selected === 'index'}\n          onSelectedChange={() => setSelected('index')}\n          leadingVisual={<DocumentIconOutline />}\n          actionMenuItems={\n            <>\n              <Menu.Item title=\"Open\" onClick={() => alert('Open index.ts')} />\n              <Menu.Item\n                title=\"Rename\"\n                onClick={() => alert('Rename index.ts')}\n              />\n              <Menu.Item\n                title=\"Delete\"\n                onClick={() => alert('Delete index.ts')}\n              />\n            </>\n          }\n        />\n        <TreeView.Item\n          title=\"utils.ts\"\n          isSelected={selected === 'utils'}\n          onSelectedChange={() => setSelected('utils')}\n          leadingVisual={<DocumentIconOutline />}\n          actionMenuItems={\n            <>\n              <Menu.Item title=\"Open\" onClick={() => alert('Open utils.ts')} />\n              <Menu.Item\n                title=\"Rename\"\n                onClick={() => alert('Rename utils.ts')}\n              />\n              <Menu.Item\n                title=\"Delete\"\n                onClick={() => alert('Delete utils.ts')}\n              />\n            </>\n          }\n        />\n      </TreeView.Item>\n      <TreeView.Item\n        title=\"tests\"\n        hasChildren\n        isExpanded={expanded['tests']}\n        onExpandedChange={() => toggle('tests')}\n        isSelected={selected === 'tests'}\n        onSelectedChange={() => setSelected('tests')}\n        leadingVisual={<FolderIconSolid />}\n        actionMenuItems={\n          <>\n            <Menu.Item\n              title=\"Run Tests\"\n              onClick={() => alert('Run all tests')}\n            />\n            <Menu.Item\n              title=\"New Test\"\n              onClick={() => alert('New test in tests')}\n            />\n            <Menu.Item title=\"Delete\" onClick={() => alert('Delete tests')} />\n          </>\n        }\n      >\n        <TreeView.Item\n          title=\"index.test.ts\"\n          isSelected={selected === 'index-test'}\n          onSelectedChange={() => setSelected('index-test')}\n          leadingVisual={<DocumentIconOutline />}\n          actionMenuItems={\n            <>\n              <Menu.Item\n                title=\"Run\"\n                onClick={() => alert('Run index.test.ts')}\n              />\n              <Menu.Item\n                title=\"Rename\"\n                onClick={() => alert('Rename index.test.ts')}\n              />\n              <Menu.Item\n                title=\"Delete\"\n                onClick={() => alert('Delete index.test.ts')}\n              />\n            </>\n          }\n        />\n        <TreeView.Item\n          title=\"utils.test.ts\"\n          isSelected={selected === 'utils-test'}\n          onSelectedChange={() => setSelected('utils-test')}\n          leadingVisual={<DocumentIconOutline />}\n          actionMenuItems={\n            <>\n              <Menu.Item\n                title=\"Run\"\n                onClick={() => alert('Run utils.test.ts')}\n              />\n              <Menu.Item\n                title=\"Rename\"\n                onClick={() => alert('Rename utils.test.ts')}\n              />\n              <Menu.Item\n                title=\"Delete\"\n                onClick={() => alert('Delete utils.test.ts')}\n              />\n            </>\n          }\n        />\n      </TreeView.Item>\n      <TreeView.Item\n        title=\"README.md\"\n        isSelected={selected === 'readme'}\n        onSelectedChange={() => setSelected('readme')}\n        leadingVisual={<DocumentIconOutline />}\n        actionMenuItems={\n          <>\n            <Menu.Item title=\"Open\" onClick={() => alert('Open README.md')} />\n            <Menu.Item\n              title=\"Rename\"\n              onClick={() => alert('Rename README.md')}\n            />\n            <Menu.Item\n              title=\"Delete\"\n              onClick={() => alert('Delete README.md')}\n            />\n          </>\n        }\n      />\n    </TreeView>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/next/tree-view/stories/tree-view-lazy.story.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const icons_1 = require("@neo4j-ndl/react/icons");
+const next_1 = require("@neo4j-ndl/react/next");
+const react_1 = require("react");
+const TREE_DATA = [
+    {
+        children: [
+            {
+                children: [
+                    { id: 'app-tsx', label: 'App.tsx' },
+                    { id: 'index-tsx', label: 'index.tsx' },
+                    { id: 'styles-css', label: 'styles.css' },
+                ],
+                id: 'frontend',
+                label: 'Frontend',
+            },
+            {
+                children: [
+                    { id: 'server-ts', label: 'server.ts' },
+                    { id: 'routes-ts', label: 'routes.ts' },
+                ],
+                id: 'backend',
+                label: 'Backend',
+            },
+            { id: 'readme-md', label: 'README.md' },
+        ],
+        id: 'projects',
+        label: 'Projects',
+    },
+    {
+        children: [
+            {
+                children: [
+                    { id: 'beach-jpg', label: 'beach.jpg' },
+                    { id: 'sunset-jpg', label: 'sunset.jpg' },
+                ],
+                id: 'vacation',
+                label: 'Vacation',
+            },
+            { id: 'profile-png', label: 'profile.png' },
+        ],
+        id: 'photos',
+        label: 'Photos',
+    },
+    {
+        children: [
+            { id: 'resume-pdf', label: 'resume.pdf' },
+            { id: 'cover-letter-pdf', label: 'cover-letter.pdf' },
+            { id: 'notes-txt', label: 'notes.txt' },
+        ],
+        id: 'documents',
+        label: 'Documents',
+    },
+    {
+        children: [
+            {
+                children: [
+                    { id: 'chill-m3u', label: 'chill.m3u' },
+                    { id: 'workout-m3u', label: 'workout.m3u' },
+                ],
+                id: 'playlists',
+                label: 'Playlists',
+            },
+            { id: 'favorites-m3u', label: 'favorites.m3u' },
+        ],
+        id: 'music',
+        label: 'Music',
+    },
+    { id: 'todo-txt', label: 'TODO.txt' },
+];
+const LOAD_DELAY_MS = 600;
+function iconForNode(node) {
+    if (node.children) {
+        return (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {});
+    }
+    if (/\.(jpg|jpeg|png|gif|svg)$/i.test(node.label)) {
+        return (0, jsx_runtime_1.jsx)(icons_1.PhotoIconOutline, {});
+    }
+    return (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {});
+}
+const INITIAL_NODE_STATE = {
+    hasLoaded: false,
+    isExpanded: false,
+    isLoading: false,
+};
+function useTreeState() {
+    const [nodeStates, setNodeStates] = (0, react_1.useState)({});
+    const [selectedId, setSelectedId] = (0, react_1.useState)(null);
+    const timers = (0, react_1.useRef)({});
+    const getNodeState = (0, react_1.useCallback)((id) => { var _a; return (_a = nodeStates[id]) !== null && _a !== void 0 ? _a : INITIAL_NODE_STATE; }, [nodeStates]);
+    const handleExpand = (0, react_1.useCallback)((id, expanded) => {
+        setNodeStates((prev) => {
+            var _a;
+            const current = (_a = prev[id]) !== null && _a !== void 0 ? _a : INITIAL_NODE_STATE;
+            if (expanded && !current.hasLoaded) {
+                if (timers.current[id]) {
+                    clearTimeout(timers.current[id]);
+                }
+                timers.current[id] = setTimeout(() => {
+                    setNodeStates((p) => (Object.assign(Object.assign({}, p), { [id]: { hasLoaded: true, isExpanded: true, isLoading: false } })));
+                    delete timers.current[id];
+                }, LOAD_DELAY_MS);
+                return Object.assign(Object.assign({}, prev), { [id]: { hasLoaded: false, isExpanded: true, isLoading: true } });
+            }
+            return Object.assign(Object.assign({}, prev), { [id]: Object.assign(Object.assign({}, current), { isExpanded: expanded }) });
+        });
+    }, []);
+    const handleSelect = (0, react_1.useCallback)((id) => setSelectedId((prev) => (prev === id ? null : id)), []);
+    return { getNodeState, handleExpand, handleSelect, selectedId };
+}
+function renderNode(node, ctx) {
+    const hasChildren = node.children !== undefined &&
+        node.children !== null &&
+        node.children.length > 0;
+    const state = ctx.getNodeState(node.id);
+    return ((0, jsx_runtime_1.jsxs)(next_1.TreeView.Item, { title: node.label, hasChildren: hasChildren, isExpanded: state.isExpanded, isLoading: state.isLoading, isSelected: ctx.selectedId === node.id, leadingVisual: iconForNode(node), onExpandedChange: (expanded) => ctx.handleExpand(node.id, expanded), onSelectedChange: () => ctx.handleSelect(node.id), children: [hasChildren && state.isLoading && !state.hasLoaded && ((0, jsx_runtime_1.jsx)(next_1.TreeView.SkeletonItem, { rows: 2 })), hasChildren &&
+                state.hasLoaded &&
+                node.children.map((child) => renderNode(child, ctx))] }, node.id));
+}
+const Component = () => {
+    const { getNodeState, selectedId, handleExpand, handleSelect } = useTreeState();
+    const ctx = (0, react_1.useMemo)(() => ({ getNodeState, handleExpand, handleSelect, selectedId }), [getNodeState, selectedId, handleExpand, handleSelect]);
+    return ((0, jsx_runtime_1.jsx)(next_1.TreeView, { ariaLabel: "Lazy-loaded file explorer", children: TREE_DATA.map((node) => renderNode(node, ctx)) }));
+};
+exports.default = Component;
+//# sourceMappingURL=tree-view-lazy.story.js.map

package/lib/cjs/next/tree-view/stories/tree-view-lazy.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-lazy.story.js","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/tree-view-lazy.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,kDAIgC;AAChC,gDAAiD;AACjD,iCAA+D;AAQ/D,MAAM,SAAS,GAAe;IAC5B;QACE,QAAQ,EAAE;YACR;gBACE,QAAQ,EAAE;oBACR,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;oBACnC,EAAE,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;oBACvC,EAAE,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE;iBAC1C;gBACD,EAAE,EAAE,UAAU;gBACd,KAAK,EAAE,UAAU;aAClB;YACD;gBACE,QAAQ,EAAE;oBACR,EAAE,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;oBACvC,EAAE,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;iBACxC;gBACD,EAAE,EAAE,SAAS;gBACb,KAAK,EAAE,SAAS;aACjB;YACD,EAAE,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;SACxC;QACD,EAAE,EAAE,UAAU;QACd,KAAK,EAAE,UAAU;KAClB;IACD;QACE,QAAQ,EAAE;YACR;gBACE,QAAQ,EAAE;oBACR,EAAE,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;oBACvC,EAAE,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE;iBAC1C;gBACD,EAAE,EAAE,UAAU;gBACd,KAAK,EAAE,UAAU;aAClB;YACD,EAAE,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;SAC5C;QACD,EAAE,EAAE,QAAQ;QACZ,KAAK,EAAE,QAAQ;KAChB;IACD;QACE,QAAQ,EAAE;YACR,EAAE,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE;YACzC,EAAE,EAAE,EAAE,kBAAkB,EAAE,KAAK,EAAE,kBAAkB,EAAE;YACrD,EAAE,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;SACxC;QACD,EAAE,EAAE,WAAW;QACf,KAAK,EAAE,WAAW;KACnB;IACD;QACE,QAAQ,EAAE;YACR;gBACE,QAAQ,EAAE;oBACR,EAAE,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;oBACvC,EAAE,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;iBAC5C;gBACD,EAAE,EAAE,WAAW;gBACf,KAAK,EAAE,WAAW;aACnB;YACD,EAAE,EAAE,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;SAChD;QACD,EAAE,EAAE,OAAO;QACX,KAAK,EAAE,OAAO;KACf;IACD,EAAE,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;CACtC,CAAC;AAEF,MAAM,aAAa,GAAG,GAAG,CAAC;AAE1B,SAAS,WAAW,CAAC,IAAc;IACjC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,OAAO,uBAAC,uBAAe,KAAG,CAAC;IAC7B,CAAC;IACD,IAAI,4BAA4B,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;QAClD,OAAO,uBAAC,wBAAgB,KAAG,CAAC;IAC9B,CAAC;IACD,OAAO,uBAAC,2BAAmB,KAAG,CAAC;AACjC,CAAC;AAQD,MAAM,kBAAkB,GAAc;IACpC,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE,KAAK;IACjB,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,SAAS,YAAY;IACnB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAA4B,EAAE,CAAC,CAAC;IAC5E,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAgB,IAAI,CAAC,CAAC;IAClE,MAAM,MAAM,GAAG,IAAA,cAAM,EAAgD,EAAE,CAAC,CAAC;IAEzE,MAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,CAAC,EAAU,EAAa,EAAE,WAAC,OAAA,MAAA,UAAU,CAAC,EAAE,CAAC,mCAAI,kBAAkB,CAAA,EAAA,EAC/D,CAAC,UAAU,CAAC,CACb,CAAC;IAEF,MAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,CAAC,EAAU,EAAE,QAAiB,EAAE,EAAE;QACjE,aAAa,CAAC,CAAC,IAAI,EAAE,EAAE;;YACrB,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,mCAAI,kBAAkB,CAAC;YAC/C,IAAI,QAAQ,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,CAAC;gBACnC,IAAI,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC;oBACvB,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC;gBACnC,CAAC;gBACD,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,GAAG,EAAE;oBACnC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,iCAChB,CAAC,KACJ,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,IAC7D,CAAC,CAAC;oBACJ,OAAO,MAAM,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;gBAC5B,CAAC,EAAE,aAAa,CAAC,CAAC;gBAClB,uCACK,IAAI,KACP,CAAC,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAC7D;YACJ,CAAC;YACD,uCAAY,IAAI,KAAE,CAAC,EAAE,CAAC,kCAAO,OAAO,KAAE,UAAU,EAAE,QAAQ,OAAK;QACjE,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,CAAC,EAAU,EAAE,EAAE,CAAC,aAAa,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAClE,EAAE,CACH,CAAC;IAEF,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC;AAClE,CAAC;AASD,SAAS,UAAU,CAAC,IAAc,EAAE,GAAkB;IACpD,MAAM,WAAW,GACf,IAAI,CAAC,QAAQ,KAAK,SAAS;QAC3B,IAAI,CAAC,QAAQ,KAAK,IAAI;QACtB,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC;IAC3B,MAAM,KAAK,GAAG,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAExC,OAAO,CACL,wBAAC,eAAQ,CAAC,IAAI,IAEZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,KAAK,CAAC,UAAU,EAC5B,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,UAAU,EAAE,GAAG,CAAC,UAAU,KAAK,IAAI,CAAC,EAAE,EACtC,aAAa,EAAE,WAAW,CAAC,IAAI,CAAC,EAChC,gBAAgB,EAAE,CAAC,QAAiB,EAAE,EAAE,CACtC,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,EAErC,gBAAgB,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,aAEhD,WAAW,IAAI,KAAK,CAAC,SAAS,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,CACrD,uBAAC,eAAQ,CAAC,YAAY,IAAC,IAAI,EAAE,CAAC,GAAI,CACnC,EACA,WAAW;gBACV,KAAK,CAAC,SAAS;gBACf,IAAI,CAAC,QAAS,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,KAjBlD,IAAI,CAAC,EAAE,CAkBE,CACjB,CAAC;AACJ,CAAC;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,GAC5D,YAAY,EAAE,CAAC;IAEjB,MAAM,GAAG,GAAG,IAAA,eAAO,EACjB,GAAG,EAAE,CAAC,CAAC,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,CAAC,EAChE,CAAC,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,CAAC,CACvD,CAAC;IAEF,OAAO,CACL,uBAAC,eAAQ,IAAC,SAAS,EAAC,2BAA2B,YAC5C,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,GACtC,CACZ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  DocumentIconOutline,\n  FolderIconSolid,\n  PhotoIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { TreeView } from '@neo4j-ndl/react/next';\nimport { useCallback, useMemo, useRef, useState } from 'react';\n\ntype TreeNode = {\n  id: string;\n  label: string;\n  children?: TreeNode[];\n};\n\nconst TREE_DATA: TreeNode[] = [\n  {\n    children: [\n      {\n        children: [\n          { id: 'app-tsx', label: 'App.tsx' },\n          { id: 'index-tsx', label: 'index.tsx' },\n          { id: 'styles-css', label: 'styles.css' },\n        ],\n        id: 'frontend',\n        label: 'Frontend',\n      },\n      {\n        children: [\n          { id: 'server-ts', label: 'server.ts' },\n          { id: 'routes-ts', label: 'routes.ts' },\n        ],\n        id: 'backend',\n        label: 'Backend',\n      },\n      { id: 'readme-md', label: 'README.md' },\n    ],\n    id: 'projects',\n    label: 'Projects',\n  },\n  {\n    children: [\n      {\n        children: [\n          { id: 'beach-jpg', label: 'beach.jpg' },\n          { id: 'sunset-jpg', label: 'sunset.jpg' },\n        ],\n        id: 'vacation',\n        label: 'Vacation',\n      },\n      { id: 'profile-png', label: 'profile.png' },\n    ],\n    id: 'photos',\n    label: 'Photos',\n  },\n  {\n    children: [\n      { id: 'resume-pdf', label: 'resume.pdf' },\n      { id: 'cover-letter-pdf', label: 'cover-letter.pdf' },\n      { id: 'notes-txt', label: 'notes.txt' },\n    ],\n    id: 'documents',\n    label: 'Documents',\n  },\n  {\n    children: [\n      {\n        children: [\n          { id: 'chill-m3u', label: 'chill.m3u' },\n          { id: 'workout-m3u', label: 'workout.m3u' },\n        ],\n        id: 'playlists',\n        label: 'Playlists',\n      },\n      { id: 'favorites-m3u', label: 'favorites.m3u' },\n    ],\n    id: 'music',\n    label: 'Music',\n  },\n  { id: 'todo-txt', label: 'TODO.txt' },\n];\n\nconst LOAD_DELAY_MS = 600;\n\nfunction iconForNode(node: TreeNode) {\n  if (node.children) {\n    return <FolderIconSolid />;\n  }\n  if (/\\.(jpg|jpeg|png|gif|svg)$/i.test(node.label)) {\n    return <PhotoIconOutline />;\n  }\n  return <DocumentIconOutline />;\n}\n\ntype NodeState = {\n  isExpanded: boolean;\n  isLoading: boolean;\n  hasLoaded: boolean;\n};\n\nconst INITIAL_NODE_STATE: NodeState = {\n  hasLoaded: false,\n  isExpanded: false,\n  isLoading: false,\n};\n\nfunction useTreeState() {\n  const [nodeStates, setNodeStates] = useState<Record<string, NodeState>>({});\n  const [selectedId, setSelectedId] = useState<string | null>(null);\n  const timers = useRef<Record<string, ReturnType<typeof setTimeout>>>({});\n\n  const getNodeState = useCallback(\n    (id: string): NodeState => nodeStates[id] ?? INITIAL_NODE_STATE,\n    [nodeStates],\n  );\n\n  const handleExpand = useCallback((id: string, expanded: boolean) => {\n    setNodeStates((prev) => {\n      const current = prev[id] ?? INITIAL_NODE_STATE;\n      if (expanded && !current.hasLoaded) {\n        if (timers.current[id]) {\n          clearTimeout(timers.current[id]);\n        }\n        timers.current[id] = setTimeout(() => {\n          setNodeStates((p) => ({\n            ...p,\n            [id]: { hasLoaded: true, isExpanded: true, isLoading: false },\n          }));\n          delete timers.current[id];\n        }, LOAD_DELAY_MS);\n        return {\n          ...prev,\n          [id]: { hasLoaded: false, isExpanded: true, isLoading: true },\n        };\n      }\n      return { ...prev, [id]: { ...current, isExpanded: expanded } };\n    });\n  }, []);\n\n  const handleSelect = useCallback(\n    (id: string) => setSelectedId((prev) => (prev === id ? null : id)),\n    [],\n  );\n\n  return { getNodeState, handleExpand, handleSelect, selectedId };\n}\n\ntype RenderContext = {\n  getNodeState: (id: string) => NodeState;\n  selectedId: string | null;\n  handleExpand: (id: string, expanded: boolean) => void;\n  handleSelect: (id: string) => void;\n};\n\nfunction renderNode(node: TreeNode, ctx: RenderContext) {\n  const hasChildren =\n    node.children !== undefined &&\n    node.children !== null &&\n    node.children.length > 0;\n  const state = ctx.getNodeState(node.id);\n\n  return (\n    <TreeView.Item\n      key={node.id}\n      title={node.label}\n      hasChildren={hasChildren}\n      isExpanded={state.isExpanded}\n      isLoading={state.isLoading}\n      isSelected={ctx.selectedId === node.id}\n      leadingVisual={iconForNode(node)}\n      onExpandedChange={(expanded: boolean) =>\n        ctx.handleExpand(node.id, expanded)\n      }\n      onSelectedChange={() => ctx.handleSelect(node.id)}\n    >\n      {hasChildren && state.isLoading && !state.hasLoaded && (\n        <TreeView.SkeletonItem rows={2} />\n      )}\n      {hasChildren &&\n        state.hasLoaded &&\n        node.children!.map((child) => renderNode(child, ctx))}\n    </TreeView.Item>\n  );\n}\n\nconst Component = () => {\n  const { getNodeState, selectedId, handleExpand, handleSelect } =\n    useTreeState();\n\n  const ctx = useMemo<RenderContext>(\n    () => ({ getNodeState, handleExpand, handleSelect, selectedId }),\n    [getNodeState, selectedId, handleExpand, handleSelect],\n  );\n\n  return (\n    <TreeView ariaLabel=\"Lazy-loaded file explorer\">\n      {TREE_DATA.map((node) => renderNode(node, ctx))}\n    </TreeView>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/next/tree-view/stories/tree-view-multi.story.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const icons_1 = require("@neo4j-ndl/react/icons");
+const next_1 = require("@neo4j-ndl/react/next");
+const react_1 = require("react");
+const WORK_CHILDREN = ['report', 'presentation'];
+const DOC_CHILDREN = ['work', 'resume'];
+const IMAGE_CHILDREN = ['photo', 'screenshot'];
+const DISABLED_KEYS = new Set(['presentation']);
+function getParentChecked(checked, childKeys) {
+    const enabledKeys = childKeys.filter((k) => !DISABLED_KEYS.has(k));
+    if (enabledKeys.length === 0) {
+        return { isChecked: false, isIndeterminate: false };
+    }
+    const checkedCount = enabledKeys.filter((k) => checked[k]).length;
+    if (checkedCount === 0) {
+        return { isChecked: false, isIndeterminate: false };
+    }
+    if (checkedCount === enabledKeys.length) {
+        return { isChecked: true, isIndeterminate: false };
+    }
+    return { isChecked: false, isIndeterminate: true };
+}
+const Component = () => {
+    const [expanded, setExpanded] = (0, react_1.useState)({});
+    const [checked, setChecked] = (0, react_1.useState)({});
+    const toggle = (key) => setExpanded((prev) => (Object.assign(Object.assign({}, prev), { [key]: !prev[key] })));
+    const toggleCheck = (0, react_1.useCallback)((key) => {
+        setChecked((prev) => (Object.assign(Object.assign({}, prev), { [key]: !prev[key] })));
+    }, []);
+    const toggleParent = (0, react_1.useCallback)((childKeys) => {
+        const enabledKeys = childKeys.filter((k) => !DISABLED_KEYS.has(k));
+        const isAllChecked = enabledKeys.every((k) => checked[k]);
+        setChecked((prev) => {
+            const next = Object.assign({}, prev);
+            for (const k of enabledKeys) {
+                next[k] = !isAllChecked;
+            }
+            return next;
+        });
+    }, [checked]);
+    const docState = getParentChecked(checked, [
+        ...DOC_CHILDREN,
+        ...WORK_CHILDREN,
+    ]);
+    const workState = getParentChecked(checked, WORK_CHILDREN);
+    const imageState = getParentChecked(checked, IMAGE_CHILDREN);
+    return ((0, jsx_runtime_1.jsxs)(next_1.TreeView, { ariaLabel: "File explorer", selectionMode: "multiple", children: [(0, jsx_runtime_1.jsxs)(next_1.TreeView.Item, { title: "Documents", hasChildren: true, isExpanded: expanded['documents'], onExpandedChange: () => toggle('documents'), isSelected: docState.isChecked, isIndeterminate: docState.isIndeterminate, onSelectedChange: () => toggleParent([...DOC_CHILDREN, ...WORK_CHILDREN]), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), children: [(0, jsx_runtime_1.jsxs)(next_1.TreeView.Item, { title: "Work", hasChildren: true, isExpanded: expanded['work'], onExpandedChange: () => toggle('work'), isSelected: workState.isChecked, isIndeterminate: workState.isIndeterminate, onSelectedChange: () => toggleParent(WORK_CHILDREN), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), children: [(0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Report.pdf", isSelected: !!checked['report'], onSelectedChange: () => toggleCheck('report'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Presentation.pptx", isDisabled: true, onSelectedChange: () => null, leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) })] }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Resume.pdf", isSelected: !!checked['resume'], onSelectedChange: () => toggleCheck('resume'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) })] }), (0, jsx_runtime_1.jsxs)(next_1.TreeView.Item, { title: "Images", hasChildren: true, isExpanded: expanded['images'], onExpandedChange: () => toggle('images'), isSelected: imageState.isChecked, isIndeterminate: imageState.isIndeterminate, onSelectedChange: () => toggleParent(IMAGE_CHILDREN), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), children: [(0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Photo.jpg", isSelected: !!checked['photo'], onSelectedChange: () => toggleCheck('photo'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PhotoIconOutline, {}) }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Screenshot.png", isSelected: !!checked['screenshot'], onSelectedChange: () => toggleCheck('screenshot'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PhotoIconOutline, {}) })] })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=tree-view-multi.story.js.map

package/lib/cjs/next/tree-view/stories/tree-view-multi.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-multi.story.js","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/tree-view-multi.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n  DocumentIconOutline,\n  FolderIconSolid,\n  PhotoIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { TreeView } from '@neo4j-ndl/react/next';\nimport { useCallback, useState } from 'react';\n\ntype CheckedState = Record<string, boolean>;\n\nconst WORK_CHILDREN = ['report', 'presentation'] as const;\nconst DOC_CHILDREN = ['work', 'resume'] as const;\nconst IMAGE_CHILDREN = ['photo', 'screenshot'] as const;\nconst DISABLED_KEYS = new Set(['presentation']);\n\nfunction getParentChecked(\n  checked: CheckedState,\n  childKeys: readonly string[],\n): { isChecked: boolean; isIndeterminate: boolean } {\n  const enabledKeys = childKeys.filter((k) => !DISABLED_KEYS.has(k));\n  if (enabledKeys.length === 0) {\n    return { isChecked: false, isIndeterminate: false };\n  }\n  const checkedCount = enabledKeys.filter((k) => checked[k]).length;\n  if (checkedCount === 0) {\n    return { isChecked: false, isIndeterminate: false };\n  }\n  if (checkedCount === enabledKeys.length) {\n    return { isChecked: true, isIndeterminate: false };\n  }\n  return { isChecked: false, isIndeterminate: true };\n}\n\nconst Component = () => {\n  const [expanded, setExpanded] = useState<Record<string, boolean>>({});\n  const [checked, setChecked] = useState<CheckedState>({});\n\n  const toggle = (key: string) =>\n    setExpanded((prev) => ({ ...prev, [key]: !prev[key] }));\n\n  const toggleCheck = useCallback((key: string) => {\n    setChecked((prev) => ({ ...prev, [key]: !prev[key] }));\n  }, []);\n\n  const toggleParent = useCallback(\n    (childKeys: readonly string[]) => {\n      const enabledKeys = childKeys.filter((k) => !DISABLED_KEYS.has(k));\n      const isAllChecked = enabledKeys.every((k) => checked[k]);\n      setChecked((prev) => {\n        const next = { ...prev };\n        for (const k of enabledKeys) {\n          next[k] = !isAllChecked;\n        }\n        return next;\n      });\n    },\n    [checked],\n  );\n\n  const docState = getParentChecked(checked, [\n    ...DOC_CHILDREN,\n    ...WORK_CHILDREN,\n  ]);\n  const workState = getParentChecked(checked, WORK_CHILDREN);\n  const imageState = getParentChecked(checked, IMAGE_CHILDREN);\n\n  return (\n    <TreeView ariaLabel=\"File explorer\" selectionMode=\"multiple\">\n      <TreeView.Item\n        title=\"Documents\"\n        hasChildren\n        isExpanded={expanded['documents']}\n        onExpandedChange={() => toggle('documents')}\n        isSelected={docState.isChecked}\n        isIndeterminate={docState.isIndeterminate}\n        onSelectedChange={() =>\n          toggleParent([...DOC_CHILDREN, ...WORK_CHILDREN])\n        }\n        leadingVisual={<FolderIconSolid />}\n      >\n        <TreeView.Item\n          title=\"Work\"\n          hasChildren\n          isExpanded={expanded['work']}\n          onExpandedChange={() => toggle('work')}\n          isSelected={workState.isChecked}\n          isIndeterminate={workState.isIndeterminate}\n          onSelectedChange={() => toggleParent(WORK_CHILDREN)}\n          leadingVisual={<FolderIconSolid />}\n        >\n          <TreeView.Item\n            title=\"Report.pdf\"\n            isSelected={!!checked['report']}\n            onSelectedChange={() => toggleCheck('report')}\n            leadingVisual={<DocumentIconOutline />}\n          />\n          <TreeView.Item\n            title=\"Presentation.pptx\"\n            isDisabled\n            onSelectedChange={() => null}\n            leadingVisual={<DocumentIconOutline />}\n          />\n        </TreeView.Item>\n        <TreeView.Item\n          title=\"Resume.pdf\"\n          isSelected={!!checked['resume']}\n          onSelectedChange={() => toggleCheck('resume')}\n          leadingVisual={<DocumentIconOutline />}\n        />\n      </TreeView.Item>\n      <TreeView.Item\n        title=\"Images\"\n        hasChildren\n        isExpanded={expanded['images']}\n        onExpandedChange={() => toggle('images')}\n        isSelected={imageState.isChecked}\n        isIndeterminate={imageState.isIndeterminate}\n        onSelectedChange={() => toggleParent(IMAGE_CHILDREN)}\n        leadingVisual={<FolderIconSolid />}\n      >\n        <TreeView.Item\n          title=\"Photo.jpg\"\n          isSelected={!!checked['photo']}\n          onSelectedChange={() => toggleCheck('photo')}\n          leadingVisual={<PhotoIconOutline />}\n        />\n        <TreeView.Item\n          title=\"Screenshot.png\"\n          isSelected={!!checked['screenshot']}\n          onSelectedChange={() => toggleCheck('screenshot')}\n          leadingVisual={<PhotoIconOutline />}\n        />\n      </TreeView.Item>\n    </TreeView>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/next/tree-view/stories/tree-view-non-selectable-folders.story.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const icons_1 = require("@neo4j-ndl/react/icons");
+const next_1 = require("@neo4j-ndl/react/next");
+const react_1 = require("react");
+const Component = () => {
+    const [expanded, setExpanded] = (0, react_1.useState)({});
+    const [selected, setSelected] = (0, react_1.useState)(null);
+    const toggle = (key) => setExpanded((prev) => (Object.assign(Object.assign({}, prev), { [key]: !prev[key] })));
+    return ((0, jsx_runtime_1.jsxs)(next_1.TreeView, { ariaLabel: "File explorer", children: [(0, jsx_runtime_1.jsxs)(next_1.TreeView.Item, { title: "Documents", hasChildren: true, isExpanded: expanded['documents'], onExpandedChange: () => toggle('documents'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), children: [(0, jsx_runtime_1.jsxs)(next_1.TreeView.Item, { title: "Work", hasChildren: true, isExpanded: expanded['work'], onExpandedChange: () => toggle('work'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), children: [(0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Report.pdf", isSelected: selected === 'report', onSelectedChange: () => setSelected('report'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Presentation.pptx", isSelected: selected === 'presentation', onSelectedChange: () => setSelected('presentation'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) })] }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Resume.pdf", isSelected: selected === 'resume', onSelectedChange: () => setSelected('resume'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) })] }), (0, jsx_runtime_1.jsxs)(next_1.TreeView.Item, { title: "Images", hasChildren: true, isExpanded: expanded['images'], onExpandedChange: () => toggle('images'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), children: [(0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Photo.jpg", isSelected: selected === 'photo', onSelectedChange: () => setSelected('photo'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Screenshot.png", isSelected: selected === 'screenshot', onSelectedChange: () => setSelected('screenshot'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) })] })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=tree-view-non-selectable-folders.story.js.map

package/lib/cjs/next/tree-view/stories/tree-view-non-selectable-folders.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-non-selectable-folders.story.js","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/tree-view-non-selectable-folders.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,kDAA8E;AAC9E,gDAAiD;AACjD,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAA0B,EAAE,CAAC,CAAC;IACtE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAgB,IAAI,CAAC,CAAC;IAE9D,MAAM,MAAM,GAAG,CAAC,GAAW,EAAE,EAAE,CAC7B,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iCAAM,IAAI,KAAE,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,IAAG,CAAC,CAAC;IAE1D,OAAO,CACL,wBAAC,eAAQ,IAAC,SAAS,EAAC,eAAe,aACjC,wBAAC,eAAQ,CAAC,IAAI,IACZ,KAAK,EAAC,WAAW,EACjB,WAAW,QACX,UAAU,EAAE,QAAQ,CAAC,WAAW,CAAC,EACjC,gBAAgB,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,EAC3C,aAAa,EAAE,uBAAC,uBAAe,KAAG,aAElC,wBAAC,eAAQ,CAAC,IAAI,IACZ,KAAK,EAAC,MAAM,EACZ,WAAW,QACX,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,EAC5B,gBAAgB,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EACtC,aAAa,EAAE,uBAAC,uBAAe,KAAG,aAElC,uBAAC,eAAQ,CAAC,IAAI,IACZ,KAAK,EAAC,YAAY,EAClB,UAAU,EAAE,QAAQ,KAAK,QAAQ,EACjC,gBAAgB,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,EAC7C,aAAa,EAAE,uBAAC,2BAAmB,KAAG,GACtC,EACF,uBAAC,eAAQ,CAAC,IAAI,IACZ,KAAK,EAAC,mBAAmB,EACzB,UAAU,EAAE,QAAQ,KAAK,cAAc,EACvC,gBAAgB,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,cAAc,CAAC,EACnD,aAAa,EAAE,uBAAC,2BAAmB,KAAG,GACtC,IACY,EAChB,uBAAC,eAAQ,CAAC,IAAI,IACZ,KAAK,EAAC,YAAY,EAClB,UAAU,EAAE,QAAQ,KAAK,QAAQ,EACjC,gBAAgB,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,QAAQ,CAAC,EAC7C,aAAa,EAAE,uBAAC,2BAAmB,KAAG,GACtC,IACY,EAChB,wBAAC,eAAQ,CAAC,IAAI,IACZ,KAAK,EAAC,QAAQ,EACd,WAAW,QACX,UAAU,EAAE,QAAQ,CAAC,QAAQ,CAAC,EAC9B,gBAAgB,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EACxC,aAAa,EAAE,uBAAC,uBAAe,KAAG,aAElC,uBAAC,eAAQ,CAAC,IAAI,IACZ,KAAK,EAAC,WAAW,EACjB,UAAU,EAAE,QAAQ,KAAK,OAAO,EAChC,gBAAgB,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,CAAC,EAC5C,aAAa,EAAE,uBAAC,2BAAmB,KAAG,GACtC,EACF,uBAAC,eAAQ,CAAC,IAAI,IACZ,KAAK,EAAC,gBAAgB,EACtB,UAAU,EAAE,QAAQ,KAAK,YAAY,EACrC,gBAAgB,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,YAAY,CAAC,EACjD,aAAa,EAAE,uBAAC,2BAAmB,KAAG,GACtC,IACY,IACP,CACZ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DocumentIconOutline, FolderIconSolid } from '@neo4j-ndl/react/icons';\nimport { TreeView } from '@neo4j-ndl/react/next';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [expanded, setExpanded] = useState<Record<string, boolean>>({});\n  const [selected, setSelected] = useState<string | null>(null);\n\n  const toggle = (key: string) =>\n    setExpanded((prev) => ({ ...prev, [key]: !prev[key] }));\n\n  return (\n    <TreeView ariaLabel=\"File explorer\">\n      <TreeView.Item\n        title=\"Documents\"\n        hasChildren\n        isExpanded={expanded['documents']}\n        onExpandedChange={() => toggle('documents')}\n        leadingVisual={<FolderIconSolid />}\n      >\n        <TreeView.Item\n          title=\"Work\"\n          hasChildren\n          isExpanded={expanded['work']}\n          onExpandedChange={() => toggle('work')}\n          leadingVisual={<FolderIconSolid />}\n        >\n          <TreeView.Item\n            title=\"Report.pdf\"\n            isSelected={selected === 'report'}\n            onSelectedChange={() => setSelected('report')}\n            leadingVisual={<DocumentIconOutline />}\n          />\n          <TreeView.Item\n            title=\"Presentation.pptx\"\n            isSelected={selected === 'presentation'}\n            onSelectedChange={() => setSelected('presentation')}\n            leadingVisual={<DocumentIconOutline />}\n          />\n        </TreeView.Item>\n        <TreeView.Item\n          title=\"Resume.pdf\"\n          isSelected={selected === 'resume'}\n          onSelectedChange={() => setSelected('resume')}\n          leadingVisual={<DocumentIconOutline />}\n        />\n      </TreeView.Item>\n      <TreeView.Item\n        title=\"Images\"\n        hasChildren\n        isExpanded={expanded['images']}\n        onExpandedChange={() => toggle('images')}\n        leadingVisual={<FolderIconSolid />}\n      >\n        <TreeView.Item\n          title=\"Photo.jpg\"\n          isSelected={selected === 'photo'}\n          onSelectedChange={() => setSelected('photo')}\n          leadingVisual={<DocumentIconOutline />}\n        />\n        <TreeView.Item\n          title=\"Screenshot.png\"\n          isSelected={selected === 'screenshot'}\n          onSelectedChange={() => setSelected('screenshot')}\n          leadingVisual={<DocumentIconOutline />}\n        />\n      </TreeView.Item>\n    </TreeView>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/next/tree-view/stories/tree-view-single.story.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const icons_1 = require("@neo4j-ndl/react/icons");
+const next_1 = require("@neo4j-ndl/react/next");
+const react_1 = require("react");
+const Component = () => {
+    const [expanded, setExpanded] = (0, react_1.useState)({});
+    const [selected, setSelected] = (0, react_1.useState)(null);
+    const toggle = (key) => setExpanded((prev) => (Object.assign(Object.assign({}, prev), { [key]: !prev[key] })));
+    return ((0, jsx_runtime_1.jsxs)(next_1.TreeView, { ariaLabel: "File explorer", children: [(0, jsx_runtime_1.jsxs)(next_1.TreeView.Item, { title: "Documents", hasChildren: true, isExpanded: expanded['documents'], onExpandedChange: () => toggle('documents'), isSelected: selected === 'documents', onSelectedChange: () => setSelected('documents'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), children: [(0, jsx_runtime_1.jsxs)(next_1.TreeView.Item, { title: "Work", hasChildren: true, isExpanded: expanded['work'], onExpandedChange: () => toggle('work'), isSelected: selected === 'work', onSelectedChange: () => setSelected('work'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), children: [(0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Report.pdf", isSelected: selected === 'report', onSelectedChange: () => setSelected('report'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Presentation.pptx", isDisabled: true, isSelected: selected === 'presentation', onSelectedChange: () => setSelected('presentation'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) })] }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Resume.pdf", isSelected: selected === 'resume', onSelectedChange: () => setSelected('resume'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) })] }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Images (disabled)", hasChildren: true, isExpanded: expanded['images'], onExpandedChange: () => toggle('images'), isSelected: selected === 'images', onSelectedChange: () => setSelected('images'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), isDisabled: true }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "README.md", isSelected: selected === 'readme', onSelectedChange: () => setSelected('readme'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=tree-view-single.story.js.map

package/lib/cjs/next/tree-view/stories/tree-view-single.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-single.story.js","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/tree-view-single.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DocumentIconOutline, FolderIconSolid } from '@neo4j-ndl/react/icons';\nimport { TreeView } from '@neo4j-ndl/react/next';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [expanded, setExpanded] = useState<Record<string, boolean>>({});\n  const [selected, setSelected] = useState<string | null>(null);\n\n  const toggle = (key: string) =>\n    setExpanded((prev) => ({ ...prev, [key]: !prev[key] }));\n\n  return (\n    <TreeView ariaLabel=\"File explorer\">\n      <TreeView.Item\n        title=\"Documents\"\n        hasChildren\n        isExpanded={expanded['documents']}\n        onExpandedChange={() => toggle('documents')}\n        isSelected={selected === 'documents'}\n        onSelectedChange={() => setSelected('documents')}\n        leadingVisual={<FolderIconSolid />}\n      >\n        <TreeView.Item\n          title=\"Work\"\n          hasChildren\n          isExpanded={expanded['work']}\n          onExpandedChange={() => toggle('work')}\n          isSelected={selected === 'work'}\n          onSelectedChange={() => setSelected('work')}\n          leadingVisual={<FolderIconSolid />}\n        >\n          <TreeView.Item\n            title=\"Report.pdf\"\n            isSelected={selected === 'report'}\n            onSelectedChange={() => setSelected('report')}\n            leadingVisual={<DocumentIconOutline />}\n          />\n          <TreeView.Item\n            title=\"Presentation.pptx\"\n            isDisabled\n            isSelected={selected === 'presentation'}\n            onSelectedChange={() => setSelected('presentation')}\n            leadingVisual={<DocumentIconOutline />}\n          />\n        </TreeView.Item>\n        <TreeView.Item\n          title=\"Resume.pdf\"\n          isSelected={selected === 'resume'}\n          onSelectedChange={() => setSelected('resume')}\n          leadingVisual={<DocumentIconOutline />}\n        />\n      </TreeView.Item>\n      <TreeView.Item\n        title=\"Images (disabled)\"\n        hasChildren\n        isExpanded={expanded['images']}\n        onExpandedChange={() => toggle('images')}\n        isSelected={selected === 'images'}\n        onSelectedChange={() => setSelected('images')}\n        leadingVisual={<FolderIconSolid />}\n        isDisabled\n      />\n      <TreeView.Item\n        title=\"README.md\"\n        isSelected={selected === 'readme'}\n        onSelectedChange={() => setSelected('readme')}\n        leadingVisual={<DocumentIconOutline />}\n      />\n    </TreeView>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/next/tree-view/stories/tree-view-tooltip.story.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const icons_1 = require("@neo4j-ndl/react/icons");
+const next_1 = require("@neo4j-ndl/react/next");
+const react_2 = require("react");
+const Component = () => {
+    const [selected, setSelected] = (0, react_2.useState)(null);
+    return ((0, jsx_runtime_1.jsxs)(next_1.TreeView, { ariaLabel: "Databases", style: { marginTop: '100px' }, children: [(0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Production", isSelected: selected === 'production', onSelectedChange: () => setSelected('production'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DatabaseSignalIcon, {}), trailingContent: (0, jsx_runtime_1.jsx)(icons_1.CheckCircleIconSolid, { className: "n-size-5 n-text-success-bg-status" }), actionMenuItems: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Edit" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Delete" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Rename" })] }), tooltipContent: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "n-font-semibold", children: "Production" }), (0, jsx_runtime_1.jsxs)("span", { className: "n-flex n-items-center n-gap-token-4 n-mt-token-8", children: [(0, jsx_runtime_1.jsx)(icons_1.CheckCircleIconSolid, { className: "n-size-5 n-text-success-bg-status" }), ": Endorsed"] })] }) }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Development", isSelected: selected === 'development', onSelectedChange: () => setSelected('development'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DatabaseSignalIcon, {}), trailingContent: (0, jsx_runtime_1.jsx)(icons_1.AppearanceIcon, { className: "n-size-5 n-text-warning-bg-status" }), tooltipContent: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: "n-font-semibold", children: "Development" }), (0, jsx_runtime_1.jsxs)("span", { className: "n-flex n-items-center n-gap-token-4 n-mt-token-8", children: [(0, jsx_runtime_1.jsx)(icons_1.AppearanceIcon, { className: "n-size-5 n-text-warning-bg-status" }), ": In development"] })] }) })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=tree-view-tooltip.story.js.map

package/lib/cjs/next/tree-view/stories/tree-view-tooltip.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-tooltip.story.js","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/tree-view-tooltip.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwC;AACxC,kDAIgC;AAChC,gDAAiD;AACjD,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAgB,IAAI,CAAC,CAAC;IAE9D,OAAO,CACL,wBAAC,eAAQ,IAAC,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,aAC3D,uBAAC,eAAQ,CAAC,IAAI,IACZ,KAAK,EAAC,YAAY,EAClB,UAAU,EAAE,QAAQ,KAAK,YAAY,EACrC,gBAAgB,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,YAAY,CAAC,EACjD,aAAa,EAAE,uBAAC,0BAAkB,KAAG,EACrC,eAAe,EACb,uBAAC,4BAAoB,IAAC,SAAS,EAAC,mCAAmC,GAAG,EAExE,eAAe,EACb,6DACE,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,GAAG,EAC5B,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,GAAG,IAC3B,EAEL,cAAc,EACZ,6DACE,iCAAM,SAAS,EAAC,iBAAiB,2BAAkB,EACnD,kCAAM,SAAS,EAAC,kDAAkD,aAChE,uBAAC,4BAAoB,IAAC,SAAS,EAAC,mCAAmC,GAAG,kBAEjE,IACN,GAEL,EACF,uBAAC,eAAQ,CAAC,IAAI,IACZ,KAAK,EAAC,aAAa,EACnB,UAAU,EAAE,QAAQ,KAAK,aAAa,EACtC,gBAAgB,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,aAAa,CAAC,EAClD,aAAa,EAAE,uBAAC,0BAAkB,KAAG,EACrC,eAAe,EACb,uBAAC,sBAAc,IAAC,SAAS,EAAC,mCAAmC,GAAG,EAElE,cAAc,EACZ,6DACE,iCAAM,SAAS,EAAC,iBAAiB,4BAAmB,EACpD,kCAAM,SAAS,EAAC,kDAAkD,aAChE,uBAAC,sBAAc,IAAC,SAAS,EAAC,mCAAmC,GAAG,wBAE3D,IACN,GAEL,IACO,CACZ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Menu } from '@neo4j-ndl/react';\nimport {\n  AppearanceIcon,\n  CheckCircleIconSolid,\n  DatabaseSignalIcon,\n} from '@neo4j-ndl/react/icons';\nimport { TreeView } from '@neo4j-ndl/react/next';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [selected, setSelected] = useState<string | null>(null);\n\n  return (\n    <TreeView ariaLabel=\"Databases\" style={{ marginTop: '100px' }}>\n      <TreeView.Item\n        title=\"Production\"\n        isSelected={selected === 'production'}\n        onSelectedChange={() => setSelected('production')}\n        leadingVisual={<DatabaseSignalIcon />}\n        trailingContent={\n          <CheckCircleIconSolid className=\"n-size-5 n-text-success-bg-status\" />\n        }\n        actionMenuItems={\n          <>\n            <Menu.Item title=\"Edit\" />\n            <Menu.Item title=\"Delete\" />\n            <Menu.Item title=\"Rename\" />\n          </>\n        }\n        tooltipContent={\n          <>\n            <span className=\"n-font-semibold\">Production</span>\n            <span className=\"n-flex n-items-center n-gap-token-4 n-mt-token-8\">\n              <CheckCircleIconSolid className=\"n-size-5 n-text-success-bg-status\" />\n              : Endorsed\n            </span>\n          </>\n        }\n      />\n      <TreeView.Item\n        title=\"Development\"\n        isSelected={selected === 'development'}\n        onSelectedChange={() => setSelected('development')}\n        leadingVisual={<DatabaseSignalIcon />}\n        trailingContent={\n          <AppearanceIcon className=\"n-size-5 n-text-warning-bg-status\" />\n        }\n        tooltipContent={\n          <>\n            <span className=\"n-font-semibold\">Development</span>\n            <span className=\"n-flex n-items-center n-gap-token-4 n-mt-token-8\">\n              <AppearanceIcon className=\"n-size-5 n-text-warning-bg-status\" />:\n              In development\n            </span>\n          </>\n        }\n      />\n    </TreeView>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/next/tree-view/stories/tree-view-trailing.story.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const react_1 = require("@neo4j-ndl/react");
+const icons_1 = require("@neo4j-ndl/react/icons");
+const next_1 = require("@neo4j-ndl/react/next");
+const react_2 = require("react");
+const Component = () => {
+    const [selected, setSelected] = (0, react_2.useState)(null);
+    return ((0, jsx_runtime_1.jsxs)(next_1.TreeView, { ariaLabel: "Databases", children: [(0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Production", isSelected: selected === 'production', onSelectedChange: () => setSelected('production'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DatabaseSignalIcon, {}), trailingContent: (0, jsx_runtime_1.jsx)(icons_1.CheckCircleIconSolid, { className: "n-size-5 n-text-success-bg-status" }), actionMenuItems: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Edit" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Delete" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Rename" })] }) }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Development", isSelected: selected === 'development', onSelectedChange: () => setSelected('development'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DatabaseSignalIcon, {}), trailingContent: (0, jsx_runtime_1.jsx)(icons_1.AppearanceIcon, { className: "n-size-5 n-text-warning-bg-status" }) })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=tree-view-trailing.story.js.map

package/lib/cjs/next/tree-view/stories/tree-view-trailing.story.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-trailing.story.js","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/tree-view-trailing.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwC;AACxC,kDAIgC;AAChC,gDAAiD;AACjD,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAgB,IAAI,CAAC,CAAC;IAE9D,OAAO,CACL,wBAAC,eAAQ,IAAC,SAAS,EAAC,WAAW,aAC7B,uBAAC,eAAQ,CAAC,IAAI,IACZ,KAAK,EAAC,YAAY,EAClB,UAAU,EAAE,QAAQ,KAAK,YAAY,EACrC,gBAAgB,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,YAAY,CAAC,EACjD,aAAa,EAAE,uBAAC,0BAAkB,KAAG,EACrC,eAAe,EACb,uBAAC,4BAAoB,IAAC,SAAS,EAAC,mCAAmC,GAAG,EAExE,eAAe,EACb,6DACE,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,MAAM,GAAG,EAC1B,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,GAAG,EAC5B,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,GAAG,IAC3B,GAEL,EACF,uBAAC,eAAQ,CAAC,IAAI,IACZ,KAAK,EAAC,aAAa,EACnB,UAAU,EAAE,QAAQ,KAAK,aAAa,EACtC,gBAAgB,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,aAAa,CAAC,EAClD,aAAa,EAAE,uBAAC,0BAAkB,KAAG,EACrC,eAAe,EACb,uBAAC,sBAAc,IAAC,SAAS,EAAC,mCAAmC,GAAG,GAElE,IACO,CACZ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Menu } from '@neo4j-ndl/react';\nimport {\n  AppearanceIcon,\n  CheckCircleIconSolid,\n  DatabaseSignalIcon,\n} from '@neo4j-ndl/react/icons';\nimport { TreeView } from '@neo4j-ndl/react/next';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [selected, setSelected] = useState<string | null>(null);\n\n  return (\n    <TreeView ariaLabel=\"Databases\">\n      <TreeView.Item\n        title=\"Production\"\n        isSelected={selected === 'production'}\n        onSelectedChange={() => setSelected('production')}\n        leadingVisual={<DatabaseSignalIcon />}\n        trailingContent={\n          <CheckCircleIconSolid className=\"n-size-5 n-text-success-bg-status\" />\n        }\n        actionMenuItems={\n          <>\n            <Menu.Item title=\"Edit\" />\n            <Menu.Item title=\"Delete\" />\n            <Menu.Item title=\"Rename\" />\n          </>\n        }\n      />\n      <TreeView.Item\n        title=\"Development\"\n        isSelected={selected === 'development'}\n        onSelectedChange={() => setSelected('development')}\n        leadingVisual={<DatabaseSignalIcon />}\n        trailingContent={\n          <AppearanceIcon className=\"n-size-5 n-text-warning-bg-status\" />\n        }\n      />\n    </TreeView>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/next/tree-view/stories/tree-view-uncontrolled.story.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
+const icons_1 = require("@neo4j-ndl/react/icons");
+const next_1 = require("@neo4j-ndl/react/next");
+const react_1 = require("react");
+const Component = () => {
+    const [selected, setSelected] = (0, react_1.useState)(null);
+    return ((0, jsx_runtime_1.jsxs)(next_1.TreeView, { ariaLabel: "File explorer", children: [(0, jsx_runtime_1.jsxs)(next_1.TreeView.Item, { title: "Documents (expanded by default)", defaultExpanded: true, leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), children: [(0, jsx_runtime_1.jsxs)(next_1.TreeView.Item, { title: "Work", leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), children: [(0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Report.pdf", isSelected: selected === 'report', onSelectedChange: () => setSelected('report'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Presentation.pptx", isSelected: selected === 'presentation', onSelectedChange: () => setSelected('presentation'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) })] }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Resume.pdf", isSelected: selected === 'resume', onSelectedChange: () => setSelected('resume'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) })] }), (0, jsx_runtime_1.jsxs)(next_1.TreeView.Item, { title: "Images (collapsed by default)", leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), defaultExpanded: false, children: [(0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Photo.jpg", isSelected: selected === 'photo', onSelectedChange: () => setSelected('photo'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Screenshot.png", isSelected: selected === 'screenshot', onSelectedChange: () => setSelected('screenshot'), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) })] })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=tree-view-uncontrolled.story.js.map