@react-ui-org/react-ui 0.44.1 → 0.47.0

package/src/lib/components/ScrollView/ScrollView.jsx

@@ -1,14 +1,19 @@
 import PropTypes from 'prop-types';
 import React, {
+  useContext,
   useEffect,
   useLayoutEffect,
   useRef,
   useState,
 } from 'react';
-import { useLoadResize } from '../../hooks/useLoadResizeHook';
-import { useScrollPosition } from '../../hooks/useScrollPositionHook';
-import { withProviderContext } from '../../provider';
-import { getElementsPositionDifference } from '../../services/elementPositionService';
+import {
+  RUIContext,
+  withGlobalProps,
+} from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { getElementsPositionDifference } from './_helpers/getElementsPositionDifference';
+import { useLoadResize } from './_hooks/useLoadResizeHook';
+import { useScrollPosition } from './_hooks/useScrollPositionHook';
 import styles from './ScrollView.scss';
 
 // Function `getElementsPositionDifference` sometimes returns floating point values that results
@@ -33,9 +38,10 @@ export const ScrollView = (props) => {
     scrollbar,
     shadowColor,
     shadowSize,
-    translations,
   } = props;
 
+  const { translations } = useContext(RUIContext);
+
   const [isAutoScrollInProgress, setIsAutoScrollInProgress] = useState(false);
   const [isScrolledAtStart, setIsScrolledAtStart] = useState(false);
   const [isScrolledAtEnd, setIsScrolledAtEnd] = useState(false);
@@ -197,13 +203,13 @@ export const ScrollView = (props) => {
 
   return (
     <div
-      className={[
+      className={classNames(
         styles.root,
-        isScrolledAtStart ? styles.isRootScrolledAtStart : '',
-        isScrolledAtEnd ? styles.isRootScrolledAtEnd : '',
-        scrollbar ? '' : styles.hasRootScrollbarDisabled,
+        isScrolledAtStart && styles.isRootScrolledAtStart,
+        isScrolledAtEnd && styles.isRootScrolledAtEnd,
+        !scrollbar && styles.hasRootScrollbarDisabled,
         direction === 'horizontal' ? styles.isRootHorizontal : styles.isRootVertical,
-      ].join(' ')}
+      )}
       style={inlineStyle(
         direction,
         arrowsColor,
@@ -236,7 +242,7 @@ export const ScrollView = (props) => {
               'prev',
               arrowsScrollStep,
             )}
-            title={translations.previous}
+            title={translations.ScrollView.previous}
             id={id && `${id}__arrowPrevButton`}
           >
             {customPrevArrow || (
@@ -253,7 +259,7 @@ export const ScrollView = (props) => {
               'next',
               arrowsScrollStep,
             )}
-            title={translations.next}
+            title={translations.ScrollView.next}
             id={id && `${id}__arrowNextButton`}
           >
             {customNextArrow || (
@@ -271,6 +277,7 @@ ScrollView.defaultProps = {
   arrowsColor: undefined,
   arrowsScrollStep: 200,
   autoScroll: 'off',
+  children: null,
   customEndShadowStyle: {},
   customNextArrow: null,
   customPrevArrow: null,
@@ -315,7 +322,7 @@ ScrollView.propTypes = {
   /**
    * Content to be scrollable.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   /**
    * Custom CSS to replace the default end scrolling shadow.
    */
@@ -372,15 +379,8 @@ ScrollView.propTypes = {
    * mode.
    */
   shadowSize: PropTypes.string,
-  /**
-   * Translations required by the component.
-   */
-  translations: PropTypes.shape({
-    next: PropTypes.string.isRequired,
-    previous: PropTypes.string.isRequired,
-  }).isRequired,
 };
 
-export const ScrollViewWithContext = withProviderContext(ScrollView, 'ScrollView');
+export const ScrollViewWithGlobalProps = withGlobalProps(ScrollView, 'ScrollView');
 
-export default ScrollViewWithContext;
+export default ScrollViewWithGlobalProps;

package/src/lib/components/ScrollView/ScrollView.scss

@@ -21,204 +21,204 @@
 // 7. Hide content overflowing in the other direction because scrollbars would be unreachable under
 //    scrolling shadows.
 
-@use '../../styles/tools/accessibility';
-@use '../../styles/tools/caret';
-@use '../../styles/tools/reset';
-@use '../../styles/tools/scrollbar';
-@use '../../styles/tools/spacing';
-@use '../../styles/tools/transition';
-@use 'theme';
+@use "../../styles/tools/accessibility";
+@use "../../styles/tools/caret";
+@use "../../styles/tools/reset";
+@use "../../styles/tools/scrollbar";
+@use "../../styles/tools/spacing";
+@use "../../styles/tools/transition";
+@use "theme";
 
 $_arrow-inner-spacing: spacing.of(2);
 $_arrow-outer-spacing: spacing.of(4);
 
 .root {
-  position: relative; // 2.
-  display: flex;
-  flex-direction: column;
-  width: 100%;
+    position: relative; // 2.
+    display: flex;
+    flex-direction: column;
+    width: 100%;
 }
 
 // 1.
 .scrollingShadows {
-  position: absolute; // 2.
-  width: 100%; // 2.
-  height: 100%; // 2.
-  overflow: hidden; // 2.
-
-  &::before,
-  &::after {
-    @include transition.add((visibility, opacity, transform));
-
-    content: '';
-    position: absolute;
-    z-index: 2; // 2.
-    display: block;
-    width: var(--rui-local-shadow-width);
-    height: var(--rui-local-shadow-height);
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  &::before {
-    background: var(--rui-local-start-shadow-background);
-    box-shadow: var(--rui-local-start-shadow-box-shadow);
-  }
-
-  &::after {
-    background: var(--rui-local-end-shadow-background);
-    box-shadow: var(--rui-local-end-shadow-box-shadow);
-  }
+    position: absolute; // 2.
+    width: 100%; // 2.
+    height: 100%; // 2.
+    overflow: hidden; // 2.
+
+    &::before,
+    &::after {
+        @include transition.add((visibility, opacity, transform));
+
+        content: "";
+        position: absolute;
+        z-index: 2; // 2.
+        display: block;
+        width: var(--rui-local-shadow-width);
+        height: var(--rui-local-shadow-height);
+        visibility: hidden;
+        opacity: 0;
+    }
+
+    &::before {
+        background: var(--rui-local-start-shadow-background);
+        box-shadow: var(--rui-local-start-shadow-box-shadow);
+    }
+
+    &::after {
+        background: var(--rui-local-end-shadow-background);
+        box-shadow: var(--rui-local-end-shadow-box-shadow);
+    }
 }
 
 .viewport {
-  z-index: 1; // 2.
-  width: 100%;
-  scroll-behavior: smooth;
-  -webkit-overflow-scrolling: touch;
+    z-index: 1; // 2.
+    width: 100%;
+    scroll-behavior: smooth;
+    -webkit-overflow-scrolling: touch;
 }
 
 .arrowPrev,
 .arrowNext {
-  @include reset.button();
-  @include accessibility.min-tap-target();
-  @include transition.add((visibility, opacity, transform));
+    @include reset.button();
+    @include accessibility.min-tap-target();
+    @include transition.add((visibility, opacity, transform));
 
-  position: absolute; // 3.
-  z-index: 3; // 3.
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--rui-local-arrow-color);
-  visibility: hidden;
-  opacity: 0;
+    position: absolute; // 3.
+    z-index: 3; // 3.
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--rui-local-arrow-color);
+    visibility: hidden;
+    opacity: 0;
 }
 
 .arrowIcon {
-  @include caret.create();
+    @include caret.create();
 }
 
 .isRootVertical {
-  height: 100%;
-  min-height: 0; // 6.
+    height: 100%;
+    min-height: 0; // 6.
 }
 
 .isRootVertical .viewport {
-  height: 100%;
-  overflow-x: hidden; // 7.
-  overflow-y: auto; // 2.
+    height: 100%;
+    overflow-x: hidden; // 7.
+    overflow-y: auto; // 2.
 }
 
 .isRootVertical .arrowPrev {
-  top: 0;
-  right: 0;
-  left: 0;
-  width: 100%;
-  padding-top: $_arrow-outer-spacing;
-  padding-bottom: $_arrow-inner-spacing;
-  transform: translateY(theme.$arrow-initial-offset);
+    top: 0;
+    right: 0;
+    left: 0;
+    width: 100%;
+    padding-top: $_arrow-outer-spacing;
+    padding-bottom: $_arrow-inner-spacing;
+    transform: translateY(theme.$arrow-initial-offset);
 }
 
 .isRootVertical .arrowPrev .arrowIcon {
-  @include caret.rotate(180);
+    @include caret.rotate(180);
 }
 
 .isRootVertical .arrowNext {
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  padding-top: $_arrow-inner-spacing;
-  padding-bottom: $_arrow-outer-spacing;
-  transform: translateY(calc(-1 * #{theme.$arrow-initial-offset}));
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding-top: $_arrow-inner-spacing;
+    padding-bottom: $_arrow-outer-spacing;
+    transform: translateY(calc(-1 * #{theme.$arrow-initial-offset}));
 }
 
 .isRootHorizontal {
-  min-width: 0; // 6.
+    min-width: 0; // 6.
 }
 
 .isRootHorizontal .arrowPrev {
-  top: 0;
-  bottom: 0;
-  left: 0;
-  padding-right: $_arrow-inner-spacing;
-  padding-left: $_arrow-outer-spacing;
-  transform: translateX(theme.$arrow-initial-offset);
+    top: 0;
+    bottom: 0;
+    left: 0;
+    padding-right: $_arrow-inner-spacing;
+    padding-left: $_arrow-outer-spacing;
+    transform: translateX(theme.$arrow-initial-offset);
 }
 
 .isRootHorizontal .arrowPrev .arrowIcon {
-  @include caret.rotate(90);
+    @include caret.rotate(90);
 }
 
 .isRootHorizontal .arrowNext {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  padding-right: $_arrow-outer-spacing;
-  padding-left: $_arrow-inner-spacing;
-  transform: translateX(calc(-1 * #{theme.$arrow-initial-offset}));
+    top: 0;
+    right: 0;
+    bottom: 0;
+    padding-right: $_arrow-outer-spacing;
+    padding-left: $_arrow-inner-spacing;
+    transform: translateX(calc(-1 * #{theme.$arrow-initial-offset}));
 }
 
 .isRootHorizontal .arrowNext .arrowIcon {
-  @include caret.rotate(270);
+    @include caret.rotate(270);
 }
 
 .isRootVertical .scrollingShadows::before,
 .isRootVertical .scrollingShadows::after {
-  right: 0;
-  left: 0;
+    right: 0;
+    left: 0;
 }
 
 .isRootVertical .scrollingShadows::before {
-  top: 0;
-  transform: translateY(theme.$shadow-initial-offset);
+    top: 0;
+    transform: translateY(theme.$shadow-initial-offset);
 }
 
 .isRootVertical .scrollingShadows::after {
-  bottom: 0;
-  transform: translateY(calc(-1 * #{theme.$shadow-initial-offset}));
+    bottom: 0;
+    transform: translateY(calc(-1 * #{theme.$shadow-initial-offset}));
 }
 
 .isRootHorizontal .viewport {
-  overflow-x: auto; // 2.
-  overflow-y: hidden; // 5., 7.
+    overflow-x: auto; // 2.
+    overflow-y: hidden; // 5., 7.
 }
 
 .isRootHorizontal .content {
-  display: inline-flex; // 4.
-  min-width: 100%;
+    display: inline-flex; // 4.
+    min-width: 100%;
 }
 
 .isRootHorizontal .scrollingShadows::before,
 .isRootHorizontal .scrollingShadows::after {
-  top: 0;
-  bottom: 0;
+    top: 0;
+    bottom: 0;
 }
 
 .isRootHorizontal .scrollingShadows::before {
-  left: 0;
-  transform: translateX(theme.$shadow-initial-offset);
+    left: 0;
+    transform: translateX(theme.$shadow-initial-offset);
 }
 
 .isRootHorizontal .scrollingShadows::after {
-  right: 0;
-  transform: translateX(calc(-1 * #{theme.$shadow-initial-offset}));
+    right: 0;
+    transform: translateX(calc(-1 * #{theme.$shadow-initial-offset}));
 }
 
 .isRootScrolledAtStart .scrollingShadows::before,
 .isRootScrolledAtStart .arrowPrev {
-  visibility: visible;
-  opacity: 1;
-  transform: translate(0, 0);
+    visibility: visible;
+    opacity: 1;
+    transform: translate(0, 0);
 }
 
 .isRootScrolledAtEnd .scrollingShadows::after,
 .isRootScrolledAtEnd .arrowNext {
-  visibility: visible;
-  opacity: 1;
-  transform: translate(0, 0);
+    visibility: visible;
+    opacity: 1;
+    transform: translate(0, 0);
 }
 
 .hasRootScrollbarDisabled .viewport {
-  @include scrollbar.hide();
+    @include scrollbar.hide();
 }

package/src/lib/{services/elementPositionService.js → components/ScrollView/_helpers/getElementsPositionDifference.js}

@@ -9,5 +9,3 @@ export const getElementsPositionDifference = (contentEl, viewportEl) => {
     top: contentPosition.top - viewportPosition.top,
   };
 };
-
-export default getElementsPositionDifference;

package/src/lib/{hooks → components/ScrollView/_hooks}/useLoadResizeHook.js

@@ -2,7 +2,7 @@ import {
   useLayoutEffect,
   useRef,
 } from 'react';
-import { getElementsPositionDifference } from '../services/elementPositionService';
+import { getElementsPositionDifference } from '../_helpers/getElementsPositionDifference';
 
 export const useLoadResize = (effect, dependencies, contentEl, viewportEl, wait) => {
   const throttleTimeout = useRef(null);

package/src/lib/{hooks → components/ScrollView/_hooks}/useScrollPositionHook.js

@@ -2,7 +2,7 @@ import {
   useLayoutEffect,
   useRef,
 } from 'react';
-import { getElementsPositionDifference } from '../services/elementPositionService';
+import { getElementsPositionDifference } from '../_helpers/getElementsPositionDifference';
 
 export const useScrollPosition = (effect, dependencies, contentEl, viewportEl, wait) => {
   const throttleTimeout = useRef(null);

package/src/lib/components/SelectField/README.mdx

@@ -598,7 +598,7 @@ It's possible to disable just some options or the whole input.
 
 In addition to the options below, you can specify [React synthetic events] or
 any custom HTML attributes that do not interfere with the API, and they will be
-passed to the `select` HTML element. This enables making the component
+passed to the `<select>` HTML element. This enables making the component
 interactive and helps improve its accessibility.
 
 <Props table of={SelectField} />

package/src/lib/components/SelectField/SelectField.jsx

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import getRootSizeClassName from '../../helpers/getRootSizeClassName';
-import getRootValidationStateClassName from '../../helpers/getRootValidationStateClassName';
-import { resolveContextOrProp } from '../../helpers/resolveContextOrProp';
-import { withProviderContext } from '../../provider';
-import transferProps from '../../utils/transferProps';
+import { withGlobalProps } from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
+import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
+import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
+import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import withForwardedRef from '../withForwardedRef';
 import styles from './SelectField.scss';
@@ -31,27 +32,27 @@ export const SelectField = ({
 
   return (
     <label
-      className={[
+      className={classNames(
         styles.root,
-        fullWidth ? styles.isRootFullWidth : '',
-        context ? styles.isRootInFormLayout : '',
+        fullWidth && styles.isRootFullWidth,
+        context && styles.isRootInFormLayout,
         resolveContextOrProp(context && context.layout, layout) === 'horizontal'
           ? styles.rootLayoutHorizontal
           : styles.rootLayoutVertical,
-        disabled ? styles.isRootDisabled : '',
-        required ? styles.isRootRequired : '',
+        disabled && styles.isRootDisabled,
+        required && styles.isRootRequired,
         getRootSizeClassName(size, styles),
         getRootValidationStateClassName(validationState, styles),
         variant === 'filled' ? styles.rootVariantFilled : styles.rootVariantOutline,
-      ].join(' ')}
+      )}
       htmlFor={id}
       id={id && `${id}__label`}
     >
       <div
-        className={[
+        className={classNames(
           styles.label,
-          isLabelVisible ? '' : styles.isLabelHidden,
-        ].join(' ')}
+          !isLabelVisible && styles.isLabelHidden,
+        )}
         id={id && `${id}__labelText`}
       >
         {label}
@@ -214,6 +215,6 @@ SelectField.propTypes = {
   variant: PropTypes.oneOf(['filled', 'outline']),
 };
 
-export const SelectFieldWithContext = withForwardedRef(withProviderContext(SelectField, 'SelectField'));
+export const SelectFieldWithGlobalProps = withForwardedRef(withGlobalProps(SelectField, 'SelectField'));
 
-export default SelectFieldWithContext;
+export default SelectFieldWithGlobalProps;

package/src/lib/components/SelectField/SelectField.scss

@@ -1,104 +1,104 @@
-@use '../../styles/tools/form-fields/box-field-elements';
-@use '../../styles/tools/form-fields/box-field-layout';
-@use '../../styles/tools/form-fields/box-field-sizes';
-@use '../../styles/tools/form-fields/foundation';
-@use '../../styles/tools/form-fields/variants';
-@use '../../styles/tools/accessibility';
+@use "../../styles/tools/form-fields/box-field-elements";
+@use "../../styles/tools/form-fields/box-field-layout";
+@use "../../styles/tools/form-fields/box-field-sizes";
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/variants";
+@use "../../styles/tools/accessibility";
 
 // Foundation
 .root {
-  @include foundation.root();
+    @include foundation.root();
 }
 
 .label {
-  @include foundation.label();
+    @include foundation.label();
 }
 
 .inputContainer {
-  @include box-field-elements.input-container();
+    @include box-field-elements.input-container();
 }
 
 .input {
-  @include box-field-elements.input();
-  @include box-field-elements.input-select();
-  @include box-field-elements.input-select-option();
+    @include box-field-elements.input();
+    @include box-field-elements.input-select();
+    @include box-field-elements.input-select-option();
 }
 
 .caret {
-  @include box-field-elements.caret();
+    @include box-field-elements.caret();
 }
 
 .caretIcon {
-  @include box-field-elements.caret-icon();
+    @include box-field-elements.caret-icon();
 }
 
 .bottomLine {
-  @include box-field-elements.bottom-line();
+    @include box-field-elements.bottom-line();
 }
 
 .helpText,
 .validationText {
-  @include foundation.help-text();
+    @include foundation.help-text();
 }
 
 .isRootRequired .label {
-  @include foundation.label-required();
+    @include foundation.label-required();
 }
 
 // Variants
 .rootVariantFilled {
-  @include variants.visual(box, $variant: filled, $has-caret: true);
+    @include variants.visual(box, $variant: filled, $has-caret: true);
 }
 
 .rootVariantOutline {
-  @include variants.visual(box, $variant: outline, $has-caret: true);
+    @include variants.visual(box, $variant: outline, $has-caret: true);
 }
 
 // States
 .isRootStateInvalid {
-  @include variants.validation(invalid);
+    @include variants.validation(invalid);
 }
 
 .isRootStateValid {
-  @include variants.validation(valid);
+    @include variants.validation(valid);
 }
 
 .isRootStateWarning {
-  @include variants.validation(warning);
+    @include variants.validation(warning);
 }
 
 // Invisible label
 .isLabelHidden {
-  @include accessibility.hide-text();
+    @include accessibility.hide-text();
 }
 
 // Layouts
 .rootLayoutVertical,
 .rootLayoutHorizontal {
-  @include box-field-layout.vertical();
+    @include box-field-layout.vertical();
 }
 
 .rootLayoutHorizontal {
-  @include box-field-layout.horizontal();
+    @include box-field-layout.horizontal();
 }
 
 .isRootFullWidth {
-  @include box-field-layout.full-width();
+    @include box-field-layout.full-width();
 }
 
 .isRootInFormLayout {
-  @include box-field-layout.in-form-layout();
+    @include box-field-layout.in-form-layout();
 }
 
 // Sizes
 .rootSizeSmall {
-  @include box-field-sizes.size(small);
+    @include box-field-sizes.size(small);
 }
 
 .rootSizeMedium {
-  @include box-field-sizes.size(medium);
+    @include box-field-sizes.size(medium);
 }
 
 .rootSizeLarge {
-  @include box-field-sizes.size(large);
+    @include box-field-sizes.size(large);
 }

package/src/lib/components/Table/README.mdx

@@ -77,7 +77,7 @@ See [API](#api) for all available options.
 
 - Tables are **good for displaying complex tabular data.** For simpler data sets
   or even plain key-value pairs, consider using the
-  [List](/components/list) component.
+  [Grid](/components/grid) component.
 
 - Tables make **lots of information easier to scan and compare.** If you have
   fewer sections and want to emphasize each group more, consider using