@cloudscape-design/components-themeable 3.0.1070 → 3.0.1071
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/app-layout/visual-refresh-toolbar/skeleton/styles.scss +6 -0
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
- package/lib/internal/template/app-layout/utils/use-focus-control.d.ts +1 -0
- package/lib/internal/template/app-layout/utils/use-focus-control.d.ts.map +1 -1
- package/lib/internal/template/app-layout/utils/use-focus-control.js +66 -6
- package/lib/internal/template/app-layout/utils/use-focus-control.js.map +1 -1
- package/lib/internal/template/app-layout/utils/use-split-panel-focus-control.d.ts.map +1 -1
- package/lib/internal/template/app-layout/utils/use-split-panel-focus-control.js +15 -13
- package/lib/internal/template/app-layout/utils/use-split-panel-focus-control.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/index.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/index.js +37 -350
- package/lib/internal/template/app-layout/visual-refresh-toolbar/index.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/interfaces.d.ts +20 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/interfaces.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/interfaces.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/internal.d.ts +6 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/internal.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/internal.js +13 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/internal.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/index.js +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/index.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/notifications/index.js +2 -2
- package/lib/internal/template/app-layout/visual-refresh-toolbar/notifications/index.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.d.ts +11 -16
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.js +21 -30
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/index.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/interfaces.d.ts +21 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/interfaces.d.ts.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/interfaces.js +2 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/interfaces.js.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/multi-layout.d.ts +8 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/multi-layout.d.ts.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/multi-layout.js +41 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/multi-layout.js.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/{slot-skeletons.d.ts → skeleton-parts.d.ts} +9 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts.d.ts.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts.js +21 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/skeleton-parts.js.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/{slot-wrappers.d.ts → slots.d.ts} +7 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/slots.d.ts.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/{breadcrumbs/index.js → slots.js} +6 -3
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/slots.js.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.css.js +23 -21
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css +42 -37
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js +23 -21
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/index.d.ts +18 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/index.d.ts.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/index.js +27 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/index.js.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/interfaces.d.ts +29 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/interfaces.d.ts.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/interfaces.js +2 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/interfaces.js.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/invariants.d.ts +3 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/invariants.d.ts.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/invariants.js +4 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/invariants.js.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/props-merger.d.ts +5 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/props-merger.d.ts.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/{multi-layout.js → state/props-merger.js} +28 -40
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/props-merger.js.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/use-app-layout.d.ts +6 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/use-app-layout.d.ts.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/use-app-layout.js +322 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/use-app-layout.js.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/use-skeleton-slots-attributes.d.ts +4 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/use-skeleton-slots-attributes.d.ts.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/use-skeleton-slots-attributes.js +59 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/state/use-skeleton-slots-attributes.js.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.d.ts +2 -2
- package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.d.ts.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.js +2 -3
- package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/index.js.map +1 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/after-main-slot.d.ts +5 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/after-main-slot.d.ts.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/after-main-slot.js +29 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/after-main-slot.js.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.d.ts +5 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.d.ts.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.js +28 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/before-main-slot.js.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/bottom-content-slot.d.ts +5 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/bottom-content-slot.d.ts.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/bottom-content-slot.js +17 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/bottom-content-slot.js.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/top-content-slot.d.ts +5 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/top-content-slot.d.ts.map +1 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/top-content-slot.js +19 -0
- package/lib/internal/template/app-layout/visual-refresh-toolbar/widget-areas/top-content-slot.js.map +1 -0
- package/lib/internal/template/breadcrumb-group/internal.d.ts +2 -1
- package/lib/internal/template/breadcrumb-group/internal.d.ts.map +1 -1
- package/lib/internal/template/breadcrumb-group/internal.js +3 -2
- package/lib/internal/template/breadcrumb-group/internal.js.map +1 -1
- package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/internal/types.d.ts +9 -0
- package/lib/internal/template/internal/types.d.ts.map +1 -1
- package/lib/internal/template/internal/types.js.map +1 -1
- package/lib/internal/template/internal/widget-exports.d.ts +5 -0
- package/lib/internal/template/internal/widget-exports.d.ts.map +1 -1
- package/lib/internal/template/internal/widget-exports.js +7 -0
- package/lib/internal/template/internal/widget-exports.js.map +1 -1
- package/lib/internal/template/internal/widgets/index.d.ts +2 -3
- package/lib/internal/template/internal/widgets/index.d.ts.map +1 -1
- package/lib/internal/template/internal/widgets/index.js.map +1 -1
- package/lib/internal/template/internal/widgets/loader-mock.d.ts +3 -0
- package/lib/internal/template/internal/widgets/loader-mock.d.ts.map +1 -0
- package/lib/internal/template/internal/widgets/loader-mock.js +43 -0
- package/lib/internal/template/internal/widgets/loader-mock.js.map +1 -0
- package/package.json +1 -1
- package/lib/internal/scss/app-layout/visual-refresh-toolbar/skeleton/breadcrumbs/styles.scss +0 -9
- package/lib/internal/template/app-layout/visual-refresh-toolbar/multi-layout.d.ts +0 -34
- package/lib/internal/template/app-layout/visual-refresh-toolbar/multi-layout.d.ts.map +0 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/multi-layout.js.map +0 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/breadcrumbs/index.d.ts +0 -9
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/breadcrumbs/index.d.ts.map +0 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/breadcrumbs/index.js.map +0 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/breadcrumbs/styles.css.js +0 -7
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/breadcrumbs/styles.scoped.css +0 -7
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/breadcrumbs/styles.selectors.js +0 -8
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/slot-skeletons.d.ts.map +0 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/slot-skeletons.js +0 -9
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/slot-skeletons.js.map +0 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/slot-wrappers.d.ts.map +0 -1
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/slot-wrappers.js +0 -8
- package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/slot-wrappers.js.map +0 -1
|
@@ -171,6 +171,7 @@
|
|
|
171
171
|
grid-area: toolbar;
|
|
172
172
|
block-size: 42px;
|
|
173
173
|
border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-layout;
|
|
174
|
+
box-sizing: border-box;
|
|
174
175
|
}
|
|
175
176
|
|
|
176
177
|
.notifications-container {
|
|
@@ -217,3 +218,8 @@
|
|
|
217
218
|
.hidden {
|
|
218
219
|
display: none;
|
|
219
220
|
}
|
|
221
|
+
|
|
222
|
+
// backward compatibility before this commit: f3bdaa292ae849b74404f32ef067c9fd6d2e8d7c
|
|
223
|
+
.breadcrumbs-own:not(:empty) + .breadcrumbs-discovered {
|
|
224
|
+
display: none;
|
|
225
|
+
}
|
|
@@ -23,4 +23,5 @@ export interface FocusControlMultipleStates {
|
|
|
23
23
|
}
|
|
24
24
|
export declare function useMultipleFocusControl(restoreFocus: boolean, activeDrawersIds: Array<string>): FocusControlMultipleStates;
|
|
25
25
|
export declare function useFocusControl(isOpen: boolean, restoreFocus?: boolean, activeDrawerId?: string | null): FocusControlState;
|
|
26
|
+
export declare function useAsyncFocusControl(isOpen: boolean, restoreFocus?: boolean, activeDrawerId?: string | null): FocusControlState;
|
|
26
27
|
//# sourceMappingURL=use-focus-control.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus-control.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-focus-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,SAAS,EAAkC,MAAM,OAAO,CAAC;AAE7E,MAAM,WAAW,SAAS;IACxB,KAAK,IAAI,IAAI,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,MAAM,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,gBAAgB,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IACvC,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACpF,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,uBAAuB,CACrC,YAAY,EAAE,OAAO,EACrB,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,GAC9B,0BAA0B,
|
|
1
|
+
{"version":3,"file":"use-focus-control.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-focus-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,SAAS,EAAkC,MAAM,OAAO,CAAC;AAE7E,MAAM,WAAW,SAAS;IACxB,KAAK,IAAI,IAAI,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,KAAK,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC5B,MAAM,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACnC;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,gBAAgB,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IACvC,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAC;IACpF,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,uBAAuB,CACrC,YAAY,EAAE,OAAO,EACrB,gBAAgB,EAAE,KAAK,CAAC,MAAM,CAAC,GAC9B,0BAA0B,CAmE5B;AAED,wBAAgB,eAAe,CAC7B,MAAM,EAAE,OAAO,EACf,YAAY,UAAQ,EACpB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAC7B,iBAAiB,CAmDnB;AAED,wBAAgB,oBAAoB,CAClC,MAAM,EAAE,OAAO,EACf,YAAY,UAAQ,EACpB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAC7B,iBAAiB,CAuDnB"}
|
|
@@ -14,9 +14,6 @@ export function useMultipleFocusControl(restoreFocus, activeDrawersIds) {
|
|
|
14
14
|
});
|
|
15
15
|
const doFocus = useCallback((drawerId, open = true) => {
|
|
16
16
|
var _a, _b, _c, _d, _e, _f;
|
|
17
|
-
if (!shouldFocus.current) {
|
|
18
|
-
return;
|
|
19
|
-
}
|
|
20
17
|
const ref = refs.current[drawerId];
|
|
21
18
|
if (open) {
|
|
22
19
|
previousFocusedElement.current =
|
|
@@ -37,14 +34,15 @@ export function useMultipleFocusControl(restoreFocus, activeDrawersIds) {
|
|
|
37
34
|
(_f = (_e = ref === null || ref === void 0 ? void 0 : ref.toggle) === null || _e === void 0 ? void 0 : _e.current) === null || _f === void 0 ? void 0 : _f.focus();
|
|
38
35
|
}
|
|
39
36
|
}
|
|
40
|
-
shouldFocus.current = false;
|
|
41
37
|
}, [refs, restoreFocus]);
|
|
42
38
|
const setFocus = (params) => {
|
|
43
39
|
const { force = false, drawerId = null, open = true } = params || {};
|
|
44
|
-
shouldFocus.current = true;
|
|
45
40
|
if (force && (!drawerId || activeDrawersIds.includes(drawerId))) {
|
|
46
41
|
doFocus(drawerId, open);
|
|
47
42
|
}
|
|
43
|
+
else {
|
|
44
|
+
shouldFocus.current = true;
|
|
45
|
+
}
|
|
48
46
|
};
|
|
49
47
|
const loseFocus = useCallback(() => {
|
|
50
48
|
previousFocusedElement.current = undefined;
|
|
@@ -52,7 +50,13 @@ export function useMultipleFocusControl(restoreFocus, activeDrawersIds) {
|
|
|
52
50
|
const previousFocusedElement = useRef();
|
|
53
51
|
const shouldFocus = useRef(false);
|
|
54
52
|
useEffect(() => {
|
|
55
|
-
|
|
53
|
+
const drawerId = activeDrawersIds[0];
|
|
54
|
+
if (shouldFocus.current) {
|
|
55
|
+
Promise.resolve().then(() => {
|
|
56
|
+
doFocus(drawerId);
|
|
57
|
+
shouldFocus.current = false;
|
|
58
|
+
});
|
|
59
|
+
}
|
|
56
60
|
}, [activeDrawersIds, doFocus]);
|
|
57
61
|
return {
|
|
58
62
|
refs: refs.current,
|
|
@@ -111,4 +115,60 @@ export function useFocusControl(isOpen, restoreFocus = false, activeDrawerId) {
|
|
|
111
115
|
loseFocus,
|
|
112
116
|
};
|
|
113
117
|
}
|
|
118
|
+
export function useAsyncFocusControl(isOpen, restoreFocus = false, activeDrawerId) {
|
|
119
|
+
const refs = {
|
|
120
|
+
toggle: useRef(null),
|
|
121
|
+
close: useRef(null),
|
|
122
|
+
slider: useRef(null),
|
|
123
|
+
};
|
|
124
|
+
const previousFocusedElement = useRef();
|
|
125
|
+
const shouldFocus = useRef(false);
|
|
126
|
+
const doFocus = () => {
|
|
127
|
+
var _a, _b, _c;
|
|
128
|
+
if (isOpen) {
|
|
129
|
+
previousFocusedElement.current =
|
|
130
|
+
document.activeElement !== document.body ? document.activeElement : undefined;
|
|
131
|
+
if (refs.slider.current) {
|
|
132
|
+
(_a = refs.slider.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
133
|
+
}
|
|
134
|
+
else {
|
|
135
|
+
(_b = refs.close.current) === null || _b === void 0 ? void 0 : _b.focus();
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
else {
|
|
139
|
+
if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {
|
|
140
|
+
previousFocusedElement.current.focus();
|
|
141
|
+
previousFocusedElement.current = undefined;
|
|
142
|
+
}
|
|
143
|
+
else {
|
|
144
|
+
(_c = refs.toggle.current) === null || _c === void 0 ? void 0 : _c.focus();
|
|
145
|
+
}
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
const setFocus = (force) => {
|
|
149
|
+
if (force && isOpen) {
|
|
150
|
+
doFocus();
|
|
151
|
+
}
|
|
152
|
+
else {
|
|
153
|
+
shouldFocus.current = true;
|
|
154
|
+
}
|
|
155
|
+
};
|
|
156
|
+
useEffect(() => {
|
|
157
|
+
if (shouldFocus.current) {
|
|
158
|
+
Promise.resolve().then(() => {
|
|
159
|
+
doFocus();
|
|
160
|
+
shouldFocus.current = false;
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
164
|
+
}, [isOpen, activeDrawerId]);
|
|
165
|
+
const loseFocus = useCallback(() => {
|
|
166
|
+
previousFocusedElement.current = undefined;
|
|
167
|
+
}, []);
|
|
168
|
+
return {
|
|
169
|
+
refs,
|
|
170
|
+
setFocus,
|
|
171
|
+
loseFocus,
|
|
172
|
+
};
|
|
173
|
+
}
|
|
114
174
|
//# sourceMappingURL=use-focus-control.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-focus-control.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-focus-control.ts"],"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 { createRef, RefObject, useCallback, useEffect, useRef } from 'react';\n\nexport interface Focusable {\n focus(): void;\n}\n\nexport interface FocusControlRefs {\n toggle: RefObject<Focusable>;\n close: RefObject<Focusable>;\n slider: RefObject<HTMLDivElement>;\n}\n\nexport interface FocusControlState {\n refs: FocusControlRefs;\n setFocus: (force?: boolean) => void;\n loseFocus: () => void;\n}\n\nexport interface FocusControlMultipleStates {\n refs: Record<string, FocusControlRefs>;\n setFocus: (params?: { force?: boolean; drawerId?: string; open?: boolean }) => void;\n loseFocus: () => void;\n}\n\nexport function useMultipleFocusControl(\n restoreFocus: boolean,\n activeDrawersIds: Array<string>\n): FocusControlMultipleStates {\n const refs = useRef<Record<string, FocusControlRefs>>({});\n\n activeDrawersIds.forEach(drawerId => {\n if (!refs.current[drawerId]) {\n refs.current[drawerId] = {\n toggle: createRef<Focusable>(),\n close: createRef<Focusable>(),\n slider: createRef<HTMLDivElement>(),\n };\n }\n });\n\n const doFocus = useCallback(\n (drawerId: string, open = true) => {\n if (!shouldFocus.current) {\n return;\n }\n const ref = refs.current[drawerId];\n if (open) {\n previousFocusedElement.current =\n document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n if (ref?.slider?.current) {\n ref.slider.current?.focus();\n } else {\n ref?.close?.current?.focus();\n }\n } else {\n if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n previousFocusedElement.current.focus();\n previousFocusedElement.current = undefined;\n } else {\n ref?.toggle?.current?.focus();\n }\n }\n shouldFocus.current = false;\n },\n [refs, restoreFocus]\n );\n\n const setFocus = (params?: { force?: boolean; drawerId?: string; open?: boolean }) => {\n const { force = false, drawerId = null, open = true } = params || {};\n shouldFocus.current = true;\n if (force && (!drawerId || activeDrawersIds.includes(drawerId))) {\n doFocus(drawerId!, open);\n }\n };\n\n const loseFocus = useCallback(() => {\n previousFocusedElement.current = undefined;\n }, []);\n\n const previousFocusedElement = useRef<HTMLElement>();\n const shouldFocus = useRef(false);\n\n useEffect(() => {\n doFocus(activeDrawersIds[0]);\n }, [activeDrawersIds, doFocus]);\n\n return {\n refs: refs.current,\n setFocus,\n loseFocus,\n };\n}\n\nexport function useFocusControl(\n isOpen: boolean,\n restoreFocus = false,\n activeDrawerId?: string | null\n): FocusControlState {\n const refs = {\n toggle: useRef<Focusable>(null),\n close: useRef<Focusable>(null),\n slider: useRef<HTMLDivElement>(null),\n };\n const previousFocusedElement = useRef<HTMLElement>();\n const shouldFocus = useRef(false);\n\n const doFocus = () => {\n if (!shouldFocus.current) {\n return;\n }\n if (isOpen) {\n previousFocusedElement.current =\n document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n if (refs.slider.current) {\n refs.slider.current?.focus();\n } else {\n refs.close.current?.focus();\n }\n } else {\n if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n previousFocusedElement.current.focus();\n previousFocusedElement.current = undefined;\n } else {\n refs.toggle.current?.focus();\n }\n }\n shouldFocus.current = false;\n };\n\n const setFocus = (force?: boolean) => {\n shouldFocus.current = true;\n if (force && isOpen) {\n doFocus();\n }\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(doFocus, [isOpen, activeDrawerId]);\n\n const loseFocus = useCallback(() => {\n previousFocusedElement.current = undefined;\n }, []);\n\n return {\n refs,\n setFocus,\n loseFocus,\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"use-focus-control.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-focus-control.ts"],"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 { createRef, RefObject, useCallback, useEffect, useRef } from 'react';\n\nexport interface Focusable {\n focus(): void;\n}\n\nexport interface FocusControlRefs {\n toggle: RefObject<Focusable>;\n close: RefObject<Focusable>;\n slider: RefObject<HTMLDivElement>;\n}\n\nexport interface FocusControlState {\n refs: FocusControlRefs;\n setFocus: (force?: boolean) => void;\n loseFocus: () => void;\n}\n\nexport interface FocusControlMultipleStates {\n refs: Record<string, FocusControlRefs>;\n setFocus: (params?: { force?: boolean; drawerId?: string; open?: boolean }) => void;\n loseFocus: () => void;\n}\n\nexport function useMultipleFocusControl(\n restoreFocus: boolean,\n activeDrawersIds: Array<string>\n): FocusControlMultipleStates {\n const refs = useRef<Record<string, FocusControlRefs>>({});\n\n activeDrawersIds.forEach(drawerId => {\n if (!refs.current[drawerId]) {\n refs.current[drawerId] = {\n toggle: createRef<Focusable>(),\n close: createRef<Focusable>(),\n slider: createRef<HTMLDivElement>(),\n };\n }\n });\n\n const doFocus = useCallback(\n (drawerId: string, open = true) => {\n const ref = refs.current[drawerId];\n if (open) {\n previousFocusedElement.current =\n document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n if (ref?.slider?.current) {\n ref.slider.current?.focus();\n } else {\n ref?.close?.current?.focus();\n }\n } else {\n if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n previousFocusedElement.current.focus();\n previousFocusedElement.current = undefined;\n } else {\n ref?.toggle?.current?.focus();\n }\n }\n },\n [refs, restoreFocus]\n );\n\n const setFocus = (params?: { force?: boolean; drawerId?: string; open?: boolean }) => {\n const { force = false, drawerId = null, open = true } = params || {};\n if (force && (!drawerId || activeDrawersIds.includes(drawerId))) {\n doFocus(drawerId!, open);\n } else {\n shouldFocus.current = true;\n }\n };\n\n const loseFocus = useCallback(() => {\n previousFocusedElement.current = undefined;\n }, []);\n\n const previousFocusedElement = useRef<HTMLElement>();\n const shouldFocus = useRef(false);\n\n useEffect(() => {\n const drawerId = activeDrawersIds[0];\n if (shouldFocus.current) {\n Promise.resolve().then(() => {\n doFocus(drawerId);\n shouldFocus.current = false;\n });\n }\n }, [activeDrawersIds, doFocus]);\n\n return {\n refs: refs.current,\n setFocus,\n loseFocus,\n };\n}\n\nexport function useFocusControl(\n isOpen: boolean,\n restoreFocus = false,\n activeDrawerId?: string | null\n): FocusControlState {\n const refs = {\n toggle: useRef<Focusable>(null),\n close: useRef<Focusable>(null),\n slider: useRef<HTMLDivElement>(null),\n };\n const previousFocusedElement = useRef<HTMLElement>();\n const shouldFocus = useRef(false);\n\n const doFocus = () => {\n if (!shouldFocus.current) {\n return;\n }\n if (isOpen) {\n previousFocusedElement.current =\n document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n if (refs.slider.current) {\n refs.slider.current?.focus();\n } else {\n refs.close.current?.focus();\n }\n } else {\n if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n previousFocusedElement.current.focus();\n previousFocusedElement.current = undefined;\n } else {\n refs.toggle.current?.focus();\n }\n }\n shouldFocus.current = false;\n };\n\n const setFocus = (force?: boolean) => {\n shouldFocus.current = true;\n if (force && isOpen) {\n doFocus();\n }\n };\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n useEffect(doFocus, [isOpen, activeDrawerId]);\n\n const loseFocus = useCallback(() => {\n previousFocusedElement.current = undefined;\n }, []);\n\n return {\n refs,\n setFocus,\n loseFocus,\n };\n}\n\nexport function useAsyncFocusControl(\n isOpen: boolean,\n restoreFocus = false,\n activeDrawerId?: string | null\n): FocusControlState {\n const refs = {\n toggle: useRef<Focusable>(null),\n close: useRef<Focusable>(null),\n slider: useRef<HTMLDivElement>(null),\n };\n const previousFocusedElement = useRef<HTMLElement>();\n const shouldFocus = useRef(false);\n\n const doFocus = () => {\n if (isOpen) {\n previousFocusedElement.current =\n document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n if (refs.slider.current) {\n refs.slider.current?.focus();\n } else {\n refs.close.current?.focus();\n }\n } else {\n if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n previousFocusedElement.current.focus();\n previousFocusedElement.current = undefined;\n } else {\n refs.toggle.current?.focus();\n }\n }\n };\n\n const setFocus = (force?: boolean) => {\n if (force && isOpen) {\n doFocus();\n } else {\n shouldFocus.current = true;\n }\n };\n\n useEffect(() => {\n if (shouldFocus.current) {\n Promise.resolve().then(() => {\n doFocus();\n shouldFocus.current = false;\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen, activeDrawerId]);\n\n const loseFocus = useCallback(() => {\n previousFocusedElement.current = undefined;\n }, []);\n\n return {\n refs,\n setFocus,\n loseFocus,\n };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-split-panel-focus-control.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-split-panel-focus-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,KAAK,yBAAyB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC;AAE7F,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAClC,WAAW,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC;AACD,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,0BAA0B,CAAC;IACjC,kBAAkB,EAAE,CAAC,WAAW,EAAE,yBAAyB,KAAK,IAAI,CAAC;CACtE;AAED,wBAAgB,yBAAyB,CAAC,YAAY,EAAE,cAAc,GAAG,2BAA2B,
|
|
1
|
+
{"version":3,"file":"use-split-panel-focus-control.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-split-panel-focus-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAErE,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAEhD,KAAK,yBAAyB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,CAAC;AAE7F,MAAM,WAAW,0BAA0B;IACzC,MAAM,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,MAAM,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;IAClC,WAAW,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC;AACD,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,0BAA0B,CAAC;IACjC,kBAAkB,EAAE,CAAC,WAAW,EAAE,yBAAyB,KAAK,IAAI,CAAC;CACtE;AAED,wBAAgB,yBAAyB,CAAC,YAAY,EAAE,cAAc,GAAG,2BAA2B,CA8BnG"}
|
|
@@ -9,19 +9,21 @@ export function useSplitPanelFocusControl(dependencies) {
|
|
|
9
9
|
};
|
|
10
10
|
const lastInteraction = useRef(null);
|
|
11
11
|
useEffect(() => {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
12
|
+
Promise.resolve().then(() => {
|
|
13
|
+
var _a, _b, _c, _d;
|
|
14
|
+
switch ((_a = lastInteraction.current) === null || _a === void 0 ? void 0 : _a.type) {
|
|
15
|
+
case 'open':
|
|
16
|
+
(_b = refs.slider.current) === null || _b === void 0 ? void 0 : _b.focus();
|
|
17
|
+
break;
|
|
18
|
+
case 'close':
|
|
19
|
+
(_c = refs.toggle.current) === null || _c === void 0 ? void 0 : _c.focus();
|
|
20
|
+
break;
|
|
21
|
+
case 'position':
|
|
22
|
+
(_d = refs.preferences.current) === null || _d === void 0 ? void 0 : _d.focus();
|
|
23
|
+
break;
|
|
24
|
+
}
|
|
25
|
+
lastInteraction.current = null;
|
|
26
|
+
});
|
|
25
27
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
26
28
|
}, dependencies);
|
|
27
29
|
return {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-split-panel-focus-control.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-split-panel-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAA6B,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAgBrE,MAAM,UAAU,yBAAyB,CAAC,YAA4B;IACpE,MAAM,IAAI,GAAG;QACX,MAAM,EAAE,MAAM,CAAY,IAAI,CAAC;QAC/B,MAAM,EAAE,MAAM,CAAiB,IAAI,CAAC;QACpC,WAAW,EAAE,MAAM,CAAY,IAAI,CAAC;KACrC,CAAC;IACF,MAAM,eAAe,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAC;IAEvE,SAAS,CAAC,GAAG,EAAE
|
|
1
|
+
{"version":3,"file":"use-split-panel-focus-control.js","sourceRoot":"","sources":["../../../../src/app-layout/utils/use-split-panel-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAA6B,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAgBrE,MAAM,UAAU,yBAAyB,CAAC,YAA4B;IACpE,MAAM,IAAI,GAAG;QACX,MAAM,EAAE,MAAM,CAAY,IAAI,CAAC;QAC/B,MAAM,EAAE,MAAM,CAAiB,IAAI,CAAC;QACpC,WAAW,EAAE,MAAM,CAAY,IAAI,CAAC;KACrC,CAAC;IACF,MAAM,eAAe,GAAG,MAAM,CAAmC,IAAI,CAAC,CAAC;IAEvE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;;YAC1B,QAAQ,MAAA,eAAe,CAAC,OAAO,0CAAE,IAAI,EAAE;gBACrC,KAAK,MAAM;oBACT,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;oBAC7B,MAAM;gBACR,KAAK,OAAO;oBACV,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;oBAC7B,MAAM;gBACR,KAAK,UAAU;oBACb,MAAA,IAAI,CAAC,WAAW,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;oBAClC,MAAM;aACT;YACD,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QACjC,CAAC,CAAC,CAAC;QACH,uDAAuD;IACzD,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,OAAO;QACL,IAAI;QACJ,kBAAkB,EAAE,CAAC,WAAsC,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,WAAW,CAAC;KACxG,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DependencyList, RefObject, useEffect, useRef } from 'react';\n\nimport { Focusable } from './use-focus-control';\n\ntype SplitPanelLastInteraction = { type: 'open' } | { type: 'close' } | { type: 'position' };\n\nexport interface SplitPanelFocusControlRefs {\n toggle: RefObject<Focusable>;\n slider: RefObject<HTMLDivElement>;\n preferences: RefObject<Focusable>;\n}\nexport interface SplitPanelFocusControlState {\n refs: SplitPanelFocusControlRefs;\n setLastInteraction: (interaction: SplitPanelLastInteraction) => void;\n}\n\nexport function useSplitPanelFocusControl(dependencies: DependencyList): SplitPanelFocusControlState {\n const refs = {\n toggle: useRef<Focusable>(null),\n slider: useRef<HTMLDivElement>(null),\n preferences: useRef<Focusable>(null),\n };\n const lastInteraction = useRef<SplitPanelLastInteraction | null>(null);\n\n useEffect(() => {\n Promise.resolve().then(() => {\n switch (lastInteraction.current?.type) {\n case 'open':\n refs.slider.current?.focus();\n break;\n case 'close':\n refs.toggle.current?.focus();\n break;\n case 'position':\n refs.preferences.current?.focus();\n break;\n }\n lastInteraction.current = null;\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, dependencies);\n\n return {\n refs,\n setLastInteraction: (interaction: SplitPanelLastInteraction) => (lastInteraction.current = interaction),\n };\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAI5E,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,sBAAsB,EAAyB,MAAM,cAAc,CAAC;AAqD7E,QAAA,MAAM,6BAA6B,mGAgClC,CAAC;AAEF,eAAe,6BAA6B,CAAC"}
|