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

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

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

Files changed (1185) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-disabled.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-disabled.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;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;CACnD,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,iCAAK,SAAS,EAAC,~~gDAAgD~~,~~aAC7D~~,uBAAC,gBAAQ,IACP,KAAK,EAAC,wBAAwB,EAC9B,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,EACxB,UAAU,QACV,OAAO,EAAE,OAAO,GAChB,EACF,uBAAC,gBAAQ,IACP,KAAK,EAAC,uBAAuB,EAC7B,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EACjC,UAAU,QACV,OAAO,QACP,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 { label: 'Data Importer', value: 'data-importer' },\n];\n\nconst Component = () => (\n <div className=\"n-flex n-flex-col n-items-start n-gap-token-16\">\n <Combobox\n label=\"Disabled single select\"\n defaultValue={options[0]}\n isDisabled\n options={options}\n />\n <Combobox\n label=\"Disabled multi select\"\n defaultValue={options.slice(0, 3)}\n isDisabled\n isMulti\n options={options}\n />\n </div>\n);\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"combobox-disabled.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-disabled.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;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;CACnD,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,iCAAK,SAAS,EAAC,wCAAwC,aACrD,uBAAC,gBAAQ,IACP,KAAK,EAAC,wBAAwB,EAC9B,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,EACxB,UAAU,QACV,OAAO,EAAE,OAAO,GAChB,EACF,uBAAC,gBAAQ,IACP,KAAK,EAAC,uBAAuB,EAC7B,YAAY,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EACjC,UAAU,QACV,OAAO,QACP,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 { label: 'Data Importer', value: 'data-importer' },\n];\n\nconst Component = () => (\n <div className=\"flex flex-col items-start gap-token-16\">\n <Combobox\n label=\"Disabled single select\"\n defaultValue={options[0]}\n isDisabled\n options={options}\n />\n <Combobox\n label=\"Disabled multi select\"\n defaultValue={options.slice(0, 3)}\n isDisabled\n isMulti\n options={options}\n />\n </div>\n);\n\nexport default Component;\n"]}

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

@@ -29,6 +29,6 @@ const options = [
     { label: 'Bloom', value: 'bloom' },
     { label: 'Data Importer', value: 'data-importer' },
 ];
-const Component = () => ((0, jsx_runtime_1.jsx)("div", { className: "n-w-full", children: (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", helpText: "This combobox fills the width of its parent.", isClearable: true, isFluid: true, options: options }) }));
+const Component = () => ((0, jsx_runtime_1.jsx)("div", { className: "w-full", children: (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", helpText: "This combobox fills the width of its parent.", isClearable: true, isFluid: true, options: options }) }));
 exports.default = Component;
 //# sourceMappingURL=combobox-fluid.story.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-fluid.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-fluid.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;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;CACnD,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,gCAAK,SAAS,EAAC,~~UAAU~~,~~YACvB~~,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,8CAA8C,EACvD,WAAW,QACX,OAAO,QACP,OAAO,EAAE,OAAO,GAChB,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 { label: 'Data Importer', value: 'data-importer' },\n];\n\nconst Component = () => (\n <div className=\"n-w-full\">\n <Combobox\n label=\"Product\"\n helpText=\"This combobox fills the width of its parent.\"\n isClearable\n isFluid\n options={options}\n />\n </div>\n);\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"combobox-fluid.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-fluid.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;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;CACnD,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,gCAAK,SAAS,EAAC,QAAQ,YACrB,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,8CAA8C,EACvD,WAAW,QACX,OAAO,QACP,OAAO,EAAE,OAAO,GAChB,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 { label: 'Data Importer', value: 'data-importer' },\n];\n\nconst Component = () => (\n <div className=\"w-full\">\n <Combobox\n label=\"Product\"\n helpText=\"This combobox fills the width of its parent.\"\n isClearable\n isFluid\n options={options}\n />\n </div>\n);\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-hidden-label.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-4", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Filter results by product" }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", hasVisuallyHiddenLabel: true, options: options, placeholder: "All products" })] }));
+const Component = () => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-4", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Filter results by product" }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", hasVisuallyHiddenLabel: true, options: options, placeholder: "All products" })] }));
 exports.default = Component;
 //# sourceMappingURL=combobox-hidden-label.story.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-hidden-label.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-hidden-label.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwD;AAExD,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,~~iCAAiC~~,~~aAC9C~~,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,0CAAuC,EACxE,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,sBAAsB,QACtB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAC,cAAc,GAC1B,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, Typography } 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-4\">\n <Typography variant=\"body-medium\">Filter results by product</Typography>\n <Combobox\n label=\"Product\"\n hasVisuallyHiddenLabel\n options={options}\n placeholder=\"All products\"\n />\n </div>\n);\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"combobox-hidden-label.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-hidden-label.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAwD;AAExD,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,2BAA2B,aACxC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,0CAAuC,EACxE,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,sBAAsB,QACtB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAC,cAAc,GAC1B,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, Typography } 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-4\">\n <Typography variant=\"body-medium\">Filter results by product</Typography>\n <Combobox\n label=\"Product\"\n hasVisuallyHiddenLabel\n options={options}\n placeholder=\"All products\"\n />\n </div>\n);\n\nexport default Component;\n"]}

package/lib/cjs/combobox/stories/combobox-in-popover-dialog.story.js CHANGED Viewed

@@ -34,7 +34,7 @@ const options = [
 ];
 const Component = () => {
     const [isOpen, setIsOpen] = (0, react_2.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsOpen(true), children: "Open dialog" }), (0, jsx_runtime_1.jsxs)(react_1.Dialog, { isOpen: isOpen, onClose: () => setIsOpen(false), size: "medium", children: [(0, jsx_runtime_1.jsx)(react_1.Dialog.Header, { children: "Combobox in a popover in a dialog" }), (0, jsx_runtime_1.jsx)(react_1.Dialog.Description, { children: "This exercises nested portals, fixed positioning, focus handling, and stacking across all three components." }), (0, jsx_runtime_1.jsx)(react_1.Dialog.Content, { children: (0, jsx_runtime_1.jsxs)(react_1.Popover, { isPortaled: true, hasAnchorPortal: true, strategy: "fixed", children: [(0, jsx_runtime_1.jsx)(react_1.Popover.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { children: "Open popover" }) }), (0, jsx_runtime_1.jsx)(react_1.Popover.Content, { className: "n-w-[400px] n-p-token-16", children: (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", errorText: "This error styling should inherit the dialog theme.", isFluid: true, options: options, searchPlaceholder: "Search products" }) })] }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsOpen(true), children: "Open dialog" }), (0, jsx_runtime_1.jsxs)(react_1.Dialog, { isOpen: isOpen, onClose: () => setIsOpen(false), size: "medium", children: [(0, jsx_runtime_1.jsx)(react_1.Dialog.Header, { children: "Combobox in a popover in a dialog" }), (0, jsx_runtime_1.jsx)(react_1.Dialog.Description, { children: "This exercises nested portals, fixed positioning, focus handling, and stacking across all three components." }), (0, jsx_runtime_1.jsx)(react_1.Dialog.Content, { children: (0, jsx_runtime_1.jsxs)(react_1.Popover, { isPortaled: true, hasAnchorPortal: true, strategy: "fixed", children: [(0, jsx_runtime_1.jsx)(react_1.Popover.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { children: "Open popover" }) }), (0, jsx_runtime_1.jsx)(react_1.Popover.Content, { className: "w-[400px] p-token-16", children: (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", errorText: "This error styling should inherit the dialog theme.", isFluid: true, options: options, searchPlaceholder: "Search products" }) })] }) })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=combobox-in-popover-dialog.story.js.map

package/lib/cjs/combobox/stories/combobox-in-popover-dialog.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-in-popover-dialog.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-in-popover-dialog.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA2E;AAC3E,iCAAiC;AAEjC,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;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;IAClD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;CACrC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,4BAA4B,EACxE,wBAAC,cAAM,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,aACpE,uBAAC,cAAM,CAAC,MAAM,oDAAkD,EAChE,uBAAC,cAAM,CAAC,WAAW,8HAGE,EACrB,uBAAC,cAAM,CAAC,OAAO,cACb,wBAAC,eAAO,IAAC,UAAU,QAAC,eAAe,QAAC,QAAQ,EAAC,OAAO,aAClD,uBAAC,eAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,uBAAC,oBAAY,+BAA4B,GACzB,EAClB,uBAAC,eAAO,CAAC,OAAO,IAAC,SAAS,EAAC,~~0BAA0B~~,~~YACnD~~,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,qDAAqD,EAC/D,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAC,iBAAiB,GACnC,GACc,IACV,GACK,IACV,IACR,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 { Combobox, Dialog, FilledButton, Popover } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst options = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n { label: 'Data Importer', value: 'data-importer' },\n { label: 'GraphQL Library', value: 'graphql-library' },\n { label: 'Cypher', value: 'cypher' },\n];\n\nconst Component = () => {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n <>\n <FilledButton onClick={() => setIsOpen(true)}>Open dialog</FilledButton>\n <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} size=\"medium\">\n <Dialog.Header>Combobox in a popover in a dialog</Dialog.Header>\n <Dialog.Description>\n This exercises nested portals, fixed positioning, focus handling, and\n stacking across all three components.\n </Dialog.Description>\n <Dialog.Content>\n <Popover isPortaled hasAnchorPortal strategy=\"fixed\">\n <Popover.Trigger hasButtonWrapper>\n <FilledButton>Open popover</FilledButton>\n </Popover.Trigger>\n <Popover.Content className=\"n-w-[400px] n-p-token-16\">\n <Combobox\n label=\"Product\"\n errorText=\"This error styling should inherit the dialog theme.\"\n isFluid\n options={options}\n searchPlaceholder=\"Search products\"\n />\n </Popover.Content>\n </Popover>\n </Dialog.Content>\n </Dialog>\n </>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"combobox-in-popover-dialog.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-in-popover-dialog.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA2E;AAC3E,iCAAiC;AAEjC,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;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;IAClD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;CACrC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,6DACE,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,4BAA4B,EACxE,wBAAC,cAAM,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,aACpE,uBAAC,cAAM,CAAC,MAAM,oDAAkD,EAChE,uBAAC,cAAM,CAAC,WAAW,8HAGE,EACrB,uBAAC,cAAM,CAAC,OAAO,cACb,wBAAC,eAAO,IAAC,UAAU,QAAC,eAAe,QAAC,QAAQ,EAAC,OAAO,aAClD,uBAAC,eAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,uBAAC,oBAAY,+BAA4B,GACzB,EAClB,uBAAC,eAAO,CAAC,OAAO,IAAC,SAAS,EAAC,sBAAsB,YAC/C,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,qDAAqD,EAC/D,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAC,iBAAiB,GACnC,GACc,IACV,GACK,IACV,IACR,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 { Combobox, Dialog, FilledButton, Popover } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst options = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n { label: 'Data Importer', value: 'data-importer' },\n { label: 'GraphQL Library', value: 'graphql-library' },\n { label: 'Cypher', value: 'cypher' },\n];\n\nconst Component = () => {\n const [isOpen, setIsOpen] = useState(false);\n\n return (\n <>\n <FilledButton onClick={() => setIsOpen(true)}>Open dialog</FilledButton>\n <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} size=\"medium\">\n <Dialog.Header>Combobox in a popover in a dialog</Dialog.Header>\n <Dialog.Description>\n This exercises nested portals, fixed positioning, focus handling, and\n stacking across all three components.\n </Dialog.Description>\n <Dialog.Content>\n <Popover isPortaled hasAnchorPortal strategy=\"fixed\">\n <Popover.Trigger hasButtonWrapper>\n <FilledButton>Open popover</FilledButton>\n </Popover.Trigger>\n <Popover.Content className=\"w-[400px] p-token-16\">\n <Combobox\n label=\"Product\"\n errorText=\"This error styling should inherit the dialog theme.\"\n isFluid\n options={options}\n searchPlaceholder=\"Search products\"\n />\n </Popover.Content>\n </Popover>\n </Dialog.Content>\n </Dialog>\n </>\n );\n};\n\nexport default Component;\n"]}

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

@@ -31,6 +31,6 @@ const options = [
     { label: 'GraphQL Library', value: 'graphql-library' },
     { label: 'Cypher', value: 'cypher' },
 ];
-const Component = () => ((0, jsx_runtime_1.jsxs)(react_1.Popover, { isPortaled: true, children: [(0, jsx_runtime_1.jsx)(react_1.Popover.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { children: "Open popover" }) }), (0, jsx_runtime_1.jsx)(react_1.Popover.Content, { className: "n-max-h-[240px] n-w-[400px] n-overflow-y-auto n-p-token-16", children: (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Scroll this popover while the combobox panel is open to verify that it remains anchored and is not clipped by the overflow container." }), (0, jsx_runtime_1.jsx)("div", { className: "n-h-[120px] n-shrink-0 n-rounded-sm n-border n-border-neutral-border-strong n-bg-neutral-bg-weak" }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", helpText: "The combobox panel is independently portaled above this popover.", isFluid: true, options: options, searchPlaceholder: "Search products" }), (0, jsx_runtime_1.jsx)("div", { className: "n-h-[120px] n-shrink-0 n-rounded-sm n-border n-border-neutral-border-strong n-bg-neutral-bg-weak" })] }) })] }));
+const Component = () => ((0, jsx_runtime_1.jsxs)(react_1.Popover, { isPortaled: true, children: [(0, jsx_runtime_1.jsx)(react_1.Popover.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { children: "Open popover" }) }), (0, jsx_runtime_1.jsx)(react_1.Popover.Content, { className: "max-h-[240px] w-[400px] overflow-y-auto p-token-16", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Scroll this popover while the combobox panel is open to verify that it remains anchored and is not clipped by the overflow container." }), (0, jsx_runtime_1.jsx)("div", { className: "h-[120px] shrink-0 rounded-sm border border-neutral-border-strong bg-neutral-bg-weak" }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", helpText: "The combobox panel is independently portaled above this popover.", isFluid: true, options: options, searchPlaceholder: "Search products" }), (0, jsx_runtime_1.jsx)("div", { className: "h-[120px] shrink-0 rounded-sm border border-neutral-border-strong bg-neutral-bg-weak" })] }) })] }));
 exports.default = Component;
 //# sourceMappingURL=combobox-in-popover.story.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-in-popover.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-in-popover.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+E;AAE/E,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;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;IAClD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;CACrC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,wBAAC,eAAO,IAAC,UAAU,mBACjB,uBAAC,eAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,uBAAC,oBAAY,+BAA4B,GACzB,EAClB,uBAAC,eAAO,CAAC,OAAO,IAAC,SAAS,EAAC,~~4DAA4D~~,~~YACrF~~,iCAAK,SAAS,EAAC,~~kCAAkC~~,~~aAC/C~~,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,sJAGpB,EACb,gCAAK,SAAS,EAAC,~~kGAAkG~~,GAAG,~~EACpH~~,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,kEAAkE,EAC3E,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAC,iBAAiB,GACnC,EACF,gCAAK,SAAS,EAAC,~~kGAAkG~~,GAAG,~~IAChH~~,GACU,IACV,CACX,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, FilledButton, Popover, Typography } from '@neo4j-ndl/react';\n\nconst options = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n { label: 'Data Importer', value: 'data-importer' },\n { label: 'GraphQL Library', value: 'graphql-library' },\n { label: 'Cypher', value: 'cypher' },\n];\n\nconst Component = () => (\n <Popover isPortaled>\n <Popover.Trigger hasButtonWrapper>\n <FilledButton>Open popover</FilledButton>\n </Popover.Trigger>\n <Popover.Content className=\"n-max-h-[240px] n-w-[400px] n-overflow-y-auto n-p-token-16\">\n <div className=\"n-flex n-flex-col n-gap-token-16\">\n <Typography variant=\"body-medium\">\n Scroll this popover while the combobox panel is open to verify that it\n remains anchored and is not clipped by the overflow container.\n </Typography>\n <div className=\"n-h-[120px] n-shrink-0 n-rounded-sm n-border n-border-neutral-border-strong n-bg-neutral-bg-weak\" />\n <Combobox\n label=\"Product\"\n helpText=\"The combobox panel is independently portaled above this popover.\"\n isFluid\n options={options}\n searchPlaceholder=\"Search products\"\n />\n <div className=\"n-h-[120px] n-shrink-0 n-rounded-sm n-border n-border-neutral-border-strong n-bg-neutral-bg-weak\" />\n </div>\n </Popover.Content>\n </Popover>\n);\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"combobox-in-popover.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-in-popover.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA+E;AAE/E,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;IAClC,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,eAAe,EAAE;IAClD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;IACtD,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;CACrC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CACtB,wBAAC,eAAO,IAAC,UAAU,mBACjB,uBAAC,eAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,uBAAC,oBAAY,+BAA4B,GACzB,EAClB,uBAAC,eAAO,CAAC,OAAO,IAAC,SAAS,EAAC,oDAAoD,YAC7E,iCAAK,SAAS,EAAC,4BAA4B,aACzC,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,sJAGpB,EACb,gCAAK,SAAS,EAAC,sFAAsF,GAAG,EACxG,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,kEAAkE,EAC3E,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAC,iBAAiB,GACnC,EACF,gCAAK,SAAS,EAAC,sFAAsF,GAAG,IACpG,GACU,IACV,CACX,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, FilledButton, Popover, Typography } from '@neo4j-ndl/react';\n\nconst options = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n { label: 'Data Importer', value: 'data-importer' },\n { label: 'GraphQL Library', value: 'graphql-library' },\n { label: 'Cypher', value: 'cypher' },\n];\n\nconst Component = () => (\n <Popover isPortaled>\n <Popover.Trigger hasButtonWrapper>\n <FilledButton>Open popover</FilledButton>\n </Popover.Trigger>\n <Popover.Content className=\"max-h-[240px] w-[400px] overflow-y-auto p-token-16\">\n <div className=\"flex flex-col gap-token-16\">\n <Typography variant=\"body-medium\">\n Scroll this popover while the combobox panel is open to verify that it\n remains anchored and is not clipped by the overflow container.\n </Typography>\n <div className=\"h-[120px] shrink-0 rounded-sm border border-neutral-border-strong bg-neutral-bg-weak\" />\n <Combobox\n label=\"Product\"\n helpText=\"The combobox panel is independently portaled above this popover.\"\n isFluid\n options={options}\n searchPlaceholder=\"Search products\"\n />\n <div className=\"h-[120px] shrink-0 rounded-sm border border-neutral-border-strong bg-neutral-bg-weak\" />\n </div>\n </Popover.Content>\n </Popover>\n);\n\nexport default Component;\n"]}

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

@@ -41,7 +41,7 @@ const Component = () => {
         event.preventDefault();
         setSubmittedValues(Array.from(new FormData(event.currentTarget).entries()).map(([name, value]) => `${name}: ${String(value)}`));
     };
-    return ((0, jsx_runtime_1.jsxs)("form", { className: "n-flex n-max-w-xl n-flex-col n-gap-token-6", onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", name: "product", options: products, defaultValue: products[0], isRequired: true, hasRequiredIndicator: true, triggerRef: triggerRef }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Environments", name: "environment", options: environments, defaultValue: [environments[0], environments[1]], isMulti: true }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-wrap n-gap-token-2", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { type: "submit", children: "Submit" }), (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { type: "reset", children: "Reset" }), (0, jsx_runtime_1.jsx)(react_1.TextButton, { type: "button", onClick: () => { var _a; return (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, children: "Focus product" })] }), (0, jsx_runtime_1.jsxs)("div", { "aria-live": "polite", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Submitted form data" }), (0, jsx_runtime_1.jsx)("pre", { className: "n-mt-token-2", children: submittedValues.length > 0
+    return ((0, jsx_runtime_1.jsxs)("form", { className: "flex max-w-xl flex-col gap-token-6", onSubmit: handleSubmit, children: [(0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Product", name: "product", options: products, defaultValue: products[0], isRequired: true, hasRequiredIndicator: true, triggerRef: triggerRef }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: "Environments", name: "environment", options: environments, defaultValue: [environments[0], environments[1]], isMulti: true }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-token-2", children: [(0, jsx_runtime_1.jsx)(react_1.FilledButton, { type: "submit", children: "Submit" }), (0, jsx_runtime_1.jsx)(react_1.OutlinedButton, { type: "reset", children: "Reset" }), (0, jsx_runtime_1.jsx)(react_1.TextButton, { type: "button", onClick: () => { var _a; return (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, children: "Focus product" })] }), (0, jsx_runtime_1.jsxs)("div", { "aria-live": "polite", children: [(0, jsx_runtime_1.jsx)(react_1.Typography, { variant: "body-medium", children: "Submitted form data" }), (0, jsx_runtime_1.jsx)("pre", { className: "mt-token-2", children: submittedValues.length > 0
                             ? submittedValues.join('\n')
                             : 'Submit the form to inspect its values.' })] })] }));
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"combobox-native-form.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-native-form.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAM0B;AAC1B,iCAAyD;AAEzD,MAAM,QAAQ,GAAG;IACf,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,YAAY,GAAG;IACnB,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;IAC9C,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IACtC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE;CAC7C,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,UAAU,GAAG,IAAA,cAAM,EAAqB,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAW,EAAE,CAAC,CAAC;IAErE,MAAM,YAAY,GAAG,CAAC,KAAiC,EAAE,EAAE;QACzD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,kBAAkB,CAChB,KAAK,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,CACzD,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,KAAK,MAAM,CAAC,KAAK,CAAC,EAAE,CAC/C,CACF,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,kCACE,SAAS,EAAC,~~4CAA4C~~,~~EACtD~~,QAAQ,EAAE,YAAY,aAEtB,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,QAAQ,EACjB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EACzB,UAAU,QACV,oBAAoB,QACpB,UAAU,EAAE,UAAU,GACtB,EACF,uBAAC,gBAAQ,IACP,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,EAClB,OAAO,EAAE,YAAY,EACrB,YAAY,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,EAChD,OAAO,SACP,EACF,iCAAK,SAAS,EAAC,~~kCAAkC~~,~~aAC/C~~,uBAAC,oBAAY,IAAC,IAAI,EAAC,QAAQ,uBAAsB,EACjD,uBAAC,sBAAc,IAAC,IAAI,EAAC,OAAO,sBAAuB,EACnD,uBAAC,kBAAU,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA,8BAEvD,IACT,EACN,8CAAe,QAAQ,aACrB,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,oCAAiC,EAClE,gCAAK,SAAS,EAAC,~~cAAc~~,~~YAC1B~~,eAAe,CAAC,MAAM,GAAG,CAAC;4BACzB,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;4BAC5B,CAAC,CAAC,wCAAwC,GACxC,IACF,IACD,CACR,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 Combobox,\n FilledButton,\n OutlinedButton,\n TextButton,\n Typography,\n} from '@neo4j-ndl/react';\nimport { type FormEvent, useRef, useState } from 'react';\n\nconst products = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n];\n\nconst environments = [\n { label: 'Development', value: 'development' },\n { label: 'Staging', value: 'staging' },\n { label: 'Production', value: 'production' },\n];\n\nconst Component = () => {\n const triggerRef = useRef<HTMLElement \| null>(null);\n const [submittedValues, setSubmittedValues] = useState<string[]>([]);\n\n const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n setSubmittedValues(\n Array.from(new FormData(event.currentTarget).entries()).map(\n ([name, value]) => `${name}: ${String(value)}`,\n ),\n );\n };\n\n return (\n <form\n className=\"n-flex n-max-w-xl n-flex-col n-gap-token-6\"\n onSubmit={handleSubmit}\n >\n <Combobox\n label=\"Product\"\n name=\"product\"\n options={products}\n defaultValue={products[0]}\n isRequired\n hasRequiredIndicator\n triggerRef={triggerRef}\n />\n <Combobox\n label=\"Environments\"\n name=\"environment\"\n options={environments}\n defaultValue={[environments[0], environments[1]]}\n isMulti\n />\n <div className=\"n-flex n-flex-wrap n-gap-token-2\">\n <FilledButton type=\"submit\">Submit</FilledButton>\n <OutlinedButton type=\"reset\">Reset</OutlinedButton>\n <TextButton type=\"button\" onClick={() => triggerRef.current?.focus()}>\n Focus product\n </TextButton>\n </div>\n <div aria-live=\"polite\">\n <Typography variant=\"body-medium\">Submitted form data</Typography>\n <pre className=\"n-mt-token-2\">\n {submittedValues.length > 0\n ? submittedValues.join('\\n')\n : 'Submit the form to inspect its values.'}\n </pre>\n </div>\n </form>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"combobox-native-form.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-native-form.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAM0B;AAC1B,iCAAyD;AAEzD,MAAM,QAAQ,GAAG;IACf,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,YAAY,GAAG;IACnB,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;IAC9C,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IACtC,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE;CAC7C,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,UAAU,GAAG,IAAA,cAAM,EAAqB,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,IAAA,gBAAQ,EAAW,EAAE,CAAC,CAAC;IAErE,MAAM,YAAY,GAAG,CAAC,KAAiC,EAAE,EAAE;QACzD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,kBAAkB,CAChB,KAAK,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,CACzD,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,KAAK,MAAM,CAAC,KAAK,CAAC,EAAE,CAC/C,CACF,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,kCACE,SAAS,EAAC,oCAAoC,EAC9C,QAAQ,EAAE,YAAY,aAEtB,uBAAC,gBAAQ,IACP,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,QAAQ,EACjB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EACzB,UAAU,QACV,oBAAoB,QACpB,UAAU,EAAE,UAAU,GACtB,EACF,uBAAC,gBAAQ,IACP,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,EAClB,OAAO,EAAE,YAAY,EACrB,YAAY,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,EAChD,OAAO,SACP,EACF,iCAAK,SAAS,EAAC,4BAA4B,aACzC,uBAAC,oBAAY,IAAC,IAAI,EAAC,QAAQ,uBAAsB,EACjD,uBAAC,sBAAc,IAAC,IAAI,EAAC,OAAO,sBAAuB,EACnD,uBAAC,kBAAU,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA,8BAEvD,IACT,EACN,8CAAe,QAAQ,aACrB,uBAAC,kBAAU,IAAC,OAAO,EAAC,aAAa,oCAAiC,EAClE,gCAAK,SAAS,EAAC,YAAY,YACxB,eAAe,CAAC,MAAM,GAAG,CAAC;4BACzB,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC;4BAC5B,CAAC,CAAC,wCAAwC,GACxC,IACF,IACD,CACR,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 Combobox,\n FilledButton,\n OutlinedButton,\n TextButton,\n Typography,\n} from '@neo4j-ndl/react';\nimport { type FormEvent, useRef, useState } from 'react';\n\nconst products = [\n { label: 'Neo4j', value: 'neo4j' },\n { label: 'Aura', value: 'aura' },\n { label: 'Bloom', value: 'bloom' },\n];\n\nconst environments = [\n { label: 'Development', value: 'development' },\n { label: 'Staging', value: 'staging' },\n { label: 'Production', value: 'production' },\n];\n\nconst Component = () => {\n const triggerRef = useRef<HTMLElement \| null>(null);\n const [submittedValues, setSubmittedValues] = useState<string[]>([]);\n\n const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n event.preventDefault();\n setSubmittedValues(\n Array.from(new FormData(event.currentTarget).entries()).map(\n ([name, value]) => `${name}: ${String(value)}`,\n ),\n );\n };\n\n return (\n <form\n className=\"flex max-w-xl flex-col gap-token-6\"\n onSubmit={handleSubmit}\n >\n <Combobox\n label=\"Product\"\n name=\"product\"\n options={products}\n defaultValue={products[0]}\n isRequired\n hasRequiredIndicator\n triggerRef={triggerRef}\n />\n <Combobox\n label=\"Environments\"\n name=\"environment\"\n options={environments}\n defaultValue={[environments[0], environments[1]]}\n isMulti\n />\n <div className=\"flex flex-wrap gap-token-2\">\n <FilledButton type=\"submit\">Submit</FilledButton>\n <OutlinedButton type=\"reset\">Reset</OutlinedButton>\n <TextButton type=\"button\" onClick={() => triggerRef.current?.focus()}>\n Focus product\n </TextButton>\n </div>\n <div aria-live=\"polite\">\n <Typography variant=\"body-medium\">Submitted form data</Typography>\n <pre className=\"mt-token-2\">\n {submittedValues.length > 0\n ? submittedValues.join('\\n')\n : 'Submit the form to inspect its values.'}\n </pre>\n </div>\n </form>\n );\n};\n\nexport default Component;\n"]}

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

@@ -28,6 +28,6 @@ const options = [
     { label: 'Aura', value: 'aura' },
     { label: 'Bloom', value: 'bloom' },
 ];
-const Component = () => ((0, jsx_runtime_1.jsx)("div", { className: "n-flex n-flex-col n-gap-token-16", children: ['small', 'medium', 'large'].map((size) => ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-4", children: [(0, jsx_runtime_1.jsx)("p", { className: "n-capitalize", children: size }), (0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-wrap n-items-start n-gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Combobox, { label: `${size} single-select`, defaultValue: options[0], options: options, size: size }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: `${size} multi-select`, defaultValue: options.slice(0, 2), isMulti: true, options: options, size: size })] })] }, size))) }));
+const Component = () => ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-token-16", children: ['small', 'medium', 'large'].map((size) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-4", children: [(0, jsx_runtime_1.jsx)("p", { className: "capitalize", children: size }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-start gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.Combobox, { label: `${size} single-select`, defaultValue: options[0], options: options, size: size }), (0, jsx_runtime_1.jsx)(react_1.Combobox, { label: `${size} multi-select`, defaultValue: options.slice(0, 2), isMulti: true, options: options, size: size })] })] }, size))) }));
 exports.default = Component;
 //# sourceMappingURL=combobox-sizes.story.js.map

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":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAI0B;AAC1B,uDAS+B;AAE/B,6CAAoE;AAEpE,MAAM,UAAU,GAAwB;IACtC,6DAA6D;IAC7D;QACE,KAAK,EAAE;YACL,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC3B,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;SAChC;QACD,MAAM,EAAE,IAAI;QACZ,QAAQ,EAAE,CAAC;QACX,KAAK,EAAE,EAAE,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,QAAQ,CAAC,EAAE;KACpD;IACD,mEAAmE;IACnE;QACE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE;QACtC,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,CAAC;QACX,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,EAAE;KAC1C;IACD,8EAA8E;IAC9E,2EAA2E;IAC3E,6EAA6E;IAC7E;QACE,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,QAAQ,EAAE,SAAS;gBACnB,QAAQ,EAAE,GAAG;gBACb,QAAQ,EAAE,SAAS;gBACnB,QAAQ,EAAE,EAAE;gBACZ,QAAQ,EAAE,SAAS;gBACnB,QAAQ,EAAE,CAAC;gBACX,QAAQ,EAAE,KAAK;aAChB;YACD,cAAc,EAAE;gBACd,QAAQ,EAAE,SAAS;gBACnB,QAAQ,EAAE,EAAE;gBACZ,QAAQ,EAAE,SAAS;gBACnB,QAAQ,EAAE,EAAE;gBACZ,QAAQ,EAAE,KAAK;aAChB;SACF;QACD,MAAM,EAAE,KAAK;QACb,QAAQ,EAAE,CAAC,EAAE,kDAAkD;KAChE;IACD,0EAA0E;IAC1E;QACE,KAAK,EAAE;YACL,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;YAC3B,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;SAChC;QACD,MAAM,EAAE,IAAI;QACZ,QAAQ,EAAE,CAAC,EAAE,gDAAgD;QAC7D,KAAK,EAAE;YACL,GAAG,EAAE;gBACH,EAAE,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,EAAE;gBACxC,EAAE,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,GAAG,CAAC,EAAE;aACxC;SACF;KACF;CACF,CAAC;AAEF;;GAEG;AACH,MAAM,cAAc,GAAG,CAAoB,EACzC,IAAI,GAGL,EAAE,EAAE;IACH,MAAM,SAAS,GAAG,IAAA,4BAAoB,EAAC,IAAI,CAAC,CAAC;IAE7C,OAAO,CACL,gCACE,SAAS,EAAC,kBAAkB,EAC5B,IAAI,EAAC,MAAM,EACX,KAAK,kCACA,SAAS,KACZ,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,eAG7B,IAAA,wBAAU,EAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,GACtD,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,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,GAAG,EAAE,CAAC,MAAM;YACpB,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE;YAC3B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAClC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK;YACnB,OAAO,EAAE,EAAE;SACZ,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB;YAC9B,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;KACH,CAAC;IAEF,MAAM,KAAK,GAAG,IAAA,2BAAa,EAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO;QACP,IAAI,EAAE,4BAAe;QACrB,aAAa,EAAE;YACb,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,EAAE;SACZ;QACD,aAAa,EAAE,IAAI;QACnB,eAAe,EAAE,IAAA,6BAAe,GAAE;QAClC,qBAAqB,EAAE,IAAA,mCAAqB,GAAE;QAC9C,iBAAiB,EAAE,IAAA,+BAAiB,GAAE;QACtC,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,EAAE;aACb;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,gCAAK,SAAS,EAAC,~~0CAA0C~~,~~YACvD~~,uBAAC,gBAAQ,IACP,WAAW,EAAE,KAAK,EAClB,aAAa,EAAE,KAAK,EACpB,mBAAmB,EAAE,KAAK,EAC1B,UAAU,EAAE,UAAU,EACtB,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',