@fluentui/priority-overflow 0.0.0-nightly-20220511-0419.1

package/CHANGELOG.json

@@ -0,0 +1,26 @@
+{
+  "name": "@fluentui/priority-overflow",
+  "entries": [
+    {
+      "date": "Wed, 11 May 2022 04:31:11 GMT",
+      "tag": "@fluentui/priority-overflow_v0.0.0-nightly-20220511-0419.1",
+      "version": "0.0.0-nightly-20220511-0419.1",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "email not defined",
+            "package": "@fluentui/priority-overflow",
+            "commit": "not available",
+            "comment": "Release nightly v9"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/priority-overflow",
+            "commit": "4ae08d6ecf85ac29593ddc2abb23f8a073711b38",
+            "comment": "feat: Initial beta release"
+          }
+        ]
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Change Log - @fluentui/priority-overflow
+
+This log was last generated on Wed, 11 May 2022 04:31:11 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [0.0.0-nightly-20220511-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/priority-overflow_v0.0.0-nightly-20220511-0419.1)
+
+Wed, 11 May 2022 04:31:11 GMT
+
+### Changes
+
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
+- feat: Initial beta release ([PR #22913](https://github.com/microsoft/fluentui/pull/22913) by lingfangao@hotmail.com)

package/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/priority-overflow
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

package/README.md

@@ -0,0 +1,5 @@
+# @fluentui/priority-overflow
+
+**Priority Overflow components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
+
+These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.

package/dist/index.d.ts

@@ -0,0 +1,109 @@
+/**
+ * @returns overflow manager instance
+ */
+export declare function createOverflowManager(): OverflowManager;
+
+export declare interface ObserveOptions {
+    /**
+     * Padding (in px) at the end of the container before overflow occurs
+     * Useful to account for extra elements (i.e. dropdown menu)
+     * or to account for any kinds of margins between items which are hard to measure with JS
+     * @default 10
+     */
+    padding?: number;
+    /**
+     * Direction where items are removed when overflow occurs
+     * @default end
+     */
+    overflowDirection?: OverflowDirection;
+    /**
+     * Horizontal or vertical overflow
+     * @default horizontal
+     */
+    overflowAxis?: OverflowAxis;
+    /**
+     * The minimum number of visible items
+     */
+    minimumVisible?: number;
+    /**
+     * Callback when item visibility is updated
+     */
+    onUpdateItemVisibility: OnUpdateItemVisibility;
+    /**
+     * Callback when item visibility is updated
+     */
+    onUpdateOverflow: OnUpdateOverflow;
+}
+
+export declare type OnUpdateItemVisibility = (data: OnUpdateItemVisibilityPayload) => void;
+
+export declare interface OnUpdateItemVisibilityPayload {
+    item: OverflowItemEntry;
+    visible: boolean;
+}
+
+/**
+ * signature similar to standard event listeners, but typed to handle the custom event
+ */
+export declare type OnUpdateOverflow = (data: OverflowEventPayload) => void;
+
+export declare type OverflowAxis = 'horizontal' | 'vertical';
+
+export declare type OverflowDirection = 'start' | 'end';
+
+/**
+ * Payload of the custom DOM event for overflow updates
+ */
+export declare interface OverflowEventPayload {
+    visibleItems: OverflowItemEntry[];
+    invisibleItems: OverflowItemEntry[];
+    groupVisibility: Record<string, OverflowGroupState>;
+}
+
+export declare type OverflowGroupState = 'visible' | 'hidden' | 'overflow';
+
+export declare interface OverflowItemEntry {
+    /**
+     * HTML element that will be disappear when overflowed
+     */
+    element: HTMLElement;
+    /**
+     * Lower priority items are invisible first when the container is overflowed
+     * @default 0
+     */
+    priority: number;
+    /**
+     * Specific id, used to track visibility and provide updates to consumers
+     */
+    id: string;
+    groupId?: string;
+}
+
+export declare interface OverflowManager {
+    /**
+     * Starts observing the container and managing the overflow state
+     */
+    observe: (container: HTMLElement, options: ObserveOptions) => void;
+    /**
+     * Stops observing the container
+     */
+    disconnect: () => void;
+    /**
+     * Add overflow items
+     */
+    addItem: (items: OverflowItemEntry) => void;
+    /**
+     * Remove overflow item
+     */
+    removeItem: (itemId: string) => void;
+    /**
+     * Manually update the overflow, updates are batched and async
+     */
+    update: () => void;
+    /**
+     * Manually update the overflow sync
+     */
+    forceUpdate: () => void;
+}
+
+export { }

package/dist/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.18.1"
+    }
+  ]
+}

package/lib/debounce.js

@@ -0,0 +1,21 @@
+/**
+ * Microtask debouncer
+ * 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();
+      });
+    }
+  };
+}
+//# sourceMappingURL=debounce.js.map

package/lib/debounce.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["debounce.ts"],"names":[],"mappings":"AAAA;;;;;AAKG;AACH,OAAM,SAAU,QAAV,CAAmB,EAAnB,EAA+B;AACnC,MAAI,OAAJ;AACA,SAAO,MAAK;AACV,QAAI,CAAC,OAAL,EAAc;AACZ,MAAA,OAAO,GAAG,IAAV;AACA,MAAA,cAAc,CAAC,MAAK;AAClB;AACA;AACA,QAAA,OAAO,GAAG,KAAV;AACA,QAAA,EAAE;AACH,OALa,CAAd;AAMD;AACF,GAVD;AAWD","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"],"sourceRoot":"../src/"}

package/lib/index.js

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

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC","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"]}

package/lib/overflowManager.js

@@ -0,0 +1,213 @@
+import { debounce } from './debounce';
+import { createPriorityQueue } from './priorityQueue';
+/**
+ * @returns overflow manager instance
+ */
+
+export function createOverflowManager() {
+  let container;
+  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
+    });
+
+    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';
+      }
+    });
+    options.onUpdateOverflow({
+      visibleItems,
+      invisibleItems,
+      groupVisibility
+    });
+  };
+
+  const processOverflowItems = availableSize => {
+    if (!container) {
+      return;
+    } // 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
+
+    while (currentWidth < availableSize && invisibleItemQueue.size() > 0) {
+      currentWidth += makeItemVisible();
+    } // Remove items until there's no more overlap
+
+
+    while (currentWidth > availableSize && visibleItemQueue.size() > 0) {
+      if (visibleItemQueue.size() === options.minimumVisible) {
+        break;
+      }
+
+      currentWidth -= makeItemInvisible();
+    } // only update when the state of visible/invisible items has changed
+
+
+    if (visibleItemQueue.peek() !== visibleTop || invisibleItemQueue.peek() !== invisibleTop) {
+      dispatchOverflowUpdate();
+    }
+  };
+
+  const forceUpdate = () => {
+    if (!container) {
+      return;
+    }
+
+    const availableSize = getOffsetSize(container) - options.padding;
+    processOverflowItems(availableSize);
+  };
+
+  const update = debounce(forceUpdate);
+
+  const observe = (observedContainer, userOptions) => {
+    Object.assign(options, userOptions);
+    container = observedContainer;
+    resizeObserver.observe(container);
+  };
+
+  const disconnect = () => {
+    resizeObserver.disconnect();
+  };
+
+  const addItem = item => {
+    overflowItems[item.id] = item;
+    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 removeItem = itemId => {
+    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);
+    }
+
+    delete overflowItems[itemId];
+    update();
+  };
+
+  return {
+    addItem,
+    disconnect,
+    forceUpdate,
+    observe,
+    removeItem,
+    update
+  };
+}
+//# sourceMappingURL=overflowManager.js.map

package/lib/overflowManager.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["overflowManager.ts"],"names":[],"mappings":"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","sourcesContent":["import { debounce } from './debounce';\nimport { createPriorityQueue } from './priorityQueue';\nimport type { OverflowGroupState, OverflowItemEntry, OverflowManager, ObserveOptions } from './types';\n\n/**\n * @returns overflow manager instance\n */\nexport function createOverflowManager(): OverflowManager {\n  let container: HTMLElement | undefined;\n  const options: Required<ObserveOptions> = {\n    padding: 10,\n    overflowAxis: 'horizontal',\n    overflowDirection: 'end',\n    minimumVisible: 0,\n    onUpdateItemVisibility: () => undefined,\n    onUpdateOverflow: () => undefined,\n  };\n\n  const overflowItems: Record<string, OverflowItemEntry> = {};\n  const overflowGroups: Record<string, { visibleItemIds: Set<string>; invisibleItemIds: Set<string> }> = {};\n  const resizeObserver = new ResizeObserver(entries => {\n    if (!entries[0] || !container) {\n      return;\n    }\n\n    update();\n  });\n\n  const invisibleItemQueue = createPriorityQueue<string>((a, b) => {\n    const itemA = overflowItems[a];\n    const itemB = overflowItems[b];\n    // Higher priority at the top of the queue\n    const priority = itemB.priority - itemA.priority;\n    if (priority !== 0) {\n      return priority;\n    }\n\n    const positionStatusBit =\n      options.overflowDirection === 'end' ? Node.DOCUMENT_POSITION_FOLLOWING : Node.DOCUMENT_POSITION_PRECEDING;\n\n    // equal priority, use DOM order\n    // eslint-disable-next-line no-bitwise\n    return itemA.element.compareDocumentPosition(itemB.element) & positionStatusBit ? -1 : 1;\n  });\n\n  const visibleItemQueue = createPriorityQueue<string>((a, b) => {\n    const itemA = overflowItems[a];\n    const itemB = overflowItems[b];\n    // Lower priority at the top of the queue\n    const priority = itemA.priority - itemB.priority;\n\n    if (priority !== 0) {\n      return priority;\n    }\n\n    const positionStatusBit =\n      options.overflowDirection === 'end' ? Node.DOCUMENT_POSITION_PRECEDING : Node.DOCUMENT_POSITION_FOLLOWING;\n\n    // equal priority, use DOM order\n    // eslint-disable-next-line no-bitwise\n    return itemA.element.compareDocumentPosition(itemB.element) & positionStatusBit ? -1 : 1;\n  });\n\n  const getOffsetSize = (el: HTMLElement) => {\n    return options.overflowAxis === 'horizontal' ? el.offsetWidth : el.offsetHeight;\n  };\n\n  const makeItemVisible = () => {\n    const nextVisible = invisibleItemQueue.dequeue();\n    visibleItemQueue.enqueue(nextVisible);\n\n    const item = overflowItems[nextVisible];\n    options.onUpdateItemVisibility({ item, visible: true });\n    if (item.groupId) {\n      overflowGroups[item.groupId].invisibleItemIds.delete(item.id);\n      overflowGroups[item.groupId].visibleItemIds.add(item.id);\n    }\n\n    return getOffsetSize(item.element);\n  };\n\n  const makeItemInvisible = () => {\n    const nextInvisible = visibleItemQueue.dequeue();\n    invisibleItemQueue.enqueue(nextInvisible);\n\n    const item = overflowItems[nextInvisible];\n    const width = getOffsetSize(item.element);\n    options.onUpdateItemVisibility({ item, visible: false });\n    if (item.groupId) {\n      overflowGroups[item.groupId].visibleItemIds.delete(item.id);\n      overflowGroups[item.groupId].invisibleItemIds.add(item.id);\n    }\n\n    return width;\n  };\n\n  const dispatchOverflowUpdate = () => {\n    const visibleItemIds = visibleItemQueue.all();\n    const invisibleItemIds = invisibleItemQueue.all();\n\n    const visibleItems = visibleItemIds.map(itemId => overflowItems[itemId]);\n    const invisibleItems = invisibleItemIds.map(itemId => overflowItems[itemId]);\n\n    const groupVisibility: Record<string, OverflowGroupState> = {};\n    Object.entries(overflowGroups).forEach(([groupId, groupState]) => {\n      if (groupState.invisibleItemIds.size && groupState.visibleItemIds.size) {\n        groupVisibility[groupId] = 'overflow';\n      } else if (groupState.visibleItemIds.size === 0) {\n        groupVisibility[groupId] = 'hidden';\n      } else {\n        groupVisibility[groupId] = 'visible';\n      }\n    });\n\n    options.onUpdateOverflow({ visibleItems, invisibleItems, groupVisibility });\n  };\n\n  const processOverflowItems = (availableSize: number) => {\n    if (!container) {\n      return;\n    }\n\n    // Snapshot of the visible/invisible state to compare for updates\n    const visibleTop = visibleItemQueue.peek();\n    const invisibleTop = invisibleItemQueue.peek();\n\n    const visibleItemIds = visibleItemQueue.all();\n    let currentWidth = visibleItemIds.reduce((sum, visibleItemId) => {\n      const child = overflowItems[visibleItemId].element;\n      return sum + getOffsetSize(child);\n    }, 0);\n\n    // Add items until available width is filled\n    while (currentWidth < availableSize && invisibleItemQueue.size() > 0) {\n      currentWidth += makeItemVisible();\n    }\n    // Remove items until there's no more overlap\n    while (currentWidth > availableSize && visibleItemQueue.size() > 0) {\n      if (visibleItemQueue.size() === options.minimumVisible) {\n        break;\n      }\n      currentWidth -= makeItemInvisible();\n    }\n\n    // only update when the state of visible/invisible items has changed\n    if (visibleItemQueue.peek() !== visibleTop || invisibleItemQueue.peek() !== invisibleTop) {\n      dispatchOverflowUpdate();\n    }\n  };\n\n  const forceUpdate: OverflowManager['forceUpdate'] = () => {\n    if (!container) {\n      return;\n    }\n\n    const availableSize = getOffsetSize(container) - options.padding;\n    processOverflowItems(availableSize);\n  };\n\n  const update: OverflowManager['update'] = debounce(forceUpdate);\n\n  const observe: OverflowManager['observe'] = (observedContainer, userOptions) => {\n    Object.assign(options, userOptions);\n    container = observedContainer;\n    resizeObserver.observe(container);\n  };\n\n  const disconnect: OverflowManager['disconnect'] = () => {\n    resizeObserver.disconnect();\n  };\n\n  const addItem: OverflowManager['addItem'] = item => {\n    overflowItems[item.id] = item;\n    visibleItemQueue.enqueue(item.id);\n\n    if (item.groupId) {\n      if (!overflowGroups[item.groupId]) {\n        overflowGroups[item.groupId] = {\n          visibleItemIds: new Set<string>(),\n          invisibleItemIds: new Set<string>(),\n        };\n      }\n\n      overflowGroups[item.groupId].visibleItemIds.add(item.id);\n    }\n\n    update();\n  };\n\n  const removeItem: OverflowManager['removeItem'] = itemId => {\n    const item = overflowItems[itemId];\n    visibleItemQueue.remove(itemId);\n    invisibleItemQueue.remove(itemId);\n\n    if (item.groupId) {\n      overflowGroups[item.groupId].visibleItemIds.delete(item.id);\n      overflowGroups[item.groupId].invisibleItemIds.delete(item.id);\n    }\n\n    delete overflowItems[itemId];\n    update();\n  };\n\n  return {\n    addItem,\n    disconnect,\n    forceUpdate,\n    observe,\n    removeItem,\n    update,\n  };\n}\n"],"sourceRoot":"../src/"}

package/lib/priorityQueue.js

@@ -0,0 +1,111 @@
+/**
+ * @param compare - comparison function for items
+ * @returns Priority queue implemented with a min heap
+ */
+export function createPriorityQueue(compare) {
+  const arr = [];
+  let size = 0;
+
+  const left = i => {
+    return 2 * i + 1;
+  };
+
+  const right = i => {
+    return 2 * i + 2;
+  };
+
+  const parent = i => {
+    return Math.floor((i - 1) / 2);
+  };
+
+  const swap = (a, b) => {
+    const tmp = arr[a];
+    arr[a] = arr[b];
+    arr[b] = tmp;
+  };
+
+  const heapify = i => {
+    let smallest = i;
+    const l = left(i);
+    const r = right(i);
+
+    if (l < size && compare(arr[l], arr[smallest]) < 0) {
+      smallest = l;
+    }
+
+    if (r < size && compare(arr[r], arr[smallest]) < 0) {
+      smallest = r;
+    }
+
+    if (smallest !== i) {
+      swap(smallest, i);
+      heapify(smallest);
+    }
+  };
+
+  const dequeue = () => {
+    if (size === 0) {
+      throw new Error('Priority queue empty');
+    }
+
+    const res = arr[0];
+    arr[0] = arr[--size];
+    heapify(0);
+    return res;
+  };
+
+  const peek = () => {
+    if (size === 0) {
+      return null;
+    }
+
+    return arr[0];
+  };
+
+  const enqueue = item => {
+    arr[size++] = item;
+    let i = size - 1;
+    let p = parent(i);
+
+    while (i > 0 && compare(arr[p], arr[i]) > 0) {
+      swap(p, i);
+      i = p;
+      p = parent(i);
+    }
+  };
+
+  const contains = item => {
+    return arr.indexOf(item) >= 0;
+  };
+
+  const remove = item => {
+    const i = arr.indexOf(item);
+
+    if (i === -1) {
+      return;
+    }
+
+    arr[i] = arr[--size];
+    heapify(i);
+  };
+
+  const clear = () => {
+    size = 0;
+  };
+
+  const all = () => {
+    return arr.slice(0, size);
+  };
+
+  return {
+    all,
+    clear,
+    contains,
+    dequeue,
+    enqueue,
+    peek,
+    remove,
+    size: () => size
+  };
+}
+//# sourceMappingURL=priorityQueue.js.map

package/lib/priorityQueue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["priorityQueue.ts"],"names":[],"mappings":"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","sourcesContent":["export type PriorityQueueCompareFn<T> = (a: T, b: T) => number;\n\nexport interface PriorityQueue<T> {\n  all: () => T[];\n  clear: () => void;\n  contains: (item: T) => boolean;\n  dequeue: () => T;\n  enqueue: (item: T) => void;\n  peek: () => T | null;\n  remove: (item: T) => void;\n  size: () => number;\n}\n\n/**\n * @param compare - comparison function for items\n * @returns Priority queue implemented with a min heap\n */\nexport function createPriorityQueue<T>(compare: PriorityQueueCompareFn<T>): PriorityQueue<T> {\n  const arr: T[] = [];\n  let size = 0;\n\n  const left = (i: number) => {\n    return 2 * i + 1;\n  };\n\n  const right = (i: number) => {\n    return 2 * i + 2;\n  };\n\n  const parent = (i: number) => {\n    return Math.floor((i - 1) / 2);\n  };\n\n  const swap = (a: number, b: number) => {\n    const tmp = arr[a];\n    arr[a] = arr[b];\n    arr[b] = tmp;\n  };\n\n  const heapify = (i: number) => {\n    let smallest = i;\n    const l = left(i);\n    const r = right(i);\n\n    if (l < size && compare(arr[l], arr[smallest]) < 0) {\n      smallest = l;\n    }\n\n    if (r < size && compare(arr[r], arr[smallest]) < 0) {\n      smallest = r;\n    }\n\n    if (smallest !== i) {\n      swap(smallest, i);\n      heapify(smallest);\n    }\n  };\n\n  const dequeue = () => {\n    if (size === 0) {\n      throw new Error('Priority queue empty');\n    }\n\n    const res = arr[0];\n    arr[0] = arr[--size];\n    heapify(0);\n\n    return res;\n  };\n\n  const peek = () => {\n    if (size === 0) {\n      return null;\n    }\n\n    return arr[0];\n  };\n\n  const enqueue = (item: T) => {\n    arr[size++] = item;\n    let i = size - 1;\n    let p = parent(i);\n    while (i > 0 && compare(arr[p], arr[i]) > 0) {\n      swap(p, i);\n      i = p;\n      p = parent(i);\n    }\n  };\n\n  const contains = (item: T) => {\n    return arr.indexOf(item) >= 0;\n  };\n\n  const remove = (item: T) => {\n    const i = arr.indexOf(item);\n\n    if (i === -1) {\n      return;\n    }\n\n    arr[i] = arr[--size];\n    heapify(i);\n  };\n\n  const clear = () => {\n    size = 0;\n  };\n\n  const all = () => {\n    return arr.slice(0, size);\n  };\n\n  return {\n    all,\n    clear,\n    contains,\n    dequeue,\n    enqueue,\n    peek,\n    remove,\n    size: () => size,\n  };\n}\n"],"sourceRoot":"../src/"}

package/lib/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["export type OverflowDirection = 'start' | 'end';\nexport type OverflowAxis = 'horizontal' | 'vertical';\nexport type OverflowGroupState = 'visible' | 'hidden' | 'overflow';\nexport interface OverflowItemEntry {\n  /**\n   * HTML element that will be disappear when overflowed\n   */\n  element: HTMLElement;\n  /**\n   * Lower priority items are invisible first when the container is overflowed\n   * @default 0\n   */\n  priority: number;\n  /**\n   * Specific id, used to track visibility and provide updates to consumers\n   */\n  id: string;\n\n  groupId?: string;\n}\n\n/**\n * signature similar to standard event listeners, but typed to handle the custom event\n */\nexport type OnUpdateOverflow = (data: OverflowEventPayload) => void;\n\nexport type OnUpdateItemVisibility = (data: OnUpdateItemVisibilityPayload) => void;\n\n/**\n * Payload of the custom DOM event for overflow updates\n */\nexport interface OverflowEventPayload {\n  visibleItems: OverflowItemEntry[];\n  invisibleItems: OverflowItemEntry[];\n  groupVisibility: Record<string, OverflowGroupState>;\n}\n\nexport interface OnUpdateItemVisibilityPayload {\n  item: OverflowItemEntry;\n  visible: boolean;\n}\n\nexport interface ObserveOptions {\n  /**\n   * Padding (in px) at the end of the container before overflow occurs\n   * Useful to account for extra elements (i.e. dropdown menu)\n   * or to account for any kinds of margins between items which are hard to measure with JS\n   * @default 10\n   */\n  padding?: number;\n  /**\n   * Direction where items are removed when overflow occurs\n   * @default end\n   */\n  overflowDirection?: OverflowDirection;\n\n  /**\n   * Horizontal or vertical overflow\n   * @default horizontal\n   */\n  overflowAxis?: OverflowAxis;\n\n  /**\n   * The minimum number of visible items\n   */\n  minimumVisible?: number;\n\n  /**\n   * Callback when item visibility is updated\n   */\n  onUpdateItemVisibility: OnUpdateItemVisibility;\n\n  /**\n   * Callback when item visibility is updated\n   */\n  onUpdateOverflow: OnUpdateOverflow;\n}\n\nexport interface OverflowManager {\n  /**\n   * Starts observing the container and managing the overflow state\n   */\n  observe: (container: HTMLElement, options: ObserveOptions) => void;\n  /**\n   * Stops observing the container\n   */\n  disconnect: () => void;\n  /**\n   * Add overflow items\n   */\n  addItem: (items: OverflowItemEntry) => void;\n  /**\n   * Remove overflow item\n   */\n  removeItem: (itemId: string) => void;\n  /**\n   * Manually update the overflow, updates are batched and async\n   */\n  update: () => void;\n  /**\n   * Manually update the overflow sync\n   */\n  forceUpdate: () => void;\n}\n"]}

package/lib-commonjs/debounce.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.debounce = void 0;
+/**
+ * Microtask debouncer
+ * https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide
+ * @param fn - Function to debounce
+ * @returns debounced function
+ */
+
+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();
+      });
+    }
+  };
+}
+
+exports.debounce = debounce;
+//# sourceMappingURL=debounce.js.map

package/lib-commonjs/debounce.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["debounce.ts"],"names":[],"mappings":";;;;;;AAAA;;;;;AAKG;;AACH,SAAgB,QAAhB,CAAyB,EAAzB,EAAqC;AACnC,MAAI,OAAJ;AACA,SAAO,MAAK;AACV,QAAI,CAAC,OAAL,EAAc;AACZ,MAAA,OAAO,GAAG,IAAV;AACA,MAAA,cAAc,CAAC,MAAK;AAClB;AACA;AACA,QAAA,OAAO,GAAG,KAAV;AACA,QAAA,EAAE;AACH,OALa,CAAd;AAMD;AACF,GAVD;AAWD;;AAbD,OAAA,CAAA,QAAA,GAAA,QAAA","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"],"sourceRoot":"../src/"}

package/lib-commonjs/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createOverflowManager = void 0;
+
+var overflowManager_1 = /*#__PURE__*/require("./overflowManager");
+
+Object.defineProperty(exports, "createOverflowManager", {
+  enumerable: true,
+  get: function () {
+    return overflowManager_1.createOverflowManager;
+  }
+});
+//# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,iBAAA,CAAA,qBAAA;AAAqB;AAArB,CAAA","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"],"sourceRoot":"../src/"}

package/lib-commonjs/overflowManager.js

@@ -0,0 +1,224 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createOverflowManager = void 0;
+
+const debounce_1 = /*#__PURE__*/require("./debounce");
+
+const priorityQueue_1 = /*#__PURE__*/require("./priorityQueue");
+/**
+ * @returns overflow manager instance
+ */
+
+
+function createOverflowManager() {
+  let container;
+  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 = priorityQueue_1.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 = priorityQueue_1.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
+    });
+
+    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';
+      }
+    });
+    options.onUpdateOverflow({
+      visibleItems,
+      invisibleItems,
+      groupVisibility
+    });
+  };
+
+  const processOverflowItems = availableSize => {
+    if (!container) {
+      return;
+    } // 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
+
+    while (currentWidth < availableSize && invisibleItemQueue.size() > 0) {
+      currentWidth += makeItemVisible();
+    } // Remove items until there's no more overlap
+
+
+    while (currentWidth > availableSize && visibleItemQueue.size() > 0) {
+      if (visibleItemQueue.size() === options.minimumVisible) {
+        break;
+      }
+
+      currentWidth -= makeItemInvisible();
+    } // only update when the state of visible/invisible items has changed
+
+
+    if (visibleItemQueue.peek() !== visibleTop || invisibleItemQueue.peek() !== invisibleTop) {
+      dispatchOverflowUpdate();
+    }
+  };
+
+  const forceUpdate = () => {
+    if (!container) {
+      return;
+    }
+
+    const availableSize = getOffsetSize(container) - options.padding;
+    processOverflowItems(availableSize);
+  };
+
+  const update = debounce_1.debounce(forceUpdate);
+
+  const observe = (observedContainer, userOptions) => {
+    Object.assign(options, userOptions);
+    container = observedContainer;
+    resizeObserver.observe(container);
+  };
+
+  const disconnect = () => {
+    resizeObserver.disconnect();
+  };
+
+  const addItem = item => {
+    overflowItems[item.id] = item;
+    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 removeItem = itemId => {
+    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);
+    }
+
+    delete overflowItems[itemId];
+    update();
+  };
+
+  return {
+    addItem,
+    disconnect,
+    forceUpdate,
+    observe,
+    removeItem,
+    update
+  };
+}
+
+exports.createOverflowManager = createOverflowManager;
+//# sourceMappingURL=overflowManager.js.map

package/lib-commonjs/overflowManager.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["overflowManager.ts"],"names":[],"mappings":"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","sourcesContent":["import { debounce } from './debounce';\nimport { createPriorityQueue } from './priorityQueue';\nimport type { OverflowGroupState, OverflowItemEntry, OverflowManager, ObserveOptions } from './types';\n\n/**\n * @returns overflow manager instance\n */\nexport function createOverflowManager(): OverflowManager {\n  let container: HTMLElement | undefined;\n  const options: Required<ObserveOptions> = {\n    padding: 10,\n    overflowAxis: 'horizontal',\n    overflowDirection: 'end',\n    minimumVisible: 0,\n    onUpdateItemVisibility: () => undefined,\n    onUpdateOverflow: () => undefined,\n  };\n\n  const overflowItems: Record<string, OverflowItemEntry> = {};\n  const overflowGroups: Record<string, { visibleItemIds: Set<string>; invisibleItemIds: Set<string> }> = {};\n  const resizeObserver = new ResizeObserver(entries => {\n    if (!entries[0] || !container) {\n      return;\n    }\n\n    update();\n  });\n\n  const invisibleItemQueue = createPriorityQueue<string>((a, b) => {\n    const itemA = overflowItems[a];\n    const itemB = overflowItems[b];\n    // Higher priority at the top of the queue\n    const priority = itemB.priority - itemA.priority;\n    if (priority !== 0) {\n      return priority;\n    }\n\n    const positionStatusBit =\n      options.overflowDirection === 'end' ? Node.DOCUMENT_POSITION_FOLLOWING : Node.DOCUMENT_POSITION_PRECEDING;\n\n    // equal priority, use DOM order\n    // eslint-disable-next-line no-bitwise\n    return itemA.element.compareDocumentPosition(itemB.element) & positionStatusBit ? -1 : 1;\n  });\n\n  const visibleItemQueue = createPriorityQueue<string>((a, b) => {\n    const itemA = overflowItems[a];\n    const itemB = overflowItems[b];\n    // Lower priority at the top of the queue\n    const priority = itemA.priority - itemB.priority;\n\n    if (priority !== 0) {\n      return priority;\n    }\n\n    const positionStatusBit =\n      options.overflowDirection === 'end' ? Node.DOCUMENT_POSITION_PRECEDING : Node.DOCUMENT_POSITION_FOLLOWING;\n\n    // equal priority, use DOM order\n    // eslint-disable-next-line no-bitwise\n    return itemA.element.compareDocumentPosition(itemB.element) & positionStatusBit ? -1 : 1;\n  });\n\n  const getOffsetSize = (el: HTMLElement) => {\n    return options.overflowAxis === 'horizontal' ? el.offsetWidth : el.offsetHeight;\n  };\n\n  const makeItemVisible = () => {\n    const nextVisible = invisibleItemQueue.dequeue();\n    visibleItemQueue.enqueue(nextVisible);\n\n    const item = overflowItems[nextVisible];\n    options.onUpdateItemVisibility({ item, visible: true });\n    if (item.groupId) {\n      overflowGroups[item.groupId].invisibleItemIds.delete(item.id);\n      overflowGroups[item.groupId].visibleItemIds.add(item.id);\n    }\n\n    return getOffsetSize(item.element);\n  };\n\n  const makeItemInvisible = () => {\n    const nextInvisible = visibleItemQueue.dequeue();\n    invisibleItemQueue.enqueue(nextInvisible);\n\n    const item = overflowItems[nextInvisible];\n    const width = getOffsetSize(item.element);\n    options.onUpdateItemVisibility({ item, visible: false });\n    if (item.groupId) {\n      overflowGroups[item.groupId].visibleItemIds.delete(item.id);\n      overflowGroups[item.groupId].invisibleItemIds.add(item.id);\n    }\n\n    return width;\n  };\n\n  const dispatchOverflowUpdate = () => {\n    const visibleItemIds = visibleItemQueue.all();\n    const invisibleItemIds = invisibleItemQueue.all();\n\n    const visibleItems = visibleItemIds.map(itemId => overflowItems[itemId]);\n    const invisibleItems = invisibleItemIds.map(itemId => overflowItems[itemId]);\n\n    const groupVisibility: Record<string, OverflowGroupState> = {};\n    Object.entries(overflowGroups).forEach(([groupId, groupState]) => {\n      if (groupState.invisibleItemIds.size && groupState.visibleItemIds.size) {\n        groupVisibility[groupId] = 'overflow';\n      } else if (groupState.visibleItemIds.size === 0) {\n        groupVisibility[groupId] = 'hidden';\n      } else {\n        groupVisibility[groupId] = 'visible';\n      }\n    });\n\n    options.onUpdateOverflow({ visibleItems, invisibleItems, groupVisibility });\n  };\n\n  const processOverflowItems = (availableSize: number) => {\n    if (!container) {\n      return;\n    }\n\n    // Snapshot of the visible/invisible state to compare for updates\n    const visibleTop = visibleItemQueue.peek();\n    const invisibleTop = invisibleItemQueue.peek();\n\n    const visibleItemIds = visibleItemQueue.all();\n    let currentWidth = visibleItemIds.reduce((sum, visibleItemId) => {\n      const child = overflowItems[visibleItemId].element;\n      return sum + getOffsetSize(child);\n    }, 0);\n\n    // Add items until available width is filled\n    while (currentWidth < availableSize && invisibleItemQueue.size() > 0) {\n      currentWidth += makeItemVisible();\n    }\n    // Remove items until there's no more overlap\n    while (currentWidth > availableSize && visibleItemQueue.size() > 0) {\n      if (visibleItemQueue.size() === options.minimumVisible) {\n        break;\n      }\n      currentWidth -= makeItemInvisible();\n    }\n\n    // only update when the state of visible/invisible items has changed\n    if (visibleItemQueue.peek() !== visibleTop || invisibleItemQueue.peek() !== invisibleTop) {\n      dispatchOverflowUpdate();\n    }\n  };\n\n  const forceUpdate: OverflowManager['forceUpdate'] = () => {\n    if (!container) {\n      return;\n    }\n\n    const availableSize = getOffsetSize(container) - options.padding;\n    processOverflowItems(availableSize);\n  };\n\n  const update: OverflowManager['update'] = debounce(forceUpdate);\n\n  const observe: OverflowManager['observe'] = (observedContainer, userOptions) => {\n    Object.assign(options, userOptions);\n    container = observedContainer;\n    resizeObserver.observe(container);\n  };\n\n  const disconnect: OverflowManager['disconnect'] = () => {\n    resizeObserver.disconnect();\n  };\n\n  const addItem: OverflowManager['addItem'] = item => {\n    overflowItems[item.id] = item;\n    visibleItemQueue.enqueue(item.id);\n\n    if (item.groupId) {\n      if (!overflowGroups[item.groupId]) {\n        overflowGroups[item.groupId] = {\n          visibleItemIds: new Set<string>(),\n          invisibleItemIds: new Set<string>(),\n        };\n      }\n\n      overflowGroups[item.groupId].visibleItemIds.add(item.id);\n    }\n\n    update();\n  };\n\n  const removeItem: OverflowManager['removeItem'] = itemId => {\n    const item = overflowItems[itemId];\n    visibleItemQueue.remove(itemId);\n    invisibleItemQueue.remove(itemId);\n\n    if (item.groupId) {\n      overflowGroups[item.groupId].visibleItemIds.delete(item.id);\n      overflowGroups[item.groupId].invisibleItemIds.delete(item.id);\n    }\n\n    delete overflowItems[itemId];\n    update();\n  };\n\n  return {\n    addItem,\n    disconnect,\n    forceUpdate,\n    observe,\n    removeItem,\n    update,\n  };\n}\n"],"sourceRoot":"../src/"}

package/lib-commonjs/priorityQueue.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPriorityQueue = void 0;
+/**
+ * @param compare - comparison function for items
+ * @returns Priority queue implemented with a min heap
+ */
+
+function createPriorityQueue(compare) {
+  const arr = [];
+  let size = 0;
+
+  const left = i => {
+    return 2 * i + 1;
+  };
+
+  const right = i => {
+    return 2 * i + 2;
+  };
+
+  const parent = i => {
+    return Math.floor((i - 1) / 2);
+  };
+
+  const swap = (a, b) => {
+    const tmp = arr[a];
+    arr[a] = arr[b];
+    arr[b] = tmp;
+  };
+
+  const heapify = i => {
+    let smallest = i;
+    const l = left(i);
+    const r = right(i);
+
+    if (l < size && compare(arr[l], arr[smallest]) < 0) {
+      smallest = l;
+    }
+
+    if (r < size && compare(arr[r], arr[smallest]) < 0) {
+      smallest = r;
+    }
+
+    if (smallest !== i) {
+      swap(smallest, i);
+      heapify(smallest);
+    }
+  };
+
+  const dequeue = () => {
+    if (size === 0) {
+      throw new Error('Priority queue empty');
+    }
+
+    const res = arr[0];
+    arr[0] = arr[--size];
+    heapify(0);
+    return res;
+  };
+
+  const peek = () => {
+    if (size === 0) {
+      return null;
+    }
+
+    return arr[0];
+  };
+
+  const enqueue = item => {
+    arr[size++] = item;
+    let i = size - 1;
+    let p = parent(i);
+
+    while (i > 0 && compare(arr[p], arr[i]) > 0) {
+      swap(p, i);
+      i = p;
+      p = parent(i);
+    }
+  };
+
+  const contains = item => {
+    return arr.indexOf(item) >= 0;
+  };
+
+  const remove = item => {
+    const i = arr.indexOf(item);
+
+    if (i === -1) {
+      return;
+    }
+
+    arr[i] = arr[--size];
+    heapify(i);
+  };
+
+  const clear = () => {
+    size = 0;
+  };
+
+  const all = () => {
+    return arr.slice(0, size);
+  };
+
+  return {
+    all,
+    clear,
+    contains,
+    dequeue,
+    enqueue,
+    peek,
+    remove,
+    size: () => size
+  };
+}
+
+exports.createPriorityQueue = createPriorityQueue;
+//# sourceMappingURL=priorityQueue.js.map

package/lib-commonjs/priorityQueue.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["priorityQueue.ts"],"names":[],"mappings":"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","sourcesContent":["export type PriorityQueueCompareFn<T> = (a: T, b: T) => number;\n\nexport interface PriorityQueue<T> {\n  all: () => T[];\n  clear: () => void;\n  contains: (item: T) => boolean;\n  dequeue: () => T;\n  enqueue: (item: T) => void;\n  peek: () => T | null;\n  remove: (item: T) => void;\n  size: () => number;\n}\n\n/**\n * @param compare - comparison function for items\n * @returns Priority queue implemented with a min heap\n */\nexport function createPriorityQueue<T>(compare: PriorityQueueCompareFn<T>): PriorityQueue<T> {\n  const arr: T[] = [];\n  let size = 0;\n\n  const left = (i: number) => {\n    return 2 * i + 1;\n  };\n\n  const right = (i: number) => {\n    return 2 * i + 2;\n  };\n\n  const parent = (i: number) => {\n    return Math.floor((i - 1) / 2);\n  };\n\n  const swap = (a: number, b: number) => {\n    const tmp = arr[a];\n    arr[a] = arr[b];\n    arr[b] = tmp;\n  };\n\n  const heapify = (i: number) => {\n    let smallest = i;\n    const l = left(i);\n    const r = right(i);\n\n    if (l < size && compare(arr[l], arr[smallest]) < 0) {\n      smallest = l;\n    }\n\n    if (r < size && compare(arr[r], arr[smallest]) < 0) {\n      smallest = r;\n    }\n\n    if (smallest !== i) {\n      swap(smallest, i);\n      heapify(smallest);\n    }\n  };\n\n  const dequeue = () => {\n    if (size === 0) {\n      throw new Error('Priority queue empty');\n    }\n\n    const res = arr[0];\n    arr[0] = arr[--size];\n    heapify(0);\n\n    return res;\n  };\n\n  const peek = () => {\n    if (size === 0) {\n      return null;\n    }\n\n    return arr[0];\n  };\n\n  const enqueue = (item: T) => {\n    arr[size++] = item;\n    let i = size - 1;\n    let p = parent(i);\n    while (i > 0 && compare(arr[p], arr[i]) > 0) {\n      swap(p, i);\n      i = p;\n      p = parent(i);\n    }\n  };\n\n  const contains = (item: T) => {\n    return arr.indexOf(item) >= 0;\n  };\n\n  const remove = (item: T) => {\n    const i = arr.indexOf(item);\n\n    if (i === -1) {\n      return;\n    }\n\n    arr[i] = arr[--size];\n    heapify(i);\n  };\n\n  const clear = () => {\n    size = 0;\n  };\n\n  const all = () => {\n    return arr.slice(0, size);\n  };\n\n  return {\n    all,\n    clear,\n    contains,\n    dequeue,\n    enqueue,\n    peek,\n    remove,\n    size: () => size,\n  };\n}\n"],"sourceRoot":"../src/"}

package/lib-commonjs/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/lib-commonjs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@fluentui/priority-overflow",
+  "version": "0.0.0-nightly-20220511-0419.1",
+  "description": "Vanilla JS utilities to implement overflow menus",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "typings": "dist/index.d.ts",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "just-scripts build",
+    "bundle-size": "bundle-size measure",
+    "clean": "just-scripts clean",
+    "code-style": "just-scripts code-style",
+    "just": "just-scripts",
+    "lint": "just-scripts lint",
+    "test": "jest --passWithNoTests",
+    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/priority-overflow/src && yarn docs",
+    "type-check": "tsc -b tsconfig.json"
+  },
+  "devDependencies": {
+    "@fluentui/eslint-plugin": "*",
+    "@fluentui/scripts": "^1.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.1.0"
+  },
+  "beachball": {
+    "disallowedChangeTypes": [
+      "major",
+      "minor",
+      "patch"
+    ]
+  }
+}