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, "MenuGroup", {
enumerable: true,
get: function() {
return MenuGroup;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useMenuGroup = require("./useMenuGroup");
const _renderMenuGroup = require("./renderMenuGroup");
const _useMenuGroupContextValues = require("./useMenuGroupContextValues");
const _useMenuGroupStylesstyles = require("./useMenuGroupStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const MenuGroup = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useMenuGroup.useMenuGroup_unstable)(props, ref);
const contextValues = (0, _useMenuGroupContextValues.useMenuGroupContextValues_unstable)(state);
(0, _useMenuGroupStylesstyles.useMenuGroupStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useMenuGroupStyles_unstable')(state);
return (0, _renderMenuGroup.renderMenuGroup_unstable)(state, contextValues);
});
MenuGroup.displayName = 'MenuGroup';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroup/MenuGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuGroup_unstable } from './useMenuGroup';\nimport { renderMenuGroup_unstable } from './renderMenuGroup';\nimport { useMenuGroupContextValues_unstable } from './useMenuGroupContextValues';\nimport type { MenuGroupProps } from './MenuGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useMenuGroupStyles_unstable } from './useMenuGroupStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled MenuGroup, using the `useMenuGroup_unstable` hook.\n */\nexport const MenuGroup: ForwardRefComponent<MenuGroupProps> = React.forwardRef((props, ref) => {\n const state = useMenuGroup_unstable(props, ref);\n const contextValues = useMenuGroupContextValues_unstable(state);\n\n useMenuGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useMenuGroupStyles_unstable')(state);\n\n return renderMenuGroup_unstable(state, contextValues);\n});\n\nMenuGroup.displayName = 'MenuGroup';\n"],"names":["React","useMenuGroup_unstable","renderMenuGroup_unstable","useMenuGroupContextValues_unstable","useMenuGroupStyles_unstable","useCustomStyleHook_unstable","MenuGroup","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;8BACO,iBAAiB;iCACd,oBAAoB;2CACV,8BAA8B;0CAGrC,8BAA8B;qCAC9B,kCAAkC;AAKvE,MAAMM,YAAAA,WAAAA,GAAiDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,YAAQT,mCAAAA,EAAsBO,OAAOC;IAC3C,MAAME,oBAAgBR,6DAAAA,EAAmCO;QAEzDN,qDAAAA,EAA4BM;QAE5BL,gDAAAA,EAA4B,+BAA+BK;IAE3D,WAAOR,yCAAAA,EAAyBQ,OAAOC;AACzC,GAAG;AAEHL,UAAUM,WAAW,GAAG"}

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroup/MenuGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { MenuGroupContextValue } from '../../contexts/menuGroupContext';\n\nexport type MenuGroupSlots = {\n root: Slot<'div'>;\n};\n\nexport type MenuGroupProps = ComponentProps<MenuGroupSlots>;\n\nexport type MenuGroupState = ComponentState<MenuGroupSlots> & {\n /**\n * id applied to the DOM element of `MenuGroupHeader`\n */\n headerId: string;\n};\n\nexport type MenuGroupContextValues = {\n menuGroup: MenuGroupContextValue;\n};\n"],"names":[],"mappings":""}

View File

@@ -0,0 +1,35 @@
"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, {
MenuGroup: function() {
return _MenuGroup.MenuGroup;
},
menuGroupClassNames: function() {
return _useMenuGroupStylesstyles.menuGroupClassNames;
},
renderMenuGroup_unstable: function() {
return _renderMenuGroup.renderMenuGroup_unstable;
},
useMenuGroupContextValues_unstable: function() {
return _useMenuGroupContextValues.useMenuGroupContextValues_unstable;
},
useMenuGroupStyles_unstable: function() {
return _useMenuGroupStylesstyles.useMenuGroupStyles_unstable;
},
useMenuGroup_unstable: function() {
return _useMenuGroup.useMenuGroup_unstable;
}
});
const _MenuGroup = require("./MenuGroup");
const _renderMenuGroup = require("./renderMenuGroup");
const _useMenuGroup = require("./useMenuGroup");
const _useMenuGroupContextValues = require("./useMenuGroupContextValues");
const _useMenuGroupStylesstyles = require("./useMenuGroupStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroup/index.ts"],"sourcesContent":["export type { MenuGroupContextValues, MenuGroupProps, MenuGroupSlots, MenuGroupState } from './MenuGroup.types';\nexport { MenuGroup } from './MenuGroup';\nexport { renderMenuGroup_unstable } from './renderMenuGroup';\nexport { useMenuGroup_unstable } from './useMenuGroup';\nexport { useMenuGroupContextValues_unstable } from './useMenuGroupContextValues';\nexport { menuGroupClassNames, useMenuGroupStyles_unstable } from './useMenuGroupStyles.styles';\n"],"names":["MenuGroup","renderMenuGroup_unstable","useMenuGroup_unstable","useMenuGroupContextValues_unstable","menuGroupClassNames","useMenuGroupStyles_unstable"],"mappings":";;;;;;;;;;;;eACSA,oBAAS;;;eAITI,6CAAmB;;;eAHnBH,yCAAwB;;;eAExBE,6DAAkC;;;eACbE,qDAA2B;;;eAFhDH,mCAAqB;;;2BAFJ,cAAc;iCACC,oBAAoB;8BACvB,iBAAiB;2CACJ,8BAA8B;0CAChB,8BAA8B"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroup/renderMenuGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { MenuGroupContextValues, MenuGroupSlots, MenuGroupState } from './MenuGroup.types';\nimport { MenuGroupContextProvider } from '../../contexts/menuGroupContext';\n\n/**\n * Redefine the render function to add slots. Reuse the menugroup structure but add\n * slots to children.\n */\nexport const renderMenuGroup_unstable = (state: MenuGroupState, contextValues: MenuGroupContextValues): JSXElement => {\n assertSlots<MenuGroupSlots>(state);\n\n return (\n <MenuGroupContextProvider value={contextValues.menuGroup}>\n <state.root />\n </MenuGroupContextProvider>\n );\n};\n"],"names":["assertSlots","MenuGroupContextProvider","renderMenuGroup_unstable","state","contextValues","value","menuGroup","root"],"mappings":";;;;+BAWaE;;;;;;4BAVb,gDAAiD;gCACrB,4BAA4B;kCAGf,kCAAkC;AAMpE,iCAAiC,CAACC,OAAuBC;QAC9DJ,2BAAAA,EAA4BG;IAE5B,OAAA,WAAA,OACE,eAAA,EAACF,0CAAAA,EAAAA;QAAyBI,OAAOD,cAAcE,SAAS;kBACtD,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA,CAAA;;AAGjB,EAAE"}

View File

@@ -0,0 +1,33 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMenuGroup_unstable", {
enumerable: true,
get: function() {
return useMenuGroup_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");
function useMenuGroup_unstable(props, ref) {
const headerId = (0, _reactutilities.useId)('menu-group');
return {
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: ref,
'aria-labelledby': headerId,
role: 'group',
...props
}), {
elementType: 'div'
}),
headerId
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroup/useMenuGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport { MenuGroupProps, MenuGroupState } from './MenuGroup.types';\n\n/**\n * Given user props, returns state and render function for a MenuGroup.\n */\nexport function useMenuGroup_unstable(props: MenuGroupProps, ref: React.Ref<HTMLElement>): MenuGroupState {\n const headerId = useId('menu-group');\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n 'aria-labelledby': headerId,\n role: 'group',\n ...props,\n }),\n { elementType: 'div' },\n ),\n headerId,\n };\n}\n"],"names":["React","getIntrinsicElementProps","useId","slot","useMenuGroup_unstable","props","ref","headerId","components","root","always","role","elementType"],"mappings":";;;;+BAOgBI;;;;;;;iEAPO,QAAQ;gCACuB,4BAA4B;AAM3E,+BAA+BC,KAAqB,EAAEC,GAA2B;IACtF,MAAMC,eAAWL,qBAAAA,EAAM;IAEvB,OAAO;QACLM,YAAY;YACVC,MAAM;QACR;QACAA,MAAMN,oBAAAA,CAAKO,MAAM,KACfT,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKA;YACL,mBAAmBC;YACnBI,MAAM;YACN,GAAGN,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBL;IACF;AACF"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMenuGroupContextValues_unstable", {
enumerable: true,
get: function() {
return useMenuGroupContextValues_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
function useMenuGroupContextValues_unstable(state) {
const { headerId } = state;
const menuGroup = _react.useMemo(()=>({
headerId
}), [
headerId
]);
return {
menuGroup
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroup/useMenuGroupContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { MenuGroupContextValues, MenuGroupState } from './MenuGroup.types';\n\nexport function useMenuGroupContextValues_unstable(state: MenuGroupState): MenuGroupContextValues {\n const { headerId } = state;\n const menuGroup = React.useMemo(() => ({ headerId }), [headerId]);\n\n return { menuGroup };\n}\n"],"names":["React","useMenuGroupContextValues_unstable","state","headerId","menuGroup","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,SAASC,mCAAmCC,KAAqB;IACtE,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,YAAYJ,OAAMK,OAAO,CAAC,IAAO,CAAA;YAAEF;SAAS,CAAA,EAAI;QAACA;KAAS;IAEhE,OAAO;QAAEC;IAAU;AACrB"}

View File

@@ -0,0 +1,27 @@
"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, {
menuGroupClassNames: function() {
return menuGroupClassNames;
},
useMenuGroupStyles_unstable: function() {
return useMenuGroupStyles_unstable;
}
});
const _react = require("@griffel/react");
const menuGroupClassNames = {
root: 'fui-MenuGroup'
};
const useMenuGroupStyles_unstable = (state)=>{
'use no memo';
state.root.className = (0, _react.mergeClasses)(menuGroupClassNames.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useMenuGroupStyles.styles.js"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nexport const menuGroupClassNames = {\n root: 'fui-MenuGroup'\n};\nexport const useMenuGroupStyles_unstable = (state)=>{\n 'use no memo';\n state.root.className = mergeClasses(menuGroupClassNames.root, state.root.className);\n return state;\n};\n"],"names":["mergeClasses","menuGroupClassNames","root","useMenuGroupStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IACaC,mBAAmB;;;+BAGQ;;;;uBAJX,gBAAgB;AACtC,4BAA4B;IAC/BC,IAAI,EAAE;AACV,CAAC;AACM,MAAMC,8BAA+BC,KAAK,IAAG;IAChD,aAAa;IACbA,KAAK,CAACF,IAAI,CAACG,SAAS,OAAGL,mBAAY,EAACC,mBAAmB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;IACnF,OAAOD,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,27 @@
"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, {
menuGroupClassNames: function() {
return menuGroupClassNames;
},
useMenuGroupStyles_unstable: function() {
return useMenuGroupStyles_unstable;
}
});
const _react = require("@griffel/react");
const menuGroupClassNames = {
root: 'fui-MenuGroup'
};
const useMenuGroupStyles_unstable = (state)=>{
'use no memo';
state.root.className = (0, _react.mergeClasses)(menuGroupClassNames.root, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MenuGroup/useMenuGroupStyles.styles.ts"],"sourcesContent":["import type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses } from '@griffel/react';\nimport type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';\n\nexport const menuGroupClassNames: SlotClassNames<MenuGroupSlots> = {\n root: 'fui-MenuGroup',\n};\n\nexport const useMenuGroupStyles_unstable = (state: MenuGroupState): MenuGroupState => {\n 'use no memo';\n\n state.root.className = mergeClasses(menuGroupClassNames.root, state.root.className);\n\n return state;\n};\n"],"names":["mergeClasses","menuGroupClassNames","root","useMenuGroupStyles_unstable","state","className"],"mappings":";;;;;;;;;;;IAIaC,mBAAAA;;;+BAIAE;;;;uBAPgB,iBAAiB;AAGvC,4BAA4D;IACjED,MAAM;AACR,EAAE;AAEK,MAAMC,8BAA8B,CAACC;IAC1C;IAEAA,MAAMF,IAAI,CAACG,SAAS,OAAGL,mBAAAA,EAAaC,oBAAoBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAElF,OAAOD;AACT,EAAE"}