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

package/src/lib/components/SelectField/SelectField.jsx

@@ -7,27 +7,27 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
-import withForwardedRef from '../withForwardedRef';
+import { Option } from './_components/Option';
 import styles from './SelectField.scss';
 
-export const SelectField = ({
-  disabled,
-  forwardedRef,
-  fullWidth,
-  helpText,
-  id,
-  isLabelVisible,
-  label,
-  layout,
-  options,
-  required,
-  size,
-  validationState,
-  validationText,
-  value,
-  variant,
-  ...restProps
-}) => {
+export const SelectField = React.forwardRef((props, ref) => {
+  const {
+    disabled,
+    fullWidth,
+    helpText,
+    id,
+    isLabelVisible,
+    label,
+    layout,
+    options,
+    required,
+    size,
+    validationState,
+    validationText,
+    variant,
+    ...restProps
+  } = props;
+
   const context = useContext(FormLayoutContext);
 
   return (
@@ -37,13 +37,13 @@ export const SelectField = ({
         fullWidth && styles.isRootFullWidth,
         context && styles.isRootInFormLayout,
         resolveContextOrProp(context && context.layout, layout) === 'horizontal'
-          ? styles.rootLayoutHorizontal
-          : styles.rootLayoutVertical,
+          ? styles.isRootLayoutHorizontal
+          : styles.isRootLayoutVertical,
         disabled && styles.isRootDisabled,
         required && styles.isRootRequired,
         getRootSizeClassName(size, styles),
         getRootValidationStateClassName(validationState, styles),
-        variant === 'filled' ? styles.rootVariantFilled : styles.rootVariantOutline,
+        variant === 'filled' ? styles.isRootVariantFilled : styles.isRootVariantOutline,
       )}
       htmlFor={id}
       id={id && `${id}__label`}
@@ -64,21 +64,35 @@ export const SelectField = ({
             className={styles.input}
             disabled={disabled}
             id={id}
-            ref={forwardedRef}
+            ref={ref}
             required={required}
-            value={value}
           >
             {
-              options.map((option) => (
-                <option
-                  disabled={option.disabled}
-                  id={id && `${id}__item__${option.value}`}
-                  key={option.value}
-                  value={option.value}
-                >
-                  {option.label}
-                </option>
-              ))
+              options.map((option) => {
+                if ('options' in option) {
+                  return (
+                    <optgroup
+                      key={option.key ?? option.label}
+                      label={option.label}
+                    >
+                      {option.options.map((optgroupOption) => (
+                        <Option
+                          key={optgroupOption.key ?? optgroupOption.value}
+                          {...optgroupOption}
+                          {...(id && { id: `${id}__item__${optgroupOption.key ?? optgroupOption.value}` })}
+                        />
+                      ))}
+                    </optgroup>
+                  );
+                }
+                return (
+                  <Option
+                    key={option.key ?? option.value}
+                    {...option}
+                    {...(id && { id: `${id}__item__${option.key ?? option.value}` })}
+                  />
+                );
+              })
             }
           </select>
           <div className={styles.caret}>
@@ -107,11 +121,10 @@ export const SelectField = ({
       </div>
     </label>
   );
-};
+});
 
 SelectField.defaultProps = {
   disabled: false,
-  forwardedRef: undefined,
   fullWidth: false,
   helpText: null,
   id: undefined,
@@ -121,7 +134,6 @@ SelectField.defaultProps = {
   size: 'medium',
   validationState: null,
   validationText: null,
-  value: undefined,
   variant: 'outline',
 };
 
@@ -130,14 +142,6 @@ SelectField.propTypes = {
    * If `true`, the input will be disabled.
    */
   disabled: PropTypes.bool,
-  /**
-   * Reference forwarded to the `select` element.
-   */
-  forwardedRef: PropTypes.oneOfType([
-    PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    PropTypes.shape({ current: PropTypes.any }),
-  ]),
   /**
    * If `true`, the field will span the full width of its parent.
    */
@@ -157,6 +161,9 @@ SelectField.propTypes = {
    *
    * and of individual options:
    * * `<ID>__item__<VALUE>`
+   *
+   * If `key` in the option definition object is set,
+   * then `option.key` is used instead of `option.value` in place of `<VALUE>`.
    */
   id: PropTypes.string,
   /**
@@ -177,15 +184,40 @@ SelectField.propTypes = {
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * Set of options to be chosen from.
+   *
+   * Either set of individual or grouped options is acceptable.
+   *
+   * For generating unique IDs the `option.value` is normally used. For cases when this is not practical or
+   * the `option.value` values are not unique the `option.key` attribute can be set manually.
+   * The same applies for the `label` value of grouped options which is supposed to be unique.
+   * To ensure uniqueness `key` attribute can be set manually.
    */
-  options: PropTypes.arrayOf(PropTypes.shape({
-    disabled: PropTypes.bool,
-    label: PropTypes.string.isRequired,
-    value: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-    ]),
-  })).isRequired,
+  options: PropTypes.oneOfType([
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        key: PropTypes.string,
+        label: PropTypes.string.isRequired,
+        options: PropTypes.arrayOf(PropTypes.shape({
+          disabled: PropTypes.bool,
+          key: PropTypes.string,
+          label: PropTypes.string.isRequired,
+          value: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number,
+          ]),
+        })),
+      }),
+    ),
+    PropTypes.arrayOf(PropTypes.shape({
+      disabled: PropTypes.bool,
+      key: PropTypes.string,
+      label: PropTypes.string.isRequired,
+      value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number,
+      ]),
+    })),
+  ]).isRequired,
   /**
    * If `true`, the input will be required.
    */
@@ -202,19 +234,12 @@ SelectField.propTypes = {
    * Validation message to be displayed.
    */
   validationText: PropTypes.node,
-  /**
-   * Value of the input.
-   */
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
   /**
    * Design variant of the field, further customizable with CSS custom properties.
    */
   variant: PropTypes.oneOf(['filled', 'outline']),
 };
 
-export const SelectFieldWithGlobalProps = withForwardedRef(withGlobalProps(SelectField, 'SelectField'));
+export const SelectFieldWithGlobalProps = withGlobalProps(SelectField, 'SelectField');
 
 export default SelectFieldWithGlobalProps;

package/src/lib/components/SelectField/SelectField.scss

@@ -46,11 +46,11 @@
 }
 
 // Variants
-.rootVariantFilled {
+.isRootVariantFilled {
     @include variants.visual(box, $variant: filled, $has-caret: true);
 }
 
-.rootVariantOutline {
+.isRootVariantOutline {
     @include variants.visual(box, $variant: outline, $has-caret: true);
 }
 
@@ -73,12 +73,12 @@
 }
 
 // Layouts
-.rootLayoutVertical,
-.rootLayoutHorizontal {
+.isRootLayoutVertical,
+.isRootLayoutHorizontal {
     @include box-field-layout.vertical();
 }
 
-.rootLayoutHorizontal {
+.isRootLayoutHorizontal {
     @include box-field-layout.horizontal();
 }
 
@@ -91,14 +91,14 @@
 }
 
 // Sizes
-.rootSizeSmall {
+.isRootSizeSmall {
     @include box-field-sizes.size(small);
 }
 
-.rootSizeMedium {
+.isRootSizeMedium {
     @include box-field-sizes.size(medium);
 }
 
-.rootSizeLarge {
+.isRootSizeLarge {
     @include box-field-sizes.size(large);
 }

package/src/lib/components/SelectField/_components/Option/Option.jsx

@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export const Option = ({
+  disabled,
+  id,
+  label,
+  value,
+}) => (
+  <option
+    disabled={disabled}
+    id={id}
+    value={value}
+  >
+    {label}
+  </option>
+);
+
+Option.defaultProps = {
+  disabled: false,
+  id: undefined,
+};
+
+Option.propTypes = {
+  /**
+   * If `true` the option cannot be selected.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * ID of an individual option.
+   */
+  id: PropTypes.string,
+  /**
+   * Option label.
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Option value.
+   */
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]).isRequired,
+};
+
+export default Option;

package/src/lib/components/SelectField/_components/Option/index.js

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

package/src/lib/components/SelectField/index.js

@@ -1 +1 @@
-export { default } from './SelectField';
+export { default as SelectField } from './SelectField';

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

@@ -13,8 +13,10 @@ import {
   Props,
 } from 'docz'
 import Icon from '../../../docs/_components/Icon'
-import ScrollView from '../ScrollView'
-import { Table } from './Table'
+import {
+  ScrollView,
+  Table,
+} from '../..'
 
 ## Basic Usage
 
@@ -38,7 +40,7 @@ And use it:
         name: 'name',
       },
       {
-        format: (row) => row.dateOfBirth.toLocaleDateString('en-GB'),
+        format: (date) => date.toLocaleDateString('en-GB'),
         label: 'Date of birth',
         name: 'dateOfBirth',
       },
@@ -97,21 +99,21 @@ The easiest way to make tables responsive is to wrap them with the
           name: 'id',
         },
         {
-          format: (row) => (
-            <span style={{ whiteSpace: 'nowrap' }}>{row.name}</span>
+          format: (name) => (
+            <span style={{ whiteSpace: 'nowrap' }}>{name}</span>
           ),
           label: 'Name',
           name: 'name',
         },
         {
-          format: (row) => (
-            <span style={{ whiteSpace: 'nowrap' }}>{row.note}</span>
+          format: (note) => (
+            <span style={{ whiteSpace: 'nowrap' }}>{note}</span>
           ),
           label: 'Note',
           name: 'note',
         },
         {
-          format: (row) => row.dateOfBirth.toLocaleDateString('en-GB'),
+          format: (date) => date.toLocaleDateString('en-GB'),
           label: 'Date of birth',
           name: 'dateOfBirth',
         },
@@ -228,7 +230,7 @@ The following is an example of custom sorting function executed on the client.
         name: 'name',
       },
       {
-        format: (row) => row.dateOfBirth.toISOString(),
+        format: (date) => date.toISOString(),
         isSortable: true,
         label: 'Date of birth',
         name: 'dateOfBirth',
@@ -254,6 +256,20 @@ The following is an example of custom sorting function executed on the client.
   }}
 </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 `<table>` HTML
+element. 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
+[table] element.
+
 ## API
 
 <Props table of={Table} />
+
+[React synthetic events]: https://reactjs.org/docs/events.html
+[table]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#attributes

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 '../Button';
+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;
+}