@react-ui-org/react-ui 0.59.3 → 0.61.0

package/src/components/InputGroup/README.md

@@ -60,13 +60,14 @@ See [API](#api) for all available options.
   Make sure your inputs fit their container, especially on small screens.
 
 - In the background, InputGroup 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.
+  only does it improve 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.
 
 - InputGroup currently **supports grouping of**
   [TextField](/components/TextField), [SelectField](/components/SelectField),
-  and [Button](/components/Button) components.
+  [FileInputField](/components/FileInputField), and [Button](/components/Button)
+  components.
 
 - To group [Buttons](/components/Button) only, use the
   [ButtonGroup](/components/ButtonGroup) component which is designed
@@ -104,7 +105,7 @@ You can set the `size` property directly on InputGroup to be shared for all
 fields and buttons inside the group. This property is then passed over to
 individual elements. At the same time, it **cannot be overridden** on the
 fields' or buttons' level. While technically possible, from the design point of
-view it's undesirable to group elements of totally different types or sizes.
+view, it's undesirable to group elements of totally different types or sizes.
 
 ## Invisible Label
 
@@ -136,9 +137,9 @@ the input.
 
 ## Horizontal layout
 
-The default vertical layout is very easy to use and work with. However, there
-are situations where horizontal layout suits better — and that's why React UI
-supports this kind of layout as well.
+The default vertical layout is straightforward to use and work with. However,
+there are situations where horizontal layout suits better — and that's why
+React UI supports this kind of layout as well.
 
 ```docoff-react-preview
 <InputGroup
@@ -150,6 +151,57 @@ supports this kind of layout as well.
 </InputGroup>
 ```
 
+## Help Text
+
+You may provide one or more additional help texts to clarify how the input group
+should be filled.
+
+These messages are not semantically tied to the `children` elements, the
+connection should be expressed in textual form in the actual message.
+
+⚠️ Help texts passed to input elements' `helpText` prop are ignored within
+InputGroup.
+
+```docoff-react-preview
+React.createElement(() => {
+  const [fruit, setFruit] = React.useState('apple');
+  const options = [
+    {
+      label: 'Apple',
+      value: 'apple',
+    },
+    {
+      label: 'Pear',
+      value: 'pear',
+    },
+    {
+      label: 'Cherry',
+      value: 'cherry',
+    },
+  ];
+  return (
+    <InputGroup
+      label="Your favourite fruit"
+      helpTexts={[
+        "Choose one or more kinds of fruit to feel happy.",
+      ]}
+    >
+      <SelectField
+        label="Your favourite fruit"
+        onChange={(e) => setFruit(e.target.value)}
+        options={options}
+        value={fruit}
+      />
+      <TextField
+        label="Variety"
+        placeholder="Eg. Golden delicious"
+      />
+      <Button label="Submit" />
+    </InputGroup>
+  );
+})
+```
+
 ## States
 
 ### Disabled State
@@ -169,12 +221,15 @@ Validation states visually present the result of validation of the grouped
 inputs. Input group's validation state is taken from its child inputs. You
 should always **provide validation messages for states other than valid**
 directly through `validationTexts` prop so users know what happened and what
-action they should take or what options they have. These messages are not
-semantically tied to the `children` elements, the connection should be expressed
-in textual form in the actual message. The individual `children` elements must
-not show any `validationText`, they only show their respective `validationState`.
-Validation messages passed to input elements' `validationText` prop will be
-ignored.
+action they should take or what options they have.
+
+These messages are not semantically tied to the `children` elements, the
+connection should be expressed in textual form in the actual message. The
+individual `children` elements must not show any `validationText`, they only
+show their respective `validationState`.
+
+⚠️ Validation messages passed to input elements' `validationText` prop are
+ignored within InputGroup.
 
 👉 While there is a `required` property to visually denote the whole input group
 is required, there is no functional effect as there is no such HTML attribute

package/src/components/Modal/Modal.jsx

@@ -61,6 +61,7 @@ export const Modal = ({
   ...restProps
 }) => {
   const internalDialogRef = useRef();
+  const mouseDownTarget = useRef(null);
 
   useEffect(() => {
     internalDialogRef.current.showModal();
@@ -75,11 +76,22 @@ export const Modal = ({
   useModalScrollPrevention(preventScrollUnderneath);
 
   const onCancel = useCallback(
-    (e) => dialogOnCancelHandler(e, closeButtonRef, restProps.onCancel),
+    (e) => {
+      if (e.target !== internalDialogRef.current) {
+        return;
+      }
+      dialogOnCancelHandler(e, closeButtonRef, restProps.onCancel);
+    },
     [closeButtonRef, restProps.onCancel],
   );
   const onClick = useCallback(
-    (e) => dialogOnClickHandler(e, closeButtonRef, internalDialogRef, allowCloseOnBackdropClick),
+    (e) => dialogOnClickHandler(
+      e,
+      closeButtonRef,
+      internalDialogRef,
+      allowCloseOnBackdropClick,
+      mouseDownTarget.current,
+    ),
     [allowCloseOnBackdropClick, closeButtonRef, internalDialogRef],
   );
   const onClose = useCallback(
@@ -101,14 +113,20 @@ export const Modal = ({
       primaryButtonRef,
     ],
   );
+
+  const onMouseDown = useCallback((e) => {
+    mouseDownTarget.current = e.target;
+  }, []);
+
   const events = {
     onCancel,
     onClick,
     onClose,
     onKeyDown,
+    onMouseDown,
   };
 
-  if (portalId === null) {
+  if (portalId === undefined) {
     return preRender(
       children,
       color,
@@ -139,14 +157,14 @@ Modal.defaultProps = {
   allowCloseOnEscapeKey: true,
   allowPrimaryActionOnEnterKey: true,
   autoFocus: true,
-  children: null,
-  closeButtonRef: null,
+  children: undefined,
+  closeButtonRef: undefined,
   color: undefined,
-  dialogRef: null,
-  portalId: null,
+  dialogRef: undefined,
+  portalId: undefined,
   position: 'center',
   preventScrollUnderneath: window.document.body,
-  primaryButtonRef: null,
+  primaryButtonRef: undefined,
   size: 'medium',
 };
 

package/src/components/Modal/ModalBody.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../helpers/classNames/classNames';
 import { transferProps } from '../../helpers/transferProps';
-import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty';
 import { getScrollingClassName } from './_helpers/getScrollingClassName';
 import styles from './ModalBody.module.scss';
 
@@ -30,7 +30,7 @@ export const ModalBody = ({
 };
 
 ModalBody.defaultProps = {
-  children: null,
+  children: undefined,
   scrolling: 'auto',
 };
 

package/src/components/Modal/ModalContent.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../helpers/transferProps';
-import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty';
 import styles from './ModalContent.module.scss';
 
 export const ModalContent = ({
@@ -24,7 +24,7 @@ export const ModalContent = ({
 };
 
 ModalContent.defaultProps = {
-  children: null,
+  children: undefined,
 };
 
 ModalContent.propTypes = {

package/src/components/Modal/_helpers/dialogOnClickHandler.js

@@ -17,12 +17,18 @@ export const dialogOnClickHandler = (
   closeButtonRef,
   dialogRef,
   allowCloseOnBackdropClick,
+  mouseDownTarget,
 ) => {
   // If it is not allowed to close modal on backdrop click, do nothing.
   if (!allowCloseOnBackdropClick) {
     return;
   }
 
+  // If the click started on the inside of the dialog, do nothing.
+  if (e.target !== mouseDownTarget) {
+    return;
+  }
+
   // Detection of the click on the backdrop is based on the following conditions:
   // 1. The click target is the dialog itself. This prevents detection of clicks on the dialog's children.
   // 2. The click is outside the dialog's boundaries.

package/src/components/Popover/Popover.jsx

@@ -43,7 +43,7 @@ export const Popover = React.forwardRef((props, ref) => {
           getRootAlignmentClassName(placement, styles),
         )}
         ref={ref}
-        style={placementStyle ? cleanPlacementStyle(placementStyle) : null}
+        style={placementStyle ? cleanPlacementStyle(placementStyle) : undefined}
       >
         {children}
         <span className={styles.arrow} />
@@ -51,7 +51,7 @@ export const Popover = React.forwardRef((props, ref) => {
     </>
   );
 
-  if (portalId === null) {
+  if (portalId === undefined) {
     return PopoverEl;
   }
 
@@ -60,9 +60,9 @@ export const Popover = React.forwardRef((props, ref) => {
 
 Popover.defaultProps = {
   placement: 'bottom',
-  placementStyle: null,
-  popoverTargetId: null,
-  portalId: null,
+  placementStyle: undefined,
+  popoverTargetId: undefined,
+  portalId: undefined,
 };
 
 Popover.propTypes = {

package/src/components/Radio/Radio.jsx

@@ -113,14 +113,14 @@ export const Radio = ({
 
 Radio.defaultProps = {
   disabled: false,
-  helpText: null,
+  helpText: undefined,
   id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
   renderAsRequired: false,
   required: false,
-  validationState: null,
-  validationText: null,
+  validationState: undefined,
+  validationText: undefined,
   value: undefined,
 };
 

package/src/components/ScrollView/ScrollView.jsx

@@ -5,6 +5,7 @@ import React, {
   useLayoutEffect,
   useRef,
   useState,
+  useCallback,
 } from 'react';
 import { TranslationsContext } from '../../providers/translations';
 import { withGlobalProps } from '../../providers/globalProps';
@@ -58,20 +59,26 @@ export const ScrollView = React.forwardRef((props, ref) => {
   const blankRef = useRef(null);
   const scrollViewViewportEl = ref ?? blankRef;
 
-  const handleScrollViewState = (currentPosition) => {
+  const handleScrollViewState = useCallback((currentPosition) => {
     const isScrolledAtStartActive = currentPosition[scrollPositionStart]
       <= -1 * EDGE_DETECTION_INACCURACY_PX;
     const isScrolledAtEndActive = currentPosition[scrollPositionEnd]
       >= EDGE_DETECTION_INACCURACY_PX;
 
-    if (isScrolledAtStartActive !== isScrolledAtStart) {
-      setIsScrolledAtStart(isScrolledAtStartActive);
-    }
+    setIsScrolledAtStart((prevIsScrolledAtStart) => {
+      if (isScrolledAtStartActive !== prevIsScrolledAtStart) {
+        return isScrolledAtStartActive;
+      }
+      return prevIsScrolledAtStart;
+    });
 
-    if (isScrolledAtEndActive !== isScrolledAtEnd) {
-      setIsScrolledAtEnd(isScrolledAtEndActive);
-    }
-  };
+    setIsScrolledAtEnd((prevIsScrolledAtEnd) => {
+      if (isScrolledAtEndActive !== prevIsScrolledAtEnd) {
+        return isScrolledAtEndActive;
+      }
+      return prevIsScrolledAtEnd;
+    });
+  }, [scrollPositionStart, scrollPositionEnd]);
 
   /**
    * It handles scroll event fired on `scrollViewViewportEl` element. If autoScroll is in progress,
@@ -146,7 +153,6 @@ export const ScrollView = React.forwardRef((props, ref) => {
 
   useScrollPosition(
     (currentPosition) => (handleScrollViewState(currentPosition)),
-    [isScrolledAtStart, isScrolledAtEnd],
     scrollViewContentEl,
     scrollViewViewportEl,
     debounce,
@@ -163,6 +169,30 @@ export const ScrollView = React.forwardRef((props, ref) => {
     [autoScroll, autoScrollChildrenKeys, autoScrollChildrenLength],
   );
 
+  // ResizeObserver to detect when content or viewport dimensions change due to style changes
+  useLayoutEffect(() => {
+    const contentElement = scrollViewContentEl.current;
+    const viewportElement = scrollViewViewportEl.current;
+
+    if (!contentElement || !viewportElement) {
+      return () => {};
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      handleScrollViewState(
+        getElementsPositionDifference(scrollViewContentEl, scrollViewViewportEl),
+      );
+    });
+
+    // Observe both content and viewport for dimension changes
+    resizeObserver.observe(contentElement);
+    resizeObserver.observe(viewportElement);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [scrollViewContentEl, scrollViewViewportEl, handleScrollViewState]);
+
   const arrowHandler = (contentEl, viewportEl, scrollViewDirection, shiftDirection, step) => {
     const offset = shiftDirection === 'next' ? step : -1 * step;
     const differenceX = scrollViewDirection === 'horizontal' ? offset : 0;
@@ -267,7 +297,7 @@ ScrollView.defaultProps = {
   arrows: false,
   arrowsScrollStep: 200,
   autoScroll: 'off',
-  children: null,
+  children: undefined,
   debounce: 50,
   direction: 'vertical',
   endShadowBackground: 'linear-gradient(var(--rui-local-end-shadow-direction), rgba(255 255 255 / 1), rgba(255 255 255 / 0))',
@@ -275,10 +305,10 @@ ScrollView.defaultProps = {
   endShadowSize: '2em',
   id: undefined,
   nextArrowColor: undefined,
-  nextArrowElement: null,
+  nextArrowElement: undefined,
   nextArrowInitialOffset: '-0.5rem',
   prevArrowColor: undefined,
-  prevArrowElement: null,
+  prevArrowElement: undefined,
   prevArrowInitialOffset: '-0.5rem',
   scrollbar: true,
   shadows: true,

package/src/components/ScrollView/_hooks/useScrollPositionHook.js

@@ -1,10 +1,10 @@
 import {
-  useLayoutEffect,
   useRef,
+  useEffect,
 } from 'react';
 import { getElementsPositionDifference } from '../_helpers/getElementsPositionDifference';
 
-export const useScrollPosition = (effect, dependencies, contentEl, viewportEl, wait) => {
+export const useScrollPosition = (effect, contentEl, viewportEl, wait) => {
   const throttleTimeout = useRef(null);
 
   const callBack = (wasDelayed = false) => {
@@ -15,7 +15,7 @@ export const useScrollPosition = (effect, dependencies, contentEl, viewportEl, w
     }
   };
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const viewport = viewportEl.current;
 
     const handleScroll = () => {
@@ -34,7 +34,7 @@ export const useScrollPosition = (effect, dependencies, contentEl, viewportEl, w
       clearTimeout(throttleTimeout.current);
       viewport.removeEventListener('scroll', handleScroll);
     };
-  }, dependencies); // eslint-disable-line react-hooks/exhaustive-deps
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
 };
 
 export default useScrollPosition;

package/src/components/SelectField/SelectField.jsx

@@ -109,7 +109,7 @@ export const SelectField = React.forwardRef((props, ref) => {
             <div className={styles.bottomLine} />
           )}
         </div>
-        {helpText && (
+        {(helpText && !inputGroupContext) && (
           <div
             className={styles.helpText}
             id={id && `${id}__helpText`}
@@ -133,15 +133,15 @@ export const SelectField = React.forwardRef((props, ref) => {
 SelectField.defaultProps = {
   disabled: false,
   fullWidth: false,
-  helpText: null,
+  helpText: undefined,
   id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
   renderAsRequired: false,
   required: false,
   size: 'medium',
-  validationState: null,
-  validationText: null,
+  validationState: undefined,
+  validationText: undefined,
   variant: 'outline',
 };
 
@@ -156,6 +156,9 @@ SelectField.propTypes = {
   fullWidth: PropTypes.bool,
   /**
    * Optional help text.
+   *
+   * Help text is never rendered when the component is placed into `InputGroup`.
+   * If a help text is needed, it must be defined on the `InputGroup` component instead.
    */
   helpText: PropTypes.node,
   /**
@@ -249,8 +252,8 @@ SelectField.propTypes = {
   /**
    * 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.
+   * Validation text is never rendered when the component is placed into `InputGroup`.
+   * If a validation text is needed, it must be defined on the `InputGroup` component instead.
    */
   validationText: PropTypes.node,
   /**

package/src/components/Table/Table.jsx

@@ -53,7 +53,7 @@ export const Table = ({
 
 Table.defaultProps = {
   id: undefined,
-  sort: null,
+  sort: undefined,
 };
 
 Table.propTypes = {

package/src/components/Table/_components/TableBodyCell/TableBodyCell.jsx

@@ -20,7 +20,7 @@ TableBodyCell.defaultProps = {
   format: undefined,
   id: undefined,
   isSortingActive: false,
-  value: null,
+  value: undefined,
 };
 
 TableBodyCell.propTypes = {

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

@@ -42,7 +42,7 @@ export const TableHeaderCell = ({
 
 TableHeaderCell.defaultProps = {
   id: undefined,
-  sort: null,
+  sort: undefined,
 };
 
 TableHeaderCell.propTypes = {

package/src/components/Tabs/TabsItem.jsx

@@ -45,11 +45,11 @@ export const TabsItem = ({
 );
 
 TabsItem.defaultProps = {
-  afterLabel: null,
-  beforeLabel: null,
+  afterLabel: undefined,
+  beforeLabel: undefined,
   id: undefined,
   isActive: false,
-  onClick: null,
+  onClick: undefined,
 };
 
 TabsItem.propTypes = {

package/src/components/Text/Text.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../helpers/classNames/classNames';
 import { transferProps } from '../../helpers/transferProps';
-import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty';
 import { getRootClampClassName } from './_helpers/getRootClampClassName';
 import { getRootHyphensClassName } from './_helpers/getRootHyphensClassName';
 import { getRootWordWrappingClassName } from './_helpers/getRootWordWrappingClassName';
@@ -42,7 +42,7 @@ export const Text = ({
 
 Text.defaultProps = {
   blockLevel: false,
-  children: null,
+  children: undefined,
   hyphens: 'none',
   lines: undefined,
   wordWrapping: 'normal',

package/src/components/TextArea/TextArea.jsx

@@ -93,14 +93,14 @@ export const TextArea = React.forwardRef((props, ref) => {
 TextArea.defaultProps = {
   disabled: false,
   fullWidth: false,
-  helpText: null,
+  helpText: undefined,
   id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
   required: false,
   size: 'medium',
-  validationState: null,
-  validationText: null,
+  validationState: undefined,
+  validationText: undefined,
   variant: 'outline',
 };
 

package/src/components/TextField/TextField.jsx

@@ -32,7 +32,7 @@ export const TextField = React.forwardRef((props, ref) => {
   } = props;
   const formLayoutContext = useContext(FormLayoutContext);
   const inputGroupContext = useContext(InputGroupContext);
-  const hasSmallInput = (inputSize !== null) && (inputSize <= SMALL_INPUT_SIZE);
+  const hasSmallInput = (inputSize !== undefined) && (inputSize <= SMALL_INPUT_SIZE);
 
   return (
     <label
@@ -84,7 +84,7 @@ export const TextField = React.forwardRef((props, ref) => {
             <div className={styles.bottomLine} />
           )}
         </div>
-        {helpText && (
+        {(helpText && !inputGroupContext) && (
           <div
             className={styles.helpText}
             id={id && `${id}__helpText`}
@@ -108,16 +108,16 @@ export const TextField = React.forwardRef((props, ref) => {
 TextField.defaultProps = {
   disabled: false,
   fullWidth: false,
-  helpText: null,
+  helpText: undefined,
   id: undefined,
-  inputSize: null,
+  inputSize: undefined,
   isLabelVisible: true,
   layout: 'vertical',
   required: false,
   size: 'medium',
   type: 'text',
-  validationState: null,
-  validationText: null,
+  validationState: undefined,
+  validationText: undefined,
   variant: 'outline',
 };
 
@@ -132,6 +132,9 @@ TextField.propTypes = {
   fullWidth: PropTypes.bool,
   /**
    * Optional help text.
+   *
+   * Help text is never rendered when the component is placed into `InputGroup`.
+   * If a help text is needed, it must be defined on the `InputGroup` component instead.
    */
   helpText: PropTypes.node,
   /**
@@ -185,8 +188,8 @@ TextField.propTypes = {
   /**
    * 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.
+   * Validation text is never rendered when the component is placed into `InputGroup`.
+   * If a validation text is needed, it must be defined on the `InputGroup` component instead.
    */
   validationText: PropTypes.node,
   /**

package/src/components/Toggle/Toggle.jsx

@@ -81,14 +81,14 @@ export const Toggle = React.forwardRef((props, ref) => {
 
 Toggle.defaultProps = {
   disabled: false,
-  helpText: null,
+  helpText: undefined,
   id: undefined,
   isLabelVisible: true,
   labelPosition: 'after',
   renderAsRequired: false,
   required: false,
-  validationState: null,
-  validationText: null,
+  validationState: undefined,
+  validationText: undefined,
 };
 
 Toggle.propTypes = {

package/src/components/Toolbar/Toolbar.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../helpers/classNames/classNames';
 import { transferProps } from '../../helpers/transferProps';
-import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty';
 import { getAlignClassName } from './_helpers/getAlignClassName';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
 import styles from './Toolbar.module.scss';
@@ -38,7 +38,7 @@ export const Toolbar = ({
 
 Toolbar.defaultProps = {
   align: 'top',
-  children: null,
+  children: undefined,
   dense: false,
   justify: 'start',
   nowrap: false,