@react-ui-org/react-ui 0.59.2 → 0.60.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-ui-org/react-ui",
   "description": "React UI is a themeable UI library for React apps.",
-  "version": "0.59.2",
+  "version": "0.60.0",
   "keywords": [
     "react",
     "ui",

package/src/components/ButtonGroup/ButtonGroup.jsx

@@ -6,7 +6,7 @@ import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../helpers/classNames/classNames';
 import { transferProps } from '../../helpers/transferProps';
 import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';
-import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty';
 import styles from './ButtonGroup.module.scss';
 import { ButtonGroupContext } from './ButtonGroupContext';
 

package/src/components/Card/Card.module.scss

@@ -35,6 +35,7 @@
     }
 
     .isRootDisabled {
+        border: theme.$disabled-border-width solid var(--rui-local-border-color, theme.$disabled-border-color);
         background-color: theme.$disabled-background-color;
         opacity: theme.$disabled-opacity;
     }

package/src/components/Card/CardFooter.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { transferProps } from '../../helpers/transferProps';
 import { withGlobalProps } from '../../providers/globalProps';
-import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty';
 import styles from './Card.module.scss';
 
 export const CardFooter = ({

package/src/components/Card/README.md

@@ -300,6 +300,8 @@ Separate your card actions with CardFooter. See
 | `--rui-Card--raised__box-shadow`         | Box shadow of raised card                      |
 | `--rui-Card--disabled__background-color` | Card background color in disabled state        |
 | `--rui-Card--disabled__opacity`          | Card opacity in disabled state                 |
+| `--rui-Card--disabled__border-width`     | Card border width in disabled state            |
+| `--rui-Card--disabled__border-color`     | Card border color in disabled state            |
 
 ### Theming Variants
 

package/src/components/Card/_theme.scss

@@ -9,3 +9,5 @@ $raised-box-shadow: var(--rui-Card--raised__box-shadow);
 
 $disabled-background-color: var(--rui-Card--disabled__background-color);
 $disabled-opacity: var(--rui-Card--disabled__opacity);
+$disabled-border-width: var(--rui-Card--disabled__border-width);
+$disabled-border-color: var(--rui-Card--disabled__border-color);

package/src/components/FileInputField/FileInputField.jsx

@@ -19,6 +19,8 @@ import { Text } from '../Text';
 import { FormLayoutContext } from '../FormLayout';
 import styles from './FileInputField.module.scss';
 
+/* istanbul ignore file */
+
 export const FileInputField = React.forwardRef((props, ref) => {
   const {
     disabled,
@@ -47,6 +49,10 @@ export const FileInputField = React.forwardRef((props, ref) => {
   const internalInputRef = useRef();
 
   const handleReset = useCallback((event) => {
+    if (internalInputRef.current) {
+      internalInputRef.current.value = '';
+    }
+
     setSelectedFileNames([]);
     onFilesChanged([], event);
   }, [onFilesChanged]);
@@ -192,15 +198,20 @@ export const FileInputField = React.forwardRef((props, ref) => {
             type="button"
           >
             <Text lines={1}>
-              {!selectedFileNames.length && (
+              {isDragging && (
+                <span className={styles.dropFileHereText}>
+                  {translations.FileInputField.dropFileHere}
+                </span>
+              )}
+              {!isDragging && !selectedFileNames.length && (
                 <>
                   <span className={styles.dropZoneLink}>{translations.FileInputField.browse}</span>
                   {' '}
                   {translations.FileInputField.drop}
                 </>
               )}
-              {selectedFileNames.length === 1 && selectedFileNames[0]}
-              {selectedFileNames.length > 1 && (
+              {!isDragging && selectedFileNames.length === 1 && selectedFileNames[0]}
+              {!isDragging && selectedFileNames.length > 1 && (
                 <>
                   {selectedFileNames.length}
                   {' '}

package/src/components/FileInputField/FileInputField.module.scss

@@ -64,6 +64,10 @@
         --rui-local-border-color: #{settings.$drop-zone-active-border-color};
     }
 
+    .dropFileHereText {
+        color: var(--rui-local-link-color, var(--rui-color-text-link));
+    }
+
     .dropZoneLink {
         @include links.base();
 

package/src/components/FormLayout/FormLayout.jsx

@@ -3,7 +3,7 @@ import React, { useMemo } 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 { FormLayoutContext } from './FormLayoutContext';
 import styles from './FormLayout.module.scss';
 

package/src/components/FormLayout/FormLayoutCustomField.jsx

@@ -5,7 +5,7 @@ import { classNames } from '../../helpers/classNames/classNames';
 import { transferProps } from '../../helpers/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
-import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
 import styles from './FormLayoutCustomField.module.scss';
 

package/src/components/Grid/Grid.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 { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
 import styles from './Grid.module.scss';
 

package/src/components/Grid/GridSpan.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 { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
 import styles from './Grid.module.scss';
 

package/src/components/InputGroup/InputGroup.jsx

@@ -8,7 +8,7 @@ import { classNames } from '../../helpers/classNames/classNames';
 import { transferProps } from '../../helpers/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
-import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { FormLayoutContext } from '../FormLayout';
 import { Text } from '../Text';

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();
@@ -79,7 +80,13 @@ export const Modal = ({
     [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,11 +108,17 @@ export const Modal = ({
       primaryButtonRef,
     ],
   );
+
+  const onMouseDown = useCallback((e) => {
+    mouseDownTarget.current = e.target;
+  }, []);
+
   const events = {
     onCancel,
     onClick,
     onClose,
     onKeyDown,
+    onMouseDown,
   };
 
   if (portalId === null) {

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';
 

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 = ({

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

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/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';

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';

package/src/components/Toolbar/ToolbarGroup.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 styles from './Toolbar.module.scss';
 

package/src/components/Toolbar/ToolbarItem.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { classNames } from '../../helpers/classNames/classNames';
 import { transferProps } from '../../helpers/transferProps';
 import { withGlobalProps } from '../../providers/globalProps';
-import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
+import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty';
 import styles from './Toolbar.module.scss';
 
 export const ToolbarItem = ({

package/src/helpers/isChildrenEmpty/README.md

@@ -0,0 +1,57 @@
+# isChildrenEmpty
+
+The `isChildrenEmpty` helper function determines whether the given children
+value should be considered "empty".
+
+It is useful in React when conditionally rendering components based on
+whether children contain meaningful content.
+
+## Usage
+
+To use `isChildrenEmpty` helper, you need to import it first:
+
+```js
+import { isChildrenEmpty } from '@react-ui-org/react-ui';
+```
+
+Then use it:
+
+```docoff-react-preview
+
+React.createElement(() => {
+  const children = null;
+  const isEmpty = isChildrenEmpty(children);
+
+  if (isEmpty === false) {
+    return (
+      <div>{children}</div>
+    );
+  }
+
+  return (
+    <div>Children not provided</div>
+  );
+});
+```
+
+```docoff-react-preview
+React.createElement(() => {
+  const children = (
+    <>
+      <h1>Title</h1>
+      <p>Content</p>
+    </>
+  );
+  const isEmpty = isChildrenEmpty(children);
+
+  if (isEmpty === false) {
+    return (
+      <div>{children}</div>
+    );
+  }
+
+  return (
+    <div>Children not provided</div>
+  );
+});
+```

package/src/helpers/isChildrenEmpty/index.js

@@ -0,0 +1 @@
+export { isChildrenEmpty } from './isChildrenEmpty';

package/src/index.js

@@ -64,3 +64,4 @@ export { TranslationsProvider } from './providers/translations';
 // Helpers
 export { classNames } from './helpers/classNames';
 export { transferProps } from './helpers/transferProps';
+export { isChildrenEmpty } from './helpers/isChildrenEmpty';

package/src/theme.scss

@@ -832,6 +832,8 @@
         --rui-Card--raised__box-shadow: var(--rui-shadow-layer-1);
         --rui-Card--disabled__background-color: var(--rui-color-background-disabled);
         --rui-Card--disabled__opacity: var(--rui-ratio-disabled-opacity);
+        --rui-Card--disabled__border-width: var(--rui-dimension-border-width-1);
+        --rui-Card--disabled__border-color: var(--rui-color-border-primary);
 
         // Card: variant: success
         --rui-Card--success__color: var(--rui-color-text-primary);

package/src/translations/en.js

@@ -5,6 +5,7 @@ export default {
   FileInputField: {
     browse: 'Browse',
     drop: 'or drop file here',
+    dropFileHere: 'Drop file here',
     filesSelected: 'files selected',
   },
   ModalCloseButton: {