feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-portal/lib-commonjs/components/Portal/Portal.js

@@ -0,0 +1,20 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Portal", {
+    enumerable: true,
+    get: function() {
+        return Portal;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _usePortal = require("./usePortal");
+const _renderPortal = require("./renderPortal");
+const Portal = (props)=>{
+    const state = (0, _usePortal.usePortal_unstable)(props);
+    return (0, _renderPortal.renderPortal_unstable)(state);
+};
+Portal.displayName = 'Portal';

node_modules/@fluentui/react-portal/lib-commonjs/components/Portal/Portal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Portal/Portal.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { usePortal_unstable } from './usePortal';\nimport { renderPortal_unstable } from './renderPortal';\nimport type { PortalProps } from './Portal.types';\n\n/**\n * A portal provides a way to render children into a DOM node\n * that exists outside the DOM hierarchy of the parent component.\n */\nexport const Portal: React.FC<PortalProps> = props => {\n  const state = usePortal_unstable(props);\n\n  return renderPortal_unstable(state);\n};\n\nPortal.displayName = 'Portal';\n"],"names":["React","usePortal_unstable","renderPortal_unstable","Portal","props","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;2BAEI,cAAc;8BACX,iBAAiB;AAOhD,MAAMG,SAAgCC,CAAAA;IAC3C,MAAMC,YAAQJ,6BAAAA,EAAmBG;IAEjC,WAAOF,mCAAAA,EAAsBG;AAC/B,EAAE;AAEFF,OAAOG,WAAW,GAAG"}

node_modules/@fluentui/react-portal/lib-commonjs/components/Portal/Portal.types.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

node_modules/@fluentui/react-portal/lib-commonjs/components/Portal/Portal.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Portal/Portal.types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type PortalProps = {\n  /**\n   * React children\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Where the portal children are mounted on DOM\n   *\n   * @default a new element on document.body without any styling\n   */\n  mountNode?: HTMLElement | null | { element?: HTMLElement | null; className?: string };\n};\n\nexport type PortalState = Pick<PortalProps, 'children'> & {\n  mountNode: HTMLElement | null | undefined;\n\n  /**\n   * Ref to the root span element as virtual parent\n   */\n  virtualParentRootRef: // eslint-disable-next-line @typescript-eslint/no-deprecated\n  React.MutableRefObject<HTMLSpanElement | null>;\n};\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

node_modules/@fluentui/react-portal/lib-commonjs/components/Portal/index.js

@@ -0,0 +1,24 @@
+"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, {
+    Portal: function() {
+        return _Portal.Portal;
+    },
+    renderPortal_unstable: function() {
+        return _renderPortal.renderPortal_unstable;
+    },
+    usePortal_unstable: function() {
+        return _usePortal.usePortal_unstable;
+    }
+});
+const _Portal = require("./Portal");
+const _renderPortal = require("./renderPortal");
+const _usePortal = require("./usePortal");

node_modules/@fluentui/react-portal/lib-commonjs/components/Portal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Portal/index.ts"],"sourcesContent":["export { Portal } from './Portal';\nexport type { PortalProps, PortalState } from './Portal.types';\nexport { renderPortal_unstable } from './renderPortal';\nexport { usePortal_unstable } from './usePortal';\n"],"names":["Portal","renderPortal_unstable","usePortal_unstable"],"mappings":";;;;;;;;;;;;eAASA,cAAM;;;eAENC,mCAAqB;;;eACrBC,6BAAkB;;;wBAHJ,WAAW;8BAEI,iBAAiB;2BACpB,cAAc"}

node_modules/@fluentui/react-portal/lib-commonjs/components/Portal/renderPortal.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderPortal_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderPortal_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _reactdom = /*#__PURE__*/ _interop_require_wildcard._(require("react-dom"));
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const renderPortal_unstable = (state)=>{
+    return /*#__PURE__*/ _react.createElement("span", {
+        hidden: true,
+        ref: state.virtualParentRootRef
+    }, state.mountNode && /*#__PURE__*/ _reactdom.createPortal(/*#__PURE__*/ _react.createElement(_react.Fragment, null, state.children, /*#__PURE__*/ _react.createElement("span", {
+        hidden: true
+    })), state.mountNode));
+};

node_modules/@fluentui/react-portal/lib-commonjs/components/Portal/renderPortal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Portal/renderPortal.tsx"],"sourcesContent":["import * as ReactDOM from 'react-dom';\nimport * as React from 'react';\nimport type { PortalState } from './Portal.types';\n\n/**\n * Render the final JSX of Portal\n */\nexport const renderPortal_unstable = (state: PortalState): React.ReactElement => {\n  return (\n    <span hidden ref={state.virtualParentRootRef}>\n      {state.mountNode &&\n        ReactDOM.createPortal(\n          <>\n            {state.children}\n            {/* Heads up!\n             *  This node exists only to ensure that the portal is not empty as we rely on that in `usePortalMountNode`\n             *  hook for React 18+.\n             */}\n            <span hidden />\n          </>,\n          state.mountNode,\n        )}\n    </span>\n  );\n};\n"],"names":["ReactDOM","React","renderPortal_unstable","state","span","hidden","ref","virtualParentRootRef","mountNode","createPortal","children"],"mappings":";;;;+BAOaE;;;;;;;oEAPa,YAAY;iEACf,QAAQ;AAMxB,8BAA8B,CAACC;IACpC,OAAA,WAAA,GACE,OAAA,aAAA,CAACC,QAAAA;QAAKC,QAAAA;QAAOC,KAAKH,MAAMI,oBAAoB;OACzCJ,MAAMK,SAAS,IAAA,WAAA,GACdR,UAASS,YAAY,CAAA,WAAA,GACnB,OAAA,aAAA,CAAA,OAAA,QAAA,EAAA,MACGN,MAAMO,QAAQ,EAAA,WAAA,GAKf,OAAA,aAAA,CAACN,QAAAA;QAAKC,QAAAA;SAERF,MAAMK,SAAS;AAIzB,EAAE"}

node_modules/@fluentui/react-portal/lib-commonjs/components/Portal/usePortal.js

@@ -0,0 +1,86 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "usePortal_unstable", {
+    enumerable: true,
+    get: function() {
+        return usePortal_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _reactutilities = require("@fluentui/react-utilities");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _toMountNodeProps = require("../../utils/toMountNodeProps");
+const _usePortalMountNode = require("./usePortalMountNode");
+const usePortal_unstable = (props)=>{
+    const { element, className } = (0, _toMountNodeProps.toMountNodeProps)(props.mountNode);
+    const virtualParentRootRef = _react.useRef(null);
+    const fallbackElement = (0, _usePortalMountNode.usePortalMountNode)({
+        disabled: !!element,
+        className
+    });
+    const mountNode = element !== null && element !== void 0 ? element : fallbackElement;
+    const state = {
+        children: props.children,
+        mountNode,
+        virtualParentRootRef
+    };
+    _react.useEffect(()=>{
+        if (!mountNode) {
+            return;
+        }
+        const virtualParent = virtualParentRootRef.current;
+        // By default, we create a mount node for portal on `document.body` (see usePortalMountNode()) and have following structure:
+        //
+        // <body>
+        //   <!-- ⚛️ application root -->
+        //   <div id="root">
+        //     <!-- ⬇️ portal node rendered in a tree to anchor (virtual parent node) -->
+        //     <span aria-hidden="true"></span>
+        //   </div>
+        //   <div id="portal-mount-node">
+        //     <!-- 🧩portal content -->
+        //   </div>
+        // </body>
+        //
+        // To make sure that `.elementContains()` works correctly, we link a virtual parent to a portal node (a virtual parent node becomes a parent of mount node):
+        //   virtual.contains(mountNode) === false
+        //   (while we need ⬇️⬇️⬇️)
+        //   elementsContains(virtualParent, mountNode) === true
+        //   elementsContains(mountNode, virtualParent) === false
+        //
+        // For more details, check docs for virtual parent utils.
+        //
+        // However, if a user provides a custom mount node (via `props`) the structure could be different:
+        //
+        // <body>
+        //   <!-- application root -->
+        //   <div id="root">
+        //     <div id="portal-mount-node">
+        //       <!-- 🧩portal content -->
+        //
+        //       <span aria-hidden="true"></span>
+        //     </div>
+        //   </div>
+        // </body>
+        //
+        // A mount node in this case contains portal's content and a virtual parent node. In this case nodes linking is redundant and the check below avoids it.
+        //
+        // Otherwise, there is a circular reference - both elements are parents of each other:
+        //   elementsContains(mountNode, virtualParent) === true
+        //   elementsContains(virtualParent, mountNode) === true
+        const isVirtualParentInsideChild = mountNode.contains(virtualParent);
+        if (virtualParent && !isVirtualParentInsideChild) {
+            (0, _reactutilities.setVirtualParent)(mountNode, virtualParent);
+            return ()=>{
+                (0, _reactutilities.setVirtualParent)(mountNode, undefined);
+            };
+        }
+    }, [
+        virtualParentRootRef,
+        mountNode
+    ]);
+    return state;
+};

node_modules/@fluentui/react-portal/lib-commonjs/components/Portal/usePortal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Portal/usePortal.ts"],"sourcesContent":["'use client';\n\nimport { setVirtualParent } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { toMountNodeProps } from '../../utils/toMountNodeProps';\nimport { usePortalMountNode } from './usePortalMountNode';\nimport type { PortalProps, PortalState } from './Portal.types';\n\n/**\n * Create the state required to render Portal.\n *\n * The returned state can be modified with hooks such as usePortalStyles, before being passed to renderPortal_unstable.\n *\n * @param props - props from this instance of Portal\n */\nexport const usePortal_unstable = (props: PortalProps): PortalState => {\n  const { element, className } = toMountNodeProps(props.mountNode);\n\n  const virtualParentRootRef = React.useRef<HTMLSpanElement>(null);\n  const fallbackElement = usePortalMountNode({ disabled: !!element, className });\n\n  const mountNode = element ?? fallbackElement;\n  const state: PortalState = {\n    children: props.children,\n    mountNode,\n    virtualParentRootRef,\n  };\n\n  React.useEffect(() => {\n    if (!mountNode) {\n      return;\n    }\n\n    const virtualParent = virtualParentRootRef.current;\n\n    // By default, we create a mount node for portal on `document.body` (see usePortalMountNode()) and have following structure:\n    //\n    // <body>\n    //   <!-- ⚛️ application root -->\n    //   <div id=\"root\">\n    //     <!-- ⬇️ portal node rendered in a tree to anchor (virtual parent node) -->\n    //     <span aria-hidden=\"true\"></span>\n    //   </div>\n    //   <div id=\"portal-mount-node\">\n    //     <!-- 🧩portal content -->\n    //   </div>\n    // </body>\n    //\n    // To make sure that `.elementContains()` works correctly, we link a virtual parent to a portal node (a virtual parent node becomes a parent of mount node):\n    //   virtual.contains(mountNode) === false\n    //   (while we need ⬇️⬇️⬇️)\n    //   elementsContains(virtualParent, mountNode) === true\n    //   elementsContains(mountNode, virtualParent) === false\n    //\n    // For more details, check docs for virtual parent utils.\n    //\n    // However, if a user provides a custom mount node (via `props`) the structure could be different:\n    //\n    // <body>\n    //   <!-- application root -->\n    //   <div id=\"root\">\n    //     <div id=\"portal-mount-node\">\n    //       <!-- 🧩portal content -->\n    //\n    //       <span aria-hidden=\"true\"></span>\n    //     </div>\n    //   </div>\n    // </body>\n    //\n    // A mount node in this case contains portal's content and a virtual parent node. In this case nodes linking is redundant and the check below avoids it.\n    //\n    // Otherwise, there is a circular reference - both elements are parents of each other:\n    //   elementsContains(mountNode, virtualParent) === true\n    //   elementsContains(virtualParent, mountNode) === true\n    const isVirtualParentInsideChild = mountNode.contains(virtualParent);\n\n    if (virtualParent && !isVirtualParentInsideChild) {\n      setVirtualParent(mountNode, virtualParent);\n\n      return () => {\n        setVirtualParent(mountNode, undefined);\n      };\n    }\n  }, [virtualParentRootRef, mountNode]);\n\n  return state;\n};\n"],"names":["setVirtualParent","React","toMountNodeProps","usePortalMountNode","usePortal_unstable","props","element","className","mountNode","virtualParentRootRef","useRef","fallbackElement","disabled","state","children","useEffect","virtualParent","current","isVirtualParentInsideChild","contains","undefined"],"mappings":"AAAA;;;;;+BAgBaI;;;;;;;gCAdoB,4BAA4B;iEACtC,QAAQ;kCAEE,+BAA+B;oCAC7B,uBAAuB;AAUnD,2BAA2B,CAACC;IACjC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,OAAGL,kCAAAA,EAAiBG,MAAMG,SAAS;IAE/D,MAAMC,uBAAuBR,OAAMS,MAAM,CAAkB;IAC3D,MAAMC,sBAAkBR,sCAAAA,EAAmB;QAAES,UAAU,CAAC,CAACN;QAASC;IAAU;IAE5E,MAAMC,YAAYF,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,UAAWK;IAC7B,MAAME,QAAqB;QACzBC,UAAUT,MAAMS,QAAQ;QACxBN;QACAC;IACF;IAEAR,OAAMc,SAAS,CAAC;QACd,IAAI,CAACP,WAAW;YACd;QACF;QAEA,MAAMQ,gBAAgBP,qBAAqBQ,OAAO;QAElD,4HAA4H;QAC5H,EAAE;QACF,SAAS;QACT,iCAAiC;QACjC,oBAAoB;QACpB,iFAAiF;QACjF,uCAAuC;QACvC,WAAW;QACX,iCAAiC;QACjC,gCAAgC;QAChC,WAAW;QACX,UAAU;QACV,EAAE;QACF,4JAA4J;QAC5J,0CAA0C;QAC1C,2BAA2B;QAC3B,wDAAwD;QACxD,yDAAyD;QACzD,EAAE;QACF,yDAAyD;QACzD,EAAE;QACF,kGAAkG;QAClG,EAAE;QACF,SAAS;QACT,8BAA8B;QAC9B,oBAAoB;QACpB,mCAAmC;QACnC,kCAAkC;QAClC,EAAE;QACF,yCAAyC;QACzC,aAAa;QACb,WAAW;QACX,UAAU;QACV,EAAE;QACF,wJAAwJ;QACxJ,EAAE;QACF,sFAAsF;QACtF,wDAAwD;QACxD,wDAAwD;QACxD,MAAMC,6BAA6BV,UAAUW,QAAQ,CAACH;QAEtD,IAAIA,iBAAiB,CAACE,4BAA4B;YAChDlB,oCAAAA,EAAiBQ,WAAWQ;YAE5B,OAAO;oBACLhB,gCAAAA,EAAiBQ,WAAWY;YAC9B;QACF;IACF,GAAG;QAACX;QAAsBD;KAAU;IAEpC,OAAOK;AACT,EAAE"}

node_modules/@fluentui/react-portal/lib-commonjs/components/Portal/usePortalMountNode.js

@@ -0,0 +1,212 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "usePortalMountNode", {
+    enumerable: true,
+    get: function() {
+        return usePortalMountNode;
+    }
+});
+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 _react1 = require("@griffel/react");
+const _reacttabster = require("@fluentui/react-tabster");
+const _usePortalMountNodeStylesstyles = require("./usePortalMountNodeStyles.styles");
+const useInsertionEffect = _react['useInsertion' + 'Effect'];
+/**
+ * Legacy element factory for React 17 and below. It's not safe for concurrent rendering.
+ *
+ * Creates a new element on a "document.body" to mount portals.
+ */ const useLegacyElementFactory = (options)=>{
+    'use no memo';
+    const { className, dir, focusVisibleRef, targetNode } = options;
+    const targetElement = _react.useMemo(()=>{
+        if (targetNode === undefined || options.disabled) {
+            return null;
+        }
+        const element = targetNode.ownerDocument.createElement('div');
+        targetNode.appendChild(element);
+        return element;
+    }, [
+        targetNode,
+        options.disabled
+    ]);
+    // Heads up!
+    // This useMemo() call is intentional for React 17 & below.
+    //
+    // We don't want to re-create the portal element when its attributes change. This also cannot not be done in an effect
+    // because, changing the value of CSS variables after an initial mount will trigger interesting CSS side effects like
+    // transitions.
+    _react.useMemo(()=>{
+        if (!targetElement) {
+            return;
+        }
+        targetElement.className = className;
+        targetElement.setAttribute('dir', dir);
+        targetElement.setAttribute('data-portal-node', 'true');
+        focusVisibleRef.current = targetElement;
+    }, [
+        className,
+        dir,
+        targetElement,
+        focusVisibleRef
+    ]);
+    _react.useEffect(()=>{
+        return ()=>{
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.remove();
+        };
+    }, [
+        targetElement
+    ]);
+    return targetElement;
+};
+const initializeElementFactory = ()=>{
+    let currentElement = undefined;
+    function get(targetRoot, forceCreation) {
+        if (currentElement) {
+            return currentElement;
+        }
+        if (forceCreation) {
+            currentElement = targetRoot.ownerDocument.createElement('div');
+            targetRoot.appendChild(currentElement);
+        }
+        return currentElement;
+    }
+    function dispose() {
+        if (currentElement) {
+            currentElement.remove();
+            currentElement = undefined;
+        }
+    }
+    return {
+        get,
+        dispose
+    };
+};
+/**
+ * This is a modern element factory for React 18 and above. It is safe for concurrent rendering.
+ *
+ * It abuses the fact that React will mount DOM once (unlike hooks), so by using a proxy we can intercept:
+ * - the `remove()` method (we call it in `useEffect()`) and remove the element only when the portal is unmounted
+ * - all other methods (and properties) will be called by React once a portal is mounted
+ */ const useModernElementFactory = (options)=>{
+    'use no memo';
+    const { className, dir, focusVisibleRef, targetNode } = options;
+    const [elementFactory] = _react.useState(initializeElementFactory);
+    const elementProxy = _react.useMemo(()=>{
+        if (targetNode === undefined || options.disabled) {
+            return null;
+        }
+        return new Proxy({}, {
+            get (_, property) {
+                // Heads up!
+                // `createPortal()` performs a check for `nodeType` property to determine if the mount node is a valid DOM node
+                // before mounting the portal. We hardcode the value to `Node.ELEMENT_NODE` to pass this check and avoid
+                // premature node creation
+                if (property === 'nodeType') {
+                    // Can't use the `Node.ELEMENT_NODE` as it's a browser API and  not available in all environments, e.g SSR
+                    return 1; // `Node.ELEMENT_NODE`
+                }
+                // Heads up!
+                // We intercept the `remove()` method to remove the mount node only when portal has been unmounted already.
+                if (property === 'remove') {
+                    const targetElement = elementFactory.get(targetNode, false);
+                    if (targetElement) {
+                        // If the mountElement has children, the portal is still mounted, otherwise we can dispose of it
+                        const portalHasNoChildren = targetElement.childNodes.length === 0;
+                        if (portalHasNoChildren) {
+                            elementFactory.dispose();
+                        }
+                    }
+                    return ()=>{
+                    // Always return a no-op function to avoid errors in the code
+                    };
+                }
+                const targetElement = elementFactory.get(targetNode, true);
+                const targetProperty = targetElement ? targetElement[property] : undefined;
+                if (typeof targetProperty === 'function') {
+                    return targetProperty.bind(targetElement);
+                }
+                return targetProperty;
+            },
+            set (_, property, value) {
+                const ignoredProperty = property === '_virtual' || property === 'focusVisible';
+                // We should use the `elementFactory.get(targetNode, !ignoredProperty)`,
+                // but TypeScript requires a literal `true` or `false` for the overload signature.
+                // This workaround ensures the correct overload is called and avoids TypeScript errors.
+                const targetElement = ignoredProperty ? elementFactory.get(targetNode, false) : elementFactory.get(targetNode, true);
+                if (ignoredProperty && !targetElement) {
+                    // We ignore the `_virtual` and `focusVisible` properties to avoid conflicts with the proxy
+                    return true;
+                }
+                if (targetElement) {
+                    Object.assign(targetElement, {
+                        [property]: value
+                    });
+                    return true;
+                }
+                return false;
+            }
+        });
+    }, [
+        elementFactory,
+        targetNode,
+        options.disabled
+    ]);
+    useInsertionEffect(()=>{
+        if (!elementProxy) {
+            return;
+        }
+        const classesToApply = className.split(' ').filter(Boolean);
+        elementProxy.classList.add(...classesToApply);
+        elementProxy.setAttribute('dir', dir);
+        elementProxy.setAttribute('data-portal-node', 'true');
+        focusVisibleRef.current = elementProxy;
+        return ()=>{
+            elementProxy.classList.remove(...classesToApply);
+            elementProxy.removeAttribute('dir');
+        };
+    }, [
+        className,
+        dir,
+        elementProxy,
+        focusVisibleRef
+    ]);
+    _react.useEffect(()=>{
+        return ()=>{
+            elementProxy === null || elementProxy === void 0 ? void 0 : elementProxy.remove();
+        };
+    }, [
+        elementProxy
+    ]);
+    return elementProxy;
+};
+/**
+ * Element factory based on the React version.
+ *
+ * React 17 and below:
+ * - useLegacyElementFactory
+ *
+ * React 18 and above:
+ * - useModernElementFactory
+ */ const useElementFactory = useInsertionEffect ? useModernElementFactory : useLegacyElementFactory;
+const usePortalMountNode = (options)=>{
+    'use no memo';
+    const { targetDocument, dir } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const mountNode = (0, _reactsharedcontexts.usePortalMountNode)();
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    const focusVisibleRef = (0, _reacttabster.useFocusVisible)();
+    const classes = (0, _usePortalMountNodeStylesstyles.usePortalMountNodeStylesStyles)();
+    const themeClassName = (0, _reactsharedcontexts.useThemeClassName_unstable)();
+    const factoryOptions = {
+        dir,
+        disabled: options.disabled,
+        focusVisibleRef,
+        className: (0, _react1.mergeClasses)(themeClassName, classes.root, options.className),
+        targetNode: mountNode !== null && mountNode !== void 0 ? mountNode : targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body
+    };
+    return useElementFactory(factoryOptions);
+};

node_modules/@fluentui/react-portal/lib-commonjs/components/Portal/usePortalMountNodeStyles.styles.js

@@ -0,0 +1,35 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "usePortalMountNodeStylesStyles", {
+    enumerable: true,
+    get: function() {
+        return usePortalMountNodeStylesStyles;
+    }
+});
+const _react = require("@griffel/react");
+const usePortalMountNodeStylesStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        qhf8xq: "f1euv43f",
+        Bhzewxz: "f15twtuk",
+        oyh7mz: [
+            "f1vgc2s3",
+            "f1e31b4d"
+        ],
+        j35jbq: [
+            "f1e31b4d",
+            "f1vgc2s3"
+        ],
+        Bj3rh1h: "f494woh"
+    }
+}, {
+    d: [
+        ".f1euv43f{position:absolute;}",
+        ".f15twtuk{top:0;}",
+        ".f1vgc2s3{left:0;}",
+        ".f1e31b4d{right:0;}",
+        ".f494woh{z-index:1000000;}"
+    ]
+});

node_modules/@fluentui/react-portal/lib-commonjs/components/Portal/usePortalMountNodeStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["usePortalMountNodeStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles } from '@griffel/react';\nexport const usePortalMountNodeStylesStyles = makeStyles({\n    root: {\n        // Creates new stacking context to prevent z-index issues\n        // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context\n        //\n        // Also keeps a portal on top of a page to prevent scrollbars from appearing\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        right: 0,\n        zIndex: 1000000\n    }\n});\n"],"names":["__styles","usePortalMountNodeStylesStyles","root","qhf8xq","Bhzewxz","oyh7mz","j35jbq","Bj3rh1h","d"],"mappings":"AAAA,YAAY;;;;;;;;;;;uBACe,gBAAgB;AACpC,MAAMC,8BAA8B,GAAA,WAAA,OAAGD,eAAA,EAAA;IAAAE,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAY7C,CAAC"}

node_modules/@fluentui/react-portal/lib-commonjs/components/Portal/usePortalMountNodeStyles.styles.raw.js

@@ -0,0 +1,25 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "usePortalMountNodeStylesStyles", {
+    enumerable: true,
+    get: function() {
+        return usePortalMountNodeStylesStyles;
+    }
+});
+const _react = require("@griffel/react");
+const usePortalMountNodeStylesStyles = (0, _react.makeStyles)({
+    root: {
+        // Creates new stacking context to prevent z-index issues
+        // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
+        //
+        // Also keeps a portal on top of a page to prevent scrollbars from appearing
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 1000000
+    }
+});

node_modules/@fluentui/react-portal/lib-commonjs/components/Portal/usePortalMountNodeStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Portal/usePortalMountNodeStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles } from '@griffel/react';\n\nexport const usePortalMountNodeStylesStyles = makeStyles({\n  root: {\n    // Creates new stacking context to prevent z-index issues\n    // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context\n    //\n    // Also keeps a portal on top of a page to prevent scrollbars from appearing\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    right: 0,\n\n    zIndex: 1000000,\n  },\n});\n"],"names":["makeStyles","usePortalMountNodeStylesStyles","root","position","top","left","right","zIndex"],"mappings":"AAAA;;;;;;;;;;;uBAE2B,iBAAiB;AAErC,MAAMC,qCAAiCD,iBAAAA,EAAW;IACvDE,MAAM;QACJ,yDAAyD;QACzD,gHAAgH;QAChH,EAAE;QACF,4EAA4E;QAC5EC,UAAU;QACVC,KAAK;QACLC,MAAM;QACNC,OAAO;QAEPC,QAAQ;IACV;AACF,GAAG"}