npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1314 → 3.0.1316 - Mend

@cloudscape-design/components-themeable 3.0.1314 → 3.0.1316

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

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "2f2e31910a4929a517635f51286b40f489d8a43f"
+  "commit": "d326da3c16c88585b9246abc7852a858f91b5efc"
 }

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

@@ -1,6 +1,6 @@
     // Build environment
-    $awsui-commit-hash: "2f2e3191";
+    $awsui-commit-hash: "d326da3c";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-6b9ypa;
 $minContentWidth: --awsui-min-content-width-6b9ypa;

package/lib/internal/scss/link/styles.scss CHANGED Viewed

@@ -10,6 +10,7 @@
 @use './constants' as constants;
 @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
 @use '../internal/styles/foundation' as foundation;
+@use '../internal/styles/utils/theming' as theming;
 .link {
   @include styles.styles-reset;
@@ -38,6 +39,21 @@
   &.button {
     @include styles.font-smoothing;
     @include styles.link-variant-style(map.get(constants.$link-styles, 'button'));
+    @include theming.one-theme-only {
+      @include styles.link-variant-style(map.get(constants.$link-variants, 'primary'));
+      & {
+        font-weight: inherit;
+        letter-spacing: normal;
+      }
+      &.color-inverted {
+        color: awsui.$color-text-notification-default;
+        text-decoration-color: currentColor;
+        &:hover {
+          color: awsui.$color-text-link-inverted-hover;
+        }
+      }
+    }
   }
   &.color-inverted {

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

@@ -7,11 +7,36 @@
 @use '../internal/styles/tokens' as awsui;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
+// ==========================================================================
+// Item sizing — single source of truth for navigation density.
+// Adjust awsui.$size-side-navigation-item-height and awsui.$space-side-navigation-item-gap/awsui.$space-side-navigation-item-collapsed-gap to scale all items uniformly.
+// ==========================================================================
+$item-icon-text-gap: awsui.$space-xs;
+// Padding is calculated to be able to horizontally align items without having to use align-items: center for wrapping
+$item-padding-block: calc((#{awsui.$size-side-navigation-item-height} - #{awsui.$line-height-body-m}) / 2);
+$item-padding-inline: awsui.$space-xs;
+$item-indent: calc(awsui.$size-icon-normal + #{$item-icon-text-gap} - #{$item-padding-inline});
+$expandable-icon-negative-margin: awsui.$space-l;
+@mixin item-radius {
+  border-start-start-radius: awsui.$border-radius-item;
+  border-start-end-radius: awsui.$border-radius-item;
+  border-end-start-radius: awsui.$border-radius-item;
+  border-end-end-radius: awsui.$border-radius-item;
+}
 .root {
   @include styles.styles-reset;
   @include styles.text-wrapping;
 }
+.with-toolbar {
+  /* Structural class — parent context for toolbar margin resets. */
+}
+// ==========================================================================
+// Header
+// ==========================================================================
 .header {
   @include styles.font-panel-header;
   margin-block: 0;
@@ -20,13 +45,19 @@
   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});
+  &--collapsed {
+    padding-inline: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 .header-link {
   @include styles.font-panel-header;
   color: awsui.$color-text-heading-default;
   min-block-size: awsui.$font-panel-header-line-height;
   display: flex;
   &--has-logo {
@@ -49,8 +80,12 @@
   }
 }
+// ==========================================================================
+// List structure
+// ==========================================================================
 .items-control {
   padding-inline: awsui.$space-l;
+  padding-block-start: $item-padding-block;
 }
 .list-container {
@@ -59,10 +94,10 @@
 .items-control,
 .list-container {
-  margin-block-start: awsui.$space-panel-content-top;
-  // Toolbar removes margin for whichever one comes first after the header
+  margin-block-start: calc(#{awsui.$space-panel-content-top} - #{$item-padding-block});
+  // Toolbar removes margin and item padding for whatever comes first after the header
   .with-toolbar > .divider-header + & {
-    margin-block-start: 0;
+    margin-block-start: calc(-1 * #{$item-padding-block});
   }
 }
@@ -71,93 +106,214 @@
   margin-inline: 0;
   padding-block: 0;
   padding-inline-end: 0;
-  padding-inline-start: awsui.$space-l;
+  padding-inline-start: $item-indent;
 }
 .list-variant-root {
   margin-block: 0;
   margin-inline: 0;
   padding-block: 0;
-  padding-inline-start: awsui.$space-panel-nav-left;
-  padding-inline-end: awsui.$space-panel-side-right;
+  padding-inline-start: calc(#{awsui.$space-panel-nav-left} - #{$item-padding-inline});
+  padding-inline-end: calc(#{awsui.$space-panel-side-right} - #{$item-padding-inline});
   &--first {
     margin-block-start: 0;
   }
+  &--collapsed {
+    padding-inline-start: 0;
+    padding-inline-end: 0;
+  }
 }
 .list-variant-expandable-link-group {
-  padding-inline-start: awsui.$space-xxxl;
+  padding-inline-start: calc(#{$item-indent} + #{$expandable-icon-negative-margin});
 }
+.list-variant-section {
+  padding-inline-start: calc(#{$expandable-icon-negative-margin} - #{$item-padding-inline});
+}
+.list-variant-link-group {
+  padding-inline-start: $item-indent;
+}
+.list-variant-section-group {
+  margin-block: calc(#{awsui.$space-scaled-xs} - #{$item-padding-block});
+  margin-inline: calc(-1 * #{$item-padding-inline});
+  padding-block: 0;
+  padding-inline: 0;
+}
+// ==========================================================================
+// List items
+// ==========================================================================
 .list-item {
-  margin-block: awsui.$space-scaled-xs;
   margin-inline: 0;
+  margin-block: awsui.$space-side-navigation-item-gap;
   padding-block: 0;
-  padding-inline: 0;
+  padding-inline: $item-padding-inline;
   list-style: none;
+  @include styles.with-motion {
+    transition: margin awsui.$motion-duration-expressive awsui.$motion-easing-responsive;
+  }
   // Remove margin from first item in side nav, outer block margins are covered by list-container
   .list-variant-root--first > &:first-child {
     margin-block-start: 0px;
   }
+  &--collapsed {
+    margin-block: awsui.$space-side-navigation-item-collapsed-gap;
+    display: flex;
+    justify-content: center;
+    padding-block: 0;
+    padding-inline: 0;
+    @include styles.with-motion {
+      transition: margin awsui.$motion-duration-expressive awsui.$motion-easing-responsive;
+    }
+  }
+  &--group {
+    padding-inline: 0;
+    padding-block: awsui.$space-scaled-s;
+    list-style: none;
+    &-no-padding-start {
+      padding-block-start: 0;
+    }
+    &-no-padding-end {
+      padding-block-end: 0;
+    }
+  }
+  &--info {
+    display: flex;
+    align-items: baseline;
+  }
 }
+.list-item--info > .list {
+  inline-size: 100%;
+}
+.list--collapsed-group {
+  margin-block: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+  list-style: none;
+}
+// ==========================================================================
+// Sections and expandable link groups (InternalExpandableSection)
+// ==========================================================================
 .section,
 .expandable-link-group {
-  margin-inline-start: calc(-1 * #{awsui.$space-l});
+  margin-inline-start: calc(-1 * #{$expandable-icon-negative-margin});
+  // HACK: Remove padding from section header and content to rely on margin collapsing rules.
+  // Hits the two direct <div> children of the ExpandableSection root: the header
+  // (.wrapper-footer / .header-footer) and the content (.content-footer).
+  /* stylelint-disable-next-line selector-max-type */
+  & > div {
+    padding-block: 0;
+    padding-inline: 0;
+  }
+  // Hits the header's first child only — the .icon-container inside the
+  // ExpandableSection header — to vertically align the icon with the text.
+  // Must NOT match the content div's first child (our <ul>); turning the <ul>
+  // into a grid container breaks sibling margin collapse on the .list-item children.
+  /* stylelint-disable-next-line selector-max-type */
+  & > div:first-child > :first-child {
+    display: grid;
+    align-items: flex-start;
+    padding-block: $item-padding-block;
+  }
   &--no-ident {
     margin-inline-start: 0;
   }
 }
+.expandable-link-group > div:first-child {
+  @include item-radius;
+  display: flex;
+  padding-inline: $item-padding-inline;
+  margin-inline: calc(-1 * #{$item-padding-inline});
+  box-sizing: content-box;
+}
+.expandable-link-group--active > div:first-child {
+  background-color: awsui.$color-background-side-navigation-item-active;
+}
 .section {
   margin-block: calc(#{awsui.$space-scaled-2x-l} - #{awsui.$border-divider-section-width});
   &.refresh {
-    margin-block: calc(#{awsui.$space-scaled-2x-m} - #{awsui.$border-divider-section-width});
+    margin-block: calc(#{awsui.$space-scaled-xs} - #{awsui.$border-divider-section-width});
   }
   // Remove margin from section if it is the first item in side nav to prevent double margin stacking
   .list-variant-root--first > .list-item:first-child > & {
     margin-block-start: 0px;
   }
-  // HACK: Remove padding from section header and content to rely on margin collapsing rules.
-  /* stylelint-disable-next-line selector-max-type */
-  > div {
-    padding-block: 0;
-    padding-inline: 0;
-  }
-}
-.list-variant-section-group {
-  margin-block: 0;
-  margin-inline: 0;
-  padding-block: 0;
-  padding-inline: 0;
 }
+// ==========================================================================
+// Section groups
+// ==========================================================================
 .section-group {
   @include styles.font-heading-m;
-  margin-block: 0;
+  margin-block: calc(#{awsui.$space-scaled-xs} - #{awsui.$border-divider-section-width});
   margin-inline: 0;
+  .list-variant-root--first > .list-item:first-child > & {
+    margin-block-start: 0px;
+  }
 }
 .section-group-title {
-  /* used in test-utils */
+  display: flex;
+  align-items: center;
+  margin-block: 0;
 }
+// ==========================================================================
+// Links — all links use awsui.$size-side-navigation-item-height for consistent row sizing and collapse icon size.
+// ==========================================================================
 .link {
   @include styles.font-body-m;
   color: awsui.$color-text-body-secondary;
+  display: inline-flex;
+  padding-block: $item-padding-block;
+  min-inline-size: awsui.$size-side-navigation-item-height;
+  padding-inline: $item-padding-inline;
+  margin-inline: calc(-1 * #{$item-padding-inline});
+  align-items: flex-start;
+  @include item-radius;
   font-weight: styles.$font-weight-normal;
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
-}
+  @include styles.with-motion {
+    transition:
+      background-color awsui.$motion-duration-expressive awsui.$motion-easing-responsive,
+      color awsui.$motion-duration-expressive awsui.$motion-easing-expressive;
+  }
+  &-active {
+    font-weight: awsui.$font-wayfinding-link-active-weight;
+    @include styles.font-smoothing;
+    color: awsui.$color-text-side-navigation-item-active;
+    background-color: awsui.$color-background-side-navigation-item-active;
+  }
-.link-active {
-  font-weight: awsui.$font-wayfinding-link-active-weight;
-  @include styles.font-smoothing;
-  color: awsui.$color-text-accent;
+  &--collapsed {
+    padding-inline: 0;
+    margin-inline: 0;
+    justify-content: center;
+    align-items: center;
+  }
 }
 .header-link,
@@ -165,7 +321,7 @@
   text-decoration: none;
   &:hover {
-    color: awsui.$color-text-accent;
+    color: awsui.$color-text-side-navigation-item-active;
   }
   &:focus {
@@ -182,8 +338,24 @@
   }
 }
+// ==========================================================================
+// Misc
+// ==========================================================================
+.link-text-wrapper {
+  min-inline-size: 0;
+}
 .info {
-  margin-inline-start: awsui.$space-xs;
+  margin-inline-start: awsui.$space-s;
+  flex-shrink: 0;
+}
+.item-icon {
+  display: inline-flex;
+  flex-shrink: 0;
+  &:not(.item-icon--collapsed) {
+    margin-inline-end: $item-icon-text-gap;
+  }
 }
 .external-icon {
@@ -193,18 +365,19 @@
 .divider {
   border-block: none;
   border-inline: none;
-}
-.divider-default {
-  margin-block: awsui.$space-scaled-2x-xl;
-  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: 0;
-  border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
-  .with-toolbar > & {
-    border-color: transparent;
+  &-default {
+    margin-block: calc(#{awsui.$space-scaled-2x-xl} - #{$item-padding-block});
+    border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    &.divider--collapsed {
+      margin-block: awsui.$space-scaled-2x-m;
+      margin-inline: awsui.$space-xs;
+    }
+  }
+  &-header {
+    margin-block: 0;
+    border-block-start: awsui.$border-divider-section-width solid awsui.$color-border-panel-header;
+    .with-toolbar > & {
+      border-color: transparent;
+    }
   }
 }

package/lib/internal/scss/side-navigation/test-classes/styles.scss CHANGED Viewed

@@ -5,3 +5,7 @@
 .info {
   /* used in test-utils */
 }
+.item-icon {
+  /* used in test-utils */
+}

package/lib/internal/scss/top-navigation/test-classes/styles.scss ADDED Viewed

@@ -0,0 +1,8 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.custom-content {
+  /* used in test-utils */
+}

package/lib/internal/template/file-token-group/file-token.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"file-token.d.ts","sourceRoot":"","sources":["../../../src/file-token-group/file-token.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAOhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAIzE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAQ/D,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,WAAW;QAC1B,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;QACtE,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,MAAM,CAAC;QACjD,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;KACjD;CACF;AAED,UAAU,cAAe,SAAQ,kBAAkB;IACjD,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,iBAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,oBAAoB,EACpB,YAAY,EACZ,iBAAiB,EACjB,WAAW,EACX,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,OAAO,EACP,SAAS,EACT,kBAAkB,EAClB,OAAO,EACP,KAAK,GACN,EAAE,cAAc,~~eA6IhB~~;AAED,eAAe,iBAAiB,CAAC"}
1	+ {"version":3,"file":"file-token.d.ts","sourceRoot":"","sources":["../../../src/file-token-group/file-token.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAOhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAIzE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAQ/D,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,WAAW;QAC1B,mBAAmB,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;QACtE,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAC9B,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,MAAM,CAAC;QACjD,sBAAsB,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAC;KACjD;CACF;AAED,UAAU,cAAe,SAAQ,kBAAkB;IACjD,IAAI,EAAE,IAAI,CAAC;IACX,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,iBAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,oBAAoB,EACpB,YAAY,EACZ,iBAAiB,EACjB,WAAW,EACX,SAAS,EACT,SAAS,EACT,WAAW,EACX,QAAQ,EACR,OAAO,EACP,SAAS,EACT,kBAAkB,EAClB,OAAO,EACP,KAAK,GACN,EAAE,cAAc,eAuJhB;AAED,eAAe,iBAAiB,CAAC"}

package/lib/internal/template/file-token-group/file-token.js CHANGED Viewed

@@ -7,7 +7,7 @@ import InternalBox from '../box/internal.js';
 import { FormFieldError, FormFieldWarning } from '../form-field/internal';
 import InternalSpaceBetween from '../space-between/internal.js';
 import InternalSpinner from '../spinner/internal.js';
-import DismissButton from '../token/dismiss-button.js';
+import InternalToken from '../token/internal.js';
 import Tooltip from '../tooltip/internal.js';
 import * as defaultFormatters from './default-formatters.js';
 import { FileOptionThumbnail } from './thumbnail.js';
@@ -25,10 +25,7 @@ function InternalFileToken({ file, showFileLastModified, showFileSize, showFileT
     const fileNameContainerRef = useRef(null);
     const [showTooltip, setShowTooltip] = useState(false);
     const [isTruncated, setIsTruncated] = useState(false);
-    const getDismissLabel = (fileIndex) => {
-        var _a;
-        return (_a = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.removeFileAriaLabel) === null || _a === void 0 ? void 0 : _a.call(i18nStrings, fileIndex, file.name);
-    };
+    const getDismissLabel = (fileIndex) => { var _a; return (_a = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.removeFileAriaLabel) === null || _a === void 0 ? void 0 : _a.call(i18nStrings, fileIndex, file.name); };
     function isEllipsisActive() {
         const span = fileNameRef.current;
         const container = fileNameContainerRef.current;
@@ -39,36 +36,45 @@ function InternalFileToken({ file, showFileLastModified, showFileSize, showFileT
     }
     useResizeObserver(() => fileNameContainerRef.current, () => setIsTruncated(isEllipsisActive()));
     const fileIsSingleRow = !showFileLastModified && !showFileSize && (!groupContainsImage || (groupContainsImage && !showFileThumbnail));
+    // The full body of the token. Rendered through InternalToken's customContent slot so this
+    // component owns the inner layout (thumbnail + metadata column + loading overlay), while
+    // InternalToken handles the token-box and the dismiss button.
+    const fileContent = (React.createElement(React.Fragment, null,
+        loading && (React.createElement("div", { className: clsx(styles['file-loading-overlay'], {
+                [styles['file-loading-overlay-single-row']]: loading && fileIsSingleRow,
+            }) },
+            React.createElement(InternalSpinner, { variant: "normal", size: "normal" }))),
+        React.createElement(InternalBox, { className: styles['file-option'] },
+            showFileThumbnail && isImage && React.createElement(FileOptionThumbnail, { file: file }),
+            React.createElement("div", { className: clsx(styles['file-option-metadata'], {
+                    [styles['with-image']]: showFileThumbnail && isImage,
+                    [styles['single-row-loading']]: loading && fileIsSingleRow,
+                }) },
+                React.createElement(InternalSpaceBetween, { direction: "vertical", size: "xxxs" },
+                    React.createElement("div", { className: styles['file-name-container'], onMouseOver: () => setShowTooltip(true), onMouseOut: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), role: isTruncated ? 'button' : undefined, "aria-expanded": isTruncated ? showTooltip : undefined, tabIndex: isTruncated ? 0 : -1, ref: fileNameContainerRef },
+                        React.createElement(InternalBox, { fontWeight: "normal", className: clsx(styles['file-option-name'], testUtilStyles['file-option-name'], {
+                                [testUtilStyles['ellipsis-active']]: isTruncated,
+                            }) },
+                            React.createElement("span", { ref: fileNameRef }, file.name))),
+                    showFileSize && file.size ? (React.createElement(InternalBox, { fontSize: "body-s", color: 'text-body-secondary', className: clsx(styles['file-option-size'], testUtilStyles['file-option-size']) }, formatFileSize(file.size))) : null,
+                    showFileLastModified && file.lastModified ? (React.createElement(InternalBox, { fontSize: "body-s", color: 'text-body-secondary', className: clsx(styles['file-option-last-modified'], testUtilStyles['file-option-last-modified']) }, formatFileLastModified(new Date(file.lastModified)))) : null)))));
     return (React.createElement("div", { ref: containerRef, className: clsx(styles.token, {
             [styles['token-grid']]: alignment === 'horizontal',
             [styles['token-contains-image']]: groupContainsImage && showFileThumbnail,
-        }), role: "group", "aria-label": file.name, "aria-describedby": errorText ? errorId : warningText ? warningId : undefined, "aria-disabled": loading, "data-index": index },
-        React.createElement("div", { className: clsx(styles['token-box'], {
+        }), role: "group", "aria-label": file.name, "aria-describedby": errorText ? errorId : warningText ? warningId : undefined, "aria-disabled": loading || undefined, "data-index": index },
+        React.createElement(InternalToken
+        // The outer wrapper above is the accessibility group (role="group" + aria-label). The
+        // token itself is presentation-only so screen readers don't see two nested groups.
+        , {
+            // The outer wrapper above is the accessibility group (role="group" + aria-label). The
+            // token itself is presentation-only so screen readers don't see two nested groups.
+            role: "presentation", __customContent: fileContent, onDismiss: readOnly ? undefined : onDismiss, dismissLabel: getDismissLabel(index), __tokenBoxClassName: clsx(styles['token-box'], {
                 [styles.loading]: loading,
                 [styles.error]: errorText,
                 [styles.warning]: showWarning,
                 [styles.horizontal]: alignment === 'horizontal',
                 [styles['read-only']]: readOnly,
-            }) },
-            loading && (React.createElement("div", { className: clsx(styles['file-loading-overlay'], {
-                    [styles['file-loading-overlay-single-row']]: loading && fileIsSingleRow,
-                }) },
-                React.createElement(InternalSpinner, { variant: "normal", size: "normal" }))),
-            React.createElement(InternalBox, { className: styles['file-option'] },
-                showFileThumbnail && isImage && React.createElement(FileOptionThumbnail, { file: file }),
-                React.createElement("div", { className: clsx(styles['file-option-metadata'], {
-                        [styles['with-image']]: showFileThumbnail && isImage,
-                        [styles['single-row-loading']]: loading && fileIsSingleRow,
-                    }) },
-                    React.createElement(InternalSpaceBetween, { direction: "vertical", size: "xxxs" },
-                        React.createElement("div", { className: styles['file-name-container'], onMouseOver: () => setShowTooltip(true), onMouseOut: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), role: isTruncated ? 'button' : undefined, "aria-expanded": isTruncated ? showTooltip : undefined, tabIndex: isTruncated ? 0 : -1, ref: fileNameContainerRef },
-                            React.createElement(InternalBox, { fontWeight: "normal", className: clsx(styles['file-option-name'], testUtilStyles['file-option-name'], {
-                                    [testUtilStyles['ellipsis-active']]: isTruncated,
-                                }) },
-                                React.createElement("span", { ref: fileNameRef }, file.name))),
-                        showFileSize && file.size ? (React.createElement(InternalBox, { fontSize: "body-s", color: 'text-body-secondary', className: clsx(styles['file-option-size'], testUtilStyles['file-option-size']) }, formatFileSize(file.size))) : null,
-                        showFileLastModified && file.lastModified ? (React.createElement(InternalBox, { fontSize: "body-s", color: 'text-body-secondary', className: clsx(styles['file-option-last-modified'], testUtilStyles['file-option-last-modified']) }, formatFileLastModified(new Date(file.lastModified)))) : null))),
-            onDismiss && !readOnly && React.createElement(DismissButton, { dismissLabel: getDismissLabel(index), onDismiss: onDismiss })),
+            }) }),
         errorText && (React.createElement(FormFieldError, { id: errorId, errorIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.errorIconAriaLabel }, errorText)),
         showWarning && (React.createElement(FormFieldWarning, { id: warningId, warningIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.warningIconAriaLabel }, warningText)),
         showTooltip && isTruncated && (React.createElement(Tooltip, { getTrack: () => containerRef.current, content: React.createElement(InternalBox, { fontWeight: "normal" }, file.name), onEscape: () => setShowTooltip(false) }))));

package/lib/internal/template/file-token-group/file-token.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"file-token.js","sourceRoot":"","sources":["../../../src/file-token-group/file-token.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../box/internal.js';\nimport { FormFieldError, FormFieldWarning } from '../form-field/internal';\nimport { BaseComponentProps } from '../internal/base-component/index.js';\nimport InternalSpaceBetween from '../space-between/internal.js';\nimport InternalSpinner from '../spinner/internal.js';\nimport DismissButton from '../token/dismiss-button.js';\nimport { TokenGroupProps } from '../token-group/interfaces.js';\nimport Tooltip from '../tooltip/internal.js';\nimport * as defaultFormatters from './default-formatters.js';\nimport { FileOptionThumbnail } from './thumbnail.js';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\nexport namespace FileTokenProps {\n export interface I18nStrings {\n removeFileAriaLabel?: (fileIndex: number, fileName: string) => string;\n errorIconAriaLabel?: string;\n warningIconAriaLabel?: string;\n formatFileSize?: (sizeInBytes: number) => string;\n formatFileLastModified?: (date: Date) => string;\n }\n}\n\ninterface FileTokenProps extends BaseComponentProps {\n file: File;\n onDismiss: () => void;\n showFileSize?: boolean;\n showFileLastModified?: boolean;\n showFileThumbnail?: boolean;\n errorText?: React.ReactNode;\n warningText?: React.ReactNode;\n loading?: boolean;\n readOnly?: boolean;\n i18nStrings?: FileTokenProps.I18nStrings;\n dismissLabel?: string;\n alignment?: TokenGroupProps.Alignment;\n groupContainsImage?: boolean;\n isImage: boolean;\n index: number;\n}\n\nfunction InternalFileToken({\n file,\n showFileLastModified,\n showFileSize,\n showFileThumbnail,\n i18nStrings,\n onDismiss,\n errorText,\n warningText,\n readOnly,\n loading,\n alignment,\n groupContainsImage,\n isImage,\n index,\n}: FileTokenProps) {\n const formatFileSize = i18nStrings?.formatFileSize ?? defaultFormatters.formatFileSize;\n const formatFileLastModified = i18nStrings?.formatFileLastModified ?? defaultFormatters.formatFileLastModified;\n\n const errorId = useUniqueId('error');\n const warningId = useUniqueId('warning');\n\n const showWarning = warningText && !errorText;\n const containerRef = useRef<HTMLDivElement>(null);\n const fileNameRef = useRef<HTMLSpanElement>(null);\n const fileNameContainerRef = useRef<HTMLDivElement>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n const [isTruncated, setIsTruncated] = useState(false);\n\n const getDismissLabel = (fileIndex: number) => {\n return i18nStrings?.removeFileAriaLabel?.(fileIndex, file.name);\n };\n\n function isEllipsisActive() {\n const span = fileNameRef.current;\n const container = fileNameContainerRef.current;\n\n if (span && container) {\n return span.offsetWidth >= container.offsetWidth;\n }\n return false;\n }\n\n useResizeObserver(\n () => fileNameContainerRef.current,\n () => setIsTruncated(isEllipsisActive())\n );\n\n const fileIsSingleRow =\n !showFileLastModified && !showFileSize && (!groupContainsImage \|\| (groupContainsImage && !showFileThumbnail));\n\n return (\n <div\n ref={containerRef}\n className={clsx(styles.token, {\n [styles['token-grid']]: alignment === 'horizontal',\n [styles['token-contains-image']]: groupContainsImage && showFileThumbnail,\n })}\n role=\"group\"\n aria-label={file.name}\n aria-describedby={errorText ? errorId : warningText ? warningId : undefined}\n aria-disabled={loading}\n data-index={index}\n >\n <div\n className={clsx(styles['token-box'], {\n [styles.loading]: loading,\n [styles.error]: errorText,\n [styles.warning]: showWarning,\n [styles.horizontal]: alignment === 'horizontal',\n [styles['read-only']]: readOnly,\n })}\n >\n {loading && (\n <div\n className={clsx(styles['file-loading-overlay'], {\n [styles['file-loading-overlay-single-row']]: loading && fileIsSingleRow,\n })}\n >\n <InternalSpinner variant=\"normal\" size=\"normal\" />\n </div>\n )}\n <InternalBox className={styles['file-option']}>\n {showFileThumbnail && isImage && <FileOptionThumbnail file={file} />}\n\n <div\n className={clsx(styles['file-option-metadata'], {\n [styles['with-image']]: showFileThumbnail && isImage,\n [styles['single-row-loading']]: loading && fileIsSingleRow,\n })}\n >\n <InternalSpaceBetween direction=\"vertical\" size=\"xxxs\">\n <div\n className={styles['file-name-container']}\n onMouseOver={() => setShowTooltip(true)}\n onMouseOut={() => setShowTooltip(false)}\n onFocus={() => setShowTooltip(true)}\n onBlur={() => setShowTooltip(false)}\n role={isTruncated ? 'button' : undefined}\n aria-expanded={isTruncated ? showTooltip : undefined}\n tabIndex={isTruncated ? 0 : -1}\n ref={fileNameContainerRef}\n >\n <InternalBox\n fontWeight=\"normal\"\n className={clsx(styles['file-option-name'], testUtilStyles['file-option-name'], {\n [testUtilStyles['ellipsis-active']]: isTruncated,\n })}\n >\n <span ref={fileNameRef}>{file.name}</span>\n </InternalBox>\n </div>\n\n {showFileSize && file.size ? (\n <InternalBox\n fontSize=\"body-s\"\n color={'text-body-secondary'}\n className={clsx(styles['file-option-size'], testUtilStyles['file-option-size'])}\n >\n {formatFileSize(file.size)}\n </InternalBox>\n ) : null}\n\n {showFileLastModified && file.lastModified ? (\n <InternalBox\n fontSize=\"body-s\"\n color={'text-body-secondary'}\n className={clsx(styles['file-option-last-modified'], testUtilStyles['file-option-last-modified'])}\n >\n {formatFileLastModified(new Date(file.lastModified))}\n </InternalBox>\n ) : null}\n </InternalSpaceBetween>\n </div>\n </InternalBox>\n {onDismiss && !readOnly && <DismissButton dismissLabel={getDismissLabel(index)} onDismiss={onDismiss} />}\n </div>\n {errorText && (\n <FormFieldError id={errorId} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {showWarning && (\n <FormFieldWarning id={warningId} warningIconAriaLabel={i18nStrings?.warningIconAriaLabel}>\n {warningText}\n </FormFieldWarning>\n )}\n {showTooltip && isTruncated && (\n <Tooltip\n getTrack={() => containerRef.current}\n content={<InternalBox fontWeight=\"normal\">{file.name}</InternalBox>}\n onEscape={() => setShowTooltip(false)}\n />\n )}\n </div>\n );\n}\n\nexport default InternalFileToken;\n"]}
1	+ {"version":3,"file":"file-token.js","sourceRoot":"","sources":["../../../src/file-token-group/file-token.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useResizeObserver, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../box/internal.js';\nimport { FormFieldError, FormFieldWarning } from '../form-field/internal';\nimport { BaseComponentProps } from '../internal/base-component/index.js';\nimport InternalSpaceBetween from '../space-between/internal.js';\nimport InternalSpinner from '../spinner/internal.js';\nimport InternalToken from '../token/internal.js';\nimport { TokenGroupProps } from '../token-group/interfaces.js';\nimport Tooltip from '../tooltip/internal.js';\nimport * as defaultFormatters from './default-formatters.js';\nimport { FileOptionThumbnail } from './thumbnail.js';\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\nexport namespace FileTokenProps {\n export interface I18nStrings {\n removeFileAriaLabel?: (fileIndex: number, fileName: string) => string;\n errorIconAriaLabel?: string;\n warningIconAriaLabel?: string;\n formatFileSize?: (sizeInBytes: number) => string;\n formatFileLastModified?: (date: Date) => string;\n }\n}\n\ninterface FileTokenProps extends BaseComponentProps {\n file: File;\n onDismiss: () => void;\n showFileSize?: boolean;\n showFileLastModified?: boolean;\n showFileThumbnail?: boolean;\n errorText?: React.ReactNode;\n warningText?: React.ReactNode;\n loading?: boolean;\n readOnly?: boolean;\n i18nStrings?: FileTokenProps.I18nStrings;\n dismissLabel?: string;\n alignment?: TokenGroupProps.Alignment;\n groupContainsImage?: boolean;\n isImage: boolean;\n index: number;\n}\n\nfunction InternalFileToken({\n file,\n showFileLastModified,\n showFileSize,\n showFileThumbnail,\n i18nStrings,\n onDismiss,\n errorText,\n warningText,\n readOnly,\n loading,\n alignment,\n groupContainsImage,\n isImage,\n index,\n}: FileTokenProps) {\n const formatFileSize = i18nStrings?.formatFileSize ?? defaultFormatters.formatFileSize;\n const formatFileLastModified = i18nStrings?.formatFileLastModified ?? defaultFormatters.formatFileLastModified;\n\n const errorId = useUniqueId('error');\n const warningId = useUniqueId('warning');\n\n const showWarning = warningText && !errorText;\n const containerRef = useRef<HTMLDivElement>(null);\n const fileNameRef = useRef<HTMLSpanElement>(null);\n const fileNameContainerRef = useRef<HTMLDivElement>(null);\n const [showTooltip, setShowTooltip] = useState(false);\n const [isTruncated, setIsTruncated] = useState(false);\n\n const getDismissLabel = (fileIndex: number) => i18nStrings?.removeFileAriaLabel?.(fileIndex, file.name);\n\n function isEllipsisActive() {\n const span = fileNameRef.current;\n const container = fileNameContainerRef.current;\n\n if (span && container) {\n return span.offsetWidth >= container.offsetWidth;\n }\n return false;\n }\n\n useResizeObserver(\n () => fileNameContainerRef.current,\n () => setIsTruncated(isEllipsisActive())\n );\n\n const fileIsSingleRow =\n !showFileLastModified && !showFileSize && (!groupContainsImage \|\| (groupContainsImage && !showFileThumbnail));\n\n // The full body of the token. Rendered through InternalToken's customContent slot so this\n // component owns the inner layout (thumbnail + metadata column + loading overlay), while\n // InternalToken handles the token-box and the dismiss button.\n const fileContent = (\n <>\n {loading && (\n <div\n className={clsx(styles['file-loading-overlay'], {\n [styles['file-loading-overlay-single-row']]: loading && fileIsSingleRow,\n })}\n >\n <InternalSpinner variant=\"normal\" size=\"normal\" />\n </div>\n )}\n <InternalBox className={styles['file-option']}>\n {showFileThumbnail && isImage && <FileOptionThumbnail file={file} />}\n\n <div\n className={clsx(styles['file-option-metadata'], {\n [styles['with-image']]: showFileThumbnail && isImage,\n [styles['single-row-loading']]: loading && fileIsSingleRow,\n })}\n >\n <InternalSpaceBetween direction=\"vertical\" size=\"xxxs\">\n <div\n className={styles['file-name-container']}\n onMouseOver={() => setShowTooltip(true)}\n onMouseOut={() => setShowTooltip(false)}\n onFocus={() => setShowTooltip(true)}\n onBlur={() => setShowTooltip(false)}\n role={isTruncated ? 'button' : undefined}\n aria-expanded={isTruncated ? showTooltip : undefined}\n tabIndex={isTruncated ? 0 : -1}\n ref={fileNameContainerRef}\n >\n <InternalBox\n fontWeight=\"normal\"\n className={clsx(styles['file-option-name'], testUtilStyles['file-option-name'], {\n [testUtilStyles['ellipsis-active']]: isTruncated,\n })}\n >\n <span ref={fileNameRef}>{file.name}</span>\n </InternalBox>\n </div>\n\n {showFileSize && file.size ? (\n <InternalBox\n fontSize=\"body-s\"\n color={'text-body-secondary'}\n className={clsx(styles['file-option-size'], testUtilStyles['file-option-size'])}\n >\n {formatFileSize(file.size)}\n </InternalBox>\n ) : null}\n\n {showFileLastModified && file.lastModified ? (\n <InternalBox\n fontSize=\"body-s\"\n color={'text-body-secondary'}\n className={clsx(styles['file-option-last-modified'], testUtilStyles['file-option-last-modified'])}\n >\n {formatFileLastModified(new Date(file.lastModified))}\n </InternalBox>\n ) : null}\n </InternalSpaceBetween>\n </div>\n </InternalBox>\n </>\n );\n\n return (\n <div\n ref={containerRef}\n className={clsx(styles.token, {\n [styles['token-grid']]: alignment === 'horizontal',\n [styles['token-contains-image']]: groupContainsImage && showFileThumbnail,\n })}\n role=\"group\"\n aria-label={file.name}\n aria-describedby={errorText ? errorId : warningText ? warningId : undefined}\n aria-disabled={loading \|\| undefined}\n data-index={index}\n >\n <InternalToken\n // The outer wrapper above is the accessibility group (role=\"group\" + aria-label). The\n // token itself is presentation-only so screen readers don't see two nested groups.\n role=\"presentation\"\n __customContent={fileContent}\n onDismiss={readOnly ? undefined : onDismiss}\n dismissLabel={getDismissLabel(index)}\n __tokenBoxClassName={clsx(styles['token-box'], {\n [styles.loading]: loading,\n [styles.error]: errorText,\n [styles.warning]: showWarning,\n [styles.horizontal]: alignment === 'horizontal',\n [styles['read-only']]: readOnly,\n })}\n />\n {errorText && (\n <FormFieldError id={errorId} errorIconAriaLabel={i18nStrings?.errorIconAriaLabel}>\n {errorText}\n </FormFieldError>\n )}\n {showWarning && (\n <FormFieldWarning id={warningId} warningIconAriaLabel={i18nStrings?.warningIconAriaLabel}>\n {warningText}\n </FormFieldWarning>\n )}\n {showTooltip && isTruncated && (\n <Tooltip\n getTrack={() => containerRef.current}\n content={<InternalBox fontWeight=\"normal\">{file.name}</InternalBox>}\n onEscape={() => setShowTooltip(false)}\n />\n )}\n </div>\n );\n}\n\nexport default InternalFileToken;\n"]}