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, "TeachingPopoverSurface", {
enumerable: true,
get: function() {
return TeachingPopoverSurface;
}
});
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 _useTeachingPopoverSurface = require("./useTeachingPopoverSurface");
const _useTeachingPopoverSurfaceStylesstyles = require("./useTeachingPopoverSurfaceStyles.styles");
const _renderTeachingPopoverSurface = require("./renderTeachingPopoverSurface");
const TeachingPopoverSurface = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useTeachingPopoverSurface.useTeachingPopoverSurface_unstable)(props, ref);
(0, _useTeachingPopoverSurfaceStylesstyles.useTeachingPopoverSurfaceStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useTeachingPopoverSurfaceStyles_unstable')(state);
return (0, _renderTeachingPopoverSurface.renderTeachingPopoverSurface_unstable)(state);
});
TeachingPopoverSurface.displayName = 'TeachingPopoverSurface';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverSurface/TeachingPopoverSurface.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';\nimport { TeachingPopoverSurfaceProps } from './TeachingPopoverSurface.types';\nimport { useTeachingPopoverSurface_unstable } from './useTeachingPopoverSurface';\nimport { useTeachingPopoverSurfaceStyles_unstable } from './useTeachingPopoverSurfaceStyles.styles';\nimport { renderTeachingPopoverSurface_unstable } from './renderTeachingPopoverSurface';\n\n/**\n * TeachingPopoverSurface component renders react children in a positioned box\n *\n * TeachingPopoverSurface is a direct extension of PopoverSurface, with it's own styling context hooks available.\n */\nexport const TeachingPopoverSurface: ForwardRefComponent<TeachingPopoverSurfaceProps> = React.forwardRef(\n (props, ref) => {\n const state = useTeachingPopoverSurface_unstable(props, ref);\n\n useTeachingPopoverSurfaceStyles_unstable(state);\n\n useCustomStyleHook_unstable('useTeachingPopoverSurfaceStyles_unstable')(state);\n\n return renderTeachingPopoverSurface_unstable(state);\n },\n);\n\nTeachingPopoverSurface.displayName = 'TeachingPopoverSurface';\n"],"names":["React","useCustomStyleHook_unstable","useTeachingPopoverSurface_unstable","useTeachingPopoverSurfaceStyles_unstable","renderTeachingPopoverSurface_unstable","TeachingPopoverSurface","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;2CAE3B,8BAA8B;uDACxB,2CAA2C;8CAC9C,iCAAiC;AAOhF,MAAMK,yBAAAA,WAAAA,GAA2EL,OAAMM,UAAU,CACtG,CAACC,OAAOC;IACN,MAAMC,YAAQP,6DAAAA,EAAmCK,OAAOC;QAExDL,+EAAAA,EAAyCM;QAEzCR,gDAAAA,EAA4B,4CAA4CQ;IAExE,WAAOL,mEAAAA,EAAsCK;AAC/C,GACA;AAEFJ,uBAAuBK,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverSurface/TeachingPopoverSurface.types.ts"],"sourcesContent":["import type { ComponentProps } from '@fluentui/react-utilities';\nimport { PopoverSurfaceState } from '@fluentui/react-popover';\nimport { PopoverSurfaceSlots } from '@fluentui/react-popover';\n\n/**\n * TeachingPopoverSurface Props\n */\nexport type TeachingPopoverSurfaceProps = ComponentProps<TeachingPopoverSurfaceSlots>;\n\n/**\n * Names of the slots in TeachingPopoverSurface\n */\nexport type TeachingPopoverSurfaceSlots = PopoverSurfaceSlots;\n\n/**\n * TeachingPopoverSurface State\n */\nexport type TeachingPopoverSurfaceState = PopoverSurfaceState;\n"],"names":[],"mappings":"AAcA;;CAEC,GACD,WAA8D"}

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, {
TeachingPopoverSurface: function() {
return _TeachingPopoverSurface.TeachingPopoverSurface;
},
renderTeachingPopoverSurface_unstable: function() {
return _renderTeachingPopoverSurface.renderTeachingPopoverSurface_unstable;
},
teachingPopoverSurfaceClassNames: function() {
return _useTeachingPopoverSurfaceStylesstyles.teachingPopoverSurfaceClassNames;
},
useTeachingPopoverSurfaceStyles_unstable: function() {
return _useTeachingPopoverSurfaceStylesstyles.useTeachingPopoverSurfaceStyles_unstable;
},
useTeachingPopoverSurface_unstable: function() {
return _useTeachingPopoverSurface.useTeachingPopoverSurface_unstable;
}
});
const _TeachingPopoverSurface = require("./TeachingPopoverSurface");
const _renderTeachingPopoverSurface = require("./renderTeachingPopoverSurface");
const _useTeachingPopoverSurface = require("./useTeachingPopoverSurface");
const _useTeachingPopoverSurfaceStylesstyles = require("./useTeachingPopoverSurfaceStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverSurface/index.ts"],"sourcesContent":["export { TeachingPopoverSurface } from './TeachingPopoverSurface';\nexport type {\n TeachingPopoverSurfaceProps,\n TeachingPopoverSurfaceSlots,\n TeachingPopoverSurfaceState,\n} from './TeachingPopoverSurface.types';\nexport { renderTeachingPopoverSurface_unstable } from './renderTeachingPopoverSurface';\nexport { useTeachingPopoverSurface_unstable } from './useTeachingPopoverSurface';\nexport {\n teachingPopoverSurfaceClassNames,\n useTeachingPopoverSurfaceStyles_unstable,\n} from './useTeachingPopoverSurfaceStyles.styles';\n"],"names":["TeachingPopoverSurface","renderTeachingPopoverSurface_unstable","useTeachingPopoverSurface_unstable","teachingPopoverSurfaceClassNames","useTeachingPopoverSurfaceStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,8CAAsB;;;eAMtBC,mEAAqC;;;eAG5CE,uEAAgC;;;eAChCC,+EAAwC;;;eAHjCF,6DAAkC;;;wCAPJ,2BAA2B;8CAMZ,iCAAiC;2CACpC,8BAA8B;uDAI1E,2CAA2C"}

View File

@@ -0,0 +1,17 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderTeachingPopoverSurface_unstable", {
enumerable: true,
get: function() {
return renderTeachingPopoverSurface_unstable;
}
});
const _reactutilities = require("@fluentui/react-utilities");
const _reactpopover = require("@fluentui/react-popover");
const renderTeachingPopoverSurface_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
// For now we are just extending the base surface
return (0, _reactpopover.renderPopoverSurface_unstable)(state);
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverSurface/renderTeachingPopoverSurface.tsx"],"sourcesContent":["import type { TeachingPopoverSurfaceSlots, TeachingPopoverSurfaceState } from './TeachingPopoverSurface.types';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { renderPopoverSurface_unstable } from '@fluentui/react-popover';\n\n/**\n * Render the final JSX of PopoverSurface\n */\nexport const renderTeachingPopoverSurface_unstable = (state: TeachingPopoverSurfaceState): JSXElement => {\n assertSlots<TeachingPopoverSurfaceSlots>(state);\n\n // For now we are just extending the base surface\n return renderPopoverSurface_unstable(state);\n};\n"],"names":["assertSlots","renderPopoverSurface_unstable","renderTeachingPopoverSurface_unstable","state"],"mappings":";;;;;;;;;;gCAC4B,4BAA4B;8BAEV,0BAA0B;AAKjE,MAAME,wCAAwC,CAACC;QACpDH,2BAAAA,EAAyCG;IAEzC,iDAAiD;IACjD,WAAOF,2CAAAA,EAA8BE;AACvC,EAAE"}

View File

@@ -0,0 +1,18 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useTeachingPopoverSurface_unstable", {
enumerable: true,
get: function() {
return useTeachingPopoverSurface_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactpopover = require("@fluentui/react-popover");
const useTeachingPopoverSurface_unstable = (props, ref)=>{
const state = (0, _reactpopover.usePopoverSurface_unstable)(props, ref);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverSurface/useTeachingPopoverSurface.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { TeachingPopoverSurfaceProps, TeachingPopoverSurfaceState } from './TeachingPopoverSurface.types';\nimport { usePopoverSurface_unstable } from '@fluentui/react-popover';\n\n/**\n * Create the state required to render TeachingPopoverSurface.\n *\n * The returned state can be modified with hooks such as useTeachingPopoverSurfaceStyles_unstable,\n * before being passed to renderTeachingPopoverSurface_unstable.\n *\n * @param props - props from this instance of TeachingPopoverSurface\n * @param ref - reference to root HTMLDivElement of TeachingPopoverSurface\n */\nexport const useTeachingPopoverSurface_unstable = (\n props: TeachingPopoverSurfaceProps,\n ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverSurfaceState => {\n const state = usePopoverSurface_unstable(props, ref);\n\n return state;\n};\n"],"names":["React","usePopoverSurface_unstable","useTeachingPopoverSurface_unstable","props","ref","state"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;8BAEY,0BAA0B;AAW9D,MAAME,qCAAqC,CAChDC,OACAC;IAEA,MAAMC,YAAQJ,wCAAAA,EAA2BE,OAAOC;IAEhD,OAAOC;AACT,EAAE"}

View File

@@ -0,0 +1,65 @@
'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, {
teachingPopoverSurfaceClassNames: function() {
return teachingPopoverSurfaceClassNames;
},
useTeachingPopoverSurfaceStyles_unstable: function() {
return useTeachingPopoverSurfaceStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reactpopover = require("@fluentui/react-popover");
const teachingPopoverSurfaceClassNames = {
root: 'fui-TeachingPopoverSurface'
};
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f23zza1",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1kijzfu",
Bf4jedk: "f14hp5dx",
B7ck84d: "f1ewtqcl"
}
}, {
d: [
[
".f23zza1{padding:var(--spacingVerticalL) var(--spacingVerticalL);}",
{
p: -1
}
],
[
".f1kijzfu{border-radius:var(--borderRadiusXLarge);}",
{
p: -1
}
],
".f14hp5dx{min-width:320px;}",
".f1ewtqcl{box-sizing:border-box;}"
]
});
const useTeachingPopoverSurfaceStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
// Make sure to merge teaching bubble surface prior to popover styles
state.root.className = (0, _react.mergeClasses)(teachingPopoverSurfaceClassNames.root, styles.root, state.root.className);
const updatedState = (0, _reactpopover.usePopoverSurfaceStyles_unstable)(state);
return updatedState;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useTeachingPopoverSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { usePopoverSurfaceStyles_unstable } from '@fluentui/react-popover';\nimport { tokens } from '@fluentui/react-theme';\nexport const teachingPopoverSurfaceClassNames = {\n root: 'fui-TeachingPopoverSurface'\n};\nconst useStyles = makeStyles({\n root: {\n padding: `${tokens.spacingVerticalL} ${tokens.spacingVerticalL}`,\n borderRadius: tokens.borderRadiusXLarge,\n minWidth: '320px',\n boxSizing: 'border-box'\n }\n});\n/**\n * Apply styling to the TeachingPopoverSurface slots based on the state\n */ export const useTeachingPopoverSurfaceStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n // Make sure to merge teaching bubble surface prior to popover styles\n state.root.className = mergeClasses(teachingPopoverSurfaceClassNames.root, styles.root, state.root.className);\n const updatedState = usePopoverSurfaceStyles_unstable(state);\n return updatedState;\n};\n"],"names":["__styles","mergeClasses","usePopoverSurfaceStyles_unstable","tokens","teachingPopoverSurfaceClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bf4jedk","B7ck84d","d","p","useTeachingPopoverSurfaceStyles_unstable","state","styles","className","updatedState"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICI,gCAAgC;;;IAa5BiB,wCAAwC;;;;uBAhBhB,gBAAgB;8BACR,yBAAyB;AAEnE,yCAAyC;IAC5ChB,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAK,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;KAAA;AAAA,CAOjB,CAAC;AAGS,kDAAkDE,KAAK,IAAG;IACjE,aAAa;IACb,MAAMC,MAAM,GAAGjB,SAAS,CAAC,CAAC;IAC1B,qEAAA;IACAgB,KAAK,CAACjB,IAAI,CAACmB,SAAS,OAAGvB,mBAAY,EAACG,gCAAgC,CAACC,IAAI,EAAEkB,MAAM,CAAClB,IAAI,EAAEiB,KAAK,CAACjB,IAAI,CAACmB,SAAS,CAAC;IAC7G,MAAMC,YAAY,OAAGvB,8CAAgC,EAACoB,KAAK,CAAC;IAC5D,OAAOG,YAAY;AACvB,CAAC"}

View File

@@ -0,0 +1,41 @@
'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, {
teachingPopoverSurfaceClassNames: function() {
return teachingPopoverSurfaceClassNames;
},
useTeachingPopoverSurfaceStyles_unstable: function() {
return useTeachingPopoverSurfaceStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reactpopover = require("@fluentui/react-popover");
const _reacttheme = require("@fluentui/react-theme");
const teachingPopoverSurfaceClassNames = {
root: 'fui-TeachingPopoverSurface'
};
const useStyles = (0, _react.makeStyles)({
root: {
padding: `${_reacttheme.tokens.spacingVerticalL} ${_reacttheme.tokens.spacingVerticalL}`,
borderRadius: _reacttheme.tokens.borderRadiusXLarge,
minWidth: '320px',
boxSizing: 'border-box'
}
});
const useTeachingPopoverSurfaceStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
// Make sure to merge teaching bubble surface prior to popover styles
state.root.className = (0, _react.mergeClasses)(teachingPopoverSurfaceClassNames.root, styles.root, state.root.className);
const updatedState = (0, _reactpopover.usePopoverSurfaceStyles_unstable)(state);
return updatedState;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/TeachingPopoverSurface/useTeachingPopoverSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { TeachingPopoverSurfaceSlots, TeachingPopoverSurfaceState } from './TeachingPopoverSurface.types';\nimport { usePopoverSurfaceStyles_unstable } from '@fluentui/react-popover';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const teachingPopoverSurfaceClassNames: SlotClassNames<TeachingPopoverSurfaceSlots> = {\n root: 'fui-TeachingPopoverSurface',\n};\n\nconst useStyles = makeStyles({\n root: {\n padding: `${tokens.spacingVerticalL} ${tokens.spacingVerticalL}`,\n borderRadius: tokens.borderRadiusXLarge,\n minWidth: '320px',\n boxSizing: 'border-box',\n },\n});\n\n/**\n * Apply styling to the TeachingPopoverSurface slots based on the state\n */\nexport const useTeachingPopoverSurfaceStyles_unstable = (\n state: TeachingPopoverSurfaceState,\n): TeachingPopoverSurfaceState => {\n 'use no memo';\n\n const styles = useStyles();\n\n // Make sure to merge teaching bubble surface prior to popover styles\n state.root.className = mergeClasses(teachingPopoverSurfaceClassNames.root, styles.root, state.root.className);\n\n const updatedState = usePopoverSurfaceStyles_unstable(state);\n\n return updatedState;\n};\n"],"names":["makeStyles","mergeClasses","usePopoverSurfaceStyles_unstable","tokens","teachingPopoverSurfaceClassNames","root","useStyles","padding","spacingVerticalL","borderRadius","borderRadiusXLarge","minWidth","boxSizing","useTeachingPopoverSurfaceStyles_unstable","state","styles","className","updatedState"],"mappings":"AAAA;;;;;;;;;;;;IAQaI,gCAAAA;;;4CAgBAS;eAAAA;;;uBAtB4B,iBAAiB;8BAGT,0BAA0B;4BACpD,wBAAwB;AAExC,yCAAsF;IAC3FR,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BK,MAAM;QACJE,SAAS,GAAGJ,kBAAAA,CAAOK,gBAAgB,CAAC,CAAC,EAAEL,kBAAAA,CAAOK,gBAAgB,EAAE;QAChEC,cAAcN,kBAAAA,CAAOO,kBAAkB;QACvCC,UAAU;QACVC,WAAW;IACb;AACF;AAKO,iDAAiD,CACtDE;IAEA;IAEA,MAAMC,SAAST;IAEf,qEAAqE;IACrEQ,MAAMT,IAAI,CAACW,SAAS,OAAGf,mBAAAA,EAAaG,iCAAiCC,IAAI,EAAEU,OAAOV,IAAI,EAAES,MAAMT,IAAI,CAACW,SAAS;IAE5G,MAAMC,mBAAef,8CAAAA,EAAiCY;IAEtD,OAAOG;AACT,EAAE"}