@firecms/core 3.0.0-canary.286 → 3.0.0-canary.288

package/src/form/EntityForm.tsx

@@ -19,8 +19,10 @@ import { ErrorBoundary, getFormFieldKeys } from "../components";
 import {
     getDefaultValuesFor,
     getEntityTitlePropertyKey,
+    getLocalChangesBackup,
     getValueInPath,
     isHidden,
+    isObject,
     isReadOnly,
     mergeDeep,
     resolveCollection,
@@ -38,15 +40,22 @@ import {
     useSnackbarController
 } from "../hooks";
 import { Alert, CheckIcon, Chip, cls, EditIcon, NotesIcon, paperMixin, Tooltip, Typography } from "@firecms/ui";
-import { flattenKeys, Formex, FormexController, getIn, setIn, useCreateFormex } from "@firecms/formex";
+import { Formex, FormexController, getIn, setIn, useCreateFormex } from "@firecms/formex";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 import { FormEntry, FormLayout, LabelWithIconAndTooltip, PropertyFieldBinding } from "../form";
 import { ValidationError } from "yup";
-import { removeEntityFromCache, saveEntityToCache } from "../util/entity_cache";
+import {
+    flattenKeys,
+    getEntityFromCache,
+    removeEntityFromCache,
+    removeEntityFromMemoryCache,
+    saveEntityToCache
+} from "../util/entity_cache";
 import { CustomIdField } from "./components/CustomIdField";
 import { ErrorFocus } from "./components/ErrorFocus";
 import { CustomFieldValidator, getYupEntitySchema } from "./validation";
 import { EntityFormActions, EntityFormActionsProps } from "./EntityFormActions";
+import { LocalChangesMenu } from "./components/LocalChangesMenu";
 
 export type OnUpdateParams = {
     entity: Entity<any>,
@@ -65,7 +74,7 @@ export type EntityFormProps<M extends Record<string, any>> = {
     entity?: Entity<M>;
     databaseId?: string;
     onIdChange?: (id: string) => void;
-    onValuesModified?: (modified: boolean) => void;
+    onValuesModified?: (modified: boolean, values: M) => void;
     onSaved?: (params: OnUpdateParams) => void;
     initialDirtyValues?: Partial<M>; // dirty cached entity in memory
     onFormContextReady?: (formContext: FormContext) => void;
@@ -113,6 +122,64 @@ export function extractTouchedValues(values: any, touched: Record<string, boolea
     return acc;
 }
 
+export function getChanges<T extends object>(source: Partial<T>, comparison: Partial<T>): Partial<T> {
+    const changes: Partial<T> = {};
+
+    if (!source) {
+        return {};
+    }
+    if (!comparison) {
+        return source;
+    }
+
+    const allKeys = Array.from(new Set([...Object.keys(source), ...Object.keys(comparison)]));
+
+    for (const key of allKeys) {
+        const sourceValue = (source as any)[key];
+        const comparisonValue = (comparison as any)[key];
+
+        if (equal(sourceValue, comparisonValue)) {
+            continue;
+        }
+
+        const sourceHasKey = source && typeof source === "object" && Object.prototype.hasOwnProperty.call(source, key);
+        const comparisonHasKey = comparison && typeof comparison === "object" && Object.prototype.hasOwnProperty.call(comparison, key);
+
+        if (comparisonHasKey && !sourceHasKey) {
+            (changes as any)[key] = undefined;
+        } else if (Array.isArray(sourceValue)) {
+            const comparisonArray = Array.isArray(comparisonValue) ? comparisonValue : [];
+            if (sourceValue.length < comparisonArray.length) {
+                (changes as any)[key] = sourceValue;
+                continue;
+            }
+            const changedArray = sourceValue.map((item, index) => {
+                const comparisonItem = comparisonArray[index];
+                if (equal(item, comparisonItem)) {
+                    return null;
+                }
+                if (isObject(item) && item && isObject(comparisonItem) && comparisonItem) {
+                    const nestedChanges = getChanges(item, comparisonItem);
+                    return Object.keys(nestedChanges).length > 0 ? nestedChanges : item;
+                }
+                return item;
+            });
+            if (changedArray.some(item => item !== null) || sourceValue.length > comparisonArray.length) {
+                (changes as any)[key] = changedArray;
+            }
+        } else if (isObject(sourceValue) && sourceValue && isObject(comparisonValue) && comparisonValue) {
+            const nestedChanges = getChanges(sourceValue, comparisonValue);
+            if (Object.keys(nestedChanges).length > 0) {
+                (changes as any)[key] = nestedChanges;
+            }
+        } else {
+            (changes as any)[key] = sourceValue;
+        }
+    }
+
+    return changes;
+}
+
 export function EntityForm<M extends Record<string, any>>({
                                                               path,
                                                               fullIdPath,
@@ -205,6 +272,18 @@ export function EntityForm<M extends Record<string, any>>({
 
     const autoSave = collection.formAutoSave && !collection.customId;
 
+    const baseInitialValues = useMemo(() => getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs), [authController, collection, path, status, entity, customizationController.propertyConfigs]);
+
+    const localChangesDataRaw = useMemo(() => entityId
+        ? getEntityFromCache(path + "/" + entityId)
+        : getEntityFromCache(path + "#new"), [entityId, path]);
+
+    const [localChangesCleared, setLocalChangesCleared] = useState<boolean>(false);
+
+    const localChangesBackup = getLocalChangesBackup(collection);
+    const autoApplyLocalChanges = localChangesBackup === "auto_apply";
+    const manualApplyLocalChanges = localChangesBackup === "manual_apply";
+
     const onSubmit = (values: EntityValues<M>, formexController: FormexController<EntityValues<M>>) => {
 
         if (mustSetCustomId && !entityId) {
@@ -242,9 +321,22 @@ export function EntityForm<M extends Record<string, any>>({
             });
     };
 
-    const baseInitialValues = getInitialEntityValues(authController, collection, path, status, entity, customizationController.propertyConfigs);
-    const initialValues = initialDirtyValues ? mergeDeep(baseInitialValues, initialDirtyValues) : baseInitialValues;
-    const initialDirty = Boolean(initialDirtyValues) && initialDirtyValues && Object.keys(initialDirtyValues).length > 0;
+    const [initialValues, initialDirty] = useMemo(() => {
+        const initialValuesWithLocalChanges: Partial<M> = autoApplyLocalChanges && localChangesDataRaw ? mergeDeep(baseInitialValues, localChangesDataRaw as Partial<M>) : baseInitialValues;
+        const initialValues = initialDirtyValues ? mergeDeep(initialValuesWithLocalChanges, initialDirtyValues) : initialValuesWithLocalChanges;
+        const initialDirty = Boolean(initialDirtyValues) && initialDirtyValues && Object.keys(initialDirtyValues).length > 0;
+        return [initialValues, initialDirty];
+    }, [autoApplyLocalChanges, localChangesDataRaw, baseInitialValues, initialDirtyValues]);
+
+    const localChangesData = useMemo(() => {
+        if (!localChangesDataRaw) {
+            return undefined;
+        }
+        return getChanges(localChangesDataRaw, initialValues);
+    }, [localChangesDataRaw, initialValues]);
+
+    const hasLocalChanges = !localChangesCleared && localChangesData && Object.keys(localChangesData).length > 0;
+
     const formex: FormexController<M> = formexProp ?? useCreateFormex<M>({
         initialValues: initialValues as M,
         initialDirty,
@@ -258,7 +350,7 @@ export function EntityForm<M extends Record<string, any>>({
         onSubmit,
         onReset: () => {
             clearDirtyCache();
-            onValuesModified?.(false);
+            onValuesModified?.(false, initialValues as M);
         },
         onValuesChangeDeferred: (values: M, controller: FormexController<M>) => {
             const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
@@ -328,8 +420,10 @@ export function EntityForm<M extends Record<string, any>>({
 
     function clearDirtyCache() {
         if (status === "new" || status === "copy") {
+            removeEntityFromMemoryCache(path + "#new");
             removeEntityFromCache(path + "#new");
         } else {
+            removeEntityFromMemoryCache(path + "/" + entityId);
             removeEntityFromCache(path + "/" + entityId);
         }
     }
@@ -337,7 +431,7 @@ export function EntityForm<M extends Record<string, any>>({
     const onSaveSuccess = (updatedEntity: Entity<M>) => {
 
         clearDirtyCache();
-        onValuesModified?.(false);
+        onValuesModified?.(false, updatedEntity.values);
         if (!autoSave)
             snackbarController.open({
                 type: "success",
@@ -537,7 +631,7 @@ export function EntityForm<M extends Record<string, any>>({
 
     useEffect(() => {
         if (!autoSave) {
-            onValuesModified?.(modified);
+            onValuesModified?.(modified, formex.values);
         }
     }, [formex.dirty]);
 
@@ -750,27 +844,39 @@ export function EntityForm<M extends Record<string, any>>({
                     className={cls("relative flex flex-row max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit")}>
 
                     <div className={cls("flex flex-col w-full pt-12 pb-16 px-4 sm:px-8 md:px-10")}>
-
-                        {formex.dirty
-                            ? <Tooltip title={"Local unsaved changes"}
-                                       className={"self-end sticky top-4 z-10"}>
-                                <Chip size={"small"} colorScheme={"orangeDarker"}>
-                                    <EditIcon size={"smallest"}/>
-                                </Chip>
-                            </Tooltip>
-                            : <Tooltip title={"In sync with the database"}
-                                       className={"self-end sticky top-4 z-10"}>
-                                <Chip size={"small"}>
-                                    <CheckIcon size={"smallest"}/>
-                                </Chip>
-                            </Tooltip>}
+                        <div
+                            className={"flex flex-row gap-4 self-end sticky top-4 z-10"}>
+
+                            {manualApplyLocalChanges && hasLocalChanges &&
+                                <LocalChangesMenu
+                                    cacheKey={status === "new" || status === "copy" ? path + "#new" : path + "/" + entityId}
+                                    properties={resolvedCollection.properties}
+                                    localChangesData={localChangesData as Partial<M>}
+                                    formex={formex}
+                                    onClearLocalChanges={() => setLocalChangesCleared(true)}
+                                />}
+
+                            {formex.dirty
+                                ? <Tooltip title={"There are local unsaved changes"}>
+                                    <Chip size={"small"} colorScheme={"orangeDarker"}>
+                                        <EditIcon size={"smallest"}/>
+                                    </Chip>
+                                </Tooltip>
+                                : <Tooltip title={"The current form is in sync with the database"}>
+                                    <Chip size={"small"}>
+                                        <CheckIcon size={"smallest"}/>
+                                    </Chip>
+                                </Tooltip>}
+                        </div>
 
                         {formView}
 
                     </div>
 
                 </div>
+
                 {dialogActions}
+
             </form>
 
         </Formex>
@@ -836,3 +942,4 @@ function useOnAutoSave(autoSave: undefined | boolean, formex: FormexController<a
         }
     }, [formex.values]);
 }
+

package/src/form/components/LocalChangesMenu.tsx

@@ -0,0 +1,140 @@
+import React, { useState } from "react";
+import {
+    Button,
+    CancelIcon,
+    CheckIcon,
+    defaultBorderMixin,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    KeyboardArrowDownIcon,
+    Menu,
+    MenuItem, VisibilityIcon,
+    WarningIcon
+} from "@firecms/ui";
+import { FormexController } from "@firecms/formex";
+import { useSnackbarController } from "../../hooks";
+import { mergeDeep } from "../../util";
+import { flattenKeys, removeEntityFromCache } from "../../util/entity_cache";
+import { ResolvedProperties } from "../../types";
+import { PropertyCollectionView } from "../../components/PropertyCollectionView";
+
+interface LocalChangesMenuProps<M extends object> {
+    cacheKey: string;
+    localChangesData: Partial<M>;
+    formex: FormexController<M>;
+    onClearLocalChanges?: () => void;
+    properties: ResolvedProperties<M>;
+}
+
+export function LocalChangesMenu<M extends object>({
+                                                       localChangesData,
+                                                       formex,
+                                                       onClearLocalChanges,
+                                                       cacheKey,
+                                                       properties
+                                                   }: LocalChangesMenuProps<M>) {
+
+    const snackbarController = useSnackbarController();
+    const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
+    const [open, setOpen] = useState(false);
+
+    const handleOpenMenu = () => setOpen(true);
+    const handleCloseMenu = () => setOpen(false);
+
+    const handlePreview = () => {
+        setPreviewDialogOpen(true);
+        handleCloseMenu();
+    };
+
+    const handleApply = () => {
+        const mergedValues = mergeDeep(formex.values, localChangesData);
+        const touched = { ...formex.touched };
+        const previewKeys = flattenKeys(localChangesData);
+        previewKeys.forEach((key) => {
+            touched[key] = true;
+        });
+
+        formex.setTouched(touched);
+        formex.setValues(mergedValues);
+        snackbarController.open({
+            type: "info",
+            message: "Local changes applied to the form"
+        });
+        handleCloseMenu();
+        onClearLocalChanges?.();
+    };
+
+    const handleDiscard = () => {
+        removeEntityFromCache(cacheKey);
+        snackbarController.open({
+            type: "info",
+            message: "Local changes discarded"
+        });
+        handleCloseMenu();
+        onClearLocalChanges?.();
+    };
+
+    return (
+        <>
+            <Menu
+                trigger={
+                    <Button
+                        size={"small"}
+                        className={
+                            "font-semibold text-xs rounded-full px-4 py-1 bg-yellow-200 dark:bg-yellow-900 hover:bg-yellow-300 dark:hover:bg-yellow-800 text-yellow-800 dark:text-yellow-200"
+                        }
+                        onClick={handleOpenMenu}
+                    >
+                        <WarningIcon size={"smallest"} className={"mr-1 text-yellow-600 dark:text-yellow-400"}/>
+                        Unsaved Local changes
+                        <KeyboardArrowDownIcon size={"smallest"}/>
+                    </Button>
+                }
+                open={open}
+                onOpenChange={setOpen}
+            >
+                <div className={"max-w-xs px-4 py-4 text-sm text-gray-700 dark:text-gray-300"}>
+                    This document was edited locally and has unsaved changes. These local changes will be lost if you
+                    don't apply them.
+                </div>
+                <MenuItem dense onClick={handlePreview}><VisibilityIcon size={"small"}/>Preview Changes</MenuItem>
+                <MenuItem dense onClick={handleApply}><CheckIcon size={"small"}/>Apply Changes</MenuItem>
+                <MenuItem dense onClick={handleDiscard}><CancelIcon size={"small"}/>Discard Local Changes</MenuItem>
+            </Menu>
+
+            <Dialog
+                open={previewDialogOpen}
+                onOpenChange={setPreviewDialogOpen}
+                maxWidth={"4xl"}
+            >
+                <DialogContent>
+                    <h3 className={"text-2xl mb-4"}>Preview Local Changes</h3>
+                    <p className={"mb-4"}>
+                        These are the local changes that will be applied to the form.
+                    </p>
+                    <div className={`border rounded-lg ${defaultBorderMixin}`} style={{
+                        maxHeight: 520,
+                        overflow: "auto"
+                    }}>
+                        <div className="p-4">
+                            <PropertyCollectionView data={localChangesData} properties={properties as ResolvedProperties}/>
+                        </div>
+                    </div>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setPreviewDialogOpen(false)}>Close</Button>
+                    <Button
+                        variant={"filled"}
+                        onClick={() => {
+                            handleApply();
+                            setPreviewDialogOpen(false);
+                        }}
+                    >
+                        Apply changes
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+}

package/src/preview/property_previews/NumberPropertyPreview.tsx

@@ -16,12 +16,12 @@ export function NumberPropertyPreview({
         const enumKey = value;
         const enumValues = enumToObjectEntries(property.enumValues);
         if (!enumValues)
-            return <>{value}</>;
+            return <span className={size === "small" ? "text-sm" : ""}>{value}</span>;
         return <EnumValuesChip
             enumKey={enumKey}
             enumValues={enumValues}
             size={size !== "medium" ? "small" : "medium"}/>;
     } else {
-        return <>{value}</>;
+        return <span className={size === "small" ? "text-sm" : ""}>{value}</span>;
     }
 }

package/src/types/collections.ts

@@ -354,12 +354,16 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
     history?: boolean;
 
     /**
-     * If set to true, local changes to entities in this collection will be backed up
-     * in the browser's local storage. This allows users to recover unsaved changes
-     * in case of accidental navigation or browser crashes.
-     * Defaults to `true`.
-     */
-    enableLocalChangesBackup?: boolean;
+     * Should local changes be backed up in local storage, to prevent data loss on
+     * accidental navigations.
+     * - `manual_apply`: When the user navigates back to an entity with local changes,
+     *   they will be prompted to restore the changes.
+     * - `auto_apply`: When the user navigates back to an entity with local changes,
+     *   the changes will be automatically applied.
+     * - `false`: Local changes will not be backed up.
+     * Defaults to `manual_apply`.
+     */
+    localChangesBackup?: "manual_apply" | "auto_apply" | false;
 }
 
 /**

package/src/util/collections.ts

@@ -70,3 +70,11 @@ export const applyPermissionsFunctionIfEmpty = (collections: EntityCollection[],
         });
     });
 }
+
+export function getLocalChangesBackup(collection: EntityCollection) {
+    if (!collection.localChangesBackup) {
+        return "manual_apply";
+    }
+
+    return collection.localChangesBackup;
+}

package/src/util/createFormexStub.tsx

@@ -4,6 +4,7 @@ export function createFormexStub<T extends object>(values: T): FormexController<
     const errorMessage = "You are in a read-only context. You cannot modify the formex controller.";
 
     return {
+        debugId: "",
         values,
         initialValues: values,
         touched: {} as Record<string, boolean>,
@@ -19,6 +20,9 @@ export function createFormexStub<T extends object>(values: T): FormexController<
         setValues: () => {
             throw new Error(errorMessage);
         },
+        setTouched(touched: Record<string, boolean>): void {
+            throw new Error(errorMessage);
+        },
         setFieldValue: () => {
             throw new Error(errorMessage);
         },

package/src/util/entity_cache.ts

@@ -1,4 +1,5 @@
 import { EntityReference, GeoPoint, Vector } from "../types";
+import { isObject, isPlainObject } from "./objects";
 
 // Define a unique prefix for entity keys in localStorage to avoid key collisions
 const LOCAL_STORAGE_PREFIX = "entity_cache::";
@@ -82,14 +83,15 @@ function customReviver(key: string, value: any): any {
  * @param data - The data to cache and persist.
  */
 export function saveEntityToCache(path: string, data: object): void {
-    // Update the in-memory cache
-    entityCache.set(path, data);
-
     // Persist the data individually in localStorage
     if (isLocalStorageAvailable) {
         try {
             const key = LOCAL_STORAGE_PREFIX + path;
             const entityString = JSON.stringify(data, customReplacer);
+            console.log("Saving entity to localStorage:", {
+                key,
+                entityString
+            });
             localStorage.setItem(key, entityString);
         } catch (error) {
             console.error(
@@ -100,6 +102,22 @@ export function saveEntityToCache(path: string, data: object): void {
     }
 }
 
+export function removeEntityFromMemoryCache(path: string): void {
+    entityCache.delete(path);
+}
+
+export function saveEntityToMemoryCache(path: string, data: object): void {
+    entityCache.set(path, data);
+}
+
+export function getEntityFromMemoryCache(path: string): object | undefined {
+    return entityCache.get(path);
+}
+
+export function hasEntityInCache(path: string): boolean {
+    return entityCache.has(path);
+}
+
 /**
  * Retrieves an entity from the in-memory cache or `localStorage`.
  * If the entity is not in the cache but exists in `localStorage`, it loads it into the cache.
@@ -107,21 +125,19 @@ export function saveEntityToCache(path: string, data: object): void {
  * @param useLocalStorage
  * @returns The cached entity or `undefined` if not found.
  */
-export function getEntityFromCache(path: string, useLocalStorage = true): object | undefined {
-
-    // Attempt to retrieve the entity from the in-memory cache
-    if (entityCache.has(path)) {
-        return entityCache.get(path);
-    }
+export function getEntityFromCache(path: string): object | undefined {
 
     // If not in the cache, attempt to load it from localStorage
-    if (isLocalStorageAvailable && useLocalStorage) {
+    if (isLocalStorageAvailable) {
         try {
             const key = LOCAL_STORAGE_PREFIX + path;
             const entityString = localStorage.getItem(key);
             if (entityString) {
                 const entity: object = JSON.parse(entityString, customReviver);
-                entityCache.set(path, entity); // Update the cache
+                console.log("Loaded entity from localStorage:", {
+                    key,
+                    entity
+                });
                 return entity;
             }
         } catch (error) {
@@ -136,22 +152,11 @@ export function getEntityFromCache(path: string, useLocalStorage = true): object
     return undefined;
 }
 
-export function hasEntityInCache(path: string): boolean {
-    return entityCache.has(path);
-}
-
 /**
  * Removes an entity from both the in-memory cache and `localStorage`.
  * @param path - The unique path/key for the entity to remove.
  */
 export function removeEntityFromCache(path: string): void {
-
-    console.debug("Removing entity from cache", path);
-
-    // Remove from the in-memory cache
-    entityCache.delete(path);
-
-    // Remove from localStorage
     if (isLocalStorageAvailable) {
         try {
             const key = LOCAL_STORAGE_PREFIX + path;
@@ -190,3 +195,29 @@ export function clearEntityCache(): void {
         }
     }
 }
+
+export function flattenKeys(obj: any, prefix = "", result: string[] = []): string[] {
+
+    if (isObject(obj) || Array.isArray(obj)) {
+        const plainObject = isPlainObject(obj);
+        if (!plainObject && prefix) {
+            result.push(prefix);
+        } else {
+            for (const key in obj) {
+                if (Object.prototype.hasOwnProperty.call(obj, key)) {
+                    const newKey = prefix
+                        ? Array.isArray(obj)
+                            ? `${prefix}[${key}]`
+                            : `${prefix}.${key}`
+                        : key;
+                    if (isObject(obj[key]) || Array.isArray(obj[key])) {
+                        flattenKeys(obj[key], newKey, result);
+                    } else {
+                        result.push(newKey);
+                    }
+                }
+            }
+        }
+    }
+    return result;
+}

package/src/util/objects.ts

@@ -12,6 +12,21 @@ export function isObject(item: any) {
     return item && typeof item === "object" && !Array.isArray(item);
 }
 
+
+export function isPlainObject(obj:any) {
+    // 1. Rule out non-objects, null, and arrays
+    if (typeof obj !== 'object' || obj === null || Array.isArray(obj)) {
+        return false;
+    }
+
+    // 2. Get the object's direct prototype
+    const proto = Object.getPrototypeOf(obj);
+
+    // 3. A plain object's direct prototype is Object.prototype
+    return proto === Object.prototype;
+}
+
+
 export function mergeDeep<T extends Record<any, any>, U extends Record<any, any>>(
     target: T,
     source: U,
@@ -47,8 +62,31 @@ export function mergeDeep<T extends Record<any, any>, U extends Record<any, any>
                 // If source value is a Date, create a new Date instance.
                 (output as any)[key] = new Date(sourceValue.getTime());
             } else if (Array.isArray(sourceValue)) {
-                // If source value is an array, create a shallow copy of the array.
-                (output as any)[key] = [...sourceValue];
+                if (Array.isArray(outputValue)) {
+                    const newArray = [];
+                    const maxLength = Math.max(outputValue.length, sourceValue.length);
+                    for (let i = 0; i < maxLength; i++) {
+                        const sourceItem = sourceValue[i];
+                        const targetItem = outputValue[i];
+
+                        if (i >= sourceValue.length) { // source is shorter
+                            newArray[i] = targetItem;
+                        } else if (i >= outputValue.length) { // target is shorter
+                            newArray[i] = sourceItem;
+                        } else if (sourceItem === null) {
+                            newArray[i] = targetItem;
+                        } else if (isObject(sourceItem) && isObject(targetItem)) {
+                            newArray[i] = mergeDeep(targetItem, sourceItem, ignoreUndefined);
+                        } else {
+                            newArray[i] = sourceItem;
+                        }
+                    }
+                    (output as any)[key] = newArray;
+                } else {
+                    // If output's value (from target) is not an array,
+                    // overwrite with a shallow copy of the source array.
+                    (output as any)[key] = [...sourceValue];
+                }
             } else if (isObject(sourceValue)) {
                 // If source value is an object:
                 if (isObject(outputValue)) {