@neo4j-ndl/react 4.21.2 → 4.22.1

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

@@ -137,6 +137,7 @@ function renderNode(node, ctx) {
         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.isExpanded &&
                 state.hasLoaded &&
                 node.children.map((child) => renderNode(child, ctx))] }, node.id));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"tree-view-lazy.story.js","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/tree-view-lazy.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, 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((prev) => ({\n            ...prev,\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"]}
+{"version":3,"file":"tree-view-lazy.story.js","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/tree-view-lazy.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, 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((prev) => ({\n            ...prev,\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      {/* Rendering children only while expanded keeps collapsed subtrees out\n          of the DOM, so large trees only pay for the rows the user can see.\n          All item state lives outside the tree (keyed by node id), so nothing\n          is lost when a subtree unmounts on collapse. */}\n      {hasChildren &&\n        state.isExpanded &&\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

@@ -25,49 +25,25 @@ 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((key) => !DISABLED_KEYS.has(key));
-    if (enabledKeys.length === 0) {
-        return { isChecked: false, isIndeterminate: false };
-    }
-    const checkedCount = enabledKeys.filter((key) => checked[key]).length;
-    if (checkedCount === 0) {
-        return { isChecked: false, isIndeterminate: false };
-    }
-    if (checkedCount === enabledKeys.length) {
-        return { isChecked: true, isIndeterminate: false };
-    }
-    return { isChecked: false, isIndeterminate: true };
-}
+/**
+ * Every row owns its own checkbox: `onSelectedChange` reports the state the row
+ * should end up in, and the story stores exactly that. Folders are ordinary
+ * selectable rows here, unrelated to what sits inside them.
+ *
+ * Deriving a folder's state from its children instead needs the tree to own the
+ * selection, since a Shift range moves several rows at once and a cascade has
+ * to be applied to the whole set in one pass. See the root-managed selection
+ * story for that.
+ */
 const Component = () => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     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 [selected, setSelected] = (0, react_1.useState)({});
+    const toggleExpanded = (key) => setExpanded((prev) => (Object.assign(Object.assign({}, prev), { [key]: !prev[key] })));
+    const setRowSelected = (0, react_1.useCallback)((key, isSelected) => {
+        setSelected((prev) => (Object.assign(Object.assign({}, prev), { [key]: isSelected })));
     }, []);
-    const toggleParent = (0, react_1.useCallback)((childKeys) => {
-        const enabledKeys = childKeys.filter((key) => !DISABLED_KEYS.has(key));
-        const isAllChecked = enabledKeys.every((key) => checked[key]);
-        setChecked((prev) => {
-            const next = Object.assign({}, prev);
-            for (const key of enabledKeys) {
-                next[key] = !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, {}) })] })] }));
+    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: () => toggleExpanded('documents'), isSelected: (_a = selected['documents']) !== null && _a !== void 0 ? _a : false, onSelectedChange: (isSelected) => setRowSelected('documents', isSelected), 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: () => toggleExpanded('work'), isSelected: (_b = selected['work']) !== null && _b !== void 0 ? _b : false, onSelectedChange: (isSelected) => setRowSelected('work', isSelected), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), children: [(0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Report.pdf", isSelected: (_c = selected['report']) !== null && _c !== void 0 ? _c : false, onSelectedChange: (isSelected) => setRowSelected('report', isSelected), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Presentation.pptx", isDisabled: true, isSelected: (_d = selected['presentation']) !== null && _d !== void 0 ? _d : false, onSelectedChange: (isSelected) => setRowSelected('presentation', isSelected), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) })] }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Resume.pdf", isSelected: (_e = selected['resume']) !== null && _e !== void 0 ? _e : false, onSelectedChange: (isSelected) => setRowSelected('resume', isSelected), 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: () => toggleExpanded('images'), isSelected: (_f = selected['images']) !== null && _f !== void 0 ? _f : false, onSelectedChange: (isSelected) => setRowSelected('images', isSelected), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), children: [(0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Photo.jpg", isSelected: (_g = selected['photo']) !== null && _g !== void 0 ? _g : false, onSelectedChange: (isSelected) => setRowSelected('photo', isSelected), leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PhotoIconOutline, {}) }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { title: "Screenshot.png", isSelected: (_h = selected['screenshot']) !== null && _h !== void 0 ? _h : false, onSelectedChange: (isSelected) => setRowSelected('screenshot', isSelected), 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

@@ -1 +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((key) => !DISABLED_KEYS.has(key));\n  if (enabledKeys.length === 0) {\n    return { isChecked: false, isIndeterminate: false };\n  }\n  const checkedCount = enabledKeys.filter((key) => checked[key]).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((key) => !DISABLED_KEYS.has(key));\n      const isAllChecked = enabledKeys.every((key) => checked[key]);\n      setChecked((prev) => {\n        const next = { ...prev };\n        for (const key of enabledKeys) {\n          next[key] = !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"]}
+{"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\n/**\n * Every row owns its own checkbox: `onSelectedChange` reports the state the row\n * should end up in, and the story stores exactly that. Folders are ordinary\n * selectable rows here, unrelated to what sits inside them.\n *\n * Deriving a folder's state from its children instead needs the tree to own the\n * selection, since a Shift range moves several rows at once and a cascade has\n * to be applied to the whole set in one pass. See the root-managed selection\n * story for that.\n */\nconst Component = () => {\n  const [expanded, setExpanded] = useState<Record<string, boolean>>({});\n  const [selected, setSelected] = useState<Record<string, boolean>>({});\n\n  const toggleExpanded = (key: string) =>\n    setExpanded((prev) => ({ ...prev, [key]: !prev[key] }));\n\n  const setRowSelected = useCallback((key: string, isSelected: boolean) => {\n    setSelected((prev) => ({ ...prev, [key]: isSelected }));\n  }, []);\n\n  return (\n    <TreeView ariaLabel=\"File explorer\" selectionMode=\"multiple\">\n      <TreeView.Item\n        title=\"Documents\"\n        hasChildren\n        isExpanded={expanded['documents']}\n        onExpandedChange={() => toggleExpanded('documents')}\n        isSelected={selected['documents'] ?? false}\n        onSelectedChange={(isSelected) =>\n          setRowSelected('documents', isSelected)\n        }\n        leadingVisual={<FolderIconSolid />}\n      >\n        <TreeView.Item\n          title=\"Work\"\n          hasChildren\n          isExpanded={expanded['work']}\n          onExpandedChange={() => toggleExpanded('work')}\n          isSelected={selected['work'] ?? false}\n          onSelectedChange={(isSelected) => setRowSelected('work', isSelected)}\n          leadingVisual={<FolderIconSolid />}\n        >\n          <TreeView.Item\n            title=\"Report.pdf\"\n            isSelected={selected['report'] ?? false}\n            onSelectedChange={(isSelected) =>\n              setRowSelected('report', isSelected)\n            }\n            leadingVisual={<DocumentIconOutline />}\n          />\n          <TreeView.Item\n            title=\"Presentation.pptx\"\n            isDisabled\n            isSelected={selected['presentation'] ?? false}\n            onSelectedChange={(isSelected) =>\n              setRowSelected('presentation', isSelected)\n            }\n            leadingVisual={<DocumentIconOutline />}\n          />\n        </TreeView.Item>\n        <TreeView.Item\n          title=\"Resume.pdf\"\n          isSelected={selected['resume'] ?? false}\n          onSelectedChange={(isSelected) =>\n            setRowSelected('resume', isSelected)\n          }\n          leadingVisual={<DocumentIconOutline />}\n        />\n      </TreeView.Item>\n      <TreeView.Item\n        title=\"Images\"\n        hasChildren\n        isExpanded={expanded['images']}\n        onExpandedChange={() => toggleExpanded('images')}\n        isSelected={selected['images'] ?? false}\n        onSelectedChange={(isSelected) => setRowSelected('images', isSelected)}\n        leadingVisual={<FolderIconSolid />}\n      >\n        <TreeView.Item\n          title=\"Photo.jpg\"\n          isSelected={selected['photo'] ?? false}\n          onSelectedChange={(isSelected) => setRowSelected('photo', isSelected)}\n          leadingVisual={<PhotoIconOutline />}\n        />\n        <TreeView.Item\n          title=\"Screenshot.png\"\n          isSelected={selected['screenshot'] ?? false}\n          onSelectedChange={(isSelected) =>\n            setRowSelected('screenshot', isSelected)\n          }\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-multiple-replace.story.js

@@ -0,0 +1,38 @@
+"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");
+/**
+ * Letting the tree own the selection keeps the items declarative: they carry an
+ * `id` and nothing else, and a Shift range that moves several rows at once
+ * arrives as a single `onSelectedIdsChange`.
+ */
+const Component = () => {
+    const [selectedIds, setSelectedIds] = (0, react_1.useState)([]);
+    return ((0, jsx_runtime_1.jsxs)(next_1.TreeView, { ariaLabel: "File explorer", selectionMode: "multiple-replace", selectedIds: selectedIds, onSelectedIdsChange: setSelectedIds, children: [(0, jsx_runtime_1.jsxs)(next_1.TreeView.Item, { id: "documents", title: "Documents", hasChildren: true, defaultExpanded: true, leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), children: [(0, jsx_runtime_1.jsxs)(next_1.TreeView.Item, { id: "work", title: "Work", hasChildren: true, defaultExpanded: true, leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), children: [(0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { id: "report", title: "Report.pdf", isDisabled: true, leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { id: "presentation", title: "Presentation.pptx", leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) })] }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { id: "resume", title: "Resume.pdf", leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) })] }), (0, jsx_runtime_1.jsxs)(next_1.TreeView.Item, { id: "images", title: "Images", hasChildren: true, leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), children: [(0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { id: "photo", title: "Photo.jpg", leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PhotoIconOutline, {}) }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { id: "screenshot", title: "Screenshot.png", leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.PhotoIconOutline, {}) })] })] }));
+};
+exports.default = Component;
+//# sourceMappingURL=tree-view-multiple-replace.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-multiple-replace.story.js","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/tree-view-multiple-replace.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,kDAIgC;AAChC,gDAAiD;AACjD,iCAAiC;AAEjC;;;;GAIG;AACH,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAW,EAAE,CAAC,CAAC;IAE7D,OAAO,CACL,wBAAC,eAAQ,IACP,SAAS,EAAC,eAAe,EACzB,aAAa,EAAC,kBAAkB,EAChC,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE,cAAc,aAEnC,wBAAC,eAAQ,CAAC,IAAI,IACZ,EAAE,EAAC,WAAW,EACd,KAAK,EAAC,WAAW,EACjB,WAAW,QACX,eAAe,QACf,aAAa,EAAE,uBAAC,uBAAe,KAAG,aAElC,wBAAC,eAAQ,CAAC,IAAI,IACZ,EAAE,EAAC,MAAM,EACT,KAAK,EAAC,MAAM,EACZ,WAAW,QACX,eAAe,QACf,aAAa,EAAE,uBAAC,uBAAe,KAAG,aAElC,uBAAC,eAAQ,CAAC,IAAI,IACZ,EAAE,EAAC,QAAQ,EACX,KAAK,EAAC,YAAY,EAClB,UAAU,QACV,aAAa,EAAE,uBAAC,2BAAmB,KAAG,GACtC,EACF,uBAAC,eAAQ,CAAC,IAAI,IACZ,EAAE,EAAC,cAAc,EACjB,KAAK,EAAC,mBAAmB,EACzB,aAAa,EAAE,uBAAC,2BAAmB,KAAG,GACtC,IACY,EAChB,uBAAC,eAAQ,CAAC,IAAI,IACZ,EAAE,EAAC,QAAQ,EACX,KAAK,EAAC,YAAY,EAClB,aAAa,EAAE,uBAAC,2BAAmB,KAAG,GACtC,IACY,EAChB,wBAAC,eAAQ,CAAC,IAAI,IACZ,EAAE,EAAC,QAAQ,EACX,KAAK,EAAC,QAAQ,EACd,WAAW,QACX,aAAa,EAAE,uBAAC,uBAAe,KAAG,aAElC,uBAAC,eAAQ,CAAC,IAAI,IACZ,EAAE,EAAC,OAAO,EACV,KAAK,EAAC,WAAW,EACjB,aAAa,EAAE,uBAAC,wBAAgB,KAAG,GACnC,EACF,uBAAC,eAAQ,CAAC,IAAI,IACZ,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,gBAAgB,EACtB,aAAa,EAAE,uBAAC,wBAAgB,KAAG,GACnC,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 {\n  DocumentIconOutline,\n  FolderIconSolid,\n  PhotoIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport { TreeView } from '@neo4j-ndl/react/next';\nimport { useState } from 'react';\n\n/**\n * Letting the tree own the selection keeps the items declarative: they carry an\n * `id` and nothing else, and a Shift range that moves several rows at once\n * arrives as a single `onSelectedIdsChange`.\n */\nconst Component = () => {\n  const [selectedIds, setSelectedIds] = useState<string[]>([]);\n\n  return (\n    <TreeView\n      ariaLabel=\"File explorer\"\n      selectionMode=\"multiple-replace\"\n      selectedIds={selectedIds}\n      onSelectedIdsChange={setSelectedIds}\n    >\n      <TreeView.Item\n        id=\"documents\"\n        title=\"Documents\"\n        hasChildren\n        defaultExpanded\n        leadingVisual={<FolderIconSolid />}\n      >\n        <TreeView.Item\n          id=\"work\"\n          title=\"Work\"\n          hasChildren\n          defaultExpanded\n          leadingVisual={<FolderIconSolid />}\n        >\n          <TreeView.Item\n            id=\"report\"\n            title=\"Report.pdf\"\n            isDisabled\n            leadingVisual={<DocumentIconOutline />}\n          />\n          <TreeView.Item\n            id=\"presentation\"\n            title=\"Presentation.pptx\"\n            leadingVisual={<DocumentIconOutline />}\n          />\n        </TreeView.Item>\n        <TreeView.Item\n          id=\"resume\"\n          title=\"Resume.pdf\"\n          leadingVisual={<DocumentIconOutline />}\n        />\n      </TreeView.Item>\n      <TreeView.Item\n        id=\"images\"\n        title=\"Images\"\n        hasChildren\n        leadingVisual={<FolderIconSolid />}\n      >\n        <TreeView.Item\n          id=\"photo\"\n          title=\"Photo.jpg\"\n          leadingVisual={<PhotoIconOutline />}\n        />\n        <TreeView.Item\n          id=\"screenshot\"\n          title=\"Screenshot.png\"\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

@@ -25,11 +25,14 @@ 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");
+/**
+ * Folders here are pure containers: `isSelectable={false}` makes them expand on
+ * click without ever becoming part of the selection, and screen readers
+ * announce them as non-selectable rather than as unselected rows.
+ */
 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, {}) })] })] }));
+    const [selectedIds, setSelectedIds] = (0, react_1.useState)([]);
+    return ((0, jsx_runtime_1.jsxs)(next_1.TreeView, { ariaLabel: "File explorer", selectedIds: selectedIds, onSelectedIdsChange: setSelectedIds, children: [(0, jsx_runtime_1.jsxs)(next_1.TreeView.Item, { id: "documents", title: "Documents", hasChildren: true, isSelectable: false, leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), children: [(0, jsx_runtime_1.jsxs)(next_1.TreeView.Item, { id: "work", title: "Work", hasChildren: true, isSelectable: false, leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), children: [(0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { id: "report", title: "Report.pdf", leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { id: "presentation", title: "Presentation.pptx", leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) })] }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { id: "resume", title: "Resume.pdf", leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) })] }), (0, jsx_runtime_1.jsxs)(next_1.TreeView.Item, { id: "images", title: "Images", hasChildren: true, isSelectable: false, leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {}), children: [(0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { id: "photo", title: "Photo.jpg", leadingVisual: (0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {}) }), (0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { id: "screenshot", title: "Screenshot.png", 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

@@ -1 +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"]}
+{"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;;;;GAIG;AACH,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAW,EAAE,CAAC,CAAC;IAE7D,OAAO,CACL,wBAAC,eAAQ,IACP,SAAS,EAAC,eAAe,EACzB,WAAW,EAAE,WAAW,EACxB,mBAAmB,EAAE,cAAc,aAEnC,wBAAC,eAAQ,CAAC,IAAI,IACZ,EAAE,EAAC,WAAW,EACd,KAAK,EAAC,WAAW,EACjB,WAAW,QACX,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,uBAAC,uBAAe,KAAG,aAElC,wBAAC,eAAQ,CAAC,IAAI,IACZ,EAAE,EAAC,MAAM,EACT,KAAK,EAAC,MAAM,EACZ,WAAW,QACX,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,uBAAC,uBAAe,KAAG,aAElC,uBAAC,eAAQ,CAAC,IAAI,IACZ,EAAE,EAAC,QAAQ,EACX,KAAK,EAAC,YAAY,EAClB,aAAa,EAAE,uBAAC,2BAAmB,KAAG,GACtC,EACF,uBAAC,eAAQ,CAAC,IAAI,IACZ,EAAE,EAAC,cAAc,EACjB,KAAK,EAAC,mBAAmB,EACzB,aAAa,EAAE,uBAAC,2BAAmB,KAAG,GACtC,IACY,EAChB,uBAAC,eAAQ,CAAC,IAAI,IACZ,EAAE,EAAC,QAAQ,EACX,KAAK,EAAC,YAAY,EAClB,aAAa,EAAE,uBAAC,2BAAmB,KAAG,GACtC,IACY,EAChB,wBAAC,eAAQ,CAAC,IAAI,IACZ,EAAE,EAAC,QAAQ,EACX,KAAK,EAAC,QAAQ,EACd,WAAW,QACX,YAAY,EAAE,KAAK,EACnB,aAAa,EAAE,uBAAC,uBAAe,KAAG,aAElC,uBAAC,eAAQ,CAAC,IAAI,IACZ,EAAE,EAAC,OAAO,EACV,KAAK,EAAC,WAAW,EACjB,aAAa,EAAE,uBAAC,2BAAmB,KAAG,GACtC,EACF,uBAAC,eAAQ,CAAC,IAAI,IACZ,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,gBAAgB,EACtB,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\n/**\n * Folders here are pure containers: `isSelectable={false}` makes them expand on\n * click without ever becoming part of the selection, and screen readers\n * announce them as non-selectable rather than as unselected rows.\n */\nconst Component = () => {\n  const [selectedIds, setSelectedIds] = useState<string[]>([]);\n\n  return (\n    <TreeView\n      ariaLabel=\"File explorer\"\n      selectedIds={selectedIds}\n      onSelectedIdsChange={setSelectedIds}\n    >\n      <TreeView.Item\n        id=\"documents\"\n        title=\"Documents\"\n        hasChildren\n        isSelectable={false}\n        leadingVisual={<FolderIconSolid />}\n      >\n        <TreeView.Item\n          id=\"work\"\n          title=\"Work\"\n          hasChildren\n          isSelectable={false}\n          leadingVisual={<FolderIconSolid />}\n        >\n          <TreeView.Item\n            id=\"report\"\n            title=\"Report.pdf\"\n            leadingVisual={<DocumentIconOutline />}\n          />\n          <TreeView.Item\n            id=\"presentation\"\n            title=\"Presentation.pptx\"\n            leadingVisual={<DocumentIconOutline />}\n          />\n        </TreeView.Item>\n        <TreeView.Item\n          id=\"resume\"\n          title=\"Resume.pdf\"\n          leadingVisual={<DocumentIconOutline />}\n        />\n      </TreeView.Item>\n      <TreeView.Item\n        id=\"images\"\n        title=\"Images\"\n        hasChildren\n        isSelectable={false}\n        leadingVisual={<FolderIconSolid />}\n      >\n        <TreeView.Item\n          id=\"photo\"\n          title=\"Photo.jpg\"\n          leadingVisual={<DocumentIconOutline />}\n        />\n        <TreeView.Item\n          id=\"screenshot\"\n          title=\"Screenshot.png\"\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-root-selection.story.js

@@ -0,0 +1,125 @@
+"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 files = [
+    {
+        children: [
+            {
+                children: [
+                    { id: 'report', title: 'Report.pdf' },
+                    { id: 'presentation', title: 'Presentation.pptx' },
+                ],
+                id: 'work',
+                title: 'Work',
+            },
+            { id: 'resume', title: 'Resume.pdf' },
+        ],
+        id: 'documents',
+        title: 'Documents',
+    },
+    {
+        children: [
+            { id: 'photo', title: 'Photo.jpg' },
+            { id: 'screenshot', title: 'Screenshot.png' },
+        ],
+        id: 'images',
+        title: 'Images',
+    },
+];
+const walk = (nodes, visit) => {
+    nodes.forEach((node) => {
+        var _a;
+        visit(node);
+        walk((_a = node.children) !== null && _a !== void 0 ? _a : [], visit);
+    });
+};
+const getDescendantIds = (node) => {
+    var _a;
+    return ((_a = node.children) !== null && _a !== void 0 ? _a : []).flatMap((child) => [
+        child.id,
+        ...getDescendantIds(child),
+    ]);
+};
+const getLeafIds = (node) => node.children === undefined ? [node.id] : node.children.flatMap(getLeafIds);
+/** Folders follow their contents: selected only when every leaf below them is. */
+const syncFolders = (nodes, selected) => {
+    nodes.forEach((node) => {
+        if (node.children === undefined) {
+            return;
+        }
+        syncFolders(node.children, selected);
+        if (getLeafIds(node).every((id) => selected.has(id))) {
+            selected.add(node.id);
+        }
+        else {
+            selected.delete(node.id);
+        }
+    });
+};
+const Component = () => {
+    const [selectedIds, setSelectedIds] = (0, react_1.useState)(['resume']);
+    const selected = new Set(selectedIds);
+    /**
+     * The tree reports the whole selection at once, so cascading folders onto
+     * their contents takes a single pass even when a Shift range flipped many
+     * rows.
+     */
+    const handleSelectedIdsChange = (0, react_1.useCallback)((nextIds) => {
+        setSelectedIds((previousIds) => {
+            const next = new Set(nextIds);
+            const previous = new Set(previousIds);
+            walk(files, (node) => {
+                const isSelected = next.has(node.id);
+                if (node.children === undefined ||
+                    isSelected === previous.has(node.id)) {
+                    return;
+                }
+                getDescendantIds(node).forEach((id) => {
+                    if (isSelected) {
+                        next.add(id);
+                    }
+                    else {
+                        next.delete(id);
+                    }
+                });
+            });
+            syncFolders(files, next);
+            return [...next];
+        });
+    }, []);
+    const renderNode = (node) => {
+        var _a;
+        const leafIds = getLeafIds(node);
+        const selectedLeafCount = leafIds.filter((id) => selected.has(id)).length;
+        return ((0, jsx_runtime_1.jsx)(next_1.TreeView.Item, { id: node.id, title: node.title, defaultExpanded: true, isIndeterminate: node.children !== undefined &&
+                selectedLeafCount > 0 &&
+                selectedLeafCount < leafIds.length, leadingVisual: node.children === undefined ? ((0, jsx_runtime_1.jsx)(icons_1.DocumentIconOutline, {})) : ((0, jsx_runtime_1.jsx)(icons_1.FolderIconSolid, {})), children: (_a = node.children) === null || _a === void 0 ? void 0 : _a.map(renderNode) }, node.id));
+    };
+    return ((0, jsx_runtime_1.jsx)(next_1.TreeView, { ariaLabel: "File explorer", selectionMode: "multiple", selectedIds: selectedIds, onSelectedIdsChange: handleSelectedIdsChange, children: files.map(renderNode) }));
+};
+exports.default = Component;
+//# sourceMappingURL=tree-view-root-selection.story.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view-root-selection.story.js","sourceRoot":"","sources":["../../../../../src/next/tree-view/stories/tree-view-root-selection.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 { useCallback, useState } from 'react';\n\ntype FileNode = {\n  children?: FileNode[];\n  id: string;\n  title: string;\n};\n\nconst files: FileNode[] = [\n  {\n    children: [\n      {\n        children: [\n          { id: 'report', title: 'Report.pdf' },\n          { id: 'presentation', title: 'Presentation.pptx' },\n        ],\n        id: 'work',\n        title: 'Work',\n      },\n      { id: 'resume', title: 'Resume.pdf' },\n    ],\n    id: 'documents',\n    title: 'Documents',\n  },\n  {\n    children: [\n      { id: 'photo', title: 'Photo.jpg' },\n      { id: 'screenshot', title: 'Screenshot.png' },\n    ],\n    id: 'images',\n    title: 'Images',\n  },\n];\n\nconst walk = (nodes: FileNode[], visit: (node: FileNode) => void) => {\n  nodes.forEach((node) => {\n    visit(node);\n    walk(node.children ?? [], visit);\n  });\n};\n\nconst getDescendantIds = (node: FileNode): string[] =>\n  (node.children ?? []).flatMap((child) => [\n    child.id,\n    ...getDescendantIds(child),\n  ]);\n\nconst getLeafIds = (node: FileNode): string[] =>\n  node.children === undefined ? [node.id] : node.children.flatMap(getLeafIds);\n\n/** Folders follow their contents: selected only when every leaf below them is. */\nconst syncFolders = (nodes: FileNode[], selected: Set<string>) => {\n  nodes.forEach((node) => {\n    if (node.children === undefined) {\n      return;\n    }\n    syncFolders(node.children, selected);\n    if (getLeafIds(node).every((id) => selected.has(id))) {\n      selected.add(node.id);\n    } else {\n      selected.delete(node.id);\n    }\n  });\n};\n\nconst Component = () => {\n  const [selectedIds, setSelectedIds] = useState<string[]>(['resume']);\n  const selected = new Set(selectedIds);\n\n  /**\n   * The tree reports the whole selection at once, so cascading folders onto\n   * their contents takes a single pass even when a Shift range flipped many\n   * rows.\n   */\n  const handleSelectedIdsChange = useCallback((nextIds: string[]) => {\n    setSelectedIds((previousIds) => {\n      const next = new Set(nextIds);\n      const previous = new Set(previousIds);\n      walk(files, (node) => {\n        const isSelected = next.has(node.id);\n        if (\n          node.children === undefined ||\n          isSelected === previous.has(node.id)\n        ) {\n          return;\n        }\n        getDescendantIds(node).forEach((id) => {\n          if (isSelected) {\n            next.add(id);\n          } else {\n            next.delete(id);\n          }\n        });\n      });\n      syncFolders(files, next);\n      return [...next];\n    });\n  }, []);\n\n  const renderNode = (node: FileNode) => {\n    const leafIds = getLeafIds(node);\n    const selectedLeafCount = leafIds.filter((id) => selected.has(id)).length;\n    return (\n      <TreeView.Item\n        key={node.id}\n        id={node.id}\n        title={node.title}\n        defaultExpanded\n        isIndeterminate={\n          node.children !== undefined &&\n          selectedLeafCount > 0 &&\n          selectedLeafCount < leafIds.length\n        }\n        leadingVisual={\n          node.children === undefined ? (\n            <DocumentIconOutline />\n          ) : (\n            <FolderIconSolid />\n          )\n        }\n      >\n        {node.children?.map(renderNode)}\n      </TreeView.Item>\n    );\n  };\n\n  return (\n    <TreeView\n      ariaLabel=\"File explorer\"\n      selectionMode=\"multiple\"\n      selectedIds={selectedIds}\n      onSelectedIdsChange={handleSelectedIdsChange}\n    >\n      {files.map(renderNode)}\n    </TreeView>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/radio/Radio.js

@@ -37,9 +37,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 const classnames_1 = __importDefault(require("classnames"));
-const react_1 = require("react");
+const form_control_1 = require("../_common/form-control");
 const use_semi_controlled_input_1 = require("../_common/use-semi-controlled-input");
-const utils_1 = require("../_common/utils");
 const Radio = (_a) => {
     var _b;
     var { ariaLabel, isDisabled = false, isDefaultChecked, label, isFluid = false, isChecked, hasLeadingLabel, onChange, className, style, onClick, value, htmlAttributes, ref } = _a, restProps = __rest(_a, ["ariaLabel", "isDisabled", "isDefaultChecked", "label", "isFluid", "isChecked", "hasLeadingLabel", "onChange", "className", "style", "onClick", "value", "htmlAttributes", "ref"]);
@@ -49,29 +48,20 @@ const Radio = (_a) => {
         onChange,
         state: (_b = isChecked !== null && isChecked !== void 0 ? isChecked : isDefaultChecked) !== null && _b !== void 0 ? _b : false,
     });
-    const labelWrappingClasses = (0, classnames_1.default)('ndl-radio-label', {
-        'ndl-disabled': isDisabled,
-        'ndl-fluid': isFluid,
-    });
     const radioClasses = (0, classnames_1.default)('ndl-radio', className, {
         'ndl-disabled': isDisabled,
     });
-    /** TODO: Label handling. We can get rid of this annoying stuff as soon as we do proper form control. */
-    const labelContent = (0, react_1.useMemo)(() => {
-        if (Boolean(label) === false) {
-            return null;
-        }
-        if (typeof label === 'string') {
-            return ((0, jsx_runtime_1.jsx)("span", { title: label, className: "ndl-radio-label-text", children: label }));
-        }
-        return label;
-    }, [label]);
-    (0, react_1.useEffect)(() => {
-        if (Boolean(label) === false && Boolean(ariaLabel) === false) {
-            (0, utils_1.needleWarningMessage)('Radio needs a valid label or ariaLabel: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI');
-        }
-    }, [ariaLabel, label]);
-    return ((0, jsx_runtime_1.jsxs)("label", { className: labelWrappingClasses, children: [hasLeadingLabel === true && labelContent, (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref, type: "radio", "aria-label": ariaLabel, disabled: isDisabled, checked: isCheckedState, onClick: onClick, onChange: internalOnChange, value: value, style: style, className: radioClasses }, restProps, htmlAttributes)), Boolean(hasLeadingLabel) === false && labelContent] }));
+    const { labelContent, fieldClassName } = (0, form_control_1.useInlineFieldLabel)({
+        ariaLabel,
+        componentName: 'Radio',
+        isDisabled,
+        isFluid,
+        // TODO v5: decide whether all selection controls should truncate; today
+        // only Radio does.
+        isTruncated: true,
+        label,
+    });
+    return ((0, jsx_runtime_1.jsxs)("label", { className: fieldClassName, children: [hasLeadingLabel === true && labelContent, (0, jsx_runtime_1.jsx)("input", Object.assign({ ref: ref, type: "radio", "aria-label": ariaLabel, disabled: isDisabled, checked: isCheckedState, onClick: onClick, onChange: internalOnChange, value: value, style: style, className: radioClasses }, restProps, htmlAttributes)), Boolean(hasLeadingLabel) === false && labelContent] }));
 };
 exports.Radio = Radio;
 //# sourceMappingURL=Radio.js.map

package/lib/cjs/radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/radio/Radio.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AACpC,iCAA2C;AAG3C,oFAA8E;AAC9E,4CAAwD;AAgCjD,MAAM,KAAK,GAAG,CAAC,EAgBa,EAAE,EAAE;;QAhBjB,EACpB,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,gBAAgB,EAChB,KAAK,EACL,OAAO,GAAG,KAAK,EACf,SAAS,EACT,eAAe,EACf,QAAQ,EACR,SAAS,EACT,KAAK,EACL,OAAO,EACP,KAAK,EACL,cAAc,EACd,GAAG,OAE8B,EAD9B,SAAS,cAfQ,kLAgBrB,CADa;IAEZ,MAAM,CAAC,cAAc,EAAE,gBAAgB,CAAC,GAAG,IAAA,kDAAsB,EAAC;QAChE,SAAS,EAAE,OAAO;QAClB,YAAY,EAAE,SAAS,KAAK,SAAS;QACrC,QAAQ;QACR,KAAK,EAAE,MAAA,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,gBAAgB,mCAAI,KAAK;KAC9C,CAAC,CAAC;IAEH,MAAM,oBAAoB,GAAG,IAAA,oBAAU,EAAC,iBAAiB,EAAE;QACzD,cAAc,EAAE,UAAU;QAC1B,WAAW,EAAE,OAAO;KACrB,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,IAAA,oBAAU,EAAC,WAAW,EAAE,SAAS,EAAE;QACtD,cAAc,EAAE,UAAU;KAC3B,CAAC,CAAC;IAEH,wGAAwG;IACxG,MAAM,YAAY,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAChC,IAAI,OAAO,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC;YAC7B,OAAO,IAAI,CAAC;QACd,CAAC;QAED,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,OAAO,CACL,iCAAM,KAAK,EAAE,KAAK,EAAE,SAAS,EAAC,sBAAsB,YACjD,KAAK,GACD,CACR,CAAC;QACJ,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,OAAO,CAAC,KAAK,CAAC,KAAK,KAAK,IAAI,OAAO,CAAC,SAAS,CAAC,KAAK,KAAK,EAAE,CAAC;YAC7D,IAAA,4BAAoB,EAClB,4GAA4G,CAC7G,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvB,OAAO,CACL,mCAAO,SAAS,EAAE,oBAAoB,aACnC,eAAe,KAAK,IAAI,IAAI,YAAY,EACzC,gDACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,gBACA,SAAS,EACrB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,YAAY,IACnB,SAAS,EACT,cAAc,EAClB,EACD,OAAO,CAAC,eAAe,CAAC,KAAK,KAAK,IAAI,YAAY,IAC7C,CACT,CAAC;AACJ,CAAC,CAAC;AA7EW,QAAA,KAAK,SA6EhB","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 */\nimport classNames from 'classnames';\nimport { useEffect, useMemo } from 'react';\n\nimport { type CommonProps, type HtmlAttributes } from '../_common/types';\nimport { useSemiControlledInput } from '../_common/use-semi-controlled-input';\nimport { needleWarningMessage } from '../_common/utils';\n\ntype RadioProps = {\n  /** Whether the radio is checked */\n  isChecked?: boolean;\n  /** Selects the radio by default in uncontrolled mode */\n  isDefaultChecked?: boolean;\n  /** Whether the radio is disabled */\n  isDisabled?: boolean;\n  /** Whether the radio & label should take the full available width of its container */\n  isFluid?: boolean;\n  /** Whether the label should be displayed before the radio */\n  hasLeadingLabel?: boolean;\n  /** The callback function triggered when the radio value changes */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  /** The value of the radio */\n  value?: HtmlAttributes<'input'>['value'];\n  /** The callback function triggered when the radio is clicked */\n  onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n} & (\n  | {\n      /** The aria label of the radio. Required if the label is not a string. */\n      ariaLabel: string;\n      /** The label of the radio. If not a string, supply an aria label for screen reader support. */\n      label?: undefined;\n    }\n  | {\n      ariaLabel?: string;\n      label: React.ReactNode;\n    }\n);\n\nexport const Radio = ({\n  ariaLabel,\n  isDisabled = false,\n  isDefaultChecked,\n  label,\n  isFluid = false,\n  isChecked,\n  hasLeadingLabel,\n  onChange,\n  className,\n  style,\n  onClick,\n  value,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'input', RadioProps>) => {\n  const [isCheckedState, internalOnChange] = useSemiControlledInput({\n    inputType: 'radio',\n    isControlled: isChecked !== undefined,\n    onChange,\n    state: isChecked ?? isDefaultChecked ?? false,\n  });\n\n  const labelWrappingClasses = classNames('ndl-radio-label', {\n    'ndl-disabled': isDisabled,\n    'ndl-fluid': isFluid,\n  });\n\n  const radioClasses = classNames('ndl-radio', className, {\n    'ndl-disabled': isDisabled,\n  });\n\n  /** TODO: Label handling. We can get rid of this annoying stuff as soon as we do proper form control. */\n  const labelContent = useMemo(() => {\n    if (Boolean(label) === false) {\n      return null;\n    }\n\n    if (typeof label === 'string') {\n      return (\n        <span title={label} className=\"ndl-radio-label-text\">\n          {label}\n        </span>\n      );\n    }\n    return label;\n  }, [label]);\n\n  useEffect(() => {\n    if (Boolean(label) === false && Boolean(ariaLabel) === false) {\n      needleWarningMessage(\n        'Radio needs a valid label or ariaLabel: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n      );\n    }\n  }, [ariaLabel, label]);\n\n  return (\n    <label className={labelWrappingClasses}>\n      {hasLeadingLabel === true && labelContent}\n      <input\n        ref={ref}\n        type=\"radio\"\n        aria-label={ariaLabel}\n        disabled={isDisabled}\n        checked={isCheckedState}\n        onClick={onClick}\n        onChange={internalOnChange}\n        value={value}\n        style={style}\n        className={radioClasses}\n        {...restProps}\n        {...htmlAttributes}\n      />\n      {Boolean(hasLeadingLabel) === false && labelContent}\n    </label>\n  );\n};\n"]}
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../../src/radio/Radio.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,4DAAoC;AAEpC,0DAA8D;AAE9D,oFAA8E;AAqCvE,MAAM,KAAK,GAAG,CAAC,EAgBa,EAAE,EAAE;;QAhBjB,EACpB,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,gBAAgB,EAChB,KAAK,EACL,OAAO,GAAG,KAAK,EACf,SAAS,EACT,eAAe,EACf,QAAQ,EACR,SAAS,EACT,KAAK,EACL,OAAO,EACP,KAAK,EACL,cAAc,EACd,GAAG,OAE8B,EAD9B,SAAS,cAfQ,kLAgBrB,CADa;IAEZ,MAAM,CAAC,cAAc,EAAE,gBAAgB,CAAC,GAAG,IAAA,kDAAsB,EAAC;QAChE,SAAS,EAAE,OAAO;QAClB,YAAY,EAAE,SAAS,KAAK,SAAS;QACrC,QAAQ;QACR,KAAK,EAAE,MAAA,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,gBAAgB,mCAAI,KAAK;KAC9C,CAAC,CAAC;IAEH,MAAM,YAAY,GAAG,IAAA,oBAAU,EAAC,WAAW,EAAE,SAAS,EAAE;QACtD,cAAc,EAAE,UAAU;KAC3B,CAAC,CAAC;IAEH,MAAM,EAAE,YAAY,EAAE,cAAc,EAAE,GAAG,IAAA,kCAAmB,EAAC;QAC3D,SAAS;QACT,aAAa,EAAE,OAAO;QACtB,UAAU;QACV,OAAO;QACP,wEAAwE;QACxE,mBAAmB;QACnB,WAAW,EAAE,IAAI;QACjB,KAAK;KACN,CAAC,CAAC;IAEH,OAAO,CACL,mCAAO,SAAS,EAAE,cAAc,aAC7B,eAAe,KAAK,IAAI,IAAI,YAAY,EACzC,gDACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,gBACA,SAAS,EACrB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,gBAAgB,EAC1B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,YAAY,IACnB,SAAS,EACT,cAAc,EAClB,EACD,OAAO,CAAC,eAAe,CAAC,KAAK,KAAK,IAAI,YAAY,IAC7C,CACT,CAAC;AACJ,CAAC,CAAC;AA3DW,QAAA,KAAK,SA2DhB","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 */\nimport classNames from 'classnames';\n\nimport { useInlineFieldLabel } from '../_common/form-control';\nimport { type CommonProps, type HtmlAttributes } from '../_common/types';\nimport { useSemiControlledInput } from '../_common/use-semi-controlled-input';\n\ntype RadioProps = {\n  /** Whether the radio is checked */\n  isChecked?: boolean;\n  /** Selects the radio by default in uncontrolled mode */\n  isDefaultChecked?: boolean;\n  /** Whether the radio is disabled */\n  isDisabled?: boolean;\n  /** Whether the radio & label should take the full available width of its container */\n  isFluid?: boolean;\n  /** Whether the label should be displayed before the radio */\n  hasLeadingLabel?: boolean;\n  /** The callback function triggered when the radio value changes */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  /** The value of the radio */\n  value?: HtmlAttributes<'input'>['value'];\n  /** The callback function triggered when the radio is clicked */\n  onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;\n} & (\n  | {\n      /** The aria label of the radio. Required if the label is not a string. */\n      ariaLabel: string;\n      // TODO v5: inconsistent naming. Naming the radio takes a union of `label`\n      // and `ariaLabel`, so the accessible name comes from a different prop\n      // depending on what the label renders. Combobox instead requires the\n      // label and clips it with `hasVisuallyHiddenLabel`, and TextInput reaches\n      // for htmlAttributes['aria-label'].\n      /** The label of the radio. If not a string, supply an aria label for screen reader support. */\n      label?: undefined;\n    }\n  | {\n      ariaLabel?: string;\n      label: React.ReactNode;\n    }\n);\n\nexport const Radio = ({\n  ariaLabel,\n  isDisabled = false,\n  isDefaultChecked,\n  label,\n  isFluid = false,\n  isChecked,\n  hasLeadingLabel,\n  onChange,\n  className,\n  style,\n  onClick,\n  value,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: CommonProps<'input', RadioProps>) => {\n  const [isCheckedState, internalOnChange] = useSemiControlledInput({\n    inputType: 'radio',\n    isControlled: isChecked !== undefined,\n    onChange,\n    state: isChecked ?? isDefaultChecked ?? false,\n  });\n\n  const radioClasses = classNames('ndl-radio', className, {\n    'ndl-disabled': isDisabled,\n  });\n\n  const { labelContent, fieldClassName } = useInlineFieldLabel({\n    ariaLabel,\n    componentName: 'Radio',\n    isDisabled,\n    isFluid,\n    // TODO v5: decide whether all selection controls should truncate; today\n    // only Radio does.\n    isTruncated: true,\n    label,\n  });\n\n  return (\n    <label className={fieldClassName}>\n      {hasLeadingLabel === true && labelContent}\n      <input\n        ref={ref}\n        type=\"radio\"\n        aria-label={ariaLabel}\n        disabled={isDisabled}\n        checked={isCheckedState}\n        onClick={onClick}\n        onChange={internalOnChange}\n        value={value}\n        style={style}\n        className={radioClasses}\n        {...restProps}\n        {...htmlAttributes}\n      />\n      {Boolean(hasLeadingLabel) === false && labelContent}\n    </label>\n  );\n};\n"]}

package/lib/cjs/select/Select.js

@@ -43,10 +43,9 @@ const react_select_1 = __importDefault(require("react-select"));
 const async_1 = __importDefault(require("react-select/async"));
 /** Different types of select components */
 const creatable_1 = __importDefault(require("react-select/creatable"));
+const form_control_1 = require("../_common/form-control");
 const utils_1 = require("../_common/utils");
 const dialog_context_1 = require("../dialog/dialog-context");
-const ExclamationCircleIconSolid_1 = require("../icons/generated/heroIcons/ExclamationCircleIconSolid");
-const typography_1 = require("../typography");
 const Overrides_1 = require("./Overrides");
 /**
  *
@@ -102,8 +101,18 @@ const Select = (_a) => {
     const isInsideDialog = (0, dialog_context_1.useIsInsideDialog)();
     const menuPosition = isInsideDialog ? 'fixed' : 'absolute';
     const identifier = (0, react_1.useId)();
-    const helpTextId = (0, react_1.useId)();
-    const errorTextId = (0, react_1.useId)();
+    // The shared form field resolves the ids and which message is displayed -
+    // an error always replaces the help text. Select has no required support;
+    // it is deprecated in favor of Combobox, which has isRequired and
+    // hasRequiredIndicator.
+    const { field } = (0, form_control_1.useFormField)({
+        controlId: identifier,
+        errorText,
+        helpText,
+        label,
+    });
+    const helpTextId = field.helpTextId;
+    const errorTextId = field.errorTextId;
     const [isMenuOpen, setIsMenuOpen] = (0, react_1.useState)(false);
     const handleMenuOpen = () => {
         setIsMenuOpen(true);
@@ -164,7 +173,7 @@ const Select = (_a) => {
         'ndl-multi': selectProps.isMulti,
         'ndl-small': size === 'small',
     });
-    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: [Boolean(label) && (0, jsx_runtime_1.jsx)("label", { htmlFor: identifier, children: label }), SelectElement, Boolean(helpText) && Boolean(errorText) === false && ((0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: size === 'large' ? 'body-medium' : 'body-small', className: "ndl-sub-text", htmlAttributes: { id: helpTextId }, children: helpText })), Boolean(errorText) && ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-token-4 n-items-center", children: [(0, jsx_runtime_1.jsx)(ExclamationCircleIconSolid_1.ExclamationCircleIconSolid, { className: "ndl-error-icon", htmlAttributes: { role: 'img', type: 'solid' } }), (0, jsx_runtime_1.jsx)("span", { id: errorTextId, className: "ndl-sub-text ndl-error-text", children: errorText })] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ ref: ref, className: classes, style: style }, restProps, htmlAttributes, { children: [Boolean(label) && (0, jsx_runtime_1.jsx)(form_control_1.FormFieldLabel, { field: field, size: size }), SelectElement, (0, jsx_runtime_1.jsx)(form_control_1.FormFieldMessage, { field: field, size: size })] })));
 };
 exports.Select = Select;
 //# sourceMappingURL=Select.js.map