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

package/lib-commonjs/components/Tooltip/Tooltip.types.d.ts

@@ -1,41 +1,37 @@
 import * as React from 'react';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
 /**
  * Slot properties for Tooltip
  */
 export declare type TooltipSlots = {
-    root: Omit<IntrinsicShorthandProps<'div'>, 'children'> & {
-        /**
-         * The child is the element that triggers the Tooltip. It will have additional properties added,
-         * including events and aria properties.
-         * Alternatively, children can be a render function that takes the props and adds
-         * them to the appropriate elements.
-         */
-        children?: (React.ReactElement<React.HTMLAttributes<HTMLElement>> & {
-            ref?: React.Ref<unknown>;
-        }) | ((props: TooltipTriggerProps) => React.ReactNode) | null;
-    };
+    /**
+     * The text or JSX content of the tooltip.
+     */
+    content: NonNullable<Slot<'div'>>;
 };
 /**
  * Properties and state for Tooltip
  */
-export declare type TooltipCommons = {
-    /**
-     * A tooltip can appear with the default appearance or inverted.
-     * When not specified, the default appearance is used.
-     */
-    appearance?: 'inverted';
+declare type TooltipCommons = {
     /**
-     * The content displayed inside the tooltip.
+     * (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.
      */
-    content: React.ReactNode;
+    relationship: 'label' | 'description' | 'inaccessible';
     /**
-     * Color variant with inverted colors
+     * 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 false
+     * @defaultvalue normal
      */
-    inverted?: boolean;
+    appearance?: 'normal' | 'inverted';
     /**
      * Render an arrow pointing to the target element
      *
@@ -61,16 +57,6 @@ export declare type TooltipCommons = {
      * Notification when the visibility of the tooltip is changing
      */
     onVisibleChange?: (event: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => void;
-    /**
-     * Specifies which aria attribute to set on the trigger element.
-     * * `label` - Set aria-label to the tooltip's content. Requires content to be a string; if not, uses `labelledby`.
-     * * `labelledby` - Set aria-labelledby to the tooltip's id. The id is generated if not provided.
-     * * `describedby` - Set aria-describedby to the tooltip's id. The id is generated if not provided.
-     * * null - Do not set any aria attributes on the trigger element.
-     *
-     * @defaultvalue label
-     */
-    triggerAriaAttribute: 'label' | 'labelledby' | 'describedby' | null;
     /**
      * Delay before the tooltip is shown, in milliseconds.
      *
@@ -99,18 +85,24 @@ export declare type OnVisibleChangeData = {
 /**
  * Properties for Tooltip
  */
-export declare type TooltipProps = ComponentProps<TooltipSlots> & Partial<Omit<TooltipCommons, 'content'>> & Pick<TooltipCommons, 'content'>;
+export declare type TooltipProps = ComponentProps<TooltipSlots> & Partial<Omit<TooltipCommons, 'relationship'>> & Pick<TooltipCommons, 'relationship'> & {
+    /**
+     * 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;
+};
 /**
  * State used in rendering Tooltip
  */
 export declare type TooltipState = ComponentState<TooltipSlots> & TooltipCommons & {
+    children?: React.ReactElement | null;
     /**
      * Whether the tooltip should be rendered to the DOM.
-     *
-     * Normally the tooltip will only be rendered when visible. However, if
-     * triggerAriaAttribute is labelledby or describedby, the tooltip will
-     * always be rendered even when hidden so that those aria attributes
-     * to always refer to a valid DOM element.
      */
     shouldRenderTooltip?: boolean;
     /**
@@ -122,3 +114,4 @@ export declare type TooltipState = ComponentState<TooltipSlots> & TooltipCommons
      */
     arrowClassName?: string;
 };
+export {};

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

package/lib-commonjs/components/Tooltip/index.d.ts

@@ -2,4 +2,4 @@ export * from './Tooltip';
 export * from './Tooltip.types';
 export * from './renderTooltip';
 export * from './useTooltip';
-export { useTooltipStyles } from './useTooltipStyles';
+export * from './useTooltipStyles';

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

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTooltipStyles = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./Tooltip"), exports);
 
@@ -15,12 +14,5 @@ tslib_1.__exportStar(require("./renderTooltip"), exports);
 
 tslib_1.__exportStar(require("./useTooltip"), exports);
 
-var useTooltipStyles_1 = /*#__PURE__*/require("./useTooltipStyles");
-
-Object.defineProperty(exports, "useTooltipStyles", {
-  enumerable: true,
-  get: function () {
-    return useTooltipStyles_1.useTooltipStyles;
-  }
-});
+tslib_1.__exportStar(require("./useTooltipStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tooltip/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,IAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,kBAAA,CAAA,gBAAA;AAAgB;AAAhB,CAAA","sourceRoot":""}
+{"version":3,"sources":["components/Tooltip/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Tooltip';\nexport * from './Tooltip.types';\nexport * from './renderTooltip';\nexport * from './useTooltip';\nexport * from './useTooltipStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Tooltip/private/constants.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The height of the tooltip's arrow in pixels.
+ */
+export declare const 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.
+ */
+export declare const tooltipBorderRadius = 4;

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

@@ -0,0 +1,21 @@
+"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-commonjs/components/Tooltip/private/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Tooltip/private/constants.ts"],"names":[],"mappings":";;;;;;AAAA;;AAEG;;AACU,OAAA,CAAA,WAAA,GAAc,CAAd;AAEb;;;;;;AAMG;;AACU,OAAA,CAAA,mBAAA,GAAsB,CAAtB","sourcesContent":["/**\n * The height of the tooltip's arrow in pixels.\n */\nexport const arrowHeight = 6;\n\n/**\n * The default value of the tooltip's border radius (borderRadiusMedium).\n *\n * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.\n * While we could use getComputedStyle, that adds a performance penalty for something that\n * will likely never change.\n */\nexport const tooltipBorderRadius = 4;\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Tooltip/renderTooltip.d.ts

@@ -2,4 +2,4 @@ import type { TooltipState } from './Tooltip.types';
 /**
  * Render the final JSX of Tooltip
  */
-export declare const renderTooltip: (state: TooltipState) => JSX.Element;
+export declare const renderTooltip_unstable: (state: TooltipState) => JSX.Element;

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

@@ -3,30 +3,29 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderTooltip = void 0;
+exports.renderTooltip_unstable = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const React = /*#__PURE__*/require("react");
 
-var React = /*#__PURE__*/require("react");
+const react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
 
-var react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
-
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Render the final JSX of Tooltip
  */
 
 
-var renderTooltip = function (state) {
-  var _a = react_utilities_1.getSlots(state, ['root']),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return React.createElement(React.Fragment, null, state.root.children, state.shouldRenderTooltip && React.createElement(react_portal_1.Portal, null, React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), state.withArrow && React.createElement("div", {
+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, null, React.createElement(slots.content, { ...slotProps.content
+  }, state.withArrow && React.createElement("div", {
     ref: state.arrowRef,
     className: state.arrowClassName
-  }), state.content)));
+  }), state.content.children)));
 };
 
-exports.renderTooltip = renderTooltip;
+exports.renderTooltip_unstable = renderTooltip_unstable;
 //# sourceMappingURL=renderTooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tooltip/renderTooltip.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,aAAa,GAAG,UAAC,KAAD,EAAoB;AACzC,MAAA,EAAA,GAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,EAA8B,CAAC,MAAD,CAA9B,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,SACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEG,KAAK,CAAC,mBAAN,IACC,KAAA,CAAA,aAAA,CAAC,cAAA,CAAA,MAAD,EAAO,IAAP,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,SAAN,IAAmB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,GAAG,EAAE,KAAK,CAAC,QAAhB;AAA0B,IAAA,SAAS,EAAE,KAAK,CAAC;AAA3C,GAAA,CADtB,EAEG,KAAK,CAAC,OAFT,CADF,CAHJ,CADF;AAaD,CAhBM;;AAAM,OAAA,CAAA,aAAA,GAAa,aAAb","sourceRoot":""}
+{"version":3,"sources":["components/Tooltip/renderTooltip.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,KAAK,CAAC,QADT,EAEG,KAAK,CAAC,mBAAN,IACC,KAAA,CAAA,aAAA,CAAC,cAAA,CAAA,MAAD,EAAO,IAAP,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,EACG,KAAK,CAAC,SAAN,IAAmB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,GAAG,EAAE,KAAK,CAAC,QAAhB;AAA0B,IAAA,SAAS,EAAE,KAAK,CAAC;AAA3C,GAAA,CADtB,EAEG,KAAK,CAAC,OAAN,CAAc,QAFjB,CADF,CAHJ,CADF;AAaD,CAhBM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","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>\n          <slots.content {...slotProps.content}>\n            {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n            {state.content.children}\n          </slots.content>\n        </Portal>\n      )}\n    </>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Tooltip/useTooltip.d.ts

@@ -1,13 +1,10 @@
-import * as React from 'react';
 import type { TooltipProps, TooltipState } from './Tooltip.types';
 /**
  * Create the state required to render Tooltip.
  *
- * The returned state can be modified with hooks such as useTooltipStyles,
- * before being passed to renderTooltip.
+ * 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
- * @param ref - reference to root HTMLElement of Tooltip
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
-export declare const useTooltip: (props: TooltipProps, ref: React.Ref<HTMLDivElement>) => TooltipState;
+export declare const useTooltip_unstable: (props: TooltipProps) => TooltipState;

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

@@ -3,67 +3,54 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useTooltip = void 0;
+exports.useTooltip_unstable = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const React = /*#__PURE__*/require("react");
 
-var React = /*#__PURE__*/require("react");
+const react_positioning_1 = /*#__PURE__*/require("@fluentui/react-positioning");
 
-var react_positioning_1 = /*#__PURE__*/require("@fluentui/react-positioning");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 
-var react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
-
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities"); // Style values that are required for popper to properly position the tooltip
-
-
-var tooltipBorderRadius = 4; // Update the root's borderRadius in useTooltipStyles.ts if this changes
-
-var arrowHeight = 6; // Update the arrow's width/height in useTooltipStyles.ts if this changes
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
+const constants_1 = /*#__PURE__*/require("./private/constants");
 /**
  * Create the state required to render Tooltip.
  *
- * The returned state can be modified with hooks such as useTooltipStyles,
- * before being passed to renderTooltip.
+ * 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
- * @param ref - reference to root HTMLElement of Tooltip
- * @param defaultProps - (optional) default prop values provided by the implementing type
  */
 
-var useTooltip = function (props, ref) {
+
+const useTooltip_unstable = props => {
   var _a, _b, _c, _d;
 
-  var context = React.useContext(react_shared_contexts_1.TooltipContext);
-  var isServerSideRender = react_utilities_1.useIsSSR();
-  var targetDocument = react_shared_contexts_1.useFluent().targetDocument;
-
-  var _e = react_utilities_1.useTimeout(),
-      setDelayTimeout = _e[0],
-      clearDelayTimeout = _e[1];
-
-  var content = props.content,
-      inverted = props.inverted,
-      withArrow = props.withArrow,
-      positioning = props.positioning,
-      onVisibleChange = props.onVisibleChange,
-      _f = props.triggerAriaAttribute,
-      triggerAriaAttribute = _f === void 0 ? 'label' : _f,
-      _g = props.showDelay,
-      showDelay = _g === void 0 ? 250 : _g,
-      _h = props.hideDelay,
-      hideDelay = _h === void 0 ? 250 : _h;
-
-  var _j = react_utilities_1.useControllableState({
+  const context = React.useContext(react_shared_contexts_1.TooltipContext);
+  const isServerSideRender = react_utilities_1.useIsSSR();
+  const {
+    targetDocument
+  } = react_shared_contexts_1.useFluent();
+  const [setDelayTimeout, clearDelayTimeout] = react_utilities_1.useTimeout();
+  const {
+    appearance,
+    children,
+    content,
+    withArrow,
+    positioning,
+    onVisibleChange,
+    relationship,
+    showDelay = 250,
+    hideDelay = 250
+  } = props;
+  const [visible, setVisibleInternal] = react_utilities_1.useControllableState({
     state: props.visible,
     initialState: false
-  }),
-      visible = _j[0],
-      setVisibleInternal = _j[1];
-
-  var setVisible = React.useCallback(function (newVisible, ev) {
+  });
+  const setVisible = React.useCallback((newVisible, ev) => {
     clearDelayTimeout();
-    setVisibleInternal(function (oldVisible) {
+    setVisibleInternal(oldVisible => {
       if (newVisible !== oldVisible) {
         onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(ev, {
           visible: newVisible
@@ -73,76 +60,73 @@ var useTooltip = function (props, ref) {
       return newVisible;
     });
   }, [clearDelayTimeout, setVisibleInternal, onVisibleChange]);
-  var state = {
-    content: content,
-    inverted: inverted,
-    withArrow: withArrow,
-    positioning: positioning,
-    showDelay: showDelay,
-    hideDelay: hideDelay,
-    triggerAriaAttribute: triggerAriaAttribute,
-    visible: visible,
+  const state = {
+    withArrow,
+    positioning,
+    showDelay,
+    hideDelay,
+    relationship,
+    visible,
     shouldRenderTooltip: visible,
-    appearance: props.appearance,
+    appearance,
     // Slots
     components: {
-      root: 'div'
+      content: 'div'
     },
-    root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign({
-      role: 'tooltip'
-    }, props), {
-      ref: ref,
-      id: react_utilities_1.useId('tooltip-', props.id)
-    }))
+    content: react_utilities_1.resolveShorthand(content, {
+      defaultProps: {
+        role: 'tooltip'
+      },
+      required: true
+    })
   };
-
-  var popperOptions = tslib_1.__assign({
+  state.content.id = react_utilities_1.useId('tooltip-', state.content.id);
+  const popperOptions = {
     enabled: state.visible,
-    arrowPadding: 2 * tooltipBorderRadius,
+    arrowPadding: 2 * constants_1.tooltipBorderRadius,
     position: 'above',
     align: 'center',
-    offset: [0, 4]
-  }, react_positioning_1.resolvePositioningShorthand(state.positioning));
+    offset: [0, 4],
+    ...react_positioning_1.resolvePositioningShorthand(state.positioning)
+  };
 
   if (state.withArrow) {
-    popperOptions.offset = react_positioning_1.mergeArrowOffset(popperOptions.offset, arrowHeight);
+    popperOptions.offset = react_positioning_1.mergeArrowOffset(popperOptions.offset, constants_1.arrowHeight);
   }
 
-  var _k = react_positioning_1.usePopper(popperOptions),
-      targetRef = _k.targetRef,
-      containerRef = _k.containerRef,
-      arrowRef = _k.arrowRef;
-
-  state.root.ref = react_utilities_1.useMergedRefs(state.root.ref, containerRef);
+  const {
+    targetRef,
+    containerRef,
+    arrowRef
+  } = react_positioning_1.usePopper(popperOptions);
+  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 () {
+  react_utilities_1.useIsomorphicLayoutEffect(() => {
     var _a;
 
     if (visible) {
-      var thisTooltip_1 = {
-        hide: function () {
-          return setVisible(false);
-        }
+      const thisTooltip = {
+        hide: () => setVisible(false)
       };
       (_a = context.visibleTooltip) === null || _a === void 0 ? void 0 : _a.hide();
-      context.visibleTooltip = thisTooltip_1;
+      context.visibleTooltip = thisTooltip;
 
-      var onDocumentKeyDown_1 = function (ev) {
+      const onDocumentKeyDown = ev => {
         if (ev.key === 'Escape' || ev.key === 'Esc') {
-          thisTooltip_1.hide();
+          thisTooltip.hide();
         }
       };
 
-      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown_1);
-      return function () {
-        if (context.visibleTooltip === thisTooltip_1) {
+      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown);
+      return () => {
+        if (context.visibleTooltip === thisTooltip) {
           context.visibleTooltip = undefined;
         }
 
-        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown_1);
+        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown);
       };
     }
   }, [context, targetDocument, visible, setVisible]); // The focused element gets a blur event when the document loses focus
@@ -151,24 +135,24 @@ var useTooltip = function (props, ref) {
   // 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
+  const ignoreNextFocusEventRef = React.useRef(false); // Listener for onPointerEnter and onFocus on the trigger element
 
-  var onEnterTrigger = React.useCallback(function (ev) {
+  const onEnterTrigger = React.useCallback(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 () {
+    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
 
-  var onLeaveTrigger = React.useCallback(function (ev) {
-    var delay = state.hideDelay;
+  const onLeaveTrigger = React.useCallback(ev => {
+    let delay = state.hideDelay;
 
     if (ev.type === 'blur') {
       // Hide immediately when losing focus
@@ -176,63 +160,48 @@ var useTooltip = function (props, ref) {
       ignoreNextFocusEventRef.current = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === ev.target;
     }
 
-    setDelayTimeout(function () {
+    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 pointer enters the tooltip, and restart it when the mouse leaves.
   // This keeps the tooltip visible when the pointer is moved over it.
 
-  state.root.onPointerEnter = useMergedCallbacks(state.root.onPointerEnter, clearDelayTimeout);
-  state.root.onPointerLeave = useMergedCallbacks(state.root.onPointerLeave, onLeaveTrigger);
-  var child = React.isValidElement(state.root.children) ? state.root.children : undefined; // The props to add to the trigger element (child)
+  state.content.onPointerEnter = react_utilities_1.useMergedEventCallbacks(state.content.onPointerEnter, clearDelayTimeout);
+  state.content.onPointerLeave = react_utilities_1.useMergedEventCallbacks(state.content.onPointerLeave, onLeaveTrigger);
+  const child = React.isValidElement(children) ? react_utilities_1.getTriggerChild(children) : undefined;
+  const triggerAriaProps = {};
 
-  var triggerProps = {
-    onPointerEnter: useMergedCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onPointerEnter, onEnterTrigger),
-    onPointerLeave: useMergedCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onPointerLeave, onLeaveTrigger),
-    onFocus: useMergedCallbacks((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.onFocus, onEnterTrigger),
-    onBlur: useMergedCallbacks((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.onBlur, onLeaveTrigger)
-  }; // If the target prop is not provided, attach targetRef to the trigger element's ref prop
+  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 if (!isServerSideRender) {
+      triggerAriaProps['aria-labelledby'] = state.content.id; // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
 
-  var childWithRef = child;
-  var childTargetRef = react_utilities_1.useMergedRefs(childWithRef === null || childWithRef === void 0 ? void 0 : childWithRef.ref, targetRef);
-
-  if (popperOptions.target === undefined) {
-    triggerProps.ref = childTargetRef;
-  }
+      state.shouldRenderTooltip = true;
+    }
+  } else if (relationship === 'description') {
+    if (!isServerSideRender) {
+      triggerAriaProps['aria-describedby'] = state.content.id; // Always render the tooltip even if hidden, so that aria-describedby refers to a valid element
 
-  if (state.triggerAriaAttribute === 'label') {
-    // aria-label only works if the content is a string. Otherwise, need to use labelledby.
-    if (typeof state.content === 'string') {
-      triggerProps['aria-label'] = state.content;
-    } else {
-      state.triggerAriaAttribute = 'labelledby';
+      state.shouldRenderTooltip = true;
     }
   }
 
-  if (state.triggerAriaAttribute === 'labelledby' && !isServerSideRender) {
-    triggerProps['aria-labelledby'] = state.root.id; // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element
-
-    state.shouldRenderTooltip = true;
-  } else if (state.triggerAriaAttribute === 'describedby' && !isServerSideRender) {
-    triggerProps['aria-describedby'] = state.root.id;
-    state.shouldRenderTooltip = true;
-  } // Apply the trigger props to the child, either by calling the render function, or cloning with the new props
-
-
-  state.root.children = react_utilities_1.applyTriggerPropsToChildren(state.root.children, triggerProps);
+  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: popperOptions.target === undefined ? childTargetRef : child === null || child === void 0 ? void 0 : child.ref,
+    onPointerEnter: react_utilities_1.useMergedEventCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onPointerEnter, onEnterTrigger),
+    onPointerLeave: react_utilities_1.useMergedEventCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onPointerLeave, onLeaveTrigger),
+    onFocus: react_utilities_1.useMergedEventCallbacks((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.onFocus, onEnterTrigger),
+    onBlur: react_utilities_1.useMergedEventCallbacks((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.onBlur, onLeaveTrigger)
+  });
   return state;
 };
 
-exports.useTooltip = useTooltip;
-/**
- * Combine up to two event callbacks into a single function that calls them in order
- */
-
-var useMergedCallbacks = function (callback1, callback2) {
-  return React.useCallback(function (ev) {
-    callback1 === null || callback1 === void 0 ? void 0 : callback1(ev);
-    callback2 === null || callback2 === void 0 ? void 0 : callback2(ev);
-  }, [callback1, callback2]);
-};
+exports.useTooltip_unstable = useTooltip_unstable;
 //# sourceMappingURL=useTooltip.js.map