feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-dialog/lib-commonjs/utils/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useDisableBodyScroll: function() {
+        return _useDisableBodyScroll.useDisableBodyScroll;
+    },
+    useFocusFirstElement: function() {
+        return _useFocusFirstElement.useFocusFirstElement;
+    }
+});
+const _useDisableBodyScroll = require("./useDisableBodyScroll");
+const _useFocusFirstElement = require("./useFocusFirstElement");

node_modules/@fluentui/react-dialog/lib-commonjs/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { useDisableBodyScroll } from './useDisableBodyScroll';\nexport { useFocusFirstElement } from './useFocusFirstElement';\n"],"names":["useDisableBodyScroll","useFocusFirstElement"],"mappings":";;;;;;;;;;;;eAASA,0CAAoB;;;eACpBC,0CAAoB;;;sCADQ,yBAAyB;sCACzB,yBAAyB"}

node_modules/@fluentui/react-dialog/lib-commonjs/utils/useDisableBodyScroll.js

@@ -0,0 +1,54 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useDisableBodyScroll", {
+    enumerable: true,
+    get: function() {
+        return useDisableBodyScroll;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _useDisableBodyScrollstyles = require("./useDisableBodyScroll.styles");
+function useDisableBodyScroll() {
+    const htmlNoScrollStyles = (0, _useDisableBodyScrollstyles.useHTMLNoScrollStyles)();
+    const bodyNoScrollStyles = (0, _useDisableBodyScrollstyles.useBodyNoScrollStyles)();
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const disableBodyScroll = _react.useCallback(()=>{
+        var _targetDocument_defaultView;
+        if (!targetDocument) {
+            return;
+        }
+        var _targetDocument_defaultView_innerHeight;
+        const isHorizontalScrollbarVisible = // To properly compare the body clientHeight to the window innerHeight, manually round down the fractional value to match innerHeight's calculation.
+        Math.floor(targetDocument.body.getBoundingClientRect().height) > ((_targetDocument_defaultView_innerHeight = (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.innerHeight) !== null && _targetDocument_defaultView_innerHeight !== void 0 ? _targetDocument_defaultView_innerHeight : 0);
+        if (!isHorizontalScrollbarVisible) {
+            return;
+        }
+        targetDocument.documentElement.classList.add(htmlNoScrollStyles);
+        targetDocument.body.classList.add(bodyNoScrollStyles);
+        return;
+    }, [
+        targetDocument,
+        htmlNoScrollStyles,
+        bodyNoScrollStyles
+    ]);
+    const enableBodyScroll = _react.useCallback(()=>{
+        if (!targetDocument) {
+            return;
+        }
+        targetDocument.documentElement.classList.remove(htmlNoScrollStyles);
+        targetDocument.body.classList.remove(bodyNoScrollStyles);
+    }, [
+        targetDocument,
+        htmlNoScrollStyles,
+        bodyNoScrollStyles
+    ]);
+    return {
+        disableBodyScroll,
+        enableBodyScroll
+    };
+}

node_modules/@fluentui/react-dialog/lib-commonjs/utils/useDisableBodyScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/useDisableBodyScroll.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\n\nimport { useBodyNoScrollStyles, useHTMLNoScrollStyles } from './useDisableBodyScroll.styles';\n\n/**\n * A React *hook* that disables body scrolling through `overflowY: hidden` CSS property\n *\n * @internal\n */\nexport function useDisableBodyScroll(): {\n  disableBodyScroll: () => void;\n  enableBodyScroll: () => void;\n} {\n  const htmlNoScrollStyles = useHTMLNoScrollStyles();\n  const bodyNoScrollStyles = useBodyNoScrollStyles();\n  const { targetDocument } = useFluent_unstable();\n\n  const disableBodyScroll = React.useCallback(() => {\n    if (!targetDocument) {\n      return;\n    }\n    const isHorizontalScrollbarVisible =\n      // When the window is a fractional height, `innerHeight` always rounds down but `clientHeight` rounds either up or down depending on the value.\n      // To properly compare the body clientHeight to the window innerHeight, manually round down the fractional value to match innerHeight's calculation.\n      Math.floor(targetDocument.body.getBoundingClientRect().height) > (targetDocument.defaultView?.innerHeight ?? 0);\n    if (!isHorizontalScrollbarVisible) {\n      return;\n    }\n    targetDocument.documentElement.classList.add(htmlNoScrollStyles);\n    targetDocument.body.classList.add(bodyNoScrollStyles);\n    return;\n  }, [targetDocument, htmlNoScrollStyles, bodyNoScrollStyles]);\n\n  const enableBodyScroll = React.useCallback(() => {\n    if (!targetDocument) {\n      return;\n    }\n    targetDocument.documentElement.classList.remove(htmlNoScrollStyles);\n    targetDocument.body.classList.remove(bodyNoScrollStyles);\n  }, [targetDocument, htmlNoScrollStyles, bodyNoScrollStyles]);\n\n  return {\n    disableBodyScroll,\n    enableBodyScroll,\n  };\n}\n"],"names":["React","useFluent_unstable","useBodyNoScrollStyles","useHTMLNoScrollStyles","useDisableBodyScroll","htmlNoScrollStyles","bodyNoScrollStyles","targetDocument","disableBodyScroll","useCallback","isHorizontalScrollbarVisible","Math","floor","body","getBoundingClientRect","height","defaultView","innerHeight","documentElement","classList","add","enableBodyScroll","remove"],"mappings":"AAAA;;;;;+BAYgBI;;;;;;;iEAVO,QAAQ;qCACI,kCAAkC;4CAER,gCAAgC;AAOtF;IAIL,MAAMC,yBAAqBF,iDAAAA;IAC3B,MAAMG,yBAAqBJ,iDAAAA;IAC3B,MAAM,EAAEK,cAAc,EAAE,OAAGN,uCAAAA;IAE3B,MAAMO,oBAAoBR,OAAMS,WAAW,CAAC;YAO0BF;QANpE,IAAI,CAACA,gBAAgB;YACnB;QACF;YAIoEA;QAHpE,MAAMG,+BACJ,AACA,+IAD+I,KACK;QACpJC,KAAKC,KAAK,CAACL,eAAeM,IAAI,CAACC,qBAAqB,GAAGC,MAAM,IAAKR,CAAAA,CAAAA,0CAAAA,CAAAA,8BAAAA,eAAeS,WAAAA,AAAW,MAAA,QAA1BT,gCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,4BAA4BU,WAAAA,AAAW,MAAA,QAAvCV,4CAAAA,KAAAA,IAAAA,2CAA2C,CAAA;QAC/G,IAAI,CAACG,8BAA8B;YACjC;QACF;QACAH,eAAeW,eAAe,CAACC,SAAS,CAACC,GAAG,CAACf;QAC7CE,eAAeM,IAAI,CAACM,SAAS,CAACC,GAAG,CAACd;QAClC;IACF,GAAG;QAACC;QAAgBF;QAAoBC;KAAmB;IAE3D,MAAMe,mBAAmBrB,OAAMS,WAAW,CAAC;QACzC,IAAI,CAACF,gBAAgB;YACnB;QACF;QACAA,eAAeW,eAAe,CAACC,SAAS,CAACG,MAAM,CAACjB;QAChDE,eAAeM,IAAI,CAACM,SAAS,CAACG,MAAM,CAAChB;IACvC,GAAG;QAACC;QAAgBF;QAAoBC;KAAmB;IAE3D,OAAO;QACLE;QACAa;IACF;AACF"}

node_modules/@fluentui/react-dialog/lib-commonjs/utils/useDisableBodyScroll.styles.js

@@ -0,0 +1,26 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useBodyNoScrollStyles: function() {
+        return useBodyNoScrollStyles;
+    },
+    useHTMLNoScrollStyles: function() {
+        return useHTMLNoScrollStyles;
+    }
+});
+const _react = require("@griffel/react");
+const useHTMLNoScrollStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r6pzz3z", null, [
+    ".r6pzz3z{overflow-y:hidden;overflow-y:clip;scrollbar-gutter:stable;}"
+]);
+const useBodyNoScrollStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r144vlu9", null, [
+    ".r144vlu9{overflow-y:hidden;}"
+]);

node_modules/@fluentui/react-dialog/lib-commonjs/utils/useDisableBodyScroll.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useDisableBodyScroll.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles } from '@griffel/react';\n// this style must be applied to the html element to disable scrolling\nexport const useHTMLNoScrollStyles = makeResetStyles({\n    overflowY: [\n        'hidden',\n        'clip'\n    ],\n    scrollbarGutter: 'stable'\n});\nexport const useBodyNoScrollStyles = makeResetStyles({\n    overflowY: 'hidden'\n});\n"],"names":["__resetStyles","useHTMLNoScrollStyles","useBodyNoScrollStyles"],"mappings":"AAAA,YAAY;;;;;;;;;;;;yBAUsB;;;yBAPA;;;;uBAFF,gBAAgB;AAEzC,MAAMC,wBAAqB,WAAA,OAAGD,oBAAA,EAAA,WAAA,MAAA;IAAA;CAMpC,CAAC;AACK,MAAME,wBAAqB,WAAA,OAAGF,oBAAA,EAAA,YAAA,MAAA;IAAA;CAEpC,CAAC"}

node_modules/@fluentui/react-dialog/lib-commonjs/utils/useDisableBodyScroll.styles.raw.js

@@ -0,0 +1,30 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useBodyNoScrollStyles: function() {
+        return useBodyNoScrollStyles;
+    },
+    useHTMLNoScrollStyles: function() {
+        return useHTMLNoScrollStyles;
+    }
+});
+const _react = require("@griffel/react");
+const useHTMLNoScrollStyles = (0, _react.makeResetStyles)({
+    overflowY: [
+        'hidden',
+        'clip'
+    ],
+    scrollbarGutter: 'stable'
+});
+const useBodyNoScrollStyles = (0, _react.makeResetStyles)({
+    overflowY: 'hidden'
+});

node_modules/@fluentui/react-dialog/lib-commonjs/utils/useDisableBodyScroll.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/useDisableBodyScroll.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles } from '@griffel/react';\n\n// this style must be applied to the html element to disable scrolling\nexport const useHTMLNoScrollStyles = makeResetStyles({\n  overflowY: ['hidden', 'clip'],\n  scrollbarGutter: 'stable',\n});\n\nexport const useBodyNoScrollStyles = makeResetStyles({\n  overflowY: 'hidden',\n});\n"],"names":["makeResetStyles","useHTMLNoScrollStyles","overflowY","scrollbarGutter","useBodyNoScrollStyles"],"mappings":"AAAA;;;;;;;;;;;;yBAUaI;;;yBALAH;;;;uBAHmB,iBAAiB;AAG1C,MAAMA,4BAAwBD,sBAAAA,EAAgB;IACnDE,WAAW;QAAC;QAAU;KAAO;IAC7BC,iBAAiB;AACnB,GAAG;AAEI,MAAMC,4BAAwBJ,sBAAAA,EAAgB;IACnDE,WAAW;AACb,GAAG"}

node_modules/@fluentui/react-dialog/lib-commonjs/utils/useFocusFirstElement.js

@@ -0,0 +1,44 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useFocusFirstElement", {
+    enumerable: true,
+    get: function() {
+        return useFocusFirstElement;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reacttabster = require("@fluentui/react-tabster");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+function useFocusFirstElement(open, modalType) {
+    const { findFirstFocusable } = (0, _reacttabster.useFocusFinders)();
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const dialogRef = _react.useRef(null);
+    _react.useEffect(()=>{
+        if (!open) {
+            return;
+        }
+        const element = dialogRef.current && findFirstFocusable(dialogRef.current);
+        if (element) {
+            element.focus();
+        } else {
+            var _dialogRef_current;
+            (_dialogRef_current = dialogRef.current) === null || _dialogRef_current === void 0 ? void 0 : _dialogRef_current.focus(); // https://github.com/microsoft/fluentui/issues/25150
+            if (process.env.NODE_ENV === 'development') {
+                // eslint-disable-next-line no-console
+                console.warn(`@fluentui/react-dialog [useFocusFirstElement]:
+A Dialog should have at least one focusable element inside DialogSurface.
+Please add at least a close button either on \`DialogTitle\` action slot or inside \`DialogActions\``);
+            }
+        }
+    }, [
+        findFirstFocusable,
+        open,
+        modalType,
+        targetDocument
+    ]);
+    return dialogRef;
+}

node_modules/@fluentui/react-dialog/lib-commonjs/utils/useFocusFirstElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/useFocusFirstElement.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport type { DialogSurfaceElement } from '../DialogSurface';\nimport type { DialogModalType } from '../Dialog';\n\n/**\n * Focus first element on content when dialog is opened,\n */\nexport function useFocusFirstElement(\n  open: boolean,\n  modalType: DialogModalType,\n): React.RefObject<DialogSurfaceElement | null> {\n  const { findFirstFocusable } = useFocusFinders();\n  const { targetDocument } = useFluent_unstable();\n  const dialogRef = React.useRef<DialogSurfaceElement | null>(null);\n\n  React.useEffect(() => {\n    if (!open) {\n      return;\n    }\n    const element = dialogRef.current && findFirstFocusable(dialogRef.current);\n    if (element) {\n      element.focus();\n    } else {\n      dialogRef.current?.focus(); // https://github.com/microsoft/fluentui/issues/25150\n      if (process.env.NODE_ENV === 'development') {\n        // eslint-disable-next-line no-console\n        console.warn(/** #__DE-INDENT__ */ `\n          @fluentui/react-dialog [useFocusFirstElement]:\n          A Dialog should have at least one focusable element inside DialogSurface.\n          Please add at least a close button either on \\`DialogTitle\\` action slot or inside \\`DialogActions\\`\n        `);\n      }\n    }\n  }, [findFirstFocusable, open, modalType, targetDocument]);\n\n  return dialogRef;\n}\n"],"names":["React","useFocusFinders","useFluent_unstable","useFocusFirstElement","open","modalType","findFirstFocusable","targetDocument","dialogRef","useRef","useEffect","element","current","focus","process","env","NODE_ENV","console","warn"],"mappings":"AAAA;;;;;+BAWgBG;;;;;;;iEATO,QAAQ;8BACC,0BAA0B;qCACvB,kCAAkC;AAO9D,8BACLC,IAAa,EACbC,SAA0B;IAE1B,MAAM,EAAEC,kBAAkB,EAAE,OAAGL,6BAAAA;IAC/B,MAAM,EAAEM,cAAc,EAAE,OAAGL,uCAAAA;IAC3B,MAAMM,YAAYR,OAAMS,MAAM,CAA8B;IAE5DT,OAAMU,SAAS,CAAC;QACd,IAAI,CAACN,MAAM;YACT;QACF;QACA,MAAMO,UAAUH,UAAUI,OAAO,IAAIN,mBAAmBE,UAAUI,OAAO;QACzE,IAAID,SAAS;YACXA,QAAQE,KAAK;QACf,OAAO;gBACLL;aAAAA,qBAAAA,UAAUI,OAAAA,AAAO,MAAA,QAAjBJ,uBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,mBAAmBK,KAAK,IAAI,qDAAqD;YACjF,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,eAAe;gBAC1C,sCAAsC;gBACtCC,QAAQC,IAAI,CAAuB,CAAC;;oGAIpC,CAAC;YACH;QACF;IACF,GAAG;QAACZ;QAAoBF;QAAMC;QAAWE;KAAe;IAExD,OAAOC;AACT"}