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

package/src/lib/components/Tabs/Tabs.scss

@@ -1,28 +1,28 @@
 // 1. Decorative bottom border.
 
-@use '../../styles/tools/reset';
-@use 'theme';
+@use "../../styles/tools/reset";
+@use "theme";
 
 .list {
-  @include reset.list();
+    @include reset.list();
 
-  position: relative;
-  display: inline-flex;
-  min-width: 100%;
-  padding-right: theme.$padding-x;
-  padding-left: theme.$padding-x;
-  overflow-y: hidden;
-  white-space: nowrap;
+    position: relative;
+    display: inline-flex;
+    min-width: 100%;
+    padding-right: theme.$padding-x;
+    padding-left: theme.$padding-x;
+    overflow-y: hidden;
+    white-space: nowrap;
 
-  // 1.
-  &::after {
-    content: '';
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
-    height: theme.$border-bottom-width;
-    background-color: theme.$border-bottom-color;
-  }
+    // 1.
+    &::after {
+        content: "";
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1;
+        height: theme.$border-bottom-width;
+        background-color: theme.$border-bottom-color;
+    }
 }

package/src/lib/components/Tabs/TabsItem.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
+import { classNames } from '../../utils/classNames';
 import styles from './TabsItem.scss';
 
 export const TabsItem = ({
@@ -13,10 +14,10 @@ export const TabsItem = ({
   onClick,
 }) => (
   <li
-    className={[
+    className={classNames(
       styles.root,
-      isActive ? styles.isRootActive : null,
-    ].join(' ')}
+      isActive && styles.isRootActive,
+    )}
     id={id}
     key={href}
   >

package/src/lib/components/Tabs/TabsItem.scss

@@ -1,118 +1,118 @@
 // 1. Keep inactive items under Tabs' decorative bottom border and pop active ones above it.
 
-@use '../../styles/tools/breakpoint';
-@use '../../styles/tools/reset';
-@use '../../styles/tools/transition';
-@use 'theme';
+@use "../../styles/tools/breakpoint";
+@use "../../styles/tools/reset";
+@use "../../styles/tools/transition";
+@use "theme";
 
 .root {
-  @include transition.add(transform);
-
-  position: relative; // 1.
-  z-index: 1; // 1.
-  flex: none;
-  padding-top: calc(-1 * #{theme.$item-active-shift-y});
-  margin-bottom: theme.$item-active-shift-y;
-  transform: translateY(0);
-
-  &:hover,
-  &:focus-within {
-    transform: translateY(theme.$item-hover-shift-y);
-  }
-
-  &:not(:last-child) {
-    margin-right: theme.$gap-xs;
-  }
+    @include transition.add(transform);
+
+    position: relative; // 1.
+    z-index: 1; // 1.
+    flex: none;
+    padding-top: calc(-1 * #{theme.$item-active-shift-y});
+    margin-bottom: theme.$item-active-shift-y;
+    transform: translateY(0);
+
+    &:hover,
+    &:focus-within {
+        transform: translateY(theme.$item-hover-shift-y);
+    }
 
-  @include breakpoint.up(sm) {
     &:not(:last-child) {
-      margin-right: theme.$gap-sm;
+        margin-right: theme.$gap-xs;
     }
-  }
 
-  @include breakpoint.up(md) {
-    &:not(:last-child) {
-      margin-right: theme.$gap-md;
+    @include breakpoint.up(sm) {
+        &:not(:last-child) {
+            margin-right: theme.$gap-sm;
+        }
+    }
+
+    @include breakpoint.up(md) {
+        &:not(:last-child) {
+            margin-right: theme.$gap-md;
+        }
     }
-  }
 }
 
 .link {
-  @include reset.link();
-  @include transition.add((color, border-color, background-color, box-shadow));
-
-  display: block;
-  padding: theme.$item-padding-xs;
-  font-weight: theme.$item-font-weight;
-  line-height: 1;
-  text-decoration: none;
-  color: theme.$item-color;
-  border-width: theme.$item-border-width;
-  border-style: solid;
-  border-color: theme.$item-border-color;
-  border-top-left-radius: theme.$item-border-radius;
-  border-top-right-radius: theme.$item-border-radius;
-  background-color: theme.$item-background-color;
-  box-shadow: theme.$item-box-shadow;
-
-  &:hover,
-  &:focus {
-    font-weight: theme.$item-hover-font-weight;
-    color: theme.$item-hover-color;
-    border-width: theme.$item-hover-border-width;
-    border-color: theme.$item-hover-border-color;
-    background-color: theme.$item-hover-background-color;
-    box-shadow: theme.$item-hover-box-shadow;
-  }
-
-  @include breakpoint.up(sm) {
-    padding: theme.$item-padding-sm;
-  }
-
-  @include breakpoint.up(md) {
-    padding: theme.$item-padding-md;
-  }
+    @include reset.link();
+    @include transition.add((color, border-color, background-color, box-shadow));
+
+    display: block;
+    padding: theme.$item-padding-xs;
+    font-weight: theme.$item-font-weight;
+    line-height: 1;
+    text-decoration: none;
+    color: theme.$item-color;
+    border-width: theme.$item-border-width;
+    border-style: solid;
+    border-color: theme.$item-border-color;
+    border-top-left-radius: theme.$item-border-radius;
+    border-top-right-radius: theme.$item-border-radius;
+    background-color: theme.$item-background-color;
+    box-shadow: theme.$item-box-shadow;
+
+    &:hover,
+    &:focus {
+        font-weight: theme.$item-hover-font-weight;
+        color: theme.$item-hover-color;
+        border-width: theme.$item-hover-border-width;
+        border-color: theme.$item-hover-border-color;
+        background-color: theme.$item-hover-background-color;
+        box-shadow: theme.$item-hover-box-shadow;
+    }
+
+    @include breakpoint.up(sm) {
+        padding: theme.$item-padding-sm;
+    }
+
+    @include breakpoint.up(md) {
+        padding: theme.$item-padding-md;
+    }
 }
 
 .linkContent {
-  @include transition.add(transform);
+    @include transition.add(transform);
 
-  display: flex;
-  align-items: center;
-  transform: translateY(0);
+    display: flex;
+    align-items: center;
+    transform: translateY(0);
 }
 
 .label:not(:first-child) {
-  margin-left: theme.$item-icon-gap;
+    margin-left: theme.$item-icon-gap;
 }
 
 .label:not(:last-child) {
-  margin-right: theme.$item-icon-gap;
+    margin-right: theme.$item-icon-gap;
 }
 
 .isRootActive,
 .isRootActive:hover,
 .isRootActive:focus-within {
-  z-index: 2; // 1.
-  transform: translateY(theme.$item-active-shift-y);
+    z-index: 2; // 1.
+    transform: translateY(theme.$item-active-shift-y);
 }
 
 .isRootActive .link {
-  font-weight: theme.$item-active-font-weight;
-  color: theme.$item-active-color;
-  border-width: theme.$item-active-border-width;
-  border-color: theme.$item-active-border-color;
-  background-color: theme.$item-active-background-color;
-  box-shadow: theme.$item-active-box-shadow;
+    font-weight: theme.$item-active-font-weight;
+    color: theme.$item-active-color;
+    border-width: theme.$item-active-border-width;
+    border-color: theme.$item-active-border-color;
+    background-color: theme.$item-active-background-color;
+    box-shadow: theme.$item-active-box-shadow;
 }
 
 .link:hover .linkContent,
 .link:focus .linkContent {
-  transform: translateY(theme.$item-hover-label-shift-y);
+    transform: translateY(theme.$item-hover-label-shift-y);
 }
 
 .isRootActive .link .linkContent,
 .isRootActive .link:hover .linkContent,
 .isRootActive .link:focus .linkContent {
-  transform: translateY(theme.$item-active-label-shift-y);
+    transform: translateY(theme.$item-active-label-shift-y);
 }

package/src/lib/components/Text/Text.jsx

@@ -1,8 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
-import getRootHyphensClassName from './helpers/getRootHyphensClassName';
-import getRootWordWrappingClassName from './helpers/getRootWordWrappingClassName';
+import { classNames } from '../../utils/classNames';
+import { getRootHyphensClassName } from './_helpers/getRootHyphensClassName';
+import { getRootWordWrappingClassName } from './_helpers/getRootWordWrappingClassName';
 import styles from './Text.scss';
 
 export const Text = ({
@@ -18,11 +19,11 @@ export const Text = ({
   return (
     <HtmlElement
       className={(hyphens !== 'none' || lines > 0 || wordWrapping !== 'normal')
-        ? [
+        ? classNames(
           (lines > 0) ? styles.rootClampLines : '',
           getRootHyphensClassName(hyphens, styles),
           getRootWordWrappingClassName(wordWrapping, styles),
-        ].join(' ')
+        )
         : undefined}
       id={id}
       style={(lines > 0) ? { '--rui-custom-lines': lines } : undefined}

package/src/lib/components/Text/Text.scss

@@ -2,29 +2,29 @@
 //     required for Safari.
 //     https://caniuse.com/mdn-css_properties_overflow-wrap_anywhere
 
-/* stylelint-disable property-no-vendor-prefix, value-no-vendor-prefix */
+// stylelint-disable property-no-vendor-prefix, value-no-vendor-prefix
 .rootClampLines {
-  display: -webkit-box;
-  -webkit-line-clamp: var(--rui-custom-lines);
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: var(--rui-custom-lines);
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
-/* stylelint-enable property-no-vendor-prefix, value-no-vendor-prefix */
+// stylelint-enable property-no-vendor-prefix, value-no-vendor-prefix
 
 .rootHyphensAuto {
-  hyphens: auto;
+    hyphens: auto;
 }
 
 .rootHyphensManual {
-  hyphens: manual;
+    hyphens: manual;
 }
 
 .rootWordWrappingAnywhere {
-  word-break: break-all;
+    word-break: break-all;
 }
 
 .rootWordWrappingLongWords {
-  word-break: break-word; // 1.
-  overflow-wrap: anywhere;
+    word-break: break-word; // 1.
+    overflow-wrap: anywhere;
 }

package/src/lib/components/Text/{helpers → _helpers}/getRootHyphensClassName.js

@@ -1,4 +1,4 @@
-export default (hyphens, styles) => {
+export const getRootHyphensClassName = (hyphens, styles) => {
   if (hyphens === 'auto') {
     return styles.rootHyphensAuto;
   }

package/src/lib/components/Text/{helpers → _helpers}/getRootWordWrappingClassName.js

@@ -1,4 +1,4 @@
-export default (wordWrapping, styles) => {
+export const getRootWordWrappingClassName = (wordWrapping, styles) => {
   if (wordWrapping === 'anywhere') {
     return styles.rootWordWrappingAnywhere;
   }

package/src/lib/components/TextArea/TextArea.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 './TextArea.scss';
@@ -33,27 +34,27 @@ export const TextArea = ({
 
   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/TextArea/TextArea.scss

@@ -1,95 +1,95 @@
-@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-textarea();
+    @include box-field-elements.input();
+    @include box-field-elements.input-textarea();
 }
 
 .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();
 }
 
 // Visual variants
 .rootVariantFilled {
-  @include variants.visual(box, $variant: filled);
+    @include variants.visual(box, $variant: filled);
 }
 
 .rootVariantOutline {
-  @include variants.visual(box, $variant: outline);
+    @include variants.visual(box, $variant: outline);
 }
 
 // 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, $is-multiline: true);
+    @include box-field-sizes.size(small, $is-multiline: true);
 }
 
 .rootSizeMedium {
-  @include box-field-sizes.size(medium, $is-multiline: true);
+    @include box-field-sizes.size(medium, $is-multiline: true);
 }
 
 .rootSizeLarge {
-  @include box-field-sizes.size(large, $is-multiline: true);
+    @include box-field-sizes.size(large, $is-multiline: true);
 }

package/src/lib/components/TextField/TextField.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 './TextField.scss';
@@ -36,30 +37,30 @@ export const TextField = ({
 
   return (
     <label
-      className={[
+      className={classNames(
         styles.root,
-        fullWidth ? styles.isRootFullWidth : '',
-        hasSmallInput ? styles.hasRootSmallInput : '',
-        inputSize ? styles.hasRootCustomInputSize : '',
-        context ? styles.isRootInFormLayout : '',
+        fullWidth && styles.isRootFullWidth,
+        hasSmallInput && styles.hasRootSmallInput,
+        inputSize && styles.hasRootCustomInputSize,
+        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`}
       {...(inputSize ? { style: { '--rui-custom-input-size': inputSize } } : {})}
     >
       <div
-        className={[
+        className={classNames(
           styles.label,
-          isLabelVisible ? '' : styles.isLabelHidden,
-        ].join(' ')}
+          !isLabelVisible && styles.isLabelHidden,
+        )}
         id={id && `${id}__labelText`}
       >
         {label}