@fluentui/react-tooltip 9.4.30 → 9.4.32
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +150 -126
- package/lib/components/Tooltip/useTooltip.js +2 -1
- package/lib/components/Tooltip/useTooltip.js.map +1 -1
- package/lib/components/Tooltip/useTooltipStyles.styles.js +2 -0
- package/lib/components/Tooltip/useTooltipStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltip.js +2 -1
- package/lib-commonjs/components/Tooltip/useTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltipStyles.styles.js +1 -0
- package/lib-commonjs/components/Tooltip/useTooltipStyles.styles.js.map +1 -1
- package/package.json +10 -11
@@ -13,6 +13,7 @@ import { Escape } from '@fluentui/keyboard-keys';
|
|
13
13
|
*
|
14
14
|
* @param props - props from this instance of Tooltip
|
15
15
|
*/ export const useTooltip_unstable = (props)=>{
|
16
|
+
'use no memo';
|
16
17
|
var _child_props, _child_props1, _child_props2, _child_props3;
|
17
18
|
const context = useTooltipVisibility();
|
18
19
|
const isServerSideRender = useIsSSR();
|
@@ -114,7 +115,7 @@ import { Escape } from '@fluentui/keyboard-keys';
|
|
114
115
|
visible,
|
115
116
|
setVisible
|
116
117
|
]);
|
117
|
-
// Used to skip showing the tooltip in certain situations when the trigger is
|
118
|
+
// Used to skip showing the tooltip in certain situations when the trigger is focused.
|
118
119
|
// See comments where this is set for more info.
|
119
120
|
const ignoreNextFocusEventRef = React.useRef(false);
|
120
121
|
// Listener for onPointerEnter and onFocus on the trigger element
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useTooltip.tsx"],"sourcesContent":["import * 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 } from '@fluentui/react-tabster';\nimport {\n applyTriggerPropsToChildren,\n useControllableState,\n useId,\n useIsomorphicLayoutEffect,\n useIsSSR,\n useMergedRefs,\n useTimeout,\n getTriggerChild,\n mergeCallbacks,\n useEventCallback,\n slot,\n} from '@fluentui/react-utilities';\nimport type { TooltipProps, TooltipState, TooltipChildProps, OnVisibleChangeData } from './Tooltip.types';\nimport { arrowHeight, tooltipBorderRadius } from './private/constants';\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 const context = useTooltipVisibility();\n const isServerSideRender = useIsSSR();\n const { targetDocument } = useFluent();\n const [setDelayTimeout, clearDelayTimeout] = useTimeout();\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 [visible, setVisibleInternal] = useControllableState({ state: props.visible, initialState: false });\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 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 targetRef: React.MutableRefObject<unknown>;\n containerRef: React.MutableRefObject<HTMLDivElement>;\n arrowRef: React.MutableRefObject<HTMLDivElement>;\n } = usePositioning(positioningOptions);\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 focued.\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 // 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) {\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\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 // Don't render the Tooltip in SSR to avoid hydration errors\n if (isServerSideRender) {\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 child?.ref,\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","applyTriggerPropsToChildren","useControllableState","useId","useIsomorphicLayoutEffect","useIsSSR","useMergedRefs","useTimeout","getTriggerChild","mergeCallbacks","useEventCallback","slot","arrowHeight","tooltipBorderRadius","Escape","useTooltip_unstable","props","child","context","isServerSideRender","targetDocument","setDelayTimeout","clearDelayTimeout","appearance","children","content","withArrow","positioning","onVisibleChange","relationship","showDelay","hideDelay","mountNode","visible","setVisibleInternal","state","initialState","setVisible","useCallback","ev","data","oldVisible","shouldRenderTooltip","components","always","defaultProps","role","elementType","id","positioningOptions","enabled","arrowPadding","position","align","offset","targetRef","containerRef","arrowRef","ref","thisTooltip","hide","undefined","documentKeyboardEvent","visibleTooltip","onDocumentKeyDown","key","defaultPrevented","preventDefault","addEventListener","capture","removeEventListener","ignoreNextFocusEventRef","useRef","onEnterTrigger","type","current","delay","persist","keyborgListenerCallbackRef","useState","onKeyborgFocusIn","detail","isFocusedProgrammatically","element","onLeaveTrigger","activeElement","target","onPointerEnter","onPointerLeave","onFocus","onBlur","triggerAriaProps"],"mappings":"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"}
|
1
|
+
{"version":3,"sources":["useTooltip.tsx"],"sourcesContent":["import * 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 } from '@fluentui/react-tabster';\nimport {\n applyTriggerPropsToChildren,\n useControllableState,\n useId,\n useIsomorphicLayoutEffect,\n useIsSSR,\n useMergedRefs,\n useTimeout,\n getTriggerChild,\n mergeCallbacks,\n useEventCallback,\n slot,\n} from '@fluentui/react-utilities';\nimport type { TooltipProps, TooltipState, TooltipChildProps, OnVisibleChangeData } from './Tooltip.types';\nimport { arrowHeight, tooltipBorderRadius } from './private/constants';\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 const [setDelayTimeout, clearDelayTimeout] = useTimeout();\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 [visible, setVisibleInternal] = useControllableState({ state: props.visible, initialState: false });\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 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 targetRef: React.MutableRefObject<unknown>;\n containerRef: React.MutableRefObject<HTMLDivElement>;\n arrowRef: React.MutableRefObject<HTMLDivElement>;\n } = usePositioning(positioningOptions);\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 // 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) {\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\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 // Don't render the Tooltip in SSR to avoid hydration errors\n if (isServerSideRender) {\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 child?.ref,\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","applyTriggerPropsToChildren","useControllableState","useId","useIsomorphicLayoutEffect","useIsSSR","useMergedRefs","useTimeout","getTriggerChild","mergeCallbacks","useEventCallback","slot","arrowHeight","tooltipBorderRadius","Escape","useTooltip_unstable","props","child","context","isServerSideRender","targetDocument","setDelayTimeout","clearDelayTimeout","appearance","children","content","withArrow","positioning","onVisibleChange","relationship","showDelay","hideDelay","mountNode","visible","setVisibleInternal","state","initialState","setVisible","useCallback","ev","data","oldVisible","shouldRenderTooltip","components","always","defaultProps","role","elementType","id","positioningOptions","enabled","arrowPadding","position","align","offset","targetRef","containerRef","arrowRef","ref","thisTooltip","hide","undefined","documentKeyboardEvent","visibleTooltip","onDocumentKeyDown","key","defaultPrevented","preventDefault","addEventListener","capture","removeEventListener","ignoreNextFocusEventRef","useRef","onEnterTrigger","type","current","delay","persist","keyborgListenerCallbackRef","useState","onKeyborgFocusIn","detail","isFocusedProgrammatically","element","onLeaveTrigger","activeElement","target","onPointerEnter","onPointerLeave","onFocus","onBlur","triggerAriaProps"],"mappings":"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"}
|
@@ -106,6 +106,8 @@ const useStyles = /*#__PURE__*/__styles({
|
|
106
106
|
* Apply styling to the Tooltip slots based on the state
|
107
107
|
*/
|
108
108
|
export const useTooltipStyles_unstable = state => {
|
109
|
+
'use no memo';
|
110
|
+
|
109
111
|
const styles = useStyles();
|
110
112
|
state.content.className = mergeClasses(tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);
|
111
113
|
state.arrowClassName = styles.arrow;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","createArrowStyles","tokens","arrowHeight","tooltipClassNames","content","useStyles","root","mc9l5x","B7ck84d","B2u0y6b","Bceei9c","Bahqtrf","Be2twd7","Bg96gwp","Btd35i7","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","De3pzq","sj55zd","Bhu2qc9","visible","inverted","arrow","qhf8xq","Bcdw1i0","Bj3rh1h","a9b677","Bqenvij","Ftih45","B1puzpu","Brfgrao","Bcvre1j","Ccq8qp","Baz25je","cmx5o7","Bk5zm6e","m598lv","B4f6apu","eqrjj","Bqjgrrk","qa3bma","y0oebl","Bcgcnre","Budzafs","Hv9wc6","hl6cv3","c8svkw","yayu3t","nr3p0k","rhl9o9","wiz9v7","B6q6orb","ndpsmx","d","p","useTooltipStyles_unstable","state","styles","className","appearance","arrowClassName"],"sources":["useTooltipStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { arrowHeight } from './private/constants';\nexport const tooltipClassNames = {\n content: 'fui-Tooltip__content'\n};\n/**\n * Styles for the tooltip\n */ const useStyles = makeStyles({\n root: {\n display: 'none',\n boxSizing: 'border-box',\n maxWidth: '240px',\n cursor: 'default',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n overflowWrap: 'break-word',\n borderRadius: tokens.borderRadiusMedium,\n border: `1px solid ${tokens.colorTransparentStroke}`,\n padding: '4px 11px 6px 11px',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n // TODO need to add versions of tokens.alias.shadow.shadow8, etc. that work with filter\n filter: `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` + `drop-shadow(0 4px 8px ${tokens.colorNeutralShadowKey})`\n },\n visible: {\n display: 'block'\n },\n inverted: {\n backgroundColor: tokens.colorNeutralBackgroundStatic,\n color: tokens.colorNeutralForegroundStaticInverted\n },\n arrow: createArrowStyles({\n arrowHeight\n })\n});\n/**\n * Apply styling to the Tooltip slots based on the state\n */ export const useTooltipStyles_unstable = (state)=>{\n const styles = useStyles();\n state.content.className = mergeClasses(tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);\n state.arrowClassName = styles.arrow;\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,WAAW,QAAQ,qBAAqB;AACjD,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,OAAO,EAAE;AACb,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAQ,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAtC,MAAA;EAAA;EAAAuC,QAAA;IAAAJ,MAAA;IAAAC,MAAA;EAAA;EAAAI,KAAA;IAAAC,MAAA;IAAAN,MAAA;IAAAO,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA4BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,MAAMC,MAAM,GAAG7E,SAAS,CAAC,CAAC;EAC1B4E,KAAK,CAAC7E,OAAO,CAAC+E,SAAS,GAAGpF,YAAY,CAACI,iBAAiB,CAACC,OAAO,EAAE8E,MAAM,CAAC5E,IAAI,EAAE2E,KAAK,CAACG,UAAU,KAAK,UAAU,IAAIF,MAAM,CAACpC,QAAQ,EAAEmC,KAAK,CAACpC,OAAO,IAAIqC,MAAM,CAACrC,OAAO,EAAEoC,KAAK,CAAC7E,OAAO,CAAC+E,SAAS,CAAC;EAC5LF,KAAK,CAACI,cAAc,GAAGH,MAAM,CAACnC,KAAK;EACnC,OAAOkC,KAAK;AAChB,CAAC","ignoreList":[]}
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","createArrowStyles","tokens","arrowHeight","tooltipClassNames","content","useStyles","root","mc9l5x","B7ck84d","B2u0y6b","Bceei9c","Bahqtrf","Be2twd7","Bg96gwp","Btd35i7","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","De3pzq","sj55zd","Bhu2qc9","visible","inverted","arrow","qhf8xq","Bcdw1i0","Bj3rh1h","a9b677","Bqenvij","Ftih45","B1puzpu","Brfgrao","Bcvre1j","Ccq8qp","Baz25je","cmx5o7","Bk5zm6e","m598lv","B4f6apu","eqrjj","Bqjgrrk","qa3bma","y0oebl","Bcgcnre","Budzafs","Hv9wc6","hl6cv3","c8svkw","yayu3t","nr3p0k","rhl9o9","wiz9v7","B6q6orb","ndpsmx","d","p","useTooltipStyles_unstable","state","styles","className","appearance","arrowClassName"],"sources":["useTooltipStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { arrowHeight } from './private/constants';\nexport const tooltipClassNames = {\n content: 'fui-Tooltip__content'\n};\n/**\n * Styles for the tooltip\n */ const useStyles = makeStyles({\n root: {\n display: 'none',\n boxSizing: 'border-box',\n maxWidth: '240px',\n cursor: 'default',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n overflowWrap: 'break-word',\n borderRadius: tokens.borderRadiusMedium,\n border: `1px solid ${tokens.colorTransparentStroke}`,\n padding: '4px 11px 6px 11px',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n // TODO need to add versions of tokens.alias.shadow.shadow8, etc. that work with filter\n filter: `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` + `drop-shadow(0 4px 8px ${tokens.colorNeutralShadowKey})`\n },\n visible: {\n display: 'block'\n },\n inverted: {\n backgroundColor: tokens.colorNeutralBackgroundStatic,\n color: tokens.colorNeutralForegroundStaticInverted\n },\n arrow: createArrowStyles({\n arrowHeight\n })\n});\n/**\n * Apply styling to the Tooltip slots based on the state\n */ export const useTooltipStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.content.className = mergeClasses(tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);\n state.arrowClassName = styles.arrow;\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,WAAW,QAAQ,qBAAqB;AACjD,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,OAAO,EAAE;AACb,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAQ,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAtC,MAAA;EAAA;EAAAuC,QAAA;IAAAJ,MAAA;IAAAC,MAAA;EAAA;EAAAI,KAAA;IAAAC,MAAA;IAAAN,MAAA;IAAAO,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA4BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACb,MAAMC,MAAM,GAAG7E,SAAS,CAAC,CAAC;EAC1B4E,KAAK,CAAC7E,OAAO,CAAC+E,SAAS,GAAGpF,YAAY,CAACI,iBAAiB,CAACC,OAAO,EAAE8E,MAAM,CAAC5E,IAAI,EAAE2E,KAAK,CAACG,UAAU,KAAK,UAAU,IAAIF,MAAM,CAACpC,QAAQ,EAAEmC,KAAK,CAACpC,OAAO,IAAIqC,MAAM,CAACrC,OAAO,EAAEoC,KAAK,CAAC7E,OAAO,CAAC+E,SAAS,CAAC;EAC5LF,KAAK,CAACI,cAAc,GAAGH,MAAM,CAACnC,KAAK;EACnC,OAAOkC,KAAK;AAChB,CAAC","ignoreList":[]}
|
@@ -17,6 +17,7 @@ const _reactutilities = require("@fluentui/react-utilities");
|
|
17
17
|
const _constants = require("./private/constants");
|
18
18
|
const _keyboardkeys = require("@fluentui/keyboard-keys");
|
19
19
|
const useTooltip_unstable = (props)=>{
|
20
|
+
'use no memo';
|
20
21
|
var _child_props, _child_props1, _child_props2, _child_props3;
|
21
22
|
const context = (0, _reactsharedcontexts.useTooltipVisibility_unstable)();
|
22
23
|
const isServerSideRender = (0, _reactutilities.useIsSSR)();
|
@@ -118,7 +119,7 @@ const useTooltip_unstable = (props)=>{
|
|
118
119
|
visible,
|
119
120
|
setVisible
|
120
121
|
]);
|
121
|
-
// Used to skip showing the tooltip in certain situations when the trigger is
|
122
|
+
// Used to skip showing the tooltip in certain situations when the trigger is focused.
|
122
123
|
// See comments where this is set for more info.
|
123
124
|
const ignoreNextFocusEventRef = _react.useRef(false);
|
124
125
|
// Listener for onPointerEnter and onFocus on the trigger element
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useTooltip.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeArrowOffset, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { useTooltipVisibility_unstable as useTooltipVisibility, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { KEYBORG_FOCUSIN } from '@fluentui/react-tabster';\nimport { applyTriggerPropsToChildren, useControllableState, useId, useIsomorphicLayoutEffect, useIsSSR, useMergedRefs, useTimeout, getTriggerChild, mergeCallbacks, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { arrowHeight, tooltipBorderRadius } from './private/constants';\nimport { Escape } from '@fluentui/keyboard-keys';\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 */ export const useTooltip_unstable = (props)=>{\n var _child_props, _child_props1, _child_props2, _child_props3;\n const context = useTooltipVisibility();\n const isServerSideRender = useIsSSR();\n const { targetDocument } = useFluent();\n const [setDelayTimeout, clearDelayTimeout] = useTimeout();\n const { appearance = 'normal', children, content, withArrow = false, positioning = 'above', onVisibleChange, relationship, showDelay = 250, hideDelay = 250, mountNode } = props;\n const [visible, setVisibleInternal] = useControllableState({\n state: props.visible,\n initialState: false\n });\n const setVisible = React.useCallback((ev, data)=>{\n clearDelayTimeout();\n setVisibleInternal((oldVisible)=>{\n if (data.visible !== oldVisible) {\n onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(ev, data);\n }\n return data.visible;\n });\n }, [\n clearDelayTimeout,\n setVisibleInternal,\n onVisibleChange\n ]);\n const state = {\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 state.content.id = useId('tooltip-', state.content.id);\n const positioningOptions = {\n enabled: state.visible,\n arrowPadding: 2 * tooltipBorderRadius,\n position: 'above',\n align: 'center',\n offset: 4,\n ...resolvePositioningShorthand(state.positioning)\n };\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeight);\n }\n const { targetRef, containerRef, arrowRef } = usePositioning(positioningOptions);\n state.content.ref = useMergedRefs(state.content.ref, containerRef);\n state.arrowRef = arrowRef;\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 var _context_visibleTooltip;\n const thisTooltip = {\n hide: (ev)=>setVisible(undefined, {\n visible: false,\n documentKeyboardEvent: ev\n })\n };\n (_context_visibleTooltip = context.visibleTooltip) === null || _context_visibleTooltip === void 0 ? void 0 : _context_visibleTooltip.hide();\n context.visibleTooltip = thisTooltip;\n const onDocumentKeyDown = (ev)=>{\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 targetDocument === null || targetDocument === void 0 ? void 0 : 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 return ()=>{\n if (context.visibleTooltip === thisTooltip) {\n context.visibleTooltip = undefined;\n }\n targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown, {\n capture: true\n });\n };\n }\n }, [\n context,\n targetDocument,\n visible,\n setVisible\n ]);\n // Used to skip showing the tooltip in certain situations when the trigger is focued.\n // See comments where this is set for more info.\n const ignoreNextFocusEventRef = React.useRef(false);\n // Listener for onPointerEnter and onFocus on the trigger element\n const onEnterTrigger = React.useCallback((ev)=>{\n if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {\n ignoreNextFocusEventRef.current = false;\n return;\n }\n // Show immediately if another tooltip is already visible\n const delay = context.visibleTooltip ? 0 : state.showDelay;\n setDelayTimeout(()=>{\n setVisible(ev, {\n visible: true\n });\n }, delay);\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n }, [\n setDelayTimeout,\n setVisible,\n state.showDelay,\n context\n ]);\n // Callback ref that attaches a keyborg:focusin event listener.\n const [keyborgListenerCallbackRef] = React.useState(()=>{\n const onKeyborgFocusIn = (ev)=>{\n var _ev_detail;\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 = ev.detail) === null || _ev_detail === void 0 ? void 0 : _ev_detail.isFocusedProgrammatically) {\n ignoreNextFocusEventRef.current = true;\n }\n };\n // Save the current element to remove the listener when the ref changes\n let current = null;\n // Callback ref that attaches the listener to the element\n return (element)=>{\n current === null || current === void 0 ? void 0 : current.removeEventListener(KEYBORG_FOCUSIN, onKeyborgFocusIn);\n element === null || element === void 0 ? void 0 : element.addEventListener(KEYBORG_FOCUSIN, onKeyborgFocusIn);\n current = element;\n };\n });\n // Listener for onPointerLeave and onBlur on the trigger element\n const onLeaveTrigger = React.useCallback((ev)=>{\n let delay = state.hideDelay;\n if (ev.type === 'blur') {\n // Hide immediately when losing focus\n delay = 0;\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 === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === ev.target;\n }\n setDelayTimeout(()=>{\n setVisible(ev, {\n visible: false\n });\n }, delay);\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n }, [\n setDelayTimeout,\n setVisible,\n state.hideDelay,\n targetDocument\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 const child = getTriggerChild(children);\n const triggerAriaProps = {};\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 // Don't render the Tooltip in SSR to avoid hydration errors\n if (isServerSideRender) {\n state.shouldRenderTooltip = false;\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 === null || child === void 0 ? void 0 : child.props,\n ref: useMergedRefs(child === null || child === void 0 ? void 0 : child.ref, keyborgListenerCallbackRef, // If the target prop is not provided, attach targetRef to the trigger element's ref prop\n positioningOptions.target === undefined ? targetRef : undefined),\n onPointerEnter: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : (_child_props = child.props) === null || _child_props === void 0 ? void 0 : _child_props.onPointerEnter, onEnterTrigger)),\n onPointerLeave: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : (_child_props1 = child.props) === null || _child_props1 === void 0 ? void 0 : _child_props1.onPointerLeave, onLeaveTrigger)),\n onFocus: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : (_child_props2 = child.props) === null || _child_props2 === void 0 ? void 0 : _child_props2.onFocus, onEnterTrigger)),\n onBlur: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : (_child_props3 = child.props) === null || _child_props3 === void 0 ? void 0 : _child_props3.onBlur, onLeaveTrigger))\n });\n return state;\n};\n"],"names":["useTooltip_unstable","props","_child_props","_child_props1","_child_props2","_child_props3","context","useTooltipVisibility","isServerSideRender","useIsSSR","targetDocument","useFluent","setDelayTimeout","clearDelayTimeout","useTimeout","appearance","children","content","withArrow","positioning","onVisibleChange","relationship","showDelay","hideDelay","mountNode","visible","setVisibleInternal","useControllableState","state","initialState","setVisible","React","useCallback","ev","data","oldVisible","shouldRenderTooltip","components","slot","always","defaultProps","role","elementType","id","useId","positioningOptions","enabled","arrowPadding","tooltipBorderRadius","position","align","offset","resolvePositioningShorthand","mergeArrowOffset","arrowHeight","targetRef","containerRef","arrowRef","usePositioning","ref","useMergedRefs","useIsomorphicLayoutEffect","_context_visibleTooltip","thisTooltip","hide","undefined","documentKeyboardEvent","visibleTooltip","onDocumentKeyDown","key","Escape","defaultPrevented","preventDefault","addEventListener","capture","removeEventListener","ignoreNextFocusEventRef","useRef","onEnterTrigger","type","current","delay","persist","keyborgListenerCallbackRef","useState","onKeyborgFocusIn","_ev_detail","detail","isFocusedProgrammatically","element","KEYBORG_FOCUSIN","onLeaveTrigger","activeElement","target","onPointerEnter","mergeCallbacks","onPointerLeave","onFocus","onBlur","child","getTriggerChild","triggerAriaProps","applyTriggerPropsToChildren","useEventCallback"],"mappings":"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"}
|
1
|
+
{"version":3,"sources":["useTooltip.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeArrowOffset, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { useTooltipVisibility_unstable as useTooltipVisibility, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { KEYBORG_FOCUSIN } from '@fluentui/react-tabster';\nimport { applyTriggerPropsToChildren, useControllableState, useId, useIsomorphicLayoutEffect, useIsSSR, useMergedRefs, useTimeout, getTriggerChild, mergeCallbacks, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { arrowHeight, tooltipBorderRadius } from './private/constants';\nimport { Escape } from '@fluentui/keyboard-keys';\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 */ export const useTooltip_unstable = (props)=>{\n 'use no memo';\n var _child_props, _child_props1, _child_props2, _child_props3;\n const context = useTooltipVisibility();\n const isServerSideRender = useIsSSR();\n const { targetDocument } = useFluent();\n const [setDelayTimeout, clearDelayTimeout] = useTimeout();\n const { appearance = 'normal', children, content, withArrow = false, positioning = 'above', onVisibleChange, relationship, showDelay = 250, hideDelay = 250, mountNode } = props;\n const [visible, setVisibleInternal] = useControllableState({\n state: props.visible,\n initialState: false\n });\n const setVisible = React.useCallback((ev, data)=>{\n clearDelayTimeout();\n setVisibleInternal((oldVisible)=>{\n if (data.visible !== oldVisible) {\n onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(ev, data);\n }\n return data.visible;\n });\n }, [\n clearDelayTimeout,\n setVisibleInternal,\n onVisibleChange\n ]);\n const state = {\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 state.content.id = useId('tooltip-', state.content.id);\n const positioningOptions = {\n enabled: state.visible,\n arrowPadding: 2 * tooltipBorderRadius,\n position: 'above',\n align: 'center',\n offset: 4,\n ...resolvePositioningShorthand(state.positioning)\n };\n if (state.withArrow) {\n positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeight);\n }\n const { targetRef, containerRef, arrowRef } = usePositioning(positioningOptions);\n state.content.ref = useMergedRefs(state.content.ref, containerRef);\n state.arrowRef = arrowRef;\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 var _context_visibleTooltip;\n const thisTooltip = {\n hide: (ev)=>setVisible(undefined, {\n visible: false,\n documentKeyboardEvent: ev\n })\n };\n (_context_visibleTooltip = context.visibleTooltip) === null || _context_visibleTooltip === void 0 ? void 0 : _context_visibleTooltip.hide();\n context.visibleTooltip = thisTooltip;\n const onDocumentKeyDown = (ev)=>{\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 targetDocument === null || targetDocument === void 0 ? void 0 : 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 return ()=>{\n if (context.visibleTooltip === thisTooltip) {\n context.visibleTooltip = undefined;\n }\n targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown, {\n capture: true\n });\n };\n }\n }, [\n context,\n targetDocument,\n visible,\n 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 // Listener for onPointerEnter and onFocus on the trigger element\n const onEnterTrigger = React.useCallback((ev)=>{\n if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {\n ignoreNextFocusEventRef.current = false;\n return;\n }\n // Show immediately if another tooltip is already visible\n const delay = context.visibleTooltip ? 0 : state.showDelay;\n setDelayTimeout(()=>{\n setVisible(ev, {\n visible: true\n });\n }, delay);\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n }, [\n setDelayTimeout,\n setVisible,\n state.showDelay,\n context\n ]);\n // Callback ref that attaches a keyborg:focusin event listener.\n const [keyborgListenerCallbackRef] = React.useState(()=>{\n const onKeyborgFocusIn = (ev)=>{\n var _ev_detail;\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 = ev.detail) === null || _ev_detail === void 0 ? void 0 : _ev_detail.isFocusedProgrammatically) {\n ignoreNextFocusEventRef.current = true;\n }\n };\n // Save the current element to remove the listener when the ref changes\n let current = null;\n // Callback ref that attaches the listener to the element\n return (element)=>{\n current === null || current === void 0 ? void 0 : current.removeEventListener(KEYBORG_FOCUSIN, onKeyborgFocusIn);\n element === null || element === void 0 ? void 0 : element.addEventListener(KEYBORG_FOCUSIN, onKeyborgFocusIn);\n current = element;\n };\n });\n // Listener for onPointerLeave and onBlur on the trigger element\n const onLeaveTrigger = React.useCallback((ev)=>{\n let delay = state.hideDelay;\n if (ev.type === 'blur') {\n // Hide immediately when losing focus\n delay = 0;\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 === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === ev.target;\n }\n setDelayTimeout(()=>{\n setVisible(ev, {\n visible: false\n });\n }, delay);\n ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n }, [\n setDelayTimeout,\n setVisible,\n state.hideDelay,\n targetDocument\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 const child = getTriggerChild(children);\n const triggerAriaProps = {};\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 // Don't render the Tooltip in SSR to avoid hydration errors\n if (isServerSideRender) {\n state.shouldRenderTooltip = false;\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 === null || child === void 0 ? void 0 : child.props,\n ref: useMergedRefs(child === null || child === void 0 ? void 0 : child.ref, keyborgListenerCallbackRef, // If the target prop is not provided, attach targetRef to the trigger element's ref prop\n positioningOptions.target === undefined ? targetRef : undefined),\n onPointerEnter: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : (_child_props = child.props) === null || _child_props === void 0 ? void 0 : _child_props.onPointerEnter, onEnterTrigger)),\n onPointerLeave: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : (_child_props1 = child.props) === null || _child_props1 === void 0 ? void 0 : _child_props1.onPointerLeave, onLeaveTrigger)),\n onFocus: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : (_child_props2 = child.props) === null || _child_props2 === void 0 ? void 0 : _child_props2.onFocus, onEnterTrigger)),\n onBlur: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : (_child_props3 = child.props) === null || _child_props3 === void 0 ? void 0 : _child_props3.onBlur, onLeaveTrigger))\n });\n return state;\n};\n"],"names":["useTooltip_unstable","props","_child_props","_child_props1","_child_props2","_child_props3","context","useTooltipVisibility","isServerSideRender","useIsSSR","targetDocument","useFluent","setDelayTimeout","clearDelayTimeout","useTimeout","appearance","children","content","withArrow","positioning","onVisibleChange","relationship","showDelay","hideDelay","mountNode","visible","setVisibleInternal","useControllableState","state","initialState","setVisible","React","useCallback","ev","data","oldVisible","shouldRenderTooltip","components","slot","always","defaultProps","role","elementType","id","useId","positioningOptions","enabled","arrowPadding","tooltipBorderRadius","position","align","offset","resolvePositioningShorthand","mergeArrowOffset","arrowHeight","targetRef","containerRef","arrowRef","usePositioning","ref","useMergedRefs","useIsomorphicLayoutEffect","_context_visibleTooltip","thisTooltip","hide","undefined","documentKeyboardEvent","visibleTooltip","onDocumentKeyDown","key","Escape","defaultPrevented","preventDefault","addEventListener","capture","removeEventListener","ignoreNextFocusEventRef","useRef","onEnterTrigger","type","current","delay","persist","keyborgListenerCallbackRef","useState","onKeyborgFocusIn","_ev_detail","detail","isFocusedProgrammatically","element","KEYBORG_FOCUSIN","onLeaveTrigger","activeElement","target","onPointerEnter","mergeCallbacks","onPointerLeave","onFocus","onBlur","child","getTriggerChild","triggerAriaProps","applyTriggerPropsToChildren","useEventCallback"],"mappings":"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"}
|
@@ -179,6 +179,7 @@ const tooltipClassNames = {
|
|
179
179
|
]
|
180
180
|
});
|
181
181
|
const useTooltipStyles_unstable = (state)=>{
|
182
|
+
'use no memo';
|
182
183
|
const styles = useStyles();
|
183
184
|
state.content.className = (0, _react.mergeClasses)(tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);
|
184
185
|
state.arrowClassName = styles.arrow;
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useTooltipStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nimport { createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { arrowHeight } from './private/constants';\nexport const tooltipClassNames = {\n content: 'fui-Tooltip__content'\n};\n/**\n * Styles for the tooltip\n */\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n mc9l5x: \"fjseox\",\n B7ck84d: \"f1ewtqcl\",\n B2u0y6b: \"f132xexn\",\n Bceei9c: \"f158kwzp\",\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fy9rknc\",\n Bg96gwp: \"fwrc4pm\",\n Btd35i7: \"fokg9q4\",\n Beyfa6y: 0,\n Bbmb7ep: 0,\n Btl43ni: 0,\n B7oj6ja: 0,\n Dimara: \"ft85np5\",\n Bgfg5da: 0,\n B9xav0g: 0,\n oivjwe: 0,\n Bn0qgzm: 0,\n B4g9neb: 0,\n zhjwy3: 0,\n wvpqe5: 0,\n ibv6hh: 0,\n u1mtju: 0,\n h3c5rm: 0,\n vrafjx: 0,\n Bekrc4i: 0,\n i8vvqc: 0,\n g2u3we: 0,\n icvyot: 0,\n B4j52fo: 0,\n irswps: \"f9ggezi\",\n Byoj8tv: 0,\n uwmqm3: 0,\n z189sj: 0,\n z8tnut: 0,\n B0ocmuz: \"f1bzqsji\",\n De3pzq: \"fxugw4r\",\n sj55zd: \"f19n0e5\",\n Bhu2qc9: \"fxeb0a7\"\n },\n visible: {\n mc9l5x: \"ftgm304\"\n },\n inverted: {\n De3pzq: \"fg3r6xk\",\n sj55zd: \"fonrgv7\"\n },\n arrow: {\n qhf8xq: \"f1euv43f\",\n De3pzq: \"f1u2r49w\",\n Bcdw1i0: \"fd7fpy0\",\n Bj3rh1h: \"f1bsuimh\",\n a9b677: \"f1ekdpwm\",\n Bqenvij: \"f83vc9z\",\n Ftih45: \"f1wl9k8s\",\n B1puzpu: \"f1wkw4r9\",\n Brfgrao: \"f1j7ml58\",\n Bcvre1j: \"fyl8oag\",\n Ccq8qp: \"frdoeuz\",\n Baz25je: \"fb81m9q\",\n cmx5o7: \"f1ljr5q2\",\n Bk5zm6e: 0,\n m598lv: 0,\n B4f6apu: 0,\n eqrjj: \"f15tymiq\",\n Bqjgrrk: 0,\n qa3bma: 0,\n y0oebl: 0,\n Bcgcnre: \"fi8wnwo\",\n Budzafs: [\"f9e5op9\", \"f112wvtl\"],\n Hv9wc6: \"f16cagkn\",\n hl6cv3: \"f1773hnp\",\n c8svkw: \"fw7o64x\",\n yayu3t: \"f1v7783n\",\n nr3p0k: \"f1f0d6v\",\n rhl9o9: \"fh2hsk5\",\n wiz9v7: \"f1gj3y7g\",\n B6q6orb: \"f11yvu4\",\n ndpsmx: \"f17lejdj\"\n }\n}, {\n d: [\".fjseox{display:none;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f132xexn{max-width:240px;}\", \".f158kwzp{cursor:default;}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".fwrc4pm{line-height:var(--lineHeightBase200);}\", \".fokg9q4{overflow-wrap:break-word;}\", [\".ft85np5{border-radius:var(--borderRadiusMedium);}\", {\n p: -1\n }], [\".f9ggezi{border:1px solid var(--colorTransparentStroke);}\", {\n p: -2\n }], [\".f1bzqsji{padding:4px 11px 6px 11px;}\", {\n p: -1\n }], \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", \".f19n0e5{color:var(--colorNeutralForeground1);}\", \".fxeb0a7{filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey));}\", \".ftgm304{display:block;}\", \".fg3r6xk{background-color:var(--colorNeutralBackgroundStatic);}\", \".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}\", \".f1euv43f{position:absolute;}\", \".f1u2r49w{background-color:inherit;}\", \".fd7fpy0{visibility:hidden;}\", \".f1bsuimh{z-index:-1;}\", \".f1ekdpwm{width:8.484px;}\", \".f83vc9z{height:8.484px;}\", \".f1wl9k8s::before{content:\\\"\\\";}\", \".f1wkw4r9::before{visibility:visible;}\", \".f1j7ml58::before{position:absolute;}\", \".fyl8oag::before{box-sizing:border-box;}\", \".frdoeuz::before{width:inherit;}\", \".fb81m9q::before{height:inherit;}\", \".f1ljr5q2::before{background-color:inherit;}\", [\".f15tymiq::before{border-right:1px solid var(--colorTransparentStroke);}\", {\n p: -1\n }], [\".fi8wnwo::before{border-bottom:1px solid var(--colorTransparentStroke);}\", {\n p: -1\n }], \".f9e5op9::before{border-bottom-right-radius:var(--borderRadiusSmall);}\", \".f112wvtl::before{border-bottom-left-radius:var(--borderRadiusSmall);}\", \".f16cagkn::before{transform:rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(45deg);}\", \"[data-popper-placement^=\\\"top\\\"] .f1773hnp{bottom:-1px;}\", \"[data-popper-placement^=\\\"top\\\"] .fw7o64x{--fui-positioning-angle:0;}\", \"[data-popper-placement^=\\\"right\\\"] .f1v7783n{left:-1px;}\", \"[data-popper-placement^=\\\"right\\\"] .f1f0d6v{--fui-positioning-angle:90deg;}\", \"[data-popper-placement^=\\\"bottom\\\"] .fh2hsk5{top:-1px;}\", \"[data-popper-placement^=\\\"bottom\\\"] .f1gj3y7g{--fui-positioning-angle:180deg;}\", \"[data-popper-placement^=\\\"left\\\"] .f11yvu4{right:-1px;}\", \"[data-popper-placement^=\\\"left\\\"] .f17lejdj{--fui-positioning-angle:270deg;}\"]\n});\n/**\n * Apply styling to the Tooltip slots based on the state\n */\nexport const useTooltipStyles_unstable = state => {\n const styles = useStyles();\n state.content.className = mergeClasses(tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);\n state.arrowClassName = styles.arrow;\n return state;\n};\n//# sourceMappingURL=useTooltipStyles.styles.js.map"],"names":["tooltipClassNames","useTooltipStyles_unstable","content","useStyles","__styles","root","mc9l5x","B7ck84d","B2u0y6b","Bceei9c","Bahqtrf","Be2twd7","Bg96gwp","Btd35i7","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","De3pzq","sj55zd","Bhu2qc9","visible","inverted","arrow","qhf8xq","Bcdw1i0","Bj3rh1h","a9b677","Bqenvij","Ftih45","B1puzpu","Brfgrao","Bcvre1j","Ccq8qp","Baz25je","cmx5o7","Bk5zm6e","m598lv","B4f6apu","eqrjj","Bqjgrrk","qa3bma","y0oebl","Bcgcnre","Budzafs","Hv9wc6","hl6cv3","c8svkw","yayu3t","nr3p0k","rhl9o9","wiz9v7","B6q6orb","ndpsmx","d","p","state","styles","className","mergeClasses","appearance","arrowClassName"],"mappings":";;;;;;;;;;;IAIaA,iBAAiB;eAAjBA;;IAuGAC,yBAAyB;eAAzBA;;;uBA3G0B;AAIhC,MAAMD,oBAAoB;IAC/BE,SAAS;AACX;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,MAAM;QACJC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;IACAC,SAAS;QACPtC,QAAQ;IACV;IACAuC,UAAU;QACRJ,QAAQ;QACRC,QAAQ;IACV;IACAI,OAAO;QACLC,QAAQ;QACRN,QAAQ;QACRO,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,OAAO;QACPC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;YAAC;YAAW;SAAW;QAChCC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA0B;QAAqC;QAA+B;QAA8B;QAAgD;QAA+C;QAAmD;QAAuC;YAAC;YAAsD;gBAC9WC,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAA6D;gBAChEA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAAyC;gBAC5CA,GAAG,CAAC;YACN;SAAE;QAAE;QAA8D;QAAmD;QAA+H;QAA4B;QAAmE;QAAgE;QAAiC;QAAwC;QAAgC;QAA0B;QAA6B;QAA6B;QAAoC;QAA0C;QAAyC;QAA4C;QAAoC;QAAqC;QAAgD;YAAC;YAA4E;gBACv7BA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAA4E;gBAC/EA,GAAG,CAAC;YACN;SAAE;QAAE;QAA0E;QAA0E;QAAsG;QAA4D;QAAyE;QAA4D;QAA+E;QAA2D;QAAkF;QAA2D;KAA+E;AACvyB;AAIO,MAAM7E,4BAA4B8E,CAAAA;IACvC,MAAMC,SAAS7E;IACf4E,MAAM7E,OAAO,CAAC+E,SAAS,GAAGC,IAAAA,mBAAY,EAAClF,kBAAkBE,OAAO,EAAE8E,OAAO3E,IAAI,EAAE0E,MAAMI,UAAU,KAAK,cAAcH,OAAOnC,QAAQ,EAAEkC,MAAMnC,OAAO,IAAIoC,OAAOpC,OAAO,EAAEmC,MAAM7E,OAAO,CAAC+E,SAAS;IAC3LF,MAAMK,cAAc,GAAGJ,OAAOlC,KAAK;IACnC,OAAOiC;AACT,GACA,mDAAmD"}
|
1
|
+
{"version":3,"sources":["useTooltipStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nimport { createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { arrowHeight } from './private/constants';\nexport const tooltipClassNames = {\n content: 'fui-Tooltip__content'\n};\n/**\n * Styles for the tooltip\n */\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n mc9l5x: \"fjseox\",\n B7ck84d: \"f1ewtqcl\",\n B2u0y6b: \"f132xexn\",\n Bceei9c: \"f158kwzp\",\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fy9rknc\",\n Bg96gwp: \"fwrc4pm\",\n Btd35i7: \"fokg9q4\",\n Beyfa6y: 0,\n Bbmb7ep: 0,\n Btl43ni: 0,\n B7oj6ja: 0,\n Dimara: \"ft85np5\",\n Bgfg5da: 0,\n B9xav0g: 0,\n oivjwe: 0,\n Bn0qgzm: 0,\n B4g9neb: 0,\n zhjwy3: 0,\n wvpqe5: 0,\n ibv6hh: 0,\n u1mtju: 0,\n h3c5rm: 0,\n vrafjx: 0,\n Bekrc4i: 0,\n i8vvqc: 0,\n g2u3we: 0,\n icvyot: 0,\n B4j52fo: 0,\n irswps: \"f9ggezi\",\n Byoj8tv: 0,\n uwmqm3: 0,\n z189sj: 0,\n z8tnut: 0,\n B0ocmuz: \"f1bzqsji\",\n De3pzq: \"fxugw4r\",\n sj55zd: \"f19n0e5\",\n Bhu2qc9: \"fxeb0a7\"\n },\n visible: {\n mc9l5x: \"ftgm304\"\n },\n inverted: {\n De3pzq: \"fg3r6xk\",\n sj55zd: \"fonrgv7\"\n },\n arrow: {\n qhf8xq: \"f1euv43f\",\n De3pzq: \"f1u2r49w\",\n Bcdw1i0: \"fd7fpy0\",\n Bj3rh1h: \"f1bsuimh\",\n a9b677: \"f1ekdpwm\",\n Bqenvij: \"f83vc9z\",\n Ftih45: \"f1wl9k8s\",\n B1puzpu: \"f1wkw4r9\",\n Brfgrao: \"f1j7ml58\",\n Bcvre1j: \"fyl8oag\",\n Ccq8qp: \"frdoeuz\",\n Baz25je: \"fb81m9q\",\n cmx5o7: \"f1ljr5q2\",\n Bk5zm6e: 0,\n m598lv: 0,\n B4f6apu: 0,\n eqrjj: \"f15tymiq\",\n Bqjgrrk: 0,\n qa3bma: 0,\n y0oebl: 0,\n Bcgcnre: \"fi8wnwo\",\n Budzafs: [\"f9e5op9\", \"f112wvtl\"],\n Hv9wc6: \"f16cagkn\",\n hl6cv3: \"f1773hnp\",\n c8svkw: \"fw7o64x\",\n yayu3t: \"f1v7783n\",\n nr3p0k: \"f1f0d6v\",\n rhl9o9: \"fh2hsk5\",\n wiz9v7: \"f1gj3y7g\",\n B6q6orb: \"f11yvu4\",\n ndpsmx: \"f17lejdj\"\n }\n}, {\n d: [\".fjseox{display:none;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f132xexn{max-width:240px;}\", \".f158kwzp{cursor:default;}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".fwrc4pm{line-height:var(--lineHeightBase200);}\", \".fokg9q4{overflow-wrap:break-word;}\", [\".ft85np5{border-radius:var(--borderRadiusMedium);}\", {\n p: -1\n }], [\".f9ggezi{border:1px solid var(--colorTransparentStroke);}\", {\n p: -2\n }], [\".f1bzqsji{padding:4px 11px 6px 11px;}\", {\n p: -1\n }], \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", \".f19n0e5{color:var(--colorNeutralForeground1);}\", \".fxeb0a7{filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey));}\", \".ftgm304{display:block;}\", \".fg3r6xk{background-color:var(--colorNeutralBackgroundStatic);}\", \".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}\", \".f1euv43f{position:absolute;}\", \".f1u2r49w{background-color:inherit;}\", \".fd7fpy0{visibility:hidden;}\", \".f1bsuimh{z-index:-1;}\", \".f1ekdpwm{width:8.484px;}\", \".f83vc9z{height:8.484px;}\", \".f1wl9k8s::before{content:\\\"\\\";}\", \".f1wkw4r9::before{visibility:visible;}\", \".f1j7ml58::before{position:absolute;}\", \".fyl8oag::before{box-sizing:border-box;}\", \".frdoeuz::before{width:inherit;}\", \".fb81m9q::before{height:inherit;}\", \".f1ljr5q2::before{background-color:inherit;}\", [\".f15tymiq::before{border-right:1px solid var(--colorTransparentStroke);}\", {\n p: -1\n }], [\".fi8wnwo::before{border-bottom:1px solid var(--colorTransparentStroke);}\", {\n p: -1\n }], \".f9e5op9::before{border-bottom-right-radius:var(--borderRadiusSmall);}\", \".f112wvtl::before{border-bottom-left-radius:var(--borderRadiusSmall);}\", \".f16cagkn::before{transform:rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(45deg);}\", \"[data-popper-placement^=\\\"top\\\"] .f1773hnp{bottom:-1px;}\", \"[data-popper-placement^=\\\"top\\\"] .fw7o64x{--fui-positioning-angle:0;}\", \"[data-popper-placement^=\\\"right\\\"] .f1v7783n{left:-1px;}\", \"[data-popper-placement^=\\\"right\\\"] .f1f0d6v{--fui-positioning-angle:90deg;}\", \"[data-popper-placement^=\\\"bottom\\\"] .fh2hsk5{top:-1px;}\", \"[data-popper-placement^=\\\"bottom\\\"] .f1gj3y7g{--fui-positioning-angle:180deg;}\", \"[data-popper-placement^=\\\"left\\\"] .f11yvu4{right:-1px;}\", \"[data-popper-placement^=\\\"left\\\"] .f17lejdj{--fui-positioning-angle:270deg;}\"]\n});\n/**\n * Apply styling to the Tooltip slots based on the state\n */\nexport const useTooltipStyles_unstable = state => {\n 'use no memo';\n\n const styles = useStyles();\n state.content.className = mergeClasses(tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);\n state.arrowClassName = styles.arrow;\n return state;\n};\n//# sourceMappingURL=useTooltipStyles.styles.js.map"],"names":["tooltipClassNames","useTooltipStyles_unstable","content","useStyles","__styles","root","mc9l5x","B7ck84d","B2u0y6b","Bceei9c","Bahqtrf","Be2twd7","Bg96gwp","Btd35i7","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","De3pzq","sj55zd","Bhu2qc9","visible","inverted","arrow","qhf8xq","Bcdw1i0","Bj3rh1h","a9b677","Bqenvij","Ftih45","B1puzpu","Brfgrao","Bcvre1j","Ccq8qp","Baz25je","cmx5o7","Bk5zm6e","m598lv","B4f6apu","eqrjj","Bqjgrrk","qa3bma","y0oebl","Bcgcnre","Budzafs","Hv9wc6","hl6cv3","c8svkw","yayu3t","nr3p0k","rhl9o9","wiz9v7","B6q6orb","ndpsmx","d","p","state","styles","className","mergeClasses","appearance","arrowClassName"],"mappings":";;;;;;;;;;;IAIaA,iBAAiB;eAAjBA;;IAuGAC,yBAAyB;eAAzBA;;;uBA3G0B;AAIhC,MAAMD,oBAAoB;IAC/BE,SAAS;AACX;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,MAAM;QACJC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;IACAC,SAAS;QACPtC,QAAQ;IACV;IACAuC,UAAU;QACRJ,QAAQ;QACRC,QAAQ;IACV;IACAI,OAAO;QACLC,QAAQ;QACRN,QAAQ;QACRO,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,OAAO;QACPC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;YAAC;YAAW;SAAW;QAChCC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA0B;QAAqC;QAA+B;QAA8B;QAAgD;QAA+C;QAAmD;QAAuC;YAAC;YAAsD;gBAC9WC,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAA6D;gBAChEA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAAyC;gBAC5CA,GAAG,CAAC;YACN;SAAE;QAAE;QAA8D;QAAmD;QAA+H;QAA4B;QAAmE;QAAgE;QAAiC;QAAwC;QAAgC;QAA0B;QAA6B;QAA6B;QAAoC;QAA0C;QAAyC;QAA4C;QAAoC;QAAqC;QAAgD;YAAC;YAA4E;gBACv7BA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAA4E;gBAC/EA,GAAG,CAAC;YACN;SAAE;QAAE;QAA0E;QAA0E;QAAsG;QAA4D;QAAyE;QAA4D;QAA+E;QAA2D;QAAkF;QAA2D;KAA+E;AACvyB;AAIO,MAAM7E,4BAA4B8E,CAAAA;IACvC;IAEA,MAAMC,SAAS7E;IACf4E,MAAM7E,OAAO,CAAC+E,SAAS,GAAGC,IAAAA,mBAAY,EAAClF,kBAAkBE,OAAO,EAAE8E,OAAO3E,IAAI,EAAE0E,MAAMI,UAAU,KAAK,cAAcH,OAAOnC,QAAQ,EAAEkC,MAAMnC,OAAO,IAAIoC,OAAOpC,OAAO,EAAEmC,MAAM7E,OAAO,CAAC+E,SAAS;IAC3LF,MAAMK,cAAc,GAAGJ,OAAOlC,KAAK;IACnC,OAAOiC;AACT,GACA,mDAAmD"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-tooltip",
|
3
|
-
"version": "9.4.
|
3
|
+
"version": "9.4.32",
|
4
4
|
"description": "React components for building web experiences",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -20,27 +20,26 @@
|
|
20
20
|
"lint": "just-scripts lint",
|
21
21
|
"start": "yarn storybook",
|
22
22
|
"test": "jest --passWithNoTests",
|
23
|
-
"storybook": "
|
24
|
-
"type-check": "
|
25
|
-
"generate-api": "just-scripts generate-api"
|
26
|
-
"test-ssr": "test-ssr \"./stories/**/*.stories.tsx\""
|
23
|
+
"storybook": "yarn --cwd ../stories storybook",
|
24
|
+
"type-check": "just-scripts type-check",
|
25
|
+
"generate-api": "just-scripts generate-api"
|
27
26
|
},
|
28
27
|
"devDependencies": {
|
29
|
-
"@fluentui/eslint-plugin": "*",
|
30
28
|
"@fluentui/react-conformance": "*",
|
29
|
+
"@fluentui/eslint-plugin": "*",
|
31
30
|
"@fluentui/react-conformance-griffel": "*",
|
32
31
|
"@fluentui/scripts-api-extractor": "*",
|
33
32
|
"@fluentui/scripts-tasks": "*"
|
34
33
|
},
|
35
34
|
"dependencies": {
|
36
35
|
"@fluentui/keyboard-keys": "^9.0.7",
|
37
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
38
|
-
"@fluentui/react-portal": "^9.4.
|
39
|
-
"@fluentui/react-positioning": "^9.15.
|
36
|
+
"@fluentui/react-jsx-runtime": "^9.0.40",
|
37
|
+
"@fluentui/react-portal": "^9.4.29",
|
38
|
+
"@fluentui/react-positioning": "^9.15.4",
|
40
39
|
"@fluentui/react-shared-contexts": "^9.19.0",
|
41
|
-
"@fluentui/react-tabster": "^9.
|
40
|
+
"@fluentui/react-tabster": "^9.22.1",
|
42
41
|
"@fluentui/react-theme": "^9.1.19",
|
43
|
-
"@fluentui/react-utilities": "^9.18.
|
42
|
+
"@fluentui/react-utilities": "^9.18.11",
|
44
43
|
"@griffel/react": "^1.5.22",
|
45
44
|
"@swc/helpers": "^0.5.1"
|
46
45
|
},
|