@react-ui-org/react-ui 0.48.0 → 0.50.0

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

@@ -1,110 +1,52 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
-import { Button } from '../..';
+import { transferProps } from '../_helpers/transferProps';
+import { TableHeaderCell } from './_components/TableHeaderCell';
+import { TableBodyCell } from './_components/TableBodyCell';
 import styles from './Table.scss';
 
-export class Table extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.renderHeaderCell = this.renderHeaderCell.bind(this);
-
-    this.sortCellStyle = {
-      backgroundColor: 'lightgray',
-    };
-  }
-
-  renderHeaderCell(column) {
-    const {
-      id,
-      sort,
-    } = this.props;
-    const sortDirection = sort && column.name === sort.column ? sort.direction : 'asc';
-    const isSortingActive = sort && column.name === sort.column;
-
-    return (
-      <th
-        className={isSortingActive ? styles.isTableHeadCellSortingActive : styles.tableHeadCell}
-        key={column.name}
-        {...(id && { id: `${id}__headerCell__${column.name}` })}
-      >
-        {sort && column.isSortable && (
-          <div className={styles.sortButton}>
-            <Button
-              beforeLabel={
-                sortDirection === 'asc'
-                  ? sort.ascendingIcon
-                  : sort.descendingIcon
-              }
-              label={sortDirection}
-              labelVisibility="none"
-              onClick={() => sort.onClick(column.name, sortDirection)}
-              priority="flat"
-              {...(id && { id: `${id}__headerCell__${column.name}__sortButton` })}
+export const Table = ({
+  columns,
+  id,
+  rows,
+  sort,
+  ...restProps
+}) => (
+  <table
+    {...transferProps(restProps)}
+    className={styles.table}
+    id={id}
+  >
+    <thead>
+      <tr className={styles.tableHeadRow}>
+        {columns.map((column) => (
+          <TableHeaderCell
+            column={column}
+            key={column.name}
+            sort={sort}
+            {...(id && { id: `${id}__headerCell__${column.name}` })}
+          />
+        ))}
+      </tr>
+    </thead>
+    <tbody>
+      {rows.map((row) => (
+        <tr key={row.id} className={styles.tableRow}>
+          {columns.map((column) => (
+            <TableBodyCell
+              format={column.format}
+              isSortingActive={sort && column.name === sort.column}
+              key={`${row.id}-${column.name}`}
+              value={row[column.name]}
+              {...(id && { id: `${id}__bodyCell__${column.name}__${row.id}` })}
             />
-          </div>
-        )}
-        {column.label}
-      </th>
-    );
-  }
-
-  renderBodyCell(column, row) {
-    const {
-      id,
-      sort,
-    } = this.props;
-    const isSortingActive = sort && column.name === sort.column;
-
-    if (column.format) {
-      return (
-        <td
-          className={isSortingActive ? styles.isTableCellSortingActive : styles.tableCell}
-          key={`${row.id}-${column.name}`}
-          {...(id && { id: `${id}__bodyCell__${column.name}__${row.id}` })}
-        >
-          {column.format(row)}
-        </td>
-      );
-    }
-
-    return (
-      <td
-        className={isSortingActive ? styles.isTableCellSortingActive : styles.tableCell}
-        key={`${row.id}-${column.name}`}
-        {...(id && { id: `${id}__bodyCell__${column.name}__${row.id}` })}
-      >
-        {row[column.name]}
-      </td>
-    );
-  }
-
-  render() {
-    const {
-      columns,
-      id,
-      rows,
-    } = this.props;
-
-    return (
-      <table id={id} className={styles.table}>
-        <thead>
-          <tr className={styles.tableHeadRow}>
-            {columns.map(this.renderHeaderCell)}
-          </tr>
-        </thead>
-        <tbody>
-          {rows.map((row) => (
-            <tr key={row.id} className={styles.tableRow}>
-              {columns.map((column) => this.renderBodyCell(column, row))}
-            </tr>
           ))}
-        </tbody>
-      </table>
-    );
-  }
-}
+        </tr>
+      ))}
+    </tbody>
+  </table>
+);
 
 Table.defaultProps = {
   id: undefined,
@@ -123,7 +65,7 @@ Table.propTypes = {
     name: PropTypes.string.isRequired,
   })).isRequired,
   /**
-   * ID of the root HTML element. It also serves as base fo nested elements:
+   * ID of the root HTML element. It also serves as base for nested elements:
    * * `<ID>__headerCell__<COLUMN_NAME>`
    * * `<ID>__headerCell__<COLUMN_NAME>__sortButton`
    * * `<ID>__bodyCell__<COLUMN_NAME>__<ROW_ID>`

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

@@ -26,27 +26,3 @@
         background-color: settings.$head-background-color;
     }
 }
-
-.tableCell,
-.tableHeadCell,
-.isTableCellSortingActive,
-.isTableHeadCellSortingActive {
-    padding: settings.$cell-padding-y settings.$cell-padding-x;
-    text-align: left;
-    border-bottom: settings.$border-width solid settings.$border-color;
-}
-
-.tableHeadCell {
-    font-weight: settings.$head-font-weight;
-    border-bottom-width: 2px;
-}
-
-.isTableCellSortingActive,
-.isTableHeadCellSortingActive {
-    background-color: settings.$sorted-background-color;
-}
-
-.sortButton {
-    display: inline-block;
-    margin-right: settings.$cell-padding-x;
-}

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

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styles from '../TableCell.scss';
+
+export const TableBodyCell = ({
+  format,
+  id,
+  isSortingActive,
+  value,
+}) => (
+  <td
+    className={isSortingActive ? styles.isTableCellSortingActive : styles.tableCell}
+    id={id}
+  >
+    {format ? format(value) : value}
+  </td>
+);
+
+TableBodyCell.defaultProps = {
+  format: undefined,
+  id: undefined,
+  isSortingActive: false,
+  value: null,
+};
+
+TableBodyCell.propTypes = {
+  /**
+   * Function that can be used to process the column data before displaying them.
+   */
+  format: PropTypes.func,
+  /**
+   * ID of the HTML <td> element:
+   */
+  id: PropTypes.string,
+  /**
+   * If `true`, cell is gray marked as sorted.
+   */
+  isSortingActive: PropTypes.bool,
+  /**
+   * Cell value.
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  value: PropTypes.any,
+};
+
+export default TableBodyCell;

package/src/lib/components/Table/_components/TableBodyCell/index.js

@@ -0,0 +1 @@
+export { default as TableBodyCell } from './TableBodyCell';

package/src/lib/components/Table/_components/TableCell.scss

@@ -0,0 +1,25 @@
+@use "../settings";
+
+.tableCell,
+.tableHeadCell,
+.isTableCellSortingActive,
+.isTableHeadCellSortingActive {
+    padding: settings.$cell-padding-y settings.$cell-padding-x;
+    text-align: left;
+    border-bottom: settings.$border-width solid settings.$border-color;
+}
+
+.tableHeadCell {
+    font-weight: settings.$head-font-weight;
+    border-bottom-width: 2px;
+}
+
+.isTableCellSortingActive,
+.isTableHeadCellSortingActive {
+    background-color: settings.$sorted-background-color;
+}
+
+.sortButton {
+    display: inline-block;
+    margin-right: settings.$cell-padding-x;
+}

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

@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Button } from '../../../..';
+import styles from '../TableCell.scss';
+
+export const TableHeaderCell = ({
+  column,
+  id,
+  sort,
+}) => {
+  const sortDirection = sort && column.name === sort.column ? sort.direction : 'asc';
+  const isSortingActive = sort && column.name === sort.column;
+
+  return (
+    <th
+      className={isSortingActive ? styles.isTableHeadCellSortingActive : styles.tableHeadCell}
+      id={id}
+    >
+      {sort && column.isSortable && (
+        <div className={styles.sortButton}>
+          <Button
+            beforeLabel={
+              sortDirection === 'asc'
+                ? sort.ascendingIcon
+                : sort.descendingIcon
+            }
+            id={id && `${id}__sortButton`}
+            label={sortDirection}
+            labelVisibility="none"
+            onClick={() => sort.onClick(column.name, sortDirection)}
+            priority="flat"
+          />
+        </div>
+      )}
+      {column.label}
+    </th>
+  );
+};
+
+TableHeaderCell.defaultProps = {
+  id: undefined,
+  sort: null,
+};
+
+TableHeaderCell.propTypes = {
+  /**
+   * Table data column, optionally sortable. The `format` function can be used to process the
+   * column data before displaying them.
+   */
+  column: PropTypes.shape({
+    isSortable: PropTypes.bool,
+    label: PropTypes.string,
+    name: PropTypes.string.isRequired,
+  }).isRequired,
+  /**
+   * ID of the HTML <th> element and nested button for sorting.
+   */
+  id: PropTypes.string,
+  /**
+   * Sorting configuration required to make columns sortable.
+   */
+  sort: PropTypes.shape({
+    ascendingIcon: PropTypes.node.isRequired,
+    column: PropTypes.string.isRequired,
+    descendingIcon: PropTypes.node.isRequired,
+    direction: PropTypes.oneOf(['asc', 'desc']).isRequired,
+    onClick: PropTypes.func.isRequired,
+  }),
+};
+
+export default TableHeaderCell;

package/src/lib/components/Table/_components/TableHeaderCell/index.js

@@ -0,0 +1 @@
+export { default as TableHeaderCell } from './TableHeaderCell';

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

@@ -171,6 +171,18 @@ accessible no matter the space they have around. Wrap Tabs into
   }}
 </Playground>
 
+## Forwarding HTML Attributes
+
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or **any HTML attribute you like.** All
+attributes that don't interfere with the API are forwarded to the `<nav>` HTML
+element in case of `Tabs` component and to the `<li>` HTML element in
+case of `TabsItem`. This enables making the component interactive and helps
+to improve its accessibility.
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[nav] and [li] element.
+
 ## API
 
 <Props table of={Tabs} />
@@ -220,3 +232,7 @@ Where:
 - `<PROPERTY>` is one of `font-weight`, `color`, `border-width`, `border-color`,
   `background-color`, `box-shadow`, `shift-y` (shifts vertically the whole
   item), or `label__shift-y` (tweaks vertical position of tab label).
+
+[React synthetic events]: https://reactjs.org/docs/events.html
+[nav]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav#attributes
+[li]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes

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

@@ -1,13 +1,18 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
 import styles from './Tabs.scss';
 
 export const Tabs = ({
   children,
   id,
+  ...restProps
 }) => (
-  <nav id={id}>
+  <nav
+    {...transferProps(restProps)}
+    id={id}
+  >
     <ul
       className={styles.list}
       id={id && `${id}__list`}

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

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import styles from './TabsItem.scss';
 
@@ -12,8 +13,10 @@ export const TabsItem = ({
   isActive,
   label,
   onClick,
+  ...restProps
 }) => (
   <li
+    {...transferProps(restProps)}
     className={classNames(
       styles.root,
       isActive && styles.isRootActive,

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

@@ -214,6 +214,22 @@ will override automatic break point selection in `auto` mode when present.
   }}
 </Playground>
 
+## Forwarding HTML Attributes
+
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or **any HTML attribute you like.** All
+attributes that don't interfere with the API are forwarded either to the
+`<span>` or to the `<div>` HTML element in case that `blockLevel` is set to
+`true`. This enables making the component interactive and helps to improve its
+accessibility.
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[span] and [div] element.
+
 ## API
 
 <Props table of={Text} />
+
+[React synthetic events]: https://reactjs.org/docs/events.html
+[span]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span#attributes
+[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes

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

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { getRootClampClassName } from './_helpers/getRootClampClassName';
@@ -12,9 +13,9 @@ export const Text = ({
   blockLevel,
   children,
   hyphens,
-  id,
   lines,
   wordWrapping,
+  ...restProps
 }) => {
   if (isChildrenEmpty(children)) {
     return null;
@@ -24,6 +25,7 @@ export const Text = ({
 
   return (
     <HtmlElement
+      {...transferProps(restProps)}
       className={(hyphens !== 'none' || lines > 0 || wordWrapping !== 'normal')
         ? classNames(
           getRootClampClassName(lines, styles),
@@ -31,7 +33,6 @@ export const Text = ({
           getRootWordWrappingClassName(wordWrapping, styles),
         )
         : undefined}
-      id={id}
       style={(lines > 1) ? { '--rui-custom-lines': lines } : undefined}
     >
       {children}
@@ -43,7 +44,6 @@ Text.defaultProps = {
   blockLevel: false,
   children: null,
   hyphens: 'none',
-  id: undefined,
   lines: undefined,
   wordWrapping: 'normal',
 };
@@ -61,10 +61,6 @@ Text.propTypes = {
    * Turn on hyphenation. Head to [Hyphens](#hyphens) to learn more.
    */
   hyphens: PropTypes.oneOf(['none', 'auto', 'manual']),
-  /**
-   * Optional ID of the root HTML element.
-   */
-  id: PropTypes.string,
   /**
    * Optional number of lines. If exceeded, the content is truncated and appended by an ellipsis (`…`).
    */

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

@@ -5,7 +5,7 @@
 // 2. Different approaches are used for single and multiline texts because the latter approach
 //    doesn't always work for single-line texts.
 
-.rootClampSingleLine {
+.isRootClampSingleLine {
     display: block; // 2.
     overflow: hidden;
     text-overflow: ellipsis;
@@ -13,7 +13,7 @@
 }
 
 // stylelint-disable property-no-vendor-prefix, value-no-vendor-prefix
-.rootClampMultiLine {
+.isRootClampMultiLine {
     display: -webkit-box; // 2.
     -webkit-line-clamp: var(--rui-custom-lines);
     -webkit-box-orient: vertical;
@@ -22,19 +22,19 @@
 }
 // stylelint-enable property-no-vendor-prefix, value-no-vendor-prefix
 
-.rootHyphensAuto {
+.isRootHyphensAuto {
     hyphens: auto;
 }
 
-.rootHyphensManual {
+.isRootHyphensManual {
     hyphens: manual;
 }
 
-.rootWordWrappingAnywhere {
+.isRootWordWrappingAnywhere {
     word-break: break-all;
 }
 
-.rootWordWrappingLongWords {
+.isRootWordWrappingLongWords {
     word-break: break-word; // 1.
     overflow-wrap: anywhere;
 }

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

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

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

@@ -1,10 +1,10 @@
 export const getRootHyphensClassName = (hyphens, styles) => {
   if (hyphens === 'auto') {
-    return styles.rootHyphensAuto;
+    return styles.isRootHyphensAuto;
   }
 
   if (hyphens === 'manual') {
-    return styles.rootHyphensManual;
+    return styles.isRootHyphensManual;
   }
 
   return null;

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

@@ -1,10 +1,10 @@
 export const getRootWordWrappingClassName = (wordWrapping, styles) => {
   if (wordWrapping === 'anywhere') {
-    return styles.rootWordWrappingAnywhere;
+    return styles.isRootWordWrappingAnywhere;
   }
 
   if (wordWrapping === 'long-words') {
-    return styles.rootWordWrappingLongWords;
+    return styles.isRootWordWrappingLongWords;
   }
 
   return null;

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

@@ -142,31 +142,6 @@ to achieve that effect.
   />
 </Playground>
 
-## Forwarding HTML Attributes
-
-When you want to improve the accessibility of your text fields even further, you
-can **add whatever HTML attribute you like.** All attributes that don't
-interfere with [component's API](#api) are forwarded to the native HTML input.
-
-<Playground>
-  <TextArea
-    label="Address"
-    autoComplete="street-address"
-    minLength={3}
-    maxLength={80}
-  />
-  <TextArea
-    label="Address"
-    variant="filled"
-    autoComplete="street-address"
-    minLength={3}
-    maxLength={80}
-  />
-</Playground>
-
-👉 Refer to the MDN reference for the full list of
-[supported attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes).
-
 ## Invisible Label
 
 In some cases, it may be convenient to visually hide the field label. The label
@@ -346,12 +321,38 @@ It's possible to disable the whole input.
   />
 </Playground>
 
-## API
+## Forwarding HTML Attributes
 
-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
-interactive and helps improve its [accessibility](#forwarding-html-attributes).
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or you can **add whatever HTML attribute
+you like.** All attributes that don't interfere with the API are forwarded to
+the native HTML `<textarea>`. This enables making the component interactive and
+to helps to improve its accessibility.
+
+<Playground>
+  <TextArea
+    label="Address"
+    autoComplete="street-address"
+    minLength={3}
+    maxLength={80}
+  />
+  <TextArea
+    label="Address"
+    variant="filled"
+    autoComplete="street-address"
+    minLength={3}
+    maxLength={80}
+  />
+</Playground>
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[textarea] element.
+
+## Forwarding ref
+
+If you provide [ref], it is forwarded to the native HTML `<textarea>` element.
+
+## API
 
 <Props table of={TextArea} />
 
@@ -361,3 +362,5 @@ Head to [Forms Theming](/customize/theming/forms) to see shared form theming
 options.
 
 [React synthetic events]: https://reactjs.org/docs/events.html
+[textarea]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes
+[ref]: https://reactjs.org/docs/refs-and-the-dom.html