feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-drawer/lib/components/DrawerBody/DrawerBody.js

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useDrawerBody_unstable } from './useDrawerBody';
+import { renderDrawerBody_unstable } from './renderDrawerBody';
+import { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles.styles';
+/**
+ * DrawerBody provides with a container for the main content of a Drawer.
+ */ export const DrawerBody = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useDrawerBody_unstable(props, ref);
+    useDrawerBodyStyles_unstable(state);
+    useCustomStyleHook_unstable('useDrawerBodyStyles_unstable')(state);
+    return renderDrawerBody_unstable(state);
+});
+DrawerBody.displayName = 'DrawerBody';

node_modules/@fluentui/react-drawer/lib/components/DrawerBody/DrawerBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerBody/DrawerBody.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';\n\nimport { useDrawerBody_unstable } from './useDrawerBody';\nimport { renderDrawerBody_unstable } from './renderDrawerBody';\nimport { useDrawerBodyStyles_unstable } from './useDrawerBodyStyles.styles';\nimport type { DrawerBodyProps } from './DrawerBody.types';\n\n/**\n * DrawerBody provides with a container for the main content of a Drawer.\n */\nexport const DrawerBody: ForwardRefComponent<DrawerBodyProps> = React.forwardRef((props, ref) => {\n  const state = useDrawerBody_unstable(props, ref);\n\n  useDrawerBodyStyles_unstable(state);\n  useCustomStyleHook_unstable('useDrawerBodyStyles_unstable')(state);\n\n  return renderDrawerBody_unstable(state);\n});\n\nDrawerBody.displayName = 'DrawerBody';\n"],"names":["React","useCustomStyleHook_unstable","useDrawerBody_unstable","renderDrawerBody_unstable","useDrawerBodyStyles_unstable","DrawerBody","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,4BAA4B,QAAQ,+BAA+B;AAG5E;;CAEC,GACD,OAAO,MAAMC,2BAAmDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvF,MAAMC,QAAQP,uBAAuBK,OAAOC;IAE5CJ,6BAA6BK;IAC7BR,4BAA4B,gCAAgCQ;IAE5D,OAAON,0BAA0BM;AACnC,GAAG;AAEHJ,WAAWK,WAAW,GAAG"}

node_modules/@fluentui/react-drawer/lib/components/DrawerBody/DrawerBody.types.js

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

node_modules/@fluentui/react-drawer/lib/components/DrawerBody/DrawerBody.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerBody/DrawerBody.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DrawerBodySlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * DrawerBody Props\n */\nexport type DrawerBodyProps = ComponentProps<DrawerBodySlots>;\n\n/**\n * State used in rendering DrawerBody\n */\nexport type DrawerBodyState = ComponentState<DrawerBodySlots>;\n"],"names":[],"mappings":"AAWA;;CAEC,GACD,WAA8D"}

node_modules/@fluentui/react-drawer/lib/components/DrawerBody/index.js

@@ -0,0 +1,4 @@
+export { DrawerBody } from './DrawerBody';
+export { renderDrawerBody_unstable } from './renderDrawerBody';
+export { useDrawerBody_unstable } from './useDrawerBody';
+export { drawerBodyClassNames, useDrawerBodyStyles_unstable } from './useDrawerBodyStyles.styles';

node_modules/@fluentui/react-drawer/lib/components/DrawerBody/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerBody/index.ts"],"sourcesContent":["export { DrawerBody } from './DrawerBody';\nexport type { DrawerBodyProps, DrawerBodySlots, DrawerBodyState } from './DrawerBody.types';\nexport { renderDrawerBody_unstable } from './renderDrawerBody';\nexport { useDrawerBody_unstable } from './useDrawerBody';\nexport { drawerBodyClassNames, useDrawerBodyStyles_unstable } from './useDrawerBodyStyles.styles';\n"],"names":["DrawerBody","renderDrawerBody_unstable","useDrawerBody_unstable","drawerBodyClassNames","useDrawerBodyStyles_unstable"],"mappings":"AAAA,SAASA,UAAU,QAAQ,eAAe;AAE1C,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,oBAAoB,EAAEC,4BAA4B,QAAQ,+BAA+B"}

node_modules/@fluentui/react-drawer/lib/components/DrawerBody/renderDrawerBody.js

@@ -0,0 +1,8 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of DrawerBody
+ */ export const renderDrawerBody_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

node_modules/@fluentui/react-drawer/lib/components/DrawerBody/renderDrawerBody.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerBody/renderDrawerBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types';\n\n/**\n * Render the final JSX of DrawerBody\n */\nexport const renderDrawerBody_unstable = (state: DrawerBodyState): JSXElement => {\n  assertSlots<DrawerBodySlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderDrawerBody_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAKxD;;CAEC,GACD,OAAO,MAAMC,4BAA4B,CAACC;IACxCF,YAA6BE;IAE7B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

node_modules/@fluentui/react-drawer/lib/components/DrawerBody/useDrawerBody.js

@@ -0,0 +1,89 @@
+'use client';
+import * as React from 'react';
+import { mergeCallbacks, slot, useAnimationFrame, useMergedRefs, useIsomorphicLayoutEffect, getIntrinsicElementProps } from '@fluentui/react-utilities';
+import { useDrawerContext_unstable } from '../../contexts/drawerContext';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+/**
+ * Get the current scroll state of the DrawerBody.
+ *
+ * @internal
+ * @param element - HTMLElement to check scroll state of
+ */ const getScrollState = ({ scrollTop, scrollHeight, clientHeight })=>{
+    if (scrollHeight <= clientHeight) {
+        return 'none';
+    }
+    if (scrollTop === 0) {
+        return 'top';
+    }
+    if (scrollTop + clientHeight === scrollHeight) {
+        return 'bottom';
+    }
+    return 'middle';
+};
+/**
+ * Create the state required to render DrawerBody.
+ *
+ * The returned state can be modified with hooks such as useDrawerBodyStyles_unstable,
+ * before being passed to renderDrawerBody_unstable.
+ *
+ * @param props - props from this instance of DrawerBody
+ * @param ref - reference to root HTMLElement of DrawerBody
+ */ export const useDrawerBody_unstable = (props, ref)=>{
+    const { targetDocument } = useFluent();
+    const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+    const { setScrollState } = useDrawerContext_unstable();
+    const scrollRef = React.useRef(null);
+    const mergedRef = useMergedRefs(ref, scrollRef);
+    const [setScrollAnimationFrame, cancelScrollAnimationFrame] = useAnimationFrame();
+    const [setResizeAnimationFrame, cancelResizeAnimationFrame] = useAnimationFrame();
+    const updateScrollState = React.useCallback(()=>{
+        if (!scrollRef.current) {
+            return;
+        }
+        setScrollState(getScrollState(scrollRef.current));
+    }, [
+        setScrollState
+    ]);
+    const onScroll = React.useCallback(()=>{
+        cancelScrollAnimationFrame();
+        setScrollAnimationFrame(updateScrollState);
+    }, [
+        cancelScrollAnimationFrame,
+        setScrollAnimationFrame,
+        updateScrollState
+    ]);
+    // Update scroll state on children change
+    useIsomorphicLayoutEffect(updateScrollState, [
+        props.children,
+        updateScrollState
+    ]);
+    // Update scroll state on mount and when resize occurs
+    useIsomorphicLayoutEffect(()=>{
+        if (!scrollRef.current || !(win === null || win === void 0 ? void 0 : win.ResizeObserver)) {
+            return;
+        }
+        const observer = new win.ResizeObserver(()=>setResizeAnimationFrame(updateScrollState));
+        observer.observe(scrollRef.current);
+        return ()=>{
+            observer.disconnect();
+            cancelResizeAnimationFrame();
+        };
+    }, [
+        setResizeAnimationFrame,
+        cancelResizeAnimationFrame,
+        updateScrollState,
+        win
+    ]);
+    return {
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref: mergedRef,
+            ...props,
+            onScroll: mergeCallbacks(props.onScroll, onScroll)
+        }), {
+            elementType: 'div'
+        })
+    };
+};

node_modules/@fluentui/react-drawer/lib/components/DrawerBody/useDrawerBodyStyles.styles.js

@@ -0,0 +1,21 @@
+'use client';
+
+import { __resetStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const drawerBodyClassNames = {
+  root: 'fui-DrawerBody'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__resetStyles("ri6rvx7", null, [".ri6rvx7{padding:0 var(--spacingHorizontalXXL);flex:1;align-self:stretch;position:relative;z-index:1;overflow:auto;}", ".ri6rvx7:last-child{padding-bottom:calc(var(--spacingHorizontalXXL) + 1px);}", ".ri6rvx7:first-child{padding-top:calc(var(--spacingHorizontalXXL) + 1px);}"]);
+/**
+ * Apply styling to the DrawerBody slots based on the state
+ */
+export const useDrawerBodyStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-drawer/lib/components/DrawerBody/useDrawerBodyStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","mergeClasses","tokens","drawerBodyClassNames","root","useStyles","useDrawerBodyStyles_unstable","state","styles","className"],"sources":["useDrawerBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const drawerBodyClassNames = {\n    root: 'fui-DrawerBody'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n    padding: `0 ${tokens.spacingHorizontalXXL}`,\n    flex: 1,\n    alignSelf: 'stretch',\n    position: 'relative',\n    zIndex: 1,\n    overflow: 'auto',\n    ':last-child': {\n        paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n    },\n    ':first-child': {\n        paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`\n    }\n});\n/**\n * Apply styling to the DrawerBody slots based on the state\n */ export const useDrawerBodyStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,oBAAoB,GAAG;EAChCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,aAAA,wSAarB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,4BAA4B,GAAIC,KAAK,IAAG;EACrD,aAAa;;EACb,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,oBAAoB,CAACC,IAAI,EAAEI,MAAM,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC5F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-drawer/lib/components/DrawerBody/useDrawerBodyStyles.styles.raw.js

@@ -0,0 +1,30 @@
+'use client';
+import { makeResetStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const drawerBodyClassNames = {
+    root: 'fui-DrawerBody'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeResetStyles({
+    padding: `0 ${tokens.spacingHorizontalXXL}`,
+    flex: 1,
+    alignSelf: 'stretch',
+    position: 'relative',
+    zIndex: 1,
+    overflow: 'auto',
+    ':last-child': {
+        paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`
+    },
+    ':first-child': {
+        paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`
+    }
+});
+/**
+ * Apply styling to the DrawerBody slots based on the state
+ */ export const useDrawerBodyStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-drawer/lib/components/DrawerBody/useDrawerBodyStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/DrawerBody/useDrawerBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nimport type { DrawerBodySlots, DrawerBodyState } from './DrawerBody.types';\n\nexport const drawerBodyClassNames: SlotClassNames<DrawerBodySlots> = {\n  root: 'fui-DrawerBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n  padding: `0 ${tokens.spacingHorizontalXXL}`,\n  flex: 1,\n  alignSelf: 'stretch',\n  position: 'relative',\n  zIndex: 1,\n  overflow: 'auto',\n\n  ':last-child': {\n    paddingBottom: `calc(${tokens.spacingHorizontalXXL} + 1px)`,\n  },\n\n  ':first-child': {\n    paddingTop: `calc(${tokens.spacingHorizontalXXL} + 1px)`,\n  },\n});\n\n/**\n * Apply styling to the DrawerBody slots based on the state\n */\nexport const useDrawerBodyStyles_unstable = (state: DrawerBodyState): DrawerBodyState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(drawerBodyClassNames.root, styles, state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","tokens","drawerBodyClassNames","root","useStyles","padding","spacingHorizontalXXL","flex","alignSelf","position","zIndex","overflow","paddingBottom","paddingTop","useDrawerBodyStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC/D,SAASC,MAAM,QAAQ,wBAAwB;AAK/C,OAAO,MAAMC,uBAAwD;IACnEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,gBAAgB;IAChCM,SAAS,CAAC,EAAE,EAAEJ,OAAOK,oBAAoB,EAAE;IAC3CC,MAAM;IACNC,WAAW;IACXC,UAAU;IACVC,QAAQ;IACRC,UAAU;IAEV,eAAe;QACbC,eAAe,CAAC,KAAK,EAAEX,OAAOK,oBAAoB,CAAC,OAAO,CAAC;IAC7D;IAEA,gBAAgB;QACdO,YAAY,CAAC,KAAK,EAAEZ,OAAOK,oBAAoB,CAAC,OAAO,CAAC;IAC1D;AACF;AAEA;;CAEC,GACD,OAAO,MAAMQ,+BAA+B,CAACC;IAC3C;IAEA,MAAMC,SAASZ;IAEfW,MAAMZ,IAAI,CAACc,SAAS,GAAGjB,aAAaE,qBAAqBC,IAAI,EAAEa,QAAQD,MAAMZ,IAAI,CAACc,SAAS;IAE3F,OAAOF;AACT,EAAE"}