@oracle/oraclejet-preact 15.1.5 → 15.1.6

package/es/MessageFormattingUtils-24e5f4ed.js

@@ -1,102 +0,0 @@
-/* @oracle/oraclejet-preact: 15.1.5 */
-import { getLocale } from './utils/UNSAFE_getLocale.js';
-import './utils/UNSAFE_stringUtils.js';
-import { s as severities } from './Message.types-a7a0a35b.js';
-import { a as isEmptyOrUndefined } from './stringUtils-0805904b.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 = 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' && 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' && !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));
-}
-
-export { formatTimestamp as f, isValidValueForProp as i };
-//# sourceMappingURL=MessageFormattingUtils-24e5f4ed.js.map

package/es/MessageFormattingUtils-24e5f4ed.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MessageFormattingUtils-24e5f4ed.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":[],"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,GAAG,SAAS,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,IAAI,UAAU,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,CAAC,kBAAkB,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/es/MessageStartIcon-f459d4a6.js

@@ -1,40 +0,0 @@
-/* @oracle/oraclejet-preact: 15.1.5 */
-import { jsx } from 'preact/jsx-runtime';
-import './utils/UNSAFE_classNames.js';
-import { MessageConfirmationIcon as SvgSuccessS } from './PRIVATE_ThemedIcons/MessageConfirmationIcon.js';
-import { MessageErrorIcon as SvgErrorS } from './PRIVATE_ThemedIcons/MessageErrorIcon.js';
-import { MessageInfoIcon as SvgInformationS } from './PRIVATE_ThemedIcons/MessageInfoIcon.js';
-import { MessageWarningIcon as SvgWarningS } from './PRIVATE_ThemedIcons/MessageWarningIcon.js';
-import './UNSAFE_Flex.js';
-import { startIconContainerStyles, messageStartIconStyles, severityIconStyles } from './PRIVATE_Message/themes/MessageStyles.css.js';
-import { F as Flex } from './Flex-1ec75561.js';
-import { c as classNames } from './classNames-6df97f98.js';
-
-const severityIcons = {
-    confirmation: SvgSuccessS,
-    error: SvgErrorS,
-    info: SvgInformationS,
-    warning: SvgWarningS
-};
-/**
- * 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' ? (jsx(Flex, { align: "center", height: "100%", children: jsx("span", { class: startIconContainerStyles[variant], role: "img", title: translations?.[severity], children: jsx(IconComponent, {}) }) })) : (jsx("span", { class: startIconContainerStyles.inline, role: "img", title: translations?.[severity], children: 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 (jsx("div", { class: classNames([
-            variant === 'banner' && markerClassForTests,
-            messageStartIconStyles.base,
-            messageStartIconStyles[variant],
-            severityIconStyles[variant]
-        ]), role: "presentation", children: iconContent }));
-}
-
-export { MessageStartIcon as M };
-//# sourceMappingURL=MessageStartIcon-f459d4a6.js.map

package/es/MessageStartIcon-f459d4a6.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MessageStartIcon-f459d4a6.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"],"mappings":";;;;;;;;;;;;AAoBA,MAAM,aAAa,GAAG;AACpB,IAAA,YAAY,EAAEA,WAAuB;AACrC,IAAA,KAAK,EAAEC,SAAgB;AACvB,IAAA,IAAI,EAAEC,eAAe;AACrB,IAAA,OAAO,EAAEC,WAAkB;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,IAAC,IAAI,EAAA,EAAC,KAAK,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,YAChCA,GAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAE,wBAAwB,CAAC,OAAO,CAAC,EAAE,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,YAAY,GAAG,QAAQ,CAAC,EACxF,QAAA,EAAAA,GAAA,CAAC,aAAa,EAAA,EAAA,CAAG,GACZ,EACF,CAAA,KAEPA,GAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,wBAAwB,CAAC,MAAM,EAAE,IAAI,EAAC,KAAK,EAAC,KAAK,EAAE,YAAY,GAAG,QAAQ,CAAC,YACtFA,GAAC,CAAA,aAAa,EAAG,EAAA,CAAA,EAAA,CACZ,CACR,CAAC;;;;;IAKJ,MAAM,mBAAmB,GAAG,+BAA+B,CAAC;AAC5D,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EACE,KAAK,EAAE,UAAU,CAAC;YAChB,OAAO,KAAK,QAAQ,IAAI,mBAAmB;AAC3C,YAAA,sBAAsB,CAAC,IAAI;YAC3B,sBAAsB,CAAC,OAAO,CAAC;YAC/B,kBAAkB,CAAC,OAAO,CAAC;SAC5B,CAAC,EACF,IAAI,EAAC,cAAc,YAClB,WAAW,EAAA,CACR,EACN;AACJ;;;;"}

package/es/MessageSummary-ca8ee040.js

@@ -1,26 +0,0 @@
-/* @oracle/oraclejet-preact: 15.1.5 */
-import { jsx } from 'preact/jsx-runtime';
-import './utils/UNSAFE_classNames.js';
-import { messageSummaryStyles } from './PRIVATE_Message/themes/MessageStyles.css.js';
-import { c as classNames } from './classNames-6df97f98.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([
-        variant === 'banner' && markerClassForTests,
-        messageSummaryStyles.base,
-        messageSummaryStyles[variant]
-    ]);
-    return (jsx("div", { role: "heading", class: classes, children: text }));
-}
-
-export { MessageSummary as M };
-//# sourceMappingURL=MessageSummary-ca8ee040.js.map

package/es/MessageSummary-ca8ee040.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MessageSummary-ca8ee040.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":["_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,GAAG,UAAU,CAAC;QACzB,OAAO,KAAK,QAAQ,IAAI,mBAAmB;AAC3C,QAAA,oBAAoB,CAAC,IAAI;QACzB,oBAAoB,CAAC,OAAO,CAAC;AAC9B,KAAA,CAAC,CAAC;AACH,IAAA,QACEA,GAAA,CAAA,KAAA,EAAA,EAAK,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,OAAO,EAAA,QAAA,EAC/B,IAAI,EAAA,CACD,EACN;AACJ;;;;"}

package/es/MessageTimestamp-5727cf78.js

@@ -1,28 +0,0 @@
-/* @oracle/oraclejet-preact: 15.1.5 */
-import { jsx } from 'preact/jsx-runtime';
-import './utils/UNSAFE_classNames.js';
-import { messageTimestampStyles } from './PRIVATE_Message/themes/MessageStyles.css.js';
-import { f as formatTimestamp } from './MessageFormattingUtils-24e5f4ed.js';
-import { c as classNames } from './classNames-6df97f98.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([
-        variant === 'banner' && markerClassForTests,
-        messageTimestampStyles[variant]
-    ]);
-    // Otherwise, render the timestamp
-    const formattedTimestamp = formatTimestamp(value);
-    return jsx("div", { class: classes, children: formattedTimestamp });
-}
-
-export { MessageTimestamp as M };
-//# sourceMappingURL=MessageTimestamp-5727cf78.js.map

package/es/MessageTimestamp-5727cf78.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MessageTimestamp-5727cf78.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":["_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,GAAG,UAAU,CAAC;QACzB,OAAO,KAAK,QAAQ,IAAI,mBAAmB;QAC3C,sBAAsB,CAAC,OAAO,CAAC;AAChC,KAAA,CAAC,CAAC;;AAGH,IAAA,MAAM,kBAAkB,GAAG,eAAe,CAAC,KAAe,CAAC,CAAC;AAC5D,IAAA,OAAOA,aAAK,KAAK,EAAE,OAAO,EAAG,QAAA,EAAA,kBAAkB,GAAO,CAAC;AACzD;;;;"}

package/es/MessageToast-121853b0.js

@@ -1,251 +0,0 @@
-/* @oracle/oraclejet-preact: 15.1.5 */
-import { jsx, jsxs } from 'preact/jsx-runtime';
-import { useRef, useState, useImperativeHandle, useCallback, useEffect, useMemo } from 'preact/hooks';
-import { a as EnvironmentProvider } from './index-ce660c32.js';
-import { useMessageFocusManager } from './hooks/PRIVATE_useMessagesFocusManager.js';
-import { useBreakpointValues } from './hooks/UNSAFE_useBreakpointValues.js';
-import { useMessagesContext } from './hooks/UNSAFE_useMessagesContext.js';
-import { useTranslationBundle } from './hooks/UNSAFE_useTranslationBundle.js';
-import { Message } from './PRIVATE_Message.js';
-import { M as MessageLayer } from './index-77f64294.js';
-import './UNSAFE_Flex.js';
-import './UNSAFE_FocusTrap.js';
-import { LiveRegion } from './UNSAFE_LiveRegion.js';
-import { stringLiteralArray } from './utils/UNSAFE_arrayUtils.js';
-import { useComponentTheme } from './hooks/UNSAFE_useComponentTheme.js';
-import { MessageToastRedwoodTheme } from './UNSAFE_MessageToast/themes/redwood/MessageToastTheme.js';
-import { F as FocusTrap } from './FocusTrap-46648548.js';
-import { F as Flex } from './Flex-1ec75561.js';
-import { M as MessagesManager } from './MessagesManager-a46ef486.js';
-import { a as getRendererWithoutIndex } from './MessageUtils-42e0fc95.js';
-
-// TODO: refactor types so we don't repeat them here and MessageLayer
-// 
-const positions = 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 = useRef(new Map());
-    const autoFocusRef = useRef(null);
-    const containerDivRef = useRef(null);
-    const focusHandleRef = useRef(null);
-    const [liveRegionText, setLiveRegionText] = useState();
-    const [shouldRender, setShouldRender] = useState(data.length > 0);
-    const [shouldTrapFocus, setShouldTrapFocus] = useState(false);
-    const translations = useTranslationBundle('@oracle/oraclejet-preact');
-    const { UNSAFE_messagesLayerId } = 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 = useRef(data.length);
-    const prevDataLengthRef = useRef(0);
-    // Update the data length ref
-    dataLengthRef.current = data.length;
-    // Update the focusHandleRef
-    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 } = useMessageFocusManager(focusHandleRef, {
-        onFocus: useCallback(() => {
-            setLiveRegionText(translations.message_navigationFromMessagesRegion());
-        }, [translations]),
-        onFocusLeave: 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 = 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 = 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
-    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 = 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 = 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 = useMemo(() => ({
-        close: translations.close(),
-        confirmation: translations.confirmation(),
-        error: translations.error(),
-        info: translations.info(),
-        warning: translations.warn()
-    }), [translations]);
-    const { classes } = useComponentTheme(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 jsx(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 (jsxs(EnvironmentProvider, { environment: { colorScheme: 'dark' }, children: [jsx(MessageLayer, { offset: paddedOffset, position: position, children: jsx("div", { class: classes, ref: containerDivRef, tabIndex: -1, id: UNSAFE_messagesLayerId, ...handlers, children: jsx(FocusTrap, { autoFocusRef: autoFocusRef, isDisabled: !shouldTrapFocus, children: jsx(Flex, { direction: "column", gap: "1x", align: "center", maxWidth: maxWidth, children: jsx(MessagesManager, { animationStates: animationStates, initialAnimationStyles: initialAnimationStyles, data: data, onMessageWillRemove: handleNextFocus, children: ({ index, item }) => (jsx(Message, { messageRef: setHTMLDivElement(item.key), item: item, detailRenderer: getRendererWithoutIndex(item, detailRendererKey, renderers), iconRenderer: getRendererWithoutIndex(item, iconRendererKey, renderers), index: index, onClose: onClose, translations: messageTranslations, variant: "toast" }, item.key)) }) }) }) }) }), jsx(LiveRegion, { children: liveRegionText })] }));
-}
-
-export { MessageToast as M };
-//# sourceMappingURL=MessageToast-121853b0.js.map

package/es/MessageToast-121853b0.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MessageToast-121853b0.js","sources":["../../src/UNSAFE_MessageToast/MessageToast.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, ComponentProps, RefObject } from 'preact';\nimport {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState\n} from 'preact/hooks';\n\nimport { EnvironmentProvider } from '../UNSAFE_Environment';\nimport {\n  FocusableComponentHandle,\n  useMessageFocusManager\n} from '../hooks/PRIVATE_useMessagesFocusManager';\nimport { useBreakpointValues } from '../hooks/UNSAFE_useBreakpointValues';\nimport { useMessagesContext } from '../hooks/UNSAFE_useMessagesContext';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { getRendererWithoutIndex, Message, MessagesManager } from '../PRIVATE_Message';\nimport { MessageLayer } from '../PRIVATE_MessageLayer';\nimport { BundleType } from '../resources/nls/bundle';\nimport { Flex } from '../UNSAFE_Flex';\nimport { FocusTrap } from '../UNSAFE_FocusTrap';\nimport { LiveRegion } from '../UNSAFE_LiveRegion';\nimport { stringLiteralArray } from '../utils/UNSAFE_arrayUtils';\nimport { Item, ItemMetadata } from '../utils/UNSAFE_dataProvider';\nimport { Size } from '../utils/UNSAFE_size';\nimport { useComponentTheme } from '../hooks/UNSAFE_useComponentTheme';\nimport { MessageToastRedwoodTheme } from './themes/redwood/MessageToastTheme';\n\n// TODO: refactor types so we don't repeat them here and MessageLayer\n// \nconst positions = stringLiteralArray([\n  'top',\n  'top-left',\n  'top-right',\n  'top-start',\n  'top-end',\n  'bottom',\n  'bottom-left',\n  'bottom-right',\n  'bottom-start',\n  'bottom-end'\n]);\n\ntype Position = typeof positions[number];\n\ntype Offset =\n  | number\n  | {\n      horizontal?: number;\n      vertical?: number;\n    };\n\n// TODO: Refactor Message Item types\n// \n\n/**\n * An object representing a single message in MessageToast component.\n */\nexport type MessageToastItem = {\n  /**\n   * Defines whether or not to include the close icon for the message\n   *\n   * @default 'on'\n   */\n  closeAffordance?: 'on' | 'off';\n\n  /**\n   * Defines the detail text of the message\n   */\n  detail?: string;\n\n  /**\n   * Defines the severity of the message\n   *\n   * @default 'error'\n   */\n  severity?: 'none' | 'error' | 'warning' | 'confirmation' | 'info';\n\n  /**\n   * Defines the sound to be played when opening the message\n   *\n   * @default 'none'\n   */\n  sound?: 'default' | 'none' | string;\n\n  /**\n   * Defines the primary text of the message\n   */\n  summary?: string;\n\n  /**\n   * Defines the time after which the message is to be closed automatically\n   *\n   * on - default of 5s\n   * off - no auto timeout, manually dismissed\n   * number - seconds in milliseconds format\n   *\n   * @default 'off'\n   */\n  autoTimeout?: 'on' | 'off' | number;\n};\n\n/**\n * Structure of data item passed to the renderers\n */\nexport type MessageToastRendererDataItem<K, D> = {\n  /**\n   * The data for the current message\n   */\n  data: D;\n\n  /**\n   * The key for the current message\n   */\n  key: K;\n\n  /**\n   * The metadata for the current message\n   */\n  metadata?: ItemMetadata<K>;\n};\n\ntype Props<Key, Data> = {\n  /**\n   * Defines the fixed position where the notifications will to be placed on the screen.\n   * - top-start resolves to top-left in LTR (top-right in RTL)\n   * - top-end resolves to top-right in LTR (top-left in RTL)\n   * - bottom-start resolves to bottom-left in LTR (bottom-right in RTL)\n   * - bottom-end resolves to bottom-right in LTR (bottom-left in RTL)\n   *\n   * default bottom\n   */\n  position?: Position;\n\n  /**\n   * Defines an offset (in pixels) in the placement. Value can be supplied as a number or\n   * an object with horizontal and vertical values.\n   *\n   * default 0\n   */\n  offset?: Offset;\n\n  /**\n   * Data for the MessageToast component. This data is used for rendering each toast message.\n   * The key for each message will be configured using the key of the corresponding item. This way,\n   * the component will know whether a new message is being added or an existing message is being updated/removed\n   * when the new data comes in.\n   */\n  data: Item<Key, Data>[];\n\n  /**\n   * Triggered when a user tries to close a message through UI interaction. The application\n   * should listen to this event and remove the corresponding message item from the data\n   * which would then result in the message closed. If the application\n   * fails to remove the message item from the data, then no change will be done in the\n   * UI by the component and the message will stay in the UI opened.\n   */\n  onClose?: (item: Item<Key, Data>) => void;\n\n  /**\n   * Applications can use this property to provide the key of a renderer or a function that\n   * returns the key of a renderer to use for rendering the detail content.\n   *\n   * When a renderer key is provided as a value for this property, the corresponding renderer\n   * will be used for rendering the detail content for all the messages. If applications want\n   * to use a different renderer for different messages, they can provide a function that\n   * returns a renderer key instead.\n   *\n   * The provided function should accept an Item and return a key to a renderer for\n   * rendering the corresponding message's detail content. The value returned from this function\n   * should be a key to one of the renderers provided. If the returned value is not\n   * one of the keys of the provided renderers, the component will throw an Error.\n   *\n   * If the function returns undefined, the component then will perform default rendering\n   * of the detail content using the detail property of the corresponding message.\n   *\n   * If an application specifies both detail and a valid detailRendererKey, the detailRendererKey will\n   * take precedence and the corresponding renderer will be used for rendering the detail content.\n   */\n  detailRendererKey?: string | ((item: Item<Key, Data>) => string | undefined);\n\n  /**\n   * Applications can use this property to provide the key of a renderer or a function that\n   * returns the key of the renderer to use for rendering the start icon.\n   *\n   * When a renderer key is provided as a value for this property, the corresponding renderer\n   * will be used for rendering the start icon for all the messages. If applications want\n   * to use a different renderer for different messages, they can provide a function that\n   * returns a renderer key instead.\n   *\n   * The provided function should accept an Item and return a key to a renderer for\n   * rendering the corresponding message's start icon. The value returned from this function\n   * should be a key to one of the renderers provided. If the returned value is not\n   * one of the keys of the provided renderers, the component will throw an Error.\n   *\n   * If the function returns undefined, the component then will perform default rendering\n   * of the start icon using the severity property of the corresponding message.\n   *\n   * If an application specifies both severity and a valid iconRendererKey, the iconRendererKey will\n   * take precedence and the corresponding renderer will be used for rendering the start icon.\n   */\n  iconRendererKey?: string | ((item: Item<Key, Data>) => string | undefined);\n\n  /**\n   * A set of available renderers for rendering the message content. Which renderer is used\n   * for rendering which content will be decided by specific properties in the row data.\n   */\n  renderers?: Record<string, (data: MessageToastRendererDataItem<Key, Data>) => ComponentChildren>;\n};\n\n/**\n * Animation states for toast messages\n * TODO: Get this from theme context provider\n */\nconst animationStates: ComponentProps<typeof MessagesManager>['animationStates'] = {\n  entering: (node) => ({\n    from: {\n      transform: `translate(0, ${node.offsetHeight}px)`,\n      opacity: 1\n    },\n    to: {\n      transform: 'translate(0, 0)',\n      opacity: 1\n    },\n    end: {\n      transform: 'unset',\n      opacity: 1\n    },\n    options: {\n      duration: 250\n    }\n  }),\n  exiting: {\n    from: {\n      opacity: 1\n    },\n    to: {\n      opacity: 0\n    },\n    end: {\n      opacity: 0\n    },\n    options: {\n      duration: 250\n    }\n  }\n};\nconst initialAnimationStyles = {\n  opacity: 0\n} as const;\n\nexport function MessageToast<K extends string | number, D extends MessageToastItem>({\n  data,\n  detailRendererKey,\n  iconRendererKey,\n  renderers,\n  onClose,\n  offset,\n  position\n}: Props<K, D>) {\n  const messagesRef = useRef(new Map<K, HTMLDivElement | null>());\n  const autoFocusRef = useRef<HTMLDivElement>(null) as RefObject<HTMLDivElement | null>;\n  const containerDivRef = useRef<HTMLDivElement>(null);\n  const focusHandleRef = useRef<FocusableComponentHandle>(null);\n  const [liveRegionText, setLiveRegionText] = useState<string>();\n  const [shouldRender, setShouldRender] = useState(data.length > 0);\n  const [shouldTrapFocus, setShouldTrapFocus] = useState(false);\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n  const { UNSAFE_messagesLayerId } = useMessagesContext();\n\n  // We need a ref that holds the current & previous data length, as the exiting\n  // node will always call handleNextFocus with previous data.\n  // As in TransitionGroup, when an item is removed from the data, a new vnode\n  // will not be created instead previous vnode will be used. So, the new handleNextFocus\n  // will not be called when the old vnode exits. Thus, we will be using a ref\n  // to always get the correct current data length.\n  const dataLengthRef = useRef(data.length);\n  const prevDataLengthRef = useRef(0);\n  // Update the data length ref\n  dataLengthRef.current = data.length;\n\n  // Update the focusHandleRef\n  useImperativeHandle(\n    focusHandleRef,\n    () => ({\n      focus: () => {\n        // Only trigger focus if the component is rendering messages\n        if (data.length) {\n          // set the autoFocus ref to the first message and enable the focus trap\n          // this will automatically focus the first message\n          autoFocusRef.current = messagesRef.current.get(data[0].key) ?? null;\n          setShouldTrapFocus(true);\n          return true;\n        }\n        return false;\n      },\n      contains: (element: Element) => {\n        // Only invoke method if the component is rendering messages\n        if (data.length && element) {\n          return containerDivRef.current?.contains(element) ?? false;\n        }\n        return false;\n      }\n    }),\n    [data]\n  );\n\n  // Register handlers for focus management\n  const { controller, handlers } = useMessageFocusManager(\n    focusHandleRef,\n    {\n      onFocus: useCallback(() => {\n        setLiveRegionText(translations.message_navigationFromMessagesRegion());\n      }, [translations]),\n      onFocusLeave: useCallback(() => {\n        // disable trap which should revert the focus back to the last focused item\n        setShouldTrapFocus(false);\n      }, [])\n    },\n    {\n      // we do not want the focus manager to handle Esc key as we handle it using the\n      // FocusTrap here\n      handleEscapeKey: false\n    }\n  );\n\n  /**\n   * Handles focus when a message is closed and animated away from the DOM\n   * @param key The key of the message\n   * @param index The index of the message\n   */\n  const handleNextFocus = useCallback(\n    (_key: K, index: number, closedMessageNode?: Element) => {\n      const isClosedMessageFocused = closedMessageNode?.contains(document.activeElement);\n\n      // If there are no messages, do not render anything. As the old messages\n      // are still in the DOM, use the data count to determine what to do next as it\n      // represents the next state.\n      if (dataLengthRef.current === 0) {\n        setShouldRender(false);\n        setShouldTrapFocus(false);\n        // If the current message holds focus, then restore previous focus\n        if (isClosedMessageFocused) {\n          // As we have FocusTrap, trying to restore focus now will simply result in focus being pulled\n          // back again. So, we restore the focus in the next tick so that the rendering will have been\n          // done in the microtask.\n          setImmediate(() => controller.restorePriorFocus());\n        }\n        return;\n      }\n\n      // In TransitionGroup, when an item is removed from the data, a new vnode\n      // will not be created instead previous vnode will be used. So, the new handleNextFocus\n      // will not be called when the old vnode exits. Thus, all the deps will not be pointing to\n      // the current references, rather they will be pointing to the ones where this vnode\n      // last existed in the data.\n      // This means, the data will contain the closing message as well. But, all the ref objects\n      // still point to the most up-to-date values. With that in mind, we will be evaluating the\n      // following values.\n      const renderedMessagesCount = data.length;\n\n      // Now that this message is closed, focus the next message that will take this index. If no\n      // message will take this message's index, then it means that this is the last message. If\n      // that is the case, focus the message at the previous index.\n      // Use the count of the messages that are currently shown in the UI (current state including\n      // the message that will be removed). This way we can get the correct item from the data\n      // as it will contain the closing message as well.\n      const nextMessageIndexToFocus = index + 1 < renderedMessagesCount ? index + 1 : index - 1;\n\n      // if next message is available then transfer the focus to the next element\n      if (nextMessageIndexToFocus > -1 && isClosedMessageFocused) {\n        const nextMessageKey = data[nextMessageIndexToFocus].key;\n        messagesRef.current.get(nextMessageKey)?.focus();\n      }\n    },\n    [controller, data]\n  );\n\n  // We will be using a function based ref to store the refs in the Map\n  const setHTMLDivElement = useCallback(\n    // TODO: use ramda.curry here (currently it is throwing ts error when used with generics)\n    (key: K) => {\n      return (ref: HTMLDivElement | null) => messagesRef.current.set(key, ref);\n    },\n    []\n  );\n  // Prioritize this component whenever the data changes and\n  // the new data has at least one message\n  useEffect(() => {\n    const previousDataLength = prevDataLengthRef.current;\n    prevDataLengthRef.current = data.length;\n\n    // if there are messages that need to be rendered now, then do the following deeds:\n    // 1. set the shouldRender flag\n    // 2. set the live region\n    // 3. prioritize this message component to be the latest\n    if (data.length) {\n      // set state to render content whenever the data is not empty\n      setShouldRender(true);\n      if (data.length > previousDataLength) {\n        // Only when having a new message, update the aria-live area with the\n        // text to indicate how to get the focus to the new message.\n        setLiveRegionText(translations.message_navigationToMessagesRegion());\n      }\n      controller.prioritize();\n      return;\n    }\n\n    // if there were messages and now removed, then set the live region to\n    // announce this information\n    if (previousDataLength) {\n      setLiveRegionText(translations.messageToast_allMessagesClosed());\n      return;\n    }\n\n    // When there are no messages, clear the live region so that\n    // the navigation text will be read when a new message appear\n    setLiveRegionText('');\n  }, [controller, data.length, translations]);\n\n  // determine responsive max-width\n  const maxWidth = useBreakpointValues<Size>({\n    sm: '--oj-c-PRIVATE-DO-NOT-USE-message-toast-max-width-sm',\n    md: '--oj-c-PRIVATE-DO-NOT-USE-message-toast-max-width-md',\n    lg: '--oj-c-PRIVATE-DO-NOT-USE-message-toast-max-width-lg'\n  });\n  // without offset, the messages will be hugging the vertical edges of the screen\n  // so we will set a default offset.vertical value (any offset from the props will be\n  // added to this).\n  const paddedOffset = useBreakpointValues<Offset>({\n    sm: {\n      horizontal: typeof offset === 'number' ? offset : offset?.horizontal ?? 0,\n      vertical: 16 + (typeof offset === 'number' ? offset : offset?.vertical ?? 0)\n    },\n    lg: {\n      horizontal: typeof offset === 'number' ? offset : offset?.horizontal ?? 0,\n      vertical: 24 + (typeof offset === 'number' ? offset : offset?.vertical ?? 0)\n    }\n  });\n\n  // TODO: move this to the individual components.\n  // Cannot do this as of now, as doing do results in oj-message-banner not working.\n  const messageTranslations = useMemo(\n    () => ({\n      close: translations.close(),\n      confirmation: translations.confirmation(),\n      error: translations.error(),\n      info: translations.info(),\n      warning: translations.warn()\n    }),\n    [translations]\n  );\n\n  const { classes } = useComponentTheme(MessageToastRedwoodTheme);\n\n  // When both shouldRender flag is false and no data to render, do not render\n  // anything except the live region\n  if (!shouldRender && data.length === 0) {\n    return <LiveRegion>{liveRegionText}</LiveRegion>;\n  }\n\n  // TODO - Message Toast shouldn't always render as 'dark', it should be the inverse of the root environment context\n  // See JET-57590\n  return (\n    <EnvironmentProvider environment={{ colorScheme: 'dark' }}>\n      <MessageLayer offset={paddedOffset} position={position}>\n        <div\n          class={classes}\n          ref={containerDivRef}\n          tabIndex={-1} // Need to add tabindex to make the container receive the focus events\n          id={UNSAFE_messagesLayerId}\n          {...handlers}>\n          <FocusTrap autoFocusRef={autoFocusRef} isDisabled={!shouldTrapFocus}>\n            <Flex direction=\"column\" gap=\"1x\" align=\"center\" maxWidth={maxWidth}>\n              <MessagesManager\n                animationStates={animationStates}\n                initialAnimationStyles={initialAnimationStyles}\n                data={data}\n                onMessageWillRemove={handleNextFocus}>\n                {({ index, item }) => (\n                  <Message\n                    messageRef={setHTMLDivElement(item.key)}\n                    item={item}\n                    detailRenderer={getRendererWithoutIndex(item, detailRendererKey, renderers)}\n                    iconRenderer={getRendererWithoutIndex(item, iconRendererKey, renderers)}\n                    index={index}\n                    key={item.key}\n                    onClose={onClose}\n                    translations={messageTranslations}\n                    variant=\"toast\"\n                  />\n                )}\n              </MessagesManager>\n            </Flex>\n          </FocusTrap>\n        </div>\n      </MessageLayer>\n      <LiveRegion>{liveRegionText}</LiveRegion>\n    </EnvironmentProvider>\n  );\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}