@fluentui/react-tooltip 9.2.4 → 9.2.5

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"useTooltip.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { mergeArrowOffset, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport {\n  useTooltipVisibility_unstable as useTooltipVisibility,\n  useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport {\n  applyTriggerPropsToChildren,\n  resolveShorthand,\n  useControllableState,\n  useId,\n  useIsomorphicLayoutEffect,\n  useIsSSR,\n  useMergedRefs,\n  useTimeout,\n  getTriggerChild,\n  mergeCallbacks,\n  useEventCallback,\n} from '@fluentui/react-utilities';\nimport type { TooltipProps, TooltipState, TooltipChildProps } from './Tooltip.types';\nimport { arrowHeight, tooltipBorderRadius } from './private/constants';\nimport { Escape } from '@fluentui/keyboard-keys';\n\n/**\n * Create the state required to render Tooltip.\n *\n * The returned state can be modified with hooks such as useTooltipStyles_unstable,\n * before being passed to renderTooltip_unstable.\n *\n * @param props - props from this instance of Tooltip\n */\nexport const useTooltip_unstable = (props: TooltipProps): TooltipState => {\n  const context = useTooltipVisibility();\n  const isServerSideRender = useIsSSR();\n  const { targetDocument } = useFluent();\n  const [setDelayTimeout, clearDelayTimeout] = useTimeout();\n\n  const {\n    appearance = 'normal',\n    children,\n    content,\n    withArrow = false,\n    positioning = 'above',\n    onVisibleChange,\n    relationship,\n    showDelay = 250,\n    hideDelay = 250,\n    mountNode,\n  } = props;\n\n  const [visible, setVisibleInternal] = useControllableState({ state: props.visible, initialState: false });\n  const setVisible = React.useCallback(\n    (newVisible: boolean, ev?: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n      clearDelayTimeout();\n      setVisibleInternal(oldVisible => {\n        if (newVisible !== oldVisible) {\n          onVisibleChange?.(ev, { visible: newVisible });\n        }\n        return newVisible;\n      });\n    },\n    [clearDelayTimeout, setVisibleInternal, onVisibleChange],\n  );\n\n  const state: TooltipState = {\n    withArrow,\n    positioning,\n    showDelay,\n    hideDelay,\n    relationship,\n    visible,\n    shouldRenderTooltip: visible,\n    appearance,\n    mountNode,\n    // Slots\n    components: {\n      content: 'div',\n    },\n    content: resolveShorthand(content, {\n      defaultProps: {\n        role: 'tooltip',\n      },\n      required: true,\n    }),\n  };\n\n  state.content.id = useId('tooltip-', state.content.id);\n\n  const positioningOptions = {\n    enabled: state.visible,\n    arrowPadding: 2 * tooltipBorderRadius,\n    position: 'above' as const,\n    align: 'center' as const,\n    offset: 4,\n    ...resolvePositioningShorthand(state.positioning),\n  };\n\n  if (state.withArrow) {\n    positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeight);\n  }\n\n  const {\n    targetRef,\n    containerRef,\n    arrowRef,\n  }: {\n    targetRef: React.MutableRefObject<unknown>;\n    containerRef: React.MutableRefObject<HTMLDivElement>;\n    arrowRef: React.MutableRefObject<HTMLDivElement>;\n  } = usePositioning(positioningOptions);\n\n  state.content.ref = useMergedRefs(state.content.ref, containerRef);\n  state.arrowRef = arrowRef;\n\n  // When this tooltip is visible, hide any other tooltips, and register it\n  // as the visibleTooltip with the TooltipContext.\n  // Also add a listener on document to hide the tooltip if Escape is pressed\n  useIsomorphicLayoutEffect(() => {\n    if (visible) {\n      const thisTooltip = { hide: () => setVisible(false) };\n\n      context.visibleTooltip?.hide();\n      context.visibleTooltip = thisTooltip;\n\n      const onDocumentKeyDown = (ev: KeyboardEvent) => {\n        if (ev.key === Escape) {\n          thisTooltip.hide();\n          // stop propagation to avoid conflicting with other elements that listen for `Escape`\n          // e,g: Dialog, Popover, Menu\n          ev.stopPropagation();\n        }\n      };\n\n      targetDocument?.addEventListener('keydown', onDocumentKeyDown, {\n        // As this event is added at targeted document,\n        // we need to capture the event to be sure keydown handling from tooltip happens first\n        capture: true,\n      });\n\n      return () => {\n        if (context.visibleTooltip === thisTooltip) {\n          context.visibleTooltip = undefined;\n        }\n\n        targetDocument?.removeEventListener('keydown', onDocumentKeyDown, { capture: true });\n      };\n    }\n  }, [context, targetDocument, visible, setVisible]);\n\n  // The focused element gets a blur event when the document loses focus\n  // (e.g. switching tabs in the browser), but we don't want to show the\n  // tooltip again when the document gets focus back. Handle this case by\n  // checking if the blurred element is still the document's activeElement.\n  // See https://github.com/microsoft/fluentui/issues/13541\n  const ignoreNextFocusEventRef = React.useRef(false);\n\n  // Listener for onPointerEnter and onFocus on the trigger element\n  const onEnterTrigger = React.useCallback(\n    (ev: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n      if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {\n        ignoreNextFocusEventRef.current = false;\n        return;\n      }\n\n      // Show immediately if another tooltip is already visible\n      const delay = context.visibleTooltip ? 0 : state.showDelay;\n\n      setDelayTimeout(() => {\n        setVisible(true, ev);\n      }, delay);\n\n      ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n    },\n    [setDelayTimeout, setVisible, state.showDelay, context],\n  );\n\n  // Listener for onPointerLeave and onBlur on the trigger element\n  const onLeaveTrigger = React.useCallback(\n    (ev: React.PointerEvent<HTMLElement> | React.FocusEvent<HTMLElement>) => {\n      let delay = state.hideDelay;\n\n      if (ev.type === 'blur') {\n        // Hide immediately when losing focus\n        delay = 0;\n\n        ignoreNextFocusEventRef.current = targetDocument?.activeElement === ev.target;\n      }\n\n      setDelayTimeout(() => {\n        setVisible(false, ev);\n      }, delay);\n\n      ev.persist(); // Persist the event since the setVisible call will happen asynchronously\n    },\n    [setDelayTimeout, setVisible, state.hideDelay, targetDocument],\n  );\n\n  // Cancel the hide timer when the mouse or focus enters the tooltip, and restart it when the mouse or focus leaves.\n  // This keeps the tooltip visible when the mouse is moved over it, or it has focus within.\n  state.content.onPointerEnter = mergeCallbacks(state.content.onPointerEnter, clearDelayTimeout);\n  state.content.onPointerLeave = mergeCallbacks(state.content.onPointerLeave, onLeaveTrigger);\n  state.content.onFocus = mergeCallbacks(state.content.onFocus, clearDelayTimeout);\n  state.content.onBlur = mergeCallbacks(state.content.onBlur, onLeaveTrigger);\n\n  const child = getTriggerChild(children);\n\n  const triggerAriaProps: Pick<TooltipChildProps, 'aria-label' | 'aria-labelledby' | 'aria-describedby'> = {};\n\n  if (relationship === 'label') {\n    // aria-label only works if the content is a string. Otherwise, need to use aria-labelledby.\n    if (typeof state.content.children === 'string') {\n      triggerAriaProps['aria-label'] = state.content.children;\n    } else {\n      triggerAriaProps['aria-labelledby'] = state.content.id;\n      // Always render the tooltip even if hidden, so that aria-labelledby refers to a valid element\n      state.shouldRenderTooltip = true;\n    }\n  } else if (relationship === 'description') {\n    triggerAriaProps['aria-describedby'] = state.content.id;\n    // Always render the tooltip even if hidden, so that aria-describedby refers to a valid element\n    state.shouldRenderTooltip = true;\n  }\n\n  // Don't render the Tooltip in SSR to avoid hydration errors\n  if (isServerSideRender) {\n    state.shouldRenderTooltip = false;\n  }\n\n  const childTargetRef = useMergedRefs(child?.ref, targetRef);\n\n  // Apply the trigger props to the child, either by calling the render function, or cloning with the new props\n  state.children = applyTriggerPropsToChildren(children, {\n    ...triggerAriaProps,\n    ...child?.props,\n    // If the target prop is not provided, attach targetRef to the trigger element's ref prop\n    ref: positioningOptions.target === undefined ? childTargetRef : child?.ref,\n    onPointerEnter: useEventCallback(mergeCallbacks(child?.props?.onPointerEnter, onEnterTrigger)),\n    onPointerLeave: useEventCallback(mergeCallbacks(child?.props?.onPointerLeave, onLeaveTrigger)),\n    onFocus: useEventCallback(mergeCallbacks(child?.props?.onFocus, onEnterTrigger)),\n    onBlur: useEventCallback(mergeCallbacks(child?.props?.onBlur, onLeaveTrigger)),\n  });\n\n  return state;\n};\n"]}

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

@@ -1,36 +0,0 @@
-define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-positioning", "@fluentui/react-theme", "./private/constants"], function (require, exports, tslib_1, react_1, react_positioning_1, react_theme_1, constants_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useTooltipStyles_unstable = exports.tooltipClassNames = void 0;
-    exports.tooltipClassNames = {
-        content: 'fui-Tooltip__content',
-    };
-    /**
-     * Styles for the tooltip
-     */
-    var useStyles = react_1.makeStyles({
-        root: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ display: 'none', boxSizing: 'border-box', maxWidth: '240px', cursor: 'default', fontFamily: react_theme_1.tokens.fontFamilyBase, fontSize: react_theme_1.tokens.fontSizeBase200, lineHeight: react_theme_1.tokens.lineHeightBase200 }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), react_1.shorthands.border('1px', 'solid', react_theme_1.tokens.colorTransparentStroke)), react_1.shorthands.padding('4px', '11px', '6px', '11px')), { backgroundColor: react_theme_1.tokens.colorNeutralBackground1, color: react_theme_1.tokens.colorNeutralForeground1, 
-            // TODO need to add versions of tokens.alias.shadow.shadow8, etc. that work with filter
-            filter: "drop-shadow(0 0 2px " + react_theme_1.tokens.colorNeutralShadowAmbient + ") " +
-                ("drop-shadow(0 4px 8px " + react_theme_1.tokens.colorNeutralShadowKey + ")") }),
-        visible: {
-            display: 'block',
-        },
-        inverted: {
-            backgroundColor: react_theme_1.tokens.colorNeutralBackgroundStatic,
-            color: react_theme_1.tokens.colorNeutralForegroundStaticInverted,
-        },
-        arrow: react_positioning_1.createArrowStyles({ arrowHeight: constants_1.arrowHeight }),
-    });
-    /**
-     * Apply styling to the Tooltip slots based on the state
-     */
-    var useTooltipStyles_unstable = function (state) {
-        var styles = useStyles();
-        state.content.className = react_1.mergeClasses(exports.tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);
-        state.arrowClassName = styles.arrow;
-        return state;
-    };
-    exports.useTooltipStyles_unstable = useTooltipStyles_unstable;
-});
-//# sourceMappingURL=useTooltipStyles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useTooltipStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tooltip/src/components/Tooltip/useTooltipStyles.ts"],"names":[],"mappings":";;;;IAOa,QAAA,iBAAiB,GAAiC;QAC7D,OAAO,EAAE,sBAAsB;KAChC,CAAC;IAEF;;OAEG;IACH,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,wEACF,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,YAAY,EACvB,QAAQ,EAAE,OAAO,EACjB,MAAM,EAAE,SAAS,EACjB,UAAU,EAAE,oBAAM,CAAC,cAAc,EACjC,QAAQ,EAAE,oBAAM,CAAC,eAAe,EAChC,UAAU,EAAE,oBAAM,CAAC,iBAAiB,IAEjC,kBAAU,CAAC,YAAY,CAAC,oBAAM,CAAC,kBAAkB,CAAC,GAClD,kBAAU,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,oBAAM,CAAC,sBAAsB,CAAC,GAChE,kBAAU,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,KACnD,eAAe,EAAE,oBAAM,CAAC,uBAAuB,EAC/C,KAAK,EAAE,oBAAM,CAAC,uBAAuB;YAErC,uFAAuF;YACvF,MAAM,EACJ,yBAAuB,oBAAM,CAAC,yBAAyB,OAAI;iBAC3D,2BAAyB,oBAAM,CAAC,qBAAqB,MAAG,CAAA,GAC3D;QAED,OAAO,EAAE;YACP,OAAO,EAAE,OAAO;SACjB;QAED,QAAQ,EAAE;YACR,eAAe,EAAE,oBAAM,CAAC,4BAA4B;YACpD,KAAK,EAAE,oBAAM,CAAC,oCAAoC;SACnD;QAED,KAAK,EAAE,qCAAiB,CAAC,EAAE,WAAW,yBAAA,EAAE,CAAC;KAC1C,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,yBAAyB,GAAG,UAAC,KAAmB;QAC3D,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAE3B,KAAK,CAAC,OAAO,CAAC,SAAS,GAAG,oBAAY,CACpC,yBAAiB,CAAC,OAAO,EACzB,MAAM,CAAC,IAAI,EACX,KAAK,CAAC,UAAU,KAAK,UAAU,IAAI,MAAM,CAAC,QAAQ,EAClD,KAAK,CAAC,OAAO,IAAI,MAAM,CAAC,OAAO,EAC/B,KAAK,CAAC,OAAO,CAAC,SAAS,CACxB,CAAC;QAEF,KAAK,CAAC,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC;QAEpC,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAdW,QAAA,yBAAyB,6BAcpC","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { arrowHeight } from './private/constants';\nimport type { TooltipSlots, TooltipState } from './Tooltip.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const tooltipClassNames: SlotClassNames<TooltipSlots> = {\n  content: 'fui-Tooltip__content',\n};\n\n/**\n * Styles for the tooltip\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'none',\n    boxSizing: 'border-box',\n    maxWidth: '240px',\n    cursor: 'default',\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase200,\n    lineHeight: tokens.lineHeightBase200,\n\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),\n    ...shorthands.padding('4px', '11px', '6px', '11px'), // '5px 12px 7px 12px' minus the border width '1px'\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n\n    // TODO need to add versions of tokens.alias.shadow.shadow8, etc. that work with filter\n    filter:\n      `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` +\n      `drop-shadow(0 4px 8px ${tokens.colorNeutralShadowKey})`,\n  },\n\n  visible: {\n    display: 'block',\n  },\n\n  inverted: {\n    backgroundColor: tokens.colorNeutralBackgroundStatic,\n    color: tokens.colorNeutralForegroundStaticInverted,\n  },\n\n  arrow: createArrowStyles({ arrowHeight }),\n});\n\n/**\n * Apply styling to the Tooltip slots based on the state\n */\nexport const useTooltipStyles_unstable = (state: TooltipState): TooltipState => {\n  const styles = useStyles();\n\n  state.content.className = mergeClasses(\n    tooltipClassNames.content,\n    styles.root,\n    state.appearance === 'inverted' && styles.inverted,\n    state.visible && styles.visible,\n    state.content.className,\n  );\n\n  state.arrowClassName = styles.arrow;\n\n  return state;\n};\n"]}

package/lib-amd/index.js

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

package/lib-amd/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-tooltip/src/index.ts"],"names":[],"mappings":";;;;IACE,kGAAA,OAAO,OAAA;IACP,iHAAA,sBAAsB,OAAA;IACtB,4GAAA,iBAAiB,OAAA;IACjB,oHAAA,yBAAyB,OAAA;IACzB,8GAAA,mBAAmB,OAAA","sourcesContent":["export {\n  Tooltip,\n  renderTooltip_unstable,\n  tooltipClassNames,\n  useTooltipStyles_unstable,\n  useTooltip_unstable,\n} from './Tooltip';\nexport type {\n  OnVisibleChangeData,\n  TooltipProps,\n  TooltipSlots,\n  TooltipState,\n  TooltipChildProps as TooltipTriggerProps,\n} from './Tooltip';\n"]}