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

package/lib/esm/combobox/stories/combobox-fluid.story.js

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

package/lib/esm/combobox/stories/combobox-fluid.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-fluid.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-fluid.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;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,cAAK,SAAS,EAAC,UAAU,YACvB,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,8CAA8C,EACvD,WAAW,QACX,OAAO,QACP,OAAO,EAAE,OAAO,GAChB,GACE,CACP,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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"]}
+{"version":3,"file":"combobox-fluid.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-fluid.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;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,cAAK,SAAS,EAAC,QAAQ,YACrB,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,8CAA8C,EACvD,WAAW,QACX,OAAO,QACP,OAAO,EAAE,OAAO,GAChB,GACE,CACP,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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/esm/combobox/stories/combobox-hidden-label.story.js

@@ -26,6 +26,6 @@ const options = [
     { label: 'Aura', value: 'aura' },
     { label: 'Bloom', value: 'bloom' },
 ];
-const Component = () => (_jsxs("div", { className: "n-flex n-flex-col n-gap-token-4", children: [_jsx(Typography, { variant: "body-medium", children: "Filter results by product" }), _jsx(Combobox, { label: "Product", hasVisuallyHiddenLabel: true, options: options, placeholder: "All products" })] }));
+const Component = () => (_jsxs("div", { className: "flex flex-col gap-token-4", children: [_jsx(Typography, { variant: "body-medium", children: "Filter results by product" }), _jsx(Combobox, { label: "Product", hasVisuallyHiddenLabel: true, options: options, placeholder: "All products" })] }));
 export default Component;
 //# sourceMappingURL=combobox-hidden-label.story.js.map

package/lib/esm/combobox/stories/combobox-hidden-label.story.js.map

@@ -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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;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,eAAK,SAAS,EAAC,iCAAiC,aAC9C,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,0CAAuC,EACxE,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,sBAAsB,QACtB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAC,cAAc,GAC1B,IACE,CACP,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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"]}
+{"version":3,"file":"combobox-hidden-label.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-hidden-label.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;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,eAAK,SAAS,EAAC,2BAA2B,aACxC,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,0CAAuC,EACxE,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,sBAAsB,QACtB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAC,cAAc,GAC1B,IACE,CACP,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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/esm/combobox/stories/combobox-in-popover-dialog.story.js

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

package/lib/esm/combobox/stories/combobox-in-popover-dialog.story.js.map

@@ -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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;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,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,4BAA4B,EACxE,MAAC,MAAM,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,aACpE,KAAC,MAAM,CAAC,MAAM,oDAAkD,EAChE,KAAC,MAAM,CAAC,WAAW,8HAGE,EACrB,KAAC,MAAM,CAAC,OAAO,cACb,MAAC,OAAO,IAAC,UAAU,QAAC,eAAe,QAAC,QAAQ,EAAC,OAAO,aAClD,KAAC,OAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,KAAC,YAAY,+BAA4B,GACzB,EAClB,KAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,0BAA0B,YACnD,KAAC,QAAQ,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,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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"]}
+{"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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;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,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,OAAO,CACL,8BACE,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,4BAA4B,EACxE,MAAC,MAAM,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,aACpE,KAAC,MAAM,CAAC,MAAM,oDAAkD,EAChE,KAAC,MAAM,CAAC,WAAW,8HAGE,EACrB,KAAC,MAAM,CAAC,OAAO,cACb,MAAC,OAAO,IAAC,UAAU,QAAC,eAAe,QAAC,QAAQ,EAAC,OAAO,aAClD,KAAC,OAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,KAAC,YAAY,+BAA4B,GACzB,EAClB,KAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,sBAAsB,YAC/C,KAAC,QAAQ,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,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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/esm/combobox/stories/combobox-in-popover.story.js

@@ -29,6 +29,6 @@ const options = [
     { label: 'GraphQL Library', value: 'graphql-library' },
     { label: 'Cypher', value: 'cypher' },
 ];
-const Component = () => (_jsxs(Popover, { isPortaled: true, children: [_jsx(Popover.Trigger, { hasButtonWrapper: true, children: _jsx(FilledButton, { children: "Open popover" }) }), _jsx(Popover.Content, { className: "n-max-h-[240px] n-w-[400px] n-overflow-y-auto n-p-token-16", children: _jsxs("div", { className: "n-flex n-flex-col n-gap-token-16", children: [_jsx(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." }), _jsx("div", { className: "n-h-[120px] n-shrink-0 n-rounded-sm n-border n-border-neutral-border-strong n-bg-neutral-bg-weak" }), _jsx(Combobox, { label: "Product", helpText: "The combobox panel is independently portaled above this popover.", isFluid: true, options: options, searchPlaceholder: "Search products" }), _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 = () => (_jsxs(Popover, { isPortaled: true, children: [_jsx(Popover.Trigger, { hasButtonWrapper: true, children: _jsx(FilledButton, { children: "Open popover" }) }), _jsx(Popover.Content, { className: "max-h-[240px] w-[400px] overflow-y-auto p-token-16", children: _jsxs("div", { className: "flex flex-col gap-token-16", children: [_jsx(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." }), _jsx("div", { className: "h-[120px] shrink-0 rounded-sm border border-neutral-border-strong bg-neutral-bg-weak" }), _jsx(Combobox, { label: "Product", helpText: "The combobox panel is independently portaled above this popover.", isFluid: true, options: options, searchPlaceholder: "Search products" }), _jsx("div", { className: "h-[120px] shrink-0 rounded-sm border border-neutral-border-strong bg-neutral-bg-weak" })] }) })] }));
 export default Component;
 //# sourceMappingURL=combobox-in-popover.story.js.map

package/lib/esm/combobox/stories/combobox-in-popover.story.js.map

@@ -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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;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,MAAC,OAAO,IAAC,UAAU,mBACjB,KAAC,OAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,KAAC,YAAY,+BAA4B,GACzB,EAClB,KAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,4DAA4D,YACrF,eAAK,SAAS,EAAC,kCAAkC,aAC/C,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,sJAGpB,EACb,cAAK,SAAS,EAAC,kGAAkG,GAAG,EACpH,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,kEAAkE,EAC3E,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAC,iBAAiB,GACnC,EACF,cAAK,SAAS,EAAC,kGAAkG,GAAG,IAChH,GACU,IACV,CACX,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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"]}
+{"version":3,"file":"combobox-in-popover.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-in-popover.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;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,MAAC,OAAO,IAAC,UAAU,mBACjB,KAAC,OAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,KAAC,YAAY,+BAA4B,GACzB,EAClB,KAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,oDAAoD,YAC7E,eAAK,SAAS,EAAC,4BAA4B,aACzC,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,sJAGpB,EACb,cAAK,SAAS,EAAC,sFAAsF,GAAG,EACxG,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,kEAAkE,EAC3E,OAAO,QACP,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAC,iBAAiB,GACnC,EACF,cAAK,SAAS,EAAC,sFAAsF,GAAG,IACpG,GACU,IACV,CACX,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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/esm/combobox/stories/combobox-native-form.story.js

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

package/lib/esm/combobox/stories/combobox-native-form.story.js.map

@@ -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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,UAAU,EACV,UAAU,GACX,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAkB,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;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,MAAM,CAAqB,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,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,gBACE,SAAS,EAAC,4CAA4C,EACtD,QAAQ,EAAE,YAAY,aAEtB,KAAC,QAAQ,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,KAAC,QAAQ,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,eAAK,SAAS,EAAC,kCAAkC,aAC/C,KAAC,YAAY,IAAC,IAAI,EAAC,QAAQ,uBAAsB,EACjD,KAAC,cAAc,IAAC,IAAI,EAAC,OAAO,sBAAuB,EACnD,KAAC,UAAU,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA,8BAEvD,IACT,EACN,4BAAe,QAAQ,aACrB,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,oCAAiC,EAClE,cAAK,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,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\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"]}
+{"version":3,"file":"combobox-native-form.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-native-form.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,UAAU,EACV,UAAU,GACX,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAkB,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;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,MAAM,CAAqB,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAW,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,gBACE,SAAS,EAAC,oCAAoC,EAC9C,QAAQ,EAAE,YAAY,aAEtB,KAAC,QAAQ,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,KAAC,QAAQ,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,eAAK,SAAS,EAAC,4BAA4B,aACzC,KAAC,YAAY,IAAC,IAAI,EAAC,QAAQ,uBAAsB,EACjD,KAAC,cAAc,IAAC,IAAI,EAAC,OAAO,sBAAuB,EACnD,KAAC,UAAU,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA,8BAEvD,IACT,EACN,4BAAe,QAAQ,aACrB,KAAC,UAAU,IAAC,OAAO,EAAC,aAAa,oCAAiC,EAClE,cAAK,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,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport {\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/esm/combobox/stories/combobox-sizes.story.js

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

package/lib/esm/combobox/stories/combobox-sizes.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-sizes.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-sizes.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;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,cAAK,SAAS,EAAC,kCAAkC,YAC7C,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACrD,eAAK,SAAS,EAAC,iCAAiC,aAC9C,YAAG,SAAS,EAAC,cAAc,YAAE,IAAI,GAAK,EACtC,eAAK,SAAS,EAAC,iDAAiD,aAC9D,KAAC,QAAQ,IACP,KAAK,EAAE,GAAG,IAAI,gBAAgB,EAC9B,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,EACxB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,GACV,EACF,KAAC,QAAQ,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,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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"]}
+{"version":3,"file":"combobox-sizes.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-sizes.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;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,cAAK,SAAS,EAAC,4BAA4B,YACvC,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACrD,eAAK,SAAS,EAAC,2BAA2B,aACxC,YAAG,SAAS,EAAC,YAAY,YAAE,IAAI,GAAK,EACpC,eAAK,SAAS,EAAC,yCAAyC,aACtD,KAAC,QAAQ,IACP,KAAK,EAAE,GAAG,IAAI,gBAAgB,EAC9B,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,EACxB,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,GACV,EACF,KAAC,QAAQ,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,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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/esm/combobox/stories/combobox-validation.story.js

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

package/lib/esm/combobox/stories/combobox-validation.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-validation.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-validation.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;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,eAAK,SAAS,EAAC,kCAAkC,aAC/C,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,uCAAuC,EAChD,UAAU,QACV,oBAAoB,QACpB,OAAO,EAAE,OAAO,GAChB,EACF,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,+BAA+B,EACzC,UAAU,QACV,oBAAoB,QACpB,OAAO,EAAE,OAAO,GAChB,EACF,KAAC,QAAQ,IACP,KAAK,EAAC,aAAa,EACnB,QAAQ,EAAC,2CAA2C,EACpD,oBAAoB,QACpB,OAAO,EAAE,OAAO,GAChB,IACE,CACP,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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"]}
+{"version":3,"file":"combobox-validation.story.js","sourceRoot":"","sources":["../../../../src/combobox/stories/combobox-validation.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;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,eAAK,SAAS,EAAC,4BAA4B,aACzC,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,QAAQ,EAAC,uCAAuC,EAChD,UAAU,QACV,oBAAoB,QACpB,OAAO,EAAE,OAAO,GAChB,EACF,KAAC,QAAQ,IACP,KAAK,EAAC,SAAS,EACf,SAAS,EAAC,+BAA+B,EACzC,UAAU,QACV,oBAAoB,QACpB,OAAO,EAAE,OAAO,GAChB,EACF,KAAC,QAAQ,IACP,KAAK,EAAC,aAAa,EACnB,QAAQ,EAAC,2CAA2C,EACpD,oBAAoB,QACpB,OAAO,EAAE,OAAO,GAChB,IACE,CACP,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { 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/esm/conditional-wrap/stories/conditional-wrap-default.story.js

@@ -24,7 +24,7 @@ import { useState } from 'react';
 import { ConditionalWrap } from '../ConditionalWrap';
 const Component = () => {
     const [shouldWrap, setShouldWrap] = useState(false);
-    return (_jsxs("div", { className: "n-flex n-flex-col n-gap-6", children: [_jsx(Switch, { isChecked: shouldWrap, onChange: () => setShouldWrap(!shouldWrap), label: "shouldWrap" }), _jsx(ConditionalWrap, { shouldWrap: shouldWrap, wrap: (children) => _jsx(StatusLabel, { children: children }), children: "Content" })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(Switch, { isChecked: shouldWrap, onChange: () => setShouldWrap(!shouldWrap), label: "shouldWrap" }), _jsx(ConditionalWrap, { shouldWrap: shouldWrap, wrap: (children) => _jsx(StatusLabel, { children: children }), children: "Content" })] }));
 };
 export default Component;
 //# sourceMappingURL=conditional-wrap-default.story.js.map

package/lib/esm/conditional-wrap/stories/conditional-wrap-default.story.js.map

@@ -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,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,OAAO,CACL,eAAK,SAAS,EAAC,2BAA2B,aACxC,KAAC,MAAM,IACL,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,EAC1C,KAAK,EAAC,YAAY,GAClB,EACF,KAAC,eAAe,IACd,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,KAAC,WAAW,cAAE,QAAQ,GAAe,wBAGzC,IACd,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { 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"]}
+{"version":3,"file":"conditional-wrap-default.story.js","sourceRoot":"","sources":["../../../../src/conditional-wrap/stories/conditional-wrap-default.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,OAAO,CACL,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,MAAM,IACL,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,UAAU,CAAC,EAC1C,KAAK,EAAC,YAAY,GAClB,EACF,KAAC,eAAe,IACd,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,KAAC,WAAW,cAAE,QAAQ,GAAe,wBAGzC,IACd,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { 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/esm/data-grid/stories/datagrid-compact-mode.story.js

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

package/lib/esm/data-grid/stories/datagrid-compact-mode.story.js.map

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

package/lib/esm/data-grid/stories/datagrid-component-overriding.story.js

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

package/lib/esm/data-grid/stories/datagrid-component-overriding.story.js.map

@@ -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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,qBAAqB,EACrB,iBAAiB,EACjB,aAAa,GACd,MAAM,uBAAuB,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAQ/C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,kBAAkB,EAAkB,CAAC;IAE1D,MAAM,OAAO,GAAG;QACd,YAAY,CAAC,QAAQ,CAAC,MAAM,EAAE;YAC5B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,MAAM;YACpB,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,KAAK,EAAE;YAC3B,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;YAClC,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,KAAK;YACnB,OAAO,EAAE,EAAE;SACZ,CAAC;QACF,YAAY,CAAC,QAAQ,CAAC,eAAe,EAAE;YACrC,IAAI,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE;YAC/B,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YAChC,MAAM,EAAE,GAAG,EAAE,CAAC,gBAAgB;YAC9B,OAAO,EAAE,GAAG;YACZ,IAAI,EAAE,GAAG;SACV,CAAC;KACH,CAAC;IAEF,MAAM,KAAK,GAAG,aAAa,CAAC;QAC1B,gBAAgB,EAAE,UAAU;QAC5B,OAAO;QACP,IAAI,EAAE,eAAe;QACrB,YAAY,EAAE,IAAI;QAClB,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,IAAI;QAChB,aAAa,EAAE;YACb,OAAO,EAAE,GAAG;YACZ,OAAO,EAAE,EAAE;SACZ;QACD,aAAa,EAAE,IAAI;QACnB,eAAe,EAAE,eAAe,EAAE;QAClC,qBAAqB,EAAE,qBAAqB,EAAE;QAC9C,iBAAiB,EAAE,iBAAiB,EAAE;QACtC,YAAY,EAAE;YACZ,UAAU,EAAE;gBACV,QAAQ,EAAE,CAAC;aACZ;SACF;KACF,CAAC,CAAC;IAEH,OAAO,CACL,eAAK,SAAS,EAAC,iCAAiC,aAC9C,MAAC,UAAU,IACT,OAAO,EAAC,aAAa,EACrB,EAAE,EAAC,KAAK,EACR,SAAS,EAAC,4DAA4D,aAEtE,4DAA0C,EAC1C,6FAAsE,IAC3D,EAEb,cACE,KAAK,EAAE;oBACL,MAAM,EAAE,OAAO;iBAChB,YAED,KAAC,QAAQ,IACP,SAAS,EAAC,UAAU,EACpB,WAAW,EAAE,IAAI,EACjB,aAAa,EAAE,KAAK,EACpB,UAAU,EAAE;wBACV,IAAI,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,QAAQ,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,MAAC,OAAO,IAAC,IAAI,EAAC,QAAQ,aACpB,KAAC,OAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,yBAAO,QAAQ,GAAQ,GACP,EAClB,KAAC,OAAO,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,KAAC,QAAQ,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,KAAC,QAAQ,CAAC,YAAY,2GAGE,CACzB;qBACF,GACD,GACE,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DataGrid, 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&apos; 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"]}
+{"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&apos; 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/esm/data-grid/stories/datagrid-custom-cell-with-style-rules.story.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"datagrid-custom-cell-with-style-rules.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-custom-cell-with-style-rules.story.tsx"],"names":[],"mappings":"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","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"]}
+{"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/esm/data-grid/stories/datagrid-in-dialog.story.js

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

package/lib/esm/data-grid/stories/datagrid-in-dialog.story.js.map

@@ -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"]}
+{"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/esm/data-grid/stories/datagrid-keyboard-navigation.story.js

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

package/lib/esm/data-grid/stories/datagrid-keyboard-navigation.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"datagrid-keyboard-navigation.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-keyboard-navigation.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  Checkbox,\n  DataGrid,\n  type DataGridNav,\n  IconButton,\n  Select,\n  useDataGridContext,\n} from '@neo4j-ndl/react';\nimport { MegaphoneIconOutline } from '@neo4j-ndl/react/icons';\nimport {\n  type ColumnDef,\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { useRef, useState } from 'react';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst selectableColumn: ColumnDef<TestDataFormat> = {\n  cell: ({ row }) => (\n    <Checkbox\n      ariaLabel={`row-${row.index}`}\n      isChecked={row.getIsSelected() || false}\n      onChange={row.getToggleSelectedHandler()}\n    />\n  ),\n  header: ({ table }) => (\n    <Checkbox\n      ariaLabel=\"Select all rows\"\n      isChecked={table.getIsAllRowsSelected() || false}\n      onChange={table.getToggleAllRowsSelectedHandler()}\n      isIndeterminate={table.getIsSomeRowsSelected()}\n    />\n  ),\n  id: 'select',\n  maxSize: 80,\n  size: 80,\n};\n\nconst actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (\n  tableNav,\n) => ({\n  cell: ({ row }) => {\n    const options = ['Edit', 'Delete', 'View'];\n    const dropdownOptions = options.map((option) => ({\n      label: option,\n      value: option,\n    }));\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [selected, setSelected] = useState(dropdownOptions[0]);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const { portalTarget } = useDataGridContext();\n\n    return (\n      <div\n        data-testid={`ndl-actions-cell-row-${row.index}`}\n        className=\"n-flex n-flex-row n-gap-token-8\"\n      >\n        <IconButton\n          description=\"Megaphone\"\n          onClick={() => {\n            alert(\"Let's get loud 📣\");\n          }}\n          htmlAttributes={{\n            type: 'button',\n          }}\n        >\n          <MegaphoneIconOutline />\n        </IconButton>\n        <Select\n          ariaLabel={`actions-select-row-${row.index}`}\n          type=\"select\"\n          selectProps={{\n            menuPortalTarget: portalTarget,\n            onChange: (event) => {\n              if (!event) {\n                return;\n              }\n              setSelected(event);\n            },\n            onKeyDown: (event) => {\n              // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell\n              if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n                event.stopPropagation();\n              }\n            },\n            onMenuClose: () => {\n              console.info(\n                'Start listening to keyboard events for table navigation',\n              );\n              tableNav.enable();\n            },\n            onMenuOpen: () => {\n              console.info(\n                'Stop listening to keyboard events for table navigation',\n              );\n              tableNav.disable();\n            },\n            options: dropdownOptions,\n            value: selected,\n          }}\n        />\n      </div>\n    );\n  },\n  header: 'actions',\n  id: 'actions',\n});\n\nconst allColumns = (tableNav: DataGridNav) => {\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const commonColumns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Name',\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Age',\n      minSize: 80,\n    }),\n  ];\n\n  return [selectableColumn, ...commonColumns, actionsColumn(tableNav)];\n};\n\nconst Component = () => {\n  const [rowSelection, setRowSelection] = useState({});\n  const ref = useRef<HTMLDivElement>(null);\n  const tableNavRef = useRef<DataGridNav>(null!);\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns: allColumns(tableNavRef.current),\n    data: TABLE_DEMO_DATA,\n    enableSorting: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n    onRowSelectionChange: setRowSelection,\n    state: {\n      rowSelection,\n    },\n  });\n\n  return (\n    <>\n      <DataGrid\n        isResizable={false}\n        isKeyboardNavigable={true}\n        styling={{\n          borderStyle: 'all-sides',\n        }}\n        tableNavRef={tableNavRef}\n        tableInstance={table}\n        ref={ref}\n        portalTarget={document.body}\n      />\n    </>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"datagrid-keyboard-navigation.story.js","sourceRoot":"","sources":["../../../../src/data-grid/stories/datagrid-keyboard-navigation.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  Checkbox,\n  DataGrid,\n  type DataGridNav,\n  IconButton,\n  Select,\n  useDataGridContext,\n} from '@neo4j-ndl/react';\nimport { MegaphoneIconOutline } from '@neo4j-ndl/react/icons';\nimport {\n  type ColumnDef,\n  createColumnHelper,\n  getCoreRowModel,\n  getPaginationRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\nimport { useRef, useState } from 'react';\n\nimport { TABLE_DEMO_DATA } from './staticData';\n\ntype TestDataFormat = {\n  name: string;\n  age: number;\n  cypherCommand: string;\n};\n\nconst selectableColumn: ColumnDef<TestDataFormat> = {\n  cell: ({ row }) => (\n    <Checkbox\n      ariaLabel={`row-${row.index}`}\n      isChecked={row.getIsSelected() || false}\n      onChange={row.getToggleSelectedHandler()}\n    />\n  ),\n  header: ({ table }) => (\n    <Checkbox\n      ariaLabel=\"Select all rows\"\n      isChecked={table.getIsAllRowsSelected() || false}\n      onChange={table.getToggleAllRowsSelectedHandler()}\n      isIndeterminate={table.getIsSomeRowsSelected()}\n    />\n  ),\n  id: 'select',\n  maxSize: 80,\n  size: 80,\n};\n\nconst actionsColumn: (tableNav: DataGridNav) => ColumnDef<TestDataFormat> = (\n  tableNav,\n) => ({\n  cell: ({ row }) => {\n    const options = ['Edit', 'Delete', 'View'];\n    const dropdownOptions = options.map((option) => ({\n      label: option,\n      value: option,\n    }));\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const [selected, setSelected] = useState(dropdownOptions[0]);\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const { portalTarget } = useDataGridContext();\n\n    return (\n      <div\n        data-testid={`ndl-actions-cell-row-${row.index}`}\n        className=\"flex flex-row gap-token-8\"\n      >\n        <IconButton\n          description=\"Megaphone\"\n          onClick={() => {\n            alert(\"Let's get loud 📣\");\n          }}\n          htmlAttributes={{\n            type: 'button',\n          }}\n        >\n          <MegaphoneIconOutline />\n        </IconButton>\n        <Select\n          ariaLabel={`actions-select-row-${row.index}`}\n          type=\"select\"\n          selectProps={{\n            menuPortalTarget: portalTarget,\n            onChange: (event) => {\n              if (!event) {\n                return;\n              }\n              setSelected(event);\n            },\n            onKeyDown: (event) => {\n              // Stop propagation of arrow down to the table, to avoid moving to the next item in the cell\n              if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n                event.stopPropagation();\n              }\n            },\n            onMenuClose: () => {\n              console.info(\n                'Start listening to keyboard events for table navigation',\n              );\n              tableNav.enable();\n            },\n            onMenuOpen: () => {\n              console.info(\n                'Stop listening to keyboard events for table navigation',\n              );\n              tableNav.disable();\n            },\n            options: dropdownOptions,\n            value: selected,\n          }}\n        />\n      </div>\n    );\n  },\n  header: 'actions',\n  id: 'actions',\n});\n\nconst allColumns = (tableNav: DataGridNav) => {\n  const columnHelper = createColumnHelper<TestDataFormat>();\n\n  const commonColumns = [\n    columnHelper.accessor('name', {\n      cell: (info) => info.getValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Name',\n      maxSize: 300,\n      minSize: 180,\n      size: 220,\n    }),\n    columnHelper.accessor('age', {\n      cell: (info) => info.renderValue(),\n      footer: (info) => info.column.id,\n      header: () => 'Age',\n      minSize: 80,\n    }),\n  ];\n\n  return [selectableColumn, ...commonColumns, actionsColumn(tableNav)];\n};\n\nconst Component = () => {\n  const [rowSelection, setRowSelection] = useState({});\n  const ref = useRef<HTMLDivElement>(null);\n  const tableNavRef = useRef<DataGridNav>(null!);\n\n  const table = useReactTable({\n    columnResizeMode: 'onChange',\n    columns: allColumns(tableNavRef.current),\n    data: TABLE_DEMO_DATA,\n    enableSorting: false,\n    getCoreRowModel: getCoreRowModel(),\n    getPaginationRowModel: getPaginationRowModel(),\n    initialState: {\n      pagination: {\n        pageSize: 5,\n      },\n    },\n    onRowSelectionChange: setRowSelection,\n    state: {\n      rowSelection,\n    },\n  });\n\n  return (\n    <>\n      <DataGrid\n        isResizable={false}\n        isKeyboardNavigable={true}\n        styling={{\n          borderStyle: 'all-sides',\n        }}\n        tableNavRef={tableNavRef}\n        tableInstance={table}\n        ref={ref}\n        portalTarget={document.body}\n      />\n    </>\n  );\n};\n\nexport default Component;\n"]}

package/lib/esm/data-grid/stories/datagrid-kitchen-sink.story.js

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