npm - @pega/cosmos-react-core - Versions diffs - 8.20.0 → 8.21.0 - Mend

@pega/cosmos-react-core 8.20.0 → 8.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (60) hide show

package/lib/components/File/FileInput.js CHANGED Viewed

@@ -32,9 +32,10 @@ const BaseFileInput = forwardRef(function FileInput(props, ref) {
     const [target, setTarget] = useElement();
     const inputRef = useConsolidatedRef(ref);
     const fileItemListRef = useRef();
+    const dropZoneRef = useConsolidatedRef(setTarget);
     const activeElement = getActiveElement();
     const activeElementInList = fileItemListRef.current?.contains(activeElement);
-    const isInputActiveElement = activeElement === inputRef.current;
+    const isDropZoneActiveElement = activeElement === dropZoneRef.current;
     const compactWithSingleAttach = compact && !multiple;
     const filesAnnounced = useRef(false);
     const announcedFilesSet = useRef(new Set());
@@ -57,22 +58,10 @@ const BaseFileInput = forwardRef(function FileInput(props, ref) {
     const t = useI18n();
     const [dragOver, setDragOver] = useState(false);
     const hideFileInput = !multiple && files && files.length > 0;
-    const fileInput = (_jsxs(StyledFileInput, { children: [_jsx("input", { "data-testid": testIds.control, ...restProps, ref: inputRef, type: 'file', id: id, required: required, disabled: disabled, readOnly: readOnly, className: createClassName('file-input', className, {
+    const fileInput = (_jsxs(StyledFileInput, { children: [_jsx("input", { "data-testid": testIds.control, ...restProps, ref: inputRef, type: 'file', disabled: disabled, readOnly: readOnly, className: createClassName('file-input', className, {
                     compact
-                }), onChange: onChange, onFocus: () => {
-                    if (target) {
-                        target.dispatchEvent(new Event('focusin'));
-                    }
-                }, onBlur: () => {
-                    if (target) {
-                        target.dispatchEvent(new Event('focusout'));
-                    }
-                }, multiple: multiple, accept: Array.isArray(accept) ? accept.join(',') : accept, "aria-describedby": `${id}-info`, onClick: readOnly
-                    ? e => {
-                        e.preventDefault();
-                    }
-                    : undefined }), _jsx(Flex, { container: true, as: StyledDropZone, disabled: disabled, readOnly: readOnly, onClick: () => {
-                    inputRef.current?.focus();
+                }), onChange: onChange, multiple: multiple, accept: Array.isArray(accept) ? accept.join(',') : accept }), _jsx(Flex, { container: true, as: StyledDropZone, forwardedAs: 'button', type: 'button', id: id, required: required, "aria-describedby": `${id}-file-status${info ? ` ${id}-info` : ''}`, disabled: disabled, readOnly: readOnly, onClick: () => {
+                    dropZoneRef.current?.focus();
                     if (!readOnly) {
                         inputRef.current?.click();
                     }
@@ -90,7 +79,9 @@ const BaseFileInput = forwardRef(function FileInput(props, ref) {
                             onFilesAdded?.(multiple ? fileList : fileList.slice(0, 1));
                         }
                     }
-                    : undefined), compactMode: compact, ref: setTarget, children: _jsx(Component, { compact: compact, multiple: multiple, status: status, dragOver: dragOver, readOnly: readOnly }) }), compactWithSingleAttach && target && (_jsx(Tooltip, { target: target, describeTarget: true, children: t('file_upload_text_main', [t('file_upload_text_one')]) }))] }));
+                    : undefined), compactMode: compact, ref: dropZoneRef, children: _jsx(Component, { compact: compact, multiple: multiple, status: status, dragOver: dragOver, readOnly: readOnly }) }), _jsx(VisuallyHiddenText, { id: `${id}-file-status`, children: files && files.length > 0
+                    ? t('number_of_items', [files.length], { count: files.length })
+                    : t('no_file_chosen') }), compactWithSingleAttach && target && (_jsx(Tooltip, { target: target, describeTarget: true, children: t('file_upload_text_main', [t('file_upload_text_one')]) }))] }));
     const getReadOnlyFile = (file) => {
         const readOnlyFile = { ...file };
         delete readOnlyFile.onCancel;
@@ -116,11 +107,11 @@ const BaseFileInput = forwardRef(function FileInput(props, ref) {
             prevFiles?.length === 0 &&
             files?.length === 1 &&
             fileItemListRef.current &&
-            isInputActiveElement) {
+            isDropZoneActiveElement) {
             getFocusables(fileItemListRef.current)[0]?.focus();
         }
         if (prevFiles?.length === 1 && files?.length === 0 && activeElementInList) {
-            inputRef.current?.focus();
+            dropZoneRef.current?.focus();
         }
         if (!files)
             return;

package/lib/components/File/FileInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { Ref, ChangeEvent, PropsWithoutRef, DragEvent } from 'react';\n\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp,\n OmitStrict,\n TestIdProp\n} from '../../types';\nimport {\n useConsolidatedRef,\n useI18n,\n useUID,\n useTestIds,\n usePrevious,\n useElement,\n useModalManager,\n useModalContext,\n useLiveLog\n} from '../../hooks';\nimport type { FormControlProps } from '../FormControl';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Icon, { registerIcon } from '../Icon';\nimport * as paperClipIcon from '../Icon/icons/paper-clip.icon';\nimport { getActiveElement, getFocusables, withTestIds, createClassName } from '../../utils';\nimport Tooltip from '../Tooltip';\nimport Button from '../Button';\nimport Modal, { type ModalMethods, type ModalProps } from '../Modal';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport MetaList from '../MetaList';\n\nimport type { FileItemProps } from './FileItem';\nimport { getFileInputTestIds } from './File.test-ids';\nimport FileList from './FileList';\nimport type { FileListProps } from './FileList';\nimport FileItem from './FileItem';\nimport {\n StyledBareButton,\n StyledDropZone,\n StyledFileInput,\n StyledIconWrapper,\n StyledAttachedFileCount,\n StyledSingleFileWrapper,\n StyledUploadStatus,\n StyledFlex,\n StyledFormField,\n StyledFileInputControl,\n StyledDownloadAllButton\n} from './FileInput.styles';\n\nregisterIcon(paperClipIcon);\n\n/** Props to be used when rendering compact variant for multiple FileInput. /\ninterface MultiAttachCompactProps {\n /* Modal props /\n modal?: Pick<ModalProps, 'onBeforeOpen'> & {\n /* Callback for cancel button /\n onCancel: ({ close }: { close: () => void }) => void;\n /* Callback for submit button /\n onSubmit: ({ close }: { close: () => void }) => void;\n /* If true renders loading indicator inside Modal. /\n loading?: boolean;\n };\n /* Conveys the number of files attached /\n count?: number;\n}\n\ninterface ComponentProps\n extends Pick<BaseFileInputProps, 'compact' \| 'multiple' \| 'status' \| 'readOnly'>,\n Pick<MultiAttachCompactProps, 'count'> {\n dragOver?: boolean;\n}\n\ninterface BaseFileInputProps\n extends BaseProps,\n NoChildrenProp,\n TestIdProp,\n Pick<FileItemProps, 'previewFromActions'>,\n Pick<FileListProps, 'onDownloadAll'> {\n /* Called when files are added either via the input or drop zone. /\n onFilesAdded?: (files: File[]) => void;\n /\n Allow multiple files to be selected from the OS specific file browser.\n * NOTE: This does not restrict multiple files from being added via drag and drop.\n * Restrict multi file drag and drop via onFilesAdded and custom info message.\n * @default false\n /\n multiple?: boolean;\n /\n Renders compact variant.\n * @default false\n /\n compact?: boolean;\n /* An array of files that have been uploaded. /\n files?: OmitStrict<FileItemProps, 'previewFromActions'>[];\n /\n Specify allowed file types.\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept}\n /\n accept?: string \| string[];\n /\n Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n /\n id?: FormControlProps['id'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /* Visually hides the label region. /\n labelHidden?: FormControlProps['labelHidden'];\n /* It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. /\n info?: FormControlProps['info'];\n /* Indicate if the field is required. The browser defaults to false. /\n required?: FormControlProps['required'];\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Makes the input non editable and non clickable. /\n readOnly?: FormControlProps['readOnly'];\n /* Sets html name attribute for the underlying control. Useful for mapping to a data field. /\n name?: FormControlProps['name'];\n /* Pass a heading and content to show additional information on the field. /\n additionalInfo?: FormControlProps['additionalInfo'];\n /* Ref for the input element within the component's dom structure. /\n ref?: Ref<HTMLInputElement>;\n}\n\nexport interface FileInputProps extends BaseFileInputProps, MultiAttachCompactProps {}\n\nconst Component = ({\n compact,\n multiple,\n status,\n count,\n dragOver = false,\n readOnly\n}: ComponentProps) => {\n const t = useI18n();\n\n const attachedFileCount =\n multiple && count ? (\n <StyledAttachedFileCount>{t('number_of_items', [count], { count })}</StyledAttachedFileCount>\n ) : undefined;\n\n return (\n <>\n <StyledUploadStatus\n item={{ grow: 1 }}\n container={{ justify: compact && multiple ? 'start' : 'center', alignItems: 'center' }}\n status={status}\n dragOver={dragOver}\n readOnly={readOnly}\n >\n <Text variant='secondary'>\n {compact\n ? attachedFileCount\n : t('file_upload_text_main', [\n t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')\n ])}\n </Text>\n </StyledUploadStatus>\n\n <StyledIconWrapper container={{ justify: 'center', alignItems: 'center' }}>\n <Icon name='paper-clip' />\n </StyledIconWrapper>\n </>\n );\n};\n\nconst BaseFileInput: ForwardRefForwardPropsComponent<BaseFileInputProps> = forwardRef(\n function FileInput(props: PropsWithoutRef<BaseFileInputProps>, ref: BaseFileInputProps['ref']) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n label,\n labelHidden,\n info,\n required = false,\n disabled = false,\n readOnly = false,\n files,\n onDownloadAll,\n onFilesAdded,\n multiple = false,\n status,\n additionalInfo,\n accept,\n compact = false,\n previewFromActions = false,\n className,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getFileInputTestIds);\n const [target, setTarget] = useElement<HTMLElement>();\n\n const inputRef = useConsolidatedRef(ref);\n const fileItemListRef = useRef<HTMLDivElement>();\n const activeElement = getActiveElement();\n const activeElementInList = fileItemListRef.current?.contains(activeElement);\n const isInputActiveElement = activeElement === inputRef.current;\n const compactWithSingleAttach = compact && !multiple;\n\n const filesAnnounced = useRef(false);\n const announcedFilesSet = useRef<Set<string>>(new Set());\n const { announcePolite } = useLiveLog();\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.files) {\n onFilesAdded?.(Array.from(e.target.files));\n }\n /\n WHY are we doing this?\n * We are not working with the \"value\" prop of the input but rather the File instances that are created.\n * The consumer of this component should manage an array or File(s) and allow for a user to remove a selected file.\n * Since we can not modify the input value of files for browser security reasons,\n * and since setting the files property is less than ideal, we reset/toggle the input to a fresh state after a render.\n * This enables onChange to fire even if the user had just previously selected a file, removed it, and selected it again.\n */\n if (inputRef.current) inputRef.current.value = '';\n },\n [onFilesAdded]\n );\n\n const t = useI18n();\n const [dragOver, setDragOver] = useState(false);\n const hideFileInput = !multiple && files && files.length > 0;\n\n const fileInput = (\n <StyledFileInput>\n <input\n data-testid={testIds.control}\n {...restProps}\n ref={inputRef}\n type='file'\n id={id}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n className={createClassName('file-input', className, {\n compact\n })}\n onChange={onChange}\n onFocus={() => {\n if (target) {\n target.dispatchEvent(new Event('focusin'));\n }\n }}\n onBlur={() => {\n if (target) {\n target.dispatchEvent(new Event('focusout'));\n }\n }}\n multiple={multiple}\n accept={Array.isArray(accept) ? accept.join(',') : accept}\n aria-describedby={`${id}-info`}\n onClick={\n readOnly\n ? e => {\n e.preventDefault();\n }\n : undefined\n }\n />\n <Flex\n container\n as={StyledDropZone}\n disabled={disabled}\n readOnly={readOnly}\n onClick={() => {\n inputRef.current?.focus();\n if (!readOnly) {\n inputRef.current?.click();\n }\n }}\n {...(!disabled && !readOnly\n ? {\n onDragOver: (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n },\n onDragEnter: () => setDragOver(true),\n onDragLeave: () => setDragOver(false),\n onDrop: (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n setDragOver(false);\n\n const fileList = Array.from(e.dataTransfer.files);\n onFilesAdded?.(multiple ? fileList : fileList.slice(0, 1));\n }\n }\n : undefined)}\n compactMode={compact}\n ref={setTarget}\n >\n <Component\n compact={compact}\n multiple={multiple}\n status={status}\n dragOver={dragOver}\n readOnly={readOnly}\n />\n </Flex>\n {compactWithSingleAttach && target && (\n <Tooltip target={target} describeTarget>\n {t('file_upload_text_main', [t('file_upload_text_one')])}\n </Tooltip>\n )}\n </StyledFileInput>\n );\n\n const getReadOnlyFile = (file: FileItemProps) => {\n const readOnlyFile = { ...file };\n delete readOnlyFile.onCancel;\n delete readOnlyFile.onEdit;\n delete readOnlyFile.onDelete;\n delete readOnlyFile.progress;\n return readOnlyFile;\n };\n\n const fileItemList = hideFileInput ? (\n <StyledSingleFileWrapper\n data-testid={testIds.files}\n compact={compact}\n ref={element => {\n if (element) fileItemListRef.current = element;\n }}\n >\n <FileItem\n {...(readOnly ? getReadOnlyFile(files[0]) : files[0])}\n compact={compact}\n previewFromActions={compactWithSingleAttach && previewFromActions}\n disabled={disabled}\n />\n </StyledSingleFileWrapper>\n ) : (\n <FileList\n type='item'\n items={\n readOnly\n ? files?.map(file => {\n return getReadOnlyFile(file);\n }) ?? []\n : files ?? []\n }\n data-testid={testIds.files}\n disabled={disabled}\n ref={element => {\n if (element) fileItemListRef.current = element;\n }}\n />\n );\n\n const prevFiles = usePrevious(files);\n\n useEffect(() => {\n if (\n !multiple &&\n prevFiles?.length === 0 &&\n files?.length === 1 &&\n fileItemListRef.current &&\n isInputActiveElement\n ) {\n getFocusables(fileItemListRef.current)[0]?.focus();\n }\n\n if (prevFiles?.length === 1 && files?.length === 0 && activeElementInList) {\n inputRef.current?.focus();\n }\n\n if (!files) return;\n\n if (announcedFilesSet.current.size !== files.length) {\n filesAnnounced.current = false;\n }\n if ((prevFiles?.length ?? 0) > files.length) {\n announcedFilesSet.current = new Set(\n Array.from(announcedFilesSet.current).filter(item => files.some(file => file.id === item))\n );\n }\n\n const errorFiles = files.filter(\n item => !announcedFilesSet.current.has(item.id) && item.error\n );\n const progressFiles = files.filter(\n item =>\n !announcedFilesSet.current.has(item.id) &&\n ('progress' in item ? typeof item.progress === 'number' && item.progress > 99 : true)\n );\n const totalAttachedFilesLength = progressFiles.length + errorFiles.length;\n\n if (\n totalAttachedFilesLength > 0 &&\n files.length - announcedFilesSet.current.size === totalAttachedFilesLength &&\n !filesAnnounced.current\n ) {\n if (progressFiles.length > 0) {\n announcePolite({\n message: t('files_uploaded', [progressFiles.length], { count: progressFiles.length })\n });\n progressFiles.forEach(file => {\n if (file.id && !announcedFilesSet.current.has(file.id)) {\n announcedFilesSet.current.add(file.id);\n }\n });\n }\n if (errorFiles.length > 0) {\n announcePolite({\n message: t('files_upload_failed', [errorFiles.length], { count: errorFiles.length })\n });\n errorFiles.forEach(file => {\n if (file.id && !announcedFilesSet.current.has(file.id)) {\n announcedFilesSet.current.add(file.id);\n }\n });\n }\n filesAnnounced.current = true;\n }\n }, [files]);\n\n const renderElement = hideFileInput ? fileItemList : fileInput;\n\n const fileInputInfoActions = useMemo(() => {\n if (info && !onDownloadAll) {\n return info;\n }\n\n const downloadAllButton = (\n <Button onClick={onDownloadAll} variant='link'>\n {t('download_all')}\n </Button>\n );\n\n if (onDownloadAll && !info && files && files.length > 1 && multiple) {\n return downloadAllButton;\n }\n\n if (info && onDownloadAll) {\n if (files && files.length > 1 && multiple) {\n return <MetaList items={[info, downloadAllButton]} />;\n }\n return info;\n }\n }, [info, onDownloadAll]);\n\n return (\n <Flex\n container={{ rowGap: hideFileInput ? undefined : 1, direction: 'column' }}\n as={StyledFileInputControl}\n status={status}\n >\n {label ? (\n <StyledFormField\n testId={testIds}\n label={\n <>\n {label}\n {readOnly && <VisuallyHiddenText>{t('read_only')}</VisuallyHiddenText>}\n </>\n }\n labelHidden={labelHidden}\n id={id}\n info={fileInputInfoActions}\n required={required}\n disabled={!hideFileInput && disabled}\n readOnly={readOnly}\n status={status}\n additionalInfo={additionalInfo}\n compactMode={compactWithSingleAttach}\n >\n <>\n {renderElement}\n {readOnly && files && files.length > 1 && multiple && (\n <StyledDownloadAllButton variant='link' onClick={onDownloadAll}>\n {t('download_all')}\n </StyledDownloadAllButton>\n )}\n </>\n </StyledFormField>\n ) : (\n renderElement\n )}\n {multiple && !compact && files && files.length > 0 && fileItemList}\n </Flex>\n );\n }\n);\n\nconst AttachFilesModal = ({\n modalContent,\n modal,\n readOnly\n}: {\n modalContent?: JSX.Element;\n readOnly: FileInputProps['readOnly'];\n} & Pick<MultiAttachCompactProps, 'modal'>) => {\n const t = useI18n();\n const { dismiss } = useModalContext();\n\n const formActions = (\n <>\n <Button\n disabled={modal?.loading}\n onClick={() => {\n if (modal?.onCancel) modal.onCancel({ close: dismiss });\n }}\n >\n {t('cancel')}\n </Button>\n\n <Button\n disabled={modal?.loading}\n type='submit'\n variant='primary'\n onClick={() => {\n if (modal?.onSubmit) modal.onSubmit({ close: dismiss });\n }}\n >\n {t('submit')}\n </Button>\n </>\n );\n\n return (\n <Modal\n progress={modal?.loading}\n heading={t('attach_files')}\n actions={!readOnly ? formActions : undefined}\n onBeforeOpen={modal?.onBeforeOpen}\n >\n {modalContent}\n </Modal>\n );\n};\n\nconst FileInput: ForwardRefForwardPropsComponent<FileInputProps> = forwardRef(function FileInput(\n props: PropsWithoutRef<FileInputProps>,\n ref: FileInputProps['ref']\n) {\n const uid = useUID();\n const { modal, count, ...baseFileInputProps } = props;\n\n const {\n id = uid,\n label,\n labelHidden,\n info,\n required = false,\n disabled = false,\n readOnly = false,\n onFilesAdded,\n multiple = false,\n status,\n additionalInfo,\n compact = false\n } = baseFileInputProps;\n\n const t = useI18n();\n const [dragOver, setDragOver] = useState(false);\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n const { create } = useModalManager();\n const modalMethods = useRef<ModalMethods>();\n\n let modalContent: JSX.Element \| undefined;\n\n if (compact && multiple) {\n modalContent = (\n <BaseFileInput\n {...baseFileInputProps}\n multiple\n compact={false}\n labelHidden={false}\n ref={ref}\n />\n );\n }\n\n const modalProps = {\n modal,\n modalContent\n };\n\n useEffect(() => {\n if (compact && multiple && modal) {\n modalMethods.current?.update({\n modal,\n modalContent,\n readOnly\n });\n }\n }, [compact, multiple, modal, readOnly, modalProps]);\n\n useEffect(() => {\n return () => {\n if (modalMethods.current) {\n modalMethods.current?.dismiss();\n modalMethods.current?.unmount();\n }\n };\n }, []);\n\n if (compact && multiple) {\n const render = (\n <Flex container>\n <StyledBareButton\n id={id}\n onClick={() => {\n modalMethods.current = create(\n AttachFilesModal,\n { ...modalProps, readOnly },\n { dismissible: readOnly }\n );\n }}\n aria-label={\n count && count > 0\n ? `${t('attach_review')} ${t('number_of_items', [count], { count })}`\n : undefined\n }\n aria-describedby={`${id}-info`}\n disabled={disabled}\n {...(!disabled && !readOnly\n ? {\n onDragOver: (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n },\n onDragEnter: () => setDragOver(true),\n onDragLeave: () => setDragOver(false),\n onDrop: (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n setDragOver(false);\n onFilesAdded?.(Array.from(e.dataTransfer.files));\n if (buttonEl) buttonEl.click();\n }\n }\n : undefined)}\n ref={setButtonEl}\n >\n <StyledFlex container>\n <Component\n compact={compact}\n multiple={multiple}\n status={status}\n count={count}\n dragOver={dragOver}\n readOnly={readOnly}\n />\n </StyledFlex>\n </StyledBareButton>\n {buttonEl && (\n <Tooltip target={buttonEl} describeTarget={count === 0}>\n {count && count > 0\n ? t('attach_review')\n : t('file_upload_text_main', [t('file_upload_text_multiple')])}\n </Tooltip>\n )}\n </Flex>\n );\n\n return label ? (\n <StyledFormField\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n additionalInfo={additionalInfo}\n compactMode\n >\n {render}\n </StyledFormField>\n ) : (\n render\n );\n }\n\n return <BaseFileInput {...baseFileInputProps} ref={ref} />;\n});\n\nexport default withTestIds(FileInput, getFileInputTestIds);\n"]}
1	+ {"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { Ref, ChangeEvent, PropsWithoutRef, DragEvent } from 'react';\n\nimport type {\n BaseProps,\n ForwardRefForwardPropsComponent,\n NoChildrenProp,\n OmitStrict,\n TestIdProp\n} from '../../types';\nimport {\n useConsolidatedRef,\n useI18n,\n useUID,\n useTestIds,\n usePrevious,\n useElement,\n useModalManager,\n useModalContext,\n useLiveLog\n} from '../../hooks';\nimport type { FormControlProps } from '../FormControl';\nimport Flex from '../Flex';\nimport Text from '../Text';\nimport Icon, { registerIcon } from '../Icon';\nimport * as paperClipIcon from '../Icon/icons/paper-clip.icon';\nimport { getActiveElement, getFocusables, withTestIds, createClassName } from '../../utils';\nimport Tooltip from '../Tooltip';\nimport Button from '../Button';\nimport Modal, { type ModalMethods, type ModalProps } from '../Modal';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport MetaList from '../MetaList';\n\nimport type { FileItemProps } from './FileItem';\nimport { getFileInputTestIds } from './File.test-ids';\nimport FileList from './FileList';\nimport type { FileListProps } from './FileList';\nimport FileItem from './FileItem';\nimport {\n StyledBareButton,\n StyledDropZone,\n StyledFileInput,\n StyledIconWrapper,\n StyledAttachedFileCount,\n StyledSingleFileWrapper,\n StyledUploadStatus,\n StyledFlex,\n StyledFormField,\n StyledFileInputControl,\n StyledDownloadAllButton\n} from './FileInput.styles';\n\nregisterIcon(paperClipIcon);\n\n/** Props to be used when rendering compact variant for multiple FileInput. /\ninterface MultiAttachCompactProps {\n /* Modal props /\n modal?: Pick<ModalProps, 'onBeforeOpen'> & {\n /* Callback for cancel button /\n onCancel: ({ close }: { close: () => void }) => void;\n /* Callback for submit button /\n onSubmit: ({ close }: { close: () => void }) => void;\n /* If true renders loading indicator inside Modal. /\n loading?: boolean;\n };\n /* Conveys the number of files attached /\n count?: number;\n}\n\ninterface ComponentProps\n extends Pick<BaseFileInputProps, 'compact' \| 'multiple' \| 'status' \| 'readOnly'>,\n Pick<MultiAttachCompactProps, 'count'> {\n dragOver?: boolean;\n}\n\ninterface BaseFileInputProps\n extends BaseProps,\n NoChildrenProp,\n TestIdProp,\n Pick<FileItemProps, 'previewFromActions'>,\n Pick<FileListProps, 'onDownloadAll'> {\n /* Called when files are added either via the input or drop zone. /\n onFilesAdded?: (files: File[]) => void;\n /\n Allow multiple files to be selected from the OS specific file browser.\n * NOTE: This does not restrict multiple files from being added via drag and drop.\n * Restrict multi file drag and drop via onFilesAdded and custom info message.\n * @default false\n /\n multiple?: boolean;\n /\n Renders compact variant.\n * @default false\n /\n compact?: boolean;\n /* An array of files that have been uploaded. /\n files?: OmitStrict<FileItemProps, 'previewFromActions'>[];\n /\n Specify allowed file types.\n * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept}\n /\n accept?: string \| string[];\n /\n Sets DOM id for the control and associates label element via 'for' attribute.\n * If an id is not pass, a random id will be generated for any render.\n /\n id?: FormControlProps['id'];\n /* Set visual state based on a validation state. /\n status?: FormControlProps['status'];\n /* Pass a string or a fragment with an Icon and string. /\n label?: FormControlProps['label'];\n /* Visually hides the label region. /\n labelHidden?: FormControlProps['labelHidden'];\n /* It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. /\n info?: FormControlProps['info'];\n /* Indicate if the field is required. The browser defaults to false. /\n required?: FormControlProps['required'];\n /* Disable the control. The browser defaults to false. /\n disabled?: FormControlProps['disabled'];\n /* Makes the input non editable and non clickable. /\n readOnly?: FormControlProps['readOnly'];\n /* Sets html name attribute for the underlying control. Useful for mapping to a data field. /\n name?: FormControlProps['name'];\n /* Pass a heading and content to show additional information on the field. /\n additionalInfo?: FormControlProps['additionalInfo'];\n /* Ref for the input element within the component's dom structure. /\n ref?: Ref<HTMLInputElement>;\n}\n\nexport interface FileInputProps extends BaseFileInputProps, MultiAttachCompactProps {}\n\nconst Component = ({\n compact,\n multiple,\n status,\n count,\n dragOver = false,\n readOnly\n}: ComponentProps) => {\n const t = useI18n();\n\n const attachedFileCount =\n multiple && count ? (\n <StyledAttachedFileCount>{t('number_of_items', [count], { count })}</StyledAttachedFileCount>\n ) : undefined;\n\n return (\n <>\n <StyledUploadStatus\n item={{ grow: 1 }}\n container={{ justify: compact && multiple ? 'start' : 'center', alignItems: 'center' }}\n status={status}\n dragOver={dragOver}\n readOnly={readOnly}\n >\n <Text variant='secondary'>\n {compact\n ? attachedFileCount\n : t('file_upload_text_main', [\n t(multiple ? 'file_upload_text_multiple' : 'file_upload_text_one')\n ])}\n </Text>\n </StyledUploadStatus>\n\n <StyledIconWrapper container={{ justify: 'center', alignItems: 'center' }}>\n <Icon name='paper-clip' />\n </StyledIconWrapper>\n </>\n );\n};\n\nconst BaseFileInput: ForwardRefForwardPropsComponent<BaseFileInputProps> = forwardRef(\n function FileInput(props: PropsWithoutRef<BaseFileInputProps>, ref: BaseFileInputProps['ref']) {\n const uid = useUID();\n const {\n testId,\n id = uid,\n label,\n labelHidden,\n info,\n required = false,\n disabled = false,\n readOnly = false,\n files,\n onDownloadAll,\n onFilesAdded,\n multiple = false,\n status,\n additionalInfo,\n accept,\n compact = false,\n previewFromActions = false,\n className,\n ...restProps\n } = props;\n\n const testIds = useTestIds(testId, getFileInputTestIds);\n const [target, setTarget] = useElement<HTMLElement>();\n\n const inputRef = useConsolidatedRef(ref);\n const fileItemListRef = useRef<HTMLDivElement>();\n const dropZoneRef = useConsolidatedRef(setTarget);\n const activeElement = getActiveElement();\n const activeElementInList = fileItemListRef.current?.contains(activeElement);\n const isDropZoneActiveElement = activeElement === dropZoneRef.current;\n const compactWithSingleAttach = compact && !multiple;\n\n const filesAnnounced = useRef(false);\n const announcedFilesSet = useRef<Set<string>>(new Set());\n const { announcePolite } = useLiveLog();\n\n const onChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n if (e.target.files) {\n onFilesAdded?.(Array.from(e.target.files));\n }\n /\n WHY are we doing this?\n * We are not working with the \"value\" prop of the input but rather the File instances that are created.\n * The consumer of this component should manage an array or File(s) and allow for a user to remove a selected file.\n * Since we can not modify the input value of files for browser security reasons,\n * and since setting the files property is less than ideal, we reset/toggle the input to a fresh state after a render.\n * This enables onChange to fire even if the user had just previously selected a file, removed it, and selected it again.\n */\n if (inputRef.current) inputRef.current.value = '';\n },\n [onFilesAdded]\n );\n\n const t = useI18n();\n const [dragOver, setDragOver] = useState(false);\n const hideFileInput = !multiple && files && files.length > 0;\n\n const fileInput = (\n <StyledFileInput>\n <input\n data-testid={testIds.control}\n {...restProps}\n ref={inputRef}\n type='file'\n disabled={disabled}\n readOnly={readOnly}\n className={createClassName('file-input', className, {\n compact\n })}\n onChange={onChange}\n multiple={multiple}\n accept={Array.isArray(accept) ? accept.join(',') : accept}\n />\n <Flex\n container\n as={StyledDropZone}\n forwardedAs='button'\n type='button'\n id={id}\n required={required}\n aria-describedby={`${id}-file-status${info ? ` ${id}-info` : ''}`}\n disabled={disabled}\n readOnly={readOnly}\n onClick={() => {\n dropZoneRef.current?.focus();\n if (!readOnly) {\n inputRef.current?.click();\n }\n }}\n {...(!disabled && !readOnly\n ? {\n onDragOver: (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n },\n onDragEnter: () => setDragOver(true),\n onDragLeave: () => setDragOver(false),\n onDrop: (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n setDragOver(false);\n\n const fileList = Array.from(e.dataTransfer.files);\n onFilesAdded?.(multiple ? fileList : fileList.slice(0, 1));\n }\n }\n : undefined)}\n compactMode={compact}\n ref={dropZoneRef}\n >\n <Component\n compact={compact}\n multiple={multiple}\n status={status}\n dragOver={dragOver}\n readOnly={readOnly}\n />\n </Flex>\n <VisuallyHiddenText id={`${id}-file-status`}>\n {files && files.length > 0\n ? t('number_of_items', [files.length], { count: files.length })\n : t('no_file_chosen')}\n </VisuallyHiddenText>\n {compactWithSingleAttach && target && (\n <Tooltip target={target} describeTarget>\n {t('file_upload_text_main', [t('file_upload_text_one')])}\n </Tooltip>\n )}\n </StyledFileInput>\n );\n\n const getReadOnlyFile = (file: FileItemProps) => {\n const readOnlyFile = { ...file };\n delete readOnlyFile.onCancel;\n delete readOnlyFile.onEdit;\n delete readOnlyFile.onDelete;\n delete readOnlyFile.progress;\n return readOnlyFile;\n };\n\n const fileItemList = hideFileInput ? (\n <StyledSingleFileWrapper\n data-testid={testIds.files}\n compact={compact}\n ref={element => {\n if (element) fileItemListRef.current = element;\n }}\n >\n <FileItem\n {...(readOnly ? getReadOnlyFile(files[0]) : files[0])}\n compact={compact}\n previewFromActions={compactWithSingleAttach && previewFromActions}\n disabled={disabled}\n />\n </StyledSingleFileWrapper>\n ) : (\n <FileList\n type='item'\n items={\n readOnly\n ? files?.map(file => {\n return getReadOnlyFile(file);\n }) ?? []\n : files ?? []\n }\n data-testid={testIds.files}\n disabled={disabled}\n ref={element => {\n if (element) fileItemListRef.current = element;\n }}\n />\n );\n\n const prevFiles = usePrevious(files);\n\n useEffect(() => {\n if (\n !multiple &&\n prevFiles?.length === 0 &&\n files?.length === 1 &&\n fileItemListRef.current &&\n isDropZoneActiveElement\n ) {\n getFocusables(fileItemListRef.current)[0]?.focus();\n }\n\n if (prevFiles?.length === 1 && files?.length === 0 && activeElementInList) {\n dropZoneRef.current?.focus();\n }\n\n if (!files) return;\n\n if (announcedFilesSet.current.size !== files.length) {\n filesAnnounced.current = false;\n }\n if ((prevFiles?.length ?? 0) > files.length) {\n announcedFilesSet.current = new Set(\n Array.from(announcedFilesSet.current).filter(item => files.some(file => file.id === item))\n );\n }\n\n const errorFiles = files.filter(\n item => !announcedFilesSet.current.has(item.id) && item.error\n );\n const progressFiles = files.filter(\n item =>\n !announcedFilesSet.current.has(item.id) &&\n ('progress' in item ? typeof item.progress === 'number' && item.progress > 99 : true)\n );\n const totalAttachedFilesLength = progressFiles.length + errorFiles.length;\n\n if (\n totalAttachedFilesLength > 0 &&\n files.length - announcedFilesSet.current.size === totalAttachedFilesLength &&\n !filesAnnounced.current\n ) {\n if (progressFiles.length > 0) {\n announcePolite({\n message: t('files_uploaded', [progressFiles.length], { count: progressFiles.length })\n });\n progressFiles.forEach(file => {\n if (file.id && !announcedFilesSet.current.has(file.id)) {\n announcedFilesSet.current.add(file.id);\n }\n });\n }\n if (errorFiles.length > 0) {\n announcePolite({\n message: t('files_upload_failed', [errorFiles.length], { count: errorFiles.length })\n });\n errorFiles.forEach(file => {\n if (file.id && !announcedFilesSet.current.has(file.id)) {\n announcedFilesSet.current.add(file.id);\n }\n });\n }\n filesAnnounced.current = true;\n }\n }, [files]);\n\n const renderElement = hideFileInput ? fileItemList : fileInput;\n\n const fileInputInfoActions = useMemo(() => {\n if (info && !onDownloadAll) {\n return info;\n }\n\n const downloadAllButton = (\n <Button onClick={onDownloadAll} variant='link'>\n {t('download_all')}\n </Button>\n );\n\n if (onDownloadAll && !info && files && files.length > 1 && multiple) {\n return downloadAllButton;\n }\n\n if (info && onDownloadAll) {\n if (files && files.length > 1 && multiple) {\n return <MetaList items={[info, downloadAllButton]} />;\n }\n return info;\n }\n }, [info, onDownloadAll]);\n\n return (\n <Flex\n container={{ rowGap: hideFileInput ? undefined : 1, direction: 'column' }}\n as={StyledFileInputControl}\n status={status}\n >\n {label ? (\n <StyledFormField\n testId={testIds}\n label={\n <>\n {label}\n {readOnly && <VisuallyHiddenText>{t('read_only')}</VisuallyHiddenText>}\n </>\n }\n labelHidden={labelHidden}\n id={id}\n info={fileInputInfoActions}\n required={required}\n disabled={!hideFileInput && disabled}\n readOnly={readOnly}\n status={status}\n additionalInfo={additionalInfo}\n compactMode={compactWithSingleAttach}\n >\n <>\n {renderElement}\n {readOnly && files && files.length > 1 && multiple && (\n <StyledDownloadAllButton variant='link' onClick={onDownloadAll}>\n {t('download_all')}\n </StyledDownloadAllButton>\n )}\n </>\n </StyledFormField>\n ) : (\n renderElement\n )}\n {multiple && !compact && files && files.length > 0 && fileItemList}\n </Flex>\n );\n }\n);\n\nconst AttachFilesModal = ({\n modalContent,\n modal,\n readOnly\n}: {\n modalContent?: JSX.Element;\n readOnly: FileInputProps['readOnly'];\n} & Pick<MultiAttachCompactProps, 'modal'>) => {\n const t = useI18n();\n const { dismiss } = useModalContext();\n\n const formActions = (\n <>\n <Button\n disabled={modal?.loading}\n onClick={() => {\n if (modal?.onCancel) modal.onCancel({ close: dismiss });\n }}\n >\n {t('cancel')}\n </Button>\n\n <Button\n disabled={modal?.loading}\n type='submit'\n variant='primary'\n onClick={() => {\n if (modal?.onSubmit) modal.onSubmit({ close: dismiss });\n }}\n >\n {t('submit')}\n </Button>\n </>\n );\n\n return (\n <Modal\n progress={modal?.loading}\n heading={t('attach_files')}\n actions={!readOnly ? formActions : undefined}\n onBeforeOpen={modal?.onBeforeOpen}\n >\n {modalContent}\n </Modal>\n );\n};\n\nconst FileInput: ForwardRefForwardPropsComponent<FileInputProps> = forwardRef(function FileInput(\n props: PropsWithoutRef<FileInputProps>,\n ref: FileInputProps['ref']\n) {\n const uid = useUID();\n const { modal, count, ...baseFileInputProps } = props;\n\n const {\n id = uid,\n label,\n labelHidden,\n info,\n required = false,\n disabled = false,\n readOnly = false,\n onFilesAdded,\n multiple = false,\n status,\n additionalInfo,\n compact = false\n } = baseFileInputProps;\n\n const t = useI18n();\n const [dragOver, setDragOver] = useState(false);\n const [buttonEl, setButtonEl] = useElement<HTMLButtonElement>();\n const { create } = useModalManager();\n const modalMethods = useRef<ModalMethods>();\n\n let modalContent: JSX.Element \| undefined;\n\n if (compact && multiple) {\n modalContent = (\n <BaseFileInput\n {...baseFileInputProps}\n multiple\n compact={false}\n labelHidden={false}\n ref={ref}\n />\n );\n }\n\n const modalProps = {\n modal,\n modalContent\n };\n\n useEffect(() => {\n if (compact && multiple && modal) {\n modalMethods.current?.update({\n modal,\n modalContent,\n readOnly\n });\n }\n }, [compact, multiple, modal, readOnly, modalProps]);\n\n useEffect(() => {\n return () => {\n if (modalMethods.current) {\n modalMethods.current?.dismiss();\n modalMethods.current?.unmount();\n }\n };\n }, []);\n\n if (compact && multiple) {\n const render = (\n <Flex container>\n <StyledBareButton\n id={id}\n onClick={() => {\n modalMethods.current = create(\n AttachFilesModal,\n { ...modalProps, readOnly },\n { dismissible: readOnly }\n );\n }}\n aria-label={\n count && count > 0\n ? `${t('attach_review')} ${t('number_of_items', [count], { count })}`\n : undefined\n }\n aria-describedby={`${id}-info`}\n disabled={disabled}\n {...(!disabled && !readOnly\n ? {\n onDragOver: (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n },\n onDragEnter: () => setDragOver(true),\n onDragLeave: () => setDragOver(false),\n onDrop: (e: DragEvent<HTMLDivElement>) => {\n e.preventDefault();\n setDragOver(false);\n onFilesAdded?.(Array.from(e.dataTransfer.files));\n if (buttonEl) buttonEl.click();\n }\n }\n : undefined)}\n ref={setButtonEl}\n >\n <StyledFlex container>\n <Component\n compact={compact}\n multiple={multiple}\n status={status}\n count={count}\n dragOver={dragOver}\n readOnly={readOnly}\n />\n </StyledFlex>\n </StyledBareButton>\n {buttonEl && (\n <Tooltip target={buttonEl} describeTarget={count === 0}>\n {count && count > 0\n ? t('attach_review')\n : t('file_upload_text_main', [t('file_upload_text_multiple')])}\n </Tooltip>\n )}\n </Flex>\n );\n\n return label ? (\n <StyledFormField\n label={label}\n labelHidden={labelHidden}\n id={id}\n info={info}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n status={status}\n additionalInfo={additionalInfo}\n compactMode\n >\n {render}\n </StyledFormField>\n ) : (\n render\n );\n }\n\n return <BaseFileInput {...baseFileInputProps} ref={ref} />;\n});\n\nexport default withTestIds(FileInput, getFileInputTestIds);\n"]}

package/lib/components/File/FileInput.styles.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
 import { type FormControlProps } from '../FormControl';
 import type { FileInputProps } from './FileInput';
-export declare const StyledDropZone: import("styled-components").StyledComponent<import("react").FunctionComponent<FormControlProps & import("../..").ForwardProps>, import("styled-components").DefaultTheme, {
+export declare const StyledDropZone: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<FormControlProps, keyof FormControlProps> & Required<Pick<FormControlProps, never>> & {
+    hasSuggestion?: boolean;
+} & {
     compactMode: FileInputProps["compact"];
 }, never>;
 export declare const StyledUploadStatus: import("styled-components").StyledComponent<import("../..").ForwardRefForwardPropsComponent<import("../Flex").FlexProps>, import("styled-components").DefaultTheme, {

package/lib/components/File/FileInput.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.styles.ts"],"names":[],"mappings":"~~AAGA~~,~~OAAoB~~,~~EAAE~~,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;~~AASpE~~,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,eAAO,MAAM,cAAc~~;iBAAsC~~,cAAc,CAAC,SAAS,CAAC;~~SAuBxF~~,CAAC;~~AAIH~~,eAAO,MAAM,kBAAkB;YACrB,gBAAgB,CAAC,QAAQ,CAAC;cACxB,gBAAgB,CAAC,UAAU,CAAC;cAC5B,OAAO;SAyCjB,CAAC;AAIH,eAAO,MAAM,iBAAiB,gLAe5B,CAAC;AAIH,eAAO,MAAM,eAAe,~~yGAgC3B~~,CAAC;AAIF,eAAO,MAAM,uBAAuB;aAAyB,cAAc,CAAC,SAAS,CAAC;SAarF,CAAC;AAEF,eAAO,MAAM,uBAAuB,0GAWnC,CAAC;AAIF,eAAO,MAAM,UAAU,gLAEtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mMAwC3B,CAAC;AAIH,eAAO,MAAM,eAAe;;;iBAAoC,cAAc,CAAC,SAAS,CAAC;SASvF,CAAC;AAEH,eAAO,MAAM,sBAAsB,8MAejC,CAAC;AAIH,eAAO,MAAM,uBAAuB,oLAWlC,CAAC"}
1	+ {"version":3,"file":"FileInput.styles.d.ts","sourceRoot":"","sources":["../../../src/components/File/FileInput.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAS1E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,eAAO,MAAM,cAAc;;;iBAA4C,cAAc,CAAC,SAAS,CAAC;SA0B/F,CAAC;AAIF,eAAO,MAAM,kBAAkB;YACrB,gBAAgB,CAAC,QAAQ,CAAC;cACxB,gBAAgB,CAAC,UAAU,CAAC;cAC5B,OAAO;SAyCjB,CAAC;AAIH,eAAO,MAAM,iBAAiB,gLAe5B,CAAC;AAIH,eAAO,MAAM,eAAe,yGA2B3B,CAAC;AAIF,eAAO,MAAM,uBAAuB;aAAyB,cAAc,CAAC,SAAS,CAAC;SAarF,CAAC;AAEF,eAAO,MAAM,uBAAuB,0GAWnC,CAAC;AAIF,eAAO,MAAM,UAAU,gLAEtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mMAwC3B,CAAC;AAIH,eAAO,MAAM,eAAe;;;iBAAoC,cAAc,CAAC,SAAS,CAAC;SASvF,CAAC;AAEH,eAAO,MAAM,sBAAsB,8MAejC,CAAC;AAIH,eAAO,MAAM,uBAAuB,oLAWlC,CAAC"}

package/lib/components/File/FileInput.styles.js CHANGED Viewed

@@ -1,6 +1,5 @@
 import styled, { css } from 'styled-components';
-import { hideVisually } from 'polished';
-import FormControl, {} from '../FormControl';
+import { StyledFormControl } from '../FormControl';
 import { defaultThemeProp } from '../../theme';
 import Flex from '../Flex';
 import BareButton from '../Button/BareButton';
@@ -9,21 +8,22 @@ import { StyledMetaListItem } from '../MetaList/MetaList';
 import Button from '../Button';
 import { calculateFontSize } from '../../styles';
 import { StyledFileItem } from './FileItem';
-export const StyledDropZone = styled(FormControl)(({ compactMode, theme: { base: { 'hit-area': { 'finger-min': fingerMin, compact } }, components } }) => {
+export const StyledDropZone = styled(StyledFormControl)(({ compactMode, theme: { base: { 'hit-area': { 'finger-min': fingerMin, compact } }, components } }) => {
     return css `
-    height: ${components.input.height};
-    border: none;
-    cursor: pointer;
+      width: 100%;
+      height: ${components.input.height};
+      border: none;
+      cursor: pointer;
-    ${compactMode &&
+      ${compactMode &&
         css `
-      height: ${compact};
-    `}
+        height: ${compact};
+      `}
-    @media (pointer: coarse) {
-      height: ${fingerMin};
-    }
-  `;
+      @media (pointer: coarse) {
+        height: ${fingerMin};
+      }
+    `;
 });
 StyledDropZone.defaultProps = defaultThemeProp;
 export const StyledUploadStatus = styled(Flex)(({ dragOver, status, readOnly, theme: { base: { 'border-radius': borderRadius }, components: { 'form-field': formField, 'form-control': { 'border-color': borderColor, ':hover': { 'border-color': hoverBorderColor }, 'border-radius': formBorderRadius } } } }) => {
@@ -63,17 +63,15 @@ export const StyledIconWrapper = styled(Flex)(({ theme: { base: { 'border-radius
   `;
 });
 StyledIconWrapper.defaultProps = defaultThemeProp;
-export const StyledFileInput = styled.div(({ theme: { components: { 'form-control': { 'border-color': borderColor, ':focus': { 'box-shadow': boxShadow } } } } }) => {
+export const StyledFileInput = styled.div(({ theme: { components: { 'form-control': { 'border-color': borderColor } } } }) => {
     return css `
       position: relative;
       input {
-        ${hideVisually}
+        display: none;
       }
-      input:enabled:focus + ${StyledDropZone} {
-        box-shadow: ${boxShadow};
+      ${StyledDropZone}:focus:not([disabled]) {
         > ${StyledIconWrapper} {
           border: none;
         }

package/lib/components/File/FileInput.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileInput.styles.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { hideVisually } from 'polished';\n\nimport FormControl, { type FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport BareButton from '../Button/BareButton';\nimport FormField, { StyledFormFieldInfo } from '../FormField';\nimport { StyledMetaListItem } from '../MetaList/MetaList';\nimport Button from '../Button';\nimport { calculateFontSize } from '../../styles';\n\nimport type { FileInputProps } from './FileInput';\nimport { StyledFileItem } from './FileItem';\n\nexport const StyledDropZone = styled(FormControl)<{ compactMode: FileInputProps['compact'] }>(({\n compactMode,\n theme: {\n base: {\n 'hit-area': { 'finger-min': fingerMin, compact }\n },\n components\n }\n}) => {\n return css`\n height: ${components.input.height};\n border: none;\n cursor: pointer;\n\n ${compactMode &&\n css`\n height: ${compact};\n `}\n\n @media (pointer: coarse) {\n height: ${fingerMin};\n }\n `;\n});\n\nStyledDropZone.defaultProps = defaultThemeProp;\n\nexport const StyledUploadStatus = styled(Flex)<{\n status: FormControlProps['status'];\n readOnly: FormControlProps['readOnly'];\n dragOver: boolean;\n}>(({\n dragOver,\n status,\n readOnly,\n theme: {\n base: { 'border-radius': borderRadius },\n components: {\n 'form-field': formField,\n 'form-control': {\n 'border-color': borderColor,\n ':hover': { 'border-color': hoverBorderColor },\n 'border-radius': formBorderRadius\n }\n }\n }\n}) => {\n return css`\n border: 0.0625rem dashed ${borderColor};\n border-start-start-radius: calc(${borderRadius} * ${formBorderRadius});\n border-end-start-radius: calc(${borderRadius} * ${formBorderRadius});\n ${!readOnly &&\n css`\n ${status &&\n css`\n border-color: ${formField[status]['status-color']};\n `};\n\n ${dragOver &&\n css`\n border-style: solid;\n `}\n\n &:hover:not([disabled]):not(:focus, :focus-within) {\n ${!status &&\n css`\n border-color: ${hoverBorderColor};\n `}\n }\n `}\n `;\n});\n\nStyledUploadStatus.defaultProps = defaultThemeProp;\n\nexport const StyledIconWrapper = styled(Flex)(({\n theme: {\n base: { 'border-radius': borderRadius },\n components: {\n 'form-control': { 'border-color': borderColor, 'border-radius': formBorderRadius }\n }\n }\n}) => {\n return css`\n border: 0.0625rem solid ${borderColor};\n border-start-end-radius: calc(${borderRadius} * ${formBorderRadius});\n border-end-end-radius: calc(${borderRadius} * ${formBorderRadius});\n border-inline-start: none;\n aspect-ratio: 1 / 1;\n `;\n});\n\nStyledIconWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledFileInput = styled.div(\n ({\n theme: {\n components: {\n 'form-control': {\n 'border-color': borderColor,\n ':focus': { 'box-shadow': boxShadow }\n }\n }\n }\n }) => {\n return css`\n position: relative;\n\n input {\n ${hideVisually}\n }\n\n input:enabled:focus + ${StyledDropZone} {\n box-shadow: ${boxShadow};\n\n > ${StyledIconWrapper} {\n border: none;\n }\n > ${StyledUploadStatus} {\n border-block: none;\n border-inline-start: none;\n border-inline-end: 0.0625rem dashed ${borderColor};\n }\n }\n `;\n }\n);\n\nStyledFileInput.defaultProps = defaultThemeProp;\n\nexport const StyledSingleFileWrapper = styled.div<{ compact: FileInputProps['compact'] }>(\n ({ compact }) => {\n return css`\n display: contents;\n\n ${compact &&\n css`\n > ${StyledFileItem} {\n width: 25ch;\n }\n `};\n `;\n }\n);\n\nexport const StyledAttachedFileCount = styled.span(\n ({\n theme: {\n base: { palette, spacing }\n }\n }) => {\n return css`\n padding-inline-start: ${spacing};\n color: ${palette.interactive};\n `;\n }\n);\n\nStyledAttachedFileCount.defaultProps = defaultThemeProp;\n\nexport const StyledFlex = styled(Flex)`\n height: inherit;\n`;\n\nexport const StyledBareButton = styled(BareButton)(({\n theme: {\n base: {\n palette,\n 'hit-area': { 'finger-min': fingerMin, compact },\n 'border-radius': baseRadius\n },\n components: {\n 'form-control': {\n 'border-color': borderColor,\n 'border-radius': radius,\n ':focus': { 'box-shadow': boxShadow }\n }\n }\n }\n}) => {\n return css`\n height: ${compact};\n width: 25ch;\n cursor: pointer;\n border-radius: calc(${baseRadius} * ${radius});\n background-color: ${palette['primary-background']};\n\n @media (pointer: coarse) {\n height: ${fingerMin};\n }\n\n &:focus {\n box-shadow: ${boxShadow};\n\n ${StyledIconWrapper} {\n border: none;\n }\n ${StyledUploadStatus} {\n border-block: none;\n border-inline-start: none;\n border-inline-end: 0.0625rem dashed ${borderColor};\n }\n }\n `;\n});\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nexport const StyledFormField = styled(FormField)<{ compactMode: FileInputProps['compact'] }>(({\n compactMode\n}) => {\n return css`\n ${compactMode &&\n css`\n width: 25ch;\n `};\n `;\n});\n\nexport const StyledFileInputControl = styled(Flex)<Pick<FormControlProps, 'status'>>(({\n theme: {\n base: { spacing },\n components: { 'form-field': formField }\n },\n status\n}) => {\n return css`\n ${StyledFormFieldInfo} {\n margin-block-start: calc(0.5 * ${spacing});\n ${StyledMetaListItem}:first-child {\n color: ${status && formField[status]['status-color']};\n }\n }\n `;\n});\n\nStyledFileInputControl.defaultProps = defaultThemeProp;\n\nexport const StyledDownloadAllButton = styled(Button)(({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }\n }\n}) => {\n const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n return css`\n font-size: ${infoFontSize};\n margin-block-start: calc(0.5 * ${spacing});\n align-self: flex-start;\n `;\n});\n\nStyledDownloadAllButton.defaultProps = defaultThemeProp;\n"]}
1	+ {"version":3,"file":"FileInput.styles.js","sourceRoot":"","sources":["../../../src/components/File/FileInput.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { StyledFormControl, type FormControlProps } from '../FormControl';\nimport { defaultThemeProp } from '../../theme';\nimport Flex from '../Flex';\nimport BareButton from '../Button/BareButton';\nimport FormField, { StyledFormFieldInfo } from '../FormField';\nimport { StyledMetaListItem } from '../MetaList/MetaList';\nimport Button from '../Button';\nimport { calculateFontSize } from '../../styles';\n\nimport type { FileInputProps } from './FileInput';\nimport { StyledFileItem } from './FileItem';\n\nexport const StyledDropZone = styled(StyledFormControl)<{ compactMode: FileInputProps['compact'] }>(\n ({\n compactMode,\n theme: {\n base: {\n 'hit-area': { 'finger-min': fingerMin, compact }\n },\n components\n }\n }) => {\n return css`\n width: 100%;\n height: ${components.input.height};\n border: none;\n cursor: pointer;\n\n ${compactMode &&\n css`\n height: ${compact};\n `}\n\n @media (pointer: coarse) {\n height: ${fingerMin};\n }\n `;\n }\n);\n\nStyledDropZone.defaultProps = defaultThemeProp;\n\nexport const StyledUploadStatus = styled(Flex)<{\n status: FormControlProps['status'];\n readOnly: FormControlProps['readOnly'];\n dragOver: boolean;\n}>(({\n dragOver,\n status,\n readOnly,\n theme: {\n base: { 'border-radius': borderRadius },\n components: {\n 'form-field': formField,\n 'form-control': {\n 'border-color': borderColor,\n ':hover': { 'border-color': hoverBorderColor },\n 'border-radius': formBorderRadius\n }\n }\n }\n}) => {\n return css`\n border: 0.0625rem dashed ${borderColor};\n border-start-start-radius: calc(${borderRadius} * ${formBorderRadius});\n border-end-start-radius: calc(${borderRadius} * ${formBorderRadius});\n ${!readOnly &&\n css`\n ${status &&\n css`\n border-color: ${formField[status]['status-color']};\n `};\n\n ${dragOver &&\n css`\n border-style: solid;\n `}\n\n &:hover:not([disabled]):not(:focus, :focus-within) {\n ${!status &&\n css`\n border-color: ${hoverBorderColor};\n `}\n }\n `}\n `;\n});\n\nStyledUploadStatus.defaultProps = defaultThemeProp;\n\nexport const StyledIconWrapper = styled(Flex)(({\n theme: {\n base: { 'border-radius': borderRadius },\n components: {\n 'form-control': { 'border-color': borderColor, 'border-radius': formBorderRadius }\n }\n }\n}) => {\n return css`\n border: 0.0625rem solid ${borderColor};\n border-start-end-radius: calc(${borderRadius} * ${formBorderRadius});\n border-end-end-radius: calc(${borderRadius} * ${formBorderRadius});\n border-inline-start: none;\n aspect-ratio: 1 / 1;\n `;\n});\n\nStyledIconWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledFileInput = styled.div(\n ({\n theme: {\n components: {\n 'form-control': { 'border-color': borderColor }\n }\n }\n }) => {\n return css`\n position: relative;\n\n input {\n display: none;\n }\n\n ${StyledDropZone}:focus:not([disabled]) {\n > ${StyledIconWrapper} {\n border: none;\n }\n > ${StyledUploadStatus} {\n border-block: none;\n border-inline-start: none;\n border-inline-end: 0.0625rem dashed ${borderColor};\n }\n }\n `;\n }\n);\n\nStyledFileInput.defaultProps = defaultThemeProp;\n\nexport const StyledSingleFileWrapper = styled.div<{ compact: FileInputProps['compact'] }>(\n ({ compact }) => {\n return css`\n display: contents;\n\n ${compact &&\n css`\n > ${StyledFileItem} {\n width: 25ch;\n }\n `};\n `;\n }\n);\n\nexport const StyledAttachedFileCount = styled.span(\n ({\n theme: {\n base: { palette, spacing }\n }\n }) => {\n return css`\n padding-inline-start: ${spacing};\n color: ${palette.interactive};\n `;\n }\n);\n\nStyledAttachedFileCount.defaultProps = defaultThemeProp;\n\nexport const StyledFlex = styled(Flex)`\n height: inherit;\n`;\n\nexport const StyledBareButton = styled(BareButton)(({\n theme: {\n base: {\n palette,\n 'hit-area': { 'finger-min': fingerMin, compact },\n 'border-radius': baseRadius\n },\n components: {\n 'form-control': {\n 'border-color': borderColor,\n 'border-radius': radius,\n ':focus': { 'box-shadow': boxShadow }\n }\n }\n }\n}) => {\n return css`\n height: ${compact};\n width: 25ch;\n cursor: pointer;\n border-radius: calc(${baseRadius} * ${radius});\n background-color: ${palette['primary-background']};\n\n @media (pointer: coarse) {\n height: ${fingerMin};\n }\n\n &:focus {\n box-shadow: ${boxShadow};\n\n ${StyledIconWrapper} {\n border: none;\n }\n ${StyledUploadStatus} {\n border-block: none;\n border-inline-start: none;\n border-inline-end: 0.0625rem dashed ${borderColor};\n }\n }\n `;\n});\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nexport const StyledFormField = styled(FormField)<{ compactMode: FileInputProps['compact'] }>(({\n compactMode\n}) => {\n return css`\n ${compactMode &&\n css`\n width: 25ch;\n `};\n `;\n});\n\nexport const StyledFileInputControl = styled(Flex)<Pick<FormControlProps, 'status'>>(({\n theme: {\n base: { spacing },\n components: { 'form-field': formField }\n },\n status\n}) => {\n return css`\n ${StyledFormFieldInfo} {\n margin-block-start: calc(0.5 * ${spacing});\n ${StyledMetaListItem}:first-child {\n color: ${status && formField[status]['status-color']};\n }\n }\n `;\n});\n\nStyledFileInputControl.defaultProps = defaultThemeProp;\n\nexport const StyledDownloadAllButton = styled(Button)(({\n theme: {\n base: { 'font-size': fontSize, 'font-scale': fontScale, spacing }\n }\n}) => {\n const { xxs: infoFontSize } = calculateFontSize(fontSize, fontScale);\n return css`\n font-size: ${infoFontSize};\n margin-block-start: calc(0.5 * ${spacing});\n align-self: flex-start;\n `;\n});\n\nStyledDownloadAllButton.defaultProps = defaultThemeProp;\n"]}

package/lib/components/FormField/FormField.d.ts CHANGED Viewed

@@ -73,7 +73,7 @@ export interface FormFieldProps extends OmitStrict<FormControlProps, 'placeholde
 export declare const StyledFormFieldInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Pick<FormControlProps, "status">, never>;
 export declare const StyledLabelRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledFormField: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, FormFieldProps & {
-    labelAsLegend: boolean;
+    asFieldset: boolean;
     showAdditionalInfo: boolean;
 }, never>;
 declare const _default: FC<FormFieldProps & ForwardProps> & {

package/lib/components/FormField/FormField.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAK9F,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAa3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAIrD,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC,EAC5E,UAAU,CAAC,OAAO,QAAQ,CAAC;IAC7B,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mGAAmG;IACnG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAgCD,eAAO,MAAM,mBAAmB,uIA6B/B,CAAC;AAIF,eAAO,MAAM,cAAc,yGAAe,CAAC;AAE3C,eAAO,MAAM,eAAe;~~mBACQ~~,OAAO;wBAAsB,OAAO;~~SAoFtE~~,CAAC;;;;~~AA4TH~~,wBAA2D"}
1	+ {"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../src/components/FormField/FormField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAwB,MAAM,OAAO,CAAC;AAK9F,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE/F,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGvD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAa3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAIrD,MAAM,WAAW,cACf,SAAQ,UAAU,CAAC,gBAAgB,EAAE,aAAa,GAAG,OAAO,GAAG,cAAc,CAAC,EAC5E,UAAU,CAAC,OAAO,QAAQ,CAAC;IAC7B,kFAAkF;IAClF,QAAQ,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IACxC;;;;;;;;OAQG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,UAAU,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAC7C;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC,CAAC;IACxD,kEAAkE;IAClE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,2CAA2C;IAC3C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mGAAmG;IACnG,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,mDAAmD;IACnD,qBAAqB,CAAC,EAAE,OAAO,CAAC;CACjC;AAgCD,eAAO,MAAM,mBAAmB,uIA6B/B,CAAC;AAIF,eAAO,MAAM,cAAc,yGAAe,CAAC;AAE3C,eAAO,MAAM,eAAe;gBACK,OAAO;wBAAsB,OAAO;SAuEnE,CAAC;;;;AA6UH,wBAA2D"}

package/lib/components/FormField/FormField.js CHANGED Viewed

@@ -3,7 +3,7 @@ import { cloneElement, useEffect, forwardRef, useState, useRef, Children } from
 import styled, { css } from 'styled-components';
 import { rgba } from 'polished';
 import { defaultThemeProp } from '../../theme';
-import Flex from '../Flex';
+import Flex, { StyledFlex } from '../Flex';
 import Actions from '../Actions';
 import { useConsolidatedRef, useI18n, useLiveLog, useTestIds, useUID } from '../../hooks';
 import Label, { StyledLabel } from '../Label';
@@ -16,7 +16,7 @@ import * as warnSolidIcon from '../Icon/icons/warn-solid.icon';
 import * as diamondMinusIcon from '../Icon/icons/diamond-minus.icon';
 import * as checkIcon from '../Icon/icons/check.icon';
 import AdditionalInfo, { StyledAdditionalInfo } from '../AdditionalInfo';
-import { StyledRadioCheckInput } from '../RadioCheck/RadioCheck';
+import { StyledRadioCheck, StyledRadioCheckInput } from '../RadioCheck/RadioCheck';
 import { getFormFieldTestIds } from './FormField.test-ids';
 registerIcon(warnSolidIcon, diamondMinusIcon, checkIcon);
 const StyledStatusIcon = styled(Icon)(({ theme, status }) => {
@@ -56,7 +56,7 @@ export const StyledFormFieldInfo = styled.div(({ status, theme: { base: { 'font-
 StyledFormFieldInfo.defaultProps = defaultThemeProp;
 export const StyledLabelRow = styled.div ``;
 export const StyledFormField = styled.div(props => {
-    const { labelAsLegend, isRadioCheck, showAdditionalInfo, disabled, required, theme: { base: { palette: { urgent }, 'disabled-opacity': disabledOpacity, spacing, 'hit-area': { 'compact-min': hitAreaCompact } } } } = props;
+    const { asFieldset, showAdditionalInfo, disabled, required, theme: { base: { palette: { urgent }, 'disabled-opacity': disabledOpacity, spacing, 'hit-area': { 'compact-min': hitAreaCompact } } } } = props;
     return css `
     ${disabled &&
         css `
@@ -73,14 +73,18 @@ export const StyledFormField = styled.div(props => {
       }
     }
-    > ${StyledLabel}, > ${StyledLabelRow} {
+    ${StyledFlex}:has(${StyledRadioCheck}) {
+      flex-shrink: 0;
+    }
+    > ${StyledLabel}, > ${StyledLabelRow}, > ${StyledFlex}:has(> ${StyledLabel}) {
       &:not(:empty) {
         margin-bottom: calc(0.25 * ${spacing});
         min-height: ${hitAreaCompact};
       }
     }
-    > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel} {
+    > ${StyledLabel}, > ${StyledLabelRow} > ${StyledLabel}, > ${StyledFlex} > ${StyledLabel} {
       ${required &&
         css `
         &::after {
@@ -95,31 +99,15 @@ export const StyledFormField = styled.div(props => {
       `}
     }
-    ${labelAsLegend &&
-        css `
-      > legend {
-        display: inline-flex;
-        align-items: flex-end;
-      }
-    `}
-    ${labelAsLegend &&
+    ${asFieldset &&
         showAdditionalInfo &&
         css `
-      display: block;
-      > legend {
-        float: inline-start;
+      > ${StyledFlex} > ${StyledLabel} {
+        display: block;
       }
-      > ${StyledAdditionalInfo} {
-        ${!isRadioCheck &&
-            css `
-          float: inline-end;
-        `}
-        + * {
-          clear: both;
-        }
+      > ${StyledFlex}:has(> ${StyledLabel}) > ${StyledAdditionalInfo} {
+        align-self: flex-start;
       }
     `}
   `;
@@ -166,21 +154,35 @@ StyledSuggestionButton.defaultProps = defaultThemeProp;
 const statusIconMap = { error: 'warn-solid', warning: 'diamond-minus', success: 'check' };
 const FormField = forwardRef(function FormField(props, ref) {
     const uid = useUID();
-    const { testId, children: controlElement, id = uid, as = 'div', label, labelAs = 'label', labelFor = id, labelId, labelHidden = false, labelAfter = false, info, status, suppressAnnouncements, isRadioCheck, charLimitDisplay, required = false, disabled = false, readOnly = false, inline = false, onClear, actions, container, additionalInfo, onResolveSuggestion, 'aria-describedby': ariaDescribedBy, className, ...restProps } = props;
+    const { testId, children: controlElement, id = uid, as = 'div', label, labelAs: labelAsProp = 'label', labelFor = id, labelId: labelIdProp, labelHidden = false, labelAfter = false, info, status, suppressAnnouncements, isRadioCheck, charLimitDisplay, required = false, disabled = false, readOnly = false, inline = false, onClear, actions, container, additionalInfo, onResolveSuggestion, 'aria-describedby': ariaDescribedBy, className, ...restProps } = props;
     const testIds = useTestIds(testId, getFormFieldTestIds);
+    const asFieldset = as === 'fieldset' || (typeof as !== 'string' && 'target' in as && as.target === 'fieldset');
     const t = useI18n();
     const { announceAssertive } = useLiveLog();
-    const labelAsLegend = labelAs === 'legend';
+    const labelAs = asFieldset || labelAsProp === 'legend' ? 'span' : labelAsProp;
     const hasSuggestion = status === 'pending' && !!onResolveSuggestion;
     const consolidatedRef = useConsolidatedRef(ref);
     const labelRef = useRef(null);
     const [labelText, setLabelText] = useState(null);
     const showAdditionalInfo = !!additionalInfo && !disabled && !labelHidden;
+    const labelId = asFieldset && !labelIdProp ? `${id}-label` : labelIdProp;
     const labelContent = (_jsxs(_Fragment, { children: [_jsx(Label, { "data-testid": testIds.label, id: labelId, as: labelAs, htmlFor: labelAs === 'label' ? labelFor : undefined, labelHidden: labelHidden, onClick: (e) => {
                     if (readOnly)
                         e.preventDefault();
                 }, inline: inline, ref: labelRef, children: label }), showAdditionalInfo && labelText && (_jsx(AdditionalInfo, { "data-testid": testIds.additionalInfo, heading: additionalInfo.heading, contextualLabel: labelText, children: additionalInfo.content }))] }));
-    const labelRow = !isRadioCheck && !labelAsLegend && !labelHidden ? (_jsx(Flex, { as: StyledLabelRow, container: { justify: 'between', alignItems: 'end' }, item: { alignSelf: 'stretch' }, children: labelContent })) : (labelContent);
+    let labelRow;
+    if (!isRadioCheck && !asFieldset && !labelHidden) {
+        labelRow = (_jsx(Flex, { as: StyledLabelRow, container: { justify: 'between', alignItems: 'end' }, item: { alignSelf: 'stretch' }, children: labelContent }));
+    }
+    else if (asFieldset && !labelHidden) {
+        labelRow = (_jsx(Flex, { container: {
+                alignItems: 'end',
+                justify: showAdditionalInfo && !isRadioCheck ? 'between' : undefined
+            }, children: labelContent }));
+    }
+    else {
+        labelRow = labelContent;
+    }
     useEffect(() => {
         setLabelText(labelRef.current?.textContent ?? null);
     }, [label]);
@@ -196,7 +198,7 @@ const FormField = forwardRef(function FormField(props, ref) {
     }, [status, info]);
     // fieldset or single form control element
     let content;
-    if (labelAsLegend || Children.count(controlElement) > 1) {
+    if (asFieldset || Children.count(controlElement) > 1) {
         content = controlElement;
     }
     else {
@@ -236,14 +238,14 @@ const FormField = forwardRef(function FormField(props, ref) {
     const descriptionIds = [];
     if (ariaDescribedBy)
         descriptionIds.push(ariaDescribedBy);
-    if (labelAsLegend && info)
+    if (asFieldset && info)
         descriptionIds.push(`${id}-info`);
     return (_jsxs(Flex, { "data-testid": testIds.root, ...restProps, container: {
             direction: inline ? 'row' : 'column',
             alignItems: inline ? 'center' : undefined,
             wrap: isRadioCheck ? 'wrap' : undefined,
             ...container
-        }, as: StyledFormField, labelAsLegend: labelAsLegend, isRadioCheck: isRadioCheck, showAdditionalInfo: showAdditionalInfo, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, onKeyDown: hasSuggestion ? onKeyDown : undefined, "aria-describedby": descriptionIds.length ? descriptionIds.join(' ') : undefined, ref: consolidatedRef, className: createClassName('form-field', className, { status }), children: [(labelAsLegend || !labelAfter) && labelRow, content, !labelAsLegend && labelAfter && labelRow, !readOnly && infoContent, isRadioCheck && onClear && (_jsx(StyledClearButton, { variant: 'link', onClick: () => {
+        }, as: StyledFormField, asFieldset: asFieldset, isRadioCheck: isRadioCheck, showAdditionalInfo: showAdditionalInfo, id: `${id}-field`, forwardedAs: as, required: required, disabled: disabled, readOnly: readOnly, onKeyDown: hasSuggestion ? onKeyDown : undefined, "aria-describedby": descriptionIds.length ? descriptionIds.join(' ') : undefined, "aria-labelledby": asFieldset ? labelId : undefined, ref: consolidatedRef, className: createClassName('form-field', className, { status }), children: [(asFieldset || !labelAfter) && labelRow, content, !asFieldset && labelAfter && labelRow, !readOnly && infoContent, isRadioCheck && onClear && (_jsx(StyledClearButton, { variant: 'link', onClick: () => {
                     onClear();
                 }, children: t('clear_selection') }))] }));
 });