@fluentui/react-tooltip 9.1.1 → 9.1.3

package/CHANGELOG.json

@@ -2,7 +2,81 @@
   "name": "@fluentui/react-tooltip",
   "entries": [
     {
-      "date": "Fri, 11 Nov 2022 14:53:35 GMT",
+      "date": "Mon, 05 Dec 2022 18:25:36 GMT",
+      "tag": "@fluentui/react-tooltip_v9.1.3",
+      "version": "9.1.3",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui/react-tooltip",
+            "commit": "3fdfc72488fe30b83f665c7267c5e8cb802682ff",
+            "comment": "chore: Migrate to new package structure."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tooltip",
+            "comment": "Bump @fluentui/react-portal to v9.0.12",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tooltip",
+            "comment": "Bump @fluentui/react-positioning to v9.3.3",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tooltip",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.1.2",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tooltip",
+            "comment": "Bump @fluentui/react-theme to v9.1.3",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 17 Nov 2022 23:05:30 GMT",
+      "tag": "@fluentui/react-tooltip_v9.1.2",
+      "version": "9.1.2",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-tooltip",
+            "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
+            "comment": "chore: update package scaffold"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tooltip",
+            "comment": "Bump @fluentui/react-portal to v9.0.11",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tooltip",
+            "comment": "Bump @fluentui/react-positioning to v9.3.2",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-tooltip",
+            "comment": "Bump @fluentui/react-utilities to v9.2.2",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 11 Nov 2022 14:57:48 GMT",
       "tag": "@fluentui/react-tooltip_v9.1.1",
       "version": "9.1.1",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @fluentui/react-tooltip
 
-This log was last generated on Fri, 11 Nov 2022 14:53:35 GMT and should not be manually modified.
+This log was last generated on Mon, 05 Dec 2022 18:25:36 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.1.3)
+
+Mon, 05 Dec 2022 18:25:36 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.1.2..@fluentui/react-tooltip_v9.1.3)
+
+### Patches
+
+- chore: Migrate to new package structure. ([PR #25818](https://github.com/microsoft/fluentui/pull/25818) by tristan.watanabe@gmail.com)
+- Bump @fluentui/react-portal to v9.0.12 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-positioning to v9.3.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.1.2 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+
+## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.1.2)
+
+Thu, 17 Nov 2022 23:05:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.1.1..@fluentui/react-tooltip_v9.1.2)
+
+### Patches
+
+- Bump @fluentui/react-portal to v9.0.11 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-positioning to v9.3.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-utilities to v9.2.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+
 ## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-tooltip_v9.1.1)
 
-Fri, 11 Nov 2022 14:53:35 GMT 
+Fri, 11 Nov 2022 14:57:48 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tooltip_v9.1.0..@fluentui/react-tooltip_v9.1.1)
 
 ### Patches

package/lib-amd/Tooltip.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/Tooltip/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=Tooltip.js.map

package/lib-amd/Tooltip.js.map

@@ -0,0 +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"]}

package/lib-amd/components/Tooltip/Tooltip.js

@@ -0,0 +1,18 @@
+define(["require", "exports", "./useTooltip", "./renderTooltip", "./useTooltipStyles"], function (require, exports, useTooltip_1, renderTooltip_1, useTooltipStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Tooltip = void 0;
+    /**
+     * A tooltip provides light weight contextual information on top of its target element.
+     */
+    var Tooltip = function (props) {
+        var state = useTooltip_1.useTooltip_unstable(props);
+        useTooltipStyles_1.useTooltipStyles_unstable(state);
+        return renderTooltip_1.renderTooltip_unstable(state);
+    };
+    exports.Tooltip = Tooltip;
+    exports.Tooltip.displayName = 'Tooltip';
+    // type casting here is required to ensure internal type FluentTriggerComponent is not leaked
+    exports.Tooltip.isFluentTriggerComponent = true;
+});
+//# sourceMappingURL=Tooltip.js.map

package/lib-amd/components/Tooltip/Tooltip.js.map

@@ -0,0 +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"]}

package/lib-amd/components/Tooltip/Tooltip.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=Tooltip.types.js.map

package/lib-amd/components/Tooltip/Tooltip.types.js.map

@@ -0,0 +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"]}

package/lib-amd/components/Tooltip/index.js

@@ -0,0 +1,10 @@
+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) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(Tooltip_1, exports);
+    tslib_1.__exportStar(Tooltip_types_1, exports);
+    tslib_1.__exportStar(renderTooltip_1, exports);
+    tslib_1.__exportStar(useTooltip_1, exports);
+    tslib_1.__exportStar(useTooltipStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/Tooltip/index.js.map

@@ -0,0 +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"]}

package/lib-amd/components/Tooltip/private/constants.js

@@ -0,0 +1,18 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.tooltipBorderRadius = exports.arrowHeight = void 0;
+    /**
+     * The height of the tooltip's arrow in pixels.
+     */
+    exports.arrowHeight = 6;
+    /**
+     * The default value of the tooltip's border radius (borderRadiusMedium).
+     *
+     * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.
+     * While we could use getComputedStyle, that adds a performance penalty for something that
+     * will likely never change.
+     */
+    exports.tooltipBorderRadius = 4;
+});
+//# sourceMappingURL=constants.js.map

package/lib-amd/components/Tooltip/private/constants.js.map

@@ -0,0 +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"]}

package/lib-amd/components/Tooltip/renderTooltip.js

@@ -0,0 +1,19 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-portal", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_portal_1, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderTooltip_unstable = void 0;
+    /**
+     * Render the final JSX of Tooltip
+     */
+    var renderTooltip_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(React.Fragment, null,
+            state.children,
+            state.shouldRenderTooltip && (React.createElement(react_portal_1.Portal, { mountNode: state.mountNode },
+                React.createElement(slots.content, tslib_1.__assign({}, slotProps.content),
+                    state.withArrow && React.createElement("div", { ref: state.arrowRef, className: state.arrowClassName }),
+                    state.content.children)))));
+    };
+    exports.renderTooltip_unstable = renderTooltip_unstable;
+});
+//# sourceMappingURL=renderTooltip.js.map

package/lib-amd/components/Tooltip/renderTooltip.js.map

@@ -0,0 +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"]}

package/lib-amd/components/Tooltip/useTooltip.js

@@ -0,0 +1,158 @@
+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) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTooltip_unstable = void 0;
+    /**
+     * Create the state required to render Tooltip.
+     *
+     * The returned state can be modified with hooks such as useTooltipStyles_unstable,
+     * before being passed to renderTooltip_unstable.
+     *
+     * @param props - props from this instance of Tooltip
+     */
+    var useTooltip_unstable = function (props) {
+        var _a, _b, _c, _d;
+        var context = react_shared_contexts_1.useTooltipVisibility_unstable();
+        var isServerSideRender = react_utilities_1.useIsSSR();
+        var targetDocument = react_shared_contexts_1.useFluent_unstable().targetDocument;
+        var _e = react_utilities_1.useTimeout(), setDelayTimeout = _e[0], clearDelayTimeout = _e[1];
+        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;
+        var _l = react_utilities_1.useControllableState({ state: props.visible, initialState: false }), visible = _l[0], setVisibleInternal = _l[1];
+        var setVisible = React.useCallback(function (newVisible, ev) {
+            clearDelayTimeout();
+            setVisibleInternal(function (oldVisible) {
+                if (newVisible !== oldVisible) {
+                    onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(ev, { visible: newVisible });
+                }
+                return newVisible;
+            });
+        }, [clearDelayTimeout, setVisibleInternal, onVisibleChange]);
+        var state = {
+            withArrow: withArrow,
+            positioning: positioning,
+            showDelay: showDelay,
+            hideDelay: hideDelay,
+            relationship: relationship,
+            visible: visible,
+            shouldRenderTooltip: visible,
+            appearance: appearance,
+            mountNode: mountNode,
+            // Slots
+            components: {
+                content: 'div',
+            },
+            content: react_utilities_1.resolveShorthand(content, {
+                defaultProps: {
+                    role: 'tooltip',
+                },
+                required: true,
+            }),
+        };
+        state.content.id = react_utilities_1.useId('tooltip-', state.content.id);
+        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));
+        if (state.withArrow) {
+            positioningOptions.offset = react_positioning_1.mergeArrowOffset(positioningOptions.offset, constants_1.arrowHeight);
+        }
+        var _m = react_positioning_1.usePositioning(positioningOptions), targetRef = _m.targetRef, containerRef = _m.containerRef, arrowRef = _m.arrowRef;
+        state.content.ref = react_utilities_1.useMergedRefs(state.content.ref, containerRef);
+        state.arrowRef = arrowRef;
+        // When this tooltip is visible, hide any other tooltips, and register it
+        // as the visibleTooltip with the TooltipContext.
+        // Also add a listener on document to hide the tooltip if Escape is pressed
+        react_utilities_1.useIsomorphicLayoutEffect(function () {
+            var _a;
+            if (visible) {
+                var thisTooltip_1 = { hide: function () { return setVisible(false); } };
+                (_a = context.visibleTooltip) === null || _a === void 0 ? void 0 : _a.hide();
+                context.visibleTooltip = thisTooltip_1;
+                var onDocumentKeyDown_1 = function (ev) {
+                    if (ev.key === keyboard_keys_1.Escape) {
+                        thisTooltip_1.hide();
+                        // stop propagation to avoid conflicting with other elements that listen for `Escape`
+                        // e,g: Dialog, Popover, Menu
+                        ev.stopPropagation();
+                    }
+                };
+                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown_1, {
+                    // As this event is added at targeted document,
+                    // we need to capture the event to be sure keydown handling from tooltip happens first
+                    capture: true,
+                });
+                return function () {
+                    if (context.visibleTooltip === thisTooltip_1) {
+                        context.visibleTooltip = undefined;
+                    }
+                    targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown_1, { capture: true });
+                };
+            }
+        }, [context, targetDocument, visible, setVisible]);
+        // The focused element gets a blur event when the document loses focus
+        // (e.g. switching tabs in the browser), but we don't want to show the
+        // tooltip again when the document gets focus back. Handle this case by
+        // checking if the blurred element is still the document's activeElement.
+        // See https://github.com/microsoft/fluentui/issues/13541
+        var ignoreNextFocusEventRef = React.useRef(false);
+        // Listener for onPointerEnter and onFocus on the trigger element
+        var onEnterTrigger = React.useCallback(function (ev) {
+            if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {
+                ignoreNextFocusEventRef.current = false;
+                return;
+            }
+            // Show immediately if another tooltip is already visible
+            var delay = context.visibleTooltip ? 0 : state.showDelay;
+            setDelayTimeout(function () {
+                setVisible(true, ev);
+            }, delay);
+            ev.persist(); // Persist the event since the setVisible call will happen asynchronously
+        }, [setDelayTimeout, setVisible, state.showDelay, context]);
+        // Listener for onPointerLeave and onBlur on the trigger element
+        var onLeaveTrigger = React.useCallback(function (ev) {
+            var delay = state.hideDelay;
+            if (ev.type === 'blur') {
+                // Hide immediately when losing focus
+                delay = 0;
+                ignoreNextFocusEventRef.current = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === ev.target;
+            }
+            setDelayTimeout(function () {
+                setVisible(false, ev);
+            }, delay);
+            ev.persist(); // Persist the event since the setVisible call will happen asynchronously
+        }, [setDelayTimeout, setVisible, state.hideDelay, targetDocument]);
+        // Cancel the hide timer when the mouse or focus enters the tooltip, and restart it when the mouse or focus leaves.
+        // This keeps the tooltip visible when the mouse is moved over it, or it has focus within.
+        state.content.onPointerEnter = react_utilities_1.mergeCallbacks(state.content.onPointerEnter, clearDelayTimeout);
+        state.content.onPointerLeave = react_utilities_1.mergeCallbacks(state.content.onPointerLeave, onLeaveTrigger);
+        state.content.onFocus = react_utilities_1.mergeCallbacks(state.content.onFocus, clearDelayTimeout);
+        state.content.onBlur = react_utilities_1.mergeCallbacks(state.content.onBlur, onLeaveTrigger);
+        var child = react_utilities_1.getTriggerChild(children);
+        var triggerAriaProps = {};
+        if (relationship === 'label') {
+            // aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.
+            if (typeof state.content.children === 'string') {
+                triggerAriaProps['aria-label'] = state.content.children;
+            }
+            else {
+                triggerAriaProps['aria-labelledby'] = state.content.id;
+                // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
+                state.shouldRenderTooltip = true;
+            }
+        }
+        else if (relationship === 'description') {
+            triggerAriaProps['aria-describedby'] = state.content.id;
+            // Always render the tooltip even if hidden, so that aria-describedby refers to a valid element
+            state.shouldRenderTooltip = true;
+        }
+        // Don't render the Tooltip in SSR to avoid hydration errors
+        if (isServerSideRender) {
+            state.shouldRenderTooltip = false;
+        }
+        var childTargetRef = react_utilities_1.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
+        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), { 
+            // If the target prop is not provided, attach targetRef to the trigger element's ref prop
+            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)) }));
+        return state;
+    };
+    exports.useTooltip_unstable = useTooltip_unstable;
+});
+//# sourceMappingURL=useTooltip.js.map

package/lib-amd/components/Tooltip/useTooltip.js.map

@@ -0,0 +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"]}

package/lib-amd/components/Tooltip/useTooltipStyles.js

@@ -0,0 +1,36 @@
+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) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTooltipStyles_unstable = exports.tooltipClassNames = void 0;
+    exports.tooltipClassNames = {
+        content: 'fui-Tooltip__content',
+    };
+    /**
+     * Styles for the tooltip
+     */
+    var useStyles = react_1.makeStyles({
+        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, 
+            // TODO need to add versions of tokens.alias.shadow.shadow8, etc. that work with filter
+            filter: "drop-shadow(0 0 2px " + react_theme_1.tokens.colorNeutralShadowAmbient + ") " +
+                ("drop-shadow(0 4px 8px " + react_theme_1.tokens.colorNeutralShadowKey + ")") }),
+        visible: {
+            display: 'block',
+        },
+        inverted: {
+            backgroundColor: react_theme_1.tokens.colorNeutralBackgroundStatic,
+            color: react_theme_1.tokens.colorNeutralForegroundStaticInverted,
+        },
+        arrow: react_positioning_1.createArrowStyles({ arrowHeight: constants_1.arrowHeight }),
+    });
+    /**
+     * Apply styling to the Tooltip slots based on the state
+     */
+    var useTooltipStyles_unstable = function (state) {
+        var styles = useStyles();
+        state.content.className = react_1.mergeClasses(exports.tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);
+        state.arrowClassName = styles.arrow;
+        return state;
+    };
+    exports.useTooltipStyles_unstable = useTooltipStyles_unstable;
+});
+//# sourceMappingURL=useTooltipStyles.js.map

package/lib-amd/components/Tooltip/useTooltipStyles.js.map

@@ -0,0 +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"]}

package/lib-amd/index.js

@@ -0,0 +1,11 @@
+define(["require", "exports", "./Tooltip"], function (require, exports, Tooltip_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useTooltip_unstable = exports.useTooltipStyles_unstable = exports.tooltipClassNames = exports.renderTooltip_unstable = exports.Tooltip = void 0;
+    Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
+    Object.defineProperty(exports, "renderTooltip_unstable", { enumerable: true, get: function () { return Tooltip_1.renderTooltip_unstable; } });
+    Object.defineProperty(exports, "tooltipClassNames", { enumerable: true, get: function () { return Tooltip_1.tooltipClassNames; } });
+    Object.defineProperty(exports, "useTooltipStyles_unstable", { enumerable: true, get: function () { return Tooltip_1.useTooltipStyles_unstable; } });
+    Object.defineProperty(exports, "useTooltip_unstable", { enumerable: true, get: function () { return Tooltip_1.useTooltip_unstable; } });
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -0,0 +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

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tooltip",
-  "version": "9.1.1",
+  "version": "9.1.3",
   "description": "React components for building web experiences",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,11 +32,11 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.1",
-    "@fluentui/react-portal": "^9.0.10",
-    "@fluentui/react-positioning": "^9.3.1",
-    "@fluentui/react-shared-contexts": "^9.1.1",
-    "@fluentui/react-theme": "^9.1.2",
-    "@fluentui/react-utilities": "^9.2.1",
+    "@fluentui/react-portal": "^9.0.12",
+    "@fluentui/react-positioning": "^9.3.3",
+    "@fluentui/react-shared-contexts": "^9.1.2",
+    "@fluentui/react-theme": "^9.1.3",
+    "@fluentui/react-utilities": "^9.2.2",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },

package/MIGRATION.md

@@ -1,68 +0,0 @@
-# Tooltip Migration
-
-## STATUS: WIP 🚧
-
-This Migration guide is a work in progress and is not yet ready for use.
-
-## Migration from v8
-
-TooltipHost is replaced by Tooltip itself, as the wrapper around the element that should receive a tooltip.
-
-- `Tooltip`
-  - `calloutProps`
-    - `isBeakVisible` => `withArrow`
-    - `beakWidth` => Not supported.
-    - `gapSpace` => Not supported.
-    - `doNotLayer` => Not supported. Tooltips are always layered by rendering in a Portal.
-    - `setInitialFocus` => Not supported. Tooltips can't be focused, by design.
-  - `componentRef` => Not supported. Tooltips can be controlled declaratively with props like `visible`, instead of using an imperative API like `componentRef`.
-  - `delay` => `showDelay`
-  - `directionalHint` => `positioning`
-    - `topLeftEdge` => `positioning="above-start"`
-    - `topCenter` => `positioning="above"`
-    - `topRightEdge` => `positioning="above-end"`
-    - `topAutoEdge` => Not supported
-    - `bottomLeftEdge` => `positioning="below-start"`
-    - `bottomCenter` => `positioning="below"`
-    - `bottomRightEdge` => `positioning="below-end"`
-    - `bottomAutoEdge` => Not supported
-    - `leftTopEdge` => `positioning="before-top"`
-    - `leftCenter` => `positioning="before"`
-    - `leftBottomEdge` => `positioning="before-bottom"`
-    - `rightTopEdge` => `positioning="after-top"`
-    - `rightCenter` => `positioning="after"`
-    - `rightBottomEdge` => `positioning="after-bottom"`
-  - `directionalHintForRTL` => Automatic based on whether the element is in an RTL context according to `FluentProvider`.
-  - `maxWidth` => Supported only through CSS styling of the `content` slot.
-  - `onRenderContent` => Set the `content` slot to a custom render function.
-- `TooltipHost` => The tooltip itself is the "host".
-  - `closeDelay` => `hideDelay`
-  - `hostClassName` => Not needed because there is no element rendered inline by Tooltip
-  - `onTooltipToggle` => `onVisibleChange`
-  - `overflowMode` => Not supported. If this behavior is needed, the tooltip's visibility can be controlled using the `visible` prop and `onVisibleChange` event.
-
-## Migration from v0
-
-The v9 Tooltip swaps the meaning of children between content and trigger. In v0, Tooltip's children is the tooltip content, and its trigger is a prop. In v9, that is swapped: Tooltip's children is the trigger, and its content is a prop.
-
-- `Tooltip`
-  - children => `content`
-  - `trigger` => children
-  - `defaultOpen` => Not supported. The tooltip's visibility can be controlled using the `visible` prop and `onVisibleChange` event.
-  - `mountNode` => Not supported
-  - `open` => `visible`
-  - `onOpenChange` => `onVisibleChange`
-  - `pointing` => `withArrow`
-  - `mouseEnterDelay` => `showDelay`
-  - `mouseLeaveDelay` => `hideDelay`
-  - `subtle={true}` = `appearance="normal"` (default)
-  - `subtle={false}` => `appearance="inverted"`
-  - Positioning props are now attributes of the `positioning` prop:
-    - `flipBoundary` => `positioning.flipBoundary`
-    - `offset` => `positioning.offset`
-    - `overflowBoundary` => `positioning.overflowBoundary`
-    - `popperRef` => `positioning.popperRef`
-    - `position` => `positioning.position`
-    - `align` => `positioning.align`
-    - `positionFixed` => `positioning.positionFixed`
-    - `target` => `positioning.target`

package/Spec.md

@@ -1,374 +0,0 @@
-# Tooltip Spec
-
-Tooltips provide additional information about an element when hovering or focusing on the element.
-
-## Prior Art
-
-- OpenUI Tooltip resarch: https://open-ui.org/components/tooltip.research
-- GitHub Epic issue: [Tooltip Convergence #16735](https://github.com/microsoft/fluentui/issues/16735)
-
-### Tooltips in v8/Fabric
-
-v8 tooltips use a `TooltipHost` wrapped around the target element to provide tooltip functionality. This creates a `div` around the element that listens for mouse and focus events.
-
-The `Tooltip` component renders as a `Callout`, and supports all `Callout` props.
-
-```tsx
-<TooltipHost
-  content="This is the tooltip content"
-  // This id is used on the tooltip itself, not the host
-  // (so an element with this id only exists when the tooltip is shown)
-  id={tooltipId}
-  calloutProps={calloutProps}
-  styles={hostStyles}
->
-  <DefaultButton aria-describedby={tooltipId}>Hover over me</DefaultButton>
-</TooltipHost>
-```
-
-#### Drawbacks
-
-There are a few drawbacks with this approach to adding tooltips, which are outlined in [☂ Tooltip: open issues to resolve in converged approach #15102](https://github.com/microsoft/fluentui/issues/15102), and summarized below:
-
-- The wrapper `div` created by `TooltipHost` can cause layout issues for the component. It also doesn't always result in proper positioning for the tooltip.
-- The API is overly complex.
-- There's no coordination between tooltips on a page. For example, moving the mouse between two elements with tooltips should cause the second tooltip to appear immediately without fading in/out.
-
-### Tooltips in v0/Northstar
-
-v0 tooltips use a `trigger` property to render the tooltip's target component. However, unlike v8 it does not create a wrapper `div` around the target component, but instead adds listeners to the target component's props.
-
-```tsx
-<Tooltip content="Example tooltip" trigger={<Button content="A button" />} />
-```
-
-# Sample Code
-
-Label tooltip for an icon-only button:
-
-```tsx
-<Tooltip content="Copy" relationship="label">
-  <Button icon={<CopyRegular />} />
-</Tooltip>
-```
-
-Description tooltip for a link:
-
-```tsx
-<Tooltip content="This is an example" relationship="description">
-  <a href="http://example.com">A link</a>
-</Tooltip>
-```
-
-Tooltip with custom JSX content:
-
-```tsx
-<Tooltip content={<b>The content can be JSX</b>} relationship="label">
-  <Button />
-</Tooltip>
-```
-
-Custom component as a trigger:
-
-```tsx
-<Tooltip content="Supports any component that accepts HTML attributes" relationship="label">
-  <FancyButton />
-</Tooltip>
-```
-
-Render function for the trigger:
-
-```tsx
-<Tooltip content="The child can be a render function" relationship="description">
-  {triggerProps => (
-    <>
-      <div>
-        <button {...triggerProps}>The trigger element</button>
-      </div>
-    </>
-  )}
-</Tooltip>
-```
-
-```tsx
-<Tooltip
-  content="It can target an element other than its trigger"
-  relationship="description"
-  positioning={{ target: targetElement }}
->
-  <button>
-    Custom target: <div ref={setTargetElement} />
-  </button>
-</Tooltip>
-```
-
-# Variants
-
-- The tooltip supports higher contrast colors with `appearance="inverted"`.
-- The tooltip supports rendering an arrow pointing to the target element, using `withArrow`.
-
-# API
-
-To attach a tooltip to an element, wrap it with a `Tooltip`. There is a `content` slot for the text of the tooltip itself.
-
-Unlike most components, Tooltip doesn't have a root slot and doesn't allow native DOM props on the Tooltip itself. This is because it doesn't render any nodes inline around its trigger (it does _not_ wrap the element with a `<div>` for example). Instead, it attaches listeners to the child by cloning the JSX object and adding `onPointerEnter`, etc. listeners.
-
-Tooltip only supports a single child element, which can be either:
-
-- A native element or component that supports DOM attributes (the child can't be a string, for example).
-- A render function that takes the extra props to be added to the trigger element.
-- It is allowed to have a tooltip without a child (trigger) element, in which case it _must_ have a target set via the `positioning` prop, and its visibility must be controlled with the `visible` prop.
-
-_A note about the terminology used for the elements that the tooltip is attached to:_
-
-- _The **trigger** is the element that causes the tooltip to open._
-- _The **target** is the element that the tooltip is anchored to (and the arrow points to)._
-- _Almost always, these will both be the same element, but it is possible to specify them separately, so the tooltip can show up adjacent to a different element than the one that triggered it._
-
-## Types
-
-### `Tooltip`
-
-From [Tooltip.types.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-tooltip/src/components/Tooltip/Tooltip.types.tsx) in `@fluentui/react-tooltip`:
-
-```ts
-/**
- * Slot properties for Tooltip
- */
-export type TooltipSlots = {
-  /**
-   * The text or JSX content of the tooltip.
-   */
-  content: NonNullable<Slot<'div'>>;
-};
-
-/**
- * Properties for Tooltip
- */
-export type TooltipProps = ComponentProps<TooltipSlots> & {
-  /**
-   * (Required) Specifies whether this tooltip is acting as the description or label of its trigger element.
-   *
-   * * `label` - The tooltip sets the trigger's aria-label or aria-labelledby attribute. This is useful for buttons
-   *    displaying only an icon, for example.
-   * * `description` - The tooltip sets the trigger's aria-description or aria-describedby attribute.
-   * * `inaccessible` - No aria attributes are set on the trigger. This makes the tooltip's content inaccessible to
-   *   screen readers, and should only be used if the tooltip's text is available by some other means.
-   */
-  relationship: 'label' | 'description' | 'inaccessible';
-
-  /**
-   * The tooltip can have a single JSX child, or a render function that accepts TooltipTriggerProps.
-   *
-   * If no child is provided, the tooltip's target must be set with the `positioning` prop, and its
-   * visibility must be controlled with the `visible` prop.
-   */
-  children?:
-    | (React.ReactElement & { ref?: React.Ref<unknown> })
-    | ((props: TooltipTriggerProps) => React.ReactElement | null)
-    | null;
-
-  /**
-   * The tooltip's visual appearance.
-   * * `normal` - Uses the theme's background and text colors.
-   * * `inverted` - Higher contrast variant that uses the theme's inverted colors.
-   *
-   * @defaultvalue normal
-   */
-  appearance?: 'normal' | 'inverted';
-
-  /**
-   * Render an arrow pointing to the target element
-   *
-   * @defaultvalue false
-   */
-  withArrow?: boolean;
-
-  /**
-   * Configure the positioning of the tooltip
-   *
-   * @defaultvalue above
-   */
-  positioning?: PositioningShorthand;
-
-  /**
-   * Control the tooltip's visibility programatically.
-   *
-   * This can be used in conjunction with onVisibleChange to modify the tooltip's show and hide behavior.
-   *
-   * If not provided, the visibility will be controlled by the tooltip itself, based on hover and focus events on the
-   * trigger (child) element.
-   */
-  visible?: boolean;
-
-  /**
-   * Notification when the visibility of the tooltip is changing
-   */
-  onVisibleChange?: (
-    event: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined,
-    data: OnVisibleChangeData,
-  ) => void;
-
-  /**
-   * Delay before the tooltip is shown, in milliseconds.
-   *
-   * @defaultvalue 250
-   */
-  showDelay?: number;
-
-  /**
-   * Delay before the tooltip is hidden, in milliseconds.
-   *
-   * @defaultvalue 250
-   */
-  hideDelay?: number;
-};
-
-/**
- * The properties that are added to the trigger of the Tooltip
- */
-export type TooltipTriggerProps = {
-  ref?: React.Ref<never>;
-} & Pick<
-  React.HTMLAttributes<HTMLElement>,
-  'onPointerEnter' | 'onPointerLeave' | 'onFocus' | 'onBlur' | 'aria-describedby' | 'aria-labelledby' | 'aria-label'
->;
-
-/**
- * Data for the Tooltip's onVisibleChange event.
- */
-export type OnVisibleChangeData = {
-  visible: boolean;
-};
-```
-
-### `TooltipContext`
-
-The context is included at the app root on `FluentProvider` and is used by `Tooltip` to ensure that only one is visible at once.
-
-From [TooltipContext.ts](https://github.com/microsoft/fluentui/blob/master/packages/react-shared-contexts/src/TooltipContext/TooltipContext.ts) in `@fluentui/react-shared-contexts`:
-
-```ts
-/**
- * The context provided by TooltipProvider
- */
-export type TooltipContextType = {
-  /**
-   * When a tooltip is shown, it sets itself as the visibleTooltip.
-   * The next tooltip to become visible can use it to hide the previous tooltip immediately.
-   */
-  visibleTooltip?: {
-    hide: () => void;
-  };
-};
-
-/**
- * Context shared by all of the tooltips in the app
- */
-export const TooltipContext = React.createContext<TooltipContextType>({});
-```
-
-# Structure
-
-## Tooltip as a label
-
-### JSX tree
-
-```tsx
-<Tooltip content="Example" relationship="label">
-  <button>
-    <svg>...</svg>
-  </button>
-</Tooltip>
-```
-
-### DOM
-
-Tooltip with `relationship="label"` is not rendered when it is not visible. Its content is used as the `aria-label` of the control. The Tooltip will be rendered once it is visible; see the next example for what the DOM structure looks like in that case.
-
-```html
-<body>
-  <!-- App root -->
-  <div>
-    <button aria-label="Example" onPointerEnter="{...}" onPointerLeave="{...}" onFocus="{...}" onBlur="{...}">
-      <svg>...</svg>
-    </button>
-  </div>
-</body>
-```
-
-## Tooltip as a description
-
-### JSX tree
-
-```tsx
-<Tooltip content="Example description of the button" relationship="description" withArrow>
-  <button>The Button</button>
-</Tooltip>
-```
-
-### DOM
-
-Tooltip with `relationship="description"` is always rendered because it's used as the `aria-describedby` of the control, which always has to point to a valid DOM element even if it's not visible.
-
-```html
-<body>
-  <!-- App root -->
-  <div>
-    <button aria-describedby="tooltip-2" onPointerEnter="{...}" onPointerLeave="{...}" onFocus="{...}" onBlur="{...}">
-      The Button
-    </button>
-  </div>
-
-  <!-- Portal for Tooltip -->
-  <div>
-    <div role="tooltip" id="tooltip-2" class="{tooltip}">
-      <div class="{arrow}"></div>
-      Example description of the button
-    </div>
-  </div>
-</body>
-```
-
-# Migration
-
-See [MIGRATION.md](./MIGRATION.md).
-
-# Behaviors
-
-## Visibility
-
-- The tooltip shows:
-  - After `showDelay` (250ms default) from when the mouse/pointer enters the trigger.
-  - After `showDelay` (250ms default) from when the trigger gets keyboard focus.
-  - _Immediately_ (ignoring `showDelay`) if it is triggered while another tooltip is currently visible.
-- The tooltip hides:
-  - After `hideDelay` (250ms default) from when the mouse/pointer leaves BOTH the trigger AND the tooltip itself.
-  - _Immediately_ when the trigger loses keyboard focus.
-  - _Immediately_ when the ESC key is pressed.
-  - _Immediately_ when another tooltip is shown.
-
-There is only ever one tooltip visible at once (coordinated using `TooltipContext`). If another tooltip is triggered while there's one currently visible, the previous one hides and the new one shows immediately, without delay.
-
-### Placement
-
-The tooltip is placed relative to its target element based on the `positioning` prop. The placement is handled by the `@fluentui/react-positioning` package, which uses PopperJS.
-
-### Focus
-
-Content within the tooltip is not focusable, and can't be interacted with directly by keyboard or mouse.
-
-# Accessibility
-
-- ARIA design pattern: https://www.w3.org/TR/wai-aria-practices-1.2/#tooltip.
-- The Tooltip content element has `role="tooltip"`.
-- If Tooltip has `relationship="label"` with simple string content:
-  - The content is set as the trigger's `aria-label`.
-  - The tooltip is only rendered while it is visible.
-- If Tooltip has `relationship="label"` with JSX content, OR `relationship="description"` (string or JSX):
-  - The tooltip's ID is set as the trigger's `aria-labelledby` or `aria-describedby` (an ID is generated if not provided).
-  - The tooltip is always rendered, even while hidden.
-  - While hidden, the tooltip itself is styled with `display: none`.
-- The Tooltip itself can never receive focus.
-- The Tooltip should never contain focusable elements.
-- The trigger for the Tooltip should be focusable.