@fluentui/react-tooltip 9.1.0 → 9.1.2

Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.json CHANGED
@@ -2,7 +2,99 @@
2
2
  "name": "@fluentui/react-tooltip",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 02 Nov 2022 11:55:07 GMT",
5
+ "date": "Thu, 17 Nov 2022 23:02:27 GMT",
6
+ "tag": "@fluentui/react-tooltip_v9.1.2",
7
+ "version": "9.1.2",
8
+ "comments": {
9
+ "none": [
10
+ {
11
+ "author": "martinhochel@microsoft.com",
12
+ "package": "@fluentui/react-tooltip",
13
+ "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
14
+ "comment": "chore: update package scaffold"
15
+ }
16
+ ],
17
+ "patch": [
18
+ {
19
+ "author": "beachball",
20
+ "package": "@fluentui/react-tooltip",
21
+ "comment": "Bump @fluentui/react-portal to v9.0.11",
22
+ "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
23
+ },
24
+ {
25
+ "author": "beachball",
26
+ "package": "@fluentui/react-tooltip",
27
+ "comment": "Bump @fluentui/react-positioning to v9.3.2",
28
+ "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
29
+ },
30
+ {
31
+ "author": "beachball",
32
+ "package": "@fluentui/react-tooltip",
33
+ "comment": "Bump @fluentui/react-utilities to v9.2.2",
34
+ "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
35
+ }
36
+ ]
37
+ }
38
+ },
39
+ {
40
+ "date": "Fri, 11 Nov 2022 14:57:48 GMT",
41
+ "tag": "@fluentui/react-tooltip_v9.1.1",
42
+ "version": "9.1.1",
43
+ "comments": {
44
+ "patch": [
45
+ {
46
+ "author": "martinhochel@microsoft.com",
47
+ "package": "@fluentui/react-tooltip",
48
+ "commit": "b3907043bd8d7b650c55e8e7c3119b14f2606c38",
49
+ "comment": "fix: create valid export maps"
50
+ },
51
+ {
52
+ "author": "beachball",
53
+ "package": "@fluentui/react-tooltip",
54
+ "comment": "Bump @fluentui/keyboard-keys to v9.0.1",
55
+ "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
56
+ },
57
+ {
58
+ "author": "beachball",
59
+ "package": "@fluentui/react-tooltip",
60
+ "comment": "Bump @fluentui/react-portal to v9.0.10",
61
+ "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
62
+ },
63
+ {
64
+ "author": "beachball",
65
+ "package": "@fluentui/react-tooltip",
66
+ "comment": "Bump @fluentui/react-positioning to v9.3.1",
67
+ "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
68
+ },
69
+ {
70
+ "author": "beachball",
71
+ "package": "@fluentui/react-tooltip",
72
+ "comment": "Bump @fluentui/react-shared-contexts to v9.1.1",
73
+ "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
74
+ },
75
+ {
76
+ "author": "beachball",
77
+ "package": "@fluentui/react-tooltip",
78
+ "comment": "Bump @fluentui/react-theme to v9.1.2",
79
+ "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
80
+ },
81
+ {
82
+ "author": "beachball",
83
+ "package": "@fluentui/react-tooltip",
84
+ "comment": "Bump @fluentui/react-utilities to v9.2.1",
85
+ "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
86
+ },
87
+ {
88
+ "author": "beachball",
89
+ "package": "@fluentui/react-tooltip",
90
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.18",
91
+ "commit": "b4c9a0ae8d7444bf746f1307ab01e2dc16310720"
92
+ }
93
+ ]
94
+ }
95
+ },
96
+ {
97
+ "date": "Wed, 02 Nov 2022 11:58:06 GMT",
6
98
  "tag": "@fluentui/react-tooltip_v9.1.0",
7
99
  "version": "9.1.0",
8
100
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,39 @@
1
1
  # Change Log - @fluentui/react-tooltip
2
2
 
3
- This log was last generated on Wed, 02 Nov 2022 11:55:07 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 17 Nov 2022 23:02:27 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.1.2)
8
+
9
+ Thu, 17 Nov 2022 23:02:27 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.1.1..@fluentui/react-tooltip_v9.1.2)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-portal to v9.0.11 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
15
+ - Bump @fluentui/react-positioning to v9.3.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
16
+ - Bump @fluentui/react-utilities to v9.2.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
17
+
18
+ ## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.1.1)
19
+
20
+ Fri, 11 Nov 2022 14:57:48 GMT
21
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.1.0..@fluentui/react-tooltip_v9.1.1)
22
+
23
+ ### Patches
24
+
25
+ - fix: create valid export maps ([PR #25558](https://github.com/microsoft/fluentui/pull/25558) by martinhochel@microsoft.com)
26
+ - Bump @fluentui/keyboard-keys to v9.0.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
27
+ - Bump @fluentui/react-portal to v9.0.10 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
28
+ - Bump @fluentui/react-positioning to v9.3.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
29
+ - Bump @fluentui/react-shared-contexts to v9.1.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
30
+ - Bump @fluentui/react-theme to v9.1.2 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
31
+ - Bump @fluentui/react-utilities to v9.2.1 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
32
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.18 ([PR #25615](https://github.com/microsoft/fluentui/pull/25615) by beachball)
33
+
7
34
  ## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.1.0)
8
35
 
9
- Wed, 02 Nov 2022 11:55:07 GMT
36
+ Wed, 02 Nov 2022 11:58:06 GMT
10
37
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.0.9..@fluentui/react-tooltip_v9.1.0)
11
38
 
12
39
  ### Minor changes
@@ -0,0 +1,6 @@
1
+ define(["require", "exports", "tslib", "./components/Tooltip/index"], function (require, exports, tslib_1, index_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ tslib_1.__exportStar(index_1, exports);
5
+ });
6
+ //# sourceMappingURL=Tooltip.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-tooltip/src/Tooltip.ts"],"names":[],"mappings":";;;IAAA,uCAA2C","sourcesContent":["export * from './components/Tooltip/index';\n"]}
@@ -0,0 +1,18 @@
1
+ define(["require", "exports", "./useTooltip", "./renderTooltip", "./useTooltipStyles"], function (require, exports, useTooltip_1, renderTooltip_1, useTooltipStyles_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.Tooltip = void 0;
5
+ /**
6
+ * A tooltip provides light weight contextual information on top of its target element.
7
+ */
8
+ var Tooltip = function (props) {
9
+ var state = useTooltip_1.useTooltip_unstable(props);
10
+ useTooltipStyles_1.useTooltipStyles_unstable(state);
11
+ return renderTooltip_1.renderTooltip_unstable(state);
12
+ };
13
+ exports.Tooltip = Tooltip;
14
+ exports.Tooltip.displayName = 'Tooltip';
15
+ // type casting here is required to ensure internal type FluentTriggerComponent is not leaked
16
+ exports.Tooltip.isFluentTriggerComponent = true;
17
+ });
18
+ //# sourceMappingURL=Tooltip.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACI,IAAM,OAAO,GAA2B,UAAA,KAAK;QAClD,IAAM,KAAK,GAAG,gCAAmB,CAAC,KAAK,CAAC,CAAC;QAEzC,4CAAyB,CAAC,KAAK,CAAC,CAAC;QACjC,OAAO,sCAAsB,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC;IALW,QAAA,OAAO,WAKlB;IAEF,eAAO,CAAC,WAAW,GAAG,SAAS,CAAC;IAChC,6FAA6F;IAC5F,eAAkC,CAAC,wBAAwB,GAAG,IAAI,CAAC","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"]}
@@ -0,0 +1,5 @@
1
+ define(["require", "exports"], function (require, exports) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ });
5
+ //# sourceMappingURL=Tooltip.types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tooltip.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tooltip/src/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, TriggerProps } 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 child of the Tooltip\n */\nexport type TooltipChildProps = {\n ref?: React.Ref<unknown>;\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 TriggerProps<TooltipChildProps> &\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 * 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"]}
@@ -0,0 +1,10 @@
1
+ define(["require", "exports", "tslib", "./Tooltip", "./Tooltip.types", "./renderTooltip", "./useTooltip", "./useTooltipStyles"], function (require, exports, tslib_1, Tooltip_1, Tooltip_types_1, renderTooltip_1, useTooltip_1, useTooltipStyles_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ tslib_1.__exportStar(Tooltip_1, exports);
5
+ tslib_1.__exportStar(Tooltip_types_1, exports);
6
+ tslib_1.__exportStar(renderTooltip_1, exports);
7
+ tslib_1.__exportStar(useTooltip_1, exports);
8
+ tslib_1.__exportStar(useTooltipStyles_1, exports);
9
+ });
10
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/index.ts"],"names":[],"mappings":";;;IAAA,yCAA0B;IAC1B,+CAAgC;IAChC,+CAAgC;IAChC,4CAA6B;IAC7B,kDAAmC","sourcesContent":["export * from './Tooltip';\nexport * from './Tooltip.types';\nexport * from './renderTooltip';\nexport * from './useTooltip';\nexport * from './useTooltipStyles';\n"]}
@@ -0,0 +1,18 @@
1
+ define(["require", "exports"], function (require, exports) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.tooltipBorderRadius = exports.arrowHeight = void 0;
5
+ /**
6
+ * The height of the tooltip's arrow in pixels.
7
+ */
8
+ exports.arrowHeight = 6;
9
+ /**
10
+ * The default value of the tooltip's border radius (borderRadiusMedium).
11
+ *
12
+ * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.
13
+ * While we could use getComputedStyle, that adds a performance penalty for something that
14
+ * will likely never change.
15
+ */
16
+ exports.tooltipBorderRadius = 4;
17
+ });
18
+ //# sourceMappingURL=constants.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/private/constants.ts"],"names":[],"mappings":";;;;IAAA;;OAEG;IACU,QAAA,WAAW,GAAG,CAAC,CAAC;IAE7B;;;;;;OAMG;IACU,QAAA,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"]}
@@ -0,0 +1,19 @@
1
+ define(["require", "exports", "tslib", "react", "@fluentui/react-portal", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_portal_1, react_utilities_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.renderTooltip_unstable = void 0;
5
+ /**
6
+ * Render the final JSX of Tooltip
7
+ */
8
+ var renderTooltip_unstable = function (state) {
9
+ var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
10
+ return (React.createElement(React.Fragment, null,
11
+ state.children,
12
+ state.shouldRenderTooltip && (React.createElement(react_portal_1.Portal, { mountNode: state.mountNode },
13
+ React.createElement(slots.content, tslib_1.__assign({}, slotProps.content),
14
+ state.withArrow && React.createElement("div", { ref: state.arrowRef, className: state.arrowClassName }),
15
+ state.content.children)))));
16
+ };
17
+ exports.renderTooltip_unstable = renderTooltip_unstable;
18
+ });
19
+ //# sourceMappingURL=renderTooltip.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"renderTooltip.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/renderTooltip.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,sBAAsB,GAAG,UAAC,KAAmB;QAClD,IAAA,KAAuB,0BAAQ,CAAe,KAAK,CAAC,EAAlD,KAAK,WAAA,EAAE,SAAS,eAAkC,CAAC;QAE3D,OAAO,CACL;YACG,KAAK,CAAC,QAAQ;YACd,KAAK,CAAC,mBAAmB,IAAI,CAC5B,oBAAC,qBAAM,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS;gBAChC,oBAAC,KAAK,CAAC,OAAO,uBAAK,SAAS,CAAC,OAAO;oBACjC,KAAK,CAAC,SAAS,IAAI,6BAAK,GAAG,EAAE,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAE,KAAK,CAAC,cAAc,GAAI;oBAChF,KAAK,CAAC,OAAO,CAAC,QAAQ,CACT,CACT,CACV,CACA,CACJ,CAAC;IACJ,CAAC,CAAC;IAhBW,QAAA,sBAAsB,0BAgBjC","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"]}
@@ -0,0 +1,158 @@
1
+ define(["require", "exports", "tslib", "react", "@fluentui/react-positioning", "@fluentui/react-shared-contexts", "@fluentui/react-utilities", "./private/constants", "@fluentui/keyboard-keys"], function (require, exports, tslib_1, React, react_positioning_1, react_shared_contexts_1, react_utilities_1, constants_1, keyboard_keys_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.useTooltip_unstable = void 0;
5
+ /**
6
+ * Create the state required to render Tooltip.
7
+ *
8
+ * The returned state can be modified with hooks such as useTooltipStyles_unstable,
9
+ * before being passed to renderTooltip_unstable.
10
+ *
11
+ * @param props - props from this instance of Tooltip
12
+ */
13
+ var useTooltip_unstable = function (props) {
14
+ var _a, _b, _c, _d;
15
+ var context = react_shared_contexts_1.useTooltipVisibility_unstable();
16
+ var isServerSideRender = react_utilities_1.useIsSSR();
17
+ var targetDocument = react_shared_contexts_1.useFluent_unstable().targetDocument;
18
+ var _e = react_utilities_1.useTimeout(), setDelayTimeout = _e[0], clearDelayTimeout = _e[1];
19
+ var _f = props.appearance, appearance = _f === void 0 ? 'normal' : _f, children = props.children, content = props.content, _g = props.withArrow, withArrow = _g === void 0 ? false : _g, _h = props.positioning, positioning = _h === void 0 ? 'above' : _h, onVisibleChange = props.onVisibleChange, relationship = props.relationship, _j = props.showDelay, showDelay = _j === void 0 ? 250 : _j, _k = props.hideDelay, hideDelay = _k === void 0 ? 250 : _k, mountNode = props.mountNode;
20
+ var _l = react_utilities_1.useControllableState({ state: props.visible, initialState: false }), visible = _l[0], setVisibleInternal = _l[1];
21
+ var setVisible = React.useCallback(function (newVisible, ev) {
22
+ clearDelayTimeout();
23
+ setVisibleInternal(function (oldVisible) {
24
+ if (newVisible !== oldVisible) {
25
+ onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(ev, { visible: newVisible });
26
+ }
27
+ return newVisible;
28
+ });
29
+ }, [clearDelayTimeout, setVisibleInternal, onVisibleChange]);
30
+ var state = {
31
+ withArrow: withArrow,
32
+ positioning: positioning,
33
+ showDelay: showDelay,
34
+ hideDelay: hideDelay,
35
+ relationship: relationship,
36
+ visible: visible,
37
+ shouldRenderTooltip: visible,
38
+ appearance: appearance,
39
+ mountNode: mountNode,
40
+ // Slots
41
+ components: {
42
+ content: 'div',
43
+ },
44
+ content: react_utilities_1.resolveShorthand(content, {
45
+ defaultProps: {
46
+ role: 'tooltip',
47
+ },
48
+ required: true,
49
+ }),
50
+ };
51
+ state.content.id = react_utilities_1.useId('tooltip-', state.content.id);
52
+ var positioningOptions = tslib_1.__assign({ enabled: state.visible, arrowPadding: 2 * constants_1.tooltipBorderRadius, position: 'above', align: 'center', offset: 4 }, react_positioning_1.resolvePositioningShorthand(state.positioning));
53
+ if (state.withArrow) {
54
+ positioningOptions.offset = react_positioning_1.mergeArrowOffset(positioningOptions.offset, constants_1.arrowHeight);
55
+ }
56
+ var _m = react_positioning_1.usePositioning(positioningOptions), targetRef = _m.targetRef, containerRef = _m.containerRef, arrowRef = _m.arrowRef;
57
+ state.content.ref = react_utilities_1.useMergedRefs(state.content.ref, containerRef);
58
+ state.arrowRef = arrowRef;
59
+ // When this tooltip is visible, hide any other tooltips, and register it
60
+ // as the visibleTooltip with the TooltipContext.
61
+ // Also add a listener on document to hide the tooltip if Escape is pressed
62
+ react_utilities_1.useIsomorphicLayoutEffect(function () {
63
+ var _a;
64
+ if (visible) {
65
+ var thisTooltip_1 = { hide: function () { return setVisible(false); } };
66
+ (_a = context.visibleTooltip) === null || _a === void 0 ? void 0 : _a.hide();
67
+ context.visibleTooltip = thisTooltip_1;
68
+ var onDocumentKeyDown_1 = function (ev) {
69
+ if (ev.key === keyboard_keys_1.Escape) {
70
+ thisTooltip_1.hide();
71
+ // stop propagation to avoid conflicting with other elements that listen for `Escape`
72
+ // e,g: Dialog, Popover, Menu
73
+ ev.stopPropagation();
74
+ }
75
+ };
76
+ targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown_1, {
77
+ // As this event is added at targeted document,
78
+ // we need to capture the event to be sure keydown handling from tooltip happens first
79
+ capture: true,
80
+ });
81
+ return function () {
82
+ if (context.visibleTooltip === thisTooltip_1) {
83
+ context.visibleTooltip = undefined;
84
+ }
85
+ targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown_1, { capture: true });
86
+ };
87
+ }
88
+ }, [context, targetDocument, visible, setVisible]);
89
+ // The focused element gets a blur event when the document loses focus
90
+ // (e.g. switching tabs in the browser), but we don't want to show the
91
+ // tooltip again when the document gets focus back. Handle this case by
92
+ // checking if the blurred element is still the document's activeElement.
93
+ // See https://github.com/microsoft/fluentui/issues/13541
94
+ var ignoreNextFocusEventRef = React.useRef(false);
95
+ // Listener for onPointerEnter and onFocus on the trigger element
96
+ var onEnterTrigger = React.useCallback(function (ev) {
97
+ if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {
98
+ ignoreNextFocusEventRef.current = false;
99
+ return;
100
+ }
101
+ // Show immediately if another tooltip is already visible
102
+ var delay = context.visibleTooltip ? 0 : state.showDelay;
103
+ setDelayTimeout(function () {
104
+ setVisible(true, ev);
105
+ }, delay);
106
+ ev.persist(); // Persist the event since the setVisible call will happen asynchronously
107
+ }, [setDelayTimeout, setVisible, state.showDelay, context]);
108
+ // Listener for onPointerLeave and onBlur on the trigger element
109
+ var onLeaveTrigger = React.useCallback(function (ev) {
110
+ var delay = state.hideDelay;
111
+ if (ev.type === 'blur') {
112
+ // Hide immediately when losing focus
113
+ delay = 0;
114
+ ignoreNextFocusEventRef.current = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === ev.target;
115
+ }
116
+ setDelayTimeout(function () {
117
+ setVisible(false, ev);
118
+ }, delay);
119
+ ev.persist(); // Persist the event since the setVisible call will happen asynchronously
120
+ }, [setDelayTimeout, setVisible, state.hideDelay, targetDocument]);
121
+ // Cancel the hide timer when the mouse or focus enters the tooltip, and restart it when the mouse or focus leaves.
122
+ // This keeps the tooltip visible when the mouse is moved over it, or it has focus within.
123
+ state.content.onPointerEnter = react_utilities_1.mergeCallbacks(state.content.onPointerEnter, clearDelayTimeout);
124
+ state.content.onPointerLeave = react_utilities_1.mergeCallbacks(state.content.onPointerLeave, onLeaveTrigger);
125
+ state.content.onFocus = react_utilities_1.mergeCallbacks(state.content.onFocus, clearDelayTimeout);
126
+ state.content.onBlur = react_utilities_1.mergeCallbacks(state.content.onBlur, onLeaveTrigger);
127
+ var child = react_utilities_1.getTriggerChild(children);
128
+ var triggerAriaProps = {};
129
+ if (relationship === 'label') {
130
+ // aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.
131
+ if (typeof state.content.children === 'string') {
132
+ triggerAriaProps['aria-label'] = state.content.children;
133
+ }
134
+ else {
135
+ triggerAriaProps['aria-labelledby'] = state.content.id;
136
+ // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
137
+ state.shouldRenderTooltip = true;
138
+ }
139
+ }
140
+ else if (relationship === 'description') {
141
+ triggerAriaProps['aria-describedby'] = state.content.id;
142
+ // Always render the tooltip even if hidden, so that aria-describedby refers to a valid element
143
+ state.shouldRenderTooltip = true;
144
+ }
145
+ // Don't render the Tooltip in SSR to avoid hydration errors
146
+ if (isServerSideRender) {
147
+ state.shouldRenderTooltip = false;
148
+ }
149
+ var childTargetRef = react_utilities_1.useMergedRefs(child === null || child === void 0 ? void 0 : child.ref, targetRef);
150
+ // Apply the trigger props to the child, either by calling the render function, or cloning with the new props
151
+ state.children = react_utilities_1.applyTriggerPropsToChildren(children, tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, triggerAriaProps), child === null || child === void 0 ? void 0 : child.props), {
152
+ // If the target prop is not provided, attach targetRef to the trigger element's ref prop
153
+ ref: positioningOptions.target === undefined ? childTargetRef : child === null || child === void 0 ? void 0 : child.ref, onPointerEnter: react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onPointerEnter, onEnterTrigger)), onPointerLeave: react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onPointerLeave, onLeaveTrigger)), onFocus: react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.onFocus, onEnterTrigger)), onBlur: react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.onBlur, onLeaveTrigger)) }));
154
+ return state;
155
+ };
156
+ exports.useTooltip_unstable = useTooltip_unstable;
157
+ });
158
+ //# sourceMappingURL=useTooltip.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useTooltip.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx"],"names":[],"mappings":"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","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"]}
@@ -0,0 +1,36 @@
1
+ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-positioning", "@fluentui/react-theme", "./private/constants"], function (require, exports, tslib_1, react_1, react_positioning_1, react_theme_1, constants_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.useTooltipStyles_unstable = exports.tooltipClassNames = void 0;
5
+ exports.tooltipClassNames = {
6
+ content: 'fui-Tooltip__content',
7
+ };
8
+ /**
9
+ * Styles for the tooltip
10
+ */
11
+ var useStyles = react_1.makeStyles({
12
+ root: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ display: 'none', boxSizing: 'border-box', maxWidth: '240px', cursor: 'default', fontFamily: react_theme_1.tokens.fontFamilyBase, fontSize: react_theme_1.tokens.fontSizeBase200, lineHeight: react_theme_1.tokens.lineHeightBase200 }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), react_1.shorthands.border('1px', 'solid', react_theme_1.tokens.colorTransparentStroke)), react_1.shorthands.padding('4px', '11px', '6px', '11px')), { backgroundColor: react_theme_1.tokens.colorNeutralBackground1, color: react_theme_1.tokens.colorNeutralForeground1,
13
+ // TODO need to add versions of tokens.alias.shadow.shadow8, etc. that work with filter
14
+ filter: "drop-shadow(0 0 2px " + react_theme_1.tokens.colorNeutralShadowAmbient + ") " +
15
+ ("drop-shadow(0 4px 8px " + react_theme_1.tokens.colorNeutralShadowKey + ")") }),
16
+ visible: {
17
+ display: 'block',
18
+ },
19
+ inverted: {
20
+ backgroundColor: react_theme_1.tokens.colorNeutralBackgroundStatic,
21
+ color: react_theme_1.tokens.colorNeutralForegroundStaticInverted,
22
+ },
23
+ arrow: react_positioning_1.createArrowStyles({ arrowHeight: constants_1.arrowHeight }),
24
+ });
25
+ /**
26
+ * Apply styling to the Tooltip slots based on the state
27
+ */
28
+ var useTooltipStyles_unstable = function (state) {
29
+ var styles = useStyles();
30
+ state.content.className = react_1.mergeClasses(exports.tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);
31
+ state.arrowClassName = styles.arrow;
32
+ return state;
33
+ };
34
+ exports.useTooltipStyles_unstable = useTooltipStyles_unstable;
35
+ });
36
+ //# sourceMappingURL=useTooltipStyles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useTooltipStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.ts"],"names":[],"mappings":";;;;IAOa,QAAA,iBAAiB,GAAiC;QAC7D,OAAO,EAAE,sBAAsB;KAChC,CAAC;IAEF;;OAEG;IACH,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,wEACF,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,YAAY,EACvB,QAAQ,EAAE,OAAO,EACjB,MAAM,EAAE,SAAS,EACjB,UAAU,EAAE,oBAAM,CAAC,cAAc,EACjC,QAAQ,EAAE,oBAAM,CAAC,eAAe,EAChC,UAAU,EAAE,oBAAM,CAAC,iBAAiB,IAEjC,kBAAU,CAAC,YAAY,CAAC,oBAAM,CAAC,kBAAkB,CAAC,GAClD,kBAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,oBAAM,CAAC,sBAAsB,CAAC,GAChE,kBAAU,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,KACnD,eAAe,EAAE,oBAAM,CAAC,uBAAuB,EAC/C,KAAK,EAAE,oBAAM,CAAC,uBAAuB;YAErC,uFAAuF;YACvF,MAAM,EACJ,yBAAuB,oBAAM,CAAC,yBAAyB,OAAI;iBAC3D,2BAAyB,oBAAM,CAAC,qBAAqB,MAAG,CAAA,GAC3D;QAED,OAAO,EAAE;YACP,OAAO,EAAE,OAAO;SACjB;QAED,QAAQ,EAAE;YACR,eAAe,EAAE,oBAAM,CAAC,4BAA4B;YACpD,KAAK,EAAE,oBAAM,CAAC,oCAAoC;SACnD;QAED,KAAK,EAAE,qCAAiB,CAAC,EAAE,WAAW,yBAAA,EAAE,CAAC;KAC1C,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,yBAAyB,GAAG,UAAC,KAAmB;QAC3D,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAE3B,KAAK,CAAC,OAAO,CAAC,SAAS,GAAG,oBAAY,CACpC,yBAAiB,CAAC,OAAO,EACzB,MAAM,CAAC,IAAI,EACX,KAAK,CAAC,UAAU,KAAK,UAAU,IAAI,MAAM,CAAC,QAAQ,EAClD,KAAK,CAAC,OAAO,IAAI,MAAM,CAAC,OAAO,EAC/B,KAAK,CAAC,OAAO,CAAC,SAAS,CACxB,CAAC;QAEF,KAAK,CAAC,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC;QAEpC,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAdW,QAAA,yBAAyB,6BAcpC","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { arrowHeight } from './private/constants';\nimport type { TooltipSlots, TooltipState } from './Tooltip.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tooltipClassNames: SlotClassNames<TooltipSlots> = {\n content: 'fui-Tooltip__content',\n};\n\n/**\n * Styles for the tooltip\n */\nconst useStyles = makeStyles({\n root: {\n display: 'none',\n boxSizing: 'border-box',\n maxWidth: '240px',\n cursor: 'default',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase200,\n lineHeight: tokens.lineHeightBase200,\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n ...shorthands.padding('4px', '11px', '6px', '11px'), // '5px 12px 7px 12px' minus the border width '1px'\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n\n // TODO need to add versions of tokens.alias.shadow.shadow8, etc. that work with filter\n filter:\n `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` +\n `drop-shadow(0 4px 8px ${tokens.colorNeutralShadowKey})`,\n },\n\n visible: {\n display: 'block',\n },\n\n inverted: {\n backgroundColor: tokens.colorNeutralBackgroundStatic,\n color: tokens.colorNeutralForegroundStaticInverted,\n },\n\n arrow: createArrowStyles({ arrowHeight }),\n});\n\n/**\n * Apply styling to the Tooltip slots based on the state\n */\nexport const useTooltipStyles_unstable = (state: TooltipState): TooltipState => {\n const styles = useStyles();\n\n state.content.className = mergeClasses(\n tooltipClassNames.content,\n styles.root,\n state.appearance === 'inverted' && styles.inverted,\n state.visible && styles.visible,\n state.content.className,\n );\n\n state.arrowClassName = styles.arrow;\n\n return state;\n};\n"]}
@@ -0,0 +1,11 @@
1
+ define(["require", "exports", "./Tooltip"], function (require, exports, Tooltip_1) {
2
+ "use strict";
3
+ Object.defineProperty(exports, "__esModule", { value: true });
4
+ exports.useTooltip_unstable = exports.useTooltipStyles_unstable = exports.tooltipClassNames = exports.renderTooltip_unstable = exports.Tooltip = void 0;
5
+ Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
6
+ Object.defineProperty(exports, "renderTooltip_unstable", { enumerable: true, get: function () { return Tooltip_1.renderTooltip_unstable; } });
7
+ Object.defineProperty(exports, "tooltipClassNames", { enumerable: true, get: function () { return Tooltip_1.tooltipClassNames; } });
8
+ Object.defineProperty(exports, "useTooltipStyles_unstable", { enumerable: true, get: function () { return Tooltip_1.useTooltipStyles_unstable; } });
9
+ Object.defineProperty(exports, "useTooltip_unstable", { enumerable: true, get: function () { return Tooltip_1.useTooltip_unstable; } });
10
+ });
11
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-tooltip/src/index.ts"],"names":[],"mappings":";;;;IACE,kGAAA,OAAO,OAAA;IACP,iHAAA,sBAAsB,OAAA;IACtB,4GAAA,iBAAiB,OAAA;IACjB,oHAAA,yBAAyB,OAAA;IACzB,8GAAA,mBAAmB,OAAA","sourcesContent":["export {\n Tooltip,\n renderTooltip_unstable,\n tooltipClassNames,\n useTooltipStyles_unstable,\n useTooltip_unstable,\n} from './Tooltip';\nexport type {\n OnVisibleChangeData,\n TooltipProps,\n TooltipSlots,\n TooltipState,\n TooltipChildProps as TooltipTriggerProps,\n} from './Tooltip';\n"]}
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@fluentui/react-tooltip",
3
- "version": "9.1.0",
3
+ "version": "9.1.2",
4
4
  "description": "React components for building web experiences",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
7
- "typings": "dist/index.d.ts",
7
+ "typings": "./dist/index.d.ts",
8
8
  "sideEffects": false,
9
9
  "repository": {
10
10
  "type": "git",
@@ -27,16 +27,16 @@
27
27
  "devDependencies": {
28
28
  "@fluentui/eslint-plugin": "*",
29
29
  "@fluentui/react-conformance": "*",
30
- "@fluentui/react-conformance-griffel": "9.0.0-beta.17",
30
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.18",
31
31
  "@fluentui/scripts": "^1.0.0"
32
32
  },
33
33
  "dependencies": {
34
- "@fluentui/keyboard-keys": "^9.0.0",
35
- "@fluentui/react-portal": "^9.0.9",
36
- "@fluentui/react-positioning": "^9.3.0",
37
- "@fluentui/react-shared-contexts": "^9.1.0",
38
- "@fluentui/react-theme": "^9.1.1",
39
- "@fluentui/react-utilities": "^9.2.0",
34
+ "@fluentui/keyboard-keys": "^9.0.1",
35
+ "@fluentui/react-portal": "^9.0.11",
36
+ "@fluentui/react-positioning": "^9.3.2",
37
+ "@fluentui/react-shared-contexts": "^9.1.1",
38
+ "@fluentui/react-theme": "^9.1.2",
39
+ "@fluentui/react-utilities": "^9.2.2",
40
40
  "@griffel/react": "^1.4.2",
41
41
  "tslib": "^2.1.0"
42
42
  },
@@ -54,9 +54,10 @@
54
54
  },
55
55
  "exports": {
56
56
  ".": {
57
- "types": "./lib/index.d.ts",
57
+ "types": "./dist/index.d.ts",
58
58
  "import": "./lib/index.js",
59
59
  "require": "./lib-commonjs/index.js"
60
- }
60
+ },
61
+ "./package.json": "./package.json"
61
62
  }
62
63
  }