@cimpress-ui/react 1.25.1 → 1.25.2
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/dist/commonjs/components/popover/popover.d.ts +3 -1
- package/dist/commonjs/components/popover/popover.d.ts.map +1 -1
- package/dist/commonjs/components/popover/popover.js +3 -3
- package/dist/commonjs/components/popover/popover.js.map +1 -1
- package/dist/esm/components/popover/popover.d.ts +3 -1
- package/dist/esm/components/popover/popover.d.ts.map +1 -1
- package/dist/esm/components/popover/popover.js +3 -3
- package/dist/esm/components/popover/popover.js.map +1 -1
- package/package.json +1 -1
|
@@ -19,11 +19,13 @@ export declare function PopoverRoot(props: PopoverRootProps): import("react/jsx-
|
|
|
19
19
|
export declare namespace PopoverRoot {
|
|
20
20
|
var displayName: string;
|
|
21
21
|
}
|
|
22
|
+
interface DialogProps extends CommonProps, AriaLabelingProps {
|
|
23
|
+
}
|
|
22
24
|
export interface PopoverRenderProps {
|
|
23
25
|
/** Closes the popover when called. */
|
|
24
26
|
close: () => void;
|
|
25
27
|
}
|
|
26
|
-
export interface PopoverProps extends
|
|
28
|
+
export interface PopoverProps extends DialogProps, Pick<RACPopoverProps, 'placement'> {
|
|
27
29
|
/** The contents of the popover. A function may be provided to access a function to close the popover. */
|
|
28
30
|
children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);
|
|
29
31
|
/** The title of the popover. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA0C,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/F,OAAO,EAGL,KAAK,YAAY,IAAI,eAAe,EAKrC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,gBAAgB;IAC/B,oIAAoI;IACpI,QAAQ,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAElD;yBAFe,WAAW;;;AAM3B,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,
|
|
1
|
+
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA0C,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/F,OAAO,EAGL,KAAK,YAAY,IAAI,eAAe,EAKrC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,gBAAgB;IAC/B,oIAAoI;IACpI,QAAQ,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAElD;yBAFe,WAAW;;;AAM3B,UAAU,WAAY,SAAQ,WAAW,EAAE,iBAAiB;CAAG;AAE/D,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC;IACnF,yGAAyG;IACzG,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,kBAAkB,KAAK,SAAS,CAAC,CAAC;IACvE,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IACvC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAyGD;;;;GAIG;AACH,QAAA,MAAM,QAAQ,0GAAiC,CAAC;AAEhD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC"}
|
|
@@ -31,9 +31,9 @@ function Popover({ children, title, UNSAFE_className, UNSAFE_style, isOpen, defa
|
|
|
31
31
|
}
|
|
32
32
|
}, [title, ariaLabel, ariaLabelledBy]);
|
|
33
33
|
const popoverRef = (0, react_aria_1.useObjectRef)(ref);
|
|
34
|
-
return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { ref: popoverRef, className: (0, clsx_1.default)('cim-popover', UNSAFE_className), style: UNSAFE_style, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, triggerRef: triggerRef, placement: placement, containerPadding: 16, offset: 5, arrowBoundaryOffset: 4, isNonModal: UNSTABLE_isNonModal, maxHeight: UNSTABLE_maxHeight, "data-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(PopoverInner, { title: title, children: children, popoverRef: popoverRef, isNonModal: UNSTABLE_isNonModal }) }));
|
|
34
|
+
return ((0, jsx_runtime_1.jsx)(react_aria_components_1.Popover, { ref: popoverRef, className: (0, clsx_1.default)('cim-popover', UNSAFE_className), style: UNSAFE_style, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, triggerRef: triggerRef, placement: placement, containerPadding: 16, offset: 5, arrowBoundaryOffset: 4, isNonModal: UNSTABLE_isNonModal, maxHeight: UNSTABLE_maxHeight, "data-cim-style-root": true, children: (0, jsx_runtime_1.jsx)(PopoverInner, { dialogProps: props, title: title, children: children, popoverRef: popoverRef, isNonModal: UNSTABLE_isNonModal }) }));
|
|
35
35
|
}
|
|
36
|
-
function PopoverInner({ title, children, popoverRef, isNonModal }) {
|
|
36
|
+
function PopoverInner({ title, children, popoverRef, isNonModal, dialogProps }) {
|
|
37
37
|
const overlayTriggerState = (0, react_1.useContext)(react_aria_components_1.OverlayTriggerStateContext);
|
|
38
38
|
const renderProps = (0, react_1.useMemo)(() => ({ close: () => overlayTriggerState?.close() }), [overlayTriggerState]);
|
|
39
39
|
// For non-modal popovers, React Aria does not handle outside interaction by default,
|
|
@@ -49,7 +49,7 @@ function PopoverInner({ title, children, popoverRef, isNonModal }) {
|
|
|
49
49
|
},
|
|
50
50
|
isDisabled: !isNonModal,
|
|
51
51
|
});
|
|
52
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.OverlayArrow, { className: "cim-popover-arrow", children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "10", viewBox: "0 0 16 10", children: (0, jsx_runtime_1.jsx)("path", { d: "M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0" }) }) }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Dialog, { className: "cim-popover-body", children: [title && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Heading, { slot: "title", className: (0, clsx_1.default)('cim-popover-title', (0, utils_js_1.textStyle)({ variant: 'title-5' })), children: title })), (0, jsx_runtime_1.jsx)(focusable_container_js_1.FocusableContainer, { className: "cim-popover-content", scrollDirection: "vertical", children: typeof children === 'function' ? children(renderProps) : children })] })] }));
|
|
52
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_aria_components_1.OverlayArrow, { className: "cim-popover-arrow", children: (0, jsx_runtime_1.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "10", viewBox: "0 0 16 10", children: (0, jsx_runtime_1.jsx)("path", { d: "M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0" }) }) }), (0, jsx_runtime_1.jsxs)(react_aria_components_1.Dialog, { ...dialogProps, className: "cim-popover-body", children: [title && ((0, jsx_runtime_1.jsx)(react_aria_components_1.Heading, { slot: "title", className: (0, clsx_1.default)('cim-popover-title', (0, utils_js_1.textStyle)({ variant: 'title-5' })), children: title })), (0, jsx_runtime_1.jsx)(focusable_container_js_1.FocusableContainer, { className: "cim-popover-content", scrollDirection: "vertical", children: typeof children === 'function' ? children(renderProps) : children })] })] }));
|
|
53
53
|
}
|
|
54
54
|
/**
|
|
55
55
|
* Displays an overlay element positioned relative to a trigger.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AAmCb,kCAEC;;AAnCD,gDAAwB;AACxB,iCAA+F;AAC/F,2CAA8D;AAC9D,iEAQ+B;AAC/B,yDAAkD;AAClD,qFAA6E;AAC7E,mGAA4F;AAE5F,qDAAmD;AAanD;;;GAGG;AACH,SAAgB,WAAW,CAAC,KAAuB;IACjD,OAAO,uBAAC,qCAAgB,OAAK,KAAK,GAAI,CAAC;AACzC,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, useMemo, type ForwardedRef, type ReactNode, type RefObject } from 'react';\nimport { useInteractOutside, useObjectRef } from 'react-aria';\nimport {\n DialogTrigger as RACDialogTrigger,\n Popover as RACPopover,\n type PopoverProps as RACPopoverProps,\n OverlayArrow as RACOverlayArrow,\n Heading as RACHeading,\n OverlayTriggerStateContext as RACOverlayTriggerStateContext,\n Dialog as RACDialog,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface PopoverRootProps {\n /** The popover trigger with its associated popover. Provide the trigger as the first child, and the popover as the second child. */\n children: ReactNode;\n /** Whether the popover is open (controlled). */\n isOpen?: boolean;\n /** Whether the popover is open by default (uncontrolled). */\n defaultOpen?: boolean;\n /** Handler that is called when the popover's open state changes. */\n onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Encapsulates a popover trigger and its associated popover.\n * The trigger can be any Cimpress UI button, and the popover will be displayed when the trigger is activated.\n */\nexport function PopoverRoot(props: PopoverRootProps) {\n return <RACDialogTrigger {...props} />;\n}\n\nPopoverRoot.displayName = 'PopoverRoot';\n\ninterface DialogProps extends CommonProps, AriaLabelingProps {}\n\nexport interface PopoverRenderProps {\n /** Closes the popover when called. */\n close: () => void;\n}\n\nexport interface PopoverProps extends DialogProps, Pick<RACPopoverProps, 'placement'> {\n /** The contents of the popover. A function may be provided to access a function to close the popover. */\n children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);\n /** The title of the popover. */\n title?: string;\n /**\n * Whether the popover is open (controlled).\n * If using `PopoverRoot`, this prop has no effect - provide `isOpen` to `PopoverRoot` instead.\n */\n isOpen?: boolean;\n /**\n * Whether the popover is open by default (uncontrolled).\n * If using `PopoverRoot`, this prop has no effect - provide `defaultOpen` to `PopoverRoot` instead.\n */\n defaultOpen?: boolean;\n /**\n * Handler that is called when the popover's open state changes.\n * If using `PopoverRoot`, this prop has no effect - provide `onOpenChange` to `PopoverRoot` instead.\n */\n onOpenChange?: (isOpen: boolean) => void;\n /**\n * The ref for the element which the popover positions itself with respect to.\n * When used within `PopoverRoot`, this is set automatically. Provide `triggerRef` only when `Popover` is used standalone.\n */\n triggerRef?: RefObject<Element | null>;\n /**\n * Allows the popover to be non-modal, meaning it will not block interactions outside the popover.\n * This is non-default behavior and can lead to accessibility and interaction issues. Use only if you have a specific, valid reason.\n */\n UNSTABLE_isNonModal?: boolean;\n /**\n * Limits the maximum height of the popover.\n */\n UNSTABLE_maxHeight?: number;\n}\n\nfunction Popover(\n {\n children,\n title,\n UNSAFE_className,\n UNSAFE_style,\n isOpen,\n defaultOpen,\n onOpenChange,\n placement,\n triggerRef,\n UNSTABLE_isNonModal,\n UNSTABLE_maxHeight,\n ...props\n }: PopoverProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!title && !ariaLabel && !ariaLabelledBy) {\n console.warn('Popover requires one of title / aria-label / aria-labelledby for accessibility');\n }\n }, [title, ariaLabel, ariaLabelledBy]);\n\n const popoverRef = useObjectRef(ref);\n\n return (\n <RACPopover\n ref={popoverRef}\n className={clsx('cim-popover', UNSAFE_className)}\n style={UNSAFE_style}\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n triggerRef={triggerRef}\n placement={placement}\n containerPadding={16}\n offset={5} // 1px border + 4px actual offset\n arrowBoundaryOffset={4} // offset by border radius so that the arrow is never positioned over the rounded corner\n isNonModal={UNSTABLE_isNonModal}\n maxHeight={UNSTABLE_maxHeight}\n data-cim-style-root\n >\n <PopoverInner\n dialogProps={props}\n title={title}\n children={children}\n popoverRef={popoverRef}\n isNonModal={UNSTABLE_isNonModal}\n />\n </RACPopover>\n );\n}\n\ninterface PopoverInnerProps {\n dialogProps: Omit<DialogProps, 'UNSAFE_className' | 'UNSAFE_style'>;\n title?: string;\n children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);\n popoverRef: RefObject<HTMLElement>;\n isNonModal?: boolean;\n}\n\nfunction PopoverInner({ title, children, popoverRef, isNonModal, dialogProps }: PopoverInnerProps) {\n const overlayTriggerState = useContext(RACOverlayTriggerStateContext);\n const renderProps = useMemo(() => ({ close: () => overlayTriggerState?.close() }), [overlayTriggerState]);\n\n // For non-modal popovers, React Aria does not handle outside interaction by default,\n // so we use a custom handler here. Modal popovers already handle this internally.\n useInteractOutside({\n ref: popoverRef,\n onInteractOutside: () => {\n // Delay closing to prevent race conditions: when the trigger is pressed, both the trigger and the interact outside handler fire.\n // Without this delay, the popover may immediately reopen after closing.\n requestAnimationFrame(() => {\n overlayTriggerState?.close();\n });\n },\n isDisabled: !isNonModal,\n });\n\n return (\n <>\n <RACOverlayArrow className=\"cim-popover-arrow\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"10\" viewBox=\"0 0 16 10\">\n <path d=\"M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0\" />\n </svg>\n </RACOverlayArrow>\n\n <RACDialog {...dialogProps} className=\"cim-popover-body\">\n {title && (\n <RACHeading slot=\"title\" className={clsx('cim-popover-title', textStyle({ variant: 'title-5' }))}>\n {title}\n </RACHeading>\n )}\n <FocusableContainer className=\"cim-popover-content\" scrollDirection=\"vertical\">\n {typeof children === 'function' ? children(renderProps) : children}\n </FocusableContainer>\n </RACDialog>\n </>\n );\n}\n\n/**\n * Displays an overlay element positioned relative to a trigger.\n *\n * See [popover usage guidelines](https://ui.cimpress.io/components/popover/).\n */\nconst _Popover = forwardRef(Popover, 'Popover');\n\nexport { _Popover as Popover };\n"]}
|
|
@@ -19,11 +19,13 @@ export declare function PopoverRoot(props: PopoverRootProps): import("react/jsx-
|
|
|
19
19
|
export declare namespace PopoverRoot {
|
|
20
20
|
var displayName: string;
|
|
21
21
|
}
|
|
22
|
+
interface DialogProps extends CommonProps, AriaLabelingProps {
|
|
23
|
+
}
|
|
22
24
|
export interface PopoverRenderProps {
|
|
23
25
|
/** Closes the popover when called. */
|
|
24
26
|
close: () => void;
|
|
25
27
|
}
|
|
26
|
-
export interface PopoverProps extends
|
|
28
|
+
export interface PopoverProps extends DialogProps, Pick<RACPopoverProps, 'placement'> {
|
|
27
29
|
/** The contents of the popover. A function may be provided to access a function to close the popover. */
|
|
28
30
|
children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);
|
|
29
31
|
/** The title of the popover. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA0C,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/F,OAAO,EAGL,KAAK,YAAY,IAAI,eAAe,EAKrC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,gBAAgB;IAC/B,oIAAoI;IACpI,QAAQ,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAElD;yBAFe,WAAW;;;AAM3B,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,
|
|
1
|
+
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA0C,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/F,OAAO,EAGL,KAAK,YAAY,IAAI,eAAe,EAKrC,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAGlE,MAAM,WAAW,gBAAgB;IAC/B,oIAAoI;IACpI,QAAQ,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oEAAoE;IACpE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAElD;yBAFe,WAAW;;;AAM3B,UAAU,WAAY,SAAQ,WAAW,EAAE,iBAAiB;CAAG;AAE/D,MAAM,WAAW,kBAAkB;IACjC,sCAAsC;IACtC,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED,MAAM,WAAW,YAAa,SAAQ,WAAW,EAAE,IAAI,CAAC,eAAe,EAAE,WAAW,CAAC;IACnF,yGAAyG;IACzG,QAAQ,EAAE,SAAS,GAAG,CAAC,CAAC,WAAW,EAAE,kBAAkB,KAAK,SAAS,CAAC,CAAC;IACvE,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;IACvC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAyGD;;;;GAIG;AACH,QAAA,MAAM,QAAQ,0GAAiC,CAAC;AAEhD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC"}
|
|
@@ -24,9 +24,9 @@ function Popover({ children, title, UNSAFE_className, UNSAFE_style, isOpen, defa
|
|
|
24
24
|
}
|
|
25
25
|
}, [title, ariaLabel, ariaLabelledBy]);
|
|
26
26
|
const popoverRef = useObjectRef(ref);
|
|
27
|
-
return (_jsx(RACPopover, { ref: popoverRef, className: clsx('cim-popover', UNSAFE_className), style: UNSAFE_style, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, triggerRef: triggerRef, placement: placement, containerPadding: 16, offset: 5, arrowBoundaryOffset: 4, isNonModal: UNSTABLE_isNonModal, maxHeight: UNSTABLE_maxHeight, "data-cim-style-root": true, children: _jsx(PopoverInner, { title: title, children: children, popoverRef: popoverRef, isNonModal: UNSTABLE_isNonModal }) }));
|
|
27
|
+
return (_jsx(RACPopover, { ref: popoverRef, className: clsx('cim-popover', UNSAFE_className), style: UNSAFE_style, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, triggerRef: triggerRef, placement: placement, containerPadding: 16, offset: 5, arrowBoundaryOffset: 4, isNonModal: UNSTABLE_isNonModal, maxHeight: UNSTABLE_maxHeight, "data-cim-style-root": true, children: _jsx(PopoverInner, { dialogProps: props, title: title, children: children, popoverRef: popoverRef, isNonModal: UNSTABLE_isNonModal }) }));
|
|
28
28
|
}
|
|
29
|
-
function PopoverInner({ title, children, popoverRef, isNonModal }) {
|
|
29
|
+
function PopoverInner({ title, children, popoverRef, isNonModal, dialogProps }) {
|
|
30
30
|
const overlayTriggerState = useContext(RACOverlayTriggerStateContext);
|
|
31
31
|
const renderProps = useMemo(() => ({ close: () => overlayTriggerState?.close() }), [overlayTriggerState]);
|
|
32
32
|
// For non-modal popovers, React Aria does not handle outside interaction by default,
|
|
@@ -42,7 +42,7 @@ function PopoverInner({ title, children, popoverRef, isNonModal }) {
|
|
|
42
42
|
},
|
|
43
43
|
isDisabled: !isNonModal,
|
|
44
44
|
});
|
|
45
|
-
return (_jsxs(_Fragment, { children: [_jsx(RACOverlayArrow, { className: "cim-popover-arrow", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "10", viewBox: "0 0 16 10", children: _jsx("path", { d: "M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0" }) }) }), _jsxs(RACDialog, { className: "cim-popover-body", children: [title && (_jsx(RACHeading, { slot: "title", className: clsx('cim-popover-title', textStyle({ variant: 'title-5' })), children: title })), _jsx(FocusableContainer, { className: "cim-popover-content", scrollDirection: "vertical", children: typeof children === 'function' ? children(renderProps) : children })] })] }));
|
|
45
|
+
return (_jsxs(_Fragment, { children: [_jsx(RACOverlayArrow, { className: "cim-popover-arrow", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "10", viewBox: "0 0 16 10", children: _jsx("path", { d: "M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0" }) }) }), _jsxs(RACDialog, { ...dialogProps, className: "cim-popover-body", children: [title && (_jsx(RACHeading, { slot: "title", className: clsx('cim-popover-title', textStyle({ variant: 'title-5' })), children: title })), _jsx(FocusableContainer, { className: "cim-popover-content", scrollDirection: "vertical", children: typeof children === 'function' ? children(renderProps) : children })] })] }));
|
|
46
46
|
}
|
|
47
47
|
/**
|
|
48
48
|
* Displays an overlay element positioned relative to a trigger.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,UAAU,EAAE,OAAO,EAAqD,MAAM,OAAO,CAAC;AAC/F,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC9D,OAAO,EACL,aAAa,IAAI,gBAAgB,EACjC,OAAO,IAAI,UAAU,EAErB,YAAY,IAAI,eAAe,EAC/B,OAAO,IAAI,UAAU,EACrB,0BAA0B,IAAI,6BAA6B,EAC3D,MAAM,IAAI,SAAS,GACpB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAE,MAAM,uCAAuC,CAAC;AAC7E,OAAO,EAAE,kBAAkB,EAAE,MAAM,wDAAwD,CAAC;AAE5F,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAanD;;;GAGG;AACH,MAAM,UAAU,WAAW,CAAC,KAAuB;IACjD,OAAO,KAAC,gBAAgB,OAAK,KAAK,GAAI,CAAC;AACzC,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AA2CxC,SAAS,OAAO,CACd,EACE,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,YAAY,EACZ,MAAM,EACN,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,mBAAmB,EACnB,kBAAkB,EAClB,GAAG,KAAK,EACK,EACf,GAA8B;IAE9B,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,iBAAiB,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAE7E,oBAAoB,CAAC,GAAG,EAAE;QACxB,IAAI,CAAC,KAAK,IAAI,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5C,OAAO,CAAC,IAAI,CAAC,gFAAgF,CAAC,CAAC;QACjG,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAEvC,MAAM,UAAU,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC;IAErC,OAAO,CACL,KAAC,UAAU,IACT,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAChD,KAAK,EAAE,YAAY,EACnB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,EAAE,EACpB,MAAM,EAAE,CAAC,EACT,mBAAmB,EAAE,CAAC,EACtB,UAAU,EAAE,mBAAmB,EAC/B,SAAS,EAAE,kBAAkB,yCAG7B,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,mBAAmB,GAAI,GAChG,CACd,CAAC;AACJ,CAAC;AASD,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,UAAU,EAAqB;IAClF,MAAM,mBAAmB,GAAG,UAAU,CAAC,6BAA6B,CAAC,CAAC;IACtE,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,mBAAmB,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC;IAE1G,qFAAqF;IACrF,kFAAkF;IAClF,kBAAkB,CAAC;QACjB,GAAG,EAAE,UAAU;QACf,iBAAiB,EAAE,GAAG,EAAE;YACtB,iIAAiI;YACjI,wEAAwE;YACxE,qBAAqB,CAAC,GAAG,EAAE;gBACzB,mBAAmB,EAAE,KAAK,EAAE,CAAC;YAC/B,CAAC,CAAC,CAAC;QACL,CAAC;QACD,UAAU,EAAE,CAAC,UAAU;KACxB,CAAC,CAAC;IAEH,OAAO,CACL,8BACE,KAAC,eAAe,IAAC,SAAS,EAAC,mBAAmB,YAC5C,cAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,YAChF,eAAM,CAAC,EAAC,mEAAmE,GAAG,GAC1E,GACU,EAElB,MAAC,SAAS,IAAC,SAAS,EAAC,kBAAkB,aACpC,KAAK,IAAI,CACR,KAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,CAAC,YAC7F,KAAK,GACK,CACd,EACD,KAAC,kBAAkB,IAAC,SAAS,EAAC,qBAAqB,EAAC,eAAe,EAAC,UAAU,YAC3E,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,GAC/C,IACX,IACX,CACJ,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AAEhD,OAAO,EAAE,QAAQ,IAAI,OAAO,EAAE,CAAC","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, useMemo, type ForwardedRef, type ReactNode, type RefObject } from 'react';\nimport { useInteractOutside, useObjectRef } from 'react-aria';\nimport {\n DialogTrigger as RACDialogTrigger,\n Popover as RACPopover,\n type PopoverProps as RACPopoverProps,\n OverlayArrow as RACOverlayArrow,\n Heading as RACHeading,\n OverlayTriggerStateContext as RACOverlayTriggerStateContext,\n Dialog as RACDialog,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface PopoverRootProps {\n /** The popover trigger with its associated popover. Provide the trigger as the first child, and the popover as the second child. */\n children: ReactNode;\n /** Whether the popover is open (controlled). */\n isOpen?: boolean;\n /** Whether the popover is open by default (uncontrolled). */\n defaultOpen?: boolean;\n /** Handler that is called when the popover's open state changes. */\n onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Encapsulates a popover trigger and its associated popover.\n * The trigger can be any Cimpress UI button, and the popover will be displayed when the trigger is activated.\n */\nexport function PopoverRoot(props: PopoverRootProps) {\n return <RACDialogTrigger {...props} />;\n}\n\nPopoverRoot.displayName = 'PopoverRoot';\n\nexport interface PopoverRenderProps {\n /** Closes the popover when called. */\n close: () => void;\n}\n\nexport interface PopoverProps extends CommonProps, AriaLabelingProps, Pick<RACPopoverProps, 'placement'> {\n /** The contents of the popover. A function may be provided to access a function to close the popover. */\n children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);\n /** The title of the popover. */\n title?: string;\n /**\n * Whether the popover is open (controlled).\n * If using `PopoverRoot`, this prop has no effect - provide `isOpen` to `PopoverRoot` instead.\n */\n isOpen?: boolean;\n /**\n * Whether the popover is open by default (uncontrolled).\n * If using `PopoverRoot`, this prop has no effect - provide `defaultOpen` to `PopoverRoot` instead.\n */\n defaultOpen?: boolean;\n /**\n * Handler that is called when the popover's open state changes.\n * If using `PopoverRoot`, this prop has no effect - provide `onOpenChange` to `PopoverRoot` instead.\n */\n onOpenChange?: (isOpen: boolean) => void;\n /**\n * The ref for the element which the popover positions itself with respect to.\n * When used within `PopoverRoot`, this is set automatically. Provide `triggerRef` only when `Popover` is used standalone.\n */\n triggerRef?: RefObject<Element | null>;\n /**\n * Allows the popover to be non-modal, meaning it will not block interactions outside the popover.\n * This is non-default behavior and can lead to accessibility and interaction issues. Use only if you have a specific, valid reason.\n */\n UNSTABLE_isNonModal?: boolean;\n /**\n * Limits the maximum height of the popover.\n */\n UNSTABLE_maxHeight?: number;\n}\n\nfunction Popover(\n {\n children,\n title,\n UNSAFE_className,\n UNSAFE_style,\n isOpen,\n defaultOpen,\n onOpenChange,\n placement,\n triggerRef,\n UNSTABLE_isNonModal,\n UNSTABLE_maxHeight,\n ...props\n }: PopoverProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!title && !ariaLabel && !ariaLabelledBy) {\n console.warn('Popover requires one of title / aria-label / aria-labelledby for accessibility');\n }\n }, [title, ariaLabel, ariaLabelledBy]);\n\n const popoverRef = useObjectRef(ref);\n\n return (\n <RACPopover\n ref={popoverRef}\n className={clsx('cim-popover', UNSAFE_className)}\n style={UNSAFE_style}\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n triggerRef={triggerRef}\n placement={placement}\n containerPadding={16}\n offset={5} // 1px border + 4px actual offset\n arrowBoundaryOffset={4} // offset by border radius so that the arrow is never positioned over the rounded corner\n isNonModal={UNSTABLE_isNonModal}\n maxHeight={UNSTABLE_maxHeight}\n data-cim-style-root\n >\n <PopoverInner title={title} children={children} popoverRef={popoverRef} isNonModal={UNSTABLE_isNonModal} />\n </RACPopover>\n );\n}\n\ninterface PopoverInnerProps {\n title?: string;\n children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);\n popoverRef: RefObject<HTMLElement>;\n isNonModal?: boolean;\n}\n\nfunction PopoverInner({ title, children, popoverRef, isNonModal }: PopoverInnerProps) {\n const overlayTriggerState = useContext(RACOverlayTriggerStateContext);\n const renderProps = useMemo(() => ({ close: () => overlayTriggerState?.close() }), [overlayTriggerState]);\n\n // For non-modal popovers, React Aria does not handle outside interaction by default,\n // so we use a custom handler here. Modal popovers already handle this internally.\n useInteractOutside({\n ref: popoverRef,\n onInteractOutside: () => {\n // Delay closing to prevent race conditions: when the trigger is pressed, both the trigger and the interact outside handler fire.\n // Without this delay, the popover may immediately reopen after closing.\n requestAnimationFrame(() => {\n overlayTriggerState?.close();\n });\n },\n isDisabled: !isNonModal,\n });\n\n return (\n <>\n <RACOverlayArrow className=\"cim-popover-arrow\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"10\" viewBox=\"0 0 16 10\">\n <path d=\"M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0\" />\n </svg>\n </RACOverlayArrow>\n\n <RACDialog className=\"cim-popover-body\">\n {title && (\n <RACHeading slot=\"title\" className={clsx('cim-popover-title', textStyle({ variant: 'title-5' }))}>\n {title}\n </RACHeading>\n )}\n <FocusableContainer className=\"cim-popover-content\" scrollDirection=\"vertical\">\n {typeof children === 'function' ? children(renderProps) : children}\n </FocusableContainer>\n </RACDialog>\n </>\n );\n}\n\n/**\n * Displays an overlay element positioned relative to a trigger.\n *\n * See [popover usage guidelines](https://ui.cimpress.io/components/popover/).\n */\nconst _Popover = forwardRef(Popover, 'Popover');\n\nexport { _Popover as Popover };\n"]}
|
|
1
|
+
{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../../../src/components/popover/popover.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client';\n\nimport clsx from 'clsx';\nimport { useContext, useMemo, type ForwardedRef, type ReactNode, type RefObject } from 'react';\nimport { useInteractOutside, useObjectRef } from 'react-aria';\nimport {\n DialogTrigger as RACDialogTrigger,\n Popover as RACPopover,\n type PopoverProps as RACPopoverProps,\n OverlayArrow as RACOverlayArrow,\n Heading as RACHeading,\n OverlayTriggerStateContext as RACOverlayTriggerStateContext,\n Dialog as RACDialog,\n} from 'react-aria-components';\nimport { forwardRef } from '../../forward-ref.js';\nimport { useProductionWarning } from '../../utils/use-production-warning.js';\nimport { FocusableContainer } from '../internal/focusable-container/focusable-container.js';\nimport type { AriaLabelingProps, CommonProps } from '../types.js';\nimport { textStyle } from '../typography/utils.js';\n\nexport interface PopoverRootProps {\n /** The popover trigger with its associated popover. Provide the trigger as the first child, and the popover as the second child. */\n children: ReactNode;\n /** Whether the popover is open (controlled). */\n isOpen?: boolean;\n /** Whether the popover is open by default (uncontrolled). */\n defaultOpen?: boolean;\n /** Handler that is called when the popover's open state changes. */\n onOpenChange?: (isOpen: boolean) => void;\n}\n\n/**\n * Encapsulates a popover trigger and its associated popover.\n * The trigger can be any Cimpress UI button, and the popover will be displayed when the trigger is activated.\n */\nexport function PopoverRoot(props: PopoverRootProps) {\n return <RACDialogTrigger {...props} />;\n}\n\nPopoverRoot.displayName = 'PopoverRoot';\n\ninterface DialogProps extends CommonProps, AriaLabelingProps {}\n\nexport interface PopoverRenderProps {\n /** Closes the popover when called. */\n close: () => void;\n}\n\nexport interface PopoverProps extends DialogProps, Pick<RACPopoverProps, 'placement'> {\n /** The contents of the popover. A function may be provided to access a function to close the popover. */\n children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);\n /** The title of the popover. */\n title?: string;\n /**\n * Whether the popover is open (controlled).\n * If using `PopoverRoot`, this prop has no effect - provide `isOpen` to `PopoverRoot` instead.\n */\n isOpen?: boolean;\n /**\n * Whether the popover is open by default (uncontrolled).\n * If using `PopoverRoot`, this prop has no effect - provide `defaultOpen` to `PopoverRoot` instead.\n */\n defaultOpen?: boolean;\n /**\n * Handler that is called when the popover's open state changes.\n * If using `PopoverRoot`, this prop has no effect - provide `onOpenChange` to `PopoverRoot` instead.\n */\n onOpenChange?: (isOpen: boolean) => void;\n /**\n * The ref for the element which the popover positions itself with respect to.\n * When used within `PopoverRoot`, this is set automatically. Provide `triggerRef` only when `Popover` is used standalone.\n */\n triggerRef?: RefObject<Element | null>;\n /**\n * Allows the popover to be non-modal, meaning it will not block interactions outside the popover.\n * This is non-default behavior and can lead to accessibility and interaction issues. Use only if you have a specific, valid reason.\n */\n UNSTABLE_isNonModal?: boolean;\n /**\n * Limits the maximum height of the popover.\n */\n UNSTABLE_maxHeight?: number;\n}\n\nfunction Popover(\n {\n children,\n title,\n UNSAFE_className,\n UNSAFE_style,\n isOpen,\n defaultOpen,\n onOpenChange,\n placement,\n triggerRef,\n UNSTABLE_isNonModal,\n UNSTABLE_maxHeight,\n ...props\n }: PopoverProps,\n ref: ForwardedRef<HTMLElement>,\n) {\n const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = props;\n\n useProductionWarning(() => {\n if (!title && !ariaLabel && !ariaLabelledBy) {\n console.warn('Popover requires one of title / aria-label / aria-labelledby for accessibility');\n }\n }, [title, ariaLabel, ariaLabelledBy]);\n\n const popoverRef = useObjectRef(ref);\n\n return (\n <RACPopover\n ref={popoverRef}\n className={clsx('cim-popover', UNSAFE_className)}\n style={UNSAFE_style}\n isOpen={isOpen}\n defaultOpen={defaultOpen}\n onOpenChange={onOpenChange}\n triggerRef={triggerRef}\n placement={placement}\n containerPadding={16}\n offset={5} // 1px border + 4px actual offset\n arrowBoundaryOffset={4} // offset by border radius so that the arrow is never positioned over the rounded corner\n isNonModal={UNSTABLE_isNonModal}\n maxHeight={UNSTABLE_maxHeight}\n data-cim-style-root\n >\n <PopoverInner\n dialogProps={props}\n title={title}\n children={children}\n popoverRef={popoverRef}\n isNonModal={UNSTABLE_isNonModal}\n />\n </RACPopover>\n );\n}\n\ninterface PopoverInnerProps {\n dialogProps: Omit<DialogProps, 'UNSAFE_className' | 'UNSAFE_style'>;\n title?: string;\n children: ReactNode | ((renderProps: PopoverRenderProps) => ReactNode);\n popoverRef: RefObject<HTMLElement>;\n isNonModal?: boolean;\n}\n\nfunction PopoverInner({ title, children, popoverRef, isNonModal, dialogProps }: PopoverInnerProps) {\n const overlayTriggerState = useContext(RACOverlayTriggerStateContext);\n const renderProps = useMemo(() => ({ close: () => overlayTriggerState?.close() }), [overlayTriggerState]);\n\n // For non-modal popovers, React Aria does not handle outside interaction by default,\n // so we use a custom handler here. Modal popovers already handle this internally.\n useInteractOutside({\n ref: popoverRef,\n onInteractOutside: () => {\n // Delay closing to prevent race conditions: when the trigger is pressed, both the trigger and the interact outside handler fire.\n // Without this delay, the popover may immediately reopen after closing.\n requestAnimationFrame(() => {\n overlayTriggerState?.close();\n });\n },\n isDisabled: !isNonModal,\n });\n\n return (\n <>\n <RACOverlayArrow className=\"cim-popover-arrow\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"10\" viewBox=\"0 0 16 10\">\n <path d=\"M16 0L8.7809 9.0239C8.3805 9.5243 7.6195 9.5243 7.2191 9.0239L0 0\" />\n </svg>\n </RACOverlayArrow>\n\n <RACDialog {...dialogProps} className=\"cim-popover-body\">\n {title && (\n <RACHeading slot=\"title\" className={clsx('cim-popover-title', textStyle({ variant: 'title-5' }))}>\n {title}\n </RACHeading>\n )}\n <FocusableContainer className=\"cim-popover-content\" scrollDirection=\"vertical\">\n {typeof children === 'function' ? children(renderProps) : children}\n </FocusableContainer>\n </RACDialog>\n </>\n );\n}\n\n/**\n * Displays an overlay element positioned relative to a trigger.\n *\n * See [popover usage guidelines](https://ui.cimpress.io/components/popover/).\n */\nconst _Popover = forwardRef(Popover, 'Popover');\n\nexport { _Popover as Popover };\n"]}
|