@oracle/oraclejet-preact 15.0.1 → 15.0.2

package/cjs/MessageUtils-573a7312.js

@@ -0,0 +1,138 @@
+/* @oracle/oraclejet-preact: 15.0.2 */
+'use strict';
+
+var utils_UNSAFE_logger = require('./utils/UNSAFE_logger.js');
+var utils_UNSAFE_soundUtils = require('./utils/UNSAFE_soundUtils.js');
+var MessageFormattingUtils = require('./MessageFormattingUtils-211b1238.js');
+
+/**
+ * Logger that prepends the component name to the message
+ */
+const MessageLogger = {
+    error: (message, type = 'common') => utils_UNSAFE_logger.Logger.error(`JET Message(${type}): ${message}`),
+    warn: (message, type = 'common') => utils_UNSAFE_logger.Logger.warn(`JET Message(${type}): ${message}`),
+    info: (message, type = 'common') => utils_UNSAFE_logger.Logger.info(`JET Message(${type}): ${message}`),
+    log: (message, type = 'common') => utils_UNSAFE_logger.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 {
+            utils_UNSAFE_soundUtils.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 utils_UNSAFE_soundUtils.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 = { ...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 = MessageFormattingUtils.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(severity) {
+    const isValidSeverity = MessageFormattingUtils.isValidValueForProp(severity, 'severity');
+    return isValidSeverity && severity !== 'none';
+}
+
+exports.getRenderer = getRenderer;
+exports.getRendererWithoutIndex = getRendererWithoutIndex;
+exports.isSeverityIconNeeded = isSeverityIconNeeded;
+exports.playSound = playSound;
+exports.severityBasedStyleClass = severityBasedStyleClass;
+exports.throwError = throwError;
+//# sourceMappingURL=MessageUtils-573a7312.js.map

package/cjs/MessageUtils-573a7312.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageUtils-573a7312.js","sources":["../../src/PRIVATE_Message/MessageUtils.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 } from 'preact';\nimport { Item } from '../utils/UNSAFE_dataProvider';\nimport { Logger } from '../utils/UNSAFE_logger';\nimport { playAudioFromURL, playDefaultNotificationSound } from '../utils/UNSAFE_soundUtils';\nimport { isValidValueForProp } from './MessageFormattingUtils';\nimport { MessageSeverity, MessageVariant } from './Message.types';\n\n/**\n * Logger that prepends the component name to the message\n */\nconst MessageLogger = {\n  error: (message: string, type = 'common') => Logger.error(`JET Message(${type}): ${message}`),\n  warn: (message: string, type = 'common') => Logger.warn(`JET Message(${type}): ${message}`),\n  info: (message: string, type = 'common') => Logger.info(`JET Message(${type}): ${message}`),\n  log: (message: string, type = 'common') => Logger.log(`JET Message(${type}): ${message}`)\n};\n\n/**\n * Plays a sound based on the provided argument. Supported keywords:\n * 1. default - plays the default beep sound\n * 2. none - no sound will be played\n *\n * @param sound Supported keywords or URL to an audio file\n */\nasync function playSound(sound: string) {\n  if (sound === 'none') {\n    // no need to play any audio\n    return;\n  }\n\n  // For default, we play a beep sound using WebAudio API\n  if (sound === 'default') {\n    try {\n      playDefaultNotificationSound();\n    } catch (error) {\n      // Default sound is not played due to some error\n      // Log a message and return doing nothing else\n      MessageLogger.warn(`Failed to play the default sound. ${error}.`);\n    }\n    return;\n  }\n\n  // If it is not a key word, then it is an URL\n  try {\n    await playAudioFromURL(sound);\n  } catch (error) {\n    // Playing audio using the URL failed.\n    MessageLogger.warn(`Failed to play the audio from the url ${sound}. ${error}.`);\n  }\n}\n\n/**\n * A helper function that throws an error\n *\n * @param message The error message\n * @param type The type of the message that is throwing an error\n * @throws {Error}\n */\nfunction throwError(message: string, type = 'common') {\n  throw new Error(`JET Message(${type}) - ${message}`);\n}\n\n/**\n * Fetches a renderer for the current message if one is provided\n *\n * @param message The item context for the current message\n * @param rendererIdentifier Identifier of the current renderer\n * @param renderers All available renderers\n * @returns The renderer for rendering the custom content\n */\nfunction getRenderer<K, D, R>(\n  message: Item<K, D>,\n  rendererIdentifier?: string | ((item: Item<K, D>) => string | undefined),\n  renderers?: Record<string, (data: R) => ComponentChildren>,\n  type?: string\n) {\n  // If either detailRenderer function or record of renderers are not available,\n  // return null\n  if (!rendererIdentifier || !renderers) {\n    return undefined;\n  }\n\n  const rendererKey =\n    typeof rendererIdentifier === 'function' ? rendererIdentifier(message) : rendererIdentifier;\n\n  // If rendererKey is null or undefined, then we need to use default rendering\n  // so return null\n  if (rendererKey == null) {\n    return undefined;\n  }\n\n  // If the returned render key is a string but does not exist in the provided\n  // record of renderers, throw an error\n  if (!(rendererKey in renderers)) {\n    throwError(\n      `${rendererKey} is not a valid template name for the message with key=${message.key}`,\n      type\n    );\n  }\n\n  // Else, fetch and return the renderer\n  return renderers[rendererKey];\n}\n\n/**\n * Fetches a renderer for the current message if one is provided.\n * Proxies the said renderer to exclude the index in the payload.\n *\n * @param message The item context for the current message\n * @param rendererIdentifier Identifier of the current renderer\n * @param renderers All available renderers\n * @returns The renderer for rendering the custom content\n */\nfunction getRendererWithoutIndex<K, D, R extends object>(\n  message: Item<K, D>,\n  rendererIdentifier?: string | ((item: Item<K, D>) => string | undefined),\n  renderers?: Record<string, (data: R) => ComponentChildren>,\n  type?: string\n) {\n  const renderer = getRenderer(message, rendererIdentifier, renderers, type);\n  if (typeof renderer === 'function') {\n    return (data: R) => {\n      const dataCopy = { ...data };\n      if ('index' in dataCopy) {\n        delete (dataCopy as any)['index'];\n      }\n      return renderer.call(null, dataCopy);\n    };\n  }\n  return renderer;\n}\n\n/**\n * Generates a root style class based on the severity. For invalid severity and severity=none\n * no specific style class exists.\n *\n * @param severity The message severity\n * @returns calculated style class based on the severity\n */\nfunction severityBasedStyleClass(severity: MessageSeverity, variant: MessageVariant) {\n  const isValidSeverity = isValidValueForProp(severity, 'severity');\n  return isValidSeverity && severity !== 'none' ? `oj-c-message${variant}-${severity}` : '';\n}\n\n/**\n * Determines if a severity icon is needed based on the component severity\n *\n * @param severity The component severity\n * @returns Whether or not to render the severity icon\n */\nfunction isSeverityIconNeeded(\n  severity: MessageSeverity\n): severity is Exclude<MessageSeverity, 'none'> {\n  const isValidSeverity = isValidValueForProp(severity, 'severity');\n  return isValidSeverity && severity !== 'none';\n}\n\nexport {\n  getRenderer,\n  getRendererWithoutIndex,\n  playSound,\n  throwError,\n  severityBasedStyleClass,\n  isSeverityIconNeeded\n};\n"],"names":["Logger","playDefaultNotificationSound","playAudioFromURL","isValidValueForProp"],"mappings":"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"}

package/cjs/MessagesManager-7ed100c9.js

@@ -0,0 +1,111 @@
+/* @oracle/oraclejet-preact: 15.0.2 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var preact = require('preact');
+var hooks = require('preact/hooks');
+var PRIVATE_TransitionGroup = require('./PRIVATE_TransitionGroup.js');
+require('./hooks/UNSAFE_useAnimation.js');
+var hooks_UNSAFE_useMessagesContext = require('./hooks/UNSAFE_useMessagesContext.js');
+var useAnimation = require('./useAnimation-01b5a114.js');
+
+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({ animationStates = DEFAULT_ANIMATION_STATES, initialAnimationStyles, onEntering, onExiting, ...transitionProps }) {
+    const [state, setState] = hooks.useState('entering');
+    const animationCallbackRef = hooks.useRef();
+    const busyStateResolveRef = hooks.useRef();
+    const { controller, nodeRef } = useAnimation.useAnimation(state, {
+        animationStates,
+        isAnimatedOnMount: true,
+        onAnimationEnd: hooks.useCallback(() => {
+            // resolve animation callbacks & busyStates
+            animationCallbackRef.current?.();
+            animationCallbackRef.current = undefined;
+            busyStateResolveRef.current?.();
+            busyStateResolveRef.current = undefined;
+        }, [])
+    });
+    const { addBusyState } = hooks_UNSAFE_useMessagesContext.useMessagesContext();
+    const onEnteringCallback = hooks.useCallback((node, callback, metadata) => {
+        // cancel any existing animation
+        if (animationCallbackRef.current) {
+            animationCallbackRef.current = undefined;
+            controller.cancel();
+        }
+        // resolve any existing busyState
+        busyStateResolveRef.current?.();
+        busyStateResolveRef.current = undefined;
+        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?.();
+            return;
+        }
+        animationCallbackRef.current = callback;
+        busyStateResolveRef.current = addBusyState?.('messages animating');
+    }, [animationStates, controller, addBusyState, onEntering]);
+    const onExitingCallback = hooks.useCallback((node, callback, metadata) => {
+        // cancel any existing animation
+        if (animationCallbackRef.current) {
+            animationCallbackRef.current = undefined;
+            controller.cancel();
+        }
+        // resolve any existing busyState
+        busyStateResolveRef.current?.();
+        busyStateResolveRef.current = undefined;
+        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?.();
+            return;
+        }
+        animationCallbackRef.current = callback;
+        busyStateResolveRef.current = addBusyState?.('messages animating');
+    }, [animationStates, controller, addBusyState, onExiting]);
+    // if animation is interrupted, the busyState may be left hanging. So clear that on unmount
+    // Note: When using a class-based component inside a functional component, the timings of
+    // componentDidMount and useEffect might differ. So, in order to guarantee the registration
+    // of the cleanup function, use useLayoutEffect instead of useEffect. This way we can make sure
+    // the cleanup registers at all times.
+    hooks.useLayoutEffect(() => () => busyStateResolveRef.current?.(), []);
+    return (jsxRuntime.jsx("div", { ref: nodeRef, style: initialAnimationStyles, children: jsxRuntime.jsx(PRIVATE_TransitionGroup.Transition, { ...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 = hooks.useCallback(async (node, metadata) => {
+        metadata && onMessageWillRemove?.(metadata.key, metadata.index, node);
+    }, [onMessageWillRemove]);
+    return (jsxRuntime.jsx(PRIVATE_TransitionGroup.TransitionGroup, { elementType: preact.Fragment, children: data.map((item, index) => (jsxRuntime.jsx(MessageTransition, { animationStates: animationStates, initialAnimationStyles: initialAnimationStyles, metadata: { index, key: item.key }, onExited: handleExited, children: children?.({ index, item }) }, item.key))) }));
+}
+
+exports.MessagesManager = MessagesManager;
+//# sourceMappingURL=MessagesManager-7ed100c9.js.map

package/cjs/MessagesManager-7ed100c9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessagesManager-7ed100c9.js","sources":["../../src/PRIVATE_Message/MessageTransition.tsx","../../src/PRIVATE_Message/MessagesManager.tsx"],"sourcesContent":["import { JSX, RenderableProps } from 'preact';\nimport { useCallback, useLayoutEffect, useRef, useState } from 'preact/hooks';\nimport { useAnimation, UseAnimationConfig } from '../hooks/UNSAFE_useAnimation';\nimport { useMessagesContext } from '../hooks/UNSAFE_useMessagesContext';\nimport { Transition, TransitionProps } from '../PRIVATE_TransitionGroup';\n\ntype State = 'entering' | 'exiting';\ntype AnimationStates = UseAnimationConfig<State, HTMLDivElement>['animationStates'];\ntype AnimationCallback = UseAnimationConfig<State, HTMLDivElement>['onAnimationEnd'];\ntype Props = RenderableProps<TransitionProps> & {\n  animationStates?: AnimationStates;\n  initialAnimationStyles?: JSX.HTMLAttributes<HTMLDivElement>['style'];\n};\n\nconst DEFAULT_ANIMATION_STATES = {};\n\n/**\n * A intermediary component that handles animation for the messages component.\n *\n * The expected flow is as follows:\n * 1. message removed from the data\n * 2. onExiting called and a callback is passed which needs to be called to complete the transition\n * 3. state set to \"exiting\" in this component\n * 4. triggers useAnimation to perform the exit animation\n * 5. onAnimationEnd is called after the animation, which invokes the callback provided earlier\n * 6. onExited is called (done when the callback mentioned above is called)\n * 7. message is removed from the UI\n *\n * @param param0 Props of the message component\n */\nexport function MessageTransition({\n  animationStates = DEFAULT_ANIMATION_STATES,\n  initialAnimationStyles,\n  onEntering,\n  onExiting,\n  ...transitionProps\n}: Props) {\n  const [state, setState] = useState<State>('entering');\n  const animationCallbackRef = useRef<() => void>();\n  const busyStateResolveRef = useRef<() => void>();\n  const { controller, nodeRef } = useAnimation(state, {\n    animationStates,\n    isAnimatedOnMount: true,\n    onAnimationEnd: useCallback<NonNullable<AnimationCallback>>(() => {\n      // resolve animation callbacks & busyStates\n      animationCallbackRef.current?.();\n      animationCallbackRef.current = undefined;\n      busyStateResolveRef.current?.();\n      busyStateResolveRef.current = undefined;\n    }, [])\n  });\n  const { addBusyState } = useMessagesContext();\n\n  const onEnteringCallback = useCallback<NonNullable<TransitionProps['onEntering']>>(\n    (node, callback, metadata) => {\n      // cancel any existing animation\n      if (animationCallbackRef.current) {\n        animationCallbackRef.current = undefined;\n        controller.cancel();\n      }\n\n      // resolve any existing busyState\n      busyStateResolveRef.current?.();\n      busyStateResolveRef.current = undefined;\n\n      onEntering?.(node, undefined, metadata);\n      // start the animation and set the callback & busyState\n      setState('entering');\n\n      // if there is no animation configured, resolve immediately\n      if (\n        animationStates['entering'] === undefined &&\n        animationStates['exiting => entering'] === undefined\n      ) {\n        callback?.();\n        return;\n      }\n      animationCallbackRef.current = callback;\n      busyStateResolveRef.current = addBusyState?.('messages animating');\n    },\n    [animationStates, controller, addBusyState, onEntering]\n  );\n\n  const onExitingCallback = useCallback<NonNullable<TransitionProps['onExiting']>>(\n    (node, callback, metadata) => {\n      // cancel any existing animation\n      if (animationCallbackRef.current) {\n        animationCallbackRef.current = undefined;\n        controller.cancel();\n      }\n\n      // resolve any existing busyState\n      busyStateResolveRef.current?.();\n      busyStateResolveRef.current = undefined;\n\n      onExiting?.(node, undefined, metadata);\n      // start the animation and set the callback & busyState\n      setState('exiting');\n\n      // if there is no animation configured, resolve immediately\n      if (\n        animationStates['exiting'] === undefined &&\n        animationStates['entering => exiting'] === undefined\n      ) {\n        callback?.();\n        return;\n      }\n      animationCallbackRef.current = callback;\n      busyStateResolveRef.current = addBusyState?.('messages animating');\n    },\n    [animationStates, controller, addBusyState, onExiting]\n  );\n\n  // if animation is interrupted, the busyState may be left hanging. So clear that on unmount\n  // Note: When using a class-based component inside a functional component, the timings of\n  // componentDidMount and useEffect might differ. So, in order to guarantee the registration\n  // of the cleanup function, use useLayoutEffect instead of useEffect. This way we can make sure\n  // the cleanup registers at all times.\n  useLayoutEffect(() => () => busyStateResolveRef.current?.(), []);\n\n  return (\n    <div ref={nodeRef} style={initialAnimationStyles}>\n      <Transition\n        {...transitionProps}\n        onEntering={onEnteringCallback}\n        onExiting={onExitingCallback}\n      />\n    </div>\n  );\n}\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 */\nimport { ComponentChild, ComponentProps, Fragment } from 'preact';\nimport { useCallback } from 'preact/hooks';\nimport { TransitionGroup } from '../PRIVATE_TransitionGroup';\nimport { Item } from '../utils/UNSAFE_dataProvider';\nimport { MessageTransition } from './MessageTransition';\n\n/**\n * Metadata passed on to the Transition component\n */\ntype TransitionMetadata<K> = {\n  index: number;\n  key: K;\n};\n\n/**\n * Type of the render context passed on to render individual message\n */\ntype MessageRenderContext<Key, Data> = {\n  /**\n   * The index of the current message\n   */\n  index: number;\n\n  /**\n   * The message item with all the necessary data in it\n   */\n  item: Item<Key, Data>;\n};\n\ntype PickedPropsFromMessageTransition = Pick<\n  ComponentProps<typeof MessageTransition>,\n  'animationStates' | 'initialAnimationStyles'\n>;\n\n/**\n * Props for the Message Component\n */\ntype Props<Key, Data> = PickedPropsFromMessageTransition & {\n  /**\n   * A render function that renders individual child.\n   */\n  children?: (context: MessageRenderContext<Key, Data>) => ComponentChild;\n\n  /**\n   * Data for the messages. This data is used for rendering each message.\n   */\n  data: Item<Key, Data>[];\n\n  /**\n   * A callback function that gets called before a message is removed\n   */\n  onMessageWillRemove?: (key: Key, index: number, node?: Element) => void;\n};\n\n/**\n * The component that renders individual messages for the provided data.\n */\nexport function MessagesManager<K extends string | number = string | number, D = any>({\n  data,\n  animationStates,\n  children,\n  initialAnimationStyles,\n  onMessageWillRemove\n}: Props<K, D>) {\n  /**\n   * Handles when a message has finished to exit.\n   *\n   * @param node The corresponding message element\n   * @param callback A callback function to be called after the animation is complete\n   */\n  const handleExited = useCallback(\n    async (node?: Element, metadata?: TransitionMetadata<K>) => {\n      metadata && onMessageWillRemove?.(metadata.key, metadata.index, node);\n    },\n    [onMessageWillRemove]\n  );\n\n  return (\n    <TransitionGroup elementType={Fragment}>\n      {data.map((item, index) => (\n        <MessageTransition\n          animationStates={animationStates}\n          initialAnimationStyles={initialAnimationStyles}\n          key={item.key}\n          metadata={{ index, key: item.key }}\n          onExited={handleExited}>\n          {children?.({ index, item })}\n        </MessageTransition>\n      ))}\n    </TransitionGroup>\n  );\n}\n"],"names":["useState","useRef","useAnimation","useCallback","useMessagesContext","useLayoutEffect","_jsx","Transition","TransitionGroup","Fragment"],"mappings":"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"}

package/cjs/MeterCircleVariants.styles.css

@@ -1,18 +1,18 @@
-.MeterCircleVariants_multiVariantStyles_size_sm__1k0drkm0 {
+.MeterCircleVariants_multiVariantStyles_size_sm__id92ht0 {
   --size__1qest1m0: var(--sizes-sm__1qest1m4);
 }
-.MeterCircleVariants_multiVariantStyles_size_md__1k0drkm1 {
+.MeterCircleVariants_multiVariantStyles_size_md__id92ht1 {
   --size__1qest1m0: var(--sizes-md__1qest1m3);
 }
-.MeterCircleVariants_multiVariantStyles_size_lg__1k0drkm2 {
+.MeterCircleVariants_multiVariantStyles_size_lg__id92ht2 {
   --size__1qest1m0: var(--sizes-lg__1qest1m2);
 }
-.MeterCircleVariants_multiVariantStyles_trackSize_sm__1k0drkm3 {
+.MeterCircleVariants_multiVariantStyles_trackSize_sm__id92ht3 {
   --trackSize__1qest1m1: var(--trackSizes-sm__1qest1m7);
 }
-.MeterCircleVariants_multiVariantStyles_trackSize_md__1k0drkm4 {
+.MeterCircleVariants_multiVariantStyles_trackSize_md__id92ht4 {
   --trackSize__1qest1m1: var(--trackSizes-md__1qest1m6);
 }
-.MeterCircleVariants_multiVariantStyles_trackSize_lg__1k0drkm5 {
+.MeterCircleVariants_multiVariantStyles_trackSize_lg__id92ht5 {
   --trackSize__1qest1m1: var(--trackSizes-lg__1qest1m5);
 }

package/cjs/MeterCircleVariants.styles2.css

@@ -1,18 +1,18 @@
-.MeterCircleVariants_multiVariantStyles_size_sm__id92ht0 {
+.MeterCircleVariants_multiVariantStyles_size_sm__1k0drkm0 {
   --size__1qest1m0: var(--sizes-sm__1qest1m4);
 }
-.MeterCircleVariants_multiVariantStyles_size_md__id92ht1 {
+.MeterCircleVariants_multiVariantStyles_size_md__1k0drkm1 {
   --size__1qest1m0: var(--sizes-md__1qest1m3);
 }
-.MeterCircleVariants_multiVariantStyles_size_lg__id92ht2 {
+.MeterCircleVariants_multiVariantStyles_size_lg__1k0drkm2 {
   --size__1qest1m0: var(--sizes-lg__1qest1m2);
 }
-.MeterCircleVariants_multiVariantStyles_trackSize_sm__id92ht3 {
+.MeterCircleVariants_multiVariantStyles_trackSize_sm__1k0drkm3 {
   --trackSize__1qest1m1: var(--trackSizes-sm__1qest1m7);
 }
-.MeterCircleVariants_multiVariantStyles_trackSize_md__id92ht4 {
+.MeterCircleVariants_multiVariantStyles_trackSize_md__1k0drkm4 {
   --trackSize__1qest1m1: var(--trackSizes-md__1qest1m6);
 }
-.MeterCircleVariants_multiVariantStyles_trackSize_lg__id92ht5 {
+.MeterCircleVariants_multiVariantStyles_trackSize_lg__1k0drkm5 {
   --trackSize__1qest1m1: var(--trackSizes-lg__1qest1m5);
 }

package/cjs/Modal-5ec60987.js

@@ -0,0 +1,217 @@
+/* @oracle/oraclejet-preact: 15.0.2 */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var compat = require('preact/compat');
+var useModal = require('./useModal-a2b39bc8.js');
+var UNSAFE_Layer = require('./UNSAFE_Layer.js');
+var UNSAFE_Modal_themes_ModalStyles_css = require('./UNSAFE_Modal/themes/ModalStyles.css.js');
+
+const ModalBackdrop = compat.forwardRef(({ variant = 'scrim' }, ref) => {
+    const variantClasses = UNSAFE_Modal_themes_ModalStyles_css.multiVariantStyles({
+        backdrop: variant === 'transparent' ? 'transparent' : 'scrim'
+    });
+    return jsxRuntime.jsx("div", { ref: ref, class: variantClasses });
+});
+
+/**
+ * Returns an array of element's siblings.
+ *
+ * @param elem
+ * @returns
+ */
+function getSiblings(elem) {
+    const siblings = [];
+    let sibling = elem.previousSibling;
+    while (sibling != null) {
+        if (sibling.nodeType === 1) {
+            siblings.push(sibling);
+        }
+        sibling = sibling.previousSibling;
+    }
+    sibling = elem.nextSibling;
+    while (sibling != null) {
+        if (sibling.nodeType === 1) {
+            siblings.push(sibling);
+        }
+        sibling = sibling.nextSibling;
+    }
+    return siblings;
+}
+/**
+ * Sets aria-hidden=true on Modal ancestors and siblings.
+ *
+ * @param modal
+ * @returns An array of modified elements.
+ */
+function setAriaHiddenOnBackgroundElements(modal) {
+    if (!modal.modalRef) {
+        return [];
+    }
+    const ariaHiddenElements = [];
+    let node = modal.modalRef.parentElement;
+    do {
+        if (!node) {
+            break;
+        }
+        const siblings = getSiblings(node);
+        siblings.forEach((elem) => {
+            if (elem.tagName.toLowerCase() !== 'script' && elem.getAttribute('aria-hidden') !== 'true') {
+                ariaHiddenElements.push(elem);
+                elem.setAttribute('aria-hidden', 'true');
+            }
+        });
+        node = node.parentElement;
+    } while (node && node.tagName.toLowerCase() !== 'body');
+    return ariaHiddenElements;
+}
+/**
+ * Resets the aria-hidden state on previously aria-hidden elements.
+ *
+ * @param elements
+ */
+function resetAriaHiddenOnBackgroundElements(elements) {
+    elements.forEach((elem) => {
+        elem.removeAttribute('aria-hidden');
+    });
+}
+class ModalManager {
+    constructor() {
+        this.modals = [];
+        this.styleBackup = [];
+    }
+    /**
+     * Registers a modal with ModalManager
+     *
+     * @param modal
+     * @returns
+     */
+    push(modal) {
+        const modalIndex = this._findModalIndex(modal);
+        if (modalIndex !== -1) {
+            // Do not try to register the same modal multiple times
+            return;
+        }
+        this.modals.push({
+            modal: modal,
+            ariaHiddenChildren: setAriaHiddenOnBackgroundElements(modal)
+        });
+        // if this is the first modal in the container, block container scrolling
+        if (this.modals.length === 1) {
+            const ownerDocument = this._getOwnerDocument(modal.modalRef);
+            const scrollContainer = ownerDocument.body;
+            const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+            if (scrollBarWidth > 1) {
+                // in RTL, scrollbar is on the left
+                const scrollBarLeft = Math.round(document.documentElement.getBoundingClientRect().left) +
+                    document.documentElement.scrollLeft;
+                if (scrollBarLeft) {
+                    this.styleBackup.push({
+                        property: 'padding-left',
+                        value: scrollContainer.style.paddingLeft
+                    });
+                    scrollContainer.style.paddingLeft = `${scrollBarWidth}px`;
+                }
+                else {
+                    this.styleBackup.push({
+                        property: 'padding-right',
+                        value: scrollContainer.style.paddingRight
+                    });
+                    scrollContainer.style.paddingRight = `${scrollBarWidth}px`;
+                }
+            }
+            this.styleBackup.push({ property: 'overflow', value: scrollContainer.style.overflow });
+            this.styleBackup.push({ property: 'overflow-x', value: scrollContainer.style.overflowX });
+            this.styleBackup.push({ property: 'overflow-y', value: scrollContainer.style.overflowY });
+            scrollContainer.style.overflow = 'hidden';
+        }
+    }
+    /**
+     * Unegisters a modal from ModalManager
+     *
+     * @param modal
+     * @returns
+     */
+    pop(modal) {
+        const modalIndex = this._findModalIndex(modal);
+        if (modalIndex === -1) {
+            // modal to be removed not found!'
+            return;
+        }
+        if (modalIndex !== this.modals.length - 1) {
+            // trying to remove modal out of order!
+            return;
+        }
+        const modalDescriptor = this.modals.pop();
+        if (modalDescriptor) {
+            resetAriaHiddenOnBackgroundElements(modalDescriptor?.ariaHiddenChildren);
+        }
+        // if this was the last modal in the container, restore its overflow props
+        if (this.modals.length === 0) {
+            const ownerDocument = this._getOwnerDocument(modal.modalRef);
+            const scrollContainer = ownerDocument.body;
+            this.styleBackup.forEach(({ property, value }) => {
+                scrollContainer.style.setProperty(property, value);
+            });
+        }
+    }
+    isTopModal(modal) {
+        return this.modals.length > 0 && this.modals[this.modals.length - 1] === modal;
+    }
+    _findModalIndex(modal) {
+        let index = -1;
+        this.modals.forEach((elem, idx) => {
+            if (elem.modal === modal) {
+                index = idx;
+                return;
+            }
+        });
+        return index;
+    }
+    _getOwnerDocument(node) {
+        return (node && node.ownerDocument) || document;
+    }
+}
+
+// Global ModalManager singleton instance
+const globalModalManager = new ModalManager();
+/**
+ * Modal is a low-level component that provides the 'modality' feature with built-in overlay (scrim).
+ * It is typically used for building higher-level components (such as 'Dialog' or 'Popup') that need
+ * to support modal behavior preventing interaction with the rest of the page while the modal is open.
+ */
+const Modal = ({ children, isOpen, onBackdropClick, backdropVariant }) => {
+    // get the global ModalContext instance
+    const modalManager = globalModalManager;
+    const { backdropRef } = useModal.useModal({ isOpen, onBackdropClick });
+    // main modal element ref
+    const modalRef = compat.useRef(null);
+    // modal ref cache, required to lookup the item in modal manger when the actual ref is unmounted
+    const modal = compat.useRef({});
+    // populates and returns the modal ref cache
+    const getModal = () => {
+        modal.current.modalRef = modalRef.current;
+        return modal.current;
+    };
+    compat.useEffect(() => {
+        if (isOpen && modalRef.current) {
+            modalManager?.push(getModal());
+        }
+        else {
+            if (modal.current.modalRef) {
+                modalManager?.pop(getModal());
+            }
+        }
+    }, [isOpen, modalRef.current]);
+    compat.useEffect(() => {
+        return () => {
+            if (modal.current.modalRef) {
+                modalManager?.pop(getModal());
+            }
+        };
+    }, []);
+    return isOpen ? (jsxRuntime.jsx(UNSAFE_Layer.Layer, { children: jsxRuntime.jsxs("div", { ref: modalRef, class: UNSAFE_Modal_themes_ModalStyles_css.baseStyle, children: [jsxRuntime.jsx(ModalBackdrop, { ref: backdropRef, variant: backdropVariant }), children] }) })) : null;
+};
+
+exports.Modal = Modal;
+//# sourceMappingURL=Modal-5ec60987.js.map

package/cjs/Modal-5ec60987.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal-5ec60987.js","sources":["../../src/UNSAFE_Modal/ModalBackdrop.tsx","../../src/UNSAFE_Modal/ModalManager.ts","../../src/UNSAFE_Modal/Modal.tsx"],"sourcesContent":["import { forwardRef, ForwardedRef } from 'preact/compat';\nimport { multiVariantStyles } from './themes/ModalStyles.css';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLDivElement>, 'children'>;\n\ntype Props = IntrinsicProps & {\n  /**\n   * Specifies the backdrop is visible or transparent. Default is 'scrim' (visible).\n   */\n  variant?: 'scrim' | 'transparent';\n};\n\nconst ModalBackdrop = forwardRef<HTMLDivElement, Props>(\n  ({ variant = 'scrim' }, ref: ForwardedRef<HTMLDivElement | null>) => {\n    const variantClasses = multiVariantStyles({\n      backdrop: variant === 'transparent' ? 'transparent' : 'scrim'\n    });\n\n    return <div ref={ref} class={variantClasses} />;\n  }\n);\n\nexport default ModalBackdrop;\n","interface Modal {\n  modalRef?: HTMLDivElement | null;\n}\n\n/**\n * CSS property backup type.\n */\ntype StyleBackup = Array<{\n  property: string;\n  value: string;\n}>;\n\n/**\n * ModalDescriptor. Associates an open Modal with overlayed aria-hidden children.\n */\ntype ModalDescriptor = {\n  modal: Modal;\n  ariaHiddenChildren: Element[];\n};\n\n/**\n * Returns an array of element's siblings.\n *\n * @param elem\n * @returns\n */\nfunction getSiblings(elem: Element): Element[] {\n  const siblings: Element[] = [];\n  let sibling = elem.previousSibling;\n  while (sibling != null) {\n    if (sibling.nodeType === 1) {\n      siblings.push(sibling as Element);\n    }\n    sibling = sibling.previousSibling;\n  }\n  sibling = elem.nextSibling;\n  while (sibling != null) {\n    if (sibling.nodeType === 1) {\n      siblings.push(sibling as Element);\n    }\n    sibling = sibling.nextSibling;\n  }\n  return siblings;\n}\n\n/**\n * Sets aria-hidden=true on Modal ancestors and siblings.\n *\n * @param modal\n * @returns An array of modified elements.\n */\nfunction setAriaHiddenOnBackgroundElements(modal: Modal) {\n  if (!modal.modalRef) {\n    return [];\n  }\n  const ariaHiddenElements: Element[] = [];\n  let node: Element | null = modal.modalRef.parentElement as Element;\n\n  do {\n    if (!node) {\n      break;\n    }\n    const siblings = getSiblings(node);\n    siblings.forEach((elem: Element) => {\n      if (elem.tagName.toLowerCase() !== 'script' && elem.getAttribute('aria-hidden') !== 'true') {\n        ariaHiddenElements.push(elem);\n        elem.setAttribute('aria-hidden', 'true');\n      }\n    });\n    node = node.parentElement;\n  } while (node && node.tagName.toLowerCase() !== 'body');\n\n  return ariaHiddenElements;\n}\n\n/**\n * Resets the aria-hidden state on previously aria-hidden elements.\n *\n * @param elements\n */\nfunction resetAriaHiddenOnBackgroundElements(elements: Element[]) {\n  elements.forEach((elem) => {\n    elem.removeAttribute('aria-hidden');\n  });\n}\n\nexport default class ModalManager {\n  /**\n   * Array of ModalDescriptors managed by ModalManager\n   */\n  private modals: ModalDescriptor[];\n  /**\n   * Backup of the main container's (body) CSS props potentially altered by Modal.\n   */\n  private styleBackup: StyleBackup;\n\n  constructor() {\n    this.modals = [];\n    this.styleBackup = [];\n  }\n\n  /**\n   * Registers a modal with ModalManager\n   *\n   * @param modal\n   * @returns\n   */\n  push(modal: Modal) {\n    const modalIndex = this._findModalIndex(modal);\n\n    if (modalIndex !== -1) {\n      // Do not try to register the same modal multiple times\n      return;\n    }\n\n    this.modals.push({\n      modal: modal,\n      ariaHiddenChildren: setAriaHiddenOnBackgroundElements(modal)\n    });\n\n    // if this is the first modal in the container, block container scrolling\n    if (this.modals.length === 1) {\n      const ownerDocument = this._getOwnerDocument(modal.modalRef);\n      const scrollContainer = ownerDocument.body;\n\n      const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;\n      if (scrollBarWidth > 1) {\n        // in RTL, scrollbar is on the left\n        const scrollBarLeft =\n          Math.round(document.documentElement.getBoundingClientRect().left) +\n          document.documentElement.scrollLeft;\n\n        if (scrollBarLeft) {\n          this.styleBackup.push({\n            property: 'padding-left',\n            value: scrollContainer.style.paddingLeft\n          });\n          scrollContainer.style.paddingLeft = `${scrollBarWidth}px`;\n        } else {\n          this.styleBackup.push({\n            property: 'padding-right',\n            value: scrollContainer.style.paddingRight\n          });\n          scrollContainer.style.paddingRight = `${scrollBarWidth}px`;\n        }\n      }\n\n      this.styleBackup.push({ property: 'overflow', value: scrollContainer.style.overflow });\n      this.styleBackup.push({ property: 'overflow-x', value: scrollContainer.style.overflowX });\n      this.styleBackup.push({ property: 'overflow-y', value: scrollContainer.style.overflowY });\n\n      scrollContainer.style.overflow = 'hidden';\n    }\n  }\n\n  /**\n   * Unegisters a modal from ModalManager\n   *\n   * @param modal\n   * @returns\n   */\n  pop(modal: Modal) {\n    const modalIndex = this._findModalIndex(modal);\n\n    if (modalIndex === -1) {\n      // modal to be removed not found!'\n      return;\n    }\n\n    if (modalIndex !== this.modals.length - 1) {\n      // trying to remove modal out of order!\n      return;\n    }\n\n    const modalDescriptor = this.modals.pop();\n\n    if (modalDescriptor) {\n      resetAriaHiddenOnBackgroundElements(modalDescriptor?.ariaHiddenChildren);\n    }\n\n    // if this was the last modal in the container, restore its overflow props\n    if (this.modals.length === 0) {\n      const ownerDocument = this._getOwnerDocument(modal.modalRef);\n      const scrollContainer = ownerDocument.body;\n\n      this.styleBackup.forEach(({ property, value }) => {\n        scrollContainer.style.setProperty(property, value);\n      });\n    }\n  }\n\n  isTopModal(modal: Modal): boolean {\n    return this.modals.length > 0 && this.modals[this.modals.length - 1] === modal;\n  }\n\n  private _findModalIndex(modal: Modal): number {\n    let index = -1;\n    this.modals.forEach((elem, idx) => {\n      if (elem.modal === modal) {\n        index = idx;\n        return;\n      }\n    });\n    return index;\n  }\n\n  private _getOwnerDocument(node: Node | null | undefined): Document {\n    return (node && node.ownerDocument) || document;\n  }\n}\n","import { useEffect, useRef } from 'preact/compat';\nimport { useModal } from './hooks/useModal';\nimport { Layer } from '../UNSAFE_Layer';\nimport ModalBackdrop from './ModalBackdrop';\nimport ModalManager from './ModalManager';\nimport { baseStyle } from './themes/ModalStyles.css';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\n// Global ModalManager singleton instance\nconst globalModalManager = new ModalManager();\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLDivElement>, 'children'>;\ntype UseModalProps = Parameters<typeof useModal>[0];\ntype Props = UseModalProps &\n  IntrinsicProps & {\n    /**\n     * Determines if the modal is active.\n     */\n    isOpen: boolean;\n    /**\n     * Specifies if modal backdrop is visible or transparent. Default is 'scrim' (visible).\n     */\n    backdropVariant?: 'scrim' | 'transparent';\n    /**\n     * A callback to be invoked when a click on the modal backdrop occurs.\n     */\n    onBackdropClick?: () => void;\n  };\n\n/**\n * Modal is a low-level component that provides the 'modality' feature with built-in overlay (scrim).\n * It is typically used for building higher-level components (such as 'Dialog' or 'Popup') that need\n * to support modal behavior preventing interaction with the rest of the page while the modal is open.\n */\nconst Modal = ({ children, isOpen, onBackdropClick, backdropVariant }: Props) => {\n  // get the global ModalContext instance\n  const modalManager = globalModalManager;\n\n  const { backdropRef } = useModal({ isOpen, onBackdropClick });\n  // main modal element ref\n  const modalRef = useRef<HTMLDivElement>(null);\n\n  // modal ref cache, required to lookup the item in modal manger when the actual ref is unmounted\n  const modal = useRef<{\n    modalRef?: typeof modalRef.current;\n  }>({});\n\n  // populates and returns the modal ref cache\n  const getModal = () => {\n    modal.current.modalRef = modalRef.current;\n    return modal.current;\n  };\n\n  useEffect(() => {\n    if (isOpen && modalRef.current) {\n      modalManager?.push(getModal());\n    } else {\n      if (modal.current.modalRef) {\n        modalManager?.pop(getModal());\n      }\n    }\n  }, [isOpen, modalRef.current]);\n\n  useEffect(() => {\n    return () => {\n      if (modal.current.modalRef) {\n        modalManager?.pop(getModal());\n      }\n    };\n  }, []);\n\n  return isOpen ? (\n    <Layer>\n      <div ref={modalRef} class={baseStyle}>\n        <ModalBackdrop ref={backdropRef} variant={backdropVariant} />\n        {children}\n      </div>\n    </Layer>\n  ) : null;\n};\n\nexport default Modal;\n"],"names":["forwardRef","multiVariantStyles","_jsx","useModal","useRef","useEffect","Layer","_jsxs","baseStyle"],"mappings":"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"}