@neo4j-ndl/react 4.9.25 → 4.9.27

package/lib/cjs/drawer/Drawer.js

@@ -78,7 +78,7 @@ function DrawerResizeHandle({ handleSide, onResizeBy, valueMax, valueMin, valueN
         tabIndex: 0 }));
 }
 const DrawerComponent = function DrawerComponent(_a) {
-    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"]);
+    var { children, className = '', isExpanded, onExpandedChange, position = 'left', type = 'overlay', isResizeable = false, resizeableProps, isCloseable = true, isPortaled = false, portalProps = {}, closeOnEscape = type === 'modal' ? true : false, closeOnClickOutside = false, ariaLabel, htmlAttributes, style, ref, as } = _a, restProps = __rest(_a, ["children", "className", "isExpanded", "onExpandedChange", "position", "type", "isResizeable", "resizeableProps", "isCloseable", "isPortaled", "portalProps", "closeOnEscape", "closeOnClickOutside", "ariaLabel", "htmlAttributes", "style", "ref", "as"]);
     const resizableRef = (0, react_2.useRef)(null);
     const [resizeWidth, setResizeWidth] = (0, react_2.useState)(0);
     if ((type === 'modal' || type === 'overlay') && !ariaLabel) {
@@ -94,8 +94,8 @@ const DrawerComponent = function DrawerComponent(_a) {
         (type === 'overlay' && isPortaled);
     const dismiss = (0, react_1.useDismiss)(context, {
         enabled: shouldUseDismiss,
-        escapeKey: closeOnEscape,
-        outsidePress: closeOnClickOutside,
+        escapeKey: closeOnEscape && type !== 'push',
+        outsidePress: closeOnClickOutside && type !== 'push',
     });
     const role = (0, react_1.useRole)(context, {
         enabled: type === 'modal' || type === 'overlay',
@@ -131,10 +131,8 @@ const DrawerComponent = function DrawerComponent(_a) {
             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',
@@ -144,9 +142,12 @@ const DrawerComponent = function DrawerComponent(_a) {
     });
     const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';
     const Component = as !== null && as !== void 0 ? as : 'div';
-    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, {}) })) }));
+    const handleClose = (0, react_2.useCallback)(() => {
+        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(false);
+    }, [onExpandedChange]);
+    const closeButton = (0, react_2.useMemo)(() => isCloseable || type === 'modal' ? ((0, jsx_runtime_1.jsx)(clean_icon_button_1.CleanIconButton, { className: "ndl-drawer-close-button", onClick: handleClose, description: null, size: "medium", htmlAttributes: {
+            'aria-label': 'Close',
+        }, children: (0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}) })) : null, [handleClose, isCloseable, type]);
     const resizableContent = ((0, jsx_runtime_1.jsxs)(re_resizable_1.Resizable, Object.assign({ as: Component, defaultSize: {
             height: '100%',
             width: 'auto',
@@ -165,20 +166,16 @@ const DrawerComponent = function DrawerComponent(_a) {
             }
             : {
                 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, 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: ref }, restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)(Close, {}), children] })));
+            }, onResize: handleResize, ref: resizableMergedRef }, restProps, htmlAttributes, { children: [closeButton, children] })));
+    const regularContent = ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: (0, classnames_1.default)(classes), style: style, ref: ref }, restProps, htmlAttributes, { children: [closeButton, children] })));
     /** what content to render*/
     const content = isResizeable ? resizableContent : regularContent;
-    const floatingRefs = (0, react_1.useMergeRefs)([refs.setFloating, refs.setReference]);
-    /** if the drawer is not expanded, don't render anything */
-    if (isExpanded === false) {
-        return null;
-    }
+    // const floatingRefs = useMergeRefs([refs.setFloating, refs.setReference]);
     /** 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 })) })] })));
+    if (type === 'modal' && isExpanded) {
+        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, { disabled: !isExpanded, context: context, modal: true, returnFocus: true, initialFocus: 0, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: refs.setFloating }, getFloatingProps(), { "aria-label": ariaLabel, "aria-modal": "true", children: content })) })] })));
     }
-    return ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isPortaled && type === 'overlay', 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, { disabled: !isExpanded || type === 'push', context: context, modal: false, returnFocus: true, closeOnFocusOut: closeOnFocusOut, children: (0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: type === 'overlay', wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: floatingRefs }, getFloatingProps(), { "aria-label": ariaLabel, children: wrapChildren }))), children: content }) }) }));
+    return ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isPortaled && type === 'overlay' && isExpanded, 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, { disabled: !isExpanded || type === 'push', context: context, modal: true, initialFocus: 0, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: refs.setFloating }, getFloatingProps(), { "aria-label": ariaLabel, children: 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 {\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  const resizableMergedRef = useMergeRefs([resizableRef, ref]);\n\n  const handleResizeBy = useCallback(\n    (delta: number) => {\n      if (!resizableRef.current) {\n        return;\n      }\n      const current = resizableRef.current.size;\n      const 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      {...htmlAttributes}\n    >\n      <Close />\n      {children}\n    </Resizable>\n  );\n\n  const regularContent = (\n    <Component\n      className={classNames(classes)}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <Close />\n      {children}\n    </Component>\n  );\n\n  /** what content to render*/\n  const content = isResizeable ? resizableContent : regularContent;\n\n  const floatingRefs = useMergeRefs([refs.setFloating, refs.setReference]);\n\n  /** 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  return (\n    <ConditionalWrap\n      shouldWrap={isPortaled && type === 'overlay'}\n      wrap={(wrapChildren) => (\n        <FloatingPortal preserveTabOrder={true} {...portalProps}>\n          {wrapChildren}\n        </FloatingPortal>\n      )}\n    >\n      <FloatingFocusManager\n        disabled={!isExpanded || type === 'push'}\n        context={context}\n        modal={false}\n        returnFocus={true}\n        closeOnFocusOut={closeOnFocusOut}\n      >\n        <ConditionalWrap\n          shouldWrap={type === 'overlay'}\n          wrap={(wrapChildren) => (\n            <div\n              ref={floatingRefs}\n              {...getFloatingProps()}\n              aria-label={ariaLabel}\n            >\n              {wrapChildren}\n            </div>\n          )}\n        >\n          {content}\n        </ConditionalWrap>\n      </FloatingFocusManager>\n    </ConditionalWrap>\n  );\n};\n\nDrawerComponent.displayName = 'Drawer';\n\ntype DrawerHeaderProps = {\n  children: React.ReactNode;\n  className?: string;\n  // TODO v5: fix the typing on the Drawer subcomponents to use the common props type. Also, this is not an h5 haha. Should be polymorphic I guess, maybe default to h2 as we've recommended.\n  htmlAttributes?: HtmlAttributes<'h5'>;\n};\n\nconst DrawerHeader = ({\n  children,\n  className = '',\n  htmlAttributes,\n  ...restProps\n}: DrawerHeaderProps) => {\n  const classes = classNames('ndl-drawer-header', className);\n\n  if (typeof children === 'string' || typeof children === 'number') {\n    return (\n      <Typography\n        className={classes}\n        variant=\"title-3\"\n        {...restProps}\n        {...htmlAttributes}\n      >\n        {children}\n      </Typography>\n    );\n  }\n\n  return (\n    <div className={classes} {...restProps} {...htmlAttributes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerActionsProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerActions = ({\n  children,\n  className = '',\n  htmlAttributes,\n  ...restProps\n}: DrawerActionsProps) => {\n  const classes = classNames('ndl-drawer-actions', className);\n\n  return (\n    <div className={classes} {...restProps} {...htmlAttributes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerBodyProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerBody = ({\n  children,\n  className = '',\n  htmlAttributes,\n  ...restProps\n}: DrawerBodyProps) => {\n  const classes = classNames('ndl-drawer-body', className);\n\n  return (\n    <div className=\"ndl-drawer-body-wrapper\">\n      <div className={classes} {...restProps} {...htmlAttributes}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nconst Drawer = Object.assign(DrawerComponent, {\n  Actions: DrawerActions,\n  Body: DrawerBody,\n  Header: DrawerHeader,\n});\n\nexport { Drawer };\n"]}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport {\n  FloatingFocusManager,\n  FloatingOverlay,\n  FloatingPortal,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useMergeRefs,\n  useRole,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { Resizable, type ResizableProps } from 're-resizable';\nimport type React from 'react';\nimport {\n  type ComponentProps,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { XMarkIconOutline } from '../icons';\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. Should be set to true for overlay drawers.\n   * - When type is \"modal\", this defaults to true.\n   * - When type is \"overlay\", this defaults to false.\n   * - When type is \"push\", no effect.\n   */\n  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. Should be set to true for overlay drawers.\n   * - When type is \"overlay\" or \"modal\", this defaults to false.\n   * - When type is \"push\", no effect.\n   */\n  closeOnClickOutside?: boolean;\n\n  // TODO v5: remove this prop\n  /**\n   *  @deprecated overlay are now focus trapped by default, this prop has no effect anymore.\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  ariaLabel,\n  htmlAttributes,\n  style,\n  ref,\n  as,\n  ...restProps\n}: PolymorphicCommonProps<T, DrawerProps>) {\n  const resizableRef = useRef<Resizable | null>(null);\n  const [resizeWidth, setResizeWidth] = useState<number>(0);\n\n  if ((type === 'modal' || type === 'overlay') && !ariaLabel) {\n    needleWarningMessage(\n      'A Drawer should have an aria-label when type is \"modal\" or \"overlay\" to be accessible.',\n    );\n  }\n\n  const { refs, context } = useFloating({\n    onOpenChange: onExpandedChange,\n    open: isExpanded,\n  });\n\n  /** Dismiss (escape + click outside) applies to portaled overlay and to non-portaled overlay. */\n  const shouldUseDismiss =\n    type === 'modal' ||\n    (type === 'overlay' && !isPortaled && isExpanded) ||\n    (type === 'overlay' && isPortaled);\n\n  const dismiss = useDismiss(context, {\n    enabled: shouldUseDismiss,\n    escapeKey: closeOnEscape && type !== 'push',\n    outsidePress: closeOnClickOutside && type !== 'push',\n  });\n  const role = useRole(context, {\n    enabled: type === 'modal' || type === 'overlay',\n    role: 'dialog',\n  });\n  const { getFloatingProps } = useInteractions([dismiss, role]);\n\n  const resizableMergedRef = useMergeRefs([resizableRef, ref]);\n\n  const handleResizeBy = useCallback(\n    (delta: number) => {\n      if (!resizableRef.current) {\n        return;\n      }\n      const current = resizableRef.current.size;\n      const 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 classes = classNames('ndl-drawer', className, {\n    'ndl-drawer-expanded': isExpanded,\n    'ndl-drawer-left': position === 'left',\n    'ndl-drawer-modal': type === 'modal',\n    'ndl-drawer-overlay': type === 'overlay',\n    'ndl-drawer-portaled': isPortaled && type === 'overlay',\n    'ndl-drawer-push': type === 'push',\n    'ndl-drawer-right': position === 'right',\n  });\n\n  const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';\n  const Component = as ?? 'div';\n\n  const handleClose = useCallback(() => {\n    onExpandedChange?.(false);\n  }, [onExpandedChange]);\n\n  const closeButton = useMemo(\n    () =>\n      isCloseable || type === 'modal' ? (\n        <CleanIconButton\n          className=\"ndl-drawer-close-button\"\n          onClick={handleClose}\n          description={null}\n          size=\"medium\"\n          htmlAttributes={{\n            'aria-label': 'Close',\n          }}\n        >\n          <XMarkIconOutline />\n        </CleanIconButton>\n      ) : null,\n    [handleClose, isCloseable, type],\n  );\n\n  const resizableContent = (\n    <Resizable\n      as={Component}\n      defaultSize={{\n        height: '100%',\n        width: 'auto',\n      }}\n      {...resizeableProps}\n      className={classes}\n      style={{\n        position: resizableStylePosition,\n        ...style,\n        ...resizeableProps?.style,\n      }}\n      boundsByDirection={true}\n      bounds=\"parent\"\n      handleStyles={{\n        /*\n         * Small offset so the handle is easier to hit when the drawer content is scrollable.\n         */\n        ...(position === 'left' && { right: { right: '-8px' } }),\n        ...(position === 'right' && { left: { left: '-8px' } }),\n      }}\n      enable={{\n        bottom: false,\n        bottomLeft: false,\n        bottomRight: false,\n        left: position === 'right',\n        right: position === 'left',\n        top: false,\n        topLeft: false,\n        topRight: false,\n      }}\n      handleComponent={\n        position === 'left'\n          ? {\n              right: (\n                <DrawerResizeHandle\n                  handleSide=\"right\"\n                  onResizeBy={handleResizeBy}\n                  valueMax={parsePixelSize(resizeableProps?.maxWidth)}\n                  valueMin={parsePixelSize(resizeableProps?.minWidth)}\n                  valueNow={resizeWidth}\n                />\n              ),\n            }\n          : {\n              left: (\n                <DrawerResizeHandle\n                  handleSide=\"left\"\n                  onResizeBy={handleResizeBy}\n                  valueMax={parsePixelSize(resizeableProps?.maxWidth)}\n                  valueMin={parsePixelSize(resizeableProps?.minWidth)}\n                  valueNow={resizeWidth}\n                />\n              ),\n            }\n      }\n      onResize={handleResize}\n      ref={resizableMergedRef}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {closeButton}\n      {children}\n    </Resizable>\n  );\n\n  const regularContent = (\n    <Component\n      className={classNames(classes)}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {closeButton}\n      {children}\n    </Component>\n  );\n\n  /** what content to render*/\n  const content = isResizeable ? resizableContent : regularContent;\n\n  // const floatingRefs = useMergeRefs([refs.setFloating, refs.setReference]);\n\n  /** modal behavior */\n  if (type === 'modal' && isExpanded) {\n    return (\n      <FloatingPortal {...portalProps}>\n        <FloatingOverlay\n          className=\"ndl-drawer-overlay-root\"\n          lockScroll={true}\n        />\n        <FloatingFocusManager\n          disabled={!isExpanded}\n          context={context}\n          modal={true}\n          returnFocus={true}\n          initialFocus={0}\n        >\n          <div\n            ref={refs.setFloating}\n            {...getFloatingProps()}\n            aria-label={ariaLabel}\n            aria-modal=\"true\"\n          >\n            {content}\n          </div>\n        </FloatingFocusManager>\n      </FloatingPortal>\n    );\n  }\n\n  return (\n    <ConditionalWrap\n      shouldWrap={isPortaled && type === 'overlay' && isExpanded}\n      wrap={(wrapChildren) => (\n        <FloatingPortal preserveTabOrder={true} {...portalProps}>\n          {wrapChildren}\n        </FloatingPortal>\n      )}\n    >\n      <FloatingFocusManager\n        disabled={!isExpanded || type === 'push'}\n        context={context}\n        modal={true}\n        initialFocus={0}\n      >\n        <div\n          ref={refs.setFloating}\n          {...getFloatingProps()}\n          aria-label={ariaLabel}\n        >\n          {content}\n        </div>\n      </FloatingFocusManager>\n    </ConditionalWrap>\n  );\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-overlay.story.js

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

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

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

package/lib/esm/drawer/Drawer.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  *
  *  Copyright (c) "Neo4j"
@@ -33,7 +33,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useDismiss, useFloating, useInteractions, useMergeRefs, useRole, } from '@floating-ui/react';
 import classNames from 'classnames';
 import { Resizable } from 're-resizable';
-import { useCallback, useEffect, useRef, useState, } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { needleWarningMessage } from '../_common/utils';
 import { CleanIconButton } from '../clean-icon-button';
 import { ConditionalWrap } from '../conditional-wrap';
@@ -72,7 +72,7 @@ function DrawerResizeHandle({ handleSide, onResizeBy, valueMax, valueMin, valueN
         tabIndex: 0 }));
 }
 const DrawerComponent = function DrawerComponent(_a) {
-    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"]);
+    var { children, className = '', isExpanded, onExpandedChange, position = 'left', type = 'overlay', isResizeable = false, resizeableProps, isCloseable = true, isPortaled = false, portalProps = {}, closeOnEscape = type === 'modal' ? true : false, closeOnClickOutside = false, ariaLabel, htmlAttributes, style, ref, as } = _a, restProps = __rest(_a, ["children", "className", "isExpanded", "onExpandedChange", "position", "type", "isResizeable", "resizeableProps", "isCloseable", "isPortaled", "portalProps", "closeOnEscape", "closeOnClickOutside", "ariaLabel", "htmlAttributes", "style", "ref", "as"]);
     const resizableRef = useRef(null);
     const [resizeWidth, setResizeWidth] = useState(0);
     if ((type === 'modal' || type === 'overlay') && !ariaLabel) {
@@ -88,8 +88,8 @@ const DrawerComponent = function DrawerComponent(_a) {
         (type === 'overlay' && isPortaled);
     const dismiss = useDismiss(context, {
         enabled: shouldUseDismiss,
-        escapeKey: closeOnEscape,
-        outsidePress: closeOnClickOutside,
+        escapeKey: closeOnEscape && type !== 'push',
+        outsidePress: closeOnClickOutside && type !== 'push',
     });
     const role = useRole(context, {
         enabled: type === 'modal' || type === 'overlay',
@@ -125,10 +125,8 @@ const DrawerComponent = function DrawerComponent(_a) {
             setResizeWidth(width);
         }
     }, [isResizeable]);
-    const setOnExpandedChange = useCallback(() => {
-        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(!isExpanded);
-    }, [isExpanded, onExpandedChange]);
     const classes = classNames('ndl-drawer', className, {
+        'ndl-drawer-expanded': isExpanded,
         'ndl-drawer-left': position === 'left',
         'ndl-drawer-modal': type === 'modal',
         'ndl-drawer-overlay': type === 'overlay',
@@ -138,9 +136,12 @@ const DrawerComponent = function DrawerComponent(_a) {
     });
     const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';
     const Component = as !== null && as !== void 0 ? as : 'div';
-    const Close = () => (_jsx(_Fragment, { children: (isCloseable || type === 'modal') && (_jsx(CleanIconButton, { className: "ndl-drawer-close-button", onClick: setOnExpandedChange, description: null, size: "medium", htmlAttributes: {
-                'aria-label': 'Close',
-            }, children: _jsx(XMarkIconOutline, {}) })) }));
+    const handleClose = useCallback(() => {
+        onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(false);
+    }, [onExpandedChange]);
+    const closeButton = useMemo(() => isCloseable || type === 'modal' ? (_jsx(CleanIconButton, { className: "ndl-drawer-close-button", onClick: handleClose, description: null, size: "medium", htmlAttributes: {
+            'aria-label': 'Close',
+        }, children: _jsx(XMarkIconOutline, {}) })) : null, [handleClose, isCloseable, type]);
     const resizableContent = (_jsxs(Resizable, Object.assign({ as: Component, defaultSize: {
             height: '100%',
             width: 'auto',
@@ -159,20 +160,16 @@ const DrawerComponent = function DrawerComponent(_a) {
             }
             : {
                 left: (_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, htmlAttributes, { children: [_jsx(Close, {}), children] })));
-    const regularContent = (_jsxs(Component, Object.assign({ className: classNames(classes), style: style, ref: ref }, restProps, htmlAttributes, { children: [_jsx(Close, {}), children] })));
+            }, onResize: handleResize, ref: resizableMergedRef }, restProps, htmlAttributes, { children: [closeButton, children] })));
+    const regularContent = (_jsxs(Component, Object.assign({ className: classNames(classes), style: style, ref: ref }, restProps, htmlAttributes, { children: [closeButton, children] })));
     /** what content to render*/
     const content = isResizeable ? resizableContent : regularContent;
-    const floatingRefs = useMergeRefs([refs.setFloating, refs.setReference]);
-    /** if the drawer is not expanded, don't render anything */
-    if (isExpanded === false) {
-        return null;
-    }
+    // const floatingRefs = useMergeRefs([refs.setFloating, refs.setReference]);
     /** modal behavior */
-    if (type === 'modal') {
-        return (_jsxs(FloatingPortal, Object.assign({}, portalProps, { children: [_jsx(FloatingOverlay, { className: "ndl-drawer-overlay-root", lockScroll: true }), _jsx(FloatingFocusManager, { context: context, modal: true, returnFocus: true, children: _jsx("div", Object.assign({ ref: refs.setFloating }, getFloatingProps(), { "aria-label": ariaLabel, "aria-modal": "true", children: content })) })] })));
+    if (type === 'modal' && isExpanded) {
+        return (_jsxs(FloatingPortal, Object.assign({}, portalProps, { children: [_jsx(FloatingOverlay, { className: "ndl-drawer-overlay-root", lockScroll: true }), _jsx(FloatingFocusManager, { disabled: !isExpanded, context: context, modal: true, returnFocus: true, initialFocus: 0, children: _jsx("div", Object.assign({ ref: refs.setFloating }, getFloatingProps(), { "aria-label": ariaLabel, "aria-modal": "true", children: content })) })] })));
     }
-    return (_jsx(ConditionalWrap, { shouldWrap: isPortaled && type === 'overlay', wrap: (wrapChildren) => (_jsx(FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: _jsx(FloatingFocusManager, { disabled: !isExpanded || type === 'push', context: context, modal: false, returnFocus: true, closeOnFocusOut: closeOnFocusOut, children: _jsx(ConditionalWrap, { shouldWrap: type === 'overlay', wrap: (wrapChildren) => (_jsx("div", Object.assign({ ref: floatingRefs }, getFloatingProps(), { "aria-label": ariaLabel, children: wrapChildren }))), children: content }) }) }));
+    return (_jsx(ConditionalWrap, { shouldWrap: isPortaled && type === 'overlay' && isExpanded, wrap: (wrapChildren) => (_jsx(FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: _jsx(FloatingFocusManager, { disabled: !isExpanded || type === 'push', context: context, modal: true, initialFocus: 0, children: _jsx("div", Object.assign({ ref: refs.setFloating }, getFloatingProps(), { "aria-label": ariaLabel, children: content })) }) }));
 };
 DrawerComponent.displayName = 'Drawer';
 const DrawerHeader = (_a) => {

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport {\n  FloatingFocusManager,\n  FloatingOverlay,\n  FloatingPortal,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useMergeRefs,\n  useRole,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { Resizable, type ResizableProps } from 're-resizable';\nimport type React from 'react';\nimport {\n  type ComponentProps,\n  useCallback,\n  useEffect,\n  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  const resizableMergedRef = useMergeRefs([resizableRef, ref]);\n\n  const handleResizeBy = useCallback(\n    (delta: number) => {\n      if (!resizableRef.current) {\n        return;\n      }\n      const current = resizableRef.current.size;\n      const 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      {...htmlAttributes}\n    >\n      <Close />\n      {children}\n    </Resizable>\n  );\n\n  const regularContent = (\n    <Component\n      className={classNames(classes)}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <Close />\n      {children}\n    </Component>\n  );\n\n  /** what content to render*/\n  const content = isResizeable ? resizableContent : regularContent;\n\n  const floatingRefs = useMergeRefs([refs.setFloating, refs.setReference]);\n\n  /** 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  return (\n    <ConditionalWrap\n      shouldWrap={isPortaled && type === 'overlay'}\n      wrap={(wrapChildren) => (\n        <FloatingPortal preserveTabOrder={true} {...portalProps}>\n          {wrapChildren}\n        </FloatingPortal>\n      )}\n    >\n      <FloatingFocusManager\n        disabled={!isExpanded || type === 'push'}\n        context={context}\n        modal={false}\n        returnFocus={true}\n        closeOnFocusOut={closeOnFocusOut}\n      >\n        <ConditionalWrap\n          shouldWrap={type === 'overlay'}\n          wrap={(wrapChildren) => (\n            <div\n              ref={floatingRefs}\n              {...getFloatingProps()}\n              aria-label={ariaLabel}\n            >\n              {wrapChildren}\n            </div>\n          )}\n        >\n          {content}\n        </ConditionalWrap>\n      </FloatingFocusManager>\n    </ConditionalWrap>\n  );\n};\n\nDrawerComponent.displayName = 'Drawer';\n\ntype DrawerHeaderProps = {\n  children: React.ReactNode;\n  className?: string;\n  // TODO v5: fix the typing on the Drawer subcomponents to use the common props type. Also, this is not an h5 haha. Should be polymorphic I guess, maybe default to h2 as we've recommended.\n  htmlAttributes?: HtmlAttributes<'h5'>;\n};\n\nconst DrawerHeader = ({\n  children,\n  className = '',\n  htmlAttributes,\n  ...restProps\n}: DrawerHeaderProps) => {\n  const classes = classNames('ndl-drawer-header', className);\n\n  if (typeof children === 'string' || typeof children === 'number') {\n    return (\n      <Typography\n        className={classes}\n        variant=\"title-3\"\n        {...restProps}\n        {...htmlAttributes}\n      >\n        {children}\n      </Typography>\n    );\n  }\n\n  return (\n    <div className={classes} {...restProps} {...htmlAttributes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerActionsProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerActions = ({\n  children,\n  className = '',\n  htmlAttributes,\n  ...restProps\n}: DrawerActionsProps) => {\n  const classes = classNames('ndl-drawer-actions', className);\n\n  return (\n    <div className={classes} {...restProps} {...htmlAttributes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerBodyProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerBody = ({\n  children,\n  className = '',\n  htmlAttributes,\n  ...restProps\n}: DrawerBodyProps) => {\n  const classes = classNames('ndl-drawer-body', className);\n\n  return (\n    <div className=\"ndl-drawer-body-wrapper\">\n      <div className={classes} {...restProps} {...htmlAttributes}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nconst Drawer = Object.assign(DrawerComponent, {\n  Actions: DrawerActions,\n  Body: DrawerBody,\n  Header: DrawerHeader,\n});\n\nexport { Drawer };\n"]}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport {\n  FloatingFocusManager,\n  FloatingOverlay,\n  FloatingPortal,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useMergeRefs,\n  useRole,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { Resizable, type ResizableProps } from 're-resizable';\nimport type React from 'react';\nimport {\n  type ComponentProps,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { XMarkIconOutline } from '../icons';\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. Should be set to true for overlay drawers.\n   * - When type is \"modal\", this defaults to true.\n   * - When type is \"overlay\", this defaults to false.\n   * - When type is \"push\", no effect.\n   */\n  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. Should be set to true for overlay drawers.\n   * - When type is \"overlay\" or \"modal\", this defaults to false.\n   * - When type is \"push\", no effect.\n   */\n  closeOnClickOutside?: boolean;\n\n  // TODO v5: remove this prop\n  /**\n   *  @deprecated overlay are now focus trapped by default, this prop has no effect anymore.\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  ariaLabel,\n  htmlAttributes,\n  style,\n  ref,\n  as,\n  ...restProps\n}: PolymorphicCommonProps<T, DrawerProps>) {\n  const resizableRef = useRef<Resizable | null>(null);\n  const [resizeWidth, setResizeWidth] = useState<number>(0);\n\n  if ((type === 'modal' || type === 'overlay') && !ariaLabel) {\n    needleWarningMessage(\n      'A Drawer should have an aria-label when type is \"modal\" or \"overlay\" to be accessible.',\n    );\n  }\n\n  const { refs, context } = useFloating({\n    onOpenChange: onExpandedChange,\n    open: isExpanded,\n  });\n\n  /** Dismiss (escape + click outside) applies to portaled overlay and to non-portaled overlay. */\n  const shouldUseDismiss =\n    type === 'modal' ||\n    (type === 'overlay' && !isPortaled && isExpanded) ||\n    (type === 'overlay' && isPortaled);\n\n  const dismiss = useDismiss(context, {\n    enabled: shouldUseDismiss,\n    escapeKey: closeOnEscape && type !== 'push',\n    outsidePress: closeOnClickOutside && type !== 'push',\n  });\n  const role = useRole(context, {\n    enabled: type === 'modal' || type === 'overlay',\n    role: 'dialog',\n  });\n  const { getFloatingProps } = useInteractions([dismiss, role]);\n\n  const resizableMergedRef = useMergeRefs([resizableRef, ref]);\n\n  const handleResizeBy = useCallback(\n    (delta: number) => {\n      if (!resizableRef.current) {\n        return;\n      }\n      const current = resizableRef.current.size;\n      const 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 classes = classNames('ndl-drawer', className, {\n    'ndl-drawer-expanded': isExpanded,\n    'ndl-drawer-left': position === 'left',\n    'ndl-drawer-modal': type === 'modal',\n    'ndl-drawer-overlay': type === 'overlay',\n    'ndl-drawer-portaled': isPortaled && type === 'overlay',\n    'ndl-drawer-push': type === 'push',\n    'ndl-drawer-right': position === 'right',\n  });\n\n  const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';\n  const Component = as ?? 'div';\n\n  const handleClose = useCallback(() => {\n    onExpandedChange?.(false);\n  }, [onExpandedChange]);\n\n  const closeButton = useMemo(\n    () =>\n      isCloseable || type === 'modal' ? (\n        <CleanIconButton\n          className=\"ndl-drawer-close-button\"\n          onClick={handleClose}\n          description={null}\n          size=\"medium\"\n          htmlAttributes={{\n            'aria-label': 'Close',\n          }}\n        >\n          <XMarkIconOutline />\n        </CleanIconButton>\n      ) : null,\n    [handleClose, isCloseable, type],\n  );\n\n  const resizableContent = (\n    <Resizable\n      as={Component}\n      defaultSize={{\n        height: '100%',\n        width: 'auto',\n      }}\n      {...resizeableProps}\n      className={classes}\n      style={{\n        position: resizableStylePosition,\n        ...style,\n        ...resizeableProps?.style,\n      }}\n      boundsByDirection={true}\n      bounds=\"parent\"\n      handleStyles={{\n        /*\n         * Small offset so the handle is easier to hit when the drawer content is scrollable.\n         */\n        ...(position === 'left' && { right: { right: '-8px' } }),\n        ...(position === 'right' && { left: { left: '-8px' } }),\n      }}\n      enable={{\n        bottom: false,\n        bottomLeft: false,\n        bottomRight: false,\n        left: position === 'right',\n        right: position === 'left',\n        top: false,\n        topLeft: false,\n        topRight: false,\n      }}\n      handleComponent={\n        position === 'left'\n          ? {\n              right: (\n                <DrawerResizeHandle\n                  handleSide=\"right\"\n                  onResizeBy={handleResizeBy}\n                  valueMax={parsePixelSize(resizeableProps?.maxWidth)}\n                  valueMin={parsePixelSize(resizeableProps?.minWidth)}\n                  valueNow={resizeWidth}\n                />\n              ),\n            }\n          : {\n              left: (\n                <DrawerResizeHandle\n                  handleSide=\"left\"\n                  onResizeBy={handleResizeBy}\n                  valueMax={parsePixelSize(resizeableProps?.maxWidth)}\n                  valueMin={parsePixelSize(resizeableProps?.minWidth)}\n                  valueNow={resizeWidth}\n                />\n              ),\n            }\n      }\n      onResize={handleResize}\n      ref={resizableMergedRef}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {closeButton}\n      {children}\n    </Resizable>\n  );\n\n  const regularContent = (\n    <Component\n      className={classNames(classes)}\n      style={style}\n      ref={ref}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      {closeButton}\n      {children}\n    </Component>\n  );\n\n  /** what content to render*/\n  const content = isResizeable ? resizableContent : regularContent;\n\n  // const floatingRefs = useMergeRefs([refs.setFloating, refs.setReference]);\n\n  /** modal behavior */\n  if (type === 'modal' && isExpanded) {\n    return (\n      <FloatingPortal {...portalProps}>\n        <FloatingOverlay\n          className=\"ndl-drawer-overlay-root\"\n          lockScroll={true}\n        />\n        <FloatingFocusManager\n          disabled={!isExpanded}\n          context={context}\n          modal={true}\n          returnFocus={true}\n          initialFocus={0}\n        >\n          <div\n            ref={refs.setFloating}\n            {...getFloatingProps()}\n            aria-label={ariaLabel}\n            aria-modal=\"true\"\n          >\n            {content}\n          </div>\n        </FloatingFocusManager>\n      </FloatingPortal>\n    );\n  }\n\n  return (\n    <ConditionalWrap\n      shouldWrap={isPortaled && type === 'overlay' && isExpanded}\n      wrap={(wrapChildren) => (\n        <FloatingPortal preserveTabOrder={true} {...portalProps}>\n          {wrapChildren}\n        </FloatingPortal>\n      )}\n    >\n      <FloatingFocusManager\n        disabled={!isExpanded || type === 'push'}\n        context={context}\n        modal={true}\n        initialFocus={0}\n      >\n        <div\n          ref={refs.setFloating}\n          {...getFloatingProps()}\n          aria-label={ariaLabel}\n        >\n          {content}\n        </div>\n      </FloatingFocusManager>\n    </ConditionalWrap>\n  );\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/esm/drawer/stories/drawer-overlay.story.js

@@ -21,13 +21,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import { Drawer, FilledButton } from '@neo4j-ndl/react';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 const Component = () => {
     const [isExpanded, setIsExpanded] = useState(false);
-    const Placeholder = () => (_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: _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: _jsx(FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
-                    'aria-expanded': isExpanded,
-                }, children: "Press to show the Drawer" }) }) }));
-    return (_jsxs("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [_jsxs(Drawer, { isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), type: "overlay", ariaLabel: "Drawer", closeOnClickOutside: true, closeOnFocusOut: true, style: { maxWidth: '400px' }, children: [_jsx(Drawer.Header, { children: "Drawer" }), _jsxs(Drawer.Body, { children: ["If you use an overlay drawer, and there is a risk that it covers interactive elements, you should set ", _jsx("code", { children: "closeOnClickOutside" }), ' ', "and ", _jsx("code", { children: "closeOnFocusOut" }), " to true. This prevents it from hiding focus, making it more accessible."] }), _jsx(Drawer.Actions, { children: _jsx(FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), _jsx(Placeholder, {})] }));
+    const referenceElement = useRef(null);
+    return (_jsxs("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [_jsxs(Drawer, { isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), type: "overlay", ariaLabel: "Drawer", position: "left", closeOnClickOutside: true, closeOnEscape: true, isCloseable: true, style: { maxWidth: '400px' }, children: [_jsx(Drawer.Header, { children: "Drawer" }), _jsxs(Drawer.Body, { children: ["If you use an overlay drawer, and there is a risk that it covers interactive elements, you should set ", _jsx("code", { children: "closeOnClickOutside" }), ' ', "and ", _jsx("code", { children: "closeOnFocusOut" }), " to true. This prevents it from hiding focus, making it more accessible."] }), _jsx(Drawer.Actions, { children: _jsx(FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), _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: _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: _jsx(FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
+                            'aria-expanded': isExpanded,
+                        }, ref: referenceElement, children: "Press to show the Drawer" }) }) })] }));
 };
 export default Component;
 //# sourceMappingURL=drawer-overlay.story.js.map

package/lib/esm/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,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,SAAS,EAAC,gGAAgG,YAC7G,cAAK,SAAS,EAAC,wIAAwI,YACrJ,KAAC,YAAY,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,eAAK,SAAS,EAAC,2EAA2E,aACxF,MAAC,MAAM,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,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,MAAC,MAAM,CAAC,IAAI,yHAE2B,iDAAgC,EAAC,GAAG,UACrE,6CAA4B,gFAEpB,EACd,KAAC,MAAM,CAAC,OAAO,cACb,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,EACT,KAAC,WAAW,KAAG,IACX,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\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"]}
+{"version":3,"file":"drawer-overlay.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-overlay.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,gBAAgB,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAEzD,OAAO,CACL,eAAK,SAAS,EAAC,2EAA2E,aACxF,MAAC,MAAM,IACL,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,IAAI,EAAC,SAAS,EACd,SAAS,EAAC,QAAQ,EAClB,QAAQ,EAAC,MAAM,EACf,mBAAmB,EAAE,IAAI,EACzB,aAAa,EAAE,IAAI,EACnB,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,aAE5B,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,MAAC,MAAM,CAAC,IAAI,yHAE2B,iDAAgC,EAAC,GAAG,UACrE,6CAA4B,gFAEpB,EACd,KAAC,MAAM,CAAC,OAAO,cACb,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,EACT,cAAK,SAAS,EAAC,gGAAgG,YAC7G,cAAK,SAAS,EAAC,wIAAwI,YACrJ,KAAC,YAAY,IACX,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,EAClC,cAAc,EAAE;4BACd,eAAe,EAAE,UAAU;yBAC5B,EACD,GAAG,EAAE,gBAAgB,yCAGR,GACX,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useRef, useState } from 'react';\n\nconst Component = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const referenceElement = useRef<HTMLButtonElement>(null);\n\n  return (\n    <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n      <Drawer\n        isExpanded={isExpanded}\n        onExpandedChange={() => setIsExpanded(false)}\n        type=\"overlay\"\n        ariaLabel=\"Drawer\"\n        position=\"left\"\n        closeOnClickOutside={true}\n        closeOnEscape={true}\n        isCloseable={true}\n        style={{ maxWidth: '400px' }}\n      >\n        <Drawer.Header>Drawer</Drawer.Header>\n        <Drawer.Body>\n          If you use an overlay drawer, 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      <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n        <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n          <FilledButton\n            onClick={() => setIsExpanded(true)}\n            htmlAttributes={{\n              'aria-expanded': isExpanded,\n            }}\n            ref={referenceElement}\n          >\n            Press to show the Drawer\n          </FilledButton>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Component;\n"]}

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

@@ -26,12 +26,14 @@ const Component = () => {
     const [isExpanded, setIsExpanded] = useState(false);
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const anchorRef = useRef(null);
-    const Placeholder = () => (_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: _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: _jsx(FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
-                    'aria-expanded': isExpanded,
-                }, children: "Press to show the Drawer" }) }) }));
+    const referenceElementRef = useRef(null);
     return (_jsxs("div", { className: "n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden", children: [_jsxs(Drawer, { type: "modal", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "left", closeOnEscape: true, ariaLabel: "Drawer", htmlAttributes: {
                     id: 'drawer',
-                }, children: [_jsx(Drawer.Header, { children: "Drawer" }), _jsxs(Drawer.Body, { children: ["Lorem ipsum dolor sit amet.", ' ', _jsx(DropdownButton, { ref: anchorRef, onClick: () => setIsMenuOpen(true), children: "Dropdown Button" }), _jsxs(Menu, { strategy: "fixed", portalTarget: document.getElementById('drawer'), anchorRef: anchorRef, isOpen: isMenuOpen, onClose: () => setIsMenuOpen(false), children: [_jsx(Menu.Item, { title: "Menu Item 1" }), _jsx(Menu.Item, { title: "Menu Item 2" }), _jsx(Menu.Item, { title: "Menu Item 3" })] })] }), _jsx(Drawer.Actions, { children: _jsx(FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), _jsx(Placeholder, {})] }));
+                }, children: [_jsx(Drawer.Header, { children: "Drawer" }), _jsxs(Drawer.Body, { children: ["Lorem ipsum dolor sit amet.", ' ', _jsx(DropdownButton, { ref: anchorRef, onClick: () => setIsMenuOpen(true), children: "Dropdown Button" }), _jsxs(Menu, { strategy: "fixed", portalTarget: document.getElementById('drawer'), anchorRef: anchorRef, isOpen: isMenuOpen, onClose: (_event) => {
+                                    setIsMenuOpen(false);
+                                }, children: [_jsx(Menu.Item, { title: "Menu Item 1" }), _jsx(Menu.Item, { title: "Menu Item 2" }), _jsx(Menu.Item, { title: "Menu Item 3" })] })] }), _jsx(Drawer.Actions, { children: _jsx(FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), _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: _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: _jsx(FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
+                            'aria-expanded': isExpanded,
+                        }, ref: referenceElementRef, children: "Press to show the Drawer" }) }) })] }));
 };
 export default Component;
 //# sourceMappingURL=drawer-portaled.story.js.map

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

package/lib/types/drawer/Drawer.d.ts

@@ -43,22 +43,20 @@ type DrawerProps = {
     /** Whether to portal the content. Only applies when type is "overlay". Type "modal" is always portaled.*/
     isPortaled?: boolean;
     /**
-     * Whether pressing Escape closes the drawer.
+     * Whether pressing Escape closes the drawer. Should be set to true for overlay drawers.
      * - When type is "modal", this defaults to true.
      * - When type is "overlay", this defaults to false.
      * - When type is "push", no effect.
      */
     closeOnEscape?: boolean;
     /**
-     * When type is "overlay", whether clicking outside the drawer closes it.
+     * When type is "overlay", whether clicking outside the drawer closes it. Should be set to true for overlay drawers.
      * - When type is "overlay" or "modal", this defaults to false.
      * - When type is "push", no effect.
      */
     closeOnClickOutside?: boolean;
     /**
-     * Whether tabbing focus outside the drawer closes it.
-     * - When type is "overlay", this defaults to false.
-     * - When type is "push" or "modal", no effect.
+     *  @deprecated overlay are now focus trapped by default, this prop has no effect anymore.
      */
     closeOnFocusOut?: boolean;
     /** The content to display within the drawer. */
@@ -93,7 +91,7 @@ type DrawerBodyProps = {
     htmlAttributes?: HtmlAttributes<'div'>;
 };
 declare const Drawer: {
-    <T extends React.ElementType = "div">({ children, className, isExpanded, onExpandedChange, position, type, isResizeable, resizeableProps, isCloseable, isPortaled, portalProps, closeOnEscape, closeOnClickOutside, closeOnFocusOut, ariaLabel, htmlAttributes, style, ref, as, ...restProps }: PolymorphicCommonProps<T, DrawerProps>): import("react/jsx-runtime").JSX.Element | null;
+    <T extends React.ElementType = "div">({ children, className, isExpanded, onExpandedChange, position, type, isResizeable, resizeableProps, isCloseable, isPortaled, portalProps, closeOnEscape, closeOnClickOutside, ariaLabel, htmlAttributes, style, ref, as, ...restProps }: PolymorphicCommonProps<T, DrawerProps>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     Actions: ({ children, className, htmlAttributes, ...restProps }: DrawerActionsProps) => import("react/jsx-runtime").JSX.Element;

package/lib/types/drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAGL,cAAc,EAMf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAO1B,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvC,KAAK,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,KAAK,WAAW,GAAG;IACjB,4EAA4E;IAC5E,UAAU,EAAE,OAAO,CAAC;IAEpB,6HAA6H;IAC7H,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C,yFAAyF;IACzF,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,6FAA6F;IAC7F,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,iFAAiF;IACjF,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,wJAAwJ;IACxJ,eAAe,CAAC,EAAE,cAAc,CAAC;IAEjC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,0GAA0G;IAC1G,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAGxB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAG9B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,gDAAgD;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;CACrD,GAAG,CACA;IACE,IAAI,EAAE,OAAO,CAAC;IACd,0GAA0G;IAC1G,SAAS,EAAE,MAAM,CAAC;CACnB,GACD;IACE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CACJ,CAAC;AA0WF,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,cAAc,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;CACvC,CAAC;AA8BF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAiBF,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAmBF,QAAA,MAAM,MAAM;KA3WV,CAAC,SAAS,KAAK,CAAC,WAAW,oQAsB1B,sBAAsB,CAAC,CAAC,EAAE,WAAW,CAAC;;;qEAoTtC,kBAAkB;kEAqBlB,eAAe;oEAvDf,iBAAiB;CAuElB,CAAC;AAEH,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAGL,cAAc,EAMf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,cAAc,EAMpB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAO1B,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvC,KAAK,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,KAAK,WAAW,GAAG;IACjB,4EAA4E;IAC5E,UAAU,EAAE,OAAO,CAAC;IAEpB,6HAA6H;IAC7H,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C,yFAAyF;IACzF,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,6FAA6F;IAC7F,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,iFAAiF;IACjF,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,wJAAwJ;IACxJ,eAAe,CAAC,EAAE,cAAc,CAAC;IAEjC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,0GAA0G;IAC1G,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAGxB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAG9B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,gDAAgD;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;CACrD,GAAG,CACA;IACE,IAAI,EAAE,OAAO,CAAC;IACd,0GAA0G;IAC1G,SAAS,EAAE,MAAM,CAAC;CACnB,GACD;IACE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CACJ,CAAC;AAmWF,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,cAAc,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;CACvC,CAAC;AA8BF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAiBF,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAmBF,QAAA,MAAM,MAAM;KApWV,CAAC,SAAS,KAAK,CAAC,WAAW,mPAqB1B,sBAAsB,CAAC,CAAC,EAAE,WAAW,CAAC;;;qEA8StC,kBAAkB;kEAqBlB,eAAe;oEAvDf,iBAAiB;CAuElB,CAAC;AAEH,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "4.9.25",
+  "version": "4.9.27",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [
@@ -87,7 +87,7 @@
     "@tanstack/react-table": "8.21.3",
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
-    "@neo4j-ndl/base": "^4.9.13"
+    "@neo4j-ndl/base": "^4.9.15"
   },
   "dependencies": {
     "@dnd-kit/core": "6.3.1",