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

package/src/lib/components/{ui/SelectField → SelectField}/README.mdx

@@ -1,7 +1,7 @@
 ---
 name: SelectField
-menu: 'UI'
-route: /components/ui/select-field
+menu: 'Inputs'
+route: /components/select-field
 ---
 
 # SelectField
@@ -29,8 +29,8 @@ And use it:
     const [fruit, setFruit] = React.useState('apple');
     return (
       <SelectField
-        changeHandler={(e) => setFruit(e.target.value)}
         label="Your favourite fruit"
+        onChange={(e) => setFruit(e.target.value)}
         options={[
           {
             label: 'Apple',
@@ -56,13 +56,13 @@ See [API](#api) for all available options.
 ## General Guidelines
 
 - Use SelectField for **many options**. For sets of just a few options
-  (say 3 at maximum) consider using the [Radio](/components/ui/radio) component.
+  (say 3 at maximum) consider using the [Radio](/components/radio) component.
   This will help keep your UI clean and uncluttered and prevent your users from
   being overwhelmed by too many options.
 
 - **Don't use for boolean** (true/false) selection or to toggle things on and
-  off. [CheckboxField](/components/ui/checkbox-field) and
-  [Toggle](/components/ui/toggle) are more suitable for such cases.
+  off. [CheckboxField](/components/checkbox-field) and
+  [Toggle](/components/toggle) are more suitable for such cases.
 
 - Use **short and descriptive labels**, ideally nouns rather than seemingly
   polite phrases like _Please select your favourite fruit_. Short labels will
@@ -110,14 +110,14 @@ further [customized](#theming) with CSS custom properties.
     return (
       <>
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           variant="filled"
           value={fruit}
@@ -152,43 +152,43 @@ and large.
     return (
       <>
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           size="small"
           value={fruit}
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           size="large"
           value={fruit}
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           size="small"
           value={fruit}
           variant="filled"
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
           variant="filled"
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           size="large"
           value={fruit}
@@ -221,16 +221,16 @@ Full-width fields span the full width of a parent:
     return (
       <>
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           fullWidth
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           fullWidth
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
           variant="filled"
@@ -267,16 +267,16 @@ the input.
     return (
       <>
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           isLabelVisible={false}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           isLabelVisible={false}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
           variant="filled"
@@ -312,52 +312,52 @@ supports this kind of layout as well.
     return (
       <>
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
           layout="horizontal"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
           layout="horizontal"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
           variant="filled"
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           fullWidth
           label="Your favourite fruit"
           layout="horizontal"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           fullWidth
           label="Your favourite fruit"
           layout="horizontal"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
           variant="filled"
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           fullWidth
           isLabelVisible={false}
           label="Your favourite fruit"
           layout="horizontal"
-          value={fruit}
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
+          value={fruit}
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           fullWidth
           isLabelVisible={false}
           label="Your favourite fruit"
           layout="horizontal"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
           variant="filled"
@@ -392,52 +392,52 @@ filled.
     return (
       <>
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           helpText="Choose one or more kinds of fruit to feel happy."
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           helpText="Choose one or more kinds of fruit to feel happy."
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
           variant="filled"
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           helpText="Choose one or more kinds of fruit to feel happy."
           label="Your favourite fruit"
           layout="horizontal"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           helpText="Choose one or more kinds of fruit to feel happy."
           label="Your favourite fruit"
           layout="horizontal"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
           variant="filled"
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           fullWidth
           helpText="Choose one or more kinds of fruit to feel happy."
           label="Your favourite fruit"
           layout="horizontal"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           fullWidth
           helpText="Choose one or more kinds of fruit to feel happy."
           label="Your favourite fruit"
           layout="horizontal"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
           variant="filled"
@@ -476,8 +476,8 @@ have.
     return (
       <>
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           required
           validationState="valid"
@@ -485,8 +485,8 @@ have.
           value={fruit}
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           required
           validationState="warning"
@@ -494,8 +494,8 @@ have.
           value={fruit}
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           required
           validationState="invalid"
@@ -503,8 +503,8 @@ have.
           value={fruit}
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           required
           validationState="valid"
@@ -513,8 +513,8 @@ have.
           variant="filled"
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           required
           validationState="warning"
@@ -523,8 +523,8 @@ have.
           variant="filled"
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           required
           value={fruit}
@@ -562,29 +562,29 @@ It's possible to disable just some options or the whole input.
     return (
       <>
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
           variant="filled"
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           disabled
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value="apple"
         />
         <SelectField
-          changeHandler={(e) => setFruit(e.target.value)}
           disabled
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value="apple"
           variant="filled"
@@ -596,9 +596,10 @@ It's possible to disable just some options or the whole input.
 
 ## API
 
-In addition to the options below, you can add any custom attributes that do not
-interfere with the API, and they will be passed to the `select` HTML element.
-This is useful mainly to improve component's accessibility.
+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 `select` HTML element. This enables making the component
+interactive and helps improve its accessibility.
 
 <Props table of={SelectField} />
 
@@ -612,3 +613,5 @@ options. On top of that, the following options are available for SelectField.
 | `--rui-FormField--box--select__caret__border-style`  | SelectField arrow border style (e.g. `solid`)                |
 | `--rui-FormField--box--select__caret__background`    | SelectField arrow background (including `url()` or gradient) |
 | `--rui-FormField--box--select__option--disabled__color` | Text color of disabled SelectField options                |
+
+[React synthetic events]: https://reactjs.org/docs/events.html

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

@@ -0,0 +1,219 @@
+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 { FormLayoutContext } from '../FormLayout';
+import withForwardedRef from '../withForwardedRef';
+import styles from './SelectField.scss';
+
+export const SelectField = ({
+  disabled,
+  forwardedRef,
+  fullWidth,
+  helpText,
+  id,
+  isLabelVisible,
+  label,
+  layout,
+  options,
+  required,
+  size,
+  validationState,
+  validationText,
+  value,
+  variant,
+  ...restProps
+}) => {
+  const context = useContext(FormLayoutContext);
+
+  return (
+    <label
+      className={[
+        styles.root,
+        fullWidth ? styles.isRootFullWidth : '',
+        context ? styles.isRootInFormLayout : '',
+        resolveContextOrProp(context && context.layout, layout) === 'horizontal'
+          ? styles.rootLayoutHorizontal
+          : styles.rootLayoutVertical,
+        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={[
+          styles.label,
+          isLabelVisible ? '' : styles.isLabelHidden,
+        ].join(' ')}
+        id={id && `${id}__labelText`}
+      >
+        {label}
+      </div>
+      <div className={styles.field}>
+        <div className={styles.inputContainer}>
+          <select
+            {...transferProps(restProps)}
+            className={styles.input}
+            disabled={disabled}
+            id={id}
+            ref={forwardedRef}
+            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>
+              ))
+            }
+          </select>
+          <div className={styles.caret}>
+            <span className={styles.caretIcon} />
+          </div>
+          {variant === 'filled' && (
+            <div className={styles.bottomLine} />
+          )}
+        </div>
+        {helpText && (
+          <div
+            className={styles.helpText}
+            id={id && `${id}__helpText`}
+          >
+            {helpText}
+          </div>
+        )}
+        {validationText && (
+          <div
+            className={styles.validationText}
+            id={id && `${id}__validationText`}
+          >
+            {validationText}
+          </div>
+        )}
+      </div>
+    </label>
+  );
+};
+
+SelectField.defaultProps = {
+  disabled: false,
+  forwardedRef: undefined,
+  fullWidth: false,
+  helpText: null,
+  id: undefined,
+  isLabelVisible: true,
+  layout: 'vertical',
+  required: false,
+  size: 'medium',
+  validationState: null,
+  validationText: null,
+  value: undefined,
+  variant: 'outline',
+};
+
+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.
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * Optional help text.
+   */
+  helpText: PropTypes.node,
+  /**
+   * ID of the input HTML element.
+   *
+   * Also serves as a prefix for important inner elements:
+   * * `<ID>__label`
+   * * `<ID>__labelText`,
+   * * `<ID>__helpText`
+   * * `<ID>__validationText`
+   *
+   * and of individual options:
+   * * `<ID>__item__<VALUE>`
+   */
+  id: PropTypes.string,
+  /**
+   * If `false`, the label will be visually hidden (but remains accessible by assistive
+   * technologies).
+   */
+  isLabelVisible: PropTypes.bool,
+  /**
+   * Select field label.
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * Layout of the field.
+   *
+   * Ignored if the component is rendered within `FormLayout` component
+   * as the value is inherited in such case.
+   */
+  layout: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * Set of options to be chosen from.
+   */
+  options: PropTypes.arrayOf(PropTypes.shape({
+    disabled: PropTypes.bool,
+    label: PropTypes.string.isRequired,
+    value: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+  })).isRequired,
+  /**
+   * If `true`, the input will be required.
+   */
+  required: PropTypes.bool,
+  /**
+   * Size of the field.
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * Alter the field to provide feedback based on validation result.
+   */
+  validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
+  /**
+   * 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 SelectFieldWithContext = withForwardedRef(withProviderContext(SelectField, 'SelectField'));
+
+export default SelectFieldWithContext;

package/src/lib/components/{ui/SelectField → SelectField}/SelectField.scss

@@ -1,9 +1,9 @@
-@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 {

package/src/lib/components/{ui/Table → Table}/README.mdx

@@ -1,7 +1,7 @@
 ---
 name: Table
-menu: 'UI'
-route: /components/ui/table
+menu: 'Miscellaneous'
+route: /components/table
 ---
 
 # Table
@@ -12,7 +12,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import Icon from '../../../../docs/_components/Icon'
+import Icon from '../../../docs/_components/Icon'
 import ScrollView from '../ScrollView'
 import { Table } from './Table'
 
@@ -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">
@@ -240,14 +240,14 @@ The following is an example of custom sorting function executed on the client.
         rows={rows}
         sort={{
           ascendingIcon: <Icon icon="up" />,
-          changeHandler: (column, direction) => {
+          column: tableSortColumn,
+          descendingIcon: <Icon icon="down" />,
+          direction: tableSortDirection,
+          onClick: (column, direction) => {
             setTableSortColumn(column);
             setTableSortDirection(direction === 'asc' ? 'desc' : 'asc');
             setRows(compare(rows, column, direction));
           },
-          column: tableSortColumn,
-          descendingIcon: <Icon icon="down" />,
-          direction: tableSortDirection,
         }}
       />
     );