feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,60 @@
+'use client';
+import * as React from 'react';
+import { mergeClasses } from '@griffel/react';
+import { applyTriggerPropsToChildren, getTriggerChild, getReactElementRef, useMergedRefs } from '@fluentui/react-utilities';
+import { OverflowContext } from '../overflowContext';
+import { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';
+import { useOverflowStyles } from './useOverflowStyles.styles';
+/**
+ * Provides an OverflowContext for OverflowItem descendants.
+ */ export const Overflow = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const styles = 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 } = useOverflowContainer(update, {
+        overflowDirection,
+        overflowAxis,
+        padding,
+        minimumVisible,
+        hasHiddenItems,
+        onUpdateItemVisibility: updateVisibilityAttribute
+    });
+    const child = getTriggerChild(children);
+    const clonedChild = applyTriggerPropsToChildren(children, {
+        ref: useMergedRefs(containerRef, ref, getReactElementRef(child)),
+        className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, child === null || child === void 0 ? void 0 : child.props.className)
+    });
+    return /*#__PURE__*/ React.createElement(OverflowContext.Provider, {
+        value: {
+            itemVisibility: overflowState.itemVisibility,
+            groupVisibility: overflowState.groupVisibility,
+            hasOverflow: overflowState.hasOverflow,
+            registerItem,
+            updateOverflow,
+            registerOverflowMenu,
+            registerDivider
+        }
+    }, clonedChild);
+});

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

@@ -0,0 +1,14 @@
+'use client';
+import * as React from 'react';
+import { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';
+import { useOverflowDivider } from '../../useOverflowDivider';
+/**
+ * Attaches overflow item behavior to its child registered with the OverflowContext.
+ * It does not render an element of its own.
+ */ export const OverflowDivider = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { groupId, children } = props;
+    const containerRef = useOverflowDivider(groupId);
+    return applyTriggerPropsToChildren(children, {
+        ref: useMergedRefs(containerRef, ref)
+    });
+});

node_modules/@fluentui/react-overflow/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,4BAA4B;AACvF,SAASC,kBAAkB,QAAQ,2BAA2B;AAG9D;;;CAGC,GACD,OAAO,MAAMC,gCAAkBJ,MAAMK,UAAU,CAAC,CAACC,OAA6BC;IAC5E,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGH;IAE9B,MAAMI,eAAeP,mBAAmBK;IACxC,OAAOP,4BAA4BQ,UAAU;QAC3CF,KAAKL,cAAcQ,cAAcH;IACnC;AACF,GAAG"}

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

@@ -0,0 +1 @@
+import * as React from 'react';

node_modules/@fluentui/react-overflow/lib/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":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -0,0 +1,19 @@
+'use client';
+import * as React from 'react';
+import { applyTriggerPropsToChildren, getReactElementRef, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';
+import { useOverflowItem } from '../../useOverflowItem';
+/**
+ * Attaches overflow item behavior to its child registered with the OverflowContext.
+ * It does not render an element of its own.
+ *
+ * Behaves similarly to other `*Trigger` components in Fluent UI React.
+ */ export const OverflowItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { id, groupId, priority, pinned, children } = props;
+    const containerRef = useOverflowItem(id, priority, groupId, pinned);
+    const child = getTriggerChild(children);
+    return applyTriggerPropsToChildren(children, {
+        ref: useMergedRefs(containerRef, ref, getReactElementRef(child))
+    });
+});
+// type casting here is required to ensure internal type FluentTriggerComponent is not leaked
+OverflowItem.isFluentTriggerComponent = true;

node_modules/@fluentui/react-overflow/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,2BAA2B,EAC3BC,kBAAkB,EAElBC,eAAe,EACfC,aAAa,QACR,4BAA4B;AACnC,SAASC,eAAe,QAAQ,wBAAwB;AAGxD;;;;;CAKC,GACD,OAAO,MAAMC,6BAAeN,MAAMO,UAAU,CAAC,CAACC,OAA0BC;IACtE,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGN;IAEpD,MAAMO,eAAeV,gBAAgBK,IAAIE,UAAUD,SAASE;IAC5D,MAAMG,QAAQb,gBAAgBW;IAE9B,OAAOb,4BAA4Ba,UAAU;QAC3CL,KAAKL,cAAcW,cAAcN,KAAKP,mBAAmBc;IAC3D;AACF,GAAG;AAEH,6FAA6F;AAC5FV,aAAwCW,wBAAwB,GAAG"}

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

@@ -0,0 +1 @@
+import * as React from 'react';

node_modules/@fluentui/react-overflow/lib/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":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -0,0 +1 @@
+export { OverflowItem } from './OverflowItem';

node_modules/@fluentui/react-overflow/lib/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":"AACA,SAASA,YAAY,QAAQ,iBAAiB"}

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

@@ -0,0 +1,14 @@
+'use client';
+
+import { __styles } from '@griffel/react';
+import { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';
+export const useOverflowStyles = /*#__PURE__*/__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/components/useOverflowStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","Brvla84","overflowingItems","zb22lx","d"],"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"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,QAA2B,gBAAgB;AAC3C,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,cAAc;AACnE,OAAO,MAAMC,iBAAiB,gBAAGH,QAAA;EAAAI,YAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAWhC,CAAC","ignoreList":[]}

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

@@ -0,0 +1,15 @@
+'use client';
+import { makeStyles } from '@griffel/react';
+import { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';
+export const useOverflowStyles = makeStyles({
+    overflowMenu: {
+        [`& [${DATA_OVERFLOW_MENU}]`]: {
+            flexShrink: 0
+        }
+    },
+    overflowingItems: {
+        [`& [${DATA_OVERFLOWING}]`]: {
+            display: 'none'
+        }
+    }
+});

node_modules/@fluentui/react-overflow/lib/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;AAEA,SAASA,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,eAAe;AAEpE,OAAO,MAAMC,oBAAoBH,WAAW;IAC1CI,cAAc;QACZ,CAAC,CAAC,GAAG,EAAEF,mBAAmB,CAAC,CAAC,CAAC,EAAE;YAC7BG,YAAY;QACd;IACF;IAEAC,kBAAkB;QAChB,CAAC,CAAC,GAAG,EAAEL,iBAAiB,CAAC,CAAC,CAAC,EAAE;YAC3BM,SAAS;QACX;IACF;AACF,GAAG"}