TD 2659 Update NumberField and FileUploaders

src/FileUploader/FileUploader.stories.tsx

@@ -29,11 +29,11 @@ const meta: Meta<typeof FileUploader> = {
           // fire action
           action("onAdd")(newFiles);
         }}
-        onDelete={updatedFiles => {
+        onDelete={(updatedFiles, deletedFiles) => {
           setSelectedFiles(updatedFiles);
 
           // fire action
-          action("onDelete")(updatedFiles);
+          action("onDelete")(updatedFiles, deletedFiles);
         }}
       />
     );
@@ -76,6 +76,22 @@ export const WithSingleFileSelected: Story = {
   }
 };
 
+/**
+ * Story which shows the uploader in single select mode and the optional id field
+ */
+export const WithSingleFileSelectedAndId: Story = {
+  args: {
+    ...Default.args,
+    selectedFiles: [
+      {
+        data: "",
+        file: new File([""], "IPGAutomotive.zip"),
+        id: "some-id"
+      }
+    ]
+  }
+};
+
 /**
  * Story which shows the uploader in multiple select mode
  */

src/FileUploader/FileUploader.types.ts

@@ -35,7 +35,7 @@ export type FileUploaderProps = {
   /**
    * Callback fired when the file is deleted.
    */
-  onDelete?: (selectedFiles: FileWithData[]) => void;
+  onDelete?: (selectedFiles: FileWithData[], deletedFile: FileWithData) => void;
   /**
    * If true, red star shows on title
    */

src/ImageUploader/ImageUploader.stories.tsx

@@ -23,9 +23,9 @@ const meta: Meta<typeof ImageUploader> = {
           setSelectedFiles(selectedFiles);
           action("onAdd")(selectedFiles);
         }}
-        onDelete={updatedFiles => {
+        onDelete={(updatedFiles, deletedFiles) => {
           setSelectedFiles([]);
-          action("onDelete")(updatedFiles);
+          action("onDelete")(updatedFiles, deletedFiles);
         }}
       />
     );

src/ImageUploader/ImageUploader.types.tsx

@@ -18,7 +18,7 @@ export type ImageUploaderProps = {
   /**
    * Callback fired when the file is deleted.
    */
-  onDelete?: (selectedFiles: FileWithData[]) => void;
+  onDelete?: (selectedFiles: FileWithData[], deletedFile: FileWithData) => void;
   /**
    * If true, red star shows on title
    */

src/NumberField/NumberField.jsx

@@ -26,7 +26,7 @@ export default function NumberField({
   startAdornment = null,
   step,
   stepper = true,
-  value = null,
+  value,
   variant = "outlined"
 }) {
   // state to keep track of the value of the number field even when invalid
@@ -99,7 +99,7 @@ export default function NumberField({
       required={required}
       size={size}
       type="number"
-      value={currentValue ?? ""}
+      value={currentValue}
       variant={variant}
       InputProps={{
         ...(endAdornment && {

src/NumberField/NumberField.stories.jsx

@@ -43,6 +43,7 @@ export const Default = {
 
 export const Uncontrolled = {
   args: {
+    defaultValue: 12,
     disabled: false,
     error: false,
     helperText: "What Number are you going to type?",

src/NumberField/NumberField.test.jsx

@@ -1,7 +1,6 @@
-import { render, screen } from "@testing-library/react";
-
 import NumberField from ".";
 import React from "react";
+import { render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 /**
@@ -37,6 +36,13 @@ describe("NumberField", () => {
     await user.type(inputBase, "123");
     expect(inputBase.value).toBe("123");
   });
+  test("Numberfield has a default value", () => {
+    const { container } = render(<NumberField defaultValue={22} />);
+
+    const input = container.querySelector(".MuiInputBase-input");
+
+    expect(input).toHaveValue(22);
+  });
   test("Numberfield does not allow typing of letters", async () => {
     const user = userEvent.setup();
     const { container } = render(<NumberFieldWithState />);

src/Uploader/Uploader.types.ts

@@ -1,4 +1,5 @@
 export type FileWithData = {
   data: string;
   file: File;
+  id?: string;
 };

src/Uploader/useUploader.ts

@@ -92,7 +92,11 @@ export default function useUploader({
   // handle file deletion
   const handleDelete = (deletedFile: FileWithData) => {
     // delete file from selected files
-    onDelete && onDelete(selectedFiles.filter(i => i !== deletedFile));
+    onDelete &&
+      onDelete(
+        selectedFiles.filter(i => i !== deletedFile),
+        deletedFile
+      );
   };
 
   return {

src/Uploader/useUploader.types.ts

@@ -28,8 +28,9 @@ export interface UseUploaderProps {
    * Callback fired when the file is deleted.
    *
    * _selectedFiles_: The files that are currently selected.
+   * _deletedFile_: The file that was deleted.
    */
-  onDelete?: (selectedFiles: FileWithData[]) => void;
+  onDelete?: (selectedFiles: FileWithData[], deletedFile: FileWithData) => void;
   /**
    * List of selected file(s).
    */