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,17 @@
'use client';
import * as React from 'react';
import { useSkeleton_unstable } from './useSkeleton';
import { renderSkeleton_unstable } from './renderSkeleton';
import { useSkeletonStyles_unstable } from './useSkeletonStyles.styles';
import { useSkeletonContextValues } from './useSkeletonContextValues';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* Skeleton component - TODO: add more docs
*/ export const Skeleton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useSkeleton_unstable(props, ref);
const contextValues = useSkeletonContextValues(state);
useSkeletonStyles_unstable(state);
useCustomStyleHook_unstable('useSkeletonStyles_unstable')(state);
return renderSkeleton_unstable(state, contextValues);
});
Skeleton.displayName = 'Skeleton';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSkeleton_unstable } from './useSkeleton';\nimport { renderSkeleton_unstable } from './renderSkeleton';\nimport { useSkeletonStyles_unstable } from './useSkeletonStyles.styles';\nimport { useSkeletonContextValues } from './useSkeletonContextValues';\nimport type { SkeletonProps } from './Skeleton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Skeleton component - TODO: add more docs\n */\nexport const Skeleton: ForwardRefComponent<SkeletonProps> = React.forwardRef((props, ref) => {\n const state = useSkeleton_unstable(props, ref);\n const contextValues = useSkeletonContextValues(state);\n\n useSkeletonStyles_unstable(state);\n useCustomStyleHook_unstable('useSkeletonStyles_unstable')(state);\n\n return renderSkeleton_unstable(state, contextValues);\n});\n\nSkeleton.displayName = 'Skeleton';\n"],"names":["React","useSkeleton_unstable","renderSkeleton_unstable","useSkeletonStyles_unstable","useSkeletonContextValues","useCustomStyleHook_unstable","Skeleton","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AACxE,SAASC,wBAAwB,QAAQ,6BAA6B;AAGtE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBP,yBAAyBM;IAE/CP,2BAA2BO;IAC3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

View File

@@ -0,0 +1,3 @@
/**
* Skeleton base state, excluding design-related state like animation and appearance.
*/ export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Skeleton/Skeleton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SkeletonContextValue } from '../../contexts/index';\n\nexport type SkeletonSlots = {\n /**\n * The root slot of the `Skeleton` is the container that will contain the slots that make up a `Skeleton`\n * and any data that the `Skeleton` will load. The default html element is a `div`.\n */\n root: NonNullable<Slot<'div', 'span'>>;\n};\n\n/**\n * Sizes for the SkeletonItem\n */\nexport type SkeletonItemSize =\n | 8\n | 12\n | 14\n | 16\n | 20\n | 22\n | 24\n | 28\n | 32\n | 36\n | 40\n | 48\n | 52\n | 56\n | 64\n | 72\n | 92\n | 96\n | 120\n | 128;\n\n/**\n * Skeleton Props\n */\nexport type SkeletonProps = Omit<ComponentProps<Partial<SkeletonSlots>>, 'width'> & {\n /**\n * The animation type for the Skeleton\n * @defaultValue wave\n */\n animation?: 'wave' | 'pulse';\n\n /**\n * Sets the appearance of the Skeleton.\n * @defaultValue opaque\n */\n appearance?: 'opaque' | 'translucent';\n\n /**\n * Sets the width value of the skeleton wrapper.\n * @defaultValue 100%\n * @deprecated Use `className` prop to set width\n */\n width?: number | string;\n\n /**\n * Sets the size of the SkeletonItems inside the Skeleton in pixels.\n * Size is restricted to a limited set of values recommended for most uses (see SkeletonItemSize).\n * This value can be overridden by the individual SkeletonItem's `size` prop.\n */\n size?: SkeletonItemSize;\n\n /**\n * Sets the shape of the SkeletonItems inside the Skeleton.\n * This value can be overridden by the individual SkeletonItem's `shape` prop.\n */\n shape?: 'circle' | 'square' | 'rectangle';\n};\n\n/**\n * Skeleton base props, excluding design-related props like animation and appearance.\n */\nexport type SkeletonBaseProps = Omit<SkeletonProps, 'animation' | 'appearance'>;\n\nexport type SkeletonContextValues = {\n skeletonGroup: SkeletonContextValue;\n};\n\n/**\n * State used in rendering Skeleton\n */\nexport type SkeletonState = ComponentState<SkeletonSlots> &\n Required<Pick<SkeletonProps, 'animation' | 'appearance'>> &\n Pick<SkeletonProps, 'size' | 'shape'>;\n\n/**\n * Skeleton base state, excluding design-related state like animation and appearance.\n */\nexport type SkeletonBaseState = Omit<SkeletonState, 'animation' | 'appearance' | 'size' | 'shape'>;\n"],"names":[],"mappings":"AAyFA;;CAEC,GACD,WAAmG"}

View File

@@ -0,0 +1,5 @@
export { Skeleton } from './Skeleton';
export { renderSkeleton_unstable } from './renderSkeleton';
export { useSkeleton_unstable, useSkeletonBase_unstable } from './useSkeleton';
export { useSkeletonContextValues } from './useSkeletonContextValues';
export { skeletonClassNames, useSkeletonStyles_unstable } from './useSkeletonStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Skeleton/index.ts"],"sourcesContent":["export { Skeleton } from './Skeleton';\nexport type {\n SkeletonBaseProps,\n SkeletonBaseState,\n SkeletonContextValues,\n SkeletonItemSize,\n SkeletonProps,\n SkeletonSlots,\n SkeletonState,\n} from './Skeleton.types';\nexport { renderSkeleton_unstable } from './renderSkeleton';\nexport { useSkeleton_unstable, useSkeletonBase_unstable } from './useSkeleton';\nexport { useSkeletonContextValues } from './useSkeletonContextValues';\nexport { skeletonClassNames, useSkeletonStyles_unstable } from './useSkeletonStyles.styles';\n"],"names":["Skeleton","renderSkeleton_unstable","useSkeleton_unstable","useSkeletonBase_unstable","useSkeletonContextValues","skeletonClassNames","useSkeletonStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAUtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,EAAEC,wBAAwB,QAAQ,gBAAgB;AAC/E,SAASC,wBAAwB,QAAQ,6BAA6B;AACtE,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}

View File

@@ -0,0 +1,12 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
import { SkeletonContextProvider } from '../../contexts/SkeletonContext';
/**
* Render the final JSX of Skeleton
*/ export const renderSkeleton_unstable = (state, contextValues)=>{
assertSlots(state);
return /*#__PURE__*/ _jsx(SkeletonContextProvider, {
value: contextValues.skeletonGroup,
children: /*#__PURE__*/ _jsx(state.root, {})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Skeleton/renderSkeleton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { SkeletonContextProvider } from '../../contexts/SkeletonContext';\nimport type { SkeletonContextValues, SkeletonSlots, SkeletonState } from './Skeleton.types';\n\n/**\n * Render the final JSX of Skeleton\n */\nexport const renderSkeleton_unstable = (state: SkeletonState, contextValues: SkeletonContextValues): JSXElement => {\n assertSlots<SkeletonSlots>(state);\n\n return (\n <SkeletonContextProvider value={contextValues.skeletonGroup}>\n <state.root />\n </SkeletonContextProvider>\n );\n};\n"],"names":["assertSlots","SkeletonContextProvider","renderSkeleton_unstable","state","contextValues","value","skeletonGroup","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,uBAAuB,QAAQ,iCAAiC;AAGzE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACF;QAAwBI,OAAOD,cAAcE,aAAa;kBACzD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

View File

@@ -0,0 +1,45 @@
'use client';
import * as React from 'react';
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
import { useSkeletonContext } from '../../contexts/SkeletonContext';
/**
* Create the state required to render Skeleton.
*
* The returned state can be modified with hooks such as useSkeletonStyles_unstable,
* before being passed to renderSkeleton_unstable.
*
* @param props - props from this instance of Skeleton
* @param ref - reference to root HTMLElement of Skeleton
*/ export const useSkeleton_unstable = (props, ref)=>{
const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();
const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque', size, shape, ...baseProps } = props;
const baseState = useSkeletonBase_unstable(baseProps, ref);
return {
...baseState,
animation,
appearance,
size,
shape
};
};
/**
* Base hook for Skeleton component, which manages state related to slots structure and ARIA attributes.
*
* @param props - User provided props to the Skeleton component.
* @param ref - User provided ref to be passed to the Skeleton component.
*/ export const useSkeletonBase_unstable = (props, ref)=>{
const root = slot.always(getIntrinsicElementProps('div', {
ref,
role: 'progressbar',
'aria-busy': true,
...props
}), {
elementType: 'div'
});
return {
components: {
root: 'div'
},
root
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Skeleton/useSkeleton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { SkeletonBaseProps, SkeletonBaseState, SkeletonProps, SkeletonState } from './Skeleton.types';\nimport { useSkeletonContext } from '../../contexts/SkeletonContext';\n\n/**\n * Create the state required to render Skeleton.\n *\n * The returned state can be modified with hooks such as useSkeletonStyles_unstable,\n * before being passed to renderSkeleton_unstable.\n *\n * @param props - props from this instance of Skeleton\n * @param ref - reference to root HTMLElement of Skeleton\n */\nexport const useSkeleton_unstable = (props: SkeletonProps, ref: React.Ref<HTMLElement>): SkeletonState => {\n const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();\n const {\n animation = contextAnimation ?? 'wave',\n appearance = contextAppearance ?? 'opaque',\n size,\n shape,\n ...baseProps\n } = props;\n\n const baseState = useSkeletonBase_unstable(baseProps, ref as React.Ref<HTMLDivElement>);\n\n return {\n ...baseState,\n animation,\n appearance,\n size,\n shape,\n };\n};\n\n/**\n * Base hook for Skeleton component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the Skeleton component.\n * @param ref - User provided ref to be passed to the Skeleton component.\n */\nexport const useSkeletonBase_unstable = (\n props: SkeletonBaseProps,\n ref: React.Ref<HTMLDivElement>,\n): SkeletonBaseState => {\n const root = slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'progressbar',\n 'aria-busy': true,\n ...props,\n }),\n { elementType: 'div' },\n );\n return { components: { root: 'div' }, root };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSkeletonContext","useSkeleton_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","size","shape","baseProps","baseState","useSkeletonBase_unstable","root","always","role","elementType","components"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,YAAYC,iBAAiB,EAAE,GAAGP;IACvE,MAAM,EACJI,YAAYC,6BAAAA,8BAAAA,mBAAoB,MAAM,EACtCC,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CC,IAAI,EACJC,KAAK,EACL,GAAGC,WACJ,GAAGR;IAEJ,MAAMS,YAAYC,yBAAyBF,WAAWP;IAEtD,OAAO;QACL,GAAGQ,SAAS;QACZP;QACAE;QACAE;QACAC;IACF;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMG,2BAA2B,CACtCV,OACAC;IAEA,MAAMU,OAAOd,KAAKe,MAAM,CACtBhB,yBAAyB,OAAO;QAC9BK;QACAY,MAAM;QACN,aAAa;QACb,GAAGb,KAAK;IACV,IACA;QAAEc,aAAa;IAAM;IAEvB,OAAO;QAAEC,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AAC7C,EAAE"}

View File

@@ -0,0 +1,19 @@
'use client';
import * as React from 'react';
export const useSkeletonContextValues = (state)=>{
const { animation, appearance, size, shape } = state;
const skeletonGroup = React.useMemo(()=>({
animation,
appearance,
size,
shape
}), [
animation,
appearance,
size,
shape
]);
return {
skeletonGroup
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Skeleton/useSkeletonContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { SkeletonContextValues, SkeletonState } from '../Skeleton';\n\nexport const useSkeletonContextValues = (state: SkeletonState): SkeletonContextValues => {\n const { animation, appearance, size, shape } = state;\n\n const skeletonGroup = React.useMemo(\n () => ({\n animation,\n appearance,\n size,\n shape,\n }),\n [animation, appearance, size, shape],\n );\n\n return { skeletonGroup };\n};\n"],"names":["React","useSkeletonContextValues","state","animation","appearance","size","shape","skeletonGroup","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,2BAA2B,CAACC;IACvC,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGJ;IAE/C,MAAMK,gBAAgBP,MAAMQ,OAAO,CACjC,IAAO,CAAA;YACLL;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACH;QAAWC;QAAYC;QAAMC;KAAM;IAGtC,OAAO;QAAEC;IAAc;AACzB,EAAE"}

View File

@@ -0,0 +1,23 @@
'use client';
import { __styles, mergeClasses } from '@griffel/react';
export const skeletonClassNames = {
root: 'fui-Skeleton'
};
const useStyles = /*#__PURE__*/__styles({
blockStyling: {
mc9l5x: "ftgm304"
}
}, {
d: [".ftgm304{display:block;}"]
});
/**
* Apply styling to the Skeleton slots based on the state
*/
export const useSkeletonStyles_unstable = state => {
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(skeletonClassNames.root, state.root.as === 'span' && styles.blockStyling, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["__styles","mergeClasses","skeletonClassNames","root","useStyles","blockStyling","mc9l5x","d","useSkeletonStyles_unstable","state","styles","className","as"],"sources":["useSkeletonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const skeletonClassNames = {\n root: 'fui-Skeleton'\n};\nconst useStyles = makeStyles({\n blockStyling: {\n display: 'block'\n }\n});\n/**\n * Apply styling to the Skeleton slots based on the state\n */ export const useSkeletonStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(skeletonClassNames.root, state.root.as === 'span' && styles.blockStyling, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAK,YAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;EAC1BK,KAAK,CAACN,IAAI,CAACQ,SAAS,GAAGV,YAAY,CAACC,kBAAkB,CAACC,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACS,EAAE,KAAK,MAAM,IAAIF,MAAM,CAACL,YAAY,EAAEI,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;EACnI,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,18 @@
'use client';
import { makeStyles, mergeClasses } from '@griffel/react';
export const skeletonClassNames = {
root: 'fui-Skeleton'
};
const useStyles = makeStyles({
blockStyling: {
display: 'block'
}
});
/**
* Apply styling to the Skeleton slots based on the state
*/ export const useSkeletonStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = mergeClasses(skeletonClassNames.root, state.root.as === 'span' && styles.blockStyling, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Skeleton/useSkeletonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SkeletonSlots, SkeletonState } from './Skeleton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nexport const skeletonClassNames: SlotClassNames<SkeletonSlots> = {\n root: 'fui-Skeleton',\n};\n\nconst useStyles = makeStyles({\n blockStyling: {\n display: 'block',\n },\n});\n\n/**\n * Apply styling to the Skeleton slots based on the state\n */\nexport const useSkeletonStyles_unstable = (state: SkeletonState): SkeletonState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n skeletonClassNames.root,\n state.root.as === 'span' && styles.blockStyling,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","skeletonClassNames","root","useStyles","blockStyling","display","useSkeletonStyles_unstable","state","styles","className","as"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BK,cAAc;QACZC,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,SAASL;IAEfI,MAAML,IAAI,CAACO,SAAS,GAAGT,aACrBC,mBAAmBC,IAAI,EACvBK,MAAML,IAAI,CAACQ,EAAE,KAAK,UAAUF,OAAOJ,YAAY,EAC/CG,MAAML,IAAI,CAACO,SAAS;IAGtB,OAAOF;AACT,EAAE"}