feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-overflow/lib-commonjs/components/Overflow.js

@@ -0,0 +1,69 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Overflow", {
+    enumerable: true,
+    get: function() {
+        return Overflow;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _react1 = require("@griffel/react");
+const _reactutilities = require("@fluentui/react-utilities");
+const _overflowContext = require("../overflowContext");
+const _useOverflowContainer = require("../useOverflowContainer");
+const _useOverflowStylesstyles = require("./useOverflowStyles.styles");
+const Overflow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const styles = (0, _useOverflowStylesstyles.useOverflowStyles)();
+    const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding, onOverflowChange, hasHiddenItems } = props;
+    const [overflowState, setOverflowState] = _react.useState({
+        hasOverflow: false,
+        itemVisibility: {},
+        groupVisibility: {}
+    });
+    // useOverflowContainer wraps this method in a useEventCallback.
+    const update = (data)=>{
+        const { visibleItems, invisibleItems, groupVisibility } = data;
+        const itemVisibility = {};
+        visibleItems.forEach((item)=>{
+            itemVisibility[item.id] = true;
+        });
+        invisibleItems.forEach((x)=>itemVisibility[x.id] = false);
+        const newState = {
+            hasOverflow: data.invisibleItems.length > 0,
+            itemVisibility,
+            groupVisibility
+        };
+        onOverflowChange === null || onOverflowChange === void 0 ? void 0 : onOverflowChange(null, {
+            ...newState
+        });
+        setOverflowState(newState);
+    };
+    const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = (0, _useOverflowContainer.useOverflowContainer)(update, {
+        overflowDirection,
+        overflowAxis,
+        padding,
+        minimumVisible,
+        hasHiddenItems,
+        onUpdateItemVisibility: _useOverflowContainer.updateVisibilityAttribute
+    });
+    const child = (0, _reactutilities.getTriggerChild)(children);
+    const clonedChild = (0, _reactutilities.applyTriggerPropsToChildren)(children, {
+        ref: (0, _reactutilities.useMergedRefs)(containerRef, ref, (0, _reactutilities.getReactElementRef)(child)),
+        className: (0, _react1.mergeClasses)('fui-Overflow', styles.overflowMenu, styles.overflowingItems, child === null || child === void 0 ? void 0 : child.props.className)
+    });
+    return /*#__PURE__*/ _react.createElement(_overflowContext.OverflowContext.Provider, {
+        value: {
+            itemVisibility: overflowState.itemVisibility,
+            groupVisibility: overflowState.groupVisibility,
+            hasOverflow: overflowState.hasOverflow,
+            registerItem,
+            updateOverflow,
+            registerOverflowMenu,
+            registerDivider
+        }
+    }, clonedChild);
+});

node_modules/@fluentui/react-overflow/lib-commonjs/components/OverflowDivider/OverflowDivider.js

@@ -0,0 +1,22 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "OverflowDivider", {
+    enumerable: true,
+    get: function() {
+        return OverflowDivider;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _useOverflowDivider = require("../../useOverflowDivider");
+const OverflowDivider = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const { groupId, children } = props;
+    const containerRef = (0, _useOverflowDivider.useOverflowDivider)(groupId);
+    return (0, _reactutilities.applyTriggerPropsToChildren)(children, {
+        ref: (0, _reactutilities.useMergedRefs)(containerRef, ref)
+    });
+});

node_modules/@fluentui/react-overflow/lib-commonjs/components/OverflowDivider/OverflowDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OverflowDivider/OverflowDivider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowDivider } from '../../useOverflowDivider';\nimport { OverflowDividerProps } from './OverflowDivider.types';\n\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */\nexport const OverflowDivider = React.forwardRef((props: OverflowDividerProps, ref) => {\n  const { groupId, children } = props;\n\n  const containerRef = useOverflowDivider(groupId);\n  return applyTriggerPropsToChildren(children, {\n    ref: useMergedRefs(containerRef, ref),\n  });\n});\n"],"names":["React","applyTriggerPropsToChildren","useMergedRefs","useOverflowDivider","OverflowDivider","forwardRef","props","ref","groupId","children","containerRef"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAC4B,4BAA4B;oCACpD,2BAA2B;AAOvD,MAAMI,kBAAAA,WAAAA,GAAkBJ,OAAMK,UAAU,CAAC,CAACC,OAA6BC;IAC5E,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGH;IAE9B,MAAMI,mBAAeP,sCAAAA,EAAmBK;IACxC,WAAOP,2CAAAA,EAA4BQ,UAAU;QAC3CF,SAAKL,6BAAAA,EAAcQ,cAAcH;IACnC;AACF,GAAG"}

node_modules/@fluentui/react-overflow/lib-commonjs/components/OverflowDivider/OverflowDivider.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-overflow/lib-commonjs/components/OverflowDivider/OverflowDivider.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OverflowDivider/OverflowDivider.types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * OverflowDividerProps\n */\nexport type OverflowDividerProps = {\n  /**\n   * Assigns the item to a group, group visibility can be watched.\n   */\n  groupId: string;\n  /**\n   * The single child that has overflow item behavior attached.\n   */\n  children: React.ReactElement;\n};\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

node_modules/@fluentui/react-overflow/lib-commonjs/components/OverflowItem/OverflowItem.js

@@ -0,0 +1,25 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "OverflowItem", {
+    enumerable: true,
+    get: function() {
+        return OverflowItem;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _useOverflowItem = require("../../useOverflowItem");
+const OverflowItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const { id, groupId, priority, pinned, children } = props;
+    const containerRef = (0, _useOverflowItem.useOverflowItem)(id, priority, groupId, pinned);
+    const child = (0, _reactutilities.getTriggerChild)(children);
+    return (0, _reactutilities.applyTriggerPropsToChildren)(children, {
+        ref: (0, _reactutilities.useMergedRefs)(containerRef, ref, (0, _reactutilities.getReactElementRef)(child))
+    });
+});
+// type casting here is required to ensure internal type FluentTriggerComponent is not leaked
+OverflowItem.isFluentTriggerComponent = true;

node_modules/@fluentui/react-overflow/lib-commonjs/components/OverflowItem/OverflowItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OverflowItem/OverflowItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  applyTriggerPropsToChildren,\n  getReactElementRef,\n  type FluentTriggerComponent,\n  getTriggerChild,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\nimport { OverflowItemProps } from './OverflowItem.types';\n\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n *\n * Behaves similarly to other `*Trigger` components in Fluent UI React.\n */\nexport const OverflowItem = React.forwardRef((props: OverflowItemProps, ref) => {\n  const { id, groupId, priority, pinned, children } = props;\n\n  const containerRef = useOverflowItem(id, priority, groupId, pinned);\n  const child = getTriggerChild(children);\n\n  return applyTriggerPropsToChildren(children, {\n    ref: useMergedRefs(containerRef, ref, getReactElementRef(child)),\n  });\n});\n\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(OverflowItem as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["React","applyTriggerPropsToChildren","getReactElementRef","getTriggerChild","useMergedRefs","useOverflowItem","OverflowItem","forwardRef","props","ref","id","groupId","priority","pinned","children","containerRef","child","isFluentTriggerComponent"],"mappings":"AAAA;;;;;+BAmBaM;;;;;;;iEAjBU,QAAQ;gCAOxB,4BAA4B;iCACH,wBAAwB;AASjD,qBAAMA,WAAAA,GAAeN,OAAMO,UAAU,CAAC,CAACC,OAA0BC;IACtE,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGN;IAEpD,MAAMO,mBAAeV,gCAAAA,EAAgBK,IAAIE,UAAUD,SAASE;IAC5D,MAAMG,YAAQb,+BAAAA,EAAgBW;IAE9B,WAAOb,2CAAAA,EAA4Ba,UAAU;QAC3CL,SAAKL,6BAAAA,EAAcW,cAAcN,SAAKP,kCAAAA,EAAmBc;IAC3D;AACF,GAAG;AAEH,6FAA6F;AAC5FV,aAAwCW,wBAAwB,GAAG"}

node_modules/@fluentui/react-overflow/lib-commonjs/components/OverflowItem/OverflowItem.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-overflow/lib-commonjs/components/OverflowItem/OverflowItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OverflowItem/OverflowItem.types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * OverflowItemProps\n */\nexport type OverflowItemProps = {\n  /**\n   * The unique identifier for the item used by the overflow manager.\n   */\n  id: string;\n  /**\n   * Assigns the item to a group, group visibility can be watched.\n   */\n  groupId?: string;\n  /**\n   * The single child that has overflow item behavior attached.\n   */\n  children: React.ReactElement;\n} & (\n  | {\n      /**\n       * If true, the item will never overflow and will always be visible.\n       * Mutually exclusive with `priority`.\n       */\n      pinned?: boolean;\n      priority?: never;\n    }\n  | {\n      pinned?: never;\n      /**\n       * A higher priority means the item overflows later.\n       * Mutually exclusive with `pinned`.\n       */\n      priority?: number;\n    }\n);\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

node_modules/@fluentui/react-overflow/lib-commonjs/components/OverflowItem/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "OverflowItem", {
+    enumerable: true,
+    get: function() {
+        return _OverflowItem.OverflowItem;
+    }
+});
+const _OverflowItem = require("./OverflowItem");

node_modules/@fluentui/react-overflow/lib-commonjs/components/OverflowItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/OverflowItem/index.ts"],"sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"],"names":["OverflowItem"],"mappings":";;;;;;;eACSA,0BAAY;;;8BAAQ,iBAAiB"}

node_modules/@fluentui/react-overflow/lib-commonjs/components/useOverflowStyles.styles.js

@@ -0,0 +1,25 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useOverflowStyles", {
+    enumerable: true,
+    get: function() {
+        return useOverflowStyles;
+    }
+});
+const _react = require("@griffel/react");
+const useOverflowStyles = /*#__PURE__*/ (0, _react.__styles)({
+    overflowMenu: {
+        Brvla84: "fyfkpbf"
+    },
+    overflowingItems: {
+        zb22lx: "f10570jf"
+    }
+}, {
+    d: [
+        ".fyfkpbf [data-overflow-menu]{flex-shrink:0;}",
+        ".f10570jf [data-overflowing]{display:none;}"
+    ]
+});

node_modules/@fluentui/react-overflow/lib-commonjs/components/useOverflowStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useOverflowStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\nexport const useOverflowStyles = makeStyles({\n    overflowMenu: {\n        [`& [${DATA_OVERFLOW_MENU}]`]: {\n            flexShrink: 0\n        }\n    },\n    overflowingItems: {\n        [`& [${DATA_OVERFLOWING}]`]: {\n            display: 'none'\n        }\n    }\n});\n"],"names":["__styles","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","Brvla84","overflowingItems","zb22lx","d"],"mappings":"AAAA,YAAY;;;;;;;;;;;uBACe,gBAAgB;AAEpC,MAAMG,iBAAiB,GAAA,WAAA,OAAGH,eAAA,EAAA;IAAAI,YAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,gBAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAWhC,CAAC"}

node_modules/@fluentui/react-overflow/lib-commonjs/components/useOverflowStyles.styles.raw.js

@@ -0,0 +1,25 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useOverflowStyles", {
+    enumerable: true,
+    get: function() {
+        return useOverflowStyles;
+    }
+});
+const _react = require("@griffel/react");
+const _constants = require("../constants");
+const useOverflowStyles = (0, _react.makeStyles)({
+    overflowMenu: {
+        [`& [${_constants.DATA_OVERFLOW_MENU}]`]: {
+            flexShrink: 0
+        }
+    },
+    overflowingItems: {
+        [`& [${_constants.DATA_OVERFLOWING}]`]: {
+            display: 'none'
+        }
+    }
+});

node_modules/@fluentui/react-overflow/lib-commonjs/components/useOverflowStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/useOverflowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nexport const useOverflowStyles = makeStyles({\n  overflowMenu: {\n    [`& [${DATA_OVERFLOW_MENU}]`]: {\n      flexShrink: 0,\n    },\n  },\n\n  overflowingItems: {\n    [`& [${DATA_OVERFLOWING}]`]: {\n      display: 'none',\n    },\n  },\n});\n"],"names":["makeStyles","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","flexShrink","overflowingItems","display"],"mappings":"AAAA;;;;;;;;;;;uBAE2B,iBAAiB;2BACS,eAAe;AAE7D,MAAMG,wBAAoBH,iBAAAA,EAAW;IAC1CI,cAAc;QACZ,CAAC,CAAC,GAAG,EAAEF,6BAAAA,CAAmB,CAAC,CAAC,CAAC,EAAE;YAC7BG,YAAY;QACd;IACF;IAEAC,kBAAkB;QAChB,CAAC,CAAC,GAAG,EAAEL,2BAAAA,CAAiB,CAAC,CAAC,CAAC,EAAE;YAC3BM,SAAS;QACX;IACF;AACF,GAAG"}