feat: 'files' prop is now readonly (#3152)

sbb-design-systems · Nov 13, 2024 · 414e3f2 · 414e3f2
1 parent fb25221
commit 414e3f2
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 42 deletions.
diff --git a/src/elements/file-selector/common/file-selector-common.spec.ts b/src/elements/file-selector/common/file-selector-common.spec.ts
@@ -137,7 +137,7 @@ describe('sbb-file-selector common', () => {
         expect(elemInputEvent.count, 'input event').to.be.equal(nativeInputEvent.count);
       }
 
-      it.only('renders', () => {
+      it('renders', () => {
         compareToNativeInput();
       });
 

diff --git a/src/elements/file-selector/common/file-selector-common.ts b/src/elements/file-selector/common/file-selector-common.ts
@@ -38,7 +38,7 @@ export declare abstract class SbbFileSelectorCommonElementMixinType extends SbbF
   public accessor accept: string;
   public accessor accessibilityLabel: string;
   public accessor disabled: boolean;
-  public accessor files: File[];
+  public accessor files: Readonly<File>[];
   protected formDisabled: boolean;
   protected loadButton: SbbSecondaryButtonStaticElement;
   protected language: SbbLanguageController;
@@ -47,7 +47,7 @@ export declare abstract class SbbFileSelectorCommonElementMixinType extends SbbF
   protected updateFormValue(): void;
   public formResetCallback(): void;
   public formStateRestoreCallback(state: FormRestoreState | null, reason: FormRestoreReason): void;
-  public getFiles(): File[];
+  public getFiles(): Readonly<File>[];
 }
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -101,25 +101,23 @@ export const SbbFileSelectorCommonElementMixin = <T extends Constructor<LitEleme
 
     /** The list of selected files. */
     @property({ attribute: false })
-    public set files(value: File[]) {
+    public set files(value: Readonly<File>[]) {
       this._files = value ?? [];
 
       // update the inner input
       const dt: DataTransfer = new DataTransfer();
-      this.files.forEach((e: File) => dt.items.add(e));
+      this.files.forEach((e: Readonly<File>) => dt.items.add(e));
       this._hiddenInput.files = dt.files;
 
       this.updateFormValue();
     }
-
-    public get files(): File[] {
+    public get files(): Readonly<File>[] {
       return this._files;
     }
-
-    private _files: File[] = [];
+    private _files: Readonly<File>[] = [];
 
     /** An event which is emitted each time the file list changes. */
-    private _fileChangedEvent: EventEmitter<File[]> = new EventEmitter(
+    private _fileChangedEvent: EventEmitter<Readonly<File>[]> = new EventEmitter(
       this,
       SbbFileSelectorCommonElement.events.fileChangedEvent,
     );
@@ -133,7 +131,7 @@ export const SbbFileSelectorCommonElementMixin = <T extends Constructor<LitEleme
     protected abstract renderTemplate(input: TemplateResult): TemplateResult;
 
     /** @deprecated use the 'files' property instead */
-    public getFiles(): File[] {
+    public getFiles(): Readonly<File>[] {
       return this.files;
     }
 
@@ -148,7 +146,9 @@ export const SbbFileSelectorCommonElementMixin = <T extends Constructor<LitEleme
       if (!state) {
         return;
       }
-      this.files = (state as [string, FormDataEntryValue][]).map(([_, value]) => value as File);
+      this.files = (state as [string, FormDataEntryValue][]).map(
+        ([_, value]) => value as Readonly<File>,
+      );
     }
 
     protected override updateFormValue(): void {
@@ -157,7 +157,7 @@ export const SbbFileSelectorCommonElementMixin = <T extends Constructor<LitEleme
       this.internals.setFormValue(formValue);
     }
 
-    private _checkFileEquality(file1: File, file2: File): boolean {
+    private _checkFileEquality(file1: Readonly<File>, file2: Readonly<File>): boolean {
       return (
         file1.name === file2.name &&
         file1.size === file2.size &&
@@ -192,8 +192,8 @@ export const SbbFileSelectorCommonElementMixin = <T extends Constructor<LitEleme
         this.files = Array.from(files)
           .filter(
             // Remove duplicates
-            (newFile: File): boolean =>
-              this.files!.findIndex((oldFile: File) =>
+            (newFile: Readonly<File>): boolean =>
+              this.files!.findIndex((oldFile: Readonly<File>) =>
                 this._checkFileEquality(newFile, oldFile),
               ) === -1,
           )
@@ -203,8 +203,8 @@ export const SbbFileSelectorCommonElementMixin = <T extends Constructor<LitEleme
       this._fileChangedEvent.emit(this.files);
     }
 
-    private _removeFile(file: File): void {
-      this.files = this.files.filter((f: File) => !this._checkFileEquality(file, f));
+    private _removeFile(file: Readonly<File>): void {
+      this.files = this.files.filter((f: Readonly<File>) => !this._checkFileEquality(file, f));
       this._updateA11yLiveRegion();
 
       // Dispatch native events as if the reset is done via the file selection window.
@@ -235,7 +235,7 @@ export const SbbFileSelectorCommonElementMixin = <T extends Constructor<LitEleme
       return html`
       <${unsafeStatic(TAG_NAME.WRAPPER)} class='sbb-file-selector__file-list'>
         ${this.files.map(
-          (file: File) => html`
+          (file: Readonly<File>) => html`
             <${unsafeStatic(TAG_NAME.ELEMENT)} class='sbb-file-selector__file'>
                 <span class='sbb-file-selector__file-details'>
                   <span class='sbb-file-selector__file-name'>${file.name}</span>

diff --git a/src/elements/file-selector/file-selector-dropzone/file-selector-dropzone.ts b/src/elements/file-selector/file-selector-dropzone/file-selector-dropzone.ts
@@ -18,7 +18,7 @@ import style from './file-selector-dropzone.scss?lit&inline';
  * It allows to select one or more file from storage devices via button click or drag and drop, and display them.
  *
  * @slot error - Use this to provide a `sbb-form-error` to show an error message.
- * @event {CustomEvent<File[]>} fileChanged - An event which is emitted each time the file list changes.
+ * @event {CustomEvent<Readonly<File>[]>} fileChanged - An event which is emitted each time the file list changes.
  * @event change - An event which is emitted each time the user modifies the value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value
  * @event input - An event which is emitted each time the value changes as a direct result of a user action.
  */

diff --git a/src/elements/file-selector/file-selector-dropzone/readme.md b/src/elements/file-selector/file-selector-dropzone/readme.md
@@ -88,7 +88,7 @@ It's suggested to have a different value for each variant, e.g.:
 | `accept`             | `accept`              | public  | `string`                    | `''`        | A comma-separated list of allowed unique file type specifiers.                |
 | `accessibilityLabel` | `accessibility-label` | public  | `string`                    | `''`        | This will be forwarded as aria-label to the native input element.             |
 | `disabled`           | `disabled`            | public  | `boolean`                   | `false`     | Whether the component is disabled.                                            |
-| `files`              | -                     | public  | `File[]`                    | `[]`        | The list of selected files.                                                   |
+| `files`              | -                     | public  | `Readonly<File>[]`          | `[]`        | The list of selected files.                                                   |
 | `form`               | -                     | public  | `HTMLFormElement \| null`   |             | Returns the form owner of the internals of the target element.                |
 | `multiple`           | `multiple`            | public  | `boolean`                   | `false`     | Whether more than one file can be selected.                                   |
 | `multipleMode`       | `multiple-mode`       | public  | `'default' \| 'persistent'` | `'default'` | Whether the newly added files should override the previously added ones.      |
@@ -99,19 +99,19 @@ It's suggested to have a different value for each variant, e.g.:
 
 ## Methods
 
-| Name                       | Privacy | Description | Parameters                                                    | Return   | Inherited From                    |
-| -------------------------- | ------- | ----------- | ------------------------------------------------------------- | -------- | --------------------------------- |
-| `formResetCallback`        | public  |             |                                                               | `void`   | SbbFileSelectorCommonElementMixin |
-| `formStateRestoreCallback` | public  |             | `state: FormRestoreState \| null, _reason: FormRestoreReason` | `void`   | SbbFileSelectorCommonElementMixin |
-| `getFiles`                 | public  |             |                                                               | `File[]` | SbbFileSelectorCommonElementMixin |
+| Name                       | Privacy | Description | Parameters                                                    | Return             | Inherited From                    |
+| -------------------------- | ------- | ----------- | ------------------------------------------------------------- | ------------------ | --------------------------------- |
+| `formResetCallback`        | public  |             |                                                               | `void`             | SbbFileSelectorCommonElementMixin |
+| `formStateRestoreCallback` | public  |             | `state: FormRestoreState \| null, _reason: FormRestoreReason` | `void`             | SbbFileSelectorCommonElementMixin |
+| `getFiles`                 | public  |             |                                                               | `Readonly<File>[]` | SbbFileSelectorCommonElementMixin |
 
 ## Events
 
-| Name          | Type                  | Description                                                                                                                                                                  | Inherited From                    |
-| ------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
-| `change`      | `Event`               | An event which is emitted each time the user modifies the value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value | SbbFileSelectorCommonElementMixin |
-| `fileChanged` | `CustomEvent<File[]>` | An event which is emitted each time the file list changes.                                                                                                                   |                                   |
-| `input`       | `Event`               | An event which is emitted each time the value changes as a direct result of a user action.                                                                                   | SbbFileSelectorCommonElementMixin |
+| Name          | Type                            | Description                                                                                                                                                                  | Inherited From                    |
+| ------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
+| `change`      | `Event`                         | An event which is emitted each time the user modifies the value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value | SbbFileSelectorCommonElementMixin |
+| `fileChanged` | `CustomEvent<Readonly<File>[]>` | An event which is emitted each time the file list changes.                                                                                                                   |                                   |
+| `input`       | `Event`                         | An event which is emitted each time the value changes as a direct result of a user action.                                                                                   | SbbFileSelectorCommonElementMixin |
 
 ## Slots
 

diff --git a/src/elements/file-selector/file-selector/file-selector.ts b/src/elements/file-selector/file-selector/file-selector.ts
@@ -16,7 +16,7 @@ import '../../icon.js';
  * It allows to select one or more file from storage devices and display them.
  *
  * @slot error - Use this to provide a `sbb-form-error` to show an error message.
- * @event {CustomEvent<File[]>} fileChanged - An event which is emitted each time the file list changes.
+ * @event {CustomEvent<Readonly<File>[]>} fileChanged - An event which is emitted each time the file list changes.
  * @event change - An event which is emitted each time the user modifies the value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value
  * @event input - An event which is emitted each time the value changes as a direct result of a user action.
  */

diff --git a/src/elements/file-selector/file-selector/readme.md b/src/elements/file-selector/file-selector/readme.md
@@ -85,7 +85,7 @@ It's suggested to have a different value for each variant, e.g.:
 | `accept`             | `accept`              | public  | `string`                    | `''`        | A comma-separated list of allowed unique file type specifiers.                |
 | `accessibilityLabel` | `accessibility-label` | public  | `string`                    | `''`        | This will be forwarded as aria-label to the native input element.             |
 | `disabled`           | `disabled`            | public  | `boolean`                   | `false`     | Whether the component is disabled.                                            |
-| `files`              | -                     | public  | `File[]`                    | `[]`        | The list of selected files.                                                   |
+| `files`              | -                     | public  | `Readonly<File>[]`          | `[]`        | The list of selected files.                                                   |
 | `form`               | -                     | public  | `HTMLFormElement \| null`   |             | Returns the form owner of the internals of the target element.                |
 | `multiple`           | `multiple`            | public  | `boolean`                   | `false`     | Whether more than one file can be selected.                                   |
 | `multipleMode`       | `multiple-mode`       | public  | `'default' \| 'persistent'` | `'default'` | Whether the newly added files should override the previously added ones.      |
@@ -95,19 +95,19 @@ It's suggested to have a different value for each variant, e.g.:
 
 ## Methods
 
-| Name                       | Privacy | Description | Parameters                                                    | Return   | Inherited From                    |
-| -------------------------- | ------- | ----------- | ------------------------------------------------------------- | -------- | --------------------------------- |
-| `formResetCallback`        | public  |             |                                                               | `void`   | SbbFileSelectorCommonElementMixin |
-| `formStateRestoreCallback` | public  |             | `state: FormRestoreState \| null, _reason: FormRestoreReason` | `void`   | SbbFileSelectorCommonElementMixin |
-| `getFiles`                 | public  |             |                                                               | `File[]` | SbbFileSelectorCommonElementMixin |
+| Name                       | Privacy | Description | Parameters                                                    | Return             | Inherited From                    |
+| -------------------------- | ------- | ----------- | ------------------------------------------------------------- | ------------------ | --------------------------------- |
+| `formResetCallback`        | public  |             |                                                               | `void`             | SbbFileSelectorCommonElementMixin |
+| `formStateRestoreCallback` | public  |             | `state: FormRestoreState \| null, _reason: FormRestoreReason` | `void`             | SbbFileSelectorCommonElementMixin |
+| `getFiles`                 | public  |             |                                                               | `Readonly<File>[]` | SbbFileSelectorCommonElementMixin |
 
 ## Events
 
-| Name          | Type                  | Description                                                                                                                                                                  | Inherited From                    |
-| ------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
-| `change`      | `Event`               | An event which is emitted each time the user modifies the value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value | SbbFileSelectorCommonElementMixin |
-| `fileChanged` | `CustomEvent<File[]>` | An event which is emitted each time the file list changes.                                                                                                                   |                                   |
-| `input`       | `Event`               | An event which is emitted each time the value changes as a direct result of a user action.                                                                                   | SbbFileSelectorCommonElementMixin |
+| Name          | Type                            | Description                                                                                                                                                                  | Inherited From                    |
+| ------------- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
+| `change`      | `Event`                         | An event which is emitted each time the user modifies the value. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value | SbbFileSelectorCommonElementMixin |
+| `fileChanged` | `CustomEvent<Readonly<File>[]>` | An event which is emitted each time the file list changes.                                                                                                                   |                                   |
+| `input`       | `Event`                         | An event which is emitted each time the value changes as a direct result of a user action.                                                                                   | SbbFileSelectorCommonElementMixin |
 
 ## Slots