@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.
Files changed (111) hide show
  1. package/area-chart/chart-container.d.ts.map +1 -1
  2. package/area-chart/chart-container.js +2 -1
  3. package/area-chart/chart-container.js.map +1 -1
  4. package/area-chart/model/interactions-store.d.ts.map +1 -1
  5. package/area-chart/model/interactions-store.js +1 -1
  6. package/area-chart/model/interactions-store.js.map +1 -1
  7. package/area-chart/model/use-chart-model.d.ts +1 -2
  8. package/area-chart/model/use-chart-model.d.ts.map +1 -1
  9. package/area-chart/model/use-chart-model.js +46 -10
  10. package/area-chart/model/use-chart-model.js.map +1 -1
  11. package/collection-preferences/index.d.ts +1 -1
  12. package/collection-preferences/index.d.ts.map +1 -1
  13. package/collection-preferences/index.js +10 -5
  14. package/collection-preferences/index.js.map +1 -1
  15. package/collection-preferences/interfaces.d.ts +17 -0
  16. package/collection-preferences/interfaces.d.ts.map +1 -1
  17. package/collection-preferences/interfaces.js.map +1 -1
  18. package/collection-preferences/styles.css.js +20 -19
  19. package/collection-preferences/styles.scoped.css +21 -20
  20. package/collection-preferences/styles.selectors.js +20 -19
  21. package/collection-preferences/utils.d.ts +6 -1
  22. package/collection-preferences/utils.d.ts.map +1 -1
  23. package/collection-preferences/utils.js +10 -1
  24. package/collection-preferences/utils.js.map +1 -1
  25. package/internal/base-component/styles.scoped.css +4 -0
  26. package/internal/components/chart-plot/focus-outline.d.ts +2 -1
  27. package/internal/components/chart-plot/focus-outline.d.ts.map +1 -1
  28. package/internal/components/chart-plot/focus-outline.js +6 -4
  29. package/internal/components/chart-plot/focus-outline.js.map +1 -1
  30. package/internal/components/chart-plot/index.d.ts +2 -1
  31. package/internal/components/chart-plot/index.d.ts.map +1 -1
  32. package/internal/components/chart-plot/index.js.map +1 -1
  33. package/internal/components/chart-plot/interfaces.d.ts +5 -0
  34. package/internal/components/chart-plot/interfaces.d.ts.map +1 -0
  35. package/internal/components/chart-plot/interfaces.js +2 -0
  36. package/internal/components/chart-plot/interfaces.js.map +1 -0
  37. package/internal/components/dynamic-aria-live/index.d.ts +28 -0
  38. package/internal/components/dynamic-aria-live/index.d.ts.map +1 -0
  39. package/internal/components/dynamic-aria-live/index.js +38 -0
  40. package/internal/components/dynamic-aria-live/index.js.map +1 -0
  41. package/internal/components/interfaces.d.ts +5 -0
  42. package/internal/components/interfaces.d.ts.map +1 -0
  43. package/internal/components/interfaces.js +2 -0
  44. package/internal/components/interfaces.js.map +1 -0
  45. package/internal/components/live-region/aria-liva-tag.d.ts +13 -0
  46. package/internal/components/live-region/aria-liva-tag.d.ts.map +1 -0
  47. package/internal/components/live-region/aria-liva-tag.js +18 -0
  48. package/internal/components/live-region/aria-liva-tag.js.map +1 -0
  49. package/internal/components/live-region/index.d.ts +34 -34
  50. package/internal/components/live-region/index.d.ts.map +1 -1
  51. package/internal/components/live-region/index.js +38 -61
  52. package/internal/components/live-region/index.js.map +1 -1
  53. package/internal/components/live-region/utils.d.ts +8 -0
  54. package/internal/components/live-region/utils.d.ts.map +1 -0
  55. package/internal/components/live-region/utils.js +24 -0
  56. package/internal/components/live-region/utils.js.map +1 -0
  57. package/internal/environment.js +1 -1
  58. package/internal/generated/theming/index.cjs +26 -0
  59. package/internal/generated/theming/index.js +26 -0
  60. package/internal/hooks/use-visual-mode/index.d.ts +3 -1
  61. package/internal/hooks/use-visual-mode/index.d.ts.map +1 -1
  62. package/internal/hooks/use-visual-mode/index.js +18 -11
  63. package/internal/hooks/use-visual-mode/index.js.map +1 -1
  64. package/internal/manifest.json +1 -1
  65. package/mixed-line-bar-chart/chart-container.d.ts +1 -2
  66. package/mixed-line-bar-chart/chart-container.d.ts.map +1 -1
  67. package/mixed-line-bar-chart/chart-container.js +55 -41
  68. package/mixed-line-bar-chart/chart-container.js.map +1 -1
  69. package/mixed-line-bar-chart/hooks/use-mouse-hover.d.ts +3 -4
  70. package/mixed-line-bar-chart/hooks/use-mouse-hover.d.ts.map +1 -1
  71. package/mixed-line-bar-chart/hooks/use-mouse-hover.js +22 -18
  72. package/mixed-line-bar-chart/hooks/use-mouse-hover.js.map +1 -1
  73. package/mixed-line-bar-chart/hooks/use-navigation.d.ts +6 -3
  74. package/mixed-line-bar-chart/hooks/use-navigation.d.ts.map +1 -1
  75. package/mixed-line-bar-chart/hooks/use-navigation.js +61 -31
  76. package/mixed-line-bar-chart/hooks/use-navigation.js.map +1 -1
  77. package/mixed-line-bar-chart/interfaces.d.ts +4 -0
  78. package/mixed-line-bar-chart/interfaces.d.ts.map +1 -1
  79. package/mixed-line-bar-chart/interfaces.js.map +1 -1
  80. package/mixed-line-bar-chart/internal.d.ts.map +1 -1
  81. package/mixed-line-bar-chart/internal.js +1 -1
  82. package/mixed-line-bar-chart/internal.js.map +1 -1
  83. package/package.json +1 -1
  84. package/progress-bar/index.d.ts.map +1 -1
  85. package/progress-bar/index.js +4 -1
  86. package/progress-bar/index.js.map +1 -1
  87. package/progress-bar/internal.js +2 -2
  88. package/progress-bar/internal.js.map +1 -1
  89. package/table/body-cell/index.d.ts +3 -1
  90. package/table/body-cell/index.d.ts.map +1 -1
  91. package/table/body-cell/index.js +2 -2
  92. package/table/body-cell/index.js.map +1 -1
  93. package/table/body-cell/styles.css.js +8 -7
  94. package/table/body-cell/styles.scoped.css +21 -18
  95. package/table/body-cell/styles.selectors.js +8 -7
  96. package/table/interfaces.d.ts +4 -0
  97. package/table/interfaces.d.ts.map +1 -1
  98. package/table/interfaces.js.map +1 -1
  99. package/table/internal.d.ts.map +1 -1
  100. package/table/internal.js +4 -3
  101. package/table/internal.js.map +1 -1
  102. package/table/use-sticky-header.d.ts.map +1 -1
  103. package/table/use-sticky-header.js +4 -1
  104. package/table/use-sticky-header.js.map +1 -1
  105. package/test-utils/dom/collection-preferences/index.d.ts +1 -0
  106. package/test-utils/dom/collection-preferences/index.js +3 -0
  107. package/test-utils/dom/collection-preferences/index.js.map +1 -1
  108. package/test-utils/selectors/collection-preferences/index.d.ts +1 -0
  109. package/test-utils/selectors/collection-preferences/index.js +3 -0
  110. package/test-utils/selectors/collection-preferences/index.js.map +1 -1
  111. 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-content_tc96w_1qp7a_185",
5
- "visible-content-toggle": "awsui_visible-content-toggle_tc96w_1qp7a_186",
6
- "visible-content-groups": "awsui_visible-content-groups_tc96w_1qp7a_187",
7
- "visible-content-group": "awsui_visible-content-group_tc96w_1qp7a_187",
8
- "visible-content-title": "awsui_visible-content-title_tc96w_1qp7a_192",
9
- "visible-content-group-label": "awsui_visible-content-group-label_tc96w_1qp7a_200",
10
- "visible-content-option": "awsui_visible-content-option_tc96w_1qp7a_206",
11
- "visible-content-option-label": "awsui_visible-content-option-label_tc96w_1qp7a_217",
12
- "root": "awsui_root_tc96w_1qp7a_224",
13
- "modal-root": "awsui_modal-root_tc96w_1qp7a_225",
14
- "trigger-button": "awsui_trigger-button_tc96w_1qp7a_226",
15
- "cancel-button": "awsui_cancel-button_tc96w_1qp7a_227",
16
- "confirm-button": "awsui_confirm-button_tc96w_1qp7a_228",
17
- "custom": "awsui_custom_tc96w_1qp7a_229",
18
- "second-column-small": "awsui_second-column-small_tc96w_1qp7a_233",
19
- "wrap-lines": "awsui_wrap-lines_tc96w_1qp7a_237",
20
- "page-size": "awsui_page-size_tc96w_1qp7a_238",
21
- "page-size-form-field": "awsui_page-size-form-field_tc96w_1qp7a_239",
22
- "page-size-radio-group": "awsui_page-size-radio-group_tc96w_1qp7a_240"
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-content_tc96w_1qp7a_185:not(#\9),
186
- .awsui_visible-content-toggle_tc96w_1qp7a_186:not(#\9),
187
- .awsui_visible-content-groups_tc96w_1qp7a_187:not(#\9),
188
- .awsui_visible-content-group_tc96w_1qp7a_187:not(#\9) {
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-title_tc96w_1qp7a_192:not(#\9) {
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-label_tc96w_1qp7a_200:not(#\9) {
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-option_tc96w_1qp7a_206:not(#\9) {
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-option_tc96w_1qp7a_206:not(#\9):last-child {
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-label_tc96w_1qp7a_217:not(#\9) {
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
- .awsui_root_tc96w_1qp7a_224:not(#\9),
225
- .awsui_modal-root_tc96w_1qp7a_225:not(#\9),
226
- .awsui_trigger-button_tc96w_1qp7a_226:not(#\9),
227
- .awsui_cancel-button_tc96w_1qp7a_227:not(#\9),
228
- .awsui_confirm-button_tc96w_1qp7a_228:not(#\9),
229
- .awsui_custom_tc96w_1qp7a_229:not(#\9) {
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-small_tc96w_1qp7a_233:not(#\9) {
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-lines_tc96w_1qp7a_237:not(#\9),
238
- .awsui_page-size_tc96w_1qp7a_238:not(#\9),
239
- .awsui_page-size-form-field_tc96w_1qp7a_239:not(#\9),
240
- .awsui_page-size-radio-group_tc96w_1qp7a_240:not(#\9) {
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-content_tc96w_1qp7a_185",
6
- "visible-content-toggle": "awsui_visible-content-toggle_tc96w_1qp7a_186",
7
- "visible-content-groups": "awsui_visible-content-groups_tc96w_1qp7a_187",
8
- "visible-content-group": "awsui_visible-content-group_tc96w_1qp7a_187",
9
- "visible-content-title": "awsui_visible-content-title_tc96w_1qp7a_192",
10
- "visible-content-group-label": "awsui_visible-content-group-label_tc96w_1qp7a_200",
11
- "visible-content-option": "awsui_visible-content-option_tc96w_1qp7a_206",
12
- "visible-content-option-label": "awsui_visible-content-option-label_tc96w_1qp7a_217",
13
- "root": "awsui_root_tc96w_1qp7a_224",
14
- "modal-root": "awsui_modal-root_tc96w_1qp7a_225",
15
- "trigger-button": "awsui_trigger-button_tc96w_1qp7a_226",
16
- "cancel-button": "awsui_cancel-button_tc96w_1qp7a_227",
17
- "confirm-button": "awsui_confirm-button_tc96w_1qp7a_228",
18
- "custom": "awsui_custom_tc96w_1qp7a_229",
19
- "second-column-small": "awsui_second-column-small_tc96w_1qp7a_233",
20
- "wrap-lines": "awsui_wrap-lines_tc96w_1qp7a_237",
21
- "page-size": "awsui_page-size_tc96w_1qp7a_238",
22
- "page-size-form-field": "awsui_page-size-form-field_tc96w_1qp7a_239",
23
- "page-size-radio-group": "awsui_page-size-radio-group_tc96w_1qp7a_240"
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,qDAKzB,2BAA2B,WAAW,KAAG,2BAA2B,WAKrE,CAAC;AAEH,eAAO,MAAM,gBAAgB,YAClB,2BAA2B,WAAW,WACtC,2BAA2B,WAAW,KAC9C,2BAA2B,WAK5B,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,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"}
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":"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","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 visibleContent,\n custom,\n}: CollectionPreferencesProps.Preferences): CollectionPreferencesProps.Preferences => ({\n pageSize,\n wrapLines,\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 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 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"]}
1
+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/collection-preferences/utils.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, { 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?: number;
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;AAKjD,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"}
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
- el.setAttribute('x', (position.x - offset).toString());
26
- el.setAttribute('y', (position.y - offset).toString());
27
- el.setAttribute('width', (position.width + 2 * offset).toString());
28
- el.setAttribute('height', (position.height + 2 * offset).toString());
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;AAQ9D,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,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACvD,EAAE,CAAC,YAAY,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACvD,EAAE,CAAC,YAAY,CAAC,OAAO,EAAE,CAAC,QAAQ,CAAC,KAAK,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACnE,EAAE,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;IACrE,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';\n\nexport interface FocusOutlineProps {\n elementKey?: null | string | number | boolean;\n elementRef?: React.RefObject<SVGSVGElement | SVGGElement>;\n offset?: number;\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: number\n) {\n el.setAttribute('x', (position.x - offset).toString());\n el.setAttribute('y', (position.y - offset).toString());\n el.setAttribute('width', (position.width + 2 * offset).toString());\n el.setAttribute('height', (position.height + 2 * offset).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
+ {"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?: number;
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;AAejF,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
+ {"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":"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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';\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,5 @@
1
+ export type Offset = number | {
2
+ x: number;
3
+ y: number;
4
+ };
5
+ //# sourceMappingURL=interfaces.d.ts.map
@@ -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,2 @@
1
+ export {};
2
+ //# sourceMappingURL=interfaces.js.map
@@ -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,5 @@
1
+ export type Offset = number | {
2
+ x: number;
3
+ y: number;
4
+ };
5
+ //# sourceMappingURL=interfaces.d.ts.map
@@ -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,2 @@
1
+ export {};
2
+ //# sourceMappingURL=interfaces.js.map
@@ -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"}