Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

3370
node_modules/@fluentui/react-tooltip/CHANGELOG.md generated vendored Normal file

File diff suppressed because it is too large Load Diff

15
node_modules/@fluentui/react-tooltip/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,15 @@
@fluentui/react-tooltip
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

3
node_modules/@fluentui/react-tooltip/README.md generated vendored Normal file
View File

@@ -0,0 +1,3 @@
# @fluentui/react-tooltip
**React Tooltip components for [Fluent UI React](https://react.fluentui.dev)**

166
node_modules/@fluentui/react-tooltip/dist/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,166 @@
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { JSXElement } 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';
import type { TriggerProps } from '@fluentui/react-utilities';
/**
* Data for the Tooltip's onVisibleChange event.
*/
export declare type OnVisibleChangeData = {
visible: boolean;
/**
* The event object, if this visibility change was triggered by a keyboard event on the document element
* (such as Escape to hide the visible tooltip). Otherwise undefined.
*/
documentKeyboardEvent?: KeyboardEvent;
};
/**
* Render the final JSX of Tooltip
*/
export declare const renderTooltip_unstable: (state: TooltipBaseState) => JSXElement;
/**
* A tooltip provides light weight contextual information on top of its target element.
*/
export declare const Tooltip: React_2.FC<TooltipProps>;
export declare type TooltipBaseProps = Omit<TooltipProps, 'appearance'>;
export declare type TooltipBaseState = Omit<TooltipState, 'appearance'>;
export declare const tooltipClassNames: SlotClassNames<TooltipSlots>;
/**
* Properties for Tooltip
*/
export declare type TooltipProps = ComponentProps<TooltipSlots> & TriggerProps<TooltipTriggerProps> & 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';
/**
* Delay before the tooltip is hidden, in milliseconds.
*
* @default 250
*/
hideDelay?: number;
/**
* Notification when the visibility of the tooltip is changing.
*
* **Note**: for backwards compatibility, `event` will be undefined if this was triggered by a keyboard event on
* the document element. Use `data.documentKeyboardEvent` if the keyboard event object is needed.
*/
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?: JSXElement | 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 child of the Tooltip
*/
export declare type TooltipTriggerProps = {
ref?: React_2.Ref<unknown>;
} & Pick<React_2.HTMLAttributes<HTMLElement>, 'aria-describedby' | 'aria-label' | 'aria-labelledby' | 'onBlur' | 'onFocus' | 'onPointerEnter' | 'onPointerLeave' | 'aria-haspopup' | 'aria-expanded'>;
/**
* 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;
/**
* 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 useTooltipBase_unstable: (props: TooltipBaseProps) => TooltipBaseState;
/**
* Apply styling to the Tooltip slots based on the state
*/
export declare const useTooltipStyles_unstable: (state: TooltipState) => TooltipState;
export { }

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Tooltip: function() {
return _index.Tooltip;
},
renderTooltip_unstable: function() {
return _index.renderTooltip_unstable;
},
tooltipClassNames: function() {
return _index.tooltipClassNames;
},
useTooltipBase_unstable: function() {
return _index.useTooltipBase_unstable;
},
useTooltipStyles_unstable: function() {
return _index.useTooltipStyles_unstable;
},
useTooltip_unstable: function() {
return _index.useTooltip_unstable;
}
});
const _index = require("./components/Tooltip/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Tooltip.ts"],"sourcesContent":["export type {\n OnVisibleChangeData,\n TooltipChildProps,\n TooltipBaseProps,\n TooltipProps,\n TooltipSlots,\n TooltipBaseState,\n TooltipState,\n} from './components/Tooltip/index';\nexport {\n Tooltip,\n renderTooltip_unstable,\n tooltipClassNames,\n useTooltipStyles_unstable,\n useTooltip_unstable,\n useTooltipBase_unstable,\n} from './components/Tooltip/index';\n"],"names":["Tooltip","renderTooltip_unstable","tooltipClassNames","useTooltipStyles_unstable","useTooltip_unstable","useTooltipBase_unstable"],"mappings":";;;;;;;;;;;;eAUEA,cAAO;;;eACPC,6BAAsB;;;eACtBC,wBAAiB;;;eAGjBG,8BAAuB;;;eAFvBF,gCAAyB;;;eACzBC,0BAAmB;;;uBAEd,6BAA6B"}

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Tooltip", {
enumerable: true,
get: function() {
return Tooltip;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useTooltip = require("./useTooltip");
const _renderTooltip = require("./renderTooltip");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useTooltipStylesstyles = require("./useTooltipStyles.styles");
const Tooltip = (props)=>{
const state = (0, _useTooltip.useTooltip_unstable)(props);
(0, _useTooltipStylesstyles.useTooltipStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTooltipStyles_unstable')(state);
return (0, _renderTooltip.renderTooltip_unstable)(state);
};
Tooltip.displayName = 'Tooltip';
// type casting here is required to ensure internal type FluentTriggerComponent is not leaked
Tooltip.isFluentTriggerComponent = true;

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTooltip_unstable } from './useTooltip';\nimport { renderTooltip_unstable } from './renderTooltip';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useTooltipStyles_unstable } from './useTooltipStyles.styles';\nimport type { TooltipProps } from './Tooltip.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * A tooltip provides light weight contextual information on top of its target element.\n */\nexport const Tooltip: React.FC<TooltipProps> = props => {\n const state = useTooltip_unstable(props);\n\n useTooltipStyles_unstable(state);\n\n useCustomStyleHook_unstable('useTooltipStyles_unstable')(state);\n\n return renderTooltip_unstable(state);\n};\n\nTooltip.displayName = 'Tooltip';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(Tooltip as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["React","useTooltip_unstable","renderTooltip_unstable","useCustomStyleHook_unstable","useTooltipStyles_unstable","Tooltip","props","state","displayName","isFluentTriggerComponent"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;4BACK,eAAe;+BACZ,kBAAkB;qCACb,kCAAkC;wCACpC,4BAA4B;AAO/D,MAAMK,UAAkCC,CAAAA;IAC7C,MAAMC,YAAQN,+BAAAA,EAAoBK;QAElCF,iDAAAA,EAA0BG;QAE1BJ,gDAAAA,EAA4B,6BAA6BI;IAEzD,WAAOL,qCAAAA,EAAuBK;AAChC,EAAE;AAEFF,QAAQG,WAAW,GAAG;AACtB,6FAA6F;AAC5FH,QAAmCI,wBAAwB,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tooltip/Tooltip.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComponentProps, ComponentState, JSXElement, Slot, TriggerProps } from '@fluentui/react-utilities';\nimport type { PortalProps } from '@fluentui/react-portal';\n\n/**\n * Slot properties for Tooltip\n */\nexport type TooltipSlots = {\n /**\n * The text or JSX content of the tooltip.\n */\n content: NonNullable<Slot<'div'>>;\n};\n\n/**\n * The properties that are added to the child of the Tooltip\n */\nexport type TooltipChildProps = {\n ref?: React.Ref<unknown>;\n} & Pick<\n React.HTMLAttributes<HTMLElement>,\n | 'aria-describedby'\n | 'aria-label'\n | 'aria-labelledby'\n | 'onBlur'\n | 'onFocus'\n | 'onPointerEnter'\n | 'onPointerLeave'\n | 'aria-haspopup'\n | 'aria-expanded'\n>;\n\n/**\n * Data for the Tooltip's onVisibleChange event.\n */\nexport type OnVisibleChangeData = {\n visible: boolean;\n\n /**\n * The event object, if this visibility change was triggered by a keyboard event on the document element\n * (such as Escape to hide the visible tooltip). Otherwise undefined.\n */\n documentKeyboardEvent?: KeyboardEvent;\n};\n\n/**\n * Properties for Tooltip\n */\nexport type TooltipProps = ComponentProps<TooltipSlots> &\n TriggerProps<TooltipChildProps> &\n Pick<PortalProps, 'mountNode'> & {\n /**\n * The tooltip's visual appearance.\n * * `normal` - Uses the theme's background and text colors.\n * * `inverted` - Higher contrast variant that uses the theme's inverted colors.\n *\n * @default normal\n */\n appearance?: 'normal' | 'inverted';\n /**\n * Delay before the tooltip is hidden, in milliseconds.\n *\n * @default 250\n */\n hideDelay?: number;\n\n /**\n * Notification when the visibility of the tooltip is changing.\n *\n * **Note**: for backwards compatibility, `event` will be undefined if this was triggered by a keyboard event on\n * the document element. Use `data.documentKeyboardEvent` if the keyboard event object is needed.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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\nexport type TooltipBaseProps = Omit<TooltipProps, 'appearance'>;\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?: JSXElement | 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\nexport type TooltipBaseState = Omit<TooltipState, 'appearance'>;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,35 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Tooltip: function() {
return _Tooltip.Tooltip;
},
renderTooltip_unstable: function() {
return _renderTooltip.renderTooltip_unstable;
},
tooltipClassNames: function() {
return _useTooltipStylesstyles.tooltipClassNames;
},
useTooltipBase_unstable: function() {
return _useTooltipBase.useTooltipBase_unstable;
},
useTooltipStyles_unstable: function() {
return _useTooltipStylesstyles.useTooltipStyles_unstable;
},
useTooltip_unstable: function() {
return _useTooltip.useTooltip_unstable;
}
});
const _Tooltip = require("./Tooltip");
const _renderTooltip = require("./renderTooltip");
const _useTooltip = require("./useTooltip");
const _useTooltipBase = require("./useTooltipBase");
const _useTooltipStylesstyles = require("./useTooltipStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tooltip/index.ts"],"sourcesContent":["export { Tooltip } from './Tooltip';\nexport type {\n OnVisibleChangeData,\n TooltipChildProps,\n TooltipBaseProps,\n TooltipProps,\n TooltipSlots,\n TooltipBaseState,\n TooltipState,\n} from './Tooltip.types';\nexport { renderTooltip_unstable } from './renderTooltip';\nexport { useTooltip_unstable } from './useTooltip';\nexport { useTooltipBase_unstable } from './useTooltipBase';\nexport { tooltipClassNames, useTooltipStyles_unstable } from './useTooltipStyles.styles';\n"],"names":["Tooltip","renderTooltip_unstable","useTooltip_unstable","useTooltipBase_unstable","tooltipClassNames","useTooltipStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAUPC,qCAAsB;;;eAGtBG,yCAAiB;;;eADjBD,uCAAuB;;;eACJE,iDAAyB;;;eAF5CH,+BAAmB;;;yBAXJ,YAAY;+BAUG,kBAAkB;4BACrB,eAAe;gCACX,mBAAmB;wCACE,4BAA4B"}

View File

@@ -0,0 +1,22 @@
/**
* The height of the tooltip's arrow in pixels.
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
arrowHeight: function() {
return arrowHeight;
},
tooltipBorderRadius: function() {
return tooltipBorderRadius;
}
});
const arrowHeight = 6;
const tooltipBorderRadius = 4;

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tooltip/private/constants.ts"],"sourcesContent":["/**\n * The height of the tooltip's arrow in pixels.\n */\nexport const arrowHeight = 6;\n\n/**\n * The default value of the tooltip's border radius (borderRadiusMedium).\n *\n * Unfortunately, Popper requires it to be specified as a variable instead of using CSS.\n * While we could use getComputedStyle, that adds a performance penalty for something that\n * will likely never change.\n */\nexport const tooltipBorderRadius = 4;\n"],"names":["arrowHeight","tooltipBorderRadius"],"mappings":"AAAA;;CAEC,GACD;;;;;;;;;;;eAAaA;;;uBASAC;;;;AATN,MAAMD,cAAc,EAAE;AAStB,MAAMC,sBAAsB,EAAE"}

View File

@@ -0,0 +1,58 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTooltipTimeout", {
enumerable: true,
get: function() {
return useTooltipTimeout;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const setTimeoutNoop = (_callback)=>-1;
const clearTimeoutNoop = (_handle)=>undefined;
function useTooltipTimeout(triggerElementRef) {
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
const setTimerFn = win ? win.setTimeout : setTimeoutNoop;
const clearTimerFn = win ? win.clearTimeout : clearTimeoutNoop;
const id = _react.useRef(undefined);
const set = _react.useCallback((fn, delay)=>{
if (id.current !== undefined) {
clearTimerFn(id.current);
}
id.current = setTimerFn(fn, delay !== null && delay !== void 0 ? delay : 0);
return id.current;
}, [
clearTimerFn,
setTimerFn
]);
const cancel = _react.useCallback(()=>{
if (id.current !== undefined) {
clearTimerFn(id.current);
id.current = undefined;
}
}, [
clearTimerFn
]);
// StrictMode-aware cleanup: only clear timeout if element has no parent (real unmount)
_react.useEffect(()=>{
const el = triggerElementRef.current;
return ()=>{
const isRealUnmount = !el || !el.isConnected;
if (isRealUnmount) {
cancel();
}
};
}, [
cancel,
triggerElementRef
]);
return [
set,
cancel
];
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tooltip/private/useTooltipTimeout.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst setTimeoutNoop = (_callback: Function) => -1;\nconst clearTimeoutNoop = (_handle: number) => undefined;\n\ntype BrowserTimerSetter =\n | ((fn: () => void, duration?: number, ...args: Record<string, unknown>[]) => number)\n | ((fn: () => void) => number);\n\n/**\n * @internal\n * @param triggerElementRef - Reference to the trigger element\n * @returns A pair of [setTimeout, clearTimeout] that are stable between renders.\n */\nexport function useTooltipTimeout(\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n triggerElementRef: React.MutableRefObject<HTMLElement>,\n): readonly [(fn: () => void, delay?: number) => number, () => void] {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n const setTimerFn: BrowserTimerSetter = win ? win.setTimeout : setTimeoutNoop;\n const clearTimerFn: (id: number) => void = win ? win.clearTimeout : clearTimeoutNoop;\n\n const id = React.useRef<number | undefined>(undefined);\n\n const set = React.useCallback(\n (fn: () => void, delay?: number) => {\n if (id.current !== undefined) {\n clearTimerFn(id.current);\n }\n\n id.current = setTimerFn(fn, delay ?? 0);\n return id.current;\n },\n [clearTimerFn, setTimerFn],\n );\n\n const cancel = React.useCallback(() => {\n if (id.current !== undefined) {\n clearTimerFn(id.current);\n id.current = undefined;\n }\n }, [clearTimerFn]);\n\n // StrictMode-aware cleanup: only clear timeout if element has no parent (real unmount)\n React.useEffect(() => {\n const el = triggerElementRef.current;\n return () => {\n const isRealUnmount = !el || !el.isConnected;\n\n if (isRealUnmount) {\n cancel();\n }\n };\n }, [cancel, triggerElementRef]);\n\n return [set, cancel];\n}\n"],"names":["React","useFluent_unstable","useFluent","setTimeoutNoop","_callback","clearTimeoutNoop","_handle","undefined","useTooltipTimeout","triggerElementRef","targetDocument","win","defaultView","setTimerFn","setTimeout","clearTimerFn","clearTimeout","id","useRef","set","useCallback","fn","delay","current","cancel","useEffect","el","isRealUnmount","isConnected"],"mappings":"AAAA;;;;;+BAiBgBQ,kBACd,4DAA4D;;;;;;;iEAhBvC,QAAQ;qCACiB,kCAAkC;AAElF,MAAML,iBAAiB,CAACC,YAAwB,CAAC;AACjD,MAAMC,mBAAmB,CAACC,UAAoBC;AAWvC,2BAELE,iBAAsD;IAEtD,MAAM,EAAEC,cAAc,EAAE,GAAGR,2CAAAA;IAC3B,MAAMS,MAAMD,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBE,WAAW;IAEvC,MAAMC,aAAiCF,MAAMA,IAAIG,UAAU,GAAGX;IAC9D,MAAMY,eAAqCJ,MAAMA,IAAIK,YAAY,GAAGX;IAEpE,MAAMY,KAAKjB,OAAMkB,MAAM,CAAqBX;IAE5C,MAAMY,MAAMnB,OAAMoB,WAAW,CAC3B,CAACC,IAAgBC;QACf,IAAIL,GAAGM,OAAO,KAAKhB,WAAW;YAC5BQ,aAAaE,GAAGM,OAAO;QACzB;QAEAN,GAAGM,OAAO,GAAGV,WAAWQ,IAAIC,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAAS;QACrC,OAAOL,GAAGM,OAAO;IACnB,GACA;QAACR;QAAcF;KAAW;IAG5B,MAAMW,SAASxB,OAAMoB,WAAW,CAAC;QAC/B,IAAIH,GAAGM,OAAO,KAAKhB,WAAW;YAC5BQ,aAAaE,GAAGM,OAAO;YACvBN,GAAGM,OAAO,GAAGhB;QACf;IACF,GAAG;QAACQ;KAAa;IAEjB,uFAAuF;IACvFf,OAAMyB,SAAS,CAAC;QACd,MAAMC,KAAKjB,kBAAkBc,OAAO;QACpC,OAAO;YACL,MAAMI,gBAAgB,CAACD,MAAM,CAACA,GAAGE,WAAW;YAE5C,IAAID,eAAe;gBACjBH;YACF;QACF;IACF,GAAG;QAACA;QAAQf;KAAkB;IAE9B,OAAO;QAACU;QAAKK;KAAO;AACtB"}

View File

@@ -0,0 +1,33 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderTooltip_unstable", {
enumerable: true,
get: function() {
return renderTooltip_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactportal = require("@fluentui/react-portal");
const _reactutilities = require("@fluentui/react-utilities");
const renderTooltip_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
children: [
state.children,
state.shouldRenderTooltip && /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
mountNode: state.mountNode,
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.content, {
children: [
state.withArrow && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
ref: state.arrowRef,
className: state.arrowClassName
}),
state.content.children
]
})
})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tooltip/renderTooltip.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TooltipBaseState, TooltipSlots } from './Tooltip.types';\n\n/**\n * Render the final JSX of Tooltip\n */\nexport const renderTooltip_unstable = (state: TooltipBaseState): JSXElement => {\n assertSlots<TooltipSlots>(state);\n\n return (\n <>\n {state.children}\n {state.shouldRenderTooltip && (\n <Portal mountNode={state.mountNode}>\n <state.content>\n {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n {state.content.children}\n </state.content>\n </Portal>\n )}\n </>\n );\n};\n"],"names":["Portal","assertSlots","renderTooltip_unstable","state","children","shouldRenderTooltip","mountNode","content","withArrow","div","ref","arrowRef","className","arrowClassName"],"mappings":";;;;+BAWaE;;;;;;4BAVb,UAAiD;6BAE1B,yBAAyB;gCACpB,4BAA4B;AAOjD,+BAA+B,CAACC;QACrCF,2BAAAA,EAA0BE;IAE1B,OAAA,WAAA,OACE,gBAAA,EAAA,oBAAA,EAAA;;YACGA,MAAMC,QAAQ;YACdD,MAAME,mBAAmB,IAAA,WAAA,OACxB,eAAA,EAACL,mBAAAA,EAAAA;gBAAOM,WAAWH,MAAMG,SAAS;0BAChC,WAAA,GAAA,oBAAA,EAACH,MAAMI,OAAO,EAAA;;wBACXJ,MAAMK,SAAS,IAAA,WAAA,OAAI,eAAA,EAACC,OAAAA;4BAAIC,KAAKP,MAAMQ,QAAQ;4BAAEC,WAAWT,MAAMU,cAAc;;wBAC5EV,MAAMI,OAAO,CAACH,QAAQ;;;;;;AAMnC,EAAE"}

View File

@@ -0,0 +1,21 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTooltip_unstable", {
enumerable: true,
get: function() {
return useTooltip_unstable;
}
});
const _useTooltipBase = require("./useTooltipBase");
const useTooltip_unstable = (props)=>{
'use no memo';
const { appearance = 'normal', ...baseProps } = props;
const state = (0, _useTooltipBase.useTooltipBase_unstable)(baseProps);
return {
appearance,
...state
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tooltip/useTooltip.tsx"],"sourcesContent":["'use client';\n\nimport type { TooltipProps, TooltipState } from './Tooltip.types';\nimport { useTooltipBase_unstable } from './useTooltipBase';\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 'use no memo';\n\n const { appearance = 'normal', ...baseProps } = props;\n\n const state = useTooltipBase_unstable(baseProps);\n\n return {\n appearance,\n ...state,\n };\n};\n"],"names":["useTooltipBase_unstable","useTooltip_unstable","props","appearance","baseProps","state"],"mappings":"AAAA;;;;;;;;;;;gCAGwC,mBAAmB;AAUpD,MAAMC,sBAAsB,CAACC;IAClC;IAEA,MAAM,EAAEC,aAAa,QAAQ,EAAE,GAAGC,WAAW,GAAGF;IAEhD,MAAMG,YAAQL,uCAAAA,EAAwBI;IAEtC,OAAO;QACLD;QACA,GAAGE,KAAK;IACV;AACF,EAAE"}

View File

@@ -0,0 +1,232 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTooltipBase_unstable", {
enumerable: true,
get: function() {
return useTooltipBase_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactpositioning = require("@fluentui/react-positioning");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _reacttabster = require("@fluentui/react-tabster");
const _reactutilities = require("@fluentui/react-utilities");
const _constants = require("./private/constants");
const _useTooltipTimeout = require("./private/useTooltipTimeout");
const _keyboardkeys = require("@fluentui/keyboard-keys");
const useTooltipBase_unstable = (props)=>{
'use no memo';
var _child_props, _child_props1, _child_props2, _child_props3, _child_props4, _child_props5, _child_props6;
const context = (0, _reactsharedcontexts.useTooltipVisibility_unstable)();
const isServerSideRender = (0, _reactutilities.useIsSSR)();
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
const [visible, setVisibleInternal] = (0, _reactutilities.useControllableState)({
state: props.visible,
initialState: false
});
const { children, content, withArrow = false, positioning = 'above', onVisibleChange, relationship, showDelay = 250, hideDelay = 250, mountNode } = props;
const state = {
withArrow,
positioning,
showDelay,
hideDelay,
relationship,
visible,
shouldRenderTooltip: visible,
mountNode,
// Slots
components: {
content: 'div'
},
content: _reactutilities.slot.always(content, {
defaultProps: {
role: 'tooltip'
},
elementType: 'div'
})
};
state.content.id = (0, _reactutilities.useId)('tooltip-', state.content.id);
const positioningOptions = {
enabled: state.visible,
arrowPadding: 2 * _constants.tooltipBorderRadius,
position: 'above',
align: 'center',
offset: 4,
...(0, _reactpositioning.resolvePositioningShorthand)(state.positioning)
};
if (state.withArrow) {
positioningOptions.offset = (0, _reactpositioning.mergeArrowOffset)(positioningOptions.offset, _constants.arrowHeight);
}
const { targetRef, containerRef, arrowRef } = (0, _reactpositioning.usePositioning)(positioningOptions);
const [setDelayTimeout, clearDelayTimeout] = (0, _useTooltipTimeout.useTooltipTimeout)(containerRef);
const setVisible = _react.useCallback((ev, data)=>{
clearDelayTimeout();
setVisibleInternal((oldVisible)=>{
if (data.visible !== oldVisible) {
onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(ev, data);
}
return data.visible;
});
}, [
clearDelayTimeout,
setVisibleInternal,
onVisibleChange
]);
state.content.ref = (0, _reactutilities.useMergedRefs)(state.content.ref, containerRef);
state.arrowRef = arrowRef;
// When this tooltip is visible, hide any other tooltips, and register it
// as the visibleTooltip with the TooltipContext.
// Also add a listener on document to hide the tooltip if Escape is pressed
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
if (visible) {
var _context_visibleTooltip;
const thisTooltip = {
hide: (ev)=>setVisible(undefined, {
visible: false,
documentKeyboardEvent: ev
})
};
(_context_visibleTooltip = context.visibleTooltip) === null || _context_visibleTooltip === void 0 ? void 0 : _context_visibleTooltip.hide();
context.visibleTooltip = thisTooltip;
const onDocumentKeyDown = (ev)=>{
if (ev.key === _keyboardkeys.Escape && !ev.defaultPrevented) {
thisTooltip.hide(ev);
// stop propagation to avoid conflicting with other elements that listen for `Escape`
// e,g: Dialog, Popover, Menu and Tooltip
ev.preventDefault();
}
};
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown, {
// As this event is added at targeted document,
// we need to capture the event to be sure keydown handling from tooltip happens first
capture: true
});
return ()=>{
if (context.visibleTooltip === thisTooltip) {
context.visibleTooltip = undefined;
}
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown, {
capture: true
});
};
}
}, [
context,
targetDocument,
visible,
setVisible
]);
// Used to skip showing the tooltip in certain situations when the trigger is focused.
// See comments where this is set for more info.
const ignoreNextFocusEventRef = _react.useRef(false);
// Listener for onPointerEnter and onFocus on the trigger element
const onEnterTrigger = _react.useCallback((ev)=>{
if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {
ignoreNextFocusEventRef.current = false;
return;
}
// Show immediately if another tooltip is already visible
const delay = context.visibleTooltip ? 0 : state.showDelay;
setDelayTimeout(()=>{
setVisible(ev, {
visible: true
});
}, delay);
ev.persist(); // Persist the event since the setVisible call will happen asynchronously
}, [
setDelayTimeout,
setVisible,
state.showDelay,
context
]);
const isNavigatingWithKeyboard = (0, _reacttabster.useIsNavigatingWithKeyboard)();
// Callback ref that attaches a keyborg:focusin event listener.
const [keyborgListenerCallbackRef] = _react.useState(()=>{
const onKeyborgFocusIn = (ev)=>{
var _ev_detail;
// Skip showing the tooltip if focus moved programmatically.
// For example, we don't want to show the tooltip when a dialog is closed
// and Tabster programmatically restores focus to the trigger button.
// See https://github.com/microsoft/fluentui/issues/27576
if (((_ev_detail = ev.detail) === null || _ev_detail === void 0 ? void 0 : _ev_detail.isFocusedProgrammatically) && !isNavigatingWithKeyboard()) {
ignoreNextFocusEventRef.current = true;
}
};
// Save the current element to remove the listener when the ref changes
let current = null;
// Callback ref that attaches the listener to the element
return (element)=>{
current === null || current === void 0 ? void 0 : current.removeEventListener(_reacttabster.KEYBORG_FOCUSIN, onKeyborgFocusIn);
element === null || element === void 0 ? void 0 : element.addEventListener(_reacttabster.KEYBORG_FOCUSIN, onKeyborgFocusIn);
current = element;
};
});
// Listener for onPointerLeave and onBlur on the trigger element
const onLeaveTrigger = _react.useCallback((ev)=>{
let delay = state.hideDelay;
if (ev.type === 'blur') {
// Hide immediately when losing focus
delay = 0;
// 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
ignoreNextFocusEventRef.current = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === ev.target;
}
setDelayTimeout(()=>{
setVisible(ev, {
visible: false
});
}, delay);
ev.persist(); // Persist the event since the setVisible call will happen asynchronously
}, [
setDelayTimeout,
setVisible,
state.hideDelay,
targetDocument
]);
// Cancel the hide timer when the mouse or focus enters the tooltip, and restart it when the mouse or focus leaves.
// This keeps the tooltip visible when the mouse is moved over it, or it has focus within.
state.content.onPointerEnter = (0, _reactutilities.mergeCallbacks)(state.content.onPointerEnter, clearDelayTimeout);
state.content.onPointerLeave = (0, _reactutilities.mergeCallbacks)(state.content.onPointerLeave, onLeaveTrigger);
state.content.onFocus = (0, _reactutilities.mergeCallbacks)(state.content.onFocus, clearDelayTimeout);
state.content.onBlur = (0, _reactutilities.mergeCallbacks)(state.content.onBlur, onLeaveTrigger);
const child = (0, _reactutilities.getTriggerChild)(children);
const triggerAriaProps = {};
const isPopupExpanded = (child === null || child === void 0 ? void 0 : (_child_props = child.props) === null || _child_props === void 0 ? void 0 : _child_props['aria-haspopup']) && ((child === null || child === void 0 ? void 0 : (_child_props1 = child.props) === null || _child_props1 === void 0 ? void 0 : _child_props1['aria-expanded']) === true || (child === null || child === void 0 ? void 0 : (_child_props2 = child.props) === null || _child_props2 === void 0 ? void 0 : _child_props2['aria-expanded']) === 'true');
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;
}
// Case 1: Don't render the Tooltip in SSR to avoid hydration errors
// Case 2: Don't render the Tooltip, if it triggers Menu or another popup and it's already opened
if (isServerSideRender || isPopupExpanded) {
state.shouldRenderTooltip = false;
}
// Apply the trigger props to the child, either by calling the render function, or cloning with the new props
state.children = (0, _reactutilities.applyTriggerPropsToChildren)(children, {
...triggerAriaProps,
...child === null || child === void 0 ? void 0 : child.props,
ref: (0, _reactutilities.useMergedRefs)((0, _reactutilities.getReactElementRef)(child), keyborgListenerCallbackRef, positioningOptions.target === undefined ? targetRef : undefined),
onPointerEnter: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : (_child_props3 = child.props) === null || _child_props3 === void 0 ? void 0 : _child_props3.onPointerEnter, onEnterTrigger)),
onPointerLeave: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : (_child_props4 = child.props) === null || _child_props4 === void 0 ? void 0 : _child_props4.onPointerLeave, onLeaveTrigger)),
onFocus: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : (_child_props5 = child.props) === null || _child_props5 === void 0 ? void 0 : _child_props5.onFocus, onEnterTrigger)),
onBlur: (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(child === null || child === void 0 ? void 0 : (_child_props6 = child.props) === null || _child_props6 === void 0 ? void 0 : _child_props6.onBlur, onLeaveTrigger))
});
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,203 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
tooltipClassNames: function() {
return tooltipClassNames;
},
useTooltipStyles_unstable: function() {
return useTooltipStyles_unstable;
}
});
const _react = require("@griffel/react");
const tooltipClassNames = {
content: 'fui-Tooltip__content'
};
/**
* Styles for the tooltip
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
mc9l5x: "fjseox",
B7ck84d: "f1ewtqcl",
B2u0y6b: "f132xexn",
Bceei9c: "f158kwzp",
Bahqtrf: "fk6fouc",
Be2twd7: "fy9rknc",
Bg96gwp: "fwrc4pm",
Btd35i7: "fokg9q4",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f9ggezi",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1bzqsji",
De3pzq: "fxugw4r",
sj55zd: "f19n0e5",
Bhu2qc9: "fxeb0a7"
},
visible: {
mc9l5x: "ftgm304"
},
inverted: {
De3pzq: "fg3r6xk",
sj55zd: "fonrgv7"
},
arrow: {
B7ck84d: "f1ewtqcl",
qhf8xq: "f1euv43f",
Bj3rh1h: "f1bsuimh",
rhnwrx: "f1s3jn22",
Bdy53xb: "fv40uqz",
De3pzq: "f1u2r49w",
B2eet1l: "fqhgnl",
Beyfa6y: "f17bz04i",
Bz10aip: "f36o3x3",
Bqenvij: "fzofk8q",
a9b677: "f1wbx1ie",
Ftih45: "f1wl9k8s",
Br0sdwz: "f1aocrix",
cmx5o7: "f1ljr5q2",
susq4k: 0,
Biibvgv: 0,
Bicfajf: 0,
qehafq: 0,
Brs5u8j: "f155f1qt",
Ccq8qp: "f9mhzq7",
Baz25je: "fr6rhvx",
Bcgcnre: 0,
Bqjgrrk: 0,
qa3bma: 0,
y0oebl: 0,
Biqmznv: 0,
Bm6vgfq: 0,
Bbv0w2i: 0,
uvfttm: 0,
eqrjj: 0,
Bk5zm6e: 0,
m598lv: 0,
B4f6apu: 0,
ydt019: 0,
Bq4z7u6: 0,
Bdkvgpv: 0,
B0qfbqy: 0,
kj8mxx: "f1kc0wz4",
r59vdv: "fgq90dz",
Bkw5xw4: "fq0y47f",
hl6cv3: "f1pwrbz6",
aea9ga: "f1hxxcvm",
yayu3t: "fw8rgyo",
Bhsv975: "f1wnzycx",
rhl9o9: "f1730wal",
B7gxrvb: "f1fy4ixr",
B6q6orb: "fobkauc",
B0lu1f8: "f16bqv1l"
}
}, {
d: [
".fjseox{display:none;}",
".f1ewtqcl{box-sizing:border-box;}",
".f132xexn{max-width:240px;}",
".f158kwzp{cursor:default;}",
".fk6fouc{font-family:var(--fontFamilyBase);}",
".fy9rknc{font-size:var(--fontSizeBase200);}",
".fwrc4pm{line-height:var(--lineHeightBase200);}",
".fokg9q4{overflow-wrap:break-word;}",
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
[
".f9ggezi{border:1px solid var(--colorTransparentStroke);}",
{
p: -2
}
],
[
".f1bzqsji{padding:4px 11px 6px 11px;}",
{
p: -1
}
],
".fxugw4r{background-color:var(--colorNeutralBackground1);}",
".f19n0e5{color:var(--colorNeutralForeground1);}",
".fxeb0a7{filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey));}",
".ftgm304{display:block;}",
".fg3r6xk{background-color:var(--colorNeutralBackgroundStatic);}",
".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}",
".f1euv43f{position:absolute;}",
".f1bsuimh{z-index:-1;}",
".f1s3jn22{--fui-positioning-arrow-height:8.484px;}",
".fv40uqz{--fui-positioning-arrow-offset:-4.242px;}",
".f1u2r49w{background-color:inherit;}",
".fqhgnl{background-clip:content-box;}",
".f17bz04i{border-bottom-left-radius:var(--borderRadiusSmall);}",
".f36o3x3{transform:rotate(var(--fui-positioning-arrow-angle));}",
".fzofk8q{height:var(--fui-positioning-arrow-height);}",
".f1wbx1ie{width:var(--fui-positioning-arrow-height);}",
".f1wl9k8s::before{content:\"\";}",
".f1aocrix::before{display:block;}",
".f1ljr5q2::before{background-color:inherit;}",
[
".f155f1qt::before{margin:-1px;}",
{
p: -1
}
],
".f9mhzq7::before{width:100%;}",
".fr6rhvx::before{height:100%;}",
[
".f1kc0wz4::before{border:1px solid var(--colorTransparentStroke);}",
{
p: -2
}
],
".fgq90dz::before{border-bottom-left-radius:var(--borderRadiusSmall);}",
".fq0y47f::before{clip-path:polygon(0% 0%, 100% 100%, 0% 100%);}",
"[data-popper-placement^=\"top\"] .f1pwrbz6{bottom:var(--fui-positioning-arrow-offset);}",
"[data-popper-placement^=\"top\"] .f1hxxcvm{--fui-positioning-arrow-angle:-45deg;}",
"[data-popper-placement^=\"right\"] .fw8rgyo{left:var(--fui-positioning-arrow-offset);}",
"[data-popper-placement^=\"right\"] .f1wnzycx{--fui-positioning-arrow-angle:45deg;}",
"[data-popper-placement^=\"bottom\"] .f1730wal{top:var(--fui-positioning-arrow-offset);}",
"[data-popper-placement^=\"bottom\"] .f1fy4ixr{--fui-positioning-arrow-angle:135deg;}",
"[data-popper-placement^=\"left\"] .fobkauc{right:var(--fui-positioning-arrow-offset);}",
"[data-popper-placement^=\"left\"] .f16bqv1l{--fui-positioning-arrow-angle:225deg;}"
]
});
const useTooltipStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.content.className = (0, _react.mergeClasses)(tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);
state.arrowClassName = styles.arrow;
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,64 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
tooltipClassNames: function() {
return tooltipClassNames;
},
useTooltipStyles_unstable: function() {
return useTooltipStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reactpositioning = require("@fluentui/react-positioning");
const _reacttheme = require("@fluentui/react-theme");
const _constants = require("./private/constants");
const tooltipClassNames = {
content: 'fui-Tooltip__content'
};
/**
* Styles for the tooltip
*/ const useStyles = (0, _react.makeStyles)({
root: {
display: 'none',
boxSizing: 'border-box',
maxWidth: '240px',
cursor: 'default',
fontFamily: _reacttheme.tokens.fontFamilyBase,
fontSize: _reacttheme.tokens.fontSizeBase200,
lineHeight: _reacttheme.tokens.lineHeightBase200,
overflowWrap: 'break-word',
borderRadius: _reacttheme.tokens.borderRadiusMedium,
border: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`,
padding: '4px 11px 6px 11px',
backgroundColor: _reacttheme.tokens.colorNeutralBackground1,
color: _reacttheme.tokens.colorNeutralForeground1,
// TODO need to add versions of tokens.alias.shadow.shadow8, etc. that work with filter
filter: `drop-shadow(0 0 2px ${_reacttheme.tokens.colorNeutralShadowAmbient}) ` + `drop-shadow(0 4px 8px ${_reacttheme.tokens.colorNeutralShadowKey})`
},
visible: {
display: 'block'
},
inverted: {
backgroundColor: _reacttheme.tokens.colorNeutralBackgroundStatic,
color: _reacttheme.tokens.colorNeutralForegroundStaticInverted
},
arrow: (0, _reactpositioning.createArrowStyles)({
arrowHeight: _constants.arrowHeight
})
});
const useTooltipStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.content.className = (0, _react.mergeClasses)(tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);
state.arrowClassName = styles.arrow;
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tooltip/useTooltipStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 overflowWrap: 'break-word',\n borderRadius: tokens.borderRadiusMedium,\n border: `1px solid ${tokens.colorTransparentStroke}`,\n 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 'use no memo';\n\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"],"names":["makeStyles","mergeClasses","createArrowStyles","tokens","arrowHeight","tooltipClassNames","content","useStyles","root","display","boxSizing","maxWidth","cursor","fontFamily","fontFamilyBase","fontSize","fontSizeBase200","lineHeight","lineHeightBase200","overflowWrap","borderRadius","borderRadiusMedium","border","colorTransparentStroke","padding","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","filter","colorNeutralShadowAmbient","colorNeutralShadowKey","visible","inverted","colorNeutralBackgroundStatic","colorNeutralForegroundStaticInverted","arrow","useTooltipStyles_unstable","state","styles","className","appearance","arrowClassName"],"mappings":"AAAA;;;;;;;;;;;;IASaK,iBAAAA;;;IA4CAgC,yBAAAA;;;;uBAnD4B,iBAAiB;kCACxB,8BAA8B;4BACzC,wBAAwB;2BACnB,sBAAsB;AAI3C,0BAAwD;IAC7D/B,SAAS;AACX,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,iBAAAA,EAAW;IAC3BQ,MAAM;QACJC,SAAS;QACTC,WAAW;QACXC,UAAU;QACVC,QAAQ;QACRC,YAAYV,kBAAAA,CAAOW,cAAc;QACjCC,UAAUZ,kBAAAA,CAAOa,eAAe;QAChCC,YAAYd,kBAAAA,CAAOe,iBAAiB;QACpCC,cAAc;QACdC,cAAcjB,kBAAAA,CAAOkB,kBAAkB;QACvCC,QAAQ,CAAC,UAAU,EAAEnB,kBAAAA,CAAOoB,sBAAsB,EAAE;QACpDC,SAAS;QACTC,iBAAiBtB,kBAAAA,CAAOuB,uBAAuB;QAC/CC,OAAOxB,kBAAAA,CAAOyB,uBAAuB;QAErC,uFAAuF;QACvFC,QACE,CAAC,oBAAoB,EAAE1B,kBAAAA,CAAO2B,yBAAyB,CAAC,EAAE,CAAC,GAC3D,CAAC,sBAAsB,EAAE3B,kBAAAA,CAAO4B,qBAAqB,CAAC,CAAC,CAAC;IAC5D;IAEAC,SAAS;QACPvB,SAAS;IACX;IAEAwB,UAAU;QACRR,iBAAiBtB,kBAAAA,CAAO+B,4BAA4B;QACpDP,OAAOxB,kBAAAA,CAAOgC,oCAAoC;IACpD;IAEAC,WAAOlC,mCAAAA,EAAkB;qBAAEE,sBAAAA;IAAY;AACzC;AAKO,kCAAkC,CAACkC;IACxC;IAEA,MAAMC,SAAShC;IAEf+B,MAAMhC,OAAO,CAACkC,SAAS,OAAGvC,mBAAAA,EACxBI,kBAAkBC,OAAO,EACzBiC,OAAO/B,IAAI,EACX8B,MAAMG,UAAU,KAAK,cAAcF,OAAON,QAAQ,EAClDK,MAAMN,OAAO,IAAIO,OAAOP,OAAO,EAC/BM,MAAMhC,OAAO,CAACkC,SAAS;IAGzBF,MAAMI,cAAc,GAAGH,OAAOH,KAAK;IAEnC,OAAOE;AACT,EAAE"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Tooltip: function() {
return _Tooltip.Tooltip;
},
renderTooltip_unstable: function() {
return _Tooltip.renderTooltip_unstable;
},
tooltipClassNames: function() {
return _Tooltip.tooltipClassNames;
},
useTooltipBase_unstable: function() {
return _Tooltip.useTooltipBase_unstable;
},
useTooltipStyles_unstable: function() {
return _Tooltip.useTooltipStyles_unstable;
},
useTooltip_unstable: function() {
return _Tooltip.useTooltip_unstable;
}
});
const _Tooltip = require("./Tooltip");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Tooltip,\n renderTooltip_unstable,\n tooltipClassNames,\n useTooltipStyles_unstable,\n useTooltip_unstable,\n useTooltipBase_unstable,\n} from './Tooltip';\nexport type {\n OnVisibleChangeData,\n TooltipProps,\n TooltipSlots,\n TooltipState,\n TooltipChildProps as TooltipTriggerProps,\n TooltipBaseProps,\n TooltipBaseState,\n} from './Tooltip';\n"],"names":["Tooltip","renderTooltip_unstable","tooltipClassNames","useTooltipStyles_unstable","useTooltip_unstable","useTooltipBase_unstable"],"mappings":";;;;;;;;;;;;eACEA,gBAAO;;;eACPC,+BAAsB;;;eACtBC,0BAAiB;;;eAGjBG,gCAAuB;;;eAFvBF,kCAAyB;;;eACzBC,4BAAmB;;;yBAEd,YAAY"}

1
node_modules/@fluentui/react-tooltip/lib/Tooltip.js generated vendored Normal file
View File

@@ -0,0 +1 @@
export { Tooltip, renderTooltip_unstable, tooltipClassNames, useTooltipStyles_unstable, useTooltip_unstable, useTooltipBase_unstable } from './components/Tooltip/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/Tooltip.ts"],"sourcesContent":["export type {\n OnVisibleChangeData,\n TooltipChildProps,\n TooltipBaseProps,\n TooltipProps,\n TooltipSlots,\n TooltipBaseState,\n TooltipState,\n} from './components/Tooltip/index';\nexport {\n Tooltip,\n renderTooltip_unstable,\n tooltipClassNames,\n useTooltipStyles_unstable,\n useTooltip_unstable,\n useTooltipBase_unstable,\n} from './components/Tooltip/index';\n"],"names":["Tooltip","renderTooltip_unstable","tooltipClassNames","useTooltipStyles_unstable","useTooltip_unstable","useTooltipBase_unstable"],"mappings":"AASA,SACEA,OAAO,EACPC,sBAAsB,EACtBC,iBAAiB,EACjBC,yBAAyB,EACzBC,mBAAmB,EACnBC,uBAAuB,QAClB,6BAA6B"}

View File

@@ -0,0 +1,17 @@
'use client';
import * as React from 'react';
import { useTooltip_unstable } from './useTooltip';
import { renderTooltip_unstable } from './renderTooltip';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { useTooltipStyles_unstable } from './useTooltipStyles.styles';
/**
* A tooltip provides light weight contextual information on top of its target element.
*/ export const Tooltip = (props)=>{
const state = useTooltip_unstable(props);
useTooltipStyles_unstable(state);
useCustomStyleHook_unstable('useTooltipStyles_unstable')(state);
return renderTooltip_unstable(state);
};
Tooltip.displayName = 'Tooltip';
// type casting here is required to ensure internal type FluentTriggerComponent is not leaked
Tooltip.isFluentTriggerComponent = true;

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTooltip_unstable } from './useTooltip';\nimport { renderTooltip_unstable } from './renderTooltip';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useTooltipStyles_unstable } from './useTooltipStyles.styles';\nimport type { TooltipProps } from './Tooltip.types';\nimport type { FluentTriggerComponent } from '@fluentui/react-utilities';\n\n/**\n * A tooltip provides light weight contextual information on top of its target element.\n */\nexport const Tooltip: React.FC<TooltipProps> = props => {\n const state = useTooltip_unstable(props);\n\n useTooltipStyles_unstable(state);\n\n useCustomStyleHook_unstable('useTooltipStyles_unstable')(state);\n\n return renderTooltip_unstable(state);\n};\n\nTooltip.displayName = 'Tooltip';\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(Tooltip as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["React","useTooltip_unstable","renderTooltip_unstable","useCustomStyleHook_unstable","useTooltipStyles_unstable","Tooltip","props","state","displayName","isFluentTriggerComponent"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,yBAAyB,QAAQ,4BAA4B;AAItE;;CAEC,GACD,OAAO,MAAMC,UAAkCC,CAAAA;IAC7C,MAAMC,QAAQN,oBAAoBK;IAElCF,0BAA0BG;IAE1BJ,4BAA4B,6BAA6BI;IAEzD,OAAOL,uBAAuBK;AAChC,EAAE;AAEFF,QAAQG,WAAW,GAAG;AACtB,6FAA6F;AAC5FH,QAAmCI,wBAAwB,GAAG"}

View File

@@ -0,0 +1 @@
import * as React from 'react';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tooltip/Tooltip.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComponentProps, ComponentState, JSXElement, Slot, TriggerProps } from '@fluentui/react-utilities';\nimport type { PortalProps } from '@fluentui/react-portal';\n\n/**\n * Slot properties for Tooltip\n */\nexport type TooltipSlots = {\n /**\n * The text or JSX content of the tooltip.\n */\n content: NonNullable<Slot<'div'>>;\n};\n\n/**\n * The properties that are added to the child of the Tooltip\n */\nexport type TooltipChildProps = {\n ref?: React.Ref<unknown>;\n} & Pick<\n React.HTMLAttributes<HTMLElement>,\n | 'aria-describedby'\n | 'aria-label'\n | 'aria-labelledby'\n | 'onBlur'\n | 'onFocus'\n | 'onPointerEnter'\n | 'onPointerLeave'\n | 'aria-haspopup'\n | 'aria-expanded'\n>;\n\n/**\n * Data for the Tooltip's onVisibleChange event.\n */\nexport type OnVisibleChangeData = {\n visible: boolean;\n\n /**\n * The event object, if this visibility change was triggered by a keyboard event on the document element\n * (such as Escape to hide the visible tooltip). Otherwise undefined.\n */\n documentKeyboardEvent?: KeyboardEvent;\n};\n\n/**\n * Properties for Tooltip\n */\nexport type TooltipProps = ComponentProps<TooltipSlots> &\n TriggerProps<TooltipChildProps> &\n Pick<PortalProps, 'mountNode'> & {\n /**\n * The tooltip's visual appearance.\n * * `normal` - Uses the theme's background and text colors.\n * * `inverted` - Higher contrast variant that uses the theme's inverted colors.\n *\n * @default normal\n */\n appearance?: 'normal' | 'inverted';\n /**\n * Delay before the tooltip is hidden, in milliseconds.\n *\n * @default 250\n */\n hideDelay?: number;\n\n /**\n * Notification when the visibility of the tooltip is changing.\n *\n * **Note**: for backwards compatibility, `event` will be undefined if this was triggered by a keyboard event on\n * the document element. Use `data.documentKeyboardEvent` if the keyboard event object is needed.\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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\nexport type TooltipBaseProps = Omit<TooltipProps, 'appearance'>;\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?: JSXElement | 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\nexport type TooltipBaseState = Omit<TooltipState, 'appearance'>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

View File

@@ -0,0 +1,5 @@
export { Tooltip } from './Tooltip';
export { renderTooltip_unstable } from './renderTooltip';
export { useTooltip_unstable } from './useTooltip';
export { useTooltipBase_unstable } from './useTooltipBase';
export { tooltipClassNames, useTooltipStyles_unstable } from './useTooltipStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tooltip/index.ts"],"sourcesContent":["export { Tooltip } from './Tooltip';\nexport type {\n OnVisibleChangeData,\n TooltipChildProps,\n TooltipBaseProps,\n TooltipProps,\n TooltipSlots,\n TooltipBaseState,\n TooltipState,\n} from './Tooltip.types';\nexport { renderTooltip_unstable } from './renderTooltip';\nexport { useTooltip_unstable } from './useTooltip';\nexport { useTooltipBase_unstable } from './useTooltipBase';\nexport { tooltipClassNames, useTooltipStyles_unstable } from './useTooltipStyles.styles';\n"],"names":["Tooltip","renderTooltip_unstable","useTooltip_unstable","useTooltipBase_unstable","tooltipClassNames","useTooltipStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAUpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,4BAA4B"}

View File

@@ -0,0 +1,10 @@
/**
* 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;

View File

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

View File

@@ -0,0 +1,52 @@
'use client';
import * as React from 'react';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
const setTimeoutNoop = (_callback)=>-1;
const clearTimeoutNoop = (_handle)=>undefined;
/**
* @internal
* @param triggerElementRef - Reference to the trigger element
* @returns A pair of [setTimeout, clearTimeout] that are stable between renders.
*/ export function useTooltipTimeout(// eslint-disable-next-line @typescript-eslint/no-deprecated
triggerElementRef) {
const { targetDocument } = useFluent();
const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
const setTimerFn = win ? win.setTimeout : setTimeoutNoop;
const clearTimerFn = win ? win.clearTimeout : clearTimeoutNoop;
const id = React.useRef(undefined);
const set = React.useCallback((fn, delay)=>{
if (id.current !== undefined) {
clearTimerFn(id.current);
}
id.current = setTimerFn(fn, delay !== null && delay !== void 0 ? delay : 0);
return id.current;
}, [
clearTimerFn,
setTimerFn
]);
const cancel = React.useCallback(()=>{
if (id.current !== undefined) {
clearTimerFn(id.current);
id.current = undefined;
}
}, [
clearTimerFn
]);
// StrictMode-aware cleanup: only clear timeout if element has no parent (real unmount)
React.useEffect(()=>{
const el = triggerElementRef.current;
return ()=>{
const isRealUnmount = !el || !el.isConnected;
if (isRealUnmount) {
cancel();
}
};
}, [
cancel,
triggerElementRef
]);
return [
set,
cancel
];
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tooltip/private/useTooltipTimeout.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\nconst setTimeoutNoop = (_callback: Function) => -1;\nconst clearTimeoutNoop = (_handle: number) => undefined;\n\ntype BrowserTimerSetter =\n | ((fn: () => void, duration?: number, ...args: Record<string, unknown>[]) => number)\n | ((fn: () => void) => number);\n\n/**\n * @internal\n * @param triggerElementRef - Reference to the trigger element\n * @returns A pair of [setTimeout, clearTimeout] that are stable between renders.\n */\nexport function useTooltipTimeout(\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n triggerElementRef: React.MutableRefObject<HTMLElement>,\n): readonly [(fn: () => void, delay?: number) => number, () => void] {\n const { targetDocument } = useFluent();\n const win = targetDocument?.defaultView;\n\n const setTimerFn: BrowserTimerSetter = win ? win.setTimeout : setTimeoutNoop;\n const clearTimerFn: (id: number) => void = win ? win.clearTimeout : clearTimeoutNoop;\n\n const id = React.useRef<number | undefined>(undefined);\n\n const set = React.useCallback(\n (fn: () => void, delay?: number) => {\n if (id.current !== undefined) {\n clearTimerFn(id.current);\n }\n\n id.current = setTimerFn(fn, delay ?? 0);\n return id.current;\n },\n [clearTimerFn, setTimerFn],\n );\n\n const cancel = React.useCallback(() => {\n if (id.current !== undefined) {\n clearTimerFn(id.current);\n id.current = undefined;\n }\n }, [clearTimerFn]);\n\n // StrictMode-aware cleanup: only clear timeout if element has no parent (real unmount)\n React.useEffect(() => {\n const el = triggerElementRef.current;\n return () => {\n const isRealUnmount = !el || !el.isConnected;\n\n if (isRealUnmount) {\n cancel();\n }\n };\n }, [cancel, triggerElementRef]);\n\n return [set, cancel];\n}\n"],"names":["React","useFluent_unstable","useFluent","setTimeoutNoop","_callback","clearTimeoutNoop","_handle","undefined","useTooltipTimeout","triggerElementRef","targetDocument","win","defaultView","setTimerFn","setTimeout","clearTimerFn","clearTimeout","id","useRef","set","useCallback","fn","delay","current","cancel","useEffect","el","isRealUnmount","isConnected"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,MAAMC,iBAAiB,CAACC,YAAwB,CAAC;AACjD,MAAMC,mBAAmB,CAACC,UAAoBC;AAM9C;;;;CAIC,GACD,OAAO,SAASC,kBACd,4DAA4D;AAC5DC,iBAAsD;IAEtD,MAAM,EAAEC,cAAc,EAAE,GAAGR;IAC3B,MAAMS,MAAMD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEvC,MAAMC,aAAiCF,MAAMA,IAAIG,UAAU,GAAGX;IAC9D,MAAMY,eAAqCJ,MAAMA,IAAIK,YAAY,GAAGX;IAEpE,MAAMY,KAAKjB,MAAMkB,MAAM,CAAqBX;IAE5C,MAAMY,MAAMnB,MAAMoB,WAAW,CAC3B,CAACC,IAAgBC;QACf,IAAIL,GAAGM,OAAO,KAAKhB,WAAW;YAC5BQ,aAAaE,GAAGM,OAAO;QACzB;QAEAN,GAAGM,OAAO,GAAGV,WAAWQ,IAAIC,kBAAAA,mBAAAA,QAAS;QACrC,OAAOL,GAAGM,OAAO;IACnB,GACA;QAACR;QAAcF;KAAW;IAG5B,MAAMW,SAASxB,MAAMoB,WAAW,CAAC;QAC/B,IAAIH,GAAGM,OAAO,KAAKhB,WAAW;YAC5BQ,aAAaE,GAAGM,OAAO;YACvBN,GAAGM,OAAO,GAAGhB;QACf;IACF,GAAG;QAACQ;KAAa;IAEjB,uFAAuF;IACvFf,MAAMyB,SAAS,CAAC;QACd,MAAMC,KAAKjB,kBAAkBc,OAAO;QACpC,OAAO;YACL,MAAMI,gBAAgB,CAACD,MAAM,CAACA,GAAGE,WAAW;YAE5C,IAAID,eAAe;gBACjBH;YACF;QACF;IACF,GAAG;QAACA;QAAQf;KAAkB;IAE9B,OAAO;QAACU;QAAKK;KAAO;AACtB"}

View File

@@ -0,0 +1,25 @@
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { Portal } from '@fluentui/react-portal';
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of Tooltip
*/ export const renderTooltip_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsxs(_Fragment, {
children: [
state.children,
state.shouldRenderTooltip && /*#__PURE__*/ _jsx(Portal, {
mountNode: state.mountNode,
children: /*#__PURE__*/ _jsxs(state.content, {
children: [
state.withArrow && /*#__PURE__*/ _jsx("div", {
ref: state.arrowRef,
className: state.arrowClassName
}),
state.content.children
]
})
})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tooltip/renderTooltip.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { TooltipBaseState, TooltipSlots } from './Tooltip.types';\n\n/**\n * Render the final JSX of Tooltip\n */\nexport const renderTooltip_unstable = (state: TooltipBaseState): JSXElement => {\n assertSlots<TooltipSlots>(state);\n\n return (\n <>\n {state.children}\n {state.shouldRenderTooltip && (\n <Portal mountNode={state.mountNode}>\n <state.content>\n {state.withArrow && <div ref={state.arrowRef} className={state.arrowClassName} />}\n {state.content.children}\n </state.content>\n </Portal>\n )}\n </>\n );\n};\n"],"names":["Portal","assertSlots","renderTooltip_unstable","state","children","shouldRenderTooltip","mountNode","content","withArrow","div","ref","arrowRef","className","arrowClassName"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrCF,YAA0BE;IAE1B,qBACE;;YACGA,MAAMC,QAAQ;YACdD,MAAME,mBAAmB,kBACxB,KAACL;gBAAOM,WAAWH,MAAMG,SAAS;0BAChC,cAAA,MAACH,MAAMI,OAAO;;wBACXJ,MAAMK,SAAS,kBAAI,KAACC;4BAAIC,KAAKP,MAAMQ,QAAQ;4BAAEC,WAAWT,MAAMU,cAAc;;wBAC5EV,MAAMI,OAAO,CAACH,QAAQ;;;;;;AAMnC,EAAE"}

View File

@@ -0,0 +1,18 @@
'use client';
import { useTooltipBase_unstable } from './useTooltipBase';
/**
* 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 const useTooltip_unstable = (props)=>{
'use no memo';
const { appearance = 'normal', ...baseProps } = props;
const state = useTooltipBase_unstable(baseProps);
return {
appearance,
...state
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tooltip/useTooltip.tsx"],"sourcesContent":["'use client';\n\nimport type { TooltipProps, TooltipState } from './Tooltip.types';\nimport { useTooltipBase_unstable } from './useTooltipBase';\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 'use no memo';\n\n const { appearance = 'normal', ...baseProps } = props;\n\n const state = useTooltipBase_unstable(baseProps);\n\n return {\n appearance,\n ...state,\n };\n};\n"],"names":["useTooltipBase_unstable","useTooltip_unstable","props","appearance","baseProps","state"],"mappings":"AAAA;AAGA,SAASA,uBAAuB,QAAQ,mBAAmB;AAE3D;;;;;;;CAOC,GACD,OAAO,MAAMC,sBAAsB,CAACC;IAClC;IAEA,MAAM,EAAEC,aAAa,QAAQ,EAAE,GAAGC,WAAW,GAAGF;IAEhD,MAAMG,QAAQL,wBAAwBI;IAEtC,OAAO;QACLD;QACA,GAAGE,KAAK;IACV;AACF,EAAE"}

View File

@@ -0,0 +1,229 @@
'use client';
import * as React from 'react';
import { mergeArrowOffset, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';
import { useTooltipVisibility_unstable as useTooltipVisibility, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { KEYBORG_FOCUSIN, useIsNavigatingWithKeyboard } from '@fluentui/react-tabster';
import { applyTriggerPropsToChildren, useControllableState, useId, useIsomorphicLayoutEffect, useIsSSR, useMergedRefs, getTriggerChild, mergeCallbacks, useEventCallback, slot, getReactElementRef } from '@fluentui/react-utilities';
import { arrowHeight, tooltipBorderRadius } from './private/constants';
import { useTooltipTimeout } from './private/useTooltipTimeout';
import { Escape } from '@fluentui/keyboard-keys';
/**
* Create the state required to render Tooltip.
*
* The returned state can be modified with hooks such as useTooltipStyles_unstable,
* before being passed to renderTooltip_unstable.
*
* @param props - props from this instance of Tooltip
*/ export const useTooltipBase_unstable = (props)=>{
'use no memo';
var _child_props, _child_props1, _child_props2, _child_props3, _child_props4, _child_props5, _child_props6;
const context = useTooltipVisibility();
const isServerSideRender = useIsSSR();
const { targetDocument } = useFluent();
const [visible, setVisibleInternal] = useControllableState({
state: props.visible,
initialState: false
});
const { children, content, withArrow = false, positioning = 'above', onVisibleChange, relationship, showDelay = 250, hideDelay = 250, mountNode } = props;
const state = {
withArrow,
positioning,
showDelay,
hideDelay,
relationship,
visible,
shouldRenderTooltip: visible,
mountNode,
// Slots
components: {
content: 'div'
},
content: slot.always(content, {
defaultProps: {
role: 'tooltip'
},
elementType: 'div'
})
};
state.content.id = useId('tooltip-', state.content.id);
const positioningOptions = {
enabled: state.visible,
arrowPadding: 2 * tooltipBorderRadius,
position: 'above',
align: 'center',
offset: 4,
...resolvePositioningShorthand(state.positioning)
};
if (state.withArrow) {
positioningOptions.offset = mergeArrowOffset(positioningOptions.offset, arrowHeight);
}
const { targetRef, containerRef, arrowRef } = usePositioning(positioningOptions);
const [setDelayTimeout, clearDelayTimeout] = useTooltipTimeout(containerRef);
const setVisible = React.useCallback((ev, data)=>{
clearDelayTimeout();
setVisibleInternal((oldVisible)=>{
if (data.visible !== oldVisible) {
onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(ev, data);
}
return data.visible;
});
}, [
clearDelayTimeout,
setVisibleInternal,
onVisibleChange
]);
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(()=>{
if (visible) {
var _context_visibleTooltip;
const thisTooltip = {
hide: (ev)=>setVisible(undefined, {
visible: false,
documentKeyboardEvent: ev
})
};
(_context_visibleTooltip = context.visibleTooltip) === null || _context_visibleTooltip === void 0 ? void 0 : _context_visibleTooltip.hide();
context.visibleTooltip = thisTooltip;
const onDocumentKeyDown = (ev)=>{
if (ev.key === Escape && !ev.defaultPrevented) {
thisTooltip.hide(ev);
// stop propagation to avoid conflicting with other elements that listen for `Escape`
// e,g: Dialog, Popover, Menu and Tooltip
ev.preventDefault();
}
};
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('keydown', onDocumentKeyDown, {
// As this event is added at targeted document,
// we need to capture the event to be sure keydown handling from tooltip happens first
capture: true
});
return ()=>{
if (context.visibleTooltip === thisTooltip) {
context.visibleTooltip = undefined;
}
targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('keydown', onDocumentKeyDown, {
capture: true
});
};
}
}, [
context,
targetDocument,
visible,
setVisible
]);
// Used to skip showing the tooltip in certain situations when the trigger is focused.
// See comments where this is set for more info.
const ignoreNextFocusEventRef = React.useRef(false);
// Listener for onPointerEnter and onFocus on the trigger element
const onEnterTrigger = React.useCallback((ev)=>{
if (ev.type === 'focus' && ignoreNextFocusEventRef.current) {
ignoreNextFocusEventRef.current = false;
return;
}
// Show immediately if another tooltip is already visible
const delay = context.visibleTooltip ? 0 : state.showDelay;
setDelayTimeout(()=>{
setVisible(ev, {
visible: true
});
}, delay);
ev.persist(); // Persist the event since the setVisible call will happen asynchronously
}, [
setDelayTimeout,
setVisible,
state.showDelay,
context
]);
const isNavigatingWithKeyboard = useIsNavigatingWithKeyboard();
// Callback ref that attaches a keyborg:focusin event listener.
const [keyborgListenerCallbackRef] = React.useState(()=>{
const onKeyborgFocusIn = (ev)=>{
var _ev_detail;
// Skip showing the tooltip if focus moved programmatically.
// For example, we don't want to show the tooltip when a dialog is closed
// and Tabster programmatically restores focus to the trigger button.
// See https://github.com/microsoft/fluentui/issues/27576
if (((_ev_detail = ev.detail) === null || _ev_detail === void 0 ? void 0 : _ev_detail.isFocusedProgrammatically) && !isNavigatingWithKeyboard()) {
ignoreNextFocusEventRef.current = true;
}
};
// Save the current element to remove the listener when the ref changes
let current = null;
// Callback ref that attaches the listener to the element
return (element)=>{
current === null || current === void 0 ? void 0 : current.removeEventListener(KEYBORG_FOCUSIN, onKeyborgFocusIn);
element === null || element === void 0 ? void 0 : element.addEventListener(KEYBORG_FOCUSIN, onKeyborgFocusIn);
current = element;
};
});
// Listener for onPointerLeave and onBlur on the trigger element
const onLeaveTrigger = React.useCallback((ev)=>{
let delay = state.hideDelay;
if (ev.type === 'blur') {
// Hide immediately when losing focus
delay = 0;
// 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
ignoreNextFocusEventRef.current = (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) === ev.target;
}
setDelayTimeout(()=>{
setVisible(ev, {
visible: false
});
}, 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 = mergeCallbacks(state.content.onPointerEnter, clearDelayTimeout);
state.content.onPointerLeave = mergeCallbacks(state.content.onPointerLeave, onLeaveTrigger);
state.content.onFocus = mergeCallbacks(state.content.onFocus, clearDelayTimeout);
state.content.onBlur = mergeCallbacks(state.content.onBlur, onLeaveTrigger);
const child = getTriggerChild(children);
const triggerAriaProps = {};
const isPopupExpanded = (child === null || child === void 0 ? void 0 : (_child_props = child.props) === null || _child_props === void 0 ? void 0 : _child_props['aria-haspopup']) && ((child === null || child === void 0 ? void 0 : (_child_props1 = child.props) === null || _child_props1 === void 0 ? void 0 : _child_props1['aria-expanded']) === true || (child === null || child === void 0 ? void 0 : (_child_props2 = child.props) === null || _child_props2 === void 0 ? void 0 : _child_props2['aria-expanded']) === 'true');
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;
}
// Case 1: Don't render the Tooltip in SSR to avoid hydration errors
// Case 2: Don't render the Tooltip, if it triggers Menu or another popup and it's already opened
if (isServerSideRender || isPopupExpanded) {
state.shouldRenderTooltip = false;
}
// 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,
ref: useMergedRefs(getReactElementRef(child), keyborgListenerCallbackRef, // If the target prop is not provided, attach targetRef to the trigger element's ref prop
positioningOptions.target === undefined ? targetRef : undefined),
onPointerEnter: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : (_child_props3 = child.props) === null || _child_props3 === void 0 ? void 0 : _child_props3.onPointerEnter, onEnterTrigger)),
onPointerLeave: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : (_child_props4 = child.props) === null || _child_props4 === void 0 ? void 0 : _child_props4.onPointerLeave, onLeaveTrigger)),
onFocus: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : (_child_props5 = child.props) === null || _child_props5 === void 0 ? void 0 : _child_props5.onFocus, onEnterTrigger)),
onBlur: useEventCallback(mergeCallbacks(child === null || child === void 0 ? void 0 : (_child_props6 = child.props) === null || _child_props6 === void 0 ? void 0 : _child_props6.onBlur, onLeaveTrigger))
});
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,134 @@
'use client';
import { __styles, mergeClasses } from '@griffel/react';
import { createArrowStyles } from '@fluentui/react-positioning';
import { tokens } from '@fluentui/react-theme';
import { arrowHeight } from './private/constants';
export const tooltipClassNames = {
content: 'fui-Tooltip__content'
};
/**
* Styles for the tooltip
*/
const useStyles = /*#__PURE__*/__styles({
root: {
mc9l5x: "fjseox",
B7ck84d: "f1ewtqcl",
B2u0y6b: "f132xexn",
Bceei9c: "f158kwzp",
Bahqtrf: "fk6fouc",
Be2twd7: "fy9rknc",
Bg96gwp: "fwrc4pm",
Btd35i7: "fokg9q4",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f9ggezi",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1bzqsji",
De3pzq: "fxugw4r",
sj55zd: "f19n0e5",
Bhu2qc9: "fxeb0a7"
},
visible: {
mc9l5x: "ftgm304"
},
inverted: {
De3pzq: "fg3r6xk",
sj55zd: "fonrgv7"
},
arrow: {
B7ck84d: "f1ewtqcl",
qhf8xq: "f1euv43f",
Bj3rh1h: "f1bsuimh",
rhnwrx: "f1s3jn22",
Bdy53xb: "fv40uqz",
De3pzq: "f1u2r49w",
B2eet1l: "fqhgnl",
Beyfa6y: "f17bz04i",
Bz10aip: "f36o3x3",
Bqenvij: "fzofk8q",
a9b677: "f1wbx1ie",
Ftih45: "f1wl9k8s",
Br0sdwz: "f1aocrix",
cmx5o7: "f1ljr5q2",
susq4k: 0,
Biibvgv: 0,
Bicfajf: 0,
qehafq: 0,
Brs5u8j: "f155f1qt",
Ccq8qp: "f9mhzq7",
Baz25je: "fr6rhvx",
Bcgcnre: 0,
Bqjgrrk: 0,
qa3bma: 0,
y0oebl: 0,
Biqmznv: 0,
Bm6vgfq: 0,
Bbv0w2i: 0,
uvfttm: 0,
eqrjj: 0,
Bk5zm6e: 0,
m598lv: 0,
B4f6apu: 0,
ydt019: 0,
Bq4z7u6: 0,
Bdkvgpv: 0,
B0qfbqy: 0,
kj8mxx: "f1kc0wz4",
r59vdv: "fgq90dz",
Bkw5xw4: "fq0y47f",
hl6cv3: "f1pwrbz6",
aea9ga: "f1hxxcvm",
yayu3t: "fw8rgyo",
Bhsv975: "f1wnzycx",
rhl9o9: "f1730wal",
B7gxrvb: "f1fy4ixr",
B6q6orb: "fobkauc",
B0lu1f8: "f16bqv1l"
}
}, {
d: [".fjseox{display:none;}", ".f1ewtqcl{box-sizing:border-box;}", ".f132xexn{max-width:240px;}", ".f158kwzp{cursor:default;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fokg9q4{overflow-wrap:break-word;}", [".ft85np5{border-radius:var(--borderRadiusMedium);}", {
p: -1
}], [".f9ggezi{border:1px solid var(--colorTransparentStroke);}", {
p: -2
}], [".f1bzqsji{padding:4px 11px 6px 11px;}", {
p: -1
}], ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxeb0a7{filter:drop-shadow(0 0 2px var(--colorNeutralShadowAmbient)) drop-shadow(0 4px 8px var(--colorNeutralShadowKey));}", ".ftgm304{display:block;}", ".fg3r6xk{background-color:var(--colorNeutralBackgroundStatic);}", ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}", ".f1euv43f{position:absolute;}", ".f1bsuimh{z-index:-1;}", ".f1s3jn22{--fui-positioning-arrow-height:8.484px;}", ".fv40uqz{--fui-positioning-arrow-offset:-4.242px;}", ".f1u2r49w{background-color:inherit;}", ".fqhgnl{background-clip:content-box;}", ".f17bz04i{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f36o3x3{transform:rotate(var(--fui-positioning-arrow-angle));}", ".fzofk8q{height:var(--fui-positioning-arrow-height);}", ".f1wbx1ie{width:var(--fui-positioning-arrow-height);}", ".f1wl9k8s::before{content:\"\";}", ".f1aocrix::before{display:block;}", ".f1ljr5q2::before{background-color:inherit;}", [".f155f1qt::before{margin:-1px;}", {
p: -1
}], ".f9mhzq7::before{width:100%;}", ".fr6rhvx::before{height:100%;}", [".f1kc0wz4::before{border:1px solid var(--colorTransparentStroke);}", {
p: -2
}], ".fgq90dz::before{border-bottom-left-radius:var(--borderRadiusSmall);}", ".fq0y47f::before{clip-path:polygon(0% 0%, 100% 100%, 0% 100%);}", "[data-popper-placement^=\"top\"] .f1pwrbz6{bottom:var(--fui-positioning-arrow-offset);}", "[data-popper-placement^=\"top\"] .f1hxxcvm{--fui-positioning-arrow-angle:-45deg;}", "[data-popper-placement^=\"right\"] .fw8rgyo{left:var(--fui-positioning-arrow-offset);}", "[data-popper-placement^=\"right\"] .f1wnzycx{--fui-positioning-arrow-angle:45deg;}", "[data-popper-placement^=\"bottom\"] .f1730wal{top:var(--fui-positioning-arrow-offset);}", "[data-popper-placement^=\"bottom\"] .f1fy4ixr{--fui-positioning-arrow-angle:135deg;}", "[data-popper-placement^=\"left\"] .fobkauc{right:var(--fui-positioning-arrow-offset);}", "[data-popper-placement^=\"left\"] .f16bqv1l{--fui-positioning-arrow-angle:225deg;}"]
});
/**
* Apply styling to the Tooltip slots based on the state
*/
export const useTooltipStyles_unstable = state => {
'use no memo';
const styles = useStyles();
state.content.className = mergeClasses(tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);
state.arrowClassName = styles.arrow;
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["__styles","mergeClasses","createArrowStyles","tokens","arrowHeight","tooltipClassNames","content","useStyles","root","mc9l5x","B7ck84d","B2u0y6b","Bceei9c","Bahqtrf","Be2twd7","Bg96gwp","Btd35i7","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","De3pzq","sj55zd","Bhu2qc9","visible","inverted","arrow","qhf8xq","Bj3rh1h","rhnwrx","Bdy53xb","B2eet1l","Bz10aip","Bqenvij","a9b677","Ftih45","Br0sdwz","cmx5o7","susq4k","Biibvgv","Bicfajf","qehafq","Brs5u8j","Ccq8qp","Baz25je","Bcgcnre","Bqjgrrk","qa3bma","y0oebl","Biqmznv","Bm6vgfq","Bbv0w2i","uvfttm","eqrjj","Bk5zm6e","m598lv","B4f6apu","ydt019","Bq4z7u6","Bdkvgpv","B0qfbqy","kj8mxx","r59vdv","Bkw5xw4","hl6cv3","aea9ga","yayu3t","Bhsv975","rhl9o9","B7gxrvb","B6q6orb","B0lu1f8","d","p","useTooltipStyles_unstable","state","styles","className","appearance","arrowClassName"],"sources":["useTooltipStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { createArrowStyles } from '@fluentui/react-positioning';\nimport { tokens } from '@fluentui/react-theme';\nimport { arrowHeight } from './private/constants';\nexport const tooltipClassNames = {\n content: 'fui-Tooltip__content'\n};\n/**\n * Styles for the tooltip\n */ const 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 overflowWrap: 'break-word',\n borderRadius: tokens.borderRadiusMedium,\n border: `1px solid ${tokens.colorTransparentStroke}`,\n padding: '4px 11px 6px 11px',\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n // TODO need to add versions of tokens.alias.shadow.shadow8, etc. that work with filter\n filter: `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` + `drop-shadow(0 4px 8px ${tokens.colorNeutralShadowKey})`\n },\n visible: {\n display: 'block'\n },\n inverted: {\n backgroundColor: tokens.colorNeutralBackgroundStatic,\n color: tokens.colorNeutralForegroundStaticInverted\n },\n arrow: createArrowStyles({\n arrowHeight\n })\n});\n/**\n * Apply styling to the Tooltip slots based on the state\n */ export const useTooltipStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.content.className = mergeClasses(tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);\n state.arrowClassName = styles.arrow;\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,WAAW,QAAQ,qBAAqB;AACjD,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,OAAO,EAAE;AACb,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAQ,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAtC,MAAA;EAAA;EAAAuC,QAAA;IAAAJ,MAAA;IAAAC,MAAA;EAAA;EAAAI,KAAA;IAAAvC,OAAA;IAAAwC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAT,MAAA;IAAAU,OAAA;IAAArC,OAAA;IAAAsC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,KAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CA4BrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACb,MAAMC,MAAM,GAAG5F,SAAS,CAAC,CAAC;EAC1B2F,KAAK,CAAC5F,OAAO,CAAC8F,SAAS,GAAGnG,YAAY,CAACI,iBAAiB,CAACC,OAAO,EAAE6F,MAAM,CAAC3F,IAAI,EAAE0F,KAAK,CAACG,UAAU,KAAK,UAAU,IAAIF,MAAM,CAACnD,QAAQ,EAAEkD,KAAK,CAACnD,OAAO,IAAIoD,MAAM,CAACpD,OAAO,EAAEmD,KAAK,CAAC5F,OAAO,CAAC8F,SAAS,CAAC;EAC5LF,KAAK,CAACI,cAAc,GAAGH,MAAM,CAAClD,KAAK;EACnC,OAAOiD,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,48 @@
'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
import { createArrowStyles } from '@fluentui/react-positioning';
import { tokens } from '@fluentui/react-theme';
import { arrowHeight } from './private/constants';
export const tooltipClassNames = {
content: 'fui-Tooltip__content'
};
/**
* Styles for the tooltip
*/ const useStyles = makeStyles({
root: {
display: 'none',
boxSizing: 'border-box',
maxWidth: '240px',
cursor: 'default',
fontFamily: tokens.fontFamilyBase,
fontSize: tokens.fontSizeBase200,
lineHeight: tokens.lineHeightBase200,
overflowWrap: 'break-word',
borderRadius: tokens.borderRadiusMedium,
border: `1px solid ${tokens.colorTransparentStroke}`,
padding: '4px 11px 6px 11px',
backgroundColor: tokens.colorNeutralBackground1,
color: tokens.colorNeutralForeground1,
// TODO need to add versions of tokens.alias.shadow.shadow8, etc. that work with filter
filter: `drop-shadow(0 0 2px ${tokens.colorNeutralShadowAmbient}) ` + `drop-shadow(0 4px 8px ${tokens.colorNeutralShadowKey})`
},
visible: {
display: 'block'
},
inverted: {
backgroundColor: tokens.colorNeutralBackgroundStatic,
color: tokens.colorNeutralForegroundStaticInverted
},
arrow: createArrowStyles({
arrowHeight
})
});
/**
* Apply styling to the Tooltip slots based on the state
*/ export const useTooltipStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.content.className = mergeClasses(tooltipClassNames.content, styles.root, state.appearance === 'inverted' && styles.inverted, state.visible && styles.visible, state.content.className);
state.arrowClassName = styles.arrow;
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Tooltip/useTooltipStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 overflowWrap: 'break-word',\n borderRadius: tokens.borderRadiusMedium,\n border: `1px solid ${tokens.colorTransparentStroke}`,\n 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 'use no memo';\n\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"],"names":["makeStyles","mergeClasses","createArrowStyles","tokens","arrowHeight","tooltipClassNames","content","useStyles","root","display","boxSizing","maxWidth","cursor","fontFamily","fontFamilyBase","fontSize","fontSizeBase200","lineHeight","lineHeightBase200","overflowWrap","borderRadius","borderRadiusMedium","border","colorTransparentStroke","padding","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","filter","colorNeutralShadowAmbient","colorNeutralShadowKey","visible","inverted","colorNeutralBackgroundStatic","colorNeutralForegroundStaticInverted","arrow","useTooltipStyles_unstable","state","styles","className","appearance","arrowClassName"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,iBAAiB,QAAQ,8BAA8B;AAChE,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,WAAW,QAAQ,sBAAsB;AAIlD,OAAO,MAAMC,oBAAkD;IAC7DC,SAAS;AACX,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BQ,MAAM;QACJC,SAAS;QACTC,WAAW;QACXC,UAAU;QACVC,QAAQ;QACRC,YAAYV,OAAOW,cAAc;QACjCC,UAAUZ,OAAOa,eAAe;QAChCC,YAAYd,OAAOe,iBAAiB;QACpCC,cAAc;QACdC,cAAcjB,OAAOkB,kBAAkB;QACvCC,QAAQ,CAAC,UAAU,EAAEnB,OAAOoB,sBAAsB,EAAE;QACpDC,SAAS;QACTC,iBAAiBtB,OAAOuB,uBAAuB;QAC/CC,OAAOxB,OAAOyB,uBAAuB;QAErC,uFAAuF;QACvFC,QACE,CAAC,oBAAoB,EAAE1B,OAAO2B,yBAAyB,CAAC,EAAE,CAAC,GAC3D,CAAC,sBAAsB,EAAE3B,OAAO4B,qBAAqB,CAAC,CAAC,CAAC;IAC5D;IAEAC,SAAS;QACPvB,SAAS;IACX;IAEAwB,UAAU;QACRR,iBAAiBtB,OAAO+B,4BAA4B;QACpDP,OAAOxB,OAAOgC,oCAAoC;IACpD;IAEAC,OAAOlC,kBAAkB;QAAEE;IAAY;AACzC;AAEA;;CAEC,GACD,OAAO,MAAMiC,4BAA4B,CAACC;IACxC;IAEA,MAAMC,SAAShC;IAEf+B,MAAMhC,OAAO,CAACkC,SAAS,GAAGvC,aACxBI,kBAAkBC,OAAO,EACzBiC,OAAO/B,IAAI,EACX8B,MAAMG,UAAU,KAAK,cAAcF,OAAON,QAAQ,EAClDK,MAAMN,OAAO,IAAIO,OAAOP,OAAO,EAC/BM,MAAMhC,OAAO,CAACkC,SAAS;IAGzBF,MAAMI,cAAc,GAAGH,OAAOH,KAAK;IAEnC,OAAOE;AACT,EAAE"}

1
node_modules/@fluentui/react-tooltip/lib/index.js generated vendored Normal file
View File

@@ -0,0 +1 @@
export { Tooltip, renderTooltip_unstable, tooltipClassNames, useTooltipStyles_unstable, useTooltip_unstable, useTooltipBase_unstable } from './Tooltip';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Tooltip,\n renderTooltip_unstable,\n tooltipClassNames,\n useTooltipStyles_unstable,\n useTooltip_unstable,\n useTooltipBase_unstable,\n} from './Tooltip';\nexport type {\n OnVisibleChangeData,\n TooltipProps,\n TooltipSlots,\n TooltipState,\n TooltipChildProps as TooltipTriggerProps,\n TooltipBaseProps,\n TooltipBaseState,\n} from './Tooltip';\n"],"names":["Tooltip","renderTooltip_unstable","tooltipClassNames","useTooltipStyles_unstable","useTooltip_unstable","useTooltipBase_unstable"],"mappings":"AAAA,SACEA,OAAO,EACPC,sBAAsB,EACtBC,iBAAiB,EACjBC,yBAAyB,EACzBC,mBAAmB,EACnBC,uBAAuB,QAClB,YAAY"}

53
node_modules/@fluentui/react-tooltip/package.json generated vendored Normal file
View File

@@ -0,0 +1,53 @@
{
"name": "@fluentui/react-tooltip",
"version": "9.10.0",
"description": "React components for building web experiences",
"main": "lib-commonjs/index.js",
"module": "lib/index.js",
"typings": "./dist/index.d.ts",
"sideEffects": false,
"repository": {
"type": "git",
"url": "https://github.com/microsoft/fluentui"
},
"license": "MIT",
"dependencies": {
"@fluentui/keyboard-keys": "^9.0.8",
"@fluentui/react-jsx-runtime": "^9.4.1",
"@fluentui/react-portal": "^9.8.11",
"@fluentui/react-positioning": "^9.22.0",
"@fluentui/react-shared-contexts": "^9.26.2",
"@fluentui/react-tabster": "^9.26.13",
"@fluentui/react-theme": "^9.2.1",
"@fluentui/react-utilities": "^9.26.2",
"@griffel/react": "^1.5.32",
"@swc/helpers": "^0.5.1"
},
"peerDependencies": {
"@types/react": ">=16.14.0 <20.0.0",
"@types/react-dom": ">=16.9.0 <20.0.0",
"react": ">=16.14.0 <20.0.0",
"react-dom": ">=16.14.0 <20.0.0"
},
"beachball": {
"disallowedChangeTypes": [
"major",
"prerelease"
]
},
"exports": {
".": {
"types": "./dist/index.d.ts",
"node": "./lib-commonjs/index.js",
"import": "./lib/index.js",
"require": "./lib-commonjs/index.js"
},
"./package.json": "./package.json"
},
"files": [
"*.md",
"dist/*.d.ts",
"lib",
"lib-commonjs"
]
}