@fluentui/react-overflow 9.8.0 → 9.9.1

package/lib-commonjs/useOverflowMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useOverflowMenu.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(\n  id?: string,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n): { ref: React.MutableRefObject<TElement | null>; overflowCount: number; isOverflowing: boolean } {\n  const elementId = useId('overflow-menu', id);\n  const overflowCount = useOverflowCount();\n  const registerOverflowMenu = useOverflowContext(v => v.registerOverflowMenu);\n  const updateOverflow = useOverflowContext(v => v.updateOverflow);\n  const ref = React.useRef<TElement | null>(null);\n  const isOverflowing = overflowCount > 0;\n\n  useIsomorphicLayoutEffect(() => {\n    if (ref.current) {\n      return registerOverflowMenu(ref.current);\n    }\n  }, [registerOverflowMenu, isOverflowing, elementId]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (isOverflowing) {\n      updateOverflow();\n    }\n  }, [isOverflowing, updateOverflow, ref]);\n\n  return { ref, overflowCount, isOverflowing };\n}\n"],"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","v","updateOverflow","ref","useRef","isOverflowing","current"],"mappings":"AAAA;;;;;+BAOgBK;;;;;;;iEALO,QAAQ;gCACkB,4BAA4B;iCAC1C,oBAAoB;kCACtB,qBAAqB;AAE/C,yBACLC,EAAW;IAGX,MAAMC,gBAAYN,qBAAAA,EAAM,iBAAiBK;IACzC,MAAME,oBAAgBJ,kCAAAA;IACtB,MAAMK,2BAAuBN,mCAAAA,EAAmBO,CAAAA,IAAKA,EAAED,oBAAoB;IAC3E,MAAME,qBAAiBR,mCAAAA,EAAmBO,CAAAA,IAAKA,EAAEC,cAAc;IAC/D,MAAMC,MAAMZ,OAAMa,MAAM,CAAkB;IAC1C,MAAMC,gBAAgBN,gBAAgB;IAEtCN,6CAAAA,EAA0B;QACxB,IAAIU,IAAIG,OAAO,EAAE;YACf,OAAON,qBAAqBG,IAAIG,OAAO;QACzC;IACF,GAAG;QAACN;QAAsBK;QAAeP;KAAU;QAEnDL,yCAAAA,EAA0B;QACxB,IAAIY,eAAe;YACjBH;QACF;IACF,GAAG;QAACG;QAAeH;QAAgBC;KAAI;IAEvC,OAAO;QAAEA;QAAKJ;QAAeM;IAAc;AAC7C"}
+{"version":3,"sources":["../src/useOverflowMenu.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(\n  id?: string,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n): { ref: React.MutableRefObject<TElement | null>; overflowCount: number; isOverflowing: boolean } {\n  const elementId = useId('overflow-menu', id);\n  const overflowCount = useOverflowCount();\n  const { registerOverflowMenu, forceUpdateOverflow } = useOverflowContext();\n  const ref = React.useRef<TElement | null>(null);\n  const isOverflowing = overflowCount > 0;\n\n  useIsomorphicLayoutEffect(() => {\n    if (ref.current) {\n      const unregister = registerOverflowMenu(ref.current);\n      if (isOverflowing) {\n        forceUpdateOverflow();\n      }\n      return () => {\n        unregister();\n        forceUpdateOverflow();\n      };\n    }\n  }, [registerOverflowMenu, forceUpdateOverflow, isOverflowing, elementId]);\n\n  return { ref, overflowCount, isOverflowing };\n}\n"],"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","forceUpdateOverflow","ref","useRef","isOverflowing","current","unregister"],"mappings":"AAAA;;;;;+BAOgBK;;;;;;;iEALO,QAAQ;gCACkB,4BAA4B;iCAC1C,oBAAoB;kCACtB,qBAAqB;AAE/C,yBACLC,EAAW;IAGX,MAAMC,gBAAYN,qBAAAA,EAAM,iBAAiBK;IACzC,MAAME,gBAAgBJ,sCAAAA;IACtB,MAAM,EAAEK,oBAAoB,EAAEC,mBAAmB,EAAE,OAAGP,mCAAAA;IACtD,MAAMQ,MAAMX,OAAMY,MAAM,CAAkB;IAC1C,MAAMC,gBAAgBL,gBAAgB;IAEtCN,6CAAAA,EAA0B;QACxB,IAAIS,IAAIG,OAAO,EAAE;YACf,MAAMC,aAAaN,qBAAqBE,IAAIG,OAAO;YACnD,IAAID,eAAe;gBACjBH;YACF;YACA,OAAO;gBACLK;gBACAL;YACF;QACF;IACF,GAAG;QAACD;QAAsBC;QAAqBG;QAAeN;KAAU;IAExE,OAAO;QAAEI;QAAKH;QAAeK;IAAc;AAC7C"}

package/lib-commonjs/useOverflowSnapshot.js

@@ -0,0 +1,30 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useOverflowSnapshot", {
+    enumerable: true,
+    get: function() {
+        return useOverflowSnapshot;
+    }
+});
+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 _overflowContext = require("./overflowContext");
+function useOverflowSnapshot(selector) {
+    const { getSnapshot, subscribe } = (0, _overflowContext.useOverflowContext)();
+    const select = (0, _reactutilities.useEventCallback)(selector);
+    const [selected, setSelected] = _react.useState(()=>selector(getSnapshot()));
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        const checkForUpdates = ()=>setSelected(select(getSnapshot()));
+        checkForUpdates();
+        return subscribe(checkForUpdates);
+    }, [
+        subscribe,
+        getSnapshot,
+        select
+    ]);
+    return selected;
+}

package/lib-commonjs/useOverflowSnapshot.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useOverflowSnapshot.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowSnapshot } from '@fluentui/priority-overflow';\nimport * as React from 'react';\nimport { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * Subscribes to the overflow snapshot and returns a derived slice of it.\n *\n * @param selector - derives the slice of the snapshot the consumer depends on\n */\nexport function useOverflowSnapshot<Selected>(selector: (snapshot: OverflowSnapshot) => Selected): Selected {\n  const { getSnapshot, subscribe } = useOverflowContext();\n  const select = useEventCallback(selector);\n\n  const [selected, setSelected] = React.useState(() => selector(getSnapshot()));\n\n  useIsomorphicLayoutEffect(() => {\n    const checkForUpdates = () => setSelected(select(getSnapshot()));\n    checkForUpdates();\n    return subscribe(checkForUpdates);\n  }, [subscribe, getSnapshot, select]);\n\n  return selected;\n}\n"],"names":["React","useEventCallback","useIsomorphicLayoutEffect","useOverflowContext","useOverflowSnapshot","selector","getSnapshot","subscribe","select","selected","setSelected","useState","checkForUpdates"],"mappings":"AAAA;;;;;;;;;;;;iEAGuB,QAAQ;gCAC6B,4BAA4B;iCACrD,oBAAoB;AAOhD,SAASI,oBAA8BC,QAAkD;IAC9F,MAAM,EAAEC,WAAW,EAAEC,SAAS,EAAE,OAAGJ,mCAAAA;IACnC,MAAMK,aAASP,gCAAAA,EAAiBI;IAEhC,MAAM,CAACI,UAAUC,YAAY,GAAGV,OAAMW,QAAQ,CAAC,IAAMN,SAASC;QAE9DJ,yCAAAA,EAA0B;QACxB,MAAMU,kBAAkB,IAAMF,YAAYF,OAAOF;QACjDM;QACA,OAAOL,UAAUK;IACnB,GAAG;QAACL;QAAWD;QAAaE;KAAO;IAEnC,OAAOC;AACT"}

package/lib-commonjs/useOverflowVisibility.js

@@ -9,17 +9,11 @@ Object.defineProperty(exports, "useOverflowVisibility", {
         return useOverflowVisibility;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _overflowContext = require("./overflowContext");
+const _useOverflowSnapshot = require("./useOverflowSnapshot");
 function useOverflowVisibility() {
-    const itemVisibility = (0, _overflowContext.useOverflowContext)((ctx)=>ctx.itemVisibility);
-    const groupVisibility = (0, _overflowContext.useOverflowContext)((ctx)=>ctx.groupVisibility);
-    return _react.useMemo(()=>({
-            itemVisibility,
-            groupVisibility
-        }), [
-        itemVisibility,
-        groupVisibility
-    ]);
+    return (0, _useOverflowSnapshot.useOverflowSnapshot)(selectVisibility);
 }
+const selectVisibility = (snapshot)=>({
+        itemVisibility: snapshot.itemVisibility,
+        groupVisibility: snapshot.groupVisibility
+    });

package/lib-commonjs/useOverflowVisibility.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/useOverflowVisibility.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * A hook that returns the visibility status of all items and groups.\n *\n * ⚠️ Heads up!\n *\n * This hook will cause the component it is in to re-render for every single time an item overflows or becomes\n * visible - use with caution\n * @returns visibility status of all items and groups\n */\nexport function useOverflowVisibility(): {\n  itemVisibility: Record<string, boolean>;\n  groupVisibility: Record<string, import('@fluentui/priority-overflow').OverflowGroupState>;\n} {\n  const itemVisibility = useOverflowContext(ctx => ctx.itemVisibility);\n  const groupVisibility = useOverflowContext(ctx => ctx.groupVisibility);\n\n  return React.useMemo(() => ({ itemVisibility, groupVisibility }), [itemVisibility, groupVisibility]);\n}\n"],"names":["React","useOverflowContext","useOverflowVisibility","itemVisibility","ctx","groupVisibility","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;iCACI,oBAAoB;AAWhD,SAASE;IAId,MAAMC,qBAAiBF,mCAAAA,EAAmBG,CAAAA,MAAOA,IAAID,cAAc;IACnE,MAAME,kBAAkBJ,uCAAAA,EAAmBG,CAAAA,MAAOA,IAAIC,eAAe;IAErE,OAAOL,OAAMM,OAAO,CAAC,IAAO,CAAA;YAAEH;YAAgBE;SAAgB,CAAA,EAAI;QAACF;QAAgBE;KAAgB;AACrG"}
+{"version":3,"sources":["../src/useOverflowVisibility.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowGroupState, OverflowSnapshot } from '@fluentui/priority-overflow';\nimport { useOverflowSnapshot } from './useOverflowSnapshot';\n\n/**\n * A hook that returns the visibility status of all items and groups.\n *\n * ⚠️ Heads up!\n *\n * This hook will cause the component it is in to re-render for every single time an item overflows or becomes\n * visible - use with caution\n * @returns visibility status of all items and groups\n */\nexport function useOverflowVisibility(): {\n  itemVisibility: Record<string, boolean>;\n  groupVisibility: Record<string, OverflowGroupState>;\n} {\n  return useOverflowSnapshot(selectVisibility);\n}\n\nconst selectVisibility = (\n  snapshot: OverflowSnapshot,\n): {\n  itemVisibility: Record<string, boolean>;\n  groupVisibility: Record<string, OverflowGroupState>;\n} => ({\n  itemVisibility: snapshot.itemVisibility,\n  groupVisibility: snapshot.groupVisibility,\n});\n"],"names":["useOverflowSnapshot","useOverflowVisibility","selectVisibility","snapshot","itemVisibility","groupVisibility"],"mappings":"AAAA;;;;;;;;;;;qCAGoC,wBAAwB;AAWrD,SAASC;IAId,WAAOD,wCAAAA,EAAoBE;AAC7B;AAEA,MAAMA,mBAAmB,CACvBC,WAII,CAAA;QACJC,gBAAgBD,SAASC,cAAc;QACvCC,iBAAiBF,SAASE,eAAe;KAC3C,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-overflow",
-  "version": "9.8.0",
+  "version": "9.9.1",
   "description": "React bindings for @fluentui/priority-overflow",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,11 +12,10 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/priority-overflow": "^9.3.0",
-    "@fluentui/react-context-selector": "^9.2.17",
+    "@fluentui/priority-overflow": "^9.4.1",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.4",
+    "@fluentui/react-utilities": "^9.26.5",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },

package/lib/components/Overflow.js

@@ -1,61 +0,0 @@
-'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,
-            containerRef
-        }
-    }, clonedChild);
-});

package/lib/components/Overflow.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Overflow.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport {\n  applyTriggerPropsToChildren,\n  getTriggerChild,\n  getReactElementRef,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n\ninterface OverflowState {\n  hasOverflow: boolean;\n  itemVisibility: Record<string, boolean>;\n  groupVisibility: Record<string, OverflowGroupState>;\n}\n\nexport interface OnOverflowChangeData extends OverflowState {}\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n  Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible' | 'hasHiddenItems'>\n> & {\n  children: React.ReactElement;\n\n  // overflow is not caused by DOM event\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type\n  onOverflowChange?: (ev: null, data: OverflowState) => void;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n  const styles = useOverflowStyles();\n\n  const {\n    children,\n    minimumVisible,\n    overflowAxis = 'horizontal',\n    overflowDirection,\n    padding,\n    onOverflowChange,\n    hasHiddenItems,\n  } = props;\n\n  const [overflowState, setOverflowState] = React.useState<OverflowState>({\n    hasOverflow: false,\n    itemVisibility: {},\n    groupVisibility: {},\n  });\n\n  // useOverflowContainer wraps this method in a useEventCallback.\n  const update: OnUpdateOverflow = data => {\n    const { visibleItems, invisibleItems, groupVisibility } = data;\n\n    const itemVisibility: Record<string, boolean> = {};\n    visibleItems.forEach(item => {\n      itemVisibility[item.id] = true;\n    });\n    invisibleItems.forEach(x => (itemVisibility[x.id] = false));\n    const newState = {\n      hasOverflow: data.invisibleItems.length > 0,\n      itemVisibility,\n      groupVisibility,\n    };\n    onOverflowChange?.(null, { ...newState });\n\n    setOverflowState(newState);\n  };\n\n  const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(\n    update,\n    {\n      overflowDirection,\n      overflowAxis,\n      padding,\n      minimumVisible,\n      hasHiddenItems,\n      onUpdateItemVisibility: updateVisibilityAttribute,\n    },\n  );\n\n  const child = getTriggerChild<HTMLElement>(children);\n  const clonedChild = applyTriggerPropsToChildren(children, {\n    ref: useMergedRefs(containerRef, ref, getReactElementRef(child)),\n    className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, child?.props.className),\n  });\n\n  return (\n    <OverflowContext.Provider\n      value={{\n        itemVisibility: overflowState.itemVisibility,\n        groupVisibility: overflowState.groupVisibility,\n        hasOverflow: overflowState.hasOverflow,\n        registerItem,\n        updateOverflow,\n        registerOverflowMenu,\n        registerDivider,\n        containerRef,\n      }}\n    >\n      {clonedChild}\n    </OverflowContext.Provider>\n  );\n});\n"],"names":["React","mergeClasses","applyTriggerPropsToChildren","getTriggerChild","getReactElementRef","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","useOverflowStyles","Overflow","forwardRef","props","ref","styles","children","minimumVisible","overflowAxis","overflowDirection","padding","onOverflowChange","hasHiddenItems","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","newState","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","onUpdateItemVisibility","child","clonedChild","className","overflowMenu","overflowingItems","Provider","value"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,SACEC,2BAA2B,EAC3BC,eAAe,EACfC,kBAAkB,EAClBC,aAAa,QACR,4BAA4B;AAEnC,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ,0BAA0B;AAC1F,SAASC,iBAAiB,QAAQ,6BAA6B;AAuB/D;;CAEC,GACD,OAAO,MAAMC,yBAAWV,MAAMW,UAAU,CAAC,CAACC,OAAsBC;IAC9D,MAAMC,SAASL;IAEf,MAAM,EACJM,QAAQ,EACRC,cAAc,EACdC,eAAe,YAAY,EAC3BC,iBAAiB,EACjBC,OAAO,EACPC,gBAAgB,EAChBC,cAAc,EACf,GAAGT;IAEJ,MAAM,CAACU,eAAeC,iBAAiB,GAAGvB,MAAMwB,QAAQ,CAAgB;QACtEC,aAAa;QACbC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACpB;IAEA,gEAAgE;IAChE,MAAMC,SAA2BC,CAAAA;QAC/B,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEJ,eAAe,EAAE,GAAGE;QAE1D,MAAMH,iBAA0C,CAAC;QACjDI,aAAaE,OAAO,CAACC,CAAAA;YACnBP,cAAc,CAACO,KAAKC,EAAE,CAAC,GAAG;QAC5B;QACAH,eAAeC,OAAO,CAACG,CAAAA,IAAMT,cAAc,CAACS,EAAED,EAAE,CAAC,GAAG;QACpD,MAAME,WAAW;YACfX,aAAaI,KAAKE,cAAc,CAACM,MAAM,GAAG;YAC1CX;YACAC;QACF;QACAP,6BAAAA,uCAAAA,iBAAmB,MAAM;YAAE,GAAGgB,QAAQ;QAAC;QAEvCb,iBAAiBa;IACnB;IAEA,MAAM,EAAEE,YAAY,EAAEC,YAAY,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,eAAe,EAAE,GAAGlC,qBAC5FoB,QACA;QACEV;QACAD;QACAE;QACAH;QACAK;QACAsB,wBAAwBpC;IAC1B;IAGF,MAAMqC,QAAQzC,gBAA6BY;IAC3C,MAAM8B,cAAc3C,4BAA4Ba,UAAU;QACxDF,KAAKR,cAAciC,cAAczB,KAAKT,mBAAmBwC;QACzDE,WAAW7C,aAAa,gBAAgBa,OAAOiC,YAAY,EAAEjC,OAAOkC,gBAAgB,EAAEJ,kBAAAA,4BAAAA,MAAOhC,KAAK,CAACkC,SAAS;IAC9G;IAEA,qBACE,oBAACxC,gBAAgB2C,QAAQ;QACvBC,OAAO;YACLxB,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCc;YACAC;YACAC;YACAC;YACAJ;QACF;OAECO;AAGP,GAAG"}

package/lib/components/useOverflowStyles.styles.js

@@ -1,14 +0,0 @@
-'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;}"]
-});

package/lib/components/useOverflowStyles.styles.js.map

@@ -1 +0,0 @@
-{"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":[]}

package/lib/components/useOverflowStyles.styles.raw.js

@@ -1,15 +0,0 @@
-'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'
-        }
-    }
-});

package/lib/components/useOverflowStyles.styles.raw.js.map

@@ -1 +0,0 @@
-{"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"}

package/lib-commonjs/components/Overflow.js

@@ -1,70 +0,0 @@
-'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,
-            containerRef
-        }
-    }, clonedChild);
-});

package/lib-commonjs/components/Overflow.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/Overflow.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport {\n  applyTriggerPropsToChildren,\n  getTriggerChild,\n  getReactElementRef,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n\ninterface OverflowState {\n  hasOverflow: boolean;\n  itemVisibility: Record<string, boolean>;\n  groupVisibility: Record<string, OverflowGroupState>;\n}\n\nexport interface OnOverflowChangeData extends OverflowState {}\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n  Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible' | 'hasHiddenItems'>\n> & {\n  children: React.ReactElement;\n\n  // overflow is not caused by DOM event\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type\n  onOverflowChange?: (ev: null, data: OverflowState) => void;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n  const styles = useOverflowStyles();\n\n  const {\n    children,\n    minimumVisible,\n    overflowAxis = 'horizontal',\n    overflowDirection,\n    padding,\n    onOverflowChange,\n    hasHiddenItems,\n  } = props;\n\n  const [overflowState, setOverflowState] = React.useState<OverflowState>({\n    hasOverflow: false,\n    itemVisibility: {},\n    groupVisibility: {},\n  });\n\n  // useOverflowContainer wraps this method in a useEventCallback.\n  const update: OnUpdateOverflow = data => {\n    const { visibleItems, invisibleItems, groupVisibility } = data;\n\n    const itemVisibility: Record<string, boolean> = {};\n    visibleItems.forEach(item => {\n      itemVisibility[item.id] = true;\n    });\n    invisibleItems.forEach(x => (itemVisibility[x.id] = false));\n    const newState = {\n      hasOverflow: data.invisibleItems.length > 0,\n      itemVisibility,\n      groupVisibility,\n    };\n    onOverflowChange?.(null, { ...newState });\n\n    setOverflowState(newState);\n  };\n\n  const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(\n    update,\n    {\n      overflowDirection,\n      overflowAxis,\n      padding,\n      minimumVisible,\n      hasHiddenItems,\n      onUpdateItemVisibility: updateVisibilityAttribute,\n    },\n  );\n\n  const child = getTriggerChild<HTMLElement>(children);\n  const clonedChild = applyTriggerPropsToChildren(children, {\n    ref: useMergedRefs(containerRef, ref, getReactElementRef(child)),\n    className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, child?.props.className),\n  });\n\n  return (\n    <OverflowContext.Provider\n      value={{\n        itemVisibility: overflowState.itemVisibility,\n        groupVisibility: overflowState.groupVisibility,\n        hasOverflow: overflowState.hasOverflow,\n        registerItem,\n        updateOverflow,\n        registerOverflowMenu,\n        registerDivider,\n        containerRef,\n      }}\n    >\n      {clonedChild}\n    </OverflowContext.Provider>\n  );\n});\n"],"names":["React","mergeClasses","applyTriggerPropsToChildren","getTriggerChild","getReactElementRef","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","useOverflowStyles","Overflow","forwardRef","props","ref","styles","children","minimumVisible","overflowAxis","overflowDirection","padding","onOverflowChange","hasHiddenItems","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","newState","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","onUpdateItemVisibility","child","clonedChild","className","overflowMenu","overflowingItems","Provider","value"],"mappings":"AAAA;;;;;+BAwCaU;;;;;;;iEAtCU,QAAQ;wBACF,iBAAiB;gCAOvC,4BAA4B;iCAEH,qBAAqB;sCACW,0BAA0B;yCACxD,6BAA6B;AA0BxD,iBAAMA,WAAAA,GAAWV,OAAMW,UAAU,CAAC,CAACC,OAAsBC;IAC9D,MAAMC,aAASL,0CAAAA;IAEf,MAAM,EACJM,QAAQ,EACRC,cAAc,EACdC,eAAe,YAAY,EAC3BC,iBAAiB,EACjBC,OAAO,EACPC,gBAAgB,EAChBC,cAAc,EACf,GAAGT;IAEJ,MAAM,CAACU,eAAeC,iBAAiB,GAAGvB,OAAMwB,QAAQ,CAAgB;QACtEC,aAAa;QACbC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACpB;IAEA,gEAAgE;IAChE,MAAMC,SAA2BC,CAAAA;QAC/B,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEJ,eAAe,EAAE,GAAGE;QAE1D,MAAMH,iBAA0C,CAAC;QACjDI,aAAaE,OAAO,CAACC,CAAAA;YACnBP,cAAc,CAACO,KAAKC,EAAE,CAAC,GAAG;QAC5B;QACAH,eAAeC,OAAO,CAACG,CAAAA,IAAMT,cAAc,CAACS,EAAED,EAAE,CAAC,GAAG;QACpD,MAAME,WAAW;YACfX,aAAaI,KAAKE,cAAc,CAACM,MAAM,GAAG;YAC1CX;YACAC;QACF;QACAP,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAmB,MAAM;YAAE,GAAGgB,QAAQ;QAAC;QAEvCb,iBAAiBa;IACnB;IAEA,MAAM,EAAEE,YAAY,EAAEC,YAAY,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,eAAe,EAAE,OAAGlC,0CAAAA,EAC5FoB,QACA;QACEV;QACAD;QACAE;QACAH;QACAK;QACAsB,wBAAwBpC,+CAAAA;IAC1B;IAGF,MAAMqC,YAAQzC,+BAAAA,EAA6BY;IAC3C,MAAM8B,kBAAc3C,2CAAAA,EAA4Ba,UAAU;QACxDF,SAAKR,6BAAAA,EAAciC,cAAczB,SAAKT,kCAAAA,EAAmBwC;QACzDE,eAAW7C,oBAAAA,EAAa,gBAAgBa,OAAOiC,YAAY,EAAEjC,OAAOkC,gBAAgB,EAAEJ,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOhC,KAAK,CAACkC,SAAS;IAC9G;IAEA,OAAA,WAAA,GACE,OAAA,aAAA,CAACxC,gCAAAA,CAAgB2C,QAAQ,EAAA;QACvBC,OAAO;YACLxB,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCc;YACAC;YACAC;YACAC;YACAJ;QACF;OAECO;AAGP,GAAG"}

package/lib-commonjs/components/useOverflowStyles.styles.js

@@ -1,25 +0,0 @@
-'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;}"
-    ]
-});

package/lib-commonjs/components/useOverflowStyles.styles.js.map

@@ -1 +0,0 @@
-{"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"}

package/lib-commonjs/components/useOverflowStyles.styles.raw.js

@@ -1,25 +0,0 @@
-'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'
-        }
-    }
-});

package/lib-commonjs/components/useOverflowStyles.styles.raw.js.map

@@ -1 +0,0 @@
-{"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"}