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

package/src/lib/components/Modal/_helpers/getJustifyClassName.js

@@ -1,19 +1,19 @@
 export const getJustifyClassName = (value, styles) => {
   if (value === 'start') {
-    return styles.isJustifiedToStart;
+    return styles.isRootJustifiedToStart;
   }
 
   if (value === 'center') {
-    return styles.isJustifiedToCenter;
+    return styles.isRootJustifiedToCenter;
   }
 
   if (value === 'end') {
-    return styles.isJustifiedToEnd;
+    return styles.isRootJustifiedToEnd;
   }
 
   if (value === 'space-between') {
-    return styles.isJustifiedToSpaceBetween;
+    return styles.isRootJustifiedToSpaceBetween;
   }
 
-  return styles.isJustifiedToStretch;
+  return styles.isRootJustifiedToStretch;
 };

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

@@ -2,28 +2,28 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../_helpers/transferProps';
 import styles from './Paper.scss';
 
 export const Paper = ({
   children,
-  id,
   muted,
   raised,
+  ...restProps
 }) => (
   <div
+    {...transferProps(restProps)}
     className={classNames(
       styles.root,
-      muted && styles.rootMuted,
-      raised && styles.rootRaised,
+      muted && styles.isRootMuted,
+      raised && styles.isRootRaised,
     )}
-    id={id}
   >
     {children}
   </div>
 );
 
 Paper.defaultProps = {
-  id: undefined,
   muted: false,
   raised: false,
 };
@@ -33,10 +33,6 @@ Paper.propTypes = {
    * Content to be placed onto Paper.
    */
   children: PropTypes.node.isRequired,
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
   /**
    * Visually suppress Paper.
    */

package/src/lib/components/Paper/Paper.scss

@@ -7,11 +7,11 @@
     background-color: theme.$background-color;
 }
 
-.rootMuted {
+.isRootMuted {
     background-color: theme.$muted-background-color;
     opacity: theme.$muted-opacity;
 }
 
-.rootRaised {
+.isRootRaised {
     box-shadow: theme.$raised-box-shadow;
 }

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

@@ -63,6 +63,17 @@ Dim background and add transparency to visually suppress the Paper.
   </Paper>
 </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={Paper} />
@@ -79,3 +90,6 @@ Dim background and add transparency to visually suppress the Paper.
 | `--rui-Paper--muted__background-color`               | Background color of muted paper                              |
 | `--rui-Paper--muted__opacity`                        | Opacity of muted paper                                       |
 | `--rui-Paper--raised__box-shadow`                    | Box shadow of raised paper                                   |
+
+[React synthetic events]: https://reactjs.org/docs/events.html
+[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes

package/src/lib/components/Popover/Popover.jsx

@@ -12,7 +12,6 @@ export const Popover = React.forwardRef((props, ref) => {
   const {
     placement,
     children,
-    id,
     portalId,
     ...restProps
   } = props;
@@ -26,7 +25,6 @@ export const Popover = React.forwardRef((props, ref) => {
         getRootSideClassName(placement, styles),
         getRootAlignmentClassName(placement, styles),
       )}
-      id={id}
       ref={ref}
     >
       {children}
@@ -42,10 +40,8 @@ export const Popover = React.forwardRef((props, ref) => {
 });
 
 Popover.defaultProps = {
-  id: undefined,
   placement: 'bottom',
   portalId: null,
-  ref: undefined,
 };
 
 Popover.propTypes = {
@@ -53,10 +49,6 @@ Popover.propTypes = {
    * Popover content.
    */
   children: PropTypes.node.isRequired,
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
   /**
    * Popover placement affects position of the arrow.
    * Compatible with [Floating UI API](https://floating-ui.com/docs/computePosition#placement).
@@ -79,14 +71,6 @@ Popover.propTypes = {
    * If set, popover is rendered in the React Portal with that ID.
    */
   portalId: PropTypes.string,
-  /**
-   * Reference forwarded to the root `div` element.
-   */
-  ref: PropTypes.oneOfType([
-    PropTypes.func,
-    // eslint-disable-next-line react/forbid-prop-types
-    PropTypes.shape({ current: PropTypes.any }),
-  ]),
 };
 
 export const PopoverWithGlobalProps = withGlobalProps(Popover, 'Popover');

package/src/lib/components/Popover/PopoverWrapper.jsx

@@ -6,21 +6,18 @@ import styles from './PopoverWrapper.scss';
 
 export const PopoverWrapper = ({
   children,
-  id,
   tag: Tag,
   ...restProps
 }) => (
   <Tag
     {...transferProps(restProps)}
     className={styles.root}
-    id={id}
   >
     {children}
   </Tag>
 );
 
 PopoverWrapper.defaultProps = {
-  id: undefined,
   tag: 'div',
 };
 
@@ -29,10 +26,6 @@ PopoverWrapper.propTypes = {
    * Popover reference and the Popover itself.
    */
   children: PropTypes.node.isRequired,
-  /**
-   * ID of the root HTML element.
-   */
-  id: PropTypes.string,
   /**
    * HTML tag to render. Can be any valid HTML tag of your choice, usually a
    * [block-level element](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements).

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

@@ -311,6 +311,22 @@ get an idea of all possible cases you may need to cover.
   }}
 </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.
+
+## Forwarding ref
+
+If you provide [ref], it is forwarded to the root native HTML `<div>` element,
+which enables [Advanced Positioning](#advanced-positioning).
+
 ## API
 
 <Props table of={Popover} />
@@ -333,3 +349,6 @@ get an idea of all possible cases you may need to cover.
 | `--rui-Popover__box-shadow`                          | Popover box shadow                                           |
 
 [Floating UI]: https://floating-ui.com/docs/react-dom
+[React synthetic events]: https://reactjs.org/docs/events.html
+[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[ref]: https://reactjs.org/docs/refs-and-the-dom.html

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

@@ -283,12 +283,18 @@ It's possible to disable just some options or the whole set.
   }}
 </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.
 
-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.
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[radio] input type.
+
+## API
 
 <Props table of={Radio} />
 
@@ -303,3 +309,4 @@ options. On top of that, the following options are available for Radio.
 | `--rui-FormField--check__input--radio--checked__background-image` | Checked input background image (inline, URL, …) |
 
 [React synthetic events]: https://reactjs.org/docs/events.html
+[radio]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#additional_attributes

package/src/lib/components/Radio/Radio.jsx

@@ -30,8 +30,8 @@ export const Radio = ({
         styles.root,
         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),

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

@@ -60,12 +60,12 @@
 }
 
 // Layouts
-.rootLayoutVertical,
-.rootLayoutHorizontal {
+.isRootLayoutVertical,
+.isRootLayoutHorizontal {
     @include box-field-layout.vertical($has-list: true);
 }
 
-.rootLayoutHorizontal {
+.isRootLayoutHorizontal {
     @include box-field-layout.horizontal($has-min-tap-target: true);
 }
 

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

@@ -495,8 +495,27 @@ scrolling shadows in both directions via
     )}}
 </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 `<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.
+
+## Forwarding ref
+
+If you provide [ref], it is forwarded to the scrolling viewport native HTML
+`<div>` element.
+
 ## API
 
 <Props table of={ScrollView} />
 
 [linear gradients]: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
+[React synthetic events]: https://reactjs.org/docs/events.html
+[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[ref]: https://reactjs.org/docs/refs-and-the-dom.html

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

@@ -11,6 +11,7 @@ import {
   withGlobalProps,
 } from '../../provider';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../_helpers/transferProps';
 import { getElementsPositionDifference } from './_helpers/getElementsPositionDifference';
 import { useLoadResize } from './_hooks/useLoadResizeHook';
 import { useScrollPosition } from './_hooks/useScrollPositionHook';
@@ -21,7 +22,7 @@ import styles from './ScrollView.scss';
 // every value less or equal to 1px as start/end.
 const EDGE_DETECTION_INACCURACY_PX = 1;
 
-export const ScrollView = (props) => {
+export const ScrollView = React.forwardRef((props, ref) => {
   const {
     arrows,
     arrowsScrollStep,
@@ -44,6 +45,7 @@ export const ScrollView = (props) => {
     startShadowBackground,
     startShadowInitialOffset,
     startShadowSize,
+    ...restProps
   } = props;
 
   const { translations } = useContext(RUIContext);
@@ -55,7 +57,8 @@ export const ScrollView = (props) => {
   const scrollPositionStart = direction === 'horizontal' ? 'left' : 'top';
   const scrollPositionEnd = direction === 'horizontal' ? 'right' : 'bottom';
   const scrollViewContentEl = useRef(null);
-  const scrollViewViewportEl = useRef(null);
+  const blankRef = useRef(null);
+  const scrollViewViewportEl = ref ?? blankRef;
 
   const handleScrollViewState = (currentPosition) => {
     const isScrolledAtStartActive = currentPosition[scrollPositionStart]
@@ -172,6 +175,7 @@ export const ScrollView = (props) => {
 
   return (
     <div
+      {...transferProps(restProps)}
       className={classNames(
         styles.root,
         isScrolledAtStart && styles.isRootScrolledAtStart,
@@ -195,7 +199,10 @@ export const ScrollView = (props) => {
         '--rui-local-start-shadow-size': startShadowSize,
       }}
     >
-      <div className={styles.viewport} ref={scrollViewViewportEl}>
+      <div
+        className={styles.viewport}
+        ref={scrollViewViewportEl}
+      >
         <div
           className={styles.content}
           id={id && `${id}__content`}
@@ -247,7 +254,7 @@ export const ScrollView = (props) => {
       )}
     </div>
   );
-};
+});
 
 ScrollView.defaultProps = {
   arrows: false,

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

@@ -658,12 +658,22 @@ It's possible to disable just some options or the whole input.
   }}
 </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 `<select>`. 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
+[select] element.
 
-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
-interactive and helps improve its accessibility.
+## Forwarding ref
+
+If you provide [ref], it is forwarded to the native HTML `<select>` element.
+
+## API
 
 <Props table of={SelectField} />
 
@@ -679,3 +689,5 @@ options. On top of that, the following options are available for SelectField.
 | `--rui-FormField--box--select__option--disabled__color` | Text color of disabled SelectField options                |
 
 [React synthetic events]: https://reactjs.org/docs/events.html
+[select]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attributes
+[ref]: https://reactjs.org/docs/refs-and-the-dom.html

package/src/lib/components/SelectField/SelectField.jsx

@@ -24,7 +24,6 @@ export const SelectField = React.forwardRef((props, ref) => {
     size,
     validationState,
     validationText,
-    value,
     variant,
     ...restProps
   } = props;
@@ -38,13 +37,13 @@ export const SelectField = React.forwardRef((props, ref) => {
         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,
         getRootSizeClassName(size, styles),
         getRootValidationStateClassName(validationState, styles),
-        variant === 'filled' ? styles.rootVariantFilled : styles.rootVariantOutline,
+        variant === 'filled' ? styles.isRootVariantFilled : styles.isRootVariantOutline,
       )}
       htmlFor={id}
       id={id && `${id}__label`}
@@ -67,7 +66,6 @@ export const SelectField = React.forwardRef((props, ref) => {
             id={id}
             ref={ref}
             required={required}
-            value={value}
           >
             {
               options.map((option) => {
@@ -132,12 +130,10 @@ SelectField.defaultProps = {
   id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
-  ref: undefined,
   required: false,
   size: 'medium',
   validationState: null,
   validationText: null,
-  value: undefined,
   variant: 'outline',
 };
 
@@ -222,14 +218,6 @@ SelectField.propTypes = {
       ]),
     })),
   ]).isRequired,
-  /**
-   * Reference forwarded to the `select` 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.
    */
@@ -246,13 +234,6 @@ SelectField.propTypes = {
    * Validation message to be displayed.
    */
   validationText: PropTypes.node,
-  /**
-   * Value of the input.
-   */
-  value: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-  ]),
   /**
    * Design variant of the field, further customizable with CSS custom properties.
    */

package/src/lib/components/SelectField/SelectField.scss

@@ -46,11 +46,11 @@
 }
 
 // Variants
-.rootVariantFilled {
+.isRootVariantFilled {
     @include variants.visual(box, $variant: filled, $has-caret: true);
 }
 
-.rootVariantOutline {
+.isRootVariantOutline {
     @include variants.visual(box, $variant: outline, $has-caret: true);
 }
 
@@ -73,12 +73,12 @@
 }
 
 // Layouts
-.rootLayoutVertical,
-.rootLayoutHorizontal {
+.isRootLayoutVertical,
+.isRootLayoutHorizontal {
     @include box-field-layout.vertical();
 }
 
-.rootLayoutHorizontal {
+.isRootLayoutHorizontal {
     @include box-field-layout.horizontal();
 }
 
@@ -91,14 +91,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/Table/README.mdx

@@ -40,7 +40,7 @@ And use it:
         name: 'name',
       },
       {
-        format: (row) => row.dateOfBirth.toLocaleDateString('en-GB'),
+        format: (date) => date.toLocaleDateString('en-GB'),
         label: 'Date of birth',
         name: 'dateOfBirth',
       },
@@ -99,21 +99,21 @@ The easiest way to make tables responsive is to wrap them with the
           name: 'id',
         },
         {
-          format: (row) => (
-            <span style={{ whiteSpace: 'nowrap' }}>{row.name}</span>
+          format: (name) => (
+            <span style={{ whiteSpace: 'nowrap' }}>{name}</span>
           ),
           label: 'Name',
           name: 'name',
         },
         {
-          format: (row) => (
-            <span style={{ whiteSpace: 'nowrap' }}>{row.note}</span>
+          format: (note) => (
+            <span style={{ whiteSpace: 'nowrap' }}>{note}</span>
           ),
           label: 'Note',
           name: 'note',
         },
         {
-          format: (row) => row.dateOfBirth.toLocaleDateString('en-GB'),
+          format: (date) => date.toLocaleDateString('en-GB'),
           label: 'Date of birth',
           name: 'dateOfBirth',
         },
@@ -230,7 +230,7 @@ The following is an example of custom sorting function executed on the client.
         name: 'name',
       },
       {
-        format: (row) => row.dateOfBirth.toISOString(),
+        format: (date) => date.toISOString(),
         isSortable: true,
         label: 'Date of birth',
         name: 'dateOfBirth',
@@ -256,6 +256,20 @@ The following is an example of custom sorting function executed on the client.
   }}
 </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 `<table>` 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
+[table] element.
+
 ## API
 
 <Props table of={Table} />
+
+[React synthetic events]: https://reactjs.org/docs/events.html
+[table]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#attributes