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

package/lib/cjs/dismissible-tag/stories/dismissible-tag-colors.story.js

@@ -27,7 +27,7 @@ const Component = () => {
     const handleRemove = () => {
         console.info('onRemove was called');
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-col n-gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "1", onRemove: handleRemove, children: "Categorical color 1" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "2", onRemove: handleRemove, children: "Categorical color 2" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "3", onRemove: handleRemove, children: "Categorical color 3" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "4", onRemove: handleRemove, children: "Categorical color 4" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "5", onRemove: handleRemove, children: "Categorical color 5" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "6", onRemove: handleRemove, children: "Categorical color 6" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "7", onRemove: handleRemove, children: "Categorical color 7" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "8", onRemove: handleRemove, children: "Categorical color 8" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-token-16", children: [(0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "1", onRemove: handleRemove, children: "Categorical color 1" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "2", onRemove: handleRemove, children: "Categorical color 2" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "3", onRemove: handleRemove, children: "Categorical color 3" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "4", onRemove: handleRemove, children: "Categorical color 4" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "5", onRemove: handleRemove, children: "Categorical color 5" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "6", onRemove: handleRemove, children: "Categorical color 6" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "7", onRemove: handleRemove, children: "Categorical color 7" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { color: "8", onRemove: handleRemove, children: "Categorical color 8" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=dismissible-tag-colors.story.js.map

package/lib/cjs/dismissible-tag/stories/dismissible-tag-colors.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"dismissible-tag-colors.story.js","sourceRoot":"","sources":["../../../../src/dismissible-tag/stories/dismissible-tag-colors.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAkD;AAElD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,kCAAkC,aAC/C,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,IACb,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DismissibleTag } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  const handleRemove = () => {\n    console.info('onRemove was called');\n  };\n\n  return (\n    <div className=\"n-flex n-flex-col n-gap-token-16\">\n      <DismissibleTag color=\"1\" onRemove={handleRemove}>\n        Categorical color 1\n      </DismissibleTag>\n      <DismissibleTag color=\"2\" onRemove={handleRemove}>\n        Categorical color 2\n      </DismissibleTag>\n      <DismissibleTag color=\"3\" onRemove={handleRemove}>\n        Categorical color 3\n      </DismissibleTag>\n      <DismissibleTag color=\"4\" onRemove={handleRemove}>\n        Categorical color 4\n      </DismissibleTag>\n      <DismissibleTag color=\"5\" onRemove={handleRemove}>\n        Categorical color 5\n      </DismissibleTag>\n      <DismissibleTag color=\"6\" onRemove={handleRemove}>\n        Categorical color 6\n      </DismissibleTag>\n      <DismissibleTag color=\"7\" onRemove={handleRemove}>\n        Categorical color 7\n      </DismissibleTag>\n      <DismissibleTag color=\"8\" onRemove={handleRemove}>\n        Categorical color 8\n      </DismissibleTag>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"dismissible-tag-colors.story.js","sourceRoot":"","sources":["../../../../src/dismissible-tag/stories/dismissible-tag-colors.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAkD;AAElD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,4BAA4B,aACzC,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,EACjB,uBAAC,sBAAc,IAAC,KAAK,EAAC,GAAG,EAAC,QAAQ,EAAE,YAAY,oCAE/B,IACb,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DismissibleTag } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  const handleRemove = () => {\n    console.info('onRemove was called');\n  };\n\n  return (\n    <div className=\"flex flex-col gap-token-16\">\n      <DismissibleTag color=\"1\" onRemove={handleRemove}>\n        Categorical color 1\n      </DismissibleTag>\n      <DismissibleTag color=\"2\" onRemove={handleRemove}>\n        Categorical color 2\n      </DismissibleTag>\n      <DismissibleTag color=\"3\" onRemove={handleRemove}>\n        Categorical color 3\n      </DismissibleTag>\n      <DismissibleTag color=\"4\" onRemove={handleRemove}>\n        Categorical color 4\n      </DismissibleTag>\n      <DismissibleTag color=\"5\" onRemove={handleRemove}>\n        Categorical color 5\n      </DismissibleTag>\n      <DismissibleTag color=\"6\" onRemove={handleRemove}>\n        Categorical color 6\n      </DismissibleTag>\n      <DismissibleTag color=\"7\" onRemove={handleRemove}>\n        Categorical color 7\n      </DismissibleTag>\n      <DismissibleTag color=\"8\" onRemove={handleRemove}>\n        Categorical color 8\n      </DismissibleTag>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/dismissible-tag/stories/dismissible-tag-sizes.story.js

@@ -27,7 +27,7 @@ const Component = () => {
     const handleRemove = () => {
         console.info('onRemove was called');
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-flex n-flex-row n-gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { size: "x-small", onRemove: handleRemove, children: "X-Small" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { size: "small", onRemove: handleRemove, children: "Small" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { size: "medium", onRemove: handleRemove, children: "Medium" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { size: "large", onRemove: handleRemove, children: "Large" })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row gap-token-8", children: [(0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { size: "x-small", onRemove: handleRemove, children: "X-Small" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { size: "small", onRemove: handleRemove, children: "Small" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { size: "medium", onRemove: handleRemove, children: "Medium" }), (0, jsx_runtime_1.jsx)(react_1.DismissibleTag, { size: "large", onRemove: handleRemove, children: "Large" })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=dismissible-tag-sizes.story.js.map

package/lib/cjs/dismissible-tag/stories/dismissible-tag-sizes.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"dismissible-tag-sizes.story.js","sourceRoot":"","sources":["../../../../src/dismissible-tag/stories/dismissible-tag-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAkD;AAElD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,iCAAiC,aAC9C,uBAAC,sBAAc,IAAC,IAAI,EAAC,SAAS,EAAC,QAAQ,EAAE,YAAY,wBAEpC,EACjB,uBAAC,sBAAc,IAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,YAAY,sBAElC,EACjB,uBAAC,sBAAc,IAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,YAAY,uBAEnC,EACjB,uBAAC,sBAAc,IAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,YAAY,sBAElC,IACb,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DismissibleTag } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  const handleRemove = () => {\n    console.info('onRemove was called');\n  };\n\n  return (\n    <div className=\"n-flex n-flex-row n-gap-token-8\">\n      <DismissibleTag size=\"x-small\" onRemove={handleRemove}>\n        X-Small\n      </DismissibleTag>\n      <DismissibleTag size=\"small\" onRemove={handleRemove}>\n        Small\n      </DismissibleTag>\n      <DismissibleTag size=\"medium\" onRemove={handleRemove}>\n        Medium\n      </DismissibleTag>\n      <DismissibleTag size=\"large\" onRemove={handleRemove}>\n        Large\n      </DismissibleTag>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"dismissible-tag-sizes.story.js","sourceRoot":"","sources":["../../../../src/dismissible-tag/stories/dismissible-tag-sizes.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAkD;AAElD,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,YAAY,GAAG,GAAG,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,2BAA2B,aACxC,uBAAC,sBAAc,IAAC,IAAI,EAAC,SAAS,EAAC,QAAQ,EAAE,YAAY,wBAEpC,EACjB,uBAAC,sBAAc,IAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,YAAY,sBAElC,EACjB,uBAAC,sBAAc,IAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,YAAY,uBAEnC,EACjB,uBAAC,sBAAc,IAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAE,YAAY,sBAElC,IACb,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { DismissibleTag } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  const handleRemove = () => {\n    console.info('onRemove was called');\n  };\n\n  return (\n    <div className=\"flex flex-row gap-token-8\">\n      <DismissibleTag size=\"x-small\" onRemove={handleRemove}>\n        X-Small\n      </DismissibleTag>\n      <DismissibleTag size=\"small\" onRemove={handleRemove}>\n        Small\n      </DismissibleTag>\n      <DismissibleTag size=\"medium\" onRemove={handleRemove}>\n        Medium\n      </DismissibleTag>\n      <DismissibleTag size=\"large\" onRemove={handleRemove}>\n        Large\n      </DismissibleTag>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/drawer/Drawer.js

@@ -90,7 +90,7 @@ function DrawerResizeHandle({ handleSide, onResizeBy, valueMax, valueMin, valueN
 }
 const DrawerComponent = function DrawerComponent(_a) {
     var _b;
-    var { children, className = '', isExpanded, onExpandedChange, position = 'left', type = 'overlay', isResizeable = false, resizeableProps, isCloseable = true, isPortaled = false, portalProps = {}, closeOnEscape = type === 'modal' ? true : false, closeOnClickOutside = false, ariaLabel, htmlAttributes, style, ref, as } = _a, restProps = __rest(_a, ["children", "className", "isExpanded", "onExpandedChange", "position", "type", "isResizeable", "resizeableProps", "isCloseable", "isPortaled", "portalProps", "closeOnEscape", "closeOnClickOutside", "ariaLabel", "htmlAttributes", "style", "ref", "as"]);
+    var { children, className = '', isExpanded, onExpandedChange, position = 'left', type = 'overlay', isResizeable = false, resizeableProps, isCloseable = true, isPortaled = false, portalProps = {}, shouldCloseOnEscape = type === 'push' ? false : true, shouldCloseOnClickOutside = false, ariaLabel, htmlAttributes, style, ref, as } = _a, restProps = __rest(_a, ["children", "className", "isExpanded", "onExpandedChange", "position", "type", "isResizeable", "resizeableProps", "isCloseable", "isPortaled", "portalProps", "shouldCloseOnEscape", "shouldCloseOnClickOutside", "ariaLabel", "htmlAttributes", "style", "ref", "as"]);
     const resizableRef = (0, react_2.useRef)(null);
     const [resizeWidth, setResizeWidth] = (0, react_2.useState)(0);
     if ((type === 'modal' || type === 'overlay') && !ariaLabel) {
@@ -106,8 +106,8 @@ const DrawerComponent = function DrawerComponent(_a) {
         (type === 'overlay' && isPortaled);
     const dismiss = (0, react_1.useDismiss)(context, {
         enabled: shouldUseDismiss,
-        escapeKey: closeOnEscape && type !== 'push',
-        outsidePress: closeOnClickOutside && type !== 'push',
+        escapeKey: shouldCloseOnEscape && type !== 'push',
+        outsidePress: shouldCloseOnClickOutside && type !== 'push',
     });
     const role = (0, react_1.useRole)(context, {
         enabled: type === 'modal' || type === 'overlay',
@@ -196,12 +196,13 @@ const DrawerComponent = function DrawerComponent(_a) {
 };
 DrawerComponent.displayName = 'Drawer';
 const DrawerHeader = (_a) => {
-    var { children, className = '', htmlAttributes } = _a, restProps = __rest(_a, ["children", "className", "htmlAttributes"]);
+    var { as, children, className = '', style, htmlAttributes, ref } = _a, restProps = __rest(_a, ["as", "children", "className", "style", "htmlAttributes", "ref"]);
     const classes = (0, classnames_1.default)('ndl-drawer-header', className);
+    const Component = as !== null && as !== void 0 ? as : 'div';
     if (typeof children === 'string' || typeof children === 'number') {
-        return ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ className: classes, variant: "title-3" }, restProps, htmlAttributes, { children: children })));
+        return ((0, jsx_runtime_1.jsx)(typography_1.Typography, Object.assign({ as: Component, className: classes, ref: ref, style: style, variant: "title-3" }, restProps, htmlAttributes, { children: children })));
     }
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes }, restProps, htmlAttributes, { children: children })));
+    return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ className: classes, ref: ref, style: style }, restProps, htmlAttributes, { children: children })));
 };
 const DrawerActions = (_a) => {
     var { children, className = '', htmlAttributes } = _a, restProps = __rest(_a, ["children", "className", "htmlAttributes"]);

package/lib/cjs/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/drawer/Drawer.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 */\nimport {\n  FloatingFocusManager,\n  FloatingOverlay,\n  FloatingPortal,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useMergeRefs,\n  useRole,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { Resizable, type ResizableProps } from 're-resizable';\nimport type React from 'react';\nimport {\n  type ComponentProps,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { XMarkIconOutline } from '../icons/generated/heroIcons/XMarkIconOutline';\nimport { Typography } from '../typography';\n\ntype DrawerPosition = 'left' | 'right';\n\ntype DrawerType = 'overlay' | 'push' | 'modal';\n\n/**\n * @remarks\n * Where `ResizableProps` is the props for the `re-resizable` library. For more information, see the [re-resizable documentation](https://github.com/bokuweb/re-resizable).\n *\n * @remarks\n * Where `FloatingPortalProps` is the props for the `@floating-ui/react` library. For more information, see the [FloatingPortal documentation](https://floating-ui.com/docs/floatingportal).\n */\ntype DrawerProps = {\n  /** Controls whether the drawer is open (expanded) or closed (collapsed). */\n  isExpanded: boolean;\n\n  /** Callback fired when the drawer's expanded state changes (close button, Escape, click outside, or programmatic change). */\n  onExpandedChange?: (expanded: boolean) => void;\n\n  /** Position where the drawer appears on screen. By default, it appears from the left. */\n  position?: DrawerPosition;\n\n  /** How the drawer affects the layout of sibling content. By default, it overlays content. */\n  type?: DrawerType;\n\n  /** Enables horizontal resizing of the drawer, by default it is not resizable. */\n  isResizeable?: boolean;\n\n  /** To use this prop the isResizeable prop must be set to true. For overriding the third party library props: https://github.com/bokuweb/re-resizable\n   * The property enable has default values set for bottom, bottomLeft etc based on the position prop.\n   */\n  resizeableProps?: ResizableProps;\n\n  /** Whether a close button (X) is displayed in the drawer. */\n  isCloseable?: boolean;\n\n  /** Whether to portal the content. Only applies when type is \"overlay\". Type \"modal\" is always portaled. */\n  isPortaled?: boolean;\n\n  // TODO v5: this should maybe be default on portaled in the future. also, rename prop.\n  /**\n   * Whether pressing Escape closes the drawer. Should be set to true for overlay drawers.\n   * - When type is \"modal\", this defaults to true.\n   * - When type is \"overlay\", this defaults to false.\n   * - When type is \"push\", no effect.\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  closeOnEscape?: boolean;\n\n  // TODO v5: this should maybe be default on overlay in the future. also, rename prop.\n  /**\n   * When type is \"overlay\", whether clicking outside the drawer closes it. Should be set to true for overlay drawers.\n   * - When type is \"overlay\" or \"modal\", this defaults to false.\n   * - When type is \"push\", no effect.\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  closeOnClickOutside?: boolean;\n\n  // TODO v5: remove this prop. unless something changes.\n  /**\n   *  @deprecated overlay are now focus trapped by default, this prop has no effect anymore.\n   */\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  closeOnFocusOut?: boolean;\n\n  /** The content to display within the drawer. */\n  children: React.ReactNode;\n\n  /**\n   * Props to pass to the portal from `@floating-ui/react` FloatingPortal\n   * Only applies when type is \"overlay\" and isPortaled is true, or if type is \"modal\".\n   * @see https://floating-ui.com/docs/floatingportal\n   */\n  portalProps?: ComponentProps<typeof FloatingPortal>;\n} & (\n  | {\n      type: 'modal';\n      /** The aria-label to apply to the drawer. Required for accessibility when type is \"modal\" or \"overlay\". */\n      ariaLabel: string;\n    }\n  | {\n      type?: 'push' | 'overlay';\n      // TODO v5: aria label should be required when type is \"overlay\" too.\n      ariaLabel?: string;\n    }\n);\n\nconst KEYBOARD_RESIZE_STEP_PX = 16;\n\nfunction parsePixelSize(\n  value: string | number | undefined,\n): number | undefined {\n  if (value === undefined) {\n    return undefined;\n  }\n  if (typeof value === 'number') {\n    return value;\n  }\n  if (/^\\d+(\\.\\d+)?px$/i.test(value)) {\n    return parseFloat(value);\n  }\n  return undefined;\n}\n\nfunction parsePercentage(\n  value: string | number | undefined,\n  referenceWidth: number | undefined,\n): number | undefined {\n  if (\n    typeof value !== 'string' ||\n    !value.endsWith('%') ||\n    referenceWidth === undefined\n  ) {\n    return undefined;\n  }\n  const percent = parseFloat(value);\n  return Number.isNaN(percent) ? undefined : (percent / 100) * referenceWidth;\n}\n\ntype DrawerResizeHandleProps = {\n  /** Which edge this handle resizes (right = drawer’s right edge, left = drawer’s left edge). */\n  handleSide: 'left' | 'right';\n  /** Called with a pixel delta to apply to the drawer width (positive = wider). */\n  onResizeBy: (delta: number) => void;\n  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n  /** Current width in pixels (for aria-valuenow). */\n  valueNow?: number;\n  /** Minimum width in pixels (for aria-valuemin). */\n  valueMin?: number;\n  /** Maximum width in pixels (for aria-valuemax). */\n  valueMax?: number;\n};\n\nfunction DrawerResizeHandle({\n  handleSide,\n  onResizeBy,\n  valueMax,\n  valueMin,\n  valueNow,\n}: DrawerResizeHandleProps) {\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const isArrowKey =\n        event.key === 'ArrowLeft' || event.key === 'ArrowRight';\n      if (isArrowKey) {\n        event.preventDefault();\n        const delta =\n          handleSide === 'right'\n            ? event.key === 'ArrowRight'\n              ? KEYBOARD_RESIZE_STEP_PX\n              : -KEYBOARD_RESIZE_STEP_PX\n            : event.key === 'ArrowLeft'\n              ? KEYBOARD_RESIZE_STEP_PX\n              : -KEYBOARD_RESIZE_STEP_PX;\n        onResizeBy(delta);\n      }\n    },\n    [handleSide, onResizeBy],\n  );\n\n  return (\n    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Resize handle is focusable for keyboard resize. */\n    <div\n      aria-label={`Resize drawer with arrow keys. Handle on ${handleSide}.`}\n      aria-orientation=\"vertical\"\n      aria-valuemax={valueMax}\n      aria-valuemin={valueMin}\n      aria-valuenow={valueNow ?? 0}\n      aria-valuetext={`drawer width ${valueNow ?? 0}px`}\n      className=\"ndl-drawer-resize-handle\"\n      data-drawer-handle={handleSide}\n      onKeyDown={handleKeyDown}\n      role=\"separator\"\n      style={{ height: '100%', width: '100%' }}\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- Resize handle is focusable for keyboard resize.\n      tabIndex={0}\n    />\n  );\n}\n\nconst DrawerComponent = function DrawerComponent<\n  T extends React.ElementType = 'div',\n>({\n  children,\n  className = '',\n  isExpanded,\n  onExpandedChange,\n  position = 'left',\n  type = 'overlay',\n  isResizeable = false,\n  resizeableProps,\n  isCloseable = true,\n  isPortaled = false,\n  portalProps = {},\n  closeOnEscape = type === 'modal' ? true : false,\n  closeOnClickOutside = false,\n  ariaLabel,\n  htmlAttributes,\n  style,\n  ref,\n  as,\n  ...restProps\n}: PolymorphicCommonProps<T, DrawerProps>) {\n  const resizableRef = useRef<Resizable | null>(null);\n  const [resizeWidth, setResizeWidth] = useState<number>(0);\n\n  if ((type === 'modal' || type === 'overlay') && !ariaLabel) {\n    needleWarningMessage(\n      'A Drawer should have an aria-label when type is \"modal\" or \"overlay\" to be accessible.',\n    );\n  }\n\n  const { refs, context } = useFloating({\n    onOpenChange: onExpandedChange,\n    open: isExpanded,\n  });\n\n  /** Dismiss (escape + click outside) applies to portaled overlay and to non-portaled overlay. */\n  const shouldUseDismiss =\n    type === 'modal' ||\n    (type === 'overlay' && !isPortaled && isExpanded) ||\n    (type === 'overlay' && isPortaled);\n\n  const dismiss = useDismiss(context, {\n    enabled: shouldUseDismiss,\n    escapeKey: closeOnEscape && type !== 'push',\n    outsidePress: closeOnClickOutside && type !== 'push',\n  });\n  const role = useRole(context, {\n    enabled: type === 'modal' || type === 'overlay',\n    role: 'dialog',\n  });\n  const { getFloatingProps } = useInteractions([dismiss, role]);\n\n  const resizableMergedRef = useMergeRefs([resizableRef, ref]);\n\n  const handleResizeBy = useCallback(\n    (delta: number) => {\n      if (!resizableRef.current) {\n        return;\n      }\n      const current = resizableRef.current.size;\n      const parentWidth =\n        resizableRef.current.resizable?.parentElement?.offsetWidth;\n      const min =\n        parsePixelSize(resizeableProps?.minWidth) ??\n        parsePercentage(resizeableProps?.minWidth, parentWidth);\n      const max =\n        parsePixelSize(resizeableProps?.maxWidth) ??\n        parsePercentage(resizeableProps?.maxWidth, parentWidth);\n      const newWidth = Math.max(\n        min ?? 0,\n        Math.min(max ?? Number.POSITIVE_INFINITY, current.width + delta),\n      );\n      resizableRef.current.updateSize({\n        height: '100%',\n        width: newWidth,\n      });\n      setResizeWidth(newWidth);\n    },\n    [resizeableProps?.minWidth, resizeableProps?.maxWidth],\n  );\n\n  const handleResize = useCallback(\n    (\n      event: MouseEvent | TouchEvent,\n      direction: Parameters<NonNullable<ResizableProps['onResize']>>[1],\n      elementRef: HTMLElement,\n      delta: { width: number; height: number },\n    ) => {\n      setResizeWidth(elementRef.offsetWidth);\n      resizeableProps?.onResize?.(event, direction, elementRef, delta);\n    },\n    [resizeableProps],\n  );\n\n  useEffect(() => {\n    if (!isResizeable || !resizableRef.current) {\n      return;\n    }\n    const width = resizableRef.current.size.width;\n    if (width > 0) {\n      setResizeWidth(width);\n    }\n  }, [isResizeable]);\n\n  const classes = classNames('ndl-drawer', className, {\n    'ndl-drawer-expanded': isExpanded,\n    'ndl-drawer-left': position === 'left',\n    'ndl-drawer-modal': type === 'modal',\n    'ndl-drawer-overlay': type === 'overlay',\n    'ndl-drawer-portaled': isPortaled && type === 'overlay',\n    'ndl-drawer-push': type === 'push',\n    'ndl-drawer-right': position === 'right',\n  });\n\n  const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';\n  const Component = as ?? 'div';\n\n  const handleClose = useCallback(() => {\n    onExpandedChange?.(false);\n  }, [onExpandedChange]);\n\n  const closeButton = useMemo(\n    () =>\n      isCloseable || type === 'modal' ? (\n        <CleanIconButton\n          className=\"ndl-drawer-close-button\"\n          onClick={handleClose}\n          description={null}\n          size=\"medium\"\n          htmlAttributes={{\n            'aria-label': 'Close',\n          }}\n        >\n          <XMarkIconOutline />\n        </CleanIconButton>\n      ) : null,\n    [handleClose, isCloseable, type],\n  );\n\n  const resizableContent = (\n    <Resizable\n      as={Component}\n      defaultSize={{\n        height: '100%',\n        width: 'auto',\n      }}\n      {...resizeableProps}\n      className={classes}\n      style={{\n        position: resizableStylePosition,\n        ...style,\n        ...resizeableProps?.style,\n      }}\n      boundsByDirection={true}\n      bounds={resizeableProps?.bounds ?? 'parent'}\n      handleStyles={{\n        /*\n         * Small offset so the handle is easier to hit when the drawer content is scrollable.\n         */\n        ...(position === 'left' && { right: { right: '-8px' } }),\n        ...(position === 'right' && { left: { left: '-8px' } }),\n      }}\n      enable={{\n        bottom: false,\n        bottomLeft: false,\n        bottomRight: false,\n        left: position === 'right',\n        right: position === 'left',\n        top: false,\n        topLeft: false,\n        topRight: false,\n      }}\n      handleComponent={\n        position === 'left'\n          ? {\n              right: (\n                <DrawerResizeHandle\n                  handleSide=\"right\"\n                  onResizeBy={handleResizeBy}\n                  valueMax={parsePixelSize(resizeableProps?.maxWidth)}\n                  valueMin={parsePixelSize(resizeableProps?.minWidth)}\n                  valueNow={resizeWidth}\n                />\n              ),\n            }\n          : {\n              left: (\n                <DrawerResizeHandle\n                  handleSide=\"left\"\n                  onResizeBy={handleResizeBy}\n                  valueMax={parsePixelSize(resizeableProps?.maxWidth)}\n                  valueMin={parsePixelSize(resizeableProps?.minWidth)}\n                  valueNow={resizeWidth}\n                />\n              ),\n            }\n      }\n      onResize={handleResize}\n      ref={resizableMergedRef}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {closeButton}\n      {children}\n    </Resizable>\n  );\n\n  const regularContent = (\n    <Component\n      className={classNames(classes)}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {closeButton}\n      {children}\n    </Component>\n  );\n\n  /** what content to render */\n  const content = isResizeable ? resizableContent : regularContent;\n\n  // const floatingRefs = useMergeRefs([refs.setFloating, refs.setReference]);\n\n  /** modal behavior */\n  if (type === 'modal' && isExpanded) {\n    return (\n      <FloatingPortal {...portalProps}>\n        <FloatingOverlay\n          className=\"ndl-drawer-overlay-root\"\n          lockScroll={true}\n        />\n        <FloatingFocusManager context={context} modal={true} returnFocus={true}>\n          <div\n            ref={refs.setFloating}\n            {...getFloatingProps()}\n            aria-label={ariaLabel}\n            aria-modal=\"true\"\n          >\n            {content}\n          </div>\n        </FloatingFocusManager>\n      </FloatingPortal>\n    );\n  }\n\n  if (type === 'overlay' && isExpanded) {\n    return (\n      <ConditionalWrap\n        shouldWrap={isPortaled}\n        wrap={(wrapChildren) => (\n          <FloatingPortal preserveTabOrder={true} {...portalProps}>\n            {wrapChildren}\n          </FloatingPortal>\n        )}\n      >\n        <FloatingFocusManager\n          disabled={!isExpanded}\n          context={context}\n          modal={true}\n          returnFocus={true}\n        >\n          <div\n            ref={refs.setFloating}\n            {...getFloatingProps()}\n            aria-label={ariaLabel}\n            aria-modal=\"true\"\n          >\n            {content}\n          </div>\n        </FloatingFocusManager>\n      </ConditionalWrap>\n    );\n  }\n\n  return content;\n};\n\nDrawerComponent.displayName = 'Drawer';\n\ntype DrawerHeaderProps = {\n  children: React.ReactNode;\n  className?: string;\n  // TODO v5: fix the typing on the Drawer subcomponents to use the common props type. Also, this is not an h5 haha. Should be polymorphic I guess, maybe default to h2 as we've recommended.\n  htmlAttributes?: HtmlAttributes<'h5'>;\n};\n\nconst DrawerHeader = ({\n  children,\n  className = '',\n  htmlAttributes,\n  ...restProps\n}: DrawerHeaderProps) => {\n  const classes = classNames('ndl-drawer-header', className);\n\n  if (typeof children === 'string' || typeof children === 'number') {\n    return (\n      <Typography\n        className={classes}\n        variant=\"title-3\"\n        {...restProps}\n        {...htmlAttributes}\n      >\n        {children}\n      </Typography>\n    );\n  }\n\n  return (\n    <div className={classes} {...restProps} {...htmlAttributes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerActionsProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerActions = ({\n  children,\n  className = '',\n  htmlAttributes,\n  ...restProps\n}: DrawerActionsProps) => {\n  const classes = classNames('ndl-drawer-actions', className);\n\n  return (\n    <div className={classes} {...restProps} {...htmlAttributes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerBodyProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerBody = ({\n  children,\n  className = '',\n  htmlAttributes,\n  ...restProps\n}: DrawerBodyProps) => {\n  const classes = classNames('ndl-drawer-body', className);\n\n  return (\n    <div className=\"ndl-drawer-body-wrapper\">\n      <div className={classes} {...restProps} {...htmlAttributes}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nconst Drawer = Object.assign(DrawerComponent, {\n  Actions: DrawerActions,\n  Body: DrawerBody,\n  Header: DrawerHeader,\n});\n\nexport { Drawer };\n"]}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/drawer/Drawer.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 */\nimport {\n  FloatingFocusManager,\n  FloatingOverlay,\n  FloatingPortal,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useMergeRefs,\n  useRole,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { Resizable, type ResizableProps } from 're-resizable';\nimport type React from 'react';\nimport {\n  type ComponentProps,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { XMarkIconOutline } from '../icons/generated/heroIcons/XMarkIconOutline';\nimport { Typography } from '../typography';\n\ntype DrawerPosition = 'left' | 'right';\n\ntype DrawerType = 'overlay' | 'push' | 'modal';\n\n/**\n * @remarks\n * Where `ResizableProps` is the props for the `re-resizable` library. For more information, see the [re-resizable documentation](https://github.com/bokuweb/re-resizable).\n *\n * @remarks\n * Where `FloatingPortalProps` is the props for the `@floating-ui/react` library. For more information, see the [FloatingPortal documentation](https://floating-ui.com/docs/floatingportal).\n */\ntype DrawerProps = {\n  /** Controls whether the drawer is open (expanded) or closed (collapsed). */\n  isExpanded: boolean;\n\n  /** Callback fired when the drawer's expanded state changes (close button, Escape, click outside, or programmatic change). */\n  onExpandedChange?: (expanded: boolean) => void;\n\n  /** Position where the drawer appears on screen. By default, it appears from the left. */\n  position?: DrawerPosition;\n\n  /** How the drawer affects the layout of sibling content. By default, it overlays content. */\n  type?: DrawerType;\n\n  /** Enables horizontal resizing of the drawer, by default it is not resizable. */\n  isResizeable?: boolean;\n\n  /** To use this prop the isResizeable prop must be set to true. For overriding the third party library props: https://github.com/bokuweb/re-resizable\n   * The property enable has default values set for bottom, bottomLeft etc based on the position prop.\n   */\n  resizeableProps?: ResizableProps;\n\n  /** Whether a close button (X) is displayed in the drawer. */\n  isCloseable?: boolean;\n\n  /** Whether to portal the content. Only applies when type is \"overlay\". Type \"modal\" is always portaled. */\n  isPortaled?: boolean;\n\n  /**\n   * Whether pressing Escape closes the drawer. Should be set to true for overlay drawers.\n   * - When type is \"modal\", this defaults to true.\n   * - When type is \"overlay\", this defaults to true.\n   * - When type is \"push\", no effect.\n   */\n  shouldCloseOnEscape?: boolean;\n\n  // TODO: this should maybe be default on overlay in the future.\n  /**\n   * When type is \"overlay\", whether clicking outside the drawer closes it. Should be set to true for overlay drawers.\n   * - When type is \"overlay\" or \"modal\", this defaults to false.\n   * - When type is \"push\", no effect.\n   */\n  shouldCloseOnClickOutside?: boolean;\n\n  /** The content to display within the drawer. */\n  children: React.ReactNode;\n\n  /**\n   * Props to pass to the portal from `@floating-ui/react` FloatingPortal\n   * Only applies when type is \"overlay\" and isPortaled is true, or if type is \"modal\".\n   * @see https://floating-ui.com/docs/floatingportal\n   */\n  portalProps?: ComponentProps<typeof FloatingPortal>;\n} & (\n  | {\n      // `type` is optional on this branch so that omitting it types as 'overlay' which matches the default value and requires `ariaLabel`.\n      type?: 'modal' | 'overlay';\n      /** The aria-label to apply to the drawer. Required for accessibility when type is \"modal\" or \"overlay\". */\n      ariaLabel: string;\n    }\n  | {\n      type: 'push';\n      ariaLabel?: string;\n    }\n);\n\nconst KEYBOARD_RESIZE_STEP_PX = 16;\n\nfunction parsePixelSize(\n  value: string | number | undefined,\n): number | undefined {\n  if (value === undefined) {\n    return undefined;\n  }\n  if (typeof value === 'number') {\n    return value;\n  }\n  if (/^\\d+(\\.\\d+)?px$/i.test(value)) {\n    return parseFloat(value);\n  }\n  return undefined;\n}\n\nfunction parsePercentage(\n  value: string | number | undefined,\n  referenceWidth: number | undefined,\n): number | undefined {\n  if (\n    typeof value !== 'string' ||\n    !value.endsWith('%') ||\n    referenceWidth === undefined\n  ) {\n    return undefined;\n  }\n  const percent = parseFloat(value);\n  return Number.isNaN(percent) ? undefined : (percent / 100) * referenceWidth;\n}\n\ntype DrawerResizeHandleProps = {\n  /** Which edge this handle resizes (right = drawer’s right edge, left = drawer’s left edge). */\n  handleSide: 'left' | 'right';\n  /** Called with a pixel delta to apply to the drawer width (positive = wider). */\n  onResizeBy: (delta: number) => void;\n  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n  /** Current width in pixels (for aria-valuenow). */\n  valueNow?: number;\n  /** Minimum width in pixels (for aria-valuemin). */\n  valueMin?: number;\n  /** Maximum width in pixels (for aria-valuemax). */\n  valueMax?: number;\n};\n\nfunction DrawerResizeHandle({\n  handleSide,\n  onResizeBy,\n  valueMax,\n  valueMin,\n  valueNow,\n}: DrawerResizeHandleProps) {\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const isArrowKey =\n        event.key === 'ArrowLeft' || event.key === 'ArrowRight';\n      if (isArrowKey) {\n        event.preventDefault();\n        const delta =\n          handleSide === 'right'\n            ? event.key === 'ArrowRight'\n              ? KEYBOARD_RESIZE_STEP_PX\n              : -KEYBOARD_RESIZE_STEP_PX\n            : event.key === 'ArrowLeft'\n              ? KEYBOARD_RESIZE_STEP_PX\n              : -KEYBOARD_RESIZE_STEP_PX;\n        onResizeBy(delta);\n      }\n    },\n    [handleSide, onResizeBy],\n  );\n\n  return (\n    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Resize handle is focusable for keyboard resize. */\n    <div\n      aria-label={`Resize drawer with arrow keys. Handle on ${handleSide}.`}\n      aria-orientation=\"vertical\"\n      aria-valuemax={valueMax}\n      aria-valuemin={valueMin}\n      aria-valuenow={valueNow ?? 0}\n      aria-valuetext={`drawer width ${valueNow ?? 0}px`}\n      className=\"ndl-drawer-resize-handle\"\n      data-drawer-handle={handleSide}\n      onKeyDown={handleKeyDown}\n      role=\"separator\"\n      style={{ height: '100%', width: '100%' }}\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- Resize handle is focusable for keyboard resize.\n      tabIndex={0}\n    />\n  );\n}\n\nconst DrawerComponent = function DrawerComponent<\n  T extends React.ElementType = 'div',\n>({\n  children,\n  className = '',\n  isExpanded,\n  onExpandedChange,\n  position = 'left',\n  type = 'overlay',\n  isResizeable = false,\n  resizeableProps,\n  isCloseable = true,\n  isPortaled = false,\n  portalProps = {},\n  shouldCloseOnEscape = type === 'push' ? false : true,\n  shouldCloseOnClickOutside = false,\n  ariaLabel,\n  htmlAttributes,\n  style,\n  ref,\n  as,\n  ...restProps\n}: PolymorphicCommonProps<T, DrawerProps>) {\n  const resizableRef = useRef<Resizable | null>(null);\n  const [resizeWidth, setResizeWidth] = useState<number>(0);\n\n  if ((type === 'modal' || type === 'overlay') && !ariaLabel) {\n    needleWarningMessage(\n      'A Drawer should have an aria-label when type is \"modal\" or \"overlay\" to be accessible.',\n    );\n  }\n\n  const { refs, context } = useFloating({\n    onOpenChange: onExpandedChange,\n    open: isExpanded,\n  });\n\n  /** Dismiss (escape + click outside) applies to portaled overlay and to non-portaled overlay. */\n  const shouldUseDismiss =\n    type === 'modal' ||\n    (type === 'overlay' && !isPortaled && isExpanded) ||\n    (type === 'overlay' && isPortaled);\n\n  const dismiss = useDismiss(context, {\n    enabled: shouldUseDismiss,\n    escapeKey: shouldCloseOnEscape && type !== 'push',\n    outsidePress: shouldCloseOnClickOutside && type !== 'push',\n  });\n  const role = useRole(context, {\n    enabled: type === 'modal' || type === 'overlay',\n    role: 'dialog',\n  });\n  const { getFloatingProps } = useInteractions([dismiss, role]);\n\n  const resizableMergedRef = useMergeRefs([resizableRef, ref]);\n\n  const handleResizeBy = useCallback(\n    (delta: number) => {\n      if (!resizableRef.current) {\n        return;\n      }\n      const current = resizableRef.current.size;\n      const parentWidth =\n        resizableRef.current.resizable?.parentElement?.offsetWidth;\n      const min =\n        parsePixelSize(resizeableProps?.minWidth) ??\n        parsePercentage(resizeableProps?.minWidth, parentWidth);\n      const max =\n        parsePixelSize(resizeableProps?.maxWidth) ??\n        parsePercentage(resizeableProps?.maxWidth, parentWidth);\n      const newWidth = Math.max(\n        min ?? 0,\n        Math.min(max ?? Number.POSITIVE_INFINITY, current.width + delta),\n      );\n      resizableRef.current.updateSize({\n        height: '100%',\n        width: newWidth,\n      });\n      setResizeWidth(newWidth);\n    },\n    [resizeableProps?.minWidth, resizeableProps?.maxWidth],\n  );\n\n  const handleResize = useCallback(\n    (\n      event: MouseEvent | TouchEvent,\n      direction: Parameters<NonNullable<ResizableProps['onResize']>>[1],\n      elementRef: HTMLElement,\n      delta: { width: number; height: number },\n    ) => {\n      setResizeWidth(elementRef.offsetWidth);\n      resizeableProps?.onResize?.(event, direction, elementRef, delta);\n    },\n    [resizeableProps],\n  );\n\n  useEffect(() => {\n    if (!isResizeable || !resizableRef.current) {\n      return;\n    }\n    const width = resizableRef.current.size.width;\n    if (width > 0) {\n      setResizeWidth(width);\n    }\n  }, [isResizeable]);\n\n  const classes = classNames('ndl-drawer', className, {\n    'ndl-drawer-expanded': isExpanded,\n    'ndl-drawer-left': position === 'left',\n    'ndl-drawer-modal': type === 'modal',\n    'ndl-drawer-overlay': type === 'overlay',\n    'ndl-drawer-portaled': isPortaled && type === 'overlay',\n    'ndl-drawer-push': type === 'push',\n    'ndl-drawer-right': position === 'right',\n  });\n\n  const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';\n  const Component = as ?? 'div';\n\n  const handleClose = useCallback(() => {\n    onExpandedChange?.(false);\n  }, [onExpandedChange]);\n\n  const closeButton = useMemo(\n    () =>\n      isCloseable || type === 'modal' ? (\n        <CleanIconButton\n          className=\"ndl-drawer-close-button\"\n          onClick={handleClose}\n          description={null}\n          size=\"medium\"\n          htmlAttributes={{\n            'aria-label': 'Close',\n          }}\n        >\n          <XMarkIconOutline />\n        </CleanIconButton>\n      ) : null,\n    [handleClose, isCloseable, type],\n  );\n\n  const resizableContent = (\n    <Resizable\n      as={Component}\n      defaultSize={{\n        height: '100%',\n        width: 'auto',\n      }}\n      {...resizeableProps}\n      className={classes}\n      style={{\n        position: resizableStylePosition,\n        ...style,\n        ...resizeableProps?.style,\n      }}\n      boundsByDirection={true}\n      bounds={resizeableProps?.bounds ?? 'parent'}\n      handleStyles={{\n        /*\n         * Small offset so the handle is easier to hit when the drawer content is scrollable.\n         */\n        ...(position === 'left' && { right: { right: '-8px' } }),\n        ...(position === 'right' && { left: { left: '-8px' } }),\n      }}\n      enable={{\n        bottom: false,\n        bottomLeft: false,\n        bottomRight: false,\n        left: position === 'right',\n        right: position === 'left',\n        top: false,\n        topLeft: false,\n        topRight: false,\n      }}\n      handleComponent={\n        position === 'left'\n          ? {\n              right: (\n                <DrawerResizeHandle\n                  handleSide=\"right\"\n                  onResizeBy={handleResizeBy}\n                  valueMax={parsePixelSize(resizeableProps?.maxWidth)}\n                  valueMin={parsePixelSize(resizeableProps?.minWidth)}\n                  valueNow={resizeWidth}\n                />\n              ),\n            }\n          : {\n              left: (\n                <DrawerResizeHandle\n                  handleSide=\"left\"\n                  onResizeBy={handleResizeBy}\n                  valueMax={parsePixelSize(resizeableProps?.maxWidth)}\n                  valueMin={parsePixelSize(resizeableProps?.minWidth)}\n                  valueNow={resizeWidth}\n                />\n              ),\n            }\n      }\n      onResize={handleResize}\n      ref={resizableMergedRef}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {closeButton}\n      {children}\n    </Resizable>\n  );\n\n  const regularContent = (\n    <Component\n      className={classNames(classes)}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {closeButton}\n      {children}\n    </Component>\n  );\n\n  /** what content to render */\n  const content = isResizeable ? resizableContent : regularContent;\n\n  // const floatingRefs = useMergeRefs([refs.setFloating, refs.setReference]);\n\n  /** modal behavior */\n  if (type === 'modal' && isExpanded) {\n    return (\n      <FloatingPortal {...portalProps}>\n        <FloatingOverlay\n          className=\"ndl-drawer-overlay-root\"\n          lockScroll={true}\n        />\n        <FloatingFocusManager context={context} modal={true} returnFocus={true}>\n          <div\n            ref={refs.setFloating}\n            {...getFloatingProps()}\n            aria-label={ariaLabel}\n            aria-modal=\"true\"\n          >\n            {content}\n          </div>\n        </FloatingFocusManager>\n      </FloatingPortal>\n    );\n  }\n\n  if (type === 'overlay' && isExpanded) {\n    return (\n      <ConditionalWrap\n        shouldWrap={isPortaled}\n        wrap={(wrapChildren) => (\n          <FloatingPortal preserveTabOrder={true} {...portalProps}>\n            {wrapChildren}\n          </FloatingPortal>\n        )}\n      >\n        <FloatingFocusManager\n          disabled={!isExpanded}\n          context={context}\n          modal={true}\n          returnFocus={true}\n        >\n          <div\n            ref={refs.setFloating}\n            {...getFloatingProps()}\n            aria-label={ariaLabel}\n            aria-modal=\"true\"\n          >\n            {content}\n          </div>\n        </FloatingFocusManager>\n      </ConditionalWrap>\n    );\n  }\n\n  return content;\n};\n\nDrawerComponent.displayName = 'Drawer';\n\ntype DrawerHeaderProps = {\n  children: React.ReactNode;\n};\n\nconst DrawerHeader = <T extends React.ElementType = 'div'>({\n  as,\n  children,\n  className = '',\n  style,\n  htmlAttributes,\n  ref,\n  ...restProps\n}: PolymorphicCommonProps<T, DrawerHeaderProps>) => {\n  const classes = classNames('ndl-drawer-header', className);\n  const Component: React.ElementType = as ?? 'div';\n\n  if (typeof children === 'string' || typeof children === 'number') {\n    return (\n      <Typography\n        as={Component}\n        className={classes}\n        ref={ref}\n        style={style}\n        variant=\"title-3\"\n        {...restProps}\n        {...htmlAttributes}\n      >\n        {children}\n      </Typography>\n    );\n  }\n\n  return (\n    <Component\n      className={classes}\n      ref={ref}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {children}\n    </Component>\n  );\n};\n\ntype DrawerActionsProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerActions = ({\n  children,\n  className = '',\n  htmlAttributes,\n  ...restProps\n}: DrawerActionsProps) => {\n  const classes = classNames('ndl-drawer-actions', className);\n\n  return (\n    <div className={classes} {...restProps} {...htmlAttributes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerBodyProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerBody = ({\n  children,\n  className = '',\n  htmlAttributes,\n  ...restProps\n}: DrawerBodyProps) => {\n  const classes = classNames('ndl-drawer-body', className);\n\n  return (\n    <div className=\"ndl-drawer-body-wrapper\">\n      <div className={classes} {...restProps} {...htmlAttributes}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nconst Drawer = Object.assign(DrawerComponent, {\n  Actions: DrawerActions,\n  Body: DrawerBody,\n  Header: DrawerHeader,\n});\n\nexport { Drawer };\n"]}

package/lib/cjs/drawer/stories/drawer-full.story.js

@@ -26,10 +26,10 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
     const [isExpanded, setIsExpanded] = (0, react_2.useState)(true);
-    const Placeholder = () => ((0, jsx_runtime_1.jsx)("div", { className: "w-full n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16", children: (0, jsx_runtime_1.jsx)("div", { className: "n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
+    const Placeholder = () => ((0, jsx_runtime_1.jsx)("div", { className: "w-full size-full flex flex-col items-center justify-center rounded-md p-token-16", children: (0, jsx_runtime_1.jsx)("div", { className: "border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
                     'aria-expanded': isExpanded,
                 }, children: "Press to show the Drawer" }) }) }));
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), isResizeable: true, resizeableProps: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), isResizeable: true, resizeableProps: {
                     maxWidth: '400px',
                     minWidth: '300px',
                 }, isCloseable: true, isPortaled: false, children: [(0, jsx_runtime_1.jsx)(react_1.Drawer.Header, { children: "Drawer Header" }), (0, jsx_runtime_1.jsxs)(react_1.Drawer.Body, { children: [(0, jsx_runtime_1.jsx)(react_1.TextInput, { showRequiredOrOptionalLabel: true, moreInformationText: "some information", label: "Label", isDisabled: false, isReadOnly: false, helpText: "Friendly text", isFluid: true }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Some input", value: "something" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.Checkbox, { label: "Checkbox label" }), (0, jsx_runtime_1.jsx)("br", {}), "Some example of something.", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Some input", isDisabled: true, value: "something" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.TextInput, { showRequiredOrOptionalLabel: true, moreInformationText: "some information", label: "Label", isDisabled: false, isReadOnly: false, helpText: "Friendly text", isFluid: true }), (0, jsx_runtime_1.jsx)("br", {}), "Some example of something.", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Some input", value: "something" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.Checkbox, { label: "Checkbox label" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Some input", value: "something" })] }), (0, jsx_runtime_1.jsx)(react_1.Drawer.Actions, { children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), (0, jsx_runtime_1.jsx)(Placeholder, {})] }));

package/lib/cjs/drawer/stories/drawer-full.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-full.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-full.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,mDAAiD;AAEjD,4CAA6E;AAC7E,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,gCAAK,SAAS,EAAC,gGAAgG,YAC7G,gCAAK,SAAS,EAAC,wIAAwI,YACrJ,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,cAAc,EAAE;oBACd,eAAe,EAAE,UAAU;iBAC5B,yCAGY,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,2EAA2E,aACxF,wBAAC,cAAM,IACL,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,YAAY,EAAE,IAAI,EAClB,eAAe,EAAE;oBACf,QAAQ,EAAE,OAAO;oBACjB,QAAQ,EAAE,OAAO;iBAClB,EACD,WAAW,EAAE,IAAI,EACjB,UAAU,EAAE,KAAK,aAEjB,uBAAC,cAAM,CAAC,MAAM,gCAA8B,EAC5C,wBAAC,cAAM,CAAC,IAAI,eACV,uBAAC,iBAAS,IACR,2BAA2B,EAAE,IAAI,EACjC,mBAAmB,EAAC,kBAAkB,EACtC,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,eAAe,EACxB,OAAO,EAAE,IAAI,GACb,EACF,gCAAM,EACN,uBAAC,iBAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,EAClD,gCAAM,EACN,uBAAC,gBAAQ,IAAC,KAAK,EAAC,gBAAgB,GAAG,EACnC,gCAAM,gCAEN,gCAAM,EACN,uBAAC,iBAAS,IAAC,KAAK,EAAC,YAAY,EAAC,UAAU,EAAE,IAAI,EAAE,KAAK,EAAC,WAAW,GAAG,EACpE,gCAAM,EACN,uBAAC,iBAAS,IACR,2BAA2B,EAAE,IAAI,EACjC,mBAAmB,EAAC,kBAAkB,EACtC,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,eAAe,EACxB,OAAO,EAAE,IAAI,GACb,EACF,gCAAM,gCAEN,gCAAM,EACN,uBAAC,iBAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,EAClD,gCAAM,EACN,uBAAC,gBAAQ,IAAC,KAAK,EAAC,gBAAgB,GAAG,EACnC,gCAAM,EACN,uBAAC,iBAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,IACtC,EACd,uBAAC,cAAM,CAAC,OAAO,cACb,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,EACT,uBAAC,WAAW,KAAG,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Checkbox, Drawer, FilledButton, TextInput } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  const Placeholder = () => (\n    <div className=\"w-full n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16\">\n      <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n        <FilledButton\n          onClick={() => setIsExpanded(true)}\n          htmlAttributes={{\n            'aria-expanded': isExpanded,\n          }}\n        >\n          Press to show the Drawer\n        </FilledButton>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n      <Drawer\n        type=\"push\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        isResizeable={true}\n        resizeableProps={{\n          maxWidth: '400px',\n          minWidth: '300px',\n        }}\n        isCloseable={true}\n        isPortaled={false}\n      >\n        <Drawer.Header>Drawer Header</Drawer.Header>\n        <Drawer.Body>\n          <TextInput\n            showRequiredOrOptionalLabel={true}\n            moreInformationText=\"some information\"\n            label=\"Label\"\n            isDisabled={false}\n            isReadOnly={false}\n            helpText=\"Friendly text\"\n            isFluid={true}\n          />\n          <br />\n          <TextInput label=\"Some input\" value=\"something\" />\n          <br />\n          <Checkbox label=\"Checkbox label\" />\n          <br />\n          Some example of something.\n          <br />\n          <TextInput label=\"Some input\" isDisabled={true} value=\"something\" />\n          <br />\n          <TextInput\n            showRequiredOrOptionalLabel={true}\n            moreInformationText=\"some information\"\n            label=\"Label\"\n            isDisabled={false}\n            isReadOnly={false}\n            helpText=\"Friendly text\"\n            isFluid={true}\n          />\n          <br />\n          Some example of something.\n          <br />\n          <TextInput label=\"Some input\" value=\"something\" />\n          <br />\n          <Checkbox label=\"Checkbox label\" />\n          <br />\n          <TextInput label=\"Some input\" value=\"something\" />\n        </Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n      <Placeholder />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"drawer-full.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-full.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,mDAAiD;AAEjD,4CAA6E;AAC7E,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,gCAAK,SAAS,EAAC,kFAAkF,YAC/F,gCAAK,SAAS,EAAC,sHAAsH,YACnI,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,cAAc,EAAE;oBACd,eAAe,EAAE,UAAU;iBAC5B,yCAGY,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,iEAAiE,aAC9E,wBAAC,cAAM,IACL,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,YAAY,EAAE,IAAI,EAClB,eAAe,EAAE;oBACf,QAAQ,EAAE,OAAO;oBACjB,QAAQ,EAAE,OAAO;iBAClB,EACD,WAAW,EAAE,IAAI,EACjB,UAAU,EAAE,KAAK,aAEjB,uBAAC,cAAM,CAAC,MAAM,gCAA8B,EAC5C,wBAAC,cAAM,CAAC,IAAI,eACV,uBAAC,iBAAS,IACR,2BAA2B,EAAE,IAAI,EACjC,mBAAmB,EAAC,kBAAkB,EACtC,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,eAAe,EACxB,OAAO,EAAE,IAAI,GACb,EACF,gCAAM,EACN,uBAAC,iBAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,EAClD,gCAAM,EACN,uBAAC,gBAAQ,IAAC,KAAK,EAAC,gBAAgB,GAAG,EACnC,gCAAM,gCAEN,gCAAM,EACN,uBAAC,iBAAS,IAAC,KAAK,EAAC,YAAY,EAAC,UAAU,EAAE,IAAI,EAAE,KAAK,EAAC,WAAW,GAAG,EACpE,gCAAM,EACN,uBAAC,iBAAS,IACR,2BAA2B,EAAE,IAAI,EACjC,mBAAmB,EAAC,kBAAkB,EACtC,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,eAAe,EACxB,OAAO,EAAE,IAAI,GACb,EACF,gCAAM,gCAEN,gCAAM,EACN,uBAAC,iBAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,EAClD,gCAAM,EACN,uBAAC,gBAAQ,IAAC,KAAK,EAAC,gBAAgB,GAAG,EACnC,gCAAM,EACN,uBAAC,iBAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,IACtC,EACd,uBAAC,cAAM,CAAC,OAAO,cACb,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,EACT,uBAAC,WAAW,KAAG,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Checkbox, Drawer, FilledButton, TextInput } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  const Placeholder = () => (\n    <div className=\"w-full size-full flex flex-col items-center justify-center rounded-md p-token-16\">\n      <div className=\"border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md\">\n        <FilledButton\n          onClick={() => setIsExpanded(true)}\n          htmlAttributes={{\n            'aria-expanded': isExpanded,\n          }}\n        >\n          Press to show the Drawer\n        </FilledButton>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden\">\n      <Drawer\n        type=\"push\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        isResizeable={true}\n        resizeableProps={{\n          maxWidth: '400px',\n          minWidth: '300px',\n        }}\n        isCloseable={true}\n        isPortaled={false}\n      >\n        <Drawer.Header>Drawer Header</Drawer.Header>\n        <Drawer.Body>\n          <TextInput\n            showRequiredOrOptionalLabel={true}\n            moreInformationText=\"some information\"\n            label=\"Label\"\n            isDisabled={false}\n            isReadOnly={false}\n            helpText=\"Friendly text\"\n            isFluid={true}\n          />\n          <br />\n          <TextInput label=\"Some input\" value=\"something\" />\n          <br />\n          <Checkbox label=\"Checkbox label\" />\n          <br />\n          Some example of something.\n          <br />\n          <TextInput label=\"Some input\" isDisabled={true} value=\"something\" />\n          <br />\n          <TextInput\n            showRequiredOrOptionalLabel={true}\n            moreInformationText=\"some information\"\n            label=\"Label\"\n            isDisabled={false}\n            isReadOnly={false}\n            helpText=\"Friendly text\"\n            isFluid={true}\n          />\n          <br />\n          Some example of something.\n          <br />\n          <TextInput label=\"Some input\" value=\"something\" />\n          <br />\n          <Checkbox label=\"Checkbox label\" />\n          <br />\n          <TextInput label=\"Some input\" value=\"something\" />\n        </Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n      <Placeholder />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/drawer/stories/drawer-not-closeable.story.js

@@ -24,8 +24,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 const react_1 = require("@neo4j-ndl/react");
 const Component = () => {
-    const Placeholder = () => ((0, jsx_runtime_1.jsx)("div", { className: "n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md" }) }));
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.Drawer, { type: "push", isExpanded: true, position: "left", isCloseable: false, children: [(0, jsx_runtime_1.jsx)(react_1.Drawer.Header, { children: "Drawer" }), (0, jsx_runtime_1.jsx)(react_1.Drawer.Body, { children: "Lorem ipsum dolor sit amet." })] }), (0, jsx_runtime_1.jsx)(Placeholder, {})] }));
+    const Placeholder = () => ((0, jsx_runtime_1.jsx)("div", { className: "size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md" }) }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.Drawer, { type: "push", isExpanded: true, position: "left", isCloseable: false, children: [(0, jsx_runtime_1.jsx)(react_1.Drawer.Header, { children: "Drawer" }), (0, jsx_runtime_1.jsx)(react_1.Drawer.Body, { children: "Lorem ipsum dolor sit amet." })] }), (0, jsx_runtime_1.jsx)(Placeholder, {})] }));
 };
 exports.default = Component;
 //# sourceMappingURL=drawer-not-closeable.story.js.map

package/lib/cjs/drawer/stories/drawer-not-closeable.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-not-closeable.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-not-closeable.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,gCAAK,SAAS,EAAC,gGAAgG,YAC7G,gCAAK,SAAS,EAAC,wIAAwI,GAAO,GAC1J,CACP,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,2EAA2E,aACxF,wBAAC,cAAM,IAAC,IAAI,EAAC,MAAM,EAAC,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAC,MAAM,EAAC,WAAW,EAAE,KAAK,aACtE,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,IAAI,8CAA0C,IAC/C,EACT,uBAAC,WAAW,KAAG,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Drawer } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  const Placeholder = () => (\n    <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n      <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\"></div>\n    </div>\n  );\n\n  return (\n    <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n      <Drawer type=\"push\" isExpanded={true} position=\"left\" isCloseable={false}>\n        <Drawer.Header>Drawer</Drawer.Header>\n        <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n      </Drawer>\n      <Placeholder />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"drawer-not-closeable.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-not-closeable.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,mDAAiD;AAEjD,4CAA0C;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,gCAAK,SAAS,EAAC,kFAAkF,YAC/F,gCAAK,SAAS,EAAC,sHAAsH,GAAO,GACxI,CACP,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,iEAAiE,aAC9E,wBAAC,cAAM,IAAC,IAAI,EAAC,MAAM,EAAC,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAC,MAAM,EAAC,WAAW,EAAE,KAAK,aACtE,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,IAAI,8CAA0C,IAC/C,EACT,uBAAC,WAAW,KAAG,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Drawer } from '@neo4j-ndl/react';\n\nconst Component = () => {\n  const Placeholder = () => (\n    <div className=\"size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full\">\n      <div className=\"border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md\"></div>\n    </div>\n  );\n\n  return (\n    <div className=\"h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden\">\n      <Drawer type=\"push\" isExpanded={true} position=\"left\" isCloseable={false}>\n        <Drawer.Header>Drawer</Drawer.Header>\n        <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n      </Drawer>\n      <Placeholder />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/drawer/stories/drawer-overlay.story.js

@@ -27,7 +27,7 @@ const react_2 = require("react");
 const Component = () => {
     const [isExpanded, setIsExpanded] = (0, react_2.useState)(false);
     const referenceElement = (0, react_2.useRef)(null);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.Drawer, { isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), type: "overlay", ariaLabel: "Drawer", position: "left", closeOnClickOutside: true, closeOnEscape: true, isCloseable: true, style: { maxWidth: '400px' }, children: [(0, jsx_runtime_1.jsx)(react_1.Drawer.Header, { children: "Drawer" }), (0, jsx_runtime_1.jsxs)(react_1.Drawer.Body, { children: ["If you use an overlay drawer, you should set", ' ', (0, jsx_runtime_1.jsx)("code", { children: "closeOnClickOutside" }), " to true. This is to align the mouse behavior with the keyboard behavior, as focus is trapped inside the drawer. This is to prevent the drawer from covering interactive elements outside the drawer."] }), (0, jsx_runtime_1.jsx)(react_1.Drawer.Actions, { children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.Drawer, { isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), type: "overlay", ariaLabel: "Drawer", position: "left", shouldCloseOnClickOutside: true, isCloseable: true, style: { maxWidth: '400px' }, children: [(0, jsx_runtime_1.jsx)(react_1.Drawer.Header, { children: "Drawer" }), (0, jsx_runtime_1.jsxs)(react_1.Drawer.Body, { children: ["If you use an overlay drawer, you should set", ' ', (0, jsx_runtime_1.jsx)("code", { children: "shouldCloseOnClickOutside" }), " to true. This is to align the mouse behavior with the keyboard behavior, as focus is trapped inside the drawer. This is to prevent the drawer from covering interactive elements outside the drawer."] }), (0, jsx_runtime_1.jsx)(react_1.Drawer.Actions, { children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
                             'aria-expanded': isExpanded,
                         }, ref: referenceElement, children: "Press to show the Drawer" }) }) })] }));
 };

package/lib/cjs/drawer/stories/drawer-overlay.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-overlay.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-overlay.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,mDAAiD;AAEjD,4CAAwD;AACxD,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACpD,MAAM,gBAAgB,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAEzD,OAAO,CACL,iCAAK,SAAS,EAAC,2EAA2E,aACxF,wBAAC,cAAM,IACL,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,IAAI,EAAC,SAAS,EACd,SAAS,EAAC,QAAQ,EAClB,QAAQ,EAAC,MAAM,EACf,mBAAmB,EAAE,IAAI,EACzB,aAAa,EAAE,IAAI,EACnB,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,aAE5B,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,wBAAC,cAAM,CAAC,IAAI,+DACmC,GAAG,EAChD,mEAAgC,6MAIpB,EACd,uBAAC,cAAM,CAAC,OAAO,cACb,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,EACT,gCAAK,SAAS,EAAC,gGAAgG,YAC7G,gCAAK,SAAS,EAAC,wIAAwI,YACrJ,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,cAAc,EAAE;4BACd,eAAe,EAAE,UAAU;yBAC5B,EACD,GAAG,EAAE,gBAAgB,yCAGR,GACX,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const referenceElement = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n      <Drawer\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        type=\"overlay\"\n        ariaLabel=\"Drawer\"\n        position=\"left\"\n        closeOnClickOutside={true}\n        closeOnEscape={true}\n        isCloseable={true}\n        style={{ maxWidth: '400px' }}\n      >\n        <Drawer.Header>Drawer</Drawer.Header>\n        <Drawer.Body>\n          If you use an overlay drawer, you should set{' '}\n          <code>closeOnClickOutside</code> to true. This is to align the mouse\n          behavior with the keyboard behavior, as focus is trapped inside the\n          drawer. This is to prevent the drawer from covering interactive\n          elements outside the drawer.\n        </Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n      <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n        <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n          <FilledButton\n            onClick={() => setIsExpanded(true)}\n            htmlAttributes={{\n              'aria-expanded': isExpanded,\n            }}\n            ref={referenceElement}\n          >\n            Press to show the Drawer\n          </FilledButton>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"drawer-overlay.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-overlay.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,mDAAiD;AAEjD,4CAAwD;AACxD,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACpD,MAAM,gBAAgB,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAEzD,OAAO,CACL,iCAAK,SAAS,EAAC,iEAAiE,aAC9E,wBAAC,cAAM,IACL,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,IAAI,EAAC,SAAS,EACd,SAAS,EAAC,QAAQ,EAClB,QAAQ,EAAC,MAAM,EACf,yBAAyB,EAAE,IAAI,EAC/B,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,aAE5B,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,wBAAC,cAAM,CAAC,IAAI,+DACmC,GAAG,EAChD,yEAAsC,6MAI1B,EACd,uBAAC,cAAM,CAAC,OAAO,cACb,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,EACT,gCAAK,SAAS,EAAC,kFAAkF,YAC/F,gCAAK,SAAS,EAAC,sHAAsH,YACnI,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,cAAc,EAAE;4BACd,eAAe,EAAE,UAAU;yBAC5B,EACD,GAAG,EAAE,gBAAgB,yCAGR,GACX,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const referenceElement = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div className=\"h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden\">\n      <Drawer\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        type=\"overlay\"\n        ariaLabel=\"Drawer\"\n        position=\"left\"\n        shouldCloseOnClickOutside={true}\n        isCloseable={true}\n        style={{ maxWidth: '400px' }}\n      >\n        <Drawer.Header>Drawer</Drawer.Header>\n        <Drawer.Body>\n          If you use an overlay drawer, you should set{' '}\n          <code>shouldCloseOnClickOutside</code> to true. This is to align the\n          mouse behavior with the keyboard behavior, as focus is trapped inside\n          the drawer. This is to prevent the drawer from covering interactive\n          elements outside the drawer.\n        </Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n      <div className=\"size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full\">\n        <div className=\"border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md\">\n          <FilledButton\n            onClick={() => setIsExpanded(true)}\n            htmlAttributes={{\n              'aria-expanded': isExpanded,\n            }}\n            ref={referenceElement}\n          >\n            Press to show the Drawer\n          </FilledButton>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/drawer/stories/drawer-portaled.story.js

@@ -29,11 +29,11 @@ const Component = () => {
     const [isMenuOpen, setIsMenuOpen] = (0, react_2.useState)(false);
     const anchorRef = (0, react_2.useRef)(null);
     const referenceElementRef = (0, react_2.useRef)(null);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.Drawer, { type: "modal", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "left", closeOnEscape: true, ariaLabel: "Drawer", htmlAttributes: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.Drawer, { type: "modal", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "left", shouldCloseOnEscape: true, ariaLabel: "Drawer", htmlAttributes: {
                     id: 'drawer',
                 }, children: [(0, jsx_runtime_1.jsx)(react_1.Drawer.Header, { children: "Drawer" }), (0, jsx_runtime_1.jsxs)(react_1.Drawer.Body, { children: ["Lorem ipsum dolor sit amet.", ' ', (0, jsx_runtime_1.jsx)(react_1.DropdownButton, { ref: anchorRef, onClick: () => setIsMenuOpen(true), children: "Dropdown Button" }), (0, jsx_runtime_1.jsxs)(react_1.Menu, { strategy: "fixed", portalTarget: document.getElementById('drawer'), anchorRef: anchorRef, isOpen: isMenuOpen, onClose: (_event) => {
                                     setIsMenuOpen(false);
-                                }, children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Menu Item 1" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Menu Item 2" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Menu Item 3" })] })] }), (0, jsx_runtime_1.jsx)(react_1.Drawer.Actions, { children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
+                                }, children: [(0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Menu Item 1" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Menu Item 2" }), (0, jsx_runtime_1.jsx)(react_1.Menu.Item, { title: "Menu Item 3" })] })] }), (0, jsx_runtime_1.jsx)(react_1.Drawer.Actions, { children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
                             'aria-expanded': isExpanded,
                         }, ref: referenceElementRef, children: "Press to show the Drawer" }) }) })] }));
 };

package/lib/cjs/drawer/stories/drawer-portaled.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-portaled.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-portaled.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,mDAAiD;AAEjD,4CAA8E;AAC9E,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACpD,MAAM,SAAS,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,mBAAmB,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IAEnE,OAAO,CACL,iCAAK,SAAS,EAAC,2EAA2E,aACxF,wBAAC,cAAM,IACL,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAC,MAAM,EACf,aAAa,EAAE,IAAI,EACnB,SAAS,EAAC,QAAQ,EAClB,cAAc,EAAE;oBACd,EAAE,EAAE,QAAQ;iBACb,aAED,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,wBAAC,cAAM,CAAC,IAAI,8CACkB,GAAG,EAC/B,uBAAC,sBAAc,IAAC,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,gCAEjD,EACjB,wBAAC,YAAI,IACH,QAAQ,EAAC,OAAO,EAChB,YAAY,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC/C,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE;oCAClB,aAAa,CAAC,KAAK,CAAC,CAAC;gCACvB,CAAC,aAED,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,aAAa,GAAG,EACjC,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,aAAa,GAAG,EACjC,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,aAAa,GAAG,IAC5B,IACK,EACd,uBAAC,cAAM,CAAC,OAAO,cACb,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,EACT,gCAAK,SAAS,EAAC,gGAAgG,YAC7G,gCAAK,SAAS,EAAC,wIAAwI,YACrJ,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,cAAc,EAAE;4BACd,eAAe,EAAE,UAAU;yBAC5B,EACD,GAAG,EAAE,mBAAmB,yCAGX,GACX,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Drawer, DropdownButton, FilledButton, Menu } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement | null>(null);\n  const referenceElementRef = useRef<HTMLButtonElement | null>(null);\n\n  return (\n    <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n      <Drawer\n        type=\"modal\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        position=\"left\"\n        closeOnEscape={true}\n        ariaLabel=\"Drawer\"\n        htmlAttributes={{\n          id: 'drawer',\n        }}\n      >\n        <Drawer.Header>Drawer</Drawer.Header>\n        <Drawer.Body>\n          Lorem ipsum dolor sit amet.{' '}\n          <DropdownButton ref={anchorRef} onClick={() => setIsMenuOpen(true)}>\n            Dropdown Button\n          </DropdownButton>\n          <Menu\n            strategy=\"fixed\"\n            portalTarget={document.getElementById('drawer')}\n            anchorRef={anchorRef}\n            isOpen={isMenuOpen}\n            onClose={(_event) => {\n              setIsMenuOpen(false);\n            }}\n          >\n            <Menu.Item title=\"Menu Item 1\" />\n            <Menu.Item title=\"Menu Item 2\" />\n            <Menu.Item title=\"Menu Item 3\" />\n          </Menu>\n        </Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n      <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n        <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n          <FilledButton\n            onClick={() => setIsExpanded(true)}\n            htmlAttributes={{\n              'aria-expanded': isExpanded,\n            }}\n            ref={referenceElementRef}\n          >\n            Press to show the Drawer\n          </FilledButton>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"drawer-portaled.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-portaled.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,mDAAiD;AAEjD,4CAA8E;AAC9E,iCAAyC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACpD,MAAM,SAAS,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,mBAAmB,GAAG,IAAA,cAAM,EAA2B,IAAI,CAAC,CAAC;IAEnE,OAAO,CACL,iCAAK,SAAS,EAAC,iEAAiE,aAC9E,wBAAC,cAAM,IACL,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAC,MAAM,EACf,mBAAmB,EAAE,IAAI,EACzB,SAAS,EAAC,QAAQ,EAClB,cAAc,EAAE;oBACd,EAAE,EAAE,QAAQ;iBACb,aAED,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,wBAAC,cAAM,CAAC,IAAI,8CACkB,GAAG,EAC/B,uBAAC,sBAAc,IAAC,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,gCAEjD,EACjB,wBAAC,YAAI,IACH,QAAQ,EAAC,OAAO,EAChB,YAAY,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,EAC/C,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,CAAC,MAAM,EAAE,EAAE;oCAClB,aAAa,CAAC,KAAK,CAAC,CAAC;gCACvB,CAAC,aAED,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,aAAa,GAAG,EACjC,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,aAAa,GAAG,EACjC,uBAAC,YAAI,CAAC,IAAI,IAAC,KAAK,EAAC,aAAa,GAAG,IAC5B,IACK,EACd,uBAAC,cAAM,CAAC,OAAO,cACb,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,EACT,gCAAK,SAAS,EAAC,kFAAkF,YAC/F,gCAAK,SAAS,EAAC,sHAAsH,YACnI,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,cAAc,EAAE;4BACd,eAAe,EAAE,UAAU;yBAC5B,EACD,GAAG,EAAE,mBAAmB,yCAGX,GACX,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Drawer, DropdownButton, FilledButton, Menu } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [isMenuOpen, setIsMenuOpen] = useState(false);\n  const anchorRef = useRef<HTMLButtonElement | null>(null);\n  const referenceElementRef = useRef<HTMLButtonElement | null>(null);\n\n  return (\n    <div className=\"h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden\">\n      <Drawer\n        type=\"modal\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        position=\"left\"\n        shouldCloseOnEscape={true}\n        ariaLabel=\"Drawer\"\n        htmlAttributes={{\n          id: 'drawer',\n        }}\n      >\n        <Drawer.Header>Drawer</Drawer.Header>\n        <Drawer.Body>\n          Lorem ipsum dolor sit amet.{' '}\n          <DropdownButton ref={anchorRef} onClick={() => setIsMenuOpen(true)}>\n            Dropdown Button\n          </DropdownButton>\n          <Menu\n            strategy=\"fixed\"\n            portalTarget={document.getElementById('drawer')}\n            anchorRef={anchorRef}\n            isOpen={isMenuOpen}\n            onClose={(_event) => {\n              setIsMenuOpen(false);\n            }}\n          >\n            <Menu.Item title=\"Menu Item 1\" />\n            <Menu.Item title=\"Menu Item 2\" />\n            <Menu.Item title=\"Menu Item 3\" />\n          </Menu>\n        </Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n      <div className=\"size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full\">\n        <div className=\"border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md\">\n          <FilledButton\n            onClick={() => setIsExpanded(true)}\n            htmlAttributes={{\n              'aria-expanded': isExpanded,\n            }}\n            ref={referenceElementRef}\n          >\n            Press to show the Drawer\n          </FilledButton>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/drawer/stories/drawer-push.story.js

@@ -25,10 +25,10 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
     const [isExpanded, setIsExpanded] = (0, react_2.useState)(true);
-    const Placeholder = () => ((0, jsx_runtime_1.jsx)("div", { className: "n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
+    const Placeholder = () => ((0, jsx_runtime_1.jsx)("div", { className: "size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
                     'aria-expanded': isExpanded,
                 }, children: "Press to show the Drawer" }) }) }));
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), children: [(0, jsx_runtime_1.jsx)(react_1.Drawer.Header, { children: "Drawer" }), (0, jsx_runtime_1.jsx)(react_1.Drawer.Body, { children: "Lorem ipsum dolor sit amet." }), (0, jsx_runtime_1.jsx)(react_1.Drawer.Actions, { children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), (0, jsx_runtime_1.jsx)(Placeholder, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), children: [(0, jsx_runtime_1.jsx)(react_1.Drawer.Header, { children: "Drawer" }), (0, jsx_runtime_1.jsx)(react_1.Drawer.Body, { children: "Lorem ipsum dolor sit amet." }), (0, jsx_runtime_1.jsx)(react_1.Drawer.Actions, { children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), (0, jsx_runtime_1.jsx)(Placeholder, {})] }));
 };
 exports.default = Component;
 //# sourceMappingURL=drawer-push.story.js.map

package/lib/cjs/drawer/stories/drawer-push.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-push.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-push.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4CAAwD;AACxD,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,gCAAK,SAAS,EAAC,gGAAgG,YAC7G,gCAAK,SAAS,EAAC,wIAAwI,YACrJ,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,cAAc,EAAE;oBACd,eAAe,EAAE,UAAU;iBAC5B,yCAGY,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,2EAA2E,aACxF,wBAAC,cAAM,IACL,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,aAE5C,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,IAAI,8CAA0C,EACtD,uBAAC,cAAM,CAAC,OAAO,cACb,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,EACT,uBAAC,WAAW,KAAG,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  const Placeholder = () => (\n    <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n      <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n        <FilledButton\n          onClick={() => setIsExpanded(true)}\n          htmlAttributes={{\n            'aria-expanded': isExpanded,\n          }}\n        >\n          Press to show the Drawer\n        </FilledButton>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n      <Drawer\n        type=\"push\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n      >\n        <Drawer.Header>Drawer</Drawer.Header>\n        <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n      <Placeholder />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"drawer-push.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-push.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4CAAwD;AACxD,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,gCAAK,SAAS,EAAC,kFAAkF,YAC/F,gCAAK,SAAS,EAAC,sHAAsH,YACnI,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,cAAc,EAAE;oBACd,eAAe,EAAE,UAAU;iBAC5B,yCAGY,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,iEAAiE,aAC9E,wBAAC,cAAM,IACL,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,aAE5C,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,IAAI,8CAA0C,EACtD,uBAAC,cAAM,CAAC,OAAO,cACb,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,EACT,uBAAC,WAAW,KAAG,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  const Placeholder = () => (\n    <div className=\"size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full\">\n      <div className=\"border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md\">\n        <FilledButton\n          onClick={() => setIsExpanded(true)}\n          htmlAttributes={{\n            'aria-expanded': isExpanded,\n          }}\n        >\n          Press to show the Drawer\n        </FilledButton>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden\">\n      <Drawer\n        type=\"push\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n      >\n        <Drawer.Header>Drawer</Drawer.Header>\n        <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n      <Placeholder />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/drawer/stories/drawer-resizable.story.js

@@ -26,10 +26,10 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
     const [isExpanded, setIsExpanded] = (0, react_2.useState)(true);
-    const Placeholder = () => ((0, jsx_runtime_1.jsx)("div", { className: "n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
+    const Placeholder = () => ((0, jsx_runtime_1.jsx)("div", { className: "size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
                     'aria-expanded': isExpanded,
                 }, children: "Press to show the Drawer" }) }) }));
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "left", isResizeable: true, resizeableProps: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "left", isResizeable: true, resizeableProps: {
                     maxWidth: '400px',
                     minWidth: '300px',
                 }, children: [(0, jsx_runtime_1.jsx)(react_1.Drawer.Header, { children: "Drawer" }), (0, jsx_runtime_1.jsx)(react_1.Drawer.Body, { children: "Lorem ipsum dolor sit amet." }), (0, jsx_runtime_1.jsx)(react_1.Drawer.Actions, { children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), (0, jsx_runtime_1.jsx)(Placeholder, {})] }));

package/lib/cjs/drawer/stories/drawer-resizable.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-resizable.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-resizable.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,mDAAiD;AAEjD,4CAAwD;AACxD,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,gCAAK,SAAS,EAAC,gGAAgG,YAC7G,gCAAK,SAAS,EAAC,wIAAwI,YACrJ,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,cAAc,EAAE;oBACd,eAAe,EAAE,UAAU;iBAC5B,yCAGY,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,2EAA2E,aACxF,wBAAC,cAAM,IACL,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAC,MAAM,EACf,YAAY,EAAE,IAAI,EAClB,eAAe,EAAE;oBACf,QAAQ,EAAE,OAAO;oBACjB,QAAQ,EAAE,OAAO;iBAClB,aAED,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,IAAI,8CAA0C,EACtD,uBAAC,cAAM,CAAC,OAAO,cACb,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,EACT,uBAAC,WAAW,KAAG,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  const Placeholder = () => (\n    <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n      <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n        <FilledButton\n          onClick={() => setIsExpanded(true)}\n          htmlAttributes={{\n            'aria-expanded': isExpanded,\n          }}\n        >\n          Press to show the Drawer\n        </FilledButton>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n      <Drawer\n        type=\"push\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        position=\"left\"\n        isResizeable={true}\n        resizeableProps={{\n          maxWidth: '400px',\n          minWidth: '300px',\n        }}\n      >\n        <Drawer.Header>Drawer</Drawer.Header>\n        <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n      <Placeholder />\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"drawer-resizable.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-resizable.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,mDAAiD;AAEjD,4CAAwD;AACxD,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,gCAAK,SAAS,EAAC,kFAAkF,YAC/F,gCAAK,SAAS,EAAC,sHAAsH,YACnI,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,cAAc,EAAE;oBACd,eAAe,EAAE,UAAU;iBAC5B,yCAGY,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,iEAAiE,aAC9E,wBAAC,cAAM,IACL,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAC,MAAM,EACf,YAAY,EAAE,IAAI,EAClB,eAAe,EAAE;oBACf,QAAQ,EAAE,OAAO;oBACjB,QAAQ,EAAE,OAAO;iBAClB,aAED,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,IAAI,8CAA0C,EACtD,uBAAC,cAAM,CAAC,OAAO,cACb,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,EACT,uBAAC,WAAW,KAAG,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  const Placeholder = () => (\n    <div className=\"size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full\">\n      <div className=\"border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md\">\n        <FilledButton\n          onClick={() => setIsExpanded(true)}\n          htmlAttributes={{\n            'aria-expanded': isExpanded,\n          }}\n        >\n          Press to show the Drawer\n        </FilledButton>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden\">\n      <Drawer\n        type=\"push\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        position=\"left\"\n        isResizeable={true}\n        resizeableProps={{\n          maxWidth: '400px',\n          minWidth: '300px',\n        }}\n      >\n        <Drawer.Header>Drawer</Drawer.Header>\n        <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n      <Placeholder />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/drawer/stories/drawer-right-side.story.js

@@ -26,10 +26,10 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
     const [isExpanded, setIsExpanded] = (0, react_2.useState)(true);
-    const Placeholder = () => ((0, jsx_runtime_1.jsx)("div", { className: "n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
+    const Placeholder = () => ((0, jsx_runtime_1.jsx)("div", { className: "size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full", children: (0, jsx_runtime_1.jsx)("div", { className: "border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
                     'aria-expanded': isExpanded,
                 }, children: "Press to show the Drawer" }) }) }));
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [(0, jsx_runtime_1.jsx)(Placeholder, {}), (0, jsx_runtime_1.jsxs)(react_1.Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "right", children: [(0, jsx_runtime_1.jsx)(react_1.Drawer.Header, { children: "Drawer" }), (0, jsx_runtime_1.jsx)(react_1.Drawer.Body, { children: "Lorem ipsum dolor sit amet." }), (0, jsx_runtime_1.jsx)(react_1.Drawer.Actions, { children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden", children: [(0, jsx_runtime_1.jsx)(Placeholder, {}), (0, jsx_runtime_1.jsxs)(react_1.Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "right", children: [(0, jsx_runtime_1.jsx)(react_1.Drawer.Header, { children: "Drawer" }), (0, jsx_runtime_1.jsx)(react_1.Drawer.Body, { children: "Lorem ipsum dolor sit amet." }), (0, jsx_runtime_1.jsx)(react_1.Drawer.Actions, { children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] })] }));
 };
 exports.default = Component;
 //# sourceMappingURL=drawer-right-side.story.js.map

package/lib/cjs/drawer/stories/drawer-right-side.story.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-right-side.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-right-side.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,mDAAiD;AAEjD,4CAAwD;AACxD,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,gCAAK,SAAS,EAAC,gGAAgG,YAC7G,gCAAK,SAAS,EAAC,wIAAwI,YACrJ,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,cAAc,EAAE;oBACd,eAAe,EAAE,UAAU;iBAC5B,yCAGY,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,2EAA2E,aACxF,uBAAC,WAAW,KAAG,EACf,wBAAC,cAAM,IACL,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAC,OAAO,aAEhB,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,IAAI,8CAA0C,EACtD,uBAAC,cAAM,CAAC,OAAO,cACb,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  const Placeholder = () => (\n    <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n      <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n        <FilledButton\n          onClick={() => setIsExpanded(true)}\n          htmlAttributes={{\n            'aria-expanded': isExpanded,\n          }}\n        >\n          Press to show the Drawer\n        </FilledButton>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n      <Placeholder />\n      <Drawer\n        type=\"push\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        position=\"right\"\n      >\n        <Drawer.Header>Drawer</Drawer.Header>\n        <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n    </div>\n  );\n};\n\nexport default Component;\n"]}
+{"version":3,"file":"drawer-right-side.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-right-side.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,mDAAiD;AAEjD,4CAAwD;AACxD,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,gCAAK,SAAS,EAAC,kFAAkF,YAC/F,gCAAK,SAAS,EAAC,sHAAsH,YACnI,uBAAC,oBAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,cAAc,EAAE;oBACd,eAAe,EAAE,UAAU;iBAC5B,yCAGY,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,iEAAiE,aAC9E,uBAAC,WAAW,KAAG,EACf,wBAAC,cAAM,IACL,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAC,OAAO,aAEhB,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,uBAAC,cAAM,CAAC,IAAI,8CAA0C,EACtD,uBAAC,cAAM,CAAC,OAAO,cACb,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/*!\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  const Placeholder = () => (\n    <div className=\"size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full\">\n      <div className=\"border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md\">\n        <FilledButton\n          onClick={() => setIsExpanded(true)}\n          htmlAttributes={{\n            'aria-expanded': isExpanded,\n          }}\n        >\n          Press to show the Drawer\n        </FilledButton>\n      </div>\n    </div>\n  );\n\n  return (\n    <div className=\"h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden\">\n      <Placeholder />\n      <Drawer\n        type=\"push\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        position=\"right\"\n      >\n        <Drawer.Header>Drawer</Drawer.Header>\n        <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n        <Drawer.Actions>\n          <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n            Close\n          </FilledButton>\n        </Drawer.Actions>\n      </Drawer>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

package/lib/cjs/drawer/stories/drawer-scrollable.story.js

@@ -26,10 +26,10 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
     const [isExpanded, setIsExpanded] = (0, react_2.useState)(true);
-    const Placeholder = () => ((0, jsx_runtime_1.jsx)("div", { className: "w-full n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16", children: (0, jsx_runtime_1.jsx)("div", { className: "n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
+    const Placeholder = () => ((0, jsx_runtime_1.jsx)("div", { className: "w-full size-full flex flex-col items-center justify-center rounded-md p-token-16", children: (0, jsx_runtime_1.jsx)("div", { className: "border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md", children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
                     'aria-expanded': isExpanded,
                 }, children: "Press to show the Drawer" }) }) }));
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), children: [(0, jsx_runtime_1.jsx)(react_1.Drawer.Header, { children: "Drawer" }), (0, jsx_runtime_1.jsxs)(react_1.Drawer.Body, { children: [(0, jsx_runtime_1.jsx)(react_1.TextInput, { showRequiredOrOptionalLabel: true, moreInformationText: "some information", label: "Label", isDisabled: false, isReadOnly: false, helpText: "Friendly text", isFluid: true }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Some input", value: "something" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.Checkbox, { label: "Checkbox label" }), (0, jsx_runtime_1.jsx)("br", {}), "Some example of something.", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Some input", isDisabled: true, value: "something" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.TextInput, { showRequiredOrOptionalLabel: true, moreInformationText: "some information", label: "Label", isDisabled: false, isReadOnly: false, helpText: "Friendly text", isFluid: true }), (0, jsx_runtime_1.jsx)("br", {}), "Some example of something.", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Some input", value: "something" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.Checkbox, { label: "Checkbox label" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Some input", value: "something" })] })] }), (0, jsx_runtime_1.jsx)(Placeholder, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden", children: [(0, jsx_runtime_1.jsxs)(react_1.Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), children: [(0, jsx_runtime_1.jsx)(react_1.Drawer.Header, { children: "Drawer" }), (0, jsx_runtime_1.jsxs)(react_1.Drawer.Body, { children: [(0, jsx_runtime_1.jsx)(react_1.TextInput, { showRequiredOrOptionalLabel: true, moreInformationText: "some information", label: "Label", isDisabled: false, isReadOnly: false, helpText: "Friendly text", isFluid: true }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Some input", value: "something" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.Checkbox, { label: "Checkbox label" }), (0, jsx_runtime_1.jsx)("br", {}), "Some example of something.", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Some input", isDisabled: true, value: "something" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.TextInput, { showRequiredOrOptionalLabel: true, moreInformationText: "some information", label: "Label", isDisabled: false, isReadOnly: false, helpText: "Friendly text", isFluid: true }), (0, jsx_runtime_1.jsx)("br", {}), "Some example of something.", (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Some input", value: "something" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.Checkbox, { label: "Checkbox label" }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)(react_1.TextInput, { label: "Some input", value: "something" })] })] }), (0, jsx_runtime_1.jsx)(Placeholder, {})] }));
 };
 exports.default = Component;
 //# sourceMappingURL=drawer-scrollable.story.js.map