@oracle/oraclejet-preact 19.0.1 → 19.0.2

package/cjs/useThemeInterpolations-b29f0f7d.js

@@ -0,0 +1,71 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var hooks = require('preact/hooks');
+var useColorScheme = require('./useColorScheme-a379cdb9.js');
+var useScale = require('./useScale-349360cd.js');
+var theme = require('./theme-dfd6a9fe.js');
+var mergeInterpolations = require('./mergeInterpolations-6727b536.js');
+var LayerHost = require('./LayerHost-f1a1533f.js');
+var Theme = require('./Theme-f06687af.js');
+var useDensity = require('./useDensity-a1ed72b0.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'
+                : undefined);
+    }, [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-b29f0f7d.js.map

package/cjs/useThemeInterpolations-b29f0f7d.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeInterpolations-b29f0f7d.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        : undefined\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,SAAS,CACd,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-43bfe8a3.js

@@ -0,0 +1,51 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var hooks = require('preact/hooks');
+var useTooltipControlled = require('./useTooltipControlled-4a59aaf5.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-43bfe8a3.js.map

package/cjs/useTooltip-43bfe8a3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltip-43bfe8a3.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-4a59aaf5.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-fb11e4cc.js');
+var useComponentTheme = require('./useComponentTheme-082fc8e4.js');
+var useTestId = require('./useTestId-15ee37d6.js');
+var useThemeInterpolations = require('./useThemeInterpolations-b29f0f7d.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-a379cdb9.js');
+var tooltipUtils = require('./tooltipUtils-842e04c7.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) {
+                // 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]);
+    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-4a59aaf5.js.map

package/cjs/useTooltipControlled-4a59aaf5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltipControlled-4a59aaf5.js","sources":["../../src/hooks/UNSAFE_useTooltip/TooltipContent.tsx","../../src/hooks/UNSAFE_useTooltip/useTooltipControlled.tsx"],"sourcesContent":["import type { JSX } from 'preact';\nimport { useAnimation } from '../UNSAFE_useAnimation';\nimport { useComponentTheme } from '../UNSAFE_useComponentTheme';\nimport { useEffect, useRef } from 'preact/hooks';\nimport type { UnpackSignals } from '@oracle/oraclejet-internal-utilities/attributeUtils';\nimport {\n  TooltipContentVariantOptions,\n  TooltipContentStyles\n} from './themes/TooltipContentStyles.css';\n\nimport { useTestId, TestIdProps } from '../UNSAFE_useTestId';\nimport { useThemeInterpolations } from '../UNSAFE_useThemeInterpolations';\nimport { classNames } from '../../utils/UNSAFE_classNames';\nimport { TooltipContentRedwoodTheme } from './themes/redwood/TooltipContentTheme';\n\ntype IntrinsicProps = Pick<UnpackSignals<JSX.IntrinsicElements['div']>, 'children'>;\n\ntype Status = 'mounted' | 'unmounted';\n\ntype ContentProps = IntrinsicProps & {\n  id: string;\n  isOpen: boolean;\n  isDatatip: boolean;\n  onTransitionEnd?: () => void;\n} & TestIdProps;\n\nexport const TooltipContent = ({\n  children,\n  id,\n  isOpen,\n  isDatatip,\n  onTransitionEnd,\n  testId,\n  ...props\n}: ContentProps) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const popoverRef = useRef<HTMLDivElement>(null);\n\n  const testIdProps = useTestId(testId);\n\n  const { baseTheme, variantClasses, styles } = useComponentTheme<\n    TooltipContentVariantOptions,\n    TooltipContentStyles\n  >(TooltipContentRedwoodTheme, {\n    variant: isDatatip ? 'datatip' : 'tooltip'\n  });\n\n  const schemeClass = useThemeInterpolations();\n\n  const { nodeRef } = useAnimation<Status, HTMLDivElement>(isOpen ? 'mounted' : 'unmounted', {\n    animationStates: {\n      mounted: (_node) => {\n        const childNode = _node.firstChild as HTMLDivElement;\n        return {\n          from: {\n            maxHeight: '0',\n            opacity: '0%'\n          },\n          to: {\n            maxHeight: `${childNode?.offsetHeight}px`,\n            opacity: isDatatip ? '100%' : '95%'\n          },\n          options: {\n            duration: isDatatip ? 1 : 150,\n            easing: [0.0, 0.0, 0.2, 1]\n          }\n        };\n      },\n      unmounted: (_node) => {\n        return {\n          from: {\n            opacity: isDatatip ? '100%' : '95%'\n          },\n          to: {\n            maxHeight: '0',\n            opacity: '0%'\n          },\n          options: {\n            duration: isDatatip ? 1 : 150,\n            easing: [0.0, 0.0, 0.2, 1]\n          }\n        };\n      }\n    },\n    isAnimatedOnMount: true,\n    onAnimationEnd: () => onTransitionEnd?.()\n  });\n\n  // Set up initial wrapper height so Tooltip can animate from the bottom to the top\n  useEffect(() => {\n    if (wrapperRef.current && popoverRef.current?.offsetHeight) {\n      wrapperRef.current.style.height = `${popoverRef.current?.offsetHeight}px`;\n    }\n  }, []);\n\n  return (\n    <div\n      ref={wrapperRef}\n      id={id}\n      role=\"tooltip\"\n      class={classNames([styles.wrapper, schemeClass, baseTheme])}\n      {...testIdProps}>\n      <div ref={nodeRef} class={styles.inner} {...props}>\n        <div ref={popoverRef} class={classNames([variantClasses, styles.content])}>\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n};\n","/**\n * @license\n * Copyright (c) %FIRST_YEAR% %CURRENT_YEAR%, Oracle and/or its affiliates.\n * The Universal Permissive License (UPL), Version 1.0\n * as shown at https://oss.oracle.com/licenses/upl/\n * @ignore\n */\n\nimport { ComponentChild } from 'preact';\nimport { useState, useRef, useEffect, useCallback } from 'preact/hooks';\nimport { useId } from '../UNSAFE_useId';\nimport { Placement, Coords } from '../../UNSAFE_Floating';\nimport { useHover } from '../UNSAFE_useHover';\nimport { useFocus } from '../UNSAFE_useFocus';\nimport { useTouch } from '../UNSAFE_useTouch';\nimport { mergeProps } from '../../utils/UNSAFE_mergeProps';\nimport { TooltipContent } from './TooltipContent';\nimport { useColorScheme } from '../UNSAFE_useColorScheme';\nimport { TestIdProps } from '../UNSAFE_useTestId';\nimport {\n  getGlobalTooltipManager,\n  getWrappedTooltipContent,\n  SHOW_TOOLTIP_DELAY,\n  HIDE_TOOLTIP_DELAY\n} from '../../utils/PRIVATE_tooltipUtils';\n\nexport type Position = Omit<Placement, 'center'>;\n\nexport const anchorTos = ['element', 'pointer'] as const;\ntype AnchorTo = (typeof anchorTos)[number];\n\ntype AnchorModel = { x: AnchorTo; y: AnchorTo };\n\ntype Props = {\n  text?: string;\n  variant?: 'tooltip' | 'datatip';\n  isOpen: boolean;\n  position?: Position;\n  isDisabled?: boolean;\n  focusStrategy?: 'browser' | 'logical';\n  anchor?: AnchorModel;\n  offset?: { mainAxis?: number; crossAxis?: number };\n  onToggle?: (details: { value: boolean }) => void;\n  displayOnHover?: boolean;\n  dismissOnClick?: boolean;\n} & TestIdProps;\n\n/**\n * The 'mounting' and 'unmounting' states are related to the animation. The 'unmounted' state\n * is used for conditional rendering. In this state, the Tooltip content is completely removed\n * from the DOM. The 'mountPending' and 'unmountPending' are used when timeout is active.\n * The 'reposition' state is used to trigger a transition with new coordinates within\n * the same element.\n */\ntype Status =\n  | 'unmounted'\n  | 'mountPending'\n  | 'mounting'\n  | 'mounted'\n  | 'unmountPending'\n  | 'unmounting';\n\nexport const useTooltipControlled = ({\n  text,\n  isOpen = false,\n  variant = 'tooltip',\n  position = 'bottom',\n  displayOnHover = true,\n  dismissOnClick = true,\n  focusStrategy = 'browser',\n  isDisabled = false,\n  anchor = { x: 'element', y: 'element' },\n  offset,\n  onToggle,\n  testId\n}: Props): {\n  tooltipContent: ComponentChild;\n  tooltipProps: Record<string, any>;\n} => {\n  // Global TooltipManager singleton instance\n  const globalTooltipManager = getGlobalTooltipManager();\n\n  const disabled = isDisabled || !text;\n  const isInitialRenderState = useRef<boolean>(true);\n\n  const [state, _setState] = useState<Status>(!disabled && isOpen ? 'mounting' : 'unmounted');\n  const stateRef = useRef<Status>(state);\n  const setState = (newState: Status) => {\n    stateRef.current = newState;\n    _setState(newState);\n  };\n\n  // const tooltipId = useRef<string>(useId());\n\n  const [needsUpdate, setNeedsUpdate] = useState<boolean>(false);\n  setNeedsUpdate(false);\n\n  const isDatatip = variant === 'datatip';\n\n  const [isLogicalFocus, setLogicalFocus] = useState<boolean>(false);\n  const isLogicalFocusStrategy = focusStrategy === 'logical';\n  const isInitialRenderTrigger = useRef<boolean>(true);\n  const { hoverProps, isHover } = useHover({ isDisabled: !displayOnHover });\n  const { touchProps, isTouch } = useTouch({ isDisabled }); // TODO replace by useLongPress actionhook\n  // we only care about keyboard focus, don't enable useFocus hook if isHover or isTouch are active\n  const { focusProps, isFocus } = useFocus({\n    isDisabled: isLogicalFocusStrategy\n  });\n  // only enable the popoverHover hook if the tooltip is actually open\n  const { hoverProps: popoverHoverProps, isHover: popoverIsHover } = useHover({\n    isDisabled: isDisabled || !isOpen\n  });\n\n  const isPointer = anchor.x === 'pointer' || anchor.y === 'pointer';\n\n  const uniqueIdRef = useRef<string>(useId());\n  const targetRef = useRef<HTMLElement | null>(null);\n  const coordsRef = useRef<Coords>({ x: -9999, y: -9999 });\n  // if anchor is set to pointer and target does not have keyboard focus, use coords\n  const usedRef = isPointer && !isFocus ? coordsRef : targetRef;\n  const showDelay = isDatatip ? 0 : SHOW_TOOLTIP_DELAY;\n  const hideDelay = isDatatip ? 0 : HIDE_TOOLTIP_DELAY;\n  const toggleTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const currentColorScheme = useColorScheme();\n\n  const focusActive = useRef<boolean>(false);\n  const hoverActive = useRef<boolean>(false);\n\n  const toggleTimeoutClear = () => {\n    if (toggleTimeoutRef.current) {\n      clearTimeout(toggleTimeoutRef.current);\n      toggleTimeoutRef.current = null;\n    }\n  };\n\n  /*\n   * This effect executes when isFocus/isLogicalFocus changes\n   * - focusActive ref is set if the focus change follows a Tab key\n   * - hoverActive ref is reset, if focusActive becomes true\n   */\n  useEffect(() => {\n    if (isLogicalFocusStrategy) {\n      focusActive.current = isLogicalFocus;\n    } else {\n      focusActive.current = isFocus && globalTooltipManager.isTabKeyActive();\n    }\n    if (focusActive.current) {\n      hoverActive.current = false;\n    }\n  }, [isFocus, isLogicalFocus, isLogicalFocusStrategy, globalTooltipManager]);\n\n  /*\n   * This effect executes when isHover state changes\n   * - focusActive ref is reset, if hoverActive becomes true\n   */\n  useEffect(() => {\n    hoverActive.current = isHover;\n  }, [isHover]);\n\n  useEffect(() => {\n    // inner function for state transitions on various trigger changes\n    const updateState = (open: boolean) => {\n      if (open) {\n        // At least one toggle event is set to true\n        switch (state) {\n          case 'unmounted':\n            setState('mountPending'); // Set mount pending state if tooltip is unmounted\n            break;\n          case 'unmounting': // Switch back to mounting when unmounting was in progress and the tooltip should stay on\n            setState('mounting');\n            onToggle?.({ value: true });\n            break;\n          case 'unmountPending':\n            toggleTimeoutClear();\n            setState('mounted'); // Clear timers immediately and keep the tooltip mounted\n            break;\n        }\n      } else {\n        // No toggle events are set to true\n        switch (state) {\n          case 'mounting':\n          case 'mounted':\n            setState('unmountPending'); // Set unmount pending state if tooltip is mounted or in mounting transition\n            break;\n          case 'mountPending':\n            toggleTimeoutClear();\n            __resetCoords();\n            setState('unmounted'); // Unmount tooltip immediately if mounting is pending\n            break;\n        }\n      }\n    };\n\n    if (isInitialRenderTrigger.current) {\n      // On onitial render do not trigger rerender\n      isInitialRenderTrigger.current = false;\n      return;\n    }\n    // When pointer is used, handleMouseMove method is responsible for state updates\n    // until the tooltip is mounted\n    if (isPointer && isHover && state === 'unmounted') {\n      return;\n    }\n    updateState(\n      (isHover && hoverActive.current) ||\n        ((isFocus || isLogicalFocus) && focusActive.current) ||\n        popoverIsHover ||\n        isTouch\n    );\n  }, [isHover, isFocus, isLogicalFocus, popoverIsHover, isTouch, isPointer, state, onToggle]);\n\n  const destroyCallback = useCallback(() => {\n    focusActive.current = false;\n    hoverActive.current = false;\n    onToggle?.({ value: false });\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []); // don't want to depend on the 'onToggle' prop as some clients tend to pass a new callback on each render\n\n  /*\n   * Global mousedown handler to dismiss the tooltip on anchor click. This is especially needed\n   * for Safari which does not fire mouse events during animations when the anchor moves (JET-72605).\n   */\n  const mouseDownHandler = useCallback(\n    (event: MouseEvent) => {\n      if (\n        usedRef.current instanceof Element &&\n        usedRef.current.contains(event.target as Element) &&\n        dismissOnClick\n      ) {\n        toggleTimeoutClear();\n        document.removeEventListener('mousedown', mouseDownHandler, true);\n        destroyCallback();\n      }\n    },\n    [dismissOnClick, usedRef, destroyCallback]\n  );\n\n  useEffect(() => {\n    if (isInitialRenderState.current) {\n      // On onitial render do not trigger rerender\n      isInitialRenderState.current = false;\n      return;\n    }\n    setState(isOpen ? 'mounting' : 'unmounting');\n  }, [isOpen]);\n\n  useEffect(() => {\n    return () => {\n      // make sure to clear the toggle timeout on unmount\n      toggleTimeoutClear();\n      // reset focusActive and hoverActive refs\n      focusActive.current = false;\n      hoverActive.current = false;\n    };\n  }, []);\n\n  /*\n   * This effect executes when the component state changes.\n   * On 'mounted' state, the tooltip registers itself with the global tooltip manager.\n   * On 'unmounted', the tooltip unregisters from the global tooltip manager.\n   */\n  useEffect(() => {\n    if (state === 'mounting') {\n      globalTooltipManager.register(destroyCallback);\n    } else if (state === 'unmounted') {\n      globalTooltipManager.unregister(destroyCallback);\n      // clean up the mousedown handler just in case\n      document.removeEventListener('mousedown', mouseDownHandler, true);\n    }\n  }, [state, destroyCallback, globalTooltipManager, mouseDownHandler]);\n\n  /*\n   * Set a timer to toggle the state afer the 'pending' period expires\n   */\n  useEffect(() => {\n    if (!toggleTimeoutRef.current && (state === 'mountPending' || state === 'unmountPending')) {\n      if (state === 'mountPending') {\n        document.addEventListener('mousedown', mouseDownHandler, true);\n      }\n      toggleTimeoutRef.current = setTimeout(\n        () => {\n          toggleTimeoutClear();\n          // make sure the state has not changed in the mean time before onToggle\n          if (\n            (state === 'mountPending' || state === 'unmountPending') &&\n            state === stateRef.current\n          ) {\n            onToggle?.({ value: state === 'mountPending' });\n          }\n        },\n        state === 'mountPending' ? showDelay : hideDelay\n      );\n    }\n    return () => {\n      toggleTimeoutClear();\n    };\n  }, [state, showDelay, hideDelay, onToggle, mouseDownHandler]);\n\n  const handleMouseMove = (event: MouseEvent) => {\n    // we only want track mouse move while the state is 'unmounted' or when moving a 'mounted' datatip\n    if (state !== 'unmounted' && !(variant === 'datatip' && state === 'mounted')) {\n      return;\n    }\n    const targetRect = targetRef?.current?.getBoundingClientRect();\n\n    // Tooltip maintains static offset from left side of window\n    const distanceX = document.body.scrollLeft + (targetRect?.left || 0) + (targetRect?.width || 0);\n\n    // Tooltip maintains static offset from top side of the window\n    const distanceY = document.body.scrollTop + (targetRect?.top || 0) + (targetRect?.height || 0);\n\n    // Display tooltip at the mouse position if both anchors are set to pointer\n    const x = anchor.x === 'pointer' ? event.clientX : distanceX;\n    const y = anchor.y === 'pointer' ? event.clientY : distanceY;\n\n    if (state === 'mounted') {\n      coordsRef.current = { x, y };\n      if (needsUpdate !== true) setNeedsUpdate(true);\n    } else if (state === 'unmounted') {\n      toggleTimeoutClear();\n      toggleTimeoutRef.current = setTimeout(() => {\n        if (state === 'unmounted') {\n          coordsRef.current = { x, y };\n          onToggle?.({ value: true });\n        }\n      }, hideDelay);\n    }\n  };\n\n  const onLogicalFocus = (target: HTMLElement) => {\n    setLogicalFocus(true);\n    targetRef.current = target;\n    usedRef.current = target;\n  };\n\n  const onLogicalBlur = () => {\n    setLogicalFocus(false);\n  };\n\n  const onFocusCallback = useCallback((event: FocusEvent) => {\n    targetRef.current = event.currentTarget as HTMLElement;\n  }, []);\n\n  const onBlurCallback = useCallback((event: FocusEvent) => {\n    if (event.eventPhase === Event.AT_TARGET) {\n      // reset focusActive flag\n      focusActive.current = false;\n    }\n  }, []);\n\n  const focusInitProps = isLogicalFocusStrategy\n    ? {}\n    : {\n        onFocus: onFocusCallback,\n        onBlur: onBlurCallback\n      };\n\n  const hoverInitProps = {\n    onMouseEnter: useCallback((event: MouseEvent) => {\n      targetRef.current = event.target as HTMLElement;\n    }, [])\n  };\n\n  let actionableProps;\n\n  const __resetCoords = () => {\n    coordsRef.current = { x: -9999, y: -9999 };\n  };\n\n  if (disabled) {\n    actionableProps = mergeProps(hoverProps, focusProps, hoverInitProps, focusInitProps);\n  } else {\n    const anchorInitProps = {\n      'aria-describedby': uniqueIdRef.current,\n\n      ...(isPointer && {\n        onMouseLeave: () => {\n          if (state === 'mounting') {\n            return;\n          }\n          toggleTimeoutClear();\n        },\n        onMouseMove: (event: MouseEvent) => {\n          handleMouseMove(event);\n        }\n      })\n    };\n    actionableProps = mergeProps(\n      hoverProps,\n      focusProps,\n      touchProps,\n      hoverInitProps,\n      focusInitProps,\n      anchorInitProps,\n      isLogicalFocusStrategy ? { onLogicalFocus, onLogicalBlur } : {}\n    );\n  }\n\n  // No need to process tooltip if disabled or no text is provided\n  // Include actionableProps to detect mouseenter in components\n  // hovered state won't update unless actionableProps are already present in the component when mouse enters\n  if (disabled) {\n    toggleTimeoutClear();\n    __resetCoords();\n    return {\n      tooltipContent: null,\n      tooltipProps: actionableProps\n    };\n  }\n\n  const placement = position as Placement;\n\n  const handleTransitionEnd = () => {\n    if (state === 'mounting') {\n      setState('mounted');\n    }\n    if (state === 'unmounting') {\n      __resetCoords();\n      setState('unmounted');\n    }\n  };\n\n  const renderRawContent = (\n    <TooltipContent\n      id={uniqueIdRef.current}\n      testId={testId}\n      isOpen={['mounting', 'mounted', 'unmountPending'].includes(state)}\n      {...popoverHoverProps}\n      isDatatip={isDatatip}\n      onTransitionEnd={handleTransitionEnd}>\n      {text}\n    </TooltipContent>\n  );\n\n  const renderContent = getWrappedTooltipContent(\n    renderRawContent,\n    variant,\n    currentColorScheme,\n    usedRef,\n    placement,\n    offset\n  );\n\n  return {\n    tooltipContent: !['unmounted', 'mountPending'].includes(state) && renderContent,\n    tooltipProps: actionableProps\n  };\n};\n"],"names":["useRef","useTestId","useComponentTheme","TooltipContentRedwoodTheme","useThemeInterpolations","useAnimation","useEffect","_jsx","classNames","getGlobalTooltipManager","useState","useHover","useTouch","useFocus","useId","SHOW_TOOLTIP_DELAY","HIDE_TOOLTIP_DELAY","useColorScheme","useCallback","mergeProps","getWrappedTooltipContent"],"mappings":"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"}

package/cjs/useTooltipOnTruncation-77728bdf.js

@@ -0,0 +1,29 @@
+/* @oracle/oraclejet-preact: undefined */
+'use strict';
+
+var useDetectTruncation = require('./useDetectTruncation-be13f31d.js');
+var useTooltip = require('./useTooltip-43bfe8a3.js');
+require('preact/jsx-runtime');
+require('preact/hooks');
+var mergeProps = require('./mergeProps-e3da7237.js');
+require('./logger-2b636482.js');
+require('./LayerHost-f1a1533f.js');
+require('preact/compat');
+
+
+require('./hooks/UNSAFE_useTooltip/themes/redwood/TooltipContentVariants.css.js');
+require('./tooltipUtils-842e04c7.js');
+
+const useTooltipOnTruncation = (tooltipText, isDisabled = false) => {
+    const { detectTruncationProps, isTextTruncated } = useDetectTruncation.useDetectTruncation(isDisabled);
+    const { tooltipContent, tooltipProps } = useTooltip.useTooltip({
+        text: tooltipText,
+        isDisabled: !isTextTruncated || isDisabled
+    });
+    const { 'aria-describedby': notNeeded, ...validTooltipProps } = tooltipProps; //remove aria-describedby to prevent screen readers from reading the same text multiple times
+    const tooltipOnTruncationProps = mergeProps.mergeProps(detectTruncationProps, validTooltipProps);
+    return { tooltipOnTruncationProps, tooltipContent, isTextTruncated };
+};
+
+exports.useTooltipOnTruncation = useTooltipOnTruncation;
+//# sourceMappingURL=useTooltipOnTruncation-77728bdf.js.map

package/cjs/useTooltipOnTruncation-77728bdf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTooltipOnTruncation-77728bdf.js","sources":["../../src/hooks/PRIVATE_useTooltipOnTruncation/useTooltipOnTruncation.tsx"],"sourcesContent":["import { useDetectTruncation } from '#hooks/PRIVATE_useDetectTruncation';\nimport { useTooltip } from '#hooks/UNSAFE_useTooltip';\nimport { mergeProps } from '#utils/UNSAFE_mergeProps';\n\nconst useTooltipOnTruncation = (tooltipText?: string, isDisabled = false) => {\n  const { detectTruncationProps, isTextTruncated } = useDetectTruncation(isDisabled);\n  const { tooltipContent, tooltipProps } = useTooltip({\n    text: tooltipText,\n    isDisabled: !isTextTruncated || isDisabled\n  });\n\n  const { 'aria-describedby': notNeeded, ...validTooltipProps } = tooltipProps; //remove aria-describedby to prevent screen readers from reading the same text multiple times\n\n  const tooltipOnTruncationProps = mergeProps(detectTruncationProps, validTooltipProps);\n\n  return { tooltipOnTruncationProps, tooltipContent, isTextTruncated };\n};\n\nexport { useTooltipOnTruncation };\n"],"names":["useDetectTruncation","useTooltip","mergeProps"],"mappings":";;;;;;;;;;;;;;;;AAIM,MAAA,sBAAsB,GAAG,CAAC,WAAoB,EAAE,UAAU,GAAG,KAAK,KAAI;IAC1E,MAAM,EAAE,qBAAqB,EAAE,eAAe,EAAE,GAAGA,uCAAmB,CAAC,UAAU,CAAC,CAAC;AACnF,IAAA,MAAM,EAAE,cAAc,EAAE,YAAY,EAAE,GAAGC,qBAAU,CAAC;AAClD,QAAA,IAAI,EAAE,WAAW;AACjB,QAAA,UAAU,EAAE,CAAC,eAAe,IAAI,UAAU;AAC3C,KAAA,CAAC,CAAC;AAEH,IAAA,MAAM,EAAE,kBAAkB,EAAE,SAAS,EAAE,GAAG,iBAAiB,EAAE,GAAG,YAAY,CAAC;IAE7E,MAAM,wBAAwB,GAAGC,qBAAU,CAAC,qBAAqB,EAAE,iBAAiB,CAAC,CAAC;AAEtF,IAAA,OAAO,EAAE,wBAAwB,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC;AACvE;;;;"}