@fluentui/react-overflow 9.0.43 → 9.1.0

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/react-overflow
 
-This log was last generated on Thu, 09 Nov 2023 17:23:08 GMT and should not be manually modified.
+This log was last generated on Fri, 10 Nov 2023 13:45:57 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.1.0)
+
+Fri, 10 Nov 2023 13:45:57 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.43..@fluentui/react-overflow_v9.1.0)
+
+### Minor changes
+
+- feat: Implement useOverflowVisibility hook ([PR #29809](https://github.com/microsoft/fluentui/pull/29809) by lingfangao@hotmail.com)
+
 ## [9.0.43](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.43)
 
-Thu, 09 Nov 2023 17:23:08 GMT 
+Thu, 09 Nov 2023 17:29:38 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.42..@fluentui/react-overflow_v9.0.43)
 
 ### Patches

package/dist/index.d.ts

@@ -153,4 +153,18 @@ export declare function useOverflowMenu<TElement extends HTMLElement>(id?: strin
     isOverflowing: boolean;
 };
 
+/**
+ * A hook that returns the visibility status of all items and groups.
+ *
+ * ⚠️ Heads up!
+ *
+ * This hook will cause the component it is in to re-render for every single time an item overflows or becomes
+ * visible - use with caution
+ * @returns visibility status of all items and groups
+ */
+export declare function useOverflowVisibility(): {
+    itemVisibility: Record<string, boolean>;
+    groupVisibility: Record<string, OverflowGroupState>;
+};
+
 export { }

package/lib/index.js

@@ -7,6 +7,7 @@ export { useOverflowCount } from './useOverflowCount';
 export { useOverflowItem } from './useOverflowItem';
 export { useOverflowMenu } from './useOverflowMenu';
 export { useOverflowDivider } from './useOverflowDivider';
+export { useOverflowVisibility } from './useOverflowVisibility';
 export { useOverflowContext } from './overflowContext';
 export { OverflowItem } from './components/OverflowItem/OverflowItem';
 export { OverflowDivider } from './components/OverflowDivider/OverflowDivider';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowDivider } from './useOverflowDivider';\n\nexport { useOverflowContext } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowContext","OverflowItem","OverflowDivider"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,wBAAwB;AAEjD,SAASC,gBAAgB,EAAEC,kBAAkB,EAAEC,kBAAkB,EAAEC,qBAAqB,QAAQ,cAAc;AAE9G,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,wBAAwB,QAAQ,6BAA6B;AACtE,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D,SAASC,kBAAkB,QAAQ,oBAAoB;AAGvD,SAASC,YAAY,QAAQ,yCAAyC;AACtE,SAASC,eAAe,QAAQ,+CAA+C"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowDivider } from './useOverflowDivider';\nexport { useOverflowVisibility } from './useOverflowVisibility';\n\nexport { useOverflowContext } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowVisibility","useOverflowContext","OverflowItem","OverflowDivider"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,wBAAwB;AAEjD,SAASC,gBAAgB,EAAEC,kBAAkB,EAAEC,kBAAkB,EAAEC,qBAAqB,QAAQ,cAAc;AAE9G,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,wBAAwB,QAAQ,6BAA6B;AACtE,SAASC,oBAAoB,QAAQ,yBAAyB;AAC9D,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,SAASC,qBAAqB,QAAQ,0BAA0B;AAEhE,SAASC,kBAAkB,QAAQ,oBAAoB;AAGvD,SAASC,YAAY,QAAQ,yCAAyC;AACtE,SAASC,eAAe,QAAQ,+CAA+C"}

package/lib/useOverflowVisibility.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { useOverflowContext } from './overflowContext';
+/**
+ * A hook that returns the visibility status of all items and groups.
+ *
+ * ⚠️ Heads up!
+ *
+ * This hook will cause the component it is in to re-render for every single time an item overflows or becomes
+ * visible - use with caution
+ * @returns visibility status of all items and groups
+ */ export function useOverflowVisibility() {
+    const itemVisibility = useOverflowContext((ctx)=>ctx.itemVisibility);
+    const groupVisibility = useOverflowContext((ctx)=>ctx.groupVisibility);
+    return React.useMemo(()=>({
+            itemVisibility,
+            groupVisibility
+        }), [
+        itemVisibility,
+        groupVisibility
+    ]);
+}

package/lib/useOverflowVisibility.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useOverflowVisibility.ts"],"sourcesContent":["import * 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  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,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,oBAAoB;AAEvD;;;;;;;;CAQC,GACD,OAAO,SAASC;IACd,MAAMC,iBAAiBF,mBAAmBG,CAAAA,MAAOA,IAAID,cAAc;IACnE,MAAME,kBAAkBJ,mBAAmBG,CAAAA,MAAOA,IAAIC,eAAe;IAErE,OAAOL,MAAMM,OAAO,CAAC,IAAO,CAAA;YAAEH;YAAgBE;QAAgB,CAAA,GAAI;QAACF;QAAgBE;KAAgB;AACrG"}

package/lib-commonjs/index.js

@@ -45,6 +45,9 @@ _export(exports, {
     useOverflowDivider: function() {
         return _useOverflowDivider.useOverflowDivider;
     },
+    useOverflowVisibility: function() {
+        return _useOverflowVisibility.useOverflowVisibility;
+    },
     useOverflowContext: function() {
         return _overflowContext.useOverflowContext;
     },
@@ -64,6 +67,7 @@ const _useOverflowCount = require("./useOverflowCount");
 const _useOverflowItem = require("./useOverflowItem");
 const _useOverflowMenu = require("./useOverflowMenu");
 const _useOverflowDivider = require("./useOverflowDivider");
+const _useOverflowVisibility = require("./useOverflowVisibility");
 const _overflowContext = require("./overflowContext");
 const _OverflowItem = require("./components/OverflowItem/OverflowItem");
 const _OverflowDivider = require("./components/OverflowDivider/OverflowDivider");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } from './constants';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowDivider } from './useOverflowDivider';\nexport { useOverflowContext } from './overflowContext';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowContext","OverflowItem","OverflowDivider"],"mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IACRC,gBAAgB;eAAhBA,2BAAgB;;IAAEC,kBAAkB;eAAlBA,6BAAkB;;IAAEC,kBAAkB;eAAlBA,6BAAkB;;IAAEC,qBAAqB;eAArBA,gCAAqB;;IAC/EC,yBAAyB;eAAzBA,oDAAyB;;IACzBC,wBAAwB;eAAxBA,kDAAwB;;IACxBC,oBAAoB;eAApBA,0CAAoB;;IACpBC,gBAAgB;eAAhBA,kCAAgB;;IAChBC,eAAe;eAAfA,gCAAe;;IACfC,eAAe;eAAfA,gCAAe;;IACfC,kBAAkB;eAAlBA,sCAAkB;;IAClBC,kBAAkB;eAAlBA,mCAAkB;;IAClBC,YAAY;eAAZA,0BAAY;;IACZC,eAAe;eAAfA,gCAAe;;;0BAXC;2BACuE;2CACtD;0CACD;sCACJ;kCACJ;iCACD;iCACA;oCACG;iCACA;8BACN;iCACG"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } from './constants';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowDivider } from './useOverflowDivider';\nexport { useOverflowVisibility } from './useOverflowVisibility';\nexport { useOverflowContext } from './overflowContext';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["Overflow","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowVisibility","useOverflowContext","OverflowItem","OverflowDivider"],"mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IACRC,gBAAgB;eAAhBA,2BAAgB;;IAAEC,kBAAkB;eAAlBA,6BAAkB;;IAAEC,kBAAkB;eAAlBA,6BAAkB;;IAAEC,qBAAqB;eAArBA,gCAAqB;;IAC/EC,yBAAyB;eAAzBA,oDAAyB;;IACzBC,wBAAwB;eAAxBA,kDAAwB;;IACxBC,oBAAoB;eAApBA,0CAAoB;;IACpBC,gBAAgB;eAAhBA,kCAAgB;;IAChBC,eAAe;eAAfA,gCAAe;;IACfC,eAAe;eAAfA,gCAAe;;IACfC,kBAAkB;eAAlBA,sCAAkB;;IAClBC,qBAAqB;eAArBA,4CAAqB;;IACrBC,kBAAkB;eAAlBA,mCAAkB;;IAClBC,YAAY;eAAZA,0BAAY;;IACZC,eAAe;eAAfA,gCAAe;;;0BAZC;2BACuE;2CACtD;0CACD;sCACJ;kCACJ;iCACD;iCACA;oCACG;uCACG;iCACH;8BACN;iCACG"}

package/lib-commonjs/useOverflowVisibility.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useOverflowVisibility", {
+    enumerable: true,
+    get: function() {
+        return useOverflowVisibility;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _overflowContext = require("./overflowContext");
+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
+    ]);
+}

package/lib-commonjs/useOverflowVisibility.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useOverflowVisibility.js"],"sourcesContent":["import * as React from 'react';\nimport { useOverflowContext } from './overflowContext';\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 */ export function useOverflowVisibility() {\n    const itemVisibility = useOverflowContext((ctx)=>ctx.itemVisibility);\n    const groupVisibility = useOverflowContext((ctx)=>ctx.groupVisibility);\n    return React.useMemo(()=>({\n            itemVisibility,\n            groupVisibility\n        }), [\n        itemVisibility,\n        groupVisibility\n    ]);\n}\n"],"names":["useOverflowVisibility","itemVisibility","useOverflowContext","ctx","groupVisibility","React","useMemo"],"mappings":";;;;+BAUoBA;;;eAAAA;;;;iEAVG;iCACY;AASxB,SAASA;IAChB,MAAMC,iBAAiBC,IAAAA,mCAAkB,EAAC,CAACC,MAAMA,IAAIF,cAAc;IACnE,MAAMG,kBAAkBF,IAAAA,mCAAkB,EAAC,CAACC,MAAMA,IAAIC,eAAe;IACrE,OAAOC,OAAMC,OAAO,CAAC,IAAK,CAAA;YAClBL;YACAG;QACJ,CAAA,GAAI;QACJH;QACAG;KACH;AACL"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-overflow",
-  "version": "9.0.43",
+  "version": "9.1.0",
   "description": "React bindings for @fluentui/priority-overflow",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",