@react-ui-org/react-ui 0.42.0 → 0.44.0

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 {

package/src/lib/components/{layout/FormLayout → FormLayout}/README.mdx

@@ -1,7 +1,7 @@
 ---
 name: FormLayout
 menu: 'Layouts'
-route: /components/layout/form-layout
+route: /components/form-layout
 ---
 
 # FormLayout
@@ -12,16 +12,16 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { Placeholder } from '../../../../docs/_components/Placeholder/Placeholder'
-import { Button } from '../../ui/Button/Button'
-import { ButtonGroup } from '../../ui/ButtonGroup/ButtonGroup'
-import { CheckboxField } from '../../ui/CheckboxField/CheckboxField'
-import { FileInputField } from '../../ui/FileInputField/FileInputField'
-import { Radio } from '../../ui/Radio/Radio'
-import { SelectField } from '../../ui/SelectField/SelectField'
-import { TextArea } from '../../ui/TextArea/TextArea'
-import { TextField } from '../../ui/TextField/TextField'
-import { Toggle } from '../../ui/Toggle/Toggle'
+import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
+import { Button } from '../Button/Button'
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup'
+import { CheckboxField } from '../CheckboxField/CheckboxField'
+import { FileInputField } from '../FileInputField/FileInputField'
+import { Radio } from '../Radio/Radio'
+import { SelectField } from '../SelectField/SelectField'
+import { TextArea } from '../TextArea/TextArea'
+import { TextField } from '../TextField/TextField'
+import { Toggle } from '../Toggle/Toggle'
 import { Center } from '../Center/Center'
 import { Toolbar } from '../Toolbar/Toolbar'
 import { ToolbarItem } from '../Toolbar/ToolbarItem'
@@ -135,7 +135,7 @@ with CSS custom properties.
 - The `custom` mode (local) allows you to enter any **custom label width for
   individual FormLayouts.**
 
-Try to resize the playground to see how individual options work.
+📐 Try resizing the playground to see how individual options work.
 
 <Playground>
   {() => {
@@ -150,37 +150,35 @@ Try to resize the playground to see how individual options work.
           <ToolbarItem>
             <ButtonGroup aria-labelledby="#label-width-options-label">
               <Button
-                label="default"
-                clickHandler={() => setLabelWidth('default')}
                 color={labelWidth === 'default' ? 'dark' : 'primary'}
+                label="default"
+                onClick={() => setLabelWidth('default')}
               />
               <Button
-                label="auto"
-                clickHandler={() => setLabelWidth('auto')}
                 color={labelWidth === 'auto' ? 'dark' : 'primary'}
+                label="auto"
+                onClick={() => setLabelWidth('auto')}
               />
               <Button
-                label="limited"
-                clickHandler={() => setLabelWidth('limited')}
                 color={labelWidth === 'limited' ? 'dark' : 'primary'}
+                label="limited"
+                onClick={() => setLabelWidth('limited')}
               />
               <Button
-                label="custom"
-                clickHandler={() => setLabelWidth('custom')}
                 color={labelWidth === 'custom' ? 'dark' : 'primary'}
+                label="custom"
+                onClick={() => setLabelWidth('custom')}
               />
             </ButtonGroup>
           </ToolbarItem>
           {labelWidth === 'custom' && (
             <ToolbarItem>
               <TextField
-                changeHandler={(e) => (
-                  setCustomLabelWidth(e.target.value)
-                )}
                 inputSize={5}
                 isLabelVisible={false}
                 label="Custom label width"
                 layout="horizontal"
+                onChange={(e) => setCustomLabelWidth(e.target.value)}
                 value={customLabelWidth}
               />
             </ToolbarItem>
@@ -340,9 +338,9 @@ properly vertically aligned.
             </ToolbarItem>
             <ToolbarItem>
               <CheckboxField
-                changeHandler={() => setIsChecked(!isChecked)}
                 checked={isChecked}
                 label="Another form field"
+                onChange={() => setIsChecked(!isChecked)}
               />
             </ToolbarItem>
           </Toolbar>
@@ -383,14 +381,14 @@ This is a demo of all components supported by FormLayout.
           <ToolbarItem>
             <ButtonGroup>
               <Button
-                label="Vertical layout"
-                clickHandler={() => setFieldLayout('vertical')}
                 color={fieldLayout === 'vertical' ? 'dark' : 'primary'}
+                label="Vertical layout"
+                onClick={() => setFieldLayout('vertical')}
               />
               <Button
-                label="Horizontal layout"
-                clickHandler={() => setFieldLayout('horizontal')}
                 color={fieldLayout === 'horizontal' ? 'dark' : 'primary'}
+                label="Horizontal layout"
+                onClick={() => setFieldLayout('horizontal')}
               />
             </ButtonGroup>
           </ToolbarItem>
@@ -398,34 +396,28 @@ This is a demo of all components supported by FormLayout.
         <FormLayout fieldLayout={fieldLayout} labelWidth="auto">
           <>
             <TextField
-              changeHandler={() => {}}
               label="First Name"
             />
             <TextField
-              changeHandler={() => {}}
               label="Last Name"
             />
           </>
           <TextField
-            changeHandler={() => {}}
             helpText="Optional"
             label="Email address"
             type="email"
           />
           <>
             <TextField
-              changeHandler={() => {}}
               label="Address"
               placeholder="Address line 1"
             />
             <TextField
-              changeHandler={() => {}}
               isLabelVisible={false}
               label="Address 2"
               placeholder="Address line 2"
             />
             <TextField
-              changeHandler={() => {}}
               inputSize={6}
               label="ZIP"
               validationState="invalid"
@@ -435,37 +427,35 @@ This is a demo of all components supported by FormLayout.
               <span>Czech Republic</span>
             </FormLayoutCustomField>
             <CheckboxField
-              changeHandler={() => setIsDeliveryAddress(!isDeliveryAddress)}
               checked={isDeliveryAddress}
               label="This is my delivery address"
+              onChange={() => setIsDeliveryAddress(!isDeliveryAddress)}
             />
           </>
           <SelectField
-            changeHandler={(e) => setFruit(e.target.value)}
             label="Your favourite fruit"
+            onChange={(e) => setFruit(e.target.value)}
             options={options}
             value={fruit}
           />
           <TextArea
-            changeHandler={() => {}}
             fullWidth
             label="Message"
             rows={3}
           />
           <FileInputField
-            changeHandler={() => {}}
             label="Attachment"
           />
           <Toggle
-            changeHandler={() => setReceiveNewsletter(!receiveNewsletter)}
             checked={receiveNewsletter}
             helpText="Only once per week!"
             label="Receive weekly newsletter"
+            onChange={() => setReceiveNewsletter(!receiveNewsletter)}
             required
           />
           <Radio
-            changeHandler={(e) => setFruit(e.target.value)}
             label="And fruit again!"
+            onChange={(e) => setFruit(e.target.value)}
             options={options}
             value={fruit}
           />

package/src/lib/components/{layout/FormLayout → FormLayout}/index.js

@@ -1,2 +1,3 @@
 export { default as FormLayout } from './FormLayout';
+export { FormLayoutContext } from './FormLayoutContext';
 export { default as FormLayoutCustomField } from './FormLayoutCustomField';