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

package/src/lib/components/{ui/Paper → Paper}/Paper.jsx

@@ -1,16 +1,18 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import styles from './Paper.scss';
 
 export const Paper = ({
   children,
   id,
+  muted,
   raised,
 }) => (
   <div
     className={[
       styles.root,
+      muted ? styles.rootMuted : '',
       raised ? styles.rootRaised : '',
     ].join(' ')}
     id={id}
@@ -22,6 +24,7 @@ export const Paper = ({
 Paper.defaultProps = {
   children: null,
   id: undefined,
+  muted: false,
   raised: false,
 };
 
@@ -34,6 +37,10 @@ Paper.propTypes = {
    * ID of the root HTML element.
    */
   id: PropTypes.string,
+  /**
+   * Visually suppress Paper.
+   */
+  muted: PropTypes.bool,
   /**
    * Add shadow to pull the Paper above surface.
    */

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

@@ -7,6 +7,11 @@
   background-color: theme.$background-color;
 }
 
+.rootMuted {
+  background-color: theme.$muted-background-color;
+  opacity: theme.$muted-opacity;
+}
+
 .rootRaised {
   box-shadow: theme.$raised-box-shadow;
 }

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

@@ -1,7 +1,7 @@
 ---
 name: Paper
-menu: 'UI'
-route: /components/ui/paper
+menu: 'Miscellaneous'
+route: /components/paper
 ---
 
 # Paper
@@ -39,7 +39,7 @@ See [API](#api) for all available options.
   the default appearance to make it stand out on white background.
 
 - **Paper, or Card?** Paper is a basic surface to put content on. However,
-  there is also the [Card](/components/ui/card) component. While Paper is
+  there is also the [Card](/components/card) component. While Paper is
   usually used to hold larger content areas like lists, grids, or forms, Card is
   designed for displaying items. Card also supports more visual options.
 
@@ -53,6 +53,16 @@ Add optional shadow to lift the paper above background.
   </Paper>
 </Playground>
 
+## Muted Paper
+
+Dim background and add transparency to visually suppress the Paper.
+
+<Playground>
+  <Paper muted>
+    Sssh! I&apos;m paper and I&apos;m muted.
+  </Paper>
+</Playground>
+
 ## API
 
 <Props table of={Paper} />
@@ -66,4 +76,6 @@ Add optional shadow to lift the paper above background.
 | `--rui-Paper__border-color`                          | Border color                                                 |
 | `--rui-Paper__border-radius`                         | Corner radius                                                |
 | `--rui-Paper__background-color`                      | Paper background color                                       |
+| `--rui-Paper--muted__background-color`               | Background color of muted paper                              |
+| `--rui-Paper--muted__opacity`                        | Opacity of muted paper                                       |
 | `--rui-Paper--raised__box-shadow`                    | Box shadow of raised paper                                   |

package/src/lib/components/{ui/Paper → Paper}/_theme.scss

@@ -3,4 +3,6 @@ $border-width: var(--rui-Paper__border-width);
 $border-color: var(--rui-Paper__border-color);
 $border-radius: var(--rui-Paper__border-radius);
 $background-color: var(--rui-Paper__background-color);
+$muted-background-color: var(--rui-Paper--muted__background-color);
+$muted-opacity: var(--rui-Paper--muted__opacity);
 $raised-box-shadow: var(--rui-Paper--raised__box-shadow);

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

@@ -1,7 +1,7 @@
 ---
 name: Radio
-menu: 'UI'
-route: /components/ui/radio
+menu: 'Inputs'
+route: /components/radio
 ---
 
 # Radio
@@ -29,8 +29,8 @@ And use it:
     const [fruit, setFruit] = React.useState('apple');
     return (
       <Radio
-        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 Radio for **just a few options**. For larger sets of many options (say 4
-  and more) consider using the [SelectField](/components/ui/select-field)
+  and more) consider using the [SelectField](/components/select-field)
   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
@@ -91,9 +91,9 @@ the input.
     const [frequency, setFrequency] = React.useState('weekly');
     return (
       <Radio
-        changeHandler={(e) => setFrequency(e.target.value)}
         isLabelVisible={false}
         label="Newsletter frequency"
+        onChange={(e) => setFrequency(e.target.value)}
         options={[
           {
             label: 'I want to subscribe to the weekly newsletter',
@@ -125,9 +125,9 @@ supports this kind of layout as well.
     const [frequency, setFrequency] = React.useState('weekly');
     return (
       <Radio
-        changeHandler={(e) => setFrequency(e.target.value)}
         label="Newsletter frequency"
         layout="horizontal"
+        onChange={(e) => setFrequency(e.target.value)}
         options={[
           {
             label: 'I want to subscribe to the weekly newsletter',
@@ -158,9 +158,9 @@ filled.
     const [fruit, setFruit] = React.useState('apple');
     return (
       <Radio
-        changeHandler={(e) => setFruit(e.target.value)}
         helpText="What do you prefer?"
         label="Your favourite fruit"
+        onChange={(e) => setFruit(e.target.value)}
         options={[
           {
             label: 'Apple',
@@ -210,8 +210,8 @@ have.
     return (
       <>
         <Radio
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           required
           validationState="valid"
@@ -219,8 +219,8 @@ have.
           value={fruit}
         />
         <Radio
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           required
           validationState="warning"
@@ -228,8 +228,8 @@ have.
           value={fruit}
         />
         <Radio
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           required
           validationState="invalid"
@@ -266,15 +266,15 @@ It's possible to disable just some options or the whole set.
     return (
       <>
         <Radio
-          changeHandler={(e) => setFruit(e.target.value)}
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value={fruit}
         />
         <Radio
-          changeHandler={(e) => setFruit(e.target.value)}
           disabled
           label="Your favourite fruit"
+          onChange={(e) => setFruit(e.target.value)}
           options={options}
           value="apple"
         />
@@ -285,9 +285,10 @@ It's possible to disable just some options or the whole set.
 
 ## 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 `input` 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 `input` HTML element. This enables making the component
+interactive and helps improve its accessibility.
 
 <Props table of={Radio} />
 
@@ -300,3 +301,5 @@ options. On top of that, the following options are available for Radio.
 |--------------------------------------------------------------------|------------------------------------------------|
 | `--rui-FormField--check__input--radio__border-radius`              | Input corner radius                            |
 | `--rui-FormField--check__input--radio--checked__background-image` | Checked input background image (inline, URL, …) |
+
+[React synthetic events]: https://reactjs.org/docs/events.html

package/src/lib/components/Radio/Radio.jsx

@@ -0,0 +1,188 @@
+import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
+import getRootValidationStateClassName from '../../helpers/getRootValidationStateClassName';
+import { resolveContextOrProp } from '../../helpers/resolveContextOrProp';
+import { withProviderContext } from '../../provider';
+import transferProps from '../../utils/transferProps';
+import { FormLayoutContext } from '../FormLayout';
+import styles from './Radio.scss';
+
+export const Radio = ({
+  disabled,
+  helpText,
+  id,
+  isLabelVisible,
+  label,
+  layout,
+  options,
+  required,
+  validationState,
+  validationText,
+  value,
+  ...restProps
+}) => {
+  const context = useContext(FormLayoutContext);
+
+  return (
+    <div
+      className={[
+        styles.root,
+        context ? styles.isRootInFormLayout : '',
+        resolveContextOrProp(context && context.layout, layout) === 'horizontal'
+          ? styles.rootLayoutHorizontal
+          : styles.rootLayoutVertical,
+        disabled ? styles.isRootDisabled : '',
+        required ? styles.isRootRequired : '',
+        getRootValidationStateClassName(validationState, styles),
+      ].join(' ')}
+      id={id}
+    >
+      <div
+        className={[
+          styles.label,
+          isLabelVisible ? '' : styles.isLabelHidden,
+        ].join(' ')}
+        id={id && `${id}__labelText`}
+      >
+        {label}
+      </div>
+      <div className={styles.field}>
+        <ul className={styles.list}>
+          {
+            options.map((option) => (
+              <li key={option.value}>
+                <label
+                  className={styles.option}
+                  htmlFor={id && `${id}__item__${option.value}`}
+                  id={id && `${id}__item__${option.value}__label`}
+                >
+                  <input
+                    {...transferProps(restProps)}
+                    className={styles.input}
+                    checked={restProps.onChange
+                      ? (value === option.value) || false
+                      : undefined}
+                    disabled={disabled || option.disabled}
+                    id={id && `${id}__item__${option.value}`}
+                    name={id}
+                    type="radio"
+                    value={option.value}
+                  />
+                  <span
+                    className={styles.optionLabel}
+                    id={id && `${id}__item__${option.value}__labelText`}
+                  >
+                    { option.label }
+                  </span>
+                </label>
+              </li>
+            ))
+          }
+        </ul>
+        {helpText && (
+          <div
+            className={styles.helpText}
+            id={id && `${id}__helpText`}
+          >
+            {helpText}
+          </div>
+        )}
+        {validationText && (
+          <div
+            className={styles.validationText}
+            id={id && `${id}__validationText`}
+          >
+            {validationText}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+Radio.defaultProps = {
+  disabled: false,
+  helpText: null,
+  id: undefined,
+  isLabelVisible: true,
+  layout: 'vertical',
+  required: false,
+  validationState: null,
+  validationText: null,
+  value: undefined,
+};
+
+Radio.propTypes = {
+  /**
+   * If `true`, the input will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Optional help text.
+   */
+  helpText: PropTypes.node,
+  /**
+   * ID of the root HTML element.
+   *
+   * Also serves as base for ids of nested elements:
+   * * `<ID>__labelText`
+   * * `<ID>__helpText`
+   * * `<ID>__validationText`
+   *
+   * and of individual options (`<input>`):
+   * * `<ID>__item__<VALUE>`
+   * * `<ID>__item__<VALUE>__label`
+   * * `<ID>__item__<VALUE>__labelText`
+   */
+  id: PropTypes.string,
+  /**
+   * If `false`, the label will be visually hidden (but remains accessible by assistive
+   * technologies).
+   */
+  isLabelVisible: PropTypes.bool,
+  /**
+   * Label of the group of options.
+   */
+  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,
+  /**
+   * 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,
+  ]),
+};
+
+export const RadioWithContext = withProviderContext(Radio, 'Radio');
+
+export default RadioWithContext;

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

@@ -1,12 +1,12 @@
-@use '../../../styles/tools/form-fields/box-field-elements';
-@use '../../../styles/tools/form-fields/box-field-layout';
-@use '../../../styles/tools/form-fields/foundation';
-@use '../../../styles/tools/form-fields/inline-field-elements';
-@use '../../../styles/tools/form-fields/inline-field-layout';
-@use '../../../styles/tools/form-fields/variants';
-@use '../../../styles/tools/accessibility';
-@use '../../../styles/tools/reset';
-@use '../../../styles/tools/spacing';
+@use '../../styles/tools/form-fields/box-field-elements';
+@use '../../styles/tools/form-fields/box-field-layout';
+@use '../../styles/tools/form-fields/foundation';
+@use '../../styles/tools/form-fields/inline-field-elements';
+@use '../../styles/tools/form-fields/inline-field-layout';
+@use '../../styles/tools/form-fields/variants';
+@use '../../styles/tools/accessibility';
+@use '../../styles/tools/reset';
+@use '../../styles/tools/spacing';
 
 // Foundation
 .root {

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

@@ -1,7 +1,7 @@
 ---
 name: ScrollView
-menu: 'UI'
-route: /components/ui/scroll-view
+menu: 'Miscellaneous'
+route: /components/scroll-view
 ---
 
 # ScrollView
@@ -12,11 +12,11 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { Placeholder } from '../../../../docs/_components/Placeholder/Placeholder'
+import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
 import Button from '../Button'
 import Radio from '../Radio'
-import { Toolbar } from '../../layout/Toolbar/Toolbar'
-import { ToolbarItem } from '../../layout/Toolbar/ToolbarItem'
+import { Toolbar } from '../Toolbar/Toolbar'
+import { ToolbarItem } from '../Toolbar/ToolbarItem'
 import {
   ScrollViewWithContext as ScrollView,
   ScrollView as ParsableScrollView,
@@ -219,7 +219,8 @@ property defined because it detects changes of these keys.
         <Toolbar>
           <ToolbarItem>
             <Radio
-              changeHandler={(e) => setDirection(e.target.value)}
+              label="Direction:"
+              onChange={(e) => setDirection(e.target.value)}
               options={[
                 {
                   label: 'Vertical',
@@ -230,13 +231,13 @@ property defined because it detects changes of these keys.
                   value: 'horizontal',
                 },
               ]}
-              label="Direction:"
               value={direction}
             />
           </ToolbarItem>
           <ToolbarItem>
             <Radio
-              changeHandler={(e) => setAutoScroll(e.target.value)}
+              label="Autoscroll:"
+              onChange={(e) => setAutoScroll(e.target.value)}
               options={[
                 {
                   label: 'Always',
@@ -247,14 +248,13 @@ property defined because it detects changes of these keys.
                   value: 'detectEnd',
                 },
               ]}
-              label="Autoscroll:"
               value={autoScroll}
             />
           </ToolbarItem>
           <ToolbarItem>
             <Button
               label="Add text"
-              clickHandler={
+              onClick={
                 () => setScrollViewContent(
                   `${scrollViewContent} ${generateRandomString()}`,
                 )
@@ -358,7 +358,7 @@ Aside from setting a custom shadow color and size, you can entirely customize
 the scrolling shadows with `background` or `box-shadow` CSS properties.
 
 The following example demonstrates exactly the same custom scrolling shadows as
-we use in the [Modal](/components/ui/modal#scrolling-long-content) component.
+we use in the [Modal](/components/modal#scrolling-long-content) component.
 
 <Playground>
   <Placeholder height="200px">

package/src/lib/components/{ui/ScrollView → ScrollView}/ScrollView.jsx

@@ -5,10 +5,10 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { useLoadResize } from '../../../hooks/useLoadResizeHook';
-import { useScrollPosition } from '../../../hooks/useScrollPositionHook';
-import { withProviderContext } from '../../../provider';
-import { getElementsPositionDifference } from '../../../services/elementPositionService';
+import { useLoadResize } from '../../hooks/useLoadResizeHook';
+import { useScrollPosition } from '../../hooks/useScrollPositionHook';
+import { withProviderContext } from '../../provider';
+import { getElementsPositionDifference } from '../../services/elementPositionService';
 import styles from './ScrollView.scss';
 
 // Function `getElementsPositionDifference` sometimes returns floating point values that results
@@ -315,10 +315,7 @@ ScrollView.propTypes = {
   /**
    * Content to be scrollable.
    */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]).isRequired,
+  children: PropTypes.node.isRequired,
   /**
    * Custom CSS to replace the default end scrolling shadow.
    */
@@ -350,8 +347,10 @@ ScrollView.propTypes = {
    */
   direction: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
-   * ID of the root HTML element. It also serves as a prefix for important inner elements:
-   * `<ID>__content`, `<ID>__arrowPrevButton`, and `<ID>__arrowNextButton`.
+   * ID of the root HTML element. It also serves as base for nested elements:
+   * * `<ID>__content`
+   * * `<ID>__arrowPrevButton`
+   * * `<ID>__arrowNextButton`
    */
   id: PropTypes.string,
   /**

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

@@ -21,12 +21,12 @@
 // 7. Hide content overflowing in the other direction because scrollbars would be unreachable under
 //    scrolling shadows.
 
-@use '../../../styles/tools/accessibility';
-@use '../../../styles/tools/caret';
-@use '../../../styles/tools/reset';
-@use '../../../styles/tools/scrollbar';
-@use '../../../styles/tools/spacing';
-@use '../../../styles/tools/transition';
+@use '../../styles/tools/accessibility';
+@use '../../styles/tools/caret';
+@use '../../styles/tools/reset';
+@use '../../styles/tools/scrollbar';
+@use '../../styles/tools/spacing';
+@use '../../styles/tools/transition';
 @use 'theme';
 
 $_arrow-inner-spacing: spacing.of(2);