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

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

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

Files changed (1185) hide show

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

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

package/lib/esm/drawer/stories/drawer-full.story.js CHANGED Viewed

@@ -24,10 +24,10 @@ import { Checkbox, Drawer, FilledButton, TextInput } from '@neo4j-ndl/react';
 import { useState } from 'react';
 const Component = () => {
     const [isExpanded, setIsExpanded] = useState(true);
-    const Placeholder = () => (_jsx("div", { className: "w-full n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16", children: _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: {
+    const Placeholder = () => (_jsx("div", { className: "w-full size-full flex flex-col items-center justify-center rounded-md p-token-16", children: _jsx("div", { className: "border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center 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, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), isResizeable: true, resizeableProps: {
+    return (_jsxs("div", { className: "h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden", children: [_jsxs(Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), isResizeable: true, resizeableProps: {
                     maxWidth: '400px',
                     minWidth: '300px',
                 }, isCloseable: true, isPortaled: false, children: [_jsx(Drawer.Header, { children: "Drawer Header" }), _jsxs(Drawer.Body, { children: [_jsx(TextInput, { showRequiredOrOptionalLabel: true, moreInformationText: "some information", label: "Label", isDisabled: false, isReadOnly: false, helpText: "Friendly text", isFluid: true }), _jsx("br", {}), _jsx(TextInput, { label: "Some input", value: "something" }), _jsx("br", {}), _jsx(Checkbox, { label: "Checkbox label" }), _jsx("br", {}), "Some example of something.", _jsx("br", {}), _jsx(TextInput, { label: "Some input", isDisabled: true, value: "something" }), _jsx("br", {}), _jsx(TextInput, { showRequiredOrOptionalLabel: true, moreInformationText: "some information", label: "Label", isDisabled: false, isReadOnly: false, helpText: "Friendly text", isFluid: true }), _jsx("br", {}), "Some example of something.", _jsx("br", {}), _jsx(TextInput, { label: "Some input", value: "something" }), _jsx("br", {}), _jsx(Checkbox, { label: "Checkbox label" }), _jsx("br", {}), _jsx(TextInput, { label: "Some input", value: "something" })] }), _jsx(Drawer.Actions, { children: _jsx(FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), _jsx(Placeholder, {})] }));

package/lib/esm/drawer/stories/drawer-full.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer-full.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-full.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEnD,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,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,YAAY,EAAE,IAAI,EAClB,eAAe,EAAE;oBACf,QAAQ,EAAE,OAAO;oBACjB,QAAQ,EAAE,OAAO;iBAClB,EACD,WAAW,EAAE,IAAI,EACjB,UAAU,EAAE,KAAK,aAEjB,KAAC,MAAM,CAAC,MAAM,gCAA8B,EAC5C,MAAC,MAAM,CAAC,IAAI,eACV,KAAC,SAAS,IACR,2BAA2B,EAAE,IAAI,EACjC,mBAAmB,EAAC,kBAAkB,EACtC,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,eAAe,EACxB,OAAO,EAAE,IAAI,GACb,EACF,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,EAClD,cAAM,EACN,KAAC,QAAQ,IAAC,KAAK,EAAC,gBAAgB,GAAG,EACnC,cAAM,gCAEN,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,UAAU,EAAE,IAAI,EAAE,KAAK,EAAC,WAAW,GAAG,EACpE,cAAM,EACN,KAAC,SAAS,IACR,2BAA2B,EAAE,IAAI,EACjC,mBAAmB,EAAC,kBAAkB,EACtC,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,eAAe,EACxB,OAAO,EAAE,IAAI,GACb,EACF,cAAM,gCAEN,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,EAClD,cAAM,EACN,KAAC,QAAQ,IAAC,KAAK,EAAC,gBAAgB,GAAG,EACnC,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,IACtC,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 { Checkbox, Drawer, FilledButton, TextInput } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [isExpanded, setIsExpanded] = useState(true);\n\n const Placeholder = () => (\n <div className=\"w-full n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16\">\n <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n <FilledButton\n onClick={() => setIsExpanded(true)}\n htmlAttributes={{\n 'aria-expanded': isExpanded,\n }}\n >\n Press to show the Drawer\n </FilledButton>\n </div>\n </div>\n );\n\n return (\n <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n <Drawer\n type=\"push\"\n isExpanded={isExpanded}\n onExpandedChange={() => setIsExpanded(false)}\n isResizeable={true}\n resizeableProps={{\n maxWidth: '400px',\n minWidth: '300px',\n }}\n isCloseable={true}\n isPortaled={false}\n >\n <Drawer.Header>Drawer Header</Drawer.Header>\n <Drawer.Body>\n <TextInput\n showRequiredOrOptionalLabel={true}\n moreInformationText=\"some information\"\n label=\"Label\"\n isDisabled={false}\n isReadOnly={false}\n helpText=\"Friendly text\"\n isFluid={true}\n />\n <br />\n <TextInput label=\"Some input\" value=\"something\" />\n <br />\n <Checkbox label=\"Checkbox label\" />\n <br />\n Some example of something.\n <br />\n <TextInput label=\"Some input\" isDisabled={true} value=\"something\" />\n <br />\n <TextInput\n showRequiredOrOptionalLabel={true}\n moreInformationText=\"some information\"\n label=\"Label\"\n isDisabled={false}\n isReadOnly={false}\n helpText=\"Friendly text\"\n isFluid={true}\n />\n <br />\n Some example of something.\n <br />\n <TextInput label=\"Some input\" value=\"something\" />\n <br />\n <Checkbox label=\"Checkbox label\" />\n <br />\n <TextInput label=\"Some input\" value=\"something\" />\n </Drawer.Body>\n <Drawer.Actions>\n <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n Close\n </FilledButton>\n </Drawer.Actions>\n </Drawer>\n <Placeholder />\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"drawer-full.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-full.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,SAAS,EAAC,kFAAkF,YAC/F,cAAK,SAAS,EAAC,sHAAsH,YACnI,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,iEAAiE,aAC9E,MAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,YAAY,EAAE,IAAI,EAClB,eAAe,EAAE;oBACf,QAAQ,EAAE,OAAO;oBACjB,QAAQ,EAAE,OAAO;iBAClB,EACD,WAAW,EAAE,IAAI,EACjB,UAAU,EAAE,KAAK,aAEjB,KAAC,MAAM,CAAC,MAAM,gCAA8B,EAC5C,MAAC,MAAM,CAAC,IAAI,eACV,KAAC,SAAS,IACR,2BAA2B,EAAE,IAAI,EACjC,mBAAmB,EAAC,kBAAkB,EACtC,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,eAAe,EACxB,OAAO,EAAE,IAAI,GACb,EACF,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,EAClD,cAAM,EACN,KAAC,QAAQ,IAAC,KAAK,EAAC,gBAAgB,GAAG,EACnC,cAAM,gCAEN,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,UAAU,EAAE,IAAI,EAAE,KAAK,EAAC,WAAW,GAAG,EACpE,cAAM,EACN,KAAC,SAAS,IACR,2BAA2B,EAAE,IAAI,EACjC,mBAAmB,EAAC,kBAAkB,EACtC,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,eAAe,EACxB,OAAO,EAAE,IAAI,GACb,EACF,cAAM,gCAEN,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,EAClD,cAAM,EACN,KAAC,QAAQ,IAAC,KAAK,EAAC,gBAAgB,GAAG,EACnC,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,IACtC,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 { Checkbox, Drawer, FilledButton, TextInput } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [isExpanded, setIsExpanded] = useState(true);\n\n const Placeholder = () => (\n <div className=\"w-full size-full flex flex-col items-center justify-center rounded-md p-token-16\">\n <div className=\"border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md\">\n <FilledButton\n onClick={() => setIsExpanded(true)}\n htmlAttributes={{\n 'aria-expanded': isExpanded,\n }}\n >\n Press to show the Drawer\n </FilledButton>\n </div>\n </div>\n );\n\n return (\n <div className=\"h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden\">\n <Drawer\n type=\"push\"\n isExpanded={isExpanded}\n onExpandedChange={() => setIsExpanded(false)}\n isResizeable={true}\n resizeableProps={{\n maxWidth: '400px',\n minWidth: '300px',\n }}\n isCloseable={true}\n isPortaled={false}\n >\n <Drawer.Header>Drawer Header</Drawer.Header>\n <Drawer.Body>\n <TextInput\n showRequiredOrOptionalLabel={true}\n moreInformationText=\"some information\"\n label=\"Label\"\n isDisabled={false}\n isReadOnly={false}\n helpText=\"Friendly text\"\n isFluid={true}\n />\n <br />\n <TextInput label=\"Some input\" value=\"something\" />\n <br />\n <Checkbox label=\"Checkbox label\" />\n <br />\n Some example of something.\n <br />\n <TextInput label=\"Some input\" isDisabled={true} value=\"something\" />\n <br />\n <TextInput\n showRequiredOrOptionalLabel={true}\n moreInformationText=\"some information\"\n label=\"Label\"\n isDisabled={false}\n isReadOnly={false}\n helpText=\"Friendly text\"\n isFluid={true}\n />\n <br />\n Some example of something.\n <br />\n <TextInput label=\"Some input\" value=\"something\" />\n <br />\n <Checkbox label=\"Checkbox label\" />\n <br />\n <TextInput label=\"Some input\" value=\"something\" />\n </Drawer.Body>\n <Drawer.Actions>\n <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n Close\n </FilledButton>\n </Drawer.Actions>\n </Drawer>\n <Placeholder />\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/esm/drawer/stories/drawer-not-closeable.story.js CHANGED Viewed

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

package/lib/esm/drawer/stories/drawer-not-closeable.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer-not-closeable.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-not-closeable.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,SAAS,EAAC,~~gGAAgG~~,~~YAC7G~~,cAAK,SAAS,EAAC,~~wIAAwI~~,GAAO,~~GAC1J~~,CACP,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,~~2EAA2E~~,~~aACxF~~,MAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAC,MAAM,EAAC,WAAW,EAAE,KAAK,aACtE,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,IAAI,8CAA0C,IAC/C,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 } from '@neo4j-ndl/react';\n\nconst Component = () => {\n const Placeholder = () => (\n <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\"></div>\n </div>\n );\n\n return (\n <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n <Drawer type=\"push\" isExpanded={true} position=\"left\" isCloseable={false}>\n <Drawer.Header>Drawer</Drawer.Header>\n <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n </Drawer>\n <Placeholder />\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"drawer-not-closeable.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-not-closeable.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,SAAS,EAAC,kFAAkF,YAC/F,cAAK,SAAS,EAAC,sHAAsH,GAAO,GACxI,CACP,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,iEAAiE,aAC9E,MAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAC,MAAM,EAAC,WAAW,EAAE,KAAK,aACtE,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,IAAI,8CAA0C,IAC/C,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 } from '@neo4j-ndl/react';\n\nconst Component = () => {\n const Placeholder = () => (\n <div className=\"size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full\">\n <div className=\"border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md\"></div>\n </div>\n );\n\n return (\n <div className=\"h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden\">\n <Drawer type=\"push\" isExpanded={true} position=\"left\" isCloseable={false}>\n <Drawer.Header>Drawer</Drawer.Header>\n <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n </Drawer>\n <Placeholder />\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/esm/drawer/stories/drawer-overlay.story.js CHANGED Viewed

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

package/lib/esm/drawer/stories/drawer-overlay.story.js.map CHANGED Viewed

	@@ -1 +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,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,+DACmC,GAAG,EAChD,~~iDAAgC~~,~~6MAIpB~~,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, you should set{' '}\n <code>~~closeOnClickOutside~~</code> to true. This is to align the ~~mouse~~\n behavior with the keyboard behavior, as focus is trapped inside ~~the~~\n drawer. This is to prevent the drawer from covering interactive\n elements outside the drawer.\n </Drawer.Body>\n <Drawer.Actions>\n <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n Close\n </FilledButton>\n </Drawer.Actions>\n </Drawer>\n <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n <FilledButton\n onClick={() => setIsExpanded(true)}\n htmlAttributes={{\n 'aria-expanded': isExpanded,\n }}\n ref={referenceElement}\n >\n Press to show the Drawer\n </FilledButton>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}
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,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,iEAAiE,aAC9E,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,yBAAyB,EAAE,IAAI,EAC/B,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,aAE5B,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,MAAC,MAAM,CAAC,IAAI,+DACmC,GAAG,EAChD,uDAAsC,6MAI1B,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,kFAAkF,YAC/F,cAAK,SAAS,EAAC,sHAAsH,YACnI,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=\"h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden\">\n <Drawer\n isExpanded={isExpanded}\n onExpandedChange={() => setIsExpanded(false)}\n type=\"overlay\"\n ariaLabel=\"Drawer\"\n position=\"left\"\n shouldCloseOnClickOutside={true}\n isCloseable={true}\n style={{ maxWidth: '400px' }}\n >\n <Drawer.Header>Drawer</Drawer.Header>\n <Drawer.Body>\n If you use an overlay drawer, you should set{' '}\n <code>shouldCloseOnClickOutside</code> to true. This is to align the\n mouse behavior with the keyboard behavior, as focus is trapped inside\n the drawer. This is to prevent the drawer from covering interactive\n elements outside the drawer.\n </Drawer.Body>\n <Drawer.Actions>\n <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n Close\n </FilledButton>\n </Drawer.Actions>\n </Drawer>\n <div className=\"size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full\">\n <div className=\"border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md\">\n <FilledButton\n onClick={() => setIsExpanded(true)}\n htmlAttributes={{\n 'aria-expanded': isExpanded,\n }}\n ref={referenceElement}\n >\n Press to show the Drawer\n </FilledButton>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}

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

@@ -27,11 +27,11 @@ const Component = () => {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
     const anchorRef = useRef(null);
     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: {
+    return (_jsxs("div", { className: "h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden", children: [_jsxs(Drawer, { type: "modal", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "left", shouldCloseOnEscape: 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: (_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: {
+                                }, 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: "size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full", children: _jsx("div", { className: "border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md", children: _jsx(FilledButton, { onClick: () => setIsExpanded(true), htmlAttributes: {
                             'aria-expanded': isExpanded,
                         }, ref: referenceElementRef, children: "Press to show the Drawer" }) }) })] }));
 };

package/lib/esm/drawer/stories/drawer-portaled.story.js.map CHANGED Viewed

	@@ -1 +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;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"]}
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;IACzD,MAAM,mBAAmB,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IAEnE,OAAO,CACL,eAAK,SAAS,EAAC,iEAAiE,aAC9E,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,mBAAmB,EAAE,IAAI,EACzB,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,kFAAkF,YAC/F,cAAK,SAAS,EAAC,sHAAsH,YACnI,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=\"h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden\">\n <Drawer\n type=\"modal\"\n isExpanded={isExpanded}\n onExpandedChange={() => setIsExpanded(false)}\n position=\"left\"\n shouldCloseOnEscape={true}\n ariaLabel=\"Drawer\"\n htmlAttributes={{\n id: 'drawer',\n }}\n >\n <Drawer.Header>Drawer</Drawer.Header>\n <Drawer.Body>\n Lorem ipsum dolor sit amet.{' '}\n <DropdownButton ref={anchorRef} onClick={() => setIsMenuOpen(true)}>\n Dropdown Button\n </DropdownButton>\n <Menu\n strategy=\"fixed\"\n portalTarget={document.getElementById('drawer')}\n anchorRef={anchorRef}\n isOpen={isMenuOpen}\n onClose={(_event) => {\n setIsMenuOpen(false);\n }}\n >\n <Menu.Item title=\"Menu Item 1\" />\n <Menu.Item title=\"Menu Item 2\" />\n <Menu.Item title=\"Menu Item 3\" />\n </Menu>\n </Drawer.Body>\n <Drawer.Actions>\n <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n Close\n </FilledButton>\n </Drawer.Actions>\n </Drawer>\n <div className=\"size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full\">\n <div className=\"border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md\">\n <FilledButton\n onClick={() => setIsExpanded(true)}\n htmlAttributes={{\n 'aria-expanded': isExpanded,\n }}\n ref={referenceElementRef}\n >\n Press to show the Drawer\n </FilledButton>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/esm/drawer/stories/drawer-push.story.js CHANGED Viewed

@@ -23,10 +23,10 @@ import { Drawer, FilledButton } from '@neo4j-ndl/react';
 import { useState } from 'react';
 const Component = () => {
     const [isExpanded, setIsExpanded] = useState(true);
-    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: {
+    const Placeholder = () => (_jsx("div", { className: "size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full", children: _jsx("div", { className: "border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center 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, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), children: [_jsx(Drawer.Header, { children: "Drawer" }), _jsx(Drawer.Body, { children: "Lorem ipsum dolor sit amet." }), _jsx(Drawer.Actions, { children: _jsx(FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), _jsx(Placeholder, {})] }));
+    return (_jsxs("div", { className: "h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden", children: [_jsxs(Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), children: [_jsx(Drawer.Header, { children: "Drawer" }), _jsx(Drawer.Body, { children: "Lorem ipsum dolor sit amet." }), _jsx(Drawer.Actions, { children: _jsx(FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), _jsx(Placeholder, {})] }));
 };
 export default Component;
 //# sourceMappingURL=drawer-push.story.js.map

package/lib/esm/drawer/stories/drawer-push.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer-push.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-push.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,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,IAAI,CAAC,CAAC;IAEnD,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,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,aAE5C,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,IAAI,8CAA0C,EACtD,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 */\n\nimport { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [isExpanded, setIsExpanded] = useState(true);\n\n const Placeholder = () => (\n <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n <FilledButton\n onClick={() => setIsExpanded(true)}\n htmlAttributes={{\n 'aria-expanded': isExpanded,\n }}\n >\n Press to show the Drawer\n </FilledButton>\n </div>\n </div>\n );\n\n return (\n <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n <Drawer\n type=\"push\"\n isExpanded={isExpanded}\n onExpandedChange={() => setIsExpanded(false)}\n >\n <Drawer.Header>Drawer</Drawer.Header>\n <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n <Drawer.Actions>\n <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n Close\n </FilledButton>\n </Drawer.Actions>\n </Drawer>\n <Placeholder />\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"drawer-push.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-push.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,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,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,SAAS,EAAC,kFAAkF,YAC/F,cAAK,SAAS,EAAC,sHAAsH,YACnI,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,iEAAiE,aAC9E,MAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,aAE5C,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,IAAI,8CAA0C,EACtD,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 */\n\nimport { Drawer, FilledButton } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [isExpanded, setIsExpanded] = useState(true);\n\n const Placeholder = () => (\n <div className=\"size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full\">\n <div className=\"border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md\">\n <FilledButton\n onClick={() => setIsExpanded(true)}\n htmlAttributes={{\n 'aria-expanded': isExpanded,\n }}\n >\n Press to show the Drawer\n </FilledButton>\n </div>\n </div>\n );\n\n return (\n <div className=\"h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden\">\n <Drawer\n type=\"push\"\n isExpanded={isExpanded}\n onExpandedChange={() => setIsExpanded(false)}\n >\n <Drawer.Header>Drawer</Drawer.Header>\n <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n <Drawer.Actions>\n <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n Close\n </FilledButton>\n </Drawer.Actions>\n </Drawer>\n <Placeholder />\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/esm/drawer/stories/drawer-resizable.story.js CHANGED Viewed

@@ -24,10 +24,10 @@ import { Drawer, FilledButton } from '@neo4j-ndl/react';
 import { useState } from 'react';
 const Component = () => {
     const [isExpanded, setIsExpanded] = useState(true);
-    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: {
+    const Placeholder = () => (_jsx("div", { className: "size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full", children: _jsx("div", { className: "border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center 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, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "left", isResizeable: true, resizeableProps: {
+    return (_jsxs("div", { className: "h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden", children: [_jsxs(Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "left", isResizeable: true, resizeableProps: {
                     maxWidth: '400px',
                     minWidth: '300px',
                 }, children: [_jsx(Drawer.Header, { children: "Drawer" }), _jsx(Drawer.Body, { children: "Lorem ipsum dolor sit amet." }), _jsx(Drawer.Actions, { children: _jsx(FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] }), _jsx(Placeholder, {})] }));

package/lib/esm/drawer/stories/drawer-resizable.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer-resizable.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-resizable.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,IAAI,CAAC,CAAC;IAEnD,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,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAC,MAAM,EACf,YAAY,EAAE,IAAI,EAClB,eAAe,EAAE;oBACf,QAAQ,EAAE,OAAO;oBACjB,QAAQ,EAAE,OAAO;iBAClB,aAED,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,IAAI,8CAA0C,EACtD,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(true);\n\n const Placeholder = () => (\n <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n <FilledButton\n onClick={() => setIsExpanded(true)}\n htmlAttributes={{\n 'aria-expanded': isExpanded,\n }}\n >\n Press to show the Drawer\n </FilledButton>\n </div>\n </div>\n );\n\n return (\n <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n <Drawer\n type=\"push\"\n isExpanded={isExpanded}\n onExpandedChange={() => setIsExpanded(false)}\n position=\"left\"\n isResizeable={true}\n resizeableProps={{\n maxWidth: '400px',\n minWidth: '300px',\n }}\n >\n <Drawer.Header>Drawer</Drawer.Header>\n <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n <Drawer.Actions>\n <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n Close\n </FilledButton>\n </Drawer.Actions>\n </Drawer>\n <Placeholder />\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"drawer-resizable.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-resizable.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,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,SAAS,EAAC,kFAAkF,YAC/F,cAAK,SAAS,EAAC,sHAAsH,YACnI,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,iEAAiE,aAC9E,MAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAC,MAAM,EACf,YAAY,EAAE,IAAI,EAClB,eAAe,EAAE;oBACf,QAAQ,EAAE,OAAO;oBACjB,QAAQ,EAAE,OAAO;iBAClB,aAED,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,IAAI,8CAA0C,EACtD,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(true);\n\n const Placeholder = () => (\n <div className=\"size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full\">\n <div className=\"border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md\">\n <FilledButton\n onClick={() => setIsExpanded(true)}\n htmlAttributes={{\n 'aria-expanded': isExpanded,\n }}\n >\n Press to show the Drawer\n </FilledButton>\n </div>\n </div>\n );\n\n return (\n <div className=\"h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden\">\n <Drawer\n type=\"push\"\n isExpanded={isExpanded}\n onExpandedChange={() => setIsExpanded(false)}\n position=\"left\"\n isResizeable={true}\n resizeableProps={{\n maxWidth: '400px',\n minWidth: '300px',\n }}\n >\n <Drawer.Header>Drawer</Drawer.Header>\n <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n <Drawer.Actions>\n <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n Close\n </FilledButton>\n </Drawer.Actions>\n </Drawer>\n <Placeholder />\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/esm/drawer/stories/drawer-right-side.story.js CHANGED Viewed

@@ -24,10 +24,10 @@ import { Drawer, FilledButton } from '@neo4j-ndl/react';
 import { useState } from 'react';
 const Component = () => {
     const [isExpanded, setIsExpanded] = useState(true);
-    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: {
+    const Placeholder = () => (_jsx("div", { className: "size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full", children: _jsx("div", { className: "border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center 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: [_jsx(Placeholder, {}), _jsxs(Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "right", children: [_jsx(Drawer.Header, { children: "Drawer" }), _jsx(Drawer.Body, { children: "Lorem ipsum dolor sit amet." }), _jsx(Drawer.Actions, { children: _jsx(FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] })] }));
+    return (_jsxs("div", { className: "h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden", children: [_jsx(Placeholder, {}), _jsxs(Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), position: "right", children: [_jsx(Drawer.Header, { children: "Drawer" }), _jsx(Drawer.Body, { children: "Lorem ipsum dolor sit amet." }), _jsx(Drawer.Actions, { children: _jsx(FilledButton, { onClick: () => setIsExpanded(false), size: "medium", children: "Close" }) })] })] }));
 };
 export default Component;
 //# sourceMappingURL=drawer-right-side.story.js.map

package/lib/esm/drawer/stories/drawer-right-side.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer-right-side.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-right-side.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,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,IAAI,CAAC,CAAC;IAEnD,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~~,KAAC,WAAW,KAAG,EACf,MAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAC,OAAO,aAEhB,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,IAAI,8CAA0C,EACtD,KAAC,MAAM,CAAC,OAAO,cACb,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,IACL,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(true);\n\n const Placeholder = () => (\n <div className=\"n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16 w-full\">\n <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n <FilledButton\n onClick={() => setIsExpanded(true)}\n htmlAttributes={{\n 'aria-expanded': isExpanded,\n }}\n >\n Press to show the Drawer\n </FilledButton>\n </div>\n </div>\n );\n\n return (\n <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n <Placeholder />\n <Drawer\n type=\"push\"\n isExpanded={isExpanded}\n onExpandedChange={() => setIsExpanded(false)}\n position=\"right\"\n >\n <Drawer.Header>Drawer</Drawer.Header>\n <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n <Drawer.Actions>\n <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n Close\n </FilledButton>\n </Drawer.Actions>\n </Drawer>\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"drawer-right-side.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-right-side.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,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,SAAS,EAAC,kFAAkF,YAC/F,cAAK,SAAS,EAAC,sHAAsH,YACnI,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,iEAAiE,aAC9E,KAAC,WAAW,KAAG,EACf,MAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAC5C,QAAQ,EAAC,OAAO,aAEhB,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,KAAC,MAAM,CAAC,IAAI,8CAA0C,EACtD,KAAC,MAAM,CAAC,OAAO,cACb,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE,IAAI,EAAC,QAAQ,sBAEjD,GACA,IACV,IACL,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(true);\n\n const Placeholder = () => (\n <div className=\"size-full flex flex-col items-center justify-center rounded-md p-token-16 w-full\">\n <div className=\"border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md\">\n <FilledButton\n onClick={() => setIsExpanded(true)}\n htmlAttributes={{\n 'aria-expanded': isExpanded,\n }}\n >\n Press to show the Drawer\n </FilledButton>\n </div>\n </div>\n );\n\n return (\n <div className=\"h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden\">\n <Placeholder />\n <Drawer\n type=\"push\"\n isExpanded={isExpanded}\n onExpandedChange={() => setIsExpanded(false)}\n position=\"right\"\n >\n <Drawer.Header>Drawer</Drawer.Header>\n <Drawer.Body>Lorem ipsum dolor sit amet.</Drawer.Body>\n <Drawer.Actions>\n <FilledButton onClick={() => setIsExpanded(false)} size=\"medium\">\n Close\n </FilledButton>\n </Drawer.Actions>\n </Drawer>\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/esm/drawer/stories/drawer-scrollable.story.js CHANGED Viewed

@@ -24,10 +24,10 @@ import { Checkbox, Drawer, FilledButton, TextInput } from '@neo4j-ndl/react';
 import { useState } from 'react';
 const Component = () => {
     const [isExpanded, setIsExpanded] = useState(true);
-    const Placeholder = () => (_jsx("div", { className: "w-full n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16", children: _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: {
+    const Placeholder = () => (_jsx("div", { className: "w-full size-full flex flex-col items-center justify-center rounded-md p-token-16", children: _jsx("div", { className: "border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center 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, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), children: [_jsx(Drawer.Header, { children: "Drawer" }), _jsxs(Drawer.Body, { children: [_jsx(TextInput, { showRequiredOrOptionalLabel: true, moreInformationText: "some information", label: "Label", isDisabled: false, isReadOnly: false, helpText: "Friendly text", isFluid: true }), _jsx("br", {}), _jsx(TextInput, { label: "Some input", value: "something" }), _jsx("br", {}), _jsx(Checkbox, { label: "Checkbox label" }), _jsx("br", {}), "Some example of something.", _jsx("br", {}), _jsx(TextInput, { label: "Some input", isDisabled: true, value: "something" }), _jsx("br", {}), _jsx(TextInput, { showRequiredOrOptionalLabel: true, moreInformationText: "some information", label: "Label", isDisabled: false, isReadOnly: false, helpText: "Friendly text", isFluid: true }), _jsx("br", {}), "Some example of something.", _jsx("br", {}), _jsx(TextInput, { label: "Some input", value: "something" }), _jsx("br", {}), _jsx(Checkbox, { label: "Checkbox label" }), _jsx("br", {}), _jsx(TextInput, { label: "Some input", value: "something" })] })] }), _jsx(Placeholder, {})] }));
+    return (_jsxs("div", { className: "h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden", children: [_jsxs(Drawer, { type: "push", isExpanded: isExpanded, onExpandedChange: () => setIsExpanded(false), children: [_jsx(Drawer.Header, { children: "Drawer" }), _jsxs(Drawer.Body, { children: [_jsx(TextInput, { showRequiredOrOptionalLabel: true, moreInformationText: "some information", label: "Label", isDisabled: false, isReadOnly: false, helpText: "Friendly text", isFluid: true }), _jsx("br", {}), _jsx(TextInput, { label: "Some input", value: "something" }), _jsx("br", {}), _jsx(Checkbox, { label: "Checkbox label" }), _jsx("br", {}), "Some example of something.", _jsx("br", {}), _jsx(TextInput, { label: "Some input", isDisabled: true, value: "something" }), _jsx("br", {}), _jsx(TextInput, { showRequiredOrOptionalLabel: true, moreInformationText: "some information", label: "Label", isDisabled: false, isReadOnly: false, helpText: "Friendly text", isFluid: true }), _jsx("br", {}), "Some example of something.", _jsx("br", {}), _jsx(TextInput, { label: "Some input", value: "something" }), _jsx("br", {}), _jsx(Checkbox, { label: "Checkbox label" }), _jsx("br", {}), _jsx(TextInput, { label: "Some input", value: "something" })] })] }), _jsx(Placeholder, {})] }));
 };
 export default Component;
 //# sourceMappingURL=drawer-scrollable.story.js.map

package/lib/esm/drawer/stories/drawer-scrollable.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer-scrollable.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-scrollable.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEnD,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,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,aAE5C,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,MAAC,MAAM,CAAC,IAAI,eACV,KAAC,SAAS,IACR,2BAA2B,EAAE,IAAI,EACjC,mBAAmB,EAAC,kBAAkB,EACtC,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,eAAe,EACxB,OAAO,EAAE,IAAI,GACb,EACF,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,EAClD,cAAM,EACN,KAAC,QAAQ,IAAC,KAAK,EAAC,gBAAgB,GAAG,EACnC,cAAM,gCAEN,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,UAAU,EAAE,IAAI,EAAE,KAAK,EAAC,WAAW,GAAG,EACpE,cAAM,EACN,KAAC,SAAS,IACR,2BAA2B,EAAE,IAAI,EACjC,mBAAmB,EAAC,kBAAkB,EACtC,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,eAAe,EACxB,OAAO,EAAE,IAAI,GACb,EACF,cAAM,gCAEN,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,EAClD,cAAM,EACN,KAAC,QAAQ,IAAC,KAAK,EAAC,gBAAgB,GAAG,EACnC,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,IACtC,IACP,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 { Checkbox, Drawer, FilledButton, TextInput } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [isExpanded, setIsExpanded] = useState(true);\n\n const Placeholder = () => (\n <div className=\"w-full n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-p-token-16\">\n <div className=\"n-border-dashed n-border-2 n-border-light-primary-bg-strong n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md\">\n <FilledButton\n onClick={() => setIsExpanded(true)}\n htmlAttributes={{\n 'aria-expanded': isExpanded,\n }}\n >\n Press to show the Drawer\n </FilledButton>\n </div>\n </div>\n );\n\n return (\n <div className=\"n-h-[calc(40vh-32px)] n-min-h-[700px] n-flex n-relative n-overflow-hidden\">\n <Drawer\n type=\"push\"\n isExpanded={isExpanded}\n onExpandedChange={() => setIsExpanded(false)}\n >\n <Drawer.Header>Drawer</Drawer.Header>\n <Drawer.Body>\n <TextInput\n showRequiredOrOptionalLabel={true}\n moreInformationText=\"some information\"\n label=\"Label\"\n isDisabled={false}\n isReadOnly={false}\n helpText=\"Friendly text\"\n isFluid={true}\n />\n <br />\n <TextInput label=\"Some input\" value=\"something\" />\n <br />\n <Checkbox label=\"Checkbox label\" />\n <br />\n Some example of something.\n <br />\n <TextInput label=\"Some input\" isDisabled={true} value=\"something\" />\n <br />\n <TextInput\n showRequiredOrOptionalLabel={true}\n moreInformationText=\"some information\"\n label=\"Label\"\n isDisabled={false}\n isReadOnly={false}\n helpText=\"Friendly text\"\n isFluid={true}\n />\n <br />\n Some example of something.\n <br />\n <TextInput label=\"Some input\" value=\"something\" />\n <br />\n <Checkbox label=\"Checkbox label\" />\n <br />\n <TextInput label=\"Some input\" value=\"something\" />\n </Drawer.Body>\n </Drawer>\n <Placeholder />\n </div>\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"drawer-scrollable.story.js","sourceRoot":"","sources":["../../../../src/drawer/stories/drawer-scrollable.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAEnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CACxB,cAAK,SAAS,EAAC,kFAAkF,YAC/F,cAAK,SAAS,EAAC,sHAAsH,YACnI,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,iEAAiE,aAC9E,MAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,aAE5C,KAAC,MAAM,CAAC,MAAM,yBAAuB,EACrC,MAAC,MAAM,CAAC,IAAI,eACV,KAAC,SAAS,IACR,2BAA2B,EAAE,IAAI,EACjC,mBAAmB,EAAC,kBAAkB,EACtC,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,eAAe,EACxB,OAAO,EAAE,IAAI,GACb,EACF,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,EAClD,cAAM,EACN,KAAC,QAAQ,IAAC,KAAK,EAAC,gBAAgB,GAAG,EACnC,cAAM,gCAEN,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,UAAU,EAAE,IAAI,EAAE,KAAK,EAAC,WAAW,GAAG,EACpE,cAAM,EACN,KAAC,SAAS,IACR,2BAA2B,EAAE,IAAI,EACjC,mBAAmB,EAAC,kBAAkB,EACtC,KAAK,EAAC,OAAO,EACb,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,KAAK,EACjB,QAAQ,EAAC,eAAe,EACxB,OAAO,EAAE,IAAI,GACb,EACF,cAAM,gCAEN,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,EAClD,cAAM,EACN,KAAC,QAAQ,IAAC,KAAK,EAAC,gBAAgB,GAAG,EACnC,cAAM,EACN,KAAC,SAAS,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,WAAW,GAAG,IACtC,IACP,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 { Checkbox, Drawer, FilledButton, TextInput } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [isExpanded, setIsExpanded] = useState(true);\n\n const Placeholder = () => (\n <div className=\"w-full size-full flex flex-col items-center justify-center rounded-md p-token-16\">\n <div className=\"border-dashed border-2 border-light-primary-bg-strong size-full flex flex-col items-center justify-center rounded-md\">\n <FilledButton\n onClick={() => setIsExpanded(true)}\n htmlAttributes={{\n 'aria-expanded': isExpanded,\n }}\n >\n Press to show the Drawer\n </FilledButton>\n </div>\n </div>\n );\n\n return (\n <div className=\"h-[calc(40vh-32px)] min-h-[700px] flex relative overflow-hidden\">\n <Drawer\n type=\"push\"\n isExpanded={isExpanded}\n onExpandedChange={() => setIsExpanded(false)}\n >\n <Drawer.Header>Drawer</Drawer.Header>\n <Drawer.Body>\n <TextInput\n showRequiredOrOptionalLabel={true}\n moreInformationText=\"some information\"\n label=\"Label\"\n isDisabled={false}\n isReadOnly={false}\n helpText=\"Friendly text\"\n isFluid={true}\n />\n <br />\n <TextInput label=\"Some input\" value=\"something\" />\n <br />\n <Checkbox label=\"Checkbox label\" />\n <br />\n Some example of something.\n <br />\n <TextInput label=\"Some input\" isDisabled={true} value=\"something\" />\n <br />\n <TextInput\n showRequiredOrOptionalLabel={true}\n moreInformationText=\"some information\"\n label=\"Label\"\n isDisabled={false}\n isReadOnly={false}\n helpText=\"Friendly text\"\n isFluid={true}\n />\n <br />\n Some example of something.\n <br />\n <TextInput label=\"Some input\" value=\"something\" />\n <br />\n <Checkbox label=\"Checkbox label\" />\n <br />\n <TextInput label=\"Some input\" value=\"something\" />\n </Drawer.Body>\n </Drawer>\n <Placeholder />\n </div>\n );\n};\n\nexport default Component;\n"]}

package/lib/esm/dropzone/stories/dropzone-full.story.js CHANGED Viewed

@@ -86,9 +86,9 @@ const Component = () => {
             case UploadState.Uploading:
                 return (_jsx(Dropzone.LoadingProgressBar, { progressBarPrecentage: Math.round(progress) }));
             case UploadState.Success:
-                return (_jsxs("div", { className: "n-flex n-flex-col n-justify-center n-items-center n-gap-y-token-32", children: [_jsx(Typography, { variant: "title-4", className: "n-text-success-text n-font-semibold", children: "Upload Complete!" }), _jsxs(Typography, { variant: "body-small", className: "n-text-neutral-text-weak", children: ["Successfully uploaded: ", files.map((file) => file.name).join(', ')] }), _jsx(FilledButton, { onClick: resetUpload, children: "Upload More Files" })] }));
+                return (_jsxs("div", { className: "flex flex-col justify-center items-center gap-y-token-32", children: [_jsx(Typography, { variant: "title-4", className: "text-success-text font-semibold", children: "Upload Complete!" }), _jsxs(Typography, { variant: "body-small", className: "text-neutral-text-weak", children: ["Successfully uploaded: ", files.map((file) => file.name).join(', ')] }), _jsx(FilledButton, { onClick: resetUpload, children: "Upload More Files" })] }));
             case UploadState.Error:
-                return (_jsxs("div", { className: "n-flex n-flex-col n-justify-center n-items-center n-gap-y-token-32", children: [_jsx(XMarkIcon, { className: "n-w-token-32 n-h-token-32 n-text-danger-text" }), _jsx("div", { className: "n-flex n-flex-col n-gap-y-token-2", children: errors.map((message, index) => (_jsx(Typography, { variant: "label", className: "n-text-danger-text n-font-semibold", htmlAttributes: { role: 'alert' }, children: message }, index))) }), _jsx(FilledButton, { onClick: resetUpload, children: "Try Again" })] }));
+                return (_jsxs("div", { className: "flex flex-col justify-center items-center gap-y-token-32", children: [_jsx(XMarkIcon, { className: "w-token-32 h-token-32 text-danger-text" }), _jsx("div", { className: "flex flex-col gap-y-token-2", children: errors.map((message, index) => (_jsx(Typography, { variant: "label", className: "text-danger-text font-semibold", htmlAttributes: { role: 'alert' }, children: message }, index))) }), _jsx(FilledButton, { onClick: resetUpload, children: "Try Again" })] }));
             default:
                 return undefined;
         }
@@ -101,7 +101,7 @@ const Component = () => {
             onDrop: handleDrop,
             onDropRejected: handleDropRejected,
             onError: handleError,
-        }, supportedFilesDescription: _jsxs("div", { className: "n-text-center n-flex n-flex-col n-gap-y-token-2", children: [_jsx(Typography, { variant: "body-small", className: "n-text-neutral-text-weak", children: "Supports: Text files (.txt, .json) only" }), _jsxs(Typography, { variant: "body-small", className: "n-text-neutral-text-weak", children: ["Max ", CONFIG.MAX_FILES, " files \u2022", ' ', CONFIG.MAX_FILE_SIZE / (1024 * 1024), "MB per file"] })] }), acceptedFileExtensions: CONFIG.ACCEPTED_EXTENSIONS, loadingElement: renderStatusContent(), rejectedText: "Error: Please make sure to only upload .json or .txt files", heading: "Drag & Drop your files" }));
+        }, supportedFilesDescription: _jsxs("div", { className: "text-center flex flex-col gap-y-token-2", children: [_jsx(Typography, { variant: "body-small", className: "text-neutral-text-weak", children: "Supports: Text files (.txt, .json) only" }), _jsxs(Typography, { variant: "body-small", className: "text-neutral-text-weak", children: ["Max ", CONFIG.MAX_FILES, " files \u2022", ' ', CONFIG.MAX_FILE_SIZE / (1024 * 1024), "MB per file"] })] }), acceptedFileExtensions: CONFIG.ACCEPTED_EXTENSIONS, loadingElement: renderStatusContent(), rejectedText: "Error: Please make sure to only upload .json or .txt files", heading: "Drag & Drop your files" }));
 };
 export default Component;
 //# sourceMappingURL=dropzone-full.story.js.map

package/lib/esm/dropzone/stories/dropzone-full.story.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropzone-full.story.js","sourceRoot":"","sources":["../../../../src/dropzone/stories/dropzone-full.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport { XMarkIcon } from '@heroicons/react/24/solid';\nimport { Dropzone, FilledButton, Typography } from '@neo4j-ndl/react';\nimport { useCallback, useState } from 'react';\nimport {\n type DropEvent,\n type DropzoneOptions,\n type FileRejection,\n} from 'react-dropzone';\n\n// Configuration constants\nconst CONFIG = {\n ACCEPTED_EXTENSIONS: ['.txt', '.json'] as string[],\n MAX_FILE_SIZE: 5 1024 * 1024, // 5MB\n MAX_FILES: 3,\n PROGRESS_INCREMENT: 5,\n UPDATE_INTERVAL: 100,\n} as const;\n\nenum UploadState {\n Idle = 'idle',\n Uploading = 'uploading',\n Success = 'success',\n Error = 'error',\n}\n\ninterface UploadData {\n state: UploadState;\n progress: number;\n files: File[];\n errors: string[];\n}\n\nconst Component = () => {\n const [uploadData, setUploadData] = useState<UploadData>({\n errors: [],\n files: [],\n progress: 0,\n state: UploadState.Idle,\n });\n\n const resetUpload = useCallback(() => {\n setUploadData({\n errors: [],\n files: [],\n progress: 0,\n state: UploadState.Idle,\n });\n }, []);\n\n const simulateUpload = useCallback((files: File[]) => {\n setUploadData((prev) => ({\n ...prev,\n files,\n progress: 0,\n state: UploadState.Uploading,\n }));\n\n const interval = setInterval(() => {\n setUploadData((prev) => {\n const newProgress = prev.progress + CONFIG.PROGRESS_INCREMENT;\n if (newProgress >= 100) {\n clearInterval(interval);\n setTimeout(\n () =>\n setUploadData((current) => ({\n ...current,\n state: UploadState.Success,\n })),\n 500,\n );\n return { ...prev, progress: 100 };\n }\n return { ...prev, progress: newProgress };\n });\n }, CONFIG.UPDATE_INTERVAL);\n }, []);\n\n const handleDrop: DropzoneOptions['onDrop'] = useCallback(\n (\n acceptedFiles: File[],\n rejectedFiles: FileRejection[],\n event: DropEvent,\n ) => {\n console.info('Drop event:', { acceptedFiles, event, rejectedFiles });\n\n if (acceptedFiles.length > 0) {\n simulateUpload(acceptedFiles);\n }\n },\n [simulateUpload],\n );\n\n const handleDropRejected: DropzoneOptions['onDropRejected'] = useCallback(\n (rejectedFiles: FileRejection[]) => {\n const errors = rejectedFiles.map(\n (file) =>\n `${file.file.name}: ${file.errors.map((error) => error.message).join(', ')}`,\n );\n setUploadData((prev) => ({ ...prev, errors, state: UploadState.Error }));\n },\n [],\n );\n\n const handleError = useCallback((error: Error) => {\n console.error('Dropzone error:', error);\n setUploadData((prev) => ({\n ...prev,\n errors: [error.message],\n state: UploadState.Error,\n }));\n }, []);\n\n const renderStatusContent = () => {\n const { state, progress, files, errors } = uploadData;\n\n switch (state) {\n case UploadState.Uploading:\n return (\n <Dropzone.LoadingProgressBar\n progressBarPrecentage={Math.round(progress)}\n />\n );\n\n case UploadState.Success:\n return (\n <div className=\"n-flex n-flex-col n-justify-center n-items-center n-gap-y-token-32\">\n <Typography\n variant=\"title-4\"\n className=\"n-text-success-text n-font-semibold\"\n >\n Upload Complete!\n </Typography>\n <Typography\n variant=\"body-small\"\n className=\"n-text-neutral-text-weak\"\n >\n Successfully uploaded: {files.map((file) => file.name).join(', ')}\n </Typography>\n <FilledButton onClick={resetUpload}>Upload More Files</FilledButton>\n </div>\n );\n\n case UploadState.Error:\n return (\n <div className=\"n-flex n-flex-col n-justify-center n-items-center n-gap-y-token-32\">\n <XMarkIcon className=\"n-w-token-32 n-h-token-32 n-text-danger-text\" />\n <div className=\"n-flex n-flex-col n-gap-y-token-2\">\n {errors.map((message, index) => (\n <Typography\n key={index}\n variant=\"label\"\n className=\"n-text-danger-text n-font-semibold\"\n htmlAttributes={{ role: 'alert' }}\n >\n {message}\n </Typography>\n ))}\n </div>\n <FilledButton onClick={resetUpload}>Try Again</FilledButton>\n </div>\n );\n\n default:\n return undefined;\n }\n };\n\n return (\n <Dropzone\n dropZoneOptions={{\n disabled: uploadData.state === UploadState.Uploading,\n maxFiles: CONFIG.MAX_FILES,\n maxSize: CONFIG.MAX_FILE_SIZE,\n multiple: true,\n onDrop: handleDrop,\n onDropRejected: handleDropRejected,\n onError: handleError,\n }}\n supportedFilesDescription={\n <div className=\"n-text-center n-flex n-flex-col n-gap-y-token-2\">\n <Typography variant=\"body-small\" className=\"n-text-neutral-text-weak\">\n Supports: Text files (.txt, .json) only\n </Typography>\n <Typography variant=\"body-small\" className=\"n-text-neutral-text-weak\">\n Max {CONFIG.MAX_FILES} files •{' '}\n {CONFIG.MAX_FILE_SIZE / (1024 * 1024)}MB per file\n </Typography>\n </div>\n }\n acceptedFileExtensions={CONFIG.ACCEPTED_EXTENSIONS}\n loadingElement={renderStatusContent()}\n rejectedText=\"Error: Please make sure to only upload .json or .txt files\"\n heading=\"Drag & Drop your files\"\n />\n );\n};\n\nexport default Component;\n"]}
1	+ {"version":3,"file":"dropzone-full.story.js","sourceRoot":"","sources":["../../../../src/dropzone/stories/dropzone-full.story.tsx"],"names":[],"mappings":"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","sourcesContent":["/!\n \n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n \n This file is part of Neo4j.\n \n Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n \n This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n \n You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n /\nimport { XMarkIcon } from '@heroicons/react/24/solid';\nimport { Dropzone, FilledButton, Typography } from '@neo4j-ndl/react';\nimport { useCallback, useState } from 'react';\nimport {\n type DropEvent,\n type DropzoneOptions,\n type FileRejection,\n} from 'react-dropzone';\n\n// Configuration constants\nconst CONFIG = {\n ACCEPTED_EXTENSIONS: ['.txt', '.json'] as string[],\n MAX_FILE_SIZE: 5 1024 * 1024, // 5MB\n MAX_FILES: 3,\n PROGRESS_INCREMENT: 5,\n UPDATE_INTERVAL: 100,\n} as const;\n\nenum UploadState {\n Idle = 'idle',\n Uploading = 'uploading',\n Success = 'success',\n Error = 'error',\n}\n\ninterface UploadData {\n state: UploadState;\n progress: number;\n files: File[];\n errors: string[];\n}\n\nconst Component = () => {\n const [uploadData, setUploadData] = useState<UploadData>({\n errors: [],\n files: [],\n progress: 0,\n state: UploadState.Idle,\n });\n\n const resetUpload = useCallback(() => {\n setUploadData({\n errors: [],\n files: [],\n progress: 0,\n state: UploadState.Idle,\n });\n }, []);\n\n const simulateUpload = useCallback((files: File[]) => {\n setUploadData((prev) => ({\n ...prev,\n files,\n progress: 0,\n state: UploadState.Uploading,\n }));\n\n const interval = setInterval(() => {\n setUploadData((prev) => {\n const newProgress = prev.progress + CONFIG.PROGRESS_INCREMENT;\n if (newProgress >= 100) {\n clearInterval(interval);\n setTimeout(\n () =>\n setUploadData((current) => ({\n ...current,\n state: UploadState.Success,\n })),\n 500,\n );\n return { ...prev, progress: 100 };\n }\n return { ...prev, progress: newProgress };\n });\n }, CONFIG.UPDATE_INTERVAL);\n }, []);\n\n const handleDrop: DropzoneOptions['onDrop'] = useCallback(\n (\n acceptedFiles: File[],\n rejectedFiles: FileRejection[],\n event: DropEvent,\n ) => {\n console.info('Drop event:', { acceptedFiles, event, rejectedFiles });\n\n if (acceptedFiles.length > 0) {\n simulateUpload(acceptedFiles);\n }\n },\n [simulateUpload],\n );\n\n const handleDropRejected: DropzoneOptions['onDropRejected'] = useCallback(\n (rejectedFiles: FileRejection[]) => {\n const errors = rejectedFiles.map(\n (file) =>\n `${file.file.name}: ${file.errors.map((error) => error.message).join(', ')}`,\n );\n setUploadData((prev) => ({ ...prev, errors, state: UploadState.Error }));\n },\n [],\n );\n\n const handleError = useCallback((error: Error) => {\n console.error('Dropzone error:', error);\n setUploadData((prev) => ({\n ...prev,\n errors: [error.message],\n state: UploadState.Error,\n }));\n }, []);\n\n const renderStatusContent = () => {\n const { state, progress, files, errors } = uploadData;\n\n switch (state) {\n case UploadState.Uploading:\n return (\n <Dropzone.LoadingProgressBar\n progressBarPrecentage={Math.round(progress)}\n />\n );\n\n case UploadState.Success:\n return (\n <div className=\"flex flex-col justify-center items-center gap-y-token-32\">\n <Typography\n variant=\"title-4\"\n className=\"text-success-text font-semibold\"\n >\n Upload Complete!\n </Typography>\n <Typography variant=\"body-small\" className=\"text-neutral-text-weak\">\n Successfully uploaded: {files.map((file) => file.name).join(', ')}\n </Typography>\n <FilledButton onClick={resetUpload}>Upload More Files</FilledButton>\n </div>\n );\n\n case UploadState.Error:\n return (\n <div className=\"flex flex-col justify-center items-center gap-y-token-32\">\n <XMarkIcon className=\"w-token-32 h-token-32 text-danger-text\" />\n <div className=\"flex flex-col gap-y-token-2\">\n {errors.map((message, index) => (\n <Typography\n key={index}\n variant=\"label\"\n className=\"text-danger-text font-semibold\"\n htmlAttributes={{ role: 'alert' }}\n >\n {message}\n </Typography>\n ))}\n </div>\n <FilledButton onClick={resetUpload}>Try Again</FilledButton>\n </div>\n );\n\n default:\n return undefined;\n }\n };\n\n return (\n <Dropzone\n dropZoneOptions={{\n disabled: uploadData.state === UploadState.Uploading,\n maxFiles: CONFIG.MAX_FILES,\n maxSize: CONFIG.MAX_FILE_SIZE,\n multiple: true,\n onDrop: handleDrop,\n onDropRejected: handleDropRejected,\n onError: handleError,\n }}\n supportedFilesDescription={\n <div className=\"text-center flex flex-col gap-y-token-2\">\n <Typography variant=\"body-small\" className=\"text-neutral-text-weak\">\n Supports: Text files (.txt, .json) only\n </Typography>\n <Typography variant=\"body-small\" className=\"text-neutral-text-weak\">\n Max {CONFIG.MAX_FILES} files •{' '}\n {CONFIG.MAX_FILE_SIZE / (1024 * 1024)}MB per file\n </Typography>\n </div>\n }\n acceptedFileExtensions={CONFIG.ACCEPTED_EXTENSIONS}\n loadingElement={renderStatusContent()}\n rejectedText=\"Error: Please make sure to only upload .json or .txt files\"\n heading=\"Drag & Drop your files\"\n />\n );\n};\n\nexport default Component;\n"]}