@cloudscape-design/components 3.0.136 → 3.0.138
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/area-chart/chart-container.d.ts.map +1 -1
- package/area-chart/chart-container.js +2 -1
- package/area-chart/chart-container.js.map +1 -1
- package/area-chart/model/interactions-store.d.ts.map +1 -1
- package/area-chart/model/interactions-store.js +1 -1
- package/area-chart/model/interactions-store.js.map +1 -1
- package/area-chart/model/use-chart-model.d.ts +1 -2
- package/area-chart/model/use-chart-model.d.ts.map +1 -1
- package/area-chart/model/use-chart-model.js +46 -10
- package/area-chart/model/use-chart-model.js.map +1 -1
- package/collection-preferences/index.d.ts +1 -1
- package/collection-preferences/index.d.ts.map +1 -1
- package/collection-preferences/index.js +10 -5
- package/collection-preferences/index.js.map +1 -1
- package/collection-preferences/interfaces.d.ts +17 -0
- package/collection-preferences/interfaces.d.ts.map +1 -1
- package/collection-preferences/interfaces.js.map +1 -1
- package/collection-preferences/styles.css.js +20 -19
- package/collection-preferences/styles.scoped.css +21 -20
- package/collection-preferences/styles.selectors.js +20 -19
- package/collection-preferences/utils.d.ts +6 -1
- package/collection-preferences/utils.d.ts.map +1 -1
- package/collection-preferences/utils.js +10 -1
- package/collection-preferences/utils.js.map +1 -1
- package/internal/base-component/styles.scoped.css +4 -0
- package/internal/components/chart-plot/focus-outline.d.ts +2 -1
- package/internal/components/chart-plot/focus-outline.d.ts.map +1 -1
- package/internal/components/chart-plot/focus-outline.js +6 -4
- package/internal/components/chart-plot/focus-outline.js.map +1 -1
- package/internal/components/chart-plot/index.d.ts +2 -1
- package/internal/components/chart-plot/index.d.ts.map +1 -1
- package/internal/components/chart-plot/index.js.map +1 -1
- package/internal/components/chart-plot/interfaces.d.ts +5 -0
- package/internal/components/chart-plot/interfaces.d.ts.map +1 -0
- package/internal/components/chart-plot/interfaces.js +2 -0
- package/internal/components/chart-plot/interfaces.js.map +1 -0
- package/internal/components/dynamic-aria-live/index.d.ts +28 -0
- package/internal/components/dynamic-aria-live/index.d.ts.map +1 -0
- package/internal/components/dynamic-aria-live/index.js +38 -0
- package/internal/components/dynamic-aria-live/index.js.map +1 -0
- package/internal/components/interfaces.d.ts +5 -0
- package/internal/components/interfaces.d.ts.map +1 -0
- package/internal/components/interfaces.js +2 -0
- package/internal/components/interfaces.js.map +1 -0
- package/internal/components/live-region/aria-liva-tag.d.ts +13 -0
- package/internal/components/live-region/aria-liva-tag.d.ts.map +1 -0
- package/internal/components/live-region/aria-liva-tag.js +18 -0
- package/internal/components/live-region/aria-liva-tag.js.map +1 -0
- package/internal/components/live-region/index.d.ts +34 -34
- package/internal/components/live-region/index.d.ts.map +1 -1
- package/internal/components/live-region/index.js +38 -61
- package/internal/components/live-region/index.js.map +1 -1
- package/internal/components/live-region/utils.d.ts +8 -0
- package/internal/components/live-region/utils.d.ts.map +1 -0
- package/internal/components/live-region/utils.js +24 -0
- package/internal/components/live-region/utils.js.map +1 -0
- package/internal/environment.js +1 -1
- package/internal/generated/theming/index.cjs +26 -0
- package/internal/generated/theming/index.js +26 -0
- package/internal/hooks/use-visual-mode/index.d.ts +3 -1
- package/internal/hooks/use-visual-mode/index.d.ts.map +1 -1
- package/internal/hooks/use-visual-mode/index.js +18 -11
- package/internal/hooks/use-visual-mode/index.js.map +1 -1
- package/internal/manifest.json +1 -1
- package/mixed-line-bar-chart/chart-container.d.ts +1 -2
- package/mixed-line-bar-chart/chart-container.d.ts.map +1 -1
- package/mixed-line-bar-chart/chart-container.js +55 -41
- package/mixed-line-bar-chart/chart-container.js.map +1 -1
- package/mixed-line-bar-chart/hooks/use-mouse-hover.d.ts +3 -4
- package/mixed-line-bar-chart/hooks/use-mouse-hover.d.ts.map +1 -1
- package/mixed-line-bar-chart/hooks/use-mouse-hover.js +22 -18
- package/mixed-line-bar-chart/hooks/use-mouse-hover.js.map +1 -1
- package/mixed-line-bar-chart/hooks/use-navigation.d.ts +6 -3
- package/mixed-line-bar-chart/hooks/use-navigation.d.ts.map +1 -1
- package/mixed-line-bar-chart/hooks/use-navigation.js +61 -31
- package/mixed-line-bar-chart/hooks/use-navigation.js.map +1 -1
- package/mixed-line-bar-chart/interfaces.d.ts +4 -0
- package/mixed-line-bar-chart/interfaces.d.ts.map +1 -1
- package/mixed-line-bar-chart/interfaces.js.map +1 -1
- package/mixed-line-bar-chart/internal.d.ts.map +1 -1
- package/mixed-line-bar-chart/internal.js +1 -1
- package/mixed-line-bar-chart/internal.js.map +1 -1
- package/package.json +1 -1
- package/progress-bar/index.d.ts.map +1 -1
- package/progress-bar/index.js +4 -1
- package/progress-bar/index.js.map +1 -1
- package/progress-bar/internal.js +2 -2
- package/progress-bar/internal.js.map +1 -1
- package/table/body-cell/index.d.ts +3 -1
- package/table/body-cell/index.d.ts.map +1 -1
- package/table/body-cell/index.js +2 -2
- package/table/body-cell/index.js.map +1 -1
- package/table/body-cell/styles.css.js +8 -7
- package/table/body-cell/styles.scoped.css +21 -18
- package/table/body-cell/styles.selectors.js +8 -7
- package/table/interfaces.d.ts +4 -0
- package/table/interfaces.d.ts.map +1 -1
- package/table/interfaces.js.map +1 -1
- package/table/internal.d.ts.map +1 -1
- package/table/internal.js +4 -3
- package/table/internal.js.map +1 -1
- package/table/use-sticky-header.d.ts.map +1 -1
- package/table/use-sticky-header.js +4 -1
- package/table/use-sticky-header.js.map +1 -1
- package/test-utils/dom/collection-preferences/index.d.ts +1 -0
- package/test-utils/dom/collection-preferences/index.js +3 -0
- package/test-utils/dom/collection-preferences/index.js.map +1 -1
- package/test-utils/selectors/collection-preferences/index.d.ts +1 -0
- package/test-utils/selectors/collection-preferences/index.js +3 -0
- package/test-utils/selectors/collection-preferences/index.js.map +1 -1
- package/test-utils/tsconfig.tsbuildinfo +1 -1
|
@@ -1,24 +1,25 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"visible-content": "awsui_visible-
|
|
5
|
-
"visible-content-toggle": "awsui_visible-content-
|
|
6
|
-
"visible-content-groups": "awsui_visible-content-
|
|
7
|
-
"visible-content-group": "awsui_visible-content-
|
|
8
|
-
"visible-content-title": "awsui_visible-content-
|
|
9
|
-
"visible-content-group-label": "awsui_visible-content-group-
|
|
10
|
-
"visible-content-option": "awsui_visible-content-
|
|
11
|
-
"visible-content-option-label": "awsui_visible-content-option-
|
|
12
|
-
"root": "
|
|
13
|
-
"modal-root": "awsui_modal-
|
|
14
|
-
"trigger-button": "awsui_trigger-
|
|
15
|
-
"cancel-button": "awsui_cancel-
|
|
16
|
-
"confirm-button": "awsui_confirm-
|
|
17
|
-
"custom": "
|
|
18
|
-
"second-column-small": "awsui_second-column-
|
|
19
|
-
"wrap-lines": "awsui_wrap-
|
|
20
|
-
"
|
|
21
|
-
"page-size
|
|
22
|
-
"page-size-
|
|
4
|
+
"visible-content": "awsui_visible-content_tc96w_1b1c1_185",
|
|
5
|
+
"visible-content-toggle": "awsui_visible-content-toggle_tc96w_1b1c1_186",
|
|
6
|
+
"visible-content-groups": "awsui_visible-content-groups_tc96w_1b1c1_187",
|
|
7
|
+
"visible-content-group": "awsui_visible-content-group_tc96w_1b1c1_187",
|
|
8
|
+
"visible-content-title": "awsui_visible-content-title_tc96w_1b1c1_192",
|
|
9
|
+
"visible-content-group-label": "awsui_visible-content-group-label_tc96w_1b1c1_200",
|
|
10
|
+
"visible-content-option": "awsui_visible-content-option_tc96w_1b1c1_206",
|
|
11
|
+
"visible-content-option-label": "awsui_visible-content-option-label_tc96w_1b1c1_217",
|
|
12
|
+
"root": "awsui_root_tc96w_1b1c1_224",
|
|
13
|
+
"modal-root": "awsui_modal-root_tc96w_1b1c1_225",
|
|
14
|
+
"trigger-button": "awsui_trigger-button_tc96w_1b1c1_226",
|
|
15
|
+
"cancel-button": "awsui_cancel-button_tc96w_1b1c1_227",
|
|
16
|
+
"confirm-button": "awsui_confirm-button_tc96w_1b1c1_228",
|
|
17
|
+
"custom": "awsui_custom_tc96w_1b1c1_229",
|
|
18
|
+
"second-column-small": "awsui_second-column-small_tc96w_1b1c1_233",
|
|
19
|
+
"wrap-lines": "awsui_wrap-lines_tc96w_1b1c1_237",
|
|
20
|
+
"striped-rows": "awsui_striped-rows_tc96w_1b1c1_238",
|
|
21
|
+
"page-size": "awsui_page-size_tc96w_1b1c1_239",
|
|
22
|
+
"page-size-form-field": "awsui_page-size-form-field_tc96w_1b1c1_240",
|
|
23
|
+
"page-size-radio-group": "awsui_page-size-radio-group_tc96w_1b1c1_241"
|
|
23
24
|
};
|
|
24
25
|
|
|
@@ -182,14 +182,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
182
182
|
Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
183
183
|
SPDX-License-Identifier: Apache-2.0
|
|
184
184
|
*/
|
|
185
|
-
.awsui_visible-
|
|
186
|
-
.awsui_visible-content-
|
|
187
|
-
.awsui_visible-content-
|
|
188
|
-
.awsui_visible-content-
|
|
185
|
+
.awsui_visible-content_tc96w_1b1c1_185:not(#\9),
|
|
186
|
+
.awsui_visible-content-toggle_tc96w_1b1c1_186:not(#\9),
|
|
187
|
+
.awsui_visible-content-groups_tc96w_1b1c1_187:not(#\9),
|
|
188
|
+
.awsui_visible-content-group_tc96w_1b1c1_187:not(#\9) {
|
|
189
189
|
/* used in test-utils */
|
|
190
190
|
}
|
|
191
191
|
|
|
192
|
-
.awsui_visible-content-
|
|
192
|
+
.awsui_visible-content-title_tc96w_1b1c1_192:not(#\9) {
|
|
193
193
|
font-size: var(--font-body-m-size-sregvd, 14px);
|
|
194
194
|
line-height: var(--font-body-m-line-height-i7xxvv, 22px);
|
|
195
195
|
font-weight: var(--font-display-label-weight-m18hjh, 700);
|
|
@@ -197,46 +197,47 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
197
197
|
margin-bottom: var(--space-scaled-l-t03y3z, 20px);
|
|
198
198
|
}
|
|
199
199
|
|
|
200
|
-
.awsui_visible-content-group-
|
|
200
|
+
.awsui_visible-content-group-label_tc96w_1b1c1_200:not(#\9) {
|
|
201
201
|
color: var(--color-text-group-label-w9to2i, #414d5c);
|
|
202
202
|
padding-bottom: var(--space-xs-rsr2qu, 8px);
|
|
203
203
|
border-bottom: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
|
|
204
204
|
}
|
|
205
205
|
|
|
206
|
-
.awsui_visible-content-
|
|
206
|
+
.awsui_visible-content-option_tc96w_1b1c1_206:not(#\9) {
|
|
207
207
|
display: flex;
|
|
208
208
|
flex-wrap: nowrap;
|
|
209
209
|
justify-content: space-between;
|
|
210
210
|
padding: var(--space-xs-rsr2qu, 8px) 0px var(--space-xs-rsr2qu, 8px) var(--space-scaled-l-t03y3z, 20px);
|
|
211
211
|
border-bottom: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
|
|
212
212
|
}
|
|
213
|
-
.awsui_visible-content-
|
|
213
|
+
.awsui_visible-content-option_tc96w_1b1c1_206:not(#\9):last-child {
|
|
214
214
|
border-bottom: none;
|
|
215
215
|
}
|
|
216
216
|
|
|
217
|
-
.awsui_visible-content-option-
|
|
217
|
+
.awsui_visible-content-option-label_tc96w_1b1c1_217:not(#\9) {
|
|
218
218
|
overflow: hidden;
|
|
219
219
|
text-overflow: ellipsis;
|
|
220
220
|
padding-right: var(--space-l-4vl6xu, 20px);
|
|
221
221
|
flex-grow: 1;
|
|
222
222
|
}
|
|
223
223
|
|
|
224
|
-
.
|
|
225
|
-
.awsui_modal-
|
|
226
|
-
.awsui_trigger-
|
|
227
|
-
.awsui_cancel-
|
|
228
|
-
.awsui_confirm-
|
|
229
|
-
.
|
|
224
|
+
.awsui_root_tc96w_1b1c1_224:not(#\9),
|
|
225
|
+
.awsui_modal-root_tc96w_1b1c1_225:not(#\9),
|
|
226
|
+
.awsui_trigger-button_tc96w_1b1c1_226:not(#\9),
|
|
227
|
+
.awsui_cancel-button_tc96w_1b1c1_227:not(#\9),
|
|
228
|
+
.awsui_confirm-button_tc96w_1b1c1_228:not(#\9),
|
|
229
|
+
.awsui_custom_tc96w_1b1c1_229:not(#\9) {
|
|
230
230
|
/* used in test-utils */
|
|
231
231
|
}
|
|
232
232
|
|
|
233
|
-
.awsui_second-column-
|
|
233
|
+
.awsui_second-column-small_tc96w_1b1c1_233:not(#\9) {
|
|
234
234
|
padding-top: calc(2 * var(--space-scaled-l-t03y3z, 20px));
|
|
235
235
|
}
|
|
236
236
|
|
|
237
|
-
.awsui_wrap-
|
|
238
|
-
.
|
|
239
|
-
.awsui_page-
|
|
240
|
-
.awsui_page-size-
|
|
237
|
+
.awsui_wrap-lines_tc96w_1b1c1_237:not(#\9),
|
|
238
|
+
.awsui_striped-rows_tc96w_1b1c1_238:not(#\9),
|
|
239
|
+
.awsui_page-size_tc96w_1b1c1_239:not(#\9),
|
|
240
|
+
.awsui_page-size-form-field_tc96w_1b1c1_240:not(#\9),
|
|
241
|
+
.awsui_page-size-radio-group_tc96w_1b1c1_241:not(#\9) {
|
|
241
242
|
/* used in test-utils */
|
|
242
243
|
}
|
|
@@ -2,24 +2,25 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"visible-content": "awsui_visible-
|
|
6
|
-
"visible-content-toggle": "awsui_visible-content-
|
|
7
|
-
"visible-content-groups": "awsui_visible-content-
|
|
8
|
-
"visible-content-group": "awsui_visible-content-
|
|
9
|
-
"visible-content-title": "awsui_visible-content-
|
|
10
|
-
"visible-content-group-label": "awsui_visible-content-group-
|
|
11
|
-
"visible-content-option": "awsui_visible-content-
|
|
12
|
-
"visible-content-option-label": "awsui_visible-content-option-
|
|
13
|
-
"root": "
|
|
14
|
-
"modal-root": "awsui_modal-
|
|
15
|
-
"trigger-button": "awsui_trigger-
|
|
16
|
-
"cancel-button": "awsui_cancel-
|
|
17
|
-
"confirm-button": "awsui_confirm-
|
|
18
|
-
"custom": "
|
|
19
|
-
"second-column-small": "awsui_second-column-
|
|
20
|
-
"wrap-lines": "awsui_wrap-
|
|
21
|
-
"
|
|
22
|
-
"page-size
|
|
23
|
-
"page-size-
|
|
5
|
+
"visible-content": "awsui_visible-content_tc96w_1b1c1_185",
|
|
6
|
+
"visible-content-toggle": "awsui_visible-content-toggle_tc96w_1b1c1_186",
|
|
7
|
+
"visible-content-groups": "awsui_visible-content-groups_tc96w_1b1c1_187",
|
|
8
|
+
"visible-content-group": "awsui_visible-content-group_tc96w_1b1c1_187",
|
|
9
|
+
"visible-content-title": "awsui_visible-content-title_tc96w_1b1c1_192",
|
|
10
|
+
"visible-content-group-label": "awsui_visible-content-group-label_tc96w_1b1c1_200",
|
|
11
|
+
"visible-content-option": "awsui_visible-content-option_tc96w_1b1c1_206",
|
|
12
|
+
"visible-content-option-label": "awsui_visible-content-option-label_tc96w_1b1c1_217",
|
|
13
|
+
"root": "awsui_root_tc96w_1b1c1_224",
|
|
14
|
+
"modal-root": "awsui_modal-root_tc96w_1b1c1_225",
|
|
15
|
+
"trigger-button": "awsui_trigger-button_tc96w_1b1c1_226",
|
|
16
|
+
"cancel-button": "awsui_cancel-button_tc96w_1b1c1_227",
|
|
17
|
+
"confirm-button": "awsui_confirm-button_tc96w_1b1c1_228",
|
|
18
|
+
"custom": "awsui_custom_tc96w_1b1c1_229",
|
|
19
|
+
"second-column-small": "awsui_second-column-small_tc96w_1b1c1_233",
|
|
20
|
+
"wrap-lines": "awsui_wrap-lines_tc96w_1b1c1_237",
|
|
21
|
+
"striped-rows": "awsui_striped-rows_tc96w_1b1c1_238",
|
|
22
|
+
"page-size": "awsui_page-size_tc96w_1b1c1_239",
|
|
23
|
+
"page-size-form-field": "awsui_page-size-form-field_tc96w_1b1c1_240",
|
|
24
|
+
"page-size-radio-group": "awsui_page-size-radio-group_tc96w_1b1c1_241"
|
|
24
25
|
};
|
|
25
26
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { CollectionPreferencesProps } from './interfaces';
|
|
3
|
-
export declare const copyPreferences: ({ pageSize, wrapLines, visibleContent, custom, }: CollectionPreferencesProps.Preferences) => CollectionPreferencesProps.Preferences;
|
|
3
|
+
export declare const copyPreferences: ({ pageSize, wrapLines, stripedRows, visibleContent, custom, }: CollectionPreferencesProps.Preferences) => CollectionPreferencesProps.Preferences;
|
|
4
4
|
export declare const mergePreferences: (newPref: CollectionPreferencesProps.Preferences, oldPref: CollectionPreferencesProps.Preferences) => CollectionPreferencesProps.Preferences;
|
|
5
5
|
interface ModalContentLayoutProps {
|
|
6
6
|
left: React.ReactNode;
|
|
@@ -17,6 +17,11 @@ interface WrapLinesPreferenceProps extends CollectionPreferencesProps.WrapLinesP
|
|
|
17
17
|
value?: boolean;
|
|
18
18
|
}
|
|
19
19
|
export declare const WrapLinesPreference: ({ label, description, value, onChange }: WrapLinesPreferenceProps) => JSX.Element;
|
|
20
|
+
interface StripedRowsPreferenceProps extends CollectionPreferencesProps.StripedRowsPreference {
|
|
21
|
+
onChange: (value: boolean) => void;
|
|
22
|
+
value?: boolean;
|
|
23
|
+
}
|
|
24
|
+
export declare const StripedRowsPreference: ({ label, description, value, onChange }: StripedRowsPreferenceProps) => JSX.Element;
|
|
20
25
|
interface CustomPreferenceProps<T = any> extends Pick<CollectionPreferencesProps<T>, 'customPreference'> {
|
|
21
26
|
onChange: (value: T) => void;
|
|
22
27
|
value: T;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/collection-preferences/utils.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,OAAO,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAC;AAG1D,eAAO,MAAM,eAAe,
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/collection-preferences/utils.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,OAAO,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAC;AAG1D,eAAO,MAAM,eAAe,kEAMzB,2BAA2B,WAAW,KAAG,2BAA2B,WAMrE,CAAC;AAEH,eAAO,MAAM,gBAAgB,YAClB,2BAA2B,WAAW,WACtC,2BAA2B,WAAW,KAC9C,2BAA2B,WAM5B,CAAC;AAEH,UAAU,uBAAuB;IAC/B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,eAAO,MAAM,kBAAkB,oBAAqB,uBAAuB,gBAsB1E,CAAC;AAEF,UAAU,uBAAwB,SAAQ,0BAA0B,CAAC,kBAAkB;IACrF,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,kBAAkB,wCAAyC,uBAAuB,gBAW9F,CAAC;AAEF,UAAU,wBAAyB,SAAQ,0BAA0B,CAAC,mBAAmB;IACvF,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,mBAAmB,4CAA6C,wBAAwB,gBASpG,CAAC;AAEF,UAAU,0BAA2B,SAAQ,0BAA0B,CAAC,qBAAqB;IAC3F,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,qBAAqB,4CAA6C,0BAA0B,gBASxG,CAAC;AAEF,UAAU,qBAAqB,CAAC,CAAC,GAAG,GAAG,CAAE,SAAQ,IAAI,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,kBAAkB,CAAC;IACtG,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,KAAK,EAAE,CAAC,CAAC;CACV;AACD,eAAO,MAAM,gBAAgB,0CAA2C,qBAAqB,uBAc5F,CAAC"}
|
|
@@ -8,10 +8,11 @@ import InternalRadioGroup from '../radio-group/internal';
|
|
|
8
8
|
import { useContainerBreakpoints } from '../internal/hooks/container-queries';
|
|
9
9
|
import styles from './styles.css.js';
|
|
10
10
|
export var copyPreferences = function (_a) {
|
|
11
|
-
var pageSize = _a.pageSize, wrapLines = _a.wrapLines, visibleContent = _a.visibleContent, custom = _a.custom;
|
|
11
|
+
var pageSize = _a.pageSize, wrapLines = _a.wrapLines, stripedRows = _a.stripedRows, visibleContent = _a.visibleContent, custom = _a.custom;
|
|
12
12
|
return ({
|
|
13
13
|
pageSize: pageSize,
|
|
14
14
|
wrapLines: wrapLines,
|
|
15
|
+
stripedRows: stripedRows,
|
|
15
16
|
visibleContent: visibleContent,
|
|
16
17
|
custom: custom
|
|
17
18
|
});
|
|
@@ -19,6 +20,7 @@ export var copyPreferences = function (_a) {
|
|
|
19
20
|
export var mergePreferences = function (newPref, oldPref) { return ({
|
|
20
21
|
pageSize: newPref.pageSize !== undefined ? newPref.pageSize : oldPref.pageSize,
|
|
21
22
|
wrapLines: newPref.wrapLines !== undefined ? newPref.wrapLines : oldPref.wrapLines,
|
|
23
|
+
stripedRows: newPref.stripedRows !== undefined ? newPref.stripedRows : oldPref.stripedRows,
|
|
22
24
|
visibleContent: newPref.visibleContent !== undefined ? newPref.visibleContent : oldPref.visibleContent,
|
|
23
25
|
custom: newPref.custom !== undefined ? newPref.custom : oldPref.custom
|
|
24
26
|
}); };
|
|
@@ -56,6 +58,13 @@ export var WrapLinesPreference = function (_a) {
|
|
|
56
58
|
return onChange(detail.checked);
|
|
57
59
|
}, className: styles['wrap-lines'] }, label));
|
|
58
60
|
};
|
|
61
|
+
export var StripedRowsPreference = function (_a) {
|
|
62
|
+
var label = _a.label, description = _a.description, value = _a.value, onChange = _a.onChange;
|
|
63
|
+
return (React.createElement(InternalCheckbox, { checked: !!value, description: description, onChange: function (_a) {
|
|
64
|
+
var detail = _a.detail;
|
|
65
|
+
return onChange(detail.checked);
|
|
66
|
+
}, className: styles['striped-rows'] }, label));
|
|
67
|
+
};
|
|
59
68
|
export var CustomPreference = function (_a) {
|
|
60
69
|
var value = _a.value, customPreference = _a.customPreference, onChange = _a.onChange;
|
|
61
70
|
var _b = useState(value), customState = _b[0], setCustomState = _b[1];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/collection-preferences/utils.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AACpD,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAC7D,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/collection-preferences/utils.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,gBAAgB,MAAM,sBAAsB,CAAC;AACpD,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAC7D,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,IAAM,eAAe,GAAG,UAAC,EAMS;QALvC,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,cAAc,oBAAA,EACd,MAAM,YAAA;IAC8E,OAAA,CAAC;QACrF,QAAQ,UAAA;QACR,SAAS,WAAA;QACT,WAAW,aAAA;QACX,cAAc,gBAAA;QACd,MAAM,QAAA;KACP,CAAC;AANoF,CAMpF,CAAC;AAEH,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAC9B,OAA+C,EAC/C,OAA+C,IACJ,OAAA,CAAC;IAC5C,QAAQ,EAAE,OAAO,CAAC,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ;IAC9E,SAAS,EAAE,OAAO,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,SAAS;IAClF,WAAW,EAAE,OAAO,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,WAAW;IAC1F,cAAc,EAAE,OAAO,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc;IACtG,MAAM,EAAE,OAAO,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM;CACvE,CAAC,EAN2C,CAM3C,CAAC;AAOH,MAAM,CAAC,IAAM,kBAAkB,GAAG,UAAC,EAAwC;QAAtC,IAAI,UAAA,EAAE,KAAK,WAAA;IACxC,IAAA,KAAoB,uBAAuB,CAAC,CAAC,IAAI,CAAC,CAAC,EAAlD,UAAU,QAAA,EAAE,GAAG,QAAmC,CAAC;IAC1D,IAAM,cAAc,GAAG,UAAU,KAAK,SAAS,CAAC;IAEhD,IAAI,cAAc,EAAE;QAClB,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG;YACX,iCAAM,IAAI,CAAO;YAChB,KAAK,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC,IAAG,KAAK,CAAO,CAClE,CACP,CAAC;KACH;IAED,IAAM,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG;QACX,oBAAC,oBAAoB,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAC,WAAW;YACzD,iCAAM,IAAI,CAAO;YAChB,KAAK,IAAI,iCAAM,KAAK,CAAO,CACP,CACnB,CACP,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,CAAC,IAAM,kBAAkB,GAAG,UAAC,EAA4D;QAA1D,KAAK,WAAA,EAAE,OAAO,aAAA,EAAE,KAAK,WAAA,EAAE,QAAQ,cAAA;IAAgC,OAAA,CAClG,6BAAK,SAAS,EAAE,MAAM,CAAC,WAAW,CAAC;QACjC,oBAAC,iBAAiB,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC;YACvF,oBAAC,kBAAkB,IACjB,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC,EAC1C,KAAK,EAAE,UAAG,KAAK,CAAE,EACjB,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,UAAC,EAAgB;wBAAd,KAAK,WAAA,EAAE,KAAK,WAAA;oBAAO,OAAA,CAAC,EAAE,KAAK,OAAA,EAAE,KAAK,EAAE,UAAG,KAAK,CAAE,EAAE,CAAC;gBAA9B,CAA8B,CAAC,EACxE,QAAQ,EAAE,UAAC,EAAU;wBAAR,MAAM,YAAA;oBAAO,OAAA,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;gBAApC,CAAoC,GAC9D,CACgB,CAChB,CACP;AAXmG,CAWnG,CAAC;AAOF,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,EAAiE;QAA/D,KAAK,WAAA,EAAE,WAAW,iBAAA,EAAE,KAAK,WAAA,EAAE,QAAQ,cAAA;IAAiC,OAAA,CACxG,oBAAC,gBAAgB,IACf,OAAO,EAAE,CAAC,CAAC,KAAK,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,UAAC,EAAU;gBAAR,MAAM,YAAA;YAAO,OAAA,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC;QAAxB,CAAwB,EAClD,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,IAE9B,KAAK,CACW,CACpB;AATyG,CASzG,CAAC;AAOF,MAAM,CAAC,IAAM,qBAAqB,GAAG,UAAC,EAAmE;QAAjE,KAAK,WAAA,EAAE,WAAW,iBAAA,EAAE,KAAK,WAAA,EAAE,QAAQ,cAAA;IAAmC,OAAA,CAC5G,oBAAC,gBAAgB,IACf,OAAO,EAAE,CAAC,CAAC,KAAK,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,UAAC,EAAU;gBAAR,MAAM,YAAA;YAAO,OAAA,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC;QAAxB,CAAwB,EAClD,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,IAEhC,KAAK,CACW,CACpB;AAT6G,CAS7G,CAAC;AAMF,MAAM,CAAC,IAAM,gBAAgB,GAAG,UAAC,EAA4D;QAA1D,KAAK,WAAA,EAAE,gBAAgB,sBAAA,EAAE,QAAQ,cAAA;IAC5D,IAAA,KAAgC,QAAQ,CAAC,KAAK,CAAC,EAA9C,WAAW,QAAA,EAAE,cAAc,QAAmB,CAAC;IACtD,IAAI,gBAAgB,EAAE;QACpB,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM,IAC1B,gBAAgB,CAAC,WAAW,EAAE,UAAA,KAAK;YAClC,uDAAuD;YACvD,cAAc,CAAC,cAAM,OAAA,KAAK,EAAL,CAAK,CAAC,CAAC;YAC5B,QAAQ,CAAC,KAAK,CAAC,CAAC;QAClB,CAAC,CAAC,CACE,CACP,CAAC;KACH;IACD,OAAO,IAAI,CAAC;AACd,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\nimport InternalCheckbox from '../checkbox/internal';\nimport InternalColumnLayout from '../column-layout/internal';\nimport InternalFormField from '../form-field/internal';\nimport InternalRadioGroup from '../radio-group/internal';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { CollectionPreferencesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport const copyPreferences = ({\n pageSize,\n wrapLines,\n stripedRows,\n visibleContent,\n custom,\n}: CollectionPreferencesProps.Preferences): CollectionPreferencesProps.Preferences => ({\n pageSize,\n wrapLines,\n stripedRows,\n visibleContent,\n custom,\n});\n\nexport const mergePreferences = (\n newPref: CollectionPreferencesProps.Preferences,\n oldPref: CollectionPreferencesProps.Preferences\n): CollectionPreferencesProps.Preferences => ({\n pageSize: newPref.pageSize !== undefined ? newPref.pageSize : oldPref.pageSize,\n wrapLines: newPref.wrapLines !== undefined ? newPref.wrapLines : oldPref.wrapLines,\n stripedRows: newPref.stripedRows !== undefined ? newPref.stripedRows : oldPref.stripedRows,\n visibleContent: newPref.visibleContent !== undefined ? newPref.visibleContent : oldPref.visibleContent,\n custom: newPref.custom !== undefined ? newPref.custom : oldPref.custom,\n});\n\ninterface ModalContentLayoutProps {\n left: React.ReactNode;\n right: React.ReactNode;\n}\n\nexport const ModalContentLayout = ({ left, right }: ModalContentLayoutProps) => {\n const [breakpoint, ref] = useContainerBreakpoints(['xs']);\n const smallContainer = breakpoint === 'default';\n\n if (smallContainer) {\n return (\n <div ref={ref}>\n <div>{left}</div>\n {right && <div className={styles['second-column-small']}>{right}</div>}\n </div>\n );\n }\n\n const columns = right ? 2 : 1;\n return (\n <div ref={ref}>\n <InternalColumnLayout columns={columns} variant=\"text-grid\">\n <div>{left}</div>\n {right && <div>{right}</div>}\n </InternalColumnLayout>\n </div>\n );\n};\n\ninterface PageSizePreferenceProps extends CollectionPreferencesProps.PageSizePreference {\n onChange: (value: number) => void;\n value?: number;\n}\n\nexport const PageSizePreference = ({ title, options, value, onChange }: PageSizePreferenceProps) => (\n <div className={styles['page-size']}>\n <InternalFormField label={title} stretch={true} className={styles['page-size-form-field']}>\n <InternalRadioGroup\n className={styles['page-size-radio-group']}\n value={`${value}`}\n items={options.map(({ label, value }) => ({ label, value: `${value}` }))}\n onChange={({ detail }) => onChange(parseInt(detail.value, 10))}\n />\n </InternalFormField>\n </div>\n);\n\ninterface WrapLinesPreferenceProps extends CollectionPreferencesProps.WrapLinesPreference {\n onChange: (value: boolean) => void;\n value?: boolean;\n}\n\nexport const WrapLinesPreference = ({ label, description, value, onChange }: WrapLinesPreferenceProps) => (\n <InternalCheckbox\n checked={!!value}\n description={description}\n onChange={({ detail }) => onChange(detail.checked)}\n className={styles['wrap-lines']}\n >\n {label}\n </InternalCheckbox>\n);\n\ninterface StripedRowsPreferenceProps extends CollectionPreferencesProps.StripedRowsPreference {\n onChange: (value: boolean) => void;\n value?: boolean;\n}\n\nexport const StripedRowsPreference = ({ label, description, value, onChange }: StripedRowsPreferenceProps) => (\n <InternalCheckbox\n checked={!!value}\n description={description}\n onChange={({ detail }) => onChange(detail.checked)}\n className={styles['striped-rows']}\n >\n {label}\n </InternalCheckbox>\n);\n\ninterface CustomPreferenceProps<T = any> extends Pick<CollectionPreferencesProps<T>, 'customPreference'> {\n onChange: (value: T) => void;\n value: T;\n}\nexport const CustomPreference = ({ value, customPreference, onChange }: CustomPreferenceProps) => {\n const [customState, setCustomState] = useState(value);\n if (customPreference) {\n return (\n <div className={styles.custom}>\n {customPreference(customState, value => {\n // prevent value to be treated as a functional callback\n setCustomState(() => value);\n onChange(value);\n })}\n </div>\n );\n }\n return null;\n};\n"]}
|
|
@@ -165,6 +165,7 @@
|
|
|
165
165
|
--color-background-button-primary-disabled-eon7km:#e9ebed;
|
|
166
166
|
--color-background-button-primary-hover-qu1zio:#033160;
|
|
167
167
|
--color-background-calendar-today-762czq:#f4f4f4;
|
|
168
|
+
--color-background-cell-shaded-26ubfj:#f8f8f8;
|
|
168
169
|
--color-background-code-editor-gutter-active-line-default-p2p8kl:#5f6b7a;
|
|
169
170
|
--color-background-code-editor-gutter-active-line-error-lfh0u4:#d91515;
|
|
170
171
|
--color-background-code-editor-gutter-default-l5k65m:#f4f4f4;
|
|
@@ -738,6 +739,7 @@
|
|
|
738
739
|
--color-background-button-primary-disabled-eon7km:#354150;
|
|
739
740
|
--color-background-button-primary-hover-qu1zio:#89bdee;
|
|
740
741
|
--color-background-calendar-today-762czq:#354150;
|
|
742
|
+
--color-background-cell-shaded-26ubfj:#232f3e;
|
|
741
743
|
--color-background-code-editor-gutter-active-line-default-p2p8kl:#7d8998;
|
|
742
744
|
--color-background-code-editor-gutter-active-line-error-lfh0u4:#eb6f6f;
|
|
743
745
|
--color-background-code-editor-gutter-default-l5k65m:#192534;
|
|
@@ -973,6 +975,7 @@
|
|
|
973
975
|
--color-background-button-primary-disabled-eon7km:#354150;
|
|
974
976
|
--color-background-button-primary-hover-qu1zio:#89bdee;
|
|
975
977
|
--color-background-calendar-today-762czq:#354150;
|
|
978
|
+
--color-background-cell-shaded-26ubfj:#232f3e;
|
|
976
979
|
--color-background-code-editor-gutter-active-line-default-p2p8kl:#7d8998;
|
|
977
980
|
--color-background-code-editor-gutter-active-line-error-lfh0u4:#eb6f6f;
|
|
978
981
|
--color-background-code-editor-gutter-default-l5k65m:#192534;
|
|
@@ -1142,6 +1145,7 @@
|
|
|
1142
1145
|
--color-background-button-primary-disabled-eon7km:#354150;
|
|
1143
1146
|
--color-background-button-primary-hover-qu1zio:#89bdee;
|
|
1144
1147
|
--color-background-calendar-today-762czq:#354150;
|
|
1148
|
+
--color-background-cell-shaded-26ubfj:#232f3e;
|
|
1145
1149
|
--color-background-code-editor-gutter-active-line-default-p2p8kl:#7d8998;
|
|
1146
1150
|
--color-background-code-editor-gutter-active-line-error-lfh0u4:#eb6f6f;
|
|
1147
1151
|
--color-background-code-editor-gutter-default-l5k65m:#192534;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { Offset } from '../interfaces';
|
|
2
3
|
export interface FocusOutlineProps {
|
|
3
4
|
elementKey?: null | string | number | boolean;
|
|
4
5
|
elementRef?: React.RefObject<SVGSVGElement | SVGGElement>;
|
|
5
|
-
offset?:
|
|
6
|
+
offset?: Offset;
|
|
6
7
|
}
|
|
7
8
|
export default function FocusOutline({ elementKey, elementRef, offset }: FocusOutlineProps): JSX.Element;
|
|
8
9
|
//# sourceMappingURL=focus-outline.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focus-outline.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/chart-plot/focus-outline.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"focus-outline.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/chart-plot/focus-outline.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAC9C,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,aAAa,GAAG,WAAW,CAAC,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,MAAU,EAAE,EAAE,iBAAiB,eAkB7F"}
|
|
@@ -22,10 +22,12 @@ export default function FocusOutline(_a) {
|
|
|
22
22
|
return React.createElement("rect", { ref: ref, "aria-hidden": "true", className: styles['focus-outline'], rx: "2" });
|
|
23
23
|
}
|
|
24
24
|
function showOutline(el, position, offset) {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
el.setAttribute('
|
|
28
|
-
el.setAttribute('
|
|
25
|
+
var offsetX = typeof offset === 'number' ? offset : offset.x;
|
|
26
|
+
var offsetY = typeof offset === 'number' ? offset : offset.y;
|
|
27
|
+
el.setAttribute('x', (position.x - offsetX).toString());
|
|
28
|
+
el.setAttribute('y', (position.y - offsetY).toString());
|
|
29
|
+
el.setAttribute('width', (position.width + 2 * offsetX).toString());
|
|
30
|
+
el.setAttribute('height', (position.height + 2 * offsetY).toString());
|
|
29
31
|
el.style.visibility = 'visible';
|
|
30
32
|
}
|
|
31
33
|
function hideOutline(el) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"focus-outline.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-plot/focus-outline.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"focus-outline.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-plot/focus-outline.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,iCAAiC,CAAC;AAS9D,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAyD;QAAvD,UAAU,gBAAA,EAAE,UAAU,gBAAA,EAAE,cAAU,EAAV,MAAM,mBAAG,CAAC,KAAA;IACvE,IAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACjC,IAA4B,YAAY,GAAK,eAAe,EAAE,4BAAtB,CAAuB;IAEvE,SAAS,CAAC;QACR,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;YAChB,OAAO;SACR;QAED,IAAI,YAAY,IAAI,UAAU,IAAI,UAAU,IAAI,UAAU,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,CAAC,OAAO,EAAE;YAChG,IAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;YAC7C,WAAW,CAAC,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;SAC3C;aAAM;YACL,WAAW,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;SAC1B;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;IAEnD,OAAO,8BAAM,GAAG,EAAE,GAAG,iBAAc,MAAM,EAAC,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,EAAE,EAAC,GAAG,GAAG,CAAC;AAC1F,CAAC;AAED,SAAS,WAAW,CAClB,EAAkB,EAClB,QAAiE,EACjE,MAAc;IAEd,IAAM,OAAO,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/D,IAAM,OAAO,GAAG,OAAO,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/D,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACxD,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACxD,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACpE,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACtE,EAAE,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS,CAAC;AAClC,CAAC;AAED,SAAS,WAAW,CAAC,EAAkB;IACrC,EAAE,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;IAC/B,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;IACxB,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;IACxB,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;IAC5B,EAAE,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;AAC/B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\n\nimport styles from './styles.css.js';\nimport useFocusVisible from '../../hooks/focus-visible/index';\nimport { Offset } from '../interfaces';\n\nexport interface FocusOutlineProps {\n elementKey?: null | string | number | boolean;\n elementRef?: React.RefObject<SVGSVGElement | SVGGElement>;\n offset?: Offset;\n}\n\nexport default function FocusOutline({ elementKey, elementRef, offset = 0 }: FocusOutlineProps) {\n const ref = useRef<SVGRectElement>(null);\n const { 'data-awsui-focus-visible': focusVisible } = useFocusVisible();\n\n useEffect(() => {\n if (!ref.current) {\n return;\n }\n\n if (focusVisible && elementKey && elementRef && elementRef.current && elementRef.current.getBBox) {\n const element = elementRef.current.getBBox();\n showOutline(ref.current, element, offset);\n } else {\n hideOutline(ref.current);\n }\n }, [focusVisible, elementKey, elementRef, offset]);\n\n return <rect ref={ref} aria-hidden=\"true\" className={styles['focus-outline']} rx=\"2\" />;\n}\n\nfunction showOutline(\n el: SVGRectElement,\n position: { x: number; y: number; width: number; height: number },\n offset: Offset\n) {\n const offsetX = typeof offset === 'number' ? offset : offset.x;\n const offsetY = typeof offset === 'number' ? offset : offset.y;\n el.setAttribute('x', (position.x - offsetX).toString());\n el.setAttribute('y', (position.y - offsetY).toString());\n el.setAttribute('width', (position.width + 2 * offsetX).toString());\n el.setAttribute('height', (position.height + 2 * offsetY).toString());\n el.style.visibility = 'visible';\n}\n\nfunction hideOutline(el: SVGRectElement) {\n el.style.visibility = 'hidden';\n el.removeAttribute('x');\n el.removeAttribute('y');\n el.removeAttribute('width');\n el.removeAttribute('height');\n}\n"]}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import { Offset } from '../interfaces';
|
|
2
3
|
export interface ChartPlotRef {
|
|
3
4
|
svg: SVGSVGElement;
|
|
4
5
|
focusPlot(): void;
|
|
@@ -20,7 +21,7 @@ export interface ChartPlotProps {
|
|
|
20
21
|
ariaRoleDescription?: string;
|
|
21
22
|
activeElementKey?: null | string | number | boolean;
|
|
22
23
|
activeElementRef?: React.RefObject<SVGGElement>;
|
|
23
|
-
activeElementFocusOffset?:
|
|
24
|
+
activeElementFocusOffset?: Offset;
|
|
24
25
|
ariaLiveRegion?: React.ReactNode;
|
|
25
26
|
isClickable?: boolean;
|
|
26
27
|
isPrecise?: boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/chart-plot/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/chart-plot/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAWjF,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAKvC,MAAM,WAAW,YAAY;IAC3B,GAAG,EAAE,aAAa,CAAC;IACnB,SAAS,IAAI,IAAI,CAAC;IAClB,gBAAgB,IAAI,IAAI,CAAC;CAC1B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACpD,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAChD,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC/D,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC/D,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,IAAI,CAAC;IAC9D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,OAAO,GAAG,UAAU,KAAK,IAAI,CAAC;IACxF,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;EASE;;AACF,wBAAqC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-plot/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjF,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,qBAAyC,MAAM,0BAA0B,CAAC;AACjF,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,eAAe,MAAM,+BAA+B,CAAC;AAE5D,IAAM,yBAAyB,GAAG,CAAC,CAAC;AACpC,IAAM,4BAA4B,GAAG,CAAC,CAAC;AAqCvC;;;;;;;;;EASE;AACF,eAAe,UAAU,CAAC,SAAS,CAAC,CAAC;AAErC,SAAS,SAAS,CAChB,EA0BiB,EACjB,GAA4B;;IA1B1B,IAAA,KAAK,WAAA,EACL,MAAM,YAAA,EACN,SAAS,eAAA,EACT,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,UAAU,gBAAA,EACV,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,mBAAmB,yBAAA,EACnB,eAAe,qBAAA,EACf,eAAe,qBAAA,EACf,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,cAAc,oBAAA,EACd,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,SAAS,eAAA,EACT,OAAO,aAAA,EACP,MAAM,YAAA,EACN,mBAAuC,EAAvC,WAAW,mBAAG,yBAAyB,KAAA,EACvC,gCAAuD,EAAvD,wBAAwB,mBAAG,4BAA4B,KAAA,EACpD,SAAS,cAzBd,oXA0BC,CADa;IAId,IAAM,MAAM,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC3C,IAAM,cAAc,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACpD,IAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAA,KAAkC,QAAQ,CAAC,KAAK,CAAC,EAAhD,aAAa,QAAA,EAAE,cAAc,QAAmB,CAAC;IAClD,IAAA,KAAgD,QAAQ,CAAC,KAAK,CAAC,EAA9D,oBAAoB,QAAA,EAAE,qBAAqB,QAAmB,CAAC;IAEtE,IAAM,qBAAqB,GAAG,WAAW,CAAC,+BAA+B,CAAC,CAAC;IAC3E,IAAM,iBAAiB,GAAG,CAAC,eAAe,IAAI,qBAAqB,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEhH,mBAAmB,CAAC,GAAG,EAAE,cAAM,OAAA,CAAC;QAC9B,GAAG,EAAE,MAAM,CAAC,OAAQ;QACpB,SAAS,EAAE,cAAM,OAAA,eAAe,CAAC,MAAM,CAAC,OAAQ,CAAC,EAAhC,CAAgC;QACjD,gBAAgB,EAAE,cAAM,OAAA,cAAc,CAAC,OAAQ,CAAC,KAAK,EAAE,EAA/B,CAA+B;KACxD,CAAC,EAJ6B,CAI7B,CAAC,CAAC;IAEJ,IAAM,eAAe,GAAG,UAAC,KAAkD;QACzE,WAAW,IAAI,WAAW,CAAC,KAAK,CAAC,CAAC;QAClC,+DAA+D;QAC/D,cAAc,CAAC,OAAO,GAAG,IAAI,CAAC;IAChC,CAAC,CAAC;IACF,IAAM,WAAW,GAAG,UAAC,KAAsC;QACzD,IAAI,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,OAAO,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;YAC9D,cAAc,CAAC,IAAI,CAAC,CAAC;SACtB;QACD,sEAAsE;aACjE,IAAI,cAAc,CAAC,OAAO,EAAE;YAC/B,cAAc,CAAC,OAAQ,CAAC,KAAK,EAAE,CAAC;SACjC;IACH,CAAC,CAAC;IACF,IAAM,UAAU,GAAG,UAAC,KAAsC;QACxD,IAAI,KAAK,CAAC,MAAM,KAAK,MAAM,CAAC,OAAO,EAAE;YACnC,cAAc,CAAC,KAAK,CAAC,CAAC;SACvB;IACH,CAAC,CAAC;IACF,iGAAiG;IACjG,IAAM,aAAa,GAAG,UAAC,KAA0B;QAC/C,IAAI,aAAa,EAAE;YACjB,iFAAiF;YACjF,IAAM,KAAK,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;YACpG,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE;gBACvC,cAAc,CAAC,OAAQ,CAAC,KAAK,EAAE,CAAC;aACjC;SACF;IACH,CAAC,CAAC;IAEF,IAAM,kBAAkB,GAAG,UAAC,KAAoC;QAC9D,OAAO,IAAI,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;QACzE,6EAA6E;QAC7E,cAAc,CAAC,OAAO,GAAG,KAAK,CAAC;QAC/B,qBAAqB,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC;IACF,IAAM,iBAAiB,GAAG,UAAC,KAAoC;QAC7D,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;QACxB,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC,CAAC;IACF,IAAM,oBAAoB,GAAG,SAAS,CAAC;IAEvC,IAAM,aAAa,GAAG,CAAC,oBAAoB,CAAC;IAC5C,IAAM,YAAY,GAAG,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5C,IAAM,QAAQ,GAAG,CAAC,oBAAoB;QACpC,CAAC,CAAC;YACE,YAAY,EAAE,SAAS;YACvB,iBAAiB,EAAE,cAAc;YACjC,kBAAkB,EAAE,iBAAiB;YACrC,sBAAsB,EAAE,mBAAmB;SAC5C;QACH,CAAC,CAAC,EAAE,CAAC;IAEP,OAAO,CACL;QACE,wCACM,SAAS,IACb,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAC,aAAa,iBACN,OAAO,IACf,QAAQ,IACZ,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE;gBACL,SAAS,EAAE,SAAS;gBACpB,YAAY,EAAE,YAAY;gBAC1B,UAAU,EAAE,UAAU;gBACtB,WAAW,EAAE,WAAW;aACzB,EACD,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI;gBACzB,GAAC,MAAM,CAAC,SAAS,IAAG,WAAW;gBAC/B,GAAC,MAAM,CAAC,OAAO,IAAG,SAAS;oBAC3B,EACF,WAAW,EAAE,eAAe,EAC5B,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa;YAExB,oBAAC,YAAY,IAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,EAAE,WAAW,GAAI;YAEpF,2BAAG,SAAS,EAAE,SAAS,EAAE,IAAI,EAAC,OAAO;gBACnC,oBAAC,qBAAqB,IACpB,gBAAgB,EAAE,gBAAgB,IAAI,IAAI,EAC1C,gBAAgB,EAAE,gBAAgB,EAClC,GAAG,EAAE,cAAc,EACnB,OAAO,EAAE,kBAAkB,EAC3B,MAAM,EAAE,iBAAiB,EACzB,SAAS,EAAE,oBAAoB,GAC/B;gBAGD,eAAe,IAAI,aAAa,IAAI,CACnC,6CAAkB,MAAM,EAAC,EAAE,EAAE,qBAAqB,IAC/C,eAAe,CACX,CACR;gBAEA,QAAQ;gBAET,oBAAC,YAAY,IACX,UAAU,EAAE,gBAAgB,EAC5B,UAAU,EAAE,oBAAoB,IAAI,gBAAgB,EACpD,MAAM,EAAE,wBAAwB,GAChC,CACA,CACA;QAEN,oBAAC,UAAU,QAAE,cAAc,CAAc,CACxC,CACJ,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport { useUniqueId } from '../../hooks/use-unique-id';\n\nimport { KeyCode } from '../../keycode';\nimport LiveRegion from '../live-region/index';\nimport ApplicationController, { ApplicationRef } from './application-controller';\nimport FocusOutline from './focus-outline';\nimport focusSvgElement from '../../utils/focus-svg-element';\n\nconst DEFAULT_PLOT_FOCUS_OFFSET = 3;\nconst DEFAULT_ELEMENT_FOCUS_OFFSET = 3;\n\nexport interface ChartPlotRef {\n svg: SVGSVGElement;\n focusPlot(): void;\n focusApplication(): void;\n}\n\nexport interface ChartPlotProps {\n width: number;\n height: number;\n transform?: string;\n offsetTop?: number;\n offsetBottom?: number;\n offsetLeft?: number;\n offsetRight?: number;\n focusOffset?: number;\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescription?: string;\n ariaDescribedby?: string;\n ariaRoleDescription?: string;\n activeElementKey?: null | string | number | boolean;\n activeElementRef?: React.RefObject<SVGGElement>;\n activeElementFocusOffset?: number;\n ariaLiveRegion?: React.ReactNode;\n isClickable?: boolean;\n isPrecise?: boolean;\n onMouseDown?: (event: React.MouseEvent<SVGSVGElement>) => void;\n onMouseMove?: (event: React.MouseEvent<SVGSVGElement>) => void;\n onMouseOut?: (event: React.MouseEvent<SVGSVGElement>) => void;\n onFocus?: (event: React.FocusEvent<SVGGElement>, trigger: 'mouse' | 'keyboard') => void;\n onBlur?: (event: React.FocusEvent<SVGGElement>) => void;\n onKeyDown?: (event: React.KeyboardEvent<SVGGElement>) => void;\n children: React.ReactNode;\n}\n\n/**\n An extension for the SVG to be used for charts. It includes a controller element to\n handle the focus and keyboard interactions in a way that is supported by screen readers.\n\n The application mimics the aria-activedescendant behavior which is unsupported by Safari. The\n activeElementRef is the pointer to the secondary-focus element and activeElementKey denotes when\n the focus transition was made.\n\n Alternatively, ariaLiveRegion can be used to make announcements.\n*/\nexport default forwardRef(ChartPlot);\n\nfunction ChartPlot(\n {\n width,\n height,\n transform,\n offsetTop,\n offsetBottom,\n offsetLeft,\n offsetRight,\n ariaLabel,\n ariaLabelledby,\n ariaRoleDescription,\n ariaDescription,\n ariaDescribedby,\n activeElementKey,\n activeElementRef,\n ariaLiveRegion,\n isClickable,\n isPrecise,\n children,\n onMouseDown,\n onKeyDown,\n onFocus,\n onBlur,\n focusOffset = DEFAULT_PLOT_FOCUS_OFFSET,\n activeElementFocusOffset = DEFAULT_ELEMENT_FOCUS_OFFSET,\n ...restProps\n }: ChartPlotProps,\n ref: React.Ref<ChartPlotRef>\n) {\n const svgRef = useRef<SVGSVGElement>(null);\n const applicationRef = useRef<ApplicationRef>(null);\n const plotClickedRef = useRef(false);\n const [isPlotFocused, setPlotFocused] = useState(false);\n const [isApplicationFocused, setApplicationFocused] = useState(false);\n\n const internalDescriptionId = useUniqueId('awsui-chart-plot__description');\n const ariaDescriptionId = [ariaDescription && internalDescriptionId, ariaDescribedby].filter(Boolean).join(' ');\n\n useImperativeHandle(ref, () => ({\n svg: svgRef.current!,\n focusPlot: () => focusSvgElement(svgRef.current!),\n focusApplication: () => applicationRef.current!.focus(),\n }));\n\n const onPlotMouseDown = (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {\n onMouseDown && onMouseDown(event);\n // Record the click was made for the application focus handler.\n plotClickedRef.current = true;\n };\n const onPlotFocus = (event: React.FocusEvent<SVGSVGElement>) => {\n if (event.target === svgRef.current && !plotClickedRef.current) {\n setPlotFocused(true);\n }\n // The click should focus the underling application bypassing the svg.\n else if (plotClickedRef.current) {\n applicationRef.current!.focus();\n }\n };\n const onPlotBlur = (event: React.FocusEvent<SVGSVGElement>) => {\n if (event.target === svgRef.current) {\n setPlotFocused(false);\n }\n };\n // Once one of the expected keys is pressed the focus is delegated to the application controller.\n const onPlotKeyDown = (event: React.KeyboardEvent) => {\n if (isPlotFocused) {\n // Delegate the focus to the application if one of the expected keys was pressed.\n const codes = [KeyCode.space, KeyCode.enter, KeyCode.up, KeyCode.left, KeyCode.right, KeyCode.down];\n if (codes.indexOf(event.keyCode) !== -1) {\n applicationRef.current!.focus();\n }\n }\n };\n\n const onApplicationFocus = (event: React.FocusEvent<SVGGElement>) => {\n onFocus && onFocus(event, plotClickedRef.current ? 'mouse' : 'keyboard');\n // \"Release\" the click reference to not affect the next call of this handler.\n plotClickedRef.current = false;\n setApplicationFocused(true);\n };\n const onApplicationBlur = (event: React.FocusEvent<SVGGElement>) => {\n onBlur && onBlur(event);\n setApplicationFocused(false);\n };\n const onApplicationKeyDown = onKeyDown;\n\n const plotFocusable = !isApplicationFocused;\n const plotTabIndex = plotFocusable ? 0 : -1;\n const plotAria = !isApplicationFocused\n ? {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescriptionId,\n 'aria-roledescription': ariaRoleDescription,\n }\n : {};\n\n return (\n <>\n <svg\n {...restProps}\n focusable={plotFocusable}\n tabIndex={plotTabIndex}\n role=\"application\"\n aria-hidden=\"false\"\n {...plotAria}\n ref={svgRef}\n width={width}\n height={height}\n style={{\n marginTop: offsetTop,\n marginBottom: offsetBottom,\n marginLeft: offsetLeft,\n marginRight: offsetRight,\n }}\n className={clsx(styles.root, {\n [styles.clickable]: isClickable,\n [styles.precise]: isPrecise,\n })}\n onMouseDown={onPlotMouseDown}\n onFocus={onPlotFocus}\n onBlur={onPlotBlur}\n onKeyDown={onPlotKeyDown}\n >\n <FocusOutline elementRef={svgRef} elementKey={isPlotFocused} offset={focusOffset} />\n\n <g transform={transform} role=\"group\">\n <ApplicationController\n activeElementKey={activeElementKey || null}\n activeElementRef={activeElementRef}\n ref={applicationRef}\n onFocus={onApplicationFocus}\n onBlur={onApplicationBlur}\n onKeyDown={onApplicationKeyDown}\n />\n\n {/* Only show description when plot is focusable to avoid repetition in Safari and Firefox */}\n {ariaDescription && plotFocusable && (\n <desc aria-hidden=\"true\" id={internalDescriptionId}>\n {ariaDescription}\n </desc>\n )}\n\n {children}\n\n <FocusOutline\n elementRef={activeElementRef}\n elementKey={isApplicationFocused && activeElementKey}\n offset={activeElementFocusOffset}\n />\n </g>\n </svg>\n\n <LiveRegion>{ariaLiveRegion}</LiveRegion>\n </>\n );\n}\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-plot/index.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, { forwardRef, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport { useUniqueId } from '../../hooks/use-unique-id';\n\nimport { KeyCode } from '../../keycode';\nimport LiveRegion from '../live-region/index';\nimport ApplicationController, { ApplicationRef } from './application-controller';\nimport FocusOutline from './focus-outline';\nimport focusSvgElement from '../../utils/focus-svg-element';\nimport { Offset } from '../interfaces';\n\nconst DEFAULT_PLOT_FOCUS_OFFSET = 3;\nconst DEFAULT_ELEMENT_FOCUS_OFFSET = 3;\n\nexport interface ChartPlotRef {\n svg: SVGSVGElement;\n focusPlot(): void;\n focusApplication(): void;\n}\n\nexport interface ChartPlotProps {\n width: number;\n height: number;\n transform?: string;\n offsetTop?: number;\n offsetBottom?: number;\n offsetLeft?: number;\n offsetRight?: number;\n focusOffset?: number;\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescription?: string;\n ariaDescribedby?: string;\n ariaRoleDescription?: string;\n activeElementKey?: null | string | number | boolean;\n activeElementRef?: React.RefObject<SVGGElement>;\n activeElementFocusOffset?: Offset;\n ariaLiveRegion?: React.ReactNode;\n isClickable?: boolean;\n isPrecise?: boolean;\n onMouseDown?: (event: React.MouseEvent<SVGSVGElement>) => void;\n onMouseMove?: (event: React.MouseEvent<SVGSVGElement>) => void;\n onMouseOut?: (event: React.MouseEvent<SVGSVGElement>) => void;\n onFocus?: (event: React.FocusEvent<SVGGElement>, trigger: 'mouse' | 'keyboard') => void;\n onBlur?: (event: React.FocusEvent<SVGGElement>) => void;\n onKeyDown?: (event: React.KeyboardEvent<SVGGElement>) => void;\n children: React.ReactNode;\n}\n\n/**\n An extension for the SVG to be used for charts. It includes a controller element to\n handle the focus and keyboard interactions in a way that is supported by screen readers.\n\n The application mimics the aria-activedescendant behavior which is unsupported by Safari. The\n activeElementRef is the pointer to the secondary-focus element and activeElementKey denotes when\n the focus transition was made.\n\n Alternatively, ariaLiveRegion can be used to make announcements.\n*/\nexport default forwardRef(ChartPlot);\n\nfunction ChartPlot(\n {\n width,\n height,\n transform,\n offsetTop,\n offsetBottom,\n offsetLeft,\n offsetRight,\n ariaLabel,\n ariaLabelledby,\n ariaRoleDescription,\n ariaDescription,\n ariaDescribedby,\n activeElementKey,\n activeElementRef,\n ariaLiveRegion,\n isClickable,\n isPrecise,\n children,\n onMouseDown,\n onKeyDown,\n onFocus,\n onBlur,\n focusOffset = DEFAULT_PLOT_FOCUS_OFFSET,\n activeElementFocusOffset = DEFAULT_ELEMENT_FOCUS_OFFSET,\n ...restProps\n }: ChartPlotProps,\n ref: React.Ref<ChartPlotRef>\n) {\n const svgRef = useRef<SVGSVGElement>(null);\n const applicationRef = useRef<ApplicationRef>(null);\n const plotClickedRef = useRef(false);\n const [isPlotFocused, setPlotFocused] = useState(false);\n const [isApplicationFocused, setApplicationFocused] = useState(false);\n\n const internalDescriptionId = useUniqueId('awsui-chart-plot__description');\n const ariaDescriptionId = [ariaDescription && internalDescriptionId, ariaDescribedby].filter(Boolean).join(' ');\n\n useImperativeHandle(ref, () => ({\n svg: svgRef.current!,\n focusPlot: () => focusSvgElement(svgRef.current!),\n focusApplication: () => applicationRef.current!.focus(),\n }));\n\n const onPlotMouseDown = (event: React.MouseEvent<SVGSVGElement, MouseEvent>) => {\n onMouseDown && onMouseDown(event);\n // Record the click was made for the application focus handler.\n plotClickedRef.current = true;\n };\n const onPlotFocus = (event: React.FocusEvent<SVGSVGElement>) => {\n if (event.target === svgRef.current && !plotClickedRef.current) {\n setPlotFocused(true);\n }\n // The click should focus the underling application bypassing the svg.\n else if (plotClickedRef.current) {\n applicationRef.current!.focus();\n }\n };\n const onPlotBlur = (event: React.FocusEvent<SVGSVGElement>) => {\n if (event.target === svgRef.current) {\n setPlotFocused(false);\n }\n };\n // Once one of the expected keys is pressed the focus is delegated to the application controller.\n const onPlotKeyDown = (event: React.KeyboardEvent) => {\n if (isPlotFocused) {\n // Delegate the focus to the application if one of the expected keys was pressed.\n const codes = [KeyCode.space, KeyCode.enter, KeyCode.up, KeyCode.left, KeyCode.right, KeyCode.down];\n if (codes.indexOf(event.keyCode) !== -1) {\n applicationRef.current!.focus();\n }\n }\n };\n\n const onApplicationFocus = (event: React.FocusEvent<SVGGElement>) => {\n onFocus && onFocus(event, plotClickedRef.current ? 'mouse' : 'keyboard');\n // \"Release\" the click reference to not affect the next call of this handler.\n plotClickedRef.current = false;\n setApplicationFocused(true);\n };\n const onApplicationBlur = (event: React.FocusEvent<SVGGElement>) => {\n onBlur && onBlur(event);\n setApplicationFocused(false);\n };\n const onApplicationKeyDown = onKeyDown;\n\n const plotFocusable = !isApplicationFocused;\n const plotTabIndex = plotFocusable ? 0 : -1;\n const plotAria = !isApplicationFocused\n ? {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescriptionId,\n 'aria-roledescription': ariaRoleDescription,\n }\n : {};\n\n return (\n <>\n <svg\n {...restProps}\n focusable={plotFocusable}\n tabIndex={plotTabIndex}\n role=\"application\"\n aria-hidden=\"false\"\n {...plotAria}\n ref={svgRef}\n width={width}\n height={height}\n style={{\n marginTop: offsetTop,\n marginBottom: offsetBottom,\n marginLeft: offsetLeft,\n marginRight: offsetRight,\n }}\n className={clsx(styles.root, {\n [styles.clickable]: isClickable,\n [styles.precise]: isPrecise,\n })}\n onMouseDown={onPlotMouseDown}\n onFocus={onPlotFocus}\n onBlur={onPlotBlur}\n onKeyDown={onPlotKeyDown}\n >\n <FocusOutline elementRef={svgRef} elementKey={isPlotFocused} offset={focusOffset} />\n\n <g transform={transform} role=\"group\">\n <ApplicationController\n activeElementKey={activeElementKey || null}\n activeElementRef={activeElementRef}\n ref={applicationRef}\n onFocus={onApplicationFocus}\n onBlur={onApplicationBlur}\n onKeyDown={onApplicationKeyDown}\n />\n\n {/* Only show description when plot is focusable to avoid repetition in Safari and Firefox */}\n {ariaDescription && plotFocusable && (\n <desc aria-hidden=\"true\" id={internalDescriptionId}>\n {ariaDescription}\n </desc>\n )}\n\n {children}\n\n <FocusOutline\n elementRef={activeElementRef}\n elementKey={isApplicationFocused && activeElementKey}\n offset={activeElementFocusOffset}\n />\n </g>\n </svg>\n\n <LiveRegion>{ariaLiveRegion}</LiveRegion>\n </>\n );\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/chart-plot/interfaces.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/chart-plot/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport type Offset = number | { x: number; y: number };\n"]}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ScreenreaderOnlyProps } from '../screenreader-only';
|
|
3
|
+
export interface DynamicAriaLiveProps extends ScreenreaderOnlyProps {
|
|
4
|
+
assertive?: boolean;
|
|
5
|
+
delay?: number;
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
}
|
|
8
|
+
/**
|
|
9
|
+
* Dynamic aria live component is hidden in the layout, but visible for screen readers.
|
|
10
|
+
* Purpose of this component is to announce recurring changes for a content.
|
|
11
|
+
*
|
|
12
|
+
* To avoid merging words, provide all text nodes wrapped with elements, like:
|
|
13
|
+
* <LiveRegion>
|
|
14
|
+
* <span>{title}</span>
|
|
15
|
+
* <span><Details /></span>
|
|
16
|
+
* </LiveRegion>
|
|
17
|
+
* Or create a single text node if possible:
|
|
18
|
+
* <LiveRegion>
|
|
19
|
+
* {`${title} ${details}`}
|
|
20
|
+
* </LiveRegion>
|
|
21
|
+
*
|
|
22
|
+
* @param delay time value in milliseconds to set minimal time interval between announcements.
|
|
23
|
+
* @param assertive determine aria-live priority. Given value == false, aria-live have `polite` attribute value.
|
|
24
|
+
*/
|
|
25
|
+
declare const _default: React.MemoExoticComponent<typeof DynamicAriaLive>;
|
|
26
|
+
export default _default;
|
|
27
|
+
declare function DynamicAriaLive({ delay, children, ...restProps }: DynamicAriaLiveProps): JSX.Element;
|
|
28
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dynamic-aria-live/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAI7D,MAAM,WAAW,oBAAqB,SAAQ,qBAAqB;IACjE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;GAgBG;;AACH,wBAAqC;AAErC,iBAAS,eAAe,CAAC,EAAE,KAAY,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,oBAAoB,eAiBtF"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
|
|
2
|
+
// SPDX-License-Identifier: Apache-2.0
|
|
3
|
+
import { __assign, __rest } from "tslib";
|
|
4
|
+
import React, { memo, useEffect, useMemo, useRef } from 'react';
|
|
5
|
+
import { throttle } from '../../utils/throttle';
|
|
6
|
+
import { updateLiveRegion } from '../live-region/utils';
|
|
7
|
+
import AriaLiveTag from '../live-region/aria-liva-tag';
|
|
8
|
+
/**
|
|
9
|
+
* Dynamic aria live component is hidden in the layout, but visible for screen readers.
|
|
10
|
+
* Purpose of this component is to announce recurring changes for a content.
|
|
11
|
+
*
|
|
12
|
+
* To avoid merging words, provide all text nodes wrapped with elements, like:
|
|
13
|
+
* <LiveRegion>
|
|
14
|
+
* <span>{title}</span>
|
|
15
|
+
* <span><Details /></span>
|
|
16
|
+
* </LiveRegion>
|
|
17
|
+
* Or create a single text node if possible:
|
|
18
|
+
* <LiveRegion>
|
|
19
|
+
* {`${title} ${details}`}
|
|
20
|
+
* </LiveRegion>
|
|
21
|
+
*
|
|
22
|
+
* @param delay time value in milliseconds to set minimal time interval between announcements.
|
|
23
|
+
* @param assertive determine aria-live priority. Given value == false, aria-live have `polite` attribute value.
|
|
24
|
+
*/
|
|
25
|
+
export default memo(DynamicAriaLive);
|
|
26
|
+
function DynamicAriaLive(_a) {
|
|
27
|
+
var _b = _a.delay, delay = _b === void 0 ? 5000 : _b, children = _a.children, restProps = __rest(_a, ["delay", "children"]);
|
|
28
|
+
var sourceRef = useRef(null);
|
|
29
|
+
var targetRef = useRef(null);
|
|
30
|
+
var throttledUpdate = useMemo(function () {
|
|
31
|
+
return throttle(function () { return updateLiveRegion(targetRef, sourceRef); }, delay);
|
|
32
|
+
}, [delay]);
|
|
33
|
+
useEffect(function () {
|
|
34
|
+
throttledUpdate();
|
|
35
|
+
});
|
|
36
|
+
return (React.createElement(AriaLiveTag, __assign({ targetRef: targetRef, sourceRef: sourceRef }, restProps), children));
|
|
37
|
+
}
|
|
38
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/dynamic-aria-live/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;;AAEtC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,WAAW,MAAM,8BAA8B,CAAC;AAQvD;;;;;;;;;;;;;;;;GAgBG;AACH,eAAe,IAAI,CAAC,eAAe,CAAC,CAAC;AAErC,SAAS,eAAe,CAAC,EAA8D;IAA5D,IAAA,aAAY,EAAZ,KAAK,mBAAG,IAAI,KAAA,EAAE,QAAQ,cAAA,EAAK,SAAS,cAAtC,qBAAwC,CAAF;IAC7D,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAChD,IAAM,SAAS,GAAG,MAAM,CAAkB,IAAI,CAAC,CAAC;IAEhD,IAAM,eAAe,GAAG,OAAO,CAAC;QAC9B,OAAO,QAAQ,CAAC,cAAM,OAAA,gBAAgB,CAAC,SAAS,EAAE,SAAS,CAAC,EAAtC,CAAsC,EAAE,KAAK,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC;QACR,eAAe,EAAE,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,WAAW,aAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,IAAM,SAAS,GACnE,QAAQ,CACG,CACf,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { memo, useEffect, useMemo, useRef } from 'react';\nimport { throttle } from '../../utils/throttle';\nimport { ScreenreaderOnlyProps } from '../screenreader-only';\nimport { updateLiveRegion } from '../live-region/utils';\nimport AriaLiveTag from '../live-region/aria-liva-tag';\n\nexport interface DynamicAriaLiveProps extends ScreenreaderOnlyProps {\n assertive?: boolean;\n delay?: number;\n children: React.ReactNode;\n}\n\n/**\n * Dynamic aria live component is hidden in the layout, but visible for screen readers.\n * Purpose of this component is to announce recurring changes for a content.\n *\n * To avoid merging words, provide all text nodes wrapped with elements, like:\n * <LiveRegion>\n * <span>{title}</span>\n * <span><Details /></span>\n * </LiveRegion>\n * Or create a single text node if possible:\n * <LiveRegion>\n * {`${title} ${details}`}\n * </LiveRegion>\n *\n * @param delay time value in milliseconds to set minimal time interval between announcements.\n * @param assertive determine aria-live priority. Given value == false, aria-live have `polite` attribute value.\n */\nexport default memo(DynamicAriaLive);\n\nfunction DynamicAriaLive({ delay = 5000, children, ...restProps }: DynamicAriaLiveProps) {\n const sourceRef = useRef<HTMLSpanElement>(null);\n const targetRef = useRef<HTMLSpanElement>(null);\n\n const throttledUpdate = useMemo(() => {\n return throttle(() => updateLiveRegion(targetRef, sourceRef), delay);\n }, [delay]);\n\n useEffect(() => {\n throttledUpdate();\n });\n\n return (\n <AriaLiveTag targetRef={targetRef} sourceRef={sourceRef} {...restProps}>\n {children}\n </AriaLiveTag>\n );\n}\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/internal/components/interfaces.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/internal/components/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nexport type Offset = number | { x: number; y: number };\n"]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ScreenreaderOnlyProps } from '../screenreader-only/index.js';
|
|
3
|
+
export interface AriaLiveTagProps extends ScreenreaderOnlyProps {
|
|
4
|
+
assertive?: boolean;
|
|
5
|
+
visible?: boolean;
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
targetRef: React.RefObject<HTMLSpanElement>;
|
|
8
|
+
sourceRef: React.RefObject<HTMLSpanElement>;
|
|
9
|
+
}
|
|
10
|
+
declare const _default: React.MemoExoticComponent<typeof AriaLiveTag>;
|
|
11
|
+
export default _default;
|
|
12
|
+
declare function AriaLiveTag({ assertive, visible, targetRef, sourceRef, children, ...restProps }: AriaLiveTagProps): JSX.Element;
|
|
13
|
+
//# sourceMappingURL=aria-liva-tag.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"aria-liva-tag.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/live-region/aria-liva-tag.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAe,MAAM,OAAO,CAAC;AACpC,OAAyB,EAAE,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAGxF,MAAM,WAAW,gBAAiB,SAAQ,qBAAqB;IAC7D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;IAC5C,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;CAC7C;;AAED,wBAAiC;AAEjC,iBAAS,WAAW,CAAC,EACnB,SAAiB,EACjB,OAAe,EACf,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,SAAS,EACb,EAAE,gBAAgB,eAgBlB"}
|