@oracle/oraclejet-preact 18.1.0 → 18.1.2

package/es/DrawerPopup-dd60ef68.js

@@ -0,0 +1,381 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { useState, useRef, useMemo, useCallback, useEffect } from 'preact/hooks';
+import { forwardRef } from 'preact/compat';
+import { m as mergeRefs } from './refUtils-b9d8d91a.js';
+import { L as Layer } from './Layer-d4aca92e.js';
+import './LayerHost-f7ef254c.js';
+import { M as Modal } from './Modal-7efd2f81.js';
+import { F as FocusTrap } from './FocusTrap-9e80c124.js';
+import { g as getActiveElement, e as focusOnElementOrNearestAncestor, f as focusWithin, b as focusOn, d as getAutofocusFocusables } from './tabbableUtils-6ceb767f.js';
+import { n as normalizePosition } from './positionUtils-f26caad9.js';
+import { g as getClientHints } from './clientHints-f850225e.js';
+import { u as useOutsideClick } from './useOutsideClick-866db9b2.js';
+import { u as useAnimation } from './useAnimation-a5eb7604.js';
+import { u as useUser } from './useUser-6a7f6df3.js';
+import { u as useTestId } from './useTestId-8b32167f.js';
+import { u as useSwipe } from './useSwipe-b5c1b9ad.js';
+import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
+import { c as colorInterpolations } from './colors-170180bf.js';
+import { m as mergeInterpolations } from './mergeInterpolations-e2db2a66.js';
+import { DrawerPopupRedwoodTheme } from './UNSAFE_DrawerPopup/themes/redwood/DrawerPopupTheme.js';
+
+// Constants
+const displayModefullWidthThreshold = 600;
+const zero = '0px';
+const duration = 250;
+const getElementHeight = (element) => {
+    return Math.round(element.offsetHeight);
+};
+const getElementWidth = (element) => {
+    return Math.round(element.getBoundingClientRect().width);
+};
+/**
+ * A drawer popup adds a single slide-in side content alongside some primary content to an application window.
+ *
+ * This drawer always overlays the page and can be placed at the 'start', 'end' or 'bottom' edge.
+ */
+const DrawerPopup = forwardRef(({ children, isOpen = false, autoFocusRef, placement = 'start', modality = 'modal', onClose, onTransitionEnd, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, testId, ...props }, ref) => {
+    // Initialize states
+    const [status, setStatus] = useState(isOpen ? 'initial' : 'unmounted');
+    const [visibility, setVisibility] = useState('hidden');
+    const [isOutsideClickDisabled, setIsOutsideClickDisabled] = useState(!isOpen);
+    const [displayModeHorizontal, setDisplayModeHorizontal] = useState('overlay');
+    const prevStatusRef = useRef('unmounted');
+    const rootRef = useRef(null);
+    const launcherRef = useRef(null);
+    const mergedRef = useMemo(() => mergeRefs(rootRef, ref), [rootRef, ref]);
+    const isBottomPlacement = placement === 'bottom';
+    const shouldReturnFocus = useRef(false);
+    // Animation config
+    const animationStates = {
+        opening: () => {
+            if (isBottomPlacement) {
+                return {
+                    from: {
+                        translateY: getTranslateY()
+                    },
+                    to: {
+                        translateY: zero
+                    },
+                    options: {
+                        duration: duration
+                    }
+                };
+            }
+            else {
+                return {
+                    from: {
+                        translateX: getTranslateX()
+                    },
+                    to: {
+                        translateX: zero
+                    },
+                    options: {
+                        duration: duration
+                    }
+                };
+            }
+        },
+        closing: () => {
+            if (isBottomPlacement) {
+                return {
+                    from: {
+                        translateY: zero
+                    },
+                    to: {
+                        translateY: getTranslateY()
+                    },
+                    options: {
+                        duration: duration
+                    }
+                };
+            }
+            else {
+                return {
+                    from: {
+                        translateX: zero
+                    },
+                    to: {
+                        translateX: getTranslateX()
+                    },
+                    options: {
+                        duration: duration
+                    }
+                };
+            }
+        }
+    };
+    // testId support
+    const testIdProps = useTestId(testId);
+    // Normalizing position
+    const { direction } = useUser();
+    const getNormalizedPlacement = () => {
+        return normalizePosition(placement, direction);
+    };
+    const getTranslateX = () => {
+        return `${getNormalizedPlacement() === 'right' ? '' : '-'}${getElementWidth(rootRef.current)}px`;
+    };
+    const getTranslateY = () => {
+        return `${getElementHeight(rootRef.current)}px`;
+    };
+    const setInitialFocus = () => {
+        // Set focus to the first match:
+        // 1. First element inside the drawer matching [autofocus]
+        const autofocusItems = getAutofocusFocusables(rootRef.current);
+        if (autofocusItems.length > 0) {
+            focusOn(autofocusItems[0]);
+            return;
+        }
+        // 2. Tabbable element inside the content element
+        // 3. The drawer itself
+        focusWithin(rootRef.current);
+    };
+    const returnFocusToLauncher = () => {
+        if (shouldReturnFocus.current) {
+            focusOnElementOrNearestAncestor(launcherRef.current);
+            shouldReturnFocus.current = false;
+        }
+    };
+    // Remove style attribute left on the element by the Animation util
+    const removeAnimationInlineStyles = useCallback(() => {
+        rootRef.current?.style?.removeProperty('transform');
+    }, []);
+    // Animation
+    const { nodeRef } = useAnimation(status, {
+        animationStates,
+        isAnimatedOnMount: true,
+        onAnimationEnd: () => {
+            if (status === 'opening') {
+                removeAnimationInlineStyles();
+                setInitialFocus();
+                onTransitionEnd?.(true);
+            }
+            else if (!isOpen) {
+                shouldReturnFocus.current =
+                    rootRef.current?.contains(getActiveElement()) || false;
+                nodeRef(null);
+                setVisibility('hidden');
+                setStatus('unmounted');
+                onTransitionEnd?.(false);
+            }
+        }
+    });
+    useEffect(() => {
+        // 1. Ignore status update on initial render
+        if (status === 'unmounted' && !isOpen && status !== prevStatusRef.current) {
+            returnFocusToLauncher();
+        }
+        // 2. Mount visually hidden component
+        // Component gets mounted, but will be visually hidden to avoid flickering
+        // Flickering happens because it gets rendered before animation hook repositions
+        // it in next render cycle
+        else if (status === 'unmounted' && isOpen) {
+            setStatus('initial');
+        }
+        // 3. Setup animation
+        // Component has been mounted.
+        // We will kick out animation as node is already present in DOM.
+        // To avoid flickering, we still keep it visually hidden until the next render cycle.
+        else if (status === 'initial' && isOpen) {
+            nodeRef(rootRef.current);
+            setIsOutsideClickDisabled(false);
+            setStatus('opening');
+        }
+        // 3. Unhide component. It becomes visible.
+        else if (status === 'opening' && isOpen) {
+            setVisibility('visible');
+        }
+        // 4. Closing
+        else if (!isOpen && status !== 'unmounted') {
+            setIsOutsideClickDisabled(true);
+            setStatus('closing');
+        }
+        return () => {
+            // remember the previous status
+            prevStatusRef.current = status;
+        };
+    }, [isOpen, status, nodeRef]);
+    // Destroy case handler
+    useEffect(() => {
+        return () => {
+            // eslint-disable-next-line react-hooks/exhaustive-deps
+            if (rootRef.current?.contains(getActiveElement()) || false) {
+                // In destroy case ModalManager is blocking returning of the focus.
+                // We need to reschedule it to workaround that
+                setTimeout(() => {
+                    focusOnElementOrNearestAncestor(launcherRef.current);
+                }, 0);
+            }
+        };
+    }, []);
+    // Launcher handler
+    useEffect(() => {
+        if (status === 'opening') {
+            // Remember launcher
+            launcherRef.current = getActiveElement();
+            // Register F6 key handler. It is modeless only feature.
+            if (modality === 'modeless') {
+                launcherRef.current?.addEventListener('keydown', launcherKeyDownCallback);
+            }
+        }
+        if (status === 'closing' && modality === 'modeless') {
+            return () => {
+                // Deregister F6 key handler
+                launcherRef.current?.removeEventListener('keydown', launcherKeyDownCallback);
+            };
+        }
+        return;
+    }, [modality, status]);
+    const launcherKeyDownCallback = (event) => {
+        // Moves focus from launcher (must have focus) back to the Drawer
+        if (launcherRef.current === getActiveElement() && event.code === 'F6') {
+            // Prevent default F6 handlers.
+            // F6 is a standard Chrome address bar shortcut on Windows.
+            event.preventDefault();
+            event.stopPropagation();
+            // Focus on first tabbable in a container or container itself if there is none
+            focusWithin(rootRef.current);
+        }
+    };
+    const handleKeyDown = useCallback((event) => {
+        const launcherEl = launcherRef.current;
+        switch (event.code) {
+            case 'Escape': {
+                onClose?.({ reason: 'escapeKey' });
+                break;
+            }
+            case 'F6':
+                if (modality === 'modeless') {
+                    // Prevent default F6 handlers.
+                    // F6 is a standard Chrome address bar shortcut on Windows.
+                    event.preventDefault();
+                    event.stopPropagation();
+                    // Focus launcher
+                    if (launcherEl) {
+                        focusOn(launcherEl);
+                    }
+                    break;
+                }
+        }
+    }, [onClose, modality]);
+    // OutsideClick handler
+    const handleOutsideClick = useCallback(() => {
+        // Trigger onClose event with outside click detail
+        onClose?.({ reason: 'outsideClick' });
+    }, [onClose]);
+    const insideRefs = [rootRef];
+    // launcher should be considered an "inside" element
+    if (launcherRef.current && launcherRef.current !== document.body) {
+        insideRefs.push(launcherRef);
+    }
+    useOutsideClick({
+        isDisabled: isOutsideClickDisabled,
+        ref: insideRefs,
+        handler: handleOutsideClick
+    });
+    // Drawer placement
+    const getDrawerPlacement = () => {
+        if (isBottomPlacement) {
+            return placement;
+        }
+        else {
+            if (direction === 'rtl') {
+                return placement === 'start' ? 'right' : 'left';
+            }
+            else {
+                return placement === 'start' ? 'left' : 'right';
+            }
+        }
+    };
+    const clientHints = getClientHints();
+    const getViewportWidth = useCallback(() => {
+        if (clientHints.platform === 'ios') {
+            // On ios window.innerWidth is not recommended way of measuring the viewport
+            return document.documentElement.clientWidth;
+        }
+        return window.innerWidth;
+    }, [clientHints.platform]);
+    // Window resize handler
+    // Handles display mode: Overlay <> Full overlay (full width side drawers)
+    const handleResize = useCallback(() => {
+        const viewportWidth = getViewportWidth();
+        if (displayModeHorizontal === 'overlay' && viewportWidth < displayModefullWidthThreshold) {
+            setDisplayModeHorizontal('fullOverlay');
+        }
+        if (displayModeHorizontal === 'fullOverlay' &&
+            viewportWidth > displayModefullWidthThreshold) {
+            setDisplayModeHorizontal('overlay');
+        }
+    }, [getViewportWidth, displayModeHorizontal]);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (root && status === 'opening') {
+            const resizeObserver = new ResizeObserver(() => {
+                handleResize();
+            });
+            resizeObserver.observe(document.body);
+            return () => {
+                resizeObserver.unobserve(document.body);
+            };
+        }
+        return undefined;
+    }, [status, handleResize]);
+    const dispatchSwipeOnClose = useCallback(() => {
+        onClose?.({ reason: 'swipe' });
+    }, [onClose]);
+    // OutsideClick handler
+    const swipeHandler = useCallback((event) => {
+        const swipeDir = event.direction;
+        // LTR
+        if (direction === 'ltr') {
+            if ((placement === 'start' && swipeDir === 'left') ||
+                (placement === 'end' && swipeDir === 'right')) {
+                dispatchSwipeOnClose();
+            }
+        }
+        // RTL
+        if (direction === 'rtl') {
+            if ((placement === 'start' && swipeDir === 'right') ||
+                (placement === 'end' && swipeDir === 'left')) {
+                dispatchSwipeOnClose();
+            }
+        }
+        // Bottom
+        if (placement === 'bottom' && swipeDir === 'down') {
+            dispatchSwipeOnClose();
+        }
+    }, [direction, placement, dispatchSwipeOnClose]);
+    const swipeOptions = {
+        threshold: 50,
+        maximumTime: 750,
+        tolerance: 40
+    };
+    const { swipeProps } = useSwipe(swipeHandler, swipeOptions);
+    // Styles
+    const { classes } = useComponentTheme(DrawerPopupRedwoodTheme, {
+        placement: getDrawerPlacement(),
+        visibility,
+        displayModeHorizontal: ['start', 'end'].indexOf(placement) > -1 ? displayModeHorizontal : undefined
+    });
+    const interpolations = [...Object.values(colorInterpolations)];
+    const styleInterpolations = mergeInterpolations(interpolations);
+    const { ...styles } = styleInterpolations(props);
+    const renderDrawer = () => {
+        return (jsx(FocusTrap, { autoFocusRef: autoFocusRef, restoreFocusRef: false, children: jsx("div", { ref: mergedRef, className: classes, style: styles, tabIndex: -1, role: "dialog", onKeyDown: handleKeyDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...swipeProps, ...testIdProps, children: children }) }));
+    };
+    const isMounted = status !== 'unmounted';
+    if (isMounted) {
+        // Modal vs. modelss upper wrapper
+        if (modality === 'modal') {
+            return jsx(Modal, { isOpen: isMounted, children: renderDrawer() });
+        }
+        else {
+            return jsx(Layer, { children: renderDrawer() });
+        }
+    }
+    return null;
+});
+
+export { DrawerPopup as D };
+//# sourceMappingURL=DrawerPopup-dd60ef68.js.map

package/es/DrawerPopup-dd60ef68.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerPopup-dd60ef68.js","sources":["../../src/UNSAFE_DrawerPopup/DrawerPopup.tsx"],"sourcesContent":["import { JSX, RefObject } from 'preact';\nimport { useState, useRef, useEffect, useCallback, useMemo } from 'preact/hooks';\nimport { forwardRef, ForwardedRef } from 'preact/compat';\nimport { mergeRefs } from '../utils/PRIVATE_refUtils';\nimport { Layer } from '../UNSAFE_Layer';\nimport { Modal } from '../UNSAFE_Modal';\nimport { FocusTrap } from '../UNSAFE_FocusTrap';\nimport {\n  getAutofocusFocusables,\n  focusOn,\n  focusWithin,\n  getActiveElement,\n  focusOnElementOrNearestAncestor\n} from '../utils/PRIVATE_tabbableUtils';\nimport { normalizePosition } from '../utils/PRIVATE_floatingUtils';\nimport { RtlSide } from '../UNSAFE_Floating';\nimport { getClientHints } from '../utils/PRIVATE_clientHints';\n\n// Hooks\nimport { useOutsideClick } from '../hooks/UNSAFE_useOutsideClick';\nimport { useAnimation } from '../hooks/UNSAFE_useAnimation';\nimport { useUser } from '../hooks/UNSAFE_useUser';\nimport { useTestId, TestIdProps } from '../hooks/UNSAFE_useTestId';\nimport { useSwipe } from '../hooks/UNSAFE_useSwipe';\n\n// Style imports\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { DrawerPopupVariantOptions } from './themes/DrawerPopupStyles.css';\nimport { colorInterpolations, ColorProps } from '../utils/UNSAFE_interpolations/colors';\nimport { mergeInterpolations } from '../utils/UNSAFE_mergeInterpolations';\nimport { DrawerPopupRedwoodTheme } from './themes/redwood/DrawerPopupTheme';\n\n// Types\ntype IntrinsicProps = Pick<JSX.HTMLAttributes<HTMLDivElement>, 'children'>;\ntype Placement = 'start' | 'end' | 'bottom';\ntype NormalizedPlacement = 'left' | 'right' | 'bottom';\ntype Status = 'unmounted' | 'initial' | 'opening' | 'closing';\ntype VisibilityStatus = 'hidden' | 'visible';\ntype DisplayModeHorizontal = 'overlay' | 'fullOverlay';\ntype OnCloseDetail = {\n  reason: 'outsideClick' | 'escapeKey' | 'swipe';\n};\n\ntype Props = IntrinsicProps &\n  Pick<ColorProps, 'backgroundColor'> & {\n    /**\n     * Specifies whether the Drawer is open.\n     */\n    isOpen: boolean;\n    /**\n     * Specifies at what edge the Drawer opens.\n     * Supported values are:\n     * <p><code>start</code>, <code>end</code>, <code>bottom</code></p>\n     * Default is <code>start</code>.\n     */\n    placement?: Placement;\n    /**\n     * Specifies modality of the Darwer.\n     * Supported values are:\n     * <p><code>modal</code>, <code>modeless</code></p>\n     * Default is <code>modal</code>.\n     */\n    modality?: 'modal' | 'modeless';\n    /**\n     * Specifies callback triggered when a user tries to close a Drawer through UI interaction.\n     * The parent should listen to this event and close the Drawer. If the parent fails to remove\n     * the Popup, then no change will be done in the UI by the component.\n     * Supported detail values are:\n     * <p><code>outsideClick</code>, <code>escapeKey</code></p>, <code>swipe</code>\n     */\n    onClose?: (detail: OnCloseDetail) => void;\n    /**\n     * Specifies callback triggered after the animation ends.\n     */\n    onTransitionEnd?: (value: boolean) => void;\n    /**\n     * Optional ref for an element to focus on when component mounts.\n     */\n    autoFocusRef?: RefObject<HTMLElement>;\n    /**\n     * Specifies guidance for screen readers.\n     */\n    'aria-label'?: string;\n    /**\n     * Specifies ID of an element used for guidance for screen readers.\n     */\n    'aria-labelledby'?: string;\n    /**\n     * Specifies ID of an element (or space separated IDs of multiple elements) that\n     * describes the Drawer.\n     */\n    'aria-describedby'?: string;\n  } & TestIdProps;\n\n// Constants\nconst displayModefullWidthThreshold = 600;\nconst zero = '0px';\nconst duration = 250;\n\nconst getElementHeight = (element: HTMLDivElement): number => {\n  return Math.round(element.offsetHeight);\n};\n\nconst getElementWidth = (element: HTMLDivElement): number => {\n  return Math.round(element.getBoundingClientRect().width);\n};\n\n/**\n * A drawer popup adds a single slide-in side content alongside some primary content to an application window.\n *\n * This drawer always overlays the page and can be placed at the 'start', 'end' or 'bottom' edge.\n */\nexport const DrawerPopup = forwardRef(\n  (\n    {\n      children,\n      isOpen = false,\n      autoFocusRef,\n      placement = 'start',\n      modality = 'modal',\n      onClose,\n      onTransitionEnd,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      'aria-describedby': ariaDescribedBy,\n      testId,\n      ...props\n    }: Props,\n    ref: ForwardedRef<HTMLElement | null>\n  ) => {\n    // Initialize states\n    const [status, setStatus] = useState<Status>(isOpen ? 'initial' : 'unmounted');\n    const [visibility, setVisibility] = useState<VisibilityStatus>('hidden');\n    const [isOutsideClickDisabled, setIsOutsideClickDisabled] = useState<boolean>(!isOpen);\n    const [displayModeHorizontal, setDisplayModeHorizontal] =\n      useState<DisplayModeHorizontal>('overlay');\n\n    const prevStatusRef = useRef<Status>('unmounted');\n\n    const rootRef = useRef<HTMLDivElement>(null);\n    const launcherRef = useRef<HTMLElement | null>(null);\n\n    const mergedRef = useMemo(() => mergeRefs(rootRef, ref), [rootRef, ref]);\n\n    const isBottomPlacement = placement === 'bottom';\n    const shouldReturnFocus = useRef<boolean>(false);\n\n    // Animation config\n    const animationStates = {\n      opening: () => {\n        if (isBottomPlacement) {\n          return {\n            from: {\n              translateY: getTranslateY()\n            },\n            to: {\n              translateY: zero\n            },\n            options: {\n              duration: duration\n            }\n          };\n        } else {\n          return {\n            from: {\n              translateX: getTranslateX()\n            },\n            to: {\n              translateX: zero\n            },\n            options: {\n              duration: duration\n            }\n          };\n        }\n      },\n      closing: () => {\n        if (isBottomPlacement) {\n          return {\n            from: {\n              translateY: zero\n            },\n            to: {\n              translateY: getTranslateY()\n            },\n            options: {\n              duration: duration\n            }\n          };\n        } else {\n          return {\n            from: {\n              translateX: zero\n            },\n            to: {\n              translateX: getTranslateX()\n            },\n            options: {\n              duration: duration\n            }\n          };\n        }\n      }\n    };\n\n    // testId support\n    const testIdProps = useTestId(testId);\n\n    // Normalizing position\n    const { direction } = useUser();\n    const getNormalizedPlacement = (): RtlSide => {\n      return normalizePosition(placement, direction);\n    };\n\n    const getTranslateX = (): string => {\n      return `${getNormalizedPlacement() === 'right' ? '' : '-'}${getElementWidth(\n        rootRef.current as HTMLDivElement\n      )}px`;\n    };\n\n    const getTranslateY = (): string => {\n      return `${getElementHeight(rootRef.current as HTMLDivElement)}px`;\n    };\n\n    const setInitialFocus = () => {\n      // Set focus to the first match:\n      // 1. First element inside the drawer matching [autofocus]\n      const autofocusItems: HTMLElement[] = getAutofocusFocusables(rootRef.current as HTMLElement);\n      if (autofocusItems.length > 0) {\n        focusOn(autofocusItems[0]);\n        return;\n      }\n      // 2. Tabbable element inside the content element\n      // 3. The drawer itself\n      focusWithin(rootRef.current as HTMLElement);\n    };\n\n    const returnFocusToLauncher = (): void => {\n      if (shouldReturnFocus.current) {\n        focusOnElementOrNearestAncestor(launcherRef.current as HTMLElement);\n        shouldReturnFocus.current = false;\n      }\n    };\n\n    // Remove style attribute left on the element by the Animation util\n    const removeAnimationInlineStyles = useCallback(() => {\n      rootRef.current?.style?.removeProperty('transform');\n    }, []);\n\n    // Animation\n    const { nodeRef } = useAnimation<Status, HTMLDivElement>(status, {\n      animationStates,\n      isAnimatedOnMount: true,\n      onAnimationEnd: () => {\n        if (status === 'opening') {\n          removeAnimationInlineStyles();\n          setInitialFocus();\n          onTransitionEnd?.(true);\n        } else if (!isOpen) {\n          shouldReturnFocus.current =\n            rootRef.current?.contains(getActiveElement() as HTMLElement) || false;\n          nodeRef(null);\n          setVisibility('hidden');\n          setStatus('unmounted');\n          onTransitionEnd?.(false);\n        }\n      }\n    });\n\n    useEffect(() => {\n      // 1. Ignore status update on initial render\n      if (status === 'unmounted' && !isOpen && status !== prevStatusRef.current) {\n        returnFocusToLauncher();\n      }\n\n      // 2. Mount visually hidden component\n      // Component gets mounted, but will be visually hidden to avoid flickering\n      // Flickering happens because it gets rendered before animation hook repositions\n      // it in next render cycle\n      else if (status === 'unmounted' && isOpen) {\n        setStatus('initial');\n      }\n\n      // 3. Setup animation\n      // Component has been mounted.\n      // We will kick out animation as node is already present in DOM.\n      // To avoid flickering, we still keep it visually hidden until the next render cycle.\n      else if (status === 'initial' && isOpen) {\n        nodeRef(rootRef.current);\n        setIsOutsideClickDisabled(false);\n        setStatus('opening');\n      }\n\n      // 3. Unhide component. It becomes visible.\n      else if (status === 'opening' && isOpen) {\n        setVisibility('visible');\n      }\n\n      // 4. Closing\n      else if (!isOpen && status !== 'unmounted') {\n        setIsOutsideClickDisabled(true);\n        setStatus('closing');\n      }\n\n      return () => {\n        // remember the previous status\n        prevStatusRef.current = status;\n      };\n    }, [isOpen, status, nodeRef]);\n\n    // Destroy case handler\n    useEffect(() => {\n      return () => {\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n        if (rootRef.current?.contains(getActiveElement() as HTMLElement) || false) {\n          // In destroy case ModalManager is blocking returning of the focus.\n          // We need to reschedule it to workaround that\n          setTimeout(() => {\n            focusOnElementOrNearestAncestor(launcherRef.current as HTMLElement);\n          }, 0);\n        }\n      };\n    }, []);\n\n    // Launcher handler\n    useEffect(() => {\n      if (status === 'opening') {\n        // Remember launcher\n        launcherRef.current = getActiveElement() as HTMLElement;\n\n        // Register F6 key handler. It is modeless only feature.\n        if (modality === 'modeless') {\n          launcherRef.current?.addEventListener('keydown', launcherKeyDownCallback);\n        }\n      }\n      if (status === 'closing' && modality === 'modeless') {\n        return () => {\n          // Deregister F6 key handler\n          launcherRef.current?.removeEventListener('keydown', launcherKeyDownCallback);\n        };\n      }\n      return;\n    }, [modality, status]);\n\n    const launcherKeyDownCallback = (event: KeyboardEvent): void => {\n      // Moves focus from launcher (must have focus) back to the Drawer\n      if (launcherRef.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        // Focus on first tabbable in a container or container itself if there is none\n        focusWithin(rootRef.current as HTMLElement);\n      }\n    };\n\n    const handleKeyDown = useCallback(\n      (event: KeyboardEvent) => {\n        const launcherEl = launcherRef.current;\n        switch (event.code) {\n          case 'Escape': {\n            onClose?.({ reason: 'escapeKey' });\n            break;\n          }\n          case 'F6':\n            if (modality === 'modeless') {\n              // Prevent default F6 handlers.\n              // F6 is a standard Chrome address bar shortcut on Windows.\n              event.preventDefault();\n              event.stopPropagation();\n              // Focus launcher\n              if (launcherEl) {\n                focusOn(launcherEl);\n              }\n              break;\n            }\n        }\n      },\n      [onClose, modality]\n    );\n\n    // OutsideClick handler\n    const handleOutsideClick = useCallback(() => {\n      // Trigger onClose event with outside click detail\n      onClose?.({ reason: 'outsideClick' });\n    }, [onClose]);\n\n    const insideRefs: RefObject<HTMLElement>[] = [rootRef];\n    // launcher should be considered an \"inside\" element\n    if (launcherRef.current && launcherRef.current !== document.body) {\n      insideRefs.push(launcherRef);\n    }\n\n    useOutsideClick({\n      isDisabled: isOutsideClickDisabled,\n      ref: insideRefs,\n      handler: handleOutsideClick\n    });\n\n    // Drawer placement\n    const getDrawerPlacement = (): NormalizedPlacement => {\n      if (isBottomPlacement) {\n        return placement;\n      } else {\n        if (direction === 'rtl') {\n          return placement === 'start' ? 'right' : 'left';\n        } else {\n          return placement === 'start' ? 'left' : 'right';\n        }\n      }\n    };\n\n    const clientHints = getClientHints();\n\n    const getViewportWidth = useCallback((): number => {\n      if (clientHints.platform === 'ios') {\n        // On ios window.innerWidth is not recommended way of measuring the viewport\n        return document.documentElement.clientWidth;\n      }\n      return window.innerWidth;\n    }, [clientHints.platform]);\n\n    // Window resize handler\n    // Handles display mode: Overlay <> Full overlay (full width side drawers)\n    const handleResize = useCallback(() => {\n      const viewportWidth = getViewportWidth();\n      if (displayModeHorizontal === 'overlay' && viewportWidth < displayModefullWidthThreshold) {\n        setDisplayModeHorizontal('fullOverlay');\n      }\n      if (\n        displayModeHorizontal === 'fullOverlay' &&\n        viewportWidth > displayModefullWidthThreshold\n      ) {\n        setDisplayModeHorizontal('overlay');\n      }\n    }, [getViewportWidth, displayModeHorizontal]);\n\n    useEffect(() => {\n      const root = rootRef.current;\n      if (root && status === 'opening') {\n        const resizeObserver = new ResizeObserver(() => {\n          handleResize();\n        });\n        resizeObserver.observe(document.body);\n        return () => {\n          resizeObserver.unobserve(document.body);\n        };\n      }\n      return undefined;\n    }, [status, handleResize]);\n\n    const dispatchSwipeOnClose = useCallback(() => {\n      onClose?.({ reason: 'swipe' });\n    }, [onClose]);\n\n    // OutsideClick handler\n    const swipeHandler = useCallback(\n      (event: any): void => {\n        const swipeDir = event.direction;\n        // LTR\n        if (direction === 'ltr') {\n          if (\n            (placement === 'start' && swipeDir === 'left') ||\n            (placement === 'end' && swipeDir === 'right')\n          ) {\n            dispatchSwipeOnClose();\n          }\n        }\n        // RTL\n        if (direction === 'rtl') {\n          if (\n            (placement === 'start' && swipeDir === 'right') ||\n            (placement === 'end' && swipeDir === 'left')\n          ) {\n            dispatchSwipeOnClose();\n          }\n        }\n        // Bottom\n        if (placement === 'bottom' && swipeDir === 'down') {\n          dispatchSwipeOnClose();\n        }\n      },\n      [direction, placement, dispatchSwipeOnClose]\n    );\n\n    const swipeOptions = {\n      threshold: 50,\n      maximumTime: 750,\n      tolerance: 40\n    };\n    const { swipeProps } = useSwipe(swipeHandler, swipeOptions);\n\n    // Styles\n    const { classes } = useComponentTheme<DrawerPopupVariantOptions>(DrawerPopupRedwoodTheme, {\n      placement: getDrawerPlacement(),\n      visibility,\n      displayModeHorizontal:\n        ['start', 'end'].indexOf(placement) > -1 ? displayModeHorizontal : undefined\n    });\n\n    const interpolations = [...Object.values(colorInterpolations)];\n    const styleInterpolations = mergeInterpolations<ColorProps>(interpolations);\n    const { ...styles } = styleInterpolations(props);\n\n    const renderDrawer = () => {\n      return (\n        <FocusTrap autoFocusRef={autoFocusRef} restoreFocusRef={false}>\n          <div\n            ref={mergedRef}\n            className={classes}\n            style={styles}\n            tabIndex={-1}\n            role=\"dialog\"\n            onKeyDown={handleKeyDown}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            aria-describedby={ariaDescribedBy}\n            {...swipeProps}\n            {...testIdProps}>\n            {children}\n          </div>\n        </FocusTrap>\n      );\n    };\n\n    const isMounted = status !== 'unmounted';\n    if (isMounted) {\n      // Modal vs. modelss upper wrapper\n      if (modality === 'modal') {\n        return <Modal isOpen={isMounted}>{renderDrawer()}</Modal>;\n      } else {\n        return <Layer>{renderDrawer()}</Layer>;\n      }\n    }\n\n    return null;\n  }\n);\n"],"names":["_jsx"],"mappings":"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"}

package/es/Dropdown-ab7ecd4b.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-94a06a14.js';
+import { L as Layer } from './Layer-d4aca92e.js';
+import 'preact/compat';
+import './LayerHost-f7ef254c.js';
+import { K as KEYS } from './keyboardUtils-38854729.js';
+import { f as focusWithin } from './tabbableUtils-6ceb767f.js';
+import { u as usePopupAnimation } from './usePopupAnimation-93950404.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-ab7ecd4b.js.map

package/es/Dropdown-ab7ecd4b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown-ab7ecd4b.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/EnvironmentProvider-1580c879.js

@@ -0,0 +1,58 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { E as EnvironmentContext, D as DefaultEnvironment } from './LayerHost-f7ef254c.js';
+import { useMemo, useContext } from 'preact/hooks';
+import { L as LayerManager } from './LayerManager-4ad387dc.js';
+
+// Custom merge function
+function mergeEnvironment(env1, env2) {
+    const userValue = Object.assign({}, env1.user, env2?.user);
+    const themeValue = Object.assign({}, env1.theme, env2?.theme);
+    // Merge translation values - one level merge
+    const targetTranslations = Object.assign({}, env1.translations);
+    const sourceTranslations = env2?.translations || {};
+    Object.keys(sourceTranslations).forEach((key) => {
+        let newVal = sourceTranslations[key];
+        if (targetTranslations[key]) {
+            // merge is needed
+            newVal = Object.assign({}, targetTranslations[key], newVal);
+        }
+        targetTranslations[key] = newVal;
+    });
+    return {
+        user: userValue,
+        theme: themeValue,
+        translations: targetTranslations,
+        colorScheme: env2?.colorScheme ?? env1.colorScheme,
+        scale: env2?.scale ?? env1.scale,
+        currentBgColor: env2?.currentBgColor ?? env1.currentBgColor,
+        mode: env2?.mode ?? env1.mode,
+        density: env2?.density ?? env1.density
+    };
+}
+/**
+ * The RootEnvironmentProvider component bootstraps essential services and
+ * must be placed at the root of any application using components from '@oracle/oraclejet-preact'.
+ * Minimally, the application must load the appropriate translation bundle for the user's locale
+ * and set it on the RootEnvironmentProvider.
+ */
+function RootEnvironmentProvider({ children, environment }) {
+    const mergedEnvironment = useMemo(() => mergeEnvironment(DefaultEnvironment, environment), [environment]);
+    return (jsx(EnvironmentContext.Provider, { value: mergedEnvironment, children: jsx(LayerManager, { children: children }) }));
+}
+/**
+ * The EnvironmentProvider is a component that should be used by the application when there is a need to overwrite
+ * environment values for a subtree.
+ * The component receives an Environment object that will be merged into the values provided by the nearest ancestor Provider.
+ * The new environment will be passed to the component's children.
+ * Note that some environment values cannot be overwritten. See the description of the Environment type for the list of values
+ * that can be replaced.
+ */
+function EnvironmentProvider({ children, environment }) {
+    const consumerEnv = useContext(EnvironmentContext);
+    const mergedEnvironment = useMemo(() => mergeEnvironment(consumerEnv, environment), [consumerEnv, environment]);
+    return (jsx(EnvironmentContext.Provider, { value: mergedEnvironment, children: children }));
+}
+
+export { EnvironmentProvider as E, RootEnvironmentProvider as R };
+//# sourceMappingURL=EnvironmentProvider-1580c879.js.map

package/es/EnvironmentProvider-1580c879.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentProvider-1580c879.js","sources":["../../src/UNSAFE_Environment/EnvironmentProvider.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 {\n  CompleteEnvironmentType,\n  DefaultEnvironment,\n  Environment,\n  EnvironmentContext,\n  RootEnvironment\n} from './EnvironmentContext';\nimport { useContext, useMemo } from 'preact/hooks';\n\nimport { ComponentChildren } from 'preact';\nimport { LayerManager } from '../UNSAFE_Layer/LayerManager';\n\n// EnvironmentProvider properties\nexport declare type ProviderProperties<Env extends RootEnvironment | Environment> = {\n  environment?: Env;\n  children?: ComponentChildren;\n};\n\n// Custom merge function\nfunction mergeEnvironment(\n  env1: CompleteEnvironmentType,\n  env2: Partial<RootEnvironment> | undefined\n) {\n  const userValue = Object.assign({}, env1.user, env2?.user);\n  const themeValue = Object.assign({}, env1.theme, env2?.theme);\n\n  // Merge translation values - one level merge\n  const targetTranslations = Object.assign({}, env1.translations);\n  const sourceTranslations = env2?.translations || {};\n  Object.keys(sourceTranslations).forEach((key) => {\n    let newVal = sourceTranslations[key];\n    if (targetTranslations[key]) {\n      // merge is needed\n      newVal = Object.assign({}, targetTranslations[key], newVal);\n    }\n    targetTranslations[key] = newVal;\n  });\n\n  return {\n    user: userValue,\n    theme: themeValue,\n    translations: targetTranslations,\n    colorScheme: env2?.colorScheme ?? env1.colorScheme,\n    scale: env2?.scale ?? env1.scale,\n    currentBgColor: env2?.currentBgColor ?? env1.currentBgColor,\n    mode: env2?.mode ?? env1.mode,\n    density: env2?.density ?? env1.density\n  };\n}\n\n/**\n * The RootEnvironmentProvider component bootstraps essential services and\n * must be placed at the root of any application using components from '@oracle/oraclejet-preact'.\n * Minimally, the application must load the appropriate translation bundle for the user's locale\n * and set it on the RootEnvironmentProvider.\n */\nexport function RootEnvironmentProvider({\n  children,\n  environment\n}: ProviderProperties<RootEnvironment>) {\n  const mergedEnvironment = useMemo(\n    () => mergeEnvironment(DefaultEnvironment, environment),\n    [environment]\n  );\n  return (\n    <EnvironmentContext.Provider value={mergedEnvironment}>\n      <LayerManager>{children}</LayerManager>\n    </EnvironmentContext.Provider>\n  );\n}\n\n/**\n * The EnvironmentProvider is a component that should be used by the application when there is a need to overwrite\n * environment values for a subtree.\n * The component receives an Environment object that will be merged into the values provided by the nearest ancestor Provider.\n * The new environment will be passed to the component's children.\n * Note that some environment values cannot be overwritten. See the description of the Environment type for the list of values\n * that can be replaced.\n */\nexport function EnvironmentProvider({ children, environment }: ProviderProperties<Environment>) {\n  const consumerEnv = useContext(EnvironmentContext);\n  const mergedEnvironment = useMemo(\n    () => mergeEnvironment(consumerEnv, environment),\n    [consumerEnv, environment]\n  );\n\n  return (\n    <EnvironmentContext.Provider value={mergedEnvironment}>{children}</EnvironmentContext.Provider>\n  );\n}\n"],"names":["_jsx"],"mappings":";;;;;;AA0BA;AACA,SAAS,gBAAgB,CACvB,IAA6B,EAC7B,IAA0C,EAAA;AAE1C,IAAA,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AAC3D,IAAA,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;;AAG9D,IAAA,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;AAChE,IAAA,MAAM,kBAAkB,GAAG,IAAI,EAAE,YAAY,IAAI,EAAE,CAAC;IACpD,MAAM,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;AAC9C,QAAA,IAAI,MAAM,GAAG,kBAAkB,CAAC,GAAG,CAAC,CAAC;AACrC,QAAA,IAAI,kBAAkB,CAAC,GAAG,CAAC,EAAE;;AAE3B,YAAA,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,kBAAkB,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,CAAC;SAC7D;AACD,QAAA,kBAAkB,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;AACnC,KAAC,CAAC,CAAC;IAEH,OAAO;AACL,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,KAAK,EAAE,UAAU;AACjB,QAAA,YAAY,EAAE,kBAAkB;AAChC,QAAA,WAAW,EAAE,IAAI,EAAE,WAAW,IAAI,IAAI,CAAC,WAAW;AAClD,QAAA,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,IAAI,CAAC,KAAK;AAChC,QAAA,cAAc,EAAE,IAAI,EAAE,cAAc,IAAI,IAAI,CAAC,cAAc;AAC3D,QAAA,IAAI,EAAE,IAAI,EAAE,IAAI,IAAI,IAAI,CAAC,IAAI;AAC7B,QAAA,OAAO,EAAE,IAAI,EAAE,OAAO,IAAI,IAAI,CAAC,OAAO;KACvC,CAAC;AACJ,CAAC;AAED;;;;;AAKG;SACa,uBAAuB,CAAC,EACtC,QAAQ,EACR,WAAW,EACyB,EAAA;AACpC,IAAA,MAAM,iBAAiB,GAAG,OAAO,CAC/B,MAAM,gBAAgB,CAAC,kBAAkB,EAAE,WAAW,CAAC,EACvD,CAAC,WAAW,CAAC,CACd,CAAC;AACF,IAAA,QACEA,GAAC,CAAA,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,iBAAiB,EAAA,QAAA,EACnDA,IAAC,YAAY,EAAA,EAAA,QAAA,EAAE,QAAQ,EAAgB,CAAA,EAAA,CACX,EAC9B;AACJ,CAAC;AAED;;;;;;;AAOG;SACa,mBAAmB,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAmC,EAAA;AAC5F,IAAA,MAAM,WAAW,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACnD,MAAM,iBAAiB,GAAG,OAAO,CAC/B,MAAM,gBAAgB,CAAC,WAAW,EAAE,WAAW,CAAC,EAChD,CAAC,WAAW,EAAE,WAAW,CAAC,CAC3B,CAAC;AAEF,IAAA,QACEA,GAAA,CAAC,kBAAkB,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,iBAAiB,EAAA,QAAA,EAAG,QAAQ,EAAA,CAA+B,EAC/F;AACJ;;;;"}

package/es/ExpandableList-84f08709.js

@@ -5,17 +5,17 @@ import { useCallback, useState, useRef } from 'preact/hooks';
 import { memo } from 'preact/compat';
 import { c as classNames } from './classNames-4e12b00d.js';
 import { u as useId } from './useId-03dbfdf0.js';
-import { u as useTranslationBundle } from './useTranslationBundle-29a1abb3.js';
+import { u as useTranslationBundle } from './useTranslationBundle-0dff3ab2.js';
 import { c as containsKey, e as isSameKey } from './keys-49c92dbb.js';
 import { H as HiddenAccessible } from './HiddenAccessible-61197e7c.js';
 import { S as SvgChevronDown } from './ChevronDown-d86b96e5.js';
 import { C as CollapseIcon } from './CollapseIcon-43663109.js';
-import { L as LiveRegion } from './LiveRegion-7d6e9b93.js';
-import { u as useUser } from './useUser-9c8d0e57.js';
+import { L as LiveRegion } from './LiveRegion-d9f2bbdb.js';
+import { u as useUser } from './useUser-6a7f6df3.js';
 import { k as keyExtractor } from './collectionUtils-8a9d80a3.js';
 import { B as Button } from './Button-9737b653.js';
 import { G as GROUP_SELECTOR, a as GroupLoadingIndicator, L as ListGroupHeader } from './GroupLoadingIndicator-2a294121.js';
-import { e as excludeGroup, L as List } from './List-4e5ab994.js';
+import { e as excludeGroup, L as List } from './List-da0ce081.js';
 
 /**
  * @license