Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
@@ -0,0 +1,14 @@
import * as React from 'react';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { useMessageBarGroup_unstable } from './useMessageBarGroup';
import { renderMessageBarGroup_unstable } from './renderMessageBarGroup';
import { useMessageBarGroupStyles_unstable } from './useMessageBarGroupStyles.styles';
/**
* MessageBarGroup component
*/ export const MessageBarGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useMessageBarGroup_unstable(props, ref);
useMessageBarGroupStyles_unstable(state);
useCustomStyleHook_unstable('useMessageBarGroupStyles_unstable')(state);
return renderMessageBarGroup_unstable(state);
});
MessageBarGroup.displayName = 'MessageBarGroup';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMessageBarGroup_unstable } from './useMessageBarGroup';\nimport { renderMessageBarGroup_unstable } from './renderMessageBarGroup';\nimport { useMessageBarGroupStyles_unstable } from './useMessageBarGroupStyles.styles';\nimport type { MessageBarGroupProps } from './MessageBarGroup.types';\n\n/**\n * MessageBarGroup component\n */\nexport const MessageBarGroup: ForwardRefComponent<MessageBarGroupProps> = React.forwardRef((props, ref) => {\n const state = useMessageBarGroup_unstable(props, ref);\n\n useMessageBarGroupStyles_unstable(state);\n useCustomStyleHook_unstable('useMessageBarGroupStyles_unstable')(state);\n return renderMessageBarGroup_unstable(state);\n});\n\nMessageBarGroup.displayName = 'MessageBarGroup';\n"],"names":["React","useCustomStyleHook_unstable","useMessageBarGroup_unstable","renderMessageBarGroup_unstable","useMessageBarGroupStyles_unstable","MessageBarGroup","forwardRef","props","ref","state","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,oCAAoC;AAGtF;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQP,4BAA4BK,OAAOC;IAEjDJ,kCAAkCK;IAClCR,4BAA4B,qCAAqCQ;IACjE,OAAON,+BAA+BM;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}
@@ -0,0 +1,78 @@
import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
/**
* Generates a motion atom object for a fade in or fade out.
* @param direction - The functional direction of the motion: 'enter' or 'exit'.
* @param duration - The duration of the motion in milliseconds.
* @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
* @param fromValue - The starting opacity value. Defaults to 0.
* @returns A motion atom object with opacity keyframes and the supplied duration and easing.
*/ const fadeAtom = ({ direction, duration, easing = motionTokens.curveLinear, fromValue = 0 })=>{
const keyframes = [
{
opacity: fromValue
},
{
opacity: 1
}
];
if (direction === 'exit') {
keyframes.reverse();
}
return {
keyframes,
duration,
easing
};
};
/**
* Generates a motion atom object for an X or Y translation, from a specified distance to zero.
* @param direction - The functional direction of the motion: 'enter' or 'exit'.
* @param axis - The axis of the translation: 'X' or 'Y'.
* @param fromValue - The starting position of the slide; it can be a percentage or pixels.
* @param duration - The duration of the motion in milliseconds.
* @param easing - The easing curve for the motion. Defaults to `motionTokens.curveDecelerateMid`.
*/ const slideAtom = ({ direction, axis, fromValue, duration, easing = motionTokens.curveDecelerateMid })=>{
const keyframes = [
{
transform: `translate${axis}(${fromValue})`
},
{
transform: `translate${axis}(0)`
}
];
if (direction === 'exit') {
keyframes.reverse();
}
return {
keyframes,
duration,
easing
};
};
/**
* A presence component for a MessageBar to enter and exit from a MessageBarGroup.
* It has an optional enter transition of a slide-in and fade-in,
* when the `animate` prop is set to `'both'`.
* It always has an exit transition of a fade-out.
*/ export const MessageBarMotion = createPresenceComponent(({ animate })=>{
const duration = motionTokens.durationGentle;
return {
enter: animate === 'both' ? [
fadeAtom({
direction: 'enter',
duration
}),
slideAtom({
direction: 'enter',
axis: 'Y',
fromValue: '-100%',
duration
})
] : [],
// Always exit with a fade
exit: fadeAtom({
direction: 'exit',
duration
})
};
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.motions.tsx"],"sourcesContent":["import { motionTokens, createPresenceComponent, PresenceDirection, AtomMotion } from '@fluentui/react-motion';\nimport { MessageBarGroupProps } from './MessageBarGroup.types';\n\n// TODO: import these atoms from react-motion-components-preview once they're available there\n\ninterface FadeAtomParams {\n direction: PresenceDirection;\n duration: number;\n easing?: string;\n fromValue?: number;\n}\n\n/**\n * Generates a motion atom object for a fade in or fade out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromValue - The starting opacity value. Defaults to 0.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nconst fadeAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n fromValue = 0,\n}: FadeAtomParams): AtomMotion => {\n const keyframes = [{ opacity: fromValue }, { opacity: 1 }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n\n/**\n * Generates a motion atom object for an X or Y translation, from a specified distance to zero.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param axis - The axis of the translation: 'X' or 'Y'.\n * @param fromValue - The starting position of the slide; it can be a percentage or pixels.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveDecelerateMid`.\n */\nconst slideAtom = ({\n direction,\n axis,\n fromValue,\n duration,\n easing = motionTokens.curveDecelerateMid,\n}: {\n direction: PresenceDirection;\n axis: 'X' | 'Y';\n fromValue: string;\n duration: number;\n easing?: string;\n}): AtomMotion => {\n const keyframes = [{ transform: `translate${axis}(${fromValue})` }, { transform: `translate${axis}(0)` }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n };\n};\n\n/**\n * A presence component for a MessageBar to enter and exit from a MessageBarGroup.\n * It has an optional enter transition of a slide-in and fade-in,\n * when the `animate` prop is set to `'both'`.\n * It always has an exit transition of a fade-out.\n */\nexport const MessageBarMotion = createPresenceComponent<{ animate?: MessageBarGroupProps['animate'] }>(\n ({ animate }) => {\n const duration = motionTokens.durationGentle;\n\n return {\n enter:\n animate === 'both'\n ? // enter with slide and fade\n [\n fadeAtom({ direction: 'enter', duration }),\n slideAtom({ direction: 'enter', axis: 'Y', fromValue: '-100%', duration }),\n ]\n : [], // no enter motion\n\n // Always exit with a fade\n exit: fadeAtom({ direction: 'exit', duration }),\n };\n },\n);\n"],"names":["motionTokens","createPresenceComponent","fadeAtom","direction","duration","easing","curveLinear","fromValue","keyframes","opacity","reverse","slideAtom","axis","curveDecelerateMid","transform","MessageBarMotion","animate","durationGentle","enter","exit"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAuC,yBAAyB;AAY9G;;;;;;;CAOC,GACD,MAAMC,WAAW,CAAC,EAChBC,SAAS,EACTC,QAAQ,EACRC,SAASL,aAAaM,WAAW,EACjCC,YAAY,CAAC,EACE;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASF;QAAU;QAAG;YAAEE,SAAS;QAAE;KAAE;IAC1D,IAAIN,cAAc,QAAQ;QACxBK,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAJ;QACAC;IACF;AACF;AAEA;;;;;;;CAOC,GACD,MAAMM,YAAY,CAAC,EACjBR,SAAS,EACTS,IAAI,EACJL,SAAS,EACTH,QAAQ,EACRC,SAASL,aAAaa,kBAAkB,EAOzC;IACC,MAAML,YAAY;QAAC;YAAEM,WAAW,CAAC,SAAS,EAAEF,KAAK,CAAC,EAAEL,UAAU,CAAC,CAAC;QAAC;QAAG;YAAEO,WAAW,CAAC,SAAS,EAAEF,KAAK,GAAG,CAAC;QAAC;KAAE;IACzG,IAAIT,cAAc,QAAQ;QACxBK,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAJ;QACAC;IACF;AACF;AAEA;;;;;CAKC,GACD,OAAO,MAAMU,mBAAmBd,wBAC9B,CAAC,EAAEe,OAAO,EAAE;IACV,MAAMZ,WAAWJ,aAAaiB,cAAc;IAE5C,OAAO;QACLC,OACEF,YAAY,SAER;YACEd,SAAS;gBAAEC,WAAW;gBAASC;YAAS;YACxCO,UAAU;gBAAER,WAAW;gBAASS,MAAM;gBAAKL,WAAW;gBAASH;YAAS;SACzE,GACD,EAAE;QAER,0BAA0B;QAC1Be,MAAMjB,SAAS;YAAEC,WAAW;YAAQC;QAAS;IAC/C;AACF,GACA"}
@@ -0,0 +1 @@
import * as React from 'react';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarGroup/MessageBarGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type MessageBarGroupSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * MessageBarGroup Props\n */\nexport type MessageBarGroupProps = ComponentProps<MessageBarGroupSlots> & {\n children: React.ReactElement[] | React.ReactElement;\n animate?: 'exit-only' | 'both';\n};\n\n/**\n * State used in rendering MessageBarGroup\n */\nexport type MessageBarGroupState = ComponentState<MessageBarGroupSlots> &\n Pick<MessageBarGroupProps, 'animate'> & {\n /** @deprecated property is unused; these CSS animations were replaced by motion components */\n enterStyles: string;\n /** @deprecated property is unused; these CSS animations were replaced by motion components */\n exitStyles: string;\n children: React.ReactElement[];\n };\n"],"names":["React"],"rangeMappings":"","mappings":"AACA,YAAYA,WAAW,QAAQ"}
@@ -0,0 +1,4 @@
export { MessageBarGroup } from './MessageBarGroup';
export { renderMessageBarGroup_unstable } from './renderMessageBarGroup';
export { useMessageBarGroup_unstable } from './useMessageBarGroup';
export { messageBarGroupClassNames, useMessageBarGroupStyles_unstable } from './useMessageBarGroupStyles.styles';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarGroup/index.ts"],"sourcesContent":["export { MessageBarGroup } from './MessageBarGroup';\nexport type { MessageBarGroupProps, MessageBarGroupSlots, MessageBarGroupState } from './MessageBarGroup.types';\nexport { renderMessageBarGroup_unstable } from './renderMessageBarGroup';\nexport { useMessageBarGroup_unstable } from './useMessageBarGroup';\nexport { messageBarGroupClassNames, useMessageBarGroupStyles_unstable } from './useMessageBarGroupStyles.styles';\n"],"names":["MessageBarGroup","renderMessageBarGroup_unstable","useMessageBarGroup_unstable","messageBarGroupClassNames","useMessageBarGroupStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAEpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,yBAAyB,EAAEC,iCAAiC,QAAQ,oCAAoC"}
@@ -0,0 +1,17 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
import { PresenceGroup } from '@fluentui/react-motion';
import { MessageBarMotion } from './MessageBarGroup.motions';
/**
* Render the final JSX of MessageBarGroup
*/ export const renderMessageBarGroup_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsx(state.root, {
children: /*#__PURE__*/ _jsx(PresenceGroup, {
children: state.children.map((child)=>/*#__PURE__*/ _jsx(MessageBarMotion, {
animate: state.animate,
children: child
}, child.key))
})
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarGroup/renderMessageBarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { MessageBarGroupState, MessageBarGroupSlots } from './MessageBarGroup.types';\nimport { PresenceGroup } from '@fluentui/react-motion';\nimport { MessageBarMotion } from './MessageBarGroup.motions';\n\n/**\n * Render the final JSX of MessageBarGroup\n */\nexport const renderMessageBarGroup_unstable = (state: MessageBarGroupState) => {\n assertSlots<MessageBarGroupSlots>(state);\n\n return (\n <state.root>\n <PresenceGroup>\n {state.children.map(child => (\n <MessageBarMotion key={child.key} animate={state.animate}>\n {child}\n </MessageBarMotion>\n ))}\n </PresenceGroup>\n </state.root>\n );\n};\n"],"names":["assertSlots","PresenceGroup","MessageBarMotion","renderMessageBarGroup_unstable","state","root","children","map","child","animate","key"],"rangeMappings":";;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,aAAa,QAAQ,yBAAyB;AACvD,SAASC,gBAAgB,QAAQ,4BAA4B;AAE7D;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CJ,YAAkCI;IAElC,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,KAACJ;sBACEG,MAAME,QAAQ,CAACC,GAAG,CAACC,CAAAA,sBAClB,KAACN;oBAAiCO,SAASL,MAAMK,OAAO;8BACrDD;mBADoBA,MAAME,GAAG;;;AAO1C,EAAE"}
@@ -0,0 +1,37 @@
import * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
/**
* Create the state required to render MessageBarGroup.
*
* The returned state can be modified with hooks such as useMessageBarGroupStyles_unstable,
* before being passed to renderMessageBarGroup_unstable.
*
* @param props - props from this instance of MessageBarGroup
* @param ref - reference to root HTMLElement of MessageBarGroup
*/ export const useMessageBarGroup_unstable = (props, ref)=>{
if (process.env.NODE_ENV !== 'production') {
React.Children.forEach(props.children, (c)=>{
if (!React.isValidElement(c) || c.type === React.Fragment) {
throw new Error("MessageBarGroup: children must be valid MessageBar components. Please ensure you're not using fragments. ");
}
});
}
var _props_children;
const children = React.Children.map((_props_children = props.children) !== null && _props_children !== void 0 ? _props_children : [], (c)=>React.isValidElement(c) && c.type !== React.Fragment ? c : null).filter(Boolean);
var _props_animate;
return {
components: {
root: 'div'
},
root: slot.always(getIntrinsicElementProps('div', {
ref,
...props
}), {
elementType: 'div'
}),
children,
animate: (_props_animate = props.animate) !== null && _props_animate !== void 0 ? _props_animate : 'exit-only',
enterStyles: '',
exitStyles: ''
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MessageBarGroup/useMessageBarGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport type { MessageBarGroupProps, MessageBarGroupState } from './MessageBarGroup.types';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render MessageBarGroup.\n *\n * The returned state can be modified with hooks such as useMessageBarGroupStyles_unstable,\n * before being passed to renderMessageBarGroup_unstable.\n *\n * @param props - props from this instance of MessageBarGroup\n * @param ref - reference to root HTMLElement of MessageBarGroup\n */\nexport const useMessageBarGroup_unstable = (\n props: MessageBarGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): MessageBarGroupState => {\n if (process.env.NODE_ENV !== 'production') {\n React.Children.forEach(props.children, c => {\n if (!React.isValidElement(c) || c.type === React.Fragment) {\n throw new Error(\n \"MessageBarGroup: children must be valid MessageBar components. Please ensure you're not using fragments. \",\n );\n }\n });\n }\n\n const children = React.Children.map(props.children ?? [], c =>\n React.isValidElement(c) && c.type !== React.Fragment ? c : null,\n ).filter(Boolean);\n\n return {\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n ...props,\n }),\n { elementType: 'div' },\n ),\n children,\n animate: props.animate ?? 'exit-only',\n enterStyles: '',\n exitStyles: '',\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useMessageBarGroup_unstable","props","ref","process","env","NODE_ENV","Children","forEach","children","c","isValidElement","type","Fragment","Error","map","filter","Boolean","components","root","always","elementType","animate","enterStyles","exitStyles"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzCR,MAAMS,QAAQ,CAACC,OAAO,CAACN,MAAMO,QAAQ,EAAEC,CAAAA;YACrC,IAAI,CAACZ,MAAMa,cAAc,CAACD,MAAMA,EAAEE,IAAI,KAAKd,MAAMe,QAAQ,EAAE;gBACzD,MAAM,IAAIC,MACR;YAEJ;QACF;IACF;QAEoCZ;IAApC,MAAMO,WAAWX,MAAMS,QAAQ,CAACQ,GAAG,CAACb,CAAAA,kBAAAA,MAAMO,QAAQ,cAAdP,6BAAAA,kBAAkB,EAAE,EAAEQ,CAAAA,IACxDZ,MAAMa,cAAc,CAACD,MAAMA,EAAEE,IAAI,KAAKd,MAAMe,QAAQ,GAAGH,IAAI,MAC3DM,MAAM,CAACC;QAeEf;IAbX,OAAO;QACLgB,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMnB,KAAKoB,MAAM,CACfrB,yBAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEmB,aAAa;QAAM;QAEvBZ;QACAa,SAASpB,CAAAA,iBAAAA,MAAMoB,OAAO,cAAbpB,4BAAAA,iBAAiB;QAC1BqB,aAAa;QACbC,YAAY;IACd;AACF,EAAE"}
@@ -0,0 +1,13 @@
import { mergeClasses } from '@griffel/react';
export const messageBarGroupClassNames = {
root: 'fui-MessageBarGroup'
};
/**
* Apply styling to the MessageBarGroup slots based on the state
*/
export const useMessageBarGroupStyles_unstable = state => {
'use no memo';
state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);
return state;
};
@@ -0,0 +1 @@
{"version":3,"names":["mergeClasses","messageBarGroupClassNames","root","useMessageBarGroupStyles_unstable","state","className"],"sources":["useMessageBarGroupStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const messageBarGroupClassNames = {\n root: 'fui-MessageBarGroup'\n};\n/**\n * Apply styling to the MessageBarGroup slots based on the state\n */ export const useMessageBarGroupStyles_unstable = (state)=>{\n 'use no memo';\n state.root.className = mergeClasses(messageBarGroupClassNames.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACbA,KAAK,CAACF,IAAI,CAACG,SAAS,GAAGL,YAAY,CAACC,yBAAyB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;EACzF,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}