@rjsf/utils 6.0.0-alpha.0 → 6.0.0-beta.10

package/src/getInputProps.ts

@@ -12,12 +12,12 @@ import { FormContextType, InputPropsType, RJSFSchema, StrictRJSFSchema, UIOption
 export default function getInputProps<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(
   schema: RJSFSchema,
   defaultType?: string,
   options: UIOptionsType<T, S, F> = {},
-  autoDefaultStepAny = true
+  autoDefaultStepAny = true,
 ): InputPropsType {
   const inputProps: InputPropsType = {
     type: defaultType || 'text',
@@ -51,5 +51,9 @@ export default function getInputProps<
     inputProps.autoComplete = options.autocomplete;
   }
 
+  if (options.accept) {
+    inputProps.accept = options.accept as string;
+  }
+
   return inputProps;
 }

package/src/getOptionMatchingSimpleDiscriminator.ts

@@ -15,7 +15,7 @@ import { RJSFSchema, StrictRJSFSchema } from './types';
 export default function getOptionMatchingSimpleDiscriminator<T = any, S extends StrictRJSFSchema = RJSFSchema>(
   formData: T | undefined,
   options: S[],
-  discriminatorField?: string
+  discriminatorField?: string,
 ): number | undefined {
   if (formData && discriminatorField) {
     const value = get(formData, discriminatorField);
@@ -26,7 +26,7 @@ export default function getOptionMatchingSimpleDiscriminator<T = any, S extends
 
     for (let i = 0; i < options.length; i++) {
       const option = options[i];
-      const discriminator = get(option, [PROPERTIES_KEY, discriminatorField], {});
+      const discriminator: S = get(option, [PROPERTIES_KEY, discriminatorField], {}) as S;
 
       if (discriminator.type === 'object' || discriminator.type === 'array') {
         continue;

package/src/getSchemaType.ts

@@ -7,13 +7,14 @@ import { RJSFSchema, StrictRJSFSchema } from './types';
  * - schema.enum: Returns `string`
  * - schema.properties: Returns `object`
  * - schema.additionalProperties: Returns `object`
+ * - schema.patternProperties: Returns `object`
  * - type is an array with a length of 2 and one type is 'null': Returns the other type
  *
  * @param schema - The schema for which to get the type
  * @returns - The type of the schema
  */
 export default function getSchemaType<S extends StrictRJSFSchema = RJSFSchema>(
-  schema: S
+  schema: S,
 ): string | string[] | undefined {
   let { type } = schema;
 
@@ -25,7 +26,7 @@ export default function getSchemaType<S extends StrictRJSFSchema = RJSFSchema>(
     return 'string';
   }
 
-  if (!type && (schema.properties || schema.additionalProperties)) {
+  if (!type && (schema.properties || schema.additionalProperties || schema.patternProperties)) {
     return 'object';
   }
 

package/src/getSubmitButtonOptions.ts

@@ -20,7 +20,7 @@ export const DEFAULT_OPTIONS: UISchemaSubmitButtonOptions = {
 export default function getSubmitButtonOptions<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(uiSchema: UiSchema<T, S, F> = {}): UISchemaSubmitButtonOptions {
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
   if (uiOptions && uiOptions[SUBMIT_BTN_OPTIONS_KEY]) {

package/src/getTemplate.ts

@@ -12,12 +12,23 @@ export default function getTemplate<
   Name extends keyof TemplatesType<T, S, F>,
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(name: Name, registry: Registry<T, S, F>, uiOptions: UIOptionsType<T, S, F> = {}): TemplatesType<T, S, F>[Name] {
   const { templates } = registry;
   if (name === 'ButtonTemplates') {
     return templates[name];
   }
+  // Allow templates to be customized per-field by using string keys from the registry
+  if (
+    Object.hasOwn(uiOptions, name) &&
+    typeof uiOptions[name] === 'string' &&
+    Object.hasOwn(templates, uiOptions[name] as string)
+  ) {
+    const key = uiOptions[name];
+    // Evaluating templates[key] results in TS2590: Expression produces a union type that is too complex to represent
+    // To avoid that, we cast templates to `any` before accessing the key field
+    return (templates as any)[key];
+  }
   return (
     // Evaluating uiOptions[name] results in TS2590: Expression produces a union type that is too complex to represent
     // To avoid that, we cast uiOptions to `any` before accessing the name field

package/src/getTestIds.ts

@@ -0,0 +1,40 @@
+import { nanoid } from 'nanoid';
+import get from 'lodash/get';
+
+import { TestIdShape } from './types';
+
+/** Returns an object of test IDs that can only be used in test mode. If the function is called in a test environment
+ * (`NODE_ENV === 'test'`, this is set by jest) then a Proxy object will be returned. If a key within the returned
+ * object is accessed, if the value already exists the object will return that value, otherwise it will create that key
+ * with a generated `uuid` value and return the generated ID. If it is called outside of a test environment, the
+ * function will return an empty object, therefore returning `undefined` for any property within the object and
+ * excluding the prop from the rendered output of the component in which it is used.
+ * This implementation was adapted from the following blog post: https://www.matthewsessions.com/blog/react-test-id/
+ * To use this helper, you will want to generate a separate object for each component to avoid potential overlapping of
+ * ID names. You will also want to export the object for use in tests, because the keys will be generated in the
+ * component file, and used in the test file. Within the component file, add:
+ * `export const TEST_IDS = getTestIds();`
+ * Then pass `TEST_IDS.examplePropertyName` as the value of the test ID attribute of the intended component. This will
+ * allow you to use `TEST_IDS.examplePropertyName` within your tests, while keeping the test IDs out of your rendered
+ * output.
+ */
+export default function getTestIds(): TestIdShape {
+  // For some reason, even though process.env contains the value of `test` for NODE_ENV, accessing it directly returns
+  // 'development'. Using `get()` does, in fact, return test so sticking with it
+  if (typeof process === 'undefined' || get(process, 'env.NODE_ENV') !== 'test') {
+    return {};
+  }
+
+  const ids = new Map();
+  return new Proxy(
+    {},
+    {
+      get(_obj, prop) {
+        if (!ids.has(prop)) {
+          ids.set(prop, nanoid());
+        }
+        return ids.get(prop);
+      },
+    },
+  );
+}

package/src/getUiOptions.ts

@@ -11,7 +11,7 @@ import { FormContextType, GlobalUISchemaOptions, RJSFSchema, StrictRJSFSchema, U
  */
 export default function getUiOptions<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   uiSchema: UiSchema<T, S, F> = {},
-  globalOptions: GlobalUISchemaOptions = {}
+  globalOptions: GlobalUISchemaOptions = {},
 ): UIOptionsType<T, S, F> {
   return Object.keys(uiSchema)
     .filter((key) => key.indexOf('ui:') === 0)
@@ -27,6 +27,6 @@ export default function getUiOptions<T = any, S extends StrictRJSFSchema = RJSFS
         }
         return { ...options, [key.substring(3)]: value };
       },
-      { ...globalOptions }
+      { ...globalOptions },
     );
 }

package/src/getWidget.tsx

@@ -69,7 +69,7 @@ const widgetMap: { [k: string]: { [j: string]: string } } = {
  * @returns - The wrapper widget
  */
 function mergeWidgetOptions<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
-  AWidget: Widget<T, S, F>
+  AWidget: Widget<T, S, F>,
 ) {
   let MergedWidget: Widget<T, S, F> | undefined = get(AWidget, 'MergedWidget');
   // cache return value as property of widget for proper react reconciliation
@@ -97,7 +97,7 @@ function mergeWidgetOptions<T = any, S extends StrictRJSFSchema = RJSFSchema, F
 export default function getWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   schema: RJSFSchema,
   widget?: Widget<T, S, F> | string,
-  registeredWidgets: RegistryWidgetsType<T, S, F> = {}
+  registeredWidgets: RegistryWidgetsType<T, S, F> = {},
 ): Widget<T, S, F> {
   const type = getSchemaType(schema);
 

package/src/hasWidget.ts

@@ -12,7 +12,7 @@ import { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema, Wid
 export default function hasWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   schema: RJSFSchema,
   widget: Widget<T, S, F> | string,
-  registeredWidgets: RegistryWidgetsType<T, S, F> = {}
+  registeredWidgets: RegistryWidgetsType<T, S, F> = {},
 ) {
   try {
     getWidget(schema, widget, registeredWidgets);

package/src/hashForSchema.ts

@@ -1,13 +1,14 @@
 import { RJSFSchema, StrictRJSFSchema } from './types';
 
-/** JS has no built-in hashing function, so rolling our own
+/** Hashes a string using the algorithm based on Java's hashing function.
+ * JS has no built-in hashing function, so rolling our own
  *  based on Java's hashing fn:
  *  http://www.java2s.com/example/nodejs-utility-method/string-hash/hashcode-4dc2b.html
  *
  * @param string - The string for which to get the hash
  * @returns - The resulting hash of the string in hex format
  */
-function hashString(string: string): string {
+export function hashString(string: string): string {
   let hash = 0;
   for (let i = 0; i < string.length; i += 1) {
     const chr = string.charCodeAt(i);
@@ -17,6 +18,28 @@ function hashString(string: string): string {
   return hash.toString(16);
 }
 
+/** Stringifies an `object`, sorts object fields in consistent order before stringifying it.
+ *
+ * @param object - The object for which the sorted stringify is desired
+ * @returns - The stringified object with keys sorted in a consistent order
+ */
+export function sortedJSONStringify(object: unknown): string {
+  const allKeys = new Set<string>();
+  // solution source: https://stackoverflow.com/questions/16167581/sort-object-properties-and-json-stringify/53593328#53593328
+  JSON.stringify(object, (key, value) => (allKeys.add(key), value));
+  return JSON.stringify(object, Array.from(allKeys).sort());
+}
+
+/** Stringifies an `object` and returns the hash of the resulting string. Sorts object fields
+ * in consistent order before stringify to prevent different hash ids for the same object.
+ *
+ * @param object - The object for which the hash is desired
+ * @returns - The string obtained from the hash of the stringified object
+ */
+export function hashObject(object: unknown): string {
+  return hashString(sortedJSONStringify(object));
+}
+
 /** Stringifies the schema and returns the hash of the resulting string. Sorts schema fields
  * in consistent order before stringify to prevent different hash ids for the same schema.
  *
@@ -24,8 +47,5 @@ function hashString(string: string): string {
  * @returns - The string obtained from the hash of the stringified schema
  */
 export default function hashForSchema<S extends StrictRJSFSchema = RJSFSchema>(schema: S) {
-  const allKeys = new Set<string>();
-  // solution source: https://stackoverflow.com/questions/16167581/sort-object-properties-and-json-stringify/53593328#53593328
-  JSON.stringify(schema, (key, value) => (allKeys.add(key), value));
-  return hashString(JSON.stringify(schema, Array.from(allKeys).sort()));
+  return hashObject(schema);
 }

package/src/idGenerators.ts

@@ -79,3 +79,13 @@ export function ariaDescribedByIds<T = any>(id: IdSchema<T> | string, includeExa
 export function optionId(id: string, optionIndex: number) {
   return `${id}-${optionIndex}`;
 }
+
+/** Return a consistent `id` for the `btn` button element
+ *
+ * @param id - Either simple string id or an IdSchema from which to extract it
+ * @param btn - The button type for which to generate the id
+ * @returns - The consistent id for the button from the given `id` and `btn` type
+ */
+export function buttonId<T = any>(id: IdSchema<T> | string, btn: 'add' | 'copy' | 'moveDown' | 'moveUp' | 'remove') {
+  return idGenerator<T>(id, btn);
+}

package/src/index.ts

@@ -20,18 +20,29 @@ import getInputProps from './getInputProps';
 import getSchemaType from './getSchemaType';
 import getSubmitButtonOptions from './getSubmitButtonOptions';
 import getTemplate from './getTemplate';
+import getTestIds from './getTestIds';
 import getUiOptions from './getUiOptions';
 import getWidget from './getWidget';
 import guessType from './guessType';
-import hashForSchema from './hashForSchema';
+import hashForSchema, { hashObject, hashString, sortedJSONStringify } from './hashForSchema';
 import hasWidget from './hasWidget';
-import { ariaDescribedByIds, descriptionId, errorId, examplesId, helpId, optionId, titleId } from './idGenerators';
+import {
+  ariaDescribedByIds,
+  buttonId,
+  descriptionId,
+  errorId,
+  examplesId,
+  helpId,
+  optionId,
+  titleId,
+} from './idGenerators';
 import isConstant from './isConstant';
 import isCustomWidget from './isCustomWidget';
 import isFixedItems from './isFixedItems';
 import isObject from './isObject';
 import labelValue from './labelValue';
 import localToUTC from './localToUTC';
+import lookupFromFormContext from './lookupFromFormContext';
 import mergeDefaultsWithFormData from './mergeDefaultsWithFormData';
 import mergeObjects from './mergeObjects';
 import mergeSchemas from './mergeSchemas';
@@ -52,6 +63,7 @@ import utcToLocal from './utcToLocal';
 import validationDataMerge from './validationDataMerge';
 import withIdRefPrefix from './withIdRefPrefix';
 import getOptionMatchingSimpleDiscriminator from './getOptionMatchingSimpleDiscriminator';
+import getChangedFields from './getChangedFields';
 
 export * from './types';
 export * from './enums';
@@ -64,6 +76,7 @@ export {
   allowAdditionalItems,
   ariaDescribedByIds,
   asNumber,
+  buttonId,
   canExpand,
   createErrorHandler,
   createSchemaUtils,
@@ -82,6 +95,7 @@ export {
   examplesId,
   ErrorSchemaBuilder,
   findSchemaDefinition,
+  getChangedFields,
   getDateElementProps,
   getDiscriminatorFieldFromSchema,
   getInputProps,
@@ -89,11 +103,14 @@ export {
   getSchemaType,
   getSubmitButtonOptions,
   getTemplate,
+  getTestIds,
   getUiOptions,
   getWidget,
   guessType,
   hasWidget,
   hashForSchema,
+  hashObject,
+  hashString,
   helpId,
   isConstant,
   isCustomWidget,
@@ -101,6 +118,7 @@ export {
   isObject,
   labelValue,
   localToUTC,
+  lookupFromFormContext,
   mergeDefaultsWithFormData,
   mergeObjects,
   mergeSchemas,
@@ -113,6 +131,7 @@ export {
   replaceStringParameters,
   schemaRequiresTrueValue,
   shouldRender,
+  sortedJSONStringify,
   titleId,
   toConstant,
   toDateString,

package/src/isCustomWidget.ts

@@ -9,7 +9,7 @@ import { FormContextType, RJSFSchema, StrictRJSFSchema, UiSchema } from './types
 export default function isCustomWidget<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any
+  F extends FormContextType = any,
 >(uiSchema: UiSchema<T, S, F> = {}) {
   return (
     // TODO: Remove the `&& uiSchema['ui:widget'] !== 'hidden'` once we support hidden widgets for arrays.

package/src/isObject.ts

@@ -1,15 +1,22 @@
-/** Determines whether a `thing` is an object for the purposes of RSJF. In this case, `thing` is an object if it has
+/** Determines whether a `thing` is an object for the purposes of RJSF. In this case, `thing` is an object if it has
  * the type `object` but is NOT null, an array or a File.
  *
  * @param thing - The thing to check to see whether it is an object
  * @returns - True if it is a non-null, non-array, non-File object
  */
-export default function isObject(thing: any) {
-  if (typeof File !== 'undefined' && thing instanceof File) {
+export default function isObject(thing: any): thing is object {
+  if (typeof thing !== 'object' || thing === null) {
     return false;
   }
-  if (typeof Date !== 'undefined' && thing instanceof Date) {
+  // lastModified is guaranteed to be a number on a File instance
+  // as per https://w3c.github.io/FileAPI/#dfn-lastModified
+  if (typeof thing.lastModified === 'number' && typeof File !== 'undefined' && thing instanceof File) {
     return false;
   }
-  return typeof thing === 'object' && thing !== null && !Array.isArray(thing);
+  // getMonth is guaranteed to be a method on a Date instance
+  // as per https://tc39.es/ecma262/multipage/numbers-and-dates.html#sec-date.prototype.getmonth
+  if (typeof thing.getMonth === 'function' && typeof Date !== 'undefined' && thing instanceof Date) {
+    return false;
+  }
+  return !Array.isArray(thing);
 }

package/src/labelValue.ts

@@ -17,12 +17,12 @@ export default function labelValue(label?: ReactElement, hideLabel?: boolean, fa
 export default function labelValue(
   label?: ReactElement,
   hideLabel?: boolean,
-  fallback?: false
+  fallback?: false,
 ): undefined | false | ReactElement;
 export default function labelValue(
   label?: string | ReactElement,
   hideLabel?: boolean,
-  fallback?: false | ''
+  fallback?: false | '',
 ): undefined | false | string | ReactElement {
   return hideLabel ? fallback : label;
 }

package/src/lookupFromFormContext.ts

@@ -0,0 +1,26 @@
+import get from 'lodash/get';
+import has from 'lodash/has';
+
+import { FORM_CONTEXT_NAME, LOOKUP_MAP_NAME } from './constants';
+import { FormContextType, RJSFSchema, Registry, StrictRJSFSchema } from './types';
+
+/** Given a React JSON Schema Form registry or formContext object, return the value associated with `toLookup`. This
+ * might be contained within the lookup map in the formContext. If no such value exists, return the `fallback`
+ * value.
+ *
+ * @param regOrFc - The @rjsf registry or form context in which the lookup will occur
+ * @param toLookup - The name of the field in the lookup map in the form context to get the value for
+ * @param [fallback] - The fallback value to use if the form context does not contain a value for `toLookup`
+ * @returns - The value associated with `toLookup` in the form context or `fallback`
+ */
+export default function lookupFromFormContext<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(regOrFc: Registry<T, S, F> | Registry<T, S, F>['formContext'], toLookup: string, fallback?: unknown) {
+  const lookupPath = [LOOKUP_MAP_NAME];
+  if (has(regOrFc, FORM_CONTEXT_NAME)) {
+    lookupPath.unshift(FORM_CONTEXT_NAME);
+  }
+  return get(regOrFc, [...lookupPath, toLookup], fallback);
+}

package/src/mergeDefaultsWithFormData.ts

@@ -2,6 +2,7 @@ import get from 'lodash/get';
 
 import isObject from './isObject';
 import { GenericObjectType } from '../src';
+import isNil from 'lodash/isNil';
 
 /** Merges the `defaults` object of type `T` into the `formData` of type `T`
  *
@@ -12,42 +13,86 @@ import { GenericObjectType } from '../src';
  *     are deeply merged; additional entries from the defaults are ignored unless `mergeExtraArrayDefaults` is true, in
  *     which case the extras are appended onto the end of the form data
  *   - when the array is not set in form data, the default is copied over
- * - scalars are overwritten/set by form data
+ * - scalars are overwritten/set by form data unless undefined and there is a default AND `defaultSupercedesUndefined`
+ *   is true
  *
  * @param [defaults] - The defaults to merge
  * @param [formData] - The form data into which the defaults will be merged
  * @param [mergeExtraArrayDefaults=false] - If true, any additional default array entries are appended onto the formData
+ * @param [defaultSupercedesUndefined=false] - If true, an explicit undefined value will be overwritten by the default value
+ * @param [overrideFormDataWithDefaults=false] - If true, the default value will overwrite the form data value. If the value
+ *        doesn't exist in the default, we take it from formData and in the case where the value is set to undefined in formData.
+ *       This is useful when we have already merged formData with defaults and want to add an additional field from formData
+ *       that does not exist in defaults.
  * @returns - The resulting merged form data with defaults
  */
 export default function mergeDefaultsWithFormData<T = any>(
   defaults?: T,
   formData?: T,
-  mergeExtraArrayDefaults = false
+  mergeExtraArrayDefaults = false,
+  defaultSupercedesUndefined = false,
+  overrideFormDataWithDefaults = false,
 ): T | undefined {
   if (Array.isArray(formData)) {
     const defaultsArray = Array.isArray(defaults) ? defaults : [];
-    const mapped = formData.map((value, idx) => {
-      if (defaultsArray[idx]) {
-        return mergeDefaultsWithFormData<any>(defaultsArray[idx], value, mergeExtraArrayDefaults);
+
+    // If overrideFormDataWithDefaults is true, we want to override the formData with the defaults
+    const overrideArray = overrideFormDataWithDefaults ? defaultsArray : formData;
+    const overrideOppositeArray = overrideFormDataWithDefaults ? formData : defaultsArray;
+
+    const mapped = overrideArray.map((value, idx) => {
+      // We want to explicitly make sure that the value is NOT undefined since null, 0 and empty space are valid values
+      if (overrideOppositeArray[idx] !== undefined) {
+        return mergeDefaultsWithFormData<any>(
+          defaultsArray[idx],
+          formData[idx],
+          mergeExtraArrayDefaults,
+          defaultSupercedesUndefined,
+          overrideFormDataWithDefaults,
+        );
       }
       return value;
     });
+
     // Merge any extra defaults when mergeExtraArrayDefaults is true
-    if (mergeExtraArrayDefaults && mapped.length < defaultsArray.length) {
-      mapped.push(...defaultsArray.slice(mapped.length));
+    // Or when overrideFormDataWithDefaults is true and the default array is shorter than the formData array
+    if ((mergeExtraArrayDefaults || overrideFormDataWithDefaults) && mapped.length < overrideOppositeArray.length) {
+      mapped.push(...overrideOppositeArray.slice(mapped.length));
     }
     return mapped as unknown as T;
   }
   if (isObject(formData)) {
     const acc: { [key in keyof T]: any } = Object.assign({}, defaults); // Prevent mutation of source object.
     return Object.keys(formData as GenericObjectType).reduce((acc, key) => {
+      const keyValue = get(formData, key);
+      const keyExistsInDefaults = isObject(defaults) && key in (defaults as GenericObjectType);
+      const keyExistsInFormData = key in (formData as GenericObjectType);
       acc[key as keyof T] = mergeDefaultsWithFormData<T>(
         defaults ? get(defaults, key) : {},
-        get(formData, key),
-        mergeExtraArrayDefaults
+        keyValue,
+        mergeExtraArrayDefaults,
+        defaultSupercedesUndefined,
+        // overrideFormDataWithDefaults can be true only when the key value exists in defaults
+        // Or if the key value doesn't exist in formData
+        overrideFormDataWithDefaults && (keyExistsInDefaults || !keyExistsInFormData),
       );
       return acc;
     }, acc);
   }
+
+  /**
+   * If the defaultSupercedesUndefined flag is true
+   *    And formData is set to undefined or null and defaults are defined
+   *    Or if formData is a number and is NaN return defaults
+   * Or if overrideFormDataWithDefaults flag is true and formData is set to not undefined/null return defaults
+   */
+  if (
+    (defaultSupercedesUndefined &&
+      ((!isNil(defaults) && isNil(formData)) || (typeof formData === 'number' && isNaN(formData)))) ||
+    (overrideFormDataWithDefaults && !isNil(formData))
+  ) {
+    return defaults;
+  }
+
   return formData;
 }

package/src/mergeObjects.ts

@@ -13,27 +13,30 @@ import { GenericObjectType } from './types';
 export default function mergeObjects(
   obj1: GenericObjectType,
   obj2: GenericObjectType,
-  concatArrays: boolean | 'preventDuplicates' = false
+  concatArrays: boolean | 'preventDuplicates' = false,
 ) {
-  return Object.keys(obj2).reduce((acc, key) => {
-    const left = obj1 ? obj1[key] : {},
-      right = obj2[key];
-    if (obj1 && key in obj1 && isObject(right)) {
-      acc[key] = mergeObjects(left, right, concatArrays);
-    } else if (concatArrays && Array.isArray(left) && Array.isArray(right)) {
-      let toMerge = right;
-      if (concatArrays === 'preventDuplicates') {
-        toMerge = right.reduce((result, value) => {
-          if (!left.includes(value)) {
-            result.push(value);
-          }
-          return result;
-        }, []);
+  return Object.keys(obj2).reduce(
+    (acc, key) => {
+      const left = obj1 ? obj1[key] : {},
+        right = obj2[key];
+      if (obj1 && key in obj1 && isObject(right)) {
+        acc[key] = mergeObjects(left, right, concatArrays);
+      } else if (concatArrays && Array.isArray(left) && Array.isArray(right)) {
+        let toMerge = right;
+        if (concatArrays === 'preventDuplicates') {
+          toMerge = right.reduce((result, value) => {
+            if (!left.includes(value)) {
+              result.push(value);
+            }
+            return result;
+          }, []);
+        }
+        acc[key] = left.concat(toMerge);
+      } else {
+        acc[key] = right;
       }
-      acc[key] = left.concat(toMerge);
-    } else {
-      acc[key] = right;
-    }
-    return acc;
-  }, Object.assign({}, obj1)); // Prevent mutation of source object.
+      return acc;
+    },
+    Object.assign({}, obj1),
+  ); // Prevent mutation of source object.
 }