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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-ui-org/react-ui",
   "description": "React UI is a themeable UI library for React apps.",
-  "version": "0.47.0",
+  "version": "0.48.0",
   "keywords": [
     "react",
     "ui",

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

@@ -12,8 +12,10 @@ import {
 } from 'docz'
 import Icon from '../../../docs/_components/Icon'
 import Placeholder from '../../../docs/_components/Placeholder'
-import Button from '../Button'
-import { Alert } from './Alert'
+import {
+  Button,
+  Alert,
+} from '../..'
 
 Alert presents feedback or important information to users.
 

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

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

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

@@ -13,7 +13,7 @@ import {
   Props,
 } from 'docz'
 import Placeholder from '../../../docs/_components/Placeholder'
-import { Badge } from './Badge'
+import { Badge } from '../..'
 
 ## Basic Usage
 

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

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

package/src/lib/components/Button/Button.jsx

@@ -6,30 +6,30 @@ import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
-import withForwardedRef from '../withForwardedRef';
 import { ButtonGroupContext } from '../ButtonGroup';
 import getRootLabelVisibilityClassName from './helpers/getRootLabelVisibilityClassName';
 import getRootPriorityClassName from './helpers/getRootPriorityClassName';
 import styles from './Button.scss';
 
-export const Button = ({
-  afterLabel,
-  beforeLabel,
-  block,
-  disabled,
-  endCorner,
-  feedbackIcon,
-  forwardedRef,
-  id,
-  label,
-  labelVisibility,
-  priority,
-  size,
-  startCorner,
-  type,
-  color,
-  ...restProps
-}) => {
+export const Button = React.forwardRef((props, ref) => {
+  const {
+    afterLabel,
+    beforeLabel,
+    block,
+    disabled,
+    endCorner,
+    feedbackIcon,
+    id,
+    label,
+    labelVisibility,
+    priority,
+    size,
+    startCorner,
+    type,
+    color,
+    ...restProps
+  } = props;
+
   const context = useContext(ButtonGroupContext);
 
   return (
@@ -55,7 +55,7 @@ export const Button = ({
       )}
       disabled={resolveContextOrProp(context && context.disabled, disabled) || !!feedbackIcon}
       id={id}
-      ref={forwardedRef}
+      ref={ref}
       type={type}
     >
       {startCorner && (
@@ -92,7 +92,7 @@ export const Button = ({
     </button>
     /* eslint-enable react/button-has-type */
   );
-};
+});
 
 Button.defaultProps = {
   afterLabel: null,
@@ -102,10 +102,10 @@ Button.defaultProps = {
   disabled: false,
   endCorner: null,
   feedbackIcon: null,
-  forwardedRef: undefined,
   id: undefined,
   labelVisibility: 'xs',
   priority: 'filled',
+  ref: undefined,
   size: 'medium',
   startCorner: null,
   type: 'button',
@@ -147,14 +147,6 @@ Button.propTypes = {
    * button is in feedback state.
    */
   feedbackIcon: PropTypes.node,
-  /**
-   * Reference forwarded to the `button` element.
-   */
-  forwardedRef: PropTypes.oneOfType([
-    PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    PropTypes.shape({ current: PropTypes.any }),
-  ]),
   /**
    * ID of the root HTML element.
    *
@@ -177,6 +169,14 @@ Button.propTypes = {
    * as the value is inherited in such case.
    */
   priority: PropTypes.oneOf(['filled', 'outline', 'flat']),
+  /**
+   * Reference forwarded to the `button` element.
+   */
+  ref: PropTypes.oneOfType([
+    PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
+    PropTypes.shape({ current: PropTypes.any }),
+  ]),
   /**
    * Size of the button.
    *
@@ -194,6 +194,6 @@ Button.propTypes = {
   type: PropTypes.oneOf(['button', 'submit']),
 };
 
-export const ButtonWithGlobalProps = withForwardedRef(withGlobalProps(Button, 'Button'));
+export const ButtonWithGlobalProps = withGlobalProps(Button, 'Button');
 
 export default ButtonWithGlobalProps;

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

@@ -12,8 +12,10 @@ import {
 } from 'docz'
 import Icon from '../../../docs/_components/Icon'
 import Placeholder from '../../../docs/_components/Placeholder'
-import Badge from '../Badge'
-import { Button } from './Button'
+import {
+  Badge,
+  Button,
+} from '../..'
 
 Buttons allow users to take actions.
 

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

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

package/src/lib/components/ButtonGroup/ButtonGroup.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { transferProps } from '../_helpers/transferProps';
 import styles from './ButtonGroup.scss';
 import { ButtonGroupContext } from './ButtonGroupContext';
 
@@ -21,13 +22,13 @@ export const ButtonGroup = ({
 
   return (
     <div
+      {...transferProps(restProps)}
       className={classNames(
         styles.root,
         block && styles.isRootBlock,
       )}
       id={id}
       role="group"
-      {...restProps}
     >
       <ButtonGroupContext.Provider
         value={{

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

@@ -13,8 +13,10 @@ import {
   Props,
 } from 'docz'
 import Icon from '../../../docs/_components/Icon'
-import Button from '../Button'
-import { ButtonGroup } from './ButtonGroup'
+import {
+  Button,
+  ButtonGroup,
+} from '../..'
 
 ## Basic Usage
 

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

@@ -10,11 +10,13 @@ import {
   Playground,
   Props,
 } from 'docz'
-import Button from '../Button'
-import ScrollView from '../ScrollView'
-import { Card } from './Card'
-import { CardBody } from './CardBody'
-import { CardFooter } from './CardFooter'
+import {
+  Button,
+  ScrollView,
+  Card,
+  CardBody,
+  CardFooter,
+} from '../..'
 
 Cards contain content and actions about a single subject.
 

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

@@ -5,24 +5,23 @@ 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 {
+    checked,
+    disabled,
+    helpText,
+    id,
+    isLabelVisible,
+    label,
+    labelPosition,
+    required,
+    validationState,
+    validationText,
+    value,
+    ...restProps
+  } = props;
   const context = useContext(FormLayoutContext);
 
   return (
@@ -55,7 +54,7 @@ export const CheckboxField = ({
           className={styles.input}
           disabled={disabled}
           id={id}
-          ref={forwardedRef}
+          ref={ref}
           required={required}
           type="checkbox"
           value={value}
@@ -79,16 +78,16 @@ export const CheckboxField = ({
       )}
     </label>
   );
-};
+});
 
 CheckboxField.defaultProps = {
   checked: undefined,
   disabled: false,
-  forwardedRef: undefined,
   helpText: null,
   id: undefined,
   isLabelVisible: true,
   labelPosition: 'after',
+  ref: undefined,
   required: false,
   validationState: null,
   validationText: null,
@@ -104,14 +103,6 @@ CheckboxField.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 }),
-  ]),
   /**
    * Optional help text.
    */
@@ -139,6 +130,14 @@ CheckboxField.propTypes = {
    * Placement of the label relative to the input.
    */
   labelPosition: PropTypes.oneOf(['before', 'after']),
+  /**
+   * Reference forwarded to the `input` element.
+   */
+  ref: PropTypes.oneOfType([
+    PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
+    PropTypes.shape({ current: PropTypes.any }),
+  ]),
   /**
    * If `true`, the input will be required.
    */
@@ -160,6 +159,6 @@ CheckboxField.propTypes = {
   ]),
 };
 
-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
 

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 (
@@ -57,7 +57,7 @@ export const FileInputField = ({
             className={styles.input}
             disabled={disabled}
             id={id}
-            ref={forwardedRef}
+            ref={ref}
             required={required}
             type="file"
           />
@@ -81,16 +81,16 @@ export const FileInputField = ({
       </div>
     </label>
   );
-};
+});
 
 FileInputField.defaultProps = {
   disabled: false,
-  forwardedRef: undefined,
   fullWidth: false,
   helpText: null,
   id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
+  ref: undefined,
   required: false,
   validationState: null,
   validationText: null,
@@ -101,14 +101,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.
    */
@@ -144,6 +136,14 @@ FileInputField.propTypes = {
    *
    */
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * Reference forwarded to the `input` element.
+   */
+  ref: PropTypes.oneOfType([
+    PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
+    PropTypes.shape({ current: PropTypes.any }),
+  ]),
   /**
    * If `true`, the input will be required.
    */
@@ -158,6 +158,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/README.mdx

@@ -12,7 +12,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { FileInputField } from './FileInputField'
+import { FileInputField } from '../..'
 
 ## Basic Usage
 

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

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

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
 

package/src/lib/components/Grid/Grid.jsx

@@ -2,9 +2,12 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { transferProps } from '../_helpers/transferProps';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
 import styles from './Grid.scss';
 
+const SPACING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7];
+
 export const Grid = ({
   alignContent,
   alignItems,
@@ -18,7 +21,7 @@ export const Grid = ({
   rowGap,
   rows,
   tag: Tag,
-  ...other
+  ...restProps
 }) => {
   if (isChildrenEmpty(children)) {
     return null;
@@ -26,20 +29,20 @@ export const Grid = ({
 
   return (
     <Tag
+      {...transferProps(restProps)}
       id={id}
       className={styles.root}
       style={{
         ...generateResponsiveCustomProperties(columns, 'columns'),
-        ...generateResponsiveCustomProperties(columnGap, 'column-gap'),
+        ...generateResponsiveCustomProperties(columnGap, 'column-gap', 'spacing'),
         ...generateResponsiveCustomProperties(rows, 'rows'),
-        ...generateResponsiveCustomProperties(rowGap, 'row-gap'),
+        ...generateResponsiveCustomProperties(rowGap, 'row-gap', 'spacing'),
         ...generateResponsiveCustomProperties(autoFlow, 'auto-flow'),
         ...generateResponsiveCustomProperties(alignContent, 'align-content'),
         ...generateResponsiveCustomProperties(alignItems, 'align-items'),
         ...generateResponsiveCustomProperties(justifyContent, 'justify-content'),
         ...generateResponsiveCustomProperties(justifyItems, 'justify-items'),
       }}
-      {...other}
     >
       {children}
     </Tag>
@@ -54,13 +57,13 @@ Grid.defaultProps = {
   alignItems: undefined,
   autoFlow: undefined,
   children: null,
-  columnGap: undefined,
-  columns: undefined,
+  columnGap: 4,
+  columns: '1fr',
   id: undefined,
   justifyContent: undefined,
   justifyItems: undefined,
-  rowGap: undefined,
-  rows: undefined,
+  rowGap: 4,
+  rows: 'auto',
   tag: 'div',
 };
 
@@ -118,19 +121,19 @@ Grid.propTypes = {
    */
   children: PropTypes.node,
   /**
-   * Gap between columns. Accepts any valid value of `grid-column-gap` CSS property.
-   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more.
+   * Gap between columns. Accepts any of [spacing values](/foundation/spacing-values) as number.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap) for more about `column-gap`.
    */
   columnGap: PropTypes.oneOfType([
-    PropTypes.string,
+    PropTypes.oneOf(SPACING_VALUES),
     PropTypes.shape({
-      xs: PropTypes.string,
-      sm: PropTypes.string,
-      md: PropTypes.string,
-      lg: PropTypes.string,
-      xl: PropTypes.string,
-      x2l: PropTypes.string,
-      x3l: PropTypes.string,
+      xs: PropTypes.oneOf(SPACING_VALUES),
+      sm: PropTypes.oneOf(SPACING_VALUES),
+      md: PropTypes.oneOf(SPACING_VALUES),
+      lg: PropTypes.oneOf(SPACING_VALUES),
+      xl: PropTypes.oneOf(SPACING_VALUES),
+      x2l: PropTypes.oneOf(SPACING_VALUES),
+      x3l: PropTypes.oneOf(SPACING_VALUES),
     }),
   ]),
   /**
@@ -186,19 +189,19 @@ Grid.propTypes = {
     }),
   ]),
   /**
-   * Gap between rows. Accepts any valid value of `grid-row-gap` CSS property.
-   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more.
+   * Gap between rows. Accepts any of [spacing values](/foundation/spacing-values) as number.
+   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap) for more about `row-gap`.
    */
   rowGap: PropTypes.oneOfType([
-    PropTypes.string,
+    PropTypes.oneOf(SPACING_VALUES),
     PropTypes.shape({
-      xs: PropTypes.string,
-      sm: PropTypes.string,
-      md: PropTypes.string,
-      lg: PropTypes.string,
-      xl: PropTypes.string,
-      x2l: PropTypes.string,
-      x3l: PropTypes.string,
+      xs: PropTypes.oneOf(SPACING_VALUES),
+      sm: PropTypes.oneOf(SPACING_VALUES),
+      md: PropTypes.oneOf(SPACING_VALUES),
+      lg: PropTypes.oneOf(SPACING_VALUES),
+      xl: PropTypes.oneOf(SPACING_VALUES),
+      x2l: PropTypes.oneOf(SPACING_VALUES),
+      x3l: PropTypes.oneOf(SPACING_VALUES),
     }),
   ]),
   /**