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

package/dist/index.d.ts

@@ -0,0 +1,152 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { FluentTriggerComponent } from '@fluentui/react-utilities';
+import type { PortalProps } from '@fluentui/react-portal';
+import type { PositioningShorthand } from '@fluentui/react-positioning';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * Data for the Tooltip's onVisibleChange event.
+ */
+export declare type OnVisibleChangeData = {
+    visible: boolean;
+};
+
+/**
+ * Render the final JSX of Tooltip
+ */
+export declare const renderTooltip_unstable: (state: TooltipState) => JSX.Element;
+
+/**
+ * A tooltip provides light weight contextual information on top of its target element.
+ */
+export declare const Tooltip: React_2.FC<TooltipProps> & FluentTriggerComponent;
+
+export declare const tooltipClassNames: SlotClassNames<TooltipSlots>;
+
+/**
+ * Properties for Tooltip
+ */
+export declare type TooltipProps = ComponentProps<TooltipSlots> & Pick<PortalProps, 'mountNode'> & {
+    /**
+     * 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.
+     *
+     * @default normal
+     */
+    appearance?: 'normal' | 'inverted';
+    /**
+     * 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_2.ReactElement & {
+        ref?: React_2.Ref<unknown>;
+    }) | ((props: TooltipTriggerProps) => React_2.ReactElement | null) | null;
+    /**
+     * Delay before the tooltip is hidden, in milliseconds.
+     *
+     * @default 250
+     */
+    hideDelay?: number;
+    /**
+     * Notification when the visibility of the tooltip is changing
+     */
+    onVisibleChange?: (event: React_2.PointerEvent<HTMLElement> | React_2.FocusEvent<HTMLElement> | undefined, data: OnVisibleChangeData) => void;
+    /**
+     * Configure the positioning of the tooltip
+     *
+     * @default above
+     */
+    positioning?: PositioningShorthand;
+    /**
+     * (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';
+    /**
+     * Delay before the tooltip is shown, in milliseconds.
+     *
+     * @default 250
+     */
+    showDelay?: number;
+    /**
+     * 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.
+     *
+     * @default false
+     */
+    visible?: boolean;
+    /**
+     * Render an arrow pointing to the target element
+     *
+     * @default false
+     */
+    withArrow?: boolean;
+};
+
+/**
+ * Slot properties for Tooltip
+ */
+export declare type TooltipSlots = {
+    /**
+     * The text or JSX content of the tooltip.
+     */
+    content: NonNullable<Slot<'div'>>;
+};
+
+/**
+ * State used in rendering Tooltip
+ */
+export declare type TooltipState = ComponentState<TooltipSlots> & Pick<TooltipProps, 'mountNode' | 'relationship'> & Required<Pick<TooltipProps, 'appearance' | 'hideDelay' | 'positioning' | 'showDelay' | 'visible' | 'withArrow'>> & {
+    children?: React_2.ReactElement | null;
+    /**
+     * Whether the tooltip should be rendered to the DOM.
+     */
+    shouldRenderTooltip?: boolean;
+    /**
+     * Ref to the arrow element
+     */
+    arrowRef?: React_2.Ref<HTMLDivElement>;
+    /**
+     * CSS class for the arrow element
+     */
+    arrowClassName?: string;
+};
+
+/**
+ * The properties that are added to the trigger of the Tooltip
+ */
+export declare type TooltipTriggerProps = {
+    ref?: React_2.Ref<never>;
+} & Pick<React_2.HTMLAttributes<HTMLElement>, 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'onBlur' | 'onFocus' | 'onPointerEnter' | 'onPointerLeave'>;
+
+/**
+ * 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
+ */
+export declare const useTooltip_unstable: (props: TooltipProps) => TooltipState;
+
+/**
+ * Apply styling to the Tooltip slots based on the state
+ */
+export declare const useTooltipStyles_unstable: (state: TooltipState) => TooltipState;
+
+export { }

package/lib/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../src/Tooltip.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"Tooltip.js","sourceRoot":"../src/","sources":["Tooltip.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/Tooltip/index';\n"]}

package/lib/components/Tooltip/Tooltip.js

@@ -1,15 +1,15 @@
-import * as React from 'react';
-import { useTooltip } from './useTooltip';
-import { renderTooltip } from './renderTooltip';
-import { useTooltipStyles } from './useTooltipStyles';
+import { useTooltip_unstable } from './useTooltip';
+import { renderTooltip_unstable } from './renderTooltip';
+import { useTooltipStyles_unstable } from './useTooltipStyles';
 /**
  * A tooltip provides light weight contextual information on top of its target element.
  */
 
-export var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useTooltip(props, ref);
-  useTooltipStyles(state);
-  return renderTooltip(state);
-});
+export const Tooltip = props => {
+  const state = useTooltip_unstable(props);
+  useTooltipStyles_unstable(state);
+  return renderTooltip_unstable(state);
+};
 Tooltip.displayName = 'Tooltip';
+Tooltip.isFluentTriggerComponent = true;
 //# sourceMappingURL=Tooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,UAAT,QAA2B,cAA3B;AACA,SAAS,aAAT,QAA8B,iBAA9B;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AAIA;;AAEG;;AACH,OAAO,IAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AACpF,MAAM,KAAK,GAAG,UAAU,CAAC,KAAD,EAAQ,GAAR,CAAxB;AAEA,EAAA,gBAAgB,CAAC,KAAD,CAAhB;AACA,SAAO,aAAa,CAAC,KAAD,CAApB;AACD,CALyD,CAAnD;AAOP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourceRoot":""}
+{"version":3,"sources":["components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAIA;;AAEG;;AACH,OAAO,MAAM,OAAO,GAAoD,KAAK,IAAG;AAC9E,QAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,CAAjC;AAEA,EAAA,yBAAyB,CAAC,KAAD,CAAzB;AACA,SAAO,sBAAsB,CAAC,KAAD,CAA7B;AACD,CALM;AAOP,OAAO,CAAC,WAAR,GAAsB,SAAtB;AACA,OAAO,CAAC,wBAAR,GAAmC,IAAnC","sourcesContent":["import * as React from 'react';\nimport { useTooltip_unstable } from './useTooltip';\nimport { renderTooltip_unstable } from './renderTooltip';\nimport { useTooltipStyles_unstable } from './useTooltipStyles';\nimport type { TooltipProps } from './Tooltip.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * A tooltip provides light weight contextual information on top of its target element.\n */\nexport const Tooltip: React.FC<TooltipProps> & FluentTriggerComponent = props => {\n  const state = useTooltip_unstable(props);\n\n  useTooltipStyles_unstable(state);\n  return renderTooltip_unstable(state);\n};\n\nTooltip.displayName = 'Tooltip';\nTooltip.isFluentTriggerComponent = true;\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.types.js","sourceRoot":"","sources":["../../../src/components/Tooltip/Tooltip.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"Tooltip.types.js","sourceRoot":"../src/","sources":["components/Tooltip/Tooltip.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PortalProps } from '@fluentui/react-portal';\n\n/**\n * Slot properties for Tooltip\n */\nexport type TooltipSlots = {\n  /**\n   * The text or JSX content of the tooltip.\n   */\n  content: NonNullable<Slot<'div'>>;\n};\n\n/**\n * The properties that are added to the trigger of the Tooltip\n */\nexport type TooltipTriggerProps = {\n  ref?: React.Ref<never>;\n} & Pick<\n  React.HTMLAttributes<HTMLElement>,\n  'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'onBlur' | 'onFocus' | 'onPointerEnter' | 'onPointerLeave'\n>;\n\n/**\n * Data for the Tooltip's onVisibleChange event.\n */\nexport type OnVisibleChangeData = {\n  visible: boolean;\n};\n\n/**\n * Properties for Tooltip\n */\nexport type TooltipProps = ComponentProps<TooltipSlots> &\n  Pick<PortalProps, 'mountNode'> & {\n    /**\n     * The tooltip's visual appearance.\n     * * `normal` - Uses the theme's background and text colors.\n     * * `inverted` - Higher contrast variant that uses the theme's inverted colors.\n     *\n     * @default normal\n     */\n    appearance?: 'normal' | 'inverted';\n\n    /**\n     * The tooltip can have a single JSX child, or a render function that accepts TooltipTriggerProps.\n     *\n     * If no child is provided, the tooltip's target must be set with the `positioning` prop, and its\n     * visibility must be controlled with the `visible` prop.\n     */\n    children?:\n      | (React.ReactElement & { ref?: React.Ref<unknown> })\n      | ((props: TooltipTriggerProps) => React.ReactElement | null)\n      | null;\n\n    /**\n     * Delay before the tooltip is hidden, in milliseconds.\n     *\n     * @default 250\n     */\n    hideDelay?: number;\n\n    /**\n     * Notification when the visibility of the tooltip is changing\n     */\n    onVisibleChange?: (\n      event: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement> | undefined,\n      data: OnVisibleChangeData,\n    ) => void;\n\n    /**\n     * Configure the positioning of the tooltip\n     *\n     * @default above\n     */\n    positioning?: PositioningShorthand;\n\n    /**\n     * (Required) Specifies whether this tooltip is acting as the description or label of its trigger element.\n     *\n     * * `label` - The tooltip sets the trigger's aria-label or aria-labelledby attribute. This is useful for buttons\n     *    displaying only an icon, for example.\n     * * `description` - The tooltip sets the trigger's aria-description or aria-describedby attribute.\n     * * `inaccessible` - No aria attributes are set on the trigger. This makes the tooltip's content inaccessible to\n     *   screen readers, and should only be used if the tooltip's text is available by some other means.\n     */\n    relationship: 'label' | 'description' | 'inaccessible';\n\n    /**\n     * Delay before the tooltip is shown, in milliseconds.\n     *\n     * @default 250\n     */\n    showDelay?: number;\n\n    /**\n     * Control the tooltip's visibility programatically.\n     *\n     * This can be used in conjunction with onVisibleChange to modify the tooltip's show and hide behavior.\n     *\n     * If not provided, the visibility will be controlled by the tooltip itself, based on hover and focus events on the\n     * trigger (child) element.\n     *\n     * @default false\n     */\n    visible?: boolean;\n\n    /**\n     * Render an arrow pointing to the target element\n     *\n     * @default false\n     */\n    withArrow?: boolean;\n  };\n\n/**\n * State used in rendering Tooltip\n */\nexport type TooltipState = ComponentState<TooltipSlots> &\n  Pick<TooltipProps, 'mountNode' | 'relationship'> &\n  Required<Pick<TooltipProps, 'appearance' | 'hideDelay' | 'positioning' | 'showDelay' | 'visible' | 'withArrow'>> & {\n    children?: React.ReactElement | null;\n\n    /**\n     * Whether the tooltip should be rendered to the DOM.\n     */\n    shouldRenderTooltip?: boolean;\n\n    /**\n     * Ref to the arrow element\n     */\n    arrowRef?: React.Ref<HTMLDivElement>;\n\n    /**\n     * CSS class for the arrow element\n     */\n    arrowClassName?: string;\n  };\n"]}

package/lib/components/Tooltip/index.js

@@ -2,5 +2,5 @@ export * from './Tooltip';
 export * from './Tooltip.types';
 export * from './renderTooltip';
 export * from './useTooltip';
-export { useTooltipStyles } from './useTooltipStyles';
+export * from './useTooltipStyles';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Tooltip/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './Tooltip';\nexport * from './Tooltip.types';\nexport * from './renderTooltip';\nexport * from './useTooltip';\nexport * from './useTooltipStyles';\n"]}

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

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

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

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

package/lib/components/Tooltip/renderTooltip.js

@@ -1,4 +1,3 @@
-import { __assign } from "tslib";
 import * as React from 'react';
 import { Portal } from '@fluentui/react-portal';
 import { getSlots } from '@fluentui/react-utilities';
@@ -6,14 +5,17 @@ import { getSlots } from '@fluentui/react-utilities';
  * Render the final JSX of Tooltip
  */
 
-export var renderTooltip = function (state) {
-  var _a = getSlots(state, ['root']),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, state.root.children, state.shouldRenderTooltip && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), state.withArrow && /*#__PURE__*/React.createElement("div", {
+export const renderTooltip_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, state.children, state.shouldRenderTooltip && /*#__PURE__*/React.createElement(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)));
+  }), state.content.children)));
 };
 //# sourceMappingURL=renderTooltip.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tooltip/renderTooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,IAAM,aAAa,GAAG,UAAC,KAAD,EAAoB;AACzC,MAAA,EAAA,GAAuB,QAAQ,CAAe,KAAf,EAAsB,CAAC,MAAD,CAAtB,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEG,KAAK,CAAC,mBAAN,iBACC,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,IAAP,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,SAAN,iBAAmB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,GAAG,EAAE,KAAK,CAAC,QAAhB;AAA0B,IAAA,SAAS,EAAE,KAAK,CAAC;AAA3C,GAAA,CADtB,EAEG,KAAK,CAAC,OAFT,CADF,CAHJ,CADF;AAaD,CAhBM","sourceRoot":""}
+{"version":3,"sources":["components/Tooltip/renderTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAe,KAAf,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EACG,KAAK,CAAC,QADT,EAEG,KAAK,CAAC,mBAAN,iBACC,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO;AAAC,IAAA,SAAS,EAAE,KAAK,CAAC;AAAlB,GAAP,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,EACG,KAAK,CAAC,SAAN,iBAAmB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,IAAA,GAAG,EAAE,KAAK,CAAC,QAAhB;AAA0B,IAAA,SAAS,EAAE,KAAK,CAAC;AAA3C,GAAA,CADtB,EAEG,KAAK,CAAC,OAAN,CAAc,QAFjB,CADF,CAHJ,CADF;AAaD,CAhBM","sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TooltipSlots, TooltipState } from './Tooltip.types';\n\n/**\n * Render the final JSX of Tooltip\n */\nexport const renderTooltip_unstable = (state: TooltipState) => {\n  const { slots, slotProps } = getSlots<TooltipSlots>(state);\n\n  return (\n    <>\n      {state.children}\n      {state.shouldRenderTooltip && (\n        <Portal mountNode={state.mountNode}>\n          <slots.content {...slotProps.content}>\n            {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n            {state.content.children}\n          </slots.content>\n        </Portal>\n      )}\n    </>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Tooltip/useTooltip.js

@@ -1,57 +1,45 @@
-import { __assign } from "tslib";
 import * as React from 'react';
-import { mergeArrowOffset, resolvePositioningShorthand, usePopper } from '@fluentui/react-positioning';
+import { mergeArrowOffset, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';
 import { TooltipContext, useFluent } from '@fluentui/react-shared-contexts';
-import { applyTriggerPropsToChildren, getNativeElementProps, useControllableState, useId, useIsomorphicLayoutEffect, useIsSSR, useMergedRefs, useTimeout } from '@fluentui/react-utilities'; // Style values that are required for popper to properly position the tooltip
-
-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
-
+import { applyTriggerPropsToChildren, resolveShorthand, useControllableState, useMergedEventCallbacks, useId, useIsomorphicLayoutEffect, useIsSSR, useMergedRefs, useTimeout, getTriggerChild } from '@fluentui/react-utilities';
+import { arrowHeight, tooltipBorderRadius } from './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
  */
 
-export var useTooltip = function (props, ref) {
+export const useTooltip_unstable = props => {
   var _a, _b, _c, _d;
 
-  var context = React.useContext(TooltipContext);
-  var isServerSideRender = useIsSSR();
-  var targetDocument = useFluent().targetDocument;
-
-  var _e = 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 = useControllableState({
+  const context = React.useContext(TooltipContext);
+  const isServerSideRender = useIsSSR();
+  const {
+    targetDocument
+  } = useFluent();
+  const [setDelayTimeout, clearDelayTimeout] = useTimeout();
+  const {
+    appearance = 'normal',
+    children,
+    content,
+    withArrow = false,
+    positioning = 'above',
+    onVisibleChange,
+    relationship,
+    showDelay = 250,
+    hideDelay = 250,
+    mountNode
+  } = props;
+  const [visible, setVisibleInternal] = 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
@@ -61,76 +49,74 @@ export 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,
+    mountNode,
     // Slots
     components: {
-      root: 'div'
+      content: 'div'
     },
-    root: getNativeElementProps('div', __assign(__assign({
-      role: 'tooltip'
-    }, props), {
-      ref: ref,
-      id: useId('tooltip-', props.id)
-    }))
+    content: resolveShorthand(content, {
+      defaultProps: {
+        role: 'tooltip'
+      },
+      required: true
+    })
   };
-
-  var popperOptions = __assign({
+  state.content.id = useId('tooltip-', state.content.id);
+  const positioningOptions = {
     enabled: state.visible,
     arrowPadding: 2 * tooltipBorderRadius,
     position: 'above',
     align: 'center',
-    offset: [0, 4]
-  }, resolvePositioningShorthand(state.positioning));
+    offset: 4,
+    ...resolvePositioningShorthand(state.positioning)
+  };
 
   if (state.withArrow) {
-    popperOptions.offset = mergeArrowOffset(popperOptions.offset, arrowHeight);
+    positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeight);
   }
 
-  var _k = usePopper(popperOptions),
-      targetRef = _k.targetRef,
-      containerRef = _k.containerRef,
-      arrowRef = _k.arrowRef;
-
-  state.root.ref = useMergedRefs(state.root.ref, containerRef);
+  const {
+    targetRef,
+    containerRef,
+    arrowRef
+  } = usePositioning(positioningOptions);
+  state.content.ref = 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
 
-  useIsomorphicLayoutEffect(function () {
+  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
@@ -139,24 +125,24 @@ export 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
@@ -164,61 +150,46 @@ export 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 = /*#__PURE__*/React.isValidElement(state.root.children) ? state.root.children : undefined; // The props to add to the trigger element (child)
-
-  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
+  state.content.onPointerEnter = useMergedEventCallbacks(state.content.onPointerEnter, clearDelayTimeout);
+  state.content.onPointerLeave = useMergedEventCallbacks(state.content.onPointerLeave, onLeaveTrigger);
+  const child = /*#__PURE__*/React.isValidElement(children) ? getTriggerChild(children) : undefined;
+  const triggerAriaProps = {};
 
-  var childWithRef = child;
-  var childTargetRef = useMergedRefs(childWithRef === null || childWithRef === void 0 ? void 0 : childWithRef.ref, targetRef);
+  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
 
-  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 = applyTriggerPropsToChildren(state.root.children, triggerProps);
+  const childTargetRef = useMergedRefs(child === null || child === void 0 ? void 0 : child.ref, targetRef); // Apply the trigger props to the child, either by calling the render function, or cloning with the new props
+
+  state.children = 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: useMergedEventCallbacks((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onPointerEnter, onEnterTrigger),
+    onPointerLeave: useMergedEventCallbacks((_b = child === null || child === void 0 ? void 0 : child.props) === null || _b === void 0 ? void 0 : _b.onPointerLeave, onLeaveTrigger),
+    onFocus: useMergedEventCallbacks((_c = child === null || child === void 0 ? void 0 : child.props) === null || _c === void 0 ? void 0 : _c.onFocus, onEnterTrigger),
+    onBlur: useMergedEventCallbacks((_d = child === null || child === void 0 ? void 0 : child.props) === null || _d === void 0 ? void 0 : _d.onBlur, onLeaveTrigger)
+  });
   return state;
 };
-/**
- * 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]);
-};
 //# sourceMappingURL=useTooltip.js.map