@oracle/oraclejet-preact 20.0.4 → 20.1.0

package/cjs/useTabBar-114caa2f.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabBar-114caa2f.js","sources":["../../src/hooks/PRIVATE_useTabBar/useTabBar.ts"],"sourcesContent":["import { useState, useRef, useEffect, useCallback } from 'preact/hooks';\nimport { mergeProps } from '../../utils/UNSAFE_mergeProps';\nimport {\n  getPrevNextKeyUsingRef,\n  getFirstVisibleKey,\n  getKey,\n  keyExtractor,\n  findElementByKey,\n  getItemKeysArray\n} from '../../utils/PRIVATE_collectionUtils';\nimport { useCollectionFocusRing } from '../PRIVATE_useCollectionFocusRing';\nimport { useCurrentKey } from '../PRIVATE_useCurrentKey';\nimport { useId } from '../UNSAFE_useId';\nimport type { ComponentProps, ContextType, RefObject } from 'preact';\nimport type { TabBarContext, TabBarLayout } from '../../UNSAFE_TabBarCommon';\nimport { useReorderableContext } from '../../hooks/PRIVATE_useReorderable/useReorderableContext';\nimport { Menu } from '../../UNSAFE_Menu';\nimport { TabBarContextMenuConfig } from '../../UNSAFE_TabBarCommon';\nimport { useContextMenuGesture } from '../../hooks/UNSAFE_useContextMenuGesture';\nimport { getDefaultContextMenu } from '../../UNSAFE_TabBar/TabBarContextMenu';\nimport { TabBarItemContextMenuContext } from '../../UNSAFE_TabBarCommon/TabBar.types';\nimport { useUser } from '../../hooks/UNSAFE_useUser';\nimport { useTranslationBundle } from '../../hooks/UNSAFE_useTranslationBundle';\nimport { BundleType } from '../../resources/nls/bundle';\n\ntype TabBarContextValue = ContextType<typeof TabBarContext>;\n\nexport type useTabBarOptions<K extends string | number> = {\n  class?: string;\n  display?: TabBarContextValue['display'];\n  edge?: 'bottom' | 'top';\n  onRemove?: TabBarContextValue['onRemove'];\n  onSelect?: TabBarContextValue['onSelect'];\n  ref?: RefObject<HTMLDivElement>;\n  selection?: TabBarContextValue['selection'];\n  size?: TabBarContextValue['size'];\n  children?: ComponentProps<typeof TabBarLayout>['children'];\n  contextMenuConfig?: TabBarContextMenuConfig<K>;\n};\n\nconst ITEM_SELECTOR = '[role=\"tab\"]';\nconst REMOVABLE_ICON_SELECTOR = '[data-oj-tabbar-item-remove-icon=\"true\"]';\nexport const REMOVABLE_ITEM_ATTRIBUTE = 'data-oj-removable';\n\ntype MenuProps = Pick<\n  ComponentProps<typeof Menu>,\n  'anchorRef' | 'initialFocus' | 'placement' | 'offsetValue' | 'isOpen'\n>;\n\nconst TOUCH_OFFSET_VALUE = 40;\n\nconst menuPropGestureStates: Record<\n  'mouse' | 'keyboard' | 'touch',\n  Omit<Required<MenuProps>, 'anchorRef' | 'isOpen'>\n> = {\n  mouse: {\n    initialFocus: 'menu',\n    placement: 'bottom-start',\n    offsetValue: 0\n  },\n  keyboard: {\n    initialFocus: 'firstItem',\n    placement: 'bottom-start',\n    offsetValue: 0\n  },\n  touch: {\n    initialFocus: 'menu',\n    placement: 'end',\n    offsetValue: TOUCH_OFFSET_VALUE\n  }\n};\n\nconst initialMenuProps: MenuProps = {\n  isOpen: false,\n  initialFocus: 'menu',\n  placement: 'bottom-start',\n  offsetValue: 0,\n  anchorRef: { current: null }\n};\n\n/**\n * Implements TabBar behavior for focus and keyboad handling\n */\nexport function useTabBar<K extends string | number>(options: useTabBarOptions<K>) {\n  const {\n    children,\n    class: className,\n    display,\n    edge = 'top',\n    selection,\n    onSelect,\n    onRemove,\n    ref: userRef,\n    size,\n    contextMenuConfig\n  } = options;\n\n  const { direction } = useUser();\n  const translations = useTranslationBundle<BundleType>('@oracle/oraclejet-preact');\n\n  const internalRef = useRef<HTMLDivElement>(null);\n  const rootRef = userRef || internalRef;\n\n  const tabId = useId();\n  const [currentKey, setCurrentKey] = useState<K | undefined>(selection as K);\n  const [hideTooltip, setHideTooltip] = useState(false);\n\n  const tabItemPrefix = tabId + '_';\n\n  const contextMenuDescriptionId = 'contextMenu_' + useId();\n  const contextMenuDescription = translations.tabbar_labelContextMenu();\n\n  /**\n   * A reference to the previous set of tab keys that this TabBar\n   * contains before children were re-rendered. In the event the \"current\" tab\n   * is removed and the \"currentKey\" reference is broken, we can redirect\n   * the \"currentKey\" to another tab based on the index of the removed tab.\n   */\n  const prevTabKeys = useRef<(string | number | undefined)[]>();\n\n  useEffect(() => {\n    if (rootRef.current) {\n      const tabKeys = getItemKeysArray(rootRef.current, ITEM_SELECTOR);\n      if (currentKey == null && tabKeys) {\n        if (selection != null && tabKeys.includes(selection as K)) {\n          setCurrentKey(selection as K);\n        } else if (tabKeys.length > 0) {\n          setCurrentKey(tabKeys[0] as K);\n        }\n      }\n      if (currentKey != null && tabKeys && !tabKeys.includes(currentKey as K)) {\n        //If prevTabs does not exist set the first visible key as currentKey\n        prevTabKeys.current\n          ? setCurrentKey(findNextValidKey(currentKey, tabKeys, prevTabKeys.current) as K)\n          : setCurrentKey(tabKeys[0] as K);\n      }\n      prevTabKeys.current = tabKeys as K[];\n    }\n  }, [children, currentKey, rootRef, selection]);\n\n  const [showFocusRing, focusRingProps] = useCollectionFocusRing(rootRef, [\n    'ArrowRight',\n    'ArrowLeft',\n    'Home',\n    'End'\n  ]);\n\n  const reorderableContext = useReorderableContext();\n  const { currentKeyProps } = useCurrentKey(\n    (element) =>\n      onRemove\n        ? extractOnlyItemKey(element, ITEM_SELECTOR, REMOVABLE_ICON_SELECTOR)\n        : keyExtractor(element, ITEM_SELECTOR),\n    false,\n    false,\n    undefined,\n    undefined,\n    getPrevNextKeyUsingRef(rootRef, currentKey, true, ITEM_SELECTOR),\n    getPrevNextKeyUsingRef(rootRef, currentKey, false, ITEM_SELECTOR),\n    currentKey,\n    (detail) => {\n      const key = detail.value as K;\n      setCurrentKey(key);\n      setHideTooltip(false);\n    }\n  );\n\n  useEffect(() => {\n    if (reorderableContext) {\n      reorderableContext.currentItemKey.current = currentKey;\n    }\n  }, [currentKey, reorderableContext]);\n\n  const onKeyDown = (event: KeyboardEvent) => {\n    if (rootRef.current && currentKey != null) {\n      if (event.key === 'Home' || event.key === 'End') {\n        const tabBarItemKey = getItemKeysArray(rootRef.current, ITEM_SELECTOR);\n        event.preventDefault();\n        setCurrentKey?.(tabBarItemKey[event.key === 'Home' ? 0 : tabBarItemKey.length - 1] as K);\n      }\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        onSelect?.({ value: currentKey });\n      }\n      if (event.key === 'Delete') {\n        const tabBarItem = findElementByKey(\n          rootRef.current,\n          currentKey,\n          ITEM_SELECTOR\n        ) as HTMLElement;\n        if (tabBarItem.hasAttribute(REMOVABLE_ITEM_ATTRIBUTE)) {\n          onRemove?.({ value: currentKey });\n        }\n      }\n      if (event.key === 'Escape') {\n        setHideTooltip(true);\n      }\n    }\n  };\n\n  const onFocus = () => {\n    if (rootRef.current && currentKey === undefined) {\n      const key = getFirstVisibleKey(rootRef.current, ITEM_SELECTOR);\n      if (key != null) {\n        setCurrentKey(key as K);\n      }\n    }\n  };\n\n  const [contextMenuContext, setContextMenuContext] = useState<TabBarItemContextMenuContext<K>>();\n\n  const [menuProps, setMenuProps] = useState<MenuProps>(initialMenuProps);\n  const [accStatusInfo, setAccStatusInfo] = useState<string>();\n\n  const { triggerProps } = useContextMenuGesture(\n    ({ gesture, anchor, target }) => {\n      let anchorBasedOnGesture = anchor;\n      let itemKey = currentKey as K;\n      if (gesture === 'keyboard') {\n        //We find the element where the position of the menu is going to be based of\n        const elem = findElementByKey(\n          rootRef.current as HTMLElement,\n          currentKey as K,\n          ITEM_SELECTOR\n        );\n        //We set the correct anchor\n        anchorBasedOnGesture = elem ? elem : anchor;\n      } else {\n        //We search for the key using the target of the event\n        const key = keyExtractor(target as HTMLElement, ITEM_SELECTOR);\n\n        //On touch devices, the keyExtractor returns null because target of touch event is the entire tabbar. Hence we make use of currentkey since the context menu is always launched from selected item and its key is currentKey\n        itemKey = key != null ? (key as K) : (currentKey as K);\n      }\n      let tabKeysArray;\n      let isRemovableItem = false;\n      const isReorderable = reorderableContext?.onReorder != null;\n      if (rootRef.current) {\n        tabKeysArray = isReorderable\n          ? (getItemKeysArray(rootRef.current, ITEM_SELECTOR) as K[])\n          : undefined;\n        isRemovableItem =\n          getItemAttribute(itemKey, rootRef.current, REMOVABLE_ITEM_ATTRIBUTE) != null;\n      }\n      const isRemovable = onRemove != null && isRemovableItem;\n      const defaultContext = getDefaultContextMenu<K>({\n        // For default menu items the existence of REMOVABLE_ICON_SELECTOR is the indicator that it is removable because we render the default menu in touch devices not the application.\n        // Furthermore in corepack due to delegations onRemove is always defined as it is a even handler hence not a good check for isRemovable.\n        isRemovable: isRemovable,\n        handleRemove: onRemove,\n        handleReorder: isReorderable ? reorderableContext.onReorder : undefined,\n        itemKey: itemKey,\n        tabKeys: tabKeysArray,\n        direction: direction,\n        itemLabels: {\n          labelRemove: isRemovable ? translations.tabbar_labelRemove() : undefined,\n          labelMoveLeft: isReorderable ? translations.tabbar_labelMoveLeft() : undefined,\n          labelMoveRight: isReorderable ? translations.tabbar_labelMoveRight() : undefined\n        },\n        handleAccStatus: (detail) => {\n          const removeItemLabel = getItemLabel(detail.removedKey!, rootRef.current!) as string;\n          const removeStatus =\n            isRemovable && detail.removedKey\n              ? translations.tabbar_accAnnounceRemovedKey({ itemKey: removeItemLabel })\n              : '';\n          const destinationItemLabel = getItemLabel(\n            detail.destinationKey!,\n            rootRef.current!\n          ) as string;\n          const reorderStatus =\n            isReorderable && detail.destinationKey\n              ? translations.accAnnounceMovedKey({\n                  // This acc info is for reordering using context menu hence as per spec source item key is not required.\n                  itemKey: '',\n                  position: detail.position!,\n                  referenceKey: destinationItemLabel\n                })\n              : '';\n          setAccStatusInfo(removeStatus + reorderStatus);\n        }\n      });\n      setContextMenuContext(defaultContext);\n\n      setMenuProps({\n        ...menuPropGestureStates[gesture],\n        anchorRef: { current: anchorBasedOnGesture },\n        // This is set so that when no contextMenuConfig is available we need not open it. Example: Apps may choose to open only for removable items and return contextMenuConfig as undefined for non removable ones in such cases it will prevent it from opening.\n        isOpen: contextMenuConfig != null\n      });\n    },\n    {\n      isDisabled: !contextMenuConfig //If there is no a context menu renderer we disable the hook\n    }\n  );\n\n  const handleCloseContextMenu = useCallback<Required<ComponentProps<typeof Menu>>['onClose']>(\n    (detail) => {\n      //Focus has to be set on the current target that was obtained\n      //during context menu gesture when menu is dismissed or item is \"selected\"\n      if (detail.reason === 'dismissed' || detail.reason === 'itemAction') {\n        setCurrentKey(contextMenuContext?.itemKey);\n        rootRef.current?.focus();\n      }\n      // We close the menu.The only prop that matters here is isOpen\n      setMenuProps({ ...initialMenuProps });\n    },\n    [rootRef, contextMenuContext?.itemKey]\n  );\n\n  const eventProps = mergeProps({ onKeyDown, onFocus }, triggerProps);\n\n  return {\n    rootProps: mergeProps(\n      {\n        'aria-activedescendant': currentKey ? tabItemPrefix + currentKey : '',\n        'aria-multiselectable': false,\n        class: className,\n        ref: rootRef,\n        role: 'tablist',\n        tabIndex: 0\n      },\n      currentKeyProps,\n      focusRingProps,\n      eventProps\n    ),\n    tabBarContext: {\n      currentKey,\n      display,\n      isEdgeBottom: edge === 'bottom',\n      layout: 'condense',\n      onRemove,\n      onSelect,\n      showFocusRing,\n      hideTooltip,\n      selection,\n      size,\n      tabItemPrefix\n    },\n    menuProps: { ...menuProps, onClose: handleCloseContextMenu },\n    contextMenuContext,\n    contextMenuDescriptionId,\n    contextMenuDescription,\n    accStatusInfo\n  } as const;\n}\n\n//useCurrentKey use click capture that captures first click, which is on remove button\n//when we remove and sets the item being removed to currentKey. So we should not allow\n//this if click is on remove button\nconst extractOnlyItemKey = (element: HTMLElement, itemSelector: string, itemEliminator: string) => {\n  const tabBarItem = element.closest(itemSelector);\n  if (tabBarItem) {\n    if (tabBarItem.hasAttribute(REMOVABLE_ITEM_ATTRIBUTE)) {\n      const removeButton = element.closest(itemEliminator);\n      if (removeButton && tabBarItem?.contains(removeButton)) {\n        return null;\n      }\n    }\n    return getKey(tabBarItem as HTMLElement);\n  }\n  return null;\n};\n\nconst findNextValidKey = <K>(currentKey: K, currTabs: K[], prevTabs: K[]) => {\n  const index = prevTabs.indexOf(currentKey);\n  // update current key to be the first one if currentKey is invalid\n  if (index === -1) {\n    return currTabs[0];\n  }\n  let nextIndex = 0;\n  let isLastKey = false;\n  if (index === prevTabs.length - 1) {\n    nextIndex = index - 1;\n    isLastKey = true;\n  } else {\n    nextIndex = index + 1;\n  }\n  while (nextIndex !== index && nextIndex > -1 && nextIndex < prevTabs.length) {\n    const nextKey = prevTabs[nextIndex];\n    if (currTabs.indexOf(nextKey) !== -1) {\n      return nextKey;\n    }\n    isLastKey ? nextIndex-- : nextIndex++;\n  }\n  // update current key to be the first one if we can't find a suitable next key\n  return currTabs[0];\n};\n\n// Utility that returns the value for a attribute related to the role=\"tab\" item.\nexport const getItemAttribute = <K extends string | number>(\n  itemKey: K,\n  root: HTMLElement,\n  attribute: string\n) => {\n  const tabBarItem = findElementByKey(root, itemKey as K, ITEM_SELECTOR) as HTMLElement;\n  if (tabBarItem) {\n    const tabBarItemAttribute = tabBarItem.hasAttribute(attribute)\n      ? tabBarItem.getAttribute(attribute)\n      : null;\n    return tabBarItemAttribute;\n  }\n  return;\n};\n\n// Utility that returns the visible inner text inside the role=\"tab\" item.\nconst getItemLabel = <K extends string | number>(itemKey: K, root: HTMLElement) => {\n  const tabBarItem = findElementByKey(root, itemKey as K, ITEM_SELECTOR) as HTMLElement;\n  if (tabBarItem) {\n    return tabBarItem.innerText;\n  }\n  return;\n};\n"],"names":["useUser","useTranslationBundle","useRef","useId","useState","useEffect","getItemKeysArray","useCollectionFocusRing","useReorderableContext","useCurrentKey","keyExtractor","getPrevNextKeyUsingRef","findElementByKey","getFirstVisibleKey","useContextMenuGesture","getDefaultContextMenu","useCallback","mergeProps","getKey"],"mappings":"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"}

package/cjs/useTestId-a8b07506.js

@@ -0,0 +1,23 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var LayerHost = require('./LayerHost-21391a0d.js');
+require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+require('preact/compat');
+
+/**
+ * Returns the set of attributes to be applied to the DOM node if the application's mode is not
+ * set to "production".
+ */
+function useTestId(testId) {
+    const context = hooks.useContext(LayerHost.EnvironmentContext);
+    return context.mode === 'production' || testId === ''
+        ? {}
+        : {
+            'data-testid': testId
+        };
+}
+
+exports.useTestId = useTestId;
+//# sourceMappingURL=useTestId-a8b07506.js.map

package/cjs/useTestId-a8b07506.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTestId-a8b07506.js","sources":["../../src/hooks/UNSAFE_useTestId/useTestId.ts"],"sourcesContent":["import { EnvironmentContext } from '../../UNSAFE_Environment';\nimport { useContext } from 'preact/hooks';\n\nexport type TestIdProps = {\n  testId?: string;\n};\n/**\n * Returns the set of attributes to be applied to the DOM node if the application's mode is not\n * set to \"production\".\n */\nexport function useTestId(testId?: string) {\n  const context = useContext(EnvironmentContext);\n  return context.mode === 'production' || testId === ''\n    ? {}\n    : {\n        'data-testid': testId\n      };\n}\n"],"names":["useContext","EnvironmentContext"],"mappings":";;;;;;;;AAMA;;;AAGG;AACG,SAAU,SAAS,CAAC,MAAe,EAAA;AACvC,IAAA,MAAM,OAAO,GAAGA,gBAAU,CAACC,4BAAkB,CAAC,CAAC;IAC/C,OAAO,OAAO,CAAC,IAAI,KAAK,YAAY,IAAI,MAAM,KAAK,EAAE;AACnD,UAAE,EAAE;AACJ,UAAE;AACE,YAAA,aAAa,EAAE,MAAM;SACtB,CAAC;AACR;;;;"}

package/cjs/useTheme-71e406b0.js

@@ -0,0 +1,21 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var hooks = require('preact/hooks');
+var LayerHost = require('./LayerHost-21391a0d.js');
+require('preact/jsx-runtime');
+require('preact/compat');
+
+/**
+ * @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
+ */
+function useTheme() {
+    return hooks.useContext(LayerHost.EnvironmentContext).theme;
+}
+
+exports.useTheme = useTheme;
+//# sourceMappingURL=useTheme-71e406b0.js.map

package/cjs/useTheme-71e406b0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme-71e406b0.js","sources":["../../src/hooks/UNSAFE_useTheme/useTheme.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 { useContext } from 'preact/hooks';\nimport { EnvironmentContext } from '../../UNSAFE_Environment';\n\nexport function useTheme() {\n  return useContext(EnvironmentContext).theme;\n}\n"],"names":["useContext","EnvironmentContext"],"mappings":";;;;;;;;AAAA;;;;;;AAMG;SAKa,QAAQ,GAAA;AACtB,IAAA,OAAOA,gBAAU,CAACC,4BAAkB,CAAC,CAAC,KAAK,CAAC;AAC9C;;;;"}

package/cjs/useThemeInterpolations-ca3ddfd9.js

@@ -0,0 +1,71 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var hooks = require('preact/hooks');
+var useColorScheme = require('./useColorScheme-852ec82e.js');
+var useScale = require('./useScale-529046e3.js');
+var theme = require('./theme-dfd6a9fe.js');
+var mergeInterpolations = require('./mergeInterpolations-6727b536.js');
+var LayerHost = require('./LayerHost-21391a0d.js');
+var Theme = require('./Theme-f06687af.js');
+var useDensity = require('./useDensity-2a45f4dd.js');
+var unsafeDomAccess = require('./unsafeDomAccess-c3a492f0.js');
+
+/**
+ * Extracts and returns an element from an element-based ref
+ *
+ * @returns the element or null if no element can be extracted
+ */
+function toUnsafeDomElement(elementRef) {
+    const current = elementRef?.current;
+    if (current) {
+        return current instanceof Element ? current : current[unsafeDomAccess.UNSAFE_DOM_ACCESS];
+    }
+    return null;
+}
+
+// This hook encapsulates the logic required to determine which theme style classes are needed
+// for the current environment context's colorScheme, density, and scale value.  This would be used when
+// rendering dom outside of the current dom tree, but desire to match the colorScheme, density, and scale
+// of the original dom tree.
+function useThemeInterpolations(logicalParentRef) {
+    const [colorScheme, setColorScheme] = hooks.useState(undefined);
+    const currentColorScheme = useColorScheme.useColorScheme();
+    const currentDensity = useDensity.useDensity();
+    const currentScale = useScale.useScale();
+    // We don't want to interpolate the default environment values for scale or density. Those should get picked up by default.
+    // This fixes an issue for core pack components that utilize the Layer component, when in a legacy cookbook page.
+    const density = currentDensity !== LayerHost.DefaultEnvironment.density ? currentDensity : undefined;
+    const scale = currentScale !== LayerHost.DefaultEnvironment.scale ? currentScale : undefined;
+    // We want to use useLayoutEffect instead of useEffect here. Otherwise there could be
+    // flashing due to light colorScheme initial render then dark colorScheme after useEffect.
+    hooks.useLayoutEffect(() => {
+        // for colorScheme in Legacy, things are a bit more complicated because unlike scale which is always applied to
+        // the root dom element, we can switch to dark theme by adding the .oj-color-invert class to any dom element where
+        // we want the dark theme to start.  In Legacy, you can't switch back to light theme once you switch to dark (no nesting).
+        // The problem with our core pack Components that use Layer to display the dropdown, it is not in the same dom
+        // tree as the parent component.  It is in its own dom tree off of the root dom element, so it won't see the
+        // .oj-color-invert class in the dom tree of the select single.
+        // Since in legacy .oj-color-invert can appear anywhere, not just on the root dom element, if the colorScheme
+        // is the same as the default colorScheme then we need to look at the ref to determine if it or any of its
+        // ancestors has the .oj-color-invert class.  If it does(and doesn't have the preact .oj-c-colorscheme-dark class),
+        // use 'dark' colorScheme.
+        // We only want to do this for legacy, so if the closest element that has the .oj-color-invert also has .oj-c-colorscheme-dark,
+        // then we don't want to override since this isn't a legacy color change and we already handle it in our environment context
+        // so the color scheme nesting will work in Preact/Core Pack.
+        const logicalParent = toUnsafeDomElement(logicalParentRef);
+        const closestElementWithColorInvertClass = logicalParent?.closest(`.${Theme.INVERT_CLASS}:not(.${Theme.DARK_CLASS})`);
+        setColorScheme(currentColorScheme !== LayerHost.DefaultEnvironment.colorScheme
+            ? currentColorScheme
+            : closestElementWithColorInvertClass
+                ? 'dark'
+                : 'light');
+    }, [logicalParentRef, currentColorScheme]);
+    const interpolations = mergeInterpolations.mergeInterpolations([...Object.values(theme.themeInterpolations)]);
+    const { class: classes } = interpolations({ colorScheme, scale, density });
+    return classes;
+}
+
+exports.toUnsafeDomElement = toUnsafeDomElement;
+exports.useThemeInterpolations = useThemeInterpolations;
+//# sourceMappingURL=useThemeInterpolations-ca3ddfd9.js.map

package/cjs/useThemeInterpolations-ca3ddfd9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeInterpolations-ca3ddfd9.js","sources":["../../src/utils/PRIVATE_unsafeDomRefUtils/unsafeDomRefUtils.ts","../../src/hooks/UNSAFE_useThemeInterpolations/useThemeInterpolations.ts"],"sourcesContent":["import { RefObject } from 'preact';\n\nimport { UnsafeDomHandle, UNSAFE_DOM_ACCESS } from '#utils/UNSAFE_unsafeDomAccess';\n\n/**\n * Extracts and returns an element from an element-based ref\n *\n * @returns the element or null if no element can be extracted\n */\nexport function toUnsafeDomElement(\n  elementRef?: RefObject<Element> | RefObject<UnsafeDomHandle<Element>> | null\n) {\n  const current = elementRef?.current;\n\n  if (current) {\n    return current instanceof Element ? current : current[UNSAFE_DOM_ACCESS];\n  }\n\n  return null;\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 type { RefObject } from 'preact';\nimport { useLayoutEffect, useState } from 'preact/hooks';\nimport { useColorScheme } from '../UNSAFE_useColorScheme';\nimport { useScale } from '../UNSAFE_useScale';\nimport { themeInterpolations } from '../../utils/UNSAFE_interpolations/theme';\nimport type { ThemeProps } from '../../utils/UNSAFE_interpolations/theme';\nimport { mergeInterpolations } from '../../utils/UNSAFE_mergeInterpolations';\nimport { DefaultEnvironment } from '../../UNSAFE_Environment/EnvironmentContext';\nimport { DARK_CLASS, INVERT_CLASS } from '../../UNSAFE_Theme';\nimport { useDensity } from '#hooks/UNSAFE_useDensity';\nimport { UnsafeDomHandle } from '#utils/UNSAFE_unsafeDomAccess';\n\nimport { toUnsafeDomElement } from '#utils/PRIVATE_unsafeDomRefUtils/unsafeDomRefUtils';\n\n/**\n * The logical parent of the re-parented content that 'launched' it in the popup/dropdown.\n */\ntype LogicalParentRef = RefObject<Element> | RefObject<UnsafeDomHandle<Element>> | null;\n\n// This hook encapsulates the logic required to determine which theme style classes are needed\n// for the current environment context's colorScheme, density, and scale value.  This would be used when\n// rendering dom outside of the current dom tree, but desire to match the colorScheme, density, and scale\n// of the original dom tree.\nexport function useThemeInterpolations(logicalParentRef?: LogicalParentRef) {\n  const [colorScheme, setColorScheme] = useState<'light' | 'dark' | undefined>(undefined);\n\n  const currentColorScheme = useColorScheme();\n  const currentDensity = useDensity();\n  const currentScale = useScale();\n  // We don't want to interpolate the default environment values for scale or density. Those should get picked up by default.\n  // This fixes an issue for core pack components that utilize the Layer component, when in a legacy cookbook page.\n  const density = currentDensity !== DefaultEnvironment.density ? currentDensity : undefined;\n  const scale = currentScale !== DefaultEnvironment.scale ? currentScale : undefined;\n\n  // We want to use useLayoutEffect instead of useEffect here. Otherwise there could be\n  // flashing due to light colorScheme initial render then dark colorScheme after useEffect.\n  useLayoutEffect(() => {\n    // for colorScheme in Legacy, things are a bit more complicated because unlike scale which is always applied to\n    // the root dom element, we can switch to dark theme by adding the .oj-color-invert class to any dom element where\n    // we want the dark theme to start.  In Legacy, you can't switch back to light theme once you switch to dark (no nesting).\n    // The problem with our core pack Components that use Layer to display the dropdown, it is not in the same dom\n    // tree as the parent component.  It is in its own dom tree off of the root dom element, so it won't see the\n    // .oj-color-invert class in the dom tree of the select single.\n    // Since in legacy .oj-color-invert can appear anywhere, not just on the root dom element, if the colorScheme\n    // is the same as the default colorScheme then we need to look at the ref to determine if it or any of its\n    // ancestors has the .oj-color-invert class.  If it does(and doesn't have the preact .oj-c-colorscheme-dark class),\n    // use 'dark' colorScheme.\n    // We only want to do this for legacy, so if the closest element that has the .oj-color-invert also has .oj-c-colorscheme-dark,\n    // then we don't want to override since this isn't a legacy color change and we already handle it in our environment context\n    // so the color scheme nesting will work in Preact/Core Pack.\n    const logicalParent = toUnsafeDomElement(logicalParentRef);\n    const closestElementWithColorInvertClass = logicalParent?.closest(\n      `.${INVERT_CLASS}:not(.${DARK_CLASS})`\n    );\n\n    setColorScheme(\n      currentColorScheme !== DefaultEnvironment.colorScheme\n        ? currentColorScheme\n        : closestElementWithColorInvertClass\n        ? 'dark'\n        : 'light'\n    );\n  }, [logicalParentRef, currentColorScheme]);\n\n  const interpolations = mergeInterpolations<ThemeProps>([...Object.values(themeInterpolations)]);\n  const { class: classes } = interpolations({ colorScheme, scale, density });\n  return classes;\n}\n"],"names":["UNSAFE_DOM_ACCESS","useState","useColorScheme","useDensity","useScale","DefaultEnvironment","useLayoutEffect","INVERT_CLASS","DARK_CLASS","mergeInterpolations","themeInterpolations"],"mappings":";;;;;;;;;;;;;AAIA;;;;AAIG;AACG,SAAU,kBAAkB,CAChC,UAA4E,EAAA;AAE5E,IAAA,MAAM,OAAO,GAAG,UAAU,EAAE,OAAO,CAAC;IAEpC,IAAI,OAAO,EAAE;AACX,QAAA,OAAO,OAAO,YAAY,OAAO,GAAG,OAAO,GAAG,OAAO,CAACA,iCAAiB,CAAC,CAAC;KAC1E;AAED,IAAA,OAAO,IAAI,CAAC;AACd;;ACOA;AACA;AACA;AACA;AACM,SAAU,sBAAsB,CAAC,gBAAmC,EAAA;IACxE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGC,cAAQ,CAA+B,SAAS,CAAC,CAAC;AAExF,IAAA,MAAM,kBAAkB,GAAGC,6BAAc,EAAE,CAAC;AAC5C,IAAA,MAAM,cAAc,GAAGC,qBAAU,EAAE,CAAC;AACpC,IAAA,MAAM,YAAY,GAAGC,iBAAQ,EAAE,CAAC;;;AAGhC,IAAA,MAAM,OAAO,GAAG,cAAc,KAAKC,4BAAkB,CAAC,OAAO,GAAG,cAAc,GAAG,SAAS,CAAC;AAC3F,IAAA,MAAM,KAAK,GAAG,YAAY,KAAKA,4BAAkB,CAAC,KAAK,GAAG,YAAY,GAAG,SAAS,CAAC;;;IAInFC,qBAAe,CAAC,MAAK;;;;;;;;;;;;;;AAcnB,QAAA,MAAM,aAAa,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;AAC3D,QAAA,MAAM,kCAAkC,GAAG,aAAa,EAAE,OAAO,CAC/D,CAAI,CAAA,EAAAC,kBAAY,CAAS,MAAA,EAAAC,gBAAU,CAAG,CAAA,CAAA,CACvC,CAAC;AAEF,QAAA,cAAc,CACZ,kBAAkB,KAAKH,4BAAkB,CAAC,WAAW;AACnD,cAAE,kBAAkB;AACpB,cAAE,kCAAkC;AACpC,kBAAE,MAAM;kBACN,OAAO,CACZ,CAAC;AACJ,KAAC,EAAE,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC,CAAC;AAE3C,IAAA,MAAM,cAAc,GAAGI,uCAAmB,CAAa,CAAC,GAAG,MAAM,CAAC,MAAM,CAACC,yBAAmB,CAAC,CAAC,CAAC,CAAC;AAChG,IAAA,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,cAAc,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;AAC3E,IAAA,OAAO,OAAO,CAAC;AACjB;;;;;"}

package/cjs/useTooltip-d1200aff.js

@@ -0,0 +1,51 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var hooks = require('preact/hooks');
+var useTooltipControlled = require('./useTooltipControlled-0dc34549.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
+ */
+/**
+ * A hook with tooltip implementation.
+ * Returns event handlers that can enhance the target element with a tooltip displayed
+ * on hover and focus.
+ *
+ * @param text tooltip text
+ * @param position tooltip placement relative to the target element
+ * @param isDisabled determines if the tooltip is disabled
+ * @param anchor determines if the target is an element or the pointer
+ * @param offset offset from the placement
+ * @param variant specifies if the rendered popup should have 'tooltip' or 'datatip' look and behavior
+ * @returns an object with the 'tooltipContent' and 'tooltipProps' properties.
+ */
+const useTooltip = ({ text, position = 'bottom', isDisabled = false, anchor = { x: 'element', y: 'element' }, offset, variant = 'tooltip', testId }) => {
+    const [isOpen, setIsOpen] = hooks.useState(false);
+    const disabled = isDisabled || !text;
+    const onToggleHandler = hooks.useCallback((details) => {
+        setIsOpen(details.value);
+    }, []);
+    const { tooltipContent, tooltipProps } = useTooltipControlled.useTooltipControlled({
+        text,
+        isOpen,
+        position,
+        isDisabled: disabled,
+        offset,
+        anchor,
+        variant,
+        onToggle: onToggleHandler,
+        testId
+    });
+    return {
+        tooltipContent,
+        tooltipProps
+    };
+};
+
+exports.useTooltip = useTooltip;
+//# sourceMappingURL=useTooltip-d1200aff.js.map

package/cjs/useTooltip-d1200aff.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltip-d1200aff.js","sources":["../../src/hooks/UNSAFE_useTooltip/useTooltip.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 { useState, useCallback } from 'preact/hooks';\nimport { useTooltipControlled } from './useTooltipControlled';\nimport { TestIdProps } from '../UNSAFE_useTestId';\n\ntype tooltipParameters = Parameters<typeof useTooltipControlled>[0];\n\ntype Props = {\n  text?: string;\n  position?: tooltipParameters['position'];\n  isDisabled?: boolean;\n  anchor?: tooltipParameters['anchor'];\n  offset?: { mainAxis?: number; crossAxis?: number };\n  variant?: tooltipParameters['variant'];\n} & TestIdProps;\n\n/**\n * A hook with tooltip implementation.\n * Returns event handlers that can enhance the target element with a tooltip displayed\n * on hover and focus.\n *\n * @param text tooltip text\n * @param position tooltip placement relative to the target element\n * @param isDisabled determines if the tooltip is disabled\n * @param anchor determines if the target is an element or the pointer\n * @param offset offset from the placement\n * @param variant specifies if the rendered popup should have 'tooltip' or 'datatip' look and behavior\n * @returns an object with the 'tooltipContent' and 'tooltipProps' properties.\n */\nexport const useTooltip = ({\n  text,\n  position = 'bottom',\n  isDisabled = false,\n  anchor = { x: 'element', y: 'element' },\n  offset,\n  variant = 'tooltip',\n  testId\n}: Props): ReturnType<typeof useTooltipControlled> => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const disabled = isDisabled || !text;\n  const onToggleHandler = useCallback((details: { value: boolean }) => {\n    setIsOpen(details.value);\n  }, []);\n\n  const { tooltipContent, tooltipProps } = useTooltipControlled({\n    text,\n    isOpen,\n    position,\n    isDisabled: disabled,\n    offset,\n    anchor,\n    variant,\n    onToggle: onToggleHandler,\n    testId\n  });\n\n  return {\n    tooltipContent,\n    tooltipProps\n  };\n};\n"],"names":["useState","useCallback","useTooltipControlled"],"mappings":";;;;;;AAAA;;;;;;AAMG;AAiBH;;;;;;;;;;;;AAYG;AACU,MAAA,UAAU,GAAG,CAAC,EACzB,IAAI,EACJ,QAAQ,GAAG,QAAQ,EACnB,UAAU,GAAG,KAAK,EAClB,MAAM,GAAG,EAAE,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,EACvC,MAAM,EACN,OAAO,GAAG,SAAS,EACnB,MAAM,EACA,KAA6C;IACnD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGA,cAAQ,CAAU,KAAK,CAAC,CAAC;AACrD,IAAA,MAAM,QAAQ,GAAG,UAAU,IAAI,CAAC,IAAI,CAAC;AACrC,IAAA,MAAM,eAAe,GAAGC,iBAAW,CAAC,CAAC,OAA2B,KAAI;AAClE,QAAA,SAAS,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;KAC1B,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,GAAGC,yCAAoB,CAAC;QAC5D,IAAI;QACJ,MAAM;QACN,QAAQ;AACR,QAAA,UAAU,EAAE,QAAQ;QACpB,MAAM;QACN,MAAM;QACN,OAAO;AACP,QAAA,QAAQ,EAAE,eAAe;QACzB,MAAM;AACP,KAAA,CAAC,CAAC;IAEH,OAAO;QACL,cAAc;QACd,YAAY;KACb,CAAC;AACJ;;;;"}

package/cjs/useTooltipControlled-0dc34549.js

@@ -0,0 +1,376 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var jsxRuntime = require('preact/jsx-runtime');
+var hooks = require('preact/hooks');
+var useId = require('./useId-6c0eeb27.js');
+var useHover = require('./useHover-49b0430d.js');
+var useFocus = require('./useFocus-1b288fb9.js');
+var useTouch = require('./useTouch-4dec8729.js');
+var mergeProps = require('./mergeProps-e3da7237.js');
+var useAnimation = require('./useAnimation-65c0e455.js');
+var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
+var useTestId = require('./useTestId-a8b07506.js');
+var useThemeInterpolations = require('./useThemeInterpolations-ca3ddfd9.js');
+var classNames = require('./classNames-c14c6ef3.js');
+var hooks_UNSAFE_useTooltip_themes_redwood_TooltipContentTheme = require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentTheme.js');
+var useColorScheme = require('./useColorScheme-852ec82e.js');
+var tooltipUtils = require('./tooltipUtils-c554343d.js');
+
+const TooltipContent = ({ children, id, isOpen, isDatatip, onTransitionEnd, testId, ...props }) => {
+    const wrapperRef = hooks.useRef(null);
+    const popoverRef = hooks.useRef(null);
+    const testIdProps = useTestId.useTestId(testId);
+    const { baseTheme, variantClasses, styles } = useComponentTheme.useComponentTheme(hooks_UNSAFE_useTooltip_themes_redwood_TooltipContentTheme.TooltipContentRedwoodTheme, {
+        variant: isDatatip ? 'datatip' : 'tooltip'
+    });
+    const schemeClass = useThemeInterpolations.useThemeInterpolations();
+    const { nodeRef } = useAnimation.useAnimation(isOpen ? 'mounted' : 'unmounted', {
+        animationStates: {
+            mounted: (_node) => {
+                const childNode = _node.firstChild;
+                return {
+                    from: {
+                        maxHeight: '0',
+                        opacity: '0%'
+                    },
+                    to: {
+                        maxHeight: `${childNode?.offsetHeight}px`,
+                        opacity: isDatatip ? '100%' : '95%'
+                    },
+                    options: {
+                        duration: isDatatip ? 1 : 150,
+                        easing: [0.0, 0.0, 0.2, 1]
+                    }
+                };
+            },
+            unmounted: (_node) => {
+                return {
+                    from: {
+                        opacity: isDatatip ? '100%' : '95%'
+                    },
+                    to: {
+                        maxHeight: '0',
+                        opacity: '0%'
+                    },
+                    options: {
+                        duration: isDatatip ? 1 : 150,
+                        easing: [0.0, 0.0, 0.2, 1]
+                    }
+                };
+            }
+        },
+        isAnimatedOnMount: true,
+        onAnimationEnd: () => onTransitionEnd?.()
+    });
+    // Set up initial wrapper height so Tooltip can animate from the bottom to the top
+    hooks.useEffect(() => {
+        if (wrapperRef.current && popoverRef.current?.offsetHeight) {
+            wrapperRef.current.style.height = `${popoverRef.current?.offsetHeight}px`;
+        }
+    }, []);
+    return (jsxRuntime.jsx("div", { ref: wrapperRef, id: id, role: "tooltip", class: classNames.classNames([styles.wrapper, schemeClass, baseTheme]), ...testIdProps, children: jsxRuntime.jsx("div", { ref: nodeRef, class: styles.inner, ...props, children: jsxRuntime.jsx("div", { ref: popoverRef, class: classNames.classNames([variantClasses, styles.content]), children: children }) }) }));
+};
+
+const useTooltipControlled = ({ text, isOpen = false, variant = 'tooltip', position = 'bottom', displayOnHover = true, dismissOnClick = true, focusStrategy = 'browser', isDisabled = false, anchor = { x: 'element', y: 'element' }, offset, onToggle, testId }) => {
+    // Global TooltipManager singleton instance
+    const globalTooltipManager = tooltipUtils.getGlobalTooltipManager();
+    const disabled = isDisabled || !text;
+    const isInitialRenderState = hooks.useRef(true);
+    const [state, _setState] = hooks.useState(!disabled && isOpen ? 'mounting' : 'unmounted');
+    const stateRef = hooks.useRef(state);
+    const setState = (newState) => {
+        stateRef.current = newState;
+        _setState(newState);
+    };
+    // const tooltipId = useRef<string>(useId());
+    const [needsUpdate, setNeedsUpdate] = hooks.useState(false);
+    setNeedsUpdate(false);
+    const isDatatip = variant === 'datatip';
+    const [isLogicalFocus, setLogicalFocus] = hooks.useState(false);
+    const isLogicalFocusStrategy = focusStrategy === 'logical';
+    const isInitialRenderTrigger = hooks.useRef(true);
+    const { hoverProps, isHover } = useHover.useHover({ isDisabled: !displayOnHover });
+    const { touchProps, isTouch } = useTouch.useTouch({ isDisabled }); // TODO replace by useLongPress actionhook
+    // we only care about keyboard focus, don't enable useFocus hook if isHover or isTouch are active
+    const { focusProps, isFocus } = useFocus.useFocus({
+        isDisabled: isLogicalFocusStrategy
+    });
+    // only enable the popoverHover hook if the tooltip is actually open
+    const { hoverProps: popoverHoverProps, isHover: popoverIsHover } = useHover.useHover({
+        isDisabled: isDisabled || !isOpen
+    });
+    const isPointer = anchor.x === 'pointer' || anchor.y === 'pointer';
+    const uniqueIdRef = hooks.useRef(useId.useId());
+    const targetRef = hooks.useRef(null);
+    const coordsRef = hooks.useRef({ x: -9999, y: -9999 });
+    // if anchor is set to pointer and target does not have keyboard focus, use coords
+    const usedRef = isPointer && !isFocus ? coordsRef : targetRef;
+    const showDelay = isDatatip ? 0 : tooltipUtils.SHOW_TOOLTIP_DELAY;
+    const hideDelay = isDatatip ? 0 : tooltipUtils.HIDE_TOOLTIP_DELAY;
+    const toggleTimeoutRef = hooks.useRef(null);
+    const currentColorScheme = useColorScheme.useColorScheme();
+    const focusActive = hooks.useRef(false);
+    const hoverActive = hooks.useRef(false);
+    const toggleTimeoutClear = () => {
+        if (toggleTimeoutRef.current) {
+            clearTimeout(toggleTimeoutRef.current);
+            toggleTimeoutRef.current = null;
+        }
+    };
+    /*
+     * This effect executes when isFocus/isLogicalFocus changes
+     * - focusActive ref is set if the focus change follows a Tab key
+     * - hoverActive ref is reset, if focusActive becomes true
+     */
+    hooks.useEffect(() => {
+        if (isLogicalFocusStrategy) {
+            focusActive.current = isLogicalFocus;
+        }
+        else {
+            focusActive.current = isFocus && globalTooltipManager.isTabKeyActive();
+        }
+        if (focusActive.current) {
+            hoverActive.current = false;
+        }
+    }, [isFocus, isLogicalFocus, isLogicalFocusStrategy, globalTooltipManager]);
+    /*
+     * This effect executes when isHover state changes
+     * - focusActive ref is reset, if hoverActive becomes true
+     */
+    hooks.useEffect(() => {
+        hoverActive.current = isHover;
+    }, [isHover]);
+    hooks.useEffect(() => {
+        // inner function for state transitions on various trigger changes
+        const updateState = (open) => {
+            if (open && text) {
+                // At least one toggle event is set to true
+                switch (state) {
+                    case 'unmounted':
+                        setState('mountPending'); // Set mount pending state if tooltip is unmounted
+                        break;
+                    case 'unmounting': // Switch back to mounting when unmounting was in progress and the tooltip should stay on
+                        setState('mounting');
+                        onToggle?.({ value: true });
+                        break;
+                    case 'unmountPending':
+                        toggleTimeoutClear();
+                        setState('mounted'); // Clear timers immediately and keep the tooltip mounted
+                        break;
+                }
+            }
+            else {
+                // No toggle events are set to true
+                switch (state) {
+                    case 'mounting':
+                    case 'mounted':
+                        setState('unmountPending'); // Set unmount pending state if tooltip is mounted or in mounting transition
+                        break;
+                    case 'mountPending':
+                        toggleTimeoutClear();
+                        __resetCoords();
+                        setState('unmounted'); // Unmount tooltip immediately if mounting is pending
+                        break;
+                }
+            }
+        };
+        if (isInitialRenderTrigger.current) {
+            // On onitial render do not trigger rerender
+            isInitialRenderTrigger.current = false;
+            return;
+        }
+        // When pointer is used, handleMouseMove method is responsible for state updates
+        // until the tooltip is mounted
+        if (isPointer && isHover && state === 'unmounted') {
+            return;
+        }
+        updateState((isHover && hoverActive.current) ||
+            ((isFocus || isLogicalFocus) && focusActive.current) ||
+            popoverIsHover ||
+            isTouch);
+    }, [isHover, isFocus, isLogicalFocus, popoverIsHover, isTouch, isPointer, state, onToggle, text]);
+    const destroyCallback = hooks.useCallback(() => {
+        focusActive.current = false;
+        hoverActive.current = false;
+        onToggle?.({ value: false });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // don't want to depend on the 'onToggle' prop as some clients tend to pass a new callback on each render
+    /*
+     * Global mousedown handler to dismiss the tooltip on anchor click. This is especially needed
+     * for Safari which does not fire mouse events during animations when the anchor moves (JET-72605).
+     */
+    const mouseDownHandler = hooks.useCallback((event) => {
+        if (usedRef.current instanceof Element &&
+            usedRef.current.contains(event.target) &&
+            dismissOnClick) {
+            toggleTimeoutClear();
+            document.removeEventListener('mousedown', mouseDownHandler, true);
+            destroyCallback();
+        }
+    }, [dismissOnClick, usedRef, destroyCallback]);
+    hooks.useEffect(() => {
+        if (isInitialRenderState.current) {
+            // On onitial render do not trigger rerender
+            isInitialRenderState.current = false;
+            return;
+        }
+        setState(isOpen ? 'mounting' : 'unmounting');
+    }, [isOpen]);
+    hooks.useEffect(() => {
+        return () => {
+            // make sure to clear the toggle timeout on unmount
+            toggleTimeoutClear();
+            // reset focusActive and hoverActive refs
+            focusActive.current = false;
+            hoverActive.current = false;
+        };
+    }, []);
+    /*
+     * This effect executes when the component state changes.
+     * On 'mounted' state, the tooltip registers itself with the global tooltip manager.
+     * On 'unmounted', the tooltip unregisters from the global tooltip manager.
+     */
+    hooks.useEffect(() => {
+        if (state === 'mounting') {
+            globalTooltipManager.register(destroyCallback);
+        }
+        else if (state === 'unmounted') {
+            globalTooltipManager.unregister(destroyCallback);
+            // clean up the mousedown handler just in case
+            document.removeEventListener('mousedown', mouseDownHandler, true);
+        }
+    }, [state, destroyCallback, globalTooltipManager, mouseDownHandler]);
+    /*
+     * Set a timer to toggle the state afer the 'pending' period expires
+     */
+    hooks.useEffect(() => {
+        if (!toggleTimeoutRef.current && (state === 'mountPending' || state === 'unmountPending')) {
+            if (state === 'mountPending') {
+                document.addEventListener('mousedown', mouseDownHandler, true);
+            }
+            toggleTimeoutRef.current = setTimeout(() => {
+                toggleTimeoutClear();
+                // make sure the state has not changed in the mean time before onToggle
+                if ((state === 'mountPending' || state === 'unmountPending') &&
+                    state === stateRef.current) {
+                    onToggle?.({ value: state === 'mountPending' });
+                }
+            }, state === 'mountPending' ? showDelay : hideDelay);
+        }
+        return () => {
+            toggleTimeoutClear();
+        };
+    }, [state, showDelay, hideDelay, onToggle, mouseDownHandler]);
+    const handleMouseMove = (event) => {
+        // we only want track mouse move while the state is 'unmounted' or when moving a 'mounted' datatip
+        if (state !== 'unmounted' && !(variant === 'datatip' && state === 'mounted')) {
+            return;
+        }
+        const targetRect = targetRef?.current?.getBoundingClientRect();
+        // Tooltip maintains static offset from left side of window
+        const distanceX = document.body.scrollLeft + (targetRect?.left || 0) + (targetRect?.width || 0);
+        // Tooltip maintains static offset from top side of the window
+        const distanceY = document.body.scrollTop + (targetRect?.top || 0) + (targetRect?.height || 0);
+        // Display tooltip at the mouse position if both anchors are set to pointer
+        const x = anchor.x === 'pointer' ? event.clientX : distanceX;
+        const y = anchor.y === 'pointer' ? event.clientY : distanceY;
+        if (state === 'mounted') {
+            coordsRef.current = { x, y };
+            if (needsUpdate !== true)
+                setNeedsUpdate(true);
+        }
+        else if (state === 'unmounted') {
+            toggleTimeoutClear();
+            toggleTimeoutRef.current = setTimeout(() => {
+                if (state === 'unmounted') {
+                    coordsRef.current = { x, y };
+                    onToggle?.({ value: true });
+                }
+            }, hideDelay);
+        }
+    };
+    const onLogicalFocus = (target) => {
+        setLogicalFocus(true);
+        targetRef.current = target;
+        usedRef.current = target;
+    };
+    const onLogicalBlur = () => {
+        setLogicalFocus(false);
+    };
+    const onFocusCallback = hooks.useCallback((event) => {
+        targetRef.current = event.currentTarget;
+    }, []);
+    const onBlurCallback = hooks.useCallback((event) => {
+        if (event.eventPhase === Event.AT_TARGET) {
+            // reset focusActive flag
+            focusActive.current = false;
+        }
+    }, []);
+    const focusInitProps = isLogicalFocusStrategy
+        ? {}
+        : {
+            onFocus: onFocusCallback,
+            onBlur: onBlurCallback
+        };
+    const hoverInitProps = {
+        onMouseEnter: hooks.useCallback((event) => {
+            targetRef.current = event.target;
+        }, [])
+    };
+    let actionableProps;
+    const __resetCoords = () => {
+        coordsRef.current = { x: -9999, y: -9999 };
+    };
+    if (disabled) {
+        actionableProps = mergeProps.mergeProps(hoverProps, focusProps, hoverInitProps, focusInitProps);
+    }
+    else {
+        const anchorInitProps = {
+            'aria-describedby': uniqueIdRef.current,
+            ...(isPointer && {
+                onMouseLeave: () => {
+                    if (state === 'mounting') {
+                        return;
+                    }
+                    toggleTimeoutClear();
+                },
+                onMouseMove: (event) => {
+                    handleMouseMove(event);
+                }
+            })
+        };
+        actionableProps = mergeProps.mergeProps(hoverProps, focusProps, touchProps, hoverInitProps, focusInitProps, anchorInitProps, isLogicalFocusStrategy ? { onLogicalFocus, onLogicalBlur } : {});
+    }
+    // No need to process tooltip if disabled or no text is provided
+    // Include actionableProps to detect mouseenter in components
+    // hovered state won't update unless actionableProps are already present in the component when mouse enters
+    if (disabled) {
+        toggleTimeoutClear();
+        __resetCoords();
+        return {
+            tooltipContent: null,
+            tooltipProps: actionableProps
+        };
+    }
+    const placement = position;
+    const handleTransitionEnd = () => {
+        if (state === 'mounting') {
+            setState('mounted');
+        }
+        if (state === 'unmounting') {
+            __resetCoords();
+            setState('unmounted');
+        }
+    };
+    const renderRawContent = (jsxRuntime.jsx(TooltipContent, { id: uniqueIdRef.current, testId: testId, isOpen: ['mounting', 'mounted', 'unmountPending'].includes(state), ...popoverHoverProps, isDatatip: isDatatip, onTransitionEnd: handleTransitionEnd, children: text }));
+    const renderContent = tooltipUtils.getWrappedTooltipContent(renderRawContent, variant, currentColorScheme, usedRef, placement, offset);
+    return {
+        tooltipContent: !['unmounted', 'mountPending'].includes(state) && renderContent,
+        tooltipProps: actionableProps
+    };
+};
+
+exports.TooltipContent = TooltipContent;
+exports.useTooltipControlled = useTooltipControlled;
+//# sourceMappingURL=useTooltipControlled-0dc34549.js.map