@react-ui-org/react-ui 0.45.0 → 0.46.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.45.0",
+  "version": "0.46.0",
   "keywords": [
     "react",
     "ui",
@@ -29,8 +29,8 @@
     "url": "https://github.com/react-ui-org/react-ui"
   },
   "engines": {
-    "node": ">=14.15.1",
-    "npm": ">=6.14.8"
+    "node": ">=16.14.0 <17",
+    "npm": ">=8.3.0"
   },
   "dependencies": {
     "normalize.css": "^8.0.1"
@@ -84,7 +84,7 @@
     "sinon": "^12.0.1",
     "style-loader": "^2.0.0",
     "stylelint": "^14.2.0",
-    "stylelint-webpack-plugin": "^3.1.0",
+    "stylelint-webpack-plugin": "^2.3.2",
     "webpack": "^4.46.0",
     "webpack-cli": "^3.3.12",
     "webpack-visualizer-plugin": "^0.1.11"

package/src/lib/components/Badge/Badge.jsx

@@ -43,10 +43,7 @@ Badge.propTypes = {
   /**
    * Text to be displayed.
    */
-  label: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]).isRequired,
+  label: PropTypes.string.isRequired,
   /**
    * Visual priority to highlight or suppress the badge.
    */

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

@@ -399,7 +399,7 @@ animation is made.
 
 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 `button` HTML element. This enables making the component
+passed to the `<button>` HTML element. This enables making the component
 interactive and helps improve its accessibility.
 
 <Props table of={Button} />

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

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
 import { classNames } from '../../utils/classNames';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './ButtonGroup.scss';
 import { ButtonGroupContext } from './ButtonGroupContext';
 
@@ -12,30 +13,37 @@ export const ButtonGroup = ({
   priority,
   size,
   ...restProps
-}) => (
-  <div
-    className={classNames(
-      styles.root,
-      block && styles.isRootBlock,
-    )}
-    role="group"
-    {...restProps}
-  >
-    <ButtonGroupContext.Provider
-      value={{
-        block,
-        disabled,
-        priority,
-        size,
-      }}
+}) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
+
+  return (
+    <div
+      className={classNames(
+        styles.root,
+        block && styles.isRootBlock,
+      )}
+      role="group"
+      {...restProps}
     >
-      {children}
-    </ButtonGroupContext.Provider>
-  </div>
-);
+      <ButtonGroupContext.Provider
+        value={{
+          block,
+          disabled,
+          priority,
+          size,
+        }}
+      >
+        {children}
+      </ButtonGroupContext.Provider>
+    </div>
+  );
+};
 
 ButtonGroup.defaultProps = {
   block: false,
+  children: null,
   disabled: false,
   priority: 'filled',
   size: 'medium',
@@ -47,9 +55,9 @@ ButtonGroup.propTypes = {
    */
   block: PropTypes.bool,
   /**
-   * Buttons to be grouped.
+   * Buttons to be grouped. If none are provided nothing is rendered.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   /**
    * If `true`, all buttons inside the group will be disabled.
    */

package/src/lib/components/Card/CardBody.jsx

@@ -3,17 +3,11 @@ import React from 'react';
 import { withProviderContext } from '../../provider';
 import styles from './Card.scss';
 
-export const CardBody = (props) => {
-  const {
-    children,
-  } = props;
-
-  return (
-    <div className={styles.body}>
-      {children}
-    </div>
-  );
-};
+export const CardBody = ({ children }) => (
+  <div className={styles.body}>
+    {children}
+  </div>
+);
 
 CardBody.propTypes = {
   /**

package/src/lib/components/Card/CardFooter.jsx

@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Card.scss';
 
-export const CardFooter = (props) => {
-  const {
-    children,
-  } = props;
+export const CardFooter = ({ children }) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
 
   return (
     <div className={styles.footer}>
@@ -15,11 +16,15 @@ export const CardFooter = (props) => {
   );
 };
 
+CardFooter.defaultProps = {
+  children: null,
+};
+
 CardFooter.propTypes = {
   /**
    * Card actions, usually buttons.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
 };
 
 export const CardFooterWithContext = withProviderContext(CardFooter, 'CardFooter');

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

@@ -40,6 +40,15 @@ export const CheckboxField = ({
       id={id && `${id}__label`}
     >
       <div className={styles.field}>
+        <div
+          className={classNames(
+            styles.label,
+            !isLabelVisible && styles.isLabelHidden,
+          )}
+          id={id && `${id}__labelText`}
+        >
+          {label}
+        </div>
         <input
           {...transferProps(restProps)}
           checked={checked}
@@ -51,15 +60,6 @@ export const CheckboxField = ({
           type="checkbox"
           value={value}
         />
-        <div
-          className={classNames(
-            styles.label,
-            !isLabelVisible && styles.isLabelHidden,
-          )}
-          id={id && `${id}__labelText`}
-        >
-          {label}
-        </div>
       </div>
       {helpText && (
         <div

package/src/lib/components/CheckboxField/CheckboxField.scss

@@ -17,7 +17,7 @@
 }
 
 .field {
-    @include inline-field-layout.field();
+    @include inline-field-layout.field($type: checkbox);
 }
 
 .input {

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

@@ -185,7 +185,7 @@ Disabled state makes the input unavailable.
 
 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
+passed to the `<input>` HTML element. This enables making the component
 interactive and helps improve its accessibility.
 
 <Props table of={CheckboxField} />

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

@@ -191,7 +191,7 @@ It's possible to disable the whole input.
 
 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
+passed to the `<input>` HTML element. This enables making the component
 interactive and helps improve its [accessibility](#forwarding-html-attributes).
 
 <Props table of={FileInputField} />

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

@@ -2,21 +2,20 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
 import { classNames } from '../../utils/classNames';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
 import styles from './FormLayout.scss';
 
 const PREDEFINED_LABEL_WIDTH_VALUES = ['auto', 'default', 'limited'];
 
-export const FormLayout = (props) => {
-  const {
-    autoWidth,
-    children,
-    fieldLayout,
-    id,
-    labelWidth,
-  } = props;
-
-  if (!children) {
+export const FormLayout = ({
+  autoWidth,
+  children,
+  fieldLayout,
+  id,
+  labelWidth,
+}) => {
+  if (isChildrenEmpty(children)) {
     return null;
   }
 
@@ -89,6 +88,8 @@ FormLayout.propTypes = {
    * * `TextArea`
    * * `TextField`
    * * `Toggle`
+   *
+   * If none are provided nothing is rendered.
    */
   children: PropTypes.node,
   /**

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

@@ -4,6 +4,7 @@ import { withProviderContext } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
 import styles from './FormLayoutCustomField.scss';
 
@@ -47,6 +48,10 @@ export const FormLayoutCustomField = ({
 }) => {
   const context = useContext(FormLayoutContext);
 
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
+
   return (
     <div
       id={id}
@@ -85,7 +90,7 @@ FormLayoutCustomField.defaultProps = {
 
 FormLayoutCustomField.propTypes = {
   /**
-   * Custom HTML or React component(s).
+   * Custom HTML or React component(s). If none are provided nothing is rendered.
    */
   children: PropTypes.node,
   /**

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

@@ -200,21 +200,18 @@ with CSS custom properties.
 
 ### Limitations
 
+#### Label Position
+
+Label position of inline form fields (CheckboxField, Toggle) is ignored in
+horizontal FormLayout.
+
 #### Modals
 
 Please note the `auto` and `limited` label width options may not function
 correctly in combination with other auto layout mechanisms, e.g. the auto-width
-[Modal](/components/modal). It's just too much of magic that doesn't quite
+[Modal](/components/modal). It's just too much of magic that does not quite
 work together yet 🎩.
 
-#### Inline Form Fields
-
-CheckboxField and Toggle always display their labels after inputs inside
-FormLayout. In other words, their labels never appear in a column with other
-fields' labels even when they have `labelPosition` set to `before`. This feature
-[will be implemented][rui-232] once [CSS subgrid][subgrid] is fully supported in
-[browsers that we support](/getting-started/browsers-and-devices).
-
 ## Custom Fields
 
 You can even place any content you need into the FormLayout — just wrap it with
@@ -402,6 +399,7 @@ This is a demo of all components supported by FormLayout.
             </FormLayoutCustomField>
             <CheckboxField
               checked={isDeliveryAddress}
+              helpText="Uncheck if you wish to deliver to a different address."
               label="This is my delivery address"
               onChange={() => setIsDeliveryAddress(!isDeliveryAddress)}
             />

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

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
 import styles from './Grid.scss';
 
@@ -19,7 +20,7 @@ export const Grid = ({
   tag: Tag,
   ...other
 }) => {
-  if (!children) {
+  if (isChildrenEmpty(children)) {
     return null;
   }
 
@@ -113,7 +114,7 @@ Grid.propTypes = {
     }),
   ]),
   /**
-   * Items to be aligned in the grid.
+   * Items to be aligned in the grid. If none are provided nothing is rendered.
    */
   children: PropTypes.node,
   /**

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

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
 import styles from './Grid.scss';
 
@@ -12,7 +13,7 @@ export const GridSpan = ({
   tag: Tag,
   ...other
 }) => {
-  if (!children) {
+  if (isChildrenEmpty(children)) {
     return null;
   }
 
@@ -44,7 +45,7 @@ GridSpan.defaultProps = {
 
 GridSpan.propTypes = {
   /**
-   * Items to be aligned in the grid.
+   * Items to be aligned in the grid. If none are provided nothing is rendered.
    */
   children: PropTypes.node,
   /**

package/src/lib/components/List/List.jsx

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
 import { classNames } from '../../utils/classNames';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './List.scss';
 
 export const List = ({
@@ -9,7 +10,7 @@ export const List = ({
   autoWidth,
   children,
 }) => {
-  if (!children) {
+  if (isChildrenEmpty(children)) {
     return null;
   }
 
@@ -62,7 +63,7 @@ List.propTypes = {
    */
   autoWidth: PropTypes.bool,
   /**
-   * Individual ListItems.
+   * Individual ListItems. If none are provided nothing is rendered.
    */
   children: PropTypes.node,
 };

package/src/lib/components/List/ListItem.jsx

@@ -1,10 +1,11 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './List.scss';
 
 export const ListItem = ({ children }) => {
-  if (!children) {
+  if (isChildrenEmpty(children)) {
     return null;
   }
 
@@ -21,7 +22,7 @@ ListItem.defaultProps = {
 
 ListItem.propTypes = {
   /**
-   * Content of the list item.
+   * Content of the list item. If none are provided nothing is rendered.
    */
   children: PropTypes.node,
 };

package/src/lib/components/Media/Media.jsx

@@ -1,12 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Media.scss';
 
-export const Media = (props) => {
-  const {
-    children,
-  } = props;
+export const Media = ({ children }) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
 
   return (
     <div className={styles.media}>
@@ -15,13 +16,19 @@ export const Media = (props) => {
   );
 };
 
+Media.defaultProps = {
+  children: null,
+};
+
 Media.propTypes = {
   /**
    * Nested elements. Supported types are:
    * * `MediaBody`
    * * `MediaObject`
+   *
+   * If none are provided nothing is rendered.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
 };
 
 export const MediaWithContext = withProviderContext(Media, 'Media');

package/src/lib/components/Media/MediaBody.jsx

@@ -1,19 +1,30 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Media.scss';
 
-export const MediaBody = ({ children }) => (
-  <div className={styles.body}>
-    {children}
-  </div>
-);
+export const MediaBody = ({ children }) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
+
+  return (
+    <div className={styles.body}>
+      {children}
+    </div>
+  );
+};
+
+MediaBody.defaultProps = {
+  children: null,
+};
 
 MediaBody.propTypes = {
   /**
-   * Content of the media layout.
+   * Content of the media layout. If none are provided nothing is rendered.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
 };
 
 export const MediaBodyWithContext = withProviderContext(MediaBody, 'MediaBody');

package/src/lib/components/Media/MediaObject.jsx

@@ -1,19 +1,30 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withProviderContext } from '../../provider';
+import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Media.scss';
 
-export const MediaObject = ({ children }) => (
-  <div className={styles.object}>
-    {children}
-  </div>
-);
+export const MediaObject = ({ children }) => {
+  if (isChildrenEmpty(children)) {
+    return null;
+  }
+
+  return (
+    <div className={styles.object}>
+      {children}
+    </div>
+  );
+};
+
+MediaObject.defaultProps = {
+  children: null,
+};
 
 MediaObject.propTypes = {
   /**
-   * Accompanying media object for the Media layout, eg. an image.
+   * Accompanying media object for the Media layout, eg. an image. If none are provided nothing is rendered.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
 };
 
 export const MediaObjectWithContext = withProviderContext(MediaObject, 'MediaObject');

package/src/lib/components/Modal/Modal.jsx

@@ -235,6 +235,7 @@ export class Modal extends React.Component {
 Modal.defaultProps = {
   actions: [],
   autoFocus: true,
+  children: null,
   id: undefined,
   onClose: null,
   portalId: null,
@@ -266,7 +267,7 @@ Modal.propTypes = {
   /**
    * Content of the modal.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   /**
    * ID of the root HTML element. It also serves as a base for nested elements:
    * * `<ID>__content`

package/src/lib/components/Paper/Paper.jsx

@@ -23,7 +23,6 @@ export const Paper = ({
 );
 
 Paper.defaultProps = {
-  children: null,
   id: undefined,
   muted: false,
   raised: false,
@@ -33,7 +32,7 @@ Paper.propTypes = {
   /**
    * Content to be placed onto Paper.
    */
-  children: PropTypes.node,
+  children: PropTypes.node.isRequired,
   /**
    * ID of the root HTML element.
    */

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

@@ -287,7 +287,7 @@ It's possible to disable just some options or the whole set.
 
 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
+passed to the `<input>` HTML element. This enables making the component
 interactive and helps improve its accessibility.
 
 <Props table of={Radio} />

package/src/lib/components/Radio/Radio.scss

@@ -24,7 +24,7 @@
 }
 
 .option {
-    @include inline-field-layout.field();
+    @include inline-field-layout.field($type: radio);
     @include inline-field-elements.min-tap-target($type: radio);
 }
 

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

@@ -8,6 +8,9 @@ route: /components/scroll-view
 
 ScrollView makes long content scrollable.
 
+👉 Please note that HTML is rendered even when no children are provided.
+This is needed to allow the autoscroll feature to work.
+
 import {
   Playground,
   Props,

package/src/lib/components/ScrollView/ScrollView.jsx

@@ -272,6 +272,7 @@ ScrollView.defaultProps = {
   arrowsColor: undefined,
   arrowsScrollStep: 200,
   autoScroll: 'off',
+  children: null,
   customEndShadowStyle: {},
   customNextArrow: null,
   customPrevArrow: null,
@@ -316,7 +317,7 @@ ScrollView.propTypes = {
   /**
    * Content to be scrollable.
    */
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   /**
    * Custom CSS to replace the default end scrolling shadow.
    */

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

@@ -598,7 +598,7 @@ It's possible to disable just some options or the whole input.
 
 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 `select` HTML element. This enables making the component
+passed to the `<select>` HTML element. This enables making the component
 interactive and helps improve its accessibility.
 
 <Props table of={SelectField} />