@react-ui-org/react-ui 0.54.0 → 0.55.0

package/src/components/ScrollView/README.md

@@ -480,13 +480,15 @@ React.createElement(() => {
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the `<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 are forwarded to the root `<div>` HTML
+element. This enables making the component interactive and helps to improve
+its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## Forwarding ref
 
@@ -497,7 +499,7 @@ If you provide [ref], it is forwarded to the scrolling viewport native HTML
 
 <docoff-react-props src="/components/ScrollView/ScrollView.jsx"></docoff-react-props>
 
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
 [linear gradients]: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
 [ref]: https://reactjs.org/docs/refs-and-the-dom.html

package/src/components/ScrollView/ScrollView.jsx

@@ -15,7 +15,7 @@ import { transferProps } from '../_helpers/transferProps';
 import { getElementsPositionDifference } from './_helpers/getElementsPositionDifference';
 import { useLoadResize } from './_hooks/useLoadResizeHook';
 import { useScrollPosition } from './_hooks/useScrollPositionHook';
-import styles from './ScrollView.scss';
+import styles from './ScrollView.module.scss';
 
 // Function `getElementsPositionDifference` sometimes returns floating point values that results
 // in inaccurate detection of start/end. It is necessary to accept this inaccuracy and take

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

@@ -0,0 +1,233 @@
+// 1. Scrolling shadows are implemented as pseudo elements. This way we can customise them only
+//    with custom properties.
+//
+// 2. Stack scrolling shadows over viewport content while keeping the content interactive.
+//
+//    - `.scrollingShadows` is positioned absolutely over the `.root`, with auto `z-index` (this is
+//      important!), and with `overflow: hidden` to clip the shadows (ie. its pseudo elements).
+//    - The `.viewport` is in `.root`'s stacking context and remains interactive because its
+//      `z-index` is higher than the auto `z-index` of `.scrollingShadows`.
+//
+// 3. Optional arrows are positioned relative to the `.root` and stacked on top of scrolling
+//    shadows. They can be shifted outside the `ScrollView` area only because `overflow: hidden` is
+//    **not** present at `.root`.
+//
+// 4. Make the `.content`'s bounding rectangle spread beyond the part visible through `.viewport`.
+//
+// 5. Prevent undesired vertical scrolling that may occur with tables inside.
+//
+// 6. Make `ScrollView` adjust to flexible layouts.
+//
+// 7. Hide content overflowing in the other direction because scrollbars would be unreachable under
+//    scrolling shadows.
+//
+// 8. Use the `clip` value for `overflow` to prevent the content from unwanted scrolling on the
+//    cross axis during keyboard navigation.
+
+@use "../../styles/tools/accessibility";
+@use "../../styles/tools/caret";
+@use "../../styles/tools/reset";
+@use "../../styles/tools/scrollbar";
+@use "../../styles/tools/spacing";
+@use "../../styles/tools/transition";
+
+$_arrow-inner-spacing: spacing.of(2);
+$_arrow-outer-spacing: spacing.of(4);
+
+@layer components.scroll-view {
+    .root {
+        position: relative; // 2.
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+
+    // 1.
+    .scrollingShadows {
+        position: absolute; // 2.
+        width: 100%; // 2.
+        height: 100%; // 2.
+        overflow: hidden; // 2.
+        pointer-events: none; // 2.
+
+        &::before,
+        &::after {
+            @include transition.add((visibility, opacity, transform));
+
+            content: "";
+            position: absolute;
+            z-index: 2; // 2.
+            display: block;
+            visibility: hidden;
+            opacity: 0;
+        }
+
+        &::before {
+            background: var(--rui-local-start-shadow-background);
+        }
+
+        &::after {
+            background: var(--rui-local-end-shadow-background);
+        }
+    }
+
+    .viewport {
+        z-index: 1; // 2.
+        width: 100%;
+        scroll-behavior: smooth;
+    }
+
+    .arrowPrev,
+    .arrowNext {
+        @include reset.button();
+        @include accessibility.min-tap-target();
+        @include transition.add((visibility, opacity, transform));
+
+        position: absolute; // 3.
+        z-index: 3; // 3.
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        visibility: hidden;
+        opacity: 0;
+    }
+
+    .arrowIcon {
+        @include caret.create();
+    }
+
+    .isRootVertical {
+        height: 100%;
+        min-height: 0; // 6.
+    }
+
+    .isRootVertical .viewport {
+        height: 100%;
+        overflow-x: clip; // 7., 8.
+        overflow-y: auto; // 2.
+    }
+
+    .isRootVertical .arrowPrev {
+        top: 0;
+        right: 0;
+        left: 0;
+        width: 100%;
+        padding-top: $_arrow-outer-spacing;
+        padding-bottom: $_arrow-inner-spacing;
+        color: var(--rui-local-prev-arrow-color);
+        transform: translateY(var(--rui-local-prev-arrow-initial-offset));
+    }
+
+    .isRootVertical .arrowPrev .arrowIcon {
+        @include caret.rotate(180);
+    }
+
+    .isRootVertical .arrowNext {
+        right: 0;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        padding-top: $_arrow-inner-spacing;
+        padding-bottom: $_arrow-outer-spacing;
+        color: var(--rui-local-next-arrow-color);
+        transform: translateY(calc(-1 * var(--rui-local-next-arrow-initial-offset)));
+    }
+
+    .isRootHorizontal {
+        min-width: 0; // 6.
+    }
+
+    .isRootHorizontal .arrowPrev {
+        top: 0;
+        bottom: 0;
+        left: 0;
+        padding-right: $_arrow-inner-spacing;
+        padding-left: $_arrow-outer-spacing;
+        transform: translateX(var(--rui-local-prev-arrow-initial-offset));
+    }
+
+    .isRootHorizontal .arrowPrev .arrowIcon {
+        @include caret.rotate(90);
+    }
+
+    .isRootHorizontal .arrowNext {
+        top: 0;
+        right: 0;
+        bottom: 0;
+        padding-right: $_arrow-outer-spacing;
+        padding-left: $_arrow-inner-spacing;
+        transform: translateX(calc(-1 * var(--rui-local-next-arrow-initial-offset)));
+    }
+
+    .isRootHorizontal .arrowNext .arrowIcon {
+        @include caret.rotate(270);
+    }
+
+    .isRootVertical .scrollingShadows::before,
+    .isRootVertical .scrollingShadows::after {
+        right: 0;
+        left: 0;
+        width: auto;
+    }
+
+    .isRootVertical .scrollingShadows::before {
+        top: 0;
+        height: var(--rui-local-start-shadow-size);
+        transform: translateY(var(--rui-local-start-shadow-initial-offset));
+    }
+
+    .isRootVertical .scrollingShadows::after {
+        bottom: 0;
+        height: var(--rui-local-end-shadow-size);
+        transform: translateY(calc(-1 * var(--rui-local-end-shadow-initial-offset)));
+    }
+
+    .isRootHorizontal .viewport {
+        overflow-x: auto; // 2.
+        overflow-y: clip; // 5., 7., 8.
+    }
+
+    .isRootHorizontal .content {
+        display: inline-flex; // 4.
+        min-width: 100%;
+        overflow: clip; // 8.
+        vertical-align: top;
+    }
+
+    .isRootHorizontal .scrollingShadows::before,
+    .isRootHorizontal .scrollingShadows::after {
+        top: 0;
+        bottom: 0;
+        height: auto;
+    }
+
+    .isRootHorizontal .scrollingShadows::before {
+        left: 0;
+        width: var(--rui-local-start-shadow-size);
+        transform: translateX(var(--rui-local-start-shadow-initial-offset));
+    }
+
+    .isRootHorizontal .scrollingShadows::after {
+        right: 0;
+        width: var(--rui-local-end-shadow-size);
+        transform: translateX(calc(-1 * var(--rui-local-end-shadow-initial-offset)));
+    }
+
+    .isRootScrolledAtStart .scrollingShadows::before,
+    .isRootScrolledAtStart .arrowPrev {
+        visibility: visible;
+        opacity: 1;
+        transform: translate(0, 0);
+    }
+
+    .isRootScrolledAtEnd .scrollingShadows::after,
+    .isRootScrolledAtEnd .arrowNext {
+        visibility: visible;
+        opacity: 1;
+        transform: translate(0, 0);
+    }
+
+    .hasRootScrollbarDisabled .viewport {
+        @include scrollbar.hide();
+    }
+}

package/src/components/SelectField/README.md

@@ -649,13 +649,15 @@ React.createElement(() => {
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or you can **add whatever HTML attribute
-you like.** All attributes that don't interfere with the API are forwarded to
-the native HTML `<select>`. 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 are forwarded to the root `<select>` HTML
+element. This enables making the component interactive and helps to improve
+its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[select] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<select>` HTML element attributes][select-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## Forwarding ref
 
@@ -676,6 +678,6 @@ options. On top of that, the following options are available for SelectField.
 | `--rui-FormField--box--select__caret__background`    | SelectField arrow background (including `url()` or gradient) |
 | `--rui-FormField--box--select__option--disabled__color` | Text color of disabled SelectField options                |
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[select]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
 [ref]: https://reactjs.org/docs/refs-and-the-dom.html
+[select-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attributes

package/src/components/SelectField/SelectField.jsx

@@ -9,7 +9,7 @@ import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
 import { InputGroupContext } from '../InputGroup/InputGroupContext';
 import { Option } from './_components/Option';
-import styles from './SelectField.scss';
+import styles from './SelectField.module.scss';
 
 export const SelectField = React.forwardRef((props, ref) => {
   const {

package/src/components/SelectField/SelectField.module.scss

@@ -0,0 +1,111 @@
+@use "../../styles/tools/form-fields/box-field-elements";
+@use "../../styles/tools/form-fields/box-field-layout";
+@use "../../styles/tools/form-fields/box-field-sizes";
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/variants";
+@use "../../styles/tools/accessibility";
+
+@layer components.select-field {
+    // Foundation
+    .root {
+        @include foundation.root();
+    }
+
+    .label {
+        @include foundation.label();
+    }
+
+    .inputContainer {
+        @include box-field-elements.input-container();
+    }
+
+    .input {
+        @include box-field-elements.input();
+        @include box-field-elements.input-select();
+        @include box-field-elements.input-select-option();
+    }
+
+    .caret {
+        @include box-field-elements.caret();
+    }
+
+    .caretIcon {
+        @include box-field-elements.caret-icon();
+    }
+
+    .bottomLine {
+        @include box-field-elements.bottom-line();
+    }
+
+    .helpText,
+    .validationText {
+        @include foundation.help-text();
+    }
+
+    .isRootRequired .label {
+        @include foundation.label-required();
+    }
+
+    // Variants
+    .isRootVariantFilled {
+        @include variants.visual(box, $variant: filled, $has-caret: true);
+    }
+
+    .isRootVariantOutline {
+        @include variants.visual(box, $variant: outline, $has-caret: true);
+    }
+
+    // States
+    .isRootStateInvalid {
+        @include variants.validation(invalid);
+    }
+
+    .isRootStateValid {
+        @include variants.validation(valid);
+    }
+
+    .isRootStateWarning {
+        @include variants.validation(warning);
+    }
+
+    // Invisible label
+    .isLabelHidden {
+        @include accessibility.hide-text();
+    }
+
+    // Layouts
+    .isRootLayoutVertical,
+    .isRootLayoutHorizontal {
+        @include box-field-layout.vertical();
+    }
+
+    .isRootLayoutHorizontal {
+        @include box-field-layout.horizontal();
+    }
+
+    .isRootFullWidth {
+        @include box-field-layout.full-width();
+    }
+
+    .isRootInFormLayout {
+        @include box-field-layout.in-form-layout();
+    }
+
+    // Sizes
+    .isRootSizeSmall {
+        @include box-field-sizes.size(small);
+    }
+
+    .isRootSizeMedium {
+        @include box-field-sizes.size(medium);
+    }
+
+    .isRootSizeLarge {
+        @include box-field-sizes.size(large);
+    }
+
+    // Groups
+    .isRootGrouped {
+        @include box-field-elements.in-group-layout();
+    }
+}

package/src/components/Table/README.md

@@ -243,17 +243,19 @@ React.createElement(() => {
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the `<table>` 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 are forwarded to the root `<table>` HTML
+element. This enables making the component interactive and helps to improve
+its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[table] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<table>` HTML element attributes][table-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
 <docoff-react-props src="/components/Table/Table.jsx"></docoff-react-props>
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[table]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
+[table-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#attributes

package/src/components/Table/Table.jsx

@@ -4,7 +4,7 @@ import { withGlobalProps } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
 import { TableHeaderCell } from './_components/TableHeaderCell';
 import { TableBodyCell } from './_components/TableBodyCell';
-import styles from './Table.scss';
+import styles from './Table.module.scss';
 
 export const Table = ({
   columns,

package/src/components/Table/Table.module.scss

@@ -0,0 +1,30 @@
+@use "../../styles/tools/transition";
+@use "settings";
+
+@layer components.table {
+    .table {
+        width: 100%;
+        border-collapse: collapse;
+    }
+
+    .tableRow,
+    .tableHeadRow {
+        @include transition.add((background-color));
+    }
+
+    .tableRow {
+        background-color: settings.$background-color;
+
+        &:hover {
+            background-color: settings.$hover-background-color;
+        }
+    }
+
+    .tableHeadRow {
+        background-color: settings.$head-background-color;
+
+        &:hover {
+            background-color: settings.$head-background-color;
+        }
+    }
+}

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

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import styles from '../TableCell.scss';
+import styles from '../TableCell.module.scss';
 
 export const TableBodyCell = ({
   format,

package/src/components/Table/_components/TableCell.module.scss

@@ -0,0 +1,28 @@
+@use "../settings";
+
+@layer components.table {
+    .tableCell,
+    .tableHeadCell,
+    .isTableCellSortingActive,
+    .isTableHeadCellSortingActive {
+        padding: settings.$cell-padding-y settings.$cell-padding-x;
+        text-align: left;
+        border-bottom: settings.$border-width solid settings.$border-color;
+    }
+
+    .tableHeadCell {
+        font-weight: settings.$head-font-weight;
+        border-bottom-width: 2px;
+    }
+
+    .tableHeadCellLayout {
+        display: flex;
+        gap: settings.$cell-padding-x;
+        align-items: center;
+    }
+
+    .isTableCellSortingActive,
+    .isTableHeadCellSortingActive {
+        background-color: settings.$sorted-background-color;
+    }
+}

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

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Button } from '../../../Button';
-import styles from '../TableCell.scss';
+import styles from '../TableCell.module.scss';
 
 export const TableHeaderCell = ({
   column,

package/src/components/Tabs/README.md

@@ -157,14 +157,20 @@ React.createElement(() => {
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the `<nav>` HTML
-element in case of `Tabs` component and to the `<a>` HTML element in
-case of `TabsItem`. 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 are forwarded to:
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[nav] and [li] element.
+- the root `<nav>` HTML element in case of `Tabs` component
+- the `<a>` HTML element in case of `TabsItem`
+
+This enables making the component interactive and helps to improve its
+accessibility.
+
+👉 For the full list of supported attributes refer to:
+
+- [`<nav>` HTML element attributes][nav-attributes]{:target="_blank"}
+- [`<a>` HTML element attributes][a-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -216,6 +222,6 @@ Where:
   `background-color`, `box-shadow`, `shift-y` (shifts vertically the whole
   item), or `label__shift-y` (tweaks vertical position of tab label).
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[nav]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav#attributes
-[li]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes
+[a-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes
+[nav-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props

package/src/components/Tabs/Tabs.jsx

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

package/src/components/Tabs/Tabs.module.scss

@@ -0,0 +1,31 @@
+// 1. Use the `clip` value to prevent the content from unwanted vertical scrolling during keyboard navigation.
+// 2. Decorative bottom border.
+
+@use "../../styles/tools/reset";
+@use "theme";
+
+@layer components.tabs {
+    .list {
+        @include reset.list();
+
+        position: relative;
+        display: inline-flex;
+        min-width: 100%;
+        padding-right: theme.$padding-x;
+        padding-left: theme.$padding-x;
+        overflow-y: clip; // 1.
+        white-space: nowrap;
+
+        // 2.
+        &::after {
+            content: "";
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            z-index: 1;
+            height: theme.$border-bottom-width;
+            background-color: theme.$border-bottom-color;
+        }
+    }
+}

package/src/components/Tabs/TabsItem.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
-import styles from './TabsItem.scss';
+import styles from './TabsItem.module.scss';
 
 export const TabsItem = ({
   afterLabel,