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

package/src/components/Popover/README.md

@@ -287,13 +287,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 root `<div>`
-HTML element. This enables making the component interactive and helps to improve
+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
 
@@ -321,7 +323,7 @@ which enables [Advanced Positioning](#advanced-positioning).
 | `--rui-Popover__background-color`                    | Background color                                             |
 | `--rui-Popover__box-shadow`                          | Popover box shadow                                           |
 
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
 [Floating UI]: https://floating-ui.com/docs/react-dom
-[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/Radio/README.md

@@ -279,13 +279,15 @@ 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 [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 `<input>` elements. 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 `<input>` 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
-[radio] input type.
+👉 For the full list of supported attributes refer to:
+
+- [`<input type="radio" />` HTML element attributes][radio-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -301,8 +303,8 @@ options. On top of that, the following options are available for Radio.
 | `--rui-FormField--check__input--radio__border-radius`              | Input corner radius                            |
 | `--rui-FormField--check__input--radio--checked__background-image` | Checked input background image (inline, URL, …) |
 
-[nng-radio]: https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/
-[fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
 [accessibility]: https://www.w3.org/WAI/tutorials/forms/grouping/
-[React synthetic events]: https://reactjs.org/docs/events.html
-[radio]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#additional_attributes
+[fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
+[nng-radio]: https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/
+[radio-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#additional_attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props

package/src/components/Radio/Radio.jsx

@@ -6,7 +6,7 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { transferProps } from '../_helpers/transferProps';
 import { FormLayoutContext } from '../FormLayout';
-import styles from './Radio.scss';
+import styles from './Radio.module.scss';
 
 export const Radio = ({
   disabled,

package/src/components/Radio/Radio.module.scss

@@ -0,0 +1,85 @@
+// 1. Legends are tricky to style, let's use a `div` instead.
+//    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#styling_with_css
+
+@use "../../styles/tools/form-fields/box-field-elements";
+@use "../../styles/tools/form-fields/box-field-layout";
+@use "../../styles/tools/form-fields/foundation";
+@use "../../styles/tools/form-fields/inline-field-elements";
+@use "../../styles/tools/form-fields/inline-field-layout";
+@use "../../styles/tools/form-fields/variants";
+@use "../../styles/tools/accessibility";
+@use "../../styles/tools/reset";
+@use "../../styles/tools/spacing";
+
+@layer components.radio {
+    // Foundation
+    .root {
+        @include foundation.root();
+        @include foundation.fieldset();
+        @include variants.visual(check);
+    }
+
+    // 1.
+    .legend {
+        @include accessibility.hide-text();
+    }
+
+    // 1.
+    .label,
+    .optionLabel {
+        @include foundation.label();
+    }
+
+    .options {
+        @include reset.list();
+    }
+
+    .option {
+        @include inline-field-layout.field($type: radio);
+        @include inline-field-elements.min-tap-target($type: radio);
+    }
+
+    .input {
+        @include inline-field-elements.check-input($type: radio);
+    }
+
+    .helpText,
+    .validationText {
+        @include foundation.help-text();
+    }
+
+    .isRootRequired .label {
+        @include foundation.label-required();
+    }
+
+    // States
+    .isRootStateInvalid {
+        @include variants.validation(invalid);
+    }
+
+    .isRootStateValid {
+        @include variants.validation(valid);
+    }
+
+    .isRootStateWarning {
+        @include variants.validation(warning);
+    }
+
+    // Layouts
+    .isRootLayoutVertical,
+    .isRootLayoutHorizontal {
+        @include box-field-layout.vertical($has-list: true);
+    }
+
+    .isRootLayoutHorizontal {
+        @include box-field-layout.horizontal($has-min-tap-target: true);
+    }
+
+    .isRootFullWidth {
+        @include box-field-layout.full-width();
+    }
+
+    .isRootInFormLayout {
+        @include box-field-layout.in-form-layout($is-fieldset: true);
+    }
+}

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,