@salt-ds/core 1.60.0 → 1.61.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +38 -0
- package/css/salt-core.css +366 -1
- package/dist-cjs/index.js +16 -0
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/navigation-item/NavigationItem.js +2 -0
- package/dist-cjs/navigation-item/NavigationItem.js.map +1 -1
- package/dist-cjs/rating/Rating.css.js +6 -0
- package/dist-cjs/rating/Rating.css.js.map +1 -0
- package/dist-cjs/rating/Rating.js +140 -0
- package/dist-cjs/rating/Rating.js.map +1 -0
- package/dist-cjs/rating/RatingItem.css.js +6 -0
- package/dist-cjs/rating/RatingItem.css.js.map +1 -0
- package/dist-cjs/rating/RatingItem.js +75 -0
- package/dist-cjs/rating/RatingItem.js.map +1 -0
- package/dist-cjs/semantic-icon-provider/SemanticIconProvider.js +22 -20
- package/dist-cjs/semantic-icon-provider/SemanticIconProvider.js.map +1 -1
- package/dist-cjs/tabs/Tab.css.js +6 -0
- package/dist-cjs/tabs/Tab.css.js.map +1 -0
- package/dist-cjs/tabs/Tab.js +211 -0
- package/dist-cjs/tabs/Tab.js.map +1 -0
- package/dist-cjs/tabs/TabAction.js +63 -0
- package/dist-cjs/tabs/TabAction.js.map +1 -0
- package/dist-cjs/tabs/TabBar.css.js +6 -0
- package/dist-cjs/tabs/TabBar.css.js.map +1 -0
- package/dist-cjs/tabs/TabBar.js +45 -0
- package/dist-cjs/tabs/TabBar.js.map +1 -0
- package/dist-cjs/tabs/TabList.css.js +6 -0
- package/dist-cjs/tabs/TabList.css.js.map +1 -0
- package/dist-cjs/tabs/TabList.js +281 -0
- package/dist-cjs/tabs/TabList.js.map +1 -0
- package/dist-cjs/tabs/TabPanel.css.js +6 -0
- package/dist-cjs/tabs/TabPanel.css.js.map +1 -0
- package/dist-cjs/tabs/TabPanel.js +98 -0
- package/dist-cjs/tabs/TabPanel.js.map +1 -0
- package/dist-cjs/tabs/TabTrigger.css.js +6 -0
- package/dist-cjs/tabs/TabTrigger.css.js.map +1 -0
- package/dist-cjs/tabs/TabTrigger.js +188 -0
- package/dist-cjs/tabs/TabTrigger.js.map +1 -0
- package/dist-cjs/tabs/Tabs.css.js +6 -0
- package/dist-cjs/tabs/Tabs.css.js.map +1 -0
- package/dist-cjs/tabs/Tabs.js +200 -0
- package/dist-cjs/tabs/Tabs.js.map +1 -0
- package/dist-cjs/tabs/internal/contexts/TabContext.js +26 -0
- package/dist-cjs/tabs/internal/contexts/TabContext.js.map +1 -0
- package/dist-cjs/tabs/internal/contexts/TabListLayoutContext.js +19 -0
- package/dist-cjs/tabs/internal/contexts/TabListLayoutContext.js.map +1 -0
- package/dist-cjs/tabs/internal/contexts/TabSlotRegistryContext.js +22 -0
- package/dist-cjs/tabs/internal/contexts/TabSlotRegistryContext.js.map +1 -0
- package/dist-cjs/tabs/internal/contexts/TabsContext.js +50 -0
- package/dist-cjs/tabs/internal/contexts/TabsContext.js.map +1 -0
- package/dist-cjs/tabs/internal/hooks/useFocusWithRetry.js +64 -0
- package/dist-cjs/tabs/internal/hooks/useFocusWithRetry.js.map +1 -0
- package/dist-cjs/tabs/internal/hooks/useTabListRecovery.js +76 -0
- package/dist-cjs/tabs/internal/hooks/useTabListRecovery.js.map +1 -0
- package/dist-cjs/tabs/internal/hooks/useTabRemovalHandler.js +165 -0
- package/dist-cjs/tabs/internal/hooks/useTabRemovalHandler.js.map +1 -0
- package/dist-cjs/tabs/internal/hooks/useTabSelectionFocus.js +87 -0
- package/dist-cjs/tabs/internal/hooks/useTabSelectionFocus.js.map +1 -0
- package/dist-cjs/tabs/internal/overflow/TabOverflowList.css.js +6 -0
- package/dist-cjs/tabs/internal/overflow/TabOverflowList.css.js.map +1 -0
- package/dist-cjs/tabs/internal/overflow/TabOverflowList.js +245 -0
- package/dist-cjs/tabs/internal/overflow/TabOverflowList.js.map +1 -0
- package/dist-cjs/tabs/internal/overflow/TabSlot.js +30 -0
- package/dist-cjs/tabs/internal/overflow/TabSlot.js.map +1 -0
- package/dist-cjs/tabs/internal/overflow/overflowMath.js +86 -0
- package/dist-cjs/tabs/internal/overflow/overflowMath.js.map +1 -0
- package/dist-cjs/tabs/internal/overflow/useOverflow.js +273 -0
- package/dist-cjs/tabs/internal/overflow/useOverflow.js.map +1 -0
- package/dist-cjs/tabs/internal/overflow/useOverflowLayoutState.js +99 -0
- package/dist-cjs/tabs/internal/overflow/useOverflowLayoutState.js.map +1 -0
- package/dist-cjs/tabs/internal/overflow/useOverflowSelectionState.js +68 -0
- package/dist-cjs/tabs/internal/overflow/useOverflowSelectionState.js.map +1 -0
- package/dist-cjs/tabs/internal/overflow/useRenderedTabWidth.js +92 -0
- package/dist-cjs/tabs/internal/overflow/useRenderedTabWidth.js.map +1 -0
- package/dist-cjs/tabs/internal/overflow/widthMeasurement.js +42 -0
- package/dist-cjs/tabs/internal/overflow/widthMeasurement.js.map +1 -0
- package/dist-cjs/tabs/internal/registry/useCollection.js +197 -0
- package/dist-cjs/tabs/internal/registry/useCollection.js.map +1 -0
- package/dist-cjs/tabs/internal/registry/useRenderedTabsRegistry.js +206 -0
- package/dist-cjs/tabs/internal/registry/useRenderedTabsRegistry.js.map +1 -0
- package/dist-cjs/tabs/internal/utils/domUtils.js +13 -0
- package/dist-cjs/tabs/internal/utils/domUtils.js.map +1 -0
- package/dist-es/index.js +8 -0
- package/dist-es/index.js.map +1 -1
- package/dist-es/navigation-item/NavigationItem.js +2 -0
- package/dist-es/navigation-item/NavigationItem.js.map +1 -1
- package/dist-es/rating/Rating.css.js +4 -0
- package/dist-es/rating/Rating.css.js.map +1 -0
- package/dist-es/rating/Rating.js +138 -0
- package/dist-es/rating/Rating.js.map +1 -0
- package/dist-es/rating/RatingItem.css.js +4 -0
- package/dist-es/rating/RatingItem.css.js.map +1 -0
- package/dist-es/rating/RatingItem.js +73 -0
- package/dist-es/rating/RatingItem.js.map +1 -0
- package/dist-es/semantic-icon-provider/SemanticIconProvider.js +23 -21
- package/dist-es/semantic-icon-provider/SemanticIconProvider.js.map +1 -1
- package/dist-es/tabs/Tab.css.js +4 -0
- package/dist-es/tabs/Tab.css.js.map +1 -0
- package/dist-es/tabs/Tab.js +209 -0
- package/dist-es/tabs/Tab.js.map +1 -0
- package/dist-es/tabs/TabAction.js +61 -0
- package/dist-es/tabs/TabAction.js.map +1 -0
- package/dist-es/tabs/TabBar.css.js +4 -0
- package/dist-es/tabs/TabBar.css.js.map +1 -0
- package/dist-es/tabs/TabBar.js +43 -0
- package/dist-es/tabs/TabBar.js.map +1 -0
- package/dist-es/tabs/TabList.css.js +4 -0
- package/dist-es/tabs/TabList.css.js.map +1 -0
- package/dist-es/tabs/TabList.js +279 -0
- package/dist-es/tabs/TabList.js.map +1 -0
- package/dist-es/tabs/TabPanel.css.js +4 -0
- package/dist-es/tabs/TabPanel.css.js.map +1 -0
- package/dist-es/tabs/TabPanel.js +96 -0
- package/dist-es/tabs/TabPanel.js.map +1 -0
- package/dist-es/tabs/TabTrigger.css.js +4 -0
- package/dist-es/tabs/TabTrigger.css.js.map +1 -0
- package/dist-es/tabs/TabTrigger.js +186 -0
- package/dist-es/tabs/TabTrigger.js.map +1 -0
- package/dist-es/tabs/Tabs.css.js +4 -0
- package/dist-es/tabs/Tabs.css.js.map +1 -0
- package/dist-es/tabs/Tabs.js +198 -0
- package/dist-es/tabs/Tabs.js.map +1 -0
- package/dist-es/tabs/internal/contexts/TabContext.js +23 -0
- package/dist-es/tabs/internal/contexts/TabContext.js.map +1 -0
- package/dist-es/tabs/internal/contexts/TabListLayoutContext.js +16 -0
- package/dist-es/tabs/internal/contexts/TabListLayoutContext.js.map +1 -0
- package/dist-es/tabs/internal/contexts/TabSlotRegistryContext.js +19 -0
- package/dist-es/tabs/internal/contexts/TabSlotRegistryContext.js.map +1 -0
- package/dist-es/tabs/internal/contexts/TabsContext.js +47 -0
- package/dist-es/tabs/internal/contexts/TabsContext.js.map +1 -0
- package/dist-es/tabs/internal/hooks/useFocusWithRetry.js +62 -0
- package/dist-es/tabs/internal/hooks/useFocusWithRetry.js.map +1 -0
- package/dist-es/tabs/internal/hooks/useTabListRecovery.js +74 -0
- package/dist-es/tabs/internal/hooks/useTabListRecovery.js.map +1 -0
- package/dist-es/tabs/internal/hooks/useTabRemovalHandler.js +163 -0
- package/dist-es/tabs/internal/hooks/useTabRemovalHandler.js.map +1 -0
- package/dist-es/tabs/internal/hooks/useTabSelectionFocus.js +85 -0
- package/dist-es/tabs/internal/hooks/useTabSelectionFocus.js.map +1 -0
- package/dist-es/tabs/internal/overflow/TabOverflowList.css.js +4 -0
- package/dist-es/tabs/internal/overflow/TabOverflowList.css.js.map +1 -0
- package/dist-es/tabs/internal/overflow/TabOverflowList.js +243 -0
- package/dist-es/tabs/internal/overflow/TabOverflowList.js.map +1 -0
- package/dist-es/tabs/internal/overflow/TabSlot.js +28 -0
- package/dist-es/tabs/internal/overflow/TabSlot.js.map +1 -0
- package/dist-es/tabs/internal/overflow/overflowMath.js +82 -0
- package/dist-es/tabs/internal/overflow/overflowMath.js.map +1 -0
- package/dist-es/tabs/internal/overflow/useOverflow.js +271 -0
- package/dist-es/tabs/internal/overflow/useOverflow.js.map +1 -0
- package/dist-es/tabs/internal/overflow/useOverflowLayoutState.js +97 -0
- package/dist-es/tabs/internal/overflow/useOverflowLayoutState.js.map +1 -0
- package/dist-es/tabs/internal/overflow/useOverflowSelectionState.js +66 -0
- package/dist-es/tabs/internal/overflow/useOverflowSelectionState.js.map +1 -0
- package/dist-es/tabs/internal/overflow/useRenderedTabWidth.js +90 -0
- package/dist-es/tabs/internal/overflow/useRenderedTabWidth.js.map +1 -0
- package/dist-es/tabs/internal/overflow/widthMeasurement.js +36 -0
- package/dist-es/tabs/internal/overflow/widthMeasurement.js.map +1 -0
- package/dist-es/tabs/internal/registry/useCollection.js +195 -0
- package/dist-es/tabs/internal/registry/useCollection.js.map +1 -0
- package/dist-es/tabs/internal/registry/useRenderedTabsRegistry.js +204 -0
- package/dist-es/tabs/internal/registry/useRenderedTabsRegistry.js.map +1 -0
- package/dist-es/tabs/internal/utils/domUtils.js +11 -0
- package/dist-es/tabs/internal/utils/domUtils.js.map +1 -0
- package/dist-types/index.d.ts +2 -0
- package/dist-types/rating/Rating.d.ts +48 -0
- package/dist-types/rating/RatingItem.d.ts +47 -0
- package/dist-types/rating/index.d.ts +1 -0
- package/dist-types/semantic-icon-provider/SemanticIconProvider.d.ts +21 -19
- package/dist-types/tabs/Tab.d.ts +12 -0
- package/dist-types/tabs/TabAction.d.ts +4 -0
- package/dist-types/tabs/TabBar.d.ts +12 -0
- package/dist-types/tabs/TabList.d.ts +12 -0
- package/dist-types/tabs/TabPanel.d.ts +9 -0
- package/dist-types/tabs/TabTrigger.d.ts +4 -0
- package/dist-types/tabs/Tabs.d.ts +20 -0
- package/dist-types/tabs/index.d.ts +7 -0
- package/dist-types/tabs/internal/contexts/TabContext.d.ts +12 -0
- package/dist-types/tabs/internal/contexts/TabListLayoutContext.d.ts +9 -0
- package/dist-types/tabs/internal/contexts/TabSlotRegistryContext.d.ts +5 -0
- package/dist-types/tabs/internal/contexts/TabsContext.d.ts +43 -0
- package/dist-types/tabs/internal/hooks/useFocusWithRetry.d.ts +9 -0
- package/dist-types/tabs/internal/hooks/useTabListRecovery.d.ts +12 -0
- package/dist-types/tabs/internal/hooks/useTabRemovalHandler.d.ts +32 -0
- package/dist-types/tabs/internal/hooks/useTabSelectionFocus.d.ts +15 -0
- package/dist-types/tabs/internal/overflow/TabOverflowList.d.ts +10 -0
- package/dist-types/tabs/internal/overflow/TabSlot.d.ts +6 -0
- package/dist-types/tabs/internal/overflow/overflowMath.d.ts +18 -0
- package/dist-types/tabs/internal/overflow/useOverflow.d.ts +11 -0
- package/dist-types/tabs/internal/overflow/useOverflowLayoutState.d.ts +13 -0
- package/dist-types/tabs/internal/overflow/useOverflowSelectionState.d.ts +13 -0
- package/dist-types/tabs/internal/overflow/useRenderedTabWidth.d.ts +12 -0
- package/dist-types/tabs/internal/overflow/widthMeasurement.d.ts +5 -0
- package/dist-types/tabs/internal/registry/useCollection.d.ts +30 -0
- package/dist-types/tabs/internal/registry/useRenderedTabsRegistry.d.ts +12 -0
- package/dist-types/tabs/internal/utils/domUtils.d.ts +1 -0
- package/package.json +3 -1
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
const MIN_TRUSTED_TAB_WIDTH = 0.5;
|
|
4
|
+
function calculateVisibleCount({
|
|
5
|
+
gap,
|
|
6
|
+
maxWidth: initialMaxWidth,
|
|
7
|
+
overflowWidth,
|
|
8
|
+
pinnedValue,
|
|
9
|
+
tabs
|
|
10
|
+
}) {
|
|
11
|
+
let maxWidth = initialMaxWidth;
|
|
12
|
+
let currentWidth = 0;
|
|
13
|
+
let nextVisibleCount = 0;
|
|
14
|
+
const visibleItems = [];
|
|
15
|
+
while (nextVisibleCount < tabs.length) {
|
|
16
|
+
const item = tabs[nextVisibleCount];
|
|
17
|
+
if (!item) {
|
|
18
|
+
break;
|
|
19
|
+
}
|
|
20
|
+
if (item.width == null) {
|
|
21
|
+
return null;
|
|
22
|
+
}
|
|
23
|
+
const itemWidth = item.width + gap;
|
|
24
|
+
if (currentWidth + itemWidth > maxWidth) {
|
|
25
|
+
break;
|
|
26
|
+
}
|
|
27
|
+
currentWidth += itemWidth;
|
|
28
|
+
visibleItems.push(item);
|
|
29
|
+
nextVisibleCount += 1;
|
|
30
|
+
}
|
|
31
|
+
const allTabsFit = nextVisibleCount >= tabs.length;
|
|
32
|
+
if (allTabsFit) {
|
|
33
|
+
return nextVisibleCount;
|
|
34
|
+
}
|
|
35
|
+
maxWidth -= overflowWidth;
|
|
36
|
+
while (currentWidth > maxWidth) {
|
|
37
|
+
const removed = visibleItems.pop();
|
|
38
|
+
if (!removed) {
|
|
39
|
+
break;
|
|
40
|
+
}
|
|
41
|
+
if (removed.width == null) {
|
|
42
|
+
return null;
|
|
43
|
+
}
|
|
44
|
+
currentWidth -= removed.width + gap;
|
|
45
|
+
nextVisibleCount -= 1;
|
|
46
|
+
}
|
|
47
|
+
const pinnedItem = pinnedValue == null ? null : tabs.find((item) => item.value === pinnedValue) ?? null;
|
|
48
|
+
if (pinnedItem && !visibleItems.includes(pinnedItem)) {
|
|
49
|
+
if (pinnedItem.width == null) {
|
|
50
|
+
return null;
|
|
51
|
+
}
|
|
52
|
+
const pinnedWidth = pinnedItem.width + gap;
|
|
53
|
+
while (currentWidth + pinnedWidth > maxWidth) {
|
|
54
|
+
const removed = visibleItems.pop();
|
|
55
|
+
if (!removed) {
|
|
56
|
+
break;
|
|
57
|
+
}
|
|
58
|
+
if (removed.width == null) {
|
|
59
|
+
return null;
|
|
60
|
+
}
|
|
61
|
+
currentWidth -= removed.width + gap;
|
|
62
|
+
nextVisibleCount -= 1;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
return Math.max(0, nextVisibleCount);
|
|
66
|
+
}
|
|
67
|
+
function partitionVisibleValues(orderedValues, visibleCount, pinnedValue) {
|
|
68
|
+
let visibleValues = orderedValues.slice(0, visibleCount);
|
|
69
|
+
let hiddenValues = orderedValues.slice(visibleCount);
|
|
70
|
+
const hiddenPinnedIndex = pinnedValue != null ? hiddenValues.indexOf(pinnedValue) : -1;
|
|
71
|
+
if (hiddenPinnedIndex !== -1) {
|
|
72
|
+
const pinnedHiddenValue = hiddenValues[hiddenPinnedIndex];
|
|
73
|
+
hiddenValues = hiddenValues.filter(
|
|
74
|
+
(_, index) => index !== hiddenPinnedIndex
|
|
75
|
+
);
|
|
76
|
+
if (pinnedHiddenValue !== void 0) {
|
|
77
|
+
visibleValues = [...visibleValues, pinnedHiddenValue];
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
return { visibleValues, hiddenValues };
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
exports.MIN_TRUSTED_TAB_WIDTH = MIN_TRUSTED_TAB_WIDTH;
|
|
84
|
+
exports.calculateVisibleCount = calculateVisibleCount;
|
|
85
|
+
exports.partitionVisibleValues = partitionVisibleValues;
|
|
86
|
+
//# sourceMappingURL=overflowMath.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"overflowMath.js","sources":["../src/tabs/internal/overflow/overflowMath.ts"],"sourcesContent":["export const MIN_TRUSTED_TAB_WIDTH = 0.5;\n\nexport interface MeasuredOverflowTab {\n value: string;\n width: number | null;\n}\n\ninterface CalculateVisibleCountProps {\n gap: number;\n maxWidth: number;\n overflowWidth: number;\n pinnedValue?: string;\n tabs: MeasuredOverflowTab[];\n}\n\nexport function calculateVisibleCount({\n gap,\n maxWidth: initialMaxWidth,\n overflowWidth,\n pinnedValue,\n tabs,\n}: CalculateVisibleCountProps) {\n let maxWidth = initialMaxWidth;\n let currentWidth = 0;\n let nextVisibleCount = 0;\n const visibleItems: MeasuredOverflowTab[] = [];\n\n while (nextVisibleCount < tabs.length) {\n const item = tabs[nextVisibleCount];\n if (!item) {\n break;\n }\n\n if (item.width == null) {\n return null;\n }\n\n const itemWidth = item.width + gap;\n if (currentWidth + itemWidth > maxWidth) {\n break;\n }\n\n currentWidth += itemWidth;\n visibleItems.push(item);\n nextVisibleCount += 1;\n }\n\n const allTabsFit = nextVisibleCount >= tabs.length;\n if (allTabsFit) {\n return nextVisibleCount;\n }\n\n maxWidth -= overflowWidth;\n\n while (currentWidth > maxWidth) {\n const removed = visibleItems.pop();\n if (!removed) {\n break;\n }\n if (removed.width == null) {\n return null;\n }\n currentWidth -= removed.width + gap;\n nextVisibleCount -= 1;\n }\n\n const pinnedItem =\n pinnedValue == null\n ? null\n : (tabs.find((item) => item.value === pinnedValue) ?? null);\n\n if (pinnedItem && !visibleItems.includes(pinnedItem)) {\n if (pinnedItem.width == null) {\n return null;\n }\n\n const pinnedWidth = pinnedItem.width + gap;\n while (currentWidth + pinnedWidth > maxWidth) {\n const removed = visibleItems.pop();\n if (!removed) {\n break;\n }\n if (removed.width == null) {\n return null;\n }\n currentWidth -= removed.width + gap;\n nextVisibleCount -= 1;\n }\n }\n\n return Math.max(0, nextVisibleCount);\n}\n\nexport function partitionVisibleValues(\n orderedValues: string[],\n visibleCount: number,\n pinnedValue?: string,\n) {\n let visibleValues = orderedValues.slice(0, visibleCount);\n let hiddenValues = orderedValues.slice(visibleCount);\n\n const hiddenPinnedIndex =\n pinnedValue != null ? hiddenValues.indexOf(pinnedValue) : -1;\n\n if (hiddenPinnedIndex !== -1) {\n const pinnedHiddenValue = hiddenValues[hiddenPinnedIndex];\n hiddenValues = hiddenValues.filter(\n (_, index) => index !== hiddenPinnedIndex,\n );\n if (pinnedHiddenValue !== undefined) {\n visibleValues = [...visibleValues, pinnedHiddenValue];\n }\n }\n\n return { visibleValues, hiddenValues };\n}\n"],"names":[],"mappings":";;AAAO,MAAM,qBAAA,GAAwB;AAe9B,SAAS,qBAAA,CAAsB;AAAA,EACpC,GAAA;AAAA,EACA,QAAA,EAAU,eAAA;AAAA,EACV,aAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAA+B;AAC7B,EAAA,IAAI,QAAA,GAAW,eAAA;AACf,EAAA,IAAI,YAAA,GAAe,CAAA;AACnB,EAAA,IAAI,gBAAA,GAAmB,CAAA;AACvB,EAAA,MAAM,eAAsC,EAAC;AAE7C,EAAA,OAAO,gBAAA,GAAmB,KAAK,MAAA,EAAQ;AACrC,IAAA,MAAM,IAAA,GAAO,KAAK,gBAAgB,CAAA;AAClC,IAAA,IAAI,CAAC,IAAA,EAAM;AACT,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,IAAA,CAAK,SAAS,IAAA,EAAM;AACtB,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,MAAM,SAAA,GAAY,KAAK,KAAA,GAAQ,GAAA;AAC/B,IAAA,IAAI,YAAA,GAAe,YAAY,QAAA,EAAU;AACvC,MAAA;AAAA,IACF;AAEA,IAAA,YAAA,IAAgB,SAAA;AAChB,IAAA,YAAA,CAAa,KAAK,IAAI,CAAA;AACtB,IAAA,gBAAA,IAAoB,CAAA;AAAA,EACtB;AAEA,EAAA,MAAM,UAAA,GAAa,oBAAoB,IAAA,CAAK,MAAA;AAC5C,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,OAAO,gBAAA;AAAA,EACT;AAEA,EAAA,QAAA,IAAY,aAAA;AAEZ,EAAA,OAAO,eAAe,QAAA,EAAU;AAC9B,IAAA,MAAM,OAAA,GAAU,aAAa,GAAA,EAAI;AACjC,IAAA,IAAI,CAAC,OAAA,EAAS;AACZ,MAAA;AAAA,IACF;AACA,IAAA,IAAI,OAAA,CAAQ,SAAS,IAAA,EAAM;AACzB,MAAA,OAAO,IAAA;AAAA,IACT;AACA,IAAA,YAAA,IAAgB,QAAQ,KAAA,GAAQ,GAAA;AAChC,IAAA,gBAAA,IAAoB,CAAA;AAAA,EACtB;AAEA,EAAA,MAAM,UAAA,GACJ,WAAA,IAAe,IAAA,GACX,IAAA,GACC,IAAA,CAAK,IAAA,CAAK,CAAC,IAAA,KAAS,IAAA,CAAK,KAAA,KAAU,WAAW,CAAA,IAAK,IAAA;AAE1D,EAAA,IAAI,UAAA,IAAc,CAAC,YAAA,CAAa,QAAA,CAAS,UAAU,CAAA,EAAG;AACpD,IAAA,IAAI,UAAA,CAAW,SAAS,IAAA,EAAM;AAC5B,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,MAAM,WAAA,GAAc,WAAW,KAAA,GAAQ,GAAA;AACvC,IAAA,OAAO,YAAA,GAAe,cAAc,QAAA,EAAU;AAC5C,MAAA,MAAM,OAAA,GAAU,aAAa,GAAA,EAAI;AACjC,MAAA,IAAI,CAAC,OAAA,EAAS;AACZ,QAAA;AAAA,MACF;AACA,MAAA,IAAI,OAAA,CAAQ,SAAS,IAAA,EAAM;AACzB,QAAA,OAAO,IAAA;AAAA,MACT;AACA,MAAA,YAAA,IAAgB,QAAQ,KAAA,GAAQ,GAAA;AAChC,MAAA,gBAAA,IAAoB,CAAA;AAAA,IACtB;AAAA,EACF;AAEA,EAAA,OAAO,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,gBAAgB,CAAA;AACrC;AAEO,SAAS,sBAAA,CACd,aAAA,EACA,YAAA,EACA,WAAA,EACA;AACA,EAAA,IAAI,aAAA,GAAgB,aAAA,CAAc,KAAA,CAAM,CAAA,EAAG,YAAY,CAAA;AACvD,EAAA,IAAI,YAAA,GAAe,aAAA,CAAc,KAAA,CAAM,YAAY,CAAA;AAEnD,EAAA,MAAM,oBACJ,WAAA,IAAe,IAAA,GAAO,YAAA,CAAa,OAAA,CAAQ,WAAW,CAAA,GAAI,EAAA;AAE5D,EAAA,IAAI,sBAAsB,EAAA,EAAI;AAC5B,IAAA,MAAM,iBAAA,GAAoB,aAAa,iBAAiB,CAAA;AACxD,IAAA,YAAA,GAAe,YAAA,CAAa,MAAA;AAAA,MAC1B,CAAC,CAAA,EAAG,KAAA,KAAU,KAAA,KAAU;AAAA,KAC1B;AACA,IAAA,IAAI,sBAAsB,MAAA,EAAW;AACnC,MAAA,aAAA,GAAgB,CAAC,GAAG,aAAA,EAAe,iBAAiB,CAAA;AAAA,IACtD;AAAA,EACF;AAEA,EAAA,OAAO,EAAE,eAAe,YAAA,EAAa;AACvC;;;;;;"}
|
|
@@ -0,0 +1,273 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
require('clsx');
|
|
5
|
+
var ownerWindow = require('../../../utils/ownerWindow.js');
|
|
6
|
+
require('react/jsx-runtime');
|
|
7
|
+
var useIsomorphicLayoutEffect = require('../../../utils/useIsomorphicLayoutEffect.js');
|
|
8
|
+
require('../../../utils/useFloatingUI/useFloatingUI.js');
|
|
9
|
+
require('../../../utils/useId.js');
|
|
10
|
+
require('../../../salt-provider/SaltProvider.js');
|
|
11
|
+
require('../../../viewport/ViewportProvider.js');
|
|
12
|
+
var domUtils = require('../utils/domUtils.js');
|
|
13
|
+
var overflowMath = require('./overflowMath.js');
|
|
14
|
+
var widthMeasurement = require('./widthMeasurement.js');
|
|
15
|
+
|
|
16
|
+
function getTabWidth(tab) {
|
|
17
|
+
const width = tab.width || widthMeasurement.getMeasuredWidth(tab.root);
|
|
18
|
+
return width > overflowMath.MIN_TRUSTED_TAB_WIDTH ? width : null;
|
|
19
|
+
}
|
|
20
|
+
function getAvailableWidth(element) {
|
|
21
|
+
const parent = element.parentElement;
|
|
22
|
+
if (!parent) {
|
|
23
|
+
return widthMeasurement.getMeasuredWidth(element);
|
|
24
|
+
}
|
|
25
|
+
const parentWidth = widthMeasurement.getMeasuredWidth(parent);
|
|
26
|
+
const parentStyles = ownerWindow.ownerWindow(parent).getComputedStyle(parent);
|
|
27
|
+
const parentGap = widthMeasurement.getGapValue(parentStyles);
|
|
28
|
+
const siblings = Array.from(parent.children).filter(
|
|
29
|
+
(child) => {
|
|
30
|
+
if (!domUtils.isHTMLElement(child) || child === element) {
|
|
31
|
+
return false;
|
|
32
|
+
}
|
|
33
|
+
return ownerWindow.ownerWindow(child).getComputedStyle(child).display !== "none";
|
|
34
|
+
}
|
|
35
|
+
);
|
|
36
|
+
const siblingWidth = siblings.reduce((width, sibling) => {
|
|
37
|
+
return width + widthMeasurement.getMeasuredWidth(sibling);
|
|
38
|
+
}, 0);
|
|
39
|
+
const gapCount = siblings.length > 0 ? siblings.length : 0;
|
|
40
|
+
const availableWidth = Math.max(
|
|
41
|
+
0,
|
|
42
|
+
parentWidth - siblingWidth - gapCount * parentGap
|
|
43
|
+
);
|
|
44
|
+
return availableWidth;
|
|
45
|
+
}
|
|
46
|
+
function isSelectedValueHidden(selected, hiddenValues) {
|
|
47
|
+
return selected !== void 0 && hiddenValues.includes(selected);
|
|
48
|
+
}
|
|
49
|
+
function getPinnedSelectionValue(selected, selectedIsHidden, pinnedSelectionRef) {
|
|
50
|
+
return selectedIsHidden ? selected : pinnedSelectionRef.current;
|
|
51
|
+
}
|
|
52
|
+
function useOverflow({
|
|
53
|
+
container,
|
|
54
|
+
overflowButton,
|
|
55
|
+
tabs,
|
|
56
|
+
selected,
|
|
57
|
+
menuOpen
|
|
58
|
+
}) {
|
|
59
|
+
const orderedValues = React.useMemo(() => tabs.map((tab) => tab.value), [tabs]);
|
|
60
|
+
const measurementInputKey = React.useMemo(() => {
|
|
61
|
+
return tabs.map((tab) => `${tab.value}:${tab.width.toFixed(2)}`).join("\0");
|
|
62
|
+
}, [tabs]);
|
|
63
|
+
const [visibleCount, setVisibleCount] = React.useState(0);
|
|
64
|
+
const [isMeasuring, setIsMeasuring] = React.useState(true);
|
|
65
|
+
const [measureRetryVersion, setMeasureRetryVersion] = React.useState(0);
|
|
66
|
+
const pinnedSelectionRef = React.useRef(selected);
|
|
67
|
+
const previousOverflowButtonWidthRef = React.useRef(0);
|
|
68
|
+
const previousMeasurementInputKeyRef = React.useRef(measurementInputKey);
|
|
69
|
+
const previousMenuOpenRef = React.useRef(menuOpen);
|
|
70
|
+
const measureRetryFrameRef = React.useRef(null);
|
|
71
|
+
const measureRetryCountRef = React.useRef(0);
|
|
72
|
+
const baseHiddenValues = orderedValues.slice(visibleCount);
|
|
73
|
+
const selectedIsHidden = isSelectedValueHidden(selected, baseHiddenValues);
|
|
74
|
+
const pinnedValue = getPinnedSelectionValue(
|
|
75
|
+
selected,
|
|
76
|
+
selectedIsHidden,
|
|
77
|
+
pinnedSelectionRef
|
|
78
|
+
);
|
|
79
|
+
const getCurrentPinnedValue = React.useCallback(() => {
|
|
80
|
+
return getPinnedSelectionValue(
|
|
81
|
+
selected,
|
|
82
|
+
selectedIsHidden,
|
|
83
|
+
pinnedSelectionRef
|
|
84
|
+
);
|
|
85
|
+
}, [selected, selectedIsHidden]);
|
|
86
|
+
const markMeasurementStale = React.useCallback(() => {
|
|
87
|
+
setIsMeasuring(true);
|
|
88
|
+
}, []);
|
|
89
|
+
const measureVisibleCount = React.useCallback(
|
|
90
|
+
(pinnedValue2) => {
|
|
91
|
+
const element = container.current;
|
|
92
|
+
if (!element) {
|
|
93
|
+
return null;
|
|
94
|
+
}
|
|
95
|
+
const maxWidth = getAvailableWidth(element);
|
|
96
|
+
const styles = ownerWindow.ownerWindow(element).getComputedStyle(element);
|
|
97
|
+
const gap = widthMeasurement.getGapValue(styles);
|
|
98
|
+
const overflowWidth = overflowButton.current ? overflowButton.current.offsetWidth + gap : 0;
|
|
99
|
+
const measuredTabs = tabs.map((tab) => ({
|
|
100
|
+
value: tab.value,
|
|
101
|
+
width: getTabWidth(tab)
|
|
102
|
+
}));
|
|
103
|
+
return overflowMath.calculateVisibleCount({
|
|
104
|
+
gap,
|
|
105
|
+
maxWidth,
|
|
106
|
+
overflowWidth,
|
|
107
|
+
pinnedValue: pinnedValue2,
|
|
108
|
+
tabs: measuredTabs
|
|
109
|
+
});
|
|
110
|
+
},
|
|
111
|
+
[container, overflowButton, tabs]
|
|
112
|
+
);
|
|
113
|
+
const clearMeasureRetry = React.useCallback(() => {
|
|
114
|
+
const element = container.current;
|
|
115
|
+
const frame = measureRetryFrameRef.current;
|
|
116
|
+
if (element && frame != null) {
|
|
117
|
+
ownerWindow.ownerWindow(element).cancelAnimationFrame(frame);
|
|
118
|
+
}
|
|
119
|
+
measureRetryFrameRef.current = null;
|
|
120
|
+
measureRetryCountRef.current = 0;
|
|
121
|
+
}, [container]);
|
|
122
|
+
React.useEffect(() => {
|
|
123
|
+
return clearMeasureRetry;
|
|
124
|
+
}, [clearMeasureRetry]);
|
|
125
|
+
useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
|
|
126
|
+
if (selected !== void 0 && selectedIsHidden) {
|
|
127
|
+
pinnedSelectionRef.current = selected;
|
|
128
|
+
const nextVisibleCount = measureVisibleCount(selected);
|
|
129
|
+
if (nextVisibleCount == null) {
|
|
130
|
+
markMeasurementStale();
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
if (nextVisibleCount !== visibleCount) {
|
|
134
|
+
setVisibleCount(nextVisibleCount);
|
|
135
|
+
}
|
|
136
|
+
if (isMeasuring) {
|
|
137
|
+
setIsMeasuring(false);
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}, [
|
|
141
|
+
isMeasuring,
|
|
142
|
+
markMeasurementStale,
|
|
143
|
+
measureVisibleCount,
|
|
144
|
+
selected,
|
|
145
|
+
selectedIsHidden,
|
|
146
|
+
visibleCount
|
|
147
|
+
]);
|
|
148
|
+
React.useEffect(() => {
|
|
149
|
+
const element = container.current;
|
|
150
|
+
if (!element || menuOpen || isMeasuring) {
|
|
151
|
+
return;
|
|
152
|
+
}
|
|
153
|
+
const observedElements = [element];
|
|
154
|
+
const parent = element.parentElement;
|
|
155
|
+
if (parent) {
|
|
156
|
+
observedElements.push(parent);
|
|
157
|
+
for (const child of Array.from(parent.children)) {
|
|
158
|
+
if (domUtils.isHTMLElement(child) && child !== element) {
|
|
159
|
+
observedElements.push(child);
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
const widths = widthMeasurement.seedWidthMap(observedElements);
|
|
164
|
+
const resizeObserverCtor = ownerWindow.ownerWindow(element).ResizeObserver;
|
|
165
|
+
if (!resizeObserverCtor) {
|
|
166
|
+
return;
|
|
167
|
+
}
|
|
168
|
+
const resizeObserver = new resizeObserverCtor(
|
|
169
|
+
(entries) => {
|
|
170
|
+
for (const entry of entries) {
|
|
171
|
+
if (!domUtils.isHTMLElement(entry.target)) {
|
|
172
|
+
continue;
|
|
173
|
+
}
|
|
174
|
+
const nextWidth = entry.contentRect.width;
|
|
175
|
+
if (widthMeasurement.updateWidthMap(widths, entry.target, nextWidth)) {
|
|
176
|
+
const nextVisibleCount = measureVisibleCount(
|
|
177
|
+
getCurrentPinnedValue()
|
|
178
|
+
);
|
|
179
|
+
if (nextVisibleCount != null && nextVisibleCount === visibleCount) {
|
|
180
|
+
continue;
|
|
181
|
+
}
|
|
182
|
+
markMeasurementStale();
|
|
183
|
+
return;
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
);
|
|
188
|
+
for (const observedElement of observedElements) {
|
|
189
|
+
resizeObserver.observe(observedElement);
|
|
190
|
+
}
|
|
191
|
+
return () => {
|
|
192
|
+
resizeObserver.disconnect();
|
|
193
|
+
};
|
|
194
|
+
}, [
|
|
195
|
+
container,
|
|
196
|
+
getCurrentPinnedValue,
|
|
197
|
+
isMeasuring,
|
|
198
|
+
markMeasurementStale,
|
|
199
|
+
measureVisibleCount,
|
|
200
|
+
menuOpen,
|
|
201
|
+
visibleCount
|
|
202
|
+
]);
|
|
203
|
+
useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
|
|
204
|
+
if (previousMenuOpenRef.current && !menuOpen) {
|
|
205
|
+
markMeasurementStale();
|
|
206
|
+
}
|
|
207
|
+
previousMenuOpenRef.current = menuOpen;
|
|
208
|
+
}, [markMeasurementStale, menuOpen]);
|
|
209
|
+
useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
|
|
210
|
+
var _a;
|
|
211
|
+
const nextOverflowButtonWidth = ((_a = overflowButton.current) == null ? void 0 : _a.offsetWidth) ?? 0;
|
|
212
|
+
if (previousOverflowButtonWidthRef.current === nextOverflowButtonWidth) {
|
|
213
|
+
return;
|
|
214
|
+
}
|
|
215
|
+
previousOverflowButtonWidthRef.current = nextOverflowButtonWidth;
|
|
216
|
+
if (visibleCount < tabs.length) {
|
|
217
|
+
markMeasurementStale();
|
|
218
|
+
}
|
|
219
|
+
});
|
|
220
|
+
useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
|
|
221
|
+
if (previousMeasurementInputKeyRef.current !== measurementInputKey) {
|
|
222
|
+
previousMeasurementInputKeyRef.current = measurementInputKey;
|
|
223
|
+
markMeasurementStale();
|
|
224
|
+
}
|
|
225
|
+
}, [markMeasurementStale, measurementInputKey]);
|
|
226
|
+
useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
|
|
227
|
+
if (!isMeasuring || menuOpen) {
|
|
228
|
+
return;
|
|
229
|
+
}
|
|
230
|
+
const nextVisibleCount = measureVisibleCount(getCurrentPinnedValue());
|
|
231
|
+
if (nextVisibleCount == null) {
|
|
232
|
+
if (measureRetryFrameRef.current != null) {
|
|
233
|
+
return;
|
|
234
|
+
}
|
|
235
|
+
const element = container.current;
|
|
236
|
+
if (!element || widthMeasurement.getMeasuredWidth(element) <= overflowMath.MIN_TRUSTED_TAB_WIDTH) {
|
|
237
|
+
measureRetryCountRef.current = 0;
|
|
238
|
+
return;
|
|
239
|
+
}
|
|
240
|
+
if (measureRetryCountRef.current >= 5) {
|
|
241
|
+
return;
|
|
242
|
+
}
|
|
243
|
+
measureRetryCountRef.current += 1;
|
|
244
|
+
measureRetryFrameRef.current = ownerWindow.ownerWindow(element).requestAnimationFrame(
|
|
245
|
+
() => {
|
|
246
|
+
measureRetryFrameRef.current = null;
|
|
247
|
+
setMeasureRetryVersion((currentVersion) => currentVersion + 1);
|
|
248
|
+
}
|
|
249
|
+
);
|
|
250
|
+
return;
|
|
251
|
+
}
|
|
252
|
+
clearMeasureRetry();
|
|
253
|
+
setVisibleCount(nextVisibleCount);
|
|
254
|
+
setIsMeasuring(false);
|
|
255
|
+
}, [
|
|
256
|
+
clearMeasureRetry,
|
|
257
|
+
container.current,
|
|
258
|
+
getCurrentPinnedValue,
|
|
259
|
+
isMeasuring,
|
|
260
|
+
measureRetryVersion,
|
|
261
|
+
measureVisibleCount,
|
|
262
|
+
menuOpen
|
|
263
|
+
]);
|
|
264
|
+
const { visibleValues, hiddenValues } = overflowMath.partitionVisibleValues(
|
|
265
|
+
orderedValues,
|
|
266
|
+
visibleCount,
|
|
267
|
+
pinnedValue
|
|
268
|
+
);
|
|
269
|
+
return [visibleValues, hiddenValues, isMeasuring];
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
exports.useOverflow = useOverflow;
|
|
273
|
+
//# sourceMappingURL=useOverflow.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useOverflow.js","sources":["../src/tabs/internal/overflow/useOverflow.ts"],"sourcesContent":["import {\n type MutableRefObject,\n type RefObject,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { ownerWindow, useIsomorphicLayoutEffect } from \"../../../utils\";\nimport type { RenderedTab } from \"../contexts/TabsContext\";\nimport { isHTMLElement } from \"../utils/domUtils\";\nimport {\n calculateVisibleCount,\n MIN_TRUSTED_TAB_WIDTH,\n partitionVisibleValues,\n} from \"./overflowMath\";\nimport {\n getGapValue,\n getMeasuredWidth,\n seedWidthMap,\n updateWidthMap,\n} from \"./widthMeasurement\";\n\ninterface UseOverflowProps {\n container: RefObject<HTMLElement>;\n selected?: string;\n tabs: RenderedTab[];\n overflowButton: RefObject<HTMLButtonElement>;\n menuOpen: boolean;\n}\n\nfunction getTabWidth(tab: RenderedTab) {\n const width = tab.width || getMeasuredWidth(tab.root);\n return width > MIN_TRUSTED_TAB_WIDTH ? width : null;\n}\n\nfunction getAvailableWidth(element: HTMLElement) {\n const parent = element.parentElement;\n if (!parent) {\n return getMeasuredWidth(element);\n }\n\n const parentWidth = getMeasuredWidth(parent);\n const parentStyles = ownerWindow(parent).getComputedStyle(parent);\n const parentGap = getGapValue(parentStyles);\n const siblings = Array.from(parent.children).filter(\n (child): child is HTMLElement => {\n if (!isHTMLElement(child) || child === element) {\n return false;\n }\n\n return ownerWindow(child).getComputedStyle(child).display !== \"none\";\n },\n );\n\n const siblingWidth = siblings.reduce((width, sibling) => {\n return width + getMeasuredWidth(sibling);\n }, 0);\n const gapCount = siblings.length > 0 ? siblings.length : 0;\n const availableWidth = Math.max(\n 0,\n parentWidth - siblingWidth - gapCount * parentGap,\n );\n return availableWidth;\n}\n\nfunction isSelectedValueHidden(\n selected: string | undefined,\n hiddenValues: string[],\n) {\n return selected !== undefined && hiddenValues.includes(selected);\n}\n\nfunction getPinnedSelectionValue(\n selected: string | undefined,\n selectedIsHidden: boolean,\n pinnedSelectionRef: MutableRefObject<string | undefined>,\n) {\n return selectedIsHidden ? selected : pinnedSelectionRef.current;\n}\n\nexport function useOverflow({\n container,\n overflowButton,\n tabs,\n selected,\n menuOpen,\n}: UseOverflowProps) {\n const orderedValues = useMemo(() => tabs.map((tab) => tab.value), [tabs]);\n const measurementInputKey = useMemo(() => {\n return tabs.map((tab) => `${tab.value}:${tab.width.toFixed(2)}`).join(\"\\0\");\n }, [tabs]);\n const [visibleCount, setVisibleCount] = useState(0);\n const [isMeasuring, setIsMeasuring] = useState(true);\n const [measureRetryVersion, setMeasureRetryVersion] = useState(0);\n const pinnedSelectionRef = useRef(selected);\n const previousOverflowButtonWidthRef = useRef(0);\n const previousMeasurementInputKeyRef = useRef(measurementInputKey);\n const previousMenuOpenRef = useRef(menuOpen);\n const measureRetryFrameRef = useRef<number | null>(null);\n const measureRetryCountRef = useRef(0);\n const baseHiddenValues = orderedValues.slice(visibleCount);\n const selectedIsHidden = isSelectedValueHidden(selected, baseHiddenValues);\n const pinnedValue = getPinnedSelectionValue(\n selected,\n selectedIsHidden,\n pinnedSelectionRef,\n );\n const getCurrentPinnedValue = useCallback(() => {\n return getPinnedSelectionValue(\n selected,\n selectedIsHidden,\n pinnedSelectionRef,\n );\n }, [selected, selectedIsHidden]);\n const markMeasurementStale = useCallback(() => {\n setIsMeasuring(true);\n }, []);\n\n const measureVisibleCount = useCallback(\n (pinnedValue?: string) => {\n const element = container.current;\n if (!element) {\n return null;\n }\n\n const maxWidth = getAvailableWidth(element);\n const styles = ownerWindow(element).getComputedStyle(element);\n const gap = getGapValue(styles);\n const overflowWidth = overflowButton.current\n ? overflowButton.current.offsetWidth + gap\n : 0;\n const measuredTabs = tabs.map((tab) => ({\n value: tab.value,\n width: getTabWidth(tab),\n }));\n\n return calculateVisibleCount({\n gap,\n maxWidth,\n overflowWidth,\n pinnedValue,\n tabs: measuredTabs,\n });\n },\n [container, overflowButton, tabs],\n );\n const clearMeasureRetry = useCallback(() => {\n const element = container.current;\n const frame = measureRetryFrameRef.current;\n\n if (element && frame != null) {\n ownerWindow(element).cancelAnimationFrame(frame);\n }\n\n measureRetryFrameRef.current = null;\n measureRetryCountRef.current = 0;\n }, [container]);\n\n useEffect(() => {\n return clearMeasureRetry;\n }, [clearMeasureRetry]);\n\n useIsomorphicLayoutEffect(() => {\n if (selected !== undefined && selectedIsHidden) {\n pinnedSelectionRef.current = selected;\n const nextVisibleCount = measureVisibleCount(selected);\n if (nextVisibleCount == null) {\n markMeasurementStale();\n return;\n }\n if (nextVisibleCount !== visibleCount) {\n setVisibleCount(nextVisibleCount);\n }\n if (isMeasuring) {\n setIsMeasuring(false);\n }\n }\n }, [\n isMeasuring,\n markMeasurementStale,\n measureVisibleCount,\n selected,\n selectedIsHidden,\n visibleCount,\n ]);\n\n useEffect(() => {\n const element = container.current;\n if (!element || menuOpen || isMeasuring) {\n return;\n }\n\n const observedElements = [element];\n const parent = element.parentElement;\n if (parent) {\n observedElements.push(parent);\n for (const child of Array.from(parent.children)) {\n if (isHTMLElement(child) && child !== element) {\n observedElements.push(child);\n }\n }\n }\n\n const widths = seedWidthMap(observedElements);\n const resizeObserverCtor = ownerWindow(element).ResizeObserver;\n if (!resizeObserverCtor) {\n return;\n }\n\n const resizeObserver = new resizeObserverCtor(\n (entries: ResizeObserverEntry[]) => {\n for (const entry of entries) {\n if (!isHTMLElement(entry.target)) {\n continue;\n }\n\n const nextWidth = entry.contentRect.width;\n if (updateWidthMap(widths, entry.target, nextWidth)) {\n const nextVisibleCount = measureVisibleCount(\n getCurrentPinnedValue(),\n );\n\n if (nextVisibleCount != null && nextVisibleCount === visibleCount) {\n continue;\n }\n\n markMeasurementStale();\n return;\n }\n }\n },\n );\n\n for (const observedElement of observedElements) {\n resizeObserver.observe(observedElement);\n }\n\n return () => {\n resizeObserver.disconnect();\n };\n }, [\n container,\n getCurrentPinnedValue,\n isMeasuring,\n markMeasurementStale,\n measureVisibleCount,\n menuOpen,\n visibleCount,\n ]);\n\n useIsomorphicLayoutEffect(() => {\n if (previousMenuOpenRef.current && !menuOpen) {\n markMeasurementStale();\n }\n\n previousMenuOpenRef.current = menuOpen;\n }, [markMeasurementStale, menuOpen]);\n\n useIsomorphicLayoutEffect(() => {\n const nextOverflowButtonWidth = overflowButton.current?.offsetWidth ?? 0;\n if (previousOverflowButtonWidthRef.current === nextOverflowButtonWidth) {\n return;\n }\n\n previousOverflowButtonWidthRef.current = nextOverflowButtonWidth;\n if (visibleCount < tabs.length) {\n markMeasurementStale();\n }\n });\n\n useIsomorphicLayoutEffect(() => {\n if (previousMeasurementInputKeyRef.current !== measurementInputKey) {\n previousMeasurementInputKeyRef.current = measurementInputKey;\n markMeasurementStale();\n }\n }, [markMeasurementStale, measurementInputKey]);\n\n useIsomorphicLayoutEffect(() => {\n // A content-only tab width update can briefly leave a tab without a\n // trustworthy measured width after it moves through the portal slots.\n // Retry on the next frame instead of leaving overflow stuck measuring.\n void measureRetryVersion;\n\n if (!isMeasuring || menuOpen) {\n return;\n }\n\n const nextVisibleCount = measureVisibleCount(getCurrentPinnedValue());\n\n if (nextVisibleCount == null) {\n if (measureRetryFrameRef.current != null) {\n return;\n }\n\n const element = container.current;\n if (!element || getMeasuredWidth(element) <= MIN_TRUSTED_TAB_WIDTH) {\n measureRetryCountRef.current = 0;\n return;\n }\n\n if (measureRetryCountRef.current >= 5) {\n return;\n }\n\n measureRetryCountRef.current += 1;\n measureRetryFrameRef.current = ownerWindow(element).requestAnimationFrame(\n () => {\n measureRetryFrameRef.current = null;\n setMeasureRetryVersion((currentVersion) => currentVersion + 1);\n },\n );\n return;\n }\n\n clearMeasureRetry();\n\n setVisibleCount(nextVisibleCount);\n setIsMeasuring(false);\n }, [\n clearMeasureRetry,\n container.current,\n getCurrentPinnedValue,\n isMeasuring,\n measureRetryVersion,\n measureVisibleCount,\n menuOpen,\n ]);\n\n const { visibleValues, hiddenValues } = partitionVisibleValues(\n orderedValues,\n visibleCount,\n pinnedValue,\n );\n\n return [visibleValues, hiddenValues, isMeasuring] as const;\n}\n"],"names":["getMeasuredWidth","MIN_TRUSTED_TAB_WIDTH","ownerWindow","getGapValue","isHTMLElement","useMemo","useState","useRef","useCallback","pinnedValue","calculateVisibleCount","useEffect","useIsomorphicLayoutEffect","seedWidthMap","updateWidthMap","partitionVisibleValues"],"mappings":"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"}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
function getOverflowStartIndex(hiddenValues, currentValue, fallbackValue) {
|
|
6
|
+
const currentIndex = hiddenValues.indexOf(currentValue);
|
|
7
|
+
const fallbackIndex = fallbackValue != null ? hiddenValues.indexOf(fallbackValue) : 0;
|
|
8
|
+
return currentIndex >= 0 ? currentIndex : Math.max(0, fallbackIndex);
|
|
9
|
+
}
|
|
10
|
+
function useOverflowLayoutState({
|
|
11
|
+
hiddenValues,
|
|
12
|
+
menuOpen,
|
|
13
|
+
overflowMenuOpen,
|
|
14
|
+
visibleValues
|
|
15
|
+
}) {
|
|
16
|
+
const [requestedOverflowActiveValue, setRequestedOverflowActiveValue] = React.useState(null);
|
|
17
|
+
React.useEffect(() => {
|
|
18
|
+
if (!overflowMenuOpen) {
|
|
19
|
+
setRequestedOverflowActiveValue(null);
|
|
20
|
+
}
|
|
21
|
+
}, [overflowMenuOpen]);
|
|
22
|
+
const resolvedOverflowActiveValue = React.useMemo(() => {
|
|
23
|
+
if (!overflowMenuOpen) {
|
|
24
|
+
return null;
|
|
25
|
+
}
|
|
26
|
+
if (requestedOverflowActiveValue && hiddenValues.includes(requestedOverflowActiveValue)) {
|
|
27
|
+
return requestedOverflowActiveValue;
|
|
28
|
+
}
|
|
29
|
+
return hiddenValues[0] ?? null;
|
|
30
|
+
}, [hiddenValues, overflowMenuOpen, requestedOverflowActiveValue]);
|
|
31
|
+
const hiddenValueSet = React.useMemo(() => new Set(hiddenValues), [hiddenValues]);
|
|
32
|
+
const visibleValueSet = React.useMemo(
|
|
33
|
+
() => new Set(visibleValues),
|
|
34
|
+
[visibleValues]
|
|
35
|
+
);
|
|
36
|
+
const getLocation = React.useCallback(
|
|
37
|
+
(value) => {
|
|
38
|
+
if (visibleValueSet.has(value)) {
|
|
39
|
+
return "main";
|
|
40
|
+
}
|
|
41
|
+
if (menuOpen && hiddenValueSet.has(value)) {
|
|
42
|
+
return "overflow";
|
|
43
|
+
}
|
|
44
|
+
return "hidden";
|
|
45
|
+
},
|
|
46
|
+
[hiddenValueSet, menuOpen, visibleValueSet]
|
|
47
|
+
);
|
|
48
|
+
const moveOverflowFocus = React.useCallback(
|
|
49
|
+
(key, value) => {
|
|
50
|
+
if (hiddenValues.length < 1) {
|
|
51
|
+
return false;
|
|
52
|
+
}
|
|
53
|
+
const startIndex = getOverflowStartIndex(
|
|
54
|
+
hiddenValues,
|
|
55
|
+
value,
|
|
56
|
+
resolvedOverflowActiveValue
|
|
57
|
+
);
|
|
58
|
+
const lastIndex = hiddenValues.length - 1;
|
|
59
|
+
let nextIndex = startIndex;
|
|
60
|
+
switch (key) {
|
|
61
|
+
case "ArrowDown":
|
|
62
|
+
nextIndex = startIndex >= lastIndex ? 0 : startIndex + 1;
|
|
63
|
+
break;
|
|
64
|
+
case "ArrowUp":
|
|
65
|
+
nextIndex = startIndex <= 0 ? lastIndex : startIndex - 1;
|
|
66
|
+
break;
|
|
67
|
+
case "Home":
|
|
68
|
+
nextIndex = 0;
|
|
69
|
+
break;
|
|
70
|
+
case "End":
|
|
71
|
+
nextIndex = lastIndex;
|
|
72
|
+
break;
|
|
73
|
+
}
|
|
74
|
+
const nextValue = hiddenValues[nextIndex];
|
|
75
|
+
if (!nextValue) {
|
|
76
|
+
return false;
|
|
77
|
+
}
|
|
78
|
+
setRequestedOverflowActiveValue(nextValue);
|
|
79
|
+
return true;
|
|
80
|
+
},
|
|
81
|
+
[hiddenValues, resolvedOverflowActiveValue]
|
|
82
|
+
);
|
|
83
|
+
const tabListLayoutContext = React.useMemo(
|
|
84
|
+
() => ({
|
|
85
|
+
getLocation,
|
|
86
|
+
overflowActiveValue: resolvedOverflowActiveValue,
|
|
87
|
+
setOverflowActiveValue: setRequestedOverflowActiveValue,
|
|
88
|
+
moveOverflowFocus
|
|
89
|
+
}),
|
|
90
|
+
[getLocation, moveOverflowFocus, resolvedOverflowActiveValue]
|
|
91
|
+
);
|
|
92
|
+
return {
|
|
93
|
+
resolvedOverflowActiveValue,
|
|
94
|
+
tabListLayoutContext
|
|
95
|
+
};
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
exports.useOverflowLayoutState = useOverflowLayoutState;
|
|
99
|
+
//# sourceMappingURL=useOverflowLayoutState.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useOverflowLayoutState.js","sources":["../src/tabs/internal/overflow/useOverflowLayoutState.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type {\n TabListLayoutContextValue,\n TabSlotLocation,\n} from \"../contexts/TabListLayoutContext\";\n\nfunction getOverflowStartIndex(\n hiddenValues: string[],\n currentValue: string,\n fallbackValue: string | null,\n) {\n const currentIndex = hiddenValues.indexOf(currentValue);\n const fallbackIndex =\n fallbackValue != null ? hiddenValues.indexOf(fallbackValue) : 0;\n\n return currentIndex >= 0 ? currentIndex : Math.max(0, fallbackIndex);\n}\n\ninterface UseOverflowLayoutStateArgs {\n hiddenValues: string[];\n menuOpen: boolean;\n overflowMenuOpen: boolean;\n visibleValues: string[];\n}\n\ninterface UseOverflowLayoutStateResult {\n resolvedOverflowActiveValue: string | null;\n tabListLayoutContext: TabListLayoutContextValue;\n}\n\nexport function useOverflowLayoutState({\n hiddenValues,\n menuOpen,\n overflowMenuOpen,\n visibleValues,\n}: UseOverflowLayoutStateArgs): UseOverflowLayoutStateResult {\n const [requestedOverflowActiveValue, setRequestedOverflowActiveValue] =\n useState<string | null>(null);\n\n useEffect(() => {\n if (!overflowMenuOpen) {\n setRequestedOverflowActiveValue(null);\n }\n }, [overflowMenuOpen]);\n\n const resolvedOverflowActiveValue = useMemo(() => {\n if (!overflowMenuOpen) {\n return null;\n }\n\n if (\n requestedOverflowActiveValue &&\n hiddenValues.includes(requestedOverflowActiveValue)\n ) {\n return requestedOverflowActiveValue;\n }\n\n return hiddenValues[0] ?? null;\n }, [hiddenValues, overflowMenuOpen, requestedOverflowActiveValue]);\n\n const hiddenValueSet = useMemo(() => new Set(hiddenValues), [hiddenValues]);\n const visibleValueSet = useMemo(\n () => new Set(visibleValues),\n [visibleValues],\n );\n\n const getLocation = useCallback(\n (value: string): TabSlotLocation => {\n if (visibleValueSet.has(value)) {\n return \"main\";\n }\n\n if (menuOpen && hiddenValueSet.has(value)) {\n return \"overflow\";\n }\n\n return \"hidden\";\n },\n [hiddenValueSet, menuOpen, visibleValueSet],\n );\n\n const moveOverflowFocus = useCallback(\n (key: \"ArrowDown\" | \"ArrowUp\" | \"Home\" | \"End\", value: string) => {\n if (hiddenValues.length < 1) {\n return false;\n }\n\n const startIndex = getOverflowStartIndex(\n hiddenValues,\n value,\n resolvedOverflowActiveValue,\n );\n const lastIndex = hiddenValues.length - 1;\n let nextIndex = startIndex;\n\n switch (key) {\n case \"ArrowDown\":\n nextIndex = startIndex >= lastIndex ? 0 : startIndex + 1;\n break;\n case \"ArrowUp\":\n nextIndex = startIndex <= 0 ? lastIndex : startIndex - 1;\n break;\n case \"Home\":\n nextIndex = 0;\n break;\n case \"End\":\n nextIndex = lastIndex;\n break;\n }\n\n const nextValue = hiddenValues[nextIndex];\n if (!nextValue) {\n return false;\n }\n\n setRequestedOverflowActiveValue(nextValue);\n return true;\n },\n [hiddenValues, resolvedOverflowActiveValue],\n );\n\n const tabListLayoutContext = useMemo(\n () => ({\n getLocation,\n overflowActiveValue: resolvedOverflowActiveValue,\n setOverflowActiveValue: setRequestedOverflowActiveValue,\n moveOverflowFocus,\n }),\n [getLocation, moveOverflowFocus, resolvedOverflowActiveValue],\n );\n\n return {\n resolvedOverflowActiveValue,\n tabListLayoutContext,\n };\n}\n"],"names":["useState","useEffect","useMemo","useCallback"],"mappings":"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"}
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
require('clsx');
|
|
5
|
+
require('react/jsx-runtime');
|
|
6
|
+
var useIsomorphicLayoutEffect = require('../../../utils/useIsomorphicLayoutEffect.js');
|
|
7
|
+
require('../../../utils/useFloatingUI/useFloatingUI.js');
|
|
8
|
+
require('../../../utils/useId.js');
|
|
9
|
+
var usePrevious = require('../../../utils/usePrevious.js');
|
|
10
|
+
require('../../../salt-provider/SaltProvider.js');
|
|
11
|
+
require('../../../viewport/ViewportProvider.js');
|
|
12
|
+
|
|
13
|
+
function useOverflowSelectionState({
|
|
14
|
+
commitSelection,
|
|
15
|
+
menuOpen,
|
|
16
|
+
selected,
|
|
17
|
+
setMenuOpen
|
|
18
|
+
}) {
|
|
19
|
+
const previousSelected = usePrevious.usePrevious(selected, [selected]);
|
|
20
|
+
const selectionFromOverflowValueRef = React.useRef(null);
|
|
21
|
+
const pendingOverflowSelectionRef = React.useRef(
|
|
22
|
+
null
|
|
23
|
+
);
|
|
24
|
+
const setSelected = React.useCallback(
|
|
25
|
+
(event, value, source = "main") => {
|
|
26
|
+
const selectedFromOverflow = source === "overflow";
|
|
27
|
+
selectionFromOverflowValueRef.current = selectedFromOverflow ? value : null;
|
|
28
|
+
if (selectedFromOverflow) {
|
|
29
|
+
event == null ? void 0 : event.persist();
|
|
30
|
+
pendingOverflowSelectionRef.current = { event, value };
|
|
31
|
+
setMenuOpen(false);
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
pendingOverflowSelectionRef.current = null;
|
|
35
|
+
setMenuOpen(false);
|
|
36
|
+
commitSelection(event, value);
|
|
37
|
+
},
|
|
38
|
+
[commitSelection, setMenuOpen]
|
|
39
|
+
);
|
|
40
|
+
useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
|
|
41
|
+
if (menuOpen) {
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
const pendingSelection = pendingOverflowSelectionRef.current;
|
|
45
|
+
if (!pendingSelection) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
pendingOverflowSelectionRef.current = null;
|
|
49
|
+
commitSelection(pendingSelection.event, pendingSelection.value);
|
|
50
|
+
}, [commitSelection, menuOpen]);
|
|
51
|
+
React.useEffect(() => {
|
|
52
|
+
const selectedFromOverflow = selectionFromOverflowValueRef.current;
|
|
53
|
+
if (selectedFromOverflow == null || pendingOverflowSelectionRef.current) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
if (selected === selectedFromOverflow && selected !== previousSelected) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
selectionFromOverflowValueRef.current = null;
|
|
60
|
+
}, [previousSelected, selected]);
|
|
61
|
+
return {
|
|
62
|
+
selectionFromOverflowValueRef,
|
|
63
|
+
setSelected
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
exports.useOverflowSelectionState = useOverflowSelectionState;
|
|
68
|
+
//# sourceMappingURL=useOverflowSelectionState.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useOverflowSelectionState.js","sources":["../src/tabs/internal/overflow/useOverflowSelectionState.ts"],"sourcesContent":["import {\n type Dispatch,\n type MutableRefObject,\n type SetStateAction,\n type SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\nimport { useIsomorphicLayoutEffect, usePrevious } from \"../../../utils\";\n\ninterface PendingOverflowSelection {\n event: SyntheticEvent | null;\n value: string;\n}\n\ninterface UseOverflowSelectionStateArgs {\n commitSelection: (event: SyntheticEvent | null, value: string) => void;\n menuOpen: boolean;\n selected?: string;\n setMenuOpen: Dispatch<SetStateAction<boolean>>;\n}\n\ninterface UseOverflowSelectionStateResult {\n selectionFromOverflowValueRef: MutableRefObject<string | null>;\n setSelected: (\n event: SyntheticEvent | null,\n value: string,\n source?: \"main\" | \"overflow\",\n ) => void;\n}\n\nexport function useOverflowSelectionState({\n commitSelection,\n menuOpen,\n selected,\n setMenuOpen,\n}: UseOverflowSelectionStateArgs): UseOverflowSelectionStateResult {\n const previousSelected = usePrevious(selected, [selected]);\n const selectionFromOverflowValueRef = useRef<string | null>(null);\n const pendingOverflowSelectionRef = useRef<PendingOverflowSelection | null>(\n null,\n );\n\n const setSelected = useCallback(\n (\n event: SyntheticEvent | null,\n value: string,\n source: \"main\" | \"overflow\" = \"main\",\n ) => {\n const selectedFromOverflow = source === \"overflow\";\n selectionFromOverflowValueRef.current = selectedFromOverflow\n ? value\n : null;\n\n if (selectedFromOverflow) {\n event?.persist();\n pendingOverflowSelectionRef.current = { event, value };\n setMenuOpen(false);\n return;\n }\n\n pendingOverflowSelectionRef.current = null;\n setMenuOpen(false);\n commitSelection(event, value);\n },\n [commitSelection, setMenuOpen],\n );\n\n useIsomorphicLayoutEffect(() => {\n if (menuOpen) {\n return;\n }\n\n const pendingSelection = pendingOverflowSelectionRef.current;\n if (!pendingSelection) {\n return;\n }\n\n pendingOverflowSelectionRef.current = null;\n commitSelection(pendingSelection.event, pendingSelection.value);\n }, [commitSelection, menuOpen]);\n\n useEffect(() => {\n const selectedFromOverflow = selectionFromOverflowValueRef.current;\n if (selectedFromOverflow == null || pendingOverflowSelectionRef.current) {\n return;\n }\n\n if (selected === selectedFromOverflow && selected !== previousSelected) {\n return;\n }\n\n selectionFromOverflowValueRef.current = null;\n }, [previousSelected, selected]);\n\n return {\n selectionFromOverflowValueRef,\n setSelected,\n };\n}\n"],"names":["usePrevious","useRef","useCallback","useIsomorphicLayoutEffect","useEffect"],"mappings":";;;;;;;;;;;;AAgCO,SAAS,yBAAA,CAA0B;AAAA,EACxC,eAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAAmE;AACjE,EAAA,MAAM,gBAAA,GAAmBA,uBAAA,CAAY,QAAA,EAAU,CAAC,QAAQ,CAAC,CAAA;AACzD,EAAA,MAAM,6BAAA,GAAgCC,aAAsB,IAAI,CAAA;AAChE,EAAA,MAAM,2BAAA,GAA8BA,YAAA;AAAA,IAClC;AAAA,GACF;AAEA,EAAA,MAAM,WAAA,GAAcC,iBAAA;AAAA,IAClB,CACE,KAAA,EACA,KAAA,EACA,MAAA,GAA8B,MAAA,KAC3B;AACH,MAAA,MAAM,uBAAuB,MAAA,KAAW,UAAA;AACxC,MAAA,6BAAA,CAA8B,OAAA,GAAU,uBACpC,KAAA,GACA,IAAA;AAEJ,MAAA,IAAI,oBAAA,EAAsB;AACxB,QAAA,KAAA,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAO,OAAA,EAAA;AACP,QAAA,2BAAA,CAA4B,OAAA,GAAU,EAAE,KAAA,EAAO,KAAA,EAAM;AACrD,QAAA,WAAA,CAAY,KAAK,CAAA;AACjB,QAAA;AAAA,MACF;AAEA,MAAA,2BAAA,CAA4B,OAAA,GAAU,IAAA;AACtC,MAAA,WAAA,CAAY,KAAK,CAAA;AACjB,MAAA,eAAA,CAAgB,OAAO,KAAK,CAAA;AAAA,IAC9B,CAAA;AAAA,IACA,CAAC,iBAAiB,WAAW;AAAA,GAC/B;AAEA,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,mBAAmB,2BAAA,CAA4B,OAAA;AACrD,IAAA,IAAI,CAAC,gBAAA,EAAkB;AACrB,MAAA;AAAA,IACF;AAEA,IAAA,2BAAA,CAA4B,OAAA,GAAU,IAAA;AACtC,IAAA,eAAA,CAAgB,gBAAA,CAAiB,KAAA,EAAO,gBAAA,CAAiB,KAAK,CAAA;AAAA,EAChE,CAAA,EAAG,CAAC,eAAA,EAAiB,QAAQ,CAAC,CAAA;AAE9B,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,uBAAuB,6BAAA,CAA8B,OAAA;AAC3D,IAAA,IAAI,oBAAA,IAAwB,IAAA,IAAQ,2BAAA,CAA4B,OAAA,EAAS;AACvE,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,QAAA,KAAa,oBAAA,IAAwB,QAAA,KAAa,gBAAA,EAAkB;AACtE,MAAA;AAAA,IACF;AAEA,IAAA,6BAAA,CAA8B,OAAA,GAAU,IAAA;AAAA,EAC1C,CAAA,EAAG,CAAC,gBAAA,EAAkB,QAAQ,CAAC,CAAA;AAE/B,EAAA,OAAO;AAAA,IACL,6BAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
|