@neo4j-ndl/react 4.22.0 → 4.23.3

package/skills/ndl-react/components/next/tree-view.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # TreeView
 
 Import: `import { TreeView } from '@neo4j-ndl/react/next'`
@@ -82,7 +84,7 @@ Implements the keyboard interactions defined in the [WAI-ARIA TreeView pattern](
 | `Shift + Enter`, `Shift + Space` | Both multiple modes: extends the range from the anchor to the focused item |
 | `Shift + ArrowUp`, `Shift + ArrowDown` | Both multiple modes: moves focus and extends the range to the newly focused item |
 
-The tree uses a roving tabindex strategy: only the currently focused item has `tabIndex={0}`, all other items have `tabIndex={-1}`. When the tree root receives focus it delegates to the previously focused item, or the first item if none was focused.
+The tree uses a roving tabindex strategy: only the currently focused item has `tabIndex={0}`, all other items have `tabIndex={-1}`. When the tree root receives focus it delegates to the previously focused item, or the first item if none was focused. While focus is inside the tree, the root removes itself from the tab order, so the whole tree is a single tab stop: `Tab` and `Shift+Tab` always move focus out of the tree in one press.
 
 The toggle modifier is `Cmd` on Apple platforms and `Ctrl` everywhere else, so `Ctrl` + click keeps its macOS meaning of opening the context menu.
 
@@ -109,7 +111,7 @@ Note that in `multiple-replace` an unmodified `Enter`/`Space` selects exclusivel
 
 ### Announcements
 
-Range selections are announced in a polite live region rendered next to the tree, as `4 items selected`, counting the whole selection rather than the rows the range just moved. A range can move any number of rows at once, so nothing else reports the total. Selections made without `Shift` clear the region instead, since the row they moved already carries its own `aria-selected`/`aria-checked`, and a count left behind would stop describing the tree as soon as the next selection changed it.
+Range selections are announced in a polite live region rendered next to the tree, as `4 items selected`, counting the whole selection rather than the rows the range just moved. A range can move any number of rows at once, so nothing else reports the total. Selections made without `Shift` clear the region instead, since the row they moved already carries its own `aria-selected`/`aria-checked`, and a count left behind would stop describing the tree as soon as the next selection changed it. The message is English and not currently configurable.
 
 ## WAI-ARIA roles and attributes
 
@@ -321,6 +323,87 @@ const Component = () => {
 export default Component;
 ```
 
+### Large
+
+```tsx
+import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
+
+import { DocumentIconOutline, FolderIconSolid } from '@neo4j-ndl/react/icons';
+import { TreeView } from '@neo4j-ndl/react/next';
+import { useState } from 'react';
+
+type FileNode = {
+  children?: FileNode[];
+  id: string;
+  title: string;
+};
+
+const TOP_FOLDER_COUNT = 7;
+const SUBFOLDER_COUNT = 9;
+const FILE_COUNT = 10;
+
+/**
+ * 7 top folders + 63 subfolders + 630 files = 700 items, all expanded so every
+ * row is mounted and visible. Exercises the worst-case performance paths:
+ * arrow-key navigation, Shift ranges, and the multiple-replace edge styling.
+ */
+const files: FileNode[] = Array.from(
+  { length: TOP_FOLDER_COUNT },
+  (_unused, folderIndex) => ({
+    children: Array.from({ length: SUBFOLDER_COUNT }, (_unused, subIndex) => ({
+      children: Array.from({ length: FILE_COUNT }, (_unused, fileIndex) => ({
+        id: `file-${folderIndex}-${subIndex}-${fileIndex}`,
+        title: `file-${folderIndex}-${subIndex}-${fileIndex}.txt`,
+      })),
+      id: `subfolder-${folderIndex}-${subIndex}`,
+      title: `Subfolder ${folderIndex}.${subIndex}`,
+    })),
+    id: `folder-${folderIndex}`,
+    title: `Folder ${folderIndex}`,
+  }),
+);
+
+const Component = () => {
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+
+  const renderNode = (node: FileNode) => (
+    <TreeView.Item
+      key={node.id}
+      id={node.id}
+      title={node.title}
+      defaultExpanded
+      leadingVisual={
+        node.children === undefined ? (
+          <DocumentIconOutline />
+        ) : (
+          <FolderIconSolid />
+        )
+      }
+    >
+      {node.children?.map(renderNode)}
+    </TreeView.Item>
+  );
+
+  return (
+    <>
+      <p style={{ marginBottom: '8px' }}>
+        700 items, {selectedIds.length} selected
+      </p>
+      <TreeView
+        ariaLabel="Large file explorer"
+        selectionMode="multiple-replace"
+        selectedIds={selectedIds}
+        onSelectedIdsChange={setSelectedIds}
+      >
+        {files.map(renderNode)}
+      </TreeView>
+    </>
+  );
+};
+
+export default Component;
+```
+
 ### Lazy
 
 ```tsx
@@ -503,7 +586,12 @@ function renderNode(node: TreeNode, ctx: RenderContext) {
       {hasChildren && state.isLoading && !state.hasLoaded && (
         <TreeView.SkeletonItem rows={2} />
       )}
+      {/* Rendering children only while expanded keeps collapsed subtrees out
+          of the DOM, so large trees only pay for the rows the user can see.
+          All item state lives outside the tree (keyed by node id), so nothing
+          is lost when a subtree unmounts on collapse. */}
       {hasChildren &&
+        state.isExpanded &&
         state.hasLoaded &&
         node.children!.map((child) => renderNode(child, ctx))}
     </TreeView.Item>

package/skills/ndl-react/components/outlined-button.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # OutlinedButton
 
 Import: `import { OutlinedButton } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/popover.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # Popover
 
 Import: `import { Popover } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/progress-bar.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # ProgressBar
 
 Import: `import { ProgressBar } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/radio.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # Radio
 
 Import: `import { Radio } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/read-only-tag.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # ReadOnlyTag
 
 Import: `import { ReadOnlyTag } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/segmented-control.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # SegmentedControl
 
 Import: `import { SegmentedControl } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/select-icon-button.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # SelectIconButton
 
 Import: `import { SelectIconButton } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/select.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # Select
 
 Import: `import { Select } from '@neo4j-ndl/react'`
@@ -6,6 +8,8 @@ Import: `import { Select } from '@neo4j-ndl/react'`
 
 ### Select
 
+**Deprecated** - Use `Combobox` instead. This component will be removed in a future release.
+
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `ariaLabel` | `string` |  |  | Aria label of the select component |

package/skills/ndl-react/components/selectable-tag.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # SelectableTag
 
 Import: `import { SelectableTag } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/side-navigation.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # SideNavigation
 
 Import: `import { SideNavigation } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/skeleton.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # Skeleton
 
 Import: `import { Skeleton } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/slider.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # Slider
 
 Import: `import { Slider } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/spotlight.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # Spotlight
 
 Import: `import { Spotlight } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/status-indicator.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # StatusIndicator
 
 Import: `import { StatusIndicator } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/status-label.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # StatusLabel
 
 Import: `import { StatusLabel } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/switch.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # Switch
 
 Import: `import { Switch } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/tabs.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # Tabs
 
 Import: `import { Tabs } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/tag.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # Tag
 
 Import: `import { Tag } from '@neo4j-ndl/react'`
@@ -6,6 +8,8 @@ Import: `import { Tag } from '@neo4j-ndl/react'`
 
 ### Tag
 
+**Deprecated** - Use `ReadOnlyTag`, `DismissibleTag`, or `SelectableTag` instead. This component will be removed in v5.
+
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `children` | `ReactNode` | ✅ |  | The content of the tag |

package/skills/ndl-react/components/text-area.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # TextArea
 
 Import: `import { TextArea } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/text-button.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # TextButton
 
 Import: `import { TextButton } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/text-input.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # TextInput
 
 Import: `import { TextInput } from '@neo4j-ndl/react'`
@@ -428,16 +430,22 @@ const Component = () => {
       <TextInput
         label="Small Input"
         size="small"
+        placeholder="Small Input"
+        helpText="Help text"
         htmlAttributes={{ id: 'text-input-small' }}
       />
       <TextInput
         label="Medium Input"
         size="medium"
+        placeholder="Medium Input"
+        helpText="Help text"
         htmlAttributes={{ id: 'text-input-medium' }}
       />
       <TextInput
         label="Large Input"
         size="large"
+        placeholder="Large Input"
+        helpText="Help text"
         htmlAttributes={{ id: 'text-input-large' }}
       />
     </div>

package/skills/ndl-react/components/text-link.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # TextLink
 
 Import: `import { TextLink } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/time-picker.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # TimePicker
 
 Import: `import { TimePicker } from '@neo4j-ndl/react'`
@@ -12,6 +14,7 @@ Import: `import { TimePicker } from '@neo4j-ndl/react'`
 | `errorText` | `string` |  |  | Manually set the error text |
 | `floatingStrategy` | `'absolute' \| 'fixed'` |  |  | Strategy for the dropdown floating element. By default it is absolute, but if the component is inside of a needle Dialog, it is set to fixed. If this prop is set, no auto-detection of Dialog is done. |
 | `format` | `'hh:mm aa' \| 'hh:mm:ss aa' \| 'hh:mm:ss' \| 'hh:mm'` |  | `hh:mm` | The format of the time picker |
+| `helpText` | `ReactNode` |  |  | Assistive text displayed below the input. Replaced by `errorText` or an internal validation error while there is one |
 | `isDisabled` | `boolean` |  |  | Whether the time picker is disabled |
 | `isFluid` | `boolean` |  |  | Whether the time picker is fluid |
 | `isPortaled` | `boolean` |  |  | Whether the dropdown element is rendered in a portal. |

package/skills/ndl-react/components/timezone-picker.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # TimeZonePicker
 
 Import: `import { TimeZonePicker } from '@neo4j-ndl/react'`
@@ -10,6 +12,7 @@ Import: `import { TimeZonePicker } from '@neo4j-ndl/react'`
 |------|------|----------|---------|-------------|
 | `errorText` | `string` |  |  | Manually set the error text |
 | `floatingStrategy` | `'absolute' \| 'fixed'` |  |  | Strategy for the dropdown floating element. By default it is absolute, but if the component is inside of a needle Dialog, it is set to fixed. If this prop is set, no auto-detection of Dialog is done. |
+| `helpText` | `ReactNode` |  |  | Assistive text displayed below the input. Replaced by `errorText` or an internal validation error while there is one |
 | `isDisabled` | `boolean` |  |  | Whether the timezone picker is disabled |
 | `isFluid` | `boolean` |  |  | Whether the timezone picker is fluid |
 | `isPortaled` | `boolean` |  |  | Whether the dropdown element is rendered in a portal. |

package/skills/ndl-react/components/tooltip.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # Tooltip
 
 Import: `import { Tooltip } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/tree-view.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # TreeView
 
 Import: `import { TreeView } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/typography.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # Typography
 
 Import: `import { Typography } from '@neo4j-ndl/react'`

package/skills/ndl-react/components/wizard.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # Wizard
 
 Import: `import { Wizard } from '@neo4j-ndl/react'`