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

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,

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/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}

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/Table.scss

@@ -1,59 +1,52 @@
-@use '../../styles/tools/transition';
-@use 'settings';
-
-// Ignore pascalCase values of `composes` property:
-// stylelint-disable value-keyword-case
+@use "../../styles/tools/transition";
+@use "settings";
 
 .table {
-  width: 100%;
-  border-collapse: collapse;
+    width: 100%;
+    border-collapse: collapse;
 }
 
-.tableRow {
-  @include transition.add((background-color));
+.tableRow,
+.tableHeadRow {
+    @include transition.add((background-color));
+}
 
-  background-color: settings.$background-color;
+.tableRow {
+    background-color: settings.$background-color;
 
-  &:hover {
-    background-color: settings.$hover-background-color;
-  }
+    &:hover {
+        background-color: settings.$hover-background-color;
+    }
 }
 
 .tableHeadRow {
-  composes: tableRow;
-  background-color: settings.$head-background-color;
-
-  &:hover {
     background-color: settings.$head-background-color;
-  }
-}
-
-.tableCell {
-  padding: settings.$cell-padding-y settings.$cell-padding-x;
-  text-align: left;
-  border-bottom: settings.$border-width solid settings.$border-color;
-}
 
-.tableHeadCell {
-  composes: tableCell;
-  font-weight: settings.$head-font-weight;
-  border-bottom-width: 2px;
+    &:hover {
+        background-color: settings.$head-background-color;
+    }
 }
 
+.tableCell,
+.tableHeadCell,
 .isTableCellSortingActive,
 .isTableHeadCellSortingActive {
-  background-color: settings.$sorted-background-color;
+    padding: settings.$cell-padding-y settings.$cell-padding-x;
+    text-align: left;
+    border-bottom: settings.$border-width solid settings.$border-color;
 }
 
-.isTableCellSortingActive {
-  composes: tableCell;
+.tableHeadCell {
+    font-weight: settings.$head-font-weight;
+    border-bottom-width: 2px;
 }
 
+.isTableCellSortingActive,
 .isTableHeadCellSortingActive {
-  composes: tableHeadCell;
+    background-color: settings.$sorted-background-color;
 }
 
 .sortButton {
-  display: inline-block;
-  margin-right: settings.$cell-padding-x;
+    display: inline-block;
+    margin-right: settings.$cell-padding-x;
 }

package/src/lib/components/Table/_settings.scss

@@ -1,8 +1,8 @@
-@use 'sass:map';
-@use '../../styles/theme/borders';
-@use '../../styles/theme/colors';
-@use '../../styles/theme/typography';
-@use '../../styles/tools/spacing';
+@use "sass:map";
+@use "../../styles/theme/borders";
+@use "../../styles/theme/colors";
+@use "../../styles/theme/typography";
+@use "../../styles/tools/spacing";
 
 $cell-padding-x: spacing.of(3);
 $cell-padding-y: spacing.of(1);