@react-ui-org/react-ui 0.55.1 → 0.57.0

package/src/components/CheckboxField/README.md

@@ -45,6 +45,9 @@ See [API](#api) for all available options.
   send me any emails” which would mean that the user needs to turn the
   checkbox **on** in order for something **not** to happen.
 
+- **Use text labels** unless it is necessary to wrap text label into
+  Popover-like to component to provide additional info about the field.
+
 - Only make the CheckboxField's label invisible when there is **another visual
   clue** to guide users through toggling the input.
 
@@ -172,10 +175,11 @@ Disabled state makes the input unavailable.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify **any HTML attribute you like.** All attributes that don't interfere
-with the API of the React component are forwarded to the root `<input>` HTML
-element. This enables making the component interactive and helps to improve
-its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+`<input>` HTML element. This enables making the component interactive and helps
+to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 

package/src/components/FileInputField/FileInputField.jsx

@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../../utils/transferProps';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
-import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import styles from './FileInputField.module.scss';
 
@@ -123,9 +123,9 @@ FileInputField.propTypes = {
    */
   isLabelVisible: PropTypes.bool,
   /**
-   * Text field label.
+   * File input field label.
    */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   /**
    * Layout of the field.
    *

package/src/components/FileInputField/README.md

@@ -27,6 +27,9 @@ See [API](#api) for all available options.
   polite phrases like _Please attach your file here_. Short labels will help
   your users accomplish their task faster.
 
+- **Use text labels** unless it is necessary to wrap text label into
+  Popover-like to component to provide additional info about the field.
+
 - Only make the FileInputField's label invisible when there is **another visual
   clue** to guide users through filling the input.
 
@@ -156,10 +159,11 @@ It's possible to disable the whole input.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify **any HTML attribute you like.** All attributes that don't interfere
-with the API of the React component are forwarded to the root `<input>` HTML
-element. This enables making the component interactive and helps to improve
-its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+`<input>` HTML element. This enables making the component interactive and helps
+to improve its accessibility.
 
 ```docoff-react-preview
 <FileInputField

package/src/components/FormLayout/FormLayout.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
 import { withGlobalProps } from '../../provider';
-import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { FormLayoutContext } from './FormLayoutContext';
 import styles from './FormLayout.module.scss';

package/src/components/FormLayout/FormLayoutCustomField.jsx

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

package/src/components/FormLayout/README.md

@@ -416,10 +416,11 @@ React.createElement(() => {
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify **any HTML attribute you like.** All attributes that don't interfere
-with the API of the React component are forwarded to the root `<div>` HTML
-element. This enables making the component interactive and helps to improve
-its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+root `<div>` HTML element. This enables making the component interactive and
+helps to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 

package/src/components/Grid/Grid.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
+import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
-import { transferProps } from '../_helpers/transferProps';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
 import styles from './Grid.module.scss';
 

package/src/components/Grid/Grid.module.scss

@@ -19,6 +19,9 @@
 //    `--rui-local-<PROPERTY>: var(--rui-local-<PROPERTY>-sm, var(--rui-local-<PROPERTY>-xs, <INITIAL FALLBACK>))`
 //
 // 2. Apply custom property value that is defined within current breakpoint, see 1.
+//
+// 3. Intentionally use longhand properties because the custom property fallback mechanism evaluates `initial` values as
+//    empty. That makes the other value of the shorthand property unexpectedly used for both axes.
 
 @use "sass:map";
 @use "../../styles/tools/spacing";
@@ -35,10 +38,12 @@
         grid-template-rows: var(--rui-local-rows); // 2.
         grid-auto-flow: var(--rui-local-auto-flow); // 2.
         grid-gap: var(--rui-local-row-gap) var(--rui-local-column-gap); // 2.
+        // stylelint-disable declaration-block-no-redundant-longhand-properties -- 3.
         align-content: var(--rui-local-align-content); // 2.
         align-items: var(--rui-local-align-items); // 2.
         justify-content: var(--rui-local-justify-content); // 2.
         justify-items: var(--rui-local-justify-items); // 2.
+        // stylelint-enable declaration-block-no-redundant-longhand-properties
     }
 
     // stylelint-disable-next-line selector-max-universal -- Reset any previously added margins.

package/src/components/Grid/GridSpan.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
+import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
-import { transferProps } from '../_helpers/transferProps';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
 import styles from './Grid.module.scss';
 

package/src/components/Grid/README.md

@@ -248,10 +248,12 @@ property. Check [MDN][grid-auto-flow] to fully understand available options.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify **any HTML attribute you like.** All attributes that don't interfere
-with the API of the React component are forwarded to the root HTML element
-of your choice provided by `tag`, which is `<div>` by default. This enables
-making the component interactive and helps to improve its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+root HTML element of your choice provided by `tag`, which is `<div>` by
+default. This enables making the component interactive and helps to improve its
+accessibility.
 
 👉 For the full list of supported attributes refer to:
 

package/src/components/Grid/_settings.scss

@@ -8,11 +8,11 @@ $grid-responsive-properties: [
     align-items,
     justify-content,
     justify-items,
-]; // stylelint-disable-line indentation -- Broken rule?
+]; // stylelint-disable-line @stylistic/indentation -- Broken rule?
 
 $grid-span-responsive-properties: [
     column-span,
     row-span,
-]; // stylelint-disable-line indentation -- Broken rule?
+]; // stylelint-disable-line @stylistic/indentation -- Broken rule?
 
 $initial-fallback-value: initial;

package/src/components/InputGroup/InputGroup.jsx

@@ -6,11 +6,11 @@ import React, {
 import { Text } from '../Text';
 import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../../utils/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
-import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import { InputGroupContext } from './InputGroupContext';
 import styles from './InputGroup.module.scss';
@@ -151,7 +151,7 @@ InputGroup.propTypes = {
   /**
    * Input group label.
    */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   /**
    * Layout of the group.
    *

package/src/components/InputGroup/README.md

@@ -250,10 +250,11 @@ for the underlying `<fieldset>` element.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify **any HTML attribute you like.** All attributes that don't interfere
-with the API of the React component are forwarded to the root `<fieldset>` HTML
-element. This enables making the component interactive and helps to improve
-its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+root `<fieldset>` HTML element. This enables making the component interactive
+and helps to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 

package/src/components/Modal/Modal.jsx

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { withGlobalProps } from '../../provider';
-import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../../utils/transferProps';
 import { getPositionClassName } from './_helpers/getPositionClassName';
 import { getSizeClassName } from './_helpers/getSizeClassName';
 import { useModalFocus } from './_hooks/useModalFocus';

package/src/components/Modal/Modal.module.scss

@@ -21,11 +21,11 @@
         max-width: var(--rui-local-max-width);
         max-height: var(--rui-local-max-height);
         overflow-y: auto;
-        overscroll-behavior: contain;
         border-radius: settings.$border-radius;
         background: theme.$background;
         box-shadow: theme.$box-shadow;
         transform: translateX(-50%);
+        overscroll-behavior: contain;
 
         @include breakpoint.up(sm) {
             --rui-local-outer-spacing: #{theme.$outer-spacing-sm};

package/src/components/Modal/ModalBody.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
-import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { getScrollingClassName } from './_helpers/getScrollingClassName';
 import styles from './ModalBody.module.scss';

package/src/components/Modal/ModalCloseButton.jsx

@@ -4,7 +4,7 @@ import {
   RUIContext,
   withGlobalProps,
 } from '../../provider';
-import { transferProps } from '../_helpers/transferProps';
+import { transferProps } from '../../utils/transferProps';
 import styles from './ModalCloseButton.module.scss';
 
 export const ModalCloseButton = React.forwardRef((props, ref) => {

package/src/components/Modal/ModalContent.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
+import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
-import { transferProps } from '../_helpers/transferProps';
 import styles from './ModalContent.module.scss';
 
 export const ModalContent = ({

package/src/components/Modal/ModalFooter.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
-import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../../utils/transferProps';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
 import styles from './ModalFooter.module.scss';
 

package/src/components/Modal/ModalHeader.jsx

@@ -1,10 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import {
-  withGlobalProps,
-} from '../../provider';
-import { transferProps } from '../_helpers/transferProps';
+import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../../utils/transferProps';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
 import styles from './ModalHeader.module.scss';
 

package/src/components/Modal/ModalTitle.jsx

@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import {
-  withGlobalProps,
-} from '../../provider';
-import { transferProps } from '../_helpers/transferProps';
+import { withGlobalProps } from '../../provider';
+import { transferProps } from '../../utils/transferProps';
 import styles from './ModalTitle.module.scss';
 
 export const ModalTitle = ({

package/src/components/Modal/README.md

@@ -1015,8 +1015,9 @@ opened.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify **any HTML attribute you like.** All attributes that don't interfere
-with the API of the React component are forwarded to:
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to:
 
 - the `<div>` HTML element in case of the `Modal` component. This `<div>` is not
   the root, but its first child which represents the modal window.

package/src/components/Paper/Paper.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
-import { transferProps } from '../_helpers/transferProps';
+import { transferProps } from '../../utils/transferProps';
 import styles from './Paper.module.scss';
 
 export const Paper = ({

package/src/components/Paper/README.md

@@ -54,10 +54,11 @@ Dim background and add transparency to visually suppress the Paper.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify **any HTML attribute you like.** All attributes that don't interfere
-with the API of the React component are forwarded to the root `<div>` HTML
-element. This enables making the component interactive and helps to improve
-its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+root `<div>` HTML element. This enables making the component interactive and
+helps to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 

package/src/components/Popover/Popover.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { createPortal } from 'react-dom';
 import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
-import { transferProps } from '../_helpers/transferProps';
+import { transferProps } from '../../utils/transferProps';
 import getRootSideClassName from './_helpers/getRootSideClassName';
 import getRootAlignmentClassName from './_helpers/getRootAlignmentClassName';
 import styles from './Popover.module.scss';

package/src/components/Popover/Popover.module.scss

@@ -51,52 +51,52 @@
 
     // Sides
     .isRootAtTop {
-        bottom: 100%;
+        bottom: calc(100% + #{theme.$arrow-gap} - #{theme.$arrow-safe-rendering-overlap});
     }
 
     .isRootAtBottom {
-        top: 100%;
+        top: calc(100% + #{theme.$arrow-gap} - #{theme.$arrow-safe-rendering-overlap});
     }
 
     .isRootAtLeft {
-        right: 100%;
+        right: calc(100% + #{theme.$arrow-gap} - #{theme.$arrow-safe-rendering-overlap});
     }
 
     .isRootAtRight {
-        left: 100%;
+        left: calc(100% + #{theme.$arrow-gap} - #{theme.$arrow-safe-rendering-overlap});
     }
 
     // Arrows
     .isRootAtTop > .arrow {
-        top: 100%;
+        top: calc(100% - #{theme.$arrow-safe-rendering-overlap});
     }
 
     .isRootAtBottom > .arrow {
-        bottom: 100%;
+        bottom: calc(100% - #{theme.$arrow-safe-rendering-overlap});
     }
 
     .isRootAtLeft > .arrow {
-        left: 100%;
+        left: calc(100% - #{theme.$arrow-safe-rendering-overlap});
     }
 
     .isRootAtRight > .arrow {
-        right: 100%;
+        right: calc(100% - #{theme.$arrow-safe-rendering-overlap});
     }
 
     // Side alignments: top
     .isRootAtTop.isRootAtCenter {
         left: 50%;
-        transform: translate(-50%, #{-1 * theme.$arrow-height});
+        transform: translate(-50%, calc(-1 * #{theme.$arrow-height}));
     }
 
     .isRootAtTop.isRootAtStart {
         left: 0;
-        transform: translate(0, #{-1 * theme.$arrow-height});
+        transform: translate(0, calc(-1 * #{theme.$arrow-height}));
     }
 
     .isRootAtTop.isRootAtEnd {
         right: 0;
-        transform: translate(0, #{-1 * theme.$arrow-height});
+        transform: translate(0, calc(-1 * #{theme.$arrow-height}));
     }
 
     .isRootAtTop.isRootAtCenter > .arrow {
@@ -148,17 +148,17 @@
     // Side alignments: left
     .isRootAtLeft.isRootAtCenter {
         top: 50%;
-        transform: translate(#{-1 * theme.$arrow-height}, -50%);
+        transform: translate(calc(-1 * #{theme.$arrow-height}), -50%);
     }
 
     .isRootAtLeft.isRootAtStart {
         top: 0;
-        transform: translate(#{-1 * theme.$arrow-height}, 0);
+        transform: translate(calc(-1 * #{theme.$arrow-height}), 0);
     }
 
     .isRootAtLeft.isRootAtEnd {
         bottom: 0;
-        transform: translate(#{-1 * theme.$arrow-height}, 0);
+        transform: translate(calc(-1 * #{theme.$arrow-height}), 0);
     }
 
     .isRootAtLeft.isRootAtCenter > .arrow {
@@ -216,7 +216,7 @@
     }
 
     .isRootControlled.isRootAtTop {
-        transform: translate(0, #{-1 * theme.$arrow-height}); // 2.
+        transform: translate(0, calc(-1 * #{theme.$arrow-height})); // 2.
     }
 
     .isRootControlled.isRootAtBottom {
@@ -224,7 +224,7 @@
     }
 
     .isRootControlled.isRootAtLeft {
-        transform: translate(#{-1 * theme.$arrow-height}, 0); // 2.
+        transform: translate(calc(-1 * #{theme.$arrow-height}), 0); // 2.
     }
 
     .isRootControlled.isRootAtRight {

package/src/components/Popover/PopoverWrapper.jsx

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

package/src/components/Popover/README.md

@@ -287,10 +287,11 @@ React.createElement(() => {
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify **any HTML attribute you like.** All attributes that don't interfere
-with the API of the React component are forwarded to the root `<div>` HTML
-element. This enables making the component interactive and helps to improve
-its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+root `<div>` HTML element. This enables making the component interactive and
+helps to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 

package/src/components/Popover/_theme.scss

@@ -11,6 +11,8 @@ $color: var(--rui-Popover__color);
 $background-color: var(--rui-Popover__background-color);
 $box-shadow: var(--rui-Popover__box-shadow);
 
-$arrow-width: 1rem;
-$arrow-height: math.div($arrow-width, 2); // 1.
+$arrow-safe-rendering-overlap: 1px;
+$arrow-gap: 1px;
+$arrow-width: calc(1rem + #{$arrow-safe-rendering-overlap * 2});
+$arrow-height: calc($arrow-width / 2); // 1.
 $arrow-corner-offset: 0.75rem;

package/src/components/Radio/README.md

@@ -56,6 +56,9 @@ See [API](#api) for all available options.
   polite phrases like _Please select your favourite fruit_. Short labels will
   help your users accomplish their task faster.
 
+- **Use text labels** unless it is necessary to wrap text label into
+  Popover-like to component to provide additional info about the field.
+
 - Only make the Radio's label invisible when there is **another visual
   clue** to guide users through filling the input.
 
@@ -279,10 +282,11 @@ It's possible to disable just some options or the whole set.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify **any HTML attribute you like.** All attributes that don't interfere
-with the API of the React component are forwarded to the root `<input>` HTML
-element. This enables making the component interactive and helps to improve
-its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+`<input>` HTML element. This enables making the component interactive and helps
+to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 

package/src/components/Radio/Radio.jsx

@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
 import { withGlobalProps } from '../../provider';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../../utils/transferProps';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
-import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import styles from './Radio.module.scss';
 
@@ -157,7 +157,7 @@ Radio.propTypes = {
   /**
    * Label of the group of options.
    */
-  label: PropTypes.string.isRequired,
+  label: PropTypes.node.isRequired,
   /**
    * Layout of the field.
    *

package/src/components/ScrollView/README.md

@@ -480,10 +480,11 @@ React.createElement(() => {
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify **any HTML attribute you like.** All attributes that don't interfere
-with the API of the React component are forwarded to the root `<div>` HTML
-element. This enables making the component interactive and helps to improve
-its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't
+interfere with the API of the React component and that aren't filtered out by
+[`transferProps`](/docs/js-helpers/transferProps) helper are forwarded to the
+root `<div>` HTML element. This enables making the component interactive and
+helps to improve its accessibility.
 
 👉 For the full list of supported attributes refer to:
 

package/src/components/ScrollView/ScrollView.jsx

@@ -11,7 +11,7 @@ import {
   withGlobalProps,
 } from '../../provider';
 import { classNames } from '../../utils/classNames';
-import { transferProps } from '../_helpers/transferProps';
+import { transferProps } from '../../utils/transferProps';
 import { getElementsPositionDifference } from './_helpers/getElementsPositionDifference';
 import { useLoadResize } from './_hooks/useLoadResizeHook';
 import { useScrollPosition } from './_hooks/useScrollPositionHook';

package/src/components/ScrollView/ScrollView.module.scss

@@ -103,8 +103,7 @@ $_arrow-outer-spacing: spacing.of(4);
 
     .isRootVertical .viewport {
         height: 100%;
-        overflow-x: clip; // 7., 8.
-        overflow-y: auto; // 2.
+        overflow: clip auto; // 7., 8. / 2.
     }
 
     .isRootVertical .arrowPrev {
@@ -183,8 +182,7 @@ $_arrow-outer-spacing: spacing.of(4);
     }
 
     .isRootHorizontal .viewport {
-        overflow-x: auto; // 2.
-        overflow-y: clip; // 5., 7., 8.
+        overflow: auto clip; // 2. / 5., 7., 8.
     }
 
     .isRootHorizontal .content {