release of v10.55.1 (#4250)

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx

@@ -13,6 +13,11 @@ breadcrumb:
 
 Change log for the Eufemia Forms extension.
 
+## v10.55.1
+
+- Added `console.log` warning when using invalid child in [Value.SummaryList](/uilib/extensions/forms/Value/SummaryList/) component.
+- Fixes [Field.Upload](/uilib/extensions/forms/feature-fields/more-fields/Upload/) error when using `required`, when navigating between Wizard step changes.
+
 ## v10.55
 
 - Added `transformLabel` to [Value.Composition](/uilib/extensions/forms/Value/Composition/).
@@ -128,7 +133,7 @@ Change log for the Eufemia Forms extension.
 
 ## v10.41
 
-- Added [Field.Upload](/uilib/extensions/forms/feature-fields/Upload/) component.
+- Added [Field.Upload](/uilib/extensions/forms/feature-fields/more-fields/Upload/) component.
 
 ## v10.38
 

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

@@ -36,23 +36,24 @@ export type Props = FieldHelpProps &
     | 'skeleton'
   >
 
-function UploadComponent(props: Props) {
-  const validateRequired = useCallback(
-    (value: UploadValue, { required, isChanged, error }) => {
-      const hasError = value?.some((file) => file.errorMessage)
-      if (hasError) {
-        return new FormError('Upload.errorInvalidFiles')
-      }
-
-      if (required && (!isChanged || !(value.length > 0))) {
-        return error
-      }
-
-      return undefined
-    },
-    []
-  )
+const validateRequired = (
+  value: UploadValue,
+  { required, isChanged, error }
+) => {
+  const hasError = value?.some((file) => file.errorMessage)
+  if (hasError) {
+    return new FormError('Upload.errorInvalidFiles')
+  }
 
+  const hasFiles = value?.length > 0
+  if (required && ((!isChanged && !hasFiles) || !hasFiles)) {
+    return error
+  }
+
+  return undefined
+}
+
+function UploadComponent(props: Props) {
   const sharedTr = useSharedTranslation().Upload
   const formsTr = useFormsTranslation().Upload
 
@@ -101,7 +102,7 @@ function UploadComponent(props: Props) {
 
   useEffect(() => {
     setFiles(value)
-  }, [handleBlur, setFiles, value])
+  }, [setFiles, value])
 
   const changeHandler = useCallback(
     ({ files }: { files: UploadValue }) => {
@@ -116,7 +117,7 @@ function UploadComponent(props: Props) {
   const width = widthProp as FieldBlockWidth
   const fieldBlockProps: FieldBlockProps = {
     id,
-    forId: id,
+    forId: `${id}-input`,
     labelSrOnly: true,
     className,
     width,

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { fireEvent, render, waitFor, screen } from '@testing-library/react'
-import { Field, Form } from '../../..'
+import { DataContext, Field, Form, Wizard } from '../../..'
 import { BYTES_IN_A_MEGA_BYTE } from '../../../../../components/upload/UploadVerify'
 import { createMockFile } from '../../../../../components/upload/__tests__/testHelpers'
 
@@ -74,7 +74,6 @@ describe('Field.Upload', () => {
   it('should render files given in data context', () => {
     render(
       <Form.Handler
-        onChange={(data) => console.log('onChange', data)}
         data={{
           myFiles: [
             { file: createMockFile('fileName-1.png', 100, 'image/png') },
@@ -782,4 +781,127 @@ describe('Field.Upload', () => {
       )
     })
   })
+
+  describe('In Wizard', () => {
+    const previousButton = () => {
+      return document.querySelector('.dnb-forms-previous-button')
+    }
+    const nextButton = () => {
+      return document.querySelector('.dnb-forms-next-button')
+    }
+    const output = () => {
+      return document.querySelector('output')
+    }
+
+    it('should keep files between steps', async () => {
+      let dataContext: DataContext.ContextState = null
+
+      render(
+        <Form.Handler>
+          <Wizard.Container>
+            <Wizard.Step title="Step 1">
+              <output>Step 1</output>
+              <Field.Upload required path="/files" />
+              <Wizard.Buttons />
+            </Wizard.Step>
+
+            <Wizard.Step title="Step 2">
+              <output>Step 2</output>
+              <Wizard.Buttons />
+            </Wizard.Step>
+          </Wizard.Container>
+
+          <DataContext.Consumer>
+            {(context) => {
+              dataContext = context
+              return null
+            }}
+          </DataContext.Consumer>
+        </Form.Handler>
+      )
+
+      const element = getRootElement()
+      const file = createMockFile('fileName-1.png', 100, 'image/png')
+
+      await waitFor(() =>
+        fireEvent.drop(element, {
+          dataTransfer: {
+            files: [file],
+          },
+        })
+      )
+
+      expect(output()).toHaveTextContent('Step 1')
+      expect(dataContext.internalDataRef.current.files[0].file).toBe(file)
+
+      await userEvent.click(nextButton())
+      expect(output()).toHaveTextContent('Step 2')
+      expect(dataContext.internalDataRef.current.files[0].file).toBe(file)
+
+      await userEvent.click(previousButton())
+      expect(output()).toHaveTextContent('Step 1')
+      expect(dataContext.internalDataRef.current.files[0].file).toBe(file)
+
+      await userEvent.click(nextButton())
+      expect(output()).toHaveTextContent('Step 2')
+      expect(dataContext.internalDataRef.current.files[0].file).toBe(file)
+      expect(dataContext.internalDataRef.current.files).toHaveLength(1)
+    })
+
+    it('should show required error when "required" is set', async () => {
+      render(
+        <Form.Handler>
+          <Wizard.Container>
+            <Wizard.Step title="Step 1">
+              <output>Step 1</output>
+              <Field.Upload required path="/files" />
+              <Wizard.Buttons />
+            </Wizard.Step>
+
+            <Wizard.Step title="Step 2">
+              <output>Step 2</output>
+              <Wizard.Buttons />
+            </Wizard.Step>
+          </Wizard.Container>
+        </Form.Handler>
+      )
+
+      const element = getRootElement()
+      const file = createMockFile('fileName-1.png', 100, 'image/png')
+
+      await waitFor(() =>
+        fireEvent.drop(element, {
+          dataTransfer: {
+            files: [file],
+          },
+        })
+      )
+
+      expect(output()).toHaveTextContent('Step 1')
+
+      await userEvent.click(nextButton())
+      expect(output()).toHaveTextContent('Step 2')
+
+      await userEvent.click(previousButton())
+      expect(output()).toHaveTextContent('Step 1')
+
+      expect(
+        document.querySelector('.dnb-form-status')
+      ).not.toBeInTheDocument()
+
+      const deleteButton = screen.queryByRole('button', {
+        name: nbShared.Upload.deleteButton,
+      })
+
+      await userEvent.click(deleteButton)
+      await userEvent.click(nextButton())
+
+      expect(output()).toHaveTextContent('Step 1')
+      expect(
+        document.querySelector(
+          '.dnb-forms-field-block__status .dnb-form-status'
+        )
+      ).toHaveTextContent(nbForms.Upload.errorRequired)
+    })
+  })
 })

packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/SummaryList.tsx

@@ -5,8 +5,10 @@ import SummaryListContext from './SummaryListContext'
 import Dl, { DlAllProps } from '../../../../elements/Dl'
 import ValueProvider from '../Provider/ValueProvider'
 import { ValueProps } from '../../types'
+import { useVerifyChildren } from './useVerifyChildren'
 
-export type Props = Omit<DlAllProps, 'label'> & {
+export type Props = Omit<DlAllProps, 'label' | 'children'> & {
+  children: React.ReactNode
   transformLabel?: ValueProps['transformLabel']
   inheritVisibility?: ValueProps['inheritVisibility']
   inheritLabel?: ValueProps['inheritLabel']
@@ -29,8 +31,14 @@ function SummaryList(props: Props) {
     inheritLabel,
   })
 
+  const { verifyChild } = useVerifyChildren({
+    children,
+    message: 'Value.SummaryList accepts only Value.* components!',
+    ignoreTypes: ['ValueBlock'],
+  })
+
   return (
-    <SummaryListContext.Provider value={{ layout }}>
+    <SummaryListContext.Provider value={{ layout, verifyChild }}>
       <Dl
         className={classnames('dnb-forms-summary-list', className)}
         layout={layout}

packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/SummaryListContext.tsx

@@ -4,6 +4,7 @@ import { DlProps } from '../../../../elements/Dl'
 export type SummaryListContextProps = {
   layout?: DlProps['layout']
   isNested?: boolean
+  verifyChild?: () => void
 }
 
 const SummaryListContext = React.createContext<

packages/dnb-eufemia/src/extensions/forms/Value/SummaryList/__tests__/SummaryList.test.tsx

@@ -17,6 +17,50 @@ describe('Field.SummaryList', () => {
     expect(element.getAttribute('aria-label')).toBe('Aria Label')
   })
 
+  it('should warn when child is not a Value.* component', () => {
+    const log = jest.spyOn(console, 'log').mockImplementation()
+
+    render(
+      <SummaryList>
+        <Form.SubHeading>Heading</Form.SubHeading>
+        <Value.String label="Label" value="Value" />
+      </SummaryList>
+    )
+
+    expect(log).toHaveBeenCalledTimes(1)
+    expect(log).toHaveBeenLastCalledWith(
+      expect.any(String),
+      expect.stringContaining(
+        'Value.SummaryList accepts only Value.* components!'
+      )
+    )
+
+    log.mockRestore()
+  })
+
+  it('should warn when child is not a Value.* component and is inside a Fragment', () => {
+    const log = jest.spyOn(console, 'log').mockImplementation()
+
+    render(
+      <SummaryList>
+        <>
+          <Form.SubHeading>Heading</Form.SubHeading>
+          <Value.String label="Label" value="Value" />
+        </>
+      </SummaryList>
+    )
+
+    expect(log).toHaveBeenCalledTimes(1)
+    expect(log).toHaveBeenLastCalledWith(
+      expect.any(String),
+      expect.stringContaining(
+        'Value.SummaryList accepts only Value.* components!'
+      )
+    )
+
+    log.mockRestore()
+  })
+
   it('should support spacing props', () => {
     const { rerender } = render(
       <SummaryList top="x-large">Space Summary</SummaryList>