@oracle/oraclejet-preact 14.1.9 → 14.1.11

package/amd/{MessageToast-ae288e5f.js.map → MessageToast-13d63df0.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MessageToast-ae288e5f.js","sources":["../../src/UNSAFE_MessageToast/MessageToast.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { ComponentChildren, ComponentProps, RefObject } from 'preact';\nimport {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState\n} from 'preact/hooks';\n\nimport { EnvironmentProvider } from '../UNSAFE_Environment';\nimport {\n  FocusableComponentHandle,\n  useMessageFocusManager\n} from '../hooks/PRIVATE_useMessagesFocusManager';\nimport { useBreakpointValues } from '../hooks/UNSAFE_useBreakpointValues';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { getRendererWithoutIndex, Message, MessagesManager } from '../PRIVATE_Message';\nimport { MessageLayer } from '../PRIVATE_MessageLayer';\nimport { BundleType } from '../resources/nls/bundle';\nimport { Flex } from '../UNSAFE_Flex';\nimport { FocusTrap } from '../UNSAFE_FocusTrap';\nimport { LiveRegion } from '../UNSAFE_LiveRegion';\nimport { stringLiteralArray } from '../utils/UNSAFE_arrayUtils';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { Item, ItemMetadata } from '../utils/UNSAFE_dataProvider';\nimport { Size } from '../utils/UNSAFE_size';\n\n// TODO: refactor types so we don't repeat them here and MessageLayer\n// https://jira.oraclecorp.com/jira/browse/JET-54212\nconst positions = stringLiteralArray([\n  'top',\n  'top-left',\n  'top-right',\n  'top-start',\n  'top-end',\n  'bottom',\n  'bottom-left',\n  'bottom-right',\n  'bottom-start',\n  'bottom-end'\n]);\n\ntype Position = typeof positions[number];\n\ntype Offset =\n  | number\n  | {\n      horizontal?: number;\n      vertical?: number;\n    };\n\n// TODO: Refactor Message Item types\n// https://jira.oraclecorp.com/jira/browse/JET-54215\n\n/**\n * An object representing a single message in MessageToast component.\n */\nexport type MessageToastItem = {\n  /**\n   * Defines whether or not to include the close icon for the message\n   *\n   * @default 'on'\n   */\n  closeAffordance?: 'on' | 'off';\n\n  /**\n   * Defines the detail text of the message\n   */\n  detail?: string;\n\n  /**\n   * Defines the severity of the message\n   *\n   * @default 'error'\n   */\n  severity?: 'none' | 'error' | 'warning' | 'confirmation' | 'info';\n\n  /**\n   * Defines the sound to be played when opening the message\n   *\n   * @default 'none'\n   */\n  sound?: 'default' | 'none' | string;\n\n  /**\n   * Defines the primary text of the message\n   */\n  summary?: string;\n\n  /**\n   * Defines the time after which the message is to be closed automatically\n   *\n   * on - default of 5s\n   * off - no auto timeout, manually dismissed\n   * number - seconds in milliseconds format\n   *\n   * @default 'off'\n   */\n  autoTimeout?: 'on' | 'off' | number;\n};\n\n/**\n * Structure of data item passed to the renderers\n */\nexport type MessageToastRendererDataItem<K, D> = {\n  /**\n   * The data for the current message\n   */\n  data: D;\n\n  /**\n   * The key for the current message\n   */\n  key: K;\n\n  /**\n   * The metadata for the current message\n   */\n  metadata?: ItemMetadata<K>;\n};\n\ntype Props<Key, Data> = {\n  /**\n   * Defines the fixed position where the notifications will to be placed on the screen.\n   * - top-start resolves to top-left in LTR (top-right in RTL)\n   * - top-end resolves to top-right in LTR (top-left in RTL)\n   * - bottom-start resolves to bottom-left in LTR (bottom-right in RTL)\n   * - bottom-end resolves to bottom-right in LTR (bottom-left in RTL)\n   *\n   * default bottom\n   */\n  position?: Position;\n\n  /**\n   * Defines an offset (in pixels) in the placement. Value can be supplied as a number or\n   * an object with horizontal and vertical values.\n   *\n   * default 0\n   */\n  offset?: Offset;\n\n  /**\n   * Data for the MessageToast component. This data is used for rendering each toast message.\n   * The key for each message will be configured using the key of the corresponding item. This way,\n   * the component will know whether a new message is being added or an existing message is being updated/removed\n   * when the new data comes in.\n   */\n  data: Item<Key, Data>[];\n\n  /**\n   * Triggered when a user tries to close a message through UI interaction. The application\n   * should listen to this event and remove the corresponding message item from the data\n   * which would then result in the message closed. If the application\n   * fails to remove the message item from the data, then no change will be done in the\n   * UI by the component and the message will stay in the UI opened.\n   */\n  onClose?: (item: Item<Key, Data>) => void;\n\n  /**\n   * Applications can use this property to provide the key of a renderer or a function that\n   * returns the key of a renderer to use for rendering the detail content.\n   *\n   * When a renderer key is provided as a value for this property, the corresponding renderer\n   * will be used for rendering the detail content for all the messages. If applications want\n   * to use a different renderer for different messages, they can provide a function that\n   * returns a renderer key instead.\n   *\n   * The provided function should accept an Item and return a key to a renderer for\n   * rendering the corresponding message's detail content. The value returned from this function\n   * should be a key to one of the renderers provided. If the returned value is not\n   * one of the keys of the provided renderers, the component will throw an Error.\n   *\n   * If the function returns undefined, the component then will perform default rendering\n   * of the detail content using the detail property of the corresponding message.\n   *\n   * If an application specifies both detail and a valid detailRendererKey, the detailRendererKey will\n   * take precedence and the corresponding renderer will be used for rendering the detail content.\n   */\n  detailRendererKey?: string | ((item: Item<Key, Data>) => string | undefined);\n\n  /**\n   * Applications can use this property to provide the key of a renderer or a function that\n   * returns the key of the renderer to use for rendering the start icon.\n   *\n   * When a renderer key is provided as a value for this property, the corresponding renderer\n   * will be used for rendering the start icon for all the messages. If applications want\n   * to use a different renderer for different messages, they can provide a function that\n   * returns a renderer key instead.\n   *\n   * The provided function should accept an Item and return a key to a renderer for\n   * rendering the corresponding message's start icon. The value returned from this function\n   * should be a key to one of the renderers provided. If the returned value is not\n   * one of the keys of the provided renderers, the component will throw an Error.\n   *\n   * If the function returns undefined, the component then will perform default rendering\n   * of the start icon using the severity property of the corresponding message.\n   *\n   * If an application specifies both severity and a valid iconRendererKey, the iconRendererKey will\n   * take precedence and the corresponding renderer will be used for rendering the start icon.\n   */\n  iconRendererKey?: string | ((item: Item<Key, Data>) => string | undefined);\n\n  /**\n   * A set of available renderers for rendering the message content. Which renderer is used\n   * for rendering which content will be decided by specific properties in the row data.\n   */\n  renderers?: Record<string, (data: MessageToastRendererDataItem<Key, Data>) => ComponentChildren>;\n};\n\nconst messageToastStyles = {\n  base: cssProps`${{\n    height: 'fit-content',\n    width: 'fit-content'\n  }}`\n} as const;\n\n/**\n * Animation states for toast messages\n * TODO: Get this from theme context provider\n */\nconst animationStates: ComponentProps<typeof MessagesManager>['animationStates'] = {\n  entering: (node) => ({\n    from: {\n      transform: `translate(0, ${node.offsetHeight}px)`,\n      opacity: 1\n    },\n    to: {\n      transform: 'translate(0, 0)',\n      opacity: 1\n    },\n    end: {\n      transform: 'unset',\n      opacity: 1\n    },\n    options: {\n      duration: 250\n    }\n  }),\n  exiting: {\n    from: {\n      opacity: 1\n    },\n    to: {\n      opacity: 0\n    },\n    end: {\n      opacity: 0\n    },\n    options: {\n      duration: 250\n    }\n  }\n};\nconst initialAnimationStyles = {\n  opacity: 0\n} as const;\n\nexport function MessageToast<K extends string | number, D extends MessageToastItem>({\n  data,\n  detailRendererKey,\n  iconRendererKey,\n  renderers,\n  onClose,\n  offset,\n  position\n}: Props<K, D>) {\n  const messagesRef = useRef(new Map<K, HTMLDivElement | null>());\n  const autoFocusRef = useRef<HTMLDivElement>(null) as RefObject<HTMLDivElement | null>;\n  const containerDivRef = useRef<HTMLDivElement>(null);\n  const focusHandleRef = useRef<FocusableComponentHandle>(null);\n  const [liveRegionText, setLiveRegionText] = useState<string>();\n  const [shouldRender, setShouldRender] = useState(data.length > 0);\n  const [shouldTrapFocus, setShouldTrapFocus] = useState(false);\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n\n  // We need a ref that holds the current & previous data length, as the exiting\n  // node will always call handleNextFocus with previous data.\n  // As in TransitionGroup, when an item is removed from the data, a new vnode\n  // will not be created instead previous vnode will be used. So, the new handleNextFocus\n  // will not be called when the old vnode exits. Thus, we will be using a ref\n  // to always get the correct current data length.\n  const dataLengthRef = useRef(data.length);\n  const prevDataLengthRef = useRef(0);\n  // Update the data length ref\n  dataLengthRef.current = data.length;\n\n  // Update the focusHandleRef\n  useImperativeHandle(\n    focusHandleRef,\n    () => ({\n      focus: () => {\n        // Only trigger focus if the component is rendering messages\n        if (data.length) {\n          // set the autoFocus ref to the first message and enable the focus trap\n          // this will automatically focus the first message\n          autoFocusRef.current = messagesRef.current.get(data[0].key) ?? null;\n          setShouldTrapFocus(true);\n          return true;\n        }\n        return false;\n      },\n      contains: (element: Element) => {\n        // Only invoke method if the component is rendering messages\n        if (data.length && element) {\n          return containerDivRef.current?.contains(element) ?? false;\n        }\n        return false;\n      }\n    }),\n    [data]\n  );\n\n  // Register handlers for focus management\n  const { controller, handlers } = useMessageFocusManager(\n    focusHandleRef,\n    {\n      onFocus: useCallback(() => {\n        setLiveRegionText(translations.message_navigationFromMessagesRegion());\n      }, [translations]),\n      onFocusLeave: useCallback(() => {\n        // disable trap which should revert the focus back to the last focused item\n        setShouldTrapFocus(false);\n      }, [])\n    },\n    {\n      // we do not want the focus manager to handle Esc key as we handle it using the\n      // FocusTrap here\n      handleEscapeKey: false\n    }\n  );\n\n  /**\n   * Handles focus when a message is closed and animated away from the DOM\n   * @param key The key of the message\n   * @param index The index of the message\n   */\n  const handleNextFocus = useCallback(\n    (_key: K, index: number, closedMessageNode?: Element) => {\n      const isClosedMessageFocused = closedMessageNode?.contains(document.activeElement);\n\n      // If there are no messages, do not render anything. As the old messages\n      // are still in the DOM, use the data count to determine what to do next as it\n      // represents the next state.\n      if (dataLengthRef.current === 0) {\n        setShouldRender(false);\n        setShouldTrapFocus(false);\n        // If the current message holds focus, then restore previous focus\n        if (isClosedMessageFocused) {\n          // As we have FocusTrap, trying to restore focus now will simply result in focus being pulled\n          // back again. So, we restore the focus in the next tick so that the rendering will have been\n          // done in the microtask.\n          setImmediate(() => controller.restorePriorFocus());\n        }\n        return;\n      }\n\n      // In TransitionGroup, when an item is removed from the data, a new vnode\n      // will not be created instead previous vnode will be used. So, the new handleNextFocus\n      // will not be called when the old vnode exits. Thus, all the deps will not be pointing to\n      // the current references, rather they will be pointing to the ones where this vnode\n      // last existed in the data.\n      // This means, the data will contain the closing message as well. But, all the ref objects\n      // still point to the most up-to-date values. With that in mind, we will be evaluating the\n      // following values.\n      const renderedMessagesCount = data.length;\n\n      // Now that this message is closed, focus the next message that will take this index. If no\n      // message will take this message's index, then it means that this is the last message. If\n      // that is the case, focus the message at the previous index.\n      // Use the count of the messages that are currently shown in the UI (current state including\n      // the message that will be removed). This way we can get the correct item from the data\n      // as it will contain the closing message as well.\n      const nextMessageIndexToFocus = index + 1 < renderedMessagesCount ? index + 1 : index - 1;\n\n      // if next message is available then transfer the focus to the next element\n      if (nextMessageIndexToFocus > -1 && isClosedMessageFocused) {\n        const nextMessageKey = data[nextMessageIndexToFocus].key;\n        messagesRef.current.get(nextMessageKey)?.focus();\n      }\n    },\n    [controller, data]\n  );\n\n  // We will be using a function based ref to store the refs in the Map\n  const setHTMLDivElement = useCallback(\n    // TODO: use ramda.curry here (currently it is throwing ts error when used with generics)\n    (key: K) => {\n      return (ref: HTMLDivElement | null) => messagesRef.current.set(key, ref);\n    },\n    []\n  );\n  // Prioritize this component whenever the data changes and\n  // the new data has at least one message\n  useEffect(() => {\n    const previousDataLength = prevDataLengthRef.current;\n    prevDataLengthRef.current = data.length;\n\n    // if there are messages that need to be rendered now, then do the following deeds:\n    // 1. set the shouldRender flag\n    // 2. set the live region\n    // 3. prioritize this message component to be the latest\n    if (data.length) {\n      // set state to render content whenever the data is not empty\n      setShouldRender(true);\n      if (data.length > previousDataLength) {\n        // Only when having a new message, update the aria-live area with the\n        // text to indicate how to get the focus to the new message.\n        setLiveRegionText(translations.message_navigationToMessagesRegion());\n      }\n      controller.prioritize();\n      return;\n    }\n\n    // if there were messages and now removed, then set the live region to\n    // announce this information\n    if (previousDataLength) {\n      setLiveRegionText(translations.messageToast_allMessagesClosed());\n      return;\n    }\n\n    // When there are no messages, clear the live region so that\n    // the navigation text will be read when a new message appear\n    setLiveRegionText('');\n  }, [controller, data.length, translations]);\n\n  // determine responsive max-width\n  const maxWidth = useBreakpointValues<Size>({\n    sm: '--oj-c-PRIVATE-DO-NOT-USE-message-toast-max-width-sm',\n    md: '--oj-c-PRIVATE-DO-NOT-USE-message-toast-max-width-md',\n    lg: '--oj-c-PRIVATE-DO-NOT-USE-message-toast-max-width-lg'\n  });\n  // without offset, the messages will be hugging the vertical edges of the screen\n  // so we will set a default offset.vertical value (any offset from the props will be\n  // added to this).\n  const paddedOffset = useBreakpointValues<Offset>({\n    sm: {\n      horizontal: typeof offset === 'number' ? offset : offset?.horizontal ?? 0,\n      vertical: 16 + (typeof offset === 'number' ? offset : offset?.horizontal ?? 0)\n    },\n    lg: {\n      horizontal: typeof offset === 'number' ? offset : offset?.horizontal ?? 0,\n      vertical: 24 + (typeof offset === 'number' ? offset : offset?.horizontal ?? 0)\n    }\n  });\n\n  // TODO: move this to the individual components.\n  // Cannot do this as of now, as doing do results in oj-message-banner not working.\n  const messageTranslations = useMemo(\n    () => ({\n      close: translations.close(),\n      confirmation: translations.confirmation(),\n      error: translations.error(),\n      info: translations.info(),\n      warning: translations.warn()\n    }),\n    [translations]\n  );\n  const rootClasses = classNames([\n    messageToastStyles.base,\n    // by default the toast messages are dark, so add the required classes\n    'oj-c-colorscheme-dark',\n    'oj-color-invert'\n  ]);\n\n  // When both shouldRender flag is false and no data to render, do not render\n  // anything except the live region\n  if (!shouldRender && data.length === 0) {\n    return <LiveRegion>{liveRegionText}</LiveRegion>;\n  }\n\n  return (\n    <EnvironmentProvider environment={{ colorScheme: 'dark' }}>\n      <MessageLayer offset={paddedOffset} position={position}>\n        <div\n          class={rootClasses}\n          ref={containerDivRef}\n          tabIndex={-1} // Need to add tabindex to make the container receive the focus events\n          {...handlers}>\n          <FocusTrap autoFocusRef={autoFocusRef} isDisabled={!shouldTrapFocus}>\n            <Flex direction=\"column\" gap=\"1x\" align=\"center\" maxWidth={maxWidth}>\n              <MessagesManager\n                animationStates={animationStates}\n                initialAnimationStyles={initialAnimationStyles}\n                data={data}\n                onMessageWillRemove={handleNextFocus}>\n                {({ index, item }) => (\n                  <Message\n                    messageRef={setHTMLDivElement(item.key)}\n                    item={item}\n                    detailRenderer={getRendererWithoutIndex(item, detailRendererKey, renderers)}\n                    iconRenderer={getRendererWithoutIndex(item, iconRendererKey, renderers)}\n                    index={index}\n                    key={item.key}\n                    onClose={onClose}\n                    translations={messageTranslations}\n                    variant=\"toast\"\n                  />\n                )}\n              </MessagesManager>\n            </Flex>\n          </FocusTrap>\n        </div>\n      </MessageLayer>\n      <LiveRegion>{liveRegionText}</LiveRegion>\n    </EnvironmentProvider>\n  );\n}\n"],"names":["stringLiteralArray","messageToastStyles","animationStates","entering","node","from","transform","offsetHeight","opacity","to","end","options","duration","exiting","initialAnimationStyles","data","detailRendererKey","iconRendererKey","renderers","onClose","offset","position","autoFocusRef","useRef","containerDivRef","focusHandleRef","shouldRender","setShouldRender","useState","length","translations","useTranslationBundle","prevDataLengthRef","dataLengthRef","current","useImperativeHandle","_a","messagesRef","get","key","contains","element","_b","onFocus","useCallback","setLiveRegionText","message_navigationFromMessagesRegion","onFocusLeave","handleEscapeKey","isClosedMessageFocused","closedMessageNode","document","activeElement","nextMessageIndexToFocus","index","controller","ref","set","previousDataLength","message_navigationToMessagesRegion","messageToast_allMessagesClosed","sm","md","lg","messageTranslations","useMemo","close","confirmation","error","info","warning","warn","_jsxs","EnvironmentProvider","Object","assign","environment","colorScheme","children","_jsx","jsx","MessageLayer","paddedOffset","class","rootClasses","tabIndex","handlers","FocusTrap","isDisabled","shouldTrapFocus","Flex","direction","gap","align","maxWidth","MessagesManager","onMessageWillRemove","handleNextFocus","item","Message","messageRef","setHTMLDivElement","detailRenderer","getRendererWithoutIndex","iconRenderer","variant","LiveRegion","liveRegionText"],"mappings":"gkBAuCAA,EAAAA,mBAAA,wHAAA,MAoLAC,WAWAC,EAAA,CACEC,SAAAC,IAAA,CACEC,KAAA,CACEC,UAAA,gBAAAF,EAAAG,kBACAC,QAAA,GAEFC,GAAA,CACEH,UAAA,kBACAE,QAAA,GAEFE,IAAA,CACEJ,UAAA,QACAE,QAAA,GAEFG,QAAA,CACEC,SAAA,OAGJC,QAAA,CACER,KAAA,CACEG,QAAA,GAEFC,GAAA,CACED,QAAA,GAEFE,IAAA,CACEF,QAAA,GAEFG,QAAA,CACEC,SAAA,OAINE,EAAA,CACEN,QAAA,kBAGF,UAAAO,KAAAA,EAAAC,kBAAAA,EAAAC,gBAAAA,EAAAC,UAAAA,EAAAC,QAAAA,EAAAC,OAAAA,EAAAC,SAAAA,0CAUEC,EAAAC,SAAA,MACAC,EAAAD,SAAA,MACAE,EAAAF,SAAA,0BAEAG,EAAAC,GAAAC,EAAAA,SAAAb,EAAAc,OAAA,wBAEAC,EAAAC,uBAAA,iDASAC,EAAAT,SAAA,GAEAU,EAAAC,QAAAnB,EAAAc,OAGAM,EAAAA,oBAAAV,EAAA,KAAA,qCAQQH,EAAAY,QAAA,QAAAE,EAAAC,EAAAH,QAAAI,IAAAvB,EAAA,GAAAwB,YAAA,IAAAH,EAAAA,EAAA,YAEA,IAIJI,SAAAC,YAEE,SAAA1B,EAAAc,SAAAY,KACE,QAAAC,EAAA,QAAAN,EAAAZ,EAAAU,eAAA,IAAAE,OAAA,EAAAA,EAAAI,SAAAC,UAAA,IAAAC,GAAAA,MAIL,CAAA3B,+DAQC4B,QAAAC,EAAAA,YAAA,KACEC,EAAAf,EAAAgB,yCACF,CAAAhB,IACAiB,aAAAH,EAAAA,YAAA,kBAQAI,iBAAA,oCAWA,MAAAC,EAAAC,MAAAA,OAAA,EAAAA,EAAAV,SAAAW,SAAAC,eAKA,GAAA,IAAAnB,EAAAC,gCAIEe,4CAiBF,MAQAI,EAAAC,EAAA,EARAvC,EAAAc,OAQAyB,EAAA,EAAAA,EAAA,EAGA,GAAAD,GAAA,GAAAJ,EAAA,uEAIF,CAAAM,EAAAxC,uBAQEyC,GAAAnB,EAAAH,QAAAuB,IAAAlB,EAAAiB,wBAOF,MAAAE,EAAA1B,EAAAE,WACAF,EAAAE,QAAAnB,EAAAc,6BASEd,EAAAc,OAAA6B,GAGEb,EAAAf,EAAA6B,0DASFd,EADFa,EACE5B,EAAA8B,qFAWFC,GAAA,uDACAC,GAAA,uDACAC,GAAA,kFAMAF,GAAA,mLAIAE,GAAA,qLAQFC,EAAAC,EAAAA,QAAA,KAAA,CAEIC,MAAApC,EAAAoC,QACAC,aAAArC,EAAAqC,eACAC,MAAAtC,EAAAsC,QACAC,KAAAvC,EAAAuC,OACAC,QAAAxC,EAAAyC,SACD,CAAAzC,oBAID7B,qEAYFuE,OAAAC,EAAAA,oBAAAC,OAAAC,OAAA,CAAAC,YAAA,CAAAC,YAAA,SAAA,CAAAC,SAAA,CAAAC,EAAAC,IAAAC,eAAAP,OAAAC,OAAA,CAAAvD,OAAA8D,EAAA7D,SAAAA,GAAA,CAAAyD,SAAAC,EAAAC,IAAA,MAAAN,OAAAC,OAAA,CAAAQ,MAAAC,EAAA5B,IAAAhC,EAAA6D,UAAA,GAAAC,EAAA,CAAAR,SAAAC,EAAAC,IAAAO,YAAAb,OAAAC,OAAA,CAAArD,aAAAA,EAAAkE,YAAAC,GAAA,CAAAX,SAAAC,EAAAC,IAAAU,OAAAhB,OAAAC,OAAA,CAAAgB,UAAA,SAAAC,IAAA,KAAAC,MAAA,SAAAC,SAAAA,GAAA,CAAAhB,SAAAC,EAAAC,IAAAe,kBAAArB,OAAAC,OAAA,CAAAzE,gBAAAA,EAAAY,uBAAAA,EAAAC,KAAAA,EAAAiF,oBAAAC,GAAA,CAAAnB,SAAA,EAAAxB,MAAAA,EAAA4C,KAAAA,KAAAnB,EAAAA,IAAAoB,EAAAA,QAAA,CAAAC,WAAAC,EAAAH,EAAA3D,KAAA2D,KAAAA,EAAAI,eAAAC,EAAAA,wBAAAL,EAAAlF,EAAAE,GAAAsF,aAAAD,EAAAA,wBAAAL,EAAAjF,EAAAC,GAAAoC,MAAAA,EAAAnC,QAAAA,EAAAW,aAAAkC,EAAAyC,QAAA,SAAAP,EAAA3D,oBAAAwC,EAAAC,IAAA0B,aAAA,CAAA5B,SAAA6B,QAHE5B,EAAAA,IAAA2B,EAAAA,WAAA,CAAA5B,SAAA6B"}
+{"version":3,"file":"MessageToast-13d63df0.js","sources":["../../src/UNSAFE_MessageToast/MessageToast.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { ComponentChildren, ComponentProps, RefObject } from 'preact';\nimport {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState\n} from 'preact/hooks';\n\nimport { EnvironmentProvider } from '../UNSAFE_Environment';\nimport {\n  FocusableComponentHandle,\n  useMessageFocusManager\n} from '../hooks/PRIVATE_useMessagesFocusManager';\nimport { useBreakpointValues } from '../hooks/UNSAFE_useBreakpointValues';\nimport { useTranslationBundle } from '../hooks/UNSAFE_useTranslationBundle';\nimport { getRendererWithoutIndex, Message, MessagesManager } from '../PRIVATE_Message';\nimport { MessageLayer } from '../PRIVATE_MessageLayer';\nimport { BundleType } from '../resources/nls/bundle';\nimport { Flex } from '../UNSAFE_Flex';\nimport { FocusTrap } from '../UNSAFE_FocusTrap';\nimport { LiveRegion } from '../UNSAFE_LiveRegion';\nimport { stringLiteralArray } from '../utils/UNSAFE_arrayUtils';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { Item, ItemMetadata } from '../utils/UNSAFE_dataProvider';\nimport { Size } from '../utils/UNSAFE_size';\n\n// TODO: refactor types so we don't repeat them here and MessageLayer\n// https://jira.oraclecorp.com/jira/browse/JET-54212\nconst positions = stringLiteralArray([\n  'top',\n  'top-left',\n  'top-right',\n  'top-start',\n  'top-end',\n  'bottom',\n  'bottom-left',\n  'bottom-right',\n  'bottom-start',\n  'bottom-end'\n]);\n\ntype Position = typeof positions[number];\n\ntype Offset =\n  | number\n  | {\n      horizontal?: number;\n      vertical?: number;\n    };\n\n// TODO: Refactor Message Item types\n// https://jira.oraclecorp.com/jira/browse/JET-54215\n\n/**\n * An object representing a single message in MessageToast component.\n */\nexport type MessageToastItem = {\n  /**\n   * Defines whether or not to include the close icon for the message\n   *\n   * @default 'on'\n   */\n  closeAffordance?: 'on' | 'off';\n\n  /**\n   * Defines the detail text of the message\n   */\n  detail?: string;\n\n  /**\n   * Defines the severity of the message\n   *\n   * @default 'error'\n   */\n  severity?: 'none' | 'error' | 'warning' | 'confirmation' | 'info';\n\n  /**\n   * Defines the sound to be played when opening the message\n   *\n   * @default 'none'\n   */\n  sound?: 'default' | 'none' | string;\n\n  /**\n   * Defines the primary text of the message\n   */\n  summary?: string;\n\n  /**\n   * Defines the time after which the message is to be closed automatically\n   *\n   * on - default of 5s\n   * off - no auto timeout, manually dismissed\n   * number - seconds in milliseconds format\n   *\n   * @default 'off'\n   */\n  autoTimeout?: 'on' | 'off' | number;\n};\n\n/**\n * Structure of data item passed to the renderers\n */\nexport type MessageToastRendererDataItem<K, D> = {\n  /**\n   * The data for the current message\n   */\n  data: D;\n\n  /**\n   * The key for the current message\n   */\n  key: K;\n\n  /**\n   * The metadata for the current message\n   */\n  metadata?: ItemMetadata<K>;\n};\n\ntype Props<Key, Data> = {\n  /**\n   * Defines the fixed position where the notifications will to be placed on the screen.\n   * - top-start resolves to top-left in LTR (top-right in RTL)\n   * - top-end resolves to top-right in LTR (top-left in RTL)\n   * - bottom-start resolves to bottom-left in LTR (bottom-right in RTL)\n   * - bottom-end resolves to bottom-right in LTR (bottom-left in RTL)\n   *\n   * default bottom\n   */\n  position?: Position;\n\n  /**\n   * Defines an offset (in pixels) in the placement. Value can be supplied as a number or\n   * an object with horizontal and vertical values.\n   *\n   * default 0\n   */\n  offset?: Offset;\n\n  /**\n   * Data for the MessageToast component. This data is used for rendering each toast message.\n   * The key for each message will be configured using the key of the corresponding item. This way,\n   * the component will know whether a new message is being added or an existing message is being updated/removed\n   * when the new data comes in.\n   */\n  data: Item<Key, Data>[];\n\n  /**\n   * Triggered when a user tries to close a message through UI interaction. The application\n   * should listen to this event and remove the corresponding message item from the data\n   * which would then result in the message closed. If the application\n   * fails to remove the message item from the data, then no change will be done in the\n   * UI by the component and the message will stay in the UI opened.\n   */\n  onClose?: (item: Item<Key, Data>) => void;\n\n  /**\n   * Applications can use this property to provide the key of a renderer or a function that\n   * returns the key of a renderer to use for rendering the detail content.\n   *\n   * When a renderer key is provided as a value for this property, the corresponding renderer\n   * will be used for rendering the detail content for all the messages. If applications want\n   * to use a different renderer for different messages, they can provide a function that\n   * returns a renderer key instead.\n   *\n   * The provided function should accept an Item and return a key to a renderer for\n   * rendering the corresponding message's detail content. The value returned from this function\n   * should be a key to one of the renderers provided. If the returned value is not\n   * one of the keys of the provided renderers, the component will throw an Error.\n   *\n   * If the function returns undefined, the component then will perform default rendering\n   * of the detail content using the detail property of the corresponding message.\n   *\n   * If an application specifies both detail and a valid detailRendererKey, the detailRendererKey will\n   * take precedence and the corresponding renderer will be used for rendering the detail content.\n   */\n  detailRendererKey?: string | ((item: Item<Key, Data>) => string | undefined);\n\n  /**\n   * Applications can use this property to provide the key of a renderer or a function that\n   * returns the key of the renderer to use for rendering the start icon.\n   *\n   * When a renderer key is provided as a value for this property, the corresponding renderer\n   * will be used for rendering the start icon for all the messages. If applications want\n   * to use a different renderer for different messages, they can provide a function that\n   * returns a renderer key instead.\n   *\n   * The provided function should accept an Item and return a key to a renderer for\n   * rendering the corresponding message's start icon. The value returned from this function\n   * should be a key to one of the renderers provided. If the returned value is not\n   * one of the keys of the provided renderers, the component will throw an Error.\n   *\n   * If the function returns undefined, the component then will perform default rendering\n   * of the start icon using the severity property of the corresponding message.\n   *\n   * If an application specifies both severity and a valid iconRendererKey, the iconRendererKey will\n   * take precedence and the corresponding renderer will be used for rendering the start icon.\n   */\n  iconRendererKey?: string | ((item: Item<Key, Data>) => string | undefined);\n\n  /**\n   * A set of available renderers for rendering the message content. Which renderer is used\n   * for rendering which content will be decided by specific properties in the row data.\n   */\n  renderers?: Record<string, (data: MessageToastRendererDataItem<Key, Data>) => ComponentChildren>;\n};\n\nconst messageToastStyles = {\n  base: cssProps`${{\n    height: 'fit-content',\n    width: 'fit-content'\n  }}`\n} as const;\n\n/**\n * Animation states for toast messages\n * TODO: Get this from theme context provider\n */\nconst animationStates: ComponentProps<typeof MessagesManager>['animationStates'] = {\n  entering: (node) => ({\n    from: {\n      transform: `translate(0, ${node.offsetHeight}px)`,\n      opacity: 1\n    },\n    to: {\n      transform: 'translate(0, 0)',\n      opacity: 1\n    },\n    end: {\n      transform: 'unset',\n      opacity: 1\n    },\n    options: {\n      duration: 250\n    }\n  }),\n  exiting: {\n    from: {\n      opacity: 1\n    },\n    to: {\n      opacity: 0\n    },\n    end: {\n      opacity: 0\n    },\n    options: {\n      duration: 250\n    }\n  }\n};\nconst initialAnimationStyles = {\n  opacity: 0\n} as const;\n\nexport function MessageToast<K extends string | number, D extends MessageToastItem>({\n  data,\n  detailRendererKey,\n  iconRendererKey,\n  renderers,\n  onClose,\n  offset,\n  position\n}: Props<K, D>) {\n  const messagesRef = useRef(new Map<K, HTMLDivElement | null>());\n  const autoFocusRef = useRef<HTMLDivElement>(null) as RefObject<HTMLDivElement | null>;\n  const containerDivRef = useRef<HTMLDivElement>(null);\n  const focusHandleRef = useRef<FocusableComponentHandle>(null);\n  const [liveRegionText, setLiveRegionText] = useState<string>();\n  const [shouldRender, setShouldRender] = useState(data.length > 0);\n  const [shouldTrapFocus, setShouldTrapFocus] = useState(false);\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n\n  // We need a ref that holds the current & previous data length, as the exiting\n  // node will always call handleNextFocus with previous data.\n  // As in TransitionGroup, when an item is removed from the data, a new vnode\n  // will not be created instead previous vnode will be used. So, the new handleNextFocus\n  // will not be called when the old vnode exits. Thus, we will be using a ref\n  // to always get the correct current data length.\n  const dataLengthRef = useRef(data.length);\n  const prevDataLengthRef = useRef(0);\n  // Update the data length ref\n  dataLengthRef.current = data.length;\n\n  // Update the focusHandleRef\n  useImperativeHandle(\n    focusHandleRef,\n    () => ({\n      focus: () => {\n        // Only trigger focus if the component is rendering messages\n        if (data.length) {\n          // set the autoFocus ref to the first message and enable the focus trap\n          // this will automatically focus the first message\n          autoFocusRef.current = messagesRef.current.get(data[0].key) ?? null;\n          setShouldTrapFocus(true);\n          return true;\n        }\n        return false;\n      },\n      contains: (element: Element) => {\n        // Only invoke method if the component is rendering messages\n        if (data.length && element) {\n          return containerDivRef.current?.contains(element) ?? false;\n        }\n        return false;\n      }\n    }),\n    [data]\n  );\n\n  // Register handlers for focus management\n  const { controller, handlers } = useMessageFocusManager(\n    focusHandleRef,\n    {\n      onFocus: useCallback(() => {\n        setLiveRegionText(translations.message_navigationFromMessagesRegion());\n      }, [translations]),\n      onFocusLeave: useCallback(() => {\n        // disable trap which should revert the focus back to the last focused item\n        setShouldTrapFocus(false);\n      }, [])\n    },\n    {\n      // we do not want the focus manager to handle Esc key as we handle it using the\n      // FocusTrap here\n      handleEscapeKey: false\n    }\n  );\n\n  /**\n   * Handles focus when a message is closed and animated away from the DOM\n   * @param key The key of the message\n   * @param index The index of the message\n   */\n  const handleNextFocus = useCallback(\n    (_key: K, index: number, closedMessageNode?: Element) => {\n      const isClosedMessageFocused = closedMessageNode?.contains(document.activeElement);\n\n      // If there are no messages, do not render anything. As the old messages\n      // are still in the DOM, use the data count to determine what to do next as it\n      // represents the next state.\n      if (dataLengthRef.current === 0) {\n        setShouldRender(false);\n        setShouldTrapFocus(false);\n        // If the current message holds focus, then restore previous focus\n        if (isClosedMessageFocused) {\n          // As we have FocusTrap, trying to restore focus now will simply result in focus being pulled\n          // back again. So, we restore the focus in the next tick so that the rendering will have been\n          // done in the microtask.\n          setImmediate(() => controller.restorePriorFocus());\n        }\n        return;\n      }\n\n      // In TransitionGroup, when an item is removed from the data, a new vnode\n      // will not be created instead previous vnode will be used. So, the new handleNextFocus\n      // will not be called when the old vnode exits. Thus, all the deps will not be pointing to\n      // the current references, rather they will be pointing to the ones where this vnode\n      // last existed in the data.\n      // This means, the data will contain the closing message as well. But, all the ref objects\n      // still point to the most up-to-date values. With that in mind, we will be evaluating the\n      // following values.\n      const renderedMessagesCount = data.length;\n\n      // Now that this message is closed, focus the next message that will take this index. If no\n      // message will take this message's index, then it means that this is the last message. If\n      // that is the case, focus the message at the previous index.\n      // Use the count of the messages that are currently shown in the UI (current state including\n      // the message that will be removed). This way we can get the correct item from the data\n      // as it will contain the closing message as well.\n      const nextMessageIndexToFocus = index + 1 < renderedMessagesCount ? index + 1 : index - 1;\n\n      // if next message is available then transfer the focus to the next element\n      if (nextMessageIndexToFocus > -1 && isClosedMessageFocused) {\n        const nextMessageKey = data[nextMessageIndexToFocus].key;\n        messagesRef.current.get(nextMessageKey)?.focus();\n      }\n    },\n    [controller, data]\n  );\n\n  // We will be using a function based ref to store the refs in the Map\n  const setHTMLDivElement = useCallback(\n    // TODO: use ramda.curry here (currently it is throwing ts error when used with generics)\n    (key: K) => {\n      return (ref: HTMLDivElement | null) => messagesRef.current.set(key, ref);\n    },\n    []\n  );\n  // Prioritize this component whenever the data changes and\n  // the new data has at least one message\n  useEffect(() => {\n    const previousDataLength = prevDataLengthRef.current;\n    prevDataLengthRef.current = data.length;\n\n    // if there are messages that need to be rendered now, then do the following deeds:\n    // 1. set the shouldRender flag\n    // 2. set the live region\n    // 3. prioritize this message component to be the latest\n    if (data.length) {\n      // set state to render content whenever the data is not empty\n      setShouldRender(true);\n      if (data.length > previousDataLength) {\n        // Only when having a new message, update the aria-live area with the\n        // text to indicate how to get the focus to the new message.\n        setLiveRegionText(translations.message_navigationToMessagesRegion());\n      }\n      controller.prioritize();\n      return;\n    }\n\n    // if there were messages and now removed, then set the live region to\n    // announce this information\n    if (previousDataLength) {\n      setLiveRegionText(translations.messageToast_allMessagesClosed());\n      return;\n    }\n\n    // When there are no messages, clear the live region so that\n    // the navigation text will be read when a new message appear\n    setLiveRegionText('');\n  }, [controller, data.length, translations]);\n\n  // determine responsive max-width\n  const maxWidth = useBreakpointValues<Size>({\n    sm: '--oj-c-PRIVATE-DO-NOT-USE-message-toast-max-width-sm',\n    md: '--oj-c-PRIVATE-DO-NOT-USE-message-toast-max-width-md',\n    lg: '--oj-c-PRIVATE-DO-NOT-USE-message-toast-max-width-lg'\n  });\n  // without offset, the messages will be hugging the vertical edges of the screen\n  // so we will set a default offset.vertical value (any offset from the props will be\n  // added to this).\n  const paddedOffset = useBreakpointValues<Offset>({\n    sm: {\n      horizontal: typeof offset === 'number' ? offset : offset?.horizontal ?? 0,\n      vertical: 16 + (typeof offset === 'number' ? offset : offset?.horizontal ?? 0)\n    },\n    lg: {\n      horizontal: typeof offset === 'number' ? offset : offset?.horizontal ?? 0,\n      vertical: 24 + (typeof offset === 'number' ? offset : offset?.horizontal ?? 0)\n    }\n  });\n\n  // TODO: move this to the individual components.\n  // Cannot do this as of now, as doing do results in oj-message-banner not working.\n  const messageTranslations = useMemo(\n    () => ({\n      close: translations.close(),\n      confirmation: translations.confirmation(),\n      error: translations.error(),\n      info: translations.info(),\n      warning: translations.warn()\n    }),\n    [translations]\n  );\n  const rootClasses = classNames([\n    messageToastStyles.base,\n    // by default the toast messages are dark, so add the required classes\n    'oj-c-colorscheme-dark',\n    'oj-color-invert'\n  ]);\n\n  // When both shouldRender flag is false and no data to render, do not render\n  // anything except the live region\n  if (!shouldRender && data.length === 0) {\n    return <LiveRegion>{liveRegionText}</LiveRegion>;\n  }\n\n  return (\n    <EnvironmentProvider environment={{ colorScheme: 'dark' }}>\n      <MessageLayer offset={paddedOffset} position={position}>\n        <div\n          class={rootClasses}\n          ref={containerDivRef}\n          tabIndex={-1} // Need to add tabindex to make the container receive the focus events\n          {...handlers}>\n          <FocusTrap autoFocusRef={autoFocusRef} isDisabled={!shouldTrapFocus}>\n            <Flex direction=\"column\" gap=\"1x\" align=\"center\" maxWidth={maxWidth}>\n              <MessagesManager\n                animationStates={animationStates}\n                initialAnimationStyles={initialAnimationStyles}\n                data={data}\n                onMessageWillRemove={handleNextFocus}>\n                {({ index, item }) => (\n                  <Message\n                    messageRef={setHTMLDivElement(item.key)}\n                    item={item}\n                    detailRenderer={getRendererWithoutIndex(item, detailRendererKey, renderers)}\n                    iconRenderer={getRendererWithoutIndex(item, iconRendererKey, renderers)}\n                    index={index}\n                    key={item.key}\n                    onClose={onClose}\n                    translations={messageTranslations}\n                    variant=\"toast\"\n                  />\n                )}\n              </MessagesManager>\n            </Flex>\n          </FocusTrap>\n        </div>\n      </MessageLayer>\n      <LiveRegion>{liveRegionText}</LiveRegion>\n    </EnvironmentProvider>\n  );\n}\n"],"names":["stringLiteralArray","messageToastStyles","animationStates","entering","node","from","transform","offsetHeight","opacity","to","end","options","duration","exiting","initialAnimationStyles","data","detailRendererKey","iconRendererKey","renderers","onClose","offset","position","autoFocusRef","useRef","containerDivRef","focusHandleRef","shouldRender","setShouldRender","useState","length","translations","useTranslationBundle","prevDataLengthRef","dataLengthRef","current","useImperativeHandle","_a","messagesRef","get","key","contains","element","_b","onFocus","useCallback","setLiveRegionText","message_navigationFromMessagesRegion","onFocusLeave","handleEscapeKey","isClosedMessageFocused","closedMessageNode","document","activeElement","nextMessageIndexToFocus","index","controller","ref","set","previousDataLength","message_navigationToMessagesRegion","messageToast_allMessagesClosed","sm","md","lg","messageTranslations","useMemo","close","confirmation","error","info","warning","warn","_jsxs","EnvironmentProvider","Object","assign","environment","colorScheme","children","_jsx","jsx","MessageLayer","paddedOffset","class","rootClasses","tabIndex","handlers","FocusTrap","isDisabled","shouldTrapFocus","Flex","direction","gap","align","maxWidth","MessagesManager","onMessageWillRemove","handleNextFocus","item","Message","messageRef","setHTMLDivElement","detailRenderer","getRendererWithoutIndex","iconRenderer","variant","LiveRegion","liveRegionText"],"mappings":"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"}

package/amd/{MessageUtils-f508120a.js → MessageUtils-3e15c456.js}

@@ -1,2 +1,2 @@
-define(["exports","./utils/UNSAFE_logger","./utils/UNSAFE_soundUtils","./MessageFormattingUtils-36ba3a21"],function(e,t,n,o){"use strict";const i=(e,n="common")=>t.Logger.warn(`JET Message(${n}): ${e}`);function r(e,t="common"){throw new Error(`JET Message(${t}) - ${e}`)}function a(e,t,n,o){if(!t||!n)return;const i="function"==typeof t?t(e):t;return null!=i?(i in n||r(`${i} is not a valid template name for the message with key=${e.key}`,o),n[i]):void 0}e.getRenderer=a,e.getRendererWithoutIndex=function(e,t,n,o){const i=a(e,t,n,o);return"function"==typeof i?e=>{const t=Object.assign({},e);return"index"in t&&delete t.index,i.call(null,t)}:i},e.isSeverityIconNeeded=function(e){return o.isValidValueForProp(e,"severity")&&"none"!==e},e.playSound=async function(e){if("none"!==e)if("default"!==e)try{await n.playAudioFromURL(e)}catch(t){i(`Failed to play the audio from the url ${e}. ${t}.`)}else try{n.playDefaultNotificationSound()}catch(e){i(`Failed to play the default sound. ${e}.`)}},e.severityBasedStyleClass=function(e,t){return o.isValidValueForProp(e,"severity")&&"none"!==e?`oj-c-message${t}-${e}`:""},e.throwError=r});
-//# sourceMappingURL=MessageUtils-f508120a.js.map
+define(["exports","./utils/UNSAFE_logger","./utils/UNSAFE_soundUtils","./MessageFormattingUtils-c8700622"],function(e,t,n,o){"use strict";const i=(e,n="common")=>t.Logger.warn(`JET Message(${n}): ${e}`);function r(e,t="common"){throw new Error(`JET Message(${t}) - ${e}`)}function s(e,t,n,o){if(!t||!n)return;const i="function"==typeof t?t(e):t;return null!=i?(i in n||r(`${i} is not a valid template name for the message with key=${e.key}`,o),n[i]):void 0}e.getRenderer=s,e.getRendererWithoutIndex=function(e,t,n,o){const i=s(e,t,n,o);return"function"==typeof i?e=>{const t=Object.assign({},e);return"index"in t&&delete t.index,i.call(null,t)}:i},e.isSeverityIconNeeded=function(e){return o.isValidValueForProp(e,"severity")&&"none"!==e},e.playSound=async function(e){if("none"!==e)if("default"!==e)try{await n.playAudioFromURL(e)}catch(t){i(`Failed to play the audio from the url ${e}. ${t}.`)}else try{n.playDefaultNotificationSound()}catch(e){i(`Failed to play the default sound. ${e}.`)}},e.severityBasedStyleClass=function(e,t){return o.isValidValueForProp(e,"severity")&&"none"!==e?`oj-c-message${t}-${e}`:""},e.throwError=r});
+//# sourceMappingURL=MessageUtils-3e15c456.js.map

package/amd/{MessageUtils-f508120a.js.map → MessageUtils-3e15c456.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MessageUtils-f508120a.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>(\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":["MessageLogger","message","type","Logger","warn","throwError","Error","getRenderer","rendererIdentifier","renderers","rendererKey","key","renderer","data","dataCopy","Object","assign","call","severity","isValidValueForProp","async","sound","playAudioFromURL","error","playDefaultNotificationSound","variant"],"mappings":"0IAiBA,MAAMA,EAEE,CAACC,EAAiBC,EAAO,WAAaC,EAAMA,OAACC,KAAK,eAAeF,OAAUD,KA8CnF,SAASI,EAAWJ,EAAiBC,EAAO,UAC1C,MAAM,IAAII,MAAM,eAAeJ,QAAWD,KAW5C,SAASM,EACPN,EACAO,EACAC,EACAP,GAIA,IAAKM,IAAuBC,EAC1B,OAGF,MAAMC,EAC0B,mBAAvBF,EAAoCA,EAAmBP,GAAWO,EAI3E,OAAmB,MAAfE,GAMEA,KAAeD,GACnBJ,EACE,GAAGK,2DAAqET,EAAQU,MAChFT,GAKGO,EAAUC,SAdjB,4CA0BF,SACET,EACAO,EACAC,EACAP,GAEA,MAAMU,EAAWL,EAAYN,EAASO,EAAoBC,EAAWP,GACrE,MAAwB,mBAAbU,EACDC,IACN,MAAMC,EAAQC,OAAAC,OAAA,GAAQH,GAItB,MAHI,UAAWC,UACLA,EAAwB,MAE3BF,EAASK,KAAK,KAAMH,IAGxBF,0BAqBT,SACEM,GAGA,OADwBC,EAAAA,oBAAoBD,EAAU,aACf,SAAbA,eAlI5BE,eAAyBC,GACvB,GAAc,SAAVA,EAMJ,GAAc,YAAVA,EAYJ,UACQC,EAAAA,iBAAiBD,GACvB,MAAOE,GAEPvB,EAAmB,yCAAyCqB,MAAUE,WAftE,IACEC,EAAAA,+BACA,MAAOD,GAGPvB,EAAmB,qCAAqCuB,kCAsG9D,SAAiCL,EAA2BO,GAE1D,OADwBN,EAAAA,oBAAoBD,EAAU,aACf,SAAbA,EAAsB,eAAeO,KAAWP,IAAa"}
+{"version":3,"file":"MessageUtils-3e15c456.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>(\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":["MessageLogger","message","type","Logger","warn","throwError","Error","getRenderer","rendererIdentifier","renderers","rendererKey","key","renderer","data","dataCopy","Object","assign","call","severity","isValidValueForProp","async","sound","playAudioFromURL","error","playDefaultNotificationSound","variant"],"mappings":"0IAiBA,MAAMA,EAEE,CAACC,EAAiBC,EAAO,WAAaC,EAAMA,OAACC,KAAK,eAAeF,OAAUD,KA8CnF,SAASI,EAAWJ,EAAiBC,EAAO,UAC1C,MAAM,IAAII,MAAM,eAAeJ,QAAWD,KAW5C,SAASM,EACPN,EACAO,EACAC,EACAP,GAIA,IAAKM,IAAuBC,EAC1B,OAGF,MAAMC,EAC0B,mBAAvBF,EAAoCA,EAAmBP,GAAWO,EAI3E,OAAmB,MAAfE,GAMEA,KAAeD,GACnBJ,EACE,GAAGK,2DAAqET,EAAQU,MAChFT,GAKGO,EAAUC,SAdjB,4CA0BF,SACET,EACAO,EACAC,EACAP,GAEA,MAAMU,EAAWL,EAAYN,EAASO,EAAoBC,EAAWP,GACrE,MAAwB,mBAAbU,EACDC,IACN,MAAMC,EAAQC,OAAAC,OAAA,GAAQH,GAItB,MAHI,UAAWC,UACLA,EAAwB,MAE3BF,EAASK,KAAK,KAAMH,IAGxBF,0BAqBT,SACEM,GAGA,OADwBC,EAAAA,oBAAoBD,EAAU,aACf,SAAbA,eAlI5BE,eAAyBC,GACvB,GAAc,SAAVA,EAMJ,GAAc,YAAVA,EAYJ,UACQC,EAAAA,iBAAiBD,GACvB,MAAOE,GAEPvB,EAAmB,yCAAyCqB,MAAUE,WAftE,IACEC,EAAAA,+BACA,MAAOD,GAGPvB,EAAmB,qCAAqCuB,kCAsG9D,SAAiCL,EAA2BO,GAE1D,OADwBN,EAAAA,oBAAoBD,EAAU,aACf,SAAbA,EAAsB,eAAeO,KAAWP,IAAa"}

package/amd/{MessagesManager-2c73161c.js → MessagesManager-8a75ac98.js}

@@ -1,2 +1,2 @@
-define(["exports","preact/jsx-runtime","preact","preact/hooks","./PRIVATE_TransitionGroup","./tslib.es6-0026d2ad","./hooks/UNSAFE_useAnimation","./hooks/UNSAFE_useMessagesContext","./useAnimation-979626b0"],function(n,e,i,t,a,r,s,o,l){"use strict";const u={};function c(n){var{animationStates:i=u,initialAnimationStyles:s,onEntering:c,onExiting:d}=n,g=r.__rest(n,["animationStates","initialAnimationStyles","onEntering","onExiting"]);const[v,m]=t.useState("entering"),x=t.useRef(),y=t.useRef(),{controller:S,nodeRef:A}=l.useAnimation(v,{animationStates:i,isAnimatedOnMount:!0,onAnimationEnd:t.useCallback(()=>{var n,e;null===(n=x.current)||void 0===n||n.call(x),x.current=void 0,null===(e=y.current)||void 0===e||e.call(y),y.current=void 0},[])}),{addBusyState:E}=o.useMessagesContext(),k=t.useCallback((n,e,t)=>{var a;x.current&&(x.current=void 0,S.cancel()),null===(a=y.current)||void 0===a||a.call(y),y.current=void 0,null==c||c(n,void 0,t),m("entering"),void 0!==i.entering||void 0!==i["exiting => entering"]?(x.current=e,y.current=null==E?void 0:E("messages animating")):null==e||e()},[i,S,E,c]),b=t.useCallback((n,e,t)=>{var a;x.current&&(x.current=void 0,S.cancel()),null===(a=y.current)||void 0===a||a.call(y),y.current=void 0,null==d||d(n,void 0,t),m("exiting"),void 0!==i.exiting||void 0!==i["entering => exiting"]?(x.current=e,y.current=null==E?void 0:E("messages animating")):null==e||e()},[i,S,E,d]);return t.useLayoutEffect(()=>()=>{var n;return null===(n=y.current)||void 0===n?void 0:n.call(y)},[]),e.jsx("div",Object.assign({ref:A,style:s},{children:e.jsx(a.Transition,Object.assign({},g,{onEntering:k,onExiting:b}))}))}n.MessagesManager=function({data:n,animationStates:r,children:s,initialAnimationStyles:o,onMessageWillRemove:l}){const u=t.useCallback(async(n,e)=>{e&&(null==l||l(e.key,e.index,n))},[l]);return e.jsx(a.TransitionGroup,Object.assign({elementType:i.Fragment},{children:n.map((n,i)=>e.jsx(c,Object.assign({animationStates:r,initialAnimationStyles:o,metadata:{index:i,key:n.key},onExited:u},{children:null==s?void 0:s({index:i,item:n})}),n.key))}))}});
-//# sourceMappingURL=MessagesManager-2c73161c.js.map
+define(["exports","preact/jsx-runtime","preact","preact/hooks","./PRIVATE_TransitionGroup","./tslib.es6-1f40628c","./hooks/UNSAFE_useAnimation","./hooks/UNSAFE_useMessagesContext","./useAnimation-e954368d"],function(n,e,i,t,a,r,s,o,l){"use strict";const u={};function c(n){var{animationStates:i=u,initialAnimationStyles:s,onEntering:c,onExiting:d}=n,g=r.__rest(n,["animationStates","initialAnimationStyles","onEntering","onExiting"]);const[v,m]=t.useState("entering"),x=t.useRef(),y=t.useRef(),{controller:S,nodeRef:A}=l.useAnimation(v,{animationStates:i,isAnimatedOnMount:!0,onAnimationEnd:t.useCallback(()=>{var n,e;null===(n=x.current)||void 0===n||n.call(x),x.current=void 0,null===(e=y.current)||void 0===e||e.call(y),y.current=void 0},[])}),{addBusyState:E}=o.useMessagesContext(),f=t.useCallback((n,e,t)=>{var a;x.current&&(x.current=void 0,S.cancel()),null===(a=y.current)||void 0===a||a.call(y),y.current=void 0,null==c||c(n,void 0,t),m("entering"),void 0!==i.entering||void 0!==i["exiting => entering"]?(x.current=e,y.current=null==E?void 0:E("messages animating")):null==e||e()},[i,S,E,c]),k=t.useCallback((n,e,t)=>{var a;x.current&&(x.current=void 0,S.cancel()),null===(a=y.current)||void 0===a||a.call(y),y.current=void 0,null==d||d(n,void 0,t),m("exiting"),void 0!==i.exiting||void 0!==i["entering => exiting"]?(x.current=e,y.current=null==E?void 0:E("messages animating")):null==e||e()},[i,S,E,d]);return t.useLayoutEffect(()=>()=>{var n;return null===(n=y.current)||void 0===n?void 0:n.call(y)},[]),e.jsx("div",Object.assign({ref:A,style:s},{children:e.jsx(a.Transition,Object.assign({},g,{onEntering:f,onExiting:k}))}))}n.MessagesManager=function({data:n,animationStates:r,children:s,initialAnimationStyles:o,onMessageWillRemove:l}){const u=t.useCallback(async(n,e)=>{e&&(null==l||l(e.key,e.index,n))},[l]);return e.jsx(a.TransitionGroup,Object.assign({elementType:i.Fragment},{children:n.map((n,i)=>e.jsx(c,Object.assign({animationStates:r,initialAnimationStyles:o,metadata:{index:i,key:n.key},onExited:u},{children:null==s?void 0:s({index:i,item:n})}),n.key))}))}});
+//# sourceMappingURL=MessagesManager-8a75ac98.js.map

package/amd/{MessagesManager-2c73161c.js.map → MessagesManager-8a75ac98.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MessagesManager-2c73161c.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":["DEFAULT_ANIMATION_STATES","MessageTransition","_a","animationStates","initialAnimationStyles","onEntering","onExiting","transitionProps","__rest","state","setState","useState","animationCallbackRef","useRef","busyStateResolveRef","controller","nodeRef","useAnimation","isAnimatedOnMount","onAnimationEnd","useCallback","current","call","undefined","_b","addBusyState","useMessagesContext","onEnteringCallback","node","callback","metadata","cancel","onExitingCallback","useLayoutEffect","_jsx","Object","assign","ref","style","children","jsx","Transition","data","onMessageWillRemove","handleExited","async","key","index","TransitionGroup","elementType","Fragment","map","item","onExited"],"mappings":"wPAcA,MAAMA,EAA2B,GAgB3B,SAAUC,EAAkBC,GAAA,IAAAC,gBAChCA,EAAkBH,EAAwBI,uBAC1CA,EAAsBC,WACtBA,EAAUC,UACVA,GAEMJ,EADHK,EAAeC,EAAAA,OAAAN,EALc,uEAOhC,MAAOO,EAAOC,GAAYC,EAAQA,SAAQ,YACpCC,EAAuBC,EAAAA,SACvBC,EAAsBD,EAAAA,UACtBE,WAAEA,EAAUC,QAAEA,GAAYC,EAAAA,aAAaR,EAAO,CAClDN,gBAAAA,EACAe,mBAAmB,EACnBC,eAAgBC,EAAWA,YAAiC,aAE9B,QAA5BlB,EAAAU,EAAqBS,eAAO,IAAAnB,GAAAA,EAAAoB,KAAAV,GAC5BA,EAAqBS,aAAUE,EACJ,QAA3BC,EAAAV,EAAoBO,eAAO,IAAAG,GAAAA,EAAAF,KAAAR,GAC3BA,EAAoBO,aAAUE,GAC7B,OAECE,aAAEA,GAAiBC,EAAAA,qBAEnBC,EAAqBP,EAAWA,YACpC,CAACQ,EAAMC,EAAUC,WAEXlB,EAAqBS,UACvBT,EAAqBS,aAAUE,EAC/BR,EAAWgB,UAIc,QAA3B7B,EAAAY,EAAoBO,eAAO,IAAAnB,GAAAA,EAAAoB,KAAAR,GAC3BA,EAAoBO,aAAUE,EAE9BlB,MAAAA,GAAAA,EAAauB,OAAML,EAAWO,GAE9BpB,EAAS,iBAIyBa,IAAhCpB,EAA0B,eACiBoB,IAA3CpB,EAAgB,wBAKlBS,EAAqBS,QAAUQ,EAC/Bf,EAAoBO,QAAUI,MAAAA,OAAY,EAAZA,EAAe,uBAJ3CI,MAAAA,GAAAA,KAMJ,CAAC1B,EAAiBY,EAAYU,EAAcpB,IAGxC2B,EAAoBZ,EAAWA,YACnC,CAACQ,EAAMC,EAAUC,WAEXlB,EAAqBS,UACvBT,EAAqBS,aAAUE,EAC/BR,EAAWgB,UAIc,QAA3B7B,EAAAY,EAAoBO,eAAO,IAAAnB,GAAAA,EAAAoB,KAAAR,GAC3BA,EAAoBO,aAAUE,EAE9BjB,MAAAA,GAAAA,EAAYsB,OAAML,EAAWO,GAE7BpB,EAAS,gBAIwBa,IAA/BpB,EAAyB,cACkBoB,IAA3CpB,EAAgB,wBAKlBS,EAAqBS,QAAUQ,EAC/Bf,EAAoBO,QAAUI,MAAAA,OAAY,EAAZA,EAAe,uBAJ3CI,MAAAA,GAAAA,KAMJ,CAAC1B,EAAiBY,EAAYU,EAAcnB,IAU9C,OAFA2B,kBAAgB,IAAM,WAAM,OAA+B,QAA/B/B,EAAAY,EAAoBO,eAAW,IAAAnB,OAAA,EAAAA,EAAAoB,KAAAR,IAAE,IAG3DoB,MAAK,MAAAC,OAAAC,OAAA,CAAAC,IAAKrB,EAASsB,MAAOlC,GAAsB,CAAAmC,SAC9CL,EAACM,IAAAC,8BACKlC,EAAe,CACnBF,WAAYsB,EACZrB,UAAW0B,0BC7DH,UAAsEU,KACpFA,EAAIvC,gBACJA,EAAeoC,SACfA,EAAQnC,uBACRA,EAAsBuC,oBACtBA,IAQA,MAAMC,EAAexB,EAAAA,YACnByB,MAAOjB,EAAgBE,KACrBA,IAAYa,MAAAA,GAAAA,EAAsBb,EAASgB,IAAKhB,EAASiB,MAAOnB,KAElE,CAACe,IAGH,OACET,MAACc,EAAAA,gBAAeb,OAAAC,OAAA,CAACa,YAAaC,EAAAA,UAC3B,CAAAX,SAAAG,EAAKS,IAAI,CAACC,EAAML,IACfb,EAACM,IAAAvC,iBACCE,gBAAiBA,EACjBC,uBAAwBA,EAExB0B,SAAU,CAAEiB,MAAAA,EAAOD,IAAKM,EAAKN,KAC7BO,SAAUT,GAAY,CAAAL,SACrBA,MAAAA,OAAA,EAAAA,EAAW,CAAEQ,MAAAA,EAAOK,KAAAA,MAHhBA,EAAKN"}
+{"version":3,"file":"MessagesManager-8a75ac98.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":["DEFAULT_ANIMATION_STATES","MessageTransition","_a","animationStates","initialAnimationStyles","onEntering","onExiting","transitionProps","__rest","state","setState","useState","animationCallbackRef","useRef","busyStateResolveRef","controller","nodeRef","useAnimation","isAnimatedOnMount","onAnimationEnd","useCallback","current","call","undefined","_b","addBusyState","useMessagesContext","onEnteringCallback","node","callback","metadata","cancel","onExitingCallback","useLayoutEffect","_jsx","Object","assign","ref","style","children","jsx","Transition","data","onMessageWillRemove","handleExited","async","key","index","TransitionGroup","elementType","Fragment","map","item","onExited"],"mappings":"wPAcA,MAAMA,EAA2B,GAgB3B,SAAUC,EAAkBC,GAAA,IAAAC,gBAChCA,EAAkBH,EAAwBI,uBAC1CA,EAAsBC,WACtBA,EAAUC,UACVA,GAEMJ,EADHK,EAAeC,EAAAA,OAAAN,EALc,uEAOhC,MAAOO,EAAOC,GAAYC,EAAQA,SAAQ,YACpCC,EAAuBC,EAAAA,SACvBC,EAAsBD,EAAAA,UACtBE,WAAEA,EAAUC,QAAEA,GAAYC,EAAAA,aAAaR,EAAO,CAClDN,gBAAAA,EACAe,mBAAmB,EACnBC,eAAgBC,EAAWA,YAAiC,aAE9B,QAA5BlB,EAAAU,EAAqBS,eAAO,IAAAnB,GAAAA,EAAAoB,KAAAV,GAC5BA,EAAqBS,aAAUE,EACJ,QAA3BC,EAAAV,EAAoBO,eAAO,IAAAG,GAAAA,EAAAF,KAAAR,GAC3BA,EAAoBO,aAAUE,GAC7B,OAECE,aAAEA,GAAiBC,EAAAA,qBAEnBC,EAAqBP,EAAWA,YACpC,CAACQ,EAAMC,EAAUC,WAEXlB,EAAqBS,UACvBT,EAAqBS,aAAUE,EAC/BR,EAAWgB,UAIc,QAA3B7B,EAAAY,EAAoBO,eAAO,IAAAnB,GAAAA,EAAAoB,KAAAR,GAC3BA,EAAoBO,aAAUE,EAE9BlB,MAAAA,GAAAA,EAAauB,OAAML,EAAWO,GAE9BpB,EAAS,iBAIyBa,IAAhCpB,EAA0B,eACiBoB,IAA3CpB,EAAgB,wBAKlBS,EAAqBS,QAAUQ,EAC/Bf,EAAoBO,QAAUI,MAAAA,OAAY,EAAZA,EAAe,uBAJ3CI,MAAAA,GAAAA,KAMJ,CAAC1B,EAAiBY,EAAYU,EAAcpB,IAGxC2B,EAAoBZ,EAAWA,YACnC,CAACQ,EAAMC,EAAUC,WAEXlB,EAAqBS,UACvBT,EAAqBS,aAAUE,EAC/BR,EAAWgB,UAIc,QAA3B7B,EAAAY,EAAoBO,eAAO,IAAAnB,GAAAA,EAAAoB,KAAAR,GAC3BA,EAAoBO,aAAUE,EAE9BjB,MAAAA,GAAAA,EAAYsB,OAAML,EAAWO,GAE7BpB,EAAS,gBAIwBa,IAA/BpB,EAAyB,cACkBoB,IAA3CpB,EAAgB,wBAKlBS,EAAqBS,QAAUQ,EAC/Bf,EAAoBO,QAAUI,MAAAA,OAAY,EAAZA,EAAe,uBAJ3CI,MAAAA,GAAAA,KAMJ,CAAC1B,EAAiBY,EAAYU,EAAcnB,IAU9C,OAFA2B,kBAAgB,IAAM,WAAM,OAA+B,QAA/B/B,EAAAY,EAAoBO,eAAW,IAAAnB,OAAA,EAAAA,EAAAoB,KAAAR,IAAE,IAG3DoB,MAAK,MAAAC,OAAAC,OAAA,CAAAC,IAAKrB,EAASsB,MAAOlC,GAAsB,CAAAmC,SAC9CL,EAACM,IAAAC,8BACKlC,EAAe,CACnBF,WAAYsB,EACZrB,UAAW0B,0BC7DH,UAAsEU,KACpFA,EAAIvC,gBACJA,EAAeoC,SACfA,EAAQnC,uBACRA,EAAsBuC,oBACtBA,IAQA,MAAMC,EAAexB,EAAAA,YACnByB,MAAOjB,EAAgBE,KACrBA,IAAYa,MAAAA,GAAAA,EAAsBb,EAASgB,IAAKhB,EAASiB,MAAOnB,KAElE,CAACe,IAGH,OACET,MAACc,EAAAA,gBAAeb,OAAAC,OAAA,CAACa,YAAaC,EAAAA,UAC3B,CAAAX,SAAAG,EAAKS,IAAI,CAACC,EAAML,IACfb,EAACM,IAAAvC,iBACCE,gBAAiBA,EACjBC,uBAAwBA,EAExB0B,SAAU,CAAEiB,MAAAA,EAAOD,IAAKM,EAAKN,KAC7BO,SAAUT,GAAY,CAAAL,SACrBA,MAAAA,OAAA,EAAAA,EAAW,CAAEQ,MAAAA,EAAOK,KAAAA,MAHhBA,EAAKN"}

package/amd/MeterCircle-f5ca0ad6.js

@@ -0,0 +1,2 @@
+define(["exports","./tslib.es6-1f40628c","preact/jsx-runtime","./hooks/UNSAFE_useUser",'module',"preact/hooks","./utils/UNSAFE_mergeProps","./utils/UNSAFE_classNames","./PRIVATE_Meter","./utils/PRIVATE_meterUtils","./utils/UNSAFE_dvtCommonUtils","./hooks/PRIVATE_useDvtMeterEvents","./hooks/UNSAFE_useTabbableMode","./classNames-cbd28834"],function(t,e,n,s,r,i,a,o,l,c,u,d,h,m){"use strict";function f({color:t,angle:e,radius:s,length:r,section:i="full"}){const a=c.getCenterCoord(i),o=`calc(${100*a.y}% - ((${Math.sin(2*e*Math.PI/360)} * ${s})))`,l=`calc(${100*a.x}%  + ((${Math.cos(2*e*Math.PI/360)} * ${s})))`;return n.jsx("div",{class:g.base,style:{left:l,top:o,width:`calc(${r})`,transform:`translate(0, -1px) rotate(${360-e}deg)`,backgroundColor:t?u.getDvtThresholdColor(t):"var(--oj-c-PRIVATE-DO-NOT-USE-dvt-reference-object-line-color)",borderBottom:"1px solid var(--oj-c-PRIVATE-DO-NOT-USE-dvt-contrast-line-color)"}})}const g={base:"c99nm8"};function x(t,e){if(!t)return{width:0,height:0,innerRadius:0,outerRadius:0};const n=t.children[0],s=n.getBoundingClientRect();return Object.assign({width:Math.round(s.width),height:Math.round(s.height)},function(t,e,n){const s=t.clientWidth,r=t.clientHeight;if("bottom"===n||"top"===n)return{outerRadius:e.width/2,innerRadius:r};if("left"===n||"right"===n)return{outerRadius:e.height/2,innerRadius:s};return{innerRadius:s/2,outerRadius:e.width/2}}(n,s,e))}function b(t,e,n,s){return t*s/(n-e)}function p(t,e,n,s,r,i){return s+(i?1:-1)*b(t-e,e,n,r)}function R(t){return`var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-${t}-size)`}function _(t){return`var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-${t}-track-size)`}function v(t,e){return null!=e?`(${R(t)} * ${e/2})`:`(${R(t)} * 0.5 - ${_(t)})`}function $(t,e){return null!=e?`(${R(t)} * ${1-e} / 2)`:_(t)}function C(t,e){return`${$(t,e)} + ${{sm:"1rem",md:"0.75rem",lg:"0.5rem"}[t]}`}function j(t,e,n,s,r){const{min:i,max:a,startAngle:o,angleExtent:l,size:d,section:h,isRtl:m,innerRadius:f}=t,g=`calc(${$(d,r)})`,x=[],R=e.filter(t=>t.max>i&&t.max<=a).sort((t,e)=>t.max-e.max),_=R.length;for(let t=0;t<_;t++){const e=R[t],r=0===t?i:R[t-1].max,d=0===t?e.max:e.max-R[t-1].max;let v=p(r,i,a,o,l,m),$=b(d,i,a,l);const{startOffset:C,extentOffset:j}=P(f,l,0===t,e.max===a,m),z=c.getClipPath(v+C,$+j,m,h);if(x.push({clipPath:z,color:u.getDvtThresholdColor(e.color),size:g,section:h}),t===_-1&&e.max<a&&n){v+=(m?1:-1)*$,$=b(a-e.max,i,a,l);const{startOffset:t,extentOffset:n}=P(f,l,!1,!0,m);x.push({clipPath:c.getClipPath(v+t,$+n,m,h),color:s,size:g,section:h})}}return x}function z(t,e,n,s,r,i){const{startAngle:a,angleExtent:o,size:l,section:u,isRtl:d}=t;return{section:u,color:e?"all"===n&&i?"var(--oj-c-PRIVATE-DO-NOT-USE-dvt-contrast-line-color)":s:"transparent",clipPath:c.getClipPath(a,o,d,u),size:`calc(${$(l,r)})`}}function E(t,e,n){const{value:s,min:r,max:i,startAngle:a,angleExtent:o,size:l,section:u,isRtl:d}=t,h=(s-r)*o/(i-r),m=Math.min(Math.max(0,e),1),f="left"===u||"right"===u,g="top"===u||"bottom"===u,x=`calc(${$(l,n)} * ${m})`,b=`${R(l)} - ((1 - ${m}) * ${$(l,n)})`,p=`(${b}) / 2`;return{section:u,width:f?`calc(${p})`:`calc(${b})`,height:g?`calc(${p})`:`calc(${b})`,size:x,clipPath:c.getClipPath(a,h,d,u)}}function P(t,e,n,s,r){if(!t)return{startOffset:0,extentOffset:0};const i=360/(2*Math.PI*t);let a=i/2*(r?1:-1),o=-1*i;return n&&e<360&&(a=0,o=-.5*i),s&&e<360&&(o=-.5*i),{startOffset:a,extentOffset:o}}const O={base:"_4cd2cc",interactive:"_1ic8j4n"},A={full:"_1ssnhjb",top:"_15jvfms",bottom:"_1t77xo9",right:"_1vvmhdn",left:"oe6d4i",smtop:"_5ee1il",mdtop:"_19y0w24",lgtop:"wuxd3w",smbottom:"_7sm9xp",mdbottom:"jrr3qc",lgbottom:"_10dqhrx",smleft:"_1gyhepl",mdleft:"sao63o",lgleft:"_1al1pfa",smright:"kasd7y",mdright:"rclzbs",lgright:"o1zyy2",smfull:"_15c095b",mdfull:"_2541my",lgfull:"_13z8dpj",lgHorizontal:"ka2d4l",lgVertical:"_160ko3z",smHorizontal:"_12ba8w7",smVertical:"vokzhn",mdHorizontal:"_1gafg6d",mdVertical:"_1lt5vfd",smFull:"_1s5hk0b",mdFull:"_1kqflp7",lgFull:"_1n6xt7w",centerContent:"gqzryr",thresholds:"_1ir4hw3"},M="_1hik3nu",y={base:"_16qnwqg"},T={base:"_15yrztd",sm:"_1xdzqyp",md:"yshonr",lg:"_10i3uzl"},I={base:"_1izwxjj",full:"ju5x8y",top:"_197f048",right:"_1qvqfzn",left:"rps6ip",bottom:"utqf90"};t.MeterCircle=function(t){var r,{max:o=100,min:u=0,value:g=0,step:b=1,size:R="lg",startAngle:_=90,angleExtent:$=360,isTrackRendered:P=!0,thresholdDisplay:w="all",indicatorSize:k=1}=t,q=e.__rest(t,["max","min","value","step","size","startAngle","angleExtent","isTrackRendered","thresholdDisplay","indicatorSize"]);c.validateRange(u,o,g,b);const{direction:N}=s.useUser(),S="rtl"===N,U=c.getCircleSection(_,$,S),D=i.useRef(x(null,U)),V=i.useRef(null),[F,B]=i.useState(!1);i.useEffect(()=>{(q.onCommit||q.onInput||q.children)&&(D.current=x(V.current,U),B(!0))},[R,q.onCommit,q.onInput,q.children]);const H=d.usePointerEvents(g,t=>{const e=V.current;if(t.target==e)return function(t,e,n,s,r,i,a,o,l){const u=r.current;if(!u)return;const d=c.getCenterCoord(o),{angle:h}=c.convertToPolar(u.width*d.x,u.height*d.y,t.offsetX,t.offsetY),m=c.getPositiveAngle(h);let f;if(l&&i+a>m&&(f=c.getPositiveAngle(h-i)/a*(n-e)),!l){const t=c.getPositiveAngle(i-m);t<=a&&(f=t*(n-e)/a)}return null!=f&&(f=Math.round(f/s)*s),f}(t,u,o,b,D,_,$,U,S)},V,q.onCommit,q.onInput),L=d.useKeyboardEvents(g,u,o,b,q.onCommit,q.onInput),{datatipContent:W,datatipProps:K}=d.useMeterDatatip(g,q.datatip,q.ariaDescribedBy),X=c.getMeterAriaProps(g,u,o,`${g}`,q.accessibleLabel,q.ariaLabelledBy,q.thresholds),Y=a.mergeProps(H,L,K,X),{trackColor:G,indicatorColor:J}=c.getTrackAndIndicatorColor(g,w,q.trackColor,q.indicatorColor,q.thresholds),Q="bottom"===U||"top"===U?"Horizontal":"left"===U||"right"===U?"Vertical":"Full",Z={min:u,max:o,value:g,startAngle:_,angleExtent:$,size:R,section:U,isRtl:S,innerRadius:D.current.innerRadius},tt=q.onCommit||q.onInput,{isTabbable:et}=h.useTabbableMode(),nt=function(t,e){const n=t.current;if(!n)return;const s=c.getCenterCoord(e),r=s.x*n.width,i=s.y*n.height;let a,o,l,u,d,h,m,f;return"top"===e||"bottom"===e||"full"===e?(m=2*n.innerRadius,f="full"===e?2*n.innerRadius:n.innerRadius,d=r-n.innerRadius,h="bottom"===e?0:i-n.innerRadius,l=Math.sqrt(2)*n.innerRadius,u="full"===e?l:n.innerRadius/Math.sqrt(2),a=r-n.innerRadius/Math.sqrt(2),o="bottom"===e?0:i-n.innerRadius/Math.sqrt(2)):(f=2*n.innerRadius,m=n.innerRadius,d="left"===e?r-n.innerRadius:0,h=i-n.innerRadius,u=Math.sqrt(2)*n.innerRadius,l=n.innerRadius/Math.sqrt(2),a="left"===e?r-n.innerRadius/Math.sqrt(2):0,o=i-n.innerRadius/Math.sqrt(2)),{outerBounds:{x:d,y:h,width:m,height:f},innerBounds:{x:a,y:o,width:l,height:u}}}(D,U);return n.jsxs(n.Fragment,{children:[n.jsx("div",Object.assign({class:m.classNames([O.base,tt?O.interactive:""]),tabIndex:et?0:-1,role:"slider"},Y,{children:n.jsxs(l.CircleWrapper,Object.assign({ref:V,class:m.classNames([y.base,q.referenceLines&&q.referenceLines.length>0?A[`${R}${U}`]:"",A[`${R}${Q}`]])},{children:[n.jsx(l.CircleInner,Object.assign({class:m.classNames([T.base,A[U]])},z(Z,P,w,G,q.innerRadius,q.thresholds))),"all"===w&&q.thresholds&&j(Z,q.thresholds,P,G,q.innerRadius).map(t=>n.jsx(l.CircleInner,Object.assign({class:m.classNames([T.base,A[U],A.thresholds])},t))),n.jsx(l.CircleInner,Object.assign({color:J,class:m.classNames([I.base,I[U],A[U]])},E(Z,k,q.innerRadius))),null===(r=q.referenceLines)||void 0===r?void 0:r.map(t=>n.jsx(f,Object.assign({},function(t,e,n){const{min:s,max:r,startAngle:i,angleExtent:a,size:o,isRtl:l}=t;return{radius:v(o,n),length:C(o,n),angle:p(e.value,s,r,i,a,l),color:e.color}}(Z,t,q.innerRadius),{section:U}))),F&&q.children&&nt&&n.jsx("div",Object.assign({class:m.classNames([A.centerContent,M])},{children:q.children(nt)}))]}))})),W]})}});
+//# sourceMappingURL=MeterCircle-f5ca0ad6.js.map

package/amd/{MeterCircle-4dfb5d15.js.map → MeterCircle-f5ca0ad6.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MeterCircle-4dfb5d15.js","sources":["../../src/UNSAFE_MeterCircle/CircularReferenceLine.tsx","../../src/UNSAFE_MeterCircle/CircleMeterUtils.ts","../../src/UNSAFE_MeterCircle/LayoutUtils.ts","../../src/UNSAFE_MeterCircle/MeterCircle.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { getCenterCoord } from '../utils/PRIVATE_meterUtils';\nimport { ColorProps } from '../utils/UNSAFE_interpolations/colors';\nimport { DvtThresholdsColors, getDvtThresholdColor } from '../utils/UNSAFE_dvtCommonUtils';\n\ntype getCenterCoordParamType = Parameters<typeof getCenterCoord>;\n\nexport type CircularReferenceLineProps = {\n  color?: ColorProps['color'] | DvtThresholdsColors;\n  angle: number;\n  radius: string;\n  length: string;\n  section: getCenterCoordParamType[0];\n};\n\nexport function CircularReferenceLine({\n  color,\n  angle,\n  radius,\n  length,\n  section = 'full'\n}: CircularReferenceLineProps) {\n  const centerCoord = getCenterCoord(section);\n  const yOffset = `calc(${centerCoord.y * 100}% - ((${Math.sin(\n    (angle * 2 * Math.PI) / 360\n  )} * ${radius})))`;\n  const xOffset = `calc(${centerCoord.x * 100}%  + ((${Math.cos(\n    (angle * 2 * Math.PI) / 360\n  )} * ${radius})))`;\n\n  return (\n    <div\n      class={referenceLineStyles.base}\n      style={{\n        left: xOffset,\n        top: yOffset,\n        width: `calc(${length})`,\n        transform: `translate(0, -1px) rotate(${360 - angle}deg)`,\n        backgroundColor: color\n          ? getDvtThresholdColor(color)\n          : 'var(--oj-c-PRIVATE-DO-NOT-USE-dvt-reference-object-line-color)',\n        borderBottom: '1px solid var(--oj-c-PRIVATE-DO-NOT-USE-dvt-contrast-line-color)'\n      }}></div>\n  );\n}\n\nconst referenceLineStyles = {\n  base: cssProps`${{\n    height: '2px',\n    position: 'absolute',\n    transformOrigin: '0 50%',\n    backgroundClip: 'padding-box'\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 */\n\nimport type { Ref } from 'preact/hooks';\nimport {\n  getPositiveAngle,\n  convertToPolar,\n  getCenterCoord,\n  Sector\n} from '../utils/PRIVATE_meterUtils';\n\nimport { CenterContext } from './MeterCircle.types';\n\ntype Dimensions = {\n  width: number;\n  height: number;\n  innerRadius: number;\n  outerRadius: number;\n};\n\n/**\n * Returns the true dimensions of the meter circle after initial render. All dimensions are 0 for initial render.\n * @param element The HTML element that wraps the track and indicator div.\n * @param section The section in which the meter circle lies.\n * @returns The dimensions of the meter circle.\n */\nexport function getDimensions(element: HTMLElement | null, section: Sector): Dimensions {\n  if (!element) {\n    return {\n      width: 0,\n      height: 0,\n      innerRadius: 0,\n      outerRadius: 0\n    };\n  }\n\n  const circleTrack = element.children[0] as HTMLElement;\n  const rect = circleTrack.getBoundingClientRect();\n\n  return {\n    width: Math.round(rect.width),\n    height: Math.round(rect.height),\n    ...getInnerAndOuterRadius(circleTrack, rect, section)\n  };\n}\n\n/**\n * Returns the inner and outer radius of the meter circle.\n * @param element The HTML element that wraps the track and indicator div.\n * @param rect The bounding rect of the wrapper HTML element.\n * @param section The section in which the meter circle lies.\n * @returns The inner and outer radius of the meter circle.\n */\nfunction getInnerAndOuterRadius(\n  element: HTMLElement,\n  rect: any,\n  section: string\n): {\n  innerRadius: number;\n  outerRadius: number;\n} {\n  const width = element.clientWidth;\n  const height = element.clientHeight;\n\n  if (section === 'bottom' || section === 'top') {\n    return { outerRadius: rect.width / 2, innerRadius: height };\n  } else if (section === 'left' || section === 'right') {\n    return { outerRadius: rect.height / 2, innerRadius: width };\n  }\n  return { innerRadius: width / 2, outerRadius: rect.width / 2 };\n}\n\n/**\n * Returns the value corresponding to clicked point in the meter circle. Returns undefined if the clicked point is\n * outside the track of the meter circle.\n * @param pageX The pageX of the click event\n * @param pageY The pageY of the click event\n * @param max The max value of the meter circle.\n * @param min The min value of the meter circle.\n * @param step The step of the metercircle.\n * @param dimensionsRef The ref that stores dimensions reference of meter circle.\n * @param startAngle The startAngle of the meter circle.\n * @param angleExtent The angleExtent of the meter circle\n * @returns {number} The value corresponding to clicked point in the meter circle.\n */\nexport function getValue(\n  event: PointerEvent,\n  min: number,\n  max: number,\n  step: number,\n  dimensionsRef: Ref<Dimensions>,\n  startAngle: number,\n  angleExtent: number,\n  section: Sector,\n  isRtl: boolean\n): number | undefined {\n  const dims = dimensionsRef.current;\n  if (!dims) {\n    return undefined;\n  }\n\n  const center = getCenterCoord(section);\n  const { angle } = convertToPolar(\n    dims.width * center.x,\n    dims.height * center.y,\n    event.offsetX,\n    event.offsetY\n  );\n\n  const positiveAngle = getPositiveAngle(angle);\n\n  let val;\n  if (isRtl && startAngle + angleExtent > positiveAngle) {\n    val = (getPositiveAngle(angle - startAngle) / angleExtent) * (max - min);\n  }\n\n  if (!isRtl) {\n    const clockwiseArc = getPositiveAngle(startAngle - positiveAngle);\n    if (clockwiseArc <= angleExtent) {\n      val = (clockwiseArc * (max - min)) / angleExtent;\n    }\n  }\n\n  if (val != undefined) {\n    val = Math.round(val / step) * step;\n  }\n  return val;\n}\n\n/**\n * Returns the fraction of angle extent for given delta.\n * @param delta The delta of metric values.\n * @param min The minimum value of the meter circle.\n * @param max The maximum value of the meter circle.\n * @param angleExtent The angle extent of the meter circle.\n * @returns The angle extent corresponding to delta in metric value.\n */\nexport function getAngleExtentFromDelta(\n  delta: number,\n  min: number,\n  max: number,\n  angleExtent: number\n): number {\n  return (delta * angleExtent) / (max - min);\n}\n\n/**\n * Returns the start angle for given metric value.\n * @param value The metric value\n * @param min The minimum value of the meter circle.\n * @param max The maximum value of the meter circle.\n * @param startAngle The startAngle of the meter circle.\n * @param angleExtent The angleExtent of the meter circle.\n * @param isRtl Whether the reading mode is 'rtl'\n * @returns The startAngle for the metric value.\n */\nexport function getStartAngleForValue(\n  value: number,\n  min: number,\n  max: number,\n  startAngle: number,\n  angleExtent: number,\n  isRtl: boolean\n): number {\n  const extent = getAngleExtentFromDelta(value - min, min, max, angleExtent);\n  return startAngle + (isRtl ? 1 : -1) * extent;\n}\n\n/**\n * Returns the center context of for the meter circle.\n */\nexport function getCenterContext(\n  dimensionsRef: Ref<Dimensions>,\n  section: 'top' | 'bottom' | 'left' | 'right' | 'full'\n): CenterContext | undefined {\n  const dims = dimensionsRef.current;\n\n  if (!dims) {\n    return;\n  }\n\n  const center = getCenterCoord(section);\n  const cx = center.x * dims.width;\n  const cy = center.y * dims.height;\n\n  const isHoriz = section === 'top' || section === 'bottom';\n\n  let innerX, innerY, innerW, innerH;\n  let outerX, outerY, outerW, outerH;\n\n  if (isHoriz || section === 'full') {\n    outerW = 2 * dims.innerRadius;\n    outerH = section === 'full' ? 2 * dims.innerRadius : dims.innerRadius;\n    outerX = cx - dims.innerRadius;\n    outerY = section === 'bottom' ? 0 : cy - dims.innerRadius;\n\n    innerW = Math.sqrt(2) * dims.innerRadius;\n    innerH = section === 'full' ? innerW : dims.innerRadius / Math.sqrt(2);\n    innerX = cx - dims.innerRadius / Math.sqrt(2);\n    innerY = section === 'bottom' ? 0 : cy - dims.innerRadius / Math.sqrt(2);\n  } else {\n    outerH = 2 * dims.innerRadius;\n    outerW = dims.innerRadius;\n    outerX = section === 'left' ? cx - dims.innerRadius : 0;\n    outerY = cy - dims.innerRadius;\n\n    innerH = Math.sqrt(2) * dims.innerRadius;\n    innerW = dims.innerRadius / Math.sqrt(2);\n    innerX = section === 'left' ? cx - dims.innerRadius / Math.sqrt(2) : 0;\n    innerY = cy - dims.innerRadius / Math.sqrt(2);\n  }\n\n  return {\n    outerBounds: {\n      x: outerX,\n      y: outerY,\n      width: outerW,\n      height: outerH\n    },\n    innerBounds: {\n      x: innerX,\n      y: innerY,\n      width: innerW,\n      height: innerH\n    }\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 */\n\nimport { Threshold, MeterSize, ThresholdDisplay } from '../utils/UNSAFE_meterTypes';\nimport { getClipPath, Sector } from '../utils/PRIVATE_meterUtils';\nimport { getAngleExtentFromDelta, getStartAngleForValue } from './CircleMeterUtils';\nimport { MeterProps, CircularRefLine } from './MeterCircle.types';\nimport { ColorProps } from '../utils/UNSAFE_interpolations/colors';\nimport { getDvtThresholdColor } from '../utils/UNSAFE_dvtCommonUtils';\n\nexport type MeterInfo = Required<\n  Pick<MeterProps, 'min' | 'max' | 'value' | 'size' | 'startAngle' | 'angleExtent'>\n> & {\n  section: Sector;\n  isRtl: boolean;\n  innerRadius: number;\n};\n\n/**\n * Returns the css variable corresponding to the default size of the meter circle.\n * @param size The size of the meter circle.\n * @returns The css variable corresponding to the default size of the meter circle.\n */\nfunction getSizeVar(size: MeterSize): string {\n  return `var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-${size}-size)`;\n}\n\n/**\n * Returns the css variable corresponding to the default track size of the meter circle.\n * @param size The size of the meter circle.\n * @returns The css variable corresponding to the default track size of the meter circle.\n */\nfunction getTrackSizeVar(size: MeterSize): string {\n  return `var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-${size}-track-size)`;\n}\n\n/**\n * Returns the calculated css variable string for the inner radius when given size and innerRadius of meter circle.\n * @param size The size of the meter circle.\n * @param innerRadius The inner radius of the meter circle.\n * @returns {string} CSS varible string for the calculated inner radius of the meter circle.\n */\n\nexport function getInnerRadius(size: MeterSize, innerRadius?: number): string {\n  if (innerRadius != undefined) {\n    return `(${getSizeVar(size)} * ${innerRadius / 2})`;\n  }\n  return `(${getSizeVar(size)} * 0.5 - ${getTrackSizeVar(size)})`;\n}\n\n/**\n * Returns the calculated css variable string for meter circle track for a given size and innerRadius of meter circle.\n * @param size The size of the meter circle.\n * @param innerRadius The inner radius of the meter circle.\n * @returns {string} CSS variable for the calculated track size of the meter circle.\n */\nexport function getTrackSize(size: MeterSize, innerRadius?: number): string {\n  if (innerRadius != undefined) {\n    return `(${getSizeVar(size)} * ${1 - innerRadius} / 2)`;\n  }\n  return getTrackSizeVar(size);\n}\n\n/**\n * Returns the calculated length of reference line for given size and inner radius of meter circle.\n * The length of reference line runs from the inner radius to slight outside the outer radius.\n * The length outside the outer radius depends on size of the meter circle.\n * @param size The size of the meter circle.\n * @param innerRadius The inner radius of the meter circle.\n * @returns The calculated CSS var for the length of reference line.\n */\nexport function getRefLineLength(size: MeterSize, innerRadius?: number): string {\n  const outerExtent = { sm: '1rem', md: '0.75rem', lg: '0.5rem' };\n  return `${getTrackSize(size, innerRadius)} + ${outerExtent[size]}`;\n}\n\n/**\n * Returns the array of calculated props for InnerCircle representing each threshold.\n * @param meterInfo MeterInfo object containing info about given meter circle.\n * @param thresholds thresholds array of the meter circle.\n * @param isTrackRendered Whether track is rendered.\n * @param trackColor The track color of the meter circle.\n * @param innerRadius The inner radius of the meter circle.\n * @returns Array of calculated props object for InnerCircle representing each threshold.\n */\nexport function getThresholdsProps(\n  meterInfo: MeterInfo,\n  thresholds: Threshold[],\n  isTrackRendered: boolean,\n  trackColor?: ColorProps['color'],\n  innerRadius?: number\n): Array<{\n  clipPath: string;\n  color?: ColorProps['color'];\n  section: Sector;\n  size: string;\n}> {\n  const {\n    min,\n    max,\n    startAngle,\n    angleExtent,\n    size,\n    section,\n    isRtl,\n    innerRadius: innerDim\n  } = meterInfo;\n  const trackSize = `calc(${getTrackSize(size, innerRadius)})`;\n  const thresholdProps = [];\n  const validThresholds = thresholds\n    .filter((threshold: Threshold) => threshold.max > min && threshold.max <= max)\n    .sort((a, b) => a.max - b.max);\n  const numOfThreshold = validThresholds.length;\n  for (let i = 0; i < numOfThreshold; i++) {\n    const threshold = validThresholds[i];\n    const startValue = i === 0 ? min : validThresholds[i - 1].max;\n    const diff = i === 0 ? threshold.max : threshold.max - validThresholds[i - 1].max;\n\n    let thresholdStart = getStartAngleForValue(\n      startValue,\n      min,\n      max,\n      startAngle,\n      angleExtent,\n      isRtl\n    );\n    let thresholdExtent = getAngleExtentFromDelta(diff, min, max, angleExtent);\n\n    const { startOffset, extentOffset } = getThresholdsBuffer(\n      innerDim,\n      angleExtent,\n      i === 0,\n      threshold.max === max,\n      isRtl\n    );\n    const clipPath = getClipPath(\n      thresholdStart + startOffset,\n      thresholdExtent + extentOffset,\n      isRtl,\n      section\n    );\n\n    thresholdProps.push({\n      clipPath,\n      color: getDvtThresholdColor(threshold.color),\n      size: trackSize,\n      section\n    });\n\n    if (i === numOfThreshold - 1 && threshold.max < max && isTrackRendered) {\n      thresholdStart = thresholdStart + (isRtl ? 1 : -1) * thresholdExtent;\n      thresholdExtent = getAngleExtentFromDelta(max - threshold.max, min, max, angleExtent);\n      const { startOffset, extentOffset } = getThresholdsBuffer(\n        innerDim,\n        angleExtent,\n        false,\n        true,\n        isRtl\n      );\n      thresholdProps.push({\n        clipPath: getClipPath(\n          thresholdStart + startOffset,\n          thresholdExtent + extentOffset,\n          isRtl,\n          section\n        ),\n        color: trackColor,\n        size: trackSize,\n        section\n      });\n    }\n  }\n  return thresholdProps;\n}\n\n/**\n * Returns the calculated props for CircularReferenceLine.\n * @param meterInfo MeterInfo object containing info about the meter circle.\n * @param refLine The CircularRefLine object\n * @param innerRadius The innerRadius of the meter circle.\n * @returns An bject with calculated props for CircularReferenceLine.\n */\nexport function getReferenceLinesProps(\n  meterInfo: MeterInfo,\n  refLine: CircularRefLine,\n  innerRadius?: number\n): {\n  radius: string;\n  length: string;\n  angle: number;\n  color?: ColorProps['color'];\n} {\n  const { min, max, startAngle, angleExtent, size, isRtl } = meterInfo;\n  return {\n    radius: getInnerRadius(size, innerRadius),\n    length: getRefLineLength(size, innerRadius),\n    angle: getStartAngleForValue(refLine.value, min, max, startAngle, angleExtent, isRtl),\n    color: refLine.color\n  };\n}\n\n/**\n * Returns the calculated props for InnerCircle representing the track.\n * @param meterInfo MeterInfo object containing info about the meter circle.\n * @param trackColor The color of the track.\n * @param istrackRendered Whether the track is rendered.\n * @param thresholdDisplay Specifies whether the current threshold is displayed in the track, on the indicator, or if all thresholds are displayed in the track.\n * @param innerRadius The innerRadius of the meter circle.\n * @param thresholds thresholds array of the meter circle.\n * @returns An object with calculated props for InnerCircle that represents the track.\n */\nexport function getTrackProps(\n  meterInfo: MeterInfo,\n  isTrackRendered: boolean,\n  thresholdDisplay: ThresholdDisplay,\n  trackColor?: ColorProps['color'],\n  innerRadius?: number,\n  thresholds?: Threshold[]\n): {\n  section: Sector;\n  color?: ColorProps['color'];\n  clipPath: string;\n  size: string;\n} {\n  const { startAngle, angleExtent, size, section, isRtl } = meterInfo;\n  const color = !isTrackRendered\n    ? 'transparent'\n    : thresholdDisplay === 'all' && thresholds\n    ? 'var(--oj-c-PRIVATE-DO-NOT-USE-dvt-contrast-line-color)'\n    : trackColor;\n  return {\n    section,\n    color,\n    clipPath: getClipPath(startAngle, angleExtent, isRtl, section),\n    size: `calc(${getTrackSize(size, innerRadius)})`\n  };\n}\n\n/**\n * Returns the calculated props for InnerCircle representing the indicator.\n * @param meterInfo MeterInfo object containing info about the meter circle.\n * @param indicatorSize Relative thickness of the indicator to the track.\n * @param innerRadius The innerRadius of the meter circle.\n * @returns An object with calculated props for InnerCircle that represents the indicator.\n */\nexport function getIndicatorProps(\n  meterInfo: MeterInfo,\n  indicatorSize: number,\n  innerRadius?: number\n): {\n  section: Sector;\n  width: string;\n  height: string;\n  size: string;\n  clipPath: string;\n} {\n  const { value, min, max, startAngle, angleExtent, size, section, isRtl } = meterInfo;\n  const valueExtent = ((value - min) * angleExtent) / (max - min);\n  const validIndicatorSize = Math.min(Math.max(0, indicatorSize), 1);\n  const isHoriz = section === 'left' || section === 'right';\n  const isVert = section === 'top' || section === 'bottom';\n  const valueTrackSize = `calc(${getTrackSize(size, innerRadius)} * ${validIndicatorSize})`;\n  const diameter = `${getSizeVar(size)} - ((1 - ${validIndicatorSize}) * ${getTrackSize(\n    size,\n    innerRadius\n  )})`;\n  const radius = `(${diameter}) / 2`;\n  return {\n    section,\n    width: isHoriz ? `calc(${radius})` : `calc(${diameter})`,\n    height: isVert ? `calc(${radius})` : `calc(${diameter})`,\n    size: valueTrackSize,\n    clipPath: getClipPath(startAngle, valueExtent, isRtl, section)\n  };\n}\n\n/**\n * Returns the threshold offsets to create the whitespace between the thresholds.\n * @param innerRadius The innerRadius of the meter circle.\n * @param angleExtent The angleExtent of the meter circle.\n * @param firstThreshold Whether the current threshold is the first threshold.\n * @param lastThreshold  Whether the current threshold is the last threshold.\n * @param isRtl Whether the document reading mode is 'rtl'\n * @returns The offsets (startOffset and extentOffset) to add to calculated threshold startAngle and threhsold extent.\n */\nfunction getThresholdsBuffer(\n  innerRadius: number,\n  angleExtent: number,\n  firstThreshold: boolean,\n  lastThreshold: boolean,\n  isRtl: boolean\n): {\n  startOffset: number;\n  extentOffset: number;\n} {\n  if (!innerRadius) {\n    return { startOffset: 0, extentOffset: 0 };\n  }\n  const offset = 360 / (2 * Math.PI * innerRadius);\n  let startOffset = (offset / 2) * (isRtl ? 1 : -1);\n  let extentOffset = -1 * offset;\n\n  if (firstThreshold && angleExtent < 360) {\n    startOffset = 0;\n    extentOffset = -0.5 * offset;\n  }\n\n  if (lastThreshold && angleExtent < 360) {\n    extentOffset = -0.5 * offset;\n  }\n  return { startOffset, extentOffset };\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 */\n\nimport { useUser } from '../hooks/UNSAFE_useUser';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { useEffect, useRef, useState } from 'preact/hooks';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { CircleWrapper, CircleInner } from '../PRIVATE_Meter';\nimport { CircularReferenceLine } from './CircularReferenceLine';\n\nimport {\n  validateRange,\n  getTrackAndIndicatorColor,\n  getMeterAriaProps,\n  getCircleSection\n} from '../utils/PRIVATE_meterUtils';\n\nimport { getDimensions, getValue, getCenterContext } from './CircleMeterUtils';\n\nimport {\n  getIndicatorProps,\n  getTrackProps,\n  getThresholdsProps,\n  getReferenceLinesProps,\n  MeterInfo\n} from './LayoutUtils';\n\nimport {\n  usePointerEvents,\n  useKeyboardEvents,\n  useMeterDatatip\n} from '../hooks/PRIVATE_useDvtMeterEvents';\n\nimport { MeterProps, CircularRefLine } from './MeterCircle.types';\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\n\n/**\n * A Meter circle displays information graphically in a circular bar, highlighting a specific metric value's progress in relation to its min, max, or thresholds.\n */\nexport function MeterCircle({\n  max = 100,\n  min = 0,\n  value = 0,\n  step = 1,\n  size = 'lg',\n  startAngle = 90,\n  angleExtent = 360,\n  isTrackRendered = true,\n  thresholdDisplay = 'all',\n  indicatorSize = 1,\n  ...props\n}: MeterProps) {\n  validateRange(min, max, value, step);\n\n  const { direction } = useUser();\n  const isRtl = direction === 'rtl';\n  const section = getCircleSection(startAngle, angleExtent, isRtl);\n  const dimensionsRef = useRef(getDimensions(null, section));\n  const circleWrapperRef = useRef<HTMLDivElement>(null);\n  const [isDimsReady, setDimsReady] = useState<boolean>(false);\n\n  useEffect(() => {\n    if (props.onCommit || props.onInput || props.children) {\n      dimensionsRef.current = getDimensions(circleWrapperRef.current, section);\n      setDimsReady(true);\n    }\n  }, [size, props.onCommit, props.onInput, props.children]);\n\n  const getValueFromEvent = (event: PointerEvent) => {\n    const circleContainer = circleWrapperRef.current;\n    if (event.target == circleContainer) {\n      return getValue(\n        event,\n        min,\n        max,\n        step,\n        dimensionsRef,\n        startAngle,\n        angleExtent,\n        section,\n        isRtl\n      );\n    }\n    return;\n  };\n\n  const pointerEventsProps = usePointerEvents(\n    value,\n    getValueFromEvent,\n    circleWrapperRef,\n    props.onCommit,\n    props.onInput\n  );\n\n  const keyboardEventsProps = useKeyboardEvents(\n    value,\n    min,\n    max,\n    step,\n    props.onCommit,\n    props.onInput\n  );\n\n  const { datatipContent, datatipProps } = useMeterDatatip(\n    value,\n    props.datatip,\n    props.ariaDescribedBy\n  );\n\n  const ariaProps = getMeterAriaProps(\n    value,\n    min,\n    max,\n    `${value}`,\n    props.accessibleLabel,\n    props.ariaLabelledBy,\n    props.thresholds\n  );\n  const mergedProps = mergeProps(pointerEventsProps, keyboardEventsProps, datatipProps, ariaProps);\n\n  const { trackColor, indicatorColor } = getTrackAndIndicatorColor(\n    value,\n    thresholdDisplay,\n    props.trackColor,\n    props.indicatorColor,\n    props.thresholds\n  );\n\n  const orientation =\n    section === 'bottom' || section === 'top'\n      ? 'Horizontal'\n      : section === 'left' || section === 'right'\n      ? 'Vertical'\n      : 'Full';\n\n  const meterInfo = {\n    min,\n    max,\n    value,\n    startAngle,\n    angleExtent,\n    size,\n    section,\n    isRtl,\n    innerRadius: dimensionsRef.current.innerRadius\n  } as MeterInfo;\n  const isInteractive = props.onCommit || props.onInput;\n  const { isTabbable } = useTabbableMode();\n  const centerContext = getCenterContext(dimensionsRef, section);\n  return (\n    <>\n      <div\n        class={classNames([component.base, isInteractive ? component.interactive : ''])}\n        tabIndex={!isTabbable ? -1 : 0}\n        role=\"slider\"\n        {...mergedProps}>\n        <CircleWrapper\n          ref={circleWrapperRef}\n          class={classNames([\n            circleWrapper.base,\n            props.referenceLines && props.referenceLines.length > 0\n              ? styles[`${size}${section}`]\n              : '',\n            styles[`${size}${orientation}`]\n          ])}>\n          <CircleInner\n            class={classNames([circleTrack.base, styles[section]])}\n            {...getTrackProps(\n              meterInfo,\n              isTrackRendered,\n              thresholdDisplay,\n              trackColor,\n              props.innerRadius,\n              props.thresholds\n            )}\n          />\n          {thresholdDisplay === 'all' &&\n            props.thresholds &&\n            getThresholdsProps(\n              meterInfo,\n              props.thresholds,\n              isTrackRendered,\n              trackColor,\n              props.innerRadius\n            ).map((threshold) => {\n              return (\n                <CircleInner\n                  class={classNames([circleTrack.base, styles[section], styles.thresholds])}\n                  {...threshold}\n                />\n              );\n            })}\n\n          <CircleInner\n            color={indicatorColor}\n            class={classNames([circleValue.base, circleValue[section], styles[section]])}\n            {...getIndicatorProps(meterInfo, indicatorSize, props.innerRadius)}\n          />\n          {props.referenceLines?.map((refLine: CircularRefLine) => {\n            return (\n              <CircularReferenceLine\n                {...getReferenceLinesProps(meterInfo, refLine, props.innerRadius)}\n                section={section}\n              />\n            );\n          })}\n          {isDimsReady && props.children && centerContext && (\n            <div class={classNames([styles.centerContent, childrenStyles])}>\n              {props.children(centerContext)}\n            </div>\n          )}\n        </CircleWrapper>\n      </div>\n      {datatipContent}\n    </>\n  );\n}\n\nconst component = {\n  base: cssProps`${{\n    display: 'inline-block',\n    pointerEvents: 'none'\n  }}`,\n  interactive: cssProps`${{\n    touchAction: 'none',\n    '&:focus-visible': {\n      outlineColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color)',\n      outlineStyle: 'dotted',\n      outlineWidth: '1px'\n    }\n  }}`\n};\n\nconst styles = {\n  full: cssProps`${{\n    borderRadius: '50%'\n  }}`,\n  top: cssProps`${{\n    borderRadius: '50% 50% 0 0 / 100% 100% 0 0',\n    borderBottom: '0'\n  }}`,\n  bottom: cssProps`${{\n    borderRadius: '0% 0% 50% 50% / 0% 0% 100% 100%',\n    borderTop: '0'\n  }}`,\n  right: cssProps`${{\n    borderRadius: '0 100% 100% 0 / 0% 50% 50% 0%',\n    borderLeft: '0'\n  }}`,\n  left: cssProps`${{\n    borderRadius: '100% 0 0 100% / 50% 0 0 50%',\n    borderRight: '0'\n  }}`,\n  smtop: cssProps`${{\n    margin: '1rem 1rem 0 1rem'\n  }}`,\n  mdtop: cssProps`${{\n    margin: '0.75rem 0.75rem 0 0.75rem'\n  }}`,\n  lgtop: cssProps`${{\n    margin: '0.5rem 0.5rem 0 0.5rem'\n  }}`,\n  smbottom: cssProps`${{\n    margin: '0 1rem 1rem 1rem'\n  }}`,\n  mdbottom: cssProps`${{\n    margin: '0 0.75rem 0.75rem 0.75rem'\n  }}`,\n  lgbottom: cssProps`${{\n    margin: '0 0.5rem 0.5rem 0.5rem'\n  }}`,\n  smleft: cssProps`${{\n    margin: '1rem 0 1rem 1rem'\n  }}`,\n  mdleft: cssProps`${{\n    margin: '0.75rem 0 0.75rem 0.75rem'\n  }}`,\n  lgleft: cssProps`${{\n    margin: '0.5rem 0 0.5rem 0.5rem'\n  }}`,\n  smright: cssProps`${{\n    margin: '1rem 1rem 1rem 0'\n  }}`,\n  mdright: cssProps`${{\n    margin: '0.75rem 0.75rem 0.75rem 0'\n  }}`,\n  lgright: cssProps`${{\n    margin: '0.5rem 0.5rem 0.5rem 0'\n  }}`,\n  smfull: cssProps`${{\n    margin: '1rem'\n  }}`,\n  mdfull: cssProps`${{\n    margin: '0.75rem'\n  }}`,\n  lgfull: cssProps`${{\n    margin: '0.5rem'\n  }}`,\n  lgHorizontal: cssProps`${{\n    height: 'calc(var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-lg-size) / 2 )',\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-lg-size)'\n  }}`,\n  lgVertical: cssProps`${{\n    width: 'calc(var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-lg-size) / 2 )',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-lg-size)'\n  }}`,\n  smHorizontal: cssProps`${{\n    height: 'calc(var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-sm-size) / 2 )',\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-sm-size)'\n  }}`,\n  smVertical: cssProps`${{\n    width: 'calc(var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-sm-size) / 2 )',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-sm-size)'\n  }}`,\n  mdHorizontal: cssProps`${{\n    height: 'calc(var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-md-size) / 2 )',\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-md-size)'\n  }}`,\n  mdVertical: cssProps`${{\n    width: 'calc(var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-md-size) / 2 )',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-md-size)'\n  }}`,\n  smFull: cssProps`${{\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-sm-size)',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-sm-size)'\n  }}`,\n  mdFull: cssProps`${{\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-md-size)',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-md-size)'\n  }}`,\n  lgFull: cssProps`${{\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-lg-size)',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-lg-size)'\n  }}`,\n  centerContent: cssProps`${{\n    pointerEvents: 'none',\n    width: '100%',\n    height: '100%',\n    lineHeight: 'initial'\n  }}`,\n  thresholds: cssProps`${{\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-threshold-color)'\n  }}`\n};\nconst childrenStyles = cssProps`${{\n  /* @ts-ignore */\n  '& > *': {\n    marginTop: '0 !important',\n    marginBottom: '0 !important',\n    marginLeft: '0 !important',\n    marginRight: '0 !important'\n  }\n}}`;\n\nconst circleWrapper = {\n  base: cssProps`${{\n    position: 'relative',\n    boxSizing: 'border-box',\n    cursor: 'pointer',\n    pointerEvents: 'auto'\n  }}`\n};\n\nconst circleTrack = {\n  base: cssProps`${{\n    width: '100%',\n    height: '100%',\n    position: 'absolute',\n    borderStyle: 'solid',\n    boxSizing: 'border-box',\n    pointerEvents: 'none',\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-track-bg-color)'\n  }}`,\n  sm: cssProps`${{\n    borderWidth: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-sm-track-size)'\n  }}`,\n  md: cssProps`${{\n    borderWidth: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-md-track-size)'\n  }}`,\n  lg: cssProps`${{\n    borderWidth: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-lg-track-size)'\n  }}`\n};\n\nconst circleValue = {\n  base: cssProps`${{\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-value-bg-color)',\n    borderStyle: 'solid',\n    boxSizing: 'border-box',\n    position: 'absolute',\n    pointerEvents: 'none'\n  }}`,\n  full: cssProps`${{\n    borderRadius: '50%',\n    top: '50%',\n    left: '50%',\n    translate: '-50% -50%'\n  }}`,\n  top: cssProps`${{\n    top: '100%',\n    left: '50%',\n    translate: '-50% -100%'\n  }}`,\n  right: cssProps`${{\n    top: '50%',\n    translate: '0 -50%'\n  }}`,\n  left: cssProps`${{\n    left: '100%',\n    top: '50%',\n    translate: '-100% -50%'\n  }}`,\n  bottom: cssProps`${{\n    left: '50%',\n    translate: '-50% 0'\n  }}`\n};\n"],"names":["CircularReferenceLine","color","angle","radius","length","section","centerCoord","getCenterCoord","yOffset","y","Math","sin","PI","xOffset","x","cos","left","top","transform","backgroundColor","getDvtThresholdColor","borderBottom","referenceLineStyles","getDimensions","element","width","height","innerRadius","outerRadius","circleTrack","children","rect","getBoundingClientRect","Object","assign","round","clientWidth","clientHeight","getInnerAndOuterRadius","getAngleExtentFromDelta","delta","min","max","angleExtent","getStartAngleForValue","value","startAngle","isRtl","getSizeVar","size","getTrackSizeVar","getInnerRadius","undefined","getTrackSize","getRefLineLength","sm","md","lg","getThresholdsProps","meterInfo","thresholds","isTrackRendered","trackColor","innerDim","trackSize","thresholdProps","validThresholds","filter","threshold","sort","a","b","numOfThreshold","i","startValue","diff","thresholdStart","thresholdExtent","startOffset","extentOffset","getThresholdsBuffer","clipPath","getClipPath","push","getTrackProps","thresholdDisplay","getIndicatorProps","indicatorSize","valueExtent","validIndicatorSize","isHoriz","isVert","valueTrackSize","diameter","firstThreshold","lastThreshold","offset","component","styles","childrenStyles","circleWrapper","circleValue","_a","direction","useUser","circleWrapperRef","useRef","props","onCommit","onInput","pointerEventsProps","usePointerEvents","event","circleContainer","current","target","step","dimensionsRef","dims","center","convertToPolar","offsetX","offsetY","positiveAngle","getPositiveAngle","val","clockwiseArc","datatipContent","datatipProps","useMeterDatatip","datatip","ariaDescribedBy","mergedProps","mergeProps","keyboardEventsProps","ariaProps","isTabbable","useTabbableMode","cx","cy","innerX","innerY","innerW","innerH","outerX","outerY","outerW","outerH","sqrt","outerBounds","innerBounds","base","orientation","_jsx","jsx","CircleInner","class","classNames","refLine","isDimsReady","centerContext","centerContent"],"mappings":"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"}
+{"version":3,"file":"MeterCircle-f5ca0ad6.js","sources":["../../src/UNSAFE_MeterCircle/CircularReferenceLine.tsx","../../src/UNSAFE_MeterCircle/CircleMeterUtils.ts","../../src/UNSAFE_MeterCircle/LayoutUtils.ts","../../src/UNSAFE_MeterCircle/MeterCircle.tsx"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { getCenterCoord } from '../utils/PRIVATE_meterUtils';\nimport { ColorProps } from '../utils/UNSAFE_interpolations/colors';\nimport { DvtThresholdsColors, getDvtThresholdColor } from '../utils/UNSAFE_dvtCommonUtils';\n\ntype getCenterCoordParamType = Parameters<typeof getCenterCoord>;\n\nexport type CircularReferenceLineProps = {\n  color?: ColorProps['color'] | DvtThresholdsColors;\n  angle: number;\n  radius: string;\n  length: string;\n  section: getCenterCoordParamType[0];\n};\n\nexport function CircularReferenceLine({\n  color,\n  angle,\n  radius,\n  length,\n  section = 'full'\n}: CircularReferenceLineProps) {\n  const centerCoord = getCenterCoord(section);\n  const yOffset = `calc(${centerCoord.y * 100}% - ((${Math.sin(\n    (angle * 2 * Math.PI) / 360\n  )} * ${radius})))`;\n  const xOffset = `calc(${centerCoord.x * 100}%  + ((${Math.cos(\n    (angle * 2 * Math.PI) / 360\n  )} * ${radius})))`;\n\n  return (\n    <div\n      class={referenceLineStyles.base}\n      style={{\n        left: xOffset,\n        top: yOffset,\n        width: `calc(${length})`,\n        transform: `translate(0, -1px) rotate(${360 - angle}deg)`,\n        backgroundColor: color\n          ? getDvtThresholdColor(color)\n          : 'var(--oj-c-PRIVATE-DO-NOT-USE-dvt-reference-object-line-color)',\n        borderBottom: '1px solid var(--oj-c-PRIVATE-DO-NOT-USE-dvt-contrast-line-color)'\n      }}></div>\n  );\n}\n\nconst referenceLineStyles = {\n  base: cssProps`${{\n    height: '2px',\n    position: 'absolute',\n    transformOrigin: '0 50%',\n    backgroundClip: 'padding-box'\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 */\n\nimport type { Ref } from 'preact/hooks';\nimport {\n  getPositiveAngle,\n  convertToPolar,\n  getCenterCoord,\n  Sector\n} from '../utils/PRIVATE_meterUtils';\n\nimport { CenterContext } from './MeterCircle.types';\n\ntype Dimensions = {\n  width: number;\n  height: number;\n  innerRadius: number;\n  outerRadius: number;\n};\n\n/**\n * Returns the true dimensions of the meter circle after initial render. All dimensions are 0 for initial render.\n * @param element The HTML element that wraps the track and indicator div.\n * @param section The section in which the meter circle lies.\n * @returns The dimensions of the meter circle.\n */\nexport function getDimensions(element: HTMLElement | null, section: Sector): Dimensions {\n  if (!element) {\n    return {\n      width: 0,\n      height: 0,\n      innerRadius: 0,\n      outerRadius: 0\n    };\n  }\n\n  const circleTrack = element.children[0] as HTMLElement;\n  const rect = circleTrack.getBoundingClientRect();\n\n  return {\n    width: Math.round(rect.width),\n    height: Math.round(rect.height),\n    ...getInnerAndOuterRadius(circleTrack, rect, section)\n  };\n}\n\n/**\n * Returns the inner and outer radius of the meter circle.\n * @param element The HTML element that wraps the track and indicator div.\n * @param rect The bounding rect of the wrapper HTML element.\n * @param section The section in which the meter circle lies.\n * @returns The inner and outer radius of the meter circle.\n */\nfunction getInnerAndOuterRadius(\n  element: HTMLElement,\n  rect: any,\n  section: string\n): {\n  innerRadius: number;\n  outerRadius: number;\n} {\n  const width = element.clientWidth;\n  const height = element.clientHeight;\n\n  if (section === 'bottom' || section === 'top') {\n    return { outerRadius: rect.width / 2, innerRadius: height };\n  } else if (section === 'left' || section === 'right') {\n    return { outerRadius: rect.height / 2, innerRadius: width };\n  }\n  return { innerRadius: width / 2, outerRadius: rect.width / 2 };\n}\n\n/**\n * Returns the value corresponding to clicked point in the meter circle. Returns undefined if the clicked point is\n * outside the track of the meter circle.\n * @param pageX The pageX of the click event\n * @param pageY The pageY of the click event\n * @param max The max value of the meter circle.\n * @param min The min value of the meter circle.\n * @param step The step of the metercircle.\n * @param dimensionsRef The ref that stores dimensions reference of meter circle.\n * @param startAngle The startAngle of the meter circle.\n * @param angleExtent The angleExtent of the meter circle\n * @returns {number} The value corresponding to clicked point in the meter circle.\n */\nexport function getValue(\n  event: PointerEvent,\n  min: number,\n  max: number,\n  step: number,\n  dimensionsRef: Ref<Dimensions>,\n  startAngle: number,\n  angleExtent: number,\n  section: Sector,\n  isRtl: boolean\n): number | undefined {\n  const dims = dimensionsRef.current;\n  if (!dims) {\n    return undefined;\n  }\n\n  const center = getCenterCoord(section);\n  const { angle } = convertToPolar(\n    dims.width * center.x,\n    dims.height * center.y,\n    event.offsetX,\n    event.offsetY\n  );\n\n  const positiveAngle = getPositiveAngle(angle);\n\n  let val;\n  if (isRtl && startAngle + angleExtent > positiveAngle) {\n    val = (getPositiveAngle(angle - startAngle) / angleExtent) * (max - min);\n  }\n\n  if (!isRtl) {\n    const clockwiseArc = getPositiveAngle(startAngle - positiveAngle);\n    if (clockwiseArc <= angleExtent) {\n      val = (clockwiseArc * (max - min)) / angleExtent;\n    }\n  }\n\n  if (val != undefined) {\n    val = Math.round(val / step) * step;\n  }\n  return val;\n}\n\n/**\n * Returns the fraction of angle extent for given delta.\n * @param delta The delta of metric values.\n * @param min The minimum value of the meter circle.\n * @param max The maximum value of the meter circle.\n * @param angleExtent The angle extent of the meter circle.\n * @returns The angle extent corresponding to delta in metric value.\n */\nexport function getAngleExtentFromDelta(\n  delta: number,\n  min: number,\n  max: number,\n  angleExtent: number\n): number {\n  return (delta * angleExtent) / (max - min);\n}\n\n/**\n * Returns the start angle for given metric value.\n * @param value The metric value\n * @param min The minimum value of the meter circle.\n * @param max The maximum value of the meter circle.\n * @param startAngle The startAngle of the meter circle.\n * @param angleExtent The angleExtent of the meter circle.\n * @param isRtl Whether the reading mode is 'rtl'\n * @returns The startAngle for the metric value.\n */\nexport function getStartAngleForValue(\n  value: number,\n  min: number,\n  max: number,\n  startAngle: number,\n  angleExtent: number,\n  isRtl: boolean\n): number {\n  const extent = getAngleExtentFromDelta(value - min, min, max, angleExtent);\n  return startAngle + (isRtl ? 1 : -1) * extent;\n}\n\n/**\n * Returns the center context of for the meter circle.\n */\nexport function getCenterContext(\n  dimensionsRef: Ref<Dimensions>,\n  section: 'top' | 'bottom' | 'left' | 'right' | 'full'\n): CenterContext | undefined {\n  const dims = dimensionsRef.current;\n\n  if (!dims) {\n    return;\n  }\n\n  const center = getCenterCoord(section);\n  const cx = center.x * dims.width;\n  const cy = center.y * dims.height;\n\n  const isHoriz = section === 'top' || section === 'bottom';\n\n  let innerX, innerY, innerW, innerH;\n  let outerX, outerY, outerW, outerH;\n\n  if (isHoriz || section === 'full') {\n    outerW = 2 * dims.innerRadius;\n    outerH = section === 'full' ? 2 * dims.innerRadius : dims.innerRadius;\n    outerX = cx - dims.innerRadius;\n    outerY = section === 'bottom' ? 0 : cy - dims.innerRadius;\n\n    innerW = Math.sqrt(2) * dims.innerRadius;\n    innerH = section === 'full' ? innerW : dims.innerRadius / Math.sqrt(2);\n    innerX = cx - dims.innerRadius / Math.sqrt(2);\n    innerY = section === 'bottom' ? 0 : cy - dims.innerRadius / Math.sqrt(2);\n  } else {\n    outerH = 2 * dims.innerRadius;\n    outerW = dims.innerRadius;\n    outerX = section === 'left' ? cx - dims.innerRadius : 0;\n    outerY = cy - dims.innerRadius;\n\n    innerH = Math.sqrt(2) * dims.innerRadius;\n    innerW = dims.innerRadius / Math.sqrt(2);\n    innerX = section === 'left' ? cx - dims.innerRadius / Math.sqrt(2) : 0;\n    innerY = cy - dims.innerRadius / Math.sqrt(2);\n  }\n\n  return {\n    outerBounds: {\n      x: outerX,\n      y: outerY,\n      width: outerW,\n      height: outerH\n    },\n    innerBounds: {\n      x: innerX,\n      y: innerY,\n      width: innerW,\n      height: innerH\n    }\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 */\n\nimport { Threshold, MeterSize, ThresholdDisplay } from '../utils/UNSAFE_meterTypes';\nimport { getClipPath, Sector } from '../utils/PRIVATE_meterUtils';\nimport { getAngleExtentFromDelta, getStartAngleForValue } from './CircleMeterUtils';\nimport { MeterProps, CircularRefLine } from './MeterCircle.types';\nimport { ColorProps } from '../utils/UNSAFE_interpolations/colors';\nimport { getDvtThresholdColor } from '../utils/UNSAFE_dvtCommonUtils';\n\nexport type MeterInfo = Required<\n  Pick<MeterProps, 'min' | 'max' | 'value' | 'size' | 'startAngle' | 'angleExtent'>\n> & {\n  section: Sector;\n  isRtl: boolean;\n  innerRadius: number;\n};\n\n/**\n * Returns the css variable corresponding to the default size of the meter circle.\n * @param size The size of the meter circle.\n * @returns The css variable corresponding to the default size of the meter circle.\n */\nfunction getSizeVar(size: MeterSize): string {\n  return `var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-${size}-size)`;\n}\n\n/**\n * Returns the css variable corresponding to the default track size of the meter circle.\n * @param size The size of the meter circle.\n * @returns The css variable corresponding to the default track size of the meter circle.\n */\nfunction getTrackSizeVar(size: MeterSize): string {\n  return `var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-${size}-track-size)`;\n}\n\n/**\n * Returns the calculated css variable string for the inner radius when given size and innerRadius of meter circle.\n * @param size The size of the meter circle.\n * @param innerRadius The inner radius of the meter circle.\n * @returns {string} CSS varible string for the calculated inner radius of the meter circle.\n */\n\nexport function getInnerRadius(size: MeterSize, innerRadius?: number): string {\n  if (innerRadius != undefined) {\n    return `(${getSizeVar(size)} * ${innerRadius / 2})`;\n  }\n  return `(${getSizeVar(size)} * 0.5 - ${getTrackSizeVar(size)})`;\n}\n\n/**\n * Returns the calculated css variable string for meter circle track for a given size and innerRadius of meter circle.\n * @param size The size of the meter circle.\n * @param innerRadius The inner radius of the meter circle.\n * @returns {string} CSS variable for the calculated track size of the meter circle.\n */\nexport function getTrackSize(size: MeterSize, innerRadius?: number): string {\n  if (innerRadius != undefined) {\n    return `(${getSizeVar(size)} * ${1 - innerRadius} / 2)`;\n  }\n  return getTrackSizeVar(size);\n}\n\n/**\n * Returns the calculated length of reference line for given size and inner radius of meter circle.\n * The length of reference line runs from the inner radius to slight outside the outer radius.\n * The length outside the outer radius depends on size of the meter circle.\n * @param size The size of the meter circle.\n * @param innerRadius The inner radius of the meter circle.\n * @returns The calculated CSS var for the length of reference line.\n */\nexport function getRefLineLength(size: MeterSize, innerRadius?: number): string {\n  const outerExtent = { sm: '1rem', md: '0.75rem', lg: '0.5rem' };\n  return `${getTrackSize(size, innerRadius)} + ${outerExtent[size]}`;\n}\n\n/**\n * Returns the array of calculated props for InnerCircle representing each threshold.\n * @param meterInfo MeterInfo object containing info about given meter circle.\n * @param thresholds thresholds array of the meter circle.\n * @param isTrackRendered Whether track is rendered.\n * @param trackColor The track color of the meter circle.\n * @param innerRadius The inner radius of the meter circle.\n * @returns Array of calculated props object for InnerCircle representing each threshold.\n */\nexport function getThresholdsProps(\n  meterInfo: MeterInfo,\n  thresholds: Threshold[],\n  isTrackRendered: boolean,\n  trackColor?: ColorProps['color'],\n  innerRadius?: number\n): Array<{\n  clipPath: string;\n  color?: ColorProps['color'];\n  section: Sector;\n  size: string;\n}> {\n  const {\n    min,\n    max,\n    startAngle,\n    angleExtent,\n    size,\n    section,\n    isRtl,\n    innerRadius: innerDim\n  } = meterInfo;\n  const trackSize = `calc(${getTrackSize(size, innerRadius)})`;\n  const thresholdProps = [];\n  const validThresholds = thresholds\n    .filter((threshold: Threshold) => threshold.max > min && threshold.max <= max)\n    .sort((a, b) => a.max - b.max);\n  const numOfThreshold = validThresholds.length;\n  for (let i = 0; i < numOfThreshold; i++) {\n    const threshold = validThresholds[i];\n    const startValue = i === 0 ? min : validThresholds[i - 1].max;\n    const diff = i === 0 ? threshold.max : threshold.max - validThresholds[i - 1].max;\n\n    let thresholdStart = getStartAngleForValue(\n      startValue,\n      min,\n      max,\n      startAngle,\n      angleExtent,\n      isRtl\n    );\n    let thresholdExtent = getAngleExtentFromDelta(diff, min, max, angleExtent);\n\n    const { startOffset, extentOffset } = getThresholdsBuffer(\n      innerDim,\n      angleExtent,\n      i === 0,\n      threshold.max === max,\n      isRtl\n    );\n    const clipPath = getClipPath(\n      thresholdStart + startOffset,\n      thresholdExtent + extentOffset,\n      isRtl,\n      section\n    );\n\n    thresholdProps.push({\n      clipPath,\n      color: getDvtThresholdColor(threshold.color),\n      size: trackSize,\n      section\n    });\n\n    if (i === numOfThreshold - 1 && threshold.max < max && isTrackRendered) {\n      thresholdStart = thresholdStart + (isRtl ? 1 : -1) * thresholdExtent;\n      thresholdExtent = getAngleExtentFromDelta(max - threshold.max, min, max, angleExtent);\n      const { startOffset, extentOffset } = getThresholdsBuffer(\n        innerDim,\n        angleExtent,\n        false,\n        true,\n        isRtl\n      );\n      thresholdProps.push({\n        clipPath: getClipPath(\n          thresholdStart + startOffset,\n          thresholdExtent + extentOffset,\n          isRtl,\n          section\n        ),\n        color: trackColor,\n        size: trackSize,\n        section\n      });\n    }\n  }\n  return thresholdProps;\n}\n\n/**\n * Returns the calculated props for CircularReferenceLine.\n * @param meterInfo MeterInfo object containing info about the meter circle.\n * @param refLine The CircularRefLine object\n * @param innerRadius The innerRadius of the meter circle.\n * @returns An bject with calculated props for CircularReferenceLine.\n */\nexport function getReferenceLinesProps(\n  meterInfo: MeterInfo,\n  refLine: CircularRefLine,\n  innerRadius?: number\n): {\n  radius: string;\n  length: string;\n  angle: number;\n  color?: ColorProps['color'];\n} {\n  const { min, max, startAngle, angleExtent, size, isRtl } = meterInfo;\n  return {\n    radius: getInnerRadius(size, innerRadius),\n    length: getRefLineLength(size, innerRadius),\n    angle: getStartAngleForValue(refLine.value, min, max, startAngle, angleExtent, isRtl),\n    color: refLine.color\n  };\n}\n\n/**\n * Returns the calculated props for InnerCircle representing the track.\n * @param meterInfo MeterInfo object containing info about the meter circle.\n * @param trackColor The color of the track.\n * @param istrackRendered Whether the track is rendered.\n * @param thresholdDisplay Specifies whether the current threshold is displayed in the track, on the indicator, or if all thresholds are displayed in the track.\n * @param innerRadius The innerRadius of the meter circle.\n * @param thresholds thresholds array of the meter circle.\n * @returns An object with calculated props for InnerCircle that represents the track.\n */\nexport function getTrackProps(\n  meterInfo: MeterInfo,\n  isTrackRendered: boolean,\n  thresholdDisplay: ThresholdDisplay,\n  trackColor?: ColorProps['color'],\n  innerRadius?: number,\n  thresholds?: Threshold[]\n): {\n  section: Sector;\n  color?: ColorProps['color'];\n  clipPath: string;\n  size: string;\n} {\n  const { startAngle, angleExtent, size, section, isRtl } = meterInfo;\n  const color = !isTrackRendered\n    ? 'transparent'\n    : thresholdDisplay === 'all' && thresholds\n    ? 'var(--oj-c-PRIVATE-DO-NOT-USE-dvt-contrast-line-color)'\n    : trackColor;\n  return {\n    section,\n    color,\n    clipPath: getClipPath(startAngle, angleExtent, isRtl, section),\n    size: `calc(${getTrackSize(size, innerRadius)})`\n  };\n}\n\n/**\n * Returns the calculated props for InnerCircle representing the indicator.\n * @param meterInfo MeterInfo object containing info about the meter circle.\n * @param indicatorSize Relative thickness of the indicator to the track.\n * @param innerRadius The innerRadius of the meter circle.\n * @returns An object with calculated props for InnerCircle that represents the indicator.\n */\nexport function getIndicatorProps(\n  meterInfo: MeterInfo,\n  indicatorSize: number,\n  innerRadius?: number\n): {\n  section: Sector;\n  width: string;\n  height: string;\n  size: string;\n  clipPath: string;\n} {\n  const { value, min, max, startAngle, angleExtent, size, section, isRtl } = meterInfo;\n  const valueExtent = ((value - min) * angleExtent) / (max - min);\n  const validIndicatorSize = Math.min(Math.max(0, indicatorSize), 1);\n  const isHoriz = section === 'left' || section === 'right';\n  const isVert = section === 'top' || section === 'bottom';\n  const valueTrackSize = `calc(${getTrackSize(size, innerRadius)} * ${validIndicatorSize})`;\n  const diameter = `${getSizeVar(size)} - ((1 - ${validIndicatorSize}) * ${getTrackSize(\n    size,\n    innerRadius\n  )})`;\n  const radius = `(${diameter}) / 2`;\n  return {\n    section,\n    width: isHoriz ? `calc(${radius})` : `calc(${diameter})`,\n    height: isVert ? `calc(${radius})` : `calc(${diameter})`,\n    size: valueTrackSize,\n    clipPath: getClipPath(startAngle, valueExtent, isRtl, section)\n  };\n}\n\n/**\n * Returns the threshold offsets to create the whitespace between the thresholds.\n * @param innerRadius The innerRadius of the meter circle.\n * @param angleExtent The angleExtent of the meter circle.\n * @param firstThreshold Whether the current threshold is the first threshold.\n * @param lastThreshold  Whether the current threshold is the last threshold.\n * @param isRtl Whether the document reading mode is 'rtl'\n * @returns The offsets (startOffset and extentOffset) to add to calculated threshold startAngle and threhsold extent.\n */\nfunction getThresholdsBuffer(\n  innerRadius: number,\n  angleExtent: number,\n  firstThreshold: boolean,\n  lastThreshold: boolean,\n  isRtl: boolean\n): {\n  startOffset: number;\n  extentOffset: number;\n} {\n  if (!innerRadius) {\n    return { startOffset: 0, extentOffset: 0 };\n  }\n  const offset = 360 / (2 * Math.PI * innerRadius);\n  let startOffset = (offset / 2) * (isRtl ? 1 : -1);\n  let extentOffset = -1 * offset;\n\n  if (firstThreshold && angleExtent < 360) {\n    startOffset = 0;\n    extentOffset = -0.5 * offset;\n  }\n\n  if (lastThreshold && angleExtent < 360) {\n    extentOffset = -0.5 * offset;\n  }\n  return { startOffset, extentOffset };\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 */\n\nimport { useUser } from '../hooks/UNSAFE_useUser';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { useEffect, useRef, useState } from 'preact/hooks';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { CircleWrapper, CircleInner } from '../PRIVATE_Meter';\nimport { CircularReferenceLine } from './CircularReferenceLine';\n\nimport {\n  validateRange,\n  getTrackAndIndicatorColor,\n  getMeterAriaProps,\n  getCircleSection\n} from '../utils/PRIVATE_meterUtils';\n\nimport { getDimensions, getValue, getCenterContext } from './CircleMeterUtils';\n\nimport {\n  getIndicatorProps,\n  getTrackProps,\n  getThresholdsProps,\n  getReferenceLinesProps,\n  MeterInfo\n} from './LayoutUtils';\n\nimport {\n  usePointerEvents,\n  useKeyboardEvents,\n  useMeterDatatip\n} from '../hooks/PRIVATE_useDvtMeterEvents';\n\nimport { MeterProps, CircularRefLine } from './MeterCircle.types';\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\n\n/**\n * A Meter circle displays information graphically in a circular bar, highlighting a specific metric value's progress in relation to its min, max, or thresholds.\n */\nexport function MeterCircle({\n  max = 100,\n  min = 0,\n  value = 0,\n  step = 1,\n  size = 'lg',\n  startAngle = 90,\n  angleExtent = 360,\n  isTrackRendered = true,\n  thresholdDisplay = 'all',\n  indicatorSize = 1,\n  ...props\n}: MeterProps) {\n  validateRange(min, max, value, step);\n\n  const { direction } = useUser();\n  const isRtl = direction === 'rtl';\n  const section = getCircleSection(startAngle, angleExtent, isRtl);\n  const dimensionsRef = useRef(getDimensions(null, section));\n  const circleWrapperRef = useRef<HTMLDivElement>(null);\n  const [isDimsReady, setDimsReady] = useState<boolean>(false);\n\n  useEffect(() => {\n    if (props.onCommit || props.onInput || props.children) {\n      dimensionsRef.current = getDimensions(circleWrapperRef.current, section);\n      setDimsReady(true);\n    }\n  }, [size, props.onCommit, props.onInput, props.children]);\n\n  const getValueFromEvent = (event: PointerEvent) => {\n    const circleContainer = circleWrapperRef.current;\n    if (event.target == circleContainer) {\n      return getValue(\n        event,\n        min,\n        max,\n        step,\n        dimensionsRef,\n        startAngle,\n        angleExtent,\n        section,\n        isRtl\n      );\n    }\n    return;\n  };\n\n  const pointerEventsProps = usePointerEvents(\n    value,\n    getValueFromEvent,\n    circleWrapperRef,\n    props.onCommit,\n    props.onInput\n  );\n\n  const keyboardEventsProps = useKeyboardEvents(\n    value,\n    min,\n    max,\n    step,\n    props.onCommit,\n    props.onInput\n  );\n\n  const { datatipContent, datatipProps } = useMeterDatatip(\n    value,\n    props.datatip,\n    props.ariaDescribedBy\n  );\n\n  const ariaProps = getMeterAriaProps(\n    value,\n    min,\n    max,\n    `${value}`,\n    props.accessibleLabel,\n    props.ariaLabelledBy,\n    props.thresholds\n  );\n  const mergedProps = mergeProps(pointerEventsProps, keyboardEventsProps, datatipProps, ariaProps);\n\n  const { trackColor, indicatorColor } = getTrackAndIndicatorColor(\n    value,\n    thresholdDisplay,\n    props.trackColor,\n    props.indicatorColor,\n    props.thresholds\n  );\n\n  const orientation =\n    section === 'bottom' || section === 'top'\n      ? 'Horizontal'\n      : section === 'left' || section === 'right'\n      ? 'Vertical'\n      : 'Full';\n\n  const meterInfo = {\n    min,\n    max,\n    value,\n    startAngle,\n    angleExtent,\n    size,\n    section,\n    isRtl,\n    innerRadius: dimensionsRef.current.innerRadius\n  } as MeterInfo;\n  const isInteractive = props.onCommit || props.onInput;\n  const { isTabbable } = useTabbableMode();\n  const centerContext = getCenterContext(dimensionsRef, section);\n  return (\n    <>\n      <div\n        class={classNames([component.base, isInteractive ? component.interactive : ''])}\n        tabIndex={!isTabbable ? -1 : 0}\n        role=\"slider\"\n        {...mergedProps}>\n        <CircleWrapper\n          ref={circleWrapperRef}\n          class={classNames([\n            circleWrapper.base,\n            props.referenceLines && props.referenceLines.length > 0\n              ? styles[`${size}${section}`]\n              : '',\n            styles[`${size}${orientation}`]\n          ])}>\n          <CircleInner\n            class={classNames([circleTrack.base, styles[section]])}\n            {...getTrackProps(\n              meterInfo,\n              isTrackRendered,\n              thresholdDisplay,\n              trackColor,\n              props.innerRadius,\n              props.thresholds\n            )}\n          />\n          {thresholdDisplay === 'all' &&\n            props.thresholds &&\n            getThresholdsProps(\n              meterInfo,\n              props.thresholds,\n              isTrackRendered,\n              trackColor,\n              props.innerRadius\n            ).map((threshold) => {\n              return (\n                <CircleInner\n                  class={classNames([circleTrack.base, styles[section], styles.thresholds])}\n                  {...threshold}\n                />\n              );\n            })}\n\n          <CircleInner\n            color={indicatorColor}\n            class={classNames([circleValue.base, circleValue[section], styles[section]])}\n            {...getIndicatorProps(meterInfo, indicatorSize, props.innerRadius)}\n          />\n          {props.referenceLines?.map((refLine: CircularRefLine) => {\n            return (\n              <CircularReferenceLine\n                {...getReferenceLinesProps(meterInfo, refLine, props.innerRadius)}\n                section={section}\n              />\n            );\n          })}\n          {isDimsReady && props.children && centerContext && (\n            <div class={classNames([styles.centerContent, childrenStyles])}>\n              {props.children(centerContext)}\n            </div>\n          )}\n        </CircleWrapper>\n      </div>\n      {datatipContent}\n    </>\n  );\n}\n\nconst component = {\n  base: cssProps`${{\n    display: 'inline-block',\n    pointerEvents: 'none'\n  }}`,\n  interactive: cssProps`${{\n    touchAction: 'none',\n    '&:focus-visible': {\n      outlineColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color)',\n      outlineStyle: 'dotted',\n      outlineWidth: '1px'\n    }\n  }}`\n};\n\nconst styles = {\n  full: cssProps`${{\n    borderRadius: '50%'\n  }}`,\n  top: cssProps`${{\n    borderRadius: '50% 50% 0 0 / 100% 100% 0 0',\n    borderBottom: '0'\n  }}`,\n  bottom: cssProps`${{\n    borderRadius: '0% 0% 50% 50% / 0% 0% 100% 100%',\n    borderTop: '0'\n  }}`,\n  right: cssProps`${{\n    borderRadius: '0 100% 100% 0 / 0% 50% 50% 0%',\n    borderLeft: '0'\n  }}`,\n  left: cssProps`${{\n    borderRadius: '100% 0 0 100% / 50% 0 0 50%',\n    borderRight: '0'\n  }}`,\n  smtop: cssProps`${{\n    margin: '1rem 1rem 0 1rem'\n  }}`,\n  mdtop: cssProps`${{\n    margin: '0.75rem 0.75rem 0 0.75rem'\n  }}`,\n  lgtop: cssProps`${{\n    margin: '0.5rem 0.5rem 0 0.5rem'\n  }}`,\n  smbottom: cssProps`${{\n    margin: '0 1rem 1rem 1rem'\n  }}`,\n  mdbottom: cssProps`${{\n    margin: '0 0.75rem 0.75rem 0.75rem'\n  }}`,\n  lgbottom: cssProps`${{\n    margin: '0 0.5rem 0.5rem 0.5rem'\n  }}`,\n  smleft: cssProps`${{\n    margin: '1rem 0 1rem 1rem'\n  }}`,\n  mdleft: cssProps`${{\n    margin: '0.75rem 0 0.75rem 0.75rem'\n  }}`,\n  lgleft: cssProps`${{\n    margin: '0.5rem 0 0.5rem 0.5rem'\n  }}`,\n  smright: cssProps`${{\n    margin: '1rem 1rem 1rem 0'\n  }}`,\n  mdright: cssProps`${{\n    margin: '0.75rem 0.75rem 0.75rem 0'\n  }}`,\n  lgright: cssProps`${{\n    margin: '0.5rem 0.5rem 0.5rem 0'\n  }}`,\n  smfull: cssProps`${{\n    margin: '1rem'\n  }}`,\n  mdfull: cssProps`${{\n    margin: '0.75rem'\n  }}`,\n  lgfull: cssProps`${{\n    margin: '0.5rem'\n  }}`,\n  lgHorizontal: cssProps`${{\n    height: 'calc(var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-lg-size) / 2 )',\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-lg-size)'\n  }}`,\n  lgVertical: cssProps`${{\n    width: 'calc(var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-lg-size) / 2 )',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-lg-size)'\n  }}`,\n  smHorizontal: cssProps`${{\n    height: 'calc(var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-sm-size) / 2 )',\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-sm-size)'\n  }}`,\n  smVertical: cssProps`${{\n    width: 'calc(var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-sm-size) / 2 )',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-sm-size)'\n  }}`,\n  mdHorizontal: cssProps`${{\n    height: 'calc(var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-md-size) / 2 )',\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-md-size)'\n  }}`,\n  mdVertical: cssProps`${{\n    width: 'calc(var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-md-size) / 2 )',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-md-size)'\n  }}`,\n  smFull: cssProps`${{\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-sm-size)',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-sm-size)'\n  }}`,\n  mdFull: cssProps`${{\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-md-size)',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-md-size)'\n  }}`,\n  lgFull: cssProps`${{\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-lg-size)',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-lg-size)'\n  }}`,\n  centerContent: cssProps`${{\n    pointerEvents: 'none',\n    width: '100%',\n    height: '100%',\n    lineHeight: 'initial'\n  }}`,\n  thresholds: cssProps`${{\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-threshold-color)'\n  }}`\n};\nconst childrenStyles = cssProps`${{\n  /* @ts-ignore */\n  '& > *': {\n    marginTop: '0 !important',\n    marginBottom: '0 !important',\n    marginLeft: '0 !important',\n    marginRight: '0 !important'\n  }\n}}`;\n\nconst circleWrapper = {\n  base: cssProps`${{\n    position: 'relative',\n    boxSizing: 'border-box',\n    cursor: 'pointer',\n    pointerEvents: 'auto'\n  }}`\n};\n\nconst circleTrack = {\n  base: cssProps`${{\n    width: '100%',\n    height: '100%',\n    position: 'absolute',\n    borderStyle: 'solid',\n    boxSizing: 'border-box',\n    pointerEvents: 'none',\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-track-bg-color)'\n  }}`,\n  sm: cssProps`${{\n    borderWidth: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-sm-track-size)'\n  }}`,\n  md: cssProps`${{\n    borderWidth: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-md-track-size)'\n  }}`,\n  lg: cssProps`${{\n    borderWidth: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-lg-track-size)'\n  }}`\n};\n\nconst circleValue = {\n  base: cssProps`${{\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-value-bg-color)',\n    borderStyle: 'solid',\n    boxSizing: 'border-box',\n    position: 'absolute',\n    pointerEvents: 'none'\n  }}`,\n  full: cssProps`${{\n    borderRadius: '50%',\n    top: '50%',\n    left: '50%',\n    translate: '-50% -50%'\n  }}`,\n  top: cssProps`${{\n    top: '100%',\n    left: '50%',\n    translate: '-50% -100%'\n  }}`,\n  right: cssProps`${{\n    top: '50%',\n    translate: '0 -50%'\n  }}`,\n  left: cssProps`${{\n    left: '100%',\n    top: '50%',\n    translate: '-100% -50%'\n  }}`,\n  bottom: cssProps`${{\n    left: '50%',\n    translate: '-50% 0'\n  }}`\n};\n"],"names":["CircularReferenceLine","color","angle","radius","length","section","centerCoord","getCenterCoord","yOffset","y","Math","sin","PI","xOffset","x","cos","left","top","transform","backgroundColor","getDvtThresholdColor","borderBottom","referenceLineStyles","getDimensions","element","width","height","innerRadius","outerRadius","circleTrack","children","rect","getBoundingClientRect","Object","assign","round","clientWidth","clientHeight","getInnerAndOuterRadius","getAngleExtentFromDelta","delta","min","max","angleExtent","getStartAngleForValue","value","startAngle","isRtl","getSizeVar","size","getTrackSizeVar","getInnerRadius","undefined","getTrackSize","getRefLineLength","sm","md","lg","getThresholdsProps","meterInfo","thresholds","isTrackRendered","trackColor","innerDim","trackSize","thresholdProps","validThresholds","filter","threshold","sort","a","b","numOfThreshold","i","startValue","diff","thresholdStart","thresholdExtent","startOffset","extentOffset","getThresholdsBuffer","clipPath","getClipPath","push","getTrackProps","thresholdDisplay","getIndicatorProps","indicatorSize","valueExtent","validIndicatorSize","isHoriz","isVert","valueTrackSize","diameter","firstThreshold","lastThreshold","offset","component","styles","childrenStyles","circleWrapper","circleValue","_a","direction","useUser","circleWrapperRef","useRef","props","onCommit","onInput","pointerEventsProps","usePointerEvents","event","circleContainer","current","target","step","dimensionsRef","dims","center","convertToPolar","offsetX","offsetY","positiveAngle","getPositiveAngle","val","clockwiseArc","datatipContent","datatipProps","useMeterDatatip","datatip","ariaDescribedBy","mergedProps","mergeProps","keyboardEventsProps","ariaProps","isTabbable","useTabbableMode","cx","cy","innerX","innerY","innerW","innerH","outerX","outerY","outerW","outerH","sqrt","outerBounds","innerBounds","base","orientation","_jsx","jsx","CircleInner","class","classNames","refLine","isDimsReady","centerContext","centerContent"],"mappings":"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"}

package/amd/Modal-4d57ad53.js

@@ -0,0 +1,2 @@
+define(["exports","preact/jsx-runtime","./useModal-94f3fee6","./UNSAFE_FocusTrap","./UNSAFE_Layer",'module',"preact/compat","./FocusTrap-29ad6889"],function(s,e,r,c,a,n,o,i){"use strict";const d="t92r2f",l=()=>e.jsx("div",{class:d}),t="_1k7bsvm",u=o.forwardRef(({children:s},r)=>e.jsx("div",Object.assign({class:t,ref:r},{children:s})));u.displayName="Forwarded<ModalContainer>";const f="_1in7o77",j=({children:s})=>e.jsx("div",Object.assign({class:f},{children:s}));s.Modal=({autoFocusRef:s,children:c,isOpen:n,onBackdropClick:o,restoreFocusRef:d})=>{const{modalRef:t}=r.useModal({isOpen:n,onBackdropClick:o});return n?e.jsx(a.Layer,{children:e.jsxs(j,{children:[e.jsx(l,{}),e.jsx(u,Object.assign({ref:t},{children:e.jsx(i.FocusTrap,Object.assign({autoFocusRef:s,restoreFocusRef:d},{children:c}))}))]})}):null}});
+//# sourceMappingURL=Modal-4d57ad53.js.map

package/amd/{Modal-6e4f35b4.js.map → Modal-4d57ad53.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Modal-6e4f35b4.js","sources":["../../src/UNSAFE_Modal/ModalBackdrop.tsx","../../src/UNSAFE_Modal/ModalContainer.tsx","../../src/UNSAFE_Modal/Modal.tsx"],"sourcesContent":["import { cssProps } from '@oracle/oraclejet-cssprops';\n\nconst styles = {\n  base: cssProps`${{\n    position: 'absolute',\n    top: '0',\n    right: '0',\n    bottom: '0',\n    left: '0',\n    backgroundColor: 'rgba(0,0,0,.5)'\n  }}`\n};\n\nconst ModalBackdrop = () => <div class={styles.base} />;\n\nexport default ModalBackdrop;\n","import { forwardRef } from 'preact/compat';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLDivElement>, 'children'>;\ntype Props = IntrinsicProps;\n\nconst styles = {\n  base: cssProps`${{\n    position: 'absolute',\n    inset: 0,\n    backgroundColor: 'transparent',\n    height: '100%',\n    margin: '0 auto',\n    maxWidth: 'calc(100% - 0.01px) !important',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center'\n  }}`\n};\n\nconst ModalContainer = forwardRef<HTMLDivElement, Props>(({ children }, ref) => (\n  <div class={styles.base} ref={ref}>\n    {children}\n  </div>\n));\nModalContainer.displayName = 'Forwarded<ModalContainer>';\n\nexport default ModalContainer;\n","import { RefObject } from 'preact';\nimport { useModal } from './hooks/useModal';\nimport { FocusTrap } from '../UNSAFE_FocusTrap';\nimport { Layer } from '../UNSAFE_Layer';\nimport ModalBackdrop from './ModalBackdrop';\nimport ModalContainer from './ModalContainer';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLDivElement>, 'children'>;\ntype UseModalProps = Parameters<typeof useModal>[0];\ntype Props = UseModalProps &\n  IntrinsicProps & {\n    /**\n     * Optional Ref to an element to focus on when component mounts\n     * @default - undefined - behavior is to focus on first tabbableElement\n     */\n    autoFocusRef?: RefObject<HTMLElement>;\n\n    /**\n     * Optional Ref to element to focus on when component un-mounts\n     * @default - undefined - behavior is to focus on the original activeElement when focus trap was enabled\n     */\n    restoreFocusRef?: RefObject<HTMLElement>;\n  };\n\nconst styles = {\n  base: cssProps`${{\n    position: 'fixed',\n    top: '0',\n    right: '0',\n    bottom: '0',\n    left: '0'\n  }}`\n};\n\nconst ModalWrapper = ({ children }: IntrinsicProps) => <div class={styles.base}>{children}</div>;\n\nconst Modal = ({ autoFocusRef, children, isOpen, onBackdropClick, restoreFocusRef }: Props) => {\n  const { modalRef } = useModal({ isOpen, onBackdropClick });\n\n  return isOpen ? (\n    <Layer>\n      <ModalWrapper>\n        <ModalBackdrop />\n        <ModalContainer ref={modalRef}>\n          <FocusTrap autoFocusRef={autoFocusRef} restoreFocusRef={restoreFocusRef}>\n            {children}\n          </FocusTrap>\n        </ModalContainer>\n      </ModalWrapper>\n    </Layer>\n  ) : null;\n};\n\nexport default Modal;\n"],"names":["styles","ModalBackdrop","_jsx","jsx","class","ModalContainer","forwardRef","children","ref","Object","assign","displayName","ModalWrapper","autoFocusRef","isOpen","onBackdropClick","restoreFocusRef","modalRef","useModal","Layer","_jsxs","jsxs","FocusTrap"],"mappings":"4LAEA,MAAAA,aAWAC,EAAA,IAAAC,EAAAC,IAAA,MAAA,CAAAC,MAAAJ,ICNAA,WAcAK,EAAAC,EAAAA,WAAA,EAAAC,SAAAA,GAAAC,IAAAN,EAAAC,IAAA,MAAAM,OAAAC,OAAA,CAAAN,MAAAJ,EAAAQ,IAAAA,GAAA,CAAAD,SAAAA,MAKAF,EAAAM,YAAA,4BCAA,MAAAX,WAUAY,EAAA,EAAAL,SAAAA,KAAAL,MAAA,MAAAO,OAAAC,OAAA,CAAAN,MAAAJ,GAAA,CAAAO,SAAAA,aAEA,EAAAM,aAAAA,EAAAN,SAAAA,EAAAO,OAAAA,EAAAC,gBAAAA,EAAAC,gBAAAA,MACE,MAAAC,SAAAA,GAAAC,WAAA,CAAAJ,OAAAA,EAAAC,gBAAAA,IAEA,OAAAD,EAAAZ,EAAAC,IAAAgB,QAAA,CAAAZ,SAAAa,EAAAC,KAAAT,EAAA,CAAAL,SAAA,CAAAL,EAAAC,IAAAF,EAAA,IAAAC,MAAAG,EAAAI,OAAAC,OAAA,CAAAF,IAAAS,GAAA,CAAAV,SAAAL,EAAAC,IAAAmB,YAAAb,OAAAC,OAAA,CAAAG,aAAAA,EAAAG,gBAAAA,GAAA,CAAAT,SAAAA,aAAA"}
+{"version":3,"file":"Modal-4d57ad53.js","sources":["../../src/UNSAFE_Modal/ModalBackdrop.tsx","../../src/UNSAFE_Modal/ModalContainer.tsx","../../src/UNSAFE_Modal/Modal.tsx"],"sourcesContent":["import { cssProps } from '@oracle/oraclejet-cssprops';\n\nconst styles = {\n  base: cssProps`${{\n    position: 'absolute',\n    top: '0',\n    right: '0',\n    bottom: '0',\n    left: '0',\n    backgroundColor: 'rgba(0,0,0,.5)'\n  }}`\n};\n\nconst ModalBackdrop = () => <div class={styles.base} />;\n\nexport default ModalBackdrop;\n","import { forwardRef } from 'preact/compat';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLDivElement>, 'children'>;\ntype Props = IntrinsicProps;\n\nconst styles = {\n  base: cssProps`${{\n    position: 'absolute',\n    inset: 0,\n    backgroundColor: 'transparent',\n    height: '100%',\n    margin: '0 auto',\n    maxWidth: 'calc(100% - 0.01px) !important',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center'\n  }}`\n};\n\nconst ModalContainer = forwardRef<HTMLDivElement, Props>(({ children }, ref) => (\n  <div class={styles.base} ref={ref}>\n    {children}\n  </div>\n));\nModalContainer.displayName = 'Forwarded<ModalContainer>';\n\nexport default ModalContainer;\n","import { RefObject } from 'preact';\nimport { useModal } from './hooks/useModal';\nimport { FocusTrap } from '../UNSAFE_FocusTrap';\nimport { Layer } from '../UNSAFE_Layer';\nimport ModalBackdrop from './ModalBackdrop';\nimport ModalContainer from './ModalContainer';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLDivElement>, 'children'>;\ntype UseModalProps = Parameters<typeof useModal>[0];\ntype Props = UseModalProps &\n  IntrinsicProps & {\n    /**\n     * Optional Ref to an element to focus on when component mounts\n     * @default - undefined - behavior is to focus on first tabbableElement\n     */\n    autoFocusRef?: RefObject<HTMLElement>;\n\n    /**\n     * Optional Ref to element to focus on when component un-mounts\n     * @default - undefined - behavior is to focus on the original activeElement when focus trap was enabled\n     */\n    restoreFocusRef?: RefObject<HTMLElement>;\n  };\n\nconst styles = {\n  base: cssProps`${{\n    position: 'fixed',\n    top: '0',\n    right: '0',\n    bottom: '0',\n    left: '0'\n  }}`\n};\n\nconst ModalWrapper = ({ children }: IntrinsicProps) => <div class={styles.base}>{children}</div>;\n\nconst Modal = ({ autoFocusRef, children, isOpen, onBackdropClick, restoreFocusRef }: Props) => {\n  const { modalRef } = useModal({ isOpen, onBackdropClick });\n\n  return isOpen ? (\n    <Layer>\n      <ModalWrapper>\n        <ModalBackdrop />\n        <ModalContainer ref={modalRef}>\n          <FocusTrap autoFocusRef={autoFocusRef} restoreFocusRef={restoreFocusRef}>\n            {children}\n          </FocusTrap>\n        </ModalContainer>\n      </ModalWrapper>\n    </Layer>\n  ) : null;\n};\n\nexport default Modal;\n"],"names":["styles","ModalBackdrop","_jsx","jsx","class","ModalContainer","forwardRef","children","ref","Object","assign","displayName","ModalWrapper","autoFocusRef","isOpen","onBackdropClick","restoreFocusRef","modalRef","useModal","Layer","_jsxs","jsxs","FocusTrap"],"mappings":"4LAEA,MAAAA,WAWAC,EAAA,IAAAC,EAAAC,IAAA,MAAA,CAAAC,MAAAJ,ICNAA,aAcAK,EAAAC,EAAAA,WAAA,EAAAC,SAAAA,GAAAC,IAAAN,EAAAC,IAAA,MAAAM,OAAAC,OAAA,CAAAN,MAAAJ,EAAAQ,IAAAA,GAAA,CAAAD,SAAAA,MAKAF,EAAAM,YAAA,4BCAA,MAAAX,aAUAY,EAAA,EAAAL,SAAAA,KAAAL,MAAA,MAAAO,OAAAC,OAAA,CAAAN,MAAAJ,GAAA,CAAAO,SAAAA,aAEA,EAAAM,aAAAA,EAAAN,SAAAA,EAAAO,OAAAA,EAAAC,gBAAAA,EAAAC,gBAAAA,MACE,MAAAC,SAAAA,GAAAC,WAAA,CAAAJ,OAAAA,EAAAC,gBAAAA,IAEA,OAAAD,EAAAZ,EAAAC,IAAAgB,QAAA,CAAAZ,SAAAa,EAAAC,KAAAT,EAAA,CAAAL,SAAA,CAAAL,EAAAC,IAAAF,EAAA,IAAAC,MAAAG,EAAAI,OAAAC,OAAA,CAAAF,IAAAS,GAAA,CAAAV,SAAAL,EAAAC,IAAAmB,YAAAb,OAAAC,OAAA,CAAAG,aAAAA,EAAAG,gBAAAA,GAAA,CAAAT,SAAAA,aAAA"}

package/amd/{NumberInputText-33d397cf.js → NumberInputText-b58827bb.js}

@@ -1,2 +1,2 @@
-define(["exports","preact/jsx-runtime","preact","preact/compat","preact/hooks","./hooks/UNSAFE_useFocusableTextField","./hooks/UNSAFE_useFormContext","./hooks/UNSAFE_useFormFieldContext","./hooks/UNSAFE_useHover","./hooks/UNSAFE_useTextField","./UNSAFE_Label","./hooks/UNSAFE_usePrefixSuffix","./UNSAFE_TextField","./UNSAFE_UserAssistance","./utils/PRIVATE_clientHints","./hooks/UNSAFE_useToggle","./UNSAFE_Button","./index-8aa44d16","./hooks/UNSAFE_useTabbableMode","./hooks/UNSAFE_useTranslationBundle","./Button-0d9421fc","./UNSAFE_Grid","./hooks/UNSAFE_useCurrentValueReducer","./ReadonlyTextFieldInput-5d75bcc4","./TextFieldInput-89b3ad37","./clientHints-2e828dd3"],function(e,s,n,t,i,a,r,o,l,u,d,c,p,b,x,f,v,h,S,F,g,m,A,y,D,C){"use strict";function j({direction:e,isDisabled:n,onStep:t,variant:a}){const r=F.useTranslationBundle("@oracle/oraclejet-preact"),o=r.inputNumber_increase(),l=r.inputNumber_decrease(),u="increase"===e?o:l,d=i.useCallback(()=>{null==t||t({direction:e})},[t,e]),c="arrowup"===a?s.jsx(h.SvgIcoChevronUp,{}):s.jsx(h.SvgIcoChevronDown,{});return s.jsx(S.TabbableModeContext.Provider,Object.assign({value:{isTabbable:!1}},{children:s.jsx(g.Button,{display:"icons",isDisabled:n,title:u,onAction:d,startIcon:c,variant:"borderless"})}))}function T({children:e}){return s.jsx(m.Grid,Object.assign({align:"center",gap:"1x",gridTemplateColumns:"1fr 1fr"},{children:e}))}const U=t.forwardRef(({ariaDescribedBy:e,ariaValueMax:t,ariaValueMin:x,ariaValueNow:v,ariaValueText:h,assistiveText:S,autoComplete:F="off",autoFocus:g=!1,helpSourceLink:m,helpSourceText:C,isDisabled:U,isReadonly:w,isRequired:E=!1,isRequiredShown:R,isStepDownDisabled:I,isStepUpDisabled:N,hasSteppers:P=!1,label:_,labelEdge:V,labelStartWidth:B,messages:L,placeholder:O,prefix:M,suffix:H,textAlign:q,userAssistanceDensity:K,value:W,variant:G="default",virtualKeyboard:z,onInput:J,onCommit:Q,onSpin:X,onSpinComplete:Y,onStep:Z},$)=>{const{currentCommitValue:ee,dispatch:se}=A.useCurrentValueReducer({value:W}),ne=i.useCallback(e=>{se({type:"input",payload:e.value}),null==J||J(e)},[J,se]),te=i.useCallback(e=>{se({type:"commit",payload:e.value}),null==Q||Q(e)},[Q,se]),{isDisabled:ie,isReadonly:ae,labelEdge:re,labelStartWidth:oe,textAlign:le,userAssistanceDensity:ue}=r.useFormContext(),de=null!=U?U:ie,ce=null!=w?w:ae,pe=null!=V?V:re,be=null!=B?B:oe,xe=null!=q?q:le,fe=null!=K?K:ue,{enabledElementRef:ve,focusProps:he,isFocused:Se,readonlyElementRef:Fe}=a.useFocusableTextField({isDisabled:de,isReadonly:ce,ref:$}),{hoverProps:ge}=l.useHover({isDisabled:ce||de||!1}),{baseId:me,formFieldContext:Ae,inputProps:ye,labelProps:De,textFieldProps:Ce,userAssistanceProps:je}=u.useTextField({ariaDescribedBy:e,isDisabled:de,isFocused:Se,isReadonly:ce,labelEdge:pe,messages:L,styleVariant:G,value:W}),Te=de||I,Ue=de||N,{steppers:ke,stepHandlerProps:we}=(({hasSteppers:e,inputRef:n,isStepDownDisabled:t,isStepUpDisabled:a,onSpin:r,onSpinComplete:o,onStep:l})=>{const{bool:u,setTrue:d,setFalse:c}=f.useToggle(!1),{bool:p,setTrue:b,setFalse:x}=f.useToggle(!1),v=i.useRef(null),h=i.useRef(null),S=i.useRef("increase"),F=i.useRef(!1),g=i.useCallback(e=>{"ArrowDown"!==e.key&&"ArrowUp"!==e.key||(e.preventDefault(),e.stopPropagation(),u||"ArrowDown"===e.key&&t||"ArrowUp"===e.key&&a||(S.current="ArrowDown"===e.key?"decrease":"increase",d(),null==l||l({direction:S.current})))},[u,l,t,a,d]),m=i.useCallback(e=>{"ArrowDown"!==e.key&&"ArrowUp"!==e.key||(p&&(F.current=!0),c(),x(),e.stopPropagation())},[p,c,x]);i.useEffect(()=>(u&&!v.current&&(v.current=setTimeout(()=>{b()},500)),()=>{v.current&&(clearTimeout(v.current),v.current=null)}),[u,b]),i.useEffect(()=>(p?h.current||(h.current=setInterval(()=>{"increase"===S.current&&a||"decrease"===S.current&&t?(x(),F.current=!0):null==r||r({direction:S.current})},40)):h.current&&(clearInterval(h.current),h.current=null),()=>{h.current&&(clearInterval(h.current),h.current=null)}),[p,t,a,r,x]),i.useEffect(()=>{!p&&F.current&&(F.current=!1,null==o||o())},[p,o]);const A=i.useCallback(e=>{var s;null===(s=n.current)||void 0===s||s.focus(),null==l||l(e)},[l,n]),y=i.useCallback(e=>{e.preventDefault(),e.stopPropagation()},[]);return{steppers:e?s.jsxs(T,{children:[s.jsx("div",Object.assign({onMouseDown:e=>t&&y(e),"aria-hidden":"true"},{children:s.jsx(j,{direction:"decrease",isDisabled:t,onStep:A,variant:"arrowdown"})})),s.jsx("div",Object.assign({onMouseDown:e=>a&&y(e),"aria-hidden":"true"},{children:s.jsx(j,{direction:"increase",isDisabled:a,onStep:A,variant:"arrowup"})}))]}):void 0,stepHandlerProps:e?{onKeyDown:g,onKeyUp:m}:{}}})({hasSteppers:P,inputRef:ve,isStepDownDisabled:Te,isStepUpDisabled:Ue,onSpin:X,onSpinComplete:Y,onStep:Z}),{renderedPrefix:Ee,renderedSuffix:Re,text:Ie,ariaLabelledBy:Ne}=c.usePrefixSuffix({baseId:me,hasEndContent:void 0!==ke,hasInsideLabel:void 0!==_&&"inside"===pe,hasStartContent:!1,hasValue:Ae.hasValue,isDisabled:de,isFocused:Se,labelId:De.id,prefix:M,suffix:H,value:W}),Pe="none"!==pe?s.jsx(d.Label,Object.assign({},De,{children:_})):void 0,_e={label:"none"!==pe?Pe:void 0,labelEdge:"none"!==pe?pe:void 0,labelStartWidth:"none"!==pe?be:void 0},Ve="none"===pe?_:void 0,Be=de||ce?"efficient"!==fe?void 0:s.jsx(b.InlineUserAssistance,Object.assign({userAssistanceDensity:fe},je)):s.jsx(b.InlineUserAssistance,Object.assign({assistiveText:S,fieldLabel:_,helpSourceLink:m,helpSourceText:C,messages:L,isRequiredShown:R,userAssistanceDensity:fe},je));if(ce)return s.jsx(o.FormFieldContext.Provider,Object.assign({value:Ae},{children:s.jsx(p.ReadonlyTextField,Object.assign({role:"presentation",inlineUserAssistance:Be,onBlur:he.onfocusout,onFocus:he.onfocusin},_e,{children:s.jsx(y.ReadonlyTextFieldInput,{ariaDescribedBy:e,ariaLabel:Ve,ariaLabelledBy:De.id,as:"div",autoFocus:g,elementRef:Fe,textAlign:xe,value:Ie,hasInsideLabel:void 0!==_&&"inside"===pe})}))}));const Le=void 0===v||v.toString()!==h?h:void 0,Oe=s.jsxs(n.Fragment,{children:[Ee,s.jsx(D.TextFieldInput,Object.assign({ariaLabelledBy:Ne,ariaLabel:Ve,ariaValueMax:t,ariaValueMin:x,ariaValueNow:v,ariaValueText:Le,autoComplete:F,autoFocus:g,currentCommitValue:ee,hasEndContent:void 0!==ke,hasInsideLabel:void 0!==Pe&&"inside"===pe,hasPrefix:void 0!==Ee,hasStartContent:!1,hasSuffix:void 0!==Re,inputRef:ve,isRequired:E,placeholder:O,role:P?"spinbutton":void 0,textAlign:xe,type:k()?z:void 0,value:de?Ie:W,onCommit:te,onInput:ne},ye,we)),Re]});return s.jsx(o.FormFieldContext.Provider,Object.assign({value:Ae},{children:s.jsx(p.TextField,Object.assign({endContent:ke,inlineUserAssistance:Be,mainContent:Oe,onBlur:he.onfocusout,onFocus:he.onfocusin},Ce,_e,ge))}))});function k(){const e=C.getClientHints().deviceType;return"phone"===e||"tablet"===e}e.NumberInputText=U});
-//# sourceMappingURL=NumberInputText-33d397cf.js.map
+define(["exports","preact/jsx-runtime","preact","preact/compat","preact/hooks","./hooks/UNSAFE_useFocusableTextField","./hooks/UNSAFE_useFormContext","./hooks/UNSAFE_useFormFieldContext","./hooks/UNSAFE_useHover","./hooks/UNSAFE_useTextField","./UNSAFE_Label","./hooks/UNSAFE_usePrefixSuffix","./UNSAFE_TextField","./UNSAFE_UserAssistance","./utils/PRIVATE_clientHints","./hooks/UNSAFE_useToggle","./UNSAFE_Button","./index-f98775f6","./hooks/UNSAFE_useTabbableMode","./hooks/UNSAFE_useTranslationBundle","./Button-58691145","./UNSAFE_Grid","./hooks/UNSAFE_useCurrentValueReducer","./ReadonlyTextFieldInput-745b0d92","./TextFieldInput-ead5bb20","./clientHints-fd549a03"],function(e,s,n,t,i,a,r,o,l,u,d,c,p,b,x,f,v,h,S,F,g,m,A,y,D,C){"use strict";function j({direction:e,isDisabled:n,onStep:t,variant:a}){const r=F.useTranslationBundle("@oracle/oraclejet-preact"),o=r.inputNumber_increase(),l=r.inputNumber_decrease(),u="increase"===e?o:l,d=i.useCallback(()=>{null==t||t({direction:e})},[t,e]),c="arrowup"===a?s.jsx(h.SvgIcoChevronUp,{}):s.jsx(h.SvgIcoChevronDown,{});return s.jsx(S.TabbableModeContext.Provider,Object.assign({value:{isTabbable:!1}},{children:s.jsx(g.Button,{display:"icons",isDisabled:n,title:u,onAction:d,startIcon:c,variant:"borderless"})}))}function T({children:e}){return s.jsx(m.Grid,Object.assign({align:"center",gap:"1x",gridTemplateColumns:"1fr 1fr"},{children:e}))}const U=t.forwardRef(({ariaDescribedBy:e,ariaValueMax:t,ariaValueMin:x,ariaValueNow:v,ariaValueText:h,assistiveText:S,autoComplete:F="off",autoFocus:g=!1,helpSourceLink:m,helpSourceText:C,isDisabled:U,isReadonly:w,isRequired:E=!1,isRequiredShown:R,isStepDownDisabled:I,isStepUpDisabled:N,hasSteppers:P=!1,label:_,labelEdge:V,labelStartWidth:B,messages:L,placeholder:O,prefix:M,suffix:H,textAlign:q,userAssistanceDensity:K,value:W,variant:G="default",virtualKeyboard:z,onInput:J,onCommit:Q,onSpin:X,onSpinComplete:Y,onStep:Z},$)=>{const{currentCommitValue:ee,dispatch:se}=A.useCurrentValueReducer({value:W}),ne=i.useCallback(e=>{se({type:"input",payload:e.value}),null==J||J(e)},[J,se]),te=i.useCallback(e=>{se({type:"commit",payload:e.value}),null==Q||Q(e)},[Q,se]),{isDisabled:ie,isReadonly:ae,labelEdge:re,labelStartWidth:oe,textAlign:le,userAssistanceDensity:ue}=r.useFormContext(),de=null!=U?U:ie,ce=null!=w?w:ae,pe=null!=V?V:re,be=null!=B?B:oe,xe=null!=q?q:le,fe=null!=K?K:ue,{enabledElementRef:ve,focusProps:he,isFocused:Se,readonlyElementRef:Fe}=a.useFocusableTextField({isDisabled:de,isReadonly:ce,ref:$}),{hoverProps:ge}=l.useHover({isDisabled:ce||de||!1}),{baseId:me,formFieldContext:Ae,inputProps:ye,labelProps:De,textFieldProps:Ce,userAssistanceProps:je}=u.useTextField({ariaDescribedBy:e,isDisabled:de,isFocused:Se,isReadonly:ce,labelEdge:pe,messages:L,styleVariant:G,value:W}),Te=de||I,Ue=de||N,{steppers:ke,stepHandlerProps:we}=(({hasSteppers:e,inputRef:n,isStepDownDisabled:t,isStepUpDisabled:a,onSpin:r,onSpinComplete:o,onStep:l})=>{const{bool:u,setTrue:d,setFalse:c}=f.useToggle(!1),{bool:p,setTrue:b,setFalse:x}=f.useToggle(!1),v=i.useRef(null),h=i.useRef(null),S=i.useRef("increase"),F=i.useRef(!1),g=i.useCallback(e=>{"ArrowDown"!==e.key&&"ArrowUp"!==e.key||(e.preventDefault(),e.stopPropagation(),u||"ArrowDown"===e.key&&t||"ArrowUp"===e.key&&a||(S.current="ArrowDown"===e.key?"decrease":"increase",d(),null==l||l({direction:S.current})))},[u,l,t,a,d]),m=i.useCallback(e=>{"ArrowDown"!==e.key&&"ArrowUp"!==e.key||(p&&(F.current=!0),c(),x(),e.stopPropagation())},[p,c,x]);i.useEffect(()=>(u&&!v.current&&(v.current=setTimeout(()=>{b()},500)),()=>{v.current&&(clearTimeout(v.current),v.current=null)}),[u,b]),i.useEffect(()=>(p?h.current||(h.current=setInterval(()=>{"increase"===S.current&&a||"decrease"===S.current&&t?(x(),F.current=!0):null==r||r({direction:S.current})},40)):h.current&&(clearInterval(h.current),h.current=null),()=>{h.current&&(clearInterval(h.current),h.current=null)}),[p,t,a,r,x]),i.useEffect(()=>{!p&&F.current&&(F.current=!1,null==o||o())},[p,o]);const A=i.useCallback(e=>{var s;null===(s=n.current)||void 0===s||s.focus(),null==l||l(e)},[l,n]),y=i.useCallback(e=>{e.preventDefault(),e.stopPropagation()},[]);return{steppers:e?s.jsxs(T,{children:[s.jsx("div",Object.assign({onMouseDown:e=>t&&y(e),"aria-hidden":"true"},{children:s.jsx(j,{direction:"decrease",isDisabled:t,onStep:A,variant:"arrowdown"})})),s.jsx("div",Object.assign({onMouseDown:e=>a&&y(e),"aria-hidden":"true"},{children:s.jsx(j,{direction:"increase",isDisabled:a,onStep:A,variant:"arrowup"})}))]}):void 0,stepHandlerProps:e?{onKeyDown:g,onKeyUp:m}:{}}})({hasSteppers:P,inputRef:ve,isStepDownDisabled:Te,isStepUpDisabled:Ue,onSpin:X,onSpinComplete:Y,onStep:Z}),{renderedPrefix:Ee,renderedSuffix:Re,text:Ie,ariaLabelledBy:Ne}=c.usePrefixSuffix({baseId:me,hasEndContent:void 0!==ke,hasInsideLabel:void 0!==_&&"inside"===pe,hasStartContent:!1,hasValue:Ae.hasValue,isDisabled:de,isFocused:Se,labelId:De.id,prefix:M,suffix:H,value:W}),Pe="none"!==pe?s.jsx(d.Label,Object.assign({},De,{children:_})):void 0,_e={label:"none"!==pe?Pe:void 0,labelEdge:"none"!==pe?pe:void 0,labelStartWidth:"none"!==pe?be:void 0},Ve="none"===pe?_:void 0,Be=de||ce?"efficient"!==fe?void 0:s.jsx(b.InlineUserAssistance,Object.assign({userAssistanceDensity:fe},je)):s.jsx(b.InlineUserAssistance,Object.assign({assistiveText:S,fieldLabel:_,helpSourceLink:m,helpSourceText:C,messages:L,isRequiredShown:R,userAssistanceDensity:fe},je));if(ce)return s.jsx(o.FormFieldContext.Provider,Object.assign({value:Ae},{children:s.jsx(p.ReadonlyTextField,Object.assign({role:"presentation",inlineUserAssistance:Be,onBlur:he.onfocusout,onFocus:he.onfocusin},_e,{children:s.jsx(y.ReadonlyTextFieldInput,{ariaDescribedBy:e,ariaLabel:Ve,ariaLabelledBy:De.id,as:"div",autoFocus:g,elementRef:Fe,textAlign:xe,value:Ie,hasInsideLabel:void 0!==_&&"inside"===pe})}))}));const Le=void 0===v||v.toString()!==h?h:void 0,Oe=s.jsxs(n.Fragment,{children:[Ee,s.jsx(D.TextFieldInput,Object.assign({ariaLabelledBy:Ne,ariaLabel:Ve,ariaValueMax:t,ariaValueMin:x,ariaValueNow:v,ariaValueText:Le,autoComplete:F,autoFocus:g,currentCommitValue:ee,hasEndContent:void 0!==ke,hasInsideLabel:void 0!==Pe&&"inside"===pe,hasPrefix:void 0!==Ee,hasStartContent:!1,hasSuffix:void 0!==Re,inputRef:ve,isRequired:E,placeholder:O,role:P?"spinbutton":void 0,textAlign:xe,type:k()?z:void 0,value:de?Ie:W,onCommit:te,onInput:ne},ye,we)),Re]});return s.jsx(o.FormFieldContext.Provider,Object.assign({value:Ae},{children:s.jsx(p.TextField,Object.assign({endContent:ke,inlineUserAssistance:Be,mainContent:Oe,onBlur:he.onfocusout,onFocus:he.onfocusin},Ce,_e,ge))}))});function k(){const e=C.getClientHints().deviceType;return"phone"===e||"tablet"===e}e.NumberInputText=U});
+//# sourceMappingURL=NumberInputText-b58827bb.js.map