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,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "NavDrawer", {
enumerable: true,
get: function() {
return NavDrawer;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useNavDrawer = require("./useNavDrawer");
const _renderNavDrawer = require("./renderNavDrawer");
const _useNavDrawerStylesstyles = require("./useNavDrawerStyles.styles");
const _useNavContextValues = require("../useNavContextValues");
const NavDrawer = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useNavDrawer.useNavDrawer_unstable)(props, ref);
const contextValues = (0, _useNavContextValues.useNavContextValues_unstable)(state);
(0, _useNavDrawerStylesstyles.useNavDrawerStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useNavDrawerStyles_unstable')(state);
return (0, _renderNavDrawer.renderNavDrawer_unstable)(state, contextValues);
});
NavDrawer.displayName = 'NavDrawer';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavDrawer/NavDrawer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nimport { useNavDrawer_unstable } from './useNavDrawer';\nimport { renderNavDrawer_unstable } from './renderNavDrawer';\nimport { useNavDrawerStyles_unstable } from './useNavDrawerStyles.styles';\nimport { useNavContextValues_unstable } from '../useNavContextValues';\nimport { NavState } from '../Nav/Nav.types';\nimport type { NavDrawerProps } from './NavDrawer.types';\n\n/**\n * NavDrawer component - a component that provides a drawer for navigation items.\n */\nexport const NavDrawer: ForwardRefComponent<NavDrawerProps> = React.forwardRef((props, ref) => {\n const state = useNavDrawer_unstable(props, ref);\n const contextValues = useNavContextValues_unstable(state as NavState);\n\n useNavDrawerStyles_unstable(state);\n useCustomStyleHook_unstable('useNavDrawerStyles_unstable')(state);\n\n return renderNavDrawer_unstable(state, contextValues);\n});\n\nNavDrawer.displayName = 'NavDrawer';\n"],"names":["React","useCustomStyleHook_unstable","useNavDrawer_unstable","renderNavDrawer_unstable","useNavDrawerStyles_unstable","useNavContextValues_unstable","NavDrawer","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCACa,kCAAkC;8BAGxC,iBAAiB;iCACd,oBAAoB;0CACjB,8BAA8B;qCAC7B,yBAAyB;AAO/D,MAAMM,YAAAA,WAAAA,GAAiDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,YAAQR,mCAAAA,EAAsBM,OAAOC;IAC3C,MAAME,oBAAgBN,iDAAAA,EAA6BK;QAEnDN,qDAAAA,EAA4BM;QAC5BT,gDAAAA,EAA4B,+BAA+BS;IAE3D,WAAOP,yCAAAA,EAAyBO,OAAOC;AACzC,GAAG;AAEHL,UAAUM,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering NavDrawer
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavDrawer/NavDrawer.types.ts"],"sourcesContent":["import { DrawerProps, DrawerSlots, DrawerState } from '@fluentui/react-drawer';\nimport { ComponentProps } from '@fluentui/react-utilities';\nimport { NavProps } from '../Nav/Nav.types';\nimport { NavContextValue } from '../NavContext.types';\n\n/**\n * NavDrawer slots\n */\nexport type NavDrawerSlots = DrawerSlots;\n\n/**\n * NavDrawer Props\n */\nexport type NavDrawerProps = ComponentProps<NavDrawerSlots> &\n DrawerProps &\n NavProps & {\n /**\n * The component uses arrow navigation by default.\n * Setting this to true enables tab AND arrow navigation.\n * @default false\n */\n tabbable?: boolean;\n };\n\n/**\n * State used in rendering NavDrawer\n */\nexport type NavDrawerState = DrawerState &\n NavContextValue & {\n /**\n * Analagous to size from DrawerBaseProps.\n * Intended to be left unset in most cases.\n * If left unset, it defaults to 260px.\n */\n size?: 'small' | 'medium' | 'large' | 'full';\n };\n"],"names":[],"mappings":"AAwBA;;CAEC,GACD,WAQI"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
NavDrawer: function() {
return _NavDrawer.NavDrawer;
},
navDrawerClassNames: function() {
return _useNavDrawerStylesstyles.navDrawerClassNames;
},
renderNavDrawer_unstable: function() {
return _renderNavDrawer.renderNavDrawer_unstable;
},
useNavDrawerStyles_unstable: function() {
return _useNavDrawerStylesstyles.useNavDrawerStyles_unstable;
},
useNavDrawer_unstable: function() {
return _useNavDrawer.useNavDrawer_unstable;
}
});
const _NavDrawer = require("./NavDrawer");
const _renderNavDrawer = require("./renderNavDrawer");
const _useNavDrawer = require("./useNavDrawer");
const _useNavDrawerStylesstyles = require("./useNavDrawerStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavDrawer/index.ts"],"sourcesContent":["export { NavDrawer } from './NavDrawer';\nexport type { NavDrawerProps, NavDrawerSlots, NavDrawerState } from './NavDrawer.types';\nexport { renderNavDrawer_unstable } from './renderNavDrawer';\nexport { useNavDrawer_unstable } from './useNavDrawer';\nexport { navDrawerClassNames, useNavDrawerStyles_unstable } from './useNavDrawerStyles.styles';\n"],"names":["NavDrawer","renderNavDrawer_unstable","useNavDrawer_unstable","navDrawerClassNames","useNavDrawerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,oBAAS;;;eAITG,6CAAmB;;;eAFnBF,yCAAwB;;;eAEHG,qDAA2B;;;eADhDF,mCAAqB;;;2BAHJ,cAAc;iCAEC,oBAAoB;8BACvB,iBAAiB;0CACU,8BAA8B"}

View File

@@ -0,0 +1,20 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderNavDrawer_unstable", {
enumerable: true,
get: function() {
return renderNavDrawer_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _NavContext = require("../NavContext");
const renderNavDrawer_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_NavContext.NavProvider, {
value: contextValues.nav,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavDrawer/renderNavDrawer.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 { NavProvider } from '../NavContext';\nimport type { NavContextValues } from '../NavContext.types';\nimport type { NavDrawerSlots, NavDrawerState } from './NavDrawer.types';\n\nexport const renderNavDrawer_unstable = (state: NavDrawerState, contextValues: NavContextValues): JSXElement => {\n assertSlots<NavDrawerSlots>(state);\n\n return (\n <NavProvider value={contextValues.nav}>\n <state.root />\n </NavProvider>\n );\n};\n"],"names":["assertSlots","NavProvider","renderNavDrawer_unstable","state","contextValues","value","nav","root"],"mappings":";;;;+BASaE;;;;;;4BARb,gDAAiD;gCAErB,4BAA4B;4BAE5B,gBAAgB;AAIrC,iCAAiC,CAACC,OAAuBC;QAC9DJ,2BAAAA,EAA4BG;IAE5B,OAAA,WAAA,OACE,eAAA,EAACF,uBAAAA,EAAAA;QAAYI,OAAOD,cAAcE,GAAG;kBACnC,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;AAGjB,EAAE"}

View File

@@ -0,0 +1,43 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useNavDrawer_unstable", {
enumerable: true,
get: function() {
return useNavDrawer_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactdrawer = require("@fluentui/react-drawer");
const _reactutilities = require("@fluentui/react-utilities");
const _useNav = require("../Nav/useNav");
const useNavDrawer_unstable = (props, ref)=>{
const { size = undefined, tabbable = false } = props;
const navState = (0, _useNav.useNav_unstable)(props, ref);
return {
...navState,
size,
tabbable,
components: {
// TODO: remove once React v18 slot API is modified
// this is a problem with the lack of support for union types on React v18
// ComponentState is using React.ComponentType which will try to infer propType
// propTypes WeakValidator signature will break distributive unions making this type invalid
root: _reactdrawer.Drawer
},
root: _reactutilities.slot.always({
ref,
role: 'navigation',
...props
}, {
// TODO: remove once React v18 slot API is modified
// this is a problem with the lack of support for union types on React v18
// ComponentState is using React.ComponentType which will try to infer propType
// propTypes WeakValidator signature will break distributive unions making this type invalid
elementType: _reactdrawer.Drawer
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavDrawer/useNavDrawer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Drawer, DrawerProps } from '@fluentui/react-drawer';\nimport { RefAttributes, slot } from '@fluentui/react-utilities';\n\nimport { useNav_unstable } from '../Nav/useNav';\nimport type { NavDrawerProps, NavDrawerState } from './NavDrawer.types';\n\n/**\n * Create the state required to render NavDrawer.\n *\n * The returned state can be modified with hooks such as useNavDrawerStyles_unstable,\n * before being passed to renderNavDrawer_unstable.\n *\n * @param props - props from this instance of NavDrawer\n * @param ref - reference to root HTMLDivElement of NavDrawer\n */\nexport const useNavDrawer_unstable = (props: NavDrawerProps, ref: React.Ref<HTMLDivElement>): NavDrawerState => {\n const { size = undefined, tabbable = false } = props;\n\n const navState = useNav_unstable(props, ref);\n\n return {\n ...navState,\n size,\n tabbable,\n components: {\n // TODO: remove once React v18 slot API is modified\n // this is a problem with the lack of support for union types on React v18\n // ComponentState is using React.ComponentType which will try to infer propType\n // propTypes WeakValidator signature will break distributive unions making this type invalid\n root: Drawer as React.FC<DrawerProps>,\n },\n\n root: slot.always(\n { ref, role: 'navigation', ...props },\n {\n // TODO: remove once React v18 slot API is modified\n // this is a problem with the lack of support for union types on React v18\n // ComponentState is using React.ComponentType which will try to infer propType\n // propTypes WeakValidator signature will break distributive unions making this type invalid\n elementType: Drawer as React.FC<DrawerProps & RefAttributes<HTMLDivElement>>,\n },\n ),\n };\n};\n"],"names":["React","Drawer","slot","useNav_unstable","useNavDrawer_unstable","props","ref","size","undefined","tabbable","navState","components","root","always","role","elementType"],"mappings":"AAAA;;;;;+BAkBaI;;;;;;;iEAhBU,QAAQ;6BACK,yBAAyB;gCACzB,4BAA4B;wBAEhC,gBAAgB;AAYzC,8BAA8B,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,OAAOC,SAAS,EAAEC,WAAW,KAAK,EAAE,GAAGJ;IAE/C,MAAMK,eAAWP,uBAAAA,EAAgBE,OAAOC;IAExC,OAAO;QACL,GAAGI,QAAQ;QACXH;QACAE;QACAE,YAAY;YACV,mDAAmD;YACnD,0EAA0E;YAC1E,+EAA+E;YAC/E,4FAA4F;YAC5FC,MAAMX,mBAAAA;QACR;QAEAW,MAAMV,oBAAAA,CAAKW,MAAM,CACf;YAAEP;YAAKQ,MAAM;YAAc,GAAGT,KAAK;QAAC,GACpC;YACE,mDAAmD;YACnD,0EAA0E;YAC1E,+EAA+E;YAC/E,4FAA4F;YAC5FU,aAAad,mBAAAA;QACf;IAEJ;AACF,EAAE"}

View File

@@ -0,0 +1,47 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
navDrawerClassNames: function() {
return navDrawerClassNames;
},
useNavDrawerStyles_unstable: function() {
return useNavDrawerStyles_unstable;
}
});
const _react = require("@griffel/react");
const navDrawerClassNames = {
root: 'fui-NavDrawer'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
De3pzq: "f1ctqxl6",
Bt984gj: "f3gca8"
},
defaultWidth: {
a9b677: "f12j6lm0"
}
}, {
d: [
".f1ctqxl6{background-color:var(--colorNeutralBackground4);}",
".f3gca8{align-items:unset;}",
".f12j6lm0{width:260px;}"
]
});
const useNavDrawerStyles_unstable = (state)=>{
'use no memo';
const { size } = state;
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(navDrawerClassNames.root, styles.root, !size && styles.defaultWidth, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useNavDrawerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens } from '../sharedNavStyles.styles';\nexport const navDrawerClassNames = {\n root: 'fui-NavDrawer'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n backgroundColor: navItemTokens.backgroundColor,\n alignItems: 'unset'\n },\n // seperate style so it can be applied conditionally\n // if size is not set, use default width from the token.\n defaultWidth: {\n width: `${navItemTokens.defaultDrawerWidth}px`\n }\n});\n/**\n * Apply styling to the NavDrawer slots based on the state\n */ export const useNavDrawerStyles_unstable = (state)=>{\n 'use no memo';\n const { size } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(navDrawerClassNames.root, styles.root, !size && styles.defaultWidth, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","navItemTokens","navDrawerClassNames","root","useStyles","De3pzq","Bt984gj","defaultWidth","a9b677","d","useNavDrawerStyles_unstable","state","size","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,mBAAmB;;;+BAkBY;eAA3BQ;;;uBApBwB,gBAAgB;AAElD,4BAA4B;IAC/BP,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAUrB,CAAC;AAGS,qCAAqCE,KAAK,IAAG;IACpD,aAAa;IACb,MAAM,EAAEC,IAAAA,EAAM,GAAGD,KAAK;IACtB,MAAME,MAAM,GAAGT,SAAS,CAAC,CAAC;IAC1BO,KAAK,CAACR,IAAI,CAACW,SAAS,OAAGd,mBAAY,EAACE,mBAAmB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAE,CAACS,IAAI,IAAIC,MAAM,CAACN,YAAY,EAAEI,KAAK,CAACR,IAAI,CAACW,SAAS,CAAC;IAC9H,OAAOH,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,44 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
navDrawerClassNames: function() {
return navDrawerClassNames;
},
useNavDrawerStyles_unstable: function() {
return useNavDrawerStyles_unstable;
}
});
const _react = require("@griffel/react");
const _sharedNavStylesstyles = require("../sharedNavStyles.styles");
const navDrawerClassNames = {
root: 'fui-NavDrawer'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
backgroundColor: _sharedNavStylesstyles.navItemTokens.backgroundColor,
alignItems: 'unset'
},
// seperate style so it can be applied conditionally
// if size is not set, use default width from the token.
defaultWidth: {
width: `${_sharedNavStylesstyles.navItemTokens.defaultDrawerWidth}px`
}
});
const useNavDrawerStyles_unstable = (state)=>{
'use no memo';
const { size } = state;
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(navDrawerClassNames.root, styles.root, !size && styles.defaultWidth, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavDrawer/useNavDrawerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { InlineDrawerSlots } from '@fluentui/react-drawer';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerState } from './NavDrawer.types';\nimport { navItemTokens } from '../sharedNavStyles.styles';\n\nexport const navDrawerClassNames: SlotClassNames<Omit<InlineDrawerSlots, 'surfaceMotion'>> = {\n root: 'fui-NavDrawer',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n backgroundColor: navItemTokens.backgroundColor,\n alignItems: 'unset',\n },\n // seperate style so it can be applied conditionally\n // if size is not set, use default width from the token.\n defaultWidth: {\n width: `${navItemTokens.defaultDrawerWidth}px`,\n },\n});\n\n/**\n * Apply styling to the NavDrawer slots based on the state\n */\nexport const useNavDrawerStyles_unstable = (state: NavDrawerState): NavDrawerState => {\n 'use no memo';\n\n const { size } = state;\n\n const styles = useStyles();\n state.root.className = mergeClasses(\n navDrawerClassNames.root,\n styles.root,\n !size && styles.defaultWidth,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","navItemTokens","navDrawerClassNames","root","useStyles","backgroundColor","alignItems","defaultWidth","width","defaultDrawerWidth","useNavDrawerStyles_unstable","state","size","styles","className"],"mappings":"AAAA;;;;;;;;;;;;IAQaG,mBAAAA;;;IAsBAQ,2BAAAA;;;;uBA5B4B,iBAAiB;uCAI5B,4BAA4B;AAEnD,4BAAsF;IAC3FP,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,iBAAiBJ,oCAAAA,CAAcI,eAAe;QAC9CC,YAAY;IACd;IACA,oDAAoD;IACpD,wDAAwD;IACxDC,cAAc;QACZC,OAAO,GAAGP,oCAAAA,CAAcQ,kBAAkB,CAAC,EAAE,CAAC;IAChD;AACF;AAKO,oCAAoC,CAACE;IAC1C;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,MAAME,SAAST;IACfO,MAAMR,IAAI,CAACW,SAAS,OAAGd,mBAAAA,EACrBE,oBAAoBC,IAAI,EACxBU,OAAOV,IAAI,EACX,CAACS,QAAQC,OAAON,YAAY,EAC5BI,MAAMR,IAAI,CAACW,SAAS;IAGtB,OAAOH;AACT,EAAE"}