@react-ui-org/react-ui 0.46.0 → 0.47.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.46.0",
+  "version": "0.47.0",
   "keywords": [
     "react",
     "ui",
@@ -44,6 +44,7 @@
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
     "@babel/register": "^7.16.0",
+    "@floating-ui/react-dom": "^0.7.1",
     "@nejcm/docz-theme-extended": "^2.0.14",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^12.1.2",

package/src/lib/components/Alert/Alert.jsx

@@ -1,6 +1,9 @@
 import PropTypes from 'prop-types';
-import React from 'react';
-import { withProviderContext } from '../../provider';
+import React, { useContext } from 'react';
+import {
+  RUIContext,
+  withGlobalProps,
+} from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import styles from './Alert.scss';
@@ -11,42 +14,45 @@ export const Alert = ({
   icon,
   id,
   onClose,
-  translations,
-}) => (
-  <div
-    className={classNames(
-      styles.root,
-      getRootColorClassName(color, styles),
-    )}
-    id={id}
-    role="alert"
-  >
-    {icon && (
-      <div className={styles.icon}>
-        {icon}
-      </div>
-    )}
+}) => {
+  const { translations } = useContext(RUIContext);
+
+  return (
     <div
-      className={styles.message}
-      {...(id && { id: `${id}__content` })}
+      className={classNames(
+        styles.root,
+        getRootColorClassName(color, styles),
+      )}
+      id={id}
+      role="alert"
     >
-      {children}
-    </div>
-    {onClose && (
-      <button
-        type="button"
-        {...(id && { id: `${id}__close` })}
-        className={styles.close}
-        onClick={() => onClose()}
-        onKeyPress={() => onClose()}
-        tabIndex="0"
-        title={translations.close}
+      {icon && (
+        <div className={styles.icon}>
+          {icon}
+        </div>
+      )}
+      <div
+        className={styles.message}
+        {...(id && { id: `${id}__content` })}
       >
-        <span className={styles.closeSign}>×</span>
-      </button>
-    )}
-  </div>
-);
+        {children}
+      </div>
+      {onClose && (
+        <button
+          type="button"
+          {...(id && { id: `${id}__close` })}
+          className={styles.close}
+          onClick={() => onClose()}
+          onKeyPress={() => onClose()}
+          tabIndex="0"
+          title={translations.Alert.close}
+        >
+          <span className={styles.closeSign}>×</span>
+        </button>
+      )}
+    </div>
+  );
+};
 
 Alert.defaultProps = {
   color: 'note',
@@ -83,14 +89,8 @@ Alert.propTypes = {
    * hidden.
    */
   onClose: PropTypes.func,
-  /**
-   * Translations required by the component.
-   */
-  translations: PropTypes.shape({
-    close: PropTypes.string.isRequired,
-  }).isRequired,
 };
 
-export const AlertWithContext = withProviderContext(Alert, 'Alert');
+export const AlertWithGlobalProps = withGlobalProps(Alert, 'Alert');
 
-export default AlertWithContext;
+export default AlertWithGlobalProps;

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

@@ -13,10 +13,7 @@ import {
 import Icon from '../../../docs/_components/Icon'
 import Placeholder from '../../../docs/_components/Placeholder'
 import Button from '../Button'
-import {
-  AlertWithContext as Alert,
-  Alert as ParsableAlert,
-} from './Alert'
+import { Alert } from './Alert'
 
 Alert presents feedback or important information to users.
 
@@ -207,7 +204,7 @@ click on the close button:
 
 ## API
 
-<Props table of={ParsableAlert} />
+<Props table of={Alert} />
 
 ## Theming
 

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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import styles from './Badge.scss';
@@ -50,6 +50,6 @@ Badge.propTypes = {
   priority: PropTypes.oneOf(['filled', 'outline']),
 };
 
-export const BadgeWithContext = withProviderContext(Badge, 'Badge');
+export const BadgeWithGlobalProps = withGlobalProps(Badge, 'Badge');
 
-export default BadgeWithContext;
+export default BadgeWithGlobalProps;

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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
@@ -169,7 +169,7 @@ Button.propTypes = {
   /**
    * Defines minimum breakpoint from which the button label will be visible.
    */
-  labelVisibility: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl', 'none']),
+  labelVisibility: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'x2l', 'x3l', 'none']),
   /**
    * Visual priority to highlight or suppress the button.
    *
@@ -194,6 +194,6 @@ Button.propTypes = {
   type: PropTypes.oneOf(['button', 'submit']),
 };
 
-export const ButtonWithContext = withForwardedRef(withProviderContext(Button, 'Button'));
+export const ButtonWithGlobalProps = withForwardedRef(withGlobalProps(Button, 'Button'));
 
-export default ButtonWithContext;
+export default ButtonWithGlobalProps;

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

@@ -194,13 +194,13 @@ of your choice and display label once you know there is enough room for it.
     beforeLabel={<Icon icon="pencil" />}
   />
   <Button
-    label="Label visible from xxl up"
-    labelVisibility="xxl"
+    label="Label visible from x2l up"
+    labelVisibility="x2l"
     beforeLabel={<Icon icon="pencil" />}
   />
   <Button
-    label="Label visible from xxxl up"
-    labelVisibility="xxxl"
+    label="Label visible from x3l up"
+    labelVisibility="x3l"
     beforeLabel={<Icon icon="pencil" />}
   />
 </Playground>

package/src/lib/components/Button/_base.scss

@@ -106,8 +106,8 @@
 .withLabelVisibleMd,
 .withLabelVisibleLg,
 .withLabelVisibleXl,
-.withLabelVisibleXxl,
-.withLabelVisibleXxxl {
+.withLabelVisibleX2l,
+.withLabelVisibleX3l {
     @include tools.hide-label();
 }
 
@@ -135,14 +135,14 @@
     }
 }
 
-.withLabelVisibleXxl {
-    @include breakpoint.up(xxl) {
+.withLabelVisibleX2l {
+    @include breakpoint.up(x2l) {
         @include tools.show-label();
     }
 }
 
-.withLabelVisibleXxxl {
-    @include breakpoint.up(xxxl) {
+.withLabelVisibleX3l {
+    @include breakpoint.up(x3l) {
         @include tools.show-label();
     }
 }

package/src/lib/components/Button/helpers/getRootLabelVisibilityClassName.js

@@ -17,12 +17,12 @@ export default (labelVisibility, styles) => {
     return styles.withLabelVisibleXl;
   }
 
-  if (labelVisibility === 'xxl') {
-    return styles.withLabelVisibleXxl;
+  if (labelVisibility === 'x2l') {
+    return styles.withLabelVisibleX2l;
   }
 
-  if (labelVisibility === 'xxxl') {
-    return styles.withLabelVisibleXxxl;
+  if (labelVisibility === 'x3l') {
+    return styles.withLabelVisibleX3l;
   }
 
   if (labelVisibility === 'none') {

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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './ButtonGroup.scss';
@@ -10,6 +10,7 @@ export const ButtonGroup = ({
   block,
   disabled,
   children,
+  id,
   priority,
   size,
   ...restProps
@@ -24,6 +25,7 @@ export const ButtonGroup = ({
         styles.root,
         block && styles.isRootBlock,
       )}
+      id={id}
       role="group"
       {...restProps}
     >
@@ -45,6 +47,7 @@ ButtonGroup.defaultProps = {
   block: false,
   children: null,
   disabled: false,
+  id: undefined,
   priority: 'filled',
   size: 'medium',
 };
@@ -62,6 +65,10 @@ ButtonGroup.propTypes = {
    * If `true`, all buttons inside the group will be disabled.
    */
   disabled: PropTypes.bool,
+  /**
+   * ID of the root HTML element.
+   */
+  id: PropTypes.string,
   /**
    * Visual priority to highlight or suppress the buttons.
    */
@@ -72,6 +79,6 @@ ButtonGroup.propTypes = {
   size: PropTypes.oneOf(['small', 'medium', 'large']),
 };
 
-export const ButtonGroupWithContext = withProviderContext(ButtonGroup, 'ButtonGroup');
+export const ButtonGroupWithGlobalProps = withGlobalProps(ButtonGroup, 'ButtonGroup');
 
-export default ButtonGroupWithContext;
+export default ButtonGroupWithGlobalProps;

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

@@ -221,7 +221,7 @@ and communicating the state of individual options.
 <Playground>
   <>
     <span id="period-label">Period:</span>
-    <ButtonGroup aria-labelledby="#period-label">
+    <ButtonGroup aria-labelledby="period-label">
       <Button label="Week" aria-pressed color="dark" />
       <Button label="Month" aria-pressed={false} />
       <Button label="Year" aria-pressed={false} />

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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
 import styles from './Card.scss';
@@ -67,6 +67,6 @@ Card.propTypes = {
   raised: PropTypes.bool,
 };
 
-export const CardWithContext = withProviderContext(Card, 'Card');
+export const CardWithGlobalProps = withGlobalProps(Card, 'Card');
 
-export default CardWithContext;
+export default CardWithGlobalProps;

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

@@ -1,21 +1,32 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import styles from './Card.scss';
 
-export const CardBody = ({ children }) => (
-  <div className={styles.body}>
+export const CardBody = ({
+  children,
+  id,
+}) => (
+  <div className={styles.body} id={id}>
     {children}
   </div>
 );
 
+CardBody.defaultProps = {
+  id: undefined,
+};
+
 CardBody.propTypes = {
   /**
    * Content of the card.
    */
   children: PropTypes.node.isRequired,
+  /**
+   * ID of the root HTML element.
+   */
+  id: PropTypes.string,
 };
 
-export const CardBodyWithContext = withProviderContext(CardBody, 'CardBody');
+export const CardBodyWithGlobalProps = withGlobalProps(CardBody, 'CardBody');
 
-export default CardBodyWithContext;
+export default CardBodyWithGlobalProps;

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

@@ -1,16 +1,19 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Card.scss';
 
-export const CardFooter = ({ children }) => {
+export const CardFooter = ({
+  children,
+  id,
+}) => {
   if (isChildrenEmpty(children)) {
     return null;
   }
 
   return (
-    <div className={styles.footer}>
+    <div className={styles.footer} id={id}>
       {children}
     </div>
   );
@@ -18,6 +21,7 @@ export const CardFooter = ({ children }) => {
 
 CardFooter.defaultProps = {
   children: null,
+  id: undefined,
 };
 
 CardFooter.propTypes = {
@@ -25,8 +29,12 @@ CardFooter.propTypes = {
    * Card actions, usually buttons.
    */
   children: PropTypes.node,
+  /**
+   * ID of the root HTML element.
+   */
+  id: PropTypes.string,
 };
 
-export const CardFooterWithContext = withProviderContext(CardFooter, 'CardFooter');
+export const CardFooterWithGlobalProps = withGlobalProps(CardFooter, 'CardFooter');
 
-export default CardFooterWithContext;
+export default CardFooterWithGlobalProps;

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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { transferProps } from '../_helpers/transferProps';
@@ -160,6 +160,6 @@ CheckboxField.propTypes = {
   ]),
 };
 
-export const CheckboxFieldWithContext = withForwardedRef(withProviderContext(CheckboxField, 'CheckboxField'));
+export const CheckboxFieldWithGlobalProps = withForwardedRef(withGlobalProps(CheckboxField, 'CheckboxField'));
 
-export default CheckboxFieldWithContext;
+export default CheckboxFieldWithGlobalProps;

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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
@@ -158,6 +158,6 @@ FileInputField.propTypes = {
   validationText: PropTypes.node,
 };
 
-export const FileInputFieldWithContext = withForwardedRef(withProviderContext(FileInputField, 'FileInputField'));
+export const FileInputFieldWithGlobalProps = withForwardedRef(withGlobalProps(FileInputField, 'FileInputField'));
 
-export default FileInputFieldWithContext;
+export default FileInputFieldWithGlobalProps;

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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
@@ -110,6 +110,6 @@ FormLayout.propTypes = {
   ]),
 };
 
-export const FormLayoutWithContext = withProviderContext(FormLayout, 'FormLayout');
+export const FormLayoutWithGlobalProps = withGlobalProps(FormLayout, 'FormLayout');
 
-export default FormLayoutWithContext;
+export default FormLayoutWithGlobalProps;

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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
@@ -131,6 +131,6 @@ FormLayoutCustomField.propTypes = {
   validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
 };
 
-export const FormLayoutCustomFieldWithContext = withProviderContext(FormLayoutCustomField, 'FormLayoutCustomField');
+export const FormLayoutCustomFieldWithGlobalProps = withGlobalProps(FormLayoutCustomField, 'FormLayoutCustomField');
 
-export default FormLayoutCustomFieldWithContext;
+export default FormLayoutCustomFieldWithGlobalProps;

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

@@ -75,10 +75,9 @@ there are longer validation messages or help texts.
 
 ## Vertical Layout
 
-Vertical FormLayout works similar to the [List](/components/list) layout
-except that no equivalent of ListItems is needed. It stacks the form fields
-vertically while it forces the vertical layout mode on them. To use this layout,
-simply wrap your form fields with the FormLayout component:
+Vertical FormLayout works similar to single-column [Grid](/components/grid)
+layout while it also forces vertical layout mode on form fields. To use this
+layout, simply wrap your form fields with the FormLayout component:
 
 <Playground>
   <FormLayout>
@@ -143,7 +142,7 @@ with CSS custom properties.
             <span id="label-width-options-label">Label width:</span>
           </ToolbarItem>
           <ToolbarItem>
-            <ButtonGroup aria-labelledby="#label-width-options-label">
+            <ButtonGroup aria-labelledby="label-width-options-label">
               <Button
                 color={labelWidth === 'default' ? 'dark' : 'primary'}
                 label="default"

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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
 import styles from './Grid.scss';
@@ -77,8 +77,8 @@ Grid.propTypes = {
       md: PropTypes.string,
       lg: PropTypes.string,
       xl: PropTypes.string,
-      xxl: PropTypes.string,
-      xxxl: PropTypes.string,
+      x2l: PropTypes.string,
+      x3l: PropTypes.string,
     }),
   ]),
   /**
@@ -93,8 +93,8 @@ Grid.propTypes = {
       md: PropTypes.string,
       lg: PropTypes.string,
       xl: PropTypes.string,
-      xxl: PropTypes.string,
-      xxxl: PropTypes.string,
+      x2l: PropTypes.string,
+      x3l: PropTypes.string,
     }),
   ]),
   /**
@@ -109,8 +109,8 @@ Grid.propTypes = {
       md: PropTypes.string,
       lg: PropTypes.string,
       xl: PropTypes.string,
-      xxl: PropTypes.string,
-      xxxl: PropTypes.string,
+      x2l: PropTypes.string,
+      x3l: PropTypes.string,
     }),
   ]),
   /**
@@ -129,8 +129,8 @@ Grid.propTypes = {
       md: PropTypes.string,
       lg: PropTypes.string,
       xl: PropTypes.string,
-      xxl: PropTypes.string,
-      xxxl: PropTypes.string,
+      x2l: PropTypes.string,
+      x3l: PropTypes.string,
     }),
   ]),
   /**
@@ -145,8 +145,8 @@ Grid.propTypes = {
       md: PropTypes.string,
       lg: PropTypes.string,
       xl: PropTypes.string,
-      xxl: PropTypes.string,
-      xxxl: PropTypes.string,
+      x2l: PropTypes.string,
+      x3l: PropTypes.string,
     }),
   ]),
   /**
@@ -165,8 +165,8 @@ Grid.propTypes = {
       md: PropTypes.string,
       lg: PropTypes.string,
       xl: PropTypes.string,
-      xxl: PropTypes.string,
-      xxxl: PropTypes.string,
+      x2l: PropTypes.string,
+      x3l: PropTypes.string,
     }),
   ]),
   /**
@@ -181,8 +181,8 @@ Grid.propTypes = {
       md: PropTypes.string,
       lg: PropTypes.string,
       xl: PropTypes.string,
-      xxl: PropTypes.string,
-      xxxl: PropTypes.string,
+      x2l: PropTypes.string,
+      x3l: PropTypes.string,
     }),
   ]),
   /**
@@ -197,8 +197,8 @@ Grid.propTypes = {
       md: PropTypes.string,
       lg: PropTypes.string,
       xl: PropTypes.string,
-      xxl: PropTypes.string,
-      xxxl: PropTypes.string,
+      x2l: PropTypes.string,
+      x3l: PropTypes.string,
     }),
   ]),
   /**
@@ -213,8 +213,8 @@ Grid.propTypes = {
       md: PropTypes.string,
       lg: PropTypes.string,
       xl: PropTypes.string,
-      xxl: PropTypes.string,
-      xxxl: PropTypes.string,
+      x2l: PropTypes.string,
+      x3l: PropTypes.string,
     }),
   ]),
   /**
@@ -224,6 +224,6 @@ Grid.propTypes = {
   tag: PropTypes.string,
 };
 
-export const GridWithContext = withProviderContext(Grid, 'Grid');
+export const GridWithGlobalProps = withGlobalProps(Grid, 'Grid');
 
-export default GridWithContext;
+export default GridWithGlobalProps;

package/src/lib/components/Grid/Grid.scss

@@ -40,6 +40,11 @@
     justify-items: var(--rui-local-justify-items, #{map.get(theme.$responsive-properties, justify-items)}); // 2.
 }
 
+// stylelint-disable-next-line selector-max-universal -- Reset any previously added margins.
+.root > * {
+    margin-block: 0;
+}
+
 .span {
     $responsive-properties: (
         column-span: 1,
@@ -58,5 +63,6 @@ ol.root,
 ul.root {
     padding-left: 0;
     margin-left: 0;
+    list-style: none;
 }
 // stylelint-enable selector-no-qualifying-type