@neo4j-ndl/react 4.20.1 → 4.21.1-alpha.b78fc61

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

@@ -36,10 +36,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 +62,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 +74,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 +119,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 +190,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

@@ -1142,7 +1142,7 @@ type Option = {
   value: string;
 };
 
-const options: Option[] = Array.from({ length: 10000 }, (_, index) => ({
+const options: Option[] = Array.from({ length: 10000 }, (_unused, index) => ({
   label: `Node ${index + 1}`,
   value: `node-${index + 1}`,
 }));

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

@@ -162,7 +162,7 @@ _No props documented._
 |------|------|----------|---------|-------------|
 | `action` | `'next' \| 'previous'` | ✅ |  |  |
 | `children` | `ReactNode` |  |  |  |
-| `onClick` | `(e: MouseEvent<HTMLButtonElement, MouseEvent>) => void` |  |  |  |
+| `onClick` | `(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void` |  |  |  |
 | `ref` | `Ref<HTMLButtonElement>` |  |  | A ref to apply to the root element. |
 
 ### DataGrid.PaginationNumericButton
@@ -172,7 +172,7 @@ _No props documented._
 | `children` | `ReactNode` |  |  |  |
 | `currentIndex` | `string \| number` | ✅ |  |  |
 | `isSelected` | `boolean` | ✅ |  |  |
-| `onClick` | `(e: MouseEvent<HTMLButtonElement, MouseEvent>) => void` |  |  |  |
+| `onClick` | `(event: MouseEvent<HTMLButtonElement, MouseEvent>) => void` |  |  |  |
 | `ref` | `Ref<HTMLButtonElement>` |  |  | A ref to apply to the root element. |
 
 ### DataGrid.ResizingBar
@@ -737,7 +737,10 @@ const actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (
 ) => ({
   cell: ({ row }) => {
     const options = ['Edit', 'Delete', 'View'];
-    const dropdownOptions = options.map((o) => ({ label: o, value: o }));
+    const dropdownOptions = options.map((option) => ({
+      label: option,
+      value: option,
+    }));
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [selected, setSelected] = useState(dropdownOptions[0]);
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -754,16 +757,16 @@ const actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (
           selectProps={{
             menuPortalTarget: portalTarget,
             menuPosition: 'fixed',
-            onChange: (e) => {
-              if (!e) {
+            onChange: (event) => {
+              if (!event) {
                 return;
               }
-              setSelected(e);
+              setSelected(event);
             },
-            onKeyDown: (e) => {
+            onKeyDown: (event) => {
               // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell
-              if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-                e.stopPropagation();
+              if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                event.stopPropagation();
               }
             },
             onMenuClose: () => {
@@ -1042,7 +1045,10 @@ const actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (
 ) => ({
   cell: ({ row }) => {
     const options = ['Edit', 'Delete', 'View'];
-    const dropdownOptions = options.map((o) => ({ label: o, value: o }));
+    const dropdownOptions = options.map((option) => ({
+      label: option,
+      value: option,
+    }));
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [selected, setSelected] = useState(dropdownOptions[0]);
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -1069,16 +1075,16 @@ const actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (
           type="select"
           selectProps={{
             menuPortalTarget: portalTarget,
-            onChange: (e) => {
-              if (!e) {
+            onChange: (event) => {
+              if (!event) {
                 return;
               }
-              setSelected(e);
+              setSelected(event);
             },
-            onKeyDown: (e) => {
+            onKeyDown: (event) => {
               // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell
-              if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-                e.stopPropagation();
+              if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+                event.stopPropagation();
               }
             },
             onMenuClose: () => {
@@ -1917,11 +1923,11 @@ type EventRow = {
   event: string;
   /**
    * JS Date coerced from the event's local ISO string. Natively converted to
-   * Unix ms by the engine and compared against { datetime: "..." } literals.
+   * Unix ms by the engine and compared against `{ datetime: "..." }` literals.
    */
   scheduledDate: Date;
   /**
-   * UTC milliseconds since midnight. Compared against { time: "..." } literals
+   * UTC milliseconds since midnight. Compared against `{ time: "..." }` literals
    * that are defined in Stockholm / CEST (+02:00) time — the engine normalises
    * both sides to UTC before comparing.
    */
@@ -2024,8 +2030,8 @@ const data: EventRow[] = [
  *   2026-07-15T00:00:00[Europe/Stockholm] = 2026-07-14T22:00:00Z
  *
  * Business hours (Stockholm):
- *   { time: '09:00:00+02:00' } resolves to 07:00 UTC (25 200 000 ms)
- *   { time: '17:00:00+02:00' } resolves to 15:00 UTC (54 000 000 ms)
+ *   `{ time: '09:00:00+02:00' }` resolves to 07:00 UTC (25 200 000 ms)
+ *   `{ time: '17:00:00+02:00' }` resolves to 15:00 UTC (54 000 000 ms)
  */
 const styleRules: DataGridStyleRule[] = [
   // Near-future date cells use temporal literals directly as gradient
@@ -2170,13 +2176,13 @@ const Component = () => {
     columnHelper.accessor('scheduledTimeMs', {
       cell: (info) => {
         const ms = info.getValue();
-        const h = Math.floor(ms / 3_600_000)
+        const hours = Math.floor(ms / 3_600_000)
           .toString()
           .padStart(2, '0');
-        const m = Math.floor((ms % 3_600_000) / 60_000)
+        const minutes = Math.floor((ms % 3_600_000) / 60_000)
           .toString()
           .padStart(2, '0');
-        return `${h}:${m} UTC`;
+        return `${hours}:${minutes} UTC`;
       },
       header: () => 'Time (UTC)',
       minSize: 110,
@@ -3047,10 +3053,10 @@ type TestDataFormat = {
 
 const TABLE_DEMO_DATA: TestDataFormat[] = Array.from(
   { length: 1000 },
-  (_, i) => ({
+  (_unused, index) => ({
     age: Math.floor(Math.random() * 100),
-    cypherCommand: `MATCH (n) RETURN n LIMIT ${i + 1}`,
-    name: `Person ${i + 1}`,
+    cypherCommand: `MATCH (n) RETURN n LIMIT ${index + 1}`,
+    name: `Person ${index + 1}`,
   }),
 );
 
@@ -3110,8 +3116,9 @@ const BodyCurryingFunction =
     );
   };
 
-/** Repeats array `n` times */
-const repeat = (arr: unknown[], n: number) => Array(n).fill(arr).flat();
+/** Repeats array `repeatCount` times */
+const repeat = (arr: unknown[], repeatCount: number) =>
+  Array(repeatCount).fill(arr).flat();
 
 const columnHelper = createColumnHelper<TestDataFormat>();
 

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

@@ -689,7 +689,7 @@ export const DatePickerWithTimeZoneBothMode = () => {
           padding: '16px',
         }}
       >
-        <Typography variant="label">Selected Values:</Typography>
+        <Typography variant="title-4">Selected Values:</Typography>
         <Typography variant="body-small">
           <strong>Date: </strong>
           {selectedDate?.toISOString() ?? 'None'}

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

@@ -12,7 +12,7 @@ Import: `import { Dialog } from '@neo4j-ndl/react'`
 | `container` | `Element` |  |  | The container where the modal will be rendered. |
 | `hasDisabledCloseButton` | `boolean` |  | `false` | Whether to disable the close button in the top-right corner. |
 | `isOpen` | `boolean` | ✅ |  | Controls whether the dialog is open or closed. |
-| `onClose` | `((e: MouseEvent<HTMLElement, MouseEvent> \| KeyboardEvent<HTMLElement>, reason?: DialogCloseReason) => void)` |  |  | Callback function called when the dialog is closed. |
+| `onClose` | `((event: MouseEvent<HTMLElement, MouseEvent> \| KeyboardEvent<HTMLElement>, reason?: DialogCloseReason) => void)` |  |  | Callback function called when the dialog is closed. |
 | `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
 | `rootProps` | `HtmlAttributes<"div">` |  |  | Forwards the props to the modal container's wrapper - use with caution |
 | `size` | `'large' \| 'medium' \| 'small' \| 'unset'` |  |  | Sets the size(max-width) of the Modal, use 'unset' for custom sizing. |

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

@@ -19,7 +19,7 @@ Import: `import { Drawer } from '@neo4j-ndl/react'`
 | `isPortaled` | `boolean` |  | `false` | Whether to portal the content. Only applies when type is "overlay". Type "modal" is always portaled. |
 | `isResizeable` | `boolean` |  | `false` | Enables horizontal resizing of the drawer, by default it is not resizable. |
 | `onExpandedChange` | `((expanded: boolean) => void)` |  |  | Callback fired when the drawer's expanded state changes (close button, Escape, click outside, or programmatic change). |
-| `portalProps` | `FloatingPortalProps` |  | `{}` | Props to pass to the portal from @floating-ui /react FloatingPortal Only applies when type is "overlay" and isPortaled is true, or if type is "modal". @see https://floating-ui.com/docs/floatingportal |
+| `portalProps` | `FloatingPortalProps` |  | `{}` | Props to pass to the portal from `@floating-ui/react` FloatingPortal Only applies when type is "overlay" and isPortaled is true, or if type is "modal". @see https://floating-ui.com/docs/floatingportal |
 | `position` | `'left' \| 'right'` |  | `left` | Position where the drawer appears on screen. By default, it appears from the left. |
 | `ref` | `any` |  |  | A ref to apply to the root element. |
 | `resizeableProps` | `ResizableProps` |  |  | To use this prop the isResizeable prop must be set to true. For overriding the third party library props: https://github.com/bokuweb/re-resizable The property enable has default values set for bottom, bottomLeft etc based on the position prop. |

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

@@ -16,7 +16,7 @@ Import: `import { DropdownButton } from '@neo4j-ndl/react'`
 | `isOpen` | `boolean` |  | `false` | If the dropdown is activated |
 | `leadingElement` | `ReactNode` |  |  | Element that is shown before the button content |
 | `loadingMessage` | `string` |  | `Loading` | Accessible message for screen readers when the button is in a loading state |
-| `onClick` | `((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void)` |  |  | Callback function to be called when the button is clicked |
+| `onClick` | `((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)` |  |  | Callback function to be called when the button is clicked |
 | `ref` | `any` |  |  | A ref to apply to the root element. |
 | `size` | `'large' \| 'medium' \| 'small'` |  | `medium` | Size of button |
 

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

@@ -157,11 +157,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 +198,9 @@ const Component = () => {
   const simulateUpload = useCallback((files: File[]) => {
     setUploadData((prev) => ({
       ...prev,
-      state: UploadState.Uploading,
       files,
       progress: 0,
+      state: UploadState.Uploading,
     }));
 
     const interval = setInterval(() => {
@@ -242,9 +242,9 @@ const Component = () => {
     (rejectedFiles: FileRejection[]) => {
       const errors = rejectedFiles.map(
         (file) =>
-          `${file.file.name}: ${file.errors.map((e) => e.message).join(', ')}`,
+          `${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 +253,8 @@ const Component = () => {
     console.error('Dropzone error:', error);
     setUploadData((prev) => ({
       ...prev,
-      state: UploadState.Error,
       errors: [error.message],
+      state: UploadState.Error,
     }));
   }, []);
 
@@ -296,7 +296,7 @@ const Component = () => {
               {errors.map((message, index) => (
                 <Typography
                   key={index}
-                  variant="label"
+                  variant="title-4"
                   className="n-text-danger-text n-font-semibold"
                   htmlAttributes={{ role: 'alert' }}
                 >

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

@@ -17,8 +17,8 @@ Import: `import { FilledButton } from '@neo4j-ndl/react'`
 | `isLoading` | `boolean` |  | `false` | If the button is doing something Async, it will display a loading spinner |
 | `leadingVisual` | `ReactNode` |  |  | Icon to display before the button content |
 | `loadingMessage` | `string` |  |  | Accessible message for screen readers when the button is in a loading state |
-| `onClick` | `((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void)` |  |  | onClick callback |
-| `onKeyDown` | `((e: KeyboardEvent<HTMLButtonElement>) => void)` |  |  | onKeyDown callback |
+| `onClick` | `((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)` |  |  | onClick callback |
+| `onKeyDown` | `((event: KeyboardEvent<HTMLButtonElement>) => void)` |  |  | onKeyDown callback |
 | `ref` | `any` |  |  | A ref to apply to the root element. |
 | `size` | `'large' \| 'medium' \| 'small'` |  | `medium` | Size of button |
 | `target` | `HTMLAttributeAnchorTarget` |  |  | The target window for the link. Only applies when `as="a"`. Not present or required for other element types. |

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

@@ -67,9 +67,9 @@ const component = () => (
       padding: tokens.space['12'],
     }}
   >
-    {Array.from({ length: 3 }).map((_, i) => (
+    {Array.from({ length: 3 }).map((_unused, index) => (
       <Box
-        key={`box-${i}`}
+        key={`box-${index}`}
         borderRadius="xl"
         style={{ height: '80px', minWidth: '240px' }}
         className="n-bg-primary-bg-weak n-border n-border-primary-border-strong"

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

@@ -17,7 +17,7 @@ Import: `import { IconButton } from '@neo4j-ndl/react'`
 | `isFloating` | `boolean` |  | `false` | If the button is in floating state |
 | `isLoading` | `boolean` |  | `false` | If the button is doing something Async, it will display a loading spinner |
 | `loadingMessage` | `string` |  |  | Accessible message for screen readers when the button is in a loading state |
-| `onClick` | `((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void)` |  |  | Click handler |
+| `onClick` | `((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)` |  |  | Click handler |
 | `ref` | `any` |  |  | A ref to apply to the root element. |
 | `size` | `'large' \| 'medium' \| 'small'` |  | `medium` | Size of button |
 | `tooltipProps` | `TooltipObjectProps` |  |  | Props for the tooltip component. |
@@ -141,19 +141,19 @@ const Component = () => {
         <IconButton description="Search" size="small">
           <MagnifyingGlassIconOutline />
         </IconButton>
-        <Typography variant="label"> Small</Typography>
+        <Typography variant="title-4"> Small</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <IconButton description="Search" size="medium">
           <MagnifyingGlassIconOutline />
         </IconButton>
-        <Typography variant="label"> Medium</Typography>
+        <Typography variant="title-4"> Medium</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <IconButton description="Search" size="large">
           <MagnifyingGlassIconOutline />
         </IconButton>
-        <Typography variant="label"> Large</Typography>
+        <Typography variant="title-4"> Large</Typography>
       </div>
     </div>
   );
@@ -177,13 +177,13 @@ const Component = () => {
         <IconButton description="Search" variant="neutral">
           <MagnifyingGlassIconOutline />
         </IconButton>
-        <Typography variant="label">Default</Typography>
+        <Typography variant="title-4">Default</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <IconButton description="Search" variant="danger">
           <MagnifyingGlassIconOutline />
         </IconButton>
-        <Typography variant="label">Danger</Typography>
+        <Typography variant="title-4">Danger</Typography>
       </div>
     </div>
   );

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

@@ -11,7 +11,7 @@ Import: `import { Modal } from '@neo4j-ndl/react'`
 | `children` | `ReactNode` | ✅ |  | Content to render inside the Modal. |
 | `container` | `Element` |  |  | The container where the modal will be rendered. |
 | `isOpen` | `boolean` | ✅ |  | Whether the Modal is open. |
-| `onClose` | `((e: MouseEvent<HTMLElement, MouseEvent> \| KeyboardEvent<HTMLElement>, reason?: ModalCloseReason) => void)` |  |  | Callback function called when the modal is closed. |
+| `onClose` | `((event: MouseEvent<HTMLElement, MouseEvent> \| KeyboardEvent<HTMLElement>, reason?: ModalCloseReason) => void)` |  |  | Callback function called when the modal is closed. |
 | `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
 | `rootProps` | `HtmlAttributes<"div">` |  |  | Forwards the props to the modal container's wrapper - use with caution |
 | `size` | `'large' \| 'medium' \| 'small' \| 'unset'` |  | `medium` | Sets the size(max-width) of the Modal, use 'unset' for custom sizing. |

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

@@ -396,8 +396,8 @@ function useTreeState() {
           clearTimeout(timers.current[id]);
         }
         timers.current[id] = setTimeout(() => {
-          setNodeStates((p) => ({
-            ...p,
+          setNodeStates((prev) => ({
+            ...prev,
             [id]: { hasLoaded: true, isExpanded: true, isLoading: false },
           }));
           delete timers.current[id];
@@ -500,11 +500,11 @@ function getParentChecked(
   checked: CheckedState,
   childKeys: readonly string[],
 ): { isChecked: boolean; isIndeterminate: boolean } {
-  const enabledKeys = childKeys.filter((k) => !DISABLED_KEYS.has(k));
+  const enabledKeys = childKeys.filter((key) => !DISABLED_KEYS.has(key));
   if (enabledKeys.length === 0) {
     return { isChecked: false, isIndeterminate: false };
   }
-  const checkedCount = enabledKeys.filter((k) => checked[k]).length;
+  const checkedCount = enabledKeys.filter((key) => checked[key]).length;
   if (checkedCount === 0) {
     return { isChecked: false, isIndeterminate: false };
   }
@@ -527,12 +527,12 @@ const Component = () => {
 
   const toggleParent = useCallback(
     (childKeys: readonly string[]) => {
-      const enabledKeys = childKeys.filter((k) => !DISABLED_KEYS.has(k));
-      const isAllChecked = enabledKeys.every((k) => checked[k]);
+      const enabledKeys = childKeys.filter((key) => !DISABLED_KEYS.has(key));
+      const isAllChecked = enabledKeys.every((key) => checked[key]);
       setChecked((prev) => {
         const next = { ...prev };
-        for (const k of enabledKeys) {
-          next[k] = !isAllChecked;
+        for (const key of enabledKeys) {
+          next[key] = !isAllChecked;
         }
         return next;
       });

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

@@ -17,8 +17,8 @@ Import: `import { OutlinedButton } from '@neo4j-ndl/react'`
 | `isLoading` | `boolean` |  | `false` | If the button is doing something Async, it will display a loading spinner |
 | `leadingVisual` | `ReactNode` |  |  | Icon to display before the button content |
 | `loadingMessage` | `string` |  |  | Accessible message for screen readers when the button is in a loading state |
-| `onClick` | `((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void)` |  |  | onClick callback |
-| `onKeyDown` | `((e: KeyboardEvent<HTMLButtonElement>) => void)` |  |  | onKeyDown callback |
+| `onClick` | `((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)` |  |  | onClick callback |
+| `onKeyDown` | `((event: KeyboardEvent<HTMLButtonElement>) => void)` |  |  | onKeyDown callback |
 | `ref` | `any` |  |  | A ref to apply to the root element. |
 | `size` | `'large' \| 'medium' \| 'small'` |  | `medium` | Size of button |
 | `target` | `HTMLAttributeAnchorTarget` |  |  | The target window for the link. Only applies when `as="a"`. Not present or required for other element types. |

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

@@ -176,9 +176,9 @@ const Component = () => {
         label="Example positions"
         selectProps={{
           defaultValue: offsetOptions[0],
-          onChange: (e) => {
-            if (e) {
-              setSelectedPosition(e.value);
+          onChange: (option) => {
+            if (option) {
+              setSelectedPosition(option.value);
             }
           },
           options: offsetOptions,

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

@@ -75,7 +75,7 @@ import { Radio, Typography } from '@neo4j-ndl/react';
 const Component = () => {
   return (
     <Radio
-      label={<Typography variant="label">Custom label</Typography>}
+      label={<Typography variant="title-4">Custom label</Typography>}
       ariaLabel="example aria label"
     />
   );

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

@@ -12,7 +12,7 @@ Import: `import { SegmentedControl } from '@neo4j-ndl/react'`
 | `children` | `ReactNode` | ✅ |  | The children component of the segmented control |
 | `hasOnlyIcons` | `boolean` |  | `false` | If segmented control items will include only icons (makes controls rectangular) |
 | `isFloating` | `boolean` |  | `false` | Whether the segmented control has a box shadow applied |
-| `onChange` | `(e: T) => void \| ((e: SetStateAction<T>) => void)` | ✅ |  | The callback function triggered when the segmented control value changes |
+| `onChange` | `(event: T) => void \| ((event: SetStateAction<T>) => void)` | ✅ |  | The callback function triggered when the segmented control value changes |
 | `ref` | `any` |  |  | A ref to apply to the root element. |
 | `selected` | `SegmentedControlID` | ✅ |  | The currently selected option |
 | `size` | `'large' \| 'medium' \| 'small'` |  | `medium` | Size of the segmented control |

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

@@ -14,7 +14,7 @@ Import: `import { SelectIconButton } from '@neo4j-ndl/react'`
 | `isLoading` | `boolean` |  | `false` | If the button is doing something Async, it will display a loading spinner |
 | `isOpen` | `boolean` |  | `false` | If the button is opened |
 | `loadingMessage` | `string` |  | `Loading` | Accessible message for screen readers when the button is in a loading state |
-| `onClick` | `((e: MouseEvent<HTMLButtonElement, MouseEvent>) => void)` |  |  | Callback function to be called when the button is clicked |
+| `onClick` | `((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void)` |  |  | Callback function to be called when the button is clicked |
 | `ref` | `Ref<HTMLButtonElement>` |  |  | A ref to apply to the root element. |
 | `size` | `'large' \| 'medium' \| 'small'` |  | `medium` | Size of button |
 | `tooltipProps` | `TooltipObjectProps` |  |  | Props for the tooltip component. |
@@ -55,19 +55,19 @@ const Component = () => {
         <SelectIconButton description="Select" size="small" isOpen={false}>
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="label"> Small</Typography>
+        <Typography variant="title-4"> Small</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <SelectIconButton description="Select" size="medium" isOpen={false}>
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="label"> Medium</Typography>
+        <Typography variant="title-4"> Medium</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <SelectIconButton description="Select" size="large" isOpen={false}>
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="label"> Large</Typography>
+        <Typography variant="title-4"> Large</Typography>
       </div>
     </div>
   );
@@ -96,13 +96,13 @@ const Component = () => {
         >
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="label"> Disabled</Typography>
+        <Typography variant="title-4"> Disabled</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <SelectIconButton description="Select" size="small" isOpen={true}>
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="label"> Active</Typography>
+        <Typography variant="title-4"> Active</Typography>
       </div>
       <div className="n-flex n-flex-row n-gap-token-16 n-items-center">
         <SelectIconButton
@@ -114,7 +114,7 @@ const Component = () => {
         >
           <SelectIcon />
         </SelectIconButton>
-        <Typography variant="label"> Loading</Typography>
+        <Typography variant="title-4"> Loading</Typography>
       </div>
     </div>
   );

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

@@ -83,7 +83,7 @@ const Component = () => {
         size="x-small"
         isSelected={selected['x-small'] ?? false}
         onClick={() =>
-          setSelected((s) => ({ ...s, ['x-small']: !s['x-small'] }))
+          setSelected((prev) => ({ ...prev, ['x-small']: !prev['x-small'] }))
         }
       >
         X-Small
@@ -91,21 +91,27 @@ const Component = () => {
       <SelectableTag
         size="small"
         isSelected={selected['small'] ?? false}
-        onClick={() => setSelected((s) => ({ ...s, ['small']: !s['small'] }))}
+        onClick={() =>
+          setSelected((prev) => ({ ...prev, ['small']: !prev['small'] }))
+        }
       >
         Small
       </SelectableTag>
       <SelectableTag
         size="medium"
         isSelected={selected['medium'] ?? false}
-        onClick={() => setSelected((s) => ({ ...s, ['medium']: !s['medium'] }))}
+        onClick={() =>
+          setSelected((prev) => ({ ...prev, ['medium']: !prev['medium'] }))
+        }
       >
         Medium
       </SelectableTag>
       <SelectableTag
         size="large"
         isSelected={selected['large'] ?? false}
-        onClick={() => setSelected((s) => ({ ...s, ['large']: !s['large'] }))}
+        onClick={() =>
+          setSelected((prev) => ({ ...prev, ['large']: !prev['large'] }))
+        }
       >
         Large
       </SelectableTag>