@react-ui-org/react-ui 0.50.2 → 0.52.0

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

@@ -0,0 +1,7 @@
+export const getPositionClassName = (modalPosition, styles) => {
+  if (modalPosition === 'top') {
+    return styles.isRootPositionTop;
+  }
+
+  return styles.isRootPositionCenter;
+};

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

@@ -0,0 +1,19 @@
+export const getSizeClassName = (modalSize, styles) => {
+  if (modalSize === 'small') {
+    return styles.isRootSizeSmall;
+  }
+
+  if (modalSize === 'medium') {
+    return styles.isRootSizeMedium;
+  }
+
+  if (modalSize === 'large') {
+    return styles.isRootSizeLarge;
+  }
+
+  if (modalSize === 'fullscreen') {
+    return styles.isRootSizeFullscreen;
+  }
+
+  return styles.isRootSizeAuto;
+};

package/src/lib/components/Modal/_hooks/useModalFocus.js

@@ -0,0 +1,126 @@
+import { useEffect } from 'react';
+
+export const useModalFocus = (
+  autoFocus,
+  childrenWrapperRef,
+  primaryButtonRef,
+  closeButtonRef,
+) => {
+  useEffect(
+    () => {
+      // Following code finds all focusable elements and among them first not disabled form
+      // field element (input, textarea or select) or primary button and focuses it. This is
+      // necessary to have focus on one of those elements to be able to submit the form
+      // by pressing Enter key. If there are neither, it tries to focus any other focusable
+      // elements. In case there are none or `autoFocus` is disabled, childrenWrapperElement
+      // (Modal itself) is focused.
+
+      const childrenWrapperElement = childrenWrapperRef.current;
+
+      if (childrenWrapperElement == null) {
+        return () => {};
+      }
+
+      const childrenFocusableElements = Array.from(
+        childrenWrapperElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),
+      );
+
+      const firstFocusableElement = childrenFocusableElements[0];
+      const lastFocusableElement = childrenFocusableElements[childrenFocusableElements.length - 1];
+
+      const resolveFocusBeforeListener = () => {
+        if (!autoFocus || childrenFocusableElements.length === 0) {
+          childrenWrapperElement.tabIndex = -1;
+          childrenWrapperElement.focus();
+          return;
+        }
+
+        const firstFormFieldEl = childrenFocusableElements.find(
+          (element) => ['INPUT', 'TEXTAREA', 'SELECT'].includes(element.nodeName) && !element.disabled,
+        );
+
+        if (firstFormFieldEl) {
+          firstFormFieldEl.focus();
+          return;
+        }
+
+        if (primaryButtonRef?.current != null) {
+          primaryButtonRef.current.focus();
+          return;
+        }
+
+        firstFocusableElement.focus();
+      };
+
+      const keyPressHandler = (e) => {
+        if (e.key === 'Escape' && closeButtonRef?.current != null) {
+          closeButtonRef.current.click();
+          return;
+        }
+
+        if (
+          e.key === 'Enter'
+          && e.target.nodeName !== 'BUTTON'
+          && e.target.nodeName !== 'TEXTAREA'
+          && e.target.nodeName !== 'A'
+          && primaryButtonRef?.current != null
+        ) {
+          primaryButtonRef.current.click();
+          return;
+        }
+
+        // Following code traps focus inside Modal
+
+        if (e.key !== 'Tab') {
+          return;
+        }
+
+        if (childrenFocusableElements.length === 0) {
+          childrenWrapperElement.focus();
+          e.preventDefault();
+          return;
+        }
+
+        if (
+          ![
+            ...childrenFocusableElements,
+            childrenWrapperElement,
+          ]
+            .includes(window.document.activeElement)
+        ) {
+          firstFocusableElement.focus();
+          e.preventDefault();
+          return;
+        }
+
+        if (!e.shiftKey && window.document.activeElement === lastFocusableElement) {
+          firstFocusableElement.focus();
+          e.preventDefault();
+          return;
+        }
+
+        if (e.shiftKey
+          && (
+            window.document.activeElement === firstFocusableElement
+            || window.document.activeElement === childrenWrapperElement
+          )
+        ) {
+          lastFocusableElement.focus();
+          e.preventDefault();
+        }
+      };
+
+      resolveFocusBeforeListener();
+
+      window.document.addEventListener('keydown', keyPressHandler, false);
+
+      return () => window.document.removeEventListener('keydown', keyPressHandler, false);
+    },
+    [
+      autoFocus,
+      childrenWrapperRef,
+      primaryButtonRef,
+      closeButtonRef,
+    ],
+  );
+};

package/src/lib/components/Modal/_hooks/useModalScrollPrevention.js

@@ -0,0 +1,35 @@
+import { useLayoutEffect } from 'react';
+
+export const useModalScrollPrevention = (preventScrollUnderneath) => {
+  useLayoutEffect(
+    () => {
+      if (preventScrollUnderneath === 'off') {
+        return () => {};
+      }
+
+      if (preventScrollUnderneath === 'default') {
+        const scrollbarWidth = Math.abs(window.innerWidth - window.document.documentElement.clientWidth);
+        const prevOverflow = window.document.body.style.overflow;
+        const prevPaddingRight = window.document.body.style.paddingRight;
+
+        window.document.body.style.overflow = 'hidden';
+
+        if (Number.isNaN(parseInt(prevPaddingRight, 10))) {
+          window.document.body.style.paddingRight = `${scrollbarWidth}px`;
+        } else {
+          window.document.body.style.paddingRight = `calc(${prevPaddingRight} + ${scrollbarWidth}px)`;
+        }
+
+        return () => {
+          window.document.body.style.overflow = prevOverflow;
+          window.document.body.style.paddingRight = prevPaddingRight;
+        };
+      }
+
+      preventScrollUnderneath?.start();
+
+      return preventScrollUnderneath?.reset;
+    },
+    [preventScrollUnderneath],
+  );
+};

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

@@ -3,7 +3,7 @@
 @use "../../styles/theme/borders";
 @use "../../styles/theme/typography";
 
-$border-radius: borders.$radius;
+$border-radius: borders.$radius-2;
 $z-index: z-indexes.$modal;
 $backdrop-z-index: z-indexes.$modal-backdrop;
-$title-font-size: map.get(typography.$size-values, 1);
+$title-font-size: map.get(typography.$font-size-values, 2);

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

@@ -88,19 +88,22 @@ complete list of accepted values.
           <span id="alignment-options-label">Alignment:</span>
         </ToolbarItem>
         <ToolbarItem>
-          <ButtonGroup aria-labelledby="alignment-options-label">
+          <ButtonGroup aria-labelledby="alignment-options-label" priority="outline">
             <Button
-              color={align === '-start' ? 'dark' : 'primary'}
+              aria-pressed={align === '-start'}
+              color={align === '-start' ? 'selected' : 'secondary'}
               label="start"
               onClick={() => setAlign('-start')}
             />
             <Button
-              color={align === '' ? 'dark' : 'primary'}
+              aria-pressed={align === ''}
+              color={align === '' ? 'selected' : 'secondary'}
               label="center"
               onClick={() => setAlign('')}
             />
             <Button
-              color={align === '-end' ? 'dark' : 'primary'}
+              aria-pressed={align === '-end'}
+              color={align === '-end' ? 'selected' : 'secondary'}
               label="end"
               onClick={() => setAlign('-end')}
             />

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

@@ -77,7 +77,12 @@ See [API](#api) for all available options.
 - Use **clear, calm error messages** when there's a problem with what they
   entered.
 
-📖 [Read more about checkboxes and radios at Nielsen Norman Group.](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/)
+- In the background, Radio uses the [`fieldset`][fieldset] element. Not only it
+  improves the [accessibility] of the group, it also allows you to make use of
+  its built-in features like disabling all nested inputs or pairing the group
+  with a form outside. Consult [the MDN docs][fieldset] to learn more.
+
+📖 [Read more about checkboxes and radios at Nielsen Norman Group.][nng-radio]
 
 ## Invisible Label
 
@@ -308,5 +313,8 @@ options. On top of that, the following options are available for Radio.
 | `--rui-FormField--check__input--radio__border-radius`              | Input corner radius                            |
 | `--rui-FormField--check__input--radio--checked__background-image` | Checked input background image (inline, URL, …) |
 
+[nng-radio]: https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/
+[fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
+[accessibility]: https://www.w3.org/WAI/tutorials/forms/grouping/
 [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

@@ -25,7 +25,8 @@ export const Radio = ({
   const context = useContext(FormLayoutContext);
 
   return (
-    <div
+    <fieldset
+      {...transferProps(restProps)}
       className={classNames(
         styles.root,
         context && styles.isRootInFormLayout,
@@ -36,53 +37,59 @@ export const Radio = ({
         required && styles.isRootRequired,
         getRootValidationStateClassName(validationState, styles),
       )}
+      disabled={disabled}
       id={id}
     >
+      <legend
+        className={styles.legend}
+        id={id && `${id}__label`}
+      >
+        {label}
+      </legend>
       <div
+        aria-hidden
         className={classNames(
           styles.label,
           !isLabelVisible && styles.isLabelHidden,
         )}
-        id={id && `${id}__labelText`}
+        id={id && `${id}__displayLabel`}
       >
         {label}
       </div>
       <div className={styles.field}>
-        <ul className={styles.list}>
+        <div className={styles.options}>
           {
             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`}
+                <label
+                  className={styles.option}
+                  htmlFor={id && `${id}__item__${key}`}
+                  id={id && `${id}__item__${key}__label`}
+                  key={key}
+                >
+                  <input
+                    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`}
                   >
-                    <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>
+                    { option.label }
+                  </span>
+                </label>
               );
             })
           }
-        </ul>
+        </div>
         {helpText && (
           <div
             className={styles.helpText}
@@ -100,7 +107,7 @@ export const Radio = ({
           </div>
         )}
       </div>
-    </div>
+    </fieldset>
   );
 };
 
@@ -129,7 +136,8 @@ Radio.propTypes = {
    * ID of the root HTML element.
    *
    * Also serves as base for ids of nested elements:
-   * * `<ID>__labelText`
+   * * `<ID>__label`
+   * * `<ID>__displayLabel`
    * * `<ID>__helpText`
    * * `<ID>__validationText`
    *

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

@@ -1,3 +1,6 @@
+// 1. Legends are tricky to style, let's use a `div` instead.
+//    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#styling_with_css
+
 @use "../../styles/tools/form-fields/box-field-elements";
 @use "../../styles/tools/form-fields/box-field-layout";
 @use "../../styles/tools/form-fields/foundation";
@@ -11,15 +14,22 @@
 // Foundation
 .root {
     @include foundation.root();
+    @include foundation.fieldset();
     @include variants.visual(check);
 }
 
+// 1.
+.legend {
+    @include accessibility.hide-text();
+}
+
+// 1.
 .label,
 .optionLabel {
     @include foundation.label();
 }
 
-.list {
+.options {
     @include reset.list();
 }
 

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

@@ -297,8 +297,8 @@ by smaller or bigger portions.
     arrows
     arrowsScrollStep={300}
     direction="horizontal"
-    nextArrowElement={(<span class="typography-size-3">➡️</span>)}
-    prevArrowElement={(<span class="typography-size-3">⬅️</span>)}
+    nextArrowElement={(<span class="font-size-3">➡️</span>)}
+    prevArrowElement={(<span class="font-size-3">⬅️</span>)}
     scrollbar={false}
   >
     <Placeholder>

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

@@ -7,6 +7,7 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
+import { InputGroupContext } from '../InputGroup/InputGroupContext';
 import { Option } from './_components/Option';
 import styles from './SelectField.scss';
 
@@ -28,20 +29,25 @@ export const SelectField = React.forwardRef((props, ref) => {
     ...restProps
   } = props;
 
-  const context = useContext(FormLayoutContext);
+  const formLayoutContext = useContext(FormLayoutContext);
+  const inputGroupContext = useContext(InputGroupContext);
 
   return (
     <label
       className={classNames(
         styles.root,
         fullWidth && styles.isRootFullWidth,
-        context && styles.isRootInFormLayout,
-        resolveContextOrProp(context && context.layout, layout) === 'horizontal'
+        formLayoutContext && styles.isRootInFormLayout,
+        resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled) && styles.isRootDisabled,
+        resolveContextOrProp(formLayoutContext && formLayoutContext.layout, layout) === 'horizontal'
           ? styles.isRootLayoutHorizontal
           : styles.isRootLayoutVertical,
-        disabled && styles.isRootDisabled,
+        inputGroupContext && styles.isRootGrouped,
         required && styles.isRootRequired,
-        getRootSizeClassName(size, styles),
+        getRootSizeClassName(
+          resolveContextOrProp(inputGroupContext && inputGroupContext.size, size),
+          styles,
+        ),
         getRootValidationStateClassName(validationState, styles),
         variant === 'filled' ? styles.isRootVariantFilled : styles.isRootVariantOutline,
       )}
@@ -51,7 +57,7 @@ export const SelectField = React.forwardRef((props, ref) => {
       <div
         className={classNames(
           styles.label,
-          !isLabelVisible && styles.isLabelHidden,
+          (!isLabelVisible || inputGroupContext) && styles.isLabelHidden,
         )}
         id={id && `${id}__labelText`}
       >
@@ -62,7 +68,7 @@ export const SelectField = React.forwardRef((props, ref) => {
           <select
             {...transferProps(restProps)}
             className={styles.input}
-            disabled={disabled}
+            disabled={resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled)}
             id={id}
             ref={ref}
             required={required}
@@ -110,7 +116,7 @@ export const SelectField = React.forwardRef((props, ref) => {
             {helpText}
           </div>
         )}
-        {validationText && (
+        {(validationText && !inputGroupContext) && (
           <div
             className={styles.validationText}
             id={id && `${id}__validationText`}
@@ -169,6 +175,8 @@ SelectField.propTypes = {
   /**
    * If `false`, the label will be visually hidden (but remains accessible by assistive
    * technologies).
+   *
+   * Automatically set to `false` when the component is rendered within `InputGroup` component.
    */
   isLabelVisible: PropTypes.bool,
   /**
@@ -224,6 +232,8 @@ SelectField.propTypes = {
   required: PropTypes.bool,
   /**
    * Size of the field.
+   *
+   * Ignored if the component is rendered within `InputGroup` component as the value is inherited in such case.
    */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   /**
@@ -232,6 +242,9 @@ SelectField.propTypes = {
   validationState: PropTypes.oneOf(['invalid', 'valid', 'warning']),
   /**
    * Validation message to be displayed.
+   *
+   * Validation text is never rendered when the component is placed into `InputGroup`. Instead, the `InputGroup`
+   * component itself renders all validation texts of its nested components.
    */
   validationText: PropTypes.node,
   /**

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

@@ -102,3 +102,8 @@
 .isRootSizeLarge {
     @include box-field-sizes.size(large);
 }
+
+// Groups
+.isRootGrouped {
+    @include box-field-elements.in-group-layout();
+}

package/src/lib/components/Table/_components/TableCell.scss

@@ -14,12 +14,13 @@
     border-bottom-width: 2px;
 }
 
+.tableHeadCellLayout {
+    display: flex;
+    gap: settings.$cell-padding-x;
+    align-items: center;
+}
+
 .isTableCellSortingActive,
 .isTableHeadCellSortingActive {
     background-color: settings.$sorted-background-color;
 }
-
-.sortButton {
-    display: inline-block;
-    margin-right: settings.$cell-padding-x;
-}

package/src/lib/components/Table/_components/TableHeaderCell/TableHeaderCell.jsx

@@ -16,23 +16,26 @@ export const TableHeaderCell = ({
       className={isSortingActive ? styles.isTableHeadCellSortingActive : styles.tableHeadCell}
       id={id}
     >
-      {sort && column.isSortable && (
-        <div className={styles.sortButton}>
+      <span className={styles.tableHeadCellLayout}>
+        {sort && column.isSortable && (
           <Button
+            aria-pressed={isSortingActive}
             beforeLabel={
               sortDirection === 'asc'
                 ? sort.ascendingIcon
                 : sort.descendingIcon
             }
+            color={isSortingActive ? 'selected' : 'secondary'}
             id={id && `${id}__sortButton`}
             label={sortDirection}
             labelVisibility="none"
             onClick={() => sort.onClick(column.name, sortDirection)}
             priority="flat"
+            size="small"
           />
-        </div>
-      )}
-      {column.label}
+        )}
+        {column.label}
+      </span>
     </th>
   );
 };

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

@@ -1,15 +1,14 @@
 @use "sass:map";
 @use "../../styles/theme/borders";
-@use "../../styles/theme/colors";
 @use "../../styles/theme/typography";
 @use "../../styles/tools/spacing";
 
 $cell-padding-x: spacing.of(3);
 $cell-padding-y: spacing.of(1);
 $border-width: borders.$width;
-$border-color: map.get(colors.$grays, gray-100);
-$background-color: colors.$white;
-$head-background-color: colors.$white;
+$border-color: var(--rui-color-border-secondary);
+$background-color: var(--rui-color-background-basic);
+$head-background-color: var(--rui-color-background-basic);
 $head-font-weight: map.get(typography.$font-weight-values, bold);
-$hover-background-color: map.get(colors.$grays, gray-50);
-$sorted-background-color: map.get(colors.$grays, gray-50);
+$hover-background-color: var(--rui-color-background-interactive-hover);
+$sorted-background-color: var(--rui-color-background-selected);

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

@@ -156,19 +156,22 @@ will override automatic break point selection in `auto` mode when present.
               <span id="word-wrapping-options-label">Word wrapping:</span>
             </ToolbarItem>
             <ToolbarItem>
-              <ButtonGroup aria-labelledby="word-wrapping-options-label">
+              <ButtonGroup aria-labelledby="word-wrapping-options-label" priority="outline">
                 <Button
-                  color={wordWrapping === 'normal' ? 'dark' : 'primary'}
+                  aria-pressed={wordWrapping === 'normal'}
+                  color={wordWrapping === 'normal' ? 'selected' : 'secondary'}
                   label="normal"
                   onClick={() => setWordWrapping('normal')}
                 />
                 <Button
-                  color={wordWrapping === 'long-words' ? 'dark' : 'primary'}
+                  aria-pressed={wordWrapping === 'long-words'}
+                  color={wordWrapping === 'long-words' ? 'selected' : 'secondary'}
                   label="long-words"
                   onClick={() => setWordWrapping('long-words')}
                 />
                 <Button
-                  color={wordWrapping === 'anywhere' ? 'dark' : 'primary'}
+                  aria-pressed={wordWrapping === 'anywhere'}
+                  color={wordWrapping === 'anywhere' ? 'selected' : 'secondary'}
                   label="anywhere"
                   onClick={() => setWordWrapping('anywhere')}
                 />
@@ -180,19 +183,22 @@ will override automatic break point selection in `auto` mode when present.
               <span id="hyphens-options-label">Hyphens:</span>
             </ToolbarItem>
             <ToolbarItem>
-              <ButtonGroup aria-labelledby="hyphens-options-label">
+              <ButtonGroup aria-labelledby="hyphens-options-label" priority="outline">
                 <Button
-                  color={hyphens === 'none' ? 'dark' : 'primary'}
+                  aria-pressed={hyphens === 'none'}
+                  color={hyphens === 'none' ? 'selected' : 'secondary'}
                   label="none"
                   onClick={() => setHyphens('none')}
                 />
                 <Button
-                  color={hyphens === 'auto' ? 'dark' : 'primary'}
+                  aria-pressed={hyphens === 'auto'}
+                  color={hyphens === 'auto' ? 'selected' : 'secondary'}
                   label="auto"
                   onClick={() => setHyphens('auto')}
                 />
                 <Button
-                  color={hyphens === 'manual' ? 'dark' : 'primary'}
+                  aria-pressed={hyphens === 'manual'}
+                  color={hyphens === 'manual' ? 'selected' : 'secondary'}
                   label="manual"
                   onClick={() => setHyphens('manual')}
                 />