@workday/canvas-kit-preview-react 16.1.7 → 16.1.9
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/dist/commonjs/color-picker/lib/ColorPicker.js +1 -1
- package/dist/commonjs/color-picker/lib/parts/ColorReset.js +1 -1
- package/dist/commonjs/color-picker/lib/parts/SwatchBook.js +1 -1
- package/dist/commonjs/divider/lib/Divider.js +3 -3
- package/dist/commonjs/loading-sparkles/lib/LoadingSparkles.js +2 -2
- package/dist/commonjs/multi-select/lib/MultiSelectInput.js +3 -3
- package/dist/commonjs/radio/lib/RadioGroup.js +3 -3
- package/dist/commonjs/radio/lib/RadioLabel.js +1 -1
- package/dist/commonjs/radio/lib/RadioText.js +3 -3
- package/dist/commonjs/radio/lib/StyledRadioButton.js +5 -5
- package/dist/commonjs/side-panel/lib/SidePanel.js +7 -7
- package/dist/commonjs/side-panel/lib/SidePanelToggleButton.js +11 -11
- package/dist/commonjs/status-indicator/lib/StatusIndicator.js +14 -14
- package/dist/commonjs/status-indicator/lib/StatusIndicatorLabel.js +1 -1
- package/dist/commonjs/switch/lib/SwitchBackground.js +1 -1
- package/dist/commonjs/switch/lib/SwitchCircle.js +2 -2
- package/dist/commonjs/switch/lib/SwitchContainer.js +1 -1
- package/dist/commonjs/switch/lib/SwitchIcon.js +2 -2
- package/dist/commonjs/switch/lib/SwitchInput.js +3 -3
- package/dist/commonjs/tabs/lib/TabsItem.d.ts +3 -1
- package/dist/commonjs/tabs/lib/TabsItem.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/TabsItem.js +60 -5
- package/dist/commonjs/tabs/lib/TabsList.d.ts +330 -2
- package/dist/commonjs/tabs/lib/TabsList.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/TabsList.js +65 -12
- package/dist/commonjs/tabs/lib/TabsOverflowButton.d.ts +24 -215
- package/dist/commonjs/tabs/lib/TabsOverflowButton.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/TabsOverflowButton.js +71 -6
- package/dist/commonjs/tabs/lib/TabsPanels.js +2 -2
- package/dist/commonjs/tabs/lib/useTabsModel.d.ts +17 -12
- package/dist/commonjs/tabs/lib/useTabsModel.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/useTabsModel.js +144 -5
- package/dist/commonjs/version/lib/version.js +1 -1
- package/dist/es6/color-picker/lib/ColorPicker.js +1 -1
- package/dist/es6/color-picker/lib/parts/ColorReset.js +1 -1
- package/dist/es6/color-picker/lib/parts/SwatchBook.js +1 -1
- package/dist/es6/divider/lib/Divider.js +3 -3
- package/dist/es6/loading-sparkles/lib/LoadingSparkles.js +2 -2
- package/dist/es6/multi-select/lib/MultiSelectInput.js +3 -3
- package/dist/es6/radio/lib/RadioGroup.js +3 -3
- package/dist/es6/radio/lib/RadioLabel.js +1 -1
- package/dist/es6/radio/lib/RadioText.js +3 -3
- package/dist/es6/radio/lib/StyledRadioButton.js +5 -5
- package/dist/es6/side-panel/lib/SidePanel.js +7 -7
- package/dist/es6/side-panel/lib/SidePanelToggleButton.js +11 -11
- package/dist/es6/status-indicator/lib/StatusIndicator.js +14 -14
- package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js +1 -1
- package/dist/es6/switch/lib/SwitchBackground.js +1 -1
- package/dist/es6/switch/lib/SwitchCircle.js +2 -2
- package/dist/es6/switch/lib/SwitchContainer.js +1 -1
- package/dist/es6/switch/lib/SwitchIcon.js +2 -2
- package/dist/es6/switch/lib/SwitchInput.js +3 -3
- package/dist/es6/tabs/lib/TabsItem.d.ts +3 -1
- package/dist/es6/tabs/lib/TabsItem.d.ts.map +1 -1
- package/dist/es6/tabs/lib/TabsItem.js +38 -6
- package/dist/es6/tabs/lib/TabsList.d.ts +330 -2
- package/dist/es6/tabs/lib/TabsList.d.ts.map +1 -1
- package/dist/es6/tabs/lib/TabsList.js +67 -15
- package/dist/es6/tabs/lib/TabsOverflowButton.d.ts +24 -215
- package/dist/es6/tabs/lib/TabsOverflowButton.d.ts.map +1 -1
- package/dist/es6/tabs/lib/TabsOverflowButton.js +72 -8
- package/dist/es6/tabs/lib/TabsPanels.js +2 -2
- package/dist/es6/tabs/lib/useTabsModel.d.ts +17 -12
- package/dist/es6/tabs/lib/useTabsModel.d.ts.map +1 -1
- package/dist/es6/tabs/lib/useTabsModel.js +144 -5
- package/dist/es6/version/lib/version.js +1 -1
- package/package.json +4 -4
- package/tabs/lib/TabsItem.tsx +39 -0
- package/tabs/lib/TabsList.tsx +83 -5
- package/tabs/lib/TabsOverflowButton.tsx +77 -5
- package/tabs/lib/TabsPanels.tsx +2 -2
- package/tabs/lib/useTabsModel.tsx +161 -3
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
4
|
-
import { composeHooks, createElemPropsHook, createSubcomponent, useLocalRef, useModalityType, } from '@workday/canvas-kit-react/common';
|
|
3
|
+
import { ListRenderItemContext, isCursor, orientationKeyMap, useOverflowListMeasure, } from '@workday/canvas-kit-react/collection';
|
|
4
|
+
import { composeHooks, createElemPropsHook, createSubcomponent, useLocalRef, useModalityType, useMountLayout, } from '@workday/canvas-kit-react/common';
|
|
5
5
|
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
6
6
|
import { createStencil } from '@workday/canvas-kit-styling';
|
|
7
7
|
import { system } from '@workday/canvas-tokens-web';
|
|
8
|
-
import { useTabsModel } from './useTabsModel';
|
|
8
|
+
import { TABS_OVERFLOW_BUTTON_ID, useTabsModel } from './useTabsModel';
|
|
9
9
|
function getScrollPercentage(elem, direction) {
|
|
10
10
|
if (direction === 'vertical') {
|
|
11
11
|
if (elem.scrollHeight > elem.clientHeight) {
|
|
@@ -59,30 +59,82 @@ export const useTabOverflowScroll = createElemPropsHook(useTabsModel)((_model, r
|
|
|
59
59
|
},
|
|
60
60
|
};
|
|
61
61
|
});
|
|
62
|
+
/**
|
|
63
|
+
* Resets the tablist cursor on blur to the selected tab when visible, or to the first visible
|
|
64
|
+
* item (e.g. the overflow button) when the selected tab is hidden. This ensures the roving
|
|
65
|
+
* tabindex always lands on a focusable element when only the "More" button is visible.
|
|
66
|
+
*/
|
|
67
|
+
export const useTabsListResetCursorOnBlur = createElemPropsHook(useTabsModel)(({ state, events }) => {
|
|
68
|
+
const programmaticFocusRef = React.useRef(false);
|
|
69
|
+
const requestAnimationFrameRef = React.useRef(0);
|
|
70
|
+
useMountLayout(() => {
|
|
71
|
+
return () => {
|
|
72
|
+
cancelAnimationFrame(requestAnimationFrameRef.current);
|
|
73
|
+
};
|
|
74
|
+
});
|
|
75
|
+
return {
|
|
76
|
+
onKeyDown(event) {
|
|
77
|
+
if (Object.keys(orientationKeyMap[state.orientation]).indexOf(event.key) !== -1) {
|
|
78
|
+
programmaticFocusRef.current = true;
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
onFocus() {
|
|
82
|
+
programmaticFocusRef.current = false;
|
|
83
|
+
},
|
|
84
|
+
onBlur() {
|
|
85
|
+
if (!programmaticFocusRef.current) {
|
|
86
|
+
requestAnimationFrameRef.current = requestAnimationFrame(() => {
|
|
87
|
+
var _a;
|
|
88
|
+
const selectedId = state.selectedIds !== 'all' && state.selectedIds.length
|
|
89
|
+
? state.selectedIds[0]
|
|
90
|
+
: undefined;
|
|
91
|
+
const visibleItems = state.items.filter(item => !state.hiddenIds.includes(item.id));
|
|
92
|
+
const targetId = selectedId && !state.hiddenIds.includes(selectedId) ? selectedId : (_a = visibleItems[0]) === null || _a === void 0 ? void 0 : _a.id;
|
|
93
|
+
if (targetId && !isCursor(state, targetId)) {
|
|
94
|
+
events.goTo({ id: targetId });
|
|
95
|
+
}
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
};
|
|
100
|
+
});
|
|
62
101
|
export const useTabsList = composeHooks(useTabOverflowScroll, createElemPropsHook(useTabsModel)(model => {
|
|
63
102
|
return {
|
|
64
103
|
role: 'tablist',
|
|
65
104
|
'aria-orientation': model.state.orientation,
|
|
66
105
|
};
|
|
67
|
-
}), useOverflowListMeasure,
|
|
106
|
+
}), useOverflowListMeasure, useTabsListResetCursorOnBlur);
|
|
68
107
|
export const tabsListStencil = createStencil({
|
|
69
|
-
base: { name: "
|
|
108
|
+
base: { name: "nzaec", styles: "box-sizing:border-box;display:flex;position:relative;min-width:0;gap:var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));@media screen and (max-width: 768px){padding-inline:var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));}" },
|
|
70
109
|
modifiers: {
|
|
71
110
|
modality: {
|
|
72
|
-
touch: { name: "
|
|
73
|
-
mouse: { name: "
|
|
74
|
-
pen: { name: "
|
|
111
|
+
touch: { name: "qr38j", styles: "overflow-x:auto;padding-inline:0;&[data-scroll-position=\"start\"]{mask-image:linear-gradient(to right, white 80%, transparent);}&[data-scroll-position=\"middle\"]{mask-image:linear-gradient(to left, white 80%, transparent), linear-gradient(to right, white 80%, transparent);mask-composite:intersect;}&[data-scroll-position=\"end\"]{mask-image:linear-gradient(to left, white 80%, transparent);}" },
|
|
112
|
+
mouse: { name: "291zhq", styles: "" },
|
|
113
|
+
pen: { name: "1k5j4b", styles: "" }
|
|
75
114
|
},
|
|
76
115
|
isDragging: {
|
|
77
|
-
true: { name: "
|
|
78
|
-
false: { name: "
|
|
116
|
+
true: { name: "3jtc7x", styles: "" },
|
|
117
|
+
false: { name: "7o9ys", styles: "" }
|
|
79
118
|
},
|
|
80
119
|
direction: {
|
|
81
|
-
left: { name: "
|
|
82
|
-
right: { name: "
|
|
120
|
+
left: { name: "3lon18", styles: "" },
|
|
121
|
+
right: { name: "5f6hs", styles: "" }
|
|
83
122
|
}
|
|
84
123
|
}
|
|
85
|
-
}, "tabs-list-
|
|
124
|
+
}, "tabs-list-8b7545");
|
|
125
|
+
/**
|
|
126
|
+
* Custom render function for tabs that filters out the synthetic overflow button item.
|
|
127
|
+
* This is needed because the overflow button is included in the model's items array
|
|
128
|
+
* for navigation purposes, but should not be rendered by the list or panel render function.
|
|
129
|
+
*/
|
|
130
|
+
export function useTabsCollectionRenderItems(model, children) {
|
|
131
|
+
const itemsToRender = model.state.items.filter(item => item.id !== TABS_OVERFLOW_BUTTON_ID);
|
|
132
|
+
const items = typeof children === 'function' ? (itemsToRender.map(item => {
|
|
133
|
+
const child = children(item.value, item.index);
|
|
134
|
+
return (_jsx(ListRenderItemContext.Provider, { value: { item }, children: child }, item.id || item.index));
|
|
135
|
+
})) : (_jsx(ListRenderItemContext.Provider, { value: {}, children: children }));
|
|
136
|
+
return items;
|
|
137
|
+
}
|
|
86
138
|
export const TabsList = createSubcomponent('div')({
|
|
87
139
|
displayName: 'Tabs.List',
|
|
88
140
|
modelHook: useTabsModel,
|
|
@@ -91,5 +143,5 @@ export const TabsList = createSubcomponent('div')({
|
|
|
91
143
|
const modality = useModalityType();
|
|
92
144
|
return (_jsxs(Element, { ...mergeStyles(elemProps, tabsListStencil({
|
|
93
145
|
modality: modality,
|
|
94
|
-
})), children: [
|
|
146
|
+
})), children: [useTabsCollectionRenderItems(model, children), overflowButton] }));
|
|
95
147
|
});
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
export { TABS_OVERFLOW_BUTTON_ID } from './useTabsModel';
|
|
2
3
|
export interface OverflowButtonProps {
|
|
3
4
|
/**
|
|
4
5
|
* The label text of the Tab.
|
|
@@ -7,11 +8,6 @@ export interface OverflowButtonProps {
|
|
|
7
8
|
}
|
|
8
9
|
export declare const useTabsOverflowButton: import("@workday/canvas-kit-react/common").BehaviorHook<{
|
|
9
10
|
state: {
|
|
10
|
-
getId: (item: any) => string;
|
|
11
|
-
orientation: import("@workday/canvas-kit-react/collection").Orientation;
|
|
12
|
-
panels: import("@workday/canvas-kit-react/collection").Item<any>[];
|
|
13
|
-
panelIndexRef: React.MutableRefObject<number>;
|
|
14
|
-
variant: "filled" | "outlined";
|
|
15
11
|
hiddenIds: string[];
|
|
16
12
|
itemSizeCache: Record<string, number>;
|
|
17
13
|
itemWidthCache: Record<string, number>;
|
|
@@ -31,19 +27,13 @@ export declare const useTabsOverflowButton: import("@workday/canvas-kit-react/co
|
|
|
31
27
|
UNSTABLE_defaultItemHeight: number;
|
|
32
28
|
containerRef: React.RefObject<HTMLDivElement>;
|
|
33
29
|
id: string;
|
|
30
|
+
orientation: "horizontal" | "vertical";
|
|
34
31
|
indexRef: React.MutableRefObject<number>;
|
|
35
32
|
nonInteractiveIds: string[];
|
|
36
33
|
isVirtualized: boolean;
|
|
37
34
|
items: import("@workday/canvas-kit-react/collection").Item<any>[];
|
|
38
35
|
};
|
|
39
36
|
events: {
|
|
40
|
-
registerPanel: (data: {
|
|
41
|
-
id: string;
|
|
42
|
-
textValue: string;
|
|
43
|
-
}) => void;
|
|
44
|
-
unregisterPanel: (data: {
|
|
45
|
-
id: string;
|
|
46
|
-
}) => void;
|
|
47
37
|
select(data: {
|
|
48
38
|
id: string;
|
|
49
39
|
}): void;
|
|
@@ -117,215 +107,28 @@ export declare const useTabsOverflowButton: import("@workday/canvas-kit-react/co
|
|
|
117
107
|
value: number;
|
|
118
108
|
}): void;
|
|
119
109
|
};
|
|
120
|
-
menu: {
|
|
121
|
-
state: {
|
|
122
|
-
stackRef: React.RefObject<HTMLDivElement>;
|
|
123
|
-
targetRef: React.RefObject<HTMLButtonElement>;
|
|
124
|
-
initialFocusRef: React.RefObject<any> | undefined;
|
|
125
|
-
returnFocusRef: React.RefObject<any> | undefined;
|
|
126
|
-
placement: import("@popperjs/core").Placement;
|
|
127
|
-
id: string;
|
|
128
|
-
visibility: "hidden" | "visible";
|
|
129
|
-
selectedIds: string[] | "all";
|
|
130
|
-
unselectedIds: string[];
|
|
131
|
-
cursorId: string | string[];
|
|
132
|
-
columnCount: number;
|
|
133
|
-
pageSizeRef: React.MutableRefObject<number>;
|
|
134
|
-
cursorIndexRef: {
|
|
135
|
-
readonly current: number;
|
|
136
|
-
};
|
|
137
|
-
UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
|
|
138
|
-
UNSTABLE_defaultItemHeight: number;
|
|
139
|
-
containerRef: React.RefObject<HTMLDivElement>;
|
|
140
|
-
orientation: "horizontal" | "vertical";
|
|
141
|
-
indexRef: React.MutableRefObject<number>;
|
|
142
|
-
nonInteractiveIds: string[];
|
|
143
|
-
isVirtualized: boolean;
|
|
144
|
-
items: import("@workday/canvas-kit-react/collection").Item<any>[];
|
|
145
|
-
mode: "multiple" | "single";
|
|
146
|
-
};
|
|
147
|
-
events: {
|
|
148
|
-
updatePlacement(data: {
|
|
149
|
-
placement: import("@popperjs/core").Placement;
|
|
150
|
-
}): void;
|
|
151
|
-
show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
|
|
152
|
-
hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
|
|
153
|
-
select(data: {
|
|
154
|
-
id: string;
|
|
155
|
-
}): void;
|
|
156
|
-
selectAll(): void;
|
|
157
|
-
unselectAll(): void;
|
|
158
|
-
setSelectedIds(ids: string[] | "all"): void;
|
|
159
|
-
remove(data: {
|
|
160
|
-
id: string;
|
|
161
|
-
nextId?: string | undefined;
|
|
162
|
-
event?: Event | React.SyntheticEvent<Element, Event> | undefined;
|
|
163
|
-
}): void;
|
|
164
|
-
goTo(data: {
|
|
165
|
-
id: string;
|
|
166
|
-
}): void;
|
|
167
|
-
goToNext(): void;
|
|
168
|
-
goToPrevious(): void;
|
|
169
|
-
goToPreviousRow(): void;
|
|
170
|
-
goToNextRow(): void;
|
|
171
|
-
goToFirst(): void;
|
|
172
|
-
goToLast(): void;
|
|
173
|
-
goToFirstOfRow(): void;
|
|
174
|
-
goToLastOfRow(): void;
|
|
175
|
-
goToNextPage(): void;
|
|
176
|
-
goToPreviousPage(): void;
|
|
177
|
-
registerItem(data: {
|
|
178
|
-
id: string;
|
|
179
|
-
textValue: string;
|
|
180
|
-
}): void;
|
|
181
|
-
unregisterItem(data: {
|
|
182
|
-
id: string;
|
|
183
|
-
}): void;
|
|
184
|
-
updateItemHeight(data: {
|
|
185
|
-
value: number;
|
|
186
|
-
}): void;
|
|
187
|
-
};
|
|
188
|
-
UNSTABLE_parentModel: {
|
|
189
|
-
state: {
|
|
190
|
-
selectedIds: string[] | "all";
|
|
191
|
-
unselectedIds: string[];
|
|
192
|
-
cursorId: string | string[];
|
|
193
|
-
columnCount: number;
|
|
194
|
-
pageSizeRef: React.MutableRefObject<number>;
|
|
195
|
-
cursorIndexRef: {
|
|
196
|
-
readonly current: number;
|
|
197
|
-
};
|
|
198
|
-
UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
|
|
199
|
-
UNSTABLE_defaultItemHeight: number;
|
|
200
|
-
containerRef: React.RefObject<HTMLDivElement>;
|
|
201
|
-
id: string;
|
|
202
|
-
orientation: "horizontal" | "vertical";
|
|
203
|
-
indexRef: React.MutableRefObject<number>;
|
|
204
|
-
nonInteractiveIds: string[];
|
|
205
|
-
isVirtualized: boolean;
|
|
206
|
-
items: import("@workday/canvas-kit-react/collection").Item<any>[];
|
|
207
|
-
};
|
|
208
|
-
events: {
|
|
209
|
-
select(data: {
|
|
210
|
-
id: string;
|
|
211
|
-
}): void;
|
|
212
|
-
selectAll(): void;
|
|
213
|
-
unselectAll(): void;
|
|
214
|
-
setSelectedIds(ids: string[] | "all"): void;
|
|
215
|
-
remove(data: {
|
|
216
|
-
id: string;
|
|
217
|
-
nextId?: string | undefined;
|
|
218
|
-
event?: Event | React.SyntheticEvent<Element, Event> | undefined;
|
|
219
|
-
}): void;
|
|
220
|
-
goTo(data: {
|
|
221
|
-
id: string;
|
|
222
|
-
}): void;
|
|
223
|
-
goToNext(): void;
|
|
224
|
-
goToPrevious(): void;
|
|
225
|
-
goToPreviousRow(): void;
|
|
226
|
-
goToNextRow(): void;
|
|
227
|
-
goToFirst(): void;
|
|
228
|
-
goToLast(): void;
|
|
229
|
-
goToFirstOfRow(): void;
|
|
230
|
-
goToLastOfRow(): void;
|
|
231
|
-
goToNextPage(): void;
|
|
232
|
-
goToPreviousPage(): void;
|
|
233
|
-
registerItem(data: {
|
|
234
|
-
id: string;
|
|
235
|
-
textValue: string;
|
|
236
|
-
}): void;
|
|
237
|
-
unregisterItem(data: {
|
|
238
|
-
id: string;
|
|
239
|
-
}): void;
|
|
240
|
-
updateItemHeight(data: {
|
|
241
|
-
value: number;
|
|
242
|
-
}): void;
|
|
243
|
-
};
|
|
244
|
-
selection: import("@workday/canvas-kit-react/collection").SelectionManager;
|
|
245
|
-
navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
|
|
246
|
-
getId: (item: any) => string;
|
|
247
|
-
getTextValue: (item: any) => string;
|
|
248
|
-
UNSTABLE_parentModel: {
|
|
249
|
-
state: {
|
|
250
|
-
selectedIds: string[] | "all";
|
|
251
|
-
unselectedIds: string[];
|
|
252
|
-
cursorId: string | string[];
|
|
253
|
-
columnCount: number;
|
|
254
|
-
pageSizeRef: React.MutableRefObject<number>;
|
|
255
|
-
cursorIndexRef: {
|
|
256
|
-
readonly current: number;
|
|
257
|
-
};
|
|
258
|
-
UNSTABLE_virtual: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
|
|
259
|
-
UNSTABLE_defaultItemHeight: number;
|
|
260
|
-
containerRef: React.RefObject<HTMLDivElement>;
|
|
261
|
-
id: string;
|
|
262
|
-
orientation: "horizontal" | "vertical";
|
|
263
|
-
indexRef: React.MutableRefObject<number>;
|
|
264
|
-
nonInteractiveIds: string[];
|
|
265
|
-
isVirtualized: boolean;
|
|
266
|
-
items: import("@workday/canvas-kit-react/collection").Item<any>[];
|
|
267
|
-
};
|
|
268
|
-
events: {
|
|
269
|
-
select(data: {
|
|
270
|
-
id: string;
|
|
271
|
-
}): void;
|
|
272
|
-
selectAll(): void;
|
|
273
|
-
unselectAll(): void;
|
|
274
|
-
setSelectedIds(ids: string[] | "all"): void;
|
|
275
|
-
remove(data: {
|
|
276
|
-
id: string;
|
|
277
|
-
nextId?: string | undefined;
|
|
278
|
-
event?: Event | React.SyntheticEvent<Element, Event> | undefined;
|
|
279
|
-
}): void;
|
|
280
|
-
goTo(data: {
|
|
281
|
-
id: string;
|
|
282
|
-
}): void;
|
|
283
|
-
goToNext(): void;
|
|
284
|
-
goToPrevious(): void;
|
|
285
|
-
goToPreviousRow(): void;
|
|
286
|
-
goToNextRow(): void;
|
|
287
|
-
goToFirst(): void;
|
|
288
|
-
goToLast(): void;
|
|
289
|
-
goToFirstOfRow(): void;
|
|
290
|
-
goToLastOfRow(): void;
|
|
291
|
-
goToNextPage(): void;
|
|
292
|
-
goToPreviousPage(): void;
|
|
293
|
-
registerItem(data: {
|
|
294
|
-
id: string;
|
|
295
|
-
textValue: string;
|
|
296
|
-
}): void;
|
|
297
|
-
unregisterItem(data: {
|
|
298
|
-
id: string;
|
|
299
|
-
}): void;
|
|
300
|
-
updateItemHeight(data: {
|
|
301
|
-
value: number;
|
|
302
|
-
}): void;
|
|
303
|
-
};
|
|
304
|
-
selection: import("@workday/canvas-kit-react/collection").SelectionManager;
|
|
305
|
-
navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
|
|
306
|
-
getId: (item: any) => string;
|
|
307
|
-
getTextValue: (item: any) => string;
|
|
308
|
-
} | undefined;
|
|
309
|
-
};
|
|
310
|
-
selection: import("@workday/canvas-kit-react/collection").SelectionManager;
|
|
311
|
-
navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
|
|
312
|
-
getId: (item: any) => string;
|
|
313
|
-
getTextValue: (item: any) => string;
|
|
314
|
-
};
|
|
315
110
|
selection: import("@workday/canvas-kit-react/collection").SelectionManager;
|
|
316
111
|
navigation: import("@workday/canvas-kit-react/collection").NavigationManager;
|
|
317
112
|
getId: (item: any) => string;
|
|
318
113
|
getTextValue: (item: any) => string;
|
|
319
114
|
}, import("@workday/canvas-kit-react/common").RemoveNulls<import("@workday/canvas-kit-react/common").MergeProps<{
|
|
320
|
-
readonly 'aria-haspopup': true;
|
|
321
|
-
}, import("@workday/canvas-kit-react/common").MergeProps<{
|
|
322
115
|
readonly ref: (instance: HTMLElement | null) => void;
|
|
323
|
-
|
|
116
|
+
}, import("@workday/canvas-kit-react/common").MergeProps<{
|
|
117
|
+
readonly onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
|
|
118
|
+
readonly onClick: () => void;
|
|
119
|
+
readonly 'data-focus-id': string;
|
|
324
120
|
readonly tabIndex: 0 | -1;
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
121
|
+
}, import("@workday/canvas-kit-react/common").MergeProps<{
|
|
122
|
+
readonly ref: (instance: Element | null | undefined) => void;
|
|
123
|
+
readonly 'data-id': string;
|
|
124
|
+
readonly disabled: true | undefined;
|
|
125
|
+
readonly 'aria-setsize': number | undefined;
|
|
126
|
+
readonly 'aria-posinset': number | undefined;
|
|
127
|
+
readonly 'data-index': number | undefined;
|
|
128
|
+
readonly style: React.CSSProperties;
|
|
129
|
+
readonly id: string;
|
|
130
|
+
}, import("@workday/canvas-kit-react/common").MergeProps<{
|
|
131
|
+
readonly 'data-id': "__tabs-overflow__";
|
|
329
132
|
}, import("@workday/canvas-kit-react/common").MergeProps<import("@workday/canvas-kit-react/common").RemoveNulls<import("@workday/canvas-kit-react/common").MergeProps<{
|
|
330
133
|
readonly id: string;
|
|
331
134
|
readonly 'aria-haspopup': "true";
|
|
@@ -334,7 +137,13 @@ export declare const useTabsOverflowButton: import("@workday/canvas-kit-react/co
|
|
|
334
137
|
}, import("@workday/canvas-kit-react/common").MergeProps<{
|
|
335
138
|
readonly ref: (instance: unknown) => void;
|
|
336
139
|
readonly onClick: (event: React.MouseEvent<Element, MouseEvent>) => void;
|
|
337
|
-
}, import("@workday/canvas-kit-react/common").MergeProps<{}, import("@workday/canvas-kit-react/common").MergeProps<{}, import("@workday/canvas-kit-react/common").MergeProps<{}, import("@workday/canvas-kit-react/common").MergeProps<{}, {}>>>>>>>, import("@workday/canvas-kit-react/common").MergeProps<{
|
|
140
|
+
}, import("@workday/canvas-kit-react/common").MergeProps<{}, import("@workday/canvas-kit-react/common").MergeProps<{}, import("@workday/canvas-kit-react/common").MergeProps<{}, import("@workday/canvas-kit-react/common").MergeProps<{}, {}>>>>>>>, import("@workday/canvas-kit-react/common").MergeProps<{
|
|
141
|
+
readonly onFocus: () => void;
|
|
142
|
+
}, {
|
|
143
|
+
readonly 'aria-haspopup': "menu";
|
|
144
|
+
readonly 'aria-selected': false;
|
|
145
|
+
readonly role: "tab";
|
|
146
|
+
}>>>>>>>>;
|
|
338
147
|
export declare const TabsOverflowButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", OverflowButtonProps, {
|
|
339
148
|
state: {
|
|
340
149
|
getId: (item: any) => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabsOverflowButton.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsOverflowButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"TabsOverflowButton.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsOverflowButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAyB/B,OAAO,EAAC,uBAAuB,EAAC,MAAM,gBAAgB,CAAC;AAEvD,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAoCD,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAqCjC,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAyB7B,CAAC"}
|
|
@@ -1,25 +1,89 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
import { composeHooks, createElemPropsHook, createSubModelElemPropsHook, createSubcomponent, } from '@workday/canvas-kit-react/common';
|
|
2
|
+
import { useListItemRegister, useListItemRovingFocus, useOverflowListModel, } from '@workday/canvas-kit-react/collection';
|
|
3
|
+
import { composeHooks, createElemPropsHook, createSubModelElemPropsHook, createSubcomponent, useLocalRef, useResizeObserver, } from '@workday/canvas-kit-react/common';
|
|
4
4
|
import { SystemIcon } from '@workday/canvas-kit-react/icon';
|
|
5
5
|
import { mergeStyles } from '@workday/canvas-kit-react/layout';
|
|
6
6
|
import { useMenuTarget } from '@workday/canvas-kit-react/menu';
|
|
7
7
|
import { createStencil } from '@workday/canvas-kit-styling';
|
|
8
8
|
import { chevronDownSmallIcon } from '@workday/canvas-system-icons-web';
|
|
9
9
|
import { StyledTabItem } from './TabsItem';
|
|
10
|
-
import { useTabsModel } from './useTabsModel';
|
|
10
|
+
import { TABS_OVERFLOW_BUTTON_ID, useTabsModel } from './useTabsModel';
|
|
11
|
+
// Re-export for consumers who may need to reference the overflow button ID
|
|
12
|
+
export { TABS_OVERFLOW_BUTTON_ID } from './useTabsModel';
|
|
11
13
|
const tabsOverflowButtonStencil = createStencil({
|
|
12
|
-
base: { name: "
|
|
13
|
-
}, "tabs-overflow-button-
|
|
14
|
-
|
|
14
|
+
base: { name: "1qwcw7", styles: "box-sizing:border-box;&:has([data-part=\"tabs-overflow-button-icon\"]){display:flex;gap:0;}" }
|
|
15
|
+
}, "tabs-overflow-button-5c3573");
|
|
16
|
+
/**
|
|
17
|
+
* Measures the overflow button and reports its size to the model for overflow calculation.
|
|
18
|
+
* Unlike useOverflowListTarget, this does NOT set aria-hidden or visibility styles because
|
|
19
|
+
* we handle visibility via conditional rendering in the TabsOverflowButton component.
|
|
20
|
+
*/
|
|
21
|
+
const useTabsOverflowButtonMeasure = createElemPropsHook(useOverflowListModel)((model, ref) => {
|
|
22
|
+
const { elementRef, localRef } = useLocalRef(ref);
|
|
23
|
+
useResizeObserver({
|
|
24
|
+
ref: localRef,
|
|
25
|
+
onResize: ({ width = 0, height = 0 }) => {
|
|
26
|
+
if (localRef.current && (width > 0 || height > 0)) {
|
|
27
|
+
const styles = getComputedStyle(localRef.current);
|
|
28
|
+
const w = width + parseFloat(styles.marginLeft) + parseFloat(styles.marginRight);
|
|
29
|
+
const h = height + parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
|
|
30
|
+
model.events.setOverflowTargetSize({ width: w, height: h });
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
});
|
|
15
34
|
return {
|
|
16
|
-
|
|
35
|
+
ref: elementRef,
|
|
17
36
|
};
|
|
18
|
-
})
|
|
37
|
+
});
|
|
38
|
+
export const useTabsOverflowButton = composeHooks(
|
|
39
|
+
// Measures the overflow button for overflow calculation (no aria-hidden or visibility styles)
|
|
40
|
+
useTabsOverflowButtonMeasure,
|
|
41
|
+
// Adds roving tabindex behavior for arrow key navigation within the tablist
|
|
42
|
+
useListItemRovingFocus,
|
|
43
|
+
// Registers the overflow button as an item in the collection for cursor navigation
|
|
44
|
+
useListItemRegister,
|
|
45
|
+
// Provides the stable data-id needed for collection registration
|
|
46
|
+
createElemPropsHook(useTabsModel)(() => {
|
|
47
|
+
return {
|
|
48
|
+
'data-id': TABS_OVERFLOW_BUTTON_ID,
|
|
49
|
+
};
|
|
50
|
+
}),
|
|
51
|
+
// Connects to the menu sub-model for popup behavior
|
|
52
|
+
createSubModelElemPropsHook(useTabsModel)(m => m.menu, useMenuTarget),
|
|
53
|
+
// Syncs the cursor to the overflow button when it receives focus.
|
|
54
|
+
// This is needed because when the menu closes and focus returns to the overflow button,
|
|
55
|
+
// the cursor state needs to be updated so arrow key navigation works correctly.
|
|
56
|
+
createElemPropsHook(useTabsModel)(model => {
|
|
57
|
+
return {
|
|
58
|
+
onFocus() {
|
|
59
|
+
model.events.goTo({ id: TABS_OVERFLOW_BUTTON_ID });
|
|
60
|
+
},
|
|
61
|
+
};
|
|
62
|
+
}),
|
|
63
|
+
// Runs FIRST - Sets ARIA attributes for the overflow tab
|
|
64
|
+
// In composeHooks, hooks run right-to-left, and mergeProps gives precedence to elemProps
|
|
65
|
+
// (props from earlier-running hooks). So this runs first and its props win.
|
|
66
|
+
// Note: We intentionally do NOT include useListItemSelect here because clicking
|
|
67
|
+
// the overflow button should open the menu, not select it as the active tab
|
|
68
|
+
createElemPropsHook(useTabsModel)(() => {
|
|
69
|
+
return {
|
|
70
|
+
'aria-haspopup': 'menu',
|
|
71
|
+
'aria-selected': false,
|
|
72
|
+
role: 'tab',
|
|
73
|
+
};
|
|
74
|
+
}));
|
|
19
75
|
export const TabsOverflowButton = createSubcomponent('button')({
|
|
20
76
|
displayName: 'Tabs.OverflowButton',
|
|
21
77
|
modelHook: useTabsModel,
|
|
22
78
|
elemPropsHook: useTabsOverflowButton,
|
|
23
79
|
})(({ children, ...elemProps }, Element, model) => {
|
|
80
|
+
// Don't render the overflow button if there are no hidden items.
|
|
81
|
+
// This removes it from the DOM entirely, which:
|
|
82
|
+
// - Removes it from keyboard navigation (roving focus)
|
|
83
|
+
// - Removes it from screen reader announcements
|
|
84
|
+
// - Prevents the "8 tabs" announcement when only 7 are visible
|
|
85
|
+
if (model.state.hiddenIds.length === 0) {
|
|
86
|
+
return null;
|
|
87
|
+
}
|
|
24
88
|
return (_jsxs(StyledTabItem, { type: "button", as: Element, variant: model.state.variant, ...mergeStyles(elemProps, tabsOverflowButtonStencil()), children: [_jsx("span", { children: children }), _jsx(SystemIcon, { "data-part": "tabs-overflow-button-icon", icon: chevronDownSmallIcon })] }));
|
|
25
89
|
});
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useListRenderItems } from '@workday/canvas-kit-react/collection';
|
|
3
2
|
import { createSubcomponent } from '@workday/canvas-kit-react/common';
|
|
3
|
+
import { useTabsCollectionRenderItems } from './TabsList';
|
|
4
4
|
import { useTabsModel } from './useTabsModel';
|
|
5
5
|
export const TabsPanels = createSubcomponent()({
|
|
6
6
|
displayName: 'Tabs.Panels',
|
|
7
7
|
modelHook: useTabsModel,
|
|
8
8
|
})(({ children }, _, model) => {
|
|
9
|
-
return _jsx(_Fragment, { children:
|
|
9
|
+
return _jsx(_Fragment, { children: useTabsCollectionRenderItems(model, children) });
|
|
10
10
|
});
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* This constant is used as the stable identifier for the overflow button in the tabs collection.
|
|
4
|
+
* It uses a `__` prefix to avoid conflicts with user-provided item IDs.
|
|
5
|
+
*/
|
|
6
|
+
export declare const TABS_OVERFLOW_BUTTON_ID = "__tabs-overflow__";
|
|
2
7
|
/**
|
|
3
8
|
* The TabsModel extends the [Collection
|
|
4
9
|
* System](/get-started/for-developers/guides/collection-api/). Tabs have tab items and
|
|
@@ -1303,11 +1308,7 @@ export declare const useTabsModel: (<TT_Special_Generic>(config?: (Partial<{
|
|
|
1303
1308
|
};
|
|
1304
1309
|
initialHiddenIds: string[];
|
|
1305
1310
|
containerWidth: number;
|
|
1306
|
-
shouldCalculateOverflow: boolean;
|
|
1307
|
-
* A React.Ref of the current item index. A ref is used to allow for updating outside the normal
|
|
1308
|
-
* React state cycle to ensure accurate index tracking as items are registered within the same
|
|
1309
|
-
* state setting phase.
|
|
1310
|
-
*/
|
|
1311
|
+
shouldCalculateOverflow: boolean;
|
|
1311
1312
|
initialSelectedIds: import("@workday/canvas-kit-react/collection").SelectedIds;
|
|
1312
1313
|
initialUnselectedIds: string[];
|
|
1313
1314
|
selection: import("@workday/canvas-kit-react/collection").SelectionManager;
|
|
@@ -4001,7 +4002,11 @@ export declare const useTabsModel: (<TT_Special_Generic>(config?: (Partial<{
|
|
|
4001
4002
|
isVirtualized: boolean;
|
|
4002
4003
|
items: import("@workday/canvas-kit-react/collection").Item<any>[];
|
|
4003
4004
|
mode: "multiple" | "single";
|
|
4004
|
-
};
|
|
4005
|
+
}; /**
|
|
4006
|
+
* The default Tabs sub-components only handle rendering of tabs in a horizontal orientation, but
|
|
4007
|
+
* the sub-components could be replaced to handle vertical orientations.
|
|
4008
|
+
* @default 'horizontal'
|
|
4009
|
+
*/
|
|
4005
4010
|
events: {
|
|
4006
4011
|
updatePlacement(data: {
|
|
4007
4012
|
placement: import("@popperjs/core").Placement;
|
|
@@ -5462,11 +5467,7 @@ export declare const useTabsModel: (<TT_Special_Generic>(config?: (Partial<{
|
|
|
5462
5467
|
};
|
|
5463
5468
|
initialHiddenIds: string[];
|
|
5464
5469
|
containerWidth: number;
|
|
5465
|
-
shouldCalculateOverflow: boolean;
|
|
5466
|
-
* A React.Ref of the current item index. A ref is used to allow for updating outside the normal
|
|
5467
|
-
* React state cycle to ensure accurate index tracking as items are registered within the same
|
|
5468
|
-
* state setting phase.
|
|
5469
|
-
*/
|
|
5470
|
+
shouldCalculateOverflow: boolean;
|
|
5470
5471
|
initialSelectedIds: import("@workday/canvas-kit-react/collection").SelectedIds;
|
|
5471
5472
|
initialUnselectedIds: string[];
|
|
5472
5473
|
selection: import("@workday/canvas-kit-react/collection").SelectionManager;
|
|
@@ -5755,7 +5756,11 @@ export declare const useTabsModel: (<TT_Special_Generic>(config?: (Partial<{
|
|
|
5755
5756
|
isVirtualized: boolean;
|
|
5756
5757
|
items: import("@workday/canvas-kit-react/collection").Item<any>[];
|
|
5757
5758
|
mode: "multiple" | "single";
|
|
5758
|
-
};
|
|
5759
|
+
}; /**
|
|
5760
|
+
* The default Tabs sub-components only handle rendering of tabs in a horizontal orientation, but
|
|
5761
|
+
* the sub-components could be replaced to handle vertical orientations.
|
|
5762
|
+
* @default 'horizontal'
|
|
5763
|
+
*/
|
|
5759
5764
|
events: {
|
|
5760
5765
|
updatePlacement(data: {
|
|
5761
5766
|
placement: import("@popperjs/core").Placement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTabsModel.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/useTabsModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY;IAGrB;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;OAGG
|
|
1
|
+
{"version":3,"file":"useTabsModel.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/useTabsModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B;;;GAGG;AACH,eAAO,MAAM,uBAAuB,sBAAsB,CAAC;AAE3D;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,YAAY;IAGrB;;;;;OAKG;;IAEH;;;OAGG;;IAEH;;;;OAIG;;IAEH;;;OAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QAqKH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;;QAEH;;;;WAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;QARH;;WAEG;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"}
|