@fluentui/react-tooltip 9.1.5 → 9.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/CHANGELOG.json +81 -1
  2. package/CHANGELOG.md +26 -2
  3. package/lib/components/Tooltip/Tooltip.js +2 -3
  4. package/lib/components/Tooltip/Tooltip.js.map +1 -1
  5. package/lib/components/Tooltip/private/constants.js +0 -1
  6. package/lib/components/Tooltip/private/constants.js.map +1 -1
  7. package/lib/components/Tooltip/renderTooltip.js +2 -2
  8. package/lib/components/Tooltip/renderTooltip.js.map +1 -1
  9. package/lib/components/Tooltip/useTooltip.js +24 -38
  10. package/lib/components/Tooltip/useTooltip.js.map +1 -1
  11. package/lib/components/Tooltip/useTooltipStyles.js +67 -70
  12. package/lib/components/Tooltip/useTooltipStyles.js.map +1 -1
  13. package/lib/index.js.map +1 -1
  14. package/lib-commonjs/Tooltip.js +0 -2
  15. package/lib-commonjs/Tooltip.js.map +1 -1
  16. package/lib-commonjs/components/Tooltip/Tooltip.js +2 -8
  17. package/lib-commonjs/components/Tooltip/Tooltip.js.map +1 -1
  18. package/lib-commonjs/components/Tooltip/Tooltip.types.js.map +1 -1
  19. package/lib-commonjs/components/Tooltip/index.js +0 -6
  20. package/lib-commonjs/components/Tooltip/index.js.map +1 -1
  21. package/lib-commonjs/components/Tooltip/private/constants.js +0 -2
  22. package/lib-commonjs/components/Tooltip/private/constants.js.map +1 -1
  23. package/lib-commonjs/components/Tooltip/renderTooltip.js +2 -7
  24. package/lib-commonjs/components/Tooltip/renderTooltip.js.map +1 -1
  25. package/lib-commonjs/components/Tooltip/useTooltip.js +24 -46
  26. package/lib-commonjs/components/Tooltip/useTooltip.js.map +1 -1
  27. package/lib-commonjs/components/Tooltip/useTooltipStyles.js +67 -76
  28. package/lib-commonjs/components/Tooltip/useTooltipStyles.js.map +1 -1
  29. package/lib-commonjs/index.js +0 -2
  30. package/lib-commonjs/index.js.map +1 -1
  31. package/package.json +7 -7
package/CHANGELOG.json CHANGED
@@ -2,7 +2,87 @@
2
2
  "name": "@fluentui/react-tooltip",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 21 Dec 2022 10:17:16 GMT",
5
+ "date": "Mon, 09 Jan 2023 14:31:49 GMT",
6
+ "tag": "@fluentui/react-tooltip_v9.1.7",
7
+ "version": "9.1.7",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui/react-tooltip",
13
+ "comment": "Bump @fluentui/react-portal to v9.1.0",
14
+ "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-tooltip",
19
+ "comment": "Bump @fluentui/react-positioning to v9.3.7",
20
+ "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-tooltip",
25
+ "comment": "Bump @fluentui/react-utilities to v9.4.0",
26
+ "commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
27
+ }
28
+ ]
29
+ }
30
+ },
31
+ {
32
+ "date": "Wed, 04 Jan 2023 01:40:42 GMT",
33
+ "tag": "@fluentui/react-tooltip_v9.1.6",
34
+ "version": "9.1.6",
35
+ "comments": {
36
+ "patch": [
37
+ {
38
+ "author": "olfedias@microsoft.com",
39
+ "package": "@fluentui/react-tooltip",
40
+ "commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
41
+ "comment": "chore: Update Griffel to latest version"
42
+ },
43
+ {
44
+ "author": "beachball",
45
+ "package": "@fluentui/react-tooltip",
46
+ "comment": "Bump @fluentui/react-portal to v9.0.15",
47
+ "commit": "3e322d15529451be153e97298873253e21af4082"
48
+ },
49
+ {
50
+ "author": "beachball",
51
+ "package": "@fluentui/react-tooltip",
52
+ "comment": "Bump @fluentui/react-positioning to v9.3.6",
53
+ "commit": "3e322d15529451be153e97298873253e21af4082"
54
+ },
55
+ {
56
+ "author": "beachball",
57
+ "package": "@fluentui/react-tooltip",
58
+ "comment": "Bump @fluentui/react-utilities to v9.3.1",
59
+ "commit": "3e322d15529451be153e97298873253e21af4082"
60
+ },
61
+ {
62
+ "author": "beachball",
63
+ "package": "@fluentui/react-tooltip",
64
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19",
65
+ "commit": "3e322d15529451be153e97298873253e21af4082"
66
+ }
67
+ ],
68
+ "none": [
69
+ {
70
+ "author": "martinhochel@microsoft.com",
71
+ "package": "@fluentui/react-tooltip",
72
+ "commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
73
+ "comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
74
+ },
75
+ {
76
+ "author": "martinhochel@microsoft.com",
77
+ "package": "@fluentui/react-tooltip",
78
+ "commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
79
+ "comment": "chore(scripts): move index.ts to to follow sub-folder domain packaging"
80
+ }
81
+ ]
82
+ }
83
+ },
84
+ {
85
+ "date": "Wed, 21 Dec 2022 10:20:33 GMT",
6
86
  "tag": "@fluentui/react-tooltip_v9.1.5",
7
87
  "version": "9.1.5",
8
88
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,36 @@
1
1
  # Change Log - @fluentui/react-tooltip
2
2
 
3
- This log was last generated on Wed, 21 Dec 2022 10:17:16 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 09 Jan 2023 14:31:49 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.1.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.1.7)
8
+
9
+ Mon, 09 Jan 2023 14:31:49 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.1.6..@fluentui/react-tooltip_v9.1.7)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-portal to v9.1.0 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
15
+ - Bump @fluentui/react-positioning to v9.3.7 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
16
+ - Bump @fluentui/react-utilities to v9.4.0 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
17
+
18
+ ## [9.1.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.1.6)
19
+
20
+ Wed, 04 Jan 2023 01:40:42 GMT
21
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.1.5..@fluentui/react-tooltip_v9.1.6)
22
+
23
+ ### Patches
24
+
25
+ - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
26
+ - Bump @fluentui/react-portal to v9.0.15 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
27
+ - Bump @fluentui/react-positioning to v9.3.6 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
28
+ - Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
29
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
30
+
7
31
  ## [9.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.1.5)
8
32
 
9
- Wed, 21 Dec 2022 10:17:16 GMT
33
+ Wed, 21 Dec 2022 10:20:33 GMT
10
34
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.1.4..@fluentui/react-tooltip_v9.1.5)
11
35
 
12
36
  ### Patches
@@ -4,13 +4,12 @@ import { useTooltipStyles_unstable } from './useTooltipStyles';
4
4
  /**
5
5
  * A tooltip provides light weight contextual information on top of its target element.
6
6
  */
7
-
8
7
  export const Tooltip = props => {
9
8
  const state = useTooltip_unstable(props);
10
9
  useTooltipStyles_unstable(state);
11
10
  return renderTooltip_unstable(state);
12
11
  };
13
- Tooltip.displayName = 'Tooltip'; // type casting here is required to ensure internal type FluentTriggerComponent is not leaked
14
-
12
+ Tooltip.displayName = 'Tooltip';
13
+ // type casting here is required to ensure internal type FluentTriggerComponent is not leaked
15
14
  Tooltip.isFluentTriggerComponent = true;
16
15
  //# sourceMappingURL=Tooltip.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAIA;;AAEG;;AACH,OAAO,MAAM,OAAO,GAA2B,KAAK,IAAG;EACrD,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,CAAjC;EAEA,yBAAyB,CAAC,KAAD,CAAzB;EACA,OAAO,sBAAsB,CAAC,KAAD,CAA7B;AACD,CALM;AAOP,OAAO,CAAC,WAAR,GAAsB,SAAtB,C,CACA;;AACC,OAAkC,CAAC,wBAAnC,GAA8D,IAA9D","sourcesContent":["import * as React from 'react';\nimport { useTooltip_unstable } from './useTooltip';\nimport { renderTooltip_unstable } from './renderTooltip';\nimport { useTooltipStyles_unstable } from './useTooltipStyles';\nimport type { TooltipProps } from './Tooltip.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * A tooltip provides light weight contextual information on top of its target element.\n */\nexport const Tooltip: React.FC<TooltipProps> = props => {\n const state = useTooltip_unstable(props);\n\n useTooltipStyles_unstable(state);\n return renderTooltip_unstable(state);\n};\n\nTooltip.displayName = 'Tooltip';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(Tooltip as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AACA,SAASA,mBAAmB,QAAQ,cAAc;AAClD,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAI9D;;;AAGA,OAAO,MAAMC,OAAO,GAA2BC,KAAK,IAAG;EACrD,MAAMC,KAAK,GAAGL,mBAAmB,CAACI,KAAK,CAAC;EAExCF,yBAAyB,CAACG,KAAK,CAAC;EAChC,OAAOJ,sBAAsB,CAACI,KAAK,CAAC;AACtC,CAAC;AAEDF,OAAO,CAACG,WAAW,GAAG,SAAS;AAC/B;AACCH,OAAkC,CAACI,wBAAwB,GAAG,IAAI","names":["useTooltip_unstable","renderTooltip_unstable","useTooltipStyles_unstable","Tooltip","props","state","displayName","isFluentTriggerComponent"],"sourceRoot":"../src/","sources":["packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTooltip_unstable } from './useTooltip';\nimport { renderTooltip_unstable } from './renderTooltip';\nimport { useTooltipStyles_unstable } from './useTooltipStyles';\nimport type { TooltipProps } from './Tooltip.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * A tooltip provides light weight contextual information on top of its target element.\n */\nexport const Tooltip: React.FC<TooltipProps> = props => {\n const state = useTooltip_unstable(props);\n\n useTooltipStyles_unstable(state);\n return renderTooltip_unstable(state);\n};\n\nTooltip.displayName = 'Tooltip';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(Tooltip as FluentTriggerComponent).isFluentTriggerComponent = true;\n"]}
@@ -9,6 +9,5 @@ export const arrowHeight = 6;
9
9
  * While we could use getComputedStyle, that adds a performance penalty for something that
10
10
  * will likely never change.
11
11
  */
12
-
13
12
  export const tooltipBorderRadius = 4;
14
13
  //# sourceMappingURL=constants.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-tooltip/src/components/Tooltip/private/constants.ts"],"names":[],"mappings":"AAAA;;AAEG;AACH,OAAO,MAAM,WAAW,GAAG,CAApB;AAEP;;;;;;AAMG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAA5B","sourcesContent":["/**\n * The height of the tooltip's arrow in pixels.\n */\nexport const arrowHeight = 6;\n\n/**\n * The default value of the tooltip's border radius (borderRadiusMedium).\n *\n * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.\n * While we could use getComputedStyle, that adds a performance penalty for something that\n * will likely never change.\n */\nexport const tooltipBorderRadius = 4;\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"file":"constants.js","sourceRoot":"../src/","sources":["packages/react-components/react-tooltip/src/components/Tooltip/private/constants.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,CAAC;AAE7B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,CAAC","sourcesContent":["/**\n * The height of the tooltip's arrow in pixels.\n */\nexport const arrowHeight = 6;\n\n/**\n * The default value of the tooltip's border radius (borderRadiusMedium).\n *\n * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.\n * While we could use getComputedStyle, that adds a performance penalty for something that\n * will likely never change.\n */\nexport const tooltipBorderRadius = 4;\n"]}
@@ -4,7 +4,6 @@ import { getSlots } from '@fluentui/react-utilities';
4
4
  /**
5
5
  * Render the final JSX of Tooltip
6
6
  */
7
-
8
7
  export const renderTooltip_unstable = state => {
9
8
  const {
10
9
  slots,
@@ -12,7 +11,8 @@ export const renderTooltip_unstable = state => {
12
11
  } = getSlots(state);
13
12
  return /*#__PURE__*/React.createElement(React.Fragment, null, state.children, state.shouldRenderTooltip && /*#__PURE__*/React.createElement(Portal, {
14
13
  mountNode: state.mountNode
15
- }, /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content
14
+ }, /*#__PURE__*/React.createElement(slots.content, {
15
+ ...slotProps.content
16
16
  }, state.withArrow && /*#__PURE__*/React.createElement("div", {
17
17
  ref: state.arrowRef,
18
18
  className: state.arrowClassName
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-tooltip/src/components/Tooltip/renderTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;EAC5D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAe,KAAf,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,KAAK,CAAC,QADT,EAEG,KAAK,CAAC,mBAAN,iBACC,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO;IAAC,SAAS,EAAE,KAAK,CAAC;EAAlB,CAAP,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,EACG,KAAK,CAAC,SAAN,iBAAmB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;IAAK,GAAG,EAAE,KAAK,CAAC,QAAhB;IAA0B,SAAS,EAAE,KAAK,CAAC;EAA3C,CAAA,CADtB,EAEG,KAAK,CAAC,OAAN,CAAc,QAFjB,CADF,CAHJ,CADF;AAaD,CAhBM","sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TooltipSlots, TooltipState } from './Tooltip.types';\n\n/**\n * Render the final JSX of Tooltip\n */\nexport const renderTooltip_unstable = (state: TooltipState) => {\n const { slots, slotProps } = getSlots<TooltipSlots>(state);\n\n return (\n <>\n {state.children}\n {state.shouldRenderTooltip && (\n <Portal mountNode={state.mountNode}>\n <slots.content {...slotProps.content}>\n {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n {state.content.children}\n </slots.content>\n </Portal>\n )}\n </>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,sBAAsB,GAAIC,KAAmB,IAAI;EAC5D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAeE,KAAK,CAAC;EAE1D,oBACEJ,0CACGI,KAAK,CAACG,QAAQ,EACdH,KAAK,CAACI,mBAAmB,iBACxBR,oBAACC,MAAM;IAACQ,SAAS,EAAEL,KAAK,CAACK;EAAS,gBAChCT,oBAACK,KAAK,CAACK,OAAO;IAAA,GAAKJ,SAAS,CAACI;EAAO,GACjCN,KAAK,CAACO,SAAS,iBAAIX;IAAKY,GAAG,EAAER,KAAK,CAACS,QAAQ;IAAEC,SAAS,EAAEV,KAAK,CAACW;EAAc,EAAI,EAChFX,KAAK,CAACM,OAAO,CAACH,QAAQ,CACT,CAEnB,CACA;AAEP,CAAC","names":["React","Portal","getSlots","renderTooltip_unstable","state","slots","slotProps","children","shouldRenderTooltip","mountNode","content","withArrow","ref","arrowRef","className","arrowClassName"],"sourceRoot":"../src/","sources":["packages/react-components/react-tooltip/src/components/Tooltip/renderTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TooltipSlots, TooltipState } from './Tooltip.types';\n\n/**\n * Render the final JSX of Tooltip\n */\nexport const renderTooltip_unstable = (state: TooltipState) => {\n const { slots, slotProps } = getSlots<TooltipSlots>(state);\n\n return (\n <>\n {state.children}\n {state.shouldRenderTooltip && (\n <Portal mountNode={state.mountNode}>\n <slots.content {...slotProps.content}>\n {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n {state.content.children}\n </slots.content>\n </Portal>\n )}\n </>\n );\n};\n"]}
@@ -12,10 +12,8 @@ import { Escape } from '@fluentui/keyboard-keys';
12
12
  *
13
13
  * @param props - props from this instance of Tooltip
14
14
  */
15
-
16
15
  export const useTooltip_unstable = props => {
17
16
  var _a, _b, _c, _d;
18
-
19
17
  const context = useTooltipVisibility();
20
18
  const isServerSideRender = useIsSSR();
21
19
  const {
@@ -46,7 +44,6 @@ export const useTooltip_unstable = props => {
46
44
  visible: newVisible
47
45
  });
48
46
  }
49
-
50
47
  return newVisible;
51
48
  });
52
49
  }, [clearDelayTimeout, setVisibleInternal, onVisibleChange]);
@@ -80,40 +77,35 @@ export const useTooltip_unstable = props => {
80
77
  offset: 4,
81
78
  ...resolvePositioningShorthand(state.positioning)
82
79
  };
83
-
84
80
  if (state.withArrow) {
85
81
  positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeight);
86
82
  }
87
-
88
83
  const {
89
84
  targetRef,
90
85
  containerRef,
91
86
  arrowRef
92
87
  } = usePositioning(positioningOptions);
93
88
  state.content.ref = useMergedRefs(state.content.ref, containerRef);
94
- state.arrowRef = arrowRef; // When this tooltip is visible, hide any other tooltips, and register it
89
+ state.arrowRef = arrowRef;
90
+ // When this tooltip is visible, hide any other tooltips, and register it
95
91
  // as the visibleTooltip with the TooltipContext.
96
92
  // Also add a listener on document to hide the tooltip if Escape is pressed
97
-
98
93
  useIsomorphicLayoutEffect(() => {
99
94
  var _a;
100
-
101
95
  if (visible) {
102
96
  const thisTooltip = {
103
97
  hide: () => setVisible(false)
104
98
  };
105
99
  (_a = context.visibleTooltip) === null || _a === void 0 ? void 0 : _a.hide();
106
100
  context.visibleTooltip = thisTooltip;
107
-
108
101
  const onDocumentKeyDown = ev => {
109
102
  if (ev.key === Escape) {
110
- thisTooltip.hide(); // stop propagation to avoid conflicting with other elements that listen for `Escape`
103
+ thisTooltip.hide();
104
+ // stop propagation to avoid conflicting with other elements that listen for `Escape`
111
105
  // e,g: Dialog, Popover, Menu
112
-
113
106
  ev.stopPropagation();
114
107
  }
115
108
  };
116
-
117
109
  targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown, {
118
110
  // As this event is added at targeted document,
119
111
  // we need to capture the event to be sure keydown handling from tooltip happens first
@@ -123,80 +115,74 @@ export const useTooltip_unstable = props => {
123
115
  if (context.visibleTooltip === thisTooltip) {
124
116
  context.visibleTooltip = undefined;
125
117
  }
126
-
127
118
  targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown, {
128
119
  capture: true
129
120
  });
130
121
  };
131
122
  }
132
- }, [context, targetDocument, visible, setVisible]); // The focused element gets a blur event when the document loses focus
123
+ }, [context, targetDocument, visible, setVisible]);
124
+ // The focused element gets a blur event when the document loses focus
133
125
  // (e.g. switching tabs in the browser), but we don't want to show the
134
126
  // tooltip again when the document gets focus back. Handle this case by
135
127
  // checking if the blurred element is still the document's activeElement.
136
128
  // See https://github.com/microsoft/fluentui/issues/13541
137
-
138
- const ignoreNextFocusEventRef = React.useRef(false); // Listener for onPointerEnter and onFocus on the trigger element
139
-
129
+ const ignoreNextFocusEventRef = React.useRef(false);
130
+ // Listener for onPointerEnter and onFocus on the trigger element
140
131
  const onEnterTrigger = React.useCallback(ev => {
141
132
  if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {
142
133
  ignoreNextFocusEventRef.current = false;
143
134
  return;
144
- } // Show immediately if another tooltip is already visible
145
-
146
-
135
+ }
136
+ // Show immediately if another tooltip is already visible
147
137
  const delay = context.visibleTooltip ? 0 : state.showDelay;
148
138
  setDelayTimeout(() => {
149
139
  setVisible(true, ev);
150
140
  }, delay);
151
141
  ev.persist(); // Persist the event since the setVisible call will happen asynchronously
152
- }, [setDelayTimeout, setVisible, state.showDelay, context]); // Listener for onPointerLeave and onBlur on the trigger element
153
-
142
+ }, [setDelayTimeout, setVisible, state.showDelay, context]);
143
+ // Listener for onPointerLeave and onBlur on the trigger element
154
144
  const onLeaveTrigger = React.useCallback(ev => {
155
145
  let delay = state.hideDelay;
156
-
157
146
  if (ev.type === 'blur') {
158
147
  // Hide immediately when losing focus
159
148
  delay = 0;
160
149
  ignoreNextFocusEventRef.current = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === ev.target;
161
150
  }
162
-
163
151
  setDelayTimeout(() => {
164
152
  setVisible(false, ev);
165
153
  }, delay);
166
154
  ev.persist(); // Persist the event since the setVisible call will happen asynchronously
167
- }, [setDelayTimeout, setVisible, state.hideDelay, targetDocument]); // Cancel the hide timer when the mouse or focus enters the tooltip, and restart it when the mouse or focus leaves.
155
+ }, [setDelayTimeout, setVisible, state.hideDelay, targetDocument]);
156
+ // Cancel the hide timer when the mouse or focus enters the tooltip, and restart it when the mouse or focus leaves.
168
157
  // This keeps the tooltip visible when the mouse is moved over it, or it has focus within.
169
-
170
158
  state.content.onPointerEnter = mergeCallbacks(state.content.onPointerEnter, clearDelayTimeout);
171
159
  state.content.onPointerLeave = mergeCallbacks(state.content.onPointerLeave, onLeaveTrigger);
172
160
  state.content.onFocus = mergeCallbacks(state.content.onFocus, clearDelayTimeout);
173
161
  state.content.onBlur = mergeCallbacks(state.content.onBlur, onLeaveTrigger);
174
162
  const child = getTriggerChild(children);
175
163
  const triggerAriaProps = {};
176
-
177
164
  if (relationship === 'label') {
178
165
  // aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.
179
166
  if (typeof state.content.children === 'string') {
180
167
  triggerAriaProps['aria-label'] = state.content.children;
181
168
  } else {
182
- triggerAriaProps['aria-labelledby'] = state.content.id; // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
183
-
169
+ triggerAriaProps['aria-labelledby'] = state.content.id;
170
+ // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
184
171
  state.shouldRenderTooltip = true;
185
172
  }
186
173
  } else if (relationship === 'description') {
187
- triggerAriaProps['aria-describedby'] = state.content.id; // Always render the tooltip even if hidden, so that aria-describedby refers to a valid element
188
-
174
+ triggerAriaProps['aria-describedby'] = state.content.id;
175
+ // Always render the tooltip even if hidden, so that aria-describedby refers to a valid element
189
176
  state.shouldRenderTooltip = true;
190
- } // Don't render the Tooltip in SSR to avoid hydration errors
191
-
192
-
177
+ }
178
+ // Don't render the Tooltip in SSR to avoid hydration errors
193
179
  if (isServerSideRender) {
194
180
  state.shouldRenderTooltip = false;
195
181
  }
196
-
197
- const childTargetRef = useMergedRefs(child === null || child === void 0 ? void 0 : child.ref, targetRef); // Apply the trigger props to the child, either by calling the render function, or cloning with the new props
198
-
199
- state.children = applyTriggerPropsToChildren(children, { ...triggerAriaProps,
182
+ const childTargetRef = useMergedRefs(child === null || child === void 0 ? void 0 : child.ref, targetRef);
183
+ // Apply the trigger props to the child, either by calling the render function, or cloning with the new props
184
+ state.children = applyTriggerPropsToChildren(children, {
185
+ ...triggerAriaProps,
200
186
  ...(child === null || child === void 0 ? void 0 : child.props),
201
187
  // If the target prop is not provided, attach targetRef to the trigger element's ref prop
202
188
  ref: positioningOptions.target === undefined ? childTargetRef : child === null || child === void 0 ? void 0 : child.ref,
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,EAA2B,2BAA3B,EAAwD,cAAxD,QAA8E,6BAA9E;AACA,SACE,6BAA6B,IAAI,oBADnC,EAEE,kBAAkB,IAAI,SAFxB,QAGO,iCAHP;AAIA,SACE,2BADF,EAEE,gBAFF,EAGE,oBAHF,EAIE,KAJF,EAKE,yBALF,EAME,QANF,EAOE,aAPF,EAQE,UARF,EASE,eATF,EAUE,cAVF,EAWE,gBAXF,QAYO,2BAZP;AAcA,SAAS,WAAT,EAAsB,mBAAtB,QAAiD,qBAAjD;AACA,SAAS,MAAT,QAAuB,yBAAvB;AAEA;;;;;;;AAOG;;AACH,OAAO,MAAM,mBAAmB,GAAI,KAAD,IAAsC;;;EACvE,MAAM,OAAO,GAAG,oBAAoB,EAApC;EACA,MAAM,kBAAkB,GAAG,QAAQ,EAAnC;EACA,MAAM;IAAE;EAAF,IAAqB,SAAS,EAApC;EACA,MAAM,CAAC,eAAD,EAAkB,iBAAlB,IAAuC,UAAU,EAAvD;EAEA,MAAM;IACJ,UAAU,GAAG,QADT;IAEJ,QAFI;IAGJ,OAHI;IAIJ,SAAS,GAAG,KAJR;IAKJ,WAAW,GAAG,OALV;IAMJ,eANI;IAOJ,YAPI;IAQJ,SAAS,GAAG,GARR;IASJ,SAAS,GAAG,GATR;IAUJ;EAVI,IAWF,KAXJ;EAaA,MAAM,CAAC,OAAD,EAAU,kBAAV,IAAgC,oBAAoB,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC,OAAf;IAAwB,YAAY,EAAE;EAAtC,CAAD,CAA1D;EACA,MAAM,UAAU,GAAG,KAAK,CAAC,WAAN,CACjB,CAAC,UAAD,EAAsB,EAAtB,KAA8F;IAC5F,iBAAiB;IACjB,kBAAkB,CAAC,UAAU,IAAG;MAC9B,IAAI,UAAU,KAAK,UAAnB,EAA+B;QAC7B,eAAe,KAAA,IAAf,IAAA,eAAe,KAAA,KAAA,CAAf,GAAe,KAAA,CAAf,GAAA,eAAe,CAAG,EAAH,EAAO;UAAE,OAAO,EAAE;QAAX,CAAP,CAAf;MACD;;MACD,OAAO,UAAP;IACD,CALiB,CAAlB;EAMD,CATgB,EAUjB,CAAC,iBAAD,EAAoB,kBAApB,EAAwC,eAAxC,CAViB,CAAnB;EAaA,MAAM,KAAK,GAAiB;IAC1B,SAD0B;IAE1B,WAF0B;IAG1B,SAH0B;IAI1B,SAJ0B;IAK1B,YAL0B;IAM1B,OAN0B;IAO1B,mBAAmB,EAAE,OAPK;IAQ1B,UAR0B;IAS1B,SAT0B;IAU1B;IACA,UAAU,EAAE;MACV,OAAO,EAAE;IADC,CAXc;IAc1B,OAAO,EAAE,gBAAgB,CAAC,OAAD,EAAU;MACjC,YAAY,EAAE;QACZ,IAAI,EAAE;MADM,CADmB;MAIjC,QAAQ,EAAE;IAJuB,CAAV;EAdC,CAA5B;EAsBA,KAAK,CAAC,OAAN,CAAc,EAAd,GAAmB,KAAK,CAAC,UAAD,EAAa,KAAK,CAAC,OAAN,CAAc,EAA3B,CAAxB;EAEA,MAAM,kBAAkB,GAAG;IACzB,OAAO,EAAE,KAAK,CAAC,OADU;IAEzB,YAAY,EAAE,IAAI,mBAFO;IAGzB,QAAQ,EAAE,OAHe;IAIzB,KAAK,EAAE,QAJkB;IAKzB,MAAM,EAAE,CALiB;IAMzB,GAAG,2BAA2B,CAAC,KAAK,CAAC,WAAP;EANL,CAA3B;;EASA,IAAI,KAAK,CAAC,SAAV,EAAqB;IACnB,kBAAkB,CAAC,MAAnB,GAA4B,gBAAgB,CAAC,kBAAkB,CAAC,MAApB,EAA4B,WAA5B,CAA5C;EACD;;EAED,MAAM;IACJ,SADI;IAEJ,YAFI;IAGJ;EAHI,IAQF,cAAc,CAAC,kBAAD,CARlB;EAUA,KAAK,CAAC,OAAN,CAAc,GAAd,GAAoB,aAAa,CAAC,KAAK,CAAC,OAAN,CAAc,GAAf,EAAoB,YAApB,CAAjC;EACA,KAAK,CAAC,QAAN,GAAiB,QAAjB,CAjFuE,CAmFvE;EACA;EACA;;EACA,yBAAyB,CAAC,MAAK;;;IAC7B,IAAI,OAAJ,EAAa;MACX,MAAM,WAAW,GAAG;QAAE,IAAI,EAAE,MAAM,UAAU,CAAC,KAAD;MAAxB,CAApB;MAEA,CAAA,EAAA,GAAA,OAAO,CAAC,cAAR,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,KAAA,CAAtB,GAAsB,EAAA,CAAE,IAAF,EAAtB;MACA,OAAO,CAAC,cAAR,GAAyB,WAAzB;;MAEA,MAAM,iBAAiB,GAAI,EAAD,IAAsB;QAC9C,IAAI,EAAE,CAAC,GAAH,KAAW,MAAf,EAAuB;UACrB,WAAW,CAAC,IAAZ,GADqB,CAErB;UACA;;UACA,EAAE,CAAC,eAAH;QACD;MACF,CAPD;;MASA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,gBAAhB,CAAiC,SAAjC,EAA4C,iBAA5C,EAA+D;QAC7D;QACA;QACA,OAAO,EAAE;MAHoD,CAA/D,CAAA;MAMA,OAAO,MAAK;QACV,IAAI,OAAO,CAAC,cAAR,KAA2B,WAA/B,EAA4C;UAC1C,OAAO,CAAC,cAAR,GAAyB,SAAzB;QACD;;QAED,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,mBAAhB,CAAoC,SAApC,EAA+C,iBAA/C,EAAkE;UAAE,OAAO,EAAE;QAAX,CAAlE,CAAA;MACD,CAND;IAOD;EACF,CA9BwB,EA8BtB,CAAC,OAAD,EAAU,cAAV,EAA0B,OAA1B,EAAmC,UAAnC,CA9BsB,CAAzB,CAtFuE,CAsHvE;EACA;EACA;EACA;EACA;;EACA,MAAM,uBAAuB,GAAG,KAAK,CAAC,MAAN,CAAa,KAAb,CAAhC,CA3HuE,CA6HvE;;EACA,MAAM,cAAc,GAAG,KAAK,CAAC,WAAN,CACpB,EAAD,IAAwE;IACtE,IAAI,EAAE,CAAC,IAAH,KAAY,OAAZ,IAAuB,uBAAuB,CAAC,OAAnD,EAA4D;MAC1D,uBAAuB,CAAC,OAAxB,GAAkC,KAAlC;MACA;IACD,CAJqE,CAMtE;;;IACA,MAAM,KAAK,GAAG,OAAO,CAAC,cAAR,GAAyB,CAAzB,GAA6B,KAAK,CAAC,SAAjD;IAEA,eAAe,CAAC,MAAK;MACnB,UAAU,CAAC,IAAD,EAAO,EAAP,CAAV;IACD,CAFc,EAEZ,KAFY,CAAf;IAIA,EAAE,CAAC,OAAH,GAbsE,CAaxD;EACf,CAfoB,EAgBrB,CAAC,eAAD,EAAkB,UAAlB,EAA8B,KAAK,CAAC,SAApC,EAA+C,OAA/C,CAhBqB,CAAvB,CA9HuE,CAiJvE;;EACA,MAAM,cAAc,GAAG,KAAK,CAAC,WAAN,CACpB,EAAD,IAAwE;IACtE,IAAI,KAAK,GAAG,KAAK,CAAC,SAAlB;;IAEA,IAAI,EAAE,CAAC,IAAH,KAAY,MAAhB,EAAwB;MACtB;MACA,KAAK,GAAG,CAAR;MAEA,uBAAuB,CAAC,OAAxB,GAAkC,CAAA,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,aAAhB,MAAkC,EAAE,CAAC,MAAvE;IACD;;IAED,eAAe,CAAC,MAAK;MACnB,UAAU,CAAC,KAAD,EAAQ,EAAR,CAAV;IACD,CAFc,EAEZ,KAFY,CAAf;IAIA,EAAE,CAAC,OAAH,GAdsE,CAcxD;EACf,CAhBoB,EAiBrB,CAAC,eAAD,EAAkB,UAAlB,EAA8B,KAAK,CAAC,SAApC,EAA+C,cAA/C,CAjBqB,CAAvB,CAlJuE,CAsKvE;EACA;;EACA,KAAK,CAAC,OAAN,CAAc,cAAd,GAA+B,cAAc,CAAC,KAAK,CAAC,OAAN,CAAc,cAAf,EAA+B,iBAA/B,CAA7C;EACA,KAAK,CAAC,OAAN,CAAc,cAAd,GAA+B,cAAc,CAAC,KAAK,CAAC,OAAN,CAAc,cAAf,EAA+B,cAA/B,CAA7C;EACA,KAAK,CAAC,OAAN,CAAc,OAAd,GAAwB,cAAc,CAAC,KAAK,CAAC,OAAN,CAAc,OAAf,EAAwB,iBAAxB,CAAtC;EACA,KAAK,CAAC,OAAN,CAAc,MAAd,GAAuB,cAAc,CAAC,KAAK,CAAC,OAAN,CAAc,MAAf,EAAuB,cAAvB,CAArC;EAEA,MAAM,KAAK,GAAG,eAAe,CAAC,QAAD,CAA7B;EAEA,MAAM,gBAAgB,GAAmF,EAAzG;;EAEA,IAAI,YAAY,KAAK,OAArB,EAA8B;IAC5B;IACA,IAAI,OAAO,KAAK,CAAC,OAAN,CAAc,QAArB,KAAkC,QAAtC,EAAgD;MAC9C,gBAAgB,CAAC,YAAD,CAAhB,GAAiC,KAAK,CAAC,OAAN,CAAc,QAA/C;IACD,CAFD,MAEO;MACL,gBAAgB,CAAC,iBAAD,CAAhB,GAAsC,KAAK,CAAC,OAAN,CAAc,EAApD,CADK,CAEL;;MACA,KAAK,CAAC,mBAAN,GAA4B,IAA5B;IACD;EACF,CATD,MASO,IAAI,YAAY,KAAK,aAArB,EAAoC;IACzC,gBAAgB,CAAC,kBAAD,CAAhB,GAAuC,KAAK,CAAC,OAAN,CAAc,EAArD,CADyC,CAEzC;;IACA,KAAK,CAAC,mBAAN,GAA4B,IAA5B;EACD,CA9LsE,CAgMvE;;;EACA,IAAI,kBAAJ,EAAwB;IACtB,KAAK,CAAC,mBAAN,GAA4B,KAA5B;EACD;;EAED,MAAM,cAAc,GAAG,aAAa,CAAC,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,GAAR,EAAa,SAAb,CAApC,CArMuE,CAuMvE;;EACA,KAAK,CAAC,QAAN,GAAiB,2BAA2B,CAAC,QAAD,EAAW,EACrD,GAAG,gBADkD;IAErD,IAAG,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAV,CAFqD;IAGrD;IACA,GAAG,EAAE,kBAAkB,CAAC,MAAnB,KAA8B,SAA9B,GAA0C,cAA1C,GAA2D,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,GAJlB;IAKrD,cAAc,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAY,EAAA,CAAE,cAAf,EAA+B,cAA/B,CAAf,CALqB;IAMrD,cAAc,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAY,EAAA,CAAE,cAAf,EAA+B,cAA/B,CAAf,CANqB;IAOrD,OAAO,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAY,EAAA,CAAE,OAAf,EAAwB,cAAxB,CAAf,CAP4B;IAQrD,MAAM,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAA,EAAA,GAAA,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAK,KAAA,CAAL,GAAA,KAAK,CAAE,KAAP,MAAY,IAAZ,IAAY,EAAA,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAY,EAAA,CAAE,MAAf,EAAuB,cAAvB,CAAf;EAR6B,CAAX,CAA5C;EAWA,OAAO,KAAP;AACD,CApNM","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 {\n applyTriggerPropsToChildren,\n resolveShorthand,\n useControllableState,\n useId,\n useIsomorphicLayoutEffect,\n useIsSSR,\n useMergedRefs,\n useTimeout,\n getTriggerChild,\n mergeCallbacks,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { TooltipProps, TooltipState, TooltipChildProps } 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 (newVisible: boolean, ev?: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n clearDelayTimeout();\n setVisibleInternal(oldVisible => {\n if (newVisible !== oldVisible) {\n onVisibleChange?.(ev, { visible: newVisible });\n }\n return newVisible;\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: resolveShorthand(content, {\n defaultProps: {\n role: 'tooltip',\n },\n required: true,\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 = { hide: () => setVisible(false) };\n\n context.visibleTooltip?.hide();\n context.visibleTooltip = thisTooltip;\n\n const onDocumentKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === Escape) {\n thisTooltip.hide();\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Popover, Menu\n ev.stopPropagation();\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 // 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 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(true, ev);\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 // 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 ignoreNextFocusEventRef.current = targetDocument?.activeElement === ev.target;\n }\n\n setDelayTimeout(() => {\n setVisible(false, ev);\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 const childTargetRef = useMergedRefs(child?.ref, targetRef);\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 // If the target prop is not provided, attach targetRef to the trigger element's ref prop\n ref: positioningOptions.target === undefined ? childTargetRef : child?.ref,\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"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"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","names":["React","mergeArrowOffset","resolvePositioningShorthand","usePositioning","useTooltipVisibility_unstable","useTooltipVisibility","useFluent_unstable","useFluent","applyTriggerPropsToChildren","resolveShorthand","useControllableState","useId","useIsomorphicLayoutEffect","useIsSSR","useMergedRefs","useTimeout","getTriggerChild","mergeCallbacks","useEventCallback","arrowHeight","tooltipBorderRadius","Escape","useTooltip_unstable","props","context","isServerSideRender","targetDocument","setDelayTimeout","clearDelayTimeout","appearance","children","content","withArrow","positioning","onVisibleChange","relationship","showDelay","hideDelay","mountNode","visible","setVisibleInternal","state","initialState","setVisible","useCallback","newVisible","ev","oldVisible","shouldRenderTooltip","components","defaultProps","role","required","id","positioningOptions","enabled","arrowPadding","position","align","offset","targetRef","containerRef","arrowRef","ref","thisTooltip","hide","visibleTooltip","onDocumentKeyDown","key","stopPropagation","addEventListener","capture","undefined","removeEventListener","ignoreNextFocusEventRef","useRef","onEnterTrigger","type","current","delay","persist","onLeaveTrigger","activeElement","target","onPointerEnter","onPointerLeave","onFocus","onBlur","child","triggerAriaProps","childTargetRef"],"sourceRoot":"../src/","sources":["packages/react-components/react-tooltip/src/components/Tooltip/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 {\n applyTriggerPropsToChildren,\n resolveShorthand,\n useControllableState,\n useId,\n useIsomorphicLayoutEffect,\n useIsSSR,\n useMergedRefs,\n useTimeout,\n getTriggerChild,\n mergeCallbacks,\n useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { TooltipProps, TooltipState, TooltipChildProps } 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 (newVisible: boolean, ev?: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n clearDelayTimeout();\n setVisibleInternal(oldVisible => {\n if (newVisible !== oldVisible) {\n onVisibleChange?.(ev, { visible: newVisible });\n }\n return newVisible;\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: resolveShorthand(content, {\n defaultProps: {\n role: 'tooltip',\n },\n required: true,\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 = { hide: () => setVisible(false) };\n\n context.visibleTooltip?.hide();\n context.visibleTooltip = thisTooltip;\n\n const onDocumentKeyDown = (ev: KeyboardEvent) => {\n if (ev.key === Escape) {\n thisTooltip.hide();\n // stop propagation to avoid conflicting with other elements that listen for `Escape`\n // e,g: Dialog, Popover, Menu\n ev.stopPropagation();\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 // 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 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(true, ev);\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 // 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 ignoreNextFocusEventRef.current = targetDocument?.activeElement === ev.target;\n }\n\n setDelayTimeout(() => {\n setVisible(false, ev);\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 const childTargetRef = useMergedRefs(child?.ref, targetRef);\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 // If the target prop is not provided, attach targetRef to the trigger element's ref prop\n ref: positioningOptions.target === undefined ? childTargetRef : child?.ref,\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"]}
@@ -8,86 +8,83 @@ export const tooltipClassNames = {
8
8
  /**
9
9
  * Styles for the tooltip
10
10
  */
11
-
12
11
  const useStyles = /*#__PURE__*/__styles({
13
- "root": {
14
- "mc9l5x": "fjseox",
15
- "B7ck84d": "f1ewtqcl",
16
- "B2u0y6b": "f132xexn",
17
- "Bceei9c": "f158kwzp",
18
- "Bahqtrf": "fk6fouc",
19
- "Be2twd7": "fy9rknc",
20
- "Bg96gwp": "fwrc4pm",
21
- "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
22
- "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
23
- "B7oj6ja": ["f1jar5jt", "fyu767a"],
24
- "Btl43ni": ["fyu767a", "f1jar5jt"],
25
- "B4j52fo": "f5ogflp",
26
- "Bekrc4i": ["f1hqa2wf", "finvdd3"],
27
- "Bn0qgzm": "f1f09k3d",
28
- "ibv6hh": ["finvdd3", "f1hqa2wf"],
29
- "icvyot": "fzkkow9",
30
- "vrafjx": ["fcdblym", "fjik90z"],
31
- "oivjwe": "fg706s2",
32
- "wvpqe5": ["fjik90z", "fcdblym"],
33
- "g2u3we": "fghlq4f",
34
- "h3c5rm": ["f1gn591s", "fjscplz"],
35
- "B9xav0g": "fb073pr",
36
- "zhjwy3": ["fjscplz", "f1gn591s"],
37
- "z8tnut": "f10ra9hq",
38
- "z189sj": ["fd9xhir", "f1jlaasf"],
39
- "Byoj8tv": "f1d7kygh",
40
- "uwmqm3": ["f1jlaasf", "fd9xhir"],
41
- "De3pzq": "fxugw4r",
42
- "sj55zd": "f19n0e5",
43
- "Bhu2qc9": "fxeb0a7"
12
+ root: {
13
+ mc9l5x: "fjseox",
14
+ B7ck84d: "f1ewtqcl",
15
+ B2u0y6b: "f132xexn",
16
+ Bceei9c: "f158kwzp",
17
+ Bahqtrf: "fk6fouc",
18
+ Be2twd7: "fy9rknc",
19
+ Bg96gwp: "fwrc4pm",
20
+ Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
21
+ Beyfa6y: ["f16jpd5f", "f1aa9q02"],
22
+ B7oj6ja: ["f1jar5jt", "fyu767a"],
23
+ Btl43ni: ["fyu767a", "f1jar5jt"],
24
+ B4j52fo: "f5ogflp",
25
+ Bekrc4i: ["f1hqa2wf", "finvdd3"],
26
+ Bn0qgzm: "f1f09k3d",
27
+ ibv6hh: ["finvdd3", "f1hqa2wf"],
28
+ icvyot: "fzkkow9",
29
+ vrafjx: ["fcdblym", "fjik90z"],
30
+ oivjwe: "fg706s2",
31
+ wvpqe5: ["fjik90z", "fcdblym"],
32
+ g2u3we: "fghlq4f",
33
+ h3c5rm: ["f1gn591s", "fjscplz"],
34
+ B9xav0g: "fb073pr",
35
+ zhjwy3: ["fjscplz", "f1gn591s"],
36
+ z8tnut: "f10ra9hq",
37
+ z189sj: ["fd9xhir", "f1jlaasf"],
38
+ Byoj8tv: "f1d7kygh",
39
+ uwmqm3: ["f1jlaasf", "fd9xhir"],
40
+ De3pzq: "fxugw4r",
41
+ sj55zd: "f19n0e5",
42
+ Bhu2qc9: "fxeb0a7"
44
43
  },
45
- "visible": {
46
- "mc9l5x": "ftgm304"
44
+ visible: {
45
+ mc9l5x: "ftgm304"
47
46
  },
48
- "inverted": {
49
- "De3pzq": "fg3r6xk",
50
- "sj55zd": "fonrgv7"
47
+ inverted: {
48
+ De3pzq: "fg3r6xk",
49
+ sj55zd: "fonrgv7"
51
50
  },
52
- "arrow": {
53
- "qhf8xq": "f1euv43f",
54
- "De3pzq": "f1u2r49w",
55
- "Bcdw1i0": "fd7fpy0",
56
- "Bj3rh1h": "f1bsuimh",
57
- "a9b677": "f1ekdpwm",
58
- "Bqenvij": "f83vc9z",
59
- "Ftih45": "f1wl9k8s",
60
- "B1puzpu": "f1wkw4r9",
61
- "Brfgrao": "f1j7ml58",
62
- "Bcvre1j": "fyl8oag",
63
- "Ccq8qp": "frdoeuz",
64
- "Baz25je": "fb81m9q",
65
- "cmx5o7": "f1ljr5q2",
66
- "B4f6apu": "fyfemzf",
67
- "m598lv": "focyt6c",
68
- "Bk5zm6e": "fnhxbxj",
69
- "y0oebl": "fdw6hkg",
70
- "qa3bma": "f11yjt3y",
71
- "Bqjgrrk": "f1172wan",
72
- "Budzafs": ["f9e5op9", "f112wvtl"],
73
- "Hv9wc6": ["ftj5xct", "fyavhwi"],
74
- "hl6cv3": "f1773hnp",
75
- "Bh2vraf": "f1n8855c",
76
- "yayu3t": "f1v7783n",
77
- "wedwtw": "fsw6im5",
78
- "rhl9o9": "fh2hsk5",
79
- "Bu8t5uz": "f159pzir",
80
- "B6q6orb": "f11yvu4",
81
- "Bwwlvwl": "fm1ycve"
51
+ arrow: {
52
+ qhf8xq: "f1euv43f",
53
+ De3pzq: "f1u2r49w",
54
+ Bcdw1i0: "fd7fpy0",
55
+ Bj3rh1h: "f1bsuimh",
56
+ a9b677: "f1ekdpwm",
57
+ Bqenvij: "f83vc9z",
58
+ Ftih45: "f1wl9k8s",
59
+ B1puzpu: "f1wkw4r9",
60
+ Brfgrao: "f1j7ml58",
61
+ Bcvre1j: "fyl8oag",
62
+ Ccq8qp: "frdoeuz",
63
+ Baz25je: "fb81m9q",
64
+ cmx5o7: "f1ljr5q2",
65
+ B4f6apu: "fyfemzf",
66
+ m598lv: "focyt6c",
67
+ Bk5zm6e: "fnhxbxj",
68
+ y0oebl: "fdw6hkg",
69
+ qa3bma: "f11yjt3y",
70
+ Bqjgrrk: "f1172wan",
71
+ Budzafs: ["f9e5op9", "f112wvtl"],
72
+ Hv9wc6: ["ftj5xct", "fyavhwi"],
73
+ hl6cv3: "f1773hnp",
74
+ Bh2vraf: "f1n8855c",
75
+ yayu3t: "f1v7783n",
76
+ wedwtw: "fsw6im5",
77
+ rhl9o9: "fh2hsk5",
78
+ Bu8t5uz: "f159pzir",
79
+ B6q6orb: "f11yvu4",
80
+ Bwwlvwl: "fm1ycve"
82
81
  }
83
82
  }, {
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);}", ".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{-webkit-filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey));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);}", ".ftj5xct::before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);}", ".fyavhwi::before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);}", "[data-popper-placement^=\"top\"] .f1773hnp{bottom:-1px;}", "[data-popper-placement^=\"top\"] .f1n8855c{--angle:0;}", "[data-popper-placement^=\"right\"] .f1v7783n{left:-1px;}", "[data-popper-placement^=\"right\"] .fsw6im5{--angle:90deg;}", "[data-popper-placement^=\"bottom\"] .fh2hsk5{top:-1px;}", "[data-popper-placement^=\"bottom\"] .f159pzir{--angle:180deg;}", "[data-popper-placement^=\"left\"] .f11yvu4{right:-1px;}", "[data-popper-placement^=\"left\"] .fm1ycve{--angle:270deg;}"]
83
+ 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);}", ".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{-webkit-filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey));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);}", ".ftj5xct::before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(45deg);}", ".fyavhwi::before{-webkit-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);-moz-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);-ms-transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);transform:rotate(var(--angle)) translate(0, 50%) rotate(-45deg);}", "[data-popper-placement^=\"top\"] .f1773hnp{bottom:-1px;}", "[data-popper-placement^=\"top\"] .f1n8855c{--angle:0;}", "[data-popper-placement^=\"right\"] .f1v7783n{left:-1px;}", "[data-popper-placement^=\"right\"] .fsw6im5{--angle:90deg;}", "[data-popper-placement^=\"bottom\"] .fh2hsk5{top:-1px;}", "[data-popper-placement^=\"bottom\"] .f159pzir{--angle:180deg;}", "[data-popper-placement^=\"left\"] .f11yvu4{right:-1px;}", "[data-popper-placement^=\"left\"] .fm1ycve{--angle:270deg;}"]
85
84
  });
86
85
  /**
87
86
  * Apply styling to the Tooltip slots based on the state
88
87
  */
89
-
90
-
91
88
  export const useTooltipStyles_unstable = state => {
92
89
  const styles = useStyles();
93
90
  state.content.className = mergeClasses(tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);