npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1138 → 3.0.1140 - Mend

@cloudscape-design/components-themeable 3.0.1138 → 3.0.1140

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

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "4e4cdd5b1ee27f9f383b1ea15118b39dcce1a7e6"
+  "commit": "773369f7dd0c00ac45a20482f4f09c2753080423"
 }

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss CHANGED Viewed

@@ -1,107 +1,131 @@
     // Build environment
-    $awsui-commit-hash: "4e4cdd5b";
+    $awsui-commit-hash: "773369f7";
     // Manually managed CSS-variables
-    $maxContentWidth: --awsui-max-content-width-9t5olz;
-$minContentWidth: --awsui-min-content-width-9t5olz;
-$breadcrumbsGap: --awsui-breadcrumbs-gap-9t5olz;
-$contentGapLeft: --awsui-content-gap-left-9t5olz;
-$contentGapRight: --awsui-content-gap-right-9t5olz;
-$contentHeight: --awsui-content-height-9t5olz;
-$contentLayoutDefaultHorizontalPadding: --awsui-content-layout-default-horizontal-padding-9t5olz;
-$contentLayoutMaxContentWidth: --awsui-content-layout-max-content-width-9t5olz;
-$contentLayoutMainGap: --awsui-content-layout-main-gap-9t5olz;
-$defaultMaxContentWidth: --awsui-default-max-content-width-9t5olz;
-$defaultMinContentWidth: --awsui-default-min-content-width-9t5olz;
-$drawerSize: --awsui-drawer-size-9t5olz;
-$drawerMinSize: --awsui-drawer-min-size-9t5olz;
-$bottomDrawerSize: --awsui-bottom-drawer-size-9t5olz;
-$footerHeight: --awsui-footer-height-9t5olz;
-$headerGap: --awsui-header-gap-9t5olz;
-$headerHeight: --awsui-header-height-9t5olz;
-$layoutWidth: --awsui-layout-width-9t5olz;
-$mainGap: --awsui-main-gap-9t5olz;
-$mainOffsetLeft: --awsui-main-offset-left-9t5olz;
-$mainTemplateRows: --awsui-main-template-rows-9t5olz;
-$mobileBarHeight: --awsui-mobile-bar-height-9t5olz;
-$notificationsHeight: --awsui-notifications-height-9t5olz;
-$offsetTop: --awsui-offset-top-9t5olz;
-$overlapHeight: --awsui-overlap-height-9t5olz;
-$navigationWidth: --awsui-navigation-width-9t5olz;
-$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-9t5olz;
-$splitPanelReportedSize: --awsui-split-panel-reported-size-9t5olz;
-$splitPanelHeight: --awsui-split-panel-height-9t5olz;
-$splitPanelMinWidth: --awsui-split-panel-min-width-9t5olz;
-$splitPanelMaxWidth: --awsui-split-panel-max-width-9t5olz;
-$toolsMaxWidth: --awsui-tools-max-width-9t5olz;
-$toolsWidth: --awsui-tools-width-9t5olz;
-$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-9t5olz;
-$contentScrollMargin: --awsui-content-scroll-margin-9t5olz;
-$flashbarStackDepth: --awsui-flashbar-stack-depth-9t5olz;
-$flashbarStackIndex: --awsui-flashbar-stack-index-9t5olz;
-$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-9t5olz;
-$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-9t5olz;
-$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-9t5olz;
-$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-9t5olz;
-$spinnerRotatorFrom: --awsui-spinner-rotator-from-9t5olz;
-$spinnerRotatorTo: --awsui-spinner-rotator-to-9t5olz;
-$spinnerLineLeftFrom: --awsui-spinner-line-left-from-9t5olz;
-$spinnerLineLeftTo: --awsui-spinner-line-left-to-9t5olz;
-$spinnerLineRightFrom: --awsui-spinner-line-right-from-9t5olz;
-$spinnerLineRightTo: --awsui-spinner-line-right-to-9t5olz;
-$sliderLabelCount: --awsui-slider-label-count-9t5olz;
-$sliderTickCount: --awsui-slider-tick-count-9t5olz;
-$sliderReferenceColumn: --awsui-slider-reference-column-9t5olz;
-$sliderNextReferenceColumn: --awsui-slider-next-reference-column-9t5olz;
-$sliderMaxStart: --awsui-slider-max-start-9t5olz;
-$sliderMinEnd: --awsui-slider-min-end-9t5olz;
-$sliderRangeInlineSize: --awsui-slider-range-inline-size-9t5olz;
-$sliderTooltipPosition: --awsui-slider-tooltip-position-9t5olz;
-$togglesLeftWidth: --awsui-toggles-left-width-9t5olz;
-$togglesRightWidth: --awsui-toggles-right-width-9t5olz;
-$promptInputMaxRows: --awsui-prompt-input-max-rows-9t5olz;
-$promptInputScrollHeight: --awsui-prompt-input-scroll-height-9t5olz;
-$dragHandleAnimationInlineOffset: --awsui-drag-handle-animation-inline-offset-9t5olz;
-$dragHandleAnimationBlockOffset: --awsui-drag-handle-animation-block-offset-9t5olz;
-$styleBackgroundActive: --awsui-style-background-active-9t5olz;
-$styleBackgroundDefault: --awsui-style-background-default-9t5olz;
-$styleBackgroundDisabled: --awsui-style-background-disabled-9t5olz;
-$styleBackgroundHover: --awsui-style-background-hover-9t5olz;
-$styleBorderColorActive: --awsui-style-border-color-active-9t5olz;
-$styleBorderColorDefault: --awsui-style-border-color-default-9t5olz;
-$styleBorderColorDisabled: --awsui-style-border-color-disabled-9t5olz;
-$styleBorderColorHover: --awsui-style-border-color-hover-9t5olz;
-$styleColorActive: --awsui-style-color-active-9t5olz;
-$styleColorDefault: --awsui-style-color-default-9t5olz;
-$styleColorDisabled: --awsui-style-color-disabled-9t5olz;
-$styleColorHover: --awsui-style-color-hover-9t5olz;
-$styleFocusRingBorderColor: --awsui-style-focus-ring-border-color-9t5olz;
-$styleFocusRingBorderRadius: --awsui-style-focus-ring-border-radius-9t5olz;
-$styleFocusRingBorderWidth: --awsui-style-focus-ring-border-width-9t5olz;
-$styleFocusRingBoxShadow: --awsui-style-focus-ring-box-shadow-9t5olz;
-$styleBoxShadowActive: --awsui-style-box-shadow-active-9t5olz;
-$styleBoxShadowDefault: --awsui-style-box-shadow-default-9t5olz;
-$styleBoxShadowDisabled: --awsui-style-box-shadow-disabled-9t5olz;
-$styleBoxShadowHover: --awsui-style-box-shadow-hover-9t5olz;
-$styleBackgroundReadonly: --awsui-style-background-readonly-9t5olz;
-$styleBorderColorReadonly: --awsui-style-border-color-readonly-9t5olz;
-$styleBoxShadowReadonly: --awsui-style-box-shadow-readonly-9t5olz;
-$styleColorReadonly: --awsui-style-color-readonly-9t5olz;
-$styleBackgroundFocus: --awsui-style-background-focus-9t5olz;
-$styleBorderColorFocus: --awsui-style-border-color-focus-9t5olz;
-$styleBoxShadowFocus: --awsui-style-box-shadow-focus-9t5olz;
-$styleColorFocus: --awsui-style-color-focus-9t5olz;
-$stylePlaceholderColor: --awsui-style-placeholder-color-9t5olz;
-$stylePlaceholderFontSize: --awsui-style-placeholder-font-size-9t5olz;
-$stylePlaceholderFontStyle: --awsui-style-placeholder-font-style-9t5olz;
-$stylePlaceholderFontWeight: --awsui-style-placeholder-font-weight-9t5olz;
-$alertFocusRingBorderColor: --awsui-alert-focus-ring-border-color-9t5olz;
-$alertFocusRingBorderRadius: --awsui-alert-focus-ring-border-radius-9t5olz;
-$alertFocusRingBorderWidth: --awsui-alert-focus-ring-border-width-9t5olz;
-$alertFocusRingBoxShadow: --awsui-alert-focus-ring-box-shadow-9t5olz;
-$alertIconColor: --awsui-alert-icon-color-9t5olz;
-$progressBarBackgroundColor: --awsui-progress-bar-background-color-9t5olz;
-$progressBarBorderRadius: --awsui-progress-bar-border-radius-9t5olz;
-$progressBarHeight: --awsui-progress-bar-height-9t5olz;
-$progressValueBackgroundColor: --awsui-progress-value-background-color-9t5olz;
+    $maxContentWidth: --awsui-max-content-width-d43v8n;
+$minContentWidth: --awsui-min-content-width-d43v8n;
+$breadcrumbsGap: --awsui-breadcrumbs-gap-d43v8n;
+$contentGapLeft: --awsui-content-gap-left-d43v8n;
+$contentGapRight: --awsui-content-gap-right-d43v8n;
+$contentHeight: --awsui-content-height-d43v8n;
+$contentLayoutDefaultHorizontalPadding: --awsui-content-layout-default-horizontal-padding-d43v8n;
+$contentLayoutMaxContentWidth: --awsui-content-layout-max-content-width-d43v8n;
+$contentLayoutMainGap: --awsui-content-layout-main-gap-d43v8n;
+$defaultMaxContentWidth: --awsui-default-max-content-width-d43v8n;
+$defaultMinContentWidth: --awsui-default-min-content-width-d43v8n;
+$drawerSize: --awsui-drawer-size-d43v8n;
+$drawerMinSize: --awsui-drawer-min-size-d43v8n;
+$bottomDrawerSize: --awsui-bottom-drawer-size-d43v8n;
+$footerHeight: --awsui-footer-height-d43v8n;
+$headerGap: --awsui-header-gap-d43v8n;
+$headerHeight: --awsui-header-height-d43v8n;
+$layoutWidth: --awsui-layout-width-d43v8n;
+$mainGap: --awsui-main-gap-d43v8n;
+$mainOffsetLeft: --awsui-main-offset-left-d43v8n;
+$mainTemplateRows: --awsui-main-template-rows-d43v8n;
+$mobileBarHeight: --awsui-mobile-bar-height-d43v8n;
+$notificationsHeight: --awsui-notifications-height-d43v8n;
+$offsetTop: --awsui-offset-top-d43v8n;
+$overlapHeight: --awsui-overlap-height-d43v8n;
+$navigationWidth: --awsui-navigation-width-d43v8n;
+$splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-d43v8n;
+$splitPanelReportedSize: --awsui-split-panel-reported-size-d43v8n;
+$splitPanelHeight: --awsui-split-panel-height-d43v8n;
+$splitPanelMinWidth: --awsui-split-panel-min-width-d43v8n;
+$splitPanelMaxWidth: --awsui-split-panel-max-width-d43v8n;
+$toolsMaxWidth: --awsui-tools-max-width-d43v8n;
+$toolsWidth: --awsui-tools-width-d43v8n;
+$toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-d43v8n;
+$contentScrollMargin: --awsui-content-scroll-margin-d43v8n;
+$flashbarStackDepth: --awsui-flashbar-stack-depth-d43v8n;
+$flashbarStackIndex: --awsui-flashbar-stack-index-d43v8n;
+$flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-d43v8n;
+$stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-d43v8n;
+$stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-d43v8n;
+$dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-d43v8n;
+$spinnerRotatorFrom: --awsui-spinner-rotator-from-d43v8n;
+$spinnerRotatorTo: --awsui-spinner-rotator-to-d43v8n;
+$spinnerLineLeftFrom: --awsui-spinner-line-left-from-d43v8n;
+$spinnerLineLeftTo: --awsui-spinner-line-left-to-d43v8n;
+$spinnerLineRightFrom: --awsui-spinner-line-right-from-d43v8n;
+$spinnerLineRightTo: --awsui-spinner-line-right-to-d43v8n;
+$sliderLabelCount: --awsui-slider-label-count-d43v8n;
+$sliderTickCount: --awsui-slider-tick-count-d43v8n;
+$sliderReferenceColumn: --awsui-slider-reference-column-d43v8n;
+$sliderNextReferenceColumn: --awsui-slider-next-reference-column-d43v8n;
+$sliderMaxStart: --awsui-slider-max-start-d43v8n;
+$sliderMinEnd: --awsui-slider-min-end-d43v8n;
+$sliderRangeInlineSize: --awsui-slider-range-inline-size-d43v8n;
+$sliderTooltipPosition: --awsui-slider-tooltip-position-d43v8n;
+$togglesLeftWidth: --awsui-toggles-left-width-d43v8n;
+$togglesRightWidth: --awsui-toggles-right-width-d43v8n;
+$promptInputMaxRows: --awsui-prompt-input-max-rows-d43v8n;
+$promptInputScrollHeight: --awsui-prompt-input-scroll-height-d43v8n;
+$dragHandleAnimationInlineOffset: --awsui-drag-handle-animation-inline-offset-d43v8n;
+$dragHandleAnimationBlockOffset: --awsui-drag-handle-animation-block-offset-d43v8n;
+$styleBackgroundActive: --awsui-style-background-active-d43v8n;
+$styleBackgroundDefault: --awsui-style-background-default-d43v8n;
+$styleBackgroundDisabled: --awsui-style-background-disabled-d43v8n;
+$styleBackgroundHover: --awsui-style-background-hover-d43v8n;
+$styleBorderColorActive: --awsui-style-border-color-active-d43v8n;
+$styleBorderColorDefault: --awsui-style-border-color-default-d43v8n;
+$styleBorderColorDisabled: --awsui-style-border-color-disabled-d43v8n;
+$styleBorderColorHover: --awsui-style-border-color-hover-d43v8n;
+$styleColorActive: --awsui-style-color-active-d43v8n;
+$styleColorDefault: --awsui-style-color-default-d43v8n;
+$styleColorDisabled: --awsui-style-color-disabled-d43v8n;
+$styleColorHover: --awsui-style-color-hover-d43v8n;
+$styleFocusRingBorderColor: --awsui-style-focus-ring-border-color-d43v8n;
+$styleFocusRingBorderRadius: --awsui-style-focus-ring-border-radius-d43v8n;
+$styleFocusRingBorderWidth: --awsui-style-focus-ring-border-width-d43v8n;
+$styleFocusRingBoxShadow: --awsui-style-focus-ring-box-shadow-d43v8n;
+$styleBoxShadowActive: --awsui-style-box-shadow-active-d43v8n;
+$styleBoxShadowDefault: --awsui-style-box-shadow-default-d43v8n;
+$styleBoxShadowDisabled: --awsui-style-box-shadow-disabled-d43v8n;
+$styleBoxShadowHover: --awsui-style-box-shadow-hover-d43v8n;
+$styleBackgroundReadonly: --awsui-style-background-readonly-d43v8n;
+$styleBorderColorReadonly: --awsui-style-border-color-readonly-d43v8n;
+$styleBoxShadowReadonly: --awsui-style-box-shadow-readonly-d43v8n;
+$styleColorReadonly: --awsui-style-color-readonly-d43v8n;
+$styleBackgroundFocus: --awsui-style-background-focus-d43v8n;
+$styleBorderColorFocus: --awsui-style-border-color-focus-d43v8n;
+$styleBoxShadowFocus: --awsui-style-box-shadow-focus-d43v8n;
+$styleColorFocus: --awsui-style-color-focus-d43v8n;
+$stylePlaceholderColor: --awsui-style-placeholder-color-d43v8n;
+$stylePlaceholderFontSize: --awsui-style-placeholder-font-size-d43v8n;
+$stylePlaceholderFontStyle: --awsui-style-placeholder-font-style-d43v8n;
+$stylePlaceholderFontWeight: --awsui-style-placeholder-font-weight-d43v8n;
+$alertFocusRingBorderColor: --awsui-alert-focus-ring-border-color-d43v8n;
+$alertFocusRingBorderRadius: --awsui-alert-focus-ring-border-radius-d43v8n;
+$alertFocusRingBorderWidth: --awsui-alert-focus-ring-border-width-d43v8n;
+$alertFocusRingBoxShadow: --awsui-alert-focus-ring-box-shadow-d43v8n;
+$alertIconColor: --awsui-alert-icon-color-d43v8n;
+$promptInputStyleBackgroundDefault: --awsui-prompt-input-style-background-default-d43v8n;
+$promptInputStyleBackgroundDisabled: --awsui-prompt-input-style-background-disabled-d43v8n;
+$promptInputStyleBackgroundFocus: --awsui-prompt-input-style-background-focus-d43v8n;
+$promptInputStyleBackgroundHover: --awsui-prompt-input-style-background-hover-d43v8n;
+$promptInputStyleBackgroundReadonly: --awsui-prompt-input-style-background-readonly-d43v8n;
+$promptInputStyleBorderColorDefault: --awsui-prompt-input-style-border-color-default-d43v8n;
+$promptInputStyleBorderColorDisabled: --awsui-prompt-input-style-border-color-disabled-d43v8n;
+$promptInputStyleBorderColorFocus: --awsui-prompt-input-style-border-color-focus-d43v8n;
+$promptInputStyleBorderColorHover: --awsui-prompt-input-style-border-color-hover-d43v8n;
+$promptInputStyleBorderColorReadonly: --awsui-prompt-input-style-border-color-readonly-d43v8n;
+$promptInputStyleBoxShadowDefault: --awsui-prompt-input-style-box-shadow-default-d43v8n;
+$promptInputStyleBoxShadowDisabled: --awsui-prompt-input-style-box-shadow-disabled-d43v8n;
+$promptInputStyleBoxShadowFocus: --awsui-prompt-input-style-box-shadow-focus-d43v8n;
+$promptInputStyleBoxShadowHover: --awsui-prompt-input-style-box-shadow-hover-d43v8n;
+$promptInputStyleBoxShadowReadonly: --awsui-prompt-input-style-box-shadow-readonly-d43v8n;
+$promptInputStyleColorDefault: --awsui-prompt-input-style-color-default-d43v8n;
+$promptInputStyleColorDisabled: --awsui-prompt-input-style-color-disabled-d43v8n;
+$promptInputStyleColorFocus: --awsui-prompt-input-style-color-focus-d43v8n;
+$promptInputStyleColorHover: --awsui-prompt-input-style-color-hover-d43v8n;
+$promptInputStyleColorReadonly: --awsui-prompt-input-style-color-readonly-d43v8n;
+$promptInputStylePlaceholderColor: --awsui-prompt-input-style-placeholder-color-d43v8n;
+$promptInputStylePlaceholderFontSize: --awsui-prompt-input-style-placeholder-font-size-d43v8n;
+$promptInputStylePlaceholderFontStyle: --awsui-prompt-input-style-placeholder-font-style-d43v8n;
+$promptInputStylePlaceholderFontWeight: --awsui-prompt-input-style-placeholder-font-weight-d43v8n;
+$progressBarBackgroundColor: --awsui-progress-bar-background-color-d43v8n;
+$progressBarBorderRadius: --awsui-progress-bar-border-radius-d43v8n;
+$progressBarHeight: --awsui-progress-bar-height-d43v8n;
+$progressValueBackgroundColor: --awsui-progress-value-background-color-d43v8n;

package/lib/internal/scss/prompt-input/styles.scss CHANGED Viewed

@@ -8,6 +8,7 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles/foundation/' as foundation;
 @use '../internal/styles/forms/constants' as constants;
+@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 $send-icon-right-spacing: awsui.$space-static-xxs;
@@ -18,18 +19,55 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
   @include styles.control-border-radius-full();
   cursor: text;
-  background-color: awsui.$color-background-input-default;
-  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
-  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
+  background-color: var(#{custom-props.$promptInputStyleBackgroundDefault}, awsui.$color-background-input-default);
+  border-block: awsui.$border-width-field solid
+    var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-border-input-default);
+  border-inline: awsui.$border-width-field solid
+    var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-border-input-default);
+  box-shadow: var(#{custom-props.$promptInputStyleBoxShadowDefault});
+  &:hover {
+    background-color: var(
+      #{custom-props.$promptInputStyleBackgroundHover},
+      var(#{custom-props.$promptInputStyleBackgroundDefault}, awsui.$color-background-input-default)
+    );
+    border-color: var(
+      #{custom-props.$promptInputStyleBorderColorHover},
+      var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-border-input-default)
+    );
+    box-shadow: var(
+      #{custom-props.$promptInputStyleBoxShadowHover},
+      var(#{custom-props.$promptInputStyleBoxShadowDefault})
+    );
+  }
   &.textarea-readonly {
-    @include styles.form-readonly-element;
+    @include styles.form-readonly-element(
+      $background-color: var(
+          #{custom-props.$promptInputStyleBackgroundReadonly},
+          var(#{custom-props.$promptInputStyleBackgroundDefault}, awsui.$color-background-input-default)
+        ),
+      $border-color: var(
+          #{custom-props.$promptInputStyleBorderColorReadonly},
+          var(#{custom-props.$promptInputStyleBorderColorDefault}, awsui.$color-border-input-disabled)
+        )
+    );
+    box-shadow: var(#{custom-props.$promptInputStyleBoxShadowReadonly});
   }
   &.disabled {
-    @include styles.form-disabled-element;
-    cursor: default;
+    @include styles.form-disabled-element(
+      $background-color: var(
+          #{custom-props.$promptInputStyleBackgroundDisabled},
+          awsui.$color-background-input-disabled
+        ),
+      $border-color: var(#{custom-props.$promptInputStyleBorderColorDisabled}, awsui.$color-border-input-disabled),
+      $color: var(#{custom-props.$promptInputStyleColorDisabled}, awsui.$color-text-input-disabled),
+      $cursor: default
+    );
+    box-shadow: var(#{custom-props.$promptInputStyleBoxShadowDisabled});
   }
   &.textarea-invalid {
@@ -66,7 +104,11 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
   &:focus-within,
   &:focus {
-    @include styles.form-focus-element;
+    @include styles.form-focus-element(
+      $border-color: var(#{custom-props.$promptInputStyleBorderColorFocus}, awsui.$color-border-input-focused),
+      $box-shadow: var(#{custom-props.$promptInputStyleBoxShadowFocus}, foundation.$box-shadow-focused-light)
+    );
+    background-color: var(#{custom-props.$promptInputStyleBackgroundFocus}, awsui.$color-background-input-default);
   }
 }
@@ -85,7 +127,7 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
   padding-block: styles.$control-padding-vertical;
   padding-inline: styles.$control-padding-horizontal;
-  color: awsui.$color-text-body-default;
+  color: var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-body-default);
   max-inline-size: 100%;
   inline-size: 100%;
   display: block;
@@ -94,13 +136,28 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
   border: 0;
   &::placeholder {
-    @include styles.form-placeholder;
+    @include styles.form-placeholder(
+      $color: var(#{custom-props.$promptInputStylePlaceholderColor}, awsui.$color-text-input-placeholder),
+      $font-size: var(#{custom-props.$promptInputStylePlaceholderFontSize}),
+      $font-style: var(#{custom-props.$promptInputStylePlaceholderFontStyle}, italic),
+      $font-weight: var(#{custom-props.$promptInputStylePlaceholderFontWeight})
+    );
     opacity: 1;
   }
+  &:hover {
+    color: var(
+      #{custom-props.$promptInputStyleColorHover},
+      var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-body-default)
+    );
+  }
   &:focus {
     outline: none;
+    color: var(
+      #{custom-props.$promptInputStyleColorFocus},
+      var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-body-default)
+    );
   }
   &:invalid {
@@ -114,15 +171,20 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
   }
   &:disabled {
-    @include styles.form-disabled-element;
-    border: 0;
+    color: var(#{custom-props.$promptInputStyleColorDisabled}, awsui.$color-text-input-disabled);
     cursor: default;
     &::placeholder {
       @include styles.form-placeholder-disabled;
       opacity: 1;
     }
+  }
+  &-readonly {
+    color: var(
+      #{custom-props.$promptInputStyleColorReadonly},
+      var(#{custom-props.$promptInputStyleColorDefault}, awsui.$color-text-body-default)
+    );
   }
   &-wrapper {
@@ -134,7 +196,7 @@ $invalid-border-offset: constants.$invalid-control-left-padding;
   align-self: flex-end;
   flex-shrink: 0;
   padding-inline-start: calc(styles.$control-padding-horizontal / 2);
   .textarea-wrapper > & {
     padding-inline-end: calc(styles.$control-padding-horizontal / 2);

package/lib/internal/scss/tree-view/tree-item/styles.scss CHANGED Viewed

@@ -35,6 +35,7 @@ $item-toggle-column-width: 28px;
     }
     > .expand-toggle-wrapper {
+      display: grid;
       grid-column: 1;
       grid-row: 1;
       padding-inline-end: awsui.$space-scaled-xxs;
@@ -56,7 +57,10 @@ $item-toggle-column-width: 28px;
   }
 }
-.tree-item-structured-item,
-.tree-item-focus-target {
+.tree-item-structured-item {
   /* used in keyboard navigation */
 }
+.tree-item-focus-target {
+  outline: none;
+}

package/lib/internal/template/alert/actions-wrapper/index.js CHANGED Viewed

@@ -8,9 +8,9 @@ import InternalButton from '../../button/internal';
 import styles from './styles.css.js';
 function createActionButton(testUtilClasses, action, buttonText, onButtonClick) {
     if (!action && buttonText) {
-        action = (React.createElement("span", Object.assign({}, getAnalyticsMetadataAttribute({
-            action: 'buttonClick',
-        })),
+        action = (React.createElement("span", { ...getAnalyticsMetadataAttribute({
+                action: 'buttonClick',
+            }) },
             React.createElement(InternalButton, { className: testUtilClasses.actionButton, onClick: onButtonClick, formAction: "none" }, buttonText)));
     }
     return action ? React.createElement("div", { className: testUtilClasses.actionSlot }, action) : null;

package/lib/internal/template/alert/actions-wrapper/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/alert/actions-wrapper/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AACzE,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,cAAuC,MAAM,uBAAuB,CAAC;AAG5E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,SAAS,kBAAkB,CACzB,eAAuD,EACvD,MAAuB,EACvB,UAA2B,EAC3B,aAA6C;IAE7C,IAAI,CAAC,MAAM,IAAI,UAAU,EAAE,CAAC;QAC1B,MAAM,GAAG,CACP,~~8CACM~~,6BAA6B,CAAC;~~YAChC~~,MAAM,EAAE,aAAa;~~SACiC~~,CAAC;YAEzD,oBAAC,cAAc,IAAC,SAAS,EAAE,eAAe,CAAC,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAC,MAAM,IAC/F,UAAU,CACI,CACZ,CACR,CAAC;IACJ,CAAC;IACD,OAAO,MAAM,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,eAAe,CAAC,UAAU,IAAG,MAAM,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;AACpF,CAAC;AAaD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,eAAe,EACf,MAAM,EACN,iBAAiB,EACjB,UAAU,EACV,YAAY,EACZ,cAAc,EACd,aAAa,GACO,EAAE,EAAE;IACxB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,CAAC,cAAc,IAAI,CAAC,YAAY,EAAE,CAAC;YACrD,OAAO;QACT,CAAC;QACD,SAAS,KAAK;YACZ,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YACpC,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,GAAG,CAAC,OAAQ,CAAC;YACjD,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,cAAe,GAAG,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;YAC9E,yEAAyE;YACzE,UAAU,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC;QAC1B,CAAC;QAED,oEAAoE;QACpE,0DAA0D;QAC1D,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC7C,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACrF,KAAK,EAAE,CAAC;QACR,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IACH,MAAM,YAAY,GAAG,kBAAkB,CAAC,eAAe,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;IAC5F,IAAI,CAAC,YAAY,IAAI,iBAAiB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACpD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,IAAI,YAAY,CAAC;QAC5E,YAAY;QACZ,iBAAiB,CACd,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useLayoutEffect, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getIsRtl } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalButton, { InternalButtonProps } from '../../button/internal';\nimport { GeneratedAnalyticsMetadataAlertButtonClick } from '../analytics-metadata/interfaces';\n\nimport styles from './styles.css.js';\n\nfunction createActionButton(\n testUtilClasses: ActionsWrapperProps['testUtilClasses'],\n action: React.ReactNode,\n buttonText: React.ReactNode,\n onButtonClick: InternalButtonProps['onClick']\n) {\n if (!action && buttonText) {\n action = (\n <span\n {...getAnalyticsMetadataAttribute({\n action: 'buttonClick',\n } as Partial<GeneratedAnalyticsMetadataAlertButtonClick>)}\n >\n <InternalButton className={testUtilClasses.actionButton} onClick={onButtonClick} formAction=\"none\">\n {buttonText}\n </InternalButton>\n </span>\n );\n }\n return action ? <div className={testUtilClasses.actionSlot}>{action}</div> : null;\n}\n\ninterface ActionsWrapperProps {\n className: string;\n testUtilClasses: { actionSlot: string; actionButton: string };\n action: React.ReactNode;\n discoveredActions: Array<React.ReactNode>;\n buttonText: React.ReactNode;\n wrappedClass?: string;\n containerWidth?: number;\n onButtonClick: InternalButtonProps['onClick'];\n}\n\nexport const ActionsWrapper = ({\n className,\n testUtilClasses,\n action,\n discoveredActions,\n buttonText,\n wrappedClass,\n containerWidth,\n onButtonClick,\n}: ActionsWrapperProps) => {\n const [wrapped, setWrapped] = useState(false);\n const ref = React.useRef<HTMLDivElement>(null);\n useLayoutEffect(() => {\n if (!ref.current \|\| !containerWidth \|\| !wrappedClass) {\n return;\n }\n function check() {\n const isRtl = getIsRtl(ref.current);\n const { offsetWidth, offsetLeft } = ref.current!;\n const start = isRtl ? containerWidth! - offsetWidth - offsetLeft : offsetLeft;\n // if the action slot is towards the left (right in RTL) of its container\n setWrapped(start < 100);\n }\n\n // Discovered actions are rendered by their plugin, so don't cause a\n // re-render of our React tree. So we observe for changes.\n const observer = new MutationObserver(check);\n observer.observe(ref.current, { attributes: false, childList: true, subtree: true });\n check();\n return () => observer.disconnect();\n });\n const actionButton = createActionButton(testUtilClasses, action, buttonText, onButtonClick);\n if (!actionButton && discoveredActions.length === 0) {\n return null;\n }\n\n return (\n <div ref={ref} className={clsx(styles.root, className, wrapped && wrappedClass)}>\n {actionButton}\n {discoveredActions}\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/alert/actions-wrapper/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AACzE,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,cAAuC,MAAM,uBAAuB,CAAC;AAG5E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,SAAS,kBAAkB,CACzB,eAAuD,EACvD,MAAuB,EACvB,UAA2B,EAC3B,aAA6C;IAE7C,IAAI,CAAC,MAAM,IAAI,UAAU,EAAE,CAAC;QAC1B,MAAM,GAAG,CACP,iCACM,6BAA6B,CAAC;gBAChC,MAAM,EAAE,aAAa;aACiC,CAAC;YAEzD,oBAAC,cAAc,IAAC,SAAS,EAAE,eAAe,CAAC,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,UAAU,EAAC,MAAM,IAC/F,UAAU,CACI,CACZ,CACR,CAAC;IACJ,CAAC;IACD,OAAO,MAAM,CAAC,CAAC,CAAC,6BAAK,SAAS,EAAE,eAAe,CAAC,UAAU,IAAG,MAAM,CAAO,CAAC,CAAC,CAAC,IAAI,CAAC;AACpF,CAAC;AAaD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,SAAS,EACT,eAAe,EACf,MAAM,EACN,iBAAiB,EACjB,UAAU,EACV,YAAY,EACZ,cAAc,EACd,aAAa,GACO,EAAE,EAAE;IACxB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC/C,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,GAAG,CAAC,OAAO,IAAI,CAAC,cAAc,IAAI,CAAC,YAAY,EAAE,CAAC;YACrD,OAAO;QACT,CAAC;QACD,SAAS,KAAK;YACZ,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YACpC,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,GAAG,CAAC,OAAQ,CAAC;YACjD,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,cAAe,GAAG,WAAW,GAAG,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;YAC9E,yEAAyE;YACzE,UAAU,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC;QAC1B,CAAC;QAED,oEAAoE;QACpE,0DAA0D;QAC1D,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAC7C,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACrF,KAAK,EAAE,CAAC;QACR,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IACH,MAAM,YAAY,GAAG,kBAAkB,CAAC,eAAe,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;IAC5F,IAAI,CAAC,YAAY,IAAI,iBAAiB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACpD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,IAAI,YAAY,CAAC;QAC5E,YAAY;QACZ,iBAAiB,CACd,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useLayoutEffect, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { getIsRtl } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalButton, { InternalButtonProps } from '../../button/internal';\nimport { GeneratedAnalyticsMetadataAlertButtonClick } from '../analytics-metadata/interfaces';\n\nimport styles from './styles.css.js';\n\nfunction createActionButton(\n testUtilClasses: ActionsWrapperProps['testUtilClasses'],\n action: React.ReactNode,\n buttonText: React.ReactNode,\n onButtonClick: InternalButtonProps['onClick']\n) {\n if (!action && buttonText) {\n action = (\n <span\n {...getAnalyticsMetadataAttribute({\n action: 'buttonClick',\n } as Partial<GeneratedAnalyticsMetadataAlertButtonClick>)}\n >\n <InternalButton className={testUtilClasses.actionButton} onClick={onButtonClick} formAction=\"none\">\n {buttonText}\n </InternalButton>\n </span>\n );\n }\n return action ? <div className={testUtilClasses.actionSlot}>{action}</div> : null;\n}\n\ninterface ActionsWrapperProps {\n className: string;\n testUtilClasses: { actionSlot: string; actionButton: string };\n action: React.ReactNode;\n discoveredActions: Array<React.ReactNode>;\n buttonText: React.ReactNode;\n wrappedClass?: string;\n containerWidth?: number;\n onButtonClick: InternalButtonProps['onClick'];\n}\n\nexport const ActionsWrapper = ({\n className,\n testUtilClasses,\n action,\n discoveredActions,\n buttonText,\n wrappedClass,\n containerWidth,\n onButtonClick,\n}: ActionsWrapperProps) => {\n const [wrapped, setWrapped] = useState(false);\n const ref = React.useRef<HTMLDivElement>(null);\n useLayoutEffect(() => {\n if (!ref.current \|\| !containerWidth \|\| !wrappedClass) {\n return;\n }\n function check() {\n const isRtl = getIsRtl(ref.current);\n const { offsetWidth, offsetLeft } = ref.current!;\n const start = isRtl ? containerWidth! - offsetWidth - offsetLeft : offsetLeft;\n // if the action slot is towards the left (right in RTL) of its container\n setWrapped(start < 100);\n }\n\n // Discovered actions are rendered by their plugin, so don't cause a\n // re-render of our React tree. So we observe for changes.\n const observer = new MutationObserver(check);\n observer.observe(ref.current, { attributes: false, childList: true, subtree: true });\n check();\n return () => observer.disconnect();\n });\n const actionButton = createActionButton(testUtilClasses, action, buttonText, onButtonClick);\n if (!actionButton && discoveredActions.length === 0) {\n return null;\n }\n\n return (\n <div ref={ref} className={clsx(styles.root, className, wrapped && wrappedClass)}>\n {actionButton}\n {discoveredActions}\n </div>\n );\n};\n"]}

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

@@ -1,7 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 'use client';
-import { __rest } from "tslib";
 import React, { useEffect, useRef } from 'react';
 import { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
@@ -13,8 +12,7 @@ import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import InternalAlert from './internal';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
-const Alert = React.forwardRef((_a, ref) => {
-    var { type = 'info', visible = true, style } = _a, props = __rest(_a, ["type", "visible", "style"]);
+const Alert = React.forwardRef(({ type = 'info', visible = true, style, ...props }, ref) => {
     const analyticsMetadata = getAnalyticsMetadataProps(props);
     const baseComponentProps = useBaseComponent('Alert', {
         props: { type, visible, dismissible: props.dismissible },
@@ -88,7 +86,7 @@ const Alert = React.forwardRef((_a, ref) => {
             type,
         },
     };
-    return (React.createElement(InternalAlert, Object.assign({ type: type, visible: visible }, props, baseComponentProps, { __internalRootRef: __internalRootRef, ref: ref, messageSlotId: messageSlotId, style: style }, getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata }))));
+    return (React.createElement(InternalAlert, { type: type, visible: visible, ...props, ...baseComponentProps, __internalRootRef: __internalRootRef, ref: ref, messageSlotId: messageSlotId, style: style, ...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata }) }));
 });
 applyDisplayName(Alert, 'Alert');
 export default Alert;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/alert/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;;AACb,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAC1F,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AACpG,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC7F,OAAO,EAAkC,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AACvG,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAGxE,OAAO,aAAa,MAAM,YAAY,CAAC;AAEvC,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AAIpE,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CAAC,~~EAA8D,~~EAAE,~~GAA8B,EAAE,EAAE;QAAlG,EAAE,~~IAAI,GAAG,MAAM,EAAE,OAAO,GAAG,IAAI,EAAE,KAAK,~~OAAwB~~,~~EAAnB~~,KAAK,~~cAAhD~~,~~4BAAkD~~,~~CAAF~~;~~IAC/C~~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~~kBACZ~~,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,~~IACZ~~,KAAK,~~EACL~~,kBAAkB,~~IACtB~~,iBAAiB,EAAE,iBAAiB,EACpC,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,KAAK,~~IACR~~,6BAA6B,CAAC,EAAE,SAAS,EAAE,0BAA0B,EAAE,CAAC,~~EAC5E~~,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACjC,eAAe,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React, { useEffect, useRef } from 'react';\n\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getSubStepAllSelector, getTextFromSelector } from '../internal/analytics/selectors';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { GeneratedAnalyticsMetadataAlertComponent } from './analytics-metadata/interfaces';\nimport { AlertProps } from './interfaces';\nimport InternalAlert from './internal';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\n\nexport { AlertProps };\n\nconst Alert = React.forwardRef(\n ({ type = 'info', visible = true, style, ...props }: AlertProps, ref: React.Ref<AlertProps.Ref>) => {\n const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);\n\n const baseComponentProps = useBaseComponent(\n 'Alert',\n {\n props: { type, visible, dismissible: props.dismissible },\n },\n analyticsMetadata\n );\n const rootRef = useRef<HTMLElement>(null);\n const __internalRootRef = useMergeRefs(rootRef, baseComponentProps.__internalRootRef);\n\n const { funnelIdentifier, funnelInteractionId, funnelErrorContext, submissionAttempt, funnelState, errorCount } =\n useFunnel();\n const { stepNumber, stepNameSelector, stepIdentifier, subStepCount, stepErrorContext, subStepConfiguration } =\n useFunnelStep();\n const { subStepSelector, subStepNameSelector, subStepIdentifier, subStepErrorContext } = useFunnelSubStep();\n\n const messageSlotId = useUniqueId('alert-');\n\n useEffect(() => {\n if (funnelInteractionId && visible && type === 'error' && funnelState.current !== 'complete') {\n const stepName = getTextFromSelector(stepNameSelector);\n const subStepName = getTextFromSelector(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 = (rootRef.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 errorContext: analyticsMetadata.errorContext \|\| subStepErrorContext,\n });\n } else if (stepNameSelector) {\n FunnelMetrics.funnelStepError({\n funnelInteractionId,\n stepNumber,\n stepNameSelector,\n stepName,\n stepIdentifier,\n currentDocument: rootRef.current?.ownerDocument,\n totalSubSteps: subStepCount.current,\n funnelIdentifier,\n subStepAllSelector: getSubStepAllSelector(),\n errorContext: analyticsMetadata.errorContext \|\| stepErrorContext,\n subStepConfiguration: subStepConfiguration.current?.get(stepNumber),\n stepErrorSelector: '#' + messageSlotId,\n });\n } else {\n FunnelMetrics.funnelError({\n funnelIdentifier,\n funnelInteractionId,\n errorContext: analyticsMetadata.errorContext \|\| 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 const componentAnalyticsMetadata: GeneratedAnalyticsMetadataAlertComponent = {\n name: 'awsui.Alert',\n label: `.${analyticsSelectors.header}`,\n properties: {\n type,\n },\n };\n\n return (\n <InternalAlert\n type={type}\n visible={visible}\n {...props}\n {...baseComponentProps}\n __internalRootRef={__internalRootRef}\n ref={ref}\n messageSlotId={messageSlotId}\n style={style}\n {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}\n />\n );\n }\n);\n\napplyDisplayName(Alert, 'Alert');\nexport default Alert;\n"]}
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\n'use client';\nimport React, { useEffect, useRef } from 'react';\n\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getSubStepAllSelector, getTextFromSelector } from '../internal/analytics/selectors';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { GeneratedAnalyticsMetadataAlertComponent } from './analytics-metadata/interfaces';\nimport { AlertProps } from './interfaces';\nimport InternalAlert from './internal';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\n\nexport { AlertProps };\n\nconst Alert = React.forwardRef(\n ({ type = 'info', visible = true, style, ...props }: AlertProps, ref: React.Ref<AlertProps.Ref>) => {\n const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);\n\n const baseComponentProps = useBaseComponent(\n 'Alert',\n {\n props: { type, visible, dismissible: props.dismissible },\n },\n analyticsMetadata\n );\n const rootRef = useRef<HTMLElement>(null);\n const __internalRootRef = useMergeRefs(rootRef, baseComponentProps.__internalRootRef);\n\n const { funnelIdentifier, funnelInteractionId, funnelErrorContext, submissionAttempt, funnelState, errorCount } =\n useFunnel();\n const { stepNumber, stepNameSelector, stepIdentifier, subStepCount, stepErrorContext, subStepConfiguration } =\n useFunnelStep();\n const { subStepSelector, subStepNameSelector, subStepIdentifier, subStepErrorContext } = useFunnelSubStep();\n\n const messageSlotId = useUniqueId('alert-');\n\n useEffect(() => {\n if (funnelInteractionId && visible && type === 'error' && funnelState.current !== 'complete') {\n const stepName = getTextFromSelector(stepNameSelector);\n const subStepName = getTextFromSelector(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 = (rootRef.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 errorContext: analyticsMetadata.errorContext \|\| subStepErrorContext,\n });\n } else if (stepNameSelector) {\n FunnelMetrics.funnelStepError({\n funnelInteractionId,\n stepNumber,\n stepNameSelector,\n stepName,\n stepIdentifier,\n currentDocument: rootRef.current?.ownerDocument,\n totalSubSteps: subStepCount.current,\n funnelIdentifier,\n subStepAllSelector: getSubStepAllSelector(),\n errorContext: analyticsMetadata.errorContext \|\| stepErrorContext,\n subStepConfiguration: subStepConfiguration.current?.get(stepNumber),\n stepErrorSelector: '#' + messageSlotId,\n });\n } else {\n FunnelMetrics.funnelError({\n funnelIdentifier,\n funnelInteractionId,\n errorContext: analyticsMetadata.errorContext \|\| 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 const componentAnalyticsMetadata: GeneratedAnalyticsMetadataAlertComponent = {\n name: 'awsui.Alert',\n label: `.${analyticsSelectors.header}`,\n properties: {\n type,\n },\n };\n\n return (\n <InternalAlert\n type={type}\n visible={visible}\n {...props}\n {...baseComponentProps}\n __internalRootRef={__internalRootRef}\n ref={ref}\n messageSlotId={messageSlotId}\n style={style}\n {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}\n />\n );\n }\n);\n\napplyDisplayName(Alert, 'Alert');\nexport default Alert;\n"]}

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

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useImperativeHandle, useRef } from 'react';
@@ -29,9 +28,8 @@ const typeToIcon = {
 };
 const useDiscoveredAction = createUseDiscoveredAction(awsuiPluginsInternal.alert.onActionRegistered);
 const useDiscoveredContent = createUseDiscoveredContent('alert', awsuiPluginsInternal.alertContent);
-const InternalAlert = React.forwardRef((_a, ref) => {
-    var _b, _c;
-    var { type, i18nStrings, visible = true, dismissible, children, header, buttonText, action, onDismiss, onButtonClick, __internalRootRef, statusIconAriaLabel: deprecatedStatusIconAriaLabel, dismissAriaLabel: deprecatedDismissAriaLabel, messageSlotId, style } = _a, rest = __rest(_a, ["type", "i18nStrings", "visible", "dismissible", "children", "header", "buttonText", "action", "onDismiss", "onButtonClick", "__internalRootRef", "statusIconAriaLabel", "dismissAriaLabel", "messageSlotId", "style"]);
+const InternalAlert = React.forwardRef(({ type, i18nStrings, visible = true, dismissible, children, header, buttonText, action, onDismiss, onButtonClick, __internalRootRef, statusIconAriaLabel: deprecatedStatusIconAriaLabel, dismissAriaLabel: deprecatedDismissAriaLabel, messageSlotId, style, ...rest }, ref) => {
+    var _a, _b;
     const baseProps = getBaseProps(rest);
     const i18n = useInternalI18n('alert');
     const focusRef = useRef(null);
@@ -64,9 +62,9 @@ const InternalAlert = React.forwardRef((_a, ref) => {
     const analyticsAttributes = {
         [DATA_ATTR_ANALYTICS_ALERT]: type,
     };
-    const statusIconAriaLabel = i18n(`i18nStrings.${type}IconAriaLabel`, (_b = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings[`${type}IconAriaLabel`]) !== null && _b !== void 0 ? _b : deprecatedStatusIconAriaLabel);
-    const dismissAriaLabel = i18n('i18nStrings.dismissAriaLabel', (_c = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.dismissAriaLabel) !== null && _c !== void 0 ? _c : i18n('dismissAriaLabel', deprecatedDismissAriaLabel));
-    return (React.createElement("div", Object.assign({}, baseProps, analyticsAttributes, { "aria-hidden": !visible, className: clsx(styles.root, { [styles.hidden]: !visible, [styles['initial-hidden']]: initialHidden }, baseProps.className), ref: containerRef }),
+    const statusIconAriaLabel = i18n(`i18nStrings.${type}IconAriaLabel`, (_a = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings[`${type}IconAriaLabel`]) !== null && _a !== void 0 ? _a : deprecatedStatusIconAriaLabel);
+    const dismissAriaLabel = i18n('i18nStrings.dismissAriaLabel', (_b = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.dismissAriaLabel) !== null && _b !== void 0 ? _b : i18n('dismissAriaLabel', deprecatedDismissAriaLabel));
+    return (React.createElement("div", { ...baseProps, ...analyticsAttributes, "aria-hidden": !visible, className: clsx(styles.root, { [styles.hidden]: !visible, [styles['initial-hidden']]: initialHidden }, baseProps.className), ref: containerRef },
         React.createElement(LinkDefaultVariantContext.Provider, { value: { defaultVariant: 'primary' } },
             React.createElement(VisualContext, { contextName: "alert" },
                 React.createElement("div", { className: clsx(styles.alert, styles[`type-${type}`], styles[`icon-size-${size}`], hasAction && styles['with-action'], dismissible && styles['with-dismiss']), style: getAlertStyles(style) },
@@ -83,9 +81,9 @@ const InternalAlert = React.forwardRef((_a, ref) => {
                                 actionSlot: styles['action-slot'],
                                 actionButton: styles['action-button'],
                             }, action: action, discoveredActions: discoveredActions, buttonText: buttonText, onButtonClick: () => fireNonCancelableEvent(onButtonClick), containerWidth: containerWidth, wrappedClass: styles['action-wrapped'] })),
-                    dismissible && (React.createElement("div", Object.assign({ className: styles.dismiss }, getAnalyticsMetadataAttribute({
-                        action: 'dismiss',
-                    })),
+                    dismissible && (React.createElement("div", { className: styles.dismiss, ...getAnalyticsMetadataAttribute({
+                            action: 'dismiss',
+                        }) },
                         React.createElement(InternalButton, { className: styles['dismiss-button'], variant: "icon", iconName: "close", formAction: "none", ariaLabel: dismissAriaLabel, onClick: () => fireNonCancelableEvent(onDismiss), style: getDismissButtonStyles(style) }))))))));
 });
 export default InternalAlert;