feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-motion/lib/components/MotionRefForwarder.js

@@ -0,0 +1,35 @@
+'use client';
+import * as React from 'react';
+const MotionRefForwarderContext = /*#__PURE__*/ React.createContext(undefined);
+/**
+ * A hook that reads the ref forwarded by `MotionRefForwarder` from context.
+ * Used in child components to merge the motion ref into the root slot ref.
+ *
+ * @internal
+ */ export function useMotionForwardedRef() {
+    return React.useContext(MotionRefForwarderContext);
+}
+/**
+ * A component that forwards a ref to its children via a React context.
+ * This is used to pass a motion component's ref through to the actual surface element,
+ * since motion components wrap their children and the ref needs to reach the inner element.
+ *
+ * @internal
+ */ export const MotionRefForwarder = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    return /*#__PURE__*/ React.createElement(MotionRefForwarderContext.Provider, {
+        value: ref
+    }, props.children);
+});
+MotionRefForwarder.displayName = 'MotionRefForwarder';
+/**
+ * Resets the MotionRefForwarder context to `undefined` for its children.
+ * Render this in components that consume `useMotionForwardedRef()` and render
+ * arbitrary user content, to prevent the context from leaking to descendants.
+ *
+ * @internal
+ */ export const MotionRefForwarderReset = (props)=>{
+    return /*#__PURE__*/ React.createElement(MotionRefForwarderContext.Provider, {
+        value: undefined
+    }, props.children);
+};
+MotionRefForwarderReset.displayName = 'MotionRefForwarderReset';

node_modules/@fluentui/react-motion/lib/components/MotionRefForwarder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MotionRefForwarder.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nconst MotionRefForwarderContext = React.createContext<React.Ref<HTMLElement> | undefined>(undefined);\n\n/**\n * A hook that reads the ref forwarded by `MotionRefForwarder` from context.\n * Used in child components to merge the motion ref into the root slot ref.\n *\n * @internal\n */\nexport function useMotionForwardedRef(): React.Ref<HTMLElement> | undefined {\n  return React.useContext(MotionRefForwarderContext);\n}\n\n/**\n * A component that forwards a ref to its children via a React context.\n * This is used to pass a motion component's ref through to the actual surface element,\n * since motion components wrap their children and the ref needs to reach the inner element.\n *\n * @internal\n */\nexport const MotionRefForwarder = React.forwardRef<HTMLElement, { children?: React.ReactElement }>((props, ref) => {\n  return <MotionRefForwarderContext.Provider value={ref}>{props.children}</MotionRefForwarderContext.Provider>;\n});\n\nMotionRefForwarder.displayName = 'MotionRefForwarder';\n\n/**\n * Resets the MotionRefForwarder context to `undefined` for its children.\n * Render this in components that consume `useMotionForwardedRef()` and render\n * arbitrary user content, to prevent the context from leaking to descendants.\n *\n * @internal\n */\nexport const MotionRefForwarderReset: React.FC<{ children: React.ReactElement }> = props => {\n  return <MotionRefForwarderContext.Provider value={undefined}>{props.children}</MotionRefForwarderContext.Provider>;\n};\n\nMotionRefForwarderReset.displayName = 'MotionRefForwarderReset';\n"],"names":["React","MotionRefForwarderContext","createContext","undefined","useMotionForwardedRef","useContext","MotionRefForwarder","forwardRef","props","ref","Provider","value","children","displayName","MotionRefForwarderReset"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,MAAMC,0CAA4BD,MAAME,aAAa,CAAqCC;AAE1F;;;;;CAKC,GACD,OAAO,SAASC;IACd,OAAOJ,MAAMK,UAAU,CAACJ;AAC1B;AAEA;;;;;;CAMC,GACD,OAAO,MAAMK,mCAAqBN,MAAMO,UAAU,CAAiD,CAACC,OAAOC;IACzG,qBAAO,oBAACR,0BAA0BS,QAAQ;QAACC,OAAOF;OAAMD,MAAMI,QAAQ;AACxE,GAAG;AAEHN,mBAAmBO,WAAW,GAAG;AAEjC;;;;;;CAMC,GACD,OAAO,MAAMC,0BAAsEN,CAAAA;IACjF,qBAAO,oBAACP,0BAA0BS,QAAQ;QAACC,OAAOR;OAAYK,MAAMI,QAAQ;AAC9E,EAAE;AAEFE,wBAAwBD,WAAW,GAAG"}

node_modules/@fluentui/react-motion/lib/components/PresenceGroup.js

@@ -0,0 +1,54 @@
+'use client';
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+import * as React from 'react';
+import { getNextChildMapping } from '../utils/groups/getNextChildMapping';
+import { getChildMapping } from '../utils/groups/getChildMapping';
+import { PresenceGroupItemProvider } from './PresenceGroupItemProvider';
+/* eslint-disable @typescript-eslint/explicit-member-accessibility */ /* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/member-ordering */ export class PresenceGroup extends React.Component {
+    static getDerivedStateFromProps(nextProps, { childMapping: prevChildMapping, firstRender }) {
+        const nextChildMapping = getChildMapping(nextProps.children);
+        return {
+            childMapping: firstRender ? nextChildMapping : getNextChildMapping(prevChildMapping, nextChildMapping),
+            firstRender: false
+        };
+    }
+    componentDidMount() {
+        this.mounted = true;
+    }
+    componentWillUnmount() {
+        this.mounted = false;
+    }
+    render() {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, Object.entries(this.state.childMapping).map(([childKey, childProps])=>/*#__PURE__*/ React.createElement(PresenceGroupItemProvider, {
+                ...childProps,
+                childKey: childKey,
+                key: childKey,
+                onExit: this.handleExit
+            }, childProps.element)));
+    }
+    constructor(props, context){
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore - React.Component constructor has only one argument in React 19
+        super(props, context), _define_property(this, "mounted", false), _define_property(this, "handleExit", (childKey)=>{
+            const currentChildMapping = getChildMapping(this.props.children);
+            if (childKey in currentChildMapping) {
+                return;
+            }
+            if (this.mounted) {
+                this.setState((state)=>{
+                    const childMapping = {
+                        ...state.childMapping
+                    };
+                    delete childMapping[childKey];
+                    return {
+                        childMapping
+                    };
+                });
+            }
+        });
+        this.state = {
+            childMapping: {},
+            firstRender: true
+        };
+    }
+}

node_modules/@fluentui/react-motion/lib/components/PresenceGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PresenceGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { getNextChildMapping } from '../utils/groups/getNextChildMapping';\nimport { getChildMapping } from '../utils/groups/getChildMapping';\nimport type { PresenceGroupChildMapping } from '../utils/groups/types';\nimport { PresenceGroupItemProvider } from './PresenceGroupItemProvider';\n\ntype PresenceGroupProps = {\n  children: React.ReactNode;\n};\n\ntype PresenceGroupState = {\n  childMapping: PresenceGroupChildMapping;\n  firstRender: boolean;\n};\n\n/* eslint-disable @typescript-eslint/explicit-member-accessibility */\n/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/member-ordering */\n\nexport class PresenceGroup extends React.Component<PresenceGroupProps, PresenceGroupState> {\n  private mounted: boolean = false;\n\n  static getDerivedStateFromProps(\n    nextProps: PresenceGroupProps,\n    { childMapping: prevChildMapping, firstRender }: PresenceGroupState,\n  ): PresenceGroupState {\n    const nextChildMapping = getChildMapping(nextProps.children);\n\n    return {\n      childMapping: firstRender ? nextChildMapping : getNextChildMapping(prevChildMapping, nextChildMapping),\n      firstRender: false,\n    };\n  }\n\n  constructor(props: PresenceGroupProps, context?: unknown) {\n    // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n    // @ts-ignore - React.Component constructor has only one argument in React 19\n    super(props, context);\n\n    this.state = {\n      childMapping: {},\n      firstRender: true,\n    };\n  }\n\n  private handleExit = (childKey: string): void => {\n    const currentChildMapping = getChildMapping(this.props.children);\n\n    if (childKey in currentChildMapping) {\n      return;\n    }\n\n    if (this.mounted) {\n      this.setState(state => {\n        const childMapping = { ...state.childMapping };\n        delete childMapping[childKey];\n\n        return { childMapping };\n      });\n    }\n  };\n\n  componentDidMount(): void {\n    this.mounted = true;\n  }\n\n  componentWillUnmount(): void {\n    this.mounted = false;\n  }\n  render(): JSXElement {\n    return (\n      <>\n        {Object.entries(this.state.childMapping).map(([childKey, childProps]) => (\n          <PresenceGroupItemProvider {...childProps} childKey={childKey} key={childKey} onExit={this.handleExit}>\n            {childProps.element}\n          </PresenceGroupItemProvider>\n        ))}\n      </>\n    );\n  }\n}\n"],"names":["React","getNextChildMapping","getChildMapping","PresenceGroupItemProvider","PresenceGroup","Component","getDerivedStateFromProps","nextProps","childMapping","prevChildMapping","firstRender","nextChildMapping","children","componentDidMount","mounted","componentWillUnmount","render","Object","entries","state","map","childKey","childProps","key","onExit","handleExit","element","constructor","props","context","currentChildMapping","setState"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,sCAAsC;AAC1E,SAASC,eAAe,QAAQ,kCAAkC;AAElE,SAASC,yBAAyB,QAAQ,8BAA8B;AAWxE,mEAAmE,GACnE,uDAAuD,GACvD,qDAAqD,GAErD,OAAO,MAAMC,sBAAsBJ,MAAMK,SAAS;IAGhD,OAAOC,yBACLC,SAA6B,EAC7B,EAAEC,cAAcC,gBAAgB,EAAEC,WAAW,EAAsB,EAC/C;QACpB,MAAMC,mBAAmBT,gBAAgBK,UAAUK,QAAQ;QAE3D,OAAO;YACLJ,cAAcE,cAAcC,mBAAmBV,oBAAoBQ,kBAAkBE;YACrFD,aAAa;QACf;IACF;IA8BAG,oBAA0B;QACxB,IAAI,CAACC,OAAO,GAAG;IACjB;IAEAC,uBAA6B;QAC3B,IAAI,CAACD,OAAO,GAAG;IACjB;IACAE,SAAqB;QACnB,qBACE,0CACGC,OAAOC,OAAO,CAAC,IAAI,CAACC,KAAK,CAACX,YAAY,EAAEY,GAAG,CAAC,CAAC,CAACC,UAAUC,WAAW,iBAClE,oBAACnB;gBAA2B,GAAGmB,UAAU;gBAAED,UAAUA;gBAAUE,KAAKF;gBAAUG,QAAQ,IAAI,CAACC,UAAU;eAClGH,WAAWI,OAAO;IAK7B;IA7CAC,YAAYC,KAAyB,EAAEC,OAAiB,CAAE;QACxD,6DAA6D;QAC7D,6EAA6E;QAC7E,KAAK,CAACD,OAAOC,UAjBf,uBAAQf,WAAmB,QAyB3B,uBAAQW,cAAa,CAACJ;YACpB,MAAMS,sBAAsB5B,gBAAgB,IAAI,CAAC0B,KAAK,CAAChB,QAAQ;YAE/D,IAAIS,YAAYS,qBAAqB;gBACnC;YACF;YAEA,IAAI,IAAI,CAAChB,OAAO,EAAE;gBAChB,IAAI,CAACiB,QAAQ,CAACZ,CAAAA;oBACZ,MAAMX,eAAe;wBAAE,GAAGW,MAAMX,YAAY;oBAAC;oBAC7C,OAAOA,YAAY,CAACa,SAAS;oBAE7B,OAAO;wBAAEb;oBAAa;gBACxB;YACF;QACF;QArBE,IAAI,CAACW,KAAK,GAAG;YACXX,cAAc,CAAC;YACfE,aAAa;QACf;IACF;AAqCF"}

node_modules/@fluentui/react-motion/lib/components/PresenceGroupItemProvider.js

@@ -0,0 +1,26 @@
+'use client';
+import * as React from 'react';
+import { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';
+/**
+ * Provides context for a single child of a `PresenceGroup`. Exists only to make a stable context value for a child.
+ * Not intended for direct use.
+ *
+ * @internal
+ */ export const PresenceGroupItemProvider = (props)=>{
+    const { appear, childKey, onExit, visible, unmountOnExit } = props;
+    const contextValue = React.useMemo(()=>({
+            appear,
+            visible,
+            onExit: ()=>onExit(childKey),
+            unmountOnExit
+        }), [
+        appear,
+        childKey,
+        onExit,
+        visible,
+        unmountOnExit
+    ]);
+    return /*#__PURE__*/ React.createElement(PresenceGroupChildContext.Provider, {
+        value: contextValue
+    }, props.children);
+};

node_modules/@fluentui/react-motion/lib/components/PresenceGroupItemProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PresenceGroupItemProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport type { PresenceGroupChildContextValue } from '../contexts/PresenceGroupChildContext';\n\ntype PresenceGroupItemProviderProps = Omit<PresenceGroupChildContextValue, 'onExit'> & {\n  children: JSXElement;\n  childKey: string;\n  // That's an internal callback, so we don't need to enforce the type here\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type\n  onExit: (childKey: string) => void;\n};\n\n/**\n * Provides context for a single child of a `PresenceGroup`. Exists only to make a stable context value for a child.\n * Not intended for direct use.\n *\n * @internal\n */\nexport const PresenceGroupItemProvider: React.FC<PresenceGroupItemProviderProps> = props => {\n  const { appear, childKey, onExit, visible, unmountOnExit } = props;\n  const contextValue = React.useMemo(\n    () => ({\n      appear,\n      visible,\n      onExit: () => onExit(childKey),\n      unmountOnExit,\n    }),\n    [appear, childKey, onExit, visible, unmountOnExit],\n  );\n\n  return <PresenceGroupChildContext.Provider value={contextValue}>{props.children}</PresenceGroupChildContext.Provider>;\n};\n"],"names":["React","PresenceGroupChildContext","PresenceGroupItemProvider","props","appear","childKey","onExit","visible","unmountOnExit","contextValue","useMemo","Provider","value","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,yBAAyB,QAAQ,wCAAwC;AAWlF;;;;;CAKC,GACD,OAAO,MAAMC,4BAAsEC,CAAAA;IACjF,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,aAAa,EAAE,GAAGL;IAC7D,MAAMM,eAAeT,MAAMU,OAAO,CAChC,IAAO,CAAA;YACLN;YACAG;YACAD,QAAQ,IAAMA,OAAOD;YACrBG;QACF,CAAA,GACA;QAACJ;QAAQC;QAAUC;QAAQC;QAASC;KAAc;IAGpD,qBAAO,oBAACP,0BAA0BU,QAAQ;QAACC,OAAOH;OAAeN,MAAMU,QAAQ;AACjF,EAAE"}