@navikt/ds-react 6.2.0 → 6.3.0

package/src/form/file-upload/i18n/get.ts

@@ -0,0 +1,48 @@
+import { TranslationObject } from "./i18n.types";
+
+/**
+ * https://github.com/Shopify/polaris/blob/main/polaris-react/src/utilities/get.ts#L3
+ */
+const OBJECT_NOTATION_MATCHER = /(\w+)/g;
+
+export function get(
+  keypath: string | string[],
+  ...objs: (TranslationObject | undefined)[]
+) {
+  const keys = Array.isArray(keypath) ? keypath : getKeypath(keypath);
+
+  for (const obj of objs) {
+    if (!obj) {
+      continue;
+    }
+
+    let acc: string | TranslationObject = obj;
+
+    for (let i = 0; i < keys.length; i++) {
+      const val = acc[keys[i]];
+      if (val === undefined) {
+        continue;
+      }
+      acc = val;
+    }
+
+    if (typeof acc === "string") {
+      return acc;
+    }
+  }
+
+  throw new Error(
+    "Error translating key. The keypath does not resolve to a string.",
+  );
+}
+
+function getKeypath(str: string) {
+  const path: string[] = [];
+  let result: RegExpExecArray | null;
+  while ((result = OBJECT_NOTATION_MATCHER.exec(str))) {
+    const [, first, second] = result;
+    path.push(first || second);
+  }
+
+  return path;
+}

package/src/form/file-upload/i18n/i18n.context.test.tsx

@@ -0,0 +1,92 @@
+import { renderHook } from "@testing-library/react";
+import React from "react";
+import { describe, expect, test } from "vitest";
+import { I18nContext, useI18n } from "./i18n.context";
+
+describe("useI18n", () => {
+  test("should throw error if key is not found", () => {
+    const { result } = renderHook(() => useI18n("FileUpload"));
+    const translate = result.current;
+    // @ts-expect-error - Testing nonexistent key
+    expect(() => translate("item.nonexistentKey")).toThrowError();
+  });
+
+  test("should return the translated text from I18nContext", () => {
+    const i18n = { FileUpload: { item: { uploading: "Test translation" } } };
+    const { result } = renderHook(() => useI18n("FileUpload"), {
+      wrapper: ({ children }) => (
+        <I18nContext.Provider value={i18n}>{children}</I18nContext.Provider>
+      ),
+    });
+    const translate = result.current;
+    expect(translate("item.uploading")).toBe("Test translation");
+  });
+
+  test("should return the translated text from first context object", () => {
+    const i18n1 = {
+      FileUpload: { item: { uploading: "Correct translation" } },
+    };
+    const i18n2 = { FileUpload: { item: { uploading: "Wrong translation" } } };
+    const { result } = renderHook(() => useI18n("FileUpload"), {
+      wrapper: ({ children }) => (
+        <I18nContext.Provider value={[i18n1, i18n2]}>
+          {children}
+        </I18nContext.Provider>
+      ),
+    });
+    const translate = result.current;
+    expect(translate("item.uploading")).toBe("Correct translation");
+  });
+
+  test("should return the translated text from second context object", () => {
+    const i18n1 = { FileUpload: { item: { uploading: "Foo" } } };
+    const i18n2 = {
+      FileUpload: { item: { downloading: "Correct translation" } },
+    };
+    const { result } = renderHook(() => useI18n("FileUpload"), {
+      wrapper: ({ children }) => (
+        <I18nContext.Provider value={[i18n1, i18n2]}>
+          {children}
+        </I18nContext.Provider>
+      ),
+    });
+    const translate = result.current;
+    expect(translate("item.downloading")).toBe("Correct translation");
+  });
+
+  test("should return the translated text from first local object", () => {
+    const i18n1 = { item: { uploading: "Correct translation" } };
+    const i18n2 = { item: { uploading: "Wrong translation" } };
+    const { result } = renderHook(() => useI18n("FileUpload", i18n1, i18n2));
+    const translate = result.current;
+    expect(translate("item.uploading")).toBe("Correct translation");
+  });
+
+  test("should return the translated text from second local object", () => {
+    const i18n1 = { item: { uploading: "Foo" } };
+    const i18n2 = { item: { downloading: "Correct translation" } };
+    const { result } = renderHook(() => useI18n("FileUpload", i18n1, i18n2));
+    const translate = result.current;
+    expect(translate("item.downloading")).toBe("Correct translation");
+  });
+
+  test("should replace placeholders in the translated text", () => {
+    const i18n = {
+      item: { uploading: "Hello, {name}. You have {cnt} messages." },
+    };
+    const { result } = renderHook(() => useI18n("FileUpload", i18n));
+    const translate = result.current;
+    expect(
+      translate("item.uploading", { replacements: { name: "John", cnt: 3 } }),
+    ).toBe("Hello, John. You have 3 messages.");
+  });
+
+  test("should throw an error if replacement key is not found", () => {
+    const i18n = { item: { uploading: "Hello, {name}" } };
+    const { result } = renderHook(() => useI18n("FileUpload", i18n));
+    const translate = result.current;
+    expect(() =>
+      translate("item.uploading", { replacements: { other: "John" } }),
+    ).toThrowError();
+  });
+});

package/src/form/file-upload/i18n/i18n.context.ts

@@ -0,0 +1,67 @@
+import { createContext, useContext } from "react";
+import { get } from "./get";
+import {
+  Component,
+  ComponentTranslation,
+  TranslationDictionary,
+} from "./i18n.types";
+import nb from "./locales/nb.json";
+
+/**
+ * https://regex101.com/r/LYKWi3/1
+ */
+const REPLACE_REGEX = /{[^}]*}/g;
+
+export const I18nContext = createContext<
+  TranslationDictionary | TranslationDictionary[]
+>(nb);
+
+/* https://dev.to/pffigueiredo/typescript-utility-keyof-nested-object-2pa3 */
+type NestedKeyOf<ObjectType extends object> = {
+  [Key in keyof ObjectType & (string | number)]: ObjectType[Key] extends object
+    ? `${Key}.${NestedKeyOf<ObjectType[Key]>}`
+    : `${Key}`;
+}[keyof ObjectType & (string | number)];
+
+export function useI18n<T extends Component>(
+  componentName: T,
+  ...local: (ComponentTranslation<T> | undefined)[]
+) {
+  const i18n = useContext(I18nContext);
+
+  /**
+   * https://github.com/Shopify/polaris/blob/2115f9ba2f5bcbf2ad15745233501bff2db81ecf/polaris-react/src/utilities/i18n/I18n.ts#L24
+   */
+  const translate = (
+    keypath: NestedKeyOf<(typeof nb)[T]>,
+    options?: { replacements: Record<string, string | number> },
+  ) => {
+    const text = get(
+      keypath,
+      ...local,
+      ...(Array.isArray(i18n)
+        ? i18n.map((t) => t[componentName])
+        : [i18n[componentName]]),
+    );
+
+    if (options?.replacements) {
+      return text.replace(REPLACE_REGEX, (match) => {
+        const replacement = match.substring(1, match.length - 1);
+
+        if (options.replacements[replacement] === undefined) {
+          const replacementData = JSON.stringify(options.replacements);
+
+          throw new Error(
+            `Error translating key '${keypath}'. No replacement syntax ({}) found for key '${replacement}'. The following replacements were passed: '${replacementData}'`,
+          );
+        }
+
+        return options.replacements[replacement] as string; // can also be a number, but JS doesn't mind...
+      });
+    }
+
+    return text;
+  };
+
+  return translate;
+}

package/src/form/file-upload/i18n/i18n.types.ts

@@ -0,0 +1,20 @@
+import nb from "./locales/nb.json";
+
+export interface TranslationObject {
+  [key: string]: string | TranslationObject | undefined;
+}
+
+export interface TranslationDictionary {
+  [key: string]: TranslationObject | undefined;
+}
+
+/* https://stackoverflow.com/questions/47914536/use-partial-in-nested-property-with-typescripts */
+type RecursivePartial<T> = {
+  [P in keyof T]?: RecursivePartial<T[P]>;
+};
+
+export type Component = keyof typeof nb;
+
+export type ComponentTranslation<T extends Component> = RecursivePartial<
+  (typeof nb)[T]
+>;

package/src/form/file-upload/i18n/locales/nb.json

@@ -0,0 +1,20 @@
+{
+  "FileUpload": {
+    "dropzone": {
+      "button": "Velg fil",
+      "buttonMultiple": "Velg filer",
+      "dragAndDrop": "Dra og slipp filen her",
+      "dragAndDropMultiple": "Dra og slipp filer her",
+      "drop": "Slipp",
+      "or": "eller",
+      "disabled": "Filopplasting er deaktivert",
+      "disabledFilelimit": "Du kan ikke laste opp flere filer"
+    },
+    "item": {
+      "retryButtonTitle": "Prøv å laste opp filen på nytt",
+      "deleteButtonTitle": "Slett filen",
+      "uploading": "Laster opp…",
+      "downloading": "Laster ned…"
+    }
+  }
+}

package/src/form/file-upload/i18n/merge.ts

@@ -0,0 +1,35 @@
+import { TranslationDictionary, TranslationObject } from "./i18n.types";
+
+export function merge(...objs: TranslationDictionary[]) {
+  let final: TranslationDictionary = {};
+
+  for (const obj of objs) {
+    final = mergeRecursively(final, obj);
+  }
+
+  return final;
+}
+
+function mergeRecursively<T>(
+  objA: T,
+  objB: TranslationDictionary | TranslationObject,
+) {
+  const objARes = { ...objA };
+
+  for (const key in objB) {
+    if (!(key in objB)) {
+      continue;
+    }
+
+    const a = objARes[key];
+    const b = objB[key];
+
+    if (b && typeof b !== "string" && typeof a !== "string") {
+      objARes[key] = mergeRecursively(a, b);
+    } else {
+      objARes[key] = b;
+    }
+  }
+
+  return objARes;
+}

package/src/form/file-upload/index.ts

@@ -0,0 +1,21 @@
+"use client";
+export { default as UNSAFE_FileUpload } from "./FileUpload";
+export { default as UNSAFE_FileUploadDropzone } from "./parts/dropzone/Dropzone";
+export { type FileUploadDropzoneProps } from "./parts/dropzone/dropzone.types";
+export {
+  default as UNSAFE_FileUploadTrigger,
+  type FileUploadTriggerProps,
+} from "./parts/Trigger";
+export {
+  type FileObject,
+  type FileRejected,
+  type FileAccepted,
+  type FileRejectedPartitioned,
+  type FilesPartitioned,
+  type FileRejectionReason,
+} from "./FileUpload.types";
+export {
+  default as UNSAFE_FileUploadItem,
+  type FileUploadItemProps,
+} from "./parts/item/Item";
+export { type FileItem, type FileMetadata } from "./parts/item/Item.types";

package/src/form/file-upload/parts/Trigger.tsx

@@ -0,0 +1,48 @@
+import React, { forwardRef } from "react";
+import { Slot } from "../../../util/Slot";
+import { FileUploadBaseProps } from "../FileUpload.types";
+import { useFileUpload } from "../useFileUpload";
+
+export interface FileUploadTriggerProps
+  extends Omit<FileUploadBaseProps, "fileLimit"> {
+  children: React.ReactNode;
+}
+
+const Trigger = forwardRef<HTMLInputElement, FileUploadTriggerProps>(
+  (
+    {
+      children,
+      multiple = true,
+      accept,
+      onSelect,
+      validator,
+      maxSizeInBytes,
+    }: FileUploadTriggerProps,
+    ref,
+  ) => {
+    const { onChange, inputRef, mergedRef } = useFileUpload({
+      ref,
+      onSelect,
+      validator,
+      accept,
+      maxSizeInBytes,
+      disabled: false,
+    });
+
+    return (
+      <>
+        <Slot onClick={() => inputRef.current?.click()}>{children}</Slot>
+        <input
+          ref={mergedRef}
+          type="file"
+          style={{ display: "none" }}
+          multiple={multiple}
+          accept={accept}
+          onChange={onChange}
+        />
+      </>
+    );
+  },
+);
+
+export default Trigger;

package/src/form/file-upload/parts/dropzone/Dropzone.tsx

@@ -0,0 +1,180 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { CircleSlashIcon, CloudUpIcon } from "@navikt/aksel-icons";
+import { Button } from "../../../../button";
+import { BodyShort, ErrorMessage, Label } from "../../../../typography";
+import { composeEventHandlers } from "../../../../util/composeEventHandlers";
+import { useId } from "../../../../util/hooks";
+import { omit } from "../../../../util/omit";
+import { useFormField } from "../../../useFormField";
+import { useFileUploadTranslation } from "../../FileUpload.context";
+import { useI18n } from "../../i18n/i18n.context";
+import { useFileUpload } from "../../useFileUpload";
+import { FileUploadDropzoneProps } from "./dropzone.types";
+import { useDropzone } from "./useDropzone";
+
+const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
+  (props: FileUploadDropzoneProps, ref) => {
+    const {
+      onSelect,
+      error,
+      label,
+      description,
+      className,
+      multiple = true,
+      accept,
+      validator,
+      maxSizeInBytes,
+      fileLimit,
+      icon: DropzoneIcon = CloudUpIcon,
+      disabled,
+      translations,
+      onClick,
+      ...rest
+    } = props;
+
+    const context = useFileUploadTranslation(false);
+    const translate = useI18n(
+      "FileUpload",
+      { dropzone: translations },
+      context?.translations,
+    );
+
+    const fileLimitReached =
+      fileLimit && fileLimit?.current >= fileLimit?.max && fileLimit?.max > 0;
+
+    const _disabled = disabled ?? fileLimitReached;
+
+    const { inputProps, errorId, showErrorMsg, hasError, inputDescriptionId } =
+      useFormField({ ...props, disabled: _disabled }, "fileUpload");
+    const {
+      id: inputId,
+      "aria-describedby": ariaDescribedby,
+      ...inputPropsRest
+    } = inputProps;
+    const labelId = useId();
+
+    const { upload, onChange, inputRef, mergedRef } = useFileUpload({
+      ref,
+      onSelect,
+      validator,
+      accept,
+      maxSizeInBytes,
+      disabled: inputProps.disabled,
+    });
+
+    const dropzoneCtx = useDropzone({
+      upload,
+      disabled: inputProps.disabled,
+    });
+
+    return (
+      <div
+        className={cl("navds-form-field", "navds-dropzone", className, {
+          "navds-dropzone--error": hasError,
+          "navds-dropzone--dragging": dropzoneCtx.isDraggingOver,
+          "navds-dropzone--disabled": inputProps.disabled,
+        })}
+      >
+        <Label
+          htmlFor={inputId}
+          id={labelId}
+          className="navds-form-field__label"
+        >
+          {label}
+        </Label>
+        {!!description && (
+          <BodyShort
+            id={inputDescriptionId}
+            className="navds-form-field__description"
+            as="div"
+          >
+            {description}
+          </BodyShort>
+        )}
+        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+        <div
+          className="navds-dropzone__area"
+          onDragEnter={dropzoneCtx.onDragEnter}
+          onDragOver={dropzoneCtx.onDragOver}
+          onDragLeave={dropzoneCtx.onDragLeave}
+          onDrop={dropzoneCtx.onDrop}
+          onClick={composeEventHandlers(
+            onClick,
+            () => inputRef.current?.click(),
+          )}
+        >
+          {!inputProps.disabled && (
+            <>
+              <div className="navds-dropzone__area-icon">
+                <DropzoneIcon fontSize="1.5rem" aria-hidden />
+              </div>
+              <div className="navds-dropzone__area-release">
+                <div className="navds-dropzone__area-release__icon">
+                  <DropzoneIcon aria-hidden />
+                </div>
+                <span
+                  aria-hidden={!dropzoneCtx.isDraggingOver}
+                  className="navds-dropzone__area-release__text"
+                >
+                  {translate("dropzone.drop")}
+                </span>
+              </div>
+              <div aria-hidden>
+                <BodyShort as="div" spacing>
+                  {multiple
+                    ? translate("dropzone.dragAndDropMultiple")
+                    : translate("dropzone.dragAndDrop")}
+                </BodyShort>
+                <BodyShort as="div">{translate("dropzone.or")}</BodyShort>
+              </div>
+              <Button
+                {...omit(rest, ["errorId"])}
+                {...inputPropsRest}
+                aria-describedby={cl(labelId, ariaDescribedby)}
+                className="navds-dropzone__area-button"
+                type="button"
+                variant="secondary"
+              >
+                {multiple
+                  ? translate("dropzone.buttonMultiple")
+                  : translate("dropzone.button")}
+              </Button>
+            </>
+          )}
+
+          {inputProps.disabled && (
+            <div className="navds-dropzone__area-disabled">
+              <CircleSlashIcon aria-hidden fontSize="1.75rem" />
+              <BodyShort as="div">
+                {fileLimitReached
+                  ? translate("dropzone.disabledFilelimit")
+                  : translate("dropzone.disabled")}
+              </BodyShort>
+            </div>
+          )}
+
+          <input
+            id={inputId}
+            type="file"
+            style={{ display: "none" }}
+            multiple={multiple}
+            accept={accept}
+            onChange={onChange}
+            ref={mergedRef}
+          />
+        </div>
+        <div
+          className="navds-form-field__error"
+          id={errorId}
+          aria-relevant="additions removals"
+          aria-live="polite"
+        >
+          {showErrorMsg && <ErrorMessage>{error}</ErrorMessage>}
+        </div>
+      </div>
+    );
+  },
+);
+
+export default Dropzone;

package/src/form/file-upload/parts/dropzone/dropzone.types.ts

@@ -0,0 +1,22 @@
+import { FormFieldProps } from "../../../useFormField";
+import { FileUploadBaseProps } from "../../FileUpload.types";
+import { ComponentTranslation } from "../../i18n/i18n.types";
+
+export interface FileUploadDropzoneProps
+  extends FileUploadBaseProps,
+    Omit<FormFieldProps, "size" | "readOnly">,
+    Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect" | "onClick">,
+    Pick<React.HTMLAttributes<HTMLDivElement>, "onClick"> {
+  /**
+   * Text shown to the user.
+   */
+  label: string;
+  /**
+   * @default CloudUpIcon
+   */
+  icon?: React.ComponentType<any>;
+  /**
+   * i18n-API for customizing texts and labels
+   */
+  translations?: ComponentTranslation<"FileUpload">["dropzone"];
+}

package/src/form/file-upload/parts/dropzone/useDropzone.ts

@@ -0,0 +1,43 @@
+import { useState } from "react";
+import { UseFileUploadProps } from "../../useFileUpload";
+
+interface Props {
+  upload: (fileList: FileList) => void;
+  disabled: UseFileUploadProps["disabled"];
+}
+
+export const useDropzone = ({ upload, disabled }: Props) => {
+  const [isDraggingOver, setIsDraggingOver] = useState(false);
+
+  const onDragEnter = () => {
+    setIsDraggingOver(true);
+  };
+
+  const onDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault(); // Prevents the browser from opening the file in a new tab
+  };
+
+  const onDragLeave = () => {
+    setIsDraggingOver(false);
+  };
+
+  const onDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault(); // Prevents the browser from opening the file in a new tab
+    setIsDraggingOver(false);
+
+    const fileList = event.dataTransfer.files;
+    if (!fileList) {
+      return;
+    }
+
+    upload(fileList);
+  };
+
+  return {
+    isDraggingOver,
+    onDragEnter: disabled ? undefined : onDragEnter,
+    onDragOver: disabled ? undefined : onDragOver,
+    onDragLeave: disabled ? undefined : onDragLeave,
+    onDrop: disabled ? undefined : onDrop,
+  };
+};