@neo4j-ndl/react 4.20.1 → 4.21.1

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

@@ -13,7 +13,7 @@ Import: `import { Code } from '@neo4j-ndl/react'`
 | `description` | `string` |  |  | The description of the code, will be displayed in a tooltip |
 | `isDisabled` | `boolean` |  | `false` | Whether the code is disabled |
 | `isRunnable` | `boolean` |  | `false` | Whether the code is runnable |
-| `onClick` | `((e: MouseEvent<HTMLElement, MouseEvent> \| KeyboardEvent<HTMLElement>) => void)` |  |  | The callback function triggered when the inline code is clicked |
+| `onClick` | `((event: MouseEvent<HTMLElement, MouseEvent> \| KeyboardEvent<HTMLElement>) => void)` |  |  | The callback function triggered when the inline code is clicked |
 | `ref` | `any` |  |  | A ref to apply to the root element. |
 
 ## Accessibility

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/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

@@ -242,7 +242,7 @@ 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 }));
     },

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. |

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/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. |

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>

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

@@ -250,8 +250,8 @@ const Component = () => {
   const hasError = !isValid;
 
   const handleInputChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const newInputValue = e.target.value;
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const newInputValue = event.target.value;
       setInputValue(newInputValue);
 
       if (isValid) {

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

@@ -12,7 +12,7 @@ Import: `import { Tabs } from '@neo4j-ndl/react'`
 | `children` | `ReactNode` | ✅ |  | The content dislayed in the tabs |
 | `fill` | `'filled' \| 'underline'` |  | `underline` | The fill type of the tabs |
 | `onBackground` | `'default' \| 'weak'` |  | `weak` | What background the Tabs is placed on. This affects the gradient background of the scroll navigation buttons. |
-| `onChange` | `(e: U) => void` | ✅ |  | Callback function triggered when a new tab is selected |
+| `onChange` | `(event: U) => void` | ✅ |  | Callback function triggered when a new tab is selected |
 | `ref` | `any` |  |  | A ref to apply to the root element. |
 | `size` | `'large' \| 'small'` |  | `large` | The size of the tabs |
 | `value` | `string` | ✅ |  | The currently active tabId |

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

@@ -16,8 +16,8 @@ Import: `import { TextButton } 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/text-input.md

@@ -167,7 +167,7 @@ const Component = () => {
       helpText="Help text"
       placeholder="Placeholder"
       value={textValue}
-      onChange={(e) => setTextValue(e.target.value)}
+      onChange={(event) => setTextValue(event.target.value)}
       leadingElement={<UserIconOutline />}
       trailingElement={
         <CleanIconButton
@@ -465,7 +465,7 @@ const Component = () => {
       leadingElement={<DatabasePlugIcon />}
       trailingElement={<DatabasePlusIcon />}
       value={searchValue}
-      onChange={(e) => setSearchValue(e.target.value)}
+      onChange={(event) => setSearchValue(event.target.value)}
       htmlAttributes={{ id: 'text-input' }}
     />
   );