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

package/src/lib/components/{ui/Table → Table}/_settings.scss

@@ -1,8 +1,8 @@
 @use 'sass:map';
-@use '../../../styles/theme/borders';
-@use '../../../styles/theme/colors';
-@use '../../../styles/theme/typography';
-@use '../../../styles/tools/spacing';
+@use '../../styles/theme/borders';
+@use '../../styles/theme/colors';
+@use '../../styles/theme/typography';
+@use '../../styles/tools/spacing';
 
 $cell-padding-x: spacing.of(3);
 $cell-padding-y: spacing.of(1);

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

@@ -1,7 +1,7 @@
 ---
 name: Tabs
-menu: 'UI'
-route: /components/ui/tabs
+menu: 'Miscellaneous'
+route: /components/tabs
 ---
 
 # Tabs
@@ -10,7 +10,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { Icon } from '../../../../docs/_components/Icon/Icon'
+import { Icon } from '../../../docs/_components/Icon/Icon'
 import ScrollView from '../ScrollView'
 import { Tabs } from './Tabs'
 import { TabsItem } from './TabsItem'

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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import styles from './Tabs.scss';
 
 export const Tabs = ({
@@ -24,12 +24,12 @@ Tabs.defaultProps = {
 
 Tabs.propTypes = {
   /**
-   * Individual `TabsItem`s.
+   * Nested `TabsItem` elements.
    */
   children: PropTypes.node,
   /**
-   * ID of the root HTML element. It also serves as a prefix for inner list element:
-   * `<ID>__list`.
+   * ID of the root HTML element. It also serves as base for nested element:
+   * * `<ID>__list`
    */
   id: PropTypes.string,
 };

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

@@ -1,6 +1,6 @@
 // 1. Decorative bottom border.
 
-@use '../../../styles/tools/reset';
+@use '../../styles/tools/reset';
 @use 'theme';
 
 .list {

package/src/lib/components/{ui/Tabs → Tabs}/TabsItem.jsx

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import styles from './TabsItem.scss';
 
 export const TabsItem = ({
@@ -63,8 +63,9 @@ TabsItem.propTypes = {
    */
   href: PropTypes.string.isRequired,
   /**
-   * ID of the root HTML element. It also serves as a prefix for important inner elements:
-   * `<ID>__link`, `<ID>__label`.
+   * ID of the root HTML element. It also serves as base for nested elements:
+   * * `<ID>__link`
+   * * `<ID>__label`
    */
   id: PropTypes.string,
   /**

package/src/lib/components/{ui/Tabs → Tabs}/TabsItem.scss

@@ -1,8 +1,8 @@
 // 1. Keep inactive items under Tabs' decorative bottom border and pop active ones above it.
 
-@use '../../../styles/tools/breakpoint';
-@use '../../../styles/tools/reset';
-@use '../../../styles/tools/transition';
+@use '../../styles/tools/breakpoint';
+@use '../../styles/tools/reset';
+@use '../../styles/tools/transition';
 @use 'theme';
 
 .root {

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

@@ -1,7 +1,7 @@
 ---
 name: Text
-menu: 'UI'
-route: /components/ui/text
+menu: 'Miscellaneous'
+route: /components/text
 ---
 
 # Text
@@ -10,10 +10,10 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { Placeholder } from '../../../../docs/_components/Placeholder/Placeholder'
-import { Toolbar } from '../../layout/Toolbar/Toolbar'
-import { ToolbarGroup } from '../../layout/Toolbar/ToolbarGroup'
-import { ToolbarItem } from '../../layout/Toolbar/ToolbarItem'
+import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
+import { Toolbar } from '../Toolbar/Toolbar'
+import { ToolbarGroup } from '../Toolbar/ToolbarGroup'
+import { ToolbarItem } from '../Toolbar/ToolbarItem'
 import { Button } from '../Button/Button'
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup'
 import { TextField } from '../TextField/TextField'
@@ -78,10 +78,10 @@ appended by an ellipsis (`…`).
         <Toolbar align="baseline">
           <ToolbarItem>
             <TextField
-              changeHandler={(e) => setLines(e.target.value)}
               label="Number of lines"
               min={1}
               max={100}
+              onChange={(e) => setLines(e.target.value)}
               type="number"
               value={lines}
             />
@@ -156,19 +156,19 @@ will override automatic break point selection in `auto` mode when present.
             <ToolbarItem>
               <ButtonGroup aria-labelledby="#word-wrapping-options-label">
                 <Button
-                  label="normal"
-                  clickHandler={() => setWordWrapping('normal')}
                   color={wordWrapping === 'normal' ? 'dark' : 'primary'}
+                  label="normal"
+                  onClick={() => setWordWrapping('normal')}
                 />
                 <Button
-                  label="long-words"
-                  clickHandler={() => setWordWrapping('long-words')}
                   color={wordWrapping === 'long-words' ? 'dark' : 'primary'}
+                  label="long-words"
+                  onClick={() => setWordWrapping('long-words')}
                 />
                 <Button
-                  label="anywhere"
-                  clickHandler={() => setWordWrapping('anywhere')}
                   color={wordWrapping === 'anywhere' ? 'dark' : 'primary'}
+                  label="anywhere"
+                  onClick={() => setWordWrapping('anywhere')}
                 />
               </ButtonGroup>
             </ToolbarItem>
@@ -180,19 +180,19 @@ will override automatic break point selection in `auto` mode when present.
             <ToolbarItem>
               <ButtonGroup aria-labelledby="#hyphens-options-label">
                 <Button
-                  label="none"
-                  clickHandler={() => setHyphens('none')}
                   color={hyphens === 'none' ? 'dark' : 'primary'}
+                  label="none"
+                  onClick={() => setHyphens('none')}
                 />
                 <Button
-                  label="auto"
-                  clickHandler={() => setHyphens('auto')}
                   color={hyphens === 'auto' ? 'dark' : 'primary'}
+                  label="auto"
+                  onClick={() => setHyphens('auto')}
                 />
                 <Button
-                  label="manual"
-                  clickHandler={() => setHyphens('manual')}
                   color={hyphens === 'manual' ? 'dark' : 'primary'}
+                  label="manual"
+                  onClick={() => setHyphens('manual')}
                 />
               </ButtonGroup>
             </ToolbarItem>

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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../../provider';
+import { withProviderContext } from '../../provider';
 import getRootHyphensClassName from './helpers/getRootHyphensClassName';
 import getRootWordWrappingClassName from './helpers/getRootWordWrappingClassName';
 import styles from './Text.scss';

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

@@ -1,7 +1,7 @@
 ---
 name: TextArea
-menu: 'UI'
-route: /components/ui/text-area
+menu: 'Inputs'
+route: /components/text-area
 ---
 
 # TextArea
@@ -348,10 +348,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 `textarea` 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 `textarea` HTML element. This enables making the component
+interactive and helps improve its [accessibility](#forwarding-html-attributes).
 
 <Props table of={TextArea} />
 
@@ -359,3 +359,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/{ui/TextArea → TextArea}/TextArea.jsx

@@ -1,21 +1,21 @@
 import PropTypes from 'prop-types';
-import React from 'react';
-import getRootSizeClassName from '../../../helpers/getRootSizeClassName';
-import getRootValidationStateClassName from '../../../helpers/getRootValidationStateClassName';
-import { withProviderContext } from '../../../provider';
-import transferProps from '../../../utils/transferProps';
+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 './TextArea.scss';
 
 export const TextArea = ({
-  changeHandler,
   cols,
   disabled,
   forwardedRef,
   fullWidth,
   helpText,
   id,
-  inFormLayout,
   isLabelVisible,
   label,
   layout,
@@ -28,79 +28,82 @@ export const TextArea = ({
   value,
   variant,
   ...restProps
-}) => (
-  <label
-    className={[
-      styles.root,
-      fullWidth ? styles.isRootFullWidth : '',
-      inFormLayout ? styles.isRootInFormLayout : '',
-      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
+}) => {
+  const context = useContext(FormLayoutContext);
+
+  return (
+    <label
       className={[
-        styles.label,
-        isLabelVisible ? '' : styles.isLabelHidden,
+        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(' ')}
-      id={id && `${id}__labelText`}
+      htmlFor={id}
+      id={id && `${id}__label`}
     >
-      {label}
-    </div>
-    <div className={styles.field}>
-      <div className={styles.inputContainer}>
-        <textarea
-          {...transferProps(restProps)}
-          className={styles.input}
-          cols={cols}
-          disabled={disabled}
-          id={id}
-          onChange={changeHandler}
-          placeholder={placeholder}
-          ref={forwardedRef}
-          required={required}
-          rows={rows}
-          value={value}
-        />
-        {variant === 'filled' && (
-          <div className={styles.bottomLine} />
-        )}
+      <div
+        className={[
+          styles.label,
+          isLabelVisible ? '' : styles.isLabelHidden,
+        ].join(' ')}
+        id={id && `${id}__labelText`}
+      >
+        {label}
       </div>
-      {helpText && (
-        <div
-          className={styles.helpText}
-          id={id && `${id}__helpText`}
-        >
-          {helpText}
-        </div>
-      )}
-      {validationText && (
-        <div
-          className={styles.validationText}
-          id={id && `${id}__validationText`}
-        >
-          {validationText}
+      <div className={styles.field}>
+        <div className={styles.inputContainer}>
+          <textarea
+            {...transferProps(restProps)}
+            className={styles.input}
+            cols={cols}
+            disabled={disabled}
+            id={id}
+            placeholder={placeholder}
+            ref={forwardedRef}
+            required={required}
+            rows={rows}
+            value={value}
+          />
+          {variant === 'filled' && (
+            <div className={styles.bottomLine} />
+          )}
         </div>
-      )}
-    </div>
-  </label>
-);
+        {helpText && (
+          <div
+            className={styles.helpText}
+            id={id && `${id}__helpText`}
+          >
+            {helpText}
+          </div>
+        )}
+        {validationText && (
+          <div
+            className={styles.validationText}
+            id={id && `${id}__validationText`}
+          >
+            {validationText}
+          </div>
+        )}
+      </div>
+    </label>
+  );
+};
 
 TextArea.defaultProps = {
-  changeHandler: null,
   cols: null,
   disabled: false,
   forwardedRef: undefined,
   fullWidth: false,
   helpText: null,
   id: undefined,
-  inFormLayout: false,
   isLabelVisible: true,
   layout: 'vertical',
   placeholder: null,
@@ -114,10 +117,6 @@ TextArea.defaultProps = {
 };
 
 TextArea.propTypes = {
-  /**
-   * Function to call when the input has changed.
-   */
-  changeHandler: PropTypes.func,
   /**
    * The number of visible text columns for the control.
    */
@@ -142,15 +141,13 @@ TextArea.propTypes = {
    * Optional help text.
    */
   helpText: PropTypes.node,
-  /**
-   * ID of the input HTML element. It also serves as a prefix for important inner elements:
-   * `<ID>__label`, `<ID>__labelText`, and `<ID>__helpText`, and `<ID>__validationText`.
+  /** ID of the input HTML element. It also serves as a prefix for nested elements:
+   * * `<ID>__label`
+   * * `<ID>__labelText`
+   * * `<ID>__helpText`
+   * * `<ID>__validationText`
    */
   id: PropTypes.string,
-  /**
-   * Treat the field differently when it's inside a FormLayout. Do not set manually!
-   */
-  inFormLayout: PropTypes.bool,
   /**
    * If `false`, the label will be visually hidden (but remains accessible by assistive
    * technologies).
@@ -162,6 +159,9 @@ TextArea.propTypes = {
   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']),
   /**

package/src/lib/components/{ui/TextArea → TextArea}/TextArea.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/TextField → TextField}/README.mdx

@@ -1,7 +1,7 @@
 ---
 name: TextField
-menu: 'UI'
-route: /components/ui/text-field
+menu: 'Inputs'
+route: /components/text-field
 ---
 
 # TextField
@@ -491,10 +491,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={TextField} />
 
@@ -513,3 +513,4 @@ Head to [Forms Theming][theming-forms] to see shared form theming options.
 [input-tel]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel
 [input-password]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password
 [theming-forms]: /customize/theming/forms
+[React synthetic events]: https://reactjs.org/docs/events.html

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

@@ -1,22 +1,22 @@
 import PropTypes from 'prop-types';
-import React from 'react';
-import getRootSizeClassName from '../../../helpers/getRootSizeClassName';
-import getRootValidationStateClassName from '../../../helpers/getRootValidationStateClassName';
-import { withProviderContext } from '../../../provider';
-import transferProps from '../../../utils/transferProps';
+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 './TextField.scss';
 
 const SMALL_INPUT_SIZE = 10;
 
 export const TextField = ({
-  changeHandler,
   disabled,
   forwardedRef,
   fullWidth,
   helpText,
   id,
-  inFormLayout,
   inputSize,
   isLabelVisible,
   label,
@@ -31,6 +31,7 @@ export const TextField = ({
   variant,
   ...restProps
 }) => {
+  const context = useContext(FormLayoutContext);
   const hasSmallInput = (inputSize !== null) && (inputSize <= SMALL_INPUT_SIZE);
 
   return (
@@ -39,9 +40,10 @@ export const TextField = ({
         styles.root,
         fullWidth ? styles.isRootFullWidth : '',
         hasSmallInput ? styles.hasRootSmallInput : '',
-        inFormLayout ? styles.isRootInFormLayout : '',
-        inputSize ? styles.hasRootCustomInputSize : '',
-        layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
+        context ? styles.isRootInFormLayout : '',
+        resolveContextOrProp(context && context.layout, layout) === 'horizontal'
+          ? styles.rootLayoutHorizontal
+          : styles.rootLayoutVertical,
         disabled ? styles.isRootDisabled : '',
         required ? styles.isRootRequired : '',
         getRootSizeClassName(size, styles),
@@ -68,7 +70,6 @@ export const TextField = ({
             className={styles.input}
             disabled={disabled}
             id={id}
-            onChange={changeHandler}
             placeholder={placeholder}
             ref={forwardedRef}
             required={required}
@@ -102,13 +103,11 @@ export const TextField = ({
 };
 
 TextField.defaultProps = {
-  changeHandler: null,
   disabled: false,
   forwardedRef: undefined,
   fullWidth: false,
   helpText: null,
   id: undefined,
-  inFormLayout: false,
   inputSize: null,
   isLabelVisible: true,
   layout: 'vertical',
@@ -123,10 +122,6 @@ TextField.defaultProps = {
 };
 
 TextField.propTypes = {
-  /**
-   * Function to call when the input has changed.
-   */
-  changeHandler: PropTypes.func,
   /**
    * If `true`, the input will be disabled.
    */
@@ -148,17 +143,16 @@ TextField.propTypes = {
    */
   helpText: PropTypes.node,
   /**
-   * ID of the input HTML element. It also serves as a prefix for important inner elements:
-   * `<ID>__label`, `<ID>__labelText`, `<ID>__helpText`, and `<ID>__validationText`.
+   * ID of the input HTML element. It also serves as a prefix for nested elements:
+   * * `<ID>__label`
+   * * `<ID>__labelText`
+   * * `<ID>__helpText`
+   * * `<ID>__validationText`
    */
   id: PropTypes.string,
   /**
    * Treat the field differently when it's inside a FormLayout. Do not set manually!
    */
-  inFormLayout: PropTypes.bool,
-  /**
-   * Width of the input field. Translated as `size` attribute for input types other than `number`.
-   */
   inputSize: PropTypes.number,
   /**
    * If `false`, the label will be visually hidden (but remains accessible by assistive
@@ -171,6 +165,9 @@ TextField.propTypes = {
   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']),
   /**

package/src/lib/components/{ui/TextField → TextField}/TextField.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 {