feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import { useMenuSplitGroup_unstable } from './useMenuSplitGroup';
+import { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';
+import { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useMenuSplitGroupContextValues } from './useMenuSplitGroupContextValues';
+/**
+ * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.
+ */ export const MenuSplitGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useMenuSplitGroup_unstable(props, ref);
+    useMenuSplitGroupStyles_unstable(state);
+    useCustomStyleHook_unstable('useMenuSplitGroupStyles_unstable')(state);
+    return renderMenuSplitGroup_unstable(state, useMenuSplitGroupContextValues(state));
+});
+MenuSplitGroup.displayName = 'MenuSplitGroup';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuSplitGroup/MenuSplitGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMenuSplitGroup_unstable } from './useMenuSplitGroup';\nimport { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';\nimport { useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles.styles';\nimport type { MenuSplitGroupProps } from './MenuSplitGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useMenuSplitGroupContextValues } from './useMenuSplitGroupContextValues';\n\n/**\n * Layout wrapper that provides extra keyboard navigation behavior for two `MenuItem` components.\n */\nexport const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps> = React.forwardRef((props, ref) => {\n  const state = useMenuSplitGroup_unstable(props, ref);\n\n  useMenuSplitGroupStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useMenuSplitGroupStyles_unstable')(state);\n\n  return renderMenuSplitGroup_unstable(state, useMenuSplitGroupContextValues(state));\n});\n\nMenuSplitGroup.displayName = 'MenuSplitGroup';\n"],"names":["React","useMenuSplitGroup_unstable","renderMenuSplitGroup_unstable","useMenuSplitGroupStyles_unstable","useCustomStyleHook_unstable","useMenuSplitGroupContextValues","MenuSplitGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,8BAA8B,QAAQ,mCAAmC;AAElF;;CAEC,GACD,OAAO,MAAMC,+BAA2DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQT,2BAA2BO,OAAOC;IAEhDN,iCAAiCO;IAEjCN,4BAA4B,oCAAoCM;IAEhE,OAAOR,8BAA8BQ,OAAOL,+BAA+BK;AAC7E,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

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

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering MenuSplitGroup
+ */ export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuSplitGroup/MenuSplitGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { MenuSplitGroupContextValue } from '../../contexts/menuSplitGroupContext';\n\nexport type MenuSplitGroupSlots = {\n  root: Slot<'div'>;\n};\n\nexport type MenuSplitGroupContextValues = {\n  menuSplitGroup: MenuSplitGroupContextValue;\n};\n\n/**\n * MenuSplitGroup Props\n */\nexport type MenuSplitGroupProps = ComponentProps<MenuSplitGroupSlots>;\n\n/**\n * State used in rendering MenuSplitGroup\n */\nexport type MenuSplitGroupState = ComponentState<MenuSplitGroupSlots> &\n  Pick<MenuSplitGroupContextValue, 'setMultiline'>;\n"],"names":[],"mappings":"AAgBA;;CAEC,GACD,WACmD"}

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

@@ -0,0 +1,4 @@
+export { MenuSplitGroup } from './MenuSplitGroup';
+export { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';
+export { useMenuSplitGroup_unstable } from './useMenuSplitGroup';
+export { menuSplitGroupClassNames, useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuSplitGroup/index.ts"],"sourcesContent":["export { MenuSplitGroup } from './MenuSplitGroup';\nexport type { MenuSplitGroupProps, MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';\nexport { renderMenuSplitGroup_unstable } from './renderMenuSplitGroup';\nexport { useMenuSplitGroup_unstable } from './useMenuSplitGroup';\nexport { menuSplitGroupClassNames, useMenuSplitGroupStyles_unstable } from './useMenuSplitGroupStyles.styles';\n"],"names":["MenuSplitGroup","renderMenuSplitGroup_unstable","useMenuSplitGroup_unstable","menuSplitGroupClassNames","useMenuSplitGroupStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAElD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}

node_modules/@fluentui/react-menu/lib/components/MenuSplitGroup/renderMenuSplitGroup.js

@@ -0,0 +1,13 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { menuSplitGroupContextDefaultValue, MenuSplitGroupContextProvider } from '../../contexts/menuSplitGroupContext';
+/**
+ * Render the final JSX of MenuSplitGroup
+ */ export const renderMenuSplitGroup_unstable = (state, contexts)=>{
+    assertSlots(state);
+    var _contexts_menuSplitGroup;
+    return /*#__PURE__*/ _jsx(MenuSplitGroupContextProvider, {
+        value: (_contexts_menuSplitGroup = contexts === null || contexts === void 0 ? void 0 : contexts.menuSplitGroup) !== null && _contexts_menuSplitGroup !== void 0 ? _contexts_menuSplitGroup : menuSplitGroupContextDefaultValue,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuSplitGroup/renderMenuSplitGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { MenuSplitGroupState, MenuSplitGroupSlots, MenuSplitGroupContextValues } from './MenuSplitGroup.types';\nimport { menuSplitGroupContextDefaultValue, MenuSplitGroupContextProvider } from '../../contexts/menuSplitGroupContext';\n\n/**\n * Render the final JSX of MenuSplitGroup\n */\nexport const renderMenuSplitGroup_unstable = (\n  state: MenuSplitGroupState,\n  contexts?: MenuSplitGroupContextValues,\n): JSXElement => {\n  assertSlots<MenuSplitGroupSlots>(state);\n\n  return (\n    <MenuSplitGroupContextProvider value={contexts?.menuSplitGroup ?? menuSplitGroupContextDefaultValue}>\n      <state.root />\n    </MenuSplitGroupContextProvider>\n  );\n};\n"],"names":["assertSlots","menuSplitGroupContextDefaultValue","MenuSplitGroupContextProvider","renderMenuSplitGroup_unstable","state","contexts","value","menuSplitGroup","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,iCAAiC,EAAEC,6BAA6B,QAAQ,uCAAuC;AAExH;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAL,YAAiCI;QAGOC;IADxC,qBACE,KAACH;QAA8BI,OAAOD,CAAAA,2BAAAA,qBAAAA,+BAAAA,SAAUE,cAAc,cAAxBF,sCAAAA,2BAA4BJ;kBAChE,cAAA,KAACG,MAAMI,IAAI;;AAGjB,EAAE"}

node_modules/@fluentui/react-menu/lib/components/MenuSplitGroup/useMenuSplitGroup.js

@@ -0,0 +1,95 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, getRTLSafeKey, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { useFocusFinders } from '@fluentui/react-tabster';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';
+import { menuSplitGroupMultilineAttr } from './useMenuSplitGroupStyles.styles';
+/**
+ * Create the state required to render MenuSplitGroup.
+ *
+ * The returned state can be modified with hooks such as useMenuSplitGroupStyles_unstable,
+ * before being passed to renderMenuSplitGroup_unstable.
+ *
+ * @param props - props from this instance of MenuSplitGroup
+ * @param ref - reference to root HTMLElement of MenuSplitGroup
+ */ export const useMenuSplitGroup_unstable = (props, ref)=>{
+    const innerRef = React.useRef(undefined);
+    const { dir, targetDocument } = useFluent();
+    const nextArrowKey = getRTLSafeKey(ArrowRight, dir);
+    const prevArrowKey = getRTLSafeKey(ArrowLeft, dir);
+    const { findNextFocusable, findPrevFocusable } = useFocusFinders();
+    const { multilineRef, setMultiline } = useHandleMultilineMenuItem();
+    const onKeyDown = React.useCallback((e)=>{
+        var _innerRef_current;
+        const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
+        if (!activeElement) {
+            return;
+        }
+        if (!((_innerRef_current = innerRef.current) === null || _innerRef_current === void 0 ? void 0 : _innerRef_current.contains(activeElement))) {
+            return;
+        }
+        if (e.key === nextArrowKey) {
+            const next = findNextFocusable(activeElement, {
+                container: innerRef.current
+            });
+            next === null || next === void 0 ? void 0 : next.focus();
+        }
+        if (e.key === prevArrowKey) {
+            const prev = findPrevFocusable(activeElement, {
+                container: innerRef.current
+            });
+            prev === null || prev === void 0 ? void 0 : prev.focus();
+        }
+    }, [
+        findNextFocusable,
+        findPrevFocusable,
+        targetDocument,
+        nextArrowKey,
+        prevArrowKey
+    ]);
+    return {
+        components: {
+            root: 'div'
+        },
+        setMultiline,
+        root: slot.always(getIntrinsicElementProps('div', {
+            role: 'group',
+            // 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: useMergedRefs(ref, innerRef, multilineRef),
+            onKeyDown,
+            ...props
+        }), {
+            elementType: 'div'
+        })
+    };
+};
+/**
+ * Creates a callback that lets a multiline menu item child set an attribute on this component
+ * Children can mount before parents so we need to store the value and apply it when the parent is mounted
+ */ const useHandleMultilineMenuItem = ()=>{
+    const [handle] = React.useState(()=>{
+        let isMultiline = false;
+        let multilineNode = null;
+        function applyAttr() {
+            multilineNode === null || multilineNode === void 0 ? void 0 : multilineNode.toggleAttribute(menuSplitGroupMultilineAttr, isMultiline);
+        }
+        return {
+            multilineRef: (node)=>{
+                if (node) {
+                    multilineNode = node;
+                    applyAttr();
+                } else {
+                    multilineNode = null;
+                }
+            },
+            setMultiline: (value)=>{
+                isMultiline = value;
+                applyAttr();
+            }
+        };
+    });
+    return handle;
+};

node_modules/@fluentui/react-menu/lib/components/MenuSplitGroup/useMenuSplitGroupContextValues.js

@@ -0,0 +1,14 @@
+'use client';
+import * as React from 'react';
+export const useMenuSplitGroupContextValues = (state)=>{
+    'use no memo';
+    return React.useMemo(()=>{
+        return {
+            menuSplitGroup: {
+                setMultiline: state.setMultiline
+            }
+        };
+    }, [
+        state.setMultiline
+    ]);
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuSplitGroup/useMenuSplitGroupContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { MenuSplitGroupContextValues, MenuSplitGroupState } from './MenuSplitGroup.types';\n\nexport const useMenuSplitGroupContextValues = (state: MenuSplitGroupState): MenuSplitGroupContextValues => {\n  'use no memo';\n\n  return React.useMemo(() => {\n    return {\n      menuSplitGroup: {\n        setMultiline: state.setMultiline,\n      },\n    };\n  }, [state.setMultiline]);\n};\n"],"names":["React","useMenuSplitGroupContextValues","state","useMemo","menuSplitGroup","setMultiline"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,OAAOF,MAAMG,OAAO,CAAC;QACnB,OAAO;YACLC,gBAAgB;gBACdC,cAAcH,MAAMG,YAAY;YAClC;QACF;IACF,GAAG;QAACH,MAAMG,YAAY;KAAC;AACzB,EAAE"}

node_modules/@fluentui/react-menu/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js

@@ -0,0 +1,44 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';
+export const menuSplitGroupMultilineAttr = 'data-multiline';
+export const menuSplitGroupClassNames = {
+  root: 'fui-MenuSplitGroup'
+};
+/**
+ * Styles for the root slot
+ * TODO - remove the use of nested combinators to style child menu items
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Bhlrgs3: "f1v24km9",
+    mc9l5x: "f22iagw",
+    rue6gn: 0,
+    oe75ve: 0,
+    Bbblmiw: 0,
+    Bn2ps6a: "fa49so4",
+    Bu15iap: ["fsdyxoe", "fuk6rhi"],
+    B71tm0z: ["fn8z6db", "f1be8c1t"],
+    Gjs4sj: ["f1vtn0lh", "f8hq2kl"],
+    foni4y: "f7j48hl",
+    Ie9k5m: "f13du8c1",
+    f30fub: "fe64lw1",
+    Jberyy: "f92oj5h"
+  }
+}, {
+  d: [".f1v24km9[data-multiline]>.fui-MenuItem:nth-of-type(2){align-self:center;}", ".f22iagw{display:flex;}", [".fa49so4>.fui-MenuItem:nth-of-type(1){flex:1;}", {
+    p: -1
+  }], ".fsdyxoe>.fui-MenuItem:nth-of-type(2){border-top-left-radius:0;}", ".fuk6rhi>.fui-MenuItem:nth-of-type(2){border-top-right-radius:0;}", ".fn8z6db>.fui-MenuItem:nth-of-type(2){border-bottom-left-radius:0;}", ".f1be8c1t>.fui-MenuItem:nth-of-type(2){border-bottom-right-radius:0;}", ".f1vtn0lh>.fui-MenuItem:nth-of-type(2){padding-left:0;}", ".f8hq2kl>.fui-MenuItem:nth-of-type(2){padding-right:0;}", ".f7j48hl>.fui-MenuItem:nth-of-type(2)::before{content:\"\";}", ".f13du8c1>.fui-MenuItem:nth-of-type(2)::before{width:var(--strokeWidthThin);}", ".fe64lw1>.fui-MenuItem:nth-of-type(2)::before{height:20px;}", ".f92oj5h>.fui-MenuItem:nth-of-type(2)::before{background-color:var(--colorNeutralStroke1);}"]
+});
+/**
+ * Apply styling to the MenuSplitGroup slots based on the state
+ */
+export const useMenuSplitGroupStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-menu/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","tokens","menuItemClassNames","menuSplitGroupMultilineAttr","menuSplitGroupClassNames","root","useStyles","Bhlrgs3","mc9l5x","rue6gn","oe75ve","Bbblmiw","Bn2ps6a","Bu15iap","B71tm0z","Gjs4sj","foni4y","Ie9k5m","f30fub","Jberyy","d","p","useMenuSplitGroupStyles_unstable","state","styles","className"],"sources":["useMenuSplitGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nexport const menuSplitGroupMultilineAttr = 'data-multiline';\nexport const menuSplitGroupClassNames = {\n    root: 'fui-MenuSplitGroup'\n};\n/**\n * Styles for the root slot\n * TODO - remove the use of nested combinators to style child menu items\n */ const useStyles = makeStyles({\n    root: {\n        [`[${menuSplitGroupMultilineAttr}]`]: {\n            [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n                alignSelf: 'center'\n            }\n        },\n        display: 'flex',\n        [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {\n            flex: 1\n        },\n        [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n            paddingLeft: 0,\n            '::before': {\n                content: '\"\"',\n                width: tokens.strokeWidthThin,\n                height: '20px',\n                backgroundColor: tokens.colorNeutralStroke1\n            }\n        }\n    }\n});\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */ export const useMenuSplitGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,kBAAkB,QAAQ,sCAAsC;AACzE,OAAO,MAAMC,2BAA2B,GAAG,gBAAgB;AAC3D,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAuBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1BiB,KAAK,CAAClB,IAAI,CAACoB,SAAS,GAAGzB,YAAY,CAACI,wBAAwB,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;EACrG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-menu/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js

@@ -0,0 +1,43 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';
+export const menuSplitGroupMultilineAttr = 'data-multiline';
+export const menuSplitGroupClassNames = {
+    root: 'fui-MenuSplitGroup'
+};
+/**
+ * Styles for the root slot
+ * TODO - remove the use of nested combinators to style child menu items
+ */ const useStyles = makeStyles({
+    root: {
+        [`[${menuSplitGroupMultilineAttr}]`]: {
+            [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {
+                alignSelf: 'center'
+            }
+        },
+        display: 'flex',
+        [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {
+            flex: 1
+        },
+        [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {
+            borderTopLeftRadius: 0,
+            borderBottomLeftRadius: 0,
+            paddingLeft: 0,
+            '::before': {
+                content: '""',
+                width: tokens.strokeWidthThin,
+                height: '20px',
+                backgroundColor: tokens.colorNeutralStroke1
+            }
+        }
+    }
+});
+/**
+ * Apply styling to the MenuSplitGroup slots based on the state
+ */ export const useMenuSplitGroupStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-menu/lib/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MenuSplitGroup/useMenuSplitGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { menuItemClassNames } from '../MenuItem/useMenuItemStyles.styles';\nimport type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const menuSplitGroupMultilineAttr = 'data-multiline';\n\nexport const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots> = {\n  root: 'fui-MenuSplitGroup',\n};\n/**\n * Styles for the root slot\n * TODO - remove the use of nested combinators to style child menu items\n */\nconst useStyles = makeStyles({\n  root: {\n    [`[${menuSplitGroupMultilineAttr}]`]: {\n      [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n        alignSelf: 'center',\n      },\n    },\n    display: 'flex',\n    [`& > .${menuItemClassNames.root}:nth-of-type(1)`]: {\n      flex: 1,\n    },\n    [`& > .${menuItemClassNames.root}:nth-of-type(2)`]: {\n      borderTopLeftRadius: 0,\n      borderBottomLeftRadius: 0,\n      paddingLeft: 0,\n      '::before': {\n        content: '\"\"',\n        width: tokens.strokeWidthThin,\n        height: '20px',\n        backgroundColor: tokens.colorNeutralStroke1,\n      },\n    },\n  },\n});\n\n/**\n * Apply styling to the MenuSplitGroup slots based on the state\n */\nexport const useMenuSplitGroupStyles_unstable = (state: MenuSplitGroupState): MenuSplitGroupState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","menuItemClassNames","menuSplitGroupMultilineAttr","menuSplitGroupClassNames","root","useStyles","alignSelf","display","flex","borderTopLeftRadius","borderBottomLeftRadius","paddingLeft","content","width","strokeWidthThin","height","backgroundColor","colorNeutralStroke1","useMenuSplitGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,kBAAkB,QAAQ,uCAAuC;AAI1E,OAAO,MAAMC,8BAA8B,iBAAiB;AAE5D,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AACF;;;CAGC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJ,CAAC,CAAC,CAAC,EAAEF,4BAA4B,CAAC,CAAC,CAAC,EAAE;YACpC,CAAC,CAAC,KAAK,EAAED,mBAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;gBAClDE,WAAW;YACb;QACF;QACAC,SAAS;QACT,CAAC,CAAC,KAAK,EAAEN,mBAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;YAClDI,MAAM;QACR;QACA,CAAC,CAAC,KAAK,EAAEP,mBAAmBG,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE;YAClDK,qBAAqB;YACrBC,wBAAwB;YACxBC,aAAa;YACb,YAAY;gBACVC,SAAS;gBACTC,OAAOb,OAAOc,eAAe;gBAC7BC,QAAQ;gBACRC,iBAAiBhB,OAAOiB,mBAAmB;YAC7C;QACF;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,SAASf;IACfc,MAAMf,IAAI,CAACiB,SAAS,GAAGtB,aAAaI,yBAAyBC,IAAI,EAAEgB,OAAOhB,IAAI,EAAEe,MAAMf,IAAI,CAACiB,SAAS;IACpG,OAAOF;AACT,EAAE"}