@navikt/ds-react 8.2.2 → 8.4.0

package/src/form/file-upload/dropzone/FileUploadDropzone.tsx

@@ -0,0 +1,183 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { forwardRef } from "react";
+import { CircleSlashIcon, CloudUpIcon } from "@navikt/aksel-icons";
+import { Button } from "../../../button";
+import { BodyShort, ErrorMessage, Label } from "../../../typography";
+import { omit, useId } from "../../../utils-external";
+import { cl, composeEventHandlers } from "../../../utils/helpers";
+import { useI18n } from "../../../utils/i18n/i18n.hooks";
+import { useFormField } from "../../useFormField";
+import { useFileUpload } from "../hooks/useFileUpload";
+import { useFileUploadTranslation } from "../root/FileUploadRoot.context";
+import { FileUploadDropzoneProps } from "./dropzone.types";
+import { useDropzone } from "./useDropzone";
+
+const FileUploadDropzone = forwardRef<
+  HTMLInputElement,
+  FileUploadDropzoneProps
+>((props: FileUploadDropzoneProps, ref) => {
+  const {
+    onSelect,
+    error,
+    label,
+    description,
+    className,
+    multiple = true,
+    accept,
+    validator,
+    maxSizeInBytes,
+    fileLimit,
+    icon: DropzoneIcon = CloudUpIcon,
+    disabled,
+    translations,
+    onClick,
+    id: buttonId,
+    "data-color": color,
+    ...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({ ...omit(props, ["id"]), 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("aksel-form-field", "aksel-dropzone", className, {
+        "aksel-dropzone--error": hasError,
+        "aksel-dropzone--dragging": dropzoneCtx.isDraggingOver,
+        "aksel-dropzone--disabled": inputProps.disabled,
+      })}
+    >
+      <Label htmlFor={inputId} id={labelId} className="aksel-form-field__label">
+        {label}
+      </Label>
+      {!!description && (
+        <BodyShort
+          id={inputDescriptionId}
+          className="aksel-form-field__description"
+          as="div"
+        >
+          {description}
+        </BodyShort>
+      )}
+      {/** biome-ignore lint/a11y/noStaticElementInteractions: Assistive technologies will use the input within.  */}
+      <div
+        className="aksel-dropzone__area"
+        onDragEnter={dropzoneCtx.onDragEnter}
+        onDragOver={dropzoneCtx.onDragOver}
+        onDragLeave={dropzoneCtx.onDragLeave}
+        onDrop={dropzoneCtx.onDrop}
+        onClick={composeEventHandlers(onClick, () => inputRef.current?.click())}
+        data-disabled={inputProps.disabled}
+        data-color={color}
+      >
+        {!inputProps.disabled && (
+          <>
+            <div className="aksel-dropzone__area-icon">
+              <DropzoneIcon fontSize="1.5rem" aria-hidden />
+            </div>
+            <div className="aksel-dropzone__area-release">
+              <div className="aksel-dropzone__area-release__icon">
+                <DropzoneIcon aria-hidden />
+              </div>
+              <span
+                aria-hidden={!dropzoneCtx.isDraggingOver}
+                className="aksel-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}
+              id={buttonId}
+              aria-describedby={cl(labelId, ariaDescribedby)}
+              className="aksel-dropzone__area-button"
+              type="button"
+              variant="secondary"
+            >
+              {multiple
+                ? translate("dropzone.buttonMultiple")
+                : translate("dropzone.button")}
+            </Button>
+          </>
+        )}
+
+        {inputProps.disabled && (
+          <div className="aksel-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}
+          disabled={inputProps.disabled}
+        />
+      </div>
+      <div
+        className="aksel-form-field__error"
+        id={errorId}
+        aria-relevant="additions removals"
+        aria-live="polite"
+      >
+        {showErrorMsg && <ErrorMessage showIcon>{error}</ErrorMessage>}
+      </div>
+    </div>
+  );
+});
+
+export default FileUploadDropzone;
+export { FileUploadDropzone };
+export type { FileUploadDropzoneProps };

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

@@ -1,9 +1,10 @@
-import type { ComponentTranslation } from "../../../../utils/i18n/i18n.types";
-import { FormFieldProps } from "../../../useFormField";
-import { FileUploadBaseProps } from "../../FileUpload.types";
+import type { ComponentTranslation } from "../../../utils/i18n/i18n.types";
+import { FormFieldProps } from "../../useFormField";
+import { FileUploadBaseProps } from "../FileUpload.types";
 
 export interface FileUploadDropzoneProps
-  extends FileUploadBaseProps,
+  extends
+    FileUploadBaseProps,
     Omit<FormFieldProps, "size" | "readOnly">,
     Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onSelect" | "onClick">,
     Pick<React.HTMLAttributes<HTMLDivElement>, "onClick"> {

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

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { UseFileUploadProps } from "../../useFileUpload";
+import { UseFileUploadProps } from "../hooks/useFileUpload";
 
 interface Props {
   upload: (fileList: FileList) => void;

package/src/form/file-upload/{parts/item/utils → helpers}/file-type-checker.ts

@@ -1,4 +1,4 @@
-import { FileItem } from "../Item.types";
+import { FileItem } from "../item/FileUploadItem.types";
 
 export const isNativeFile = (fileItem: FileItem): fileItem is File =>
   "lastModified" in fileItem;

package/src/form/file-upload/{parts/item/utils → helpers}/format-file-size.ts

@@ -1,4 +1,4 @@
-import { FileItem } from "../Item.types";
+import { FileItem } from "../item/FileUploadItem.types";
 
 const MAX_MEGA_BYTES = 500;
 

package/src/form/file-upload/{useFileUpload.ts → hooks/useFileUpload.ts}

@@ -1,10 +1,12 @@
 import { useRef } from "react";
-import { useMergeRefs } from "../../utils/hooks";
-import { FileUploadBaseProps } from "./FileUpload.types";
-import { validateFiles } from "./utils/validate-files";
-
-export interface UseFileUploadProps
-  extends Omit<FileUploadBaseProps, "fileLimit"> {
+import { useMergeRefs } from "../../../utils/hooks";
+import { FileUploadBaseProps } from "../FileUpload.types";
+import { validateFiles } from "../helpers/validate-files";
+
+export interface UseFileUploadProps extends Omit<
+  FileUploadBaseProps,
+  "fileLimit"
+> {
   ref: React.ForwardedRef<HTMLInputElement>;
   disabled?: boolean;
 }

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

@@ -1,11 +1,15 @@
 "use client";
-export { default as FileUpload } from "./FileUpload";
-export { default as FileUploadDropzone } from "./parts/dropzone/Dropzone";
-export type { FileUploadDropzoneProps } from "./parts/dropzone/dropzone.types";
 export {
-  default as FileUploadTrigger,
-  type FileUploadTriggerProps,
-} from "./parts/Trigger";
+  default as FileUpload,
+  FileUploadTrigger,
+  FileUploadDropzone,
+  FileUploadItem,
+} from "./root/FileUploadRoot";
+export type {
+  FileUploadTriggerProps,
+  FileUploadDropzoneProps,
+  FileUploadItemProps,
+} from "./root/FileUploadRoot";
 export type {
   FileObject,
   FileRejected,
@@ -14,8 +18,4 @@ export type {
   FilesPartitioned,
   FileRejectionReason,
 } from "./FileUpload.types";
-export {
-  default as FileUploadItem,
-  type FileUploadItemProps,
-} from "./parts/item/Item";
-export type { FileItem, FileMetadata } from "./parts/item/Item.types";
+export type { FileItem, FileMetadata } from "./item/FileUploadItem.types";

package/src/form/file-upload/item/FileUploadItem.tsx

@@ -0,0 +1,142 @@
+import React, { MouseEvent, forwardRef } from "react";
+import { BodyLong, BodyShort, ErrorMessage } from "../../../typography";
+import type { OverridableComponent } from "../../../utils-external";
+import { cl } from "../../../utils/helpers";
+import { useI18n } from "../../../utils/i18n/i18n.hooks";
+import type { ComponentTranslation } from "../../../utils/i18n/i18n.types";
+import { formatFileSize } from "../helpers/format-file-size";
+import { ItemActionField } from "../item-action-field/ItemActionField";
+import { ItemHeader } from "../item-header/ItemHeader";
+import { useFileUploadTranslation } from "../root/FileUploadRoot.context";
+import { FileItem } from "./FileUploadItem.types";
+
+interface FileUploadItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Overrides html-tag
+   * @default "div"
+   */
+  as?: ("div" | "li") & React.ElementType;
+  /**
+   * Either a native File or file metadata.
+   */
+  file: FileItem;
+  /**
+   * onClick on the file name.
+   *
+   * If neither this nor `href` is set, and the `file` prop is a native file, onClick will download the file.
+   */
+  onFileClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+  /**
+   * href on the file name.
+   *
+   * If neither this nor `onFileClick` is set, and the `file` prop is a native file, onClick will download the file.
+   */
+  href?: string;
+  /**
+   * Error message relating to the item.
+   */
+  error?: string;
+  /**
+   * Status "downloading" and "uploading" displays a loading indicator.
+   * @default "idle"
+   */
+  status?: "downloading" | "uploading" | "idle";
+  /**
+   * File description. Replaces file size when status is "idle".
+   * This is useful for displaying upload date. Should not act as a replacement for error messages.
+   */
+  description?: string;
+  /**
+   * Props for the action button.
+   */
+  button?:
+    | {
+        action: "delete" | "retry";
+        onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+        id?: string;
+      }
+    | React.ReactNode;
+  /**
+   * i18n-API for customizing texts and labels
+   */
+  translations?: ComponentTranslation<"FileUpload">["item"];
+}
+
+export const FileUploadItem: OverridableComponent<
+  FileUploadItemProps,
+  HTMLDivElement
+> = forwardRef(
+  (
+    {
+      as: Component = "div",
+      file,
+      status = "idle",
+      error,
+      className,
+      href,
+      onFileClick,
+      button,
+      translations,
+      description,
+      ...rest
+    }: FileUploadItemProps,
+    ref,
+  ) => {
+    const context = useFileUploadTranslation(false);
+    const translate = useI18n(
+      "FileUpload",
+      { item: translations },
+      context?.translations,
+    );
+
+    const showError = !!error && status === "idle";
+
+    function getStatusText() {
+      if (status === "uploading") {
+        return translate("item.uploading");
+      }
+      if (status === "downloading") {
+        return translate("item.downloading");
+      }
+      return description ?? formatFileSize(file);
+    }
+
+    return (
+      <Component
+        ref={ref}
+        {...rest}
+        className={cl("aksel-file-item", className, {
+          "aksel-file-item--error": showError,
+        })}
+      >
+        <div className="aksel-file-item__inner">
+          <BodyLong as="div" className="aksel-file-item__file-info">
+            <ItemHeader file={file} href={href} onClick={onFileClick} />
+            <BodyShort as="div" size="small">
+              {getStatusText()}
+            </BodyShort>
+            <div
+              className="aksel-file-item__error"
+              aria-relevant="additions removals"
+              aria-live="polite"
+            >
+              {showError && (
+                <ErrorMessage size="small" showIcon>
+                  {error}
+                </ErrorMessage>
+              )}
+            </div>
+          </BodyLong>
+          <ItemActionField
+            isLoading={status !== "idle"}
+            button={button}
+            translate={translate}
+          />
+        </div>
+      </Component>
+    );
+  },
+);
+
+export default FileUploadItem;
+export type { FileUploadItemProps };

package/src/form/file-upload/{parts/item → item-action-field}/ItemActionField.tsx

@@ -1,9 +1,9 @@
 import React, { MouseEvent } from "react";
 import { ArrowsCirclepathIcon, TrashIcon } from "@navikt/aksel-icons";
-import { Button } from "../../../../button";
-import Spacer from "../../../../layout/stack/Spacer";
-import { Loader } from "../../../../loader";
-import type { TFunction } from "../../../../utils/i18n/i18n.types";
+import { Button } from "../../../button";
+import { Loader } from "../../../loader";
+import { Spacer } from "../../../primitives/stack";
+import type { TFunction } from "../../../utils/i18n/i18n.types";
 
 interface ItemActionFieldProps {
   isLoading: boolean;

package/src/form/file-upload/{parts/item → item-header}/ItemHeader.tsx

@@ -1,10 +1,10 @@
 import React from "react";
-import { useThemeInternal } from "../../../../theme/Theme";
-import { LinkAnchor } from "../../../../utils/components/link-anchor";
-import { FileItem } from "./Item.types";
-import ItemIcon from "./ItemIcon";
-import { downloadFile } from "./utils/download-file";
-import { isNativeFile } from "./utils/file-type-checker";
+import { useThemeInternal } from "../../../theme/Theme";
+import { LinkAnchor } from "../../../utils/components/link-anchor";
+import { downloadFile } from "../helpers/download-file";
+import { isNativeFile } from "../helpers/file-type-checker";
+import ItemIcon from "../item-icon/ItemIcon";
+import { FileItem } from "../item/FileUploadItem.types";
 
 interface Props {
   file: FileItem;

package/src/form/file-upload/{parts/item → item-icon}/ItemIcon.tsx

@@ -8,7 +8,7 @@ import {
   FileTextIcon,
   FileWordIcon,
 } from "@navikt/aksel-icons";
-import { FileItem } from "./Item.types";
+import { FileItem } from "../item/FileUploadItem.types";
 
 interface ItemIconProps {
   file: FileItem;

package/src/form/file-upload/{FileUpload.context.tsx → root/FileUploadRoot.context.tsx}

@@ -1,5 +1,5 @@
-import { createStrictContext } from "../../utils/helpers";
-import { ComponentTranslation } from "../../utils/i18n/i18n.types";
+import { createStrictContext } from "../../../utils/helpers";
+import { ComponentTranslation } from "../../../utils/i18n/i18n.types";
 
 export type FileUploadLocaleContextProps = {
   translations?: ComponentTranslation<"FileUpload">;

package/src/form/file-upload/{FileUpload.tsx → root/FileUploadRoot.tsx}

@@ -1,10 +1,19 @@
 import React, { HTMLAttributes, forwardRef } from "react";
-import { cl } from "../../utils/helpers";
-import { ComponentTranslation } from "../../utils/i18n/i18n.types";
-import { FileUploadLocaleContextProvider } from "./FileUpload.context";
-import Trigger from "./parts/Trigger";
-import Dropzone from "./parts/dropzone/Dropzone";
-import Item from "./parts/item/Item";
+import { cl } from "../../../utils/helpers";
+import { ComponentTranslation } from "../../../utils/i18n/i18n.types";
+import {
+  FileUploadDropzone,
+  type FileUploadDropzoneProps,
+} from "../dropzone/FileUploadDropzone";
+import {
+  FileUploadItem,
+  type FileUploadItemProps,
+} from "../item/FileUploadItem";
+import {
+  FileUploadTrigger,
+  type FileUploadTriggerProps,
+} from "../trigger/FileUploadTrigger";
+import { FileUploadLocaleContextProvider } from "./FileUploadRoot.context";
 
 interface FileUploadProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
@@ -19,6 +28,7 @@ interface FileUploadComponent extends React.ForwardRefExoticComponent<
 > {
   /**
    * Framed area to drag-n-drop files, upload files with button-click or copy-paste.
+   * @see 🏷️ {@link FileUploadDropzoneProps}
    * @example
    * Single file
    * ```jsx
@@ -49,10 +59,11 @@ interface FileUploadComponent extends React.ForwardRefExoticComponent<
    * />
    * ```
    */
-  Dropzone: typeof Dropzone;
+  Dropzone: typeof FileUploadDropzone;
 
   /**
    * Displays a file with status, file size, action and error message.
+   * @see 🏷️ {@link FileUploadItemProps}
    * @example
    * Single
    * ```jsx
@@ -92,9 +103,10 @@ interface FileUploadComponent extends React.ForwardRefExoticComponent<
    * <FileUpload.Item file={file} button={{ action:"delete", onClick:... }} />
    * ```
    */
-  Item: typeof Item;
+  Item: typeof FileUploadItem;
   /**
    * Wrapper for a button to trigger file select.
+   * @see 🏷️ {@link FileUploadTriggerProps}
    * @example
    * ```jsx
    * <FileUpload.Trigger onSelect={...}>
@@ -102,7 +114,7 @@ interface FileUploadComponent extends React.ForwardRefExoticComponent<
    * </FileUpload.Trigger>
    * ```
    */
-  Trigger: typeof Trigger;
+  Trigger: typeof FileUploadTrigger;
 }
 
 /**
@@ -134,8 +146,15 @@ export const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(
   },
 ) as FileUploadComponent;
 
-FileUpload.Dropzone = Dropzone;
-FileUpload.Item = Item;
-FileUpload.Trigger = Trigger;
+FileUpload.Dropzone = FileUploadDropzone;
+FileUpload.Item = FileUploadItem;
+FileUpload.Trigger = FileUploadTrigger;
 
 export default FileUpload;
+
+export { FileUploadTrigger, FileUploadDropzone, FileUploadItem };
+export type {
+  FileUploadTriggerProps,
+  FileUploadDropzoneProps,
+  FileUploadItemProps,
+};

package/src/form/file-upload/{parts/Trigger.tsx → trigger/FileUploadTrigger.tsx}

@@ -1,14 +1,16 @@
 import React, { forwardRef } from "react";
 import { Slot } from "../../../utils/components/slot/Slot";
 import { FileUploadBaseProps } from "../FileUpload.types";
-import { useFileUpload } from "../useFileUpload";
+import { useFileUpload } from "../hooks/useFileUpload";
 
-export interface FileUploadTriggerProps
-  extends Omit<FileUploadBaseProps, "fileLimit"> {
+interface FileUploadTriggerProps extends Omit<
+  FileUploadBaseProps,
+  "fileLimit"
+> {
   children: React.ReactNode;
 }
 
-const Trigger = forwardRef<HTMLInputElement, FileUploadTriggerProps>(
+const FileUploadTrigger = forwardRef<HTMLInputElement, FileUploadTriggerProps>(
   (
     {
       children,
@@ -45,4 +47,6 @@ const Trigger = forwardRef<HTMLInputElement, FileUploadTriggerProps>(
   },
 );
 
-export default Trigger;
+export default FileUploadTrigger;
+export { FileUploadTrigger };
+export type { FileUploadTriggerProps };

package/src/form/form-progress/FormProgress.tsx

@@ -1,16 +1,15 @@
 import React, { forwardRef } from "react";
 import { ChevronDownIcon } from "@navikt/aksel-icons";
-import Button from "../../button/Button";
-import Collapsible from "../../collapsible/Collapsible";
-import { HStack } from "../../layout/stack";
+import { Button } from "../../button";
+import { Collapsible } from "../../collapsible";
+import { HStack } from "../../primitives/stack";
 import { ProgressBar } from "../../progress-bar";
 import { Stepper, StepperStepProps } from "../../stepper";
 import { BodyShort } from "../../typography";
 import { useI18n } from "../../utils/i18n/i18n.hooks";
 import { ComponentTranslation } from "../../utils/i18n/i18n.types";
 
-export interface FormProgressProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface FormProgressProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Total number of steps.
    */
@@ -53,10 +52,9 @@ export interface FormProgressProps
 
 export type FormProgressStepProps = StepperStepProps;
 
-interface FormProgressComponent
-  extends React.ForwardRefExoticComponent<
-    FormProgressProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface FormProgressComponent extends React.ForwardRefExoticComponent<
+  FormProgressProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * To be used inside `<FormProgress>`.
    */

package/src/form/form-summary/FormSummary.tsx

@@ -9,10 +9,9 @@ import FormSummaryHeading from "./FormSummaryHeading";
 import FormSummaryLabel from "./FormSummaryLabel";
 import FormSummaryValue from "./FormSummaryValue";
 
-interface FormSummaryComponent
-  extends React.ForwardRefExoticComponent<
-    FormSummaryProps & React.RefAttributes<HTMLDivElement>
-  > {
+interface FormSummaryComponent extends React.ForwardRefExoticComponent<
+  FormSummaryProps & React.RefAttributes<HTMLDivElement>
+> {
   /**
    * Must include `<FormSummary.Heading>`.
    */

package/src/form/form-summary/FormSummaryAnswer.tsx

@@ -2,8 +2,7 @@ import React from "react";
 import { useThemeInternal } from "../../theme/Theme";
 import { cl } from "../../utils/helpers";
 
-export interface FormSummaryAnswerProps
-  extends React.HTMLAttributes<HTMLDivElement> {
+export interface FormSummaryAnswerProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Must include:
    * - `<FormSummary.Label>`

package/src/form/form-summary/FormSummaryAnswers.tsx

@@ -3,8 +3,7 @@ import { cl } from "../../utils/helpers";
 
 const FormSummaryAnswersContext = React.createContext(false);
 
-export interface FormSummaryAnswersProps
-  extends React.HTMLAttributes<HTMLDListElement> {
+export interface FormSummaryAnswersProps extends React.HTMLAttributes<HTMLDListElement> {
   /**
    * Must include one or more of `<FormSummary.Answer>`.
    */

package/src/form/form-summary/FormSummaryEditLink.tsx

@@ -6,8 +6,7 @@ import { CompositionWarning } from "../../utils/components/composition-warning";
 import { cl } from "../../utils/helpers";
 import { useI18n } from "../../utils/i18n/i18n.hooks";
 
-export interface FormSummaryEditProps
-  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface FormSummaryEditProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   /**
    * URL to the relevant part of the form, where the answers can be edited.
    */