@oracle/oraclejet-preact 18.0.10 → 18.0.12

package/cjs/Dialog-78fcee2e.js

@@ -0,0 +1,318 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var compat = require('preact/compat');
+var WindowOverlay = require('./WindowOverlay-06408f56.js');
+var useTestId = require('./useTestId-5e6af45d.js');
+var useAnimation = require('./useAnimation-fb11e4cc.js');
+var hooks = require('preact/hooks');
+var refUtils = require('./refUtils-915b985d.js');
+var UNSAFE_Dialog_themes_redwood_DialogTheme = require('./UNSAFE_Dialog/themes/redwood/DialogTheme.js');
+var FocusTrap = require('./FocusTrap-bfe96498.js');
+var Layer = require('./Layer-0053053a.js');
+require('./LayerHost-a8c7f182.js');
+var Modal = require('./Modal-b9987f2d.js');
+var classNames = require('./classNames-c14c6ef3.js');
+var ImageVars_css = require('./ImageVars.css-3fbb1c0b.js');
+var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
+var useId = require('./useId-6c0eeb27.js');
+var dimensions = require('./dimensions-10159104.js');
+var mergeInterpolations = require('./mergeInterpolations-6727b536.js');
+var useResizeObserver = require('./useResizeObserver-1597395f.js');
+var useDraggable = require('./useDraggable-aa4ac3a2.js');
+var Floating = require('./Floating-56621d20.js');
+var IconButton = require('./IconButton-6f58deac.js');
+var Close = require('./Close-1f08733f.js');
+var Resizable = require('./Resizable-e5428244.js');
+var useBreakpoints = require('./useBreakpoints-f5c06998.js');
+var useTranslationBundle = require('./useTranslationBundle-51f4c22c.js');
+var animationUtils = require('./animationUtils-54852d03.js');
+var tabbableUtils = require('./tabbableUtils-39e647b7.js');
+
+const StyledDialogHeader = ({ children, id, cancelBehavior, onClose, draggableProps, headerDecoration = 'on' }) => {
+    const { styles } = useComponentTheme.useComponentTheme(UNSAFE_Dialog_themes_redwood_DialogTheme.DialogRedwoodTheme);
+    const classes = classNames.classNames([
+        styles.dialogHeaderStyle,
+        ...(headerDecoration === 'on' ? [styles.dialogHeaderDecorationStyle] : [])
+    ]);
+    const content = typeof children === 'string' ? (jsxRuntime.jsx("h1", { id: id, className: styles.dialogTitleStyle, children: children })) : (jsxRuntime.jsx("div", { children: children }));
+    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const handleIconClose = () => {
+        onClose?.({ reason: 'icon' });
+    };
+    const closeIcon = cancelBehavior === 'icon' ? (jsxRuntime.jsx("div", { children: jsxRuntime.jsx("div", { className: styles.dialogHeaderCloseIconStyle, children: jsxRuntime.jsx(IconButton.IconButton, { "aria-label": translations.message_close(), size: "sm", variant: "ghost", onAction: handleIconClose, children: jsxRuntime.jsx(Close.SvgClose, {}) }) }) })) : null;
+    return (jsxRuntime.jsxs("div", { className: classes, ...draggableProps, children: [content, closeIcon] }));
+};
+const StyledDialogFooter = compat.forwardRef(({ children, style }, ref) => {
+    return (jsxRuntime.jsx("div", { ref: ref, className: style, children: children }));
+});
+const StyledDialog = compat.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 = hooks.useRef(null);
+    const mergedRef = refUtils.mergeRefs(ref, elementRef);
+    const [isSmallHeight, setSmallHeight] = hooks.useState(false);
+    const isSmallWidth = !useBreakpoints.useBreakpoints()['md'];
+    const { classes: styleClasses, styles } = useComponentTheme.useComponentTheme(UNSAFE_Dialog_themes_redwood_DialogTheme.DialogRedwoodTheme);
+    const resizeHandler = hooks.useCallback(() => {
+        if (elementRef.current) {
+            if (elementRef.current.clientHeight < 400) {
+                setSmallHeight(true);
+            }
+            else {
+                setSmallHeight(false);
+            }
+        }
+    }, []);
+    // set initial Height
+    hooks.useEffect(() => {
+        resizeHandler();
+    }, [resizeHandler]);
+    useResizeObserver.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.useTestId(testId);
+    return (jsxRuntime.jsxs("div", { ref: mergedRef, className: classNames.classNames([styleClasses, baseStyle, visibilityStyle, ImageVars_css.globalImages]), style: style, onKeyDown: onKeyDown, role: role, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...testIdProps, children: [jsxRuntime.jsxs("div", { className: styles.dialogContainerStyle, children: [jsxRuntime.jsx(StyledDialogHeader, { id: labelId, onClose: onClose, headerDecoration: headerDecoration, cancelBehavior: cancelBehavior, draggableProps: draggableProps, children: header }), jsxRuntime.jsx("div", { className: contentStyle, children: jsxRuntime.jsx("div", { className: styles.dialogBodyStyle, children: children }) }), jsxRuntime.jsx(StyledDialogFooter, { ref: footerRef, style: styles.dialogFooterStyle, children: footer })] }), isResizable && (jsxRuntime.jsx(Resizable.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 = compat.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] = hooks.useState(isOpen ? 'initial' : 'unmounted');
+    const [visibility, setVisibility] = hooks.useState('hidden');
+    const floatingRef = hooks.useRef(null);
+    const contentWrapperRef = hooks.useRef(null);
+    const localLauncherRef = hooks.useRef(null);
+    const footerRef = hooks.useRef(null);
+    const isSmallWidth = !useBreakpoints.useBreakpoints()['md'];
+    const derivedPlacement = isSmallWidth ? 'bottom' : placement ? placement : 'center';
+    const animationType = isSmallWidth
+        ? status === 'opening'
+            ? 'slideUp'
+            : 'slideDown'
+        : status === 'opening'
+            ? 'zoomIn'
+            : 'zoomOut';
+    const uniqueId = useId.useId();
+    const labelId = ariaLabelledBy ? ariaLabelledBy : uniqueId;
+    const interpolations = [...Object.values(dimensions.dimensionInterpolations)];
+    const styleInterpolations = mergeInterpolations.mergeInterpolations(interpolations);
+    const { ...styles } = styleInterpolations(props);
+    const setInitialFocus = hooks.useCallback(() => {
+        // Focus on first tabbable in the Dialog container or container itself if there is none
+        if (footerRef.current && tabbableUtils.allTabbableElements(footerRef.current).length > 0) {
+            tabbableUtils.focusWithin(footerRef.current);
+        }
+        else {
+            tabbableUtils.focusWithin(contentWrapperRef.current);
+        }
+        onFocusSet?.();
+    }, [onFocusSet]);
+    const returnFocus = hooks.useCallback(() => {
+        // Try to return focus to 1.launcher or 2.anchor
+        const launcherEl = localLauncherRef.current;
+        if (launcherEl) {
+            tabbableUtils.focusOn(launcherEl);
+            // Checking instanceof to avoid Coords type that can not be focused
+        }
+    }, [localLauncherRef]);
+    // Animation
+    const { nodeRef } = useAnimation.useAnimation(animationType, {
+        animationStates,
+        isAnimatedOnMount: true,
+        onAnimationEnd: () => {
+            if (isOpen) {
+                onTransitionEnd?.(true);
+            }
+            else if (!isOpen) {
+                returnFocus();
+                nodeRef(null);
+                setVisibility('hidden');
+                setStatus('unmounted');
+                onTransitionEnd?.(false);
+            }
+        }
+    });
+    const mergedRef = hooks.useMemo(() => refUtils.mergeRefs(contentWrapperRef, ref), [contentWrapperRef, ref]);
+    const launcherKeyDownCallback = hooks.useCallback((event) => {
+        if (localLauncherRef.current === tabbableUtils.getActiveElement() && event.code === 'F6') {
+            // Prevent default F6 handlers.
+            // F6 is a standard Chrome address bar shortcut on Windows.
+            event.preventDefault();
+            event.stopPropagation();
+            tabbableUtils.focusWithin(contentWrapperRef.current);
+            onFocusSet?.();
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [modality]);
+    const { draggableProps } = useDraggable.useDraggable({
+        isDisabled: dragAffordance === 'none',
+        containerRef: floatingRef,
+        onDragStart,
+        onDragMove,
+        onDragEnd
+    });
+    hooks.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
+    hooks.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 = tabbableUtils.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
+                    : tabbableUtils.getActiveElement();
+            }
+            else {
+                localLauncherRef.current = tabbableUtils.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
+    hooks.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') {
+                    tabbableUtils.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 (jsxRuntime.jsx(FocusTrap.FocusTrap, { autoFocusRef: autoFocusRef, children: jsxRuntime.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 (jsxRuntime.jsx(Floating.Floating, { ref: floatingRef, anchorRef: anchorRef, placement: 'bottom-start', flipOptions: { mainAxis: false, crossAxis: false }, shiftOptions: { mainAxis: false, crossAxis: false }, children: renderDialogContent() }));
+        }
+        else {
+            return (jsxRuntime.jsx(WindowOverlay.WindowOverlay, { placement: derivedPlacement, offset: offset, children: renderDialogContent() }));
+        }
+    };
+    if (modality === 'modal') {
+        return jsxRuntime.jsx(Modal.Modal, { isOpen: status !== 'unmounted', children: renderDialog() });
+    }
+    else {
+        return status !== 'unmounted' ? jsxRuntime.jsx(Layer.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: {
+        ...animationUtils.SLIDE_UP_XLARGE,
+        options: {
+            duration: animationUtils.DURATION_LARGE
+        }
+    },
+    slideDown: {
+        ...animationUtils.SLIDE_DOWN_XLARGE,
+        options: {
+            duration: animationUtils.DURATION_LARGE
+        }
+    }
+};
+
+exports.Dialog = Dialog;
+//# sourceMappingURL=Dialog-78fcee2e.js.map

package/cjs/Dialog-78fcee2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog-78fcee2e.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":["useComponentTheme","DialogRedwoodTheme","classNames","_jsx","useTranslationBundle","IconButton","CloseIcon","_jsxs","forwardRef","useRef","mergeRefs","useState","useBreakpoints","useCallback","useEffect","useResizeObserver","useTestId","globalImages","Resizable","useId","dimensionInterpolations","mergeInterpolations","allTabbableElements","focusWithin","focusOn","useAnimation","useMemo","getActiveElement","useDraggable","FocusTrap","Floating","WindowOverlay","Modal","Layer","SLIDE_UP_XLARGE","DURATION_LARGE","SLIDE_DOWN_XLARGE"],"mappings":"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"}

package/cjs/EmbeddedIconButton-ad2a8d25.js

@@ -0,0 +1,13 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var BaseButton = require('./BaseButton-6b9f7463.js');
+var ButtonLabelLayout = require('./ButtonLabelLayout-90b298fd.js');
+
+const EmbeddedIconButton = ({ isDisabled = false, size = 'sm', onAction, 'aria-label': accessibleLabel, 'aria-describedby': ariaDescribedBy, 'aria-hidden': ariaHidden = false, ...props }) => {
+    return (jsxRuntime.jsx(BaseButton.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: jsxRuntime.jsx(ButtonLabelLayout.ButtonLabelLayout, { display: 'icons', startIcon: props.children, size: size }) }));
+};
+
+exports.EmbeddedIconButton = EmbeddedIconButton;
+//# sourceMappingURL=EmbeddedIconButton-ad2a8d25.js.map

package/cjs/EmbeddedIconButton-ad2a8d25.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmbeddedIconButton-ad2a8d25.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","BaseButton","ButtonLabelLayout"],"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,cAAA,CAACC,qBAAU,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,EAAAD,cAAA,CAACE,mCAAiB,EAChB,EAAA,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,KAAK,CAAC,QAAQ,EACzB,IAAI,EAAE,IAAI,EAAsB,CAAA,EAAA,CACvB,EACb;AACJ;;;;"}

package/cjs/ExpandableList-eb37ee5c.js

@@ -0,0 +1,169 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
+var hooks = require('preact/hooks');
+var compat = require('preact/compat');
+var classNames = require('./classNames-c14c6ef3.js');
+var useId = require('./useId-6c0eeb27.js');
+var useTranslationBundle = require('./useTranslationBundle-51f4c22c.js');
+var keys = require('./keys-25710458.js');
+var HiddenAccessible = require('./HiddenAccessible-087eb49a.js');
+var ChevronDown = require('./ChevronDown-9d92edda.js');
+var CollapseIcon = require('./CollapseIcon-2394e7ea.js');
+var LiveRegion = require('./LiveRegion-567427c5.js');
+var useUser = require('./useUser-a4bfc560.js');
+var collectionUtils = require('./collectionUtils-d9fdec19.js');
+var Button = require('./Button-d43a3cd5.js');
+var GroupLoadingIndicator = require('./GroupLoadingIndicator-5940d185.js');
+var List = require('./List-0dc2c4c4.js');
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+/**
+ * A hook that handles mouse and keyboard gesture that toggles the expanded state.
+ * @param keyExtractor
+ * @param expanded
+ * @param onToggle
+ * @returns
+ */
+function useExpandCollapse(keyExtractor, expanded, onToggle) {
+    const { direction } = useUser.useUser();
+    const onClick = hooks.useCallback((event) => {
+        handleToggle(event, keyExtractor, onToggle);
+    }, [keyExtractor, onToggle]);
+    const onKeyUp = hooks.useCallback((event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            handleToggle(event, keyExtractor, onToggle);
+        }
+        else if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+            const isRtl = direction === 'rtl';
+            const isLeftArrow = event.key === 'ArrowLeft' && !isRtl;
+            handleArrowKey(isLeftArrow, event.target, expanded, keyExtractor, onToggle);
+            // arrow key might cause it to scroll horizontally
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    }, [keyExtractor, onToggle, expanded, direction]);
+    return onToggle ? { onClick, onKeyDown, onKeyUp } : {};
+}
+// prevent default (propagation) for keyDown to prevent scrolling the container
+const onKeyDown = (event) => {
+    if (event.key === 'Enter' ||
+        event.key === ' ' ||
+        event.key === 'ArrowLeft' ||
+        event.key === 'ArrowRight') {
+        event.preventDefault();
+    }
+};
+const handleArrowKey = (isLeftArrow, target, expanded, keyExtractor, onToggle) => {
+    const itemKey = keyExtractor(target);
+    if (onToggle && itemKey) {
+        const contains = keys.containsKey(expanded, itemKey);
+        if ((isLeftArrow && contains) || (!isLeftArrow && !contains)) {
+            onToggle({ value: itemKey });
+        }
+    }
+};
+const handleToggle = (event, keyExtractor, onToggle) => {
+    const itemKey = keyExtractor(event.target);
+    if (onToggle && itemKey) {
+        onToggle({ value: itemKey });
+        if (event.type === 'click') {
+            event.stopPropagation();
+        }
+    }
+};
+
+/**
+ * An ExpandableList shows a two-level group of items where each group header can be expand or collapse.
+ */
+function ExpandableList({ children, data, onSelectionChange, onToggle, onPersistCurrentItem, ...props }) {
+    const [statusText, setStatusText] = hooks.useState('');
+    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const currentKey = hooks.useRef();
+    const handleOnPersistCurrentItem = hooks.useCallback((detail) => {
+        currentKey.current = detail.value;
+        onPersistCurrentItem?.(detail);
+    }, [onPersistCurrentItem]);
+    const updateStateText = hooks.useCallback((detail) => {
+        onToggle?.(detail);
+        if (data) {
+            const previouslyExpanded = keys.containsKey(data?.expanded, detail.value);
+            setStatusText(previouslyExpanded
+                ? translations.expandableList_groupCollapse()
+                : translations.expandableList_groupExpand());
+            // we need to clear the live region text otherwise screenreader
+            // won't read again if the content did not change the next time
+            setTimeout(() => {
+                setStatusText('');
+            }, 1000);
+        }
+    }, [onToggle, data, translations]);
+    const expandCollapseProps = useExpandCollapse((element) => {
+        if (element.getAttribute('role') === 'treegrid') {
+            return currentKey.current === undefined ? null : currentKey.current;
+        }
+        return collectionUtils.keyExtractor(element, GroupLoadingIndicator.GROUP_SELECTOR);
+    }, data == null ? emptyKeys : data.expanded, onToggle && updateStateText);
+    const descId = useId.useId();
+    const stableDescIdRef = hooks.useRef(descId);
+    const createHierarchicalContext = (context, options) => {
+        const expanderRenderer = options !== undefined
+            ? () => (jsxRuntime.jsx(Expander, { itemKey: context.metadata.key, expanded: options.expanded, onToggle: options.onToggle }))
+            : undefined;
+        return {
+            ...context,
+            parentKey: context.metadata.parentKey,
+            leaf: context.metadata.isLeaf ?? true,
+            depth: context.metadata.treeDepth ?? 1,
+            expander: expanderRenderer
+        };
+    };
+    const handleSelectionChange = hooks.useCallback((detail) => {
+        if (onSelectionChange && data) {
+            const keys$1 = List.excludeGroup(data, detail.value);
+            if (keys.isSameKey(keys$1, detail.value)) {
+                onSelectionChange(detail);
+            }
+            else if (keys$1.keys && keys$1.keys.size > 0) {
+                onSelectionChange({ ...detail, value: keys$1 });
+            }
+        }
+    }, [onSelectionChange, data]);
+    const customItemRenderer = (context) => {
+        const itemKey = context.listItemContext.metadata.key;
+        const options = data && onToggle ? { expanded: keys.containsKey(data.expanded, itemKey), onToggle } : undefined;
+        const itemContext = createHierarchicalContext(context.listItemContext, options);
+        if (itemContext.leaf) {
+            return context.defaultListItem(itemContext, { itemDepth: itemContext.depth + 1 });
+        }
+        else {
+            return (jsxRuntime.jsx(GroupLoadingIndicator.ListGroupHeader, { ariaDescribedBy: stableDescIdRef.current, itemKey: itemContext.metadata.key, itemIndex: itemContext.index, itemDepth: itemContext.depth, isFocused: context.isFocused, isFocusRingVisible: context.isFocusRingVisible, isActive: context.isActive, isGridlineVisible: false, isExpandable: true, expandedKeys: data == null ? emptyKeys : data.expanded, onToggle: onToggle, children: children(itemContext) }, itemContext.metadata.key));
+        }
+    };
+    return (jsxRuntime.jsxs(preact.Fragment, { children: [jsxRuntime.jsx(List.List, { data: data, role: "treegrid", loadingIndicator: jsxRuntime.jsx(GroupLoadingIndicator.GroupLoadingIndicator, {}), onSelectionChange: handleSelectionChange, customItemRenderer: customItemRenderer, onPersistCurrentItem: handleOnPersistCurrentItem, ...props, ...expandCollapseProps, children: (context) => {
+                    return children(context);
+                } }), onToggle && (jsxRuntime.jsxs(preact.Fragment, { children: [jsxRuntime.jsx(LiveRegion.LiveRegion, { children: statusText }), jsxRuntime.jsx("span", { id: stableDescIdRef.current, children: jsxRuntime.jsx(HiddenAccessible.HiddenAccessible, { children: translations.expandableList_expandCollapseInstructionText() }) })] }))] }));
+}
+const emptyKeys = { all: false, keys: new Set() };
+const Expander = compat.memo((props) => {
+    const classes = classNames.classNames(['oj-listview-expander']);
+    const actionHandler = () => {
+        props.onToggle({ value: props.itemKey });
+    };
+    return (jsxRuntime.jsx("span", { class: classes, role: "presentation", children: jsxRuntime.jsx(Button.Button, { onAction: actionHandler, variant: "ghost", startIcon: props.expanded ? jsxRuntime.jsx(ChevronDown.SvgChevronDown, { size: "6x" }) : jsxRuntime.jsx(CollapseIcon.CollapseIcon, { size: "6x" }) }) }));
+}, (prev, next) => {
+    return (prev.itemKey === next.itemKey &&
+        prev.expanded === next.expanded &&
+        prev.onToggle === next.onToggle);
+});
+
+exports.ExpandableList = ExpandableList;
+//# sourceMappingURL=ExpandableList-eb37ee5c.js.map