feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-utilities/lib/ssr/SSRContext.js

@@ -0,0 +1,60 @@
+'use client';
+import * as React from 'react';
+import { canUseDOM } from './canUseDOM';
+/**
+ * Default context value to use in case there is no SSRProvider. This is fine for client-only apps.
+ *
+ * @internal
+ */ export const defaultSSRContextValue = {
+    current: 0
+};
+export const SSRContext = /*#__PURE__*/ React.createContext(undefined);
+/**
+ * @internal
+ */ export function useSSRContext() {
+    var _React_useContext;
+    return (_React_useContext = React.useContext(SSRContext)) !== null && _React_useContext !== void 0 ? _React_useContext : defaultSSRContextValue;
+}
+/**
+ * When using SSR with Fluent UI, applications must be wrapped in an SSRProvider. This ensures that auto generated ids
+ * are consistent between the client and server.
+ *
+ * @public
+ */ export const SSRProvider = (props)=>{
+    const [value] = React.useState(()=>({
+            current: 0
+        }));
+    return /*#__PURE__*/ React.createElement(SSRContext.Provider, {
+        value: value
+    }, props.children);
+};
+/**
+ * Returns whether the component is currently being server side rendered or hydrated on the client. Can be used to delay
+ * browser-specific rendering until after hydration. May cause re-renders on a client when is used within SSRProvider.
+ */ export function useIsSSR() {
+    const isInSSRContext = useSSRContext() !== defaultSSRContextValue;
+    const [isSSR, setIsSSR] = React.useState(isInSSRContext);
+    // If we are rendering in a non-DOM environment, and there's no SSRProvider, provide a warning to hint to the
+    // developer to add one.
+    if (process.env.NODE_ENV !== 'production') {
+        if (!isInSSRContext && !canUseDOM()) {
+            // eslint-disable-next-line no-console
+            console.error(`@fluentui/react-components [${useIsSSR.name}]:
+When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.
+
+
+Check documentation at https://aka.ms/fluentui-ssr.`);
+        }
+    }
+    // If on the client, and the component was initially server rendered, then schedule a layout effect to update the
+    // component after hydration.
+    if (canUseDOM() && isInSSRContext) {
+        // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after
+        // mounting.
+        // eslint-disable-next-line
+        React.useLayoutEffect(()=>{
+            setIsSSR(false);
+        }, []);
+    }
+    return isSSR;
+}

node_modules/@fluentui/react-utilities/lib/ssr/SSRContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ssr/SSRContext.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { canUseDOM } from './canUseDOM';\n\n/**\n * To support SSR, the auto incrementing id counter is stored in a context. This allows it to be reset on every request\n * to ensure the client and server are consistent.\n *\n * @internal\n */\nexport type SSRContextValue = {\n  current: number;\n};\n\n/**\n * Default context value to use in case there is no SSRProvider. This is fine for client-only apps.\n *\n * @internal\n */\nexport const defaultSSRContextValue: SSRContextValue = {\n  current: 0,\n};\n\nexport const SSRContext = React.createContext<SSRContextValue | undefined>(undefined) as React.Context<SSRContextValue>;\n\n/**\n * @internal\n */\nexport function useSSRContext(): SSRContextValue {\n  return React.useContext(SSRContext) ?? defaultSSRContextValue;\n}\n\n/**\n * When using SSR with Fluent UI, applications must be wrapped in an SSRProvider. This ensures that auto generated ids\n * are consistent between the client and server.\n *\n * @public\n */\nexport const SSRProvider: React.FC<{ children: React.ReactNode }> = props => {\n  const [value] = React.useState<SSRContextValue>(() => ({ current: 0 }));\n\n  return <SSRContext.Provider value={value}>{props.children}</SSRContext.Provider>;\n};\n\n/**\n * Returns whether the component is currently being server side rendered or hydrated on the client. Can be used to delay\n * browser-specific rendering until after hydration. May cause re-renders on a client when is used within SSRProvider.\n */\nexport function useIsSSR(): boolean {\n  const isInSSRContext = useSSRContext() !== defaultSSRContextValue;\n  const [isSSR, setIsSSR] = React.useState(isInSSRContext);\n\n  // If we are rendering in a non-DOM environment, and there's no SSRProvider, provide a warning to hint to the\n  // developer to add one.\n  if (process.env.NODE_ENV !== 'production') {\n    if (!isInSSRContext && !canUseDOM()) {\n      // eslint-disable-next-line no-console\n      console.error(/** #__DE-INDENT__ */ `\n        @fluentui/react-components [${useIsSSR.name}]:\n        When server rendering, you must wrap your application in an <SSRProvider> to ensure consistent ids are generated between the client and server.\n\n\n        Check documentation at https://aka.ms/fluentui-ssr.\n      `);\n    }\n  }\n\n  // If on the client, and the component was initially server rendered, then schedule a layout effect to update the\n  // component after hydration.\n  if (canUseDOM() && isInSSRContext) {\n    // This if statement technically breaks the rules of hooks, but is safe because the condition never changes after\n    // mounting.\n    // eslint-disable-next-line\n    React.useLayoutEffect(() => {\n      setIsSSR(false);\n    }, []);\n  }\n\n  return isSSR;\n}\n"],"names":["React","canUseDOM","defaultSSRContextValue","current","SSRContext","createContext","undefined","useSSRContext","useContext","SSRProvider","props","value","useState","Provider","children","useIsSSR","isInSSRContext","isSSR","setIsSSR","process","env","NODE_ENV","console","error","name","useLayoutEffect"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,SAAS,QAAQ,cAAc;AAYxC;;;;CAIC,GACD,OAAO,MAAMC,yBAA0C;IACrDC,SAAS;AACX,EAAE;AAEF,OAAO,MAAMC,2BAAaJ,MAAMK,aAAa,CAA8BC,WAA6C;AAExH;;CAEC,GACD,OAAO,SAASC;QACPP;IAAP,OAAOA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACJ,yBAAjBJ,+BAAAA,oBAAgCE;AACzC;AAEA;;;;;CAKC,GACD,OAAO,MAAMO,cAAuDC,CAAAA;IAClE,MAAM,CAACC,MAAM,GAAGX,MAAMY,QAAQ,CAAkB,IAAO,CAAA;YAAET,SAAS;QAAE,CAAA;IAEpE,qBAAO,oBAACC,WAAWS,QAAQ;QAACF,OAAOA;OAAQD,MAAMI,QAAQ;AAC3D,EAAE;AAEF;;;CAGC,GACD,OAAO,SAASC;IACd,MAAMC,iBAAiBT,oBAAoBL;IAC3C,MAAM,CAACe,OAAOC,SAAS,GAAGlB,MAAMY,QAAQ,CAACI;IAEzC,6GAA6G;IAC7G,wBAAwB;IACxB,IAAIG,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,CAACL,kBAAkB,CAACf,aAAa;YACnC,sCAAsC;YACtCqB,QAAQC,KAAK,CAAuB,CAAC,4BACP,EAAER,SAASS,IAAI,CAAC;;;;mDAK9C,CAAC;QACH;IACF;IAEA,iHAAiH;IACjH,6BAA6B;IAC7B,IAAIvB,eAAee,gBAAgB;QACjC,iHAAiH;QACjH,YAAY;QACZ,2BAA2B;QAC3BhB,MAAMyB,eAAe,CAAC;YACpBP,SAAS;QACX,GAAG,EAAE;IACP;IAEA,OAAOD;AACT"}

node_modules/@fluentui/react-utilities/lib/ssr/canUseDOM.js

@@ -0,0 +1,7 @@
+'use client';
+/**
+ * Verifies if an application can use DOM.
+ */ export function canUseDOM() {
+    return /* eslint-disable @nx/workspace-no-restricted-globals -- expected ignore ( SSR friendly acquisition of globals )*/ typeof window !== 'undefined' && !!(window.document && // eslint-disable-next-line @typescript-eslint/no-deprecated
+    window.document.createElement);
+}

node_modules/@fluentui/react-utilities/lib/ssr/canUseDOM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ssr/canUseDOM.ts"],"sourcesContent":["'use client';\n\n/**\n * Verifies if an application can use DOM.\n */\nexport function canUseDOM(): boolean {\n  return (\n    /* eslint-disable @nx/workspace-no-restricted-globals -- expected ignore ( SSR friendly acquisition of globals )*/\n    typeof window !== 'undefined' &&\n    !!(\n      window.document &&\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      window.document.createElement\n    )\n    /* eslint-enable @nx/workspace-no-restricted-globals */\n  );\n}\n"],"names":["canUseDOM","window","document","createElement"],"mappings":"AAAA;AAEA;;CAEC,GACD,OAAO,SAASA;IACd,OACE,gHAAgH,GAChH,OAAOC,WAAW,eAClB,CAAC,CACCA,CAAAA,OAAOC,QAAQ,IACf,4DAA4D;IAC5DD,OAAOC,QAAQ,CAACC,aAAa,AAAD;AAIlC"}

node_modules/@fluentui/react-utilities/lib/ssr/index.js

@@ -0,0 +1,2 @@
+export { canUseDOM } from './canUseDOM';
+export { SSRContext, SSRProvider, defaultSSRContextValue, useIsSSR, useSSRContext } from './SSRContext';

node_modules/@fluentui/react-utilities/lib/ssr/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ssr/index.ts"],"sourcesContent":["export { canUseDOM } from './canUseDOM';\nexport type { SSRContextValue } from './SSRContext';\nexport { SSRContext, SSRProvider, defaultSSRContextValue, useIsSSR, useSSRContext } from './SSRContext';\n"],"names":["canUseDOM","SSRContext","SSRProvider","defaultSSRContextValue","useIsSSR","useSSRContext"],"mappings":"AAAA,SAASA,SAAS,QAAQ,cAAc;AAExC,SAASC,UAAU,EAAEC,WAAW,EAAEC,sBAAsB,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,eAAe"}