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,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "NavSubItemGroup", {
enumerable: true,
get: function() {
return NavSubItemGroup;
}
});
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 _useNavSubItemGroup = require("./useNavSubItemGroup");
const _renderNavSubItemGroup = require("./renderNavSubItemGroup");
const _useNavSubItemGroupStylesstyles = require("./useNavSubItemGroupStyles.styles");
const NavSubItemGroup = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useNavSubItemGroup.useNavSubItemGroup_unstable)(props, ref);
(0, _useNavSubItemGroupStylesstyles.useNavSubItemGroupStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useNavSubItemGroupStyles_unstable')(state);
return (0, _renderNavSubItemGroup.renderNavSubItemGroup_unstable)(state);
});
NavSubItemGroup.displayName = 'NavSubItemGroup';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavSubItemGroup/NavSubItemGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useNavSubItemGroup_unstable } from './useNavSubItemGroup';\nimport { renderNavSubItemGroup_unstable } from './renderNavSubItemGroup';\nimport { useNavSubItemGroupStyles_unstable } from './useNavSubItemGroupStyles.styles';\nimport type { NavSubItemGroupProps } from './NavSubItemGroup.types';\n\n/**\n * NavSubItemGroup component - a group of sub-items within a navigation structure.\n */\nexport const NavSubItemGroup: ForwardRefComponent<NavSubItemGroupProps> = React.forwardRef((props, ref) => {\n const state = useNavSubItemGroup_unstable(props, ref);\n\n useNavSubItemGroupStyles_unstable(state);\n useCustomStyleHook_unstable('useNavSubItemGroupStyles_unstable')(state);\n\n return renderNavSubItemGroup_unstable(state);\n});\n\nNavSubItemGroup.displayName = 'NavSubItemGroup';\n"],"names":["React","useCustomStyleHook_unstable","useNavSubItemGroup_unstable","renderNavSubItemGroup_unstable","useNavSubItemGroupStyles_unstable","NavSubItemGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;oCAElC,uBAAuB;uCACpB,0BAA0B;gDACvB,oCAAoC;AAM/E,MAAMK,kBAAAA,WAAAA,GAA6DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,YAAQP,+CAAAA,EAA4BK,OAAOC;QAEjDJ,iEAAAA,EAAkCK;QAClCR,gDAAAA,EAA4B,qCAAqCQ;IAEjE,WAAON,qDAAAA,EAA+BM;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavSubItemGroup/NavSubItemGroup.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { NavDensity } from '../Nav/Nav.types';\n\n/**\n * Context value for NavSubItemGroup\n */\nexport type NavSubItemGroupCollapseMotionParams = {\n /**\n * The number of items in the NavSubItemGroup\n */\n items?: number;\n\n /**\n * The density of the NavItem\n */\n density?: NavDensity;\n};\n\nexport type NavSubItemGroupSlots = {\n /**\n * The root element\n */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * Collapse motion slot\n */\n collapseMotion?: Slot<PresenceMotionSlotProps<NavSubItemGroupCollapseMotionParams>>;\n};\n\n/**\n * NavSubItemGroup Props\n */\nexport type NavSubItemGroupProps = ComponentProps<NavSubItemGroupSlots>;\n\n/**\n * State used in rendering NavSubItemGroup\n */\nexport type NavSubItemGroupState = ComponentState<NavSubItemGroupSlots> & {\n /**\n * Internal open state, provided by context.\n */\n open: boolean;\n};\n"],"names":[],"mappings":"AAoCA;;CAEC,GACD,WAKE"}

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, {
NavSubItemGroup: function() {
return _NavSubItemGroup.NavSubItemGroup;
},
navSubItemGroupClassNames: function() {
return _useNavSubItemGroupStylesstyles.navSubItemGroupClassNames;
},
renderNavSubItemGroup_unstable: function() {
return _renderNavSubItemGroup.renderNavSubItemGroup_unstable;
},
useNavSubItemGroupStyles_unstable: function() {
return _useNavSubItemGroupStylesstyles.useNavSubItemGroupStyles_unstable;
},
useNavSubItemGroup_unstable: function() {
return _useNavSubItemGroup.useNavSubItemGroup_unstable;
}
});
const _NavSubItemGroup = require("./NavSubItemGroup");
const _renderNavSubItemGroup = require("./renderNavSubItemGroup");
const _useNavSubItemGroup = require("./useNavSubItemGroup");
const _useNavSubItemGroupStylesstyles = require("./useNavSubItemGroupStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavSubItemGroup/index.ts"],"sourcesContent":["export { NavSubItemGroup } from './NavSubItemGroup';\nexport type { NavSubItemGroupSlots, NavSubItemGroupProps, NavSubItemGroupState } from './NavSubItemGroup.types';\nexport { renderNavSubItemGroup_unstable } from './renderNavSubItemGroup';\nexport { useNavSubItemGroup_unstable } from './useNavSubItemGroup';\nexport { useNavSubItemGroupStyles_unstable, navSubItemGroupClassNames } from './useNavSubItemGroupStyles.styles';\n"],"names":["NavSubItemGroup","renderNavSubItemGroup_unstable","useNavSubItemGroup_unstable","useNavSubItemGroupStyles_unstable","navSubItemGroupClassNames"],"mappings":";;;;;;;;;;;;eAASA,gCAAe;;;eAIoBI,yDAAyB;;;eAF5DH,qDAA8B;;;eAE9BE,iEAAiC;;;eADjCD,+CAA2B;;;iCAHJ,oBAAoB;uCAEL,0BAA0B;oCAC7B,uBAAuB;gDACU,oCAAoC"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavSubItemGroup/renderNavSubItemGroup.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 type { NavSubItemGroupState, NavSubItemGroupSlots } from './NavSubItemGroup.types';\n\n/**\n * Render the final JSX of NavSubItemGroup\n */\nexport const renderNavSubItemGroup_unstable = (state: NavSubItemGroupState): JSXElement => {\n assertSlots<NavSubItemGroupSlots>(state);\n\n return state.collapseMotion ? (\n <state.collapseMotion>\n <state.root />\n </state.collapseMotion>\n ) : (\n <state.root />\n );\n};\n"],"names":["assertSlots","renderNavSubItemGroup_unstable","state","collapseMotion","root"],"mappings":";;;;+BAUaC;;;;;;4BATb,gDAAiD;gCAErB,4BAA4B;AAOjD,uCAAuC,CAACC;QAC7CF,2BAAAA,EAAkCE;IAElC,OAAOA,MAAMC,cAAc,GAAA,WAAA,OACzB,eAAA,EAACD,MAAMC,cAAc,EAAA;kBACnB,WAAA,OAAA,eAAA,EAACD,MAAME,IAAI,EAAA,CAAA;2BAGb,eAAA,EAACF,MAAME,IAAI,EAAA,CAAA;AAEf,EAAE"}

View File

@@ -0,0 +1,40 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useNavSubItemGroup_unstable", {
enumerable: true,
get: function() {
return useNavSubItemGroup_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reactmotion = require("@fluentui/react-motion");
const _reactmotioncomponentspreview = require("@fluentui/react-motion-components-preview");
const _NavCategoryContext = require("../NavCategoryContext");
const useNavSubItemGroup_unstable = (props, ref)=>{
const { open } = (0, _NavCategoryContext.useNavCategoryContext_unstable)();
return {
open,
components: {
root: 'div',
collapseMotion: _reactmotioncomponentspreview.Collapse
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
...props,
ref
}), {
elementType: 'div'
}),
collapseMotion: (0, _reactmotion.presenceMotionSlot)(props.collapseMotion, {
elementType: _reactmotioncomponentspreview.Collapse,
defaultProps: {
visible: open,
unmountOnExit: true
}
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { Collapse } from '@fluentui/react-motion-components-preview';\n\nimport type { NavSubItemGroupProps, NavSubItemGroupState } from './NavSubItemGroup.types';\nimport { useNavCategoryContext_unstable } from '../NavCategoryContext';\n\n/**\n * Create the state required to render NavSubItemGroup.\n *\n * The returned state can be modified with hooks such as useNavSubItemGroupStyles_unstable,\n * before being passed to renderNavSubItemGroup_unstable.\n *\n * @param props - props from this instance of NavSubItemGroup\n * @param ref - reference to root HTMLDivElement of NavSubItemGroup\n */\nexport const useNavSubItemGroup_unstable = (\n props: NavSubItemGroupProps,\n ref: React.Ref<HTMLDivElement>,\n): NavSubItemGroupState => {\n const { open } = useNavCategoryContext_unstable();\n\n return {\n open,\n components: {\n root: 'div',\n collapseMotion: Collapse,\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n ref,\n }),\n { elementType: 'div' },\n ),\n\n collapseMotion: presenceMotionSlot(props.collapseMotion, {\n elementType: Collapse,\n defaultProps: {\n visible: open,\n unmountOnExit: true,\n },\n }),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","presenceMotionSlot","Collapse","useNavCategoryContext_unstable","useNavSubItemGroup_unstable","props","ref","open","components","root","collapseMotion","always","elementType","defaultProps","visible","unmountOnExit"],"mappings":"AAAA;;;;;+BAmBaM;;;;;;;iEAjBU,QAAQ;gCACgB,4BAA4B;6BACxC,yBAAyB;8CACnC,4CAA4C;oCAGtB,wBAAwB;AAWhE,oCAAoC,CACzCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,OAAGJ,kDAAAA;IAEjB,OAAO;QACLI;QACAC,YAAY;YACVC,MAAM;YACNC,gBAAgBR,sCAAAA;QAClB;QAEAO,MAAMT,oBAAAA,CAAKW,MAAM,KACfZ,wCAAAA,EAAyB,OAAO;YAC9B,GAAGM,KAAK;YACRC;QACF,IACA;YAAEM,aAAa;QAAM;QAGvBF,oBAAgBT,+BAAAA,EAAmBI,MAAMK,cAAc,EAAE;YACvDE,aAAaV,sCAAAA;YACbW,cAAc;gBACZC,SAASP;gBACTQ,eAAe;YACjB;QACF;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,51 @@
'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, {
navSubItemGroupClassNames: function() {
return navSubItemGroupClassNames;
},
useNavSubItemGroupStyles_unstable: function() {
return useNavSubItemGroupStyles_unstable;
}
});
const _react = require("@griffel/react");
const navSubItemGroupClassNames = {
root: 'fui-NavSubItemGroup'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Bnnss6s: "fi64zpg",
Bz10aip: "f1yj8dow",
B68tc82: 0,
Bmxbyg5: 0,
Bpg54ce: "f1a3p1vp"
}
}, {
d: [
".fi64zpg{flex-shrink:0;}",
".f1yj8dow{transform:translateZ(0);}",
[
".f1a3p1vp{overflow:hidden;}",
{
p: -1
}
]
]
});
const useNavSubItemGroupStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(navSubItemGroupClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useNavSubItemGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const navSubItemGroupClassNames = {\n root: 'fui-NavSubItemGroup'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n flexShrink: 0,\n transform: 'translateZ(0)',\n overflow: 'hidden'\n }\n});\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */ export const useNavSubItemGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","navSubItemGroupClassNames","root","useStyles","Bnnss6s","Bz10aip","B68tc82","Bmxbyg5","Bpg54ce","d","p","useNavSubItemGroupStyles_unstable","state","styles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,yBAAyB;;;qCAcY;eAAjCU;;;uBAfwB,gBAAgB;AAClD,kCAAkC;IACrCT,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAG,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAMrB,CAAC;AAGS,2CAA2CE,KAAK,IAAG;IAC1D,aAAa;IACb,MAAMC,MAAM,GAAGV,SAAS,CAAC,CAAC;IAC1BS,KAAK,CAACV,IAAI,CAACY,SAAS,OAAGd,mBAAY,EAACC,yBAAyB,CAACC,IAAI,EAAEW,MAAM,CAACX,IAAI,EAAEU,KAAK,CAACV,IAAI,CAACY,SAAS,CAAC;IACtG,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,38 @@
'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, {
navSubItemGroupClassNames: function() {
return navSubItemGroupClassNames;
},
useNavSubItemGroupStyles_unstable: function() {
return useNavSubItemGroupStyles_unstable;
}
});
const _react = require("@griffel/react");
const navSubItemGroupClassNames = {
root: 'fui-NavSubItemGroup'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
flexShrink: 0,
transform: 'translateZ(0)',
overflow: 'hidden'
}
});
const useNavSubItemGroupStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(navSubItemGroupClassNames.root, styles.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/NavSubItemGroup/useNavSubItemGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavSubItemGroupSlots, NavSubItemGroupState } from './NavSubItemGroup.types';\n\nexport const navSubItemGroupClassNames: SlotClassNames<Omit<NavSubItemGroupSlots, 'collapseMotion'>> = {\n root: 'fui-NavSubItemGroup',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n flexShrink: 0,\n transform: 'translateZ(0)',\n overflow: 'hidden',\n },\n});\n\n/**\n * Apply styling to the NavSubItemGroup slots based on the state\n */\nexport const useNavSubItemGroupStyles_unstable = (state: NavSubItemGroupState): NavSubItemGroupState => {\n 'use no memo';\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(navSubItemGroupClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","navSubItemGroupClassNames","root","useStyles","flexShrink","transform","overflow","useNavSubItemGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;;;;;;;;;;;;6BAMaE;;;qCAkBAM;;;;uBAtB4B,iBAAiB;AAInD,MAAMN,4BAA0F;IACrGC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BG,MAAM;QACJE,YAAY;QACZC,WAAW;QACXC,UAAU;IACZ;AACF;AAKO,MAAMC,oCAAoC,CAACC;IAChD;IAEA,MAAMC,SAASN;IAEfK,MAAMN,IAAI,CAACQ,SAAS,OAAGV,mBAAAA,EAAaC,0BAA0BC,IAAI,EAAEO,OAAOP,IAAI,EAAEM,MAAMN,IAAI,CAACQ,SAAS;IAErG,OAAOF;AACT,EAAE"}