@cloudscape-design/components-themeable 3.0.1073 → 3.0.1075

package/lib/internal/template/internal/components/drag-handle-wrapper/styles.selectors.js

@@ -2,26 +2,26 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "direction-button-wrapper": "awsui_direction-button-wrapper_155yk_50h8p_169",
-  "direction-button-wrapper-motion-enter": "awsui_direction-button-wrapper-motion-enter_155yk_50h8p_189",
-  "direction-button-wrapper-motion-entering": "awsui_direction-button-wrapper-motion-entering_155yk_50h8p_189",
-  "direction-button-wrapper-motion-exit": "awsui_direction-button-wrapper-motion-exit_155yk_50h8p_189",
-  "direction-button-wrapper-motion-exiting": "awsui_direction-button-wrapper-motion-exiting_155yk_50h8p_189",
-  "drag-handle-entry": "awsui_drag-handle-entry_155yk_50h8p_1",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_155yk_50h8p_1",
-  "drag-handle-exit": "awsui_drag-handle-exit_155yk_50h8p_1",
-  "awsui-motion-fade-out-0": "awsui_awsui-motion-fade-out-0_155yk_50h8p_1",
-  "direction-button-wrapper-block-start": "awsui_direction-button-wrapper-block-start_155yk_50h8p_229",
-  "direction-button-wrapper-block-end": "awsui_direction-button-wrapper-block-end_155yk_50h8p_233",
-  "direction-button-wrapper-inline-start": "awsui_direction-button-wrapper-inline-start_155yk_50h8p_237",
-  "direction-button-wrapper-inline-end": "awsui_direction-button-wrapper-inline-end_155yk_50h8p_238",
-  "direction-button-wrapper-rtl": "awsui_direction-button-wrapper-rtl_155yk_50h8p_238",
-  "drag-handle-wrapper": "awsui_drag-handle-wrapper_155yk_50h8p_247",
-  "portal-overlay": "awsui_portal-overlay_155yk_50h8p_252",
-  "portal-overlay-contents": "awsui_portal-overlay-contents_155yk_50h8p_260",
-  "drag-handle": "awsui_drag-handle_155yk_50h8p_247",
-  "direction-button-wrapper-hidden": "awsui_direction-button-wrapper-hidden_155yk_50h8p_277",
-  "direction-button": "awsui_direction-button_155yk_50h8p_169",
-  "direction-button-disabled": "awsui_direction-button-disabled_155yk_50h8p_320"
+  "direction-button-wrapper": "awsui_direction-button-wrapper_155yk_11kuq_169",
+  "direction-button-wrapper-motion-enter": "awsui_direction-button-wrapper-motion-enter_155yk_11kuq_189",
+  "direction-button-wrapper-motion-entering": "awsui_direction-button-wrapper-motion-entering_155yk_11kuq_189",
+  "direction-button-wrapper-motion-exit": "awsui_direction-button-wrapper-motion-exit_155yk_11kuq_189",
+  "direction-button-wrapper-motion-exiting": "awsui_direction-button-wrapper-motion-exiting_155yk_11kuq_189",
+  "drag-handle-entry": "awsui_drag-handle-entry_155yk_11kuq_1",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_155yk_11kuq_1",
+  "drag-handle-exit": "awsui_drag-handle-exit_155yk_11kuq_1",
+  "awsui-motion-fade-out-0": "awsui_awsui-motion-fade-out-0_155yk_11kuq_1",
+  "direction-button-wrapper-block-start": "awsui_direction-button-wrapper-block-start_155yk_11kuq_229",
+  "direction-button-wrapper-block-end": "awsui_direction-button-wrapper-block-end_155yk_11kuq_233",
+  "direction-button-wrapper-inline-start": "awsui_direction-button-wrapper-inline-start_155yk_11kuq_237",
+  "direction-button-wrapper-inline-end": "awsui_direction-button-wrapper-inline-end_155yk_11kuq_238",
+  "direction-button-wrapper-rtl": "awsui_direction-button-wrapper-rtl_155yk_11kuq_238",
+  "drag-handle-wrapper": "awsui_drag-handle-wrapper_155yk_11kuq_247",
+  "portal-overlay": "awsui_portal-overlay_155yk_11kuq_252",
+  "portal-overlay-contents": "awsui_portal-overlay-contents_155yk_11kuq_260",
+  "drag-handle": "awsui_drag-handle_155yk_11kuq_247",
+  "direction-button-wrapper-hidden": "awsui_direction-button-wrapper-hidden_155yk_11kuq_277",
+  "direction-button": "awsui_direction-button_155yk_11kuq_169",
+  "direction-button-disabled": "awsui_direction-button-disabled_155yk_11kuq_320"
 };
   

package/lib/internal/template/internal/components/dropdown/styles.css.js

@@ -1,25 +1,25 @@
 
     import './styles.scoped.css';
     export default {
-  "dropdown-content-wrapper": "awsui_dropdown-content-wrapper_qwoo0_lmmh6_153",
-  "awsui-motion-fade-in-dropdown": "awsui_awsui-motion-fade-in-dropdown_qwoo0_lmmh6_1",
-  "refresh": "awsui_refresh_qwoo0_lmmh6_174",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_qwoo0_lmmh6_1",
-  "root": "awsui_root_qwoo0_lmmh6_199",
-  "interior": "awsui_interior_qwoo0_lmmh6_232",
-  "dropdown": "awsui_dropdown_qwoo0_lmmh6_153",
-  "use-portal": "awsui_use-portal_qwoo0_lmmh6_242",
-  "is-empty": "awsui_is-empty_qwoo0_lmmh6_288",
-  "dropdown-drop-up": "awsui_dropdown-drop-up_qwoo0_lmmh6_295",
-  "with-limited-width": "awsui_with-limited-width_qwoo0_lmmh6_299",
-  "dropdown-drop-left": "awsui_dropdown-drop-left_qwoo0_lmmh6_302",
-  "dropdown-drop-right": "awsui_dropdown-drop-right_qwoo0_lmmh6_305",
-  "occupy-entire-width": "awsui_occupy-entire-width_qwoo0_lmmh6_308",
-  "stretch-beyond-trigger-width": "awsui_stretch-beyond-trigger-width_qwoo0_lmmh6_311",
-  "hide-block-border": "awsui_hide-block-border_qwoo0_lmmh6_318",
-  "open": "awsui_open_qwoo0_lmmh6_327",
-  "nowrap": "awsui_nowrap_qwoo0_lmmh6_336",
-  "dropdown-content": "awsui_dropdown-content_qwoo0_lmmh6_153",
-  "stretch-trigger-height": "awsui_stretch-trigger-height_qwoo0_lmmh6_347"
+  "dropdown-content-wrapper": "awsui_dropdown-content-wrapper_qwoo0_p0d2p_153",
+  "awsui-motion-fade-in-dropdown": "awsui_awsui-motion-fade-in-dropdown_qwoo0_p0d2p_1",
+  "refresh": "awsui_refresh_qwoo0_p0d2p_174",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_qwoo0_p0d2p_1",
+  "root": "awsui_root_qwoo0_p0d2p_199",
+  "interior": "awsui_interior_qwoo0_p0d2p_232",
+  "dropdown": "awsui_dropdown_qwoo0_p0d2p_153",
+  "use-portal": "awsui_use-portal_qwoo0_p0d2p_242",
+  "is-empty": "awsui_is-empty_qwoo0_p0d2p_288",
+  "dropdown-drop-up": "awsui_dropdown-drop-up_qwoo0_p0d2p_295",
+  "with-limited-width": "awsui_with-limited-width_qwoo0_p0d2p_299",
+  "dropdown-drop-left": "awsui_dropdown-drop-left_qwoo0_p0d2p_302",
+  "dropdown-drop-right": "awsui_dropdown-drop-right_qwoo0_p0d2p_305",
+  "occupy-entire-width": "awsui_occupy-entire-width_qwoo0_p0d2p_308",
+  "stretch-beyond-trigger-width": "awsui_stretch-beyond-trigger-width_qwoo0_p0d2p_311",
+  "hide-block-border": "awsui_hide-block-border_qwoo0_p0d2p_318",
+  "open": "awsui_open_qwoo0_p0d2p_327",
+  "nowrap": "awsui_nowrap_qwoo0_p0d2p_336",
+  "dropdown-content": "awsui_dropdown-content_qwoo0_p0d2p_153",
+  "stretch-trigger-height": "awsui_stretch-trigger-height_qwoo0_p0d2p_347"
 };
   

package/lib/internal/template/internal/components/dropdown/styles.scoped.css

@@ -150,10 +150,10 @@ 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_dropdown-content-wrapper_qwoo0_lmmh6_153:not(#\9) {
-  animation: awsui_awsui-motion-fade-in-dropdown_qwoo0_lmmh6_1 var(--motion-duration-show-quick-i2gulq, 135ms) var(--motion-easing-show-quick-xucy9w, ease-out);
+.awsui_dropdown-content-wrapper_qwoo0_p0d2p_153:not(#\9) {
+  animation: awsui_awsui-motion-fade-in-dropdown_qwoo0_p0d2p_1 var(--motion-duration-show-quick-i2gulq, 135ms) var(--motion-easing-show-quick-xucy9w, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in-dropdown_qwoo0_lmmh6_1 {
+@keyframes awsui_awsui-motion-fade-in-dropdown_qwoo0_p0d2p_1 {
   from {
     opacity: 0.4;
   }
@@ -162,22 +162,22 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_dropdown-content-wrapper_qwoo0_lmmh6_153:not(#\9) {
+  .awsui_dropdown-content-wrapper_qwoo0_p0d2p_153:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_dropdown-content-wrapper_qwoo0_lmmh6_153:not(#\9), .awsui-mode-entering .awsui_dropdown-content-wrapper_qwoo0_lmmh6_153:not(#\9) {
+.awsui-motion-disabled .awsui_dropdown-content-wrapper_qwoo0_p0d2p_153:not(#\9), .awsui-mode-entering .awsui_dropdown-content-wrapper_qwoo0_p0d2p_153:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_dropdown-content-wrapper_qwoo0_lmmh6_153.awsui_refresh_qwoo0_lmmh6_174:not(#\9) {
+.awsui_dropdown-content-wrapper_qwoo0_p0d2p_153.awsui_refresh_qwoo0_p0d2p_174:not(#\9) {
   transform-origin: top;
-  animation-name: awsui_awsui-motion-fade-in-0_qwoo0_lmmh6_1;
+  animation-name: awsui_awsui-motion-fade-in-0_qwoo0_p0d2p_1;
   animation-duration: var(--motion-duration-show-quick-i2gulq, 135ms);
   animation-timing-function: var(--motion-easing-show-quick-xucy9w, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in-0_qwoo0_lmmh6_1 {
+@keyframes awsui_awsui-motion-fade-in-0_qwoo0_p0d2p_1 {
   from {
     opacity: 0;
   }
@@ -186,17 +186,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_dropdown-content-wrapper_qwoo0_lmmh6_153.awsui_refresh_qwoo0_lmmh6_174:not(#\9) {
+  .awsui_dropdown-content-wrapper_qwoo0_p0d2p_153.awsui_refresh_qwoo0_p0d2p_174:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_dropdown-content-wrapper_qwoo0_lmmh6_153.awsui_refresh_qwoo0_lmmh6_174:not(#\9), .awsui-mode-entering .awsui_dropdown-content-wrapper_qwoo0_lmmh6_153.awsui_refresh_qwoo0_lmmh6_174:not(#\9) {
+.awsui-motion-disabled .awsui_dropdown-content-wrapper_qwoo0_p0d2p_153.awsui_refresh_qwoo0_p0d2p_174:not(#\9), .awsui-mode-entering .awsui_dropdown-content-wrapper_qwoo0_p0d2p_153.awsui_refresh_qwoo0_p0d2p_174:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_qwoo0_lmmh6_199:not(#\9) {
+.awsui_root_qwoo0_p0d2p_199:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -229,34 +229,34 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   position: relative;
   white-space: inherit;
 }
-.awsui_root_qwoo0_lmmh6_199.awsui_interior_qwoo0_lmmh6_232:not(#\9) {
+.awsui_root_qwoo0_p0d2p_199.awsui_interior_qwoo0_p0d2p_232:not(#\9) {
   position: static;
 }
 
-.awsui_dropdown_qwoo0_lmmh6_153:not(#\9) {
+.awsui_dropdown_qwoo0_p0d2p_153:not(#\9) {
   position: absolute;
   display: none;
   z-index: 2000;
   transform-origin: top;
 }
-.awsui_dropdown_qwoo0_lmmh6_153.awsui_use-portal_qwoo0_lmmh6_242:not(#\9) {
+.awsui_dropdown_qwoo0_p0d2p_153.awsui_use-portal_qwoo0_p0d2p_242:not(#\9) {
   z-index: 7000;
 }
-.awsui_dropdown_qwoo0_lmmh6_153:not(#\9):not(.awsui_interior_qwoo0_lmmh6_232) {
+.awsui_dropdown_qwoo0_p0d2p_153:not(#\9):not(.awsui_interior_qwoo0_p0d2p_232) {
   transform: translateY(0px);
   transition: transform var(--motion-duration-show-quick-i2gulq, 135ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_dropdown_qwoo0_lmmh6_153:not(#\9):not(.awsui_interior_qwoo0_lmmh6_232) {
+  .awsui_dropdown_qwoo0_p0d2p_153:not(#\9):not(.awsui_interior_qwoo0_p0d2p_232) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_dropdown_qwoo0_lmmh6_153:not(#\9):not(.awsui_interior_qwoo0_lmmh6_232), .awsui-mode-entering .awsui_dropdown_qwoo0_lmmh6_153:not(#\9):not(.awsui_interior_qwoo0_lmmh6_232) {
+.awsui-motion-disabled .awsui_dropdown_qwoo0_p0d2p_153:not(#\9):not(.awsui_interior_qwoo0_p0d2p_232), .awsui-mode-entering .awsui_dropdown_qwoo0_p0d2p_153:not(#\9):not(.awsui_interior_qwoo0_p0d2p_232) {
   animation: none;
   transition: none;
 }
-.awsui_dropdown-content-wrapper_qwoo0_lmmh6_153:not(#\9) {
+.awsui_dropdown-content-wrapper_qwoo0_p0d2p_153:not(#\9) {
   position: relative;
   background-color: var(--color-background-dropdown-item-default-fhmksr, #ffffff);
   outline: none;
@@ -268,7 +268,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-block: var(--border-divider-list-width-8ggz94, 1px) solid var(--color-border-container-top-svitxz, #eaeded);
   box-sizing: border-box;
 }
-.awsui_dropdown-content-wrapper_qwoo0_lmmh6_153:not(#\9)::after {
+.awsui_dropdown-content-wrapper_qwoo0_p0d2p_153:not(#\9)::after {
   content: "";
   position: absolute;
   z-index: 1;
@@ -285,65 +285,65 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-dropdown-oaxffg, 0px);
   pointer-events: none;
 }
-.awsui_dropdown-content-wrapper_qwoo0_lmmh6_153.awsui_is-empty_qwoo0_lmmh6_288:not(#\9)::after {
+.awsui_dropdown-content-wrapper_qwoo0_p0d2p_153.awsui_is-empty_qwoo0_p0d2p_288:not(#\9)::after {
   display: none;
 }
-.awsui_dropdown_qwoo0_lmmh6_153 > .awsui_dropdown-content-wrapper_qwoo0_lmmh6_153:not(#\9) {
+.awsui_dropdown_qwoo0_p0d2p_153 > .awsui_dropdown-content-wrapper_qwoo0_p0d2p_153:not(#\9) {
   border-block-start: var(--border-divider-list-width-8ggz94, 1px) solid var(--color-border-container-top-svitxz, #eaeded);
   border-block-end: var(--border-divider-list-width-8ggz94, 1px) solid var(--color-border-dropdown-group-dg9zg5, #eaeded);
 }
-.awsui_dropdown-drop-up_qwoo0_lmmh6_295 > .awsui_dropdown-content-wrapper_qwoo0_lmmh6_153:not(#\9) {
+.awsui_dropdown-drop-up_qwoo0_p0d2p_295 > .awsui_dropdown-content-wrapper_qwoo0_p0d2p_153:not(#\9) {
   transform-origin: bottom;
   box-shadow: var(--shadow-dropup-44quix, 0 -1px 1px 0 rgba(0, 28, 36, 0.3), 1px -1px 1px 0 rgba(0, 28, 36, 0.15), -1px -1px 1px 0 rgba(0, 28, 36, 0.15));
 }
-.awsui_dropdown-drop-up_qwoo0_lmmh6_295.awsui_with-limited-width_qwoo0_lmmh6_299 > .awsui_dropdown-content-wrapper_qwoo0_lmmh6_153:not(#\9) {
+.awsui_dropdown-drop-up_qwoo0_p0d2p_295.awsui_with-limited-width_qwoo0_p0d2p_299 > .awsui_dropdown-content-wrapper_qwoo0_p0d2p_153:not(#\9) {
   border-block-start: none;
 }
-.awsui_dropdown-drop-left_qwoo0_lmmh6_302:not(#\9) {
+.awsui_dropdown-drop-left_qwoo0_p0d2p_302:not(#\9) {
   inset-inline-end: 0;
 }
-.awsui_dropdown-drop-right_qwoo0_lmmh6_305:not(#\9) {
+.awsui_dropdown-drop-right_qwoo0_p0d2p_305:not(#\9) {
   inset-inline-start: 0;
 }
-.awsui_dropdown_qwoo0_lmmh6_153.awsui_occupy-entire-width_qwoo0_lmmh6_308:not(#\9) {
+.awsui_dropdown_qwoo0_p0d2p_153.awsui_occupy-entire-width_qwoo0_p0d2p_308:not(#\9) {
   min-inline-size: 100%;
 }
-.awsui_dropdown_qwoo0_lmmh6_153.awsui_stretch-beyond-trigger-width_qwoo0_lmmh6_311:not(#\9) {
+.awsui_dropdown_qwoo0_p0d2p_153.awsui_stretch-beyond-trigger-width_qwoo0_p0d2p_311:not(#\9) {
   inline-size: max-content;
-  max-inline-size: var(--awsui-dropdown-default-max-width-kcc2gu, 100%);
+  max-inline-size: var(--awsui-dropdown-default-max-width-mdigke, 100%);
 }
-.awsui_dropdown_qwoo0_lmmh6_153.awsui_interior_qwoo0_lmmh6_232 > .awsui_dropdown-content-wrapper_qwoo0_lmmh6_153:not(#\9) {
+.awsui_dropdown_qwoo0_p0d2p_153.awsui_interior_qwoo0_p0d2p_232 > .awsui_dropdown-content-wrapper_qwoo0_p0d2p_153:not(#\9) {
   margin-block-start: -1px;
 }
-.awsui_dropdown_qwoo0_lmmh6_153.awsui_hide-block-border_qwoo0_lmmh6_318 > .awsui_dropdown-content-wrapper_qwoo0_lmmh6_153:not(#\9) {
+.awsui_dropdown_qwoo0_p0d2p_153.awsui_hide-block-border_qwoo0_p0d2p_318 > .awsui_dropdown-content-wrapper_qwoo0_p0d2p_153:not(#\9) {
   border-block-start: none;
 }
-.awsui_dropdown_qwoo0_lmmh6_153.awsui_hide-block-border_qwoo0_lmmh6_318:not(#\9):not(.awsui_dropdown-drop-up_qwoo0_lmmh6_295) > .awsui_dropdown-content-wrapper_qwoo0_lmmh6_153 {
+.awsui_dropdown_qwoo0_p0d2p_153.awsui_hide-block-border_qwoo0_p0d2p_318:not(#\9):not(.awsui_dropdown-drop-up_qwoo0_p0d2p_295) > .awsui_dropdown-content-wrapper_qwoo0_p0d2p_153 {
   border-block-end: none;
 }
-.awsui_dropdown_qwoo0_lmmh6_153.awsui_hide-block-border_qwoo0_lmmh6_318.awsui_refresh_qwoo0_lmmh6_174 > .awsui_dropdown-content-wrapper_qwoo0_lmmh6_153:not(#\9) {
+.awsui_dropdown_qwoo0_p0d2p_153.awsui_hide-block-border_qwoo0_p0d2p_318.awsui_refresh_qwoo0_p0d2p_174 > .awsui_dropdown-content-wrapper_qwoo0_p0d2p_153:not(#\9) {
   border-block-end: none;
 }
-.awsui_dropdown_qwoo0_lmmh6_153.awsui_open_qwoo0_lmmh6_327:not(#\9) {
+.awsui_dropdown_qwoo0_p0d2p_153.awsui_open_qwoo0_p0d2p_327:not(#\9) {
   display: block;
 }
-.awsui_dropdown_qwoo0_lmmh6_153.awsui_open_qwoo0_lmmh6_327:not(#\9):not(.awsui_interior_qwoo0_lmmh6_232).awsui_refresh_qwoo0_lmmh6_174[data-animating=true] {
+.awsui_dropdown_qwoo0_p0d2p_153.awsui_open_qwoo0_p0d2p_327:not(#\9):not(.awsui_interior_qwoo0_p0d2p_232).awsui_refresh_qwoo0_p0d2p_174[data-animating=true] {
   transform: translateY(4px);
 }
-.awsui_dropdown_qwoo0_lmmh6_153.awsui_open_qwoo0_lmmh6_327:not(#\9):not(.awsui_interior_qwoo0_lmmh6_232).awsui_refresh_qwoo0_lmmh6_174[data-animating=true].awsui_dropdown-drop-up_qwoo0_lmmh6_295 {
+.awsui_dropdown_qwoo0_p0d2p_153.awsui_open_qwoo0_p0d2p_327:not(#\9):not(.awsui_interior_qwoo0_p0d2p_232).awsui_refresh_qwoo0_p0d2p_174[data-animating=true].awsui_dropdown-drop-up_qwoo0_p0d2p_295 {
   transform: translateY(-4px);
 }
-.awsui_dropdown_qwoo0_lmmh6_153.awsui_open_qwoo0_lmmh6_327.awsui_nowrap_qwoo0_lmmh6_336:not(#\9) {
+.awsui_dropdown_qwoo0_p0d2p_153.awsui_open_qwoo0_p0d2p_327.awsui_nowrap_qwoo0_p0d2p_336:not(#\9) {
   white-space: nowrap;
   overflow: scroll;
 }
 
-.awsui_dropdown-content_qwoo0_lmmh6_153:not(#\9) {
+.awsui_dropdown-content_qwoo0_p0d2p_153:not(#\9) {
   display: flex;
   flex-direction: column;
   inline-size: 100%;
 }
 
-.awsui_stretch-trigger-height_qwoo0_lmmh6_347:not(#\9) {
+.awsui_stretch-trigger-height_qwoo0_p0d2p_347:not(#\9) {
   block-size: 100%;
 }

package/lib/internal/template/internal/components/dropdown/styles.selectors.js

@@ -2,25 +2,25 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "dropdown-content-wrapper": "awsui_dropdown-content-wrapper_qwoo0_lmmh6_153",
-  "awsui-motion-fade-in-dropdown": "awsui_awsui-motion-fade-in-dropdown_qwoo0_lmmh6_1",
-  "refresh": "awsui_refresh_qwoo0_lmmh6_174",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_qwoo0_lmmh6_1",
-  "root": "awsui_root_qwoo0_lmmh6_199",
-  "interior": "awsui_interior_qwoo0_lmmh6_232",
-  "dropdown": "awsui_dropdown_qwoo0_lmmh6_153",
-  "use-portal": "awsui_use-portal_qwoo0_lmmh6_242",
-  "is-empty": "awsui_is-empty_qwoo0_lmmh6_288",
-  "dropdown-drop-up": "awsui_dropdown-drop-up_qwoo0_lmmh6_295",
-  "with-limited-width": "awsui_with-limited-width_qwoo0_lmmh6_299",
-  "dropdown-drop-left": "awsui_dropdown-drop-left_qwoo0_lmmh6_302",
-  "dropdown-drop-right": "awsui_dropdown-drop-right_qwoo0_lmmh6_305",
-  "occupy-entire-width": "awsui_occupy-entire-width_qwoo0_lmmh6_308",
-  "stretch-beyond-trigger-width": "awsui_stretch-beyond-trigger-width_qwoo0_lmmh6_311",
-  "hide-block-border": "awsui_hide-block-border_qwoo0_lmmh6_318",
-  "open": "awsui_open_qwoo0_lmmh6_327",
-  "nowrap": "awsui_nowrap_qwoo0_lmmh6_336",
-  "dropdown-content": "awsui_dropdown-content_qwoo0_lmmh6_153",
-  "stretch-trigger-height": "awsui_stretch-trigger-height_qwoo0_lmmh6_347"
+  "dropdown-content-wrapper": "awsui_dropdown-content-wrapper_qwoo0_p0d2p_153",
+  "awsui-motion-fade-in-dropdown": "awsui_awsui-motion-fade-in-dropdown_qwoo0_p0d2p_1",
+  "refresh": "awsui_refresh_qwoo0_p0d2p_174",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_qwoo0_p0d2p_1",
+  "root": "awsui_root_qwoo0_p0d2p_199",
+  "interior": "awsui_interior_qwoo0_p0d2p_232",
+  "dropdown": "awsui_dropdown_qwoo0_p0d2p_153",
+  "use-portal": "awsui_use-portal_qwoo0_p0d2p_242",
+  "is-empty": "awsui_is-empty_qwoo0_p0d2p_288",
+  "dropdown-drop-up": "awsui_dropdown-drop-up_qwoo0_p0d2p_295",
+  "with-limited-width": "awsui_with-limited-width_qwoo0_p0d2p_299",
+  "dropdown-drop-left": "awsui_dropdown-drop-left_qwoo0_p0d2p_302",
+  "dropdown-drop-right": "awsui_dropdown-drop-right_qwoo0_p0d2p_305",
+  "occupy-entire-width": "awsui_occupy-entire-width_qwoo0_p0d2p_308",
+  "stretch-beyond-trigger-width": "awsui_stretch-beyond-trigger-width_qwoo0_p0d2p_311",
+  "hide-block-border": "awsui_hide-block-border_qwoo0_p0d2p_318",
+  "open": "awsui_open_qwoo0_p0d2p_327",
+  "nowrap": "awsui_nowrap_qwoo0_p0d2p_336",
+  "dropdown-content": "awsui_dropdown-content_qwoo0_p0d2p_153",
+  "stretch-trigger-height": "awsui_stretch-trigger-height_qwoo0_p0d2p_347"
 };
   

package/lib/internal/template/internal/components/sortable-area/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/sortable-area/index.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAMjD,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,IAAI,EAAE,EACzC,KAAK,EACL,cAAc,EACd,UAAU,EACV,aAAa,EACb,cAAc,EACd,WAAW,GACZ,EAAE,iBAAiB,CAAC,IAAI,CAAC,eA8EzB;AA2ED,wBAAgB,sBAAsB,CACpC,cAAc,EAAE,iBAAiB,CAAC,cAAc,CAAC,GAAG,CAAC,GACpD,iBAAiB,CAAC,mBAAmB,CAEvC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/sortable-area/index.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAOjD,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,IAAI,EAAE,EACzC,KAAK,EACL,cAAc,EACd,UAAU,EACV,aAAa,EACb,cAAc,EACd,WAAW,GACZ,EAAE,iBAAiB,CAAC,IAAI,CAAC,eAiFzB;AA+FD,wBAAgB,sBAAsB,CACpC,cAAc,EAAE,iBAAiB,CAAC,cAAc,CAAC,GAAG,CAAC,GACpD,iBAAiB,CAAC,mBAAmB,CAEvC"}

package/lib/internal/template/internal/components/sortable-area/index.js

@@ -8,12 +8,13 @@ import clsx from 'clsx';
 import { Portal } from '@cloudscape-design/component-toolkit/internal';
 import { fireNonCancelableEvent } from '../../events';
 import { joinStrings } from '../../utils/strings';
+import { EventName } from './keyboard-sensor/utilities/events';
 import useDragAndDropReorder from './use-drag-and-drop-reorder';
 import useLiveAnnouncements from './use-live-announcements';
 import styles from './styles.css.js';
 export default function SortableArea({ items, itemDefinition, renderItem, onItemsChange, disableReorder, i18nStrings, }) {
     var _a;
-    const { activeItemId, setActiveItemId, collisionDetection, handleKeyDown, sensors } = useDragAndDropReorder({
+    const { activeItemId, setActiveItemId, collisionDetection, handleKeyDown, sensors, isKeyboard } = useDragAndDropReorder({
         items,
         itemDefinition,
     });
@@ -38,9 +39,9 @@ export default function SortableArea({ items, itemDefinition, renderItem, onItem
                 fireNonCancelableEvent(onItemsChange, { items: arrayMove([...items], oldIndex, newIndex), movedItem });
             }
         }, onDragCancel: () => setActiveItemId(null) },
-        React.createElement(SortableContext, { disabled: disableReorder, items: items.map(item => itemDefinition.id(item)), strategy: verticalListSortingStrategy }, items.map(item => (React.createElement(DraggableItem, { key: itemDefinition.id(item), item: item, itemDefinition: itemDefinition, renderItem: renderItem, onKeyDown: handleKeyDown, dragHandleAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.dragHandleAriaLabel })))),
+        React.createElement(SortableContext, { disabled: disableReorder, items: items.map(item => itemDefinition.id(item)), strategy: verticalListSortingStrategy }, items.map(item => (React.createElement(DraggableItem, { key: itemDefinition.id(item), item: item, itemDefinition: itemDefinition, showDirectionButtons: item === activeItem && isKeyboard.current, renderItem: renderItem, onKeyDown: handleKeyDown, dragHandleAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.dragHandleAriaLabel })))),
         React.createElement(Portal, { container: portalContainer },
-            React.createElement(DragOverlay, { className: clsx(styles['drag-overlay'], styles[`drag-overlay-${getBorderRadiusVariant(itemDefinition)}`]), dropAnimation: null, style: { zIndex: 5000 } }, activeItem &&
+            React.createElement(DragOverlay, { className: clsx(styles['drag-overlay'], styles[`drag-overlay-${getBorderRadiusVariant(itemDefinition)}`]), dropAnimation: null, style: { zIndex: 5000 }, transition: isKeyboard.current ? 'transform 250ms' : '' }, activeItem &&
                 renderItem({
                     item: activeItem,
                     id: activeItemId.toString(),
@@ -71,7 +72,7 @@ function usePortalContainer() {
     }, []);
     return portalContainerRef.current;
 }
-function DraggableItem({ item, itemDefinition, dragHandleAriaLabel, onKeyDown, renderItem, }) {
+function DraggableItem({ item, itemDefinition, dragHandleAriaLabel, showDirectionButtons, onKeyDown, renderItem, }) {
     var _a;
     const id = itemDefinition.id(item);
     const { isDragging, isSorting, listeners, setNodeRef, transform, attributes } = useSortable({
@@ -89,6 +90,7 @@ function DraggableItem({ item, itemDefinition, dragHandleAriaLabel, onKeyDown, r
                 }
             } });
     const className = clsx(isDragging && clsx(styles.placeholder, styles[`placeholder-${getBorderRadiusVariant(itemDefinition)}`]), isSorting && styles.sorting);
+    const dragHandleRef = useRef(null);
     return (React.createElement(React.Fragment, null, renderItem({
         item,
         id,
@@ -98,7 +100,20 @@ function DraggableItem({ item, itemDefinition, dragHandleAriaLabel, onKeyDown, r
         isDropPlaceholder: isDragging,
         isSortingActive: isSorting,
         isDragGhost: false,
-        dragHandleProps: Object.assign(Object.assign({}, dragHandleListeners), { ariaLabel: (_a = joinStrings(dragHandleAriaLabel, itemDefinition.label(item))) !== null && _a !== void 0 ? _a : '', ariaDescribedby: attributes['aria-describedby'], disabled: attributes['aria-disabled'] }),
+        dragHandleProps: Object.assign(Object.assign({}, dragHandleListeners), { ariaLabel: (_a = joinStrings(dragHandleAriaLabel, itemDefinition.label(item))) !== null && _a !== void 0 ? _a : '', ariaDescribedby: attributes['aria-describedby'], disabled: attributes['aria-disabled'], triggerMode: 'controlled', controlledShowButtons: showDirectionButtons, ref: dragHandleRef, directions: showDirectionButtons
+                ? {
+                    'block-start': 'active',
+                    'block-end': 'active',
+                }
+                : undefined, onDirectionClick: direction => {
+                var _a;
+                const event = new Event(direction === 'block-start' ? EventName.CustomUp : EventName.CustomDown, {
+                    bubbles: true,
+                    cancelable: true,
+                });
+                onKeyDown(event);
+                (_a = dragHandleRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
+            } }),
     })));
 }
 export function getBorderRadiusVariant(itemDefinition) {

package/lib/internal/template/internal/components/sortable-area/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/sortable-area/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,WAAW,EAAE,2BAA2B,EAAE,MAAM,mBAAmB,CAAC;AACzG,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,MAAM,EAAE,MAAM,+CAA+C,CAAC;AAEvE,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAElD,OAAO,qBAAqB,MAAM,6BAA6B,CAAC;AAChE,OAAO,oBAAoB,MAAM,0BAA0B,CAAC;AAE5D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,CAAC,OAAO,UAAU,YAAY,CAAO,EACzC,KAAK,EACL,cAAc,EACd,UAAU,EACV,aAAa,EACb,cAAc,EACd,WAAW,GACa;;IACxB,MAAM,EAAE,YAAY,EAAE,eAAe,EAAE,kBAAkB,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,qBAAqB,CAAC;QAC1G,KAAK;QACL,cAAc;KACf,CAAC,CAAC;IACH,MAAM,UAAU,GAAG,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;IACtG,MAAM,UAAU,GAAG,YAAY,KAAK,IAAI,CAAC;IACzC,MAAM,aAAa,GAAG,oBAAoB,iBAAG,KAAK,EAAE,cAAc,EAAE,UAAU,IAAK,WAAW,EAAG,CAAC;IAClG,MAAM,eAAe,GAAG,kBAAkB,EAAE,CAAC;IAC7C,OAAO,CACL,oBAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,kBAAkB,EAAE,kBAAkB,EACtC,aAAa,EAAE;YACb,aAAa;YACb,YAAY,EAAE,KAAK;YACnB,wBAAwB,EAAE,CAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,yBAAyB;gBAC9D,CAAC,CAAC,EAAE,SAAS,EAAE,WAAW,CAAC,yBAAyB,EAAE;gBACtD,CAAC,CAAC,SAAS;YACb,SAAS,EAAE,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,SAAS;SACxC,EACD,WAAW,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,CAAC,EACvD,SAAS,EAAE,KAAK,CAAC,EAAE;YACjB,eAAe,CAAC,IAAI,CAAC,CAAC;YACtB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;YAC/B,IAAI,IAAI,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE;gBACjC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,EAAE,CAAE,CAAC;gBAC7E,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,EAAE,CAAC,CAAC;gBAChF,MAAM,QAAQ,GAAG,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,EAAE,CAAC,CAAC;gBAC9E,sBAAsB,CAAC,aAAa,EAAE,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,EAAE,QAAQ,EAAE,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC,CAAC;aACxG;QACH,CAAC,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC;QAEzC,oBAAC,eAAe,IACd,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,cAAc,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,EACjD,QAAQ,EAAE,2BAA2B,IAEpC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACjB,oBAAC,aAAa,IACZ,GAAG,EAAE,cAAc,CAAC,EAAE,CAAC,IAAI,CAAC,EAC5B,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,aAAa,EACxB,mBAAmB,EAAE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,GACrD,CACH,CAAC,CACc;QAElB,oBAAC,MAAM,IAAC,SAAS,EAAE,eAAe;YAGhC,oBAAC,WAAW,IACV,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,EAAE,MAAM,CAAC,gBAAgB,sBAAsB,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,EACzG,aAAa,EAAE,IAAI,EACnB,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,IAEtB,UAAU;gBACT,UAAU,CAAC;oBACT,IAAI,EAAE,UAAU;oBAChB,EAAE,EAAE,YAAa,CAAC,QAAQ,EAAE;oBAC5B,KAAK,EAAE,EAAE;oBACT,SAAS,EAAE,MAAM,CAAC,MAAM;oBACxB,iBAAiB,EAAE,IAAI;oBACvB,eAAe,EAAE,KAAK;oBACtB,WAAW,EAAE,IAAI;oBACjB,eAAe,EAAE;wBACf,SAAS,EAAE,MAAA,WAAW,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,mBAAmB,EAAE,cAAc,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,mCAAI,EAAE;wBAChG,MAAM,EAAE,IAAI;wBACZ,SAAS,EAAE,aAAa;qBACzB;iBACF,CAAC,CACQ,CACP,CACE,CACd,CAAC;AACJ,CAAC;AAED,SAAS,kBAAkB;IACzB,MAAM,kBAAkB,GAAG,MAAM,CAAC,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC1G,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,kBAAkB,CAAC,OAAO,CAAC;QAC7C,IAAI,SAAS,IAAI,CAAC,SAAS,CAAC,WAAW,EAAE;YACvC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;SACtC;QACD,OAAO,GAAG,EAAE;YACV,IAAI,SAAS,IAAI,SAAS,CAAC,WAAW,EAAE;gBACtC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;aACtC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,kBAAkB,CAAC,OAAO,CAAC;AACpC,CAAC;AAED,SAAS,aAAa,CAAO,EAC3B,IAAI,EACJ,cAAc,EACd,mBAAmB,EACnB,SAAS,EACT,UAAU,GAOX;;IACC,MAAM,EAAE,GAAG,cAAc,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;IACnC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,WAAW,CAAC;QAC1F,EAAE;KACH,CAAC,CAAC;IACH,MAAM,KAAK,GAAG,EAAE,SAAS,EAAE,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;IAC/D,MAAM,mBAAmB,GAAG,UAAU,CAAC,eAAe,CAAC;QACrD,CAAC,CAAC,EAAE;QACJ,CAAC,iCACM,SAAS,KACZ,SAAS,EAAE,CAAC,KAA0B,EAAE,EAAE;gBACxC,IAAI,SAAS,EAAE;oBACb,SAAS,CAAC,KAAK,CAAC,CAAC;iBAClB;gBACD,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,EAAE;oBACxB,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;iBAC5B;YACH,CAAC,GACF,CAAC;IACN,MAAM,SAAS,GAAG,IAAI,CACpB,UAAU,IAAI,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,eAAe,sBAAsB,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC,EACvG,SAAS,IAAI,MAAM,CAAC,OAAO,CAC5B,CAAC;IACF,OAAO,CACL,0CACG,UAAU,CAAC;QACV,IAAI;QACJ,EAAE;QACF,GAAG,EAAE,UAAU;QACf,KAAK;QACL,SAAS;QACT,iBAAiB,EAAE,UAAU;QAC7B,eAAe,EAAE,SAAS;QAC1B,WAAW,EAAE,KAAK;QAClB,eAAe,kCACV,mBAAmB,KACtB,SAAS,EAAE,MAAA,WAAW,CAAC,mBAAmB,EAAE,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,mCAAI,EAAE,EAC7E,eAAe,EAAE,UAAU,CAAC,kBAAkB,CAAC,EAC/C,QAAQ,EAAE,UAAU,CAAC,eAAe,CAAC,GACtC;KACF,CAAC,CACD,CACJ,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,sBAAsB,CACpC,cAAqD;;IAErD,OAAO,MAAA,cAAc,CAAC,YAAY,mCAAI,MAAM,CAAC;AAC/C,CAAC","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 { Portal } from '@cloudscape-design/component-toolkit/internal';\n\nimport { fireNonCancelableEvent } from '../../events';\nimport { joinStrings } from '../../utils/strings';\nimport { SortableAreaProps } 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 { SortableAreaProps };\n\nexport default function SortableArea<Item>({\n  items,\n  itemDefinition,\n  renderItem,\n  onItemsChange,\n  disableReorder,\n  i18nStrings,\n}: SortableAreaProps<Item>) {\n  const { activeItemId, setActiveItemId, collisionDetection, handleKeyDown, sensors } = useDragAndDropReorder({\n    items,\n    itemDefinition,\n  });\n  const activeItem = activeItemId ? items.find(item => itemDefinition.id(item) === activeItemId) : null;\n  const isDragging = activeItemId !== null;\n  const announcements = useLiveAnnouncements({ items, itemDefinition, 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 ?? undefined,\n      }}\n      onDragStart={({ active }) => setActiveItemId(active.id)}\n      onDragEnd={event => {\n        setActiveItemId(null);\n        const { active, over } = event;\n        if (over && active.id !== over.id) {\n          const movedItem = items.find(item => itemDefinition.id(item) === active.id)!;\n          const oldIndex = items.findIndex(item => itemDefinition.id(item) === active.id);\n          const newIndex = items.findIndex(item => itemDefinition.id(item) === over.id);\n          fireNonCancelableEvent(onItemsChange, { items: arrayMove([...items], oldIndex, newIndex), movedItem });\n        }\n      }}\n      onDragCancel={() => setActiveItemId(null)}\n    >\n      <SortableContext\n        disabled={disableReorder}\n        items={items.map(item => itemDefinition.id(item))}\n        strategy={verticalListSortingStrategy}\n      >\n        {items.map(item => (\n          <DraggableItem\n            key={itemDefinition.id(item)}\n            item={item}\n            itemDefinition={itemDefinition}\n            renderItem={renderItem}\n            onKeyDown={handleKeyDown}\n            dragHandleAriaLabel={i18nStrings?.dragHandleAriaLabel}\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-${getBorderRadiusVariant(itemDefinition)}`])}\n          dropAnimation={null}\n          style={{ zIndex: 5000 }}\n        >\n          {activeItem &&\n            renderItem({\n              item: activeItem,\n              id: activeItemId!.toString(),\n              style: {},\n              className: styles.active,\n              isDropPlaceholder: true,\n              isSortingActive: false,\n              isDragGhost: true,\n              dragHandleProps: {\n                ariaLabel: joinStrings(i18nStrings?.dragHandleAriaLabel, itemDefinition.label(activeItem)) ?? '',\n                active: true,\n                onKeyDown: handleKeyDown,\n              },\n            })}\n        </DragOverlay>\n      </Portal>\n    </DndContext>\n  );\n}\n\nfunction usePortalContainer() {\n  const portalContainerRef = useRef(typeof document !== 'undefined' ? document.createElement('div') : null);\n  useEffect(() => {\n    const container = portalContainerRef.current;\n    if (container && !container.isConnected) {\n      document.body.appendChild(container);\n    }\n    return () => {\n      if (container && container.isConnected) {\n        document.body.removeChild(container);\n      }\n    };\n  }, []);\n  return portalContainerRef.current;\n}\n\nfunction DraggableItem<Item>({\n  item,\n  itemDefinition,\n  dragHandleAriaLabel,\n  onKeyDown,\n  renderItem,\n}: {\n  item: Item;\n  itemDefinition: SortableAreaProps.ItemDefinition<Item>;\n  dragHandleAriaLabel?: string;\n  onKeyDown: (event: React.KeyboardEvent) => void;\n  renderItem: (props: SortableAreaProps.RenderItemProps<Item>) => React.ReactNode;\n}) {\n  const id = itemDefinition.id(item);\n  const { isDragging, isSorting, listeners, setNodeRef, transform, attributes } = useSortable({\n    id,\n  });\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-${getBorderRadiusVariant(itemDefinition)}`]),\n    isSorting && styles.sorting\n  );\n  return (\n    <>\n      {renderItem({\n        item,\n        id,\n        ref: setNodeRef,\n        style,\n        className,\n        isDropPlaceholder: isDragging,\n        isSortingActive: isSorting,\n        isDragGhost: false,\n        dragHandleProps: {\n          ...dragHandleListeners,\n          ariaLabel: joinStrings(dragHandleAriaLabel, itemDefinition.label(item)) ?? '',\n          ariaDescribedby: attributes['aria-describedby'],\n          disabled: attributes['aria-disabled'],\n        },\n      })}\n    </>\n  );\n}\n\nexport function getBorderRadiusVariant(\n  itemDefinition: SortableAreaProps.ItemDefinition<any>\n): SortableAreaProps.BorderRadiusVariant {\n  return itemDefinition.borderRadius ?? 'item';\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/sortable-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 { Portal } from '@cloudscape-design/component-toolkit/internal';\n\nimport { fireNonCancelableEvent } from '../../events';\nimport { joinStrings } from '../../utils/strings';\nimport { SortableAreaProps } from './interfaces';\nimport { EventName } from './keyboard-sensor/utilities/events';\nimport useDragAndDropReorder from './use-drag-and-drop-reorder';\nimport useLiveAnnouncements from './use-live-announcements';\n\nimport styles from './styles.css.js';\n\nexport { SortableAreaProps };\n\nexport default function SortableArea<Item>({\n  items,\n  itemDefinition,\n  renderItem,\n  onItemsChange,\n  disableReorder,\n  i18nStrings,\n}: SortableAreaProps<Item>) {\n  const { activeItemId, setActiveItemId, collisionDetection, handleKeyDown, sensors, isKeyboard } =\n    useDragAndDropReorder({\n      items,\n      itemDefinition,\n    });\n  const activeItem = activeItemId ? items.find(item => itemDefinition.id(item) === activeItemId) : null;\n  const isDragging = activeItemId !== null;\n  const announcements = useLiveAnnouncements({ items, itemDefinition, 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 ?? undefined,\n      }}\n      onDragStart={({ active }) => setActiveItemId(active.id)}\n      onDragEnd={event => {\n        setActiveItemId(null);\n        const { active, over } = event;\n        if (over && active.id !== over.id) {\n          const movedItem = items.find(item => itemDefinition.id(item) === active.id)!;\n          const oldIndex = items.findIndex(item => itemDefinition.id(item) === active.id);\n          const newIndex = items.findIndex(item => itemDefinition.id(item) === over.id);\n          fireNonCancelableEvent(onItemsChange, { items: arrayMove([...items], oldIndex, newIndex), movedItem });\n        }\n      }}\n      onDragCancel={() => setActiveItemId(null)}\n    >\n      <SortableContext\n        disabled={disableReorder}\n        items={items.map(item => itemDefinition.id(item))}\n        strategy={verticalListSortingStrategy}\n      >\n        {items.map(item => (\n          <DraggableItem\n            key={itemDefinition.id(item)}\n            item={item}\n            itemDefinition={itemDefinition}\n            showDirectionButtons={item === activeItem && isKeyboard.current}\n            renderItem={renderItem}\n            onKeyDown={handleKeyDown}\n            dragHandleAriaLabel={i18nStrings?.dragHandleAriaLabel}\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-${getBorderRadiusVariant(itemDefinition)}`])}\n          dropAnimation={null}\n          style={{ zIndex: 5000 }}\n          transition={isKeyboard.current ? 'transform 250ms' : ''}\n        >\n          {activeItem &&\n            renderItem({\n              item: activeItem,\n              id: activeItemId!.toString(),\n              style: {},\n              className: styles.active,\n              isDropPlaceholder: true,\n              isSortingActive: false,\n              isDragGhost: true,\n              dragHandleProps: {\n                ariaLabel: joinStrings(i18nStrings?.dragHandleAriaLabel, itemDefinition.label(activeItem)) ?? '',\n                active: true,\n                onKeyDown: handleKeyDown,\n              },\n            })}\n        </DragOverlay>\n      </Portal>\n    </DndContext>\n  );\n}\n\nfunction usePortalContainer() {\n  const portalContainerRef = useRef(typeof document !== 'undefined' ? document.createElement('div') : null);\n  useEffect(() => {\n    const container = portalContainerRef.current;\n    if (container && !container.isConnected) {\n      document.body.appendChild(container);\n    }\n    return () => {\n      if (container && container.isConnected) {\n        document.body.removeChild(container);\n      }\n    };\n  }, []);\n  return portalContainerRef.current;\n}\n\nfunction DraggableItem<Item>({\n  item,\n  itemDefinition,\n  dragHandleAriaLabel,\n  showDirectionButtons,\n  onKeyDown,\n  renderItem,\n}: {\n  item: Item;\n  itemDefinition: SortableAreaProps.ItemDefinition<Item>;\n  dragHandleAriaLabel?: string;\n  showDirectionButtons: boolean;\n  onKeyDown: (event: React.KeyboardEvent) => void;\n  renderItem: (props: SortableAreaProps.RenderItemProps<Item>) => React.ReactNode;\n}) {\n  const id = itemDefinition.id(item);\n  const { isDragging, isSorting, listeners, setNodeRef, transform, attributes } = useSortable({\n    id,\n  });\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-${getBorderRadiusVariant(itemDefinition)}`]),\n    isSorting && styles.sorting\n  );\n  const dragHandleRef = useRef<HTMLElement>(null);\n  return (\n    <>\n      {renderItem({\n        item,\n        id,\n        ref: setNodeRef,\n        style,\n        className,\n        isDropPlaceholder: isDragging,\n        isSortingActive: isSorting,\n        isDragGhost: false,\n        dragHandleProps: {\n          ...dragHandleListeners,\n          ariaLabel: joinStrings(dragHandleAriaLabel, itemDefinition.label(item)) ?? '',\n          ariaDescribedby: attributes['aria-describedby'],\n          disabled: attributes['aria-disabled'],\n          triggerMode: 'controlled',\n          controlledShowButtons: showDirectionButtons,\n          ref: dragHandleRef,\n          directions: showDirectionButtons\n            ? {\n                'block-start': 'active',\n                'block-end': 'active',\n              }\n            : undefined,\n          onDirectionClick: direction => {\n            const event = new Event(direction === 'block-start' ? EventName.CustomUp : EventName.CustomDown, {\n              bubbles: true,\n              cancelable: true,\n            });\n            onKeyDown(event as any);\n            dragHandleRef.current?.dispatchEvent(event);\n          },\n        },\n      })}\n    </>\n  );\n}\n\nexport function getBorderRadiusVariant(\n  itemDefinition: SortableAreaProps.ItemDefinition<any>\n): SortableAreaProps.BorderRadiusVariant {\n  return itemDefinition.borderRadius ?? 'item';\n}\n"]}

package/lib/internal/template/internal/components/sortable-area/keyboard-sensor/index.d.ts

@@ -1,19 +1,34 @@
-import type { Activators, SensorInstance } from '@dnd-kit/core';
-import { KeyboardSensorOptions, KeyboardSensorProps } from '@dnd-kit/core';
-export declare class KeyboardSensor implements SensorInstance {
+import type { Activators, SensorContext, SensorInstance, SensorProps, UniqueIdentifier } from '@dnd-kit/core';
+import { KeyboardSensorOptions } from '@dnd-kit/core';
+import { Coordinates } from '@dnd-kit/utilities';
+export type KeyboardAndUAPCoordinateGetter = (event: Event, args: {
+    active: UniqueIdentifier;
+    currentCoordinates: Coordinates;
+    context: SensorContext;
+}) => Coordinates | void;
+type KeyboardAndUAPSensorOptions = KeyboardSensorOptions & {
+    coordinateGetter: KeyboardAndUAPCoordinateGetter;
+    onActivation?({ event }: {
+        event: KeyboardEvent | MouseEvent;
+    }): void;
+};
+export declare class KeyboardAndUAPSensor implements SensorInstance {
     private props;
     autoScrollEnabled: boolean;
     private referenceCoordinates;
     private listeners;
     private windowListeners;
-    constructor(props: KeyboardSensorProps);
+    constructor(props: SensorProps<KeyboardAndUAPSensorOptions>);
     private attach;
     private handleStart;
     private handleKeyDown;
+    private handleCustomDirectionEvent;
+    private handleDirectionalMove;
     private handleMove;
     private handleEnd;
     private handleCancel;
     private detach;
-    static activators: Activators<KeyboardSensorOptions>;
+    static activators: Activators<KeyboardAndUAPSensorOptions>;
 }
+export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/internal/components/sortable-area/keyboard-sensor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/sortable-area/keyboard-sensor/index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEhE,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAyB3E,qBAAa,cAAe,YAAW,cAAc;IAMvC,OAAO,CAAC,KAAK;IALlB,iBAAiB,UAAS;IACjC,OAAO,CAAC,oBAAoB,CAA0B;IACtD,OAAO,CAAC,SAAS,CAAY;IAC7B,OAAO,CAAC,eAAe,CAAY;gBAEf,KAAK,EAAE,mBAAmB;IAc9C,OAAO,CAAC,MAAM;IAYd,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,aAAa;IA8CrB,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,MAAM;IAQd,MAAM,CAAC,UAAU,EAAE,UAAU,CAAC,qBAAqB,CAAC,CAuBlD;CACH"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/internal/components/sortable-area/keyboard-sensor/index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,cAAc,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAE9G,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EACL,WAAW,EAKZ,MAAM,oBAAoB,CAAC;AAW5B,MAAM,MAAM,8BAA8B,GAAG,CAC3C,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE;IACJ,MAAM,EAAE,gBAAgB,CAAC;IACzB,kBAAkB,EAAE,WAAW,CAAC;IAChC,OAAO,EAAE,aAAa,CAAC;CACxB,KACE,WAAW,GAAG,IAAI,CAAC;AAExB,KAAK,2BAA2B,GAAG,qBAAqB,GAAG;IACzD,gBAAgB,EAAE,8BAA8B,CAAC;IACjD,YAAY,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;QAAE,KAAK,EAAE,aAAa,GAAG,UAAU,CAAA;KAAE,GAAG,IAAI,CAAC;CACvE,CAAC;AAEF,qBAAa,oBAAqB,YAAW,cAAc;IAM7C,OAAO,CAAC,KAAK;IALlB,iBAAiB,UAAS;IACjC,OAAO,CAAC,oBAAoB,CAA0B;IACtD,OAAO,CAAC,SAAS,CAAY;IAC7B,OAAO,CAAC,eAAe,CAAY;gBAEf,KAAK,EAAE,WAAW,CAAC,2BAA2B,CAAC;IAgBnE,OAAO,CAAC,MAAM;IAed,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,aAAa;IA2BrB,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,qBAAqB;IA2B7B,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,MAAM;IAOd,MAAM,CAAC,UAAU,EAAE,UAAU,CAAC,2BAA2B,CAAC,CAmCxD;CACH"}