@oracle/oraclejet-preact 18.0.5 → 18.0.7

package/cjs/LiveRegion-3bc583c6.js

@@ -0,0 +1,41 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+
+var useTestId = require('./useTestId-e267a39d.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.useTestId(testId);
+    return (jsxRuntime.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] = hooks.useState('');
+    const updateText = hooks.useCallback(() => setLiveText(text), [text]);
+    const updateTextAsync = hooks.useCallback(() => setTimeout(updateText, timeout), [updateText, timeout]);
+    hooks.useEffect(() => {
+        const timeoutId = updateTextAsync();
+        return () => clearTimeout(timeoutId);
+    }, [updateTextAsync]);
+    return liveText;
+}
+
+exports.LiveRegion = LiveRegion;
+//# sourceMappingURL=LiveRegion-3bc583c6.js.map

package/cjs/LiveRegion-3bc583c6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveRegion-3bc583c6.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":["useTestId","_jsx","useState","useCallback","useEffect"],"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,GAAGA,mBAAS,CAAC,MAAM,CAAC,CAAC;AAEtC,IAAA,QACEC,cAAA,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,GAAGC,cAAQ,CAAC,EAAE,CAAC,CAAC;AAC7C,IAAA,MAAM,UAAU,GAAGC,iBAAW,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAChE,MAAM,eAAe,GAAGA,iBAAW,CAAC,MAAM,UAAU,CAAC,UAAU,EAAE,OAAO,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,CAAC;IAElGC,eAAS,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/cjs/MaxLengthCounter-9ab3f74b.js

@@ -0,0 +1,27 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+var classNames = require('./classNames-c14c6ef3.js');
+var usePress = require('./usePress-886180e4.js');
+require('./FormFieldContext-8418dc68.js');
+var useFormFieldContext = require('./useFormFieldContext-20f419ef.js');
+
+
+var hide = 'MaxLengthCounterStyles_hide__7dy9j71';
+var maxLengthCounterBase = 'MaxLengthCounterStyles_maxLengthCounterBase__7dy9j70';
+var spanStyles = 'MaxLengthCounterStyles_spanStyles__7dy9j72';
+
+const noop = () => { };
+function MaxLengthCounter({ maxLength, valueLength = 0, onClick }) {
+    const { isFocused } = useFormFieldContext.useFormFieldContext();
+    // We don't want mousedown on this component to do anything, so prevent the default behavior.
+    const killEvent = hooks.useCallback((event) => event.preventDefault(), []);
+    const textClasses = classNames.classNames([!isFocused && hide]);
+    const { pressProps } = usePress.usePress(onClick ?? noop);
+    return (jsxRuntime.jsx("div", { class: maxLengthCounterBase, onMouseDown: killEvent, ...pressProps, children: jsxRuntime.jsxs("span", { class: textClasses, children: [jsxRuntime.jsx("span", { class: spanStyles, children: valueLength }), jsxRuntime.jsx("span", { class: spanStyles, children: "/" }), jsxRuntime.jsx("span", { class: spanStyles, children: maxLength })] }) }));
+}
+
+exports.MaxLengthCounter = MaxLengthCounter;
+//# sourceMappingURL=MaxLengthCounter-9ab3f74b.js.map

package/cjs/MaxLengthCounter-9ab3f74b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaxLengthCounter-9ab3f74b.js","sources":["../../src/UNSAFE_TextArea/MaxLengthCounter.tsx"],"sourcesContent":["import { useCallback } from 'preact/hooks';\n\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { usePress } from '../hooks/UNSAFE_usePress';\nimport { useFormFieldContext } from '../hooks/UNSAFE_useFormFieldContext';\nimport { hide, maxLengthCounterBase, spanStyles } from './MaxLengthCounterStyles.css';\n\ntype Props = {\n  maxLength: number;\n  valueLength?: number;\n  onClick?: () => void; // the calling component should focus on the appropriate element when clicked.\n};\n\nconst noop = () => {};\n\nexport function MaxLengthCounter({ maxLength, valueLength = 0, onClick }: Props) {\n  const { isFocused } = useFormFieldContext();\n  // We don't want mousedown on this component to do anything, so prevent the default behavior.\n  const killEvent = useCallback((event: Event) => event.preventDefault(), []);\n  const textClasses = classNames([!isFocused && hide]);\n  const { pressProps } = usePress(onClick ?? noop);\n  return (\n    <div class={maxLengthCounterBase} onMouseDown={killEvent} {...pressProps}>\n      <span class={textClasses}>\n        <span class={spanStyles}>{valueLength}</span>\n        <span class={spanStyles}>/</span>\n        <span class={spanStyles}>{maxLength}</span>\n      </span>\n    </div>\n  );\n}\n"],"names":["useFormFieldContext","useCallback","classNames","usePress","_jsx","_jsxs"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAM,IAAI,GAAG,MAAK,GAAG,CAAC;AAEhB,SAAU,gBAAgB,CAAC,EAAE,SAAS,EAAE,WAAW,GAAG,CAAC,EAAE,OAAO,EAAS,EAAA;AAC7E,IAAA,MAAM,EAAE,SAAS,EAAE,GAAGA,uCAAmB,EAAE,CAAC;;AAE5C,IAAA,MAAM,SAAS,GAAGC,iBAAW,CAAC,CAAC,KAAY,KAAK,KAAK,CAAC,cAAc,EAAE,EAAE,EAAE,CAAC,CAAC;IAC5E,MAAM,WAAW,GAAGC,qBAAU,CAAC,CAAC,CAAC,SAAS,IAAI,IAAI,CAAC,CAAC,CAAC;IACrD,MAAM,EAAE,UAAU,EAAE,GAAGC,iBAAQ,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC;AACjD,IAAA,QACEC,cAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAE,SAAS,EAAM,GAAA,UAAU,YACtEC,eAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,WAAW,EAAA,QAAA,EAAA,CACtBD,yBAAM,KAAK,EAAE,UAAU,EAAA,QAAA,EAAG,WAAW,EAAQ,CAAA,EAC7CA,yBAAM,KAAK,EAAE,UAAU,EAAU,QAAA,EAAA,GAAA,EAAA,CAAA,EACjCA,yBAAM,KAAK,EAAE,UAAU,EAAG,QAAA,EAAA,SAAS,GAAQ,CACtC,EAAA,CAAA,EAAA,CACH,EACN;AACJ;;;;"}

package/cjs/MaxLengthLiveRegion-5e31c44e.js

@@ -0,0 +1,25 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var useDebounce = require('./useDebounce-4304cfbd.js');
+var useTranslationBundle = require('./useTranslationBundle-6b0281a9.js');
+var LiveRegion = require('./LiveRegion-3bc583c6.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.useDebounce(maxLength - valueLength, MAX_LENGTH_UPDATE_DELAY);
+    const translations = useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const remainingCharsTranslatedString = translations.formControl_maxLengthRemaining({
+        CHARACTER_COUNT: `${debouncedRemainingChars}`
+    });
+    return jsxRuntime.jsx(LiveRegion.LiveRegion, { testId: testId, children: remainingCharsTranslatedString });
+}
+
+exports.MaxLengthLiveRegion = MaxLengthLiveRegion;
+//# sourceMappingURL=MaxLengthLiveRegion-5e31c44e.js.map

package/cjs/MaxLengthLiveRegion-5e31c44e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaxLengthLiveRegion-5e31c44e.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":["useDebounce","useTranslationBundle","_jsx","LiveRegion"],"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,GAAGA,uBAAW,CAAC,SAAS,GAAG,WAAW,EAAE,uBAAuB,CAAC,CAAC;AAC9F,IAAA,MAAM,YAAY,GAAGC,yCAAoB,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,OAAOC,cAAA,CAACC,qBAAU,EAAC,EAAA,MAAM,EAAE,MAAM,EAAA,QAAA,EAAG,8BAA8B,EAAA,CAAc,CAAC;AACnF;;;;"}

package/cjs/Menu-658212ed.js

@@ -3,19 +3,19 @@
 
 var jsxRuntime = require('preact/jsx-runtime');
 var compat = require('preact/compat');
-var Dropdown = require('./Dropdown-34b8f141.js');
+var Dropdown = require('./Dropdown-00e73e4d.js');
 var hooks = require('preact/hooks');
 var mergeProps = require('./mergeProps-e3da7237.js');
 var classNames = require('./classNames-c14c6ef3.js');
-var useUser = require('./useUser-a4bfc560.js');
+var useUser = require('./useUser-8aaad5a7.js');
 var MenuItem = require('./MenuItem-c459d748.js');
 var UNSAFE_Menu_themes_MenuStyles_css = require('./UNSAFE_Menu/themes/MenuStyles.css.js');
-var useTestId = require('./useTestId-5e6af45d.js');
+var useTestId = require('./useTestId-e267a39d.js');
 var UNSAFE_Menu_themes_DropdownMenuStyles_css = require('./UNSAFE_Menu/themes/DropdownMenuStyles.css.js');
-var Sheet = require('./Sheet-86989265.js');
+var Sheet = require('./Sheet-73cb51b2.js');
 var useModal = require('./useModal-0739a528.js');
-var Layer = require('./Layer-0053053a.js');
-require('./LayerHost-a8c7f182.js');
+var Layer = require('./Layer-49394ca6.js');
+require('./LayerHost-7182bfaf.js');
 var UNSAFE_Menu_themes_SheetMenuStyles_css = require('./UNSAFE_Menu/themes/SheetMenuStyles.css.js');
 
 /**

package/cjs/MenuButton-1599ce50.js

@@ -10,12 +10,12 @@ var hooks = require('preact/hooks');
 var preact = require('preact');
 var mergeProps = require('./mergeProps-e3da7237.js');
 require('./logger-2b636482.js');
-require('./LayerHost-a8c7f182.js');
+require('./LayerHost-7182bfaf.js');
 var compat = require('preact/compat');
 
 
 require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
-require('./tooltipUtils-669c2ae0.js');
+require('./tooltipUtils-2228b0f7.js');
 
 require('./SelectMenuGroupContext-bbb4f7e0.js');
 require('./UNSAFE_Separator/themes/SeparatorStyles.css.js');

package/cjs/MenuItem-c459d748.js

@@ -8,7 +8,7 @@ var classNames = require('./classNames-c14c6ef3.js');
 var useId = require('./useId-6c0eeb27.js');
 var mergeProps = require('./mergeProps-e3da7237.js');
 var usePress = require('./usePress-886180e4.js');
-var useUser = require('./useUser-a4bfc560.js');
+var useUser = require('./useUser-8aaad5a7.js');
 var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
 var mergeInterpolations = require('./mergeInterpolations-6727b536.js');
 var flexitem = require('./flexitem-fee13e26.js');

package/cjs/Message-33a66325.js

@@ -3,14 +3,14 @@
 
 var jsxRuntime = require('preact/jsx-runtime');
 var hooks = require('preact/hooks');
-var Flex = require('./Flex-e7a85bef.js');
+var Flex = require('./Flex-ce16a2fa.js');
 var UNSAFE_MessageBanner_themes_redwood_MessageBannerTheme = require('./UNSAFE_MessageBanner/themes/redwood/MessageBannerTheme.js');
 var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
 var timer = require('./timer-c32f7725.js');
 var classNames = require('./classNames-c14c6ef3.js');
 var Close = require('./Close-1f08733f.js');
 var IconButton = require('./IconButton-28559efb.js');
-var useTranslationBundle = require('./useTranslationBundle-51f4c22c.js');
+var useTranslationBundle = require('./useTranslationBundle-6b0281a9.js');
 var PRIVATE_Message_themes_MessageStyles_css = require('./PRIVATE_Message/themes/MessageStyles.css.js');
 var preact = require('preact');
 var MessageFormattingUtils = require('./MessageFormattingUtils-42d84399.js');

package/cjs/MessageLayer-fc21a223.js

@@ -0,0 +1,61 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var Flex = require('./Flex-ce16a2fa.js');
+var WindowOverlay = require('./WindowOverlay-de3bd373.js');
+var useUser = require('./useUser-8aaad5a7.js');
+var Layer = require('./Layer-49394ca6.js');
+require('preact/compat');
+require('./LayerHost-7182bfaf.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.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 (jsxRuntime.jsx(Layer.Layer, { priority: "messages", level: "topLevel", children: jsxRuntime.jsx(WindowOverlay.WindowOverlay, { placement: windowOverlayPlacement, offset: windowOverlayOffset, children: jsxRuntime.jsx("div", { "data-testid": testId, children: jsxRuntime.jsx(Flex.Flex, { direction: "column", gap: "2x", children: children }) }) }) }));
+};
+
+exports.MessageLayer = MessageLayer;
+exports.positions = positions;
+//# sourceMappingURL=MessageLayer-fc21a223.js.map

package/cjs/MessageLayer-fc21a223.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageLayer-fc21a223.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":["useUser","_jsx","Layer","WindowOverlay","Flex"],"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,GAAGA,eAAO,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,QACEC,cAAC,CAAAC,WAAK,IAAC,QAAQ,EAAC,UAAU,EAAC,KAAK,EAAC,UAAU,EAAA,QAAA,EACzCD,eAACE,2BAAa,EAAA,EAAC,SAAS,EAAE,sBAAsB,EAAE,MAAM,EAAE,mBAAmB,EAC3E,QAAA,EAAAF,cAAA,CAAA,KAAA,EAAA,EAAA,aAAA,EAAkB,MAAM,EACtB,QAAA,EAAAA,cAAA,CAACG,SAAI,EAAC,EAAA,SAAS,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,YAC9B,QAAQ,EAAA,CACJ,GACH,EACQ,CAAA,EAAA,CACV,EACR;AACJ;;;;;"}

package/cjs/MessageToast-0b1d66ed.js

@@ -3,32 +3,32 @@
 
 var jsxRuntime = require('preact/jsx-runtime');
 var hooks = require('preact/hooks');
-require('./LayerHost-a8c7f182.js');
-var EnvironmentProvider = require('./EnvironmentProvider-75eb79f3.js');
+require('./LayerHost-7182bfaf.js');
+var EnvironmentProvider = require('./EnvironmentProvider-bfd5febc.js');
 var useMessagesFocusManager = require('./useMessagesFocusManager-1bf493a6.js');
 var useBreakpointValues = require('./useBreakpointValues-77cb15bb.js');
 require('./MessagesContext-4e939750.js');
 var useMessagesContext = require('./useMessagesContext-23d62331.js');
-var useTranslationBundle = require('./useTranslationBundle-51f4c22c.js');
+var useTranslationBundle = require('./useTranslationBundle-6b0281a9.js');
 var Message = require('./Message-33a66325.js');
 require('preact');
 var utils = require('./utils-7c0b6a81.js');
 var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
-var useTestId = require('./useTestId-5e6af45d.js');
+var useTestId = require('./useTestId-e267a39d.js');
 
 
 require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
-require('./tooltipUtils-669c2ae0.js');
+require('./tooltipUtils-2228b0f7.js');
 
 require('./IconButton-28559efb.js');
 
 require('./MessageFormattingUtils-42d84399.js');
 var MessagesManager = require('./MessagesManager-1ae749bf.js');
-var Flex = require('./Flex-e7a85bef.js');
+var Flex = require('./Flex-ce16a2fa.js');
 var FocusTrap = require('./FocusTrap-bfe96498.js');
-var LiveRegion = require('./LiveRegion-567427c5.js');
+var LiveRegion = require('./LiveRegion-3bc583c6.js');
 var UNSAFE_MessageToast_themes_redwood_MessageToastTheme = require('./UNSAFE_MessageToast/themes/redwood/MessageToastTheme.js');
-var MessageLayer = require('./MessageLayer-f9aa9828.js');
+var MessageLayer = require('./MessageLayer-fc21a223.js');
 
 /**
  * Animation states for toast messages

package/cjs/MessagesManager-1ae749bf.js

@@ -7,10 +7,10 @@ var SuccessS = require('./SuccessS-0f71f148.js');
 var ErrorS = require('./ErrorS-ed472612.js');
 var InformationS = require('./InformationS-6d8c46d3.js');
 var WarningS = require('./WarningS-5771be9f.js');
-var Flex = require('./Flex-e7a85bef.js');
+var Flex = require('./Flex-ce16a2fa.js');
 var PRIVATE_Message_themes_MessageStyles_css = require('./PRIVATE_Message/themes/MessageStyles.css.js');
-var useTranslationBundle = require('./useTranslationBundle-51f4c22c.js');
-var useTestId = require('./useTestId-5e6af45d.js');
+var useTranslationBundle = require('./useTranslationBundle-6b0281a9.js');
+var useTestId = require('./useTestId-e267a39d.js');
 var logger = require('./logger-2b636482.js');
 var soundUtils = require('./soundUtils-ff3c9c0d.js');
 var MessageFormattingUtils = require('./MessageFormattingUtils-42d84399.js');

package/cjs/MeterBar-0adbe81a.js

@@ -6,9 +6,9 @@ var TrackResizeContainer = require('./TrackResizeContainer-261fcfa5.js');
 var classNames = require('./classNames-c14c6ef3.js');
 var mergeProps = require('./mergeProps-e3da7237.js');
 var hooks = require('preact/hooks');
-var useUser = require('./useUser-a4bfc560.js');
-var useMeterDatatip = require('./useMeterDatatip-641afcc6.js');
-var useKeyboardEvents = require('./useKeyboardEvents-5e808fe3.js');
+var useUser = require('./useUser-8aaad5a7.js');
+var useMeterDatatip = require('./useMeterDatatip-945883f5.js');
+var useKeyboardEvents = require('./useKeyboardEvents-7ab0d8ee.js');
 var meterUtils = require('./meterUtils-9be969dc.js');
 var utils = require('./utils-7c0b6a81.js');
 var UNSAFE_MeterBar_themes_MeterBarContract_css = require('./UNSAFE_MeterBar/themes/MeterBarContract.css.js');
@@ -19,9 +19,9 @@ require('./TabbableModeContext-e99d527e.js');
 var useTabbableMode = require('./useTabbableMode-5c8fd9e5.js');
 var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
 var UNSAFE_MeterBar_themes_redwood_MeterBarTheme = require('./UNSAFE_MeterBar/themes/redwood/MeterBarTheme.js');
-var useTestId = require('./useTestId-5e6af45d.js');
+var useTestId = require('./useTestId-e267a39d.js');
 var useTextDimensions = require('./useTextDimensions-a651f0d4.js');
-var useCssVars = require('./useCssVars-bd95e715.js');
+var useCssVars = require('./useCssVars-9bea15a9.js');
 var Common_themes_themeContract_css = require('./Common/themes/themeContract.css.js');
 var LinearMeter = require('./LinearMeter-01730327.js');
 

package/cjs/MeterCircle-97a75b35.js

@@ -2,7 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('preact/jsx-runtime');
-var useUser = require('./useUser-a4bfc560.js');
+var useUser = require('./useUser-8aaad5a7.js');
 var hooks = require('preact/hooks');
 var mergeProps = require('./mergeProps-e3da7237.js');
 var classNames = require('./classNames-c14c6ef3.js');
@@ -14,14 +14,14 @@ var UNSAFE_MeterCircle_themes_MeterCircleContract_css = require('./UNSAFE_MeterC
 var Common_themes_themeContract_css = require('./Common/themes/themeContract.css.js');
 var utils = require('./utils-7c0b6a81.js');
 var TrackResizeContainer = require('./TrackResizeContainer-261fcfa5.js');
-var useMeterDatatip = require('./useMeterDatatip-641afcc6.js');
-var useKeyboardEvents = require('./useKeyboardEvents-5e808fe3.js');
+var useMeterDatatip = require('./useMeterDatatip-945883f5.js');
+var useKeyboardEvents = require('./useKeyboardEvents-7ab0d8ee.js');
 require('./TabbableModeContext-e99d527e.js');
 var useTabbableMode = require('./useTabbableMode-5c8fd9e5.js');
 var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
 var UNSAFE_MeterCircle_themes_redwood_MeterCircleTheme = require('./UNSAFE_MeterCircle/themes/redwood/MeterCircleTheme.js');
-var useTestId = require('./useTestId-5e6af45d.js');
-var useCssVars = require('./useCssVars-bd95e715.js');
+var useTestId = require('./useTestId-e267a39d.js');
+var useCssVars = require('./useCssVars-9bea15a9.js');
 var useTextDimensions = require('./useTextDimensions-a651f0d4.js');
 var CircularMeter = require('./CircularMeter-516284b6.js');
 

package/cjs/Modal-76b3a4d9.js

@@ -0,0 +1,264 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var compat = require('preact/compat');
+var useModal = require('./useModal-0739a528.js');
+var Layer = require('./Layer-49394ca6.js');
+require('./LayerHost-7182bfaf.js');
+var UNSAFE_Modal_themes_ModalStyles_css = require('./UNSAFE_Modal/themes/ModalStyles.css.js');
+var tabbableUtils = require('./tabbableUtils-39e647b7.js');
+
+const ModalBackdrop = compat.forwardRef(({ variant = 'scrim' }, ref) => {
+    const variantClasses = UNSAFE_Modal_themes_ModalStyles_css.multiVariantStyles({
+        backdrop: variant === 'transparent' ? 'transparent' : 'scrim'
+    });
+    return jsxRuntime.jsx("div", { ref: ref, class: variantClasses });
+});
+
+/**
+ * Returns an array of element's siblings.
+ *
+ * @param elem
+ * @returns
+ */
+function getSiblings(elem) {
+    const siblings = [];
+    let sibling = elem.previousSibling;
+    while (sibling != null) {
+        if (sibling.nodeType === 1) {
+            siblings.push(sibling);
+        }
+        sibling = sibling.previousSibling;
+    }
+    sibling = elem.nextSibling;
+    while (sibling != null) {
+        if (sibling.nodeType === 1) {
+            siblings.push(sibling);
+        }
+        sibling = sibling.nextSibling;
+    }
+    return siblings;
+}
+/**
+ * Sets aria-hidden=true on Modal ancestors and siblings.
+ *
+ * @param modal
+ * @returns An array of modified elements.
+ */
+function setAriaHiddenOnBackgroundElements(modal) {
+    if (!modal.modalRef) {
+        return [];
+    }
+    const ariaHiddenElements = [];
+    let node = modal.modalRef.parentElement;
+    do {
+        if (!node) {
+            break;
+        }
+        const siblings = getSiblings(node);
+        siblings.forEach((elem) => {
+            if (elem.tagName.toLowerCase() !== 'script' && elem.getAttribute('aria-hidden') !== 'true') {
+                ariaHiddenElements.push(elem);
+                elem.setAttribute('aria-hidden', 'true');
+            }
+        });
+        node = node.parentElement;
+    } while (node && node.tagName.toLowerCase() !== 'body');
+    return ariaHiddenElements;
+}
+/**
+ * Resets the aria-hidden state on previously aria-hidden elements.
+ *
+ * @param elements
+ */
+function resetAriaHiddenOnBackgroundElements(elements) {
+    elements.forEach((elem) => {
+        elem.removeAttribute('aria-hidden');
+    });
+}
+class ModalManager {
+    constructor() {
+        /**
+         * A flag indicating that the ModalManager's focus handler is installed
+         */
+        this.isFocusHandlerActive = false;
+        /**
+         * A focus handler to keep focus in the top-most modal.
+         */
+        this.focusHandler = (event) => {
+            const topModal = this.getTopModal();
+            const target = event.target;
+            // if there is an open modal and valid focus event target...
+            if (topModal && target) {
+                const modalElement = topModal.modalRef;
+                if (modalElement && !modalElement.contains(target)) {
+                    // Focus is outside of the top modal container, let's try to fix it
+                    const tabbableElements = tabbableUtils.allTabbableElements(modalElement);
+                    if (tabbableElements.length > 0) {
+                        // re-directing focus to the element inside top modal
+                        tabbableUtils.focusWithin(modalElement);
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }
+                }
+            }
+        };
+        this.getTopModal = () => {
+            return this.modals.length > 0 ? this.modals[this.modals.length - 1].modal : null;
+        };
+        // TODO: replace with a proper API
+        /**
+         * Checks if the legacy popup service is available
+         */
+        this.islegacyLayerSupportAvailable = () => {
+            return document.getElementById('__oj_zorder_container') !== null;
+        };
+        this.modals = [];
+        this.styleBackup = [];
+    }
+    /**
+     * Registers a modal with ModalManager
+     *
+     * @param modal
+     * @returns
+     */
+    push(modal) {
+        const modalIndex = this._findModalIndex(modal);
+        if (modalIndex !== -1) {
+            // Do not try to register the same modal multiple times
+            return;
+        }
+        this.modals.push({
+            modal: modal,
+            ariaHiddenChildren: setAriaHiddenOnBackgroundElements(modal)
+        });
+        // if this is the first modal in the container, block container scrolling
+        if (this.modals.length === 1) {
+            const ownerDocument = this._getOwnerDocument(modal.modalRef);
+            const scrollContainer = ownerDocument.body;
+            const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+            if (scrollBarWidth > 1) {
+                // in RTL, scrollbar is on the left
+                const scrollBarLeft = Math.round(document.documentElement.getBoundingClientRect().left) +
+                    document.documentElement.scrollLeft;
+                if (scrollBarLeft) {
+                    this.styleBackup.push({
+                        property: 'padding-left',
+                        value: scrollContainer.style.paddingLeft
+                    });
+                    scrollContainer.style.paddingLeft = `${scrollBarWidth}px`;
+                }
+                else {
+                    this.styleBackup.push({
+                        property: 'padding-right',
+                        value: scrollContainer.style.paddingRight
+                    });
+                    scrollContainer.style.paddingRight = `${scrollBarWidth}px`;
+                }
+            }
+            this.styleBackup.push({ property: 'overflow', value: scrollContainer.style.overflow });
+            this.styleBackup.push({ property: 'overflow-x', value: scrollContainer.style.overflowX });
+            this.styleBackup.push({ property: 'overflow-y', value: scrollContainer.style.overflowY });
+            scrollContainer.style.overflow = 'hidden';
+        }
+        // also install the focus handler when the first modal becomes active
+        if (this.modals.length === 1 && !this.islegacyLayerSupportAvailable()) {
+            document.addEventListener('focus', this.focusHandler, true);
+            this.isFocusHandlerActive = true;
+        }
+    }
+    /**
+     * Unegisters a modal from ModalManager
+     *
+     * @param modal
+     * @returns
+     */
+    pop(modal) {
+        const modalIndex = this._findModalIndex(modal);
+        if (modalIndex === -1) {
+            // modal to be removed not found!'
+            return;
+        }
+        if (modalIndex !== this.modals.length - 1) {
+            // trying to remove modal out of order!
+            return;
+        }
+        // remove the focus handler when the last modal is about to be removed
+        if (this.isFocusHandlerActive && this.modals.length === 1) {
+            document.removeEventListener('focus', this.focusHandler, true);
+        }
+        const modalDescriptor = this.modals.pop();
+        if (modalDescriptor) {
+            resetAriaHiddenOnBackgroundElements(modalDescriptor?.ariaHiddenChildren);
+        }
+        // if this was the last modal in the container, restore its overflow props
+        if (this.modals.length === 0) {
+            const ownerDocument = this._getOwnerDocument(modal.modalRef);
+            const scrollContainer = ownerDocument.body;
+            this.styleBackup.forEach(({ property, value }) => {
+                scrollContainer.style.setProperty(property, value);
+            });
+        }
+    }
+    isTopModal(modal) {
+        return this.modals.length > 0 && this.modals[this.modals.length - 1] === modal;
+    }
+    _findModalIndex(modal) {
+        let index = -1;
+        this.modals.forEach((elem, idx) => {
+            if (elem.modal === modal) {
+                index = idx;
+                return;
+            }
+        });
+        return index;
+    }
+    _getOwnerDocument(node) {
+        return (node && node.ownerDocument) || document;
+    }
+}
+
+// Global ModalManager singleton instance
+const globalModalManager = new ModalManager();
+/**
+ * Modal is a low-level component that provides the 'modality' feature with built-in overlay (scrim).
+ * It is typically used for building higher-level components (such as 'Dialog' or 'Popup') that need
+ * to support modal behavior preventing interaction with the rest of the page while the modal is open.
+ */
+const Modal = ({ children, isOpen, onBackdropClick, backdropVariant }) => {
+    // get the global ModalContext instance
+    const modalManager = globalModalManager;
+    const { backdropRef } = useModal.useModal({ isOpen, onBackdropClick });
+    // main modal element ref
+    const modalRef = compat.useRef(null);
+    // modal ref cache, required to lookup the item in modal manager when the actual ref is unmounted
+    const modal = compat.useRef({});
+    // populates and returns the modal ref cache
+    const getModal = () => {
+        modal.current.modalRef = modalRef.current;
+        return modal.current;
+    };
+    compat.useEffect(() => {
+        if (isOpen && modalRef.current) {
+            modalManager?.push(getModal());
+        }
+        else {
+            if (modal.current.modalRef) {
+                modalManager?.pop(getModal());
+            }
+        }
+    }, [isOpen, modalManager]);
+    compat.useEffect(() => {
+        const modalRef = modal.current.modalRef;
+        return () => {
+            if (modalRef) {
+                modalManager?.pop(getModal());
+            }
+        };
+    }, [modalManager]);
+    return isOpen ? (jsxRuntime.jsx(Layer.Layer, { isModal: true, children: jsxRuntime.jsxs("div", { ref: modalRef, class: UNSAFE_Modal_themes_ModalStyles_css.baseStyle, children: [jsxRuntime.jsx(ModalBackdrop, { ref: backdropRef, variant: backdropVariant }), children] }) })) : null;
+};
+
+exports.Modal = Modal;
+//# sourceMappingURL=Modal-76b3a4d9.js.map