@oracle/oraclejet-preact 14.0.0

package/cjs/UNSAFE_MessageBanner.js

@@ -0,0 +1,259 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+var hooks_PRIVATE_useMessagesFocusManager = require('./hooks/PRIVATE_useMessagesFocusManager.js');
+var PRIVATE_Message = require('./PRIVATE_Message.js');
+require('./UNSAFE_Flex.js');
+var UNSAFE_LiveRegion = require('./UNSAFE_LiveRegion.js');
+var Flex = require('./Flex-71c6255f.js');
+var MessagesManager = require('./MessagesManager-ae82966c.js');
+var MessageUtils = require('./MessageUtils-c41ab02b.js');
+
+require('./utils/PRIVATE_timer.js');
+require('./utils/UNSAFE_classNames.js');
+require('./classNames-825d80d7.js');
+require('./MessageCloseButton-f11fb2d5.js');
+require('./UNSAFE_Button.js');
+require('./Button-b68878ba.js');
+require('./UNSAFE_BaseButton.js');
+require('./BaseButton-82e1ea19.js');
+require('./tslib.es6-d7adde1f.js');
+require('./hooks/UNSAFE_usePress.js');
+require('./hooks/UNSAFE_useHover.js');
+require('./hooks/UNSAFE_useToggle.js');
+require('./hooks/UNSAFE_useActive.js');
+require('preact/compat');
+require('./utils/UNSAFE_interpolations/dimensions.js');
+require('./utils/UNSAFE_arrayUtils.js');
+require('./utils/UNSAFE_size.js');
+require('./_curry1-72279dc6.js');
+require('./utils/UNSAFE_mergeInterpolations.js');
+require('./_curry3-31dd4145.js');
+require('./_curry2-f77dcc57.js');
+require('./_has-618da22b.js');
+require('./utils/PRIVATE_clientHints.js');
+require('./clientHints-78b0e917.js');
+require('./hooks/UNSAFE_useTabbableMode.js');
+require('preact');
+require('./utils/UNSAFE_mergeProps.js');
+require('./index-ed6e3090.js');
+require('./index-5304d101.js');
+require('./UNSAFE_Icon.js');
+require('./Icon-a21be510.js');
+require('./hooks/UNSAFE_useTooltip.js');
+require('./hooks/UNSAFE_useId.js');
+require('./UNSAFE_Floating.js');
+require('./Floating-3eb600a1.js');
+require('./index-94b1ff28.js');
+require('./hooks/UNSAFE_useUser.js');
+require('./UNSAFE_Environment.js');
+require('./UNSAFE_Layer.js');
+require('./utils/PRIVATE_floatingUtils.js');
+require('./utils/PRIVATE_refUtils.js');
+require('./hooks/UNSAFE_useOutsideClick.js');
+require('./hooks/UNSAFE_useFocus.js');
+require('./hooks/UNSAFE_useTouch.js');
+require('./hooks/UNSAFE_useAnimation.js');
+require('./useAnimation-9e794d84.js');
+require('./hooks/UNSAFE_useTheme.js');
+require('./MessageDetail-bc89f255.js');
+require('./MessageFormattingUtils-afa602f0.js');
+require('./utils/UNSAFE_getLocale.js');
+require('./utils/UNSAFE_stringUtils.js');
+require('./stringUtils-d9b75b25.js');
+require('./Message.types-8369755d.js');
+require('./MessageStartIcon-aab13995.js');
+require('./MessageSummary-e3c976d2.js');
+require('./MessageTimestamp-5c34afd5.js');
+require('./utils/UNSAFE_interpolations/boxalignment.js');
+require('./keys-4d35cf5a.js');
+require('./utils/UNSAFE_interpolations/flexbox.js');
+require('./flexbox-659a8cf1.js');
+require('./utils/UNSAFE_interpolations/flexitem.js');
+require('./flexitem-8d661117.js');
+require('./utils/UNSAFE_logger.js');
+require('./utils/UNSAFE_soundUtils.js');
+require('./PRIVATE_TransitionGroup.js');
+require('./hooks/UNSAFE_useMessagesContext.js');
+
+/**
+ * Animation states for banner messages
+ * TODO: Get this from theme context provider
+ */
+const animationStates = {
+    entering: (node) => ({
+        to: {
+            maxHeight: `${node.scrollHeight}px`,
+            overflow: 'hidden'
+        },
+        options: {
+            duration: 250
+        },
+        end: {
+            maxHeight: 'none',
+            overflow: 'initial'
+        }
+    }),
+    exiting: (node) => (Object.assign(Object.assign({}, (node.style.maxHeight === 'none' && {
+        from: {
+            maxHeight: `${node.scrollHeight}px`,
+            overflow: 'hidden'
+        }
+    })), { to: {
+            maxHeight: 0,
+            overflow: 'hidden'
+        }, end: {
+            maxHeight: 0,
+            overflow: 'hidden'
+        }, options: {
+            duration: 250
+        } }))
+};
+const initialAnimationStyles = {
+    maxHeight: 0,
+    overflow: 'hidden'
+};
+/**
+ * Renders individual messages based on the provided data
+ */
+function MessageBanner({ closeButtonRenderer, detailRendererKey, data, onClose, renderers, translations, type = 'section' }) {
+    // Keyboard Navigation and Focus Management
+    const messagesRef = hooks.useRef(new Map());
+    const containerDivRef = hooks.useRef(null);
+    const focusHandleRef = hooks.useRef(null);
+    const [liveRegionText, setLiveRegionText] = hooks.useState();
+    const [shouldRender, setShouldRender] = hooks.useState(data.length > 0);
+    // 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;
+    // We will be using a function based ref to store the refs in the Map
+    const setMessageRef = 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);
+    }, []);
+    // Update the focusHandleRef
+    hooks.useImperativeHandle(focusHandleRef, () => ({
+        focus: () => {
+            var _a;
+            // Only trigger focus if the component is rendering messages
+            if (data.length) {
+                const firstItemKey = data[0].key;
+                (_a = messagesRef.current.get(firstItemKey)) === null || _a === void 0 ? void 0 : _a.focus();
+                return true;
+            }
+            return false;
+        },
+        contains: (element) => {
+            var _a, _b;
+            // Only invoke method if the component is rendering messages
+            if (data.length && element) {
+                return (_b = (_a = containerDivRef.current) === null || _a === void 0 ? void 0 : _a.contains(element)) !== null && _b !== void 0 ? _b : false;
+            }
+            return false;
+        }
+    }), [data]);
+    // Register handlers for focus management
+    const { controller, handlers } = hooks_PRIVATE_useMessagesFocusManager.useMessageFocusManager(focusHandleRef, {
+        onFocus: hooks.useCallback(() => {
+            setLiveRegionText(translations === null || translations === void 0 ? void 0 : translations.navigationFromMessagesRegion);
+        }, [setLiveRegionText, translations])
+    });
+    /**
+     * Emits onClose event for the provided message.
+     * @param item The message which the user tried to close
+     */
+    const handleClose = hooks.useCallback((item) => {
+        onClose === null || onClose === void 0 ? void 0 : onClose(item);
+    }, [onClose]);
+    /**
+     * 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) => {
+        var _a;
+        const isClosedMessageFocused = closedMessageNode === null || closedMessageNode === void 0 ? void 0 : 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);
+            // If the current message holds focus, then restore previous focus
+            if (isClosedMessageFocused) {
+                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;
+            (_a = messagesRef.current.get(nextMessageKey)) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [controller, data]);
+    // Prioritize this component whenever the data changes and
+    // the new data has at least one message
+    hooks.useEffect(() => {
+        if (data.length) {
+            // set state to render content whenever the data is not empty
+            setShouldRender(true);
+            if (data.length > prevDataLengthRef.current) {
+                // 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 === null || translations === void 0 ? void 0 : translations.navigationToMessagesRegion);
+            }
+            controller.prioritize();
+        }
+        else {
+            // When there are no messages, clear the live region so that
+            // the navigation text will be read when a new message appear
+            setLiveRegionText('');
+        }
+        prevDataLengthRef.current = data.length;
+    }, [controller, data, translations]);
+    // When both shouldRender flag is false and no data to render, do not render
+    // anything
+    if (!shouldRender && data.length === 0) {
+        return null;
+    }
+    return (jsxRuntime.jsx("div", Object.assign({ ref: containerDivRef, class: "oj-c-messagebanner", tabIndex: -1 }, handlers, { children: jsxRuntime.jsxs(Flex.Flex, Object.assign({ direction: "column", gap: type === 'section' ? '1x' : undefined }, { children: [jsxRuntime.jsx(MessagesManager.MessagesManager, Object.assign({ animationStates: animationStates, initialAnimationStyles: initialAnimationStyles, data: data, onMessageWillRemove: handleNextFocus }, { children: ({ index, item }) => (jsxRuntime.jsx(PRIVATE_Message.Message, { messageRef: setMessageRef(item.key), item: item, closeButtonRenderer: closeButtonRenderer, detailRenderer: MessageUtils.getRenderer(item, detailRendererKey, renderers), index: index, variant: type === 'page' ? 'pageBanner' : 'sectionBanner', onClose: handleClose, translations: translations }, item.key)) })), jsxRuntime.jsx(UNSAFE_LiveRegion.LiveRegion, { children: liveRegionText })] })) })));
+}
+
+/**
+ * @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
+ */
+
+exports.MessageBanner = MessageBanner;
+/*  */
+//# sourceMappingURL=UNSAFE_MessageBanner.js.map

package/cjs/UNSAFE_MessageBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_MessageBanner.js","sources":["../../src/UNSAFE_MessageBanner/MessageBanner.tsx","../../src/UNSAFE_MessageBanner/index.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 { ComponentChildren, ComponentProps, VNode } from 'preact';\nimport { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'preact/hooks';\nimport {\n  FocusableComponentHandle,\n  useMessageFocusManager\n} from '../hooks/PRIVATE_useMessagesFocusManager';\nimport { getRenderer, Message, MessagesManager } from '../PRIVATE_Message';\nimport { Flex } from '../UNSAFE_Flex';\nimport { LiveRegion } from '../UNSAFE_LiveRegion';\nimport { Item, ItemMetadata } from '../utils/UNSAFE_dataProvider';\nimport { Handle } from '../utils/UNSAFE_typeUtils';\n\ntype MessageRef = Handle<typeof Message, 'messageRef'>;\n\n// TODO: Refactor Message Item types\n// https://jira.oraclecorp.com/jira/browse/JET-54215\n\n/**\n * An object representing a single message in MessageBanner component.\n */\nexport type MessageBannerItem = {\n  /**\n   * Defines whether or not to include the close icon for the message\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  severity?: 'none' | 'error' | 'warning' | 'confirmation' | 'info';\n\n  /**\n   * Defines the sound to be played when opening the message\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 timestamp for the message in ISO format\n   */\n  timestamp?: string;\n};\n\n/**\n * Structure of data item passed to the renderers\n */\nexport type MessageBannerRendererDataItem<K, D> = {\n  /**\n   * The data for the current message\n   */\n  data: D;\n\n  /**\n   * The zero-based index of the current message\n   */\n  index: number;\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\n/**\n * Props for the MessageBanner Component\n */\ntype Props<Key, Data> = {\n  /**\n   * Data for the MessageBanner component. This data is used for rendering each banner 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   * A Banner message can have a different look and feel. For example, when using page-level\n   * messaging the messages need to be rendered from edge to edge without any outline. On the other\n   * hand, when they are being used in a section of a page or a dialog, they need to be rendered\n   * with an outline. This attribute can be used to specify where the component is being used so that\n   * it will render the messages accordingly.\n   */\n  type?: 'page' | 'section';\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   * 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: MessageBannerRendererDataItem<Key, Data>) => ComponentChildren>;\n\n  /**\n   * A renderer that renders the close button in the message.\n   */\n  closeButtonRenderer?: (title: string, onAction: (event?: Event) => void) => VNode;\n\n  // Refactor types (cannot import from PRIVATE modules)\n  // https://jira.oraclecorp.com/jira/browse/JET-54215\n  /**\n   * Translations resources\n   */\n  translations?: {\n    /**\n     * Label for the message close button\n     */\n    close?: string;\n\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     * Text to guide keyboard users navigate to prior focussed element when the messages\n     * region gains focus\n     */\n    navigationFromMessagesRegion?: string;\n\n    /**\n     * Text to guide keyboard users navigate to new displayed messages when focus is outside\n     * the messages region\n     */\n    navigationToMessagesRegion?: string;\n  };\n};\n\n/**\n * Animation states for banner messages\n * TODO: Get this from theme context provider\n */\nconst animationStates: ComponentProps<typeof MessagesManager>['animationStates'] = {\n  entering: (node) => ({\n    to: {\n      maxHeight: `${node.scrollHeight}px`,\n      overflow: 'hidden'\n    },\n    options: {\n      duration: 250\n    },\n    end: {\n      maxHeight: 'none',\n      overflow: 'initial'\n    }\n  }),\n  exiting: (node) => ({\n    ...(node.style.maxHeight === 'none' && {\n      from: {\n        maxHeight: `${node.scrollHeight}px`,\n        overflow: 'hidden'\n      }\n    }),\n    to: {\n      maxHeight: 0,\n      overflow: 'hidden'\n    },\n    end: {\n      maxHeight: 0,\n      overflow: 'hidden'\n    },\n    options: {\n      duration: 250\n    }\n  })\n};\nconst initialAnimationStyles = {\n  maxHeight: 0,\n  overflow: 'hidden'\n} as const;\n\n/**\n * Renders individual messages based on the provided data\n */\nfunction MessageBanner<\n  K extends string | number = string | number,\n  D extends MessageBannerItem = MessageBannerItem\n>({\n  closeButtonRenderer,\n  detailRendererKey,\n  data,\n  onClose,\n  renderers,\n  translations,\n  type = 'section'\n}: Props<K, D>) {\n  // Keyboard Navigation and Focus Management\n  const messagesRef = useRef(new Map<K, MessageRef | 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  // 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  // We will be using a function based ref to store the refs in the Map\n  const setMessageRef = useCallback(\n    // TODO: use ramda.curry here (currently it is throwing ts error when used with generics)\n    (key: K) => {\n      return (ref: MessageRef | null) => messagesRef.current.set(key, ref);\n    },\n    []\n  );\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          const firstItemKey = data[0].key;\n          messagesRef.current.get(firstItemKey)?.focus();\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(focusHandleRef, {\n    onFocus: useCallback(() => {\n      setLiveRegionText(translations?.navigationFromMessagesRegion);\n    }, [setLiveRegionText, translations])\n  });\n\n  /**\n   * Emits onClose event for the provided message.\n   * @param item The message which the user tried to close\n   */\n  const handleClose = useCallback(\n    (item: Item<K, D>) => {\n      onClose?.(item);\n    },\n    [onClose]\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        // If the current message holds focus, then restore previous focus\n        if (isClosedMessageFocused) {\n          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  // Prioritize this component whenever the data changes and\n  // the new data has at least one message\n  useEffect(() => {\n    if (data.length) {\n      // set state to render content whenever the data is not empty\n      setShouldRender(true);\n      if (data.length > prevDataLengthRef.current) {\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?.navigationToMessagesRegion);\n      }\n      controller.prioritize();\n    } else {\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    }\n    prevDataLengthRef.current = data.length;\n  }, [controller, data, translations]);\n\n  // When both shouldRender flag is false and no data to render, do not render\n  // anything\n  if (!shouldRender && data.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      ref={containerDivRef}\n      class=\"oj-c-messagebanner\"\n      tabIndex={-1} // Need to add tabindex to make the container receive the focus events\n      {...handlers}>\n      <Flex direction=\"column\" gap={type === 'section' ? '1x' : undefined}>\n        <MessagesManager\n          animationStates={animationStates}\n          initialAnimationStyles={initialAnimationStyles}\n          data={data}\n          onMessageWillRemove={handleNextFocus}>\n          {({ index, item }) => (\n            <Message\n              messageRef={setMessageRef(item.key)}\n              item={item}\n              closeButtonRenderer={closeButtonRenderer}\n              detailRenderer={getRenderer(item, detailRendererKey, renderers)}\n              index={index}\n              key={item.key}\n              variant={type === 'page' ? 'pageBanner' : 'sectionBanner'}\n              onClose={handleClose}\n              translations={translations}\n            />\n          )}\n        </MessagesManager>\n        <LiveRegion>{liveRegionText}</LiveRegion>\n      </Flex>\n    </div>\n  );\n}\n\nexport { MessageBanner };\n","/**\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\nexport { MessageBanner } from './MessageBanner';\nexport type { MessageBannerItem, MessageBannerRendererDataItem } from './MessageBanner';\n"],"names":["useRef","useState","useCallback","useImperativeHandle","useMessageFocusManager","useEffect","_jsx","_jsxs","Flex","MessagesManager","Message","getRenderer","LiveRegion"],"mappings":"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"}

package/cjs/UNSAFE_MessageToast.js

@@ -0,0 +1,103 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MessageToast = require('./MessageToast-17ddb1b5.js');
+require('preact/jsx-runtime');
+require("identity-obj-proxy");
+require('preact/hooks');
+require('./UNSAFE_Environment.js');
+require('preact');
+require('./UNSAFE_Layer.js');
+require('preact/compat');
+require('./hooks/PRIVATE_useMessagesFocusManager.js');
+require('./hooks/UNSAFE_useBreakpointValues.js');
+require('./hooks/UNSAFE_useBreakpoints.js');
+require('./hooks/UNSAFE_useTranslationBundle.js');
+require('./PRIVATE_Message.js');
+require('./UNSAFE_Flex.js');
+require('./Flex-71c6255f.js');
+require('./tslib.es6-d7adde1f.js');
+require('./utils/UNSAFE_interpolations/dimensions.js');
+require('./utils/UNSAFE_arrayUtils.js');
+require('./utils/UNSAFE_size.js');
+require('./_curry1-72279dc6.js');
+require('./utils/UNSAFE_mergeInterpolations.js');
+require('./utils/UNSAFE_classNames.js');
+require('./classNames-825d80d7.js');
+require('./_curry3-31dd4145.js');
+require('./_curry2-f77dcc57.js');
+require('./_has-618da22b.js');
+require('./utils/UNSAFE_interpolations/boxalignment.js');
+require('./keys-4d35cf5a.js');
+require('./utils/UNSAFE_interpolations/flexbox.js');
+require('./flexbox-659a8cf1.js');
+require('./utils/UNSAFE_interpolations/flexitem.js');
+require('./flexitem-8d661117.js');
+require('./utils/PRIVATE_timer.js');
+require('./MessageCloseButton-f11fb2d5.js');
+require('./UNSAFE_Button.js');
+require('./Button-b68878ba.js');
+require('./UNSAFE_BaseButton.js');
+require('./BaseButton-82e1ea19.js');
+require('./hooks/UNSAFE_usePress.js');
+require('./hooks/UNSAFE_useHover.js');
+require('./hooks/UNSAFE_useToggle.js');
+require('./hooks/UNSAFE_useActive.js');
+require('./utils/PRIVATE_clientHints.js');
+require('./clientHints-78b0e917.js');
+require('./hooks/UNSAFE_useTabbableMode.js');
+require('./utils/UNSAFE_mergeProps.js');
+require('./index-ed6e3090.js');
+require('./index-5304d101.js');
+require('./UNSAFE_Icon.js');
+require('./Icon-a21be510.js');
+require('./hooks/UNSAFE_useTooltip.js');
+require('./hooks/UNSAFE_useId.js');
+require('./UNSAFE_Floating.js');
+require('./Floating-3eb600a1.js');
+require('./index-94b1ff28.js');
+require('./hooks/UNSAFE_useUser.js');
+require('./utils/PRIVATE_floatingUtils.js');
+require('./utils/PRIVATE_refUtils.js');
+require('./hooks/UNSAFE_useOutsideClick.js');
+require('./hooks/UNSAFE_useFocus.js');
+require('./hooks/UNSAFE_useTouch.js');
+require('./hooks/UNSAFE_useAnimation.js');
+require('./useAnimation-9e794d84.js');
+require('./hooks/UNSAFE_useTheme.js');
+require('./MessageDetail-bc89f255.js');
+require('./MessageFormattingUtils-afa602f0.js');
+require('./utils/UNSAFE_getLocale.js');
+require('./utils/UNSAFE_stringUtils.js');
+require('./stringUtils-d9b75b25.js');
+require('./Message.types-8369755d.js');
+require('./MessageStartIcon-aab13995.js');
+require('./MessageSummary-e3c976d2.js');
+require('./MessageTimestamp-5c34afd5.js');
+require('./MessageUtils-c41ab02b.js');
+require('./utils/UNSAFE_logger.js');
+require('./utils/UNSAFE_soundUtils.js');
+require('./MessagesManager-ae82966c.js');
+require('./PRIVATE_TransitionGroup.js');
+require('./hooks/UNSAFE_useMessagesContext.js');
+require('./PRIVATE_MessageLayer.js');
+require('./MessageLayer-731f812d.js');
+require('./UNSAFE_WindowOverlay.js');
+require('./UNSAFE_FocusTrap.js');
+require('./FocusTrap-242f0347.js');
+require('./utils/PRIVATE_tabbableUtils.js');
+require('./UNSAFE_LiveRegion.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
+ */
+
+exports.MessageToast = MessageToast.MessageToast;
+/*  */
+//# sourceMappingURL=UNSAFE_MessageToast.js.map

package/cjs/UNSAFE_MessageToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_MessageToast.js","sources":["../../src/UNSAFE_MessageToast/index.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 */\n\nexport { MessageToast } from './MessageToast';\nexport type { MessageToastItem } from './MessageToast';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;AAMG;;;;;;;"}