diff --git a/src/FileUploader/FileUploader.stories.tsx b/src/FileUploader/FileUploader.stories.tsx index e81a4ae91..286ea8117 100644 --- a/src/FileUploader/FileUploader.stories.tsx +++ b/src/FileUploader/FileUploader.stories.tsx @@ -29,11 +29,11 @@ const meta: Meta = { // 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 */ diff --git a/src/FileUploader/FileUploader.types.ts b/src/FileUploader/FileUploader.types.ts index bfbd670ff..66c9b224f 100644 --- a/src/FileUploader/FileUploader.types.ts +++ b/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 */ diff --git a/src/ImageUploader/ImageUploader.stories.tsx b/src/ImageUploader/ImageUploader.stories.tsx index 70d219c1e..0647b299c 100644 --- a/src/ImageUploader/ImageUploader.stories.tsx +++ b/src/ImageUploader/ImageUploader.stories.tsx @@ -23,9 +23,9 @@ const meta: Meta = { setSelectedFiles(selectedFiles); action("onAdd")(selectedFiles); }} - onDelete={updatedFiles => { + onDelete={(updatedFiles, deletedFiles) => { setSelectedFiles([]); - action("onDelete")(updatedFiles); + action("onDelete")(updatedFiles, deletedFiles); }} /> ); diff --git a/src/ImageUploader/ImageUploader.types.tsx b/src/ImageUploader/ImageUploader.types.tsx index d8d6b65bd..3ff4b08fa 100644 --- a/src/ImageUploader/ImageUploader.types.tsx +++ b/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 */ diff --git a/src/NumberField/NumberField.jsx b/src/NumberField/NumberField.jsx index ab4ecf5f8..d8e80fe84 100644 --- a/src/NumberField/NumberField.jsx +++ b/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 && { diff --git a/src/NumberField/NumberField.stories.jsx b/src/NumberField/NumberField.stories.jsx index 36642a1cd..3817e7cbf 100644 --- a/src/NumberField/NumberField.stories.jsx +++ b/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?", diff --git a/src/NumberField/NumberField.test.jsx b/src/NumberField/NumberField.test.jsx index 8ff6787e1..92f3a942c 100644 --- a/src/NumberField/NumberField.test.jsx +++ b/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(); + + 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(); diff --git a/src/Uploader/Uploader.types.ts b/src/Uploader/Uploader.types.ts index 0087e69f3..ed6b6b0ef 100644 --- a/src/Uploader/Uploader.types.ts +++ b/src/Uploader/Uploader.types.ts @@ -1,4 +1,5 @@ export type FileWithData = { data: string; file: File; + id?: string; }; diff --git a/src/Uploader/useUploader.ts b/src/Uploader/useUploader.ts index 5cd27cf06..37216fc61 100644 --- a/src/Uploader/useUploader.ts +++ b/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 { diff --git a/src/Uploader/useUploader.types.ts b/src/Uploader/useUploader.types.ts index 320b472ce..31eb75152 100644 --- a/src/Uploader/useUploader.types.ts +++ b/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). */