@cloudscape-design/components-themeable 3.0.836 → 3.0.838

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "89c8f435bbf69639e0fc84b39b7c783c4131f581"
+  "commit": "5aefc242c6b2e2cf4562591f67d98690ec7111b3"
 }

package/lib/internal/scss/internal/components/file-token-group/constants.scss

@@ -0,0 +1,14 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../styles/tokens' as awsui;
+
+$image-size: 48px;
+$file-token-height: 68px;
+$compact-token-width: 230px;
+$spinner-size: awsui.$size-icon-normal;
+
+$token-background: awsui.$color-background-item-selected;
+$token-border-color: awsui.$color-border-item-selected;

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

@@ -0,0 +1,143 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../styles/tokens' as awsui;
+@use '../../styles' as styles;
+@use './constants' as constants;
+@use '../../../token-group/mixins.scss' as mixins;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
+
+@mixin token-box-validation {
+  border-inline-start-width: awsui.$border-invalid-width;
+
+  > .dismiss-button {
+    color: awsui.$color-text-interactive-default;
+    &:hover {
+      color: awsui.$color-text-interactive-hover;
+    }
+  }
+}
+
+.root {
+  @include styles.styles-reset();
+}
+
+.file-loading-overlay {
+  position: absolute;
+  inset-inline-end: awsui.$space-static-xs;
+  inset-block-end: awsui.$space-static-xxs;
+
+  &-single-row {
+    inset-inline-end: awsui.$space-static-xxl;
+  }
+}
+
+.file-option-name,
+.file-option-size,
+.file-option-last-modified {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.file-option {
+  inline-size: 100%;
+  min-inline-size: 0;
+  display: flex;
+  gap: awsui.$space-scaled-xs;
+}
+
+.file-option-thumbnail {
+  margin-block-start: awsui.$space-static-xxs;
+}
+
+.file-option-thumbnail-image {
+  @include styles.font-body-s;
+
+  inline-size: constants.$image-size;
+  block-size: constants.$image-size;
+  object-fit: cover;
+
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.file-option-metadata {
+  inline-size: 100%;
+
+  &.with-image {
+    inline-size: calc(100% - constants.$image-size);
+  }
+
+  &.single-row-loading {
+    inline-size: calc(100% - constants.$spinner-size);
+  }
+}
+
+.token {
+  position: relative;
+  block-size: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: awsui.$space-xxs;
+
+  &-grid {
+    display: grid;
+    grid-template-rows: max-content auto;
+
+    @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
+      display: flex;
+    }
+  }
+
+  &-contains-image {
+    grid-template-rows: constants.$file-token-height auto;
+  }
+}
+
+.token-box {
+  @include mixins.token-box-styles();
+
+  &.horizontal {
+    max-inline-size: constants.$compact-token-width;
+
+    @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
+      max-inline-size: 100%;
+    }
+  }
+
+  &.error {
+    border-color: awsui.$color-border-status-error;
+    @include token-box-validation;
+  }
+
+  &.warning {
+    border-color: awsui.$color-border-status-warning;
+    @include token-box-validation;
+  }
+
+  &.read-only {
+    border-color: awsui.$color-border-input-disabled;
+    background-color: awsui.$color-background-container-content;
+    pointer-events: none;
+
+    > .dismiss-button {
+      color: awsui.$color-text-button-inline-icon-disabled;
+
+      &:hover {
+        /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+        cursor: initial;
+        color: awsui.$color-text-button-inline-icon-disabled;
+      }
+    }
+  }
+
+  &.loading {
+    border-color: awsui.$color-border-control-disabled;
+    background-color: awsui.$color-background-container-content;
+  }
+}

package/lib/internal/scss/internal/components/file-token-group/test-classes/styles.scss

@@ -0,0 +1,12 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.root,
+.file-option-thumbnail,
+.file-option-name,
+.file-option-size,
+.file-option-last-modified,
+.ellipsis-active {
+  /* used in test-utils */
+}

package/lib/internal/scss/internal/components/token-list/styles.scss

@@ -5,18 +5,20 @@
 
 @use '../../styles/tokens' as awsui;
 @use '../../styles' as styles;
+@use '../../../internal/components/file-token-group/constants' as constants;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
 .root {
-  display: flex;
   gap: awsui.$space-scaled-xs;
 
   &.horizontal {
+    display: flex;
     gap: awsui.$space-xs;
     flex-direction: row;
     flex-wrap: wrap;
   }
   &.vertical {
+    display: flex;
     flex-direction: column;
   }
 }
@@ -41,6 +43,16 @@
   &.vertical {
     flex-direction: column;
   }
+  &.grid {
+    display: grid;
+    gap: awsui.$space-xs;
+    grid-template-columns: repeat(auto-fill, constants.$compact-token-width);
+
+    @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
+      display: flex;
+      flex-direction: column;
+    }
+  }
 }
 
 .list-item {

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

@@ -7,5 +7,4 @@
 @use '../internal/styles/tokens' as awsui;
 
 $token-background: awsui.$color-background-item-selected;
-
 $token-border-color: awsui.$color-border-item-selected;

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

@@ -0,0 +1,27 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '../internal/styles' as styles;
+@use '../internal/styles/tokens' as awsui;
+@use './constants' as constants;
+
+@mixin token-box-styles {
+  position: relative;
+  block-size: 100%;
+  border-block: awsui.$border-field-width solid constants.$token-border-color;
+  border-inline: awsui.$border-field-width solid constants.$token-border-color;
+  padding-block-start: styles.$control-padding-vertical;
+  padding-block-end: styles.$control-padding-vertical;
+  padding-inline-start: styles.$control-padding-horizontal;
+  padding-inline-end: awsui.$space-xxs;
+  display: flex;
+  align-items: flex-start;
+  background: constants.$token-background;
+  border-start-start-radius: awsui.$border-radius-token;
+  border-start-end-radius: awsui.$border-radius-token;
+  border-end-start-radius: awsui.$border-radius-token;
+  border-end-end-radius: awsui.$border-radius-token;
+  color: awsui.$color-text-body-default;
+  box-sizing: border-box;
+}

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

@@ -7,6 +7,7 @@
 @use '../internal/styles/tokens' as awsui;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 @use './constants' as constants;
+@use './mixins.scss' as mixins;
 
 .root {
   @include styles.styles-reset;
@@ -51,41 +52,9 @@
 }
 
 .token-box {
-  block-size: 100%;
-  border-block: awsui.$border-field-width solid constants.$token-border-color;
-  border-inline: awsui.$border-field-width solid constants.$token-border-color;
-  padding-block-start: styles.$control-padding-vertical;
-  padding-block-end: styles.$control-padding-vertical;
-  padding-inline-start: styles.$control-padding-horizontal;
-  padding-inline-end: awsui.$space-xxs;
-  display: flex;
-  align-items: flex-start;
-  background: constants.$token-background;
-  border-start-start-radius: awsui.$border-radius-token;
-  border-start-end-radius: awsui.$border-radius-token;
-  border-end-start-radius: awsui.$border-radius-token;
-  border-end-end-radius: awsui.$border-radius-token;
-  color: awsui.$color-text-body-default;
-  box-sizing: border-box;
+  @include mixins.token-box-styles();
 }
-@mixin token-box-validation {
-  border-inline-start-width: awsui.$border-invalid-width;
 
-  > .dismiss-button {
-    color: awsui.$color-text-interactive-default;
-    &:hover {
-      color: awsui.$color-text-interactive-hover;
-    }
-  }
-}
-.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-readonly {
   border-color: awsui.$color-border-input-disabled;
   background-color: awsui.$color-background-container-content;

package/lib/internal/template/file-upload/interfaces.d.ts

@@ -61,6 +61,10 @@ export interface FileUploadProps extends BaseComponentProps, FormFieldCommonVali
      * An array of file warnings corresponding to the files in the `value`.
      */
     fileWarnings?: ReadonlyArray<null | string>;
+    /**
+     * Alignment of the file tokens. Defaults to "vertical".
+     */
+    fileTokenAlignment?: FileUploadProps.FileTokenAlignment;
     /**
      * An object containing all the localized strings required by the component:
      * * `uploadButtonText` (function): A function to render the text of the file upload button. It takes `multiple` attribute to define plurality.
@@ -83,6 +87,7 @@ export declare namespace FileUploadProps {
         index: number;
         file: File;
     }
+    type FileTokenAlignment = 'vertical' | 'horizontal';
     interface I18nStrings {
         uploadButtonText: (multiple: boolean) => string;
         dropzoneText: (multiple: boolean) => string;

package/lib/internal/template/file-upload/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/file-upload/interfaces.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,qCAAqC,EAAE,MAAM,wCAAwC,CAAC;AAC/F,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,qCAAqC;IAChG;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;IACnE;;;OAGG;IACH,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IAC1C;;OAEG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IAC5C;;;;;;;;;;;OAWG;IACH,WAAW,EAAE,eAAe,CAAC,WAAW,CAAC;CAC1C;AAED,yBAAiB,eAAe,CAAC;IAC/B,UAAiB,YAAY;QAC3B,KAAK,EAAE,IAAI,EAAE,CAAC;KACf;IAED,UAAiB,aAAa;QAC5B,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,IAAI,CAAC;KACZ;IAED,UAAiB,WAAW;QAC1B,gBAAgB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,MAAM,CAAC;QAChD,YAAY,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,MAAM,CAAC;QAC5C,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;QACnD,cAAc,EAAE,MAAM,CAAC;QACvB,aAAa,EAAE,MAAM,CAAC;QACtB,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;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF;AAED,MAAM,WAAW,YAAY;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/file-upload/interfaces.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,qCAAqC,EAAE,MAAM,wCAAwC,CAAC;AAC/F,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,eAAgB,SAAQ,kBAAkB,EAAE,qCAAqC;IAChG;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC;IACnE;;;OAGG;IACH,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,UAAU,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IAC1C;;OAEG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IAC5C;;OAEG;IACH,kBAAkB,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC;IACxD;;;;;;;;;;;OAWG;IACH,WAAW,EAAE,eAAe,CAAC,WAAW,CAAC;CAC1C;AAED,yBAAiB,eAAe,CAAC;IAC/B,UAAiB,YAAY;QAC3B,KAAK,EAAE,IAAI,EAAE,CAAC;KACf;IAED,UAAiB,aAAa;QAC5B,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,IAAI,CAAC;KACZ;IAED,KAAY,kBAAkB,GAAG,UAAU,GAAG,YAAY,CAAC;IAE3D,UAAiB,WAAW;QAC1B,gBAAgB,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,MAAM,CAAC;QAChD,YAAY,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,MAAM,CAAC;QAC5C,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;QACnD,cAAc,EAAE,MAAM,CAAC;QACvB,aAAa,EAAE,MAAM,CAAC;QACtB,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;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF;AAED,MAAM,WAAW,YAAY;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B"}

package/lib/internal/template/file-upload/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/file-upload/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { FormFieldCommonValidationControlProps } from '../internal/context/form-field-context';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface FileUploadProps extends BaseComponentProps, FormFieldCommonValidationControlProps {\n  /**\n   * Specifies the native file input `accept` attribute to describe the allow-list of file types.\n   */\n  accept?: string;\n  /**\n   * Specifies whether to add aria-required to the file upload control.\n   */\n  ariaRequired?: boolean;\n  /**\n   * Show file size in the token. Use `i18nStrings.formatFileSize` to customize it.\n   */\n  showFileSize?: boolean;\n  /**\n   * Show file last modified timestamp in the token. Use `i18nStrings.formatFileLastModified` to customize it.\n   */\n  showFileLastModified?: boolean;\n  /**\n   * Show file thumbnail in the token. Only supported for images.\n   */\n  showFileThumbnail?: boolean;\n  /**\n   * Specifies the native file input `multiple` attribute to allow users entering more than one file.\n   */\n  multiple?: boolean;\n  /**\n   * Called when the user selects new file(s), or removes a file.\n   * The event `detail` contains the current value of the component.\n   */\n  onChange?: NonCancelableEventHandler<FileUploadProps.ChangeDetail>;\n  /**\n   * Specifies the currently selected file(s).\n   * If you want to clear the selection, use empty array.\n   */\n  value: ReadonlyArray<File>;\n  /**\n   * Specifies the maximum number of displayed file tokens. If the property isn't set, all of the tokens are displayed.\n   */\n  tokenLimit?: number;\n  /**\n   * Constraint text that is displayed below the control. Use this to provide additional information about file size limit, etc.\n   */\n  constraintText?: React.ReactNode;\n  /**\n   * Text that displays as a validation error message.\n   */\n  errorText?: React.ReactNode;\n  /**\n   * Text that displays as a validation warning message.\n   */\n  warningText?: React.ReactNode;\n  /**\n   * An array of file errors corresponding to the files in the `value`.\n   */\n  fileErrors?: ReadonlyArray<null | string>;\n  /**\n   * An array of file warnings corresponding to the files in the `value`.\n   */\n  fileWarnings?: ReadonlyArray<null | string>;\n  /**\n   * An object containing all the localized strings required by the component:\n   * * `uploadButtonText` (function): A function to render the text of the file upload button. It takes `multiple` attribute to define plurality.\n   * * `dropzoneText` (function): A function to render the text shown in the dropzone. It takes `multiple` attribute to define plurality.\n   * * `removeFileAriaLabel` (function): A function to render the ARIA label for file token remove button.\n   * * `limitShowFewer` (string): The text of the show more tokens button.\n   * * `limitShowMore` (string): The text of the show fewer tokens button.\n   * * `errorIconAriaLabel` (string): The ARIA label to be shown on the error file icon.\n   * * `warningIconAriaLabel` (string): The ARIA label to be shown on the warning file icon.\n   * * `formatFileSize` (function): (Optional) A function that takes file size in bytes, and produces a formatted string.\n   * * `formatFileLastModified` (function): (Optional) A function that takes the files last modified date, and produces a formatted string.\n   */\n  i18nStrings: FileUploadProps.I18nStrings;\n}\n\nexport namespace FileUploadProps {\n  export interface ChangeDetail {\n    value: File[];\n  }\n\n  export interface DismissDetail {\n    index: number;\n    file: File;\n  }\n\n  export interface I18nStrings {\n    uploadButtonText: (multiple: boolean) => string;\n    dropzoneText: (multiple: boolean) => string;\n    removeFileAriaLabel: (fileIndex: number) => string;\n    limitShowFewer: string;\n    limitShowMore: string;\n    errorIconAriaLabel?: string;\n    warningIconAriaLabel?: string;\n    formatFileSize?: (sizeInBytes: number) => string;\n    formatFileLastModified?: (date: Date) => string;\n  }\n\n  export interface Ref {\n    /**\n     * Sets focus on the file upload button.\n     */\n    focus(): void;\n  }\n}\n\nexport interface FileMetadata {\n  showFileSize?: boolean;\n  showFileLastModified?: boolean;\n  showFileThumbnail?: boolean;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/file-upload/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { FormFieldCommonValidationControlProps } from '../internal/context/form-field-context';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface FileUploadProps extends BaseComponentProps, FormFieldCommonValidationControlProps {\n  /**\n   * Specifies the native file input `accept` attribute to describe the allow-list of file types.\n   */\n  accept?: string;\n  /**\n   * Specifies whether to add aria-required to the file upload control.\n   */\n  ariaRequired?: boolean;\n  /**\n   * Show file size in the token. Use `i18nStrings.formatFileSize` to customize it.\n   */\n  showFileSize?: boolean;\n  /**\n   * Show file last modified timestamp in the token. Use `i18nStrings.formatFileLastModified` to customize it.\n   */\n  showFileLastModified?: boolean;\n  /**\n   * Show file thumbnail in the token. Only supported for images.\n   */\n  showFileThumbnail?: boolean;\n  /**\n   * Specifies the native file input `multiple` attribute to allow users entering more than one file.\n   */\n  multiple?: boolean;\n  /**\n   * Called when the user selects new file(s), or removes a file.\n   * The event `detail` contains the current value of the component.\n   */\n  onChange?: NonCancelableEventHandler<FileUploadProps.ChangeDetail>;\n  /**\n   * Specifies the currently selected file(s).\n   * If you want to clear the selection, use empty array.\n   */\n  value: ReadonlyArray<File>;\n  /**\n   * Specifies the maximum number of displayed file tokens. If the property isn't set, all of the tokens are displayed.\n   */\n  tokenLimit?: number;\n  /**\n   * Constraint text that is displayed below the control. Use this to provide additional information about file size limit, etc.\n   */\n  constraintText?: React.ReactNode;\n  /**\n   * Text that displays as a validation error message.\n   */\n  errorText?: React.ReactNode;\n  /**\n   * Text that displays as a validation warning message.\n   */\n  warningText?: React.ReactNode;\n  /**\n   * An array of file errors corresponding to the files in the `value`.\n   */\n  fileErrors?: ReadonlyArray<null | string>;\n  /**\n   * An array of file warnings corresponding to the files in the `value`.\n   */\n  fileWarnings?: ReadonlyArray<null | string>;\n  /**\n   * Alignment of the file tokens. Defaults to \"vertical\".\n   */\n  fileTokenAlignment?: FileUploadProps.FileTokenAlignment;\n  /**\n   * An object containing all the localized strings required by the component:\n   * * `uploadButtonText` (function): A function to render the text of the file upload button. It takes `multiple` attribute to define plurality.\n   * * `dropzoneText` (function): A function to render the text shown in the dropzone. It takes `multiple` attribute to define plurality.\n   * * `removeFileAriaLabel` (function): A function to render the ARIA label for file token remove button.\n   * * `limitShowFewer` (string): The text of the show more tokens button.\n   * * `limitShowMore` (string): The text of the show fewer tokens button.\n   * * `errorIconAriaLabel` (string): The ARIA label to be shown on the error file icon.\n   * * `warningIconAriaLabel` (string): The ARIA label to be shown on the warning file icon.\n   * * `formatFileSize` (function): (Optional) A function that takes file size in bytes, and produces a formatted string.\n   * * `formatFileLastModified` (function): (Optional) A function that takes the files last modified date, and produces a formatted string.\n   */\n  i18nStrings: FileUploadProps.I18nStrings;\n}\n\nexport namespace FileUploadProps {\n  export interface ChangeDetail {\n    value: File[];\n  }\n\n  export interface DismissDetail {\n    index: number;\n    file: File;\n  }\n\n  export type FileTokenAlignment = 'vertical' | 'horizontal';\n\n  export interface I18nStrings {\n    uploadButtonText: (multiple: boolean) => string;\n    dropzoneText: (multiple: boolean) => string;\n    removeFileAriaLabel: (fileIndex: number) => string;\n    limitShowFewer: string;\n    limitShowMore: string;\n    errorIconAriaLabel?: string;\n    warningIconAriaLabel?: string;\n    formatFileSize?: (sizeInBytes: number) => string;\n    formatFileLastModified?: (date: Date) => string;\n  }\n\n  export interface Ref {\n    /**\n     * Sets focus on the file upload button.\n     */\n    focus(): void;\n  }\n}\n\nexport interface FileMetadata {\n  showFileSize?: boolean;\n  showFileLastModified?: boolean;\n  showFileThumbnail?: boolean;\n}\n"]}

package/lib/internal/template/file-upload/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/file-upload/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAM9D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AASnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAQlF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;;AAQ/C,wBAAoD"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/file-upload/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAM9D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AASnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAMlF,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;;AAQ/C,wBAAoD"}

package/lib/internal/template/file-upload/internal.js

@@ -10,7 +10,7 @@ import { ConstraintText, FormFieldError, FormFieldWarning } from '../form-field/
 import { getBaseProps } from '../internal/base-component';
 import InternalFileDropzone, { useFilesDragging } from '../internal/components/file-dropzone';
 import InternalFileInput from '../internal/components/file-input';
-import TokenList from '../internal/components/token-list';
+import InternalFileTokenGroup from '../internal/components/file-token-group';
 import { fireNonCancelableEvent } from '../internal/events';
 import checkControlled from '../internal/hooks/check-controlled';
 import { useListFocusController } from '../internal/hooks/use-list-focus-controller';
@@ -18,15 +18,13 @@ import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { joinStrings } from '../internal/utils/strings';
 import InternalSpaceBetween from '../space-between/internal';
-import { Token } from '../token-group/token';
-import { FileOption } from './file-option';
 import fileInputStyles from '../internal/components/file-input/styles.css.js';
 import tokenListStyles from '../internal/components/token-list/styles.css.js';
 import styles from './styles.css.js';
 export default React.forwardRef(InternalFileUpload);
 function InternalFileUpload(_a, externalRef) {
     var _b;
-    var { accept, ariaRequired, multiple = false, onChange, value, tokenLimit, showFileSize, showFileLastModified, showFileThumbnail, i18nStrings, __internalRootRef = null, constraintText, errorText, warningText, fileErrors, fileWarnings } = _a, restProps = __rest(_a, ["accept", "ariaRequired", "multiple", "onChange", "value", "tokenLimit", "showFileSize", "showFileLastModified", "showFileThumbnail", "i18nStrings", "__internalRootRef", "constraintText", "errorText", "warningText", "fileErrors", "fileWarnings"]);
+    var { accept, ariaRequired, multiple = false, onChange, value, tokenLimit, showFileSize, showFileLastModified, showFileThumbnail, i18nStrings, __internalRootRef = null, constraintText, errorText, warningText, fileErrors, fileWarnings, fileTokenAlignment = 'vertical' } = _a, restProps = __rest(_a, ["accept", "ariaRequired", "multiple", "onChange", "value", "tokenLimit", "showFileSize", "showFileLastModified", "showFileThumbnail", "i18nStrings", "__internalRootRef", "constraintText", "errorText", "warningText", "fileErrors", "fileWarnings", "fileTokenAlignment"]);
     const [nextFocusIndex, setNextFocusIndex] = useState(null);
     const tokenListRef = useListFocusController({
         nextFocusIndex,
@@ -74,14 +72,10 @@ function InternalFileUpload(_a, externalRef) {
                 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)),
                 constraintText && (React.createElement(ConstraintText, { id: constraintTextId, hasValidationText: !!errorText || !!warningText }, constraintText))))),
-        !multiple && value.length > 0 ? (React.createElement(InternalBox, null,
-            React.createElement(Token, { ariaLabel: value[0].name, dismissLabel: i18nStrings.removeFileAriaLabel(0), onDismiss: () => onFileRemove(0), errorText: fileErrors === null || fileErrors === void 0 ? void 0 : fileErrors[0], warningText: fileWarnings === null || fileWarnings === void 0 ? void 0 : fileWarnings[0], errorIconAriaLabel: i18nStrings.errorIconAriaLabel, warningIconAriaLabel: i18nStrings.warningIconAriaLabel, "data-index": 0 },
-                React.createElement(FileOption, { file: value[0], metadata: metadata, i18nStrings: i18nStrings })))) : null,
-        multiple && value.length > 0 ? (React.createElement(InternalBox, null,
-            React.createElement(TokenList, { alignment: "vertical", items: value, renderItem: (file, fileIndex) => (React.createElement(Token, { ariaLabel: file.name, dismissLabel: i18nStrings.removeFileAriaLabel(fileIndex), onDismiss: () => onFileRemove(fileIndex), errorText: fileErrors === null || fileErrors === void 0 ? void 0 : fileErrors[fileIndex], warningText: fileWarnings === null || fileWarnings === void 0 ? void 0 : fileWarnings[fileIndex], errorIconAriaLabel: i18nStrings.errorIconAriaLabel, warningIconAriaLabel: i18nStrings.warningIconAriaLabel, "data-index": fileIndex },
-                    React.createElement(FileOption, { file: file, metadata: metadata, i18nStrings: i18nStrings }))), limit: tokenLimit, i18nStrings: {
-                    limitShowFewer: i18nStrings.limitShowFewer,
-                    limitShowMore: i18nStrings.limitShowMore,
-                } }))) : null));
+        value.length > 0 ? (React.createElement(InternalFileTokenGroup, { limit: tokenLimit, alignment: fileTokenAlignment, items: value.map((file, fileIndex) => ({
+                file,
+                errorText: fileErrors === null || fileErrors === void 0 ? void 0 : fileErrors[fileIndex],
+                warningText: fileWarnings === null || fileWarnings === void 0 ? void 0 : fileWarnings[fileIndex],
+            })), showFileLastModified: metadata.showFileLastModified, showFileSize: metadata.showFileSize, showFileThumbnail: metadata.showFileThumbnail, i18nStrings: i18nStrings, onDismiss: event => onFileRemove(event.detail.fileIndex) })) : null));
 }
 //# sourceMappingURL=internal.js.map

package/lib/internal/template/file-upload/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/file-upload/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { ForwardedRef, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { useFormFieldContext } from '../contexts/form-field';\nimport { ConstraintText, FormFieldError, FormFieldWarning } from '../form-field/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalFileDropzone, { useFilesDragging } from '../internal/components/file-dropzone';\nimport InternalFileInput from '../internal/components/file-input';\nimport TokenList from '../internal/components/token-list';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useListFocusController } from '../internal/hooks/use-list-focus-controller';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { joinStrings } from '../internal/utils/strings';\nimport InternalSpaceBetween from '../space-between/internal';\nimport { Token } from '../token-group/token';\nimport { FileOption } from './file-option';\nimport { FileUploadProps } from './interfaces';\n\nimport fileInputStyles from '../internal/components/file-input/styles.css.js';\nimport tokenListStyles from '../internal/components/token-list/styles.css.js';\nimport styles from './styles.css.js';\n\ntype InternalFileUploadProps = FileUploadProps & InternalBaseComponentProps;\n\nexport default React.forwardRef(InternalFileUpload);\n\nfunction InternalFileUpload(\n  {\n    accept,\n    ariaRequired,\n    multiple = false,\n    onChange,\n    value,\n    tokenLimit,\n    showFileSize,\n    showFileLastModified,\n    showFileThumbnail,\n    i18nStrings,\n    __internalRootRef = null,\n    constraintText,\n    errorText,\n    warningText,\n    fileErrors,\n    fileWarnings,\n    ...restProps\n  }: InternalFileUploadProps,\n  externalRef: ForwardedRef<ButtonProps.Ref>\n) {\n  const [nextFocusIndex, setNextFocusIndex] = useState<null | number>(null);\n  const tokenListRef = useListFocusController({\n    nextFocusIndex,\n    onFocusMoved: target => {\n      target.focus();\n      setNextFocusIndex(null);\n    },\n    listItemSelector: `.${tokenListStyles['list-item']}`,\n    showMoreSelector: `.${tokenListStyles.toggle}`,\n    fallbackSelector: `.${fileInputStyles['file-input']}`,\n  });\n\n  const baseProps = getBaseProps(restProps);\n  const metadata = { showFileSize, showFileLastModified, showFileThumbnail };\n\n  const errorId = useUniqueId('error-');\n  const warningId = useUniqueId('warning-');\n  const constraintTextId = useUniqueId('constraint-text-');\n\n  const fileInputRef = useRef<ButtonProps.Ref>(null);\n  const ref = useMergeRefs(fileInputRef, externalRef);\n\n  checkControlled('FileUpload', 'value', value, 'onChange', onChange);\n\n  if (!multiple && value.length > 1) {\n    warnOnce('FileUpload', 'Value must be an array of size 0 or 1 when `multiple=false`.');\n  }\n\n  const handleFilesChange = (newFiles: File[]) => {\n    const newValue = multiple ? [...value, ...newFiles] : newFiles[0] ? newFiles.slice(0, 1) : [...value];\n    fireNonCancelableEvent(onChange, { value: newValue });\n  };\n\n  const onFileRemove = (removeFileIndex: number) => {\n    const newValue = value.filter((_, fileIndex) => fileIndex !== removeFileIndex);\n    fireNonCancelableEvent(onChange, { value: newValue });\n    setNextFocusIndex(removeFileIndex);\n  };\n\n  const { areFilesDragging } = useFilesDragging();\n\n  const showWarning = warningText && !errorText;\n\n  if (warningText && errorText) {\n    warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');\n  }\n\n  const formFieldContext = useFormFieldContext(restProps);\n  const ariaDescribedBy = joinStrings(\n    restProps.ariaDescribedby ?? formFieldContext.ariaDescribedby,\n    errorText ? errorId : undefined,\n    showWarning ? warningId : undefined,\n    constraintText ? constraintTextId : undefined\n  );\n\n  const hasError = Boolean(errorText || fileErrors?.filter(Boolean).length);\n  const invalid = restProps.invalid || formFieldContext.invalid || hasError;\n\n  return (\n    <InternalSpaceBetween\n      {...baseProps}\n      size=\"xs\"\n      className={clsx(baseProps.className, styles.root)}\n      __internalRootRef={__internalRootRef}\n      ref={tokenListRef}\n    >\n      <InternalBox>\n        {areFilesDragging ? (\n          <InternalFileDropzone onChange={event => handleFilesChange(event.detail.value)}>\n            {i18nStrings.dropzoneText(multiple)}\n          </InternalFileDropzone>\n        ) : (\n          <InternalFileInput\n            ref={ref}\n            accept={accept}\n            ariaRequired={ariaRequired}\n            multiple={multiple}\n            onChange={event => handleFilesChange(event.detail.value)}\n            value={value}\n            {...restProps}\n            ariaDescribedby={ariaDescribedBy}\n            invalid={invalid}\n          >\n            {i18nStrings.uploadButtonText(multiple)}\n          </InternalFileInput>\n        )}\n\n        {(constraintText || errorText || warningText) && (\n          <div className={styles.hints}>\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            {constraintText && (\n              <ConstraintText id={constraintTextId} hasValidationText={!!errorText || !!warningText}>\n                {constraintText}\n              </ConstraintText>\n            )}\n          </div>\n        )}\n      </InternalBox>\n\n      {!multiple && value.length > 0 ? (\n        <InternalBox>\n          <Token\n            ariaLabel={value[0].name}\n            dismissLabel={i18nStrings.removeFileAriaLabel(0)}\n            onDismiss={() => onFileRemove(0)}\n            errorText={fileErrors?.[0]}\n            warningText={fileWarnings?.[0]}\n            errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n            warningIconAriaLabel={i18nStrings.warningIconAriaLabel}\n            data-index={0}\n          >\n            <FileOption file={value[0]} metadata={metadata} i18nStrings={i18nStrings} />\n          </Token>\n        </InternalBox>\n      ) : null}\n\n      {multiple && value.length > 0 ? (\n        <InternalBox>\n          <TokenList\n            alignment=\"vertical\"\n            items={value}\n            renderItem={(file, fileIndex) => (\n              <Token\n                ariaLabel={file.name}\n                dismissLabel={i18nStrings.removeFileAriaLabel(fileIndex)}\n                onDismiss={() => onFileRemove(fileIndex)}\n                errorText={fileErrors?.[fileIndex]}\n                warningText={fileWarnings?.[fileIndex]}\n                errorIconAriaLabel={i18nStrings.errorIconAriaLabel}\n                warningIconAriaLabel={i18nStrings.warningIconAriaLabel}\n                data-index={fileIndex}\n              >\n                <FileOption file={file} metadata={metadata} i18nStrings={i18nStrings} />\n              </Token>\n            )}\n            limit={tokenLimit}\n            i18nStrings={{\n              limitShowFewer: i18nStrings.limitShowFewer,\n              limitShowMore: i18nStrings.limitShowMore,\n            }}\n          />\n        </InternalBox>\n      ) : null}\n    </InternalSpaceBetween>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/file-upload/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { ForwardedRef, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { useFormFieldContext } from '../contexts/form-field';\nimport { ConstraintText, FormFieldError, FormFieldWarning } from '../form-field/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalFileDropzone, { useFilesDragging } from '../internal/components/file-dropzone';\nimport InternalFileInput from '../internal/components/file-input';\nimport InternalFileTokenGroup from '../internal/components/file-token-group';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport checkControlled from '../internal/hooks/check-controlled';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useListFocusController } from '../internal/hooks/use-list-focus-controller';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { joinStrings } from '../internal/utils/strings';\nimport InternalSpaceBetween from '../space-between/internal';\nimport { FileUploadProps } from './interfaces';\n\nimport fileInputStyles from '../internal/components/file-input/styles.css.js';\nimport tokenListStyles from '../internal/components/token-list/styles.css.js';\nimport styles from './styles.css.js';\n\ntype InternalFileUploadProps = FileUploadProps & InternalBaseComponentProps;\n\nexport default React.forwardRef(InternalFileUpload);\n\nfunction InternalFileUpload(\n  {\n    accept,\n    ariaRequired,\n    multiple = false,\n    onChange,\n    value,\n    tokenLimit,\n    showFileSize,\n    showFileLastModified,\n    showFileThumbnail,\n    i18nStrings,\n    __internalRootRef = null,\n    constraintText,\n    errorText,\n    warningText,\n    fileErrors,\n    fileWarnings,\n    fileTokenAlignment = 'vertical',\n    ...restProps\n  }: InternalFileUploadProps,\n  externalRef: ForwardedRef<ButtonProps.Ref>\n) {\n  const [nextFocusIndex, setNextFocusIndex] = useState<null | number>(null);\n  const tokenListRef = useListFocusController({\n    nextFocusIndex,\n    onFocusMoved: target => {\n      target.focus();\n      setNextFocusIndex(null);\n    },\n    listItemSelector: `.${tokenListStyles['list-item']}`,\n    showMoreSelector: `.${tokenListStyles.toggle}`,\n    fallbackSelector: `.${fileInputStyles['file-input']}`,\n  });\n\n  const baseProps = getBaseProps(restProps);\n  const metadata = { showFileSize, showFileLastModified, showFileThumbnail };\n\n  const errorId = useUniqueId('error-');\n  const warningId = useUniqueId('warning-');\n  const constraintTextId = useUniqueId('constraint-text-');\n\n  const fileInputRef = useRef<ButtonProps.Ref>(null);\n  const ref = useMergeRefs(fileInputRef, externalRef);\n\n  checkControlled('FileUpload', 'value', value, 'onChange', onChange);\n\n  if (!multiple && value.length > 1) {\n    warnOnce('FileUpload', 'Value must be an array of size 0 or 1 when `multiple=false`.');\n  }\n\n  const handleFilesChange = (newFiles: File[]) => {\n    const newValue = multiple ? [...value, ...newFiles] : newFiles[0] ? newFiles.slice(0, 1) : [...value];\n    fireNonCancelableEvent(onChange, { value: newValue });\n  };\n\n  const onFileRemove = (removeFileIndex: number) => {\n    const newValue = value.filter((_, fileIndex) => fileIndex !== removeFileIndex);\n    fireNonCancelableEvent(onChange, { value: newValue });\n    setNextFocusIndex(removeFileIndex);\n  };\n\n  const { areFilesDragging } = useFilesDragging();\n\n  const showWarning = warningText && !errorText;\n\n  if (warningText && errorText) {\n    warnOnce('FileUpload', 'Both `errorText` and `warningText` exist. `warningText` will not be shown.');\n  }\n\n  const formFieldContext = useFormFieldContext(restProps);\n  const ariaDescribedBy = joinStrings(\n    restProps.ariaDescribedby ?? formFieldContext.ariaDescribedby,\n    errorText ? errorId : undefined,\n    showWarning ? warningId : undefined,\n    constraintText ? constraintTextId : undefined\n  );\n\n  const hasError = Boolean(errorText || fileErrors?.filter(Boolean).length);\n  const invalid = restProps.invalid || formFieldContext.invalid || hasError;\n\n  return (\n    <InternalSpaceBetween\n      {...baseProps}\n      size=\"xs\"\n      className={clsx(baseProps.className, styles.root)}\n      __internalRootRef={__internalRootRef}\n      ref={tokenListRef}\n    >\n      <InternalBox>\n        {areFilesDragging ? (\n          <InternalFileDropzone onChange={event => handleFilesChange(event.detail.value)}>\n            {i18nStrings.dropzoneText(multiple)}\n          </InternalFileDropzone>\n        ) : (\n          <InternalFileInput\n            ref={ref}\n            accept={accept}\n            ariaRequired={ariaRequired}\n            multiple={multiple}\n            onChange={event => handleFilesChange(event.detail.value)}\n            value={value}\n            {...restProps}\n            ariaDescribedby={ariaDescribedBy}\n            invalid={invalid}\n          >\n            {i18nStrings.uploadButtonText(multiple)}\n          </InternalFileInput>\n        )}\n\n        {(constraintText || errorText || warningText) && (\n          <div className={styles.hints}>\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            {constraintText && (\n              <ConstraintText id={constraintTextId} hasValidationText={!!errorText || !!warningText}>\n                {constraintText}\n              </ConstraintText>\n            )}\n          </div>\n        )}\n      </InternalBox>\n\n      {value.length > 0 ? (\n        <InternalFileTokenGroup\n          limit={tokenLimit}\n          alignment={fileTokenAlignment}\n          items={value.map((file, fileIndex) => ({\n            file,\n            errorText: fileErrors?.[fileIndex],\n            warningText: fileWarnings?.[fileIndex],\n          }))}\n          showFileLastModified={metadata.showFileLastModified}\n          showFileSize={metadata.showFileSize}\n          showFileThumbnail={metadata.showFileThumbnail}\n          i18nStrings={i18nStrings}\n          onDismiss={event => onFileRemove(event.detail.fileIndex)}\n        />\n      ) : null}\n    </InternalSpaceBetween>\n  );\n}\n"]}

package/lib/internal/template/internal/components/file-token-group/default-formatters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-formatters.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/file-token-group/default-formatters.ts"],"names":[],"mappings":"AAUA,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAWnD;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM,CAEzD"}

package/lib/internal/template/{file-upload → internal/components/file-token-group}/default-formatters.js

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { formatDateTime } from '../internal/utils/date-time';
+import { formatDateTime } from '../../utils/date-time';
 const KB = 1000;
 const MB = Math.pow(1000, 2);
 const GB = Math.pow(1000, 3);

package/lib/internal/template/internal/components/file-token-group/default-formatters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-formatters.js","sourceRoot":"","sources":["../../../../../src/internal/components/file-token-group/default-formatters.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD,MAAM,EAAE,GAAG,IAAI,CAAC;AAChB,MAAM,EAAE,GAAG,SAAA,IAAI,EAAI,CAAC,CAAA,CAAC;AACrB,MAAM,EAAE,GAAG,SAAA,IAAI,EAAI,CAAC,CAAA,CAAC;AACrB,MAAM,EAAE,GAAG,SAAA,IAAI,EAAI,CAAC,CAAA,CAAC;AAErB,MAAM,UAAU,cAAc,CAAC,IAAY;IACzC,IAAI,IAAI,GAAG,EAAE,EAAE;QACb,OAAO,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;KACvC;IACD,IAAI,IAAI,GAAG,EAAE,EAAE;QACb,OAAO,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;KACvC;IACD,IAAI,IAAI,GAAG,EAAE,EAAE;QACb,OAAO,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;KACvC;IACD,OAAO,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;AACxC,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,IAAU;IAC/C,OAAO,cAAc,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { formatDateTime } from '../../utils/date-time';\n\nconst KB = 1000;\nconst MB = 1000 ** 2;\nconst GB = 1000 ** 3;\nconst TB = 1000 ** 4;\n\nexport function formatFileSize(size: number): string {\n  if (size < MB) {\n    return `${(size / KB).toFixed(2)} KB`;\n  }\n  if (size < GB) {\n    return `${(size / MB).toFixed(2)} MB`;\n  }\n  if (size < TB) {\n    return `${(size / GB).toFixed(2)} GB`;\n  }\n  return `${(size / TB).toFixed(2)} TB`;\n}\n\nexport function formatFileLastModified(date: Date): string {\n  return formatDateTime(date);\n}\n"]}

package/lib/internal/template/internal/components/file-token-group/file-token.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { TokenGroupProps } from '../../../token-group/interfaces.js';
+import { BaseComponentProps } from '../../base-component/index.js';
+export declare namespace FileTokenProps {
+    interface I18nStrings {
+        removeFileAriaLabel: (fileIndex: number) => string;
+        errorIconAriaLabel?: string;
+        warningIconAriaLabel?: string;
+        formatFileSize?: (sizeInBytes: number) => string;
+        formatFileLastModified?: (date: Date) => string;
+    }
+}
+export interface FileTokenProps extends BaseComponentProps {
+    file: File;
+    onDismiss: () => void;
+    showFileSize?: boolean;
+    showFileLastModified?: boolean;
+    showFileThumbnail?: boolean;
+    errorText?: React.ReactNode;
+    warningText?: React.ReactNode;
+    loading?: boolean;
+    readOnly?: boolean;
+    i18nStrings: FileTokenProps.I18nStrings;
+    dismissLabel?: string;
+    alignment?: TokenGroupProps.Alignment;
+    groupContainsImage?: boolean;
+    isImage: boolean;
+    index: number;
+}
+declare function InternalFileToken({ file, showFileLastModified, showFileSize, showFileThumbnail, i18nStrings, onDismiss, errorText, warningText, readOnly, loading, alignment, groupContainsImage, isImage, index, }: FileTokenProps): JSX.Element;
+export default InternalFileToken;
+//# sourceMappingURL=file-token.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-token.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/file-token-group/file-token.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAQhD,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AASnE,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,WAAW;QAC1B,mBAAmB,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,MAAM,CAAC;QACnD,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,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD,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,EAAE,cAAc,CAAC,WAAW,CAAC;IACxC,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,eA+HhB;AAED,eAAe,iBAAiB,CAAC"}

package/lib/internal/template/internal/components/file-token-group/file-token.js

@@ -0,0 +1,71 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useRef, useState } from 'react';
+import clsx from 'clsx';
+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-group/dismiss-button';
+import { useUniqueId } from '../../hooks/use-unique-id';
+import Tooltip from '../tooltip/index';
+import * as defaultFormatters from './default-formatters.js';
+import { FileOptionThumbnail } from './thumbnail.js';
+import styles from './styles.css.js';
+import testUtilStyles from './test-classes/styles.css.js';
+function InternalFileToken({ file, showFileLastModified, showFileSize, showFileThumbnail, i18nStrings, onDismiss, errorText, warningText, readOnly, loading, alignment, groupContainsImage, isImage, index, }) {
+    var _a, _b;
+    const formatFileSize = (_a = i18nStrings.formatFileSize) !== null && _a !== void 0 ? _a : defaultFormatters.formatFileSize;
+    const formatFileLastModified = (_b = i18nStrings.formatFileLastModified) !== null && _b !== void 0 ? _b : defaultFormatters.formatFileLastModified;
+    const errorId = useUniqueId('error');
+    const warningId = useUniqueId('warning');
+    const showWarning = warningText && !errorText;
+    const containerRef = useRef(null);
+    const fileNameRef = useRef(null);
+    const fileNameContainerRef = useRef(null);
+    const [showTooltip, setShowTooltip] = useState(false);
+    function isEllipsisActive() {
+        const span = fileNameRef.current;
+        const container = fileNameContainerRef.current;
+        if (span && container) {
+            return span.offsetWidth >= container.offsetWidth;
+        }
+        return false;
+    }
+    const fileIsSingleRow = !showFileLastModified && !showFileSize && (!groupContainsImage || (groupContainsImage && !showFileThumbnail));
+    return (React.createElement("div", { ref: containerRef, className: clsx(styles.token, {
+            [styles['token-grid']]: alignment === 'horizontal',
+            [styles['token-contains-image']]: groupContainsImage,
+        }), 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'], {
+                [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: "disabled", 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", { onMouseOver: () => setShowTooltip(true), onMouseOut: () => setShowTooltip(false), ref: fileNameContainerRef },
+                            React.createElement(InternalBox, { fontWeight: "normal", className: clsx(styles['file-option-name'], testUtilStyles['file-option-name'], {
+                                    [testUtilStyles['ellipsis-active']]: isEllipsisActive(),
+                                }) },
+                                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: i18nStrings.removeFileAriaLabel(index), onDismiss: onDismiss }))),
+        errorText && (React.createElement(FormFieldError, { id: errorId, errorIconAriaLabel: i18nStrings.errorIconAriaLabel }, errorText)),
+        showWarning && (React.createElement(FormFieldWarning, { id: warningId, warningIconAriaLabel: i18nStrings.warningIconAriaLabel }, warningText)),
+        showTooltip && isEllipsisActive() && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: file.name, value: React.createElement(InternalBox, { fontWeight: "normal" }, file.name) }))));
+}
+export default InternalFileToken;
+//# sourceMappingURL=file-token.js.map