diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx index bd88c286958..a0d1fd25799 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.mdx @@ -32,13 +32,13 @@ You can also use the file blob in combination with the [FileReader](https://deve ### Upload loading state -When uploading the file you can set the loading state of the request using the `Upload.useUpload` hook and passing isLoading to the file that is being uploaded. +When uploading the file you can set the loading state of the request using the `Upload.useUpload` hook and passing `isLoading` to the file that is being uploaded. ### Upload error message -The only checks we do currently is for the file size and the file type. These errors are handled by the HTML element ´input´ so they aren't selectable. If you want any other error messages you can use the `Upload.useUpload` the same way as with the loading state. +The only file verification the Upload component does is for the file size and the file type. These errors are handled by the HTML element `input` so they aren't selectable. If you want any other error messages you can use the `Upload.useUpload` hook the same way as with the loading state. diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/events.mdx index 434952b0c81..c03e28485cd 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/events.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/events.mdx @@ -2,11 +2,11 @@ showTabs: true --- +import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' +import { UploadEvents } from '@dnb/eufemia/src/components/upload/UploadDocs' + ## Events -| Events | Description | -| -------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -| `onChange` | _(optional)_ will be called on `files` changes made by the user. Access the files with `{ files }` (containing each a `fileItem`). | -| `onFileDelete` | _(optional)_ will be called once a file gets deleted by the user. Access the deleted file with `{ fileItem }`. | + Each `fileItem` will contain a `{ file, id }` (File Object and an unique ID) along with other information. 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 index 506565f0c36..de771b1e274 100644 --- 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 @@ -10,7 +10,7 @@ The Upload component should be used in scenarios where the user has to upload an - Files selected by the user should be uploaded immediately (temporary location). - The user should be able to remove them (files) during the session. -- If the Upload component is shown in a submit form, then a [GlobalStatus](/uilib/components/global-status) should be a part of the form. +- The Upload component connects to the [GlobalStatus](/uilib/components/global-status) and displays file error messages there as well. - Validation messages coming from the "backend" should be displayed for each file via the `useUpload` hook. See [example](/uilib/components/upload/#upload-error-message) below. - The `useUpload` hook can be placed on any location in your application, and does not need to be where the `Upload` component is used. @@ -33,6 +33,10 @@ function YourComponent() { } ``` +## JPG vs JPEG + +When `jpg` is defined (most commonly used), then the component will also accept `jpeg` files. + ## Backend integration The "backend" receiving the files is decoupled and can be any existing or new system. diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/properties.mdx index 99c1302d50f..c506d6001ca 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/properties.mdx @@ -2,28 +2,16 @@ showTabs: true --- +import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' +import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' +import { UploadProperties } from '@dnb/eufemia/src/components/upload/UploadDocs' + ## Properties -| Properties | Description | -| --------------------------------------- | ----------------------------------------------------------------------------------------- | -| `acceptedFileTypes` | _(required)_ List of accepted file types. More details above. | -| `filesAmountLimit` | _(optional)_ Defines the amount of files the user can select and upload. Defaults to 100. | -| `fileMaxSize` | _(optional)_ `fileMaxSize` is max size of each file in MB. Defaults to 5 MB. | -| `title` | _(optional)_ Custom text property. Replaces the default title. | -| `text` | _(optional)_ Custom text property. Replaces the default text. | -| `fileTypeDescription` | _(optional)_ Custom text property. Replaces the default accepted format description. | -| `fileSizeDescription` | _(optional)_ Custom text property. Replaces the default max file size description. | -| `fileSizeContent` | _(optional)_ Custom text property. Replaces the default file size content. | -| `buttonText` | _(optional)_ Custom text property. Replaces the default upload button text. | -| `loadingText` | _(optional)_ Custom text property. Replaces the default loading text. | -| `errorLargeFile` | _(optional)_ Custom text property. Replaces the default file size error message. | -| `errorUnsupportedFile` | _(optional)_ Custom text property. Replaces the default file type error message. | -| `errorAmountLimit` | _(optional)_ Custom text property. Replaces the default amount limit error message. | -| `deleteButton` | _(optional)_ Custom text property. Replaces the default delete button text. | -| `fileListAriaLabel` | _(optional)_ Custom text property. Replaces the default list aria label. | -| `skeleton` | _(optional)_ Skeleton should be applied when loading content Default: `null`. | -| [Space](/uilib/layout/space/properties) | _(optional)_ Spacing properties like `top` or `bottom` are supported. | + + +## Translations -## JPG vs JPEG +All translation keys listed in the translations table below, can be used as a component property (like `title` or `text`). -When `jpg` is defined (most commonly used), then the component will also accept `jpeg` files. + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx index 382137a08f5..1aea4113039 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/changelog.mdx @@ -13,6 +13,10 @@ breadcrumb: Change log for the Eufemia Forms extension. +## v10.41 + +- Added [Field.Upload](/uilib/extensions/forms/Field/Upload/) component. + ## v10.38 - Added support for nesting fields inside of [Form.Section](/uilib/extensions/forms/Form/Section/) and [Form.ArraySelection](/uilib/extensions/forms/Form/ArraySelection/). diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Slider/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Slider/info.mdx index f932740efeb..fea631b429a 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Slider/info.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Slider/info.mdx @@ -11,7 +11,7 @@ import { Field } from '@dnb/eufemia/extensions/forms' render() ``` -## Multithub support +## Multithumb support You can use the `paths` property to define an array with JSON Pointers for multiple thumb buttons. diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload.mdx new file mode 100644 index 00000000000..df1e3685efc --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload.mdx @@ -0,0 +1,29 @@ +--- +title: 'Upload' +description: '`Field.Upload` is a wrapper for the Upload component to make it easier to use inside a form.' +showTabs: true +theme: 'sbanken' +hideInMenu: true +tabs: + - title: Info + key: '/info' + - title: Demos + key: '/demos' + - title: Properties + key: '/properties' + - title: Events + key: '/events' +breadcrumb: + - text: Forms + href: /uilib/extensions/forms/ + - text: Feature fields + href: /uilib/extensions/forms/feature-fields/ + - text: Upload + href: /uilib/extensions/forms/feature-fields/Upload/ +--- + +import Info from 'Docs/uilib/extensions/forms/feature-fields/Upload/info' +import Demos from 'Docs/uilib/extensions/forms/feature-fields/Upload/demos' + + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload/Examples.tsx new file mode 100644 index 00000000000..ff1e5e18130 --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload/Examples.tsx @@ -0,0 +1,89 @@ +import { Flex } from '@dnb/eufemia/src' +import ComponentBox from '../../../../../../shared/tags/ComponentBox' +import { Field, Form } from '@dnb/eufemia/src/extensions/forms' + +export const BasicUsage = () => { + return ( + + + + + + ) +} + +export const Required = () => { + return ( + + console.log('onSubmit', data)}> + + + + + + + ) +} + +export const WithHelp = () => { + return ( + + + + ) +} + +export const Customized = () => { + return ( + + + + ) +} + +export const WithPath = () => { + const createMockFile = (name: string, size: number, type: string) => { + const file = new File([], name, { type }) + Object.defineProperty(file, 'size', { + get() { + return size + }, + }) + return file + } + + return ( + + console.log('onChange', data)} + data={{ + myFiles: [ + { file: createMockFile('fileName-1.png', 100, 'image/png') }, + ], + }} + > + + + + ) +} diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload/demos.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload/demos.mdx new file mode 100644 index 00000000000..58b2f44838d --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload/demos.mdx @@ -0,0 +1,27 @@ +--- +showTabs: true +--- + +import * as Examples from './Examples' + +## Demos + +### Basic usage + + + +### Required + + + +### Path usage + + + +### With help + + + +### Customized + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload/events.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload/events.mdx new file mode 100644 index 00000000000..ff13268a03a --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload/events.mdx @@ -0,0 +1,10 @@ +--- +showTabs: true +--- + +import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' +import { UploadFieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/Upload/UploadDocs' + +## Events + + diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload/info.mdx new file mode 100644 index 00000000000..16f40b7d6a0 --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload/info.mdx @@ -0,0 +1,56 @@ +--- +showTabs: true +--- + +## Description + +`Field.Upload` is a wrapper for the [Upload](/uilib/components/upload/) component to make it easier to use inside a form. + +```jsx +import { Field } from '@dnb/eufemia/extensions/forms' +render() +``` + +## The data and file format + +The returned data is an array of objects containing a file object and a unique ID. The file object contains the file itself and some additional properties like an unique ID. + +```tsx +{ + id: '1234', + file: { + name: 'file1.jpg', + size: 1234, + type: 'image/jpeg', + }, + errorMessage: 'error message ...', +} +``` + +This data format will be returned by the `onChange` and the `onSubmit` event handlers. + +## Validation + +The `required` prop will validate if there are valid files present. If there are files with an error, the validation will fail. + +If there are invalid files, the `onSubmit` event will not be called and a validation error will be shown. + +The `onChange` event handler will return an array with objects containing the file object and some additional properties – regardless of the validity of the file. + +## About the `value` and `path` prop + +The `path` prop represents an array with an object described above: + +```tsx +render( + + + , +) +``` + +The `value` prop represents an array with an object described above: + +```tsx +render() +``` diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload/properties.mdx new file mode 100644 index 00000000000..f6069384a86 --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload/properties.mdx @@ -0,0 +1,26 @@ +--- +showTabs: true +--- + +import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' +import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' +import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' +import { UploadFieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/Upload/UploadDocs' + +## Properties + +### Field-specific props + + + +### General props + +']} + omit={['layout', 'onBlurValidator', 'contentWidth']} +/> + +## Translations + + diff --git a/packages/dnb-design-system-portal/src/shared/parts/PropertiesTable.tsx b/packages/dnb-design-system-portal/src/shared/parts/PropertiesTable.tsx index 930615e24ec..52ea1f429b8 100644 --- a/packages/dnb-design-system-portal/src/shared/parts/PropertiesTable.tsx +++ b/packages/dnb-design-system-portal/src/shared/parts/PropertiesTable.tsx @@ -75,8 +75,8 @@ export default function PropertiesTable({ omit?: string[] showDefaultValue: boolean }) { - const keys = Object.keys(props) - const tableRows = Object.entries(props).map(([key, props]) => { + const keys = Object.keys(props || {}) + const tableRows = Object.entries(props || {}).map(([key, props]) => { if (!props) { return null } diff --git a/packages/dnb-eufemia/src/components/upload/Upload.tsx b/packages/dnb-eufemia/src/components/upload/Upload.tsx index 2d8b97f16d5..380838169fd 100644 --- a/packages/dnb-eufemia/src/components/upload/Upload.tsx +++ b/packages/dnb-eufemia/src/components/upload/Upload.tsx @@ -21,6 +21,7 @@ import type { UploadFile, UploadAllProps } from './types' import UploadFileList from './UploadFileList' import UploadInfo from './UploadInfo' +export type * from './types' export { defaultProps } const Upload = (localProps: UploadAllProps) => { diff --git a/packages/dnb-eufemia/src/components/upload/UploadDocs.ts b/packages/dnb-eufemia/src/components/upload/UploadDocs.ts new file mode 100644 index 00000000000..8076990aed6 --- /dev/null +++ b/packages/dnb-eufemia/src/components/upload/UploadDocs.ts @@ -0,0 +1,52 @@ +import { PropertiesTableProps } from '../../shared/types' + +export const UploadProperties: PropertiesTableProps = { + acceptedFileTypes: { + doc: 'List of accepted file types.', + type: 'Array', + status: 'required', + }, + filesAmountLimit: { + doc: 'Defines the amount of files the user can select and upload. Defaults to 100.', + type: 'number', + status: 'optional', + }, + fileMaxSize: { + doc: '`fileMaxSize` is max size of each file in MB. Defaults to 5 MB.', + type: 'number', + status: 'optional', + }, + title: { + doc: 'Custom text property. Replaces the default title.', + type: 'string', + status: 'optional', + }, + text: { + doc: 'Custom text property. Replaces the default text.', + type: 'string', + status: 'optional', + }, + skeleton: { + doc: 'Skeleton should be applied when loading content.', + type: 'boolean', + status: 'optional', + }, + '[Space](/uilib/layout/space/properties)': { + doc: 'Spacing properties like `top` or `bottom` are supported.', + type: ['string', 'object'], + status: 'optional', + }, +} + +export const UploadEvents: PropertiesTableProps = { + onChange: { + doc: 'Will be called on `files` changes made by the user. Access the files with `{ files }` (containing each a `fileItem`).', + type: 'function', + status: 'optional', + }, + onFileDelete: { + doc: 'Will be called once a file gets deleted by the user. Access the deleted file with `{ fileItem }`.', + type: 'function', + status: 'optional', + }, +} diff --git a/packages/dnb-eufemia/src/components/upload/UploadDropzone.tsx b/packages/dnb-eufemia/src/components/upload/UploadDropzone.tsx index 5ba391c2a18..35697bec15a 100644 --- a/packages/dnb-eufemia/src/components/upload/UploadDropzone.tsx +++ b/packages/dnb-eufemia/src/components/upload/UploadDropzone.tsx @@ -1,4 +1,10 @@ -import React from 'react' +import React, { + useCallback, + useContext, + useEffect, + useRef, + useState, +} from 'react' import classnames from 'classnames' import HeightAnimation from '../height-animation/HeightAnimation' @@ -13,13 +19,13 @@ export default function UploadDropzone({ ...rest }: Partial) { const props = rest as Omit - const context = React.useContext(UploadContext) - const [hover, setHover] = React.useState(false) - const hoverTimeout = React.useRef() + const context = useContext(UploadContext) + const [hover, setHover] = useState(false) + const hoverTimeout = useRef() const { onInputUpload, id } = context - const getFiles = (event: UploadDragEvent) => { + const getFiles = useCallback((event: UploadDragEvent) => { const fileData = event.dataTransfer const files: UploadFile[] = [] @@ -29,35 +35,47 @@ export default function UploadDropzone({ }) return files - } + }, []) - const hoverHandler = (event: UploadDragEvent, state: boolean) => { - event.stopPropagation() - event.preventDefault() - clearTimers() - setHover(state) - } + const clearTimers = useCallback(() => { + clearTimeout(hoverTimeout.current) + }, []) - const dropHandler = (event: UploadDragEvent) => { - const files = getFiles(event) + const hoverHandler = useCallback( + (event: UploadDragEvent, state: boolean) => { + event.stopPropagation() + event.preventDefault() + clearTimers() + setHover(state) + }, + [clearTimers] + ) - onInputUpload(files) - hoverHandler(event, false) - } + const dropHandler = useCallback( + (event: UploadDragEvent) => { + const files = getFiles(event) - const dragEnterHandler = (event: UploadDragEvent) => { - hoverHandler(event, true) - } + onInputUpload(files) + hoverHandler(event, false) + }, + [getFiles, onInputUpload, hoverHandler] + ) - const dragLeaveHandler = (event: UploadDragEvent) => { - hoverHandler(event, false) - } + const dragEnterHandler = useCallback( + (event: UploadDragEvent) => { + hoverHandler(event, true) + }, + [hoverHandler] + ) - const clearTimers = () => { - clearTimeout(hoverTimeout.current) - } + const dragLeaveHandler = useCallback( + (event: UploadDragEvent) => { + hoverHandler(event, false) + }, + [hoverHandler] + ) - React.useEffect(() => { + useEffect(() => { const elem = document.body const execute = () => { try { @@ -89,7 +107,7 @@ export default function UploadDropzone({ // } } - }, []) + }, [clearTimers, dragEnterHandler, dragLeaveHandler, dropHandler, id]) return ( { fileSizeContent, filesAmountLimit, fileMaxSize, + children, } = context - const prettyfiedAcceptedFileFormats = acceptedFileTypes + const prettifiedAcceptedFileFormats = acceptedFileTypes .join(', ') .toUpperCase() @@ -34,16 +35,18 @@ const UploadInfo = () => { {text}

+ {children} +
- {prettyfiedAcceptedFileFormats && ( + {prettifiedAcceptedFileFormats && (
{fileTypeDescription}
-
{prettyfiedAcceptedFileFormats}
+
{prettifiedAcceptedFileFormats}
 )} diff --git a/packages/dnb-eufemia/src/components/upload/UploadVerify.tsx b/packages/dnb-eufemia/src/components/upload/UploadVerify.tsx index a2aa9fbcdee..30c5a0cb588 100644 --- a/packages/dnb-eufemia/src/components/upload/UploadVerify.tsx +++ b/packages/dnb-eufemia/src/components/upload/UploadVerify.tsx @@ -5,7 +5,7 @@ import { UploadAcceptedFileTypes, } from './types' -const BYTES_IN_A_MEGA_BYTE = 1048576 +export const BYTES_IN_A_MEGA_BYTE = 1048576 export function verifyFiles( files: UploadFile[], diff --git a/packages/dnb-eufemia/src/components/upload/types.ts b/packages/dnb-eufemia/src/components/upload/types.ts index 88b0eaf7ebe..4e5ca32f59b 100644 --- a/packages/dnb-eufemia/src/components/upload/types.ts +++ b/packages/dnb-eufemia/src/components/upload/types.ts @@ -59,12 +59,13 @@ export type UploadProps = { loadingText?: React.ReactNode deleteButton?: React.ReactNode fileListAriaLabel?: string + children?: React.ReactNode } export type UploadAllProps = UploadProps & SpacingProps & LocaleProps & - Omit, 'onChange'> + Omit, 'onChange' | 'title'> export type UploadContextProps = { id?: string diff --git a/packages/dnb-eufemia/src/components/upload/useUpload.ts b/packages/dnb-eufemia/src/components/upload/useUpload.ts index 5107d3d7c39..03530988e1d 100644 --- a/packages/dnb-eufemia/src/components/upload/useUpload.ts +++ b/packages/dnb-eufemia/src/components/upload/useUpload.ts @@ -1,3 +1,4 @@ +import { useCallback, useMemo } from 'react' import { useSharedState } from '../../shared/helpers/useSharedState' import type { UploadFile } from './types' @@ -18,29 +19,38 @@ function useUpload(id: string): useUploadReturn { internalFiles?: UploadFile[] }>(id) - const setFiles = (files: UploadFile[]) => { - extend({ files }) - } + const setFiles = useCallback( + (files: UploadFile[]) => { + extend({ files }) + }, + [extend] + ) - const setInternalFiles = (internalFiles: UploadFile[]) => { - extend({ internalFiles }) - } + const setInternalFiles = useCallback( + (internalFiles: UploadFile[]) => { + extend({ internalFiles }) + }, + [extend] + ) - const files = data?.files || [] - const internalFiles = data?.internalFiles || [] - - const getExistingFile = ( - file: File, - fileItems: UploadFile[] = files - ) => { - return fileItems.find(({ file: f }) => { - return ( - f.name === file.name && - f.size === file.size && - f.lastModified === file.lastModified - ) - }) - } + const files = useMemo(() => data?.files || [], [data?.files]) + const internalFiles = useMemo( + () => data?.internalFiles || [], + [data?.internalFiles] + ) + + const getExistingFile = useCallback( + (file: File, fileItems: UploadFile[] = files) => { + return fileItems.find(({ file: f }) => { + return ( + f.name === file.name && + f.size === file.size && + f.lastModified === file.lastModified + ) + }) + }, + [files] + ) return { files, diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx index 78a61373ed4..bcfd9bf998a 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/ArraySelection/ArraySelection.tsx @@ -52,7 +52,7 @@ function ArraySelection(props: Props) { children, } = useFieldProps(props) - const fieldSectionProps = { + const fieldBlockProps = { forId: id, className: classnames( 'dnb-forms-field-array-selection', @@ -102,7 +102,7 @@ function ArraySelection(props: Props) { switch (variant) { case 'button': return ( - + ) case 'checkbox': - return {options} + return {options} } } diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Composition/Composition.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Composition/Composition.tsx index 8b4d9494013..ff65186e1c1 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/Composition/Composition.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/Composition/Composition.tsx @@ -1,7 +1,7 @@ import React from 'react' -import FieldBlock, { Props as FieldSectionProps } from '../../FieldBlock' +import FieldBlock, { Props as FieldBlockProps } from '../../FieldBlock' -function CompositionField(props: FieldSectionProps) { +function CompositionField(props: FieldBlockProps) { return } diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx index 4518c58232c..419cc26d59e 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/PhoneNumber/__tests__/PhoneNumber.test.tsx @@ -248,6 +248,8 @@ describe('Field.PhoneNumber', () => { rerender() + const nordic = countries() + await userEvent.clear(phoneInput) await userEvent.type(phoneInput, '123') fireEvent.keyDown(ccInput, { @@ -255,8 +257,6 @@ describe('Field.PhoneNumber', () => { keyCode: 13, }) - const nordic = countries() - expect(nordic).toHaveLength(7) expect(nordic[0]).toHaveTextContent('+45 Danmark') expect(nordic[1]).toHaveTextContent('+298 Færøyene') @@ -268,6 +268,8 @@ describe('Field.PhoneNumber', () => { rerender() + const europe = countries() + await userEvent.clear(phoneInput) await userEvent.type(phoneInput, '123') fireEvent.keyDown(ccInput, { @@ -275,7 +277,6 @@ describe('Field.PhoneNumber', () => { keyCode: 13, }) - const europe = countries() expect(europe).toHaveLength(51) }) diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx index e8d7f1b0ea3..47db1c9db79 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/PostalCodeAndCity/PostalCodeAndCity.tsx @@ -1,13 +1,13 @@ import React from 'react' import classnames from 'classnames' -import { Props as FieldSectionProps } from '../../FieldBlock' +import { Props as FieldBlockProps } from '../../FieldBlock' import StringField, { Props as StringFieldProps } from '../String' import CompositionField from '../Composition' import { FieldHelpProps } from '../../types' import useTranslation from '../../hooks/useTranslation' export type Props = FieldHelpProps & - Omit & + Omit & Partial> function PostalCodeAndCity(props: Props) { @@ -18,7 +18,7 @@ function PostalCodeAndCity(props: Props) { city = {}, help, width = 'large', - ...fieldSectionProps + ...fieldBlockProps } = props return ( @@ -27,7 +27,7 @@ function PostalCodeAndCity(props: Props) { 'dnb-forms-field-postal-code-and-city', props.className )} - {...fieldSectionProps} + {...fieldBlockProps} width={width} > + + {variant === 'autocomplete' ? ( + ) diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/String/String.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/String/String.tsx index dcacadc4a59..61d24e3048c 100644 --- a/packages/dnb-eufemia/src/extensions/forms/Field/String/String.tsx +++ b/packages/dnb-eufemia/src/extensions/forms/Field/String/String.tsx @@ -252,7 +252,7 @@ function StringComponent(props: Props) { keep_placeholder: keepPlaceholder, } - const fieldSectionProps = { + const fieldBlockProps = { className: classnames('dnb-forms-field-string', className), forId: id, layout, @@ -271,7 +271,7 @@ function StringComponent(props: Props) { } return ( - + {multiline ? (