@fluentui/react-tooltip 9.8.12 → 9.72.9-experimental.component-base-hooks.20260122-49fc330360.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/components/Tooltip/useTooltipBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeArrowOffset, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport {\n useTooltipVisibility_unstable as useTooltipVisibility,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport type { KeyborgFocusInEvent } from '@fluentui/react-tabster';\nimport { KEYBORG_FOCUSIN, useIsNavigatingWithKeyboard } from '@fluentui/react-tabster';\nimport {\n applyTriggerPropsToChildren,\n useControllableState,\n useId,\n useIsomorphicLayoutEffect,\n useIsSSR,\n useMergedRefs,\n getTriggerChild,\n mergeCallbacks,\n useEventCallback,\n slot,\n getReactElementRef,\n} from '@fluentui/react-utilities';\nimport type { TooltipBaseProps, TooltipBaseState, TooltipChildProps, OnVisibleChangeData } from './Tooltip.types';\nimport { arrowHeight, tooltipBorderRadius } from './private/constants';\nimport { useTooltipTimeout } from './private/useTooltipTimeout';\nimport { Escape } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render Tooltip.\n *\n * The returned state can be modified with hooks such as useTooltipStyles_unstable,\n * before being passed to renderTooltip_unstable.\n *\n * @param props - props from this instance of Tooltip\n */\nexport const useTooltipBase_unstable = (props: TooltipBaseProps): TooltipBaseState => {\n 'use no memo';\n\n const context = useTooltipVisibility();\n const isServerSideRender = useIsSSR();\n const { targetDocument } = useFluent();\n\n const [visible, setVisibleInternal] = useControllableState({ state: props.visible, initialState: false });\n\n const {\n children,\n content,\n withArrow = false,\n positioning = 'above',\n onVisibleChange,\n relationship,\n showDelay = 250,\n hideDelay = 250,\n mountNode,\n } = props;\n\n const state: TooltipBaseState = {\n withArrow,\n positioning,\n showDelay,\n hideDelay,\n relationship,\n visible,\n shouldRenderTooltip: visible,\n mountNode,\n // Slots\n components: {\n content: 'div',\n },\n content: slot.always(content, {\n defaultProps: {\n role: 'tooltip',\n },\n elementType: 'div',\n }),\n };\n\n state.content.id = useId('tooltip-', state.content.id);\n\n const positioningOptions = {\n enabled: state.visible,\n arrowPadding: 2 * tooltipBorderRadius,\n position: 'above' as const,\n align: 'center' as const,\n offset: 4,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeight);\n }\n\n const {\n targetRef,\n containerRef,\n arrowRef,\n }: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n targetRef: React.MutableRefObject<unknown>;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n containerRef: React.MutableRefObject<HTMLDivElement>;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n arrowRef: React.MutableRefObject<HTMLDivElement>;\n } = usePositioning(positioningOptions);\n\n const [setDelayTimeout, clearDelayTimeout] = useTooltipTimeout(containerRef);\n\n const setVisible = React.useCallback(\n (ev: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => {\n clearDelayTimeout();\n setVisibleInternal(oldVisible => {\n if (data.visible !== oldVisible) {\n onVisibleChange?.(ev, data);\n }\n return data.visible;\n });\n },\n [clearDelayTimeout, setVisibleInternal, onVisibleChange],\n );\n\n state.content.ref = useMergedRefs(state.content.ref, containerRef);\n state.arrowRef = arrowRef;\n\n // When this tooltip is visible, hide any other tooltips, and register it\n // as the visibleTooltip with the TooltipContext.\n // Also add a listener on document to hide the tooltip if Escape is pressed\n useIsomorphicLayoutEffect(() => {\n if (visible) {\n const thisTooltip = {\n hide: (ev?: KeyboardEvent) => setVisible(undefined, { visible: false, documentKeyboardEvent: ev }),\n };\n\n context.visibleTooltip?.hide();\n context.visibleTooltip = thisTooltip;\n\n const onDocumentKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === Escape && !ev.defaultPrevented) {\n thisTooltip.hide(ev);\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Popover, Menu and Tooltip\n ev.preventDefault();\n }\n };\n\n targetDocument?.addEventListener('keydown', onDocumentKeyDown, {\n // As this event is added at targeted document,\n // we need to capture the event to be sure keydown handling from tooltip happens first\n capture: true,\n });\n\n return () => {\n if (context.visibleTooltip === thisTooltip) {\n context.visibleTooltip = undefined;\n }\n\n targetDocument?.removeEventListener('keydown', onDocumentKeyDown, { capture: true });\n };\n }\n }, [context, targetDocument, visible, setVisible]);\n\n // Used to skip showing the tooltip in certain situations when the trigger is focused.\n // See comments where this is set for more info.\n const ignoreNextFocusEventRef = React.useRef(false);\n\n // Listener for onPointerEnter and onFocus on the trigger element\n const onEnterTrigger = React.useCallback(\n (ev: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {\n ignoreNextFocusEventRef.current = false;\n return;\n }\n\n // Show immediately if another tooltip is already visible\n const delay = context.visibleTooltip ? 0 : state.showDelay;\n\n setDelayTimeout(() => {\n setVisible(ev, { visible: true });\n }, delay);\n\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n },\n [setDelayTimeout, setVisible, state.showDelay, context],\n );\n\n const isNavigatingWithKeyboard = useIsNavigatingWithKeyboard();\n\n // Callback ref that attaches a keyborg:focusin event listener.\n const [keyborgListenerCallbackRef] = React.useState(() => {\n const onKeyborgFocusIn = ((ev: KeyborgFocusInEvent) => {\n // Skip showing the tooltip if focus moved programmatically.\n // For example, we don't want to show the tooltip when a dialog is closed\n // and Tabster programmatically restores focus to the trigger button.\n // See https://github.com/microsoft/fluentui/issues/27576\n if (ev.detail?.isFocusedProgrammatically && !isNavigatingWithKeyboard()) {\n ignoreNextFocusEventRef.current = true;\n }\n }) as EventListener;\n\n // Save the current element to remove the listener when the ref changes\n let current: Element | null = null;\n\n // Callback ref that attaches the listener to the element\n return (element: Element | null) => {\n current?.removeEventListener(KEYBORG_FOCUSIN, onKeyborgFocusIn);\n element?.addEventListener(KEYBORG_FOCUSIN, onKeyborgFocusIn);\n current = element;\n };\n });\n\n // Listener for onPointerLeave and onBlur on the trigger element\n const onLeaveTrigger = React.useCallback(\n (ev: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n let delay = state.hideDelay;\n\n if (ev.type === 'blur') {\n // Hide immediately when losing focus\n delay = 0;\n\n // The focused element gets a blur event when the document loses focus\n // (e.g. switching tabs in the browser), but we don't want to show the\n // tooltip again when the document gets focus back. Handle this case by\n // checking if the blurred element is still the document's activeElement.\n // See https://github.com/microsoft/fluentui/issues/13541\n ignoreNextFocusEventRef.current = targetDocument?.activeElement === ev.target;\n }\n\n setDelayTimeout(() => {\n setVisible(ev, { visible: false });\n }, delay);\n\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n },\n [setDelayTimeout, setVisible, state.hideDelay, targetDocument],\n );\n\n // Cancel the hide timer when the mouse or focus enters the tooltip, and restart it when the mouse or focus leaves.\n // This keeps the tooltip visible when the mouse is moved over it, or it has focus within.\n state.content.onPointerEnter = mergeCallbacks(state.content.onPointerEnter, clearDelayTimeout);\n state.content.onPointerLeave = mergeCallbacks(state.content.onPointerLeave, onLeaveTrigger);\n state.content.onFocus = mergeCallbacks(state.content.onFocus, clearDelayTimeout);\n state.content.onBlur = mergeCallbacks(state.content.onBlur, onLeaveTrigger);\n\n const child = getTriggerChild(children);\n\n const triggerAriaProps: Pick<TooltipChildProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby'> = {};\n const isPopupExpanded =\n child?.props?.['aria-haspopup'] &&\n (child?.props?.['aria-expanded'] === true || child?.props?.['aria-expanded'] === 'true');\n\n if (relationship === 'label') {\n // aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.\n if (typeof state.content.children === 'string') {\n triggerAriaProps['aria-label'] = state.content.children;\n } else {\n triggerAriaProps['aria-labelledby'] = state.content.id;\n // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element\n state.shouldRenderTooltip = true;\n }\n } else if (relationship === 'description') {\n triggerAriaProps['aria-describedby'] = state.content.id;\n // Always render the tooltip even if hidden, so that aria-describedby refers to a valid element\n state.shouldRenderTooltip = true;\n }\n\n // Case 1: Don't render the Tooltip in SSR to avoid hydration errors\n // Case 2: Don't render the Tooltip, if it triggers Menu or another popup and it's already opened\n if (isServerSideRender || isPopupExpanded) {\n state.shouldRenderTooltip = false;\n }\n\n // Apply the trigger props to the child, either by calling the render function, or cloning with the new props\n state.children = applyTriggerPropsToChildren(children, {\n ...triggerAriaProps,\n ...child?.props,\n ref: useMergedRefs(\n getReactElementRef<HTMLButtonElement>(child),\n keyborgListenerCallbackRef,\n // If the target prop is not provided, attach targetRef to the trigger element's ref prop\n positioningOptions.target === undefined ? targetRef : undefined,\n ),\n onPointerEnter: useEventCallback(mergeCallbacks(child?.props?.onPointerEnter, onEnterTrigger)),\n onPointerLeave: useEventCallback(mergeCallbacks(child?.props?.onPointerLeave, onLeaveTrigger)),\n onFocus: useEventCallback(mergeCallbacks(child?.props?.onFocus, onEnterTrigger)),\n onBlur: useEventCallback(mergeCallbacks(child?.props?.onBlur, onLeaveTrigger)),\n });\n\n return state;\n};\n"],"names":["React","mergeArrowOffset","resolvePositioningShorthand","usePositioning","useTooltipVisibility_unstable","useTooltipVisibility","useFluent_unstable","useFluent","KEYBORG_FOCUSIN","useIsNavigatingWithKeyboard","applyTriggerPropsToChildren","useControllableState","useId","useIsomorphicLayoutEffect","useIsSSR","useMergedRefs","getTriggerChild","mergeCallbacks","useEventCallback","slot","getReactElementRef","arrowHeight","tooltipBorderRadius","useTooltipTimeout","Escape","useTooltipBase_unstable","props","child","context","isServerSideRender","targetDocument","visible","setVisibleInternal","state","initialState","children","content","withArrow","positioning","onVisibleChange","relationship","showDelay","hideDelay","mountNode","shouldRenderTooltip","components","always","defaultProps","role","elementType","id","positioningOptions","enabled","arrowPadding","position","align","offset","targetRef","containerRef","arrowRef","setDelayTimeout","clearDelayTimeout","setVisible","useCallback","ev","data","oldVisible","ref","thisTooltip","hide","undefined","documentKeyboardEvent","visibleTooltip","onDocumentKeyDown","key","defaultPrevented","preventDefault","addEventListener","capture","removeEventListener","ignoreNextFocusEventRef","useRef","onEnterTrigger","type","current","delay","persist","isNavigatingWithKeyboard","keyborgListenerCallbackRef","useState","onKeyborgFocusIn","detail","isFocusedProgrammatically","element","onLeaveTrigger","activeElement","target","onPointerEnter","onPointerLeave","onFocus","onBlur","triggerAriaProps","isPopupExpanded"],"mappings":"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"}
package/lib/index.js CHANGED
@@ -1 +1,4 @@
1
1
  export { Tooltip, renderTooltip_unstable, tooltipClassNames, useTooltipStyles_unstable, useTooltip_unstable } from './Tooltip';
2
+ // Experimental APIs - will be uncommented in experimental release
3
+ // export { useTooltipBase_unstable } from './Tooltip';
4
+ // export type { TooltipBaseProps, TooltipBaseState } from './Tooltip';
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Tooltip,\n renderTooltip_unstable,\n tooltipClassNames,\n useTooltipStyles_unstable,\n useTooltip_unstable,\n} from './Tooltip';\nexport type {\n OnVisibleChangeData,\n TooltipProps,\n TooltipSlots,\n TooltipState,\n TooltipChildProps as TooltipTriggerProps,\n} from './Tooltip';\n"],"names":["Tooltip","renderTooltip_unstable","tooltipClassNames","useTooltipStyles_unstable","useTooltip_unstable"],"mappings":"AAAA,SACEA,OAAO,EACPC,sBAAsB,EACtBC,iBAAiB,EACjBC,yBAAyB,EACzBC,mBAAmB,QACd,YAAY"}
1
+ {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Tooltip,\n renderTooltip_unstable,\n tooltipClassNames,\n useTooltipStyles_unstable,\n useTooltip_unstable,\n} from './Tooltip';\nexport type {\n OnVisibleChangeData,\n TooltipProps,\n TooltipSlots,\n TooltipState,\n TooltipChildProps as TooltipTriggerProps,\n} from './Tooltip';\n\n// Experimental APIs - will be uncommented in experimental release\n// export { useTooltipBase_unstable } from './Tooltip';\n// export type { TooltipBaseProps, TooltipBaseState } from './Tooltip';\n"],"names":["Tooltip","renderTooltip_unstable","tooltipClassNames","useTooltipStyles_unstable","useTooltip_unstable"],"mappings":"AAAA,SACEA,OAAO,EACPC,sBAAsB,EACtBC,iBAAiB,EACjBC,yBAAyB,EACzBC,mBAAmB,QACd,YAAY;CASnB,kEAAkE;CAClE,uDAAuD;CACvD,uEAAuE"}
@@ -18,6 +18,9 @@ _export(exports, {
18
18
  tooltipClassNames: function() {
19
19
  return _index.tooltipClassNames;
20
20
  },
21
+ useTooltipBase_unstable: function() {
22
+ return _index.useTooltipBase_unstable;
23
+ },
21
24
  useTooltipStyles_unstable: function() {
22
25
  return _index.useTooltipStyles_unstable;
23
26
  },
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/Tooltip.ts"],"sourcesContent":["export type {\n OnVisibleChangeData,\n TooltipChildProps,\n TooltipProps,\n TooltipSlots,\n TooltipState,\n} from './components/Tooltip/index';\nexport {\n Tooltip,\n renderTooltip_unstable,\n tooltipClassNames,\n useTooltipStyles_unstable,\n useTooltip_unstable,\n} from './components/Tooltip/index';\n"],"names":["Tooltip","renderTooltip_unstable","tooltipClassNames","useTooltipStyles_unstable","useTooltip_unstable"],"mappings":";;;;;;;;;;;;eAQEA,cAAO;;;eACPC,6BAAsB;;;eACtBC,wBAAiB;;;eACjBC,gCAAyB;;;eACzBC,0BAAmB;;;uBACd,6BAA6B"}
1
+ {"version":3,"sources":["../src/Tooltip.ts"],"sourcesContent":["export type {\n OnVisibleChangeData,\n TooltipChildProps,\n TooltipBaseProps,\n TooltipProps,\n TooltipSlots,\n TooltipBaseState,\n TooltipState,\n} from './components/Tooltip/index';\nexport {\n Tooltip,\n renderTooltip_unstable,\n tooltipClassNames,\n useTooltipStyles_unstable,\n useTooltip_unstable,\n useTooltipBase_unstable,\n} from './components/Tooltip/index';\n"],"names":["Tooltip","renderTooltip_unstable","tooltipClassNames","useTooltipStyles_unstable","useTooltip_unstable","useTooltipBase_unstable"],"mappings":";;;;;;;;;;;;eAUEA,cAAO;;;eACPC,6BAAsB;;;eACtBC,wBAAiB;;;eAGjBG,8BAAuB;;;eAFvBF,gCAAyB;;;eACzBC,0BAAmB;;;uBAEd,6BAA6B"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Tooltip/Tooltip.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComponentProps, ComponentState, JSXElement, Slot, TriggerProps } from '@fluentui/react-utilities';\nimport type { PortalProps } from '@fluentui/react-portal';\n\n/**\n * Slot properties for Tooltip\n */\nexport type TooltipSlots = {\n /**\n * The text or JSX content of the tooltip.\n */\n content: NonNullable<Slot<'div'>>;\n};\n\n/**\n * The properties that are added to the child of the Tooltip\n */\nexport type TooltipChildProps = {\n ref?: React.Ref<unknown>;\n} & Pick<\n React.HTMLAttributes<HTMLElement>,\n | 'aria-describedby'\n | 'aria-label'\n | 'aria-labelledby'\n | 'onBlur'\n | 'onFocus'\n | 'onPointerEnter'\n | 'onPointerLeave'\n | 'aria-haspopup'\n | 'aria-expanded'\n>;\n\n/**\n * Data for the Tooltip's onVisibleChange event.\n */\nexport type OnVisibleChangeData = {\n visible: boolean;\n\n /**\n * The event object, if this visibility change was triggered by a keyboard event on the document element\n * (such as Escape to hide the visible tooltip). Otherwise undefined.\n */\n documentKeyboardEvent?: KeyboardEvent;\n};\n\n/**\n * Properties for Tooltip\n */\nexport type TooltipProps = ComponentProps<TooltipSlots> &\n TriggerProps<TooltipChildProps> &\n Pick<PortalProps, 'mountNode'> & {\n /**\n * The tooltip's visual appearance.\n * * `normal` - Uses the theme's background and text colors.\n * * `inverted` - Higher contrast variant that uses the theme's inverted colors.\n *\n * @default normal\n */\n appearance?: 'normal' | 'inverted';\n /**\n * Delay before the tooltip is hidden, in milliseconds.\n *\n * @default 250\n */\n hideDelay?: number;\n\n /**\n * Notification when the visibility of the tooltip is changing.\n *\n * **Note**: for backwards compatibility, `event` will be undefined if this was triggered by a keyboard event on\n * the document element. Use `data.documentKeyboardEvent` if the keyboard event object is needed.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onVisibleChange?: (\n event: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined,\n data: OnVisibleChangeData,\n ) => void;\n\n /**\n * Configure the positioning of the tooltip\n *\n * @default above\n */\n positioning?: PositioningShorthand;\n\n /**\n * (Required) Specifies whether this tooltip is acting as the description or label of its trigger element.\n *\n * * `label` - The tooltip sets the trigger's aria-label or aria-labelledby attribute. This is useful for buttons\n * displaying only an icon, for example.\n * * `description` - The tooltip sets the trigger's aria-description or aria-describedby attribute.\n * * `inaccessible` - No aria attributes are set on the trigger. This makes the tooltip's content inaccessible to\n * screen readers, and should only be used if the tooltip's text is available by some other means.\n */\n relationship: 'label' | 'description' | 'inaccessible';\n\n /**\n * Delay before the tooltip is shown, in milliseconds.\n *\n * @default 250\n */\n showDelay?: number;\n\n /**\n * Control the tooltip's visibility programatically.\n *\n * This can be used in conjunction with onVisibleChange to modify the tooltip's show and hide behavior.\n *\n * If not provided, the visibility will be controlled by the tooltip itself, based on hover and focus events on the\n * trigger (child) element.\n *\n * @default false\n */\n visible?: boolean;\n\n /**\n * Render an arrow pointing to the target element\n *\n * @default false\n */\n withArrow?: boolean;\n };\n\n/**\n * State used in rendering Tooltip\n */\nexport type TooltipState = ComponentState<TooltipSlots> &\n Pick<TooltipProps, 'mountNode' | 'relationship'> &\n Required<Pick<TooltipProps, 'appearance' | 'hideDelay' | 'positioning' | 'showDelay' | 'visible' | 'withArrow'>> & {\n children?: JSXElement | null;\n\n /**\n * Whether the tooltip should be rendered to the DOM.\n */\n shouldRenderTooltip?: boolean;\n\n /**\n * Ref to the arrow element\n */\n arrowRef?: React.Ref<HTMLDivElement>;\n\n /**\n * CSS class for the arrow element\n */\n arrowClassName?: string;\n };\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
1
+ {"version":3,"sources":["../src/components/Tooltip/Tooltip.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComponentProps, ComponentState, JSXElement, Slot, TriggerProps } from '@fluentui/react-utilities';\nimport type { PortalProps } from '@fluentui/react-portal';\n\n/**\n * Slot properties for Tooltip\n */\nexport type TooltipSlots = {\n /**\n * The text or JSX content of the tooltip.\n */\n content: NonNullable<Slot<'div'>>;\n};\n\n/**\n * The properties that are added to the child of the Tooltip\n */\nexport type TooltipChildProps = {\n ref?: React.Ref<unknown>;\n} & Pick<\n React.HTMLAttributes<HTMLElement>,\n | 'aria-describedby'\n | 'aria-label'\n | 'aria-labelledby'\n | 'onBlur'\n | 'onFocus'\n | 'onPointerEnter'\n | 'onPointerLeave'\n | 'aria-haspopup'\n | 'aria-expanded'\n>;\n\n/**\n * Data for the Tooltip's onVisibleChange event.\n */\nexport type OnVisibleChangeData = {\n visible: boolean;\n\n /**\n * The event object, if this visibility change was triggered by a keyboard event on the document element\n * (such as Escape to hide the visible tooltip). Otherwise undefined.\n */\n documentKeyboardEvent?: KeyboardEvent;\n};\n\n/**\n * Properties for Tooltip\n */\nexport type TooltipProps = ComponentProps<TooltipSlots> &\n TriggerProps<TooltipChildProps> &\n Pick<PortalProps, 'mountNode'> & {\n /**\n * The tooltip's visual appearance.\n * * `normal` - Uses the theme's background and text colors.\n * * `inverted` - Higher contrast variant that uses the theme's inverted colors.\n *\n * @default normal\n */\n appearance?: 'normal' | 'inverted';\n /**\n * Delay before the tooltip is hidden, in milliseconds.\n *\n * @default 250\n */\n hideDelay?: number;\n\n /**\n * Notification when the visibility of the tooltip is changing.\n *\n * **Note**: for backwards compatibility, `event` will be undefined if this was triggered by a keyboard event on\n * the document element. Use `data.documentKeyboardEvent` if the keyboard event object is needed.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onVisibleChange?: (\n event: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined,\n data: OnVisibleChangeData,\n ) => void;\n\n /**\n * Configure the positioning of the tooltip\n *\n * @default above\n */\n positioning?: PositioningShorthand;\n\n /**\n * (Required) Specifies whether this tooltip is acting as the description or label of its trigger element.\n *\n * * `label` - The tooltip sets the trigger's aria-label or aria-labelledby attribute. This is useful for buttons\n * displaying only an icon, for example.\n * * `description` - The tooltip sets the trigger's aria-description or aria-describedby attribute.\n * * `inaccessible` - No aria attributes are set on the trigger. This makes the tooltip's content inaccessible to\n * screen readers, and should only be used if the tooltip's text is available by some other means.\n */\n relationship: 'label' | 'description' | 'inaccessible';\n\n /**\n * Delay before the tooltip is shown, in milliseconds.\n *\n * @default 250\n */\n showDelay?: number;\n\n /**\n * Control the tooltip's visibility programatically.\n *\n * This can be used in conjunction with onVisibleChange to modify the tooltip's show and hide behavior.\n *\n * If not provided, the visibility will be controlled by the tooltip itself, based on hover and focus events on the\n * trigger (child) element.\n *\n * @default false\n */\n visible?: boolean;\n\n /**\n * Render an arrow pointing to the target element\n *\n * @default false\n */\n withArrow?: boolean;\n };\n\nexport type TooltipBaseProps = Omit<TooltipProps, 'appearance'>;\n\n/**\n * State used in rendering Tooltip\n */\nexport type TooltipState = ComponentState<TooltipSlots> &\n Pick<TooltipProps, 'mountNode' | 'relationship'> &\n Required<Pick<TooltipProps, 'appearance' | 'hideDelay' | 'positioning' | 'showDelay' | 'visible' | 'withArrow'>> & {\n children?: JSXElement | null;\n\n /**\n * Whether the tooltip should be rendered to the DOM.\n */\n shouldRenderTooltip?: boolean;\n\n /**\n * Ref to the arrow element\n */\n arrowRef?: React.Ref<HTMLDivElement>;\n\n /**\n * CSS class for the arrow element\n */\n arrowClassName?: string;\n };\n\nexport type TooltipBaseState = Omit<TooltipState, 'appearance'>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
@@ -18,6 +18,9 @@ _export(exports, {
18
18
  tooltipClassNames: function() {
19
19
  return _useTooltipStylesstyles.tooltipClassNames;
20
20
  },
21
+ useTooltipBase_unstable: function() {
22
+ return _useTooltipBase.useTooltipBase_unstable;
23
+ },
21
24
  useTooltipStyles_unstable: function() {
22
25
  return _useTooltipStylesstyles.useTooltipStyles_unstable;
23
26
  },
@@ -28,4 +31,5 @@ _export(exports, {
28
31
  const _Tooltip = require("./Tooltip");
29
32
  const _renderTooltip = require("./renderTooltip");
30
33
  const _useTooltip = require("./useTooltip");
34
+ const _useTooltipBase = require("./useTooltipBase");
31
35
  const _useTooltipStylesstyles = require("./useTooltipStyles.styles");
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Tooltip/index.ts"],"sourcesContent":["export { Tooltip } from './Tooltip';\nexport type { OnVisibleChangeData, TooltipChildProps, TooltipProps, TooltipSlots, TooltipState } from './Tooltip.types';\nexport { renderTooltip_unstable } from './renderTooltip';\nexport { useTooltip_unstable } from './useTooltip';\nexport { tooltipClassNames, useTooltipStyles_unstable } from './useTooltipStyles.styles';\n"],"names":["Tooltip","renderTooltip_unstable","useTooltip_unstable","tooltipClassNames","useTooltipStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAEPC,qCAAsB;;;eAEtBE,yCAAiB;;;eAAEC,iDAAyB;;;eAD5CF,+BAAmB;;;yBAHJ,YAAY;+BAEG,kBAAkB;4BACrB,eAAe;wCACU,4BAA4B"}
1
+ {"version":3,"sources":["../src/components/Tooltip/index.ts"],"sourcesContent":["export { Tooltip } from './Tooltip';\nexport type {\n OnVisibleChangeData,\n TooltipChildProps,\n TooltipBaseProps,\n TooltipProps,\n TooltipSlots,\n TooltipBaseState,\n TooltipState,\n} from './Tooltip.types';\nexport { renderTooltip_unstable } from './renderTooltip';\nexport { useTooltip_unstable } from './useTooltip';\nexport { useTooltipBase_unstable } from './useTooltipBase';\nexport { tooltipClassNames, useTooltipStyles_unstable } from './useTooltipStyles.styles';\n"],"names":["Tooltip","renderTooltip_unstable","useTooltip_unstable","useTooltipBase_unstable","tooltipClassNames","useTooltipStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAUPC,qCAAsB;;;eAGtBG,yCAAiB;;;eADjBD,uCAAuB;;;eACJE,iDAAyB;;;eAF5CH,+BAAmB;;;yBAXJ,YAAY;+BAUG,kBAAkB;4BACrB,eAAe;gCACX,mBAAmB;wCACE,4BAA4B"}
@@ -9,225 +9,13 @@ Object.defineProperty(exports, "useTooltip_unstable", {
9
9
  return useTooltip_unstable;
10
10
  }
11
11
  });
12
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
13
- const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
14
- const _reactpositioning = require("@fluentui/react-positioning");
15
- const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
16
- const _reacttabster = require("@fluentui/react-tabster");
17
- const _reactutilities = require("@fluentui/react-utilities");
18
- const _constants = require("./private/constants");
19
- const _useTooltipTimeout = require("./private/useTooltipTimeout");
20
- const _keyboardkeys = require("@fluentui/keyboard-keys");
12
+ const _useTooltipBase = require("./useTooltipBase");
21
13
  const useTooltip_unstable = (props)=>{
22
14
  'use no memo';
23
- var _child_props, _child_props1, _child_props2, _child_props3, _child_props4, _child_props5, _child_props6;
24
- const context = (0, _reactsharedcontexts.useTooltipVisibility_unstable)();
25
- const isServerSideRender = (0, _reactutilities.useIsSSR)();
26
- const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
27
- const [visible, setVisibleInternal] = (0, _reactutilities.useControllableState)({
28
- state: props.visible,
29
- initialState: false
30
- });
31
- const { appearance = 'normal', children, content, withArrow = false, positioning = 'above', onVisibleChange, relationship, showDelay = 250, hideDelay = 250, mountNode } = props;
32
- const state = {
33
- withArrow,
34
- positioning,
35
- showDelay,
36
- hideDelay,
37
- relationship,
38
- visible,
39
- shouldRenderTooltip: visible,
15
+ const { appearance = 'normal' } = props;
16
+ const state = (0, _useTooltipBase.useTooltipBase_unstable)(props);
17
+ return {
40
18
  appearance,
41
- mountNode,
42
- // Slots
43
- components: {
44
- content: 'div'
45
- },
46
- content: _reactutilities.slot.always(content, {
47
- defaultProps: {
48
- role: 'tooltip'
49
- },
50
- elementType: 'div'
51
- })
19
+ ...state
52
20
  };
53
- state.content.id = (0, _reactutilities.useId)('tooltip-', state.content.id);
54
- const positioningOptions = {
55
- enabled: state.visible,
56
- arrowPadding: 2 * _constants.tooltipBorderRadius,
57
- position: 'above',
58
- align: 'center',
59
- offset: 4,
60
- ...(0, _reactpositioning.resolvePositioningShorthand)(state.positioning)
61
- };
62
- if (state.withArrow) {
63
- positioningOptions.offset = (0, _reactpositioning.mergeArrowOffset)(positioningOptions.offset, _constants.arrowHeight);
64
- }
65
- const { targetRef, containerRef, arrowRef } = (0, _reactpositioning.usePositioning)(positioningOptions);
66
- const [setDelayTimeout, clearDelayTimeout] = (0, _useTooltipTimeout.useTooltipTimeout)(containerRef);
67
- const setVisible = _react.useCallback((ev, data)=>{
68
- clearDelayTimeout();
69
- setVisibleInternal((oldVisible)=>{
70
- if (data.visible !== oldVisible) {
71
- onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(ev, data);
72
- }
73
- return data.visible;
74
- });
75
- }, [
76
- clearDelayTimeout,
77
- setVisibleInternal,
78
- onVisibleChange
79
- ]);
80
- state.content.ref = (0, _reactutilities.useMergedRefs)(state.content.ref, containerRef);
81
- state.arrowRef = arrowRef;
82
- // When this tooltip is visible, hide any other tooltips, and register it
83
- // as the visibleTooltip with the TooltipContext.
84
- // Also add a listener on document to hide the tooltip if Escape is pressed
85
- (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
86
- if (visible) {
87
- var _context_visibleTooltip;
88
- const thisTooltip = {
89
- hide: (ev)=>setVisible(undefined, {
90
- visible: false,
91
- documentKeyboardEvent: ev
92
- })
93
- };
94
- (_context_visibleTooltip = context.visibleTooltip) === null || _context_visibleTooltip === void 0 ? void 0 : _context_visibleTooltip.hide();
95
- context.visibleTooltip = thisTooltip;
96
- const onDocumentKeyDown = (ev)=>{
97
- if (ev.key === _keyboardkeys.Escape && !ev.defaultPrevented) {
98
- thisTooltip.hide(ev);
99
- // stop propagation to avoid conflicting with other elements that listen for `Escape`
100
- // e,g: Dialog, Popover, Menu and Tooltip
101
- ev.preventDefault();
102
- }
103
- };
104
- targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown, {
105
- // As this event is added at targeted document,
106
- // we need to capture the event to be sure keydown handling from tooltip happens first
107
- capture: true
108
- });
109
- return ()=>{
110
- if (context.visibleTooltip === thisTooltip) {
111
- context.visibleTooltip = undefined;
112
- }
113
- targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown, {
114
- capture: true
115
- });
116
- };
117
- }
118
- }, [
119
- context,
120
- targetDocument,
121
- visible,
122
- setVisible
123
- ]);
124
- // Used to skip showing the tooltip in certain situations when the trigger is focused.
125
- // See comments where this is set for more info.
126
- const ignoreNextFocusEventRef = _react.useRef(false);
127
- // Listener for onPointerEnter and onFocus on the trigger element
128
- const onEnterTrigger = _react.useCallback((ev)=>{
129
- if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {
130
- ignoreNextFocusEventRef.current = false;
131
- return;
132
- }
133
- // Show immediately if another tooltip is already visible
134
- const delay = context.visibleTooltip ? 0 : state.showDelay;
135
- setDelayTimeout(()=>{
136
- setVisible(ev, {
137
- visible: true
138
- });
139
- }, delay);
140
- ev.persist(); // Persist the event since the setVisible call will happen asynchronously
141
- }, [
142
- setDelayTimeout,
143
- setVisible,
144
- state.showDelay,
145
- context
146
- ]);
147
- const isNavigatingWithKeyboard = (0, _reacttabster.useIsNavigatingWithKeyboard)();
148
- // Callback ref that attaches a keyborg:focusin event listener.
149
- const [keyborgListenerCallbackRef] = _react.useState(()=>{
150
- const onKeyborgFocusIn = (ev)=>{
151
- var _ev_detail;
152
- // Skip showing the tooltip if focus moved programmatically.
153
- // For example, we don't want to show the tooltip when a dialog is closed
154
- // and Tabster programmatically restores focus to the trigger button.
155
- // See https://github.com/microsoft/fluentui/issues/27576
156
- if (((_ev_detail = ev.detail) === null || _ev_detail === void 0 ? void 0 : _ev_detail.isFocusedProgrammatically) && !isNavigatingWithKeyboard()) {
157
- ignoreNextFocusEventRef.current = true;
158
- }
159
- };
160
- // Save the current element to remove the listener when the ref changes
161
- let current = null;
162
- // Callback ref that attaches the listener to the element
163
- return (element)=>{
164
- current === null || current === void 0 ? void 0 : current.removeEventListener(_reacttabster.KEYBORG_FOCUSIN, onKeyborgFocusIn);
165
- element === null || element === void 0 ? void 0 : element.addEventListener(_reacttabster.KEYBORG_FOCUSIN, onKeyborgFocusIn);
166
- current = element;
167
- };
168
- });
169
- // Listener for onPointerLeave and onBlur on the trigger element
170
- const onLeaveTrigger = _react.useCallback((ev)=>{
171
- let delay = state.hideDelay;
172
- if (ev.type === 'blur') {
173
- // Hide immediately when losing focus
174
- delay = 0;
175
- // The focused element gets a blur event when the document loses focus
176
- // (e.g. switching tabs in the browser), but we don't want to show the
177
- // tooltip again when the document gets focus back. Handle this case by
178
- // checking if the blurred element is still the document's activeElement.
179
- // See https://github.com/microsoft/fluentui/issues/13541
180
- ignoreNextFocusEventRef.current = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === ev.target;
181
- }
182
- setDelayTimeout(()=>{
183
- setVisible(ev, {
184
- visible: false
185
- });
186
- }, delay);
187
- ev.persist(); // Persist the event since the setVisible call will happen asynchronously
188
- }, [
189
- setDelayTimeout,
190
- setVisible,
191
- state.hideDelay,
192
- targetDocument
193
- ]);
194
- // Cancel the hide timer when the mouse or focus enters the tooltip, and restart it when the mouse or focus leaves.
195
- // This keeps the tooltip visible when the mouse is moved over it, or it has focus within.
196
- state.content.onPointerEnter = (0, _reactutilities.mergeCallbacks)(state.content.onPointerEnter, clearDelayTimeout);
197
- state.content.onPointerLeave = (0, _reactutilities.mergeCallbacks)(state.content.onPointerLeave, onLeaveTrigger);
198
- state.content.onFocus = (0, _reactutilities.mergeCallbacks)(state.content.onFocus, clearDelayTimeout);
199
- state.content.onBlur = (0, _reactutilities.mergeCallbacks)(state.content.onBlur, onLeaveTrigger);
200
- const child = (0, _reactutilities.getTriggerChild)(children);
201
- const triggerAriaProps = {};
202
- const isPopupExpanded = (child === null || child === void 0 ? void 0 : (_child_props = child.props) === null || _child_props === void 0 ? void 0 : _child_props['aria-haspopup']) && ((child === null || child === void 0 ? void 0 : (_child_props1 = child.props) === null || _child_props1 === void 0 ? void 0 : _child_props1['aria-expanded']) === true || (child === null || child === void 0 ? void 0 : (_child_props2 = child.props) === null || _child_props2 === void 0 ? void 0 : _child_props2['aria-expanded']) === 'true');
203
- if (relationship === 'label') {
204
- // aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.
205
- if (typeof state.content.children === 'string') {
206
- triggerAriaProps['aria-label'] = state.content.children;
207
- } else {
208
- triggerAriaProps['aria-labelledby'] = state.content.id;
209
- // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
210
- state.shouldRenderTooltip = true;
211
- }
212
- } else if (relationship === 'description') {
213
- triggerAriaProps['aria-describedby'] = state.content.id;
214
- // Always render the tooltip even if hidden, so that aria-describedby refers to a valid element
215
- state.shouldRenderTooltip = true;
216
- }
217
- // Case 1: Don't render the Tooltip in SSR to avoid hydration errors
218
- // Case 2: Don't render the Tooltip, if it triggers Menu or another popup and it's already opened
219
- if (isServerSideRender || isPopupExpanded) {
220
- state.shouldRenderTooltip = false;
221
- }
222
- // Apply the trigger props to the child, either by calling the render function, or cloning with the new props
223
- state.children = (0, _reactutilities.applyTriggerPropsToChildren)(children, {
224
- ...triggerAriaProps,
225
- ...child === null || child === void 0 ? void 0 : child.props,
226
- ref: (0, _reactutilities.useMergedRefs)((0, _reactutilities.getReactElementRef)(child), keyborgListenerCallbackRef, positioningOptions.target === undefined ? targetRef : undefined),
227
- onPointerEnter: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : (_child_props3 = child.props) === null || _child_props3 === void 0 ? void 0 : _child_props3.onPointerEnter, onEnterTrigger)),
228
- onPointerLeave: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : (_child_props4 = child.props) === null || _child_props4 === void 0 ? void 0 : _child_props4.onPointerLeave, onLeaveTrigger)),
229
- onFocus: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : (_child_props5 = child.props) === null || _child_props5 === void 0 ? void 0 : _child_props5.onFocus, onEnterTrigger)),
230
- onBlur: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : (_child_props6 = child.props) === null || _child_props6 === void 0 ? void 0 : _child_props6.onBlur, onLeaveTrigger))
231
- });
232
- return state;
233
21
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Tooltip/useTooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeArrowOffset, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport {\n useTooltipVisibility_unstable as useTooltipVisibility,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport type { KeyborgFocusInEvent } from '@fluentui/react-tabster';\nimport { KEYBORG_FOCUSIN, useIsNavigatingWithKeyboard } from '@fluentui/react-tabster';\nimport {\n applyTriggerPropsToChildren,\n useControllableState,\n useId,\n useIsomorphicLayoutEffect,\n useIsSSR,\n useMergedRefs,\n getTriggerChild,\n mergeCallbacks,\n useEventCallback,\n slot,\n getReactElementRef,\n} from '@fluentui/react-utilities';\nimport type { TooltipProps, TooltipState, TooltipChildProps, OnVisibleChangeData } from './Tooltip.types';\nimport { arrowHeight, tooltipBorderRadius } from './private/constants';\nimport { useTooltipTimeout } from './private/useTooltipTimeout';\nimport { Escape } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render Tooltip.\n *\n * The returned state can be modified with hooks such as useTooltipStyles_unstable,\n * before being passed to renderTooltip_unstable.\n *\n * @param props - props from this instance of Tooltip\n */\nexport const useTooltip_unstable = (props: TooltipProps): TooltipState => {\n 'use no memo';\n\n const context = useTooltipVisibility();\n const isServerSideRender = useIsSSR();\n const { targetDocument } = useFluent();\n\n const [visible, setVisibleInternal] = useControllableState({ state: props.visible, initialState: false });\n\n const {\n appearance = 'normal',\n children,\n content,\n withArrow = false,\n positioning = 'above',\n onVisibleChange,\n relationship,\n showDelay = 250,\n hideDelay = 250,\n mountNode,\n } = props;\n\n const state: TooltipState = {\n withArrow,\n positioning,\n showDelay,\n hideDelay,\n relationship,\n visible,\n shouldRenderTooltip: visible,\n appearance,\n mountNode,\n // Slots\n components: {\n content: 'div',\n },\n content: slot.always(content, {\n defaultProps: {\n role: 'tooltip',\n },\n elementType: 'div',\n }),\n };\n\n state.content.id = useId('tooltip-', state.content.id);\n\n const positioningOptions = {\n enabled: state.visible,\n arrowPadding: 2 * tooltipBorderRadius,\n position: 'above' as const,\n align: 'center' as const,\n offset: 4,\n ...resolvePositioningShorthand(state.positioning),\n };\n\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeight);\n }\n\n const {\n targetRef,\n containerRef,\n arrowRef,\n }: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n targetRef: React.MutableRefObject<unknown>;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n containerRef: React.MutableRefObject<HTMLDivElement>;\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n arrowRef: React.MutableRefObject<HTMLDivElement>;\n } = usePositioning(positioningOptions);\n\n const [setDelayTimeout, clearDelayTimeout] = useTooltipTimeout(containerRef);\n\n const setVisible = React.useCallback(\n (ev: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => {\n clearDelayTimeout();\n setVisibleInternal(oldVisible => {\n if (data.visible !== oldVisible) {\n onVisibleChange?.(ev, data);\n }\n return data.visible;\n });\n },\n [clearDelayTimeout, setVisibleInternal, onVisibleChange],\n );\n\n state.content.ref = useMergedRefs(state.content.ref, containerRef);\n state.arrowRef = arrowRef;\n\n // When this tooltip is visible, hide any other tooltips, and register it\n // as the visibleTooltip with the TooltipContext.\n // Also add a listener on document to hide the tooltip if Escape is pressed\n useIsomorphicLayoutEffect(() => {\n if (visible) {\n const thisTooltip = {\n hide: (ev?: KeyboardEvent) => setVisible(undefined, { visible: false, documentKeyboardEvent: ev }),\n };\n\n context.visibleTooltip?.hide();\n context.visibleTooltip = thisTooltip;\n\n const onDocumentKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === Escape && !ev.defaultPrevented) {\n thisTooltip.hide(ev);\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Popover, Menu and Tooltip\n ev.preventDefault();\n }\n };\n\n targetDocument?.addEventListener('keydown', onDocumentKeyDown, {\n // As this event is added at targeted document,\n // we need to capture the event to be sure keydown handling from tooltip happens first\n capture: true,\n });\n\n return () => {\n if (context.visibleTooltip === thisTooltip) {\n context.visibleTooltip = undefined;\n }\n\n targetDocument?.removeEventListener('keydown', onDocumentKeyDown, { capture: true });\n };\n }\n }, [context, targetDocument, visible, setVisible]);\n\n // Used to skip showing the tooltip in certain situations when the trigger is focused.\n // See comments where this is set for more info.\n const ignoreNextFocusEventRef = React.useRef(false);\n\n // Listener for onPointerEnter and onFocus on the trigger element\n const onEnterTrigger = React.useCallback(\n (ev: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {\n ignoreNextFocusEventRef.current = false;\n return;\n }\n\n // Show immediately if another tooltip is already visible\n const delay = context.visibleTooltip ? 0 : state.showDelay;\n\n setDelayTimeout(() => {\n setVisible(ev, { visible: true });\n }, delay);\n\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n },\n [setDelayTimeout, setVisible, state.showDelay, context],\n );\n\n const isNavigatingWithKeyboard = useIsNavigatingWithKeyboard();\n\n // Callback ref that attaches a keyborg:focusin event listener.\n const [keyborgListenerCallbackRef] = React.useState(() => {\n const onKeyborgFocusIn = ((ev: KeyborgFocusInEvent) => {\n // Skip showing the tooltip if focus moved programmatically.\n // For example, we don't want to show the tooltip when a dialog is closed\n // and Tabster programmatically restores focus to the trigger button.\n // See https://github.com/microsoft/fluentui/issues/27576\n if (ev.detail?.isFocusedProgrammatically && !isNavigatingWithKeyboard()) {\n ignoreNextFocusEventRef.current = true;\n }\n }) as EventListener;\n\n // Save the current element to remove the listener when the ref changes\n let current: Element | null = null;\n\n // Callback ref that attaches the listener to the element\n return (element: Element | null) => {\n current?.removeEventListener(KEYBORG_FOCUSIN, onKeyborgFocusIn);\n element?.addEventListener(KEYBORG_FOCUSIN, onKeyborgFocusIn);\n current = element;\n };\n });\n\n // Listener for onPointerLeave and onBlur on the trigger element\n const onLeaveTrigger = React.useCallback(\n (ev: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n let delay = state.hideDelay;\n\n if (ev.type === 'blur') {\n // Hide immediately when losing focus\n delay = 0;\n\n // The focused element gets a blur event when the document loses focus\n // (e.g. switching tabs in the browser), but we don't want to show the\n // tooltip again when the document gets focus back. Handle this case by\n // checking if the blurred element is still the document's activeElement.\n // See https://github.com/microsoft/fluentui/issues/13541\n ignoreNextFocusEventRef.current = targetDocument?.activeElement === ev.target;\n }\n\n setDelayTimeout(() => {\n setVisible(ev, { visible: false });\n }, delay);\n\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n },\n [setDelayTimeout, setVisible, state.hideDelay, targetDocument],\n );\n\n // Cancel the hide timer when the mouse or focus enters the tooltip, and restart it when the mouse or focus leaves.\n // This keeps the tooltip visible when the mouse is moved over it, or it has focus within.\n state.content.onPointerEnter = mergeCallbacks(state.content.onPointerEnter, clearDelayTimeout);\n state.content.onPointerLeave = mergeCallbacks(state.content.onPointerLeave, onLeaveTrigger);\n state.content.onFocus = mergeCallbacks(state.content.onFocus, clearDelayTimeout);\n state.content.onBlur = mergeCallbacks(state.content.onBlur, onLeaveTrigger);\n\n const child = getTriggerChild(children);\n\n const triggerAriaProps: Pick<TooltipChildProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby'> = {};\n const isPopupExpanded =\n child?.props?.['aria-haspopup'] &&\n (child?.props?.['aria-expanded'] === true || child?.props?.['aria-expanded'] === 'true');\n\n if (relationship === 'label') {\n // aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.\n if (typeof state.content.children === 'string') {\n triggerAriaProps['aria-label'] = state.content.children;\n } else {\n triggerAriaProps['aria-labelledby'] = state.content.id;\n // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element\n state.shouldRenderTooltip = true;\n }\n } else if (relationship === 'description') {\n triggerAriaProps['aria-describedby'] = state.content.id;\n // Always render the tooltip even if hidden, so that aria-describedby refers to a valid element\n state.shouldRenderTooltip = true;\n }\n\n // Case 1: Don't render the Tooltip in SSR to avoid hydration errors\n // Case 2: Don't render the Tooltip, if it triggers Menu or another popup and it's already opened\n if (isServerSideRender || isPopupExpanded) {\n state.shouldRenderTooltip = false;\n }\n\n // Apply the trigger props to the child, either by calling the render function, or cloning with the new props\n state.children = applyTriggerPropsToChildren(children, {\n ...triggerAriaProps,\n ...child?.props,\n ref: useMergedRefs(\n getReactElementRef<HTMLButtonElement>(child),\n keyborgListenerCallbackRef,\n // If the target prop is not provided, attach targetRef to the trigger element's ref prop\n positioningOptions.target === undefined ? targetRef : undefined,\n ),\n onPointerEnter: useEventCallback(mergeCallbacks(child?.props?.onPointerEnter, onEnterTrigger)),\n onPointerLeave: useEventCallback(mergeCallbacks(child?.props?.onPointerLeave, onLeaveTrigger)),\n onFocus: useEventCallback(mergeCallbacks(child?.props?.onFocus, onEnterTrigger)),\n onBlur: useEventCallback(mergeCallbacks(child?.props?.onBlur, onLeaveTrigger)),\n });\n\n return state;\n};\n"],"names":["React","mergeArrowOffset","resolvePositioningShorthand","usePositioning","useTooltipVisibility_unstable","useTooltipVisibility","useFluent_unstable","useFluent","KEYBORG_FOCUSIN","useIsNavigatingWithKeyboard","applyTriggerPropsToChildren","useControllableState","useId","useIsomorphicLayoutEffect","useIsSSR","useMergedRefs","getTriggerChild","mergeCallbacks","useEventCallback","slot","getReactElementRef","arrowHeight","tooltipBorderRadius","useTooltipTimeout","Escape","useTooltip_unstable","props","child","context","isServerSideRender","targetDocument","visible","setVisibleInternal","state","initialState","appearance","children","content","withArrow","positioning","onVisibleChange","relationship","showDelay","hideDelay","mountNode","shouldRenderTooltip","components","always","defaultProps","role","elementType","id","positioningOptions","enabled","arrowPadding","position","align","offset","targetRef","containerRef","arrowRef","setDelayTimeout","clearDelayTimeout","setVisible","useCallback","ev","data","oldVisible","ref","thisTooltip","hide","undefined","documentKeyboardEvent","visibleTooltip","onDocumentKeyDown","key","defaultPrevented","preventDefault","addEventListener","capture","removeEventListener","ignoreNextFocusEventRef","useRef","onEnterTrigger","type","current","delay","persist","isNavigatingWithKeyboard","keyborgListenerCallbackRef","useState","onKeyborgFocusIn","detail","isFocusedProgrammatically","element","onLeaveTrigger","activeElement","target","onPointerEnter","onPointerLeave","onFocus","onBlur","triggerAriaProps","isPopupExpanded"],"mappings":"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"}
1
+ {"version":3,"sources":["../src/components/Tooltip/useTooltip.tsx"],"sourcesContent":["'use client';\n\nimport type { TooltipProps, TooltipState } from './Tooltip.types';\nimport { useTooltipBase_unstable } from './useTooltipBase';\n\n/**\n * Create the state required to render Tooltip.\n *\n * The returned state can be modified with hooks such as useTooltipStyles_unstable,\n * before being passed to renderTooltip_unstable.\n *\n * @param props - props from this instance of Tooltip\n */\nexport const useTooltip_unstable = (props: TooltipProps): TooltipState => {\n 'use no memo';\n\n const { appearance = 'normal' } = props;\n\n const state = useTooltipBase_unstable(props);\n\n return {\n appearance,\n ...state,\n };\n};\n"],"names":["useTooltipBase_unstable","useTooltip_unstable","props","appearance","state"],"mappings":"AAAA;;;;;;;;;;;gCAGwC,mBAAmB;AAUpD,MAAMC,sBAAsB,CAACC;IAClC;IAEA,MAAM,EAAEC,aAAa,QAAQ,EAAE,GAAGD;IAElC,MAAME,YAAQJ,uCAAAA,EAAwBE;IAEtC,OAAO;QACLC;QACA,GAAGC,KAAK;IACV;AACF,EAAE"}