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

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"}