@axinom/mosaic-ui 0.35.0 → 0.36.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-ui",
-  "version": "0.35.0",
+  "version": "0.36.0-rc.0",
   "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.8",
+    "@axinom/mosaic-core": "^0.4.9-rc.0",
     "@faker-js/faker": "^7.4.0",
     "@popperjs/core": "^2.9.2",
     "clsx": "^1.1.0",
@@ -104,5 +104,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cb1823de8e408b481091bfe0b0107815e8b49880"
+  "gitHead": "b232d67a1f8a7b0b696fb1e962cf353e09445af0"
 }

package/src/components/DynamicDataList/DynamicDataList.model.ts

@@ -25,12 +25,17 @@ export interface DynamicListColumn<T extends Data> {
    */
   dataEntryRender?: DynamicListDataEntryRenderer;
 
+  /**
+   * Set if data editing is allowed
+   * Setting fieldType to either 'input' or 'select' will generate an element appropriate to that type.
+   * If not set, will use the dataEntryRender value.
+   */
+  dataEditRender?: DynamicListDataEntryRenderer;
+
   /** Performs a transformation on the value before being added to the list */
   onAddTransformer?: (value: unknown, data: T) => unknown;
 }
 
-export type DynamicListElevationOptions = 'above' | 'below';
-
 export type DynamicListDataEntryRenderer = (
   /** Value to render. */
   currentValue: unknown,

package/src/components/DynamicDataList/DynamicDataList.spec.tsx

@@ -84,6 +84,7 @@ describe('DynamicDataList', () => {
   mockUseDataHandler.mockReturnValue({
     removeItem: jest.fn(),
     addItem: jest.fn(),
+    updateItem: jest.fn(),
     canAddItems: false,
     items: defaultData,
     nextPosition: 2,
@@ -302,6 +303,7 @@ describe('DynamicDataList', () => {
       mockUseDataHandler.mockReturnValue({
         removeItem: jest.fn(),
         addItem: jest.fn(),
+        updateItem: jest.fn(),
         canAddItems: true,
         items: defaultData,
         nextPosition: 2,
@@ -322,6 +324,7 @@ describe('DynamicDataList', () => {
       mockUseDataHandler.mockReturnValue({
         removeItem: jest.fn(),
         addItem: jest.fn(),
+        updateItem: jest.fn(),
         canAddItems: true,
         items: defaultData,
         nextPosition: mockLimit,
@@ -340,6 +343,7 @@ describe('DynamicDataList', () => {
       mockUseDataHandler.mockReturnValue({
         removeItem: jest.fn(),
         addItem: addItemSpy,
+        updateItem: jest.fn(),
         canAddItems: true,
         items: defaultData,
         nextPosition: 2,
@@ -369,6 +373,7 @@ describe('DynamicDataList', () => {
       mockUseDataHandler.mockReturnValue({
         removeItem: removeItemSpy,
         addItem: jest.fn(),
+        updateItem: jest.fn(),
         canAddItems: true,
         items: defaultData,
         nextPosition: 2,

package/src/components/DynamicDataList/DynamicDataList.stories.tsx

@@ -66,6 +66,7 @@ const groups = createGroups({
   Behavior: [
     'allowRowDragging',
     'allowNewData',
+    'allowEditing',
     'showHeader',
     'allowAddAndRemove',
     'allowReordering',
@@ -373,3 +374,39 @@ export const WithInlineMenu: StoryObj<StoryDDLType> = {
     ],
   },
 };
+
+export const Editable: StoryObj<StoryDDLType> = {
+  name: 'Editable',
+  args: {
+    ...defaultProps,
+    columns: [
+      {
+        propertyName: 'id',
+        label: 'Id',
+        size: '50px',
+        dataEntryRender: createInputRenderer({
+          placeholder: 'Enter Id',
+        }),
+      },
+      {
+        propertyName: 'title',
+        label: 'Title',
+        dataEntryRender: createInputRenderer({
+          placeholder: 'Enter Title',
+        }),
+      },
+      {
+        propertyName: 'desc',
+        label: 'Description',
+        dataEntryRender: createInputRenderer(),
+      },
+    ],
+    allowNewData: true,
+    allowEditing: true,
+    defaultValuesForNewData: { desc: 'Description' },
+    rowValidationSchema: Yup.object({
+      id: Yup.number().required(),
+      title: Yup.string().required().max(25).label('Title'),
+    }),
+  },
+};

package/src/components/DynamicDataList/DynamicDataList.tsx

@@ -16,6 +16,7 @@ import { DynamicListColumn } from './DynamicDataList.model';
 import classes from './DynamicDataList.scss';
 import {
   DynamicListDataEntry,
+  DynamicListDataEntryMode,
   DynamicListDataEntryProps,
 } from './DynamicListDataEntry/DynamicListDataEntry';
 import { DynamicListHeader } from './DynamicListHeader/DynamicListHeader';
@@ -24,6 +25,7 @@ import { uuid } from './helpers/generateId';
 import { useColumnDefs } from './helpers/useColumnDefs';
 import { useDataHandler } from './helpers/useDataHandler';
 import { useRowAnimation } from './helpers/useRowAnimation';
+import { useRowEditing } from './helpers/useRowEditing';
 
 export interface DynamicDataListProps<T extends Data> {
   /**
@@ -63,6 +65,8 @@ export interface DynamicDataListProps<T extends Data> {
   allowRowDragging?: boolean;
   /** Whether or not new data can be added (default: false) */
   allowNewData?: boolean;
+  /** Whether or not existing data can be edited (default: false) */
+  allowEditing?: boolean;
   /** Custom DynamicListDataEntry component which will be rendered instead of the default component */
   customDataEntry?: React.FC<DynamicListDataEntryProps<T>>;
   /** Optional Yup validation object for validating new data */
@@ -115,6 +119,7 @@ export const DynamicDataList = <T extends Data>({
   allowReordering = true,
   allowRowDragging = true,
   allowNewData = false,
+  allowEditing = false,
   customDataEntry: CustomDataEntry,
   maxItemLimit,
   rowValidationSchema,
@@ -137,7 +142,7 @@ export const DynamicDataList = <T extends Data>({
       !!inlineMenuActions,
     );
 
-  const { addItem, removeItem, canAddItems, items, nextPosition } =
+  const { addItem, removeItem, updateItem, canAddItems, items, nextPosition } =
     useDataHandler(
       value,
       positionPropertyName,
@@ -147,6 +152,11 @@ export const DynamicDataList = <T extends Data>({
       onAddTransformData,
     );
 
+  const { editingRow, isEditing, startEditing, finishEditing } = useRowEditing(
+    allowEditing,
+    updateItem,
+  );
+
   const customStyles = {
     gridRowGap: rowGap,
     minWidth: minimumWidth,
@@ -204,33 +214,54 @@ export const DynamicDataList = <T extends Data>({
     idx: number,
     provided?: DraggableProvided,
     isDragging = false,
-  ): JSX.Element => (
-    <AnimatedRow data={data} key={idx}>
-      <DynamicListRow<T>
+  ): JSX.Element =>
+    editingRow !== data ? (
+      <AnimatedRow data={data} key={idx}>
+        <DynamicListRow<T>
+          key={idx}
+          columns={columns}
+          data={data}
+          columnSizes={columnSizes}
+          columnGap={columnGap}
+          rowHeight={listRowHeight}
+          actionSize={listRowActionSize}
+          horizontalTextAlign={horizontalTextAlign}
+          verticalTextAlign={verticalTextAlign}
+          allowRemove={allowNewData}
+          positionKey={positionPropertyName}
+          allowDragging={allowRowDragging}
+          onActionClicked={removeItem}
+          onPositionInputChanged={onPositionInputChangedHandler}
+          inlineMenuActions={inlineMenuActions}
+          rowClassNameProvider={rowClassNameProvider}
+          disabled={disabled}
+          provided={provided}
+          dragging={isDragging}
+          showActionColumn={showActionColumn}
+          showPositionColumn={showPositionColumn}
+          allowEditing={allowEditing}
+          onRowClicked={startEditing}
+        />
+      </AnimatedRow>
+    ) : CustomDataEntry ? (
+      <CustomDataEntry
         key={idx}
-        columns={columns}
-        data={data}
-        columnSizes={columnSizes}
-        columnGap={columnGap}
-        rowHeight={listRowHeight}
-        actionSize={listRowActionSize}
-        horizontalTextAlign={horizontalTextAlign}
-        verticalTextAlign={verticalTextAlign}
-        allowRemove={allowNewData}
-        positionKey={positionPropertyName}
-        allowDragging={allowRowDragging}
-        onActionClicked={(data) => removeItem(data)}
-        onPositionInputChanged={onPositionInputChangedHandler}
-        inlineMenuActions={inlineMenuActions}
-        rowClassNameProvider={rowClassNameProvider}
-        disabled={disabled}
-        provided={provided}
-        dragging={isDragging}
-        showActionColumn={showActionColumn}
-        showPositionColumn={showPositionColumn}
+        {...DynamicListDataEntryProps}
+        defaultValuesForNewData={data}
+        newDataPosition={undefined}
+        onActionClicked={finishEditing}
+        mode={DynamicListDataEntryMode.Edit}
       />
-    </AnimatedRow>
-  );
+    ) : (
+      <DynamicListDataEntry<T>
+        key={idx}
+        {...DynamicListDataEntryProps}
+        defaultValuesForNewData={data}
+        newDataPosition={undefined}
+        onActionClicked={finishEditing}
+        mode={DynamicListDataEntryMode.Edit}
+      />
+    );
 
   const DynamicListDataEntryProps: DynamicListDataEntryProps<T> = {
     columns,
@@ -241,7 +272,6 @@ export const DynamicDataList = <T extends Data>({
     actionSize: listRowActionSize,
     horizontalTextAlign,
     verticalTextAlign,
-    allowAdd: allowNewData,
     allowReordering,
     allowDragging: allowRowDragging,
     newDataPosition: nextPosition,
@@ -287,7 +317,7 @@ export const DynamicDataList = <T extends Data>({
         ) : (
           <DynamicListDataEntry<T> {...DynamicListDataEntryProps} />
         ))}
-      {allowReordering ? (
+      {allowReordering && !isEditing ? (
         <DragDropContext onDragEnd={onDragEndHandler}>
           <Droppable droppableId={uuid()}>
             {(provided) => (

package/src/components/DynamicDataList/DynamicListDataEntry/DynamicListDataEntry.scss

@@ -2,7 +2,6 @@
 
 .container {
   width: 100%;
-  height: 100%;
 
   display: grid;
   grid-template-rows: 1fr;

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

@@ -45,7 +45,6 @@ const defaultProps: DynamicListDataEntryProps<TestData> = {
   verticalTextAlign: 'center',
   positionKey: 'position',
   allowReordering: false,
-  allowAdd: false,
 };
 
 const MockRenderer: DynamicListDataEntryRenderer = (
@@ -139,9 +138,7 @@ describe('DynamicListDataEntry', () => {
   });
 
   it(`Button component should have type of 'button'`, () => {
-    const wrapper = mount(
-      <DynamicListDataEntry {...defaultProps} allowAdd={true} />,
-    );
+    const wrapper = mount(<DynamicListDataEntry {...defaultProps} />);
 
     const button = wrapper.find(Button);
 
@@ -220,40 +217,9 @@ describe('DynamicListDataEntry', () => {
     expect(dragIcon.exists()).toBe(false);
   });
 
-  it(`doesn't display an action button by default`, () => {
-    const wrapper = shallow(
-      <DynamicListDataEntry
-        columns={defaultColumns}
-        columnSizes={defaultProps.columnSizes}
-      />,
-    );
-
-    const button = wrapper.find(Button);
-
-    expect(button.exists()).toBe(false);
-  });
-
-  it(`displays an action button if 'allowAdd' is set to true`, () => {
-    const wrapper = shallow(
-      <DynamicListDataEntry
-        columns={defaultColumns}
-        columnSizes={defaultProps.columnSizes}
-        allowAdd={true}
-      />,
-    );
-
-    const button = wrapper.find(Button);
-
-    expect(button.exists()).toBe(true);
-  });
-
   it(`renders "disabled" attribute for action button when set`, () => {
     const wrapper = mount(
-      <DynamicListDataEntry
-        {...defaultProps}
-        allowAdd={true}
-        disabled={true}
-      />,
+      <DynamicListDataEntry {...defaultProps} disabled={true} />,
     );
 
     const button = wrapper.find(Button);
@@ -307,7 +273,6 @@ describe('DynamicListDataEntry', () => {
       <DynamicListDataEntry
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
-        allowAdd={true}
         defaultValuesForNewData={defaultData}
         onActionClicked={spy}
       />,
@@ -332,7 +297,6 @@ describe('DynamicListDataEntry', () => {
       <DynamicListDataEntry
         columns={defaultColumns}
         columnSizes={defaultProps.columnSizes}
-        allowAdd={true}
         onActionClicked={spy}
         rowValidationSchema={Yup.object<ObjectSchemaDefinition<TestData>>({
           id: Yup.number().required(),
@@ -364,7 +328,6 @@ describe('DynamicListDataEntry', () => {
       <DynamicListDataEntry
         columns={columnWithRenderer}
         columnSizes={defaultProps.columnSizes}
-        allowAdd={true}
         onActionClicked={spy}
       />,
     );
@@ -401,7 +364,6 @@ describe('DynamicListDataEntry', () => {
       <DynamicListDataEntry
         columns={[...columnWithRenderer, { propertyName: mockPosKey }]}
         columnSizes={defaultProps.columnSizes}
-        allowAdd={true}
         onActionClicked={spy}
         positionKey={mockPosKey}
         allowReordering={true}
@@ -445,7 +407,6 @@ describe('DynamicListDataEntry', () => {
       <DynamicListDataEntry
         columns={[...columnWithRenderer, { propertyName: mockPosKey }]}
         columnSizes={defaultProps.columnSizes}
-        allowAdd={true}
         onActionClicked={spy}
         positionKey={mockPosKey}
         allowReordering={false}
@@ -486,7 +447,6 @@ describe('DynamicListDataEntry', () => {
       <DynamicListDataEntry
         columns={[...columnWithRenderer, { propertyName: mockPosKey }]}
         columnSizes={defaultProps.columnSizes}
-        allowAdd={true}
         onActionClicked={spy}
         positionKey={mockPosKey}
         allowReordering={true}
@@ -529,7 +489,6 @@ describe('DynamicListDataEntry', () => {
       <DynamicListDataEntry
         columns={[...columnWithRenderer, { propertyName: mockPosKey }]}
         columnSizes={defaultProps.columnSizes}
-        allowAdd={true}
         onActionClicked={spy}
         allowReordering={true}
         newDataPosition={mockNewPos}
@@ -578,7 +537,6 @@ describe('DynamicListDataEntry', () => {
       <DynamicListDataEntry
         columns={mockColumns}
         columnSizes={defaultProps.columnSizes}
-        allowAdd={true}
         onActionClicked={spy}
       />,
     );

package/src/components/DynamicDataList/DynamicListDataEntry/DynamicListDataEntry.tsx

@@ -15,7 +15,10 @@ import { IconName, Icons } from '../../Icons';
 import { DynamicListColumn } from '../DynamicDataList.model';
 import classes from './DynamicListDataEntry.scss';
 
-// TODO: Add sizing for DragIcon and Input container. Similar to ActionButton sizing
+export enum DynamicListDataEntryMode {
+  Add,
+  Edit,
+}
 
 export interface DynamicListDataEntryProps<T extends Data> {
   /** The column definition */
@@ -34,8 +37,6 @@ export interface DynamicListDataEntryProps<T extends Data> {
   verticalTextAlign?: 'start' | 'center' | 'end';
   /** Property name that is used to determine data position (default: undefined) */
   positionKey?: keyof T;
-  /** If set to true, the add action button will be rendered (default: undefined) */
-  allowAdd?: boolean;
   /** Whether add new item button should be disabled */
   disabled?: boolean;
   /** If set to true, rows can be be repositioned using the input field (default: undefined) */
@@ -58,6 +59,8 @@ export interface DynamicListDataEntryProps<T extends Data> {
   showHeader?: boolean;
   /** If set to true, the position column will be shown (default: false) */
   showPositionColumn?: boolean;
+  /** Determines if the component is in Add or Edit mode (default: Add) */
+  mode?: DynamicListDataEntryMode;
   /** Emits when the action button is clicked. Data is supplied as a parameter */
   onActionClicked?: (data: T) => void;
   /** override default add button (+) */
@@ -73,7 +76,6 @@ export const DynamicListDataEntry = <T extends Data>({
   horizontalTextAlign,
   verticalTextAlign,
   positionKey,
-  allowAdd,
   disabled = false,
   allowReordering,
   allowDragging,
@@ -85,6 +87,7 @@ export const DynamicListDataEntry = <T extends Data>({
   sticky = true,
   showHeader,
   showPositionColumn = false,
+  mode = DynamicListDataEntryMode.Add,
   onActionClicked = noop,
   customAddButton,
 }: PropsWithChildren<DynamicListDataEntryProps<T>>): JSX.Element => {
@@ -221,29 +224,31 @@ export const DynamicListDataEntry = <T extends Data>({
           )}
         </div>
       ))}
-      {allowAdd && (
-        <div className={clsx(classes.actionButtonContainer)}>
-          {(customAddButton && customAddButton(onAddItemHandler)) || (
-            <Button
-              type="button"
-              className={clsx(classes.actionButton)}
-              icon={IconName.Plus}
-              buttonContext={
-                actionButtonContext === undefined
-                  ? isDirty
-                    ? ButtonContext.Active
-                    : ButtonContext.Icon
-                  : actionButtonContext
-              }
-              height={actionSize}
-              width={actionSize}
-              onButtonClicked={() => onAddItemHandler()}
-              dataTestId="dynamic-list-add-button"
-              disabled={disabled}
-            />
-          )}
-        </div>
-      )}
+      <div className={clsx(classes.actionButtonContainer)}>
+        {(customAddButton && customAddButton(onAddItemHandler)) || (
+          <Button
+            type="button"
+            className={clsx(classes.actionButton)}
+            icon={
+              mode === DynamicListDataEntryMode.Add
+                ? IconName.Plus
+                : IconName.Checkmark
+            }
+            buttonContext={
+              actionButtonContext === undefined
+                ? isDirty
+                  ? ButtonContext.Active
+                  : ButtonContext.Icon
+                : actionButtonContext
+            }
+            height={actionSize}
+            width={actionSize}
+            onButtonClicked={onAddItemHandler}
+            dataTestId="dynamic-list-add-button"
+            disabled={disabled}
+          />
+        )}
+      </div>
     </div>
   );
 };
@@ -254,8 +259,11 @@ const renderField = function <T extends Data>(
   error: string | undefined,
   onValueChanged: (value: unknown) => void,
   disabled = false,
+  mode: DynamicListDataEntryMode = DynamicListDataEntryMode.Add,
 ): React.ReactNode {
-  if (column.dataEntryRender) {
+  if (mode === DynamicListDataEntryMode.Edit && column.dataEditRender) {
+    return column.dataEditRender(currentValue, error, onValueChanged, disabled);
+  } else if (column.dataEntryRender) {
     return column.dataEntryRender(
       currentValue,
       error,

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.scss

@@ -21,6 +21,18 @@
   justify-items: left;
   align-items: center;
 
+  .wrapper {
+    min-height: 50px;
+    min-width: 100%;
+    display: grid;
+    align-items: center;
+    border: 1px solid transparent;
+  }
+
+  &:hover .editable {
+    border: 1px solid var(--input-hover-color, $input-hover-color);
+  }
+
   .column {
     max-width: 100%;
     max-height: 100%;

package/src/components/DynamicDataList/DynamicListRow/DynamicListRow.tsx

@@ -11,8 +11,6 @@ import { InlineMenu } from '../../InlineMenu';
 import { DynamicListColumn } from '../DynamicDataList.model';
 import classes from './DynamicListRow.scss';
 
-// TODO: Add sizing for DragIcon and Input container. Similar to ActionButton sizing
-
 export interface DynamicListRowProps<T extends Data> {
   /** The column definition */
   columns: DynamicListColumn<T>[];
@@ -32,6 +30,8 @@ export interface DynamicListRowProps<T extends Data> {
   verticalTextAlign?: 'start' | 'center' | 'end';
   /** If set to true, the remove action button will be rendered (default: undefined) */
   allowRemove?: boolean;
+  /** If set to true, editable fields will be highlighted and row click events will be fired (default: false) */
+  allowEditing?: boolean;
   /** Property name that is used to determine data position (default: undefined) */
   positionKey?: keyof T;
   /** If set to true, this component can be dragged (default: undefined) */
@@ -49,6 +49,7 @@ export interface DynamicListRowProps<T extends Data> {
     currenPosition: number,
     newPosition: number,
   ) => void;
+  onRowClicked?: (data: T) => void;
   /** Emits when the action button is clicked. Data is supplied as a parameter */
   onActionClicked?: (data: T) => void;
   /** CSS Class name for additional styles */
@@ -75,6 +76,7 @@ export const DynamicListRow = <T extends Data>({
   disabled,
   provided,
   onPositionInputChanged = noop,
+  onRowClicked = noop,
   onActionClicked = noop,
   className = '',
   rowClassNameProvider,
@@ -82,6 +84,7 @@ export const DynamicListRow = <T extends Data>({
   dragging = false,
   showPositionColumn = false,
   showActionColumn = false,
+  allowEditing = false,
 }: PropsWithChildren<DynamicListRowProps<T>>): JSX.Element => {
   const customStyles = {
     gridAutoRows: `minmax(50px, ${rowHeight})`,
@@ -130,6 +133,7 @@ export const DynamicListRow = <T extends Data>({
       ref={provided?.innerRef}
       {...provided?.draggableProps}
       style={customStyles}
+      onClick={() => allowEditing && onRowClicked(data)}
     >
       {showPositionColumn && (
         <div className={classes.position}>
@@ -169,18 +173,25 @@ export const DynamicListRow = <T extends Data>({
 
         return (
           <div
+            className={clsx(classes.wrapper, {
+              [classes.editable]:
+                column.dataEntryRender !== undefined && allowEditing,
+            })}
             key={column.propertyName as string}
-            className={classes.column}
-            title={
-              column.tooltip !== false
-                ? getTooltipText(data[column.propertyName])
-                : undefined
-            }
-            data-test-id={`dynamic-list-property:${
-              column.propertyName as string
-            }`}
           >
-            {columnData}
+            <div
+              className={classes.column}
+              title={
+                column.tooltip !== false
+                  ? getTooltipText(data[column.propertyName])
+                  : undefined
+              }
+              data-test-id={`dynamic-list-property:${
+                column.propertyName as string
+              }`}
+            >
+              {columnData}
+            </div>
           </div>
         );
       })}

package/src/components/DynamicDataList/helpers/DynamicListReducer/DynamicListReducer.spec.ts

@@ -7,7 +7,10 @@ import {
 } from './DynamicListReducer.types';
 
 jest.mock('./DynamicListReducer.init');
-jest.mock('./DynamicListReducer.actions');
+jest.mock('./DynamicListReducer.actions', () => ({
+  addItem: jest.fn(),
+  removeItem: jest.fn().mockReturnValue([]),
+}));
 
 interface Data {
   position?: number;
@@ -69,6 +72,28 @@ describe('Dynamic List Reducer', () => {
     expect(DynamicListReducerInit).toHaveBeenCalledTimes(1);
   });
 
+  it('calls removeItem, addItem and DynamicListReducerInit when action is update', () => {
+    DynamicListReducer(initialState, {
+      type: DynamicListReducerActionType.Update,
+      currentItem: { position: 20, id: 20 },
+      newItem: { id: 10, position: 11 },
+    });
+
+    expect(removeItem).toHaveBeenCalledTimes(1);
+    expect(removeItem).toHaveBeenCalledWith(
+      { position: 20, id: 20 },
+      dataSet,
+      'position',
+    );
+    expect(addItem).toHaveBeenCalledTimes(1);
+    expect(addItem).toHaveBeenCalledWith(
+      { id: 10, position: 11 },
+      [],
+      'position',
+    );
+    expect(DynamicListReducerInit).toHaveBeenCalledTimes(1);
+  });
+
   it('calls DynamicListReducerInit with new items when action is reset', () => {
     DynamicListReducer(initialState, {
       type: DynamicListReducerActionType.Reset,

package/src/components/DynamicDataList/helpers/DynamicListReducer/DynamicListReducer.ts

@@ -22,6 +22,14 @@ export const DynamicListReducer = <T extends Data>(
     case DynamicListReducerActionType.Remove:
       newItems = removeItem(action.item, state.items, positionPropertyName);
       break;
+    case DynamicListReducerActionType.Update:
+      newItems = removeItem(
+        action.currentItem,
+        state.items,
+        positionPropertyName,
+      );
+      newItems = addItem(action.newItem, newItems, positionPropertyName);
+      break;
     case DynamicListReducerActionType.Reset:
       newItems = action.items;
       positionPropertyName = action.positionPropertyName;