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/cjs/combobox/stories/combobox-sizes.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-sizes.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAE5C,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;CACnC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,gCAAK,SAAS,EAAC,~~kCAAkC~~,~~YAC7C~~,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACrD,iCAAK,SAAS,EAAC,~~iCAAiC~~,~~aAC9C~~,8BAAG,SAAS,EAAC,~~cAAc~~,YAAE,IAAI,GAAK,~~EACtC~~,iCAAK,SAAS,EAAC,~~iDAAiD~~,~~aAC9D~~,uBAAC,gBAAQ,IACP,KAAK,EAAE,GAAG,IAAI,gBAAgB,EAC9B,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,EACxB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,GACV,EACF,uBAAC,gBAAQ,IACP,KAAK,EAAE,GAAG,IAAI,eAAe,EAC7B,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EACjC,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,GACV,IACE,~~KAhB8C~~,IAAI,~~CAiBpD~~,CACP,CAAC,GACE,CACP,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox } from '@neo4j-ndl/react';\n\nconst options = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n];\n\nconst Component = () => (\n <div className=\"n-flex n-flex-col n-gap-token-16\">\n {(['small', 'medium', 'large'] as const).map((size) => (\n <div className=\"n-flex n-flex-col n-gap-token-4\" key={size}>\n <p className=\"n-capitalize\">{size}</p>\n <div className=\"n-flex n-flex-wrap n-items-start n-gap-token-16\">\n <Combobox\n label={`${size} single-select`}\n defaultValue={options[0]}\n options={options}\n size={size}\n />\n <Combobox\n label={`${size} multi-select`}\n defaultValue={options.slice(0, 2)}\n isMulti\n options={options}\n size={size}\n />\n </div>\n </div>\n ))}\n </div>\n);\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"combobox-sizes.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAE5C,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;CACnC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,gCAAK,SAAS,EAAC,4BAA4B,YACvC,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACrD,iCAAK,SAAS,EAAC,2BAA2B,aACxC,8BAAG,SAAS,EAAC,YAAY,YAAE,IAAI,GAAK,EACpC,iCAAK,SAAS,EAAC,yCAAyC,aACtD,uBAAC,gBAAQ,IACP,KAAK,EAAE,GAAG,IAAI,gBAAgB,EAC9B,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,EACxB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,GACV,EACF,uBAAC,gBAAQ,IACP,KAAK,EAAE,GAAG,IAAI,eAAe,EAC7B,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EACjC,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,GACV,IACE,KAhBwC,IAAI,CAiB9C,CACP,CAAC,GACE,CACP,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox } from '@neo4j-ndl/react';\n\nconst options = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n];\n\nconst Component = () => (\n <div className=\"flex flex-col gap-token-16\">\n {(['small', 'medium', 'large'] as const).map((size) => (\n <div className=\"flex flex-col gap-token-4\" key={size}>\n <p className=\"capitalize\">{size}</p>\n <div className=\"flex flex-wrap items-start gap-token-16\">\n <Combobox\n label={`${size} single-select`}\n defaultValue={options[0]}\n options={options}\n size={size}\n />\n <Combobox\n label={`${size} multi-select`}\n defaultValue={options.slice(0, 2)}\n isMulti\n options={options}\n size={size}\n />\n </div>\n </div>\n ))}\n </div>\n);\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-validation.story.js CHANGED Viewed

@@ -28,6 +28,6 @@ const options = [
     { label: 'Aura', value: 'aura' },
     { label: 'Bloom', value: 'bloom' },
 ];
-const Component = () => ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", helpText: "Pick the product the ticket is about.", isRequired: true, hasRequiredIndicator: true, options: options }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", errorText: "Select a product to continue.", isRequired: true, hasRequiredIndicator: true, options: options }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Environment", helpText: "Leave empty to include every environment.", hasRequiredIndicator: true, options: options })] }));
+const Component = () => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", helpText: "Pick the product the ticket is about.", isRequired: true, hasRequiredIndicator: true, options: options }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", errorText: "Select a product to continue.", isRequired: true, hasRequiredIndicator: true, options: options }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Environment", helpText: "Leave empty to include every environment.", hasRequiredIndicator: true, options: options })] }));
 exports.default = Component;
 //# sourceMappingURL=combobox-validation.story.js.map

package/lib/cjs/combobox/stories/combobox-validation.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-validation.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-validation.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAE5C,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;CACnC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,iCAAK,SAAS,EAAC,~~kCAAkC~~,~~aAC/C~~,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,uCAAuC,EAChD,UAAU,QACV,oBAAoB,QACpB,OAAO,EAAE,OAAO,GAChB,EACF,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,+BAA+B,EACzC,UAAU,QACV,oBAAoB,QACpB,OAAO,EAAE,OAAO,GAChB,EACF,uBAAC,gBAAQ,IACP,KAAK,EAAC,aAAa,EACnB,QAAQ,EAAC,2CAA2C,EACpD,oBAAoB,QACpB,OAAO,EAAE,OAAO,GAChB,IACE,CACP,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox } from '@neo4j-ndl/react';\n\nconst options = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n];\n\nconst Component = () => (\n <div className=\"n-flex n-flex-col n-gap-token-16\">\n <Combobox\n label=\"Product\"\n helpText=\"Pick the product the ticket is about.\"\n isRequired\n hasRequiredIndicator\n options={options}\n />\n <Combobox\n label=\"Product\"\n errorText=\"Select a product to continue.\"\n isRequired\n hasRequiredIndicator\n options={options}\n />\n <Combobox\n label=\"Environment\"\n helpText=\"Leave empty to include every environment.\"\n hasRequiredIndicator\n options={options}\n />\n </div>\n);\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"combobox-validation.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-validation.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAE5C,MAAM,OAAO,GAAG;IACd,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;IAClC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;IAChC,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;CACnC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,iCAAK,SAAS,EAAC,4BAA4B,aACzC,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,uCAAuC,EAChD,UAAU,QACV,oBAAoB,QACpB,OAAO,EAAE,OAAO,GAChB,EACF,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,+BAA+B,EACzC,UAAU,QACV,oBAAoB,QACpB,OAAO,EAAE,OAAO,GAChB,EACF,uBAAC,gBAAQ,IACP,KAAK,EAAC,aAAa,EACnB,QAAQ,EAAC,2CAA2C,EACpD,oBAAoB,QACpB,OAAO,EAAE,OAAO,GAChB,IACE,CACP,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Combobox } from '@neo4j-ndl/react';\n\nconst options = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n];\n\nconst Component = () => (\n <div className=\"flex flex-col gap-token-16\">\n <Combobox\n label=\"Product\"\n helpText=\"Pick the product the ticket is about.\"\n isRequired\n hasRequiredIndicator\n options={options}\n />\n <Combobox\n label=\"Product\"\n errorText=\"Select a product to continue.\"\n isRequired\n hasRequiredIndicator\n options={options}\n />\n <Combobox\n label=\"Environment\"\n helpText=\"Leave empty to include every environment.\"\n hasRequiredIndicator\n options={options}\n />\n </div>\n);\n\nexport default Component;\n"]}

package/lib/cjs/conditional-wrap/stories/conditional-wrap-default.story.js CHANGED Viewed

@@ -26,7 +26,7 @@ const react_2 = require("react");
 const ConditionalWrap_1 = require("../ConditionalWrap");
 const Component = () => {
     const [shouldWrap, setShouldWrap] = (0, react_2.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-6", children: [(0, jsx_runtime_1.jsx)(react_1.Switch, { isChecked: shouldWrap, onChange: () => setShouldWrap(!shouldWrap), label: "shouldWrap" }), (0, jsx_runtime_1.jsx)(ConditionalWrap_1.ConditionalWrap, { shouldWrap: shouldWrap, wrap: (children) => (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { children: children }), children: "Content" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-6", children: [(0, jsx_runtime_1.jsx)(react_1.Switch, { isChecked: shouldWrap, onChange: () => setShouldWrap(!shouldWrap), label: "shouldWrap" }), (0, jsx_runtime_1.jsx)(ConditionalWrap_1.ConditionalWrap, { shouldWrap: shouldWrap, wrap: (children) => (0, jsx_runtime_1.jsx)(react_1.StatusLabel, { children: children }), children: "Content" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=conditional-wrap-default.story.js.map

package/lib/cjs/conditional-wrap/stories/conditional-wrap-default.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"conditional-wrap-default.story.js","sourceRoot":"","sources":["../../../../src/conditional-wrap/stories/conditional-wrap-default.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4CAAuD;AACvD,iCAAiC;AAEjC,wDAAqD;AAErD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEpD,OAAO,CACL,iCAAK,SAAS,EAAC,~~2BAA2B~~,~~aACxC~~,uBAAC,cAAM,IACL,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,EAC1C,KAAK,EAAC,YAAY,GAClB,EACF,uBAAC,iCAAe,IACd,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,uBAAC,mBAAW,cAAE,QAAQ,GAAe,wBAGzC,IACd,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { StatusLabel, Switch } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nimport { ConditionalWrap } from '../ConditionalWrap';\n\nconst Component = () => {\n const [shouldWrap, setShouldWrap] = useState(false);\n\n return (\n <div className=\"n-flex n-flex-col n-gap-6\">\n <Switch\n isChecked={shouldWrap}\n onChange={() => setShouldWrap(!shouldWrap)}\n label=\"shouldWrap\"\n />\n <ConditionalWrap\n shouldWrap={shouldWrap}\n wrap={(children) => <StatusLabel>{children}</StatusLabel>}\n >\n Content\n </ConditionalWrap>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"conditional-wrap-default.story.js","sourceRoot":"","sources":["../../../../src/conditional-wrap/stories/conditional-wrap-default.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4CAAuD;AACvD,iCAAiC;AAEjC,wDAAqD;AAErD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEpD,OAAO,CACL,iCAAK,SAAS,EAAC,qBAAqB,aAClC,uBAAC,cAAM,IACL,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,EAC1C,KAAK,EAAC,YAAY,GAClB,EACF,uBAAC,iCAAe,IACd,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,uBAAC,mBAAW,cAAE,QAAQ,GAAe,wBAGzC,IACd,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { StatusLabel, Switch } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nimport { ConditionalWrap } from '../ConditionalWrap';\n\nconst Component = () => {\n const [shouldWrap, setShouldWrap] = useState(false);\n\n return (\n <div className=\"flex flex-col gap-6\">\n <Switch\n isChecked={shouldWrap}\n onChange={() => setShouldWrap(!shouldWrap)}\n label=\"shouldWrap\"\n />\n <ConditionalWrap\n shouldWrap={shouldWrap}\n wrap={(children) => <StatusLabel>{children}</StatusLabel>}\n >\n Content\n </ConditionalWrap>\n </div>\n );\n};\n\nexport default Component;\n"]}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"datagrid-compact-mode.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-compact-mode.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,uDAM+B;AAE/B,6CAA+C;AAQ/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,IAAA,gCAAkB,GAAkB,CAAC;IAE1D,MAAM,OAAO,GAAG;QACd,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM;YACpB,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE;YAC3B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAClC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK;YACnB,OAAO,EAAE,EAAE;SACZ,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB;YAC9B,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;KACH,CAAC;IAEF,MAAM,KAAK,GAAG,IAAA,2BAAa,EAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO;QACP,IAAI,EAAE,4BAAe;QACrB,YAAY,EAAE,IAAI;QAClB,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,IAAI;QAChB,aAAa,EAAE;YACb,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,EAAE;SACZ;QACD,aAAa,EAAE,IAAI;QACnB,eAAe,EAAE,IAAA,6BAAe,GAAE;QAClC,qBAAqB,EAAE,IAAA,mCAAqB,GAAE;QAC9C,iBAAiB,EAAE,IAAA,+BAAiB,GAAE;QACtC,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,CAAC;aACZ;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,gCAAK,SAAS,EAAC,~~0CAA0C~~,~~YACvD~~,uBAAC,gBAAQ,IACP,WAAW,EAAE,KAAK,EAClB,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,KAAK,EAC1B,OAAO,EAAE;gBACP,WAAW,EAAE,WAAW;gBACxB,eAAe,EAAE,IAAI;gBACrB,gBAAgB,EAAE,KAAK;gBACvB,SAAS,EAAE,IAAI;aAChB,GACD,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DataGrid } from '@neo4j-ndl/react';\nimport {\n createColumnHelper,\n getCoreRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n name: string;\n age: number;\n cypherCommand: string;\n};\n\nconst Component = () => {\n const columnHelper = createColumnHelper<TestDataFormat>();\n\n const columns = [\n columnHelper.accessor('name', {\n cell: (info) => info.getValue(),\n footer: (info) => info.column.id,\n header: () => 'Name',\n maxSize: 300,\n minSize: 180,\n size: 220,\n }),\n columnHelper.accessor('age', {\n cell: (info) => info.renderValue(),\n footer: (info) => info.column.id,\n header: () => 'Age',\n minSize: 80,\n }),\n columnHelper.accessor('cypherCommand', {\n cell: (info) => info.getValue(),\n footer: (info) => info.column.id,\n header: () => 'Cypher Command',\n minSize: 400,\n size: 400,\n }),\n ];\n\n const table = useReactTable({\n columnResizeMode: 'onChange',\n columns,\n data: TABLE_DEMO_DATA,\n debugColumns: true,\n debugHeaders: true,\n debugTable: true,\n defaultColumn: {\n maxSize: 800,\n minSize: 80,\n },\n enableSorting: true,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n initialState: {\n pagination: {\n pageSize: 5,\n },\n },\n });\n\n return (\n <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n <DataGrid\n isResizable={false}\n tableInstance={table}\n isKeyboardNavigable={false}\n styling={{\n borderStyle: 'all-sides',\n hasHoverEffects: true,\n hasZebraStriping: false,\n isCompact: true,\n }}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"datagrid-compact-mode.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-compact-mode.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,uDAM+B;AAE/B,6CAA+C;AAQ/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,IAAA,gCAAkB,GAAkB,CAAC;IAE1D,MAAM,OAAO,GAAG;QACd,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM;YACpB,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE;YAC3B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAClC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK;YACnB,OAAO,EAAE,EAAE;SACZ,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB;YAC9B,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;KACH,CAAC;IAEF,MAAM,KAAK,GAAG,IAAA,2BAAa,EAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO;QACP,IAAI,EAAE,4BAAe;QACrB,YAAY,EAAE,IAAI;QAClB,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,IAAI;QAChB,aAAa,EAAE;YACb,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,EAAE;SACZ;QACD,aAAa,EAAE,IAAI;QACnB,eAAe,EAAE,IAAA,6BAAe,GAAE;QAClC,qBAAqB,EAAE,IAAA,mCAAqB,GAAE;QAC9C,iBAAiB,EAAE,IAAA,+BAAiB,GAAE;QACtC,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,CAAC;aACZ;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,gCAAK,SAAS,EAAC,sCAAsC,YACnD,uBAAC,gBAAQ,IACP,WAAW,EAAE,KAAK,EAClB,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,KAAK,EAC1B,OAAO,EAAE;gBACP,WAAW,EAAE,WAAW;gBACxB,eAAe,EAAE,IAAI;gBACrB,gBAAgB,EAAE,KAAK;gBACvB,SAAS,EAAE,IAAI;aAChB,GACD,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DataGrid } from '@neo4j-ndl/react';\nimport {\n createColumnHelper,\n getCoreRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n name: string;\n age: number;\n cypherCommand: string;\n};\n\nconst Component = () => {\n const columnHelper = createColumnHelper<TestDataFormat>();\n\n const columns = [\n columnHelper.accessor('name', {\n cell: (info) => info.getValue(),\n footer: (info) => info.column.id,\n header: () => 'Name',\n maxSize: 300,\n minSize: 180,\n size: 220,\n }),\n columnHelper.accessor('age', {\n cell: (info) => info.renderValue(),\n footer: (info) => info.column.id,\n header: () => 'Age',\n minSize: 80,\n }),\n columnHelper.accessor('cypherCommand', {\n cell: (info) => info.getValue(),\n footer: (info) => info.column.id,\n header: () => 'Cypher Command',\n minSize: 400,\n size: 400,\n }),\n ];\n\n const table = useReactTable({\n columnResizeMode: 'onChange',\n columns,\n data: TABLE_DEMO_DATA,\n debugColumns: true,\n debugHeaders: true,\n debugTable: true,\n defaultColumn: {\n maxSize: 800,\n minSize: 80,\n },\n enableSorting: true,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n initialState: {\n pagination: {\n pageSize: 5,\n },\n },\n });\n\n return (\n <div className=\"w-full bg-light-neutral-text-weakest\">\n <DataGrid\n isResizable={false}\n tableInstance={table}\n isKeyboardNavigable={false}\n styling={{\n borderStyle: 'all-sides',\n hasHoverEffects: true,\n hasZebraStriping: false,\n isCompact: true,\n }}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}

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

@@ -82,9 +82,9 @@ const Component = () => {
             },
         },
     });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-8", children: [(0, jsx_runtime_1.jsxs)(react_1.Typography, { variant: "body-medium", as: "div", className: "n-flex n-flex-col n-gap-token-8 n-p-token-24 n-pb-token-16", children: [(0, jsx_runtime_1.jsx)("div", { children: "Current container height: 400px" }), (0, jsx_runtime_1.jsx)("div", { children: "Try updating height with Storybook' s story controls\uD83D\uDC47" })] }), (0, jsx_runtime_1.jsx)("div", { style: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-8", children: [(0, jsx_runtime_1.jsxs)(react_1.Typography, { variant: "body-medium", as: "div", className: "flex flex-col gap-token-8 p-token-24 pb-token-16", children: [(0, jsx_runtime_1.jsx)("div", { children: "Current container height: 400px" }), (0, jsx_runtime_1.jsx)("div", { children: "Try updating height with Storybook' s story controls\uD83D\uDC47" })] }), (0, jsx_runtime_1.jsx)("div", { style: {
                     height: '400px',
-                }, children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { className: "n-h-full", isResizable: true, tableInstance: table, components: {
+                }, children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { className: "h-full", isResizable: true, tableInstance: table, components: {
                         Body: (props) => (0, jsx_runtime_1.jsx)(react_1.DataGrid.Body, Object.assign({}, props)),
                         HeaderTitle: ({ cell, children }) => {
                             const { column, id } = cell;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"datagrid-component-overriding.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-component-overriding.story.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAiE;AACjE,uDAM+B;AAE/B,6CAA+C;AAQ/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,IAAA,gCAAkB,GAAkB,CAAC;IAE1D,MAAM,OAAO,GAAG;QACd,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM;YACpB,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE;YAC3B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAClC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK;YACnB,OAAO,EAAE,EAAE;SACZ,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB;YAC9B,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;KACH,CAAC;IAEF,MAAM,KAAK,GAAG,IAAA,2BAAa,EAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO;QACP,IAAI,EAAE,4BAAe;QACrB,YAAY,EAAE,IAAI;QAClB,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,IAAI;QAChB,aAAa,EAAE;YACb,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,EAAE;SACZ;QACD,aAAa,EAAE,IAAI;QACnB,eAAe,EAAE,IAAA,6BAAe,GAAE;QAClC,qBAAqB,EAAE,IAAA,mCAAqB,GAAE;QAC9C,iBAAiB,EAAE,IAAA,+BAAiB,GAAE;QACtC,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,CAAC;aACZ;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,iCAAK,SAAS,EAAC,~~iCAAiC~~,~~aAC9C~~,wBAAC,kBAAU,IACT,OAAO,EAAC,aAAa,EACrB,EAAE,EAAC,KAAK,EACR,SAAS,EAAC,~~4DAA4D~~,~~aAEtE~~,8EAA0C,EAC1C,+GAAsE,IAC3D,EAEb,gCACE,KAAK,EAAE;oBACL,MAAM,EAAE,OAAO;iBAChB,YAED,uBAAC,gBAAQ,IACP,SAAS,EAAC,~~UAAU~~,~~EACpB~~,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,KAAK,EACpB,UAAU,EAAE;wBACV,IAAI,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,uBAAC,gBAAQ,CAAC,IAAI,oBAAK,KAAK,EAAI;wBAC7C,WAAW,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE;4BAClC,MAAM,EAAE,MAAM,EAAE,EAAE,EAAE,GAAG,IAAI,CAAC;4BAC5B,MAAM,KAAK,GACT,OAAO,MAAM,CAAC,SAAS,CAAC,MAAM,KAAK,QAAQ;gCACzC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM;gCACzB,CAAC,CAAC,EAAE,CAAC;4BACT,OAAO,CACL,wBAAC,eAAO,IAAC,IAAI,EAAC,QAAQ,aACpB,uBAAC,eAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,2CAAO,QAAQ,GAAQ,GACP,EAClB,uBAAC,eAAO,CAAC,OAAO,cAAE,KAAK,GAAmB,IAClC,CACX,CAAC;wBACJ,CAAC;wBACD,uBAAuB,EAAE,CAAC,EAAmC,EAAE,EAAE;gCAAvC,EAAE,UAAU,EAAE,KAAK,OAAgB,EAAX,SAAS,cAAjC,uBAAmC,CAAF;4BACzD,OAAO,CACL,uBAAC,gBAAQ,CAAC,uBAAuB,oBAC3B,SAAS,IACb,UAAU,EAAE,UAAU,EACtB,KAAK,kCACA,KAAK,GACL,CAAC,UAAU,IAAI;oCAChB,eAAe,EACb,4EAA4E;oCAC9E,cAAc,EAAE,WAAW;oCAC3B,YAAY,EAAE,MAAM;oCACpB,SAAS,EAAE,eAAe;iCAC3B,CAAC,KAEJ,CACH,CAAC;wBACJ,CAAC;wBACD,YAAY,EAAE,GAAG,EAAE,CAAC,CAClB,uBAAC,gBAAQ,CAAC,YAAY,2GAGE,CACzB;qBACF,GACD,GACE,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DataGrid, Tooltip, Typography } 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-flex n-flex-col n-gap-token-8\">\n <Typography\n variant=\"body-medium\"\n as=\"div\"\n className=\"n-flex n-flex-col n-gap-token-8 n-p-token-24 n-pb-token-16\"\n >\n <div>Current container height: 400px</div>\n <div>Try updating height with Storybook' s story controls👇</div>\n </Typography>\n\n <div\n style={{\n height: '400px',\n }}\n >\n <DataGrid\n className=\"n-h-full\"\n isResizable={true}\n tableInstance={table}\n components={{\n Body: (props) => <DataGrid.Body {...props} />,\n HeaderTitle: ({ cell, children }) => {\n const { column, id } = cell;\n const title =\n typeof column.columnDef.header === 'string'\n ? column.columnDef.header\n : id;\n return (\n <Tooltip type=\"simple\">\n <Tooltip.Trigger hasButtonWrapper>\n <span>{children}</span>\n </Tooltip.Trigger>\n <Tooltip.Content>{title}</Tooltip.Content>\n </Tooltip>\n );\n },\n PaginationNumericButton: ({ isSelected, style, ...restProps }) => {\n return (\n <DataGrid.PaginationNumericButton\n {...restProps}\n isSelected={isSelected}\n style={{\n ...style,\n ...(isSelected && {\n backgroundImage:\n 'linear-gradient(90deg, #00C0FF 0%, #FFCF00 20%, #FC4F4F 40%, #00C0FF 100%)',\n backgroundSize: '200% auto',\n borderRadius: '10px',\n boxShadow: '0 0 20px #eee',\n }),\n }}\n />\n );\n },\n TableResults: () => (\n <DataGrid.TableResults>\n A table with a fixed height of 100px, custom result section and\n custom pagination button\n </DataGrid.TableResults>\n ),\n }}\n />\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"datagrid-component-overriding.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-component-overriding.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, Tooltip, Typography } 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=\"flex flex-col gap-token-8\">\n <Typography\n variant=\"body-medium\"\n as=\"div\"\n className=\"flex flex-col gap-token-8 p-token-24 pb-token-16\"\n >\n <div>Current container height: 400px</div>\n <div>Try updating height with Storybook' s story controls👇</div>\n </Typography>\n\n <div\n style={{\n height: '400px',\n }}\n >\n <DataGrid\n className=\"h-full\"\n isResizable={true}\n tableInstance={table}\n components={{\n Body: (props) => <DataGrid.Body {...props} />,\n HeaderTitle: ({ cell, children }) => {\n const { column, id } = cell;\n const title =\n typeof column.columnDef.header === 'string'\n ? column.columnDef.header\n : id;\n return (\n <Tooltip type=\"simple\">\n <Tooltip.Trigger hasButtonWrapper>\n <span>{children}</span>\n </Tooltip.Trigger>\n <Tooltip.Content>{title}</Tooltip.Content>\n </Tooltip>\n );\n },\n PaginationNumericButton: ({ isSelected, style, ...restProps }) => {\n return (\n <DataGrid.PaginationNumericButton\n {...restProps}\n isSelected={isSelected}\n style={{\n ...style,\n ...(isSelected && {\n backgroundImage:\n 'linear-gradient(90deg, #00C0FF 0%, #FFCF00 20%, #FC4F4F 40%, #00C0FF 100%)',\n backgroundSize: '200% auto',\n borderRadius: '10px',\n boxShadow: '0 0 20px #eee',\n }),\n }}\n />\n );\n },\n TableResults: () => (\n <DataGrid.TableResults>\n A table with a fixed height of 100px, custom result section and\n custom pagination button\n </DataGrid.TableResults>\n ),\n }}\n />\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/cjs/data-grid/stories/datagrid-custom-cell-with-style-rules.story.js CHANGED Viewed

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

package/lib/cjs/data-grid/stories/datagrid-custom-cell-with-style-rules.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"datagrid-custom-cell-with-style-rules.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-custom-cell-with-style-rules.story.tsx"],"names":[],"mappings":"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~~0CAA0C~~,~~YACvD~~,uBAAC,gBAAQ,IACP,WAAW,EAAE,KAAK,EAClB,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,KAAK,EAC1B,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE;gBACV,QAAQ,EAAE,cAAc;aACzB,EACD,OAAO,EAAE;gBACP,WAAW,EAAE,WAAW;gBACxB,eAAe,EAAE,IAAI;gBACrB,gBAAgB,EAAE,KAAK;aACxB,GACD,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n DataGrid,\n type DataGridStyleRule,\n useDataGridCellStyle,\n} from '@neo4j-ndl/react';\nimport {\n type Cell,\n createColumnHelper,\n flexRender,\n getCoreRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n type RowData,\n useReactTable,\n} from '@tanstack/react-table';\n\nimport { TABLE_DEMO_DATA, type TestDataFormat } from './staticData';\n\nconst styleRules: DataGridStyleRule[] = [\n // Row coloring: all cells styled when name contains \"Alicia\"\n {\n apply: {\n color: { value: '#000000' },\n textColor: { value: '#ffffff' },\n },\n column: null,\n priority: 3,\n where: { contains: [{ column: 'name' }, 'Alicia'] },\n },\n // Cell coloring: cells in the \"age\" column with value 51 get green\n {\n apply: { color: { value: '#00bb00' } },\n column: 'age',\n priority: 3,\n where: { equal: [{ column: 'age' }, 51] },\n },\n // Dual color ranges on the \"age\" column: independent gradients for background\n // (driven by age, full 0-100 range) and text color (driven by age too, but\n // with a narrower 20-80 band so the text contrast is calibrated separately).\n {\n apply: {\n colorRange: {\n maxColor: '#f00000',\n maxValue: 100,\n midColor: '#a00000',\n midValue: 50,\n minColor: '#800000',\n minValue: 0,\n onColumn: 'age',\n },\n textColorRange: {\n maxColor: '#aaaaaa',\n maxValue: 80,\n minColor: '#ffffff',\n minValue: 20,\n onColumn: 'age',\n },\n },\n column: 'age',\n priority: 2, // Lower priority so explicit green rule overrides\n },\n // Multi-column rule: all cells styled when age > 50 AND name contains \"o\"\n {\n apply: {\n color: { value: '#fef3c7' },\n textColor: { value: '#000000' },\n },\n column: null,\n priority: 0, // Lower priority so other rules take precedence\n where: {\n and: [\n { greaterThan: [{ column: 'age' }, 50] },\n { contains: [{ column: 'name' }, 'o'] },\n ],\n },\n },\n];\n\n/\n A custom BodyCell that uses the `useDataGridCellStyle` hook to manually apply style rules to the cell.\n */\nconst CustomBodyCell = <T extends RowData>({\n cell,\n}: {\n cell: Cell<T, unknown>;\n}) => {\n const ruleStyle = useDataGridCellStyle(cell);\n\n return (\n <div\n className=\"ndl-data-grid-td\"\n role=\"cell\"\n style={{\n ...ruleStyle,\n width: cell.column.getSize(),\n }}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </div>\n );\n};\n\nconst Component = () => {\n const columnHelper = createColumnHelper<TestDataFormat>();\n\n const columns = [\n columnHelper.accessor('name', {\n cell: (info) => info.getValue(),\n header: () => 'Name',\n minSize: 180,\n size: 220,\n }),\n columnHelper.accessor('age', {\n cell: (info) => info.renderValue(),\n header: () => 'Age',\n minSize: 80,\n }),\n columnHelper.accessor('cypherCommand', {\n cell: (info) => info.getValue(),\n header: () => 'Cypher Command',\n minSize: 400,\n size: 400,\n }),\n ];\n\n const table = useReactTable({\n columnResizeMode: 'onChange',\n columns,\n data: TABLE_DEMO_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: 10,\n },\n },\n });\n\n return (\n <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n <DataGrid\n isResizable={false}\n tableInstance={table}\n isKeyboardNavigable={false}\n styleRules={styleRules}\n components={{\n BodyCell: CustomBodyCell,\n }}\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-custom-cell-with-style-rules.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-custom-cell-with-style-rules.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n DataGrid,\n type DataGridStyleRule,\n useDataGridCellStyle,\n} from '@neo4j-ndl/react';\nimport {\n type Cell,\n createColumnHelper,\n flexRender,\n getCoreRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n type RowData,\n useReactTable,\n} from '@tanstack/react-table';\n\nimport { TABLE_DEMO_DATA, type TestDataFormat } from './staticData';\n\nconst styleRules: DataGridStyleRule[] = [\n // Row coloring: all cells styled when name contains \"Alicia\"\n {\n apply: {\n color: { value: '#000000' },\n textColor: { value: '#ffffff' },\n },\n column: null,\n priority: 3,\n where: { contains: [{ column: 'name' }, 'Alicia'] },\n },\n // Cell coloring: cells in the \"age\" column with value 51 get green\n {\n apply: { color: { value: '#00bb00' } },\n column: 'age',\n priority: 3,\n where: { equal: [{ column: 'age' }, 51] },\n },\n // Dual color ranges on the \"age\" column: independent gradients for background\n // (driven by age, full 0-100 range) and text color (driven by age too, but\n // with a narrower 20-80 band so the text contrast is calibrated separately).\n {\n apply: {\n colorRange: {\n maxColor: '#f00000',\n maxValue: 100,\n midColor: '#a00000',\n midValue: 50,\n minColor: '#800000',\n minValue: 0,\n onColumn: 'age',\n },\n textColorRange: {\n maxColor: '#aaaaaa',\n maxValue: 80,\n minColor: '#ffffff',\n minValue: 20,\n onColumn: 'age',\n },\n },\n column: 'age',\n priority: 2, // Lower priority so explicit green rule overrides\n },\n // Multi-column rule: all cells styled when age > 50 AND name contains \"o\"\n {\n apply: {\n color: { value: '#fef3c7' },\n textColor: { value: '#000000' },\n },\n column: null,\n priority: 0, // Lower priority so other rules take precedence\n where: {\n and: [\n { greaterThan: [{ column: 'age' }, 50] },\n { contains: [{ column: 'name' }, 'o'] },\n ],\n },\n },\n];\n\n/\n A custom BodyCell that uses the `useDataGridCellStyle` hook to manually apply style rules to the cell.\n */\nconst CustomBodyCell = <T extends RowData>({\n cell,\n}: {\n cell: Cell<T, unknown>;\n}) => {\n const ruleStyle = useDataGridCellStyle(cell);\n\n return (\n <div\n className=\"ndl-data-grid-td\"\n role=\"cell\"\n style={{\n ...ruleStyle,\n width: cell.column.getSize(),\n }}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </div>\n );\n};\n\nconst Component = () => {\n const columnHelper = createColumnHelper<TestDataFormat>();\n\n const columns = [\n columnHelper.accessor('name', {\n cell: (info) => info.getValue(),\n header: () => 'Name',\n minSize: 180,\n size: 220,\n }),\n columnHelper.accessor('age', {\n cell: (info) => info.renderValue(),\n header: () => 'Age',\n minSize: 80,\n }),\n columnHelper.accessor('cypherCommand', {\n cell: (info) => info.getValue(),\n header: () => 'Cypher Command',\n minSize: 400,\n size: 400,\n }),\n ];\n\n const table = useReactTable({\n columnResizeMode: 'onChange',\n columns,\n data: TABLE_DEMO_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: 10,\n },\n },\n });\n\n return (\n <div className=\"w-full bg-light-neutral-text-weakest\">\n <DataGrid\n isResizable={false}\n tableInstance={table}\n isKeyboardNavigable={false}\n styleRules={styleRules}\n components={{\n BodyCell: CustomBodyCell,\n }}\n styling={{\n borderStyle: 'all-sides',\n hasHoverEffects: true,\n hasZebraStriping: false,\n }}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}

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

@@ -38,7 +38,7 @@ const actionsColumn = (tableNav) => ({
         const [selected, setSelected] = (0, react_2.useState)(dropdownOptions[0]);
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const { portalTarget } = (0, react_1.useDataGridContext)();
-        return ((0, jsx_runtime_1.jsx)("div", { "data-testid": `ndl-actions-cell-row-${row.index}`, className: "n-flex n-flex-row n-gap-token-8", children: (0, jsx_runtime_1.jsx)(react_1.Select, { ariaLabel: `actions-select-row-${row.index}`, type: "select", selectProps: {
+        return ((0, jsx_runtime_1.jsx)("div", { "data-testid": `ndl-actions-cell-row-${row.index}`, className: "flex flex-row gap-token-8", children: (0, jsx_runtime_1.jsx)(react_1.Select, { ariaLabel: `actions-select-row-${row.index}`, type: "select", selectProps: {
                     menuPortalTarget: portalTarget,
                     menuPosition: 'fixed',
                     onChange: (event) => {
@@ -199,7 +199,7 @@ const Component = () => {
     const handleClick = () => setIsOpen((prev) => !prev);
     const handleClose = () => setIsOpen(false);
     // DataGrid code
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-w-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "n-flex n-justify-center", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: handleClick, children: "Open Dialog" }) }), (0, jsx_runtime_1.jsx)(react_1.Dialog, { className: "n-p-token-8 n-bg-neutral-10 n-max-w-max n-rounded-lg", htmlAttributes: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex justify-center", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: handleClick, children: "Open Dialog" }) }), (0, jsx_runtime_1.jsx)(react_1.Dialog, { className: "p-token-8 bg-neutral-10 max-w-max rounded-lg", htmlAttributes: {
                     id: 'default-menu',
                 }, onClose: handleClose, isOpen: isOpen, hasDisabledCloseButton: true, children: (0, jsx_runtime_1.jsx)(react_1.Dialog.Content, { children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { portalTarget: document.getElementById('default-menu'), isResizable: true, tableInstance: table, tableNavRef: tableNavRef, isKeyboardNavigable: true, styling: {
                             borderStyle: 'horizontal',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"datagrid-in-dialog.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-in-dialog.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n DataGrid,\n type DataGridNav,\n Dialog,\n FilledButton,\n Select,\n useDataGridContext,\n} from '@neo4j-ndl/react';\nimport {\n type ColumnDef,\n type ColumnMeta,\n createColumnHelper,\n getCoreRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\nimport { useRef, useState } from 'react';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n name: string;\n age: number;\n cypherCommand: string;\n};\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (\n tableNav,\n) => ({\n cell: ({ row }) => {\n const options = ['Edit', 'Delete', 'View'];\n const dropdownOptions = options.map((option) => ({\n label: option,\n value: option,\n }));\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const [selected, setSelected] = useState(dropdownOptions[0]);\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const { portalTarget } = useDataGridContext();\n\n return (\n <div\n data-testid={`ndl-actions-cell-row-${row.index}`}\n className=\"n-flex n-flex-row n-gap-token-8\"\n >\n <Select\n ariaLabel={`actions-select-row-${row.index}`}\n type=\"select\"\n selectProps={{\n menuPortalTarget: portalTarget,\n menuPosition: 'fixed',\n onChange: (event) => {\n if (!event) {\n return;\n }\n setSelected(event);\n },\n onKeyDown: (event) => {\n // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowUp') {\n event.stopPropagation();\n }\n },\n onMenuClose: () => {\n console.info(\n 'Start listening to keyboard events for table navigation',\n );\n tableNav.enable();\n },\n onMenuOpen: () => {\n console.info(\n 'Stop listening to keyboard events for table navigation',\n );\n tableNav.disable();\n },\n options: dropdownOptions,\n value: selected,\n }}\n />\n </div>\n );\n },\n header: 'Custom Select',\n id: 'custom-select',\n minSize: 150,\n});\n\nconst Component = () => {\n const [data, setData] = useState(TABLE_DEMO_DATA);\n const [isAgeFilterApplied, setIsAgeFilterApplied] = useState(false);\n\n const ColumnActions: ColumnMeta<TestDataFormat, unknown> = {\n columnActions: {\n actions: [\n {\n onClick: () => {\n if (isAgeFilterApplied) {\n setData(TABLE_DEMO_DATA);\n setIsAgeFilterApplied(false);\n return;\n } else {\n const filteredData = data.filter((item) => item.age >= 18);\n setData(filteredData);\n setIsAgeFilterApplied(true);\n }\n },\n title: 'Age >= 18',\n },\n ],\n },\n };\n\n const regularColumns = [\n columnHelper.accessor('name', {\n cell: (cell) => (\n <DataGrid.InlineEditCell\n cell={cell}\n value={cell.getValue()}\n ariaLabel=\"edit name\"\n />\n ),\n maxSize: 300,\n meta: {\n isInlineEditCell: {\n onEditChange: (newValue, cell) => {\n setData((oldData) => {\n return oldData.map((row) => {\n if (row.name === cell.row.original.name) {\n return {\n ...row,\n name: newValue,\n };\n }\n return row;\n });\n });\n },\n },\n },\n minSize: 180,\n size: 220,\n }),\n columnHelper.accessor('age', {\n cell: (info) => {\n return (\n <DataGrid.DropDownCell\n cell={info}\n options={[\n {\n label: '12',\n value: '12',\n },\n {\n label: '32',\n value: '32',\n },\n {\n label: '37',\n value: '37',\n },\n {\n label: '39',\n value: '39',\n },\n {\n label: '51',\n value: '51',\n },\n ]}\n ariaLabel=\"select age\"\n portalTarget={document.getElementById('default-menu')}\n />\n );\n },\n meta: {\n isDropDownCell: {\n onChange: (newValue, cell) => {\n if (newValue === undefined) {\n // No change\n return;\n }\n\n const parsedValue = parseInt(newValue, 10);\n\n if (isNaN(parsedValue)) {\n return;\n }\n\n setData((oldData) => {\n return oldData.map((row) => {\n if (row.name === cell.row.original.name) {\n return {\n ...row,\n age: parsedValue,\n };\n }\n return row;\n });\n });\n },\n },\n ...ColumnActions,\n },\n minSize: 120,\n }),\n columnHelper.accessor('cypherCommand', {\n cell: (info) => info.getValue(),\n minSize: 400,\n size: 400,\n }),\n ];\n\n const allColumns = (tableNav: DataGridNav) => [\n ...regularColumns,\n actionsColumn(tableNav),\n ];\n\n const tableNavRef = useRef<DataGridNav>(null!);\n const table = useReactTable({\n autoResetPageIndex: false,\n columnResizeMode: 'onChange',\n columns: allColumns(tableNavRef.current),\n data: data,\n debugColumns: true,\n debugHeaders: true,\n debugTable: true,\n defaultColumn: {\n maxSize: 800,\n minSize: 80,\n },\n enableSorting: true,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n initialState: {\n pagination: {\n pageSize: 5,\n },\n },\n });\n\n // Modal code\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const handleClick = () => setIsOpen((prev) => !prev);\n const handleClose = () => setIsOpen(false);\n\n // DataGrid code\n return (\n <div className=\"n-w-full\">\n <div className=\"n-flex n-justify-center\">\n <FilledButton onClick={handleClick}>Open Dialog</FilledButton>\n </div>\n <Dialog\n className=\"n-p-token-8 n-bg-neutral-10 n-max-w-max n-rounded-lg\"\n htmlAttributes={{\n id: 'default-menu',\n }}\n onClose={handleClose}\n isOpen={isOpen}\n hasDisabledCloseButton={true}\n >\n <Dialog.Content>\n <DataGrid\n portalTarget={document.getElementById('default-menu')}\n isResizable={true}\n tableInstance={table}\n tableNavRef={tableNavRef}\n isKeyboardNavigable={true}\n styling={{\n borderStyle: 'horizontal',\n hasZebraStriping: false,\n }}\n />\n </Dialog.Content>\n </Dialog>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"datagrid-in-dialog.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-in-dialog.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n DataGrid,\n type DataGridNav,\n Dialog,\n FilledButton,\n Select,\n useDataGridContext,\n} from '@neo4j-ndl/react';\nimport {\n type ColumnDef,\n type ColumnMeta,\n createColumnHelper,\n getCoreRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\nimport { useRef, useState } from 'react';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n name: string;\n age: number;\n cypherCommand: string;\n};\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (\n tableNav,\n) => ({\n cell: ({ row }) => {\n const options = ['Edit', 'Delete', 'View'];\n const dropdownOptions = options.map((option) => ({\n label: option,\n value: option,\n }));\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const [selected, setSelected] = useState(dropdownOptions[0]);\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const { portalTarget } = useDataGridContext();\n\n return (\n <div\n data-testid={`ndl-actions-cell-row-${row.index}`}\n className=\"flex flex-row gap-token-8\"\n >\n <Select\n ariaLabel={`actions-select-row-${row.index}`}\n type=\"select\"\n selectProps={{\n menuPortalTarget: portalTarget,\n menuPosition: 'fixed',\n onChange: (event) => {\n if (!event) {\n return;\n }\n setSelected(event);\n },\n onKeyDown: (event) => {\n // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowUp') {\n event.stopPropagation();\n }\n },\n onMenuClose: () => {\n console.info(\n 'Start listening to keyboard events for table navigation',\n );\n tableNav.enable();\n },\n onMenuOpen: () => {\n console.info(\n 'Stop listening to keyboard events for table navigation',\n );\n tableNav.disable();\n },\n options: dropdownOptions,\n value: selected,\n }}\n />\n </div>\n );\n },\n header: 'Custom Select',\n id: 'custom-select',\n minSize: 150,\n});\n\nconst Component = () => {\n const [data, setData] = useState(TABLE_DEMO_DATA);\n const [isAgeFilterApplied, setIsAgeFilterApplied] = useState(false);\n\n const ColumnActions: ColumnMeta<TestDataFormat, unknown> = {\n columnActions: {\n actions: [\n {\n onClick: () => {\n if (isAgeFilterApplied) {\n setData(TABLE_DEMO_DATA);\n setIsAgeFilterApplied(false);\n return;\n } else {\n const filteredData = data.filter((item) => item.age >= 18);\n setData(filteredData);\n setIsAgeFilterApplied(true);\n }\n },\n title: 'Age >= 18',\n },\n ],\n },\n };\n\n const regularColumns = [\n columnHelper.accessor('name', {\n cell: (cell) => (\n <DataGrid.InlineEditCell\n cell={cell}\n value={cell.getValue()}\n ariaLabel=\"edit name\"\n />\n ),\n maxSize: 300,\n meta: {\n isInlineEditCell: {\n onEditChange: (newValue, cell) => {\n setData((oldData) => {\n return oldData.map((row) => {\n if (row.name === cell.row.original.name) {\n return {\n ...row,\n name: newValue,\n };\n }\n return row;\n });\n });\n },\n },\n },\n minSize: 180,\n size: 220,\n }),\n columnHelper.accessor('age', {\n cell: (info) => {\n return (\n <DataGrid.DropDownCell\n cell={info}\n options={[\n {\n label: '12',\n value: '12',\n },\n {\n label: '32',\n value: '32',\n },\n {\n label: '37',\n value: '37',\n },\n {\n label: '39',\n value: '39',\n },\n {\n label: '51',\n value: '51',\n },\n ]}\n ariaLabel=\"select age\"\n portalTarget={document.getElementById('default-menu')}\n />\n );\n },\n meta: {\n isDropDownCell: {\n onChange: (newValue, cell) => {\n if (newValue === undefined) {\n // No change\n return;\n }\n\n const parsedValue = parseInt(newValue, 10);\n\n if (isNaN(parsedValue)) {\n return;\n }\n\n setData((oldData) => {\n return oldData.map((row) => {\n if (row.name === cell.row.original.name) {\n return {\n ...row,\n age: parsedValue,\n };\n }\n return row;\n });\n });\n },\n },\n ...ColumnActions,\n },\n minSize: 120,\n }),\n columnHelper.accessor('cypherCommand', {\n cell: (info) => info.getValue(),\n minSize: 400,\n size: 400,\n }),\n ];\n\n const allColumns = (tableNav: DataGridNav) => [\n ...regularColumns,\n actionsColumn(tableNav),\n ];\n\n const tableNavRef = useRef<DataGridNav>(null!);\n const table = useReactTable({\n autoResetPageIndex: false,\n columnResizeMode: 'onChange',\n columns: allColumns(tableNavRef.current),\n data: data,\n debugColumns: true,\n debugHeaders: true,\n debugTable: true,\n defaultColumn: {\n maxSize: 800,\n minSize: 80,\n },\n enableSorting: true,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n initialState: {\n pagination: {\n pageSize: 5,\n },\n },\n });\n\n // Modal code\n const [isOpen, setIsOpen] = useState<boolean>(false);\n const handleClick = () => setIsOpen((prev) => !prev);\n const handleClose = () => setIsOpen(false);\n\n // DataGrid code\n return (\n <div className=\"w-full\">\n <div className=\"flex justify-center\">\n <FilledButton onClick={handleClick}>Open Dialog</FilledButton>\n </div>\n <Dialog\n className=\"p-token-8 bg-neutral-10 max-w-max rounded-lg\"\n htmlAttributes={{\n id: 'default-menu',\n }}\n onClose={handleClose}\n isOpen={isOpen}\n hasDisabledCloseButton={true}\n >\n <Dialog.Content>\n <DataGrid\n portalTarget={document.getElementById('default-menu')}\n isResizable={true}\n tableInstance={table}\n tableNavRef={tableNavRef}\n isKeyboardNavigable={true}\n styling={{\n borderStyle: 'horizontal',\n hasZebraStriping: false,\n }}\n />\n </Dialog.Content>\n </Dialog>\n </div>\n );\n};\n\nexport default Component;\n"]}

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

@@ -45,7 +45,7 @@ const actionsColumn = (tableNav) => ({
         const [selected, setSelected] = (0, react_2.useState)(dropdownOptions[0]);
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const { portalTarget } = (0, react_1.useDataGridContext)();
-        return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": `ndl-actions-cell-row-${row.index}`, className: "n-flex n-flex-row n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { description: "Megaphone", onClick: () => {
+        return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": `ndl-actions-cell-row-${row.index}`, className: "flex flex-row gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.IconButton, { description: "Megaphone", onClick: () => {
                         alert("Let's get loud 📣");
                     }, htmlAttributes: {
                         type: 'button',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"datagrid-keyboard-navigation.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-keyboard-navigation.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAO0B;AAC1B,kDAA8D;AAC9D,uDAM+B;AAC/B,iCAAyC;AAEzC,6CAA+C;AAQ/C,MAAM,gBAAgB,GAA8B;IAClD,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CACjB,uBAAC,gBAAQ,IACP,SAAS,EAAE,OAAO,GAAG,CAAC,KAAK,EAAE,EAC7B,SAAS,EAAE,GAAG,CAAC,aAAa,EAAE,IAAI,KAAK,EACvC,QAAQ,EAAE,GAAG,CAAC,wBAAwB,EAAE,GACxC,CACH;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACrB,uBAAC,gBAAQ,IACP,SAAS,EAAC,iBAAiB,EAC3B,SAAS,EAAE,KAAK,CAAC,oBAAoB,EAAE,IAAI,KAAK,EAChD,QAAQ,EAAE,KAAK,CAAC,+BAA+B,EAAE,EACjD,eAAe,EAAE,KAAK,CAAC,qBAAqB,EAAE,GAC9C,CACH;IACD,EAAE,EAAE,QAAQ;IACZ,OAAO,EAAE,EAAE;IACX,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,aAAa,GAAyD,CAC1E,QAAQ,EACR,EAAE,CAAC,CAAC;IACJ,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;QAChB,MAAM,OAAO,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;QAC3C,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;YAC/C,KAAK,EAAE,MAAM;YACb,KAAK,EAAE,MAAM;SACd,CAAC,CAAC,CAAC;QACJ,sDAAsD;QACtD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7D,sDAAsD;QACtD,MAAM,EAAE,YAAY,EAAE,GAAG,IAAA,0BAAkB,GAAE,CAAC;QAE9C,OAAO,CACL,gDACe,wBAAwB,GAAG,CAAC,KAAK,EAAE,EAChD,SAAS,EAAC,~~iCAAiC~~,~~aAE3C~~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","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n Checkbox,\n DataGrid,\n type DataGridNav,\n IconButton,\n Select,\n useDataGridContext,\n} from '@neo4j-ndl/react';\nimport { MegaphoneIconOutline } from '@neo4j-ndl/react/icons';\nimport {\n type ColumnDef,\n createColumnHelper,\n getCoreRowModel,\n getPaginationRowModel,\n useReactTable,\n} from '@tanstack/react-table';\nimport { useRef, useState } from 'react';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n name: string;\n age: number;\n cypherCommand: string;\n};\n\nconst selectableColumn: ColumnDef<TestDataFormat> = {\n cell: ({ row }) => (\n <Checkbox\n ariaLabel={`row-${row.index}`}\n isChecked={row.getIsSelected() \|\| false}\n onChange={row.getToggleSelectedHandler()}\n />\n ),\n header: ({ table }) => (\n <Checkbox\n ariaLabel=\"Select all rows\"\n isChecked={table.getIsAllRowsSelected() \|\| false}\n onChange={table.getToggleAllRowsSelectedHandler()}\n isIndeterminate={table.getIsSomeRowsSelected()}\n />\n ),\n id: 'select',\n maxSize: 80,\n size: 80,\n};\n\nconst actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (\n tableNav,\n) => ({\n cell: ({ row }) => {\n const options = ['Edit', 'Delete', 'View'];\n const dropdownOptions = options.map((option) => ({\n label: option,\n value: option,\n }));\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const [selected, setSelected] = useState(dropdownOptions[0]);\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const { portalTarget } = useDataGridContext();\n\n return (\n <div\n data-testid={`ndl-actions-cell-row-${row.index}`}\n className=\"n-flex n-flex-row n-gap-token-8\"\n >\n <IconButton\n description=\"Megaphone\"\n onClick={() => {\n alert(\"Let's get loud 📣\");\n }}\n htmlAttributes={{\n type: 'button',\n }}\n >\n <MegaphoneIconOutline />\n </IconButton>\n <Select\n ariaLabel={`actions-select-row-${row.index}`}\n type=\"select\"\n selectProps={{\n menuPortalTarget: portalTarget,\n onChange: (event) => {\n if (!event) {\n return;\n }\n setSelected(event);\n },\n onKeyDown: (event) => {\n // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowUp') {\n event.stopPropagation();\n }\n },\n onMenuClose: () => {\n console.info(\n 'Start listening to keyboard events for table navigation',\n );\n tableNav.enable();\n },\n onMenuOpen: () => {\n console.info(\n 'Stop listening to keyboard events for table navigation',\n );\n tableNav.disable();\n },\n options: dropdownOptions,\n value: selected,\n }}\n />\n </div>\n );\n },\n header: 'actions',\n id: 'actions',\n});\n\nconst allColumns = (tableNav: DataGridNav) => {\n const columnHelper = createColumnHelper<TestDataFormat>();\n\n const commonColumns = [\n columnHelper.accessor('name', {\n cell: (info) => info.getValue(),\n footer: (info) => info.column.id,\n header: () => 'Name',\n maxSize: 300,\n minSize: 180,\n size: 220,\n }),\n columnHelper.accessor('age', {\n cell: (info) => info.renderValue(),\n footer: (info) => info.column.id,\n header: () => 'Age',\n minSize: 80,\n }),\n ];\n\n return [selectableColumn, ...commonColumns, actionsColumn(tableNav)];\n};\n\nconst Component = () => {\n const [rowSelection, setRowSelection] = useState({});\n const ref = useRef<HTMLDivElement>(null);\n const tableNavRef = useRef<DataGridNav>(null!);\n\n const table = useReactTable({\n columnResizeMode: 'onChange',\n columns: allColumns(tableNavRef.current),\n data: TABLE_DEMO_DATA,\n enableSorting: false,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n initialState: {\n pagination: {\n pageSize: 5,\n },\n },\n onRowSelectionChange: setRowSelection,\n state: {\n rowSelection,\n },\n });\n\n return (\n <>\n <DataGrid\n isResizable={false}\n isKeyboardNavigable={true}\n styling={{\n borderStyle: 'all-sides',\n }}\n tableNavRef={tableNavRef}\n tableInstance={table}\n ref={ref}\n portalTarget={document.body}\n />\n </>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"datagrid-keyboard-navigation.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-keyboard-navigation.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAO0B;AAC1B,kDAA8D;AAC9D,uDAM+B;AAC/B,iCAAyC;AAEzC,6CAA+C;AAQ/C,MAAM,gBAAgB,GAA8B;IAClD,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,CACjB,uBAAC,gBAAQ,IACP,SAAS,EAAE,OAAO,GAAG,CAAC,KAAK,EAAE,EAC7B,SAAS,EAAE,GAAG,CAAC,aAAa,EAAE,IAAI,KAAK,EACvC,QAAQ,EAAE,GAAG,CAAC,wBAAwB,EAAE,GACxC,CACH;IACD,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACrB,uBAAC,gBAAQ,IACP,SAAS,EAAC,iBAAiB,EAC3B,SAAS,EAAE,KAAK,CAAC,oBAAoB,EAAE,IAAI,KAAK,EAChD,QAAQ,EAAE,KAAK,CAAC,+BAA+B,EAAE,EACjD,eAAe,EAAE,KAAK,CAAC,qBAAqB,EAAE,GAC9C,CACH;IACD,EAAE,EAAE,QAAQ;IACZ,OAAO,EAAE,EAAE;IACX,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,aAAa,GAAyD,CAC1E,QAAQ,EACR,EAAE,CAAC,CAAC;IACJ,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;QAChB,MAAM,OAAO,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC;QAC3C,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;YAC/C,KAAK,EAAE,MAAM;YACb,KAAK,EAAE,MAAM;SACd,CAAC,CAAC,CAAC;QACJ,sDAAsD;QACtD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7D,sDAAsD;QACtD,MAAM,EAAE,YAAY,EAAE,GAAG,IAAA,0BAAkB,GAAE,CAAC;QAE9C,OAAO,CACL,gDACe,wBAAwB,GAAG,CAAC,KAAK,EAAE,EAChD,SAAS,EAAC,2BAA2B,aAErC,uBAAC,kBAAU,IACT,WAAW,EAAC,WAAW,EACvB,OAAO,EAAE,GAAG,EAAE;wBACZ,KAAK,CAAC,mBAAmB,CAAC,CAAC;oBAC7B,CAAC,EACD,cAAc,EAAE;wBACd,IAAI,EAAE,QAAQ;qBACf,YAED,uBAAC,4BAAoB,KAAG,GACb,EACb,uBAAC,cAAM,IACL,SAAS,EAAE,sBAAsB,GAAG,CAAC,KAAK,EAAE,EAC5C,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE;wBACX,gBAAgB,EAAE,YAAY;wBAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;4BAClB,IAAI,CAAC,KAAK,EAAE,CAAC;gCACX,OAAO;4BACT,CAAC;4BACD,WAAW,CAAC,KAAK,CAAC,CAAC;wBACrB,CAAC;wBACD,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;4BACnB,4FAA4F;4BAC5F,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;gCACzD,KAAK,CAAC,eAAe,EAAE,CAAC;4BAC1B,CAAC;wBACH,CAAC;wBACD,WAAW,EAAE,GAAG,EAAE;4BAChB,OAAO,CAAC,IAAI,CACV,yDAAyD,CAC1D,CAAC;4BACF,QAAQ,CAAC,MAAM,EAAE,CAAC;wBACpB,CAAC;wBACD,UAAU,EAAE,GAAG,EAAE;4BACf,OAAO,CAAC,IAAI,CACV,wDAAwD,CACzD,CAAC;4BACF,QAAQ,CAAC,OAAO,EAAE,CAAC;wBACrB,CAAC;wBACD,OAAO,EAAE,eAAe;wBACxB,KAAK,EAAE,QAAQ;qBAChB,GACD,IACE,CACP,CAAC;IACJ,CAAC;IACD,MAAM,EAAE,SAAS;IACjB,EAAE,EAAE,SAAS;CACd,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,CAAC,QAAqB,EAAE,EAAE;IAC3C,MAAM,YAAY,GAAG,IAAA,gCAAkB,GAAkB,CAAC;IAE1D,MAAM,aAAa,GAAG;QACpB,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;KACH,CAAC;IAEF,OAAO,CAAC,gBAAgB,EAAE,GAAG,aAAa,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC;AACvE,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACrD,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,WAAW,GAAG,IAAA,cAAM,EAAc,IAAK,CAAC,CAAC;IAE/C,MAAM,KAAK,GAAG,IAAA,2BAAa,EAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO,EAAE,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC;QACxC,IAAI,EAAE,4BAAe;QACrB,aAAa,EAAE,KAAK;QACpB,eAAe,EAAE,IAAA,6BAAe,GAAE;QAClC,qBAAqB,EAAE,IAAA,mCAAqB,GAAE;QAC9C,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,CAAC;aACZ;SACF;QACD,oBAAoB,EAAE,eAAe;QACrC,KAAK,EAAE;YACL,YAAY;SACb;KACF,CAAC,CAAC;IAEH,OAAO,CACL,2DACE,uBAAC,gBAAQ,IACP,WAAW,EAAE,KAAK,EAClB,mBAAmB,EAAE,IAAI,EACzB,OAAO,EAAE;gBACP,WAAW,EAAE,WAAW;aACzB,EACD,WAAW,EAAE,WAAW,EACxB,aAAa,EAAE,KAAK,EACpB,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,QAAQ,CAAC,IAAI,GAC3B,GACD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\n Checkbox,\n DataGrid,\n type DataGridNav,\n IconButton,\n Select,\n useDataGridContext,\n} from '@neo4j-ndl/react';\nimport { MegaphoneIconOutline } from '@neo4j-ndl/react/icons';\nimport {\n type ColumnDef,\n createColumnHelper,\n getCoreRowModel,\n getPaginationRowModel,\n useReactTable,\n} from '@tanstack/react-table';\nimport { useRef, useState } from 'react';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n name: string;\n age: number;\n cypherCommand: string;\n};\n\nconst selectableColumn: ColumnDef<TestDataFormat> = {\n cell: ({ row }) => (\n <Checkbox\n ariaLabel={`row-${row.index}`}\n isChecked={row.getIsSelected() \|\| false}\n onChange={row.getToggleSelectedHandler()}\n />\n ),\n header: ({ table }) => (\n <Checkbox\n ariaLabel=\"Select all rows\"\n isChecked={table.getIsAllRowsSelected() \|\| false}\n onChange={table.getToggleAllRowsSelectedHandler()}\n isIndeterminate={table.getIsSomeRowsSelected()}\n />\n ),\n id: 'select',\n maxSize: 80,\n size: 80,\n};\n\nconst actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (\n tableNav,\n) => ({\n cell: ({ row }) => {\n const options = ['Edit', 'Delete', 'View'];\n const dropdownOptions = options.map((option) => ({\n label: option,\n value: option,\n }));\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const [selected, setSelected] = useState(dropdownOptions[0]);\n // eslint-disable-next-line react-hooks/rules-of-hooks\n const { portalTarget } = useDataGridContext();\n\n return (\n <div\n data-testid={`ndl-actions-cell-row-${row.index}`}\n className=\"flex flex-row gap-token-8\"\n >\n <IconButton\n description=\"Megaphone\"\n onClick={() => {\n alert(\"Let's get loud 📣\");\n }}\n htmlAttributes={{\n type: 'button',\n }}\n >\n <MegaphoneIconOutline />\n </IconButton>\n <Select\n ariaLabel={`actions-select-row-${row.index}`}\n type=\"select\"\n selectProps={{\n menuPortalTarget: portalTarget,\n onChange: (event) => {\n if (!event) {\n return;\n }\n setSelected(event);\n },\n onKeyDown: (event) => {\n // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell\n if (event.key === 'ArrowDown' \|\| event.key === 'ArrowUp') {\n event.stopPropagation();\n }\n },\n onMenuClose: () => {\n console.info(\n 'Start listening to keyboard events for table navigation',\n );\n tableNav.enable();\n },\n onMenuOpen: () => {\n console.info(\n 'Stop listening to keyboard events for table navigation',\n );\n tableNav.disable();\n },\n options: dropdownOptions,\n value: selected,\n }}\n />\n </div>\n );\n },\n header: 'actions',\n id: 'actions',\n});\n\nconst allColumns = (tableNav: DataGridNav) => {\n const columnHelper = createColumnHelper<TestDataFormat>();\n\n const commonColumns = [\n columnHelper.accessor('name', {\n cell: (info) => info.getValue(),\n footer: (info) => info.column.id,\n header: () => 'Name',\n maxSize: 300,\n minSize: 180,\n size: 220,\n }),\n columnHelper.accessor('age', {\n cell: (info) => info.renderValue(),\n footer: (info) => info.column.id,\n header: () => 'Age',\n minSize: 80,\n }),\n ];\n\n return [selectableColumn, ...commonColumns, actionsColumn(tableNav)];\n};\n\nconst Component = () => {\n const [rowSelection, setRowSelection] = useState({});\n const ref = useRef<HTMLDivElement>(null);\n const tableNavRef = useRef<DataGridNav>(null!);\n\n const table = useReactTable({\n columnResizeMode: 'onChange',\n columns: allColumns(tableNavRef.current),\n data: TABLE_DEMO_DATA,\n enableSorting: false,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n initialState: {\n pagination: {\n pageSize: 5,\n },\n },\n onRowSelectionChange: setRowSelection,\n state: {\n rowSelection,\n },\n });\n\n return (\n <>\n <DataGrid\n isResizable={false}\n isKeyboardNavigable={true}\n styling={{\n borderStyle: 'all-sides',\n }}\n tableNavRef={tableNavRef}\n tableInstance={table}\n ref={ref}\n portalTarget={document.body}\n />\n </>\n );\n};\n\nexport default Component;\n"]}

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

@@ -132,7 +132,7 @@ const Component = () => {
     const table = (0, react_table_1.useReactTable)(Object.assign(Object.assign({}, COMMON_TABLE_PROPS), { columns: COMMON_COLUMNS({
             shouldIncludeRowActionColumn,
         }), enableSorting: true, getSortedRowModel: (0, react_table_1.getSortedRowModel)() }));
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-h-[1000px] n-w-full n-bg-primary-bg-weak n-p-token-32", children: [(0, jsx_runtime_1.jsx)(leva_1.Leva, { isRoot: true }), (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: true, tableInstance: table, isKeyboardNavigable: isKeyboardNavigable, styling: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "h-[1000px] w-full bg-primary-bg-weak p-token-32", children: [(0, jsx_runtime_1.jsx)(leva_1.Leva, { isRoot: true }), (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isResizable: true, tableInstance: table, isKeyboardNavigable: isKeyboardNavigable, styling: {
                     borderStyle: borderStyle,
                     hasZebraStriping,
                     headerStyle: headerStyle,

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

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

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

@@ -61,7 +61,7 @@ const Component = () => {
     // Disable resizing of columns and enable automatic resizing of columns, to allow for percentage width columns
     const isResizable = false;
     const isAutoResizingColumns = true;
-    return ((0, jsx_runtime_1.jsx)("div", { className: "n-w-full n-bg-light-neutral-text-weakest", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { components: {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "w-full bg-light-neutral-text-weakest", children: (0, jsx_runtime_1.jsx)(react_1.DataGrid, { components: {
                 Navigation: null,
             }, isAutoResizingColumns: isAutoResizingColumns, isKeyboardNavigable: false, isResizable: isResizable, styling: {
                 borderStyle: 'all-sides',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"datagrid-percentage-width-columns.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-percentage-width-columns.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,uDAK+B;AAE/B,6CAA+C;AAQ/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,IAAA,gCAAkB,GAAkB,CAAC;IAE1D,MAAM,OAAO,GAAG;QACd,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM;YACpB,IAAI,EAAE,GAAG,EAAE,sCAAsC;SAClD,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE;YAC3B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAClC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK;YACnB,OAAO,EAAE,GAAG,EAAE,sCAAsC;SACrD,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB;YAC9B,IAAI,EAAE,GAAG,EAAE,sCAAsC;SAClD,CAAC;KACH,CAAC;IAEF,MAAM,KAAK,GAAG,IAAA,2BAAa,EAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO,EAAE,OAAO;QAChB,IAAI,EAAE,4BAAe,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;QACjC,YAAY,EAAE,IAAI;QAClB,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,IAAI;QAChB,aAAa,EAAE,KAAK;QACpB,eAAe,EAAE,IAAA,6BAAe,GAAE;QAClC,iBAAiB,EAAE,IAAA,+BAAiB,GAAE;KACvC,CAAC,CAAC;IAEH,8GAA8G;IAC9G,MAAM,WAAW,GAAG,KAAK,CAAC;IAC1B,MAAM,qBAAqB,GAAG,IAAI,CAAC;IAEnC,OAAO,CACL,gCAAK,SAAS,EAAC,~~0CAA0C~~,~~YACvD~~,uBAAC,gBAAQ,IACP,UAAU,EAAE;gBACV,UAAU,EAAE,IAAI;aACjB,EACD,qBAAqB,EAAE,qBAAqB,EAC5C,mBAAmB,EAAE,KAAK,EAC1B,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE;gBACP,WAAW,EAAE,WAAW;gBACxB,eAAe,EAAE,KAAK;gBACtB,gBAAgB,EAAE,KAAK;aACxB,EACD,aAAa,EAAE,KAAK,GACpB,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DataGrid } from '@neo4j-ndl/react';\nimport {\n createColumnHelper,\n getCoreRowModel,\n getSortedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n name: string;\n age: number;\n cypherCommand: string;\n};\n\nconst Component = () => {\n const columnHelper = createColumnHelper<TestDataFormat>();\n\n const columns = [\n columnHelper.accessor('name', {\n cell: (info) => info.getValue(),\n footer: (info) => info.column.id,\n header: () => 'Name',\n size: 200, // 200 / 1000 = 20% of the table width\n }),\n columnHelper.accessor('age', {\n cell: (info) => info.renderValue(),\n footer: (info) => info.column.id,\n header: () => 'Age',\n minSize: 100, // 100 / 1000 = 10% of the table width\n }),\n columnHelper.accessor('cypherCommand', {\n cell: (info) => info.getValue(),\n footer: (info) => info.column.id,\n header: () => 'Cypher Command',\n size: 700, // 700 / 1000 = 70% of the table width\n }),\n ];\n\n const table = useReactTable({\n columnResizeMode: 'onChange',\n columns: columns,\n data: TABLE_DEMO_DATA.slice(0, 5),\n debugColumns: true,\n debugHeaders: true,\n debugTable: true,\n enableSorting: false,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n });\n\n // Disable resizing of columns and enable automatic resizing of columns, to allow for percentage width columns\n const isResizable = false;\n const isAutoResizingColumns = true;\n\n return (\n <div className=\"n-w-full n-bg-light-neutral-text-weakest\">\n <DataGrid\n components={{\n Navigation: null,\n }}\n isAutoResizingColumns={isAutoResizingColumns}\n isKeyboardNavigable={false}\n isResizable={isResizable}\n styling={{\n borderStyle: 'all-sides',\n hasHoverEffects: false,\n hasZebraStriping: false,\n }}\n tableInstance={table}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"datagrid-percentage-width-columns.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-percentage-width-columns.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA4C;AAC5C,uDAK+B;AAE/B,6CAA+C;AAQ/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,IAAA,gCAAkB,GAAkB,CAAC;IAE1D,MAAM,OAAO,GAAG;QACd,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM;YACpB,IAAI,EAAE,GAAG,EAAE,sCAAsC;SAClD,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE;YAC3B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAClC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK;YACnB,OAAO,EAAE,GAAG,EAAE,sCAAsC;SACrD,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB;YAC9B,IAAI,EAAE,GAAG,EAAE,sCAAsC;SAClD,CAAC;KACH,CAAC;IAEF,MAAM,KAAK,GAAG,IAAA,2BAAa,EAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO,EAAE,OAAO;QAChB,IAAI,EAAE,4BAAe,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC;QACjC,YAAY,EAAE,IAAI;QAClB,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,IAAI;QAChB,aAAa,EAAE,KAAK;QACpB,eAAe,EAAE,IAAA,6BAAe,GAAE;QAClC,iBAAiB,EAAE,IAAA,+BAAiB,GAAE;KACvC,CAAC,CAAC;IAEH,8GAA8G;IAC9G,MAAM,WAAW,GAAG,KAAK,CAAC;IAC1B,MAAM,qBAAqB,GAAG,IAAI,CAAC;IAEnC,OAAO,CACL,gCAAK,SAAS,EAAC,sCAAsC,YACnD,uBAAC,gBAAQ,IACP,UAAU,EAAE;gBACV,UAAU,EAAE,IAAI;aACjB,EACD,qBAAqB,EAAE,qBAAqB,EAC5C,mBAAmB,EAAE,KAAK,EAC1B,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE;gBACP,WAAW,EAAE,WAAW;gBACxB,eAAe,EAAE,KAAK;gBACtB,gBAAgB,EAAE,KAAK;aACxB,EACD,aAAa,EAAE,KAAK,GACpB,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DataGrid } from '@neo4j-ndl/react';\nimport {\n createColumnHelper,\n getCoreRowModel,\n getSortedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n name: string;\n age: number;\n cypherCommand: string;\n};\n\nconst Component = () => {\n const columnHelper = createColumnHelper<TestDataFormat>();\n\n const columns = [\n columnHelper.accessor('name', {\n cell: (info) => info.getValue(),\n footer: (info) => info.column.id,\n header: () => 'Name',\n size: 200, // 200 / 1000 = 20% of the table width\n }),\n columnHelper.accessor('age', {\n cell: (info) => info.renderValue(),\n footer: (info) => info.column.id,\n header: () => 'Age',\n minSize: 100, // 100 / 1000 = 10% of the table width\n }),\n columnHelper.accessor('cypherCommand', {\n cell: (info) => info.getValue(),\n footer: (info) => info.column.id,\n header: () => 'Cypher Command',\n size: 700, // 700 / 1000 = 70% of the table width\n }),\n ];\n\n const table = useReactTable({\n columnResizeMode: 'onChange',\n columns: columns,\n data: TABLE_DEMO_DATA.slice(0, 5),\n debugColumns: true,\n debugHeaders: true,\n debugTable: true,\n enableSorting: false,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n });\n\n // Disable resizing of columns and enable automatic resizing of columns, to allow for percentage width columns\n const isResizable = false;\n const isAutoResizingColumns = true;\n\n return (\n <div className=\"w-full bg-light-neutral-text-weakest\">\n <DataGrid\n components={{\n Navigation: null,\n }}\n isAutoResizingColumns={isAutoResizingColumns}\n isKeyboardNavigable={false}\n isResizable={isResizable}\n styling={{\n borderStyle: 'all-sides',\n hasHoverEffects: false,\n hasZebraStriping: false,\n }}\n tableInstance={table}\n />\n </div>\n );\n};\n\nexport default Component;\n"]}

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

@@ -209,7 +209,7 @@ const PinnedBothSides = () => {
                 right: ['pinnedRight'],
             },
         } }));
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-w-full n-max-w-[1200px]", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-2", children: "Make the window smaller to test the overflow" }), (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isKeyboardNavigable: true, isResizable: false, portalTarget: document.body, styling: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-w-full max-w-[1200px]", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-2", children: "Make the window smaller to test the overflow" }), (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isKeyboardNavigable: true, isResizable: false, portalTarget: document.body, styling: {
                     borderStyle: 'all-sides',
                     hasZebraStriping: false,
                 }, tableInstance: table })] }));
@@ -221,7 +221,7 @@ const PinnedLeftSide = () => {
                 left: ['pinnedLeft'],
             },
         } }));
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-w-full n-max-w-[1200px]", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-2", children: "Make the window smaller to test the overflow" }), (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isKeyboardNavigable: true, isResizable: false, styling: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-w-full max-w-[1200px]", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-2", children: "Make the window smaller to test the overflow" }), (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isKeyboardNavigable: true, isResizable: false, styling: {
                     borderStyle: 'all-sides',
                     hasZebraStriping: false,
                 }, tableInstance: table })] }));
@@ -233,7 +233,7 @@ const PinnedRightSide = () => {
                 right: ['pinnedRight'],
             },
         } }));
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-w-full n-max-w-[1200px]", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-2", children: "Make the window smaller to test the overflow" }), (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isKeyboardNavigable: true, isResizable: false, portalTarget: document.body, styling: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "w-full max-w-[1200px]", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "title-2", children: "Make the window smaller to test the overflow" }), (0, jsx_runtime_1.jsx)(react_1.DataGrid, { isKeyboardNavigable: true, isResizable: false, portalTarget: document.body, styling: {
                     borderStyle: 'all-sides',
                     hasZebraStriping: false,
                 }, tableInstance: table })] }));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"datagrid-pinned-columns.stories.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-pinned-columns.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DataGrid, Typography } from '@neo4j-ndl/react';\nimport {\n createColumnHelper,\n getCoreRowModel,\n getSortedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\n\nexport default {\n component: DataGrid,\n id: 'components-data-grid-pinned-columns',\n parameters: {\n chromatic: { delay: 1000 },\n controls: { disable: true },\n },\n title: 'Components/DataGrid/Pinned Columns',\n};\n\nexport type TestDataFormat = {\n age: number;\n cypherCommand: string;\n name: string;\n pinnedLeft: string;\n pinnedRight: string;\n};\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst columnHelperRight =\n createColumnHelper<Omit<TestDataFormat, 'pinnedLeft'>>();\n\nconst columnHelperLeft =\n createColumnHelper<Omit<TestDataFormat, 'pinnedRight'>>();\n\nconst tablePropsRight = {\n columns: [\n columnHelperRight.accessor('name', {\n cell: (info) => info.getValue(),\n minSize: 180,\n }),\n columnHelperRight.accessor('age', {\n cell: (info) => info.getValue(),\n minSize: 80,\n }),\n columnHelperRight.accessor('cypherCommand', {\n cell: (info) => info.getValue(),\n minSize: 80,\n }),\n columnHelperRight.accessor('pinnedRight', {\n cell: (info) => info.getValue(),\n size: 300,\n }),\n ],\n data: [\n {\n age: 31,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 1',\n pinnedRight: 'Pinned Right',\n },\n {\n age: 32,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 2',\n pinnedRight: 'Pinned Right',\n },\n {\n age: 33,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 3',\n pinnedRight: 'Pinned Right',\n },\n {\n age: 34,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 4',\n pinnedRight: 'Pinned Right',\n },\n {\n age: 35,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 5',\n pinnedRight: 'Pinned Right',\n },\n ],\n};\n\nconst tablePropsBoth = {\n columns: [\n columnHelper.accessor('pinnedLeft', {\n cell: (info) => info.getValue(),\n size: 200,\n }),\n columnHelper.accessor('name', {\n cell: (info) => info.getValue(),\n minSize: 180,\n }),\n columnHelper.accessor('age', {\n cell: (info) => info.getValue(),\n minSize: 80,\n }),\n columnHelper.accessor('cypherCommand', {\n cell: (info) => info.getValue(),\n minSize: 80,\n }),\n columnHelper.accessor('pinnedRight', {\n cell: (info) => info.getValue(),\n size: 200,\n }),\n ],\n data: [\n {\n age: 31,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 1',\n pinnedLeft: 'Pinned Left',\n pinnedRight: 'Pinned Right',\n },\n {\n age: 32,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 2',\n pinnedLeft: 'Pinned Left',\n pinnedRight: 'Pinned Right',\n },\n {\n age: 33,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 3',\n pinnedLeft: 'Pinned Left',\n pinnedRight: 'Pinned Right',\n },\n {\n age: 34,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 4',\n pinnedLeft: 'Pinned Left',\n pinnedRight: 'Pinned Right',\n },\n {\n age: 35,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 5',\n pinnedLeft: 'Pinned Left',\n pinnedRight: 'Pinned Right',\n },\n ],\n};\n\nconst tablePropsLeft = {\n columns: [\n columnHelperLeft.accessor('pinnedLeft', {\n cell: (info) => info.getValue(),\n size: 300,\n }),\n columnHelperLeft.accessor('name', {\n cell: (info) => info.getValue(),\n minSize: 180,\n }),\n columnHelperLeft.accessor('age', {\n cell: (info) => info.getValue(),\n minSize: 80,\n }),\n columnHelperLeft.accessor('cypherCommand', {\n cell: (info) => info.getValue(),\n minSize: 80,\n }),\n ],\n data: [\n {\n age: 31,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 1',\n pinnedLeft: 'Pinned Left',\n },\n {\n age: 32,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 2',\n pinnedLeft: 'Pinned Left',\n },\n {\n age: 33,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 3',\n pinnedLeft: 'Pinned Left',\n },\n {\n age: 34,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 4',\n pinnedLeft: 'Pinned Left',\n },\n {\n age: 35,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 5',\n pinnedLeft: 'Pinned Left',\n },\n ],\n};\n\nexport const PinnedBothSides = () => {\n const table = useReactTable({\n ...tablePropsBoth,\n enableColumnPinning: true,\n enableSorting: true,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n state: {\n columnPinning: {\n left: ['pinnedLeft'],\n right: ['pinnedRight'],\n },\n },\n });\n\n return (\n <div className=\"w-w-full n-max-w-[1200px]\">\n <Typography variant=\"title-2\">\n Make the window smaller to test the overflow\n </Typography>\n <DataGrid\n isKeyboardNavigable={true}\n isResizable={false}\n portalTarget={document.body}\n styling={{\n borderStyle: 'all-sides',\n hasZebraStriping: false,\n }}\n tableInstance={table}\n />\n </div>\n );\n};\n\nexport const PinnedLeftSide = () => {\n const table = useReactTable({\n ...tablePropsLeft,\n enableColumnPinning: true,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n state: {\n columnPinning: {\n left: ['pinnedLeft'],\n },\n },\n });\n\n return (\n <div className=\"w-w-full n-max-w-[1200px]\">\n <Typography variant=\"title-2\">\n Make the window smaller to test the overflow\n </Typography>\n <DataGrid\n isKeyboardNavigable={true}\n isResizable={false}\n styling={{\n borderStyle: 'all-sides',\n hasZebraStriping: false,\n }}\n tableInstance={table}\n />\n </div>\n );\n};\n\nexport const PinnedRightSide = () => {\n const table = useReactTable({\n ...tablePropsRight,\n enableColumnPinning: true,\n enableSorting: true,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n state: {\n columnPinning: {\n right: ['pinnedRight'],\n },\n },\n });\n\n return (\n <div className=\"n-w-full n-max-w-[1200px]\">\n <Typography variant=\"title-2\">\n Make the window smaller to test the overflow\n </Typography>\n <DataGrid\n isKeyboardNavigable={true}\n isResizable={false}\n portalTarget={document.body}\n styling={{\n borderStyle: 'all-sides',\n hasZebraStriping: false,\n }}\n tableInstance={table}\n />\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"datagrid-pinned-columns.stories.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-pinned-columns.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DataGrid, Typography } from '@neo4j-ndl/react';\nimport {\n createColumnHelper,\n getCoreRowModel,\n getSortedRowModel,\n useReactTable,\n} from '@tanstack/react-table';\n\nexport default {\n component: DataGrid,\n id: 'components-data-grid-pinned-columns',\n parameters: {\n chromatic: { delay: 1000 },\n controls: { disable: true },\n },\n title: 'Components/DataGrid/Pinned Columns',\n};\n\nexport type TestDataFormat = {\n age: number;\n cypherCommand: string;\n name: string;\n pinnedLeft: string;\n pinnedRight: string;\n};\n\nconst columnHelper = createColumnHelper<TestDataFormat>();\n\nconst columnHelperRight =\n createColumnHelper<Omit<TestDataFormat, 'pinnedLeft'>>();\n\nconst columnHelperLeft =\n createColumnHelper<Omit<TestDataFormat, 'pinnedRight'>>();\n\nconst tablePropsRight = {\n columns: [\n columnHelperRight.accessor('name', {\n cell: (info) => info.getValue(),\n minSize: 180,\n }),\n columnHelperRight.accessor('age', {\n cell: (info) => info.getValue(),\n minSize: 80,\n }),\n columnHelperRight.accessor('cypherCommand', {\n cell: (info) => info.getValue(),\n minSize: 80,\n }),\n columnHelperRight.accessor('pinnedRight', {\n cell: (info) => info.getValue(),\n size: 300,\n }),\n ],\n data: [\n {\n age: 31,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 1',\n pinnedRight: 'Pinned Right',\n },\n {\n age: 32,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 2',\n pinnedRight: 'Pinned Right',\n },\n {\n age: 33,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 3',\n pinnedRight: 'Pinned Right',\n },\n {\n age: 34,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 4',\n pinnedRight: 'Pinned Right',\n },\n {\n age: 35,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 5',\n pinnedRight: 'Pinned Right',\n },\n ],\n};\n\nconst tablePropsBoth = {\n columns: [\n columnHelper.accessor('pinnedLeft', {\n cell: (info) => info.getValue(),\n size: 200,\n }),\n columnHelper.accessor('name', {\n cell: (info) => info.getValue(),\n minSize: 180,\n }),\n columnHelper.accessor('age', {\n cell: (info) => info.getValue(),\n minSize: 80,\n }),\n columnHelper.accessor('cypherCommand', {\n cell: (info) => info.getValue(),\n minSize: 80,\n }),\n columnHelper.accessor('pinnedRight', {\n cell: (info) => info.getValue(),\n size: 200,\n }),\n ],\n data: [\n {\n age: 31,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 1',\n pinnedLeft: 'Pinned Left',\n pinnedRight: 'Pinned Right',\n },\n {\n age: 32,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 2',\n pinnedLeft: 'Pinned Left',\n pinnedRight: 'Pinned Right',\n },\n {\n age: 33,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 3',\n pinnedLeft: 'Pinned Left',\n pinnedRight: 'Pinned Right',\n },\n {\n age: 34,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 4',\n pinnedLeft: 'Pinned Left',\n pinnedRight: 'Pinned Right',\n },\n {\n age: 35,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 5',\n pinnedLeft: 'Pinned Left',\n pinnedRight: 'Pinned Right',\n },\n ],\n};\n\nconst tablePropsLeft = {\n columns: [\n columnHelperLeft.accessor('pinnedLeft', {\n cell: (info) => info.getValue(),\n size: 300,\n }),\n columnHelperLeft.accessor('name', {\n cell: (info) => info.getValue(),\n minSize: 180,\n }),\n columnHelperLeft.accessor('age', {\n cell: (info) => info.getValue(),\n minSize: 80,\n }),\n columnHelperLeft.accessor('cypherCommand', {\n cell: (info) => info.getValue(),\n minSize: 80,\n }),\n ],\n data: [\n {\n age: 31,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 1',\n pinnedLeft: 'Pinned Left',\n },\n {\n age: 32,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 2',\n pinnedLeft: 'Pinned Left',\n },\n {\n age: 33,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 3',\n pinnedLeft: 'Pinned Left',\n },\n {\n age: 34,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 4',\n pinnedLeft: 'Pinned Left',\n },\n {\n age: 35,\n cypherCommand: 'MATCH (n) RETURN n',\n name: 'Name 5',\n pinnedLeft: 'Pinned Left',\n },\n ],\n};\n\nexport const PinnedBothSides = () => {\n const table = useReactTable({\n ...tablePropsBoth,\n enableColumnPinning: true,\n enableSorting: true,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n state: {\n columnPinning: {\n left: ['pinnedLeft'],\n right: ['pinnedRight'],\n },\n },\n });\n\n return (\n <div className=\"w-w-full max-w-[1200px]\">\n <Typography variant=\"title-2\">\n Make the window smaller to test the overflow\n </Typography>\n <DataGrid\n isKeyboardNavigable={true}\n isResizable={false}\n portalTarget={document.body}\n styling={{\n borderStyle: 'all-sides',\n hasZebraStriping: false,\n }}\n tableInstance={table}\n />\n </div>\n );\n};\n\nexport const PinnedLeftSide = () => {\n const table = useReactTable({\n ...tablePropsLeft,\n enableColumnPinning: true,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n state: {\n columnPinning: {\n left: ['pinnedLeft'],\n },\n },\n });\n\n return (\n <div className=\"w-w-full max-w-[1200px]\">\n <Typography variant=\"title-2\">\n Make the window smaller to test the overflow\n </Typography>\n <DataGrid\n isKeyboardNavigable={true}\n isResizable={false}\n styling={{\n borderStyle: 'all-sides',\n hasZebraStriping: false,\n }}\n tableInstance={table}\n />\n </div>\n );\n};\n\nexport const PinnedRightSide = () => {\n const table = useReactTable({\n ...tablePropsRight,\n enableColumnPinning: true,\n enableSorting: true,\n getCoreRowModel: getCoreRowModel(),\n getSortedRowModel: getSortedRowModel(),\n state: {\n columnPinning: {\n right: ['pinnedRight'],\n },\n },\n });\n\n return (\n <div className=\"w-full max-w-[1200px]\">\n <Typography variant=\"title-2\">\n Make the window smaller to test the overflow\n </Typography>\n <DataGrid\n isKeyboardNavigable={true}\n isResizable={false}\n portalTarget={document.body}\n styling={{\n borderStyle: 'all-sides',\n hasZebraStriping: false,\n }}\n tableInstance={table}\n />\n </div>\n );\n};\n"]}