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

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

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

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/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.
 

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,30 @@ 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,
+    id,
+    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,13 +39,13 @@ export const Popover = ({
   }
 
   return createPortal(PopoverEl, document.getElementById(portalId));
-};
+});
 
 Popover.defaultProps = {
-  forwardedRef: undefined,
   id: undefined,
   placement: 'bottom',
   portalId: null,
+  ref: undefined,
 };
 
 Popover.propTypes = {
@@ -53,14 +53,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.
    */
@@ -87,8 +79,16 @@ 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 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,8 +1,8 @@
 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,
@@ -11,9 +11,9 @@ export const PopoverWrapper = ({
   ...restProps
 }) => (
   <Tag
-    className={styles.wrapper}
+    {...transferProps(restProps)}
+    className={styles.root}
     id={id}
-    {...restProps}
   >
     {children}
   </Tag>
@@ -40,7 +40,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>

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
 

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

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

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