@oracle/oraclejet-preact 15.1.1 → 15.1.2

package/cjs/MessageCloseButton-64c284a2.js

@@ -0,0 +1,32 @@
+/* @oracle/oraclejet-preact: 15.1.2 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+require('./UNSAFE_IconButton.js');
+var PRIVATE_ThemedIcons_CloseIcon = require('./PRIVATE_ThemedIcons/CloseIcon.js');
+require('./utils/UNSAFE_classNames.js');
+var PRIVATE_Message_themes_MessageStyles_css = require('./PRIVATE_Message/themes/MessageStyles.css.js');
+var IconButton = require('./IconButton-bc45151b.js');
+var classNames = require('./classNames-d619a292.js');
+
+/**
+ * A Component for rendering the message close button
+ */
+function MessageCloseButton({ onAction, buttonRenderer, title = 'Close', variant = 'banner' }) {
+    const renderedButton = buttonRenderer ? (buttonRenderer(title, onAction, variant)) : (jsxRuntime.jsx(IconButton.IconButton, { size: "sm", tooltip: title, variant: "borderless", onAction: onAction, children: jsxRuntime.jsx(PRIVATE_ThemedIcons_CloseIcon.CloseIcon, {}) }));
+    // TODO: JET-48715 - remove marker classes
+    // Right now, oj-message-banner component uses this for unit tests and has no alternate way for
+    // testing. This will need to be removed as we work on oj-c-message-banner.
+    // TODO:  Refactor to utilize useComponentTheme and multiVariantStyles.
+    const markerClassForTests = 'oj-c-messagebanner-close-icon';
+    const classes = classNames.classNames([
+        variant === 'banner' && markerClassForTests,
+        PRIVATE_Message_themes_MessageStyles_css.messageCloseButtonStyles.base,
+        PRIVATE_Message_themes_MessageStyles_css.messageCloseButtonStyles[variant]
+    ]);
+    // Otherwise, render the close icon
+    return (jsxRuntime.jsx("div", { class: classes, "data-oj-message-close-button": "", children: renderedButton }));
+}
+
+exports.MessageCloseButton = MessageCloseButton;
+//# sourceMappingURL=MessageCloseButton-64c284a2.js.map

package/cjs/MessageCloseButton-64c284a2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageCloseButton-64c284a2.js","sources":["../../src/PRIVATE_Message/MessageCloseButton.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { VNode } from 'preact';\nimport { IconButton } from '../UNSAFE_IconButton';\nimport { CloseIcon } from '../PRIVATE_ThemedIcons/CloseIcon';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { messageCloseButtonStyles } from './themes/MessageStyles.css';\nimport { MessageVariant } from './Message.types';\n\n/**\n * Props for the MessageCloseButton component\n */\ntype Props = {\n  /**\n   * The callback function to be called when the close icon is clicked\n   */\n  onAction: (event?: Event) => void;\n\n  /**\n   * Button renderer\n   */\n  buttonRenderer?: (\n    title: string,\n    onAction: (event?: Event) => void,\n    variant?: MessageVariant\n  ) => VNode;\n\n  /**\n   * Style variant\n   */\n  variant?: MessageVariant;\n\n  /**\n   * Close button title\n   */\n  title?: string;\n};\n\n/**\n * A Component for rendering the message close button\n */\nfunction MessageCloseButton({\n  onAction,\n  buttonRenderer,\n  title = 'Close',\n  variant = 'banner'\n}: Props) {\n  const renderedButton = buttonRenderer ? (\n    buttonRenderer(title, onAction, variant)\n  ) : (\n    <IconButton size=\"sm\" tooltip={title} variant=\"borderless\" onAction={onAction}>\n      <CloseIcon />\n    </IconButton>\n  );\n  // TODO: JET-48715 - remove marker classes\n  // Right now, oj-message-banner component uses this for unit tests and has no alternate way for\n  // testing. This will need to be removed as we work on oj-c-message-banner.\n  // TODO:  Refactor to utilize useComponentTheme and multiVariantStyles.\n\n  const markerClassForTests = 'oj-c-messagebanner-close-icon';\n  const classes = classNames([\n    variant === 'banner' && markerClassForTests,\n    messageCloseButtonStyles.base,\n    messageCloseButtonStyles[variant]\n  ]);\n\n  // Otherwise, render the close icon\n  return (\n    <div class={classes} data-oj-message-close-button=\"\">\n      {renderedButton}\n    </div>\n  );\n}\n\nexport { MessageCloseButton };\n"],"names":["_jsx","IconButton","CloseIcon","classNames","messageCloseButtonStyles"],"mappings":";;;;;;;;;;;AA4CA;;AAEG;AACH,SAAS,kBAAkB,CAAC,EAC1B,QAAQ,EACR,cAAc,EACd,KAAK,GAAG,OAAO,EACf,OAAO,GAAG,QAAQ,EACZ,EAAA;IACN,MAAM,cAAc,GAAG,cAAc,IACnC,cAAc,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,CAAC,KAExCA,cAAC,CAAAC,qBAAU,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAC,YAAY,EAAC,QAAQ,EAAE,QAAQ,EAC3E,QAAA,EAAAD,cAAA,CAACE,uCAAS,EAAG,EAAA,CAAA,EAAA,CACF,CACd,CAAC;;;;;IAMF,MAAM,mBAAmB,GAAG,+BAA+B,CAAC;IAC5D,MAAM,OAAO,GAAGC,qBAAU,CAAC;QACzB,OAAO,KAAK,QAAQ,IAAI,mBAAmB;AAC3C,QAAAC,iEAAwB,CAAC,IAAI;QAC7BA,iEAAwB,CAAC,OAAO,CAAC;AAClC,KAAA,CAAC,CAAC;;IAGH,QACEJ,cAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,OAAO,EAA+B,8BAAA,EAAA,EAAE,EACjD,QAAA,EAAA,cAAc,EACX,CAAA,EACN;AACJ;;;;"}

package/cjs/MessageDetail-dce2aadd.js

@@ -0,0 +1,48 @@
+/* @oracle/oraclejet-preact: 15.1.2 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
+require('./utils/UNSAFE_classNames.js');
+var PRIVATE_Message_themes_MessageStyles_css = require('./PRIVATE_Message/themes/MessageStyles.css.js');
+var MessageFormattingUtils = require('./MessageFormattingUtils-3cf76724.js');
+var classNames = require('./classNames-d619a292.js');
+
+/**
+ * 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 (!MessageFormattingUtils.isValidValueForProp(detail)) {
+        return null;
+    }
+    return jsxRuntime.jsx(preact.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
+    // TODO: JET-48715 - remove marker classes
+    // Right now, oj-message-banner component uses this for unit tests and has no alternate way for
+    // testing. This will need to be removed as we work on oj-c-message-banner.
+    const markerClassForTests = 'oj-c-messagebanner-detail';
+    const classes = classNames.classNames([
+        variant === 'banner' && markerClassForTests,
+        PRIVATE_Message_themes_MessageStyles_css.messageDetailStyles.base,
+        PRIVATE_Message_themes_MessageStyles_css.messageDetailStyles[variant]
+    ]);
+    return (jsxRuntime.jsx("div", { class: classes, ...(isCustomRendered ? { 'data-oj-message-custom-detail': '' } : {}), children: renderedContent }));
+}
+
+exports.MessageDetail = MessageDetail;
+//# sourceMappingURL=MessageDetail-dce2aadd.js.map

package/cjs/MessageDetail-dce2aadd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageDetail-dce2aadd.js","sources":["../../src/PRIVATE_Message/MessageDetail.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { ComponentChildren, Fragment } from 'preact';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { messageDetailStyles } from './themes/MessageStyles.css';\nimport { MessageRendererDataItem, MessageVariant } from './Message.types';\nimport { isValidValueForProp } from './MessageFormattingUtils';\n\ntype MessageWithDetailText = {\n  /**\n   * The detail text for the message\n   */\n  detail?: string;\n};\n\n/**\n * Props for the Detail component\n */\ntype Props<K, D> = {\n  /**\n   * The data item for rendering the detail content\n   */\n  item: MessageRendererDataItem<K, D>;\n\n  /**\n   * A custom renderer for rendering the detail content\n   */\n  renderer?: (item: MessageRendererDataItem<K, D>) => ComponentChildren;\n\n  /**\n   * Style variant\n   */\n  variant?: MessageVariant;\n};\n\n/**\n * Default renderer for rendering the detail content.\n *\n * @param item The data item object\n * @returns Rendered detail content\n */\nfunction defaultDetailRenderer<D extends MessageWithDetailText>(\n  item: MessageRendererDataItem<unknown, D>\n): ComponentChildren {\n  const { detail } = item.data;\n  // If the detail is null or an empty string, do not render the\n  // content row\n  if (!isValidValueForProp(detail)) {\n    return null;\n  }\n  return <Fragment>{detail}</Fragment>;\n}\n\n/**\n * Detail Component for rendering the detail content of the Message\n */\nfunction MessageDetail<K, D extends MessageWithDetailText>({\n  item,\n  renderer,\n  variant = 'banner'\n}: Props<K, D>) {\n  const isCustomRendered = renderer != null;\n  const renderedContent = (renderer ?? defaultDetailRenderer)(item);\n\n  if (renderedContent == null) return null;\n\n  // If detail content is rendered, then wrap it in a div with specified style classes\n  // TODO: JET-48715 - remove marker classes\n  // Right now, oj-message-banner component uses this for unit tests and has no alternate way for\n  // testing. This will need to be removed as we work on oj-c-message-banner.\n  const markerClassForTests = 'oj-c-messagebanner-detail';\n  const classes = classNames([\n    variant === 'banner' && markerClassForTests,\n    messageDetailStyles.base,\n    messageDetailStyles[variant]\n  ]);\n  return (\n    <div class={classes} {...(isCustomRendered ? { 'data-oj-message-custom-detail': '' } : {})}>\n      {renderedContent}\n    </div>\n  );\n}\n\nexport { MessageDetail };\n"],"names":["isValidValueForProp","_jsx","Fragment","classNames","messageDetailStyles"],"mappings":";;;;;;;;;;AAyCA;;;;;AAKG;AACH,SAAS,qBAAqB,CAC5B,IAAyC,EAAA;AAEzC,IAAA,MAAM,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC;;;AAG7B,IAAA,IAAI,CAACA,0CAAmB,CAAC,MAAM,CAAC,EAAE;AAChC,QAAA,OAAO,IAAI,CAAC;AACb,KAAA;AACD,IAAA,OAAOC,cAAC,CAAAC,eAAQ,EAAE,EAAA,QAAA,EAAA,MAAM,GAAY,CAAC;AACvC,CAAC;AAED;;AAEG;AACH,SAAS,aAAa,CAAqC,EACzD,IAAI,EACJ,QAAQ,EACR,OAAO,GAAG,QAAQ,EACN,EAAA;AACZ,IAAA,MAAM,gBAAgB,GAAG,QAAQ,IAAI,IAAI,CAAC;IAC1C,MAAM,eAAe,GAAG,CAAC,QAAQ,IAAI,qBAAqB,EAAE,IAAI,CAAC,CAAC;IAElE,IAAI,eAAe,IAAI,IAAI;AAAE,QAAA,OAAO,IAAI,CAAC;;;;;IAMzC,MAAM,mBAAmB,GAAG,2BAA2B,CAAC;IACxD,MAAM,OAAO,GAAGC,qBAAU,CAAC;QACzB,OAAO,KAAK,QAAQ,IAAI,mBAAmB;AAC3C,QAAAC,4DAAmB,CAAC,IAAI;QACxBA,4DAAmB,CAAC,OAAO,CAAC;AAC7B,KAAA,CAAC,CAAC;IACH,QACEH,cAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAE,OAAO,MAAO,gBAAgB,GAAG,EAAE,+BAA+B,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EACvF,QAAA,EAAA,eAAe,EACZ,CAAA,EACN;AACJ;;;;"}

package/cjs/MessageFormattingUtils-3cf76724.js

@@ -0,0 +1,105 @@
+/* @oracle/oraclejet-preact: 15.1.2 */
+'use strict';
+
+var utils_UNSAFE_getLocale = require('./utils/UNSAFE_getLocale.js');
+require('./utils/UNSAFE_stringUtils.js');
+var Message_types = require('./Message.types-20efdde7.js');
+var stringUtils = require('./stringUtils-27007290.js');
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+/**
+ * Options for creating an Intl.DateTimeFormat instance.
+ */
+const DATE_FORMAT_OPTIONS = Object.freeze({
+    TODAY: {
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: true
+    },
+    DEFAULT: {
+        day: '2-digit',
+        month: '2-digit',
+        year: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        hour12: true
+    }
+});
+/**
+ * Regex for validating ISO timestamp
+ */
+const ISO_DATE_REGEX = /^(-?(?:[1-9][0-9]*)?[0-9]{4})-(1[0-2]|0[1-9])-(3[01]|0[1-9]|[12][0-9])T(2[0-3]|[01][0-9]):([0-5][0-9]):([0-5][0-9])(.[0-9]+)?(Z)?$/;
+/**
+ * Checks if the provided date is today
+ *
+ * @param isoDate Date to be tested for today
+ *
+ * @returns boolean indicating if the provided date is today
+ */
+function isDateToday(isoDate) {
+    const today = new Date();
+    const provided = new Date(isoDate);
+    return (today.getUTCFullYear() === provided.getUTCFullYear() &&
+        today.getUTCMonth() === provided.getUTCMonth() &&
+        today.getUTCDate() === provided.getUTCDate());
+}
+/**
+ * Creates an instance of Intl.DateTimeFormat
+ *
+ * @param isToday A boolean to indicate whether a formatter is needed for the date
+ *                that is the current day.
+ *
+ * @returns the formatter instance
+ */
+function getDateTimeFormatter(isToday) {
+    const locale = utils_UNSAFE_getLocale.getLocale();
+    const { DateTimeFormat } = Intl;
+    if (isToday) {
+        return new DateTimeFormat(locale, DATE_FORMAT_OPTIONS.TODAY);
+    }
+    return new DateTimeFormat(locale, DATE_FORMAT_OPTIONS.DEFAULT);
+}
+/**
+ * Checks if the provided value is valid for the prop specified.
+ * By default, this method just checks for the value to be a valid string.
+ *
+ * @param value The value to be checked
+ * @param prop The property for which the value needs to be evaluated
+ *
+ * @returns the result of the validation
+ */
+function isValidValueForProp(value, prop = 'string') {
+    switch (prop) {
+        case 'severity':
+            // Should be one of the allowed severity
+            return typeof value === 'string' && Message_types.severities.includes(value);
+        case 'timestamp':
+            // Should be a valid ISO Datetime string
+            return typeof value === 'string' && ISO_DATE_REGEX.test(value);
+        case 'string':
+        default:
+            // anything other than null, undefined and '' is a valid string
+            return typeof value === 'string' && !stringUtils.isEmptyOrUndefined(value);
+    }
+}
+/**
+ * Formats the timestamp in the required format based on the current
+ * locale.
+ *
+ * @param isoTime Timestamp in ISO format
+ */
+function formatTimestamp(isoTime) {
+    const isToday = isDateToday(isoTime);
+    const formatter = getDateTimeFormatter(isToday);
+    return formatter.format(new Date(isoTime));
+}
+
+exports.formatTimestamp = formatTimestamp;
+exports.isValidValueForProp = isValidValueForProp;
+//# sourceMappingURL=MessageFormattingUtils-3cf76724.js.map

package/cjs/MessageFormattingUtils-3cf76724.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageFormattingUtils-3cf76724.js","sources":["../../src/PRIVATE_Message/MessageFormattingUtils.ts"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { getLocale } from '../utils/UNSAFE_getLocale';\nimport { isEmptyOrUndefined } from '../utils/UNSAFE_stringUtils';\nimport { severities } from './Message.types';\n\n// Types of properties that can be formatted\ntype PropFormat = 'severity' | 'string' | 'timestamp';\n\n/**\n * Options for creating an Intl.DateTimeFormat instance.\n */\nconst DATE_FORMAT_OPTIONS = Object.freeze({\n  TODAY: {\n    hour: '2-digit',\n    minute: '2-digit',\n    hour12: true\n  },\n  DEFAULT: {\n    day: '2-digit',\n    month: '2-digit',\n    year: '2-digit',\n    hour: '2-digit',\n    minute: '2-digit',\n    hour12: true\n  }\n});\n\n/**\n * Regex for validating ISO timestamp\n */\nconst ISO_DATE_REGEX =\n  /^(-?(?:[1-9][0-9]*)?[0-9]{4})-(1[0-2]|0[1-9])-(3[01]|0[1-9]|[12][0-9])T(2[0-3]|[01][0-9]):([0-5][0-9]):([0-5][0-9])(.[0-9]+)?(Z)?$/;\n\n/**\n * Checks if the provided date is today\n *\n * @param isoDate Date to be tested for today\n *\n * @returns boolean indicating if the provided date is today\n */\nfunction isDateToday(isoDate: string) {\n  const today = new Date();\n  const provided = new Date(isoDate);\n\n  return (\n    today.getUTCFullYear() === provided.getUTCFullYear() &&\n    today.getUTCMonth() === provided.getUTCMonth() &&\n    today.getUTCDate() === provided.getUTCDate()\n  );\n}\n\n/**\n * Creates an instance of Intl.DateTimeFormat\n *\n * @param isToday A boolean to indicate whether a formatter is needed for the date\n *                that is the current day.\n *\n * @returns the formatter instance\n */\nfunction getDateTimeFormatter(isToday: boolean) {\n  const locale = getLocale();\n  const { DateTimeFormat } = Intl;\n  if (isToday) {\n    return new DateTimeFormat(locale, DATE_FORMAT_OPTIONS.TODAY as Intl.DateTimeFormatOptions);\n  }\n\n  return new DateTimeFormat(locale, DATE_FORMAT_OPTIONS.DEFAULT as Intl.DateTimeFormatOptions);\n}\n\n/**\n * Checks if the provided value is valid for the prop specified.\n * By default, this method just checks for the value to be a valid string.\n *\n * @param value The value to be checked\n * @param prop The property for which the value needs to be evaluated\n *\n * @returns the result of the validation\n */\nfunction isValidValueForProp<T>(\n  value: T | null | undefined,\n  prop: PropFormat = 'string'\n): value is T {\n  switch (prop) {\n    case 'severity':\n      // Should be one of the allowed severity\n      return typeof value === 'string' && severities.includes(value as any);\n\n    case 'timestamp':\n      // Should be a valid ISO Datetime string\n      return typeof value === 'string' && ISO_DATE_REGEX.test(value);\n\n    case 'string':\n    default:\n      // anything other than null, undefined and '' is a valid string\n      return typeof value === 'string' && !isEmptyOrUndefined(value);\n  }\n}\n\n/**\n * Formats the timestamp in the required format based on the current\n * locale.\n *\n * @param isoTime Timestamp in ISO format\n */\nfunction formatTimestamp(isoTime: string) {\n  const isToday = isDateToday(isoTime);\n  const formatter = getDateTimeFormatter(isToday);\n\n  return formatter.format(new Date(isoTime));\n}\n\nexport { formatTimestamp, isValidValueForProp };\n"],"names":["getLocale","severities","isEmptyOrUndefined"],"mappings":";;;;;;;;AAAA;;;;;;AAMG;AAQH;;AAEG;AACH,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,CAAC;AACxC,IAAA,KAAK,EAAE;AACL,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,MAAM,EAAE,IAAI;AACb,KAAA;AACD,IAAA,OAAO,EAAE;AACP,QAAA,GAAG,EAAE,SAAS;AACd,QAAA,KAAK,EAAE,SAAS;AAChB,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,IAAI,EAAE,SAAS;AACf,QAAA,MAAM,EAAE,SAAS;AACjB,QAAA,MAAM,EAAE,IAAI;AACb,KAAA;AACF,CAAA,CAAC,CAAC;AAEH;;AAEG;AACH,MAAM,cAAc,GAClB,oIAAoI,CAAC;AAEvI;;;;;;AAMG;AACH,SAAS,WAAW,CAAC,OAAe,EAAA;AAClC,IAAA,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC;AACzB,IAAA,MAAM,QAAQ,GAAG,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;IAEnC,QACE,KAAK,CAAC,cAAc,EAAE,KAAK,QAAQ,CAAC,cAAc,EAAE;AACpD,QAAA,KAAK,CAAC,WAAW,EAAE,KAAK,QAAQ,CAAC,WAAW,EAAE;QAC9C,KAAK,CAAC,UAAU,EAAE,KAAK,QAAQ,CAAC,UAAU,EAAE,EAC5C;AACJ,CAAC;AAED;;;;;;;AAOG;AACH,SAAS,oBAAoB,CAAC,OAAgB,EAAA;AAC5C,IAAA,MAAM,MAAM,GAAGA,gCAAS,EAAE,CAAC;AAC3B,IAAA,MAAM,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC;AAChC,IAAA,IAAI,OAAO,EAAE;QACX,OAAO,IAAI,cAAc,CAAC,MAAM,EAAE,mBAAmB,CAAC,KAAmC,CAAC,CAAC;AAC5F,KAAA;IAED,OAAO,IAAI,cAAc,CAAC,MAAM,EAAE,mBAAmB,CAAC,OAAqC,CAAC,CAAC;AAC/F,CAAC;AAED;;;;;;;;AAQG;AACH,SAAS,mBAAmB,CAC1B,KAA2B,EAC3B,OAAmB,QAAQ,EAAA;AAE3B,IAAA,QAAQ,IAAI;AACV,QAAA,KAAK,UAAU;;YAEb,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAIC,wBAAU,CAAC,QAAQ,CAAC,KAAY,CAAC,CAAC;AAExE,QAAA,KAAK,WAAW;;YAEd,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAEjE,QAAA,KAAK,QAAQ,CAAC;AACd,QAAA;;YAEE,OAAO,OAAO,KAAK,KAAK,QAAQ,IAAI,CAACC,8BAAkB,CAAC,KAAK,CAAC,CAAC;AAClE,KAAA;AACH,CAAC;AAED;;;;;AAKG;AACH,SAAS,eAAe,CAAC,OAAe,EAAA;AACtC,IAAA,MAAM,OAAO,GAAG,WAAW,CAAC,OAAO,CAAC,CAAC;AACrC,IAAA,MAAM,SAAS,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;IAEhD,OAAO,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;AAC7C;;;;;"}

package/cjs/MessageStartIcon-8a59b0b6.js

@@ -0,0 +1,42 @@
+/* @oracle/oraclejet-preact: 15.1.2 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+require('./utils/UNSAFE_classNames.js');
+var PRIVATE_ThemedIcons_MessageConfirmationIcon = require('./PRIVATE_ThemedIcons/MessageConfirmationIcon.js');
+var PRIVATE_ThemedIcons_MessageErrorIcon = require('./PRIVATE_ThemedIcons/MessageErrorIcon.js');
+var PRIVATE_ThemedIcons_MessageInfoIcon = require('./PRIVATE_ThemedIcons/MessageInfoIcon.js');
+var PRIVATE_ThemedIcons_MessageWarningIcon = require('./PRIVATE_ThemedIcons/MessageWarningIcon.js');
+require('./UNSAFE_Flex.js');
+var PRIVATE_Message_themes_MessageStyles_css = require('./PRIVATE_Message/themes/MessageStyles.css.js');
+var Flex = require('./Flex-2eb09dad.js');
+var classNames = require('./classNames-d619a292.js');
+
+const severityIcons = {
+    confirmation: PRIVATE_ThemedIcons_MessageConfirmationIcon.MessageConfirmationIcon,
+    error: PRIVATE_ThemedIcons_MessageErrorIcon.MessageErrorIcon,
+    info: PRIVATE_ThemedIcons_MessageInfoIcon.MessageInfoIcon,
+    warning: PRIVATE_ThemedIcons_MessageWarningIcon.MessageWarningIcon
+};
+/**
+ * StartIcon Component for rendering the severity based icon in Message
+ */
+function MessageStartIcon({ severity, variant = 'banner', translations }) {
+    const IconComponent = severityIcons[severity];
+    // TODO: JET-50793
+    const iconContent = variant !== 'inline' ? (jsxRuntime.jsx(Flex.Flex, { align: "center", height: "100%", children: jsxRuntime.jsx("span", { class: PRIVATE_Message_themes_MessageStyles_css.startIconContainerStyles[variant], role: "img", title: translations?.[severity], children: jsxRuntime.jsx(IconComponent, {}) }) })) : (jsxRuntime.jsx("span", { class: PRIVATE_Message_themes_MessageStyles_css.startIconContainerStyles.inline, role: "img", title: translations?.[severity], children: jsxRuntime.jsx(IconComponent, {}) }));
+    // If detail content is rendered, then wrap it in a div with specified style classes
+    // TODO: JET-48715 - remove marker classes
+    // Right now, oj-message-banner component uses this for unit tests and has no alternate way for
+    // testing. This will need to be removed as we work on oj-c-message-banner.
+    const markerClassForTests = 'oj-c-messagebanner-start-icon';
+    return (jsxRuntime.jsx("div", { class: classNames.classNames([
+            variant === 'banner' && markerClassForTests,
+            PRIVATE_Message_themes_MessageStyles_css.messageStartIconStyles.base,
+            PRIVATE_Message_themes_MessageStyles_css.messageStartIconStyles[variant],
+            PRIVATE_Message_themes_MessageStyles_css.severityIconStyles[variant]
+        ]), role: "presentation", children: iconContent }));
+}
+
+exports.MessageStartIcon = MessageStartIcon;
+//# sourceMappingURL=MessageStartIcon-8a59b0b6.js.map

package/cjs/MessageStartIcon-8a59b0b6.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageStartIcon-8a59b0b6.js","sources":["../../src/PRIVATE_Message/MessageStartIcon.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { MessageSeverity, MessageVariant } from './Message.types';\nimport { MessageConfirmationIcon } from '../PRIVATE_ThemedIcons/MessageConfirmationIcon';\nimport { MessageErrorIcon } from '../PRIVATE_ThemedIcons/MessageErrorIcon';\nimport { MessageInfoIcon } from '../PRIVATE_ThemedIcons/MessageInfoIcon';\nimport { MessageWarningIcon } from '../PRIVATE_ThemedIcons/MessageWarningIcon';\nimport { Flex } from '../UNSAFE_Flex';\nimport {\n  messageStartIconStyles,\n  severityIconStyles,\n  startIconContainerStyles\n} from './themes/MessageStyles.css';\n\nconst severityIcons = {\n  confirmation: MessageConfirmationIcon,\n  error: MessageErrorIcon,\n  info: MessageInfoIcon,\n  warning: MessageWarningIcon\n};\n\n/**\n * Props for the StartIcon component\n */\ntype Props = {\n  /**\n   * The icon severity\n   */\n  severity: Exclude<MessageSeverity, 'none'>;\n\n  /**\n   * Style variant\n   */\n  variant?: MessageVariant;\n\n  /**\n   * Translations resources\n   * TODO: Replace with preact translations when it is available\n   */\n  translations?: {\n    /**\n     * Text for 'error' severity level\n     */\n    error?: string;\n\n    /**\n     * Text for 'warning' severity level\n     */\n    warning?: string;\n\n    /**\n     * Text for 'info' severity level\n     */\n    info?: string;\n\n    /**\n     * Text for 'confirmation' severity level\n     */\n    confirmation?: string;\n  };\n};\n\n/**\n * StartIcon Component for rendering the severity based icon in Message\n */\nfunction MessageStartIcon({ severity, variant = 'banner', translations }: Props) {\n  const IconComponent = severityIcons[severity];\n  // TODO: JET-50793\n  const iconContent =\n    variant !== 'inline' ? (\n      <Flex align=\"center\" height=\"100%\">\n        <span class={startIconContainerStyles[variant]} role=\"img\" title={translations?.[severity]}>\n          <IconComponent />\n        </span>\n      </Flex>\n    ) : (\n      <span class={startIconContainerStyles.inline} role=\"img\" title={translations?.[severity]}>\n        <IconComponent />\n      </span>\n    );\n  // If detail content is rendered, then wrap it in a div with specified style classes\n  // TODO: JET-48715 - remove marker classes\n  // Right now, oj-message-banner component uses this for unit tests and has no alternate way for\n  // testing. This will need to be removed as we work on oj-c-message-banner.\n  const markerClassForTests = 'oj-c-messagebanner-start-icon';\n  return (\n    <div\n      class={classNames([\n        variant === 'banner' && markerClassForTests,\n        messageStartIconStyles.base,\n        messageStartIconStyles[variant],\n        severityIconStyles[variant]\n      ])}\n      role=\"presentation\">\n      {iconContent}\n    </div>\n  );\n}\n\nexport { MessageStartIcon };\n"],"names":["MessageConfirmationIcon","MessageErrorIcon","MessageInfoIcon","MessageWarningIcon","_jsx","Flex","startIconContainerStyles","classNames","messageStartIconStyles","severityIconStyles"],"mappings":";;;;;;;;;;;;;;AAoBA,MAAM,aAAa,GAAG;AACpB,IAAA,YAAY,EAAEA,mEAAuB;AACrC,IAAA,KAAK,EAAEC,qDAAgB;AACvB,IAAA,IAAI,EAAEC,mDAAe;AACrB,IAAA,OAAO,EAAEC,yDAAkB;CAC5B,CAAC;AA2CF;;AAEG;AACH,SAAS,gBAAgB,CAAC,EAAE,QAAQ,EAAE,OAAO,GAAG,QAAQ,EAAE,YAAY,EAAS,EAAA;AAC7E,IAAA,MAAM,aAAa,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;;AAE9C,IAAA,MAAM,WAAW,GACf,OAAO,KAAK,QAAQ,IAClBC,eAACC,SAAI,EAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,YAChCD,cAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAEE,iEAAwB,CAAC,OAAO,CAAC,EAAE,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,YAAY,GAAG,QAAQ,CAAC,EACxF,QAAA,EAAAF,cAAA,CAAC,aAAa,EAAA,EAAA,CAAG,GACZ,EACF,CAAA,KAEPA,cAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAEE,iEAAwB,CAAC,MAAM,EAAE,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,YAAY,GAAG,QAAQ,CAAC,YACtFF,cAAC,CAAA,aAAa,EAAG,EAAA,CAAA,EAAA,CACZ,CACR,CAAC;;;;;IAKJ,MAAM,mBAAmB,GAAG,+BAA+B,CAAC;AAC5D,IAAA,QACEA,cAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAEG,qBAAU,CAAC;YAChB,OAAO,KAAK,QAAQ,IAAI,mBAAmB;AAC3C,YAAAC,+DAAsB,CAAC,IAAI;YAC3BA,+DAAsB,CAAC,OAAO,CAAC;YAC/BC,2DAAkB,CAAC,OAAO,CAAC;SAC5B,CAAC,EACF,IAAI,EAAC,cAAc,YAClB,WAAW,EAAA,CACR,EACN;AACJ;;;;"}

package/cjs/MessageSummary-5d0c793a.js

@@ -0,0 +1,28 @@
+/* @oracle/oraclejet-preact: 15.1.2 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+require('./utils/UNSAFE_classNames.js');
+var PRIVATE_Message_themes_MessageStyles_css = require('./PRIVATE_Message/themes/MessageStyles.css.js');
+var classNames = require('./classNames-d619a292.js');
+
+/**
+ * Summary Component for rendering the summary text of the Message
+ */
+function MessageSummary({ text, variant = 'banner' }) {
+    // If detail content is rendered, then wrap it in a div with specified style classes
+    // TODO: JET-48715 - remove marker classes
+    // Right now, oj-message-banner component uses this for unit tests and has no alternate way for
+    // testing. This will need to be removed as we work on oj-c-message-banner.
+    // TODO:  Refactor to utilize useComponentTheme and multiVariantStyles.
+    const markerClassForTests = 'oj-c-messagebanner-summary';
+    const classes = classNames.classNames([
+        variant === 'banner' && markerClassForTests,
+        PRIVATE_Message_themes_MessageStyles_css.messageSummaryStyles.base,
+        PRIVATE_Message_themes_MessageStyles_css.messageSummaryStyles[variant]
+    ]);
+    return (jsxRuntime.jsx("div", { role: "heading", class: classes, children: text }));
+}
+
+exports.MessageSummary = MessageSummary;
+//# sourceMappingURL=MessageSummary-5d0c793a.js.map

package/cjs/MessageSummary-5d0c793a.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageSummary-5d0c793a.js","sources":["../../src/PRIVATE_Message/MessageSummary.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { messageSummaryStyles } from './themes/MessageStyles.css';\nimport { MessageVariant } from './Message.types';\n\n/**\n * Props for the Summary component\n */\ntype Props = {\n  /**\n   * The summary text\n   */\n  text?: string;\n\n  /**\n   * Style variant\n   */\n  variant?: MessageVariant;\n};\n\n/**\n * Summary Component for rendering the summary text of the Message\n */\nfunction MessageSummary({ text, variant = 'banner' }: Props) {\n  // If detail content is rendered, then wrap it in a div with specified style classes\n  // TODO: JET-48715 - remove marker classes\n  // Right now, oj-message-banner component uses this for unit tests and has no alternate way for\n  // testing. This will need to be removed as we work on oj-c-message-banner.\n  // TODO:  Refactor to utilize useComponentTheme and multiVariantStyles.\n\n  const markerClassForTests = 'oj-c-messagebanner-summary';\n  const classes = classNames([\n    variant === 'banner' && markerClassForTests,\n    messageSummaryStyles.base,\n    messageSummaryStyles[variant]\n  ]);\n  return (\n    <div role=\"heading\" class={classes}>\n      {text}\n    </div>\n  );\n}\n\nexport { MessageSummary };\n"],"names":["classNames","messageSummaryStyles","_jsx"],"mappings":";;;;;;;;AA2BA;;AAEG;AACH,SAAS,cAAc,CAAC,EAAE,IAAI,EAAE,OAAO,GAAG,QAAQ,EAAS,EAAA;;;;;;IAOzD,MAAM,mBAAmB,GAAG,4BAA4B,CAAC;IACzD,MAAM,OAAO,GAAGA,qBAAU,CAAC;QACzB,OAAO,KAAK,QAAQ,IAAI,mBAAmB;AAC3C,QAAAC,6DAAoB,CAAC,IAAI;QACzBA,6DAAoB,CAAC,OAAO,CAAC;AAC9B,KAAA,CAAC,CAAC;AACH,IAAA,QACEC,cAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EAC/B,IAAI,EAAA,CACD,EACN;AACJ;;;;"}

package/cjs/MessageTimestamp-eab05143.js

@@ -0,0 +1,30 @@
+/* @oracle/oraclejet-preact: 15.1.2 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+require('./utils/UNSAFE_classNames.js');
+var PRIVATE_Message_themes_MessageStyles_css = require('./PRIVATE_Message/themes/MessageStyles.css.js');
+var MessageFormattingUtils = require('./MessageFormattingUtils-3cf76724.js');
+var classNames = require('./classNames-d619a292.js');
+
+/**
+ * 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: JET-48715 - remove marker classes
+    // Right now, oj-message-banner component uses this for unit tests and has no alternate way for
+    // testing. This will need to be removed as we work on oj-c-message-banner.
+    // TODO:  Refactor to utilize useComponentTheme and multiVariantStyles.
+    const markerClassForTests = 'oj-c-messagebanner-timestamp';
+    const classes = classNames.classNames([
+        variant === 'banner' && markerClassForTests,
+        PRIVATE_Message_themes_MessageStyles_css.messageTimestampStyles[variant]
+    ]);
+    // Otherwise, render the timestamp
+    const formattedTimestamp = MessageFormattingUtils.formatTimestamp(value);
+    return jsxRuntime.jsx("div", { class: classes, children: formattedTimestamp });
+}
+
+exports.MessageTimestamp = MessageTimestamp;
+//# sourceMappingURL=MessageTimestamp-eab05143.js.map

package/cjs/MessageTimestamp-eab05143.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageTimestamp-eab05143.js","sources":["../../src/PRIVATE_Message/MessageTimestamp.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { messageTimestampStyles } from './themes/MessageStyles.css';\nimport { MessageVariant } from './Message.types';\nimport { formatTimestamp } from './MessageFormattingUtils';\n\n/**\n * Props for the Timestamp component\n */\ntype Props = {\n  /**\n   * The timestamp to show in ISO format\n   */\n  value: string;\n\n  /**\n   * Style variant\n   */\n  variant?: MessageVariant;\n};\n\n/**\n * Timestamp Component for rendering timestamp in Message\n */\nfunction MessageTimestamp({ value, variant = 'banner' }: Props) {\n  // If detail content is rendered, then wrap it in a div with specified style classes\n  // TODO: JET-48715 - remove marker classes\n  // Right now, oj-message-banner component uses this for unit tests and has no alternate way for\n  // testing. This will need to be removed as we work on oj-c-message-banner.\n  // TODO:  Refactor to utilize useComponentTheme and multiVariantStyles.\n\n  const markerClassForTests = 'oj-c-messagebanner-timestamp';\n  const classes = classNames([\n    variant === 'banner' && markerClassForTests,\n    messageTimestampStyles[variant]\n  ]);\n\n  // Otherwise, render the timestamp\n  const formattedTimestamp = formatTimestamp(value as string);\n  return <div class={classes}>{formattedTimestamp}</div>;\n}\n\nexport { MessageTimestamp };\n"],"names":["classNames","messageTimestampStyles","formatTimestamp","_jsx"],"mappings":";;;;;;;;;AA4BA;;AAEG;AACH,SAAS,gBAAgB,CAAC,EAAE,KAAK,EAAE,OAAO,GAAG,QAAQ,EAAS,EAAA;;;;;;IAO5D,MAAM,mBAAmB,GAAG,8BAA8B,CAAC;IAC3D,MAAM,OAAO,GAAGA,qBAAU,CAAC;QACzB,OAAO,KAAK,QAAQ,IAAI,mBAAmB;QAC3CC,+DAAsB,CAAC,OAAO,CAAC;AAChC,KAAA,CAAC,CAAC;;AAGH,IAAA,MAAM,kBAAkB,GAAGC,sCAAe,CAAC,KAAe,CAAC,CAAC;AAC5D,IAAA,OAAOC,wBAAK,KAAK,EAAE,OAAO,EAAG,QAAA,EAAA,kBAAkB,GAAO,CAAC;AACzD;;;;"}

package/cjs/MessageToast-5cd5ca8d.js

@@ -0,0 +1,253 @@
+/* @oracle/oraclejet-preact: 15.1.2 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+var UNSAFE_Environment = require('./index-c3ee789d.js');
+var hooks_PRIVATE_useMessagesFocusManager = require('./hooks/PRIVATE_useMessagesFocusManager.js');
+var hooks_UNSAFE_useBreakpointValues = require('./hooks/UNSAFE_useBreakpointValues.js');
+var hooks_UNSAFE_useMessagesContext = require('./hooks/UNSAFE_useMessagesContext.js');
+var hooks_UNSAFE_useTranslationBundle = require('./hooks/UNSAFE_useTranslationBundle.js');
+var PRIVATE_Message = require('./PRIVATE_Message.js');
+var PRIVATE_MessageLayer = require('./index-e49287d9.js');
+require('./UNSAFE_Flex.js');
+require('./UNSAFE_FocusTrap.js');
+var UNSAFE_LiveRegion = require('./UNSAFE_LiveRegion.js');
+var utils_UNSAFE_arrayUtils = require('./utils/UNSAFE_arrayUtils.js');
+var hooks_UNSAFE_useComponentTheme = require('./hooks/UNSAFE_useComponentTheme.js');
+var UNSAFE_MessageToast_themes_redwood_MessageToastTheme = require('./UNSAFE_MessageToast/themes/redwood/MessageToastTheme.js');
+var FocusTrap = require('./FocusTrap-2209a89f.js');
+var Flex = require('./Flex-2eb09dad.js');
+var MessagesManager = require('./MessagesManager-411c2e38.js');
+var MessageUtils = require('./MessageUtils-ff85758f.js');
+
+// TODO: refactor types so we don't repeat them here and MessageLayer
+// 
+const positions = utils_UNSAFE_arrayUtils.stringLiteralArray([
+    'top',
+    'top-left',
+    'top-right',
+    'top-start',
+    'top-end',
+    'bottom',
+    'bottom-left',
+    'bottom-right',
+    'bottom-start',
+    'bottom-end'
+]);
+/**
+ * Animation states for toast messages
+ * TODO: Get this from theme context provider
+ */
+const animationStates = {
+    entering: (node) => ({
+        from: {
+            transform: `translate(0, ${node.offsetHeight}px)`,
+            opacity: 1
+        },
+        to: {
+            transform: 'translate(0, 0)',
+            opacity: 1
+        },
+        end: {
+            transform: 'unset',
+            opacity: 1
+        },
+        options: {
+            duration: 250
+        }
+    }),
+    exiting: {
+        from: {
+            opacity: 1
+        },
+        to: {
+            opacity: 0
+        },
+        end: {
+            opacity: 0
+        },
+        options: {
+            duration: 250
+        }
+    }
+};
+const initialAnimationStyles = {
+    opacity: 0
+};
+function MessageToast({ data, detailRendererKey, iconRendererKey, renderers, onClose, offset, position }) {
+    const messagesRef = hooks.useRef(new Map());
+    const autoFocusRef = hooks.useRef(null);
+    const containerDivRef = hooks.useRef(null);
+    const focusHandleRef = hooks.useRef(null);
+    const [liveRegionText, setLiveRegionText] = hooks.useState();
+    const [shouldRender, setShouldRender] = hooks.useState(data.length > 0);
+    const [shouldTrapFocus, setShouldTrapFocus] = hooks.useState(false);
+    const translations = hooks_UNSAFE_useTranslationBundle.useTranslationBundle('@oracle/oraclejet-preact');
+    const { UNSAFE_messagesLayerId } = hooks_UNSAFE_useMessagesContext.useMessagesContext();
+    // We need a ref that holds the current & previous data length, as the exiting
+    // node will always call handleNextFocus with previous data.
+    // As in TransitionGroup, when an item is removed from the data, a new vnode
+    // will not be created instead previous vnode will be used. So, the new handleNextFocus
+    // will not be called when the old vnode exits. Thus, we will be using a ref
+    // to always get the correct current data length.
+    const dataLengthRef = hooks.useRef(data.length);
+    const prevDataLengthRef = hooks.useRef(0);
+    // Update the data length ref
+    dataLengthRef.current = data.length;
+    // Update the focusHandleRef
+    hooks.useImperativeHandle(focusHandleRef, () => ({
+        focus: () => {
+            // Only trigger focus if the component is rendering messages
+            if (data.length) {
+                // set the autoFocus ref to the first message and enable the focus trap
+                // this will automatically focus the first message
+                autoFocusRef.current = messagesRef.current.get(data[0].key) ?? null;
+                setShouldTrapFocus(true);
+                return true;
+            }
+            return false;
+        },
+        contains: (element) => {
+            // Only invoke method if the component is rendering messages
+            if (data.length && element) {
+                return containerDivRef.current?.contains(element) ?? false;
+            }
+            return false;
+        }
+    }), [data]);
+    // Register handlers for focus management
+    const { controller, handlers } = hooks_PRIVATE_useMessagesFocusManager.useMessageFocusManager(focusHandleRef, {
+        onFocus: hooks.useCallback(() => {
+            setLiveRegionText(translations.message_navigationFromMessagesRegion());
+        }, [translations]),
+        onFocusLeave: hooks.useCallback(() => {
+            // disable trap which should revert the focus back to the last focused item
+            setShouldTrapFocus(false);
+        }, [])
+    }, {
+        // we do not want the focus manager to handle Esc key as we handle it using the
+        // FocusTrap here
+        handleEscapeKey: false
+    });
+    /**
+     * Handles focus when a message is closed and animated away from the DOM
+     * @param key The key of the message
+     * @param index The index of the message
+     */
+    const handleNextFocus = hooks.useCallback((_key, index, closedMessageNode) => {
+        const isClosedMessageFocused = closedMessageNode?.contains(document.activeElement);
+        // If there are no messages, do not render anything. As the old messages
+        // are still in the DOM, use the data count to determine what to do next as it
+        // represents the next state.
+        if (dataLengthRef.current === 0) {
+            setShouldRender(false);
+            setShouldTrapFocus(false);
+            // If the current message holds focus, then restore previous focus
+            if (isClosedMessageFocused) {
+                // As we have FocusTrap, trying to restore focus now will simply result in focus being pulled
+                // back again. So, we restore the focus in the next tick so that the rendering will have been
+                // done in the microtask.
+                setImmediate(() => controller.restorePriorFocus());
+            }
+            return;
+        }
+        // In TransitionGroup, when an item is removed from the data, a new vnode
+        // will not be created instead previous vnode will be used. So, the new handleNextFocus
+        // will not be called when the old vnode exits. Thus, all the deps will not be pointing to
+        // the current references, rather they will be pointing to the ones where this vnode
+        // last existed in the data.
+        // This means, the data will contain the closing message as well. But, all the ref objects
+        // still point to the most up-to-date values. With that in mind, we will be evaluating the
+        // following values.
+        const renderedMessagesCount = data.length;
+        // Now that this message is closed, focus the next message that will take this index. If no
+        // message will take this message's index, then it means that this is the last message. If
+        // that is the case, focus the message at the previous index.
+        // Use the count of the messages that are currently shown in the UI (current state including
+        // the message that will be removed). This way we can get the correct item from the data
+        // as it will contain the closing message as well.
+        const nextMessageIndexToFocus = index + 1 < renderedMessagesCount ? index + 1 : index - 1;
+        // if next message is available then transfer the focus to the next element
+        if (nextMessageIndexToFocus > -1 && isClosedMessageFocused) {
+            const nextMessageKey = data[nextMessageIndexToFocus].key;
+            messagesRef.current.get(nextMessageKey)?.focus();
+        }
+    }, [controller, data]);
+    // We will be using a function based ref to store the refs in the Map
+    const setHTMLDivElement = hooks.useCallback(
+    // TODO: use ramda.curry here (currently it is throwing ts error when used with generics)
+    (key) => {
+        return (ref) => messagesRef.current.set(key, ref);
+    }, []);
+    // Prioritize this component whenever the data changes and
+    // the new data has at least one message
+    hooks.useEffect(() => {
+        const previousDataLength = prevDataLengthRef.current;
+        prevDataLengthRef.current = data.length;
+        // if there are messages that need to be rendered now, then do the following deeds:
+        // 1. set the shouldRender flag
+        // 2. set the live region
+        // 3. prioritize this message component to be the latest
+        if (data.length) {
+            // set state to render content whenever the data is not empty
+            setShouldRender(true);
+            if (data.length > previousDataLength) {
+                // Only when having a new message, update the aria-live area with the
+                // text to indicate how to get the focus to the new message.
+                setLiveRegionText(translations.message_navigationToMessagesRegion());
+            }
+            controller.prioritize();
+            return;
+        }
+        // if there were messages and now removed, then set the live region to
+        // announce this information
+        if (previousDataLength) {
+            setLiveRegionText(translations.messageToast_allMessagesClosed());
+            return;
+        }
+        // When there are no messages, clear the live region so that
+        // the navigation text will be read when a new message appear
+        setLiveRegionText('');
+    }, [controller, data.length, translations]);
+    // determine responsive max-width
+    const maxWidth = hooks_UNSAFE_useBreakpointValues.useBreakpointValues({
+        sm: '--oj-c-PRIVATE-DO-NOT-USE-message-toast-max-width-sm',
+        md: '--oj-c-PRIVATE-DO-NOT-USE-message-toast-max-width-md',
+        lg: '--oj-c-PRIVATE-DO-NOT-USE-message-toast-max-width-lg'
+    });
+    // without offset, the messages will be hugging the vertical edges of the screen
+    // so we will set a default offset.vertical value (any offset from the props will be
+    // added to this).
+    const paddedOffset = hooks_UNSAFE_useBreakpointValues.useBreakpointValues({
+        sm: {
+            horizontal: typeof offset === 'number' ? offset : offset?.horizontal ?? 0,
+            vertical: 16 + (typeof offset === 'number' ? offset : offset?.vertical ?? 0)
+        },
+        lg: {
+            horizontal: typeof offset === 'number' ? offset : offset?.horizontal ?? 0,
+            vertical: 24 + (typeof offset === 'number' ? offset : offset?.vertical ?? 0)
+        }
+    });
+    // TODO: move this to the individual components.
+    // Cannot do this as of now, as doing do results in oj-message-banner not working.
+    const messageTranslations = hooks.useMemo(() => ({
+        close: translations.close(),
+        confirmation: translations.confirmation(),
+        error: translations.error(),
+        info: translations.info(),
+        warning: translations.warn()
+    }), [translations]);
+    const { classes } = hooks_UNSAFE_useComponentTheme.useComponentTheme(UNSAFE_MessageToast_themes_redwood_MessageToastTheme.MessageToastRedwoodTheme);
+    // When both shouldRender flag is false and no data to render, do not render
+    // anything except the live region
+    if (!shouldRender && data.length === 0) {
+        return jsxRuntime.jsx(UNSAFE_LiveRegion.LiveRegion, { children: liveRegionText });
+    }
+    // TODO - Message Toast shouldn't always render as 'dark', it should be the inverse of the root environment context
+    // See JET-57590
+    return (jsxRuntime.jsxs(UNSAFE_Environment.EnvironmentProvider, { environment: { colorScheme: 'dark' }, children: [jsxRuntime.jsx(PRIVATE_MessageLayer.MessageLayer, { offset: paddedOffset, position: position, children: jsxRuntime.jsx("div", { class: classes, ref: containerDivRef, tabIndex: -1, id: UNSAFE_messagesLayerId, ...handlers, children: jsxRuntime.jsx(FocusTrap.FocusTrap, { autoFocusRef: autoFocusRef, isDisabled: !shouldTrapFocus, children: jsxRuntime.jsx(Flex.Flex, { direction: "column", gap: "1x", align: "center", maxWidth: maxWidth, children: jsxRuntime.jsx(MessagesManager.MessagesManager, { animationStates: animationStates, initialAnimationStyles: initialAnimationStyles, data: data, onMessageWillRemove: handleNextFocus, children: ({ index, item }) => (jsxRuntime.jsx(PRIVATE_Message.Message, { messageRef: setHTMLDivElement(item.key), item: item, detailRenderer: MessageUtils.getRendererWithoutIndex(item, detailRendererKey, renderers), iconRenderer: MessageUtils.getRendererWithoutIndex(item, iconRendererKey, renderers), index: index, onClose: onClose, translations: messageTranslations, variant: "toast" }, item.key)) }) }) }) }) }), jsxRuntime.jsx(UNSAFE_LiveRegion.LiveRegion, { children: liveRegionText })] }));
+}
+
+exports.MessageToast = MessageToast;
+//# sourceMappingURL=MessageToast-5cd5ca8d.js.map