From ff97cc324512deb47a859cab6611bffadecddb4b Mon Sep 17 00:00:00 2001
From: Martin Bohal <mb@mbohal.cz>
Date: Fri, 20 Dec 2024 07:02:30 +0100
Subject: [PATCH] Split `RUIProvider` into two

This commit splits `RUIProvider` into `TranslationsProvider` and
`GlobalPropsProvider`.

The reasons fo this change are:

* Improve performance by reducing rerenders in cases when the context
  value change dynamically.

* Make code more readable by splitting isolated functionality into
  isolated prividers.
---
 src/components/Alert/Alert.jsx                |   8 +-
 src/components/Badge/Badge.jsx                |   2 +-
 src/components/Button/Button.jsx              |   2 +-
 src/components/ButtonGroup/ButtonGroup.jsx    |   2 +-
 src/components/Card/Card.jsx                  |   2 +-
 src/components/Card/CardBody.jsx              |   2 +-
 src/components/Card/CardFooter.jsx            |   2 +-
 .../CheckboxField/CheckboxField.jsx           |   2 +-
 .../FileInputField/FileInputField.jsx         |   2 +-
 src/components/FormLayout/FormLayout.jsx      |   2 +-
 .../FormLayout/FormLayoutCustomField.jsx      |   2 +-
 src/components/Grid/Grid.jsx                  |   2 +-
 src/components/Grid/GridSpan.jsx              |   2 +-
 src/components/InputGroup/InputGroup.jsx      |   4 +-
 src/components/Modal/Modal.jsx                |   2 +-
 src/components/Modal/ModalBody.jsx            |   2 +-
 src/components/Modal/ModalCloseButton.jsx     |   8 +-
 src/components/Modal/ModalContent.jsx         |   2 +-
 src/components/Modal/ModalFooter.jsx          |   2 +-
 src/components/Modal/ModalHeader.jsx          |   2 +-
 src/components/Modal/ModalTitle.jsx           |   2 +-
 src/components/Modal/README.md                |  36 ++--
 src/components/Paper/Paper.jsx                |   2 +-
 src/components/Popover/Popover.jsx            |   2 +-
 src/components/Popover/PopoverWrapper.jsx     |   2 +-
 src/components/Radio/Radio.jsx                |   2 +-
 src/components/ScrollView/ScrollView.jsx      |   8 +-
 src/components/SelectField/SelectField.jsx    |   2 +-
 src/components/Table/Table.jsx                |   2 +-
 src/components/Tabs/Tabs.jsx                  |   2 +-
 src/components/Tabs/TabsItem.jsx              |   2 +-
 src/components/Text/Text.jsx                  |   2 +-
 src/components/TextArea/TextArea.jsx          |   2 +-
 src/components/TextField/TextField.jsx        |   2 +-
 src/components/TextLink/TextLink.jsx          |   2 +-
 src/components/Toggle/Toggle.jsx              |   2 +-
 src/components/Toolbar/Toolbar.jsx            |   2 +-
 src/components/Toolbar/ToolbarGroup.jsx       |   2 +-
 src/components/Toolbar/ToolbarItem.jsx        |   2 +-
 src/docs/customize/global-props.md            | 159 ++++++------------
 src/docs/customize/translations.md            |  62 ++++---
 src/index.js                                  |   3 +-
 src/provider/RUIContext.jsx                   |   9 -
 src/provider/RUIProvider.jsx                  |  42 -----
 src/provider/index.js                         |   3 -
 .../globalProps/GlobalPropsContext.jsx        |   5 +
 .../globalProps/GlobalPropsProvider.jsx       |  33 ++++
 .../__tests__/GlobalPropsProvider.test.jsx}   |  54 +++---
 src/providers/globalProps/index.js            |   3 +
 .../globalProps}/withGlobalProps.jsx          |  32 ++--
 .../translations/TranslationsContext.jsx      |   6 +
 .../translations/TranslationsProvider.jsx     |  34 ++++
 .../__tests__/TranslationsProvider.test.jsx   |  30 ++++
 src/providers/translations/index.js           |   2 +
 54 files changed, 310 insertions(+), 299 deletions(-)
 delete mode 100644 src/provider/RUIContext.jsx
 delete mode 100644 src/provider/RUIProvider.jsx
 delete mode 100644 src/provider/index.js
 create mode 100644 src/providers/globalProps/GlobalPropsContext.jsx
 create mode 100644 src/providers/globalProps/GlobalPropsProvider.jsx
 rename src/{provider/__tests__/RUIProvider.test.jsx => providers/globalProps/__tests__/GlobalPropsProvider.test.jsx} (70%)
 create mode 100644 src/providers/globalProps/index.js
 rename src/{provider => providers/globalProps}/withGlobalProps.jsx (58%)
 create mode 100644 src/providers/translations/TranslationsContext.jsx
 create mode 100644 src/providers/translations/TranslationsProvider.jsx
 create mode 100644 src/providers/translations/__tests__/TranslationsProvider.test.jsx
 create mode 100644 src/providers/translations/index.js

diff --git a/src/components/Alert/Alert.jsx b/src/components/Alert/Alert.jsx
index 34bf8623..3411eccc 100644
--- a/src/components/Alert/Alert.jsx
+++ b/src/components/Alert/Alert.jsx
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import {
-  RUIContext,
-  withGlobalProps,
-} from '../../provider';
+import { TranslationsContext } from '../../providers/translations';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
@@ -17,7 +15,7 @@ export const Alert = ({
   onClose,
   ...restProps
 }) => {
-  const { translations } = useContext(RUIContext);
+  const translations = useContext(TranslationsContext);
 
   return (
     <div
diff --git a/src/components/Badge/Badge.jsx b/src/components/Badge/Badge.jsx
index 653938ff..aa887a5a 100644
--- a/src/components/Badge/Badge.jsx
+++ b/src/components/Badge/Badge.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx
index c934f13e..32056318 100644
--- a/src/components/Button/Button.jsx
+++ b/src/components/Button/Button.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
diff --git a/src/components/ButtonGroup/ButtonGroup.jsx b/src/components/ButtonGroup/ButtonGroup.jsx
index e894fb92..450a42dd 100644
--- a/src/components/ButtonGroup/ButtonGroup.jsx
+++ b/src/components/ButtonGroup/ButtonGroup.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, {
   useMemo,
 } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
index 8616ee55..69045a96 100644
--- a/src/components/Card/Card.jsx
+++ b/src/components/Card/Card.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
diff --git a/src/components/Card/CardBody.jsx b/src/components/Card/CardBody.jsx
index 729ab157..9037f1ec 100644
--- a/src/components/Card/CardBody.jsx
+++ b/src/components/Card/CardBody.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import styles from './Card.module.scss';
 
diff --git a/src/components/Card/CardFooter.jsx b/src/components/Card/CardFooter.jsx
index 5da62a79..953c8141 100644
--- a/src/components/Card/CardFooter.jsx
+++ b/src/components/Card/CardFooter.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
 import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Card.module.scss';
 
diff --git a/src/components/CheckboxField/CheckboxField.jsx b/src/components/CheckboxField/CheckboxField.jsx
index e3eed379..2c35432d 100644
--- a/src/components/CheckboxField/CheckboxField.jsx
+++ b/src/components/CheckboxField/CheckboxField.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
diff --git a/src/components/FileInputField/FileInputField.jsx b/src/components/FileInputField/FileInputField.jsx
index 0b7ee6a6..113139c6 100644
--- a/src/components/FileInputField/FileInputField.jsx
+++ b/src/components/FileInputField/FileInputField.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
diff --git a/src/components/FormLayout/FormLayout.jsx b/src/components/FormLayout/FormLayout.jsx
index f4ec3b60..2b385c5d 100644
--- a/src/components/FormLayout/FormLayout.jsx
+++ b/src/components/FormLayout/FormLayout.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
diff --git a/src/components/FormLayout/FormLayoutCustomField.jsx b/src/components/FormLayout/FormLayoutCustomField.jsx
index 56ed6977..933d8210 100644
--- a/src/components/FormLayout/FormLayoutCustomField.jsx
+++ b/src/components/FormLayout/FormLayoutCustomField.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
diff --git a/src/components/Grid/Grid.jsx b/src/components/Grid/Grid.jsx
index 8acae0fa..3dd7b490 100644
--- a/src/components/Grid/Grid.jsx
+++ b/src/components/Grid/Grid.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
diff --git a/src/components/Grid/GridSpan.jsx b/src/components/Grid/GridSpan.jsx
index 5630a758..a4f9ad9f 100644
--- a/src/components/Grid/GridSpan.jsx
+++ b/src/components/Grid/GridSpan.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
diff --git a/src/components/InputGroup/InputGroup.jsx b/src/components/InputGroup/InputGroup.jsx
index 57e89f67..dcb230be 100644
--- a/src/components/InputGroup/InputGroup.jsx
+++ b/src/components/InputGroup/InputGroup.jsx
@@ -3,8 +3,7 @@ import React, {
   useContext,
   useMemo,
 } from 'react';
-import { Text } from '../Text';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
@@ -12,6 +11,7 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { FormLayoutContext } from '../FormLayout';
+import { Text } from '../Text';
 import { InputGroupContext } from './InputGroupContext';
 import styles from './InputGroup.module.scss';
 
diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
index d24b0f15..fd95d7a1 100644
--- a/src/components/Modal/Modal.jsx
+++ b/src/components/Modal/Modal.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getPositionClassName } from './_helpers/getPositionClassName';
diff --git a/src/components/Modal/ModalBody.jsx b/src/components/Modal/ModalBody.jsx
index d81822b9..0f54c497 100644
--- a/src/components/Modal/ModalBody.jsx
+++ b/src/components/Modal/ModalBody.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
diff --git a/src/components/Modal/ModalCloseButton.jsx b/src/components/Modal/ModalCloseButton.jsx
index 2144269f..eeecccf6 100644
--- a/src/components/Modal/ModalCloseButton.jsx
+++ b/src/components/Modal/ModalCloseButton.jsx
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import {
-  RUIContext,
-  withGlobalProps,
-} from '../../provider';
+import { TranslationsContext } from '../../providers/translations';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import styles from './ModalCloseButton.module.scss';
 
@@ -13,7 +11,7 @@ export const ModalCloseButton = React.forwardRef((props, ref) => {
     ...restProps
   } = props;
 
-  const { translations } = useContext(RUIContext);
+  const translations = useContext(TranslationsContext);
 
   return (
     <button
diff --git a/src/components/Modal/ModalContent.jsx b/src/components/Modal/ModalContent.jsx
index 2eca62db..5374987a 100644
--- a/src/components/Modal/ModalContent.jsx
+++ b/src/components/Modal/ModalContent.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './ModalContent.module.scss';
diff --git a/src/components/Modal/ModalFooter.jsx b/src/components/Modal/ModalFooter.jsx
index 25bf025b..a4be180a 100644
--- a/src/components/Modal/ModalFooter.jsx
+++ b/src/components/Modal/ModalFooter.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
diff --git a/src/components/Modal/ModalHeader.jsx b/src/components/Modal/ModalHeader.jsx
index 87f20f7d..6cf307aa 100644
--- a/src/components/Modal/ModalHeader.jsx
+++ b/src/components/Modal/ModalHeader.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
diff --git a/src/components/Modal/ModalTitle.jsx b/src/components/Modal/ModalTitle.jsx
index 1aa9270d..bd814062 100644
--- a/src/components/Modal/ModalTitle.jsx
+++ b/src/components/Modal/ModalTitle.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import styles from './ModalTitle.module.scss';
 
diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md
index afe68af8..7ee9efa2 100644
--- a/src/components/Modal/README.md
+++ b/src/components/Modal/README.md
@@ -30,7 +30,7 @@ React.createElement(() => {
     React UI docs. You may not need it in your application.
   */}
   return (
-    <RUIProvider globalProps={{
+    <GlobalPropsProvider globalProps={{
       Modal: { preventScrollUnderneath: window.document.documentElement }
     }}>
       <Button
@@ -72,7 +72,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </RUIProvider>
+    </GlobalPropsProvider>
   );
 });
 ```
@@ -126,7 +126,7 @@ React.createElement(() => {
     React UI docs. You may not need it in your application.
   */}
   return (
-    <RUIProvider globalProps={{
+    <GlobalPropsProvider globalProps={{
       Modal: { preventScrollUnderneath: window.document.documentElement }
     }}>
       <Button
@@ -247,7 +247,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </RUIProvider>
+    </GlobalPropsProvider>
   );
 });
 ```
@@ -281,7 +281,7 @@ React.createElement(() => {
     React UI docs. You may not need it in your application.
   */}
   return (
-    <RUIProvider globalProps={{
+    <GlobalPropsProvider globalProps={{
       Modal: { preventScrollUnderneath: window.document.documentElement }
     }}>
       <Button
@@ -374,7 +374,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </RUIProvider>
+    </GlobalPropsProvider>
   );
 });
 ```
@@ -415,7 +415,7 @@ React.createElement(() => {
     React UI docs. You may not need it in your application.
   */}
   return (
-    <RUIProvider globalProps={{
+    <GlobalPropsProvider globalProps={{
       Modal: { preventScrollUnderneath: window.document.documentElement }
     }}>
       <Button
@@ -517,7 +517,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </RUIProvider>
+    </GlobalPropsProvider>
   );
 });
 ```
@@ -538,7 +538,7 @@ React.createElement(() => {
     React UI docs. You may not need it in your application.
   */}
   return (
-    <RUIProvider globalProps={{
+    <GlobalPropsProvider globalProps={{
       Modal: { preventScrollUnderneath: window.document.documentElement }
     }}>
       <Button
@@ -605,7 +605,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </RUIProvider>
+    </GlobalPropsProvider>
   );
 });
 ```
@@ -622,7 +622,7 @@ React.createElement(() => {
     React UI docs. You may not need it in your application.
   */}
   return (
-    <RUIProvider globalProps={{
+    <GlobalPropsProvider globalProps={{
       Modal: { preventScrollUnderneath: window.document.documentElement }
     }}>
       <Button
@@ -665,7 +665,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </RUIProvider>
+    </GlobalPropsProvider>
   );
 });
 ```
@@ -690,7 +690,7 @@ React.createElement(() => {
     React UI docs. You may not need it in your application.
   */}
   return (
-    <RUIProvider globalProps={{
+    <GlobalPropsProvider globalProps={{
       Modal: { preventScrollUnderneath: window.document.documentElement }
     }}>
       <Button
@@ -734,7 +734,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </RUIProvider>
+    </GlobalPropsProvider>
   );
 });
 ```
@@ -754,7 +754,7 @@ React.createElement(() => {
     React UI docs. You may not need it in your application.
   */}
   return (
-    <RUIProvider globalProps={{
+    <GlobalPropsProvider globalProps={{
       Modal: { preventScrollUnderneath: window.document.documentElement }
     }}>
       <Button
@@ -807,7 +807,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </RUIProvider>
+    </GlobalPropsProvider>
   );
 });
 ```
@@ -936,7 +936,7 @@ React.createElement(() => {
     React UI docs. You may not need it in your application.
   */}
   return (
-    <RUIProvider globalProps={{
+    <GlobalPropsProvider globalProps={{
       Modal: { preventScrollUnderneath: window.document.documentElement }
     }}>
       <Button
@@ -999,7 +999,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </RUIProvider>
+    </GlobalPropsProvider>
   );
 });
 ```
diff --git a/src/components/Paper/Paper.jsx b/src/components/Paper/Paper.jsx
index 29962518..4780bd11 100644
--- a/src/components/Paper/Paper.jsx
+++ b/src/components/Paper/Paper.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import styles from './Paper.module.scss';
diff --git a/src/components/Popover/Popover.jsx b/src/components/Popover/Popover.jsx
index d0d24768..e6849274 100644
--- a/src/components/Popover/Popover.jsx
+++ b/src/components/Popover/Popover.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { createPortal } from 'react-dom';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import getRootSideClassName from './_helpers/getRootSideClassName';
diff --git a/src/components/Popover/PopoverWrapper.jsx b/src/components/Popover/PopoverWrapper.jsx
index 13e18015..0c1c6e7b 100644
--- a/src/components/Popover/PopoverWrapper.jsx
+++ b/src/components/Popover/PopoverWrapper.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import styles from './PopoverWrapper.module.scss';
 
diff --git a/src/components/Radio/Radio.jsx b/src/components/Radio/Radio.jsx
index 56c57c6b..be5248d6 100644
--- a/src/components/Radio/Radio.jsx
+++ b/src/components/Radio/Radio.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
diff --git a/src/components/ScrollView/ScrollView.jsx b/src/components/ScrollView/ScrollView.jsx
index 471b8e45..87a73411 100644
--- a/src/components/ScrollView/ScrollView.jsx
+++ b/src/components/ScrollView/ScrollView.jsx
@@ -6,10 +6,8 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {
-  RUIContext,
-  withGlobalProps,
-} from '../../provider';
+import { TranslationsContext } from '../../providers/translations';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getElementsPositionDifference } from './_helpers/getElementsPositionDifference';
@@ -48,7 +46,7 @@ export const ScrollView = React.forwardRef((props, ref) => {
     ...restProps
   } = props;
 
-  const { translations } = useContext(RUIContext);
+  const translations = useContext(TranslationsContext);
 
   const [isAutoScrollInProgress, setIsAutoScrollInProgress] = useState(false);
   const [isScrolledAtStart, setIsScrolledAtStart] = useState(false);
diff --git a/src/components/SelectField/SelectField.jsx b/src/components/SelectField/SelectField.jsx
index 13eb6108..613b0eff 100644
--- a/src/components/SelectField/SelectField.jsx
+++ b/src/components/SelectField/SelectField.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
diff --git a/src/components/Table/Table.jsx b/src/components/Table/Table.jsx
index 77589569..cb2e386e 100644
--- a/src/components/Table/Table.jsx
+++ b/src/components/Table/Table.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import { TableHeaderCell } from './_components/TableHeaderCell';
 import { TableBodyCell } from './_components/TableBodyCell';
diff --git a/src/components/Tabs/Tabs.jsx b/src/components/Tabs/Tabs.jsx
index ecc5a694..5d5b8ceb 100644
--- a/src/components/Tabs/Tabs.jsx
+++ b/src/components/Tabs/Tabs.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import styles from './Tabs.module.scss';
 
diff --git a/src/components/Tabs/TabsItem.jsx b/src/components/Tabs/TabsItem.jsx
index a48fe0c4..74ae2a56 100644
--- a/src/components/Tabs/TabsItem.jsx
+++ b/src/components/Tabs/TabsItem.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import styles from './TabsItem.module.scss';
diff --git a/src/components/Text/Text.jsx b/src/components/Text/Text.jsx
index 64cdedec..0800f04c 100644
--- a/src/components/Text/Text.jsx
+++ b/src/components/Text/Text.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
diff --git a/src/components/TextArea/TextArea.jsx b/src/components/TextArea/TextArea.jsx
index 4c0fc225..4d52943b 100644
--- a/src/components/TextArea/TextArea.jsx
+++ b/src/components/TextArea/TextArea.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
diff --git a/src/components/TextField/TextField.jsx b/src/components/TextField/TextField.jsx
index 8584d64a..9464ab59 100644
--- a/src/components/TextField/TextField.jsx
+++ b/src/components/TextField/TextField.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
diff --git a/src/components/TextLink/TextLink.jsx b/src/components/TextLink/TextLink.jsx
index 111f7c06..b4ae9e50 100644
--- a/src/components/TextLink/TextLink.jsx
+++ b/src/components/TextLink/TextLink.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import styles from './TextLink.module.scss';
 
diff --git a/src/components/Toggle/Toggle.jsx b/src/components/Toggle/Toggle.jsx
index 068b4c06..77d1fd0d 100644
--- a/src/components/Toggle/Toggle.jsx
+++ b/src/components/Toggle/Toggle.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
diff --git a/src/components/Toolbar/Toolbar.jsx b/src/components/Toolbar/Toolbar.jsx
index 8bcef9df..59ddc121 100644
--- a/src/components/Toolbar/Toolbar.jsx
+++ b/src/components/Toolbar/Toolbar.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
diff --git a/src/components/Toolbar/ToolbarGroup.jsx b/src/components/Toolbar/ToolbarGroup.jsx
index 794e626b..8c4fd625 100644
--- a/src/components/Toolbar/ToolbarGroup.jsx
+++ b/src/components/Toolbar/ToolbarGroup.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
diff --git a/src/components/Toolbar/ToolbarItem.jsx b/src/components/Toolbar/ToolbarItem.jsx
index da8bc453..31a7b77e 100644
--- a/src/components/Toolbar/ToolbarItem.jsx
+++ b/src/components/Toolbar/ToolbarItem.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Toolbar.module.scss';
 
diff --git a/src/docs/customize/global-props.md b/src/docs/customize/global-props.md
index 71f14731..b748cb97 100644
--- a/src/docs/customize/global-props.md
+++ b/src/docs/customize/global-props.md
@@ -3,85 +3,43 @@
 Sometimes it can be useful to share some configuration props between
 multiple instances of components of the same or different kind.
 
-This can be achieved by wrapping application or its part with `RUIProvider`
+This can be achieved by wrapping application or its part with `GlobalPropsProvider`
 and passing in the common props through `globalProps` prop. With or without
-using `RUIProvider` the component can be configured by passing in the props
+using `GlobalPropsProvider` the component can be configured by passing in the props
 directly. The props passed in directly always take precedence over props
-coming from `RUIProvider`.
+coming from `GlobalPropsProvider`.
 
 ## Basic Usage
 
-To define global props, you need to import `RUIProvider` first:
+To define global props, you need to import `GlobalPropsProvider` first:
 
 ```js
-import { RUIProvider } from '@react-ui-org/react-ui';
+import { GlobalPropsProvider } from '@react-ui-org/react-ui';
 ```
 
-Then wrap application or its part with `RUIProvider` with defined `globalProps`
+Then wrap application or its part with `GlobalPropsProvider` with defined `globalProps`
 attribute holding an object. Keys are names of the components, and their
 values are objects with arbitrary props you want to pass to the specified
 components.
 
-Keys conform to actual names of components:
-
-```jsx
-<RUIProvider globalProps={{
-  Button: { priority: 'filled' },
-  TextField: { variant: 'filled' },
-  SelectField: { variant: 'filled' },
-}}>
-  //...
-</RUIProvider>
-```
-
-See working example:
+Keys conform to actual names of components.
 
 ```docoff-react-preview
-React.createElement(() => {
-  const [variant, setVariant] = React.useState('filled');
-  return (
-    <RUIProvider
-      globalProps={{
-        Button: { priority: variant },
-        TextField: { variant },
-        SelectField: { variant },
-      }}
-    >
-      <Toolbar align="bottom">
-        <ToolbarItem>
-          <SelectField
-            id="variant"
-            label="Select variant of Select Field"
-            onChange={(e) => setVariant(e.target.value)}
-            options={[
-              {
-                label: 'filled',
-                value: 'filled',
-              },
-              {
-                label: 'outline',
-                value: 'outline',
-              },
-            ]}
-            value={variant}
-          />
-        </ToolbarItem>
-        <ToolbarItem>
-          <TextField
-            id="my-text-field"
-            label="Text Field"
-          />
-        </ToolbarItem>
-        <ToolbarItem>
-          <Button
-            id="my-button"
-            label="Button"
-          />
-        </ToolbarItem>
-      </Toolbar>
-    </RUIProvider>
-  );
-});
+<>
+  <Badge label="1" />
+
+  <GlobalPropsProvider
+    globalProps={{
+      Badge: { priority: 'outline' },
+    }}
+  >
+    <Badge label="2" />
+    <Badge
+      label="2"
+      priority="filled"
+    />
+  </GlobalPropsProvider>
+</>
 ```
 
 ## Nesting
@@ -90,46 +48,41 @@ Global props can be nested. This is useful e.g. when you want to configure
 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
-ones. If you need to remove some prop, you can set it to `undefined`.
+When a nested `GlobalPropsProvider` is used, the props are merged deeply together.
+This means that you only need to set the value that changes and the rest is inherited.
+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',
-        },
+<GlobalPropsProvider globalProps={{
+  Grid: {
+    columns: {
+      xs: '1fr',
+      md: '1fr 1fr',
+    },
+    justifyItems: 'center',
+    rows: {
+      xs: '50px',
+      md: '100px',
+    },
+  },
+}}>
+  <GlobalPropsProvider globalProps={{
+    Grid: {
+      columns: {
+        sm: '1fr 1fr 1fr',
       },
-    }}>
-      <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>
-  );
-});
+      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>
+  </GlobalPropsProvider>
+</GlobalPropsProvider>
 ```
diff --git a/src/docs/customize/translations.md b/src/docs/customize/translations.md
index 6b701ac2..8b934c2b 100644
--- a/src/docs/customize/translations.md
+++ b/src/docs/customize/translations.md
@@ -3,31 +3,51 @@
 Some components may contain texts which improve components' accessibility.
 All texts are in English by default and can be translated to other languages.
 
-Structure of translations can be found in the file `src/translations/en.json`.
+Structure of translations can be found in the file [src/translations/en.json](https://github.com/react-ui-org/react-ui/blob/master/src/translations/en.js).
 
-To use custom translations, you need to import `RUIProvider` first:
+To use custom translations, you need to import `GlobalPropsProvider` first:
 
 ```js
-import { RUIProvider } from '@react-ui-org/react-ui';
+import { TranslationsProvider } from '@react-ui-org/react-ui';
 ```
 
-Then wrap application (or its part) with `RUIProvider` with `translations` prop object.
-
-```jsx
-<RUIProvider translations={{
-  Alert: {
-    close: 'Close',
-  },
-  ModalCloseButton: {
-    close: 'Close',
-  },
-  ScrollView: {
-    next: 'Next',
-    previous: 'Previous',
-  },
+Then wrap application (or its part) with `TranslationsProvider` with
+the `translations` prop object.
+
+```docoff-react-preview
+<TranslationsProvider translations={{
+  Alert: { close: 'Close now!' }
+}}>
+  <Alert onClose={() => alert('You closed me!')}>
+    Hi, I'm a closable Alert.
+  </Alert>
+</TranslationsProvider>
+```
+
+## Nesting
+
+The `TranslationsProvider`s can be nested. This is useful e.g. when you want to
+configure translations across whole application and then override some of them
+in a specific part of the application.
+
+When a nested `TranslationsProvider` is used, the props are merged deeply together.
+This means that you can extend specific object with new props or override existing
+ones.
+
+```docoff-react-preview
+<TranslationsProvider translations={{
+  Alert: { close: 'Close now!' }
 }}>
-  <Modal>
-    // ...
-  </Modal>
-</RUIProvider>
+  <Alert onClose={() => alert('You closed me!')}>
+    Hi, I'm a closable Alert.
+  </Alert>
+
+  <TranslationsProvider translations={{
+    Alert: { close: 'Close immediately!' }
+    }}>
+      <Alert onClose={() => alert('You closed me!')}>
+        Hi, I'm another Alert and I'm also closable.
+      </Alert>
+    </TranslationsProvider>
+</TranslationsProvider>
 ```
diff --git a/src/index.js b/src/index.js
index 4526abc1..9ef2e363 100644
--- a/src/index.js
+++ b/src/index.js
@@ -58,7 +58,8 @@ export {
 } from './components/Toolbar';
 
 // Provider
-export { RUIProvider } from './provider';
+export { TranslationsProvider } from './providers/translations';
+export { GlobalPropsProvider } from './providers/globalProps';
 
 // Utils
 export { classNames } from './utils/classNames';
diff --git a/src/provider/RUIContext.jsx b/src/provider/RUIContext.jsx
deleted file mode 100644
index a9bac060..00000000
--- a/src/provider/RUIContext.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import defaultTranslations from '../translations/en';
-
-const RUIContext = React.createContext({
-  globalProps: {},
-  translations: defaultTranslations,
-});
-
-export default RUIContext;
diff --git a/src/provider/RUIProvider.jsx b/src/provider/RUIProvider.jsx
deleted file mode 100644
index e6067cc4..00000000
--- a/src/provider/RUIProvider.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-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 = ({
-  children,
-  globalProps,
-  translations,
-}) => {
-  const context = useContext(RUIContext);
-  const childProps = useMemo(() => ({
-    globalProps: mergeDeep(context?.globalProps || {}, globalProps),
-    translations: mergeDeep(context?.translations || {}, translations),
-  }), [context, globalProps, translations]);
-
-  return (
-    <RUIContext.Provider
-      value={childProps}
-    >
-      {children}
-    </RUIContext.Provider>
-  );
-};
-
-RUIProvider.defaultProps = {
-  children: null,
-  globalProps: null,
-  translations: defaultTranslations,
-};
-
-RUIProvider.propTypes = {
-  children: PropTypes.node,
-  globalProps: PropTypes.shape({}),
-  translations: PropTypes.shape({}),
-};
-
-export default RUIProvider;
diff --git a/src/provider/index.js b/src/provider/index.js
deleted file mode 100644
index 85410c5e..00000000
--- a/src/provider/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as RUIProvider } from './RUIProvider';
-export { default as RUIContext } from './RUIContext';
-export { default as withGlobalProps } from './withGlobalProps';
diff --git a/src/providers/globalProps/GlobalPropsContext.jsx b/src/providers/globalProps/GlobalPropsContext.jsx
new file mode 100644
index 00000000..3ed61e3d
--- /dev/null
+++ b/src/providers/globalProps/GlobalPropsContext.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const GlobalPropsContext = React.createContext({});
+
+export default GlobalPropsContext;
diff --git a/src/providers/globalProps/GlobalPropsProvider.jsx b/src/providers/globalProps/GlobalPropsProvider.jsx
new file mode 100644
index 00000000..9e9a3590
--- /dev/null
+++ b/src/providers/globalProps/GlobalPropsProvider.jsx
@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import React, {
+  useContext,
+} from 'react';
+import { mergeDeep } from '../../utils/mergeDeep';
+import GlobalPropsContext from './GlobalPropsContext';
+
+const GlobalPropsProvider = ({
+  children,
+  globalProps,
+}) => {
+  const contextGlobalProps = useContext(GlobalPropsContext);
+
+  return (
+    <GlobalPropsContext.Provider
+      value={mergeDeep(contextGlobalProps, globalProps)}
+    >
+      {children}
+    </GlobalPropsContext.Provider>
+  );
+};
+
+GlobalPropsProvider.defaultProps = {
+  children: null,
+  globalProps: {},
+};
+
+GlobalPropsProvider.propTypes = {
+  children: PropTypes.node,
+  globalProps: PropTypes.shape({}),
+};
+
+export default GlobalPropsProvider;
diff --git a/src/provider/__tests__/RUIProvider.test.jsx b/src/providers/globalProps/__tests__/GlobalPropsProvider.test.jsx
similarity index 70%
rename from src/provider/__tests__/RUIProvider.test.jsx
rename to src/providers/globalProps/__tests__/GlobalPropsProvider.test.jsx
index 04b64ca9..7ce47bae 100644
--- a/src/provider/__tests__/RUIProvider.test.jsx
+++ b/src/providers/globalProps/__tests__/GlobalPropsProvider.test.jsx
@@ -3,44 +3,28 @@ import {
   render,
   within,
 } from '@testing-library/react';
-import { Alert } from '../../components/Alert';
-import { Badge } from '../../components/Badge';
-import { Grid } from '../../components/Grid';
-import RUIProvider from '../RUIProvider';
+import { Badge } from '../../../components/Badge';
+import { Grid } from '../../../components/Grid';
+import GlobalPropsProvider from '../GlobalPropsProvider';
 
 describe('rendering', () => {
-  it.each([
-    [
-      {
-        children: <Badge />,
-        globalProps: {
-          Badge: { label: 'label' },
-        },
-      },
-      (rootElement) => expect(within(rootElement).getByText('label')),
-    ],
-    [
-      {
-        children: <Alert onClose={() => {}}>alert text</Alert>,
-        translations: {
-          Alert: { close: 'Zavřít' },
-        },
-      },
-      (rootElement) => expect(within(rootElement).getByTitle('Zavřít')),
-    ],
-  ])('renders with props: "%s"', (testedProps, assert) => {
+  it('renders with global props', () => {
     const dom = render((
-      <RUIProvider
-        {...testedProps}
-      />
+      <GlobalPropsProvider
+        globalProps={{
+          Badge: { label: 'label' },
+        }}
+      >
+        <Badge />
+      </GlobalPropsProvider>
     ));
 
-    assert(dom.container.firstChild);
+    expect(within(dom.container.firstChild).getByText('label'));
   });
 
-  it('renders with nested providers', () => {
+  it('renders with nested providers and object typed props', () => {
     const dom = render((
-      <RUIProvider
+      <GlobalPropsProvider
         globalProps={{
           Grid: {
             alignContent: {
@@ -56,7 +40,7 @@ describe('rendering', () => {
           },
         }}
       >
-        <RUIProvider
+        <GlobalPropsProvider
           globalProps={{
             Grid: {
               alignContent: undefined,
@@ -71,7 +55,7 @@ describe('rendering', () => {
             },
           }}
         >
-          <RUIProvider
+          <GlobalPropsProvider
             globalProps={{
               Grid: {
                 autoFlow: {
@@ -86,9 +70,9 @@ describe('rendering', () => {
                 Content text
               </div>
             </Grid>
-          </RUIProvider>
-        </RUIProvider>
-      </RUIProvider>
+          </GlobalPropsProvider>
+        </GlobalPropsProvider>
+      </GlobalPropsProvider>
     ));
 
     // Assert alignContent
diff --git a/src/providers/globalProps/index.js b/src/providers/globalProps/index.js
new file mode 100644
index 00000000..dbb3b9d4
--- /dev/null
+++ b/src/providers/globalProps/index.js
@@ -0,0 +1,3 @@
+export { default as GlobalPropsProvider } from './GlobalPropsProvider';
+export { default as GlobalPropsContext } from './GlobalPropsContext';
+export { default as withGlobalProps } from './withGlobalProps';
diff --git a/src/provider/withGlobalProps.jsx b/src/providers/globalProps/withGlobalProps.jsx
similarity index 58%
rename from src/provider/withGlobalProps.jsx
rename to src/providers/globalProps/withGlobalProps.jsx
index 9b4f2745..f4e993b3 100644
--- a/src/provider/withGlobalProps.jsx
+++ b/src/providers/globalProps/withGlobalProps.jsx
@@ -1,26 +1,24 @@
 import PropTypes from 'prop-types';
-import React from 'react';
-import RUIContext from './RUIContext';
+import React, {
+  useContext,
+} from 'react';
+import GlobalPropsContext from './GlobalPropsContext';
 
 export default (Component, componentName) => {
   const WithGlobalPropsComponent = ({
     forwardedRef,
     ...rest
-  }) => (
-    <RUIContext.Consumer>
-      {({ globalProps }) => {
-        const contextGlobalProps = globalProps ? globalProps[componentName] : null;
+  }) => {
+    const contextGlobalProps = useContext(GlobalPropsContext);
 
-        return (
-          <Component
-            {...contextGlobalProps}
-            {...rest}
-            ref={forwardedRef}
-          />
-        );
-      }}
-    </RUIContext.Consumer>
-  );
+    return (
+      <Component
+        {...contextGlobalProps[componentName] || {}}
+        {...rest}
+        ref={forwardedRef}
+      />
+    );
+  };
 
   WithGlobalPropsComponent.defaultProps = {
     forwardedRef: undefined,
@@ -29,6 +27,8 @@ export default (Component, componentName) => {
   WithGlobalPropsComponent.propTypes = {
     forwardedRef: PropTypes.oneOfType([
       PropTypes.func,
+
+      // The props can be of any type and here we need to support them all
       // eslint-disable-next-line react/forbid-prop-types
       PropTypes.shape({ current: PropTypes.any }),
     ]),
diff --git a/src/providers/translations/TranslationsContext.jsx b/src/providers/translations/TranslationsContext.jsx
new file mode 100644
index 00000000..1a2c1774
--- /dev/null
+++ b/src/providers/translations/TranslationsContext.jsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import defaultTranslations from '../../translations/en';
+
+const RUIContext = React.createContext(defaultTranslations);
+
+export default RUIContext;
diff --git a/src/providers/translations/TranslationsProvider.jsx b/src/providers/translations/TranslationsProvider.jsx
new file mode 100644
index 00000000..c776c197
--- /dev/null
+++ b/src/providers/translations/TranslationsProvider.jsx
@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import React, {
+  useContext,
+} from 'react';
+import defaultTranslations from '../../translations/en';
+import { mergeDeep } from '../../utils/mergeDeep';
+import TranslationsContext from './TranslationsContext';
+
+const TranslationsProvider = ({
+  children,
+  translations,
+}) => {
+  const context = useContext(TranslationsContext);
+
+  return (
+    <TranslationsContext.Provider
+      value={mergeDeep(context?.translations, translations)}
+    >
+      {children}
+    </TranslationsContext.Provider>
+  );
+};
+
+TranslationsProvider.defaultProps = {
+  children: null,
+  translations: defaultTranslations,
+};
+
+TranslationsProvider.propTypes = {
+  children: PropTypes.node,
+  translations: PropTypes.shape({}),
+};
+
+export default TranslationsProvider;
diff --git a/src/providers/translations/__tests__/TranslationsProvider.test.jsx b/src/providers/translations/__tests__/TranslationsProvider.test.jsx
new file mode 100644
index 00000000..a5c957b2
--- /dev/null
+++ b/src/providers/translations/__tests__/TranslationsProvider.test.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import {
+  render,
+  within,
+} from '@testing-library/react';
+import { Alert } from '../../../components/Alert';
+import TranslationsProvider from '../TranslationsProvider';
+
+describe('rendering', () => {
+  it.each([
+    [
+      {
+        children: <Alert onClose={() => {}}>alert text</Alert>,
+        translations: {
+          Alert: { close: 'Zavřít' },
+        },
+      },
+      (rootElement) => expect(within(rootElement).getByTitle('Zavřít')),
+    ],
+  ])('renders with props: "%s"', (testedProps, assert) => {
+    const dom = render((
+      <TranslationsProvider
+        {...testedProps}
+      />
+    ));
+
+    assert(dom.container.firstChild);
+  });
+});
+
diff --git a/src/providers/translations/index.js b/src/providers/translations/index.js
new file mode 100644
index 00000000..ad2dd159
--- /dev/null
+++ b/src/providers/translations/index.js
@@ -0,0 +1,2 @@
+export { default as TranslationsProvider } from './TranslationsProvider';
+export { default as TranslationsContext } from './TranslationsContext';