@neo4j-ndl/react 4.22.0 → 4.23.3

package/skills/ndl-react/SKILL.md

@@ -1,5 +1,8 @@
 ---
 name: ndl-react
+metadata:
+  package: '@neo4j-ndl/react'
+  version: '4.23.3'
 description: >-
   Build and edit UI with the Neo4j Needle React design system
   (@neo4j-ndl/react). Use when adding, composing, or modifying Needle components
@@ -8,9 +11,11 @@ description: >-
   Claude, etc.).
 ---
 
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # Neo4j Needle (@neo4j-ndl/react)
 
-> 📌 Shipped with `@neo4j-ndl/react`. Once installed into your repo (e.g. via
+> 📌 Shipped with `@neo4j-ndl/react` v4.23.3. Once installed into your repo (e.g. via
 > `npx skills add`) this folder is detached from the package — the installed
 > package (TypeScript types in `node_modules/@neo4j-ndl/react`) is the source of
 > truth.
@@ -198,7 +203,7 @@ Next-generation components, imported from the `@neo4j-ndl/react/next` subpath. A
 
 | Component | Docs | Accessibility | Examples |
 |-----------|------|---------------|----------|
-| `TreeView` | [components/next/tree-view.md](components/next/tree-view.md) | ✅ | 10 |
+| `TreeView` | [components/next/tree-view.md](components/next/tree-view.md) | ✅ | 11 |
 
 ## AI components
 

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

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

package/skills/ndl-react/components/ai/code-preview.md

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # CodePreview
 
 Import: `import { CodePreview } from '@neo4j-ndl/react/ai'`
@@ -6,6 +8,8 @@ Import: `import { CodePreview } from '@neo4j-ndl/react/ai'`
 
 ### CodePreview
 
+**Deprecated** - Use `<Preview />` with `<Preview.Code />` instead.
+
 | Prop | Type | Required | Default | Description |
 |------|------|----------|---------|-------------|
 | `code` | `string` | ✅ |  | The code content to display |

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

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

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

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

package/skills/ndl-react/components/ai/more-files.md

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

package/skills/ndl-react/components/ai/presence.md

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

package/skills/ndl-react/components/ai/preview.md

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

package/skills/ndl-react/components/ai/prompt.md

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

package/skills/ndl-react/components/ai/reasoning.md

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

package/skills/ndl-react/components/ai/response.md

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

package/skills/ndl-react/components/ai/suggestion.md

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

package/skills/ndl-react/components/ai/thinking.md

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

package/skills/ndl-react/components/ai/tool-call.md

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

package/skills/ndl-react/components/ai/user-bubble.md

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/skills/ndl-react/components/code-block.md

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

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

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

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

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # ColorPicker
 
 Import: `import { ColorPicker } from '@neo4j-ndl/react'`
@@ -36,10 +38,10 @@ import { ColorPicker } from '../ColorPicker';
 
 const Component = () => {
   const [color, setColor] = useState({
-    a: 1,
-    b: 0,
-    g: 0,
-    r: 0,
+    a: 1, // oxlint-disable-line id-length
+    b: 0, // oxlint-disable-line id-length
+    g: 0, // oxlint-disable-line id-length
+    r: 0, // oxlint-disable-line id-length
   });
 
   return (
@@ -62,10 +64,10 @@ import { ColorPicker } from '../ColorPicker';
 
 const Component = () => {
   const [color, setColor] = useState({
-    a: 1,
-    b: 0,
-    g: 0,
-    r: 0,
+    a: 1, // oxlint-disable-line id-length
+    b: 0, // oxlint-disable-line id-length
+    g: 0, // oxlint-disable-line id-length
+    r: 0, // oxlint-disable-line id-length
   });
 
   return (
@@ -74,28 +76,28 @@ const Component = () => {
       onChange={(newColor) => setColor(newColor.rgb)}
       swatches={[
         {
-          a: 1,
-          b: 0,
-          g: 0,
-          r: 0,
+          a: 1, // oxlint-disable-line id-length
+          b: 0, // oxlint-disable-line id-length
+          g: 0, // oxlint-disable-line id-length
+          r: 0, // oxlint-disable-line id-length
         },
         {
-          a: 1,
-          b: 255,
-          g: 0,
-          r: 0,
+          a: 1, // oxlint-disable-line id-length
+          b: 255, // oxlint-disable-line id-length
+          g: 0, // oxlint-disable-line id-length
+          r: 0, // oxlint-disable-line id-length
         },
         {
-          a: 1,
-          b: 0,
-          g: 255,
-          r: 0,
+          a: 1, // oxlint-disable-line id-length
+          b: 0, // oxlint-disable-line id-length
+          g: 255, // oxlint-disable-line id-length
+          r: 0, // oxlint-disable-line id-length
         },
         {
-          a: 1,
-          b: 0,
-          g: 0,
-          r: 255,
+          a: 1, // oxlint-disable-line id-length
+          b: 0, // oxlint-disable-line id-length
+          g: 0, // oxlint-disable-line id-length
+          r: 255, // oxlint-disable-line id-length
         },
       ]}
     />
@@ -119,10 +121,10 @@ const Component = () => {
   const handleClose = () => setIsOpen(false);
 
   const [color, setColor] = useState({
-    a: 1,
-    b: 0,
-    g: 0,
-    r: 0,
+    a: 1, // oxlint-disable-line id-length
+    b: 0, // oxlint-disable-line id-length
+    g: 0, // oxlint-disable-line id-length
+    r: 0, // oxlint-disable-line id-length
   });
 
   return (
@@ -190,10 +192,10 @@ import { ColorPicker } from '../ColorPicker';
 
 const Component = () => {
   const [color, setColor] = useState({
-    a: 1,
-    b: 0,
-    g: 0,
-    r: 0,
+    a: 1, // oxlint-disable-line id-length
+    b: 0, // oxlint-disable-line id-length
+    g: 0, // oxlint-disable-line id-length
+    r: 0, // oxlint-disable-line id-length
   });
 
   return (

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

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # Combobox
 
 Import: `import { Combobox } from '@neo4j-ndl/react'`
@@ -19,7 +21,7 @@ Import: `import { Combobox } from '@neo4j-ndl/react'`
 | `floatingStrategy` | `'absolute' \| 'fixed'` |  |  | Positioning strategy used by Floating UI. |
 | `formatCreateLabel` | `((searchValue: string) => ReactNode)` |  | `` (searchValue: string) =>   `Create "${searchValue}"` `` | Text of the create row. Defaults to `Create "<search value>"`. |
 | `formId` | `string` |  |  | Id of the form the combobox belongs to when it is outside that form. |
-| `hasRequiredIndicator` | `boolean` |  | `false` | Whether Required or Optional is shown at the end of the label row. |
+| `hasRequiredIndicator` | `boolean` |  | `false` | Whether Required or Optional is shown at the end of the label row, based on the `isRequired` prop |
 | `hasVisuallyHiddenLabel` | `boolean` |  | `false` | Whether the label is clipped out of the layout, leaving it to screen readers only. |
 | `helpText` | `ReactNode` |  |  | Assistive text below the control. Replaced by `errorText` while there is an error. |
 | `isClean` | `boolean` |  | `false` | Whether the control hugs its content without a background or resting outline. |
@@ -46,7 +48,7 @@ Import: `import { Combobox } from '@neo4j-ndl/react'`
 | `placeholder` | `string` |  | `Select...` | Text shown in the trigger while nothing is selected. |
 | `portalTarget` | `HTMLElement \| null` |  |  | Portal target element. Defaults to `document.body`. |
 | `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
-| `renderTrigger` | `((triggerProps: ComboboxTriggerProps, state: ComboboxTriggerState<TOption>) => ReactNode)` |  |  | Replaces the built-in trigger. Spread `triggerProps` onto the focusable element that should open the panel; the panel is anchored to it. The root element then lays out as `display: contents`, so the trigger is placed by whatever contains the combobox, and `isFluid`, `isClean`, `size`, `className` and `style` no longer shape it. |
+| `renderTrigger` | `((triggerProps: ComboboxTriggerProps, state: ComboboxTriggerState<TOption>) => ReactNode)` |  |  | Replaces the built-in trigger. Spread `triggerProps` onto the focusable element that should open the panel; the panel is anchored to it. No root element is rendered, so the trigger is a direct child of whatever contains the combobox. `isFluid`, `isClean`, `size`, `className`, `style`, `htmlAttributes` and `ref` are ignored; use `triggerRef` to reach the trigger element. |
 | `searchPlaceholder` | `string` |  | `Search` | Placeholder for the search input, which also names it. |
 | `searchValue` | `string` |  |  | The search value in controlled mode. |
 | `size` | `'large' \| 'medium' \| 'small'` |  | `medium` | Size of the combobox control. |
@@ -99,7 +101,7 @@ The trigger is the form control, so it carries all of the validation ARIA.
 | `isRequired` | `aria-required="true"`                                                  |
 
 - An error replaces the help text, so only one message is ever rendered and only that one is described. Do not put the error in `helpText` as well.
-- The message container is a polite live region that is always in the document, so a validation error is announced when it appears.
+- The message container is an atomic, polite live region that is always in the document, so a validation error is announced in full when it appears. It stays polite so validation on blur or on change never interrupts the screen reader.
 - `hasRequiredIndicator` adds Required or Optional at the end of the label row without changing the accessible name; requiredness is exposed through `aria-required` alone.
 - Without `name`, `isRequired` only marks the trigger with `aria-required`; validation belongs to the form around it.
 - With `name`, `isRequired` also enables native constraint validation. If submission is attempted without a selection, the hidden native control prevents submission, moves focus to the visible trigger, and puts the browser validation message in the existing error live region. An explicit `errorText` takes precedence over that message.

package/skills/ndl-react/components/conditional-wrap.md

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

package/skills/ndl-react/components/data-grid.md

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,3 +1,5 @@
+[//]: # (This file is auto-generated by the docs:generate-skills script, do not edit it manually)
+
 # Dropzone
 
 Import: `import { Dropzone } from '@neo4j-ndl/react'`
@@ -157,11 +159,11 @@ import {
 
 // Configuration constants
 const CONFIG = {
-  MAX_FILES: 3,
+  ACCEPTED_EXTENSIONS: ['.txt', '.json'] as string[],
   MAX_FILE_SIZE: 5 * 1024 * 1024, // 5MB
+  MAX_FILES: 3,
   PROGRESS_INCREMENT: 5,
   UPDATE_INTERVAL: 100,
-  ACCEPTED_EXTENSIONS: ['.txt', '.json'] as string[],
 } as const;
 
 enum UploadState {
@@ -198,9 +200,9 @@ const Component = () => {
   const simulateUpload = useCallback((files: File[]) => {
     setUploadData((prev) => ({
       ...prev,
-      state: UploadState.Uploading,
       files,
       progress: 0,
+      state: UploadState.Uploading,
     }));
 
     const interval = setInterval(() => {
@@ -244,7 +246,7 @@ const Component = () => {
         (file) =>
           `${file.file.name}: ${file.errors.map((error) => error.message).join(', ')}`,
       );
-      setUploadData((prev) => ({ ...prev, state: UploadState.Error, errors }));
+      setUploadData((prev) => ({ ...prev, errors, state: UploadState.Error }));
     },
     [],
   );
@@ -253,8 +255,8 @@ const Component = () => {
     console.error('Dropzone error:', error);
     setUploadData((prev) => ({
       ...prev,
-      state: UploadState.Error,
       errors: [error.message],
+      state: UploadState.Error,
     }));
   }, []);
 

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

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

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

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

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

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

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

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

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

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

package/skills/ndl-react/components/inline-edit.md

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

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

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

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

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

package/skills/ndl-react/components/loading-spinner.md

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

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

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

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

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

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

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