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

View File

@@ -0,0 +1,35 @@
'use client';
import * as React from 'react';
const MotionRefForwarderContext = /*#__PURE__*/ React.createContext(undefined);
/**
* A hook that reads the ref forwarded by `MotionRefForwarder` from context.
* Used in child components to merge the motion ref into the root slot ref.
*
* @internal
*/ export function useMotionForwardedRef() {
return React.useContext(MotionRefForwarderContext);
}
/**
* A component that forwards a ref to its children via a React context.
* This is used to pass a motion component's ref through to the actual surface element,
* since motion components wrap their children and the ref needs to reach the inner element.
*
* @internal
*/ export const MotionRefForwarder = /*#__PURE__*/ React.forwardRef((props, ref)=>{
return /*#__PURE__*/ React.createElement(MotionRefForwarderContext.Provider, {
value: ref
}, props.children);
});
MotionRefForwarder.displayName = 'MotionRefForwarder';
/**
* Resets the MotionRefForwarder context to `undefined` for its children.
* Render this in components that consume `useMotionForwardedRef()` and render
* arbitrary user content, to prevent the context from leaking to descendants.
*
* @internal
*/ export const MotionRefForwarderReset = (props)=>{
return /*#__PURE__*/ React.createElement(MotionRefForwarderContext.Provider, {
value: undefined
}, props.children);
};
MotionRefForwarderReset.displayName = 'MotionRefForwarderReset';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MotionRefForwarder.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nconst MotionRefForwarderContext = React.createContext<React.Ref<HTMLElement> | undefined>(undefined);\n\n/**\n * A hook that reads the ref forwarded by `MotionRefForwarder` from context.\n * Used in child components to merge the motion ref into the root slot ref.\n *\n * @internal\n */\nexport function useMotionForwardedRef(): React.Ref<HTMLElement> | undefined {\n return React.useContext(MotionRefForwarderContext);\n}\n\n/**\n * A component that forwards a ref to its children via a React context.\n * This is used to pass a motion component's ref through to the actual surface element,\n * since motion components wrap their children and the ref needs to reach the inner element.\n *\n * @internal\n */\nexport const MotionRefForwarder = React.forwardRef<HTMLElement, { children?: React.ReactElement }>((props, ref) => {\n return <MotionRefForwarderContext.Provider value={ref}>{props.children}</MotionRefForwarderContext.Provider>;\n});\n\nMotionRefForwarder.displayName = 'MotionRefForwarder';\n\n/**\n * Resets the MotionRefForwarder context to `undefined` for its children.\n * Render this in components that consume `useMotionForwardedRef()` and render\n * arbitrary user content, to prevent the context from leaking to descendants.\n *\n * @internal\n */\nexport const MotionRefForwarderReset: React.FC<{ children: React.ReactElement }> = props => {\n return <MotionRefForwarderContext.Provider value={undefined}>{props.children}</MotionRefForwarderContext.Provider>;\n};\n\nMotionRefForwarderReset.displayName = 'MotionRefForwarderReset';\n"],"names":["React","MotionRefForwarderContext","createContext","undefined","useMotionForwardedRef","useContext","MotionRefForwarder","forwardRef","props","ref","Provider","value","children","displayName","MotionRefForwarderReset"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,MAAMC,0CAA4BD,MAAME,aAAa,CAAqCC;AAE1F;;;;;CAKC,GACD,OAAO,SAASC;IACd,OAAOJ,MAAMK,UAAU,CAACJ;AAC1B;AAEA;;;;;;CAMC,GACD,OAAO,MAAMK,mCAAqBN,MAAMO,UAAU,CAAiD,CAACC,OAAOC;IACzG,qBAAO,oBAACR,0BAA0BS,QAAQ;QAACC,OAAOF;OAAMD,MAAMI,QAAQ;AACxE,GAAG;AAEHN,mBAAmBO,WAAW,GAAG;AAEjC;;;;;;CAMC,GACD,OAAO,MAAMC,0BAAsEN,CAAAA;IACjF,qBAAO,oBAACP,0BAA0BS,QAAQ;QAACC,OAAOR;OAAYK,MAAMI,QAAQ;AAC9E,EAAE;AAEFE,wBAAwBD,WAAW,GAAG"}

View File

@@ -0,0 +1,54 @@
'use client';
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import * as React from 'react';
import { getNextChildMapping } from '../utils/groups/getNextChildMapping';
import { getChildMapping } from '../utils/groups/getChildMapping';
import { PresenceGroupItemProvider } from './PresenceGroupItemProvider';
/* eslint-disable @typescript-eslint/explicit-member-accessibility */ /* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/member-ordering */ export class PresenceGroup extends React.Component {
static getDerivedStateFromProps(nextProps, { childMapping: prevChildMapping, firstRender }) {
const nextChildMapping = getChildMapping(nextProps.children);
return {
childMapping: firstRender ? nextChildMapping : getNextChildMapping(prevChildMapping, nextChildMapping),
firstRender: false
};
}
componentDidMount() {
this.mounted = true;
}
componentWillUnmount() {
this.mounted = false;
}
render() {
return /*#__PURE__*/ React.createElement(React.Fragment, null, Object.entries(this.state.childMapping).map(([childKey, childProps])=>/*#__PURE__*/ React.createElement(PresenceGroupItemProvider, {
...childProps,
childKey: childKey,
key: childKey,
onExit: this.handleExit
}, childProps.element)));
}
constructor(props, context){
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - React.Component constructor has only one argument in React 19
super(props, context), _define_property(this, "mounted", false), _define_property(this, "handleExit", (childKey)=>{
const currentChildMapping = getChildMapping(this.props.children);
if (childKey in currentChildMapping) {
return;
}
if (this.mounted) {
this.setState((state)=>{
const childMapping = {
...state.childMapping
};
delete childMapping[childKey];
return {
childMapping
};
});
}
});
this.state = {
childMapping: {},
firstRender: true
};
}
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PresenceGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { getNextChildMapping } from '../utils/groups/getNextChildMapping';\nimport { getChildMapping } from '../utils/groups/getChildMapping';\nimport type { PresenceGroupChildMapping } from '../utils/groups/types';\nimport { PresenceGroupItemProvider } from './PresenceGroupItemProvider';\n\ntype PresenceGroupProps = {\n children: React.ReactNode;\n};\n\ntype PresenceGroupState = {\n childMapping: PresenceGroupChildMapping;\n firstRender: boolean;\n};\n\n/* eslint-disable @typescript-eslint/explicit-member-accessibility */\n/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/member-ordering */\n\nexport class PresenceGroup extends React.Component<PresenceGroupProps, PresenceGroupState> {\n private mounted: boolean = false;\n\n static getDerivedStateFromProps(\n nextProps: PresenceGroupProps,\n { childMapping: prevChildMapping, firstRender }: PresenceGroupState,\n ): PresenceGroupState {\n const nextChildMapping = getChildMapping(nextProps.children);\n\n return {\n childMapping: firstRender ? nextChildMapping : getNextChildMapping(prevChildMapping, nextChildMapping),\n firstRender: false,\n };\n }\n\n constructor(props: PresenceGroupProps, context?: unknown) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore - React.Component constructor has only one argument in React 19\n super(props, context);\n\n this.state = {\n childMapping: {},\n firstRender: true,\n };\n }\n\n private handleExit = (childKey: string): void => {\n const currentChildMapping = getChildMapping(this.props.children);\n\n if (childKey in currentChildMapping) {\n return;\n }\n\n if (this.mounted) {\n this.setState(state => {\n const childMapping = { ...state.childMapping };\n delete childMapping[childKey];\n\n return { childMapping };\n });\n }\n };\n\n componentDidMount(): void {\n this.mounted = true;\n }\n\n componentWillUnmount(): void {\n this.mounted = false;\n }\n render(): JSXElement {\n return (\n <>\n {Object.entries(this.state.childMapping).map(([childKey, childProps]) => (\n <PresenceGroupItemProvider {...childProps} childKey={childKey} key={childKey} onExit={this.handleExit}>\n {childProps.element}\n </PresenceGroupItemProvider>\n ))}\n </>\n );\n }\n}\n"],"names":["React","getNextChildMapping","getChildMapping","PresenceGroupItemProvider","PresenceGroup","Component","getDerivedStateFromProps","nextProps","childMapping","prevChildMapping","firstRender","nextChildMapping","children","componentDidMount","mounted","componentWillUnmount","render","Object","entries","state","map","childKey","childProps","key","onExit","handleExit","element","constructor","props","context","currentChildMapping","setState"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,sCAAsC;AAC1E,SAASC,eAAe,QAAQ,kCAAkC;AAElE,SAASC,yBAAyB,QAAQ,8BAA8B;AAWxE,mEAAmE,GACnE,uDAAuD,GACvD,qDAAqD,GAErD,OAAO,MAAMC,sBAAsBJ,MAAMK,SAAS;IAGhD,OAAOC,yBACLC,SAA6B,EAC7B,EAAEC,cAAcC,gBAAgB,EAAEC,WAAW,EAAsB,EAC/C;QACpB,MAAMC,mBAAmBT,gBAAgBK,UAAUK,QAAQ;QAE3D,OAAO;YACLJ,cAAcE,cAAcC,mBAAmBV,oBAAoBQ,kBAAkBE;YACrFD,aAAa;QACf;IACF;IA8BAG,oBAA0B;QACxB,IAAI,CAACC,OAAO,GAAG;IACjB;IAEAC,uBAA6B;QAC3B,IAAI,CAACD,OAAO,GAAG;IACjB;IACAE,SAAqB;QACnB,qBACE,0CACGC,OAAOC,OAAO,CAAC,IAAI,CAACC,KAAK,CAACX,YAAY,EAAEY,GAAG,CAAC,CAAC,CAACC,UAAUC,WAAW,iBAClE,oBAACnB;gBAA2B,GAAGmB,UAAU;gBAAED,UAAUA;gBAAUE,KAAKF;gBAAUG,QAAQ,IAAI,CAACC,UAAU;eAClGH,WAAWI,OAAO;IAK7B;IA7CAC,YAAYC,KAAyB,EAAEC,OAAiB,CAAE;QACxD,6DAA6D;QAC7D,6EAA6E;QAC7E,KAAK,CAACD,OAAOC,UAjBf,uBAAQf,WAAmB,QAyB3B,uBAAQW,cAAa,CAACJ;YACpB,MAAMS,sBAAsB5B,gBAAgB,IAAI,CAAC0B,KAAK,CAAChB,QAAQ;YAE/D,IAAIS,YAAYS,qBAAqB;gBACnC;YACF;YAEA,IAAI,IAAI,CAAChB,OAAO,EAAE;gBAChB,IAAI,CAACiB,QAAQ,CAACZ,CAAAA;oBACZ,MAAMX,eAAe;wBAAE,GAAGW,MAAMX,YAAY;oBAAC;oBAC7C,OAAOA,YAAY,CAACa,SAAS;oBAE7B,OAAO;wBAAEb;oBAAa;gBACxB;YACF;QACF;QArBE,IAAI,CAACW,KAAK,GAAG;YACXX,cAAc,CAAC;YACfE,aAAa;QACf;IACF;AAqCF"}

View File

@@ -0,0 +1,26 @@
'use client';
import * as React from 'react';
import { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';
/**
* Provides context for a single child of a `PresenceGroup`. Exists only to make a stable context value for a child.
* Not intended for direct use.
*
* @internal
*/ export const PresenceGroupItemProvider = (props)=>{
const { appear, childKey, onExit, visible, unmountOnExit } = props;
const contextValue = React.useMemo(()=>({
appear,
visible,
onExit: ()=>onExit(childKey),
unmountOnExit
}), [
appear,
childKey,
onExit,
visible,
unmountOnExit
]);
return /*#__PURE__*/ React.createElement(PresenceGroupChildContext.Provider, {
value: contextValue
}, props.children);
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PresenceGroupItemProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport type { PresenceGroupChildContextValue } from '../contexts/PresenceGroupChildContext';\n\ntype PresenceGroupItemProviderProps = Omit<PresenceGroupChildContextValue, 'onExit'> & {\n children: JSXElement;\n childKey: string;\n // That's an internal callback, so we don't need to enforce the type here\n // eslint-disable-next-line @nx/workspace-consistent-callback-type\n onExit: (childKey: string) => void;\n};\n\n/**\n * Provides context for a single child of a `PresenceGroup`. Exists only to make a stable context value for a child.\n * Not intended for direct use.\n *\n * @internal\n */\nexport const PresenceGroupItemProvider: React.FC<PresenceGroupItemProviderProps> = props => {\n const { appear, childKey, onExit, visible, unmountOnExit } = props;\n const contextValue = React.useMemo(\n () => ({\n appear,\n visible,\n onExit: () => onExit(childKey),\n unmountOnExit,\n }),\n [appear, childKey, onExit, visible, unmountOnExit],\n );\n\n return <PresenceGroupChildContext.Provider value={contextValue}>{props.children}</PresenceGroupChildContext.Provider>;\n};\n"],"names":["React","PresenceGroupChildContext","PresenceGroupItemProvider","props","appear","childKey","onExit","visible","unmountOnExit","contextValue","useMemo","Provider","value","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,yBAAyB,QAAQ,wCAAwC;AAWlF;;;;;CAKC,GACD,OAAO,MAAMC,4BAAsEC,CAAAA;IACjF,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,aAAa,EAAE,GAAGL;IAC7D,MAAMM,eAAeT,MAAMU,OAAO,CAChC,IAAO,CAAA;YACLN;YACAG;YACAD,QAAQ,IAAMA,OAAOD;YACrBG;QACF,CAAA,GACA;QAACJ;QAAQC;QAAUC;QAAQC;QAASC;KAAc;IAGpD,qBAAO,oBAACP,0BAA0BU,QAAQ;QAACC,OAAOH;OAAeN,MAAMU,QAAQ;AACjF,EAAE"}

View File

@@ -0,0 +1,8 @@
'use client';
import * as React from 'react';
const MotionBehaviourContext = React.createContext(undefined);
export const MotionBehaviourProvider = MotionBehaviourContext.Provider;
export const useMotionBehaviourContext = ()=>{
var _React_useContext;
return (_React_useContext = React.useContext(MotionBehaviourContext)) !== null && _React_useContext !== void 0 ? _React_useContext : 'default';
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/MotionBehaviourContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\n/**\n * Specifies the behaviour of child motion component under @see MotionBehaviourProvider.\n */\nexport type MotionBehaviourType = 'skip' | 'default';\n\nconst MotionBehaviourContext = React.createContext<MotionBehaviourType | undefined>(undefined);\n\nexport const MotionBehaviourProvider = MotionBehaviourContext.Provider;\nexport const useMotionBehaviourContext = (): MotionBehaviourType =>\n React.useContext(MotionBehaviourContext) ?? 'default';\n"],"names":["React","MotionBehaviourContext","createContext","undefined","MotionBehaviourProvider","Provider","useMotionBehaviourContext","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAO/B,MAAMC,yBAAyBD,MAAME,aAAa,CAAkCC;AAEpF,OAAO,MAAMC,0BAA0BH,uBAAuBI,QAAQ,CAAC;AACvE,OAAO,MAAMC,4BAA4B;QACvCN;WAAAA,CAAAA,oBAAAA,MAAMO,UAAU,CAACN,qCAAjBD,+BAAAA,oBAA4C;EAAU"}

View File

@@ -0,0 +1,7 @@
'use client';
import * as React from 'react';
/**
* @internal
*/ export const PresenceGroupChildContext = React.createContext(undefined);
export const PresenceGroupChildProvider = PresenceGroupChildContext.Provider;
export const usePresenceGroupChildContext = ()=>React.useContext(PresenceGroupChildContext);

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/PresenceGroupChildContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nexport type PresenceGroupChildContextValue = {\n appear: boolean;\n visible: boolean;\n unmountOnExit: boolean;\n\n onExit: () => void;\n};\n\n/**\n * @internal\n */\nexport const PresenceGroupChildContext = React.createContext<PresenceGroupChildContextValue | undefined>(undefined);\n\nexport const PresenceGroupChildProvider = PresenceGroupChildContext.Provider;\nexport const usePresenceGroupChildContext = (): PresenceGroupChildContextValue | undefined =>\n React.useContext(PresenceGroupChildContext);\n"],"names":["React","PresenceGroupChildContext","createContext","undefined","PresenceGroupChildProvider","Provider","usePresenceGroupChildContext","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAU/B;;CAEC,GACD,OAAO,MAAMC,4BAA4BD,MAAME,aAAa,CAA6CC,WAAW;AAEpH,OAAO,MAAMC,6BAA6BH,0BAA0BI,QAAQ,CAAC;AAC7E,OAAO,MAAMC,+BAA+B,IAC1CN,MAAMO,UAAU,CAACN,2BAA2B"}

View File

@@ -0,0 +1,85 @@
'use client';
import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
import * as React from 'react';
import { useAnimateAtoms } from '../hooks/useAnimateAtoms';
import { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';
import { useIsReducedMotion } from '../hooks/useIsReducedMotion';
import { useChildElement } from '../utils/useChildElement';
import { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';
/**
* A private symbol to store the motion definition on the component for variants.
*
* @internal
*/ export const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');
/**
* Creates a component that will animate the children using the provided motion.
*
* @param value - A motion definition.
*/ export function createMotionComponent(value) {
const Atom = (props)=>{
'use no memo';
const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, onMotionCancel: onMotionCancelProp, ..._rest } = props;
const params = _rest;
const [child, childRef] = useChildElement(children);
const handleRef = useMotionImperativeRef(imperativeRef);
const skipMotions = useMotionBehaviourContext() === 'skip';
const optionsRef = React.useRef({
skipMotions,
params
});
const animateAtoms = useAnimateAtoms();
const isReducedMotion = useIsReducedMotion();
const onMotionStart = useEventCallback(()=>{
onMotionStartProp === null || onMotionStartProp === void 0 ? void 0 : onMotionStartProp(null);
});
const onMotionFinish = useEventCallback(()=>{
onMotionFinishProp === null || onMotionFinishProp === void 0 ? void 0 : onMotionFinishProp(null);
});
const onMotionCancel = useEventCallback(()=>{
onMotionCancelProp === null || onMotionCancelProp === void 0 ? void 0 : onMotionCancelProp(null);
});
useIsomorphicLayoutEffect(()=>{
// Heads up!
// We store the params in a ref to avoid re-rendering the component when the params change.
optionsRef.current = {
skipMotions,
params
};
});
useIsomorphicLayoutEffect(()=>{
const element = childRef.current;
if (element) {
const atoms = typeof value === 'function' ? value({
element,
...optionsRef.current.params
}) : value;
onMotionStart();
const handle = animateAtoms(element, atoms, {
isReducedMotion: isReducedMotion()
});
handleRef.current = handle;
handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);
if (optionsRef.current.skipMotions) {
handle.finish();
}
return ()=>{
handle.cancel();
};
}
}, [
animateAtoms,
childRef,
handleRef,
isReducedMotion,
onMotionFinish,
onMotionStart,
onMotionCancel
]);
return child;
};
return Object.assign(Atom, {
// Heads up!
// Always normalize it to a function to simplify types
[MOTION_DEFINITION]: typeof value === 'function' ? value : ()=>value
});
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,29 @@
import { MOTION_DEFINITION, createMotionComponent } from './createMotionComponent';
/**
* Create a variant function that wraps a motion function to customize it.
* The new motion function has the supplied variant params as defaults,
* but these can still be overridden by runtime params when the new function is called.
*
* @internal
*/ export function createMotionFnVariant(motionFn, variantParams) {
const variantFn = (runtimeParams)=>motionFn({
...variantParams,
...runtimeParams
});
return variantFn;
}
/**
* Create a new motion component based on another motion component,
* using the provided variant parameters as defaults.
*
* @param component - A component created by `createMotionComponent`.
* @param variantParams - An object containing the variant parameters to be used as defaults.
* The variant parameters should match the type of the component's motion parameters.
* @returns A new motion component that uses the provided variant parameters as defaults.
* The new component can still accept runtime parameters that override the defaults.
*/ export function createMotionComponentVariant(component, variantParams) {
const originalFn = component[MOTION_DEFINITION];
// The variant params become new defaults, but they can still be overridden by runtime params.
const variantFn = createMotionFnVariant(originalFn, variantParams);
return createMotionComponent(variantFn);
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/factories/createMotionComponentVariant.ts"],"sourcesContent":["import type { MotionParam, AtomMotionFn } from '../types';\nimport { MOTION_DEFINITION, createMotionComponent, MotionComponent } from './createMotionComponent';\n\n/**\n * Create a variant function that wraps a motion function to customize it.\n * The new motion function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n *\n * @internal\n */\nexport function createMotionFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n motionFn: AtomMotionFn<MotionParams>,\n variantParams: Partial<MotionParams>,\n): typeof motionFn {\n const variantFn: typeof motionFn = runtimeParams => motionFn({ ...variantParams, ...runtimeParams });\n return variantFn;\n}\n\n/**\n * Create a new motion component based on another motion component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createMotionComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new motion component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createMotionComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n component: MotionComponent<MotionParams>,\n variantParams: Partial<MotionParams>,\n): MotionComponent<MotionParams> {\n const originalFn = component[MOTION_DEFINITION];\n // The variant params become new defaults, but they can still be overridden by runtime params.\n const variantFn = createMotionFnVariant(originalFn, variantParams);\n return createMotionComponent(variantFn);\n}\n"],"names":["MOTION_DEFINITION","createMotionComponent","createMotionFnVariant","motionFn","variantParams","variantFn","runtimeParams","createMotionComponentVariant","component","originalFn"],"mappings":"AACA,SAASA,iBAAiB,EAAEC,qBAAqB,QAAyB,0BAA0B;AAEpG;;;;;;CAMC,GACD,OAAO,SAASC,sBACdC,QAAoC,EACpCC,aAAoC;IAEpC,MAAMC,YAA6BC,CAAAA,gBAAiBH,SAAS;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IAClG,OAAOD;AACT;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASE,6BACdC,SAAwC,EACxCJ,aAAoC;IAEpC,MAAMK,aAAaD,SAAS,CAACR,kBAAkB;IAC/C,8FAA8F;IAC9F,MAAMK,YAAYH,sBAAsBO,YAAYL;IACpD,OAAOH,sBAAsBI;AAC/B"}

View File

@@ -0,0 +1,168 @@
'use client';
import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
import * as React from 'react';
import { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';
import { useAnimateAtoms } from '../hooks/useAnimateAtoms';
import { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';
import { useMountedState } from '../hooks/useMountedState';
import { useIsReducedMotion } from '../hooks/useIsReducedMotion';
import { useChildElement } from '../utils/useChildElement';
import { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';
import { createMotionComponent } from './createMotionComponent';
/**
* A private symbol to store the motion definition on the component for variants.
*
* @internal
*/ export const PRESENCE_MOTION_DEFINITION = Symbol('PRESENCE_MOTION_DEFINITION');
const INTERRUPTABLE_MOTION_SYMBOL = Symbol.for('interruptablePresence');
export function createPresenceComponent(value) {
return Object.assign((props)=>{
'use no memo';
const itemContext = React.useContext(PresenceGroupChildContext);
const merged = {
...itemContext,
...props
};
const skipMotions = useMotionBehaviourContext() === 'skip';
const { appear, children, imperativeRef, onExit, onMotionFinish, onMotionStart, onMotionCancel, visible, unmountOnExit, ..._rest } = merged;
const params = _rest;
const [mounted, setMounted] = useMountedState(visible, unmountOnExit);
const [child, childRef] = useChildElement(children, mounted);
const handleRef = useMotionImperativeRef(imperativeRef);
const optionsRef = React.useRef({
appear,
params,
skipMotions
});
const animateAtoms = useAnimateAtoms();
const isFirstMount = useFirstMount();
const isReducedMotion = useIsReducedMotion();
const handleMotionStart = useEventCallback((direction)=>{
onMotionStart === null || onMotionStart === void 0 ? void 0 : onMotionStart(null, {
direction
});
});
const handleMotionFinish = useEventCallback((direction)=>{
onMotionFinish === null || onMotionFinish === void 0 ? void 0 : onMotionFinish(null, {
direction
});
if (direction === 'exit' && unmountOnExit) {
setMounted(false);
onExit === null || onExit === void 0 ? void 0 : onExit();
}
});
const handleMotionCancel = useEventCallback((direction)=>{
onMotionCancel === null || onMotionCancel === void 0 ? void 0 : onMotionCancel(null, {
direction
});
});
useIsomorphicLayoutEffect(()=>{
// Heads up!
// We store the params in a ref to avoid re-rendering the component when the params change.
optionsRef.current = {
appear,
params,
skipMotions
};
});
useIsomorphicLayoutEffect(()=>{
const element = childRef.current;
if (!element) {
return;
}
let handle;
function cleanup() {
if (!handle) {
return;
}
// Heads up!
//
// If the animation is interruptible & is running, we don't want to cancel it as it will be reversed in
// the next effect.
if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION && handle.isRunning()) {
return;
}
handle.cancel();
handleRef.current = undefined;
}
const presenceMotion = typeof value === 'function' ? value({
element,
...optionsRef.current.params
}) : value;
const IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION = presenceMotion[INTERRUPTABLE_MOTION_SYMBOL];
if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION) {
handle = handleRef.current;
if (handle && handle.isRunning()) {
handle.reverse();
return cleanup;
}
}
const atoms = visible ? presenceMotion.enter : presenceMotion.exit;
const direction = visible ? 'enter' : 'exit';
// Heads up!
// Initial styles are applied when the component is mounted for the first time and "appear" is set to "false" (otherwise animations are triggered)
const applyInitialStyles = !optionsRef.current.appear && isFirstMount;
const skipAnimationByConfig = optionsRef.current.skipMotions;
if (!applyInitialStyles) {
handleMotionStart(direction);
}
handle = animateAtoms(element, atoms, {
isReducedMotion: isReducedMotion()
});
if (applyInitialStyles) {
// Heads up!
// .finish() is used in this case to skip animation and apply animation styles immediately
handle.finish();
return cleanup;
}
handleRef.current = handle;
handle.setMotionEndCallbacks(()=>handleMotionFinish(direction), ()=>handleMotionCancel(direction));
if (skipAnimationByConfig) {
handle.finish();
}
return cleanup;
}, // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders
// eslint-disable-next-line react-hooks/exhaustive-deps
[
animateAtoms,
childRef,
handleRef,
isReducedMotion,
handleMotionFinish,
handleMotionStart,
handleMotionCancel,
visible
]);
React.useEffect(()=>{
// Heads up!
//
// Dispose the handle when unmounting the component to clean up retained references. Doing it in a separate
// effect to ensure that the component is unmounted.
if (unmountOnExit && !mounted) {
var _handleRef_current;
(_handleRef_current = handleRef.current) === null || _handleRef_current === void 0 ? void 0 : _handleRef_current.dispose();
}
}, [
handleRef,
unmountOnExit,
mounted
]);
if (mounted) {
return child;
}
return null;
}, {
// Heads up!
// Always normalize it to a function to simplify types
[PRESENCE_MOTION_DEFINITION]: typeof value === 'function' ? value : ()=>value
}, {
// Wrap `enter` in its own motion component as a static method, e.g. <Fade.In>
In: createMotionComponent(// If we have a motion function, wrap it to forward the runtime params and pick `enter`.
// Otherwise, pass the `enter` motion object directly.
typeof value === 'function' ? (...args)=>value(...args).enter : value.enter),
// Wrap `exit` in its own motion component as a static method, e.g. <Fade.Out>
Out: createMotionComponent(// If we have a motion function, wrap it to forward the runtime params and pick `exit`.
// Otherwise, pass the `exit` motion object directly.
typeof value === 'function' ? (...args)=>value(...args).exit : value.exit)
});
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,29 @@
import { PRESENCE_MOTION_DEFINITION, createPresenceComponent } from './createPresenceComponent';
/**
* Create a variant function that wraps a presence function to customize it.
* The new presence function has the supplied variant params as defaults,
* but these can still be overridden by runtime params when the new function is called.
*
* @internal
*/ export function createPresenceFnVariant(presenceFn, variantParams) {
const variantFn = (runtimeParams)=>presenceFn({
...variantParams,
...runtimeParams
});
return variantFn;
}
/**
* Create a new presence component based on another presence component,
* using the provided variant parameters as defaults.
*
* @param component - A component created by `createPresenceComponent`.
* @param variantParams - An object containing the variant parameters to be used as defaults.
* The variant parameters should match the type of the component's motion parameters.
* @returns A new presence component that uses the provided variant parameters as defaults.
* The new component can still accept runtime parameters that override the defaults.
*/ export function createPresenceComponentVariant(component, variantParams) {
const originalFn = component[PRESENCE_MOTION_DEFINITION];
// The variant params become new defaults, but they can still be overridden by runtime params.
const variantFn = createPresenceFnVariant(originalFn, variantParams);
return createPresenceComponent(variantFn);
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/factories/createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '../types';\nimport { PRESENCE_MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * Create a variant function that wraps a presence function to customize it.\n * The new presence function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n *\n * @internal\n */\nexport function createPresenceFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n presenceFn: PresenceMotionFn<MotionParams>,\n variantParams: Partial<MotionParams>,\n): typeof presenceFn {\n const variantFn: typeof presenceFn = runtimeParams => presenceFn({ ...variantParams, ...runtimeParams });\n return variantFn;\n}\n\n/**\n * Create a new presence component based on another presence component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createPresenceComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new presence component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n component: PresenceComponent<MotionParams>,\n variantParams: Partial<MotionParams>,\n): PresenceComponent<MotionParams> {\n const originalFn = component[PRESENCE_MOTION_DEFINITION];\n // The variant params become new defaults, but they can still be overridden by runtime params.\n const variantFn = createPresenceFnVariant(originalFn, variantParams);\n return createPresenceComponent(variantFn);\n}\n"],"names":["PRESENCE_MOTION_DEFINITION","createPresenceComponent","createPresenceFnVariant","presenceFn","variantParams","variantFn","runtimeParams","createPresenceComponentVariant","component","originalFn"],"mappings":"AACA,SAASA,0BAA0B,EAAEC,uBAAuB,QAA2B,4BAA4B;AAEnH;;;;;;CAMC,GACD,OAAO,SAASC,wBACdC,UAA0C,EAC1CC,aAAoC;IAEpC,MAAMC,YAA+BC,CAAAA,gBAAiBH,WAAW;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IACtG,OAAOD;AACT;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASE,+BACdC,SAA0C,EAC1CJ,aAAoC;IAEpC,MAAMK,aAAaD,SAAS,CAACR,2BAA2B;IACxD,8FAA8F;IAC9F,MAAMK,YAAYH,wBAAwBO,YAAYL;IACtD,OAAOH,wBAAwBI;AACjC"}

View File

@@ -0,0 +1,184 @@
'use client';
import * as React from 'react';
import { isAnimationRunning } from '../utils/isAnimationRunning';
export const DEFAULT_ANIMATION_OPTIONS = {
fill: 'forwards'
};
// A motion atom's default reduced motion is a simple 1 ms duration.
// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.
const DEFAULT_REDUCED_MOTION_ATOM = {
duration: 1
};
/**
* Creates an animation handle that controls multiple animations.
* Is used to avoid leaking "element" references from the hook.
*
* @param animations
*/ function createHandle(animations) {
return {
set playbackRate (rate){
animations.forEach((animation)=>{
animation.playbackRate = rate;
});
},
setMotionEndCallbacks (onfinish, oncancel) {
// Heads up!
// This could use "Animation:finished", but it's causing a memory leak in Chromium.
// See: https://issues.chromium.org/u/2/issues/383016426
const promises = animations.map((animation)=>{
return new Promise((resolve, reject)=>{
animation.onfinish = ()=>resolve();
animation.oncancel = ()=>reject();
});
});
Promise.all(promises).then(()=>{
onfinish();
}).catch(()=>{
oncancel();
});
},
isRunning () {
return animations.some((animation)=>isAnimationRunning(animation));
},
dispose: ()=>{
animations.length = 0;
},
cancel: ()=>{
animations.forEach((animation)=>{
animation.cancel();
});
},
pause: ()=>{
animations.forEach((animation)=>{
animation.pause();
});
},
play: ()=>{
animations.forEach((animation)=>{
animation.play();
});
},
finish: ()=>{
animations.forEach((animation)=>{
animation.finish();
});
},
reverse: ()=>{
// Heads up!
//
// This is used for the interruptible motion. If the animation is running, we need to reverse it.
//
// TODO: what do with animations that have "delay"?
// TODO: what do with animations that have different "durations"?
animations.forEach((animation)=>{
animation.reverse();
});
}
};
}
function useAnimateAtomsInSupportedEnvironment() {
var _window_Animation;
// eslint-disable-next-line @nx/workspace-no-restricted-globals
const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof ((_window_Animation = window.Animation) === null || _window_Animation === void 0 ? void 0 : _window_Animation.prototype.persist) === 'function';
return React.useCallback((element, value, options)=>{
const atoms = Array.isArray(value) ? value : [
value
];
const { isReducedMotion } = options;
const animations = atoms.map((motion)=>{
// Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.
const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;
// Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.
const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;
const animationKeyframes = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;
const animationParams = {
...DEFAULT_ANIMATION_OPTIONS,
...params,
// Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled
...isReducedMotion && reducedMotionParams
};
try {
// Firefox can throw an error when calling `element.animate()`.
// See: https://github.com/microsoft/fluentui/issues/33902
const animation = element.animate(animationKeyframes, animationParams);
if (SUPPORTS_PERSIST) {
// Chromium browsers can return null when calling `element.animate()`.
// See: https://github.com/microsoft/fluentui/issues/33902
animation === null || animation === void 0 ? void 0 : animation.persist();
} else {
const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];
var _element_style;
Object.assign((_element_style = element.style) !== null && _element_style !== void 0 ? _element_style : {}, resultKeyframe);
}
return animation;
} catch (e) {
return null;
}
}).filter((animation)=>!!animation);
return createHandle(animations);
}, [
SUPPORTS_PERSIST
]);
}
/**
* In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary
* to ensure that the callback is not executed synchronously, which would cause the test to fail.
*
* @see https://github.com/microsoft/fluentui/issues/31701
*/ function useAnimateAtomsInTestEnvironment() {
const [count, setCount] = React.useState(0);
const callbackRef = React.useRef(undefined);
const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();
React.useEffect(()=>{
if (count > 0) {
var _callbackRef_current;
(_callbackRef_current = callbackRef.current) === null || _callbackRef_current === void 0 ? void 0 : _callbackRef_current.call(callbackRef);
}
}, [
count
]);
return React.useCallback((element, value, options)=>{
const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';
// Heads up!
// If the environment supports Web Animations API, we can use the native implementation.
if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {
return realAnimateAtoms(element, value, options);
}
return {
setMotionEndCallbacks (onfinish) {
callbackRef.current = onfinish;
setCount((v)=>v + 1);
},
set playbackRate (rate){
/* no-op */ },
isRunning () {
return false;
},
dispose () {
/* no-op */ },
cancel () {
/* no-op */ },
pause () {
/* no-op */ },
play () {
/* no-op */ },
finish () {
/* no-op */ },
reverse () {
/* no-op */ }
};
}, [
realAnimateAtoms
]);
}
/**
* @internal
*/ export function useAnimateAtoms() {
'use no memo';
if (process.env.NODE_ENV === 'test') {
// eslint-disable-next-line react-hooks/rules-of-hooks
return useAnimateAtomsInTestEnvironment();
}
// eslint-disable-next-line react-hooks/rules-of-hooks
return useAnimateAtomsInSupportedEnvironment();
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,32 @@
'use client';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
import * as React from 'react';
const REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';
// TODO: find a better approach there as each hook creates a separate subscription
export function useIsReducedMotion() {
const { targetDocument } = useFluent();
var _targetDocument_defaultView;
const targetWindow = (_targetDocument_defaultView = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) !== null && _targetDocument_defaultView !== void 0 ? _targetDocument_defaultView : null;
const queryValue = React.useRef(false);
const isEnabled = React.useCallback(()=>queryValue.current, []);
useIsomorphicLayoutEffect(()=>{
if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {
return;
}
const queryMatch = targetWindow.matchMedia(REDUCED_MEDIA_QUERY);
if (queryMatch.matches) {
queryValue.current = true;
}
const matchListener = (e)=>{
queryValue.current = e.matches;
};
queryMatch.addEventListener('change', matchListener);
return ()=>{
queryMatch.removeEventListener('change', matchListener);
};
}, [
targetWindow
]);
return isEnabled;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/useIsReducedMotion.ts"],"sourcesContent":["'use client';\n\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nconst REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';\n\n// TODO: find a better approach there as each hook creates a separate subscription\n\nexport function useIsReducedMotion(): () => boolean {\n const { targetDocument } = useFluent();\n const targetWindow: Window | null = targetDocument?.defaultView ?? null;\n\n const queryValue = React.useRef<boolean>(false);\n const isEnabled = React.useCallback(() => queryValue.current, []);\n\n useIsomorphicLayoutEffect(() => {\n if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {\n return;\n }\n\n const queryMatch = targetWindow.matchMedia(REDUCED_MEDIA_QUERY);\n\n if (queryMatch.matches) {\n queryValue.current = true;\n }\n\n const matchListener = (e: MediaQueryListEvent) => {\n queryValue.current = e.matches;\n };\n\n queryMatch.addEventListener('change', matchListener);\n\n return () => {\n queryMatch.removeEventListener('change', matchListener);\n };\n }, [targetWindow]);\n\n return isEnabled;\n}\n"],"names":["useFluent_unstable","useFluent","useIsomorphicLayoutEffect","React","REDUCED_MEDIA_QUERY","useIsReducedMotion","targetDocument","targetWindow","defaultView","queryValue","useRef","isEnabled","useCallback","current","matchMedia","queryMatch","matches","matchListener","e","addEventListener","removeEventListener"],"mappings":"AAAA;AAEA,SAASA,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,yBAAyB,QAAQ,4BAA4B;AACtE,YAAYC,WAAW,QAAQ;AAE/B,MAAMC,sBAAsB;AAE5B,kFAAkF;AAElF,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGL;QACSK;IAApC,MAAMC,eAA8BD,CAAAA,8BAAAA,2BAAAA,qCAAAA,eAAgBE,WAAW,cAA3BF,yCAAAA,8BAA+B;IAEnE,MAAMG,aAAaN,MAAMO,MAAM,CAAU;IACzC,MAAMC,YAAYR,MAAMS,WAAW,CAAC,IAAMH,WAAWI,OAAO,EAAE,EAAE;IAEhEX,0BAA0B;QACxB,IAAIK,iBAAiB,QAAQ,OAAOA,aAAaO,UAAU,KAAK,YAAY;YAC1E;QACF;QAEA,MAAMC,aAAaR,aAAaO,UAAU,CAACV;QAE3C,IAAIW,WAAWC,OAAO,EAAE;YACtBP,WAAWI,OAAO,GAAG;QACvB;QAEA,MAAMI,gBAAgB,CAACC;YACrBT,WAAWI,OAAO,GAAGK,EAAEF,OAAO;QAChC;QAEAD,WAAWI,gBAAgB,CAAC,UAAUF;QAEtC,OAAO;YACLF,WAAWK,mBAAmB,CAAC,UAAUH;QAC3C;IACF,GAAG;QAACV;KAAa;IAEjB,OAAOI;AACT"}

View File

@@ -0,0 +1,23 @@
'use client';
import * as React from 'react';
export function useMotionImperativeRef(imperativeRef) {
const animationRef = React.useRef(undefined);
React.useImperativeHandle(imperativeRef, ()=>({
setPlayState: (state)=>{
if (state === 'running') {
var _animationRef_current;
(_animationRef_current = animationRef.current) === null || _animationRef_current === void 0 ? void 0 : _animationRef_current.play();
}
if (state === 'paused') {
var _animationRef_current1;
(_animationRef_current1 = animationRef.current) === null || _animationRef_current1 === void 0 ? void 0 : _animationRef_current1.pause();
}
},
setPlaybackRate: (rate)=>{
if (animationRef.current) {
animationRef.current.playbackRate = rate;
}
}
}));
return animationRef;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/useMotionImperativeRef.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AnimationHandle, MotionImperativeRef } from '../types';\n\nexport function useMotionImperativeRef(\n imperativeRef: React.Ref<MotionImperativeRef | undefined> | undefined,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n): React.MutableRefObject<AnimationHandle | undefined> {\n const animationRef = React.useRef<AnimationHandle | undefined>(undefined);\n\n React.useImperativeHandle(imperativeRef, () => ({\n setPlayState: state => {\n if (state === 'running') {\n animationRef.current?.play();\n }\n\n if (state === 'paused') {\n animationRef.current?.pause();\n }\n },\n setPlaybackRate: rate => {\n if (animationRef.current) {\n animationRef.current.playbackRate = rate;\n }\n },\n }));\n\n return animationRef;\n}\n"],"names":["React","useMotionImperativeRef","imperativeRef","animationRef","useRef","undefined","useImperativeHandle","setPlayState","state","current","play","pause","setPlaybackRate","rate","playbackRate"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,uBACdC,aAAqE;IAGrE,MAAMC,eAAeH,MAAMI,MAAM,CAA8BC;IAE/DL,MAAMM,mBAAmB,CAACJ,eAAe,IAAO,CAAA;YAC9CK,cAAcC,CAAAA;gBACZ,IAAIA,UAAU,WAAW;wBACvBL;qBAAAA,wBAAAA,aAAaM,OAAO,cAApBN,4CAAAA,sBAAsBO,IAAI;gBAC5B;gBAEA,IAAIF,UAAU,UAAU;wBACtBL;qBAAAA,yBAAAA,aAAaM,OAAO,cAApBN,6CAAAA,uBAAsBQ,KAAK;gBAC7B;YACF;YACAC,iBAAiBC,CAAAA;gBACf,IAAIV,aAAaM,OAAO,EAAE;oBACxBN,aAAaM,OAAO,CAACK,YAAY,GAAGD;gBACtC;YACF;QACF,CAAA;IAEA,OAAOV;AACT"}

View File

@@ -0,0 +1,27 @@
'use client';
import { useForceUpdate } from '@fluentui/react-utilities';
import * as React from 'react';
/**
* This hook manages the mounted state of a component, based on the "visible" and "unmountOnExit" props.
* It simulates the behavior of getDerivedStateFromProps(), which is not available in functional components.
*/ export function useMountedState(visible = false, unmountOnExit = false) {
const mountedRef = React.useRef(unmountOnExit ? visible : true);
const forceUpdate = useForceUpdate();
const setMounted = React.useCallback((newValue)=>{
if (mountedRef.current !== newValue) {
mountedRef.current = newValue;
forceUpdate();
}
}, [
forceUpdate
]);
React.useEffect(()=>{
if (visible) {
mountedRef.current = visible;
}
});
return [
visible || mountedRef.current,
setMounted
];
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/useMountedState.ts"],"sourcesContent":["'use client';\n\nimport { useForceUpdate } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n/**\n * This hook manages the mounted state of a component, based on the \"visible\" and \"unmountOnExit\" props.\n * It simulates the behavior of getDerivedStateFromProps(), which is not available in functional components.\n */\nexport function useMountedState(\n visible: boolean = false,\n unmountOnExit: boolean = false,\n): [boolean, (value: boolean) => void] {\n const mountedRef = React.useRef<boolean>(unmountOnExit ? visible : true);\n const forceUpdate = useForceUpdate();\n\n const setMounted = React.useCallback(\n (newValue: boolean) => {\n if (mountedRef.current !== newValue) {\n mountedRef.current = newValue;\n forceUpdate();\n }\n },\n [forceUpdate],\n );\n\n React.useEffect(() => {\n if (visible) {\n mountedRef.current = visible;\n }\n });\n\n return [visible || mountedRef.current, setMounted];\n}\n"],"names":["useForceUpdate","React","useMountedState","visible","unmountOnExit","mountedRef","useRef","forceUpdate","setMounted","useCallback","newValue","current","useEffect"],"mappings":"AAAA;AAEA,SAASA,cAAc,QAAQ,4BAA4B;AAC3D,YAAYC,WAAW,QAAQ;AAE/B;;;CAGC,GACD,OAAO,SAASC,gBACdC,UAAmB,KAAK,EACxBC,gBAAyB,KAAK;IAE9B,MAAMC,aAAaJ,MAAMK,MAAM,CAAUF,gBAAgBD,UAAU;IACnE,MAAMI,cAAcP;IAEpB,MAAMQ,aAAaP,MAAMQ,WAAW,CAClC,CAACC;QACC,IAAIL,WAAWM,OAAO,KAAKD,UAAU;YACnCL,WAAWM,OAAO,GAAGD;YACrBH;QACF;IACF,GACA;QAACA;KAAY;IAGfN,MAAMW,SAAS,CAAC;QACd,IAAIT,SAAS;YACXE,WAAWM,OAAO,GAAGR;QACvB;IACF;IAEA,OAAO;QAACA,WAAWE,WAAWM,OAAO;QAAEH;KAAW;AACpD"}

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

@@ -0,0 +1,11 @@
export { motionTokens, durations, curves } from './motions/motionTokens';
export { createMotionComponent } from './factories/createMotionComponent';
export { createMotionComponentVariant } from './factories/createMotionComponentVariant';
export { createPresenceComponent } from './factories/createPresenceComponent';
export { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';
export { PresenceGroup } from './components/PresenceGroup';
export { MotionRefForwarder, MotionRefForwarderReset, useMotionForwardedRef } from './components/MotionRefForwarder';
export { motionSlot } from './slots/motionSlot';
export { presenceMotionSlot } from './slots/presenceMotionSlot';
export { PresenceGroupChildProvider, usePresenceGroupChildContext } from './contexts/PresenceGroupChildContext';
export { MotionBehaviourProvider } from './contexts/MotionBehaviourContext';

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

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { motionTokens, durations, curves } from './motions/motionTokens';\n\nexport {\n createMotionComponent,\n type MotionComponentProps,\n type MotionComponent,\n} from './factories/createMotionComponent';\nexport { createMotionComponentVariant } from './factories/createMotionComponentVariant';\nexport {\n createPresenceComponent,\n type PresenceComponentProps,\n type PresenceComponent,\n} from './factories/createPresenceComponent';\nexport { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';\n\nexport { PresenceGroup } from './components/PresenceGroup';\nexport { MotionRefForwarder, MotionRefForwarderReset, useMotionForwardedRef } from './components/MotionRefForwarder';\n\nexport { motionSlot, type MotionSlotProps } from './slots/motionSlot';\nexport { presenceMotionSlot, type PresenceMotionSlotProps } from './slots/presenceMotionSlot';\n\nexport {\n PresenceGroupChildProvider,\n usePresenceGroupChildContext,\n type PresenceGroupChildContextValue,\n} from './contexts/PresenceGroupChildContext';\n\nexport type {\n AtomMotion,\n AtomMotionFn,\n PresenceMotion,\n PresenceMotionFn,\n PresenceDirection,\n MotionImperativeRef,\n MotionParam,\n} from './types';\n\nexport { MotionBehaviourProvider } from './contexts/MotionBehaviourContext';\n"],"names":["motionTokens","durations","curves","createMotionComponent","createMotionComponentVariant","createPresenceComponent","createPresenceComponentVariant","PresenceGroup","MotionRefForwarder","MotionRefForwarderReset","useMotionForwardedRef","motionSlot","presenceMotionSlot","PresenceGroupChildProvider","usePresenceGroupChildContext","MotionBehaviourProvider"],"mappings":"AAAA,SAASA,YAAY,EAAEC,SAAS,EAAEC,MAAM,QAAQ,yBAAyB;AAEzE,SACEC,qBAAqB,QAGhB,oCAAoC;AAC3C,SAASC,4BAA4B,QAAQ,2CAA2C;AACxF,SACEC,uBAAuB,QAGlB,sCAAsC;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F,SAASC,aAAa,QAAQ,6BAA6B;AAC3D,SAASC,kBAAkB,EAAEC,uBAAuB,EAAEC,qBAAqB,QAAQ,kCAAkC;AAErH,SAASC,UAAU,QAA8B,qBAAqB;AACtE,SAASC,kBAAkB,QAAsC,6BAA6B;AAE9F,SACEC,0BAA0B,EAC1BC,4BAA4B,QAEvB,uCAAuC;AAY9C,SAASC,uBAAuB,QAAQ,oCAAoC"}

View File

@@ -0,0 +1,40 @@
// Copied from packages/tokens/src/global/durations.ts
// Values are numeric in milliseconds for ease of use in Web Animations API
// (rather than parsing '__ms')
export const durations = {
durationUltraFast: 50,
durationFaster: 100,
durationFast: 150,
durationNormal: 200,
durationGentle: 250,
durationSlow: 300,
durationSlower: 400,
durationUltraSlow: 500
};
// Copied from packages/tokens/src/global/curves.ts
// Names and values are preserved exactly
export const curves = {
curveAccelerateMax: 'cubic-bezier(0.9,0.1,1,0.2)',
curveAccelerateMid: 'cubic-bezier(1,0,1,1)',
curveAccelerateMin: 'cubic-bezier(0.8,0,0.78,1)',
curveDecelerateMax: 'cubic-bezier(0.1,0.9,0.2,1)',
curveDecelerateMid: 'cubic-bezier(0,0,0,1)',
curveDecelerateMin: 'cubic-bezier(0.33,0,0.1,1)',
curveEasyEaseMax: 'cubic-bezier(0.8,0,0.2,1)',
curveEasyEase: 'cubic-bezier(0.33,0,0.67,1)',
curveLinear: 'cubic-bezier(0,0,1,1)'
};
// A merged flat lookup for convenience
export const motionTokens = {
...durations,
...curves
}; /*
TODO: enforce naming conventions when TypeScript 4.4 features are supported in Fluent:
type DurationKey = `duration${Capitalize<string>}`;
type CurveKey = `curve${Capitalize<string>}`;
type CurveValue = `cubic-bezier(${number},${number},${number},${number})`;
type DurationTokens = Record<DurationKey, number>;
type CurveTokens = Record<CurveKey, CurveValue>;
*/

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/motions/motionTokens.ts"],"sourcesContent":["// Copied from packages/tokens/src/global/durations.ts\n// Values are numeric in milliseconds for ease of use in Web Animations API\n// (rather than parsing '__ms')\nexport const durations = {\n durationUltraFast: 50,\n durationFaster: 100,\n durationFast: 150,\n durationNormal: 200,\n durationGentle: 250,\n durationSlow: 300,\n durationSlower: 400,\n durationUltraSlow: 500,\n} as const;\n\n// Copied from packages/tokens/src/global/curves.ts\n// Names and values are preserved exactly\nexport const curves = {\n curveAccelerateMax: 'cubic-bezier(0.9,0.1,1,0.2)',\n curveAccelerateMid: 'cubic-bezier(1,0,1,1)',\n curveAccelerateMin: 'cubic-bezier(0.8,0,0.78,1)',\n curveDecelerateMax: 'cubic-bezier(0.1,0.9,0.2,1)',\n curveDecelerateMid: 'cubic-bezier(0,0,0,1)',\n curveDecelerateMin: 'cubic-bezier(0.33,0,0.1,1)',\n curveEasyEaseMax: 'cubic-bezier(0.8,0,0.2,1)',\n curveEasyEase: 'cubic-bezier(0.33,0,0.67,1)',\n curveLinear: 'cubic-bezier(0,0,1,1)',\n} as const;\n\n// A merged flat lookup for convenience\nexport const motionTokens = {\n ...durations,\n ...curves,\n};\n\n/*\nTODO: enforce naming conventions when TypeScript 4.4 features are supported in Fluent:\n\ntype DurationKey = `duration${Capitalize<string>}`;\ntype CurveKey = `curve${Capitalize<string>}`;\ntype CurveValue = `cubic-bezier(${number},${number},${number},${number})`;\n\ntype DurationTokens = Record<DurationKey, number>;\ntype CurveTokens = Record<CurveKey, CurveValue>;\n*/\n"],"names":["durations","durationUltraFast","durationFaster","durationFast","durationNormal","durationGentle","durationSlow","durationSlower","durationUltraSlow","curves","curveAccelerateMax","curveAccelerateMid","curveAccelerateMin","curveDecelerateMax","curveDecelerateMid","curveDecelerateMin","curveEasyEaseMax","curveEasyEase","curveLinear","motionTokens"],"mappings":"AAAA,sDAAsD;AACtD,2EAA2E;AAC3E,+BAA+B;AAC/B,OAAO,MAAMA,YAAY;IACvBC,mBAAmB;IACnBC,gBAAgB;IAChBC,cAAc;IACdC,gBAAgB;IAChBC,gBAAgB;IAChBC,cAAc;IACdC,gBAAgB;IAChBC,mBAAmB;AACrB,EAAW;AAEX,mDAAmD;AACnD,yCAAyC;AACzC,OAAO,MAAMC,SAAS;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,kBAAkB;IAClBC,eAAe;IACfC,aAAa;AACf,EAAW;AAEX,uCAAuC;AACvC,OAAO,MAAMC,eAAe;IAC1B,GAAGnB,SAAS;IACZ,GAAGS,MAAM;AACX,EAAE,CAEF;;;;;;;;;AASA"}

View File

@@ -0,0 +1,39 @@
import * as React from 'react';
import { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities';
export function motionSlot(motion, options) {
// eslint-disable-next-line @typescript-eslint/no-deprecated
const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};
if (process.env.NODE_ENV !== 'production') {
if (typeof as !== 'undefined') {
throw new Error(`@fluentui/react-motion: "as" property is not supported on motion slots.`);
}
}
if (motion === null) {
// Heads up!
// Render function is used there to avoid rendering a motion component and render children directly
const renderFn = (_, props)=>/*#__PURE__*/ React.createElement(React.Fragment, null, props.children);
/**
* Casting is required here as SlotComponentType is a function, not an object.
* Although SlotComponentType has a function signature, it is still just an object.
* This is required to make a slot callable (JSX compatible), this is the exact same approach
* that is used on `@types/react` components
*/ return {
[SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,
[SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
};
}
/**
* Casting is required here as SlotComponentType is a function, not an object.
* Although SlotComponentType has a function signature, it is still just an object.
* This is required to make a slot callable (JSX compatible), this is the exact same approach
* that is used on `@types/react` components
*/ const propsWithMetadata = {
...options.defaultProps,
...rest,
[SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
};
if (typeof children === 'function') {
propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children;
}
return propsWithMetadata;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/slots/motionSlot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities';\nimport type {\n JSXElement,\n JSXIntrinsicElementKeys,\n SlotComponentType,\n SlotRenderFunction,\n} from '@fluentui/react-utilities';\n\nimport type { MotionComponentProps } from '../factories/createMotionComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype MotionSlotRenderProps = Pick<MotionComponentProps, 'onMotionFinish' | 'onMotionStart' | 'onMotionCancel'>;\n\nexport type MotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n MotionComponentProps,\n 'imperativeRef' | 'onMotionFinish' | 'onMotionStart' | 'onMotionCancel'\n> & {\n // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n // elements motion slots do not support intrinsic elements, only custom components.\n /**\n * @deprecated Do not use. Motion Slots do not support intrinsic elements.\n *\n * If you want to override the animation, use the children render function instead.\n */\n as?: JSXIntrinsicElementKeys;\n\n // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n // possible value for children\n children?: SlotRenderFunction<MotionSlotRenderProps & MotionParams & { children: JSXElement }>;\n};\n\nexport function motionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n motion: MotionSlotProps<MotionParams> | null | undefined,\n options: {\n elementType: React.FC<MotionComponentProps & MotionParams>;\n defaultProps: MotionSlotRenderProps & MotionParams;\n },\n): SlotComponentType<MotionSlotRenderProps & MotionParams> {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { as, children, ...rest } = motion ?? {};\n\n if (process.env.NODE_ENV !== 'production') {\n if (typeof as !== 'undefined') {\n throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n }\n }\n\n if (motion === null) {\n // Heads up!\n // Render function is used there to avoid rendering a motion component and render children directly\n const renderFn: SlotRenderFunction<MotionSlotRenderProps & MotionParams & { children: JSXElement }> = (\n _,\n props,\n ) => <>{props.children}</>;\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n return {\n [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<MotionSlotRenderProps & MotionParams>;\n }\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n const propsWithMetadata = {\n ...options.defaultProps,\n ...rest,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<MotionSlotRenderProps & MotionParams>;\n\n if (typeof children === 'function') {\n propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n MotionSlotRenderProps & MotionParams\n >;\n }\n\n return propsWithMetadata;\n}\n"],"names":["React","SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","motionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","renderFn","_","props","elementType","propsWithMetadata","defaultProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,2BAA2B,QAAQ,4BAA4B;AAkClG,OAAO,SAASC,WACdC,MAAwD,EACxDC,OAGC;IAED,4DAA4D;IAC5D,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,mBAAAA,oBAAAA,SAAU,CAAC;IAE7C,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOL,OAAO,aAAa;YAC7B,MAAM,IAAIM,MAAM,CAAC,uEAAuE,CAAC;QAC3F;IACF;IAEA,IAAIR,WAAW,MAAM;QACnB,YAAY;QACZ,mGAAmG;QACnG,MAAMS,WAAgG,CACpGC,GACAC,sBACG,0CAAGA,MAAMR,QAAQ;QAEtB;;;;;KAKC,GACD,OAAO;YACL,CAACL,4BAA4B,EAAEW;YAC/B,CAACZ,yBAAyB,EAAEI,QAAQW,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGZ,QAAQa,YAAY;QACvB,GAAGV,IAAI;QACP,CAACP,yBAAyB,EAAEI,QAAQW,WAAW;IACjD;IAEA,IAAI,OAAOT,aAAa,YAAY;QAClCU,iBAAiB,CAACf,4BAA4B,GAAGK;IAGnD;IAEA,OAAOU;AACT"}

View File

@@ -0,0 +1,40 @@
import * as React from 'react';
import { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities';
export function presenceMotionSlot(motion, options) {
// eslint-disable-next-line @typescript-eslint/no-deprecated
const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};
if (process.env.NODE_ENV !== 'production') {
if (typeof as !== 'undefined') {
throw new Error(`@fluentui/react-motion: "as" property is not supported on motion slots.`);
}
}
if (motion === null) {
// Heads up!
// Render function is used there to avoid rendering a motion component and handle unmounting logic
const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;
const renderFn = (_, props)=>isUnmounted ? null : /*#__PURE__*/ React.createElement(React.Fragment, null, props.children);
/**
* Casting is required here as SlotComponentType is a function, not an object.
* Although SlotComponentType has a function signature, it is still just an object.
* This is required to make a slot callable (JSX compatible), this is the exact same approach
* that is used on `@types/react` components
*/ return {
[SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,
[SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
};
}
/**
* Casting is required here as SlotComponentType is a function, not an object.
* Although SlotComponentType has a function signature, it is still just an object.
* This is required to make a slot callable (JSX compatible), this is the exact same approach
* that is used on `@types/react` components
*/ const propsWithMetadata = {
...options.defaultProps,
...rest,
[SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
};
if (typeof children === 'function') {
propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children;
}
return propsWithMetadata;
}

File diff suppressed because one or more lines are too long

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

@@ -0,0 +1 @@
export { };

1
node_modules/@fluentui/react-motion/lib/types.js.map generated vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/types.ts"],"sourcesContent":["type AtomCore = { keyframes: Keyframe[] } & KeyframeEffectOptions;\n\nexport type AtomMotion = AtomCore & {\n /**\n * Allows to specify a reduced motion version of the animation. If provided, the settings will be used when the\n * user has enabled the reduced motion setting in the operating system (i.e `prefers-reduced-motion` media query is\n * active). If not provided, the duration of the animation will be overridden to be 1ms.\n *\n * Note, if `keyframes` are provided, they will be used instead of the regular `keyframes`.\n */\n reducedMotion?: Partial<AtomCore>;\n};\n\nexport type PresenceDirection = 'enter' | 'exit';\n\nexport type PresenceMotion = Record<PresenceDirection, AtomMotion | AtomMotion[]>;\n\n/**\n * A motion param should be a primitive value that can be serialized to JSON and could be potentially used a plain\n * dependency for React hooks.\n */\nexport type MotionParam = boolean | number | string;\n\nexport type AtomMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (\n params: { element: HTMLElement } & MotionParams,\n) => AtomMotion | AtomMotion[];\n\nexport type PresenceMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (\n params: { element: HTMLElement } & MotionParams,\n) => PresenceMotion;\n\n// ---\n\nexport type AnimationHandle = Pick<Animation, 'cancel' | 'finish' | 'pause' | 'play' | 'playbackRate' | 'reverse'> & {\n setMotionEndCallbacks: (onfinish: () => void, oncancel: () => void) => void;\n isRunning: () => boolean;\n dispose: () => void;\n};\n\nexport type MotionImperativeRef = {\n /** Sets the playback rate of the animation, where 1 is normal speed. */\n setPlaybackRate: (rate: number) => void;\n\n /** Sets the state of the animation to running or paused. */\n setPlayState: (state: 'running' | 'paused') => void;\n};\n"],"names":[],"mappings":"AAuCA,WAME"}

View File

@@ -0,0 +1,20 @@
import * as React from 'react';
/**
* Given `children`, return an object mapping key to child.
*/ export function getChildMapping(children) {
const childMapping = {};
if (children) {
React.Children.toArray(children).forEach((child)=>{
if (React.isValidElement(child)) {
var _child_key;
childMapping[(_child_key = child.key) !== null && _child_key !== void 0 ? _child_key : ''] = {
appear: false,
element: child,
visible: true,
unmountOnExit: true
};
}
});
}
return childMapping;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/groups/getChildMapping.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PresenceGroupChildMapping } from './types';\n\n/**\n * Given `children`, return an object mapping key to child.\n */\nexport function getChildMapping(children: React.ReactNode | undefined): PresenceGroupChildMapping {\n const childMapping: PresenceGroupChildMapping = {};\n\n if (children) {\n React.Children.toArray(children).forEach(child => {\n if (React.isValidElement(child)) {\n childMapping[child.key ?? ''] = {\n appear: false,\n element: child,\n visible: true,\n unmountOnExit: true,\n };\n }\n });\n }\n\n return childMapping;\n}\n"],"names":["React","getChildMapping","children","childMapping","Children","toArray","forEach","child","isValidElement","key","appear","element","visible","unmountOnExit"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,SAASC,gBAAgBC,QAAqC;IACnE,MAAMC,eAA0C,CAAC;IAEjD,IAAID,UAAU;QACZF,MAAMI,QAAQ,CAACC,OAAO,CAACH,UAAUI,OAAO,CAACC,CAAAA;YACvC,IAAIP,MAAMQ,cAAc,CAACD,QAAQ;oBAClBA;gBAAbJ,YAAY,CAACI,CAAAA,aAAAA,MAAME,GAAG,cAATF,wBAAAA,aAAa,GAAG,GAAG;oBAC9BG,QAAQ;oBACRC,SAASJ;oBACTK,SAAS;oBACTC,eAAe;gBACjB;YACF;QACF;IACF;IAEA,OAAOV;AACT"}

View File

@@ -0,0 +1,30 @@
import { mergeChildMappings } from './mergeChildMappings';
export function getNextChildMapping(prevChildMapping, nextChildMapping) {
const childrenMapping = mergeChildMappings(prevChildMapping, nextChildMapping);
Object.entries(childrenMapping).forEach(([key, childDefinition])=>{
const hasPrev = key in prevChildMapping;
const hasNext = key in nextChildMapping;
if (hasNext) {
// Case 1: item hasn't changed transition states
if (hasPrev) {
childrenMapping[key] = {
...childDefinition
};
return;
}
// Case 2: item is new (entering)
childrenMapping[key] = {
...childDefinition,
appear: true,
visible: true
};
return;
}
// Case 3: item is leaving
childrenMapping[key] = {
...childDefinition,
visible: false
};
});
return childrenMapping;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/groups/getNextChildMapping.ts"],"sourcesContent":["import { mergeChildMappings } from './mergeChildMappings';\nimport type { PresenceGroupChildMapping } from './types';\n\nexport function getNextChildMapping(\n prevChildMapping: PresenceGroupChildMapping,\n nextChildMapping: PresenceGroupChildMapping,\n): PresenceGroupChildMapping {\n const childrenMapping = mergeChildMappings(prevChildMapping, nextChildMapping);\n\n Object.entries(childrenMapping).forEach(([key, childDefinition]) => {\n const hasPrev = key in prevChildMapping;\n const hasNext = key in nextChildMapping;\n\n if (hasNext) {\n // Case 1: item hasn't changed transition states\n if (hasPrev) {\n childrenMapping[key] = { ...childDefinition };\n return;\n }\n\n // Case 2: item is new (entering)\n childrenMapping[key] = {\n ...childDefinition,\n appear: true,\n visible: true,\n };\n return;\n }\n\n // Case 3: item is leaving\n childrenMapping[key] = {\n ...childDefinition,\n visible: false,\n };\n });\n\n return childrenMapping;\n}\n"],"names":["mergeChildMappings","getNextChildMapping","prevChildMapping","nextChildMapping","childrenMapping","Object","entries","forEach","key","childDefinition","hasPrev","hasNext","appear","visible"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,uBAAuB;AAG1D,OAAO,SAASC,oBACdC,gBAA2C,EAC3CC,gBAA2C;IAE3C,MAAMC,kBAAkBJ,mBAAmBE,kBAAkBC;IAE7DE,OAAOC,OAAO,CAACF,iBAAiBG,OAAO,CAAC,CAAC,CAACC,KAAKC,gBAAgB;QAC7D,MAAMC,UAAUF,OAAON;QACvB,MAAMS,UAAUH,OAAOL;QAEvB,IAAIQ,SAAS;YACX,gDAAgD;YAChD,IAAID,SAAS;gBACXN,eAAe,CAACI,IAAI,GAAG;oBAAE,GAAGC,eAAe;gBAAC;gBAC5C;YACF;YAEA,iCAAiC;YACjCL,eAAe,CAACI,IAAI,GAAG;gBACrB,GAAGC,eAAe;gBAClBG,QAAQ;gBACRC,SAAS;YACX;YACA;QACF;QAEA,0BAA0B;QAC1BT,eAAe,CAACI,IAAI,GAAG;YACrB,GAAGC,eAAe;YAClBI,SAAS;QACX;IACF;IAEA,OAAOT;AACT"}

View File

@@ -0,0 +1,39 @@
/**
* When you're adding or removing children some may be added or removed in the same render pass. We want to show *both*
* since we want to simultaneously animate elements in and out. This function takes a previous set of keys and a new set
* of keys and merges them with its best guess of the correct ordering.
*/ export function mergeChildMappings(prevMapping, nextMapping) {
function getValueForKey(key) {
return key in nextMapping ? nextMapping[key] : prevMapping[key];
}
// For each key of `next`, the list of keys to insert before that key in
// the combined list
const nextKeysPending = {};
let pendingKeys = [];
// eslint-disable-next-line guard-for-in
for(const prevKey in prevMapping){
if (prevKey in nextMapping) {
if (pendingKeys.length) {
nextKeysPending[prevKey] = pendingKeys;
pendingKeys = [];
}
continue;
}
pendingKeys.push(prevKey);
}
const childMapping = {};
// eslint-disable-next-line guard-for-in
for(const nextKey in nextMapping){
if (nextKeysPending[nextKey]) {
for (const pendingNextKey of nextKeysPending[nextKey]){
childMapping[pendingNextKey] = getValueForKey(pendingNextKey);
}
}
childMapping[nextKey] = getValueForKey(nextKey);
}
// Finally, add the keys which didn't appear before any key in `next`
for (const pendingKey of pendingKeys){
childMapping[pendingKey] = getValueForKey(pendingKey);
}
return childMapping;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/groups/mergeChildMappings.ts"],"sourcesContent":["import type { PresenceGroupChildMapping } from './types';\n\n/**\n * When you're adding or removing children some may be added or removed in the same render pass. We want to show *both*\n * since we want to simultaneously animate elements in and out. This function takes a previous set of keys and a new set\n * of keys and merges them with its best guess of the correct ordering.\n */\nexport function mergeChildMappings(\n prevMapping: PresenceGroupChildMapping,\n nextMapping: PresenceGroupChildMapping,\n): PresenceGroupChildMapping {\n function getValueForKey(key: string) {\n return key in nextMapping ? nextMapping[key] : prevMapping[key];\n }\n\n // For each key of `next`, the list of keys to insert before that key in\n // the combined list\n const nextKeysPending: Record<string, string[]> = {};\n let pendingKeys: string[] = [];\n\n // eslint-disable-next-line guard-for-in\n for (const prevKey in prevMapping) {\n if (prevKey in nextMapping) {\n if (pendingKeys.length) {\n nextKeysPending[prevKey] = pendingKeys;\n pendingKeys = [];\n }\n\n continue;\n }\n\n pendingKeys.push(prevKey);\n }\n\n const childMapping: PresenceGroupChildMapping = {};\n\n // eslint-disable-next-line guard-for-in\n for (const nextKey in nextMapping) {\n if (nextKeysPending[nextKey]) {\n for (const pendingNextKey of nextKeysPending[nextKey]) {\n childMapping[pendingNextKey] = getValueForKey(pendingNextKey);\n }\n }\n\n childMapping[nextKey] = getValueForKey(nextKey);\n }\n\n // Finally, add the keys which didn't appear before any key in `next`\n for (const pendingKey of pendingKeys) {\n childMapping[pendingKey] = getValueForKey(pendingKey);\n }\n\n return childMapping;\n}\n"],"names":["mergeChildMappings","prevMapping","nextMapping","getValueForKey","key","nextKeysPending","pendingKeys","prevKey","length","push","childMapping","nextKey","pendingNextKey","pendingKey"],"mappings":"AAEA;;;;CAIC,GACD,OAAO,SAASA,mBACdC,WAAsC,EACtCC,WAAsC;IAEtC,SAASC,eAAeC,GAAW;QACjC,OAAOA,OAAOF,cAAcA,WAAW,CAACE,IAAI,GAAGH,WAAW,CAACG,IAAI;IACjE;IAEA,wEAAwE;IACxE,oBAAoB;IACpB,MAAMC,kBAA4C,CAAC;IACnD,IAAIC,cAAwB,EAAE;IAE9B,wCAAwC;IACxC,IAAK,MAAMC,WAAWN,YAAa;QACjC,IAAIM,WAAWL,aAAa;YAC1B,IAAII,YAAYE,MAAM,EAAE;gBACtBH,eAAe,CAACE,QAAQ,GAAGD;gBAC3BA,cAAc,EAAE;YAClB;YAEA;QACF;QAEAA,YAAYG,IAAI,CAACF;IACnB;IAEA,MAAMG,eAA0C,CAAC;IAEjD,wCAAwC;IACxC,IAAK,MAAMC,WAAWT,YAAa;QACjC,IAAIG,eAAe,CAACM,QAAQ,EAAE;YAC5B,KAAK,MAAMC,kBAAkBP,eAAe,CAACM,QAAQ,CAAE;gBACrDD,YAAY,CAACE,eAAe,GAAGT,eAAeS;YAChD;QACF;QAEAF,YAAY,CAACC,QAAQ,GAAGR,eAAeQ;IACzC;IAEA,qEAAqE;IACrE,KAAK,MAAME,cAAcP,YAAa;QACpCI,YAAY,CAACG,WAAW,GAAGV,eAAeU;IAC5C;IAEA,OAAOH;AACT"}

View File

@@ -0,0 +1 @@
export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/groups/types.ts"],"sourcesContent":["import type { JSXElement } from '@fluentui/react-utilities';\n\nexport type PresenceGroupChild = {\n element: JSXElement;\n\n appear: boolean;\n visible: boolean;\n unmountOnExit: boolean;\n};\n\nexport type PresenceGroupChildMapping = Record<string, PresenceGroupChild>;\n"],"names":[],"mappings":"AAUA,WAA2E"}

View File

@@ -0,0 +1,25 @@
/**
* Checks if the animation is running at the moment.
*/ export function isAnimationRunning(animation) {
if (animation.playState === 'running') {
var _animation_effect;
// Heads up!
//
// There is an edge case where the animation is running, but the overall progress is 0 or 1. In this case, we
// consider the animation to be not running. If it will be reversed it will flip from 1 to 0, and we will observe a
// glitch.
// "overallProgress" is not supported in all browsers, so we need to check if it exists.
// We will fall back to the currentTime and duration if "overallProgress" is not supported.
if (animation.overallProgress !== undefined) {
var _animation_overallProgress;
const overallProgress = (_animation_overallProgress = animation.overallProgress) !== null && _animation_overallProgress !== void 0 ? _animation_overallProgress : 0;
return overallProgress > 0 && overallProgress < 1;
}
var _animation_currentTime;
const currentTime = Number((_animation_currentTime = animation.currentTime) !== null && _animation_currentTime !== void 0 ? _animation_currentTime : 0);
var _animation_effect_getTiming_duration;
const totalTime = Number((_animation_effect_getTiming_duration = (_animation_effect = animation.effect) === null || _animation_effect === void 0 ? void 0 : _animation_effect.getTiming().duration) !== null && _animation_effect_getTiming_duration !== void 0 ? _animation_effect_getTiming_duration : 0);
return currentTime > 0 && currentTime < totalTime;
}
return false;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/isAnimationRunning.ts"],"sourcesContent":["/**\n * Checks if the animation is running at the moment.\n */\nexport function isAnimationRunning(animation: Animation & { readonly overallProgress?: number | null }): boolean {\n if (animation.playState === 'running') {\n // Heads up!\n //\n // There is an edge case where the animation is running, but the overall progress is 0 or 1. In this case, we\n // consider the animation to be not running. If it will be reversed it will flip from 1 to 0, and we will observe a\n // glitch.\n\n // \"overallProgress\" is not supported in all browsers, so we need to check if it exists.\n // We will fall back to the currentTime and duration if \"overallProgress\" is not supported.\n if (animation.overallProgress !== undefined) {\n const overallProgress = animation.overallProgress ?? 0;\n\n return overallProgress > 0 && overallProgress < 1;\n }\n\n const currentTime = Number(animation.currentTime ?? 0);\n const totalTime = Number(animation.effect?.getTiming().duration ?? 0);\n\n return currentTime > 0 && currentTime < totalTime;\n }\n\n return false;\n}\n"],"names":["isAnimationRunning","animation","playState","overallProgress","undefined","currentTime","Number","totalTime","effect","getTiming","duration"],"mappings":"AAAA;;CAEC,GACD,OAAO,SAASA,mBAAmBC,SAAmE;IACpG,IAAIA,UAAUC,SAAS,KAAK,WAAW;YAgBZD;QAfzB,YAAY;QACZ,EAAE;QACF,6GAA6G;QAC7G,mHAAmH;QACnH,UAAU;QAEV,wFAAwF;QACxF,2FAA2F;QAC3F,IAAIA,UAAUE,eAAe,KAAKC,WAAW;gBACnBH;YAAxB,MAAME,kBAAkBF,CAAAA,6BAAAA,UAAUE,eAAe,cAAzBF,wCAAAA,6BAA6B;YAErD,OAAOE,kBAAkB,KAAKA,kBAAkB;QAClD;YAE2BF;QAA3B,MAAMI,cAAcC,OAAOL,CAAAA,yBAAAA,UAAUI,WAAW,cAArBJ,oCAAAA,yBAAyB;YAC3BA;QAAzB,MAAMM,YAAYD,OAAOL,CAAAA,wCAAAA,oBAAAA,UAAUO,MAAM,cAAhBP,wCAAAA,kBAAkBQ,SAAS,GAAGC,QAAQ,cAAtCT,kDAAAA,uCAA0C;QAEnE,OAAOI,cAAc,KAAKA,cAAcE;IAC1C;IAEA,OAAO;AACT"}

View File

@@ -0,0 +1,40 @@
'use client';
import * as React from 'react';
import { getReactElementRef, useMergedRefs } from '@fluentui/react-utilities';
const CHILD_ERROR_MESSAGE = [
'@fluentui/react-motion: Invalid child element.',
'\n',
'Motion factories require a single child element to be passed. ',
'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().'
].join('');
/**
* Validates the child and returns a cloned child element with a ref.
*
* Throws an error if the child is not a valid React element, similar to "React.Children.only".
* Logs a warning in development mode if the ref is not set as the component remains functional.
*/ export function useChildElement(children, mounted = true) {
const childRef = React.useRef(null);
React.useEffect(()=>{
if (process.env.NODE_ENV !== 'production') {
if (mounted && !childRef.current) {
// eslint-disable-next-line no-console
console.error(CHILD_ERROR_MESSAGE);
}
}
}, [
mounted
]);
try {
const child = React.Children.only(children);
if (React.isValidElement(child)) {
return [
React.cloneElement(child, {
ref: useMergedRefs(childRef, getReactElementRef(child))
}),
childRef
];
}
} catch {
/* empty */ }
throw new Error(CHILD_ERROR_MESSAGE);
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/useChildElement.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getReactElementRef, useMergedRefs } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nconst CHILD_ERROR_MESSAGE = [\n '@fluentui/react-motion: Invalid child element.',\n '\\n',\n 'Motion factories require a single child element to be passed. ',\n 'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().',\n].join('');\n\n/**\n * Validates the child and returns a cloned child element with a ref.\n *\n * Throws an error if the child is not a valid React element, similar to \"React.Children.only\".\n * Logs a warning in development mode if the ref is not set as the component remains functional.\n */\nexport function useChildElement(\n children: JSXElement,\n mounted: boolean = true,\n): [JSXElement, React.RefObject<HTMLElement | null>] {\n const childRef = React.useRef<HTMLElement>(null);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production') {\n if (mounted && !childRef.current) {\n // eslint-disable-next-line no-console\n console.error(CHILD_ERROR_MESSAGE);\n }\n }\n }, [mounted]);\n\n try {\n const child = React.Children.only(children) as Parameters<typeof React.isValidElement>[0];\n\n if (React.isValidElement(child)) {\n return [\n React.cloneElement(child as React.ReactElement<{ ref: React.Ref<HTMLElement> }>, {\n ref: useMergedRefs(childRef, getReactElementRef(child)),\n }),\n childRef,\n ];\n }\n } catch {\n /* empty */\n }\n\n throw new Error(CHILD_ERROR_MESSAGE);\n}\n"],"names":["React","getReactElementRef","useMergedRefs","CHILD_ERROR_MESSAGE","join","useChildElement","children","mounted","childRef","useRef","useEffect","process","env","NODE_ENV","current","console","error","child","Children","only","isValidElement","cloneElement","ref","Error"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,EAAEC,aAAa,QAAQ,4BAA4B;AAG9E,MAAMC,sBAAsB;IAC1B;IACA;IACA;IACA;CACD,CAACC,IAAI,CAAC;AAEP;;;;;CAKC,GACD,OAAO,SAASC,gBACdC,QAAoB,EACpBC,UAAmB,IAAI;IAEvB,MAAMC,WAAWR,MAAMS,MAAM,CAAc;IAE3CT,MAAMU,SAAS,CAAC;QACd,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,IAAIN,WAAW,CAACC,SAASM,OAAO,EAAE;gBAChC,sCAAsC;gBACtCC,QAAQC,KAAK,CAACb;YAChB;QACF;IACF,GAAG;QAACI;KAAQ;IAEZ,IAAI;QACF,MAAMU,QAAQjB,MAAMkB,QAAQ,CAACC,IAAI,CAACb;QAElC,IAAIN,MAAMoB,cAAc,CAACH,QAAQ;YAC/B,OAAO;gBACLjB,MAAMqB,YAAY,CAACJ,OAA8D;oBAC/EK,KAAKpB,cAAcM,UAAUP,mBAAmBgB;gBAClD;gBACAT;aACD;QACH;IACF,EAAE,OAAM;IACN,SAAS,GACX;IAEA,MAAM,IAAIe,MAAMpB;AAClB"}