npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.865 → 3.0.867 - Mend

@cloudscape-design/components-themeable 3.0.865 → 3.0.867

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

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

@@ -286,11 +286,11 @@ 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_content-display-option-toggle_1f3h0_1c3gl_289:not(#\9) {
+.awsui_content-display-option-toggle_1f3h0_1jgk7_289:not(#\9) {
   /* used in test-utils */
 }
-.awsui_content-display-option-content_1f3h0_1c3gl_293:not(#\9) {
+.awsui_content-display-option-content_1f3h0_1jgk7_293:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -333,52 +333,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-item-q4wr0w, 0px);
 }
-.awsui_content-display-option_1f3h0_1c3gl_289:not(#\9) {
+.awsui_content-display-option_1f3h0_1jgk7_289:not(#\9) {
   list-style: none;
   position: relative;
   border-block-start: var(--border-divider-list-width-x6rz7e, 1px) solid var(--color-border-divider-secondary-1xu6lb, #eaeded);
 }
-.awsui_content-display-option_1f3h0_1c3gl_289:not(#\9):not(.awsui_placeholder_1f3h0_1c3gl_340).awsui_sorting_1f3h0_1c3gl_340 {
-  transition: transform var(--motion-duration-transition-quick-1ym1ir, 90ms) var(--motion-easing-transition-quick-c2tqbv, linear);
-}
-@media (prefers-reduced-motion: reduce) {
-  .awsui_content-display-option_1f3h0_1c3gl_289:not(#\9):not(.awsui_placeholder_1f3h0_1c3gl_340).awsui_sorting_1f3h0_1c3gl_340 {
-    animation: none;
-    transition: none;
-  }
-}
-.awsui-motion-disabled .awsui_content-display-option_1f3h0_1c3gl_289:not(#\9):not(.awsui_placeholder_1f3h0_1c3gl_340).awsui_sorting_1f3h0_1c3gl_340, .awsui-mode-entering .awsui_content-display-option_1f3h0_1c3gl_289:not(#\9):not(.awsui_placeholder_1f3h0_1c3gl_340).awsui_sorting_1f3h0_1c3gl_340 {
-  animation: none;
-  transition: none;
-}
-.awsui_content-display-option_1f3h0_1c3gl_289.awsui_placeholder_1f3h0_1c3gl_340 > .awsui_content-display-option-content_1f3h0_1c3gl_293:not(#\9) {
-  position: relative;
-}
-.awsui_content-display-option_1f3h0_1c3gl_289.awsui_placeholder_1f3h0_1c3gl_340 > .awsui_content-display-option-content_1f3h0_1c3gl_293:not(#\9):after {
-  content: " ";
-  position: absolute;
-  inset: 0;
-  background: var(--color-drag-placeholder-hover-gowvta, #99cbe4);
-  border-start-start-radius: var(--border-radius-item-q4wr0w, 0px);
-  border-start-end-radius: var(--border-radius-item-q4wr0w, 0px);
-  border-end-start-radius: var(--border-radius-item-q4wr0w, 0px);
-  border-end-end-radius: var(--border-radius-item-q4wr0w, 0px);
-}
-.awsui_content-display-option-label_1f3h0_1c3gl_367:not(#\9) {
+.awsui_content-display-option-label_1f3h0_1jgk7_341:not(#\9) {
   flex-grow: 1;
   min-inline-size: 0;
   word-break: break-word;
   padding-inline-end: var(--space-l-eenfqd, 20px);
 }
-.awsui_content-display_1f3h0_1c3gl_289:not(#\9),
-.awsui_content-display-text-filter_1f3h0_1c3gl_375:not(#\9),
-.awsui_content-display-no-match_1f3h0_1c3gl_376:not(#\9) {
+.awsui_content-display_1f3h0_1jgk7_289:not(#\9),
+.awsui_content-display-text-filter_1f3h0_1jgk7_349:not(#\9),
+.awsui_content-display-no-match_1f3h0_1jgk7_350:not(#\9) {
   /* used in test-utils */
 }
-.awsui_content-display-title_1f3h0_1c3gl_380:not(#\9) {
+.awsui_content-display-title_1f3h0_1jgk7_354:not(#\9) {
   font-size: var(--font-size-body-m-6wxxs5, 14px);
   line-height: var(--line-height-body-m-gw0130, 22px);
   font-weight: var(--font-display-label-weight-5p8eav, 400);
@@ -387,7 +361,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline: 0;
 }
-.awsui_content-display-description_1f3h0_1c3gl_389:not(#\9) {
+.awsui_content-display-description_1f3h0_1jgk7_363:not(#\9) {
   color: var(--color-text-form-secondary-5q4khe, #687078);
   font-size: var(--font-size-body-s-4dzx5q, 12px);
   line-height: var(--line-height-body-s-egzl4q, 16px);
@@ -395,7 +369,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: var(--space-scaled-xxxs-6vyqo7, 2px);
 }
-.awsui_content-display-option-list_1f3h0_1c3gl_397:not(#\9) {
+.awsui_content-display-option-list_1f3h0_1jgk7_371:not(#\9) {
   position: relative;
   list-style: none;
   padding-block: 0;

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

@@ -2,17 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "content-display-option-toggle": "awsui_content-display-option-toggle_1f3h0_1c3gl_289",
-  "content-display-option-content": "awsui_content-display-option-content_1f3h0_1c3gl_293",
-  "content-display-option": "awsui_content-display-option_1f3h0_1c3gl_289",
-  "placeholder": "awsui_placeholder_1f3h0_1c3gl_340",
-  "sorting": "awsui_sorting_1f3h0_1c3gl_340",
-  "content-display-option-label": "awsui_content-display-option-label_1f3h0_1c3gl_367",
-  "content-display": "awsui_content-display_1f3h0_1c3gl_289",
-  "content-display-text-filter": "awsui_content-display-text-filter_1f3h0_1c3gl_375",
-  "content-display-no-match": "awsui_content-display-no-match_1f3h0_1c3gl_376",
-  "content-display-title": "awsui_content-display-title_1f3h0_1c3gl_380",
-  "content-display-description": "awsui_content-display-description_1f3h0_1c3gl_389",
-  "content-display-option-list": "awsui_content-display-option-list_1f3h0_1c3gl_397"
+  "content-display-option-toggle": "awsui_content-display-option-toggle_1f3h0_1jgk7_289",
+  "content-display-option-content": "awsui_content-display-option-content_1f3h0_1jgk7_293",
+  "content-display-option": "awsui_content-display-option_1f3h0_1jgk7_289",
+  "content-display-option-label": "awsui_content-display-option-label_1f3h0_1jgk7_341",
+  "content-display": "awsui_content-display_1f3h0_1jgk7_289",
+  "content-display-text-filter": "awsui_content-display-text-filter_1f3h0_1jgk7_349",
+  "content-display-no-match": "awsui_content-display-no-match_1f3h0_1jgk7_350",
+  "content-display-title": "awsui_content-display-title_1f3h0_1jgk7_354",
+  "content-display-description": "awsui_content-display-description_1f3h0_1jgk7_363",
+  "content-display-option-list": "awsui_content-display-option-list_1f3h0_1jgk7_371"
 };

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

@@ -1,43 +1,41 @@
     import './styles.scoped.css';
     export default {
-  "visible-content": "awsui_visible-content_tc96w_11461_289",
-  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_11461_290",
-  "visible-content-groups": "awsui_visible-content-groups_tc96w_11461_291",
-  "visible-content-group": "awsui_visible-content-group_tc96w_11461_291",
-  "visible-content-title": "awsui_visible-content-title_tc96w_11461_296",
-  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_11461_306",
-  "visible-content-option": "awsui_visible-content-option_tc96w_11461_312",
-  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_11461_325",
-  "content-display-option-toggle": "awsui_content-display-option-toggle_tc96w_11461_620",
-  "content-display-option-content": "awsui_content-display-option-content_tc96w_11461_624",
-  "content-display-option": "awsui_content-display-option_tc96w_11461_620",
-  "placeholder": "awsui_placeholder_tc96w_11461_671",
-  "sorting": "awsui_sorting_tc96w_11461_671",
-  "content-display-option-label": "awsui_content-display-option-label_tc96w_11461_698",
-  "content-display": "awsui_content-display_tc96w_11461_620",
-  "content-display-text-filter": "awsui_content-display-text-filter_tc96w_11461_706",
-  "content-display-no-match": "awsui_content-display-no-match_tc96w_11461_707",
-  "content-display-title": "awsui_content-display-title_tc96w_11461_711",
-  "content-display-description": "awsui_content-display-description_tc96w_11461_720",
-  "content-display-option-list": "awsui_content-display-option-list_tc96w_11461_728",
-  "root": "awsui_root_tc96w_11461_735",
-  "modal-root": "awsui_modal-root_tc96w_11461_736",
-  "trigger-button": "awsui_trigger-button_tc96w_11461_737",
-  "cancel-button": "awsui_cancel-button_tc96w_11461_738",
-  "confirm-button": "awsui_confirm-button_tc96w_11461_739",
-  "custom": "awsui_custom_tc96w_11461_740",
-  "second-column-small": "awsui_second-column-small_tc96w_11461_744",
-  "wrap-lines": "awsui_wrap-lines_tc96w_11461_748",
-  "striped-rows": "awsui_striped-rows_tc96w_11461_749",
-  "content-density": "awsui_content-density_tc96w_11461_750",
-  "page-size": "awsui_page-size_tc96w_11461_751",
-  "page-size-form-field": "awsui_page-size-form-field_tc96w_11461_752",
-  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_11461_753",
-  "sticky-columns": "awsui_sticky-columns_tc96w_11461_754",
-  "sticky-columns-form-field": "awsui_sticky-columns-form-field_tc96w_11461_755",
-  "sticky-columns-radio-group": "awsui_sticky-columns-radio-group_tc96w_11461_756",
-  "sticky-columns-first": "awsui_sticky-columns-first_tc96w_11461_757",
-  "sticky-columns-last": "awsui_sticky-columns-last_tc96w_11461_758"
+  "visible-content": "awsui_visible-content_tc96w_4nczn_289",
+  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_4nczn_290",
+  "visible-content-groups": "awsui_visible-content-groups_tc96w_4nczn_291",
+  "visible-content-group": "awsui_visible-content-group_tc96w_4nczn_291",
+  "visible-content-title": "awsui_visible-content-title_tc96w_4nczn_296",
+  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_4nczn_306",
+  "visible-content-option": "awsui_visible-content-option_tc96w_4nczn_312",
+  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_4nczn_325",
+  "content-display-option-toggle": "awsui_content-display-option-toggle_tc96w_4nczn_620",
+  "content-display-option-content": "awsui_content-display-option-content_tc96w_4nczn_624",
+  "content-display-option": "awsui_content-display-option_tc96w_4nczn_620",
+  "content-display-option-label": "awsui_content-display-option-label_tc96w_4nczn_672",
+  "content-display": "awsui_content-display_tc96w_4nczn_620",
+  "content-display-text-filter": "awsui_content-display-text-filter_tc96w_4nczn_680",
+  "content-display-no-match": "awsui_content-display-no-match_tc96w_4nczn_681",
+  "content-display-title": "awsui_content-display-title_tc96w_4nczn_685",
+  "content-display-description": "awsui_content-display-description_tc96w_4nczn_694",
+  "content-display-option-list": "awsui_content-display-option-list_tc96w_4nczn_702",
+  "root": "awsui_root_tc96w_4nczn_709",
+  "modal-root": "awsui_modal-root_tc96w_4nczn_710",
+  "trigger-button": "awsui_trigger-button_tc96w_4nczn_711",
+  "cancel-button": "awsui_cancel-button_tc96w_4nczn_712",
+  "confirm-button": "awsui_confirm-button_tc96w_4nczn_713",
+  "custom": "awsui_custom_tc96w_4nczn_714",
+  "second-column-small": "awsui_second-column-small_tc96w_4nczn_718",
+  "wrap-lines": "awsui_wrap-lines_tc96w_4nczn_722",
+  "striped-rows": "awsui_striped-rows_tc96w_4nczn_723",
+  "content-density": "awsui_content-density_tc96w_4nczn_724",
+  "page-size": "awsui_page-size_tc96w_4nczn_725",
+  "page-size-form-field": "awsui_page-size-form-field_tc96w_4nczn_726",
+  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_4nczn_727",
+  "sticky-columns": "awsui_sticky-columns_tc96w_4nczn_728",
+  "sticky-columns-form-field": "awsui_sticky-columns-form-field_tc96w_4nczn_729",
+  "sticky-columns-radio-group": "awsui_sticky-columns-radio-group_tc96w_4nczn_730",
+  "sticky-columns-first": "awsui_sticky-columns-first_tc96w_4nczn_731",
+  "sticky-columns-last": "awsui_sticky-columns-last_tc96w_4nczn_732"
 };

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

@@ -286,14 +286,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_11461_289:not(#\9),
-.awsui_visible-content-toggle_tc96w_11461_290:not(#\9),
-.awsui_visible-content-groups_tc96w_11461_291:not(#\9),
-.awsui_visible-content-group_tc96w_11461_291:not(#\9) {
+.awsui_visible-content_tc96w_4nczn_289:not(#\9),
+.awsui_visible-content-toggle_tc96w_4nczn_290:not(#\9),
+.awsui_visible-content-groups_tc96w_4nczn_291:not(#\9),
+.awsui_visible-content-group_tc96w_4nczn_291:not(#\9) {
   /* used in test-utils */
 }
-.awsui_visible-content-title_tc96w_11461_296:not(#\9) {
+.awsui_visible-content-title_tc96w_4nczn_296:not(#\9) {
   font-size: var(--font-size-body-m-6wxxs5, 14px);
   line-height: var(--line-height-body-m-gw0130, 22px);
   font-weight: var(--font-display-label-weight-5p8eav, 400);
@@ -303,13 +303,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline: 0;
 }
-.awsui_visible-content-group-label_tc96w_11461_306:not(#\9) {
+.awsui_visible-content-group-label_tc96w_4nczn_306:not(#\9) {
   color: var(--color-text-group-label-eorpbe, #545b64);
   padding-block-end: var(--space-xs-6dgkww, 8px);
   border-block-end: var(--border-divider-list-width-x6rz7e, 1px) solid var(--color-border-divider-secondary-1xu6lb, #eaeded);
 }
-.awsui_visible-content-option_tc96w_11461_312:not(#\9) {
+.awsui_visible-content-option_tc96w_4nczn_312:not(#\9) {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
@@ -318,11 +318,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-inline-end: 0px;
   border-block-end: var(--border-divider-list-width-x6rz7e, 1px) solid var(--color-border-divider-secondary-1xu6lb, #eaeded);
 }
-.awsui_visible-content-option_tc96w_11461_312:not(#\9):last-child {
+.awsui_visible-content-option_tc96w_4nczn_312:not(#\9):last-child {
   border-block-end: none;
 }
-.awsui_visible-content-option-label_tc96w_11461_325:not(#\9) {
+.awsui_visible-content-option-label_tc96w_4nczn_325:not(#\9) {
   overflow: hidden;
   text-overflow: ellipsis;
   padding-inline-end: var(--space-l-eenfqd, 20px);
@@ -617,11 +617,11 @@ 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_content-display-option-toggle_tc96w_11461_620:not(#\9) {
+.awsui_content-display-option-toggle_tc96w_4nczn_620:not(#\9) {
   /* used in test-utils */
 }
-.awsui_content-display-option-content_tc96w_11461_624:not(#\9) {
+.awsui_content-display-option-content_tc96w_4nczn_624:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -664,52 +664,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-item-q4wr0w, 0px);
 }
-.awsui_content-display-option_tc96w_11461_620:not(#\9) {
+.awsui_content-display-option_tc96w_4nczn_620:not(#\9) {
   list-style: none;
   position: relative;
   border-block-start: var(--border-divider-list-width-x6rz7e, 1px) solid var(--color-border-divider-secondary-1xu6lb, #eaeded);
 }
-.awsui_content-display-option_tc96w_11461_620:not(#\9):not(.awsui_placeholder_tc96w_11461_671).awsui_sorting_tc96w_11461_671 {
-  transition: transform var(--motion-duration-transition-quick-1ym1ir, 90ms) var(--motion-easing-transition-quick-c2tqbv, linear);
-}
-@media (prefers-reduced-motion: reduce) {
-  .awsui_content-display-option_tc96w_11461_620:not(#\9):not(.awsui_placeholder_tc96w_11461_671).awsui_sorting_tc96w_11461_671 {
-    animation: none;
-    transition: none;
-  }
-}
-.awsui-motion-disabled .awsui_content-display-option_tc96w_11461_620:not(#\9):not(.awsui_placeholder_tc96w_11461_671).awsui_sorting_tc96w_11461_671, .awsui-mode-entering .awsui_content-display-option_tc96w_11461_620:not(#\9):not(.awsui_placeholder_tc96w_11461_671).awsui_sorting_tc96w_11461_671 {
-  animation: none;
-  transition: none;
-}
-.awsui_content-display-option_tc96w_11461_620.awsui_placeholder_tc96w_11461_671 > .awsui_content-display-option-content_tc96w_11461_624:not(#\9) {
-  position: relative;
-}
-.awsui_content-display-option_tc96w_11461_620.awsui_placeholder_tc96w_11461_671 > .awsui_content-display-option-content_tc96w_11461_624:not(#\9):after {
-  content: " ";
-  position: absolute;
-  inset: 0;
-  background: var(--color-drag-placeholder-hover-gowvta, #99cbe4);
-  border-start-start-radius: var(--border-radius-item-q4wr0w, 0px);
-  border-start-end-radius: var(--border-radius-item-q4wr0w, 0px);
-  border-end-start-radius: var(--border-radius-item-q4wr0w, 0px);
-  border-end-end-radius: var(--border-radius-item-q4wr0w, 0px);
-}
-.awsui_content-display-option-label_tc96w_11461_698:not(#\9) {
+.awsui_content-display-option-label_tc96w_4nczn_672:not(#\9) {
   flex-grow: 1;
   min-inline-size: 0;
   word-break: break-word;
   padding-inline-end: var(--space-l-eenfqd, 20px);
 }
-.awsui_content-display_tc96w_11461_620:not(#\9),
-.awsui_content-display-text-filter_tc96w_11461_706:not(#\9),
-.awsui_content-display-no-match_tc96w_11461_707:not(#\9) {
+.awsui_content-display_tc96w_4nczn_620:not(#\9),
+.awsui_content-display-text-filter_tc96w_4nczn_680:not(#\9),
+.awsui_content-display-no-match_tc96w_4nczn_681:not(#\9) {
   /* used in test-utils */
 }
-.awsui_content-display-title_tc96w_11461_711:not(#\9) {
+.awsui_content-display-title_tc96w_4nczn_685:not(#\9) {
   font-size: var(--font-size-body-m-6wxxs5, 14px);
   line-height: var(--line-height-body-m-gw0130, 22px);
   font-weight: var(--font-display-label-weight-5p8eav, 400);
@@ -718,7 +692,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline: 0;
 }
-.awsui_content-display-description_tc96w_11461_720:not(#\9) {
+.awsui_content-display-description_tc96w_4nczn_694:not(#\9) {
   color: var(--color-text-form-secondary-5q4khe, #687078);
   font-size: var(--font-size-body-s-4dzx5q, 12px);
   line-height: var(--line-height-body-s-egzl4q, 16px);
@@ -726,36 +700,36 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: var(--space-scaled-xxxs-6vyqo7, 2px);
 }
-.awsui_content-display-option-list_tc96w_11461_728:not(#\9) {
+.awsui_content-display-option-list_tc96w_4nczn_702:not(#\9) {
   position: relative;
   list-style: none;
   padding-block: 0;
   padding-inline: 0;
 }
-.awsui_root_tc96w_11461_735:not(#\9),
-.awsui_modal-root_tc96w_11461_736:not(#\9),
-.awsui_trigger-button_tc96w_11461_737:not(#\9),
-.awsui_cancel-button_tc96w_11461_738:not(#\9),
-.awsui_confirm-button_tc96w_11461_739:not(#\9),
-.awsui_custom_tc96w_11461_740:not(#\9) {
+.awsui_root_tc96w_4nczn_709:not(#\9),
+.awsui_modal-root_tc96w_4nczn_710:not(#\9),
+.awsui_trigger-button_tc96w_4nczn_711:not(#\9),
+.awsui_cancel-button_tc96w_4nczn_712:not(#\9),
+.awsui_confirm-button_tc96w_4nczn_713:not(#\9),
+.awsui_custom_tc96w_4nczn_714:not(#\9) {
   /* used in test-utils */
 }
-.awsui_second-column-small_tc96w_11461_744:not(#\9) {
+.awsui_second-column-small_tc96w_4nczn_718:not(#\9) {
   padding-block-start: calc(2 * var(--space-scaled-l-7e51pg, 20px));
 }
-.awsui_wrap-lines_tc96w_11461_748:not(#\9),
-.awsui_striped-rows_tc96w_11461_749:not(#\9),
-.awsui_content-density_tc96w_11461_750:not(#\9),
-.awsui_page-size_tc96w_11461_751:not(#\9),
-.awsui_page-size-form-field_tc96w_11461_752:not(#\9),
-.awsui_page-size-radio-group_tc96w_11461_753:not(#\9),
-.awsui_sticky-columns_tc96w_11461_754:not(#\9),
-.awsui_sticky-columns-form-field_tc96w_11461_755:not(#\9),
-.awsui_sticky-columns-radio-group_tc96w_11461_756:not(#\9),
-.awsui_sticky-columns-first_tc96w_11461_757:not(#\9),
-.awsui_sticky-columns-last_tc96w_11461_758:not(#\9) {
+.awsui_wrap-lines_tc96w_4nczn_722:not(#\9),
+.awsui_striped-rows_tc96w_4nczn_723:not(#\9),
+.awsui_content-density_tc96w_4nczn_724:not(#\9),
+.awsui_page-size_tc96w_4nczn_725:not(#\9),
+.awsui_page-size-form-field_tc96w_4nczn_726:not(#\9),
+.awsui_page-size-radio-group_tc96w_4nczn_727:not(#\9),
+.awsui_sticky-columns_tc96w_4nczn_728:not(#\9),
+.awsui_sticky-columns-form-field_tc96w_4nczn_729:not(#\9),
+.awsui_sticky-columns-radio-group_tc96w_4nczn_730:not(#\9),
+.awsui_sticky-columns-first_tc96w_4nczn_731:not(#\9),
+.awsui_sticky-columns-last_tc96w_4nczn_732:not(#\9) {
   /* used in test-utils */
 }

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

@@ -2,43 +2,41 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "visible-content": "awsui_visible-content_tc96w_11461_289",
-  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_11461_290",
-  "visible-content-groups": "awsui_visible-content-groups_tc96w_11461_291",
-  "visible-content-group": "awsui_visible-content-group_tc96w_11461_291",
-  "visible-content-title": "awsui_visible-content-title_tc96w_11461_296",
-  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_11461_306",
-  "visible-content-option": "awsui_visible-content-option_tc96w_11461_312",
-  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_11461_325",
-  "content-display-option-toggle": "awsui_content-display-option-toggle_tc96w_11461_620",
-  "content-display-option-content": "awsui_content-display-option-content_tc96w_11461_624",
-  "content-display-option": "awsui_content-display-option_tc96w_11461_620",
-  "placeholder": "awsui_placeholder_tc96w_11461_671",
-  "sorting": "awsui_sorting_tc96w_11461_671",
-  "content-display-option-label": "awsui_content-display-option-label_tc96w_11461_698",
-  "content-display": "awsui_content-display_tc96w_11461_620",
-  "content-display-text-filter": "awsui_content-display-text-filter_tc96w_11461_706",
-  "content-display-no-match": "awsui_content-display-no-match_tc96w_11461_707",
-  "content-display-title": "awsui_content-display-title_tc96w_11461_711",
-  "content-display-description": "awsui_content-display-description_tc96w_11461_720",
-  "content-display-option-list": "awsui_content-display-option-list_tc96w_11461_728",
-  "root": "awsui_root_tc96w_11461_735",
-  "modal-root": "awsui_modal-root_tc96w_11461_736",
-  "trigger-button": "awsui_trigger-button_tc96w_11461_737",
-  "cancel-button": "awsui_cancel-button_tc96w_11461_738",
-  "confirm-button": "awsui_confirm-button_tc96w_11461_739",
-  "custom": "awsui_custom_tc96w_11461_740",
-  "second-column-small": "awsui_second-column-small_tc96w_11461_744",
-  "wrap-lines": "awsui_wrap-lines_tc96w_11461_748",
-  "striped-rows": "awsui_striped-rows_tc96w_11461_749",
-  "content-density": "awsui_content-density_tc96w_11461_750",
-  "page-size": "awsui_page-size_tc96w_11461_751",
-  "page-size-form-field": "awsui_page-size-form-field_tc96w_11461_752",
-  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_11461_753",
-  "sticky-columns": "awsui_sticky-columns_tc96w_11461_754",
-  "sticky-columns-form-field": "awsui_sticky-columns-form-field_tc96w_11461_755",
-  "sticky-columns-radio-group": "awsui_sticky-columns-radio-group_tc96w_11461_756",
-  "sticky-columns-first": "awsui_sticky-columns-first_tc96w_11461_757",
-  "sticky-columns-last": "awsui_sticky-columns-last_tc96w_11461_758"
+  "visible-content": "awsui_visible-content_tc96w_4nczn_289",
+  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_4nczn_290",
+  "visible-content-groups": "awsui_visible-content-groups_tc96w_4nczn_291",
+  "visible-content-group": "awsui_visible-content-group_tc96w_4nczn_291",
+  "visible-content-title": "awsui_visible-content-title_tc96w_4nczn_296",
+  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_4nczn_306",
+  "visible-content-option": "awsui_visible-content-option_tc96w_4nczn_312",
+  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_4nczn_325",
+  "content-display-option-toggle": "awsui_content-display-option-toggle_tc96w_4nczn_620",
+  "content-display-option-content": "awsui_content-display-option-content_tc96w_4nczn_624",
+  "content-display-option": "awsui_content-display-option_tc96w_4nczn_620",
+  "content-display-option-label": "awsui_content-display-option-label_tc96w_4nczn_672",
+  "content-display": "awsui_content-display_tc96w_4nczn_620",
+  "content-display-text-filter": "awsui_content-display-text-filter_tc96w_4nczn_680",
+  "content-display-no-match": "awsui_content-display-no-match_tc96w_4nczn_681",
+  "content-display-title": "awsui_content-display-title_tc96w_4nczn_685",
+  "content-display-description": "awsui_content-display-description_tc96w_4nczn_694",
+  "content-display-option-list": "awsui_content-display-option-list_tc96w_4nczn_702",
+  "root": "awsui_root_tc96w_4nczn_709",
+  "modal-root": "awsui_modal-root_tc96w_4nczn_710",
+  "trigger-button": "awsui_trigger-button_tc96w_4nczn_711",
+  "cancel-button": "awsui_cancel-button_tc96w_4nczn_712",
+  "confirm-button": "awsui_confirm-button_tc96w_4nczn_713",
+  "custom": "awsui_custom_tc96w_4nczn_714",
+  "second-column-small": "awsui_second-column-small_tc96w_4nczn_718",
+  "wrap-lines": "awsui_wrap-lines_tc96w_4nczn_722",
+  "striped-rows": "awsui_striped-rows_tc96w_4nczn_723",
+  "content-density": "awsui_content-density_tc96w_4nczn_724",
+  "page-size": "awsui_page-size_tc96w_4nczn_725",
+  "page-size-form-field": "awsui_page-size-form-field_tc96w_4nczn_726",
+  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_4nczn_727",
+  "sticky-columns": "awsui_sticky-columns_tc96w_4nczn_728",
+  "sticky-columns-form-field": "awsui_sticky-columns-form-field_tc96w_4nczn_729",
+  "sticky-columns-radio-group": "awsui_sticky-columns-radio-group_tc96w_4nczn_730",
+  "sticky-columns-first": "awsui_sticky-columns-first_tc96w_4nczn_731",
+  "sticky-columns-last": "awsui_sticky-columns-last_tc96w_4nczn_732"
 };

package/lib/internal/template/internal/components/dnd-area/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { DndAreaProps } from './interfaces';
+export declare function DndArea<Data>({ items, renderItem, onItemsChange, disableReorder, i18nStrings, borderRadiusVariant, }: DndAreaProps<Data>): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/lib/internal/template/internal/components/dnd-area/index.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dnd-area/index.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAe,YAAY,EAAmB,MAAM,cAAc,CAAC;AAM1E,wBAAgB,OAAO,CAAC,IAAI,EAAE,EAC5B,KAAK,EACL,UAAU,EACV,aAAa,EACb,cAAc,EACd,WAAW,EACX,mBAA4B,GAC7B,EAAE,YAAY,CAAC,IAAI,CAAC,eA2EpB"}

package/lib/internal/template/internal/components/{dnd-container → dnd-area}/index.js RENAMED Viewed

@@ -4,12 +4,14 @@ import React, { useEffect, useRef } from 'react';
 import { DndContext, DragOverlay } from '@dnd-kit/core';
 import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import clsx from 'clsx';
 import { joinStrings } from '../../utils/strings';
 import Portal from '../portal';
 import useDragAndDropReorder from './use-drag-and-drop-reorder';
 import useLiveAnnouncements from './use-live-announcements';
 import styles from './styles.css.js';
-export function DndContainer({ items, renderItem, onItemsChange, disableReorder, i18nStrings, dragOverlayClassName = styles['drag-overlay'], }) {
+export function DndArea({ items, renderItem, onItemsChange, disableReorder, i18nStrings, borderRadiusVariant = 'item', }) {
+    var _a;
     const { activeItemId, setActiveItemId, collisionDetection, handleKeyDown, sensors } = useDragAndDropReorder({
         items,
     });
@@ -33,19 +35,18 @@ export function DndContainer({ items, renderItem, onItemsChange, disableReorder,
                 onItemsChange(arrayMove([...items], oldIndex, newIndex));
             }
         }, onDragCancel: () => setActiveItemId(null) },
-        React.createElement(SortableContext, { disabled: disableReorder, items: items.map(item => item.id), strategy: verticalListSortingStrategy }, items.map(item => (React.createElement(DraggableItem, { key: item.id, item: item, renderItem: renderItem, onKeyDown: handleKeyDown, dragHandleAriaLabel: i18nStrings.dragHandleAriaLabel })))),
+        React.createElement(SortableContext, { disabled: disableReorder, items: items.map(item => item.id), strategy: verticalListSortingStrategy }, items.map(item => (React.createElement(DraggableItem, { key: item.id, item: item, renderItem: renderItem, onKeyDown: handleKeyDown, dragHandleAriaLabel: i18nStrings.dragHandleAriaLabel, borderRadiusVariant: borderRadiusVariant })))),
         React.createElement(Portal, { container: portalContainer },
-            React.createElement(DragOverlay, { className: dragOverlayClassName, dropAnimation: null, style: { zIndex: 5000 } }, activeItem &&
+            React.createElement(DragOverlay, { className: clsx(styles['drag-overlay'], styles[`drag-overlay-${borderRadiusVariant}`]), dropAnimation: null, style: { zIndex: 5000 } }, activeItem &&
                 renderItem({
                     item: activeItem,
                     style: {},
+                    className: styles.active,
                     isDragging: true,
                     isSorting: false,
                     isActive: true,
-                    dragHandleAttributes: {
-                        ['aria-label']: joinStrings(i18nStrings.dragHandleAriaLabel, activeItem.label),
-                    },
-                    dragHandleListeners: {
+                    dragHandleProps: {
+                        ariaLabel: (_a = joinStrings(i18nStrings.dragHandleAriaLabel, activeItem.label)) !== null && _a !== void 0 ? _a : '',
                         onKeyDown: handleKeyDown,
                     },
                 })))));
@@ -65,7 +66,8 @@ function usePortalContainer() {
     }, []);
     return portalContainerRef.current;
 }
-function DraggableItem({ item, dragHandleAriaLabel, onKeyDown, renderItem, }) {
+function DraggableItem({ item, dragHandleAriaLabel, onKeyDown, renderItem, borderRadiusVariant, }) {
+    var _a;
     const { isDragging, isSorting, listeners, setNodeRef, transform, attributes } = useSortable({ id: item.id });
     const style = { transform: CSS.Translate.toString(transform) };
     const dragHandleListeners = attributes['aria-disabled']
@@ -78,20 +80,16 @@ function DraggableItem({ item, dragHandleAriaLabel, onKeyDown, renderItem, }) {
                     listeners.onKeyDown(event);
                 }
             } });
-    const dragHandleAttributes = {
-        ['aria-label']: joinStrings(dragHandleAriaLabel, item.label),
-        ['aria-describedby']: attributes['aria-describedby'],
-        ['aria-disabled']: attributes['aria-disabled'],
-    };
+    const className = clsx(isDragging && clsx(styles.placeholder, styles[`placeholder-${borderRadiusVariant}`]), isSorting && styles.sorting);
     return (React.createElement(React.Fragment, null, renderItem({
         item,
         ref: setNodeRef,
         style,
+        className,
         isDragging,
         isSorting,
         isActive: false,
-        dragHandleListeners,
-        dragHandleAttributes,
+        dragHandleProps: Object.assign(Object.assign({}, dragHandleListeners), { ariaLabel: (_a = joinStrings(dragHandleAriaLabel, item.label)) !== null && _a !== void 0 ? _a : '', ariaDescribedby: attributes['aria-describedby'], disabled: attributes['aria-disabled'] }),
     })));
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/internal/components/dnd-area/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/dnd-area/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\n\nimport React, { useEffect, useRef } from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport clsx from 'clsx';\n\nimport { joinStrings } from '../../utils/strings';\nimport Portal from '../portal';\nimport { DndAreaItem, DndAreaProps, RenderItemProps } from './interfaces';\nimport useDragAndDropReorder from './use-drag-and-drop-reorder';\nimport useLiveAnnouncements from './use-live-announcements';\n\nimport styles from './styles.css.js';\n\nexport function DndArea<Data>({\n items,\n renderItem,\n onItemsChange,\n disableReorder,\n i18nStrings,\n borderRadiusVariant = 'item',\n}: DndAreaProps<Data>) {\n const { activeItemId, setActiveItemId, collisionDetection, handleKeyDown, sensors } = useDragAndDropReorder({\n items,\n });\n const activeItem = activeItemId ? items.find(item => item.id === activeItemId) : null;\n const isDragging = activeItemId !== null;\n const announcements = useLiveAnnouncements({ items, isDragging, ...i18nStrings });\n const portalContainer = usePortalContainer();\n return (\n <DndContext\n sensors={sensors}\n collisionDetection={collisionDetection}\n accessibility={{\n announcements,\n restoreFocus: false,\n screenReaderInstructions: i18nStrings.dragHandleAriaDescription\n ? { draggable: i18nStrings.dragHandleAriaDescription }\n : undefined,\n container: portalContainer,\n }}\n onDragStart={({ active }) => setActiveItemId(active.id)}\n onDragEnd={event => {\n setActiveItemId(null);\n const { active, over } = event;\n\n if (over && active.id !== over.id) {\n const oldIndex = items.findIndex(item => item.id === active.id);\n const newIndex = items.findIndex(item => item.id === over.id);\n onItemsChange(arrayMove([...items], oldIndex, newIndex));\n }\n }}\n onDragCancel={() => setActiveItemId(null)}\n >\n <SortableContext\n disabled={disableReorder}\n items={items.map(item => item.id)}\n strategy={verticalListSortingStrategy}\n >\n {items.map(item => (\n <DraggableItem\n key={item.id}\n item={item}\n renderItem={renderItem}\n onKeyDown={handleKeyDown}\n dragHandleAriaLabel={i18nStrings.dragHandleAriaLabel}\n borderRadiusVariant={borderRadiusVariant}\n />\n ))}\n </SortableContext>\n\n <Portal container={portalContainer}>\n {/* Make sure that the drag overlay is above the modal by assigning the z-index as inline style\n so that it prevails over dnd-kit's inline z-index of 999 */}\n <DragOverlay\n className={clsx(styles['drag-overlay'], styles[`drag-overlay-${borderRadiusVariant}`])}\n dropAnimation={null}\n style={{ zIndex: 5000 }}\n >\n {activeItem &&\n renderItem({\n item: activeItem,\n style: {},\n className: styles.active,\n isDragging: true,\n isSorting: false,\n isActive: true,\n dragHandleProps: {\n ariaLabel: joinStrings(i18nStrings.dragHandleAriaLabel, activeItem.label) ?? '',\n onKeyDown: handleKeyDown,\n },\n })}\n </DragOverlay>\n </Portal>\n </DndContext>\n );\n}\n\nfunction usePortalContainer() {\n const portalContainerRef = useRef(document.createElement('div'));\n useEffect(() => {\n const container = portalContainerRef.current;\n if (!container.isConnected) {\n document.body.appendChild(container);\n }\n return () => {\n if (container.isConnected) {\n document.body.removeChild(container);\n }\n };\n }, []);\n return portalContainerRef.current;\n}\n\nfunction DraggableItem<Data>({\n item,\n dragHandleAriaLabel,\n onKeyDown,\n renderItem,\n borderRadiusVariant,\n}: {\n item: DndAreaItem<Data>;\n dragHandleAriaLabel?: string;\n onKeyDown: (event: React.KeyboardEvent) => void;\n renderItem: (props: RenderItemProps<Data>) => React.ReactNode;\n borderRadiusVariant: 'item' | 'container';\n}) {\n const { isDragging, isSorting, listeners, setNodeRef, transform, attributes } = useSortable({ id: item.id });\n const style = { transform: CSS.Translate.toString(transform) };\n const dragHandleListeners = attributes['aria-disabled']\n ? {}\n : {\n ...listeners,\n onKeyDown: (event: React.KeyboardEvent) => {\n if (onKeyDown) {\n onKeyDown(event);\n }\n if (listeners?.onKeyDown) {\n listeners.onKeyDown(event);\n }\n },\n };\n const className = clsx(\n isDragging && clsx(styles.placeholder, styles[`placeholder-${borderRadiusVariant}`]),\n isSorting && styles.sorting\n );\n return (\n <>\n {renderItem({\n item,\n ref: setNodeRef,\n style,\n className,\n isDragging,\n isSorting,\n isActive: false,\n dragHandleProps: {\n ...dragHandleListeners,\n ariaLabel: joinStrings(dragHandleAriaLabel, item.label) ?? '',\n ariaDescribedby: attributes['aria-describedby'],\n disabled: attributes['aria-disabled'],\n },\n })}\n </>\n );\n}\n"]}