npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.267 → 3.0.269 - Mend

@cloudscape-design/components-themeable 3.0.267 → 3.0.269

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (88) hide show

package/lib/internal/template/internal/components/button-trigger/styles.scoped.css CHANGED Viewed

@@ -94,16 +94,16 @@ 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_button-trigger_18eso_1gx6f_97 > .awsui_arrow_18eso_1gx6f_97:not(#\9) {
+.awsui_button-trigger_18eso_170ad_97 > .awsui_arrow_18eso_170ad_97:not(#\9) {
   transition: transform var(--motion-duration-rotate-180-ofa1ir, 135ms) var(--motion-easing-rotate-180-3rbbga, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_button-trigger_18eso_1gx6f_97 > .awsui_arrow_18eso_1gx6f_97:not(#\9) {
+  .awsui_button-trigger_18eso_170ad_97 > .awsui_arrow_18eso_170ad_97:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_button-trigger_18eso_1gx6f_97 > .awsui_arrow_18eso_1gx6f_97:not(#\9), .awsui-mode-entering .awsui_button-trigger_18eso_1gx6f_97 > .awsui_arrow_18eso_1gx6f_97:not(#\9) {
+.awsui-motion-disabled .awsui_button-trigger_18eso_170ad_97 > .awsui_arrow_18eso_170ad_97:not(#\9), .awsui-mode-entering .awsui_button-trigger_18eso_170ad_97 > .awsui_arrow_18eso_170ad_97:not(#\9) {
   animation: none;
   transition: none;
 }
@@ -112,7 +112,7 @@ 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_button-trigger_18eso_1gx6f_97:not(#\9) {
+.awsui_button-trigger_18eso_170ad_97:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -160,58 +160,58 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-input-default-t7b5of, #879596);
   min-height: var(--size-vertical-input-ikahdk, 32px);
 }
-.awsui_button-trigger_18eso_1gx6f_97.awsui_has-caret_18eso_1gx6f_137:not(#\9) {
+.awsui_button-trigger_18eso_170ad_97.awsui_has-caret_18eso_170ad_137:not(#\9) {
   padding-right: var(--space-field-icon-offset-alfd6o, 32px);
 }
-.awsui_button-trigger_18eso_1gx6f_97 > .awsui_placeholder_18eso_1gx6f_140:not(#\9) {
+.awsui_button-trigger_18eso_170ad_97 > .awsui_placeholder_18eso_170ad_140:not(#\9) {
   color: var(--color-text-input-placeholder-rtvjp5, #687078);
   font-style: italic;
 }
-.awsui_button-trigger_18eso_1gx6f_97 > .awsui_arrow_18eso_1gx6f_97:not(#\9) {
+.awsui_button-trigger_18eso_170ad_97 > .awsui_arrow_18eso_170ad_97:not(#\9) {
   position: absolute;
   right: var(--space-field-horizontal-z3i1c8, 8px);
   top: calc(50% - var(--font-body-m-line-height-i7xxvv, 22px) / 2);
   color: var(--color-text-button-inline-icon-default-qhj7jl, #545b64);
 }
-.awsui_button-trigger_18eso_1gx6f_97:not(#\9):hover > .awsui_arrow_18eso_1gx6f_97 {
+.awsui_button-trigger_18eso_170ad_97:not(#\9):hover > .awsui_arrow_18eso_170ad_97 {
   color: var(--color-text-button-inline-icon-hover-84mkuo, #16191f);
 }
-.awsui_button-trigger_18eso_1gx6f_97.awsui_pressed_18eso_1gx6f_153 > .awsui_arrow_18eso_1gx6f_97:not(#\9) {
+.awsui_button-trigger_18eso_170ad_97.awsui_pressed_18eso_170ad_153 > .awsui_arrow_18eso_170ad_97:not(#\9) {
   transform: rotate(-180deg);
 }
-.awsui_button-trigger_18eso_1gx6f_97.awsui_disabled_18eso_1gx6f_156:not(#\9) {
+.awsui_button-trigger_18eso_170ad_97.awsui_disabled_18eso_170ad_156:not(#\9) {
   background-color: var(--color-background-input-disabled-5vlksk, #eaeded);
   border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-input-disabled-ek5o0x, #eaeded);
   color: var(--color-text-input-disabled-zfb02z, #879596);
   cursor: auto;
 }
-.awsui_button-trigger_18eso_1gx6f_97.awsui_disabled_18eso_1gx6f_156 > .awsui_arrow_18eso_1gx6f_97:not(#\9) {
+.awsui_button-trigger_18eso_170ad_97.awsui_disabled_18eso_170ad_156 > .awsui_arrow_18eso_170ad_97:not(#\9) {
   color: var(--color-text-button-inline-icon-disabled-sesloi, #aab7b8);
 }
-.awsui_button-trigger_18eso_1gx6f_97.awsui_disabled_18eso_1gx6f_156.awsui_in-filtering-token_18eso_1gx6f_165:not(#\9) {
+.awsui_button-trigger_18eso_170ad_97.awsui_disabled_18eso_170ad_156.awsui_in-filtering-token_18eso_170ad_165:not(#\9) {
   border-color: var(--color-border-control-disabled-zgidl5, #d5dbdb);
 }
-.awsui_button-trigger_18eso_1gx6f_97.awsui_disabled_18eso_1gx6f_156 > .awsui_placeholder_18eso_1gx6f_140:not(#\9) {
+.awsui_button-trigger_18eso_170ad_97.awsui_disabled_18eso_170ad_156 > .awsui_placeholder_18eso_170ad_140:not(#\9) {
   color: var(--color-text-input-placeholder-disabled-60yf1a, #687078);
 }
-.awsui_button-trigger_18eso_1gx6f_97.awsui_read-only_18eso_1gx6f_171:not(#\9) {
+.awsui_button-trigger_18eso_170ad_97.awsui_read-only_18eso_170ad_171:not(#\9) {
   background-color: var(--color-background-input-default-ewlytp, #ffffff);
   border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-input-disabled-ek5o0x, #eaeded);
 }
-.awsui_button-trigger_18eso_1gx6f_97:not(#\9):focus {
+.awsui_button-trigger_18eso_170ad_97:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1gx6f_97:not(#\9):not(.awsui_in-filtering-token_18eso_1gx6f_165):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_170ad_97:not(#\9):not(.awsui_in-filtering-token_18eso_170ad_165):focus {
   outline: 2px dotted transparent;
   border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-item-focused-n5kd8g, #0073bb);
   border-radius: var(--border-radius-input-fterib, 2px);
   box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-glnuoy, 1px) var(--color-border-item-focused-n5kd8g, #0073bb);
 }
-.awsui_button-trigger_18eso_1gx6f_97:not(#\9):not(.awsui_in-filtering-token_18eso_1gx6f_165):invalid {
+.awsui_button-trigger_18eso_170ad_97:not(#\9):not(.awsui_in-filtering-token_18eso_170ad_165):invalid {
   box-shadow: none;
 }
-.awsui_button-trigger_18eso_1gx6f_97:not(#\9):not(.awsui_in-filtering-token_18eso_1gx6f_165).awsui_invalid_18eso_1gx6f_188, .awsui_button-trigger_18eso_1gx6f_97:not(#\9):not(.awsui_in-filtering-token_18eso_1gx6f_165).awsui_invalid_18eso_1gx6f_188:focus {
+.awsui_button-trigger_18eso_170ad_97:not(#\9):not(.awsui_in-filtering-token_18eso_170ad_165).awsui_invalid_18eso_170ad_188, .awsui_button-trigger_18eso_170ad_97:not(#\9):not(.awsui_in-filtering-token_18eso_170ad_165).awsui_invalid_18eso_170ad_188:focus {
   color: var(--color-text-status-error-jer77f, #d13212);
   border-color: var(--color-text-status-error-jer77f, #d13212);
   padding-left: calc(
@@ -219,23 +219,23 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1gx6f_97:not(#\9
 );
   border-left-width: var(--border-invalid-width-glmng5, 4px);
 }
-.awsui_button-trigger_18eso_1gx6f_97:not(#\9):not(.awsui_in-filtering-token_18eso_1gx6f_165).awsui_invalid_18eso_1gx6f_188:focus, .awsui_button-trigger_18eso_1gx6f_97:not(#\9):not(.awsui_in-filtering-token_18eso_1gx6f_165).awsui_invalid_18eso_1gx6f_188:focus:focus {
+.awsui_button-trigger_18eso_170ad_97:not(#\9):not(.awsui_in-filtering-token_18eso_170ad_165).awsui_invalid_18eso_170ad_188:focus, .awsui_button-trigger_18eso_170ad_97:not(#\9):not(.awsui_in-filtering-token_18eso_170ad_165).awsui_invalid_18eso_170ad_188:focus:focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-6t5p47, 1px) var(--color-border-item-focused-n5kd8g, #0073bb);
 }
-.awsui_button-trigger_18eso_1gx6f_97.awsui_in-filtering-token_18eso_1gx6f_165:not(#\9) {
-  border-color: var(--color-border-item-selected-pr9yuf, #00a1c9);
+.awsui_button-trigger_18eso_170ad_97.awsui_in-filtering-token_18eso_170ad_165:not(#\9) {
+  border-color: var(--color-border-item-selected-592lau, #0073bb);
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
   height: 100%;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1gx6f_97.awsui_in-filtering-token_18eso_1gx6f_165:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_170ad_97.awsui_in-filtering-token_18eso_170ad_165:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1gx6f_97.awsui_in-filtering-token_18eso_1gx6f_165:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_170ad_97.awsui_in-filtering-token_18eso_170ad_165:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-filtering-token-operation-select-focus-outline-gutter-0nruvp, 0px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1gx6f_97.awsui_in-filtering-token_18eso_1gx6f_165:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_170ad_97.awsui_in-filtering-token_18eso_170ad_165:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;

package/lib/internal/template/internal/components/button-trigger/styles.selectors.js CHANGED Viewed

@@ -2,14 +2,14 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "button-trigger": "awsui_button-trigger_18eso_1gx6f_97",
-  "arrow": "awsui_arrow_18eso_1gx6f_97",
-  "has-caret": "awsui_has-caret_18eso_1gx6f_137",
-  "placeholder": "awsui_placeholder_18eso_1gx6f_140",
-  "pressed": "awsui_pressed_18eso_1gx6f_153",
-  "disabled": "awsui_disabled_18eso_1gx6f_156",
-  "in-filtering-token": "awsui_in-filtering-token_18eso_1gx6f_165",
-  "read-only": "awsui_read-only_18eso_1gx6f_171",
-  "invalid": "awsui_invalid_18eso_1gx6f_188"
+  "button-trigger": "awsui_button-trigger_18eso_170ad_97",
+  "arrow": "awsui_arrow_18eso_170ad_97",
+  "has-caret": "awsui_has-caret_18eso_170ad_137",
+  "placeholder": "awsui_placeholder_18eso_170ad_140",
+  "pressed": "awsui_pressed_18eso_170ad_153",
+  "disabled": "awsui_disabled_18eso_170ad_156",
+  "in-filtering-token": "awsui_in-filtering-token_18eso_170ad_165",
+  "read-only": "awsui_read-only_18eso_170ad_171",
+  "invalid": "awsui_invalid_18eso_170ad_188"
 };

package/lib/internal/template/internal/components/filtering-token/styles.css.js CHANGED Viewed

@@ -1,12 +1,12 @@
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_10m3l_ceye0_97",
-  "token": "awsui_token_10m3l_ceye0_102",
-  "show-operation": "awsui_show-operation_10m3l_ceye0_113",
-  "select": "awsui_select_10m3l_ceye0_119",
-  "token-content": "awsui_token-content_10m3l_ceye0_123",
-  "dismiss-button": "awsui_dismiss-button_10m3l_ceye0_127",
-  "token-disabled": "awsui_token-disabled_10m3l_ceye0_163"
+  "root": "awsui_root_10m3l_pt0za_97",
+  "token": "awsui_token_10m3l_pt0za_102",
+  "show-operation": "awsui_show-operation_10m3l_pt0za_113",
+  "select": "awsui_select_10m3l_pt0za_119",
+  "token-content": "awsui_token-content_10m3l_pt0za_123",
+  "dismiss-button": "awsui_dismiss-button_10m3l_pt0za_127",
+  "token-disabled": "awsui_token-disabled_10m3l_pt0za_163"
 };

package/lib/internal/template/internal/components/filtering-token/styles.scoped.css CHANGED Viewed

@@ -94,13 +94,13 @@ 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_root_10m3l_ceye0_97:not(#\9) {
+.awsui_root_10m3l_pt0za_97:not(#\9) {
   display: flex;
   align-content: stretch;
 }
-.awsui_token_10m3l_ceye0_102:not(#\9) {
-  border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-item-selected-pr9yuf, #00a1c9);
+.awsui_token_10m3l_pt0za_102:not(#\9) {
+  border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-item-selected-592lau, #0073bb);
   display: flex;
   align-items: stretch;
   background: var(--color-background-item-selected-fva7ca, #f1faff);
@@ -110,37 +110,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   box-sizing: border-box;
 }
-.awsui_show-operation_10m3l_ceye0_113:not(#\9) {
+.awsui_show-operation_10m3l_pt0za_113:not(#\9) {
   border-left: none;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-.awsui_select_10m3l_ceye0_119:not(#\9) {
+.awsui_select_10m3l_pt0za_119:not(#\9) {
   /* used in test-utils */
 }
-.awsui_token-content_10m3l_ceye0_123:not(#\9) {
+.awsui_token-content_10m3l_pt0za_123:not(#\9) {
   padding: var(--space-scaled-xxs-95dhkm, 4px) var(--space-field-horizontal-z3i1c8, 8px);
 }
-.awsui_dismiss-button_10m3l_ceye0_127:not(#\9) {
+.awsui_dismiss-button_10m3l_pt0za_127:not(#\9) {
   width: 30px;
   margin: 0;
   border: none;
   padding: 0 var(--space-xxs-ynfts5, 4px);
   color: var(--color-text-interactive-default-9me1cm, #545b64);
   background-color: transparent;
-  border-left: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-item-selected-pr9yuf, #00a1c9);
+  border-left: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-item-selected-592lau, #0073bb);
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_10m3l_ceye0_127:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_10m3l_pt0za_127:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_10m3l_ceye0_127:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_10m3l_pt0za_127:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-filtering-token-dismiss-button-focus-outline-gutter-25v038, 0px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_dismiss-button_10m3l_ceye0_127:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_dismiss-button_10m3l_pt0za_127:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -151,22 +151,22 @@ body[data-awsui-focus-visible=true] .awsui_dismiss-button_10m3l_ceye0_127:not(#\
   border-radius: var(--border-radius-control-default-focus-ring-hekmgc, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-n5kd8g, #0073bb);
 }
-.awsui_dismiss-button_10m3l_ceye0_127:not(#\9):focus {
+.awsui_dismiss-button_10m3l_pt0za_127:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-.awsui_dismiss-button_10m3l_ceye0_127:not(#\9):hover {
+.awsui_dismiss-button_10m3l_pt0za_127:not(#\9):hover {
   cursor: pointer;
   color: var(--color-text-interactive-hover-79wpl9, #16191f);
 }
-.awsui_token-disabled_10m3l_ceye0_163:not(#\9) {
+.awsui_token-disabled_10m3l_pt0za_163:not(#\9) {
   border-color: var(--color-border-control-disabled-zgidl5, #d5dbdb);
   background-color: var(--color-background-container-content-o88wxm, #ffffff);
   color: var(--color-text-disabled-pjiy51, #aab7b8);
   pointer-events: none;
 }
-.awsui_token-disabled_10m3l_ceye0_163 > .awsui_dismiss-button_10m3l_ceye0_127:not(#\9) {
+.awsui_token-disabled_10m3l_pt0za_163 > .awsui_dismiss-button_10m3l_pt0za_127:not(#\9) {
   color: var(--color-text-interactive-disabled-jcikk2, #aab7b8);
   border-color: var(--color-border-control-disabled-zgidl5, #d5dbdb);
 }

package/lib/internal/template/internal/components/filtering-token/styles.selectors.js CHANGED Viewed

@@ -2,12 +2,12 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_10m3l_ceye0_97",
-  "token": "awsui_token_10m3l_ceye0_102",
-  "show-operation": "awsui_show-operation_10m3l_ceye0_113",
-  "select": "awsui_select_10m3l_ceye0_119",
-  "token-content": "awsui_token-content_10m3l_ceye0_123",
-  "dismiss-button": "awsui_dismiss-button_10m3l_ceye0_127",
-  "token-disabled": "awsui_token-disabled_10m3l_ceye0_163"
+  "root": "awsui_root_10m3l_pt0za_97",
+  "token": "awsui_token_10m3l_pt0za_102",
+  "show-operation": "awsui_show-operation_10m3l_pt0za_113",
+  "select": "awsui_select_10m3l_pt0za_119",
+  "token-content": "awsui_token-content_10m3l_pt0za_123",
+  "dismiss-button": "awsui_dismiss-button_10m3l_pt0za_127",
+  "token-disabled": "awsui_token-disabled_10m3l_pt0za_163"
 };

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

@@ -1,6 +1,6 @@
     export var PACKAGE_SOURCE = 'components';
-    export var PACKAGE_VERSION = '3.0.0 (7bf7790)';
+    export var PACKAGE_VERSION = '3.0.0 (6f85b64)';
     export var THEME = 'open-source-visual-refresh';
     export var ALWAYS_VISUAL_REFRESH = true;

package/lib/internal/template/modal/internal.d.ts CHANGED Viewed

@@ -3,6 +3,6 @@ import { InternalBaseComponentProps } from '../internal/hooks/use-base-component
 import { ModalProps } from './interfaces';
 import { SomeRequired } from '../internal/types';
 type InternalModalProps = SomeRequired<ModalProps, 'size' | 'closeAriaLabel'> & InternalBaseComponentProps;
-export default function InternalModal({ size, visible, header, children, footer, disableContentPaddings, onDismiss, modalRoot, __internalRootRef, ...rest }: InternalModalProps): JSX.Element;
+export default function InternalModal({ modalRoot, ...rest }: InternalModalProps): JSX.Element;
 export {};
 //# sourceMappingURL=internal.d.ts.map

package/lib/internal/template/modal/internal.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["modal/internal.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAYlF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAKjD,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,MAAM,GAAG,gBAAgB,CAAC,GAAG,0BAA0B,CAAC;AAE3G,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,~~EACpC~~,~~IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,EACR,MAAM,EACN,sBAAsB,EACtB,~~SAAS,~~EACT~~,~~SAAS,EACT,iBAAwB,EACxB,~~GAAG,IAAI,~~EACR~~,EAAE,kBAAkB,~~eAwHpB~~"}
1	+ {"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["modal/internal.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAYlF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAKjD,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,MAAM,GAAG,gBAAgB,CAAC,GAAG,0BAA0B,CAAC;AAE3G,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,kBAAkB,eAM/E"}

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

@@ -11,7 +11,7 @@ import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { InternalButton } from '../button/internal';
 import InternalHeader from '../header/internal';
 import Portal from '../internal/components/portal';
-import { useContainerBreakpoints } from '../internal/hooks/container-queries';
+import { useContainerBreakpoints, useContainerQuery } from '../internal/hooks/container-queries';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { FormFieldContext } from '../internal/context/form-field-context';
 import { disableBodyScrolling, enableBodyScrolling } from './body-scroll';
@@ -20,7 +20,14 @@ import FocusLock from '../internal/components/focus-lock';
 import { useInternalI18n } from '../internal/i18n/context';
 import { useIntersectionObserver } from '../internal/hooks/use-intersection-observer';
 export default function InternalModal(_a) {
-    var { size, visible, header, children, footer, disableContentPaddings, onDismiss, modalRoot, __internalRootRef = null } = _a, rest = __rest(_a, ["size", "visible", "header", "children", "footer", "disableContentPaddings", "onDismiss", "modalRoot", "__internalRootRef"]);
+    var { modalRoot } = _a, rest = __rest(_a, ["modalRoot"]);
+    return (React.createElement(Portal, { container: modalRoot },
+        React.createElement(InnerModal, Object.assign({}, rest))));
+}
+// Separate component to prevent the Portal from getting in the way of refs, as it needs extra cycles to render the inner components.
+// useContainerQuery needs its targeted element to exist on the first render in order to work properly.
+function InnerModal(_a) {
+    var { size, visible, header, children, footer, disableContentPaddings, onDismiss, __internalRootRef = null } = _a, rest = __rest(_a, ["size", "visible", "header", "children", "footer", "disableContentPaddings", "onDismiss", "__internalRootRef"]);
     const instanceUniqueId = useUniqueId();
     const headerId = `${rest.id || instanceUniqueId}-header`;
     const lastMouseDownElementRef = useRef(null);
@@ -72,18 +79,20 @@ export default function InternalModal(_a) {
     // We use an empty div element at the end of the content slot as a sentinel
     // to detect when the user has scrolled to the bottom.
     const { ref: stickySentinelRef, isIntersecting: footerStuck } = useIntersectionObserver();
-    return (React.createElement(Portal, { container: modalRoot },
-        React.createElement(FormFieldContext.Provider, { value: {} },
-            React.createElement("div", Object.assign({}, baseProps, { className: clsx(styles.root, { [styles.hidden]: !visible }, baseProps.className, isRefresh && styles.refresh), role: "dialog", "aria-modal": true, "aria-labelledby": headerId, onMouseDown: onOverlayMouseDown, onClick: onOverlayClick, ref: mergedRef }),
-                React.createElement(FocusLock, { disabled: !visible, autoFocus: true, restoreFocus: true, className: styles['focus-lock'] },
-                    React.createElement("div", { className: clsx(styles.dialog, styles[size], styles[`breakpoint-${breakpoint}`], isRefresh && styles.refresh), onKeyDown: escKeyHandler, tabIndex: -1 },
-                        React.createElement("div", { className: styles.container },
-                            React.createElement("div", { className: styles.header },
-                                React.createElement(InternalHeader, { variant: "h2", __disableActionsWrapping: true, actions: React.createElement(InternalButton, { ariaLabel: closeAriaLabel, className: styles['dismiss-control'], variant: "modal-dismiss", iconName: "close", formAction: "none", onClick: onCloseButtonClick }) },
-                                    React.createElement("span", { id: headerId, className: styles['header--text'] }, header))),
-                            React.createElement("div", { className: clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings }) },
-                                children,
-                                React.createElement("div", { ref: stickySentinelRef })),
-                            footer && React.createElement("div", { className: clsx(styles.footer, footerStuck && styles['footer--stuck']) }, footer))))))));
+    // Add extra scroll padding to account for the height of the sticky footer,
+    // to prevent it from covering focused elements.
+    const [footerHeight, footerRef] = useContainerQuery(rect => rect.borderBoxHeight);
+    return (React.createElement(FormFieldContext.Provider, { value: {} },
+        React.createElement("div", Object.assign({}, baseProps, { className: clsx(styles.root, { [styles.hidden]: !visible }, baseProps.className, isRefresh && styles.refresh), role: "dialog", "aria-modal": true, "aria-labelledby": headerId, onMouseDown: onOverlayMouseDown, onClick: onOverlayClick, ref: mergedRef, style: footerHeight ? { scrollPaddingBottom: footerHeight } : undefined }),
+            React.createElement(FocusLock, { disabled: !visible, autoFocus: true, restoreFocus: true, className: styles['focus-lock'] },
+                React.createElement("div", { className: clsx(styles.dialog, styles[size], styles[`breakpoint-${breakpoint}`], isRefresh && styles.refresh), onKeyDown: escKeyHandler, tabIndex: -1 },
+                    React.createElement("div", { className: styles.container },
+                        React.createElement("div", { className: styles.header },
+                            React.createElement(InternalHeader, { variant: "h2", __disableActionsWrapping: true, actions: React.createElement(InternalButton, { ariaLabel: closeAriaLabel, className: styles['dismiss-control'], variant: "modal-dismiss", iconName: "close", formAction: "none", onClick: onCloseButtonClick }) },
+                                React.createElement("span", { id: headerId, className: styles['header--text'] }, header))),
+                        React.createElement("div", { className: clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings }) },
+                            children,
+                            React.createElement("div", { ref: stickySentinelRef })),
+                        footer && (React.createElement("div", { ref: footerRef, className: clsx(styles.footer, footerStuck && styles['footer--stuck']) }, footer))))))));
 }
 //# sourceMappingURL=internal.js.map

package/lib/internal/template/modal/internal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["modal/internal.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,iCAAiC,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAChD,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAE1E,OAAO,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,uBAAuB,EAAE,MAAM,6CAA6C,CAAC;AAItF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAWjB;QAXiB,EACpC,IAAI,EACJ,OAAO,EACP,MAAM,EACN,QAAQ,EACR,MAAM,EACN,sBAAsB,EACtB,SAAS,EACT,SAAS,EACT,iBAAiB,GAAG,IAAI,OAEL,EADhB,IAAI,cAV6B,4HAWrC,CADQ;IAEP,MAAM,gBAAgB,GAAG,WAAW,EAAE,CAAC;IACvC,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,EAAE,IAAI,gBAAgB,SAAS,CAAC;IACzD,MAAM,uBAAuB,GAAG,MAAM,CAAqB,IAAI,CAAC,CAAC;IACjE,MAAM,CAAC,UAAU,EAAE,cAAc,CAAC,GAAG,uBAAuB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IAErE,MAAM,IAAI,GAAG,eAAe,CAAC,OAAO,CAAC,CAAC;IACtC,MAAM,cAAc,GAAG,IAAI,CAAC,gBAAgB,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAEnE,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,MAAM,SAAS,GAAG,YAAY,CAAC,cAAc,EAAE,SAAS,EAAE,iBAAiB,CAAC,CAAC;IAE7E,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,mEAAmE;IACnE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,mBAAmB,EAAE,CAAC;QACxB,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,+BAA+B;IAC/B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE;YACX,oBAAoB,EAAE,CAAC;SACxB;aAAM;YACL,mBAAmB,EAAE,CAAC;SACvB;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,0GAA0G;IAC1G,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,IAAI,SAAS,CAAC,OAAO,EAAE;YAChC,SAAS,CAAC,OAAO,CAAC,SAAS,GAAG,CAAC,CAAC;SACjC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,MAAM,OAAO,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,sBAAsB,CAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC;IAElF,MAAM,kBAAkB,GAAG,CAAC,KAAuB,EAAE,EAAE;QACrD,uBAAuB,CAAC,OAAO,GAAG,KAAK,CAAC,MAAqB,CAAC;IAChE,CAAC,CAAC;IACF,MAAM,cAAc,GAAG,CAAC,KAAuB,EAAE,EAAE;QACjD,MAAM,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC;QAClC,MAAM,WAAW,GAAG,uBAAuB,CAAC,OAAO,CAAC;QAEpD,IAAI,KAAK,CAAC,MAAM,KAAK,OAAO,IAAI,WAAW,KAAK,OAAO,EAAE;YACvD,OAAO,CAAC,SAAS,CAAC,CAAC;SACpB;IACH,CAAC,CAAC;IACF,MAAM,kBAAkB,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IACxD,MAAM,aAAa,GAAG,CAAC,KAA0B,EAAE,EAAE;QACnD,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,MAAM,EAAE;YACpC,OAAO,CAAC,UAAU,CAAC,CAAC;SACrB;IACH,CAAC,CAAC;IAEF,2EAA2E;IAC3E,sDAAsD;IACtD,MAAM,EAAE,GAAG,EAAE,iBAAiB,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,uBAAuB,EAAE,CAAC;IAE1F,OAAO,CACL,oBAAC,MAAM,IAAC,SAAS,EAAE,SAAS;QAC1B,oBAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE;YAClC,6CACM,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,EAAE,SAAS,CAAC,SAAS,EAAE,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC,EAC7G,IAAI,EAAC,QAAQ,gBACD,IAAI,qBACC,QAAQ,EACzB,WAAW,EAAE,kBAAkB,EAC/B,OAAO,EAAE,cAAc,EACvB,GAAG,EAAE,SAAS;gBAEd,oBAAC,SAAS,IAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC;oBACjG,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,MAAM,EACb,MAAM,CAAC,IAAI,CAAC,EACZ,MAAM,CAAC,cAAc,UAAU,EAAE,CAAC,EAClC,SAAS,IAAI,MAAM,CAAC,OAAO,CAC5B,EACD,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,CAAC,CAAC;wBAEZ,6BAAK,SAAS,EAAE,MAAM,CAAC,SAAS;4BAC9B,6BAAK,SAAS,EAAE,MAAM,CAAC,MAAM;gCAC3B,oBAAC,cAAc,IACb,OAAO,EAAC,IAAI,EACZ,wBAAwB,EAAE,IAAI,EAC9B,OAAO,EACL,oBAAC,cAAc,IACb,SAAS,EAAE,cAAc,EACzB,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,EACpC,OAAO,EAAC,eAAe,EACvB,QAAQ,EAAC,OAAO,EAChB,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,kBAAkB,GAC3B;oCAGJ,8BAAM,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,IAClD,MAAM,CACF,CACQ,CACb;4BACN,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,sBAAsB,EAAE,CAAC;gCACtF,QAAQ;gCACT,6BAAK,GAAG,EAAE,iBAAiB,GAAI,CAC3B;4BACL,MAAM,IAAI,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,IAAI,MAAM,CAAC,eAAe,CAAC,CAAC,IAAG,MAAM,CAAO,CAClG,CACF,CACI,CACR,CACoB,CACrB,CACV,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { KeyCode } from '../internal/keycode';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { InternalButton } from '../button/internal';\nimport InternalHeader from '../header/internal';\nimport Portal from '../internal/components/portal';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { FormFieldContext } from '../internal/context/form-field-context';\n\nimport { disableBodyScrolling, enableBodyScrolling } from './body-scroll';\nimport { ModalProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { SomeRequired } from '../internal/types';\nimport FocusLock from '../internal/components/focus-lock';\nimport { useInternalI18n } from '../internal/i18n/context';\nimport { useIntersectionObserver } from '../internal/hooks/use-intersection-observer';\n\ntype InternalModalProps = SomeRequired<ModalProps, 'size' \| 'closeAriaLabel'> & InternalBaseComponentProps;\n\nexport default function InternalModal({\n size,\n visible,\n header,\n children,\n footer,\n disableContentPaddings,\n onDismiss,\n modalRoot,\n __internalRootRef = null,\n ...rest\n}: InternalModalProps) {\n const instanceUniqueId = useUniqueId();\n const headerId = `${rest.id \|\| instanceUniqueId}-header`;\n const lastMouseDownElementRef = useRef<HTMLElement \| null>(null);\n const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n\n const i18n = useInternalI18n('modal');\n const closeAriaLabel = i18n('closeAriaLabel', rest.closeAriaLabel);\n\n const refObject = useRef<HTMLDivElement>(null);\n const mergedRef = useMergeRefs(breakpointsRef, refObject, __internalRootRef);\n\n const isRefresh = useVisualRefresh();\n\n const baseProps = getBaseProps(rest);\n\n // enable body scroll and restore focus if unmounting while visible\n useEffect(() => {\n return () => {\n enableBodyScrolling();\n };\n }, []);\n\n // enable / disable body scroll\n useEffect(() => {\n if (visible) {\n disableBodyScrolling();\n } else {\n enableBodyScrolling();\n }\n }, [visible]);\n\n // Because we hide the element with styles (and not actually detach it from DOM), we need to scroll to top\n useEffect(() => {\n if (visible && refObject.current) {\n refObject.current.scrollTop = 0;\n }\n }, [visible]);\n\n const dismiss = (reason: string) => fireNonCancelableEvent(onDismiss, { reason });\n\n const onOverlayMouseDown = (event: React.MouseEvent) => {\n lastMouseDownElementRef.current = event.target as HTMLElement;\n };\n const onOverlayClick = (event: React.MouseEvent) => {\n const overlay = refObject.current;\n const lastClicked = lastMouseDownElementRef.current;\n\n if (event.target === overlay && lastClicked === overlay) {\n dismiss('overlay');\n }\n };\n const onCloseButtonClick = () => dismiss('closeButton');\n const escKeyHandler = (event: React.KeyboardEvent) => {\n if (event.keyCode === KeyCode.escape) {\n dismiss('keyboard');\n }\n };\n\n // We use an empty div element at the end of the content slot as a sentinel\n // to detect when the user has scrolled to the bottom.\n const { ref: stickySentinelRef, isIntersecting: footerStuck } = useIntersectionObserver();\n\n return (\n <Portal container={modalRoot}>\n <FormFieldContext.Provider value={{}}>\n <div\n {...baseProps}\n className={clsx(styles.root, { [styles.hidden]: !visible }, baseProps.className, isRefresh && styles.refresh)}\n role=\"dialog\"\n aria-modal={true}\n aria-labelledby={headerId}\n onMouseDown={onOverlayMouseDown}\n onClick={onOverlayClick}\n ref={mergedRef}\n >\n <FocusLock disabled={!visible} autoFocus={true} restoreFocus={true} className={styles['focus-lock']}>\n <div\n className={clsx(\n styles.dialog,\n styles[size],\n styles[`breakpoint-${breakpoint}`],\n isRefresh && styles.refresh\n )}\n onKeyDown={escKeyHandler}\n tabIndex={-1}\n >\n <div className={styles.container}>\n <div className={styles.header}>\n <InternalHeader\n variant=\"h2\"\n __disableActionsWrapping={true}\n actions={\n <InternalButton\n ariaLabel={closeAriaLabel}\n className={styles['dismiss-control']}\n variant=\"modal-dismiss\"\n iconName=\"close\"\n formAction=\"none\"\n onClick={onCloseButtonClick}\n />\n }\n >\n <span id={headerId} className={styles['header--text']}>\n {header}\n </span>\n </InternalHeader>\n </div>\n <div className={clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings })}>\n {children}\n <div ref={stickySentinelRef} />\n </div>\n {footer && <div className={clsx(styles.footer, footerStuck && styles['footer--stuck'])}>{footer}</div>}\n </div>\n </div>\n </FocusLock>\n </div>\n </FormFieldContext.Provider>\n </Portal>\n );\n}\n"]}
1	+ {"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["modal/internal.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, { useEffect, useRef } from 'react';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { KeyCode } from '../internal/keycode';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { InternalButton } from '../button/internal';\nimport InternalHeader from '../header/internal';\nimport Portal from '../internal/components/portal';\nimport { useContainerBreakpoints, useContainerQuery } from '../internal/hooks/container-queries';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { FormFieldContext } from '../internal/context/form-field-context';\n\nimport { disableBodyScrolling, enableBodyScrolling } from './body-scroll';\nimport { ModalProps } from './interfaces';\nimport styles from './styles.css.js';\nimport { SomeRequired } from '../internal/types';\nimport FocusLock from '../internal/components/focus-lock';\nimport { useInternalI18n } from '../internal/i18n/context';\nimport { useIntersectionObserver } from '../internal/hooks/use-intersection-observer';\n\ntype InternalModalProps = SomeRequired<ModalProps, 'size' \| 'closeAriaLabel'> & InternalBaseComponentProps;\n\nexport default function InternalModal({ modalRoot, ...rest }: InternalModalProps) {\n return (\n <Portal container={modalRoot}>\n <InnerModal {...rest} />\n </Portal>\n );\n}\n\n// Separate component to prevent the Portal from getting in the way of refs, as it needs extra cycles to render the inner components.\n// useContainerQuery needs its targeted element to exist on the first render in order to work properly.\nfunction InnerModal({\n size,\n visible,\n header,\n children,\n footer,\n disableContentPaddings,\n onDismiss,\n __internalRootRef = null,\n ...rest\n}: InternalModalProps) {\n const instanceUniqueId = useUniqueId();\n const headerId = `${rest.id \|\| instanceUniqueId}-header`;\n const lastMouseDownElementRef = useRef<HTMLElement \| null>(null);\n const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n\n const i18n = useInternalI18n('modal');\n const closeAriaLabel = i18n('closeAriaLabel', rest.closeAriaLabel);\n\n const refObject = useRef<HTMLDivElement>(null);\n const mergedRef = useMergeRefs(breakpointsRef, refObject, __internalRootRef);\n\n const isRefresh = useVisualRefresh();\n\n const baseProps = getBaseProps(rest);\n\n // enable body scroll and restore focus if unmounting while visible\n useEffect(() => {\n return () => {\n enableBodyScrolling();\n };\n }, []);\n\n // enable / disable body scroll\n useEffect(() => {\n if (visible) {\n disableBodyScrolling();\n } else {\n enableBodyScrolling();\n }\n }, [visible]);\n\n // Because we hide the element with styles (and not actually detach it from DOM), we need to scroll to top\n useEffect(() => {\n if (visible && refObject.current) {\n refObject.current.scrollTop = 0;\n }\n }, [visible]);\n\n const dismiss = (reason: string) => fireNonCancelableEvent(onDismiss, { reason });\n\n const onOverlayMouseDown = (event: React.MouseEvent) => {\n lastMouseDownElementRef.current = event.target as HTMLElement;\n };\n const onOverlayClick = (event: React.MouseEvent) => {\n const overlay = refObject.current;\n const lastClicked = lastMouseDownElementRef.current;\n\n if (event.target === overlay && lastClicked === overlay) {\n dismiss('overlay');\n }\n };\n const onCloseButtonClick = () => dismiss('closeButton');\n const escKeyHandler = (event: React.KeyboardEvent) => {\n if (event.keyCode === KeyCode.escape) {\n dismiss('keyboard');\n }\n };\n\n // We use an empty div element at the end of the content slot as a sentinel\n // to detect when the user has scrolled to the bottom.\n const { ref: stickySentinelRef, isIntersecting: footerStuck } = useIntersectionObserver();\n\n // Add extra scroll padding to account for the height of the sticky footer,\n // to prevent it from covering focused elements.\n const [footerHeight, footerRef] = useContainerQuery(rect => rect.borderBoxHeight);\n\n return (\n <FormFieldContext.Provider value={{}}>\n <div\n {...baseProps}\n className={clsx(styles.root, { [styles.hidden]: !visible }, baseProps.className, isRefresh && styles.refresh)}\n role=\"dialog\"\n aria-modal={true}\n aria-labelledby={headerId}\n onMouseDown={onOverlayMouseDown}\n onClick={onOverlayClick}\n ref={mergedRef}\n style={footerHeight ? { scrollPaddingBottom: footerHeight } : undefined}\n >\n <FocusLock disabled={!visible} autoFocus={true} restoreFocus={true} className={styles['focus-lock']}>\n <div\n className={clsx(\n styles.dialog,\n styles[size],\n styles[`breakpoint-${breakpoint}`],\n isRefresh && styles.refresh\n )}\n onKeyDown={escKeyHandler}\n tabIndex={-1}\n >\n <div className={styles.container}>\n <div className={styles.header}>\n <InternalHeader\n variant=\"h2\"\n __disableActionsWrapping={true}\n actions={\n <InternalButton\n ariaLabel={closeAriaLabel}\n className={styles['dismiss-control']}\n variant=\"modal-dismiss\"\n iconName=\"close\"\n formAction=\"none\"\n onClick={onCloseButtonClick}\n />\n }\n >\n <span id={headerId} className={styles['header--text']}>\n {header}\n </span>\n </InternalHeader>\n </div>\n <div className={clsx(styles.content, { [styles['no-paddings']]: disableContentPaddings })}>\n {children}\n <div ref={stickySentinelRef} />\n </div>\n {footer && (\n <div ref={footerRef} className={clsx(styles.footer, footerStuck && styles['footer--stuck'])}>\n {footer}\n </div>\n )}\n </div>\n </div>\n </FocusLock>\n </div>\n </FormFieldContext.Provider>\n );\n}\n"]}

package/lib/internal/template/table/body-cell/index.d.ts CHANGED Viewed

@@ -5,8 +5,9 @@ interface TableBodyCellProps<ItemType> extends TableTdElementProps {
     column: TableProps.ColumnDefinition<ItemType>;
     item: ItemType;
     isEditing: boolean;
+    successfulEdit?: boolean;
     onEditStart: () => void;
-    onEditEnd: () => void;
+    onEditEnd: (cancelled: boolean) => void;
     submitEdit?: TableProps.SubmitEditFunction<ItemType>;
     ariaLabels: TableProps['ariaLabels'];
 }

package/lib/internal/template/table/body-cell/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,cAAc,CAAC;~~AAOnE~~,UAAU,kBAAkB,CAAC,QAAQ,CAAE,SAAQ,mBAAmB;IAChE,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,EAAE,~~MAAM~~,IAAI,CAAC;~~IACtB~~,UAAU,CAAC,EAAE,UAAU,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACrD,UAAU,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;CACtC;~~AAsED~~,wBAAgB,aAAa,CAAC,QAAQ,EAAE,EACtC,UAAU,EACV,GAAG,IAAI,EACR,EAAE,kBAAkB,CAAC,QAAQ,CAAC,GAAG;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,eAMxD"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/index.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAQnE,UAAU,kBAAkB,CAAC,QAAQ,CAAE,SAAQ,mBAAmB;IAChE,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,UAAU,CAAC,EAAE,UAAU,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACrD,UAAU,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;CACtC;AAoFD,wBAAgB,aAAa,CAAC,QAAQ,EAAE,EACtC,UAAU,EACV,GAAG,IAAI,EACR,EAAE,kBAAkB,CAAC,QAAQ,CAAC,GAAG;IAAE,UAAU,EAAE,OAAO,CAAA;CAAE,eAMxD"}

package/lib/internal/template/table/body-cell/index.js CHANGED Viewed

@@ -8,12 +8,13 @@ import { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';
 import Icon from '../../icon/internal';
 import { TableTdElement } from './td-element';
 import { InlineEditor } from './inline-editor';
+import LiveRegion from '../../internal/components/live-region/index.js';
 const submitHandlerFallback = () => {
     throw new Error('The function `handleSubmit` is required for editable columns');
 };
 function TableCellEditable(_a) {
-    var _b;
-    var { className, item, column, isEditing, onEditStart, onEditEnd, submitEdit, ariaLabels, isVisualRefresh } = _a, rest = __rest(_a, ["className", "item", "column", "isEditing", "onEditStart", "onEditEnd", "submitEdit", "ariaLabels", "isVisualRefresh"]);
+    var _b, _c, _d;
+    var { className, item, column, isEditing, onEditStart, onEditEnd, submitEdit, ariaLabels, isVisualRefresh, successfulEdit = false } = _a, rest = __rest(_a, ["className", "item", "column", "isEditing", "onEditStart", "onEditEnd", "submitEdit", "ariaLabels", "isVisualRefresh", "successfulEdit"]);
     const editActivateRef = useRef(null);
     const tdNativeAttributes = {
         'data-inline-editing-active': isEditing.toString(),
@@ -27,9 +28,13 @@ function TableCellEditable(_a) {
     const [hasHover, setHasHover] = useState(false);
     const [hasFocus, setHasFocus] = useState(false);
     const showIcon = hasHover || hasFocus;
-    return (React.createElement(TableTdElement, Object.assign({}, rest, { nativeAttributes: tdNativeAttributes, className: clsx(className, styles['body-cell-editable'], isEditing && styles['body-cell-edit-active'], isVisualRefresh && styles['is-visual-refresh']), onClick: !isEditing ? onEditStart : undefined, onMouseEnter: () => setHasHover(true), onMouseLeave: () => setHasHover(false) }), isEditing ? (React.createElement(InlineEditor, { ariaLabels: ariaLabels, column: column, item: item, onEditEnd: onEditEnd, submitEdit: submitEdit !== null && submitEdit !== void 0 ? submitEdit : submitHandlerFallback })) : (React.createElement(React.Fragment, null,
+    return (React.createElement(TableTdElement, Object.assign({}, rest, { nativeAttributes: tdNativeAttributes, className: clsx(className, styles['body-cell-editable'], isEditing && styles['body-cell-edit-active'], successfulEdit && styles['body-cell-has-success'], isVisualRefresh && styles['is-visual-refresh']), onClick: !isEditing ? onEditStart : undefined, onMouseEnter: () => setHasHover(true), onMouseLeave: () => setHasHover(false) }), isEditing ? (React.createElement(InlineEditor, { ariaLabels: ariaLabels, column: column, item: item, onEditEnd: onEditEnd, submitEdit: submitEdit !== null && submitEdit !== void 0 ? submitEdit : submitHandlerFallback })) : (React.createElement(React.Fragment, null,
         column.cell(item),
-        React.createElement("button", { className: styles['body-cell-editor'], "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.activateEditLabel) === null || _b === void 0 ? void 0 : _b.call(ariaLabels, column, item), ref: editActivateRef, onFocus: () => setHasFocus(true), onBlur: () => setHasFocus(false) }, showIcon && React.createElement(Icon, { name: "edit" }))))));
+        successfulEdit && (React.createElement(React.Fragment, null,
+            React.createElement("span", { className: styles['body-cell-success'], "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.successfulEditLabel) === null || _b === void 0 ? void 0 : _b.call(ariaLabels, column), role: "img" },
+                React.createElement(Icon, { name: "status-positive", variant: "success" })),
+            React.createElement(LiveRegion, null, (_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.successfulEditLabel) === null || _c === void 0 ? void 0 : _c.call(ariaLabels, column)))),
+        React.createElement("button", { className: styles['body-cell-editor'], "aria-label": (_d = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.activateEditLabel) === null || _d === void 0 ? void 0 : _d.call(ariaLabels, column, item), ref: editActivateRef, onFocus: () => setHasFocus(true), onBlur: () => setHasFocus(false) }, showIcon && React.createElement(Icon, { name: "edit" }))))));
 }
 export function TableBodyCell(_a) {
     var { isEditable } = _a, rest = __rest(_a, ["isEditable"]);

package/lib/internal/template/table/body-cell/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["table/body-cell/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAC9E,OAAO,IAAI,MAAM,qBAAqB,CAAC;AAEvC,OAAO,EAAE,cAAc,EAAuB,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;~~AAE~~/C,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACjC,MAAM,IAAI,KAAK,CAAC,8DAA8D,CAAC,CAAC;AAClF,CAAC,CAAC;~~AAYF~~,SAAS,iBAAiB,CAAW,~~EAWN~~;;~~QAXM~~,EACnC,SAAS,EACT,IAAI,EACJ,MAAM,EACN,SAAS,EACT,WAAW,EACX,SAAS,EACT,UAAU,EACV,UAAU,EACV,eAAe,~~OAEc~~,EAD1B,IAAI,~~cAV4B~~,~~uHAWpC~~,CADQ;IAEP,MAAM,eAAe,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACxD,MAAM,kBAAkB,GAAG;QACzB,4BAA4B,EAAE,SAAS,CAAC,QAAQ,EAAE;KACnD,CAAC;IAEF,iBAAiB,CAAC,GAAG,EAAE;QACrB,IAAI,CAAC,SAAS,IAAI,eAAe,CAAC,OAAO,EAAE;YACzC,eAAe,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SACjC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,4FAA4F;IAC5F,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,QAAQ,IAAI,QAAQ,CAAC;IAEtC,OAAO,CACL,oBAAC,cAAc,oBACT,IAAI,IACR,gBAAgB,EAAE,kBAA6D,EAC/E,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,oBAAoB,CAAC,EAC5B,SAAS,IAAI,MAAM,CAAC,uBAAuB,CAAC,EAC5C,eAAe,IAAI,MAAM,CAAC,mBAAmB,CAAC,CAC/C,EACD,OAAO,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAC7C,YAAY,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EACrC,YAAY,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,KAErC,SAAS,CAAC,CAAC,CAAC,CACX,oBAAC,YAAY,IACX,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,qBAAqB,GAC/C,CACH,CAAC,CAAC,CAAC,CACF;QACG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;~~QAClB~~,gCACE,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC,gBACzB,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,iBAAiB,2DAAG,MAAM,EAAE,IAAI,CAAC,EACzD,GAAG,EAAE,eAAe,EACpB,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAChC,MAAM,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,IAE/B,QAAQ,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,CAC1B,CACR,CACJ,CACc,CAClB,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,aAAa,CAAW,EAGiB;QAHjB,EACtC,UAAU,OAE6C,EADpD,IAAI,cAF+B,cAGvC,CADQ;IAEP,IAAI,UAAU,IAAI,IAAI,CAAC,SAAS,EAAE;QAChC,OAAO,oBAAC,iBAAiB,oBAAK,IAAI,EAAI,CAAC;KACxC;IACD,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;IAC9B,OAAO,oBAAC,cAAc,oBAAK,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAkB,CAAC;AACxE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport React, { useRef, useState } from 'react';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';\nimport Icon from '../../icon/internal';\nimport { TableProps } from '../interfaces';\nimport { TableTdElement, TableTdElementProps } from './td-element';\nimport { InlineEditor } from './inline-editor';\n\nconst submitHandlerFallback = () => {\n throw new Error('The function `handleSubmit` is required for editable columns');\n};\n\ninterface TableBodyCellProps<ItemType> extends TableTdElementProps {\n column: TableProps.ColumnDefinition<ItemType>;\n item: ItemType;\n isEditing: boolean;\n onEditStart: () => void;\n onEditEnd: () => void;\n submitEdit?: TableProps.SubmitEditFunction<ItemType>;\n ariaLabels: TableProps['ariaLabels'];\n}\n\nfunction TableCellEditable<ItemType>({\n className,\n item,\n column,\n isEditing,\n onEditStart,\n onEditEnd,\n submitEdit,\n ariaLabels,\n isVisualRefresh,\n ...rest\n}: TableBodyCellProps<ItemType>) {\n const editActivateRef = useRef<HTMLButtonElement>(null);\n const tdNativeAttributes = {\n 'data-inline-editing-active': isEditing.toString(),\n };\n\n useEffectOnUpdate(() => {\n if (!isEditing && editActivateRef.current) {\n editActivateRef.current.focus();\n }\n }, [isEditing]);\n\n // To improve the initial page render performance we only show the edit icon when necessary.\n const [hasHover, setHasHover] = useState(false);\n const [hasFocus, setHasFocus] = useState(false);\n const showIcon = hasHover \|\| hasFocus;\n\n return (\n <TableTdElement\n {...rest}\n nativeAttributes={tdNativeAttributes as TableTdElementProps['nativeAttributes']}\n className={clsx(\n className,\n styles['body-cell-editable'],\n isEditing && styles['body-cell-edit-active'],\n isVisualRefresh && styles['is-visual-refresh']\n )}\n onClick={!isEditing ? onEditStart : undefined}\n onMouseEnter={() => setHasHover(true)}\n onMouseLeave={() => setHasHover(false)}\n >\n {isEditing ? (\n <InlineEditor\n ariaLabels={ariaLabels}\n column={column}\n item={item}\n onEditEnd={onEditEnd}\n submitEdit={submitEdit ?? submitHandlerFallback}\n />\n ) : (\n <>\n {column.cell(item)}\n <button\n className={styles['body-cell-editor']}\n aria-label={ariaLabels?.activateEditLabel?.(column, item)}\n ref={editActivateRef}\n onFocus={() => setHasFocus(true)}\n onBlur={() => setHasFocus(false)}\n >\n {showIcon && <Icon name=\"edit\" />}\n </button>\n </>\n )}\n </TableTdElement>\n );\n}\n\nexport function TableBodyCell<ItemType>({\n isEditable,\n ...rest\n}: TableBodyCellProps<ItemType> & { isEditable: boolean }) {\n if (isEditable \|\| rest.isEditing) {\n return <TableCellEditable {...rest} />;\n }\n const { column, item } = rest;\n return <TableTdElement {...rest}>{column.cell(item)}</TableTdElement>;\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["table/body-cell/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 clsx from 'clsx';\nimport styles from './styles.css.js';\nimport React, { useRef, useState } from 'react';\nimport { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';\nimport Icon from '../../icon/internal';\nimport { TableProps } from '../interfaces';\nimport { TableTdElement, TableTdElementProps } from './td-element';\nimport { InlineEditor } from './inline-editor';\nimport LiveRegion from '../../internal/components/live-region/index.js';\n\nconst submitHandlerFallback = () => {\n throw new Error('The function `handleSubmit` is required for editable columns');\n};\n\ninterface TableBodyCellProps<ItemType> extends TableTdElementProps {\n column: TableProps.ColumnDefinition<ItemType>;\n item: ItemType;\n isEditing: boolean;\n successfulEdit?: boolean;\n onEditStart: () => void;\n onEditEnd: (cancelled: boolean) => void;\n submitEdit?: TableProps.SubmitEditFunction<ItemType>;\n ariaLabels: TableProps['ariaLabels'];\n}\n\nfunction TableCellEditable<ItemType>({\n className,\n item,\n column,\n isEditing,\n onEditStart,\n onEditEnd,\n submitEdit,\n ariaLabels,\n isVisualRefresh,\n successfulEdit = false,\n ...rest\n}: TableBodyCellProps<ItemType>) {\n const editActivateRef = useRef<HTMLButtonElement>(null);\n const tdNativeAttributes = {\n 'data-inline-editing-active': isEditing.toString(),\n };\n\n useEffectOnUpdate(() => {\n if (!isEditing && editActivateRef.current) {\n editActivateRef.current.focus();\n }\n }, [isEditing]);\n\n // To improve the initial page render performance we only show the edit icon when necessary.\n const [hasHover, setHasHover] = useState(false);\n const [hasFocus, setHasFocus] = useState(false);\n const showIcon = hasHover \|\| hasFocus;\n\n return (\n <TableTdElement\n {...rest}\n nativeAttributes={tdNativeAttributes as TableTdElementProps['nativeAttributes']}\n className={clsx(\n className,\n styles['body-cell-editable'],\n isEditing && styles['body-cell-edit-active'],\n successfulEdit && styles['body-cell-has-success'],\n isVisualRefresh && styles['is-visual-refresh']\n )}\n onClick={!isEditing ? onEditStart : undefined}\n onMouseEnter={() => setHasHover(true)}\n onMouseLeave={() => setHasHover(false)}\n >\n {isEditing ? (\n <InlineEditor\n ariaLabels={ariaLabels}\n column={column}\n item={item}\n onEditEnd={onEditEnd}\n submitEdit={submitEdit ?? submitHandlerFallback}\n />\n ) : (\n <>\n {column.cell(item)}\n {successfulEdit && (\n <>\n <span\n className={styles['body-cell-success']}\n aria-label={ariaLabels?.successfulEditLabel?.(column)}\n role=\"img\"\n >\n <Icon name=\"status-positive\" variant=\"success\" />\n </span>\n <LiveRegion>{ariaLabels?.successfulEditLabel?.(column)}</LiveRegion>\n </>\n )}\n <button\n className={styles['body-cell-editor']}\n aria-label={ariaLabels?.activateEditLabel?.(column, item)}\n ref={editActivateRef}\n onFocus={() => setHasFocus(true)}\n onBlur={() => setHasFocus(false)}\n >\n {showIcon && <Icon name=\"edit\" />}\n </button>\n </>\n )}\n </TableTdElement>\n );\n}\n\nexport function TableBodyCell<ItemType>({\n isEditable,\n ...rest\n}: TableBodyCellProps<ItemType> & { isEditable: boolean }) {\n if (isEditable \|\| rest.isEditing) {\n return <TableCellEditable {...rest} />;\n }\n const { column, item } = rest;\n return <TableTdElement {...rest}>{column.cell(item)}</TableTdElement>;\n}\n"]}

package/lib/internal/template/table/body-cell/inline-editor.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ interface InlineEditorProps<ItemType> {
     ariaLabels: TableProps['ariaLabels'];
     column: TableProps.ColumnDefinition<ItemType>;
     item: ItemType;
-    onEditEnd: () => void;
+    onEditEnd: (cancelled: boolean) => void;
     submitEdit: TableProps.SubmitEditFunction<ItemType>;
     __onRender?: () => void;
 }

package/lib/internal/template/table/body-cell/inline-editor.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"inline-editor.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/inline-editor.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;~~AAQ3C~~,UAAU,iBAAiB,CAAC,QAAQ;IAClC,UAAU,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACrC,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,~~MAAM~~,IAAI,CAAC;~~IACtB~~,UAAU,EAAE,UAAU,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,EACrC,UAAU,EACV,IAAI,EACJ,MAAM,EACN,SAAS,EACT,UAAU,EACV,UAAU,GACX,EAAE,iBAAiB,CAAC,QAAQ,CAAC,~~eAiH7B~~"}
1	+ {"version":3,"file":"inline-editor.d.ts","sourceRoot":"lib/default/","sources":["table/body-cell/inline-editor.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAS3C,UAAU,iBAAiB,CAAC,QAAQ;IAClC,UAAU,EAAE,UAAU,CAAC,YAAY,CAAC,CAAC;IACrC,MAAM,EAAE,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;IAC9C,IAAI,EAAE,QAAQ,CAAC;IACf,SAAS,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,UAAU,EAAE,UAAU,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;IACpD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,YAAY,CAAC,QAAQ,EAAE,EACrC,UAAU,EACV,IAAI,EACJ,MAAM,EACN,SAAS,EACT,UAAU,EACV,UAAU,GACX,EAAE,iBAAiB,CAAC,QAAQ,CAAC,eAkH7B"}

package/lib/internal/template/table/body-cell/inline-editor.js CHANGED Viewed

@@ -8,10 +8,11 @@ import SpaceBetween from '../../space-between/internal';
 import { useClickAway } from './click-away';
 import styles from './styles.css.js';
 import FocusLock from '../../internal/components/focus-lock';
+import LiveRegion from '../../internal/components/live-region';
 // A function that does nothing
 const noop = () => undefined;
 export function InlineEditor({ ariaLabels, item, column, onEditEnd, submitEdit, __onRender, }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const [currentEditLoading, setCurrentEditLoading] = useState(false);
     const [currentEditValue, setCurrentEditValue] = useState();
     const focusLockRef = useRef(null);
@@ -23,7 +24,7 @@ export function InlineEditor({ ariaLabels, item, column, onEditEnd, submitEdit,
         if (!cancel) {
             setCurrentEditValue(undefined);
         }
-        onEditEnd();
+        onEditEnd(cancel);
     }
     function onSubmitClick(evt) {
         var _a;
@@ -74,6 +75,7 @@ export function InlineEditor({ ariaLabels, item, column, onEditEnd, submitEdit,
                         React.createElement("span", { className: styles['body-cell-editor-controls'] },
                             React.createElement(SpaceBetween, { direction: "horizontal", size: "xxs" },
                                 !currentEditLoading ? (React.createElement(Button, { ariaLabel: (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.cancelEditLabel) === null || _b === void 0 ? void 0 : _b.call(ariaLabels, column), formAction: "none", iconName: "close", variant: "inline-icon", onClick: onCancel })) : null,
-                                React.createElement(Button, { ariaLabel: (_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.submitEditLabel) === null || _c === void 0 ? void 0 : _c.call(ariaLabels, column), formAction: "submit", iconName: "check", variant: "inline-icon", loading: currentEditLoading })))))))));
+                                React.createElement(Button, { ariaLabel: (_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.submitEditLabel) === null || _c === void 0 ? void 0 : _c.call(ariaLabels, column), formAction: "submit", iconName: "check", variant: "inline-icon", loading: currentEditLoading })),
+                            React.createElement(LiveRegion, null, currentEditLoading ? (_d = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.submittingEditText) === null || _d === void 0 ? void 0 : _d.call(ariaLabels, column) : ''))))))));
 }
 //# sourceMappingURL=inline-editor.js.map