chore: bump latest to 24.8.0.alpha4

frontend/demo/component/upload/react/upload-all-files.tsx

@@ -1,29 +1,26 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { useComputed } from '@vaadin/hilla-react-signals';
+import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
 import { Button } from '@vaadin/react-components/Button.js';
 import { Upload, type UploadElement } from '@vaadin/react-components/Upload.js';
 import { createFakeFilesUploadAllFiles } from './upload-demo-mock-files'; // hidden-source-line
 
 function Example() {
   useSignals(); // hidden-source-line
   const uploadRef = useRef<UploadElement>(null);
-
-  useEffect(() => {
-    if (!uploadRef.current) {
-      return;
-    }
-    uploadRef.current.i18n.addFiles.many = 'Select Files...';
-    uploadRef.current.i18n = { ...uploadRef.current.i18n };
-  }, [uploadRef.current]);
+  const uploadI18n = useSignal({
+    addFiles: {
+      many: 'Select Files...',
+    },
+  });
 
   const files = useComputed(createFakeFilesUploadAllFiles);
 
   return (
     <>
       {/* tag::snippet[] */}
-      <Upload noAuto ref={uploadRef} files={files.value} />
+      <Upload noAuto ref={uploadRef} files={files.value} i18n={uploadI18n.value} />
 
       <Button theme="primary" onClick={() => uploadRef.current?.uploadFiles()}>
         Upload All Files

frontend/demo/component/upload/react/upload-auto-upload-disabled.tsx

@@ -1,27 +1,23 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { useComputed } from '@vaadin/hilla-react-signals';
-import { Upload, type UploadElement } from '@vaadin/react-components/Upload.js';
+import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
+import { Upload } from '@vaadin/react-components/Upload.js';
 import { createFakeFilesUploadAutoUploadDisabled } from './upload-demo-mock-files';
 
 function Example() {
   useSignals(); // hidden-source-line
-  const uploadRef = useRef<UploadElement>(null);
-
-  useEffect(() => {
-    if (!uploadRef.current) {
-      return;
-    }
-    uploadRef.current.i18n.addFiles.many = 'Select Files...';
-    uploadRef.current.i18n = { ...uploadRef.current.i18n };
-  }, [uploadRef.current]);
+  const uploadI18n = useSignal({
+    addFiles: {
+      many: 'Select Files...',
+    },
+  });
 
   const files = useComputed(createFakeFilesUploadAutoUploadDisabled);
 
   return (
     // tag::snippet[]
-    <Upload noAuto ref={uploadRef} files={files.value} />
+    <Upload noAuto files={files.value} i18n={uploadI18n.value} />
     // end::snippet[]
   );
 }

frontend/demo/component/upload/react/upload-error-messages.tsx

@@ -1,7 +1,7 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React, { useEffect, useRef } from 'react';
 import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
-import { useComputed } from '@vaadin/hilla-react-signals';
+import { useComputed, useSignal } from '@vaadin/hilla-react-signals';
 import { FormLayout, type FormLayoutResponsiveStep } from '@vaadin/react-components/FormLayout.js';
 import { Upload, type UploadElement } from '@vaadin/react-components/Upload.js';
 import {
@@ -18,16 +18,12 @@ const Example = () => {
   const uploadCaution = useRef<UploadElement>(null);
   const uploadRecommended = useRef<UploadElement>(null);
 
-  // tag::snippet[]
   useEffect(() => {
     if (!uploadCaution.current) {
       return;
     }
 
     uploadCaution.current.setupMockErrorResponse();
-
-    uploadCaution.current.i18n.uploading.error.unexpectedServerError = 'Unexpected Server Error';
-    uploadCaution.current.i18n = { ...uploadCaution.current.i18n };
   }, [uploadCaution.current]);
 
   useEffect(() => {
@@ -36,25 +32,37 @@ const Example = () => {
     }
 
     uploadRecommended.current.setupMockErrorResponse();
-
-    uploadRecommended.current.i18n.uploading.error.unexpectedServerError =
-      "File couldn't be uploaded, try again later";
-    uploadRecommended.current.i18n = { ...uploadRecommended.current.i18n };
   }, [uploadRecommended.current]);
 
   const filesA = useComputed(createFakeFilesUploadErrorMessagesA);
   const filesB = useComputed(createFakeFilesUploadErrorMessagesB);
 
+  const cautionI18n = useSignal({
+    uploading: {
+      error: {
+        unexpectedServerError: 'Unexpected Server Error',
+      },
+    },
+  });
+  // tag::snippet[]
+  const recommendedI18n = useSignal({
+    uploading: {
+      error: {
+        unexpectedServerError: "File couldn't be uploaded, try again later",
+      },
+    },
+  });
+
   return (
     <FormLayout responsiveSteps={layoutSteps}>
       <div>
         <strong>Caution</strong>
-        <Upload ref={uploadCaution} nodrop files={filesA.value} />
+        <Upload ref={uploadCaution} nodrop files={filesA.value} i18n={cautionI18n.value} />
       </div>
 
       <div>
         <strong>Recommended</strong>
-        <Upload ref={uploadRecommended} nodrop files={filesB.value} />
+        <Upload ref={uploadRecommended} nodrop files={filesB.value} i18n={recommendedI18n.value} />
       </div>
     </FormLayout>
   );

frontend/demo/component/upload/react/upload-helper.tsx

@@ -1,9 +1,12 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
+import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
 import { Notification } from '@vaadin/react-components/Notification.js';
 import { Upload } from '@vaadin/react-components/Upload.js';
 
 function Example() {
+  useSignals(); // hidden-source-line
   const maxFileSizeInMB = 1;
   const maxFileSizeInBytes = maxFileSizeInMB * 1024 * 1024;
   const acceptedTypes = [
@@ -19,17 +22,17 @@ function Example() {
   ];
 
   // tag::snippet[]
-  const uploadRef = useRef<any>(null);
-
-  useEffect(() => {
-    if (uploadRef.current) {
-      uploadRef.current.i18n.addFiles.one = 'Upload Spreadsheet...';
-      uploadRef.current.i18n.dropFiles.one = 'Drop spreadsheet here';
-      uploadRef.current.i18n.error.incorrectFileType =
-        'Provide the file in one of the supported formats (.xls, .xlsx, .csv).';
-      uploadRef.current.i18n = { ...uploadRef.current.i18n };
-    }
-  }, [uploadRef.current]);
+  const uploadI18n = useSignal({
+    addFiles: {
+      one: 'Upload Spreadsheet...',
+    },
+    dropFiles: {
+      one: 'Drop spreadsheet here',
+    },
+    error: {
+      incorrectFileType: 'Provide the file in one of the supported formats (.xls, .xlsx, .csv).',
+    },
+  });
 
   return (
     <>
@@ -43,7 +46,7 @@ function Example() {
         maxFiles={1}
         maxFileSize={maxFileSizeInBytes}
         accept={acceptedTypes.join(',')}
-        ref={uploadRef}
+        i18n={uploadI18n.value}
         onFileReject={(event) => {
           Notification.show(event.detail.error);
         }}

frontend/demo/component/upload/react/upload-internationalization.tsx

@@ -1,10 +1,13 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
 import React from 'react';
+import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
 import { Upload } from '@vaadin/react-components/Upload.js';
 
 function Example() {
+  useSignals(); // hidden-source-line
   // tag::snippet[]
-  const i18n = {
+  const uploadI18n = useSignal({
     dropFiles: {
       one: 'Raahaa tiedosto tähän',
       many: 'Raahaa tiedostot tähän',
@@ -39,9 +42,9 @@ function Example() {
       size: ['t', 'kt', 'Mt', 'Gt', 'Tt', 'Pt', 'Et', 'ZB', 'YB'],
       sizeBase: 1000,
     },
-  };
+  });
 
-  return <Upload i18n={i18n} />;
+  return <Upload i18n={uploadI18n.value} />;
   // end::snippet[]
 }
 

frontend/demo/component/upload/react/upload-labelling.tsx

@@ -1,5 +1,7 @@
 import { reactExample } from 'Frontend/demo/react-example'; // hidden-source-line
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
+import { useSignals } from '@preact/signals-react/runtime'; // hidden-source-line
+import { useSignal } from '@vaadin/hilla-react-signals';
 import { Notification } from '@vaadin/react-components/Notification.js';
 import type { UploadFileRejectEvent } from '@vaadin/react-components/Upload.js';
 import { Upload } from '@vaadin/react-components/Upload.js';
@@ -9,24 +11,25 @@ const fileRejectHandler = (event: UploadFileRejectEvent) => {
 };
 
 function Example() {
+  useSignals(); // hidden-source-line
   // tag::snippet[]
-  const uploadRef = useRef<any>(null);
-
-  useEffect(() => {
-    if (uploadRef.current) {
-      uploadRef.current.i18n.addFiles.one = 'Upload PDF...';
-      uploadRef.current.i18n.dropFiles.one = 'Drop PDF here';
-      uploadRef.current.i18n.error.incorrectFileType =
-        'The provided file does not have the correct format (PDF document).';
-      uploadRef.current.i18n = { ...uploadRef.current.i18n };
-    }
-  }, [uploadRef.current]);
+  const uploadI18n = useSignal({
+    addFiles: {
+      one: 'Upload PDF...',
+    },
+    dropFiles: {
+      one: 'Drop PDF here',
+    },
+    error: {
+      incorrectFileType: 'The provided file does not have the correct format (PDF document).',
+    },
+  });
 
   return (
     <Upload
       maxFiles={1}
       accept="application/pdf,.pdf"
-      ref={uploadRef}
+      i18n={uploadI18n.value}
       onFileReject={fileRejectHandler}
     />
   );

frontend/demo/component/upload/upload-all-files.ts

@@ -16,24 +16,24 @@ export class Example extends LitElement {
     return root;
   }
 
+  private uploadI18n = {
+    addFiles: {
+      many: 'Select Files...',
+    },
+  };
+
   // tag::snippet[]
   @query('vaadin-upload')
   private upload!: Upload;
 
-  // end::snippet[]
-  protected override firstUpdated() {
-    this.upload.i18n.addFiles.many = 'Select Files...';
-    this.upload.i18n = { ...this.upload.i18n };
-  }
-
-  // tag::snippet[]
   protected override render() {
     return html`
       <vaadin-upload
         no-auto
+        .i18n="${this.uploadI18n}"
         .files="${createFakeFilesUploadAllFiles() /* hidden-source-line */}"
       ></vaadin-upload>
-      <vaadin-button theme="primary" @click="${this.uploadFiles}"> Upload All Files </vaadin-button>
+      <vaadin-button theme="primary" @click="${this.uploadFiles}"> Upload All Files</vaadin-button>
     `;
   }
 

frontend/demo/component/upload/upload-auto-upload-disabled.ts

@@ -2,8 +2,7 @@ import 'Frontend/demo/init'; // hidden-source-line
 import './upload-demo-helpers'; // hidden-source-line
 import '@vaadin/upload';
 import { html, LitElement } from 'lit';
-import { customElement, query } from 'lit/decorators.js';
-import type { Upload } from '@vaadin/upload';
+import { customElement } from 'lit/decorators.js';
 import { applyTheme } from 'Frontend/generated/theme';
 import { createFakeFilesUploadAutoUploadDisabled } from './upload-demo-mock-files'; // hidden-source-line
 
@@ -17,18 +16,17 @@ export class Example extends LitElement {
   }
 
   // tag::snippet[]
-  @query('vaadin-upload')
-  private upload!: Upload;
-
-  protected override firstUpdated() {
-    this.upload.i18n.addFiles.many = 'Select Files...';
-    this.upload.i18n = { ...this.upload.i18n };
-  }
+  private uploadI18n = {
+    addFiles: {
+      many: 'Select Files...',
+    },
+  };
 
   protected override render() {
     return html`
       <vaadin-upload
         no-auto
+        .i18n="${this.uploadI18n}"
         .files="${createFakeFilesUploadAutoUploadDisabled() /* hidden-source-line */}"
       ></vaadin-upload>
     `;

frontend/demo/component/upload/upload-button-theme-variant.ts

@@ -3,13 +3,9 @@ import './upload-demo-helpers'; // hidden-source-line
 import '@vaadin/button';
 import '@vaadin/upload';
 import { html, LitElement } from 'lit';
-import { customElement, query, state } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';
 import { Notification } from '@vaadin/notification';
-import type {
-  Upload,
-  UploadFileRejectEvent,
-  UploadMaxFilesReachedChangedEvent,
-} from '@vaadin/upload';
+import type { UploadFileRejectEvent, UploadMaxFilesReachedChangedEvent } from '@vaadin/upload';
 import { applyTheme } from 'Frontend/generated/theme';
 
 @customElement('upload-button-theme-variant')
@@ -21,23 +17,22 @@ export class Example extends LitElement {
     return root;
   }
 
-  @query('vaadin-upload')
-  private upload!: Upload;
-
   @state()
   private maxFilesReached = false;
 
-  protected override firstUpdated() {
-    this.upload.i18n.dropFiles.one = 'Drop PDF here';
-    this.upload.i18n = { ...this.upload.i18n };
-  }
+  private uploadI18n = {
+    dropFiles: {
+      one: 'Drop PDF here',
+    },
+  };
 
   protected override render() {
     return html`
       <!-- tag::snippet[] -->
       <vaadin-upload
         max-files="1"
         accept="application/pdf,.pdf"
+        .i18n="${this.uploadI18n}"
         @file-reject="${this.fileRejectHandler}"
         @max-files-reached-changed="${(event: UploadMaxFilesReachedChangedEvent) => {
           this.maxFilesReached = event.detail.value;