@cloudscape-design/components-themeable 3.0.639 → 3.0.641

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "94ca71b8aef86bf77b0ea1b7d4c27a55fe3616cb"
+  "commit": "069cda1560c7b5eb251bc13786f9d8a572e882fe"
 }

package/lib/internal/scss/button/styles.scss

@@ -147,6 +147,18 @@
     margin-inline-start: awsui.$space-xxs;
   }
 
+  &.variant-inline-link {
+    > .icon-left {
+      inset-inline-start: 0;
+      margin-inline-end: awsui.$space-xs;
+    }
+
+    > .icon-right {
+      inset-inline-end: 0;
+      margin-inline-start: awsui.$space-xs;
+    }
+  }
+
   &.button-no-text > .icon {
     margin-inline-start: auto;
     margin-inline-end: auto;

package/lib/internal/scss/drawer/styles.scss

@@ -10,8 +10,8 @@
 .drawer {
   @include styles.styles-reset;
   word-wrap: break-word;
-  padding-block-start: awsui.$space-scaled-l;
-  padding-block-end: awsui.$space-scaled-xxxl;
+  padding-block-start: awsui.$space-panel-header-vertical;
+  padding-block-end: awsui.$space-panel-content-bottom;
   padding-inline-start: awsui.$space-panel-side-left;
   padding-inline-end: awsui.$space-panel-side-right;
 }
@@ -19,12 +19,12 @@
 .header {
   @include styles.font-panel-header;
   color: awsui.$color-text-heading-default;
-  padding-block-end: awsui.$space-scaled-l;
+  padding-block-end: awsui.$space-panel-header-vertical;
   padding-inline: awsui.$space-panel-side-left calc(#{awsui.$space-xl} + #{awsui.$space-scaled-xxl});
   // padding to make sure the header doesn't overlap with the close icon
-  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
   margin-block-start: 0;
-  margin-block-end: awsui.$space-scaled-l;
+  margin-block-end: awsui.$space-panel-content-top;
   margin-inline-end: calc(-1 * #{awsui.$space-panel-side-right});
   margin-inline-start: calc(-1 * #{awsui.$space-panel-side-left});
 

package/lib/internal/scss/form-field/motion.scss

@@ -3,19 +3,22 @@
  SPDX-License-Identifier: Apache-2.0
 */
 
-.error-icon-shake-wrapper {
+.error-icon-shake-wrapper,
+.warning-icon-shake-wrapper {
   @include styles.with-motion {
     @include styles.animation-shake-horizontally;
     animation: awsui-motion-shake-horizontally awsui.$motion-duration-refresh-only-medium;
   }
 }
-.error-icon-scale-wrapper {
+.error-icon-scale-wrapper,
+.warning-icon-scale-wrapper {
   @include styles.with-motion {
     @include styles.animation-scale-popup;
     animation: awsui-motion-scale-popup awsui.$motion-duration-refresh-only-medium awsui.$motion-easing-refresh-only-a;
   }
 }
 
+.warning,
 .error {
   @include styles.with-motion {
     @include styles.animation-fade-in-0;

package/lib/internal/scss/form-field/styles.scss

@@ -34,7 +34,7 @@
 }
 
 .hints,
-.constraint-has-error {
+.constraint-has-validation-text {
   padding-block-start: awsui.$space-xxs;
 }
 
@@ -60,7 +60,16 @@
   align-items: flex-start;
 }
 
-.error__message {
+.warning {
+  color: awsui.$color-text-status-warning;
+  @include styles.font-body-s;
+
+  display: flex;
+  align-items: flex-start;
+}
+
+.error__message,
+.warning__message {
   margin-inline-start: awsui.$space-xxs;
 }
 

package/lib/internal/scss/help-panel/styles.scss

@@ -10,7 +10,7 @@
 .help-panel {
   @include styles.styles-reset;
   word-wrap: break-word;
-  padding-block-start: awsui.$space-scaled-l;
+  padding-block-start: awsui.$space-panel-header-vertical;
   padding-block-end: 0;
   padding-inline-end: awsui.$space-panel-side-right;
   padding-inline-start: awsui.$space-panel-side-left;
@@ -20,7 +20,7 @@
     border-inline: none;
     border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
     margin-block: awsui.$space-scaled-xl;
-    margin-inline: calc(-1 * #{awsui.$space-xs});
+    margin-inline: calc(-1 * #{awsui.$space-panel-divider-margin-horizontal});
   }
 
   ol,
@@ -85,7 +85,7 @@
   }
   // sets padding at the bottom of the panel
   & > :last-child {
-    margin-block-end: awsui.$space-scaled-xxxl;
+    margin-block-end: awsui.$space-panel-content-bottom;
   }
 
   // add basic font-sizes
@@ -118,14 +118,14 @@
   .header {
     @include styles.font-panel-header;
     color: awsui.$color-text-heading-default;
-    padding-block-end: awsui.$space-scaled-l;
+    padding-block-end: awsui.$space-panel-header-vertical;
     padding-inline: awsui.$space-panel-side-left calc(#{awsui.$space-xl} + #{awsui.$space-scaled-xxl});
     // padding to make sure the header doesn't overlap with the close icon
     border-block: none;
     border-inline: none;
-    border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
     margin-block-start: 0;
-    margin-block-end: awsui.$space-scaled-l;
+    margin-block-end: awsui.$space-panel-content-top;
     margin-inline-end: calc(-1 * #{awsui.$space-panel-side-right});
     margin-inline-start: calc(-1 * #{awsui.$space-panel-side-left});
 
@@ -161,9 +161,9 @@
   color: awsui.$color-text-body-secondary;
   border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
   margin-block: awsui.$space-scaled-xl;
-  margin-inline: calc(-1 * #{awsui.$space-xs});
+  margin-inline: calc(-1 * #{awsui.$space-panel-divider-margin-horizontal});
   padding-block: 0;
-  padding-inline: awsui.$space-s;
+  padding-inline: awsui.$space-panel-divider-margin-horizontal;
   > :first-child {
     margin-block-start: awsui.$space-scaled-xl;
   }

package/lib/internal/scss/input/styles.scss

@@ -90,6 +90,15 @@
     }
   }
 
+  &.input-warning {
+    @include styles.form-warning-control();
+    &.input-has-icon-left {
+      padding-inline-start: calc(
+        #{styles.$control-icon-horizontal-padding} - (#{styles.$invalid-control-left-border} - #{styles.$control-border-width})
+      );
+    }
+  }
+
   &.input-type-search {
     box-sizing: border-box; // Overrides the [type='search'] CSS from normalize
     -webkit-appearance: none; /* stylelint-disable-line plugin/no-unsupported-browser-features */

package/lib/internal/scss/internal/components/button-trigger/styles.scss

@@ -92,6 +92,11 @@
     &.invalid:focus {
       @include styles.form-invalid-control();
     }
+
+    &.warning,
+    &.warning:focus {
+      @include styles.form-warning-control();
+    }
   }
 
   &.in-filtering-token {

package/lib/internal/scss/internal/styles/forms/mixins.scss

@@ -149,6 +149,17 @@
   @content;
 }
 
+@mixin form-warning-control {
+  color: awsui.$color-text-status-warning;
+  border-color: awsui.$color-text-status-warning;
+  padding-inline-start: constants.$invalid-control-left-padding;
+  border-inline-start-width: constants.$invalid-control-left-border;
+  &:focus {
+    box-shadow: foundation.$box-shadow-focused-light-invalid;
+  }
+  @content;
+}
+
 @mixin label-info-link {
   margin-inline-start: typography.$base-size;
 }

package/lib/internal/scss/side-navigation/styles.scss

@@ -16,7 +16,7 @@
   @include styles.font-panel-header;
   margin-block: 0;
   margin-inline: 0;
-  padding-block: awsui.$space-scaled-l;
+  padding-block: awsui.$space-panel-header-vertical;
   padding-inline-start: awsui.$space-panel-nav-left;
   // Additional xl space to prevent text from overlapping the close button.
   padding-inline-end: calc(#{awsui.$space-scaled-xxl} + #{awsui.$space-xl});
@@ -50,7 +50,7 @@
 }
 
 .list-container {
-  margin-block-start: awsui.$space-scaled-l;
+  margin-block-start: awsui.$space-panel-content-top;
 }
 
 .list {
@@ -69,7 +69,7 @@
   padding-inline-end: awsui.$space-panel-side-right;
 
   &--last {
-    margin-block-end: awsui.$space-scaled-xxxl;
+    margin-block-end: awsui.$space-panel-content-bottom;
   }
 }
 
@@ -172,14 +172,15 @@
 .divider {
   border-block: none;
   border-inline: none;
-  border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }
 
 .divider-default {
   margin-block: awsui.$space-scaled-2x-xl;
-  margin-inline: calc(-1 * #{awsui.$space-s});
+  margin-inline: calc(-1 * #{awsui.$space-panel-divider-margin-horizontal});
+  border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }
 
 .divider-header {
   margin-block-start: 0;
+  border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
 }

package/lib/internal/scss/slider/mixins.scss

@@ -28,14 +28,16 @@ $border-radius-slider-thumb: 50%;
 }
 
 @mixin base-thumb-hover-styles {
-  box-shadow: 0px 0 0 2px awsui.$color-background-slider-handle-ring,
+  box-shadow:
+    0px 0 0 2px awsui.$color-background-slider-handle-ring,
     0 0 0 4px awsui.$color-background-slider-handle-default;
 }
 
 @mixin base-thumb-focus-styles {
   block-size: 20px;
   inline-size: 20px;
-  box-shadow: 0px 0 0 2px awsui.$color-background-slider-handle-ring,
+  box-shadow:
+    0px 0 0 2px awsui.$color-background-slider-handle-ring,
     0 0 0 4px awsui.$color-background-slider-handle-active;
   background: awsui.$color-background-slider-handle-active;
 
@@ -57,11 +59,14 @@ $border-radius-slider-thumb: 50%;
   border-inline-width: 2px;
   border-color: awsui.$color-background-slider-error-pressed;
 
-  box-shadow: 0px 0 0 2px awsui.$color-background-slider-handle-ring,
+  box-shadow:
+    0px 0 0 2px awsui.$color-background-slider-handle-ring,
     0 0 0 4px awsui.$color-background-slider-error-pressed;
 }
 
 @mixin error-thumb-hover-styles {
   background-color: awsui.$color-text-status-error;
-  box-shadow: 0px 0 0 2px awsui.$color-background-slider-handle-ring, 0 0 0 4px awsui.$color-text-status-error;
+  box-shadow:
+    0px 0 0 2px awsui.$color-background-slider-handle-ring,
+    0 0 0 4px awsui.$color-text-status-error;
 }

package/lib/internal/scss/table/body-cell/styles.scss

@@ -25,6 +25,7 @@ $edit-button-padding-right: calc(
   #{awsui.$space-xs} + #{awsui.$space-xxs}
 ); // Cell vertical padding + xxs space that would normally come from the button.
 $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-with-spacing});
+$interactive-column-padding-inline-end: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
 
 @mixin cell-focus-outline {
   @include styles.focus-highlight(calc(-1 * #{awsui.$space-scaled-xxs}));
@@ -357,10 +358,15 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
     &:not(.body-cell-edit-active) {
       &.body-cell-interactive {
         cursor: pointer;
+
+        // Include interactive padding even when a cell is not hovered to prevent jittering when resizableColumns=false.
+        &:not(.resizable-columns) {
+          padding-inline-end: $interactive-column-padding-inline-end;
+        }
       }
 
       @mixin focused-editor-styles {
-        padding-inline-end: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
+        padding-inline-end: $interactive-column-padding-inline-end;
         & > .body-cell-editor-wrapper,
         & > .expandable-cell-content > .body-cell-editor-wrapper {
           opacity: 1;
@@ -393,7 +399,6 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
       &:not(.body-cell-interactive),
       &:focus-within:focus-within,
       &.body-cell-edit-disabled-popover {
-        padding-inline-end: calc(#{$cell-horizontal-padding} + #{awsui.$space-l});
         &.body-cell-has-success {
           // After a successful edit, we display the success icon next to the edit button and need additional padding to not let the text overflow the success icon.
           padding-inline-end: calc(#{$cell-horizontal-padding} + #{awsui.$space-l} + #{$icon-width-with-spacing});

package/lib/internal/scss/textarea/styles.scss

@@ -75,4 +75,8 @@
   &.textarea-invalid {
     @include styles.form-invalid-control();
   }
+
+  &.textarea-warning {
+    @include styles.form-warning-control();
+  }
 }

package/lib/internal/scss/token-group/styles.scss

@@ -68,8 +68,7 @@
   color: awsui.$color-text-body-default;
   box-sizing: border-box;
 }
-.token-box-error {
-  border-color: awsui.$color-border-status-error;
+@mixin token-box-validation {
   border-inline-start-width: awsui.$border-invalid-width;
 
   > .dismiss-button {
@@ -79,6 +78,14 @@
     }
   }
 }
+.token-box-error {
+  border-color: awsui.$color-border-status-error;
+  @include token-box-validation;
+}
+.token-box-warning {
+  border-color: awsui.$color-border-status-warning;
+  @include token-box-validation;
+}
 .token-box-disabled.token-box-disabled {
   border-color: awsui.$color-border-control-disabled;
   background-color: awsui.$color-background-container-content;

package/lib/internal/template/alert/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/alert/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAQ1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,mFAyDV,CAAC;AAGF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/alert/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAQ1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,mFA8DV,CAAC;AAGF,eAAe,KAAK,CAAC"}

package/lib/internal/template/alert/index.js

@@ -15,9 +15,9 @@ const Alert = React.forwardRef((_a, ref) => {
     const baseComponentProps = useBaseComponent('Alert', {
         props: { type, visible, dismissible: props.dismissible },
     }, analyticsMetadata);
-    const { funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();
-    const { stepNumber, stepNameSelector } = useFunnelStep();
-    const { subStepSelector, subStepNameSelector } = useFunnelSubStep();
+    const { funnelIdentifier, funnelInteractionId, funnelErrorContext, submissionAttempt, funnelState, errorCount } = useFunnel();
+    const { stepNumber, stepNameSelector, stepIdentifier } = useFunnelStep();
+    const { subStepSelector, subStepNameSelector, subStepIdentifier, subStepErrorContext } = useFunnelSubStep();
     useEffect(() => {
         var _a, _b, _c;
         if (funnelInteractionId && visible && type === 'error' && funnelState.current !== 'complete') {
@@ -30,6 +30,8 @@ const Alert = React.forwardRef((_a, ref) => {
                 if (subStepSelector) {
                     FunnelMetrics.funnelSubStepError({
                         funnelInteractionId,
+                        funnelIdentifier,
+                        stepIdentifier,
                         subStepSelector,
                         subStepName,
                         subStepNameSelector,
@@ -37,13 +39,15 @@ const Alert = React.forwardRef((_a, ref) => {
                         stepName,
                         stepNameSelector,
                         subStepAllSelector: getSubStepAllSelector(),
-                        instanceIdentifier: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.instanceIdentifier,
-                        errorContext: analyticsMetadata === null || analyticsMetadata === void 0 ? void 0 : analyticsMetadata.errorContext,
+                        subStepIdentifier,
+                        subStepErrorContext,
                     });
                 }
                 else {
                     FunnelMetrics.funnelError({
+                        funnelIdentifier,
                         funnelInteractionId,
+                        funnelErrorContext,
                     });
                 }
             }

package/lib/internal/template/alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/alert/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, { useEffect } from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { AlertProps } from './interfaces';\nimport InternalAlert from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getNameFromSelector, getSubStepAllSelector } from '../internal/analytics/selectors';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\n\nexport { AlertProps };\n\nconst Alert = React.forwardRef(\n  ({ type = 'info', visible = true, ...props }: AlertProps, ref: React.Ref<AlertProps.Ref>) => {\n    const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);\n    const baseComponentProps = useBaseComponent<HTMLDivElement>(\n      'Alert',\n      {\n        props: { type, visible, dismissible: props.dismissible },\n      },\n      analyticsMetadata\n    );\n\n    const { funnelInteractionId, submissionAttempt, funnelState, errorCount } = useFunnel();\n    const { stepNumber, stepNameSelector } = useFunnelStep();\n    const { subStepSelector, subStepNameSelector } = useFunnelSubStep();\n\n    useEffect(() => {\n      if (funnelInteractionId && visible && type === 'error' && funnelState.current !== 'complete') {\n        const stepName = getNameFromSelector(stepNameSelector);\n        const subStepName = getNameFromSelector(subStepNameSelector);\n\n        errorCount.current++;\n\n        // We don't want to report an error if it is hidden, e.g. inside an Expandable Section.\n        const errorIsVisible = (baseComponentProps.__internalRootRef.current?.getBoundingClientRect()?.width ?? 0) > 0;\n\n        if (errorIsVisible) {\n          if (subStepSelector) {\n            FunnelMetrics.funnelSubStepError({\n              funnelInteractionId,\n              subStepSelector,\n              subStepName,\n              subStepNameSelector,\n              stepNumber,\n              stepName,\n              stepNameSelector,\n              subStepAllSelector: getSubStepAllSelector(),\n              instanceIdentifier: analyticsMetadata?.instanceIdentifier,\n              errorContext: analyticsMetadata?.errorContext,\n            });\n          } else {\n            FunnelMetrics.funnelError({\n              funnelInteractionId,\n            });\n          }\n        }\n\n        return () => {\n          // eslint-disable-next-line react-hooks/exhaustive-deps\n          errorCount.current--;\n        };\n      }\n\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [funnelInteractionId, visible, submissionAttempt, errorCount]);\n\n    return <InternalAlert type={type} visible={visible} {...props} {...baseComponentProps} ref={ref} />;\n  }\n);\n\napplyDisplayName(Alert, 'Alert');\nexport default Alert;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/alert/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, { useEffect } from 'react';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { AlertProps } from './interfaces';\nimport InternalAlert from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getNameFromSelector, getSubStepAllSelector } from '../internal/analytics/selectors';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\n\nexport { AlertProps };\n\nconst Alert = React.forwardRef(\n  ({ type = 'info', visible = true, ...props }: AlertProps, ref: React.Ref<AlertProps.Ref>) => {\n    const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);\n    const baseComponentProps = useBaseComponent<HTMLDivElement>(\n      'Alert',\n      {\n        props: { type, visible, dismissible: props.dismissible },\n      },\n      analyticsMetadata\n    );\n\n    const { funnelIdentifier, funnelInteractionId, funnelErrorContext, submissionAttempt, funnelState, errorCount } =\n      useFunnel();\n    const { stepNumber, stepNameSelector, stepIdentifier } = useFunnelStep();\n    const { subStepSelector, subStepNameSelector, subStepIdentifier, subStepErrorContext } = useFunnelSubStep();\n\n    useEffect(() => {\n      if (funnelInteractionId && visible && type === 'error' && funnelState.current !== 'complete') {\n        const stepName = getNameFromSelector(stepNameSelector);\n        const subStepName = getNameFromSelector(subStepNameSelector);\n\n        errorCount.current++;\n\n        // We don't want to report an error if it is hidden, e.g. inside an Expandable Section.\n        const errorIsVisible = (baseComponentProps.__internalRootRef.current?.getBoundingClientRect()?.width ?? 0) > 0;\n\n        if (errorIsVisible) {\n          if (subStepSelector) {\n            FunnelMetrics.funnelSubStepError({\n              funnelInteractionId,\n              funnelIdentifier,\n              stepIdentifier,\n              subStepSelector,\n              subStepName,\n              subStepNameSelector,\n              stepNumber,\n              stepName,\n              stepNameSelector,\n              subStepAllSelector: getSubStepAllSelector(),\n              subStepIdentifier,\n              subStepErrorContext,\n            });\n          } else {\n            FunnelMetrics.funnelError({\n              funnelIdentifier,\n              funnelInteractionId,\n              funnelErrorContext,\n            });\n          }\n        }\n\n        return () => {\n          // eslint-disable-next-line react-hooks/exhaustive-deps\n          errorCount.current--;\n        };\n      }\n\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [funnelInteractionId, visible, submissionAttempt, errorCount]);\n\n    return <InternalAlert type={type} visible={visible} {...props} {...baseComponentProps} ref={ref} />;\n  }\n);\n\napplyDisplayName(Alert, 'Alert');\nexport default Alert;\n"]}

package/lib/internal/template/attribute-editor/interfaces.d.ts

@@ -16,6 +16,7 @@ export declare namespace AttributeEditorProps {
         info?: React.ReactNode;
         control?: FieldRenderable<T> | React.ReactNode;
         errorText?: FieldRenderable<T> | React.ReactNode;
+        warningText?: FieldRenderable<T> | React.ReactNode;
         constraintText?: FieldRenderable<T> | React.ReactNode;
     }
     interface RemoveButtonClickDetail {
@@ -33,6 +34,7 @@ export declare namespace AttributeEditorProps {
     }
     interface I18nStrings<T = any> {
         errorIconAriaLabel?: string;
+        warningIconAriaLabel?: string;
         itemRemovedAriaLive?: string;
         /**
          * @deprecated Use `removeButtonAriaLabel` on the component instead.
@@ -84,6 +86,8 @@ export interface AttributeEditorProps<T> extends BaseComponentProps {
      * * `info` (ReactNode) - Info link for the form field.
      * * `errorText` ((item, itemIndex) => ReactNode) - Error message text to display as a control validation message.
      *    It renders the form field as invalid if the returned value is not `null` or `undefined`.
+     * * `warningText` ((item, itemIndex) => ReactNode) - Warning message text to display as a control validation message.
+     *    It renders the form field in a warning state if the returned value is not `null` or `undefined`.
      * * `constraintText` ((item, itemIndex) => ReactNode) - Text to display as a constraint message below the field.
      * * `control` ((item, itemIndex) => ReactNode) - A control to use as the input for the field.
      *

package/lib/internal/template/attribute-editor/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/attribute-editor/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAY/D,MAAM,WAAW,6BAA6B;IAC5C,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAA;KAAE,GAAG,GAAG,CAAC,OAAO,CAAC;CAClG;AAED,yBAAiB,oBAAoB,CAAC;IACpC,UAAiB,uBAAuB,CAAC,CAAC;QACxC,CAAC,IAAI,EAAE,CAAC,GAAG,OAAO,CAAC;KACpB;IAED,KAAY,eAAe,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACjF,UAAiB,eAAe,CAAC,CAAC;QAChC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,OAAO,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;QAC/C,SAAS,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;QACjD,cAAc,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;KACvD;IAED,UAAiB,uBAAuB;QACtC,SAAS,EAAE,MAAM,CAAC;KACnB;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;QAC3C;;WAEG;QACH,cAAc,IAAI,IAAI,CAAC;KACxB;IAGD,UAAiB,WAAW,CAAC,CAAC,GAAG,GAAG;QAClC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAE7B;;WAEG;QACH,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;KAC7C;CACF;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,CAAE,SAAQ,kBAAkB;IACjE;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;IAE5C;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAEzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;IAElE;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;;;;;;;;;OAWG;IACH,UAAU,EAAE,aAAa,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnE;;OAEG;IACH,gBAAgB,CAAC,EAAE,yBAAyB,CAAC;IAE7C;;;OAGG;IACH,mBAAmB,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,CAAC;IAE9F;;OAEG;IACH,WAAW,CAAC,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;CACnD"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/attribute-editor/interfaces.ts"],"names":[],"mappings":"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"}

package/lib/internal/template/attribute-editor/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/attribute-editor/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface AttributeEditorForwardRefType {\n  <T>(props: AttributeEditorProps<T> & { ref?: React.Ref<AttributeEditorProps.Ref> }): JSX.Element;\n}\n\nexport namespace AttributeEditorProps {\n  export interface IsItemRemovableFunction<T> {\n    (item: T): boolean;\n  }\n\n  export type FieldRenderable<T> = (item: T, itemIndex: number) => React.ReactNode;\n  export interface FieldDefinition<T> {\n    label?: React.ReactNode;\n    info?: React.ReactNode;\n    control?: FieldRenderable<T> | React.ReactNode;\n    errorText?: FieldRenderable<T> | React.ReactNode;\n    constraintText?: FieldRenderable<T> | React.ReactNode;\n  }\n\n  export interface RemoveButtonClickDetail {\n    itemIndex: number;\n  }\n\n  export interface Ref {\n    /**\n     * Focuses the 'remove' button for the given row index.\n     */\n    focusRemoveButton(itemIndex: number): void;\n    /**\n     * Focuses the 'add' button. Use this, for example, after a user removes the last row.\n     */\n    focusAddButton(): void;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  export interface I18nStrings<T = any> {\n    errorIconAriaLabel?: string;\n    itemRemovedAriaLive?: string;\n\n    /**\n     * @deprecated Use `removeButtonAriaLabel` on the component instead.\n     */\n    removeButtonAriaLabel?: (item: T) => string;\n  }\n}\n\nexport interface AttributeEditorProps<T> extends BaseComponentProps {\n  /**\n   * Displayed when there are no items to display.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Displayed below the add button. Use it for additional information related to the attribute editor.\n   */\n  additionalInfo?: React.ReactNode;\n\n  /**\n   * Specifies the text that's displayed in the add button.\n   */\n  addButtonText: string;\n\n  /**\n   * Specifies the text that's displayed in the remove button.\n   * @i18n\n   */\n  removeButtonText?: string;\n\n  /**\n   * Adds an `aria-label` to the remove button.\n   */\n  removeButtonAriaLabel?: (item: T) => string;\n\n  /**\n   * Specifies the items that serve as the data source for all rows.\n   * The display of a row is handled by the `definition` property.\n   */\n  items?: ReadonlyArray<T>;\n\n  /**\n   * Function that determines whether an item is removable. When this function returns `false`, the remove\n   * button is not rendered and the user can't remove the item.\n   * By default, all items are removable.\n   */\n  isItemRemovable?: AttributeEditorProps.IsItemRemovableFunction<T>;\n\n  /**\n   * Determines whether the add button is disabled.\n   */\n  disableAddButton?: boolean;\n\n  /**\n   * Defines the editor configuration. Each object in the array represents one form field in the row.\n   *\n   * * `label` (ReactNode) - Text label for the form field.\n   * * `info` (ReactNode) - Info link for the form field.\n   * * `errorText` ((item, itemIndex) => ReactNode) - Error message text to display as a control validation message.\n   *    It renders the form field as invalid if the returned value is not `null` or `undefined`.\n   * * `constraintText` ((item, itemIndex) => ReactNode) - Text to display as a constraint message below the field.\n   * * `control` ((item, itemIndex) => ReactNode) - A control to use as the input for the field.\n   *\n   * A maximum of four fields are supported.\n   */\n  definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;\n\n  /**\n   * Called when add button is clicked.\n   */\n  onAddButtonClick?: NonCancelableEventHandler;\n\n  /**\n   * Called when remove button is clicked.\n   * The event `detail` contains the index of the corresponding item.\n   */\n  onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   */\n  i18nStrings?: AttributeEditorProps.I18nStrings<T>;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/attribute-editor/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface AttributeEditorForwardRefType {\n  <T>(props: AttributeEditorProps<T> & { ref?: React.Ref<AttributeEditorProps.Ref> }): JSX.Element;\n}\n\nexport namespace AttributeEditorProps {\n  export interface IsItemRemovableFunction<T> {\n    (item: T): boolean;\n  }\n\n  export type FieldRenderable<T> = (item: T, itemIndex: number) => React.ReactNode;\n  export interface FieldDefinition<T> {\n    label?: React.ReactNode;\n    info?: React.ReactNode;\n    control?: FieldRenderable<T> | React.ReactNode;\n    errorText?: FieldRenderable<T> | React.ReactNode;\n    warningText?: FieldRenderable<T> | React.ReactNode;\n    constraintText?: FieldRenderable<T> | React.ReactNode;\n  }\n\n  export interface RemoveButtonClickDetail {\n    itemIndex: number;\n  }\n\n  export interface Ref {\n    /**\n     * Focuses the 'remove' button for the given row index.\n     */\n    focusRemoveButton(itemIndex: number): void;\n    /**\n     * Focuses the 'add' button. Use this, for example, after a user removes the last row.\n     */\n    focusAddButton(): void;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  export interface I18nStrings<T = any> {\n    errorIconAriaLabel?: string;\n    warningIconAriaLabel?: string;\n    itemRemovedAriaLive?: string;\n\n    /**\n     * @deprecated Use `removeButtonAriaLabel` on the component instead.\n     */\n    removeButtonAriaLabel?: (item: T) => string;\n  }\n}\n\nexport interface AttributeEditorProps<T> extends BaseComponentProps {\n  /**\n   * Displayed when there are no items to display.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Displayed below the add button. Use it for additional information related to the attribute editor.\n   */\n  additionalInfo?: React.ReactNode;\n\n  /**\n   * Specifies the text that's displayed in the add button.\n   */\n  addButtonText: string;\n\n  /**\n   * Specifies the text that's displayed in the remove button.\n   * @i18n\n   */\n  removeButtonText?: string;\n\n  /**\n   * Adds an `aria-label` to the remove button.\n   */\n  removeButtonAriaLabel?: (item: T) => string;\n\n  /**\n   * Specifies the items that serve as the data source for all rows.\n   * The display of a row is handled by the `definition` property.\n   */\n  items?: ReadonlyArray<T>;\n\n  /**\n   * Function that determines whether an item is removable. When this function returns `false`, the remove\n   * button is not rendered and the user can't remove the item.\n   * By default, all items are removable.\n   */\n  isItemRemovable?: AttributeEditorProps.IsItemRemovableFunction<T>;\n\n  /**\n   * Determines whether the add button is disabled.\n   */\n  disableAddButton?: boolean;\n\n  /**\n   * Defines the editor configuration. Each object in the array represents one form field in the row.\n   *\n   * * `label` (ReactNode) - Text label for the form field.\n   * * `info` (ReactNode) - Info link for the form field.\n   * * `errorText` ((item, itemIndex) => ReactNode) - Error message text to display as a control validation message.\n   *    It renders the form field as invalid if the returned value is not `null` or `undefined`.\n   * * `warningText` ((item, itemIndex) => ReactNode) - Warning message text to display as a control validation message.\n   *    It renders the form field in a warning state if the returned value is not `null` or `undefined`.\n   * * `constraintText` ((item, itemIndex) => ReactNode) - Text to display as a constraint message below the field.\n   * * `control` ((item, itemIndex) => ReactNode) - A control to use as the input for the field.\n   *\n   * A maximum of four fields are supported.\n   */\n  definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;\n\n  /**\n   * Called when add button is clicked.\n   */\n  onAddButtonClick?: NonCancelableEventHandler;\n\n  /**\n   * Called when remove button is clicked.\n   * The event `detail` contains the index of the corresponding item.\n   */\n  onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   */\n  i18nStrings?: AttributeEditorProps.I18nStrings<T>;\n}\n"]}

package/lib/internal/template/attribute-editor/row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../../src/attribute-editor/row.tsx"],"names":[],"mappings":";AAMA,OAA6B,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AASvF,MAAM,WAAW,QAAQ,CAAC,CAAC;IACzB,UAAU,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAC1C,IAAI,EAAE,CAAC,CAAC;IACR,UAAU,EAAE,aAAa,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,WAAW,EAAE,oBAAoB,CAAC,WAAW,GAAG,SAAS,CAAC;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC;IACrD,mBAAmB,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,CAAC;IAC9F,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CAC7C;AAmBD,eAAO,MAAM,GAAG,6BA6EgB,WAAW,CAAC"}
+{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../../src/attribute-editor/row.tsx"],"names":[],"mappings":";AAMA,OAA6B,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AASvF,MAAM,WAAW,QAAQ,CAAC,CAAC;IACzB,UAAU,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAC1C,IAAI,EAAE,CAAC,CAAC;IACR,UAAU,EAAE,aAAa,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,WAAW,EAAE,oBAAoB,CAAC,WAAW,GAAG,SAAS,CAAC;IAC1D,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC;IACrD,mBAAmB,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,CAAC;IAC9F,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;CAC7C;AAmBD,eAAO,MAAM,GAAG,6BAiFgB,WAAW,CAAC"}

package/lib/internal/template/attribute-editor/row.js

@@ -35,7 +35,10 @@ export const Row = React.memo(({ breakpoint, item, definition, i18nStrings = {},
     return (React.createElement(InternalBox, { className: styles.row, margin: { bottom: 's' } },
         React.createElement("div", { role: "group", "aria-labelledby": `${firstControlId}-label ${firstControlId}` },
             React.createElement(InternalGrid, { __breakpoint: breakpoint, gridDefinition: removable ? REMOVABLE_GRID_DEFINITION : GRID_DEFINITION },
-                React.createElement(InternalColumnLayout, { className: styles['row-control'], columns: definition.length, __breakpoint: breakpoint }, definition.map(({ info, label, constraintText, errorText, control }, defIndex) => (React.createElement(InternalFormField, { key: defIndex, className: styles.field, label: label, info: info, constraintText: render(item, index, constraintText), errorText: render(item, index, errorText), stretch: true, i18nStrings: { errorIconAriaLabel: i18nStrings.errorIconAriaLabel }, __hideLabel: isWideViewport && index > 0, controlId: defIndex === 0 ? firstControlId : undefined }, render(item, index, control))))),
+                React.createElement(InternalColumnLayout, { className: styles['row-control'], columns: definition.length, __breakpoint: breakpoint }, definition.map(({ info, label, constraintText, errorText, warningText, control }, defIndex) => (React.createElement(InternalFormField, { key: defIndex, className: styles.field, label: label, info: info, constraintText: render(item, index, constraintText), errorText: render(item, index, errorText), warningText: render(item, index, warningText), stretch: true, i18nStrings: {
+                        errorIconAriaLabel: i18nStrings.errorIconAriaLabel,
+                        warningIconAriaLabel: i18nStrings.warningIconAriaLabel,
+                    }, __hideLabel: isWideViewport && index > 0, controlId: defIndex === 0 ? firstControlId : undefined }, render(item, index, control))))),
                 removable && (React.createElement(ButtonContainer, { index: index, isNarrowViewport: isNarrowViewport, hasLabel: definition.some(row => row.label) },
                     React.createElement(InternalButton, { className: styles['remove-button'], formAction: "none", ref: ref => {
                             removeButtonRefs[index] = ref !== null && ref !== void 0 ? ref : undefined;

package/lib/internal/template/attribute-editor/row.js.map

@@ -1 +1 @@
-{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../src/attribute-editor/row.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 InternalBox from '../box/internal';\nimport styles from './styles.css.js';\nimport React, { useCallback } from 'react';\nimport InternalFormField from '../form-field/internal';\nimport InternalColumnLayout, { ColumnLayoutBreakpoint } from '../column-layout/internal';\nimport { AttributeEditorProps } from './interfaces';\nimport { ButtonProps } from '../button/interfaces';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport InternalGrid from '../grid/internal';\nimport { InternalButton } from '../button/internal';\nimport clsx from 'clsx';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useInternalI18n } from '../i18n/context';\n\nconst Divider = () => <InternalBox className={styles.divider} padding={{ top: 'l' }} />;\n\nexport interface RowProps<T> {\n  breakpoint: ColumnLayoutBreakpoint | null;\n  item: T;\n  definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;\n  i18nStrings: AttributeEditorProps.I18nStrings | undefined;\n  index: number;\n  removable: boolean;\n  removeButtonText?: string;\n  removeButtonRefs: Array<ButtonProps.Ref | undefined>;\n  onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;\n  removeButtonAriaLabel?: (item: T) => string;\n}\n\nfunction render<T>(\n  item: T,\n  itemIndex: number,\n  slot: AttributeEditorProps.FieldRenderable<T> | React.ReactNode | undefined\n) {\n  if (isSlotFunction(slot)) {\n    return slot(item, itemIndex);\n  }\n  return slot;\n\n  function isSlotFunction(slot: unknown): slot is AttributeEditorProps.FieldRenderable<T> {\n    return typeof slot === 'function';\n  }\n}\n\nconst GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }];\nconst REMOVABLE_GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }];\nexport const Row = React.memo(\n  <T,>({\n    breakpoint,\n    item,\n    definition,\n    i18nStrings = {},\n    index,\n    removable,\n    removeButtonText,\n    removeButtonRefs,\n    onRemoveButtonClick,\n    removeButtonAriaLabel,\n  }: RowProps<T>) => {\n    const i18n = useInternalI18n('attribute-editor');\n    const isNarrowViewport = breakpoint === 'default' || breakpoint === 'xxs';\n    const isWideViewport = !isNarrowViewport;\n\n    const handleRemoveClick = useCallback(() => {\n      fireNonCancelableEvent(onRemoveButtonClick, { itemIndex: index });\n    }, [onRemoveButtonClick, index]);\n\n    const firstControlId = useUniqueId('first-control-id-');\n\n    return (\n      <InternalBox className={styles.row} margin={{ bottom: 's' }}>\n        <div role=\"group\" aria-labelledby={`${firstControlId}-label ${firstControlId}`}>\n          <InternalGrid\n            __breakpoint={breakpoint}\n            gridDefinition={removable ? REMOVABLE_GRID_DEFINITION : GRID_DEFINITION}\n          >\n            <InternalColumnLayout\n              className={styles['row-control']}\n              columns={definition.length}\n              __breakpoint={breakpoint}\n            >\n              {definition.map(({ info, label, constraintText, errorText, control }, defIndex) => (\n                <InternalFormField\n                  key={defIndex}\n                  className={styles.field}\n                  label={label}\n                  info={info}\n                  constraintText={render(item, index, constraintText)}\n                  errorText={render(item, index, errorText)}\n                  stretch={true}\n                  i18nStrings={{ errorIconAriaLabel: i18nStrings.errorIconAriaLabel }}\n                  __hideLabel={isWideViewport && index > 0}\n                  controlId={defIndex === 0 ? firstControlId : undefined}\n                >\n                  {render(item, index, control)}\n                </InternalFormField>\n              ))}\n            </InternalColumnLayout>\n            {removable && (\n              <ButtonContainer\n                index={index}\n                isNarrowViewport={isNarrowViewport}\n                hasLabel={definition.some(row => row.label)}\n              >\n                <InternalButton\n                  className={styles['remove-button']}\n                  formAction=\"none\"\n                  ref={ref => {\n                    removeButtonRefs[index] = ref ?? undefined;\n                  }}\n                  ariaLabel={(removeButtonAriaLabel ?? i18nStrings.removeButtonAriaLabel)?.(item)}\n                  onClick={handleRemoveClick}\n                >\n                  {i18n('removeButtonText', removeButtonText)}\n                </InternalButton>\n              </ButtonContainer>\n            )}\n          </InternalGrid>\n        </div>\n        {isNarrowViewport && <Divider />}\n      </InternalBox>\n    );\n  }\n) as <T>(props: RowProps<T>) => JSX.Element;\n\ninterface ButtonContainer {\n  index: number;\n  children: React.ReactNode;\n  isNarrowViewport: boolean;\n  hasLabel: boolean;\n}\n\nconst ButtonContainer = ({ index, children, isNarrowViewport, hasLabel }: ButtonContainer) => (\n  <div\n    className={clsx({\n      [styles['button-container-haslabel']]: !isNarrowViewport && index === 0 && hasLabel,\n      [styles['button-container-nolabel']]: !isNarrowViewport && index === 0 && !hasLabel,\n      [styles['right-align']]: isNarrowViewport,\n    })}\n  >\n    {children}\n  </div>\n);\n"]}
+{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../src/attribute-editor/row.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 InternalBox from '../box/internal';\nimport styles from './styles.css.js';\nimport React, { useCallback } from 'react';\nimport InternalFormField from '../form-field/internal';\nimport InternalColumnLayout, { ColumnLayoutBreakpoint } from '../column-layout/internal';\nimport { AttributeEditorProps } from './interfaces';\nimport { ButtonProps } from '../button/interfaces';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport InternalGrid from '../grid/internal';\nimport { InternalButton } from '../button/internal';\nimport clsx from 'clsx';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useInternalI18n } from '../i18n/context';\n\nconst Divider = () => <InternalBox className={styles.divider} padding={{ top: 'l' }} />;\n\nexport interface RowProps<T> {\n  breakpoint: ColumnLayoutBreakpoint | null;\n  item: T;\n  definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;\n  i18nStrings: AttributeEditorProps.I18nStrings | undefined;\n  index: number;\n  removable: boolean;\n  removeButtonText?: string;\n  removeButtonRefs: Array<ButtonProps.Ref | undefined>;\n  onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;\n  removeButtonAriaLabel?: (item: T) => string;\n}\n\nfunction render<T>(\n  item: T,\n  itemIndex: number,\n  slot: AttributeEditorProps.FieldRenderable<T> | React.ReactNode | undefined\n) {\n  if (isSlotFunction(slot)) {\n    return slot(item, itemIndex);\n  }\n  return slot;\n\n  function isSlotFunction(slot: unknown): slot is AttributeEditorProps.FieldRenderable<T> {\n    return typeof slot === 'function';\n  }\n}\n\nconst GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }];\nconst REMOVABLE_GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }];\nexport const Row = React.memo(\n  <T,>({\n    breakpoint,\n    item,\n    definition,\n    i18nStrings = {},\n    index,\n    removable,\n    removeButtonText,\n    removeButtonRefs,\n    onRemoveButtonClick,\n    removeButtonAriaLabel,\n  }: RowProps<T>) => {\n    const i18n = useInternalI18n('attribute-editor');\n    const isNarrowViewport = breakpoint === 'default' || breakpoint === 'xxs';\n    const isWideViewport = !isNarrowViewport;\n\n    const handleRemoveClick = useCallback(() => {\n      fireNonCancelableEvent(onRemoveButtonClick, { itemIndex: index });\n    }, [onRemoveButtonClick, index]);\n\n    const firstControlId = useUniqueId('first-control-id-');\n\n    return (\n      <InternalBox className={styles.row} margin={{ bottom: 's' }}>\n        <div role=\"group\" aria-labelledby={`${firstControlId}-label ${firstControlId}`}>\n          <InternalGrid\n            __breakpoint={breakpoint}\n            gridDefinition={removable ? REMOVABLE_GRID_DEFINITION : GRID_DEFINITION}\n          >\n            <InternalColumnLayout\n              className={styles['row-control']}\n              columns={definition.length}\n              __breakpoint={breakpoint}\n            >\n              {definition.map(({ info, label, constraintText, errorText, warningText, control }, defIndex) => (\n                <InternalFormField\n                  key={defIndex}\n                  className={styles.field}\n                  label={label}\n                  info={info}\n                  constraintText={render(item, index, constraintText)}\n                  errorText={render(item, index, errorText)}\n                  warningText={render(item, index, warningText)}\n                  stretch={true}\n                  i18nStrings={{\n                    errorIconAriaLabel: i18nStrings.errorIconAriaLabel,\n                    warningIconAriaLabel: i18nStrings.warningIconAriaLabel,\n                  }}\n                  __hideLabel={isWideViewport && index > 0}\n                  controlId={defIndex === 0 ? firstControlId : undefined}\n                >\n                  {render(item, index, control)}\n                </InternalFormField>\n              ))}\n            </InternalColumnLayout>\n            {removable && (\n              <ButtonContainer\n                index={index}\n                isNarrowViewport={isNarrowViewport}\n                hasLabel={definition.some(row => row.label)}\n              >\n                <InternalButton\n                  className={styles['remove-button']}\n                  formAction=\"none\"\n                  ref={ref => {\n                    removeButtonRefs[index] = ref ?? undefined;\n                  }}\n                  ariaLabel={(removeButtonAriaLabel ?? i18nStrings.removeButtonAriaLabel)?.(item)}\n                  onClick={handleRemoveClick}\n                >\n                  {i18n('removeButtonText', removeButtonText)}\n                </InternalButton>\n              </ButtonContainer>\n            )}\n          </InternalGrid>\n        </div>\n        {isNarrowViewport && <Divider />}\n      </InternalBox>\n    );\n  }\n) as <T>(props: RowProps<T>) => JSX.Element;\n\ninterface ButtonContainer {\n  index: number;\n  children: React.ReactNode;\n  isNarrowViewport: boolean;\n  hasLabel: boolean;\n}\n\nconst ButtonContainer = ({ index, children, isNarrowViewport, hasLabel }: ButtonContainer) => (\n  <div\n    className={clsx({\n      [styles['button-container-haslabel']]: !isNarrowViewport && index === 0 && hasLabel,\n      [styles['button-container-nolabel']]: !isNarrowViewport && index === 0 && !hasLabel,\n      [styles['right-align']]: isNarrowViewport,\n    })}\n  >\n    {children}\n  </div>\n);\n"]}

package/lib/internal/template/button/styles.css.js

@@ -1,24 +1,24 @@
 
     import './styles.scoped.css';
     export default {
-  "content": "awsui_content_vjswe_17wax_103",
-  "button": "awsui_button_vjswe_17wax_107",
-  "variant-normal": "awsui_variant-normal_vjswe_17wax_158",
-  "variant-icon": "awsui_variant-icon_vjswe_17wax_201",
-  "variant-modal-dismiss": "awsui_variant-modal-dismiss_vjswe_17wax_201",
-  "variant-flashbar-icon": "awsui_variant-flashbar-icon_vjswe_17wax_201",
-  "variant-inline-icon": "awsui_variant-inline-icon_vjswe_17wax_222",
-  "disabled": "awsui_disabled_vjswe_17wax_243",
-  "variant-primary": "awsui_variant-primary_vjswe_17wax_251",
-  "variant-link": "awsui_variant-link_vjswe_17wax_344",
-  "variant-inline-link": "awsui_variant-inline-link_vjswe_17wax_623",
-  "variant-breadcrumb-group": "awsui_variant-breadcrumb-group_vjswe_17wax_906",
-  "variant-menu-trigger": "awsui_variant-menu-trigger_vjswe_17wax_1004",
-  "button-no-text": "awsui_button-no-text_vjswe_17wax_1097",
-  "button-no-wrap": "awsui_button-no-wrap_vjswe_17wax_1101",
-  "full-width": "awsui_full-width_vjswe_17wax_1104",
-  "icon-left": "awsui_icon-left_vjswe_17wax_1123",
-  "icon-right": "awsui_icon-right_vjswe_17wax_1128",
-  "icon": "awsui_icon_vjswe_17wax_1123"
+  "content": "awsui_content_vjswe_1ifev_103",
+  "button": "awsui_button_vjswe_1ifev_107",
+  "variant-normal": "awsui_variant-normal_vjswe_1ifev_158",
+  "variant-icon": "awsui_variant-icon_vjswe_1ifev_201",
+  "variant-modal-dismiss": "awsui_variant-modal-dismiss_vjswe_1ifev_201",
+  "variant-flashbar-icon": "awsui_variant-flashbar-icon_vjswe_1ifev_201",
+  "variant-inline-icon": "awsui_variant-inline-icon_vjswe_1ifev_222",
+  "disabled": "awsui_disabled_vjswe_1ifev_243",
+  "variant-primary": "awsui_variant-primary_vjswe_1ifev_251",
+  "variant-link": "awsui_variant-link_vjswe_1ifev_344",
+  "variant-inline-link": "awsui_variant-inline-link_vjswe_1ifev_623",
+  "variant-breadcrumb-group": "awsui_variant-breadcrumb-group_vjswe_1ifev_906",
+  "variant-menu-trigger": "awsui_variant-menu-trigger_vjswe_1ifev_1004",
+  "button-no-text": "awsui_button-no-text_vjswe_1ifev_1097",
+  "button-no-wrap": "awsui_button-no-wrap_vjswe_1ifev_1101",
+  "full-width": "awsui_full-width_vjswe_1ifev_1104",
+  "icon-left": "awsui_icon-left_vjswe_1ifev_1123",
+  "icon-right": "awsui_icon-right_vjswe_1ifev_1128",
+  "icon": "awsui_icon_vjswe_1ifev_1123"
 };