feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-dialog/lib-commonjs/components/Dialog/Dialog.js

@@ -0,0 +1,22 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Dialog", {
+    enumerable: true,
+    get: function() {
+        return Dialog;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useDialog = require("./useDialog");
+const _renderDialog = require("./renderDialog");
+const _useDialogContextValues = require("./useDialogContextValues");
+const Dialog = /*#__PURE__*/ _react.memo((props)=>{
+    const state = (0, _useDialog.useDialog_unstable)(props);
+    const contextValues = (0, _useDialogContextValues.useDialogContextValues_unstable)(state);
+    return (0, _renderDialog.renderDialog_unstable)(state, contextValues);
+});
+Dialog.displayName = 'Dialog';

node_modules/@fluentui/react-dialog/lib-commonjs/components/Dialog/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Dialog/Dialog.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDialog_unstable } from './useDialog';\nimport { renderDialog_unstable } from './renderDialog';\nimport type { DialogProps } from './Dialog.types';\nimport { useDialogContextValues_unstable } from './useDialogContextValues';\n\n/**\n * The `Dialog` root level component serves as an interface for interaction with all possible behaviors exposed.\n * It provides context down the hierarchy to `children` compound components to allow functionality.\n * This component expects to receive as children either a `DialogSurface` or a `DialogTrigger`\n * and a `DialogSurface` (or some component that will eventually render one of those compound components)\n * in this specific order\n */\nexport const Dialog: React.FC<DialogProps> = React.memo(props => {\n  const state = useDialog_unstable(props);\n  const contextValues = useDialogContextValues_unstable(state);\n\n  return renderDialog_unstable(state, contextValues);\n});\n\nDialog.displayName = 'Dialog';\n"],"names":["React","useDialog_unstable","renderDialog_unstable","useDialogContextValues_unstable","Dialog","memo","props","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;2BACI,cAAc;8BACX,iBAAiB;wCAEP,2BAA2B;AASpE,MAAMI,SAAAA,WAAAA,GAAgCJ,OAAMK,IAAI,CAACC,CAAAA;IACtD,MAAMC,YAAQN,6BAAAA,EAAmBK;IACjC,MAAME,oBAAgBL,uDAAAA,EAAgCI;IAEtD,WAAOL,mCAAAA,EAAsBK,OAAOC;AACtC,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

node_modules/@fluentui/react-dialog/lib-commonjs/components/Dialog/Dialog.types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-dialog/lib-commonjs/components/Dialog/Dialog.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Dialog/Dialog.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { ComponentProps, ComponentState, JSXElement, Slot } from '@fluentui/react-utilities';\n\nimport type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\nimport type { DialogSurfaceElement } from '../DialogSurface/DialogSurface.types';\n\nexport type DialogSlots = {\n  /**\n   * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n   *\n   */\n  surfaceMotion: Slot<PresenceMotionSlotProps>;\n};\n\nexport type InternalDialogSlots = {\n  surfaceMotion: NonNullable<Slot<PresenceMotionSlotProps>>;\n};\n\nexport type DialogOpenChangeEvent = DialogOpenChangeData['event'];\n\nexport type DialogOpenChangeData =\n  | {\n      type: 'escapeKeyDown';\n      open: boolean;\n      event: React.KeyboardEvent<DialogSurfaceElement>;\n    }\n  | {\n      type: 'backdropClick';\n      open: boolean;\n      event: React.MouseEvent<DialogSurfaceElement>;\n    }\n  | {\n      type: 'triggerClick';\n      open: boolean;\n      event: React.MouseEvent<DialogSurfaceElement>;\n    };\n\nexport type DialogModalType = 'modal' | 'non-modal' | 'alert';\n\n/**\n * Callback fired when the component changes value from open state.\n *\n * @param event - a React's Synthetic event or a KeyboardEvent in case of `documentEscapeKeyDown`\n * @param data - A data object with relevant information,\n * such as open value and type of interaction that created the event\n */\nexport type DialogOpenChangeEventHandler = (event: DialogOpenChangeEvent, data: DialogOpenChangeData) => void;\n\nexport type DialogContextValues = {\n  dialog: DialogContextValue;\n  /**\n   * dialogSurface context is provided by Dialog as false\n   * to ensure components inside Dialog but outside DialogSurface will consume this as false\n   */\n  dialogSurface: DialogSurfaceContextValue;\n};\n\nexport type DialogProps = ComponentProps<Partial<DialogSlots>> & {\n  /**\n   * Dialog variations.\n   *\n   * `modal`: When this type of dialog is open, the rest of the page is dimmed out and cannot be interacted with.\n   * The tab sequence is kept within the dialog and moving the focus outside\n   * the dialog will imply closing it. This is the default type of the component.\n   *\n   * `non-modal`: When a non-modal dialog is open, the rest of the page is not dimmed out\n   * and users can interact with the rest of the page.\n   * This also implies that the tab focus can move outside the dialog when it reaches the last focusable element.\n   *\n   * `alert`: is a special type of modal dialogs that interrupts the user's workflow\n   * to communicate an important message or ask for a decision.\n   * Unlike a typical modal dialog, the user must take an action through the options given to dismiss the dialog,\n   * and it cannot be dismissed through the dimmed background.\n   *\n   * @default modal\n   */\n  modalType?: DialogModalType;\n  /**\n   * Controls the open state of the dialog\n   * @default false\n   */\n  open?: boolean;\n  /**\n   * Default value for the uncontrolled open state of the dialog.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Callback fired when the component changes value from open state.\n   *\n   * @param event - a React's Synthetic event or a KeyboardEvent in case of `documentEscapeKeyDown`\n   * @param data - A data object with relevant information,\n   * such as open value and type of interaction that created the event\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onOpenChange?: DialogOpenChangeEventHandler;\n  /**\n   * Can contain two children including `DialogTrigger` and `DialogSurface`.\n   * Alternatively can only contain `DialogSurface` if using trigger outside dialog, or controlling state.\n   */\n  children: [JSXElement, JSXElement] | JSXElement;\n  /**\n   * Enables standard behavior according to the [HTML dialog spec](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\n   * where the focus trap involves setting outside elements inert.\n   *\n   * @default false\n   */\n  inertTrapFocus?: boolean;\n  /**\n   * Decides whether the dialog should be removed from the DOM tree when it is closed.\n   * This can be useful when dealing with components that may contain state that should not\n   * be reset when the dialog is closed.\n   *\n   * @default true\n   */\n  unmountOnClose?: boolean;\n};\n\nexport type DialogState = ComponentState<InternalDialogSlots> &\n  DialogContextValue & {\n    content: React.ReactNode;\n    trigger: React.ReactNode;\n  };\n"],"names":[],"mappings":""}

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

@@ -0,0 +1,28 @@
+"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, {
+    Dialog: function() {
+        return _Dialog.Dialog;
+    },
+    renderDialog_unstable: function() {
+        return _renderDialog.renderDialog_unstable;
+    },
+    useDialogContextValues_unstable: function() {
+        return _useDialogContextValues.useDialogContextValues_unstable;
+    },
+    useDialog_unstable: function() {
+        return _useDialog.useDialog_unstable;
+    }
+});
+const _Dialog = require("./Dialog");
+const _renderDialog = require("./renderDialog");
+const _useDialog = require("./useDialog");
+const _useDialogContextValues = require("./useDialogContextValues");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Dialog/index.ts"],"sourcesContent":["export { Dialog } from './Dialog';\nexport type {\n  DialogContextValues,\n  DialogModalType,\n  DialogOpenChangeData,\n  DialogOpenChangeEvent,\n  DialogOpenChangeEventHandler,\n  DialogProps,\n  DialogSlots,\n  DialogState,\n  InternalDialogSlots,\n} from './Dialog.types';\nexport { renderDialog_unstable } from './renderDialog';\nexport { useDialog_unstable } from './useDialog';\nexport { useDialogContextValues_unstable } from './useDialogContextValues';\n"],"names":["Dialog","renderDialog_unstable","useDialog_unstable","useDialogContextValues_unstable"],"mappings":";;;;;;;;;;;;eAASA,cAAM;;;eAYNC,mCAAqB;;;eAErBE,uDAA+B;;;eAD/BD,6BAAkB;;;wBAbJ,WAAW;8BAYI,iBAAiB;2BACpB,cAAc;wCACD,2BAA2B"}

node_modules/@fluentui/react-dialog/lib-commonjs/components/Dialog/renderDialog.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderDialog_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderDialog_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactmotion = require("@fluentui/react-motion");
+const _contexts = require("../../contexts");
+const renderDialog_unstable = (state, contextValues)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_contexts.DialogProvider, {
+        value: contextValues.dialog,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_contexts.DialogSurfaceProvider, {
+            value: contextValues.dialogSurface,
+            children: [
+                state.trigger,
+                state.content && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.surfaceMotion, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactmotion.MotionRefForwarder, {
+                        children: state.content
+                    })
+                })
+            ]
+        })
+    });
+};

node_modules/@fluentui/react-dialog/lib-commonjs/components/Dialog/renderDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Dialog/renderDialog.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { MotionRefForwarder } from '@fluentui/react-motion';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport type { DialogState, DialogContextValues, InternalDialogSlots } from './Dialog.types';\n\n/**\n * Render the final JSX of Dialog\n */\nexport const renderDialog_unstable = (state: DialogState, contextValues: DialogContextValues): JSXElement => {\n  assertSlots<InternalDialogSlots>(state);\n\n  return (\n    <DialogProvider value={contextValues.dialog}>\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        {state.trigger}\n        {state.content && (\n          <state.surfaceMotion>\n            <MotionRefForwarder>\n              {/* Casting here as content should be equivalent to <DialogSurface/> */}\n              {/* FIXME: content should not be ReactNode it should be ReactElement instead. */}\n              {state.content as React.ReactElement}\n            </MotionRefForwarder>\n          </state.surfaceMotion>\n        )}\n      </DialogSurfaceProvider>\n    </DialogProvider>\n  );\n};\n"],"names":["assertSlots","React","MotionRefForwarder","DialogProvider","DialogSurfaceProvider","renderDialog_unstable","state","contextValues","value","dialog","dialogSurface","trigger","content","surfaceMotion"],"mappings":";;;;+BAcaK;;;;;;;4BAbb,iCAAiD;gCAErB,4BAA4B;iEAEjC,QAAQ;6BAEI,yBAAyB;0BACN,iBAAiB;AAMhE,8BAA8B,CAACC,OAAoBC;QACxDP,2BAAAA,EAAiCM;IAEjC,OAAA,WAAA,OACE,eAAA,EAACH,wBAAAA,EAAAA;QAAeK,OAAOD,cAAcE,MAAM;kBACzC,WAAA,OAAA,gBAAA,EAACL,+BAAAA,EAAAA;YAAsBI,OAAOD,cAAcG,aAAa;;gBACtDJ,MAAMK,OAAO;gBACbL,MAAMM,OAAO,IAAA,WAAA,OACZ,eAAA,EAACN,MAAMO,aAAa,EAAA;8BAClB,WAAA,OAAA,eAAA,EAACX,+BAAAA,EAAAA;kCAGEI,MAAMM,OAAO;;;;;;AAO5B,EAAE"}

node_modules/@fluentui/react-dialog/lib-commonjs/components/Dialog/useDialog.js

@@ -0,0 +1,99 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useDialog_unstable", {
+    enumerable: true,
+    get: function() {
+        return useDialog_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactcontextselector = require("@fluentui/react-context-selector");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reactmotion = require("@fluentui/react-motion");
+const _reactutilities = require("@fluentui/react-utilities");
+const _utils = require("../../utils");
+const _contexts = require("../../contexts");
+const _DialogSurfaceMotion = require("../DialogSurfaceMotion");
+const useDialog_unstable = (props)=>{
+    const { children, modalType = 'modal', onOpenChange, inertTrapFocus = false, unmountOnClose = true } = props;
+    const dialogTitleId = (0, _reactutilities.useId)('dialog-title-');
+    const [trigger, content] = childrenToTriggerAndContent(children);
+    const [open, setOpen] = (0, _reactutilities.useControllableState)({
+        state: props.open,
+        defaultState: props.defaultOpen,
+        initialState: false
+    });
+    const requestOpenChange = (0, _reactutilities.useEventCallback)((data)=>{
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(data.event, data);
+        // if user prevents default then do not change state value
+        // otherwise updates state value and trigger reference to the element that caused the opening
+        if (!data.event.isDefaultPrevented()) {
+            setOpen(data.open);
+        }
+    });
+    const dialogRef = (0, _utils.useFocusFirstElement)(open, modalType);
+    const { modalAttributes, triggerAttributes } = (0, _reacttabster.useModalAttributes)({
+        trapFocus: modalType !== 'non-modal',
+        legacyTrapFocus: !inertTrapFocus
+    });
+    const isNestedDialog = (0, _reactcontextselector.useHasParentContext)(_contexts.DialogContext);
+    return {
+        components: {
+            surfaceMotion: _DialogSurfaceMotion.DialogSurfaceMotion
+        },
+        inertTrapFocus,
+        open,
+        modalType,
+        content,
+        trigger,
+        requestOpenChange,
+        dialogTitleId,
+        isNestedDialog,
+        unmountOnClose,
+        dialogRef,
+        modalAttributes,
+        triggerAttributes,
+        surfaceMotion: (0, _reactmotion.presenceMotionSlot)(props.surfaceMotion, {
+            elementType: _DialogSurfaceMotion.DialogSurfaceMotion,
+            defaultProps: {
+                visible: open,
+                appear: unmountOnClose,
+                unmountOnExit: unmountOnClose
+            }
+        })
+    };
+};
+/**
+ * Extracts trigger and content from children
+ */ function childrenToTriggerAndContent(children) {
+    const childrenArray = _react.Children.toArray(children);
+    if (process.env.NODE_ENV !== 'production') {
+        if (childrenArray.length !== 1 && childrenArray.length !== 2) {
+            // eslint-disable-next-line no-console
+            console.warn(`@fluentui/react-dialog [useDialog]:
+Dialog must contain at least one child <DialogSurface/>,
+and at most two children <DialogTrigger/> <DialogSurface/> (in this order).`);
+        }
+    }
+    switch(childrenArray.length){
+        // case where there's a trigger followed by content
+        case 2:
+            return childrenArray;
+        // case where there's only content
+        case 1:
+            return [
+                undefined,
+                childrenArray[0]
+            ];
+        // unknown case
+        default:
+            return [
+                undefined,
+                undefined
+            ];
+    }
+}

node_modules/@fluentui/react-dialog/lib-commonjs/components/Dialog/useDialogContextValues.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useDialogContextValues_unstable", {
+    enumerable: true,
+    get: function() {
+        return useDialogContextValues_unstable;
+    }
+});
+function useDialogContextValues_unstable(state) {
+    const { modalType, open, dialogRef, dialogTitleId, isNestedDialog, inertTrapFocus, requestOpenChange, modalAttributes, triggerAttributes, unmountOnClose } = state;
+    /**
+   * This context is created with "@fluentui/react-context-selector",
+   * there is no sense to memoize it
+   */ const dialog = {
+        open,
+        modalType,
+        dialogRef,
+        dialogTitleId,
+        isNestedDialog,
+        inertTrapFocus,
+        modalAttributes,
+        triggerAttributes,
+        unmountOnClose,
+        requestOpenChange
+    };
+    const dialogSurface = false;
+    return {
+        dialog,
+        dialogSurface
+    };
+}

node_modules/@fluentui/react-dialog/lib-commonjs/components/Dialog/useDialogContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Dialog/useDialogContextValues.ts"],"sourcesContent":["import type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\nimport type { DialogContextValues, DialogState } from './Dialog.types';\n\nexport function useDialogContextValues_unstable(state: DialogState): DialogContextValues {\n  const {\n    modalType,\n    open,\n    dialogRef,\n    dialogTitleId,\n    isNestedDialog,\n    inertTrapFocus,\n    requestOpenChange,\n    modalAttributes,\n    triggerAttributes,\n    unmountOnClose,\n  } = state;\n\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const dialog: DialogContextValue = {\n    open,\n    modalType,\n    dialogRef,\n    dialogTitleId,\n    isNestedDialog,\n    inertTrapFocus,\n    modalAttributes,\n    triggerAttributes,\n    unmountOnClose,\n    requestOpenChange,\n  };\n\n  const dialogSurface: DialogSurfaceContextValue = false;\n\n  return { dialog, dialogSurface };\n}\n"],"names":["useDialogContextValues_unstable","state","modalType","open","dialogRef","dialogTitleId","isNestedDialog","inertTrapFocus","requestOpenChange","modalAttributes","triggerAttributes","unmountOnClose","dialog","dialogSurface"],"mappings":";;;;+BAGgBA;;;;;;AAAT,yCAAyCC,KAAkB;IAChE,MAAM,EACJC,SAAS,EACTC,IAAI,EACJC,SAAS,EACTC,aAAa,EACbC,cAAc,EACdC,cAAc,EACdC,iBAAiB,EACjBC,eAAe,EACfC,iBAAiB,EACjBC,cAAc,EACf,GAAGV;IAEJ;;;GAGC,GACD,MAAMW,SAA6B;QACjCT;QACAD;QACAE;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAH;IACF;IAEA,MAAMK,gBAA2C;IAEjD,OAAO;QAAED;QAAQC;IAAc;AACjC"}