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

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

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

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

@@ -0,0 +1,11 @@
+export const getScrollingClassName = (type, styles) => {
+  if (type === 'auto') {
+    return styles.isRootScrollingAuto;
+  }
+
+  if (type === 'custom') {
+    return styles.isRootScrollingCustom;
+  }
+
+  return null;
+};

package/src/lib/components/Modal/_settings.scss

@@ -2,12 +2,8 @@
 @use "../../styles/settings/z-indexes";
 @use "../../styles/theme/borders";
 @use "../../styles/theme/typography";
-@use "../../styles/tools/spacing";
 
-$padding-x: spacing.of(5);
-$padding-y: spacing.of(3);
-$content-padding-bottom: spacing.of(6);
 $border-radius: borders.$radius;
-$head-title-font-size: map.get(typography.$size-values, 1);
 $z-index: z-indexes.$modal;
 $backdrop-z-index: z-indexes.$modal-backdrop;
+$title-font-size: map.get(typography.$size-values, 1);

package/src/lib/components/Modal/_theme.scss

@@ -1,6 +1,12 @@
+$padding-x: var(--rui-Modal__padding-x);
+$padding-y: var(--rui-Modal__padding-y);
 $background: var(--rui-Modal__background);
 $box-shadow: var(--rui-Modal__box-shadow);
+$separator-width: var(--rui-Modal__separator__width);
+$separator-color: var(--rui-Modal__separator__color);
+$header-gap: var(--rui-Modal__header__gap);
 $footer-background: var(--rui-Modal__footer__background);
+$footer-gap: var(--rui-Modal__footer__gap);
 $backdrop-background: var(--rui-Modal__backdrop__background);
 $outer-spacing-xs: var(--rui-Modal__outer-spacing--xs);
 $outer-spacing-sm: var(--rui-Modal__outer-spacing--sm);

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

@@ -1 +1,7 @@
-export { default } from './Modal';
+export { default as Modal } from './Modal';
+export { default as ModalBody } from './ModalBody';
+export { default as ModalCloseButton } from './ModalCloseButton';
+export { default as ModalContent } from './ModalContent';
+export { default as ModalHeader } from './ModalHeader';
+export { default as ModalFooter } from './ModalFooter';
+export { default as ModalTitle } from './ModalTitle';

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

@@ -10,7 +10,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { Paper } from './Paper'
+import { Paper } from '../..'
 
 Paper is a basic surface to hold content.
 
@@ -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/Paper/index.js

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

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

@@ -4,30 +4,28 @@ import { createPortal } from 'react-dom';
 import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../_helpers/transferProps';
-import withForwardedRef from '../withForwardedRef';
 import getRootSideClassName from './_helpers/getRootSideClassName';
 import getRootAlignmentClassName from './_helpers/getRootAlignmentClassName';
 import styles from './Popover.scss';
 
-export const Popover = ({
-  forwardedRef,
-  placement,
-  children,
-  id,
-  portalId,
-  ...restProps
-}) => {
+export const Popover = React.forwardRef((props, ref) => {
+  const {
+    placement,
+    children,
+    portalId,
+    ...restProps
+  } = props;
+
   const PopoverEl = (
     <div
+      {...transferProps(restProps)}
       className={classNames(
         styles.root,
-        forwardedRef && styles.isRootControlled,
+        ref && styles.isRootControlled,
         getRootSideClassName(placement, styles),
         getRootAlignmentClassName(placement, styles),
       )}
-      id={id}
-      ref={forwardedRef}
-      {...transferProps(restProps)}
+      ref={ref}
     >
       {children}
       <span className={styles.arrow} />
@@ -39,11 +37,9 @@ export const Popover = ({
   }
 
   return createPortal(PopoverEl, document.getElementById(portalId));
-};
+});
 
 Popover.defaultProps = {
-  forwardedRef: undefined,
-  id: undefined,
   placement: 'bottom',
   portalId: null,
 };
@@ -53,18 +49,6 @@ Popover.propTypes = {
    * Popover content.
    */
   children: PropTypes.node.isRequired,
-  /**
-   * Reference forwarded to the root `div` 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.
-   */
-  id: PropTypes.string,
   /**
    * Popover placement affects position of the arrow.
    * Compatible with [Floating UI API](https://floating-ui.com/docs/computePosition#placement).
@@ -89,6 +73,6 @@ Popover.propTypes = {
   portalId: PropTypes.string,
 };
 
-export const PopoverWithContext = withForwardedRef(withGlobalProps(Popover, 'Popover'));
+export const PopoverWithGlobalProps = withGlobalProps(Popover, 'Popover');
 
-export default PopoverWithContext;
+export default PopoverWithGlobalProps;

package/src/lib/components/Popover/Popover.scss

@@ -4,14 +4,15 @@
 
 @use "theme";
 
-.wrapper {
-    position: relative;
-}
-
 .root {
     position: absolute;
-    width: theme.$width;
+    width: max-content;
+    max-width: theme.$max-width;
     padding: theme.$padding;
+    text-align: left;
+    white-space: normal;
+    word-break: normal;
+    word-wrap: break-word;
     color: theme.$color;
     border: theme.$border-width solid theme.$border-color;
     border-radius: theme.$border-radius;
@@ -205,7 +206,7 @@
     transform: translate(0, -100%) rotateZ(90deg);
 }
 
-// Controlled
+// Controlled placement
 .isRootControlled.isRootAtTop,
 .isRootControlled.isRootAtBottom,
 .isRootControlled.isRootAtLeft,

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

@@ -1,26 +1,23 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
-import withForwardedRef from '../withForwardedRef';
-import styles from './Popover.scss';
+import { transferProps } from '../_helpers/transferProps';
+import styles from './PopoverWrapper.scss';
 
 export const PopoverWrapper = ({
   children,
-  id,
   tag: Tag,
   ...restProps
 }) => (
   <Tag
-    className={styles.wrapper}
-    id={id}
-    {...restProps}
+    {...transferProps(restProps)}
+    className={styles.root}
   >
     {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).
@@ -40,7 +33,7 @@ PopoverWrapper.propTypes = {
   tag: PropTypes.string,
 };
 
-export const PopoverWrapperWithContext = withForwardedRef(withGlobalProps(PopoverWrapper, 'PopoverWrapper'));
+export const PopoverWrapperWithContext = withGlobalProps(PopoverWrapper, 'PopoverWrapper');
 
 export default PopoverWrapperWithContext;
 

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

@@ -0,0 +1,3 @@
+.root {
+    position: relative;
+}

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

@@ -16,13 +16,15 @@ import {
   Props,
 } from 'docz'
 import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
-import { Button } from '../Button/Button'
-import { ButtonGroup } from '../ButtonGroup/ButtonGroup'
-import { SelectField } from '../SelectField/SelectField'
-import { Toolbar } from '../Toolbar/Toolbar'
-import { ToolbarItem } from '../Toolbar/ToolbarItem'
-import { Popover } from './Popover'
-import { PopoverWrapper } from './PopoverWrapper'
+import {
+  Button,
+  Popover,
+  ButtonGroup,
+  SelectField,
+  Toolbar,
+  ToolbarItem,
+  PopoverWrapper,
+} from '../..'
 
 Popover displays additional information without interrupting user flow.
 
@@ -205,8 +207,8 @@ As opposed to the [basic setup](#placement), Popover will be placed according to
 its triggering component (`reference`), but still recognizing the closest parent
 element with `position: relative` or `position: absolute` if there is any.
 
-Popover reacts on the `forwardedRef` option, necessary for advanced positioning:
-when `forwardedRef` is set, Popover resets its built-in positioning and relies
+Popover reacts on the `ref` option, necessary for advanced positioning:
+when `ref` is set, Popover resets its built-in positioning and relies
 on provided `style`.
 
 👉 Please consult [Floating UI] documentation to understand how it works and to
@@ -284,13 +286,12 @@ get an idea of all possible cases you may need to cover.
           >
             <Button
               aria-describedby={isPopoverOpen ? 'my-advanced-popover' : undefined}
-              forwardedRef={reference}
               label="Trigger Popover"
               onClick={() => setIsPopoverOpen(!isPopoverOpen)}
+              ref={reference}
             />
             {isPopoverOpen && (
               <Popover
-                forwardedRef={floating}
                 id="my-advanced-popover"
                 placement={finalPlacement}
                 style={{
@@ -298,6 +299,7 @@ get an idea of all possible cases you may need to cover.
                   top: y ? y : '',
                   left: x ? x : '',
                 }}
+                ref={floating}
               >
                 Auto-flipping Popover
               </Popover>
@@ -309,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} />
@@ -331,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/Popover/_theme.scss

@@ -2,7 +2,7 @@
 
 @use "sass:math";
 
-$width: var(--rui-Popover__width);
+$max-width: var(--rui-Popover__max-width);
 $padding: var(--rui-Popover__padding);
 $border-width: var(--rui-Popover__border-width);
 $border-color: var(--rui-Popover__border-color);

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

@@ -12,7 +12,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { Radio } from './Radio'
+import { Radio } from '../..'
 
 ## Basic Usage
 
@@ -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),
@@ -50,34 +50,37 @@ export const Radio = ({
       <div className={styles.field}>
         <ul className={styles.list}>
           {
-            options.map((option) => (
-              <li key={option.value}>
-                <label
-                  className={styles.option}
-                  htmlFor={id && `${id}__item__${option.value}`}
-                  id={id && `${id}__item__${option.value}__label`}
-                >
-                  <input
-                    {...transferProps(restProps)}
-                    className={styles.input}
-                    checked={restProps.onChange
-                      ? (value === option.value) || false
-                      : undefined}
-                    disabled={disabled || option.disabled}
-                    id={id && `${id}__item__${option.value}`}
-                    name={id}
-                    type="radio"
-                    value={option.value}
-                  />
-                  <span
-                    className={styles.optionLabel}
-                    id={id && `${id}__item__${option.value}__labelText`}
+            options.map((option) => {
+              const key = option.key ?? option.value;
+              return (
+                <li key={key}>
+                  <label
+                    className={styles.option}
+                    htmlFor={id && `${id}__item__${key}`}
+                    id={id && `${id}__item__${key}__label`}
                   >
-                    { option.label }
-                  </span>
-                </label>
-              </li>
-            ))
+                    <input
+                      {...transferProps(restProps)}
+                      className={styles.input}
+                      checked={restProps.onChange
+                        ? (value === option.value) || false
+                        : undefined}
+                      disabled={disabled || option.disabled}
+                      id={id && `${id}__item__${key}`}
+                      name={id}
+                      type="radio"
+                      value={option.value}
+                    />
+                    <span
+                      className={styles.optionLabel}
+                      id={id && `${id}__item__${key}__labelText`}
+                    >
+                      { option.label }
+                    </span>
+                  </label>
+                </li>
+              );
+            })
           }
         </ul>
         {helpText && (
@@ -134,6 +137,9 @@ Radio.propTypes = {
    * * `<ID>__item__<VALUE>`
    * * `<ID>__item__<VALUE>__label`
    * * `<ID>__item__<VALUE>__labelText`
+   *
+   * If `key` in the option definition object is set,
+   * then `option.key` is used instead of `option.value` in place of `<VALUE>`.
    */
   id: PropTypes.string,
   /**
@@ -154,9 +160,13 @@ Radio.propTypes = {
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
    * Set of options to be chosen from.
+   *
+   * For generating unique IDs the `option.value` is normally used. For cases when this is not practical or
+   * the `option.value` values are not unique the `option.key` attribute can be set manually.
    */
   options: PropTypes.arrayOf(PropTypes.shape({
     disabled: PropTypes.bool,
+    key: PropTypes.string,
     label: PropTypes.string.isRequired,
     value: PropTypes.oneOfType([
       PropTypes.string,

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/Radio/index.js

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