FileUpload: 💥 Remove UNSAFE-prefix

.changeset/neat-monkeys-invite.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": minor
+---
+
+FileUpload: :boom: Remove UNSAFE-prefix

@navikt/core/react/src/form/file-upload/file-upload-dropzone.stories.tsx

@@ -2,11 +2,7 @@ import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { fireEvent, within } from "@storybook/test";
 import React from "react";
 import { ImageIcon } from "@navikt/aksel-icons";
-import {
-  type FileObject,
-  UNSAFE_FileUpload as FileUpload,
-  type FilesPartitioned,
-} from ".";
+import { type FileObject, FileUpload, type FilesPartitioned } from ".";
 
 const meta: Meta<typeof FileUpload.Dropzone> = {
   title: "ds-react/FileUpload/Dropzone",

@navikt/core/react/src/form/file-upload/file-upload-item.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryFn } from "@storybook/react";
 import React from "react";
-import { FileItem, UNSAFE_FileUpload as FileUpload } from ".";
+import { FileItem, FileUpload } from ".";
 import { VStack } from "../../layout/stack";
 
 const meta: Meta<typeof FileUpload.Item> = {

@navikt/core/react/src/form/file-upload/file-upload.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryFn } from "@storybook/react";
 import React, { useEffect, useState } from "react";
 import { UploadIcon } from "@navikt/aksel-icons";
-import { UNSAFE_FileUpload as FileUpload, FileUploadItemProps } from ".";
+import { FileUpload, FileUploadItemProps } from ".";
 import { Alert } from "../../alert";
 import { Button } from "../../button";
 import { VStack } from "../../layout/stack";

@navikt/core/react/src/form/file-upload/index.ts

@@ -1,9 +1,9 @@
 "use client";
-export { default as UNSAFE_FileUpload } from "./FileUpload";
-export { default as UNSAFE_FileUploadDropzone } from "./parts/dropzone/Dropzone";
+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 UNSAFE_FileUploadTrigger,
+  default as FileUploadTrigger,
   type FileUploadTriggerProps,
 } from "./parts/Trigger";
 export {
@@ -15,7 +15,7 @@ export {
   type FileRejectionReason,
 } from "./FileUpload.types";
 export {
-  default as UNSAFE_FileUploadItem,
+  default as FileUploadItem,
   type FileUploadItemProps,
 } from "./parts/item/Item";
 export { type FileItem, type FileMetadata } from "./parts/item/Item.types";

@navikt/core/react/src/index.ts

@@ -127,7 +127,7 @@ export {
 export { ErrorSummary, type ErrorSummaryProps } from "./form/error-summary";
 export { Fieldset, type FieldsetProps } from "./form/fieldset";
 export {
-  UNSAFE_FileUpload,
+  FileUpload,
   type FileAccepted,
   type FileItem,
   type FileMetadata,

aksel.nav.no/website/pages/eksempler/file-upload/default.tsx

@@ -3,8 +3,8 @@ import {
   FileObject,
   FileRejected,
   FileRejectionReason,
+  FileUpload,
   Heading,
-  UNSAFE_FileUpload,
   VStack,
 } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
@@ -21,7 +21,7 @@ const Example = () => {
 
   return (
     <VStack gap="6">
-      <UNSAFE_FileUpload.Dropzone
+      <FileUpload.Dropzone
         label="Last opp filer til søknaden"
         description={`Du kan laste opp Word- og PDF-filer. Maks 3 filer. Maks størrelse ${MAX_SIZE_MB} MB.`}
         accept=".doc,.docx,.pdf"
@@ -37,7 +37,7 @@ const Example = () => {
           </Heading>
           <VStack as="ul" gap="3">
             {acceptedFiles.map((file, index) => (
-              <UNSAFE_FileUpload.Item
+              <FileUpload.Item
                 as="li"
                 key={index}
                 file={file.file}
@@ -57,7 +57,7 @@ const Example = () => {
           </Heading>
           <VStack as="ul" gap="3">
             {rejectedFiles.map((rejected, index) => (
-              <UNSAFE_FileUpload.Item
+              <FileUpload.Item
                 as="li"
                 key={index}
                 file={rejected.file}

aksel.nav.no/website/pages/eksempler/file-upload/dropzone-disabled.tsx

@@ -1,15 +1,15 @@
-import { UNSAFE_FileUpload, VStack } from "@navikt/ds-react";
+import { FileUpload, VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => (
   <VStack gap="12">
-    <UNSAFE_FileUpload.Dropzone
+    <FileUpload.Dropzone
       label="Last opp filer"
       onSelect={console.info}
       disabled
     />
 
-    <UNSAFE_FileUpload.Dropzone
+    <FileUpload.Dropzone
       label="Last opp filer"
       onSelect={console.info}
       fileLimit={{ max: 1, current: 1 }}

aksel.nav.no/website/pages/eksempler/file-upload/error.tsx

@@ -1,15 +1,15 @@
-import { UNSAFE_FileUpload, VStack } from "@navikt/ds-react";
+import { FileUpload, VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => (
   <VStack gap="12">
-    <UNSAFE_FileUpload.Dropzone
+    <FileUpload.Dropzone
       label="Last opp filer"
       onSelect={console.info}
       error="Du må laste opp en fil"
     />
 
-    <UNSAFE_FileUpload.Item
+    <FileUpload.Item
       file={{ name: "eksempel.png", size: 200000 }}
       error="Filformatet støttes ikke"
     />

aksel.nav.no/website/pages/eksempler/file-upload/item-actions.tsx

@@ -1,11 +1,11 @@
-import { Heading, UNSAFE_FileUpload, VStack } from "@navikt/ds-react";
+import { FileUpload, Heading, VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => (
   <VStack gap="6">
     <div>
       <Heading size="small">retry</Heading>
-      <UNSAFE_FileUpload.Item
+      <FileUpload.Item
         file={new File(["abc".repeat(100000)], "eksempel1.pdf")}
         button={{
           action: "retry",
@@ -15,7 +15,7 @@ const Example = () => (
     </div>
     <div>
       <Heading size="small">delete</Heading>
-      <UNSAFE_FileUpload.Item
+      <FileUpload.Item
         file={{ name: "eksempel2.pdf", size: 200000 }}
         href="#"
         button={{

aksel.nav.no/website/pages/eksempler/file-upload/single.tsx

@@ -1,20 +1,20 @@
 import { useState } from "react";
-import { FileObject, UNSAFE_FileUpload, VStack } from "@navikt/ds-react";
+import { FileObject, FileUpload, VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   const [files, setFiles] = useState<FileObject[]>([]);
 
   return (
     <VStack gap="6">
-      <UNSAFE_FileUpload.Dropzone
+      <FileUpload.Dropzone
         label="Last opp fødselsattest"
         fileLimit={{ max: 1, current: files.length }}
         multiple={false}
         onSelect={setFiles}
       />
       {files.map((file) => (
-        <UNSAFE_FileUpload.Item
+        <FileUpload.Item
           key={file.file.name}
           file={file.file}
           button={{

aksel.nav.no/website/pages/eksempler/file-upload/translation.tsx

@@ -1,8 +1,8 @@
-import { Heading, UNSAFE_FileUpload, VStack } from "@navikt/ds-react";
+import { FileUpload, Heading, VStack } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => (
-  <UNSAFE_FileUpload
+  <FileUpload
     translations={{
       dropzone: {
         dragAndDropMultiple: "Dra og slipp bilder i format .png",
@@ -14,21 +14,18 @@ const Example = () => (
     }}
   >
     <VStack gap="6">
-      <UNSAFE_FileUpload.Dropzone
-        label="Last opp bilder"
-        onSelect={console.info}
-      />
+      <FileUpload.Dropzone label="Last opp bilder" onSelect={console.info} />
       <div>
         <Heading level="3" size="xsmall" spacing>
           Vedlegg
         </Heading>
         <VStack as="ul" gap="2">
-          <UNSAFE_FileUpload.Item
+          <FileUpload.Item
             as="li"
             file={{ name: "eksempel.png", size: 200000 }}
             status="uploading"
           />
-          <UNSAFE_FileUpload.Item
+          <FileUpload.Item
             as="li"
             file={{ name: "eksempel.png", size: 200000 }}
             status="uploading"
@@ -37,7 +34,7 @@ const Example = () => (
         </VStack>
       </div>
     </VStack>
-  </UNSAFE_FileUpload>
+  </FileUpload>
 );
 
 // EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE

aksel.nav.no/website/pages/eksempler/file-upload/trigger.tsx

@@ -1,14 +1,14 @@
 import { UploadIcon } from "@navikt/aksel-icons";
-import { Button, UNSAFE_FileUpload } from "@navikt/ds-react";
+import { Button, FileUpload } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
-    <UNSAFE_FileUpload.Trigger multiple={false} onSelect={console.info}>
+    <FileUpload.Trigger multiple={false} onSelect={console.info}>
       <Button variant="secondary" icon={<UploadIcon aria-hidden />}>
         Last opp filer
       </Button>
-    </UNSAFE_FileUpload.Trigger>
+    </FileUpload.Trigger>
   );
 };