@react-ui-org/react-ui 0.44.0 → 0.46.0

package/src/lib/components/Radio/Radio.scss

@@ -1,78 +1,78 @@
-@use '../../styles/tools/form-fields/box-field-elements';
-@use '../../styles/tools/form-fields/box-field-layout';
-@use '../../styles/tools/form-fields/foundation';
-@use '../../styles/tools/form-fields/inline-field-elements';
-@use '../../styles/tools/form-fields/inline-field-layout';
-@use '../../styles/tools/form-fields/variants';
-@use '../../styles/tools/accessibility';
-@use '../../styles/tools/reset';
-@use '../../styles/tools/spacing';
+@use "../../styles/tools/form-fields/box-field-elements";
+@use "../../styles/tools/form-fields/box-field-layout";
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/inline-field-elements";
+@use "../../styles/tools/form-fields/inline-field-layout";
+@use "../../styles/tools/form-fields/variants";
+@use "../../styles/tools/accessibility";
+@use "../../styles/tools/reset";
+@use "../../styles/tools/spacing";
 
 // Foundation
 .root {
-  @include foundation.root();
-  @include variants.visual(check);
+    @include foundation.root();
+    @include variants.visual(check);
 }
 
 .label,
 .optionLabel {
-  @include foundation.label();
+    @include foundation.label();
 }
 
 .list {
-  @include reset.list();
+    @include reset.list();
 }
 
 .option {
-  @include inline-field-layout.field();
-  @include inline-field-elements.min-tap-target($type: radio);
+    @include inline-field-layout.field($type: radio);
+    @include inline-field-elements.min-tap-target($type: radio);
 }
 
 .input {
-  @include inline-field-elements.check-input($type: radio);
+    @include inline-field-elements.check-input($type: radio);
 }
 
 .helpText,
 .validationText {
-  @include foundation.help-text();
+    @include foundation.help-text();
 }
 
 .isRootRequired .label {
-  @include foundation.label-required();
+    @include foundation.label-required();
 }
 
 // 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($has-list: true);
+    @include box-field-layout.vertical($has-list: true);
 }
 
 .rootLayoutHorizontal {
-  @include box-field-layout.horizontal($has-min-tap-target: true);
+    @include box-field-layout.horizontal($has-min-tap-target: true);
 }
 
 .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();
 }

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

@@ -8,6 +8,9 @@ route: /components/scroll-view
 
 ScrollView makes long content scrollable.
 
+👉 Please note that HTML is rendered even when no children are provided.
+This is needed to allow the autoscroll feature to work.
+
 import {
   Playground,
   Props,
@@ -358,7 +361,7 @@ Aside from setting a custom shadow color and size, you can entirely customize
 the scrolling shadows with `background` or `box-shadow` CSS properties.
 
 The following example demonstrates exactly the same custom scrolling shadows as
-we use in the [Modal](/components/ui/modal#scrolling-long-content) component.
+we use in the [Modal](/components/modal#scrolling-long-content) component.
 
 <Playground>
   <Placeholder height="200px">

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

@@ -5,10 +5,11 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { useLoadResize } from '../../hooks/useLoadResizeHook';
-import { useScrollPosition } from '../../hooks/useScrollPositionHook';
 import { withProviderContext } from '../../provider';
-import { getElementsPositionDifference } from '../../services/elementPositionService';
+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
@@ -197,13 +198,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,
@@ -271,6 +272,7 @@ ScrollView.defaultProps = {
   arrowsColor: undefined,
   arrowsScrollStep: 200,
   autoScroll: 'off',
+  children: null,
   customEndShadowStyle: {},
   customNextArrow: null,
   customPrevArrow: null,
@@ -315,7 +317,7 @@ ScrollView.propTypes = {
   /**
    * Content to be scrollable.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   /**
    * Custom CSS to replace the default end scrolling shadow.
    */

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

@@ -56,13 +56,13 @@ See [API](#api) for all available options.
 ## General Guidelines
 
 - Use SelectField for **many options**. For sets of just a few options
-  (say 3 at maximum) consider using the [Radio](/components/ui/radio) component.
+  (say 3 at maximum) consider using the [Radio](/components/radio) component.
   This will help keep your UI clean and uncluttered and prevent your users from
   being overwhelmed by too many options.
 
 - **Don't use for boolean** (true/false) selection or to toggle things on and
-  off. [CheckboxField](/components/ui/checkbox-field) and
-  [Toggle](/components/ui/toggle) are more suitable for such cases.
+  off. [CheckboxField](/components/checkbox-field) and
+  [Toggle](/components/toggle) are more suitable for such cases.
 
 - Use **short and descriptive labels**, ideally nouns rather than seemingly
   polite phrases like _Please select your favourite fruit_. Short labels will
@@ -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 { 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}