@react-ui-org/react-ui 0.44.1 → 0.47.0

package/src/lib/components/Modal/Modal.scss

@@ -1,126 +1,126 @@
-@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';
+@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";
 
 .root {
-  --local-outer-spacing: #{theme.$outer-spacing-xs};
-
-  position: fixed;
-  left: 50%;
-  z-index: settings.$z-index;
-  display: flex;
-  flex-direction: column;
-  max-width: calc(100% - (2 * var(--local-outer-spacing)));
-  max-height: calc(100% - (2 * var(--local-outer-spacing)));
-  overflow-y: auto;
-  border-radius: settings.$border-radius;
-  background: theme.$background;
-  box-shadow: theme.$box-shadow;
-  transform: translateX(-50%);
-
-  @include breakpoint.up(sm) {
-    --local-outer-spacing: #{theme.$outer-spacing-sm};
-  }
+    --rui-local-outer-spacing: #{theme.$outer-spacing-xs};
+
+    position: fixed;
+    left: 50%;
+    z-index: settings.$z-index;
+    display: flex;
+    flex-direction: column;
+    max-width: calc(100% - (2 * var(--rui-local-outer-spacing)));
+    max-height: calc(100% - (2 * var(--rui-local-outer-spacing)));
+    overflow-y: auto;
+    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};
+    }
 }
 
 .head {
-  display: flex;
-  flex: none;
-  align-items: baseline;
-  justify-content: space-between;
-  padding: settings.$padding-y spacing.of(4) settings.$padding-y settings.$padding-x;
+    display: flex;
+    flex: none;
+    align-items: baseline;
+    justify-content: space-between;
+    padding: settings.$padding-y spacing.of(4) settings.$padding-y settings.$padding-x;
 }
 
 .headTitle {
-  font-size: settings.$head-title-font-size;
+    font-size: settings.$head-title-font-size;
 
-  &:not(:last-child) {
-    margin-bottom: 0;
-  }
+    &:not(:last-child) {
+        margin-bottom: 0;
+    }
 }
 
 .close {
-  @include reset.button();
-  @include accessibility.min-tap-target();
+    @include reset.button();
+    @include accessibility.min-tap-target();
 
-  font-size: map.get(typography.$size-values, 3);
-  line-height: 1;
-  color: inherit;
+    font-size: map.get(typography.$size-values, 3);
+    line-height: 1;
+    color: inherit;
 }
 
 .body {
-  flex: 1 1 auto;
+    flex: 1 1 auto;
 }
 
 .isBodyScrollable {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
 }
 
 .content {
-  padding: settings.$padding-y settings.$padding-x settings.$content-padding-bottom;
+    padding: settings.$padding-y settings.$padding-x settings.$content-padding-bottom;
 }
 
 .footer {
-  display: flex;
-  flex: none;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  padding: settings.$padding-y settings.$padding-x;
-  border-bottom-right-radius: settings.$border-radius;
-  border-bottom-left-radius: settings.$border-radius;
-  background: theme.$footer-background;
+    display: flex;
+    flex: none;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    padding: settings.$padding-y settings.$padding-x;
+    border-bottom-right-radius: settings.$border-radius;
+    border-bottom-left-radius: settings.$border-radius;
+    background: theme.$footer-background;
 }
 
 .backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: settings.$backdrop-z-index;
-  width: 100vw;
-  height: 100vh;
-  background: theme.$backdrop-background;
+    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);
+    width: map.get(theme.$sizes, small, width);
 }
 
 .isRootSizeMedium {
-  width: map.get(theme.$sizes, medium, width);
+    width: map.get(theme.$sizes, medium, width);
 }
 
 .isRootSizeLarge {
-  width: map.get(theme.$sizes, large, width);
+    width: map.get(theme.$sizes, large, width);
 }
 
 .isRootSizeFullscreen {
-  width: map.get(theme.$sizes, fullscreen, width);
-  height: map.get(theme.$sizes, fullscreen, height);
+    width: map.get(theme.$sizes, fullscreen, width);
+    height: map.get(theme.$sizes, fullscreen, height);
 }
 
 .isRootSizeFullscreen .content {
-  height: 100%;
+    height: 100%;
 }
 
 .isRootSizeAuto {
-  width: auto;
-  min-width: map.get(theme.$sizes, auto, min-width);
-  max-width: map.get(theme.$sizes, auto, max-width);
+    width: auto;
+    min-width: map.get(theme.$sizes, auto, min-width);
+    max-width: map.get(theme.$sizes, auto, max-width);
 }
 
 .isRootPositionCenter {
-  top: 50%;
-  transform: translate(-50%, -50%);
+    top: 50%;
+    transform: translate(-50%, -50%);
 }
 
 .isRootPositionTop {
-  top: var(--local-outer-spacing);
+    top: var(--rui-local-outer-spacing);
 }

package/src/lib/components/Modal/README.mdx

@@ -13,10 +13,7 @@ import {
   Props,
 } from 'docz'
 import Button from '../Button'
-import {
-  ModalWithContext as Modal,
-  Modal as ParsableModal,
-} from './Modal'
+import { Modal } from './Modal'
 
 ## Basic Usage
 
@@ -407,7 +404,7 @@ to prevent interaction. That's where blocking modals may come handy.
 
 ## API
 
-<Props table of={ParsableModal} />
+<Props table of={Modal} />
 
 ## Theming
 

package/src/lib/components/Modal/_settings.scss

@@ -1,8 +1,8 @@
-@use 'sass:map';
-@use '../../styles/settings/z-indexes';
-@use '../../styles/theme/borders';
-@use '../../styles/theme/typography';
-@use '../../styles/tools/spacing';
+@use "sass:map";
+@use "../../styles/settings/z-indexes";
+@use "../../styles/theme/borders";
+@use "../../styles/theme/typography";
+@use "../../styles/tools/spacing";
 
 $padding-x: spacing.of(5);
 $padding-y: spacing.of(3);

package/src/lib/components/Modal/_theme.scss

@@ -6,21 +6,21 @@ $outer-spacing-xs: var(--rui-Modal__outer-spacing--xs);
 $outer-spacing-sm: var(--rui-Modal__outer-spacing--sm);
 
 $sizes: (
-  auto: (
-    min-width: var(--rui-Modal--auto__min-width),
-    max-width: var(--rui-Modal--auto__max-width),
-  ),
-  small: (
-    width: var(--rui-Modal--small__width),
-  ),
-  medium: (
-    width: var(--rui-Modal--medium__width),
-  ),
-  large: (
-    width: var(--rui-Modal--large__width),
-  ),
-  fullscreen: (
-    width: var(--rui-Modal--fullscreen__width),
-    height: var(--rui-Modal--fullscreen__height),
-  ),
+    auto: (
+        min-width: var(--rui-Modal--auto__min-width),
+        max-width: var(--rui-Modal--auto__max-width),
+    ),
+    small: (
+        width: var(--rui-Modal--small__width),
+    ),
+    medium: (
+        width: var(--rui-Modal--medium__width),
+    ),
+    large: (
+        width: var(--rui-Modal--large__width),
+    ),
+    fullscreen: (
+        width: var(--rui-Modal--fullscreen__width),
+        height: var(--rui-Modal--fullscreen__height),
+    ),
 );

package/src/lib/components/Paper/Paper.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withProviderContext } from '../../provider';
+import { withGlobalProps } from '../../provider';
+import { classNames } from '../../utils/classNames';
 import styles from './Paper.scss';
 
 export const Paper = ({
@@ -10,11 +11,11 @@ export const Paper = ({
   raised,
 }) => (
   <div
-    className={[
+    className={classNames(
       styles.root,
-      muted ? styles.rootMuted : '',
-      raised ? styles.rootRaised : '',
-    ].join(' ')}
+      muted && styles.rootMuted,
+      raised && styles.rootRaised,
+    )}
     id={id}
   >
     {children}
@@ -22,7 +23,6 @@ export const Paper = ({
 );
 
 Paper.defaultProps = {
-  children: null,
   id: undefined,
   muted: false,
   raised: false,
@@ -32,7 +32,7 @@ Paper.propTypes = {
   /**
    * Content to be placed onto Paper.
    */
-  children: PropTypes.node,
+  children: PropTypes.node.isRequired,
   /**
    * ID of the root HTML element.
    */
@@ -47,6 +47,6 @@ Paper.propTypes = {
   raised: PropTypes.bool,
 };
 
-export const PaperWithContext = withProviderContext(Paper, 'Paper');
+export const PaperWithGlobalProps = withGlobalProps(Paper, 'Paper');
 
-export default PaperWithContext;
+export default PaperWithGlobalProps;

package/src/lib/components/Paper/Paper.scss

@@ -1,17 +1,17 @@
-@use 'theme';
+@use "theme";
 
 .root {
-  padding: theme.$padding;
-  border: theme.$border-width solid theme.$border-color;
-  border-radius: theme.$border-radius;
-  background-color: theme.$background-color;
+    padding: theme.$padding;
+    border: theme.$border-width solid theme.$border-color;
+    border-radius: theme.$border-radius;
+    background-color: theme.$background-color;
 }
 
 .rootMuted {
-  background-color: theme.$muted-background-color;
-  opacity: theme.$muted-opacity;
+    background-color: theme.$muted-background-color;
+    opacity: theme.$muted-opacity;
 }
 
 .rootRaised {
-  box-shadow: theme.$raised-box-shadow;
+    box-shadow: theme.$raised-box-shadow;
 }

package/src/lib/components/Popover/Popover.jsx

@@ -0,0 +1,94 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { withGlobalProps } from '../../provider';
+import { classNames } from '../../utils/classNames';
+import { transferProps } from '../_helpers/transferProps';
+import withForwardedRef from '../withForwardedRef';
+import getRootSideClassName from './_helpers/getRootSideClassName';
+import getRootAlignmentClassName from './_helpers/getRootAlignmentClassName';
+import styles from './Popover.scss';
+
+export const Popover = ({
+  forwardedRef,
+  placement,
+  children,
+  id,
+  portalId,
+  ...restProps
+}) => {
+  const PopoverEl = (
+    <div
+      className={classNames(
+        styles.root,
+        forwardedRef && styles.isRootControlled,
+        getRootSideClassName(placement, styles),
+        getRootAlignmentClassName(placement, styles),
+      )}
+      id={id}
+      ref={forwardedRef}
+      {...transferProps(restProps)}
+    >
+      {children}
+      <span className={styles.arrow} />
+    </div>
+  );
+
+  if (portalId === null) {
+    return PopoverEl;
+  }
+
+  return createPortal(PopoverEl, document.getElementById(portalId));
+};
+
+Popover.defaultProps = {
+  forwardedRef: undefined,
+  id: undefined,
+  placement: 'bottom',
+  portalId: null,
+};
+
+Popover.propTypes = {
+  /**
+   * Popover content.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Reference forwarded to the root `div` element.
+   */
+  forwardedRef: PropTypes.oneOfType([
+    PropTypes.func,
+    // eslint-disable-next-line react/forbid-prop-types
+    PropTypes.shape({ current: PropTypes.any }),
+  ]),
+  /**
+   * ID of the root HTML element.
+   */
+  id: PropTypes.string,
+  /**
+   * Popover placement affects position of the arrow.
+   * Compatible with [Floating UI API](https://floating-ui.com/docs/computePosition#placement).
+   */
+  placement: PropTypes.oneOf([
+    'top',
+    'top-start',
+    'top-end',
+    'right',
+    'right-start',
+    'right-end',
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+    'left',
+    'left-start',
+    'left-end',
+  ]),
+  /**
+   * If set, popover is rendered in the React Portal with that ID.
+   */
+  portalId: PropTypes.string,
+};
+
+export const PopoverWithContext = withForwardedRef(withGlobalProps(Popover, 'Popover'));
+
+export default PopoverWithContext;

package/src/lib/components/Popover/Popover.scss

@@ -0,0 +1,235 @@
+// 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";
+
+.wrapper {
+    position: relative;
+}
+
+.root {
+    position: absolute;
+    width: theme.$width;
+    padding: theme.$padding;
+    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
+.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.
+}