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

package/src/lib/components/Table/Table.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import Button from '../Button';
 import styles from './Table.scss';
 
@@ -145,6 +145,6 @@ Table.propTypes = {
   }),
 };
 
-export const TableWithContext = withProviderContext(Table, 'Table');
+export const TableWithGlobalProps = withGlobalProps(Table, 'Table');
 
-export default TableWithContext;
+export default TableWithGlobalProps;

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/Tabs.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import styles from './Tabs.scss';
 
 export const Tabs = ({
@@ -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`
@@ -34,6 +33,6 @@ Tabs.propTypes = {
   id: PropTypes.string,
 };
 
-export const TabsWithContext = withProviderContext(Tabs, 'Tabs');
+export const TabsWithGlobalProps = withGlobalProps(Tabs, 'Tabs');
 
-export default TabsWithContext;
+export default TabsWithGlobalProps;

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 { withGlobalProps } 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}
   >
@@ -82,6 +83,6 @@ TabsItem.propTypes = {
   onClick: PropTypes.func,
 };
 
-export const TabsItemWithContext = withProviderContext(TabsItem, 'TabsItem');
+export const TabsItemWithGlobalProps = withGlobalProps(TabsItem, 'TabsItem');
 
-export default TabsItemWithContext;
+export default TabsItemWithGlobalProps;

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}
             />
@@ -154,7 +154,7 @@ will override automatic break point selection in `auto` mode when present.
               <span id="word-wrapping-options-label">Word wrapping:</span>
             </ToolbarItem>
             <ToolbarItem>
-              <ButtonGroup aria-labelledby="#word-wrapping-options-label">
+              <ButtonGroup aria-labelledby="word-wrapping-options-label">
                 <Button
                   color={wordWrapping === 'normal' ? 'dark' : 'primary'}
                   label="normal"
@@ -178,7 +178,7 @@ will override automatic break point selection in `auto` mode when present.
               <span id="hyphens-options-label">Hyphens:</span>
             </ToolbarItem>
             <ToolbarItem>
-              <ButtonGroup aria-labelledby="#hyphens-options-label">
+              <ButtonGroup aria-labelledby="hyphens-options-label">
                 <Button
                   color={hyphens === 'none' ? 'dark' : 'primary'}
                   label="none"

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 { withGlobalProps } from '../../provider';
+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>
@@ -68,6 +75,6 @@ Text.propTypes = {
   wordWrapping: PropTypes.oneOf(['normal', 'long-words', 'anywhere']),
 };
 
-export const TextWithContext = withProviderContext(Text, 'Text');
+export const TextWithGlobalProps = withGlobalProps(Text, 'Text');
 
-export default TextWithContext;
+export default TextWithGlobalProps;

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

package/src/lib/components/Text/_helpers/getRootClampClassName.js

@@ -0,0 +1,11 @@
+export const getRootClampClassName = (lines, styles) => {
+  if (lines === 1) {
+    return styles.rootClampSingleLine;
+  }
+
+  if (lines > 1) {
+    return styles.rootClampMultiLine;
+  }
+
+  return null;
+};

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

@@ -350,7 +350,7 @@ It's possible to disable 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 `textarea` HTML element. This enables making the component
+passed to the `<textarea>` HTML element. This enables making the component
 interactive and helps improve its [accessibility](#forwarding-html-attributes).
 
 <Props table of={TextArea} />