@oracle/oraclejet-preact 18.1.4 → 18.1.6

package/es/ListItemLayout-af86b17d.js

@@ -0,0 +1,110 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { G as Grid } from './Grid-238d8757.js';
+import { c as classNames } from './classNames-4e12b00d.js';
+import { styles } from './UNSAFE_ListItemLayout/themes/ListItemLayoutStyles.css.js';
+
+// TODO: revisit idea of negative margin when selector has a proper API for handling spacing
+// Jira: JET-54543
+/**
+ * A ListItemLayout component represents a layout used for list view item elements.
+ */
+function ListItemLayout({ children, selector, leading, primary, secondary, tertiary, overline, metadata, trailing, action, quaternary, navigation, verticalAlignment = 'middle' }) {
+    // generate grid skeleton, adding cells based on which props are defined
+    const { columnsTemplate, firstCell, secondCell, lastCell, hasSecondRow } = verticalAlignment === 'top'
+        ? getOptInColumnsTemplate(selector, leading, metadata, trailing, action, quaternary, navigation)
+        : getColumnsTemplate(selector, leading, metadata, trailing, action, quaternary, navigation);
+    // extra row placed before the other rows, only used with top alignment
+    const topRow = overline && verticalAlignment === 'top'
+        ? [
+            firstCell && jsx("span", { children: " " }),
+            secondCell && jsx("span", { children: " " }),
+            jsx("div", { className: styles.topRowStyles, children: overline }),
+            lastCell && jsx("span", { children: " " })
+        ]
+        : null;
+    // if ListItemLayout component has a child (ListItemTextLayout) then render that instead of individual props
+    const textArea = children ? (jsx("div", { className: styles.childrenStyles, children: children })) : (jsxs("div", { className: styles.flexColumnStyles, children: [verticalAlignment === 'top' ? null : jsx("div", { children: overline }), jsx("div", { children: primary }), jsx("div", { children: secondary }), jsx("div", { children: tertiary })] }));
+    // a second row is needed when quaternary or navigation are defined
+    const secondRow = hasSecondRow
+        ? [
+            firstCell && jsx("span", { children: " " }),
+            secondCell && jsx("span", { children: " " }),
+            jsx("div", { className: classNames([
+                    verticalAlignment === 'top' ? styles.optInTopPaddingStyles : '',
+                    styles.rowAlignStyles
+                ]), children: quaternary }),
+            lastCell && (jsx("div", { className: classNames([
+                    verticalAlignment === 'top' ? styles.optInTopPaddingStyles : '',
+                    styles.endJustifyStyles
+                ]), children: navigation }))
+        ]
+        : null;
+    return (jsxs(Grid, { gap: verticalAlignment === 'top' ? '0x' : '4x', gridTemplateColumns: columnsTemplate, children: [topRow, firstCell, secondCell, jsx("div", { className: styles.centerVerticalStyles, children: textArea }), lastCell, secondRow] }));
+}
+function getColumnsTemplate(selector, leading, metadata, trailing, action, quaternary, navigation) {
+    const columnsTemplateBuilder = [];
+    let firstCell = null;
+    if (selector) {
+        columnsTemplateBuilder.push('auto');
+        firstCell = jsx("div", { className: styles.selectorStyles, children: selector });
+    }
+    let secondCell = null;
+    if (leading) {
+        columnsTemplateBuilder.push('auto');
+        secondCell = (jsx("div", { className: classNames([styles.centerVerticalStyles, styles.displayFlexStyle]), children: leading }));
+    }
+    columnsTemplateBuilder.push('1fr'); // Text area always gets 1 full fraction of allotted space
+    let lastCell = null;
+    if (metadata || trailing || action || navigation) {
+        columnsTemplateBuilder.push('auto');
+        lastCell = (jsxs("div", { className: styles.flexRowStyles, children: [jsx("div", { className: classNames([
+                        styles.centerVerticalStyles,
+                        metadata ? styles.leftPaddingStyles : ''
+                    ]), children: metadata }), jsx("div", { className: classNames([
+                        styles.centerVerticalStyles,
+                        trailing ? styles.leftPaddingStyles : ''
+                    ]), children: trailing }), jsx("div", { className: classNames([styles.centerVerticalStyles, action ? styles.actionStyles : '']), children: action })] }));
+    }
+    const columnsTemplate = columnsTemplateBuilder.join(' ');
+    const hasSecondRow = quaternary || navigation ? true : false;
+    return { columnsTemplate, firstCell, secondCell, lastCell, hasSecondRow };
+}
+function getOptInColumnsTemplate(selector, leading, metadata, trailing, action, quaternary, navigation) {
+    const columnsTemplateBuilder = [];
+    let firstCell = null;
+    if (selector) {
+        columnsTemplateBuilder.push('auto');
+        firstCell = jsx("div", { className: styles.optInSelectorStyles, children: selector });
+    }
+    let secondCell = null;
+    if (selector || leading) {
+        columnsTemplateBuilder.push('auto');
+        secondCell = (jsx("div", { className: classNames([
+                selector ? styles.leftPaddingStyles : '',
+                styles.topAlignStyles,
+                leading ? styles.optInRightPaddingStyles : ''
+            ]), children: leading }));
+    }
+    columnsTemplateBuilder.push('1fr'); // Text area always gets 1 full fraction of allotted space
+    let lastCell = null;
+    if (metadata || trailing || action || navigation) {
+        columnsTemplateBuilder.push('auto');
+        lastCell = (jsx("div", { className: classNames([styles.topAlignStyles]), children: jsxs("div", { className: classNames([styles.optInExtraStyles, styles.flexRowStyles]), children: [jsx("div", { className: classNames([
+                            styles.centerVerticalStyles,
+                            metadata ? styles.leftPaddingStyles : ''
+                        ]), children: metadata }), jsx("div", { className: classNames([
+                            styles.centerVerticalStyles,
+                            trailing ? styles.leftPaddingStyles : ''
+                        ]), children: trailing }), jsx("div", { className: classNames([
+                            styles.centerVerticalStyles,
+                            action ? styles.actionStyles : ''
+                        ]), children: action })] }) }));
+    }
+    const columnsTemplate = columnsTemplateBuilder.join(' ');
+    const hasSecondRow = quaternary || navigation ? true : false;
+    return { columnsTemplate, firstCell, secondCell, lastCell, hasSecondRow };
+}
+
+export { ListItemLayout as L };
+//# sourceMappingURL=ListItemLayout-af86b17d.js.map

package/es/ListItemLayout-af86b17d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemLayout-af86b17d.js","sources":["../../src/UNSAFE_ListItemLayout/ListItemLayout.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ComponentChildren, JSX } from 'preact';\nimport { Grid } from '../UNSAFE_Grid';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { styles } from './themes/ListItemLayoutStyles.css';\n\ntype IntrinsicProps = Pick<JSX.HTMLAttributes<HTMLDivElement>, 'children'>;\ntype Props = {\n  children?: ComponentChildren;\n  /**\n   * The centermost element that should display more important data.\n   */\n  primary?: ComponentChildren;\n  /**\n   * Render Selector component in the leftmost column of the grid.\n   */\n  selector?: ComponentChildren;\n  /**\n   * Visual element to the left of the primary section.\n   * Supports image, avatar, badge, initials, or icon.\n   */\n  leading?: ComponentChildren;\n  /**\n   * A section that is rendered above the primary line.\n   */\n  overline?: ComponentChildren;\n  /**\n   * A section below the primary line.\n   */\n  secondary?: ComponentChildren;\n  /**\n   * Another section below secondary.\n   */\n  tertiary?: ComponentChildren;\n  /**\n   * Provides information about other data.\n   * Some examples of basic metadata are author, date created, date modified, file size, abbreviations, etc.\n   */\n  metadata?: ComponentChildren;\n  /**\n   * Visual element to the right of the primary section and metadata.\n   * Example components are image, avatar, badge, initials, or icon.\n   */\n  trailing?: ComponentChildren;\n  /**\n   * The action prop displays either one primary action or one or more secondary actions.\n   * A common example is using Toolbar.\n   */\n  action?: ComponentChildren;\n  /**\n   * Additional section separated with a space between itself and tertiary.\n   */\n  quaternary?: ComponentChildren;\n  /**\n   * Navigation should normally be used for linking away from the layout.\n   */\n  navigation?: ComponentChildren;\n  /**\n   * Aligns content to top of cell and moves overline to a row above primary.\n   */\n  verticalAlignment?: 'middle' | 'top';\n} & IntrinsicProps;\n\n// TODO: revisit idea of negative margin when selector has a proper API for handling spacing\n// Jira: JET-54543\n/**\n * A ListItemLayout component represents a layout used for list view item elements.\n */\nexport function ListItemLayout({\n  children,\n  selector,\n  leading,\n  primary,\n  secondary,\n  tertiary,\n  overline,\n  metadata,\n  trailing,\n  action,\n  quaternary,\n  navigation,\n  verticalAlignment = 'middle'\n}: Props) {\n  // generate grid skeleton, adding cells based on which props are defined\n  const { columnsTemplate, firstCell, secondCell, lastCell, hasSecondRow } =\n    verticalAlignment === 'top'\n      ? getOptInColumnsTemplate(\n          selector,\n          leading,\n          metadata,\n          trailing,\n          action,\n          quaternary,\n          navigation\n        )\n      : getColumnsTemplate(selector, leading, metadata, trailing, action, quaternary, navigation);\n\n  // extra row placed before the other rows, only used with top alignment\n  const topRow =\n    overline && verticalAlignment === 'top'\n      ? [\n          firstCell && <span> </span>,\n          secondCell && <span> </span>,\n          <div className={styles.topRowStyles}>{overline}</div>,\n          lastCell && <span> </span>\n        ]\n      : null;\n\n  // if ListItemLayout component has a child (ListItemTextLayout) then render that instead of individual props\n  const textArea = children ? (\n    <div className={styles.childrenStyles}>{children}</div>\n  ) : (\n    <div className={styles.flexColumnStyles}>\n      {verticalAlignment === 'top' ? null : <div>{overline}</div>}\n      <div>{primary}</div>\n      <div>{secondary}</div>\n      <div>{tertiary}</div>\n    </div>\n  );\n\n  // a second row is needed when quaternary or navigation are defined\n  const secondRow = hasSecondRow\n    ? [\n        firstCell && <span> </span>,\n        secondCell && <span> </span>,\n        <div\n          className={classNames([\n            verticalAlignment === 'top' ? styles.optInTopPaddingStyles : '',\n            styles.rowAlignStyles\n          ])}>\n          {quaternary}\n        </div>,\n        lastCell && (\n          <div\n            className={classNames([\n              verticalAlignment === 'top' ? styles.optInTopPaddingStyles : '',\n              styles.endJustifyStyles\n            ])}>\n            {navigation}\n          </div>\n        )\n      ]\n    : null;\n\n  return (\n    <Grid gap={verticalAlignment === 'top' ? '0x' : '4x'} gridTemplateColumns={columnsTemplate}>\n      {topRow}\n      {firstCell}\n      {secondCell}\n      <div className={styles.centerVerticalStyles}>{textArea}</div>\n      {lastCell}\n      {secondRow}\n    </Grid>\n  );\n}\n\nfunction getColumnsTemplate(\n  selector: ComponentChildren,\n  leading: ComponentChildren,\n  metadata: ComponentChildren,\n  trailing: ComponentChildren,\n  action: ComponentChildren,\n  quaternary: ComponentChildren,\n  navigation: ComponentChildren\n) {\n  const columnsTemplateBuilder = [];\n\n  let firstCell = null;\n  if (selector) {\n    columnsTemplateBuilder.push('auto');\n    firstCell = <div className={styles.selectorStyles}>{selector}</div>;\n  }\n\n  let secondCell = null;\n  if (leading) {\n    columnsTemplateBuilder.push('auto');\n    secondCell = (\n      <div className={classNames([styles.centerVerticalStyles, styles.displayFlexStyle])}>\n        {leading}\n      </div>\n    );\n  }\n\n  columnsTemplateBuilder.push('1fr'); // Text area always gets 1 full fraction of allotted space\n\n  let lastCell = null;\n  if (metadata || trailing || action || navigation) {\n    columnsTemplateBuilder.push('auto');\n    lastCell = (\n      <div className={styles.flexRowStyles}>\n        <div\n          className={classNames([\n            styles.centerVerticalStyles,\n            metadata ? styles.leftPaddingStyles : ''\n          ])}>\n          {metadata}\n        </div>\n        <div\n          className={classNames([\n            styles.centerVerticalStyles,\n            trailing ? styles.leftPaddingStyles : ''\n          ])}>\n          {trailing}\n        </div>\n        <div\n          className={classNames([styles.centerVerticalStyles, action ? styles.actionStyles : ''])}>\n          {action}\n        </div>\n      </div>\n    );\n  }\n\n  const columnsTemplate = columnsTemplateBuilder.join(' ');\n  const hasSecondRow = quaternary || navigation ? true : false;\n\n  return { columnsTemplate, firstCell, secondCell, lastCell, hasSecondRow };\n}\n\nfunction getOptInColumnsTemplate(\n  selector: ComponentChildren,\n  leading: ComponentChildren,\n  metadata: ComponentChildren,\n  trailing: ComponentChildren,\n  action: ComponentChildren,\n  quaternary: ComponentChildren,\n  navigation: ComponentChildren\n) {\n  const columnsTemplateBuilder = [];\n\n  let firstCell = null;\n  if (selector) {\n    columnsTemplateBuilder.push('auto');\n    firstCell = <div className={styles.optInSelectorStyles}>{selector}</div>;\n  }\n\n  let secondCell = null;\n  if (selector || leading) {\n    columnsTemplateBuilder.push('auto');\n    secondCell = (\n      <div\n        className={classNames([\n          selector ? styles.leftPaddingStyles : '',\n          styles.topAlignStyles,\n          leading ? styles.optInRightPaddingStyles : ''\n        ])}>\n        {leading}\n      </div>\n    );\n  }\n\n  columnsTemplateBuilder.push('1fr'); // Text area always gets 1 full fraction of allotted space\n\n  let lastCell = null;\n  if (metadata || trailing || action || navigation) {\n    columnsTemplateBuilder.push('auto');\n    lastCell = (\n      <div className={classNames([styles.topAlignStyles])}>\n        <div className={classNames([styles.optInExtraStyles, styles.flexRowStyles])}>\n          <div\n            className={classNames([\n              styles.centerVerticalStyles,\n              metadata ? styles.leftPaddingStyles : ''\n            ])}>\n            {metadata}\n          </div>\n          <div\n            className={classNames([\n              styles.centerVerticalStyles,\n              trailing ? styles.leftPaddingStyles : ''\n            ])}>\n            {trailing}\n          </div>\n          <div\n            className={classNames([\n              styles.centerVerticalStyles,\n              action ? styles.actionStyles : ''\n            ])}>\n            {action}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  const columnsTemplate = columnsTemplateBuilder.join(' ');\n  const hasSecondRow = quaternary || navigation ? true : false;\n\n  return { columnsTemplate, firstCell, secondCell, lastCell, hasSecondRow };\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/es/ListView-be2e2736.js

@@ -2,13 +2,13 @@
 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-e6402730.js';
+import './LayerHost-8b98d97d.js';
 import './DragAndDropStyles.styles.css';
 import './ReorderableItemStyles.styles.css';
 import { R as ReorderableContext } from './ReorderableContext-0daeea89.js';
 import { H as HiddenAccessible } from './HiddenAccessible-61197e7c.js';
 import { a as getKey, I as ITEM_SELECTOR, f as findElementByKey, h as dragToScroll, k as keyExtractor } from './collectionUtils-8a9d80a3.js';
-import { a as useReorderableItem, u as useReorderable } from './useReorderableItem-22ea4c46.js';
+import { a as useReorderableItem, u as useReorderable } from './useReorderableItem-99a9dbce.js';
 import { c as classNames } from './classNames-4e12b00d.js';
 import { styles } from './UNSAFE_ListView/themes/ListViewStyles.css.js';
 import { i as isKeyDefined } from './keys-49c92dbb.js';
@@ -21,7 +21,7 @@ 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-768450a7.js';
+import './tooltipUtils-35655bd6.js';
 import './IconStyle.styles.css';
 import './SelectMenuGroupContext-b56cf5d4.js';
 import './UNSAFE_Separator/themes/SeparatorStyles.css.js';

package/es/LiveRegion-c7bf2f21.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-474ac6ca.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-c7bf2f21.js.map

package/es/LiveRegion-c7bf2f21.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LiveRegion-c7bf2f21.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-d790e55c.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-2df40edf.js';
+import { L as LiveRegion } from './LiveRegion-c7bf2f21.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-d790e55c.js.map

package/es/MaxLengthLiveRegion-d790e55c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MaxLengthLiveRegion-d790e55c.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-a5bf756f.js

@@ -1,19 +1,19 @@
 /* @oracle/oraclejet-preact: undefined */
 import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
 import { forwardRef, useCallback as useCallback$1 } from 'preact/compat';
-import { D as Dropdown } from './Dropdown-60833900.js';
+import { D as Dropdown } from './Dropdown-698afbc6.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-1cd223a9.js';
+import { u as useUser } from './useUser-6b2e271a.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-54015ca3.js';
 import { menuStyles } from './UNSAFE_Menu/themes/MenuStyles.css.js';
-import { u as useTestId } from './useTestId-9b504481.js';
+import { u as useTestId } from './useTestId-474ac6ca.js';
 import { dropdownMenuStyles } from './UNSAFE_Menu/themes/DropdownMenuStyles.css.js';
-import { u as useSheetSwipe } from './Sheet-da412baf.js';
+import { u as useSheetSwipe } from './Sheet-924cfdab.js';
 import { u as useModal } from './useModal-953082f2.js';
-import { L as Layer } from './Layer-446bf21e.js';
-import './LayerHost-e6402730.js';
+import { L as Layer } from './Layer-1eb18747.js';
+import './LayerHost-8b98d97d.js';
 import { sheetMenuStyles } from './UNSAFE_Menu/themes/SheetMenuStyles.css.js';
 
 /**

package/es/MenuButton-e012a909.js

@@ -0,0 +1,61 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { B as ButtonLabelLayout } from './ButtonLabelLayout-e9f8cbc0.js';
+import { S as SvgChevronDown } from './ChevronDown-1b2ca616.js';
+import { M as Menu } from './Menu-a5bf756f.js';
+import './MenuItem-54015ca3.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-8b98d97d.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-35655bd6.js';
+import './IconStyle.styles.css';
+import './SelectMenuGroupContext-b56cf5d4.js';
+import './UNSAFE_Separator/themes/SeparatorStyles.css.js';
+import './MenuSeparatorStyles.styles.css';
+import './UNSAFE_Menu/themes/redwood/MenuSeparatorBaseTheme.styles.css';
+import './UNSAFE_Menu/themes/redwood/MenuSeparatorVariants.css.js';
+import { u as useMenuAction } from './useMenuAction-1179e27b.js';
+import { B as BaseButton } from './BaseButton-61f6baa8.js';
+
+/**
+ * A MenuButton is a combined action and menu button.
+ */
+const MenuButton = forwardRef(({ children, label, suffix, variant = 'outlined', isDisabled = false, isMenuOpen = false, onToggleMenu, size = 'md', type: buttonType = 'button', width, icon, testId, 'aria-describedby': ariaDescribedBy, onBlur, onFocus, onMouseEnter, onMouseLeave, onTouchEnd, onTouchStart }, ref) => {
+    const buttonRef = useRef(null);
+    useImperativeHandle(ref, () => buttonRef.current, [buttonRef]);
+    const { triggerProps, menuProps } = useMenuAction({
+        isDisabled: isDisabled,
+        onToggleMenu: onToggleMenu,
+        isMenuOpen: isMenuOpen,
+        anchorRef: buttonRef
+    });
+    const elementDetails = {
+        type: 'button',
+        buttonType: buttonType
+    };
+    const globalEventProps = {
+        onBlur,
+        onFocus,
+        onMouseEnter,
+        onMouseLeave,
+        onTouchEnd,
+        onTouchStart
+    };
+    const rootButton = (jsx(BaseButton, { ...mergeProps(triggerProps, globalEventProps), styling: isMenuOpen ? ['min', 'active'] : ['min'], elementDetails: elementDetails, isDisabled: isDisabled, variant: variant, width: width, size: size, ref: buttonRef, testId: testId, "aria-label": suffix ? `${label} ${suffix}` : label, "aria-describedby": ariaDescribedBy, children: jsx(ButtonLabelLayout, { display: 'all', suffix: suffix, startIcon: icon, endIcon: jsx(SvgChevronDown, {}), size: size, children: label }) }));
+    /*TODO: Remove this hardcoded offsetValue so we have dropdown offset only set on one single place.
+     Could be done via menu props or having a dropdownMenu component. JET-60595*/
+    /*TODO: Once menu expose a prop to set min width we would need to calculate offset width of button
+      so we set the correct min width since dropdown menus are 200px but if triggered element width is
+      bigger should be that size. JET-60745 */
+    return isDisabled ? (rootButton) : (jsxs(Fragment, { children: [rootButton, jsx(Menu, { ...menuProps, "aria-label": label, offsetValue: 4, children: children })] }));
+});
+MenuButton.displayName = 'MenuButton';
+
+export { MenuButton as M };
+//# sourceMappingURL=MenuButton-e012a909.js.map

package/es/MenuButton-e012a909.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton-e012a909.js","sources":["../../src/UNSAFE_MenuButton/MenuButton.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * Licensed under The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { ButtonLabelLayout } from '../UNSAFE_ButtonLabelLayout';\nimport { MenuButtonDropdownIcon } from '../PRIVATE_ThemedIcons/MenuButtonDropdownIcon';\nimport { Menu } from '../UNSAFE_Menu';\nimport { useMenuAction, MenuToggleDetail } from '../hooks/UNSAFE_useMenuAction';\nimport { BaseButton } from '../UNSAFE_BaseButton';\n\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\nimport type { DimensionProps } from '../utils/UNSAFE_interpolations/dimensions';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { TestIdProps } from '../hooks/UNSAFE_useTestId';\n\nimport { ComponentChildren, ComponentChild, Fragment } from 'preact';\nimport { forwardRef, ForwardedRef } from 'preact/compat';\nimport { useRef, useImperativeHandle } from 'preact/hooks';\n\ntype IntrinsicProps = Pick<\n  HTMLAttributesSignalExcluded<HTMLElement>,\n  | 'autofocus'\n  | 'onBlur'\n  | 'onFocus'\n  | 'onMouseEnter'\n  | 'onMouseLeave'\n  | 'onTouchEnd'\n  | 'onTouchStart'\n>;\n\ntype WidthInterpolationProps = Pick<DimensionProps, 'width'>;\n\nexport type Props = IntrinsicProps &\n  WidthInterpolationProps &\n  TestIdProps & {\n    /**\n     * children - One or more MenuItems, dividers, or Menu groups\n     */\n    children?: ComponentChildren;\n\n    /**\n     * The icon shown to the left of the label (or to the right of the\n     * label in right to left mode). Note that this is not the menu\n     * expand icon shown to the right of the label (or to the left of\n     * the label in right to left mode).\n     */\n    icon?: ComponentChild;\n\n    /**\n     * Specifies that the button element should be disabled.\n     */\n    isDisabled?: boolean;\n\n    /**\n     * Specifes the button type\n     */\n    type?: 'button' | 'submit';\n\n    /**\n     * The button label\n     */\n    label?: string;\n\n    /**\n     * Specifies if the menu is open\n     */\n    isMenuOpen?: boolean;\n\n    /**\n     * Property that triggers a callback immediately when toggle happens and value of expanded property should be updated\n     */\n    onToggleMenu?: (details: MenuToggleDetail) => void;\n\n    /**\n     * A suffix to the label that can be rendered differently.  Used to identify\n     * which child MenuItem is invoked.\n     */\n    suffix?: string;\n\n    /**\n     * Indicates in what states the button has chrome (background and border).\n     *     \"ghost\": \"Ghost buttons are the least prominent variant. Ghost buttons are\n     * useful for performing low-priority tasks, such as manipulating the UI.\",\n     *     \"borderless\"': \"Borderless buttons are a more prominent variation. Borderless\n     * buttons are useful for supplemental actions that require minimal emphasis.\",\n     *     \"outlined\"': \"Outlined buttons are salient, but lighter weight than\n     * solid buttons. Outlined buttons are useful for secondary actions.\",\n     *     \"solid\"': \"Solid buttons stand out, and direct the user's attention to the\n     *  most important actions in the UI.\"\n     */\n    variant?: 'ghost' | 'borderless' | 'outlined' | 'solid';\n\n    /**\n     * The size indicates how large the button is rendered: \"sm\", \"md\" (default), \"lg\".\n     */\n    size?: 'xs' | 'sm' | 'md' | 'lg';\n\n    /**\n     * The ID of an element (or space separated IDs of multiple elements) that\n     * describes the button.\n     */\n    'aria-describedby'?: string;\n  };\n\n/**\n * A MenuButton is a combined action and menu button.\n */\nexport const MenuButton = forwardRef(\n  (\n    {\n      children,\n      label,\n      suffix,\n      variant = 'outlined',\n      isDisabled = false,\n      isMenuOpen = false,\n      onToggleMenu,\n      size = 'md',\n      type: buttonType = 'button',\n      width,\n      icon,\n      testId,\n      'aria-describedby': ariaDescribedBy,\n      onBlur,\n      onFocus,\n      onMouseEnter,\n      onMouseLeave,\n      onTouchEnd,\n      onTouchStart\n    }: Props,\n    ref?: ForwardedRef<HTMLButtonElement>\n  ) => {\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    useImperativeHandle(ref!, () => buttonRef.current!, [buttonRef]);\n\n    const { triggerProps, menuProps } = useMenuAction({\n      isDisabled: isDisabled,\n      onToggleMenu: onToggleMenu,\n      isMenuOpen: isMenuOpen,\n      anchorRef: buttonRef\n    });\n\n    const elementDetails = {\n      type: 'button' as const,\n      buttonType: buttonType\n    };\n\n    const globalEventProps = {\n      onBlur,\n      onFocus,\n      onMouseEnter,\n      onMouseLeave,\n      onTouchEnd,\n      onTouchStart\n    };\n\n    const rootButton = (\n      <BaseButton\n        {...mergeProps(triggerProps, globalEventProps)}\n        styling={isMenuOpen ? ['min', 'active'] : ['min']}\n        elementDetails={elementDetails}\n        isDisabled={isDisabled}\n        variant={variant}\n        width={width}\n        size={size}\n        ref={buttonRef}\n        testId={testId}\n        aria-label={suffix ? `${label} ${suffix}` : label}\n        aria-describedby={ariaDescribedBy}>\n        <ButtonLabelLayout\n          display={'all'}\n          suffix={suffix}\n          startIcon={icon}\n          endIcon={<MenuButtonDropdownIcon />}\n          size={size}>\n          {label}\n        </ButtonLabelLayout>\n      </BaseButton>\n    );\n\n    /*TODO: Remove this hardcoded offsetValue so we have dropdown offset only set on one single place.\n     Could be done via menu props or having a dropdownMenu component. JET-60595*/\n\n    /*TODO: Once menu expose a prop to set min width we would need to calculate offset width of button\n      so we set the correct min width since dropdown menus are 200px but if triggered element width is\n      bigger should be that size. JET-60745 */\n\n    return isDisabled ? (\n      rootButton\n    ) : (\n      <Fragment>\n        {rootButton}\n        <Menu {...menuProps} aria-label={label} offsetValue={4}>\n          {children}\n        </Menu>\n      </Fragment>\n    );\n  }\n);\n\nMenuButton.displayName = 'MenuButton';\n"],"names":["_jsx","MenuButtonDropdownIcon","_jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA2GA;;AAEG;AACI,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,QAAQ,EACR,KAAK,EACL,MAAM,EACN,OAAO,GAAG,UAAU,EACpB,UAAU,GAAG,KAAK,EAClB,UAAU,GAAG,KAAK,EAClB,YAAY,EACZ,IAAI,GAAG,IAAI,EACX,IAAI,EAAE,UAAU,GAAG,QAAQ,EAC3B,KAAK,EACL,IAAI,EACJ,MAAM,EACN,kBAAkB,EAAE,eAAe,EACnC,MAAM,EACN,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,YAAY,EACN,EACR,GAAqC,KACnC;AACF,IAAA,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;AAClD,IAAA,mBAAmB,CAAC,GAAI,EAAE,MAAM,SAAS,CAAC,OAAQ,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;AAEjE,IAAA,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC;AAChD,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,YAAY,EAAE,YAAY;AAC1B,QAAA,UAAU,EAAE,UAAU;AACtB,QAAA,SAAS,EAAE,SAAS;AACrB,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,cAAc,GAAG;AACrB,QAAA,IAAI,EAAE,QAAiB;AACvB,QAAA,UAAU,EAAE,UAAU;KACvB,CAAC;AAEF,IAAA,MAAM,gBAAgB,GAAG;QACvB,MAAM;QACN,OAAO;QACP,YAAY;QACZ,YAAY;QACZ,UAAU;QACV,YAAY;KACb,CAAC;IAEF,MAAM,UAAU,IACdA,GAAA,CAAC,UAAU,EACL,EAAA,GAAA,UAAU,CAAC,YAAY,EAAE,gBAAgB,CAAC,EAC9C,OAAO,EAAE,UAAU,GAAG,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,EACjD,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,SAAS,EACd,MAAM,EAAE,MAAM,gBACF,MAAM,GAAG,CAAG,EAAA,KAAK,IAAI,MAAM,CAAA,CAAE,GAAG,KAAK,sBAC/B,eAAe,EAAA,QAAA,EACjCA,GAAC,CAAA,iBAAiB,EAChB,EAAA,OAAO,EAAE,KAAK,EACd,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,IAAI,EACf,OAAO,EAAEA,IAACC,cAAsB,EAAA,EAAA,CAAG,EACnC,IAAI,EAAE,IAAI,YACT,KAAK,EAAA,CACY,EACT,CAAA,CACd,CAAC;AAEF;AAC6E;AAE7E;;AAE0C;AAE1C,IAAA,OAAO,UAAU,IACf,UAAU,KAEVC,IAAA,CAAC,QAAQ,EACN,EAAA,QAAA,EAAA,CAAA,UAAU,EACXF,GAAA,CAAC,IAAI,EAAA,EAAA,GAAK,SAAS,EAAA,YAAA,EAAc,KAAK,EAAE,WAAW,EAAE,CAAC,EACnD,QAAA,EAAA,QAAQ,EACJ,CAAA,CAAA,EAAA,CACE,CACZ,CAAC;AACJ,CAAC,EACD;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/es/MenuItem-54015ca3.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-051f5adb.js';
-import { u as useUser } from './useUser-1cd223a9.js';
+import { u as useUser } from './useUser-6b2e271a.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-b0150c6f.js

@@ -0,0 +1,203 @@
+/* @oracle/oraclejet-preact: undefined */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { useCallback, useRef, useEffect } from 'preact/hooks';
+import { F as Flex } from './Flex-2d9ebee9.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-0791782f.js';
+import { I as IconButton } from './IconButton-19fcf0a8.js';
+import { u as useTranslationBundle } from './useTranslationBundle-2df40edf.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';
+import { p as playSound, s as severityBasedStyleClass, M as MessageStartIcon, a as MessageSummary } from './MessagesManager-91ade5dc.js';
+import { x as xUnits } from './utils-a4102e03.js';
+
+/**
+ * A Component for rendering the message close button
+ */
+function MessageCloseButton({ onAction, variant = 'banner' }) {
+    const translations = useTranslationBundle('@oracle/oraclejet-preact');
+    const renderedButton = (jsx(IconButton, { "aria-label": translations.message_close(), size: "sm", variant: "borderless", onAction: onAction, children: jsx(SvgClose, {}) }));
+    // TODO:  Refactor to utilize useComponentTheme and multiVariantStyles.
+    const classes = classNames([messageCloseButtonStyles.base, messageCloseButtonStyles[variant]]);
+    // Otherwise, render the close icon
+    return (jsx("div", { class: classes, "data-oj-message-close-button": "", children: renderedButton }));
+}
+
+/**
+ * Component for rendering custom icon/content for start icon in Message
+ */
+function MessageCustomStartIcon({ item, renderer }) {
+    // TODO:  Refactor to utilize useComponentTheme and multiVariantStyles.
+    const classes = classNames([
+        messageStartIconStyles.base,
+        // for now only toast has support for custom icon
+        messageStartIconStyles.toast,
+        messageStartIconStyles.customToast
+    ]);
+    return (jsx("div", { class: classes, role: "presentation", "data-oj-message-custom-icon": "", children: renderer(item) }));
+}
+
+/**
+ * Default renderer for rendering the detail content.
+ *
+ * @param item The data item object
+ * @returns Rendered detail content
+ */
+function defaultDetailRenderer(item) {
+    const { detail } = item.data;
+    // If the detail is null or an empty string, do not render the
+    // content row
+    if (!isValidValueForProp(detail)) {
+        return null;
+    }
+    return jsx(Fragment, { children: detail });
+}
+/**
+ * Detail Component for rendering the detail content of the Message
+ */
+function MessageDetail({ item, renderer, variant = 'banner' }) {
+    const isCustomRendered = renderer != null;
+    const renderedContent = (renderer ?? defaultDetailRenderer)(item);
+    if (renderedContent == null)
+        return null;
+    // If detail content is rendered, then wrap it in a div with specified style classes
+    const classes = classNames([messageDetailStyles.base, messageDetailStyles[variant]]);
+    return (jsx("div", { class: classes, ...(isCustomRendered ? { 'data-oj-message-custom-detail': '' } : {}), children: renderedContent }));
+}
+
+/**
+ * A component that styles the header for the message component
+ * @param param0 Props
+ * @returns MessageHeader component instance
+ */
+function MessageHeader({ children, variant = 'banner' }) {
+    const rootClasses = classNames([messageHeaderStyles.base, messageHeaderStyles[variant]]);
+    return (jsx("div", { role: "presentation", class: rootClasses, children: children }));
+}
+
+/**
+ * Timestamp Component for rendering timestamp in Message
+ */
+function MessageTimestamp({ value, variant = 'banner' }) {
+    // If detail content is rendered, then wrap it in a div with specified style classes
+    // TODO:  Refactor to utilize useComponentTheme and multiVariantStyles.
+    const classes = classNames([messageTimestampStyles[variant]]);
+    // Otherwise, render the timestamp
+    const formattedTimestamp = formatTimestamp(value);
+    return jsx("div", { class: classes, children: formattedTimestamp });
+}
+
+/**
+ * Determines the base variant of the message - banner or toast
+ *
+ * @param variant The message variant
+ * @returns The base variant
+ */
+function getBaseVariant(variant) {
+    if (variant === 'pageBanner' || variant === 'sectionBanner') {
+        return 'banner';
+    }
+    return 'toast';
+}
+/**
+ * Determines if a severity icon is needed based on the component severity
+ *
+ * @param severity The component severity
+ * @returns Whether or not to render the severity icon
+ */
+function isSeverityIconNeeded(severity) {
+    const isValidSeverity = isValidValueForProp(severity, 'severity');
+    return isValidSeverity && severity !== 'none';
+}
+/**
+ * Default timeout duration for autoTimeout in milliseconds
+ */
+const MIN_SECONDS = 5;
+const DEFAULT_TIMEOUT = MIN_SECONDS * 1000;
+/**
+ * Component that renders an individual message
+ */
+function Message({ detailRenderer, iconRenderer, item, onClose, messageRef = () => { }, variant = 'pageBanner' }) {
+    const { closeAffordance = 'on', severity = 'error', sound, summary, timestamp } = item.data;
+    const { autoTimeout = 'off' } = item.data;
+    const baseVariant = getBaseVariant(variant);
+    /**
+     * Handles clicking on the close icon of the message
+     */
+    const handleClose = useCallback(() => {
+        onClose?.(item);
+    }, [item, onClose]);
+    /**
+     * Handles closing the message on pressing Esc
+     */
+    const handleCloseOnEsc = useCallback((event) => {
+        // Close the message only when closeAffordance is on
+        if (event.key === 'Escape' && closeAffordance === 'on') {
+            onClose?.(item);
+        }
+    }, [closeAffordance, item, onClose]);
+    /**
+     * Set auto timeout for toast messages
+     */
+    const shouldTimeout = baseVariant === 'toast' && autoTimeout !== 'off';
+    const currentTimerRef = useRef();
+    const timeout = typeof autoTimeout === 'number' ? autoTimeout : DEFAULT_TIMEOUT;
+    const timeoutDuration = autoTimeout === 'on' ? DEFAULT_TIMEOUT : timeout;
+    const startTimer = useCallback(() => {
+        if (currentTimerRef.current)
+            return;
+        currentTimerRef.current = new Timer(handleClose, timeoutDuration);
+    }, [handleClose, timeoutDuration]);
+    const clearTimer = useCallback(() => {
+        if (!currentTimerRef.current)
+            return;
+        currentTimerRef.current.clear();
+        currentTimerRef.current = undefined;
+    }, []);
+    const pauseTimer = useCallback(() => {
+        currentTimerRef.current?.pause();
+    }, []);
+    const resumeTimer = useCallback(() => {
+        currentTimerRef.current?.resume();
+    }, []);
+    useEffect(() => {
+        if (isValidValueForProp(sound)) {
+            // It is sufficient to check for the value to be a
+            // non-empty string. The playSound method takes care of the rest.
+            playSound(sound);
+        }
+        // on mount, start timer for toast messages if needed
+        if (shouldTimeout) {
+            startTimer();
+        }
+        return () => {
+            // clear out any pending timer
+            clearTimer();
+        };
+        // eslint-disable-next-line
+    }, []); // No deps to run this only on mount
+    const { variantClasses } = useComponentTheme(MessageBannerRedwoodTheme, {
+        severity
+    });
+    // TODO:  Refactor to utilize useComponentTheme and multiVariantStyles.
+    const rootClasses = classNames([
+        baseVariant === 'banner' && variantClasses,
+        messageStyles.base[baseVariant],
+        // for now, we do not have severity based styling on toast. So, we ignore this class for toasts
+        variant !== 'toast' && severityBasedStyleClass(severity, baseVariant),
+        variant === 'sectionBanner' && messageStyles.section
+    ]);
+    const contentClasses = classNames([messageStyles.content.base, messageStyles.content[baseVariant]]);
+    // We will be animating the root div, so add padding to an inner wrapper div so that
+    // when animating height looks smooth. If padding were to be added to the root
+    // div, the animation will not be smooth as height will never reach 0 due to the
+    // padding.
+    return (jsx("div", { ref: messageRef, class: rootClasses, role: "alert", "aria-atomic": "true", "data-oj-key": `${typeof item.key}-${item.key}`, tabIndex: 0, onKeyUp: handleCloseOnEsc, onFocusIn: pauseTimer, onFocusOut: resumeTimer, children: jsxs("div", { class: contentClasses, children: [iconRenderer ? (jsx(MessageCustomStartIcon, { item: item, renderer: iconRenderer })) : isSeverityIconNeeded(severity) ? (jsx(MessageStartIcon, { severity: severity, variant: baseVariant })) : null, jsxs(Flex, { direction: "column", flex: "1", gap: xUnits(2), children: [jsxs(MessageHeader, { variant: baseVariant, children: [jsx(MessageSummary, { variant: baseVariant, text: summary, role: "heading", "aria-level": 2 }), isValidValueForProp(timestamp, 'timestamp') && variant !== 'toast' && (jsx(MessageTimestamp, { variant: baseVariant, value: timestamp }))] }), jsx(MessageDetail, { variant: baseVariant, item: item, renderer: detailRenderer })] }), closeAffordance === 'on' && (jsx(MessageCloseButton, { variant: baseVariant, onAction: handleClose }))] }) }));
+}
+
+export { Message as M, MessageCloseButton as a, MessageDetail as b, MessageTimestamp as c };
+//# sourceMappingURL=Message-b0150c6f.js.map