@neo4j-ndl/react 4.9.16 → 4.9.18

package/lib/cjs/_common/readme-docs-page.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createReadmeDocsPage = createReadmeDocsPage;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ *
+ *  Copyright (c) "Neo4j"
+ *  Neo4j Sweden AB [http://neo4j.com]
+ *
+ *  This file is part of Neo4j.
+ *
+ *  Neo4j is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+const blocks_1 = require("@storybook/addon-docs/blocks");
+/**
+ * Creates a Storybook docs page component that renders markdown content (e.g. a README.md).
+ *
+ * Requires the `autodocs` tag on the component meta to create a Docs entry in the sidebar
+ * (the global preview config disables autodocs with `!autodocs`).
+ *
+ * Usage in a *.stories.tsx file:
+ * ```ts
+ * import ReadmeContent from '../README.md?raw';
+ * import { createReadmeDocsPage } from '../../_common/readme-docs-page';
+ *
+ * const meta: Meta = {
+ *   // ...
+ *   tags: ['docsPage', 'autodocs'],
+ *   parameters: {
+ *     docs: { page: createReadmeDocsPage(ReadmeContent) },
+ *   },
+ * };
+ * ```
+ */
+function stripMarkdownComments(content) {
+    return content.replace(/^\[\/\/\]: #.*\n*/gm, '');
+}
+function createReadmeDocsPage(markdownContent) {
+    const cleaned = stripMarkdownComments(markdownContent);
+    return function ReadmeDocsPage() {
+        return (0, jsx_runtime_1.jsx)(blocks_1.Markdown, { children: cleaned });
+    };
+}
+//# sourceMappingURL=readme-docs-page.js.map

package/lib/cjs/_common/readme-docs-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"readme-docs-page.js","sourceRoot":"","sources":["../../../src/_common/readme-docs-page.tsx"],"names":[],"mappings":";;AA8CA,oDAKC;;AAnDD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,yDAAwD;AAExD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,SAAS,qBAAqB,CAAC,OAAe;IAC5C,OAAO,OAAO,CAAC,OAAO,CAAC,qBAAqB,EAAE,EAAE,CAAC,CAAC;AACpD,CAAC;AAED,SAAgB,oBAAoB,CAAC,eAAuB;IAC1D,MAAM,OAAO,GAAG,qBAAqB,CAAC,eAAe,CAAC,CAAC;IACvD,OAAO,SAAS,cAAc;QAC5B,OAAO,uBAAC,iBAAQ,cAAE,OAAO,GAAY,CAAC;IACxC,CAAC,CAAC;AACJ,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 { Markdown } from '@storybook/addon-docs/blocks';\n\n/**\n * Creates a Storybook docs page component that renders markdown content (e.g. a README.md).\n *\n * Requires the `autodocs` tag on the component meta to create a Docs entry in the sidebar\n * (the global preview config disables autodocs with `!autodocs`).\n *\n * Usage in a *.stories.tsx file:\n * ```ts\n * import ReadmeContent from '../README.md?raw';\n * import { createReadmeDocsPage } from '../../_common/readme-docs-page';\n *\n * const meta: Meta = {\n *   // ...\n *   tags: ['docsPage', 'autodocs'],\n *   parameters: {\n *     docs: { page: createReadmeDocsPage(ReadmeContent) },\n *   },\n * };\n * ```\n */\nfunction stripMarkdownComments(content: string): string {\n  return content.replace(/^\\[\\/\\/\\]: #.*\\n*/gm, '');\n}\n\nexport function createReadmeDocsPage(markdownContent: string) {\n  const cleaned = stripMarkdownComments(markdownContent);\n  return function ReadmeDocsPage() {\n    return <Markdown>{cleaned}</Markdown>;\n  };\n}\n"]}

package/lib/cjs/drawer/Drawer.js

@@ -40,55 +40,168 @@ const react_1 = require("@floating-ui/react");
 const classnames_1 = __importDefault(require("classnames"));
 const re_resizable_1 = require("re-resizable");
 const react_2 = require("react");
+const utils_1 = require("../_common/utils");
 const clean_icon_button_1 = require("../clean-icon-button");
 const conditional_wrap_1 = require("../conditional-wrap");
 const icons_1 = require("../icons");
 const typography_1 = require("../typography");
+const KEYBOARD_RESIZE_STEP_PX = 16;
+function parsePixelSize(value) {
+    if (value === undefined) {
+        return undefined;
+    }
+    if (typeof value === 'number') {
+        return value;
+    }
+    const parsed = parseInt(value.replace(/px$/i, ''), 10);
+    return Number.isNaN(parsed) ? undefined : parsed;
+}
+function DrawerResizeHandle({ handleSide, onResizeBy, valueMax, valueMin, valueNow, }) {
+    const handleKeyDown = (0, react_2.useCallback)((e) => {
+        const isArrowKey = e.key === 'ArrowLeft' || e.key === 'ArrowRight';
+        if (isArrowKey) {
+            e.preventDefault();
+            const delta = handleSide === 'right'
+                ? e.key === 'ArrowRight'
+                    ? KEYBOARD_RESIZE_STEP_PX
+                    : -KEYBOARD_RESIZE_STEP_PX
+                : e.key === 'ArrowLeft'
+                    ? KEYBOARD_RESIZE_STEP_PX
+                    : -KEYBOARD_RESIZE_STEP_PX;
+            onResizeBy(delta);
+        }
+    }, [handleSide, onResizeBy]);
+    return (
+    /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Resize handle is focusable for keyboard resize. */
+    (0, jsx_runtime_1.jsx)("div", { "aria-label": `Resize drawer with arrow keys. Handle on ${handleSide}.`, "aria-orientation": "vertical", "aria-valuemax": valueMax, "aria-valuemin": valueMin, "aria-valuenow": valueNow !== null && valueNow !== void 0 ? valueNow : 0, "aria-valuetext": `drawer width ${valueNow !== null && valueNow !== void 0 ? valueNow : 0}px`, className: "ndl-drawer-resize-handle", "data-drawer-handle": handleSide, onKeyDown: handleKeyDown, role: "separator", style: { height: '100%', width: '100%' }, 
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- Resize handle is focusable for keyboard resize.
+        tabIndex: 0 }));
+}
 const DrawerComponent = function DrawerComponent(_a) {
-    var { children, className = '', isExpanded, onExpandedChange, position = 'left', type = 'overlay', isResizeable = false, resizeableProps, isCloseable = true, isPortaled = false, portalProps = {}, htmlAttributes, style, ref, as } = _a, restProps = __rest(_a, ["children", "className", "isExpanded", "onExpandedChange", "position", "type", "isResizeable", "resizeableProps", "isCloseable", "isPortaled", "portalProps", "htmlAttributes", "style", "ref", "as"]);
-    const setOnExpandedChange = (0, react_2.useCallback)(() => {
-        if (onExpandedChange) {
-            onExpandedChange(!isExpanded);
+    var { children, className = '', isExpanded, onExpandedChange, position = 'left', type = 'overlay', isResizeable = false, resizeableProps, isCloseable = true, isPortaled = false, portalProps = {}, closeOnEscape = type === 'modal' ? true : false, closeOnClickOutside = false, closeOnFocusOut = false, ariaLabel, htmlAttributes, style, ref, as } = _a, restProps = __rest(_a, ["children", "className", "isExpanded", "onExpandedChange", "position", "type", "isResizeable", "resizeableProps", "isCloseable", "isPortaled", "portalProps", "closeOnEscape", "closeOnClickOutside", "closeOnFocusOut", "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) {
+        (0, utils_1.needleWarningMessage)('A Drawer should have an aria-label when type is "modal" or "overlay" to be accessible.');
+    }
+    const { refs, context } = (0, react_1.useFloating)({
+        onOpenChange: onExpandedChange,
+        open: isExpanded,
+    });
+    /** Dismiss (escape + click outside) applies to portaled overlay and to non-portaled overlay. */
+    const shouldUseDismiss = type === 'modal' ||
+        (type === 'overlay' && !isPortaled && isExpanded) ||
+        (type === 'overlay' && isPortaled);
+    const dismiss = (0, react_1.useDismiss)(context, {
+        enabled: shouldUseDismiss,
+        escapeKey: closeOnEscape,
+        outsidePress: closeOnClickOutside,
+    });
+    const role = (0, react_1.useRole)(context, {
+        enabled: type === 'modal' || type === 'overlay',
+        role: 'dialog',
+    });
+    const { getFloatingProps } = (0, react_1.useInteractions)([dismiss, role]);
+    /** When overlay is open and not portaled, drawer gets the floating ref + props; when portaled, the portal layer gets them. */
+    const shouldApplyFloatingPropsOnDrawer = type === 'overlay' && isExpanded && !isPortaled;
+    const floatingPropsForDrawer = shouldApplyFloatingPropsOnDrawer
+        ? getFloatingProps(htmlAttributes !== null && htmlAttributes !== void 0 ? htmlAttributes : {})
+        : {};
+    const resizableMergedRef = (0, react_1.useMergeRefs)([
+        resizableRef,
+        ref,
+        shouldApplyFloatingPropsOnDrawer
+            ? refs.setFloating
+            : null,
+        shouldApplyFloatingPropsOnDrawer
+            ? refs.setReference
+            : null,
+    ]);
+    const componentMergedRef = (0, react_1.useMergeRefs)([
+        shouldApplyFloatingPropsOnDrawer ? refs.setFloating : null,
+        shouldApplyFloatingPropsOnDrawer ? refs.setReference : null,
+        ref,
+    ]);
+    const handleResizeBy = (0, react_2.useCallback)((delta) => {
+        if (!resizableRef.current) {
+            return;
+        }
+        const current = resizableRef.current.size;
+        const min = parsePixelSize(resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.minWidth);
+        const max = parsePixelSize(resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.maxWidth);
+        const newWidth = Math.max(min !== null && min !== void 0 ? min : 0, Math.min(max !== null && max !== void 0 ? max : Number.POSITIVE_INFINITY, current.width + delta));
+        resizableRef.current.updateSize({
+            height: '100%',
+            width: newWidth,
+        });
+        setResizeWidth(newWidth);
+    }, [resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.minWidth, resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.maxWidth]);
+    const handleResize = (0, react_2.useCallback)((event, direction, elementRef, delta) => {
+        var _a;
+        setResizeWidth(elementRef.offsetWidth);
+        (_a = resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.onResize) === null || _a === void 0 ? void 0 : _a.call(resizeableProps, event, direction, elementRef, delta);
+    }, [resizeableProps]);
+    (0, react_2.useEffect)(() => {
+        if (!isResizeable || !resizableRef.current) {
+            return;
+        }
+        const width = resizableRef.current.size.width;
+        if (width > 0) {
+            setResizeWidth(width);
         }
+    }, [isResizeable]);
+    const setOnExpandedChange = (0, react_2.useCallback)(() => {
+        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(!isExpanded);
     }, [isExpanded, onExpandedChange]);
     const classes = (0, classnames_1.default)('ndl-drawer', className, {
-        'ndl-drawer-expanded': isExpanded,
         'ndl-drawer-left': position === 'left',
+        'ndl-drawer-modal': type === 'modal',
         'ndl-drawer-overlay': type === 'overlay',
+        'ndl-drawer-portaled': isPortaled && type === 'overlay',
         'ndl-drawer-push': type === 'push',
         'ndl-drawer-right': position === 'right',
     });
     const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';
-    const shouldRenderInPortal = isPortaled && type === 'overlay';
     const Component = as !== null && as !== void 0 ? as : 'div';
-    const Close = () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isCloseable && ((0, jsx_runtime_1.jsx)(clean_icon_button_1.CleanIconButton, { className: "ndl-drawer-close-button", onClick: setOnExpandedChange, description: null, size: "medium", htmlAttributes: {
+    const Close = () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (isCloseable || type === 'modal') && ((0, jsx_runtime_1.jsx)(clean_icon_button_1.CleanIconButton, { className: "ndl-drawer-close-button", onClick: setOnExpandedChange, description: null, size: "medium", htmlAttributes: {
                 'aria-label': 'Close',
             }, children: (0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}) })) }));
-    if (isResizeable) {
-        return ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: shouldRenderInPortal, wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: (0, jsx_runtime_1.jsxs)(re_resizable_1.Resizable, Object.assign({ as: Component, defaultSize: {
-                    height: '100%',
-                    width: 'auto',
-                } }, resizeableProps, { className: classes, style: Object.assign(Object.assign({ position: resizableStylePosition }, style), resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.style), boundsByDirection: true, bounds: "parent", handleStyles: {
-                    /*
-                     * adding a small offset to the handle to make it easier to click
-                     * if the content of the drawer is scrollable, most noticeable if not using
-                     * a mouse on mac or chrome on windows with the fluent scrollbars
-                     */
-                    right: {
-                        right: '-8px',
-                    },
-                }, enable: {
-                    bottom: false,
-                    bottomLeft: false,
-                    bottomRight: false,
-                    left: position === 'right',
-                    right: position === 'left',
-                    top: false,
-                    topLeft: false,
-                    topRight: false,
-                }, ref: ref }, restProps, htmlAttributes, { children: [children, (0, jsx_runtime_1.jsx)(Close, {})] })) }));
+    const resizableContent = ((0, jsx_runtime_1.jsxs)(re_resizable_1.Resizable, Object.assign({ as: Component, defaultSize: {
+            height: '100%',
+            width: 'auto',
+        } }, resizeableProps, { className: classes, style: Object.assign(Object.assign({ position: resizableStylePosition }, style), resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.style), boundsByDirection: true, bounds: "parent", handleStyles: Object.assign(Object.assign({}, (position === 'left' && { right: { right: '-8px' } })), (position === 'right' && { left: { left: '-8px' } })), enable: {
+            bottom: false,
+            bottomLeft: false,
+            bottomRight: false,
+            left: position === 'right',
+            right: position === 'left',
+            top: false,
+            topLeft: false,
+            topRight: false,
+        }, handleComponent: position === 'left'
+            ? {
+                right: ((0, jsx_runtime_1.jsx)(DrawerResizeHandle, { handleSide: "right", onResizeBy: handleResizeBy, valueMax: parsePixelSize(resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.maxWidth), valueMin: parsePixelSize(resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.minWidth), valueNow: resizeWidth })),
+            }
+            : {
+                left: ((0, jsx_runtime_1.jsx)(DrawerResizeHandle, { handleSide: "left", onResizeBy: handleResizeBy, valueMax: parsePixelSize(resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.maxWidth), valueMin: parsePixelSize(resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.minWidth), valueNow: resizeWidth })),
+            }, onResize: handleResize, ref: resizableMergedRef }, restProps, floatingPropsForDrawer, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)(Close, {}), children] })));
+    const regularContent = ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: (0, classnames_1.default)(classes), style: style, ref: componentMergedRef }, restProps, floatingPropsForDrawer, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)(Close, {}), children] })));
+    /** what content to render*/
+    const content = isResizeable ? resizableContent : regularContent;
+    /** if the drawer is not expanded, don't render anything */
+    if (isExpanded === false) {
+        return null;
+    }
+    /** modal behavior */
+    if (type === 'modal') {
+        return ((0, jsx_runtime_1.jsxs)(react_1.FloatingPortal, Object.assign({}, portalProps, { children: [(0, jsx_runtime_1.jsx)(react_1.FloatingOverlay, { className: "ndl-drawer-overlay-root", lockScroll: true }), (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, { context: context, modal: true, returnFocus: true, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: refs.setFloating }, getFloatingProps(), { "aria-label": ariaLabel, "aria-modal": "true", children: content })) })] })));
+    }
+    /** overlay focus behavior */
+    if (type === 'overlay') {
+        return ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isPortaled, wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, { context: context, modal: false, returnFocus: true, closeOnFocusOut: closeOnFocusOut, children: content }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: shouldRenderInPortal, wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: (0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: classes, style: style, ref: ref }, restProps, htmlAttributes, { children: [children, (0, jsx_runtime_1.jsx)(Close, {})] })) }));
+    /** regular push behavior */
+    return content;
 };
 DrawerComponent.displayName = 'Drawer';
 const DrawerHeader = (_a) => {

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 { FloatingPortal } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { Resizable, type ResizableProps } from 're-resizable';\nimport type React from 'react';\nimport { type ComponentProps, useCallback } from 'react';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { XMarkIconOutline } from '../icons';\nimport { Typography } from '../typography';\n\ntype DrawerPosition = 'left' | 'right';\n\ntype DrawerType = 'overlay' | 'push';\n\ntype DrawerProps = {\n  /** Controls whether the drawer is open (expanded) or closed (collapsed). */\n  isExpanded: boolean;\n\n  /** Callback functions fired when the drawer's expanded state changes. */\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  resizeableProps?: ResizableProps;\n\n  /** Whether a close button (X) is displayed in the drawer. */\n  isCloseable?: boolean;\n\n  /** Whether to portal the content */\n  isPortaled?: boolean;\n\n  /** The content to display within the drawer. */\n  children: React.ReactNode;\n\n  /** Additional CSS classes to apply to the drawer container. */\n  className?: string;\n\n  /**\n   * Props to pass to the portal from @floating-ui/react FloatingPortal\n   * @see https://floating-ui.com/docs/floatingportal\n   */\n  portalProps?: ComponentProps<typeof FloatingPortal>;\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  htmlAttributes,\n  style,\n  ref,\n  as,\n  ...restProps\n}: PolymorphicCommonProps<T, DrawerProps>) {\n  const setOnExpandedChange = useCallback(() => {\n    if (onExpandedChange) {\n      onExpandedChange(!isExpanded);\n    }\n  }, [isExpanded, onExpandedChange]);\n\n  const classes = classNames('ndl-drawer', className, {\n    'ndl-drawer-expanded': isExpanded,\n    'ndl-drawer-left': position === 'left',\n    'ndl-drawer-overlay': 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 shouldRenderInPortal = isPortaled && type === 'overlay';\n  const Component = as ?? 'div';\n\n  const Close = () => (\n    <>\n      {isCloseable && (\n        <CleanIconButton\n          className=\"ndl-drawer-close-button\"\n          onClick={setOnExpandedChange}\n          description={null}\n          size=\"medium\"\n          htmlAttributes={{\n            'aria-label': 'Close',\n          }}\n        >\n          <XMarkIconOutline />\n        </CleanIconButton>\n      )}\n    </>\n  );\n\n  if (isResizeable) {\n    return (\n      <ConditionalWrap\n        shouldWrap={shouldRenderInPortal}\n        wrap={(wrapChildren) => (\n          <FloatingPortal preserveTabOrder={true} {...portalProps}>\n            {wrapChildren}\n          </FloatingPortal>\n        )}\n      >\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=\"parent\"\n          handleStyles={{\n            /*\n             * adding a small offset to the handle to make it easier to click\n             * if the content of the drawer is scrollable, most noticeable if not using\n             * a mouse on mac or chrome on windows with the fluent scrollbars\n             */\n            right: {\n              right: '-8px',\n            },\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          ref={ref}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          {children}\n          <Close />\n        </Resizable>\n      </ConditionalWrap>\n    );\n  }\n\n  return (\n    <ConditionalWrap\n      shouldWrap={shouldRenderInPortal}\n      wrap={(wrapChildren) => (\n        <FloatingPortal preserveTabOrder={true} {...portalProps}>\n          {wrapChildren}\n        </FloatingPortal>\n      )}\n    >\n      <Component\n        className={classes}\n        style={style}\n        ref={ref}\n        {...restProps}\n        {...htmlAttributes}\n      >\n        {children}\n        <Close />\n      </Component>\n    </ConditionalWrap>\n  );\n};\n\nDrawerComponent.displayName = 'Drawer';\n\ntype DrawerHeaderProps = {\n  children: React.ReactNode;\n  className?: string;\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  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';\nimport { Typography } from '../typography';\n\ntype DrawerPosition = 'left' | 'right';\n\ntype DrawerType = 'overlay' | 'push' | 'modal';\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  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\n  /**\n   * Whether pressing Escape closes the drawer.\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  closeOnEscape?: boolean;\n\n  // TODO v5: this should maybe be default on overlay in the future\n  /**\n   * When type is \"overlay\", whether clicking outside the drawer closes it.\n   * - When type is \"overlay\" or \"modal\", this defaults to false.\n   * - When type is \"push\", no effect.\n   */\n  closeOnClickOutside?: boolean;\n\n  // TODO v5: this should maybe be default on overlay in the future\n  /**\n   * Whether tabbing focus outside the drawer closes it.\n   * - When type is \"overlay\", this defaults to false.\n   * - When type is \"push\" or \"modal\", no effect.\n   */\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  const parsed = parseInt(value.replace(/px$/i, ''), 10);\n  return Number.isNaN(parsed) ? undefined : parsed;\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    (e: React.KeyboardEvent<HTMLDivElement>) => {\n      const isArrowKey = e.key === 'ArrowLeft' || e.key === 'ArrowRight';\n      if (isArrowKey) {\n        e.preventDefault();\n        const delta =\n          handleSide === 'right'\n            ? e.key === 'ArrowRight'\n              ? KEYBOARD_RESIZE_STEP_PX\n              : -KEYBOARD_RESIZE_STEP_PX\n            : e.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  closeOnFocusOut = 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,\n    outsidePress: closeOnClickOutside,\n  });\n  const role = useRole(context, {\n    enabled: type === 'modal' || type === 'overlay',\n    role: 'dialog',\n  });\n  const { getFloatingProps } = useInteractions([dismiss, role]);\n\n  /** When overlay is open and not portaled, drawer gets the floating ref + props; when portaled, the portal layer gets them. */\n  const shouldApplyFloatingPropsOnDrawer =\n    type === 'overlay' && isExpanded && !isPortaled;\n\n  const floatingPropsForDrawer = shouldApplyFloatingPropsOnDrawer\n    ? getFloatingProps(htmlAttributes ?? {})\n    : {};\n\n  const resizableMergedRef = useMergeRefs([\n    resizableRef,\n    ref,\n    shouldApplyFloatingPropsOnDrawer\n      ? (refs.setFloating as React.Ref<Resizable>)\n      : null,\n    shouldApplyFloatingPropsOnDrawer\n      ? (refs.setReference as React.Ref<Resizable>)\n      : null,\n  ]);\n  const componentMergedRef = useMergeRefs([\n    shouldApplyFloatingPropsOnDrawer ? refs.setFloating : null,\n    shouldApplyFloatingPropsOnDrawer ? refs.setReference : null,\n    ref,\n  ]);\n\n  const handleResizeBy = useCallback(\n    (delta: number) => {\n      if (!resizableRef.current) {\n        return;\n      }\n      const current = resizableRef.current.size;\n      const min = parsePixelSize(resizeableProps?.minWidth);\n      const max = parsePixelSize(resizeableProps?.maxWidth);\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 setOnExpandedChange = useCallback(() => {\n    onExpandedChange?.(!isExpanded);\n  }, [isExpanded, onExpandedChange]);\n\n  const classes = classNames('ndl-drawer', className, {\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 Close = () => (\n    <>\n      {(isCloseable || type === 'modal') && (\n        <CleanIconButton\n          className=\"ndl-drawer-close-button\"\n          onClick={setOnExpandedChange}\n          description={null}\n          size=\"medium\"\n          htmlAttributes={{\n            'aria-label': 'Close',\n          }}\n        >\n          <XMarkIconOutline />\n        </CleanIconButton>\n      )}\n    </>\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=\"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      {...floatingPropsForDrawer}\n      {...htmlAttributes}\n    >\n      <Close />\n      {children}\n    </Resizable>\n  );\n\n  const regularContent = (\n    <Component\n      className={classNames(classes)}\n      style={style}\n      ref={componentMergedRef}\n      {...restProps}\n      {...floatingPropsForDrawer}\n      {...htmlAttributes}\n    >\n      <Close />\n      {children}\n    </Component>\n  );\n\n  /** what content to render*/\n  const content = isResizeable ? resizableContent : regularContent;\n\n  /** if the drawer is not expanded, don't render anything */\n  if (isExpanded === false) {\n    return null;\n  }\n\n  /** modal behavior */\n  if (type === 'modal') {\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  /** overlay focus behavior */\n  if (type === 'overlay') {\n    return (\n      <ConditionalWrap\n        shouldWrap={isPortaled}\n        wrap={(wrapChildren) => (\n          <FloatingPortal preserveTabOrder={true} {...portalProps}>\n            {wrapChildren}\n          </FloatingPortal>\n        )}\n      >\n        <FloatingFocusManager\n          context={context}\n          modal={false}\n          returnFocus={true}\n          closeOnFocusOut={closeOnFocusOut}\n        >\n          {content}\n        </FloatingFocusManager>\n      </ConditionalWrap>\n    );\n  }\n\n  /** regular push behavior */\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"]}

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

@@ -26,7 +26,9 @@ 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), children: "Press to show the Drawer" }) }) }));
+    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: {
+                    '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: {
                     maxWidth: '400px',
                     minWidth: '300px',

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,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,yCAEjC,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 onClick={() => setIsExpanded(true)}>\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,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"]}

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

@@ -23,11 +23,9 @@ 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 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), 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: "overlay", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "left", isCloseable: false, children: [(0, jsx_runtime_1.jsx)(react_1.Drawer.Header, { children: "Drawer Header" }), (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: "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, {})] }));
 };
 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,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,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,yCAEjC,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,2EAA2E,aACxF,wBAAC,cAAM,IACL,IAAI,EAAC,SAAS,EACd,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAC,MAAM,EACf,WAAW,EAAE,KAAK,aAElB,uBAAC,cAAM,CAAC,MAAM,gCAA8B,EAC5C,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, 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 onClick={() => setIsExpanded(true)}>\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=\"overlay\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        position=\"left\"\n        isCloseable={false}\n      >\n        <Drawer.Header>Drawer Header</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,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"]}

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

@@ -25,9 +25,11 @@ require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
 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), 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, { isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), type: "overlay", children: [(0, jsx_runtime_1.jsx)(react_1.Drawer.Header, { children: "Drawer Header" }), (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, {})] }));
+    const [isExpanded, setIsExpanded] = (0, react_2.useState)(false);
+    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: {
+                    '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, { isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), type: "overlay", ariaLabel: "Drawer", closeOnClickOutside: true, closeOnFocusOut: 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, and there is a risk that it covers interactive elements, you should set ", (0, jsx_runtime_1.jsx)("code", { children: "closeOnClickOutside" }), ' ', "and ", (0, jsx_runtime_1.jsx)("code", { children: "closeOnFocusOut" }), " to true. This prevents it from hiding focus, making it more accessible."] }), (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-overlay.story.js.map

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,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,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,yCAEjC,GACX,GACF,CACP,CAAC;IAEF,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,aAEd,uBAAC,cAAM,CAAC,MAAM,gCAA8B,EAC5C,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 onClick={() => setIsExpanded(true)}>\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        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        type=\"overlay\"\n      >\n        <Drawer.Header>Drawer Header</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-overlay.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-overlay.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,KAAK,CAAC,CAAC;IAEpD,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,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,IAAI,EAAC,SAAS,EACd,SAAS,EAAC,QAAQ,EAClB,mBAAmB,EAAE,IAAI,EACzB,eAAe,EAAE,IAAI,EACrB,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,aAE5B,uBAAC,cAAM,CAAC,MAAM,yBAAuB,EACrC,wBAAC,cAAM,CAAC,IAAI,yHAE2B,mEAAgC,EAAC,GAAG,UACrE,+DAA4B,gFAEpB,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 { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\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        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        type=\"overlay\"\n        ariaLabel=\"Drawer\"\n        closeOnClickOutside={true}\n        closeOnFocusOut={true}\n        style={{ maxWidth: '400px' }}\n      >\n        <Drawer.Header>Drawer</Drawer.Header>\n        <Drawer.Body>\n          If you use an overlay drawer, and there is a risk that it covers\n          interactive elements, you should set <code>closeOnClickOutside</code>{' '}\n          and <code>closeOnFocusOut</code> to true. This prevents it from hiding\n          focus, making it more accessible.\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-portaled.story.js

@@ -26,13 +26,14 @@ const react_1 = require("@neo4j-ndl/react");
 const react_2 = require("react");
 const Component = () => {
     const [isExpanded, setIsExpanded] = (0, react_2.useState)(false);
-    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), 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: "overlay", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "left", isResizeable: true, resizeableProps: {
-                    maxWidth: '400px',
-                    minWidth: '300px',
-                }, isPortaled: true, portalProps: {
-                    id: 'storybook-root',
-                }, children: [(0, jsx_runtime_1.jsx)(react_1.Drawer.Header, { children: "Drawer Header" }), (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, {})] }));
+    const [isMenuOpen, setIsMenuOpen] = (0, react_2.useState)(false);
+    const anchorRef = (0, react_2.useRef)(null);
+    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: {
+                    '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: "modal", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "left", closeOnEscape: 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: () => 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)(Placeholder, {})] }));
 };
 exports.default = Component;
 //# sourceMappingURL=drawer-portaled.story.js.map

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,4CAAwD;AACxD,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,gCAAK,SAAS,EAAC,gGAAgG,YAC7G,gCAAK,SAAS,EAAC,wIAAwI,YACrJ,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,yCAEjC,GACX,GACF,CACP,CAAC;IAEF,OAAO,CACL,iCAAK,SAAS,EAAC,2EAA2E,aACxF,wBAAC,cAAM,IACL,IAAI,EAAC,SAAS,EACd,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,EACD,UAAU,EAAE,IAAI,EAChB,WAAW,EAAE;oBACX,EAAE,EAAE,gBAAgB;iBACrB,aAED,uBAAC,cAAM,CAAC,MAAM,gCAA8B,EAC5C,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(false);\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 onClick={() => setIsExpanded(true)}>\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=\"overlay\"\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        position=\"left\"\n        isResizeable={true}\n        resizeableProps={{\n          maxWidth: '400px',\n          minWidth: '300px',\n        }}\n        isPortaled={true}\n        portalProps={{\n          id: 'storybook-root',\n        }}\n      >\n        <Drawer.Header>Drawer Header</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-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;IAEzD,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,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,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,aAEnC,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,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, 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\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=\"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={() => setIsMenuOpen(false)}\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      <Placeholder />\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -25,8 +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), 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 Header" }), (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, {})] }));
+    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: {
+                    '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, {})] }));
 };
 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,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,yCAEjC,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,gCAA8B,EAC5C,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 onClick={() => setIsExpanded(true)}>\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 Header</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,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"]}