@navikt/ds-react 6.2.0 → 6.3.1

package/src/form/file-upload/utils/validate-files.test.ts

@@ -0,0 +1,132 @@
+import { validateFiles } from "./validate-files";
+
+const createTxtFile = (name: string = "foo.txt") =>
+  new File(["foo"], name, {
+    type: "text/plain",
+  });
+const createCsvFile = (name: string = "bar.csv") =>
+  new File(["abc,123"], name, {
+    type: "text/csv",
+  });
+
+describe("partitionFiles", () => {
+  test("accepts all files when accept parameter is undefined", () => {
+    const files = [createTxtFile(), createCsvFile()];
+    const {
+      partitionedFiles: { accepted, rejected },
+    } = validateFiles(files);
+
+    expect(accepted.length).toBe(2);
+    expect(rejected.length).toBe(0);
+  });
+
+  test("accepts all files when accept parameter is empty", () => {
+    const files = [createTxtFile(), createCsvFile()];
+    const {
+      partitionedFiles: { accepted, rejected },
+    } = validateFiles(files, "");
+
+    expect(accepted.length).toBe(2);
+    expect(rejected.length).toBe(0);
+  });
+
+  test("rejects file that does not match accept parameter", () => {
+    const txtFileName = "foo.txt";
+    const csvFileName = "bar.csv";
+    const files = [createTxtFile(txtFileName), createCsvFile(csvFileName)];
+    const {
+      partitionedFiles: { accepted, rejected },
+    } = validateFiles(files, ".txt");
+
+    expect(accepted.length).toBe(1);
+    expect(rejected.length).toBe(1);
+    expect(accepted[0].name).toBe(txtFileName);
+    expect(rejected[0].file.name).toBe(csvFileName);
+  });
+
+  test("rejects file that does not pass validator", () => {
+    const txtFileName = "foo.txt";
+    const csvFileName = "bar.csv";
+    const csvFile = createCsvFile(csvFileName);
+    const txtFile = createTxtFile(txtFileName);
+    const files = [txtFile, csvFile];
+    const validator = (file: File) => {
+      if (file.name === txtFile.name) {
+        return true;
+      }
+      return "custom validation error";
+    };
+    const {
+      partitionedFiles: { accepted, rejected },
+    } = validateFiles(files, undefined, validator);
+
+    expect(accepted.length).toBe(1);
+    expect(rejected.length).toBe(1);
+    expect(accepted[0].name).toBe(txtFileName);
+    expect(rejected[0].file.name).toBe(csvFileName);
+    expect(rejected[0].reasons).toEqual(["custom validation error"]);
+  });
+
+  test("rejects file that passes accept parameter but does not pass validator", () => {
+    const txtFileName = "foo.txt";
+    const csvFileName = "bar.csv";
+    const csvFile = createCsvFile(csvFileName);
+    const txtFile = createTxtFile(txtFileName);
+    const files = [txtFile, csvFile];
+    const validator = (file: File) => {
+      if (file.name === txtFile.name) {
+        return true;
+      }
+      return "custom validation error";
+    };
+    const {
+      partitionedFiles: { accepted, rejected },
+    } = validateFiles(files, ".txt, .csv", validator);
+
+    expect(accepted.length).toBe(1);
+    expect(rejected.length).toBe(1);
+    expect(accepted[0].name).toBe(txtFileName);
+    expect(rejected[0].file.name).toBe(csvFileName);
+  });
+
+  test("rejects file that passes validator but does not pass accept parameter", () => {
+    const txtFileName = "foo.txt";
+    const csvFileName = "bar.csv";
+    const csvFile = createCsvFile(csvFileName);
+    const txtFile = createTxtFile(txtFileName);
+    const files = [txtFile, csvFile];
+    const validator = (file: File) => {
+      if (file.name === csvFile.name || file.name === txtFile.name) {
+        return true;
+      }
+      return "custom validation error";
+    };
+    const {
+      partitionedFiles: { accepted, rejected },
+    } = validateFiles(files, ".csv", validator);
+
+    expect(accepted.length).toBe(1);
+    expect(rejected.length).toBe(1);
+    expect(accepted[0].name).toBe(csvFileName);
+    expect(rejected[0].file.name).toBe(txtFileName);
+    expect(rejected[0].reasons).toEqual(["fileType"]);
+  });
+
+  test("rejects file that is too large", () => {
+    const txtFileName = "foo.txt";
+    const csvFileName = "bar.csv";
+    const csvFile = createCsvFile(csvFileName);
+    const txtFile = createTxtFile(txtFileName);
+    const files = [txtFile, csvFile];
+    const maxSizeInBytes = 5;
+    const {
+      partitionedFiles: { accepted, rejected },
+    } = validateFiles(files, undefined, undefined, maxSizeInBytes);
+
+    expect(accepted.length).toBe(1);
+    expect(rejected.length).toBe(1);
+    expect(accepted[0].name).toBe(txtFileName);
+    expect(rejected[0].file.name).toBe(csvFileName);
+    expect(rejected[0].reasons).toEqual(["fileSize"]);
+  });
+});

package/src/form/file-upload/utils/validate-files.ts

@@ -0,0 +1,62 @@
+import {
+  FileObject,
+  FileUploadBaseProps,
+  FilesPartitioned,
+  fileRejectionReason,
+} from "../FileUpload.types";
+import { isAcceptedFileType } from "./is-accepted-file-type";
+import { isAcceptedSize } from "./is-accepted-size";
+
+export const validateFiles = (
+  files: File[],
+  accept?: string,
+  validator?: FileUploadBaseProps["validator"],
+  maxSizeInBytes: number = -1,
+) => {
+  const allFiles: FileObject[] = [];
+  const accepted: File[] = [];
+  const rejected: FilesPartitioned["rejected"] = [];
+
+  files.forEach((file) => {
+    const acceptedFileType = isAcceptedFileType(file, accept);
+    const acceptedFileSize = isAcceptedSize(file, maxSizeInBytes);
+    const customValidation = validator ? validator(file) : true;
+
+    const reasons: FilesPartitioned["rejected"][0]["reasons"] = [];
+    if (customValidation !== true) {
+      reasons.push(customValidation);
+    }
+
+    if (!acceptedFileType) {
+      reasons.push(fileRejectionReason.FileType);
+    }
+
+    if (!acceptedFileSize) {
+      reasons.push(fileRejectionReason.FileSize);
+    }
+
+    allFiles.push({
+      file,
+      error: reasons.length > 0,
+      reasons,
+    });
+
+    if (reasons.length === 0) {
+      accepted.push(file);
+      return;
+    }
+
+    rejected.push({
+      file,
+      reasons,
+    });
+  });
+
+  return {
+    files: allFiles,
+    partitionedFiles: {
+      accepted,
+      rejected,
+    },
+  };
+};

package/src/index.ts

@@ -136,6 +136,20 @@ export { Select, type SelectProps } from "./form/select";
 export { Switch, type SwitchProps } from "./form/switch";
 export { Textarea, type TextareaProps } from "./form/textarea";
 export { TextField, type TextFieldProps } from "./form/textfield";
+export {
+  UNSAFE_FileUpload,
+  type FileUploadDropzoneProps,
+  type FileUploadTriggerProps,
+  type FileObject,
+  type FileRejected,
+  type FileAccepted,
+  type FileRejectedPartitioned,
+  type FilesPartitioned,
+  type FileRejectionReason,
+  type FileUploadItemProps,
+  type FileItem,
+  type FileMetadata,
+} from "./form/file-upload";
 
 /**
  * @deprecated

package/src/internal-header/header.stories.tsx

@@ -2,10 +2,12 @@ import { Meta } from "@storybook/react";
 import React from "react";
 import {
   ChevronDownIcon,
+  CogIcon,
   ExternalLinkIcon,
+  LeaveIcon,
   MenuGridIcon,
 } from "@navikt/aksel-icons";
-import { BodyLong, BodyShort, Detail } from "@navikt/ds-react";
+import { BodyLong, BodyShort, Detail, Spacer } from "@navikt/ds-react";
 import { Dropdown } from "../dropdown";
 import InternalHeader from "./InternalHeader";
 
@@ -102,10 +104,11 @@ export const Default = {
               <Dropdown.Menu.Divider />
               <Dropdown.Menu.List>
                 <Dropdown.Menu.List.Item as="a" href="/#settings">
-                  Innstillinger
+                  Innstillinger <Spacer />{" "}
+                  <CogIcon aria-hidden fontSize="1.5rem" />
                 </Dropdown.Menu.List.Item>
                 <Dropdown.Menu.List.Item onClick={() => console.log("logg ut")}>
-                  Logg ut
+                  Logg ut <Spacer /> <LeaveIcon aria-hidden fontSize="1.5rem" />
                 </Dropdown.Menu.List.Item>
               </Dropdown.Menu.List>
             </Dropdown.Menu>
@@ -180,10 +183,10 @@ export const UserWithMenu = () => (
         <Dropdown.Menu.Divider />
         <Dropdown.Menu.List>
           <Dropdown.Menu.List.Item as="a" href="/#settings">
-            Innstillinger
+            Innstillinger <Spacer /> <CogIcon aria-hidden fontSize="1.5rem" />
           </Dropdown.Menu.List.Item>
           <Dropdown.Menu.List.Item onClick={() => console.log("logg ut")}>
-            Logg ut
+            Logg ut <Spacer /> <LeaveIcon aria-hidden fontSize="1.5rem" />
           </Dropdown.Menu.List.Item>
         </Dropdown.Menu.List>
       </Dropdown.Menu>

package/src/loader/Loader.tsx

@@ -32,13 +32,6 @@ export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
    * @default "neutral"
    */
   variant?: "neutral" | "interaction" | "inverted";
-  /**
-   * Allows getting a ref to the component instance.
-   * Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
-   *
-   * @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
-   */
-  ref?: React.Ref<SVGSVGElement>;
 }
 
 /* Workaround for @types/react v17/v18 feil */

package/src/table/DataCell.tsx

@@ -15,12 +15,7 @@ export interface DataCellProps
   textSize?: "medium" | "small";
 }
 
-export interface DataCellType
-  extends React.ForwardRefExoticComponent<
-    DataCellProps & React.RefAttributes<HTMLTableCellElement>
-  > {}
-
-export const DataCell: DataCellType = forwardRef(
+export const DataCell = forwardRef<HTMLTableCellElement, DataCellProps>(
   ({ className, children = "", align, textSize, ...rest }, ref) => {
     return (
       <BodyShort

package/src/util/create-context.tsx

@@ -16,6 +16,7 @@ export interface CreateContextOptions<T> {
   errorMessage?: string;
   name?: string;
   defaultValue?: T;
+  strict?: boolean;
 }
 
 type ProviderProps<T> = T & { children: React.ReactNode };

package/src/util/hooks/useMergeRefs.ts

@@ -1,7 +1,7 @@
 /* https://github.com/radix-ui/primitives/blob/main/packages/react/compose-refs/src/composeRefs.tsx */
 import React from "react";
 
-type PossibleRef<T> = React.Ref<T> | undefined;
+type PossibleRef<T> = React.LegacyRef<T> | undefined;
 
 // https://github.com/gregberge/react-merge-refs
 /**