@oracle/oraclejet-preact 20.0.4 → 20.1.0

package/es/Dialog-d1de5b06.js

@@ -0,0 +1,387 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
+import { forwardRef } from 'preact/compat';
+import { W as WindowOverlay } from './WindowOverlay-467c2d12.js';
+import { u as useTestId } from './useTestId-ab1bede6.js';
+import { u as useAnimation } from './useAnimation-fe39685e.js';
+import { useRef, useState, useCallback, useEffect, useMemo } from 'preact/hooks';
+import { m as mergeRefs } from './refUtils-76275c69.js';
+import { DialogRedwoodTheme } from './UNSAFE_Dialog/themes/redwood/DialogTheme.js';
+import { F as FocusTrap } from './FocusTrap-b59d5752.js';
+import { L as Layer } from './Layer-6c27170e.js';
+import './LayerHost-3cf255a6.js';
+import { L as LogicalParentRefContext, M as Modal } from './Modal-c0f730b8.js';
+import { c as classNames } from './classNames-4e12b00d.js';
+import { g as globalImages } from './ImageVars.css-7b3180c8.js';
+import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
+import { u as useId } from './useId-03dbfdf0.js';
+import { d as dimensionInterpolations } from './dimensions-e4fbc23d.js';
+import { m as mergeInterpolations } from './mergeInterpolations-30cd9a69.js';
+import { u as useResizeObserver } from './useResizeObserver-13641643.js';
+import { u as useDraggable } from './useDraggable-e1aaa8f3.js';
+import { F as Floating } from './Floating-be4c0cb6.js';
+import { I as IconButton } from './IconButton-7f91481c.js';
+import { S as SvgClose } from './Close-5a460764.js';
+import { R as Resizable } from './Resizable-b88279bc.js';
+import { u as useBreakpoints } from './useBreakpoints-99efa183.js';
+import { u as useTranslationBundle } from './useTranslationBundle-bc6e0896.js';
+import { S as SLIDE_UP_XLARGE, D as DURATION_LARGE, a as SLIDE_DOWN_XLARGE } from './animationUtils-5f409a6c.js';
+import { b as focusOn, a as allTabbableElements, f as focusWithin, g as getActiveElement } from './tabbableUtils-c8311ec6.js';
+import { U as UNSAFE_DOM_ACCESS } from './unsafeDomAccess-453eb74e.js';
+
+const StyledDialogHeader = ({ children, id, closeButtonRef, cancelBehavior, onClose, draggableProps, headerDecoration = 'on' }) => {
+    const { styles } = useComponentTheme(DialogRedwoodTheme);
+    const isSmallWidth = !useBreakpoints()['md'];
+    const classes = classNames([
+        styles.dialogHeaderStyle,
+        isSmallWidth ? styles.dialogHeaderStyleSmall : styles.dialogHeaderStyleDesktop,
+        ...(headerDecoration === 'on' ? [styles.dialogHeaderDecorationStyle] : [])
+    ]);
+    const content = typeof children === 'string' ? (jsx("h1", { id: id, className: styles.dialogTitleStyle, children: children })) : (jsx(Fragment, { children: children }));
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const handleIconClose = () => {
+        onClose?.({ reason: 'icon' });
+    };
+    const closeIcon = cancelBehavior === 'icon' ? (jsx("div", { children: jsx("div", { className: styles.dialogHeaderCloseIconStyle, ref: closeButtonRef, children: jsx(IconButton, { "aria-label": translations.message_close(), size: "sm", variant: "ghost", onAction: handleIconClose, children: jsx(SvgClose, {}) }) }) })) : null;
+    return (jsxs("div", { className: classes, ...draggableProps, children: [content, closeIcon] }));
+};
+const StyledDialogFooter = forwardRef(({ children, style }, ref) => {
+    return (jsx("div", { ref: ref, className: style, children: children }));
+});
+const StyledDialog = forwardRef(({ children, header, footer, visibility, labelId, role, ariaLabelledBy, ariaDescribedBy, cancelBehavior, draggableProps, isResizable, headerDecoration, containerRef, onClose, onResizeStart, onResize, onResizeEnd, onKeyDown, testId, style, closeButtonRef, bodyRef, footerRef }, ref) => {
+    const elementRef = useRef(null);
+    const mergedRef = mergeRefs(ref, elementRef);
+    // computed dialog dimension limits
+    const sizeConstraints = useRef();
+    const [isSmallHeight, setSmallHeight] = useState(false);
+    const isSmallWidth = !useBreakpoints()['md'];
+    const { classes: styleClasses, styles } = useComponentTheme(DialogRedwoodTheme);
+    const resizeHandler = useCallback(() => {
+        if (elementRef.current) {
+            if (elementRef.current.clientHeight < 400) {
+                setSmallHeight(true);
+            }
+            else {
+                setSmallHeight(false);
+            }
+            if (elementRef.current) {
+                const cs = window.getComputedStyle(elementRef.current);
+                sizeConstraints.current = {
+                    minHeight: parseFloat(cs.minHeight),
+                    maxHeight: parseFloat(cs.maxHeight),
+                    minWidth: parseFloat(cs.minWidth),
+                    maxWidth: parseFloat(cs.maxWidth)
+                };
+            }
+        }
+    }, []);
+    // set initial Height
+    useEffect(() => {
+        resizeHandler();
+    }, [resizeHandler]);
+    useResizeObserver(elementRef, resizeHandler);
+    // for small widths (mobile), use the 'smallWidth' dialog style
+    // otherwise, check for small height to apply 'smallWidth' or 'desktop' styles accordingly
+    const baseStyle = isSmallWidth ? styles.baseStyleSmallWidth : styles.baseStyleDesktop;
+    // content should scroll depending on the viewport height
+    // on large screens, the header and footer should be "sticky",
+    // at small viewport heights, the entire content should be scrollable
+    const contentStyle = isSmallHeight
+        ? styles.dialogContentStyleNoShrink
+        : styles.dialogContentStyle;
+    const bodyStyle = classNames([
+        styles.dialogBodyStyle,
+        isSmallWidth ? styles.dialogBodyStyleSmall : styles.dialogBodyStyleDesktop
+    ]);
+    const footerStyle = classNames([
+        styles.dialogFooterStyle,
+        isSmallWidth ? styles.dialogFooterStyleSmall : styles.dialogFooterStyleDesktop
+    ]);
+    const visibilityStyle = visibility === 'visible' ? styles.visibilityVisible : styles.visibilityHidden;
+    const testIdProps = useTestId(testId);
+    return (jsx(FocusTrap, { restoreFocusRef: false, children: jsxs("div", { ref: mergedRef, tabIndex: -1, className: classNames([styleClasses, baseStyle, visibilityStyle, globalImages]), style: style, onKeyDown: onKeyDown, role: role, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...testIdProps, children: [jsxs("div", { className: styles.dialogContainerStyle, children: [jsx(StyledDialogHeader, { id: labelId, onClose: onClose, headerDecoration: headerDecoration, cancelBehavior: cancelBehavior, closeButtonRef: closeButtonRef, draggableProps: draggableProps, children: header }), jsx("div", { className: contentStyle, ref: bodyRef, children: children ? jsx("div", { className: bodyStyle, children: children }) : null }), jsx(StyledDialogFooter, { ref: footerRef, style: footerStyle, children: footer })] }), isResizable && (jsx(Resizable, { onResizeStart: onResizeStart, onResize: onResize, onResizeEnd: onResizeEnd, containerRef: containerRef, constraints: sizeConstraints.current }))] }) }));
+});
+// main Dialog component
+/**
+ * WAI-ARIA-compliant dialog component. A dialog is a floating window that typically contains
+ * a title bar and a content area.
+ * The dialog is generally placed on top of the rest of the page content. It can be either modal
+ * (only the content in the dialog can be interacted with) or non-modal (it's still possible
+ * to interact with content outside of the dialog).
+ */
+const Dialog = forwardRef(({ children, isOpen, header = '', footer, modality = 'modal', launcherRef, anchorRef, autoFocusRef, placement, offset = 0, cancelBehavior = 'none', dragAffordance = 'none', resizeBehavior = 'none', headerDecoration = 'on', onDragStart, onDragMove, onDragEnd, onResizeStart, onResize, onResizeEnd, onFocusSet, onClose, onTransitionEnd, role = 'dialog', 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, testId, ...props }, ref) => {
+    const [status, _setStatus] = useState(isOpen ? 'initial' : 'unmounted');
+    const _status = useRef(isOpen ? 'initial' : 'unmounted');
+    const setStatus = (s) => {
+        _status.current = s;
+        _setStatus(s);
+    };
+    const [visibility, setVisibility] = useState('hidden');
+    const prevStatusRef = useRef('unmounted');
+    const floatingRef = useRef(null);
+    const contentWrapperRef = useRef(null);
+    const localLauncherRef = useRef(null);
+    const closeButtonRef = useRef(null);
+    const bodyRef = useRef(null);
+    const footerRef = useRef(null);
+    const isSmallWidth = !useBreakpoints()['md'];
+    const derivedPlacement = isSmallWidth ? 'bottom' : placement ? placement : 'center';
+    const animationType = isSmallWidth
+        ? status === 'opening'
+            ? 'slideUp'
+            : 'slideDown'
+        : status === 'opening'
+            ? 'zoomIn'
+            : 'zoomOut';
+    const uniqueId = useId();
+    const labelId = ariaLabelledBy ? ariaLabelledBy : uniqueId;
+    const interpolations = [...Object.values(dimensionInterpolations)];
+    const styleInterpolations = mergeInterpolations(interpolations);
+    const { ...styles } = styleInterpolations(props);
+    const shouldReturnFocus = useRef(false);
+    const setInitialFocus = useCallback(() => {
+        // Initial focus policy doc:
+        // The first :tabbable element within the dialog body
+        // The first :tabbable element within the dialog footer
+        // The dialog's close button
+        // The dialog itself
+        if (autoFocusRef && autoFocusRef.current) {
+            focusOn(autoFocusRef.current);
+        }
+        else if (bodyRef.current && allTabbableElements(bodyRef.current).length > 0) {
+            // The first :tabbable element within the dialog body
+            focusWithin(bodyRef.current);
+        }
+        else if (footerRef.current && allTabbableElements(footerRef.current).length > 0) {
+            // The first :tabbable element within the dialog footer
+            focusWithin(footerRef.current);
+        }
+        else if (closeButtonRef.current && allTabbableElements(closeButtonRef.current).length > 0) {
+            // The dialog's close button
+            focusWithin(closeButtonRef.current);
+        }
+        else {
+            // The dialog itself
+            focusWithin(contentWrapperRef.current);
+        }
+        onFocusSet?.();
+    }, [autoFocusRef, onFocusSet]);
+    const returnFocus = useCallback(() => {
+        const launcherEl = localLauncherRef.current;
+        if (shouldReturnFocus.current && launcherEl) {
+            focusOn(launcherEl);
+            shouldReturnFocus.current = false;
+        }
+    }, []);
+    // Animation
+    const { nodeRef } = useAnimation(animationType, {
+        animationStates,
+        isAnimatedOnMount: true,
+        onAnimationEnd: () => {
+            if (isOpen) {
+                onTransitionEnd?.(true);
+            }
+            else if (!isOpen) {
+                // Should return focus?
+                // Modeless: check whether Dialog contains focus before it unmounts
+                // Modal: always return focus
+                shouldReturnFocus.current =
+                    contentWrapperRef.current?.contains(getActiveElement()) || false;
+                nodeRef(null);
+                setVisibility('hidden');
+                setStatus('unmounted');
+                onTransitionEnd?.(false);
+            }
+        }
+    });
+    const mergedRef = useMemo(() => mergeRefs(contentWrapperRef, ref), [contentWrapperRef, ref]);
+    const launcherKeyDownCallback = useCallback((event) => {
+        if (localLauncherRef.current === getActiveElement() && event.code === 'F6') {
+            // Prevent default F6 handlers.
+            // F6 is a standard Chrome address bar shortcut on Windows.
+            event.preventDefault();
+            event.stopPropagation();
+            focusWithin(contentWrapperRef.current);
+            onFocusSet?.();
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [modality]);
+    const { draggableProps } = useDraggable({
+        isDisabled: dragAffordance === 'none',
+        containerRef: floatingRef,
+        onDragStart,
+        onDragMove,
+        onDragEnd
+    });
+    useEffect(() => {
+        // 1. Ignore status update on initial render or return focus on component unmount
+        if (status === 'unmounted' && !isOpen) {
+            if (status !== prevStatusRef.current) {
+                returnFocus();
+            }
+        }
+        // 2. Mount visually hidden component
+        // Component gets mounted, but will be visually hidden to avoid flickering
+        // Flickering happens because it gets rendered before animation hook repositions
+        // it in next render cycle
+        else if (status === 'unmounted' && isOpen) {
+            setStatus('initial');
+        }
+        // 3. Setup animation
+        // Component has been mounted.
+        // We will kick out animation as node is already present in DOM.
+        // To avoid flickering, we still keep it visually hidden until the next render cycle.
+        else if (status === 'initial' && isOpen) {
+            nodeRef(contentWrapperRef.current);
+            setStatus('opening');
+        }
+        // 3. Unhide component. It becomes visible.
+        else if (status === 'opening' && isOpen) {
+            setVisibility('visible');
+        }
+        // 4. Closing
+        else if (!isOpen && _status.current !== 'unmounted') {
+            setStatus('closing');
+        }
+        return () => {
+            // remember the previous status
+            prevStatusRef.current = status;
+        };
+    }, [isOpen, status, nodeRef, returnFocus]);
+    // Destroy case handler
+    useEffect(() => {
+        return () => {
+            const launcherEl = localLauncherRef.current;
+            if (
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            (contentWrapperRef.current?.contains(getActiveElement()) || false) &&
+                launcherEl) {
+                // In destroy case ModalManager is blocking returning of the focus.
+                // We need to reschedule it to workaround that
+                setTimeout(() => {
+                    focusOn(launcherEl);
+                }, 0);
+            }
+        };
+    }, []);
+    // Initialize launcher
+    useEffect(() => {
+        if (isOpen) {
+            localLauncherRef.current = _getLauncherElement(launcherRef);
+            // Register F6 key handler to enter a modeless dialog
+            if (modality === 'modeless') {
+                localLauncherRef.current?.addEventListener('keydown', launcherKeyDownCallback);
+            }
+        }
+        return () => {
+            // Deregister F6 key handler
+            if (modality === 'modeless') {
+                localLauncherRef.current?.removeEventListener('keydown', launcherKeyDownCallback);
+            }
+        };
+    }, [isOpen, launcherRef, launcherKeyDownCallback, modality]);
+    // setInitialFocus when the dialog becomes visible
+    useEffect(() => {
+        if (visibility === 'visible') {
+            setInitialFocus();
+        }
+    }, [visibility, setInitialFocus]);
+    const handleKeyDown = (event) => {
+        switch (event.code) {
+            case 'Escape':
+                onClose?.({ reason: 'escapeKey' });
+                break;
+            case 'F6':
+                // Focus launcher
+                if (localLauncherRef.current && modality === 'modeless') {
+                    focusOn(localLauncherRef.current);
+                }
+                // Prevent default F6 handlers. F6 is a standard Chrome address bar shortcut on Windows.
+                event.preventDefault();
+                event.stopPropagation();
+                break;
+        }
+    };
+    const handleBackdropClick = () => {
+        // in case of a backdrop click, move focus to dialog's root element
+        contentWrapperRef.current?.focus();
+    };
+    const renderDialogContent = () => {
+        return (jsx(StyledDialog, { ref: mergedRef, labelId: labelId, header: header, footer: footer, role: role, ariaLabelledBy: labelId, ariaDescribedBy: ariaDescribedBy, onKeyDown: handleKeyDown, testId: testId, style: styles, visibility: visibility, cancelBehavior: cancelBehavior, draggableProps: draggableProps, isResizable: resizeBehavior === 'resizable', headerDecoration: headerDecoration, containerRef: floatingRef, onClose: onClose, onResizeStart: onResizeStart, onResize: onResize, onResizeEnd: onResizeEnd, closeButtonRef: closeButtonRef, bodyRef: bodyRef, footerRef: footerRef, children: children }));
+    };
+    const renderDialog = () => {
+        if (anchorRef && anchorRef.current) {
+            return (jsx(Floating, { ref: floatingRef, anchorRef: anchorRef, placement: 'bottom-start', flipOptions: { mainAxis: false, crossAxis: false }, shiftOptions: { mainAxis: false, crossAxis: false }, children: renderDialogContent() }));
+        }
+        else {
+            return (jsx(WindowOverlay, { placement: derivedPlacement, offset: offset, children: renderDialogContent() }));
+        }
+    };
+    const logicalLauncherRef = launcherRef;
+    if (modality === 'modal') {
+        return (jsx(LogicalParentRefContext.Provider, { value: logicalLauncherRef, children: jsx(Modal, { isOpen: status !== 'unmounted', onBackdropClick: handleBackdropClick, children: renderDialog() }) }));
+    }
+    else {
+        return status !== 'unmounted' ? (jsx(Layer, { logicalParentRef: logicalLauncherRef, children: renderDialog() })) : null;
+    }
+});
+function _getLauncherElement(launcherRef) {
+    const launcher = launcherRef?.current;
+    if (launcher) {
+        const launcherElement = launcher instanceof Element ? launcher : launcher[UNSAFE_DOM_ACCESS];
+        if (document.body.contains(launcherElement)) {
+            return launcherElement;
+        }
+    }
+    return getActiveElement();
+}
+const animationStates = {
+    zoomIn: {
+        from: {
+            scaleX: 0.9,
+            scaleY: 0.9,
+            transformOrigin: 'center',
+            opacity: 0
+        },
+        to: {
+            scaleX: 1,
+            scaleY: 1,
+            opacity: 1
+        },
+        options: {
+            duration: 200
+        }
+    },
+    zoomOut: {
+        from: {
+            scaleX: 1,
+            scaleY: 1,
+            transformOrigin: 'center',
+            opacity: 1
+        },
+        to: {
+            scaleX: 0.9,
+            scaleY: 0.9,
+            opacity: 0
+        },
+        options: {
+            duration: 200
+        }
+    },
+    slideUp: {
+        ...SLIDE_UP_XLARGE,
+        options: {
+            duration: DURATION_LARGE
+        }
+    },
+    slideDown: {
+        ...SLIDE_DOWN_XLARGE,
+        options: {
+            duration: DURATION_LARGE
+        }
+    }
+};
+
+export { Dialog as D };
+//# sourceMappingURL=Dialog-d1de5b06.js.map

package/es/Dialog-d1de5b06.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog-d1de5b06.js","sources":["../../src/UNSAFE_Dialog/Dialog.tsx"],"sourcesContent":["import type { ComponentChild, RefObject, JSX } from 'preact';\nimport { ForwardedRef, forwardRef } from 'preact/compat';\nimport { Offset, WindowOverlay, WindowOverlayPlacement } from '../UNSAFE_WindowOverlay';\nimport { TestIdProps, useTestId } from '../hooks/UNSAFE_useTestId';\nimport { useAnimation } from '../hooks/UNSAFE_useAnimation';\nimport { useEffect, useRef, useCallback, useMemo, useState } from 'preact/hooks';\nimport { mergeRefs } from '../utils/PRIVATE_refUtils';\n\nimport { DialogRedwoodTheme } from './themes/redwood/DialogTheme';\nimport { DialogStyles } from './themes/DialogStyles.css';\nimport { FocusTrap } from '../UNSAFE_FocusTrap';\nimport type { UnpackSignals } from '@oracle/oraclejet-internal-utilities/attributeUtils';\nimport { Layer } from '../UNSAFE_Layer';\nimport { Modal } from '../UNSAFE_Modal';\nimport { LogicalParentRef, LogicalParentRefContext } from '../UNSAFE_Layer/LogicalParentRefContext';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { globalImages } from '#/ImageVars.css';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { useId } from '../hooks/UNSAFE_useId';\nimport { dimensionInterpolations, DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { useResizeObserver } from '../hooks/UNSAFE_useResizeObserver';\n\nimport { DraggableProps, useDraggable } from '../hooks/PRIVATE_useDraggable';\nimport { Floating, Coords } from '../UNSAFE_Floating';\nimport { IconButton } from '../UNSAFE_IconButton';\nimport { CloseIcon } from '../PRIVATE_ThemedIcons/CloseIcon';\nimport { Resizable, ResizableConstraints } from '../PRIVATE_Resizable/Resizable';\nimport { Position, Rect } from '../utils/UNSAFE_flexibleComponentUtils';\nimport { useBreakpoints } from '../hooks/UNSAFE_useBreakpoints';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '../resources/nls/bundle';\nimport {\n  SLIDE_DOWN_XLARGE,\n  SLIDE_UP_XLARGE,\n  DURATION_LARGE\n} from '../utils/PRIVATE_animationUtils';\nimport {\n  allTabbableElements,\n  focusOn,\n  focusWithin,\n  getActiveElement\n} from '../utils/PRIVATE_tabbableUtils';\n\nimport type { UnsafeDomHandle } from '#utils/UNSAFE_unsafeDomAccess';\nimport { UNSAFE_DOM_ACCESS } from '#utils/UNSAFE_unsafeDomAccess';\n\n// dialog states\ntype Status = 'initial' | 'opening' | 'closing' | 'unmounted';\ntype VisibilityStatus = 'hidden' | 'visible';\ntype Animations = 'zoomIn' | 'zoomOut' | 'slideUp' | 'slideDown';\n\ntype IntrinsicProps = Pick<UnpackSignals<JSX.IntrinsicElements['div']>, 'children' | 'role'>;\n\ntype OnCloseDetail = {\n  /**\n   * reason for closing the dialog\n   */\n  reason: 'escapeKey' | 'icon';\n};\n\nexport type CancelBehavior = 'none' | 'escape' | 'icon';\n\ntype DialogProps = IntrinsicProps &\n  DimensionProps & {\n    /**\n     * Optional ref for an element to focus on when component mounts\n     */\n    autoFocusRef?: RefObject<{ focus: () => void }>;\n\n    /**\n     * On Close callback.\n     */\n    onClose?: (detail: OnCloseDetail) => void;\n\n    /**\n     * On opening or closing transition end callback.\n     */\n    onTransitionEnd?: (value: boolean) => void;\n\n    /**\n     * Determines whether the Dialog is open.\n     */\n    isOpen: boolean;\n\n    /**\n     * Dialog header content. Can be a string or VNode (Component Child).\n     * <p>\n     * When a plain string is passed, it will be used as the dialog title. Otherwise, the prop value\n     * will be used as the header content.\n     * </p>\n     * <p>\n     * Dialog will automatically refer to the header content as the accessible label.\n     * The user can override this behavior by specifying the <code>aria-labelledby</code> property\n     * and setting its value as needed.\n     * </p>\n     */\n    header?: ComponentChild;\n\n    /**\n     * Dialog footer content.\n     */\n    footer?: ComponentChild;\n\n    /**\n     * Determines dialog modality. Default is 'modal'.\n     */\n    modality?: 'modal' | 'modeless';\n\n    /**\n     * Specifies dialog's cancel behavior. Default is 'none'.\n     */\n    cancelBehavior?: CancelBehavior;\n\n    /**\n     * Specifies dialog's launcher. After dialog closes, it returns focus to the launcher.\n     * If not specified, focus goes back to the last active element before dialog opened.\n     */\n    launcherRef?: RefObject<HTMLElement | UnsafeDomHandle<HTMLElement>>;\n\n    /**\n     * Specifies dialog's anchor. Dialog is placed relative to its anchor. If not specified,\n     * it is placed relatively to window.\n     */\n    anchorRef?: RefObject<Element | Coords>;\n\n    /**\n     * Determines placement of the dialog relative to the viewport.\n     * Supported values are:\n     * <p> <code>center</code>, <code>top</code>, <code>top-start</code>, <code>top-end</code>,\n     * <code>end</code>, <code>end-top</code>, <code>end-bottom</code>,\n     * <code>bottom</code>, <code>bottom-start</code>, <code>bottom-end</code>,\n     * <code>start</code>, <code>start-top</code>, <code>start-bottom</code>\n     * </p>\n     * Default is <code>center</code>.\n     */\n    placement?: WindowOverlayPlacement;\n\n    /**\n     * Determines the offset of the Dialog from its core placement along the specified axes.\n     *\n     * Offset could be a number or an object\n     *\n     * An object has the following type:\n     * <pre>\n     *   {\n     *     mainAxis?: number;\n     *     crossAxis?: number;\n     *   }\n     * </pre>\n     * For the <code>center</code> placement the convention for the offset type is that mainAxis defines\n     * offset from the top, crossAxis defines offset from the left side of the view port.\n     *\n     * A number is a shortcut for setting the mainAxis.\n     */\n    offset?: Offset;\n\n    /**\n     * Determines if the Dialog should be sensitive to drag gestures. To create a draggable dialog,\n     * set <code>dragAffordance='header'</code> and specify the <code>onDragMove</code> handler.\n     */\n    dragAffordance?: 'none' | 'header';\n\n    /**\n     * Determines if the Dialog should support resizing. To create a resizable dialog,\n     * set <code>resizeBehavior='resizable'</code> and specify the <code>onResize</code> handler.\n     */\n    resizeBehavior?: 'none' | 'resizable';\n\n    /**\n     * Callback to be invoked if <code>dragAffordance</code> is set to <code>header</code> and a drag gesture is initiated.\n     * The current position is reported in the <code>pos</code> parameter.\n     *\n     * @param pos\n     */\n    onDragStart?: (pos: Position) => void;\n\n    /**\n     * Callback to be invoked if <code>dragAffordance</code> is set to <code>header</code> and a drag gesture is detected.\n     * The current position is reported in the <code>pos</code> parameter.\n     *\n     * @param pos\n     */\n    onDragMove?: (pos: Position) => void;\n\n    /**\n     * Callback to be invoked if <code>dragAffordance</code> is set to <code>header</code> and a drag gesture is completed.\n     * The current position is reported in the <code>pos</code> parameter.\n     *\n     * @param pos\n     */\n    onDragEnd?: (pos: Position) => void;\n\n    /**\n     * Callback to be invoked if <code>resizeBehavior</code> is set to <code>resizable</code> and\n     * a resize gesture is initiated. The current position and dimensions are reported in the\n     * <code>rect</code> parameter.\n     *\n     * @param rect\n     */\n    onResizeStart?: (rect: Rect) => void;\n\n    /**\n     * Callback to be invoked if <code>resizeBehavior</code> is set to <code>resizable</code> and\n     * a resize gesture is detected. The current position and dimensions are reported in the\n     * <code>rect</code> parameter.\n     *\n     * @param rect\n     */\n    onResize?: (rect: Rect) => void;\n\n    /**\n     * Callback to be invoked if <code>resizeBehavior</code> is set to <code>resizable</code> and\n     * a resize gesture is completed. The current position and dimensions are reported in the\n     * <code>rect</code> parameter.\n     *\n     * @param rect\n     */\n    onResizeEnd?: (rect: Rect) => void;\n\n    /**\n     * Specifies callback triggered when initial focus is set or when a modeless dialog receives focus\n     * via the F6 key.\n     */\n    onFocusSet?: () => void;\n\n    /**\n     * Determines if the header decoration should be displayed. The default is <code>on</code>\n     * which renders a textured strip at the top of the dialog header in the Redwood theme.\n     * If set to <code>off</code>, no decoration is rendered.\n     */\n    headerDecoration?: 'off' | 'on';\n\n    /**\n     * Specifies the ARIA role type. Depending on how the dialog is used in the page, the developer\n     * should choose from the following:\n     * <ul>\n     *   <li><code>dialog</code> defines an application window that is designed to interrupt the current\n     *      processing of an application in order to prompt the user to enter information or require\n     *      a response.</li>\n     *   <li><code>alertdialog</code> defines type of dialog that contains an alert message, where initial\n     *      focus goes to an element within the dialog.</li>\n     * </ul>\n     */\n    role?: string;\n\n    /**\n     * Optional <code>aria-labelledby</code> property referring to the content to be used as Dialog's\n     * accessible <label htmlFor=\"\" className=\"\"></label>\n     * If not specified, the Dialog will automatically refer to the entire header content as the accessible label.\n     */\n    'aria-labelledby'?: string;\n\n    /**\n     * Optional accessible description for the dialog.\n     */\n    'aria-describedby'?: string;\n  } & TestIdProps;\n\n// dialog header\ntype DialogHeaderProps = Pick<DialogProps, 'children'> & {\n  id?: string;\n  closeButtonRef?: RefObject<HTMLDivElement>;\n  cancelBehavior?: CancelBehavior;\n  onClose?: (detail: OnCloseDetail) => void;\n  draggableProps?: DraggableProps;\n  headerDecoration?: 'off' | 'on';\n};\n\nconst StyledDialogHeader = ({\n  children,\n  id,\n  closeButtonRef,\n  cancelBehavior,\n  onClose,\n  draggableProps,\n  headerDecoration = 'on'\n}: DialogHeaderProps) => {\n  const { styles } = useComponentTheme<never, DialogStyles>(DialogRedwoodTheme);\n\n  const isSmallWidth = !useBreakpoints()['md'];\n\n  const classes = classNames([\n    styles.dialogHeaderStyle,\n    isSmallWidth ? styles.dialogHeaderStyleSmall : styles.dialogHeaderStyleDesktop,\n    ...(headerDecoration === 'on' ? [styles.dialogHeaderDecorationStyle] : [])\n  ]);\n\n  const content: ComponentChild =\n    typeof children === 'string' ? (\n      <h1 id={id} className={styles.dialogTitleStyle}>\n        {children}\n      </h1>\n    ) : (\n      <>{children}</>\n    );\n\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n\n  const handleIconClose = () => {\n    onClose?.({ reason: 'icon' });\n  };\n\n  const closeIcon: ComponentChild =\n    cancelBehavior === 'icon' ? (\n      <div>\n        <div className={styles.dialogHeaderCloseIconStyle} ref={closeButtonRef}>\n          <IconButton\n            aria-label={translations.message_close()}\n            size=\"sm\"\n            variant=\"ghost\"\n            onAction={handleIconClose}>\n            <CloseIcon />\n          </IconButton>\n        </div>\n      </div>\n    ) : null;\n\n  return (\n    <div className={classes} {...draggableProps}>\n      {content}\n      {closeIcon}\n    </div>\n  );\n};\n\n// dialog footer\n\ntype DialogFooterProps = Pick<DialogProps, 'children'> & {\n  style?: string;\n};\n\nconst StyledDialogFooter = forwardRef(\n  ({ children, style }: DialogFooterProps, ref: ForwardedRef<HTMLDivElement | null>) => {\n    return (\n      <div ref={ref} className={style}>\n        {children}\n      </div>\n    );\n  }\n);\n\n// styled dialog\n\ntype MainProps = Pick<DialogProps, 'children' | 'header' | 'footer' | 'role'> &\n  Pick<UnpackSignals<JSX.IntrinsicElements['div']>, 'style' | 'onKeyDown'> & {\n    visibility: VisibilityStatus;\n    labelId?: string;\n    ariaLabelledBy?: string;\n    ariaDescribedBy?: string;\n    cancelBehavior?: CancelBehavior;\n    draggableProps?: DraggableProps;\n    isResizable?: boolean;\n    headerDecoration?: 'off' | 'on';\n    containerRef?: RefObject<HTMLElement>;\n    onClose?: (detail: OnCloseDetail) => void;\n    onResizeStart?: (rect: Rect) => void;\n    onResize?: (rect: Rect) => void;\n    onResizeEnd?: (rect: Rect) => void;\n    closeButtonRef?: RefObject<HTMLDivElement>;\n    bodyRef?: RefObject<HTMLDivElement>;\n    footerRef?: RefObject<HTMLDivElement | null>;\n  } & TestIdProps;\n\nconst StyledDialog = forwardRef(\n  (\n    {\n      children,\n      header,\n      footer,\n      visibility,\n      labelId,\n      role,\n      ariaLabelledBy,\n      ariaDescribedBy,\n      cancelBehavior,\n      draggableProps,\n      isResizable,\n      headerDecoration,\n      containerRef,\n      onClose,\n      onResizeStart,\n      onResize,\n      onResizeEnd,\n      onKeyDown,\n      testId,\n      style,\n      closeButtonRef,\n      bodyRef,\n      footerRef\n    }: MainProps,\n    ref: ForwardedRef<HTMLDivElement | null>\n  ) => {\n    const elementRef = useRef<HTMLDivElement>(null);\n    const mergedRef = mergeRefs(ref, elementRef);\n\n    // computed dialog dimension limits\n    const sizeConstraints = useRef<ResizableConstraints>();\n\n    const [isSmallHeight, setSmallHeight] = useState<boolean>(false);\n    const isSmallWidth = !useBreakpoints()['md'];\n\n    const { classes: styleClasses, styles } = useComponentTheme<never, DialogStyles>(\n      DialogRedwoodTheme\n    );\n\n    const resizeHandler = useCallback(() => {\n      if (elementRef.current) {\n        if (elementRef.current.clientHeight < 400) {\n          setSmallHeight(true);\n        } else {\n          setSmallHeight(false);\n        }\n        if (elementRef.current) {\n          const cs = window.getComputedStyle(elementRef.current);\n          sizeConstraints.current = {\n            minHeight: parseFloat(cs.minHeight),\n            maxHeight: parseFloat(cs.maxHeight),\n            minWidth: parseFloat(cs.minWidth),\n            maxWidth: parseFloat(cs.maxWidth)\n          };\n        }\n      }\n    }, []);\n\n    // set initial Height\n    useEffect(() => {\n      resizeHandler();\n    }, [resizeHandler]);\n\n    useResizeObserver(elementRef, resizeHandler);\n\n    // for small widths (mobile), use the 'smallWidth' dialog style\n    // otherwise, check for small height to apply 'smallWidth' or 'desktop' styles accordingly\n    const baseStyle = isSmallWidth ? styles.baseStyleSmallWidth : styles.baseStyleDesktop;\n\n    // content should scroll depending on the viewport height\n    // on large screens, the header and footer should be \"sticky\",\n    // at small viewport heights, the entire content should be scrollable\n    const contentStyle = isSmallHeight\n      ? styles.dialogContentStyleNoShrink\n      : styles.dialogContentStyle;\n\n    const bodyStyle = classNames([\n      styles.dialogBodyStyle,\n      isSmallWidth ? styles.dialogBodyStyleSmall : styles.dialogBodyStyleDesktop\n    ]);\n\n    const footerStyle = classNames([\n      styles.dialogFooterStyle,\n      isSmallWidth ? styles.dialogFooterStyleSmall : styles.dialogFooterStyleDesktop\n    ]);\n\n    const visibilityStyle =\n      visibility === 'visible' ? styles.visibilityVisible : styles.visibilityHidden;\n\n    const testIdProps = useTestId(testId);\n\n    return (\n      <FocusTrap restoreFocusRef={false}>\n        <div\n          ref={mergedRef}\n          tabIndex={-1}\n          className={classNames([styleClasses, baseStyle, visibilityStyle, globalImages])}\n          style={style}\n          onKeyDown={onKeyDown}\n          role={role}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          {...testIdProps}>\n          <div className={styles.dialogContainerStyle}>\n            <StyledDialogHeader\n              id={labelId}\n              onClose={onClose}\n              headerDecoration={headerDecoration}\n              cancelBehavior={cancelBehavior}\n              closeButtonRef={closeButtonRef}\n              draggableProps={draggableProps}>\n              {header}\n            </StyledDialogHeader>\n            <div className={contentStyle} ref={bodyRef}>\n              {children ? <div className={bodyStyle}>{children}</div> : null}\n            </div>\n            <StyledDialogFooter ref={footerRef} style={footerStyle}>\n              {footer}\n            </StyledDialogFooter>\n          </div>\n          {isResizable && (\n            <Resizable\n              onResizeStart={onResizeStart}\n              onResize={onResize}\n              onResizeEnd={onResizeEnd}\n              containerRef={containerRef}\n              constraints={sizeConstraints.current}></Resizable>\n          )}\n        </div>\n      </FocusTrap>\n    );\n  }\n);\n\n// main Dialog component\n\n/**\n * WAI-ARIA-compliant dialog component. A dialog is a floating window that typically contains\n * a title bar and a content area.\n * The dialog is generally placed on top of the rest of the page content. It can be either modal\n * (only the content in the dialog can be interacted with) or non-modal (it's still possible\n * to interact with content outside of the dialog).\n */\nexport const Dialog = forwardRef(\n  (\n    {\n      children,\n      isOpen,\n      header = '',\n      footer,\n      modality = 'modal',\n      launcherRef,\n      anchorRef,\n      autoFocusRef,\n      placement,\n      offset = 0,\n      cancelBehavior = 'none',\n      dragAffordance = 'none',\n      resizeBehavior = 'none',\n      headerDecoration = 'on',\n      onDragStart,\n      onDragMove,\n      onDragEnd,\n      onResizeStart,\n      onResize,\n      onResizeEnd,\n      onFocusSet,\n      onClose,\n      onTransitionEnd,\n      role = 'dialog',\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      testId,\n      ...props\n    }: DialogProps,\n    ref: ForwardedRef<HTMLDivElement | null>\n  ) => {\n    const [status, _setStatus] = useState<Status>(isOpen ? 'initial' : 'unmounted');\n    const _status = useRef<Status>(isOpen ? 'initial' : 'unmounted');\n    const setStatus = (s: Status) => {\n      _status.current = s;\n      _setStatus(s);\n    };\n\n    const [visibility, setVisibility] = useState<VisibilityStatus>('hidden');\n\n    const prevStatusRef = useRef<Status>('unmounted');\n\n    const floatingRef = useRef<HTMLDivElement>(null);\n    const contentWrapperRef = useRef<HTMLDivElement | null>(null);\n    const localLauncherRef = useRef<HTMLElement | null>(null);\n    const closeButtonRef = useRef<HTMLDivElement>(null);\n    const bodyRef = useRef<HTMLDivElement>(null);\n    const footerRef = useRef<HTMLDivElement | null>(null);\n\n    const isSmallWidth = !useBreakpoints()['md'];\n    const derivedPlacement = isSmallWidth ? 'bottom' : placement ? placement : 'center';\n    const animationType = isSmallWidth\n      ? status === 'opening'\n        ? 'slideUp'\n        : 'slideDown'\n      : status === 'opening'\n      ? 'zoomIn'\n      : 'zoomOut';\n\n    const uniqueId = useId();\n    const labelId = ariaLabelledBy ? ariaLabelledBy : uniqueId;\n\n    const interpolations = [...Object.values(dimensionInterpolations)];\n    const styleInterpolations = mergeInterpolations<DimensionProps>(interpolations);\n    const { ...styles } = styleInterpolations(props);\n    const shouldReturnFocus = useRef<boolean>(false);\n\n    const setInitialFocus = useCallback(() => {\n      // Initial focus policy doc:\n      // The first :tabbable element within the dialog body\n      // The first :tabbable element within the dialog footer\n      // The dialog's close button\n      // The dialog itself\n      if (autoFocusRef && autoFocusRef.current) {\n        focusOn(autoFocusRef.current);\n      } else if (bodyRef.current && allTabbableElements(bodyRef.current).length > 0) {\n        // The first :tabbable element within the dialog body\n        focusWithin(bodyRef.current);\n      } else if (footerRef.current && allTabbableElements(footerRef.current).length > 0) {\n        // The first :tabbable element within the dialog footer\n        focusWithin(footerRef.current);\n      } else if (closeButtonRef.current && allTabbableElements(closeButtonRef.current).length > 0) {\n        // The dialog's close button\n        focusWithin(closeButtonRef.current);\n      } else {\n        // The dialog itself\n        focusWithin(contentWrapperRef.current as HTMLElement);\n      }\n      onFocusSet?.();\n    }, [autoFocusRef, onFocusSet]);\n\n    const returnFocus = useCallback((): void => {\n      const launcherEl = localLauncherRef.current;\n\n      if (shouldReturnFocus.current && launcherEl) {\n        focusOn(launcherEl);\n        shouldReturnFocus.current = false;\n      }\n    }, []);\n\n    // Animation\n    const { nodeRef } = useAnimation<Animations, HTMLDivElement>(animationType, {\n      animationStates,\n      isAnimatedOnMount: true,\n      onAnimationEnd: () => {\n        if (isOpen) {\n          onTransitionEnd?.(true);\n        } else if (!isOpen) {\n          // Should return focus?\n          // Modeless: check whether Dialog contains focus before it unmounts\n          // Modal: always return focus\n          shouldReturnFocus.current =\n            contentWrapperRef.current?.contains(getActiveElement() as HTMLElement) || false;\n          nodeRef(null);\n          setVisibility('hidden');\n          setStatus('unmounted');\n          onTransitionEnd?.(false);\n        }\n      }\n    });\n\n    const mergedRef = useMemo(() => mergeRefs(contentWrapperRef, ref), [contentWrapperRef, ref]);\n\n    const launcherKeyDownCallback = useCallback(\n      (event: KeyboardEvent): void => {\n        if (localLauncherRef.current === getActiveElement() && event.code === 'F6') {\n          // Prevent default F6 handlers.\n          // F6 is a standard Chrome address bar shortcut on Windows.\n          event.preventDefault();\n          event.stopPropagation();\n\n          focusWithin(contentWrapperRef.current as HTMLElement);\n          onFocusSet?.();\n        }\n      },\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [modality]\n    );\n\n    const { draggableProps } = useDraggable({\n      isDisabled: dragAffordance === 'none',\n      containerRef: floatingRef,\n      onDragStart,\n      onDragMove,\n      onDragEnd\n    });\n\n    useEffect(() => {\n      // 1. Ignore status update on initial render or return focus on component unmount\n      if (status === 'unmounted' && !isOpen) {\n        if (status !== prevStatusRef.current) {\n          returnFocus();\n        }\n      }\n\n      // 2. Mount visually hidden component\n      // Component gets mounted, but will be visually hidden to avoid flickering\n      // Flickering happens because it gets rendered before animation hook repositions\n      // it in next render cycle\n      else if (status === 'unmounted' && isOpen) {\n        setStatus('initial');\n      }\n\n      // 3. Setup animation\n      // Component has been mounted.\n      // We will kick out animation as node is already present in DOM.\n      // To avoid flickering, we still keep it visually hidden until the next render cycle.\n      else if (status === 'initial' && isOpen) {\n        nodeRef(contentWrapperRef.current);\n        setStatus('opening');\n      }\n\n      // 3. Unhide component. It becomes visible.\n      else if (status === 'opening' && isOpen) {\n        setVisibility('visible');\n      }\n\n      // 4. Closing\n      else if (!isOpen && _status.current !== 'unmounted') {\n        setStatus('closing');\n      }\n\n      return () => {\n        // remember the previous status\n        prevStatusRef.current = status;\n      };\n    }, [isOpen, status, nodeRef, returnFocus]);\n\n    // Destroy case handler\n    useEffect(() => {\n      return () => {\n        const launcherEl = localLauncherRef.current;\n        if (\n          // eslint-disable-next-line react-hooks/exhaustive-deps\n          (contentWrapperRef.current?.contains(getActiveElement() as HTMLElement) || false) &&\n          launcherEl\n        ) {\n          // In destroy case ModalManager is blocking returning of the focus.\n          // We need to reschedule it to workaround that\n          setTimeout(() => {\n            focusOn(launcherEl);\n          }, 0);\n        }\n      };\n    }, []);\n\n    // Initialize launcher\n    useEffect(() => {\n      if (isOpen) {\n        localLauncherRef.current = _getLauncherElement(launcherRef);\n\n        // Register F6 key handler to enter a modeless dialog\n        if (modality === 'modeless') {\n          localLauncherRef.current?.addEventListener('keydown', launcherKeyDownCallback);\n        }\n      }\n      return () => {\n        // Deregister F6 key handler\n        if (modality === 'modeless') {\n          localLauncherRef.current?.removeEventListener('keydown', launcherKeyDownCallback);\n        }\n      };\n    }, [isOpen, launcherRef, launcherKeyDownCallback, modality]);\n\n    // setInitialFocus when the dialog becomes visible\n    useEffect(() => {\n      if (visibility === 'visible') {\n        setInitialFocus();\n      }\n    }, [visibility, setInitialFocus]);\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      switch (event.code) {\n        case 'Escape':\n          onClose?.({ reason: 'escapeKey' });\n          break;\n        case 'F6':\n          // Focus launcher\n          if (localLauncherRef.current && modality === 'modeless') {\n            focusOn(localLauncherRef.current);\n          }\n          // Prevent default F6 handlers. F6 is a standard Chrome address bar shortcut on Windows.\n          event.preventDefault();\n          event.stopPropagation();\n          break;\n      }\n    };\n\n    const handleBackdropClick = () => {\n      // in case of a backdrop click, move focus to dialog's root element\n      contentWrapperRef.current?.focus();\n    };\n\n    const renderDialogContent = () => {\n      return (\n        <StyledDialog\n          ref={mergedRef}\n          labelId={labelId}\n          header={header}\n          footer={footer}\n          role={role}\n          ariaLabelledBy={labelId}\n          ariaDescribedBy={ariaDescribedBy}\n          onKeyDown={handleKeyDown}\n          testId={testId}\n          style={styles}\n          visibility={visibility}\n          cancelBehavior={cancelBehavior}\n          draggableProps={draggableProps}\n          isResizable={resizeBehavior === 'resizable'}\n          headerDecoration={headerDecoration}\n          containerRef={floatingRef}\n          onClose={onClose}\n          onResizeStart={onResizeStart}\n          onResize={onResize}\n          onResizeEnd={onResizeEnd}\n          closeButtonRef={closeButtonRef}\n          bodyRef={bodyRef}\n          footerRef={footerRef}>\n          {children}\n        </StyledDialog>\n      );\n    };\n\n    const renderDialog = () => {\n      if (anchorRef && anchorRef.current) {\n        return (\n          <Floating\n            ref={floatingRef}\n            anchorRef={anchorRef}\n            placement={'bottom-start'}\n            flipOptions={{ mainAxis: false, crossAxis: false }}\n            shiftOptions={{ mainAxis: false, crossAxis: false }}>\n            {renderDialogContent()}\n          </Floating>\n        );\n      } else {\n        return (\n          <WindowOverlay placement={derivedPlacement} offset={offset}>\n            {renderDialogContent()}\n          </WindowOverlay>\n        );\n      }\n    };\n\n    const logicalLauncherRef = launcherRef as LogicalParentRef;\n\n    if (modality === 'modal') {\n      return (\n        <LogicalParentRefContext.Provider value={logicalLauncherRef}>\n          <Modal isOpen={status !== 'unmounted'} onBackdropClick={handleBackdropClick}>\n            {renderDialog()}\n          </Modal>\n        </LogicalParentRefContext.Provider>\n      );\n    } else {\n      return status !== 'unmounted' ? (\n        <Layer logicalParentRef={logicalLauncherRef}>{renderDialog()}</Layer>\n      ) : null;\n    }\n  }\n);\n\nfunction _getLauncherElement(launcherRef: DialogProps['launcherRef']) {\n  const launcher = launcherRef?.current;\n\n  if (launcher) {\n    const launcherElement = launcher instanceof Element ? launcher : launcher[UNSAFE_DOM_ACCESS];\n\n    if (document.body.contains(launcherElement)) {\n      return launcherElement;\n    }\n  }\n\n  return getActiveElement() as HTMLElement;\n}\n\nconst animationStates = {\n  zoomIn: {\n    from: {\n      scaleX: 0.9,\n      scaleY: 0.9,\n      transformOrigin: 'center',\n      opacity: 0\n    },\n    to: {\n      scaleX: 1,\n      scaleY: 1,\n      opacity: 1\n    },\n    options: {\n      duration: 200\n    }\n  },\n  zoomOut: {\n    from: {\n      scaleX: 1,\n      scaleY: 1,\n      transformOrigin: 'center',\n      opacity: 1\n    },\n    to: {\n      scaleX: 0.9,\n      scaleY: 0.9,\n      opacity: 0\n    },\n    options: {\n      duration: 200\n    }\n  },\n  slideUp: {\n    ...SLIDE_UP_XLARGE,\n    options: {\n      duration: DURATION_LARGE\n    }\n  },\n  slideDown: {\n    ...SLIDE_DOWN_XLARGE,\n    options: {\n      duration: DURATION_LARGE\n    }\n  }\n};\n"],"names":["_jsx","_Fragment","CloseIcon","_jsxs"],"mappings":"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"}

package/es/DirectionalCollapseArrowIcon-132761da.js

@@ -1,6 +1,6 @@
 /* @oracle/oraclejet-preact: undefined */
 import { a as SvgCaretRight, S as SvgCaretLeft } from './CaretLeft-5c86f5ab.js';
-import { w as withDirectionIcon } from './withDirectionIcon-a8d84a3d.js';
+import { w as withDirectionIcon } from './withDirectionIcon-b725a6d7.js';
 
 /**
  * @license

package/es/DirectionalExpandArrowIcon-5bc45cad.js

@@ -1,6 +1,6 @@
 /* @oracle/oraclejet-preact: undefined */
 import { S as SvgCaretLeft, a as SvgCaretRight } from './CaretLeft-5c86f5ab.js';
-import { w as withDirectionIcon } from './withDirectionIcon-a8d84a3d.js';
+import { w as withDirectionIcon } from './withDirectionIcon-b725a6d7.js';
 
 /**
  * @license