npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1382 → 3.0.1384 - Mend

@cloudscape-design/components-themeable 3.0.1382 → 3.0.1384

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

package/lib/internal/template/internal/components/control-group/styles.css.js ADDED Viewed

@@ -0,0 +1,13 @@
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_o08jm_35ajp_9",
+  "root-horizontal": "awsui_root-horizontal_o08jm_35ajp_41",
+  "root-vertical": "awsui_root-vertical_o08jm_35ajp_46",
+  "control": "awsui_control_o08jm_35ajp_51",
+  "control-middle-horizontal": "awsui_control-middle-horizontal_o08jm_35ajp_58",
+  "control-last-horizontal": "awsui_control-last-horizontal_o08jm_35ajp_58",
+  "control-middle-vertical": "awsui_control-middle-vertical_o08jm_35ajp_61",
+  "control-last-vertical": "awsui_control-last-vertical_o08jm_35ajp_61"
+};

package/lib/internal/template/internal/components/control-group/styles.scoped.css ADDED Viewed

@@ -0,0 +1,63 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* Style used for links in slots/components that are text heavy, to help links stand out among
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+.awsui_root_o08jm_35ajp_9:not(#\9) {
+  border-collapse: separate;
+  border-spacing: 0;
+  box-sizing: border-box;
+  caption-side: top;
+  cursor: auto;
+  direction: inherit;
+  empty-cells: show;
+  font-family: serif;
+  font-style: normal;
+  font-variant: normal;
+  font-stretch: normal;
+  hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: start;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  word-spacing: normal;
+  font-size: var(--font-size-body-m-tq5a14, 14px);
+  line-height: var(--line-height-body-m-5xw6xo, 22px);
+  color: var(--color-text-body-default-b2us04, #16191f);
+  font-weight: var(--font-weight-normal-fr92v6, 400);
+  font-family: var(--font-family-base-c9u5cr, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  display: flex;
+}
+.awsui_root-horizontal_o08jm_35ajp_41:not(#\9) {
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: flex-end;
+}
+.awsui_root-vertical_o08jm_35ajp_46:not(#\9) {
+  flex-direction: column;
+  align-items: stretch;
+}
+.awsui_control_o08jm_35ajp_51:not(#\9) {
+  min-inline-size: 0;
+  isolation: isolate;
+}
+.awsui_control_o08jm_35ajp_51:not(#\9):focus-within {
+  z-index: 1;
+}
+.awsui_control-middle-horizontal_o08jm_35ajp_58:not(#\9), .awsui_control-last-horizontal_o08jm_35ajp_58:not(#\9) {
+  margin-inline-start: calc(-1 * var(--border-width-field-2365x3, 1px));
+}
+.awsui_control-middle-vertical_o08jm_35ajp_61:not(#\9), .awsui_control-last-vertical_o08jm_35ajp_61:not(#\9) {
+  margin-block-start: calc(-1 * var(--border-width-field-2365x3, 1px));
+}

package/lib/internal/template/internal/components/control-group/styles.selectors.js ADDED Viewed

@@ -0,0 +1,14 @@
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_o08jm_35ajp_9",
+  "root-horizontal": "awsui_root-horizontal_o08jm_35ajp_41",
+  "root-vertical": "awsui_root-vertical_o08jm_35ajp_46",
+  "control": "awsui_control_o08jm_35ajp_51",
+  "control-middle-horizontal": "awsui_control-middle-horizontal_o08jm_35ajp_58",
+  "control-last-horizontal": "awsui_control-last-horizontal_o08jm_35ajp_58",
+  "control-middle-vertical": "awsui_control-middle-vertical_o08jm_35ajp_61",
+  "control-last-vertical": "awsui_control-last-vertical_o08jm_35ajp_61"
+};

package/lib/internal/template/internal/components/drag-handle-wrapper/styles.css.js CHANGED Viewed

@@ -1,35 +1,35 @@
     import './styles.scoped.css';
     export default {
-  "direction-button-wrapper": "awsui_direction-button-wrapper_155yk_wnan2_29",
-  "direction-button-wrapper-motion-enter": "awsui_direction-button-wrapper-motion-enter_155yk_wnan2_49",
-  "direction-button-wrapper-motion-entering": "awsui_direction-button-wrapper-motion-entering_155yk_wnan2_49",
-  "direction-button-wrapper-motion-exit": "awsui_direction-button-wrapper-motion-exit_155yk_wnan2_49",
-  "direction-button-wrapper-motion-exiting": "awsui_direction-button-wrapper-motion-exiting_155yk_wnan2_49",
-  "drag-handle-entry": "awsui_drag-handle-entry_155yk_wnan2_1",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_155yk_wnan2_1",
-  "drag-handle-exit": "awsui_drag-handle-exit_155yk_wnan2_1",
-  "awsui-motion-fade-out-0": "awsui_awsui-motion-fade-out-0_155yk_wnan2_1",
-  "direction-button-wrapper-block-start": "awsui_direction-button-wrapper-block-start_155yk_wnan2_89",
-  "direction-button-wrapper-block-end": "awsui_direction-button-wrapper-block-end_155yk_wnan2_93",
-  "direction-button-wrapper-inline-start": "awsui_direction-button-wrapper-inline-start_155yk_wnan2_97",
-  "direction-button-wrapper-inline-end": "awsui_direction-button-wrapper-inline-end_155yk_wnan2_108",
-  "contents": "awsui_contents_155yk_wnan2_119",
-  "portal-overlay": "awsui_portal-overlay_155yk_wnan2_123",
-  "portal-overlay-disabled": "awsui_portal-overlay-disabled_155yk_wnan2_131",
-  "portal-overlay-contents": "awsui_portal-overlay-contents_155yk_wnan2_135",
-  "drag-handle": "awsui_drag-handle_155yk_wnan2_139",
-  "direction-button-wrapper-hidden": "awsui_direction-button-wrapper-hidden_155yk_wnan2_152",
-  "direction-button-wrapper-forced": "awsui_direction-button-wrapper-forced_155yk_wnan2_176",
-  "direction-button-wrapper-forced-top-0": "awsui_direction-button-wrapper-forced-top-0_155yk_wnan2_180",
-  "direction-button-wrapper-forced-top-1": "awsui_direction-button-wrapper-forced-top-1_155yk_wnan2_184",
-  "direction-button-wrapper-forced-top-2": "awsui_direction-button-wrapper-forced-top-2_155yk_wnan2_188",
-  "direction-button-wrapper-forced-top-3": "awsui_direction-button-wrapper-forced-top-3_155yk_wnan2_192",
-  "direction-button-wrapper-forced-bottom-0": "awsui_direction-button-wrapper-forced-bottom-0_155yk_wnan2_196",
-  "direction-button-wrapper-forced-bottom-1": "awsui_direction-button-wrapper-forced-bottom-1_155yk_wnan2_200",
-  "direction-button-wrapper-forced-bottom-2": "awsui_direction-button-wrapper-forced-bottom-2_155yk_wnan2_204",
-  "direction-button-wrapper-forced-bottom-3": "awsui_direction-button-wrapper-forced-bottom-3_155yk_wnan2_208",
-  "direction-button": "awsui_direction-button_155yk_wnan2_29",
-  "direction-button-disabled": "awsui_direction-button-disabled_155yk_wnan2_231"
+  "direction-button-wrapper": "awsui_direction-button-wrapper_155yk_w8xqx_29",
+  "direction-button-wrapper-motion-enter": "awsui_direction-button-wrapper-motion-enter_155yk_w8xqx_49",
+  "direction-button-wrapper-motion-entering": "awsui_direction-button-wrapper-motion-entering_155yk_w8xqx_49",
+  "direction-button-wrapper-motion-exit": "awsui_direction-button-wrapper-motion-exit_155yk_w8xqx_49",
+  "direction-button-wrapper-motion-exiting": "awsui_direction-button-wrapper-motion-exiting_155yk_w8xqx_49",
+  "drag-handle-entry": "awsui_drag-handle-entry_155yk_w8xqx_1",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_155yk_w8xqx_1",
+  "drag-handle-exit": "awsui_drag-handle-exit_155yk_w8xqx_1",
+  "awsui-motion-fade-out-0": "awsui_awsui-motion-fade-out-0_155yk_w8xqx_1",
+  "direction-button-wrapper-block-start": "awsui_direction-button-wrapper-block-start_155yk_w8xqx_89",
+  "direction-button-wrapper-block-end": "awsui_direction-button-wrapper-block-end_155yk_w8xqx_93",
+  "direction-button-wrapper-inline-start": "awsui_direction-button-wrapper-inline-start_155yk_w8xqx_97",
+  "direction-button-wrapper-inline-end": "awsui_direction-button-wrapper-inline-end_155yk_w8xqx_108",
+  "contents": "awsui_contents_155yk_w8xqx_119",
+  "portal-overlay": "awsui_portal-overlay_155yk_w8xqx_123",
+  "portal-overlay-disabled": "awsui_portal-overlay-disabled_155yk_w8xqx_131",
+  "portal-overlay-contents": "awsui_portal-overlay-contents_155yk_w8xqx_135",
+  "drag-handle": "awsui_drag-handle_155yk_w8xqx_139",
+  "direction-button-wrapper-hidden": "awsui_direction-button-wrapper-hidden_155yk_w8xqx_152",
+  "direction-button-wrapper-forced": "awsui_direction-button-wrapper-forced_155yk_w8xqx_176",
+  "direction-button-wrapper-forced-top-0": "awsui_direction-button-wrapper-forced-top-0_155yk_w8xqx_180",
+  "direction-button-wrapper-forced-top-1": "awsui_direction-button-wrapper-forced-top-1_155yk_w8xqx_184",
+  "direction-button-wrapper-forced-top-2": "awsui_direction-button-wrapper-forced-top-2_155yk_w8xqx_188",
+  "direction-button-wrapper-forced-top-3": "awsui_direction-button-wrapper-forced-top-3_155yk_w8xqx_192",
+  "direction-button-wrapper-forced-bottom-0": "awsui_direction-button-wrapper-forced-bottom-0_155yk_w8xqx_196",
+  "direction-button-wrapper-forced-bottom-1": "awsui_direction-button-wrapper-forced-bottom-1_155yk_w8xqx_200",
+  "direction-button-wrapper-forced-bottom-2": "awsui_direction-button-wrapper-forced-bottom-2_155yk_w8xqx_204",
+  "direction-button-wrapper-forced-bottom-3": "awsui_direction-button-wrapper-forced-bottom-3_155yk_w8xqx_208",
+  "direction-button": "awsui_direction-button_155yk_w8xqx_29",
+  "direction-button-disabled": "awsui_direction-button-disabled_155yk_w8xqx_231"
 };

package/lib/internal/template/internal/components/drag-handle-wrapper/styles.scoped.css CHANGED Viewed

@@ -10,27 +10,27 @@ 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
 */
-@keyframes awsui_drag-handle-entry_155yk_wnan2_1 {
+@keyframes awsui_drag-handle-entry_155yk_w8xqx_1 {
   from {
-    transform: translate(var(--awsui-drag-handle-animation-inline-offset-66120l), var(--awsui-drag-handle-animation-block-offset-66120l));
+    transform: translate(var(--awsui-drag-handle-animation-inline-offset-ka4djm), var(--awsui-drag-handle-animation-block-offset-ka4djm));
   }
   to {
     transform: translate(0, 0);
   }
 }
-@keyframes awsui_drag-handle-exit_155yk_wnan2_1 {
+@keyframes awsui_drag-handle-exit_155yk_w8xqx_1 {
   from {
     transform: translate(0, 0);
   }
   to {
-    transform: translate(var(--awsui-drag-handle-animation-inline-offset-66120l), var(--awsui-drag-handle-animation-block-offset-66120l));
+    transform: translate(var(--awsui-drag-handle-animation-inline-offset-ka4djm), var(--awsui-drag-handle-animation-block-offset-ka4djm));
   }
 }
-.awsui_direction-button-wrapper_155yk_wnan2_29:not(#\9) {
-  --awsui-drag-handle-animation-inline-offset-66120l: 0;
-  --awsui-drag-handle-animation-block-offset-66120l: 0;
+.awsui_direction-button-wrapper_155yk_w8xqx_29:not(#\9) {
+  --awsui-drag-handle-animation-inline-offset-ka4djm: 0;
+  --awsui-drag-handle-animation-block-offset-ka4djm: 0;
 }
-@keyframes awsui_awsui-motion-fade-in_155yk_wnan2_1 {
+@keyframes awsui_awsui-motion-fade-in_155yk_w8xqx_1 {
   from {
     opacity: 0.2;
   }
@@ -38,7 +38,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
     opacity: 1;
   }
 }
-@keyframes awsui_awsui-motion-fade-out-0_155yk_wnan2_1 {
+@keyframes awsui_awsui-motion-fade-out-0_155yk_w8xqx_1 {
   from {
     opacity: 1;
   }
@@ -46,81 +46,81 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
     opacity: 0;
   }
 }
-.awsui_direction-button-wrapper-motion-enter_155yk_wnan2_49:not(#\9), .awsui_direction-button-wrapper-motion-entering_155yk_wnan2_49:not(#\9), .awsui_direction-button-wrapper-motion-exit_155yk_wnan2_49:not(#\9), .awsui_direction-button-wrapper-motion-exiting_155yk_wnan2_49:not(#\9) {
+.awsui_direction-button-wrapper-motion-enter_155yk_w8xqx_49:not(#\9), .awsui_direction-button-wrapper-motion-entering_155yk_w8xqx_49:not(#\9), .awsui_direction-button-wrapper-motion-exit_155yk_w8xqx_49:not(#\9), .awsui_direction-button-wrapper-motion-exiting_155yk_w8xqx_49:not(#\9) {
   pointer-events: none;
 }
-.awsui_direction-button-wrapper-motion-entering_155yk_wnan2_49:not(#\9) {
-  animation: awsui_drag-handle-entry_155yk_wnan2_1 var(--motion-duration-complex-n5wfwh, 270ms) var(--motion-easing-responsive-k7246o, ease-out), awsui_awsui-motion-fade-in_155yk_wnan2_1 var(--motion-duration-complex-n5wfwh, 270ms) var(--motion-easing-responsive-k7246o, ease-out);
+.awsui_direction-button-wrapper-motion-entering_155yk_w8xqx_49:not(#\9) {
+  animation: awsui_drag-handle-entry_155yk_w8xqx_1 var(--motion-duration-complex-n5wfwh, 270ms) var(--motion-easing-responsive-k7246o, ease-out), awsui_awsui-motion-fade-in_155yk_w8xqx_1 var(--motion-duration-complex-n5wfwh, 270ms) var(--motion-easing-responsive-k7246o, ease-out);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_direction-button-wrapper-motion-entering_155yk_wnan2_49:not(#\9) {
+  .awsui_direction-button-wrapper-motion-entering_155yk_w8xqx_49:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_direction-button-wrapper-motion-entering_155yk_wnan2_49:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-entering_155yk_wnan2_49:not(#\9) {
+.awsui-motion-disabled .awsui_direction-button-wrapper-motion-entering_155yk_w8xqx_49:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-entering_155yk_w8xqx_49:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_direction-button-wrapper-motion-exiting_155yk_wnan2_49:not(#\9) {
-  animation: awsui_drag-handle-exit_155yk_wnan2_1 var(--motion-duration-complex-n5wfwh, 270ms) var(--motion-easing-responsive-k7246o, ease-out) forwards, awsui_awsui-motion-fade-out-0_155yk_wnan2_1 var(--motion-duration-complex-n5wfwh, 270ms) var(--motion-easing-responsive-k7246o, ease-out) forwards;
+.awsui_direction-button-wrapper-motion-exiting_155yk_w8xqx_49:not(#\9) {
+  animation: awsui_drag-handle-exit_155yk_w8xqx_1 var(--motion-duration-complex-n5wfwh, 270ms) var(--motion-easing-responsive-k7246o, ease-out) forwards, awsui_awsui-motion-fade-out-0_155yk_w8xqx_1 var(--motion-duration-complex-n5wfwh, 270ms) var(--motion-easing-responsive-k7246o, ease-out) forwards;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_direction-button-wrapper-motion-exiting_155yk_wnan2_49:not(#\9) {
+  .awsui_direction-button-wrapper-motion-exiting_155yk_w8xqx_49:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_direction-button-wrapper-motion-exiting_155yk_wnan2_49:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-exiting_155yk_wnan2_49:not(#\9) {
+.awsui-motion-disabled .awsui_direction-button-wrapper-motion-exiting_155yk_w8xqx_49:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-exiting_155yk_w8xqx_49:not(#\9) {
   animation: none;
   transition: none;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_direction-button-wrapper_155yk_wnan2_29:not(#\9) {
+  .awsui_direction-button-wrapper_155yk_w8xqx_29:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_direction-button-wrapper_155yk_wnan2_29:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper_155yk_wnan2_29:not(#\9) {
+.awsui-motion-disabled .awsui_direction-button-wrapper_155yk_w8xqx_29:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper_155yk_w8xqx_29:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_direction-button-wrapper-block-start_155yk_wnan2_89:not(#\9) {
-  --awsui-drag-handle-animation-block-offset-66120l: 20px;
+.awsui_direction-button-wrapper-block-start_155yk_w8xqx_89:not(#\9) {
+  --awsui-drag-handle-animation-block-offset-ka4djm: 20px;
 }
-.awsui_direction-button-wrapper-block-end_155yk_wnan2_93:not(#\9) {
-  --awsui-drag-handle-animation-block-offset-66120l: -20px;
+.awsui_direction-button-wrapper-block-end_155yk_w8xqx_93:not(#\9) {
+  --awsui-drag-handle-animation-block-offset-ka4djm: -20px;
 }
-.awsui_direction-button-wrapper-inline-start_155yk_wnan2_97:not(#\9) {
+.awsui_direction-button-wrapper-inline-start_155yk_w8xqx_97:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_direction-button-wrapper-inline-start_155yk_wnan2_97:not(#\9):dir(ltr) {
-  --awsui-drag-handle-animation-inline-offset-66120l: 20px;
+.awsui_direction-button-wrapper-inline-start_155yk_w8xqx_97:not(#\9):dir(ltr) {
+  --awsui-drag-handle-animation-inline-offset-ka4djm: 20px;
 }
-.awsui_direction-button-wrapper-inline-start_155yk_wnan2_97:not(#\9):dir(rtl) {
-  --awsui-drag-handle-animation-inline-offset-66120l: -20px;
+.awsui_direction-button-wrapper-inline-start_155yk_w8xqx_97:not(#\9):dir(rtl) {
+  --awsui-drag-handle-animation-inline-offset-ka4djm: -20px;
 }
-.awsui_direction-button-wrapper-inline-end_155yk_wnan2_108:not(#\9) {
+.awsui_direction-button-wrapper-inline-end_155yk_w8xqx_108:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_direction-button-wrapper-inline-end_155yk_wnan2_108:not(#\9):dir(ltr) {
-  --awsui-drag-handle-animation-inline-offset-66120l: -20px;
+.awsui_direction-button-wrapper-inline-end_155yk_w8xqx_108:not(#\9):dir(ltr) {
+  --awsui-drag-handle-animation-inline-offset-ka4djm: -20px;
 }
-.awsui_direction-button-wrapper-inline-end_155yk_wnan2_108:not(#\9):dir(rtl) {
-  --awsui-drag-handle-animation-inline-offset-66120l: 20px;
+.awsui_direction-button-wrapper-inline-end_155yk_w8xqx_108:not(#\9):dir(rtl) {
+  --awsui-drag-handle-animation-inline-offset-ka4djm: 20px;
 }
-.awsui_contents_155yk_wnan2_119:not(#\9) {
+.awsui_contents_155yk_w8xqx_119:not(#\9) {
   display: contents;
 }
-.awsui_portal-overlay_155yk_wnan2_123:not(#\9) {
+.awsui_portal-overlay_155yk_w8xqx_123:not(#\9) {
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
@@ -128,20 +128,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   z-index: 7000;
 }
-.awsui_portal-overlay-disabled_155yk_wnan2_131:not(#\9) {
+.awsui_portal-overlay-disabled_155yk_w8xqx_131:not(#\9) {
   display: none;
 }
-.awsui_portal-overlay-contents_155yk_wnan2_135:not(#\9) {
+.awsui_portal-overlay-contents_155yk_w8xqx_135:not(#\9) {
   pointer-events: auto;
 }
-.awsui_drag-handle_155yk_wnan2_139:not(#\9) {
+.awsui_drag-handle_155yk_w8xqx_139:not(#\9) {
   position: relative;
   display: inline-flex;
 }
-.awsui_direction-button-wrapper_155yk_wnan2_29:not(#\9) {
+.awsui_direction-button-wrapper_155yk_w8xqx_29:not(#\9) {
   position: absolute;
   block-size: var(--space-static-xl-frcfkv, 24px);
   inline-size: var(--space-static-xl-frcfkv, 24px);
@@ -149,67 +149,67 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-inline: var(--space-static-xxs-vzto3j, 4px);
 }
-.awsui_direction-button-wrapper-hidden_155yk_wnan2_152:not(#\9) {
+.awsui_direction-button-wrapper-hidden_155yk_w8xqx_152:not(#\9) {
   display: none;
 }
-.awsui_direction-button-wrapper-block-start_155yk_wnan2_89:not(#\9) {
+.awsui_direction-button-wrapper-block-start_155yk_w8xqx_89:not(#\9) {
   inset-block-start: calc(-1 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
   inset-inline-start: calc(50% - (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)) / 2);
 }
-.awsui_direction-button-wrapper-block-end_155yk_wnan2_93:not(#\9) {
+.awsui_direction-button-wrapper-block-end_155yk_w8xqx_93:not(#\9) {
   inset-block-end: calc(-1 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
   inset-inline-start: calc(50% - (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)) / 2);
 }
-.awsui_direction-button-wrapper-inline-start_155yk_wnan2_97:not(#\9) {
+.awsui_direction-button-wrapper-inline-start_155yk_w8xqx_97:not(#\9) {
   inset-inline-start: calc(-1 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
   inset-block-start: calc(50% - (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)) / 2);
 }
-.awsui_direction-button-wrapper-inline-end_155yk_wnan2_108:not(#\9) {
+.awsui_direction-button-wrapper-inline-end_155yk_w8xqx_108:not(#\9) {
   inset-inline-end: calc(-1 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
   inset-block-start: calc(50% - (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)) / 2);
 }
-.awsui_direction-button-wrapper-forced_155yk_wnan2_176:not(#\9) {
+.awsui_direction-button-wrapper-forced_155yk_w8xqx_176:not(#\9) {
   inset-inline-start: calc(50% - (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)) / 2);
 }
-.awsui_direction-button-wrapper-forced-top-0_155yk_wnan2_180:not(#\9) {
+.awsui_direction-button-wrapper-forced-top-0_155yk_w8xqx_180:not(#\9) {
   inset-block-start: calc(-1 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
 }
-.awsui_direction-button-wrapper-forced-top-1_155yk_wnan2_184:not(#\9) {
+.awsui_direction-button-wrapper-forced-top-1_155yk_w8xqx_184:not(#\9) {
   inset-block-start: calc(-2 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
 }
-.awsui_direction-button-wrapper-forced-top-2_155yk_wnan2_188:not(#\9) {
+.awsui_direction-button-wrapper-forced-top-2_155yk_w8xqx_188:not(#\9) {
   inset-block-start: calc(-3 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
 }
-.awsui_direction-button-wrapper-forced-top-3_155yk_wnan2_192:not(#\9) {
+.awsui_direction-button-wrapper-forced-top-3_155yk_w8xqx_192:not(#\9) {
   inset-block-start: calc(-4 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
 }
-.awsui_direction-button-wrapper-forced-bottom-0_155yk_wnan2_196:not(#\9) {
+.awsui_direction-button-wrapper-forced-bottom-0_155yk_w8xqx_196:not(#\9) {
   inset-block-start: calc(1 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
 }
-.awsui_direction-button-wrapper-forced-bottom-1_155yk_wnan2_200:not(#\9) {
+.awsui_direction-button-wrapper-forced-bottom-1_155yk_w8xqx_200:not(#\9) {
   inset-block-start: calc(2 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
 }
-.awsui_direction-button-wrapper-forced-bottom-2_155yk_wnan2_204:not(#\9) {
+.awsui_direction-button-wrapper-forced-bottom-2_155yk_w8xqx_204:not(#\9) {
   inset-block-start: calc(3 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
 }
-.awsui_direction-button-wrapper-forced-bottom-3_155yk_wnan2_208:not(#\9) {
+.awsui_direction-button-wrapper-forced-bottom-3_155yk_w8xqx_208:not(#\9) {
   inset-block-start: calc(4 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
 }
-.awsui_direction-button_155yk_wnan2_29:not(#\9) {
+.awsui_direction-button_155yk_w8xqx_29:not(#\9) {
   position: absolute;
   border-width: 0;
   cursor: pointer;
@@ -228,14 +228,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   color: var(--color-text-direction-button-default-rvsx02, #ffffff);
   box-shadow: var(--shadow-dropdown-ogwesf, 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_direction-button_155yk_wnan2_29:not(#\9):not(.awsui_direction-button-disabled_155yk_wnan2_231):hover {
+.awsui_direction-button_155yk_w8xqx_29:not(#\9):not(.awsui_direction-button-disabled_155yk_w8xqx_231):hover {
   background-color: var(--color-background-direction-button-hover-ixmpit, #414750);
 }
-.awsui_direction-button_155yk_wnan2_29:not(#\9):not(.awsui_direction-button-disabled_155yk_wnan2_231):active {
+.awsui_direction-button_155yk_w8xqx_29:not(#\9):not(.awsui_direction-button-disabled_155yk_w8xqx_231):active {
   background-color: var(--color-background-direction-button-active-ilpypx, #2a2e33);
 }
-.awsui_direction-button-disabled_155yk_wnan2_231:not(#\9) {
+.awsui_direction-button-disabled_155yk_w8xqx_231:not(#\9) {
   cursor: default;
   background-color: var(--color-background-direction-button-disabled-p1avil, #eaeded);
   color: var(--color-text-direction-button-disabled-qzn64l, #aab7b8);

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

@@ -2,35 +2,35 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "direction-button-wrapper": "awsui_direction-button-wrapper_155yk_wnan2_29",
-  "direction-button-wrapper-motion-enter": "awsui_direction-button-wrapper-motion-enter_155yk_wnan2_49",
-  "direction-button-wrapper-motion-entering": "awsui_direction-button-wrapper-motion-entering_155yk_wnan2_49",
-  "direction-button-wrapper-motion-exit": "awsui_direction-button-wrapper-motion-exit_155yk_wnan2_49",
-  "direction-button-wrapper-motion-exiting": "awsui_direction-button-wrapper-motion-exiting_155yk_wnan2_49",
-  "drag-handle-entry": "awsui_drag-handle-entry_155yk_wnan2_1",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_155yk_wnan2_1",
-  "drag-handle-exit": "awsui_drag-handle-exit_155yk_wnan2_1",
-  "awsui-motion-fade-out-0": "awsui_awsui-motion-fade-out-0_155yk_wnan2_1",
-  "direction-button-wrapper-block-start": "awsui_direction-button-wrapper-block-start_155yk_wnan2_89",
-  "direction-button-wrapper-block-end": "awsui_direction-button-wrapper-block-end_155yk_wnan2_93",
-  "direction-button-wrapper-inline-start": "awsui_direction-button-wrapper-inline-start_155yk_wnan2_97",
-  "direction-button-wrapper-inline-end": "awsui_direction-button-wrapper-inline-end_155yk_wnan2_108",
-  "contents": "awsui_contents_155yk_wnan2_119",
-  "portal-overlay": "awsui_portal-overlay_155yk_wnan2_123",
-  "portal-overlay-disabled": "awsui_portal-overlay-disabled_155yk_wnan2_131",
-  "portal-overlay-contents": "awsui_portal-overlay-contents_155yk_wnan2_135",
-  "drag-handle": "awsui_drag-handle_155yk_wnan2_139",
-  "direction-button-wrapper-hidden": "awsui_direction-button-wrapper-hidden_155yk_wnan2_152",
-  "direction-button-wrapper-forced": "awsui_direction-button-wrapper-forced_155yk_wnan2_176",
-  "direction-button-wrapper-forced-top-0": "awsui_direction-button-wrapper-forced-top-0_155yk_wnan2_180",
-  "direction-button-wrapper-forced-top-1": "awsui_direction-button-wrapper-forced-top-1_155yk_wnan2_184",
-  "direction-button-wrapper-forced-top-2": "awsui_direction-button-wrapper-forced-top-2_155yk_wnan2_188",
-  "direction-button-wrapper-forced-top-3": "awsui_direction-button-wrapper-forced-top-3_155yk_wnan2_192",
-  "direction-button-wrapper-forced-bottom-0": "awsui_direction-button-wrapper-forced-bottom-0_155yk_wnan2_196",
-  "direction-button-wrapper-forced-bottom-1": "awsui_direction-button-wrapper-forced-bottom-1_155yk_wnan2_200",
-  "direction-button-wrapper-forced-bottom-2": "awsui_direction-button-wrapper-forced-bottom-2_155yk_wnan2_204",
-  "direction-button-wrapper-forced-bottom-3": "awsui_direction-button-wrapper-forced-bottom-3_155yk_wnan2_208",
-  "direction-button": "awsui_direction-button_155yk_wnan2_29",
-  "direction-button-disabled": "awsui_direction-button-disabled_155yk_wnan2_231"
+  "direction-button-wrapper": "awsui_direction-button-wrapper_155yk_w8xqx_29",
+  "direction-button-wrapper-motion-enter": "awsui_direction-button-wrapper-motion-enter_155yk_w8xqx_49",
+  "direction-button-wrapper-motion-entering": "awsui_direction-button-wrapper-motion-entering_155yk_w8xqx_49",
+  "direction-button-wrapper-motion-exit": "awsui_direction-button-wrapper-motion-exit_155yk_w8xqx_49",
+  "direction-button-wrapper-motion-exiting": "awsui_direction-button-wrapper-motion-exiting_155yk_w8xqx_49",
+  "drag-handle-entry": "awsui_drag-handle-entry_155yk_w8xqx_1",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_155yk_w8xqx_1",
+  "drag-handle-exit": "awsui_drag-handle-exit_155yk_w8xqx_1",
+  "awsui-motion-fade-out-0": "awsui_awsui-motion-fade-out-0_155yk_w8xqx_1",
+  "direction-button-wrapper-block-start": "awsui_direction-button-wrapper-block-start_155yk_w8xqx_89",
+  "direction-button-wrapper-block-end": "awsui_direction-button-wrapper-block-end_155yk_w8xqx_93",
+  "direction-button-wrapper-inline-start": "awsui_direction-button-wrapper-inline-start_155yk_w8xqx_97",
+  "direction-button-wrapper-inline-end": "awsui_direction-button-wrapper-inline-end_155yk_w8xqx_108",
+  "contents": "awsui_contents_155yk_w8xqx_119",
+  "portal-overlay": "awsui_portal-overlay_155yk_w8xqx_123",
+  "portal-overlay-disabled": "awsui_portal-overlay-disabled_155yk_w8xqx_131",
+  "portal-overlay-contents": "awsui_portal-overlay-contents_155yk_w8xqx_135",
+  "drag-handle": "awsui_drag-handle_155yk_w8xqx_139",
+  "direction-button-wrapper-hidden": "awsui_direction-button-wrapper-hidden_155yk_w8xqx_152",
+  "direction-button-wrapper-forced": "awsui_direction-button-wrapper-forced_155yk_w8xqx_176",
+  "direction-button-wrapper-forced-top-0": "awsui_direction-button-wrapper-forced-top-0_155yk_w8xqx_180",
+  "direction-button-wrapper-forced-top-1": "awsui_direction-button-wrapper-forced-top-1_155yk_w8xqx_184",
+  "direction-button-wrapper-forced-top-2": "awsui_direction-button-wrapper-forced-top-2_155yk_w8xqx_188",
+  "direction-button-wrapper-forced-top-3": "awsui_direction-button-wrapper-forced-top-3_155yk_w8xqx_192",
+  "direction-button-wrapper-forced-bottom-0": "awsui_direction-button-wrapper-forced-bottom-0_155yk_w8xqx_196",
+  "direction-button-wrapper-forced-bottom-1": "awsui_direction-button-wrapper-forced-bottom-1_155yk_w8xqx_200",
+  "direction-button-wrapper-forced-bottom-2": "awsui_direction-button-wrapper-forced-bottom-2_155yk_w8xqx_204",
+  "direction-button-wrapper-forced-bottom-3": "awsui_direction-button-wrapper-forced-bottom-3_155yk_w8xqx_208",
+  "direction-button": "awsui_direction-button_155yk_w8xqx_29",
+  "direction-button-disabled": "awsui_direction-button-disabled_155yk_w8xqx_231"
 };

package/lib/internal/template/internal/components/focus-lock/index.d.ts CHANGED Viewed

@@ -4,6 +4,12 @@ export interface FocusLockProps {
     disabled?: boolean;
     autoFocus?: boolean;
     restoreFocus?: boolean;
+    /**
+     * Element to focus when `autoFocus` captures focus. Defaults to the first
+     * focusable element in the container. Use this to focus an element that isn't
+     * keyboard-reachable, such as a heading with `tabIndex={-1}`.
+     */
+    autoFocusTarget?: React.RefObject<HTMLElement>;
     children: React.ReactNode;
 }
 export interface FocusLockRef {

package/lib/internal/template/internal/components/focus-lock/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/focus-lock/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAQ7F,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,UAAU,IAAI,IAAI,CAAC;CACpB;;~~AA0ED~~,wBAA2C"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/focus-lock/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAQ7F,MAAM,WAAW,cAAc;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;OAIG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAC/C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,UAAU,IAAI,IAAI,CAAC;CACpB;;AA8ED,wBAA2C"}

package/lib/internal/template/internal/components/focus-lock/index.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { nodeBelongs } from '@cloudscape-design/component-toolkit/dom';
 import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
 import TabTrap from '../tab-trap/index';
 import { getFirstFocusable, getLastFocusable } from './utils';
-function FocusLock({ className, disabled, autoFocus, restoreFocus, children }, ref) {
+function FocusLock({ className, disabled, autoFocus, restoreFocus, autoFocusTarget, children }, ref) {
     const restoreFocusTargetRef = useRef(null);
     const containerRef = useRef(null);
     const focusFirst = () => {
@@ -31,9 +31,14 @@ function FocusLock({ className, disabled, autoFocus, restoreFocus, children }, r
         };
         if (autoFocus && !disabled) {
             assignRestoreFocusTarget();
-            focusFirst();
+            if (autoFocusTarget === null || autoFocusTarget === void 0 ? void 0 : autoFocusTarget.current) {
+                autoFocusTarget.current.focus();
+            }
+            else {
+                focusFirst();
+            }
         }
-    }, [autoFocus, disabled]);
+    }, [autoFocus, disabled, autoFocusTarget]);
     // Restore focus if `restoreFocus` is set, and `disabled` changes from false to true.
     const [previouslyDisabled, setPreviouslyDisabled] = useState(!!disabled);
     useEffect(() => {

package/lib/internal/template/internal/components/focus-lock/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/focus-lock/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7F,OAAO,EAAE,WAAW,EAAE,MAAM,0CAA0C,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAE7E,OAAO,OAAO,MAAM,mBAAmB,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;~~AAiB9D~~,SAAS,SAAS,CAChB,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAkB,~~EAC1E~~,GAA4B;IAE5B,MAAM,qBAAqB,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IACpE,MAAM,YAAY,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEzD,MAAM,UAAU,GAAG,GAAG,EAAE;;QACtB,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACzB,MAAA,iBAAiB,CAAC,YAAY,CAAC,OAAO,CAAC,0CAAE,KAAK,EAAE,CAAC;QACnD,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;;QACrB,IAAI,YAAY,CAAC,OAAO,EAAE,CAAC;YACzB,MAAA,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,0CAAE,KAAK,EAAE,CAAC;QAClD,CAAC;IACH,CAAC,CAAC;IAEF,0EAA0E;IAC1E,yCAAyC;IACzC,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,wBAAwB,GAAG,GAAG,EAAE;;YACpC,IAAI,QAAQ,CAAC,aAAa,IAAI,CAAC,CAAA,MAAA,YAAY,CAAC,OAAO,0CAAE,QAAQ,CAAC,QAAQ,CAAC,aAAqB,CAAC,CAAA,EAAE,CAAC;gBAC9F,qBAAqB,CAAC,OAAO,GAAG,QAAQ,CAAC,aAA4C,CAAC;YACxF,CAAC;QACH,CAAC,CAAC;QACF,IAAI,SAAS,IAAI,CAAC,QAAQ,EAAE,CAAC;YAC3B,wBAAwB,EAAE,CAAC;YAC3B,UAAU,EAAE,CAAC;~~QACf~~,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;~~IAE1B~~,qFAAqF;IACrF,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACzE,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,kBAAkB,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC;YACtC,qBAAqB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;YAClC,IAAI,YAAY,IAAI,QAAQ,EAAE,CAAC;gBAC7B,MAAA,qBAAqB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBACvC,qBAAqB,CAAC,OAAO,GAAG,IAAI,CAAC;YACvC,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,kBAAkB,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IAEjD,yEAAyE;IACzE,wEAAwE;IACxE,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,IAA2B,EAAE,EAAE;;QAC9B,IAAI,IAAI,KAAK,IAAI,IAAI,YAAY,EAAE,CAAC;YAClC,MAAA,qBAAqB,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;YACvC,qBAAqB,CAAC,OAAO,GAAG,IAAI,CAAC;QACvC,CAAC;IACH,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,mBAAmB,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,CAAC;IACjD,MAAM,SAAS,GAAG,YAAY,CAAC,YAAY,EAAE,mBAAmB,CAAC,CAAC;IAElE,MAAM,aAAa,GAAG,CAAC,KAAuB,EAAE,EAAE,CAAC,WAAW,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC;IAC1G,OAAO,CACL;QACE,oBAAC,OAAO,IAAC,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,GAAI;QAChH,6BAAK,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,IACtC,QAAQ,CACL;QACN,oBAAC,OAAO,IAAC,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC,GAAI,CAC/G,CACJ,CAAC;AACJ,CAAC;AAED,eAAe,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\n\nimport { nodeBelongs } from '@cloudscape-design/component-toolkit/dom';\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport TabTrap from '../tab-trap/index';\nimport { getFirstFocusable, getLastFocusable } from './utils';\n\nexport interface FocusLockProps {\n className?: string;\n disabled?: boolean;\n autoFocus?: boolean;\n restoreFocus?: boolean;\n children: React.ReactNode;\n}\n\nexport interface FocusLockRef {\n /*\n Focuses the first element in the component.\n */\n focusFirst(): void;\n}\n\nfunction FocusLock(\n { className, disabled, autoFocus, restoreFocus, children }: FocusLockProps,\n ref: React.Ref<FocusLockRef>\n) {\n const restoreFocusTargetRef = useRef<HTMLOrSVGElement \| null>(null);\n const containerRef = useRef<HTMLDivElement \| null>(null);\n\n const focusFirst = () => {\n if (containerRef.current) {\n getFirstFocusable(containerRef.current)?.focus();\n }\n };\n\n const focusLast = () => {\n if (containerRef.current) {\n getLastFocusable(containerRef.current)?.focus();\n }\n };\n\n // Captures focus when `autoFocus` is set, and the component is mounted or\n // `disabled` changes from true to false.\n useEffect(() => {\n const assignRestoreFocusTarget = () => {\n if (document.activeElement && !containerRef.current?.contains(document.activeElement as Node)) {\n restoreFocusTargetRef.current = document.activeElement as unknown as HTMLOrSVGElement;\n }\n };\n if (autoFocus && !disabled) {\n assignRestoreFocusTarget();\n focusFirst();\n }\n }, [autoFocus, disabled]);\n\n // Restore focus if `restoreFocus` is set, and `disabled` changes from false to true.\n const [previouslyDisabled, setPreviouslyDisabled] = useState(!!disabled);\n useEffect(() => {\n if (previouslyDisabled !== !!disabled) {\n setPreviouslyDisabled(!!disabled);\n if (restoreFocus && disabled) {\n restoreFocusTargetRef.current?.focus();\n restoreFocusTargetRef.current = null;\n }\n }\n }, [previouslyDisabled, disabled, restoreFocus]);\n\n // Restore focus if `restoreFocus` is set and the component is unmounted.\n // Using a callback ref for this is safer than using useEffect cleanups.\n const restoreFocusHandler = useCallback(\n (elem: HTMLDivElement \| null) => {\n if (elem === null && restoreFocus) {\n restoreFocusTargetRef.current?.focus();\n restoreFocusTargetRef.current = null;\n }\n },\n [restoreFocus]\n );\n\n useImperativeHandle(ref, () => ({ focusFirst }));\n const mergedRef = useMergeRefs(containerRef, restoreFocusHandler);\n\n const isFocusInside = (event: React.FocusEvent) => nodeBelongs(containerRef.current, event.relatedTarget);\n return (\n <>\n <TabTrap disabled={disabled} focusNextCallback={event => (isFocusInside(event) ? focusLast() : focusFirst())} />\n <div className={className} ref={mergedRef}>\n {children}\n </div>\n <TabTrap disabled={disabled} focusNextCallback={event => (isFocusInside(event) ? focusFirst() : focusLast())} />\n </>\n );\n}\n\nexport default React.forwardRef(FocusLock);\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/focus-lock/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, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';\n\nimport { nodeBelongs } from '@cloudscape-design/component-toolkit/dom';\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport TabTrap from '../tab-trap/index';\nimport { getFirstFocusable, getLastFocusable } from './utils';\n\nexport interface FocusLockProps {\n className?: string;\n disabled?: boolean;\n autoFocus?: boolean;\n restoreFocus?: boolean;\n /*\n Element to focus when `autoFocus` captures focus. Defaults to the first\n * focusable element in the container. Use this to focus an element that isn't\n * keyboard-reachable, such as a heading with `tabIndex={-1}`.\n /\n autoFocusTarget?: React.RefObject<HTMLElement>;\n children: React.ReactNode;\n}\n\nexport interface FocusLockRef {\n /\n Focuses the first element in the component.\n */\n focusFirst(): void;\n}\n\nfunction FocusLock(\n { className, disabled, autoFocus, restoreFocus, autoFocusTarget, children }: FocusLockProps,\n ref: React.Ref<FocusLockRef>\n) {\n const restoreFocusTargetRef = useRef<HTMLOrSVGElement \| null>(null);\n const containerRef = useRef<HTMLDivElement \| null>(null);\n\n const focusFirst = () => {\n if (containerRef.current) {\n getFirstFocusable(containerRef.current)?.focus();\n }\n };\n\n const focusLast = () => {\n if (containerRef.current) {\n getLastFocusable(containerRef.current)?.focus();\n }\n };\n\n // Captures focus when `autoFocus` is set, and the component is mounted or\n // `disabled` changes from true to false.\n useEffect(() => {\n const assignRestoreFocusTarget = () => {\n if (document.activeElement && !containerRef.current?.contains(document.activeElement as Node)) {\n restoreFocusTargetRef.current = document.activeElement as unknown as HTMLOrSVGElement;\n }\n };\n if (autoFocus && !disabled) {\n assignRestoreFocusTarget();\n if (autoFocusTarget?.current) {\n autoFocusTarget.current.focus();\n } else {\n focusFirst();\n }\n }\n }, [autoFocus, disabled, autoFocusTarget]);\n\n // Restore focus if `restoreFocus` is set, and `disabled` changes from false to true.\n const [previouslyDisabled, setPreviouslyDisabled] = useState(!!disabled);\n useEffect(() => {\n if (previouslyDisabled !== !!disabled) {\n setPreviouslyDisabled(!!disabled);\n if (restoreFocus && disabled) {\n restoreFocusTargetRef.current?.focus();\n restoreFocusTargetRef.current = null;\n }\n }\n }, [previouslyDisabled, disabled, restoreFocus]);\n\n // Restore focus if `restoreFocus` is set and the component is unmounted.\n // Using a callback ref for this is safer than using useEffect cleanups.\n const restoreFocusHandler = useCallback(\n (elem: HTMLDivElement \| null) => {\n if (elem === null && restoreFocus) {\n restoreFocusTargetRef.current?.focus();\n restoreFocusTargetRef.current = null;\n }\n },\n [restoreFocus]\n );\n\n useImperativeHandle(ref, () => ({ focusFirst }));\n const mergedRef = useMergeRefs(containerRef, restoreFocusHandler);\n\n const isFocusInside = (event: React.FocusEvent) => nodeBelongs(containerRef.current, event.relatedTarget);\n return (\n <>\n <TabTrap disabled={disabled} focusNextCallback={event => (isFocusInside(event) ? focusLast() : focusFirst())} />\n <div className={className} ref={mergedRef}>\n {children}\n </div>\n <TabTrap disabled={disabled} focusNextCallback={event => (isFocusInside(event) ? focusFirst() : focusLast())} />\n </>\n );\n}\n\nexport default React.forwardRef(FocusLock);\n"]}