@neo4j-ndl/react 4.22.1 → 4.23.4

package/lib/cjs/data-grid/stories/datagrid-in-dialog.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-in-dialog.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-in-dialog.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  DataGrid,\n  type DataGridNav,\n  Dialog,\n  FilledButton,\n  Select,\n  useDataGridContext,\n} from '@neo4j-ndl/react';\nimport {\n  type ColumnDef,\n  type ColumnMeta,\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { useRef, useState } from 'react';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (\n  tableNav,\n) => ({\n  cell: ({ row }) => {\n    const options = ['Edit', 'Delete', 'View'];\n    const dropdownOptions = options.map((option) => ({\n      label: option,\n      value: option,\n    }));\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [selected, setSelected] = useState(dropdownOptions[0]);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const { portalTarget } = useDataGridContext();\n\n    return (\n      <div\n        data-testid={`ndl-actions-cell-row-${row.index}`}\n        className=\"n-flex n-flex-row n-gap-token-8\"\n      >\n        <Select\n          ariaLabel={`actions-select-row-${row.index}`}\n          type=\"select\"\n          selectProps={{\n            menuPortalTarget: portalTarget,\n            menuPosition: 'fixed',\n            onChange: (event) => {\n              if (!event) {\n                return;\n              }\n              setSelected(event);\n            },\n            onKeyDown: (event) => {\n              // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell\n              if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n                event.stopPropagation();\n              }\n            },\n            onMenuClose: () => {\n              console.info(\n                'Start listening to keyboard events for table navigation',\n              );\n              tableNav.enable();\n            },\n            onMenuOpen: () => {\n              console.info(\n                'Stop listening to keyboard events for table navigation',\n              );\n              tableNav.disable();\n            },\n            options: dropdownOptions,\n            value: selected,\n          }}\n        />\n      </div>\n    );\n  },\n  header: 'Custom Select',\n  id: 'custom-select',\n  minSize: 150,\n});\n\nconst Component = () => {\n  const [data, setData] = useState(TABLE_DEMO_DATA);\n  const [isAgeFilterApplied, setIsAgeFilterApplied] = useState(false);\n\n  const ColumnActions: ColumnMeta<TestDataFormat, unknown> = {\n    columnActions: {\n      actions: [\n        {\n          onClick: () => {\n            if (isAgeFilterApplied) {\n              setData(TABLE_DEMO_DATA);\n              setIsAgeFilterApplied(false);\n              return;\n            } else {\n              const filteredData = data.filter((item) => item.age >= 18);\n              setData(filteredData);\n              setIsAgeFilterApplied(true);\n            }\n          },\n          title: 'Age >= 18',\n        },\n      ],\n    },\n  };\n\n  const regularColumns = [\n    columnHelper.accessor('name', {\n      cell: (cell) => (\n        <DataGrid.InlineEditCell\n          cell={cell}\n          value={cell.getValue()}\n          ariaLabel=\"edit name\"\n        />\n      ),\n      maxSize: 300,\n      meta: {\n        isInlineEditCell: {\n          onEditChange: (newValue, cell) => {\n            setData((oldData) => {\n              return oldData.map((row) => {\n                if (row.name === cell.row.original.name) {\n                  return {\n                    ...row,\n                    name: newValue,\n                  };\n                }\n                return row;\n              });\n            });\n          },\n        },\n      },\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => {\n        return (\n          <DataGrid.DropDownCell\n            cell={info}\n            options={[\n              {\n                label: '12',\n                value: '12',\n              },\n              {\n                label: '32',\n                value: '32',\n              },\n              {\n                label: '37',\n                value: '37',\n              },\n              {\n                label: '39',\n                value: '39',\n              },\n              {\n                label: '51',\n                value: '51',\n              },\n            ]}\n            ariaLabel=\"select age\"\n            portalTarget={document.getElementById('default-menu')}\n          />\n        );\n      },\n      meta: {\n        isDropDownCell: {\n          onChange: (newValue, cell) => {\n            if (newValue === undefined) {\n              // No change\n              return;\n            }\n\n            const parsedValue = parseInt(newValue, 10);\n\n            if (isNaN(parsedValue)) {\n              return;\n            }\n\n            setData((oldData) => {\n              return oldData.map((row) => {\n                if (row.name === cell.row.original.name) {\n                  return {\n                    ...row,\n                    age: parsedValue,\n                  };\n                }\n                return row;\n              });\n            });\n          },\n        },\n        ...ColumnActions,\n      },\n      minSize: 120,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const allColumns = (tableNav: DataGridNav) => [\n    ...regularColumns,\n    actionsColumn(tableNav),\n  ];\n\n  const tableNavRef = useRef<DataGridNav>(null!);\n  const table = useReactTable({\n    autoResetPageIndex: false,\n    columnResizeMode: 'onChange',\n    columns: allColumns(tableNavRef.current),\n    data: data,\n    debugColumns: true,\n    debugHeaders: true,\n    debugTable: true,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n  });\n\n  // Modal code\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const handleClick = () => setIsOpen((prev) => !prev);\n  const handleClose = () => setIsOpen(false);\n\n  // DataGrid code\n  return (\n    <div className=\"n-w-full\">\n      <div className=\"n-flex n-justify-center\">\n        <FilledButton onClick={handleClick}>Open Dialog</FilledButton>\n      </div>\n      <Dialog\n        className=\"n-p-token-8 n-bg-neutral-10 n-max-w-max n-rounded-lg\"\n        htmlAttributes={{\n          id: 'default-menu',\n        }}\n        onClose={handleClose}\n        isOpen={isOpen}\n        hasDisabledCloseButton={true}\n      >\n        <Dialog.Content>\n          <DataGrid\n            portalTarget={document.getElementById('default-menu')}\n            isResizable={true}\n            tableInstance={table}\n            tableNavRef={tableNavRef}\n            isKeyboardNavigable={true}\n            styling={{\n              borderStyle: 'horizontal',\n              hasZebraStriping: false,\n            }}\n          />\n        </Dialog.Content>\n      </Dialog>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"datagrid-in-dialog.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-in-dialog.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  DataGrid,\n  type DataGridNav,\n  Dialog,\n  FilledButton,\n  Select,\n  useDataGridContext,\n} from '@neo4j-ndl/react';\nimport {\n  type ColumnDef,\n  type ColumnMeta,\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { useRef, useState } from 'react';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (\n  tableNav,\n) => ({\n  cell: ({ row }) => {\n    const options = ['Edit', 'Delete', 'View'];\n    const dropdownOptions = options.map((option) => ({\n      label: option,\n      value: option,\n    }));\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [selected, setSelected] = useState(dropdownOptions[0]);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const { portalTarget } = useDataGridContext();\n\n    return (\n      <div\n        data-testid={`ndl-actions-cell-row-${row.index}`}\n        className=\"n-flex n-flex-row n-gap-token-8\"\n      >\n        <Select\n          ariaLabel={`actions-select-row-${row.index}`}\n          type=\"select\"\n          selectProps={{\n            menuPortalTarget: portalTarget,\n            menuPosition: 'fixed',\n            onChange: (event) => {\n              if (!event) {\n                return;\n              }\n              setSelected(event);\n            },\n            onKeyDown: (event) => {\n              // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell\n              if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n                event.stopPropagation();\n              }\n            },\n            onMenuClose: () => {\n              console.info(\n                'Start listening to keyboard events for table navigation',\n              );\n              tableNav.enable();\n            },\n            onMenuOpen: () => {\n              console.info(\n                'Stop listening to keyboard events for table navigation',\n              );\n              tableNav.disable();\n            },\n            options: dropdownOptions,\n            value: selected,\n          }}\n        />\n      </div>\n    );\n  },\n  header: 'Custom Select',\n  id: 'custom-select',\n  minSize: 150,\n});\n\nconst Component = () => {\n  const [data, setData] = useState(TABLE_DEMO_DATA);\n  const [isAgeFilterApplied, setIsAgeFilterApplied] = useState(false);\n\n  const ColumnActions: ColumnMeta<TestDataFormat, unknown> = {\n    columnActions: {\n      actions: [\n        {\n          onClick: () => {\n            if (isAgeFilterApplied) {\n              setData(TABLE_DEMO_DATA);\n              setIsAgeFilterApplied(false);\n              return;\n            } else {\n              const filteredData = data.filter((item) => item.age >= 18);\n              setData(filteredData);\n              setIsAgeFilterApplied(true);\n            }\n          },\n          title: 'Age >= 18',\n        },\n      ],\n    },\n  };\n\n  const regularColumns = [\n    columnHelper.accessor('name', {\n      cell: (cell) => (\n        <DataGrid.InlineEditCell\n          cell={cell}\n          value={cell.getValue()}\n          ariaLabel=\"edit name\"\n        />\n      ),\n      maxSize: 300,\n      meta: {\n        isInlineEditCell: {\n          onEditChange: (newValue, cell) => {\n            setData((oldData) => {\n              return oldData.map((row) => {\n                if (row.name === cell.row.original.name) {\n                  return {\n                    ...row,\n                    name: newValue,\n                  };\n                }\n                return row;\n              });\n            });\n          },\n        },\n      },\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => {\n        return (\n          <DataGrid.DropDownCell\n            cell={info}\n            options={[\n              {\n                label: '12',\n                value: '12',\n              },\n              {\n                label: '32',\n                value: '32',\n              },\n              {\n                label: '37',\n                value: '37',\n              },\n              {\n                label: '39',\n                value: '39',\n              },\n              {\n                label: '51',\n                value: '51',\n              },\n            ]}\n            ariaLabel=\"select age\"\n            portalTarget={document.getElementById('default-menu')}\n          />\n        );\n      },\n      meta: {\n        isDropDownCell: {\n          onChange: (newValue, cell) => {\n            if (newValue === undefined) {\n              // No change\n              return;\n            }\n\n            const parsedValue = parseInt(newValue, 10);\n\n            if (isNaN(parsedValue)) {\n              return;\n            }\n\n            setData((oldData) => {\n              return oldData.map((row) => {\n                if (row.name === cell.row.original.name) {\n                  return {\n                    ...row,\n                    age: parsedValue,\n                  };\n                }\n                return row;\n              });\n            });\n          },\n        },\n        ...ColumnActions,\n      },\n      minSize: 120,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const allColumns = (tableNav: DataGridNav) => [\n    ...regularColumns,\n    actionsColumn(tableNav),\n  ];\n\n  const tableNavRef = useRef<DataGridNav>(null!);\n  const table = useReactTable({\n    autoResetPageIndex: false,\n    columnResizeMode: 'onChange',\n    columns: allColumns(tableNavRef.current),\n    data: data,\n    debugColumns: true,\n    debugHeaders: true,\n    debugTable: true,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n  });\n\n  // Modal code\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const handleClick = () => setIsOpen((prev) => !prev);\n  const handleClose = () => setIsOpen(false);\n\n  // DataGrid code\n  return (\n    <div className=\"n-w-full\">\n      <div className=\"n-flex n-justify-center\">\n        <FilledButton onClick={handleClick}>Open Dialog</FilledButton>\n      </div>\n      <Dialog\n        className=\"n-p-token-8 n-bg-neutral-10 n-max-w-max n-rounded-lg\"\n        htmlAttributes={{\n          id: 'default-menu',\n        }}\n        onClose={handleClose}\n        isOpen={isOpen}\n        hasDisabledCloseButton={true}\n      >\n        <Dialog.Content>\n          <DataGrid\n            portalTarget={document.getElementById('default-menu')}\n            isResizable={true}\n            tableInstance={table}\n            tableNavRef={tableNavRef}\n            isKeyboardNavigable={true}\n            styling={{\n              borderStyle: 'horizontal',\n              hasZebraStriping: false,\n            }}\n          />\n        </Dialog.Content>\n      </Dialog>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/data-grid/stories/datagrid-keyboard-navigation.story.js

@@ -1,7 +1,7 @@
 "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]

package/lib/cjs/data-grid/stories/datagrid-keyboard-navigation.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-keyboard-navigation.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-keyboard-navigation.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  Checkbox,\n  DataGrid,\n  type DataGridNav,\n  IconButton,\n  Select,\n  useDataGridContext,\n} from '@neo4j-ndl/react';\nimport { MegaphoneIconOutline } from '@neo4j-ndl/react/icons';\nimport {\n  type ColumnDef,\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { useRef, useState } from 'react';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst selectableColumn: ColumnDef<TestDataFormat> = {\n  cell: ({ row }) => (\n    <Checkbox\n      ariaLabel={`row-${row.index}`}\n      isChecked={row.getIsSelected() || false}\n      onChange={row.getToggleSelectedHandler()}\n    />\n  ),\n  header: ({ table }) => (\n    <Checkbox\n      ariaLabel=\"Select all rows\"\n      isChecked={table.getIsAllRowsSelected() || false}\n      onChange={table.getToggleAllRowsSelectedHandler()}\n      isIndeterminate={table.getIsSomeRowsSelected()}\n    />\n  ),\n  id: 'select',\n  maxSize: 80,\n  size: 80,\n};\n\nconst actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (\n  tableNav,\n) => ({\n  cell: ({ row }) => {\n    const options = ['Edit', 'Delete', 'View'];\n    const dropdownOptions = options.map((option) => ({\n      label: option,\n      value: option,\n    }));\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [selected, setSelected] = useState(dropdownOptions[0]);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const { portalTarget } = useDataGridContext();\n\n    return (\n      <div\n        data-testid={`ndl-actions-cell-row-${row.index}`}\n        className=\"n-flex n-flex-row n-gap-token-8\"\n      >\n        <IconButton\n          description=\"Megaphone\"\n          onClick={() => {\n            alert(\"Let's get loud 📣\");\n          }}\n          htmlAttributes={{\n            type: 'button',\n          }}\n        >\n          <MegaphoneIconOutline />\n        </IconButton>\n        <Select\n          ariaLabel={`actions-select-row-${row.index}`}\n          type=\"select\"\n          selectProps={{\n            menuPortalTarget: portalTarget,\n            onChange: (event) => {\n              if (!event) {\n                return;\n              }\n              setSelected(event);\n            },\n            onKeyDown: (event) => {\n              // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell\n              if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n                event.stopPropagation();\n              }\n            },\n            onMenuClose: () => {\n              console.info(\n                'Start listening to keyboard events for table navigation',\n              );\n              tableNav.enable();\n            },\n            onMenuOpen: () => {\n              console.info(\n                'Stop listening to keyboard events for table navigation',\n              );\n              tableNav.disable();\n            },\n            options: dropdownOptions,\n            value: selected,\n          }}\n        />\n      </div>\n    );\n  },\n  header: 'actions',\n  id: 'actions',\n});\n\nconst allColumns = (tableNav: DataGridNav) => {\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const commonColumns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Name',\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Age',\n      minSize: 80,\n    }),\n  ];\n\n  return [selectableColumn, ...commonColumns, actionsColumn(tableNav)];\n};\n\nconst Component = () => {\n  const [rowSelection, setRowSelection] = useState({});\n  const ref = useRef<HTMLDivElement>(null);\n  const tableNavRef = useRef<DataGridNav>(null!);\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns: allColumns(tableNavRef.current),\n    data: TABLE_DEMO_DATA,\n    enableSorting: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n    onRowSelectionChange: setRowSelection,\n    state: {\n      rowSelection,\n    },\n  });\n\n  return (\n    <>\n      <DataGrid\n        isResizable={false}\n        isKeyboardNavigable={true}\n        styling={{\n          borderStyle: 'all-sides',\n        }}\n        tableNavRef={tableNavRef}\n        tableInstance={table}\n        ref={ref}\n        portalTarget={document.body}\n      />\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"datagrid-keyboard-navigation.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-keyboard-navigation.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  Checkbox,\n  DataGrid,\n  type DataGridNav,\n  IconButton,\n  Select,\n  useDataGridContext,\n} from '@neo4j-ndl/react';\nimport { MegaphoneIconOutline } from '@neo4j-ndl/react/icons';\nimport {\n  type ColumnDef,\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { useRef, useState } from 'react';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst selectableColumn: ColumnDef<TestDataFormat> = {\n  cell: ({ row }) => (\n    <Checkbox\n      ariaLabel={`row-${row.index}`}\n      isChecked={row.getIsSelected() || false}\n      onChange={row.getToggleSelectedHandler()}\n    />\n  ),\n  header: ({ table }) => (\n    <Checkbox\n      ariaLabel=\"Select all rows\"\n      isChecked={table.getIsAllRowsSelected() || false}\n      onChange={table.getToggleAllRowsSelectedHandler()}\n      isIndeterminate={table.getIsSomeRowsSelected()}\n    />\n  ),\n  id: 'select',\n  maxSize: 80,\n  size: 80,\n};\n\nconst actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (\n  tableNav,\n) => ({\n  cell: ({ row }) => {\n    const options = ['Edit', 'Delete', 'View'];\n    const dropdownOptions = options.map((option) => ({\n      label: option,\n      value: option,\n    }));\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [selected, setSelected] = useState(dropdownOptions[0]);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const { portalTarget } = useDataGridContext();\n\n    return (\n      <div\n        data-testid={`ndl-actions-cell-row-${row.index}`}\n        className=\"n-flex n-flex-row n-gap-token-8\"\n      >\n        <IconButton\n          description=\"Megaphone\"\n          onClick={() => {\n            alert(\"Let's get loud 📣\");\n          }}\n          htmlAttributes={{\n            type: 'button',\n          }}\n        >\n          <MegaphoneIconOutline />\n        </IconButton>\n        <Select\n          ariaLabel={`actions-select-row-${row.index}`}\n          type=\"select\"\n          selectProps={{\n            menuPortalTarget: portalTarget,\n            onChange: (event) => {\n              if (!event) {\n                return;\n              }\n              setSelected(event);\n            },\n            onKeyDown: (event) => {\n              // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell\n              if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n                event.stopPropagation();\n              }\n            },\n            onMenuClose: () => {\n              console.info(\n                'Start listening to keyboard events for table navigation',\n              );\n              tableNav.enable();\n            },\n            onMenuOpen: () => {\n              console.info(\n                'Stop listening to keyboard events for table navigation',\n              );\n              tableNav.disable();\n            },\n            options: dropdownOptions,\n            value: selected,\n          }}\n        />\n      </div>\n    );\n  },\n  header: 'actions',\n  id: 'actions',\n});\n\nconst allColumns = (tableNav: DataGridNav) => {\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const commonColumns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Name',\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Age',\n      minSize: 80,\n    }),\n  ];\n\n  return [selectableColumn, ...commonColumns, actionsColumn(tableNav)];\n};\n\nconst Component = () => {\n  const [rowSelection, setRowSelection] = useState({});\n  const ref = useRef<HTMLDivElement>(null);\n  const tableNavRef = useRef<DataGridNav>(null!);\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns: allColumns(tableNavRef.current),\n    data: TABLE_DEMO_DATA,\n    enableSorting: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n    onRowSelectionChange: setRowSelection,\n    state: {\n      rowSelection,\n    },\n  });\n\n  return (\n    <>\n      <DataGrid\n        isResizable={false}\n        isKeyboardNavigable={true}\n        styling={{\n          borderStyle: 'all-sides',\n        }}\n        tableNavRef={tableNavRef}\n        tableInstance={table}\n        ref={ref}\n        portalTarget={document.body}\n      />\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/data-grid/stories/datagrid-kitchen-sink.story.js

@@ -1,7 +1,7 @@
 "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]

package/lib/cjs/data-grid/stories/datagrid-kitchen-sink.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-kitchen-sink.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-kitchen-sink.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAkD;AAClD,kDAA8D;AAC9D,uDAS+B;AAC/B,+BAAyC;AAGzC,6CAA+C;AAQ/C,MAAM,YAAY,GAAG,IAAA,gCAAkB,GAAkB,CAAC;AAE1D,MAAM,aAAa,GAAwC;IACzD,aAAa,EAAE;QACb,OAAO,EAAE;YACP;gBACE,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,kBAAkB,CAAC,CAAC;gBAC5B,CAAC;gBACD,KAAK,EAAE,uBAAuB;aAC/B;SACF;KACF;CACF,CAAC;AAKF,MAAM,cAAc,GAAG,CAAC,OAA+B,EAAE,EAAE;IACzD,8DAA8D;IAC9D,MAAM,OAAO,GAAqC;QAChD,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,kBACzB,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,kDAAc,EAC5B,OAAO,EAAE,EAAE,IACR,CAAC,OAAO,CAAC,4BAA4B;YACtC,CAAC,CAAC;gBACE,IAAI,oBACC,aAAa,CACjB;aACF;YACH,CAAC,CAAC,EAAE,CAAC,EACP;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;KACH,CAAC;IAEF,IAAI,OAAO,CAAC,4BAA4B,EAAE,CAAC;QACzC,OAAO,CAAC,IAAI,CACV,YAAY,CAAC,OAAO,CAAC;YACnB,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE;gBACb,MAAM,YAAY,GAChB,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,KAAK,4BAAe,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,SAAS,CAAC;gBAClE,OAAO,CACL,uBAAC,gBAAQ,CAAC,UAAU,IAClB,IAAI,EAAE,IAAI,EACV,yBAAyB,EAAE;wBACzB,QAAQ,EAAE,YAAY,IAAI,uBAAC,4BAAoB,KAAG;wBAClD,WAAW,EAAE,eAAe,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,IAAI,EAAE;qBACrD,EACD,cAAc,EACZ,YAAY,IAAI;wBACd,QAAQ,EAAE,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,4BAA4B,GAAG;qBAC3D,GAEH,CACH,CAAC;YACJ,CAAC;YACD,EAAE,EAAE,SAAS;YACb,IAAI,EAAE;gBACJ,YAAY,EAAE;oBACZ,OAAO,EAAE;wBACP;4BACE,OAAO,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE;gCACxB,KAAK,CACH,4CACE,IAAI,CAAC,GAAG,CAAC,KACX,EAAE,CACH,CAAC;4BACJ,CAAC;4BACD,KAAK,EAAE,oBAAoB;yBAC5B;qBACF;oBACD,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,IAAI,EAAE,CAAC;iBAC9D;aACF;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAED,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG;IACzB,gBAAgB,EAAE,UAAU;IAC5B,IAAI,EAAE,4BAAe;IACrB,kEAAkE;IAClE,aAAa,EAAE;QACb,OAAO,EAAE,EAAE;KACZ;IACD,aAAa,EAAE,KAAK;IACpB,eAAe,EAAE,IAAA,6BAAe,GAAE;IAClC,qBAAqB,EAAE,IAAA,mCAAqB,GAAE;IAC9C,YAAY,EAAE;QACZ,UAAU,EAAE;YACV,QAAQ,EAAE,CAAC;SACZ;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE;YACP;gBACE,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,SAAS,CAAC,CAAC;gBACnB,CAAC;gBACD,KAAK,EAAE,aAAa;aACrB;SACF;KACF;CAC+C,CAAC;AAEnD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EACJ,QAAQ,EAAE,mBAAmB,EAC7B,aAAa,EAAE,gBAAgB,EAC/B,WAAW,EACX,WAAW,EACX,sBAAsB,EAAE,4BAA4B,GACrD,GAAG,IAAA,kBAAW,EAAC;QACd,WAAW,EAAE;YACX,OAAO,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,CAAC;YACxD,KAAK,EAAE,WAAW;SACnB;QACD,WAAW,EAAE;YACX,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;YAC5B,KAAK,EAAE,QAAQ;SAChB;QACD,sBAAsB,EAAE,KAAK;QAC7B,QAAQ,EAAE,KAAK;QACf,aAAa,EAAE,KAAK;KACrB,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,IAAA,2BAAa,kCACtB,kBAAkB,KACrB,OAAO,EAAE,cAAc,CAAC;YACtB,4BAA4B;SAC7B,CAAC,EACF,aAAa,EAAE,IAAI,EACnB,iBAAiB,EAAE,IAAA,+BAAiB,GAAE,IACtC,CAAC;IAEH,OAAO,CACL,iCAAK,SAAS,EAAC,yDAAyD,aACtE,uBAAC,WAAI,IAAC,MAAM,SAAG,EACf,uBAAC,gBAAQ,IACP,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,mBAAmB,EACxC,OAAO,EAAE;oBACP,WAAW,EAAE,WAA0B;oBACvC,gBAAgB;oBAChB,WAAW,EAAE,WAA0B;iBACxC,GACD,IACE,CACP,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 { DataGrid, Menu } from '@neo4j-ndl/react';\nimport { ChevronDownIconSolid } from '@neo4j-ndl/react/icons';\nimport {\n  type ColumnDef,\n  type ColumnMeta,\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type TableOptions,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { Leva, useControls } from 'leva';\n\nimport { type BorderStyle, type HeaderStyle } from '../DataGrid';\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst ColumnActions: ColumnMeta<TestDataFormat, unknown> = {\n  columnActions: {\n    actions: [\n      {\n        onClick: () => {\n          alert('Action triggered');\n        },\n        title: 'Example Column Action',\n      },\n    ],\n  },\n};\n\ntype ColumnGeneratorOptions = {\n  shouldIncludeRowActionColumn: boolean;\n};\nconst COMMON_COLUMNS = (options: ColumnGeneratorOptions) => {\n  // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n  const columns: ColumnDef<TestDataFormat, any>[] = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.getValue(),\n      header: () => <div>Age</div>,\n      minSize: 80,\n      ...(options.shouldIncludeRowActionColumn\n        ? {\n            meta: {\n              ...ColumnActions,\n            },\n          }\n        : {}),\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  if (options.shouldIncludeRowActionColumn) {\n    columns.push(\n      columnHelper.display({\n        cell: (cell) => {\n          const isSpecialRow =\n            cell.row.original.name === TABLE_DEMO_DATA[3].name || undefined;\n          return (\n            <DataGrid.ActionCell\n              cell={cell}\n              innerCleanIconButtonProps={{\n                children: isSpecialRow && <ChevronDownIconSolid />,\n                description: `Actions for ${cell.row.original.name}`,\n              }}\n              innerMenuProps={\n                isSpecialRow && {\n                  children: <Menu.Item title=\"Custom icon and menu props\" />,\n                }\n              }\n            />\n          );\n        },\n        id: 'actions',\n        meta: {\n          isActionCell: {\n            actions: [\n              {\n                onClick: (_event, cell) => {\n                  alert(\n                    `Row Action triggered for row with index: ${\n                      cell.row.index\n                    }`,\n                  );\n                },\n                title: 'Example Row Action',\n              },\n            ],\n            onOpenChange: (open) => console.info(`onOpenChange: ${open}`),\n          },\n        },\n      }),\n    );\n  }\n\n  return columns;\n};\n\nconst COMMON_TABLE_PROPS = {\n  columnResizeMode: 'onChange',\n  data: TABLE_DEMO_DATA,\n  // https://tanstack.com/table/v8/docs/guide/column-sizing#overview\n  defaultColumn: {\n    minSize: 80,\n  },\n  enableSorting: false,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  initialState: {\n    pagination: {\n      pageSize: 5,\n    },\n  },\n  meta: {\n    actions: [\n      {\n        onClick: () => {\n          alert('wowowow');\n        },\n        title: \"Let's party\",\n      },\n    ],\n  },\n} as Omit<TableOptions<TestDataFormat>, 'columns'>;\n\nconst Component = () => {\n  const {\n    keyboard: isKeyboardNavigable,\n    zebraStriping: hasZebraStriping,\n    borderStyle,\n    headerStyle,\n    includeRowActionColumn: shouldIncludeRowActionColumn,\n  } = useControls({\n    borderStyle: {\n      options: ['all-sides', 'horizontal', 'vertical', 'none'],\n      value: 'all-sides',\n    },\n    headerStyle: {\n      options: ['filled', 'clean'],\n      value: 'filled',\n    },\n    includeRowActionColumn: false,\n    keyboard: false,\n    zebraStriping: false,\n  });\n\n  const table = useReactTable({\n    ...COMMON_TABLE_PROPS,\n    columns: COMMON_COLUMNS({\n      shouldIncludeRowActionColumn,\n    }),\n    enableSorting: true,\n    getSortedRowModel: getSortedRowModel(),\n  });\n\n  return (\n    <div className=\"n-h-[1000px] n-w-full n-bg-primary-bg-weak n-p-token-32\">\n      <Leva isRoot />\n      <DataGrid\n        isResizable={true}\n        tableInstance={table}\n        isKeyboardNavigable={isKeyboardNavigable}\n        styling={{\n          borderStyle: borderStyle as BorderStyle,\n          hasZebraStriping,\n          headerStyle: headerStyle as HeaderStyle,\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"datagrid-kitchen-sink.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-kitchen-sink.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 { DataGrid, Menu } from '@neo4j-ndl/react';\nimport { ChevronDownIconSolid } from '@neo4j-ndl/react/icons';\nimport {\n  type ColumnDef,\n  type ColumnMeta,\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  type TableOptions,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { Leva, useControls } from 'leva';\n\nimport { type BorderStyle, type HeaderStyle } from '../DataGrid';\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst ColumnActions: ColumnMeta<TestDataFormat, unknown> = {\n  columnActions: {\n    actions: [\n      {\n        onClick: () => {\n          alert('Action triggered');\n        },\n        title: 'Example Column Action',\n      },\n    ],\n  },\n};\n\ntype ColumnGeneratorOptions = {\n  shouldIncludeRowActionColumn: boolean;\n};\nconst COMMON_COLUMNS = (options: ColumnGeneratorOptions) => {\n  // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n  const columns: ColumnDef<TestDataFormat, any>[] = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.getValue(),\n      header: () => <div>Age</div>,\n      minSize: 80,\n      ...(options.shouldIncludeRowActionColumn\n        ? {\n            meta: {\n              ...ColumnActions,\n            },\n          }\n        : {}),\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  if (options.shouldIncludeRowActionColumn) {\n    columns.push(\n      columnHelper.display({\n        cell: (cell) => {\n          const isSpecialRow =\n            cell.row.original.name === TABLE_DEMO_DATA[3].name || undefined;\n          return (\n            <DataGrid.ActionCell\n              cell={cell}\n              innerCleanIconButtonProps={{\n                children: isSpecialRow && <ChevronDownIconSolid />,\n                description: `Actions for ${cell.row.original.name}`,\n              }}\n              innerMenuProps={\n                isSpecialRow && {\n                  children: <Menu.Item title=\"Custom icon and menu props\" />,\n                }\n              }\n            />\n          );\n        },\n        id: 'actions',\n        meta: {\n          isActionCell: {\n            actions: [\n              {\n                onClick: (_event, cell) => {\n                  alert(\n                    `Row Action triggered for row with index: ${\n                      cell.row.index\n                    }`,\n                  );\n                },\n                title: 'Example Row Action',\n              },\n            ],\n            onOpenChange: (open) => console.info(`onOpenChange: ${open}`),\n          },\n        },\n      }),\n    );\n  }\n\n  return columns;\n};\n\nconst COMMON_TABLE_PROPS = {\n  columnResizeMode: 'onChange',\n  data: TABLE_DEMO_DATA,\n  // https://tanstack.com/table/v8/docs/guide/column-sizing#overview\n  defaultColumn: {\n    minSize: 80,\n  },\n  enableSorting: false,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  initialState: {\n    pagination: {\n      pageSize: 5,\n    },\n  },\n  meta: {\n    actions: [\n      {\n        onClick: () => {\n          alert('wowowow');\n        },\n        title: \"Let's party\",\n      },\n    ],\n  },\n} as Omit<TableOptions<TestDataFormat>, 'columns'>;\n\nconst Component = () => {\n  const {\n    keyboard: isKeyboardNavigable,\n    zebraStriping: hasZebraStriping,\n    borderStyle,\n    headerStyle,\n    includeRowActionColumn: shouldIncludeRowActionColumn,\n  } = useControls({\n    borderStyle: {\n      options: ['all-sides', 'horizontal', 'vertical', 'none'],\n      value: 'all-sides',\n    },\n    headerStyle: {\n      options: ['filled', 'clean'],\n      value: 'filled',\n    },\n    includeRowActionColumn: false,\n    keyboard: false,\n    zebraStriping: false,\n  });\n\n  const table = useReactTable({\n    ...COMMON_TABLE_PROPS,\n    columns: COMMON_COLUMNS({\n      shouldIncludeRowActionColumn,\n    }),\n    enableSorting: true,\n    getSortedRowModel: getSortedRowModel(),\n  });\n\n  return (\n    <div className=\"n-h-[1000px] n-w-full n-bg-primary-bg-weak n-p-token-32\">\n      <Leva isRoot />\n      <DataGrid\n        isResizable={true}\n        tableInstance={table}\n        isKeyboardNavigable={isKeyboardNavigable}\n        styling={{\n          borderStyle: borderStyle as BorderStyle,\n          hasZebraStriping,\n          headerStyle: headerStyle as HeaderStyle,\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/data-grid/stories/datagrid-no-pagination-table.story.js

@@ -1,7 +1,7 @@
 "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]

package/lib/cjs/data-grid/stories/datagrid-no-pagination-table.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-no-pagination-table.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-no-pagination-table.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,uDAI+B;AAE/B,6CAAsD;AAQtD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,IAAA,gCAAkB,GAAkB,CAAC;IAE1D,MAAM,OAAO,GAAG;QACd,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM;YACpB,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE;YAC3B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAClC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK;YACnB,OAAO,EAAE,EAAE;SACZ,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB;YAC9B,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;KACH,CAAC;IAEF,MAAM,KAAK,GAAG,IAAA,2BAAa,EAAC;QAC1B,OAAO;QACP,IAAI,EAAE,mCAAsB;QAC5B,aAAa,EAAE,KAAK;QACpB,eAAe,EAAE,IAAA,6BAAe,GAAE;KACnC,CAAC,CAAC;IAEH,OAAO,CACL,uBAAC,gBAAQ,IACP,UAAU,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,EAChC,WAAW,EAAE,KAAK,EAClB,aAAa,EAAE,KAAK,GACpB,CACH,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 { DataGrid } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { PRUNED_TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst Component = () => {\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Name',\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Age',\n      minSize: 80,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Cypher Command',\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const table = useReactTable({\n    columns,\n    data: PRUNED_TABLE_DEMO_DATA,\n    enableSorting: false,\n    getCoreRowModel: getCoreRowModel(),\n  });\n\n  return (\n    <DataGrid\n      components={{ Navigation: null }}\n      isResizable={false}\n      tableInstance={table}\n    />\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"datagrid-no-pagination-table.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-no-pagination-table.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,uDAI+B;AAE/B,6CAAsD;AAQtD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,IAAA,gCAAkB,GAAkB,CAAC;IAE1D,MAAM,OAAO,GAAG;QACd,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM;YACpB,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE;YAC3B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAClC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK;YACnB,OAAO,EAAE,EAAE;SACZ,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB;YAC9B,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;KACH,CAAC;IAEF,MAAM,KAAK,GAAG,IAAA,2BAAa,EAAC;QAC1B,OAAO;QACP,IAAI,EAAE,mCAAsB;QAC5B,aAAa,EAAE,KAAK;QACpB,eAAe,EAAE,IAAA,6BAAe,GAAE;KACnC,CAAC,CAAC;IAEH,OAAO,CACL,uBAAC,gBAAQ,IACP,UAAU,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,EAChC,WAAW,EAAE,KAAK,EAClB,aAAa,EAAE,KAAK,GACpB,CACH,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 { DataGrid } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { PRUNED_TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst Component = () => {\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Name',\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Age',\n      minSize: 80,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Cypher Command',\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const table = useReactTable({\n    columns,\n    data: PRUNED_TABLE_DEMO_DATA,\n    enableSorting: false,\n    getCoreRowModel: getCoreRowModel(),\n  });\n\n  return (\n    <DataGrid\n      components={{ Navigation: null }}\n      isResizable={false}\n      tableInstance={table}\n    />\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/data-grid/stories/datagrid-percentage-width-columns.story.js

@@ -1,7 +1,7 @@
 "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]

package/lib/cjs/data-grid/stories/datagrid-percentage-width-columns.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-percentage-width-columns.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-percentage-width-columns.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,uDAK+B;AAE/B,6CAA+C;AAQ/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,IAAA,gCAAkB,GAAkB,CAAC;IAE1D,MAAM,OAAO,GAAG;QACd,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM;YACpB,IAAI,EAAE,GAAG,EAAE,sCAAsC;SAClD,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE;YAC3B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAClC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK;YACnB,OAAO,EAAE,GAAG,EAAE,sCAAsC;SACrD,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB;YAC9B,IAAI,EAAE,GAAG,EAAE,sCAAsC;SAClD,CAAC;KACH,CAAC;IAEF,MAAM,KAAK,GAAG,IAAA,2BAAa,EAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO,EAAE,OAAO;QAChB,IAAI,EAAE,4BAAe,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;QACjC,YAAY,EAAE,IAAI;QAClB,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,IAAI;QAChB,aAAa,EAAE,KAAK;QACpB,eAAe,EAAE,IAAA,6BAAe,GAAE;QAClC,iBAAiB,EAAE,IAAA,+BAAiB,GAAE;KACvC,CAAC,CAAC;IAEH,8GAA8G;IAC9G,MAAM,WAAW,GAAG,KAAK,CAAC;IAC1B,MAAM,qBAAqB,GAAG,IAAI,CAAC;IAEnC,OAAO,CACL,gCAAK,SAAS,EAAC,0CAA0C,YACvD,uBAAC,gBAAQ,IACP,UAAU,EAAE;gBACV,UAAU,EAAE,IAAI;aACjB,EACD,qBAAqB,EAAE,qBAAqB,EAC5C,mBAAmB,EAAE,KAAK,EAC1B,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE;gBACP,WAAW,EAAE,WAAW;gBACxB,eAAe,EAAE,KAAK;gBACtB,gBAAgB,EAAE,KAAK;aACxB,EACD,aAAa,EAAE,KAAK,GACpB,GACE,CACP,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 { DataGrid } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst Component = () => {\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Name',\n      size: 200, // 200 / 1000 = 20% of the table width\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Age',\n      minSize: 100, // 100 / 1000 = 10% of the table width\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Cypher Command',\n      size: 700, // 700 / 1000 = 70% of the table width\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns: columns,\n    data: TABLE_DEMO_DATA.slice(0, 5),\n    debugColumns: true,\n    debugHeaders: true,\n    debugTable: true,\n    enableSorting: false,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n  });\n\n  // Disable resizing of columns and enable automatic resizing of columns, to allow for percentage width columns\n  const isResizable = false;\n  const isAutoResizingColumns = true;\n\n  return (\n    <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n      <DataGrid\n        components={{\n          Navigation: null,\n        }}\n        isAutoResizingColumns={isAutoResizingColumns}\n        isKeyboardNavigable={false}\n        isResizable={isResizable}\n        styling={{\n          borderStyle: 'all-sides',\n          hasHoverEffects: false,\n          hasZebraStriping: false,\n        }}\n        tableInstance={table}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"datagrid-percentage-width-columns.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-percentage-width-columns.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,uDAK+B;AAE/B,6CAA+C;AAQ/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,IAAA,gCAAkB,GAAkB,CAAC;IAE1D,MAAM,OAAO,GAAG;QACd,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM;YACpB,IAAI,EAAE,GAAG,EAAE,sCAAsC;SAClD,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE;YAC3B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAClC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK;YACnB,OAAO,EAAE,GAAG,EAAE,sCAAsC;SACrD,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB;YAC9B,IAAI,EAAE,GAAG,EAAE,sCAAsC;SAClD,CAAC;KACH,CAAC;IAEF,MAAM,KAAK,GAAG,IAAA,2BAAa,EAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO,EAAE,OAAO;QAChB,IAAI,EAAE,4BAAe,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;QACjC,YAAY,EAAE,IAAI;QAClB,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,IAAI;QAChB,aAAa,EAAE,KAAK;QACpB,eAAe,EAAE,IAAA,6BAAe,GAAE;QAClC,iBAAiB,EAAE,IAAA,+BAAiB,GAAE;KACvC,CAAC,CAAC;IAEH,8GAA8G;IAC9G,MAAM,WAAW,GAAG,KAAK,CAAC;IAC1B,MAAM,qBAAqB,GAAG,IAAI,CAAC;IAEnC,OAAO,CACL,gCAAK,SAAS,EAAC,0CAA0C,YACvD,uBAAC,gBAAQ,IACP,UAAU,EAAE;gBACV,UAAU,EAAE,IAAI;aACjB,EACD,qBAAqB,EAAE,qBAAqB,EAC5C,mBAAmB,EAAE,KAAK,EAC1B,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE;gBACP,WAAW,EAAE,WAAW;gBACxB,eAAe,EAAE,KAAK;gBACtB,gBAAgB,EAAE,KAAK;aACxB,EACD,aAAa,EAAE,KAAK,GACpB,GACE,CACP,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 { DataGrid } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst Component = () => {\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Name',\n      size: 200, // 200 / 1000 = 20% of the table width\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Age',\n      minSize: 100, // 100 / 1000 = 10% of the table width\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Cypher Command',\n      size: 700, // 700 / 1000 = 70% of the table width\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns: columns,\n    data: TABLE_DEMO_DATA.slice(0, 5),\n    debugColumns: true,\n    debugHeaders: true,\n    debugTable: true,\n    enableSorting: false,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n  });\n\n  // Disable resizing of columns and enable automatic resizing of columns, to allow for percentage width columns\n  const isResizable = false;\n  const isAutoResizingColumns = true;\n\n  return (\n    <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n      <DataGrid\n        components={{\n          Navigation: null,\n        }}\n        isAutoResizingColumns={isAutoResizingColumns}\n        isKeyboardNavigable={false}\n        isResizable={isResizable}\n        styling={{\n          borderStyle: 'all-sides',\n          hasHoverEffects: false,\n          hasZebraStriping: false,\n        }}\n        tableInstance={table}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/data-grid/stories/datagrid-pinned-columns.stories.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PinnedRightSide = exports.PinnedLeftSide = exports.PinnedBothSides = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]

package/lib/cjs/data-grid/stories/datagrid-pinned-columns.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-pinned-columns.stories.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-pinned-columns.stories.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 { DataGrid, Typography } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nexport default {\n  component: DataGrid,\n  id: 'components-data-grid-pinned-columns',\n  parameters: {\n    chromatic: { delay: 1000 },\n    controls: { disable: true },\n  },\n  title: 'Components/DataGrid/Pinned Columns',\n};\n\nexport type TestDataFormat = {\n  age: number;\n  cypherCommand: string;\n  name: string;\n  pinnedLeft: string;\n  pinnedRight: string;\n};\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst columnHelperRight =\n  createColumnHelper<Omit<TestDataFormat, 'pinnedLeft'>>();\n\nconst columnHelperLeft =\n  createColumnHelper<Omit<TestDataFormat, 'pinnedRight'>>();\n\nconst tablePropsRight = {\n  columns: [\n    columnHelperRight.accessor('name', {\n      cell: (info) => info.getValue(),\n      minSize: 180,\n    }),\n    columnHelperRight.accessor('age', {\n      cell: (info) => info.getValue(),\n      minSize: 80,\n    }),\n    columnHelperRight.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      minSize: 80,\n    }),\n    columnHelperRight.accessor('pinnedRight', {\n      cell: (info) => info.getValue(),\n      size: 300,\n    }),\n  ],\n  data: [\n    {\n      age: 31,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 1',\n      pinnedRight: 'Pinned Right',\n    },\n    {\n      age: 32,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 2',\n      pinnedRight: 'Pinned Right',\n    },\n    {\n      age: 33,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 3',\n      pinnedRight: 'Pinned Right',\n    },\n    {\n      age: 34,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 4',\n      pinnedRight: 'Pinned Right',\n    },\n    {\n      age: 35,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 5',\n      pinnedRight: 'Pinned Right',\n    },\n  ],\n};\n\nconst tablePropsBoth = {\n  columns: [\n    columnHelper.accessor('pinnedLeft', {\n      cell: (info) => info.getValue(),\n      size: 200,\n    }),\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      minSize: 180,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.getValue(),\n      minSize: 80,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      minSize: 80,\n    }),\n    columnHelper.accessor('pinnedRight', {\n      cell: (info) => info.getValue(),\n      size: 200,\n    }),\n  ],\n  data: [\n    {\n      age: 31,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 1',\n      pinnedLeft: 'Pinned Left',\n      pinnedRight: 'Pinned Right',\n    },\n    {\n      age: 32,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 2',\n      pinnedLeft: 'Pinned Left',\n      pinnedRight: 'Pinned Right',\n    },\n    {\n      age: 33,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 3',\n      pinnedLeft: 'Pinned Left',\n      pinnedRight: 'Pinned Right',\n    },\n    {\n      age: 34,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 4',\n      pinnedLeft: 'Pinned Left',\n      pinnedRight: 'Pinned Right',\n    },\n    {\n      age: 35,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 5',\n      pinnedLeft: 'Pinned Left',\n      pinnedRight: 'Pinned Right',\n    },\n  ],\n};\n\nconst tablePropsLeft = {\n  columns: [\n    columnHelperLeft.accessor('pinnedLeft', {\n      cell: (info) => info.getValue(),\n      size: 300,\n    }),\n    columnHelperLeft.accessor('name', {\n      cell: (info) => info.getValue(),\n      minSize: 180,\n    }),\n    columnHelperLeft.accessor('age', {\n      cell: (info) => info.getValue(),\n      minSize: 80,\n    }),\n    columnHelperLeft.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      minSize: 80,\n    }),\n  ],\n  data: [\n    {\n      age: 31,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 1',\n      pinnedLeft: 'Pinned Left',\n    },\n    {\n      age: 32,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 2',\n      pinnedLeft: 'Pinned Left',\n    },\n    {\n      age: 33,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 3',\n      pinnedLeft: 'Pinned Left',\n    },\n    {\n      age: 34,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 4',\n      pinnedLeft: 'Pinned Left',\n    },\n    {\n      age: 35,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 5',\n      pinnedLeft: 'Pinned Left',\n    },\n  ],\n};\n\nexport const PinnedBothSides = () => {\n  const table = useReactTable({\n    ...tablePropsBoth,\n    enableColumnPinning: true,\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    state: {\n      columnPinning: {\n        left: ['pinnedLeft'],\n        right: ['pinnedRight'],\n      },\n    },\n  });\n\n  return (\n    <div className=\"w-w-full n-max-w-[1200px]\">\n      <Typography variant=\"title-2\">\n        Make the window smaller to test the overflow\n      </Typography>\n      <DataGrid\n        isKeyboardNavigable={true}\n        isResizable={false}\n        portalTarget={document.body}\n        styling={{\n          borderStyle: 'all-sides',\n          hasZebraStriping: false,\n        }}\n        tableInstance={table}\n      />\n    </div>\n  );\n};\n\nexport const PinnedLeftSide = () => {\n  const table = useReactTable({\n    ...tablePropsLeft,\n    enableColumnPinning: true,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    state: {\n      columnPinning: {\n        left: ['pinnedLeft'],\n      },\n    },\n  });\n\n  return (\n    <div className=\"w-w-full n-max-w-[1200px]\">\n      <Typography variant=\"title-2\">\n        Make the window smaller to test the overflow\n      </Typography>\n      <DataGrid\n        isKeyboardNavigable={true}\n        isResizable={false}\n        styling={{\n          borderStyle: 'all-sides',\n          hasZebraStriping: false,\n        }}\n        tableInstance={table}\n      />\n    </div>\n  );\n};\n\nexport const PinnedRightSide = () => {\n  const table = useReactTable({\n    ...tablePropsRight,\n    enableColumnPinning: true,\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    state: {\n      columnPinning: {\n        right: ['pinnedRight'],\n      },\n    },\n  });\n\n  return (\n    <div className=\"n-w-full n-max-w-[1200px]\">\n      <Typography variant=\"title-2\">\n        Make the window smaller to test the overflow\n      </Typography>\n      <DataGrid\n        isKeyboardNavigable={true}\n        isResizable={false}\n        portalTarget={document.body}\n        styling={{\n          borderStyle: 'all-sides',\n          hasZebraStriping: false,\n        }}\n        tableInstance={table}\n      />\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"datagrid-pinned-columns.stories.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-pinned-columns.stories.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 { DataGrid, Typography } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nexport default {\n  component: DataGrid,\n  id: 'components-data-grid-pinned-columns',\n  parameters: {\n    chromatic: { delay: 1000 },\n    controls: { disable: true },\n  },\n  title: 'Components/DataGrid/Pinned Columns',\n};\n\nexport type TestDataFormat = {\n  age: number;\n  cypherCommand: string;\n  name: string;\n  pinnedLeft: string;\n  pinnedRight: string;\n};\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst columnHelperRight =\n  createColumnHelper<Omit<TestDataFormat, 'pinnedLeft'>>();\n\nconst columnHelperLeft =\n  createColumnHelper<Omit<TestDataFormat, 'pinnedRight'>>();\n\nconst tablePropsRight = {\n  columns: [\n    columnHelperRight.accessor('name', {\n      cell: (info) => info.getValue(),\n      minSize: 180,\n    }),\n    columnHelperRight.accessor('age', {\n      cell: (info) => info.getValue(),\n      minSize: 80,\n    }),\n    columnHelperRight.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      minSize: 80,\n    }),\n    columnHelperRight.accessor('pinnedRight', {\n      cell: (info) => info.getValue(),\n      size: 300,\n    }),\n  ],\n  data: [\n    {\n      age: 31,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 1',\n      pinnedRight: 'Pinned Right',\n    },\n    {\n      age: 32,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 2',\n      pinnedRight: 'Pinned Right',\n    },\n    {\n      age: 33,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 3',\n      pinnedRight: 'Pinned Right',\n    },\n    {\n      age: 34,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 4',\n      pinnedRight: 'Pinned Right',\n    },\n    {\n      age: 35,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 5',\n      pinnedRight: 'Pinned Right',\n    },\n  ],\n};\n\nconst tablePropsBoth = {\n  columns: [\n    columnHelper.accessor('pinnedLeft', {\n      cell: (info) => info.getValue(),\n      size: 200,\n    }),\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      minSize: 180,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.getValue(),\n      minSize: 80,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      minSize: 80,\n    }),\n    columnHelper.accessor('pinnedRight', {\n      cell: (info) => info.getValue(),\n      size: 200,\n    }),\n  ],\n  data: [\n    {\n      age: 31,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 1',\n      pinnedLeft: 'Pinned Left',\n      pinnedRight: 'Pinned Right',\n    },\n    {\n      age: 32,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 2',\n      pinnedLeft: 'Pinned Left',\n      pinnedRight: 'Pinned Right',\n    },\n    {\n      age: 33,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 3',\n      pinnedLeft: 'Pinned Left',\n      pinnedRight: 'Pinned Right',\n    },\n    {\n      age: 34,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 4',\n      pinnedLeft: 'Pinned Left',\n      pinnedRight: 'Pinned Right',\n    },\n    {\n      age: 35,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 5',\n      pinnedLeft: 'Pinned Left',\n      pinnedRight: 'Pinned Right',\n    },\n  ],\n};\n\nconst tablePropsLeft = {\n  columns: [\n    columnHelperLeft.accessor('pinnedLeft', {\n      cell: (info) => info.getValue(),\n      size: 300,\n    }),\n    columnHelperLeft.accessor('name', {\n      cell: (info) => info.getValue(),\n      minSize: 180,\n    }),\n    columnHelperLeft.accessor('age', {\n      cell: (info) => info.getValue(),\n      minSize: 80,\n    }),\n    columnHelperLeft.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      minSize: 80,\n    }),\n  ],\n  data: [\n    {\n      age: 31,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 1',\n      pinnedLeft: 'Pinned Left',\n    },\n    {\n      age: 32,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 2',\n      pinnedLeft: 'Pinned Left',\n    },\n    {\n      age: 33,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 3',\n      pinnedLeft: 'Pinned Left',\n    },\n    {\n      age: 34,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 4',\n      pinnedLeft: 'Pinned Left',\n    },\n    {\n      age: 35,\n      cypherCommand: 'MATCH (n) RETURN n',\n      name: 'Name 5',\n      pinnedLeft: 'Pinned Left',\n    },\n  ],\n};\n\nexport const PinnedBothSides = () => {\n  const table = useReactTable({\n    ...tablePropsBoth,\n    enableColumnPinning: true,\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    state: {\n      columnPinning: {\n        left: ['pinnedLeft'],\n        right: ['pinnedRight'],\n      },\n    },\n  });\n\n  return (\n    <div className=\"w-w-full n-max-w-[1200px]\">\n      <Typography variant=\"title-2\">\n        Make the window smaller to test the overflow\n      </Typography>\n      <DataGrid\n        isKeyboardNavigable={true}\n        isResizable={false}\n        portalTarget={document.body}\n        styling={{\n          borderStyle: 'all-sides',\n          hasZebraStriping: false,\n        }}\n        tableInstance={table}\n      />\n    </div>\n  );\n};\n\nexport const PinnedLeftSide = () => {\n  const table = useReactTable({\n    ...tablePropsLeft,\n    enableColumnPinning: true,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    state: {\n      columnPinning: {\n        left: ['pinnedLeft'],\n      },\n    },\n  });\n\n  return (\n    <div className=\"w-w-full n-max-w-[1200px]\">\n      <Typography variant=\"title-2\">\n        Make the window smaller to test the overflow\n      </Typography>\n      <DataGrid\n        isKeyboardNavigable={true}\n        isResizable={false}\n        styling={{\n          borderStyle: 'all-sides',\n          hasZebraStriping: false,\n        }}\n        tableInstance={table}\n      />\n    </div>\n  );\n};\n\nexport const PinnedRightSide = () => {\n  const table = useReactTable({\n    ...tablePropsRight,\n    enableColumnPinning: true,\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    state: {\n      columnPinning: {\n        right: ['pinnedRight'],\n      },\n    },\n  });\n\n  return (\n    <div className=\"n-w-full n-max-w-[1200px]\">\n      <Typography variant=\"title-2\">\n        Make the window smaller to test the overflow\n      </Typography>\n      <DataGrid\n        isKeyboardNavigable={true}\n        isResizable={false}\n        portalTarget={document.body}\n        styling={{\n          borderStyle: 'all-sides',\n          hasZebraStriping: false,\n        }}\n        tableInstance={table}\n      />\n    </div>\n  );\n};\n"]}

package/lib/cjs/data-grid/stories/datagrid-placeholder-states.story.js

@@ -1,7 +1,7 @@
 "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]

package/lib/cjs/data-grid/stories/datagrid-placeholder-states.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-placeholder-states.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-placeholder-states.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,uDAK+B;AAE/B,6CAA+C;AAQ/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,IAAA,gCAAkB,GAAkB,CAAC;IAE1D,MAAM,OAAO,GAAG;QACd,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM;YACpB,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE;YAC3B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAClC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK;YACnB,OAAO,EAAE,EAAE;SACZ,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB;YAC9B,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;KACH,CAAC;IAEF,MAAM,KAAK,GAAG,IAAA,2BAAa,EAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO;QACP,IAAI,EAAE,4BAAe;QACrB,YAAY,EAAE,IAAI;QAClB,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,IAAI;QAChB,aAAa,EAAE;YACb,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,EAAE;SACZ;QACD,aAAa,EAAE,KAAK;QACpB,eAAe,EAAE,IAAA,6BAAe,GAAE;QAClC,qBAAqB,EAAE,IAAA,mCAAqB,GAAE;QAC9C,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,CAAC;aACZ;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,gCAAK,SAAS,EAAC,0CAA0C,YACvD,uBAAC,gBAAQ,IACP,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,IAAI,GACzB,GACE,CACP,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 { DataGrid } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst Component = () => {\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Name',\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Age',\n      minSize: 80,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Cypher Command',\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data: TABLE_DEMO_DATA,\n    debugColumns: true,\n    debugHeaders: true,\n    debugTable: true,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n  });\n\n  return (\n    <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n      <DataGrid\n        isResizable={true}\n        tableInstance={table}\n        isKeyboardNavigable={true}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"datagrid-placeholder-states.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-placeholder-states.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,uDAK+B;AAE/B,6CAA+C;AAQ/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,IAAA,gCAAkB,GAAkB,CAAC;IAE1D,MAAM,OAAO,GAAG;QACd,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM;YACpB,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE;YAC3B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAClC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK;YACnB,OAAO,EAAE,EAAE;SACZ,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB;YAC9B,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;KACH,CAAC;IAEF,MAAM,KAAK,GAAG,IAAA,2BAAa,EAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO;QACP,IAAI,EAAE,4BAAe;QACrB,YAAY,EAAE,IAAI;QAClB,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,IAAI;QAChB,aAAa,EAAE;YACb,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,EAAE;SACZ;QACD,aAAa,EAAE,KAAK;QACpB,eAAe,EAAE,IAAA,6BAAe,GAAE;QAClC,qBAAqB,EAAE,IAAA,mCAAqB,GAAE;QAC9C,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,CAAC;aACZ;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,gCAAK,SAAS,EAAC,0CAA0C,YACvD,uBAAC,gBAAQ,IACP,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,IAAI,GACzB,GACE,CACP,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 { DataGrid } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst Component = () => {\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Name',\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Age',\n      minSize: 80,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Cypher Command',\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data: TABLE_DEMO_DATA,\n    debugColumns: true,\n    debugHeaders: true,\n    debugTable: true,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n  });\n\n  return (\n    <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n      <DataGrid\n        isResizable={true}\n        tableInstance={table}\n        isKeyboardNavigable={true}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/data-grid/stories/datagrid-resizable-column.story.js

@@ -1,7 +1,7 @@
 "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]

package/lib/cjs/data-grid/stories/datagrid-resizable-column.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-resizable-column.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-resizable-column.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,uDAK+B;AAE/B,6CAA+C;AAQ/C,MAAM,SAAS,GAAG,CAAC,EACjB,mBAAmB,GAAG,IAAI,EAC1B,UAAU,MAIR,EAAE,EAAE,EAAE;IACR,MAAM,YAAY,GAAG,IAAA,gCAAkB,GAAkB,CAAC;IAE1D,MAAM,OAAO,GAAG;QACd,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM;YACpB,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE;YAC3B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAClC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK;YACnB,OAAO,EAAE,EAAE;SACZ,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB;YAC9B,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;KACH,CAAC;IAEF,MAAM,KAAK,GAAG,IAAA,2BAAa,EAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO;QACP,IAAI,EAAE,4BAAe;QACrB,YAAY,EAAE,IAAI;QAClB,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,IAAI;QAChB,aAAa,EAAE;YACb,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,EAAE;SACZ;QACD,aAAa,EAAE,KAAK;QACpB,eAAe,EAAE,IAAA,6BAAe,GAAE;QAClC,qBAAqB,EAAE,IAAA,mCAAqB,GAAE;QAC9C,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,CAAC;aACZ;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,gCAAK,SAAS,EAAC,0CAA0C,YACvD,uBAAC,gBAAQ,IACP,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,mBAAmB;YACxC,8EAA8E;YAC9E,UAAU,EAAE,UAAU,GACtB,GACE,CACP,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 { DataGrid } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst Component = ({\n  isKeyboardNavigable = true,\n  components,\n}: {\n  isKeyboardNavigable?: boolean;\n  components?: React.ComponentProps<typeof DataGrid>['components'];\n} = {}) => {\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Name',\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Age',\n      minSize: 80,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Cypher Command',\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data: TABLE_DEMO_DATA,\n    debugColumns: true,\n    debugHeaders: true,\n    debugTable: true,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n  });\n\n  return (\n    <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n      <DataGrid<TestDataFormat>\n        isResizable={true}\n        tableInstance={table}\n        isKeyboardNavigable={isKeyboardNavigable}\n        // @ts-expect-error limitations of storybooks makes it hard to handle generics\n        components={components}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"datagrid-resizable-column.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-resizable-column.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,uDAK+B;AAE/B,6CAA+C;AAQ/C,MAAM,SAAS,GAAG,CAAC,EACjB,mBAAmB,GAAG,IAAI,EAC1B,UAAU,MAIR,EAAE,EAAE,EAAE;IACR,MAAM,YAAY,GAAG,IAAA,gCAAkB,GAAkB,CAAC;IAE1D,MAAM,OAAO,GAAG;QACd,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM;YACpB,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE;YAC3B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAClC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK;YACnB,OAAO,EAAE,EAAE;SACZ,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB;YAC9B,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;KACH,CAAC;IAEF,MAAM,KAAK,GAAG,IAAA,2BAAa,EAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO;QACP,IAAI,EAAE,4BAAe;QACrB,YAAY,EAAE,IAAI;QAClB,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,IAAI;QAChB,aAAa,EAAE;YACb,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,EAAE;SACZ;QACD,aAAa,EAAE,KAAK;QACpB,eAAe,EAAE,IAAA,6BAAe,GAAE;QAClC,qBAAqB,EAAE,IAAA,mCAAqB,GAAE;QAC9C,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,CAAC;aACZ;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,gCAAK,SAAS,EAAC,0CAA0C,YACvD,uBAAC,gBAAQ,IACP,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,mBAAmB;YACxC,8EAA8E;YAC9E,UAAU,EAAE,UAAU,GACtB,GACE,CACP,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 { DataGrid } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst Component = ({\n  isKeyboardNavigable = true,\n  components,\n}: {\n  isKeyboardNavigable?: boolean;\n  components?: React.ComponentProps<typeof DataGrid>['components'];\n} = {}) => {\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Name',\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Age',\n      minSize: 80,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Cypher Command',\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data: TABLE_DEMO_DATA,\n    debugColumns: true,\n    debugHeaders: true,\n    debugTable: true,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n  });\n\n  return (\n    <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n      <DataGrid<TestDataFormat>\n        isResizable={true}\n        tableInstance={table}\n        isKeyboardNavigable={isKeyboardNavigable}\n        // @ts-expect-error limitations of storybooks makes it hard to handle generics\n        components={components}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/data-grid/stories/datagrid-rule-based-styling-datetime.story.js

@@ -1,7 +1,7 @@
 "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]

package/lib/cjs/data-grid/stories/datagrid-rule-based-styling-datetime.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-rule-based-styling-datetime.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-rule-based-styling-datetime.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 { DataGrid } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { type DataGridStyleRule } from '../style-rules/types';\n\ntype EventRow = {\n  event: string;\n  /**\n   * JS Date coerced from the event's local ISO string. Natively converted to\n   * Unix ms by the engine and compared against `{ datetime: \"...\" }` literals.\n   */\n  scheduledDate: Date;\n  /**\n   * UTC milliseconds since midnight. Compared against `{ time: \"...\" }` literals\n   * that are defined in Stockholm / CEST (+02:00) time — the engine normalises\n   * both sides to UTC before comparing.\n   */\n  scheduledTimeMs: number;\n  /** Human-readable local time shown in the cell, e.g. \"09:00 CEST (+02:00)\". */\n  localTimeDisplay: string;\n  status: 'confirmed' | 'delayed' | 'cancelled';\n};\n\nconst data: EventRow[] = [\n  // ── Past events (before start of 2026-06-25 in Stockholm / CEST) ──────────\n  {\n    event: 'Quarterly review',\n    localTimeDisplay: '09:00 CEST (+02:00)',\n    // 09:00 Stockholm CEST = 07:00 UTC\n    scheduledDate: new Date('2026-06-10T09:00:00+02:00'),\n    scheduledTimeMs: 7 * 3_600_000,\n    status: 'confirmed',\n  },\n  {\n    event: 'Security audit',\n    localTimeDisplay: '07:30 BST (+01:00)',\n    // 07:30 London BST (+01:00) = 06:30 UTC — before Stockholm opens\n    scheduledDate: new Date('2026-06-18T07:30:00+01:00'),\n    scheduledTimeMs: 6 * 3_600_000 + 30 * 60_000,\n    status: 'delayed',\n  },\n  // ── Today (2026-06-25 in Stockholm / CEST) ─────────────────────────────────\n  {\n    event: 'Customer demo',\n    localTimeDisplay: '09:00 EDT (-04:00)',\n    // 09:00 New York EDT (-04:00) = 13:00 UTC\n    scheduledDate: new Date('2026-06-25T09:00:00-04:00'),\n    scheduledTimeMs: 13 * 3_600_000,\n    status: 'confirmed',\n  },\n  {\n    event: 'Platform migration',\n    localTimeDisplay: '22:00 CEST (+02:00)',\n    // 22:00 Stockholm CEST (+02:00) = 20:00 UTC — after Stockholm closes\n    scheduledDate: new Date('2026-06-25T22:00:00+02:00'),\n    scheduledTimeMs: 20 * 3_600_000,\n    status: 'confirmed',\n  },\n  // ── Near future (up to and including 2026-07-14 in Stockholm) ─────────────\n  {\n    event: 'Board presentation',\n    localTimeDisplay: '10:00 SGT (+08:00)',\n    // 10:00 Singapore SGT (+08:00) = 02:00 UTC — before Stockholm opens\n    scheduledDate: new Date('2026-07-02T10:00:00+08:00'),\n    scheduledTimeMs: 2 * 3_600_000,\n    status: 'confirmed',\n  },\n  {\n    event: 'Partner onboarding',\n    localTimeDisplay: '13:15 CEST (+02:00)',\n    // 13:15 Paris CEST (+02:00) = 11:15 UTC\n    scheduledDate: new Date('2026-07-08T13:15:00+02:00'),\n    scheduledTimeMs: 11 * 3_600_000 + 15 * 60_000,\n    status: 'confirmed',\n  },\n  {\n    event: 'Architecture summit',\n    localTimeDisplay: '08:00 CEST (+02:00)',\n    // 08:00 Amsterdam CEST (+02:00) = 06:00 UTC\n    scheduledDate: new Date('2026-07-11T08:00:00+02:00'),\n    scheduledTimeMs: 6 * 3_600_000,\n    status: 'confirmed',\n  },\n  {\n    event: 'Annual conference',\n    localTimeDisplay: '09:00 PDT (-07:00)',\n    // 09:00 San Francisco PDT (-07:00) = 16:00 UTC — after Stockholm closes\n    scheduledDate: new Date('2026-07-13T09:00:00-07:00'),\n    scheduledTimeMs: 16 * 3_600_000,\n    status: 'confirmed',\n  },\n  // ── Far future (after 2026-07-15T00:00 Stockholm / CEST = 2026-07-14T22:00Z)\n  {\n    event: 'Year-end planning',\n    localTimeDisplay: '09:00 JST (+09:00)',\n    // 09:00 Tokyo JST (+09:00) = 00:00 UTC — midnight, well before Stockholm opens\n    scheduledDate: new Date('2026-11-20T09:00:00+09:00'),\n    scheduledTimeMs: 0,\n    status: 'cancelled',\n  },\n];\n\n/**\n * All date and time boundaries are anchored to Stockholm in June–July 2026.\n * Date literals use RFC 9557 IANA bracket notation — the UTC offset is inferred\n * from the named zone (CEST = +02:00 in this period); writing `+02:00` explicitly\n * is optional. Time literals use UTC-offset notation.\n *\n * \"Today\" from a Stockholm perspective:\n *   2026-06-25T00:00:00[Europe/Stockholm] = 2026-06-24T22:00:00Z\n *   2026-06-26T00:00:00[Europe/Stockholm] = 2026-06-25T22:00:00Z\n *\n * \"Far future\" threshold:\n *   2026-07-15T00:00:00[Europe/Stockholm] = 2026-07-14T22:00:00Z\n *\n * Business hours (Stockholm):\n *   `{ time: '09:00:00+02:00' }` resolves to 07:00 UTC (25 200 000 ms)\n *   `{ time: '17:00:00+02:00' }` resolves to 15:00 UTC (54 000 000 ms)\n */\nconst styleRules: DataGridStyleRule[] = [\n  // Near-future date cells use temporal literals directly as gradient\n  // boundaries. Several rows are spread across this interval so the progression\n  // from amber to blue is easy to see.\n  {\n    apply: {\n      colorRange: {\n        maxColor: '#dbeafe',\n        maxValue: {\n          datetime: '2026-07-15T00:00:00[Europe/Stockholm]',\n        },\n        minColor: '#fef3c7',\n        minValue: {\n          datetime: '2026-06-26T00:00:00[Europe/Stockholm]',\n        },\n        onColumn: 'scheduledDate',\n      },\n    },\n    column: 'scheduledDate',\n    priority: 0,\n  },\n  // Past events — entire row in muted red\n  {\n    apply: {\n      color: { value: '#fee2e2' },\n      textColor: { value: '#7f1d1d' },\n    },\n    column: null,\n    priority: 1,\n    where: {\n      lessThan: [\n        { column: 'scheduledDate' },\n        { datetime: '2026-06-25T00:00:00[Europe/Stockholm]' },\n      ],\n    },\n  },\n  // Today (in Stockholm timezone) — entire row in amber\n  {\n    apply: {\n      color: { value: '#fef9c3' },\n      textColor: { value: '#713f12' },\n    },\n    column: null,\n    priority: 1,\n    where: {\n      and: [\n        {\n          greaterThanOrEqual: [\n            { column: 'scheduledDate' },\n            { datetime: '2026-06-25T00:00:00[Europe/Stockholm]' },\n          ],\n        },\n        {\n          lessThan: [\n            { column: 'scheduledDate' },\n            { datetime: '2026-06-26T00:00:00[Europe/Stockholm]' },\n          ],\n        },\n      ],\n    },\n  },\n  // Far future (after 2026-07-15 midnight Stockholm time) — entire row in green\n  {\n    apply: {\n      color: { value: '#dcfce7' },\n      textColor: { value: '#14532d' },\n    },\n    column: null,\n    priority: 1,\n    where: {\n      greaterThanOrEqual: [\n        { column: 'scheduledDate' },\n        { datetime: '2026-07-15T00:00:00[Europe/Stockholm]' },\n      ],\n    },\n  },\n  // Outside Stockholm business hours (before 09:00 CEST or from 17:00 CEST) —\n  // time cell in orange. The { time: \"...\" } literals carry an offset so the\n  // engine normalises them to UTC before comparing against scheduledTimeMs.\n  {\n    apply: {\n      color: { value: '#ffedd5' },\n      textColor: { value: '#7c2d12' },\n    },\n    column: 'scheduledTimeMs',\n    priority: 2,\n    where: {\n      or: [\n        {\n          lessThan: [{ column: 'scheduledTimeMs' }, { time: '09:00:00+02:00' }],\n        },\n        {\n          greaterThanOrEqual: [\n            { column: 'scheduledTimeMs' },\n            { time: '17:00:00+02:00' },\n          ],\n        },\n      ],\n    },\n  },\n  // Cancelled events — all cells grayed out at highest priority\n  {\n    apply: {\n      color: { value: '#f3f4f6' },\n      textColor: { value: '#9ca3af' },\n    },\n    column: null,\n    priority: 5,\n    where: { equal: [{ column: 'status' }, 'cancelled'] },\n  },\n];\n\nconst Component = () => {\n  const columnHelper = createColumnHelper<EventRow>();\n\n  const columns = [\n    columnHelper.accessor('event', {\n      cell: (info) => info.getValue(),\n      header: () => 'Event',\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('scheduledDate', {\n      cell: (info) =>\n        info.getValue().toLocaleDateString('en-GB', {\n          day: 'numeric',\n          month: 'short',\n          timeZone: 'Europe/Stockholm',\n          year: 'numeric',\n        }),\n      header: () => 'Date (Stockholm)',\n      minSize: 150,\n      size: 170,\n    }),\n    columnHelper.accessor('localTimeDisplay', {\n      cell: (info) => info.getValue(),\n      header: () => 'Local time',\n      minSize: 160,\n      size: 180,\n    }),\n    columnHelper.accessor('scheduledTimeMs', {\n      cell: (info) => {\n        const ms = info.getValue();\n        const hours = Math.floor(ms / 3_600_000)\n          .toString()\n          .padStart(2, '0');\n        const minutes = Math.floor((ms % 3_600_000) / 60_000)\n          .toString()\n          .padStart(2, '0');\n        return `${hours}:${minutes} UTC`;\n      },\n      header: () => 'Time (UTC)',\n      minSize: 110,\n      size: 130,\n    }),\n    columnHelper.accessor('status', {\n      cell: (info) => info.getValue(),\n      header: () => 'Status',\n      minSize: 100,\n      size: 120,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: { pageSize: 10 },\n    },\n  });\n\n  return (\n    <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n      <DataGrid\n        isResizable={false}\n        isKeyboardNavigable={false}\n        tableInstance={table}\n        styleRules={styleRules}\n        styling={{\n          borderStyle: 'all-sides',\n          hasHoverEffects: true,\n          hasZebraStriping: false,\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"datagrid-rule-based-styling-datetime.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-rule-based-styling-datetime.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 { DataGrid } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { type DataGridStyleRule } from '../style-rules/types';\n\ntype EventRow = {\n  event: string;\n  /**\n   * JS Date coerced from the event's local ISO string. Natively converted to\n   * Unix ms by the engine and compared against `{ datetime: \"...\" }` literals.\n   */\n  scheduledDate: Date;\n  /**\n   * UTC milliseconds since midnight. Compared against `{ time: \"...\" }` literals\n   * that are defined in Stockholm / CEST (+02:00) time — the engine normalises\n   * both sides to UTC before comparing.\n   */\n  scheduledTimeMs: number;\n  /** Human-readable local time shown in the cell, e.g. \"09:00 CEST (+02:00)\". */\n  localTimeDisplay: string;\n  status: 'confirmed' | 'delayed' | 'cancelled';\n};\n\nconst data: EventRow[] = [\n  // ── Past events (before start of 2026-06-25 in Stockholm / CEST) ──────────\n  {\n    event: 'Quarterly review',\n    localTimeDisplay: '09:00 CEST (+02:00)',\n    // 09:00 Stockholm CEST = 07:00 UTC\n    scheduledDate: new Date('2026-06-10T09:00:00+02:00'),\n    scheduledTimeMs: 7 * 3_600_000,\n    status: 'confirmed',\n  },\n  {\n    event: 'Security audit',\n    localTimeDisplay: '07:30 BST (+01:00)',\n    // 07:30 London BST (+01:00) = 06:30 UTC — before Stockholm opens\n    scheduledDate: new Date('2026-06-18T07:30:00+01:00'),\n    scheduledTimeMs: 6 * 3_600_000 + 30 * 60_000,\n    status: 'delayed',\n  },\n  // ── Today (2026-06-25 in Stockholm / CEST) ─────────────────────────────────\n  {\n    event: 'Customer demo',\n    localTimeDisplay: '09:00 EDT (-04:00)',\n    // 09:00 New York EDT (-04:00) = 13:00 UTC\n    scheduledDate: new Date('2026-06-25T09:00:00-04:00'),\n    scheduledTimeMs: 13 * 3_600_000,\n    status: 'confirmed',\n  },\n  {\n    event: 'Platform migration',\n    localTimeDisplay: '22:00 CEST (+02:00)',\n    // 22:00 Stockholm CEST (+02:00) = 20:00 UTC — after Stockholm closes\n    scheduledDate: new Date('2026-06-25T22:00:00+02:00'),\n    scheduledTimeMs: 20 * 3_600_000,\n    status: 'confirmed',\n  },\n  // ── Near future (up to and including 2026-07-14 in Stockholm) ─────────────\n  {\n    event: 'Board presentation',\n    localTimeDisplay: '10:00 SGT (+08:00)',\n    // 10:00 Singapore SGT (+08:00) = 02:00 UTC — before Stockholm opens\n    scheduledDate: new Date('2026-07-02T10:00:00+08:00'),\n    scheduledTimeMs: 2 * 3_600_000,\n    status: 'confirmed',\n  },\n  {\n    event: 'Partner onboarding',\n    localTimeDisplay: '13:15 CEST (+02:00)',\n    // 13:15 Paris CEST (+02:00) = 11:15 UTC\n    scheduledDate: new Date('2026-07-08T13:15:00+02:00'),\n    scheduledTimeMs: 11 * 3_600_000 + 15 * 60_000,\n    status: 'confirmed',\n  },\n  {\n    event: 'Architecture summit',\n    localTimeDisplay: '08:00 CEST (+02:00)',\n    // 08:00 Amsterdam CEST (+02:00) = 06:00 UTC\n    scheduledDate: new Date('2026-07-11T08:00:00+02:00'),\n    scheduledTimeMs: 6 * 3_600_000,\n    status: 'confirmed',\n  },\n  {\n    event: 'Annual conference',\n    localTimeDisplay: '09:00 PDT (-07:00)',\n    // 09:00 San Francisco PDT (-07:00) = 16:00 UTC — after Stockholm closes\n    scheduledDate: new Date('2026-07-13T09:00:00-07:00'),\n    scheduledTimeMs: 16 * 3_600_000,\n    status: 'confirmed',\n  },\n  // ── Far future (after 2026-07-15T00:00 Stockholm / CEST = 2026-07-14T22:00Z)\n  {\n    event: 'Year-end planning',\n    localTimeDisplay: '09:00 JST (+09:00)',\n    // 09:00 Tokyo JST (+09:00) = 00:00 UTC — midnight, well before Stockholm opens\n    scheduledDate: new Date('2026-11-20T09:00:00+09:00'),\n    scheduledTimeMs: 0,\n    status: 'cancelled',\n  },\n];\n\n/**\n * All date and time boundaries are anchored to Stockholm in June–July 2026.\n * Date literals use RFC 9557 IANA bracket notation — the UTC offset is inferred\n * from the named zone (CEST = +02:00 in this period); writing `+02:00` explicitly\n * is optional. Time literals use UTC-offset notation.\n *\n * \"Today\" from a Stockholm perspective:\n *   2026-06-25T00:00:00[Europe/Stockholm] = 2026-06-24T22:00:00Z\n *   2026-06-26T00:00:00[Europe/Stockholm] = 2026-06-25T22:00:00Z\n *\n * \"Far future\" threshold:\n *   2026-07-15T00:00:00[Europe/Stockholm] = 2026-07-14T22:00:00Z\n *\n * Business hours (Stockholm):\n *   `{ time: '09:00:00+02:00' }` resolves to 07:00 UTC (25 200 000 ms)\n *   `{ time: '17:00:00+02:00' }` resolves to 15:00 UTC (54 000 000 ms)\n */\nconst styleRules: DataGridStyleRule[] = [\n  // Near-future date cells use temporal literals directly as gradient\n  // boundaries. Several rows are spread across this interval so the progression\n  // from amber to blue is easy to see.\n  {\n    apply: {\n      colorRange: {\n        maxColor: '#dbeafe',\n        maxValue: {\n          datetime: '2026-07-15T00:00:00[Europe/Stockholm]',\n        },\n        minColor: '#fef3c7',\n        minValue: {\n          datetime: '2026-06-26T00:00:00[Europe/Stockholm]',\n        },\n        onColumn: 'scheduledDate',\n      },\n    },\n    column: 'scheduledDate',\n    priority: 0,\n  },\n  // Past events — entire row in muted red\n  {\n    apply: {\n      color: { value: '#fee2e2' },\n      textColor: { value: '#7f1d1d' },\n    },\n    column: null,\n    priority: 1,\n    where: {\n      lessThan: [\n        { column: 'scheduledDate' },\n        { datetime: '2026-06-25T00:00:00[Europe/Stockholm]' },\n      ],\n    },\n  },\n  // Today (in Stockholm timezone) — entire row in amber\n  {\n    apply: {\n      color: { value: '#fef9c3' },\n      textColor: { value: '#713f12' },\n    },\n    column: null,\n    priority: 1,\n    where: {\n      and: [\n        {\n          greaterThanOrEqual: [\n            { column: 'scheduledDate' },\n            { datetime: '2026-06-25T00:00:00[Europe/Stockholm]' },\n          ],\n        },\n        {\n          lessThan: [\n            { column: 'scheduledDate' },\n            { datetime: '2026-06-26T00:00:00[Europe/Stockholm]' },\n          ],\n        },\n      ],\n    },\n  },\n  // Far future (after 2026-07-15 midnight Stockholm time) — entire row in green\n  {\n    apply: {\n      color: { value: '#dcfce7' },\n      textColor: { value: '#14532d' },\n    },\n    column: null,\n    priority: 1,\n    where: {\n      greaterThanOrEqual: [\n        { column: 'scheduledDate' },\n        { datetime: '2026-07-15T00:00:00[Europe/Stockholm]' },\n      ],\n    },\n  },\n  // Outside Stockholm business hours (before 09:00 CEST or from 17:00 CEST) —\n  // time cell in orange. The { time: \"...\" } literals carry an offset so the\n  // engine normalises them to UTC before comparing against scheduledTimeMs.\n  {\n    apply: {\n      color: { value: '#ffedd5' },\n      textColor: { value: '#7c2d12' },\n    },\n    column: 'scheduledTimeMs',\n    priority: 2,\n    where: {\n      or: [\n        {\n          lessThan: [{ column: 'scheduledTimeMs' }, { time: '09:00:00+02:00' }],\n        },\n        {\n          greaterThanOrEqual: [\n            { column: 'scheduledTimeMs' },\n            { time: '17:00:00+02:00' },\n          ],\n        },\n      ],\n    },\n  },\n  // Cancelled events — all cells grayed out at highest priority\n  {\n    apply: {\n      color: { value: '#f3f4f6' },\n      textColor: { value: '#9ca3af' },\n    },\n    column: null,\n    priority: 5,\n    where: { equal: [{ column: 'status' }, 'cancelled'] },\n  },\n];\n\nconst Component = () => {\n  const columnHelper = createColumnHelper<EventRow>();\n\n  const columns = [\n    columnHelper.accessor('event', {\n      cell: (info) => info.getValue(),\n      header: () => 'Event',\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('scheduledDate', {\n      cell: (info) =>\n        info.getValue().toLocaleDateString('en-GB', {\n          day: 'numeric',\n          month: 'short',\n          timeZone: 'Europe/Stockholm',\n          year: 'numeric',\n        }),\n      header: () => 'Date (Stockholm)',\n      minSize: 150,\n      size: 170,\n    }),\n    columnHelper.accessor('localTimeDisplay', {\n      cell: (info) => info.getValue(),\n      header: () => 'Local time',\n      minSize: 160,\n      size: 180,\n    }),\n    columnHelper.accessor('scheduledTimeMs', {\n      cell: (info) => {\n        const ms = info.getValue();\n        const hours = Math.floor(ms / 3_600_000)\n          .toString()\n          .padStart(2, '0');\n        const minutes = Math.floor((ms % 3_600_000) / 60_000)\n          .toString()\n          .padStart(2, '0');\n        return `${hours}:${minutes} UTC`;\n      },\n      header: () => 'Time (UTC)',\n      minSize: 110,\n      size: 130,\n    }),\n    columnHelper.accessor('status', {\n      cell: (info) => info.getValue(),\n      header: () => 'Status',\n      minSize: 100,\n      size: 120,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: { pageSize: 10 },\n    },\n  });\n\n  return (\n    <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n      <DataGrid\n        isResizable={false}\n        isKeyboardNavigable={false}\n        tableInstance={table}\n        styleRules={styleRules}\n        styling={{\n          borderStyle: 'all-sides',\n          hasHoverEffects: true,\n          hasZebraStriping: false,\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/data-grid/stories/datagrid-rule-based-styling.story.js

@@ -1,7 +1,7 @@
 "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]

package/lib/cjs/data-grid/stories/datagrid-rule-based-styling.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-rule-based-styling.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-rule-based-styling.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 { DataGrid } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { type DataGridStyleRule } from '../style-rules/types';\nimport { TABLE_DEMO_DATA, type TestDataFormat } from './staticData';\n\ntype BigintTestDataFormat = TestDataFormat & { preciseId: bigint };\n\nconst BIGINT_ID_START = BigInt('9007199254740993');\nconst tableData: BigintTestDataFormat[] = TABLE_DEMO_DATA.map((row, index) => ({\n  ...row,\n  preciseId: BIGINT_ID_START + BigInt(index),\n}));\n\nconst styleRules: DataGridStyleRule[] = [\n  // Row coloring: all cells styled when name contains \"Alicia\"\n  {\n    apply: {\n      color: { value: '#000000' },\n      textColor: { value: '#ffffff' },\n    },\n    column: null,\n    priority: 3,\n    where: { contains: [{ column: 'name' }, 'Alicia'] },\n  },\n  // Cell coloring: cells in the \"age\" column with value 51 get green\n  {\n    apply: { color: { value: '#00bb00' } },\n    column: 'age',\n    priority: 3,\n    where: { equal: [{ column: 'age' }, 51] },\n  },\n  // Dual color ranges on the \"age\" column: independent gradients for background\n  // (driven by age, full 0-100 range) and text color (driven by age too, but\n  // with a narrower 20-80 band so the text contrast is calibrated separately).\n  {\n    apply: {\n      colorRange: {\n        maxColor: '#f00000',\n        maxValue: 100,\n        midColor: '#a00000',\n        midValue: 50,\n        minColor: '#800000',\n        minValue: 0,\n        onColumn: 'age',\n      },\n      textColorRange: {\n        maxColor: '#aaaaaa',\n        maxValue: 80,\n        minColor: '#ffffff',\n        minValue: 20,\n        onColumn: 'age',\n      },\n    },\n    column: 'age',\n    priority: 2, // Lower priority so explicit green rule overrides\n  },\n  // Multi-column rule: all cells styled when age > 50 AND name contains \"o\"\n  {\n    apply: {\n      color: { value: '#fef3c7' },\n      textColor: { value: '#000000' },\n    },\n    column: null,\n    priority: 0, // Lower priority so other rules take precedence\n    where: {\n      and: [\n        { greaterThan: [{ column: 'age' }, 50] },\n        { contains: [{ column: 'name' }, 'o'] },\n      ],\n    },\n  },\n  // Bigint range: adjacent values above Number.MAX_SAFE_INTEGER retain their\n  // precision. Wrapped literals are JSON-safe; BigInt(...) is programmatic.\n  {\n    apply: {\n      colorRange: {\n        maxColor: '#7c3aed',\n        maxValue: BIGINT_ID_START + BigInt(tableData.length - 1),\n        minColor: '#ede9fe',\n        minValue: { bigint: BIGINT_ID_START.toString() },\n        onColumn: 'preciseId',\n      },\n      textColor: { value: '#111827' },\n    },\n    column: 'preciseId',\n    priority: 1,\n  },\n  // Exact bigint comparison using the JSON-safe literal form.\n  {\n    apply: {\n      color: { value: '#4c1d95' },\n      textColor: { value: '#ffffff' },\n    },\n    column: 'preciseId',\n    priority: 2,\n    where: {\n      equal: [\n        { column: 'preciseId' },\n        { bigint: (BIGINT_ID_START + BigInt(2)).toString() },\n      ],\n    },\n  },\n  // Accessible default text color: a background is set but no textColor, so an\n  // accessible text color is chosen automatically for contrast against the\n  // dark background. Compare the cypherCommand cell here with the one below,\n  // which uses the same background but an explicit (low-contrast) textColor.\n  {\n    apply: { color: { value: '#1e3a5f' } },\n    column: 'cypherCommand',\n    priority: 1,\n    where: { equal: [{ column: 'name' }, 'Ken Kessler'] },\n  },\n  // Explicit textColor always wins: even a low-contrast text color is left\n  // untouched -- the automatic accessible default only fills in when no\n  // textColor/textColorRange resolved one.\n  {\n    apply: {\n      color: { value: '#1e3a5f' },\n      textColor: { value: '#fca5a5' },\n    },\n    column: 'cypherCommand',\n    priority: 1,\n    where: { equal: [{ column: 'name' }, 'Jonathon Graham'] },\n  },\n];\n\nconst Component = () => {\n  const columnHelper = createColumnHelper<BigintTestDataFormat>();\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      header: () => 'Name',\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      header: () => 'Age',\n      minSize: 80,\n    }),\n    columnHelper.accessor('preciseId', {\n      cell: (info) => info.getValue().toString(),\n      header: () => 'Bigint ID',\n      minSize: 180,\n      size: 180,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      header: () => 'Cypher Command',\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data: tableData,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 10,\n      },\n    },\n  });\n\n  return (\n    <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n      <DataGrid\n        isResizable={false}\n        tableInstance={table}\n        isKeyboardNavigable={false}\n        styleRules={styleRules}\n        styling={{\n          borderStyle: 'all-sides',\n          hasHoverEffects: true,\n          hasZebraStriping: false,\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"datagrid-rule-based-styling.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-rule-based-styling.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 { DataGrid } from '@neo4j-ndl/react';\nimport {\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport { type DataGridStyleRule } from '../style-rules/types';\nimport { TABLE_DEMO_DATA, type TestDataFormat } from './staticData';\n\ntype BigintTestDataFormat = TestDataFormat & { preciseId: bigint };\n\nconst BIGINT_ID_START = BigInt('9007199254740993');\nconst tableData: BigintTestDataFormat[] = TABLE_DEMO_DATA.map((row, index) => ({\n  ...row,\n  preciseId: BIGINT_ID_START + BigInt(index),\n}));\n\nconst styleRules: DataGridStyleRule[] = [\n  // Row coloring: all cells styled when name contains \"Alicia\"\n  {\n    apply: {\n      color: { value: '#000000' },\n      textColor: { value: '#ffffff' },\n    },\n    column: null,\n    priority: 3,\n    where: { contains: [{ column: 'name' }, 'Alicia'] },\n  },\n  // Cell coloring: cells in the \"age\" column with value 51 get green\n  {\n    apply: { color: { value: '#00bb00' } },\n    column: 'age',\n    priority: 3,\n    where: { equal: [{ column: 'age' }, 51] },\n  },\n  // Dual color ranges on the \"age\" column: independent gradients for background\n  // (driven by age, full 0-100 range) and text color (driven by age too, but\n  // with a narrower 20-80 band so the text contrast is calibrated separately).\n  {\n    apply: {\n      colorRange: {\n        maxColor: '#f00000',\n        maxValue: 100,\n        midColor: '#a00000',\n        midValue: 50,\n        minColor: '#800000',\n        minValue: 0,\n        onColumn: 'age',\n      },\n      textColorRange: {\n        maxColor: '#aaaaaa',\n        maxValue: 80,\n        minColor: '#ffffff',\n        minValue: 20,\n        onColumn: 'age',\n      },\n    },\n    column: 'age',\n    priority: 2, // Lower priority so explicit green rule overrides\n  },\n  // Multi-column rule: all cells styled when age > 50 AND name contains \"o\"\n  {\n    apply: {\n      color: { value: '#fef3c7' },\n      textColor: { value: '#000000' },\n    },\n    column: null,\n    priority: 0, // Lower priority so other rules take precedence\n    where: {\n      and: [\n        { greaterThan: [{ column: 'age' }, 50] },\n        { contains: [{ column: 'name' }, 'o'] },\n      ],\n    },\n  },\n  // Bigint range: adjacent values above Number.MAX_SAFE_INTEGER retain their\n  // precision. Wrapped literals are JSON-safe; BigInt(...) is programmatic.\n  {\n    apply: {\n      colorRange: {\n        maxColor: '#7c3aed',\n        maxValue: BIGINT_ID_START + BigInt(tableData.length - 1),\n        minColor: '#ede9fe',\n        minValue: { bigint: BIGINT_ID_START.toString() },\n        onColumn: 'preciseId',\n      },\n      textColor: { value: '#111827' },\n    },\n    column: 'preciseId',\n    priority: 1,\n  },\n  // Exact bigint comparison using the JSON-safe literal form.\n  {\n    apply: {\n      color: { value: '#4c1d95' },\n      textColor: { value: '#ffffff' },\n    },\n    column: 'preciseId',\n    priority: 2,\n    where: {\n      equal: [\n        { column: 'preciseId' },\n        { bigint: (BIGINT_ID_START + BigInt(2)).toString() },\n      ],\n    },\n  },\n  // Accessible default text color: a background is set but no textColor, so an\n  // accessible text color is chosen automatically for contrast against the\n  // dark background. Compare the cypherCommand cell here with the one below,\n  // which uses the same background but an explicit (low-contrast) textColor.\n  {\n    apply: { color: { value: '#1e3a5f' } },\n    column: 'cypherCommand',\n    priority: 1,\n    where: { equal: [{ column: 'name' }, 'Ken Kessler'] },\n  },\n  // Explicit textColor always wins: even a low-contrast text color is left\n  // untouched -- the automatic accessible default only fills in when no\n  // textColor/textColorRange resolved one.\n  {\n    apply: {\n      color: { value: '#1e3a5f' },\n      textColor: { value: '#fca5a5' },\n    },\n    column: 'cypherCommand',\n    priority: 1,\n    where: { equal: [{ column: 'name' }, 'Jonathon Graham'] },\n  },\n];\n\nconst Component = () => {\n  const columnHelper = createColumnHelper<BigintTestDataFormat>();\n\n  const columns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      header: () => 'Name',\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      header: () => 'Age',\n      minSize: 80,\n    }),\n    columnHelper.accessor('preciseId', {\n      cell: (info) => info.getValue().toString(),\n      header: () => 'Bigint ID',\n      minSize: 180,\n      size: 180,\n    }),\n    columnHelper.accessor('cypherCommand', {\n      cell: (info) => info.getValue(),\n      header: () => 'Cypher Command',\n      minSize: 400,\n      size: 400,\n    }),\n  ];\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns,\n    data: tableData,\n    defaultColumn: {\n      maxSize: 800,\n      minSize: 80,\n    },\n    enableSorting: true,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 10,\n      },\n    },\n  });\n\n  return (\n    <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n      <DataGrid\n        isResizable={false}\n        tableInstance={table}\n        isKeyboardNavigable={false}\n        styleRules={styleRules}\n        styling={{\n          borderStyle: 'all-sides',\n          hasHoverEffects: true,\n          hasZebraStriping: false,\n        }}\n      />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/data-grid/stories/datagrid-search-and-filters.stories.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ColumnFiltering = exports.Searchable = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/**
+/*!
  *
  *  Copyright (c) "Neo4j"
  *  Neo4j Sweden AB [http://neo4j.com]