feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-menu/lib/components/MenuGroup/MenuGroup.js

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+import { useMenuGroup_unstable } from './useMenuGroup';
+import { renderMenuGroup_unstable } from './renderMenuGroup';
+import { useMenuGroupContextValues_unstable } from './useMenuGroupContextValues';
+import { useMenuGroupStyles_unstable } from './useMenuGroupStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Define a styled MenuGroup, using the `useMenuGroup_unstable` hook.
+ */ export const MenuGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useMenuGroup_unstable(props, ref);
+    const contextValues = useMenuGroupContextValues_unstable(state);
+    useMenuGroupStyles_unstable(state);
+    useCustomStyleHook_unstable('useMenuGroupStyles_unstable')(state);
+    return renderMenuGroup_unstable(state, contextValues);
+});
+MenuGroup.displayName = 'MenuGroup';

node_modules/@fluentui/react-menu/lib/components/MenuGroup/MenuGroup.js.map

@@ -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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,kCAAkC,QAAQ,8BAA8B;AAGjF,SAASC,2BAA2B,QAAQ,8BAA8B;AAC1E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,0BAAiDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQT,sBAAsBO,OAAOC;IAC3C,MAAME,gBAAgBR,mCAAmCO;IAEzDN,4BAA4BM;IAE5BL,4BAA4B,+BAA+BK;IAE3D,OAAOR,yBAAyBQ,OAAOC;AACzC,GAAG;AAEHL,UAAUM,WAAW,GAAG"}

node_modules/@fluentui/react-menu/lib/components/MenuGroup/MenuGroup.types.js

@@ -0,0 +1 @@
+export { };

node_modules/@fluentui/react-menu/lib/components/MenuGroup/MenuGroup.types.js.map

@@ -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":"AAgBA,WAEE"}

node_modules/@fluentui/react-menu/lib/components/MenuGroup/index.js

@@ -0,0 +1,5 @@
+export { MenuGroup } from './MenuGroup';
+export { renderMenuGroup_unstable } from './renderMenuGroup';
+export { useMenuGroup_unstable } from './useMenuGroup';
+export { useMenuGroupContextValues_unstable } from './useMenuGroupContextValues';
+export { menuGroupClassNames, useMenuGroupStyles_unstable } from './useMenuGroupStyles.styles';

node_modules/@fluentui/react-menu/lib/components/MenuGroup/index.js.map

@@ -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":"AACA,SAASA,SAAS,QAAQ,cAAc;AACxC,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,mBAAmB,EAAEC,2BAA2B,QAAQ,8BAA8B"}

node_modules/@fluentui/react-menu/lib/components/MenuGroup/renderMenuGroup.js

@@ -0,0 +1,13 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { MenuGroupContextProvider } from '../../contexts/menuGroupContext';
+/**
+ * Redefine the render function to add slots. Reuse the menugroup structure but add
+ * slots to children.
+ */ export const renderMenuGroup_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(MenuGroupContextProvider, {
+        value: contextValues.menuGroup,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
+};

node_modules/@fluentui/react-menu/lib/components/MenuGroup/renderMenuGroup.js.map

@@ -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":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,wBAAwB,QAAQ,kCAAkC;AAE3E;;;CAGC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAAuBC;IAC9DJ,YAA4BG;IAE5B,qBACE,KAACF;QAAyBI,OAAOD,cAAcE,SAAS;kBACtD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

node_modules/@fluentui/react-menu/lib/components/MenuGroup/useMenuGroup.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
+/**
+ * Given user props, returns state and render function for a MenuGroup.
+ */ export function useMenuGroup_unstable(props, ref) {
+    const headerId = useId('menu-group');
+    return {
+        components: {
+            root: 'div'
+        },
+        root: slot.always(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
+    };
+}

node_modules/@fluentui/react-menu/lib/components/MenuGroup/useMenuGroup.js.map

@@ -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":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGlF;;CAEC,GACD,OAAO,SAASC,sBAAsBC,KAAqB,EAAEC,GAA2B;IACtF,MAAMC,WAAWL,MAAM;IAEvB,OAAO;QACLM,YAAY;YACVC,MAAM;QACR;QACAA,MAAMN,KAAKO,MAAM,CACfT,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FK,KAAKA;YACL,mBAAmBC;YACnBI,MAAM;YACN,GAAGN,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBL;IACF;AACF"}

node_modules/@fluentui/react-menu/lib/components/MenuGroup/useMenuGroupContextValues.js

@@ -0,0 +1,13 @@
+'use client';
+import * as React from 'react';
+export function useMenuGroupContextValues_unstable(state) {
+    const { headerId } = state;
+    const menuGroup = React.useMemo(()=>({
+            headerId
+        }), [
+        headerId
+    ]);
+    return {
+        menuGroup
+    };
+}

node_modules/@fluentui/react-menu/lib/components/MenuGroup/useMenuGroupContextValues.js.map

@@ -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;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,mCAAmCC,KAAqB;IACtE,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IACrB,MAAME,YAAYJ,MAAMK,OAAO,CAAC,IAAO,CAAA;YAAEF;QAAS,CAAA,GAAI;QAACA;KAAS;IAEhE,OAAO;QAAEC;IAAU;AACrB"}

node_modules/@fluentui/react-menu/lib/components/MenuGroup/useMenuGroupStyles.styles.js

@@ -0,0 +1,10 @@
+import { mergeClasses } from '@griffel/react';
+export const menuGroupClassNames = {
+  root: 'fui-MenuGroup'
+};
+export const useMenuGroupStyles_unstable = state => {
+  'use no memo';
+
+  state.root.className = mergeClasses(menuGroupClassNames.root, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-menu/lib/components/MenuGroup/useMenuGroupStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mergeClasses","menuGroupClassNames","root","useMenuGroupStyles_unstable","state","className"],"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"],"mappings":"AAAA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE;AACV,CAAC;AACD,OAAO,MAAMC,2BAA2B,GAAIC,KAAK,IAAG;EAChD,aAAa;;EACbA,KAAK,CAACF,IAAI,CAACG,SAAS,GAAGL,YAAY,CAACC,mBAAmB,CAACC,IAAI,EAAEE,KAAK,CAACF,IAAI,CAACG,SAAS,CAAC;EACnF,OAAOD,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-menu/lib/components/MenuGroup/useMenuGroupStyles.styles.raw.js

@@ -0,0 +1,9 @@
+import { mergeClasses } from '@griffel/react';
+export const menuGroupClassNames = {
+    root: 'fui-MenuGroup'
+};
+export const useMenuGroupStyles_unstable = (state)=>{
+    'use no memo';
+    state.root.className = mergeClasses(menuGroupClassNames.root, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-menu/lib/components/MenuGroup/useMenuGroupStyles.styles.raw.js.map

@@ -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":"AACA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,OAAO,MAAMC,sBAAsD;IACjEC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,8BAA8B,CAACC;IAC1C;IAEAA,MAAMF,IAAI,CAACG,SAAS,GAAGL,aAAaC,oBAAoBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAElF,OAAOD;AACT,EAAE"}