@oracle/oraclejet-preact 18.0.10 → 18.0.12

package/es/Dialog-ded776a5.js

@@ -0,0 +1,316 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { forwardRef } from 'preact/compat';
+import { W as WindowOverlay } from './WindowOverlay-9b43e658.js';
+import { u as useTestId } from './useTestId-3bc3958c.js';
+import { u as useAnimation } from './useAnimation-a5eb7604.js';
+import { useRef, useState, useCallback, useEffect, useMemo } from 'preact/hooks';
+import { m as mergeRefs } from './refUtils-b9d8d91a.js';
+import { DialogRedwoodTheme } from './UNSAFE_Dialog/themes/redwood/DialogTheme.js';
+import { F as FocusTrap } from './FocusTrap-c31d16c5.js';
+import { L as Layer } from './Layer-12a734d1.js';
+import './LayerHost-15b42a3e.js';
+import { M as Modal } from './Modal-103da2aa.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-e4b8a67e.js';
+import { m as mergeInterpolations } from './mergeInterpolations-e2db2a66.js';
+import { u as useResizeObserver } from './useResizeObserver-838164c1.js';
+import { u as useDraggable } from './useDraggable-e1aaa8f3.js';
+import { F as Floating } from './Floating-9bf456f9.js';
+import { I as IconButton } from './IconButton-aed90302.js';
+import { S as SvgClose } from './Close-d6f419e5.js';
+import { R as Resizable } from './Resizable-ea74f2fd.js';
+import { u as useBreakpoints } from './useBreakpoints-13aa87e6.js';
+import { u as useTranslationBundle } from './useTranslationBundle-98df6291.js';
+import { a as SLIDE_UP_XLARGE, D as DURATION_LARGE, b as SLIDE_DOWN_XLARGE } from './animationUtils-e6081007.js';
+import { a as allTabbableElements, f as focusWithin, b as focusOn, g as getActiveElement } from './tabbableUtils-b4fa6fe6.js';
+
+const StyledDialogHeader = ({ children, id, cancelBehavior, onClose, draggableProps, headerDecoration = 'on' }) => {
+    const { styles } = useComponentTheme(DialogRedwoodTheme);
+    const classes = classNames([
+        styles.dialogHeaderStyle,
+        ...(headerDecoration === 'on' ? [styles.dialogHeaderDecorationStyle] : [])
+    ]);
+    const content = typeof children === 'string' ? (jsx("h1", { id: id, className: styles.dialogTitleStyle, children: children })) : (jsx("div", { 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, 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, footerRef }, ref) => {
+    const elementRef = useRef(null);
+    const mergedRef = mergeRefs(ref, elementRef);
+    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);
+            }
+        }
+    }, []);
+    // 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 visibilityStyle = visibility === 'visible' ? styles.visibilityVisible : styles.visibilityHidden;
+    const testIdProps = useTestId(testId);
+    return (jsxs("div", { ref: mergedRef, 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, draggableProps: draggableProps, children: header }), jsx("div", { className: contentStyle, children: jsx("div", { className: styles.dialogBodyStyle, children: children }) }), jsx(StyledDialogFooter, { ref: footerRef, style: styles.dialogFooterStyle, children: footer })] }), isResizable && (jsx(Resizable, { onResizeStart: onResizeStart, onResize: onResize, onResizeEnd: onResizeEnd, containerRef: containerRef }))] }));
+});
+// 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(({ autoFocusRef, children, isOpen, header = '', footer, modality = 'modal', launcherRef, anchorRef, 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 [visibility, setVisibility] = useState('hidden');
+    const floatingRef = useRef(null);
+    const contentWrapperRef = useRef(null);
+    const localLauncherRef = 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 setInitialFocus = useCallback(() => {
+        // Focus on first tabbable in the Dialog container or container itself if there is none
+        if (footerRef.current && allTabbableElements(footerRef.current).length > 0) {
+            focusWithin(footerRef.current);
+        }
+        else {
+            focusWithin(contentWrapperRef.current);
+        }
+        onFocusSet?.();
+    }, [onFocusSet]);
+    const returnFocus = useCallback(() => {
+        // Try to return focus to 1.launcher or 2.anchor
+        const launcherEl = localLauncherRef.current;
+        if (launcherEl) {
+            focusOn(launcherEl);
+            // Checking instanceof to avoid Coords type that can not be focused
+        }
+    }, [localLauncherRef]);
+    // Animation
+    const { nodeRef } = useAnimation(animationType, {
+        animationStates,
+        isAnimatedOnMount: true,
+        onAnimationEnd: () => {
+            if (isOpen) {
+                onTransitionEnd?.(true);
+            }
+            else if (!isOpen) {
+                returnFocus();
+                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
+        if (status === 'unmounted' && !isOpen) {
+            return;
+        }
+        // 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
+        if (status === 'unmounted' && isOpen) {
+            setStatus('initial');
+            return;
+        }
+        // 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.
+        if (status === 'initial' && isOpen) {
+            nodeRef(contentWrapperRef.current);
+            setStatus('opening');
+            return;
+        }
+        // 3. Unhide component. It becomes visible.
+        if (status === 'opening' && isOpen) {
+            setVisibility('visible');
+            return;
+        }
+        // 4. Closing
+        if (!isOpen) {
+            setStatus('closing');
+        }
+    }, [isOpen, status, nodeRef]);
+    // Initialize launcher
+    useEffect(() => {
+        if (isOpen) {
+            if (!launcherRef?.current) {
+                // 1. If launcher is not defined, most frequent scenario is,
+                // that element, that has focus before opening the dialog is considered launcher
+                localLauncherRef.current = getActiveElement();
+            }
+            else if (launcherRef.current instanceof Element) {
+                // 2. launcherRef element was provided.
+                // Verify, if it exists in DOM, otherwise use the last active element
+                localLauncherRef.current = document.body.contains(launcherRef.current)
+                    ? launcherRef.current
+                    : getActiveElement();
+            }
+            else {
+                localLauncherRef.current = getActiveElement();
+            }
+            // 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 renderDialogContent = () => {
+        return (jsx(FocusTrap, { autoFocusRef: autoFocusRef, children: 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, 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() }));
+        }
+    };
+    if (modality === 'modal') {
+        return jsx(Modal, { isOpen: status !== 'unmounted', children: renderDialog() });
+    }
+    else {
+        return status !== 'unmounted' ? jsx(Layer, { children: renderDialog() }) : null;
+    }
+});
+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-ded776a5.js.map

package/es/Dialog-ded776a5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog-ded776a5.js","sources":["../../src/UNSAFE_Dialog/Dialog.tsx"],"sourcesContent":["import type { ComponentChild, RefObject } 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 { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\nimport { Layer } from '../UNSAFE_Layer';\nimport { Modal } from '../UNSAFE_Modal';\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 } 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\n// dialog states\ntype Status = 'initial' | 'opening' | 'closing' | 'unmounted';\ntype VisibilityStatus = 'hidden' | 'visible';\ntype Animations = 'zoomIn' | 'zoomOut' | 'slideUp' | 'slideDown';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLDivElement>, 'children' | 'role'>;\n\nexport type OnCloseDetail = {\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<HTMLElement>;\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>;\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  cancelBehavior?: CancelBehavior;\n  onClose?: (detail: OnCloseDetail) => void;\n  draggableProps?: DraggableProps;\n  headerDecoration?: 'off' | 'on';\n};\n\nconst StyledDialogHeader = ({\n  children,\n  id,\n  cancelBehavior,\n  onClose,\n  draggableProps,\n  headerDecoration = 'on'\n}: DialogHeaderProps) => {\n  const { styles } = useComponentTheme<never, DialogStyles>(DialogRedwoodTheme);\n\n  const classes = classNames([\n    styles.dialogHeaderStyle,\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      <div>{children}</div>\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}>\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<HTMLAttributesSignalExcluded<HTMLDivElement>, '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    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      footerRef\n    }: MainProps,\n    ref: ForwardedRef<HTMLDivElement | null>\n  ) => {\n    const elementRef = useRef<HTMLDivElement>(null);\n    const mergedRef = mergeRefs(ref, elementRef);\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      }\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 visibilityStyle =\n      visibility === 'visible' ? styles.visibilityVisible : styles.visibilityHidden;\n\n    const testIdProps = useTestId(testId);\n\n    return (\n      <div\n        ref={mergedRef}\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            draggableProps={draggableProps}>\n            {header}\n          </StyledDialogHeader>\n          <div className={contentStyle}>\n            <div className={styles.dialogBodyStyle}>{children}</div>\n          </div>\n          <StyledDialogFooter ref={footerRef} style={styles.dialogFooterStyle}>\n            {footer}\n          </StyledDialogFooter>\n        </div>\n        {isResizable && (\n          <Resizable\n            onResizeStart={onResizeStart}\n            onResize={onResize}\n            onResizeEnd={onResizeEnd}\n            containerRef={containerRef}></Resizable>\n        )}\n      </div>\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      autoFocusRef,\n      children,\n      isOpen,\n      header = '',\n      footer,\n      modality = 'modal',\n      launcherRef,\n      anchorRef,\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 [visibility, setVisibility] = useState<VisibilityStatus>('hidden');\n\n    const floatingRef = useRef<HTMLDivElement>(null);\n    const contentWrapperRef = useRef<HTMLDivElement | null>(null);\n    const localLauncherRef = useRef<HTMLElement | null>(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\n    const setInitialFocus = useCallback(() => {\n      // Focus on first tabbable in the Dialog container or container itself if there is none\n      if (footerRef.current && allTabbableElements(footerRef.current).length > 0) {\n        focusWithin(footerRef.current);\n      } else {\n        focusWithin(contentWrapperRef.current as HTMLElement);\n      }\n      onFocusSet?.();\n    }, [onFocusSet]);\n\n    const returnFocus = useCallback((): void => {\n      // Try to return focus to 1.launcher or 2.anchor\n      const launcherEl = localLauncherRef.current;\n\n      if (launcherEl) {\n        focusOn(launcherEl);\n        // Checking instanceof to avoid Coords type that can not be focused\n      }\n    }, [localLauncherRef]);\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          returnFocus();\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\n      if (status === 'unmounted' && !isOpen) {\n        return;\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      if (status === 'unmounted' && isOpen) {\n        setStatus('initial');\n        return;\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      if (status === 'initial' && isOpen) {\n        nodeRef(contentWrapperRef.current);\n        setStatus('opening');\n        return;\n      }\n\n      // 3. Unhide component. It becomes visible.\n      if (status === 'opening' && isOpen) {\n        setVisibility('visible');\n        return;\n      }\n\n      // 4. Closing\n      if (!isOpen) {\n        setStatus('closing');\n      }\n    }, [isOpen, status, nodeRef]);\n\n    // Initialize launcher\n    useEffect(() => {\n      if (isOpen) {\n        if (!launcherRef?.current) {\n          // 1. If launcher is not defined, most frequent scenario is,\n          // that element, that has focus before opening the dialog is considered launcher\n          localLauncherRef.current = getActiveElement() as HTMLElement;\n        } else if (launcherRef.current instanceof Element) {\n          // 2. launcherRef element was provided.\n          // Verify, if it exists in DOM, otherwise use the last active element\n          localLauncherRef.current = document.body.contains(launcherRef.current)\n            ? launcherRef.current\n            : (getActiveElement() as HTMLElement);\n        } else {\n          localLauncherRef.current = getActiveElement() as HTMLElement;\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 renderDialogContent = () => {\n      return (\n        <FocusTrap autoFocusRef={autoFocusRef}>\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            footerRef={footerRef}>\n            {children}\n          </StyledDialog>\n        </FocusTrap>\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    if (modality === 'modal') {\n      return <Modal isOpen={status !== 'unmounted'}>{renderDialog()}</Modal>;\n    } else {\n      return status !== 'unmounted' ? <Layer>{renderDialog()}</Layer> : null;\n    }\n  }\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","CloseIcon","_jsxs"],"mappings":"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"}

package/es/DirectionalCollapseArrowIcon-daafb64c.js

@@ -1,7 +1,7 @@
 /* @oracle/oraclejet-preact: undefined */
 import { jsx } from 'preact/jsx-runtime';
 import { S as SvgCaretRight, a as SvgCaretLeft } from './CaretLeft-7ca5939e.js';
-import { w as withDirectionIcon } from './withDirectionIcon-389870a2.js';
+import { w as withDirectionIcon } from './withDirectionIcon-90d7c798.js';
 
 const DirectionalCollapseArrowIcon = (props) => {
     const Component = withDirectionIcon(SvgCaretLeft, SvgCaretRight);

package/es/DirectionalExpandArrowIcon-35def552.js

@@ -1,7 +1,7 @@
 /* @oracle/oraclejet-preact: undefined */
 import { jsx } from 'preact/jsx-runtime';
 import { a as SvgCaretLeft, S as SvgCaretRight } from './CaretLeft-7ca5939e.js';
-import { w as withDirectionIcon } from './withDirectionIcon-389870a2.js';
+import { w as withDirectionIcon } from './withDirectionIcon-90d7c798.js';
 
 const DirectionalExpandArrowIcon = (props) => {
     const Component = withDirectionIcon(SvgCaretRight, SvgCaretLeft);

package/es/DragHandle-d3a739f5.js

@@ -0,0 +1,22 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { c as classNames } from './classNames-4e12b00d.js';
+import { m as mergeProps } from './mergeProps-88ea8306.js';
+import { u as useActive } from './useActive-fb6d4d52.js';
+import { u as useTestId } from './useTestId-3bc3958c.js';
+import { S as SvgDragV } from './DragV-08d8f1c4.js';
+import { iconStyle, activeStyle, hoverStyle } from './UNSAFE_DragHandle/themes/DragHandleStyles.css.js';
+
+/**
+ * A draggable icon that shows grab cursor when users hover the mouse on it,
+ * and shows grabbing cursor when users click the icon.
+ */
+function DragHandle({ testId }) {
+    const { isActive, activeProps } = useActive();
+    const testIdProps = useTestId(testId);
+    const classes = classNames([iconStyle, isActive ? activeStyle : hoverStyle]);
+    return (jsx("div", { ...mergeProps(activeProps, testIdProps), draggable: true, class: classes, role: "presentation", children: jsx(SvgDragV, {}) }));
+}
+
+export { DragHandle as D };
+//# sourceMappingURL=DragHandle-d3a739f5.js.map

package/es/DragHandle-d3a739f5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandle-d3a739f5.js","sources":["../../src/UNSAFE_DragHandle/DragHandle.tsx"],"sourcesContent":["import { classNames } from '../utils/UNSAFE_classNames';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { useActive } from '../hooks/UNSAFE_useActive';\nimport { useTestId, TestIdProps } from '../hooks/UNSAFE_useTestId';\nimport { DragHandleIcon } from '../PRIVATE_ThemedIcons/DragHandleIcon';\nimport { iconStyle, hoverStyle, activeStyle } from './themes/DragHandleStyles.css';\n\ntype Props = TestIdProps;\n\n/**\n * A draggable icon that shows grab cursor when users hover the mouse on it,\n * and shows grabbing cursor when users click the icon.\n */\nexport function DragHandle({ testId }: Props) {\n  const { isActive, activeProps } = useActive();\n  const testIdProps = useTestId(testId);\n  const classes = classNames([iconStyle, isActive ? activeStyle : hoverStyle]);\n  return (\n    <div\n      {...mergeProps(activeProps, testIdProps)}\n      draggable={true}\n      class={classes}\n      role=\"presentation\">\n      <DragHandleIcon />\n    </div>\n  );\n}\n"],"names":["_jsx","DragHandleIcon"],"mappings":";;;;;;;;;AASA;;;AAGG;AACa,SAAA,UAAU,CAAC,EAAE,MAAM,EAAS,EAAA;IAC1C,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,SAAS,EAAE,CAAC;AAC9C,IAAA,MAAM,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AACtC,IAAA,MAAM,OAAO,GAAG,UAAU,CAAC,CAAC,SAAS,EAAE,QAAQ,GAAG,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC;IAC7E,QACEA,GACM,CAAA,KAAA,EAAA,EAAA,GAAA,UAAU,CAAC,WAAW,EAAE,WAAW,CAAC,EACxC,SAAS,EAAE,IAAI,EACf,KAAK,EAAE,OAAO,EACd,IAAI,EAAC,cAAc,EACnB,QAAA,EAAAA,GAAA,CAACC,QAAc,EAAA,EAAA,CAAG,EACd,CAAA,EACN;AACJ;;;;"}

package/es/Dropdown-f0cdaeae.js

@@ -0,0 +1,80 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, Fragment } from 'preact/jsx-runtime';
+import { useRef, useCallback } from 'preact/hooks';
+import { F as Floating } from './Floating-9bf456f9.js';
+import { L as Layer } from './Layer-12a734d1.js';
+import 'preact/compat';
+import './LayerHost-15b42a3e.js';
+import { K as KEYS } from './keyboardUtils-40eea0a6.js';
+import { f as focusWithin } from './tabbableUtils-b4fa6fe6.js';
+import { u as usePopupAnimation } from './usePopupAnimation-e2e6a2ca.js';
+import { g as getTransformOrigin } from './popupAnimationUtils-175151d9.js';
+import { C as CollectionInteractionContext } from './CollectionInteractionContext-7cf19abc.js';
+import { dropdownStyles } from './UNSAFE_Dropdown/themes/dropdownStyles.css.js';
+import { u as useOutsideMousedown } from './useOutsideMousedown-7307de8b.js';
+import { m as mergeAnimationStateObjects, D as DURATION_LARGE, S as SCALE_UP_FULL } from './animationUtils-e6081007.js';
+
+const DEFAULT_PLACEMENT = 'bottom-start';
+const DEFAULT_OFFSET = { mainAxis: 4, crossAxis: 0 };
+const DEFAULT_SIZE_OPTIONS = { isMaxWidthAdjusted: true, isMaxHeightAdjusted: true };
+const DEFAULT_FLIP_OPTIONS = { mainAxis: true, crossAxis: true };
+const animationStates = {
+    opening: (node) => {
+        return mergeAnimationStateObjects([
+            SCALE_UP_FULL,
+            {
+                from: { transformOrigin: getTransformOrigin(node.placement, node.direction) },
+                to: { transformOrigin: getTransformOrigin(node.placement, node.direction) }
+            }
+        ], {
+            duration: DURATION_LARGE
+        });
+    }
+};
+//TODO: Add animation to dropdown. JET-62628
+//TODO: Investigate best approach to have different virtual padding depending on the position and implement it.JET-57950
+function Dropdown({ isOpen = false, anchorRef, children, id, onClose, minWidth, placement = DEFAULT_PLACEMENT, offset = DEFAULT_OFFSET, onPosition, flipOptions = DEFAULT_FLIP_OPTIONS, sizeOptions = DEFAULT_SIZE_OPTIONS, shiftOptions, initialFocus = 'none' }) {
+    const dropdownRef = useRef(null);
+    const onTransitionEnd = useCallback((isOpen) => {
+        if (isOpen && initialFocus === 'firstFocusable') {
+            const dropdownElement = dropdownRef.current;
+            if (dropdownElement) {
+                focusWithin(dropdownElement);
+            }
+        }
+    }, [initialFocus]);
+    const { status, setAnimationElementRef, onPosition: onPositionAnimated } = usePopupAnimation({
+        isOpen,
+        placement,
+        isAnimatedOnMount: true,
+        animationStates,
+        onPosition,
+        onTransitionEnd
+    });
+    const handleMousedownClose = useCallback((event) => {
+        onClose?.({ reason: 'outsideMousedown', target: event.target });
+    }, [onClose]);
+    const handleKeyDown = useCallback((event) => {
+        if (event.defaultPrevented) {
+            return;
+        }
+        switch (event.code) {
+            case KEYS.ESC:
+                onClose?.({ reason: 'dismissed' });
+                break;
+            case KEYS.TAB:
+                onClose?.({ reason: 'dismissed' });
+                break;
+        }
+    }, [onClose]);
+    // use the mousedown event to be consistent with legacy JET
+    useOutsideMousedown({
+        isDisabled: false,
+        ref: [dropdownRef],
+        handler: handleMousedownClose
+    });
+    return (jsx(Fragment, { children: status !== 'unmounted' ? (jsx(Layer, { logicalParentRef: anchorRef, children: jsx(Floating, { anchorRef: anchorRef, ref: setAnimationElementRef, placement: placement, flipOptions: flipOptions, shiftOptions: shiftOptions, sizeOptions: sizeOptions, offsetValue: offset, onPosition: onPositionAnimated, boundaryOptions: { padding: { top: 8, bottom: 8, left: 0, right: 0 } }, children: jsx("div", { ref: dropdownRef, id: id, class: dropdownStyles.base, style: { minWidth: `${minWidth || 0}px` }, onKeyDown: handleKeyDown, children: jsx(CollectionInteractionContext.Provider, { value: 'embedded', children: children }) }) }) })) : null }));
+}
+
+export { Dropdown as D };
+//# sourceMappingURL=Dropdown-f0cdaeae.js.map

package/es/Dropdown-f0cdaeae.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown-f0cdaeae.js","sources":["../../src/UNSAFE_Dropdown/Dropdown.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { ComponentProps, RefObject, JSX } from 'preact';\nimport { useCallback, useRef } from 'preact/hooks';\n\nimport { Floating } from '../UNSAFE_Floating';\nimport { Layer } from '../UNSAFE_Layer';\nimport { KEYS } from '../utils/PRIVATE_keyboardUtils';\nimport { focusWithin } from '../utils/PRIVATE_tabbableUtils';\nimport { usePopupAnimation } from '#UNSAFE_Popup/usePopupAnimation';\nimport { getTransformOrigin } from '#utils/PRIVATE_popupAnimationUtils';\nimport { AnimationPopupElement } from '../UNSAFE_Popup/usePopupAnimation';\nimport { CollectionInteractionContext } from '#hooks/UNSAFE_useCollectionInteractionContext';\n\nimport { dropdownStyles } from './themes/dropdownStyles.css';\nimport { useOutsideMousedown } from '../hooks/PRIVATE_useOutsideMousedown';\nimport {\n  DURATION_LARGE,\n  SCALE_UP_FULL,\n  mergeAnimationStateObjects\n} from '#utils/PRIVATE_animationUtils';\n\ntype FloatingProps = ComponentProps<typeof Floating>;\n\n//Same as Menu onClose, only difference is mouseDown instead of outside click\n//Once menu consumes dropdown is going to start using mouseDown\nexport type CloseDetail = { reason: 'dismissed' } | { reason: 'outsideMousedown'; target: Element };\n\ntype IntrinsicProps = Pick<JSX.HTMLAttributes<HTMLDivElement>, 'children'>;\n\ntype Props = IntrinsicProps & {\n  /**\n   *Specifies whether Dropdown is open.\n   */\n  isOpen?: boolean;\n  /**\n   * Trigger element reference.\n   */\n  anchorRef: FloatingProps['anchorRef'];\n  /**\n   * Id of the dropdown container.\n   * Used usually for accesibility reasons.\n   */\n  id?: string;\n  /**\n   * Called when dropdown is supposed to be closed.\n   * Called when user tab/esc or mouseDown outside the dropdown.\n   */\n  onClose?: (detail: CloseDetail) => void;\n  /**\n   *Min width represented in pixels of the dropdown container.\n   */\n  minWidth?: number;\n  /**\n   * Placement of the floating element relative to its reference element.\n   */\n  placement?: FloatingProps['placement'];\n  /**\n   * Offset displaces the floating element from its core placement along the specified axes.\n   */\n  offset?: FloatingProps['offsetValue'];\n  /**\n   * Triggered when placement or coordinates are changed after collision is detected.\n   */\n  onPosition?: FloatingProps['onPosition'];\n  /**\n   * Specifies the flipping behavior along the respective axis.\n   */\n  flipOptions?: FloatingProps['flipOptions'];\n  /**\n   * Specifies the resizing behaviour for max-height and max-width of the floating component.\n   */\n  sizeOptions?: FloatingProps['sizeOptions'];\n\n  /**\n   *  Specifies the shift behavior along the respective axis\n   */\n  shiftOptions?: FloatingProps['shiftOptions'];\n  /**\n   * Specifies initial focus.\n   */\n  initialFocus?: 'none' | 'firstFocusable';\n};\n\nconst DEFAULT_PLACEMENT = 'bottom-start';\nconst DEFAULT_OFFSET = { mainAxis: 4, crossAxis: 0 };\nconst DEFAULT_SIZE_OPTIONS = { isMaxWidthAdjusted: true, isMaxHeightAdjusted: true };\nconst DEFAULT_FLIP_OPTIONS = { mainAxis: true, crossAxis: true };\n\nconst animationStates: Parameters<typeof usePopupAnimation>[0]['animationStates'] = {\n  opening: (node: AnimationPopupElement) => {\n    return mergeAnimationStateObjects(\n      [\n        SCALE_UP_FULL,\n        {\n          from: { transformOrigin: getTransformOrigin(node.placement, node.direction) },\n          to: { transformOrigin: getTransformOrigin(node.placement, node.direction) }\n        }\n      ],\n      {\n        duration: DURATION_LARGE\n      }\n    );\n  }\n};\n\n//TODO: Add animation to dropdown. JET-62628\n//TODO: Investigate best approach to have different virtual padding depending on the position and implement it.JET-57950\nexport function Dropdown({\n  isOpen = false,\n  anchorRef,\n  children,\n  id,\n  onClose,\n  minWidth,\n  placement = DEFAULT_PLACEMENT,\n  offset = DEFAULT_OFFSET,\n  onPosition,\n  flipOptions = DEFAULT_FLIP_OPTIONS,\n  sizeOptions = DEFAULT_SIZE_OPTIONS,\n  shiftOptions,\n  initialFocus = 'none'\n}: Props) {\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  const onTransitionEnd = useCallback(\n    (isOpen: boolean) => {\n      if (isOpen && initialFocus === 'firstFocusable') {\n        const dropdownElement = dropdownRef.current;\n        if (dropdownElement) {\n          focusWithin(dropdownElement);\n        }\n      }\n    },\n    [initialFocus]\n  );\n\n  const {\n    status,\n    setAnimationElementRef,\n    onPosition: onPositionAnimated\n  } = usePopupAnimation({\n    isOpen,\n    placement,\n    isAnimatedOnMount: true,\n    animationStates,\n    onPosition,\n    onTransitionEnd\n  });\n\n  const handleMousedownClose = useCallback(\n    (event: MouseEvent) => {\n      onClose?.({ reason: 'outsideMousedown', target: event.target as Element });\n    },\n    [onClose]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.defaultPrevented) {\n        return;\n      }\n      switch (event.code) {\n        case KEYS.ESC:\n          onClose?.({ reason: 'dismissed' });\n          break;\n        case KEYS.TAB:\n          onClose?.({ reason: 'dismissed' });\n          break;\n        default:\n          break;\n      }\n    },\n    [onClose]\n  );\n\n  // use the mousedown event to be consistent with legacy JET\n  useOutsideMousedown({\n    isDisabled: false,\n    ref: [dropdownRef],\n    handler: handleMousedownClose\n  });\n\n  return (\n    <>\n      {status !== 'unmounted' ? (\n        <Layer logicalParentRef={anchorRef as RefObject<Element>}>\n          <Floating\n            anchorRef={anchorRef}\n            ref={setAnimationElementRef}\n            placement={placement}\n            flipOptions={flipOptions}\n            shiftOptions={shiftOptions}\n            sizeOptions={sizeOptions}\n            offsetValue={offset}\n            onPosition={onPositionAnimated}\n            boundaryOptions={{ padding: { top: 8, bottom: 8, left: 0, right: 0 } }}>\n            <div\n              ref={dropdownRef}\n              id={id}\n              class={dropdownStyles.base}\n              style={{ minWidth: `${minWidth || 0}px` }}\n              onKeyDown={handleKeyDown}>\n              <CollectionInteractionContext.Provider value={'embedded'}>\n                {children}\n              </CollectionInteractionContext.Provider>\n            </div>\n          </Floating>\n        </Layer>\n      ) : null}\n    </>\n  );\n}\n"],"names":["_jsx","_Fragment"],"mappings":"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"}

package/es/EmbeddedIconButton-b44e507f.js

@@ -0,0 +1,11 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { B as BaseButton } from './BaseButton-685bec17.js';
+import { B as ButtonLabelLayout } from './ButtonLabelLayout-05d9a61f.js';
+
+const EmbeddedIconButton = ({ isDisabled = false, size = 'sm', onAction, 'aria-label': accessibleLabel, 'aria-describedby': ariaDescribedBy, 'aria-hidden': ariaHidden = false, ...props }) => {
+    return (jsx(BaseButton, { elementDetails: { type: 'span', isFocusable: false }, isDisabled: isDisabled, size: size, variant: 'ghost', styling: ['min'], onAction: onAction, "aria-describedby": ariaDescribedBy, "aria-hidden": ariaHidden, "aria-label": accessibleLabel, children: jsx(ButtonLabelLayout, { display: 'icons', startIcon: props.children, size: size }) }));
+};
+
+export { EmbeddedIconButton as E };
+//# sourceMappingURL=EmbeddedIconButton-b44e507f.js.map

package/es/EmbeddedIconButton-b44e507f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbeddedIconButton-b44e507f.js","sources":["../../src/PRIVATE_EmbeddedIconButton/EmbeddedIconButton.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChild } from 'preact';\nimport { BaseButton } from '../UNSAFE_BaseButton';\nimport { ButtonLabelLayout } from '../UNSAFE_ButtonLabelLayout';\n\ntype AriaProps =\n  | {\n      /**\n       * The ID of an element (or space separated IDs of multiple elements) that\n       * describes the button.\n       */\n      'aria-describedby'?: string;\n\n      /**\n       * Whether the button should be hidden from screen readers. When true, no aria-label is required.\n       */\n      'aria-hidden'?: false;\n\n      /**\n       * accessibleLabel - the aria label\n       */\n      'aria-label': string;\n    }\n  | {\n      'aria-describedby'?: string;\n\n      'aria-hidden': true;\n\n      'aria-label'?: string;\n    };\n\ntype BaseProps = {\n  /**\n   * Specifies the icon for the button.\n   */\n  children?: ComponentChild;\n\n  /**\n   * Specifies that the button element should be disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  /**\n   * Triggered when a button is clicked, whether by keyboard, mouse, or touch events.\n   */\n  onAction?: () => void | null;\n\n  /**\n   * The size indicates how large the button is rendered. Note that only the ghost variant supports the xs size.\n   * @default 'sm'\n   */\n  size?: 'xs' | 'sm';\n};\n\ntype Props = BaseProps & AriaProps;\n\nexport const EmbeddedIconButton = ({\n  isDisabled = false,\n  size = 'sm',\n  onAction,\n  'aria-label': accessibleLabel,\n  'aria-describedby': ariaDescribedBy,\n  'aria-hidden': ariaHidden = false,\n  ...props\n}: Props) => {\n  return (\n    <BaseButton\n      elementDetails={{ type: 'span', isFocusable: false }}\n      isDisabled={isDisabled}\n      size={size}\n      variant={'ghost'}\n      styling={['min']}\n      onAction={onAction}\n      aria-describedby={ariaDescribedBy}\n      aria-hidden={ariaHidden}\n      aria-label={accessibleLabel}>\n      <ButtonLabelLayout\n        display={'icons'}\n        startIcon={props.children}\n        size={size}></ButtonLabelLayout>\n    </BaseButton>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;;AA+DO,MAAM,kBAAkB,GAAG,CAAC,EACjC,UAAU,GAAG,KAAK,EAClB,IAAI,GAAG,IAAI,EACX,QAAQ,EACR,YAAY,EAAE,eAAe,EAC7B,kBAAkB,EAAE,eAAe,EACnC,aAAa,EAAE,UAAU,GAAG,KAAK,EACjC,GAAG,KAAK,EACF,KAAI;AACV,IAAA,QACEA,GAAA,CAAC,UAAU,EAAA,EACT,cAAc,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,EACpD,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,CAAC,KAAK,CAAC,EAChB,QAAQ,EAAE,QAAQ,EACA,kBAAA,EAAA,eAAe,EACpB,aAAA,EAAA,UAAU,EACX,YAAA,EAAA,eAAe,EAC3B,QAAA,EAAAA,GAAA,CAAC,iBAAiB,EAChB,EAAA,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,KAAK,CAAC,QAAQ,EACzB,IAAI,EAAE,IAAI,EAAsB,CAAA,EAAA,CACvB,EACb;AACJ;;;;"}