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

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

@@ -0,0 +1,80 @@
+@use "sass:map";
+@use "../../styles/theme/typography";
+@use "../../styles/tools/accessibility";
+@use "../../styles/tools/breakpoint";
+@use "../../styles/tools/reset";
+@use "../../styles/tools/spacing";
+@use "settings";
+@use "theme";
+
+@layer components.modal {
+    .root {
+        --rui-local-outer-spacing: #{theme.$outer-spacing-xs};
+        --rui-local-max-width: calc(100% - (2 * var(--rui-local-outer-spacing)));
+        --rui-local-max-height: calc(100% - (2 * var(--rui-local-outer-spacing)));
+
+        position: fixed;
+        left: 50%;
+        z-index: settings.$z-index;
+        display: flex;
+        flex-direction: column;
+        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%);
+
+        @include breakpoint.up(sm) {
+            --rui-local-outer-spacing: #{theme.$outer-spacing-sm};
+        }
+    }
+
+    .backdrop {
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: settings.$backdrop-z-index;
+        width: 100vw;
+        height: 100vh;
+        background: theme.$backdrop-background;
+    }
+
+    .isRootSizeSmall {
+        width: map.get(theme.$sizes, small, width);
+    }
+
+    .isRootSizeMedium {
+        width: map.get(theme.$sizes, medium, width);
+    }
+
+    .isRootSizeLarge {
+        width: map.get(theme.$sizes, large, width);
+    }
+
+    .isRootSizeFullscreen {
+        width: map.get(theme.$sizes, fullscreen, width);
+        height: map.get(theme.$sizes, fullscreen, height);
+    }
+
+    .isRootSizeFullscreen .content {
+        height: 100%;
+    }
+
+    .isRootSizeAuto {
+        width: auto;
+        min-width: min(var(--rui-local-max-width), #{map.get(theme.$sizes, auto, min-width)});
+        max-width: min(var(--rui-local-max-width), #{map.get(theme.$sizes, auto, max-width)});
+    }
+
+    .isRootPositionCenter {
+        top: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    .isRootPositionTop {
+        top: var(--rui-local-outer-spacing);
+    }
+}

package/src/components/Modal/ModalBody.jsx

@@ -5,7 +5,7 @@ import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { getScrollingClassName } from './_helpers/getScrollingClassName';
-import styles from './ModalBody.scss';
+import styles from './ModalBody.module.scss';
 
 export const ModalBody = ({
   children,

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

@@ -0,0 +1,20 @@
+@layer components.modal {
+    .root {
+        flex: 1 1 auto;
+    }
+
+    .isRootScrollingAuto,
+    .isRootScrollingCustom {
+        min-height: 0;
+    }
+
+    .isRootScrollingAuto {
+        overflow-y: auto;
+        overscroll-behavior: contain;
+    }
+
+    .isRootScrollingCustom {
+        display: flex;
+        flex-direction: column;
+    }
+}

package/src/components/Modal/ModalCloseButton.jsx

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

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

@@ -0,0 +1,20 @@
+@use "sass:map";
+@use "../../styles/theme/typography";
+@use "../../styles/tools/accessibility";
+@use "../../styles/tools/reset";
+@use "../../styles/tools/spacing";
+
+@layer components.modal {
+    .root {
+        @include reset.button();
+        @include accessibility.min-tap-target();
+
+        font-size: map.get(typography.$font-size-values, 4);
+        line-height: 1;
+        color: inherit;
+
+        &:disabled {
+            cursor: var(--rui-cursor-not-allowed);
+        }
+    }
+}

package/src/components/Modal/ModalContent.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { withGlobalProps } from '../../provider';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { transferProps } from '../_helpers/transferProps';
-import styles from './ModalContent.scss';
+import styles from './ModalContent.module.scss';
 
 export const ModalContent = ({
   children,

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

@@ -0,0 +1,7 @@
+@use "theme";
+
+@layer components.modal {
+    .root {
+        padding: theme.$padding-y theme.$padding-x;
+    }
+}

package/src/components/Modal/ModalFooter.jsx

@@ -4,7 +4,7 @@ import { withGlobalProps } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
-import styles from './ModalFooter.scss';
+import styles from './ModalFooter.module.scss';
 
 export const ModalFooter = ({
   children,

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

@@ -0,0 +1,37 @@
+@use "settings";
+@use "theme";
+
+@layer components.modal {
+    .root {
+        display: flex;
+        flex: none;
+        flex-wrap: wrap;
+        gap: theme.$footer-gap;
+        align-items: center;
+        padding: theme.$padding-y theme.$padding-x;
+        border-top: theme.$separator-width solid theme.$separator-color;
+        border-bottom-right-radius: settings.$border-radius;
+        border-bottom-left-radius: settings.$border-radius;
+        background: theme.$footer-background;
+    }
+
+    .isRootJustifiedToStart {
+        justify-content: flex-start;
+    }
+
+    .isRootJustifiedToCenter {
+        justify-content: center;
+    }
+
+    .isRootJustifiedToEnd {
+        justify-content: flex-end;
+    }
+
+    .isRootJustifiedToSpaceBetween {
+        justify-content: space-between;
+    }
+
+    .isRootJustifiedToStretch {
+        display: block;
+    }
+}

package/src/components/Modal/ModalHeader.jsx

@@ -6,7 +6,7 @@ import {
 import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
-import styles from './ModalHeader.scss';
+import styles from './ModalHeader.module.scss';
 
 export const ModalHeader = ({
   children,

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

@@ -0,0 +1,32 @@
+@use "theme";
+
+@layer components.modal {
+    .root {
+        display: flex;
+        flex: none;
+        gap: theme.$header-gap;
+        align-items: baseline;
+        padding: theme.$padding-y theme.$padding-x;
+        border-bottom: theme.$separator-width solid theme.$separator-color;
+    }
+
+    .isRootJustifiedToStart {
+        justify-content: flex-start;
+    }
+
+    .isRootJustifiedToCenter {
+        justify-content: center;
+    }
+
+    .isRootJustifiedToEnd {
+        justify-content: flex-end;
+    }
+
+    .isRootJustifiedToSpaceBetween {
+        justify-content: space-between;
+    }
+
+    .isRootJustifiedToStretch {
+        display: block;
+    }
+}

package/src/components/Modal/ModalTitle.jsx

@@ -4,7 +4,7 @@ import {
   withGlobalProps,
 } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
-import styles from './ModalTitle.scss';
+import styles from './ModalTitle.module.scss';
 
 export const ModalTitle = ({
   children,

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

@@ -0,0 +1,12 @@
+@use "settings";
+
+@layer components.modal {
+    .root {
+        margin-block: 0;
+        font-size: settings.$title-font-size;
+
+        &:not(:last-child) {
+            margin-bottom: 0;
+        }
+    }
+}

package/src/components/Modal/README.md

@@ -1015,22 +1015,25 @@ opened.
 ## 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:
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to:
 
-- `<div>` HTML element in case of the `Modal` component. This `<div>` is not the
-  root, but its first child which represents the modal window.
-- root `<div>` HTML element in case of `ModalHeader`, `ModalBody`, `ModalContent`
+- 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.
+- the root `<div>` HTML element in case of `ModalHeader`, `ModalBody`, `ModalContent`
   and `ModalFooter` components.
-- heading HTML element, which level can be specified through `level` option, in
-  case of the `ModalTitle` component.
-- native HTML `<button>` in case of the `ModalCloseButton` component.
+- the heading (e.g. `<h1>`) HTML element in case of the `ModalTitle` component.
+- the native HTML `<button>` in case of the `ModalCloseButton` component.
 
 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], [heading] and [button] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [`<h1>`-`<h6>` HTML element attributes][heading-attributes]{:target="_blank"}
+- [`<button>` HTML element attributes][button-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -1084,7 +1087,7 @@ accessibility.
 | `--rui-Modal--fullscreen__width`                     | Width of fullscreen modal                                     |
 | `--rui-Modal--fullscreen__height`                    | Height of fullscreen modal                                    |
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
-[heading]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#attributes
-[button]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
+[button-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[heading-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props

package/src/components/Paper/Paper.jsx

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

package/src/components/Paper/Paper.module.scss

@@ -0,0 +1,19 @@
+@use "theme";
+
+@layer components.paper {
+    .root {
+        padding: theme.$padding;
+        border: theme.$border-width solid theme.$border-color;
+        border-radius: theme.$border-radius;
+        background-color: theme.$background-color;
+    }
+
+    .isRootMuted {
+        background-color: theme.$muted-background-color;
+        opacity: theme.$muted-opacity;
+    }
+
+    .isRootRaised {
+        box-shadow: theme.$raised-box-shadow;
+    }
+}

package/src/components/Paper/README.md

@@ -54,13 +54,15 @@ 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 [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"}
 
 ## API
 
@@ -79,5 +81,5 @@ its accessibility.
 | `--rui-Paper--muted__opacity`                        | Opacity of muted paper                                       |
 | `--rui-Paper--raised__box-shadow`                    | Box shadow of raised paper                                   |
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[div-attributes]: 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

package/src/components/Popover/Popover.jsx

@@ -6,7 +6,7 @@ import { classNames } from '../../utils/classNames';
 import { transferProps } from '../_helpers/transferProps';
 import getRootSideClassName from './_helpers/getRootSideClassName';
 import getRootAlignmentClassName from './_helpers/getRootAlignmentClassName';
-import styles from './Popover.scss';
+import styles from './Popover.module.scss';
 
 export const Popover = React.forwardRef((props, ref) => {
   const {

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

@@ -0,0 +1,238 @@
+// 1. Reset positioning for controlled variant.
+// 2. Shift Popover so there is space for the arrow between Popover and reference element.
+// 3. Add top offset in case it's not defined by external library.
+
+@use "theme";
+
+@layer components.popover {
+    .root {
+        position: absolute;
+        width: max-content;
+        max-width: theme.$max-width;
+        padding: theme.$padding;
+        text-align: left;
+        white-space: normal;
+        word-break: normal;
+        word-wrap: break-word;
+        color: theme.$color;
+        border: theme.$border-width solid theme.$border-color;
+        border-radius: theme.$border-radius;
+        background-color: theme.$background-color;
+        box-shadow: theme.$box-shadow;
+    }
+
+    .arrow {
+        position: absolute;
+        width: theme.$arrow-width;
+        height: theme.$arrow-height;
+        transform-origin: center bottom;
+
+        &::before,
+        &::after {
+            content: "";
+            position: absolute;
+            display: block;
+            border-style: solid;
+            border-color: transparent;
+        }
+
+        &::before {
+            bottom: 0;
+            border-width: theme.$arrow-height theme.$arrow-height 0;
+            border-top-color: theme.$border-color;
+        }
+
+        &::after {
+            bottom: theme.$border-width;
+            border-width: theme.$arrow-height theme.$arrow-height 0;
+            border-top-color: theme.$background-color;
+        }
+    }
+
+    // Sides
+    .isRootAtTop {
+        bottom: 100%;
+    }
+
+    .isRootAtBottom {
+        top: 100%;
+    }
+
+    .isRootAtLeft {
+        right: 100%;
+    }
+
+    .isRootAtRight {
+        left: 100%;
+    }
+
+    // Arrows
+    .isRootAtTop > .arrow {
+        top: 100%;
+    }
+
+    .isRootAtBottom > .arrow {
+        bottom: 100%;
+    }
+
+    .isRootAtLeft > .arrow {
+        left: 100%;
+    }
+
+    .isRootAtRight > .arrow {
+        right: 100%;
+    }
+
+    // Side alignments: top
+    .isRootAtTop.isRootAtCenter {
+        left: 50%;
+        transform: translate(-50%, #{-1 * theme.$arrow-height});
+    }
+
+    .isRootAtTop.isRootAtStart {
+        left: 0;
+        transform: translate(0, #{-1 * theme.$arrow-height});
+    }
+
+    .isRootAtTop.isRootAtEnd {
+        right: 0;
+        transform: translate(0, #{-1 * theme.$arrow-height});
+    }
+
+    .isRootAtTop.isRootAtCenter > .arrow {
+        left: 50%;
+        transform: translate(-50%, 0) rotateZ(0);
+    }
+
+    .isRootAtTop.isRootAtStart > .arrow {
+        left: theme.$arrow-corner-offset;
+        transform: translate(0, 0) rotateZ(0);
+    }
+
+    .isRootAtTop.isRootAtEnd > .arrow {
+        right: theme.$arrow-corner-offset;
+        transform: translate(0, 0) rotateZ(0);
+    }
+
+    // Side alignments: bottom
+    .isRootAtBottom.isRootAtCenter {
+        left: 50%;
+        transform: translate(-50%, #{theme.$arrow-height});
+    }
+
+    .isRootAtBottom.isRootAtStart {
+        left: 0;
+        transform: translate(0, #{theme.$arrow-height});
+    }
+
+    .isRootAtBottom.isRootAtEnd {
+        right: 0;
+        transform: translate(0, #{theme.$arrow-height});
+    }
+
+    .isRootAtBottom.isRootAtCenter > .arrow {
+        left: 50%;
+        transform: translate(-50%, -100%) rotateZ(180deg);
+    }
+
+    .isRootAtBottom.isRootAtStart > .arrow {
+        left: theme.$arrow-corner-offset;
+        transform: translate(0, -100%) rotateZ(180deg);
+    }
+
+    .isRootAtBottom.isRootAtEnd > .arrow {
+        right: theme.$arrow-corner-offset;
+        transform: translate(0, -100%) rotateZ(180deg);
+    }
+
+    // Side alignments: left
+    .isRootAtLeft.isRootAtCenter {
+        top: 50%;
+        transform: translate(#{-1 * theme.$arrow-height}, -50%);
+    }
+
+    .isRootAtLeft.isRootAtStart {
+        top: 0;
+        transform: translate(#{-1 * theme.$arrow-height}, 0);
+    }
+
+    .isRootAtLeft.isRootAtEnd {
+        bottom: 0;
+        transform: translate(#{-1 * theme.$arrow-height}, 0);
+    }
+
+    .isRootAtLeft.isRootAtCenter > .arrow {
+        top: 50%;
+        transform: translate(0, -100%) rotateZ(-90deg);
+    }
+
+    .isRootAtLeft.isRootAtStart > .arrow {
+        top: theme.$arrow-corner-offset;
+        transform: translate(0, 0) rotateZ(-90deg);
+    }
+
+    .isRootAtLeft.isRootAtEnd > .arrow {
+        bottom: theme.$arrow-corner-offset;
+        transform: translate(0, -100%) rotateZ(-90deg);
+    }
+
+    // Side alignments: right
+    .isRootAtRight.isRootAtCenter {
+        top: 50%;
+        transform: translate(#{theme.$arrow-height}, -50%);
+    }
+
+    .isRootAtRight.isRootAtStart {
+        top: 0;
+        transform: translate(#{theme.$arrow-height}, 0);
+    }
+
+    .isRootAtRight.isRootAtEnd {
+        bottom: 0;
+        transform: translate(#{theme.$arrow-height}, 0);
+    }
+
+    .isRootAtRight.isRootAtCenter > .arrow {
+        top: 50%;
+        transform: translate(0, -100%) rotateZ(90deg);
+    }
+
+    .isRootAtRight.isRootAtStart > .arrow {
+        top: theme.$arrow-corner-offset;
+        transform: translate(0, 0) rotateZ(90deg);
+    }
+
+    .isRootAtRight.isRootAtEnd > .arrow {
+        bottom: theme.$arrow-corner-offset;
+        transform: translate(0, -100%) rotateZ(90deg);
+    }
+
+    // Controlled placement
+    .isRootControlled.isRootAtTop,
+    .isRootControlled.isRootAtBottom,
+    .isRootControlled.isRootAtLeft,
+    .isRootControlled.isRootAtRight {
+        inset: unset; // 1.
+    }
+
+    .isRootControlled.isRootAtTop {
+        transform: translate(0, #{-1 * theme.$arrow-height}); // 2.
+    }
+
+    .isRootControlled.isRootAtBottom {
+        transform: translate(0, #{theme.$arrow-height}); // 2.
+    }
+
+    .isRootControlled.isRootAtLeft {
+        transform: translate(#{-1 * theme.$arrow-height}, 0); // 2.
+    }
+
+    .isRootControlled.isRootAtRight {
+        transform: translate(#{theme.$arrow-height}, 0); // 2.
+    }
+
+    .isRootControlled.isRootAtLeft.isRootAtStart,
+    .isRootControlled.isRootAtRight.isRootAtStart {
+        top: 0; // 3.
+    }
+}

package/src/components/Popover/PopoverWrapper.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 './PopoverWrapper.scss';
+import styles from './PopoverWrapper.module.scss';
 
 export const PopoverWrapper = ({
   children,
@@ -36,4 +36,3 @@ PopoverWrapper.propTypes = {
 export const PopoverWrapperWithContext = withGlobalProps(PopoverWrapper, 'PopoverWrapper');
 
 export default PopoverWrapperWithContext;
-

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

@@ -0,0 +1,5 @@
+@layer components.popover {
+    .root {
+        position: relative;
+    }
+}