@fluentui/react-tooltip 0.0.0-nightly-20230321-0440.1 → 0.0.0-nightly-20230324-0422.1

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/Tooltip.types.ts"],"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"],"mappings":""}
+{"version":3,"sources":["../../../lib/components/Tooltip/Tooltip.types.js"],"sourcesContent":["import * as React from 'react';\n//# sourceMappingURL=Tooltip.types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,yCAAyC"}

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

@@ -1,12 +1,13 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-const tslib_1 = /*#__PURE__*/require("tslib");
-tslib_1.__exportStar(require("./Tooltip"), exports);
-tslib_1.__exportStar(require("./Tooltip.types"), exports);
-tslib_1.__exportStar(require("./renderTooltip"), exports);
-tslib_1.__exportStar(require("./useTooltip"), exports);
-tslib_1.__exportStar(require("./useTooltipStyles"), exports);
+const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+_exportStar(require("./Tooltip"), exports);
+_exportStar(require("./Tooltip.types"), exports);
+_exportStar(require("./renderTooltip"), exports);
+_exportStar(require("./useTooltip"), exports);
+_exportStar(require("./useTooltipStyles"), exports);
+ //# sourceMappingURL=index.js.map
+
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/index.ts"],"sourcesContent":["export * from './Tooltip';\nexport * from './Tooltip.types';\nexport * from './renderTooltip';\nexport * from './useTooltip';\nexport * from './useTooltipStyles';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,eAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,qBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,qBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,kBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,wBAAAC,OAAA"}
+{"version":3,"sources":["../../../lib/components/Tooltip/index.js"],"sourcesContent":["export * from './Tooltip';\nexport * from './Tooltip.types';\nexport * from './renderTooltip';\nexport * from './useTooltip';\nexport * from './useTooltipStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}

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

@@ -1,19 +1,20 @@
-"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;
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    arrowHeight: ()=>arrowHeight,
+    tooltipBorderRadius: ()=>tooltipBorderRadius
+});
+const arrowHeight = 6;
+const tooltipBorderRadius = 4; //# sourceMappingURL=constants.js.map
+
 //# sourceMappingURL=constants.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["exports","arrowHeight","tooltipBorderRadius"],"sources":["../../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/private/constants.ts"],"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"],"mappings":";;;;;;AAAA;;;AAGaA,OAAA,CAAAC,WAAW,GAAG,CAAC;AAE5B;;;;;;;AAOaD,OAAA,CAAAE,mBAAmB,GAAG,CAAC"}
+{"version":3,"sources":["../../../../lib/components/Tooltip/private/constants.js"],"sourcesContent":["/**\n * The height of the tooltip's arrow in pixels.\n */export const arrowHeight = 6;\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//# sourceMappingURL=constants.js.map"],"names":["arrowHeight","tooltipBorderRadius"],"mappings":"AAAA;;CAEC;;;;;;;;;;;IAAeA,WAAW,MAAXA;IAQHC,mBAAmB,MAAnBA;;AARH,MAAMD,cAAc;AAQvB,MAAMC,sBAAsB,GACnC,qCAAqC"}

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

@@ -1,28 +1,23 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "renderTooltip_unstable", {
+    enumerable: true,
+    get: ()=>renderTooltip_unstable
 });
-exports.renderTooltip_unstable = void 0;
-const React = /*#__PURE__*/require("react");
-const react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-/**
- * Render the final JSX of Tooltip
- */
-const renderTooltip_unstable = state => {
-  const {
-    slots,
-    slotProps
-  } = react_utilities_1.getSlots(state);
-  return React.createElement(React.Fragment, null, state.children, state.shouldRenderTooltip && React.createElement(react_portal_1.Portal, {
-    mountNode: state.mountNode
-  }, React.createElement(slots.content, {
-    ...slotProps.content
-  }, state.withArrow && React.createElement("div", {
-    ref: state.arrowRef,
-    className: state.arrowClassName
-  }), state.content.children)));
-};
-exports.renderTooltip_unstable = renderTooltip_unstable;
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactPortal = require("@fluentui/react-portal");
+const _reactUtilities = require("@fluentui/react-utilities");
+const renderTooltip_unstable = (state)=>{
+    const { slots , slotProps  } = (0, _reactUtilities.getSlots)(state);
+    return /*#__PURE__*/ _react.createElement(_react.Fragment, null, state.children, state.shouldRenderTooltip && /*#__PURE__*/ _react.createElement(_reactPortal.Portal, {
+        mountNode: state.mountNode
+    }, /*#__PURE__*/ _react.createElement(slots.content, slotProps.content, state.withArrow && /*#__PURE__*/ _react.createElement("div", {
+        ref: state.arrowRef,
+        className: state.arrowClassName
+    }), state.content.children)));
+}; //# sourceMappingURL=renderTooltip.js.map
+
 //# sourceMappingURL=renderTooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","require","react_portal_1","react_utilities_1","renderTooltip_unstable","state","slots","slotProps","getSlots","createElement","Fragment","children","shouldRenderTooltip","Portal","mountNode","content","withArrow","ref","arrowRef","className","arrowClassName","exports"],"sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/renderTooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TooltipSlots, TooltipState } from './Tooltip.types';\n\n/**\n * Render the final JSX of Tooltip\n */\nexport const renderTooltip_unstable = (state: TooltipState) => {\n  const { slots, slotProps } = getSlots<TooltipSlots>(state);\n\n  return (\n    <>\n      {state.children}\n      {state.shouldRenderTooltip && (\n        <Portal mountNode={state.mountNode}>\n          <slots.content {...slotProps.content}>\n            {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n            {state.content.children}\n          </slots.content>\n        </Portal>\n      )}\n    </>\n  );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,cAAA,gBAAAD,OAAA;AACA,MAAAE,iBAAA,gBAAAF,OAAA;AAGA;;;AAGO,MAAMG,sBAAsB,GAAIC,KAAmB,IAAI;EAC5D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,iBAAA,CAAAK,QAAQ,CAAeH,KAAK,CAAC;EAE1D,OACEL,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAU,QAAA,QACGL,KAAK,CAACM,QAAQ,EACdN,KAAK,CAACO,mBAAmB,IACxBZ,KAAA,CAAAS,aAAA,CAACP,cAAA,CAAAW,MAAM;IAACC,SAAS,EAAET,KAAK,CAACS;EAAS,GAChCd,KAAA,CAAAS,aAAA,CAACH,KAAK,CAACS,OAAO;IAAA,GAAKR,SAAS,CAACQ;EAAO,GACjCV,KAAK,CAACW,SAAS,IAAIhB,KAAA,CAAAS,aAAA;IAAKQ,GAAG,EAAEZ,KAAK,CAACa,QAAQ;IAAEC,SAAS,EAAEd,KAAK,CAACe;EAAc,EAAI,EAChFf,KAAK,CAACU,OAAO,CAACJ,QAAQ,CACT,CAEnB,CACA;AAEP,CAAC;AAhBYU,OAAA,CAAAjB,sBAAsB,GAAAA,sBAAA"}
+{"version":3,"sources":["../../../lib/components/Tooltip/renderTooltip.js"],"sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Tooltip\n */\nexport const renderTooltip_unstable = state => {\n  const {\n    slots,\n    slotProps\n  } = getSlots(state);\n  return /*#__PURE__*/React.createElement(React.Fragment, null, state.children, state.shouldRenderTooltip && /*#__PURE__*/React.createElement(Portal, {\n    mountNode: state.mountNode\n  }, /*#__PURE__*/React.createElement(slots.content, slotProps.content, state.withArrow && /*#__PURE__*/React.createElement(\"div\", {\n    ref: state.arrowRef,\n    className: state.arrowClassName\n  }), state.content.children)));\n};\n//# sourceMappingURL=renderTooltip.js.map"],"names":["renderTooltip_unstable","state","slots","slotProps","getSlots","React","createElement","Fragment","children","shouldRenderTooltip","Portal","mountNode","content","withArrow","ref","arrowRef","className","arrowClassName"],"mappings":";;;;+BAMaA;;aAAAA;;;6DANU;6BACA;gCACE;AAIlB,MAAMA,yBAAyBC,CAAAA,QAAS;IAC7C,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACH;IACb,OAAO,WAAW,GAAEI,OAAMC,aAAa,CAACD,OAAME,QAAQ,EAAE,IAAI,EAAEN,MAAMO,QAAQ,EAAEP,MAAMQ,mBAAmB,IAAI,WAAW,GAAEJ,OAAMC,aAAa,CAACI,mBAAM,EAAE;QAClJC,WAAWV,MAAMU,SAAS;IAC5B,GAAG,WAAW,GAAEN,OAAMC,aAAa,CAACJ,MAAMU,OAAO,EAAET,UAAUS,OAAO,EAAEX,MAAMY,SAAS,IAAI,WAAW,GAAER,OAAMC,aAAa,CAAC,OAAO;QAC/HQ,KAAKb,MAAMc,QAAQ;QACnBC,WAAWf,MAAMgB,cAAc;IACjC,IAAIhB,MAAMW,OAAO,CAACJ,QAAQ;AAC5B,GACA,yCAAyC"}

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

@@ -1,203 +1,200 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.useTooltip_unstable = void 0;
-const React = /*#__PURE__*/require("react");
-const react_positioning_1 = /*#__PURE__*/require("@fluentui/react-positioning");
-const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-const constants_1 = /*#__PURE__*/require("./private/constants");
-const keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
-/**
- * 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
- */
-const useTooltip_unstable = props => {
-  var _a, _b, _c, _d;
-  const context = react_shared_contexts_1.useTooltipVisibility_unstable();
-  const isServerSideRender = react_utilities_1.useIsSSR();
-  const {
-    targetDocument
-  } = react_shared_contexts_1.useFluent_unstable();
-  const [setDelayTimeout, clearDelayTimeout] = react_utilities_1.useTimeout();
-  const {
-    appearance = 'normal',
-    children,
-    content,
-    withArrow = false,
-    positioning = 'above',
-    onVisibleChange,
-    relationship,
-    showDelay = 250,
-    hideDelay = 250,
-    mountNode
-  } = props;
-  const [visible, setVisibleInternal] = react_utilities_1.useControllableState({
-    state: props.visible,
-    initialState: false
-  });
-  const setVisible = React.useCallback((newVisible, ev) => {
-    clearDelayTimeout();
-    setVisibleInternal(oldVisible => {
-      if (newVisible !== oldVisible) {
-        onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(ev, {
-          visible: newVisible
-        });
-      }
-      return newVisible;
+Object.defineProperty(exports, "useTooltip_unstable", {
+    enumerable: true,
+    get: ()=>useTooltip_unstable
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactPositioning = require("@fluentui/react-positioning");
+const _reactSharedContexts = require("@fluentui/react-shared-contexts");
+const _reactUtilities = require("@fluentui/react-utilities");
+const _constants = require("./private/constants");
+const _keyboardKeys = require("@fluentui/keyboard-keys");
+const useTooltip_unstable = (props)=>{
+    var _child_props, _child_props1, _child_props2, _child_props3;
+    const context = (0, _reactSharedContexts.useTooltipVisibility_unstable)();
+    const isServerSideRender = (0, _reactUtilities.useIsSSR)();
+    const { targetDocument  } = (0, _reactSharedContexts.useFluent_unstable)();
+    const [setDelayTimeout, clearDelayTimeout] = (0, _reactUtilities.useTimeout)();
+    const { appearance ='normal' , children , content , withArrow =false , positioning ='above' , onVisibleChange , relationship , showDelay =250 , hideDelay =250 , mountNode  } = props;
+    const [visible, setVisibleInternal] = (0, _reactUtilities.useControllableState)({
+        state: props.visible,
+        initialState: false
     });
-  }, [clearDelayTimeout, setVisibleInternal, onVisibleChange]);
-  const state = {
-    withArrow,
-    positioning,
-    showDelay,
-    hideDelay,
-    relationship,
-    visible,
-    shouldRenderTooltip: visible,
-    appearance,
-    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);
-  const positioningOptions = {
-    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);
-  }
-  const {
-    targetRef,
-    containerRef,
-    arrowRef
-  } = react_positioning_1.usePositioning(positioningOptions);
-  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(() => {
-    var _a;
-    if (visible) {
-      const thisTooltip = {
-        hide: () => setVisible(false)
-      };
-      (_a = context.visibleTooltip) === null || _a === void 0 ? void 0 : _a.hide();
-      context.visibleTooltip = thisTooltip;
-      const onDocumentKeyDown = ev => {
-        if (ev.key === keyboard_keys_1.Escape) {
-          thisTooltip.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, {
-        // 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 () => {
-        if (context.visibleTooltip === thisTooltip) {
-          context.visibleTooltip = undefined;
-        }
-        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown, {
-          capture: true
+    const setVisible = _react.useCallback((newVisible, ev)=>{
+        clearDelayTimeout();
+        setVisibleInternal((oldVisible)=>{
+            if (newVisible !== oldVisible) {
+                onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(ev, {
+                    visible: newVisible
+                });
+            }
+            return newVisible;
         });
-      };
-    }
-  }, [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
-  const ignoreNextFocusEventRef = React.useRef(false);
-  // Listener for onPointerEnter and onFocus on the trigger element
-  const onEnterTrigger = React.useCallback(ev => {
-    if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {
-      ignoreNextFocusEventRef.current = false;
-      return;
+    }, [
+        clearDelayTimeout,
+        setVisibleInternal,
+        onVisibleChange
+    ]);
+    const state = {
+        withArrow,
+        positioning,
+        showDelay,
+        hideDelay,
+        relationship,
+        visible,
+        shouldRenderTooltip: visible,
+        appearance,
+        mountNode,
+        // Slots
+        components: {
+            content: 'div'
+        },
+        content: (0, _reactUtilities.resolveShorthand)(content, {
+            defaultProps: {
+                role: 'tooltip'
+            },
+            required: true
+        })
+    };
+    state.content.id = (0, _reactUtilities.useId)('tooltip-', state.content.id);
+    const positioningOptions = {
+        enabled: state.visible,
+        arrowPadding: 2 * _constants.tooltipBorderRadius,
+        position: 'above',
+        align: 'center',
+        offset: 4,
+        ...(0, _reactPositioning.resolvePositioningShorthand)(state.positioning)
+    };
+    if (state.withArrow) {
+        positioningOptions.offset = (0, _reactPositioning.mergeArrowOffset)(positioningOptions.offset, _constants.arrowHeight);
     }
-    // Show immediately if another tooltip is already visible
-    const delay = context.visibleTooltip ? 0 : state.showDelay;
-    setDelayTimeout(() => {
-      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
-  const onLeaveTrigger = React.useCallback(ev => {
-    let 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;
+    const { targetRef , containerRef , arrowRef  } = (0, _reactPositioning.usePositioning)(positioningOptions);
+    state.content.ref = (0, _reactUtilities.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
+    (0, _reactUtilities.useIsomorphicLayoutEffect)(()=>{
+        if (visible) {
+            var _context_visibleTooltip;
+            const thisTooltip = {
+                hide: ()=>setVisible(false)
+            };
+            (_context_visibleTooltip = context.visibleTooltip) === null || _context_visibleTooltip === void 0 ? void 0 : _context_visibleTooltip.hide();
+            context.visibleTooltip = thisTooltip;
+            const onDocumentKeyDown = (ev)=>{
+                if (ev.key === _keyboardKeys.Escape) {
+                    thisTooltip.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, {
+                // 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 ()=>{
+                if (context.visibleTooltip === thisTooltip) {
+                    context.visibleTooltip = undefined;
+                }
+                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown, {
+                    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
+    const ignoreNextFocusEventRef = _react.useRef(false);
+    // Listener for onPointerEnter and onFocus on the trigger element
+    const onEnterTrigger = _react.useCallback((ev)=>{
+        if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {
+            ignoreNextFocusEventRef.current = false;
+            return;
+        }
+        // Show immediately if another tooltip is already visible
+        const delay = context.visibleTooltip ? 0 : state.showDelay;
+        setDelayTimeout(()=>{
+            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
+    const onLeaveTrigger = _react.useCallback((ev)=>{
+        let 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(()=>{
+            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 = (0, _reactUtilities.mergeCallbacks)(state.content.onPointerEnter, clearDelayTimeout);
+    state.content.onPointerLeave = (0, _reactUtilities.mergeCallbacks)(state.content.onPointerLeave, onLeaveTrigger);
+    state.content.onFocus = (0, _reactUtilities.mergeCallbacks)(state.content.onFocus, clearDelayTimeout);
+    state.content.onBlur = (0, _reactUtilities.mergeCallbacks)(state.content.onBlur, onLeaveTrigger);
+    const child = (0, _reactUtilities.getTriggerChild)(children);
+    const 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;
     }
-    setDelayTimeout(() => {
-      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);
-  const child = react_utilities_1.getTriggerChild(children);
-  const 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;
+    // Don't render the Tooltip in SSR to avoid hydration errors
+    if (isServerSideRender) {
+        state.shouldRenderTooltip = false;
     }
-  } 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;
-  }
-  const 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, {
-    ...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;
+    const childTargetRef = (0, _reactUtilities.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 = (0, _reactUtilities.applyTriggerPropsToChildren)(children, {
+        ...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: (0, _reactUtilities.useEventCallback)((0, _reactUtilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : (_child_props = child.props) === null || _child_props === void 0 ? void 0 : _child_props.onPointerEnter, onEnterTrigger)),
+        onPointerLeave: (0, _reactUtilities.useEventCallback)((0, _reactUtilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : (_child_props1 = child.props) === null || _child_props1 === void 0 ? void 0 : _child_props1.onPointerLeave, onLeaveTrigger)),
+        onFocus: (0, _reactUtilities.useEventCallback)((0, _reactUtilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : (_child_props2 = child.props) === null || _child_props2 === void 0 ? void 0 : _child_props2.onFocus, onEnterTrigger)),
+        onBlur: (0, _reactUtilities.useEventCallback)((0, _reactUtilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : (_child_props3 = child.props) === null || _child_props3 === void 0 ? void 0 : _child_props3.onBlur, onLeaveTrigger))
+    });
+    return state;
+}; //# sourceMappingURL=useTooltip.js.map
+
 //# sourceMappingURL=useTooltip.js.map