npm - @neo4j-ndl/react - Versions diffs - 4.25.10 → 5.0.0-alpha.0.b2b2481 - Mend

@neo4j-ndl/react 4.25.10 → 5.0.0-alpha.0.b2b2481

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 (1181) hide show

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

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

package/lib/esm/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/esm/data-grid/stories/datagrid-simple.story.js CHANGED Viewed

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

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAQ/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,kBAAkB,EAAkB,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,aAAa,CAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO;QACP,IAAI,EAAE,eAAe;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,eAAe,EAAE;QAClC,qBAAqB,EAAE,qBAAqB,EAAE;QAC9C,iBAAiB,EAAE,iBAAiB,EAAE;QACtC,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,CAAC;aACZ;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,SAAS,EAAC,~~0CAA0C~~,~~YACvD~~,KAAC,QAAQ,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,eAAe,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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAQ/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,kBAAkB,EAAkB,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,aAAa,CAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO;QACP,IAAI,EAAE,eAAe;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,eAAe,EAAE;QAClC,qBAAqB,EAAE,qBAAqB,EAAE;QAC9C,iBAAiB,EAAE,iBAAiB,EAAE;QACtC,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,CAAC;aACZ;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,SAAS,EAAC,sCAAsC,YACnD,KAAC,QAAQ,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,eAAe,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/esm/data-grid/stories/datagrid-single-selectable.story.js CHANGED Viewed

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

package/lib/esm/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":"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~~UAAU~~,~~YACvB~~,KAAC,QAAQ,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,eAAe,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":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,qBAAqB,EACrB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAS/B,MAAM,YAAY,GAAG,kBAAkB,EAAgB,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,KAAC,KAAK,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,kBAAkB,EAAgB,CAAC;IAE1D,OAAO,CACL,cAAkB,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,KAAC,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,aAAa,CAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO;QACP,IAAI,EAAE,YAAY;QAClB,uBAAuB,EAAE,KAAK;QAC9B,aAAa,EAAE,KAAK;QACpB,eAAe,EAAE,eAAe,EAAE;QAClC,qBAAqB,EAAE,qBAAqB,EAAE;QAC9C,YAAY,EAAE;YACZ,YAAY,EAAE;gBACZ,CAAC,EAAE,IAAI;aACR;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,QAAQ,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,eAAe,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=\"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/esm/data-grid/stories/datagrid-skeleton-loading.story.js CHANGED Viewed

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

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,qBAAqB,EACrB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAQ/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,kBAAkB,EAAkB,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,aAAa,CAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO;QACP,IAAI,EAAE,eAAe;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,eAAe,EAAE;QAClC,qBAAqB,EAAE,qBAAqB,EAAE;QAC9C,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,CAAC;aACZ;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,SAAS,EAAC,~~0CAA0C~~,~~YACvD~~,KAAC,QAAQ,IACP,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,IAAI,EACzB,iBAAiB,EAAE,IAAI,GACvB,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,qBAAqB,EACrB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAQ/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,kBAAkB,EAAkB,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,aAAa,CAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO;QACP,IAAI,EAAE,eAAe;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,eAAe,EAAE;QAClC,qBAAqB,EAAE,qBAAqB,EAAE;QAC9C,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,CAAC;aACZ;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,SAAS,EAAC,sCAAsC,YACnD,KAAC,QAAQ,IACP,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,IAAI,EACzB,iBAAiB,EAAE,IAAI,GACvB,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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/esm/data-grid/stories/datagrid-sortable.story.js CHANGED Viewed

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

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAQ/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,kBAAkB,EAAkB,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,aAAa,CAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO;QACP,IAAI,EAAE,eAAe;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,eAAe,EAAE;QAClC,qBAAqB,EAAE,qBAAqB,EAAE;QAC9C,iBAAiB,EAAE,iBAAiB,EAAE;QACtC,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,CAAC;aACZ;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,SAAS,EAAC,~~0CAA0C~~,~~YACvD~~,KAAC,QAAQ,IACP,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,IAAI,GACzB,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAQ/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,kBAAkB,EAAkB,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,aAAa,CAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO;QACP,IAAI,EAAE,eAAe;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,eAAe,EAAE;QAClC,qBAAqB,EAAE,qBAAqB,EAAE;QAC9C,iBAAiB,EAAE,iBAAiB,EAAE;QACtC,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,CAAC;aACZ;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,cAAK,SAAS,EAAC,sCAAsC,YACnD,KAAC,QAAQ,IACP,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,IAAI,GACzB,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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/esm/data-grid/stories/datagrid-using-editable-cells.story.js CHANGED Viewed

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

package/lib/esm/data-grid/stories/datagrid-using-editable-cells.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"datagrid-using-editable-cells.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-using-editable-cells.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 { tokens } from '@neo4j-ndl/base';\nimport { DataGrid, GraphLabel } from '@neo4j-ndl/react';\nimport { ExclamationTriangleIconSolid } from '@neo4j-ndl/react/icons';\nimport {\n createColumnHelper,\n getCoreRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\nimport { useState } from 'react';\nimport { type MultiValueProps } from 'react-select';\n\ntype TestDataFormat = {\n name: string;\n role: string;\n permissions: string[];\n labels: string[];\n status: string;\n};\n\nconst ROLE_OPTIONS = [\n { label: 'Admin', value: 'admin' },\n { label: 'Editor', value: 'editor' },\n { label: 'Viewer', value: 'viewer' },\n];\n\nconst PERMISSION_OPTIONS = [\n { label: 'Read', value: 'read' },\n { label: 'Write', value: 'write' },\n { label: 'Delete', value: 'delete' },\n];\n\nconst LABEL_OPTIONS = [\n { label: 'Person', value: 'person' },\n { label: 'Movie', value: 'movie' },\n { label: 'Director', value: 'director' },\n { label: 'Actor', value: 'actor' },\n];\n\nconst STATUS_OPTIONS = [\n { label: 'Active', value: 'active' },\n { label: 'Inactive', value: 'inactive' },\n { label: 'Pending', value: 'pending' },\n];\n\nconst VALID_STATUSES = STATUS_OPTIONS.map((option) => option.value);\n\ntype DropDownOption = { value: string; label: string };\n\nconst LABEL_COLORS: Record<string, string> = {\n actor: tokens.graph['7'],\n director: tokens.graph['4'],\n movie: tokens.graph['3'],\n person: tokens.graph['1'],\n};\n\n// Render each selected value as a non-interactive GraphLabel (as a span)\n// instead of the default Tag chip, demonstrating the components override.\nconst LabelMultiValue = (props: MultiValueProps<DropDownOption, boolean>) => (\n <GraphLabel\n as=\"span\"\n type=\"node\"\n size=\"small\"\n color={LABEL_COLORS[props.data.value]}\n >\n {props.data.label}\n </GraphLabel>\n);\n\n// The \"Dallas Kuhn\" row has a status that is not part of the available\n// options, so its dropdown cell renders in the error state.\nconst DEMO_DATA: TestDataFormat[] = [\n {\n labels: ['person', 'actor'],\n name: 'Alicia Sanford',\n permissions: ['read', 'write'],\n role: 'admin',\n status: 'active',\n },\n {\n labels: ['movie'],\n name: 'Dallas Kuhn',\n permissions: ['read'],\n role: 'editor',\n status: 'unknown',\n },\n {\n labels: ['director'],\n name: 'Susan Daugherty MD',\n permissions: ['read', 'write', 'delete'],\n role: 'viewer',\n status: 'pending',\n },\n {\n labels: ['person'],\n name: 'Karen Huel',\n permissions: ['read'],\n role: 'editor',\n status: 'inactive',\n },\n {\n labels: ['movie', 'director'],\n name: 'Ken Kessler',\n permissions: ['write', 'delete'],\n role: 'admin',\n status: 'active',\n },\n {\n labels: [],\n name: 'Courtney McClure',\n permissions: [],\n role: 'viewer',\n status: 'pending',\n },\n];\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst Component = () => {\n const [data, setData] = useState(DEMO_DATA);\n\n const updateRow = (name: string, update: Partial<TestDataFormat>): void => {\n setData((oldData) =>\n oldData.map((row) => (row.name === name ? { ...row, ...update } : row)),\n );\n };\n\n const COMMON_COLUMNS = [\n // Editable inline text cell.\n columnHelper.accessor('name', {\n cell: (cell) => (\n <DataGrid.InlineEditCell\n cell={cell}\n value={cell.getValue()}\n ariaLabel=\"edit name\"\n />\n ),\n meta: {\n isInlineEditCell: {\n onEditChange: (newValue, cell) => {\n updateRow(cell.row.original.name, { name: newValue });\n },\n },\n },\n minSize: 180,\n size: 220,\n }),\n // Default single-select dropdown.\n columnHelper.accessor('role', {\n cell: (info) => (\n <DataGrid.DropDownCell\n cell={info}\n options={ROLE_OPTIONS}\n ariaLabel=\"select role\"\n />\n ),\n meta: {\n isDropDownCell: {\n onChange: (newValue, cell) => {\n if (newValue === undefined) {\n return;\n }\n updateRow(cell.row.original.name, { role: newValue });\n },\n },\n },\n minSize: 160,\n size: 180,\n }),\n // Default multi-select dropdown (default Tag chips).\n columnHelper.accessor('permissions', {\n cell: (info) => (\n <DataGrid.DropDownCell\n cell={info}\n options={PERMISSION_OPTIONS}\n ariaLabel=\"select permissions\"\n />\n ),\n enableSorting: false,\n meta: {\n isDropDownCell: {\n isMulti: true,\n onChange: (newValue, cell) => {\n updateRow(cell.row.original.name, { permissions: newValue });\n },\n },\n },\n minSize: 220,\n size: 260,\n }),\n // Multi-select dropdown with a custom MultiValue (GraphLabel chips).\n columnHelper.accessor('labels', {\n cell: (info) => (\n <DataGrid.DropDownCell\n cell={info}\n options={LABEL_OPTIONS}\n ariaLabel=\"select labels\"\n components={{ MultiValue: LabelMultiValue }}\n />\n ),\n enableSorting: false,\n meta: {\n isDropDownCell: {\n isMulti: true,\n onChange: (newValue, cell) => {\n updateRow(cell.row.original.name, { labels: newValue });\n },\n },\n },\n minSize: 240,\n size: 280,\n }),\n // Single-select dropdown in an error state.\n columnHelper.accessor('status', {\n cell: (info) => {\n const isInvalid = !VALID_STATUSES.includes(info.getValue());\n\n const isPending = info.getValue() === 'pending';\n const isInactive = info.getValue() === 'inactive';\n\n const warningHelpText = (\n <span className=\"n-flex n-items-center n-gap-token-2 n-text-warning-text\">\n <ExclamationTriangleIconSolid className=\"n-size-token-16 n-text-warning-icon\" />\n Inactive users cannot sign in\n </span>\n );\n\n return (\n <DataGrid.DropDownCell\n cell={info}\n options={STATUS_OPTIONS}\n ariaLabel=\"select status\"\n errorText={isInvalid ? 'Please select a valid status' : undefined}\n helpText={\n isInactive\n ? warningHelpText\n : isPending\n ? 'Waiting for admin approval'\n : undefined\n }\n />\n );\n },\n meta: {\n isDropDownCell: {\n onChange: (newValue, cell) => {\n if (newValue === undefined) {\n return;\n }\n updateRow(cell.row.original.name, { status: newValue });\n },\n },\n },\n minSize: 200,\n size: 240,\n }),\n ];\n const table = useReactTable({\n autoResetPageIndex: false,\n columnResizeMode: 'onChange',\n columns: COMMON_COLUMNS,\n data: 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: {\n pageSize: 5,\n },\n },\n });\n\n return (\n <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n <DataGrid\n isKeyboardNavigable={true}\n isResizable={true}\n styling={{\n borderStyle: 'all-sides',\n hasZebraStriping: false,\n }}\n tableInstance={table}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"datagrid-using-editable-cells.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-using-editable-cells.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 { tokens } from '@neo4j-ndl/base';\nimport { DataGrid, GraphLabel } from '@neo4j-ndl/react';\nimport { ExclamationTriangleIconSolid } from '@neo4j-ndl/react/icons';\nimport {\n createColumnHelper,\n getCoreRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\nimport { useState } from 'react';\nimport { type MultiValueProps } from 'react-select';\n\ntype TestDataFormat = {\n name: string;\n role: string;\n permissions: string[];\n labels: string[];\n status: string;\n};\n\nconst ROLE_OPTIONS = [\n { label: 'Admin', value: 'admin' },\n { label: 'Editor', value: 'editor' },\n { label: 'Viewer', value: 'viewer' },\n];\n\nconst PERMISSION_OPTIONS = [\n { label: 'Read', value: 'read' },\n { label: 'Write', value: 'write' },\n { label: 'Delete', value: 'delete' },\n];\n\nconst LABEL_OPTIONS = [\n { label: 'Person', value: 'person' },\n { label: 'Movie', value: 'movie' },\n { label: 'Director', value: 'director' },\n { label: 'Actor', value: 'actor' },\n];\n\nconst STATUS_OPTIONS = [\n { label: 'Active', value: 'active' },\n { label: 'Inactive', value: 'inactive' },\n { label: 'Pending', value: 'pending' },\n];\n\nconst VALID_STATUSES = STATUS_OPTIONS.map((option) => option.value);\n\ntype DropDownOption = { value: string; label: string };\n\nconst LABEL_COLORS: Record<string, string> = {\n actor: tokens.graph['7'],\n director: tokens.graph['4'],\n movie: tokens.graph['3'],\n person: tokens.graph['1'],\n};\n\n// Render each selected value as a non-interactive GraphLabel (as a span)\n// instead of the default Tag chip, demonstrating the components override.\nconst LabelMultiValue = (props: MultiValueProps<DropDownOption, boolean>) => (\n <GraphLabel\n as=\"span\"\n type=\"node\"\n size=\"small\"\n color={LABEL_COLORS[props.data.value]}\n >\n {props.data.label}\n </GraphLabel>\n);\n\n// The \"Dallas Kuhn\" row has a status that is not part of the available\n// options, so its dropdown cell renders in the error state.\nconst DEMO_DATA: TestDataFormat[] = [\n {\n labels: ['person', 'actor'],\n name: 'Alicia Sanford',\n permissions: ['read', 'write'],\n role: 'admin',\n status: 'active',\n },\n {\n labels: ['movie'],\n name: 'Dallas Kuhn',\n permissions: ['read'],\n role: 'editor',\n status: 'unknown',\n },\n {\n labels: ['director'],\n name: 'Susan Daugherty MD',\n permissions: ['read', 'write', 'delete'],\n role: 'viewer',\n status: 'pending',\n },\n {\n labels: ['person'],\n name: 'Karen Huel',\n permissions: ['read'],\n role: 'editor',\n status: 'inactive',\n },\n {\n labels: ['movie', 'director'],\n name: 'Ken Kessler',\n permissions: ['write', 'delete'],\n role: 'admin',\n status: 'active',\n },\n {\n labels: [],\n name: 'Courtney McClure',\n permissions: [],\n role: 'viewer',\n status: 'pending',\n },\n];\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst Component = () => {\n const [data, setData] = useState(DEMO_DATA);\n\n const updateRow = (name: string, update: Partial<TestDataFormat>): void => {\n setData((oldData) =>\n oldData.map((row) => (row.name === name ? { ...row, ...update } : row)),\n );\n };\n\n const COMMON_COLUMNS = [\n // Editable inline text cell.\n columnHelper.accessor('name', {\n cell: (cell) => (\n <DataGrid.InlineEditCell\n cell={cell}\n value={cell.getValue()}\n ariaLabel=\"edit name\"\n />\n ),\n meta: {\n isInlineEditCell: {\n onEditChange: (newValue, cell) => {\n updateRow(cell.row.original.name, { name: newValue });\n },\n },\n },\n minSize: 180,\n size: 220,\n }),\n // Default single-select dropdown.\n columnHelper.accessor('role', {\n cell: (info) => (\n <DataGrid.DropDownCell\n cell={info}\n options={ROLE_OPTIONS}\n ariaLabel=\"select role\"\n />\n ),\n meta: {\n isDropDownCell: {\n onChange: (newValue, cell) => {\n if (newValue === undefined) {\n return;\n }\n updateRow(cell.row.original.name, { role: newValue });\n },\n },\n },\n minSize: 160,\n size: 180,\n }),\n // Default multi-select dropdown (default Tag chips).\n columnHelper.accessor('permissions', {\n cell: (info) => (\n <DataGrid.DropDownCell\n cell={info}\n options={PERMISSION_OPTIONS}\n ariaLabel=\"select permissions\"\n />\n ),\n enableSorting: false,\n meta: {\n isDropDownCell: {\n isMulti: true,\n onChange: (newValue, cell) => {\n updateRow(cell.row.original.name, { permissions: newValue });\n },\n },\n },\n minSize: 220,\n size: 260,\n }),\n // Multi-select dropdown with a custom MultiValue (GraphLabel chips).\n columnHelper.accessor('labels', {\n cell: (info) => (\n <DataGrid.DropDownCell\n cell={info}\n options={LABEL_OPTIONS}\n ariaLabel=\"select labels\"\n components={{ MultiValue: LabelMultiValue }}\n />\n ),\n enableSorting: false,\n meta: {\n isDropDownCell: {\n isMulti: true,\n onChange: (newValue, cell) => {\n updateRow(cell.row.original.name, { labels: newValue });\n },\n },\n },\n minSize: 240,\n size: 280,\n }),\n // Single-select dropdown in an error state.\n columnHelper.accessor('status', {\n cell: (info) => {\n const isInvalid = !VALID_STATUSES.includes(info.getValue());\n\n const isPending = info.getValue() === 'pending';\n const isInactive = info.getValue() === 'inactive';\n\n const warningHelpText = (\n <span className=\"flex items-center gap-token-2 text-warning-text\">\n <ExclamationTriangleIconSolid className=\"size-token-16 text-warning-icon\" />\n Inactive users cannot sign in\n </span>\n );\n\n return (\n <DataGrid.DropDownCell\n cell={info}\n options={STATUS_OPTIONS}\n ariaLabel=\"select status\"\n errorText={isInvalid ? 'Please select a valid status' : undefined}\n helpText={\n isInactive\n ? warningHelpText\n : isPending\n ? 'Waiting for admin approval'\n : undefined\n }\n />\n );\n },\n meta: {\n isDropDownCell: {\n onChange: (newValue, cell) => {\n if (newValue === undefined) {\n return;\n }\n updateRow(cell.row.original.name, { status: newValue });\n },\n },\n },\n minSize: 200,\n size: 240,\n }),\n ];\n const table = useReactTable({\n autoResetPageIndex: false,\n columnResizeMode: 'onChange',\n columns: COMMON_COLUMNS,\n data: 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: {\n pageSize: 5,\n },\n },\n });\n\n return (\n <div className=\"w-full bg-light-neutral-text-weakest\">\n <DataGrid\n isKeyboardNavigable={true}\n isResizable={true}\n styling={{\n borderStyle: 'all-sides',\n hasZebraStriping: false,\n }}\n tableInstance={table}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/esm/data-grid/stories/datagrid-virtualization.story.js CHANGED Viewed

@@ -47,7 +47,7 @@ const BodyCurryingFunction = (rowVirtualizer, ref, table) =>
     const { rows } = table.getSortedRowModel();
     rowVirtualizer.setOptions(Object.assign(Object.assign({}, rowVirtualizer.options), { count: rows.length }));
     const items = rowVirtualizer.getVirtualItems();
-    return (_jsx("div", { ref: ref, className: "n-overflow-auto n-h-[290px]", children: _jsx(DataGrid.Body, Object.assign({}, props, { className: className, style: Object.assign(Object.assign({}, style), { height: `${rowVirtualizer.getTotalSize()}px`, position: 'relative' }), children: items.map((row) => {
+    return (_jsx("div", { ref: ref, className: "overflow-auto h-[290px]", children: _jsx(DataGrid.Body, Object.assign({}, props, { className: className, style: Object.assign(Object.assign({}, style), { height: `${rowVirtualizer.getTotalSize()}px`, position: 'relative' }), children: items.map((row) => {
                 const foundRow = rows[row.index];
                 if (foundRow === undefined) {
                     return null;
@@ -120,12 +120,12 @@ const Component = () => {
     const CustomBody = useMemo(() => {
         return BodyCurryingFunction(rowVirtualizer, scrollingParentRef, table);
     }, [rowVirtualizer, scrollingParentRef, table]);
-    return (_jsx("div", { className: "n-w-full n-bg-light-neutral-text-weakest", style: { height: '400px' }, children: _jsx(DataGrid, { components: {
+    return (_jsx("div", { className: "w-full bg-light-neutral-text-weakest", style: { height: '400px' }, children: _jsx(DataGrid, { components: {
                 Body: CustomBody,
                 PaginationNumericButton: null,
                 RowsPerPage: null,
             }, isResizable: false, tableInstance: table, rootProps: {
-                className: 'n-h-full',
+                className: 'h-full',
             } }) }));
 };
 export default Component;

package/lib/esm/data-grid/stories/datagrid-virtualization.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"datagrid-virtualization.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-virtualization.story.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EAEjB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAoB,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAkB,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAUxD,MAAM,eAAe,GAAqB,KAAK,CAAC,IAAI,CAClD,EAAE,MAAM,EAAE,IAAI,EAAE,EAChB,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;IACnB,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC;IACpC,aAAa,EAAE,4BAA4B,KAAK,GAAG,CAAC,EAAE;IACtD,IAAI,EAAE,UAAU,KAAK,GAAG,CAAC,EAAE;CAC5B,CAAC,CACH,CAAC;AAEF,MAAM,oBAAoB,GACxB,CACE,cAAoD,EACpD,GAAqC,EACrC,KAAmC,EACnC,EAAE;AACJ,8CAA8C;AAC9C,CAAC,EAIoD,EAAE,EAAE;QAJxD,EACC,KAAK,EACL,SAAS,OAE0C,EADhD,KAAK,cAHT,sBAIA,CADS;IAER,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC,iBAAiB,EAAE,CAAC;IAC3C,cAAc,CAAC,UAAU,iCACpB,cAAc,CAAC,OAAO,KACzB,KAAK,EAAE,IAAI,CAAC,MAAM,IAClB,CAAC;IACH,MAAM,KAAK,GAAG,cAAc,CAAC,eAAe,EAAE,CAAC;IAE/C,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,~~6BAA6B~~,~~YACpD~~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~~0CAA0C~~,~~EACpD~~,KAAK,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,YAE1B,KAAC,QAAQ,IACP,UAAU,EAAE;gBACV,IAAI,EAAE,UAAU;gBAChB,uBAAuB,EAAE,IAAI;gBAC7B,WAAW,EAAE,IAAI;aAClB,EACD,WAAW,EAAE,KAAK,EAClB,aAAa,EAAE,KAAK,EACpB,SAAS,EAAE;gBACT,SAAS,EAAE,~~UAAU~~;~~aACtB~~,GACD,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,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 type Table as DataGridType,\n useReactTable,\n} from '@tanstack/react-table';\nimport { useVirtualizer, type Virtualizer } from '@tanstack/react-virtual';\nimport { type RefObject, useMemo, useRef } from 'react';\n\nimport { type CommonProps } from '../../_common/types';\n\ntype TestDataFormat = {\n name: string;\n age: number;\n cypherCommand: string;\n};\n\nconst TABLE_DEMO_DATA: TestDataFormat[] = Array.from(\n { length: 1000 },\n (_unused, index) => ({\n age: Math.floor(Math.random() 100),\n cypherCommand: `MATCH (n) RETURN n LIMIT ${index + 1}`,\n name: `Person ${index + 1}`,\n }),\n);\n\nconst BodyCurryingFunction =\n (\n rowVirtualizer: Virtualizer<HTMLDivElement, Element>,\n ref: RefObject<HTMLDivElement \| null>,\n table: DataGridType<TestDataFormat>,\n ) =>\n // eslint-disable-next-line react/display-name\n ({\n style,\n className,\n ...props\n }: CommonProps<'div', { children?: React.ReactNode }>) => {\n const { rows } = table.getSortedRowModel();\n rowVirtualizer.setOptions({\n ...rowVirtualizer.options,\n count: rows.length,\n });\n const items = rowVirtualizer.getVirtualItems();\n\n return (\n <div ref={ref} className=\"n-overflow-auto n-h-[290px]\">\n <DataGrid.Body\n {...props}\n className={className}\n style={{\n ...style,\n height: `${rowVirtualizer.getTotalSize()}px`,\n position: 'relative',\n }}\n >\n {items.map((row: { index: number; size: number; start: number }) => {\n const foundRow = rows[row.index];\n if (foundRow === undefined) {\n return null;\n }\n\n return (\n <DataGrid.BodyRow\n key={`table-row-${row.index}`}\n row={foundRow}\n style={{\n height: `${row.size}px`,\n left: 0,\n position: 'absolute',\n top: 0,\n transform: `translateY(${row.start}px)`,\n width: '100%',\n }}\n />\n );\n })}\n </DataGrid.Body>\n </div>\n );\n };\n\n/** Repeats array `repeatCount` times */\nconst repeat = (arr: unknown[], repeatCount: number) =>\n Array(repeatCount).fill(arr).flat();\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst 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\nconst ExtendedProps = {\n columnResizeMode: 'onChange' as const,\n columns,\n data: [...repeat(TABLE_DEMO_DATA, 500)],\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};\n\nconst Component = () => {\n const scrollingParentRef = useRef<HTMLDivElement \| null>(null);\n\n const rowVirtualizer = useVirtualizer({\n count: ExtendedProps.data.length,\n estimateSize: () => 40,\n getScrollElement: () => scrollingParentRef.current,\n // 40 is the size for a basic data type row so fallback to that\n overscan: 15,\n });\n\n const table = useReactTable({\n ...ExtendedProps,\n enableSorting: true,\n getSortedRowModel: getSortedRowModel(),\n initialState: {\n pagination: {\n pageSize: ExtendedProps.data.length,\n },\n },\n });\n\n const CustomBody = useMemo(() => {\n return BodyCurryingFunction(rowVirtualizer, scrollingParentRef, table);\n }, [rowVirtualizer, scrollingParentRef, table]);\n\n return (\n <div\n className=\"n-w-full n-bg-light-neutral-text-weakest\"\n style={{ height: '400px' }}\n >\n <DataGrid\n components={{\n Body: CustomBody,\n PaginationNumericButton: null,\n RowsPerPage: null,\n }}\n isResizable={false}\n tableInstance={table}\n rootProps={{\n className: 'n-h-full',\n }}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"datagrid-virtualization.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-virtualization.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 type Table as DataGridType,\n useReactTable,\n} from '@tanstack/react-table';\nimport { useVirtualizer, type Virtualizer } from '@tanstack/react-virtual';\nimport { type RefObject, useMemo, useRef } from 'react';\n\nimport { type CommonProps } from '../../_common/types';\n\ntype TestDataFormat = {\n name: string;\n age: number;\n cypherCommand: string;\n};\n\nconst TABLE_DEMO_DATA: TestDataFormat[] = Array.from(\n { length: 1000 },\n (_unused, index) => ({\n age: Math.floor(Math.random() 100),\n cypherCommand: `MATCH (n) RETURN n LIMIT ${index + 1}`,\n name: `Person ${index + 1}`,\n }),\n);\n\nconst BodyCurryingFunction =\n (\n rowVirtualizer: Virtualizer<HTMLDivElement, Element>,\n ref: RefObject<HTMLDivElement \| null>,\n table: DataGridType<TestDataFormat>,\n ) =>\n // eslint-disable-next-line react/display-name\n ({\n style,\n className,\n ...props\n }: CommonProps<'div', { children?: React.ReactNode }>) => {\n const { rows } = table.getSortedRowModel();\n rowVirtualizer.setOptions({\n ...rowVirtualizer.options,\n count: rows.length,\n });\n const items = rowVirtualizer.getVirtualItems();\n\n return (\n <div ref={ref} className=\"overflow-auto h-[290px]\">\n <DataGrid.Body\n {...props}\n className={className}\n style={{\n ...style,\n height: `${rowVirtualizer.getTotalSize()}px`,\n position: 'relative',\n }}\n >\n {items.map((row: { index: number; size: number; start: number }) => {\n const foundRow = rows[row.index];\n if (foundRow === undefined) {\n return null;\n }\n\n return (\n <DataGrid.BodyRow\n key={`table-row-${row.index}`}\n row={foundRow}\n style={{\n height: `${row.size}px`,\n left: 0,\n position: 'absolute',\n top: 0,\n transform: `translateY(${row.start}px)`,\n width: '100%',\n }}\n />\n );\n })}\n </DataGrid.Body>\n </div>\n );\n };\n\n/** Repeats array `repeatCount` times */\nconst repeat = (arr: unknown[], repeatCount: number) =>\n Array(repeatCount).fill(arr).flat();\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst 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\nconst ExtendedProps = {\n columnResizeMode: 'onChange' as const,\n columns,\n data: [...repeat(TABLE_DEMO_DATA, 500)],\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};\n\nconst Component = () => {\n const scrollingParentRef = useRef<HTMLDivElement \| null>(null);\n\n const rowVirtualizer = useVirtualizer({\n count: ExtendedProps.data.length,\n estimateSize: () => 40,\n getScrollElement: () => scrollingParentRef.current,\n // 40 is the size for a basic data type row so fallback to that\n overscan: 15,\n });\n\n const table = useReactTable({\n ...ExtendedProps,\n enableSorting: true,\n getSortedRowModel: getSortedRowModel(),\n initialState: {\n pagination: {\n pageSize: ExtendedProps.data.length,\n },\n },\n });\n\n const CustomBody = useMemo(() => {\n return BodyCurryingFunction(rowVirtualizer, scrollingParentRef, table);\n }, [rowVirtualizer, scrollingParentRef, table]);\n\n return (\n <div\n className=\"w-full bg-light-neutral-text-weakest\"\n style={{ height: '400px' }}\n >\n <DataGrid\n components={{\n Body: CustomBody,\n PaginationNumericButton: null,\n RowsPerPage: null,\n }}\n isResizable={false}\n tableInstance={table}\n rootProps={{\n className: 'h-full',\n }}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/esm/data-grid/style-rules/guard.js ADDED Viewed

@@ -0,0 +1,43 @@
+/*!
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { DataGridStyleRuleSchema } from './internal/schemas';
+/**
+ * Runtime type guard for {@link DataGridStyleRule}, backed by the internal Zod
+ * schema. Narrows an `unknown` value to `DataGridStyleRule` when it is a valid
+ * style rule.
+ *
+ * This lets consumers validate values without taking a dependency on Zod or on
+ * our schema export. For example, it can be passed to another validation
+ * library's custom check:
+ *
+ * @example
+ * ```ts
+ * import { z } from 'zod';
+ * import { isDataGridStyleRule, type DataGridStyleRule } from '@neo4j-ndl/react';
+ *
+ * const formSchema = z.object({
+ *   rule: z.custom<DataGridStyleRule>(isDataGridStyleRule),
+ *   notes: z.string(),
+ * });
+ * ```
+ */
+export const isDataGridStyleRule = (value) => DataGridStyleRuleSchema.safeParse(value).success;
+//# sourceMappingURL=guard.js.map

package/lib/esm/data-grid/style-rules/guard.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"guard.js","sourceRoot":"","sources":["../../../../src/data-grid/style-rules/guard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAG7D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,KAAc,EACc,EAAE,CAC9B,uBAAuB,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,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 { DataGridStyleRuleSchema } from './internal/schemas';\nimport type { DataGridStyleRule } from './types';\n\n/**\n * Runtime type guard for {@link DataGridStyleRule}, backed by the internal Zod\n * schema. Narrows an `unknown` value to `DataGridStyleRule` when it is a valid\n * style rule.\n *\n * This lets consumers validate values without taking a dependency on Zod or on\n * our schema export. For example, it can be passed to another validation\n * library's custom check:\n *\n * @example\n * ```ts\n * import { z } from 'zod';\n * import { isDataGridStyleRule, type DataGridStyleRule } from '@neo4j-ndl/react';\n *\n * const formSchema = z.object({\n * rule: z.custom<DataGridStyleRule>(isDataGridStyleRule),\n * notes: z.string(),\n * });\n * ```\n */\nexport const isDataGridStyleRule = (\n value: unknown,\n): value is DataGridStyleRule =>\n DataGridStyleRuleSchema.safeParse(value).success;\n"]}

package/lib/esm/data-grid/style-rules/index.js CHANGED Viewed

@@ -20,7 +20,5 @@
  */
 export { evaluateDataGridStyleRules } from './evaluate';
 export { useDataGridCellStyle } from './hooks';
-export { isDataGridStyleRule } from './types';
-// TODO v5: remove schema exports
-export { DataGridBigintLiteralSchema, DataGridCellStyleSchema, DataGridColorRangeSchema, DataGridColumnRefSchema, DataGridDatetimeLiteralSchema, DataGridDisableableColorSchema, DataGridStyleRuleLiteralSchema, DataGridStyleRuleOperandSchema, DataGridStyleRuleSchema, DataGridStyleRuleWhereSchema, DataGridTimeLiteralSchema, DataGridLocalDatetimeLiteralSchema, DataGridNumericLiteralSchema, DataGridRangeLiteralSchema, } from './types';
+export { isDataGridStyleRule } from './guard';
 //# sourceMappingURL=index.js.map

package/lib/esm/data-grid/style-rules/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/data-grid/style-rules/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,iCAAiC;AACjC,OAAO,EACL,2BAA2B,EAC3B,uBAAuB,EACvB,wBAAwB,EACxB,uBAAuB,EACvB,6BAA6B,EAC7B,8BAA8B,EAC9B,8BAA8B,EAC9B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,yBAAyB,EACzB,kCAAkC,EAClC,4BAA4B,EAC5B,0BAA0B,GAC3B,MAAM,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\nexport { evaluateDataGridStyleRules } from './evaluate';\nexport { useDataGridCellStyle } from './hooks';\nexport { isDataGridStyleRule } from './~~types~~';\~~n// TODO v5: remove schema exports\~~nexport {\n DataGridBigintLiteralSchema,\n DataGridCellStyleSchema,\n DataGridColorRangeSchema,\n DataGridColumnRefSchema,\n DataGridDatetimeLiteralSchema,\n DataGridDisableableColorSchema,\n DataGridStyleRuleLiteralSchema,\n DataGridStyleRuleOperandSchema,\n DataGridStyleRuleSchema,\n DataGridStyleRuleWhereSchema,\n DataGridTimeLiteralSchema,\n DataGridLocalDatetimeLiteralSchema,\n DataGridNumericLiteralSchema,\n DataGridRangeLiteralSchema,\n} from './types';\nexport type {\n DataGridBigintLiteral,\n DataGridCellStyle,\n DataGridColorRange,\n DataGridColumnRef,\n DataGridDatetimeLiteral,\n DataGridDisableableColor,\n DataGridStyleRuleLiteral,\n DataGridStyleRuleOperand,\n DataGridStyleRule,\n DataGridStyleRuleWhere,\n DataGridStyleRuleValueConverter,\n DataGridStyleRuleValueConverters,\n DataGridTimeLiteral,\n DataGridLocalDatetimeLiteral,\n DataGridNumericLiteral,\n DataGridRangeLiteral,\n} from './types';\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/data-grid/style-rules/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,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\nexport { evaluateDataGridStyleRules } from './evaluate';\nexport { useDataGridCellStyle } from './hooks';\nexport { isDataGridStyleRule } from './guard';\nexport type {\n DataGridBigintLiteral,\n DataGridCellStyle,\n DataGridColorRange,\n DataGridColumnRef,\n DataGridDatetimeLiteral,\n DataGridDisableableColor,\n DataGridStyleRuleLiteral,\n DataGridStyleRuleOperand,\n DataGridStyleRule,\n DataGridStyleRuleWhere,\n DataGridStyleRuleValueConverter,\n DataGridStyleRuleValueConverters,\n DataGridTimeLiteral,\n DataGridLocalDatetimeLiteral,\n DataGridNumericLiteral,\n DataGridRangeLiteral,\n} from './types';\n"]}