@fluentui/priority-overflow 9.0.3 → 9.1.0

package/CHANGELOG.json

@@ -2,7 +2,52 @@
   "name": "@fluentui/priority-overflow",
   "entries": [
     {
-      "date": "Fri, 12 May 2023 20:22:38 GMT",
+      "date": "Tue, 20 Jun 2023 12:34:38 GMT",
+      "tag": "@fluentui/priority-overflow_v9.1.0",
+      "version": "9.1.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "vkozlova@microsoft.com",
+            "package": "@fluentui/priority-overflow",
+            "commit": "4dedf40597f3b5cfa63d8f2e28a79276eb816bda",
+            "comment": "feat: Added support for custom divider"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 24 May 2023 20:45:22 GMT",
+      "tag": "@fluentui/priority-overflow_v9.0.3",
+      "version": "9.0.3",
+      "comments": {
+        "none": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/priority-overflow",
+            "commit": "69e0617a93cb44ef42f3bd19284b7dc5fe27fed3",
+            "comment": "chore: update test-ssr script"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 18 May 2023 00:39:01 GMT",
+      "tag": "@fluentui/priority-overflow_v9.0.3",
+      "version": "9.0.3",
+      "comments": {
+        "none": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/priority-overflow",
+            "commit": "06cd515eda59a3078bfe32f9cc7c1f281cd20208",
+            "comment": "chore: add test-ssr script to v9 packages"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 12 May 2023 20:28:09 GMT",
       "tag": "@fluentui/priority-overflow_v9.0.3",
       "version": "9.0.3",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/priority-overflow
 
-This log was last generated on Fri, 12 May 2023 20:22:38 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Jun 2023 12:34:38 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/priority-overflow_v9.1.0)
+
+Tue, 20 Jun 2023 12:34:38 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/priority-overflow_v9.0.3..@fluentui/priority-overflow_v9.1.0)
+
+### Minor changes
+
+- feat: Added support for custom divider ([PR #28011](https://github.com/microsoft/fluentui/pull/28011) by vkozlova@microsoft.com)
+
 ## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/priority-overflow_v9.0.3)
 
-Fri, 12 May 2023 20:22:38 GMT 
+Fri, 12 May 2023 20:28:09 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/priority-overflow_v9.0.2..@fluentui/priority-overflow_v9.0.3)
 
 ### Patches

package/dist/index.d.ts

@@ -52,6 +52,14 @@ export declare type OverflowAxis = 'horizontal' | 'vertical';
 
 export declare type OverflowDirection = 'start' | 'end';
 
+export declare interface OverflowDividerEntry {
+    /**
+     * HTML element that will be disappear when overflowed
+     */
+    element: HTMLElement;
+    groupId: string;
+}
+
 /**
  * Payload of the custom DOM event for overflow updates
  */
@@ -113,6 +121,14 @@ export declare interface OverflowManager {
      * available space and check if additional items need to overflow
      */
     addOverflowMenu: (element: HTMLElement) => void;
+    /**
+     * Add overflow divider
+     */
+    addDivider: (divider: OverflowDividerEntry) => void;
+    /**
+     * Remove overflow divider
+     */
+    removeDivider: (groupId: string) => void;
     /**
      * Unsets the overflow menu element
      */

package/lib/consts.js

@@ -0,0 +1,2 @@
+export const DATA_OVERFLOWING = 'data-overflowing';
+export const DATA_OVERFLOW_GROUP = 'data-overflow-group';

package/lib/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["consts.ts"],"sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_GROUP = 'data-overflow-group';\n"],"names":["DATA_OVERFLOWING","DATA_OVERFLOW_GROUP"],"mappings":"AAAA,OAAO,MAAMA,mBAAmB,mBAAmB;AACnD,OAAO,MAAMC,sBAAsB,sBAAsB"}

package/lib/debounce.js

@@ -3,18 +3,17 @@
  * https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide
  * @param fn - Function to debounce
  * @returns debounced function
- */export function debounce(fn) {
-  let pending;
-  return () => {
-    if (!pending) {
-      pending = true;
-      queueMicrotask(() => {
-        // Need to set pending to `false` before the debounced function is run.
-        // React can actually interrupt the function while it's running!
-        pending = false;
-        fn();
-      });
-    }
-  };
+ */ export function debounce(fn) {
+    let pending;
+    return ()=>{
+        if (!pending) {
+            pending = true;
+            queueMicrotask(()=>{
+                // Need to set pending to `false` before the debounced function is run.
+                // React can actually interrupt the function while it's running!
+                pending = false;
+                fn();
+            });
+        }
+    };
 }
-//# sourceMappingURL=debounce.js.map

package/lib/debounce.js.map

@@ -1 +1 @@
-{"version":3,"names":["debounce","fn","pending","queueMicrotask"],"sources":["../src/debounce.ts"],"sourcesContent":["/**\n * Microtask debouncer\n * https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide\n * @param fn - Function to debounce\n * @returns debounced function\n */\nexport function debounce(fn: Function) {\n  let pending: boolean;\n  return () => {\n    if (!pending) {\n      pending = true;\n      queueMicrotask(() => {\n        // Need to set pending to `false` before the debounced function is run.\n        // React can actually interrupt the function while it's running!\n        pending = false;\n        fn();\n      });\n    }\n  };\n}\n"],"mappings":"AAAA;;;;;GAMA,OAAO,SAASA,SAASC,EAAY,EAAE;EACrC,IAAIC,OAAA;EACJ,OAAO,MAAM;IACX,IAAI,CAACA,OAAA,EAAS;MACZA,OAAA,GAAU,IAAI;MACdC,cAAA,CAAe,MAAM;QACnB;QACA;QACAD,OAAA,GAAU,KAAK;QACfD,EAAA;MACF;IACF;EACF;AACF"}
+{"version":3,"sources":["debounce.ts"],"sourcesContent":["/**\n * Microtask debouncer\n * https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide\n * @param fn - Function to debounce\n * @returns debounced function\n */\nexport function debounce(fn: Function) {\n  let pending: boolean;\n  return () => {\n    if (!pending) {\n      pending = true;\n      queueMicrotask(() => {\n        // Need to set pending to `false` before the debounced function is run.\n        // React can actually interrupt the function while it's running!\n        pending = false;\n        fn();\n      });\n    }\n  };\n}\n"],"names":["debounce","fn","pending","queueMicrotask"],"mappings":"AAAA;;;;;CAKC,GACD,OAAO,SAASA,SAASC,EAAY,EAAE;IACrC,IAAIC;IACJ,OAAO,IAAM;QACX,IAAI,CAACA,SAAS;YACZA,UAAU,IAAI;YACdC,eAAe,IAAM;gBACnB,uEAAuE;gBACvE,gEAAgE;gBAChED,UAAU,KAAK;gBACfD;YACF;QACF,CAAC;IACH;AACF,CAAC"}

package/lib/index.js

@@ -1,2 +1 @@
 export { createOverflowManager } from './overflowManager';
-//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["createOverflowManager"],"sources":["../src/index.ts"],"sourcesContent":["export { createOverflowManager } from './overflowManager';\nexport type {\n  ObserveOptions,\n  OnUpdateItemVisibility,\n  OnUpdateItemVisibilityPayload,\n  OnUpdateOverflow,\n  OverflowAxis,\n  OverflowDirection,\n  OverflowEventPayload,\n  OverflowGroupState,\n  OverflowItemEntry,\n  OverflowManager,\n} from './types';\n"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { createOverflowManager } from './overflowManager';\nexport type {\n  ObserveOptions,\n  OnUpdateItemVisibility,\n  OnUpdateItemVisibilityPayload,\n  OnUpdateOverflow,\n  OverflowAxis,\n  OverflowDirection,\n  OverflowEventPayload,\n  OverflowGroupState,\n  OverflowItemEntry,\n  OverflowDividerEntry,\n  OverflowManager,\n} from './types';\n"],"names":["createOverflowManager"],"mappings":"AAAA,SAASA,qBAAqB,QAAQ,oBAAoB"}

package/lib/overflowManager.js

@@ -1,218 +1,267 @@
+var _groups, _groupId;
+import { DATA_OVERFLOWING, DATA_OVERFLOW_GROUP } from './consts';
 import { debounce } from './debounce';
 import { createPriorityQueue } from './priorityQueue';
 /**
  * @internal
  * @returns overflow manager instance
- */
-export function createOverflowManager() {
-  let container;
-  let overflowMenu;
-  // Set as true when resize observer is observing
-  let observing = false;
-  // If true, next update will dispatch to onUpdateOverflow even if queue top states don't change
-  // Initially true to force dispatch on first mount
-  let forceDispatch = true;
-  const options = {
-    padding: 10,
-    overflowAxis: 'horizontal',
-    overflowDirection: 'end',
-    minimumVisible: 0,
-    onUpdateItemVisibility: () => undefined,
-    onUpdateOverflow: () => undefined
-  };
-  const overflowItems = {};
-  const overflowGroups = {};
-  const resizeObserver = new ResizeObserver(entries => {
-    if (!entries[0] || !container) {
-      return;
-    }
-    update();
-  });
-  const invisibleItemQueue = createPriorityQueue((a, b) => {
-    const itemA = overflowItems[a];
-    const itemB = overflowItems[b];
-    // Higher priority at the top of the queue
-    const priority = itemB.priority - itemA.priority;
-    if (priority !== 0) {
-      return priority;
-    }
-    const positionStatusBit = options.overflowDirection === 'end' ? Node.DOCUMENT_POSITION_FOLLOWING : Node.DOCUMENT_POSITION_PRECEDING;
-    // equal priority, use DOM order
-    // eslint-disable-next-line no-bitwise
-    return itemA.element.compareDocumentPosition(itemB.element) & positionStatusBit ? -1 : 1;
-  });
-  const visibleItemQueue = createPriorityQueue((a, b) => {
-    const itemA = overflowItems[a];
-    const itemB = overflowItems[b];
-    // Lower priority at the top of the queue
-    const priority = itemA.priority - itemB.priority;
-    if (priority !== 0) {
-      return priority;
-    }
-    const positionStatusBit = options.overflowDirection === 'end' ? Node.DOCUMENT_POSITION_PRECEDING : Node.DOCUMENT_POSITION_FOLLOWING;
-    // equal priority, use DOM order
-    // eslint-disable-next-line no-bitwise
-    return itemA.element.compareDocumentPosition(itemB.element) & positionStatusBit ? -1 : 1;
-  });
-  const getOffsetSize = el => {
-    return options.overflowAxis === 'horizontal' ? el.offsetWidth : el.offsetHeight;
-  };
-  const makeItemVisible = () => {
-    const nextVisible = invisibleItemQueue.dequeue();
-    visibleItemQueue.enqueue(nextVisible);
-    const item = overflowItems[nextVisible];
-    options.onUpdateItemVisibility({
-      item,
-      visible: true
-    });
-    if (item.groupId) {
-      overflowGroups[item.groupId].invisibleItemIds.delete(item.id);
-      overflowGroups[item.groupId].visibleItemIds.add(item.id);
-    }
-    return getOffsetSize(item.element);
-  };
-  const makeItemInvisible = () => {
-    const nextInvisible = visibleItemQueue.dequeue();
-    invisibleItemQueue.enqueue(nextInvisible);
-    const item = overflowItems[nextInvisible];
-    const width = getOffsetSize(item.element);
-    options.onUpdateItemVisibility({
-      item,
-      visible: false
+ */ export function createOverflowManager() {
+    let container;
+    let overflowMenu;
+    // Set as true when resize observer is observing
+    let observing = false;
+    // If true, next update will dispatch to onUpdateOverflow even if queue top states don't change
+    // Initially true to force dispatch on first mount
+    let forceDispatch = true;
+    const options = {
+        padding: 10,
+        overflowAxis: 'horizontal',
+        overflowDirection: 'end',
+        minimumVisible: 0,
+        onUpdateItemVisibility: ()=>undefined,
+        onUpdateOverflow: ()=>undefined
+    };
+    const overflowItems = {};
+    const overflowDividers = {};
+    const resizeObserver = new ResizeObserver((entries)=>{
+        if (!entries[0] || !container) {
+            return;
+        }
+        update();
     });
-    if (item.groupId) {
-      overflowGroups[item.groupId].visibleItemIds.delete(item.id);
-      overflowGroups[item.groupId].invisibleItemIds.add(item.id);
-    }
-    return width;
-  };
-  const dispatchOverflowUpdate = () => {
-    const visibleItemIds = visibleItemQueue.all();
-    const invisibleItemIds = invisibleItemQueue.all();
-    const visibleItems = visibleItemIds.map(itemId => overflowItems[itemId]);
-    const invisibleItems = invisibleItemIds.map(itemId => overflowItems[itemId]);
-    const groupVisibility = {};
-    Object.entries(overflowGroups).forEach(([groupId, groupState]) => {
-      if (groupState.invisibleItemIds.size && groupState.visibleItemIds.size) {
-        groupVisibility[groupId] = 'overflow';
-      } else if (groupState.visibleItemIds.size === 0) {
-        groupVisibility[groupId] = 'hidden';
-      } else {
-        groupVisibility[groupId] = 'visible';
-      }
+    const getNextItem = (queueToDequeue, queueToEnqueue)=>{
+        const nextItem = queueToDequeue.dequeue();
+        queueToEnqueue.enqueue(nextItem);
+        return overflowItems[nextItem];
+    };
+    const createGroupManager = ()=>{
+        const groupVisibility = {};
+        const groups = {};
+        function updateGroupVisibility(groupId) {
+            const group = groups[groupId];
+            if (group.invisibleItemIds.size && group.visibleItemIds.size) {
+                groupVisibility[groupId] = 'overflow';
+            } else if (group.visibleItemIds.size === 0) {
+                groupVisibility[groupId] = 'hidden';
+            } else {
+                groupVisibility[groupId] = 'visible';
+            }
+        }
+        function isGroupVisible(groupId) {
+            return groupVisibility[groupId] === 'visible' || groupVisibility[groupId] === 'overflow';
+        }
+        return {
+            groupVisibility: ()=>groupVisibility,
+            isSingleItemVisible (itemId, groupId) {
+                return isGroupVisible(groupId) && groups[groupId].visibleItemIds.has(itemId) && groups[groupId].visibleItemIds.size === 1;
+            },
+            addItem (itemId, groupId) {
+                var _;
+                (_ = (_groups = groups)[_groupId = groupId]) !== null && _ !== void 0 ? _ : _groups[_groupId] = {
+                    visibleItemIds: new Set(),
+                    invisibleItemIds: new Set()
+                };
+                groups[groupId].visibleItemIds.add(itemId);
+                updateGroupVisibility(groupId);
+            },
+            removeItem (itemId, groupId) {
+                groups[groupId].invisibleItemIds.delete(itemId);
+                groups[groupId].visibleItemIds.delete(itemId);
+                updateGroupVisibility(groupId);
+            },
+            showItem (itemId, groupId) {
+                groups[groupId].invisibleItemIds.delete(itemId);
+                groups[groupId].visibleItemIds.add(itemId);
+                updateGroupVisibility(groupId);
+            },
+            hideItem (itemId, groupId) {
+                groups[groupId].invisibleItemIds.add(itemId);
+                groups[groupId].visibleItemIds.delete(itemId);
+                updateGroupVisibility(groupId);
+            }
+        };
+    };
+    const groupManager = createGroupManager();
+    const invisibleItemQueue = createPriorityQueue((a, b)=>{
+        const itemA = overflowItems[a];
+        const itemB = overflowItems[b];
+        // Higher priority at the top of the queue
+        const priority = itemB.priority - itemA.priority;
+        if (priority !== 0) {
+            return priority;
+        }
+        const positionStatusBit = options.overflowDirection === 'end' ? Node.DOCUMENT_POSITION_FOLLOWING : Node.DOCUMENT_POSITION_PRECEDING;
+        // equal priority, use DOM order
+        // eslint-disable-next-line no-bitwise
+        return itemA.element.compareDocumentPosition(itemB.element) & positionStatusBit ? -1 : 1;
     });
-    options.onUpdateOverflow({
-      visibleItems,
-      invisibleItems,
-      groupVisibility
+    const visibleItemQueue = createPriorityQueue((a, b)=>{
+        const itemA = overflowItems[a];
+        const itemB = overflowItems[b];
+        // Lower priority at the top of the queue
+        const priority = itemA.priority - itemB.priority;
+        if (priority !== 0) {
+            return priority;
+        }
+        const positionStatusBit = options.overflowDirection === 'end' ? Node.DOCUMENT_POSITION_PRECEDING : Node.DOCUMENT_POSITION_FOLLOWING;
+        // equal priority, use DOM order
+        // eslint-disable-next-line no-bitwise
+        return itemA.element.compareDocumentPosition(itemB.element) & positionStatusBit ? -1 : 1;
     });
-  };
-  const processOverflowItems = () => {
-    if (!container) {
-      return false;
-    }
-    const availableSize = getOffsetSize(container) - options.padding;
-    const overflowMenuOffset = overflowMenu ? getOffsetSize(overflowMenu) : 0;
-    // Snapshot of the visible/invisible state to compare for updates
-    const visibleTop = visibleItemQueue.peek();
-    const invisibleTop = invisibleItemQueue.peek();
-    const visibleItemIds = visibleItemQueue.all();
-    let currentWidth = visibleItemIds.reduce((sum, visibleItemId) => {
-      const child = overflowItems[visibleItemId].element;
-      return sum + getOffsetSize(child);
-    }, 0);
-    // Add items until available width is filled - can result in overflow
-    while (currentWidth < availableSize && invisibleItemQueue.size() > 0) {
-      currentWidth += makeItemVisible();
-    }
-    // Remove items until there's no more overflow
-    while (currentWidth > availableSize && visibleItemQueue.size() > 0) {
-      if (visibleItemQueue.size() <= options.minimumVisible) {
-        break;
-      }
-      currentWidth -= makeItemInvisible();
-    }
-    // make sure the overflow menu can fit
-    if (visibleItemQueue.size() > options.minimumVisible && invisibleItemQueue.size() > 0 && currentWidth + overflowMenuOffset > availableSize) {
-      makeItemInvisible();
-    }
-    // only update when the state of visible/invisible items has changed
-    if (visibleItemQueue.peek() !== visibleTop || invisibleItemQueue.peek() !== invisibleTop) {
-      return true;
-    }
-    return false;
-  };
-  const forceUpdate = () => {
-    if (processOverflowItems() || forceDispatch) {
-      forceDispatch = false;
-      dispatchOverflowUpdate();
-    }
-  };
-  const update = debounce(forceUpdate);
-  const observe = (observedContainer, userOptions) => {
-    Object.assign(options, userOptions);
-    observing = true;
-    Object.values(overflowItems).forEach(item => visibleItemQueue.enqueue(item.id));
-    container = observedContainer;
-    resizeObserver.observe(container);
-  };
-  const disconnect = () => {
-    observing = false;
-    resizeObserver.disconnect();
-  };
-  const addItem = item => {
-    if (overflowItems[item.id]) {
-      return;
-    }
-    overflowItems[item.id] = item;
-    // some options can affect priority which are only set on `observe`
-    if (observing) {
-      // Updates to elements might not change the queue tops
-      // i.e. new element is enqueued but the top of the queue stays the same
-      // force a dispatch on the next batched update
-      forceDispatch = true;
-      visibleItemQueue.enqueue(item.id);
-    }
-    if (item.groupId) {
-      if (!overflowGroups[item.groupId]) {
-        overflowGroups[item.groupId] = {
-          visibleItemIds: new Set(),
-          invisibleItemIds: new Set()
-        };
-      }
-      overflowGroups[item.groupId].visibleItemIds.add(item.id);
-    }
-    update();
-  };
-  const addOverflowMenu = el => {
-    overflowMenu = el;
-  };
-  const removeOverflowMenu = () => {
-    overflowMenu = undefined;
-  };
-  const removeItem = itemId => {
-    if (!overflowItems[itemId]) {
-      return;
-    }
-    const item = overflowItems[itemId];
-    visibleItemQueue.remove(itemId);
-    invisibleItemQueue.remove(itemId);
-    if (item.groupId) {
-      overflowGroups[item.groupId].visibleItemIds.delete(item.id);
-      overflowGroups[item.groupId].invisibleItemIds.delete(item.id);
+    const getOffsetSize = (el)=>{
+        return options.overflowAxis === 'horizontal' ? el.offsetWidth : el.offsetHeight;
+    };
+    function computeSizeChange(entry) {
+        const dividerWidth = entry.groupId && groupManager.isSingleItemVisible(entry.id, entry.groupId) && overflowDividers[entry.groupId] ? getOffsetSize(overflowDividers[entry.groupId].element) : 0;
+        return getOffsetSize(entry.element) + dividerWidth;
     }
-    delete overflowItems[itemId];
-    update();
-  };
-  return {
-    addItem,
-    disconnect,
-    forceUpdate,
-    observe,
-    removeItem,
-    update,
-    addOverflowMenu,
-    removeOverflowMenu
-  };
+    const showItem = ()=>{
+        const item = getNextItem(invisibleItemQueue, visibleItemQueue);
+        options.onUpdateItemVisibility({
+            item,
+            visible: true
+        });
+        if (item.groupId) {
+            groupManager.showItem(item.id, item.groupId);
+            if (groupManager.isSingleItemVisible(item.id, item.groupId)) {
+                var _overflowDividers_item_groupId;
+                (_overflowDividers_item_groupId = overflowDividers[item.groupId]) === null || _overflowDividers_item_groupId === void 0 ? void 0 : _overflowDividers_item_groupId.element.removeAttribute(DATA_OVERFLOWING);
+            }
+        }
+        return computeSizeChange(item);
+    };
+    const hideItem = ()=>{
+        const item = getNextItem(visibleItemQueue, invisibleItemQueue);
+        const width = computeSizeChange(item);
+        options.onUpdateItemVisibility({
+            item,
+            visible: false
+        });
+        if (item.groupId) {
+            if (groupManager.isSingleItemVisible(item.id, item.groupId)) {
+                var _overflowDividers_item_groupId;
+                (_overflowDividers_item_groupId = overflowDividers[item.groupId]) === null || _overflowDividers_item_groupId === void 0 ? void 0 : _overflowDividers_item_groupId.element.setAttribute(DATA_OVERFLOWING, '');
+            }
+            groupManager.hideItem(item.id, item.groupId);
+        }
+        return width;
+    };
+    const dispatchOverflowUpdate = ()=>{
+        const visibleItemIds = visibleItemQueue.all();
+        const invisibleItemIds = invisibleItemQueue.all();
+        const visibleItems = visibleItemIds.map((itemId)=>overflowItems[itemId]);
+        const invisibleItems = invisibleItemIds.map((itemId)=>overflowItems[itemId]);
+        options.onUpdateOverflow({
+            visibleItems,
+            invisibleItems,
+            groupVisibility: groupManager.groupVisibility()
+        });
+    };
+    const processOverflowItems = ()=>{
+        if (!container) {
+            return false;
+        }
+        const totalDividersWidth = Object.values(overflowDividers).map((dvdr)=>dvdr.groupId ? getOffsetSize(dvdr.element) : 0).reduce((prev, current)=>prev + current, 0);
+        const availableSize = getOffsetSize(container) - options.padding - totalDividersWidth - (overflowMenu ? getOffsetSize(overflowMenu) : 0);
+        // Snapshot of the visible/invisible state to compare for updates
+        const visibleTop = visibleItemQueue.peek();
+        const invisibleTop = invisibleItemQueue.peek();
+        let currentWidth = visibleItemQueue.all().map((id)=>overflowItems[id].element).map(getOffsetSize).reduce((prev, current)=>prev + current, 0);
+        // Add items until available width is filled - can result in overflow
+        while(currentWidth < availableSize && invisibleItemQueue.size() > 0){
+            currentWidth += showItem();
+        }
+        // Remove items until there's no more overflow
+        while(currentWidth > availableSize && visibleItemQueue.size() > options.minimumVisible){
+            currentWidth -= hideItem();
+        }
+        // only update when the state of visible/invisible items has changed
+        return visibleItemQueue.peek() !== visibleTop || invisibleItemQueue.peek() !== invisibleTop;
+    };
+    const forceUpdate = ()=>{
+        if (processOverflowItems() || forceDispatch) {
+            forceDispatch = false;
+            dispatchOverflowUpdate();
+        }
+    };
+    const update = debounce(forceUpdate);
+    const observe = (observedContainer, userOptions)=>{
+        Object.assign(options, userOptions);
+        observing = true;
+        Object.values(overflowItems).forEach((item)=>visibleItemQueue.enqueue(item.id));
+        container = observedContainer;
+        resizeObserver.observe(container);
+    };
+    const disconnect = ()=>{
+        observing = false;
+        resizeObserver.disconnect();
+    };
+    const addItem = (item)=>{
+        if (overflowItems[item.id]) {
+            return;
+        }
+        overflowItems[item.id] = item;
+        // some options can affect priority which are only set on `observe`
+        if (observing) {
+            // Updates to elements might not change the queue tops
+            // i.e. new element is enqueued but the top of the queue stays the same
+            // force a dispatch on the next batched update
+            forceDispatch = true;
+            visibleItemQueue.enqueue(item.id);
+        }
+        if (item.groupId) {
+            groupManager.addItem(item.id, item.groupId);
+            item.element.setAttribute(DATA_OVERFLOW_GROUP, item.groupId);
+        }
+        update();
+    };
+    const addOverflowMenu = (el)=>{
+        overflowMenu = el;
+    };
+    const addDivider = (divider)=>{
+        if (!divider.groupId || overflowDividers[divider.groupId]) {
+            return;
+        }
+        divider.element.setAttribute(DATA_OVERFLOW_GROUP, divider.groupId);
+        overflowDividers[divider.groupId] = divider;
+    };
+    const removeOverflowMenu = ()=>{
+        overflowMenu = undefined;
+    };
+    const removeDivider = (groupId)=>{
+        if (!overflowDividers[groupId]) {
+            return;
+        }
+        const divider = overflowDividers[groupId];
+        if (divider.groupId) {
+            delete overflowDividers[groupId];
+            divider.element.removeAttribute(DATA_OVERFLOW_GROUP);
+        }
+    };
+    const removeItem = (itemId)=>{
+        if (!overflowItems[itemId]) {
+            return;
+        }
+        const item = overflowItems[itemId];
+        visibleItemQueue.remove(itemId);
+        invisibleItemQueue.remove(itemId);
+        if (item.groupId) {
+            groupManager.removeItem(item.id, item.groupId);
+            item.element.removeAttribute(DATA_OVERFLOW_GROUP);
+        }
+        delete overflowItems[itemId];
+        update();
+    };
+    return {
+        addItem,
+        disconnect,
+        forceUpdate,
+        observe,
+        removeItem,
+        update,
+        addOverflowMenu,
+        removeOverflowMenu,
+        addDivider,
+        removeDivider
+    };
 }
-//# sourceMappingURL=overflowManager.js.map