feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-nav/lib/components/NavDrawer/NavDrawer.js

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useNavDrawer_unstable } from './useNavDrawer';
+import { renderNavDrawer_unstable } from './renderNavDrawer';
+import { useNavDrawerStyles_unstable } from './useNavDrawerStyles.styles';
+import { useNavContextValues_unstable } from '../useNavContextValues';
+/**
+ * NavDrawer component - a component that provides a drawer for navigation items.
+ */ export const NavDrawer = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useNavDrawer_unstable(props, ref);
+    const contextValues = useNavContextValues_unstable(state);
+    useNavDrawerStyles_unstable(state);
+    useCustomStyleHook_unstable('useNavDrawerStyles_unstable')(state);
+    return renderNavDrawer_unstable(state, contextValues);
+});
+NavDrawer.displayName = 'NavDrawer';

node_modules/@fluentui/react-nav/lib/components/NavDrawer/NavDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDrawer/NavDrawer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nimport { useNavDrawer_unstable } from './useNavDrawer';\nimport { renderNavDrawer_unstable } from './renderNavDrawer';\nimport { useNavDrawerStyles_unstable } from './useNavDrawerStyles.styles';\nimport { useNavContextValues_unstable } from '../useNavContextValues';\nimport { NavState } from '../Nav/Nav.types';\nimport type { NavDrawerProps } from './NavDrawer.types';\n\n/**\n * NavDrawer component - a component that provides a drawer for navigation items.\n */\nexport const NavDrawer: ForwardRefComponent<NavDrawerProps> = React.forwardRef((props, ref) => {\n  const state = useNavDrawer_unstable(props, ref);\n  const contextValues = useNavContextValues_unstable(state as NavState);\n\n  useNavDrawerStyles_unstable(state);\n  useCustomStyleHook_unstable('useNavDrawerStyles_unstable')(state);\n\n  return renderNavDrawer_unstable(state, contextValues);\n});\n\nNavDrawer.displayName = 'NavDrawer';\n"],"names":["React","useCustomStyleHook_unstable","useNavDrawer_unstable","renderNavDrawer_unstable","useNavDrawerStyles_unstable","useNavContextValues_unstable","NavDrawer","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAG9E,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,8BAA8B;AAC1E,SAASC,4BAA4B,QAAQ,yBAAyB;AAItE;;CAEC,GACD,OAAO,MAAMC,0BAAiDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQR,sBAAsBM,OAAOC;IAC3C,MAAME,gBAAgBN,6BAA6BK;IAEnDN,4BAA4BM;IAC5BT,4BAA4B,+BAA+BS;IAE3D,OAAOP,yBAAyBO,OAAOC;AACzC,GAAG;AAEHL,UAAUM,WAAW,GAAG"}

node_modules/@fluentui/react-nav/lib/components/NavDrawer/NavDrawer.types.js

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

node_modules/@fluentui/react-nav/lib/components/NavDrawer/NavDrawer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDrawer/NavDrawer.types.ts"],"sourcesContent":["import { DrawerProps, DrawerSlots, DrawerState } from '@fluentui/react-drawer';\nimport { ComponentProps } from '@fluentui/react-utilities';\nimport { NavProps } from '../Nav/Nav.types';\nimport { NavContextValue } from '../NavContext.types';\n\n/**\n * NavDrawer slots\n */\nexport type NavDrawerSlots = DrawerSlots;\n\n/**\n * NavDrawer Props\n */\nexport type NavDrawerProps = ComponentProps<NavDrawerSlots> &\n  DrawerProps &\n  NavProps & {\n    /**\n     * The component uses arrow navigation by default.\n     * Setting this to true enables tab AND arrow navigation.\n     * @default false\n     */\n    tabbable?: boolean;\n  };\n\n/**\n * State used in rendering NavDrawer\n */\nexport type NavDrawerState = DrawerState &\n  NavContextValue & {\n    /**\n     * Analagous to size from DrawerBaseProps.\n     * Intended to be left unset in most cases.\n     * If left unset, it defaults to 260px.\n     */\n    size?: 'small' | 'medium' | 'large' | 'full';\n  };\n"],"names":[],"mappings":"AAwBA;;CAEC,GACD,WAQI"}

node_modules/@fluentui/react-nav/lib/components/NavDrawer/index.js

@@ -0,0 +1,4 @@
+export { NavDrawer } from './NavDrawer';
+export { renderNavDrawer_unstable } from './renderNavDrawer';
+export { useNavDrawer_unstable } from './useNavDrawer';
+export { navDrawerClassNames, useNavDrawerStyles_unstable } from './useNavDrawerStyles.styles';

node_modules/@fluentui/react-nav/lib/components/NavDrawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDrawer/index.ts"],"sourcesContent":["export { NavDrawer } from './NavDrawer';\nexport type { NavDrawerProps, NavDrawerSlots, NavDrawerState } from './NavDrawer.types';\nexport { renderNavDrawer_unstable } from './renderNavDrawer';\nexport { useNavDrawer_unstable } from './useNavDrawer';\nexport { navDrawerClassNames, useNavDrawerStyles_unstable } from './useNavDrawerStyles.styles';\n"],"names":["NavDrawer","renderNavDrawer_unstable","useNavDrawer_unstable","navDrawerClassNames","useNavDrawerStyles_unstable"],"mappings":"AAAA,SAASA,SAAS,QAAQ,cAAc;AAExC,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,mBAAmB,EAAEC,2BAA2B,QAAQ,8BAA8B"}

node_modules/@fluentui/react-nav/lib/components/NavDrawer/renderNavDrawer.js

@@ -0,0 +1,10 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { NavProvider } from '../NavContext';
+export const renderNavDrawer_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(NavProvider, {
+        value: contextValues.nav,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
+};

node_modules/@fluentui/react-nav/lib/components/NavDrawer/renderNavDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDrawer/renderNavDrawer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { NavProvider } from '../NavContext';\nimport type { NavContextValues } from '../NavContext.types';\nimport type { NavDrawerSlots, NavDrawerState } from './NavDrawer.types';\n\nexport const renderNavDrawer_unstable = (state: NavDrawerState, contextValues: NavContextValues): JSXElement => {\n  assertSlots<NavDrawerSlots>(state);\n\n  return (\n    <NavProvider value={contextValues.nav}>\n      <state.root />\n    </NavProvider>\n  );\n};\n"],"names":["assertSlots","NavProvider","renderNavDrawer_unstable","state","contextValues","value","nav","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,WAAW,QAAQ,gBAAgB;AAI5C,OAAO,MAAMC,2BAA2B,CAACC,OAAuBC;IAC9DJ,YAA4BG;IAE5B,qBACE,KAACF;QAAYI,OAAOD,cAAcE,GAAG;kBACnC,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

node_modules/@fluentui/react-nav/lib/components/NavDrawer/useNavDrawer.js

@@ -0,0 +1,40 @@
+'use client';
+import * as React from 'react';
+import { Drawer } from '@fluentui/react-drawer';
+import { slot } from '@fluentui/react-utilities';
+import { useNav_unstable } from '../Nav/useNav';
+/**
+ * Create the state required to render NavDrawer.
+ *
+ * The returned state can be modified with hooks such as useNavDrawerStyles_unstable,
+ * before being passed to renderNavDrawer_unstable.
+ *
+ * @param props - props from this instance of NavDrawer
+ * @param ref - reference to root HTMLDivElement of NavDrawer
+ */ export const useNavDrawer_unstable = (props, ref)=>{
+    const { size = undefined, tabbable = false } = props;
+    const navState = useNav_unstable(props, ref);
+    return {
+        ...navState,
+        size,
+        tabbable,
+        components: {
+            // TODO: remove once React v18 slot API is modified
+            // this is a problem with the lack of support for union types on React v18
+            // ComponentState is using React.ComponentType which will try to infer propType
+            // propTypes WeakValidator signature will break distributive unions making this type invalid
+            root: Drawer
+        },
+        root: slot.always({
+            ref,
+            role: 'navigation',
+            ...props
+        }, {
+            // TODO: remove once React v18 slot API is modified
+            // this is a problem with the lack of support for union types on React v18
+            // ComponentState is using React.ComponentType which will try to infer propType
+            // propTypes WeakValidator signature will break distributive unions making this type invalid
+            elementType: Drawer
+        })
+    };
+};

node_modules/@fluentui/react-nav/lib/components/NavDrawer/useNavDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDrawer/useNavDrawer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Drawer, DrawerProps } from '@fluentui/react-drawer';\nimport { RefAttributes, slot } from '@fluentui/react-utilities';\n\nimport { useNav_unstable } from '../Nav/useNav';\nimport type { NavDrawerProps, NavDrawerState } from './NavDrawer.types';\n\n/**\n * Create the state required to render NavDrawer.\n *\n * The returned state can be modified with hooks such as useNavDrawerStyles_unstable,\n * before being passed to renderNavDrawer_unstable.\n *\n * @param props - props from this instance of NavDrawer\n * @param ref - reference to root HTMLDivElement of NavDrawer\n */\nexport const useNavDrawer_unstable = (props: NavDrawerProps, ref: React.Ref<HTMLDivElement>): NavDrawerState => {\n  const { size = undefined, tabbable = false } = props;\n\n  const navState = useNav_unstable(props, ref);\n\n  return {\n    ...navState,\n    size,\n    tabbable,\n    components: {\n      // TODO: remove once React v18 slot API is modified\n      // this is a problem with the lack of support for union types on React v18\n      // ComponentState is using React.ComponentType which will try to infer propType\n      // propTypes WeakValidator signature will break distributive unions making this type invalid\n      root: Drawer as React.FC<DrawerProps>,\n    },\n\n    root: slot.always(\n      { ref, role: 'navigation', ...props },\n      {\n        // TODO: remove once React v18 slot API is modified\n        // this is a problem with the lack of support for union types on React v18\n        // ComponentState is using React.ComponentType which will try to infer propType\n        // propTypes WeakValidator signature will break distributive unions making this type invalid\n        elementType: Drawer as React.FC<DrawerProps & RefAttributes<HTMLDivElement>>,\n      },\n    ),\n  };\n};\n"],"names":["React","Drawer","slot","useNav_unstable","useNavDrawer_unstable","props","ref","size","undefined","tabbable","navState","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAqB,yBAAyB;AAC7D,SAAwBC,IAAI,QAAQ,4BAA4B;AAEhE,SAASC,eAAe,QAAQ,gBAAgB;AAGhD;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,OAAOC,SAAS,EAAEC,WAAW,KAAK,EAAE,GAAGJ;IAE/C,MAAMK,WAAWP,gBAAgBE,OAAOC;IAExC,OAAO;QACL,GAAGI,QAAQ;QACXH;QACAE;QACAE,YAAY;YACV,mDAAmD;YACnD,0EAA0E;YAC1E,+EAA+E;YAC/E,4FAA4F;YAC5FC,MAAMX;QACR;QAEAW,MAAMV,KAAKW,MAAM,CACf;YAAEP;YAAKQ,MAAM;YAAc,GAAGT,KAAK;QAAC,GACpC;YACE,mDAAmD;YACnD,0EAA0E;YAC1E,+EAA+E;YAC/E,4FAA4F;YAC5FU,aAAad;QACf;IAEJ;AACF,EAAE"}

node_modules/@fluentui/react-nav/lib/components/NavDrawer/useNavDrawerStyles.styles.js

@@ -0,0 +1,34 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { navItemTokens } from '../sharedNavStyles.styles';
+export const navDrawerClassNames = {
+  root: 'fui-NavDrawer'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    De3pzq: "f1ctqxl6",
+    Bt984gj: "f3gca8"
+  },
+  defaultWidth: {
+    a9b677: "f12j6lm0"
+  }
+}, {
+  d: [".f1ctqxl6{background-color:var(--colorNeutralBackground4);}", ".f3gca8{align-items:unset;}", ".f12j6lm0{width:260px;}"]
+});
+/**
+ * Apply styling to the NavDrawer slots based on the state
+ */
+export const useNavDrawerStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    size
+  } = state;
+  const styles = useStyles();
+  state.root.className = mergeClasses(navDrawerClassNames.root, styles.root, !size && styles.defaultWidth, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-nav/lib/components/NavDrawer/useNavDrawerStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","navItemTokens","navDrawerClassNames","root","useStyles","De3pzq","Bt984gj","defaultWidth","a9b677","d","useNavDrawerStyles_unstable","state","size","styles","className"],"sources":["useNavDrawerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { navItemTokens } from '../sharedNavStyles.styles';\nexport const navDrawerClassNames = {\n    root: 'fui-NavDrawer'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        backgroundColor: navItemTokens.backgroundColor,\n        alignItems: 'unset'\n    },\n    // seperate style so it can be applied conditionally\n    // if size is not set, use default width from the token.\n    defaultWidth: {\n        width: `${navItemTokens.defaultDrawerWidth}px`\n    }\n});\n/**\n * Apply styling to the NavDrawer slots based on the state\n */ export const useNavDrawerStyles_unstable = (state)=>{\n    'use no memo';\n    const { size } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(navDrawerClassNames.root, styles.root, !size && styles.defaultWidth, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,aAAa,QAAQ,2BAA2B;AACzD,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,YAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,2BAA2B,GAAIC,KAAK,IAAG;EACpD,aAAa;;EACb,MAAM;IAAEC;EAAK,CAAC,GAAGD,KAAK;EACtB,MAAME,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1BO,KAAK,CAACR,IAAI,CAACW,SAAS,GAAGd,YAAY,CAACE,mBAAmB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAE,CAACS,IAAI,IAAIC,MAAM,CAACN,YAAY,EAAEI,KAAK,CAACR,IAAI,CAACW,SAAS,CAAC;EAC9H,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-nav/lib/components/NavDrawer/useNavDrawerStyles.styles.raw.js

@@ -0,0 +1,28 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { navItemTokens } from '../sharedNavStyles.styles';
+export const navDrawerClassNames = {
+    root: 'fui-NavDrawer'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        backgroundColor: navItemTokens.backgroundColor,
+        alignItems: 'unset'
+    },
+    // seperate style so it can be applied conditionally
+    // if size is not set, use default width from the token.
+    defaultWidth: {
+        width: `${navItemTokens.defaultDrawerWidth}px`
+    }
+});
+/**
+ * Apply styling to the NavDrawer slots based on the state
+ */ export const useNavDrawerStyles_unstable = (state)=>{
+    'use no memo';
+    const { size } = state;
+    const styles = useStyles();
+    state.root.className = mergeClasses(navDrawerClassNames.root, styles.root, !size && styles.defaultWidth, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-nav/lib/components/NavDrawer/useNavDrawerStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/NavDrawer/useNavDrawerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { InlineDrawerSlots } from '@fluentui/react-drawer';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { NavDrawerState } from './NavDrawer.types';\nimport { navItemTokens } from '../sharedNavStyles.styles';\n\nexport const navDrawerClassNames: SlotClassNames<Omit<InlineDrawerSlots, 'surfaceMotion'>> = {\n  root: 'fui-NavDrawer',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    backgroundColor: navItemTokens.backgroundColor,\n    alignItems: 'unset',\n  },\n  // seperate style so it can be applied conditionally\n  // if size is not set, use default width from the token.\n  defaultWidth: {\n    width: `${navItemTokens.defaultDrawerWidth}px`,\n  },\n});\n\n/**\n * Apply styling to the NavDrawer slots based on the state\n */\nexport const useNavDrawerStyles_unstable = (state: NavDrawerState): NavDrawerState => {\n  'use no memo';\n\n  const { size } = state;\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    navDrawerClassNames.root,\n    styles.root,\n    !size && styles.defaultWidth,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","navItemTokens","navDrawerClassNames","root","useStyles","backgroundColor","alignItems","defaultWidth","width","defaultDrawerWidth","useNavDrawerStyles_unstable","state","size","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,SAASC,aAAa,QAAQ,4BAA4B;AAE1D,OAAO,MAAMC,sBAAgF;IAC3FC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,iBAAiBJ,cAAcI,eAAe;QAC9CC,YAAY;IACd;IACA,oDAAoD;IACpD,wDAAwD;IACxDC,cAAc;QACZC,OAAO,GAAGP,cAAcQ,kBAAkB,CAAC,EAAE,CAAC;IAChD;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1C;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGD;IAEjB,MAAME,SAAST;IACfO,MAAMR,IAAI,CAACW,SAAS,GAAGd,aACrBE,oBAAoBC,IAAI,EACxBU,OAAOV,IAAI,EACX,CAACS,QAAQC,OAAON,YAAY,EAC5BI,MAAMR,IAAI,CAACW,SAAS;IAGtB,OAAOH;AACT,EAAE"}