@axinom/mosaic-ui 0.34.0-rc.3 → 0.34.0-rc.30

package/dist/initialize.d.ts

@@ -1,5 +1,5 @@
 import { AddIndicator, CustomEventEmitter, RemoveIndicator, ShowNotification } from './types/ui-config';
-export declare enum IndicatorType {
+export declare enum SaveIndicatorType {
     Saving = "saving",
     Inactive = "inactive",
     Dirty = "dirty"
@@ -8,7 +8,7 @@ export declare let showNotification: ShowNotification | (() => void);
 export declare let addIndicator: AddIndicator | (() => void);
 export declare let removeIndicator: RemoveIndicator | (() => void);
 export declare let on: CustomEventEmitter['on'] | (() => void);
-export declare let setSaveIndicator: (type: IndicatorType) => void;
+export declare let setSaveIndicator: (type: SaveIndicatorType) => void;
 /**
  * Passes the PiralApi methods to the UI library.
  * @param app {UiConfig} object containing PiralApi methods for use in UI library.
@@ -19,6 +19,6 @@ export interface UiConfig {
     addIndicator: AddIndicator;
     removeIndicator: RemoveIndicator;
     on: CustomEventEmitter['on'];
-    setSaveIndicator: (type: IndicatorType) => void;
+    setSaveIndicator: (type: SaveIndicatorType) => void;
 }
 //# sourceMappingURL=initialize.d.ts.map

package/dist/initialize.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"initialize.d.ts","sourceRoot":"","sources":["../src/initialize.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EACjB,MAAM,mBAAmB,CAAC;AAE3B,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,KAAK,UAAU;CAChB;AAED,eAAO,IAAI,gBAAgB,EAAE,gBAAgB,GAAG,CAAC,MAAM,IAAI,CAC7B,CAAC;AAE/B,eAAO,IAAI,YAAY,EAAE,YAAY,GAAG,CAAC,MAAM,IAAI,CAA4B,CAAC;AAEhF,eAAO,IAAI,eAAe,EAAE,eAAe,GAAG,CAAC,MAAM,IAAI,CAC5B,CAAC;AAE9B,eAAO,IAAI,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAkB,CAAC;AAExE,eAAO,IAAI,gBAAgB,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IACvB,CAAC;AAEhC;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAQhD;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,eAAe,CAAC;IACjC,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC7B,gBAAgB,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAC;CACjD"}
+{"version":3,"file":"initialize.d.ts","sourceRoot":"","sources":["../src/initialize.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EACjB,MAAM,mBAAmB,CAAC;AAE3B,oBAAY,iBAAiB;IAC3B,MAAM,WAAW;IACjB,QAAQ,aAAa;IACrB,KAAK,UAAU;CAChB;AAED,eAAO,IAAI,gBAAgB,EAAE,gBAAgB,GAAG,CAAC,MAAM,IAAI,CAC7B,CAAC;AAE/B,eAAO,IAAI,YAAY,EAAE,YAAY,GAAG,CAAC,MAAM,IAAI,CAA4B,CAAC;AAEhF,eAAO,IAAI,eAAe,EAAE,eAAe,GAAG,CAAC,MAAM,IAAI,CAC5B,CAAC;AAE9B,eAAO,IAAI,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,IAAI,CAAkB,CAAC;AAExE,eAAO,IAAI,gBAAgB,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAC5B,CAAC;AAE/B;;;GAGG;AACH,wBAAgB,YAAY,CAAC,GAAG,EAAE,QAAQ,GAAG,IAAI,CAQhD;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,eAAe,CAAC;IACjC,EAAE,EAAE,kBAAkB,CAAC,IAAI,CAAC,CAAC;IAC7B,gBAAgB,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;CACrD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.34.0-rc.3",
+  "version": "0.34.0-rc.30",
   "description": "UI components for building Axinom Mosaic applications",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,7 +32,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@axinom/mosaic-core": "^0.4.7-rc.3",
+    "@axinom/mosaic-core": "^0.4.7-rc.30",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -102,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e9994f38e322c8c6e9e577ef88bb56843f5ab3c7"
+  "gitHead": "65dcc8171ed05c0a0415014f9c7f9ef4e1362c8c"
 }

package/src/components/DynamicDataList/DynamicListDataEntry/Renderers/createInputRenderer/createInputRenderer.spec.tsx

@@ -49,7 +49,7 @@ describe('createInputRenderer', () => {
 
     const input = wrapper.find('input');
 
-    expect(input.prop('value')).toBe(mockValue);
+    expect(input.getDOMNode<HTMLInputElement>().value).toBe(mockValue);
   });
 
   it(`emits 'onValueChange' with the new value when 'input' value has changed`, () => {
@@ -59,7 +59,7 @@ describe('createInputRenderer', () => {
 
     const input = wrapper.find('input');
 
-    expect(input.prop('value')).toBe('');
+    expect(input.getDOMNode<HTMLInputElement>().value).toBe('');
 
     act(() => {
       input.simulate('change', { target: { value: mockValueUpdated } });

package/src/components/Explorer/Explorer.stories.tsx

@@ -238,6 +238,22 @@ initializeUi({
     action('showNotification')(args);
     return faker.random.numeric();
   },
+  addIndicator: (args) => {
+    action('addIndicator')(args);
+    return Math.random();
+  },
+  removeIndicator: (args) => {
+    action('removeIndicator')(args);
+  },
+  showSaveIndicator: () => {
+    action('showSaveIndicator')();
+  },
+  hideSaveIndicator: () => {
+    action('hideSaveIndicator')();
+  },
+  on: (event, callback) => {
+    action('on')(event, callback);
+  },
 });
 
 export const ActionErrors: StoryObj<ExplorerStoryType> = {

package/src/components/Explorer/Explorer.tsx

@@ -433,37 +433,39 @@ export const Explorer = React.forwardRef(function Explorer<T extends Data>(
           setActiveFilters(args);
         }}
       />
-      <List<T>
-        columns={columns}
-        data={data}
-        isLoading={isLoading}
-        isError={Boolean(stationMessage?.type === 'error')}
-        handleRetry={false}
-        minimumWidth={minimumWidth}
-        columnGap={columnGap}
-        rowGap={rowGap}
-        headerRowHeight={headerRowHeight}
-        listRowHeight={listRowHeight}
-        listRowActionSize={listRowActionSize}
-        headerRowActionSize={headerRowActionSize}
-        horizontalTextAlign={horizontalTextAlign}
-        verticalTextAlign={verticalTextAlign}
-        keyProperty={keyProperty}
-        showActionButton={Boolean(generateItemLink) || Boolean(onItemClicked)} // or hard code to `true`?
-        selectionMode={mode}
-        enableSelectAll={enableSelectAll}
-        loadingTriggerOffset={loadingTriggerOffset}
-        defaultSortOrder={sortOrder}
-        generateItemLink={generateItemLink}
-        onItemClicked={onItemClickedHandler}
-        onItemSelected={itemSelectedHandler}
-        onRequestMoreData={onRequestMoreData}
-        onSortChanged={(sortData: SortData<T>) => {
-          onSortChanged(sortData);
-          setSortOrder(sortData);
-        }}
-        inlineMenuActions={inlineMenuActions && inlineMenuActionsHandler}
-      />
+      <div>
+        <List<T>
+          columns={columns}
+          data={data}
+          isLoading={isLoading}
+          isError={Boolean(stationMessage?.type === 'error')}
+          handleRetry={false}
+          minimumWidth={minimumWidth}
+          columnGap={columnGap}
+          rowGap={rowGap}
+          headerRowHeight={headerRowHeight}
+          listRowHeight={listRowHeight}
+          listRowActionSize={listRowActionSize}
+          headerRowActionSize={headerRowActionSize}
+          horizontalTextAlign={horizontalTextAlign}
+          verticalTextAlign={verticalTextAlign}
+          keyProperty={keyProperty}
+          showActionButton={Boolean(generateItemLink) || Boolean(onItemClicked)} // or hard code to `true`?
+          selectionMode={mode}
+          enableSelectAll={enableSelectAll}
+          loadingTriggerOffset={loadingTriggerOffset}
+          defaultSortOrder={sortOrder}
+          generateItemLink={generateItemLink}
+          onItemClicked={onItemClickedHandler}
+          onItemSelected={itemSelectedHandler}
+          onRequestMoreData={onRequestMoreData}
+          onSortChanged={(sortData: SortData<T>) => {
+            onSortChanged(sortData);
+            setSortOrder(sortData);
+          }}
+          inlineMenuActions={inlineMenuActions && inlineMenuActionsHandler}
+        />
+      </div>
     </div>
   );
 });

package/src/components/Filters/Filter/Filter.spec.tsx

@@ -1,7 +1,12 @@
 import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { Button } from '../../Buttons';
-import { CustomFilterProps, FilterType, FilterTypes } from '../Filters.model';
+import {
+  CustomFilterProps,
+  FilterType,
+  FilterTypes,
+  SelectedValueRenderer,
+} from '../Filters.model';
 import { FreeTextFilter } from '../SelectionTypes/FreeTextFilter/FreeTextFilter';
 import { OptionsFilter } from '../SelectionTypes/OptionsFilter/OptionsFilter';
 import { Filter, FilterProps } from './Filter';
@@ -148,6 +153,24 @@ describe('Filter', () => {
     expect(wrapper.find('.selectedValue').exists()).toBe(false);
   });
 
+  it(`'selectedValueRenderer' value is displayed when the prop is set`, () => {
+    const renderedValue = `${sampleText} renderer`;
+    const selectedValueRenderer: SelectedValueRenderer = (value) => {
+      return `${value} renderer`;
+    };
+
+    const wrapper = mount(
+      <Filter {...defaultProps} options={freeTextFilter} value={sampleText} />,
+    );
+
+    expect(wrapper.find('.selectedValue').text()).toEqual(sampleText);
+
+    wrapper.setProps({ selectedValueRenderer });
+    wrapper.update();
+
+    expect(wrapper.find('.selectedValue').text()).toEqual(renderedValue);
+  });
+
   it('Raises onFilterChange with prop name and new undefined value when filter is closed', () => {
     const mockValue = 'test-value';
     const wrapper = mount(

package/src/components/Filters/Filter/Filter.tsx

@@ -26,6 +26,7 @@ export interface FilterProps<T extends Data> {
   index?: number;
   isActive: boolean;
   className?: string;
+  selectedValueRenderer?: (value: FilterValue) => string;
   onFilterChange: (prop: keyof T, value: FilterValue, index: number) => void;
   onValidate?: (currentValue: FilterValue) => string | null | undefined;
   onFilterClicked: () => void;
@@ -37,6 +38,7 @@ export const Filter = <T extends Data>({
   index = -1,
   isActive,
   className = '',
+  selectedValueRenderer,
   onFilterChange,
   onFilterClicked,
   onValidate,
@@ -72,6 +74,10 @@ export const Filter = <T extends Data>({
   };
 
   const renderValue = (value: unknown): ReactNode => {
+    if (selectedValueRenderer !== undefined) {
+      return selectedValueRenderer(value);
+    }
+
     switch (options.type) {
       case FilterTypes.Date:
         return formatDate(String(value));

package/src/components/Filters/Filters.model.ts

@@ -15,6 +15,7 @@ export interface FilterConfig<T extends Data> {
   label: string;
   property: keyof T;
   type: FilterTypes;
+  selectedValueRenderer?: SelectedValueRenderer;
   onValidate?: FilterValidatorFunction<T>;
 }
 
@@ -105,3 +106,5 @@ export type FilterValidatorFunction<T> = (
   value: FilterValue,
   allValues: FilterValues<T>,
 ) => FilterValidationResult;
+
+export type SelectedValueRenderer = (value: FilterValue) => string;

package/src/components/Filters/Filters.stories.tsx

@@ -153,6 +153,15 @@ const customFilter: FilterType<{ custom: string }> = {
   label: 'Custom Filter (multi select)',
   property: 'custom',
   type: FilterTypes.Custom,
+  selectedValueRenderer: (value: unknown) => {
+    const items = value as string[];
+
+    return String(
+      `${items.length} item${items.length === 1 ? '' : 's'}: ${items
+        .join(', ')
+        .replace(/([a-zA-Z])(\d)/g, '$1 $2')}`,
+    );
+  },
   component: CustomFilterComponent,
 };
 

package/src/components/Filters/Filters.tsx

@@ -134,6 +134,7 @@ export const Filters = <T extends Data>({
         index={index}
         isActive={index === activeFilterIndex}
         onFilterChange={filtersChangedHandler}
+        selectedValueRenderer={filter.selectedValueRenderer}
         onValidate={(currentValue) =>
           filter.onValidate &&
           filter.onValidate(currentValue, activeFilters.current)

package/src/components/FormElements/BooleanView/BooleanViewField.scss

@@ -8,18 +8,16 @@
     font-size: var(--label-font-size, $label-font-size);
     align-items: center;
 
-    .red {
-      background-color: $red;
+    .false {
+      background-image: url("data:image/svg+xml, %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' %3E%3Cpath vector-effect='non-scaling-stroke' fill='none' stroke='%23707070' stroke-width='2' d='M20.1,2.4c9.9,0,18,8.1,18,18s-8.1,18-18,18s-18-8.1-18-18 S10.2,2.4,20.1,2.4z M28.6,20H11.4'/%3E%3C/svg%3E");
       height: 20px;
       width: 20px;
-      border-radius: 100%;
     }
 
-    .green {
-      background-color: $green;
+    .true {
+      background-image: url("data:image/svg+xml, %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' %3E%3Cpath vector-effect='non-scaling-stroke' fill='none' stroke='%2395C842' stroke-width='2' d='M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M29,13.5 L17.8,26.3L11,19.1'/%3E%3C/svg%3E");
       height: 20px;
       width: 20px;
-      border-radius: 100%;
     }
   }
 }

package/src/components/FormElements/BooleanView/BooleanViewField.spec.tsx

@@ -40,8 +40,8 @@ describe('BooleanViewField', () => {
       />,
     );
 
-    const green = wrapper.find('.green');
-    const red = wrapper.find('.red');
+    const green = wrapper.find('.true');
+    const red = wrapper.find('.false');
     const text = wrapper.find('.text');
 
     expect(green.exists()).toBe(true);
@@ -61,8 +61,8 @@ describe('BooleanViewField', () => {
       />,
     );
 
-    const green = wrapper.find('.green');
-    const red = wrapper.find('.red');
+    const green = wrapper.find('.true');
+    const red = wrapper.find('.false');
     const text = wrapper.find('.text');
 
     expect(green.exists()).toBe(false);
@@ -73,8 +73,8 @@ describe('BooleanViewField', () => {
   it('defaults to show red circle', () => {
     const wrapper = shallow(<BooleanViewField />);
 
-    const green = wrapper.find('.green');
-    const red = wrapper.find('.red');
+    const green = wrapper.find('.true');
+    const red = wrapper.find('.false');
 
     expect(green.exists()).toBe(false);
     expect(red.exists()).toBe(true);

package/src/components/FormElements/BooleanView/BooleanViewField.tsx

@@ -31,7 +31,7 @@ export const BooleanViewField: React.FC<BooleanViewFieldProps> = ({
       dataTestFieldType="BooleanView"
     >
       <div className={clsx(classes.value)}>
-        <div className={clsx(value ? classes.green : classes.red)}></div>
+        <div className={clsx(value ? classes.true : classes.false)}></div>
         <div
           className={clsx(classes.text)}
           data-test-id="form-field-value"

package/src/components/FormElements/Checkbox/Checkbox.tsx

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 import React, { useRef, useState } from 'react';
 import {
+  ConfirmDialog,
   ConfirmationConfig,
   ConfirmationMode,
-  ConfirmDialog,
 } from '../../ConfirmDialog';
 import { BaseFormControl, BaseInputEvents } from '../Form.models';
 import { FormElementContainer } from '../FormElementContainer';

package/src/components/FormElements/Checkbox/CheckboxField.tsx

@@ -2,12 +2,11 @@ import { useField } from 'formik';
 import React from 'react';
 import { useFormikError } from '../useFormikError';
 import { Checkbox, CheckboxProps } from './Checkbox';
-export const CheckboxField: React.FC<Omit<CheckboxProps, 'error'>> = (
-  props,
-) => {
-  const { name } = props;
+export const CheckboxField: React.FC<
+  Omit<CheckboxProps, 'error' | 'onChange'>
+> = (props) => {
   const error = useFormikError(props.name);
-  const [field, , helpers] = useField(name);
+  const [field, , helpers] = useField(props.name);
 
   return (
     <Checkbox

package/src/components/FormElements/CustomTags/CustomTags.scss

@@ -127,7 +127,10 @@
           stroke: white;
         }
 
-        background-color: $blue;
+        background-color: var(
+          --tag-plus-button-bg-color,
+          $tag-plus-button-bg-color
+        );
         position: absolute;
         right: 1px;
         top: 1px;
@@ -146,8 +149,16 @@
 
         &:enabled {
           &:hover {
-            border: 1px solid $blue;
-            box-shadow: 0 0 0 2px $blue;
+            border: 1px solid
+              var(
+                --tag-plus-button-hover-stroke-color,
+                $tag-plus-button-hover-stroke-color
+              );
+            box-shadow: 0 0 0 2px
+              var(
+                --tag-plus-button-hover-stroke-color,
+                $tag-plus-button-hover-stroke-color
+              );
 
             &.hasError {
               border: 1px solid
@@ -164,7 +175,7 @@
 
 .customTagEnter {
   opacity: 0;
-  background-color: rgba($blue, 0.25) !important;
+  background-color: var(--tag-enter-color, $tag-enter-color) !important;
 }
 
 .customTagEnterActive {

package/src/components/FormElements/CustomTags/CustomTags.spec.tsx

@@ -70,7 +70,7 @@ describe('CustomTags', () => {
 
   it('displays a tag for each currently selected tag', () => {
     const mockCurrentTags = ['1', '2', '3'];
-    const wrapper = shallow(
+    const wrapper = mount(
       <CustomTags name={'test-name'} value={mockCurrentTags} />,
     );
 
@@ -361,7 +361,7 @@ describe('CustomTags', () => {
     const onChangeSpy = jest.fn();
     const mockCurrentTags = ['1', '2', '3'];
     const mockTag = '';
-    const wrapper = shallow(
+    const wrapper = mount(
       <CustomTags
         name={'test-name'}
         onChange={onChangeSpy}
@@ -394,7 +394,7 @@ describe('CustomTags', () => {
     const onChangeSpy = jest.fn();
     const mockCurrentTags = ['1', '2', '3'];
     const mockTag = '2';
-    const wrapper = shallow(
+    const wrapper = mount(
       <CustomTags
         name={'test-name'}
         onChange={onChangeSpy}

package/src/components/FormElements/CustomTags/CustomTags.tsx

@@ -56,7 +56,7 @@ export const CustomTags: React.FC<CustomTagsProps> = ({
   id,
   name,
   type = 'text',
-  value = [],
+  value,
   disabled = false,
   placeholder,
   error = undefined,
@@ -70,12 +70,12 @@ export const CustomTags: React.FC<CustomTagsProps> = ({
   className = '',
   ...rest
 }) => {
-  const [currentTags, setCurrentTags] = useState<string[]>(value); // Current tags the user has selected
+  const [currentTags, setCurrentTags] = useState<string[]>([]); // Current tags the user has selected
   const [shouldAnimate, setShouldAnimate] = useState<boolean>(false);
   const ref = useRef<FormEvent<HTMLInputElement>>();
 
   useEffect(() => {
-    setCurrentTags((current) => (current === value ? current : value));
+    setCurrentTags(value ?? []);
   }, [value]);
 
   const styles = {

package/src/components/FormElements/CustomTags/CustomTagsField.tsx

@@ -6,9 +6,8 @@ import { CustomTags, CustomTagsProps } from './CustomTags';
 export const CustomTagsField: React.FC<
   Omit<CustomTagsProps, 'error' | 'onChange'>
 > = (props) => {
-  const { name } = props;
   const error = useFormikError(props.name);
-  const [field, , helpers] = useField(name);
+  const [field, , helpers] = useField(props.name);
 
   return (
     <CustomTags

package/src/components/FormElements/DateTimeField/DateTimeTextField.tsx

@@ -8,9 +8,9 @@ import { DateTimeText, DateTimeTextProps } from './DateTimeText';
  * @example
  * <Field name="title" label="Title" as={DateTimeTextField} />
  */
-export const DateTimeTextField: React.FC<Omit<DateTimeTextProps, 'error'>> = (
-  props,
-) => {
+export const DateTimeTextField: React.FC<
+  Omit<DateTimeTextProps, 'error' | 'onChange'>
+> = (props) => {
   const error = useFormikError(props.name);
   const [, meta, helpers] = useField(props.name);
 

package/src/components/FormElements/DynamicDataListControl/DynamicDataListField.tsx

@@ -24,9 +24,8 @@ export const DynamicDataListField = <T extends Data>(
     Omit<DynamicDataListControlProps<T>, 'error' | 'onChange'>
   >,
 ): JSX.Element => {
-  const { name } = props;
   const error = useFormikError(props.name);
-  const [field, , helpers] = useField(name);
+  const [field, , helpers] = useField(props.name);
 
   return (
     <DynamicDataListControl

package/src/components/FormElements/FileUploadControl/FileUploadControl.spec.tsx

@@ -203,6 +203,41 @@ describe('FileUploadControl', () => {
     );
   });
 
+  it('allows files with the same name to be uploaded multiple times', () => {
+    const spy = jest.fn();
+
+    const wrapper = mount(
+      <FileUploadControl name={'test-name'} onFileSelected={spy} />,
+    );
+
+    const fileInput = wrapper.find('input[type="file"]');
+
+    // Simulate first file upload
+    fileInput.simulate('change', { target: { files: mockFileList } });
+
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith({
+      file: mockFile,
+      uploadCompleted: expect.any(Function),
+      uploadProgress: expect.any(Function),
+      uploadStarted: expect.any(Function),
+    });
+
+    // Reset spy
+    spy.mockReset();
+
+    // Simulate second file upload with the same file
+    fileInput.simulate('change', { target: { files: mockFileList } });
+
+    expect(spy).toHaveBeenCalledTimes(1);
+    expect(spy).toHaveBeenCalledWith({
+      file: mockFile,
+      uploadCompleted: expect.any(Function),
+      uploadProgress: expect.any(Function),
+      uploadStarted: expect.any(Function),
+    });
+  });
+
   describe('MIME Types', () => {
     const mockTypes = 'image/jpeg,image/png';
     const mockFile = new File([new ArrayBuffer(1)], 'image.png', {

package/src/components/FormElements/FileUploadControl/FileUploadControl.tsx

@@ -169,6 +169,8 @@ export const FileUploadControl: React.FC<FileUploadProps> = ({
               onChange={(event) => {
                 const file = event.target.files?.item(0);
                 file && fileSelected(file);
+                // Reset the value of the input field to ensure onChange fires even with same file
+                event.target.value = '';
               }}
             />
           </>

package/src/components/FormElements/FileUploadControl/FileUploadField.tsx

@@ -6,9 +6,8 @@ import { FileUploadControl, FileUploadProps } from './FileUploadControl';
 export const FileUploadField: React.FC<
   Omit<FileUploadProps, 'onFileSelected' | 'error'>
 > = (props) => {
-  const { name } = props;
   const error = useFormikError(props.name);
-  const [field, , helpers] = useField(name);
+  const [field, , helpers] = useField(props.name);
 
   return (
     <FileUploadControl

package/src/components/FormElements/FormElementContainer/FormElementContainer.scss

@@ -18,6 +18,8 @@
     align-self: start;
     font-size: var(--label-font-size, $label-font-size);
     color: var(--input-color, $input-color);
+    max-width: 100%;
+    overflow: auto;
   }
 
   .label {

package/src/components/FormElements/MaskedSingleLineText/MaskedSingleLineTextField.tsx

@@ -17,7 +17,7 @@ import {
     placeholderChar={'0'}, />
  */
 export const MaskedSingleLineTextField: React.FC<
-  Omit<MaskedSingleLineTextProps, 'error'>
+  Omit<MaskedSingleLineTextProps, 'error' | 'onChange'>
 > = (props) => {
   const error = useFormikError(props.name);
 

package/src/components/FormElements/Radio/RadioField.tsx

@@ -9,9 +9,9 @@ export const RadioField: React.FC<
     transform?: (value: unknown) => unknown;
   }
 > = (props) => {
-  const { name, transform = (value: unknown) => value } = props;
+  const { transform = (value: unknown) => value } = props;
   const error = useFormikError(props.name);
-  const [field, , helpers] = useField(name);
+  const [field, , helpers] = useField(props.name);
 
   return (
     <Radio

package/src/components/FormElements/SingleLineText/SingleLineText.spec.tsx

@@ -24,18 +24,20 @@ describe('SingleLineText', () => {
     const spy = jest.fn();
     const mockValue = 'test-value';
     const mockValueUpdated = 'updated-test-value';
-    const wrapper = shallow(
+    const wrapper = mount(
       <SingleLineText name={'test-name'} value={mockValue} onChange={spy} />,
     );
 
     const input = wrapper.find('input');
 
-    expect(input.prop('value')).toEqual(mockValue);
+    expect(input.getDOMNode<HTMLInputElement>().value).toEqual(mockValue);
 
     input.simulate('change', { target: { value: mockValueUpdated } });
 
     expect(spy).toHaveBeenCalledTimes(1);
-    expect(spy).toHaveBeenCalledWith({ target: { value: mockValueUpdated } });
+    expect(spy).toHaveBeenCalledWith(
+      expect.objectContaining({ target: { value: mockValueUpdated } }),
+    );
   });
 
   it('uses optional props when passed in', () => {
@@ -48,7 +50,6 @@ describe('SingleLineText', () => {
       name: 'test-name',
       placeholder: 'test-placeholder',
       type: 'number',
-      value: '',
     } as Record<string, unknown>;
 
     const wrapper = shallow(