@fluentui/priority-overflow
Advanced tools
Comparing version 9.0.0-rc.1 to 9.0.0-rc.2
@@ -5,6 +5,42 @@ { | ||
{ | ||
"date": "Thu, 17 Nov 2022 23:02:29 GMT", | ||
"date": "Mon, 09 Jan 2023 14:31:41 GMT", | ||
"tag": "@fluentui/priority-overflow_v9.0.0-rc.2", | ||
"version": "9.0.0-rc.2", | ||
"comments": { | ||
"prerelease": [ | ||
{ | ||
"author": "lingfangao@hotmail.com", | ||
"package": "@fluentui/priority-overflow", | ||
"commit": "2611ae5441e4bc702c4ce6404c7186f6c2de7cc3", | ||
"comment": "fix: Minimum visible overflow items should be respected" | ||
} | ||
] | ||
} | ||
}, | ||
{ | ||
"date": "Wed, 04 Jan 2023 01:40:47 GMT", | ||
"tag": "@fluentui/priority-overflow_v9.0.0-rc.1", | ||
"version": "9.0.0-rc.1", | ||
"comments": { | ||
"none": [ | ||
{ | ||
"author": "martinhochel@microsoft.com", | ||
"package": "@fluentui/priority-overflow", | ||
"commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105", | ||
"comment": "chore(scripts): move index.ts to to follow sub-folder domain packaging" | ||
}, | ||
{ | ||
"author": "martinhochel@microsoft.com", | ||
"package": "@fluentui/priority-overflow", | ||
"commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca", | ||
"comment": "chore(scripts): use for @fluentui/scripts version within all package.json" | ||
} | ||
] | ||
} | ||
}, | ||
{ | ||
"date": "Thu, 17 Nov 2022 23:05:32 GMT", | ||
"tag": "@fluentui/priority-overflow_v9.0.0-rc.1", | ||
"version": "9.0.0-rc.1", | ||
"comments": { | ||
"prerelease": [ | ||
@@ -11,0 +47,0 @@ { |
# Change Log - @fluentui/priority-overflow | ||
This log was last generated on Thu, 17 Nov 2022 23:02:29 GMT and should not be manually modified. | ||
This log was last generated on Mon, 09 Jan 2023 14:31:41 GMT and should not be manually modified. | ||
<!-- Start content --> | ||
## [9.0.0-rc.2](https://github.com/microsoft/fluentui/tree/@fluentui/priority-overflow_v9.0.0-rc.2) | ||
Mon, 09 Jan 2023 14:31:41 GMT | ||
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/priority-overflow_v9.0.0-rc.1..@fluentui/priority-overflow_v9.0.0-rc.2) | ||
### Changes | ||
- fix: Minimum visible overflow items should be respected ([PR #26194](https://github.com/microsoft/fluentui/pull/26194) by lingfangao@hotmail.com) | ||
## [9.0.0-rc.1](https://github.com/microsoft/fluentui/tree/@fluentui/priority-overflow_v9.0.0-rc.1) | ||
Thu, 17 Nov 2022 23:02:29 GMT | ||
Thu, 17 Nov 2022 23:05:32 GMT | ||
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/priority-overflow_v9.0.0-beta.4..@fluentui/priority-overflow_v9.0.0-rc.1) | ||
@@ -11,0 +20,0 @@ |
@@ -13,3 +13,2 @@ "use strict"; | ||
*/ | ||
function debounce(fn) { | ||
@@ -29,4 +28,3 @@ let pending; | ||
} | ||
exports.debounce = debounce; | ||
//# sourceMappingURL=debounce.js.map |
@@ -7,5 +7,3 @@ "use strict"; | ||
exports.createOverflowManager = void 0; | ||
var overflowManager_1 = /*#__PURE__*/require("./overflowManager"); | ||
Object.defineProperty(exports, "createOverflowManager", { | ||
@@ -12,0 +10,0 @@ enumerable: true, |
@@ -7,5 +7,3 @@ "use strict"; | ||
exports.createOverflowManager = void 0; | ||
const debounce_1 = /*#__PURE__*/require("./debounce"); | ||
const priorityQueue_1 = /*#__PURE__*/require("./priorityQueue"); | ||
@@ -16,4 +14,2 @@ /** | ||
*/ | ||
function createOverflowManager() { | ||
@@ -37,3 +33,2 @@ let container; | ||
} | ||
update(); | ||
@@ -43,13 +38,11 @@ }); | ||
const itemA = overflowItems[a]; | ||
const itemB = overflowItems[b]; // Higher priority at the top of the queue | ||
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 | ||
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; | ||
@@ -59,20 +52,16 @@ }); | ||
const itemA = overflowItems[a]; | ||
const itemB = overflowItems[b]; // Lower priority at the top of the queue | ||
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 | ||
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 = () => { | ||
@@ -86,3 +75,2 @@ const nextVisible = invisibleItemQueue.dequeue(); | ||
}); | ||
if (item.groupId) { | ||
@@ -92,6 +80,4 @@ overflowGroups[item.groupId].invisibleItemIds.delete(item.id); | ||
} | ||
return getOffsetSize(item.element); | ||
}; | ||
const makeItemInvisible = () => { | ||
@@ -106,3 +92,2 @@ const nextInvisible = visibleItemQueue.dequeue(); | ||
}); | ||
if (item.groupId) { | ||
@@ -112,6 +97,4 @@ overflowGroups[item.groupId].visibleItemIds.delete(item.id); | ||
} | ||
return width; | ||
}; | ||
const dispatchOverflowUpdate = () => { | ||
@@ -138,3 +121,2 @@ const visibleItemIds = visibleItemQueue.all(); | ||
}; | ||
const processOverflowItems = availableSize => { | ||
@@ -144,5 +126,4 @@ if (!container) { | ||
} | ||
const overflowMenuOffset = overflowMenu ? getOffsetSize(overflowMenu) : 0; // 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 | ||
const visibleTop = visibleItemQueue.peek(); | ||
@@ -154,22 +135,19 @@ const invisibleTop = invisibleItemQueue.peek(); | ||
return sum + getOffsetSize(child); | ||
}, 0); // Add items until available width is filled | ||
}, 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 overlap | ||
} | ||
// Remove items until there's no more overflow | ||
while (currentWidth > availableSize && visibleItemQueue.size() > 0) { | ||
if (visibleItemQueue.size() === options.minimumVisible) { | ||
if (visibleItemQueue.size() <= options.minimumVisible) { | ||
break; | ||
} | ||
currentWidth -= makeItemInvisible(); | ||
} | ||
if (invisibleItemQueue.size() > 0 && currentWidth + overflowMenuOffset > availableSize) { | ||
// 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 | ||
} | ||
// only update when the state of visible/invisible items has changed | ||
if (visibleItemQueue.peek() !== visibleTop || invisibleItemQueue.peek() !== invisibleTop) { | ||
@@ -179,3 +157,2 @@ dispatchOverflowUpdate(); | ||
}; | ||
const forceUpdate = () => { | ||
@@ -185,9 +162,6 @@ if (!container) { | ||
} | ||
const availableSize = getOffsetSize(container) - options.padding; | ||
processOverflowItems(availableSize); | ||
}; | ||
const update = debounce_1.debounce(forceUpdate); | ||
const observe = (observedContainer, userOptions) => { | ||
@@ -200,3 +174,2 @@ Object.assign(options, userOptions); | ||
}; | ||
const disconnect = () => { | ||
@@ -206,3 +179,2 @@ observing = false; | ||
}; | ||
const addItem = item => { | ||
@@ -212,9 +184,7 @@ if (overflowItems[item.id]) { | ||
} | ||
overflowItems[item.id] = item; // some options can affect priority which are only set on `observe` | ||
overflowItems[item.id] = item; | ||
// some options can affect priority which are only set on `observe` | ||
if (observing) { | ||
visibleItemQueue.enqueue(item.id); | ||
} | ||
if (item.groupId) { | ||
@@ -227,17 +197,12 @@ if (!overflowGroups[item.groupId]) { | ||
} | ||
overflowGroups[item.groupId].visibleItemIds.add(item.id); | ||
} | ||
update(); | ||
}; | ||
const addOverflowMenu = el => { | ||
overflowMenu = el; | ||
}; | ||
const removeOverflowMenu = () => { | ||
overflowMenu = undefined; | ||
}; | ||
const removeItem = itemId => { | ||
@@ -247,7 +212,5 @@ if (!overflowItems[itemId]) { | ||
} | ||
const item = overflowItems[itemId]; | ||
visibleItemQueue.remove(itemId); | ||
invisibleItemQueue.remove(itemId); | ||
if (item.groupId) { | ||
@@ -257,7 +220,5 @@ overflowGroups[item.groupId].visibleItemIds.delete(item.id); | ||
} | ||
delete overflowItems[itemId]; | ||
update(); | ||
}; | ||
return { | ||
@@ -274,4 +235,3 @@ addItem, | ||
} | ||
exports.createOverflowManager = createOverflowManager; | ||
//# sourceMappingURL=overflowManager.js.map |
@@ -11,19 +11,14 @@ "use strict"; | ||
*/ | ||
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) => { | ||
@@ -34,3 +29,2 @@ const tmp = arr[a]; | ||
}; | ||
const heapify = i => { | ||
@@ -40,11 +34,8 @@ let smallest = 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) { | ||
@@ -55,3 +46,2 @@ swap(smallest, i); | ||
}; | ||
const dequeue = () => { | ||
@@ -61,3 +51,2 @@ if (size === 0) { | ||
} | ||
const res = arr[0]; | ||
@@ -68,3 +57,2 @@ arr[0] = arr[--size]; | ||
}; | ||
const peek = () => { | ||
@@ -74,6 +62,4 @@ if (size === 0) { | ||
} | ||
return arr[0]; | ||
}; | ||
const enqueue = item => { | ||
@@ -83,3 +69,2 @@ arr[size++] = item; | ||
let p = parent(i); | ||
while (i > 0 && compare(arr[p], arr[i]) > 0) { | ||
@@ -91,3 +76,2 @@ swap(p, i); | ||
}; | ||
const contains = item => { | ||
@@ -97,22 +81,16 @@ const index = arr.indexOf(item); | ||
}; | ||
const remove = item => { | ||
const i = arr.indexOf(item); | ||
if (i === -1 || i >= size) { | ||
return; | ||
} | ||
arr[i] = arr[--size]; | ||
heapify(i); | ||
}; | ||
const clear = () => { | ||
size = 0; | ||
}; | ||
const all = () => { | ||
return arr.slice(0, size); | ||
}; | ||
return { | ||
@@ -129,4 +107,3 @@ all, | ||
} | ||
exports.createPriorityQueue = createPriorityQueue; | ||
//# sourceMappingURL=priorityQueue.js.map |
@@ -7,3 +7,2 @@ import { debounce } from './debounce'; | ||
*/ | ||
export function createOverflowManager() { | ||
@@ -27,3 +26,2 @@ let container; | ||
} | ||
update(); | ||
@@ -33,13 +31,11 @@ }); | ||
const itemA = overflowItems[a]; | ||
const itemB = overflowItems[b]; // Higher priority at the top of the queue | ||
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 | ||
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; | ||
@@ -49,20 +45,16 @@ }); | ||
const itemA = overflowItems[a]; | ||
const itemB = overflowItems[b]; // Lower priority at the top of the queue | ||
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 | ||
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 = () => { | ||
@@ -76,3 +68,2 @@ const nextVisible = invisibleItemQueue.dequeue(); | ||
}); | ||
if (item.groupId) { | ||
@@ -82,6 +73,4 @@ overflowGroups[item.groupId].invisibleItemIds.delete(item.id); | ||
} | ||
return getOffsetSize(item.element); | ||
}; | ||
const makeItemInvisible = () => { | ||
@@ -96,3 +85,2 @@ const nextInvisible = visibleItemQueue.dequeue(); | ||
}); | ||
if (item.groupId) { | ||
@@ -102,6 +90,4 @@ overflowGroups[item.groupId].visibleItemIds.delete(item.id); | ||
} | ||
return width; | ||
}; | ||
const dispatchOverflowUpdate = () => { | ||
@@ -128,3 +114,2 @@ const visibleItemIds = visibleItemQueue.all(); | ||
}; | ||
const processOverflowItems = availableSize => { | ||
@@ -134,5 +119,4 @@ if (!container) { | ||
} | ||
const overflowMenuOffset = overflowMenu ? getOffsetSize(overflowMenu) : 0; // 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 | ||
const visibleTop = visibleItemQueue.peek(); | ||
@@ -144,22 +128,19 @@ const invisibleTop = invisibleItemQueue.peek(); | ||
return sum + getOffsetSize(child); | ||
}, 0); // Add items until available width is filled | ||
}, 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 overlap | ||
} | ||
// Remove items until there's no more overflow | ||
while (currentWidth > availableSize && visibleItemQueue.size() > 0) { | ||
if (visibleItemQueue.size() === options.minimumVisible) { | ||
if (visibleItemQueue.size() <= options.minimumVisible) { | ||
break; | ||
} | ||
currentWidth -= makeItemInvisible(); | ||
} | ||
if (invisibleItemQueue.size() > 0 && currentWidth + overflowMenuOffset > availableSize) { | ||
// 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 | ||
} | ||
// only update when the state of visible/invisible items has changed | ||
if (visibleItemQueue.peek() !== visibleTop || invisibleItemQueue.peek() !== invisibleTop) { | ||
@@ -169,3 +150,2 @@ dispatchOverflowUpdate(); | ||
}; | ||
const forceUpdate = () => { | ||
@@ -175,9 +155,6 @@ if (!container) { | ||
} | ||
const availableSize = getOffsetSize(container) - options.padding; | ||
processOverflowItems(availableSize); | ||
}; | ||
const update = debounce(forceUpdate); | ||
const observe = (observedContainer, userOptions) => { | ||
@@ -190,3 +167,2 @@ Object.assign(options, userOptions); | ||
}; | ||
const disconnect = () => { | ||
@@ -196,3 +172,2 @@ observing = false; | ||
}; | ||
const addItem = item => { | ||
@@ -202,9 +177,7 @@ if (overflowItems[item.id]) { | ||
} | ||
overflowItems[item.id] = item; // some options can affect priority which are only set on `observe` | ||
overflowItems[item.id] = item; | ||
// some options can affect priority which are only set on `observe` | ||
if (observing) { | ||
visibleItemQueue.enqueue(item.id); | ||
} | ||
if (item.groupId) { | ||
@@ -217,17 +190,12 @@ if (!overflowGroups[item.groupId]) { | ||
} | ||
overflowGroups[item.groupId].visibleItemIds.add(item.id); | ||
} | ||
update(); | ||
}; | ||
const addOverflowMenu = el => { | ||
overflowMenu = el; | ||
}; | ||
const removeOverflowMenu = () => { | ||
overflowMenu = undefined; | ||
}; | ||
const removeItem = itemId => { | ||
@@ -237,7 +205,5 @@ if (!overflowItems[itemId]) { | ||
} | ||
const item = overflowItems[itemId]; | ||
visibleItemQueue.remove(itemId); | ||
invisibleItemQueue.remove(itemId); | ||
if (item.groupId) { | ||
@@ -247,7 +213,5 @@ overflowGroups[item.groupId].visibleItemIds.delete(item.id); | ||
} | ||
delete overflowItems[itemId]; | ||
update(); | ||
}; | ||
return { | ||
@@ -254,0 +218,0 @@ addItem, |
@@ -8,15 +8,11 @@ /** | ||
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) => { | ||
@@ -27,3 +23,2 @@ const tmp = arr[a]; | ||
}; | ||
const heapify = i => { | ||
@@ -33,11 +28,8 @@ let smallest = 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) { | ||
@@ -48,3 +40,2 @@ swap(smallest, i); | ||
}; | ||
const dequeue = () => { | ||
@@ -54,3 +45,2 @@ if (size === 0) { | ||
} | ||
const res = arr[0]; | ||
@@ -61,3 +51,2 @@ arr[0] = arr[--size]; | ||
}; | ||
const peek = () => { | ||
@@ -67,6 +56,4 @@ if (size === 0) { | ||
} | ||
return arr[0]; | ||
}; | ||
const enqueue = item => { | ||
@@ -76,3 +63,2 @@ arr[size++] = item; | ||
let p = parent(i); | ||
while (i > 0 && compare(arr[p], arr[i]) > 0) { | ||
@@ -84,3 +70,2 @@ swap(p, i); | ||
}; | ||
const contains = item => { | ||
@@ -90,22 +75,16 @@ const index = arr.indexOf(item); | ||
}; | ||
const remove = item => { | ||
const i = arr.indexOf(item); | ||
if (i === -1 || i >= size) { | ||
return; | ||
} | ||
arr[i] = arr[--size]; | ||
heapify(i); | ||
}; | ||
const clear = () => { | ||
size = 0; | ||
}; | ||
const all = () => { | ||
return arr.slice(0, size); | ||
}; | ||
return { | ||
@@ -112,0 +91,0 @@ all, |
{ | ||
"name": "@fluentui/priority-overflow", | ||
"version": "9.0.0-rc.1", | ||
"version": "9.0.0-rc.2", | ||
"description": "Vanilla JS utilities to implement overflow menus", | ||
@@ -27,3 +27,3 @@ "main": "lib-commonjs/index.js", | ||
"@fluentui/eslint-plugin": "*", | ||
"@fluentui/scripts": "^1.0.0" | ||
"@fluentui/scripts": "*" | ||
}, | ||
@@ -30,0 +30,0 @@ "dependencies": { |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
83642
964