@oracle/oraclejet-preact 17.1.0 → 17.1.1

package/es/ListView-8eba90e8.js

@@ -2,7 +2,7 @@
 import { jsxs, Fragment, jsx } from 'preact/jsx-runtime';
 import { memo, forwardRef } from 'preact/compat';
 import { useRef, useCallback, useState, useEffect, useImperativeHandle, useLayoutEffect } from 'preact/hooks';
-import './LayerHost-7a2149f5.js';
+import './LayerHost-15b42a3e.js';
 import './DragAndDropStyles.styles.css';
 import { R as ReorderableContext } from './useReorderableContext-67ba58f7.js';
 import './ReorderableItemStyles.styles.css';
@@ -13,14 +13,14 @@ import { c as classNames } from './classNames-4e12b00d.js';
 import { styles } from './UNSAFE_ListView/themes/ListViewStyles.css.js';
 import { m as mergeProps } from './mergeProps-88ea8306.js';
 import { s as scrollToVisible, L as List } from './List-1d23e84f.js';
-import { M as Menu } from './Menu-e44a3e0b.js';
+import { M as Menu } from './Menu-b5deea24.js';
 import './MenuItem-be46866f.js';
 import 'preact';
 import './logger-c92f309c.js';
 import './TooltipContentStyles.styles.css';
 import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
 import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
-import './tooltipUtils-06c93436.js';
+import './tooltipUtils-1131b3ca.js';
 import './IconStyle.styles.css';
 import './SelectMenuGroupContext-b56cf5d4.js';
 import './UNSAFE_Separator/themes/SeparatorStyles.css.js';

package/es/LiveRegion-cb4f8a54.js

@@ -0,0 +1,39 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { useState, useCallback, useEffect } from 'preact/hooks';
+import './LiveRegionStyles.styles.css';
+import { u as useTestId } from './useTestId-3bc3958c.js';
+
+var offScreenStyle = 'LiveRegionStyles_offScreenStyle__1uvpdtw0';
+
+/**
+ * A helper component that renders an aria-live region
+ *
+ * TODO: Create a more centralized component that can handle aria-live region for
+ * the whole application and use context api to communicate
+ */
+function LiveRegion({ testId, atomic = 'false', children = '', timeout = 100, type = 'polite' }) {
+    const ariaLiveText = useLiveText(children, timeout);
+    const testIdProps = useTestId(testId);
+    return (jsx("span", { "aria-live": type, "aria-atomic": atomic, class: offScreenStyle, ...testIdProps, children: ariaLiveText }));
+}
+/**
+ * A custom hook for handling the aria-live region
+ *
+ * @param text The aria-live text to use
+ * @param timeout The timeout for setting the aria-live text async
+ * @returns The aria-live text
+ */
+function useLiveText(text, timeout) {
+    const [liveText, setLiveText] = useState('');
+    const updateText = useCallback(() => setLiveText(text), [text]);
+    const updateTextAsync = useCallback(() => setTimeout(updateText, timeout), [updateText, timeout]);
+    useEffect(() => {
+        const timeoutId = updateTextAsync();
+        return () => clearTimeout(timeoutId);
+    }, [updateTextAsync]);
+    return liveText;
+}
+
+export { LiveRegion as L };
+//# sourceMappingURL=LiveRegion-cb4f8a54.js.map

package/es/LiveRegion-cb4f8a54.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveRegion-cb4f8a54.js","sources":["../../src/UNSAFE_LiveRegion/LiveRegion.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'preact/hooks';\nimport { offScreenStyle } from './LiveRegionStyles.css';\nimport { TestIdProps, useTestId } from '#hooks/UNSAFE_useTestId';\n\ntype Props = TestIdProps & {\n  /**\n   * Whether this live region is atomic\n   */\n  atomic?: 'true' | 'false';\n\n  /**\n   * The text to be read out in the live region\n   */\n  children?: string;\n\n  /**\n   * Timeout for updating the text\n   */\n  timeout?: number;\n\n  /**\n   * The value for the aria-live attribute\n   */\n  type?: 'assertive' | 'polite' | 'off';\n};\n\n/**\n * A helper component that renders an aria-live region\n *\n * TODO: Create a more centralized component that can handle aria-live region for\n * the whole application and use context api to communicate\n */\nfunction LiveRegion({\n  testId,\n  atomic = 'false',\n  children = '',\n  timeout = 100,\n  type = 'polite'\n}: Props) {\n  const ariaLiveText = useLiveText(children, timeout);\n  const testIdProps = useTestId(testId);\n\n  return (\n    <span aria-live={type} aria-atomic={atomic} class={offScreenStyle} {...testIdProps}>\n      {ariaLiveText}\n    </span>\n  );\n}\n\n/**\n * A custom hook for handling the aria-live region\n *\n * @param text The aria-live text to use\n * @param timeout The timeout for setting the aria-live text async\n * @returns The aria-live text\n */\nfunction useLiveText(text: string, timeout: number) {\n  const [liveText, setLiveText] = useState('');\n  const updateText = useCallback(() => setLiveText(text), [text]);\n  const updateTextAsync = useCallback(() => setTimeout(updateText, timeout), [updateText, timeout]);\n\n  useEffect(() => {\n    const timeoutId = updateTextAsync();\n\n    return () => clearTimeout(timeoutId);\n  }, [updateTextAsync]);\n\n  return liveText;\n}\n\nexport { LiveRegion };\n"],"names":["_jsx"],"mappings":";;;;;;;;AA0BA;;;;;AAKG;AACH,SAAS,UAAU,CAAC,EAClB,MAAM,EACN,MAAM,GAAG,OAAO,EAChB,QAAQ,GAAG,EAAE,EACb,OAAO,GAAG,GAAG,EACb,IAAI,GAAG,QAAQ,EACT,EAAA;IACN,MAAM,YAAY,GAAG,WAAW,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;AACpD,IAAA,MAAM,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AAEtC,IAAA,QACEA,GAAA,CAAA,MAAA,EAAA,EAAA,WAAA,EAAiB,IAAI,EAAA,aAAA,EAAe,MAAM,EAAE,KAAK,EAAE,cAAc,KAAM,WAAW,EAAA,QAAA,EAC/E,YAAY,EAAA,CACR,EACP;AACJ,CAAC;AAED;;;;;;AAMG;AACH,SAAS,WAAW,CAAC,IAAY,EAAE,OAAe,EAAA;IAChD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;AAC7C,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAChE,MAAM,eAAe,GAAG,WAAW,CAAC,MAAM,UAAU,CAAC,UAAU,EAAE,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAElG,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;AAEpC,QAAA,OAAO,MAAM,YAAY,CAAC,SAAS,CAAC,CAAC;AACvC,KAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;AAEtB,IAAA,OAAO,QAAQ,CAAC;AAClB;;;;"}

package/es/MaxLengthLiveRegion-59087064.js

@@ -0,0 +1,23 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { u as useDebounce } from './useDebounce-fa5a80e9.js';
+import { u as useTranslationBundle } from './useTranslationBundle-98df6291.js';
+import { L as LiveRegion } from './LiveRegion-cb4f8a54.js';
+
+const MAX_LENGTH_UPDATE_DELAY = 500;
+function MaxLengthLiveRegion({ maxLength, testId, valueLength = 0 }) {
+    // Comment copied from InputBase.js in Big JET:
+    // Only update the aria-live div when the user has paused for more than
+    // 500 milliseconds. That way, we avoid queued up aria-live messages which
+    // would be annoying and not helpful. The 500ms was agreed upon in the
+    // accessibility review meeting.
+    const debouncedRemainingChars = useDebounce(maxLength - valueLength, MAX_LENGTH_UPDATE_DELAY);
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const remainingCharsTranslatedString = translations.formControl_maxLengthRemaining({
+        CHARACTER_COUNT: `${debouncedRemainingChars}`
+    });
+    return jsx(LiveRegion, { testId: testId, children: remainingCharsTranslatedString });
+}
+
+export { MaxLengthLiveRegion as M };
+//# sourceMappingURL=MaxLengthLiveRegion-59087064.js.map

package/es/MaxLengthLiveRegion-59087064.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaxLengthLiveRegion-59087064.js","sources":["../../src/UNSAFE_TextField/MaxLengthLiveRegion.tsx"],"sourcesContent":["import { useDebounce } from '../hooks/UNSAFE_useDebounce';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '../resources/nls/bundle';\nimport { LiveRegion } from '../UNSAFE_LiveRegion';\nimport { TestIdProps } from '#hooks/UNSAFE_useTestId';\n\ntype Props = TestIdProps & {\n  maxLength: number;\n  valueLength?: number;\n};\n\nconst MAX_LENGTH_UPDATE_DELAY = 500;\n\nexport function MaxLengthLiveRegion({ maxLength, testId, valueLength = 0 }: Props) {\n  // Comment copied from InputBase.js in Big JET:\n  // Only update the aria-live div when the user has paused for more than\n  // 500 milliseconds. That way, we avoid queued up aria-live messages which\n  // would be annoying and not helpful. The 500ms was agreed upon in the\n  // accessibility review meeting.\n  const debouncedRemainingChars = useDebounce(maxLength - valueLength, MAX_LENGTH_UPDATE_DELAY);\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const remainingCharsTranslatedString = translations.formControl_maxLengthRemaining({\n    CHARACTER_COUNT: `${debouncedRemainingChars}`\n  });\n\n  return <LiveRegion testId={testId}>{remainingCharsTranslatedString}</LiveRegion>;\n}\n"],"names":["_jsx"],"mappings":";;;;;;AAWA,MAAM,uBAAuB,GAAG,GAAG,CAAC;AAE9B,SAAU,mBAAmB,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,GAAG,CAAC,EAAS,EAAA;;;;;;IAM/E,MAAM,uBAAuB,GAAG,WAAW,CAAC,SAAS,GAAG,WAAW,EAAE,uBAAuB,CAAC,CAAC;AAC9F,IAAA,MAAM,YAAY,GAAG,oBAAoB,CAAa,0BAA0B,CAAC,CAAC;AAClF,IAAA,MAAM,8BAA8B,GAAG,YAAY,CAAC,8BAA8B,CAAC;QACjF,eAAe,EAAE,CAAG,EAAA,uBAAuB,CAAE,CAAA;AAC9C,KAAA,CAAC,CAAC;IAEH,OAAOA,GAAA,CAAC,UAAU,EAAC,EAAA,MAAM,EAAE,MAAM,EAAA,QAAA,EAAG,8BAA8B,EAAA,CAAc,CAAC;AACnF;;;;"}

package/es/Menu-b5deea24.js

@@ -0,0 +1,313 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, Fragment, jsxs } from 'preact/jsx-runtime';
+import { forwardRef, useRef as useRef$1, useCallback as useCallback$1 } from 'preact/compat';
+import { F as Floating } from './Floating-f9bbd276.js';
+import { L as Layer } from './Layer-71fc666f.js';
+import './LayerHost-15b42a3e.js';
+import { useMemo, useCallback, useRef, useState, useEffect } from 'preact/hooks';
+import { m as mergeProps } from './mergeProps-88ea8306.js';
+import { c as classNames } from './classNames-4e12b00d.js';
+import { u as useUser } from './useUser-a15426fc.js';
+import { u as useMenuContext, g as getPrevNext, a as getNVisible, b as getMenuPointerDown, c as getMenuContainerMouseLeave, d as getMenuContainerFocusMethods, e as getCloseSubmenuEvent, f as getKeyboardCloseProps, M as MenuContainerContext, k as keyElemExtractor, h as getLastVisible, i as getIsMobile, j as MenuContext } from './MenuItem-be46866f.js';
+import { menuStyles } from './UNSAFE_Menu/themes/MenuStyles.css.js';
+import { u as useTestId } from './useTestId-3bc3958c.js';
+import { dropdownMenuStyles } from './UNSAFE_Menu/themes/DropdownMenuStyles.css.js';
+import { u as useOutsideMousedown } from './useOutsideMousedown-7307de8b.js';
+import { u as useSheetSwipe } from './Sheet-f7117b12.js';
+import { u as useModal } from './Modal-3fd86d5a.js';
+import { sheetMenuStyles } from './UNSAFE_Menu/themes/SheetMenuStyles.css.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
+ */
+/**
+ * Hook for handling current key update due to user interaction including keyboard navigation.
+ *
+ * @param getPrev function to get the previous key based on the current key
+ * @param getNext function to get the next key based on the current key
+ * @param getFirstVisible function to get the key of the first available item
+ * @param getLastVisible function to get the key of the last available item
+ * @param onChange function to invoke if the current key has changed
+ * @returns
+ */
+function useMenuCurrentKey(getPrev, getNext, getFirstVisible, getLastVisible, onChange) {
+    const keyDownKeyFunctions = useMemo(() => {
+        return {
+            ArrowDown: getNext,
+            ArrowUp: getPrev,
+            Home: getFirstVisible,
+            End: getLastVisible
+        };
+    }, [getNext, getPrev, getFirstVisible, getLastVisible]);
+    const onKeyDown = useCallback((event) => {
+        if (onChange) {
+            // TODO: support horizontal layout on icon menu (left/right arrow key)
+            const keyFunction = keyDownKeyFunctions[event.key];
+            if (keyFunction && !event.shiftKey) {
+                const key = keyFunction();
+                if (key) {
+                    onChange({ key, reason: 'keyboard' });
+                }
+                event.preventDefault();
+            }
+        }
+    }, [onChange, keyDownKeyFunctions]);
+    const currentKeyProps = onChange == null ? {} : { onKeyDown };
+    return { currentKeyProps };
+}
+
+/*Component where general behavior is handled. Here we controled focus behavior, focus styling, submenu
+opening behavior and current active item behavior. */
+const MenuContainer = ({ children, 'aria-label': ariaLabel, currentFocus = 'menu', display, closeSubmenu, menuId, menuLevel, anchorRef }) => {
+    const { onClose, testId } = useMenuContext();
+    //Important to know direction so closeSubmenu is handled properly if needed.
+    const { direction } = useUser();
+    const menuContainerRef = useRef(null);
+    /*We share same behavior as legacy menu on mouseLeave that is:
+    1. If we mouse leave a menuItem but we still on menuContainer and we are not hovering any other menuItem, we keep
+    the focus on the menuItem and hovering style.
+    2. If we mouseLeave but next target is a submenu we open a submenu.
+    3. If we mouseLeave the container and next target is not a submenu, we reset current key and set the focus on the
+    menuContainer.If we mouseLeaved a submenuItem, submenu is closed.
+    General information used by menuItems:
+    -wasMouseMoved: Used to don't allow mouseEnter callbacks being triggered if mouse was not moved already.
+    -lastMouseLeaveValidatedRelatedTarget: We use bubbling nature of events to first check/validate the related target in onMouseLeave events of
+      menuItems. For menuItems we check if the related target is the menuContainer itself or a submenu. We validate there
+      since at this level we don't have access to any submenu. Everytime mouseEnter triggers at menuContainer we have to compare if both
+      relatedTargets are the same(menuContainer and last menuItem one), if not, this means mouse is now outside of the container.
+    */
+    const menuContainerGeneralInformation = useRef({
+        wasMouseMoved: false,
+        lastMouseLeaveMenuItemdRelatedTarget: null
+    });
+    //Key of the active element on this menu container
+    const [currentKey, setCurrentKey] = useState();
+    //State that represents if focused outline styles needs
+    const [showFocusRing, setShowFocusRing] = useState(false);
+    //Based on this we would include or not hovering styling. Same as legacy
+    const [isContainerFocused, setIsContainerFocused] = useState(false);
+    //Funtion triggered on blur. This is called since if focus is not anymore on the container we would need to do
+    //some validation
+    const blurFunction = () => {
+        if (!menuContainerRef.current?.contains(document.activeElement)) {
+            setShowFocusRing(false);
+            setIsContainerFocused(false);
+        }
+    };
+    const focusFunction = () => {
+        setIsContainerFocused(true);
+    };
+    const mouseLeaveFunction = (e) => {
+        //We have to validate if new hover target was already validated correctly, if not this means mouse is now outside container
+        if (!e.relatedTarget ||
+            !e.relatedTarget.isEqualNode(menuContainerGeneralInformation.current.lastMouseLeaveMenuItemdRelatedTarget)) {
+            //We reset current key when mouse is outside the container or any submenu. This is how legacy menu works
+            changeKey({
+                key: undefined,
+                reason: 'mouseEnter'
+            });
+            //We focus menuContainer so keyboard navigation can be still used
+            menuContainerRef.current?.focus();
+        }
+    };
+    //Function used to change the currentKey
+    const changeKey = useCallback((detail) => {
+        setCurrentKey(detail.key);
+        if (detail.reason === 'keyboard') {
+            setShowFocusRing(true);
+        }
+        else {
+            setShowFocusRing(false);
+        }
+    }, []);
+    //This is used since if mouse overlaps space when menu is rendered, menuItem could trigger menuEnter,
+    // which is not desirable.Once mouse was moved inside container, we could trigger mouseEnter events normally.
+    const selfDestructiveMouseMoveEvent = useCallback(() => {
+        const handler = (e) => {
+            const keyElem = keyElemExtractor(e.target);
+            const key = keyElem?.key;
+            const elem = keyElem?.elem;
+            //We will trigger this event until a menuItem is found. Usually this don't take to much to happen
+            if (key && elem) {
+                menuContainerGeneralInformation.current.wasMouseMoved = true;
+                const evt = new MouseEvent('mouseenter');
+                elem.dispatchEvent(evt);
+                menuContainerRef.current?.removeEventListener('mousemove', handler);
+            }
+        };
+        menuContainerRef.current?.addEventListener('mousemove', handler);
+    }, []);
+    const { currentKeyProps } = useMenuCurrentKey(getPrevNext(menuContainerRef.current, true, currentKey), getPrevNext(menuContainerRef.current, false, currentKey), () => getNVisible(menuContainerRef.current, 0), () => getLastVisible(menuContainerRef.current), changeKey);
+    useEffect(() => {
+        const menuContainer = menuContainerRef.current;
+        let timer;
+        /*TODO: There are some cases where is not safe to focus since
+        visibility initially is hidden at the Floating component at the initial render. Need a way to solve this in a
+        less dirty way (we are now using timeouts). More details on the descripton of JET-57353 */
+        if (currentFocus !== 'none' && menuContainer) {
+            if (currentFocus === 'menu') {
+                changeKey({ key: undefined, reason: 'click' });
+                const focusMenuContainer = () => {
+                    menuContainer.focus();
+                };
+                if (display === 'sheet') {
+                    focusMenuContainer();
+                }
+                else {
+                    // At this point floating has visibility set as hidden, so also menuContainer. Settimeout added so menuContainer
+                    // is visible at that point and can be focused.
+                    timer = setTimeout(() => {
+                        focusMenuContainer();
+                    }, FOCUS_SHIFT_TIMEOUT);
+                }
+            }
+            else if (currentFocus === 'firstItem') {
+                const firstItem = getNVisible(menuContainerRef.current, 0);
+                if (firstItem) {
+                    changeKey({ key: firstItem, reason: 'keyboard' });
+                }
+            }
+            else if (currentFocus === 'secondItem') {
+                //This is just used in sheet menu, so no need to set a timeout
+                const item = getNVisible(menuContainerRef.current, 1);
+                if (item) {
+                    changeKey({ key: item, reason: 'keyboard' });
+                }
+            }
+        }
+        return () => {
+            //We have to clean timers, because comp can be unmounted after finishing timeouts
+            clearTimeout(timer);
+        };
+    }, [changeKey, currentFocus, menuLevel, display, anchorRef]); // Important to notice we look for a change on the ref object, not it's current value
+    useEffect(() => {
+        selfDestructiveMouseMoveEvent();
+    }, [selfDestructiveMouseMoveEvent]);
+    const testIdProps = useTestId(testId);
+    return (jsx("div", { ...(menuId && { id: menuId }), ref: menuContainerRef, tabIndex: !currentKey && (menuLevel === 'main' || display === 'sheet') ? 0 : -1, role: "menu", "aria-label": ariaLabel, class: classNames([
+            menuStyles.menuContainerStyle,
+            menuStyles[`${display}MenuContainerStyle`]
+        ]), ...mergeProps(currentKeyProps, getKeyboardCloseProps(onClose, menuLevel), getCloseSubmenuEvent(direction, closeSubmenu), getMenuContainerFocusMethods(blurFunction, focusFunction), getMenuContainerMouseLeave(mouseLeaveFunction), getMenuPointerDown()), ...testIdProps, children: jsx(MenuContainerContext.Provider, { value: {
+                /*We use this ref on dropdownSubmenu since unhover only close the menu if menuContainer ref does not include
+                the new element that receives the hovering */
+                menuContainerRef,
+                currentKey,
+                showFocusRing,
+                changeKey,
+                menuContainerGeneralInformation,
+                isContainerFocused
+            }, children: children }) }));
+};
+//Temporal constant, will probably be removed with JET-57353
+const FOCUS_SHIFT_TIMEOUT = 0;
+
+//TODO: Start consuming PRIVATE_Dropdown. JET-53371
+/*Component used to render a dropdown menu. For now this is just rendered when device is not a phone. */
+const DropdownMenu = forwardRef(({ anchorRef, defaultPlacement, offsetValue, closeSubmenu, children, 'aria-label': ariaLabel, currentFocus, menuId, menuLevel, flipOptions, isOpen }, ref) => {
+    const floatingRef = useRef$1(null);
+    const { onClose } = useMenuContext();
+    const useOutsideClickHandler = useCallback$1((e) => {
+        if (menuLevel === 'sub')
+            return;
+        // Outside click is not considered when menuItem was clicked
+        const menuItemKey = keyElemExtractor(e.target)?.key;
+        if (!menuItemKey) {
+            onClose?.({ reason: 'outsideClick', target: e.target });
+        }
+    }, [onClose, menuLevel]);
+    //This will be removed once we start using dropdown comp
+    useOutsideMousedown({
+        ref: [floatingRef],
+        handler: useOutsideClickHandler,
+        isDisabled: !isOpen
+    });
+    // TODO - Reuse a dropdown component instead of creating floating by ourselves.
+    /*
+    For this comment, we could divide menus in these categories:
+    - Dropdown menus: "Attached" to an specific element.
+    - Context menus: "Attached" to coords or an specific element.
+    We are passing anchorRef as the logicalParent of the Layer used here, even if we pass coords. So we could say
+    that we are passing an incorrect logicalParentRef for context menus. But, passing coords has no impacts either on
+    accessibility or behavior since this logical parent is only used by legacy collections for dom searching to find
+    dropdown menus. More information about that here: 
+    This comment also applies for sheet menus that in this specific context(relation between logicalParentRef
+    and menu) can be considered "dropdown menus"
+    For now using type assertion is safe enough, but it's kind of a dirty solution. This is a point that can be included
+    in near future conversation related to semantics of menus in favor of dividing dropdown and context menu:
+    
+    */
+    return (jsx(Fragment, { children: isOpen ? (jsx(Layer, { logicalParentRef: anchorRef, children: jsx(Floating, { ref: floatingRef, class: dropdownMenuStyles.base, anchorRef: anchorRef, flipOptions: flipOptions, shiftOptions: {
+                    mainAxis: false,
+                    crossAxis: false
+                }, sizeOptions: { isMaxHeightAdjusted: true, isMaxWidthAdjusted: true }, 
+                //TODO: JET-57950. Need to see how we set 24px boundary.
+                //TODO: Boundaries need to match with the dropdowns used in other comps.  Also figure out how to make it themable.
+                boundaryOptions: { padding: 0 }, placement: defaultPlacement, offsetValue: offsetValue, children: jsx("div", { 
+                    //TODO: JET-60745. Add minWidth prop on menu
+                    style: {
+                        minWidth: MENU_MIN_WIDTH
+                    }, ref: ref, children: jsx(MenuContainer, { menuLevel: menuLevel, closeSubmenu: closeSubmenu, "aria-label": ariaLabel, currentFocus: currentFocus, menuId: menuId, display: "dropdown", anchorRef: anchorRef, children: children }) }) }) })) : null }));
+});
+const MENU_MIN_WIDTH = 200;
+
+const ModalWrapper = ({ children }) => (jsx("div", { class: sheetMenuStyles.modalWrapper, children: children }));
+const ModalContainer = forwardRef(({ children }, ref) => (jsx("div", { class: sheetMenuStyles.modalContainer, ref: ref, children: children })));
+//ModalBackdrop on modal folder not setting the style on oj-c enviroment
+//Creating it here so we don't see that issue
+const ModalBackdrop = ({ backdropVisible = false }) => (jsx("div", { class: classNames([
+        sheetMenuStyles.modalBackdrop,
+        backdropVisible && sheetMenuStyles.modalBackdropVisible
+    ]) }));
+//TODO: Start consuming PRIVATE_Sheet. JET-56072
+const SheetMenu = ({ children, 'aria-label': ariaLabel, currentFocus, anchorRef, closeSubmenu, menuLevel }) => {
+    const { onClose } = useMenuContext();
+    useEffect(() => {
+        // We set the overflow body as hidden when mounted and revert to original overflow value when is
+        // unmounted. This is done to don't allow backgound being scrolled
+        // This will be handled by modal/popup when ready
+        const initialOverflow = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.body.style.overflow = initialOverflow;
+        };
+    }, []);
+    const dismissHandler = useCallback(() => {
+        onClose?.({ reason: 'dismissed' });
+    }, [onClose]);
+    const { backdropRef } = useModal({ isOpen: true, onBackdropClick: dismissHandler });
+    //TODO: Use useSwipe when it works on components that could scroll.
+    const { swipeProps } = useSheetSwipe(dismissHandler);
+    // TODO: For now we are mimicking current modal but using a "different position setting" (using absolute positioning instead of flex).
+    // Have to use modal/popup component directly instead doing this composition when that component could satisfy our requirments.
+    return (jsx(Layer, { logicalParentRef: anchorRef, children: jsxs(ModalWrapper, { children: [jsx(ModalBackdrop, { backdropVisible: menuLevel === 'main' }), jsx(ModalContainer, { ref: backdropRef, children: jsx("div", { class: sheetMenuStyles.sheetMenuContainerWrapper, ...swipeProps, children: jsx(MenuContainer, { "aria-label": ariaLabel, currentFocus: currentFocus, display: "sheet", closeSubmenu: closeSubmenu, menuLevel: menuLevel, children: children }) }) })] }) }));
+};
+
+const isMobile = getIsMobile();
+// TODO: For context menu case anchorRef is changed typically when trying to opening menu in other place
+// menu initialFocus prop should react also when anchorRef is changed not just when isOpen is changed to true.
+/* Component that is exposed to final user to create a menu. Important to notice that this component is just used by
+the final user to express a main menu. It's not reused by us for submenus (we use SheetMenu and DropdownMenu directly there) */
+const Menu = ({ onClose, isOpen, testId, initialFocus = 'menu', placement = 'bottom-start', offsetValue = 4, ...menuProps }) => {
+    //On close is consumed by the whole menu structure including the main menu and submenu ones.
+    return (jsx(MenuContext.Provider, { value: { onClose, isMobile, testId }, children: jsx(Fragment, { children: isMobile ? (jsx(Fragment, { children: isOpen ? (jsx(SheetMenu, { ...menuProps, currentFocus: initialFocus, menuLevel: "main" })) : null })) : (jsx(DropdownMenu, { ...menuProps, isOpen: isOpen, currentFocus: initialFocus, menuLevel: "main", defaultPlacement: placement, offsetValue: offsetValue, flipOptions: {
+                    crossAxis: true,
+                    mainAxis: true,
+                    fallbackPlacements: [
+                        'bottom-start',
+                        'bottom-end',
+                        'top-start',
+                        'top-end',
+                        'end-top',
+                        'start-top',
+                        'end-bottom',
+                        'start-bottom'
+                    ]
+                } })) }) }));
+};
+
+export { DropdownMenu as D, Menu as M, SheetMenu as S };
+//# sourceMappingURL=Menu-b5deea24.js.map

package/es/Menu-b5deea24.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu-b5deea24.js","sources":["../../src/UNSAFE_Menu/useMenuCurrentKey.ts","../../src/UNSAFE_Menu/MenuContainer.tsx","../../src/UNSAFE_Menu/DropdownMenu.tsx","../../src/UNSAFE_Menu/SheetMenu.tsx","../../src/UNSAFE_Menu/Menu.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 */\nimport { useCallback, useMemo } from 'preact/hooks';\n\nimport { MenuCollectionItem } from './menuUtils';\n\n/**\n * Hook for handling current key update due to user interaction including keyboard navigation.\n *\n * @param getPrev function to get the previous key based on the current key\n * @param getNext function to get the next key based on the current key\n * @param getFirstVisible function to get the key of the first available item\n * @param getLastVisible function to get the key of the last available item\n * @param onChange function to invoke if the current key has changed\n * @returns\n */\nexport function useMenuCurrentKey(\n  getPrev: () => string | null,\n  getNext: () => string | null,\n  getFirstVisible: () => string | null,\n  getLastVisible: () => string | null,\n  onChange?: (detail: MenuCollectionItem) => void\n) {\n  const keyDownKeyFunctions = useMemo(() => {\n    return {\n      ArrowDown: getNext,\n      ArrowUp: getPrev,\n      Home: getFirstVisible,\n      End: getLastVisible\n    } as Record<string, (() => string | null) | undefined>;\n  }, [getNext, getPrev, getFirstVisible, getLastVisible]);\n\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (onChange) {\n        // TODO: support horizontal layout on icon menu (left/right arrow key)\n        const keyFunction = keyDownKeyFunctions[event.key];\n        if (keyFunction && !event.shiftKey) {\n          const key = keyFunction();\n          if (key) {\n            onChange({ key, reason: 'keyboard' });\n          }\n          event.preventDefault();\n        }\n      }\n    },\n    [onChange, keyDownKeyFunctions]\n  );\n\n  const currentKeyProps = onChange == null ? {} : { onKeyDown };\n  return { currentKeyProps };\n}\n","/**\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 */\n\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\n\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { useUser } from '../hooks/UNSAFE_useUser';\n\nimport { BaseMenuProps } from './Menu';\nimport { useMenuCurrentKey } from './useMenuCurrentKey';\nimport {\n  getPrevNext,\n  keyElemExtractor,\n  getLastVisible,\n  getKeyboardCloseProps,\n  getCloseSubmenuEvent,\n  MenuCollectionItem,\n  getNVisible,\n  getMenuContainerFocusMethods,\n  getMenuContainerMouseLeave,\n  getMenuPointerDown\n} from './menuUtils';\nimport { useMenuContext } from './useMenuContext';\nimport { MenuContainerContext } from './MenuContainerContext';\nimport { menuStyles } from './themes/MenuStyles.css';\nimport { useTestId } from '../hooks/UNSAFE_useTestId';\n\ntype MenuContainerProps = Omit<\n  BaseMenuProps,\n  'isOpen' | 'defaultPlacement' | 'offsetValue' | 'anchorRef'\n> &\n  Partial<Pick<BaseMenuProps, 'anchorRef'>> & {\n    display: 'sheet' | 'dropdown';\n  };\n\n/*Component where general behavior is handled. Here we controled focus behavior, focus styling, submenu\nopening behavior and current active item behavior. */\nexport const MenuContainer = ({\n  children,\n  'aria-label': ariaLabel,\n  currentFocus = 'menu',\n  display,\n  closeSubmenu,\n  menuId,\n  menuLevel,\n  anchorRef\n}: MenuContainerProps) => {\n  const { onClose, testId } = useMenuContext();\n\n  //Important to know direction so closeSubmenu is handled properly if needed.\n  const { direction } = useUser();\n\n  const menuContainerRef = useRef<HTMLDivElement | null>(null);\n\n  /*We share same behavior as legacy menu on mouseLeave that is:\n  1. If we mouse leave a menuItem but we still on menuContainer and we are not hovering any other menuItem, we keep \n  the focus on the menuItem and hovering style.\n  2. If we mouseLeave but next target is a submenu we open a submenu. \n  3. If we mouseLeave the container and next target is not a submenu, we reset current key and set the focus on the\n  menuContainer.If we mouseLeaved a submenuItem, submenu is closed.\n  General information used by menuItems:\n  -wasMouseMoved: Used to don't allow mouseEnter callbacks being triggered if mouse was not moved already.\n  -lastMouseLeaveValidatedRelatedTarget: We use bubbling nature of events to first check/validate the related target in onMouseLeave events of \n    menuItems. For menuItems we check if the related target is the menuContainer itself or a submenu. We validate there\n    since at this level we don't have access to any submenu. Everytime mouseEnter triggers at menuContainer we have to compare if both\n    relatedTargets are the same(menuContainer and last menuItem one), if not, this means mouse is now outside of the container.\n  */\n  const menuContainerGeneralInformation = useRef<{\n    wasMouseMoved: boolean;\n    lastMouseLeaveMenuItemdRelatedTarget: HTMLElement | null;\n  }>({\n    wasMouseMoved: false,\n    lastMouseLeaveMenuItemdRelatedTarget: null\n  });\n\n  //Key of the active element on this menu container\n  const [currentKey, setCurrentKey] = useState<string | undefined>();\n\n  //State that represents if focused outline styles needs\n  const [showFocusRing, setShowFocusRing] = useState(false);\n\n  //Based on this we would include or not hovering styling. Same as legacy\n  const [isContainerFocused, setIsContainerFocused] = useState(false);\n\n  //Funtion triggered on blur. This is called since if focus is not anymore on the container we would need to do\n  //some validation\n  const blurFunction = () => {\n    if (!menuContainerRef.current?.contains(document.activeElement)) {\n      setShowFocusRing(false);\n      setIsContainerFocused(false);\n    }\n  };\n\n  const focusFunction = () => {\n    setIsContainerFocused(true);\n  };\n\n  const mouseLeaveFunction = (e: MouseEvent) => {\n    //We have to validate if new hover target was already validated correctly, if not this means mouse is now outside container\n    if (\n      !e.relatedTarget ||\n      !(e.relatedTarget as HTMLElement).isEqualNode(\n        menuContainerGeneralInformation.current.lastMouseLeaveMenuItemdRelatedTarget\n      )\n    ) {\n      //We reset current key when mouse is outside the container or any submenu. This is how legacy menu works\n      changeKey({\n        key: undefined,\n        reason: 'mouseEnter'\n      });\n      //We focus menuContainer so keyboard navigation can be still used\n      menuContainerRef.current?.focus();\n    }\n  };\n\n  //Function used to change the currentKey\n  const changeKey = useCallback((detail: MenuCollectionItem) => {\n    setCurrentKey(detail.key);\n    if (detail.reason === 'keyboard') {\n      setShowFocusRing(true);\n    } else {\n      setShowFocusRing(false);\n    }\n  }, []);\n\n  //This is used since if mouse overlaps space when menu is rendered, menuItem could trigger menuEnter,\n  // which is not desirable.Once mouse was moved inside container, we could trigger mouseEnter events normally.\n  const selfDestructiveMouseMoveEvent = useCallback(() => {\n    const handler = (e: MouseEvent) => {\n      const keyElem = keyElemExtractor(e.target as HTMLElement);\n      const key = keyElem?.key;\n      const elem = keyElem?.elem;\n      //We will trigger this event until a menuItem is found. Usually this don't take to much to happen\n      if (key && elem) {\n        menuContainerGeneralInformation.current.wasMouseMoved = true;\n        const evt = new MouseEvent('mouseenter');\n        elem.dispatchEvent(evt);\n        menuContainerRef.current?.removeEventListener('mousemove', handler);\n      }\n    };\n    menuContainerRef.current?.addEventListener('mousemove', handler);\n  }, []);\n\n  const { currentKeyProps } = useMenuCurrentKey(\n    getPrevNext(menuContainerRef.current, true, currentKey),\n    getPrevNext(menuContainerRef.current, false, currentKey),\n    () => getNVisible(menuContainerRef.current, 0),\n    () => getLastVisible(menuContainerRef.current),\n    changeKey\n  );\n\n  useEffect(() => {\n    const menuContainer = menuContainerRef.current;\n    let timer: NodeJS.Timeout | undefined;\n    /*TODO: There are some cases where is not safe to focus since \n    visibility initially is hidden at the Floating component at the initial render. Need a way to solve this in a \n    less dirty way (we are now using timeouts). More details on the descripton of JET-57353 */\n    if (currentFocus !== 'none' && menuContainer) {\n      if (currentFocus === 'menu') {\n        changeKey({ key: undefined, reason: 'click' });\n        const focusMenuContainer = () => {\n          menuContainer.focus();\n        };\n        if (display === 'sheet') {\n          focusMenuContainer();\n        } else {\n          // At this point floating has visibility set as hidden, so also menuContainer. Settimeout added so menuContainer\n          // is visible at that point and can be focused.\n          timer = setTimeout(() => {\n            focusMenuContainer();\n          }, FOCUS_SHIFT_TIMEOUT);\n        }\n      } else if (currentFocus === 'firstItem') {\n        const firstItem = getNVisible(menuContainerRef.current, 0);\n        if (firstItem) {\n          changeKey({ key: firstItem, reason: 'keyboard' });\n        }\n      } else if (currentFocus === 'secondItem') {\n        //This is just used in sheet menu, so no need to set a timeout\n        const item = getNVisible(menuContainerRef.current, 1);\n        if (item) {\n          changeKey({ key: item, reason: 'keyboard' });\n        }\n      }\n    }\n    return () => {\n      //We have to clean timers, because comp can be unmounted after finishing timeouts\n      clearTimeout(timer);\n    };\n  }, [changeKey, currentFocus, menuLevel, display, anchorRef]); // Important to notice we look for a change on the ref object, not it's current value\n\n  useEffect(() => {\n    selfDestructiveMouseMoveEvent();\n  }, [selfDestructiveMouseMoveEvent]);\n\n  const testIdProps = useTestId(testId);\n\n  return (\n    <div\n      {...(menuId && { id: menuId })}\n      ref={menuContainerRef}\n      tabIndex={!currentKey && (menuLevel === 'main' || display === 'sheet') ? 0 : -1}\n      role=\"menu\"\n      aria-label={ariaLabel}\n      class={classNames([\n        menuStyles.menuContainerStyle,\n        menuStyles[`${display}MenuContainerStyle`]\n      ])}\n      {...mergeProps(\n        currentKeyProps,\n        getKeyboardCloseProps(onClose, menuLevel),\n        getCloseSubmenuEvent(direction, closeSubmenu),\n        getMenuContainerFocusMethods(blurFunction, focusFunction),\n        getMenuContainerMouseLeave(mouseLeaveFunction),\n        getMenuPointerDown()\n      )}\n      {...testIdProps}>\n      <MenuContainerContext.Provider\n        value={{\n          /*We use this ref on dropdownSubmenu since unhover only close the menu if menuContainer ref does not include\n          the new element that receives the hovering */\n          menuContainerRef,\n          currentKey,\n          showFocusRing,\n          changeKey,\n          menuContainerGeneralInformation,\n          isContainerFocused\n        }}>\n        {children}\n      </MenuContainerContext.Provider>\n    </div>\n  );\n};\n\n//Temporal constant, will probably be removed with JET-57353\nconst FOCUS_SHIFT_TIMEOUT = 0;\n","import { ComponentProps, RefObject } from 'preact';\nimport { ForwardedRef, forwardRef, useCallback, useRef } from 'preact/compat';\n\nimport { Floating } from '../UNSAFE_Floating';\nimport { Layer } from '../UNSAFE_Layer';\n\nimport { MenuContainer } from './MenuContainer';\nimport { BaseMenuProps } from './Menu';\nimport { keyElemExtractor } from './menuUtils';\nimport { useMenuContext } from './useMenuContext';\nimport { dropdownMenuStyles } from './themes/DropdownMenuStyles.css';\nimport { useOutsideMousedown } from '#hooks/PRIVATE_useOutsideMousedown';\n\ntype DropdownMenuProps = BaseMenuProps & DropdownMenuFloatingProps;\n\ntype FloatingProps = ComponentProps<typeof Floating>;\ntype DropdownMenuFloatingProps = {\n  defaultPlacement: FloatingProps['placement'];\n  offsetValue: FloatingProps['offsetValue'];\n  flipOptions: FloatingProps['flipOptions'];\n};\n\n//TODO: Start consuming PRIVATE_Dropdown. JET-53371\n/*Component used to render a dropdown menu. For now this is just rendered when device is not a phone. */\nexport const DropdownMenu = forwardRef(\n  (\n    {\n      anchorRef,\n      defaultPlacement,\n      offsetValue,\n      closeSubmenu,\n      children,\n      'aria-label': ariaLabel,\n      currentFocus,\n      menuId,\n      menuLevel,\n      flipOptions,\n      isOpen\n    }: DropdownMenuProps,\n    ref?: ForwardedRef<HTMLDivElement>\n  ) => {\n    const floatingRef = useRef<HTMLElement>(null);\n    const { onClose } = useMenuContext();\n\n    const useOutsideClickHandler = useCallback(\n      (e: MouseEvent) => {\n        if (menuLevel === 'sub') return;\n        // Outside click is not considered when menuItem was clicked\n        const menuItemKey = keyElemExtractor(e.target as HTMLElement)?.key;\n        if (!menuItemKey) {\n          onClose?.({ reason: 'outsideClick', target: e.target as Element });\n        }\n      },\n      [onClose, menuLevel]\n    );\n\n    //This will be removed once we start using dropdown comp\n    useOutsideMousedown({\n      ref: [floatingRef],\n      handler: useOutsideClickHandler,\n      isDisabled: !isOpen\n    });\n\n    // TODO - Reuse a dropdown component instead of creating floating by ourselves.\n\n    /* \n    For this comment, we could divide menus in these categories:\n    - Dropdown menus: \"Attached\" to an specific element.\n    - Context menus: \"Attached\" to coords or an specific element.\n    We are passing anchorRef as the logicalParent of the Layer used here, even if we pass coords. So we could say \n    that we are passing an incorrect logicalParentRef for context menus. But, passing coords has no impacts either on \n    accessibility or behavior since this logical parent is only used by legacy collections for dom searching to find \n    dropdown menus. More information about that here:  \n    This comment also applies for sheet menus that in this specific context(relation between logicalParentRef\n    and menu) can be considered \"dropdown menus\"\n    For now using type assertion is safe enough, but it's kind of a dirty solution. This is a point that can be included \n    in near future conversation related to semantics of menus in favor of dividing dropdown and context menu: \n      \n    */\n\n    return (\n      <>\n        {isOpen ? (\n          <Layer logicalParentRef={anchorRef as RefObject<Element>}>\n            <Floating\n              ref={floatingRef}\n              class={dropdownMenuStyles.base}\n              anchorRef={anchorRef}\n              flipOptions={flipOptions}\n              shiftOptions={{\n                mainAxis: false,\n                crossAxis: false\n              }}\n              sizeOptions={{ isMaxHeightAdjusted: true, isMaxWidthAdjusted: true }}\n              //TODO: JET-57950. Need to see how we set 24px boundary.\n              //TODO: Boundaries need to match with the dropdowns used in other comps.  Also figure out how to make it themable.\n              boundaryOptions={{ padding: 0 }}\n              placement={defaultPlacement}\n              offsetValue={offsetValue}>\n              <div\n                //TODO: JET-60745. Add minWidth prop on menu\n                style={{\n                  minWidth: MENU_MIN_WIDTH\n                }}\n                ref={ref}>\n                <MenuContainer\n                  menuLevel={menuLevel}\n                  closeSubmenu={closeSubmenu}\n                  aria-label={ariaLabel}\n                  currentFocus={currentFocus}\n                  menuId={menuId}\n                  display=\"dropdown\"\n                  anchorRef={anchorRef}>\n                  {children}\n                </MenuContainer>\n              </div>\n            </Floating>\n          </Layer>\n        ) : null}\n      </>\n    );\n  }\n);\n\nconst MENU_MIN_WIDTH = 200;\n","import { RefObject, forwardRef } from 'preact/compat';\nimport { useCallback, useEffect } from 'preact/hooks';\n\n//Once Sheet is consumed this will be removed\nimport { useSheetSwipe } from '../UNSAFE_Sheet';\nimport useModal from '../UNSAFE_Modal/hooks/useModal';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\nimport { Layer } from '../UNSAFE_Layer';\nimport { classNames } from '../utils/UNSAFE_classNames';\n\nimport { BaseMenuProps } from './Menu';\nimport { useMenuContext } from './useMenuContext';\nimport { MenuContainer } from './MenuContainer';\nimport { sheetMenuStyles } from './themes/SheetMenuStyles.css';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLDivElement>, 'children'>;\n\nexport type SheetMenuProps = BaseMenuProps;\n\nconst ModalWrapper = ({ children }: IntrinsicProps) => (\n  <div class={sheetMenuStyles.modalWrapper}>{children}</div>\n);\nconst ModalContainer = forwardRef<HTMLDivElement, IntrinsicProps>(({ children }, ref) => (\n  <div class={sheetMenuStyles.modalContainer} ref={ref}>\n    {children}\n  </div>\n));\n//ModalBackdrop on modal folder not setting the style on oj-c enviroment\n//Creating it here so we don't see that issue\nconst ModalBackdrop = ({ backdropVisible = false }) => (\n  <div\n    class={classNames([\n      sheetMenuStyles.modalBackdrop,\n      backdropVisible && sheetMenuStyles.modalBackdropVisible\n    ])}\n  />\n);\n\n//TODO: Start consuming PRIVATE_Sheet. JET-56072\nexport const SheetMenu = ({\n  children,\n  'aria-label': ariaLabel,\n  currentFocus,\n  anchorRef,\n  closeSubmenu,\n  menuLevel\n}: SheetMenuProps) => {\n  const { onClose } = useMenuContext();\n  useEffect(() => {\n    // We set the overflow body as hidden when mounted and revert to original overflow value when is\n    // unmounted. This is done to don't allow backgound being scrolled\n    // This will be handled by modal/popup when ready\n    const initialOverflow = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    return () => {\n      document.body.style.overflow = initialOverflow;\n    };\n  }, []);\n\n  const dismissHandler = useCallback(() => {\n    onClose?.({ reason: 'dismissed' });\n  }, [onClose]);\n\n  const { backdropRef } = useModal({ isOpen: true, onBackdropClick: dismissHandler });\n  //TODO: Use useSwipe when it works on components that could scroll.\n  const { swipeProps } = useSheetSwipe(dismissHandler);\n\n  // TODO: For now we are mimicking current modal but using a \"different position setting\" (using absolute positioning instead of flex).\n  // Have to use modal/popup component directly instead doing this composition when that component could satisfy our requirments.\n  return (\n    <Layer logicalParentRef={anchorRef as RefObject<Element>}>\n      <ModalWrapper>\n        <ModalBackdrop backdropVisible={menuLevel === 'main'}></ModalBackdrop>\n        <ModalContainer ref={backdropRef}>\n          <div class={sheetMenuStyles.sheetMenuContainerWrapper} {...swipeProps}>\n            <MenuContainer\n              aria-label={ariaLabel}\n              currentFocus={currentFocus}\n              display=\"sheet\"\n              closeSubmenu={closeSubmenu}\n              menuLevel={menuLevel}>\n              {children}\n            </MenuContainer>\n          </div>\n        </ModalContainer>\n      </ModalWrapper>\n    </Layer>\n  );\n};\n","/**\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 */\n\nimport { ComponentChildren, ComponentProps } from 'preact';\n\nimport { DropdownMenu } from './DropdownMenu';\nimport { SheetMenu } from './SheetMenu';\nimport { MenuContext } from './MenuContext';\nimport { getIsMobile } from './menuUtils';\nimport { Floating } from '../UNSAFE_Floating';\nimport { TestIdProps } from '../hooks/UNSAFE_useTestId';\n\ntype MenuProps = {\n  /**\n   * Trigger element reference\n   */\n  anchorRef: FloatingProps['anchorRef'];\n  /**\n   * Placement of the floating element relative to its reference element.\n   */\n  placement?: FloatingProps['placement'];\n  /**\n   Placement offset.\n   Offset displaces the floating element from its core placement along the specified axes. \n   */\n  offsetValue?: FloatingProps['offsetValue'];\n  /**\n   * Set of menu groups or menu items that menu will hold.Even though you could pass other type of children,\n   * is strongly recommended to use MenuItem, menu groups or components that return this type of components\n   * since passing other type of components children produces not desirable behaviors.\n   */\n  children: ComponentChildren;\n  /**\n   * Specifies if menu is opened.\n   */\n  isOpen?: boolean;\n  /**\n   * Property that triggers a callback when menu is supposed to be closed.\n   */\n  onClose?: (detail: CloseDetail) => void;\n  /**\n   * Specifies some screen reader text. Set it to create an accesible menu.\n   */\n  'aria-label'?: string;\n  /**\n   *  Determines focus behavior when the menu is opened.\n   */\n  initialFocus?: 'menu' | 'firstItem';\n};\n\ntype FloatingProps = ComponentProps<typeof Floating>;\n\ntype CloseDetail =\n  | {\n      //dismissed represents dismissing the menu using esc,tap and on mobile swiping and taping backdrop\n      reason: 'dismissed' | 'itemAction';\n    }\n  | {\n      reason: 'outsideClick';\n      target: Element;\n    };\n\n// Type only used internally by Sheet and Dropdown menu. If we want to expose both at some point we would need to\n// adjust this type.\nexport type BaseMenuProps = (MainMenu | SubMenu) &\n  Omit<MenuProps, 'onClose' | 'initialFocus'> & {\n    /*None is a valid option here since there are some use cases where a menu is opened and we don't want to focus anything\n    eg. When menu is opened due to a hover on submenuitem\n    When pasing a number, that is index of the element is going to be focused\n    eg. 1 focus the second menuitem\n    We call it currentfocus instead of initialFocus since can change when the menu is already opened. For example\n    if user hover to open a submenu and then click right key.\n    We should comeback to this since we should probably separate current focus so we have initial focus and current focus\n    as internal props of the menu container.*/\n    currentFocus?: 'menu' | 'firstItem' | 'secondItem' | 'none';\n  };\n\ntype MainMenu = {\n  menuLevel: 'main';\n  menuId?: never;\n  closeSubmenu?: never;\n};\n\ntype SubMenu = {\n  menuLevel: 'sub';\n  menuId?: string;\n  closeSubmenu?: () => void;\n};\nconst isMobile = getIsMobile();\n\n// TODO: For context menu case anchorRef is changed typically when trying to opening menu in other place\n// menu initialFocus prop should react also when anchorRef is changed not just when isOpen is changed to true.\n\n/* Component that is exposed to final user to create a menu. Important to notice that this component is just used by\nthe final user to express a main menu. It's not reused by us for submenus (we use SheetMenu and DropdownMenu directly there) */\n\nexport const Menu = ({\n  onClose,\n  isOpen,\n  testId,\n  initialFocus = 'menu',\n  placement = 'bottom-start',\n  offsetValue = 4,\n  ...menuProps\n}: MenuProps & TestIdProps) => {\n  //On close is consumed by the whole menu structure including the main menu and submenu ones.\n  return (\n    <MenuContext.Provider value={{ onClose, isMobile, testId }}>\n      <>\n        {isMobile ? (\n          <>\n            {isOpen ? (\n              <SheetMenu {...menuProps} currentFocus={initialFocus} menuLevel=\"main\"></SheetMenu>\n            ) : null}\n          </>\n        ) : (\n          <DropdownMenu\n            {...menuProps}\n            isOpen={isOpen}\n            currentFocus={initialFocus}\n            menuLevel=\"main\"\n            defaultPlacement={placement}\n            offsetValue={offsetValue}\n            flipOptions={{\n              crossAxis: true,\n              mainAxis: true,\n              fallbackPlacements: [\n                'bottom-start',\n                'bottom-end',\n                'top-start',\n                'top-end',\n                'end-top',\n                'start-top',\n                'end-bottom',\n                'start-bottom'\n              ]\n            }}></DropdownMenu>\n        )}\n      </>\n    </MenuContext.Provider>\n  );\n};\n"],"names":["_jsx","useRef","useCallback","_Fragment","_jsxs"],"mappings":"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"}

package/es/MenuButton-49b7965d.js

@@ -2,18 +2,18 @@
 import { jsx, jsxs } from 'preact/jsx-runtime';
 import { B as ButtonLabelLayout } from './ButtonLabelLayout-b5aa1030.js';
 import { S as SvgChevronDown } from './ChevronDown-08517193.js';
-import { M as Menu } from './Menu-e44a3e0b.js';
+import { M as Menu } from './Menu-b5deea24.js';
 import './MenuItem-be46866f.js';
 import { useRef, useImperativeHandle } from 'preact/hooks';
 import { Fragment } from 'preact';
 import { m as mergeProps } from './mergeProps-88ea8306.js';
 import './logger-c92f309c.js';
-import './LayerHost-7a2149f5.js';
+import './LayerHost-15b42a3e.js';
 import { forwardRef } from 'preact/compat';
 import './TooltipContentStyles.styles.css';
 import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentBaseTheme.styles.css';
 import './hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js';
-import './tooltipUtils-06c93436.js';
+import './tooltipUtils-1131b3ca.js';
 import './IconStyle.styles.css';
 import './SelectMenuGroupContext-b56cf5d4.js';
 import './UNSAFE_Separator/themes/SeparatorStyles.css.js';

package/es/MenuItem-be46866f.js

@@ -6,7 +6,7 @@ import { c as classNames } from './classNames-4e12b00d.js';
 import { u as useId } from './useId-03dbfdf0.js';
 import { m as mergeProps } from './mergeProps-88ea8306.js';
 import { u as usePress } from './usePress-97fc1cf1.js';
-import { u as useUser } from './useUser-bca8cf2d.js';
+import { u as useUser } from './useUser-a15426fc.js';
 import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
 import { m as mergeInterpolations } from './mergeInterpolations-e2db2a66.js';
 import { f as flexitemInterpolations } from './flexitem-7b7f7920.js';

package/es/Message-322f8d63.js

@@ -1,14 +1,14 @@
 /* @oracle/oraclejet-preact: undefined */
 import { jsx, jsxs } from 'preact/jsx-runtime';
 import { useCallback, useRef, useEffect } from 'preact/hooks';
-import { F as Flex } from './Flex-2d51e914.js';
+import { F as Flex } from './Flex-8696b27b.js';
 import { MessageBannerRedwoodTheme } from './UNSAFE_MessageBanner/themes/redwood/MessageBannerTheme.js';
 import { u as useComponentTheme } from './useComponentTheme-d2f9e47f.js';
 import { T as Timer } from './timer-f45a7e92.js';
 import { c as classNames } from './classNames-4e12b00d.js';
 import { S as SvgClose } from './Close-3c7298cf.js';
 import { I as IconButton } from './IconButton-451a225c.js';
-import { u as useTranslationBundle } from './useTranslationBundle-6da03e52.js';
+import { u as useTranslationBundle } from './useTranslationBundle-98df6291.js';
 import { messageCloseButtonStyles, messageStartIconStyles, messageDetailStyles, messageHeaderStyles, messageTimestampStyles, messageStyles } from './PRIVATE_Message/themes/MessageStyles.css.js';
 import { Fragment } from 'preact';
 import { i as isValidValueForProp, f as formatTimestamp } from './MessageFormattingUtils-34c9b1aa.js';

package/es/MessageLayer-34a390eb.js

@@ -0,0 +1,58 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx } from 'preact/jsx-runtime';
+import { F as Flex } from './Flex-8696b27b.js';
+import { W as WindowOverlay } from './WindowOverlay-9b43e658.js';
+import { u as useUser } from './useUser-a15426fc.js';
+import { L as Layer } from './Layer-71fc666f.js';
+import 'preact/compat';
+import './LayerHost-15b42a3e.js';
+
+const positions = [
+    'top',
+    'top-left',
+    'top-right',
+    'top-start',
+    'top-end',
+    'bottom',
+    'bottom-left',
+    'bottom-right',
+    'bottom-start',
+    'bottom-end'
+];
+const MessageLayer = ({ children, offset, testId, position = 'bottom' }) => {
+    const side = position.split('-')[0];
+    let windowOverlayOffset;
+    if (typeof offset === 'number') {
+        windowOverlayOffset = { mainAxis: offset, crossAxis: offset };
+    }
+    else if (side == 'top' || side == 'bottom') {
+        windowOverlayOffset = { mainAxis: offset?.vertical, crossAxis: offset?.horizontal };
+    }
+    else {
+        windowOverlayOffset = { mainAxis: offset?.horizontal, crossAxis: offset?.vertical };
+    }
+    const { direction } = useUser();
+    const isLtr = direction === 'ltr';
+    let windowOverlayPlacement;
+    switch (position) {
+        case 'top-left':
+            windowOverlayPlacement = isLtr ? 'top-start' : 'top-end';
+            break;
+        case 'top-right':
+            windowOverlayPlacement = isLtr ? 'top-end' : 'top-start';
+            break;
+        case 'bottom-left':
+            windowOverlayPlacement = isLtr ? 'bottom-start' : 'bottom-end';
+            break;
+        case 'bottom-right':
+            windowOverlayPlacement = isLtr ? 'bottom-end' : 'bottom-start';
+            break;
+        default:
+            windowOverlayPlacement = position;
+            break;
+    }
+    return (jsx(Layer, { priority: "messages", level: "topLevel", children: jsx(WindowOverlay, { placement: windowOverlayPlacement, offset: windowOverlayOffset, children: jsx("div", { "data-testid": testId, children: jsx(Flex, { direction: "column", gap: "2x", children: children }) }) }) }));
+};
+
+export { MessageLayer as M, positions as p };
+//# sourceMappingURL=MessageLayer-34a390eb.js.map

package/es/MessageLayer-34a390eb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageLayer-34a390eb.js","sources":["../../src/PRIVATE_MessageLayer/MessageLayer.tsx"],"sourcesContent":["import { ComponentChildren } from 'preact';\nimport { Flex } from '../UNSAFE_Flex';\nimport { WindowOverlay, WindowOverlayPlacement } from '../UNSAFE_WindowOverlay';\nimport { useUser } from '../hooks/UNSAFE_useUser';\nimport { Layer } from '../UNSAFE_Layer';\n\nconst positions = [\n  'top',\n  'top-left',\n  'top-right',\n  'top-start',\n  'top-end',\n  'bottom',\n  'bottom-left',\n  'bottom-right',\n  'bottom-start',\n  'bottom-end'\n] as const;\n\ntype Position = (typeof positions)[number];\n\ntype Offset =\n  | number\n  | {\n      horizontal?: number;\n      vertical?: number;\n    };\n\ntype Props = {\n  children: ComponentChildren;\n\n  /**\n   * Defines the fixed position where the notifications will to be placed on the screen.\n   * - top-start resolves to top-left in LTR (top-right in RTL)\n   * - top-end resolves to top-right in LTR (top-left in RTL)\n   * - bottom-start resolves to bottom-left in LTR (bottom-right in RTL)\n   * - bottom-end resolves to bottom-right in LTR (bottom-left in RTL)\n   *\n   * default bottom\n   */\n  position?: Position;\n\n  /**\n   * Defines an offset (in pixels) in the placement. Value can be supplied as a number or\n   * an object with horizontal and vertical values.\n   *\n   * default 0\n   */\n  offset?: Offset;\n\n  /**\n   * The test id which is assigned to the \"data-testid\" for the component's element.\n   * Used for test automation, it is assigned to the wrapper element rendered by the component.\n   */\n  testId?: string;\n};\n\nconst MessageLayer = ({ children, offset, testId, position = 'bottom' }: Props) => {\n  const side = position.split('-')[0];\n  let windowOverlayOffset;\n  if (typeof offset === 'number') {\n    windowOverlayOffset = { mainAxis: offset, crossAxis: offset };\n  } else if (side == 'top' || side == 'bottom') {\n    windowOverlayOffset = { mainAxis: offset?.vertical, crossAxis: offset?.horizontal };\n  } else {\n    windowOverlayOffset = { mainAxis: offset?.horizontal, crossAxis: offset?.vertical };\n  }\n\n  const { direction } = useUser();\n  const isLtr = direction === 'ltr';\n  let windowOverlayPlacement: WindowOverlayPlacement | undefined;\n  switch (position) {\n    case 'top-left':\n      windowOverlayPlacement = isLtr ? 'top-start' : 'top-end';\n      break;\n    case 'top-right':\n      windowOverlayPlacement = isLtr ? 'top-end' : 'top-start';\n      break;\n    case 'bottom-left':\n      windowOverlayPlacement = isLtr ? 'bottom-start' : 'bottom-end';\n      break;\n    case 'bottom-right':\n      windowOverlayPlacement = isLtr ? 'bottom-end' : 'bottom-start';\n      break;\n    default:\n      windowOverlayPlacement = position;\n      break;\n  }\n  return (\n    <Layer priority=\"messages\" level=\"topLevel\">\n      <WindowOverlay placement={windowOverlayPlacement} offset={windowOverlayOffset}>\n        <div data-testid={testId}>\n          <Flex direction=\"column\" gap=\"2x\">\n            {children}\n          </Flex>\n        </div>\n      </WindowOverlay>\n    </Layer>\n  );\n};\n\nexport type { Position, Offset };\nexport { MessageLayer, positions };\n"],"names":["_jsx"],"mappings":";;;;;;;;;AAMA,MAAM,SAAS,GAAG;IAChB,KAAK;IACL,UAAU;IACV,WAAW;IACX,WAAW;IACX,SAAS;IACT,QAAQ;IACR,aAAa;IACb,cAAc;IACd,cAAc;IACd,YAAY;EACH;AAwCX,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,GAAG,QAAQ,EAAS,KAAI;IAChF,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AACpC,IAAA,IAAI,mBAAmB,CAAC;AACxB,IAAA,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;QAC9B,mBAAmB,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC;KAC/D;SAAM,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,QAAQ,EAAE;AAC5C,QAAA,mBAAmB,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,CAAC;KACrF;SAAM;AACL,QAAA,mBAAmB,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;KACrF;AAED,IAAA,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,EAAE,CAAC;AAChC,IAAA,MAAM,KAAK,GAAG,SAAS,KAAK,KAAK,CAAC;AAClC,IAAA,IAAI,sBAA0D,CAAC;IAC/D,QAAQ,QAAQ;AACd,QAAA,KAAK,UAAU;YACb,sBAAsB,GAAG,KAAK,GAAG,WAAW,GAAG,SAAS,CAAC;YACzD,MAAM;AACR,QAAA,KAAK,WAAW;YACd,sBAAsB,GAAG,KAAK,GAAG,SAAS,GAAG,WAAW,CAAC;YACzD,MAAM;AACR,QAAA,KAAK,aAAa;YAChB,sBAAsB,GAAG,KAAK,GAAG,cAAc,GAAG,YAAY,CAAC;YAC/D,MAAM;AACR,QAAA,KAAK,cAAc;YACjB,sBAAsB,GAAG,KAAK,GAAG,YAAY,GAAG,cAAc,CAAC;YAC/D,MAAM;AACR,QAAA;YACE,sBAAsB,GAAG,QAAQ,CAAC;YAClC,MAAM;KACT;AACD,IAAA,QACEA,GAAC,CAAA,KAAK,IAAC,QAAQ,EAAC,UAAU,EAAC,KAAK,EAAC,UAAU,EAAA,QAAA,EACzCA,IAAC,aAAa,EAAA,EAAC,SAAS,EAAE,sBAAsB,EAAE,MAAM,EAAE,mBAAmB,EAC3E,QAAA,EAAAA,GAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,MAAM,EACtB,QAAA,EAAAA,GAAA,CAAC,IAAI,EAAC,EAAA,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,YAC9B,QAAQ,EAAA,CACJ,GACH,EACQ,CAAA,EAAA,CACV,EACR;AACJ;;;;"}