npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.140 → 3.0.141 - Mend

@cloudscape-design/components-themeable 3.0.140 → 3.0.141

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 (88) hide show

package/lib/internal/template/collection-preferences/interfaces.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/collection-preferences/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface CollectionPreferencesProps<CustomPreferenceType = any> extends BaseComponentProps {\n /*\n Specifies the title of the preferences modal dialog. It is also used as an `aria-label` for the trigger button.\n /\n title: string;\n /\n Label of the confirm button in the modal footer.\n /\n confirmLabel: string;\n /\n Label of the cancel button in the modal footer.\n /\n cancelLabel: string;\n /\n Determines whether the preferences trigger button is disabled.\n /\n disabled?: boolean;\n /\n Configures the built-in \"page size selection\" preference.\n \n If you set it, the component displays this preference in the modal.\n \n It contains the following:\n * - `title` (string) - Specifies the text displayed at the top of the preference.\n * - `options` - Specifies an array of options for page size selection. Each entry contains:\n * - `value` (number) - The value for the radio button (that is, the number of items per page).\n * - `label` (string) - A label for the radio button (for example, \"10 resources\").\n \n You must set the current value in the `preferences.pageSize` property.\n /\n pageSizePreference?: CollectionPreferencesProps.PageSizePreference;\n /\n Configures the built-in \"wrap lines\" preference.\n \n If you set it, the component displays this preference in the modal.\n \n It contains the following:\n * - `label` (string) - Specifies the label for the option checkbox.\n * - `description` (string) - Specifies the text displayed below the checkbox label.\n \n You must set the current value in the `preferences.wrapLines` property.\n /\n wrapLinesPreference?: CollectionPreferencesProps.WrapLinesPreference;\n /\n Configures the built-in \"visible content selection\" preference (for example, visible columns in a table).\n \n If you set it, the component displays this preference in the modal.\n \n It contains the following:\n * - `title` (string) - Specifies the text displayed at the top of the preference.\n * - `options` - Specifies an array of groups of options for visible content selection.\n \n Each group of options contains the following:\n * - `label` (string) - The text to display as a title for the options group.\n * - `options` - Specifies an aray of options in the group. Each option contains the following:\n * - `id` (string) - Corresponds to a column `id` for tables or to a section `id` for cards.\n * - `label` (string) - Specifies a short description of the content.\n * - `editable` (boolean) - (Optional) Determines whether the user is able to toggle its visibility. This is `true` by default.\n \n You must set the current list of visible content `id`s in the `preferences.visibleContent` property.\n /\n visibleContentPreference?: CollectionPreferencesProps.VisibleContentPreference;\n /\n Specifies the current preference values. This includes both built-in and custom preferences.\n \n It contains the following:\n * - `pageSize` (number) - (Optional)\n * - `wrapLines` (boolean) - (Optional)\n * - `visibleContent` (ReadonlyArray<string>) - Specifies the list of visible content `id`s. The order of the `id`s does not influence the display.\n * - `custom` (CustomPreferenceType) - Specifies the value for your custom preference.\n /\n preferences?: CollectionPreferencesProps.Preferences<CustomPreferenceType>;\n /\n Configures custom preferences. The function receives two parameters:\n \n - `customValue` (CustomPreferenceType) - Current value for your custom preference. It is initialized using the value you provide in `preferences.custom`.\n * - `setCustomValue` - A function that is called to notify a state update.\n \n It should return the content of your custom preference, for example:\n * ```\n * (customValue, setCustomValue) => (\n * <Checkbox checked={customValue} onChange={({ detail }) => setCustomValue(detail.checked)} />\n * )\n * ```\n \n When the user confirms the changes, the new value is passed in the `detail.custom` property of the `onConfirm` listener.\n * When the user cancels the changes, the `customValue` is reset to the one present in `preferences.custom` property.\n \n Display\n * - If any of the built-in preferences (`pageSizePreference`, `wrapLinesPreference`, or `visibleContentPreference`) are displayed,\n * the custom content is displayed at the bottom of the left column within the modal.\n * - If no built-in preference is displayed, the custom content occupies the whole modal.\n /\n customPreference?: (\n customValue: CustomPreferenceType,\n setCustomValue: React.Dispatch<CustomPreferenceType>\n ) => React.ReactNode;\n /\n Called when the user cancels a preference change using the cancel button in the modal footer or by dismissing the modal.\n /\n onCancel?: NonCancelableEventHandler;\n /\n Called when the user confirms a preference change using the confirm button in the modal footer.\n \n The event `detail` contains the following:\n * - `pageSize` (number) - (Optional) The selected page size value. Available only if you specify the `pageSizePreference` property.\n * - `wrapLines` (boolean) - (Optional) The current line wrapping preference value. Available only if you specify the `wrapLinesPreference` property.\n * - `visibleContent` (ReadonlyArray<string>) - (Optional) The list of selected content `id`s. Available only if you specify the `visibleContentPreference` property.\n * - `custom` (CustomPreferenceType) - (Optional) The selected value for your custom preference.\n \n The values for all configured preferences are present even if the user didn't change their values.\n */\n onConfirm?: NonCancelableEventHandler<CollectionPreferencesProps.Preferences<CustomPreferenceType>>;\n}\n\nexport namespace CollectionPreferencesProps {\n export interface Preferences<CustomPreferenceType = any> {\n pageSize?: number;\n wrapLines?: boolean;\n visibleContent?: ReadonlyArray<string>;\n custom?: CustomPreferenceType;\n }\n\n export interface VisibleContentPreference {\n title: string;\n options: ReadonlyArray<CollectionPreferencesProps.VisibleContentOptionsGroup>;\n }\n\n export interface VisibleContentOptionsGroup {\n label: string;\n options: ReadonlyArray<CollectionPreferencesProps.VisibleContentOption>;\n }\n\n export interface VisibleContentOption {\n id: string;\n label: string;\n editable?: boolean;\n }\n\n export interface PageSizePreference {\n title: string;\n options: ReadonlyArray<PageSizeOption>;\n }\n\n export interface PageSizeOption {\n value: number;\n label: string;\n }\n\n export interface WrapLinesPreference {\n label: string;\n description: string;\n }\n}\n"]}
1	+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/collection-preferences/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface CollectionPreferencesProps<CustomPreferenceType = any> extends BaseComponentProps {\n /*\n Specifies the title of the preferences modal dialog. It is also used as an `aria-label` for the trigger button.\n /\n title: string;\n /\n Label of the confirm button in the modal footer.\n /\n confirmLabel: string;\n /\n Label of the cancel button in the modal footer.\n /\n cancelLabel: string;\n /\n Determines whether the preferences trigger button is disabled.\n /\n disabled?: boolean;\n /\n Configures the built-in \"page size selection\" preference.\n \n If you set it, the component displays this preference in the modal.\n \n It contains the following:\n * - `title` (string) - Specifies the text displayed at the top of the preference.\n * - `options` - Specifies an array of options for page size selection. Each entry contains:\n * - `value` (number) - The value for the radio button (that is, the number of items per page).\n * - `label` (string) - A label for the radio button (for example, \"10 resources\").\n \n You must set the current value in the `preferences.pageSize` property.\n /\n pageSizePreference?: CollectionPreferencesProps.PageSizePreference;\n /\n Configures the built-in \"wrap lines\" preference.\n \n If you set it, the component displays this preference in the modal.\n \n It contains the following:\n * - `label` (string) - Specifies the label for the option checkbox.\n * - `description` (string) - Specifies the text displayed below the checkbox label.\n \n You must set the current value in the `preferences.wrapLines` property.\n /\n wrapLinesPreference?: CollectionPreferencesProps.WrapLinesPreference;\n /\n Configures the built-in \"striped rows\" preference.\n \n If you set it, the component displays this preference in the modal.\n \n It contains the following:\n * - `label` (string) - Specifies the label for the option checkbox.\n * - `description` (string) - Specifies the text displayed below the checkbox label.\n \n You must set the current value in the `preferences.stripedRows` property.\n /\n stripedRowsPreference?: CollectionPreferencesProps.StripedRowsPreference;\n /\n Configures the built-in \"visible content selection\" preference (for example, visible columns in a table).\n \n If you set it, the component displays this preference in the modal.\n \n It contains the following:\n * - `title` (string) - Specifies the text displayed at the top of the preference.\n * - `options` - Specifies an array of groups of options for visible content selection.\n \n Each group of options contains the following:\n * - `label` (string) - The text to display as a title for the options group.\n * - `options` - Specifies an aray of options in the group. Each option contains the following:\n * - `id` (string) - Corresponds to a column `id` for tables or to a section `id` for cards.\n * - `label` (string) - Specifies a short description of the content.\n * - `editable` (boolean) - (Optional) Determines whether the user is able to toggle its visibility. This is `true` by default.\n \n You must set the current list of visible content `id`s in the `preferences.visibleContent` property.\n /\n visibleContentPreference?: CollectionPreferencesProps.VisibleContentPreference;\n /\n Specifies the current preference values. This includes both built-in and custom preferences.\n \n It contains the following:\n * - `pageSize` (number) - (Optional)\n * - `wrapLines` (boolean) - (Optional)\n * - `visibleContent` (ReadonlyArray<string>) - Specifies the list of visible content `id`s. The order of the `id`s does not influence the display.\n * - `custom` (CustomPreferenceType) - Specifies the value for your custom preference.\n /\n preferences?: CollectionPreferencesProps.Preferences<CustomPreferenceType>;\n /\n Configures custom preferences. The function receives two parameters:\n \n - `customValue` (CustomPreferenceType) - Current value for your custom preference. It is initialized using the value you provide in `preferences.custom`.\n * - `setCustomValue` - A function that is called to notify a state update.\n \n It should return the content of your custom preference, for example:\n * ```\n * (customValue, setCustomValue) => (\n * <Checkbox checked={customValue} onChange={({ detail }) => setCustomValue(detail.checked)} />\n * )\n * ```\n \n When the user confirms the changes, the new value is passed in the `detail.custom` property of the `onConfirm` listener.\n * When the user cancels the changes, the `customValue` is reset to the one present in `preferences.custom` property.\n \n Display\n * - If any of the built-in preferences (`pageSizePreference`, `wrapLinesPreference`, or `visibleContentPreference`) are displayed,\n * the custom content is displayed at the bottom of the left column within the modal.\n * - If no built-in preference is displayed, the custom content occupies the whole modal.\n /\n customPreference?: (\n customValue: CustomPreferenceType,\n setCustomValue: React.Dispatch<CustomPreferenceType>\n ) => React.ReactNode;\n /\n Called when the user cancels a preference change using the cancel button in the modal footer or by dismissing the modal.\n /\n onCancel?: NonCancelableEventHandler;\n /\n Called when the user confirms a preference change using the confirm button in the modal footer.\n \n The event `detail` contains the following:\n * - `pageSize` (number) - (Optional) The selected page size value. Available only if you specify the `pageSizePreference` property.\n * - `wrapLines` (boolean) - (Optional) The current line wrapping preference value. Available only if you specify the `wrapLinesPreference` property.\n * - `visibleContent` (ReadonlyArray<string>) - (Optional) The list of selected content `id`s. Available only if you specify the `visibleContentPreference` property.\n * - `custom` (CustomPreferenceType) - (Optional) The selected value for your custom preference.\n \n The values for all configured preferences are present even if the user didn't change their values.\n */\n onConfirm?: NonCancelableEventHandler<CollectionPreferencesProps.Preferences<CustomPreferenceType>>;\n}\n\nexport namespace CollectionPreferencesProps {\n export interface Preferences<CustomPreferenceType = any> {\n pageSize?: number;\n wrapLines?: boolean;\n stripedRows?: boolean;\n visibleContent?: ReadonlyArray<string>;\n custom?: CustomPreferenceType;\n }\n\n export interface VisibleContentPreference {\n title: string;\n options: ReadonlyArray<CollectionPreferencesProps.VisibleContentOptionsGroup>;\n }\n\n export interface VisibleContentOptionsGroup {\n label: string;\n options: ReadonlyArray<CollectionPreferencesProps.VisibleContentOption>;\n }\n\n export interface VisibleContentOption {\n id: string;\n label: string;\n editable?: boolean;\n }\n\n export interface PageSizePreference {\n title: string;\n options: ReadonlyArray<PageSizeOption>;\n }\n\n export interface PageSizeOption {\n value: number;\n label: string;\n }\n\n export interface WrapLinesPreference {\n label: string;\n description: string;\n }\n\n export interface StripedRowsPreference {\n label: string;\n description: string;\n }\n}\n"]}

package/lib/internal/template/collection-preferences/styles.css.js CHANGED Viewed

@@ -1,24 +1,25 @@
     import './styles.scoped.css';
     export default {
-  "visible-content": "awsui_visible-content_tc96w_mj68r_185",
-  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_mj68r_186",
-  "visible-content-groups": "awsui_visible-content-groups_tc96w_mj68r_187",
-  "visible-content-group": "awsui_visible-content-group_tc96w_mj68r_187",
-  "visible-content-title": "awsui_visible-content-title_tc96w_mj68r_192",
-  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_mj68r_200",
-  "visible-content-option": "awsui_visible-content-option_tc96w_mj68r_206",
-  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_mj68r_217",
-  "root": "awsui_root_tc96w_mj68r_224",
-  "modal-root": "awsui_modal-root_tc96w_mj68r_225",
-  "trigger-button": "awsui_trigger-button_tc96w_mj68r_226",
-  "cancel-button": "awsui_cancel-button_tc96w_mj68r_227",
-  "confirm-button": "awsui_confirm-button_tc96w_mj68r_228",
-  "custom": "awsui_custom_tc96w_mj68r_229",
-  "second-column-small": "awsui_second-column-small_tc96w_mj68r_233",
-  "wrap-lines": "awsui_wrap-lines_tc96w_mj68r_237",
-  "page-size": "awsui_page-size_tc96w_mj68r_238",
-  "page-size-form-field": "awsui_page-size-form-field_tc96w_mj68r_239",
-  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_mj68r_240"
+  "visible-content": "awsui_visible-content_tc96w_rdaxh_185",
+  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_rdaxh_186",
+  "visible-content-groups": "awsui_visible-content-groups_tc96w_rdaxh_187",
+  "visible-content-group": "awsui_visible-content-group_tc96w_rdaxh_187",
+  "visible-content-title": "awsui_visible-content-title_tc96w_rdaxh_192",
+  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_rdaxh_200",
+  "visible-content-option": "awsui_visible-content-option_tc96w_rdaxh_206",
+  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_rdaxh_217",
+  "root": "awsui_root_tc96w_rdaxh_224",
+  "modal-root": "awsui_modal-root_tc96w_rdaxh_225",
+  "trigger-button": "awsui_trigger-button_tc96w_rdaxh_226",
+  "cancel-button": "awsui_cancel-button_tc96w_rdaxh_227",
+  "confirm-button": "awsui_confirm-button_tc96w_rdaxh_228",
+  "custom": "awsui_custom_tc96w_rdaxh_229",
+  "second-column-small": "awsui_second-column-small_tc96w_rdaxh_233",
+  "wrap-lines": "awsui_wrap-lines_tc96w_rdaxh_237",
+  "striped-rows": "awsui_striped-rows_tc96w_rdaxh_238",
+  "page-size": "awsui_page-size_tc96w_rdaxh_239",
+  "page-size-form-field": "awsui_page-size-form-field_tc96w_rdaxh_240",
+  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_rdaxh_241"
 };

package/lib/internal/template/collection-preferences/styles.scoped.css CHANGED Viewed

@@ -182,14 +182,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_visible-content_tc96w_mj68r_185:not(#\9),
-.awsui_visible-content-toggle_tc96w_mj68r_186:not(#\9),
-.awsui_visible-content-groups_tc96w_mj68r_187:not(#\9),
-.awsui_visible-content-group_tc96w_mj68r_187:not(#\9) {
+.awsui_visible-content_tc96w_rdaxh_185:not(#\9),
+.awsui_visible-content-toggle_tc96w_rdaxh_186:not(#\9),
+.awsui_visible-content-groups_tc96w_rdaxh_187:not(#\9),
+.awsui_visible-content-group_tc96w_rdaxh_187:not(#\9) {
   /* used in test-utils */
 }
-.awsui_visible-content-title_tc96w_mj68r_192:not(#\9) {
+.awsui_visible-content-title_tc96w_rdaxh_192:not(#\9) {
   font-size: var(--font-body-m-size-sregvd, 14px);
   line-height: var(--font-body-m-line-height-i7xxvv, 22px);
   font-weight: var(--font-display-label-weight-tjy9e4, 400);
@@ -197,46 +197,47 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-bottom: var(--space-scaled-l-t03y3z, 20px);
 }
-.awsui_visible-content-group-label_tc96w_mj68r_200:not(#\9) {
+.awsui_visible-content-group-label_tc96w_rdaxh_200:not(#\9) {
   color: var(--color-text-group-label-5rxtyp, #545b64);
   padding-bottom: var(--space-xs-rsr2qu, 8px);
   border-bottom: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
 }
-.awsui_visible-content-option_tc96w_mj68r_206:not(#\9) {
+.awsui_visible-content-option_tc96w_rdaxh_206:not(#\9) {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
   padding: var(--space-xs-rsr2qu, 8px) 0px var(--space-xs-rsr2qu, 8px) var(--space-scaled-l-t03y3z, 20px);
   border-bottom: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
 }
-.awsui_visible-content-option_tc96w_mj68r_206:not(#\9):last-child {
+.awsui_visible-content-option_tc96w_rdaxh_206:not(#\9):last-child {
   border-bottom: none;
 }
-.awsui_visible-content-option-label_tc96w_mj68r_217:not(#\9) {
+.awsui_visible-content-option-label_tc96w_rdaxh_217:not(#\9) {
   overflow: hidden;
   text-overflow: ellipsis;
   padding-right: var(--space-l-4vl6xu, 20px);
   flex-grow: 1;
 }
-.awsui_root_tc96w_mj68r_224:not(#\9),
-.awsui_modal-root_tc96w_mj68r_225:not(#\9),
-.awsui_trigger-button_tc96w_mj68r_226:not(#\9),
-.awsui_cancel-button_tc96w_mj68r_227:not(#\9),
-.awsui_confirm-button_tc96w_mj68r_228:not(#\9),
-.awsui_custom_tc96w_mj68r_229:not(#\9) {
+.awsui_root_tc96w_rdaxh_224:not(#\9),
+.awsui_modal-root_tc96w_rdaxh_225:not(#\9),
+.awsui_trigger-button_tc96w_rdaxh_226:not(#\9),
+.awsui_cancel-button_tc96w_rdaxh_227:not(#\9),
+.awsui_confirm-button_tc96w_rdaxh_228:not(#\9),
+.awsui_custom_tc96w_rdaxh_229:not(#\9) {
   /* used in test-utils */
 }
-.awsui_second-column-small_tc96w_mj68r_233:not(#\9) {
+.awsui_second-column-small_tc96w_rdaxh_233:not(#\9) {
   padding-top: calc(2 * var(--space-scaled-l-t03y3z, 20px));
 }
-.awsui_wrap-lines_tc96w_mj68r_237:not(#\9),
-.awsui_page-size_tc96w_mj68r_238:not(#\9),
-.awsui_page-size-form-field_tc96w_mj68r_239:not(#\9),
-.awsui_page-size-radio-group_tc96w_mj68r_240:not(#\9) {
+.awsui_wrap-lines_tc96w_rdaxh_237:not(#\9),
+.awsui_striped-rows_tc96w_rdaxh_238:not(#\9),
+.awsui_page-size_tc96w_rdaxh_239:not(#\9),
+.awsui_page-size-form-field_tc96w_rdaxh_240:not(#\9),
+.awsui_page-size-radio-group_tc96w_rdaxh_241:not(#\9) {
   /* used in test-utils */
 }

package/lib/internal/template/collection-preferences/styles.selectors.js CHANGED Viewed

@@ -2,24 +2,25 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "visible-content": "awsui_visible-content_tc96w_mj68r_185",
-  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_mj68r_186",
-  "visible-content-groups": "awsui_visible-content-groups_tc96w_mj68r_187",
-  "visible-content-group": "awsui_visible-content-group_tc96w_mj68r_187",
-  "visible-content-title": "awsui_visible-content-title_tc96w_mj68r_192",
-  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_mj68r_200",
-  "visible-content-option": "awsui_visible-content-option_tc96w_mj68r_206",
-  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_mj68r_217",
-  "root": "awsui_root_tc96w_mj68r_224",
-  "modal-root": "awsui_modal-root_tc96w_mj68r_225",
-  "trigger-button": "awsui_trigger-button_tc96w_mj68r_226",
-  "cancel-button": "awsui_cancel-button_tc96w_mj68r_227",
-  "confirm-button": "awsui_confirm-button_tc96w_mj68r_228",
-  "custom": "awsui_custom_tc96w_mj68r_229",
-  "second-column-small": "awsui_second-column-small_tc96w_mj68r_233",
-  "wrap-lines": "awsui_wrap-lines_tc96w_mj68r_237",
-  "page-size": "awsui_page-size_tc96w_mj68r_238",
-  "page-size-form-field": "awsui_page-size-form-field_tc96w_mj68r_239",
-  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_mj68r_240"
+  "visible-content": "awsui_visible-content_tc96w_rdaxh_185",
+  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_rdaxh_186",
+  "visible-content-groups": "awsui_visible-content-groups_tc96w_rdaxh_187",
+  "visible-content-group": "awsui_visible-content-group_tc96w_rdaxh_187",
+  "visible-content-title": "awsui_visible-content-title_tc96w_rdaxh_192",
+  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_rdaxh_200",
+  "visible-content-option": "awsui_visible-content-option_tc96w_rdaxh_206",
+  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_rdaxh_217",
+  "root": "awsui_root_tc96w_rdaxh_224",
+  "modal-root": "awsui_modal-root_tc96w_rdaxh_225",
+  "trigger-button": "awsui_trigger-button_tc96w_rdaxh_226",
+  "cancel-button": "awsui_cancel-button_tc96w_rdaxh_227",
+  "confirm-button": "awsui_confirm-button_tc96w_rdaxh_228",
+  "custom": "awsui_custom_tc96w_rdaxh_229",
+  "second-column-small": "awsui_second-column-small_tc96w_rdaxh_233",
+  "wrap-lines": "awsui_wrap-lines_tc96w_rdaxh_237",
+  "striped-rows": "awsui_striped-rows_tc96w_rdaxh_238",
+  "page-size": "awsui_page-size_tc96w_rdaxh_239",
+  "page-size-form-field": "awsui_page-size-form-field_tc96w_rdaxh_240",
+  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_rdaxh_241"
 };

package/lib/internal/template/collection-preferences/utils.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CollectionPreferencesProps } from './interfaces';
-export declare const copyPreferences: ({ pageSize, wrapLines, visibleContent, custom, }: CollectionPreferencesProps.Preferences) => CollectionPreferencesProps.Preferences;
+export declare const copyPreferences: ({ pageSize, wrapLines, stripedRows, visibleContent, custom, }: CollectionPreferencesProps.Preferences) => CollectionPreferencesProps.Preferences;
 export declare const mergePreferences: (newPref: CollectionPreferencesProps.Preferences, oldPref: CollectionPreferencesProps.Preferences) => CollectionPreferencesProps.Preferences;
 interface ModalContentLayoutProps {
     left: React.ReactNode;
@@ -17,6 +17,11 @@ interface WrapLinesPreferenceProps extends CollectionPreferencesProps.WrapLinesP
     value?: boolean;
 }
 export declare const WrapLinesPreference: ({ label, description, value, onChange }: WrapLinesPreferenceProps) => JSX.Element;
+interface StripedRowsPreferenceProps extends CollectionPreferencesProps.StripedRowsPreference {
+    onChange: (value: boolean) => void;
+    value?: boolean;
+}
+export declare const StripedRowsPreference: ({ label, description, value, onChange }: StripedRowsPreferenceProps) => JSX.Element;
 interface CustomPreferenceProps<T = any> extends Pick<CollectionPreferencesProps<T>, 'customPreference'> {
     onChange: (value: T) => void;
     value: T;

package/lib/internal/template/collection-preferences/utils.d.ts.map CHANGED Viewed

	@@ -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"}

package/lib/internal/template/collection-preferences/utils.js CHANGED Viewed

@@ -8,10 +8,11 @@ import InternalRadioGroup from '../radio-group/internal';
 import { useContainerBreakpoints } from '../internal/hooks/container-queries';
 import styles from './styles.css.js';
 export var copyPreferences = function (_a) {
-    var pageSize = _a.pageSize, wrapLines = _a.wrapLines, visibleContent = _a.visibleContent, custom = _a.custom;
+    var pageSize = _a.pageSize, wrapLines = _a.wrapLines, stripedRows = _a.stripedRows, visibleContent = _a.visibleContent, custom = _a.custom;
     return ({
         pageSize: pageSize,
         wrapLines: wrapLines,
+        stripedRows: stripedRows,
         visibleContent: visibleContent,
         custom: custom
     });
@@ -19,6 +20,7 @@ export var copyPreferences = function (_a) {
 export var mergePreferences = function (newPref, oldPref) { return ({
     pageSize: newPref.pageSize !== undefined ? newPref.pageSize : oldPref.pageSize,
     wrapLines: newPref.wrapLines !== undefined ? newPref.wrapLines : oldPref.wrapLines,
+    stripedRows: newPref.stripedRows !== undefined ? newPref.stripedRows : oldPref.stripedRows,
     visibleContent: newPref.visibleContent !== undefined ? newPref.visibleContent : oldPref.visibleContent,
     custom: newPref.custom !== undefined ? newPref.custom : oldPref.custom
 }); };
@@ -56,6 +58,13 @@ export var WrapLinesPreference = function (_a) {
             return onChange(detail.checked);
         }, className: styles['wrap-lines'] }, label));
 };
+export var StripedRowsPreference = function (_a) {
+    var label = _a.label, description = _a.description, value = _a.value, onChange = _a.onChange;
+    return (React.createElement(InternalCheckbox, { checked: !!value, description: description, onChange: function (_a) {
+            var detail = _a.detail;
+            return onChange(detail.checked);
+        }, className: styles['striped-rows'] }, label));
+};
 export var CustomPreference = function (_a) {
     var value = _a.value, customPreference = _a.customPreference, onChange = _a.onChange;
     var _b = useState(value), customState = _b[0], setCustomState = _b[1];

package/lib/internal/template/collection-preferences/utils.js.map CHANGED Viewed

	@@ -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,~~EAKS~~;~~QAJvC~~,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,MAAM,YAAA;IAC8E,OAAA,CAAC;QACrF,QAAQ,UAAA;QACR,SAAS,WAAA;QACT,cAAc,gBAAA;QACd,MAAM,QAAA;KACP,CAAC;~~AALoF~~,~~CAKpF~~,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,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,~~EAL2C~~,~~CAK3C~~,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;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 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"]}

package/lib/internal/template/internal/base-component/styles.scoped.css CHANGED Viewed

@@ -165,6 +165,7 @@
   --color-background-button-primary-disabled-2xivjm:#ffffff;
   --color-background-button-primary-hover-qli9yh:#0a4a74;
   --color-background-calendar-today-wm2baz:#f2f3f3;
+  --color-background-cell-shaded-y6pwcp:#f2f3f3;
   --color-background-code-editor-gutter-active-line-default-iqj33p:#687078;
   --color-background-code-editor-gutter-active-line-error-stt57c:#d13212;
   --color-background-code-editor-gutter-default-jzy459:#f2f3f3;
@@ -738,6 +739,7 @@
   --color-background-button-primary-disabled-2xivjm:#2a2e33;
   --color-background-button-primary-hover-qli9yh:#00a1c9;
   --color-background-calendar-today-wm2baz:#16191f;
+  --color-background-cell-shaded-y6pwcp:#16191f;
   --color-background-code-editor-gutter-active-line-default-iqj33p:#879596;
   --color-background-code-editor-gutter-active-line-error-stt57c:#ff5d64;
   --color-background-code-editor-gutter-default-jzy459:#21252c;
@@ -968,6 +970,7 @@
   --color-background-button-primary-disabled-2xivjm:#2a2e33;
   --color-background-button-primary-hover-qli9yh:#00a1c9;
   --color-background-calendar-today-wm2baz:#16191f;
+  --color-background-cell-shaded-y6pwcp:#16191f;
   --color-background-code-editor-gutter-active-line-default-iqj33p:#879596;
   --color-background-code-editor-gutter-active-line-error-stt57c:#ff5d64;
   --color-background-code-editor-gutter-default-jzy459:#21252c;
@@ -1143,6 +1146,7 @@
   --color-background-button-primary-disabled-2xivjm:#e9ebed;
   --color-background-button-primary-hover-qli9yh:#033160;
   --color-background-calendar-today-wm2baz:#f4f4f4;
+  --color-background-cell-shaded-y6pwcp:#f8f8f8;
   --color-background-code-editor-gutter-active-line-default-iqj33p:#5f6b7a;
   --color-background-code-editor-gutter-active-line-error-stt57c:#d91515;
   --color-background-code-editor-gutter-default-jzy459:#f4f4f4;
@@ -1469,6 +1473,7 @@
   --color-background-button-primary-disabled-2xivjm:#354150;
   --color-background-button-primary-hover-qli9yh:#89bdee;
   --color-background-calendar-today-wm2baz:#354150;
+  --color-background-cell-shaded-y6pwcp:#232f3e;
   --color-background-code-editor-gutter-active-line-default-iqj33p:#7d8998;
   --color-background-code-editor-gutter-active-line-error-stt57c:#eb6f6f;
   --color-background-code-editor-gutter-default-jzy459:#192534;
@@ -1676,6 +1681,7 @@
   --color-background-button-primary-disabled-2xivjm:#354150;
   --color-background-button-primary-hover-qli9yh:#89bdee;
   --color-background-calendar-today-wm2baz:#354150;
+  --color-background-cell-shaded-y6pwcp:#232f3e;
   --color-background-code-editor-gutter-active-line-default-iqj33p:#7d8998;
   --color-background-code-editor-gutter-active-line-error-stt57c:#eb6f6f;
   --color-background-code-editor-gutter-default-jzy459:#192534;
@@ -1852,6 +1858,7 @@
   --color-background-button-primary-disabled-2xivjm:#354150;
   --color-background-button-primary-hover-qli9yh:#89bdee;
   --color-background-calendar-today-wm2baz:#354150;
+  --color-background-cell-shaded-y6pwcp:#232f3e;
   --color-background-code-editor-gutter-active-line-default-iqj33p:#7d8998;
   --color-background-code-editor-gutter-active-line-error-stt57c:#eb6f6f;
   --color-background-code-editor-gutter-default-jzy459:#192534;
@@ -2022,6 +2029,7 @@
   --color-background-button-primary-disabled-2xivjm:#354150;
   --color-background-button-primary-hover-qli9yh:#89bdee;
   --color-background-calendar-today-wm2baz:#354150;
+  --color-background-cell-shaded-y6pwcp:#232f3e;
   --color-background-code-editor-gutter-active-line-default-iqj33p:#7d8998;
   --color-background-code-editor-gutter-active-line-error-stt57c:#eb6f6f;
   --color-background-code-editor-gutter-default-jzy459:#192534;
@@ -2201,6 +2209,7 @@
   --color-background-button-primary-disabled-2xivjm:#354150;
   --color-background-button-primary-hover-qli9yh:#89bdee;
   --color-background-calendar-today-wm2baz:#354150;
+  --color-background-cell-shaded-y6pwcp:#232f3e;
   --color-background-code-editor-gutter-active-line-default-iqj33p:#7d8998;
   --color-background-code-editor-gutter-active-line-error-stt57c:#eb6f6f;
   --color-background-code-editor-gutter-default-jzy459:#192534;

package/lib/internal/template/internal/components/chart-plot/focus-outline.d.ts CHANGED Viewed

@@ -1,8 +1,9 @@
 import React from 'react';
+import { Offset } from '../interfaces';
 export interface FocusOutlineProps {
     elementKey?: null | string | number | boolean;
     elementRef?: React.RefObject<SVGSVGElement | SVGGElement>;
-    offset?: number;
+    offset?: Offset;
 }
 export default function FocusOutline({ elementKey, elementRef, offset }: FocusOutlineProps): JSX.Element;
 //# sourceMappingURL=focus-outline.d.ts.map

package/lib/internal/template/internal/components/chart-plot/focus-outline.d.ts.map CHANGED Viewed

	@@ -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"}

package/lib/internal/template/internal/components/chart-plot/focus-outline.js CHANGED Viewed

@@ -22,10 +22,12 @@ export default function FocusOutline(_a) {
     return React.createElement("rect", { ref: ref, "aria-hidden": "true", className: styles['focus-outline'], rx: "2" });
 }
 function showOutline(el, position, offset) {
-    el.setAttribute('x', (position.x - offset).toString());
-    el.setAttribute('y', (position.y - offset).toString());
-    el.setAttribute('width', (position.width + 2 * offset).toString());
-    el.setAttribute('height', (position.height + 2 * offset).toString());
+    var offsetX = typeof offset === 'number' ? offset : offset.x;
+    var offsetY = typeof offset === 'number' ? offset : offset.y;
+    el.setAttribute('x', (position.x - offsetX).toString());
+    el.setAttribute('y', (position.y - offsetY).toString());
+    el.setAttribute('width', (position.width + 2 * offsetX).toString());
+    el.setAttribute('height', (position.height + 2 * offsetY).toString());
     el.style.visibility = 'visible';
 }
 function hideOutline(el) {

package/lib/internal/template/internal/components/chart-plot/focus-outline.js.map CHANGED Viewed

	@@ -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"]}

package/lib/internal/template/internal/components/chart-plot/index.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Offset } from '../interfaces';
 export interface ChartPlotRef {
     svg: SVGSVGElement;
     focusPlot(): void;
@@ -20,7 +21,7 @@ export interface ChartPlotProps {
     ariaRoleDescription?: string;
     activeElementKey?: null | string | number | boolean;
     activeElementRef?: React.RefObject<SVGGElement>;
-    activeElementFocusOffset?: number;
+    activeElementFocusOffset?: Offset;
     ariaLiveRegion?: React.ReactNode;
     isClickable?: boolean;
     isPrecise?: boolean;

package/lib/internal/template/internal/components/chart-plot/index.d.ts.map CHANGED Viewed

	@@ -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"}

package/lib/internal/template/internal/components/chart-plot/index.js.map CHANGED Viewed

	@@ -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"]}

package/lib/internal/template/internal/components/chart-plot/interfaces.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export type Offset = number | {
+    x: number;
+    y: number;
+};
+//# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/internal/components/chart-plot/interfaces.d.ts.map ADDED Viewed

	@@ -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"}

package/lib/internal/template/internal/components/chart-plot/interfaces.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=interfaces.js.map

package/lib/internal/template/internal/components/chart-plot/interfaces.js.map ADDED Viewed

	@@ -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"]}

package/lib/internal/template/internal/components/interfaces.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export type Offset = number | {
+    x: number;
+    y: number;
+};
+//# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/internal/components/interfaces.d.ts.map ADDED Viewed

	@@ -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"}

package/lib/internal/template/internal/components/interfaces.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=interfaces.js.map

package/lib/internal/template/internal/components/interfaces.js.map ADDED Viewed

	@@ -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"]}

package/lib/internal/template/internal/environment.js CHANGED Viewed

@@ -1,5 +1,5 @@
-    export var PACKAGE_VERSION = '3.0.0 (308d769)';
+    export var PACKAGE_VERSION = '3.0.0 (fe9e4c3)';
     export var THEME = 'open-source-visual-refresh';
     export var ALWAYS_VISUAL_REFRESH = true;