@oracle/oraclejet-preact 14.0.0

package/es/UNSAFE_MessageBanner.js

@@ -0,0 +1,235 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import { useRef, useState, useCallback, useImperativeHandle, useEffect } from 'preact/hooks';
+import { useMessageFocusManager } from './hooks/PRIVATE_useMessagesFocusManager.js';
+import { MessagesManager, Message, getRenderer } from './PRIVATE_Message.js';
+import { Flex } from './UNSAFE_Flex.js';
+import { LiveRegion } from './UNSAFE_LiveRegion.js';
+
+import './utils/PRIVATE_timer.js';
+import './utils/UNSAFE_classNames.js';
+import './UNSAFE_Button.js';
+import './UNSAFE_BaseButton.js';
+import './tslib.es6-8b94ba02.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/UNSAFE_interpolations/dimensions.js';
+import './utils/UNSAFE_arrayUtils.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/PRIVATE_clientHints.js';
+import './hooks/UNSAFE_useTabbableMode.js';
+import 'preact';
+import './utils/UNSAFE_mergeProps.js';
+import './UNSAFE_ThemedIcons.js';
+import './UNSAFE_Icons.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_useAnimation.js';
+import './hooks/UNSAFE_useTheme.js';
+import './utils/UNSAFE_getLocale.js';
+import './utils/UNSAFE_stringUtils.js';
+import './utils/UNSAFE_logger.js';
+import './utils/UNSAFE_soundUtils.js';
+import './PRIVATE_TransitionGroup.js';
+import './hooks/UNSAFE_useMessagesContext.js';
+import './utils/UNSAFE_interpolations/boxalignment.js';
+import './keys-fed67954.js';
+import './utils/UNSAFE_interpolations/flexbox.js';
+import './utils/UNSAFE_interpolations/flexitem.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 = useRef(new Map());
+    const containerDivRef = useRef(null);
+    const focusHandleRef = useRef(null);
+    const [liveRegionText, setLiveRegionText] = useState();
+    const [shouldRender, setShouldRender] = 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 = useRef(data.length);
+    const prevDataLengthRef = 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 = 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
+    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 } = useMessageFocusManager(focusHandleRef, {
+        onFocus: 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 = 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 = 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
+    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 (jsx("div", Object.assign({ ref: containerDivRef, class: "oj-c-messagebanner", tabIndex: -1 }, handlers, { children: jsxs(Flex, Object.assign({ direction: "column", gap: type === 'section' ? '1x' : undefined }, { children: [jsx(MessagesManager, Object.assign({ animationStates: animationStates, initialAnimationStyles: initialAnimationStyles, data: data, onMessageWillRemove: handleNextFocus }, { children: ({ index, item }) => (jsx(Message, { messageRef: setMessageRef(item.key), item: item, closeButtonRenderer: closeButtonRenderer, detailRenderer: getRenderer(item, detailRendererKey, renderers), index: index, variant: type === 'page' ? 'pageBanner' : 'sectionBanner', onClose: handleClose, translations: translations }, item.key)) })), jsx(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
+ */
+
+export { MessageBanner };
+/*  */
+//# sourceMappingURL=UNSAFE_MessageBanner.js.map

package/es/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":["_jsx","_jsxs"],"mappings":"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"}

package/es/UNSAFE_MessageToast.css

@@ -0,0 +1 @@
+.lyf4sh{height:fit-content;width:fit-content;}

package/es/UNSAFE_MessageToast.js

@@ -0,0 +1,375 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+import { jsx, jsxs } from 'preact/jsx-runtime';
+import "./UNSAFE_MessageToast.css";
+import { useRef, useState, useImperativeHandle, useCallback, useEffect, useMemo } from 'preact/hooks';
+import { EnvironmentProvider } from './UNSAFE_Environment.js';
+import { useMessageFocusManager } from './hooks/PRIVATE_useMessagesFocusManager.js';
+import { useBreakpointValues } from './hooks/UNSAFE_useBreakpointValues.js';
+import { useTranslationBundle } from './hooks/UNSAFE_useTranslationBundle.js';
+import { MessagesManager, Message, getRendererWithoutIndex } from './PRIVATE_Message.js';
+import { MessageLayer } from './PRIVATE_MessageLayer.js';
+import { Flex } from './UNSAFE_Flex.js';
+import { FocusTrap } from './UNSAFE_FocusTrap.js';
+import { LiveRegion } from './UNSAFE_LiveRegion.js';
+import { stringLiteralArray } from './utils/UNSAFE_arrayUtils.js';
+import { classNames } from './utils/UNSAFE_classNames.js';
+import 'preact';
+import './UNSAFE_Layer.js';
+import 'preact/compat';
+import './hooks/UNSAFE_useBreakpoints.js';
+import './utils/PRIVATE_timer.js';
+import './UNSAFE_Button.js';
+import './UNSAFE_BaseButton.js';
+import './tslib.es6-8b94ba02.js';
+import './hooks/UNSAFE_usePress.js';
+import './hooks/UNSAFE_useHover.js';
+import './hooks/UNSAFE_useToggle.js';
+import './hooks/UNSAFE_useActive.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/PRIVATE_clientHints.js';
+import './hooks/UNSAFE_useTabbableMode.js';
+import './utils/UNSAFE_mergeProps.js';
+import './UNSAFE_ThemedIcons.js';
+import './UNSAFE_Icons.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 './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_useAnimation.js';
+import './hooks/UNSAFE_useTheme.js';
+import './utils/UNSAFE_getLocale.js';
+import './utils/UNSAFE_stringUtils.js';
+import './utils/UNSAFE_logger.js';
+import './utils/UNSAFE_soundUtils.js';
+import './PRIVATE_TransitionGroup.js';
+import './hooks/UNSAFE_useMessagesContext.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_WindowOverlay.js';
+import './utils/PRIVATE_tabbableUtils.js';
+
+// https://jira.oraclecorp.com/jira/browse/JET-54212
+
+const positions = stringLiteralArray(['top', 'top-left', 'top-right', 'top-start', 'top-end', 'bottom', 'bottom-left', 'bottom-right', 'bottom-start', 'bottom-end']);
+const messageToastStyles = {
+  base: "lyf4sh"
+};
+/**
+ * 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
+}) {
+  var _a, _b, _c, _d;
+
+  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'); // 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: () => {
+      var _a; // 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 = (_a = messagesRef.current.get(data[0].key)) !== null && _a !== void 0 ? _a : null;
+        setShouldTrapFocus(true);
+        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
+  } = 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) => {
+    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);
+      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;
+      (_a = messagesRef.current.get(nextMessageKey)) === null || _a === void 0 ? void 0 : _a.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 : (_a = offset === null || offset === void 0 ? void 0 : offset.horizontal) !== null && _a !== void 0 ? _a : 0,
+      vertical: 16 + (typeof offset === 'number' ? offset : (_b = offset === null || offset === void 0 ? void 0 : offset.horizontal) !== null && _b !== void 0 ? _b : 0)
+    },
+    lg: {
+      horizontal: typeof offset === 'number' ? offset : (_c = offset === null || offset === void 0 ? void 0 : offset.horizontal) !== null && _c !== void 0 ? _c : 0,
+      vertical: 24 + (typeof offset === 'number' ? offset : (_d = offset === null || offset === void 0 ? void 0 : offset.horizontal) !== null && _d !== void 0 ? _d : 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 rootClasses = classNames([messageToastStyles.base, // by default the toast messages are dark, so add the required classes
+  'oj-c-colorscheme-dark', 'oj-color-invert']); // 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
+    });
+  }
+
+  return jsxs(EnvironmentProvider, Object.assign({
+    environment: {
+      colorScheme: 'dark'
+    }
+  }, {
+    children: [jsx(MessageLayer, Object.assign({
+      offset: paddedOffset,
+      position: position
+    }, {
+      children: jsx("div", Object.assign({
+        class: rootClasses,
+        ref: containerDivRef,
+        tabIndex: -1
+      }, handlers, {
+        children: jsx(FocusTrap, Object.assign({
+          autoFocusRef: autoFocusRef,
+          isDisabled: !shouldTrapFocus
+        }, {
+          children: jsx(Flex, Object.assign({
+            direction: "column",
+            gap: "1x",
+            align: "center",
+            maxWidth: maxWidth
+          }, {
+            children: jsx(MessagesManager, Object.assign({
+              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
+    })]
+  }));
+}
+
+/**
+ * @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 { MessageToast };
+/*  */
+//# sourceMappingURL=UNSAFE_MessageToast.js.map