@axinom/mosaic-ui 0.34.0-rc.9 → 0.34.1

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.9",
+  "version": "0.34.1",
   "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.9",
+    "@axinom/mosaic-core": "^0.4.7",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -102,5 +102,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "94ff309a76a395dfa2c13eed746c6603c15df0bd"
+  "gitHead": "26de70cf028138cec5bf4a5cccc73c61ce105e47"
 }

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/SelectionExplorer/SelectionExplorer.spec.tsx

@@ -1,4 +1,5 @@
 import { mount, shallow } from 'enzyme';
+import { noop } from 'lodash';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { actWithReturn } from '../../../helpers/testing';
@@ -165,4 +166,52 @@ describe('SelectionExplorer', () => {
       mode: 'SINGLE_ITEMS',
     });
   });
+
+  it('shows inline menu with link to details page when `generateItemLink` is set', () => {
+    const [provider] = getDataProvider();
+    const path = '/test';
+
+    const wrapper = shallow(
+      <SelectionExplorer
+        columns={mockListColumns}
+        dataProvider={provider}
+        stationKey="mock-key"
+        onSelection={noop}
+        generateItemLink={() => path}
+      />,
+    );
+
+    const actions =
+      wrapper.find(Explorer).prop('inlineMenuActions')?.({}) || [];
+    expect(actions[0].path).toBe(path);
+    expect(actions[0].openInNewTab).toBe(true);
+  });
+
+  it('adds details page inline menu action when `inlineMenuActions` and `generateItemLink` is defined', () => {
+    const [provider] = getDataProvider();
+    const path = '/test';
+    const inlineAction = {
+      label: 'Test Action',
+      onActionSelected: noop,
+    };
+
+    const wrapper = shallow(
+      <SelectionExplorer
+        columns={mockListColumns}
+        dataProvider={provider}
+        stationKey="mock-key"
+        onSelection={noop}
+        inlineMenuActions={() => [inlineAction]}
+        generateItemLink={() => path}
+      />,
+    );
+
+    const actions =
+      wrapper.find(Explorer).prop('inlineMenuActions')?.({}) || [];
+
+    expect(actions[0]).toBe(inlineAction);
+
+    expect(actions[1].path).toBe(path);
+    expect(actions[1].openInNewTab).toBe(true);
+  });
 });

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

@@ -1,15 +1,20 @@
 import { faker } from '@faker-js/faker';
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
+import { noop } from 'lodash';
 import React, { useMemo } from 'react';
+import { MemoryRouter } from 'react-router';
 import {
   createGroups,
   generateItemArray,
   randomDate,
 } from '../../../helpers/storybook';
 import { FilterType, FilterTypes } from '../../Filters/Filters.model';
-import { ExplorerDataProvider } from '../Explorer.model';
-import { ExplorerStoryData } from '../ExplorerStoryType';
+import { IconName } from '../../Icons';
+import {
+  ExplorerDataProvider,
+  ExplorerDataProviderConfiguration,
+} from '../Explorer.model';
 import {
   createInMemoryDataProvider,
   findAnywhereInStringCaseInsensitive,
@@ -77,7 +82,7 @@ export default meta;
 const generateData = (
   amount: number,
   { startIndex = 1, usePrefix = true } = {},
-): ExplorerStoryData[] =>
+): SelectExplorerStoryData[] =>
   generateItemArray(amount, (i) => {
     const index = i + startIndex;
     return {
@@ -92,6 +97,49 @@ const generateData = (
     };
   });
 
+const generateDataProvider =
+  (): ExplorerDataProvider<SelectExplorerStoryData> => {
+    const pageSize = 20;
+
+    const actualProvider = createInMemoryDataProvider<SelectExplorerStoryData>(
+      generateData(100, {
+        usePrefix: false,
+      }),
+      {
+        filterFunctions: {
+          title: findAnywhereInStringCaseInsensitive,
+          desc: findAnywhereInStringCaseInsensitive,
+        },
+      },
+    );
+    return {
+      loadData: async (
+        config: ExplorerDataProviderConfiguration<SelectExplorerStoryData>,
+      ) => {
+        // Report the call
+        action('loadData')(config);
+
+        const currentPage = (config.pagingInformation as number) ?? 0;
+
+        // Use the in memory provider to do the heavy lifting
+        const { totalCount, filteredCount, data } =
+          await actualProvider.loadData(config);
+
+        // Apply paging to the results
+        return {
+          totalCount: totalCount,
+          filteredCount: filteredCount,
+          data: data.slice(
+            pageSize * currentPage,
+            pageSize * (currentPage + 1),
+          ),
+          pagingInformation: currentPage + 1,
+          hasMoreData: currentPage < 9,
+        };
+      },
+    };
+  };
+
 const freeTextFilter: FilterType<SelectExplorerStoryData> = {
   label: 'Title',
   property: 'title',
@@ -114,8 +162,7 @@ const optionFilter: FilterType<SelectExplorerStoryData> = {
   ],
 };
 
-export const SelectExplorer: StoryObj<SelectionExplorerStoryType> = {
-  name: 'Selection Explorer',
+export const Default: StoryObj<SelectionExplorerStoryType> = {
   args: {
     title: 'Selection Explorer',
     columns: [
@@ -141,46 +188,7 @@ export const SelectExplorer: StoryObj<SelectionExplorerStoryType> = {
   render: (args) =>
     React.createElement(() => {
       const dataProvider: ExplorerDataProvider<SelectExplorerStoryData> =
-        useMemo(() => {
-          const pageSize = 20;
-
-          const actualProvider =
-            createInMemoryDataProvider<SelectExplorerStoryData>(
-              generateData(100, {
-                usePrefix: false,
-              }),
-              {
-                filterFunctions: {
-                  title: findAnywhereInStringCaseInsensitive,
-                  desc: findAnywhereInStringCaseInsensitive,
-                },
-              },
-            );
-          return {
-            loadData: async (config) => {
-              // Report the call
-              action('loadData')(config);
-
-              const currentPage = (config.pagingInformation as number) ?? 0;
-
-              // Use the in memory provider to do the heavy lifting
-              const { totalCount, filteredCount, data } =
-                await actualProvider.loadData(config);
-
-              // Apply paging to the results
-              return {
-                totalCount: totalCount,
-                filteredCount: filteredCount,
-                data: data.slice(
-                  pageSize * currentPage,
-                  pageSize * (currentPage + 1),
-                ),
-                pagingInformation: currentPage + 1,
-                hasMoreData: currentPage < 9,
-              };
-            },
-          };
-        }, []);
+        useMemo(generateDataProvider, []);
 
       return (
         <SelectionExplorer<SelectExplorerStoryData>
@@ -190,3 +198,61 @@ export const SelectExplorer: StoryObj<SelectionExplorerStoryType> = {
       );
     }),
 };
+
+export const WithOpenDetailsInlineAction: StoryObj<SelectionExplorerStoryType> =
+  {
+    args: {
+      ...Default.args,
+      stationKey: 'SelectionStoryBookExplorer_WithOpenDetailsInlineAction',
+      generateItemLink: () => `#`,
+    },
+    render: (args) =>
+      React.createElement(() => {
+        const dataProvider: ExplorerDataProvider<SelectExplorerStoryData> =
+          useMemo(generateDataProvider, []);
+
+        return (
+          <MemoryRouter>
+            <SelectionExplorer<SelectExplorerStoryData>
+              {...args}
+              dataProvider={dataProvider}
+            />
+          </MemoryRouter>
+        );
+      }),
+  };
+
+export const WithInlineActions: StoryObj<SelectionExplorerStoryType> = {
+  args: {
+    ...Default.args,
+    stationKey: 'SelectionStoryBookExplorer_WithInlineActions',
+    inlineMenuActions: () => {
+      return [
+        {
+          label: 'Navigation Action',
+          icon: IconName.NavigateRight,
+          path: '#',
+        },
+        {
+          label: 'Context Action',
+          icon: IconName.Ellipsis,
+          onActionSelected: noop,
+        },
+      ];
+    },
+  },
+  render: (args) =>
+    React.createElement(() => {
+      const dataProvider: ExplorerDataProvider<SelectExplorerStoryData> =
+        useMemo(generateDataProvider, []);
+
+      return (
+        <MemoryRouter>
+          <SelectionExplorer<SelectExplorerStoryData>
+            {...args}
+            dataProvider={dataProvider}
+          />
+        </MemoryRouter>
+      );
+    }),
+};

package/src/components/Explorer/SelectionExplorer/SelectionExplorer.tsx

@@ -1,6 +1,8 @@
+import { LocationDescriptor } from 'history';
 import React, { ForwardedRef } from 'react';
 import { noop } from '../../../helpers/utils';
 import { Data } from '../../../types/data';
+import { ActionData } from '../../Actions/Actions.models';
 import { IconName } from '../../Icons';
 import { ListSelectMode } from '../../List';
 import { Explorer, ExplorerProps } from '../Explorer';
@@ -23,6 +25,9 @@ export interface SelectionExplorerProps<T extends Data>
    * The selected item (or items) will be passed as argument to the callback.
    */
   onSelection?: (selection: ItemSelection<T>) => void;
+
+  /** When set, this function is used to generate inline menu link that navigates user to details page for each item. */
+  generateItemLink?: (data: T) => LocationDescriptor<unknown>;
 }
 
 /**
@@ -38,14 +43,14 @@ export interface SelectionExplorerProps<T extends Data>
 export const SelectionExplorer = React.forwardRef(function SelectionExplorer<
   T extends Data,
 >(
-  props: SelectionExplorerProps<T>,
+  { generateItemLink, inlineMenuActions, ...rest }: SelectionExplorerProps<T>,
   ref: ForwardedRef<ExplorerDataProviderConnection<T>>,
 ): JSX.Element {
   const {
     allowBulkSelect = false,
     onSelection = noop,
     modalMode = true,
-  } = props;
+  } = rest;
 
   const onItemClickedHandler = (item: T, mode?: ListSelectMode): void => {
     // only if the list is not in Multi mode is this executed
@@ -54,10 +59,25 @@ export const SelectionExplorer = React.forwardRef(function SelectionExplorer<
     }
   };
 
+  let selectionExplorerActions = inlineMenuActions;
+
+  if (generateItemLink) {
+    selectionExplorerActions = (data: T): ActionData[] => {
+      return [
+        ...(inlineMenuActions?.(data) ?? []),
+        {
+          label: 'Open Details',
+          path: generateItemLink(data),
+          openInNewTab: true,
+        },
+      ];
+    };
+  }
+
   return (
     <Explorer<T>
+      {...rest}
       ref={ref}
-      {...props}
       modalMode={modalMode}
       bulkActions={[
         ...(allowBulkSelect
@@ -75,6 +95,7 @@ export const SelectionExplorer = React.forwardRef(function SelectionExplorer<
       ]}
       selectionMode={ListSelectMode.Single}
       onItemClicked={onItemClickedHandler}
+      inlineMenuActions={selectionExplorerActions}
     />
   );
 });

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/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

@@ -19,7 +19,6 @@
     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);