@fluentui/priority-overflow - npm Package Compare versions

Comparing version 0.0.0-nightly-20221007-1627.1 to 0.0.0-nightly-20221010-0422.1

CHANGELOG.json

@@ -5,5 +5,5 @@ {
     {
-      "date": "Fri, 07 Oct 2022 16:33:46 GMT",
-      "tag": "@fluentui/priority-overflow_v0.0.0-nightly-20221007-1627.1",
-      "version": "0.0.0-nightly-20221007-1627.1",
+      "date": "Mon, 10 Oct 2022 04:26:55 GMT",
+      "tag": "@fluentui/priority-overflow_v0.0.0-nightly-20221010-0422.1",
+      "version": "0.0.0-nightly-20221010-0422.1",
       "comments": {
@@ -10,0 +10,0 @@ "prerelease": [

CHANGELOG.md

 # Change Log - @fluentui/priority-overflow
 
-This log was last generated on Fri, 07 Oct 2022 16:33:46 GMT and should not be manually modified.
+This log was last generated on Mon, 10 Oct 2022 04:26:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20221007-1627.1](https://github.com/microsoft/fluentui/tree/@fluentui/priority-overflow_v0.0.0-nightly-20221007-1627.1)
+## [0.0.0-nightly-20221010-0422.1](https://github.com/microsoft/fluentui/tree/@fluentui/priority-overflow_v0.0.0-nightly-20221010-0422.1)
 
-Fri, 07 Oct 2022 16:33:46 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/priority-overflow_v9.0.0-beta.2..@fluentui/priority-overflow_v0.0.0-nightly-20221007-1627.1)
+Mon, 10 Oct 2022 04:26:55 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/priority-overflow_v9.0.0-beta.2..@fluentui/priority-overflow_v0.0.0-nightly-20221010-0422.1)
 
@@ -12,0 +12,0 @@ ### Changes

dist/index.d.ts

@@ -111,4 +111,13 @@ /**
     forceUpdate: () => void;
+    /**
+     * Adds an element that opens an overflow menu. This is used to calculate
+     * available space and check if additional items need to overflow
+     */
+    addOverflowMenu: (element: HTMLElement) => void;
+    /**
+     * Unsets the overflow menu element
+     */
+    removeOverflowMenu: () => void;
 }
 
 export { }

lib-commonjs/overflowManager.js

@@ -19,2 +19,4 @@ "use strict";
   let container;
+  let overflowMenu;
+  let observing = false;
   const options = {
@@ -132,4 +134,5 @@ padding: 10,
       return;
-    } // Snapshot of the visible/invisible state to compare for updates
+    }
 
+    const overflowMenuOffset = overflowMenu ? getOffsetSize(overflowMenu) : 0; // Snapshot of the visible/invisible state to compare for updates
 
@@ -155,2 +158,6 @@ const visibleTop = visibleItemQueue.peek();
       currentWidth -= makeItemInvisible();
+    }
+
+    if (invisibleItemQueue.size() > 0 && currentWidth + overflowMenuOffset > availableSize) {
+      makeItemInvisible();
     } // only update when the state of visible/invisible items has changed
@@ -177,2 +184,4 @@
     Object.assign(options, userOptions);
+    observing = true;
+    Object.values(overflowItems).forEach(item => visibleItemQueue.enqueue(item.id));
     container = observedContainer;
@@ -183,2 +192,3 @@ resizeObserver.observe(container);
   const disconnect = () => {
+    observing = false;
     resizeObserver.disconnect();
@@ -188,5 +198,12 @@ };
   const addItem = item => {
-    overflowItems[item.id] = item;
-    visibleItemQueue.enqueue(item.id);
+    if (overflowItems[item.id]) {
+      return;
+    }
 
+    overflowItems[item.id] = item; // some options can affect priority which are only set on `observe`
+
+    if (observing) {
+      visibleItemQueue.enqueue(item.id);
+    }
+
     if (item.groupId) {
@@ -206,3 +223,15 @@ if (!overflowGroups[item.groupId]) {
 
+  const addOverflowMenu = el => {
+    overflowMenu = el;
+  };
+
+  const removeOverflowMenu = () => {
+    overflowMenu = undefined;
+  };
+
   const removeItem = itemId => {
+    if (!overflowItems[itemId]) {
+      return;
+    }
+
     const item = overflowItems[itemId];
@@ -227,3 +256,5 @@ visibleItemQueue.remove(itemId);
     removeItem,
-    update
+    update,
+    addOverflowMenu,
+    removeOverflowMenu
   };
@@ -230,0 +261,0 @@ }

lib-commonjs/priorityQueue.js

@@ -85,3 +85,4 @@ "use strict";
   const contains = item => {
-    return arr.indexOf(item) >= 0;
+    const index = arr.indexOf(item);
+    return index >= 0 && index < size;
   };
@@ -92,3 +93,3 @@
 
-    if (i === -1) {
+    if (i === -1 || i >= size) {
       return;
@@ -95,0 +96,0 @@ }

lib/overflowManager.js

@@ -10,2 +10,4 @@ import { debounce } from './debounce';
   let container;
+  let overflowMenu;
+  let observing = false;
   const options = {
@@ -123,4 +125,5 @@ padding: 10,
       return;
-    } // Snapshot of the visible/invisible state to compare for updates
+    }
 
+    const overflowMenuOffset = overflowMenu ? getOffsetSize(overflowMenu) : 0; // Snapshot of the visible/invisible state to compare for updates
 
@@ -146,2 +149,6 @@ const visibleTop = visibleItemQueue.peek();
       currentWidth -= makeItemInvisible();
+    }
+
+    if (invisibleItemQueue.size() > 0 && currentWidth + overflowMenuOffset > availableSize) {
+      makeItemInvisible();
     } // only update when the state of visible/invisible items has changed
@@ -168,2 +175,4 @@
     Object.assign(options, userOptions);
+    observing = true;
+    Object.values(overflowItems).forEach(item => visibleItemQueue.enqueue(item.id));
     container = observedContainer;
@@ -174,2 +183,3 @@ resizeObserver.observe(container);
   const disconnect = () => {
+    observing = false;
     resizeObserver.disconnect();
@@ -179,5 +189,12 @@ };
   const addItem = item => {
-    overflowItems[item.id] = item;
-    visibleItemQueue.enqueue(item.id);
+    if (overflowItems[item.id]) {
+      return;
+    }
 
+    overflowItems[item.id] = item; // some options can affect priority which are only set on `observe`
+
+    if (observing) {
+      visibleItemQueue.enqueue(item.id);
+    }
+
     if (item.groupId) {
@@ -197,3 +214,15 @@ if (!overflowGroups[item.groupId]) {
 
+  const addOverflowMenu = el => {
+    overflowMenu = el;
+  };
+
+  const removeOverflowMenu = () => {
+    overflowMenu = undefined;
+  };
+
   const removeItem = itemId => {
+    if (!overflowItems[itemId]) {
+      return;
+    }
+
     const item = overflowItems[itemId];
@@ -218,5 +247,7 @@ visibleItemQueue.remove(itemId);
     removeItem,
-    update
+    update,
+    addOverflowMenu,
+    removeOverflowMenu
   };
 }
 //# sourceMappingURL=overflowManager.js.map

lib/priorityQueue.js

@@ -78,3 +78,4 @@ /**
   const contains = item => {
-    return arr.indexOf(item) >= 0;
+    const index = arr.indexOf(item);
+    return index >= 0 && index < size;
   };
@@ -85,3 +86,3 @@
 
-    if (i === -1) {
+    if (i === -1 || i >= size) {
       return;
@@ -88,0 +89,0 @@ }

package.json

 {
   "name": "@fluentui/priority-overflow",
-  "version": "0.0.0-nightly-20221007-1627.1",
+  "version": "0.0.0-nightly-20221010-0422.1",
   "description": "Vanilla JS utilities to implement overflow menus",
@@ -5,0 +5,0 @@ "main": "lib-commonjs/index.js",

No alert changes

Improved metrics

Total package byte prevSize

73908

increased by8.25%

Lines of code

834

increased by7.89%

No dependency changes