npm - @neo4j-ndl/react - Versions diffs - 4.25.8 → 5.0.0-alpha.0.3d763f7 - Mend

@neo4j-ndl/react 4.25.8 → 5.0.0-alpha.0.3d763f7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1176) hide show

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

@@ -70,7 +70,7 @@ const Component = () => {
             },
         },
     });
-    return ((0, jsx_runtime_1.jsx)("div", { className: "n-w-full n-bg-light-neutral-text-weakest", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: true, tableInstance: table, isKeyboardNavigable: true }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "w-full bg-light-neutral-text-weakest", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: true, tableInstance: table, isKeyboardNavigable: true }) }));
 };
 exports.default = Component;
 //# sourceMappingURL=datagrid-placeholder-states.story.js.map

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

	@@ -1 +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"]}
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,sCAAsC,YACnD,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=\"w-full 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 CHANGED Viewed

@@ -70,7 +70,7 @@ const Component = ({ isKeyboardNavigable = true, components, } = {}) => {
             },
         },
     });
-    return ((0, jsx_runtime_1.jsx)("div", { className: "n-w-full n-bg-light-neutral-text-weakest", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: true, tableInstance: table, isKeyboardNavigable: isKeyboardNavigable,
+    return ((0, jsx_runtime_1.jsx)("div", { className: "w-full bg-light-neutral-text-weakest", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: true, tableInstance: table, isKeyboardNavigable: isKeyboardNavigable,
             // @ts-expect-error limitations of storybooks makes it hard to handle generics
             components: components }) }));
 };

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

	@@ -1 +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"]}
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,sCAAsC,YACnD,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=\"w-full 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 CHANGED Viewed

@@ -294,7 +294,7 @@ const Component = () => {
             pagination: { pageSize: 10 },
         },
     });
-    return ((0, jsx_runtime_1.jsx)("div", { className: "n-w-full n-bg-light-neutral-text-weakest", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: false, isKeyboardNavigable: false, tableInstance: table, styleRules: styleRules, styling: {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "w-full bg-light-neutral-text-weakest", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: false, isKeyboardNavigable: false, tableInstance: table, styleRules: styleRules, styling: {
                 borderStyle: 'all-sides',
                 hasHoverEffects: true,
                 hasZebraStriping: false,

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

	@@ -1 +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"]}
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=\"w-full 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 CHANGED Viewed

@@ -184,7 +184,7 @@ const Component = () => {
             },
         },
     });
-    return ((0, jsx_runtime_1.jsx)("div", { className: "n-w-full n-bg-light-neutral-text-weakest", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: false, tableInstance: table, isKeyboardNavigable: false, styleRules: styleRules, styling: {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "w-full bg-light-neutral-text-weakest", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: false, tableInstance: table, isKeyboardNavigable: false, styleRules: styleRules, styling: {
                 borderStyle: 'all-sides',
                 hasHoverEffects: true,
                 hasZebraStriping: false,

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

	@@ -1 +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":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,uDAM+B;AAG/B,6CAAoE;AAIpE,MAAM,eAAe,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAAC;AACnD,MAAM,SAAS,GAA2B,4BAAe,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,iCACzE,GAAG,KACN,SAAS,EAAE,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,IAC1C,CAAC,CAAC;AAEJ,MAAM,UAAU,GAAwB;IACtC,6DAA6D;IAC7D;QACE,KAAK,EAAE;YACL,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC3B,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;SAChC;QACD,MAAM,EAAE,IAAI;QACZ,QAAQ,EAAE,CAAC;QACX,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,QAAQ,CAAC,EAAE;KACpD;IACD,mEAAmE;IACnE;QACE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;QACtC,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,CAAC;QACX,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,EAAE;KAC1C;IACD,8EAA8E;IAC9E,2EAA2E;IAC3E,6EAA6E;IAC7E;QACE,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,QAAQ,EAAE,SAAS;gBACnB,QAAQ,EAAE,GAAG;gBACb,QAAQ,EAAE,SAAS;gBACnB,QAAQ,EAAE,EAAE;gBACZ,QAAQ,EAAE,SAAS;gBACnB,QAAQ,EAAE,CAAC;gBACX,QAAQ,EAAE,KAAK;aAChB;YACD,cAAc,EAAE;gBACd,QAAQ,EAAE,SAAS;gBACnB,QAAQ,EAAE,EAAE;gBACZ,QAAQ,EAAE,SAAS;gBACnB,QAAQ,EAAE,EAAE;gBACZ,QAAQ,EAAE,KAAK;aAChB;SACF;QACD,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,CAAC,EAAE,kDAAkD;KAChE;IACD,0EAA0E;IAC1E;QACE,KAAK,EAAE;YACL,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC3B,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;SAChC;QACD,MAAM,EAAE,IAAI;QACZ,QAAQ,EAAE,CAAC,EAAE,gDAAgD;QAC7D,KAAK,EAAE;YACL,GAAG,EAAE;gBACH,EAAE,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,EAAE;gBACxC,EAAE,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,GAAG,CAAC,EAAE;aACxC;SACF;KACF;IACD,2EAA2E;IAC3E,0EAA0E;IAC1E;QACE,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,QAAQ,EAAE,SAAS;gBACnB,QAAQ,EAAE,eAAe,GAAG,MAAM,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC;gBACxD,QAAQ,EAAE,SAAS;gBACnB,QAAQ,EAAE,EAAE,MAAM,EAAE,eAAe,CAAC,QAAQ,EAAE,EAAE;gBAChD,QAAQ,EAAE,WAAW;aACtB;YACD,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;SAChC;QACD,MAAM,EAAE,WAAW;QACnB,QAAQ,EAAE,CAAC;KACZ;IACD,4DAA4D;IAC5D;QACE,KAAK,EAAE;YACL,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC3B,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;SAChC;QACD,MAAM,EAAE,WAAW;QACnB,QAAQ,EAAE,CAAC;QACX,KAAK,EAAE;YACL,KAAK,EAAE;gBACL,EAAE,MAAM,EAAE,WAAW,EAAE;gBACvB,EAAE,MAAM,EAAE,CAAC,eAAe,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE;aACrD;SACF;KACF;IACD,6EAA6E;IAC7E,yEAAyE;IACzE,2EAA2E;IAC3E,2EAA2E;IAC3E;QACE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;QACtC,MAAM,EAAE,eAAe;QACvB,QAAQ,EAAE,CAAC;QACX,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,aAAa,CAAC,EAAE;KACtD;IACD,yEAAyE;IACzE,sEAAsE;IACtE,yCAAyC;IACzC;QACE,KAAK,EAAE;YACL,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC3B,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;SAChC;QACD,MAAM,EAAE,eAAe;QACvB,QAAQ,EAAE,CAAC;QACX,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,iBAAiB,CAAC,EAAE;KAC1D;CACF,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,IAAA,gCAAkB,GAAwB,CAAC;IAEhE,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,GAAG,EAAE,CAAC,MAAM;YACpB,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,GAAG,EAAE,CAAC,KAAK;YACnB,OAAO,EAAE,EAAE;SACZ,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,WAAW,EAAE;YACjC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,QAAQ,EAAE;YAC1C,MAAM,EAAE,GAAG,EAAE,CAAC,WAAW;YACzB,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,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,SAAS;QACf,aAAa,EAAE;YACb,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,EAAE;SACZ;QACD,aAAa,EAAE,IAAI;QACnB,eAAe,EAAE,IAAA,6BAAe,GAAE;QAClC,qBAAqB,EAAE,IAAA,mCAAqB,GAAE;QAC9C,iBAAiB,EAAE,IAAA,+BAAiB,GAAE;QACtC,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,EAAE;aACb;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,gCAAK,SAAS,EAAC,0CAA0C,YACvD,uBAAC,gBAAQ,IACP,WAAW,EAAE,KAAK,EAClB,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,KAAK,EAC1B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE;gBACP,WAAW,EAAE,WAAW;gBACxB,eAAe,EAAE,IAAI;gBACrB,gBAAgB,EAAE,KAAK;aACxB,GACD,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 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"]}
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=\"w-full 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 CHANGED Viewed

@@ -150,17 +150,17 @@ const Searchable = () => {
         }
         return false;
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col", ref: ref, children: [(0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-col n-gap-token-16 n-pb-token-16", children: (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.TextInput, { "aria-label": "Table search", value: globalFilter, placeholder: "Search", leadingElement: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}), isClearable: true, onChange: (event) => setGlobalFilter(event.target.value) }), (0, jsx_runtime_1.jsx)(OpenFilterMenuIconButton, { isOpen: isOpen, onClick: handleClick, description: "Filter Menu" })] }) }), (0, jsx_runtime_1.jsx)(react_1.Divider, {}), (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: true, tableInstance: table }), (0, jsx_runtime_1.jsx)(react_1.Popover, { isOpen: isOpen, anchorElement: anchorEl, onOpenChange: (isOpen) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col", ref: ref, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-token-16 pb-token-16", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.TextInput, { "aria-label": "Table search", value: globalFilter, placeholder: "Search", leadingElement: (0, jsx_runtime_1.jsx)(icons_1.MagnifyingGlassIconOutline, {}), isClearable: true, onChange: (event) => setGlobalFilter(event.target.value) }), (0, jsx_runtime_1.jsx)(OpenFilterMenuIconButton, { isOpen: isOpen, onClick: handleClick, description: "Filter Menu" })] }) }), (0, jsx_runtime_1.jsx)(react_1.Divider, {}), (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: true, tableInstance: table }), (0, jsx_runtime_1.jsx)(react_1.Popover, { isOpen: isOpen, anchorElement: anchorEl, onOpenChange: (isOpen) => {
                     if (!isOpen) {
                         handleClose();
                     }
                 }, offset: ({ rects }) => ({
                     crossAxis: -rects.floating.width,
-                }), children: (0, jsx_runtime_1.jsx)(react_1.Popover.Content, { children: (0, jsx_runtime_1.jsxs)("div", { className: "n-grid n-gap-token-16 n-p-token-24 n-w-[300px]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "n-w-full n-flex n-justify-between n-items-center", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-4", children: "Filter" }), (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { onClick: handleClose, description: "Close filter menu", size: "medium", htmlAttributes: {
+                }), children: (0, jsx_runtime_1.jsx)(react_1.Popover.Content, { children: (0, jsx_runtime_1.jsxs)("div", { className: "grid gap-token-16 p-token-24 w-[300px]", children: [(0, jsx_runtime_1.jsxs)("div", { className: "w-full flex justify-between items-center", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-4", children: "Filter" }), (0, jsx_runtime_1.jsx)(react_1.CleanIconButton, { onClick: handleClose, description: "Close filter menu", size: "medium", htmlAttributes: {
                                             title: 'Close filter menu',
-                                        }, children: (0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", className: "n-text-neutral-text-weaker n-pb-token-4", children: "Age" }), (0, jsx_runtime_1.jsx)(react_1.Checkbox, { isChecked: isAgeFilterApplied('min', 18), label: "Age >= 18", onClick: () => toggleAgeFilter({ min: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Checkbox, { isChecked: isAgeFilterApplied('max', 63), label: "Age <= 63", onClick: () => toggleAgeFilter({ max: 63 }) })] }), (0, jsx_runtime_1.jsx)(react_1.TextButton, { className: "n-mt-token-32 n-justify-self-end", variant: "danger", "aria-label": "Clear filters", onClick: () => {
+                                        }, children: (0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", className: "text-neutral-text-weaker pb-token-4", children: "Age" }), (0, jsx_runtime_1.jsx)(react_1.Checkbox, { isChecked: isAgeFilterApplied('min', 18), label: "Age >= 18", onClick: () => toggleAgeFilter({ min: 18 }) }), (0, jsx_runtime_1.jsx)(react_1.Checkbox, { isChecked: isAgeFilterApplied('max', 63), label: "Age <= 63", onClick: () => toggleAgeFilter({ max: 63 }) })] }), (0, jsx_runtime_1.jsx)(react_1.TextButton, { className: "mt-token-32 justify-self-end", variant: "danger", "aria-label": "Clear filters", onClick: () => {
                                     table.resetColumnFilters();
-                                }, children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", className: "n-text-danger-text n-font-bold", children: "Clear all" }) })] }) }) })] }));
+                                }, children: (0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", className: "text-danger-text font-bold", children: "Clear all" }) })] }) }) })] }));
 };
 exports.Searchable = Searchable;
 const ColumnFiltering = () => {
@@ -229,7 +229,7 @@ const ColumnFiltering = () => {
             },
         },
     });
-    return ((0, jsx_runtime_1.jsx)("div", { className: "n-h-[1000px] n-w-full n-bg-primary-bg-weak n-p-token-32", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isKeyboardNavigable: true, isResizable: true, tableInstance: table }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "h-[1000px] w-full bg-primary-bg-weak p-token-32", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isKeyboardNavigable: true, isResizable: true, tableInstance: table }) }));
 };
 exports.ColumnFiltering = ColumnFiltering;
 //# sourceMappingURL=datagrid-search-and-filters.stories.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"datagrid-search-and-filters.stories.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-search-and-filters.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 {\n Checkbox,\n CleanIconButton,\n DataGrid,\n Divider,\n IconButton,\n Popover,\n TextButton,\n TextInput,\n Typography,\n} from '@neo4j-ndl/react';\nimport {\n FunnelIconOutline,\n MagnifyingGlassIconOutline,\n XMarkIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport {\n type ColumnFiltersState,\n type ColumnMeta,\n createColumnHelper,\n type FilterFn,\n getCoreRowModel,\n getFilteredRowModel,\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\nexport default {\n component: DataGrid,\n id: 'components-data-grid-search-and-filters',\n parameters: {\n chromatic: { delay: 1000 },\n controls: { disable: true },\n },\n title: 'Components/DataGrid/Search And Filters',\n};\n\ninterface AgeFilterOptions {\n min?: number;\n max?: number;\n}\n\n/\n Custom global function as there is a bug in current version:\n * https://github.com/TanStack/table/issues/4280#issuecomment-1244878232\n */\nconst globalFilterFn: FilterFn<TestDataFormat> = (\n row,\n columnId,\n filterValue: string,\n) => {\n const search = filterValue.toLowerCase();\n\n let value = row.getValue(columnId) as string;\n if (typeof value === 'number') {\n value = String(value);\n }\n\n return value?.toLowerCase().includes(search);\n};\n\nconst OpenFilterMenuIconButton = ({\n onClick,\n isOpen,\n description,\n ref,\n}: {\n isOpen: boolean;\n} & Omit<React.ComponentProps<typeof IconButton>, 'children'>) => (\n <IconButton\n ref={ref}\n onClick={onClick}\n aria-controls={isOpen ? 'default-menu' : undefined}\n aria-haspopup=\"true\"\n aria-expanded={isOpen}\n description={description}\n size=\"medium\"\n >\n <FunnelIconOutline />\n </IconButton>\n);\n\nexport const Searchable = () => {\n const [anchorEl, setAnchorEl] = useState<HTMLElement \| null>(null);\n const isOpen = Boolean(anchorEl);\n const ref = useRef<HTMLDivElement>(null);\n const [globalFilter, setGlobalFilter] = useState('');\n const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n\n const handleClick = (\n event: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>,\n ) => {\n setAnchorEl(event.currentTarget);\n };\n\n const handleClose = () => {\n setAnchorEl(null);\n };\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 filterFns: {},\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n globalFilterFn: globalFilterFn,\n initialState: {\n pagination: {\n pageSize: 5,\n },\n },\n onColumnFiltersChange: setColumnFilters,\n onGlobalFilterChange: setGlobalFilter,\n state: {\n columnFilters,\n globalFilter,\n },\n });\n\n const toggleAgeFilter = ({ min, max }: AgeFilterOptions) => {\n const ageColumn = table.getColumn('age');\n\n if (!ageColumn) {\n return;\n }\n\n const currentFilter = ageColumn.getFilterValue() as\n \| [number?, number?]\n \| undefined;\n\n // Helper function to determine the new filter value for a specific bound\n const determineNewBound = (currentBound?: number, newBound?: number) => {\n if (newBound !== undefined && currentBound === newBound) {\n return undefined;\n }\n return newBound !== undefined ? newBound : currentBound;\n };\n\n const newFilter: [number?, number?] = [\n determineNewBound(currentFilter?.[0], min),\n determineNewBound(currentFilter?.[1], max),\n ];\n\n // Update the filter value in the table state\n ageColumn.setFilterValue(\n newFilter[0] === undefined && newFilter[1] === undefined\n ? undefined\n : newFilter,\n );\n };\n\n const isAgeFilterApplied = (type: 'min' \| 'max', value: number) => {\n const ageFilter = columnFilters.find((filter) => filter.id === 'age');\n if (ageFilter) {\n const [min, max] = ageFilter.value as [number, number];\n if (type === 'min') {\n return min === value;\n }\n if (type === 'max') {\n return max === value;\n }\n }\n return false;\n };\n\n return (\n <div className=\"n-flex n-flex-col\" ref={ref}>\n <div className=\"n-flex n-flex-col n-gap-token-16 n-pb-token-16\">\n <div className=\"n-flex n-gap-token-8\">\n <TextInput\n aria-label=\"Table search\"\n value={globalFilter}\n placeholder=\"Search\"\n leadingElement={<MagnifyingGlassIconOutline />}\n isClearable={true}\n onChange={(event) => setGlobalFilter(event.target.value)}\n />\n <OpenFilterMenuIconButton\n isOpen={isOpen}\n onClick={handleClick}\n description=\"Filter Menu\"\n />\n </div>\n </div>\n <Divider />\n <DataGrid isResizable={true} tableInstance={table} />\n <Popover\n isOpen={isOpen}\n anchorElement={anchorEl}\n onOpenChange={(isOpen) => {\n if (!isOpen) {\n handleClose();\n }\n }}\n offset={({ rects }) => ({\n crossAxis: -rects.floating.width,\n })}\n >\n <Popover.Content>\n <div className=\"n-grid n-gap-token-16 n-p-token-24 n-w-[300px]\">\n <div className=\"n-w-full n-flex n-justify-between n-items-center\">\n <Typography variant=\"title-4\">Filter</Typography>\n <CleanIconButton\n onClick={handleClose}\n description=\"Close filter menu\"\n size=\"medium\"\n htmlAttributes={{\n title: 'Close filter menu',\n }}\n >\n <XMarkIconOutline />\n </CleanIconButton>\n </div>\n <div className=\"n-flex n-flex-col n-gap-2\">\n <Typography\n variant=\"body-medium\"\n className=\"n-text-neutral-text-weaker n-pb-token-4\"\n >\n Age\n </Typography>\n <Checkbox\n isChecked={isAgeFilterApplied('min', 18)}\n label=\"Age >= 18\"\n onClick={() => toggleAgeFilter({ min: 18 })}\n />\n <Checkbox\n isChecked={isAgeFilterApplied('max', 63)}\n label=\"Age <= 63\"\n onClick={() => toggleAgeFilter({ max: 63 })}\n />\n </div>\n <TextButton\n className=\"n-mt-token-32 n-justify-self-end\"\n variant=\"danger\"\n aria-label=\"Clear filters\"\n onClick={() => {\n table.resetColumnFilters();\n }}\n >\n <Typography\n variant=\"body-medium\"\n className=\"n-text-danger-text n-font-bold\"\n >\n Clear all\n </Typography>\n </TextButton>\n </div>\n </Popover.Content>\n </Popover>\n </div>\n );\n};\n\nexport const ColumnFiltering = () => {\n const [tableData, setTableData] = useState(TABLE_DEMO_DATA);\n const [isAgeFilterApplied, setIsAgeFilterApplied] = useState(false);\n const columnHelper = createColumnHelper<TestDataFormat>();\n\n const ColumnActions: ColumnMeta<TestDataFormat, unknown> = {\n columnActions: {\n actions: [\n {\n onClick: () => {\n // Filter the input table data value, TABLE_DEMO_DATA\n if (isAgeFilterApplied) {\n setTableData(TABLE_DEMO_DATA);\n setIsAgeFilterApplied(false);\n return;\n } else {\n const filteredData = TABLE_DEMO_DATA.filter(\n (data) => data.age >= 18,\n );\n setTableData(filteredData);\n setIsAgeFilterApplied(true);\n }\n },\n title: 'Age >= 18',\n },\n ],\n },\n };\n\n const columns = [\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 meta: {\n ...ColumnActions,\n },\n minSize: 80,\n }),\n columnHelper.accessor('cypherCommand', {\n cell: (info) => info.getValue(),\n minSize: 400,\n size: 400,\n }),\n ];\n\n const table = useReactTable({\n columnResizeMode: 'onChange',\n columns,\n data: tableData,\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 return (\n <div className=\"n-h-[1000px] n-w-full n-bg-primary-bg-weak n-p-token-32\">\n <DataGrid\n isKeyboardNavigable={true}\n isResizable={true}\n tableInstance={table}\n />\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"datagrid-search-and-filters.stories.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-search-and-filters.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 {\n Checkbox,\n CleanIconButton,\n DataGrid,\n Divider,\n IconButton,\n Popover,\n TextButton,\n TextInput,\n Typography,\n} from '@neo4j-ndl/react';\nimport {\n FunnelIconOutline,\n MagnifyingGlassIconOutline,\n XMarkIconOutline,\n} from '@neo4j-ndl/react/icons';\nimport {\n type ColumnFiltersState,\n type ColumnMeta,\n createColumnHelper,\n type FilterFn,\n getCoreRowModel,\n getFilteredRowModel,\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\nexport default {\n component: DataGrid,\n id: 'components-data-grid-search-and-filters',\n parameters: {\n chromatic: { delay: 1000 },\n controls: { disable: true },\n },\n title: 'Components/DataGrid/Search And Filters',\n};\n\ninterface AgeFilterOptions {\n min?: number;\n max?: number;\n}\n\n/\n Custom global function as there is a bug in current version:\n * https://github.com/TanStack/table/issues/4280#issuecomment-1244878232\n */\nconst globalFilterFn: FilterFn<TestDataFormat> = (\n row,\n columnId,\n filterValue: string,\n) => {\n const search = filterValue.toLowerCase();\n\n let value = row.getValue(columnId) as string;\n if (typeof value === 'number') {\n value = String(value);\n }\n\n return value?.toLowerCase().includes(search);\n};\n\nconst OpenFilterMenuIconButton = ({\n onClick,\n isOpen,\n description,\n ref,\n}: {\n isOpen: boolean;\n} & Omit<React.ComponentProps<typeof IconButton>, 'children'>) => (\n <IconButton\n ref={ref}\n onClick={onClick}\n aria-controls={isOpen ? 'default-menu' : undefined}\n aria-haspopup=\"true\"\n aria-expanded={isOpen}\n description={description}\n size=\"medium\"\n >\n <FunnelIconOutline />\n </IconButton>\n);\n\nexport const Searchable = () => {\n const [anchorEl, setAnchorEl] = useState<HTMLElement \| null>(null);\n const isOpen = Boolean(anchorEl);\n const ref = useRef<HTMLDivElement>(null);\n const [globalFilter, setGlobalFilter] = useState('');\n const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);\n\n const handleClick = (\n event: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>,\n ) => {\n setAnchorEl(event.currentTarget);\n };\n\n const handleClose = () => {\n setAnchorEl(null);\n };\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 filterFns: {},\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n globalFilterFn: globalFilterFn,\n initialState: {\n pagination: {\n pageSize: 5,\n },\n },\n onColumnFiltersChange: setColumnFilters,\n onGlobalFilterChange: setGlobalFilter,\n state: {\n columnFilters,\n globalFilter,\n },\n });\n\n const toggleAgeFilter = ({ min, max }: AgeFilterOptions) => {\n const ageColumn = table.getColumn('age');\n\n if (!ageColumn) {\n return;\n }\n\n const currentFilter = ageColumn.getFilterValue() as\n \| [number?, number?]\n \| undefined;\n\n // Helper function to determine the new filter value for a specific bound\n const determineNewBound = (currentBound?: number, newBound?: number) => {\n if (newBound !== undefined && currentBound === newBound) {\n return undefined;\n }\n return newBound !== undefined ? newBound : currentBound;\n };\n\n const newFilter: [number?, number?] = [\n determineNewBound(currentFilter?.[0], min),\n determineNewBound(currentFilter?.[1], max),\n ];\n\n // Update the filter value in the table state\n ageColumn.setFilterValue(\n newFilter[0] === undefined && newFilter[1] === undefined\n ? undefined\n : newFilter,\n );\n };\n\n const isAgeFilterApplied = (type: 'min' \| 'max', value: number) => {\n const ageFilter = columnFilters.find((filter) => filter.id === 'age');\n if (ageFilter) {\n const [min, max] = ageFilter.value as [number, number];\n if (type === 'min') {\n return min === value;\n }\n if (type === 'max') {\n return max === value;\n }\n }\n return false;\n };\n\n return (\n <div className=\"flex flex-col\" ref={ref}>\n <div className=\"flex flex-col gap-token-16 pb-token-16\">\n <div className=\"flex gap-token-8\">\n <TextInput\n aria-label=\"Table search\"\n value={globalFilter}\n placeholder=\"Search\"\n leadingElement={<MagnifyingGlassIconOutline />}\n isClearable={true}\n onChange={(event) => setGlobalFilter(event.target.value)}\n />\n <OpenFilterMenuIconButton\n isOpen={isOpen}\n onClick={handleClick}\n description=\"Filter Menu\"\n />\n </div>\n </div>\n <Divider />\n <DataGrid isResizable={true} tableInstance={table} />\n <Popover\n isOpen={isOpen}\n anchorElement={anchorEl}\n onOpenChange={(isOpen) => {\n if (!isOpen) {\n handleClose();\n }\n }}\n offset={({ rects }) => ({\n crossAxis: -rects.floating.width,\n })}\n >\n <Popover.Content>\n <div className=\"grid gap-token-16 p-token-24 w-[300px]\">\n <div className=\"w-full flex justify-between items-center\">\n <Typography variant=\"title-4\">Filter</Typography>\n <CleanIconButton\n onClick={handleClose}\n description=\"Close filter menu\"\n size=\"medium\"\n htmlAttributes={{\n title: 'Close filter menu',\n }}\n >\n <XMarkIconOutline />\n </CleanIconButton>\n </div>\n <div className=\"flex flex-col gap-2\">\n <Typography\n variant=\"body-medium\"\n className=\"text-neutral-text-weaker pb-token-4\"\n >\n Age\n </Typography>\n <Checkbox\n isChecked={isAgeFilterApplied('min', 18)}\n label=\"Age >= 18\"\n onClick={() => toggleAgeFilter({ min: 18 })}\n />\n <Checkbox\n isChecked={isAgeFilterApplied('max', 63)}\n label=\"Age <= 63\"\n onClick={() => toggleAgeFilter({ max: 63 })}\n />\n </div>\n <TextButton\n className=\"mt-token-32 justify-self-end\"\n variant=\"danger\"\n aria-label=\"Clear filters\"\n onClick={() => {\n table.resetColumnFilters();\n }}\n >\n <Typography\n variant=\"body-medium\"\n className=\"text-danger-text font-bold\"\n >\n Clear all\n </Typography>\n </TextButton>\n </div>\n </Popover.Content>\n </Popover>\n </div>\n );\n};\n\nexport const ColumnFiltering = () => {\n const [tableData, setTableData] = useState(TABLE_DEMO_DATA);\n const [isAgeFilterApplied, setIsAgeFilterApplied] = useState(false);\n const columnHelper = createColumnHelper<TestDataFormat>();\n\n const ColumnActions: ColumnMeta<TestDataFormat, unknown> = {\n columnActions: {\n actions: [\n {\n onClick: () => {\n // Filter the input table data value, TABLE_DEMO_DATA\n if (isAgeFilterApplied) {\n setTableData(TABLE_DEMO_DATA);\n setIsAgeFilterApplied(false);\n return;\n } else {\n const filteredData = TABLE_DEMO_DATA.filter(\n (data) => data.age >= 18,\n );\n setTableData(filteredData);\n setIsAgeFilterApplied(true);\n }\n },\n title: 'Age >= 18',\n },\n ],\n },\n };\n\n const columns = [\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 meta: {\n ...ColumnActions,\n },\n minSize: 80,\n }),\n columnHelper.accessor('cypherCommand', {\n cell: (info) => info.getValue(),\n minSize: 400,\n size: 400,\n }),\n ];\n\n const table = useReactTable({\n columnResizeMode: 'onChange',\n columns,\n data: tableData,\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 return (\n <div className=\"h-[1000px] w-full bg-primary-bg-weak p-token-32\">\n <DataGrid\n isKeyboardNavigable={true}\n isResizable={true}\n tableInstance={table}\n />\n </div>\n );\n};\n"]}

package/lib/cjs/data-grid/stories/datagrid-simple.story.js CHANGED Viewed

@@ -71,7 +71,7 @@ const Component = () => {
             },
         },
     });
-    return ((0, jsx_runtime_1.jsx)("div", { className: "n-w-full n-bg-light-neutral-text-weakest", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: false, tableInstance: table, isKeyboardNavigable: false, styling: {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "w-full bg-light-neutral-text-weakest", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: false, tableInstance: table, isKeyboardNavigable: false, styling: {
                 borderStyle: 'all-sides',
                 hasHoverEffects: true,
                 hasZebraStriping: false,

package/lib/cjs/data-grid/stories/datagrid-simple.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"datagrid-simple.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-simple.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,uDAM+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,IAAI;QACnB,eAAe,EAAE,IAAA,6BAAe,GAAE;QAClC,qBAAqB,EAAE,IAAA,mCAAqB,GAAE;QAC9C,iBAAiB,EAAE,IAAA,+BAAiB,GAAE;QACtC,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,KAAK,EAClB,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,KAAK,EAC1B,OAAO,EAAE;gBACP,WAAW,EAAE,WAAW;gBACxB,eAAe,EAAE,IAAI;gBACrB,gBAAgB,EAAE,KAAK;aACxB,GACD,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 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 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: true,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\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={false}\n tableInstance={table}\n isKeyboardNavigable={false}\n styling={{\n borderStyle: 'all-sides',\n hasHoverEffects: true,\n hasZebraStriping: false,\n }}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"datagrid-simple.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-simple.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,uDAM+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,IAAI;QACnB,eAAe,EAAE,IAAA,6BAAe,GAAE;QAClC,qBAAqB,EAAE,IAAA,mCAAqB,GAAE;QAC9C,iBAAiB,EAAE,IAAA,+BAAiB,GAAE;QACtC,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,CAAC;aACZ;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,gCAAK,SAAS,EAAC,sCAAsC,YACnD,uBAAC,gBAAQ,IACP,WAAW,EAAE,KAAK,EAClB,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,KAAK,EAC1B,OAAO,EAAE;gBACP,WAAW,EAAE,WAAW;gBACxB,eAAe,EAAE,IAAI;gBACrB,gBAAgB,EAAE,KAAK;aACxB,GACD,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 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 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: true,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n initialState: {\n pagination: {\n pageSize: 5,\n },\n },\n });\n\n return (\n <div className=\"w-full bg-light-neutral-text-weakest\">\n <DataGrid\n isResizable={false}\n tableInstance={table}\n isKeyboardNavigable={false}\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-single-selectable.story.js CHANGED Viewed

@@ -84,7 +84,7 @@ const Component = () => {
             },
         },
     });
-    return ((0, jsx_runtime_1.jsx)("div", { className: "n-w-full", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { components: {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { components: {
                 BodyRow: CustomBodyRow,
                 Navigation: null,
             }, isKeyboardNavigable: false, isResizable: false, tableInstance: table }) }));

package/lib/cjs/data-grid/stories/datagrid-single-selectable.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"datagrid-single-selectable.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-single-selectable.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAuE;AACvE,uDAK+B;AAS/B,MAAM,YAAY,GAAG,IAAA,gCAAkB,GAAgB,CAAC;AAExD,MAAM,YAAY,GAAmB;IACnC;QACE,QAAQ,EAAE,CAAC;QACX,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,OAAO;KACjB;IACD;QACE,QAAQ,EAAE,CAAC;QACX,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,OAAO;KACjB;IACD;QACE,QAAQ,EAAE,CAAC;QACX,EAAE,EAAE,CAAC;QACL,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,OAAO;KACjB;CACF,CAAC;AAEF,MAAM,OAAO,GAAG;IACd,YAAY,CAAC,QAAQ,CAAC,IAAI,EAAE;QAC1B,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CACvB,uBAAC,aAAK,IACJ,SAAS,EAAE,SAAS,IAAI,CAAC,QAAQ,EAAE,EAAE,EACrC,SAAS,EAAE,GAAG,CAAC,aAAa,EAAE,GAC9B,CACH;QACD,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI;QAClB,OAAO,EAAE,EAAE;QACX,IAAI,EAAE,EAAE;KACT,CAAC;IACF,YAAY,CAAC,QAAQ,CAAC,QAAQ,EAAE;QAC9B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;QAC/B,OAAO,EAAE,GAAG;KACb,CAAC;IACF,YAAY,CAAC,QAAQ,CAAC,UAAU,EAAE;QAChC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;KAChC,CAAC;IACF,YAAY,CAAC,QAAQ,CAAC,SAAS,EAAE;QAC/B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;KAChC,CAAC;CACH,CAAC;AAEF,MAAM,aAAa,GAAG,CAAC,EACrB,GAAG,GACyD,EAAE,EAAE;IAChE,MAAM,EAAE,UAAU,EAAE,GAAG,IAAA,0BAAkB,GAAgB,CAAC;IAE1D,OAAO,CACL,gCAAkB,IAAI,EAAC,KAAK,EAAC,SAAS,EAAC,kBAAkB,YACtD,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CACxB,CAAC,IAAI,EAAE,EAAE,CACP,UAAU,CAAC,QAAQ,IAAI,CACrB,uBAAC,UAAU,CAAC,QAAQ,IAElB,IAAI,EAAE,IAAI,EACV,cAAc,EAAE;gBACd,OAAO,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;aACxD,IAJI,IAAI,CAAC,EAAE,CAKZ,CACH,CACJ,IAZO,GAAG,CAAC,EAAE,CAaV,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,KAAK,GAAG,IAAA,2BAAa,EAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO;QACP,IAAI,EAAE,YAAY;QAClB,uBAAuB,EAAE,KAAK;QAC9B,aAAa,EAAE,KAAK;QACpB,eAAe,EAAE,IAAA,6BAAe,GAAE;QAClC,qBAAqB,EAAE,IAAA,mCAAqB,GAAE;QAC9C,YAAY,EAAE;YACZ,YAAY,EAAE;gBACZ,CAAC,EAAE,IAAI;aACR;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,gCAAK,SAAS,EAAC,~~UAAU~~,~~YACvB~~,uBAAC,gBAAQ,IACP,UAAU,EAAE;gBACV,OAAO,EAAE,aAAa;gBACtB,UAAU,EAAE,IAAI;aACjB,EACD,mBAAmB,EAAE,KAAK,EAC1B,WAAW,EAAE,KAAK,EAClB,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, Radio, useDataGridContext } from '@neo4j-ndl/react';\nimport {\n createColumnHelper,\n getCoreRowModel,\n getPaginationRowModel,\n useReactTable,\n} from '@tanstack/react-table';\n\ntype PricingEntry = {\n cpuCount: number;\n id: number;\n memory: string;\n storage: string;\n};\n\nconst columnHelper = createColumnHelper<PricingEntry>();\n\nconst DEMO_PRICING: PricingEntry[] = [\n {\n cpuCount: 1,\n id: 1,\n memory: '1 GB',\n storage: '10 GB',\n },\n {\n cpuCount: 2,\n id: 2,\n memory: '2 GB',\n storage: '20 GB',\n },\n {\n cpuCount: 3,\n id: 3,\n memory: '3 GB',\n storage: '30 GB',\n },\n];\n\nconst columns = [\n columnHelper.accessor('id', {\n cell: ({ cell, row }) => (\n <Radio\n ariaLabel={`value-${cell.getValue()}`}\n isChecked={row.getIsSelected()}\n />\n ),\n header: () => null,\n maxSize: 50,\n size: 50,\n }),\n columnHelper.accessor('memory', {\n cell: (info) => info.getValue(),\n minSize: 120,\n }),\n columnHelper.accessor('cpuCount', {\n cell: (info) => info.getValue(),\n }),\n columnHelper.accessor('storage', {\n cell: (info) => info.getValue(),\n }),\n];\n\nconst CustomBodyRow = ({\n row,\n}: React.ComponentProps<typeof DataGrid.BodyRow<PricingEntry>>) => {\n const { components } = useDataGridContext<PricingEntry>();\n\n return (\n <div key={row.id} role=\"row\" className=\"ndl-data-grid-tr\">\n {row.getVisibleCells().map(\n (cell) =>\n components.BodyCell && (\n <components.BodyCell\n key={cell.id}\n cell={cell}\n htmlAttributes={{\n onClick: () => row.toggleSelected(!row.getIsSelected()),\n }}\n />\n ),\n )}\n </div>\n );\n};\n\nconst Component = () => {\n const table = useReactTable({\n columnResizeMode: 'onChange',\n columns,\n data: DEMO_PRICING,\n enableMultiRowSelection: false,\n enableSorting: false,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n initialState: {\n rowSelection: {\n 0: true,\n },\n },\n });\n\n return (\n <div className=\"n-w-full\">\n <DataGrid\n components={{\n BodyRow: CustomBodyRow,\n Navigation: null,\n }}\n isKeyboardNavigable={false}\n isResizable={false}\n tableInstance={table}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"datagrid-single-selectable.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-single-selectable.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, Radio, useDataGridContext } from '@neo4j-ndl/react';\nimport {\n createColumnHelper,\n getCoreRowModel,\n getPaginationRowModel,\n useReactTable,\n} from '@tanstack/react-table';\n\ntype PricingEntry = {\n cpuCount: number;\n id: number;\n memory: string;\n storage: string;\n};\n\nconst columnHelper = createColumnHelper<PricingEntry>();\n\nconst DEMO_PRICING: PricingEntry[] = [\n {\n cpuCount: 1,\n id: 1,\n memory: '1 GB',\n storage: '10 GB',\n },\n {\n cpuCount: 2,\n id: 2,\n memory: '2 GB',\n storage: '20 GB',\n },\n {\n cpuCount: 3,\n id: 3,\n memory: '3 GB',\n storage: '30 GB',\n },\n];\n\nconst columns = [\n columnHelper.accessor('id', {\n cell: ({ cell, row }) => (\n <Radio\n ariaLabel={`value-${cell.getValue()}`}\n isChecked={row.getIsSelected()}\n />\n ),\n header: () => null,\n maxSize: 50,\n size: 50,\n }),\n columnHelper.accessor('memory', {\n cell: (info) => info.getValue(),\n minSize: 120,\n }),\n columnHelper.accessor('cpuCount', {\n cell: (info) => info.getValue(),\n }),\n columnHelper.accessor('storage', {\n cell: (info) => info.getValue(),\n }),\n];\n\nconst CustomBodyRow = ({\n row,\n}: React.ComponentProps<typeof DataGrid.BodyRow<PricingEntry>>) => {\n const { components } = useDataGridContext<PricingEntry>();\n\n return (\n <div key={row.id} role=\"row\" className=\"ndl-data-grid-tr\">\n {row.getVisibleCells().map(\n (cell) =>\n components.BodyCell && (\n <components.BodyCell\n key={cell.id}\n cell={cell}\n htmlAttributes={{\n onClick: () => row.toggleSelected(!row.getIsSelected()),\n }}\n />\n ),\n )}\n </div>\n );\n};\n\nconst Component = () => {\n const table = useReactTable({\n columnResizeMode: 'onChange',\n columns,\n data: DEMO_PRICING,\n enableMultiRowSelection: false,\n enableSorting: false,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n initialState: {\n rowSelection: {\n 0: true,\n },\n },\n });\n\n return (\n <div className=\"w-full\">\n <DataGrid\n components={{\n BodyRow: CustomBodyRow,\n Navigation: null,\n }}\n isKeyboardNavigable={false}\n isResizable={false}\n tableInstance={table}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/data-grid/stories/datagrid-skeleton-loading.story.js CHANGED Viewed

@@ -70,7 +70,7 @@ const Component = () => {
             },
         },
     });
-    return ((0, jsx_runtime_1.jsx)("div", { className: "n-w-full n-bg-light-neutral-text-weakest", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: true, tableInstance: table, isKeyboardNavigable: true, isSkeletonLoading: true }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "w-full bg-light-neutral-text-weakest", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: true, tableInstance: table, isKeyboardNavigable: true, isSkeletonLoading: true }) }));
 };
 exports.default = Component;
 //# sourceMappingURL=datagrid-skeleton-loading.story.js.map

package/lib/cjs/data-grid/stories/datagrid-skeleton-loading.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"datagrid-skeleton-loading.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-skeleton-loading.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,EACzB,iBAAiB,EAAE,IAAI,GACvB,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 isSkeletonLoading={true}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"datagrid-skeleton-loading.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-skeleton-loading.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,sCAAsC,YACnD,uBAAC,gBAAQ,IACP,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,IAAI,EACzB,iBAAiB,EAAE,IAAI,GACvB,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=\"w-full bg-light-neutral-text-weakest\">\n <DataGrid\n isResizable={true}\n tableInstance={table}\n isKeyboardNavigable={true}\n isSkeletonLoading={true}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/data-grid/stories/datagrid-sortable.story.js CHANGED Viewed

@@ -71,7 +71,7 @@ const Component = () => {
             },
         },
     });
-    return ((0, jsx_runtime_1.jsx)("div", { className: "n-w-full n-bg-light-neutral-text-weakest", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: true, tableInstance: table, isKeyboardNavigable: true }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "w-full bg-light-neutral-text-weakest", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: true, tableInstance: table, isKeyboardNavigable: true }) }));
 };
 exports.default = Component;
 //# sourceMappingURL=datagrid-sortable.story.js.map

package/lib/cjs/data-grid/stories/datagrid-sortable.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"datagrid-sortable.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-sortable.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,uDAM+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,IAAI;QACnB,eAAe,EAAE,IAAA,6BAAe,GAAE;QAClC,qBAAqB,EAAE,IAAA,mCAAqB,GAAE;QAC9C,iBAAiB,EAAE,IAAA,+BAAiB,GAAE;QACtC,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 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 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: true,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\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"]}
1	+ {"version":3,"file":"datagrid-sortable.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-sortable.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,uDAM+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,IAAI;QACnB,eAAe,EAAE,IAAA,6BAAe,GAAE;QAClC,qBAAqB,EAAE,IAAA,mCAAqB,GAAE;QAC9C,iBAAiB,EAAE,IAAA,+BAAiB,GAAE;QACtC,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,CAAC;aACZ;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,gCAAK,SAAS,EAAC,sCAAsC,YACnD,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 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 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: true,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n initialState: {\n pagination: {\n pageSize: 5,\n },\n },\n });\n\n return (\n <div className=\"w-full 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-using-editable-cells.story.js CHANGED Viewed

@@ -176,7 +176,7 @@ const Component = () => {
                 const isInvalid = !VALID_STATUSES.includes(info.getValue());
                 const isPending = info.getValue() === 'pending';
                 const isInactive = info.getValue() === 'inactive';
-                const warningHelpText = ((0, jsx_runtime_1.jsxs)("span", { className: "n-flex n-items-center n-gap-token-2 n-text-warning-text", children: [(0, jsx_runtime_1.jsx)(icons_1.ExclamationTriangleIconSolid, { className: "n-size-token-16 n-text-warning-icon" }), "Inactive users cannot sign in"] }));
+                const warningHelpText = ((0, jsx_runtime_1.jsxs)("span", { className: "flex items-center gap-token-2 text-warning-text", children: [(0, jsx_runtime_1.jsx)(icons_1.ExclamationTriangleIconSolid, { className: "size-token-16 text-warning-icon" }), "Inactive users cannot sign in"] }));
                 return ((0, jsx_runtime_1.jsx)(react_1.DataGrid.DropDownCell, { cell: info, options: STATUS_OPTIONS, ariaLabel: "select status", errorText: isInvalid ? 'Please select a valid status' : undefined, helpText: isInactive
                         ? warningHelpText
                         : isPending
@@ -216,7 +216,7 @@ const Component = () => {
             },
         },
     });
-    return ((0, jsx_runtime_1.jsx)("div", { className: "n-w-full n-bg-light-neutral-text-weakest", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isKeyboardNavigable: true, isResizable: true, styling: {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "w-full bg-light-neutral-text-weakest", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isKeyboardNavigable: true, isResizable: true, styling: {
                 borderStyle: 'all-sides',
                 hasZebraStriping: false,
             }, tableInstance: table }) }));