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, "BreadcrumbItem", {
enumerable: true,
get: function() {
return BreadcrumbItem;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useBreadcrumbItem = require("./useBreadcrumbItem");
const _renderBreadcrumbItem = require("./renderBreadcrumbItem");
const _useBreadcrumbItemStylesstyles = require("./useBreadcrumbItemStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const BreadcrumbItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useBreadcrumbItem.useBreadcrumbItem_unstable)(props, ref);
(0, _useBreadcrumbItemStylesstyles.useBreadcrumbItemStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useBreadcrumbItemStyles_unstable')(state);
return (0, _renderBreadcrumbItem.renderBreadcrumbItem_unstable)(state);
});
BreadcrumbItem.displayName = 'BreadcrumbItem';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/BreadcrumbItem/BreadcrumbItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useBreadcrumbItem_unstable } from './useBreadcrumbItem';\nimport { renderBreadcrumbItem_unstable } from './renderBreadcrumbItem';\nimport { useBreadcrumbItemStyles_unstable } from './useBreadcrumbItemStyles.styles';\nimport type { BreadcrumbItemProps } from './BreadcrumbItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * BreadcrumbItem component is a wrapper for BreadcrumbLink and BreadcrumbButton.\n * It can be used as a non-interactive item.\n */\nexport const BreadcrumbItem: ForwardRefComponent<BreadcrumbItemProps> = React.forwardRef((props, ref) => {\n const state = useBreadcrumbItem_unstable(props, ref);\n\n useBreadcrumbItemStyles_unstable(state);\n useCustomStyleHook_unstable('useBreadcrumbItemStyles_unstable')(state);\n\n return renderBreadcrumbItem_unstable(state);\n});\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n"],"names":["React","useBreadcrumbItem_unstable","renderBreadcrumbItem_unstable","useBreadcrumbItemStyles_unstable","useCustomStyleHook_unstable","BreadcrumbItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;mCACY,sBAAsB;sCACnB,yBAAyB;+CACtB,mCAAmC;qCAGxC,kCAAkC;AAMvE,MAAMK,iBAAAA,WAAAA,GAA2DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQR,6CAAAA,EAA2BM,OAAOC;QAEhDL,+DAAAA,EAAiCM;QACjCL,gDAAAA,EAA4B,oCAAoCK;IAEhE,WAAOP,mDAAAA,EAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* BreadcrumbItem base state (excludes size, which is a design prop injected from context)
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/BreadcrumbItem/BreadcrumbItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { BreadcrumbProps } from '../Breadcrumb';\n\nexport type BreadcrumbItemSlots = {\n root: Slot<'li'>;\n};\n\n/**\n * BreadcrumbItem Props\n */\nexport type BreadcrumbItemProps = ComponentProps<BreadcrumbItemSlots> & Pick<BreadcrumbProps, 'size'>;\n\n/**\n * State used in rendering BreadcrumbItem\n */\nexport type BreadcrumbItemState = ComponentState<BreadcrumbItemSlots> & Required<Pick<BreadcrumbItemProps, 'size'>>;\n\n/**\n * BreadcrumbItem base props (same as BreadcrumbItemProps since size is passed through context, not as a design prop)\n */\nexport type BreadcrumbItemBaseProps = Omit<BreadcrumbItemProps, 'size'>;\n\n/**\n * BreadcrumbItem base state (excludes size, which is a design prop injected from context)\n */\nexport type BreadcrumbItemBaseState = Omit<BreadcrumbItemState, 'size'>;\n"],"names":[],"mappings":"AAsBA;;CAEC,GACD,WAAwE"}

View File

@@ -0,0 +1,34 @@
"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, {
BreadcrumbItem: function() {
return _BreadcrumbItem.BreadcrumbItem;
},
breadcrumbItemClassNames: function() {
return _useBreadcrumbItemStylesstyles.breadcrumbItemClassNames;
},
renderBreadcrumbItem_unstable: function() {
return _renderBreadcrumbItem.renderBreadcrumbItem_unstable;
},
useBreadcrumbItemBase_unstable: function() {
return _useBreadcrumbItem.useBreadcrumbItemBase_unstable;
},
useBreadcrumbItemStyles_unstable: function() {
return _useBreadcrumbItemStylesstyles.useBreadcrumbItemStyles_unstable;
},
useBreadcrumbItem_unstable: function() {
return _useBreadcrumbItem.useBreadcrumbItem_unstable;
}
});
const _BreadcrumbItem = require("./BreadcrumbItem");
const _renderBreadcrumbItem = require("./renderBreadcrumbItem");
const _useBreadcrumbItem = require("./useBreadcrumbItem");
const _useBreadcrumbItemStylesstyles = require("./useBreadcrumbItemStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/BreadcrumbItem/index.ts"],"sourcesContent":["export { BreadcrumbItem } from './BreadcrumbItem';\nexport type {\n BreadcrumbItemBaseProps,\n BreadcrumbItemBaseState,\n BreadcrumbItemProps,\n BreadcrumbItemSlots,\n BreadcrumbItemState,\n} from './BreadcrumbItem.types';\nexport { renderBreadcrumbItem_unstable } from './renderBreadcrumbItem';\nexport { useBreadcrumbItem_unstable, useBreadcrumbItemBase_unstable } from './useBreadcrumbItem';\nexport { breadcrumbItemClassNames, useBreadcrumbItemStyles_unstable } from './useBreadcrumbItemStyles.styles';\n"],"names":["BreadcrumbItem","renderBreadcrumbItem_unstable","useBreadcrumbItem_unstable","useBreadcrumbItemBase_unstable","breadcrumbItemClassNames","useBreadcrumbItemStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8BAAc;;;eAUdI,uDAAwB;;;eAFxBH,mDAA6B;;;eACDE,iDAA8B;;;eAChCE,+DAAgC;;;eAD1DH,6CAA0B;;;gCATJ,mBAAmB;sCAQJ,yBAAyB;mCACI,sBAAsB;+CACtB,mCAAmC"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/BreadcrumbItem/renderBreadcrumbItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { BreadcrumbItemState, BreadcrumbItemSlots } from './BreadcrumbItem.types';\n\n/**\n * Render the final JSX of BreadcrumbItem\n */\nexport const renderBreadcrumbItem_unstable = (state: BreadcrumbItemState): JSXElement => {\n assertSlots<BreadcrumbItemSlots>(state);\n\n return <state.root>{state.root.children}</state.root>;\n};\n"],"names":["assertSlots","renderBreadcrumbItem_unstable","state","root","children"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAQjD,MAAMC,gCAAgC,CAACC;QAC5CF,2BAAAA,EAAiCE;IAEjC,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA;kBAAED,MAAMC,IAAI,CAACC,QAAQ;;AACzC,EAAE"}

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, {
useBreadcrumbItemBase_unstable: function() {
return useBreadcrumbItemBase_unstable;
},
useBreadcrumbItem_unstable: function() {
return useBreadcrumbItem_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 _BreadcrumbContext = require("../Breadcrumb/BreadcrumbContext");
const useBreadcrumbItem_unstable = (props, ref)=>{
const { size } = (0, _BreadcrumbContext.useBreadcrumbContext_unstable)();
const state = useBreadcrumbItemBase_unstable(props, ref);
return {
...state,
size
};
};
const useBreadcrumbItemBase_unstable = (props, ref)=>{
return {
components: {
root: 'li'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('li', {
ref,
...props
}), {
elementType: 'li'
})
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/BreadcrumbItem/useBreadcrumbItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type {\n BreadcrumbItemBaseProps,\n BreadcrumbItemBaseState,\n BreadcrumbItemProps,\n BreadcrumbItemState,\n} from './BreadcrumbItem.types';\nimport { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';\n\n/**\n * Create the state required to render BreadcrumbItem.\n *\n * The returned state can be modified with hooks such as useBreadcrumbItemStyles_unstable,\n * before being passed to renderBreadcrumbItem_unstable.\n *\n * @param props - props from this instance of BreadcrumbItem\n * @param ref - reference to root HTMLElement of BreadcrumbItem\n */\nexport const useBreadcrumbItem_unstable = (\n props: BreadcrumbItemProps,\n ref: React.Ref<HTMLLIElement>,\n): BreadcrumbItemState => {\n const { size } = useBreadcrumbContext_unstable();\n const state = useBreadcrumbItemBase_unstable(props, ref);\n\n return {\n ...state,\n size,\n };\n};\n\n/**\n * Base hook for BreadcrumbItem component, which manages state related to slots structure\n * without design props. Note: size is provided via BreadcrumbContext in the full hook.\n *\n * @param props - props from this instance of BreadcrumbItem\n * @param ref - reference to root HTMLElement of BreadcrumbItem\n */\nexport const useBreadcrumbItemBase_unstable = (\n props: BreadcrumbItemBaseProps,\n ref: React.Ref<HTMLLIElement>,\n): BreadcrumbItemBaseState => {\n return {\n components: { root: 'li' },\n root: slot.always(\n getIntrinsicElementProps('li', {\n ref,\n ...props,\n }),\n { elementType: 'li' },\n ),\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useBreadcrumbContext_unstable","useBreadcrumbItem_unstable","props","ref","size","state","useBreadcrumbItemBase_unstable","components","root","always","elementType"],"mappings":"AAAA;;;;;;;;;;;;IAyCaS,8BAAAA;;;8BApBAL;;;;;iEAnBU,QAAQ;gCACgB,4BAA4B;mCAO7B,kCAAkC;AAWzE,MAAMA,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,OAAGJ,gDAAAA;IACjB,MAAMK,QAAQC,+BAA+BJ,OAAOC;IAEpD,OAAO;QACL,GAAGE,KAAK;QACRD;IACF;AACF,EAAE;AASK,uCAAuC,CAC5CF,OACAC;IAEA,OAAO;QACLI,YAAY;YAAEC,MAAM;QAAK;QACzBA,MAAMT,oBAAAA,CAAKU,MAAM,KACfX,wCAAAA,EAAyB,MAAM;YAC7BK;YACA,GAAGD,KAAK;QACV,IACA;YAAEQ,aAAa;QAAK;IAExB;AACF,EAAE"}

View File

@@ -0,0 +1,32 @@
'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, {
breadcrumbItemClassNames: function() {
return breadcrumbItemClassNames;
},
useBreadcrumbItemStyles_unstable: function() {
return useBreadcrumbItemStyles_unstable;
}
});
const _react = require("@griffel/react");
const breadcrumbItemClassNames = {
root: 'fui-BreadcrumbItem'
};
const useBreadcrumbItemResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1tl60rs", null, [
".r1tl60rs{display:flex;align-items:center;color:var(--colorNeutralForeground2);box-sizing:border-box;text-wrap:nowrap;}"
]);
const useBreadcrumbItemStyles_unstable = (state)=>{
'use no memo';
const resetStyles = useBreadcrumbItemResetStyles();
state.root.className = (0, _react.mergeClasses)(breadcrumbItemClassNames.root, resetStyles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useBreadcrumbItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const breadcrumbItemClassNames = {\n root: 'fui-BreadcrumbItem'\n};\nconst useBreadcrumbItemResetStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n color: tokens.colorNeutralForeground2,\n boxSizing: 'border-box',\n textWrap: 'nowrap'\n});\n/**\n * Apply styling to the BreadcrumbItem slots based on the state\n */ export const useBreadcrumbItemStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useBreadcrumbItemResetStyles();\n state.root.className = mergeClasses(breadcrumbItemClassNames.root, resetStyles, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","tokens","breadcrumbItemClassNames","root","useBreadcrumbItemResetStyles","useBreadcrumbItemStyles_unstable","state","resetStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;4BAGyB;;;oCAYY;;;;uBAdH,gBAAgB;AAEvD,MAAMG,2BAA2B;IACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,4BAA4B,GAAA,WAAA,OAAGL,oBAAA,EAAA,YAAA,MAAA;IAAA;CAMpC,CAAC;AAGS,MAAMM,oCAAoCC,KAAK,IAAG;IACzD,aAAa;IACb,MAAMC,WAAW,GAAGH,4BAA4B,CAAC,CAAC;IAClDE,KAAK,CAACH,IAAI,CAACK,SAAS,OAAGR,mBAAY,EAACE,wBAAwB,CAACC,IAAI,EAAEI,WAAW,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;IACrG,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,37 @@
'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, {
breadcrumbItemClassNames: function() {
return breadcrumbItemClassNames;
},
useBreadcrumbItemStyles_unstable: function() {
return useBreadcrumbItemStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const breadcrumbItemClassNames = {
root: 'fui-BreadcrumbItem'
};
const useBreadcrumbItemResetStyles = (0, _react.makeResetStyles)({
display: 'flex',
alignItems: 'center',
color: _reacttheme.tokens.colorNeutralForeground2,
boxSizing: 'border-box',
textWrap: 'nowrap'
});
const useBreadcrumbItemStyles_unstable = (state)=>{
'use no memo';
const resetStyles = useBreadcrumbItemResetStyles();
state.root.className = (0, _react.mergeClasses)(breadcrumbItemClassNames.root, resetStyles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { BreadcrumbItemSlots, BreadcrumbItemState } from './BreadcrumbItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const breadcrumbItemClassNames: SlotClassNames<BreadcrumbItemSlots> = {\n root: 'fui-BreadcrumbItem',\n};\n\nconst useBreadcrumbItemResetStyles = makeResetStyles({\n display: 'flex',\n alignItems: 'center',\n color: tokens.colorNeutralForeground2,\n boxSizing: 'border-box',\n textWrap: 'nowrap',\n});\n\n/**\n * Apply styling to the BreadcrumbItem slots based on the state\n */\nexport const useBreadcrumbItemStyles_unstable = (state: BreadcrumbItemState): BreadcrumbItemState => {\n 'use no memo';\n\n const resetStyles = useBreadcrumbItemResetStyles();\n\n state.root.className = mergeClasses(breadcrumbItemClassNames.root, resetStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","breadcrumbItemClassNames","root","useBreadcrumbItemResetStyles","display","alignItems","color","colorNeutralForeground2","boxSizing","textWrap","useBreadcrumbItemStyles_unstable","state","resetStyles","className"],"mappings":"AAAA;;;;;;;;;;;;4BAOaG;;;oCAeAS;;;;uBApBiC,iBAAiB;4BAGxC,wBAAwB;AAExC,MAAMT,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,mCAA+BL,sBAAAA,EAAgB;IACnDM,SAAS;IACTC,YAAY;IACZC,OAAON,kBAAAA,CAAOO,uBAAuB;IACrCC,WAAW;IACXC,UAAU;AACZ;AAKO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,cAAcT;IAEpBQ,MAAMT,IAAI,CAACW,SAAS,OAAGd,mBAAAA,EAAaE,yBAAyBC,IAAI,EAAEU,aAAaD,MAAMT,IAAI,CAACW,SAAS;IAEpG,OAAOF;AACT,EAAE"}