release of v10.60.1 (#4381)

packages/dnb-design-system-portal/src/docs/uilib/components/upload/Examples.tsx

@@ -44,7 +44,7 @@ export const UploadPrefilledFileList = () => (
               errorMessage: 'This is no real file!',
             },
           ])
-        }, [])
+        }, [setFiles])
 
         return <Upload acceptedFileTypes={['jpg', 'png']} id="file-list" />
       }
@@ -128,7 +128,7 @@ export const UploadRemoveFile = () => (
 
               reader.readAsDataURL(file)
             })
-          }, [files])
+          }, [files, images])
 
           return (
             <Section aria-label="List of chosen images">
@@ -368,8 +368,15 @@ export const UploadOnFileClick = () => (
             {
               file: createMockFile('1501870.jpg', 123, 'image/png'),
             },
+            {
+              file: createMockFile(
+                'file-name-that-is-very-long-and-has-letters.png',
+                123,
+                'image/png',
+              ),
+            },
           ])
-        }, [])
+        }, [setFiles])
 
         async function mockAsyncFileFetching({ fileItem }) {
           const request = createRequest()
@@ -385,13 +392,11 @@ export const UploadOnFileClick = () => (
         }
 
         return (
-          <>
-            <Upload
-              acceptedFileTypes={['jpg', 'png']}
-              id="upload-on-file-click"
-              onFileClick={mockAsyncFileFetching}
-            />
-          </>
+          <Upload
+            acceptedFileTypes={['jpg', 'png']}
+            id="upload-on-file-click"
+            onFileClick={mockAsyncFileFetching}
+          />
         )
       }
 

packages/dnb-eufemia/src/components/dropdown/stories/Dropdown.stories.tsx

@@ -1006,6 +1006,17 @@ export const GlobalStatusExample = () => {
   )
 }
 
+export const TypesExample = () => {
+  interface MyInterface {
+    content: string
+    selected_key: string
+  }
+
+  const myData: MyInterface[] = []
+
+  return <Dropdown data={myData} />
+}
+
 export function InDialog() {
   const list = Array(30).fill('Content')
   return (

packages/dnb-eufemia/src/components/upload/UploadFileListCell.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React, { useCallback, useRef } from 'react'
 import classnames from 'classnames'
 
 // Components
@@ -25,7 +25,7 @@ import {
 import { UploadFile, UploadFileNative } from './types'
 
 // Shared
-import { getPreviousSibling, warn } from '../../shared/component-helper'
+import { getPreviousSibling } from '../../shared/component-helper'
 import useUpload from './useUpload'
 import { getFileTypeFromExtension } from './UploadVerify'
 import UploadFileLink from './UploadFileListLink'
@@ -96,26 +96,20 @@ const UploadFileListCell = ({
   const cellRef = useRef<HTMLLIElement>()
   const exists = useExistsHighlight(id, file)
 
-  const handleDisappearFocus = () => {
-    try {
-      const cellElement = cellRef.current
-      const focusElement = getPreviousSibling(
-        '.dnb-upload',
-        cellElement
-      ).querySelector(
-        '.dnb-upload__file-input-button'
-      ) as HTMLButtonElement
-      focusElement.focus()
-    } catch (e) {
-      warn(e)
-    }
-  }
+  const handleDisappearFocus = useCallback(() => {
+    const cellElement = cellRef.current
+    const focusElement = getPreviousSibling(
+      '.dnb-upload',
+      cellElement
+    )?.querySelector('.dnb-upload__file-input-button') as HTMLButtonElement
+    focusElement?.focus({ preventScroll: true })
+  }, [cellRef])
 
-  const onDeleteHandler = () => {
+  const onDeleteHandler = useCallback(() => {
     handleDisappearFocus()
 
     onDelete()
-  }
+  }, [handleDisappearFocus, onDelete])
 
   return (
     <li

packages/dnb-eufemia/src/components/upload/__tests__/UploadFileListCell.test.tsx

@@ -301,7 +301,7 @@ describe('UploadFileListCell', () => {
     it('renders the delete button', () => {
       render(<UploadFileListCell {...defaultProps} />)
 
-      const element = screen.getByRole('button')
+      const element = document.querySelector('button')
 
       expect(element).toBeInTheDocument()
     })
@@ -316,15 +316,15 @@ describe('UploadFileListCell', () => {
         />
       )
 
-      const element = screen.getByRole('button')
+      const element = document.querySelector('button')
 
       expect(element.textContent).toMatch(deleteButtonText)
     })
 
     it('renders button as tertiary', () => {
       render(<UploadFileListCell {...defaultProps} />)
 
-      const element = screen.getByRole('button')
+      const element = document.querySelector('button')
 
       expect(element.className).toMatch('dnb-button--tertiary')
     })
@@ -357,7 +357,7 @@ describe('UploadFileListCell', () => {
           onDelete={onDelete}
         />
       )
-      const element = screen.getByRole('button')
+      const element = document.querySelector('button')
 
       fireEvent.click(element)
 
@@ -374,7 +374,7 @@ describe('UploadFileListCell', () => {
           }}
         />
       )
-      const element = screen.getByRole('button')
+      const element = document.querySelector('button')
 
       expect(element).toBeDisabled()
     })
@@ -394,5 +394,45 @@ describe('UploadFileListCell', () => {
         document.querySelector('.dnb-progress-indicator')
       ).not.toBeInTheDocument()
     })
+
+    it('should set focus when clicking the delete button', () => {
+      const MockComponent = () => {
+        return (
+          <div className="dnb-upload">
+            <UploadFileListCell
+              {...defaultProps}
+              uploadFile={{
+                file: createMockFile('file.png', 100, 'image/png'),
+              }}
+            />
+            <button className="dnb-upload__file-input-button">
+              Mock button
+            </button>
+          </div>
+        )
+      }
+      const { rerender } = render(<MockComponent />)
+
+      const removeButton = document.querySelector('button')
+      const uploadButton = document.querySelector(
+        '.dnb-upload__file-input-button'
+      )
+
+      expect(document.body).toHaveFocus()
+
+      fireEvent.click(removeButton)
+      expect(uploadButton).toHaveFocus()
+
+      const focus = jest.fn()
+      jest
+        .spyOn(HTMLElement.prototype, 'focus')
+        .mockImplementationOnce(focus)
+
+      rerender(<MockComponent />)
+
+      fireEvent.click(removeButton)
+      expect(focus).toHaveBeenCalledTimes(1)
+      expect(focus).toHaveBeenCalledWith({ preventScroll: true })
+    })
   })
 })

packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap

@@ -818,13 +818,13 @@ button .dnb-form-status__text {
 }
 .dnb-upload__file-cell__content {
   display: flex;
-  flex-direction: row;
+  column-gap: var(--spacing-small);
   justify-content: space-between;
   align-items: center;
 }
 .dnb-upload__file-cell__content__left {
   display: flex;
-  flex-direction: row;
+  column-gap: var(--spacing-small);
   align-items: center;
 }
 .dnb-upload__file-cell__content__left .dnb-icon {
@@ -839,7 +839,6 @@ button .dnb-form-status__text {
 .dnb-upload__file-cell__text-container {
   display: flex;
   flex-direction: column;
-  margin-left: var(--spacing-small);
 }
 .dnb-upload__file-cell__text-container--loading {
   font-size: var(--font-size-basis);

packages/dnb-eufemia/src/components/upload/style/dnb-upload.scss

@@ -106,14 +106,14 @@
 
     &__content {
       display: flex;
-      flex-direction: row;
+      column-gap: var(--spacing-small);
 
       justify-content: space-between;
       align-items: center;
 
       &__left {
         display: flex;
-        flex-direction: row;
+        column-gap: var(--spacing-small);
         align-items: center;
 
         .dnb-icon {
@@ -134,8 +134,6 @@
       display: flex;
       flex-direction: column;
 
-      margin-left: var(--spacing-small);
-
       &--loading {
         font-size: var(--font-size-basis);
       }

packages/dnb-eufemia/src/extensions/forms/Field/Upload/Upload.tsx

@@ -118,13 +118,13 @@ function UploadComponent(props: Props) {
     onFileClick,
   } = rest
 
-  const { files: fileContext, setFiles } = useUpload(id)
+  const { files, setFiles } = useUpload(id)
 
   const filesRef = useRef<Array<UploadFile>>()
 
   useEffect(() => {
-    filesRef.current = fileContext
-  }, [fileContext])
+    filesRef.current = files
+  }, [files])
 
   useEffect(() => {
     // Files stored in session storage will not have a property (due to serialization).
@@ -137,15 +137,16 @@ function UploadComponent(props: Props) {
   const handleChangeAsync = useCallback(
     async (existingFiles: UploadValue) => {
       // Filter out existing files
-      const existingFileIds = fileContext?.map((file) => file.id) || []
+      const existingFileIds =
+        filesRef.current?.map((file) => file.id) || []
       const newFiles = existingFiles.filter(
         (file) => !existingFileIds.includes(file.id)
       )
 
       if (newFiles.length > 0) {
         // Set loading
         setFiles([
-          ...fileContext,
+          ...filesRef.current,
           ...updateFileLoadingState(newFiles, { isLoading: true }),
         ])
 
@@ -171,7 +172,7 @@ function UploadComponent(props: Props) {
         handleChange(existingFiles)
       }
     },
-    [fileContext, setFiles, fileHandler, handleChange]
+    [files, setFiles, fileHandler, handleChange]
   )
 
   const changeHandler = useCallback(