@neo4j-ndl/react 4.14.6 → 4.15.1
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.
- package/lib/cjs/data-grid/Components.js +25 -10
- package/lib/cjs/data-grid/Components.js.map +1 -1
- package/lib/cjs/data-grid/datagrid-types.js.map +1 -1
- package/lib/cjs/data-grid/stories/datagrid-in-dialog.story.js +1 -0
- package/lib/cjs/data-grid/stories/datagrid-in-dialog.story.js.map +1 -1
- package/lib/cjs/data-grid/stories/datagrid-using-editable-cells.story.js +145 -52
- package/lib/cjs/data-grid/stories/datagrid-using-editable-cells.story.js.map +1 -1
- package/lib/esm/data-grid/Components.js +25 -10
- package/lib/esm/data-grid/Components.js.map +1 -1
- package/lib/esm/data-grid/datagrid-types.js.map +1 -1
- package/lib/esm/data-grid/stories/datagrid-in-dialog.story.js +1 -0
- package/lib/esm/data-grid/stories/datagrid-in-dialog.story.js.map +1 -1
- package/lib/esm/data-grid/stories/datagrid-using-editable-cells.story.js +147 -54
- package/lib/esm/data-grid/stories/datagrid-using-editable-cells.story.js.map +1 -1
- package/lib/types/data-grid/Components.d.ts +16 -1
- package/lib/types/data-grid/Components.d.ts.map +1 -1
- package/lib/types/data-grid/DataGrid.d.ts +10 -1
- package/lib/types/data-grid/DataGrid.d.ts.map +1 -1
- package/lib/types/data-grid/datagrid-types.d.ts +11 -1
- package/lib/types/data-grid/datagrid-types.d.ts.map +1 -1
- package/lib/types/data-grid/stories/datagrid-in-dialog.story.d.ts.map +1 -1
- package/lib/types/data-grid/stories/datagrid-pinned-columns.stories.d.ts +10 -1
- package/lib/types/data-grid/stories/datagrid-pinned-columns.stories.d.ts.map +1 -1
- package/lib/types/data-grid/stories/datagrid-search-and-filters.stories.d.ts +10 -1
- package/lib/types/data-grid/stories/datagrid-search-and-filters.stories.d.ts.map +1 -1
- package/lib/types/data-grid/stories/datagrid-using-editable-cells.story.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
/**
|
|
3
3
|
*
|
|
4
4
|
* Copyright (c) "Neo4j"
|
|
@@ -20,93 +20,186 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
20
20
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
21
21
|
*/
|
|
22
22
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
23
|
-
import {
|
|
23
|
+
import { tokens } from '@neo4j-ndl/base';
|
|
24
|
+
import { DataGrid, GraphLabel } from '@neo4j-ndl/react';
|
|
25
|
+
import { ExclamationTriangleIconSolid } from '@neo4j-ndl/react/icons';
|
|
24
26
|
import { createColumnHelper, getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
|
|
25
27
|
import { useState } from 'react';
|
|
26
|
-
|
|
28
|
+
const ROLE_OPTIONS = [
|
|
29
|
+
{ label: 'Admin', value: 'admin' },
|
|
30
|
+
{ label: 'Editor', value: 'editor' },
|
|
31
|
+
{ label: 'Viewer', value: 'viewer' },
|
|
32
|
+
];
|
|
33
|
+
const PERMISSION_OPTIONS = [
|
|
34
|
+
{ label: 'Read', value: 'read' },
|
|
35
|
+
{ label: 'Write', value: 'write' },
|
|
36
|
+
{ label: 'Delete', value: 'delete' },
|
|
37
|
+
];
|
|
38
|
+
const LABEL_OPTIONS = [
|
|
39
|
+
{ label: 'Person', value: 'person' },
|
|
40
|
+
{ label: 'Movie', value: 'movie' },
|
|
41
|
+
{ label: 'Director', value: 'director' },
|
|
42
|
+
{ label: 'Actor', value: 'actor' },
|
|
43
|
+
];
|
|
44
|
+
const STATUS_OPTIONS = [
|
|
45
|
+
{ label: 'Active', value: 'active' },
|
|
46
|
+
{ label: 'Inactive', value: 'inactive' },
|
|
47
|
+
{ label: 'Pending', value: 'pending' },
|
|
48
|
+
];
|
|
49
|
+
const VALID_STATUSES = STATUS_OPTIONS.map((option) => option.value);
|
|
50
|
+
const LABEL_COLORS = {
|
|
51
|
+
actor: tokens.graph['7'],
|
|
52
|
+
director: tokens.graph['4'],
|
|
53
|
+
movie: tokens.graph['3'],
|
|
54
|
+
person: tokens.graph['1'],
|
|
55
|
+
};
|
|
56
|
+
// Render each selected value as a non-interactive GraphLabel (as a span)
|
|
57
|
+
// instead of the default Tag chip, demonstrating the components override.
|
|
58
|
+
const LabelMultiValue = (props) => (_jsx(GraphLabel, { as: "span", type: "node", size: "small", color: LABEL_COLORS[props.data.value], children: props.data.label }));
|
|
59
|
+
// The "Dallas Kuhn" row has a status that is not part of the available
|
|
60
|
+
// options, so its dropdown cell renders in the error state.
|
|
61
|
+
const DEMO_DATA = [
|
|
62
|
+
{
|
|
63
|
+
labels: ['person', 'actor'],
|
|
64
|
+
name: 'Alicia Sanford',
|
|
65
|
+
permissions: ['read', 'write'],
|
|
66
|
+
role: 'admin',
|
|
67
|
+
status: 'active',
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
labels: ['movie'],
|
|
71
|
+
name: 'Dallas Kuhn',
|
|
72
|
+
permissions: ['read'],
|
|
73
|
+
role: 'editor',
|
|
74
|
+
status: 'unknown',
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
labels: ['director'],
|
|
78
|
+
name: 'Susan Daugherty MD',
|
|
79
|
+
permissions: ['read', 'write', 'delete'],
|
|
80
|
+
role: 'viewer',
|
|
81
|
+
status: 'pending',
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
labels: ['person'],
|
|
85
|
+
name: 'Karen Huel',
|
|
86
|
+
permissions: ['read'],
|
|
87
|
+
role: 'editor',
|
|
88
|
+
status: 'inactive',
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
labels: ['movie', 'director'],
|
|
92
|
+
name: 'Ken Kessler',
|
|
93
|
+
permissions: ['write', 'delete'],
|
|
94
|
+
role: 'admin',
|
|
95
|
+
status: 'active',
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
labels: [],
|
|
99
|
+
name: 'Courtney McClure',
|
|
100
|
+
permissions: [],
|
|
101
|
+
role: 'viewer',
|
|
102
|
+
status: 'pending',
|
|
103
|
+
},
|
|
104
|
+
];
|
|
27
105
|
const columnHelper = createColumnHelper();
|
|
28
106
|
const Component = () => {
|
|
29
|
-
const [data, setData] = useState(
|
|
107
|
+
const [data, setData] = useState(DEMO_DATA);
|
|
108
|
+
const updateRow = (name, update) => {
|
|
109
|
+
setData((oldData) => oldData.map((row) => (row.name === name ? Object.assign(Object.assign({}, row), update) : row)));
|
|
110
|
+
};
|
|
30
111
|
const COMMON_COLUMNS = [
|
|
112
|
+
// Editable inline text cell.
|
|
31
113
|
columnHelper.accessor('name', {
|
|
32
114
|
cell: (cell) => (_jsx(DataGrid.InlineEditCell, { cell: cell, value: cell.getValue(), ariaLabel: "edit name" })),
|
|
33
115
|
meta: {
|
|
34
116
|
isInlineEditCell: {
|
|
35
117
|
onEditChange: (newValue, cell) => {
|
|
36
|
-
|
|
37
|
-
return oldData.map((row) => {
|
|
38
|
-
if (row.name === cell.row.original.name) {
|
|
39
|
-
return Object.assign(Object.assign({}, row), { name: newValue });
|
|
40
|
-
}
|
|
41
|
-
return row;
|
|
42
|
-
});
|
|
43
|
-
});
|
|
118
|
+
updateRow(cell.row.original.name, { name: newValue });
|
|
44
119
|
},
|
|
45
120
|
},
|
|
46
121
|
},
|
|
47
122
|
minSize: 180,
|
|
48
123
|
size: 220,
|
|
49
124
|
}),
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
{
|
|
61
|
-
label: '37',
|
|
62
|
-
value: '37',
|
|
125
|
+
// Default single-select dropdown.
|
|
126
|
+
columnHelper.accessor('role', {
|
|
127
|
+
cell: (info) => (_jsx(DataGrid.DropDownCell, { cell: info, options: ROLE_OPTIONS, ariaLabel: "select role" })),
|
|
128
|
+
meta: {
|
|
129
|
+
isDropDownCell: {
|
|
130
|
+
onChange: (newValue, cell) => {
|
|
131
|
+
if (newValue === undefined) {
|
|
132
|
+
return;
|
|
133
|
+
}
|
|
134
|
+
updateRow(cell.row.original.name, { role: newValue });
|
|
63
135
|
},
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
136
|
+
},
|
|
137
|
+
},
|
|
138
|
+
minSize: 160,
|
|
139
|
+
size: 180,
|
|
140
|
+
}),
|
|
141
|
+
// Default multi-select dropdown (default Tag chips).
|
|
142
|
+
columnHelper.accessor('permissions', {
|
|
143
|
+
cell: (info) => (_jsx(DataGrid.DropDownCell, { cell: info, options: PERMISSION_OPTIONS, ariaLabel: "select permissions" })),
|
|
144
|
+
enableSorting: false,
|
|
145
|
+
meta: {
|
|
146
|
+
isDropDownCell: {
|
|
147
|
+
isMulti: true,
|
|
148
|
+
onChange: (newValue, cell) => {
|
|
149
|
+
updateRow(cell.row.original.name, { permissions: newValue });
|
|
67
150
|
},
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
151
|
+
},
|
|
152
|
+
},
|
|
153
|
+
minSize: 220,
|
|
154
|
+
size: 260,
|
|
155
|
+
}),
|
|
156
|
+
// Multi-select dropdown with a custom MultiValue (GraphLabel chips).
|
|
157
|
+
columnHelper.accessor('labels', {
|
|
158
|
+
cell: (info) => (_jsx(DataGrid.DropDownCell, { cell: info, options: LABEL_OPTIONS, ariaLabel: "select labels", components: { MultiValue: LabelMultiValue } })),
|
|
159
|
+
enableSorting: false,
|
|
160
|
+
meta: {
|
|
161
|
+
isDropDownCell: {
|
|
162
|
+
isMulti: true,
|
|
163
|
+
onChange: (newValue, cell) => {
|
|
164
|
+
updateRow(cell.row.original.name, { labels: newValue });
|
|
71
165
|
},
|
|
72
|
-
|
|
166
|
+
},
|
|
167
|
+
},
|
|
168
|
+
minSize: 240,
|
|
169
|
+
size: 280,
|
|
170
|
+
}),
|
|
171
|
+
// Single-select dropdown in an error state.
|
|
172
|
+
columnHelper.accessor('status', {
|
|
173
|
+
cell: (info) => {
|
|
174
|
+
const isInvalid = !VALID_STATUSES.includes(info.getValue());
|
|
175
|
+
const isPending = info.getValue() === 'pending';
|
|
176
|
+
const isInactive = info.getValue() === 'inactive';
|
|
177
|
+
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"] }));
|
|
178
|
+
return (_jsx(DataGrid.DropDownCell, { cell: info, options: STATUS_OPTIONS, ariaLabel: "select status", errorText: isInvalid ? 'Please select a valid status' : undefined, helpText: isInactive
|
|
179
|
+
? warningHelpText
|
|
180
|
+
: isPending
|
|
181
|
+
? 'Waiting for admin approval'
|
|
182
|
+
: undefined }));
|
|
183
|
+
},
|
|
73
184
|
meta: {
|
|
74
185
|
isDropDownCell: {
|
|
75
186
|
onChange: (newValue, cell) => {
|
|
76
187
|
if (newValue === undefined) {
|
|
77
|
-
// No change
|
|
78
188
|
return;
|
|
79
189
|
}
|
|
80
|
-
|
|
81
|
-
if (isNaN(parsedValue)) {
|
|
82
|
-
return;
|
|
83
|
-
}
|
|
84
|
-
setData((oldData) => {
|
|
85
|
-
return oldData.map((row) => {
|
|
86
|
-
if (row.name === cell.row.original.name) {
|
|
87
|
-
return Object.assign(Object.assign({}, row), { age: parsedValue });
|
|
88
|
-
}
|
|
89
|
-
return row;
|
|
90
|
-
});
|
|
91
|
-
});
|
|
190
|
+
updateRow(cell.row.original.name, { status: newValue });
|
|
92
191
|
},
|
|
93
192
|
},
|
|
94
193
|
},
|
|
95
|
-
minSize:
|
|
96
|
-
|
|
97
|
-
columnHelper.accessor('cypherCommand', {
|
|
98
|
-
cell: (info) => info.getValue(),
|
|
99
|
-
minSize: 400,
|
|
100
|
-
size: 400,
|
|
194
|
+
minSize: 200,
|
|
195
|
+
size: 240,
|
|
101
196
|
}),
|
|
102
197
|
];
|
|
103
198
|
const table = useReactTable({
|
|
199
|
+
autoResetPageIndex: false,
|
|
104
200
|
columnResizeMode: 'onChange',
|
|
105
201
|
columns: COMMON_COLUMNS,
|
|
106
202
|
data: data,
|
|
107
|
-
debugColumns: true,
|
|
108
|
-
debugHeaders: true,
|
|
109
|
-
debugTable: true,
|
|
110
203
|
defaultColumn: {
|
|
111
204
|
maxSize: 800,
|
|
112
205
|
minSize: 80,
|
|
@@ -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 { DataGrid } from '@neo4j-ndl/react';\nimport {\n createColumnHelper,\n getCoreRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\nimport { useState } from 'react';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n name: string;\n age: number;\n cypherCommand: string;\n};\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst Component = () => {\n const [data, setData] = useState(TABLE_DEMO_DATA);\n\n const COMMON_COLUMNS = [\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 setData((oldData) => {\n return oldData.map((row) => {\n if (row.name === cell.row.original.name) {\n return {\n ...row,\n name: newValue,\n };\n }\n return row;\n });\n });\n },\n },\n },\n minSize: 180,\n size: 220,\n }),\n columnHelper.accessor('age', {\n cell: (info) => (\n <DataGrid.DropDownCell\n cell={info}\n options={[\n {\n label: '12',\n value: '12',\n },\n {\n label: '32',\n value: '32',\n },\n {\n label: '37',\n value: '37',\n },\n {\n label: '39',\n value: '39',\n },\n {\n label: '51',\n value: '51',\n },\n ]}\n ariaLabel=\"select age\"\n />\n ),\n meta: {\n isDropDownCell: {\n onChange: (newValue, cell) => {\n if (newValue === undefined) {\n // No change\n return;\n }\n\n const parsedValue = parseInt(newValue, 10);\n\n if (isNaN(parsedValue)) {\n return;\n }\n\n setData((oldData) => {\n return oldData.map((row) => {\n if (row.name === cell.row.original.name) {\n return {\n ...row,\n age: parsedValue,\n };\n }\n return row;\n });\n });\n },\n },\n },\n minSize: 80,\n }),\n columnHelper.accessor('cypherCommand', {\n cell: (info) => info.getValue(),\n minSize: 400,\n size: 400,\n }),\n ];\n const table = useReactTable({\n columnResizeMode: 'onChange',\n columns: COMMON_COLUMNS,\n data: data,\n debugColumns: true,\n debugHeaders: true,\n debugTable: true,\n defaultColumn: {\n maxSize: 800,\n minSize: 80,\n },\n enableSorting: true,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n initialState: {\n pagination: {\n pageSize: 5,\n },\n },\n });\n\n 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=\"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"]}
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
|
|
22
22
|
import { type Cell, type CellContext, type Header as HeaderType, type Row, type RowData, type SortDirection } from '@tanstack/react-table';
|
|
23
23
|
import type React from 'react';
|
|
24
|
+
import type { GroupBase, SelectComponentsConfig } from 'react-select';
|
|
24
25
|
import { type CommonProps, type PolymorphicCommonProps } from '../_common/types';
|
|
25
26
|
import { CleanIconButton } from '../clean-icon-button';
|
|
26
27
|
import { DataGridCrossIcon } from '../icons';
|
|
@@ -162,8 +163,22 @@ type DropDownCellProps<T extends RowData> = {
|
|
|
162
163
|
ariaLabel: string;
|
|
163
164
|
/** Whether the select component is disabled */
|
|
164
165
|
isDisabled?: boolean;
|
|
166
|
+
/** Error message. If it exists the select will be in error state. */
|
|
167
|
+
errorText?: string | React.ReactNode;
|
|
168
|
+
/** Help text of the select component. */
|
|
169
|
+
helpText?: string | React.ReactNode;
|
|
170
|
+
/**
|
|
171
|
+
* Override the underlying react-select components (e.g. `Option`, `SingleValue`,
|
|
172
|
+
* `MultiValue`). Merged over the Needle defaults, so only the components you
|
|
173
|
+
* pass are replaced.
|
|
174
|
+
*/
|
|
175
|
+
components?: SelectComponentsConfig<DropDownCellOption, boolean, GroupBase<DropDownCellOption>>;
|
|
176
|
+
};
|
|
177
|
+
type DropDownCellOption = {
|
|
178
|
+
value: string;
|
|
179
|
+
label: string;
|
|
165
180
|
};
|
|
166
|
-
declare const DropDownCell: <T extends RowData>({ cell, options, portalTarget: portalTargetProp, ariaLabel, className, style, htmlAttributes, ref: forwardRef, isDisabled, ...restProps }: CommonProps<"div", DropDownCellProps<T>>) => import("react/jsx-runtime").JSX.Element | null;
|
|
181
|
+
declare const DropDownCell: <T extends RowData>({ cell, options, portalTarget: portalTargetProp, ariaLabel, className, style, htmlAttributes, ref: forwardRef, isDisabled, errorText, helpText, components, ...restProps }: CommonProps<"div", DropDownCellProps<T>>) => import("react/jsx-runtime").JSX.Element | null;
|
|
167
182
|
declare const NoDataIcon: ({ className, ...restProps }: React.ComponentPropsWithoutRef<typeof DataGridCrossIcon>) => import("react/jsx-runtime").JSX.Element;
|
|
168
183
|
export { ResizingBar, Header, Body, BodyCell, BodyRow, InlineEditCell, DropDownCell, ActionCell, HeaderCell, HeaderTitle, Navigation, TableResults, RowsPerPage, Pagination, PaginationNumericButtons, PaginationArrowButton, PaginationNumericButton, NoDataPlaceholder, NoDataIcon, LoadingPlaceholder, Scrollable, };
|
|
169
184
|
//# sourceMappingURL=Components.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Components.d.ts","sourceRoot":"","sources":["../../../src/data-grid/Components.tsx"],"names":[],"mappings":"AAqBA,OAAO,EACL,KAAK,IAAI,EACT,KAAK,WAAW,EAEhB,KAAK,MAAM,IAAI,UAAU,EACzB,KAAK,GAAG,EACR,KAAK,OAAO,EACZ,KAAK,aAAa,EACnB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Components.d.ts","sourceRoot":"","sources":["../../../src/data-grid/Components.tsx"],"names":[],"mappings":"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"}
|
|
@@ -108,7 +108,7 @@ declare const DataGrid: (<T extends RowData = unknown>({ isResizable, isLoading,
|
|
|
108
108
|
cell: import("@tanstack/react-table").Header<T, unknown>;
|
|
109
109
|
children?: React.ReactNode;
|
|
110
110
|
}>) => import("react/jsx-runtime").JSX.Element | null;
|
|
111
|
-
DropDownCell: <T extends RowData>({ cell, options, portalTarget: portalTargetProp, ariaLabel, className, style, htmlAttributes, ref: forwardRef, isDisabled, ...restProps }: CommonProps<"div", {
|
|
111
|
+
DropDownCell: <T extends RowData>({ cell, options, portalTarget: portalTargetProp, ariaLabel, className, style, htmlAttributes, ref: forwardRef, isDisabled, errorText, helpText, components, ...restProps }: CommonProps<"div", {
|
|
112
112
|
cell: import("@tanstack/react-table").CellContext<T, unknown>;
|
|
113
113
|
options: {
|
|
114
114
|
value: string;
|
|
@@ -117,6 +117,15 @@ declare const DataGrid: (<T extends RowData = unknown>({ isResizable, isLoading,
|
|
|
117
117
|
portalTarget?: HTMLElement | null;
|
|
118
118
|
ariaLabel: string;
|
|
119
119
|
isDisabled?: boolean;
|
|
120
|
+
errorText?: string | React.ReactNode;
|
|
121
|
+
helpText?: string | React.ReactNode;
|
|
122
|
+
components?: import("react-select").SelectComponentsConfig<{
|
|
123
|
+
value: string;
|
|
124
|
+
label: string;
|
|
125
|
+
}, boolean, import("react-select").GroupBase<{
|
|
126
|
+
value: string;
|
|
127
|
+
label: string;
|
|
128
|
+
}>>;
|
|
120
129
|
}>) => import("react/jsx-runtime").JSX.Element | null;
|
|
121
130
|
Header: ({ children, className, style, htmlAttributes, ref, ...restProps }: CommonProps<"div", {
|
|
122
131
|
children?: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../../src/data-grid/DataGrid.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EACL,KAAK,OAAO,EACZ,KAAK,KAAK,IAAI,YAAY,EAC3B,MAAM,uBAAuB,CAAC;AAU/B,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEzE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAC;AA2B5C,OAAO,EACL,KAAK,2BAA2B,EAGjC,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,aAAK,eAAe;IAClB,QAAQ,cAAc;IACtB,UAAU,eAAe;IACzB,QAAQ,aAAa;IACrB,IAAI,SAAS;CACd;AAED,MAAM,MAAM,WAAW,GAAG,GAAG,eAAe,EAAE,CAAC;AAE/C,aAAK,eAAe;IAClB,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,WAAW,GAAG,GAAG,eAAe,EAAE,CAAC;AAE/C,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,OAAO,IAAI;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;QAChB,6CAA6C;QAC7C,gBAAgB,EAAE,OAAO,CAAC;QAC1B,uCAAuC;QACvC,WAAW,EAAE,WAAW,CAAC;QACzB,yDAAyD;QACzD,WAAW,EAAE,WAAW,CAAC;QACzB,6EAA6E;QAC7E,eAAe,EAAE,OAAO,CAAC;QACzB,wCAAwC;QACxC,SAAS,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oCAAoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;;OAMG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IAEH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IACnC,4CAA4C;IAC5C,aAAa,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC/B,oCAAoC;IACpC,UAAU,CAAC,EAAE,2BAA2B,CAAC,CAAC,CAAC,CAAC;IAC5C,sFAAsF;IACtF,SAAS,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;IACtD;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,yDAAyD;IACzD,UAAU,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACjC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC,CAAC;AA4NF,QAAA,MAAM,QAAQ,IAlN8B,CAAC,SAAS,OAAO,iQAmB1D,WAAW,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC
|
|
1
|
+
{"version":3,"file":"DataGrid.d.ts","sourceRoot":"","sources":["../../../src/data-grid/DataGrid.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EACL,KAAK,OAAO,EACZ,KAAK,KAAK,IAAI,YAAY,EAC3B,MAAM,uBAAuB,CAAC;AAU/B,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEzE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,aAAa,CAAC;AA2B5C,OAAO,EACL,KAAK,2BAA2B,EAGjC,MAAM,qBAAqB,CAAC;AAG7B,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAE7D,aAAK,eAAe;IAClB,QAAQ,cAAc;IACtB,UAAU,eAAe;IACzB,QAAQ,aAAa;IACrB,IAAI,SAAS;CACd;AAED,MAAM,MAAM,WAAW,GAAG,GAAG,eAAe,EAAE,CAAC;AAE/C,aAAK,eAAe;IAClB,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,MAAM,MAAM,WAAW,GAAG,GAAG,eAAe,EAAE,CAAC;AAE/C,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,OAAO,IAAI;IAC7C,OAAO,CAAC,EAAE,OAAO,CAAC;QAChB,6CAA6C;QAC7C,gBAAgB,EAAE,OAAO,CAAC;QAC1B,uCAAuC;QACvC,WAAW,EAAE,WAAW,CAAC;QACzB,yDAAyD;QACzD,WAAW,EAAE,WAAW,CAAC;QACzB,6EAA6E;QAC7E,eAAe,EAAE,OAAO,CAAC;QACzB,wCAAwC;QACxC,SAAS,EAAE,OAAO,CAAC;KACpB,CAAC,CAAC;IACH,oCAAoC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oCAAoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;;;;OAMG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IAEH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IACnC,4CAA4C;IAC5C,aAAa,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC/B,oCAAoC;IACpC,UAAU,CAAC,EAAE,2BAA2B,CAAC,CAAC,CAAC,CAAC;IAC5C,sFAAsF;IACtF,SAAS,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IAClC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC;IACtD;;OAEG;IACH,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,yDAAyD;IACzD,UAAU,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACjC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC,CAAC;AA4NF,QAAA,MAAM,QAAQ,IAlN8B,CAAC,SAAS,OAAO,iQAmB1D,WAAW,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+L8B,CAAC;AAEtE,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
|
@@ -49,7 +49,17 @@ declare module '@tanstack/react-table' {
|
|
|
49
49
|
onEditChange: (newValue: string, cell: CellContext<TData, TValue>) => void;
|
|
50
50
|
};
|
|
51
51
|
isDropDownCell?: {
|
|
52
|
-
|
|
52
|
+
/**
|
|
53
|
+
* Whether multiple options can be selected.
|
|
54
|
+
* When `true`, the column's value should be an array of values.
|
|
55
|
+
*/
|
|
56
|
+
isMulti?: boolean;
|
|
57
|
+
/**
|
|
58
|
+
* Called when the selection changes. For array-valued (multi-select) columns
|
|
59
|
+
* `newValue` is the array of selected values; otherwise it is the selected
|
|
60
|
+
* value, or `undefined` when the selection is cleared.
|
|
61
|
+
*/
|
|
62
|
+
onChange: (newValue: TValue extends string[] ? string[] : string | undefined, cell: CellContext<TData, TValue>) => void;
|
|
53
63
|
};
|
|
54
64
|
}
|
|
55
65
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datagrid-types.d.ts","sourceRoot":"","sources":["../../../src/data-grid/datagrid-types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEvE,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,mBAAmB,EACzB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,MAAM,YAAY,GAAG,aAAa,CAAC;AACzC,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC;AAEtC,OAAO,QAAQ,uBAAuB,CAAC;IACrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,aAAa,CAAC,EAAE;YACd;;;eAGG;YACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;YACnC,oDAAoD;YACpD,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;YACzB,0DAA0D;YAC1D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;SAC1C,CAAC;QACF,6EAA6E;QAC7E,YAAY,CAAC,EAAE;YACb,oDAAoD;YACpD,OAAO,EAAE,CAAC;gBACR,OAAO,CAAC,EAAE,CACR,KAAK,EACD,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,GACzC,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,EACpC,IAAI,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,KAC7B,IAAI,CAAC;aACX,GAAG,CACA,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,GACpC,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,CACjC,CAAC,EAAE,CAAC;YACL,2DAA2D;YAC3D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;SAC1C,CAAC;QACF,gBAAgB,CAAC,EAAE;YACjB,YAAY,EAAE,CACZ,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,KAC7B,IAAI,CAAC;SACX,CAAC;QACF,cAAc,CAAC,EAAE;YACf,QAAQ,EAAE,CACR,QAAQ,EAAE,MAAM,GAAG,SAAS,
|
|
1
|
+
{"version":3,"file":"datagrid-types.d.ts","sourceRoot":"","sources":["../../../src/data-grid/datagrid-types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAEvE,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,mBAAmB,EACzB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,MAAM,YAAY,GAAG,aAAa,CAAC;AACzC,MAAM,MAAM,SAAS,GAAG,aAAa,CAAC;AAEtC,OAAO,QAAQ,uBAAuB,CAAC;IACrC,UAAU,UAAU,CAAC,KAAK,SAAS,OAAO,EAAE,MAAM;QAChD,aAAa,CAAC,EAAE;YACd;;;eAGG;YACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;YACnC,oDAAoD;YACpD,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;YACzB,0DAA0D;YAC1D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;SAC1C,CAAC;QACF,6EAA6E;QAC7E,YAAY,CAAC,EAAE;YACb,oDAAoD;YACpD,OAAO,EAAE,CAAC;gBACR,OAAO,CAAC,EAAE,CACR,KAAK,EACD,KAAK,CAAC,UAAU,CAAC,WAAW,EAAE,UAAU,CAAC,GACzC,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,EACpC,IAAI,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,KAC7B,IAAI,CAAC;aACX,GAAG,CACA,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,GACpC,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,CACjC,CAAC,EAAE,CAAC;YACL,2DAA2D;YAC3D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;SAC1C,CAAC;QACF,gBAAgB,CAAC,EAAE;YACjB,YAAY,EAAE,CACZ,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,KAC7B,IAAI,CAAC;SACX,CAAC;QACF,cAAc,CAAC,EAAE;YACf;;;eAGG;YACH,OAAO,CAAC,EAAE,OAAO,CAAC;YAClB;;;;eAIG;YACH,QAAQ,EAAE,CACR,QAAQ,EAAE,MAAM,SAAS,MAAM,EAAE,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,EACjE,IAAI,EAAE,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,KAC7B,IAAI,CAAC;SACX,CAAC;KACH;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datagrid-in-dialog.story.d.ts","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-in-dialog.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAyFjD,QAAA,MAAM,SAAS,+
|
|
1
|
+
{"version":3,"file":"datagrid-in-dialog.story.d.ts","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-in-dialog.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAyFjD,QAAA,MAAM,SAAS,+CA8Ld,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -41,7 +41,7 @@ declare const _default: {
|
|
|
41
41
|
cell: import("@tanstack/react-table").Header<T, unknown>;
|
|
42
42
|
children?: React.ReactNode;
|
|
43
43
|
}>) => import("react/jsx-runtime").JSX.Element | null;
|
|
44
|
-
DropDownCell: <T extends import("@tanstack/react-table").RowData>({ cell, options, portalTarget: portalTargetProp, ariaLabel, className, style, htmlAttributes, ref: forwardRef, isDisabled, ...restProps }: import("../../_common/types").CommonProps<"div", {
|
|
44
|
+
DropDownCell: <T extends import("@tanstack/react-table").RowData>({ cell, options, portalTarget: portalTargetProp, ariaLabel, className, style, htmlAttributes, ref: forwardRef, isDisabled, errorText, helpText, components, ...restProps }: import("../../_common/types").CommonProps<"div", {
|
|
45
45
|
cell: import("@tanstack/react-table").CellContext<T, unknown>;
|
|
46
46
|
options: {
|
|
47
47
|
value: string;
|
|
@@ -50,6 +50,15 @@ declare const _default: {
|
|
|
50
50
|
portalTarget?: HTMLElement | null;
|
|
51
51
|
ariaLabel: string;
|
|
52
52
|
isDisabled?: boolean;
|
|
53
|
+
errorText?: string | React.ReactNode;
|
|
54
|
+
helpText?: string | React.ReactNode;
|
|
55
|
+
components?: import("react-select").SelectComponentsConfig<{
|
|
56
|
+
value: string;
|
|
57
|
+
label: string;
|
|
58
|
+
}, boolean, import("react-select").GroupBase<{
|
|
59
|
+
value: string;
|
|
60
|
+
label: string;
|
|
61
|
+
}>>;
|
|
53
62
|
}>) => import("react/jsx-runtime").JSX.Element | null;
|
|
54
63
|
Header: ({ children, className, style, htmlAttributes, ref, ...restProps }: import("../../_common/types").CommonProps<"div", {
|
|
55
64
|
children?: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datagrid-pinned-columns.stories.d.ts","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-pinned-columns.stories.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC
|
|
1
|
+
{"version":3,"file":"datagrid-pinned-columns.stories.d.ts","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-pinned-columns.stories.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUjD,wBAQE;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,aAAa,EAAE,MAAM,CAAC;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC;AAkLF,eAAO,MAAM,eAAe,+CAgC3B,CAAC;AAEF,eAAO,MAAM,cAAc,+CA6B1B,CAAC;AAEF,eAAO,MAAM,eAAe,+CA+B3B,CAAC"}
|
|
@@ -41,7 +41,7 @@ declare const _default: {
|
|
|
41
41
|
cell: import("@tanstack/react-table").Header<T, unknown>;
|
|
42
42
|
children?: React.ReactNode;
|
|
43
43
|
}>) => import("react/jsx-runtime").JSX.Element | null;
|
|
44
|
-
DropDownCell: <T extends import("@tanstack/react-table").RowData>({ cell, options, portalTarget: portalTargetProp, ariaLabel, className, style, htmlAttributes, ref: forwardRef, isDisabled, ...restProps }: import("../../_common/types").CommonProps<"div", {
|
|
44
|
+
DropDownCell: <T extends import("@tanstack/react-table").RowData>({ cell, options, portalTarget: portalTargetProp, ariaLabel, className, style, htmlAttributes, ref: forwardRef, isDisabled, errorText, helpText, components, ...restProps }: import("../../_common/types").CommonProps<"div", {
|
|
45
45
|
cell: import("@tanstack/react-table").CellContext<T, unknown>;
|
|
46
46
|
options: {
|
|
47
47
|
value: string;
|
|
@@ -50,6 +50,15 @@ declare const _default: {
|
|
|
50
50
|
portalTarget?: HTMLElement | null;
|
|
51
51
|
ariaLabel: string;
|
|
52
52
|
isDisabled?: boolean;
|
|
53
|
+
errorText?: string | React.ReactNode;
|
|
54
|
+
helpText?: string | React.ReactNode;
|
|
55
|
+
components?: import("react-select").SelectComponentsConfig<{
|
|
56
|
+
value: string;
|
|
57
|
+
label: string;
|
|
58
|
+
}, boolean, import("react-select").GroupBase<{
|
|
59
|
+
value: string;
|
|
60
|
+
label: string;
|
|
61
|
+
}>>;
|
|
53
62
|
}>) => import("react/jsx-runtime").JSX.Element | null;
|
|
54
63
|
Header: ({ children, className, style, htmlAttributes, ref, ...restProps }: import("../../_common/types").CommonProps<"div", {
|
|
55
64
|
children?: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datagrid-search-and-filters.stories.d.ts","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-search-and-filters.stories.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC
|
|
1
|
+
{"version":3,"file":"datagrid-search-and-filters.stories.d.ts","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-search-and-filters.stories.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCjD,wBAQE;AA+CF,eAAO,MAAM,UAAU,+CA8MtB,CAAC;AAEF,eAAO,MAAM,eAAe,+CAkF3B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"datagrid-using-editable-cells.story.d.ts","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-using-editable-cells.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;
|
|
1
|
+
{"version":3,"file":"datagrid-using-editable-cells.story.d.ts","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-using-editable-cells.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAyHjD,QAAA,MAAM,SAAS,+CA4Kd,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neo4j-ndl/react",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.15.1",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"description": "React implementation of Neo4j Design System",
|
|
6
6
|
"keywords": [
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
"@tanstack/react-table": "8.21.3",
|
|
89
89
|
"react": ">=19.0.0",
|
|
90
90
|
"react-dom": ">=19.0.0",
|
|
91
|
-
"@neo4j-ndl/base": "^4.
|
|
91
|
+
"@neo4j-ndl/base": "^4.15.0"
|
|
92
92
|
},
|
|
93
93
|
"dependencies": {
|
|
94
94
|
"@dnd-kit/core": "6.3.1",
|