@react-ui-org/react-ui 0.55.1 → 0.56.0

package/src/provider/RUIProvider.jsx

@@ -1,8 +1,10 @@
 import PropTypes from 'prop-types';
 import React, {
+  useContext,
   useMemo,
 } from 'react';
 import defaultTranslations from '../translations/en';
+import { mergeDeep } from '../utils/mergeDeep';
 import RUIContext from './RUIContext';
 
 const RUIProvider = ({
@@ -10,10 +12,11 @@ const RUIProvider = ({
   globalProps,
   translations,
 }) => {
+  const context = useContext(RUIContext);
   const childProps = useMemo(() => ({
-    globalProps,
-    translations,
-  }), [globalProps, translations]);
+    globalProps: mergeDeep(context?.globalProps || {}, globalProps),
+    translations: mergeDeep(context?.translations || {}, translations),
+  }), [context, globalProps, translations]);
 
   return (
     <RUIContext.Provider

package/src/styles/tools/form-fields/_box-field-layout.scss

@@ -125,8 +125,7 @@
 
         .field {
             grid-area: field;
-            align-self: theme.$horizontal-field-vertical-alignment; // 13.
-            justify-self: start; // 7.
+            place-self: theme.$horizontal-field-vertical-alignment start; // 13. / 7.
         }
     }
 }

package/src/styles/tools/form-fields/_inline-field-layout.scss

@@ -85,6 +85,7 @@
 
         &.isRootLayoutHorizontal .label {
             grid-column-start: 1;
+            align-self: start;
             width: auto;
             padding-right: settings.$horizontal-inner-gap;
             margin-left: 0;

package/src/utils/mergeDeep.js

@@ -0,0 +1,28 @@
+const isObject = (obj) => obj && typeof obj === 'object' && !Array.isArray(obj);
+
+/**
+ * Performs a deep merge of objects and returns new object.
+ *
+ * @param {...object} objects
+ * @returns {object}
+ */
+export const mergeDeep = (...objects) => objects.reduce((prev, obj) => {
+  if (obj == null) {
+    return prev;
+  }
+
+  const newObject = { ...prev };
+
+  Object.keys(obj).forEach((key) => {
+    const previousVal = prev[key];
+    const currentVal = obj[key];
+
+    if (isObject(previousVal) && isObject(currentVal)) {
+      newObject[key] = mergeDeep(previousVal, currentVal);
+    } else {
+      newObject[key] = currentVal;
+    }
+  });
+
+  return newObject;
+}, {});

package/src/{components/_helpers → utils}/transferProps.js

@@ -1,12 +1,4 @@
 /**
- * Controls passing of props from the React component to the HTML element
- *
- * Sometimes it is useful to have a mechanism to pass props from the React component to a rendered HTML element.
- * It enables making the component interactive and helps improve its accessibility. However some props should
- * never be passed to the HTML element as it would break things. This function is used to filter out such props.
- *
- * When run in development mode, the function will log the error to the console if any invalid props are passed.
- *
  * @param props The props that were passed to the React component and were not used by it
  * @returns The props to be passed to the HTML element
  */