feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-motion/lib/slots/motionSlot.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities';
+export function motionSlot(motion, options) {
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};
+    if (process.env.NODE_ENV !== 'production') {
+        if (typeof as !== 'undefined') {
+            throw new Error(`@fluentui/react-motion: "as" property is not supported on motion slots.`);
+        }
+    }
+    if (motion === null) {
+        // Heads up!
+        // Render function is used there to avoid rendering a motion component and render children directly
+        const renderFn = (_, props)=>/*#__PURE__*/ React.createElement(React.Fragment, null, props.children);
+        /**
+     * Casting is required here as SlotComponentType is a function, not an object.
+     * Although SlotComponentType has a function signature, it is still just an object.
+     * This is required to make a slot callable (JSX compatible), this is the exact same approach
+     * that is used on `@types/react` components
+     */ return {
+            [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,
+            [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
+        };
+    }
+    /**
+   * Casting is required here as SlotComponentType is a function, not an object.
+   * Although SlotComponentType has a function signature, it is still just an object.
+   * This is required to make a slot callable (JSX compatible), this is the exact same approach
+   * that is used on `@types/react` components
+   */ const propsWithMetadata = {
+        ...options.defaultProps,
+        ...rest,
+        [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
+    };
+    if (typeof children === 'function') {
+        propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children;
+    }
+    return propsWithMetadata;
+}

node_modules/@fluentui/react-motion/lib/slots/motionSlot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/slots/motionSlot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities';\nimport type {\n  JSXElement,\n  JSXIntrinsicElementKeys,\n  SlotComponentType,\n  SlotRenderFunction,\n} from '@fluentui/react-utilities';\n\nimport type { MotionComponentProps } from '../factories/createMotionComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype MotionSlotRenderProps = Pick<MotionComponentProps, 'onMotionFinish' | 'onMotionStart' | 'onMotionCancel'>;\n\nexport type MotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n  MotionComponentProps,\n  'imperativeRef' | 'onMotionFinish' | 'onMotionStart' | 'onMotionCancel'\n> & {\n  // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n  //        elements motion slots do not support intrinsic elements, only custom components.\n  /**\n   * @deprecated Do not use. Motion Slots do not support intrinsic elements.\n   *\n   * If you want to override the animation, use the children render function instead.\n   */\n  as?: JSXIntrinsicElementKeys;\n\n  // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n  //       possible value for children\n  children?: SlotRenderFunction<MotionSlotRenderProps & MotionParams & { children: JSXElement }>;\n};\n\nexport function motionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n  motion: MotionSlotProps<MotionParams> | null | undefined,\n  options: {\n    elementType: React.FC<MotionComponentProps & MotionParams>;\n    defaultProps: MotionSlotRenderProps & MotionParams;\n  },\n): SlotComponentType<MotionSlotRenderProps & MotionParams> {\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  const { as, children, ...rest } = motion ?? {};\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (typeof as !== 'undefined') {\n      throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n    }\n  }\n\n  if (motion === null) {\n    // Heads up!\n    // Render function is used there to avoid rendering a motion component and render children directly\n    const renderFn: SlotRenderFunction<MotionSlotRenderProps & MotionParams & { children: JSXElement }> = (\n      _,\n      props,\n    ) => <>{props.children}</>;\n\n    /**\n     * Casting is required here as SlotComponentType is a function, not an object.\n     * Although SlotComponentType has a function signature, it is still just an object.\n     * This is required to make a slot callable (JSX compatible), this is the exact same approach\n     * that is used on `@types/react` components\n     */\n    return {\n      [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n      [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n    } as SlotComponentType<MotionSlotRenderProps & MotionParams>;\n  }\n\n  /**\n   * Casting is required here as SlotComponentType is a function, not an object.\n   * Although SlotComponentType has a function signature, it is still just an object.\n   * This is required to make a slot callable (JSX compatible), this is the exact same approach\n   * that is used on `@types/react` components\n   */\n  const propsWithMetadata = {\n    ...options.defaultProps,\n    ...rest,\n    [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n  } as SlotComponentType<MotionSlotRenderProps & MotionParams>;\n\n  if (typeof children === 'function') {\n    propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n      MotionSlotRenderProps & MotionParams\n    >;\n  }\n\n  return propsWithMetadata;\n}\n"],"names":["React","SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","motionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","renderFn","_","props","elementType","propsWithMetadata","defaultProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,2BAA2B,QAAQ,4BAA4B;AAkClG,OAAO,SAASC,WACdC,MAAwD,EACxDC,OAGC;IAED,4DAA4D;IAC5D,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,mBAAAA,oBAAAA,SAAU,CAAC;IAE7C,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOL,OAAO,aAAa;YAC7B,MAAM,IAAIM,MAAM,CAAC,uEAAuE,CAAC;QAC3F;IACF;IAEA,IAAIR,WAAW,MAAM;QACnB,YAAY;QACZ,mGAAmG;QACnG,MAAMS,WAAgG,CACpGC,GACAC,sBACG,0CAAGA,MAAMR,QAAQ;QAEtB;;;;;KAKC,GACD,OAAO;YACL,CAACL,4BAA4B,EAAEW;YAC/B,CAACZ,yBAAyB,EAAEI,QAAQW,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGZ,QAAQa,YAAY;QACvB,GAAGV,IAAI;QACP,CAACP,yBAAyB,EAAEI,QAAQW,WAAW;IACjD;IAEA,IAAI,OAAOT,aAAa,YAAY;QAClCU,iBAAiB,CAACf,4BAA4B,GAAGK;IAGnD;IAEA,OAAOU;AACT"}

node_modules/@fluentui/react-motion/lib/slots/presenceMotionSlot.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities';
+export function presenceMotionSlot(motion, options) {
+    // eslint-disable-next-line @typescript-eslint/no-deprecated
+    const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};
+    if (process.env.NODE_ENV !== 'production') {
+        if (typeof as !== 'undefined') {
+            throw new Error(`@fluentui/react-motion: "as" property is not supported on motion slots.`);
+        }
+    }
+    if (motion === null) {
+        // Heads up!
+        // Render function is used there to avoid rendering a motion component and handle unmounting logic
+        const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;
+        const renderFn = (_, props)=>isUnmounted ? null : /*#__PURE__*/ React.createElement(React.Fragment, null, props.children);
+        /**
+     * Casting is required here as SlotComponentType is a function, not an object.
+     * Although SlotComponentType has a function signature, it is still just an object.
+     * This is required to make a slot callable (JSX compatible), this is the exact same approach
+     * that is used on `@types/react` components
+     */ return {
+            [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,
+            [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
+        };
+    }
+    /**
+   * Casting is required here as SlotComponentType is a function, not an object.
+   * Although SlotComponentType has a function signature, it is still just an object.
+   * This is required to make a slot callable (JSX compatible), this is the exact same approach
+   * that is used on `@types/react` components
+   */ const propsWithMetadata = {
+        ...options.defaultProps,
+        ...rest,
+        [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
+    };
+    if (typeof children === 'function') {
+        propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children;
+    }
+    return propsWithMetadata;
+}