@react-ui-org/react-ui 0.47.0 → 0.49.0

package/src/lib/components/CheckboxField/CheckboxField.jsx

@@ -5,24 +5,21 @@ import { classNames } from '../../utils/classNames';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
-import withForwardedRef from '../withForwardedRef';
 import styles from './CheckboxField.scss';
 
-export const CheckboxField = ({
-  checked,
-  disabled,
-  forwardedRef,
-  helpText,
-  id,
-  isLabelVisible,
-  label,
-  labelPosition,
-  required,
-  validationState,
-  validationText,
-  value,
-  ...restProps
-}) => {
+export const CheckboxField = React.forwardRef((props, ref) => {
+  const {
+    disabled,
+    helpText,
+    id,
+    isLabelVisible,
+    label,
+    labelPosition,
+    required,
+    validationState,
+    validationText,
+    ...restProps
+  } = props;
   const context = useContext(FormLayoutContext);
 
   return (
@@ -30,7 +27,7 @@ export const CheckboxField = ({
       className={classNames(
         styles.root,
         context && styles.isRootInFormLayout,
-        context && context.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
+        context && context.layout === 'horizontal' ? styles.isRootLayoutHorizontal : styles.isRootLayoutVertical,
         labelPosition === 'before' && styles.hasRootLabelBefore,
         disabled && styles.isRootDisabled,
         required && styles.isRootRequired,
@@ -51,14 +48,12 @@ export const CheckboxField = ({
         </div>
         <input
           {...transferProps(restProps)}
-          checked={checked}
           className={styles.input}
           disabled={disabled}
           id={id}
-          ref={forwardedRef}
+          ref={ref}
           required={required}
           type="checkbox"
-          value={value}
         />
       </div>
       {helpText && (
@@ -79,12 +74,10 @@ export const CheckboxField = ({
       )}
     </label>
   );
-};
+});
 
 CheckboxField.defaultProps = {
-  checked: undefined,
   disabled: false,
-  forwardedRef: undefined,
   helpText: null,
   id: undefined,
   isLabelVisible: true,
@@ -92,26 +85,13 @@ CheckboxField.defaultProps = {
   required: false,
   validationState: null,
   validationText: null,
-  value: undefined,
 };
 
 CheckboxField.propTypes = {
-  /**
-   * If `true`, the input will be checked.
-   */
-  checked: PropTypes.bool,
   /**
    * 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 }),
-  ]),
   /**
    * Optional help text.
    */
@@ -151,15 +131,8 @@ CheckboxField.propTypes = {
    * Validation message to be displayed.
    */
   validationText: PropTypes.node,
-  /**
-   * Value of the input.
-   */
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
 };
 
-export const CheckboxFieldWithGlobalProps = withForwardedRef(withGlobalProps(CheckboxField, 'CheckboxField'));
+export const CheckboxFieldWithGlobalProps = withGlobalProps(CheckboxField, 'CheckboxField');
 
 export default CheckboxFieldWithGlobalProps;

package/src/lib/components/CheckboxField/README.mdx

@@ -12,7 +12,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { CheckboxField } from './CheckboxField'
+import { CheckboxField } from '../..'
 
 ## Basic Usage
 
@@ -181,12 +181,22 @@ Disabled state makes the input unavailable.
   />
 </Playground>
 
-## API
+## Forwarding HTML Attributes
+
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or you can **add whatever HTML attribute
+you like.** All attributes that don't interfere with the API are forwarded to
+the native HTML `<input>`. This enables making the component interactive and
+helps to improve its accessibility.
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[checkbox] input type.
 
-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 ref
+
+If you provide [ref], it is forwarded to the native HTML `<input>` element.
+
+## API
 
 <Props table of={CheckboxField} />
 
@@ -201,3 +211,5 @@ options. On top of that, the following options are available for CheckboxField.
 | `--rui-FormField--check__input--checkbox--checked__background-image` | Background image of checked input            |
 
 [React synthetic events]: https://reactjs.org/docs/events.html
+[checkbox]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#additional_attributes
+[ref]: https://reactjs.org/docs/refs-and-the-dom.html

package/src/lib/components/CheckboxField/index.js

@@ -1 +1 @@
-export { default } from './CheckboxField';
+export { default as CheckboxField } from './CheckboxField';

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

@@ -6,23 +6,23 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/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
-}) => {
+export const FileInputField = React.forwardRef((props, ref) => {
+  const {
+    disabled,
+    fullWidth,
+    helpText,
+    id,
+    isLabelVisible,
+    label,
+    layout,
+    required,
+    validationState,
+    validationText,
+    ...restProps
+  } = props;
+
   const context = useContext(FormLayoutContext);
 
   return (
@@ -32,8 +32,8 @@ export const FileInputField = ({
         fullWidth && styles.isRootFullWidth,
         context && styles.isRootInFormLayout,
         resolveContextOrProp(context && context.layout, layout) === 'horizontal'
-          ? styles.rootLayoutHorizontal
-          : styles.rootLayoutVertical,
+          ? styles.isRootLayoutHorizontal
+          : styles.isRootLayoutVertical,
         disabled && styles.isRootDisabled,
         required && styles.isRootRequired,
         getRootValidationStateClassName(validationState, styles),
@@ -57,7 +57,7 @@ export const FileInputField = ({
             className={styles.input}
             disabled={disabled}
             id={id}
-            ref={forwardedRef}
+            ref={ref}
             required={required}
             type="file"
           />
@@ -81,11 +81,10 @@ export const FileInputField = ({
       </div>
     </label>
   );
-};
+});
 
 FileInputField.defaultProps = {
   disabled: false,
-  forwardedRef: undefined,
   fullWidth: false,
   helpText: null,
   id: undefined,
@@ -101,14 +100,6 @@ 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.
    */
@@ -158,6 +149,6 @@ FileInputField.propTypes = {
   validationText: PropTypes.node,
 };
 
-export const FileInputFieldWithGlobalProps = withForwardedRef(withGlobalProps(FileInputField, 'FileInputField'));
+export const FileInputFieldWithGlobalProps = withGlobalProps(FileInputField, 'FileInputField');
 
 export default FileInputFieldWithGlobalProps;

package/src/lib/components/FileInputField/FileInputField.scss

@@ -49,12 +49,12 @@
 }
 
 // Layouts
-.rootLayoutVertical,
-.rootLayoutHorizontal {
+.isRootLayoutVertical,
+.isRootLayoutHorizontal {
     @include box-field-layout.vertical();
 }
 
-.rootLayoutHorizontal {
+.isRootLayoutHorizontal {
     @include box-field-layout.horizontal();
 }
 

package/src/lib/components/FileInputField/README.mdx

@@ -12,7 +12,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { FileInputField } from './FileInputField'
+import { FileInputField } from '../..'
 
 ## Basic Usage
 
@@ -66,28 +66,6 @@ Full-width fields span the full width of a parent:
   />
 </Playground>
 
-## Forwarding HTML Attributes
-
-When you want to refine your file input fields even further, you
-can **add whatever HTML attribute you like.** All attributes that don't
-interfere with [component's API](#api) are forwarded to the native HTML input.
-
-<Playground>
-  <FileInputField
-    accept=".pdf,.jpg,.jpeg,.png"
-    helpText={`
-      Choose up to 10 files. Allowed extensions are .pdf, .jpg, .jpeg, or .png.
-      Size limit is 10 MB.
-    `}
-    label="Attachment"
-    multiple
-  />
-</Playground>
-
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)
-type.
-
 ## Invisible Label
 
 In some cases, it may be convenient to visually hide the field label. The label
@@ -187,12 +165,34 @@ It's possible to disable the whole input.
   />
 </Playground>
 
-## API
+## 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).
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or you can **add whatever HTML attribute
+you like.** All attributes that don't interfere with the API are forwarded to
+the native HTML `<input>`. This enables making the component interactive and
+helps to improve its accessibility.
+
+<Playground>
+  <FileInputField
+    accept=".pdf,.jpg,.jpeg,.png"
+    helpText={`
+      Choose up to 10 files. Allowed extensions are .pdf, .jpg, .jpeg, or .png.
+      Size limit is 10 MB.
+    `}
+    label="Attachment"
+    multiple
+  />
+</Playground>
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[file] input type.
+
+## Forwarding ref
+
+If you provide [ref], it is forwarded to the native HTML `<input>` element.
+
+## API
 
 <Props table of={FileInputField} />
 
@@ -202,3 +202,5 @@ Head to [Forms Theming](/customize/theming/forms) to see shared form theming
 options.
 
 [React synthetic events]: https://reactjs.org/docs/events.html
+[file]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#additional_attributes
+[ref]: https://reactjs.org/docs/refs-and-the-dom.html

package/src/lib/components/FileInputField/index.js

@@ -1 +1 @@
-export { default } from './FileInputField';
+export { default as FileInputField } from './FileInputField';

package/src/lib/components/FormLayout/FormLayout.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
@@ -12,8 +13,8 @@ export const FormLayout = ({
   autoWidth,
   children,
   fieldLayout,
-  id,
   labelWidth,
+  ...restProps
 }) => {
   if (isChildrenEmpty(children)) {
     return null;
@@ -23,10 +24,10 @@ export const FormLayout = ({
 
   const fieldLayoutClass = (layout) => {
     if (layout === 'horizontal') {
-      return styles.rootFieldLayoutHorizontal;
+      return styles.isRootFieldLayoutHorizontal;
     }
 
-    return styles.rootFieldLayoutVertical;
+    return styles.isRootFieldLayoutVertical;
   };
 
   const labelWidthClass = (width) => {
@@ -47,7 +48,7 @@ export const FormLayout = ({
 
   return (
     <div
-      id={id}
+      {...transferProps(restProps)}
       className={classNames(
         styles.root,
         fieldLayoutClass(fieldLayout),
@@ -69,7 +70,6 @@ FormLayout.defaultProps = {
   autoWidth: false,
   children: null,
   fieldLayout: 'vertical',
-  id: undefined,
   labelWidth: 'default',
 };
 
@@ -96,10 +96,6 @@ FormLayout.propTypes = {
    * Layout that is forced on children form fields.
    */
   fieldLayout: PropTypes.oneOf(['horizontal', 'vertical']),
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
   /**
    * Width of the column with form field labels. Only available if the `fieldLayout` is set to
    * `horizontal`.

package/src/lib/components/FormLayout/FormLayout.scss

@@ -24,14 +24,14 @@
     @include spacing.bottom(layouts);
 }
 
-.rootFieldLayoutVertical,
-.rootFieldLayoutHorizontal {
+.isRootFieldLayoutVertical,
+.isRootFieldLayoutHorizontal {
     display: grid;
     grid-template-columns: var(--rui-local-field-width);
     grid-row-gap: theme.$row-gap;
 }
 
-.rootFieldLayoutHorizontal {
+.isRootFieldLayoutHorizontal {
     @include breakpoint.up(forms.$horizontal-breakpoint) {
         grid-template-columns: var(--rui-local-label-width) var(--rui-local-field-width); // 1.
     }

package/src/lib/components/FormLayout/FormLayoutCustomField.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { withGlobalProps } from '../../provider';
+import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
@@ -45,6 +46,7 @@ export const FormLayoutCustomField = ({
   labelForId,
   required,
   validationState,
+  ...restProps
 }) => {
   const context = useContext(FormLayoutContext);
 
@@ -54,11 +56,12 @@ export const FormLayoutCustomField = ({
 
   return (
     <div
+      {...transferProps(restProps)}
       id={id}
       className={classNames(
         styles.root,
         fullWidth && styles.isRootFullWidth,
-        context && context.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
+        context && context.layout === 'horizontal' ? styles.isRootLayoutHorizontal : styles.isRootLayoutVertical,
         disabled && styles.isRootDisabled,
         required && styles.isRootRequired,
         getRootSizeClassName(innerFieldSize, styles),

package/src/lib/components/FormLayout/FormLayoutCustomField.scss

@@ -31,17 +31,17 @@
 }
 
 // Layouts
-.rootLayoutVertical,
-.rootLayoutHorizontal {
+.isRootLayoutVertical,
+.isRootLayoutHorizontal {
     @include box-field-layout.vertical();
 }
 
-.rootLayoutHorizontal {
+.isRootLayoutHorizontal {
     @include box-field-layout.horizontal();
 }
 
-.rootLayoutVertical .field,
-.rootLayoutHorizontal .field {
+.isRootLayoutVertical .field,
+.isRootLayoutHorizontal .field {
     width: auto;
 }
 
@@ -50,14 +50,14 @@
 }
 
 // Sizes
-.rootSizeSmall {
+.isRootSizeSmall {
     @include box-field-sizes.size(small);
 }
 
-.rootSizeMedium {
+.isRootSizeMedium {
     @include box-field-sizes.size(medium);
 }
 
-.rootSizeLarge {
+.isRootSizeLarge {
     @include box-field-sizes.size(large);
 }

package/src/lib/components/FormLayout/README.mdx

@@ -13,19 +13,21 @@ import {
   Props,
 } from 'docz'
 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 { Toolbar } from '../Toolbar/Toolbar'
-import { ToolbarItem } from '../Toolbar/ToolbarItem'
-import { FormLayout } from './FormLayout'
-import { FormLayoutCustomField } from './FormLayoutCustomField'
+import {
+  Button,
+  ButtonGroup,
+  CheckboxField,
+  FileInputField,
+  Radio,
+  SelectField,
+  TextArea,
+  TextField,
+  Toggle,
+  Toolbar,
+  ToolbarItem,
+  FormLayout,
+  FormLayoutCustomField,
+} from '../..'
 
 ## Basic Usage
 
@@ -436,6 +438,17 @@ This is a demo of all components supported by FormLayout.
   }}
 </Playground>
 
+## Forwarding HTML Attributes
+
+In addition to the options below in the [component's API](#api) section, you
+can specify [React synthetic events] or **any HTML attribute you like.** All
+attributes that don't interfere with the API are forwarded to the root `<div>`
+HTML element. This enables making the component interactive and helps to improve
+its accessibility.
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[div] element.
+
 ## API
 
 <Props table of={FormLayout} />
@@ -470,3 +483,5 @@ FormLayoutCustomField can be styled using a small subset of
 [fragments]: https://reactjs.org/docs/fragments.html
 [rui-232]: https://github.com/react-ui-org/react-ui/issues/232
 [rui-265]: https://github.com/react-ui-org/react-ui/issues/265
+[React synthetic events]: https://reactjs.org/docs/events.html
+[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes