@neo4j-ndl/react 4.9.22 → 4.9.24
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.
- package/lib/cjs/drawer/Drawer.js +5 -34
- package/lib/cjs/drawer/Drawer.js.map +1 -1
- package/lib/cjs/popover/Popover.js +19 -0
- package/lib/cjs/popover/Popover.js.map +1 -1
- package/lib/cjs/popover/stories/popover-separate-anchor.story.js +1 -2
- package/lib/cjs/popover/stories/popover-separate-anchor.story.js.map +1 -1
- package/lib/cjs/popover/use-popover.js +5 -2
- package/lib/cjs/popover/use-popover.js.map +1 -1
- package/lib/esm/drawer/Drawer.js +5 -34
- package/lib/esm/drawer/Drawer.js.map +1 -1
- package/lib/esm/popover/Popover.js +19 -0
- package/lib/esm/popover/Popover.js.map +1 -1
- package/lib/esm/popover/stories/popover-separate-anchor.story.js +2 -3
- package/lib/esm/popover/stories/popover-separate-anchor.story.js.map +1 -1
- package/lib/esm/popover/use-popover.js +5 -2
- package/lib/esm/popover/use-popover.js.map +1 -1
- package/lib/types/drawer/Drawer.d.ts.map +1 -1
- package/lib/types/popover/Popover.d.ts +8 -1
- package/lib/types/popover/Popover.d.ts.map +1 -1
- package/lib/types/popover/stories/popover-separate-anchor.story.d.ts.map +1 -1
- package/lib/types/popover/use-popover.d.ts +5 -2
- package/lib/types/popover/use-popover.d.ts.map +1 -1
- package/package.json +2 -2
package/lib/cjs/drawer/Drawer.js
CHANGED
|
@@ -102,32 +102,7 @@ const DrawerComponent = function DrawerComponent(_a) {
|
|
|
102
102
|
role: 'dialog',
|
|
103
103
|
});
|
|
104
104
|
const { getFloatingProps } = (0, react_1.useInteractions)([dismiss, role]);
|
|
105
|
-
|
|
106
|
-
const shouldApplyFloatingPropsOnDrawer = type === 'overlay' && isExpanded && !isPortaled;
|
|
107
|
-
const floatingPropsForDrawer = shouldApplyFloatingPropsOnDrawer
|
|
108
|
-
? getFloatingProps(htmlAttributes !== null && htmlAttributes !== void 0 ? htmlAttributes : {})
|
|
109
|
-
: {};
|
|
110
|
-
const setFloatingRefsFromResizable = (0, react_2.useCallback)((instance) => {
|
|
111
|
-
var _a;
|
|
112
|
-
if (!shouldApplyFloatingPropsOnDrawer) {
|
|
113
|
-
refs.setFloating(null);
|
|
114
|
-
refs.setReference(null);
|
|
115
|
-
return;
|
|
116
|
-
}
|
|
117
|
-
const floatingElement = (_a = instance === null || instance === void 0 ? void 0 : instance.resizable) !== null && _a !== void 0 ? _a : null;
|
|
118
|
-
refs.setFloating(floatingElement);
|
|
119
|
-
refs.setReference(floatingElement);
|
|
120
|
-
}, [refs, shouldApplyFloatingPropsOnDrawer]);
|
|
121
|
-
const resizableMergedRef = (0, react_1.useMergeRefs)([
|
|
122
|
-
resizableRef,
|
|
123
|
-
ref,
|
|
124
|
-
setFloatingRefsFromResizable,
|
|
125
|
-
]);
|
|
126
|
-
const componentMergedRef = (0, react_1.useMergeRefs)([
|
|
127
|
-
shouldApplyFloatingPropsOnDrawer ? refs.setFloating : null,
|
|
128
|
-
shouldApplyFloatingPropsOnDrawer ? refs.setReference : null,
|
|
129
|
-
ref,
|
|
130
|
-
]);
|
|
105
|
+
const resizableMergedRef = (0, react_1.useMergeRefs)([resizableRef, ref]);
|
|
131
106
|
const handleResizeBy = (0, react_2.useCallback)((delta) => {
|
|
132
107
|
if (!resizableRef.current) {
|
|
133
108
|
return;
|
|
@@ -190,10 +165,11 @@ const DrawerComponent = function DrawerComponent(_a) {
|
|
|
190
165
|
}
|
|
191
166
|
: {
|
|
192
167
|
left: ((0, jsx_runtime_1.jsx)(DrawerResizeHandle, { handleSide: "left", onResizeBy: handleResizeBy, valueMax: parsePixelSize(resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.maxWidth), valueMin: parsePixelSize(resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.minWidth), valueNow: resizeWidth })),
|
|
193
|
-
}, onResize: handleResize, ref: resizableMergedRef }, restProps,
|
|
194
|
-
const regularContent = ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: (0, classnames_1.default)(classes), style: style, ref:
|
|
168
|
+
}, onResize: handleResize, ref: resizableMergedRef }, restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)(Close, {}), children] })));
|
|
169
|
+
const regularContent = ((0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: (0, classnames_1.default)(classes), style: style, ref: ref }, restProps, htmlAttributes, { children: [(0, jsx_runtime_1.jsx)(Close, {}), children] })));
|
|
195
170
|
/** what content to render*/
|
|
196
171
|
const content = isResizeable ? resizableContent : regularContent;
|
|
172
|
+
const floatingRefs = (0, react_1.useMergeRefs)([refs.setFloating, refs.setReference]);
|
|
197
173
|
/** if the drawer is not expanded, don't render anything */
|
|
198
174
|
if (isExpanded === false) {
|
|
199
175
|
return null;
|
|
@@ -202,12 +178,7 @@ const DrawerComponent = function DrawerComponent(_a) {
|
|
|
202
178
|
if (type === 'modal') {
|
|
203
179
|
return ((0, jsx_runtime_1.jsxs)(react_1.FloatingPortal, Object.assign({}, portalProps, { children: [(0, jsx_runtime_1.jsx)(react_1.FloatingOverlay, { className: "ndl-drawer-overlay-root", lockScroll: true }), (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, { context: context, modal: true, returnFocus: true, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ ref: refs.setFloating }, getFloatingProps(), { "aria-label": ariaLabel, "aria-modal": "true", children: content })) })] })));
|
|
204
180
|
}
|
|
205
|
-
|
|
206
|
-
if (type === 'overlay') {
|
|
207
|
-
return ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isPortaled, wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, { context: context, modal: false, returnFocus: true, closeOnFocusOut: closeOnFocusOut, children: content }) }));
|
|
208
|
-
}
|
|
209
|
-
/** regular push behavior */
|
|
210
|
-
return content;
|
|
181
|
+
return ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: isPortaled && type === 'overlay', wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, { disabled: !isExpanded || type === 'push', context: context, modal: false, returnFocus: true, closeOnFocusOut: closeOnFocusOut, children: (0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: type === 'overlay', wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: floatingRefs }, getFloatingProps(), { "aria-label": ariaLabel, children: wrapChildren }))), children: content }) }) }));
|
|
211
182
|
};
|
|
212
183
|
DrawerComponent.displayName = 'Drawer';
|
|
213
184
|
const DrawerHeader = (_a) => {
|
|
@@ -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 useRef,\n useState,\n} from 'react';\n\nimport {\n type HtmlAttributes,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { XMarkIconOutline } from '../icons';\nimport { Typography } from '../typography';\n\ntype DrawerPosition = 'left' | 'right';\n\ntype DrawerType = 'overlay' | 'push' | 'modal';\n\ntype DrawerProps = {\n /** Controls whether the drawer is open (expanded) or closed (collapsed). */\n isExpanded: boolean;\n\n /** Callback fired when the drawer's expanded state changes (close button, Escape, click outside, or programmatic change). */\n onExpandedChange?: (expanded: boolean) => void;\n\n /** Position where the drawer appears on screen. By default, it appears from the left. */\n position?: DrawerPosition;\n\n /** How the drawer affects the layout of sibling content. By default, it overlays content. */\n type?: DrawerType;\n\n /** Enables horizontal resizing of the drawer, by default it is not resizable. */\n isResizeable?: boolean;\n\n /** To use this prop the isResizeable prop must be set to true. For overriding the third party library props: https://github.com/bokuweb/re-resizable */\n resizeableProps?: ResizableProps;\n\n /** Whether a close button (X) is displayed in the drawer. */\n isCloseable?: boolean;\n\n /** Whether to portal the content. Only applies when type is \"overlay\". Type \"modal\" is always portaled.*/\n isPortaled?: boolean;\n\n // TODO v5: this should maybe be default on portaled in the future\n /**\n * Whether pressing Escape closes the drawer.\n * - When type is \"modal\", this defaults to true.\n * - When type is \"overlay\", this defaults to false.\n * - When type is \"push\", no effect.\n */\n closeOnEscape?: boolean;\n\n // TODO v5: this should maybe be default on overlay in the future\n /**\n * When type is \"overlay\", whether clicking outside the drawer closes it.\n * - When type is \"overlay\" or \"modal\", this defaults to false.\n * - When type is \"push\", no effect.\n */\n closeOnClickOutside?: boolean;\n\n // TODO v5: this should maybe be default on overlay in the future\n /**\n * Whether tabbing focus outside the drawer closes it.\n * - When type is \"overlay\", this defaults to false.\n * - When type is \"push\" or \"modal\", no effect.\n */\n closeOnFocusOut?: boolean;\n\n /** The content to display within the drawer. */\n children: React.ReactNode;\n\n /**\n * Props to pass to the portal from @floating-ui/react FloatingPortal\n * Only applies when type is \"overlay\" and isPortaled is true, or if type is \"modal\".\n * @see https://floating-ui.com/docs/floatingportal\n */\n portalProps?: ComponentProps<typeof FloatingPortal>;\n} & (\n | {\n type: 'modal';\n /** The aria-label to apply to the drawer. Required for accessibility when type is \"modal\" or \"overlay\".*/\n ariaLabel: string;\n }\n | {\n type?: 'push' | 'overlay';\n // TODO v5: aria label should be required when type is \"overlay\" too.\n ariaLabel?: string;\n }\n);\n\nconst KEYBOARD_RESIZE_STEP_PX = 16;\n\nfunction parsePixelSize(\n value: string | number | undefined,\n): number | undefined {\n if (value === undefined) {\n return undefined;\n }\n if (typeof value === 'number') {\n return value;\n }\n const parsed = parseInt(value.replace(/px$/i, ''), 10);\n return Number.isNaN(parsed) ? undefined : parsed;\n}\n\ntype DrawerResizeHandleProps = {\n /** Which edge this handle resizes (right = drawer’s right edge, left = drawer’s left edge). */\n handleSide: 'left' | 'right';\n /** Called with a pixel delta to apply to the drawer width (positive = wider). */\n onResizeBy: (delta: number) => void;\n onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n /** Current width in pixels (for aria-valuenow). */\n valueNow?: number;\n /** Minimum width in pixels (for aria-valuemin). */\n valueMin?: number;\n /** Maximum width in pixels (for aria-valuemax). */\n valueMax?: number;\n};\n\nfunction DrawerResizeHandle({\n handleSide,\n onResizeBy,\n valueMax,\n valueMin,\n valueNow,\n}: DrawerResizeHandleProps) {\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLDivElement>) => {\n const isArrowKey = e.key === 'ArrowLeft' || e.key === 'ArrowRight';\n if (isArrowKey) {\n e.preventDefault();\n const delta =\n handleSide === 'right'\n ? e.key === 'ArrowRight'\n ? KEYBOARD_RESIZE_STEP_PX\n : -KEYBOARD_RESIZE_STEP_PX\n : e.key === 'ArrowLeft'\n ? KEYBOARD_RESIZE_STEP_PX\n : -KEYBOARD_RESIZE_STEP_PX;\n onResizeBy(delta);\n }\n },\n [handleSide, onResizeBy],\n );\n\n return (\n /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Resize handle is focusable for keyboard resize. */\n <div\n aria-label={`Resize drawer with arrow keys. Handle on ${handleSide}.`}\n aria-orientation=\"vertical\"\n aria-valuemax={valueMax}\n aria-valuemin={valueMin}\n aria-valuenow={valueNow ?? 0}\n aria-valuetext={`drawer width ${valueNow ?? 0}px`}\n className=\"ndl-drawer-resize-handle\"\n data-drawer-handle={handleSide}\n onKeyDown={handleKeyDown}\n role=\"separator\"\n style={{ height: '100%', width: '100%' }}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- Resize handle is focusable for keyboard resize.\n tabIndex={0}\n />\n );\n}\n\nconst DrawerComponent = function DrawerComponent<\n T extends React.ElementType = 'div',\n>({\n children,\n className = '',\n isExpanded,\n onExpandedChange,\n position = 'left',\n type = 'overlay',\n isResizeable = false,\n resizeableProps,\n isCloseable = true,\n isPortaled = false,\n portalProps = {},\n closeOnEscape = type === 'modal' ? true : false,\n closeOnClickOutside = false,\n closeOnFocusOut = false,\n ariaLabel,\n htmlAttributes,\n style,\n ref,\n as,\n ...restProps\n}: PolymorphicCommonProps<T, DrawerProps>) {\n const resizableRef = useRef<Resizable | null>(null);\n const [resizeWidth, setResizeWidth] = useState<number>(0);\n\n if ((type === 'modal' || type === 'overlay') && !ariaLabel) {\n needleWarningMessage(\n 'A Drawer should have an aria-label when type is \"modal\" or \"overlay\" to be accessible.',\n );\n }\n\n const { refs, context } = useFloating({\n onOpenChange: onExpandedChange,\n open: isExpanded,\n });\n\n /** Dismiss (escape + click outside) applies to portaled overlay and to non-portaled overlay. */\n const shouldUseDismiss =\n type === 'modal' ||\n (type === 'overlay' && !isPortaled && isExpanded) ||\n (type === 'overlay' && isPortaled);\n\n const dismiss = useDismiss(context, {\n enabled: shouldUseDismiss,\n escapeKey: closeOnEscape,\n outsidePress: closeOnClickOutside,\n });\n const role = useRole(context, {\n enabled: type === 'modal' || type === 'overlay',\n role: 'dialog',\n });\n const { getFloatingProps } = useInteractions([dismiss, role]);\n\n /** When overlay is open and not portaled, drawer gets the floating ref + props; when portaled, the portal layer gets them. */\n const shouldApplyFloatingPropsOnDrawer =\n type === 'overlay' && isExpanded && !isPortaled;\n\n const floatingPropsForDrawer = shouldApplyFloatingPropsOnDrawer\n ? getFloatingProps(htmlAttributes ?? {})\n : {};\n\n const setFloatingRefsFromResizable = useCallback(\n (instance: Resizable | null) => {\n if (!shouldApplyFloatingPropsOnDrawer) {\n refs.setFloating(null);\n refs.setReference(null);\n return;\n }\n\n const floatingElement = instance?.resizable ?? null;\n refs.setFloating(floatingElement);\n refs.setReference(floatingElement);\n },\n [refs, shouldApplyFloatingPropsOnDrawer],\n );\n\n const resizableMergedRef = useMergeRefs([\n resizableRef,\n ref,\n setFloatingRefsFromResizable,\n ]);\n const componentMergedRef = useMergeRefs([\n shouldApplyFloatingPropsOnDrawer ? refs.setFloating : null,\n shouldApplyFloatingPropsOnDrawer ? refs.setReference : null,\n ref,\n ]);\n\n const handleResizeBy = useCallback(\n (delta: number) => {\n if (!resizableRef.current) {\n return;\n }\n const current = resizableRef.current.size;\n const min = parsePixelSize(resizeableProps?.minWidth);\n const max = parsePixelSize(resizeableProps?.maxWidth);\n const newWidth = Math.max(\n min ?? 0,\n Math.min(max ?? Number.POSITIVE_INFINITY, current.width + delta),\n );\n resizableRef.current.updateSize({\n height: '100%',\n width: newWidth,\n });\n setResizeWidth(newWidth);\n },\n [resizeableProps?.minWidth, resizeableProps?.maxWidth],\n );\n\n const handleResize = useCallback(\n (\n event: MouseEvent | TouchEvent,\n direction: Parameters<NonNullable<ResizableProps['onResize']>>[1],\n elementRef: HTMLElement,\n delta: { width: number; height: number },\n ) => {\n setResizeWidth(elementRef.offsetWidth);\n resizeableProps?.onResize?.(event, direction, elementRef, delta);\n },\n [resizeableProps],\n );\n\n useEffect(() => {\n if (!isResizeable || !resizableRef.current) {\n return;\n }\n const width = resizableRef.current.size.width;\n if (width > 0) {\n setResizeWidth(width);\n }\n }, [isResizeable]);\n\n const setOnExpandedChange = useCallback(() => {\n onExpandedChange?.(!isExpanded);\n }, [isExpanded, onExpandedChange]);\n\n const classes = classNames('ndl-drawer', className, {\n 'ndl-drawer-left': position === 'left',\n 'ndl-drawer-modal': type === 'modal',\n 'ndl-drawer-overlay': type === 'overlay',\n 'ndl-drawer-portaled': isPortaled && type === 'overlay',\n 'ndl-drawer-push': type === 'push',\n 'ndl-drawer-right': position === 'right',\n });\n\n const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';\n const Component = as ?? 'div';\n\n const Close = () => (\n <>\n {(isCloseable || type === 'modal') && (\n <CleanIconButton\n className=\"ndl-drawer-close-button\"\n onClick={setOnExpandedChange}\n description={null}\n size=\"medium\"\n htmlAttributes={{\n 'aria-label': 'Close',\n }}\n >\n <XMarkIconOutline />\n </CleanIconButton>\n )}\n </>\n );\n\n const resizableContent = (\n <Resizable\n as={Component}\n defaultSize={{\n height: '100%',\n width: 'auto',\n }}\n {...resizeableProps}\n className={classes}\n style={{\n position: resizableStylePosition,\n ...style,\n ...resizeableProps?.style,\n }}\n boundsByDirection={true}\n bounds=\"parent\"\n handleStyles={{\n /*\n * Small offset so the handle is easier to hit when the drawer content is scrollable.\n */\n ...(position === 'left' && { right: { right: '-8px' } }),\n ...(position === 'right' && { left: { left: '-8px' } }),\n }}\n enable={{\n bottom: false,\n bottomLeft: false,\n bottomRight: false,\n left: position === 'right',\n right: position === 'left',\n top: false,\n topLeft: false,\n topRight: false,\n }}\n handleComponent={\n position === 'left'\n ? {\n right: (\n <DrawerResizeHandle\n handleSide=\"right\"\n onResizeBy={handleResizeBy}\n valueMax={parsePixelSize(resizeableProps?.maxWidth)}\n valueMin={parsePixelSize(resizeableProps?.minWidth)}\n valueNow={resizeWidth}\n />\n ),\n }\n : {\n left: (\n <DrawerResizeHandle\n handleSide=\"left\"\n onResizeBy={handleResizeBy}\n valueMax={parsePixelSize(resizeableProps?.maxWidth)}\n valueMin={parsePixelSize(resizeableProps?.minWidth)}\n valueNow={resizeWidth}\n />\n ),\n }\n }\n onResize={handleResize}\n ref={resizableMergedRef}\n {...restProps}\n {...floatingPropsForDrawer}\n {...htmlAttributes}\n >\n <Close />\n {children}\n </Resizable>\n );\n\n const regularContent = (\n <Component\n className={classNames(classes)}\n style={style}\n ref={componentMergedRef}\n {...restProps}\n {...floatingPropsForDrawer}\n {...htmlAttributes}\n >\n <Close />\n {children}\n </Component>\n );\n\n /** what content to render*/\n const content = isResizeable ? resizableContent : regularContent;\n\n /** if the drawer is not expanded, don't render anything */\n if (isExpanded === false) {\n return null;\n }\n\n /** modal behavior */\n if (type === 'modal') {\n return (\n <FloatingPortal {...portalProps}>\n <FloatingOverlay\n className=\"ndl-drawer-overlay-root\"\n lockScroll={true}\n />\n <FloatingFocusManager context={context} modal={true} returnFocus={true}>\n <div\n ref={refs.setFloating}\n {...getFloatingProps()}\n aria-label={ariaLabel}\n aria-modal=\"true\"\n >\n {content}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n }\n\n /** overlay focus behavior */\n if (type === 'overlay') {\n return (\n <ConditionalWrap\n shouldWrap={isPortaled}\n wrap={(wrapChildren) => (\n <FloatingPortal preserveTabOrder={true} {...portalProps}>\n {wrapChildren}\n </FloatingPortal>\n )}\n >\n <FloatingFocusManager\n context={context}\n modal={false}\n returnFocus={true}\n closeOnFocusOut={closeOnFocusOut}\n >\n {content}\n </FloatingFocusManager>\n </ConditionalWrap>\n );\n }\n\n /** regular push behavior */\n return content;\n};\n\nDrawerComponent.displayName = 'Drawer';\n\ntype DrawerHeaderProps = {\n children: React.ReactNode;\n className?: string;\n // TODO v5: fix the typing on the Drawer subcomponents to use the common props type. Also, this is not an h5 haha. Should be polymorphic I guess, maybe default to h2 as we've recommended.\n htmlAttributes?: HtmlAttributes<'h5'>;\n};\n\nconst DrawerHeader = ({\n children,\n className = '',\n htmlAttributes,\n ...restProps\n}: DrawerHeaderProps) => {\n const classes = classNames('ndl-drawer-header', className);\n\n if (typeof children === 'string' || typeof children === 'number') {\n return (\n <Typography\n className={classes}\n variant=\"title-3\"\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </Typography>\n );\n }\n\n return (\n <div className={classes} {...restProps} {...htmlAttributes}>\n {children}\n </div>\n );\n};\n\ntype DrawerActionsProps = {\n children: React.ReactNode;\n className?: string;\n htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerActions = ({\n children,\n className = '',\n htmlAttributes,\n ...restProps\n}: DrawerActionsProps) => {\n const classes = classNames('ndl-drawer-actions', className);\n\n return (\n <div className={classes} {...restProps} {...htmlAttributes}>\n {children}\n </div>\n );\n};\n\ntype DrawerBodyProps = {\n children: React.ReactNode;\n className?: string;\n htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerBody = ({\n children,\n className = '',\n htmlAttributes,\n ...restProps\n}: DrawerBodyProps) => {\n const classes = classNames('ndl-drawer-body', className);\n\n return (\n <div className=\"ndl-drawer-body-wrapper\">\n <div className={classes} {...restProps} {...htmlAttributes}>\n {children}\n </div>\n </div>\n );\n};\n\nconst Drawer = Object.assign(DrawerComponent, {\n Actions: DrawerActions,\n Body: DrawerBody,\n Header: DrawerHeader,\n});\n\nexport { Drawer };\n"]}
|
|
1
|
+
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,8CAS4B;AAC5B,4DAAoC;AACpC,+CAA8D;AAE9D,iCAMe;AAMf,4CAAwD;AACxD,4DAAuD;AACvD,0DAAsD;AACtD,oCAA4C;AAC5C,8CAA2C;AA8E3C,MAAM,uBAAuB,GAAG,EAAE,CAAC;AAEnC,SAAS,cAAc,CACrB,KAAkC;IAElC,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;QACxB,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IACD,MAAM,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IACvD,OAAO,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;AACnD,CAAC;AAgBD,SAAS,kBAAkB,CAAC,EAC1B,UAAU,EACV,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,QAAQ,GACgB;IACxB,MAAM,aAAa,GAAG,IAAA,mBAAW,EAC/B,CAAC,CAAsC,EAAE,EAAE;QACzC,MAAM,UAAU,GAAG,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,CAAC;QACnE,IAAI,UAAU,EAAE,CAAC;YACf,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,KAAK,GACT,UAAU,KAAK,OAAO;gBACpB,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,YAAY;oBACtB,CAAC,CAAC,uBAAuB;oBACzB,CAAC,CAAC,CAAC,uBAAuB;gBAC5B,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,WAAW;oBACrB,CAAC,CAAC,uBAAuB;oBACzB,CAAC,CAAC,CAAC,uBAAuB,CAAC;YACjC,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,EACD,CAAC,UAAU,EAAE,UAAU,CAAC,CACzB,CAAC;IAEF,OAAO;IACL,iIAAiI;IACjI,8CACc,4CAA4C,UAAU,GAAG,sBACpD,UAAU,mBACZ,QAAQ,mBACR,QAAQ,mBACR,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,CAAC,oBACZ,gBAAgB,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,CAAC,IAAI,EACjD,SAAS,EAAC,0BAA0B,wBAChB,UAAU,EAC9B,SAAS,EAAE,aAAa,EACxB,IAAI,EAAC,WAAW,EAChB,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE;QACxC,kHAAkH;QAClH,QAAQ,EAAE,CAAC,GACX,CACH,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GAAG,SAAS,eAAe,CAE9C,EAqBuC;QArBvC,EACA,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,UAAU,EACV,gBAAgB,EAChB,QAAQ,GAAG,MAAM,EACjB,IAAI,GAAG,SAAS,EAChB,YAAY,GAAG,KAAK,EACpB,eAAe,EACf,WAAW,GAAG,IAAI,EAClB,UAAU,GAAG,KAAK,EAClB,WAAW,GAAG,EAAE,EAChB,aAAa,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAC/C,mBAAmB,GAAG,KAAK,EAC3B,eAAe,GAAG,KAAK,EACvB,SAAS,EACT,cAAc,EACd,KAAK,EACL,GAAG,EACH,EAAE,OAEqC,EADpC,SAAS,cApBZ,8QAqBD,CADa;IAEZ,MAAM,YAAY,GAAG,IAAA,cAAM,EAAmB,IAAI,CAAC,CAAC;IACpD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAS,CAAC,CAAC,CAAC;IAE1D,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,SAAS,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;QAC3D,IAAA,4BAAoB,EAClB,wFAAwF,CACzF,CAAC;IACJ,CAAC;IAED,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAA,mBAAW,EAAC;QACpC,YAAY,EAAE,gBAAgB;QAC9B,IAAI,EAAE,UAAU;KACjB,CAAC,CAAC;IAEH,gGAAgG;IAChG,MAAM,gBAAgB,GACpB,IAAI,KAAK,OAAO;QAChB,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,UAAU,IAAI,UAAU,CAAC;QACjD,CAAC,IAAI,KAAK,SAAS,IAAI,UAAU,CAAC,CAAC;IAErC,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,OAAO,EAAE;QAClC,OAAO,EAAE,gBAAgB;QACzB,SAAS,EAAE,aAAa;QACxB,YAAY,EAAE,mBAAmB;KAClC,CAAC,CAAC;IACH,MAAM,IAAI,GAAG,IAAA,eAAO,EAAC,OAAO,EAAE;QAC5B,OAAO,EAAE,IAAI,KAAK,OAAO,IAAI,IAAI,KAAK,SAAS;QAC/C,IAAI,EAAE,QAAQ;KACf,CAAC,CAAC;IACH,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,uBAAe,EAAC,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;IAE9D,MAAM,kBAAkB,GAAG,IAAA,oBAAY,EAAC,CAAC,YAAY,EAAE,GAAG,CAAC,CAAC,CAAC;IAE7D,MAAM,cAAc,GAAG,IAAA,mBAAW,EAChC,CAAC,KAAa,EAAE,EAAE;QAChB,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;YAC1B,OAAO;QACT,CAAC;QACD,MAAM,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC;QAC1C,MAAM,GAAG,GAAG,cAAc,CAAC,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,CAAC,CAAC;QACtD,MAAM,GAAG,GAAG,cAAc,CAAC,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,CAAC,CAAC;QACtD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CACvB,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,CAAC,EACR,IAAI,CAAC,GAAG,CAAC,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,MAAM,CAAC,iBAAiB,EAAE,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC,CACjE,CAAC;QACF,YAAY,CAAC,OAAO,CAAC,UAAU,CAAC;YAC9B,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,QAAQ;SAChB,CAAC,CAAC;QACH,cAAc,CAAC,QAAQ,CAAC,CAAC;IAC3B,CAAC,EACD,CAAC,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,EAAE,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,CAAC,CACvD,CAAC;IAEF,MAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,CACE,KAA8B,EAC9B,SAAiE,EACjE,UAAuB,EACvB,KAAwC,EACxC,EAAE;;QACF,cAAc,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;QACvC,MAAA,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,gEAAG,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;IACnE,CAAC,EACD,CAAC,eAAe,CAAC,CAClB,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,YAAY,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC;YAC3C,OAAO;QACT,CAAC;QACD,MAAM,KAAK,GAAG,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;QAC9C,IAAI,KAAK,GAAG,CAAC,EAAE,CAAC;YACd,cAAc,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,mBAAmB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC3C,gBAAgB,aAAhB,gBAAgB,uBAAhB,gBAAgB,CAAG,CAAC,UAAU,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAEnC,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,YAAY,EAAE,SAAS,EAAE;QAClD,iBAAiB,EAAE,QAAQ,KAAK,MAAM;QACtC,kBAAkB,EAAE,IAAI,KAAK,OAAO;QACpC,oBAAoB,EAAE,IAAI,KAAK,SAAS;QACxC,qBAAqB,EAAE,UAAU,IAAI,IAAI,KAAK,SAAS;QACvD,iBAAiB,EAAE,IAAI,KAAK,MAAM;QAClC,kBAAkB,EAAE,QAAQ,KAAK,OAAO;KACzC,CAAC,CAAC;IAEH,MAAM,sBAAsB,GAAG,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;IAC5E,MAAM,SAAS,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,KAAK,CAAC;IAE9B,MAAM,KAAK,GAAG,GAAG,EAAE,CAAC,CAClB,2DACG,CAAC,WAAW,IAAI,IAAI,KAAK,OAAO,CAAC,IAAI,CACpC,uBAAC,mCAAe,IACd,SAAS,EAAC,yBAAyB,EACnC,OAAO,EAAE,mBAAmB,EAC5B,WAAW,EAAE,IAAI,EACjB,IAAI,EAAC,QAAQ,EACb,cAAc,EAAE;gBACd,YAAY,EAAE,OAAO;aACtB,YAED,uBAAC,wBAAgB,KAAG,GACJ,CACnB,GACA,CACJ,CAAC;IAEF,MAAM,gBAAgB,GAAG,CACvB,wBAAC,wBAAS,kBACR,EAAE,EAAE,SAAS,EACb,WAAW,EAAE;YACX,MAAM,EAAE,MAAM;YACd,KAAK,EAAE,MAAM;SACd,IACG,eAAe,IACnB,SAAS,EAAE,OAAO,EAClB,KAAK,gCACH,QAAQ,EAAE,sBAAsB,IAC7B,KAAK,GACL,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,KAAK,GAE3B,iBAAiB,EAAE,IAAI,EACvB,MAAM,EAAC,QAAQ,EACf,YAAY,kCAIP,CAAC,QAAQ,KAAK,MAAM,IAAI,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,GACrD,CAAC,QAAQ,KAAK,OAAO,IAAI,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,GAEzD,MAAM,EAAE;YACN,MAAM,EAAE,KAAK;YACb,UAAU,EAAE,KAAK;YACjB,WAAW,EAAE,KAAK;YAClB,IAAI,EAAE,QAAQ,KAAK,OAAO;YAC1B,KAAK,EAAE,QAAQ,KAAK,MAAM;YAC1B,GAAG,EAAE,KAAK;YACV,OAAO,EAAE,KAAK;YACd,QAAQ,EAAE,KAAK;SAChB,EACD,eAAe,EACb,QAAQ,KAAK,MAAM;YACjB,CAAC,CAAC;gBACE,KAAK,EAAE,CACL,uBAAC,kBAAkB,IACjB,UAAU,EAAC,OAAO,EAClB,UAAU,EAAE,cAAc,EAC1B,QAAQ,EAAE,cAAc,CAAC,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,CAAC,EACnD,QAAQ,EAAE,cAAc,CAAC,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,CAAC,EACnD,QAAQ,EAAE,WAAW,GACrB,CACH;aACF;YACH,CAAC,CAAC;gBACE,IAAI,EAAE,CACJ,uBAAC,kBAAkB,IACjB,UAAU,EAAC,MAAM,EACjB,UAAU,EAAE,cAAc,EAC1B,QAAQ,EAAE,cAAc,CAAC,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,CAAC,EACnD,QAAQ,EAAE,cAAc,CAAC,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,QAAQ,CAAC,EACnD,QAAQ,EAAE,WAAW,GACrB,CACH;aACF,EAEP,QAAQ,EAAE,YAAY,EACtB,GAAG,EAAE,kBAAkB,IACnB,SAAS,EACT,cAAc,eAElB,uBAAC,KAAK,KAAG,EACR,QAAQ,KACC,CACb,CAAC;IAEF,MAAM,cAAc,GAAG,CACrB,wBAAC,SAAS,kBACR,SAAS,EAAE,IAAA,oBAAU,EAAC,OAAO,CAAC,EAC9B,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,IACJ,SAAS,EACT,cAAc,eAElB,uBAAC,KAAK,KAAG,EACR,QAAQ,KACC,CACb,CAAC;IAEF,4BAA4B;IAC5B,MAAM,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,cAAc,CAAC;IAEjE,MAAM,YAAY,GAAG,IAAA,oBAAY,EAAC,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;IAEzE,2DAA2D;IAC3D,IAAI,UAAU,KAAK,KAAK,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,qBAAqB;IACrB,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;QACrB,OAAO,CACL,wBAAC,sBAAc,oBAAK,WAAW,eAC7B,uBAAC,uBAAe,IACd,SAAS,EAAC,yBAAyB,EACnC,UAAU,EAAE,IAAI,GAChB,EACF,uBAAC,4BAAoB,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,YACpE,8CACE,GAAG,EAAE,IAAI,CAAC,WAAW,IACjB,gBAAgB,EAAE,kBACV,SAAS,gBACV,MAAM,YAEhB,OAAO,IACJ,GACe,KACR,CAClB,CAAC;IACJ,CAAC;IAED,OAAO,CACL,uBAAC,kCAAe,IACd,UAAU,EAAE,UAAU,IAAI,IAAI,KAAK,SAAS,EAC5C,IAAI,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC,CACtB,uBAAC,sBAAc,kBAAC,gBAAgB,EAAE,IAAI,IAAM,WAAW,cACpD,YAAY,IACE,CAClB,YAED,uBAAC,4BAAoB,IACnB,QAAQ,EAAE,CAAC,UAAU,IAAI,IAAI,KAAK,MAAM,EACxC,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,IAAI,EACjB,eAAe,EAAE,eAAe,YAEhC,uBAAC,kCAAe,IACd,UAAU,EAAE,IAAI,KAAK,SAAS,EAC9B,IAAI,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC,CACtB,8CACE,GAAG,EAAE,YAAY,IACb,gBAAgB,EAAE,kBACV,SAAS,YAEpB,YAAY,IACT,CACP,YAEA,OAAO,GACQ,GACG,GACP,CACnB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,QAAQ,CAAC;AASvC,MAAM,YAAY,GAAG,CAAC,EAKF,EAAE,EAAE;QALF,EACpB,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,cAAc,OAEI,EADf,SAAS,cAJQ,2CAKrB,CADa;IAEZ,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;IAE3D,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;QACjE,OAAO,CACL,uBAAC,uBAAU,kBACT,SAAS,EAAE,OAAO,EAClB,OAAO,EAAC,SAAS,IACb,SAAS,EACT,cAAc,cAEjB,QAAQ,IACE,CACd,CAAC;IACJ,CAAC;IAED,OAAO,CACL,8CAAK,SAAS,EAAE,OAAO,IAAM,SAAS,EAAM,cAAc,cACvD,QAAQ,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAQF,MAAM,aAAa,GAAG,CAAC,EAKF,EAAE,EAAE;QALF,EACrB,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,cAAc,OAEK,EADhB,SAAS,cAJS,2CAKtB,CADa;IAEZ,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,oBAAoB,EAAE,SAAS,CAAC,CAAC;IAE5D,OAAO,CACL,8CAAK,SAAS,EAAE,OAAO,IAAM,SAAS,EAAM,cAAc,cACvD,QAAQ,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAQF,MAAM,UAAU,GAAG,CAAC,EAKF,EAAE,EAAE;QALF,EAClB,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,cAAc,OAEE,EADb,SAAS,cAJM,2CAKnB,CADa;IAEZ,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,CACL,gCAAK,SAAS,EAAC,yBAAyB,YACtC,8CAAK,SAAS,EAAE,OAAO,IAAM,SAAS,EAAM,cAAc,cACvD,QAAQ,IACL,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;IAC5C,OAAO,EAAE,aAAa;IACtB,IAAI,EAAE,UAAU;IAChB,MAAM,EAAE,YAAY;CACrB,CAAC,CAAC;AAEM,wBAAM","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport {\n FloatingFocusManager,\n FloatingOverlay,\n FloatingPortal,\n useDismiss,\n useFloating,\n useInteractions,\n useMergeRefs,\n useRole,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { Resizable, type ResizableProps } from 're-resizable';\nimport type React from 'react';\nimport {\n type ComponentProps,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nimport {\n type HtmlAttributes,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { XMarkIconOutline } from '../icons';\nimport { Typography } from '../typography';\n\ntype DrawerPosition = 'left' | 'right';\n\ntype DrawerType = 'overlay' | 'push' | 'modal';\n\ntype DrawerProps = {\n /** Controls whether the drawer is open (expanded) or closed (collapsed). */\n isExpanded: boolean;\n\n /** Callback fired when the drawer's expanded state changes (close button, Escape, click outside, or programmatic change). */\n onExpandedChange?: (expanded: boolean) => void;\n\n /** Position where the drawer appears on screen. By default, it appears from the left. */\n position?: DrawerPosition;\n\n /** How the drawer affects the layout of sibling content. By default, it overlays content. */\n type?: DrawerType;\n\n /** Enables horizontal resizing of the drawer, by default it is not resizable. */\n isResizeable?: boolean;\n\n /** To use this prop the isResizeable prop must be set to true. For overriding the third party library props: https://github.com/bokuweb/re-resizable */\n resizeableProps?: ResizableProps;\n\n /** Whether a close button (X) is displayed in the drawer. */\n isCloseable?: boolean;\n\n /** Whether to portal the content. Only applies when type is \"overlay\". Type \"modal\" is always portaled.*/\n isPortaled?: boolean;\n\n // TODO v5: this should maybe be default on portaled in the future\n /**\n * Whether pressing Escape closes the drawer.\n * - When type is \"modal\", this defaults to true.\n * - When type is \"overlay\", this defaults to false.\n * - When type is \"push\", no effect.\n */\n closeOnEscape?: boolean;\n\n // TODO v5: this should maybe be default on overlay in the future\n /**\n * When type is \"overlay\", whether clicking outside the drawer closes it.\n * - When type is \"overlay\" or \"modal\", this defaults to false.\n * - When type is \"push\", no effect.\n */\n closeOnClickOutside?: boolean;\n\n // TODO v5: this should maybe be default on overlay in the future\n /**\n * Whether tabbing focus outside the drawer closes it.\n * - When type is \"overlay\", this defaults to false.\n * - When type is \"push\" or \"modal\", no effect.\n */\n closeOnFocusOut?: boolean;\n\n /** The content to display within the drawer. */\n children: React.ReactNode;\n\n /**\n * Props to pass to the portal from @floating-ui/react FloatingPortal\n * Only applies when type is \"overlay\" and isPortaled is true, or if type is \"modal\".\n * @see https://floating-ui.com/docs/floatingportal\n */\n portalProps?: ComponentProps<typeof FloatingPortal>;\n} & (\n | {\n type: 'modal';\n /** The aria-label to apply to the drawer. Required for accessibility when type is \"modal\" or \"overlay\".*/\n ariaLabel: string;\n }\n | {\n type?: 'push' | 'overlay';\n // TODO v5: aria label should be required when type is \"overlay\" too.\n ariaLabel?: string;\n }\n);\n\nconst KEYBOARD_RESIZE_STEP_PX = 16;\n\nfunction parsePixelSize(\n value: string | number | undefined,\n): number | undefined {\n if (value === undefined) {\n return undefined;\n }\n if (typeof value === 'number') {\n return value;\n }\n const parsed = parseInt(value.replace(/px$/i, ''), 10);\n return Number.isNaN(parsed) ? undefined : parsed;\n}\n\ntype DrawerResizeHandleProps = {\n /** Which edge this handle resizes (right = drawer’s right edge, left = drawer’s left edge). */\n handleSide: 'left' | 'right';\n /** Called with a pixel delta to apply to the drawer width (positive = wider). */\n onResizeBy: (delta: number) => void;\n onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n /** Current width in pixels (for aria-valuenow). */\n valueNow?: number;\n /** Minimum width in pixels (for aria-valuemin). */\n valueMin?: number;\n /** Maximum width in pixels (for aria-valuemax). */\n valueMax?: number;\n};\n\nfunction DrawerResizeHandle({\n handleSide,\n onResizeBy,\n valueMax,\n valueMin,\n valueNow,\n}: DrawerResizeHandleProps) {\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLDivElement>) => {\n const isArrowKey = e.key === 'ArrowLeft' || e.key === 'ArrowRight';\n if (isArrowKey) {\n e.preventDefault();\n const delta =\n handleSide === 'right'\n ? e.key === 'ArrowRight'\n ? KEYBOARD_RESIZE_STEP_PX\n : -KEYBOARD_RESIZE_STEP_PX\n : e.key === 'ArrowLeft'\n ? KEYBOARD_RESIZE_STEP_PX\n : -KEYBOARD_RESIZE_STEP_PX;\n onResizeBy(delta);\n }\n },\n [handleSide, onResizeBy],\n );\n\n return (\n /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Resize handle is focusable for keyboard resize. */\n <div\n aria-label={`Resize drawer with arrow keys. Handle on ${handleSide}.`}\n aria-orientation=\"vertical\"\n aria-valuemax={valueMax}\n aria-valuemin={valueMin}\n aria-valuenow={valueNow ?? 0}\n aria-valuetext={`drawer width ${valueNow ?? 0}px`}\n className=\"ndl-drawer-resize-handle\"\n data-drawer-handle={handleSide}\n onKeyDown={handleKeyDown}\n role=\"separator\"\n style={{ height: '100%', width: '100%' }}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- Resize handle is focusable for keyboard resize.\n tabIndex={0}\n />\n );\n}\n\nconst DrawerComponent = function DrawerComponent<\n T extends React.ElementType = 'div',\n>({\n children,\n className = '',\n isExpanded,\n onExpandedChange,\n position = 'left',\n type = 'overlay',\n isResizeable = false,\n resizeableProps,\n isCloseable = true,\n isPortaled = false,\n portalProps = {},\n closeOnEscape = type === 'modal' ? true : false,\n closeOnClickOutside = false,\n closeOnFocusOut = false,\n ariaLabel,\n htmlAttributes,\n style,\n ref,\n as,\n ...restProps\n}: PolymorphicCommonProps<T, DrawerProps>) {\n const resizableRef = useRef<Resizable | null>(null);\n const [resizeWidth, setResizeWidth] = useState<number>(0);\n\n if ((type === 'modal' || type === 'overlay') && !ariaLabel) {\n needleWarningMessage(\n 'A Drawer should have an aria-label when type is \"modal\" or \"overlay\" to be accessible.',\n );\n }\n\n const { refs, context } = useFloating({\n onOpenChange: onExpandedChange,\n open: isExpanded,\n });\n\n /** Dismiss (escape + click outside) applies to portaled overlay and to non-portaled overlay. */\n const shouldUseDismiss =\n type === 'modal' ||\n (type === 'overlay' && !isPortaled && isExpanded) ||\n (type === 'overlay' && isPortaled);\n\n const dismiss = useDismiss(context, {\n enabled: shouldUseDismiss,\n escapeKey: closeOnEscape,\n outsidePress: closeOnClickOutside,\n });\n const role = useRole(context, {\n enabled: type === 'modal' || type === 'overlay',\n role: 'dialog',\n });\n const { getFloatingProps } = useInteractions([dismiss, role]);\n\n const resizableMergedRef = useMergeRefs([resizableRef, ref]);\n\n const handleResizeBy = useCallback(\n (delta: number) => {\n if (!resizableRef.current) {\n return;\n }\n const current = resizableRef.current.size;\n const min = parsePixelSize(resizeableProps?.minWidth);\n const max = parsePixelSize(resizeableProps?.maxWidth);\n const newWidth = Math.max(\n min ?? 0,\n Math.min(max ?? Number.POSITIVE_INFINITY, current.width + delta),\n );\n resizableRef.current.updateSize({\n height: '100%',\n width: newWidth,\n });\n setResizeWidth(newWidth);\n },\n [resizeableProps?.minWidth, resizeableProps?.maxWidth],\n );\n\n const handleResize = useCallback(\n (\n event: MouseEvent | TouchEvent,\n direction: Parameters<NonNullable<ResizableProps['onResize']>>[1],\n elementRef: HTMLElement,\n delta: { width: number; height: number },\n ) => {\n setResizeWidth(elementRef.offsetWidth);\n resizeableProps?.onResize?.(event, direction, elementRef, delta);\n },\n [resizeableProps],\n );\n\n useEffect(() => {\n if (!isResizeable || !resizableRef.current) {\n return;\n }\n const width = resizableRef.current.size.width;\n if (width > 0) {\n setResizeWidth(width);\n }\n }, [isResizeable]);\n\n const setOnExpandedChange = useCallback(() => {\n onExpandedChange?.(!isExpanded);\n }, [isExpanded, onExpandedChange]);\n\n const classes = classNames('ndl-drawer', className, {\n 'ndl-drawer-left': position === 'left',\n 'ndl-drawer-modal': type === 'modal',\n 'ndl-drawer-overlay': type === 'overlay',\n 'ndl-drawer-portaled': isPortaled && type === 'overlay',\n 'ndl-drawer-push': type === 'push',\n 'ndl-drawer-right': position === 'right',\n });\n\n const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';\n const Component = as ?? 'div';\n\n const Close = () => (\n <>\n {(isCloseable || type === 'modal') && (\n <CleanIconButton\n className=\"ndl-drawer-close-button\"\n onClick={setOnExpandedChange}\n description={null}\n size=\"medium\"\n htmlAttributes={{\n 'aria-label': 'Close',\n }}\n >\n <XMarkIconOutline />\n </CleanIconButton>\n )}\n </>\n );\n\n const resizableContent = (\n <Resizable\n as={Component}\n defaultSize={{\n height: '100%',\n width: 'auto',\n }}\n {...resizeableProps}\n className={classes}\n style={{\n position: resizableStylePosition,\n ...style,\n ...resizeableProps?.style,\n }}\n boundsByDirection={true}\n bounds=\"parent\"\n handleStyles={{\n /*\n * Small offset so the handle is easier to hit when the drawer content is scrollable.\n */\n ...(position === 'left' && { right: { right: '-8px' } }),\n ...(position === 'right' && { left: { left: '-8px' } }),\n }}\n enable={{\n bottom: false,\n bottomLeft: false,\n bottomRight: false,\n left: position === 'right',\n right: position === 'left',\n top: false,\n topLeft: false,\n topRight: false,\n }}\n handleComponent={\n position === 'left'\n ? {\n right: (\n <DrawerResizeHandle\n handleSide=\"right\"\n onResizeBy={handleResizeBy}\n valueMax={parsePixelSize(resizeableProps?.maxWidth)}\n valueMin={parsePixelSize(resizeableProps?.minWidth)}\n valueNow={resizeWidth}\n />\n ),\n }\n : {\n left: (\n <DrawerResizeHandle\n handleSide=\"left\"\n onResizeBy={handleResizeBy}\n valueMax={parsePixelSize(resizeableProps?.maxWidth)}\n valueMin={parsePixelSize(resizeableProps?.minWidth)}\n valueNow={resizeWidth}\n />\n ),\n }\n }\n onResize={handleResize}\n ref={resizableMergedRef}\n {...restProps}\n {...htmlAttributes}\n >\n <Close />\n {children}\n </Resizable>\n );\n\n const regularContent = (\n <Component\n className={classNames(classes)}\n style={style}\n ref={ref}\n {...restProps}\n {...htmlAttributes}\n >\n <Close />\n {children}\n </Component>\n );\n\n /** what content to render*/\n const content = isResizeable ? resizableContent : regularContent;\n\n const floatingRefs = useMergeRefs([refs.setFloating, refs.setReference]);\n\n /** if the drawer is not expanded, don't render anything */\n if (isExpanded === false) {\n return null;\n }\n\n /** modal behavior */\n if (type === 'modal') {\n return (\n <FloatingPortal {...portalProps}>\n <FloatingOverlay\n className=\"ndl-drawer-overlay-root\"\n lockScroll={true}\n />\n <FloatingFocusManager context={context} modal={true} returnFocus={true}>\n <div\n ref={refs.setFloating}\n {...getFloatingProps()}\n aria-label={ariaLabel}\n aria-modal=\"true\"\n >\n {content}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n }\n\n return (\n <ConditionalWrap\n shouldWrap={isPortaled && type === 'overlay'}\n wrap={(wrapChildren) => (\n <FloatingPortal preserveTabOrder={true} {...portalProps}>\n {wrapChildren}\n </FloatingPortal>\n )}\n >\n <FloatingFocusManager\n disabled={!isExpanded || type === 'push'}\n context={context}\n modal={false}\n returnFocus={true}\n closeOnFocusOut={closeOnFocusOut}\n >\n <ConditionalWrap\n shouldWrap={type === 'overlay'}\n wrap={(wrapChildren) => (\n <div\n ref={floatingRefs}\n {...getFloatingProps()}\n aria-label={ariaLabel}\n >\n {wrapChildren}\n </div>\n )}\n >\n {content}\n </ConditionalWrap>\n </FloatingFocusManager>\n </ConditionalWrap>\n );\n};\n\nDrawerComponent.displayName = 'Drawer';\n\ntype DrawerHeaderProps = {\n children: React.ReactNode;\n className?: string;\n // TODO v5: fix the typing on the Drawer subcomponents to use the common props type. Also, this is not an h5 haha. Should be polymorphic I guess, maybe default to h2 as we've recommended.\n htmlAttributes?: HtmlAttributes<'h5'>;\n};\n\nconst DrawerHeader = ({\n children,\n className = '',\n htmlAttributes,\n ...restProps\n}: DrawerHeaderProps) => {\n const classes = classNames('ndl-drawer-header', className);\n\n if (typeof children === 'string' || typeof children === 'number') {\n return (\n <Typography\n className={classes}\n variant=\"title-3\"\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </Typography>\n );\n }\n\n return (\n <div className={classes} {...restProps} {...htmlAttributes}>\n {children}\n </div>\n );\n};\n\ntype DrawerActionsProps = {\n children: React.ReactNode;\n className?: string;\n htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerActions = ({\n children,\n className = '',\n htmlAttributes,\n ...restProps\n}: DrawerActionsProps) => {\n const classes = classNames('ndl-drawer-actions', className);\n\n return (\n <div className={classes} {...restProps} {...htmlAttributes}>\n {children}\n </div>\n );\n};\n\ntype DrawerBodyProps = {\n children: React.ReactNode;\n className?: string;\n htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerBody = ({\n children,\n className = '',\n htmlAttributes,\n ...restProps\n}: DrawerBodyProps) => {\n const classes = classNames('ndl-drawer-body', className);\n\n return (\n <div className=\"ndl-drawer-body-wrapper\">\n <div className={classes} {...restProps} {...htmlAttributes}>\n {children}\n </div>\n </div>\n );\n};\n\nconst Drawer = Object.assign(DrawerComponent, {\n Actions: DrawerActions,\n Body: DrawerBody,\n Header: DrawerHeader,\n});\n\nexport { Drawer };\n"]}
|
|
@@ -106,6 +106,24 @@ const PopoverTrigger = (_a) => {
|
|
|
106
106
|
}
|
|
107
107
|
return ((0, jsx_runtime_1.jsx)("button", Object.assign({ ref: context.refs.setReference, type: "button", "data-state": context.isOpen ? 'open' : 'closed' }, context.getReferenceProps(props), { children: children })));
|
|
108
108
|
};
|
|
109
|
+
/**
|
|
110
|
+
* Use this to separate the anchor visually from the trigger.
|
|
111
|
+
*/
|
|
112
|
+
const PopoverAnchor = (_a) => {
|
|
113
|
+
var { children, ref } = _a, props = __rest(_a, ["children", "ref"]);
|
|
114
|
+
const context = (0, exports.usePopoverContext)();
|
|
115
|
+
// oxlint-disable-next-line @typescript-eslint/no-explicit-any
|
|
116
|
+
const childrenProps = children === null || children === void 0 ? void 0 : children.props;
|
|
117
|
+
const mergedRefs = (0, react_1.useMergeRefs)([
|
|
118
|
+
context.refs.setPositionReference,
|
|
119
|
+
ref,
|
|
120
|
+
childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.ref,
|
|
121
|
+
]);
|
|
122
|
+
if (react_2.default.isValidElement(children)) {
|
|
123
|
+
return react_2.default.cloneElement(children, Object.assign(Object.assign(Object.assign({}, props), childrenProps), { ref: mergedRefs }));
|
|
124
|
+
}
|
|
125
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: mergedRefs }, props, { children: children })));
|
|
126
|
+
};
|
|
109
127
|
const PopoverContent = (_a) => {
|
|
110
128
|
var { as, className, style, children, htmlAttributes, ref } = _a, restProps = __rest(_a, ["as", "className", "style", "children", "htmlAttributes", "ref"]);
|
|
111
129
|
const _b = (0, exports.usePopoverContext)(), { context: floatingContext } = _b, context = __rest(_b, ["context"]);
|
|
@@ -128,6 +146,7 @@ const PopoverContent = (_a) => {
|
|
|
128
146
|
}, children: (0, jsx_runtime_1.jsx)(react_1.FloatingFocusManager, { context: floatingContext, modal: context.shouldCaptureFocus, initialFocus: context.initialFocus, children: (0, jsx_runtime_1.jsx)(Component, Object.assign({ className: classes, "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId, style: Object.assign(Object.assign(Object.assign({}, context.floatingStyles), context.transitionStyles), style), ref: refs }, context.getFloatingProps(Object.assign({}, htmlAttributes)), restProps, { children: children })) }) }));
|
|
129
147
|
};
|
|
130
148
|
const Popover = Object.assign(PopoverComponent, {
|
|
149
|
+
Anchor: PopoverAnchor,
|
|
131
150
|
Content: PopoverContent,
|
|
132
151
|
Trigger: PopoverTrigger,
|
|
133
152
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/popover/Popover.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 FloatingPortal,\n type OffsetOptions,\n type Placement,\n useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React from 'react';\n\nimport {\n type CommonProps,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { useNeedleTheme } from '../theme/ThemeProvider';\nimport { usePopover } from './use-popover';\nimport { usePatchFloatingFocusGuards } from './usePatchFloatingFocusGuards';\n\ntype PlacementOptions =\n | 'bottom-end-top-end'\n | 'bottom-start-top-start'\n | 'bottom-middle-top-middle'\n | 'top-end-bottom-end'\n | 'top-start-bottom-start'\n | 'top-middle-bottom-middle'\n | 'bottom-start-bottom-end'\n | 'top-start-top-end'\n | 'middle-start-middle-end'\n | 'bottom-end-bottom-start'\n | 'top-end-top-start'\n | 'middle-end-middle-start';\n\nexport const placementTranslation: Record<PlacementOptions, Placement> = {\n 'bottom-end-bottom-start': 'right-end',\n 'bottom-end-top-end': 'bottom-end',\n 'bottom-middle-top-middle': 'bottom',\n 'bottom-start-bottom-end': 'left-end',\n 'bottom-start-top-start': 'bottom-start',\n 'middle-end-middle-start': 'right',\n 'middle-start-middle-end': 'left',\n 'top-end-bottom-end': 'top-end',\n 'top-end-top-start': 'right-start',\n 'top-middle-bottom-middle': 'top',\n 'top-start-bottom-start': 'top-start',\n 'top-start-top-end': 'left-start',\n};\ntype PopoverProps = {\n /** if the popover is open */\n isOpen?: boolean;\n /** The content of the popover */\n children?: React.ReactNode;\n /** Can be used if the anchor should be separated from the trigger */\n anchorElement?: Element | null;\n /** If the anchorPosition is provided the anchorElement will be ignored */\n anchorPosition?: {\n x: number;\n y: number;\n };\n /** The placement of the floating element is determined by two sets of words. The first set of words specifies the point on the anchor element where the floating element will be attached. The second set of coordinates specifies the point on the floating element that will attach to the anchor element.*/\n placement?: PlacementOptions;\n /** can take either a number, an object or a function. Full documentation here: https://floating-ui.com/docs/offset */\n offset?: OffsetOptions;\n /** Called when an internal state change is triggered, when the floating element either opens or closes. It is not called when `isOpen` is updated by the consumer. */\n onOpenChange?: (isOpen: boolean, event?: Event) => void;\n /** Use anchorEl for portal's container. Should be used if the popover is portaled and is inside a Dialog for example. */\n hasAnchorPortal?: boolean;\n /** If the popover should constrain the focus inside the popover while open */\n shouldCaptureFocus?: boolean;\n /** Which element to initially focus. **/\n initialFocus?: number | React.RefObject<HTMLElement | null>;\n /** The role of the popover */\n role?:\n | 'tooltip'\n | 'dialog'\n | 'alertdialog'\n | 'menu'\n | 'listbox'\n | 'grid'\n | 'tree';\n /** If the popover should close when the user clicks outside of it */\n closeOnClickOutside?: boolean;\n /** The strategy of the popover. Fixed should be used when the popover is inside a Dialog. */\n strategy?: 'fixed' | 'absolute';\n /** Whether the content is rendered in a portal */\n isPortaled?: boolean;\n};\n\ntype ContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<ContextType>(null);\n\nexport const usePopoverContext = () => {\n const context = React.useContext(PopoverContext);\n\n if (context === null) {\n throw new Error('Popover components must be wrapped in <Popover />');\n }\n\n return context;\n};\n\nconst PopoverComponent = ({\n children,\n anchorElement,\n placement,\n isOpen,\n offset,\n anchorPosition,\n hasAnchorPortal: hasAnchorPortalProp,\n shouldCaptureFocus = false,\n initialFocus,\n onOpenChange,\n role,\n closeOnClickOutside = true,\n isPortaled: isPortaledProp,\n strategy: strategyProp,\n}: PopoverProps) => {\n const isInsideDialog = useIsInsideDialog();\n\n const strategy = isInsideDialog ? 'fixed' : 'absolute';\n const hasAnchorPortal = isInsideDialog;\n const isPortaled = !isInsideDialog;\n\n const popover = usePopover({\n anchorElement: anchorElement,\n anchorElementAsPortalAnchor: hasAnchorPortalProp ?? hasAnchorPortal,\n anchorPosition,\n closeOnClickOutside,\n initialFocus,\n isOpen: isOpen,\n isPortaled: isPortaledProp ?? isPortaled,\n offsetOption: offset,\n onOpenChange: onOpenChange,\n placement: placement ? placementTranslation[placement] : undefined,\n role,\n shouldCaptureFocus: shouldCaptureFocus,\n strategy: strategyProp ?? strategy,\n });\n\n return (\n <PopoverContext.Provider value={popover}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\ntype PopoverTriggerProps = {\n /** The content of the trigger */\n children: React.ReactNode;\n /** Whether the trigger should render a button element, or pass its props to the child element */\n hasButtonWrapper?: boolean;\n};\n\nconst PopoverTrigger = ({\n children,\n hasButtonWrapper = false,\n ref,\n ...props\n}: CommonProps<'button', PopoverTriggerProps>) => {\n const context = usePopoverContext();\n // Example from floating UI\n // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n const childrenProps = (children as any).props;\n const mergedRefs = useMergeRefs([\n context.refs.setReference,\n ref,\n childrenProps?.ref,\n ]);\n\n // `hasButtonWrapper` allows the user to pass any element as the anchor\n if (hasButtonWrapper && React.isValidElement(children)) {\n return React.cloneElement(\n children,\n context.getReferenceProps({\n ...props,\n ...childrenProps,\n 'data-state': context.isOpen ? 'open' : 'closed',\n ref: mergedRefs,\n }),\n );\n }\n return (\n <button\n ref={context.refs.setReference}\n type=\"button\"\n data-state={context.isOpen ? 'open' : 'closed'}\n {...context.getReferenceProps(props)}\n >\n {children}\n </button>\n );\n};\n\ntype PopoverContentProps = {\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n};\n\nconst PopoverContent = <T extends React.ElementType = 'div'>({\n as,\n className,\n style,\n children,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, PopoverContentProps>) => {\n const { context: floatingContext, ...context } = usePopoverContext();\n\n const refs = useMergeRefs([context.refs.setFloating, ref]);\n\n const { themeClassName } = useNeedleTheme();\n\n const classes = classNames('ndl-popover', themeClassName, className);\n const Component: React.ElementType = as ?? 'div';\n\n // Patch to not get axe errors for the focus guards\n // To be noted is that axe gives us a false positive error here since the focus guards directly pass focus to other elements\n // https://github.com/floating-ui/floating-ui/issues/2462\n usePatchFloatingFocusGuards();\n\n if (!floatingContext.open) {\n return null;\n }\n\n return (\n <ConditionalWrap\n shouldWrap={context.isPortaled}\n wrap={(wrapChildren) => (\n <FloatingPortal\n root={\n (context.anchorElementAsPortalAnchor ?? false)\n ? (context.refs.reference.current as HTMLElement | null)\n : undefined\n }\n >\n {wrapChildren}\n </FloatingPortal>\n )}\n >\n <FloatingFocusManager\n context={floatingContext}\n modal={context.shouldCaptureFocus}\n initialFocus={context.initialFocus}\n >\n <Component\n className={classes}\n aria-labelledby={context.labelId}\n aria-describedby={context.descriptionId}\n style={{\n ...context.floatingStyles,\n ...context.transitionStyles,\n ...style,\n }}\n ref={refs}\n {...context.getFloatingProps({ ...htmlAttributes })}\n {...restProps}\n >\n {children}\n </Component>\n </FloatingFocusManager>\n </ConditionalWrap>\n );\n};\n\nconst Popover = Object.assign(PopoverComponent, {\n Content: PopoverContent,\n Trigger: PopoverTrigger,\n});\n\nexport { Popover };\n"]}
|
|
1
|
+
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/popover/Popover.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 FloatingPortal,\n type OffsetOptions,\n type Placement,\n useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React from 'react';\n\nimport {\n type CommonProps,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { useNeedleTheme } from '../theme/ThemeProvider';\nimport { usePopover } from './use-popover';\nimport { usePatchFloatingFocusGuards } from './usePatchFloatingFocusGuards';\n\ntype PlacementOptions =\n | 'bottom-end-top-end'\n | 'bottom-start-top-start'\n | 'bottom-middle-top-middle'\n | 'top-end-bottom-end'\n | 'top-start-bottom-start'\n | 'top-middle-bottom-middle'\n | 'bottom-start-bottom-end'\n | 'top-start-top-end'\n | 'middle-start-middle-end'\n | 'bottom-end-bottom-start'\n | 'top-end-top-start'\n | 'middle-end-middle-start';\n\nexport const placementTranslation: Record<PlacementOptions, Placement> = {\n 'bottom-end-bottom-start': 'right-end',\n 'bottom-end-top-end': 'bottom-end',\n 'bottom-middle-top-middle': 'bottom',\n 'bottom-start-bottom-end': 'left-end',\n 'bottom-start-top-start': 'bottom-start',\n 'middle-end-middle-start': 'right',\n 'middle-start-middle-end': 'left',\n 'top-end-bottom-end': 'top-end',\n 'top-end-top-start': 'right-start',\n 'top-middle-bottom-middle': 'top',\n 'top-start-bottom-start': 'top-start',\n 'top-start-top-end': 'left-start',\n};\ntype PopoverProps = {\n /** if the popover is open */\n isOpen?: boolean;\n /** The content of the popover */\n children?: React.ReactNode;\n /**\n * Can be used if the anchor should be separated from the trigger.\n * Note: to visually separate the anchor from the trigger, use the Popover.Anchor component instead.\n */\n anchorElement?: Element | null;\n /** If the anchorPosition is provided the anchorElement will be ignored */\n anchorPosition?: {\n x: number;\n y: number;\n };\n /** The placement of the floating element is determined by two sets of words. The first set of words specifies the point on the anchor element where the floating element will be attached. The second set of coordinates specifies the point on the floating element that will attach to the anchor element.*/\n placement?: PlacementOptions;\n /** can take either a number, an object or a function. Full documentation here: https://floating-ui.com/docs/offset */\n offset?: OffsetOptions;\n /** Called when an internal state change is triggered, when the floating element either opens or closes. It is not called when `isOpen` is updated by the consumer. */\n onOpenChange?: (isOpen: boolean, event?: Event) => void;\n /** Use anchorEl for portal's container. Should be used if the popover is portaled and is inside a Dialog for example. */\n hasAnchorPortal?: boolean;\n /** If the popover should constrain the focus inside the popover while open */\n shouldCaptureFocus?: boolean;\n /** Which element to initially focus. **/\n initialFocus?: number | React.RefObject<HTMLElement | null>;\n /** The role of the popover */\n role?:\n | 'tooltip'\n | 'dialog'\n | 'alertdialog'\n | 'menu'\n | 'listbox'\n | 'grid'\n | 'tree';\n /** If the popover should close when the user clicks outside of it */\n closeOnClickOutside?: boolean;\n /** The strategy of the popover. Fixed should be used when the popover is inside a Dialog. */\n strategy?: 'fixed' | 'absolute';\n /** Whether the content is rendered in a portal */\n isPortaled?: boolean;\n};\n\ntype ContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<ContextType>(null);\n\nexport const usePopoverContext = () => {\n const context = React.useContext(PopoverContext);\n\n if (context === null) {\n throw new Error('Popover components must be wrapped in <Popover />');\n }\n\n return context;\n};\n\nconst PopoverComponent = ({\n children,\n anchorElement,\n placement,\n isOpen,\n offset,\n anchorPosition,\n hasAnchorPortal: hasAnchorPortalProp,\n shouldCaptureFocus = false,\n initialFocus,\n onOpenChange,\n role,\n closeOnClickOutside = true,\n isPortaled: isPortaledProp,\n strategy: strategyProp,\n}: PopoverProps) => {\n const isInsideDialog = useIsInsideDialog();\n\n const strategy = isInsideDialog ? 'fixed' : 'absolute';\n const hasAnchorPortal = isInsideDialog;\n const isPortaled = !isInsideDialog;\n\n const popover = usePopover({\n anchorElement: anchorElement,\n anchorElementAsPortalAnchor: hasAnchorPortalProp ?? hasAnchorPortal,\n anchorPosition,\n closeOnClickOutside,\n initialFocus,\n isOpen: isOpen,\n isPortaled: isPortaledProp ?? isPortaled,\n offsetOption: offset,\n onOpenChange: onOpenChange,\n placement: placement ? placementTranslation[placement] : undefined,\n role,\n shouldCaptureFocus: shouldCaptureFocus,\n strategy: strategyProp ?? strategy,\n });\n\n return (\n <PopoverContext.Provider value={popover}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\ntype PopoverTriggerProps = {\n /** The content of the trigger */\n children: React.ReactNode;\n /** Whether the trigger should render a button element, or pass its props to the child element */\n hasButtonWrapper?: boolean;\n};\n\nconst PopoverTrigger = ({\n children,\n hasButtonWrapper = false,\n ref,\n ...props\n}: CommonProps<'button', PopoverTriggerProps>) => {\n const context = usePopoverContext();\n // Example from floating UI\n // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n const childrenProps = (children as any).props;\n const mergedRefs = useMergeRefs([\n context.refs.setReference,\n ref,\n childrenProps?.ref,\n ]);\n\n // `hasButtonWrapper` allows the user to pass any element as the anchor\n if (hasButtonWrapper && React.isValidElement(children)) {\n return React.cloneElement(\n children,\n context.getReferenceProps({\n ...props,\n ...childrenProps,\n 'data-state': context.isOpen ? 'open' : 'closed',\n ref: mergedRefs,\n }),\n );\n }\n return (\n <button\n ref={context.refs.setReference}\n type=\"button\"\n data-state={context.isOpen ? 'open' : 'closed'}\n {...context.getReferenceProps(props)}\n >\n {children}\n </button>\n );\n};\n\ntype PopoverAnchorProps = {\n children?: React.ReactNode;\n};\n\n/**\n * Use this to separate the anchor visually from the trigger.\n */\nconst PopoverAnchor = ({\n children,\n ref,\n ...props\n}: CommonProps<'div', PopoverAnchorProps>) => {\n const context = usePopoverContext();\n\n // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n const childrenProps = (children as any)?.props;\n const mergedRefs = useMergeRefs([\n context.refs.setPositionReference,\n ref,\n childrenProps?.ref,\n ]);\n\n if (React.isValidElement(children)) {\n return React.cloneElement(children, {\n ...props,\n ...childrenProps,\n ref: mergedRefs,\n });\n }\n\n return (\n <div ref={mergedRefs} {...props}>\n {children}\n </div>\n );\n};\n\ntype PopoverContentProps = {\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n};\n\nconst PopoverContent = <T extends React.ElementType = 'div'>({\n as,\n className,\n style,\n children,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, PopoverContentProps>) => {\n const { context: floatingContext, ...context } = usePopoverContext();\n\n const refs = useMergeRefs([context.refs.setFloating, ref]);\n\n const { themeClassName } = useNeedleTheme();\n\n const classes = classNames('ndl-popover', themeClassName, className);\n const Component: React.ElementType = as ?? 'div';\n\n // Patch to not get axe errors for the focus guards\n // To be noted is that axe gives us a false positive error here since the focus guards directly pass focus to other elements\n // https://github.com/floating-ui/floating-ui/issues/2462\n usePatchFloatingFocusGuards();\n\n if (!floatingContext.open) {\n return null;\n }\n\n return (\n <ConditionalWrap\n shouldWrap={context.isPortaled}\n wrap={(wrapChildren) => (\n <FloatingPortal\n root={\n (context.anchorElementAsPortalAnchor ?? false)\n ? (context.refs.reference.current as HTMLElement | null)\n : undefined\n }\n >\n {wrapChildren}\n </FloatingPortal>\n )}\n >\n <FloatingFocusManager\n context={floatingContext}\n modal={context.shouldCaptureFocus}\n initialFocus={context.initialFocus}\n >\n <Component\n className={classes}\n aria-labelledby={context.labelId}\n aria-describedby={context.descriptionId}\n style={{\n ...context.floatingStyles,\n ...context.transitionStyles,\n ...style,\n }}\n ref={refs}\n {...context.getFloatingProps({ ...htmlAttributes })}\n {...restProps}\n >\n {children}\n </Component>\n </FloatingFocusManager>\n </ConditionalWrap>\n );\n};\n\nconst Popover = Object.assign(PopoverComponent, {\n Anchor: PopoverAnchor,\n Content: PopoverContent,\n Trigger: PopoverTrigger,\n});\n\nexport { Popover };\n"]}
|
|
@@ -25,9 +25,8 @@ require("@neo4j-ndl/base/lib/neo4j-ds-styles.css");
|
|
|
25
25
|
const react_1 = require("@neo4j-ndl/react");
|
|
26
26
|
const react_2 = require("react");
|
|
27
27
|
const Component = () => {
|
|
28
|
-
const anchorRef = (0, react_2.useRef)(null);
|
|
29
28
|
const [isOpen, setIsOpen] = (0, react_2.useState)(false);
|
|
30
|
-
return ((0, jsx_runtime_1.
|
|
29
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "n-flex n-justify-between n-w-full", children: (0, jsx_runtime_1.jsxs)(react_1.Popover, { isOpen: isOpen, onOpenChange: (open) => setIsOpen(open), children: [(0, jsx_runtime_1.jsx)(react_1.Popover.Anchor, { children: (0, jsx_runtime_1.jsx)("div", { children: "Anchor Element" }) }), (0, jsx_runtime_1.jsx)(react_1.Popover.Trigger, { hasButtonWrapper: true, children: (0, jsx_runtime_1.jsx)(react_1.FilledButton, { onClick: () => setIsOpen(true), children: "Click to open popover" }) }), (0, jsx_runtime_1.jsx)(react_1.Popover.Content, { className: "n-p-token-16", children: "Popover content" })] }) }));
|
|
31
30
|
};
|
|
32
31
|
exports.default = Component;
|
|
33
32
|
//# sourceMappingURL=popover-separate-anchor.story.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover-separate-anchor.story.js","sourceRoot":"","sources":["../../../../src/popover/stories/popover-separate-anchor.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAyD;AACzD,
|
|
1
|
+
{"version":3,"file":"popover-separate-anchor.story.js","sourceRoot":"","sources":["../../../../src/popover/stories/popover-separate-anchor.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAAyD;AACzD,iCAAiC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5C,OAAO,CACL,gCAAK,SAAS,EAAC,mCAAmC,YAChD,wBAAC,eAAO,IAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,aAC9D,uBAAC,eAAO,CAAC,MAAM,cACb,6DAAyB,GACV,EACjB,uBAAC,eAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,uBAAC,oBAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,sCAE7B,GACC,EAClB,uBAAC,eAAO,CAAC,OAAO,IAAC,SAAS,EAAC,cAAc,gCAEvB,IACV,GACN,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { FilledButton, Popover } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n <div className=\"n-flex n-justify-between n-w-full\">\n <Popover isOpen={isOpen} onOpenChange={(open) => setIsOpen(open)}>\n <Popover.Anchor>\n <div>Anchor Element</div>\n </Popover.Anchor>\n <Popover.Trigger hasButtonWrapper>\n <FilledButton onClick={() => setIsOpen(true)}>\n Click to open popover\n </FilledButton>\n </Popover.Trigger>\n <Popover.Content className=\"n-p-token-16\">\n Popover content\n </Popover.Content>\n </Popover>\n </div>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -24,7 +24,7 @@ exports.usePopover = usePopover;
|
|
|
24
24
|
const react_1 = require("@floating-ui/react");
|
|
25
25
|
const base_1 = require("@neo4j-ndl/base");
|
|
26
26
|
const react_2 = require("react");
|
|
27
|
-
function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen: controlledOpen, onOpenChange: setControlledOpen, offsetOption = 10, anchorElement, anchorPosition, anchorElementAsPortalAnchor, shouldCaptureFocus, initialFocus, role: roleProp, closeOnClickOutside, strategy = 'absolute', isPortaled = true, } = {}) {
|
|
27
|
+
function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen: controlledOpen, onOpenChange: setControlledOpen, offsetOption = 10, anchorElement, anchorPosition, anchorElementAsPortalAnchor, shouldCaptureFocus, initialFocus, role: roleProp, closeOnClickOutside, closeOnReferencePress, returnFocus, strategy = 'absolute', isPortaled = true, } = {}) {
|
|
28
28
|
var _a;
|
|
29
29
|
// Internal state for uncontrolled mode (no `isOpen` prop provided).
|
|
30
30
|
const [isOpenUncontrolled, setIsOpenUncontrolled] = (0, react_2.useState)(isInitialOpen);
|
|
@@ -66,6 +66,7 @@ function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen: contr
|
|
|
66
66
|
});
|
|
67
67
|
const dismiss = (0, react_1.useDismiss)(context, {
|
|
68
68
|
outsidePress: closeOnClickOutside,
|
|
69
|
+
referencePress: closeOnReferencePress,
|
|
69
70
|
});
|
|
70
71
|
const role = (0, react_1.useRole)(context, {
|
|
71
72
|
role: roleProp,
|
|
@@ -87,7 +88,8 @@ function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen: contr
|
|
|
87
88
|
anchorElementAsPortalAnchor,
|
|
88
89
|
shouldCaptureFocus,
|
|
89
90
|
initialFocus,
|
|
90
|
-
isPortaled
|
|
91
|
+
isPortaled,
|
|
92
|
+
returnFocus })), [
|
|
91
93
|
isOpen,
|
|
92
94
|
interactions,
|
|
93
95
|
data,
|
|
@@ -98,6 +100,7 @@ function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen: contr
|
|
|
98
100
|
shouldCaptureFocus,
|
|
99
101
|
initialFocus,
|
|
100
102
|
isPortaled,
|
|
103
|
+
returnFocus,
|
|
101
104
|
]);
|
|
102
105
|
}
|
|
103
106
|
//# sourceMappingURL=use-popover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-popover.js","sourceRoot":"","sources":["../../../src/popover/use-popover.tsx"],"names":[],"mappings":";;
|
|
1
|
+
{"version":3,"file":"use-popover.js","sourceRoot":"","sources":["../../../src/popover/use-popover.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 autoUpdate,\n flip,\n type FloatingFocusManagerProps,\n offset,\n type OffsetOptions,\n type Placement,\n shift,\n useClick,\n useClientPoint,\n useDismiss,\n useFloating,\n useInteractions,\n type UseInteractionsReturn,\n useRole,\n useTransitionStyles,\n} from '@floating-ui/react';\nimport { tokens } from '@neo4j-ndl/base';\nimport { useMemo, useState } from 'react';\n\nexport interface PopoverOptions {\n isInitialOpen?: boolean;\n placement?: Placement;\n isOpen?: boolean;\n onOpenChange?: (open: boolean, event?: Event) => void;\n offsetOption?: OffsetOptions;\n anchorElement?: Element | null;\n anchorPosition?: {\n x: number;\n y: number;\n };\n anchorElementAsPortalAnchor?: boolean;\n shouldCaptureFocus?: boolean;\n initialFocus?: number | React.RefObject<HTMLElement | null>;\n role?:\n | 'tooltip'\n | 'dialog'\n | 'alertdialog'\n | 'menu'\n | 'listbox'\n | 'grid'\n | 'tree';\n closeOnClickOutside?: boolean;\n closeOnReferencePress?: boolean;\n returnFocus?: FloatingFocusManagerProps['returnFocus'];\n strategy?: 'fixed' | 'absolute';\n isPortaled?: boolean;\n}\n\nexport interface UsePopoverReturn\n extends UseInteractionsReturn, ReturnType<typeof useFloating> {\n isOpen: boolean;\n labelId: string | undefined;\n descriptionId: string | undefined;\n transitionStyles: React.CSSProperties;\n setLabelId: (labelId: string | undefined) => void;\n setDescriptionId: (descriptionId: string | undefined) => void;\n anchorElementAsPortalAnchor: boolean | undefined;\n shouldCaptureFocus: boolean | undefined;\n initialFocus: number | React.RefObject<HTMLElement | null> | undefined;\n isPortaled: boolean;\n returnFocus: FloatingFocusManagerProps['returnFocus'];\n}\n\nexport function usePopover({\n isInitialOpen = false,\n placement = 'bottom',\n isOpen: controlledOpen,\n onOpenChange: setControlledOpen,\n offsetOption = 10,\n anchorElement,\n anchorPosition,\n anchorElementAsPortalAnchor,\n shouldCaptureFocus,\n initialFocus,\n role: roleProp,\n closeOnClickOutside,\n closeOnReferencePress,\n returnFocus,\n strategy = 'absolute',\n isPortaled = true,\n}: PopoverOptions = {}): UsePopoverReturn {\n // Internal state for uncontrolled mode (no `isOpen` prop provided).\n const [isOpenUncontrolled, setIsOpenUncontrolled] = useState(isInitialOpen);\n const [labelId, setLabelId] = useState<string | undefined>();\n const [descriptionId, setDescriptionId] = useState<string | undefined>();\n\n // Controlled/uncontrolled pattern: prefer the consumer-provided `isOpen`,\n // falling back to internal state when not provided.\n const isOpen = controlledOpen ?? isOpenUncontrolled;\n\n const data = useFloating({\n elements: {\n reference: anchorElement,\n },\n middleware: [\n offset(offsetOption),\n flip({\n crossAxis: placement.includes('-'),\n fallbackAxisSideDirection: 'end',\n padding: 5,\n }),\n shift(),\n ],\n // Floating UI calls this when interactions (useClick, useDismiss, etc.)\n // trigger an open/close. We always sync internal state so uncontrolled\n // mode works, and notify the consumer callback exactly once if provided.\n onOpenChange: (open, event) => {\n setIsOpenUncontrolled(open);\n setControlledOpen?.(open, event);\n },\n open: isOpen,\n placement: placement,\n strategy,\n whileElementsMounted: autoUpdate,\n });\n const context = data.context;\n\n // Only enable built-in click-to-toggle in uncontrolled mode. In controlled\n // mode the consumer owns the open state and wires up their own trigger.\n const click = useClick(context, {\n enabled: controlledOpen === undefined,\n });\n\n const dismiss = useDismiss(context, {\n outsidePress: closeOnClickOutside,\n referencePress: closeOnReferencePress,\n });\n const role = useRole(context, {\n role: roleProp,\n });\n\n const clientPoint = useClientPoint(context, {\n enabled: anchorPosition !== undefined,\n x: anchorPosition?.x,\n y: anchorPosition?.y,\n });\n\n const interactions = useInteractions([click, dismiss, role, clientPoint]);\n\n const { styles: transitionStyles } = useTransitionStyles(context, {\n duration: Number.parseInt(tokens.motion.duration.quick) ?? 0,\n });\n\n return useMemo(\n () => ({\n isOpen,\n ...interactions,\n ...data,\n transitionStyles,\n labelId,\n descriptionId,\n setLabelId,\n setDescriptionId,\n anchorElementAsPortalAnchor,\n shouldCaptureFocus,\n initialFocus,\n isPortaled,\n returnFocus,\n }),\n [\n isOpen,\n interactions,\n data,\n transitionStyles,\n labelId,\n descriptionId,\n anchorElementAsPortalAnchor,\n shouldCaptureFocus,\n initialFocus,\n isPortaled,\n returnFocus,\n ],\n );\n}\n"]}
|
package/lib/esm/drawer/Drawer.js
CHANGED
|
@@ -96,32 +96,7 @@ const DrawerComponent = function DrawerComponent(_a) {
|
|
|
96
96
|
role: 'dialog',
|
|
97
97
|
});
|
|
98
98
|
const { getFloatingProps } = useInteractions([dismiss, role]);
|
|
99
|
-
|
|
100
|
-
const shouldApplyFloatingPropsOnDrawer = type === 'overlay' && isExpanded && !isPortaled;
|
|
101
|
-
const floatingPropsForDrawer = shouldApplyFloatingPropsOnDrawer
|
|
102
|
-
? getFloatingProps(htmlAttributes !== null && htmlAttributes !== void 0 ? htmlAttributes : {})
|
|
103
|
-
: {};
|
|
104
|
-
const setFloatingRefsFromResizable = useCallback((instance) => {
|
|
105
|
-
var _a;
|
|
106
|
-
if (!shouldApplyFloatingPropsOnDrawer) {
|
|
107
|
-
refs.setFloating(null);
|
|
108
|
-
refs.setReference(null);
|
|
109
|
-
return;
|
|
110
|
-
}
|
|
111
|
-
const floatingElement = (_a = instance === null || instance === void 0 ? void 0 : instance.resizable) !== null && _a !== void 0 ? _a : null;
|
|
112
|
-
refs.setFloating(floatingElement);
|
|
113
|
-
refs.setReference(floatingElement);
|
|
114
|
-
}, [refs, shouldApplyFloatingPropsOnDrawer]);
|
|
115
|
-
const resizableMergedRef = useMergeRefs([
|
|
116
|
-
resizableRef,
|
|
117
|
-
ref,
|
|
118
|
-
setFloatingRefsFromResizable,
|
|
119
|
-
]);
|
|
120
|
-
const componentMergedRef = useMergeRefs([
|
|
121
|
-
shouldApplyFloatingPropsOnDrawer ? refs.setFloating : null,
|
|
122
|
-
shouldApplyFloatingPropsOnDrawer ? refs.setReference : null,
|
|
123
|
-
ref,
|
|
124
|
-
]);
|
|
99
|
+
const resizableMergedRef = useMergeRefs([resizableRef, ref]);
|
|
125
100
|
const handleResizeBy = useCallback((delta) => {
|
|
126
101
|
if (!resizableRef.current) {
|
|
127
102
|
return;
|
|
@@ -184,10 +159,11 @@ const DrawerComponent = function DrawerComponent(_a) {
|
|
|
184
159
|
}
|
|
185
160
|
: {
|
|
186
161
|
left: (_jsx(DrawerResizeHandle, { handleSide: "left", onResizeBy: handleResizeBy, valueMax: parsePixelSize(resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.maxWidth), valueMin: parsePixelSize(resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.minWidth), valueNow: resizeWidth })),
|
|
187
|
-
}, onResize: handleResize, ref: resizableMergedRef }, restProps,
|
|
188
|
-
const regularContent = (_jsxs(Component, Object.assign({ className: classNames(classes), style: style, ref:
|
|
162
|
+
}, onResize: handleResize, ref: resizableMergedRef }, restProps, htmlAttributes, { children: [_jsx(Close, {}), children] })));
|
|
163
|
+
const regularContent = (_jsxs(Component, Object.assign({ className: classNames(classes), style: style, ref: ref }, restProps, htmlAttributes, { children: [_jsx(Close, {}), children] })));
|
|
189
164
|
/** what content to render*/
|
|
190
165
|
const content = isResizeable ? resizableContent : regularContent;
|
|
166
|
+
const floatingRefs = useMergeRefs([refs.setFloating, refs.setReference]);
|
|
191
167
|
/** if the drawer is not expanded, don't render anything */
|
|
192
168
|
if (isExpanded === false) {
|
|
193
169
|
return null;
|
|
@@ -196,12 +172,7 @@ const DrawerComponent = function DrawerComponent(_a) {
|
|
|
196
172
|
if (type === 'modal') {
|
|
197
173
|
return (_jsxs(FloatingPortal, Object.assign({}, portalProps, { children: [_jsx(FloatingOverlay, { className: "ndl-drawer-overlay-root", lockScroll: true }), _jsx(FloatingFocusManager, { context: context, modal: true, returnFocus: true, children: _jsx("div", Object.assign({ ref: refs.setFloating }, getFloatingProps(), { "aria-label": ariaLabel, "aria-modal": "true", children: content })) })] })));
|
|
198
174
|
}
|
|
199
|
-
|
|
200
|
-
if (type === 'overlay') {
|
|
201
|
-
return (_jsx(ConditionalWrap, { shouldWrap: isPortaled, wrap: (wrapChildren) => (_jsx(FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: _jsx(FloatingFocusManager, { context: context, modal: false, returnFocus: true, closeOnFocusOut: closeOnFocusOut, children: content }) }));
|
|
202
|
-
}
|
|
203
|
-
/** regular push behavior */
|
|
204
|
-
return content;
|
|
175
|
+
return (_jsx(ConditionalWrap, { shouldWrap: isPortaled && type === 'overlay', wrap: (wrapChildren) => (_jsx(FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: _jsx(FloatingFocusManager, { disabled: !isExpanded || type === 'push', context: context, modal: false, returnFocus: true, closeOnFocusOut: closeOnFocusOut, children: _jsx(ConditionalWrap, { shouldWrap: type === 'overlay', wrap: (wrapChildren) => (_jsx("div", Object.assign({ ref: floatingRefs }, getFloatingProps(), { "aria-label": ariaLabel, children: wrapChildren }))), children: content }) }) }));
|
|
205
176
|
};
|
|
206
177
|
DrawerComponent.displayName = 'Drawer';
|
|
207
178
|
const DrawerHeader = (_a) => {
|
|
@@ -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 useRef,\n useState,\n} from 'react';\n\nimport {\n type HtmlAttributes,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { XMarkIconOutline } from '../icons';\nimport { Typography } from '../typography';\n\ntype DrawerPosition = 'left' | 'right';\n\ntype DrawerType = 'overlay' | 'push' | 'modal';\n\ntype DrawerProps = {\n /** Controls whether the drawer is open (expanded) or closed (collapsed). */\n isExpanded: boolean;\n\n /** Callback fired when the drawer's expanded state changes (close button, Escape, click outside, or programmatic change). */\n onExpandedChange?: (expanded: boolean) => void;\n\n /** Position where the drawer appears on screen. By default, it appears from the left. */\n position?: DrawerPosition;\n\n /** How the drawer affects the layout of sibling content. By default, it overlays content. */\n type?: DrawerType;\n\n /** Enables horizontal resizing of the drawer, by default it is not resizable. */\n isResizeable?: boolean;\n\n /** To use this prop the isResizeable prop must be set to true. For overriding the third party library props: https://github.com/bokuweb/re-resizable */\n resizeableProps?: ResizableProps;\n\n /** Whether a close button (X) is displayed in the drawer. */\n isCloseable?: boolean;\n\n /** Whether to portal the content. Only applies when type is \"overlay\". Type \"modal\" is always portaled.*/\n isPortaled?: boolean;\n\n // TODO v5: this should maybe be default on portaled in the future\n /**\n * Whether pressing Escape closes the drawer.\n * - When type is \"modal\", this defaults to true.\n * - When type is \"overlay\", this defaults to false.\n * - When type is \"push\", no effect.\n */\n closeOnEscape?: boolean;\n\n // TODO v5: this should maybe be default on overlay in the future\n /**\n * When type is \"overlay\", whether clicking outside the drawer closes it.\n * - When type is \"overlay\" or \"modal\", this defaults to false.\n * - When type is \"push\", no effect.\n */\n closeOnClickOutside?: boolean;\n\n // TODO v5: this should maybe be default on overlay in the future\n /**\n * Whether tabbing focus outside the drawer closes it.\n * - When type is \"overlay\", this defaults to false.\n * - When type is \"push\" or \"modal\", no effect.\n */\n closeOnFocusOut?: boolean;\n\n /** The content to display within the drawer. */\n children: React.ReactNode;\n\n /**\n * Props to pass to the portal from @floating-ui/react FloatingPortal\n * Only applies when type is \"overlay\" and isPortaled is true, or if type is \"modal\".\n * @see https://floating-ui.com/docs/floatingportal\n */\n portalProps?: ComponentProps<typeof FloatingPortal>;\n} & (\n | {\n type: 'modal';\n /** The aria-label to apply to the drawer. Required for accessibility when type is \"modal\" or \"overlay\".*/\n ariaLabel: string;\n }\n | {\n type?: 'push' | 'overlay';\n // TODO v5: aria label should be required when type is \"overlay\" too.\n ariaLabel?: string;\n }\n);\n\nconst KEYBOARD_RESIZE_STEP_PX = 16;\n\nfunction parsePixelSize(\n value: string | number | undefined,\n): number | undefined {\n if (value === undefined) {\n return undefined;\n }\n if (typeof value === 'number') {\n return value;\n }\n const parsed = parseInt(value.replace(/px$/i, ''), 10);\n return Number.isNaN(parsed) ? undefined : parsed;\n}\n\ntype DrawerResizeHandleProps = {\n /** Which edge this handle resizes (right = drawer’s right edge, left = drawer’s left edge). */\n handleSide: 'left' | 'right';\n /** Called with a pixel delta to apply to the drawer width (positive = wider). */\n onResizeBy: (delta: number) => void;\n onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n /** Current width in pixels (for aria-valuenow). */\n valueNow?: number;\n /** Minimum width in pixels (for aria-valuemin). */\n valueMin?: number;\n /** Maximum width in pixels (for aria-valuemax). */\n valueMax?: number;\n};\n\nfunction DrawerResizeHandle({\n handleSide,\n onResizeBy,\n valueMax,\n valueMin,\n valueNow,\n}: DrawerResizeHandleProps) {\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLDivElement>) => {\n const isArrowKey = e.key === 'ArrowLeft' || e.key === 'ArrowRight';\n if (isArrowKey) {\n e.preventDefault();\n const delta =\n handleSide === 'right'\n ? e.key === 'ArrowRight'\n ? KEYBOARD_RESIZE_STEP_PX\n : -KEYBOARD_RESIZE_STEP_PX\n : e.key === 'ArrowLeft'\n ? KEYBOARD_RESIZE_STEP_PX\n : -KEYBOARD_RESIZE_STEP_PX;\n onResizeBy(delta);\n }\n },\n [handleSide, onResizeBy],\n );\n\n return (\n /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Resize handle is focusable for keyboard resize. */\n <div\n aria-label={`Resize drawer with arrow keys. Handle on ${handleSide}.`}\n aria-orientation=\"vertical\"\n aria-valuemax={valueMax}\n aria-valuemin={valueMin}\n aria-valuenow={valueNow ?? 0}\n aria-valuetext={`drawer width ${valueNow ?? 0}px`}\n className=\"ndl-drawer-resize-handle\"\n data-drawer-handle={handleSide}\n onKeyDown={handleKeyDown}\n role=\"separator\"\n style={{ height: '100%', width: '100%' }}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- Resize handle is focusable for keyboard resize.\n tabIndex={0}\n />\n );\n}\n\nconst DrawerComponent = function DrawerComponent<\n T extends React.ElementType = 'div',\n>({\n children,\n className = '',\n isExpanded,\n onExpandedChange,\n position = 'left',\n type = 'overlay',\n isResizeable = false,\n resizeableProps,\n isCloseable = true,\n isPortaled = false,\n portalProps = {},\n closeOnEscape = type === 'modal' ? true : false,\n closeOnClickOutside = false,\n closeOnFocusOut = false,\n ariaLabel,\n htmlAttributes,\n style,\n ref,\n as,\n ...restProps\n}: PolymorphicCommonProps<T, DrawerProps>) {\n const resizableRef = useRef<Resizable | null>(null);\n const [resizeWidth, setResizeWidth] = useState<number>(0);\n\n if ((type === 'modal' || type === 'overlay') && !ariaLabel) {\n needleWarningMessage(\n 'A Drawer should have an aria-label when type is \"modal\" or \"overlay\" to be accessible.',\n );\n }\n\n const { refs, context } = useFloating({\n onOpenChange: onExpandedChange,\n open: isExpanded,\n });\n\n /** Dismiss (escape + click outside) applies to portaled overlay and to non-portaled overlay. */\n const shouldUseDismiss =\n type === 'modal' ||\n (type === 'overlay' && !isPortaled && isExpanded) ||\n (type === 'overlay' && isPortaled);\n\n const dismiss = useDismiss(context, {\n enabled: shouldUseDismiss,\n escapeKey: closeOnEscape,\n outsidePress: closeOnClickOutside,\n });\n const role = useRole(context, {\n enabled: type === 'modal' || type === 'overlay',\n role: 'dialog',\n });\n const { getFloatingProps } = useInteractions([dismiss, role]);\n\n /** When overlay is open and not portaled, drawer gets the floating ref + props; when portaled, the portal layer gets them. */\n const shouldApplyFloatingPropsOnDrawer =\n type === 'overlay' && isExpanded && !isPortaled;\n\n const floatingPropsForDrawer = shouldApplyFloatingPropsOnDrawer\n ? getFloatingProps(htmlAttributes ?? {})\n : {};\n\n const setFloatingRefsFromResizable = useCallback(\n (instance: Resizable | null) => {\n if (!shouldApplyFloatingPropsOnDrawer) {\n refs.setFloating(null);\n refs.setReference(null);\n return;\n }\n\n const floatingElement = instance?.resizable ?? null;\n refs.setFloating(floatingElement);\n refs.setReference(floatingElement);\n },\n [refs, shouldApplyFloatingPropsOnDrawer],\n );\n\n const resizableMergedRef = useMergeRefs([\n resizableRef,\n ref,\n setFloatingRefsFromResizable,\n ]);\n const componentMergedRef = useMergeRefs([\n shouldApplyFloatingPropsOnDrawer ? refs.setFloating : null,\n shouldApplyFloatingPropsOnDrawer ? refs.setReference : null,\n ref,\n ]);\n\n const handleResizeBy = useCallback(\n (delta: number) => {\n if (!resizableRef.current) {\n return;\n }\n const current = resizableRef.current.size;\n const min = parsePixelSize(resizeableProps?.minWidth);\n const max = parsePixelSize(resizeableProps?.maxWidth);\n const newWidth = Math.max(\n min ?? 0,\n Math.min(max ?? Number.POSITIVE_INFINITY, current.width + delta),\n );\n resizableRef.current.updateSize({\n height: '100%',\n width: newWidth,\n });\n setResizeWidth(newWidth);\n },\n [resizeableProps?.minWidth, resizeableProps?.maxWidth],\n );\n\n const handleResize = useCallback(\n (\n event: MouseEvent | TouchEvent,\n direction: Parameters<NonNullable<ResizableProps['onResize']>>[1],\n elementRef: HTMLElement,\n delta: { width: number; height: number },\n ) => {\n setResizeWidth(elementRef.offsetWidth);\n resizeableProps?.onResize?.(event, direction, elementRef, delta);\n },\n [resizeableProps],\n );\n\n useEffect(() => {\n if (!isResizeable || !resizableRef.current) {\n return;\n }\n const width = resizableRef.current.size.width;\n if (width > 0) {\n setResizeWidth(width);\n }\n }, [isResizeable]);\n\n const setOnExpandedChange = useCallback(() => {\n onExpandedChange?.(!isExpanded);\n }, [isExpanded, onExpandedChange]);\n\n const classes = classNames('ndl-drawer', className, {\n 'ndl-drawer-left': position === 'left',\n 'ndl-drawer-modal': type === 'modal',\n 'ndl-drawer-overlay': type === 'overlay',\n 'ndl-drawer-portaled': isPortaled && type === 'overlay',\n 'ndl-drawer-push': type === 'push',\n 'ndl-drawer-right': position === 'right',\n });\n\n const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';\n const Component = as ?? 'div';\n\n const Close = () => (\n <>\n {(isCloseable || type === 'modal') && (\n <CleanIconButton\n className=\"ndl-drawer-close-button\"\n onClick={setOnExpandedChange}\n description={null}\n size=\"medium\"\n htmlAttributes={{\n 'aria-label': 'Close',\n }}\n >\n <XMarkIconOutline />\n </CleanIconButton>\n )}\n </>\n );\n\n const resizableContent = (\n <Resizable\n as={Component}\n defaultSize={{\n height: '100%',\n width: 'auto',\n }}\n {...resizeableProps}\n className={classes}\n style={{\n position: resizableStylePosition,\n ...style,\n ...resizeableProps?.style,\n }}\n boundsByDirection={true}\n bounds=\"parent\"\n handleStyles={{\n /*\n * Small offset so the handle is easier to hit when the drawer content is scrollable.\n */\n ...(position === 'left' && { right: { right: '-8px' } }),\n ...(position === 'right' && { left: { left: '-8px' } }),\n }}\n enable={{\n bottom: false,\n bottomLeft: false,\n bottomRight: false,\n left: position === 'right',\n right: position === 'left',\n top: false,\n topLeft: false,\n topRight: false,\n }}\n handleComponent={\n position === 'left'\n ? {\n right: (\n <DrawerResizeHandle\n handleSide=\"right\"\n onResizeBy={handleResizeBy}\n valueMax={parsePixelSize(resizeableProps?.maxWidth)}\n valueMin={parsePixelSize(resizeableProps?.minWidth)}\n valueNow={resizeWidth}\n />\n ),\n }\n : {\n left: (\n <DrawerResizeHandle\n handleSide=\"left\"\n onResizeBy={handleResizeBy}\n valueMax={parsePixelSize(resizeableProps?.maxWidth)}\n valueMin={parsePixelSize(resizeableProps?.minWidth)}\n valueNow={resizeWidth}\n />\n ),\n }\n }\n onResize={handleResize}\n ref={resizableMergedRef}\n {...restProps}\n {...floatingPropsForDrawer}\n {...htmlAttributes}\n >\n <Close />\n {children}\n </Resizable>\n );\n\n const regularContent = (\n <Component\n className={classNames(classes)}\n style={style}\n ref={componentMergedRef}\n {...restProps}\n {...floatingPropsForDrawer}\n {...htmlAttributes}\n >\n <Close />\n {children}\n </Component>\n );\n\n /** what content to render*/\n const content = isResizeable ? resizableContent : regularContent;\n\n /** if the drawer is not expanded, don't render anything */\n if (isExpanded === false) {\n return null;\n }\n\n /** modal behavior */\n if (type === 'modal') {\n return (\n <FloatingPortal {...portalProps}>\n <FloatingOverlay\n className=\"ndl-drawer-overlay-root\"\n lockScroll={true}\n />\n <FloatingFocusManager context={context} modal={true} returnFocus={true}>\n <div\n ref={refs.setFloating}\n {...getFloatingProps()}\n aria-label={ariaLabel}\n aria-modal=\"true\"\n >\n {content}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n }\n\n /** overlay focus behavior */\n if (type === 'overlay') {\n return (\n <ConditionalWrap\n shouldWrap={isPortaled}\n wrap={(wrapChildren) => (\n <FloatingPortal preserveTabOrder={true} {...portalProps}>\n {wrapChildren}\n </FloatingPortal>\n )}\n >\n <FloatingFocusManager\n context={context}\n modal={false}\n returnFocus={true}\n closeOnFocusOut={closeOnFocusOut}\n >\n {content}\n </FloatingFocusManager>\n </ConditionalWrap>\n );\n }\n\n /** regular push behavior */\n return content;\n};\n\nDrawerComponent.displayName = 'Drawer';\n\ntype DrawerHeaderProps = {\n children: React.ReactNode;\n className?: string;\n // TODO v5: fix the typing on the Drawer subcomponents to use the common props type. Also, this is not an h5 haha. Should be polymorphic I guess, maybe default to h2 as we've recommended.\n htmlAttributes?: HtmlAttributes<'h5'>;\n};\n\nconst DrawerHeader = ({\n children,\n className = '',\n htmlAttributes,\n ...restProps\n}: DrawerHeaderProps) => {\n const classes = classNames('ndl-drawer-header', className);\n\n if (typeof children === 'string' || typeof children === 'number') {\n return (\n <Typography\n className={classes}\n variant=\"title-3\"\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </Typography>\n );\n }\n\n return (\n <div className={classes} {...restProps} {...htmlAttributes}>\n {children}\n </div>\n );\n};\n\ntype DrawerActionsProps = {\n children: React.ReactNode;\n className?: string;\n htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerActions = ({\n children,\n className = '',\n htmlAttributes,\n ...restProps\n}: DrawerActionsProps) => {\n const classes = classNames('ndl-drawer-actions', className);\n\n return (\n <div className={classes} {...restProps} {...htmlAttributes}>\n {children}\n </div>\n );\n};\n\ntype DrawerBodyProps = {\n children: React.ReactNode;\n className?: string;\n htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerBody = ({\n children,\n className = '',\n htmlAttributes,\n ...restProps\n}: DrawerBodyProps) => {\n const classes = classNames('ndl-drawer-body', className);\n\n return (\n <div className=\"ndl-drawer-body-wrapper\">\n <div className={classes} {...restProps} {...htmlAttributes}>\n {children}\n </div>\n </div>\n );\n};\n\nconst Drawer = Object.assign(DrawerComponent, {\n Actions: DrawerActions,\n Body: DrawerBody,\n Header: DrawerHeader,\n});\n\nexport { Drawer };\n"]}
|
|
1
|
+
{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport {\n FloatingFocusManager,\n FloatingOverlay,\n FloatingPortal,\n useDismiss,\n useFloating,\n useInteractions,\n useMergeRefs,\n useRole,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { Resizable, type ResizableProps } from 're-resizable';\nimport type React from 'react';\nimport {\n type ComponentProps,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from 'react';\n\nimport {\n type HtmlAttributes,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { XMarkIconOutline } from '../icons';\nimport { Typography } from '../typography';\n\ntype DrawerPosition = 'left' | 'right';\n\ntype DrawerType = 'overlay' | 'push' | 'modal';\n\ntype DrawerProps = {\n /** Controls whether the drawer is open (expanded) or closed (collapsed). */\n isExpanded: boolean;\n\n /** Callback fired when the drawer's expanded state changes (close button, Escape, click outside, or programmatic change). */\n onExpandedChange?: (expanded: boolean) => void;\n\n /** Position where the drawer appears on screen. By default, it appears from the left. */\n position?: DrawerPosition;\n\n /** How the drawer affects the layout of sibling content. By default, it overlays content. */\n type?: DrawerType;\n\n /** Enables horizontal resizing of the drawer, by default it is not resizable. */\n isResizeable?: boolean;\n\n /** To use this prop the isResizeable prop must be set to true. For overriding the third party library props: https://github.com/bokuweb/re-resizable */\n resizeableProps?: ResizableProps;\n\n /** Whether a close button (X) is displayed in the drawer. */\n isCloseable?: boolean;\n\n /** Whether to portal the content. Only applies when type is \"overlay\". Type \"modal\" is always portaled.*/\n isPortaled?: boolean;\n\n // TODO v5: this should maybe be default on portaled in the future\n /**\n * Whether pressing Escape closes the drawer.\n * - When type is \"modal\", this defaults to true.\n * - When type is \"overlay\", this defaults to false.\n * - When type is \"push\", no effect.\n */\n closeOnEscape?: boolean;\n\n // TODO v5: this should maybe be default on overlay in the future\n /**\n * When type is \"overlay\", whether clicking outside the drawer closes it.\n * - When type is \"overlay\" or \"modal\", this defaults to false.\n * - When type is \"push\", no effect.\n */\n closeOnClickOutside?: boolean;\n\n // TODO v5: this should maybe be default on overlay in the future\n /**\n * Whether tabbing focus outside the drawer closes it.\n * - When type is \"overlay\", this defaults to false.\n * - When type is \"push\" or \"modal\", no effect.\n */\n closeOnFocusOut?: boolean;\n\n /** The content to display within the drawer. */\n children: React.ReactNode;\n\n /**\n * Props to pass to the portal from @floating-ui/react FloatingPortal\n * Only applies when type is \"overlay\" and isPortaled is true, or if type is \"modal\".\n * @see https://floating-ui.com/docs/floatingportal\n */\n portalProps?: ComponentProps<typeof FloatingPortal>;\n} & (\n | {\n type: 'modal';\n /** The aria-label to apply to the drawer. Required for accessibility when type is \"modal\" or \"overlay\".*/\n ariaLabel: string;\n }\n | {\n type?: 'push' | 'overlay';\n // TODO v5: aria label should be required when type is \"overlay\" too.\n ariaLabel?: string;\n }\n);\n\nconst KEYBOARD_RESIZE_STEP_PX = 16;\n\nfunction parsePixelSize(\n value: string | number | undefined,\n): number | undefined {\n if (value === undefined) {\n return undefined;\n }\n if (typeof value === 'number') {\n return value;\n }\n const parsed = parseInt(value.replace(/px$/i, ''), 10);\n return Number.isNaN(parsed) ? undefined : parsed;\n}\n\ntype DrawerResizeHandleProps = {\n /** Which edge this handle resizes (right = drawer’s right edge, left = drawer’s left edge). */\n handleSide: 'left' | 'right';\n /** Called with a pixel delta to apply to the drawer width (positive = wider). */\n onResizeBy: (delta: number) => void;\n onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n /** Current width in pixels (for aria-valuenow). */\n valueNow?: number;\n /** Minimum width in pixels (for aria-valuemin). */\n valueMin?: number;\n /** Maximum width in pixels (for aria-valuemax). */\n valueMax?: number;\n};\n\nfunction DrawerResizeHandle({\n handleSide,\n onResizeBy,\n valueMax,\n valueMin,\n valueNow,\n}: DrawerResizeHandleProps) {\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLDivElement>) => {\n const isArrowKey = e.key === 'ArrowLeft' || e.key === 'ArrowRight';\n if (isArrowKey) {\n e.preventDefault();\n const delta =\n handleSide === 'right'\n ? e.key === 'ArrowRight'\n ? KEYBOARD_RESIZE_STEP_PX\n : -KEYBOARD_RESIZE_STEP_PX\n : e.key === 'ArrowLeft'\n ? KEYBOARD_RESIZE_STEP_PX\n : -KEYBOARD_RESIZE_STEP_PX;\n onResizeBy(delta);\n }\n },\n [handleSide, onResizeBy],\n );\n\n return (\n /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- Resize handle is focusable for keyboard resize. */\n <div\n aria-label={`Resize drawer with arrow keys. Handle on ${handleSide}.`}\n aria-orientation=\"vertical\"\n aria-valuemax={valueMax}\n aria-valuemin={valueMin}\n aria-valuenow={valueNow ?? 0}\n aria-valuetext={`drawer width ${valueNow ?? 0}px`}\n className=\"ndl-drawer-resize-handle\"\n data-drawer-handle={handleSide}\n onKeyDown={handleKeyDown}\n role=\"separator\"\n style={{ height: '100%', width: '100%' }}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- Resize handle is focusable for keyboard resize.\n tabIndex={0}\n />\n );\n}\n\nconst DrawerComponent = function DrawerComponent<\n T extends React.ElementType = 'div',\n>({\n children,\n className = '',\n isExpanded,\n onExpandedChange,\n position = 'left',\n type = 'overlay',\n isResizeable = false,\n resizeableProps,\n isCloseable = true,\n isPortaled = false,\n portalProps = {},\n closeOnEscape = type === 'modal' ? true : false,\n closeOnClickOutside = false,\n closeOnFocusOut = false,\n ariaLabel,\n htmlAttributes,\n style,\n ref,\n as,\n ...restProps\n}: PolymorphicCommonProps<T, DrawerProps>) {\n const resizableRef = useRef<Resizable | null>(null);\n const [resizeWidth, setResizeWidth] = useState<number>(0);\n\n if ((type === 'modal' || type === 'overlay') && !ariaLabel) {\n needleWarningMessage(\n 'A Drawer should have an aria-label when type is \"modal\" or \"overlay\" to be accessible.',\n );\n }\n\n const { refs, context } = useFloating({\n onOpenChange: onExpandedChange,\n open: isExpanded,\n });\n\n /** Dismiss (escape + click outside) applies to portaled overlay and to non-portaled overlay. */\n const shouldUseDismiss =\n type === 'modal' ||\n (type === 'overlay' && !isPortaled && isExpanded) ||\n (type === 'overlay' && isPortaled);\n\n const dismiss = useDismiss(context, {\n enabled: shouldUseDismiss,\n escapeKey: closeOnEscape,\n outsidePress: closeOnClickOutside,\n });\n const role = useRole(context, {\n enabled: type === 'modal' || type === 'overlay',\n role: 'dialog',\n });\n const { getFloatingProps } = useInteractions([dismiss, role]);\n\n const resizableMergedRef = useMergeRefs([resizableRef, ref]);\n\n const handleResizeBy = useCallback(\n (delta: number) => {\n if (!resizableRef.current) {\n return;\n }\n const current = resizableRef.current.size;\n const min = parsePixelSize(resizeableProps?.minWidth);\n const max = parsePixelSize(resizeableProps?.maxWidth);\n const newWidth = Math.max(\n min ?? 0,\n Math.min(max ?? Number.POSITIVE_INFINITY, current.width + delta),\n );\n resizableRef.current.updateSize({\n height: '100%',\n width: newWidth,\n });\n setResizeWidth(newWidth);\n },\n [resizeableProps?.minWidth, resizeableProps?.maxWidth],\n );\n\n const handleResize = useCallback(\n (\n event: MouseEvent | TouchEvent,\n direction: Parameters<NonNullable<ResizableProps['onResize']>>[1],\n elementRef: HTMLElement,\n delta: { width: number; height: number },\n ) => {\n setResizeWidth(elementRef.offsetWidth);\n resizeableProps?.onResize?.(event, direction, elementRef, delta);\n },\n [resizeableProps],\n );\n\n useEffect(() => {\n if (!isResizeable || !resizableRef.current) {\n return;\n }\n const width = resizableRef.current.size.width;\n if (width > 0) {\n setResizeWidth(width);\n }\n }, [isResizeable]);\n\n const setOnExpandedChange = useCallback(() => {\n onExpandedChange?.(!isExpanded);\n }, [isExpanded, onExpandedChange]);\n\n const classes = classNames('ndl-drawer', className, {\n 'ndl-drawer-left': position === 'left',\n 'ndl-drawer-modal': type === 'modal',\n 'ndl-drawer-overlay': type === 'overlay',\n 'ndl-drawer-portaled': isPortaled && type === 'overlay',\n 'ndl-drawer-push': type === 'push',\n 'ndl-drawer-right': position === 'right',\n });\n\n const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';\n const Component = as ?? 'div';\n\n const Close = () => (\n <>\n {(isCloseable || type === 'modal') && (\n <CleanIconButton\n className=\"ndl-drawer-close-button\"\n onClick={setOnExpandedChange}\n description={null}\n size=\"medium\"\n htmlAttributes={{\n 'aria-label': 'Close',\n }}\n >\n <XMarkIconOutline />\n </CleanIconButton>\n )}\n </>\n );\n\n const resizableContent = (\n <Resizable\n as={Component}\n defaultSize={{\n height: '100%',\n width: 'auto',\n }}\n {...resizeableProps}\n className={classes}\n style={{\n position: resizableStylePosition,\n ...style,\n ...resizeableProps?.style,\n }}\n boundsByDirection={true}\n bounds=\"parent\"\n handleStyles={{\n /*\n * Small offset so the handle is easier to hit when the drawer content is scrollable.\n */\n ...(position === 'left' && { right: { right: '-8px' } }),\n ...(position === 'right' && { left: { left: '-8px' } }),\n }}\n enable={{\n bottom: false,\n bottomLeft: false,\n bottomRight: false,\n left: position === 'right',\n right: position === 'left',\n top: false,\n topLeft: false,\n topRight: false,\n }}\n handleComponent={\n position === 'left'\n ? {\n right: (\n <DrawerResizeHandle\n handleSide=\"right\"\n onResizeBy={handleResizeBy}\n valueMax={parsePixelSize(resizeableProps?.maxWidth)}\n valueMin={parsePixelSize(resizeableProps?.minWidth)}\n valueNow={resizeWidth}\n />\n ),\n }\n : {\n left: (\n <DrawerResizeHandle\n handleSide=\"left\"\n onResizeBy={handleResizeBy}\n valueMax={parsePixelSize(resizeableProps?.maxWidth)}\n valueMin={parsePixelSize(resizeableProps?.minWidth)}\n valueNow={resizeWidth}\n />\n ),\n }\n }\n onResize={handleResize}\n ref={resizableMergedRef}\n {...restProps}\n {...htmlAttributes}\n >\n <Close />\n {children}\n </Resizable>\n );\n\n const regularContent = (\n <Component\n className={classNames(classes)}\n style={style}\n ref={ref}\n {...restProps}\n {...htmlAttributes}\n >\n <Close />\n {children}\n </Component>\n );\n\n /** what content to render*/\n const content = isResizeable ? resizableContent : regularContent;\n\n const floatingRefs = useMergeRefs([refs.setFloating, refs.setReference]);\n\n /** if the drawer is not expanded, don't render anything */\n if (isExpanded === false) {\n return null;\n }\n\n /** modal behavior */\n if (type === 'modal') {\n return (\n <FloatingPortal {...portalProps}>\n <FloatingOverlay\n className=\"ndl-drawer-overlay-root\"\n lockScroll={true}\n />\n <FloatingFocusManager context={context} modal={true} returnFocus={true}>\n <div\n ref={refs.setFloating}\n {...getFloatingProps()}\n aria-label={ariaLabel}\n aria-modal=\"true\"\n >\n {content}\n </div>\n </FloatingFocusManager>\n </FloatingPortal>\n );\n }\n\n return (\n <ConditionalWrap\n shouldWrap={isPortaled && type === 'overlay'}\n wrap={(wrapChildren) => (\n <FloatingPortal preserveTabOrder={true} {...portalProps}>\n {wrapChildren}\n </FloatingPortal>\n )}\n >\n <FloatingFocusManager\n disabled={!isExpanded || type === 'push'}\n context={context}\n modal={false}\n returnFocus={true}\n closeOnFocusOut={closeOnFocusOut}\n >\n <ConditionalWrap\n shouldWrap={type === 'overlay'}\n wrap={(wrapChildren) => (\n <div\n ref={floatingRefs}\n {...getFloatingProps()}\n aria-label={ariaLabel}\n >\n {wrapChildren}\n </div>\n )}\n >\n {content}\n </ConditionalWrap>\n </FloatingFocusManager>\n </ConditionalWrap>\n );\n};\n\nDrawerComponent.displayName = 'Drawer';\n\ntype DrawerHeaderProps = {\n children: React.ReactNode;\n className?: string;\n // TODO v5: fix the typing on the Drawer subcomponents to use the common props type. Also, this is not an h5 haha. Should be polymorphic I guess, maybe default to h2 as we've recommended.\n htmlAttributes?: HtmlAttributes<'h5'>;\n};\n\nconst DrawerHeader = ({\n children,\n className = '',\n htmlAttributes,\n ...restProps\n}: DrawerHeaderProps) => {\n const classes = classNames('ndl-drawer-header', className);\n\n if (typeof children === 'string' || typeof children === 'number') {\n return (\n <Typography\n className={classes}\n variant=\"title-3\"\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </Typography>\n );\n }\n\n return (\n <div className={classes} {...restProps} {...htmlAttributes}>\n {children}\n </div>\n );\n};\n\ntype DrawerActionsProps = {\n children: React.ReactNode;\n className?: string;\n htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerActions = ({\n children,\n className = '',\n htmlAttributes,\n ...restProps\n}: DrawerActionsProps) => {\n const classes = classNames('ndl-drawer-actions', className);\n\n return (\n <div className={classes} {...restProps} {...htmlAttributes}>\n {children}\n </div>\n );\n};\n\ntype DrawerBodyProps = {\n children: React.ReactNode;\n className?: string;\n htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerBody = ({\n children,\n className = '',\n htmlAttributes,\n ...restProps\n}: DrawerBodyProps) => {\n const classes = classNames('ndl-drawer-body', className);\n\n return (\n <div className=\"ndl-drawer-body-wrapper\">\n <div className={classes} {...restProps} {...htmlAttributes}>\n {children}\n </div>\n </div>\n );\n};\n\nconst Drawer = Object.assign(DrawerComponent, {\n Actions: DrawerActions,\n Body: DrawerBody,\n Header: DrawerHeader,\n});\n\nexport { Drawer };\n"]}
|
|
@@ -99,6 +99,24 @@ const PopoverTrigger = (_a) => {
|
|
|
99
99
|
}
|
|
100
100
|
return (_jsx("button", Object.assign({ ref: context.refs.setReference, type: "button", "data-state": context.isOpen ? 'open' : 'closed' }, context.getReferenceProps(props), { children: children })));
|
|
101
101
|
};
|
|
102
|
+
/**
|
|
103
|
+
* Use this to separate the anchor visually from the trigger.
|
|
104
|
+
*/
|
|
105
|
+
const PopoverAnchor = (_a) => {
|
|
106
|
+
var { children, ref } = _a, props = __rest(_a, ["children", "ref"]);
|
|
107
|
+
const context = usePopoverContext();
|
|
108
|
+
// oxlint-disable-next-line @typescript-eslint/no-explicit-any
|
|
109
|
+
const childrenProps = children === null || children === void 0 ? void 0 : children.props;
|
|
110
|
+
const mergedRefs = useMergeRefs([
|
|
111
|
+
context.refs.setPositionReference,
|
|
112
|
+
ref,
|
|
113
|
+
childrenProps === null || childrenProps === void 0 ? void 0 : childrenProps.ref,
|
|
114
|
+
]);
|
|
115
|
+
if (React.isValidElement(children)) {
|
|
116
|
+
return React.cloneElement(children, Object.assign(Object.assign(Object.assign({}, props), childrenProps), { ref: mergedRefs }));
|
|
117
|
+
}
|
|
118
|
+
return (_jsx("div", Object.assign({ ref: mergedRefs }, props, { children: children })));
|
|
119
|
+
};
|
|
102
120
|
const PopoverContent = (_a) => {
|
|
103
121
|
var { as, className, style, children, htmlAttributes, ref } = _a, restProps = __rest(_a, ["as", "className", "style", "children", "htmlAttributes", "ref"]);
|
|
104
122
|
const _b = usePopoverContext(), { context: floatingContext } = _b, context = __rest(_b, ["context"]);
|
|
@@ -121,6 +139,7 @@ const PopoverContent = (_a) => {
|
|
|
121
139
|
}, children: _jsx(FloatingFocusManager, { context: floatingContext, modal: context.shouldCaptureFocus, initialFocus: context.initialFocus, children: _jsx(Component, Object.assign({ className: classes, "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId, style: Object.assign(Object.assign(Object.assign({}, context.floatingStyles), context.transitionStyles), style), ref: refs }, context.getFloatingProps(Object.assign({}, htmlAttributes)), restProps, { children: children })) }) }));
|
|
122
140
|
};
|
|
123
141
|
const Popover = Object.assign(PopoverComponent, {
|
|
142
|
+
Anchor: PopoverAnchor,
|
|
124
143
|
Content: PopoverContent,
|
|
125
144
|
Trigger: PopoverTrigger,
|
|
126
145
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/popover/Popover.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 FloatingPortal,\n type OffsetOptions,\n type Placement,\n useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React from 'react';\n\nimport {\n type CommonProps,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { useNeedleTheme } from '../theme/ThemeProvider';\nimport { usePopover } from './use-popover';\nimport { usePatchFloatingFocusGuards } from './usePatchFloatingFocusGuards';\n\ntype PlacementOptions =\n | 'bottom-end-top-end'\n | 'bottom-start-top-start'\n | 'bottom-middle-top-middle'\n | 'top-end-bottom-end'\n | 'top-start-bottom-start'\n | 'top-middle-bottom-middle'\n | 'bottom-start-bottom-end'\n | 'top-start-top-end'\n | 'middle-start-middle-end'\n | 'bottom-end-bottom-start'\n | 'top-end-top-start'\n | 'middle-end-middle-start';\n\nexport const placementTranslation: Record<PlacementOptions, Placement> = {\n 'bottom-end-bottom-start': 'right-end',\n 'bottom-end-top-end': 'bottom-end',\n 'bottom-middle-top-middle': 'bottom',\n 'bottom-start-bottom-end': 'left-end',\n 'bottom-start-top-start': 'bottom-start',\n 'middle-end-middle-start': 'right',\n 'middle-start-middle-end': 'left',\n 'top-end-bottom-end': 'top-end',\n 'top-end-top-start': 'right-start',\n 'top-middle-bottom-middle': 'top',\n 'top-start-bottom-start': 'top-start',\n 'top-start-top-end': 'left-start',\n};\ntype PopoverProps = {\n /** if the popover is open */\n isOpen?: boolean;\n /** The content of the popover */\n children?: React.ReactNode;\n /** Can be used if the anchor should be separated from the trigger */\n anchorElement?: Element | null;\n /** If the anchorPosition is provided the anchorElement will be ignored */\n anchorPosition?: {\n x: number;\n y: number;\n };\n /** The placement of the floating element is determined by two sets of words. The first set of words specifies the point on the anchor element where the floating element will be attached. The second set of coordinates specifies the point on the floating element that will attach to the anchor element.*/\n placement?: PlacementOptions;\n /** can take either a number, an object or a function. Full documentation here: https://floating-ui.com/docs/offset */\n offset?: OffsetOptions;\n /** Called when an internal state change is triggered, when the floating element either opens or closes. It is not called when `isOpen` is updated by the consumer. */\n onOpenChange?: (isOpen: boolean, event?: Event) => void;\n /** Use anchorEl for portal's container. Should be used if the popover is portaled and is inside a Dialog for example. */\n hasAnchorPortal?: boolean;\n /** If the popover should constrain the focus inside the popover while open */\n shouldCaptureFocus?: boolean;\n /** Which element to initially focus. **/\n initialFocus?: number | React.RefObject<HTMLElement | null>;\n /** The role of the popover */\n role?:\n | 'tooltip'\n | 'dialog'\n | 'alertdialog'\n | 'menu'\n | 'listbox'\n | 'grid'\n | 'tree';\n /** If the popover should close when the user clicks outside of it */\n closeOnClickOutside?: boolean;\n /** The strategy of the popover. Fixed should be used when the popover is inside a Dialog. */\n strategy?: 'fixed' | 'absolute';\n /** Whether the content is rendered in a portal */\n isPortaled?: boolean;\n};\n\ntype ContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<ContextType>(null);\n\nexport const usePopoverContext = () => {\n const context = React.useContext(PopoverContext);\n\n if (context === null) {\n throw new Error('Popover components must be wrapped in <Popover />');\n }\n\n return context;\n};\n\nconst PopoverComponent = ({\n children,\n anchorElement,\n placement,\n isOpen,\n offset,\n anchorPosition,\n hasAnchorPortal: hasAnchorPortalProp,\n shouldCaptureFocus = false,\n initialFocus,\n onOpenChange,\n role,\n closeOnClickOutside = true,\n isPortaled: isPortaledProp,\n strategy: strategyProp,\n}: PopoverProps) => {\n const isInsideDialog = useIsInsideDialog();\n\n const strategy = isInsideDialog ? 'fixed' : 'absolute';\n const hasAnchorPortal = isInsideDialog;\n const isPortaled = !isInsideDialog;\n\n const popover = usePopover({\n anchorElement: anchorElement,\n anchorElementAsPortalAnchor: hasAnchorPortalProp ?? hasAnchorPortal,\n anchorPosition,\n closeOnClickOutside,\n initialFocus,\n isOpen: isOpen,\n isPortaled: isPortaledProp ?? isPortaled,\n offsetOption: offset,\n onOpenChange: onOpenChange,\n placement: placement ? placementTranslation[placement] : undefined,\n role,\n shouldCaptureFocus: shouldCaptureFocus,\n strategy: strategyProp ?? strategy,\n });\n\n return (\n <PopoverContext.Provider value={popover}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\ntype PopoverTriggerProps = {\n /** The content of the trigger */\n children: React.ReactNode;\n /** Whether the trigger should render a button element, or pass its props to the child element */\n hasButtonWrapper?: boolean;\n};\n\nconst PopoverTrigger = ({\n children,\n hasButtonWrapper = false,\n ref,\n ...props\n}: CommonProps<'button', PopoverTriggerProps>) => {\n const context = usePopoverContext();\n // Example from floating UI\n // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n const childrenProps = (children as any).props;\n const mergedRefs = useMergeRefs([\n context.refs.setReference,\n ref,\n childrenProps?.ref,\n ]);\n\n // `hasButtonWrapper` allows the user to pass any element as the anchor\n if (hasButtonWrapper && React.isValidElement(children)) {\n return React.cloneElement(\n children,\n context.getReferenceProps({\n ...props,\n ...childrenProps,\n 'data-state': context.isOpen ? 'open' : 'closed',\n ref: mergedRefs,\n }),\n );\n }\n return (\n <button\n ref={context.refs.setReference}\n type=\"button\"\n data-state={context.isOpen ? 'open' : 'closed'}\n {...context.getReferenceProps(props)}\n >\n {children}\n </button>\n );\n};\n\ntype PopoverContentProps = {\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n};\n\nconst PopoverContent = <T extends React.ElementType = 'div'>({\n as,\n className,\n style,\n children,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, PopoverContentProps>) => {\n const { context: floatingContext, ...context } = usePopoverContext();\n\n const refs = useMergeRefs([context.refs.setFloating, ref]);\n\n const { themeClassName } = useNeedleTheme();\n\n const classes = classNames('ndl-popover', themeClassName, className);\n const Component: React.ElementType = as ?? 'div';\n\n // Patch to not get axe errors for the focus guards\n // To be noted is that axe gives us a false positive error here since the focus guards directly pass focus to other elements\n // https://github.com/floating-ui/floating-ui/issues/2462\n usePatchFloatingFocusGuards();\n\n if (!floatingContext.open) {\n return null;\n }\n\n return (\n <ConditionalWrap\n shouldWrap={context.isPortaled}\n wrap={(wrapChildren) => (\n <FloatingPortal\n root={\n (context.anchorElementAsPortalAnchor ?? false)\n ? (context.refs.reference.current as HTMLElement | null)\n : undefined\n }\n >\n {wrapChildren}\n </FloatingPortal>\n )}\n >\n <FloatingFocusManager\n context={floatingContext}\n modal={context.shouldCaptureFocus}\n initialFocus={context.initialFocus}\n >\n <Component\n className={classes}\n aria-labelledby={context.labelId}\n aria-describedby={context.descriptionId}\n style={{\n ...context.floatingStyles,\n ...context.transitionStyles,\n ...style,\n }}\n ref={refs}\n {...context.getFloatingProps({ ...htmlAttributes })}\n {...restProps}\n >\n {children}\n </Component>\n </FloatingFocusManager>\n </ConditionalWrap>\n );\n};\n\nconst Popover = Object.assign(PopoverComponent, {\n Content: PopoverContent,\n Trigger: PopoverTrigger,\n});\n\nexport { Popover };\n"]}
|
|
1
|
+
{"version":3,"file":"Popover.js","sourceRoot":"","sources":["../../../src/popover/Popover.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 FloatingPortal,\n type OffsetOptions,\n type Placement,\n useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React from 'react';\n\nimport {\n type CommonProps,\n type PolymorphicCommonProps,\n} from '../_common/types';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { useNeedleTheme } from '../theme/ThemeProvider';\nimport { usePopover } from './use-popover';\nimport { usePatchFloatingFocusGuards } from './usePatchFloatingFocusGuards';\n\ntype PlacementOptions =\n | 'bottom-end-top-end'\n | 'bottom-start-top-start'\n | 'bottom-middle-top-middle'\n | 'top-end-bottom-end'\n | 'top-start-bottom-start'\n | 'top-middle-bottom-middle'\n | 'bottom-start-bottom-end'\n | 'top-start-top-end'\n | 'middle-start-middle-end'\n | 'bottom-end-bottom-start'\n | 'top-end-top-start'\n | 'middle-end-middle-start';\n\nexport const placementTranslation: Record<PlacementOptions, Placement> = {\n 'bottom-end-bottom-start': 'right-end',\n 'bottom-end-top-end': 'bottom-end',\n 'bottom-middle-top-middle': 'bottom',\n 'bottom-start-bottom-end': 'left-end',\n 'bottom-start-top-start': 'bottom-start',\n 'middle-end-middle-start': 'right',\n 'middle-start-middle-end': 'left',\n 'top-end-bottom-end': 'top-end',\n 'top-end-top-start': 'right-start',\n 'top-middle-bottom-middle': 'top',\n 'top-start-bottom-start': 'top-start',\n 'top-start-top-end': 'left-start',\n};\ntype PopoverProps = {\n /** if the popover is open */\n isOpen?: boolean;\n /** The content of the popover */\n children?: React.ReactNode;\n /**\n * Can be used if the anchor should be separated from the trigger.\n * Note: to visually separate the anchor from the trigger, use the Popover.Anchor component instead.\n */\n anchorElement?: Element | null;\n /** If the anchorPosition is provided the anchorElement will be ignored */\n anchorPosition?: {\n x: number;\n y: number;\n };\n /** The placement of the floating element is determined by two sets of words. The first set of words specifies the point on the anchor element where the floating element will be attached. The second set of coordinates specifies the point on the floating element that will attach to the anchor element.*/\n placement?: PlacementOptions;\n /** can take either a number, an object or a function. Full documentation here: https://floating-ui.com/docs/offset */\n offset?: OffsetOptions;\n /** Called when an internal state change is triggered, when the floating element either opens or closes. It is not called when `isOpen` is updated by the consumer. */\n onOpenChange?: (isOpen: boolean, event?: Event) => void;\n /** Use anchorEl for portal's container. Should be used if the popover is portaled and is inside a Dialog for example. */\n hasAnchorPortal?: boolean;\n /** If the popover should constrain the focus inside the popover while open */\n shouldCaptureFocus?: boolean;\n /** Which element to initially focus. **/\n initialFocus?: number | React.RefObject<HTMLElement | null>;\n /** The role of the popover */\n role?:\n | 'tooltip'\n | 'dialog'\n | 'alertdialog'\n | 'menu'\n | 'listbox'\n | 'grid'\n | 'tree';\n /** If the popover should close when the user clicks outside of it */\n closeOnClickOutside?: boolean;\n /** The strategy of the popover. Fixed should be used when the popover is inside a Dialog. */\n strategy?: 'fixed' | 'absolute';\n /** Whether the content is rendered in a portal */\n isPortaled?: boolean;\n};\n\ntype ContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<ContextType>(null);\n\nexport const usePopoverContext = () => {\n const context = React.useContext(PopoverContext);\n\n if (context === null) {\n throw new Error('Popover components must be wrapped in <Popover />');\n }\n\n return context;\n};\n\nconst PopoverComponent = ({\n children,\n anchorElement,\n placement,\n isOpen,\n offset,\n anchorPosition,\n hasAnchorPortal: hasAnchorPortalProp,\n shouldCaptureFocus = false,\n initialFocus,\n onOpenChange,\n role,\n closeOnClickOutside = true,\n isPortaled: isPortaledProp,\n strategy: strategyProp,\n}: PopoverProps) => {\n const isInsideDialog = useIsInsideDialog();\n\n const strategy = isInsideDialog ? 'fixed' : 'absolute';\n const hasAnchorPortal = isInsideDialog;\n const isPortaled = !isInsideDialog;\n\n const popover = usePopover({\n anchorElement: anchorElement,\n anchorElementAsPortalAnchor: hasAnchorPortalProp ?? hasAnchorPortal,\n anchorPosition,\n closeOnClickOutside,\n initialFocus,\n isOpen: isOpen,\n isPortaled: isPortaledProp ?? isPortaled,\n offsetOption: offset,\n onOpenChange: onOpenChange,\n placement: placement ? placementTranslation[placement] : undefined,\n role,\n shouldCaptureFocus: shouldCaptureFocus,\n strategy: strategyProp ?? strategy,\n });\n\n return (\n <PopoverContext.Provider value={popover}>\n {children}\n </PopoverContext.Provider>\n );\n};\n\ntype PopoverTriggerProps = {\n /** The content of the trigger */\n children: React.ReactNode;\n /** Whether the trigger should render a button element, or pass its props to the child element */\n hasButtonWrapper?: boolean;\n};\n\nconst PopoverTrigger = ({\n children,\n hasButtonWrapper = false,\n ref,\n ...props\n}: CommonProps<'button', PopoverTriggerProps>) => {\n const context = usePopoverContext();\n // Example from floating UI\n // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n const childrenProps = (children as any).props;\n const mergedRefs = useMergeRefs([\n context.refs.setReference,\n ref,\n childrenProps?.ref,\n ]);\n\n // `hasButtonWrapper` allows the user to pass any element as the anchor\n if (hasButtonWrapper && React.isValidElement(children)) {\n return React.cloneElement(\n children,\n context.getReferenceProps({\n ...props,\n ...childrenProps,\n 'data-state': context.isOpen ? 'open' : 'closed',\n ref: mergedRefs,\n }),\n );\n }\n return (\n <button\n ref={context.refs.setReference}\n type=\"button\"\n data-state={context.isOpen ? 'open' : 'closed'}\n {...context.getReferenceProps(props)}\n >\n {children}\n </button>\n );\n};\n\ntype PopoverAnchorProps = {\n children?: React.ReactNode;\n};\n\n/**\n * Use this to separate the anchor visually from the trigger.\n */\nconst PopoverAnchor = ({\n children,\n ref,\n ...props\n}: CommonProps<'div', PopoverAnchorProps>) => {\n const context = usePopoverContext();\n\n // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n const childrenProps = (children as any)?.props;\n const mergedRefs = useMergeRefs([\n context.refs.setPositionReference,\n ref,\n childrenProps?.ref,\n ]);\n\n if (React.isValidElement(children)) {\n return React.cloneElement(children, {\n ...props,\n ...childrenProps,\n ref: mergedRefs,\n });\n }\n\n return (\n <div ref={mergedRefs} {...props}>\n {children}\n </div>\n );\n};\n\ntype PopoverContentProps = {\n children: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n};\n\nconst PopoverContent = <T extends React.ElementType = 'div'>({\n as,\n className,\n style,\n children,\n htmlAttributes,\n ref,\n ...restProps\n}: PolymorphicCommonProps<T, PopoverContentProps>) => {\n const { context: floatingContext, ...context } = usePopoverContext();\n\n const refs = useMergeRefs([context.refs.setFloating, ref]);\n\n const { themeClassName } = useNeedleTheme();\n\n const classes = classNames('ndl-popover', themeClassName, className);\n const Component: React.ElementType = as ?? 'div';\n\n // Patch to not get axe errors for the focus guards\n // To be noted is that axe gives us a false positive error here since the focus guards directly pass focus to other elements\n // https://github.com/floating-ui/floating-ui/issues/2462\n usePatchFloatingFocusGuards();\n\n if (!floatingContext.open) {\n return null;\n }\n\n return (\n <ConditionalWrap\n shouldWrap={context.isPortaled}\n wrap={(wrapChildren) => (\n <FloatingPortal\n root={\n (context.anchorElementAsPortalAnchor ?? false)\n ? (context.refs.reference.current as HTMLElement | null)\n : undefined\n }\n >\n {wrapChildren}\n </FloatingPortal>\n )}\n >\n <FloatingFocusManager\n context={floatingContext}\n modal={context.shouldCaptureFocus}\n initialFocus={context.initialFocus}\n >\n <Component\n className={classes}\n aria-labelledby={context.labelId}\n aria-describedby={context.descriptionId}\n style={{\n ...context.floatingStyles,\n ...context.transitionStyles,\n ...style,\n }}\n ref={refs}\n {...context.getFloatingProps({ ...htmlAttributes })}\n {...restProps}\n >\n {children}\n </Component>\n </FloatingFocusManager>\n </ConditionalWrap>\n );\n};\n\nconst Popover = Object.assign(PopoverComponent, {\n Anchor: PopoverAnchor,\n Content: PopoverContent,\n Trigger: PopoverTrigger,\n});\n\nexport { Popover };\n"]}
|
|
@@ -21,11 +21,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
21
21
|
*/
|
|
22
22
|
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
|
|
23
23
|
import { FilledButton, Popover } from '@neo4j-ndl/react';
|
|
24
|
-
import {
|
|
24
|
+
import { useState } from 'react';
|
|
25
25
|
const Component = () => {
|
|
26
|
-
const anchorRef = useRef(null);
|
|
27
26
|
const [isOpen, setIsOpen] = useState(false);
|
|
28
|
-
return (
|
|
27
|
+
return (_jsx("div", { className: "n-flex n-justify-between n-w-full", children: _jsxs(Popover, { isOpen: isOpen, onOpenChange: (open) => setIsOpen(open), children: [_jsx(Popover.Anchor, { children: _jsx("div", { children: "Anchor Element" }) }), _jsx(Popover.Trigger, { hasButtonWrapper: true, children: _jsx(FilledButton, { onClick: () => setIsOpen(true), children: "Click to open popover" }) }), _jsx(Popover.Content, { className: "n-p-token-16", children: "Popover content" })] }) }));
|
|
29
28
|
};
|
|
30
29
|
export default Component;
|
|
31
30
|
//# sourceMappingURL=popover-separate-anchor.story.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover-separate-anchor.story.js","sourceRoot":"","sources":["../../../../src/popover/stories/popover-separate-anchor.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"popover-separate-anchor.story.js","sourceRoot":"","sources":["../../../../src/popover/stories/popover-separate-anchor.story.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,OAAO,CACL,cAAK,SAAS,EAAC,mCAAmC,YAChD,MAAC,OAAO,IAAC,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,aAC9D,KAAC,OAAO,CAAC,MAAM,cACb,2CAAyB,GACV,EACjB,KAAC,OAAO,CAAC,OAAO,IAAC,gBAAgB,kBAC/B,KAAC,YAAY,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,sCAE7B,GACC,EAClB,KAAC,OAAO,CAAC,OAAO,IAAC,SAAS,EAAC,cAAc,gCAEvB,IACV,GACN,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { FilledButton, Popover } from '@neo4j-ndl/react';\nimport { useState } from 'react';\n\nconst Component = () => {\n const [isOpen, setIsOpen] = useState(false);\n return (\n <div className=\"n-flex n-justify-between n-w-full\">\n <Popover isOpen={isOpen} onOpenChange={(open) => setIsOpen(open)}>\n <Popover.Anchor>\n <div>Anchor Element</div>\n </Popover.Anchor>\n <Popover.Trigger hasButtonWrapper>\n <FilledButton onClick={() => setIsOpen(true)}>\n Click to open popover\n </FilledButton>\n </Popover.Trigger>\n <Popover.Content className=\"n-p-token-16\">\n Popover content\n </Popover.Content>\n </Popover>\n </div>\n );\n};\n\nexport default Component;\n"]}
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
import { autoUpdate, flip, offset, shift, useClick, useClientPoint, useDismiss, useFloating, useInteractions, useRole, useTransitionStyles, } from '@floating-ui/react';
|
|
22
22
|
import { tokens } from '@neo4j-ndl/base';
|
|
23
23
|
import { useMemo, useState } from 'react';
|
|
24
|
-
export function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen: controlledOpen, onOpenChange: setControlledOpen, offsetOption = 10, anchorElement, anchorPosition, anchorElementAsPortalAnchor, shouldCaptureFocus, initialFocus, role: roleProp, closeOnClickOutside, strategy = 'absolute', isPortaled = true, } = {}) {
|
|
24
|
+
export function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen: controlledOpen, onOpenChange: setControlledOpen, offsetOption = 10, anchorElement, anchorPosition, anchorElementAsPortalAnchor, shouldCaptureFocus, initialFocus, role: roleProp, closeOnClickOutside, closeOnReferencePress, returnFocus, strategy = 'absolute', isPortaled = true, } = {}) {
|
|
25
25
|
var _a;
|
|
26
26
|
// Internal state for uncontrolled mode (no `isOpen` prop provided).
|
|
27
27
|
const [isOpenUncontrolled, setIsOpenUncontrolled] = useState(isInitialOpen);
|
|
@@ -63,6 +63,7 @@ export function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen
|
|
|
63
63
|
});
|
|
64
64
|
const dismiss = useDismiss(context, {
|
|
65
65
|
outsidePress: closeOnClickOutside,
|
|
66
|
+
referencePress: closeOnReferencePress,
|
|
66
67
|
});
|
|
67
68
|
const role = useRole(context, {
|
|
68
69
|
role: roleProp,
|
|
@@ -84,7 +85,8 @@ export function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen
|
|
|
84
85
|
anchorElementAsPortalAnchor,
|
|
85
86
|
shouldCaptureFocus,
|
|
86
87
|
initialFocus,
|
|
87
|
-
isPortaled
|
|
88
|
+
isPortaled,
|
|
89
|
+
returnFocus })), [
|
|
88
90
|
isOpen,
|
|
89
91
|
interactions,
|
|
90
92
|
data,
|
|
@@ -95,6 +97,7 @@ export function usePopover({ isInitialOpen = false, placement = 'bottom', isOpen
|
|
|
95
97
|
shouldCaptureFocus,
|
|
96
98
|
initialFocus,
|
|
97
99
|
isPortaled,
|
|
100
|
+
returnFocus,
|
|
98
101
|
]);
|
|
99
102
|
}
|
|
100
103
|
//# sourceMappingURL=use-popover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-popover.js","sourceRoot":"","sources":["../../../src/popover/use-popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EACL,UAAU,EACV,IAAI,
|
|
1
|
+
{"version":3,"file":"use-popover.js","sourceRoot":"","sources":["../../../src/popover/use-popover.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 autoUpdate,\n flip,\n type FloatingFocusManagerProps,\n offset,\n type OffsetOptions,\n type Placement,\n shift,\n useClick,\n useClientPoint,\n useDismiss,\n useFloating,\n useInteractions,\n type UseInteractionsReturn,\n useRole,\n useTransitionStyles,\n} from '@floating-ui/react';\nimport { tokens } from '@neo4j-ndl/base';\nimport { useMemo, useState } from 'react';\n\nexport interface PopoverOptions {\n isInitialOpen?: boolean;\n placement?: Placement;\n isOpen?: boolean;\n onOpenChange?: (open: boolean, event?: Event) => void;\n offsetOption?: OffsetOptions;\n anchorElement?: Element | null;\n anchorPosition?: {\n x: number;\n y: number;\n };\n anchorElementAsPortalAnchor?: boolean;\n shouldCaptureFocus?: boolean;\n initialFocus?: number | React.RefObject<HTMLElement | null>;\n role?:\n | 'tooltip'\n | 'dialog'\n | 'alertdialog'\n | 'menu'\n | 'listbox'\n | 'grid'\n | 'tree';\n closeOnClickOutside?: boolean;\n closeOnReferencePress?: boolean;\n returnFocus?: FloatingFocusManagerProps['returnFocus'];\n strategy?: 'fixed' | 'absolute';\n isPortaled?: boolean;\n}\n\nexport interface UsePopoverReturn\n extends UseInteractionsReturn, ReturnType<typeof useFloating> {\n isOpen: boolean;\n labelId: string | undefined;\n descriptionId: string | undefined;\n transitionStyles: React.CSSProperties;\n setLabelId: (labelId: string | undefined) => void;\n setDescriptionId: (descriptionId: string | undefined) => void;\n anchorElementAsPortalAnchor: boolean | undefined;\n shouldCaptureFocus: boolean | undefined;\n initialFocus: number | React.RefObject<HTMLElement | null> | undefined;\n isPortaled: boolean;\n returnFocus: FloatingFocusManagerProps['returnFocus'];\n}\n\nexport function usePopover({\n isInitialOpen = false,\n placement = 'bottom',\n isOpen: controlledOpen,\n onOpenChange: setControlledOpen,\n offsetOption = 10,\n anchorElement,\n anchorPosition,\n anchorElementAsPortalAnchor,\n shouldCaptureFocus,\n initialFocus,\n role: roleProp,\n closeOnClickOutside,\n closeOnReferencePress,\n returnFocus,\n strategy = 'absolute',\n isPortaled = true,\n}: PopoverOptions = {}): UsePopoverReturn {\n // Internal state for uncontrolled mode (no `isOpen` prop provided).\n const [isOpenUncontrolled, setIsOpenUncontrolled] = useState(isInitialOpen);\n const [labelId, setLabelId] = useState<string | undefined>();\n const [descriptionId, setDescriptionId] = useState<string | undefined>();\n\n // Controlled/uncontrolled pattern: prefer the consumer-provided `isOpen`,\n // falling back to internal state when not provided.\n const isOpen = controlledOpen ?? isOpenUncontrolled;\n\n const data = useFloating({\n elements: {\n reference: anchorElement,\n },\n middleware: [\n offset(offsetOption),\n flip({\n crossAxis: placement.includes('-'),\n fallbackAxisSideDirection: 'end',\n padding: 5,\n }),\n shift(),\n ],\n // Floating UI calls this when interactions (useClick, useDismiss, etc.)\n // trigger an open/close. We always sync internal state so uncontrolled\n // mode works, and notify the consumer callback exactly once if provided.\n onOpenChange: (open, event) => {\n setIsOpenUncontrolled(open);\n setControlledOpen?.(open, event);\n },\n open: isOpen,\n placement: placement,\n strategy,\n whileElementsMounted: autoUpdate,\n });\n const context = data.context;\n\n // Only enable built-in click-to-toggle in uncontrolled mode. In controlled\n // mode the consumer owns the open state and wires up their own trigger.\n const click = useClick(context, {\n enabled: controlledOpen === undefined,\n });\n\n const dismiss = useDismiss(context, {\n outsidePress: closeOnClickOutside,\n referencePress: closeOnReferencePress,\n });\n const role = useRole(context, {\n role: roleProp,\n });\n\n const clientPoint = useClientPoint(context, {\n enabled: anchorPosition !== undefined,\n x: anchorPosition?.x,\n y: anchorPosition?.y,\n });\n\n const interactions = useInteractions([click, dismiss, role, clientPoint]);\n\n const { styles: transitionStyles } = useTransitionStyles(context, {\n duration: Number.parseInt(tokens.motion.duration.quick) ?? 0,\n });\n\n return useMemo(\n () => ({\n isOpen,\n ...interactions,\n ...data,\n transitionStyles,\n labelId,\n descriptionId,\n setLabelId,\n setDescriptionId,\n anchorElementAsPortalAnchor,\n shouldCaptureFocus,\n initialFocus,\n isPortaled,\n returnFocus,\n }),\n [\n isOpen,\n interactions,\n data,\n transitionStyles,\n labelId,\n descriptionId,\n anchorElementAsPortalAnchor,\n shouldCaptureFocus,\n initialFocus,\n isPortaled,\n returnFocus,\n ],\n );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAGL,cAAc,EAMf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAO1B,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvC,KAAK,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,KAAK,WAAW,GAAG;IACjB,4EAA4E;IAC5E,UAAU,EAAE,OAAO,CAAC;IAEpB,6HAA6H;IAC7H,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C,yFAAyF;IACzF,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,6FAA6F;IAC7F,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,iFAAiF;IACjF,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,wJAAwJ;IACxJ,eAAe,CAAC,EAAE,cAAc,CAAC;IAEjC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,0GAA0G;IAC1G,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAGxB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAG9B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,gDAAgD;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;CACrD,GAAG,CACA;IACE,IAAI,EAAE,OAAO,CAAC;IACd,0GAA0G;IAC1G,SAAS,EAAE,MAAM,CAAC;CACnB,GACD;IACE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CACJ,CAAC;
|
|
1
|
+
{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAGL,cAAc,EAMf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,cAAc,EAKpB,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAO1B,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvC,KAAK,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAE/C,KAAK,WAAW,GAAG;IACjB,4EAA4E;IAC5E,UAAU,EAAE,OAAO,CAAC;IAEpB,6HAA6H;IAC7H,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C,yFAAyF;IACzF,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,6FAA6F;IAC7F,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,iFAAiF;IACjF,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,wJAAwJ;IACxJ,eAAe,CAAC,EAAE,cAAc,CAAC;IAEjC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,0GAA0G;IAC1G,UAAU,CAAC,EAAE,OAAO,CAAC;IAGrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAGxB;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAG9B;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,gDAAgD;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;OAIG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;CACrD,GAAG,CACA;IACE,IAAI,EAAE,OAAO,CAAC;IACd,0GAA0G;IAC1G,SAAS,EAAE,MAAM,CAAC;CACnB,GACD;IACE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CACJ,CAAC;AA0WF,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,cAAc,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;CACvC,CAAC;AA8BF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAiBF,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAmBF,QAAA,MAAM,MAAM;KA3WV,CAAC,SAAS,KAAK,CAAC,WAAW,oQAsB1B,sBAAsB,CAAC,CAAC,EAAE,WAAW,CAAC;;;qEAoTtC,kBAAkB;kEAqBlB,eAAe;oEAvDf,iBAAiB;CAuElB,CAAC;AAEH,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
|
@@ -28,7 +28,10 @@ type PopoverProps = {
|
|
|
28
28
|
isOpen?: boolean;
|
|
29
29
|
/** The content of the popover */
|
|
30
30
|
children?: React.ReactNode;
|
|
31
|
-
/**
|
|
31
|
+
/**
|
|
32
|
+
* Can be used if the anchor should be separated from the trigger.
|
|
33
|
+
* Note: to visually separate the anchor from the trigger, use the Popover.Anchor component instead.
|
|
34
|
+
*/
|
|
32
35
|
anchorElement?: Element | null;
|
|
33
36
|
/** If the anchorPosition is provided the anchorElement will be ignored */
|
|
34
37
|
anchorPosition?: {
|
|
@@ -63,12 +66,16 @@ type PopoverTriggerProps = {
|
|
|
63
66
|
/** Whether the trigger should render a button element, or pass its props to the child element */
|
|
64
67
|
hasButtonWrapper?: boolean;
|
|
65
68
|
};
|
|
69
|
+
type PopoverAnchorProps = {
|
|
70
|
+
children?: React.ReactNode;
|
|
71
|
+
};
|
|
66
72
|
type PopoverContentProps = {
|
|
67
73
|
children: React.ReactNode;
|
|
68
74
|
className?: string;
|
|
69
75
|
style?: React.CSSProperties;
|
|
70
76
|
};
|
|
71
77
|
declare const Popover: (({ children, anchorElement, placement, isOpen, offset, anchorPosition, hasAnchorPortal: hasAnchorPortalProp, shouldCaptureFocus, initialFocus, onOpenChange, role, closeOnClickOutside, isPortaled: isPortaledProp, strategy: strategyProp, }: PopoverProps) => import("react/jsx-runtime").JSX.Element) & {
|
|
78
|
+
Anchor: ({ children, ref, ...props }: CommonProps<"div", PopoverAnchorProps>) => import("react/jsx-runtime").JSX.Element;
|
|
72
79
|
Content: <T extends React.ElementType = "div">({ as, className, style, children, htmlAttributes, ref, ...restProps }: PolymorphicCommonProps<T, PopoverContentProps>) => import("react/jsx-runtime").JSX.Element | null;
|
|
73
80
|
Trigger: ({ children, hasButtonWrapper, ref, ...props }: CommonProps<"button", PopoverTriggerProps>) => import("react/jsx-runtime").JSX.Element;
|
|
74
81
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/popover/Popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,SAAS,EAEf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAO1B,KAAK,gBAAgB,GACjB,oBAAoB,GACpB,wBAAwB,GACxB,0BAA0B,GAC1B,oBAAoB,GACpB,wBAAwB,GACxB,0BAA0B,GAC1B,yBAAyB,GACzB,mBAAmB,GACnB,yBAAyB,GACzB,yBAAyB,GACzB,mBAAmB,GACnB,yBAAyB,CAAC;AAE9B,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAapE,CAAC;AACF,KAAK,YAAY,GAAG;IAClB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B
|
|
1
|
+
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../src/popover/Popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAGL,KAAK,aAAa,EAClB,KAAK,SAAS,EAEf,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAO1B,KAAK,gBAAgB,GACjB,oBAAoB,GACpB,wBAAwB,GACxB,0BAA0B,GAC1B,oBAAoB,GACpB,wBAAwB,GACxB,0BAA0B,GAC1B,yBAAyB,GACzB,mBAAmB,GACnB,yBAAyB,GACzB,yBAAyB,GACzB,mBAAmB,GACnB,yBAAyB,CAAC;AAE9B,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAapE,CAAC;AACF,KAAK,YAAY,GAAG;IAClB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,0EAA0E;IAC1E,cAAc,CAAC,EAAE;QACf,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,+SAA+S;IAC/S,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,yHAAyH;IACzH,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,sKAAsK;IACtK,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACxD,yHAAyH;IACzH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,8EAA8E;IAC9E,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC5D,8BAA8B;IAC9B,IAAI,CAAC,EACD,SAAS,GACT,QAAQ,GACR,aAAa,GACb,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,CAAC;IACX,qEAAqE;IACrE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChC,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAMF,eAAO,MAAM,iBAAiB,gDAQ7B,CAAC;AA+CF,KAAK,mBAAmB,GAAG;IACzB,iCAAiC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,iGAAiG;IACjG,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AA0CF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAmCF,KAAK,mBAAmB,GAAG;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAqEF,QAAA,MAAM,OAAO,kPA3LV,YAAY;0CAwFZ,WAAW,CAAC,KAAK,EAAE,kBAAkB,CAAC;cAgCjB,CAAC,SAAS,KAAK,CAAC,WAAW,iFAQhD,sBAAsB,CAAC,CAAC,EAAE,mBAAmB,CAAC;6DAtF9C,WAAW,CAAC,QAAQ,EAAE,mBAAmB,CAAC;CAqJ3C,CAAC;AAEH,OAAO,EAAE,OAAO,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover-separate-anchor.story.d.ts","sourceRoot":"","sources":["../../../../src/popover/stories/popover-separate-anchor.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAKjD,QAAA,MAAM,SAAS,+
|
|
1
|
+
{"version":3,"file":"popover-separate-anchor.story.d.ts","sourceRoot":"","sources":["../../../../src/popover/stories/popover-separate-anchor.story.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,yCAAyC,CAAC;AAKjD,QAAA,MAAM,SAAS,+CAmBd,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
* You should have received a copy of the GNU General Public License
|
|
19
19
|
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
|
20
20
|
*/
|
|
21
|
-
import { type OffsetOptions, type Placement, useFloating, type UseInteractionsReturn } from '@floating-ui/react';
|
|
21
|
+
import { type FloatingFocusManagerProps, type OffsetOptions, type Placement, useFloating, type UseInteractionsReturn } from '@floating-ui/react';
|
|
22
22
|
export interface PopoverOptions {
|
|
23
23
|
isInitialOpen?: boolean;
|
|
24
24
|
placement?: Placement;
|
|
@@ -35,6 +35,8 @@ export interface PopoverOptions {
|
|
|
35
35
|
initialFocus?: number | React.RefObject<HTMLElement | null>;
|
|
36
36
|
role?: 'tooltip' | 'dialog' | 'alertdialog' | 'menu' | 'listbox' | 'grid' | 'tree';
|
|
37
37
|
closeOnClickOutside?: boolean;
|
|
38
|
+
closeOnReferencePress?: boolean;
|
|
39
|
+
returnFocus?: FloatingFocusManagerProps['returnFocus'];
|
|
38
40
|
strategy?: 'fixed' | 'absolute';
|
|
39
41
|
isPortaled?: boolean;
|
|
40
42
|
}
|
|
@@ -49,6 +51,7 @@ export interface UsePopoverReturn extends UseInteractionsReturn, ReturnType<type
|
|
|
49
51
|
shouldCaptureFocus: boolean | undefined;
|
|
50
52
|
initialFocus: number | React.RefObject<HTMLElement | null> | undefined;
|
|
51
53
|
isPortaled: boolean;
|
|
54
|
+
returnFocus: FloatingFocusManagerProps['returnFocus'];
|
|
52
55
|
}
|
|
53
|
-
export declare function usePopover({ isInitialOpen, placement, isOpen: controlledOpen, onOpenChange: setControlledOpen, offsetOption, anchorElement, anchorPosition, anchorElementAsPortalAnchor, shouldCaptureFocus, initialFocus, role: roleProp, closeOnClickOutside, strategy, isPortaled, }?: PopoverOptions): UsePopoverReturn;
|
|
56
|
+
export declare function usePopover({ isInitialOpen, placement, isOpen: controlledOpen, onOpenChange: setControlledOpen, offsetOption, anchorElement, anchorPosition, anchorElementAsPortalAnchor, shouldCaptureFocus, initialFocus, role: roleProp, closeOnClickOutside, closeOnReferencePress, returnFocus, strategy, isPortaled, }?: PopoverOptions): UsePopoverReturn;
|
|
54
57
|
//# sourceMappingURL=use-popover.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-popover.d.ts","sourceRoot":"","sources":["../../../src/popover/use-popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,
|
|
1
|
+
{"version":3,"file":"use-popover.d.ts","sourceRoot":"","sources":["../../../src/popover/use-popover.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAGL,KAAK,yBAAyB,EAE9B,KAAK,aAAa,EAClB,KAAK,SAAS,EAKd,WAAW,EAEX,KAAK,qBAAqB,EAG3B,MAAM,oBAAoB,CAAC;AAI5B,MAAM,WAAW,cAAc;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IACtD,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,cAAc,CAAC,EAAE;QACf,CAAC,EAAE,MAAM,CAAC;QACV,CAAC,EAAE,MAAM,CAAC;KACX,CAAC;IACF,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC5D,IAAI,CAAC,EACD,SAAS,GACT,QAAQ,GACR,aAAa,GACb,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,CAAC;IACX,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,WAAW,CAAC,EAAE,yBAAyB,CAAC,aAAa,CAAC,CAAC;IACvD,QAAQ,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,gBACf,SAAQ,qBAAqB,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC;IAC7D,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,aAAa,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,gBAAgB,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,gBAAgB,EAAE,CAAC,aAAa,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC9D,2BAA2B,EAAE,OAAO,GAAG,SAAS,CAAC;IACjD,kBAAkB,EAAE,OAAO,GAAG,SAAS,CAAC;IACxC,YAAY,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IACvE,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,yBAAyB,CAAC,aAAa,CAAC,CAAC;CACvD;AAED,wBAAgB,UAAU,CAAC,EACzB,aAAqB,EACrB,SAAoB,EACpB,MAAM,EAAE,cAAc,EACtB,YAAY,EAAE,iBAAiB,EAC/B,YAAiB,EACjB,aAAa,EACb,cAAc,EACd,2BAA2B,EAC3B,kBAAkB,EAClB,YAAY,EACZ,IAAI,EAAE,QAAQ,EACd,mBAAmB,EACnB,qBAAqB,EACrB,WAAW,EACX,QAAqB,EACrB,UAAiB,GAClB,GAAE,cAAmB,GAAG,gBAAgB,CA6FxC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neo4j-ndl/react",
|
|
3
|
-
"version": "4.9.
|
|
3
|
+
"version": "4.9.24",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"description": "React implementation of Neo4j Design System",
|
|
6
6
|
"keywords": [
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
"@tanstack/react-table": "8.21.3",
|
|
87
87
|
"react": ">=19.0.0",
|
|
88
88
|
"react-dom": ">=19.0.0",
|
|
89
|
-
"@neo4j-ndl/base": "^4.9.
|
|
89
|
+
"@neo4j-ndl/base": "^4.9.12"
|
|
90
90
|
},
|
|
91
91
|
"dependencies": {
|
|
92
92
|
"@dnd-kit/core": "6.3.1",
|