chore(Upload): improve typing of id property (#4403)

dnbexperience · Dec 13, 2024 · f92b85e · f92b85e
1 parent 8bd5020
commit f92b85e
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 8 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/Examples.tsx
@@ -56,7 +56,17 @@ export const UploadPrefilledFileList = () => (
 
 export const UploadBasic = () => (
   <ComponentBox data-visual-test="upload-basic">
-    <Upload acceptedFileTypes={['jpg', 'png']} id="upload-basic" />
+    {() => {
+      const Component = () => {
+        const myUploadId = 'unique-id' // or a function, object or React Context reference
+
+        return (
+          <Upload acceptedFileTypes={['jpg', 'png']} id={myUploadId} />
+        )
+      }
+
+      return <Component />
+    }}
   </ComponentBox>
 )
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/info.mdx
@@ -22,7 +22,8 @@ The Upload component should be used in scenarios where the user has to upload an
 
 ```jsx
 function YourComponent() {
-  const { files, setFiles } = Upload.useUpload('unique-id')
+  const myUploadId = 'unique-id' // or a function, object or React Context reference
+  const { files, setFiles } = Upload.useUpload(myUploadId)
 
   React.useEffect(() => {
     setFiles(
@@ -35,7 +36,7 @@ function YourComponent() {
     )
   }, [fileNameFromBackend])
 
-  return <Upload id="unique-id" />
+  return <Upload id={myUploadId} />
 }
 ```
 

diff --git a/packages/dnb-eufemia/src/components/upload/UploadDocs.ts b/packages/dnb-eufemia/src/components/upload/UploadDocs.ts
@@ -3,7 +3,7 @@ import { PropertiesTableProps } from '../../shared/types'
 export const UploadProperties: PropertiesTableProps = {
   id: {
     doc: 'Unique id used with the useUpload hook to manage the files.',
-    type: 'string',
+    type: ['string', 'Function', 'Object', 'React.Context'],
     status: 'required',
   },
   acceptedFileTypes: {

diff --git a/packages/dnb-eufemia/src/components/upload/UploadDropzone.tsx b/packages/dnb-eufemia/src/components/upload/UploadDropzone.tsx
@@ -22,7 +22,7 @@ export default function UploadDropzone({
   className,
   ...rest
 }: Partial<UploadAllProps>) {
-  const props = rest as Omit<UploadProps, 'title' | 'onChange'>
+  const props = rest as Omit<UploadProps, 'title' | 'onChange' | 'id'>
   const context = useContext(UploadContext)
   const [hover, setHover] = useState(false)
   const hoverTimeout = useRef<NodeJS.Timer>()

diff --git a/packages/dnb-eufemia/src/components/upload/types.ts b/packages/dnb-eufemia/src/components/upload/types.ts
@@ -1,6 +1,7 @@
 import React from 'react'
 import type { SkeletonShow } from '../skeleton/Skeleton'
 import type { LocaleProps, SpacingProps } from '../../shared/types'
+import type { SharedStateId } from '../../shared/helpers/useSharedState'
 
 export type UploadAcceptedFileTypes = string[]
 
@@ -16,7 +17,7 @@ export type UploadProps = {
   /**
    * unique id used with the useUpload hook to manage the files
    */
-  id: string
+  id: SharedStateId
 
   /**
    * list of accepted file types.

diff --git a/packages/dnb-eufemia/src/components/upload/useUpload.ts b/packages/dnb-eufemia/src/components/upload/useUpload.ts
@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react'
 import { useSharedState } from '../../shared/helpers/useSharedState'
-import type { UploadFile, UploadFileNative } from './types'
+import type { UploadFile, UploadFileNative, UploadProps } from './types'
 
 export type useUploadReturn = {
   files: Array<UploadFile>
@@ -16,7 +16,7 @@ export type useUploadReturn = {
 /**
  * Use together with Upload with the same id to manage the files from outside the component.
  */
-function useUpload(id: string): useUploadReturn {
+function useUpload(id: UploadProps['id']): useUploadReturn {
   const { data, extend } = useSharedState<{
     files?: Array<UploadFile>
     internalFiles?: Array<UploadFile>