@fluentui/react-tooltip 9.4.2 → 9.4.4
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +32 -8
- package/lib/components/Tooltip/useTooltip.js +2 -2
- package/lib/components/Tooltip/useTooltip.js.map +1 -1
- package/lib/components/Tooltip/useTooltipStyles.styles.js +6 -6
- package/lib/components/Tooltip/useTooltipStyles.styles.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltip.js +2 -2
- package/lib-commonjs/components/Tooltip/useTooltip.js.map +1 -1
- package/lib-commonjs/components/Tooltip/useTooltipStyles.styles.js +12 -12
- package/lib-commonjs/components/Tooltip/useTooltipStyles.styles.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
@@ -1,22 +1,46 @@
|
|
1
1
|
# Change Log - @fluentui/react-tooltip
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Mon, 18 Dec 2023 17:47:04 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.4.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.4.4)
|
8
|
+
|
9
|
+
Mon, 18 Dec 2023 17:47:04 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.4.3..@fluentui/react-tooltip_v9.4.4)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- Bump @fluentui/react-positioning to v9.10.5 ([PR #30010](https://github.com/microsoft/fluentui/pull/30010) by beachball)
|
15
|
+
|
16
|
+
## [9.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.4.3)
|
17
|
+
|
18
|
+
Mon, 18 Dec 2023 14:40:44 GMT
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.4.2..@fluentui/react-tooltip_v9.4.3)
|
20
|
+
|
21
|
+
### Patches
|
22
|
+
|
23
|
+
- fix: stop using deprecated keyborg property ([PR #30098](https://github.com/microsoft/fluentui/pull/30098) by lingfangao@hotmail.com)
|
24
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.22 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
|
25
|
+
- Bump @fluentui/react-portal to v9.4.5 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
|
26
|
+
- Bump @fluentui/react-positioning to v9.10.4 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
|
27
|
+
- Bump @fluentui/react-shared-contexts to v9.13.2 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
|
28
|
+
- Bump @fluentui/react-tabster to v9.16.0 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
|
29
|
+
- Bump @fluentui/react-utilities to v9.15.4 ([PR #30103](https://github.com/microsoft/fluentui/pull/30103) by beachball)
|
30
|
+
|
7
31
|
## [9.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.4.2)
|
8
32
|
|
9
|
-
Thu, 14 Dec 2023 09:
|
33
|
+
Thu, 14 Dec 2023 09:58:46 GMT
|
10
34
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.4.1..@fluentui/react-tooltip_v9.4.2)
|
11
35
|
|
12
36
|
### Patches
|
13
37
|
|
14
|
-
- Bump @fluentui/react-jsx-runtime to v9.0.21 ([
|
15
|
-
- Bump @fluentui/react-portal to v9.4.4 ([
|
16
|
-
- Bump @fluentui/react-positioning to v9.10.3 ([
|
17
|
-
- Bump @fluentui/react-shared-contexts to v9.13.1 ([
|
18
|
-
- Bump @fluentui/react-tabster to v9.15.1 ([
|
19
|
-
- Bump @fluentui/react-utilities to v9.15.3 ([
|
38
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.21 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
39
|
+
- Bump @fluentui/react-portal to v9.4.4 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
40
|
+
- Bump @fluentui/react-positioning to v9.10.3 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
41
|
+
- Bump @fluentui/react-shared-contexts to v9.13.1 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
42
|
+
- Bump @fluentui/react-tabster to v9.15.1 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
43
|
+
- Bump @fluentui/react-utilities to v9.15.3 ([PR #30056](https://github.com/microsoft/fluentui/pull/30056) by beachball)
|
20
44
|
|
21
45
|
## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.4.1)
|
22
46
|
|
@@ -140,12 +140,12 @@ import { Escape } from '@fluentui/keyboard-keys';
|
|
140
140
|
// Callback ref that attaches a keyborg:focusin event listener.
|
141
141
|
const [keyborgListenerCallbackRef] = React.useState(()=>{
|
142
142
|
const onKeyborgFocusIn = (ev)=>{
|
143
|
-
var
|
143
|
+
var _ev_detail;
|
144
144
|
// Skip showing the tooltip if focus moved programmatically.
|
145
145
|
// For example, we don't want to show the tooltip when a dialog is closed
|
146
146
|
// and Tabster programmatically restores focus to the trigger button.
|
147
147
|
// See https://github.com/microsoft/fluentui/issues/27576
|
148
|
-
if ((
|
148
|
+
if ((_ev_detail = ev.detail) === null || _ev_detail === void 0 ? void 0 : _ev_detail.isFocusedProgrammatically) {
|
149
149
|
ignoreNextFocusEventRef.current = true;
|
150
150
|
}
|
151
151
|
};
|
@@ -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.details?.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","details","isFocusedProgrammatically","element","onLeaveTrigger","activeElement","target","onPointerEnter","onPointerLeave","onFocus","onBlur","triggerAriaProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,2BAA2B,EAAEC,cAAc,QAAQ,8BAA8B;AAC5G,SACEC,iCAAiCC,oBAAoB,EACrDC,sBAAsBC,SAAS,QAC1B,kCAAkC;AAEzC,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SACEC,2BAA2B,EAC3BC,oBAAoB,EACpBC,KAAK,EACLC,yBAAyB,EACzBC,QAAQ,EACRC,aAAa,EACbC,UAAU,EACVC,eAAe,EACfC,cAAc,EACdC,gBAAgB,EAChBC,IAAI,QACC,4BAA4B;AAEnC,SAASC,WAAW,EAAEC,mBAAmB,QAAQ,sBAAsB;AACvE,SAASC,MAAM,QAAQ,0BAA0B;AAEjD;;;;;;;CAOC,GACD,OAAO,MAAMC,sBAAsB,CAACC;QA0OgBC,cACAA,eACPA,eACDA;IA5O1C,MAAMC,UAAUrB;IAChB,MAAMsB,qBAAqBd;IAC3B,MAAM,EAAEe,cAAc,EAAE,GAAGrB;IAC3B,MAAM,CAACsB,iBAAiBC,kBAAkB,GAAGf;IAE7C,MAAM,EACJgB,aAAa,QAAQ,EACrBC,QAAQ,EACRC,OAAO,EACPC,YAAY,KAAK,EACjBC,cAAc,OAAO,EACrBC,eAAe,EACfC,YAAY,EACZC,YAAY,GAAG,EACfC,YAAY,GAAG,EACfC,SAAS,EACV,GAAGhB;IAEJ,MAAM,CAACiB,SAASC,mBAAmB,GAAGhC,qBAAqB;QAAEiC,OAAOnB,MAAMiB,OAAO;QAAEG,cAAc;IAAM;IACvG,MAAMC,aAAa7C,MAAM8C,WAAW,CAClC,CAACC,IAAiFC;QAChFlB;QACAY,mBAAmBO,CAAAA;YACjB,IAAID,KAAKP,OAAO,KAAKQ,YAAY;gBAC/Bb,4BAAAA,sCAAAA,gBAAkBW,IAAIC;YACxB;YACA,OAAOA,KAAKP,OAAO;QACrB;IACF,GACA;QAACX;QAAmBY;QAAoBN;KAAgB;IAG1D,MAAMO,QAAsB;QAC1BT;QACAC;QACAG;QACAC;QACAF;QACAI;QACAS,qBAAqBT;QACrBV;QACAS;QACA,QAAQ;QACRW,YAAY;YACVlB,SAAS;QACX;QACAA,SAASd,KAAKiC,MAAM,CAACnB,SAAS;YAC5BoB,cAAc;gBACZC,MAAM;YACR;YACAC,aAAa;QACf;IACF;IAEAZ,MAAMV,OAAO,CAACuB,EAAE,GAAG7C,MAAM,YAAYgC,MAAMV,OAAO,CAACuB,EAAE;IAErD,MAAMC,qBAAqB;QACzBC,SAASf,MAAMF,OAAO;QACtBkB,cAAc,IAAItC;QAClBuC,UAAU;QACVC,OAAO;QACPC,QAAQ;QACR,GAAG5D,4BAA4ByC,MAAMR,WAAW,CAAC;IACnD;IAEA,IAAIQ,MAAMT,SAAS,EAAE;QACnBuB,mBAAmBK,MAAM,GAAG7D,iBAAiBwD,mBAAmBK,MAAM,EAAE1C;IAC1E;IAEA,MAAM,EACJ2C,SAAS,EACTC,YAAY,EACZC,QAAQ,EACT,GAIG9D,eAAesD;IAEnBd,MAAMV,OAAO,CAACiC,GAAG,GAAGpD,cAAc6B,MAAMV,OAAO,CAACiC,GAAG,EAAEF;IACrDrB,MAAMsB,QAAQ,GAAGA;IAEjB,yEAAyE;IACzE,iDAAiD;IACjD,2EAA2E;IAC3ErD,0BAA0B;QACxB,IAAI6B,SAAS;gBAKXf;YAJA,MAAMyC,cAAc;gBAClBC,MAAM,CAACrB,KAAuBF,WAAWwB,WAAW;wBAAE5B,SAAS;wBAAO6B,uBAAuBvB;oBAAG;YAClG;aAEArB,0BAAAA,QAAQ6C,cAAc,cAAtB7C,8CAAAA,wBAAwB0C,IAAI;YAC5B1C,QAAQ6C,cAAc,GAAGJ;YAEzB,MAAMK,oBAAoB,CAACzB;gBACzB,IAAIA,GAAG0B,GAAG,KAAKnD,UAAU,CAACyB,GAAG2B,gBAAgB,EAAE;oBAC7CP,YAAYC,IAAI,CAACrB;oBACjB,qFAAqF;oBACrF,yCAAyC;oBACzCA,GAAG4B,cAAc;gBACnB;YACF;YAEA/C,2BAAAA,qCAAAA,eAAgBgD,gBAAgB,CAAC,WAAWJ,mBAAmB;gBAC7D,+CAA+C;gBAC/C,sFAAsF;gBACtFK,SAAS;YACX;YAEA,OAAO;gBACL,IAAInD,QAAQ6C,cAAc,KAAKJ,aAAa;oBAC1CzC,QAAQ6C,cAAc,GAAGF;gBAC3B;gBAEAzC,2BAAAA,qCAAAA,eAAgBkD,mBAAmB,CAAC,WAAWN,mBAAmB;oBAAEK,SAAS;gBAAK;YACpF;QACF;IACF,GAAG;QAACnD;QAASE;QAAgBa;QAASI;KAAW;IAEjD,sFAAsF;IACtF,gDAAgD;IAChD,MAAMkC,0BAA0B/E,MAAMgF,MAAM,CAAC;IAE7C,iEAAiE;IACjE,MAAMC,iBAAiBjF,MAAM8C,WAAW,CACtC,CAACC;QACC,IAAIA,GAAGmC,IAAI,KAAK,WAAWH,wBAAwBI,OAAO,EAAE;YAC1DJ,wBAAwBI,OAAO,GAAG;YAClC;QACF;QAEA,yDAAyD;QACzD,MAAMC,QAAQ1D,QAAQ6C,cAAc,GAAG,IAAI5B,MAAML,SAAS;QAE1DT,gBAAgB;YACdgB,WAAWE,IAAI;gBAAEN,SAAS;YAAK;QACjC,GAAG2C;QAEHrC,GAAGsC,OAAO,IAAI,yEAAyE;IACzF,GACA;QAACxD;QAAiBgB;QAAYF,MAAML,SAAS;QAAEZ;KAAQ;IAGzD,+DAA+D;IAC/D,MAAM,CAAC4D,2BAA2B,GAAGtF,MAAMuF,QAAQ,CAAC;QAClD,MAAMC,mBAAoB,CAACzC;gBAKrBA;YAJJ,4DAA4D;YAC5D,yEAAyE;YACzE,qEAAqE;YACrE,yDAAyD;YACzD,KAAIA,cAAAA,GAAG0C,OAAO,cAAV1C,kCAAAA,YAAY2C,yBAAyB,EAAE;gBACzCX,wBAAwBI,OAAO,GAAG;YACpC;QACF;QAEA,uEAAuE;QACvE,IAAIA,UAA0B;QAE9B,yDAAyD;QACzD,OAAO,CAACQ;YACNR,oBAAAA,8BAAAA,QAASL,mBAAmB,CAACtE,iBAAiBgF;YAC9CG,oBAAAA,8BAAAA,QAASf,gBAAgB,CAACpE,iBAAiBgF;YAC3CL,UAAUQ;QACZ;IACF;IAEA,gEAAgE;IAChE,MAAMC,iBAAiB5F,MAAM8C,WAAW,CACtC,CAACC;QACC,IAAIqC,QAAQzC,MAAMJ,SAAS;QAE3B,IAAIQ,GAAGmC,IAAI,KAAK,QAAQ;YACtB,qCAAqC;YACrCE,QAAQ;YAER,sEAAsE;YACtE,sEAAsE;YACtE,uEAAuE;YACvE,yEAAyE;YACzE,yDAAyD;YACzDL,wBAAwBI,OAAO,GAAGvD,CAAAA,2BAAAA,qCAAAA,eAAgBiE,aAAa,MAAK9C,GAAG+C,MAAM;QAC/E;QAEAjE,gBAAgB;YACdgB,WAAWE,IAAI;gBAAEN,SAAS;YAAM;QAClC,GAAG2C;QAEHrC,GAAGsC,OAAO,IAAI,yEAAyE;IACzF,GACA;QAACxD;QAAiBgB;QAAYF,MAAMJ,SAAS;QAAEX;KAAe;IAGhE,mHAAmH;IACnH,0FAA0F;IAC1Fe,MAAMV,OAAO,CAAC8D,cAAc,GAAG9E,eAAe0B,MAAMV,OAAO,CAAC8D,cAAc,EAAEjE;IAC5Ea,MAAMV,OAAO,CAAC+D,cAAc,GAAG/E,eAAe0B,MAAMV,OAAO,CAAC+D,cAAc,EAAEJ;IAC5EjD,MAAMV,OAAO,CAACgE,OAAO,GAAGhF,eAAe0B,MAAMV,OAAO,CAACgE,OAAO,EAAEnE;IAC9Da,MAAMV,OAAO,CAACiE,MAAM,GAAGjF,eAAe0B,MAAMV,OAAO,CAACiE,MAAM,EAAEN;IAE5D,MAAMnE,QAAQT,gBAAgBgB;IAE9B,MAAMmE,mBAAmG,CAAC;IAE1G,IAAI9D,iBAAiB,SAAS;QAC5B,4FAA4F;QAC5F,IAAI,OAAOM,MAAMV,OAAO,CAACD,QAAQ,KAAK,UAAU;YAC9CmE,gBAAgB,CAAC,aAAa,GAAGxD,MAAMV,OAAO,CAACD,QAAQ;QACzD,OAAO;YACLmE,gBAAgB,CAAC,kBAAkB,GAAGxD,MAAMV,OAAO,CAACuB,EAAE;YACtD,8FAA8F;YAC9Fb,MAAMO,mBAAmB,GAAG;QAC9B;IACF,OAAO,IAAIb,iBAAiB,eAAe;QACzC8D,gBAAgB,CAAC,mBAAmB,GAAGxD,MAAMV,OAAO,CAACuB,EAAE;QACvD,+FAA+F;QAC/Fb,MAAMO,mBAAmB,GAAG;IAC9B;IAEA,4DAA4D;IAC5D,IAAIvB,oBAAoB;QACtBgB,MAAMO,mBAAmB,GAAG;IAC9B;IAEA,6GAA6G;IAC7GP,MAAMX,QAAQ,GAAGvB,4BAA4BuB,UAAU;QACrD,GAAGmE,gBAAgB;WAChB1E,kBAAAA,4BAAAA,MAAOD,KAAK,AAAf;QACA0C,KAAKpD,cACHW,kBAAAA,4BAAAA,MAAOyC,GAAG,EACVoB,4BACA,yFAAyF;QACzF7B,mBAAmBqC,MAAM,KAAKzB,YAAYN,YAAYM;QAExD0B,gBAAgB7E,iBAAiBD,eAAeQ,kBAAAA,6BAAAA,eAAAA,MAAOD,KAAK,cAAZC,mCAAAA,aAAcsE,cAAc,EAAEd;QAC9Ee,gBAAgB9E,iBAAiBD,eAAeQ,kBAAAA,6BAAAA,gBAAAA,MAAOD,KAAK,cAAZC,oCAAAA,cAAcuE,cAAc,EAAEJ;QAC9EK,SAAS/E,iBAAiBD,eAAeQ,kBAAAA,6BAAAA,gBAAAA,MAAOD,KAAK,cAAZC,oCAAAA,cAAcwE,OAAO,EAAEhB;QAChEiB,QAAQhF,iBAAiBD,eAAeQ,kBAAAA,6BAAAA,gBAAAA,MAAOD,KAAK,cAAZC,oCAAAA,cAAcyE,MAAM,EAAEN;IAChE;IAEA,OAAOjD;AACT,EAAE"}
|
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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"}
|
@@ -70,18 +70,18 @@ const useStyles = /*#__PURE__*/__styles({
|
|
70
70
|
qa3bma: "f11yjt3y",
|
71
71
|
Bqjgrrk: "f1172wan",
|
72
72
|
Budzafs: ["f9e5op9", "f112wvtl"],
|
73
|
-
Hv9wc6: ["
|
73
|
+
Hv9wc6: ["f1500xdc", "f1it0ps5"],
|
74
74
|
hl6cv3: "f1773hnp",
|
75
|
-
|
75
|
+
c8svkw: "fw7o64x",
|
76
76
|
yayu3t: "f1v7783n",
|
77
|
-
|
77
|
+
nr3p0k: "f1f0d6v",
|
78
78
|
rhl9o9: "fh2hsk5",
|
79
|
-
|
79
|
+
wiz9v7: "f1gj3y7g",
|
80
80
|
B6q6orb: "f11yvu4",
|
81
|
-
|
81
|
+
ndpsmx: "f17lejdj"
|
82
82
|
}
|
83
83
|
}, {
|
84
|
-
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;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f10ra9hq{padding-top:4px;}", ".fd9xhir{padding-right:11px;}", ".f1jlaasf{padding-left:11px;}", ".f1d7kygh{padding-bottom:6px;}", ".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;}", ".fyfemzf::before{border-right-width:1px;}", ".focyt6c::before{border-right-style:solid;}", ".fnhxbxj::before{border-right-color:var(--colorTransparentStroke);}", ".fdw6hkg::before{border-bottom-width:1px;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}", ".f9e5op9::before{border-bottom-right-radius:var(--borderRadiusSmall);}", ".f112wvtl::before{border-bottom-left-radius:var(--borderRadiusSmall);}", ".
|
84
|
+
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;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f10ra9hq{padding-top:4px;}", ".fd9xhir{padding-right:11px;}", ".f1jlaasf{padding-left:11px;}", ".f1d7kygh{padding-bottom:6px;}", ".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;}", ".fyfemzf::before{border-right-width:1px;}", ".focyt6c::before{border-right-style:solid;}", ".fnhxbxj::before{border-right-color:var(--colorTransparentStroke);}", ".fdw6hkg::before{border-bottom-width:1px;}", ".f11yjt3y::before{border-bottom-style:solid;}", ".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}", ".f9e5op9::before{border-bottom-right-radius:var(--borderRadiusSmall);}", ".f112wvtl::before{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1500xdc::before{transform:rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(45deg);}", ".f1it0ps5::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;}"]
|
85
85
|
});
|
86
86
|
/**
|
87
87
|
* Apply styling to the Tooltip slots based on the state
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["shorthands","__styles","mergeClasses","createArrowStyles","tokens","arrowHeight","tooltipClassNames","content","useStyles","root","mc9l5x","B7ck84d","B2u0y6b","Bceei9c","Bahqtrf","Be2twd7","Bg96gwp","Btd35i7","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","z8tnut","z189sj","Byoj8tv","uwmqm3","De3pzq","sj55zd","Bhu2qc9","visible","inverted","arrow","qhf8xq","Bcdw1i0","Bj3rh1h","a9b677","Bqenvij","Ftih45","B1puzpu","Brfgrao","Bcvre1j","Ccq8qp","Baz25je","cmx5o7","B4f6apu","m598lv","Bk5zm6e","y0oebl","qa3bma","Bqjgrrk","Budzafs","Hv9wc6","hl6cv3","
|
1
|
+
{"version":3,"names":["shorthands","__styles","mergeClasses","createArrowStyles","tokens","arrowHeight","tooltipClassNames","content","useStyles","root","mc9l5x","B7ck84d","B2u0y6b","Bceei9c","Bahqtrf","Be2twd7","Bg96gwp","Btd35i7","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","z8tnut","z189sj","Byoj8tv","uwmqm3","De3pzq","sj55zd","Bhu2qc9","visible","inverted","arrow","qhf8xq","Bcdw1i0","Bj3rh1h","a9b677","Bqenvij","Ftih45","B1puzpu","Brfgrao","Bcvre1j","Ccq8qp","Baz25je","cmx5o7","B4f6apu","m598lv","Bk5zm6e","y0oebl","qa3bma","Bqjgrrk","Budzafs","Hv9wc6","hl6cv3","c8svkw","yayu3t","nr3p0k","rhl9o9","wiz9v7","B6q6orb","ndpsmx","d","useTooltipStyles_unstable","state","styles","className","appearance","arrowClassName"],"sources":["useTooltipStyles.styles.js"],"sourcesContent":["import { shorthands, 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 ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n ...shorthands.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,SAASA,UAAU,EAAAC,QAAA,EAAcC,YAAY,QAAQ,gBAAgB;AACrE,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,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;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,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAA/B,MAAA;EAAA;EAAAgC,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,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;AAAA,CA4BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,MAAMC,MAAM,GAAGnE,SAAS,CAAC,CAAC;EAC1BkE,KAAK,CAACnE,OAAO,CAACqE,SAAS,GAAG1E,YAAY,CAACI,iBAAiB,CAACC,OAAO,EAAEoE,MAAM,CAAClE,IAAI,EAAEiE,KAAK,CAACG,UAAU,KAAK,UAAU,IAAIF,MAAM,CAACjC,QAAQ,EAAEgC,KAAK,CAACjC,OAAO,IAAIkC,MAAM,CAAClC,OAAO,EAAEiC,KAAK,CAACnE,OAAO,CAACqE,SAAS,CAAC;EAC5LF,KAAK,CAACI,cAAc,GAAGH,MAAM,CAAChC,KAAK;EACnC,OAAO+B,KAAK;AAChB,CAAC"}
|
@@ -144,12 +144,12 @@ const useTooltip_unstable = (props)=>{
|
|
144
144
|
// Callback ref that attaches a keyborg:focusin event listener.
|
145
145
|
const [keyborgListenerCallbackRef] = _react.useState(()=>{
|
146
146
|
const onKeyborgFocusIn = (ev)=>{
|
147
|
-
var
|
147
|
+
var _ev_detail;
|
148
148
|
// Skip showing the tooltip if focus moved programmatically.
|
149
149
|
// For example, we don't want to show the tooltip when a dialog is closed
|
150
150
|
// and Tabster programmatically restores focus to the trigger button.
|
151
151
|
// See https://github.com/microsoft/fluentui/issues/27576
|
152
|
-
if ((
|
152
|
+
if ((_ev_detail = ev.detail) === null || _ev_detail === void 0 ? void 0 : _ev_detail.isFocusedProgrammatically) {
|
153
153
|
ignoreNextFocusEventRef.current = true;
|
154
154
|
}
|
155
155
|
};
|
@@ -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_details;\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_details = ev.details) === null || _ev_details === void 0 ? void 0 : _ev_details.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_details","details","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 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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"}
|
@@ -124,17 +124,17 @@ const tooltipClassNames = {
|
|
124
124
|
"f112wvtl"
|
125
125
|
],
|
126
126
|
Hv9wc6: [
|
127
|
-
"
|
128
|
-
"
|
127
|
+
"f1500xdc",
|
128
|
+
"f1it0ps5"
|
129
129
|
],
|
130
130
|
hl6cv3: "f1773hnp",
|
131
|
-
|
131
|
+
c8svkw: "fw7o64x",
|
132
132
|
yayu3t: "f1v7783n",
|
133
|
-
|
133
|
+
nr3p0k: "f1f0d6v",
|
134
134
|
rhl9o9: "fh2hsk5",
|
135
|
-
|
135
|
+
wiz9v7: "f1gj3y7g",
|
136
136
|
B6q6orb: "f11yvu4",
|
137
|
-
|
137
|
+
ndpsmx: "f17lejdj"
|
138
138
|
}
|
139
139
|
}, {
|
140
140
|
d: [
|
@@ -193,16 +193,16 @@ const tooltipClassNames = {
|
|
193
193
|
".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}",
|
194
194
|
".f9e5op9::before{border-bottom-right-radius:var(--borderRadiusSmall);}",
|
195
195
|
".f112wvtl::before{border-bottom-left-radius:var(--borderRadiusSmall);}",
|
196
|
-
".
|
197
|
-
".
|
196
|
+
".f1500xdc::before{transform:rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(45deg);}",
|
197
|
+
".f1it0ps5::before{transform:rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(-45deg);}",
|
198
198
|
"[data-popper-placement^=\"top\"] .f1773hnp{bottom:-1px;}",
|
199
|
-
"[data-popper-placement^=\"top\"] .
|
199
|
+
"[data-popper-placement^=\"top\"] .fw7o64x{--fui-positioning-angle:0;}",
|
200
200
|
"[data-popper-placement^=\"right\"] .f1v7783n{left:-1px;}",
|
201
|
-
"[data-popper-placement^=\"right\"] .
|
201
|
+
"[data-popper-placement^=\"right\"] .f1f0d6v{--fui-positioning-angle:90deg;}",
|
202
202
|
"[data-popper-placement^=\"bottom\"] .fh2hsk5{top:-1px;}",
|
203
|
-
"[data-popper-placement^=\"bottom\"] .
|
203
|
+
"[data-popper-placement^=\"bottom\"] .f1gj3y7g{--fui-positioning-angle:180deg;}",
|
204
204
|
"[data-popper-placement^=\"left\"] .f11yvu4{right:-1px;}",
|
205
|
-
"[data-popper-placement^=\"left\"] .
|
205
|
+
"[data-popper-placement^=\"left\"] .f17lejdj{--fui-positioning-angle:270deg;}"
|
206
206
|
]
|
207
207
|
});
|
208
208
|
const useTooltipStyles_unstable = (state)=>{
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useTooltipStyles.styles.js"],"sourcesContent":["import { shorthands, __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 Bbmb7ep: [\"f1aa9q02\", \"f16jpd5f\"],\n Beyfa6y: [\"f16jpd5f\", \"f1aa9q02\"],\n B7oj6ja: [\"f1jar5jt\", \"fyu767a\"],\n Btl43ni: [\"fyu767a\", \"f1jar5jt\"],\n B4j52fo: \"f5ogflp\",\n Bekrc4i: [\"f1hqa2wf\", \"finvdd3\"],\n Bn0qgzm: \"f1f09k3d\",\n ibv6hh: [\"finvdd3\", \"f1hqa2wf\"],\n icvyot: \"fzkkow9\",\n vrafjx: [\"fcdblym\", \"fjik90z\"],\n oivjwe: \"fg706s2\",\n wvpqe5: [\"fjik90z\", \"fcdblym\"],\n g2u3we: \"fghlq4f\",\n h3c5rm: [\"f1gn591s\", \"fjscplz\"],\n B9xav0g: \"fb073pr\",\n zhjwy3: [\"fjscplz\", \"f1gn591s\"],\n z8tnut: \"f10ra9hq\",\n z189sj: [\"fd9xhir\", \"f1jlaasf\"],\n Byoj8tv: \"f1d7kygh\",\n uwmqm3: [\"f1jlaasf\", \"fd9xhir\"],\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 B4f6apu: \"fyfemzf\",\n m598lv: \"focyt6c\",\n Bk5zm6e: \"fnhxbxj\",\n y0oebl: \"fdw6hkg\",\n qa3bma: \"f11yjt3y\",\n Bqjgrrk: \"f1172wan\",\n Budzafs: [\"f9e5op9\", \"f112wvtl\"],\n Hv9wc6: [\"
|
1
|
+
{"version":3,"sources":["useTooltipStyles.styles.js"],"sourcesContent":["import { shorthands, __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 Bbmb7ep: [\"f1aa9q02\", \"f16jpd5f\"],\n Beyfa6y: [\"f16jpd5f\", \"f1aa9q02\"],\n B7oj6ja: [\"f1jar5jt\", \"fyu767a\"],\n Btl43ni: [\"fyu767a\", \"f1jar5jt\"],\n B4j52fo: \"f5ogflp\",\n Bekrc4i: [\"f1hqa2wf\", \"finvdd3\"],\n Bn0qgzm: \"f1f09k3d\",\n ibv6hh: [\"finvdd3\", \"f1hqa2wf\"],\n icvyot: \"fzkkow9\",\n vrafjx: [\"fcdblym\", \"fjik90z\"],\n oivjwe: \"fg706s2\",\n wvpqe5: [\"fjik90z\", \"fcdblym\"],\n g2u3we: \"fghlq4f\",\n h3c5rm: [\"f1gn591s\", \"fjscplz\"],\n B9xav0g: \"fb073pr\",\n zhjwy3: [\"fjscplz\", \"f1gn591s\"],\n z8tnut: \"f10ra9hq\",\n z189sj: [\"fd9xhir\", \"f1jlaasf\"],\n Byoj8tv: \"f1d7kygh\",\n uwmqm3: [\"f1jlaasf\", \"fd9xhir\"],\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 B4f6apu: \"fyfemzf\",\n m598lv: \"focyt6c\",\n Bk5zm6e: \"fnhxbxj\",\n y0oebl: \"fdw6hkg\",\n qa3bma: \"f11yjt3y\",\n Bqjgrrk: \"f1172wan\",\n Budzafs: [\"f9e5op9\", \"f112wvtl\"],\n Hv9wc6: [\"f1500xdc\", \"f1it0ps5\"],\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;}\", \".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}\", \".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}\", \".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}\", \".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}\", \".f5ogflp{border-top-width:1px;}\", \".f1hqa2wf{border-right-width:1px;}\", \".finvdd3{border-left-width:1px;}\", \".f1f09k3d{border-bottom-width:1px;}\", \".fzkkow9{border-top-style:solid;}\", \".fcdblym{border-right-style:solid;}\", \".fjik90z{border-left-style:solid;}\", \".fg706s2{border-bottom-style:solid;}\", \".fghlq4f{border-top-color:var(--colorTransparentStroke);}\", \".f1gn591s{border-right-color:var(--colorTransparentStroke);}\", \".fjscplz{border-left-color:var(--colorTransparentStroke);}\", \".fb073pr{border-bottom-color:var(--colorTransparentStroke);}\", \".f10ra9hq{padding-top:4px;}\", \".fd9xhir{padding-right:11px;}\", \".f1jlaasf{padding-left:11px;}\", \".f1d7kygh{padding-bottom:6px;}\", \".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;}\", \".fyfemzf::before{border-right-width:1px;}\", \".focyt6c::before{border-right-style:solid;}\", \".fnhxbxj::before{border-right-color:var(--colorTransparentStroke);}\", \".fdw6hkg::before{border-bottom-width:1px;}\", \".f11yjt3y::before{border-bottom-style:solid;}\", \".f1172wan::before{border-bottom-color:var(--colorTransparentStroke);}\", \".f9e5op9::before{border-bottom-right-radius:var(--borderRadiusSmall);}\", \".f112wvtl::before{border-bottom-left-radius:var(--borderRadiusSmall);}\", \".f1500xdc::before{transform:rotate(var(--fui-positioning-angle)) translate(0, 50%) rotate(45deg);}\", \".f1it0ps5::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","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","z8tnut","z189sj","Byoj8tv","uwmqm3","De3pzq","sj55zd","Bhu2qc9","visible","inverted","arrow","qhf8xq","Bcdw1i0","Bj3rh1h","a9b677","Bqenvij","Ftih45","B1puzpu","Brfgrao","Bcvre1j","Ccq8qp","Baz25je","cmx5o7","B4f6apu","m598lv","Bk5zm6e","y0oebl","qa3bma","Bqjgrrk","Budzafs","Hv9wc6","hl6cv3","c8svkw","yayu3t","nr3p0k","rhl9o9","wiz9v7","B6q6orb","ndpsmx","d","state","styles","className","mergeClasses","appearance","arrowClassName"],"mappings":";;;;;;;;;;;IAIaA,iBAAiB;eAAjBA;;IAoFAC,yBAAyB;eAAzBA;;;uBAxFsC;AAI5C,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;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAW;QACjCC,SAAS;YAAC;YAAY;SAAU;QAChCC,SAAS;YAAC;YAAW;SAAW;QAChCC,SAAS;QACTC,SAAS;YAAC;YAAY;SAAU;QAChCC,SAAS;QACTC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAU;QAC9BC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,QAAQ;QACRC,QAAQ;YAAC;YAAW;SAAW;QAC/BC,SAAS;QACTC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;IACAC,SAAS;QACP/B,QAAQ;IACV;IACAgC,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,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;YAAC;YAAW;SAAW;QAChCC,QAAQ;YAAC;YAAY;SAAW;QAChCC,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;QAAoE;QAAmE;QAAiE;QAA+D;QAAmC;QAAsC;QAAoC;QAAuC;QAAqC;QAAuC;QAAsC;QAAwC;QAA6D;QAAgE;QAA8D;QAAgE;QAA+B;QAAiC;QAAiC;QAAkC;QAA8D;QAAmD;QAA+H;QAA4B;QAAmE;QAAgE;QAAiC;QAAwC;QAAgC;QAA0B;QAA6B;QAA6B;QAAoC;QAA0C;QAAyC;QAA4C;QAAoC;QAAqC;QAAgD;QAA6C;QAA+C;QAAuE;QAA8C;QAAiD;QAAyE;QAA0E;QAA0E;QAAsG;QAAuG;QAA4D;QAAyE;QAA4D;QAA+E;QAA2D;QAAkF;QAA2D;KAA+E;AACzyG;AAIO,MAAMnE,4BAA4BoE,CAAAA;IACvC,MAAMC,SAASnE;IACfkE,MAAMnE,OAAO,CAACqE,SAAS,GAAGC,IAAAA,mBAAY,EAACxE,kBAAkBE,OAAO,EAAEoE,OAAOjE,IAAI,EAAEgE,MAAMI,UAAU,KAAK,cAAcH,OAAOhC,QAAQ,EAAE+B,MAAMhC,OAAO,IAAIiC,OAAOjC,OAAO,EAAEgC,MAAMnE,OAAO,CAACqE,SAAS;IAC3LF,MAAMK,cAAc,GAAGJ,OAAO/B,KAAK;IACnC,OAAO8B;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.4",
|
4
4
|
"description": "React components for building web experiences",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -34,13 +34,13 @@
|
|
34
34
|
},
|
35
35
|
"dependencies": {
|
36
36
|
"@fluentui/keyboard-keys": "^9.0.7",
|
37
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
38
|
-
"@fluentui/react-portal": "^9.4.
|
39
|
-
"@fluentui/react-positioning": "^9.10.
|
40
|
-
"@fluentui/react-shared-contexts": "^9.13.
|
41
|
-
"@fluentui/react-tabster": "^9.
|
37
|
+
"@fluentui/react-jsx-runtime": "^9.0.22",
|
38
|
+
"@fluentui/react-portal": "^9.4.5",
|
39
|
+
"@fluentui/react-positioning": "^9.10.5",
|
40
|
+
"@fluentui/react-shared-contexts": "^9.13.2",
|
41
|
+
"@fluentui/react-tabster": "^9.16.0",
|
42
42
|
"@fluentui/react-theme": "^9.1.16",
|
43
|
-
"@fluentui/react-utilities": "^9.15.
|
43
|
+
"@fluentui/react-utilities": "^9.15.4",
|
44
44
|
"@griffel/react": "^1.5.14",
|
45
45
|
"@swc/helpers": "^0.5.1"
|
46
46
|
},
|