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

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

@@ -1,7 +1,7 @@
 ---
 name: CheckboxField
-menu: 'UI'
-route: /components/ui/checkbox-field
+menu: 'Inputs'
+route: /components/checkbox-field
 ---
 
 # CheckboxField
@@ -29,9 +29,9 @@ And use it:
     const [agree, setAgree] = React.useState(true);
     return (
       <CheckboxField
-        changeHandler={() => setAgree(!agree)}
         checked={agree}
         label="I agree"
+        onChange={() => setAgree(!agree)}
       />
     );
   }}
@@ -44,13 +44,13 @@ See [API](#api) for all available options.
 - Use the CheckboxField when there are lists of options and the user may
   **select any number of choices,** including zero, one, or several. For
   selecting just a single option from the list, use either the
-  [Radio](/components/ui/radio) or [SelectField](/components/ui/select-field)
+  [Radio](/components/radio) or [SelectField](/components/select-field)
   component.
 
 - Use the CheckboxField for boolean (true/false) input **in forms that require
   to be confirmed** by a button to become active. To toggle things on or off
   with an immediate effect (without confirmation), use rather the
-  [Toggle](/components/ui/toggle) component.
+  [Toggle](/components/toggle) component.
 
 - **Use positive wording for the checkbox label,** so that it's clear what will
   happen when the user turns on the checkbox. Avoid negations such as “Don't
@@ -81,10 +81,10 @@ turning the checkbox on or off.
     const [getNewsletter, setGetNewsletter] = React.useState(true);
     return (
       <CheckboxField
-        changeHandler={() => setGetNewsletter(!getNewsletter)}
         checked={getNewsletter}
         helpText="We will not bother you more than once a month, we promise!"
         label="Send me newsletter"
+        onChange={() => setGetNewsletter(!getNewsletter)}
       />
     );
   }}
@@ -100,10 +100,10 @@ label remains accessible to assistive technologies.
     const [checked, setChecked] = React.useState(true);
     return (
       <CheckboxField
-        changeHandler={() => setChecked(!checked)}
         checked={checked}
         isLabelVisible={false}
         label="You cannot see this"
+        onChange={() => setChecked(!checked)}
       />
     );
   }}
@@ -116,10 +116,10 @@ It's also possible to display label before input:
     const [checked, setChecked] = React.useState(true);
     return (
       <CheckboxField
-        changeHandler={() => setChecked(!checked)}
         checked={checked}
         label="Label precedes input"
         labelPosition="before"
+        onChange={() => setChecked(!checked)}
       />
     );
   }}
@@ -140,22 +140,22 @@ have.
     return (
       <>
         <CheckboxField
-          changeHandler={() => setAgree(!agree)}
           checked={agree}
           label="I have read and agree with terms and conditions"
+          onChange={() => setAgree(!agree)}
           validationState="valid"
         />
         <CheckboxField
-          changeHandler={() => setAgree(!agree)}
           checked={agree}
           label="I have read and agree with terms and conditions"
+          onChange={() => setAgree(!agree)}
           validationState="warning"
           validationText="Please wait 10 minutes until we verify your data."
         />
         <CheckboxField
-          changeHandler={() => setAgree(!agree)}
           checked={agree}
           label="I have read and agree with terms and conditions"
+          onChange={() => setAgree(!agree)}
           required
           validationState="invalid"
           validationText="You must agree to be able to proceed."
@@ -183,9 +183,10 @@ Disabled state makes the input unavailable.
 
 ## 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={CheckboxField} />
 
@@ -198,3 +199,5 @@ options. On top of that, the following options are available for CheckboxField.
 |----------------------------------------------------------------------|----------------------------------------------|
 | `--rui-FormField--check__input--checkbox__border-radius`             | Input corner radius                          |
 | `--rui-FormField--check__input--checkbox--checked__background-image` | Background image of checked input            |
+
+[React synthetic events]: https://reactjs.org/docs/events.html

package/src/lib/components/FileInputField/FileInputField.jsx

@@ -0,0 +1,162 @@
+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 withForwardedRef from '../withForwardedRef';
+import styles from './FileInputField.scss';
+
+export const FileInputField = ({
+  disabled,
+  forwardedRef,
+  fullWidth,
+  helpText,
+  id,
+  isLabelVisible,
+  label,
+  layout,
+  required,
+  validationState,
+  validationText,
+  ...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 : '',
+        getRootValidationStateClassName(validationState, styles),
+      ].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}>
+          <input
+            {...transferProps(restProps)}
+            className={styles.input}
+            disabled={disabled}
+            id={id}
+            ref={forwardedRef}
+            required={required}
+            type="file"
+          />
+        </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>
+  );
+};
+
+FileInputField.defaultProps = {
+  disabled: false,
+  forwardedRef: undefined,
+  fullWidth: false,
+  helpText: null,
+  id: undefined,
+  isLabelVisible: true,
+  layout: 'vertical',
+  required: false,
+  validationState: null,
+  validationText: null,
+};
+
+FileInputField.propTypes = {
+  /**
+   * If `true`, the input will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Reference forwarded to the `input` 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 base for ids of nested elements:
+   * * `<ID>__label`
+   * * `<ID>__labelText`
+   * * `<ID>__helpText`
+   * * `<ID>__validationText`
+   */
+  id: PropTypes.string,
+  /**
+   * If `false`, the label will be visually hidden (but remains accessible by assistive
+   * technologies).
+   */
+  isLabelVisible: PropTypes.bool,
+  /**
+   * Text 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']),
+  /**
+   * 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,
+};
+
+export const FileInputFieldWithContext = withForwardedRef(withProviderContext(FileInputField, 'FileInputField'));
+
+export default FileInputFieldWithContext;

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

@@ -1,8 +1,8 @@
-@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/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/foundation';
+@use '../../styles/tools/form-fields/variants';
+@use '../../styles/tools/accessibility';
 
 // Foundation
 .root {

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

@@ -1,7 +1,7 @@
 ---
 name: FileInputField
-menu: 'UI'
-route: /components/ui/file-input-field
+menu: 'Inputs'
+route: /components/file-input-field
 ---
 
 # FileInputField
@@ -189,10 +189,10 @@ It's possible to disable 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 `input` HTML element.
-This is useful mainly to improve component's
-[accessibility](#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 `input` HTML element. This enables making the component
+interactive and helps improve its [accessibility](#forwarding-html-attributes).
 
 <Props table of={FileInputField} />
 
@@ -200,3 +200,5 @@ This is useful mainly to improve component's
 
 Head to [Forms Theming](/customize/theming/forms) to see shared form theming
 options.
+
+[React synthetic events]: https://reactjs.org/docs/events.html

package/src/lib/components/{layout/FormLayout → FormLayout}/FormLayout.jsx

@@ -1,7 +1,7 @@
-import flattenChildren from 'react-keyed-flatten-children';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
+import { FormLayoutContext } from './FormLayoutContext';
 import styles from './FormLayout.scss';
 
 const PREDEFINED_LABEL_WIDTH_VALUES = ['auto', 'default', 'limited'];
@@ -56,20 +56,11 @@ export const FormLayout = (props) => {
       ].join(' ')}
       {...hasCustomLabelWidth ? { style: { '--rui-custom-label-width': labelWidth } } : {}}
     >
-      {/*
-        Flatten children to one-dimensional array so we get over React Fragments with the `map()`
-        function.
-      */}
-      {flattenChildren(children).map((child) => {
-        if (!React.isValidElement(child)) {
-          return null;
-        }
-
-        return React.cloneElement(child, {
-          inFormLayout: true,
-          layout: fieldLayout,
-        });
-      })}
+      <FormLayoutContext.Provider
+        value={{ layout: fieldLayout }}
+      >
+        {children}
+      </FormLayoutContext.Provider>
     </div>
   );
 };
@@ -88,8 +79,15 @@ FormLayout.propTypes = {
    */
   autoWidth: PropTypes.bool,
   /**
-   * Supported form field components: CheckboxField, Radio, SelectField, TextArea, TextField,
-   * Toggle, and FormLayoutCustomField.
+   * Supported form field components:
+   * * `CheckboxField`
+   * * `FileInputField`
+   * * `FormLayoutCustomField`
+   * * `Radio`
+   * * `SelectField`
+   * * `TextArea`
+   * * `TextField`
+   * * `Toggle`
    */
   children: PropTypes.node,
   /**

package/src/lib/components/{layout/FormLayout → FormLayout}/FormLayout.scss

@@ -13,9 +13,9 @@
 //    (a global default which can be customised per use).
 //    https://github.com/react-ui-org/react-ui/issues/232
 
-@use '../../../styles/settings/forms';
-@use '../../../styles/tools/breakpoint';
-@use '../../../styles/tools/spacing';
+@use '../../styles/settings/forms';
+@use '../../styles/tools/breakpoint';
+@use '../../styles/tools/spacing';
 @use 'theme';
 
 .root {

package/src/lib/components/FormLayout/FormLayoutContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export const FormLayoutContext = React.createContext(null);

package/src/lib/components/{layout/FormLayout → FormLayout}/FormLayoutCustomField.jsx

@@ -1,9 +1,10 @@
 import PropTypes from 'prop-types';
-import React from 'react';
-import getRootSizeClassName from '../../../helpers/getRootSizeClassName';
-import getRootValidationStateClassName from '../../../helpers/getRootValidationStateClassName';
-import { withProviderContext } from '../../../provider';
+import React, { useContext } from 'react';
+import getRootSizeClassName from '../../helpers/getRootSizeClassName';
+import getRootValidationStateClassName from '../../helpers/getRootValidationStateClassName';
+import { withProviderContext } from '../../provider';
 import styles from './FormLayoutCustomField.scss';
+import { FormLayoutContext } from './FormLayoutContext';
 
 const renderLabel = (id, label, labelForId) => {
   if (labelForId && label) {
@@ -40,31 +41,34 @@ export const FormLayoutCustomField = ({
   innerFieldSize,
   label,
   labelForId,
-  layout,
   required,
   validationState,
-}) => (
-  <div
-    id={id}
-    className={[
-      styles.root,
-      fullWidth ? styles.isRootFullWidth : '',
-      layout === 'vertical' ? styles.rootLayoutVertical : styles.rootLayoutHorizontal,
-      disabled ? styles.isRootDisabled : '',
-      required ? styles.isRootRequired : '',
-      getRootSizeClassName(innerFieldSize, styles),
-      getRootValidationStateClassName(validationState, styles),
-    ].join(' ')}
-  >
-    {renderLabel(id, label, labelForId)}
+}) => {
+  const context = useContext(FormLayoutContext);
+
+  return (
     <div
-      id={id && `${id}__field`}
-      className={styles.field}
+      id={id}
+      className={[
+        styles.root,
+        fullWidth ? styles.isRootFullWidth : '',
+        context && context.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
+        disabled ? styles.isRootDisabled : '',
+        required ? styles.isRootRequired : '',
+        getRootSizeClassName(innerFieldSize, styles),
+        getRootValidationStateClassName(validationState, styles),
+      ].join(' ')}
     >
-      {children}
+      {renderLabel(id, label, labelForId)}
+      <div
+        id={id && `${id}__field`}
+        className={styles.field}
+      >
+        {children}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 FormLayoutCustomField.defaultProps = {
   children: null,
@@ -74,7 +78,6 @@ FormLayoutCustomField.defaultProps = {
   innerFieldSize: null,
   label: null,
   labelForId: undefined,
-  layout: 'vertical',
   required: false,
   validationState: null,
 };
@@ -94,6 +97,10 @@ FormLayoutCustomField.propTypes = {
   fullWidth: PropTypes.bool,
   /**
    * ID of the root HTML element.
+   *
+   * Also serves as base for ids of nested elements:
+   * * `<ID>__field`
+   * * `<ID>__label`
    */
   id: PropTypes.string,
   /**
@@ -105,13 +112,9 @@ FormLayoutCustomField.propTypes = {
    */
   label: PropTypes.string,
   /**
-   * Optional ID of labelled field to keep accessibility features.
+   * Optional ID of labeled field to keep accessibility features. Only available if `label` is set.
    */
   labelForId: PropTypes.string,
-  /**
-   * Layout of the field, controlled by parent FormLayout.
-   */
-  layout: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * If `true`, label will be styled as required.
    */

package/src/lib/components/{layout/FormLayout → FormLayout}/FormLayoutCustomField.scss

@@ -1,7 +1,7 @@
-@use '../../../styles/tools/form-fields/foundation';
-@use '../../../styles/tools/form-fields/box-field-layout';
-@use '../../../styles/tools/form-fields/box-field-sizes';
-@use '../../../styles/tools/form-fields/variants';
+@use '../../styles/tools/form-fields/foundation';
+@use '../../styles/tools/form-fields/box-field-layout';
+@use '../../styles/tools/form-fields/box-field-sizes';
+@use '../../styles/tools/form-fields/variants';
 
 // Foundation
 .root {