@oracle/oraclejet-preact 14.0.0

package/es/UNSAFE_MessageToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_MessageToast.js","sources":["../../src/UNSAFE_MessageToast/MessageToast.tsx","../../src/UNSAFE_MessageToast/index.ts"],"sourcesContent":["/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\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","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nexport { MessageToast } from './MessageToast';\nexport type { MessageToastItem } from './MessageToast';\n"],"names":["positions","stringLiteralArray","messageToastStyles","animationStates","entering","node","from","transform","offsetHeight","opacity","to","end","options","duration","exiting","initialAnimationStyles","MessageToast","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","renderedMessagesCount","nextMessageIndexToFocus","index","controller","ref","set","previousDataLength","message_navigationToMessagesRegion","messageToast_allMessagesClosed","sm","md","lg","messageTranslations","useMemo","close","confirmation","error","info","warning","warn","base","_jsx","LiveRegion","children","liveRegionText","_jsxs","EnvironmentProvider","Object","assign","environment","colorScheme","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"],"mappings":"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"}

package/es/UNSAFE_MeterBar.css

@@ -0,0 +1,45 @@
+._3utb13{display:inline-flex;pointer-events:none;}._3utb13:focus-visible{outline-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color);outline-style:dotted;outline-width:1px;}
+._13o4mua{width:100%;}
+._1335j5z{height:100%;}
+._1k5tp0d{cursor:pointer;touch-action:none;}
+._950ico{background-color:var(--oj-c-PRIVATE-DO-NOT-USE-meter-value-bg-color);border-radius:var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-sm);position:absolute;pointer-events:none;}
+._1o38t07{bottom:0%;left:50%;transform:translate(-50%,0);}
+._1w27u8u{top:50%;transform:translate(0,-50%);}
+.jf2px6{position:relative;display:flex;background-color:var(--oj-c-PRIVATE-DO-NOT-USE-meter-track-bg-color);border-radius:var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-sm);pointer-events:auto;}
+._14ql1n0{flex-direction:column-reverse;}
+._16w99dr{width:100%;height:var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-sm-size);}
+._1sy9gjx{width:var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-sm-size);height:100%;}
+._1ur92r{width:100%;height:var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-md-size);}
+._6uwxmr{width:var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-md-size);height:100%;}
+.ktwqkc{width:100%;height:var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-lg-size);}
+.o6xnzh{width:var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-lg-size);height:100%;}
+._1xozz08{margin-top:calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x)- var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-sm-size));}
+.b68vi6{margin-top:calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-md-size));}
+._5i7y0p{margin-top:calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-lg-size));}
+._1nf3ka6{margin-inline-start:calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-sm-size));}
+._1eslpuf{margin-inline-start:calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-md-size));}
+._195qkf1{margin-inline-start:calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-lg-size));}
+._1g21d2y{margin-inline-end:calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-sm-size));}
+._16wqynn{margin-inline-end:calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-md-size));}
+.ohrwc2{margin-inline-end:calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-lg-size));}
+.gzag4o{margin-bottom:calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-sm-size));}
+._1eawx0a{margin-bottom:calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-md-size));}
+._1c9ayzb{margin-bottom:calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-lg-size));}
+._1r7tfqw{border-radius:var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-sm) 0 0 var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-sm);}
+._170wz3x{border-radius:0 var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-sm) var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-sm) 0;border-width:0;}
+.oomin1{border-radius:0 0 var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-sm) var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-sm);}
+._1sbtmlg{border-radius:var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-sm) var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-sm) 0 0;border-width:0;}
+
+.a60snc{background-color:var(--oj-c-PRIVATE-DO-NOT-USE-dvt-reference-object-line-color);background-clip:padding-box;position:absolute;pointer-events:none;}
+.g3t9k5{border-color:var(--oj-c-PRIVATE-DO-NOT-USE-dvt-contrast-line-color);border-style:solid;border-width:0 0 1px 0;}
+._1r4cvbz{border-color:var(--oj-c-PRIVATE-DO-NOT-USE-dvt-contrast-line-color);border-style:solid;border-width:0 1px 0 0;}
+.otikqs{width:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x);height:2px;translate:0 1px;}
+._1vipbbc{translate:-1px 0;width:2px;height:var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x);}
+.hbr656{bottom:0%;}
+._19sp4eq{right:0%;}
+._1rayimm{left:0%;}
+
+._3j7odg{border-color:var(--oj-c-PRIVATE-DO-NOT-USE-dvt-contrast-line-color);border-style:solid;box-sizing:border-box;pointer-events:none;background-color:var(--oj-c-PRIVATE-DO-NOT-USE-meter-threshold-color);background-clip:padding-box;}
+._1ug12wu{border-width:1px 0 0 0;}
+.srbgbu{border-width:0 0 0 1px;}
+.qgsztm{border-width:0 1px 0 0;}

package/es/UNSAFE_MeterBar.js

@@ -0,0 +1,352 @@
+/* @oracle/oraclejet-preact: 14.0.0 */
+import { _ as __rest } from './tslib.es6-8b94ba02.js';
+import { jsx, jsxs, Fragment } from 'preact/jsx-runtime';
+import { sizeToCSS } from './utils/UNSAFE_size.js';
+import "./UNSAFE_MeterBar.css";
+import { classNames } from './utils/UNSAFE_classNames.js';
+import { mergeProps } from './utils/UNSAFE_mergeProps.js';
+import { useRef, useEffect } from 'preact/hooks';
+import { useUser } from './hooks/UNSAFE_useUser.js';
+import { usePointerEvents, useKeyboardEvents, useMeterDatatip } from './hooks/PRIVATE_useDvtMeterEvents.js';
+import { validateRange, getMeterAriaProps, getTrackAndIndicatorColor } from './utils/PRIVATE_meterUtils.js';
+import { BarTrack, BarValue } from './PRIVATE_Meter.js';
+import { useTabbableMode } from './hooks/UNSAFE_useTabbableMode.js';
+import './UNSAFE_Environment.js';
+import 'preact';
+import './UNSAFE_Layer.js';
+import 'preact/compat';
+import './hooks/UNSAFE_useTooltip.js';
+import './hooks/UNSAFE_useId.js';
+import './UNSAFE_Floating.js';
+import './index-14bba6f7.js';
+import './utils/PRIVATE_floatingUtils.js';
+import './utils/PRIVATE_refUtils.js';
+import './hooks/UNSAFE_useOutsideClick.js';
+import './utils/UNSAFE_arrayUtils.js';
+import './hooks/UNSAFE_useHover.js';
+import './hooks/UNSAFE_useToggle.js';
+import './hooks/UNSAFE_useFocus.js';
+import './hooks/UNSAFE_useTouch.js';
+import './hooks/UNSAFE_useAnimation.js';
+
+/**
+ * @license
+ * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.
+ * The Universal Permissive License (UPL), Version 1.0
+ * as shown at https://oss.oracle.com/licenses/upl/
+ * @ignore
+ */
+/**
+ * Returns the metric value of the clicked point.
+ * @param event The PointerEvent
+ * @param dimensionsRef Ref to stored dimensions of the meter bar.
+ * @param min The minimum value of the meter bar.
+ * @param max The maximum value of the meter bar.
+ * @param step The step value of the meter bar.
+ * @param orientation The orientation of the meter bar.
+ * @param isRtl Whether the reading mode is 'rtl'
+ * @returns The metric value of the clicked point.
+ */
+function getValue(event, dimensionsRef, min, max, step, orientation, isRtl) {
+    const dims = dimensionsRef.current;
+    if (!dims || dims.width === 0) {
+        return undefined;
+    }
+    let val;
+    if (orientation === 'horizontal') {
+        const width = event.offsetX;
+        val = min + ((max - min) * (isRtl ? dims.width - width : width)) / dims.width;
+    }
+    else {
+        const height = dims.height - event.offsetY;
+        val = min + ((max - min) * height) / dims.height;
+    }
+    val = Math.round(val / step) * step;
+    return Math.max(min, Math.min(max, val));
+}
+/**
+ * Returns the true dimension of the meter bar after first render. All dimensions are 0 for initial render.
+ * @param element The meter bar track HTML element
+ * @returns The dimension of the meter bar.
+ */
+function getDimensions(element) {
+    if (!element) {
+        return {
+            width: 0,
+            height: 0
+        };
+    }
+    const trackDims = element.getBoundingClientRect();
+    return {
+        width: trackDims.width,
+        height: trackDims.height
+    };
+}
+/**
+ * Returns object with 'start' and 'end' keys. Value for each key will be true if at least one ref line with correposnding position is present in meter bar.
+ * @param lines The array of reference lines.
+ * @returns Returns object with start and end keys.
+ */
+function getRefLinesInfo(lines) {
+    let refLineInfo = { start: false, end: false };
+    if (lines) {
+        refLineInfo = lines.reduce((acc, cur) => {
+            acc.start = acc.start || cur.position === 'start';
+            acc.end = acc.end || cur.position === 'end' || cur.position == null;
+            return acc;
+        }, refLineInfo);
+    }
+    return refLineInfo;
+}
+/**
+ * Returns the total component size taking into account the presence or absence of
+ * reference line in either or both side of reference bar. This method assumes that reference line
+ * is always larger than the track size.
+ * @param refLineInfo Object sepecifying if ref lines with start, end or both position are present.
+ * @param size The size of the meter bar.
+ * @returns {string}
+ */
+function getComponentSize(refLineInfo, size) {
+    const barTrackSize = `var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-${size}-size)`;
+    const refLineSize = 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-refline-size)';
+    if (refLineInfo.start && refLineInfo.end) {
+        return `calc((2 * ${refLineSize}) - ${barTrackSize})`;
+    }
+    if (refLineInfo.start || refLineInfo.end) {
+        return refLineSize;
+    }
+    return barTrackSize;
+}
+
+function ReferenceLineBar({
+  orientation,
+  percentage,
+  color,
+  position
+}) {
+  const isHoriz = orientation === 'horizontal';
+  const {
+    direction
+  } = useUser();
+  const isRtl = direction === 'rtl';
+  const isStartPos = position === 'start';
+  return jsx("div", {
+    class: classNames([styles$1.base, styles$1[`${orientation}Border`], styles$1[`${orientation}`], isStartPos ? isHoriz ? styles$1.horiontalStart : styles$1[`verticalStart${isRtl ? 'Rtl' : 'Ltr'}`] : '']),
+    style: {
+      left: isHoriz && !isRtl ? percentage : undefined,
+      right: isHoriz && isRtl ? percentage : undefined,
+      bottom: isHoriz ? undefined : percentage,
+      backgroundColor: color
+    }
+  });
+}
+const styles$1 = {
+  base: "a60snc",
+  verticalBorder: "g3t9k5",
+  horizontalBorder: "_1r4cvbz",
+  vertical: "otikqs",
+  horizontal: "_1vipbbc",
+  horiontalStart: "hbr656",
+  verticalStartLtr: "_19sp4eq",
+  verticalStartRtl: "_1rayimm"
+};
+
+function ThresholdBar(_a) {
+  var {
+    color,
+    length,
+    orientation
+  } = _a,
+      otherProps = __rest(_a, ["color", "length", "orientation"]);
+
+  const {
+    direction
+  } = useUser();
+  const isHoriz = orientation === 'horizontal';
+  const isRtl = direction === 'rtl';
+  return jsx("div", {
+    class: classNames([styles.base, isHoriz ? styles[`horizontalBarTrackSection${isRtl ? 'Rtl' : 'Ltr'}`] : styles['verticalBarTrackSection'], otherProps.class]),
+    style: {
+      width: isHoriz ? length : '100%',
+      height: isHoriz ? '100%' : length,
+      backgroundColor: color
+    }
+  });
+}
+const styles = {
+  base: "_3j7odg",
+  verticalBarTrackSection: "_1ug12wu",
+  horizontalBarTrackSectionRtl: "srbgbu",
+  horizontalBarTrackSectionLtr: "qgsztm"
+};
+
+/**
+ * A Meter bar displays information graphically in a rectangular bar, highlighting a specific metric value's progress in relation to its min, max, or thresholds.
+ */
+
+function MeterBar(_a) {
+  var _b, _c;
+
+  var {
+    max = 100,
+    min = 0,
+    value = 0,
+    step = 1,
+    length = '100%',
+    size = 'lg',
+    orientation = 'horizontal',
+    isTrackRendered = true,
+    thresholdDisplay = 'all',
+    indicatorSize = 1
+  } = _a,
+      props = __rest(_a, ["max", "min", "value", "step", "length", "size", "orientation", "isTrackRendered", "thresholdDisplay", "indicatorSize"]);
+
+  validateRange(min, max, value, step);
+  const isHoriz = orientation === 'horizontal';
+  const barTrackRef = useRef(null);
+  const dimensionsRef = useRef(getDimensions(null));
+  const {
+    direction
+  } = useUser();
+  const isRtl = direction === 'rtl';
+  useEffect(() => {
+    if (props.onCommit || props.onInput) {
+      dimensionsRef.current = getDimensions(barTrackRef.current);
+    }
+  }, [size, length, orientation, props.onCommit, props.onInput]);
+
+  const getValueFromEvent = event => {
+    // only evaluate value from bar track
+    if (event.target == barTrackRef.current) {
+      return getValue(event, dimensionsRef, min, max, step, orientation, isRtl);
+    }
+
+    return;
+  };
+
+  const pointerEventsProps = usePointerEvents(value, getValueFromEvent, barTrackRef, props.onCommit, props.onInput);
+  const keyboardEventsProps = useKeyboardEvents(value, min, max, step, props.onCommit, props.onInput);
+  const {
+    datatipContent,
+    datatipProps
+  } = useMeterDatatip(value, props.datatip, props.ariaDescribedBy);
+  const ariaLabelProps = getMeterAriaProps(value, min, max, `${value}`, props.accessibleLabel, props.ariaLabelledBy, props.thresholds);
+  const mergedProps = mergeProps(pointerEventsProps, keyboardEventsProps, datatipProps, ariaLabelProps);
+  const validIndicatorSize = Math.max(0, Math.min(1, indicatorSize));
+  const valueBarLength = `${(value - min) * 100 / (max - min)}%`;
+  const valueBarSize = `${validIndicatorSize * 100}%`;
+  const {
+    trackColor,
+    indicatorColor
+  } = getTrackAndIndicatorColor(value, thresholdDisplay, props.trackColor, props.indicatorColor, props.thresholds);
+  const sizeStyle = getRefLinesInfo(props.referenceLines);
+  const isInteractive = props.onCommit || props.onInput;
+  const {
+    isTabbable
+  } = useTabbableMode();
+  return jsxs(Fragment, {
+    children: [jsx("div", Object.assign({
+      tabIndex: !isTabbable ? -1 : 0,
+      role: "slider"
+    }, mergedProps, {
+      style: {
+        width: isHoriz ? sizeToCSS(length) : undefined,
+        height: isHoriz ? undefined : sizeToCSS(length)
+      },
+      class: classNames([componentStyles.base, componentStyles[orientation]])
+    }, {
+      children: jsxs(BarTrack, Object.assign({
+        ref: barTrackRef,
+        orientation: orientation,
+        color: !isTrackRendered || thresholdDisplay === 'all' && props.thresholds ? 'transparent' : trackColor,
+        class: classNames([barTrackStyles.base, isInteractive ? componentStyles.interactive : '', isHoriz ? '' : barTrackStyles.vertical, isHoriz ? barTrackStyles[`${size}Horizontal`] : barTrackStyles[`${size}Vertical`], ...getMarginClass(sizeStyle, size, isHoriz)])
+      }, {
+        children: [thresholdDisplay === 'all' && ((_b = props.thresholds) === null || _b === void 0 ? void 0 : _b.filter(threshold => threshold.max > min && threshold.max <= max).sort((a, b) => a.max - b.max).map((threshold, index, thresholds) => {
+          const diff = index === 0 ? threshold.max - min : threshold.max - thresholds[index - 1].max;
+          return jsxs(Fragment, {
+            children: [jsx(ThresholdBar, {
+              class: index === 0 ? trackSectionStyle[`${orientation}First`] : '',
+              orientation: orientation,
+              length: `${diff * 100 / (max - min)}%`,
+              color: threshold.color
+            }), isTrackRendered && index === thresholds.length - 1 && threshold.max < max ? jsx(ThresholdBar, {
+              class: trackSectionStyle[`${orientation}Last`],
+              color: trackColor,
+              orientation: orientation,
+              length: `${(max - thresholds[index].max) * 100 / (max - min)}%`
+            }) : '']
+          });
+        })), jsx(BarValue, {
+          length: valueBarLength,
+          size: valueBarSize,
+          orientation: orientation,
+          class: classNames([barValueStyles.base, barValueStyles[orientation]]),
+          color: indicatorColor
+        }), (_c = props.referenceLines) === null || _c === void 0 ? void 0 : _c.map(item => jsx(ReferenceLineBar, {
+          color: item.color,
+          orientation: orientation,
+          percentage: `${(item.value - min) * 100 / (max - min)}%`,
+          position: item.position
+        }))]
+      }))
+    })), datatipContent]
+  });
+}
+
+const getMarginClass = function (info, size, isHoriz) {
+  const className = [];
+
+  if (info.start) {
+    className.push(barTrackStyles[`${size}Margin${isHoriz ? 'Top' : 'Start'}`]);
+  }
+
+  if (info.end) {
+    className.push(barTrackStyles[`${size}Margin${isHoriz ? 'Bottom' : 'End'}`]);
+  }
+
+  return className;
+};
+
+const componentStyles = {
+  base: "_3utb13",
+  horizontal: "_13o4mua",
+  vertical: "_1335j5z",
+  interactive: "_1k5tp0d"
+};
+const barValueStyles = {
+  base: "_950ico",
+  vertical: "_1o38t07",
+  horizontal: "_1w27u8u"
+};
+const barTrackStyles = {
+  base: "jf2px6",
+  vertical: "_14ql1n0",
+  smHorizontal: "_16w99dr",
+  smVertical: "_1sy9gjx",
+  mdHorizontal: "_1ur92r",
+  mdVertical: "_6uwxmr",
+  lgHorizontal: "ktwqkc",
+  lgVertical: "o6xnzh",
+  smMarginTop: "_1xozz08",
+  mdMarginTop: "b68vi6",
+  lgMarginTop: "_5i7y0p",
+  smMarginStart: "_1nf3ka6",
+  mdMarginStart: "_1eslpuf",
+  lgMarginStart: "_195qkf1",
+  smMarginEnd: "_1g21d2y",
+  mdMarginEnd: "_16wqynn",
+  lgMarginEnd: "ohrwc2",
+  smMarginBottom: "gzag4o",
+  mdMarginBottom: "_1eawx0a",
+  lgMarginBottom: "_1c9ayzb"
+};
+const trackSectionStyle = {
+  horizontalFirst: "_1r7tfqw",
+  horizontalLast: "_170wz3x",
+  verticalFirst: "oomin1",
+  verticalLast: "_1sbtmlg"
+};
+
+export { MeterBar };
+/*  */
+//# sourceMappingURL=UNSAFE_MeterBar.js.map

package/es/UNSAFE_MeterBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UNSAFE_MeterBar.js","sources":["../../src/UNSAFE_MeterBar/MeterUtils.ts","../../src/UNSAFE_MeterBar/ReferenceLines.tsx","../../src/UNSAFE_MeterBar/ThresholdBar.tsx","../../src/UNSAFE_MeterBar/MeterBar.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 type { Ref } from 'preact/hooks';\nimport { ReferenceLine } from '../utils/UNSAFE_meterTypes';\n\ntype Dimensions = {\n  width: number;\n  height: number;\n};\n\n/**\n * Returns the metric value of the clicked point.\n * @param event The PointerEvent\n * @param dimensionsRef Ref to stored dimensions of the meter bar.\n * @param min The minimum value of the meter bar.\n * @param max The maximum value of the meter bar.\n * @param step The step value of the meter bar.\n * @param orientation The orientation of the meter bar.\n * @param isRtl Whether the reading mode is 'rtl'\n * @returns The metric value of the clicked point.\n */\nexport function getValue(\n  event: PointerEvent,\n  dimensionsRef: Ref<Dimensions>,\n  min: number,\n  max: number,\n  step: number,\n  orientation?: 'horizontal' | 'vertical',\n  isRtl?: boolean\n): number | undefined {\n  const dims = dimensionsRef.current;\n  if (!dims || dims.width === 0) {\n    return undefined;\n  }\n\n  let val;\n\n  if (orientation === 'horizontal') {\n    const width = event.offsetX;\n    val = min + ((max - min) * (isRtl ? dims.width - width : width)) / dims.width;\n  } else {\n    const height = dims.height - event.offsetY;\n    val = min + ((max - min) * height) / dims.height;\n  }\n  val = Math.round(val / step) * step;\n  return Math.max(min, Math.min(max, val));\n}\n\n/**\n * Returns the true dimension of the meter bar after first render. All dimensions are 0 for initial render.\n * @param element The meter bar track HTML element\n * @returns The dimension of the meter bar.\n */\nexport function getDimensions(element: HTMLElement | null): Dimensions {\n  if (!element) {\n    return {\n      width: 0,\n      height: 0\n    };\n  }\n  const trackDims = element.getBoundingClientRect();\n\n  return {\n    width: trackDims.width,\n    height: trackDims.height\n  };\n}\n\n/**\n * Returns object with 'start' and 'end' keys. Value for each key will be true if at least one ref line with correposnding position is present in meter bar.\n * @param lines The array of reference lines.\n * @returns Returns object with start and end keys.\n */\nexport function getRefLinesInfo(lines?: ReferenceLine[]): { start: boolean; end: boolean } {\n  let refLineInfo = { start: false, end: false };\n  if (lines) {\n    refLineInfo = lines.reduce((acc, cur) => {\n      acc.start = acc.start || cur.position === 'start';\n      acc.end = acc.end || cur.position === 'end' || cur.position == null;\n      return acc;\n    }, refLineInfo);\n  }\n  return refLineInfo;\n}\n\n/**\n * Returns the total component size taking into account the presence or absence of\n * reference line in either or both side of reference bar. This method assumes that reference line\n * is always larger than the track size.\n * @param refLineInfo Object sepecifying if ref lines with start, end or both position are present.\n * @param size The size of the meter bar.\n * @returns {string}\n */\nexport function getComponentSize(\n  refLineInfo: { start: boolean; end: boolean },\n  size: 'sm' | 'md' | 'lg'\n) {\n  const barTrackSize = `var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-${size}-size)`;\n  const refLineSize = 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-refline-size)';\n  if (refLineInfo.start && refLineInfo.end) {\n    return `calc((2 * ${refLineSize}) - ${barTrackSize})`;\n  }\n  if (refLineInfo.start || refLineInfo.end) {\n    return refLineSize;\n  }\n  return barTrackSize;\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 { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { useUser } from '../hooks/UNSAFE_useUser';\nimport { ColorProps } from '../utils/UNSAFE_interpolations/colors';\n\ntype ReferenceLineProps = {\n  orientation: 'horizontal' | 'vertical';\n  percentage: string;\n  position?: 'start' | 'end';\n  color?: ColorProps['color'];\n};\n\nexport function ReferenceLineBar({ orientation, percentage, color, position }: ReferenceLineProps) {\n  const isHoriz = orientation === 'horizontal';\n  const { direction } = useUser();\n  const isRtl = direction === 'rtl';\n  const isStartPos = position === 'start';\n  return (\n    <div\n      class={classNames([\n        styles.base,\n        styles[`${orientation}Border`],\n        styles[`${orientation}`],\n        isStartPos\n          ? isHoriz\n            ? styles.horiontalStart\n            : styles[`verticalStart${isRtl ? 'Rtl' : 'Ltr'}`]\n          : ''\n      ])}\n      style={{\n        left: isHoriz && !isRtl ? percentage : undefined,\n        right: isHoriz && isRtl ? percentage : undefined,\n        bottom: isHoriz ? undefined : percentage,\n        backgroundColor: color\n      }}></div>\n  );\n}\n\nconst styles = {\n  base: cssProps`${{\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-dvt-reference-object-line-color)',\n    backgroundClip: 'padding-box',\n    position: 'absolute',\n    pointerEvents: 'none'\n  }}`,\n  verticalBorder: cssProps`${{\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-dvt-contrast-line-color)',\n    borderStyle: 'solid',\n    borderWidth: '0 0 1px 0'\n  }}`,\n  horizontalBorder: cssProps`${{\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-dvt-contrast-line-color)',\n    borderStyle: 'solid',\n    borderWidth: '0 1px 0 0'\n  }}`,\n  vertical: cssProps`${{\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x)',\n    height: '2px',\n    translate: '0 1px'\n  }}`,\n  horizontal: cssProps`${{\n    translate: '-1px 0',\n    width: '2px',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x)'\n  }}`,\n  horiontalStart: cssProps`${{\n    bottom: '0%'\n  }}`,\n  verticalStartLtr: cssProps`${{\n    right: '0%'\n  }}`,\n  verticalStartRtl: cssProps`${{\n    left: '0%'\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 { useUser } from '../hooks/UNSAFE_useUser';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { HTMLAttributesSignalExcluded } from '../utils/UNSAFE_attributeUtils';\nimport { ColorProps } from '../utils/UNSAFE_interpolations/colors';\n\ntype IntrinsicProps = Pick<HTMLAttributesSignalExcluded<HTMLDivElement>, 'class'>;\ntype ThresholdBarProps = IntrinsicProps & {\n  color?: ColorProps['color'];\n  length: string;\n  orientation: 'horizontal' | 'vertical';\n};\n\nexport function ThresholdBar({ color, length, orientation, ...otherProps }: ThresholdBarProps) {\n  const { direction } = useUser();\n  const isHoriz = orientation === 'horizontal';\n  const isRtl = direction === 'rtl';\n  return (\n    <div\n      class={classNames([\n        styles.base,\n        isHoriz\n          ? styles[`horizontalBarTrackSection${isRtl ? 'Rtl' : 'Ltr'}`]\n          : styles['verticalBarTrackSection'],\n        otherProps.class\n      ])}\n      style={{\n        width: isHoriz ? length : '100%',\n        height: isHoriz ? '100%' : length,\n        backgroundColor: color\n      }}></div>\n  );\n}\n\nconst styles = {\n  base: cssProps`${{\n    borderColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-dvt-contrast-line-color)',\n    borderStyle: 'solid',\n    boxSizing: 'border-box',\n    pointerEvents: 'none',\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-threshold-color)',\n    backgroundClip: 'padding-box'\n  }}`,\n  verticalBarTrackSection: cssProps`${{\n    borderWidth: '1px 0 0 0'\n  }}`,\n  horizontalBarTrackSectionRtl: cssProps`${{\n    borderWidth: '0 0 0 1px'\n  }}`,\n  horizontalBarTrackSectionLtr: cssProps`${{\n    borderWidth: '0 1px 0 0'\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 { sizeToCSS } from '../utils/UNSAFE_size';\nimport { cssProps } from '@oracle/oraclejet-cssprops';\nimport { classNames } from '../utils/UNSAFE_classNames';\nimport { mergeProps } from '../utils/UNSAFE_mergeProps';\nimport { useEffect, useRef } from 'preact/hooks';\nimport { useUser } from '../hooks/UNSAFE_useUser';\nimport {\n  usePointerEvents,\n  useKeyboardEvents,\n  useMeterDatatip\n} from '../hooks/PRIVATE_useDvtMeterEvents';\n\nimport {\n  getMeterAriaProps,\n  validateRange,\n  getTrackAndIndicatorColor\n} from '../utils/PRIVATE_meterUtils';\n\nimport { Threshold } from '../utils/UNSAFE_meterTypes';\nimport { BarTrack, BarValue } from '../PRIVATE_Meter';\nimport { getDimensions, getRefLinesInfo, getValue } from './MeterUtils';\nimport { ReferenceLineBar } from './ReferenceLines';\nimport { ThresholdBar } from './ThresholdBar';\nimport { MeterBarProps } from './MeterBar.types';\nimport { useTabbableMode } from '../hooks/UNSAFE_useTabbableMode';\n/**\n * A Meter bar displays information graphically in a rectangular bar, highlighting a specific metric value's progress in relation to its min, max, or thresholds.\n */\nexport function MeterBar({\n  max = 100,\n  min = 0,\n  value = 0,\n  step = 1,\n  length = '100%',\n  size = 'lg',\n  orientation = 'horizontal',\n  isTrackRendered = true,\n  thresholdDisplay = 'all',\n  indicatorSize = 1,\n  ...props\n}: MeterBarProps) {\n  validateRange(min, max, value, step);\n\n  const isHoriz = orientation === 'horizontal';\n  const barTrackRef = useRef<HTMLDivElement>(null);\n  const dimensionsRef = useRef(getDimensions(null));\n  const { direction } = useUser();\n  const isRtl = direction === 'rtl';\n\n  useEffect(() => {\n    if (props.onCommit || props.onInput) {\n      dimensionsRef.current = getDimensions(barTrackRef.current);\n    }\n  }, [size, length, orientation, props.onCommit, props.onInput]);\n\n  const getValueFromEvent = (event: PointerEvent): number | undefined => {\n    // only evaluate value from bar track\n    if (event.target == barTrackRef.current) {\n      return getValue(event, dimensionsRef, min, max, step, orientation, isRtl);\n    }\n    return;\n  };\n\n  const pointerEventsProps = usePointerEvents(\n    value,\n    getValueFromEvent,\n    barTrackRef,\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 ariaLabelProps = getMeterAriaProps(\n    value,\n    min,\n    max,\n    `${value}`,\n    props.accessibleLabel,\n    props.ariaLabelledBy,\n    props.thresholds\n  );\n  const mergedProps = mergeProps(\n    pointerEventsProps,\n    keyboardEventsProps,\n    datatipProps,\n    ariaLabelProps\n  );\n\n  const validIndicatorSize = Math.max(0, Math.min(1, indicatorSize));\n  const valueBarLength = `${((value - min) * 100) / (max - min)}%`;\n  const valueBarSize = `${validIndicatorSize * 100}%`;\n  const { trackColor, indicatorColor } = getTrackAndIndicatorColor(\n    value,\n    thresholdDisplay,\n    props.trackColor,\n    props.indicatorColor,\n    props.thresholds\n  );\n\n  const sizeStyle = getRefLinesInfo(props.referenceLines);\n  const isInteractive = props.onCommit || props.onInput;\n  const { isTabbable } = useTabbableMode();\n  return (\n    <>\n      <div\n        tabIndex={!isTabbable ? -1 : 0}\n        role=\"slider\"\n        {...mergedProps}\n        style={{\n          width: isHoriz ? sizeToCSS(length) : undefined,\n          height: isHoriz ? undefined : sizeToCSS(length)\n        }}\n        class={classNames([componentStyles.base, componentStyles[orientation]])}>\n        <BarTrack\n          ref={barTrackRef}\n          orientation={orientation}\n          color={\n            !isTrackRendered || (thresholdDisplay === 'all' && props.thresholds)\n              ? 'transparent'\n              : trackColor\n          }\n          class={classNames([\n            barTrackStyles.base,\n            isInteractive ? componentStyles.interactive : '',\n            isHoriz ? '' : barTrackStyles.vertical,\n            isHoriz ? barTrackStyles[`${size}Horizontal`] : barTrackStyles[`${size}Vertical`],\n            ...getMarginClass(sizeStyle, size, isHoriz)\n          ])}>\n          {thresholdDisplay === 'all' &&\n            props.thresholds\n              ?.filter((threshold: Threshold) => threshold.max > min && threshold.max <= max)\n              .sort((a, b) => a.max - b.max)\n              .map((threshold: Threshold, index, thresholds) => {\n                const diff =\n                  index === 0 ? threshold.max - min : threshold.max - thresholds[index - 1].max;\n                return (\n                  <>\n                    <ThresholdBar\n                      class={index === 0 ? trackSectionStyle[`${orientation}First`] : ''}\n                      orientation={orientation}\n                      length={`${(diff * 100) / (max - min)}%`}\n                      color={threshold.color}\n                    />\n\n                    {isTrackRendered && index === thresholds.length - 1 && threshold.max < max ? (\n                      <ThresholdBar\n                        class={trackSectionStyle[`${orientation}Last`]}\n                        color={trackColor}\n                        orientation={orientation}\n                        length={`${((max - thresholds[index].max) * 100) / (max - min)}%`}\n                      />\n                    ) : (\n                      ''\n                    )}\n                  </>\n                );\n              })}\n          <BarValue\n            length={valueBarLength}\n            size={valueBarSize}\n            orientation={orientation}\n            class={classNames([barValueStyles.base, barValueStyles[orientation]])}\n            color={indicatorColor}\n          />\n          {props.referenceLines?.map((item) => (\n            <ReferenceLineBar\n              color={item.color}\n              orientation={orientation}\n              percentage={`${((item.value - min) * 100) / (max - min)}%`}\n              position={item.position}\n            />\n          ))}\n        </BarTrack>\n      </div>\n      {datatipContent}\n    </>\n  );\n}\n\nconst getMarginClass = function (\n  info: { start: boolean; end: boolean },\n  size: 'sm' | 'md' | 'lg',\n  isHoriz: boolean\n) {\n  const className = [];\n  if (info.start) {\n    className.push(barTrackStyles[`${size}Margin${isHoriz ? 'Top' : 'Start'}`]);\n  }\n\n  if (info.end) {\n    className.push(barTrackStyles[`${size}Margin${isHoriz ? 'Bottom' : 'End'}`]);\n  }\n  return className;\n};\n\nconst componentStyles = {\n  base: cssProps`${{\n    display: 'inline-flex',\n    pointerEvents: '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  horizontal: cssProps`${{\n    width: '100%'\n  }}`,\n  vertical: cssProps`${{\n    height: '100%'\n  }}`,\n  interactive: cssProps`${{\n    cursor: 'pointer',\n    touchAction: 'none'\n  }}`\n};\n\nconst barValueStyles = {\n  base: cssProps`${{\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-value-bg-color)',\n    borderRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-sm)',\n    position: 'absolute',\n    pointerEvents: 'none'\n  }}`,\n  vertical: cssProps`${{\n    bottom: '0%',\n    left: '50%',\n    transform: 'translate(-50%, 0)'\n  }}`,\n  horizontal: cssProps`${{\n    top: '50%',\n    transform: 'translate(0, -50%)'\n  }}`\n};\n\nconst barTrackStyles = {\n  base: cssProps`${{\n    position: 'relative',\n    display: 'flex',\n    backgroundColor: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-track-bg-color)',\n    borderRadius: 'var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-sm)',\n    pointerEvents: 'auto'\n  }}`,\n  vertical: cssProps`${{\n    flexDirection: 'column-reverse'\n  }}`,\n  smHorizontal: cssProps`${{\n    width: '100%',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-sm-size)'\n  }}`,\n  smVertical: cssProps`${{\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-sm-size)',\n    height: '100%'\n  }}`,\n  mdHorizontal: cssProps`${{\n    width: '100%',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-md-size)'\n  }}`,\n  mdVertical: cssProps`${{\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-md-size)',\n    height: '100%'\n  }}`,\n  lgHorizontal: cssProps`${{\n    width: '100%',\n    height: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-lg-size)'\n  }}`,\n  lgVertical: cssProps`${{\n    width: 'var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-lg-size)',\n    height: '100%'\n  }}`,\n  smMarginTop: cssProps`${{\n    marginTop:\n      'calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x)- var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-sm-size))'\n  }}`,\n  mdMarginTop: cssProps`${{\n    marginTop:\n      'calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-md-size))'\n  }}`,\n  lgMarginTop: cssProps`${{\n    marginTop:\n      'calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-lg-size))'\n  }}`,\n  smMarginStart: cssProps`${{\n    marginInlineStart:\n      'calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-sm-size))'\n  }}`,\n  mdMarginStart: cssProps`${{\n    marginInlineStart:\n      'calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-md-size))'\n  }}`,\n  lgMarginStart: cssProps`${{\n    marginInlineStart:\n      'calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-lg-size))'\n  }}`,\n  smMarginEnd: cssProps`${{\n    marginInlineEnd:\n      'calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-sm-size))'\n  }}`,\n  mdMarginEnd: cssProps`${{\n    marginInlineEnd:\n      'calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-md-size))'\n  }}`,\n  lgMarginEnd: cssProps`${{\n    marginInlineEnd:\n      'calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-lg-size))'\n  }}`,\n  smMarginBottom: cssProps`${{\n    marginBottom:\n      'calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-sm-size))'\n  }}`,\n  mdMarginBottom: cssProps`${{\n    marginBottom:\n      'calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-md-size))'\n  }}`,\n  lgMarginBottom: cssProps`${{\n    marginBottom:\n      'calc(var(--oj-c-PRIVATE-DO-NOT-USE-core-spacing-5x) - var(--oj-c-PRIVATE-DO-NOT-USE-meter-bar-lg-size))'\n  }}`\n};\n\nconst trackSectionStyle = {\n  horizontalFirst: cssProps`${{\n    borderRadius:\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-sm) 0 0 var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-sm)'\n  }}`,\n  horizontalLast: cssProps`${{\n    borderRadius:\n      '0 var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-sm) var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-sm) 0',\n    borderWidth: '0'\n  }}`,\n  verticalFirst: cssProps`${{\n    borderRadius:\n      '0 0 var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-sm) var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-sm)'\n  }}`,\n  verticalLast: cssProps`${{\n    borderRadius:\n      'var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-sm) var(--oj-c-PRIVATE-DO-NOT-USE-core-border-radius-sm) 0 0',\n    borderWidth: '0'\n  }}`\n};\n"],"names":["ReferenceLineBar","orientation","percentage","color","position","isHoriz","direction","useUser","isRtl","isStartPos","_jsx","class","classNames","styles","base","left","undefined","backgroundColor","ThresholdBar","_a","otherProps","MeterBar","barTrackRef","useRef","props","onCommit","onInput","size","length","getValueFromEvent","event","target","current","getValue","dimensionsRef","min","max","step","pointerEventsProps","usePointerEvents","value","datatipContent","datatipProps","useMeterDatatip","datatip","ariaDescribedBy","mergedProps","mergeProps","keyboardEventsProps","ariaLabelProps","validIndicatorSize","Math","indicatorSize","valueBarLength","valueBarSize","isTabbable","useTabbableMode","width","sizeToCSS","height","componentStyles","children","_jsxs","BarTrack","Object","assign","ref","isTrackRendered","thresholdDisplay","thresholds","trackColor","barTrackStyles","getMarginClass","sizeStyle","diff","index","threshold","_Fragment","trackSectionStyle","info","className","barValueStyles"],"mappings":"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"}

package/es/UNSAFE_MeterCircle.css

@@ -0,0 +1,47 @@
+.qzvstu{display:inline-block;pointer-events:none;}
+._12fy50l{touch-action:none;}._12fy50l:focus-visible{outline-color:var(--oj-c-PRIVATE-DO-NOT-USE-core-focus-border-color);outline-style:dotted;outline-width:1px;}
+.yubw96{border-radius:50%;}
+.nga9fd{border-radius:50% 50% 0 0 / 100% 100% 0 0;border-bottom:0;}
+.vb1bn9{border-radius:0% 0% 50% 50% / 0% 0% 100% 100%;border-top:0;}
+.hdf3rj{border-radius:0 100% 100% 0 / 0% 50% 50% 0%;border-left:0;}
+._4axnr0{border-radius:100% 0 0 100% / 50% 0 0 50%;border-right:0;}
+.qyrwrp{margin:1rem 1rem 0 1rem;}
+.mxuybm{margin:0.75rem 0.75rem 0 0.75rem;}
+.o77lss{margin:0.5rem 0.5rem 0 0.5rem;}
+._679gib{margin:0 1rem 1rem 1rem;}
+.lut1nu{margin:0 0.75rem 0.75rem 0.75rem;}
+._1025ms8{margin:0 0.5rem 0.5rem 0.5rem;}
+.wo07db{margin:1rem 0 1rem 1rem;}
+._16ti7sg{margin:0.75rem 0 0.75rem 0.75rem;}
+._7q3vzj{margin:0.5rem 0 0.5rem 0.5rem;}
+._152e44h{margin:1rem 1rem 1rem 0;}
+._1cdyoiy{margin:0.75rem 0.75rem 0.75rem 0;}
+.une35s{margin:0.5rem 0.5rem 0.5rem 0;}
+.wzivam{margin:1rem;}
+.zn2jfg{margin:0.75rem;}
+.cq4evr{margin:0.5rem;}
+.x42ace{height:calc(var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-lg-size) / 2 );width:var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-lg-size);}
+.azdfur{width:calc(var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-lg-size) / 2 );height:var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-lg-size);}
+._1w26tmx{height:calc(var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-sm-size) / 2 );width:var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-sm-size);}
+.a2ydch{width:calc(var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-sm-size) / 2 );height:var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-sm-size);}
+._5yssj{height:calc(var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-md-size) / 2 );width:var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-md-size);}
+.i4i31j{width:calc(var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-md-size) / 2 );height:var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-md-size);}
+._1jtwh41{width:var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-sm-size);height:var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-sm-size);}
+._1pc4ma7{width:var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-md-size);height:var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-md-size);}
+._17kom2q{width:var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-lg-size);height:var(--oj-c-PRIVATE-DO-NOT-USE-meter-circle-lg-size);}
+.j5ygrs{pointer-events:none;width:100%;height:100%;line-height:initial;}
+._1x0kdjj{border-color:var(--oj-c-PRIVATE-DO-NOT-USE-meter-threshold-color);}
+.f48p8g > *{margin-top:0 !important;margin-bottom:0 !important;margin-left:0 !important;margin-right:0 !important;}
+._13wjw02{position:relative;box-sizing:border-box;cursor:pointer;pointer-events:auto;}
+.c2x535{width:100%;height:100%;position:absolute;border-style:solid;box-sizing:border-box;pointer-events:none;border-color:var(--oj-c-PRIVATE-DO-NOT-USE-meter-track-bg-color);}
+._18gcf96{border-width:var(--oj-c-PRIVATE-DO-NOT-USE-meter-sm-track-size);}
+._3fw1y2{border-width:var(--oj-c-PRIVATE-DO-NOT-USE-meter-md-track-size);}
+._15b6cuc{border-width:var(--oj-c-PRIVATE-DO-NOT-USE-meter-lg-track-size);}
+._14q5ois{border-color:var(--oj-c-PRIVATE-DO-NOT-USE-meter-value-bg-color);border-style:solid;box-sizing:border-box;position:absolute;pointer-events:none;}
+.qkjabh{border-radius:50%;top:50%;left:50%;translate:-50% -50%;}
+._13z3793{top:100%;left:50%;translate:-50% -100%;}
+._8vjhmg{top:50%;translate:0 -50%;}
+.lnx6r1{left:100%;top:50%;translate:-100% -50%;}
+.zmrwkq{left:50%;translate:-50% 0;}
+
+.xzginw{height:2px;position:absolute;transform-origin:0 50%;background-clip:padding-box;}