@react-ui-org/react-ui 0.58.0 → 0.59.1

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

@@ -0,0 +1,46 @@
+// Disable coverage for the following function
+/* istanbul ignore next */
+
+/**
+ * Handles the click event of the dialog which is fired when the user clicks on the dialog or on its descendants.
+ *
+ * This handler is used to close the dialog when the user clicks on the backdrop, if it is allowed to close
+ * on backdrop click and the close button is not disabled.
+ *
+ * @param e
+ * @param closeButtonRef
+ * @param dialogRef
+ * @param allowCloseOnBackdropClick
+ */
+export const dialogOnClickHandler = (
+  e,
+  closeButtonRef,
+  dialogRef,
+  allowCloseOnBackdropClick,
+) => {
+  // If it is not allowed to close modal on backdrop click, do nothing.
+  if (!allowCloseOnBackdropClick) {
+    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.
+  const dialogRect = dialogRef.current.getBoundingClientRect();
+  const isClickedOnBackdrop = dialogRef.current === e.target && (
+    e.clientX < dialogRect.left
+    || e.clientX > dialogRect.right
+    || e.clientY < dialogRect.top
+    || e.clientY > dialogRect.bottom
+  );
+
+  // If user does not click on the backdrop, do nothing.
+  if (!isClickedOnBackdrop) {
+    return;
+  }
+
+  // If the close button is not disabled, close the modal.
+  if (closeButtonRef?.current != null && closeButtonRef?.current?.disabled === false) {
+    closeButtonRef.current.click();
+  }
+};

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

@@ -0,0 +1,28 @@
+// Disable coverage for the following function
+/* istanbul ignore next */
+
+/**
+ * Handles the close event of the dialog which is fired when the user presses the Escape key or triggers close event
+ * by native dialog mechanism.
+ *
+ * It prevents the default behaviour of the native dialog and closes the dialog manually by clicking the close button,
+ * if the close button is not disabled.
+ *
+ * @param e
+ * @param closeButtonRef
+ * @param onCloseHandler
+ */
+export const dialogOnCloseHandler = (e, closeButtonRef, onCloseHandler = undefined) => {
+  // Prevent the default behaviour of the event as we want to close dialog manually.
+  e.preventDefault();
+
+  // If the close button is not disabled, close the modal.
+  if (closeButtonRef?.current != null && closeButtonRef?.current?.disabled === false) {
+    closeButtonRef.current.click();
+  }
+
+  // This is a custom handler that is passed as a prop to the Modal component
+  if (onCloseHandler) {
+    onCloseHandler(e);
+  }
+};

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

@@ -0,0 +1,62 @@
+// Disable coverage for the following function
+/* istanbul ignore next */
+
+/**
+ * Handles the keydown event of the dialog which is fired when the user presses a key within the dialog.
+ *
+ * This handler is used to stop propagation of the Escape key press, if it is not allowed to close
+ * on Escape key and the close button is disabled.
+ *
+ * It is also used to trigger the primary action when the user presses the Enter key, if it is allowed to trigger
+ * the primary action on Enter key and the primary button is not disabled. This applies only when the focused
+ * element is an input or select as other elements should not trigger the primary action. Textarea is omitted
+ * as Enter key is used for new line.
+ *
+ * @param e
+ * @param closeButtonRef
+ * @param primaryButtonRef
+ * @param allowCloseOnEscapeKey
+ * @param allowPrimaryActionOnEnterKey
+ */
+export const dialogOnKeyDownHandler = (
+  e,
+  closeButtonRef,
+  primaryButtonRef,
+  allowCloseOnEscapeKey,
+  allowPrimaryActionOnEnterKey,
+) => {
+  if (e.key === 'Escape') {
+    // Prevent closing the modal using the Escape key when one of the following conditions is met:
+    // 1. The close button is not present
+    // 2. The close button is disabled
+    // 3. `allowCloseOnEscapeKey` is set to `false`
+    //
+    // ⚠️ Else-if statement calling `closeButtonRef.current.click()` is necessary due to missing support
+    // of close event in happy-dom library. When this is fixed, the `else` statement can be removed
+    // as the `closeButtonRef.current.click()` will be handled by `dialogOnCancelHandler.js`.
+    if (
+      closeButtonRef?.current == null
+      || closeButtonRef?.current?.disabled === true
+      || !allowCloseOnEscapeKey
+    ) {
+      e.preventDefault();
+    } else if (process?.env?.NODE_ENV === 'test') {
+      closeButtonRef.current.click();
+    }
+  }
+
+  // Trigger the primary action when the Enter key is pressed and the following conditions are met:
+  // 1. The primary button is present
+  // 2. The primary button is not disabled
+  // 3. `allowPrimaryActionOnEnterKey` is set to `true`
+  // 4. The focused element is an input or select (text area is omitted as Enter key is used for new line)
+  if (
+    e.key === 'Enter'
+    && primaryButtonRef?.current != null
+    && primaryButtonRef?.current?.disabled === false
+    && allowPrimaryActionOnEnterKey
+    && ['INPUT', 'SELECT'].includes(e.target.nodeName)
+  ) {
+    primaryButtonRef.current.click();
+  }
+};

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

@@ -3,5 +3,5 @@ export const getPositionClassName = (modalPosition, styles) => {
     return styles.isRootPositionTop;
   }
 
-  return styles.isRootPositionCenter;
+  return null;
 };

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

@@ -2,9 +2,8 @@ import { useEffect } from 'react';
 
 export const useModalFocus = (
   autoFocus,
-  childrenWrapperRef,
+  dialogRef,
   primaryButtonRef,
-  closeButtonRef,
 ) => {
   useEffect(
     () => {
@@ -12,115 +11,49 @@ export const useModalFocus = (
       // 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
+      // elements. In case there are none or `autoFocus` is disabled, dialogElement
       // (Modal itself) is focused.
 
-      const childrenWrapperElement = childrenWrapperRef.current;
+      const dialogElement = dialogRef.current;
 
-      if (childrenWrapperElement == null) {
+      if (dialogElement == null) {
         return () => {};
       }
 
       const childrenFocusableElements = Array.from(
-        childrenWrapperElement.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),
+        dialogElement.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 (!autoFocus || childrenFocusableElements.length === 0) {
+        dialogElement.tabIndex = -1;
+        dialogElement.focus();
+        return () => {};
+      }
 
-        if (!e.shiftKey && window.document.activeElement === lastFocusableElement) {
-          firstFocusableElement.focus();
-          e.preventDefault();
-          return;
-        }
+      const firstFormFieldEl = childrenFocusableElements.find(
+        (element) => ['INPUT', 'TEXTAREA', 'SELECT'].includes(element.nodeName) && !element.disabled,
+      );
 
-        if (e.shiftKey
-          && (
-            window.document.activeElement === firstFocusableElement
-            || window.document.activeElement === childrenWrapperElement
-          )
-        ) {
-          lastFocusableElement.focus();
-          e.preventDefault();
-        }
-      };
+      if (firstFormFieldEl) {
+        firstFormFieldEl.focus();
+        return () => {};
+      }
 
-      resolveFocusBeforeListener();
+      if (primaryButtonRef?.current != null && primaryButtonRef?.current?.disabled === false) {
+        primaryButtonRef.current.focus();
+        return () => {};
+      }
 
-      window.document.addEventListener('keydown', keyPressHandler, false);
+      firstFocusableElement.focus();
 
-      return () => window.document.removeEventListener('keydown', keyPressHandler, false);
+      return () => {};
     },
     [
       autoFocus,
-      childrenWrapperRef,
+      dialogRef,
       primaryButtonRef,
-      closeButtonRef,
     ],
   );
 };

package/src/components/Modal/_settings.scss

@@ -1,9 +1,10 @@
 @use "sass:map";
-@use "../../styles/settings/z-indexes";
+@use "../../styles/settings/collections";
 @use "../../styles/theme/borders";
 @use "../../styles/theme/typography";
 
+$border-width: borders.$width;
 $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);
+$colors: collections.$feedback-colors;
+$themeable-properties: border-color, background-color;

package/src/components/Modal/_theme.scss

@@ -10,6 +10,7 @@ $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);
+$animation-duration: var(--rui-Modal__animation__duration);
 
 $sizes: (
     auto: (

package/src/components/Paper/Paper.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import styles from './Paper.module.scss';
 
 export const Paper = ({

package/src/components/Popover/Popover.jsx

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { createPortal } from 'react-dom';
+import { transferProps } from '../../helpers/transferProps';
+import { classNames } from '../../helpers/classNames';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
 import cleanPlacementStyle from './_helpers/cleanPlacementStyle';
 import getRootSideClassName from './_helpers/getRootSideClassName';
 import getRootAlignmentClassName from './_helpers/getRootAlignmentClassName';

package/src/components/Popover/PopoverWrapper.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { transferProps } from '../../utils/transferProps';
+import { transferProps } from '../../helpers/transferProps';
 import styles from './PopoverWrapper.module.scss';
 
 export const PopoverWrapper = ({

package/src/components/Radio/Radio.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { FormLayoutContext } from '../FormLayout';

package/src/components/ScrollView/ScrollView.jsx

@@ -8,8 +8,8 @@ import React, {
 } from 'react';
 import { TranslationsContext } from '../../providers/translations';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getElementsPositionDifference } from './_helpers/getElementsPositionDifference';
 import { useLoadResize } from './_hooks/useLoadResizeHook';
 import { useScrollPosition } from './_hooks/useScrollPositionHook';

package/src/components/SelectField/SelectField.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';

package/src/components/Table/Table.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { transferProps } from '../../utils/transferProps';
+import { transferProps } from '../../helpers/transferProps';
 import { TableHeaderCell } from './_components/TableHeaderCell';
 import { TableBodyCell } from './_components/TableBodyCell';
 import styles from './Table.module.scss';

package/src/components/Tabs/Tabs.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { transferProps } from '../../utils/transferProps';
+import { transferProps } from '../../helpers/transferProps';
 import styles from './Tabs.module.scss';
 
 export const Tabs = ({

package/src/components/Tabs/TabsItem.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import styles from './TabsItem.module.scss';
 
 export const TabsItem = ({

package/src/components/Text/Text.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { getRootClampClassName } from './_helpers/getRootClampClassName';
 import { getRootHyphensClassName } from './_helpers/getRootHyphensClassName';

package/src/components/TextArea/TextArea.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';

package/src/components/TextField/TextField.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';

package/src/components/TextLink/TextLink.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { transferProps } from '../../utils/transferProps';
+import { transferProps } from '../../helpers/transferProps';
 import styles from './TextLink.module.scss';
 
 export const TextLink = ({

package/src/components/Toggle/Toggle.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { FormLayoutContext } from '../FormLayout';
 import styles from './Toggle.module.scss';

package/src/components/Toolbar/Toolbar.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { getAlignClassName } from './_helpers/getAlignClassName';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';

package/src/components/Toolbar/ToolbarGroup.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { getAlignClassName } from './_helpers/getAlignClassName';
 import styles from './Toolbar.module.scss';

package/src/components/Toolbar/ToolbarItem.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { classNames } from '../../utils/classNames';
-import { transferProps } from '../../utils/transferProps';
+import { classNames } from '../../helpers/classNames/classNames';
+import { transferProps } from '../../helpers/transferProps';
 import { withGlobalProps } from '../../providers/globalProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Toolbar.module.scss';

package/src/helpers/classNames/README.md

@@ -0,0 +1,65 @@
+# classNames
+
+The `classNames` helper function simplifies creating a string passable to
+the `class` / `className` attribute.
+
+It accepts multiple arguments, filters out invalid values, and returns a single
+string where the remaining parameters are joined by a space.
+
+## Usage
+
+To use `classNames` helper, you need to import it first:
+
+```js
+import { classNames } from '@react-ui-org/react-ui';
+```
+
+And use it:
+
+```docoff-react-preview
+<>
+  <div
+  className={classNames(
+    'd-block',
+    new Date('2025-01-01T00:00:00') < new Date() && 'text-danger',
+  )}
+  >
+  {(new Date()).toLocaleDateString()}
+  </div>
+  <div
+  className={classNames(
+    'd-block',
+    new Date('3000-01-01T00:00:00') < new Date() && 'text-danger',
+  )}
+  >
+  {(new Date()).toLocaleDateString()}
+  </div>
+</>
+```
+
+## Parameter Filtering
+
+The `classNames` function:
+
+* filters out all values that are not strings
+* filters out empty strings
+* filters out whitespace only strings
+
+<!-- markdownlint-disable MD010 -->
+```docoff-react-preview
+{classNames(
+  'class-1',
+  'class-2 class-3',
+  ' ',
+  ' ', // non-breakable space
+  '	', // tab
+  '',
+  0,
+  1,
+  null,
+  undefined,
+  true,
+  false,
+)}
+```
+<!-- markdownlint-enable MD010 -->

package/src/helpers/classNames/classNames.js

@@ -0,0 +1,11 @@
+export const classNames = (...classes) => {
+  const filteredClassNames = classes.filter(
+    (className) => typeof className === 'string'
+    && className.trim().length > 0,
+  );
+
+  return filteredClassNames.length > 0
+    ? filteredClassNames.join(' ')
+    // React does not render attributes whose value is `undefined` and we do not want an empty `class` attribute in HTML
+    : undefined;
+};

package/src/helpers/classNames/index.js

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

package/src/helpers/transferProps/README.md

@@ -0,0 +1,46 @@
+# transferProps
+
+The `transferProps` helper controls passing of props from the React component
+to the HTML element.
+
+It enables making the component interactive and helps to improve its
+accessibility. However some props should never be passed to the HTML element
+as it would break things. This function is used to filter them out. Among these
+props are:
+
+- `children`
+- `className`
+- `contentEditable`
+- `dangerouslySetInnerHtml`
+- `ref`
+- `staticContext`
+- `style`
+- `suppressContentEditableWarning`
+
+👉 When run in development mode, the function will log the error to the console
+if any invalid props are passed.
+
+## Basic Usage
+
+To use `transferProps` helper, you need to import it first:
+
+```js
+import { transferProps } from "@react-ui-org/react-ui";
+```
+
+And use it:
+
+```jsx
+const CustomComponent = ({
+  children,
+  id,
+  ...restProps
+}) => (
+  <div
+    {...transferProps(restProps)}
+    id={id && `${id}__customComponent`}
+  >
+    {children}
+  </div>
+);
+```

package/src/helpers/transferProps/index.js

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