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

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,16 +77,16 @@ 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/layout/list) component.
+  [List](/components/list) 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
-  [Cards](/components/ui/card).
+  [Cards](/components/card).
 
 ## Responsive Tables
 
 The easiest way to make tables responsive is to wrap them with the
-[ScrollView](/components/ui/scroll-view) component in the horizontal mode.
+[ScrollView](/components/scroll-view) component in the horizontal mode.
 
 <Playground>
   <ScrollView direction="horizontal" shadowSize="100px">

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);

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

@@ -119,7 +119,7 @@ for each tab and don't leave some tabs without an icon.
 
 If you have more than a few tabs, you may need to make sure they will be all
 accessible no matter the space they have around. Wrap Tabs into
-[ScrollView](/components/ui/scroll-view) to make them scrollable if necessary.
+[ScrollView](/components/scroll-view) to make them scrollable if necessary.
 
 <Playground>
   {() => {

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

@@ -18,7 +18,6 @@ export const Tabs = ({
 );
 
 Tabs.defaultProps = {
-  children: null,
   id: undefined,
 };
 
@@ -26,7 +25,7 @@ Tabs.propTypes = {
   /**
    * Nested `TabsItem` elements.
    */
-  children: PropTypes.node,
+  children: PropTypes.node.isRequired,
   /**
    * ID of the root HTML element. It also serves as base for nested element:
    * * `<ID>__list`

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/README.mdx

@@ -81,7 +81,7 @@ appended by an ellipsis (`…`).
               label="Number of lines"
               min={1}
               max={100}
-              onChange={(e) => setLines(e.target.value)}
+              onChange={(e) => setLines(Number(e.target.value))}
               type="number"
               value={lines}
             />

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

@@ -1,8 +1,11 @@
 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 { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { getRootClampClassName } from './_helpers/getRootClampClassName';
+import { getRootHyphensClassName } from './_helpers/getRootHyphensClassName';
+import { getRootWordWrappingClassName } from './_helpers/getRootWordWrappingClassName';
 import styles from './Text.scss';
 
 export const Text = ({
@@ -13,19 +16,23 @@ export const Text = ({
   lines,
   wordWrapping,
 }) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
+
   const HtmlElement = blockLevel ? 'div' : 'span';
 
   return (
     <HtmlElement
       className={(hyphens !== 'none' || lines > 0 || wordWrapping !== 'normal')
-        ? [
-          (lines > 0) ? styles.rootClampLines : '',
+        ? classNames(
+          getRootClampClassName(lines, styles),
           getRootHyphensClassName(hyphens, styles),
           getRootWordWrappingClassName(wordWrapping, styles),
-        ].join(' ')
+        )
         : undefined}
       id={id}
-      style={(lines > 0) ? { '--rui-custom-lines': lines } : undefined}
+      style={(lines > 1) ? { '--rui-custom-lines': lines } : undefined}
     >
       {children}
     </HtmlElement>

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

@@ -1,30 +1,40 @@
 // 1. `word-break: break-word` is deprecated in favour of `overflow-wrap: anywhere`, but it's still
 //     required for Safari.
 //     https://caniuse.com/mdn-css_properties_overflow-wrap_anywhere
+//
+// 2. Different approaches are used for single and multiline texts because the latter approach
+//    doesn't always work for single-line texts.
 
-/* 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;
+.rootClampSingleLine {
+    display: block; // 2.
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
-/* stylelint-enable property-no-vendor-prefix, value-no-vendor-prefix */
+
+// stylelint-disable property-no-vendor-prefix, value-no-vendor-prefix
+.rootClampMultiLine {
+    display: -webkit-box; // 2.
+    -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
 
 .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;
 }