feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-drawer/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.js

@@ -0,0 +1,32 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "OverlayDrawerSurface", {
+    enumerable: true,
+    get: function() {
+        return OverlayDrawerSurface;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactdialog = require("@fluentui/react-dialog");
+const _useOverlayDrawerSurfaceStylesstyles = require("./useOverlayDrawerSurfaceStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const OverlayDrawerSurface = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const dialogSurfaceState = (0, _reactdialog.useDialogSurface_unstable)({
+        ...props,
+        /**
+       * Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.
+       * We need to cast the ref to a `div` element type to not break Dialog's ref type.
+       *
+       * FIXME: Evaluate the possibility to remove this cast when Dialog is refactored to accept `aside` elements.
+       */ as: props.as
+    }, ref);
+    const dialogSurfaceContextValues = (0, _reactdialog.useDialogSurfaceContextValues_unstable)(dialogSurfaceState);
+    (0, _useOverlayDrawerSurfaceStylesstyles.useOverlayDrawerSurfaceStyles_unstable)(dialogSurfaceState);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useOverlayDrawerSurfaceStyles_unstable')(dialogSurfaceState);
+    return (0, _reactdialog.renderDialogSurface_unstable)(dialogSurfaceState, dialogSurfaceContextValues);
+});
+OverlayDrawerSurface.displayName = 'OverlayDrawerSurface';

node_modules/@fluentui/react-drawer/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport {\n  useDialogSurface_unstable,\n  useDialogSurfaceContextValues_unstable,\n  renderDialogSurface_unstable,\n} from '@fluentui/react-dialog';\n\nimport { useOverlayDrawerSurfaceStyles_unstable } from './useOverlayDrawerSurfaceStyles.styles';\nimport type { OverlayDrawerSurfaceProps } from './OverlayDrawerSurface.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * OverlayDrawerSurface is a proxy for DialogSurface as is only meant to be used internally for Drawer.\n *\n * @internal\n */\nexport const OverlayDrawerSurface: ForwardRefComponent<OverlayDrawerSurfaceProps> = React.forwardRef((props, ref) => {\n  const dialogSurfaceState = useDialogSurface_unstable(\n    {\n      ...props,\n      /**\n       * Drawer accepts a `div` or `aside` element type, but Dialog only accepts a `div` element type.\n       * We need to cast the ref to a `div` element type to not break Dialog's ref type.\n       *\n       * FIXME: Evaluate the possibility to remove this cast when Dialog is refactored to accept `aside` elements.\n       */\n      as: props.as as 'div',\n    },\n    ref,\n  );\n  const dialogSurfaceContextValues = useDialogSurfaceContextValues_unstable(dialogSurfaceState);\n\n  useOverlayDrawerSurfaceStyles_unstable(dialogSurfaceState);\n  useCustomStyleHook_unstable('useOverlayDrawerSurfaceStyles_unstable')(dialogSurfaceState);\n\n  return renderDialogSurface_unstable(dialogSurfaceState, dialogSurfaceContextValues);\n});\n\nOverlayDrawerSurface.displayName = 'OverlayDrawerSurface';\n"],"names":["React","useDialogSurface_unstable","useDialogSurfaceContextValues_unstable","renderDialogSurface_unstable","useOverlayDrawerSurfaceStyles_unstable","useCustomStyleHook_unstable","OverlayDrawerSurface","forwardRef","props","ref","dialogSurfaceState","as","dialogSurfaceContextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BAMxB,yBAAyB;qDAEuB,yCAAyC;qCAEpD,kCAAkC;AAOvE,MAAMM,uBAAAA,WAAAA,GAAuEN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,yBAAqBT,sCAAAA,EACzB;QACE,GAAGO,KAAK;QACR;;;;;OAKC,GACDG,IAAIH,MAAMG,EAAE;IACd,GACAF;IAEF,MAAMG,iCAA6BV,mDAAAA,EAAuCQ;QAE1EN,2EAAAA,EAAuCM;QACvCL,gDAAAA,EAA4B,0CAA0CK;IAEtE,WAAOP,yCAAAA,EAA6BO,oBAAoBE;AAC1D,GAAG;AAEHN,qBAAqBO,WAAW,GAAG"}

node_modules/@fluentui/react-drawer/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.types.js

@@ -0,0 +1,6 @@
+/**
+ * OverlayDrawerSurface Props
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-drawer/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/OverlayDrawerSurface.types.ts"],"sourcesContent":["import type { DialogSurfaceProps, DialogSurfaceSlots } from '@fluentui/react-dialog';\nimport type { ComponentProps, Slot } from '@fluentui/react-utilities';\n\n/**\n * OverlayDrawerSurface slots\n */\nexport type OverlayDrawerSurfaceSlots = Partial<Pick<DialogSurfaceSlots, 'backdrop' | 'backdropMotion'>> & {\n  root: Slot<'div', 'aside'>;\n};\n\n/**\n * OverlayDrawerSurface Props\n */\nexport type OverlayDrawerSurfaceProps = ComponentProps<OverlayDrawerSurfaceSlots> &\n  Pick<DialogSurfaceProps, 'mountNode'>;\n"],"names":[],"mappings":"AAUA;;CAEC,GACD,WACwC"}

node_modules/@fluentui/react-drawer/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "OverlayDrawerSurface", {
+    enumerable: true,
+    get: function() {
+        return _OverlayDrawerSurface.OverlayDrawerSurface;
+    }
+});
+const _OverlayDrawerSurface = require("./OverlayDrawerSurface");

node_modules/@fluentui/react-drawer/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/index.ts"],"sourcesContent":["export { OverlayDrawerSurface } from './OverlayDrawerSurface';\nexport type { OverlayDrawerSurfaceProps, OverlayDrawerSurfaceSlots } from './OverlayDrawerSurface.types';\n"],"names":["OverlayDrawerSurface"],"mappings":";;;;;;;eAASA,0CAAoB;;;sCAAQ,yBAAyB"}

node_modules/@fluentui/react-drawer/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js

@@ -0,0 +1,41 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useOverlayDrawerSurfaceStyles_unstable", {
+    enumerable: true,
+    get: function() {
+        return useOverlayDrawerSurfaceStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+/**
+ * Styles for the backdrop slot
+ */ const useBackdropResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rl76ifk", null, [
+    ".rl76ifk{inset:0px;position:fixed;background-color:var(--colorBackgroundOverlay);}"
+]);
+const useBackdropStyles = /*#__PURE__*/ (0, _react.__styles)({
+    nested: {
+        De3pzq: "f1c21dwh"
+    },
+    drawerHidden: {
+        Bkecrkj: "f1aehjj5"
+    }
+}, {
+    d: [
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
+        ".f1aehjj5{pointer-events:none;}"
+    ]
+});
+const useOverlayDrawerSurfaceStyles_unstable = (state)=>{
+    'use no memo';
+    const { treatBackdropAsNested, backdrop, open, unmountOnClose } = state;
+    const backdropResetStyles = useBackdropResetStyles();
+    const backdropStyles = useBackdropStyles();
+    const mountedAndClosed = !unmountOnClose && !open;
+    if (backdrop) {
+        backdrop.className = (0, _react.mergeClasses)(backdropResetStyles, treatBackdropAsNested && backdropStyles.nested, mountedAndClosed && backdropStyles.drawerHidden, backdrop.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-drawer/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useOverlayDrawerSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\n/**\n * Styles for the backdrop slot\n */ const useBackdropResetStyles = makeResetStyles({\n    inset: '0px',\n    position: 'fixed',\n    backgroundColor: tokens.colorBackgroundOverlay\n});\nconst useBackdropStyles = makeStyles({\n    nested: {\n        backgroundColor: tokens.colorTransparentBackground\n    },\n    drawerHidden: {\n        pointerEvents: 'none'\n    }\n});\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */ export const useOverlayDrawerSurfaceStyles_unstable = (state)=>{\n    'use no memo';\n    const { treatBackdropAsNested, backdrop, open, unmountOnClose } = state;\n    const backdropResetStyles = useBackdropResetStyles();\n    const backdropStyles = useBackdropStyles();\n    const mountedAndClosed = !unmountOnClose && !open;\n    if (backdrop) {\n        backdrop.className = mergeClasses(backdropResetStyles, treatBackdropAsNested && backdropStyles.nested, mountedAndClosed && backdropStyles.drawerHidden, backdrop.className);\n    }\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","useBackdropResetStyles","useBackdropStyles","nested","De3pzq","drawerHidden","Bkecrkj","d","useOverlayDrawerSurfaceStyles_unstable","state","treatBackdropAsNested","backdrop","open","unmountOnClose","backdropResetStyles","backdropStyles","mountedAndClosed","className"],"mappings":"AAAA,YAAY;;;;;+BAoBKW,sCAAsC;;;;;;uBAnBG,gBAAgB;AAE1E;;CAEA,GAAI,MAAMP,sBAAsB,GAAA,WAAA,OAAGJ,oBAAA,EAAA,WAAA,MAAA;IAAA;CAIlC,CAAC;AACF,MAAMK,iBAAiB,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAK,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAOzB,CAAC;AAGS,gDAAgDE,KAAK,IAAG;IAC/D,aAAa;IACb,MAAM,EAAEC,qBAAqB,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAAA,EAAgB,GAAGJ,KAAK;IACvE,MAAMK,mBAAmB,GAAGb,sBAAsB,CAAC,CAAC;IACpD,MAAMc,cAAc,GAAGb,iBAAiB,CAAC,CAAC;IAC1C,MAAMc,gBAAgB,GAAG,CAACH,cAAc,IAAI,CAACD,IAAI;IACjD,IAAID,QAAQ,EAAE;QACVA,QAAQ,CAACM,SAAS,OAAGlB,mBAAY,EAACe,mBAAmB,EAAEJ,qBAAqB,IAAIK,cAAc,CAACZ,MAAM,EAAEa,gBAAgB,IAAID,cAAc,CAACV,YAAY,EAAEM,QAAQ,CAACM,SAAS,CAAC;IAC/K;IACA,OAAOR,KAAK;AAChB,CAAC"}

node_modules/@fluentui/react-drawer/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.raw.js

@@ -0,0 +1,39 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useOverlayDrawerSurfaceStyles_unstable", {
+    enumerable: true,
+    get: function() {
+        return useOverlayDrawerSurfaceStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+/**
+ * Styles for the backdrop slot
+ */ const useBackdropResetStyles = (0, _react.makeResetStyles)({
+    inset: '0px',
+    position: 'fixed',
+    backgroundColor: _reacttheme.tokens.colorBackgroundOverlay
+});
+const useBackdropStyles = (0, _react.makeStyles)({
+    nested: {
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground
+    },
+    drawerHidden: {
+        pointerEvents: 'none'
+    }
+});
+const useOverlayDrawerSurfaceStyles_unstable = (state)=>{
+    'use no memo';
+    const { treatBackdropAsNested, backdrop, open, unmountOnClose } = state;
+    const backdropResetStyles = useBackdropResetStyles();
+    const backdropStyles = useBackdropStyles();
+    const mountedAndClosed = !unmountOnClose && !open;
+    if (backdrop) {
+        backdrop.className = (0, _react.mergeClasses)(backdropResetStyles, treatBackdropAsNested && backdropStyles.nested, mountedAndClosed && backdropStyles.drawerHidden, backdrop.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-drawer/lib-commonjs/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OverlayDrawer/OverlayDrawerSurface/useOverlayDrawerSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { DialogSurfaceState } from '@fluentui/react-dialog';\n\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropResetStyles = makeResetStyles({\n  inset: '0px',\n  position: 'fixed',\n  backgroundColor: tokens.colorBackgroundOverlay,\n});\n\nconst useBackdropStyles = makeStyles({\n  nested: {\n    backgroundColor: tokens.colorTransparentBackground,\n  },\n\n  drawerHidden: {\n    pointerEvents: 'none',\n  },\n});\n\n/**\n * Apply styling to the OverlayDrawerSurface slots based on the state\n */\nexport const useOverlayDrawerSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n  'use no memo';\n\n  const { treatBackdropAsNested, backdrop, open, unmountOnClose } = state;\n\n  const backdropResetStyles = useBackdropResetStyles();\n  const backdropStyles = useBackdropStyles();\n\n  const mountedAndClosed = !unmountOnClose && !open;\n\n  if (backdrop) {\n    backdrop.className = mergeClasses(\n      backdropResetStyles,\n      treatBackdropAsNested && backdropStyles.nested,\n      mountedAndClosed && backdropStyles.drawerHidden,\n      backdrop.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","useBackdropResetStyles","inset","position","backgroundColor","colorBackgroundOverlay","useBackdropStyles","nested","colorTransparentBackground","drawerHidden","pointerEvents","useOverlayDrawerSurfaceStyles_unstable","state","treatBackdropAsNested","backdrop","open","unmountOnClose","backdropResetStyles","backdropStyles","mountedAndClosed","className"],"mappings":"AAAA;;;;;+BA4Bac;;;;;;uBA1B6C,iBAAiB;4BACpD,wBAAwB;AAG/C;;CAEC,GACD,MAAMV,6BAAyBJ,sBAAAA,EAAgB;IAC7CK,OAAO;IACPC,UAAU;IACVC,iBAAiBJ,kBAAAA,CAAOK,sBAAsB;AAChD;AAEA,MAAMC,wBAAoBR,iBAAAA,EAAW;IACnCS,QAAQ;QACNH,iBAAiBJ,kBAAAA,CAAOQ,0BAA0B;IACpD;IAEAC,cAAc;QACZC,eAAe;IACjB;AACF;AAKO,+CAA+C,CAACE;IACrD;IAEA,MAAM,EAAEC,qBAAqB,EAAEC,QAAQ,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAGJ;IAElE,MAAMK,sBAAsBhB;IAC5B,MAAMiB,iBAAiBZ;IAEvB,MAAMa,mBAAmB,CAACH,kBAAkB,CAACD;IAE7C,IAAID,UAAU;QACZA,SAASM,SAAS,OAAGrB,mBAAAA,EACnBkB,qBACAJ,yBAAyBK,eAAeX,MAAM,EAC9CY,oBAAoBD,eAAeT,YAAY,EAC/CK,SAASM,SAAS;IAEtB;IAEA,OAAOR;AACT,EAAE"}