@react-ui-org/react-ui 0.51.0 → 0.52.1

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.$font-size-values, 2);

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();
 }
 
@@ -74,5 +84,5 @@
 }
 
 .isRootInFormLayout {
-    @include box-field-layout.in-form-layout();
+    @include box-field-layout.in-form-layout($is-fieldset: true);
 }

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/TextField/TextField.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 styles from './TextField.scss';
 
 const SMALL_INPUT_SIZE = 10;
@@ -29,7 +30,8 @@ export const TextField = React.forwardRef((props, ref) => {
     variant,
     ...restProps
   } = props;
-  const context = useContext(FormLayoutContext);
+  const formLayoutContext = useContext(FormLayoutContext);
+  const inputGroupContext = useContext(InputGroupContext);
   const hasSmallInput = (inputSize !== null) && (inputSize <= SMALL_INPUT_SIZE);
 
   return (
@@ -39,13 +41,17 @@ export const TextField = React.forwardRef((props, ref) => {
         fullWidth && styles.isRootFullWidth,
         hasSmallInput && styles.hasRootSmallInput,
         inputSize && styles.hasRootCustomInputSize,
-        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,
       )}
@@ -56,7 +62,7 @@ export const TextField = React.forwardRef((props, ref) => {
       <div
         className={classNames(
           styles.label,
-          !isLabelVisible && styles.isLabelHidden,
+          (!isLabelVisible || inputGroupContext) && styles.isLabelHidden,
         )}
         id={id && `${id}__labelText`}
       >
@@ -67,7 +73,7 @@ export const TextField = React.forwardRef((props, ref) => {
           <input
             {...transferProps(restProps)}
             className={styles.input}
-            disabled={disabled}
+            disabled={resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled)}
             id={id}
             ref={ref}
             required={required}
@@ -86,7 +92,7 @@ export const TextField = React.forwardRef((props, ref) => {
             {helpText}
           </div>
         )}
-        {validationText && (
+        {(validationText && !inputGroupContext) && (
           <div
             className={styles.validationText}
             id={id && `${id}__validationText`}
@@ -143,6 +149,8 @@ TextField.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,
   /**
@@ -162,6 +170,8 @@ TextField.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']),
   /**
@@ -174,6 +184,9 @@ TextField.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/TextField/TextField.scss

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

package/src/lib/index.js

@@ -18,6 +18,7 @@ export {
   Grid,
   GridSpan,
 } from './components/Grid';
+export { InputGroup } from './components/InputGroup';
 export {
   Modal,
   ModalBody,

package/src/lib/styles/theme/_borders.scss

@@ -1,2 +1,3 @@
 $width: var(--rui-dimension-border-width-1);
-$radius: var(--rui-dimension-radius-1);
+$radius-1: var(--rui-dimension-radius-1);
+$radius-2: var(--rui-dimension-radius-2);

package/src/lib/styles/tools/form-fields/_box-field-elements.scss

@@ -3,6 +3,7 @@
 //    result width across browsers.
 // 3. Let inputs properly fit various layout scenarios.
 // 4. Leave out space for SelectField caret.
+// 5. Use a block-level display mode to prevent extra white space below grouped inputs in Safari.
 
 @use "../../settings/form-fields" as settings;
 @use "../../theme/form-fields" as theme;
@@ -93,8 +94,8 @@
     align-items: center;
     justify-content: center;
     width: calc(#{settings.$box-field-caret-size} - 2 * #{theme.$box-border-width});
-    border-top-right-radius: theme.$box-border-radius;
-    border-bottom-right-radius: theme.$box-border-radius;
+    border-start-end-radius: theme.$box-border-radius;
+    border-end-end-radius: theme.$box-border-radius;
     pointer-events: none;
 }
 
@@ -122,3 +123,19 @@
         transform: scaleX(1);
     }
 }
+
+@mixin in-group-layout() {
+    .inputContainer {
+        display: block; // 5.
+    }
+
+    &:not(:first-child) .input {
+        border-start-start-radius: var(--rui-local-inner-border-radius);
+        border-end-start-radius: var(--rui-local-inner-border-radius);
+    }
+
+    &:not(:last-child) .input {
+        border-start-end-radius: var(--rui-local-inner-border-radius);
+        border-end-end-radius: var(--rui-local-inner-border-radius);
+    }
+}

package/src/lib/styles/tools/form-fields/_box-field-layout.scss

@@ -26,8 +26,12 @@
 //     Reverted for full-width fields.
 //
 // 8.  Grid settings are inherited from horizontal FormLayout and applied using `subgrid`.
-//     A fallback is supplied to browsers that don't support `subgrid` yet. See FormLayout styles
-//     for more.
+//     A fallback is supplied to browsers that don't support `subgrid` yet.
+//
+//     Chrome 117+ supports `subgrid` but it doesn't work for `<fieldset>`. This is why we always
+//     use the fallback for `<fieldset>`.
+//
+//     https://bugs.chromium.org/p/chromium/issues/detail?id=1473242
 //     https://github.com/react-ui-org/react-ui/issues/232
 //
 // 9.  Help texts and validation messages can take up full width of FormLayout. There is no reason
@@ -180,7 +184,7 @@
     }
 }
 
-@mixin in-form-layout() {
+@mixin in-form-layout($is-fieldset: false) {
     justify-self: start; // 12.
 
     .field {
@@ -192,19 +196,27 @@
             width: auto; // 11.
         }
 
-        &.isRootLayoutHorizontal,
-        &.isRootLayoutHorizontal.hasRootSmallInput {
-            grid: inherit; // 8.
-            grid-template-columns: subgrid; // 8.
-            grid-column: span 2; // 8.
-
-            @supports not (grid-template-columns: subgrid) {
-                display: contents; // 8.
+        // 8.
+        @if $is-fieldset {
+            &.isRootLayoutHorizontal,
+            &.isRootLayoutHorizontal.hasRootSmallInput {
+                display: contents;
+            }
+        } @else {
+            &.isRootLayoutHorizontal,
+            &.isRootLayoutHorizontal.hasRootSmallInput {
+                grid: inherit;
+                grid-template-columns: subgrid;
+                grid-column: span 2;
+
+                @supports not (grid-template-columns: subgrid) {
+                    display: contents;
+                }
             }
-        }
 
-        &.isRootLayoutHorizontal.isRootFullWidth {
-            grid-template-columns: subgrid; // 8.
+            &.isRootLayoutHorizontal.isRootFullWidth {
+                grid-template-columns: subgrid;
+            }
         }
 
         &.isRootLayoutHorizontal .label,