@fluentui/react-tooltip 9.0.0-nightly.46b9ea7036.0 → 9.0.0-rc.1

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 (50) hide show
  1. package/CHANGELOG.json +359 -28
  2. package/CHANGELOG.md +89 -20
  3. package/dist/react-tooltip.d.ts +30 -47
  4. package/lib/components/Tooltip/Tooltip.d.ts +3 -2
  5. package/lib/components/Tooltip/Tooltip.js +9 -9
  6. package/lib/components/Tooltip/Tooltip.js.map +1 -1
  7. package/lib/components/Tooltip/Tooltip.types.d.ts +22 -38
  8. package/lib/components/Tooltip/index.d.ts +1 -1
  9. package/lib/components/Tooltip/index.js +1 -1
  10. package/lib/components/Tooltip/index.js.map +1 -1
  11. package/lib/components/Tooltip/private/constants.d.ts +12 -0
  12. package/lib/components/Tooltip/private/constants.js +14 -0
  13. package/lib/components/Tooltip/private/constants.js.map +1 -0
  14. package/lib/components/Tooltip/renderTooltip.d.ts +1 -1
  15. package/lib/components/Tooltip/renderTooltip.js +8 -8
  16. package/lib/components/Tooltip/renderTooltip.js.map +1 -1
  17. package/lib/components/Tooltip/useTooltip.d.ts +3 -6
  18. package/lib/components/Tooltip/useTooltip.js +97 -119
  19. package/lib/components/Tooltip/useTooltip.js.map +1 -1
  20. package/lib/components/Tooltip/useTooltipStyles.d.ts +2 -1
  21. package/lib/components/Tooltip/useTooltipStyles.js +50 -23
  22. package/lib/components/Tooltip/useTooltipStyles.js.map +1 -1
  23. package/lib-commonjs/Tooltip.js +1 -1
  24. package/lib-commonjs/components/Tooltip/Tooltip.d.ts +3 -2
  25. package/lib-commonjs/components/Tooltip/Tooltip.js +11 -10
  26. package/lib-commonjs/components/Tooltip/Tooltip.js.map +1 -1
  27. package/lib-commonjs/components/Tooltip/Tooltip.types.d.ts +22 -38
  28. package/lib-commonjs/components/Tooltip/index.d.ts +1 -1
  29. package/lib-commonjs/components/Tooltip/index.js +2 -10
  30. package/lib-commonjs/components/Tooltip/index.js.map +1 -1
  31. package/lib-commonjs/components/Tooltip/private/constants.d.ts +12 -0
  32. package/lib-commonjs/components/Tooltip/private/constants.js +21 -0
  33. package/lib-commonjs/components/Tooltip/private/constants.js.map +1 -0
  34. package/lib-commonjs/components/Tooltip/renderTooltip.d.ts +1 -1
  35. package/lib-commonjs/components/Tooltip/renderTooltip.js +13 -14
  36. package/lib-commonjs/components/Tooltip/renderTooltip.js.map +1 -1
  37. package/lib-commonjs/components/Tooltip/useTooltip.d.ts +3 -6
  38. package/lib-commonjs/components/Tooltip/useTooltip.js +105 -127
  39. package/lib-commonjs/components/Tooltip/useTooltip.js.map +1 -1
  40. package/lib-commonjs/components/Tooltip/useTooltipStyles.d.ts +2 -1
  41. package/lib-commonjs/components/Tooltip/useTooltipStyles.js +56 -26
  42. package/lib-commonjs/components/Tooltip/useTooltipStyles.js.map +1 -1
  43. package/lib-commonjs/index.js +1 -1
  44. package/package.json +12 -14
  45. package/lib/common/isConformant.d.ts +0 -4
  46. package/lib/common/isConformant.js +0 -11
  47. package/lib/common/isConformant.js.map +0 -1
  48. package/lib-commonjs/common/isConformant.d.ts +0 -4
  49. package/lib-commonjs/common/isConformant.js +0 -22
  50. package/lib-commonjs/common/isConformant.js.map +0 -1
@@ -1,41 +1,24 @@
1
1
  import * as React from 'react';
2
2
  import type { PositioningShorthand } from '@fluentui/react-positioning';
3
- import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
3
+ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
4
4
  /**
5
5
  * Slot properties for Tooltip
6
6
  */
7
7
  export declare type TooltipSlots = {
8
- root: Omit<IntrinsicShorthandProps<'div'>, 'children'> & {
9
- /**
10
- * The child is the element that triggers the Tooltip. It will have additional properties added,
11
- * including events and aria properties.
12
- * Alternatively, children can be a render function that takes the props and adds
13
- * them to the appropriate elements.
14
- */
15
- children?: (React.ReactElement<React.HTMLAttributes<HTMLElement>> & {
16
- ref?: React.Ref<unknown>;
17
- }) | ((props: TooltipTriggerProps) => React.ReactNode) | null;
18
- };
8
+ content: NonNullable<Slot<'div'>>;
19
9
  };
20
10
  /**
21
11
  * Properties and state for Tooltip
22
12
  */
23
- export declare type TooltipCommons = {
13
+ declare type TooltipCommons = {
24
14
  /**
25
- * A tooltip can appear with the default appearance or inverted.
26
- * When not specified, the default appearance is used.
27
- */
28
- appearance?: 'inverted';
29
- /**
30
- * The content displayed inside the tooltip.
31
- */
32
- content: React.ReactNode;
33
- /**
34
- * Color variant with inverted colors
15
+ * The tooltip's visual appearance.
16
+ * * `normal` - Uses the theme's background and text colors.
17
+ * * `inverted` - Higher contrast variant that uses the theme's inverted colors.
35
18
  *
36
- * @defaultvalue false
19
+ * @defaultvalue normal
37
20
  */
38
- inverted?: boolean;
21
+ appearance?: 'normal' | 'inverted';
39
22
  /**
40
23
  * Render an arrow pointing to the target element
41
24
  *
@@ -62,15 +45,15 @@ export declare type TooltipCommons = {
62
45
  */
63
46
  onVisibleChange?: (event: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => void;
64
47
  /**
65
- * Specifies which aria attribute to set on the trigger element.
66
- * * `label` - Set aria-label to the tooltip's content. Requires content to be a string; if not, uses `labelledby`.
67
- * * `labelledby` - Set aria-labelledby to the tooltip's id. The id is generated if not provided.
68
- * * `describedby` - Set aria-describedby to the tooltip's id. The id is generated if not provided.
69
- * * null - Do not set any aria attributes on the trigger element.
48
+ * (Required) Specifies whether this tooltip is acting as the description or label of its trigger element.
70
49
  *
71
- * @defaultvalue label
50
+ * * `label` - The tooltip sets the trigger's aria-label or aria-labelledby attribute. This is useful for buttons
51
+ * displaying only an icon, for example.
52
+ * * `description` - The tooltip sets the trigger's aria-description or aria-describedby attribute.
53
+ * * `inaccessible` - No aria attributes are set on the trigger. This makes the tooltip's content inaccessible to
54
+ * screen readers, and should only be used if the tooltip's text is available by some other means.
72
55
  */
73
- triggerAriaAttribute: 'label' | 'labelledby' | 'describedby' | null;
56
+ relationship: 'label' | 'description' | 'inaccessible';
74
57
  /**
75
58
  * Delay before the tooltip is shown, in milliseconds.
76
59
  *
@@ -99,18 +82,18 @@ export declare type OnVisibleChangeData = {
99
82
  /**
100
83
  * Properties for Tooltip
101
84
  */
102
- export declare type TooltipProps = ComponentProps<TooltipSlots> & Partial<Omit<TooltipCommons, 'content'>> & Pick<TooltipCommons, 'content'>;
85
+ export declare type TooltipProps = ComponentProps<TooltipSlots> & Partial<Omit<TooltipCommons, 'relationship'>> & Pick<TooltipCommons, 'relationship'> & {
86
+ children?: (React.ReactElement & {
87
+ ref?: React.Ref<unknown>;
88
+ }) | ((props: TooltipTriggerProps) => React.ReactElement | null) | null;
89
+ };
103
90
  /**
104
91
  * State used in rendering Tooltip
105
92
  */
106
93
  export declare type TooltipState = ComponentState<TooltipSlots> & TooltipCommons & {
94
+ children?: React.ReactElement | null;
107
95
  /**
108
96
  * Whether the tooltip should be rendered to the DOM.
109
- *
110
- * Normally the tooltip will only be rendered when visible. However, if
111
- * triggerAriaAttribute is labelledby or describedby, the tooltip will
112
- * always be rendered even when hidden so that those aria attributes
113
- * to always refer to a valid DOM element.
114
97
  */
115
98
  shouldRenderTooltip?: boolean;
116
99
  /**
@@ -122,3 +105,4 @@ export declare type TooltipState = ComponentState<TooltipSlots> & TooltipCommons
122
105
  */
123
106
  arrowClassName?: string;
124
107
  };
108
+ export {};
@@ -2,4 +2,4 @@ export * from './Tooltip';
2
2
  export * from './Tooltip.types';
3
3
  export * from './renderTooltip';
4
4
  export * from './useTooltip';
5
- export { useTooltipStyles } from './useTooltipStyles';
5
+ export * from './useTooltipStyles';
@@ -3,9 +3,8 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useTooltipStyles = void 0;
7
6
 
8
- var tslib_1 = /*#__PURE__*/require("tslib");
7
+ const tslib_1 = /*#__PURE__*/require("tslib");
9
8
 
10
9
  tslib_1.__exportStar(require("./Tooltip"), exports);
11
10
 
@@ -15,12 +14,5 @@ tslib_1.__exportStar(require("./renderTooltip"), exports);
15
14
 
16
15
  tslib_1.__exportStar(require("./useTooltip"), exports);
17
16
 
18
- var useTooltipStyles_1 = /*#__PURE__*/require("./useTooltipStyles");
19
-
20
- Object.defineProperty(exports, "useTooltipStyles", {
21
- enumerable: true,
22
- get: function () {
23
- return useTooltipStyles_1.useTooltipStyles;
24
- }
25
- });
17
+ tslib_1.__exportStar(require("./useTooltipStyles"), exports);
26
18
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Tooltip/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,IAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,kBAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/Tooltip/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourceRoot":""}
@@ -0,0 +1,12 @@
1
+ /**
2
+ * The height of the tooltip's arrow in pixels.
3
+ */
4
+ export declare const arrowHeight = 6;
5
+ /**
6
+ * The default value of the tooltip's border radius (borderRadiusMedium).
7
+ *
8
+ * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.
9
+ * While we could use getComputedStyle, that adds a performance penalty for something that
10
+ * will likely never change.
11
+ */
12
+ export declare const tooltipBorderRadius = 4;
@@ -0,0 +1,21 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.tooltipBorderRadius = exports.arrowHeight = void 0;
7
+ /**
8
+ * The height of the tooltip's arrow in pixels.
9
+ */
10
+
11
+ exports.arrowHeight = 6;
12
+ /**
13
+ * The default value of the tooltip's border radius (borderRadiusMedium).
14
+ *
15
+ * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.
16
+ * While we could use getComputedStyle, that adds a performance penalty for something that
17
+ * will likely never change.
18
+ */
19
+
20
+ exports.tooltipBorderRadius = 4;
21
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../../src/components/Tooltip/private/constants.ts"],"names":[],"mappings":";;;;;;AAAA;;AAEG;;AACU,OAAA,CAAA,WAAA,GAAc,CAAd;AAEb;;;;;;AAMG;;AACU,OAAA,CAAA,mBAAA,GAAsB,CAAtB","sourceRoot":""}
@@ -2,4 +2,4 @@ import type { TooltipState } from './Tooltip.types';
2
2
  /**
3
3
  * Render the final JSX of Tooltip
4
4
  */
5
- export declare const renderTooltip: (state: TooltipState) => JSX.Element;
5
+ export declare const renderTooltip_unstable: (state: TooltipState) => JSX.Element;
@@ -3,30 +3,29 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.renderTooltip = void 0;
6
+ exports.renderTooltip_unstable = void 0;
7
7
 
8
- var tslib_1 = /*#__PURE__*/require("tslib");
8
+ const React = /*#__PURE__*/require("react");
9
9
 
10
- var React = /*#__PURE__*/require("react");
10
+ const react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
11
11
 
12
- var react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
13
-
14
- var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
12
+ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
15
13
  /**
16
14
  * Render the final JSX of Tooltip
17
15
  */
18
16
 
19
17
 
20
- var renderTooltip = function (state) {
21
- var _a = react_utilities_1.getSlots(state, ['root']),
22
- slots = _a.slots,
23
- slotProps = _a.slotProps;
24
-
25
- return React.createElement(React.Fragment, null, state.root.children, state.shouldRenderTooltip && React.createElement(react_portal_1.Portal, null, React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), state.withArrow && React.createElement("div", {
18
+ const renderTooltip_unstable = state => {
19
+ const {
20
+ slots,
21
+ slotProps
22
+ } = react_utilities_1.getSlots(state);
23
+ return React.createElement(React.Fragment, null, state.children, state.shouldRenderTooltip && React.createElement(react_portal_1.Portal, null, React.createElement(slots.content, { ...slotProps.content
24
+ }, state.withArrow && React.createElement("div", {
26
25
  ref: state.arrowRef,
27
26
  className: state.arrowClassName
28
- }), state.content)));
27
+ }), state.content.children)));
29
28
  };
30
29
 
31
- exports.renderTooltip = renderTooltip;
30
+ exports.renderTooltip_unstable = renderTooltip_unstable;
32
31
  //# sourceMappingURL=renderTooltip.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Tooltip/renderTooltip.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,aAAa,GAAG,UAAC,KAAD,EAAoB;AACzC,MAAA,EAAA,GAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,EAA8B,CAAC,MAAD,CAA9B,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,SACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEG,KAAK,CAAC,mBAAN,IACC,KAAA,CAAA,aAAA,CAAC,cAAA,CAAA,MAAD,EAAO,IAAP,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,SAAN,IAAmB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,GAAG,EAAE,KAAK,CAAC,QAAhB;AAA0B,IAAA,SAAS,EAAE,KAAK,CAAC;AAA3C,GAAA,CADtB,EAEG,KAAK,CAAC,OAFT,CADF,CAHJ,CADF;AAaD,CAhBM;;AAAM,OAAA,CAAA,aAAA,GAAa,aAAb","sourceRoot":""}
1
+ {"version":3,"sources":["../../../src/components/Tooltip/renderTooltip.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,KAAK,CAAC,QADT,EAEG,KAAK,CAAC,mBAAN,IACC,KAAA,CAAA,aAAA,CAAC,cAAA,CAAA,MAAD,EAAO,IAAP,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,EACG,KAAK,CAAC,SAAN,IAAmB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,GAAG,EAAE,KAAK,CAAC,QAAhB;AAA0B,IAAA,SAAS,EAAE,KAAK,CAAC;AAA3C,GAAA,CADtB,EAEG,KAAK,CAAC,OAAN,CAAc,QAFjB,CADF,CAHJ,CADF;AAaD,CAhBM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","sourceRoot":""}
@@ -1,13 +1,10 @@
1
- import * as React from 'react';
2
1
  import type { TooltipProps, TooltipState } from './Tooltip.types';
3
2
  /**
4
3
  * Create the state required to render Tooltip.
5
4
  *
6
- * The returned state can be modified with hooks such as useTooltipStyles,
7
- * before being passed to renderTooltip.
5
+ * The returned state can be modified with hooks such as useTooltipStyles_unstable,
6
+ * before being passed to renderTooltip_unstable.
8
7
  *
9
8
  * @param props - props from this instance of Tooltip
10
- * @param ref - reference to root HTMLElement of Tooltip
11
- * @param defaultProps - (optional) default prop values provided by the implementing type
12
9
  */
13
- export declare const useTooltip: (props: TooltipProps, ref: React.Ref<HTMLDivElement>) => TooltipState;
10
+ export declare const useTooltip_unstable: (props: TooltipProps) => TooltipState;
@@ -3,67 +3,54 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useTooltip = void 0;
6
+ exports.useTooltip_unstable = void 0;
7
7
 
8
- var tslib_1 = /*#__PURE__*/require("tslib");
8
+ const React = /*#__PURE__*/require("react");
9
9
 
10
- var React = /*#__PURE__*/require("react");
10
+ const react_positioning_1 = /*#__PURE__*/require("@fluentui/react-positioning");
11
11
 
12
- var react_positioning_1 = /*#__PURE__*/require("@fluentui/react-positioning");
12
+ const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
13
13
 
14
- var react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
15
-
16
- var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities"); // Style values that are required for popper to properly position the tooltip
17
-
18
-
19
- var tooltipBorderRadius = 4; // Update the root's borderRadius in useTooltipStyles.ts if this changes
20
-
21
- var arrowHeight = 6; // Update the arrow's width/height in useTooltipStyles.ts if this changes
14
+ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
22
15
 
16
+ const constants_1 = /*#__PURE__*/require("./private/constants");
23
17
  /**
24
18
  * Create the state required to render Tooltip.
25
19
  *
26
- * The returned state can be modified with hooks such as useTooltipStyles,
27
- * before being passed to renderTooltip.
20
+ * The returned state can be modified with hooks such as useTooltipStyles_unstable,
21
+ * before being passed to renderTooltip_unstable.
28
22
  *
29
23
  * @param props - props from this instance of Tooltip
30
- * @param ref - reference to root HTMLElement of Tooltip
31
- * @param defaultProps - (optional) default prop values provided by the implementing type
32
24
  */
33
25
 
34
- var useTooltip = function (props, ref) {
26
+
27
+ const useTooltip_unstable = props => {
35
28
  var _a, _b, _c, _d;
36
29
 
37
- var context = React.useContext(react_shared_contexts_1.TooltipContext);
38
- var isServerSideRender = react_utilities_1.useIsSSR();
39
- var targetDocument = react_shared_contexts_1.useFluent().targetDocument;
40
-
41
- var _e = react_utilities_1.useTimeout(),
42
- setDelayTimeout = _e[0],
43
- clearDelayTimeout = _e[1];
44
-
45
- var content = props.content,
46
- inverted = props.inverted,
47
- withArrow = props.withArrow,
48
- positioning = props.positioning,
49
- onVisibleChange = props.onVisibleChange,
50
- _f = props.triggerAriaAttribute,
51
- triggerAriaAttribute = _f === void 0 ? 'label' : _f,
52
- _g = props.showDelay,
53
- showDelay = _g === void 0 ? 250 : _g,
54
- _h = props.hideDelay,
55
- hideDelay = _h === void 0 ? 250 : _h;
56
-
57
- var _j = react_utilities_1.useControllableState({
30
+ const context = React.useContext(react_shared_contexts_1.TooltipContext);
31
+ const isServerSideRender = react_utilities_1.useIsSSR();
32
+ const {
33
+ targetDocument
34
+ } = react_shared_contexts_1.useFluent();
35
+ const [setDelayTimeout, clearDelayTimeout] = react_utilities_1.useTimeout();
36
+ const {
37
+ appearance,
38
+ children,
39
+ content,
40
+ withArrow,
41
+ positioning,
42
+ onVisibleChange,
43
+ relationship,
44
+ showDelay = 250,
45
+ hideDelay = 250
46
+ } = props;
47
+ const [visible, setVisibleInternal] = react_utilities_1.useControllableState({
58
48
  state: props.visible,
59
49
  initialState: false
60
- }),
61
- visible = _j[0],
62
- setVisibleInternal = _j[1];
63
-
64
- var setVisible = React.useCallback(function (newVisible, ev) {
50
+ });
51
+ const setVisible = React.useCallback((newVisible, ev) => {
65
52
  clearDelayTimeout();
66
- setVisibleInternal(function (oldVisible) {
53
+ setVisibleInternal(oldVisible => {
67
54
  if (newVisible !== oldVisible) {
68
55
  onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(ev, {
69
56
  visible: newVisible
@@ -73,76 +60,73 @@ var useTooltip = function (props, ref) {
73
60
  return newVisible;
74
61
  });
75
62
  }, [clearDelayTimeout, setVisibleInternal, onVisibleChange]);
76
- var state = {
77
- content: content,
78
- inverted: inverted,
79
- withArrow: withArrow,
80
- positioning: positioning,
81
- showDelay: showDelay,
82
- hideDelay: hideDelay,
83
- triggerAriaAttribute: triggerAriaAttribute,
84
- visible: visible,
63
+ const state = {
64
+ withArrow,
65
+ positioning,
66
+ showDelay,
67
+ hideDelay,
68
+ relationship,
69
+ visible,
85
70
  shouldRenderTooltip: visible,
86
- appearance: props.appearance,
71
+ appearance,
87
72
  // Slots
88
73
  components: {
89
- root: 'div'
74
+ content: 'div'
90
75
  },
91
- root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign({
92
- role: 'tooltip'
93
- }, props), {
94
- ref: ref,
95
- id: react_utilities_1.useId('tooltip-', props.id)
96
- }))
76
+ content: react_utilities_1.resolveShorthand(content, {
77
+ defaultProps: {
78
+ role: 'tooltip'
79
+ },
80
+ required: true
81
+ })
97
82
  };
98
-
99
- var popperOptions = tslib_1.__assign({
83
+ state.content.id = react_utilities_1.useId('tooltip-', state.content.id);
84
+ const popperOptions = {
100
85
  enabled: state.visible,
101
- arrowPadding: 2 * tooltipBorderRadius,
86
+ arrowPadding: 2 * constants_1.tooltipBorderRadius,
102
87
  position: 'above',
103
88
  align: 'center',
104
- offset: [0, 4]
105
- }, react_positioning_1.resolvePositioningShorthand(state.positioning));
89
+ offset: [0, 4],
90
+ ...react_positioning_1.resolvePositioningShorthand(state.positioning)
91
+ };
106
92
 
107
93
  if (state.withArrow) {
108
- popperOptions.offset = react_positioning_1.mergeArrowOffset(popperOptions.offset, arrowHeight);
94
+ popperOptions.offset = react_positioning_1.mergeArrowOffset(popperOptions.offset, constants_1.arrowHeight);
109
95
  }
110
96
 
111
- var _k = react_positioning_1.usePopper(popperOptions),
112
- targetRef = _k.targetRef,
113
- containerRef = _k.containerRef,
114
- arrowRef = _k.arrowRef;
115
-
116
- state.root.ref = react_utilities_1.useMergedRefs(state.root.ref, containerRef);
97
+ const {
98
+ targetRef,
99
+ containerRef,
100
+ arrowRef
101
+ } = react_positioning_1.usePopper(popperOptions);
102
+ state.content.ref = react_utilities_1.useMergedRefs(state.content.ref, containerRef);
117
103
  state.arrowRef = arrowRef; // When this tooltip is visible, hide any other tooltips, and register it
118
104
  // as the visibleTooltip with the TooltipContext.
119
105
  // Also add a listener on document to hide the tooltip if Escape is pressed
120
106
 
121
- react_utilities_1.useIsomorphicLayoutEffect(function () {
107
+ react_utilities_1.useIsomorphicLayoutEffect(() => {
122
108
  var _a;
123
109
 
124
110
  if (visible) {
125
- var thisTooltip_1 = {
126
- hide: function () {
127
- return setVisible(false);
128
- }
111
+ const thisTooltip = {
112
+ hide: () => setVisible(false)
129
113
  };
130
114
  (_a = context.visibleTooltip) === null || _a === void 0 ? void 0 : _a.hide();
131
- context.visibleTooltip = thisTooltip_1;
115
+ context.visibleTooltip = thisTooltip;
132
116
 
133
- var onDocumentKeyDown_1 = function (ev) {
117
+ const onDocumentKeyDown = ev => {
134
118
  if (ev.key === 'Escape' || ev.key === 'Esc') {
135
- thisTooltip_1.hide();
119
+ thisTooltip.hide();
136
120
  }
137
121
  };
138
122
 
139
- targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown_1);
140
- return function () {
141
- if (context.visibleTooltip === thisTooltip_1) {
123
+ targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown);
124
+ return () => {
125
+ if (context.visibleTooltip === thisTooltip) {
142
126
  context.visibleTooltip = undefined;
143
127
  }
144
128
 
145
- targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown_1);
129
+ targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown);
146
130
  };
147
131
  }
148
132
  }, [context, targetDocument, visible, setVisible]); // The focused element gets a blur event when the document loses focus
@@ -151,24 +135,24 @@ var useTooltip = function (props, ref) {
151
135
  // checking if the blurred element is still the document's activeElement.
152
136
  // See https://github.com/microsoft/fluentui/issues/13541
153
137
 
154
- var ignoreNextFocusEventRef = React.useRef(false); // Listener for onPointerEnter and onFocus on the trigger element
138
+ const ignoreNextFocusEventRef = React.useRef(false); // Listener for onPointerEnter and onFocus on the trigger element
155
139
 
156
- var onEnterTrigger = React.useCallback(function (ev) {
140
+ const onEnterTrigger = React.useCallback(ev => {
157
141
  if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {
158
142
  ignoreNextFocusEventRef.current = false;
159
143
  return;
160
144
  } // Show immediately if another tooltip is already visible
161
145
 
162
146
 
163
- var delay = context.visibleTooltip ? 0 : state.showDelay;
164
- setDelayTimeout(function () {
147
+ const delay = context.visibleTooltip ? 0 : state.showDelay;
148
+ setDelayTimeout(() => {
165
149
  setVisible(true, ev);
166
150
  }, delay);
167
151
  ev.persist(); // Persist the event since the setVisible call will happen asynchronously
168
152
  }, [setDelayTimeout, setVisible, state.showDelay, context]); // Listener for onPointerLeave and onBlur on the trigger element
169
153
 
170
- var onLeaveTrigger = React.useCallback(function (ev) {
171
- var delay = state.hideDelay;
154
+ const onLeaveTrigger = React.useCallback(ev => {
155
+ let delay = state.hideDelay;
172
156
 
173
157
  if (ev.type === 'blur') {
174
158
  // Hide immediately when losing focus
@@ -176,63 +160,57 @@ var useTooltip = function (props, ref) {
176
160
  ignoreNextFocusEventRef.current = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === ev.target;
177
161
  }
178
162
 
179
- setDelayTimeout(function () {
163
+ setDelayTimeout(() => {
180
164
  setVisible(false, ev);
181
165
  }, delay);
182
166
  ev.persist(); // Persist the event since the setVisible call will happen asynchronously
183
167
  }, [setDelayTimeout, setVisible, state.hideDelay, targetDocument]); // Cancel the hide timer when the pointer enters the tooltip, and restart it when the mouse leaves.
184
168
  // This keeps the tooltip visible when the pointer is moved over it.
185
169
 
186
- state.root.onPointerEnter = useMergedCallbacks(state.root.onPointerEnter, clearDelayTimeout);
187
- state.root.onPointerLeave = useMergedCallbacks(state.root.onPointerLeave, onLeaveTrigger);
188
- var child = React.isValidElement(state.root.children) ? state.root.children : undefined; // The props to add to the trigger element (child)
170
+ state.content.onPointerEnter = react_utilities_1.useMergedEventCallbacks(state.content.onPointerEnter, clearDelayTimeout);
171
+ state.content.onPointerLeave = react_utilities_1.useMergedEventCallbacks(state.content.onPointerLeave, onLeaveTrigger);
172
+ const child = React.isValidElement(children) ? react_utilities_1.getTriggerChild(children) : undefined; // The props to add to the trigger element (child)
189
173
 
190
- var triggerProps = {
191
- onPointerEnter: useMergedCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onPointerEnter, onEnterTrigger),
192
- onPointerLeave: useMergedCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onPointerLeave, onLeaveTrigger),
193
- onFocus: useMergedCallbacks((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.onFocus, onEnterTrigger),
194
- onBlur: useMergedCallbacks((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.onBlur, onLeaveTrigger)
174
+ const triggerProps = {
175
+ onPointerEnter: react_utilities_1.useMergedEventCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onPointerEnter, onEnterTrigger),
176
+ onPointerLeave: react_utilities_1.useMergedEventCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onPointerLeave, onLeaveTrigger),
177
+ onFocus: react_utilities_1.useMergedEventCallbacks((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.onFocus, onEnterTrigger),
178
+ onBlur: react_utilities_1.useMergedEventCallbacks((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.onBlur, onLeaveTrigger)
195
179
  }; // If the target prop is not provided, attach targetRef to the trigger element's ref prop
196
180
 
197
- var childWithRef = child;
198
- var childTargetRef = react_utilities_1.useMergedRefs(childWithRef === null || childWithRef === void 0 ? void 0 : childWithRef.ref, targetRef);
181
+ const childTargetRef = react_utilities_1.useMergedRefs(child === null || child === void 0 ? void 0 : child.ref, targetRef);
199
182
 
200
183
  if (popperOptions.target === undefined) {
201
184
  triggerProps.ref = childTargetRef;
202
185
  }
203
186
 
204
- if (state.triggerAriaAttribute === 'label') {
205
- // aria-label only works if the content is a string. Otherwise, need to use labelledby.
206
- if (typeof state.content === 'string') {
207
- triggerProps['aria-label'] = state.content;
208
- } else {
209
- state.triggerAriaAttribute = 'labelledby';
187
+ if (relationship === 'label') {
188
+ const hasLabel = (child === null || child === void 0 ? void 0 : child.props) && ('aria-label' in child.props || 'aria-labelledby' in child.props);
189
+
190
+ if (!hasLabel) {
191
+ // aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.
192
+ if (typeof state.content.children === 'string') {
193
+ triggerProps['aria-label'] = state.content.children;
194
+ } else if (!isServerSideRender) {
195
+ triggerProps['aria-labelledby'] = state.content.id; // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
196
+
197
+ state.shouldRenderTooltip = true;
198
+ }
210
199
  }
211
- }
200
+ } else if (relationship === 'description') {
201
+ const hasDescription = (child === null || child === void 0 ? void 0 : child.props) && ('aria-description' in child.props || 'aria-describedby' in child.props);
212
202
 
213
- if (state.triggerAriaAttribute === 'labelledby' && !isServerSideRender) {
214
- triggerProps['aria-labelledby'] = state.root.id; // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
203
+ if (!hasDescription && !isServerSideRender) {
204
+ triggerProps['aria-describedby'] = state.content.id; // Always render the tooltip even if hidden, so that aria-describedby refers to a valid element
215
205
 
216
- state.shouldRenderTooltip = true;
217
- } else if (state.triggerAriaAttribute === 'describedby' && !isServerSideRender) {
218
- triggerProps['aria-describedby'] = state.root.id;
219
- state.shouldRenderTooltip = true;
206
+ state.shouldRenderTooltip = true;
207
+ }
220
208
  } // Apply the trigger props to the child, either by calling the render function, or cloning with the new props
221
209
 
222
210
 
223
- state.root.children = react_utilities_1.applyTriggerPropsToChildren(state.root.children, triggerProps);
211
+ state.children = react_utilities_1.applyTriggerPropsToChildren(children, triggerProps);
224
212
  return state;
225
213
  };
226
214
 
227
- exports.useTooltip = useTooltip;
228
- /**
229
- * Combine up to two event callbacks into a single function that calls them in order
230
- */
231
-
232
- var useMergedCallbacks = function (callback1, callback2) {
233
- return React.useCallback(function (ev) {
234
- callback1 === null || callback1 === void 0 ? void 0 : callback1(ev);
235
- callback2 === null || callback2 === void 0 ? void 0 : callback2(ev);
236
- }, [callback1, callback2]);
237
- };
215
+ exports.useTooltip_unstable = useTooltip_unstable;
238
216
  //# sourceMappingURL=useTooltip.js.map