fixup! Introduce usage of nested RUIProvider (#541)

src/docs/customize/global-props.md

@@ -91,5 +91,45 @@ props across whole application and then override some of them in a specific
 part of the application.
 
 When nested `RUIProvider` is used, the props are merged deeply together. This
-means  that you can extend specific object with new props or override existing
+means that you can extend specific object with new props or override existing
 ones. If you need to remove some prop, you can set it to `undefined`.
+
+```docoff-react-preview
+React.createElement(() => {
+  const [variant, setVariant] = React.useState('filled');
+  return (
+    <RUIProvider globalProps={{
+      Grid: {
+        columns: {
+          xs: '1fr',
+          md: '1fr 1fr',
+        },
+        justifyItems: 'center',
+        rows: {
+          xs: '50px',
+          md: '100px',
+        },
+      },
+    }}>
+      <RUIProvider globalProps={{
+        Grid: {
+          columns: {
+            sm: '1fr 1fr 1fr',
+          },
+          justifyItems: 'undefined',
+          rows: undefined,
+        },
+      }}>
+        <Grid>
+          <docoff-placeholder bordered>Grid item</docoff-placeholder>
+          <docoff-placeholder bordered>Grid item</docoff-placeholder>
+          <docoff-placeholder bordered>Grid item</docoff-placeholder>
+          <docoff-placeholder bordered>Grid item</docoff-placeholder>
+          <docoff-placeholder bordered>Grid item</docoff-placeholder>
+          <docoff-placeholder bordered>Grid item</docoff-placeholder>
+        </Grid>
+      </RUIProvider>
+    </RUIProvider>
+  );
+});
+```

src/utils/__tests__/mergeDeep.js

@@ -56,7 +56,7 @@ describe('mergeDeep', () => {
       },
       state: {
         items: [3, 4, 5],
-        itemsSize: 5,
+        itemsSize: 3,
       },
     };
     const expectedObj = {
@@ -70,8 +70,8 @@ describe('mergeDeep', () => {
         },
       },
       state: {
-        items: [1, 2, 3, 4, 5],
-        itemsSize: 5,
+        items: [3, 4, 5],
+        itemsSize: 3,
       },
     };
 

src/utils/mergeDeep.js

@@ -1,4 +1,4 @@
-const isObject = (obj) => obj && typeof obj === 'object';
+const isObject = (obj) => obj && typeof obj === 'object' && !Array.isArray(obj);
 
 /**
  * Performs a deep merge of objects and returns new object.
@@ -17,9 +17,7 @@ export const mergeDeep = (...objects) => objects.reduce((prev, obj) => {
     const pVal = prev[key];
     const oVal = obj[key];
 
-    if (Array.isArray(pVal) && Array.isArray(oVal)) {
-      newObject[key] = pVal.concat(...oVal);
-    } else if (isObject(pVal) && isObject(oVal)) {
+    if (isObject(pVal) && isObject(oVal)) {
       newObject[key] = mergeDeep(pVal, oVal);
     } else {
       newObject[key] = oVal;