@oracle/oraclejet-preact 14.0.0

package/es/PRIVATE_Message.js

@@ -0,0 +1,832 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import "./PRIVATE_Message.css";
+import { useCallback, useRef, useEffect, useState } from 'preact/hooks';
+import { Flex } from './UNSAFE_Flex.js';
+import { Timer } from './utils/PRIVATE_timer.js';
+import { classNames } from './utils/UNSAFE_classNames.js';
+import { Button } from './UNSAFE_Button.js';
+import './UNSAFE_ThemedIcons.js';
+import { IcoClose as SvgIcoClose, IcoSuccessS as SvgIcoSuccessS, IcoErrorS as SvgIcoErrorS, IcoInformationS as SvgIcoInformationS, IcoWarningS as SvgIcoWarningS } from './UNSAFE_Icons.js';
+import { Fragment } from 'preact';
+import { getLocale } from './utils/UNSAFE_getLocale.js';
+import { isEmptyOrUndefined } from './utils/UNSAFE_stringUtils.js';
+import { stringLiteralArray } from './utils/UNSAFE_arrayUtils.js';
+import { Logger } from './utils/UNSAFE_logger.js';
+import { playDefaultNotificationSound, playAudioFromURL } from './utils/UNSAFE_soundUtils.js';
+import { Transition, TransitionGroup } from './PRIVATE_TransitionGroup.js';
+import { _ as __rest } from './tslib.es6-8b94ba02.js';
+import { useAnimation } from './hooks/UNSAFE_useAnimation.js';
+import { useMessagesContext } from './hooks/UNSAFE_useMessagesContext.js';
+import './utils/UNSAFE_interpolations/dimensions.js';
+import './utils/UNSAFE_size.js';
+import './_curry1-d822c6e1.js';
+import './utils/UNSAFE_mergeInterpolations.js';
+import './_curry3-ddab9fe1.js';
+import './_curry2-50442f66.js';
+import './_has-c4aaaf43.js';
+import './utils/UNSAFE_interpolations/boxalignment.js';
+import './keys-fed67954.js';
+import './utils/UNSAFE_interpolations/flexbox.js';
+import './utils/UNSAFE_interpolations/flexitem.js';
+import './UNSAFE_BaseButton.js';
+import './hooks/UNSAFE_usePress.js';
+import './hooks/UNSAFE_useHover.js';
+import './hooks/UNSAFE_useToggle.js';
+import './hooks/UNSAFE_useActive.js';
+import 'preact/compat';
+import './utils/PRIVATE_clientHints.js';
+import './hooks/UNSAFE_useTabbableMode.js';
+import './utils/UNSAFE_mergeProps.js';
+import './UNSAFE_Icon.js';
+import './hooks/UNSAFE_useTooltip.js';
+import './hooks/UNSAFE_useId.js';
+import './UNSAFE_Floating.js';
+import './index-14bba6f7.js';
+import './hooks/UNSAFE_useUser.js';
+import './UNSAFE_Environment.js';
+import './UNSAFE_Layer.js';
+import './utils/PRIVATE_floatingUtils.js';
+import './utils/PRIVATE_refUtils.js';
+import './hooks/UNSAFE_useOutsideClick.js';
+import './hooks/UNSAFE_useFocus.js';
+import './hooks/UNSAFE_useTouch.js';
+import './hooks/UNSAFE_useTheme.js';
+
+const messageCloseButtonStyles = {
+  base: "_1pqzdb4",
+  banner: "_1bfnhff",
+  inline: undefined,
+  toast: "_1dislpv"
+};
+/**
+ * A Component for rendering the message close button
+ */
+
+function MessageCloseButton({
+  onAction,
+  buttonRenderer,
+  title = 'Close',
+  variant = 'banner'
+}) {
+  const renderedButton = buttonRenderer ? buttonRenderer(title, onAction, variant) : jsx(Button, {
+    startIcon: jsx(SvgIcoClose, {}),
+    size: "sm",
+    title: title,
+    variant: "borderless",
+    onAction: onAction
+  }); // 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-close-icon';
+  const classes = classNames([variant === 'banner' && markerClassForTests, messageCloseButtonStyles.base, messageCloseButtonStyles[variant]]); // Otherwise, render the close icon
+
+  return jsx("div", Object.assign({
+    class: classes
+  }, {
+    children: renderedButton
+  }));
+}
+
+const messageStartIconStyles$1 = {
+  base: "_1ssxatk",
+  toast: "_1dd95zq"
+};
+/**
+ * Component for rendering custom icon/content for start icon in Message
+ */
+
+function MessageCustomStartIcon({
+  item,
+  renderer
+}) {
+  const classes = classNames([messageStartIconStyles$1.base, // for now only toast has support for custom icon
+  messageStartIconStyles$1.toast]);
+  return jsx("div", Object.assign({
+    class: classes,
+    role: "presentation"
+  }, {
+    children: renderer(item)
+  }));
+}
+
+const variants = stringLiteralArray(['banner', 'inline', 'toast']);
+const severities = stringLiteralArray(['error', 'warning', 'confirmation', 'info', 'none']);
+
+/**
+ * @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));
+}
+
+const messageDetailStyles = {
+  // TODO: Reevaluate once the TEXT component is available (JET-46891)
+  base: "_149k7j3",
+  banner: "_15gqlr3",
+  inline: undefined,
+  toast: "_8cb62b"
+};
+/**
+ * Default renderer for rendering the detail content.
+ *
+ * @param item The data item object
+ * @returns Rendered detail content
+ */
+
+function defaultDetailRenderer(item) {
+  const {
+    detail
+  } = item.data; // If the detail is null or an empty string, do not render the
+  // content row
+
+  if (!isValidValueForProp(detail)) {
+    return null;
+  }
+
+  return jsx(Fragment, {
+    children: detail
+  });
+}
+/**
+ * Detail Component for rendering the detail content of the Message
+ */
+
+
+function MessageDetail({
+  item,
+  renderer = defaultDetailRenderer,
+  variant = 'banner'
+}) {
+  const renderedContent = renderer(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([variant === 'banner' && markerClassForTests, messageDetailStyles.base, messageDetailStyles[variant]]);
+  return jsx("div", Object.assign({
+    class: classes
+  }, {
+    children: renderedContent
+  }));
+}
+
+const messageHeaderStyles = {
+  base: "jwogc",
+  banner: "oretv0",
+  inline: undefined,
+  toast: "_13dem6l"
+};
+/**
+ * A component that styles the header for the message component
+ * @param param0 Props
+ * @returns MessageHeader component instance
+ */
+
+function MessageHeader({
+  children,
+  variant = 'banner'
+}) {
+  const rootClasses = classNames([messageHeaderStyles.base, messageHeaderStyles[variant]]);
+  return jsx("div", Object.assign({
+    role: "presentation",
+    class: rootClasses
+  }, {
+    children: children
+  }));
+}
+
+const messageStartIconStyles = "_1d9hv8b";
+const severityIconStyles = {
+  banner: "_1roldm7",
+  inline: "owa2z3",
+  toast: "_1yb0u3l"
+};
+const severityIcons = {
+  confirmation: SvgIcoSuccessS,
+  error: SvgIcoErrorS,
+  info: SvgIcoInformationS,
+  warning: SvgIcoWarningS
+};
+const containerStyles = "ml53dk";
+/**
+ * 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, Object.assign({
+    align: "center",
+    height: "100%"
+  }, {
+    children: jsx("span", Object.assign({
+      class: containerStyles,
+      role: "img",
+      title: translations === null || translations === void 0 ? void 0 : translations[severity]
+    }, {
+      children: jsx(IconComponent, {})
+    }))
+  })) : jsx("span", Object.assign({
+    class: containerStyles,
+    role: "img",
+    title: translations === null || translations === void 0 ? void 0 : 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", Object.assign({
+    class: classNames([variant === 'banner' && markerClassForTests, messageStartIconStyles, severityIconStyles[variant]]),
+    role: "presentation"
+  }, {
+    children: iconContent
+  }));
+}
+
+const messageSummaryStyles = {
+  // TODO: Reevaluate once the TEXT component is available (JET-46891)
+  base: "t65d78",
+  banner: "_1i99nfe",
+  inline: "m0ty6g",
+  toast: "_91dl5"
+};
+/**
+ * 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.
+  const markerClassForTests = 'oj-c-messagebanner-summary';
+  const classes = classNames([variant === 'banner' && markerClassForTests, messageSummaryStyles.base, messageSummaryStyles[variant]]);
+  return jsx("div", Object.assign({
+    role: "heading",
+    class: classes
+  }, {
+    children: text
+  }));
+}
+
+const messageTimestampStyles = {
+  banner: "_4e9xiq",
+  inline: undefined,
+  toast: undefined
+};
+/**
+ * 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.
+  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", Object.assign({
+    class: classes
+  }, {
+    children: formattedTimestamp
+  }));
+}
+
+/**
+ * Logger that prepends the component name to the message
+ */
+const MessageLogger = {
+    error: (message, type = 'common') => Logger.error(`JET Message(${type}): ${message}`),
+    warn: (message, type = 'common') => Logger.warn(`JET Message(${type}): ${message}`),
+    info: (message, type = 'common') => Logger.info(`JET Message(${type}): ${message}`),
+    log: (message, type = 'common') => Logger.log(`JET Message(${type}): ${message}`)
+};
+/**
+ * Plays a sound based on the provided argument. Supported keywords:
+ * 1. default - plays the default beep sound
+ * 2. none - no sound will be played
+ *
+ * @param sound Supported keywords or URL to an audio file
+ */
+async function playSound(sound) {
+    if (sound === 'none') {
+        // no need to play any audio
+        return;
+    }
+    // For default, we play a beep sound using WebAudio API
+    if (sound === 'default') {
+        try {
+            playDefaultNotificationSound();
+        }
+        catch (error) {
+            // Default sound is not played due to some error
+            // Log a message and return doing nothing else
+            MessageLogger.warn(`Failed to play the default sound. ${error}.`);
+        }
+        return;
+    }
+    // If it is not a key word, then it is an URL
+    try {
+        await playAudioFromURL(sound);
+    }
+    catch (error) {
+        // Playing audio using the URL failed.
+        MessageLogger.warn(`Failed to play the audio from the url ${sound}. ${error}.`);
+    }
+}
+/**
+ * A helper function that throws an error
+ *
+ * @param message The error message
+ * @param type The type of the message that is throwing an error
+ * @throws {Error}
+ */
+function throwError(message, type = 'common') {
+    throw new Error(`JET Message(${type}) - ${message}`);
+}
+/**
+ * Fetches a renderer for the current message if one is provided
+ *
+ * @param message The item context for the current message
+ * @param rendererIdentifier Identifier of the current renderer
+ * @param renderers All available renderers
+ * @returns The renderer for rendering the custom content
+ */
+function getRenderer(message, rendererIdentifier, renderers, type) {
+    // If either detailRenderer function or record of renderers are not available,
+    // return null
+    if (!rendererIdentifier || !renderers) {
+        return undefined;
+    }
+    const rendererKey = typeof rendererIdentifier === 'function' ? rendererIdentifier(message) : rendererIdentifier;
+    // If rendererKey is null or undefined, then we need to use default rendering
+    // so return null
+    if (rendererKey == null) {
+        return undefined;
+    }
+    // If the returned render key is a string but does not exist in the provided
+    // record of renderers, throw an error
+    if (!(rendererKey in renderers)) {
+        throwError(`${rendererKey} is not a valid template name for the message with key=${message.key}`, type);
+    }
+    // Else, fetch and return the renderer
+    return renderers[rendererKey];
+}
+/**
+ * Fetches a renderer for the current message if one is provided.
+ * Proxies the said renderer to exclude the index in the payload.
+ *
+ * @param message The item context for the current message
+ * @param rendererIdentifier Identifier of the current renderer
+ * @param renderers All available renderers
+ * @returns The renderer for rendering the custom content
+ */
+function getRendererWithoutIndex(message, rendererIdentifier, renderers, type) {
+    const renderer = getRenderer(message, rendererIdentifier, renderers, type);
+    if (typeof renderer === 'function') {
+        return (data) => {
+            const dataCopy = Object.assign({}, data);
+            if ('index' in dataCopy) {
+                delete dataCopy['index'];
+            }
+            return renderer.call(null, dataCopy);
+        };
+    }
+    return renderer;
+}
+/**
+ * Generates a root style class based on the severity. For invalid severity and severity=none
+ * no specific style class exists.
+ *
+ * @param severity The message severity
+ * @returns calculated style class based on the severity
+ */
+function severityBasedStyleClass(severity, variant) {
+    const isValidSeverity = isValidValueForProp(severity, 'severity');
+    return isValidSeverity && severity !== 'none' ? `oj-c-message${variant}-${severity}` : '';
+}
+/**
+ * Determines if a severity icon is needed based on the component severity
+ *
+ * @param severity The component severity
+ * @returns Whether or not to render the severity icon
+ */
+function isSeverityIconNeeded$1(severity) {
+    const isValidSeverity = isValidValueForProp(severity, 'severity');
+    return isValidSeverity && severity !== 'none';
+}
+
+/**
+ * Determines the base variant of the message - banner or toast
+ *
+ * @param variant The message variant
+ * @returns The base variant
+ */
+
+function getBaseVariant(variant) {
+  if (variant === 'pageBanner' || variant === 'sectionBanner') {
+    return 'banner';
+  }
+
+  return 'toast';
+}
+/**
+ * Determines if a severity icon is needed based on the component severity
+ *
+ * @param severity The component severity
+ * @returns Whether or not to render the severity icon
+ */
+
+
+function isSeverityIconNeeded(severity) {
+  const isValidSeverity = isValidValueForProp(severity, 'severity');
+  return isValidSeverity && severity !== 'none';
+}
+/**
+ * CSS styles for various components
+ */
+
+
+const messageStyles = {
+  base: {
+    banner: "qy3t0k",
+    toast: "_1f2uwhl"
+  },
+  section: "_10q4nvx",
+  // TODO: Replace with Flex and View components to handle padding and flex
+  content: {
+    base: "w084rn",
+    banner: "_1x2d7uj",
+    toast: "c8bywp"
+  }
+};
+/**
+ * Default timeout duration for autoTimeout in milliseconds
+ */
+
+const MIN_SECONDS = 5;
+const DEFAULT_TIMEOUT = MIN_SECONDS * 1000;
+/**
+ * Component that renders an individual message
+ */
+
+function Message({
+  closeButtonRenderer,
+  detailRenderer,
+  iconRenderer,
+  index = -1,
+  item,
+  onClose,
+  messageRef = () => {},
+  variant = 'pageBanner',
+  translations
+}) {
+  const {
+    closeAffordance = 'on',
+    severity = 'error',
+    sound,
+    summary,
+    timestamp
+  } = item.data;
+  const {
+    autoTimeout = 'off'
+  } = item.data;
+  const baseVariant = getBaseVariant(variant);
+  /**
+   * Handles clicking on the close icon of the message
+   */
+
+  const handleClose = useCallback(() => {
+    onClose === null || onClose === void 0 ? void 0 : onClose(item);
+  }, [item, onClose]);
+  /**
+   * Handles closing the message on pressing Esc
+   */
+
+  const handleCloseOnEsc = useCallback(event => {
+    // Close the message only when closeAffordance is on
+    if (event.key === 'Escape' && closeAffordance === 'on') {
+      onClose === null || onClose === void 0 ? void 0 : onClose(item);
+    }
+  }, [closeAffordance, item, onClose]);
+  /**
+   * Set auto timeout for toast messages
+   */
+
+  const shouldTimeout = baseVariant === 'toast' && autoTimeout !== 'off';
+  const currentTimerRef = useRef();
+  const timeout = typeof autoTimeout === 'number' ? autoTimeout : DEFAULT_TIMEOUT;
+  const timeoutDuration = autoTimeout === 'on' ? DEFAULT_TIMEOUT : timeout;
+  const startTimer = useCallback(() => {
+    if (currentTimerRef.current) return;
+    currentTimerRef.current = new Timer(handleClose, timeoutDuration);
+  }, [handleClose, timeoutDuration]);
+  const clearTimer = useCallback(() => {
+    if (!currentTimerRef.current) return;
+    currentTimerRef.current.clear();
+    currentTimerRef.current = undefined;
+  }, []);
+  const pauseTimer = useCallback(() => {
+    var _a;
+
+    (_a = currentTimerRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+  }, []);
+  const resumeTimer = useCallback(() => {
+    var _a;
+
+    (_a = currentTimerRef.current) === null || _a === void 0 ? void 0 : _a.resume();
+  }, []);
+  useEffect(() => {
+    if (isValidValueForProp(sound)) {
+      // It is sufficient to check for the value to be a
+      // non-empty string. The playSound method takes care of the rest.
+      playSound(sound);
+    } // on mount, start timer for toast messages if needed
+
+
+    if (shouldTimeout) {
+      startTimer();
+    }
+
+    return () => {
+      // clear out any pending timer
+      clearTimer();
+    }; // eslint-disable-next-line
+  }, []); // No deps to run this only on mount
+
+  const rootClasses = classNames([messageStyles.base[baseVariant], // for now, we do not have severity based styling on toast. So, we ignore this class for toasts
+  variant !== 'toast' && severityBasedStyleClass(severity, baseVariant), variant === 'sectionBanner' && messageStyles.section]);
+  const contentClasses = classNames([messageStyles.content.base, messageStyles.content[baseVariant]]); // We will be animating the root div, so add padding to an inner wrapper div so that
+  // when animating height looks smooth. If padding were to be added to the root
+  // div, the animation will not be smooth as height will never reach 0 due to the
+  // padding.
+
+  return jsx("div", Object.assign({
+    ref: messageRef,
+    class: rootClasses,
+    role: "alert",
+    "aria-atomic": "true",
+    tabIndex: 0,
+    onKeyUp: handleCloseOnEsc,
+    onfocusin: pauseTimer,
+    onfocusout: resumeTimer
+  }, {
+    children: jsxs("div", Object.assign({
+      class: contentClasses
+    }, {
+      children: [iconRenderer ? jsx(MessageCustomStartIcon, {
+        item: Object.assign(Object.assign({}, item), {
+          index
+        }),
+        renderer: iconRenderer
+      }) : isSeverityIconNeeded(severity) ? jsx(MessageStartIcon, {
+        severity: severity,
+        variant: baseVariant,
+        translations: translations
+      }) : null, jsxs(Flex, Object.assign({
+        direction: "column",
+        flex: "1",
+        gap: "--oj-c-PRIVATE-DO-NOT-USE-core-spacing-2x"
+      }, {
+        children: [jsxs(MessageHeader, Object.assign({
+          variant: baseVariant
+        }, {
+          children: [jsx(MessageSummary, {
+            variant: baseVariant,
+            text: summary
+          }), isValidValueForProp(timestamp, 'timestamp') && variant !== 'toast' && jsx(MessageTimestamp, {
+            variant: baseVariant,
+            value: timestamp
+          })]
+        })), jsx(MessageDetail, {
+          variant: baseVariant,
+          item: Object.assign(Object.assign({}, item), {
+            index
+          }),
+          renderer: detailRenderer
+        })]
+      })), closeAffordance === 'on' && jsx(MessageCloseButton, {
+        buttonRenderer: closeButtonRenderer,
+        title: translations === null || translations === void 0 ? void 0 : translations.close,
+        variant: baseVariant,
+        onAction: handleClose
+      })]
+    }))
+  }));
+}
+
+const DEFAULT_ANIMATION_STATES = {};
+/**
+ * A intermediary component that handles animation for the messages component.
+ *
+ * The expected flow is as follows:
+ * 1. message removed from the data
+ * 2. onExiting called and a callback is passed which needs to be called to complete the transition
+ * 3. state set to "exiting" in this component
+ * 4. triggers useAnimation to perform the exit animation
+ * 5. onAnimationEnd is called after the animation, which invokes the callback provided earlier
+ * 6. onExited is called (done when the callback mentioned above is called)
+ * 7. message is removed from the UI
+ *
+ * @param param0 Props of the message component
+ */
+function MessageTransition(_a) {
+    var { animationStates = DEFAULT_ANIMATION_STATES, initialAnimationStyles, onEntering, onExiting } = _a, transitionProps = __rest(_a, ["animationStates", "initialAnimationStyles", "onEntering", "onExiting"]);
+    const [state, setState] = useState('entering');
+    const animationCallbackRef = useRef();
+    const busyStateResolveRef = useRef();
+    const { controller, nodeRef } = useAnimation(state, {
+        animationStates,
+        isAnimatedOnMount: true,
+        onAnimationEnd: useCallback(() => {
+            var _a, _b;
+            // resolve animation callbacks & busyStates
+            (_a = animationCallbackRef.current) === null || _a === void 0 ? void 0 : _a.call(animationCallbackRef);
+            animationCallbackRef.current = undefined;
+            (_b = busyStateResolveRef.current) === null || _b === void 0 ? void 0 : _b.call(busyStateResolveRef);
+            busyStateResolveRef.current = undefined;
+        }, [])
+    });
+    const { addBusyState } = useMessagesContext();
+    const onEnteringCallback = useCallback((node, callback, metadata) => {
+        var _a;
+        // cancel any existing animation
+        if (animationCallbackRef.current) {
+            animationCallbackRef.current = undefined;
+            controller.cancel();
+        }
+        // resolve any existing busyState
+        (_a = busyStateResolveRef.current) === null || _a === void 0 ? void 0 : _a.call(busyStateResolveRef);
+        busyStateResolveRef.current = undefined;
+        onEntering === null || onEntering === void 0 ? void 0 : onEntering(node, undefined, metadata);
+        // start the animation and set the callback & busyState
+        setState('entering');
+        // if there is no animation configured, resolve immediately
+        if (animationStates['entering'] === undefined &&
+            animationStates['exiting => entering'] === undefined) {
+            callback === null || callback === void 0 ? void 0 : callback();
+            return;
+        }
+        animationCallbackRef.current = callback;
+        busyStateResolveRef.current = addBusyState === null || addBusyState === void 0 ? void 0 : addBusyState('messages animating');
+    }, [animationStates, controller, addBusyState, onEntering]);
+    const onExitingCallback = useCallback((node, callback, metadata) => {
+        var _a;
+        // cancel any existing animation
+        if (animationCallbackRef.current) {
+            animationCallbackRef.current = undefined;
+            controller.cancel();
+        }
+        // resolve any existing busyState
+        (_a = busyStateResolveRef.current) === null || _a === void 0 ? void 0 : _a.call(busyStateResolveRef);
+        busyStateResolveRef.current = undefined;
+        onExiting === null || onExiting === void 0 ? void 0 : onExiting(node, undefined, metadata);
+        // start the animation and set the callback & busyState
+        setState('exiting');
+        // if there is no animation configured, resolve immediately
+        if (animationStates['exiting'] === undefined &&
+            animationStates['entering => exiting'] === undefined) {
+            callback === null || callback === void 0 ? void 0 : callback();
+            return;
+        }
+        animationCallbackRef.current = callback;
+        busyStateResolveRef.current = addBusyState === null || addBusyState === void 0 ? void 0 : addBusyState('messages animating');
+    }, [animationStates, controller, addBusyState, onExiting]);
+    // if animation is interrupted, the busyState may be left hanging. So clear that on unmount
+    useEffect(() => () => { var _a; return (_a = busyStateResolveRef.current) === null || _a === void 0 ? void 0 : _a.call(busyStateResolveRef); }, []);
+    return (jsx("div", Object.assign({ ref: nodeRef, style: initialAnimationStyles }, { children: jsx(Transition, Object.assign({}, transitionProps, { onEntering: onEnteringCallback, onExiting: onExitingCallback })) })));
+}
+
+/**
+ * The component that renders individual messages for the provided data.
+ */
+function MessagesManager({ data, animationStates, children, initialAnimationStyles, onMessageWillRemove }) {
+    /**
+     * Handles when a message has finished to exit.
+     *
+     * @param node The corresponding message element
+     * @param callback A callback function to be called after the animation is complete
+     */
+    const handleExited = useCallback(async (node, metadata) => {
+        metadata && (onMessageWillRemove === null || onMessageWillRemove === void 0 ? void 0 : onMessageWillRemove(metadata.key, metadata.index, node));
+    }, [onMessageWillRemove]);
+    return (jsx(TransitionGroup, Object.assign({ elementType: Fragment }, { children: data.map((item, index) => (jsx(MessageTransition, Object.assign({ animationStates: animationStates, initialAnimationStyles: initialAnimationStyles, metadata: { index, key: item.key }, onExited: handleExited }, { children: children === null || children === void 0 ? void 0 : children({ index, item }) }), item.key))) })));
+}
+
+/**
+ * @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
+ */
+
+export { Message, MessageCloseButton, MessageDetail, MessageStartIcon, MessageSummary, MessageTimestamp, MessagesManager, formatTimestamp, getRenderer, getRendererWithoutIndex, isSeverityIconNeeded$1 as isSeverityIconNeeded, isValidValueForProp, playSound, severities, severityBasedStyleClass, throwError };
+/*  */
+//# sourceMappingURL=PRIVATE_Message.js.map