@fluentui/react-tooltip 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.11

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 (63) hide show
  1. package/CHANGELOG.json +817 -23
  2. package/CHANGELOG.md +310 -110
  3. package/MIGRATION.md +51 -43
  4. package/Spec.md +201 -337
  5. package/dist/index.d.ts +152 -0
  6. package/{lib → dist}/tsdoc-metadata.json +0 -0
  7. package/lib/Tooltip.js.map +1 -1
  8. package/lib/components/Tooltip/Tooltip.js +9 -9
  9. package/lib/components/Tooltip/Tooltip.js.map +1 -1
  10. package/lib/components/Tooltip/Tooltip.types.js.map +1 -1
  11. package/lib/components/Tooltip/index.js +1 -1
  12. package/lib/components/Tooltip/index.js.map +1 -1
  13. package/lib/components/Tooltip/private/constants.js +14 -0
  14. package/lib/components/Tooltip/private/constants.js.map +1 -0
  15. package/lib/components/Tooltip/renderTooltip.js +10 -8
  16. package/lib/components/Tooltip/renderTooltip.js.map +1 -1
  17. package/lib/components/Tooltip/useTooltip.js +100 -129
  18. package/lib/components/Tooltip/useTooltip.js.map +1 -1
  19. package/lib/components/Tooltip/useTooltipStyles.js +52 -23
  20. package/lib/components/Tooltip/useTooltipStyles.js.map +1 -1
  21. package/lib/index.js +1 -1
  22. package/lib/index.js.map +1 -1
  23. package/lib-commonjs/Tooltip.js +1 -1
  24. package/lib-commonjs/Tooltip.js.map +1 -1
  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.js.map +1 -1
  28. package/lib-commonjs/components/Tooltip/index.js +2 -10
  29. package/lib-commonjs/components/Tooltip/index.js.map +1 -1
  30. package/lib-commonjs/components/Tooltip/private/constants.js +21 -0
  31. package/lib-commonjs/components/Tooltip/private/constants.js.map +1 -0
  32. package/lib-commonjs/components/Tooltip/renderTooltip.js +15 -14
  33. package/lib-commonjs/components/Tooltip/renderTooltip.js.map +1 -1
  34. package/lib-commonjs/components/Tooltip/useTooltip.js +106 -135
  35. package/lib-commonjs/components/Tooltip/useTooltip.js.map +1 -1
  36. package/lib-commonjs/components/Tooltip/useTooltipStyles.js +58 -26
  37. package/lib-commonjs/components/Tooltip/useTooltipStyles.js.map +1 -1
  38. package/lib-commonjs/index.js +32 -2
  39. package/lib-commonjs/index.js.map +1 -1
  40. package/package.json +21 -26
  41. package/dist/react-tooltip.d.ts +0 -162
  42. package/lib/Tooltip.d.ts +0 -1
  43. package/lib/common/isConformant.d.ts +0 -4
  44. package/lib/common/isConformant.js +0 -11
  45. package/lib/common/isConformant.js.map +0 -1
  46. package/lib/components/Tooltip/Tooltip.d.ts +0 -6
  47. package/lib/components/Tooltip/Tooltip.types.d.ts +0 -124
  48. package/lib/components/Tooltip/index.d.ts +0 -5
  49. package/lib/components/Tooltip/renderTooltip.d.ts +0 -5
  50. package/lib/components/Tooltip/useTooltip.d.ts +0 -13
  51. package/lib/components/Tooltip/useTooltipStyles.d.ts +0 -5
  52. package/lib/index.d.ts +0 -1
  53. package/lib-commonjs/Tooltip.d.ts +0 -1
  54. package/lib-commonjs/common/isConformant.d.ts +0 -4
  55. package/lib-commonjs/common/isConformant.js +0 -22
  56. package/lib-commonjs/common/isConformant.js.map +0 -1
  57. package/lib-commonjs/components/Tooltip/Tooltip.d.ts +0 -6
  58. package/lib-commonjs/components/Tooltip/Tooltip.types.d.ts +0 -124
  59. package/lib-commonjs/components/Tooltip/index.d.ts +0 -5
  60. package/lib-commonjs/components/Tooltip/renderTooltip.d.ts +0 -5
  61. package/lib-commonjs/components/Tooltip/useTooltip.d.ts +0 -13
  62. package/lib-commonjs/components/Tooltip/useTooltipStyles.d.ts +0 -5
  63. package/lib-commonjs/index.d.ts +0 -1
@@ -0,0 +1,152 @@
1
+ import type { ComponentProps } from '@fluentui/react-utilities';
2
+ import type { ComponentState } from '@fluentui/react-utilities';
3
+ import type { FluentTriggerComponent } from '@fluentui/react-utilities';
4
+ import type { PortalProps } from '@fluentui/react-portal';
5
+ import type { PositioningShorthand } from '@fluentui/react-positioning';
6
+ import * as React_2 from 'react';
7
+ import type { Slot } from '@fluentui/react-utilities';
8
+ import type { SlotClassNames } from '@fluentui/react-utilities';
9
+
10
+ /**
11
+ * Data for the Tooltip's onVisibleChange event.
12
+ */
13
+ export declare type OnVisibleChangeData = {
14
+ visible: boolean;
15
+ };
16
+
17
+ /**
18
+ * Render the final JSX of Tooltip
19
+ */
20
+ export declare const renderTooltip_unstable: (state: TooltipState) => JSX.Element;
21
+
22
+ /**
23
+ * A tooltip provides light weight contextual information on top of its target element.
24
+ */
25
+ export declare const Tooltip: React_2.FC<TooltipProps> & FluentTriggerComponent;
26
+
27
+ export declare const tooltipClassNames: SlotClassNames<TooltipSlots>;
28
+
29
+ /**
30
+ * Properties for Tooltip
31
+ */
32
+ export declare type TooltipProps = ComponentProps<TooltipSlots> & Pick<PortalProps, 'mountNode'> & {
33
+ /**
34
+ * The tooltip's visual appearance.
35
+ * * `normal` - Uses the theme's background and text colors.
36
+ * * `inverted` - Higher contrast variant that uses the theme's inverted colors.
37
+ *
38
+ * @default normal
39
+ */
40
+ appearance?: 'normal' | 'inverted';
41
+ /**
42
+ * The tooltip can have a single JSX child, or a render function that accepts TooltipTriggerProps.
43
+ *
44
+ * If no child is provided, the tooltip's target must be set with the `positioning` prop, and its
45
+ * visibility must be controlled with the `visible` prop.
46
+ */
47
+ children?: (React_2.ReactElement & {
48
+ ref?: React_2.Ref<unknown>;
49
+ }) | ((props: TooltipTriggerProps) => React_2.ReactElement | null) | null;
50
+ /**
51
+ * Delay before the tooltip is hidden, in milliseconds.
52
+ *
53
+ * @default 250
54
+ */
55
+ hideDelay?: number;
56
+ /**
57
+ * Notification when the visibility of the tooltip is changing
58
+ */
59
+ onVisibleChange?: (event: React_2.PointerEvent<HTMLElement> | React_2.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => void;
60
+ /**
61
+ * Configure the positioning of the tooltip
62
+ *
63
+ * @default above
64
+ */
65
+ positioning?: PositioningShorthand;
66
+ /**
67
+ * (Required) Specifies whether this tooltip is acting as the description or label of its trigger element.
68
+ *
69
+ * * `label` - The tooltip sets the trigger's aria-label or aria-labelledby attribute. This is useful for buttons
70
+ * displaying only an icon, for example.
71
+ * * `description` - The tooltip sets the trigger's aria-description or aria-describedby attribute.
72
+ * * `inaccessible` - No aria attributes are set on the trigger. This makes the tooltip's content inaccessible to
73
+ * screen readers, and should only be used if the tooltip's text is available by some other means.
74
+ */
75
+ relationship: 'label' | 'description' | 'inaccessible';
76
+ /**
77
+ * Delay before the tooltip is shown, in milliseconds.
78
+ *
79
+ * @default 250
80
+ */
81
+ showDelay?: number;
82
+ /**
83
+ * Control the tooltip's visibility programatically.
84
+ *
85
+ * This can be used in conjunction with onVisibleChange to modify the tooltip's show and hide behavior.
86
+ *
87
+ * If not provided, the visibility will be controlled by the tooltip itself, based on hover and focus events on the
88
+ * trigger (child) element.
89
+ *
90
+ * @default false
91
+ */
92
+ visible?: boolean;
93
+ /**
94
+ * Render an arrow pointing to the target element
95
+ *
96
+ * @default false
97
+ */
98
+ withArrow?: boolean;
99
+ };
100
+
101
+ /**
102
+ * Slot properties for Tooltip
103
+ */
104
+ export declare type TooltipSlots = {
105
+ /**
106
+ * The text or JSX content of the tooltip.
107
+ */
108
+ content: NonNullable<Slot<'div'>>;
109
+ };
110
+
111
+ /**
112
+ * State used in rendering Tooltip
113
+ */
114
+ export declare type TooltipState = ComponentState<TooltipSlots> & Pick<TooltipProps, 'mountNode' | 'relationship'> & Required<Pick<TooltipProps, 'appearance' | 'hideDelay' | 'positioning' | 'showDelay' | 'visible' | 'withArrow'>> & {
115
+ children?: React_2.ReactElement | null;
116
+ /**
117
+ * Whether the tooltip should be rendered to the DOM.
118
+ */
119
+ shouldRenderTooltip?: boolean;
120
+ /**
121
+ * Ref to the arrow element
122
+ */
123
+ arrowRef?: React_2.Ref<HTMLDivElement>;
124
+ /**
125
+ * CSS class for the arrow element
126
+ */
127
+ arrowClassName?: string;
128
+ };
129
+
130
+ /**
131
+ * The properties that are added to the trigger of the Tooltip
132
+ */
133
+ export declare type TooltipTriggerProps = {
134
+ ref?: React_2.Ref<never>;
135
+ } & Pick<React_2.HTMLAttributes<HTMLElement>, 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'onBlur' | 'onFocus' | 'onPointerEnter' | 'onPointerLeave'>;
136
+
137
+ /**
138
+ * Create the state required to render Tooltip.
139
+ *
140
+ * The returned state can be modified with hooks such as useTooltipStyles_unstable,
141
+ * before being passed to renderTooltip_unstable.
142
+ *
143
+ * @param props - props from this instance of Tooltip
144
+ */
145
+ export declare const useTooltip_unstable: (props: TooltipProps) => TooltipState;
146
+
147
+ /**
148
+ * Apply styling to the Tooltip slots based on the state
149
+ */
150
+ export declare const useTooltipStyles_unstable: (state: TooltipState) => TooltipState;
151
+
152
+ export { }
File without changes
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
1
+ {"version":3,"file":"Tooltip.js","sourceRoot":"../src/","sources":["Tooltip.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/Tooltip/index';\n"]}
@@ -1,15 +1,15 @@
1
- import * as React from 'react';
2
- import { useTooltip } from './useTooltip';
3
- import { renderTooltip } from './renderTooltip';
4
- import { useTooltipStyles } from './useTooltipStyles';
1
+ import { useTooltip_unstable } from './useTooltip';
2
+ import { renderTooltip_unstable } from './renderTooltip';
3
+ import { useTooltipStyles_unstable } from './useTooltipStyles';
5
4
  /**
6
5
  * A tooltip provides light weight contextual information on top of its target element.
7
6
  */
8
7
 
9
- export var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
10
- var state = useTooltip(props, ref);
11
- useTooltipStyles(state);
12
- return renderTooltip(state);
13
- });
8
+ export const Tooltip = props => {
9
+ const state = useTooltip_unstable(props);
10
+ useTooltipStyles_unstable(state);
11
+ return renderTooltip_unstable(state);
12
+ };
14
13
  Tooltip.displayName = 'Tooltip';
14
+ Tooltip.isFluentTriggerComponent = true;
15
15
  //# sourceMappingURL=Tooltip.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,UAAT,QAA2B,cAA3B;AACA,SAAS,aAAT,QAA8B,iBAA9B;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AAIA;;AAEG;;AACH,OAAO,IAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AACpF,MAAM,KAAK,GAAG,UAAU,CAAC,KAAD,EAAQ,GAAR,CAAxB;AAEA,EAAA,gBAAgB,CAAC,KAAD,CAAhB;AACA,SAAO,aAAa,CAAC,KAAD,CAApB;AACD,CALyD,CAAnD;AAOP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourceRoot":""}
1
+ {"version":3,"sources":["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,GAAoD,KAAK,IAAG;AAC9E,QAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,CAAjC;AAEA,EAAA,yBAAyB,CAAC,KAAD,CAAzB;AACA,SAAO,sBAAsB,CAAC,KAAD,CAA7B;AACD,CALM;AAOP,OAAO,CAAC,WAAR,GAAsB,SAAtB;AACA,OAAO,CAAC,wBAAR,GAAmC,IAAnC","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> & FluentTriggerComponent = props => {\n const state = useTooltip_unstable(props);\n\n useTooltipStyles_unstable(state);\n return renderTooltip_unstable(state);\n};\n\nTooltip.displayName = 'Tooltip';\nTooltip.isFluentTriggerComponent = true;\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.types.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.types.ts"],"names":[],"mappings":""}
1
+ {"version":3,"file":"Tooltip.types.js","sourceRoot":"../src/","sources":["components/Tooltip/Tooltip.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PortalProps } from '@fluentui/react-portal';\n\n/**\n * Slot properties for Tooltip\n */\nexport type TooltipSlots = {\n /**\n * The text or JSX content of the tooltip.\n */\n content: NonNullable<Slot<'div'>>;\n};\n\n/**\n * The properties that are added to the trigger of the Tooltip\n */\nexport type TooltipTriggerProps = {\n ref?: React.Ref<never>;\n} & Pick<\n React.HTMLAttributes<HTMLElement>,\n 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'onBlur' | 'onFocus' | 'onPointerEnter' | 'onPointerLeave'\n>;\n\n/**\n * Data for the Tooltip's onVisibleChange event.\n */\nexport type OnVisibleChangeData = {\n visible: boolean;\n};\n\n/**\n * Properties for Tooltip\n */\nexport type TooltipProps = ComponentProps<TooltipSlots> &\n Pick<PortalProps, 'mountNode'> & {\n /**\n * The tooltip's visual appearance.\n * * `normal` - Uses the theme's background and text colors.\n * * `inverted` - Higher contrast variant that uses the theme's inverted colors.\n *\n * @default normal\n */\n appearance?: 'normal' | 'inverted';\n\n /**\n * The tooltip can have a single JSX child, or a render function that accepts TooltipTriggerProps.\n *\n * If no child is provided, the tooltip's target must be set with the `positioning` prop, and its\n * visibility must be controlled with the `visible` prop.\n */\n children?:\n | (React.ReactElement & { ref?: React.Ref<unknown> })\n | ((props: TooltipTriggerProps) => React.ReactElement | null)\n | null;\n\n /**\n * Delay before the tooltip is hidden, in milliseconds.\n *\n * @default 250\n */\n hideDelay?: number;\n\n /**\n * Notification when the visibility of the tooltip is changing\n */\n onVisibleChange?: (\n event: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined,\n data: OnVisibleChangeData,\n ) => void;\n\n /**\n * Configure the positioning of the tooltip\n *\n * @default above\n */\n positioning?: PositioningShorthand;\n\n /**\n * (Required) Specifies whether this tooltip is acting as the description or label of its trigger element.\n *\n * * `label` - The tooltip sets the trigger's aria-label or aria-labelledby attribute. This is useful for buttons\n * displaying only an icon, for example.\n * * `description` - The tooltip sets the trigger's aria-description or aria-describedby attribute.\n * * `inaccessible` - No aria attributes are set on the trigger. This makes the tooltip's content inaccessible to\n * screen readers, and should only be used if the tooltip's text is available by some other means.\n */\n relationship: 'label' | 'description' | 'inaccessible';\n\n /**\n * Delay before the tooltip is shown, in milliseconds.\n *\n * @default 250\n */\n showDelay?: number;\n\n /**\n * Control the tooltip's visibility programatically.\n *\n * This can be used in conjunction with onVisibleChange to modify the tooltip's show and hide behavior.\n *\n * If not provided, the visibility will be controlled by the tooltip itself, based on hover and focus events on the\n * trigger (child) element.\n *\n * @default false\n */\n visible?: boolean;\n\n /**\n * Render an arrow pointing to the target element\n *\n * @default false\n */\n withArrow?: boolean;\n };\n\n/**\n * State used in rendering Tooltip\n */\nexport type TooltipState = ComponentState<TooltipSlots> &\n Pick<TooltipProps, 'mountNode' | 'relationship'> &\n Required<Pick<TooltipProps, 'appearance' | 'hideDelay' | 'positioning' | 'showDelay' | 'visible' | 'withArrow'>> & {\n children?: React.ReactElement | null;\n\n /**\n * Whether the tooltip should be rendered to the DOM.\n */\n shouldRenderTooltip?: boolean;\n\n /**\n * Ref to the arrow element\n */\n arrowRef?: React.Ref<HTMLDivElement>;\n\n /**\n * CSS class for the arrow element\n */\n arrowClassName?: string;\n };\n"]}
@@ -2,5 +2,5 @@ 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';
6
6
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './Tooltip';\nexport * from './Tooltip.types';\nexport * from './renderTooltip';\nexport * from './useTooltip';\nexport * from './useTooltipStyles';\n"]}
@@ -0,0 +1,14 @@
1
+ /**
2
+ * The height of the tooltip's arrow in pixels.
3
+ */
4
+ export 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
+
13
+ export const tooltipBorderRadius = 4;
14
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["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,4 +1,3 @@
1
- import { __assign } from "tslib";
2
1
  import * as React from 'react';
3
2
  import { Portal } from '@fluentui/react-portal';
4
3
  import { getSlots } from '@fluentui/react-utilities';
@@ -6,14 +5,17 @@ import { getSlots } from '@fluentui/react-utilities';
6
5
  * Render the final JSX of Tooltip
7
6
  */
8
7
 
9
- export var renderTooltip = function (state) {
10
- var _a = getSlots(state, ['root']),
11
- slots = _a.slots,
12
- slotProps = _a.slotProps;
13
-
14
- return /*#__PURE__*/React.createElement(React.Fragment, null, state.root.children, state.shouldRenderTooltip && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), state.withArrow && /*#__PURE__*/React.createElement("div", {
8
+ export const renderTooltip_unstable = state => {
9
+ const {
10
+ slots,
11
+ slotProps
12
+ } = getSlots(state);
13
+ return /*#__PURE__*/React.createElement(React.Fragment, null, state.children, state.shouldRenderTooltip && /*#__PURE__*/React.createElement(Portal, {
14
+ mountNode: state.mountNode
15
+ }, /*#__PURE__*/React.createElement(slots.content, { ...slotProps.content
16
+ }, state.withArrow && /*#__PURE__*/React.createElement("div", {
15
17
  ref: state.arrowRef,
16
18
  className: state.arrowClassName
17
- }), state.content)));
19
+ }), state.content.children)));
18
20
  };
19
21
  //# sourceMappingURL=renderTooltip.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../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,IAAM,aAAa,GAAG,UAAC,KAAD,EAAoB;AACzC,MAAA,EAAA,GAAuB,QAAQ,CAAe,KAAf,EAAsB,CAAC,MAAD,CAAtB,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEG,KAAK,CAAC,mBAAN,iBACC,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,IAAP,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,SAAN,iBAAmB,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","sourceRoot":""}
1
+ {"version":3,"sources":["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;AAC5D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAe,KAAf,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,KAAK,CAAC,QADT,EAEG,KAAK,CAAC,mBAAN,iBACC,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO;AAAC,IAAA,SAAS,EAAE,KAAK,CAAC;AAAlB,GAAP,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,EACG,KAAK,CAAC,SAAN,iBAAmB,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","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,57 +1,45 @@
1
- import { __assign } from "tslib";
2
1
  import * as React from 'react';
3
- import { mergeArrowOffset, resolvePositioningShorthand, usePopper } from '@fluentui/react-positioning';
2
+ import { mergeArrowOffset, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';
4
3
  import { TooltipContext, useFluent } from '@fluentui/react-shared-contexts';
5
- import { applyTriggerPropsToChildren, getNativeElementProps, useControllableState, useId, useIsomorphicLayoutEffect, useIsSSR, useMergedRefs, useTimeout } from '@fluentui/react-utilities'; // Style values that are required for popper to properly position the tooltip
6
-
7
- var tooltipBorderRadius = 4; // Update the root's borderRadius in useTooltipStyles.ts if this changes
8
-
9
- var arrowHeight = 6; // Update the arrow's width/height in useTooltipStyles.ts if this changes
10
-
4
+ import { applyTriggerPropsToChildren, resolveShorthand, useControllableState, useMergedEventCallbacks, useId, useIsomorphicLayoutEffect, useIsSSR, useMergedRefs, useTimeout, getTriggerChild } from '@fluentui/react-utilities';
5
+ import { arrowHeight, tooltipBorderRadius } from './private/constants';
11
6
  /**
12
7
  * Create the state required to render Tooltip.
13
8
  *
14
- * The returned state can be modified with hooks such as useTooltipStyles,
15
- * before being passed to renderTooltip.
9
+ * The returned state can be modified with hooks such as useTooltipStyles_unstable,
10
+ * before being passed to renderTooltip_unstable.
16
11
  *
17
12
  * @param props - props from this instance of Tooltip
18
- * @param ref - reference to root HTMLElement of Tooltip
19
- * @param defaultProps - (optional) default prop values provided by the implementing type
20
13
  */
21
14
 
22
- export var useTooltip = function (props, ref) {
15
+ export const useTooltip_unstable = props => {
23
16
  var _a, _b, _c, _d;
24
17
 
25
- var context = React.useContext(TooltipContext);
26
- var isServerSideRender = useIsSSR();
27
- var targetDocument = useFluent().targetDocument;
28
-
29
- var _e = useTimeout(),
30
- setDelayTimeout = _e[0],
31
- clearDelayTimeout = _e[1];
32
-
33
- var content = props.content,
34
- inverted = props.inverted,
35
- withArrow = props.withArrow,
36
- positioning = props.positioning,
37
- onVisibleChange = props.onVisibleChange,
38
- _f = props.triggerAriaAttribute,
39
- triggerAriaAttribute = _f === void 0 ? 'label' : _f,
40
- _g = props.showDelay,
41
- showDelay = _g === void 0 ? 250 : _g,
42
- _h = props.hideDelay,
43
- hideDelay = _h === void 0 ? 250 : _h;
44
-
45
- var _j = useControllableState({
18
+ const context = React.useContext(TooltipContext);
19
+ const isServerSideRender = useIsSSR();
20
+ const {
21
+ targetDocument
22
+ } = useFluent();
23
+ const [setDelayTimeout, clearDelayTimeout] = useTimeout();
24
+ const {
25
+ appearance = 'normal',
26
+ children,
27
+ content,
28
+ withArrow = false,
29
+ positioning = 'above',
30
+ onVisibleChange,
31
+ relationship,
32
+ showDelay = 250,
33
+ hideDelay = 250,
34
+ mountNode
35
+ } = props;
36
+ const [visible, setVisibleInternal] = useControllableState({
46
37
  state: props.visible,
47
38
  initialState: false
48
- }),
49
- visible = _j[0],
50
- setVisibleInternal = _j[1];
51
-
52
- var setVisible = React.useCallback(function (newVisible, ev) {
39
+ });
40
+ const setVisible = React.useCallback((newVisible, ev) => {
53
41
  clearDelayTimeout();
54
- setVisibleInternal(function (oldVisible) {
42
+ setVisibleInternal(oldVisible => {
55
43
  if (newVisible !== oldVisible) {
56
44
  onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(ev, {
57
45
  visible: newVisible
@@ -61,76 +49,74 @@ export var useTooltip = function (props, ref) {
61
49
  return newVisible;
62
50
  });
63
51
  }, [clearDelayTimeout, setVisibleInternal, onVisibleChange]);
64
- var state = {
65
- content: content,
66
- inverted: inverted,
67
- withArrow: withArrow,
68
- positioning: positioning,
69
- showDelay: showDelay,
70
- hideDelay: hideDelay,
71
- triggerAriaAttribute: triggerAriaAttribute,
72
- visible: visible,
52
+ const state = {
53
+ withArrow,
54
+ positioning,
55
+ showDelay,
56
+ hideDelay,
57
+ relationship,
58
+ visible,
73
59
  shouldRenderTooltip: visible,
74
- appearance: props.appearance,
60
+ appearance,
61
+ mountNode,
75
62
  // Slots
76
63
  components: {
77
- root: 'div'
64
+ content: 'div'
78
65
  },
79
- root: getNativeElementProps('div', __assign(__assign({
80
- role: 'tooltip'
81
- }, props), {
82
- ref: ref,
83
- id: useId('tooltip-', props.id)
84
- }))
66
+ content: resolveShorthand(content, {
67
+ defaultProps: {
68
+ role: 'tooltip'
69
+ },
70
+ required: true
71
+ })
85
72
  };
86
-
87
- var popperOptions = __assign({
73
+ state.content.id = useId('tooltip-', state.content.id);
74
+ const positioningOptions = {
88
75
  enabled: state.visible,
89
76
  arrowPadding: 2 * tooltipBorderRadius,
90
77
  position: 'above',
91
78
  align: 'center',
92
- offset: [0, 4]
93
- }, resolvePositioningShorthand(state.positioning));
79
+ offset: 4,
80
+ ...resolvePositioningShorthand(state.positioning)
81
+ };
94
82
 
95
83
  if (state.withArrow) {
96
- popperOptions.offset = mergeArrowOffset(popperOptions.offset, arrowHeight);
84
+ positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeight);
97
85
  }
98
86
 
99
- var _k = usePopper(popperOptions),
100
- targetRef = _k.targetRef,
101
- containerRef = _k.containerRef,
102
- arrowRef = _k.arrowRef;
103
-
104
- state.root.ref = useMergedRefs(state.root.ref, containerRef);
87
+ const {
88
+ targetRef,
89
+ containerRef,
90
+ arrowRef
91
+ } = usePositioning(positioningOptions);
92
+ state.content.ref = useMergedRefs(state.content.ref, containerRef);
105
93
  state.arrowRef = arrowRef; // When this tooltip is visible, hide any other tooltips, and register it
106
94
  // as the visibleTooltip with the TooltipContext.
107
95
  // Also add a listener on document to hide the tooltip if Escape is pressed
108
96
 
109
- useIsomorphicLayoutEffect(function () {
97
+ useIsomorphicLayoutEffect(() => {
110
98
  var _a;
111
99
 
112
100
  if (visible) {
113
- var thisTooltip_1 = {
114
- hide: function () {
115
- return setVisible(false);
116
- }
101
+ const thisTooltip = {
102
+ hide: () => setVisible(false)
117
103
  };
118
104
  (_a = context.visibleTooltip) === null || _a === void 0 ? void 0 : _a.hide();
119
- context.visibleTooltip = thisTooltip_1;
105
+ context.visibleTooltip = thisTooltip;
120
106
 
121
- var onDocumentKeyDown_1 = function (ev) {
107
+ const onDocumentKeyDown = ev => {
122
108
  if (ev.key === 'Escape' || ev.key === 'Esc') {
123
- thisTooltip_1.hide();
109
+ thisTooltip.hide();
124
110
  }
125
111
  };
126
112
 
127
- targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown_1);
128
- return function () {
129
- if (context.visibleTooltip === thisTooltip_1) {
113
+ targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown);
114
+ return () => {
115
+ if (context.visibleTooltip === thisTooltip) {
130
116
  context.visibleTooltip = undefined;
131
117
  }
132
118
 
133
- targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown_1);
119
+ targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown);
134
120
  };
135
121
  }
136
122
  }, [context, targetDocument, visible, setVisible]); // The focused element gets a blur event when the document loses focus
@@ -139,24 +125,24 @@ export var useTooltip = function (props, ref) {
139
125
  // checking if the blurred element is still the document's activeElement.
140
126
  // See https://github.com/microsoft/fluentui/issues/13541
141
127
 
142
- var ignoreNextFocusEventRef = React.useRef(false); // Listener for onPointerEnter and onFocus on the trigger element
128
+ const ignoreNextFocusEventRef = React.useRef(false); // Listener for onPointerEnter and onFocus on the trigger element
143
129
 
144
- var onEnterTrigger = React.useCallback(function (ev) {
130
+ const onEnterTrigger = React.useCallback(ev => {
145
131
  if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {
146
132
  ignoreNextFocusEventRef.current = false;
147
133
  return;
148
134
  } // Show immediately if another tooltip is already visible
149
135
 
150
136
 
151
- var delay = context.visibleTooltip ? 0 : state.showDelay;
152
- setDelayTimeout(function () {
137
+ const delay = context.visibleTooltip ? 0 : state.showDelay;
138
+ setDelayTimeout(() => {
153
139
  setVisible(true, ev);
154
140
  }, delay);
155
141
  ev.persist(); // Persist the event since the setVisible call will happen asynchronously
156
142
  }, [setDelayTimeout, setVisible, state.showDelay, context]); // Listener for onPointerLeave and onBlur on the trigger element
157
143
 
158
- var onLeaveTrigger = React.useCallback(function (ev) {
159
- var delay = state.hideDelay;
144
+ const onLeaveTrigger = React.useCallback(ev => {
145
+ let delay = state.hideDelay;
160
146
 
161
147
  if (ev.type === 'blur') {
162
148
  // Hide immediately when losing focus
@@ -164,61 +150,46 @@ export var useTooltip = function (props, ref) {
164
150
  ignoreNextFocusEventRef.current = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === ev.target;
165
151
  }
166
152
 
167
- setDelayTimeout(function () {
153
+ setDelayTimeout(() => {
168
154
  setVisible(false, ev);
169
155
  }, delay);
170
156
  ev.persist(); // Persist the event since the setVisible call will happen asynchronously
171
157
  }, [setDelayTimeout, setVisible, state.hideDelay, targetDocument]); // Cancel the hide timer when the pointer enters the tooltip, and restart it when the mouse leaves.
172
158
  // This keeps the tooltip visible when the pointer is moved over it.
173
159
 
174
- state.root.onPointerEnter = useMergedCallbacks(state.root.onPointerEnter, clearDelayTimeout);
175
- state.root.onPointerLeave = useMergedCallbacks(state.root.onPointerLeave, onLeaveTrigger);
176
- var child = /*#__PURE__*/React.isValidElement(state.root.children) ? state.root.children : undefined; // The props to add to the trigger element (child)
177
-
178
- var triggerProps = {
179
- onPointerEnter: useMergedCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onPointerEnter, onEnterTrigger),
180
- onPointerLeave: useMergedCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onPointerLeave, onLeaveTrigger),
181
- onFocus: useMergedCallbacks((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.onFocus, onEnterTrigger),
182
- onBlur: useMergedCallbacks((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.onBlur, onLeaveTrigger)
183
- }; // If the target prop is not provided, attach targetRef to the trigger element's ref prop
160
+ state.content.onPointerEnter = useMergedEventCallbacks(state.content.onPointerEnter, clearDelayTimeout);
161
+ state.content.onPointerLeave = useMergedEventCallbacks(state.content.onPointerLeave, onLeaveTrigger);
162
+ const child = /*#__PURE__*/React.isValidElement(children) ? getTriggerChild(children) : undefined;
163
+ const triggerAriaProps = {};
184
164
 
185
- var childWithRef = child;
186
- var childTargetRef = useMergedRefs(childWithRef === null || childWithRef === void 0 ? void 0 : childWithRef.ref, targetRef);
165
+ if (relationship === 'label') {
166
+ // aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.
167
+ if (typeof state.content.children === 'string') {
168
+ triggerAriaProps['aria-label'] = state.content.children;
169
+ } else if (!isServerSideRender) {
170
+ triggerAriaProps['aria-labelledby'] = state.content.id; // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
187
171
 
188
- if (popperOptions.target === undefined) {
189
- triggerProps.ref = childTargetRef;
190
- }
172
+ state.shouldRenderTooltip = true;
173
+ }
174
+ } else if (relationship === 'description') {
175
+ if (!isServerSideRender) {
176
+ triggerAriaProps['aria-describedby'] = state.content.id; // Always render the tooltip even if hidden, so that aria-describedby refers to a valid element
191
177
 
192
- if (state.triggerAriaAttribute === 'label') {
193
- // aria-label only works if the content is a string. Otherwise, need to use labelledby.
194
- if (typeof state.content === 'string') {
195
- triggerProps['aria-label'] = state.content;
196
- } else {
197
- state.triggerAriaAttribute = 'labelledby';
178
+ state.shouldRenderTooltip = true;
198
179
  }
199
180
  }
200
181
 
201
- if (state.triggerAriaAttribute === 'labelledby' && !isServerSideRender) {
202
- triggerProps['aria-labelledby'] = state.root.id; // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
203
-
204
- state.shouldRenderTooltip = true;
205
- } else if (state.triggerAriaAttribute === 'describedby' && !isServerSideRender) {
206
- triggerProps['aria-describedby'] = state.root.id;
207
- state.shouldRenderTooltip = true;
208
- } // Apply the trigger props to the child, either by calling the render function, or cloning with the new props
209
-
210
-
211
- state.root.children = applyTriggerPropsToChildren(state.root.children, triggerProps);
182
+ 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
183
+
184
+ state.children = applyTriggerPropsToChildren(children, { ...triggerAriaProps,
185
+ ...(child === null || child === void 0 ? void 0 : child.props),
186
+ // If the target prop is not provided, attach targetRef to the trigger element's ref prop
187
+ ref: positioningOptions.target === undefined ? childTargetRef : child === null || child === void 0 ? void 0 : child.ref,
188
+ onPointerEnter: useMergedEventCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onPointerEnter, onEnterTrigger),
189
+ onPointerLeave: useMergedEventCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onPointerLeave, onLeaveTrigger),
190
+ onFocus: useMergedEventCallbacks((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.onFocus, onEnterTrigger),
191
+ onBlur: useMergedEventCallbacks((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.onBlur, onLeaveTrigger)
192
+ });
212
193
  return state;
213
194
  };
214
- /**
215
- * Combine up to two event callbacks into a single function that calls them in order
216
- */
217
-
218
- var useMergedCallbacks = function (callback1, callback2) {
219
- return React.useCallback(function (ev) {
220
- callback1 === null || callback1 === void 0 ? void 0 : callback1(ev);
221
- callback2 === null || callback2 === void 0 ? void 0 : callback2(ev);
222
- }, [callback1, callback2]);
223
- };
224
195
  //# sourceMappingURL=useTooltip.js.map