@cloudscape-design/components-themeable 3.0.690 → 3.0.691
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/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/tabs/tab-header-bar.scss +86 -48
- package/lib/internal/template/i18n/messages/all.all.js +1 -1
- package/lib/internal/template/i18n/messages/all.all.json +1 -1
- package/lib/internal/template/i18n/messages/all.de.js +1 -1
- package/lib/internal/template/i18n/messages/all.de.json +1 -1
- package/lib/internal/template/i18n/messages/all.en-GB.js +1 -1
- package/lib/internal/template/i18n/messages/all.en-GB.json +1 -1
- package/lib/internal/template/i18n/messages/all.en.js +1 -1
- package/lib/internal/template/i18n/messages/all.en.json +1 -1
- package/lib/internal/template/i18n/messages/all.es.js +1 -1
- package/lib/internal/template/i18n/messages/all.es.json +1 -1
- package/lib/internal/template/i18n/messages/all.fr.js +1 -1
- package/lib/internal/template/i18n/messages/all.fr.json +1 -1
- package/lib/internal/template/i18n/messages/all.id.js +1 -1
- package/lib/internal/template/i18n/messages/all.id.json +1 -1
- package/lib/internal/template/i18n/messages/all.it.js +1 -1
- package/lib/internal/template/i18n/messages/all.it.json +1 -1
- package/lib/internal/template/i18n/messages/all.ja.js +1 -1
- package/lib/internal/template/i18n/messages/all.ja.json +1 -1
- package/lib/internal/template/i18n/messages/all.ko.js +1 -1
- package/lib/internal/template/i18n/messages/all.ko.json +1 -1
- package/lib/internal/template/i18n/messages/all.pt-BR.js +1 -1
- package/lib/internal/template/i18n/messages/all.pt-BR.json +1 -1
- package/lib/internal/template/i18n/messages/all.tr.js +1 -1
- package/lib/internal/template/i18n/messages/all.tr.json +1 -1
- package/lib/internal/template/i18n/messages/all.zh-CN.js +1 -1
- package/lib/internal/template/i18n/messages/all.zh-CN.json +1 -1
- package/lib/internal/template/i18n/messages/all.zh-TW.js +1 -1
- package/lib/internal/template/i18n/messages/all.zh-TW.json +1 -1
- package/lib/internal/template/i18n/messages-types.d.ts +1 -0
- package/lib/internal/template/i18n/messages-types.d.ts.map +1 -1
- package/lib/internal/template/i18n/messages-types.js.map +1 -1
- package/lib/internal/template/internal/environment.js +1 -1
- package/lib/internal/template/internal/environment.json +1 -1
- package/lib/internal/template/tabs/interfaces.d.ts +36 -0
- package/lib/internal/template/tabs/interfaces.d.ts.map +1 -1
- package/lib/internal/template/tabs/interfaces.js.map +1 -1
- package/lib/internal/template/tabs/styles.css.js +25 -22
- package/lib/internal/template/tabs/styles.scoped.css +107 -77
- package/lib/internal/template/tabs/styles.selectors.js +25 -22
- package/lib/internal/template/tabs/tab-header-bar.d.ts.map +1 -1
- package/lib/internal/template/tabs/tab-header-bar.js +106 -17
- package/lib/internal/template/tabs/tab-header-bar.js.map +1 -1
- package/lib/internal/template/test-utils/dom/tabs/index.d.ts +38 -1
- package/lib/internal/template/test-utils/dom/tabs/index.js +53 -2
- package/lib/internal/template/test-utils/dom/tabs/index.js.map +1 -1
- package/lib/internal/template/test-utils/selectors/tabs/index.d.ts +38 -1
- package/lib/internal/template/test-utils/selectors/tabs/index.js +53 -2
- package/lib/internal/template/test-utils/selectors/tabs/index.js.map +1 -1
- package/lib/internal/template/test-utils/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -2,27 +2,30 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"tabs-header": "awsui_tabs-
|
|
6
|
-
"tabs-header-list": "awsui_tabs-header-
|
|
7
|
-
"pagination-button": "awsui_pagination-
|
|
8
|
-
"pagination-button-left": "awsui_pagination-button-
|
|
9
|
-
"pagination-button-left-scrollable": "awsui_pagination-button-left-
|
|
10
|
-
"pagination-button-right": "awsui_pagination-button-
|
|
11
|
-
"pagination-button-right-scrollable": "awsui_pagination-button-right-
|
|
12
|
-
"tabs-tab": "awsui_tabs-
|
|
13
|
-
"tabs-tab-label": "awsui_tabs-tab-
|
|
14
|
-
"tabs-tab-
|
|
15
|
-
"
|
|
16
|
-
"tabs-tab-
|
|
17
|
-
"
|
|
18
|
-
"tabs-
|
|
19
|
-
"
|
|
20
|
-
"tabs": "
|
|
21
|
-
"tabs-
|
|
22
|
-
"
|
|
23
|
-
"tabs
|
|
24
|
-
"tabs-content
|
|
25
|
-
"
|
|
26
|
-
"tabs-
|
|
5
|
+
"tabs-header": "awsui_tabs-header_14rmt_104vw_194",
|
|
6
|
+
"tabs-header-list": "awsui_tabs-header-list_14rmt_104vw_202",
|
|
7
|
+
"pagination-button": "awsui_pagination-button_14rmt_104vw_219",
|
|
8
|
+
"pagination-button-left": "awsui_pagination-button-left_14rmt_104vw_226",
|
|
9
|
+
"pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_104vw_229",
|
|
10
|
+
"pagination-button-right": "awsui_pagination-button-right_14rmt_104vw_233",
|
|
11
|
+
"pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_104vw_236",
|
|
12
|
+
"tabs-tab": "awsui_tabs-tab_14rmt_104vw_241",
|
|
13
|
+
"tabs-tab-label": "awsui_tabs-tab-label_14rmt_104vw_250",
|
|
14
|
+
"tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_104vw_261",
|
|
15
|
+
"tabs-tab-action": "awsui_tabs-tab-action_14rmt_104vw_262",
|
|
16
|
+
"tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_104vw_266",
|
|
17
|
+
"refresh": "awsui_refresh_14rmt_104vw_281",
|
|
18
|
+
"tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_104vw_285",
|
|
19
|
+
"tabs-tab-link": "awsui_tabs-tab-link_14rmt_104vw_327",
|
|
20
|
+
"tabs-tab-active": "awsui_tabs-tab-active_14rmt_104vw_404",
|
|
21
|
+
"tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_104vw_411",
|
|
22
|
+
"root": "awsui_root_14rmt_104vw_415",
|
|
23
|
+
"tabs": "awsui_tabs_14rmt_104vw_194",
|
|
24
|
+
"tabs-content": "awsui_tabs-content_14rmt_104vw_456",
|
|
25
|
+
"fit-height": "awsui_fit-height_14rmt_104vw_460",
|
|
26
|
+
"tabs-content-active": "awsui_tabs-content-active_14rmt_104vw_466",
|
|
27
|
+
"tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_104vw_480",
|
|
28
|
+
"with-paddings": "awsui_with-paddings_14rmt_104vw_480",
|
|
29
|
+
"tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_104vw_491"
|
|
27
30
|
};
|
|
28
31
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-header-bar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"tab-header-bar.d.ts","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AA8CzC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,YAAY,KAAK,IAAI,CAAC;IACzD,WAAW,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACtC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CACrC;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,cAAc,EACd,WAAW,GACZ,EAAE,iBAAiB,eA6XnB;AAqBD,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,UAEzF"}
|
|
@@ -14,8 +14,11 @@ import { useContainerQuery } from '@cloudscape-design/component-toolkit';
|
|
|
14
14
|
import { SingleTabStopNavigationProvider, useSingleTabStopNavigation, } from '../internal/context/single-tab-stop-navigation-context';
|
|
15
15
|
import { useMergeRefs } from '../internal/hooks/use-merge-refs';
|
|
16
16
|
import { getAllFocusables } from '../internal/components/focus-lock/utils';
|
|
17
|
-
|
|
18
|
-
const
|
|
17
|
+
import { nodeBelongs } from '../internal/utils/node-belongs';
|
|
18
|
+
const tabSelector = `.${styles['tabs-tab-link']}`;
|
|
19
|
+
function dismissButton(dismissLabel, dismissDisabled, onDismiss) {
|
|
20
|
+
return (React.createElement(InternalButton, { onClick: onDismiss, variant: "icon", iconName: "close", formAction: "none", ariaLabel: dismissLabel, disabled: dismissDisabled }));
|
|
21
|
+
}
|
|
19
22
|
export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace, ariaLabel, ariaLabelledby, i18nStrings, }) {
|
|
20
23
|
const headerBarRef = useRef(null);
|
|
21
24
|
const activeTabHeaderRef = useRef(null);
|
|
@@ -29,6 +32,16 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
|
|
|
29
32
|
const [horizontalOverflow, setHorizontalOverflow] = useState(false);
|
|
30
33
|
const [inlineStartOverflow, setInlineStartOverflow] = useState(false);
|
|
31
34
|
const [inlineEndOverflow, setInlineEndOverflow] = useState(false);
|
|
35
|
+
const [previousActiveTabId, setPreviousActiveTabId] = useState(activeTabId);
|
|
36
|
+
const hasActionOrDismissible = tabs.some(tab => tab.action || tab.dismissible);
|
|
37
|
+
const tabActionAttributes = hasActionOrDismissible
|
|
38
|
+
? {
|
|
39
|
+
role: 'application',
|
|
40
|
+
'aria-roledescription': i18n('i18nStrings.tabsWithActionsAriaRoleDescription', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.tabsWithActionsAriaRoleDescription),
|
|
41
|
+
}
|
|
42
|
+
: {
|
|
43
|
+
role: 'tablist',
|
|
44
|
+
};
|
|
32
45
|
useEffect(() => {
|
|
33
46
|
if (headerBarRef.current) {
|
|
34
47
|
setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, inlineStartOverflowButton));
|
|
@@ -41,8 +54,8 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
|
|
|
41
54
|
return;
|
|
42
55
|
}
|
|
43
56
|
const activeTabRef = tabRefs.current.get(activeTabId);
|
|
44
|
-
if (activeTabRef &&
|
|
45
|
-
scrollIntoView(activeTabRef
|
|
57
|
+
if (activeTabRef && headerBarRef.current) {
|
|
58
|
+
scrollIntoView(activeTabRef, headerBarRef.current, smooth);
|
|
46
59
|
}
|
|
47
60
|
};
|
|
48
61
|
useEffect(() => {
|
|
@@ -99,8 +112,23 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
|
|
|
99
112
|
return null;
|
|
100
113
|
}
|
|
101
114
|
const tabElements = Array.from(containerObjectRef.current.querySelectorAll(tabSelector));
|
|
115
|
+
const tabAriaSelector = hasActionOrDismissible ? '[aria-expanded="true"]' : '[aria-selected="true"]';
|
|
116
|
+
const activeTabSelector = `${tabSelector}${tabAriaSelector}`;
|
|
102
117
|
return (_b = (_a = tabElements.find(tab => tab.matches(activeTabSelector))) !== null && _a !== void 0 ? _a : tabElements.find(tab => !tab.disabled)) !== null && _b !== void 0 ? _b : null;
|
|
103
118
|
}
|
|
119
|
+
function onUnregisterFocusable(focusableElement) {
|
|
120
|
+
const isUnregisteringFocusedNode = nodeBelongs(focusableElement, document.activeElement);
|
|
121
|
+
const isFocusableActionOrDismissible = !focusableElement.classList.contains(styles['tabs-tab-link']);
|
|
122
|
+
if (isUnregisteringFocusedNode && !isFocusableActionOrDismissible) {
|
|
123
|
+
// Wait for unmounted node to get removed from the DOM.
|
|
124
|
+
requestAnimationFrame(() => {
|
|
125
|
+
var _a;
|
|
126
|
+
const nextFocusTarget = (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.getFocusTarget();
|
|
127
|
+
const tabLinkButton = nextFocusTarget === null || nextFocusTarget === void 0 ? void 0 : nextFocusTarget.querySelector(`.${styles['tabs-tab-link']}`);
|
|
128
|
+
tabLinkButton === null || tabLinkButton === void 0 ? void 0 : tabLinkButton.focus();
|
|
129
|
+
});
|
|
130
|
+
}
|
|
131
|
+
}
|
|
104
132
|
useEffect(() => {
|
|
105
133
|
var _a;
|
|
106
134
|
(_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.updateFocusTarget();
|
|
@@ -114,9 +142,19 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
|
|
|
114
142
|
(_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.updateFocusTarget();
|
|
115
143
|
}
|
|
116
144
|
function onKeyDown(event) {
|
|
117
|
-
|
|
118
|
-
const focusTarget = (_a = navigationAPI.current) === null || _a === void 0 ? void 0 : _a.getFocusTarget();
|
|
145
|
+
const focusTarget = document.activeElement;
|
|
119
146
|
const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];
|
|
147
|
+
const isActionOpen = document.querySelector(`.${styles['tabs-tab-action']} [aria-expanded="true"]`);
|
|
148
|
+
const isDismissOrActionFocused = !(focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.classList.contains(styles['tabs-tab-link']));
|
|
149
|
+
if (isActionOpen) {
|
|
150
|
+
return;
|
|
151
|
+
}
|
|
152
|
+
if (event.key === 'Tab' && !event.shiftKey && isDismissOrActionFocused) {
|
|
153
|
+
event.preventDefault();
|
|
154
|
+
const panelId = `${idNamespace}-${activeTabId}-panel`;
|
|
155
|
+
const panel = document.getElementById(panelId);
|
|
156
|
+
panel === null || panel === void 0 ? void 0 : panel.focus();
|
|
157
|
+
}
|
|
120
158
|
if (hasModifierKeys(event) || specialKeys.indexOf(event.keyCode) === -1) {
|
|
121
159
|
return;
|
|
122
160
|
}
|
|
@@ -125,7 +163,7 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
|
|
|
125
163
|
}
|
|
126
164
|
event.preventDefault();
|
|
127
165
|
const focusables = getFocusablesFrom(containerObjectRef.current);
|
|
128
|
-
const activeIndex = focusables.indexOf(
|
|
166
|
+
const activeIndex = document.activeElement instanceof HTMLElement ? focusables.indexOf(document.activeElement) : -1;
|
|
129
167
|
handleKey(event, {
|
|
130
168
|
onHome: () => focusElement(focusables[0]),
|
|
131
169
|
onEnd: () => focusElement(focusables[focusables.length - 1]),
|
|
@@ -140,8 +178,10 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
|
|
|
140
178
|
element.focus();
|
|
141
179
|
// If focusable element is a tab - fire the onChange for it.
|
|
142
180
|
const tabsById = tabs.reduce((map, tab) => map.set(tab.id, tab), new Map());
|
|
143
|
-
for (const [tabId,
|
|
144
|
-
|
|
181
|
+
for (const [tabId, focusTargetTabTriggerElement] of tabRefs.current.entries()) {
|
|
182
|
+
const focusTargetTabLabelElement = focusTargetTabTriggerElement === null || focusTargetTabTriggerElement === void 0 ? void 0 : focusTargetTabTriggerElement.querySelector(`.${styles['tabs-tab-link']}`);
|
|
183
|
+
if (tabId !== activeTabId && focusTargetTabLabelElement === element) {
|
|
184
|
+
setPreviousActiveTabId(tabId);
|
|
145
185
|
onChange({ activeTabId: tabId, activeTabHref: (_a = tabsById.get(tabId)) === null || _a === void 0 ? void 0 : _a.href });
|
|
146
186
|
break;
|
|
147
187
|
}
|
|
@@ -155,22 +195,25 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
|
|
|
155
195
|
}
|
|
156
196
|
function isElementDisabled(element) {
|
|
157
197
|
if (element instanceof HTMLButtonElement) {
|
|
158
|
-
return element.disabled
|
|
198
|
+
return element.disabled || element.closest(`.${styles['tabs-tab-disabled']}`);
|
|
159
199
|
}
|
|
160
200
|
return false;
|
|
161
201
|
}
|
|
162
202
|
return getAllFocusables(target).filter(el => isElementRegistered(el) && !isElementDisabled(el));
|
|
163
203
|
}
|
|
204
|
+
const TabList = hasActionOrDismissible ? 'div' : 'ul';
|
|
164
205
|
return (
|
|
165
206
|
//converted span to div as list should not be a child of span for HTML validation
|
|
166
207
|
React.createElement("div", { className: classes, ref: containerRef },
|
|
167
208
|
horizontalOverflow && (React.createElement("span", { ref: inlineStartOverflowButton, className: leftButtonClasses },
|
|
168
209
|
React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "angle-left", disabled: !inlineStartOverflow, __focusable: true, onClick: () => onPaginationClick(headerBarRef, 'backward'), ariaLabel: i18n('i18nStrings.scrollLeftAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.scrollLeftAriaLabel) }))),
|
|
169
|
-
React.createElement(SingleTabStopNavigationProvider, { ref: navigationAPI, navigationActive: true, getNextFocusTarget: getNextFocusTarget },
|
|
170
|
-
React.createElement(
|
|
210
|
+
React.createElement(SingleTabStopNavigationProvider, { ref: navigationAPI, navigationActive: true, getNextFocusTarget: getNextFocusTarget, onUnregisterFocusable: onUnregisterFocusable },
|
|
211
|
+
React.createElement(TabList, Object.assign({}, tabActionAttributes, { className: styles['tabs-header-list'], "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ref: headerBarRef, onScroll: onScroll, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur }), tabs.map(renderTabHeader))),
|
|
171
212
|
horizontalOverflow && (React.createElement("span", { className: rightButtonClasses },
|
|
172
213
|
React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "angle-right", disabled: !inlineEndOverflow, __focusable: true, onClick: () => onPaginationClick(headerBarRef, 'forward'), ariaLabel: i18n('i18nStrings.scrollRightAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.scrollRightAriaLabel) })))));
|
|
173
214
|
function renderTabHeader(tab) {
|
|
215
|
+
const { dismissible, dismissLabel, dismissDisabled, action, onDismiss } = tab;
|
|
216
|
+
const isActive = activeTabId === tab.id && !tab.disabled;
|
|
174
217
|
const clickTab = (event) => {
|
|
175
218
|
if (tab.disabled) {
|
|
176
219
|
event.preventDefault();
|
|
@@ -194,23 +237,45 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
|
|
|
194
237
|
if (tab.id === activeTabId) {
|
|
195
238
|
return;
|
|
196
239
|
}
|
|
240
|
+
setPreviousActiveTabId(tab.id);
|
|
197
241
|
onChange({ activeTabId: tab.id, activeTabHref: tab.href });
|
|
198
242
|
};
|
|
199
243
|
const classes = clsx({
|
|
200
244
|
[styles['tabs-tab-link']]: true,
|
|
201
245
|
[styles.refresh]: isVisualRefresh,
|
|
202
|
-
[styles['tabs-tab-active']]:
|
|
246
|
+
[styles['tabs-tab-active']]: isActive,
|
|
247
|
+
[styles['tabs-tab-disabled']]: tab.disabled,
|
|
248
|
+
});
|
|
249
|
+
const tabHeaderContainerClasses = clsx({
|
|
250
|
+
[styles['tabs-tab-header-container']]: true,
|
|
251
|
+
[styles.refresh]: isVisualRefresh,
|
|
252
|
+
[styles['tabs-tab-active']]: isActive,
|
|
203
253
|
[styles['tabs-tab-disabled']]: tab.disabled,
|
|
204
254
|
});
|
|
255
|
+
const tabActionClasses = clsx({
|
|
256
|
+
[styles['tabs-tab-action']]: true,
|
|
257
|
+
[styles['tabs-tab-active']]: isActive,
|
|
258
|
+
});
|
|
205
259
|
const commonProps = {
|
|
206
260
|
className: classes,
|
|
207
|
-
role: 'tab',
|
|
208
|
-
'aria-selected': tab.id === activeTabId,
|
|
209
261
|
'aria-controls': `${idNamespace}-${tab.id}-panel`,
|
|
210
262
|
'data-testid': tab.id,
|
|
211
263
|
id: getTabElementId({ namespace: idNamespace, tabId: tab.id }),
|
|
212
264
|
children: React.createElement("span", { className: styles['tabs-tab-label'] }, tab.label),
|
|
213
265
|
};
|
|
266
|
+
const tabHeaderContainerAriaProps = hasActionOrDismissible
|
|
267
|
+
? {
|
|
268
|
+
role: 'group',
|
|
269
|
+
'aria-labelledby': commonProps.id,
|
|
270
|
+
}
|
|
271
|
+
: {};
|
|
272
|
+
if (!hasActionOrDismissible) {
|
|
273
|
+
commonProps['aria-selected'] = activeTabId === tab.id;
|
|
274
|
+
commonProps.role = 'tab';
|
|
275
|
+
}
|
|
276
|
+
else {
|
|
277
|
+
commonProps['aria-expanded'] = activeTabId === tab.id;
|
|
278
|
+
}
|
|
214
279
|
if (tab.disabled) {
|
|
215
280
|
commonProps['aria-disabled'] = 'true';
|
|
216
281
|
}
|
|
@@ -223,8 +288,32 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
|
|
|
223
288
|
}
|
|
224
289
|
tabRefs.current.set(tab.id, tabElement);
|
|
225
290
|
};
|
|
226
|
-
|
|
227
|
-
|
|
291
|
+
const handleDismiss = event => {
|
|
292
|
+
if (!containerObjectRef.current || !onDismiss) {
|
|
293
|
+
return;
|
|
294
|
+
}
|
|
295
|
+
const tabElements = getFocusablesFrom(containerObjectRef.current).filter(el => el.classList.contains(styles['tabs-tab-link']));
|
|
296
|
+
const activeTabIndex = tabElements.findIndex(el => el.dataset.testid === tab.id);
|
|
297
|
+
tabElements.splice(activeTabIndex, 1);
|
|
298
|
+
let nextActive;
|
|
299
|
+
if (previousActiveTabId && previousActiveTabId !== tab.id) {
|
|
300
|
+
nextActive = tabElements.find(el => el.dataset.testid === previousActiveTabId);
|
|
301
|
+
}
|
|
302
|
+
else {
|
|
303
|
+
nextActive = tabElements[Math.min(tabElements.length - 1, activeTabIndex)];
|
|
304
|
+
}
|
|
305
|
+
if (nextActive && nextActive.dataset.testid) {
|
|
306
|
+
onChange({ activeTabId: nextActive.dataset.testid });
|
|
307
|
+
nextActive.focus();
|
|
308
|
+
}
|
|
309
|
+
onDismiss(event);
|
|
310
|
+
};
|
|
311
|
+
const TabItem = hasActionOrDismissible ? 'div' : 'li';
|
|
312
|
+
return (React.createElement(TabItem, { ref: (element) => tabRefs.current.set(tab.id, element), className: styles['tabs-tab'], role: "presentation", key: tab.id },
|
|
313
|
+
React.createElement("div", Object.assign({ className: tabHeaderContainerClasses }, tabHeaderContainerAriaProps),
|
|
314
|
+
React.createElement(TabTrigger, { ref: setElement, tab: tab, elementProps: commonProps }),
|
|
315
|
+
action && React.createElement("span", { className: tabActionClasses }, action),
|
|
316
|
+
dismissible && (React.createElement("span", { className: styles['tabs-tab-dismiss'] }, dismissButton(dismissLabel, dismissDisabled, handleDismiss))))));
|
|
228
317
|
}
|
|
229
318
|
}
|
|
230
319
|
const TabTrigger = forwardRef(({ tab, elementProps, }, ref) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-header-bar.js","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useState, useEffect, forwardRef } from 'react';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport handleKey from '../internal/utils/handle-key';\nimport { KeyCode } from '../internal/keycode';\nimport {\n onPaginationClick,\n hasHorizontalOverflow,\n hasInlineStartOverflow,\n hasInlineEndOverflow,\n scrollIntoView,\n} from './scroll-utils';\nimport { hasModifierKeys, isPlainLeftClick } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useInternalI18n } from '../i18n/context';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport {\n SingleTabStopNavigationAPI,\n SingleTabStopNavigationProvider,\n useSingleTabStopNavigation,\n} from '../internal/context/single-tab-stop-navigation-context';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { getAllFocusables } from '../internal/components/focus-lock/utils';\n\nconst tabSelector = '[role=\"tab\"]';\nconst activeTabSelector = '[role=\"tab\"][aria-selected=\"true\"]';\n\nexport interface TabHeaderBarProps {\n onChange: (changeDetail: TabsProps.ChangeDetail) => void;\n activeTabId: TabsProps['activeTabId'];\n tabs: TabsProps['tabs'];\n variant: TabsProps['variant'];\n idNamespace: string;\n ariaLabel?: string;\n ariaLabelledby?: string;\n i18nStrings?: TabsProps.I18nStrings;\n}\n\nexport function TabHeaderBar({\n onChange,\n activeTabId,\n tabs,\n variant,\n idNamespace,\n ariaLabel,\n ariaLabelledby,\n i18nStrings,\n}: TabHeaderBarProps) {\n const headerBarRef = useRef<HTMLUListElement>(null);\n const activeTabHeaderRef = useRef<null | HTMLElement>(null);\n const inlineStartOverflowButton = useRef<HTMLElement>(null);\n const i18n = useInternalI18n('tabs');\n\n const isVisualRefresh = useVisualRefresh();\n\n const containerObjectRef = useRef<HTMLDivElement>(null);\n const [widthChange, containerMeasureRef] = useContainerQuery<number>(rect => rect.contentBoxWidth);\n const containerRef = useMergeRefs(containerObjectRef, containerMeasureRef);\n const tabRefs = useRef<Map<string, HTMLElement>>(new Map());\n const [horizontalOverflow, setHorizontalOverflow] = useState(false);\n const [inlineStartOverflow, setInlineStartOverflow] = useState(false);\n const [inlineEndOverflow, setInlineEndOverflow] = useState(false);\n\n useEffect(() => {\n if (headerBarRef.current) {\n setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, inlineStartOverflowButton));\n setInlineStartOverflow(hasInlineStartOverflow(headerBarRef.current));\n setInlineEndOverflow(hasInlineEndOverflow(headerBarRef.current));\n }\n }, [widthChange, tabs]);\n\n const scrollIntoViewIfPossible = (smooth: boolean) => {\n if (!activeTabId) {\n return;\n }\n const activeTabRef = tabRefs.current.get(activeTabId);\n if (activeTabRef && activeTabRef.parentElement && headerBarRef.current) {\n scrollIntoView(activeTabRef.parentElement, headerBarRef.current, smooth);\n }\n };\n\n useEffect(() => {\n // Delay scrollIntoView as the position is depending on parent elements\n // (effects are called inside-out in the component tree).\n // Wait one frame to allow parents to complete it's calculation.\n requestAnimationFrame(() => {\n scrollIntoViewIfPossible(false);\n });\n // Non-smooth scrolling should not be called upon activeId change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [horizontalOverflow, widthChange, tabs.length]);\n\n useEffect(() => {\n scrollIntoViewIfPossible(true);\n // Smooth scrolling should only be called upon activeId change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [activeTabId]);\n\n useEffect(() => {\n /*\n When the selected tab changes and we are currently already focused on a tab,\n move the focus to the newly selected tab.\n */\n if (headerBarRef.current?.contains(document.activeElement)) {\n if (document.activeElement !== activeTabHeaderRef.current) {\n activeTabHeaderRef.current?.focus({ preventScroll: true });\n }\n }\n }, [activeTabId]);\n\n const onScroll = () => {\n if (headerBarRef.current) {\n setInlineStartOverflow(hasInlineStartOverflow(headerBarRef.current));\n setInlineEndOverflow(hasInlineEndOverflow(headerBarRef.current));\n }\n };\n\n const classes = clsx({\n [styles['tabs-header']]: true,\n [styles['tabs-header-with-divider']]: variant === 'default' || isVisualRefresh,\n });\n\n const leftButtonClasses = clsx({\n [styles['pagination-button']]: true,\n [styles['pagination-button-left']]: true,\n [styles['pagination-button-left-scrollable']]: inlineStartOverflow,\n });\n\n const rightButtonClasses = clsx({\n [styles['pagination-button']]: true,\n [styles['pagination-button-right']]: true,\n [styles['pagination-button-right-scrollable']]: inlineEndOverflow,\n });\n\n const navigationAPI = useRef<SingleTabStopNavigationAPI>(null);\n\n function getNextFocusTarget(): null | HTMLElement {\n if (!containerObjectRef.current) {\n return null;\n }\n const tabElements: HTMLButtonElement[] = Array.from(containerObjectRef.current.querySelectorAll(tabSelector));\n return tabElements.find(tab => tab.matches(activeTabSelector)) ?? tabElements.find(tab => !tab.disabled) ?? null;\n }\n\n useEffect(() => {\n navigationAPI.current?.updateFocusTarget();\n });\n function onFocus() {\n navigationAPI.current?.updateFocusTarget();\n }\n function onBlur() {\n navigationAPI.current?.updateFocusTarget();\n }\n\n function onKeyDown(event: React.KeyboardEvent) {\n const focusTarget = navigationAPI.current?.getFocusTarget();\n const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];\n if (hasModifierKeys(event) || specialKeys.indexOf(event.keyCode) === -1) {\n return;\n }\n if (!containerObjectRef.current || !focusTarget) {\n return;\n }\n event.preventDefault();\n\n const focusables = getFocusablesFrom(containerObjectRef.current);\n const activeIndex = focusables.indexOf(focusTarget);\n handleKey(event as any, {\n onHome: () => focusElement(focusables[0]),\n onEnd: () => focusElement(focusables[focusables.length - 1]),\n onInlineStart: () => focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),\n onInlineEnd: () => focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),\n onPageDown: () => inlineEndOverflow && onPaginationClick(headerBarRef, 'forward'),\n onPageUp: () => inlineStartOverflow && onPaginationClick(headerBarRef, 'backward'),\n });\n }\n function focusElement(element: HTMLElement) {\n element.focus();\n // If focusable element is a tab - fire the onChange for it.\n const tabsById = tabs.reduce((map, tab) => map.set(tab.id, tab), new Map<string, TabsProps.Tab>());\n for (const [tabId, tabTriggerElement] of tabRefs.current.entries()) {\n if (tabId !== activeTabId && tabTriggerElement === element) {\n onChange({ activeTabId: tabId, activeTabHref: tabsById.get(tabId)?.href });\n break;\n }\n }\n }\n // List all non-disabled and registered focusables: those are eligible for keyboard navigation.\n function getFocusablesFrom(target: HTMLElement) {\n function isElementRegistered(element: HTMLElement) {\n return navigationAPI.current?.isRegistered(element) ?? false;\n }\n function isElementDisabled(element: HTMLElement) {\n if (element instanceof HTMLButtonElement) {\n return element.disabled && element.getAttribute('aria-selected') !== 'true';\n }\n return false;\n }\n return getAllFocusables(target).filter(el => isElementRegistered(el) && !isElementDisabled(el));\n }\n\n return (\n //converted span to div as list should not be a child of span for HTML validation\n <div className={classes} ref={containerRef}>\n {horizontalOverflow && (\n <span ref={inlineStartOverflowButton} className={leftButtonClasses}>\n <InternalButton\n formAction=\"none\"\n variant=\"icon\"\n iconName=\"angle-left\"\n disabled={!inlineStartOverflow}\n __focusable={true}\n onClick={() => onPaginationClick(headerBarRef, 'backward')}\n ariaLabel={i18n('i18nStrings.scrollLeftAriaLabel', i18nStrings?.scrollLeftAriaLabel)}\n />\n </span>\n )}\n <SingleTabStopNavigationProvider\n ref={navigationAPI}\n navigationActive={true}\n getNextFocusTarget={getNextFocusTarget}\n >\n <ul\n role=\"tablist\"\n className={styles['tabs-header-list']}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n ref={headerBarRef}\n onScroll={onScroll}\n onKeyDown={onKeyDown}\n onFocus={onFocus}\n onBlur={onBlur}\n >\n {tabs.map(renderTabHeader)}\n </ul>\n </SingleTabStopNavigationProvider>\n {horizontalOverflow && (\n <span className={rightButtonClasses}>\n <InternalButton\n formAction=\"none\"\n variant=\"icon\"\n iconName=\"angle-right\"\n disabled={!inlineEndOverflow}\n __focusable={true}\n onClick={() => onPaginationClick(headerBarRef, 'forward')}\n ariaLabel={i18n('i18nStrings.scrollRightAriaLabel', i18nStrings?.scrollRightAriaLabel)}\n />\n </span>\n )}\n </div>\n );\n\n function renderTabHeader(tab: TabsProps.Tab) {\n const clickTab = (event: React.MouseEvent) => {\n if (tab.disabled) {\n event.preventDefault();\n return;\n }\n\n // if the primary mouse button is clicked with a modifier key, the browser will handle opening a new tab\n const specialKey = !isPlainLeftClick(event);\n if (specialKey && tab.href) {\n return;\n }\n\n event.preventDefault();\n // for browsers that do not focus buttons on button click\n if (!tab.href) {\n const clickedTabRef = tabRefs.current.get(tab.id) as undefined | HTMLButtonElement;\n if (clickedTabRef) {\n if (clickedTabRef && clickedTabRef !== document.activeElement) {\n clickedTabRef.focus({ preventScroll: true });\n }\n }\n }\n\n if (tab.id === activeTabId) {\n return;\n }\n\n onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n };\n\n const classes = clsx({\n [styles['tabs-tab-link']]: true,\n [styles.refresh]: isVisualRefresh,\n [styles['tabs-tab-active']]: activeTabId === tab.id && !tab.disabled,\n [styles['tabs-tab-disabled']]: tab.disabled,\n });\n\n const commonProps: (JSX.IntrinsicElements['a'] | JSX.IntrinsicElements['button']) & { 'data-testid': string } = {\n className: classes,\n role: 'tab',\n 'aria-selected': tab.id === activeTabId,\n 'aria-controls': `${idNamespace}-${tab.id}-panel`,\n 'data-testid': tab.id,\n id: getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n children: <span className={styles['tabs-tab-label']}>{tab.label}</span>,\n };\n\n if (tab.disabled) {\n commonProps['aria-disabled'] = 'true';\n } else {\n commonProps.onClick = clickTab;\n }\n\n const setElement = (tabElement: null | HTMLElement) => {\n if (tab.id === activeTabId) {\n activeTabHeaderRef.current = tabElement;\n }\n tabRefs.current.set(tab.id, tabElement as HTMLElement);\n };\n\n return (\n <li className={styles['tabs-tab']} role=\"presentation\" key={tab.id}>\n <TabTrigger ref={setElement} tab={tab} elementProps={commonProps} />\n </li>\n );\n }\n}\n\nconst TabTrigger = forwardRef(\n (\n {\n tab,\n elementProps,\n }: { tab: TabsProps.Tab; elementProps: React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> },\n ref: React.Ref<HTMLElement>\n ) => {\n const refObject = useRef<HTMLElement>(null);\n const mergedRef = useMergeRefs(refObject, ref);\n const { tabIndex } = useSingleTabStopNavigation(refObject);\n return tab.href ? (\n <a {...elementProps} href={tab.href} ref={mergedRef} tabIndex={tabIndex} />\n ) : (\n <button {...elementProps} type=\"button\" disabled={tab.disabled} ref={mergedRef} tabIndex={tabIndex} />\n );\n }\n);\n\nexport function getTabElementId({ namespace, tabId }: { namespace: string; tabId: string }) {\n return namespace + '-' + tabId;\n}\n\nfunction circleIndex(index: number, [from, to]: [number, number]): number {\n if (index < from) {\n return to;\n }\n if (index > to) {\n return from;\n }\n return index;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"tab-header-bar.js","sourceRoot":"","sources":["../../../src/tabs/tab-header-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useState, useEffect, forwardRef } from 'react';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport handleKey from '../internal/utils/handle-key';\nimport { KeyCode } from '../internal/keycode';\nimport {\n onPaginationClick,\n hasHorizontalOverflow,\n hasInlineStartOverflow,\n hasInlineEndOverflow,\n scrollIntoView,\n} from './scroll-utils';\nimport { hasModifierKeys, isPlainLeftClick } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useInternalI18n } from '../i18n/context';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport {\n SingleTabStopNavigationAPI,\n SingleTabStopNavigationProvider,\n useSingleTabStopNavigation,\n} from '../internal/context/single-tab-stop-navigation-context';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { getAllFocusables } from '../internal/components/focus-lock/utils';\nimport { nodeBelongs } from '../internal/utils/node-belongs';\nimport { ButtonProps } from '../button/interfaces';\n\nconst tabSelector = `.${styles['tabs-tab-link']}`;\n\nfunction dismissButton(\n dismissLabel: TabsProps.Tab['dismissLabel'],\n dismissDisabled: TabsProps.Tab['dismissDisabled'],\n onDismiss: TabsProps.Tab['onDismiss']\n) {\n return (\n <InternalButton\n onClick={onDismiss}\n variant=\"icon\"\n iconName=\"close\"\n formAction=\"none\"\n ariaLabel={dismissLabel}\n disabled={dismissDisabled}\n />\n );\n}\n\nexport interface TabHeaderBarProps {\n onChange: (changeDetail: TabsProps.ChangeDetail) => void;\n activeTabId: TabsProps['activeTabId'];\n tabs: TabsProps['tabs'];\n variant: TabsProps['variant'];\n idNamespace: string;\n ariaLabel?: string;\n ariaLabelledby?: string;\n i18nStrings?: TabsProps.I18nStrings;\n}\n\nexport function TabHeaderBar({\n onChange,\n activeTabId,\n tabs,\n variant,\n idNamespace,\n ariaLabel,\n ariaLabelledby,\n i18nStrings,\n}: TabHeaderBarProps) {\n const headerBarRef = useRef<HTMLUListElement>(null);\n const activeTabHeaderRef = useRef<null | HTMLElement>(null);\n const inlineStartOverflowButton = useRef<HTMLElement>(null);\n const i18n = useInternalI18n('tabs');\n\n const isVisualRefresh = useVisualRefresh();\n\n const containerObjectRef = useRef<HTMLDivElement>(null);\n const [widthChange, containerMeasureRef] = useContainerQuery<number>(rect => rect.contentBoxWidth);\n const containerRef = useMergeRefs(containerObjectRef, containerMeasureRef);\n const tabRefs = useRef<Map<string, HTMLElement>>(new Map());\n const [horizontalOverflow, setHorizontalOverflow] = useState(false);\n const [inlineStartOverflow, setInlineStartOverflow] = useState(false);\n const [inlineEndOverflow, setInlineEndOverflow] = useState(false);\n const [previousActiveTabId, setPreviousActiveTabId] = useState<string | undefined>(activeTabId);\n const hasActionOrDismissible = tabs.some(tab => tab.action || tab.dismissible);\n const tabActionAttributes = hasActionOrDismissible\n ? {\n role: 'application',\n 'aria-roledescription': i18n(\n 'i18nStrings.tabsWithActionsAriaRoleDescription',\n i18nStrings?.tabsWithActionsAriaRoleDescription\n ),\n }\n : {\n role: 'tablist',\n };\n\n useEffect(() => {\n if (headerBarRef.current) {\n setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, inlineStartOverflowButton));\n setInlineStartOverflow(hasInlineStartOverflow(headerBarRef.current));\n setInlineEndOverflow(hasInlineEndOverflow(headerBarRef.current));\n }\n }, [widthChange, tabs]);\n\n const scrollIntoViewIfPossible = (smooth: boolean) => {\n if (!activeTabId) {\n return;\n }\n const activeTabRef = tabRefs.current.get(activeTabId);\n if (activeTabRef && headerBarRef.current) {\n scrollIntoView(activeTabRef, headerBarRef.current, smooth);\n }\n };\n\n useEffect(() => {\n // Delay scrollIntoView as the position is depending on parent elements\n // (effects are called inside-out in the component tree).\n // Wait one frame to allow parents to complete it's calculation.\n requestAnimationFrame(() => {\n scrollIntoViewIfPossible(false);\n });\n // Non-smooth scrolling should not be called upon activeId change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [horizontalOverflow, widthChange, tabs.length]);\n\n useEffect(() => {\n scrollIntoViewIfPossible(true);\n // Smooth scrolling should only be called upon activeId change\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [activeTabId]);\n\n useEffect(() => {\n /*\n When the selected tab changes and we are currently already focused on a tab,\n move the focus to the newly selected tab.\n */\n if (headerBarRef.current?.contains(document.activeElement)) {\n if (document.activeElement !== activeTabHeaderRef.current) {\n activeTabHeaderRef.current?.focus({ preventScroll: true });\n }\n }\n }, [activeTabId]);\n\n const onScroll = () => {\n if (headerBarRef.current) {\n setInlineStartOverflow(hasInlineStartOverflow(headerBarRef.current));\n setInlineEndOverflow(hasInlineEndOverflow(headerBarRef.current));\n }\n };\n\n const classes = clsx({\n [styles['tabs-header']]: true,\n [styles['tabs-header-with-divider']]: variant === 'default' || isVisualRefresh,\n });\n\n const leftButtonClasses = clsx({\n [styles['pagination-button']]: true,\n [styles['pagination-button-left']]: true,\n [styles['pagination-button-left-scrollable']]: inlineStartOverflow,\n });\n\n const rightButtonClasses = clsx({\n [styles['pagination-button']]: true,\n [styles['pagination-button-right']]: true,\n [styles['pagination-button-right-scrollable']]: inlineEndOverflow,\n });\n\n const navigationAPI = useRef<SingleTabStopNavigationAPI>(null);\n\n function getNextFocusTarget(): null | HTMLElement {\n if (!containerObjectRef.current) {\n return null;\n }\n const tabElements: HTMLButtonElement[] = Array.from(containerObjectRef.current.querySelectorAll(tabSelector));\n const tabAriaSelector = hasActionOrDismissible ? '[aria-expanded=\"true\"]' : '[aria-selected=\"true\"]';\n const activeTabSelector = `${tabSelector}${tabAriaSelector}`;\n return tabElements.find(tab => tab.matches(activeTabSelector)) ?? tabElements.find(tab => !tab.disabled) ?? null;\n }\n\n function onUnregisterFocusable(focusableElement: HTMLElement) {\n const isUnregisteringFocusedNode = nodeBelongs(focusableElement, document.activeElement);\n const isFocusableActionOrDismissible = !focusableElement.classList.contains(styles['tabs-tab-link']);\n if (isUnregisteringFocusedNode && !isFocusableActionOrDismissible) {\n // Wait for unmounted node to get removed from the DOM.\n requestAnimationFrame(() => {\n const nextFocusTarget = navigationAPI.current?.getFocusTarget();\n const tabLinkButton = nextFocusTarget?.querySelector(`.${styles['tabs-tab-link']}`) as HTMLElement;\n tabLinkButton?.focus();\n });\n }\n }\n\n useEffect(() => {\n navigationAPI.current?.updateFocusTarget();\n });\n function onFocus() {\n navigationAPI.current?.updateFocusTarget();\n }\n function onBlur() {\n navigationAPI.current?.updateFocusTarget();\n }\n\n function onKeyDown(event: React.KeyboardEvent) {\n const focusTarget = document.activeElement;\n const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];\n const isActionOpen = document.querySelector(`.${styles['tabs-tab-action']} [aria-expanded=\"true\"]`);\n const isDismissOrActionFocused = !focusTarget?.classList.contains(styles['tabs-tab-link']);\n\n if (isActionOpen) {\n return;\n }\n if (event.key === 'Tab' && !event.shiftKey && isDismissOrActionFocused) {\n event.preventDefault();\n const panelId = `${idNamespace}-${activeTabId}-panel`;\n const panel = document.getElementById(panelId);\n panel?.focus();\n }\n if (hasModifierKeys(event) || specialKeys.indexOf(event.keyCode) === -1) {\n return;\n }\n if (!containerObjectRef.current || !focusTarget) {\n return;\n }\n event.preventDefault();\n\n const focusables = getFocusablesFrom(containerObjectRef.current);\n const activeIndex = document.activeElement instanceof HTMLElement ? focusables.indexOf(document.activeElement) : -1;\n handleKey(event as any, {\n onHome: () => focusElement(focusables[0]),\n onEnd: () => focusElement(focusables[focusables.length - 1]),\n onInlineStart: () => focusElement(focusables[circleIndex(activeIndex - 1, [0, focusables.length - 1])]),\n onInlineEnd: () => focusElement(focusables[circleIndex(activeIndex + 1, [0, focusables.length - 1])]),\n onPageDown: () => inlineEndOverflow && onPaginationClick(headerBarRef, 'forward'),\n onPageUp: () => inlineStartOverflow && onPaginationClick(headerBarRef, 'backward'),\n });\n }\n function focusElement(element: HTMLElement) {\n element.focus();\n // If focusable element is a tab - fire the onChange for it.\n const tabsById = tabs.reduce((map, tab) => map.set(tab.id, tab), new Map<string, TabsProps.Tab>());\n for (const [tabId, focusTargetTabTriggerElement] of tabRefs.current.entries()) {\n const focusTargetTabLabelElement = focusTargetTabTriggerElement?.querySelector(`.${styles['tabs-tab-link']}`);\n if (tabId !== activeTabId && focusTargetTabLabelElement === element) {\n setPreviousActiveTabId(tabId);\n onChange({ activeTabId: tabId, activeTabHref: tabsById.get(tabId)?.href });\n break;\n }\n }\n }\n // List all non-disabled and registered focusables: those are eligible for keyboard navigation.\n function getFocusablesFrom(target: HTMLElement) {\n function isElementRegistered(element: HTMLElement) {\n return navigationAPI.current?.isRegistered(element) ?? false;\n }\n function isElementDisabled(element: HTMLElement) {\n if (element instanceof HTMLButtonElement) {\n return element.disabled || element.closest(`.${styles['tabs-tab-disabled']}`);\n }\n return false;\n }\n return getAllFocusables(target).filter(el => isElementRegistered(el) && !isElementDisabled(el));\n }\n\n const TabList = hasActionOrDismissible ? 'div' : 'ul';\n\n return (\n //converted span to div as list should not be a child of span for HTML validation\n <div className={classes} ref={containerRef}>\n {horizontalOverflow && (\n <span ref={inlineStartOverflowButton} className={leftButtonClasses}>\n <InternalButton\n formAction=\"none\"\n variant=\"icon\"\n iconName=\"angle-left\"\n disabled={!inlineStartOverflow}\n __focusable={true}\n onClick={() => onPaginationClick(headerBarRef, 'backward')}\n ariaLabel={i18n('i18nStrings.scrollLeftAriaLabel', i18nStrings?.scrollLeftAriaLabel)}\n />\n </span>\n )}\n <SingleTabStopNavigationProvider\n ref={navigationAPI}\n navigationActive={true}\n getNextFocusTarget={getNextFocusTarget}\n onUnregisterFocusable={onUnregisterFocusable}\n >\n <TabList\n {...tabActionAttributes}\n className={styles['tabs-header-list']}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n ref={headerBarRef as never}\n onScroll={onScroll}\n onKeyDown={onKeyDown}\n onFocus={onFocus}\n onBlur={onBlur}\n >\n {tabs.map(renderTabHeader)}\n </TabList>\n </SingleTabStopNavigationProvider>\n {horizontalOverflow && (\n <span className={rightButtonClasses}>\n <InternalButton\n formAction=\"none\"\n variant=\"icon\"\n iconName=\"angle-right\"\n disabled={!inlineEndOverflow}\n __focusable={true}\n onClick={() => onPaginationClick(headerBarRef, 'forward')}\n ariaLabel={i18n('i18nStrings.scrollRightAriaLabel', i18nStrings?.scrollRightAriaLabel)}\n />\n </span>\n )}\n </div>\n );\n\n function renderTabHeader(tab: TabsProps.Tab) {\n const { dismissible, dismissLabel, dismissDisabled, action, onDismiss } = tab;\n const isActive = activeTabId === tab.id && !tab.disabled;\n\n const clickTab = (event: React.MouseEvent) => {\n if (tab.disabled) {\n event.preventDefault();\n return;\n }\n\n // if the primary mouse button is clicked with a modifier key, the browser will handle opening a new tab\n const specialKey = !isPlainLeftClick(event);\n if (specialKey && tab.href) {\n return;\n }\n\n event.preventDefault();\n // for browsers that do not focus buttons on button click\n if (!tab.href) {\n const clickedTabRef = tabRefs.current.get(tab.id) as undefined | HTMLButtonElement;\n if (clickedTabRef) {\n if (clickedTabRef && clickedTabRef !== document.activeElement) {\n clickedTabRef.focus({ preventScroll: true });\n }\n }\n }\n\n if (tab.id === activeTabId) {\n return;\n }\n\n setPreviousActiveTabId(tab.id);\n onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n };\n\n const classes = clsx({\n [styles['tabs-tab-link']]: true,\n [styles.refresh]: isVisualRefresh,\n [styles['tabs-tab-active']]: isActive,\n [styles['tabs-tab-disabled']]: tab.disabled,\n });\n\n const tabHeaderContainerClasses = clsx({\n [styles['tabs-tab-header-container']]: true,\n [styles.refresh]: isVisualRefresh,\n [styles['tabs-tab-active']]: isActive,\n [styles['tabs-tab-disabled']]: tab.disabled,\n });\n\n const tabActionClasses = clsx({\n [styles['tabs-tab-action']]: true,\n [styles['tabs-tab-active']]: isActive,\n });\n\n const commonProps: (JSX.IntrinsicElements['a'] | JSX.IntrinsicElements['button']) & { 'data-testid': string } = {\n className: classes,\n 'aria-controls': `${idNamespace}-${tab.id}-panel`,\n 'data-testid': tab.id,\n id: getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n children: <span className={styles['tabs-tab-label']}>{tab.label}</span>,\n };\n\n const tabHeaderContainerAriaProps = hasActionOrDismissible\n ? {\n role: 'group',\n 'aria-labelledby': commonProps.id,\n }\n : {};\n\n if (!hasActionOrDismissible) {\n commonProps['aria-selected'] = activeTabId === tab.id;\n commonProps.role = 'tab';\n } else {\n commonProps['aria-expanded'] = activeTabId === tab.id;\n }\n\n if (tab.disabled) {\n commonProps['aria-disabled'] = 'true';\n } else {\n commonProps.onClick = clickTab;\n }\n\n const setElement = (tabElement: null | HTMLElement) => {\n if (tab.id === activeTabId) {\n activeTabHeaderRef.current = tabElement;\n }\n tabRefs.current.set(tab.id, tabElement as HTMLElement);\n };\n\n const handleDismiss: ButtonProps['onClick'] = event => {\n if (!containerObjectRef.current || !onDismiss) {\n return;\n }\n const tabElements = getFocusablesFrom(containerObjectRef.current).filter(el =>\n el.classList.contains(styles['tabs-tab-link'])\n );\n const activeTabIndex = tabElements.findIndex(el => el.dataset.testid === tab.id);\n tabElements.splice(activeTabIndex, 1);\n let nextActive: HTMLElement | undefined;\n if (previousActiveTabId && previousActiveTabId !== tab.id) {\n nextActive = tabElements.find(el => el.dataset.testid === previousActiveTabId);\n } else {\n nextActive = tabElements[Math.min(tabElements.length - 1, activeTabIndex)];\n }\n if (nextActive && nextActive.dataset.testid) {\n onChange({ activeTabId: nextActive.dataset.testid });\n nextActive.focus();\n }\n onDismiss(event);\n };\n\n const TabItem = hasActionOrDismissible ? 'div' : 'li';\n return (\n <TabItem\n ref={(element: any) => tabRefs.current.set(tab.id, element as HTMLElement)}\n className={styles['tabs-tab']}\n role=\"presentation\"\n key={tab.id}\n >\n <div className={tabHeaderContainerClasses} {...tabHeaderContainerAriaProps}>\n <TabTrigger ref={setElement} tab={tab} elementProps={commonProps} />\n {action && <span className={tabActionClasses}>{action}</span>}\n {dismissible && (\n <span className={styles['tabs-tab-dismiss']}>\n {dismissButton(dismissLabel, dismissDisabled, handleDismiss)}\n </span>\n )}\n </div>\n </TabItem>\n );\n }\n}\n\nconst TabTrigger = forwardRef(\n (\n {\n tab,\n elementProps,\n }: { tab: TabsProps.Tab; elementProps: React.HTMLAttributes<HTMLAnchorElement | HTMLButtonElement> },\n ref: React.Ref<HTMLElement>\n ) => {\n const refObject = useRef<HTMLElement>(null);\n const mergedRef = useMergeRefs(refObject, ref);\n const { tabIndex } = useSingleTabStopNavigation(refObject);\n return tab.href ? (\n <a {...elementProps} href={tab.href} ref={mergedRef} tabIndex={tabIndex} />\n ) : (\n <button {...elementProps} type=\"button\" disabled={tab.disabled} ref={mergedRef} tabIndex={tabIndex} />\n );\n }\n);\n\nexport function getTabElementId({ namespace, tabId }: { namespace: string; tabId: string }) {\n return namespace + '-' + tabId;\n}\n\nfunction circleIndex(index: number, [from, to]: [number, number]): number {\n if (index < from) {\n return to;\n }\n if (index > to) {\n return from;\n }\n return index;\n}\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ComponentWrapper, ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
|
|
2
|
+
import ButtonWrapper from '../button';
|
|
2
3
|
export default class TabsWrapper extends ComponentWrapper<HTMLButtonElement> {
|
|
3
4
|
static rootSelector: string;
|
|
4
5
|
/**
|
|
@@ -11,12 +12,40 @@ export default class TabsWrapper extends ComponentWrapper<HTMLButtonElement> {
|
|
|
11
12
|
* @param index 1-based index of the clickable element to return
|
|
12
13
|
*/
|
|
13
14
|
findTabLinkByIndex(index: number): ElementWrapper<HTMLAnchorElement | HTMLButtonElement> | null;
|
|
15
|
+
/**
|
|
16
|
+
* Finds the tab header container at the given position (1-based) and returns the element.
|
|
17
|
+
*
|
|
18
|
+
* @param index 1-based index of the clickable element to return
|
|
19
|
+
*/
|
|
20
|
+
findTabHeaderContentByIndex(index: number): ElementWrapper<HTMLAnchorElement | HTMLButtonElement> | null;
|
|
14
21
|
/**
|
|
15
22
|
* Finds the tab with the given ID and returns the clickable element from its tab label.
|
|
16
23
|
*
|
|
17
|
-
* @param
|
|
24
|
+
* @param id ID of the clickable element to return
|
|
18
25
|
*/
|
|
19
26
|
findTabLinkById(id: string): ElementWrapper<HTMLAnchorElement | HTMLButtonElement> | null;
|
|
27
|
+
/**
|
|
28
|
+
* Finds the dismissible button by using the tab index.
|
|
29
|
+
*
|
|
30
|
+
* @param index 1-based index of the clickable element to return
|
|
31
|
+
*/
|
|
32
|
+
findDismissibleButtonByTabIndex(index: number): ButtonWrapper | null;
|
|
33
|
+
/**
|
|
34
|
+
* Finds the dismissible button by using the tab id
|
|
35
|
+
*
|
|
36
|
+
* @param id ID of the clickable element to return
|
|
37
|
+
*/
|
|
38
|
+
findDismissibleButtonByTabId(id: string): ButtonWrapper | null;
|
|
39
|
+
/**
|
|
40
|
+
* Finds the tab action by using the tab id
|
|
41
|
+
* @param id ID of the clickable element to return
|
|
42
|
+
*/
|
|
43
|
+
findActionByTabId(id: string): ElementWrapper | null;
|
|
44
|
+
/**
|
|
45
|
+
* Finds the tab action by using the tab index
|
|
46
|
+
* @param index 1-based index of the clickable element to return
|
|
47
|
+
*/
|
|
48
|
+
findActionByTabIndex(index: number): ElementWrapper | null;
|
|
20
49
|
/**
|
|
21
50
|
* Finds the currently active tab and returns the clickable element from its tab label.
|
|
22
51
|
*/
|
|
@@ -25,4 +54,12 @@ export default class TabsWrapper extends ComponentWrapper<HTMLButtonElement> {
|
|
|
25
54
|
* Finds the currently displayed tab content and returns it.
|
|
26
55
|
*/
|
|
27
56
|
findTabContent(): ElementWrapper<HTMLDivElement> | null;
|
|
57
|
+
/**
|
|
58
|
+
* Finds the dismissible button for the active tab
|
|
59
|
+
*/
|
|
60
|
+
findActiveTabDismissibleButton(): ButtonWrapper | null;
|
|
61
|
+
/**
|
|
62
|
+
* Finds the tab action for the active tab
|
|
63
|
+
*/
|
|
64
|
+
findActiveTabAction(): ElementWrapper | null;
|
|
28
65
|
}
|
|
@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
4
4
|
// SPDX-License-Identifier: Apache-2.0
|
|
5
5
|
const dom_1 = require("@cloudscape-design/test-utils-core/dom");
|
|
6
|
+
const button_1 = require("../button");
|
|
6
7
|
const styles_selectors_js_1 = require("../../../tabs/styles.selectors.js");
|
|
7
8
|
class TabsWrapper extends dom_1.ComponentWrapper {
|
|
8
9
|
/**
|
|
@@ -19,19 +20,57 @@ class TabsWrapper extends dom_1.ComponentWrapper {
|
|
|
19
20
|
findTabLinkByIndex(index) {
|
|
20
21
|
return this.find(`.${styles_selectors_js_1.default['tabs-tab']}:nth-child(${index}) .${styles_selectors_js_1.default['tabs-tab-link']}`);
|
|
21
22
|
}
|
|
23
|
+
/**
|
|
24
|
+
* Finds the tab header container at the given position (1-based) and returns the element.
|
|
25
|
+
*
|
|
26
|
+
* @param index 1-based index of the clickable element to return
|
|
27
|
+
*/
|
|
28
|
+
findTabHeaderContentByIndex(index) {
|
|
29
|
+
return this.find(`.${styles_selectors_js_1.default['tabs-tab']}:nth-child(${index}) .${styles_selectors_js_1.default['tabs-tab-header-container']}`);
|
|
30
|
+
}
|
|
22
31
|
/**
|
|
23
32
|
* Finds the tab with the given ID and returns the clickable element from its tab label.
|
|
24
33
|
*
|
|
25
|
-
* @param
|
|
34
|
+
* @param id ID of the clickable element to return
|
|
26
35
|
*/
|
|
27
36
|
findTabLinkById(id) {
|
|
28
37
|
return this.find(`.${styles_selectors_js_1.default['tabs-tab-link']}[data-testid="${id}"]`);
|
|
29
38
|
}
|
|
39
|
+
/**
|
|
40
|
+
* Finds the dismissible button by using the tab index.
|
|
41
|
+
*
|
|
42
|
+
* @param index 1-based index of the clickable element to return
|
|
43
|
+
*/
|
|
44
|
+
findDismissibleButtonByTabIndex(index) {
|
|
45
|
+
return this.findComponent(`.${styles_selectors_js_1.default['tabs-tab']}:nth-child(${index}) .${styles_selectors_js_1.default['tabs-tab-dismiss']}`, button_1.default);
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Finds the dismissible button by using the tab id
|
|
49
|
+
*
|
|
50
|
+
* @param id ID of the clickable element to return
|
|
51
|
+
*/
|
|
52
|
+
findDismissibleButtonByTabId(id) {
|
|
53
|
+
return this.findComponent(`.${styles_selectors_js_1.default['tabs-tab-link']}[data-testid="${id}"] ~ .${styles_selectors_js_1.default['tabs-tab-dismiss']}`, button_1.default);
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Finds the tab action by using the tab id
|
|
57
|
+
* @param id ID of the clickable element to return
|
|
58
|
+
*/
|
|
59
|
+
findActionByTabId(id) {
|
|
60
|
+
return this.find(`.${styles_selectors_js_1.default['tabs-tab-link']}[data-testid="${id}"] ~ .${styles_selectors_js_1.default['tabs-tab-action']}`);
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* Finds the tab action by using the tab index
|
|
64
|
+
* @param index 1-based index of the clickable element to return
|
|
65
|
+
*/
|
|
66
|
+
findActionByTabIndex(index) {
|
|
67
|
+
return this.find(`.${styles_selectors_js_1.default['tabs-tab']}:nth-child(${index}) .${styles_selectors_js_1.default['tabs-tab-action']}`);
|
|
68
|
+
}
|
|
30
69
|
/**
|
|
31
70
|
* Finds the currently active tab and returns the clickable element from its tab label.
|
|
32
71
|
*/
|
|
33
72
|
findActiveTab() {
|
|
34
|
-
return this.find(`.${styles_selectors_js_1.default['tabs-tab-active']}`);
|
|
73
|
+
return this.find(`.${styles_selectors_js_1.default['tabs-tab-active']} .${styles_selectors_js_1.default['tabs-tab-link']}`);
|
|
35
74
|
}
|
|
36
75
|
/**
|
|
37
76
|
* Finds the currently displayed tab content and returns it.
|
|
@@ -39,6 +78,18 @@ class TabsWrapper extends dom_1.ComponentWrapper {
|
|
|
39
78
|
findTabContent() {
|
|
40
79
|
return this.find(`.${styles_selectors_js_1.default['tabs-content-active']}`);
|
|
41
80
|
}
|
|
81
|
+
/**
|
|
82
|
+
* Finds the dismissible button for the active tab
|
|
83
|
+
*/
|
|
84
|
+
findActiveTabDismissibleButton() {
|
|
85
|
+
return this.findComponent(`.${styles_selectors_js_1.default['tabs-tab-active']} .${styles_selectors_js_1.default['tabs-tab-dismiss']}`, button_1.default);
|
|
86
|
+
}
|
|
87
|
+
/**
|
|
88
|
+
* Finds the tab action for the active tab
|
|
89
|
+
*/
|
|
90
|
+
findActiveTabAction() {
|
|
91
|
+
return this.find(`.${styles_selectors_js_1.default['tabs-tab-active']} .${styles_selectors_js_1.default['tabs-tab-action']}`);
|
|
92
|
+
}
|
|
42
93
|
}
|
|
43
94
|
exports.default = TabsWrapper;
|
|
44
95
|
TabsWrapper.rootSelector = styles_selectors_js_1.default.root;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/dom/tabs/index.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,gEAA0F;AAC1F,2EAAuD;AAEvD,MAAqB,WAAY,SAAQ,sBAAmC;IAG1E;;OAEG;IACH,YAAY;QACV,OAAO,IAAI,CAAC,kBAAkB,CAAC,6BAAM,CAAC,eAAe,CAAC,CAAC,CAAC;IAC1D,CAAC;IAED;;;;OAIG;IACH,kBAAkB,CAAC,KAAa;QAC9B,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,6BAAM,CAAC,UAAU,CAAC,cAAc,KAAK,MAAM,6BAAM,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;IAC7F,CAAC;IAED;;;;OAIG;IACH,eAAe,CAAC,EAAU;QACxB,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,6BAAM,CAAC,eAAe,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;IACvE,CAAC;IAED;;OAEG;IACH,aAAa;QACX,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,6BAAM,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/test-utils/dom/tabs/index.ts"],"names":[],"mappings":";;AAAA,qEAAqE;AACrE,sCAAsC;AACtC,gEAA0F;AAC1F,sCAAsC;AACtC,2EAAuD;AAEvD,MAAqB,WAAY,SAAQ,sBAAmC;IAG1E;;OAEG;IACH,YAAY;QACV,OAAO,IAAI,CAAC,kBAAkB,CAAC,6BAAM,CAAC,eAAe,CAAC,CAAC,CAAC;IAC1D,CAAC;IAED;;;;OAIG;IACH,kBAAkB,CAAC,KAAa;QAC9B,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,6BAAM,CAAC,UAAU,CAAC,cAAc,KAAK,MAAM,6BAAM,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;IAC7F,CAAC;IAED;;;;OAIG;IACH,2BAA2B,CAAC,KAAa;QACvC,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,6BAAM,CAAC,UAAU,CAAC,cAAc,KAAK,MAAM,6BAAM,CAAC,2BAA2B,CAAC,EAAE,CAAC,CAAC;IACzG,CAAC;IAED;;;;OAIG;IACH,eAAe,CAAC,EAAU;QACxB,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,6BAAM,CAAC,eAAe,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;IACvE,CAAC;IAED;;;;OAIG;IACH,+BAA+B,CAAC,KAAa;QAC3C,OAAO,IAAI,CAAC,aAAa,CACvB,IAAI,6BAAM,CAAC,UAAU,CAAC,cAAc,KAAK,MAAM,6BAAM,CAAC,kBAAkB,CAAC,EAAE,EAC3E,gBAAa,CACd,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACH,4BAA4B,CAAC,EAAU;QACrC,OAAO,IAAI,CAAC,aAAa,CACvB,IAAI,6BAAM,CAAC,eAAe,CAAC,iBAAiB,EAAE,SAAS,6BAAM,CAAC,kBAAkB,CAAC,EAAE,EACnF,gBAAa,CACd,CAAC;IACJ,CAAC;IAED;;;OAGG;IACH,iBAAiB,CAAC,EAAU;QAC1B,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,6BAAM,CAAC,eAAe,CAAC,iBAAiB,EAAE,SAAS,6BAAM,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;IACvG,CAAC;IAED;;;OAGG;IACH,oBAAoB,CAAC,KAAa;QAChC,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,6BAAM,CAAC,UAAU,CAAC,cAAc,KAAK,MAAM,6BAAM,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;IAC/F,CAAC;IAED;;OAEG;IACH,aAAa;QACX,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,6BAAM,CAAC,iBAAiB,CAAC,KAAK,6BAAM,CAAC,eAAe,CAAC,EAAE,CAAC,CAAC;IAChF,CAAC;IAED;;OAEG;IACH,cAAc;QACZ,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,6BAAM,CAAC,qBAAqB,CAAC,EAAE,CAAC,CAAC;IACxD,CAAC;IAED;;OAEG;IACH,8BAA8B;QAC5B,OAAO,IAAI,CAAC,aAAa,CAAC,IAAI,6BAAM,CAAC,iBAAiB,CAAC,KAAK,6BAAM,CAAC,kBAAkB,CAAC,EAAE,EAAE,gBAAa,CAAC,CAAC;IAC3G,CAAC;IAED;;OAEG;IACH,mBAAmB;QACjB,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,6BAAM,CAAC,iBAAiB,CAAC,KAAK,6BAAM,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;IAClF,CAAC;;AAvGH,8BAwGC;AAvGQ,wBAAY,GAAW,6BAAM,CAAC,IAAI,CAAC"}
|