@oracle/oraclejet-preact 14.0.5 → 14.1.0

package/es/UNSAFE_LiveRegion.js

@@ -1,9 +1,9 @@
-/* @oracle/oraclejet-preact: 14.0.5 */
+/* @oracle/oraclejet-preact: 14.1.0 */
 import { jsx } from 'preact/jsx-runtime';
 import "./UNSAFE_LiveRegion.css";
 import { useState, useCallback, useEffect } from 'preact/hooks';
 
-const offScreenStyle = "ept7qv";
+const offScreenStyle = "_1stsamn";
 /**
  * A helper component that renders an aria-live region
  *

package/es/UNSAFE_LiveRegion.js.map

@@ -1 +1 @@
-{"version":3,"file":"UNSAFE_LiveRegion.js","sources":["../../src/UNSAFE_LiveRegion/LiveRegion.tsx","../../src/UNSAFE_LiveRegion/index.ts"],"sourcesContent":["import { cssProps } from '@oracle/oraclejet-cssprops';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\n\nconst offScreenStyle = cssProps`${{\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  height: '1px',\n  margin: '-1px',\n  overflowX: 'hidden',\n  overflowY: 'hidden',\n  paddingTop: 0,\n  paddingRight: 0,\n  paddingBottom: 0,\n  paddingLeft: 0,\n  width: '1px',\n  position: 'absolute'\n}}`;\n\ntype Props = {\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({ atomic = 'false', children = '', timeout = 100, type = 'polite' }: Props) {\n  const ariaLiveText = useLiveText(children, timeout);\n\n  return (\n    <span aria-live={type} aria-atomic={atomic} class={offScreenStyle}>\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<string>();\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","/**\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 */\nexport { LiveRegion } from './LiveRegion';\n"],"names":["offScreenStyle","LiveRegion","atomic","children","timeout","type","_jsx","Object","assign","class","ariaLiveText","useLiveText","text","updateText","useCallback","setLiveText","timeoutId","updateTextAsync","clearTimeout","liveText"],"mappings":";;;;;AAGA,MAAAA,cAAA,GAAA,QAAA,CAAA;AAqCA;;;;;AAKG;;AACH,SAAAC,UAAA,CAAA;AAAAC,EAAAA,MAAA,GAAA,OAAA;AAAAC,EAAAA,QAAA,GAAA,EAAA;AAAAC,EAAAA,OAAA,GAAA,GAAA;AAAAC,EAAAA,IAAA,GAAA,QAAA;AAAA,CAAA,EAAA;;AAGE,EAAA,OAAAC,GAAA,CAAA,MAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAAA,IAAA,WAAA,EAAAH,IAAA;AAAA,IAAA,aAAA,EAAAH,MAAA;AAAAO,IAAAA,KAAA,EAAAT,cAAAA;AAAA,GAAA,EAAA;AAAAG,IAAAA,QAAA,EAAAO,YAAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAKF,CAAA;AAEA;;;;;;AAMG;;;AACH,SAAAC,WAAA,CAAAC,IAAA,EAAAR,OAAA,EAAA;;AAEE,EAAA,MAAAS,UAAA,GAAAC,WAAA,CAAA,MAAAC,WAAA,CAAAH,IAAA,CAAA,EAAA,CAAAA,IAAA,CAAA,CAAA,CAAA;;;IAIE,MAAAI,SAAA,GAAAC,eAAA,EAAA,CAAA;AAEA,IAAA,OAAA,MAAAC,YAAA,CAAAF,SAAA,CAAA,CAAA;AACF,KAAA,CAAAC,eAAA;AAEA,EAAA,OAAAE,QAAA,CAAA;AACF;;AC3EA;;;;;;AAMG;;;;;;;"}
+{"version":3,"file":"UNSAFE_LiveRegion.js","sources":["../../src/UNSAFE_LiveRegion/LiveRegion.tsx","../../src/UNSAFE_LiveRegion/index.ts"],"sourcesContent":["import { cssProps } from '@oracle/oraclejet-cssprops';\nimport { useCallback, useEffect, useState } from 'preact/hooks';\n\nconst offScreenStyle = cssProps`${{\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  height: '1px',\n  margin: '-1px',\n  overflowX: 'hidden',\n  overflowY: 'hidden',\n  paddingTop: 0,\n  paddingRight: 0,\n  paddingBottom: 0,\n  paddingLeft: 0,\n  width: '1px',\n  position: 'absolute'\n}}`;\n\ntype Props = {\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({ atomic = 'false', children = '', timeout = 100, type = 'polite' }: Props) {\n  const ariaLiveText = useLiveText(children, timeout);\n\n  return (\n    <span aria-live={type} aria-atomic={atomic} class={offScreenStyle}>\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<string>();\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","/**\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 */\nexport { LiveRegion } from './LiveRegion';\n"],"names":["offScreenStyle","LiveRegion","atomic","children","timeout","type","_jsx","Object","assign","class","ariaLiveText","useLiveText","text","updateText","useCallback","setLiveText","timeoutId","updateTextAsync","clearTimeout","liveText"],"mappings":";;;;;AAGA,MAAAA,cAAA,GAAA,UAAA,CAAA;AAqCA;;;;;AAKG;;AACH,SAAAC,UAAA,CAAA;AAAAC,EAAAA,MAAA,GAAA,OAAA;AAAAC,EAAAA,QAAA,GAAA,EAAA;AAAAC,EAAAA,OAAA,GAAA,GAAA;AAAAC,EAAAA,IAAA,GAAA,QAAA;AAAA,CAAA,EAAA;;AAGE,EAAA,OAAAC,GAAA,CAAA,MAAA,EAAAC,MAAA,CAAAC,MAAA,CAAA;AAAA,IAAA,WAAA,EAAAH,IAAA;AAAA,IAAA,aAAA,EAAAH,MAAA;AAAAO,IAAAA,KAAA,EAAAT,cAAAA;AAAA,GAAA,EAAA;AAAAG,IAAAA,QAAA,EAAAO,YAAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAKF,CAAA;AAEA;;;;;;AAMG;;;AACH,SAAAC,WAAA,CAAAC,IAAA,EAAAR,OAAA,EAAA;;AAEE,EAAA,MAAAS,UAAA,GAAAC,WAAA,CAAA,MAAAC,WAAA,CAAAH,IAAA,CAAA,EAAA,CAAAA,IAAA,CAAA,CAAA,CAAA;;;IAIE,MAAAI,SAAA,GAAAC,eAAA,EAAA,CAAA;AAEA,IAAA,OAAA,MAAAC,YAAA,CAAAF,SAAA,CAAA,CAAA;AACF,KAAA,CAAAC,eAAA;AAEA,EAAA,OAAAE,QAAA,CAAA;AACF;;AC3EA;;;;;;AAMG;;;;;;;"}

package/es/UNSAFE_LoadMoreCollection.js

@@ -1,5 +1,5 @@
-/* @oracle/oraclejet-preact: 14.0.5 */
-export { L as LoadMoreCollection } from './LoadMoreCollection-f7922120.js';
+/* @oracle/oraclejet-preact: 14.1.0 */
+export { L as LoadMoreCollection } from './LoadMoreCollection-735f7102.js';
 import 'preact/jsx-runtime';
 import 'preact/hooks';
 import './PRIVATE_Collection.js';

package/es/UNSAFE_Menu.css

@@ -1,19 +1,27 @@
-._1lcyzh4{cursor:var(--oj-c-PRIVATE-DO-NOT-USE-core-cursor-clickable) !important;width:100%;padding-top:var(--oj-PRIVATE-DO-NOT-USE-collection-list-cell-padding-vertical);padding-bottom:var(--oj-PRIVATE-DO-NOT-USE-collection-list-cell-padding-vertical);padding-inline-start:var(--oj-c-PRIVATE-DO-NOT-USE-menu-start-edge-to-start-icon-padding);padding-inline-end:var(--oj-c-PRIVATE-DO-NOT-USE-menu-end-icon-to-end-edge-padding);box-sizing:border-box;min-height:var( --oj-c-PRIVATE-NOT-USE-collection-list-row-height);display:flex;text-align:start;align-items:center;text-decoration-line:none !important;outline-style:none;}
-.hss3vf{outline-style:dotted;outline-offset:1px;outline-width:1px;outline-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color);}
-._9o5abz{color:var(--oj-c-PRIVATE-DO-NOT-USE-menu-text-color);}._9o5abz:active{background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-active);}
-._1mgwjqr:not(:active){background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-hover);}
-@media(hover:hover){._188ft56:hover:not(:active){background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-hover);}}
-.o1glxx{color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-danger-low);}.o1glxx:active{background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-danger-hover);color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-danger);}
-.a7fgiy{background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-danger-hover);color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-danger);}
-@media(hover:hover){._1r44he6:hover{background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-danger-hover);color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-danger);}}
-.odtze7{display:flex;align-items:center;overflow-x:hidden;overflow-y:hidden;}
-.whjmud{flex-grow:1;min-height:var(--oj-c-PRIVATE-DO-NOT-USE-menu-icon-size);}
-.asbpxa{flex-shrink:0;font-size:var(--oj-c-PRIVATE-DO-NOT-USE-menu-icon-size);height:var(--oj-c-PRIVATE-DO-NOT-USE-menu-icon-size);width:var(--oj-c-PRIVATE-DO-NOT-USE-menu-icon-size);}
-._7yp8p3{margin-inline-end:var(--oj-c-PRIVATE-DO-NOT-USE-menu-start-icon-to-label-padding);}
-.ruymt7{margin-inline-start:var(--oj-c-PRIVATE-DO-NOT-USE-menu-label-to-end-icon-padding);}
-._1ck7v7h{cursor:default !important;color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled);}
+._17876eg{cursor:var(--oj-c-PRIVATE-DO-NOT-USE-core-cursor-clickable) !important;width:100%;padding-top:var(--oj-PRIVATE-DO-NOT-USE-collection-list-cell-padding-vertical);padding-bottom:var(--oj-PRIVATE-DO-NOT-USE-collection-list-cell-padding-vertical);padding-inline-start:var(--oj-c-PRIVATE-DO-NOT-USE-menu-start-edge-to-start-icon-padding);padding-inline-end:var(--oj-c-PRIVATE-DO-NOT-USE-menu-end-icon-to-end-edge-padding);box-sizing:border-box;min-height:var( --oj-c-PRIVATE-NOT-USE-collection-list-row-height);display:flex;text-align:start;align-items:center;text-decoration-line:none !important;outline-style:none;}
+.qinu8s{outline-style:dotted;outline-offset:1px;outline-width:1px;outline-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color);}
+._8kqhsa{color:var(--oj-c-PRIVATE-DO-NOT-USE-menu-text-color);}._8kqhsa:active{background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-active);color:var(--oj-c-PRIVATE-DO-NOT-USE-menu-text-color);}
+._1pghquj:not(:active){background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-hover);}
+@media(hover:hover){.a3k8sy:hover:not(:active){background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-hover);}}
+._18l9dkr{color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-danger-low);}._18l9dkr:active{background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-danger-hover);color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-danger);}
+._123woi2{background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-danger-hover);color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-danger);}
+@media(hover:hover){.gfxxfs:hover{background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-danger-hover);color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-danger);}}
+._1homfv4{display:flex;align-items:center;overflow-x:hidden;overflow-y:hidden;}
+._1rmwgrq{flex-grow:1;min-height:var(--oj-c-PRIVATE-DO-NOT-USE-menu-icon-size);}
+._1hyxnw0{flex-shrink:0;font-size:var(--oj-c-PRIVATE-DO-NOT-USE-menu-icon-size);height:var(--oj-c-PRIVATE-DO-NOT-USE-menu-icon-size);width:var(--oj-c-PRIVATE-DO-NOT-USE-menu-icon-size);}
+.cl4q1q{margin-inline-end:var(--oj-c-PRIVATE-DO-NOT-USE-menu-start-icon-to-label-padding);}
+.yx2cjf{margin-inline-start:var(--oj-c-PRIVATE-DO-NOT-USE-menu-label-to-end-icon-padding);}
+._54xf9b{cursor:default !important;color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled);}._54xf9b:active{color:var(--oj-c-PRIVATE-DO-NOT-USE-core-text-color-disabled);}
 
-._15n5w0z{max-width:90vw;width:max-content;border-radius:var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-lg);box-shadow:var(--oj-c-PRIVATE-DO-NOT-USE-core-dropdown-box-shadow);background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-content);}
-.n61nb7{outline-style:none;padding-top:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x);padding-bottom:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x);}
+._1of8jrz{padding-top:var(--oj-c-PRIVATE-DO-NOT-USE-menu-divider-vertical-padding);padding-bottom:var(--oj-c-PRIVATE-DO-NOT-USE-menu-divider-vertical-padding);}
 
-._1c4q5zp{padding-top:var(--oj-c-PRIVATE-DO-NOT-USE-menu-divider-vertical-padding);padding-bottom:var(--oj-c-PRIVATE-DO-NOT-USE-menu-divider-vertical-padding);}
+._18mgcg8{max-width:90vw;width:max-content;border-radius:var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-lg);box-shadow:var(--oj-c-PRIVATE-DO-NOT-USE-core-dropdown-box-shadow);background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-content);}
+
+.pv4inq{position:fixed;top:0;bottom:0;left:0;right:0;z-index:var(--oj-c-PRIVATE-DO-NOT-USE-core-z-index-popup);}
+.x62vcr{position:absolute;top:0;bottom:0;left:0;right:0;}
+._10ke6sd{border-radius:16px 16px 0 0;background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-bg-color-content);position:absolute;bottom:0;left:0;right:0;max-height:calc(100% - 96px);overflow-y:auto;overscroll-behavior-y:contain;touch-action:pan-y;user-select:none;}
+._1w64tom{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-scrim-color);}
+
+.j91n3a{outline-style:none;}
+._1dohnnf{padding-top:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x);padding-bottom:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x);}
+._78wq11{padding-top:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x);padding-bottom:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x);}

package/es/UNSAFE_Menu.js

@@ -1,33 +1,34 @@
-/* @oracle/oraclejet-preact: 14.0.5 */
+/* @oracle/oraclejet-preact: 14.1.0 */
+import { _ as __rest } from './tslib.es6-821b2d99.js';
 import { jsx, jsxs } from 'preact/jsx-runtime';
-import { useCallback, useRef, useState, useEffect, useContext, useMemo, useLayoutEffect } from 'preact/hooks';
-import { Floating } from './UNSAFE_Floating.js';
 import { Layer } from './UNSAFE_Layer.js';
-import { useOutsideClick } from './hooks/UNSAFE_useOutsideClick.js';
+import { getClientHints } from './utils/PRIVATE_clientHints.js';
+import { useRef as useRef$1, useCallback as useCallback$1, forwardRef } from 'preact/compat';
+import "./UNSAFE_Menu.css";
+import { Floating } from './UNSAFE_Floating.js';
+import { useCallback, useRef, useState, useEffect, useContext, useMemo, useLayoutEffect } from 'preact/hooks';
 import { useCollectionFocusRing } from './hooks/PRIVATE_useCollectionFocusRing.js';
 import { mergeProps } from './utils/UNSAFE_mergeProps.js';
-import "./UNSAFE_Menu.css";
+import { classNames } from './utils/UNSAFE_classNames.js';
 import { createContext } from 'preact';
+import { useOutsideClick } from './hooks/UNSAFE_useOutsideClick.js';
+import { u as useModal } from './useModal-beb96266.js';
 import { Text } from './UNSAFE_Text.js';
 import { useHover } from './hooks/UNSAFE_useHover.js';
-import { classNames } from './utils/UNSAFE_classNames.js';
 import { useId } from './hooks/UNSAFE_useId.js';
 import { usePress } from './hooks/UNSAFE_usePress.js';
-import { getClientHints } from './utils/PRIVATE_clientHints.js';
 import { Divider } from './UNSAFE_Divider.js';
-import 'preact/compat';
-import './index-0265edc7.js';
+import './index-8cf878d9.js';
 import './hooks/UNSAFE_useUser.js';
 import './UNSAFE_Environment.js';
 import './utils/PRIVATE_floatingUtils.js';
 import './utils/PRIVATE_refUtils.js';
 import './utils/UNSAFE_arrayUtils.js';
-import './tslib.es6-f7fea2be.js';
 import './utils/UNSAFE_mergeInterpolations.js';
-import './_curry1-3c1ddbce.js';
-import './_curry3-0e6fcdae.js';
-import './_curry2-56616048.js';
-import './_has-069b6744.js';
+import './_curry1-ab762f3c.js';
+import './_curry3-77af75f1.js';
+import './_curry2-9cf34233.js';
+import './_has-e54ed87c.js';
 import './hooks/UNSAFE_useToggle.js';
 
 /**
@@ -199,11 +200,11 @@ const keyExtractor = (element) => {
 const getKeyboardCloseProps = (onClose) => {
     const onKeyDown = (event) => {
         if (event.key === 'Tab') {
-            onClose === null || onClose === void 0 ? void 0 : onClose({ reason: 'tabbing' });
+            onClose === null || onClose === void 0 ? void 0 : onClose({ reason: 'dismissed' });
             event.preventDefault(); //TODO: Revisit this since we should let focus be at its natural flow, quick solution for now to focus correct item in main use case
         }
         else if (event.key === 'Escape') {
-            onClose === null || onClose === void 0 ? void 0 : onClose({ reason: 'cancel' });
+            onClose === null || onClose === void 0 ? void 0 : onClose({ reason: 'dismissed' });
         }
     };
     return { onKeyDown };
@@ -224,23 +225,20 @@ const getMenuPointerDown = () => {
     return { onPointerDown };
 };
 
-const styles$2 = {
-  // TODO: Handle vertical and horizontal overflow. Get rid of maxWidth on a next drop so horizontal and also vertical flow is handled correctly.
-  // It's hard to relay just in css, we might need to relay on some kind of observer. Maybe should be handled on Floating/Dropdown component.
-  floatingContainer: "_15n5w0z",
-  menuContainer: "n61nb7"
+const styles$4 = {
+  menuContainer: "j91n3a",
+  dropdownMenuContainer: "_1dohnnf",
+  sheetMenuContainer: "_78wq11"
 };
-const Menu = ({
+const MenuContainer = ({
   children,
-  isOpen = false,
-  anchorRef,
   onClose,
   accessibleLabel,
-  initialFocus = 'menu'
+  initialFocus = 'menu',
+  display
 }) => {
-  const floatingRef = useRef(null);
   const menuContainerRef = useRef(null);
-  const isOpenPrevValue = useRef();
+  const initialFocusRef = useRef(initialFocus);
   const [currentKey, setCurrentKey] = useState();
   const [possibleFocus, setPossibleFocus] = useState('pending');
   const changeKey = useCallback(detail => {
@@ -258,89 +256,262 @@ const Menu = ({
   const {
     currentKeyProps
   } = useMenuCurrentKey(element => keyExtractor(element), getPrevNextKey(menuContainerRef.current, true, currentKey), getPrevNextKey(menuContainerRef.current, false, currentKey), () => getFirstVisibleKey(menuContainerRef.current), () => getLastVisibleKey(menuContainerRef.current), currentKey, changeKey);
-  const useOutsideClickHandler = useCallback(e => {
+  useEffect(() => {
+    const menuContainer = menuContainerRef.current;
+
+    if (menuContainer) {
+      if (initialFocusRef.current === 'menu') {
+        // 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
+        setTimeout(() => {
+          menuContainer.focus();
+        }, 0);
+        setPossibleFocus('menu');
+      } else {
+        const firstItemKey = getFirstVisibleKey(menuContainerRef.current);
+
+        if (firstItemKey) {
+          changeKey({
+            value: firstItemKey
+          });
+        } else {
+          setPossibleFocus('menu');
+        }
+      }
+    }
+  }, [initialFocusRef, changeKey]); // TODO - Reuse a dropdown component instead of creating floating by ourselves.
+
+  return jsx("div", Object.assign({
+    ref: menuContainerRef,
+    tabIndex: possibleFocus === 'firstItem' ? -1 : 0,
+    role: "menu",
+    "aria-label": accessibleLabel,
+    class: classNames([styles$4.menuContainer, styles$4[`${display}MenuContainer`]])
+  }, mergeProps(focusRingProps, currentKeyProps, getMenuPointerDown(), getKeyboardCloseProps(onClose)), {
+    children: jsx(MenuContext.Provider, Object.assign({
+      value: {
+        onClose,
+        currentKey,
+        showFocusRing
+      }
+    }, {
+      children: children
+    }))
+  }));
+};
+
+const styles$3 = {
+  // TODO: Handle vertical and horizontal overflow. Get rid of maxWidth on a next drop so horizontal and also vertical flow is handled correctly.
+  // It's hard to relay just in css, we might need to relay on some kind of observer. Maybe should be handled on Floating/Dropdown component.
+  base: "_18mgcg8"
+};
+const DropdownMenu = _a => {
+  var {
+    anchorRef,
+    onClose
+  } = _a,
+      dropdownMenuProps = __rest(_a, ["anchorRef", "onClose"]);
+
+  const floatingRef = useRef$1(null);
+  const useOutsideClickHandler = useCallback$1(e => {
     onClose === null || onClose === void 0 ? void 0 : onClose({
       reason: 'outsideClick',
       target: e.target
     });
   }, [onClose]);
   useOutsideClick({
-    isDisabled: !isOpen,
     ref: [floatingRef],
     handler: useOutsideClickHandler
   });
-  useEffect(() => {
-    if (isOpen === isOpenPrevValue.current) return;
-
-    if (isOpen) {
-      const menuContainer = menuContainerRef.current;
-
-      if (menuContainer) {
-        if (initialFocus === 'menu') {
-          // 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
-          setTimeout(() => {
-            menuContainer.focus();
-          }, 0);
-          setPossibleFocus('menu');
-        } else {
-          const firstItemKey = getFirstVisibleKey(menuContainerRef.current);
-
-          if (firstItemKey) {
-            changeKey({
-              value: firstItemKey
-            });
-          } else {
-            setPossibleFocus('menu');
-          }
-        }
-      }
-    } else {
-      setPossibleFocus('pending');
-      setCurrentKey(undefined);
+  return jsx(Floating, Object.assign({
+    class: styles$3.base,
+    ref: floatingRef,
+    anchorRef: anchorRef,
+    placement: "bottom-start",
+    offsetValue: {
+      mainAxis: 4,
+      crossAxis: 0
     }
-
-    isOpenPrevValue.current = isOpen;
-  }, [isOpen, initialFocus, changeKey]); // TODO - Reuse a dropdown component instead of creating floating by ourselves.
-
-  return !isOpen ? null : jsx(Layer, Object.assign({
-    logicalParentRef: anchorRef
   }, {
-    children: jsx(Floating, Object.assign({
-      class: styles$2.floatingContainer,
-      ref: floatingRef,
-      anchorRef: anchorRef,
-      placement: "bottom-start",
-      offsetValue: {
-        mainAxis: 4,
-        crossAxis: 0
+    children: jsx("div", Object.assign({
+      style: {
+        minWidth: `${anchorRef.current && anchorRef.current.offsetWidth > MENU_MIN_WIDTH ? anchorRef.current.offsetWidth : MENU_MIN_WIDTH}px`
       }
     }, {
-      children: jsx(MenuContext.Provider, Object.assign({
-        value: {
-          onClose,
-          currentKey,
-          showFocusRing
-        }
-      }, {
-        children: jsx("div", Object.assign({
-          style: {
-            minWidth: `${anchorRef.current && anchorRef.current.offsetWidth > MENU_MIN_WIDTH ? anchorRef.current.offsetWidth : MENU_MIN_WIDTH}px`
-          },
-          ref: menuContainerRef,
-          tabIndex: possibleFocus === 'firstItem' ? -1 : 0,
-          role: "menu",
-          "aria-label": accessibleLabel,
-          class: styles$2.menuContainer
-        }, mergeProps(focusRingProps, currentKeyProps, getMenuPointerDown(), getKeyboardCloseProps(onClose)), {
-          children: children
-        }))
+      children: jsx(MenuContainer, Object.assign({}, Object.assign({
+        onClose
+      }, dropdownMenuProps), {
+        display: "dropdown"
       }))
     }))
   }));
 };
 const MENU_MIN_WIDTH = 200;
 
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * Licensed under The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+/*This "private" hook will live until we end up stating a final decision on useSwipe hook.
+For that hook to work, element that use it has to set touch-action:none;, since pointer events
+are canceled once a touch action is going to be handled by the browser. This works for most
+of the components that don't scroll. But if the component scroll, there is a need for the browser to
+handle scroll which is imposible with a hook just using pointer events.
+*/
+function useMenuSwipe(onSwipe, { threshold = 10, maximumTime = 300, tolerance = 50, isDisabled = false } = {
+    threshold: 10,
+    maximumTime: 300,
+    tolerance: 50,
+    isDisabled: false
+}) {
+    const ref = useRef({
+        pointerDownId: 0,
+        startTime: null,
+        prevpageX: 0,
+        prevpageY: 0,
+        elementScrollTop: 0
+    });
+    const clearSwipe = useCallback(() => {
+        ref.current = {
+            pointerDownId: null,
+            startTime: 0,
+            prevpageX: 0,
+            prevpageY: 0,
+            elementScrollTop: 0
+        };
+    }, []);
+    const onTouchStart = useCallback((e) => {
+        const touchobj = e.changedTouches[0];
+        if (!ref.current.pointerDownId) {
+            ref.current = {
+                pointerDownId: touchobj.identifier,
+                startTime: e.timeStamp,
+                prevpageX: touchobj.pageX,
+                prevpageY: touchobj.pageY,
+                elementScrollTop: e.currentTarget.scrollTop
+            };
+        }
+        else {
+            clearSwipe();
+        }
+    }, [clearSwipe]);
+    const onTouchEnd = useCallback((ev) => {
+        const touchobj = ev.changedTouches[0];
+        if (touchobj.identifier === ref.current.pointerDownId) {
+            if (ref.current.startTime && ev.timeStamp - ref.current.startTime < maximumTime) {
+                if (touchobj.pageY - ref.current.prevpageY > threshold &&
+                    Math.abs(touchobj.pageX - ref.current.prevpageX) <= tolerance &&
+                    ref.current.elementScrollTop === 0) {
+                    onSwipe === null || onSwipe === void 0 ? void 0 : onSwipe({ direction: 'down' });
+                }
+            }
+        }
+        // state would be reset to its original state whether swipe is completed or cancelled
+        clearSwipe();
+    }, [threshold, onSwipe, clearSwipe, maximumTime, tolerance]);
+    const swipeProps = isDisabled
+        ? {}
+        : {
+            /** event handlers to spread on the target element. */
+            onTouchStart,
+            onTouchEnd,
+            ontouchcancel: clearSwipe
+        };
+    return {
+        swipeProps
+    };
+}
+
+const styles$2 = {
+  modalWrapper: "pv4inq",
+  modalContainer: "x62vcr",
+  sheetMenuContainerWrapper: "_10ke6sd",
+  modalBackdrop: "_1w64tom"
+};
+
+const ModalWrapper = ({
+  children
+}) => jsx("div", Object.assign({
+  class: styles$2.modalWrapper
+}, {
+  children: children
+}));
+
+const ModalContainer = forwardRef(({
+  children
+}, ref) => jsx("div", Object.assign({
+  class: styles$2.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 = () => jsx("div", {
+  class: styles$2.modalBackdrop
+});
+
+const SheetMenu = _a => {
+  var {
+    onClose
+  } = _a,
+      menuProps = __rest(_a, ["onClose"]);
+
+  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 === null || onClose === void 0 ? void 0 : onClose({
+      reason: 'dismissed'
+    });
+  }, [onClose]);
+  const {
+    modalRef
+  } = useModal({
+    isOpen: true,
+    onBackdropClick: dismissHandler
+  }); //TODO: Use useSwipe when it works on components that could scroll.
+
+  const {
+    swipeProps
+  } = useMenuSwipe(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 jsxs(ModalWrapper, {
+    children: [jsx(ModalBackdrop, {}), jsx(ModalContainer, Object.assign({
+      ref: modalRef
+    }, {
+      children: jsx("div", Object.assign({
+        class: styles$2.sheetMenuContainerWrapper
+      }, swipeProps, {
+        children: jsx(MenuContainer, Object.assign({}, Object.assign(Object.assign({}, menuProps), {
+          onClose
+        }), {
+          display: "sheet"
+        }))
+      }))
+    }))]
+  });
+};
+
+const { deviceType } = getClientHints();
+const isMobile = deviceType === 'phone';
+const Menu = (_a) => {
+    var { isOpen, anchorRef } = _a, menuProps = __rest(_a, ["isOpen", "anchorRef"]);
+    // TODO - Reuse a dropdown component instead of creating floating by ourselves.
+    return !isOpen ? null : (jsx(Layer, Object.assign({ logicalParentRef: anchorRef }, { children: isMobile ? jsx(SheetMenu, Object.assign({}, menuProps)) : jsx(DropdownMenu, Object.assign({}, Object.assign({ anchorRef }, menuProps))) })));
+};
+
 /**
  * @license
  * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
@@ -358,33 +529,33 @@ function useMenuContext() {
 }
 
 const styles$1 = {
-  menuItemContainer: "_1lcyzh4",
-  focused: "hss3vf",
+  menuItemContainer: "_17876eg",
+  focused: "qinu8s",
   variant: {
     default: {
-      menuItemContainer: "_9o5abz",
-      hover: "_1mgwjqr",
-      pseudohover: "_188ft56"
+      menuItemContainer: "_8kqhsa",
+      hover: "_1pghquj",
+      pseudohover: "a3k8sy"
     },
     destructive: {
-      menuItemContainer: "o1glxx",
-      hover: "a7fgiy",
-      pseudohover: "_1r44he6"
+      menuItemContainer: "_18l9dkr",
+      hover: "_123woi2",
+      pseudohover: "gfxxfs"
     }
   },
-  iconLabelContainer: "odtze7",
-  labelContainer: "whjmud",
-  iconContainer: "asbpxa",
-  startIconContainer: "_7yp8p3",
-  endIconContainer: "ruymt7",
-  disabledContainer: "_1ck7v7h"
+  iconLabelContainer: "_1homfv4",
+  labelContainer: "_1rmwgrq",
+  iconContainer: "_1hyxnw0",
+  startIconContainer: "cl4q1q",
+  endIconContainer: "yx2cjf",
+  disabledContainer: "_54xf9b"
 };
 function MenuItem(props) {
   return jsx(BaseMenuItem, Object.assign({}, props, {
     role: "menuitem"
   }));
 }
-const isHybrid = getClientHints().isHybrid;
+const isHybrid = getClientHints().hoverSupport === 'events';
 function BaseMenuItem({
   label,
   onAction,
@@ -469,7 +640,7 @@ function BaseMenuItem({
 }
 
 const styles = {
-  menuDividerContainer: "_1c4q5zp"
+  menuDividerContainer: "_1of8jrz"
 };
 function MenuDivider() {
   return jsx("div", Object.assign({