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

package/src/lib/components/ScrollView/ScrollView.jsx

@@ -11,6 +11,7 @@ import {
   withGlobalProps,
 } from '../../provider';
 import { classNames } from '../../utils/classNames';
+import { transferProps } from '../_helpers/transferProps';
 import { getElementsPositionDifference } from './_helpers/getElementsPositionDifference';
 import { useLoadResize } from './_hooks/useLoadResizeHook';
 import { useScrollPosition } from './_hooks/useScrollPositionHook';
@@ -21,23 +22,30 @@ import styles from './ScrollView.scss';
 // every value less or equal to 1px as start/end.
 const EDGE_DETECTION_INACCURACY_PX = 1;
 
-export const ScrollView = (props) => {
+export const ScrollView = React.forwardRef((props, ref) => {
   const {
     arrows,
-    arrowsColor,
     arrowsScrollStep,
     autoScroll,
     children,
-    customEndShadowStyle,
-    customNextArrow,
-    customPrevArrow,
-    customStartShadowStyle,
+    endShadowBackground,
+    endShadowInitialOffset,
+    endShadowSize,
     id,
     debounce,
     direction,
+    nextArrowColor,
+    nextArrowElement,
+    nextArrowInitialOffset,
+    prevArrowColor,
+    prevArrowElement,
+    prevArrowInitialOffset,
     scrollbar,
-    shadowColor,
-    shadowSize,
+    shadows,
+    startShadowBackground,
+    startShadowInitialOffset,
+    startShadowSize,
+    ...restProps
   } = props;
 
   const { translations } = useContext(RUIContext);
@@ -49,7 +57,8 @@ export const ScrollView = (props) => {
   const scrollPositionStart = direction === 'horizontal' ? 'left' : 'top';
   const scrollPositionEnd = direction === 'horizontal' ? 'right' : 'bottom';
   const scrollViewContentEl = useRef(null);
-  const scrollViewViewportEl = useRef(null);
+  const blankRef = useRef(null);
+  const scrollViewViewportEl = ref ?? blankRef;
 
   const handleScrollViewState = (currentPosition) => {
     const isScrolledAtStartActive = currentPosition[scrollPositionStart]
@@ -84,7 +93,7 @@ export const ScrollView = (props) => {
 
   /**
    * If autoScroll is enabled, it automatically scrolls viewport element to the end of the
-   * the viewport when content is changed. It is performed only when viewport element is
+   * viewport when content is changed. It is performed only when viewport element is
    * scrolled to the end of the viewport or when viewport element is in any position but
    * autoScroll triggered by previous change is still in progress.
    */
@@ -156,43 +165,6 @@ export const ScrollView = (props) => {
     [autoScroll, autoScrollChildrenKeys, autoScrollChildrenLength],
   );
 
-  const setAlpha = (rgba, alpha) => ({
-    ...rgba,
-    alpha,
-  });
-
-  const rgbaToString = (rgba) => (
-    `rgba(${rgba.red}, ${rgba.green}, ${rgba.blue}, ${rgba.alpha})`
-  );
-
-  const inlineStyle = (
-    scrollDirection,
-    customArrowsColor,
-    customShadowColor,
-    customShadowSize,
-    startShadowStyle,
-    endShadowStyle,
-  ) => {
-    const shadowStartColor = rgbaToString(customShadowColor);
-    const shadowEndColor = rgbaToString(setAlpha(customShadowColor, 0));
-
-    /* eslint-disable sort-keys */
-    return {
-      '--rui-local-arrow-color': customArrowsColor || 'inherit',
-      '--rui-local-shadow-width': scrollDirection === 'horizontal' ? shadowSize : 'auto',
-      '--rui-local-shadow-height': scrollDirection === 'horizontal' ? 'auto' : shadowSize,
-      '--rui-local-start-shadow-background':
-        startShadowStyle.background
-        || `linear-gradient(${direction === 'horizontal' ? 'to right' : 'to bottom'}, ${shadowStartColor}, ${shadowEndColor})`,
-      '--rui-local-start-shadow-box-shadow': startShadowStyle.boxShadow || 'none',
-      '--rui-local-end-shadow-background':
-        endShadowStyle.background
-        || `linear-gradient(${direction === 'horizontal' ? 'to left' : 'to top'}, ${shadowStartColor}, ${shadowEndColor})`,
-      '--rui-local-end-shadow-box-shadow': endShadowStyle.boxShadow || 'none',
-    };
-    /* eslint-enable sort-keys */
-  };
-
   const arrowHandler = (contentEl, viewportEl, scrollViewDirection, shiftDirection, step) => {
     const offset = shiftDirection === 'next' ? step : -1 * step;
     const differenceX = scrollViewDirection === 'horizontal' ? offset : 0;
@@ -203,6 +175,7 @@ export const ScrollView = (props) => {
 
   return (
     <div
+      {...transferProps(restProps)}
       className={classNames(
         styles.root,
         isScrolledAtStart && styles.isRootScrolledAtStart,
@@ -210,31 +183,42 @@ export const ScrollView = (props) => {
         !scrollbar && styles.hasRootScrollbarDisabled,
         direction === 'horizontal' ? styles.isRootHorizontal : styles.isRootVertical,
       )}
-      style={inlineStyle(
-        direction,
-        arrowsColor,
-        shadowColor,
-        shadowSize,
-        customStartShadowStyle,
-        customEndShadowStyle,
-      )}
       id={id}
+      style={{
+        '--rui-local-end-shadow-background': endShadowBackground,
+        '--rui-local-end-shadow-direction': direction === 'horizontal' ? 'to left' : 'to top',
+        '--rui-local-end-shadow-initial-offset': endShadowInitialOffset,
+        '--rui-local-end-shadow-size': endShadowSize,
+        '--rui-local-next-arrow-color': nextArrowColor,
+        '--rui-local-next-arrow-initial-offset': nextArrowInitialOffset,
+        '--rui-local-prev-arrow-color': prevArrowColor,
+        '--rui-local-prev-arrow-initial-offset': prevArrowInitialOffset,
+        '--rui-local-start-shadow-background': startShadowBackground,
+        '--rui-local-start-shadow-direction': direction === 'horizontal' ? 'to right' : 'to bottom',
+        '--rui-local-start-shadow-initial-offset': startShadowInitialOffset,
+        '--rui-local-start-shadow-size': startShadowSize,
+      }}
     >
-      <div className={styles.viewport} ref={scrollViewViewportEl}>
+      <div
+        className={styles.viewport}
+        ref={scrollViewViewportEl}
+      >
         <div
           className={styles.content}
-          ref={scrollViewContentEl}
           id={id && `${id}__content`}
+          ref={scrollViewContentEl}
         >
           {children}
         </div>
       </div>
-      <div className={styles.scrollingShadows} aria-hidden />
+      {shadows && (
+        <div className={styles.scrollingShadows} aria-hidden />
+      )}
       {arrows && (
         <>
           <button
-            type="button"
             className={styles.arrowPrev}
+            id={id && `${id}__arrowPrevButton`}
             onClick={() => arrowHandler(
               scrollViewContentEl,
               scrollViewViewportEl,
@@ -243,15 +227,15 @@ export const ScrollView = (props) => {
               arrowsScrollStep,
             )}
             title={translations.ScrollView.previous}
-            id={id && `${id}__arrowPrevButton`}
+            type="button"
           >
-            {customPrevArrow || (
+            {prevArrowElement || (
               <span className={styles.arrowIcon} aria-hidden />
             )}
           </button>
           <button
-            type="button"
             className={styles.arrowNext}
+            id={id && `${id}__arrowNextButton`}
             onClick={() => arrowHandler(
               scrollViewContentEl,
               scrollViewViewportEl,
@@ -260,9 +244,9 @@ export const ScrollView = (props) => {
               arrowsScrollStep,
             )}
             title={translations.ScrollView.next}
-            id={id && `${id}__arrowNextButton`}
+            type="button"
           >
-            {customNextArrow || (
+            {nextArrowElement || (
               <span className={styles.arrowIcon} aria-hidden />
             )}
           </button>
@@ -270,29 +254,30 @@ export const ScrollView = (props) => {
       )}
     </div>
   );
-};
+});
 
 ScrollView.defaultProps = {
   arrows: false,
-  arrowsColor: undefined,
   arrowsScrollStep: 200,
   autoScroll: 'off',
   children: null,
-  customEndShadowStyle: {},
-  customNextArrow: null,
-  customPrevArrow: null,
-  customStartShadowStyle: {},
   debounce: 50,
   direction: 'vertical',
+  endShadowBackground: 'linear-gradient(var(--rui-local-end-shadow-direction), rgba(255 255 255 / 1), rgba(255 255 255 / 0))',
+  endShadowInitialOffset: '-1rem',
+  endShadowSize: '2em',
   id: undefined,
+  nextArrowColor: undefined,
+  nextArrowElement: null,
+  nextArrowInitialOffset: '-0.5rem',
+  prevArrowColor: undefined,
+  prevArrowElement: null,
+  prevArrowInitialOffset: '-0.5rem',
   scrollbar: true,
-  shadowColor: {
-    alpha: 1,
-    blue: 255,
-    green: 255,
-    red: 255,
-  },
-  shadowSize: '2em',
+  shadows: true,
+  startShadowBackground: 'linear-gradient(var(--rui-local-start-shadow-direction), rgba(255 255 255 / 1), rgba(255 255 255 / 0))',
+  startShadowInitialOffset: '-1rem',
+  startShadowSize: '2em',
 };
 
 ScrollView.propTypes = {
@@ -300,21 +285,17 @@ ScrollView.propTypes = {
    * If `true`, display the arrow controls.
    */
   arrows: PropTypes.bool,
-  /**
-   * Text color of the arrow controls. Accepts any valid CSS color value.
-   */
-  arrowsColor: PropTypes.string,
   /**
    * Portion to scroll by when the arrows are clicked, in px.
    */
   arrowsScrollStep: PropTypes.number,
   /**
-   * Auto scroll mechanism requires to have the `key` prop set for every child present in `children`
-   * prop because it detects changes of these keys. Without the keys, it will not work.
+   * The auto-scroll mechanism requires having the `key` prop set for every child present in `children`
+   * because it detects changes of those keys. Without the keys, the auto-scroll will not work.
    *
-   * Option `always` means that auto scroll scrolls to the end every time the content changes.
-   * Option `detectEnd` means that auto scroll scrolls to the end only when the content is changed
-   * and the user scrolled at the end of the viewport at the moment of the change.
+   * Option `always` means the auto-scroll scrolls to the end every time the content changes.
+   * Option `detectEnd` means the auto-scroll scrolls to the end only when the content is changed
+   * and the user has scrolled at the end of the viewport at the moment of the change.
    *
    * See https://reactjs.org/docs/lists-and-keys.html#keys
    */
@@ -324,35 +305,26 @@ ScrollView.propTypes = {
    */
   children: PropTypes.node,
   /**
-   * Custom CSS to replace the default end scrolling shadow.
-   */
-  customEndShadowStyle: PropTypes.shape({
-    background: PropTypes.string,
-    boxShadow: PropTypes.string,
-  }),
-  /**
-   * Custom HTML or React Component to replace the default next-arrow control.
+   * Delay in ms before the display of arrows and scrolling shadows is evaluated during interaction.
    */
-  customNextArrow: PropTypes.node,
+  debounce: PropTypes.number,
   /**
-   * Custom HTML or React Component to replace the default prev-arrow control.
+   * Direction of scrolling.
    */
-  customPrevArrow: PropTypes.node,
+  direction: PropTypes.oneOf(['horizontal', 'vertical']),
   /**
-   * Custom CSS to replace the default start scrolling shadow.
+   * Custom background of the end scrolling shadow. Can be a CSS gradient or an image `url()`.
    */
-  customStartShadowStyle: PropTypes.shape({
-    background: PropTypes.string,
-    boxShadow: PropTypes.string,
-  }),
+  endShadowBackground: PropTypes.string,
   /**
-   * Delay in ms before the display of arrows and scrolling shadows is evaluated during interaction.
+   * Initial offset of the end scrolling shadow (transitioned). If set, the end scrolling shadow slides in
+   * by this distance.
    */
-  debounce: PropTypes.number,
+  endShadowInitialOffset: PropTypes.string,
   /**
-   * Direction of scrolling.
+   * Size of the end scrolling shadow. Accepts any valid CSS length value.
    */
-  direction: PropTypes.oneOf(['horizontal', 'vertical']),
+  endShadowSize: PropTypes.string,
   /**
    * ID of the root HTML element. It also serves as base for nested elements:
    * * `<ID>__content`
@@ -360,25 +332,51 @@ ScrollView.propTypes = {
    * * `<ID>__arrowNextButton`
    */
   id: PropTypes.string,
+  /**
+   * Text color of the end arrow control. Accepts any valid CSS color value.
+   */
+  nextArrowColor: PropTypes.string,
+  /**
+   * Custom HTML or React Component to replace the default next-arrow control.
+   */
+  nextArrowElement: PropTypes.node,
+  /**
+   * Initial offset of the end arrow control (transitioned). If set, the next arrow slides in by this distance.
+   */
+  nextArrowInitialOffset: PropTypes.string,
+  /**
+   * Text color of the start arrow control. Accepts any valid CSS color value.
+   */
+  prevArrowColor: PropTypes.string,
+  /**
+   * Custom HTML or React Component to replace the default prev-arrow control.
+   */
+  prevArrowElement: PropTypes.node,
+  /**
+   * Initial offset of the start arrow control (transitioned). If set, the prev arrow slides in by this distance.
+   */
+  prevArrowInitialOffset: PropTypes.string,
   /**
    * If `false`, the system scrollbar will be hidden.
    */
   scrollbar: PropTypes.bool,
   /**
-   * Color of the default scrolling shadows in the RGBA format. It doesn't have effect on custom
-   * scrolling shadows.
+   * If `true`, display scrolling shadows.
+   */
+  shadows: PropTypes.bool,
+  /**
+   * Custom background of the start scrolling shadow. Can be a CSS gradient or an image `url()`.
+   */
+  startShadowBackground: PropTypes.string,
+  /**
+   * Initial offset of the start scrolling shadow (transitioned). If set, the start scrolling shadow slides in
+   * by this distance.
    */
-  shadowColor: PropTypes.shape({
-    alpha: PropTypes.number.isRequired,
-    blue: PropTypes.number.isRequired,
-    green: PropTypes.number.isRequired,
-    red: PropTypes.number.isRequired,
-  }),
+  startShadowInitialOffset: PropTypes.string,
   /**
-   * Size of scrolling shadows. Works as height in the vertical mode and as width in the horizontal
-   * mode.
+   * Size of the start scrolling shadow. Accepts any valid CSS length value.
    */
-  shadowSize: PropTypes.string,
+  startShadowSize: PropTypes.string,
 };
 
 export const ScrollViewWithGlobalProps = withGlobalProps(ScrollView, 'ScrollView');

package/src/lib/components/ScrollView/ScrollView.scss

@@ -1,7 +1,7 @@
 // 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.
+// 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).
@@ -27,7 +27,6 @@
 @use "../../styles/tools/scrollbar";
 @use "../../styles/tools/spacing";
 @use "../../styles/tools/transition";
-@use "theme";
 
 $_arrow-inner-spacing: spacing.of(2);
 $_arrow-outer-spacing: spacing.of(4);
@@ -45,6 +44,7 @@ $_arrow-outer-spacing: spacing.of(4);
     width: 100%; // 2.
     height: 100%; // 2.
     overflow: hidden; // 2.
+    pointer-events: none; // 2.
 
     &::before,
     &::after {
@@ -54,20 +54,16 @@ $_arrow-outer-spacing: spacing.of(4);
         position: absolute;
         z-index: 2; // 2.
         display: block;
-        width: var(--rui-local-shadow-width);
-        height: var(--rui-local-shadow-height);
         visibility: hidden;
         opacity: 0;
     }
 
     &::before {
         background: var(--rui-local-start-shadow-background);
-        box-shadow: var(--rui-local-start-shadow-box-shadow);
     }
 
     &::after {
         background: var(--rui-local-end-shadow-background);
-        box-shadow: var(--rui-local-end-shadow-box-shadow);
     }
 }
 
@@ -75,7 +71,6 @@ $_arrow-outer-spacing: spacing.of(4);
     z-index: 1; // 2.
     width: 100%;
     scroll-behavior: smooth;
-    -webkit-overflow-scrolling: touch;
 }
 
 .arrowPrev,
@@ -89,7 +84,6 @@ $_arrow-outer-spacing: spacing.of(4);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: var(--rui-local-arrow-color);
     visibility: hidden;
     opacity: 0;
 }
@@ -116,7 +110,8 @@ $_arrow-outer-spacing: spacing.of(4);
     width: 100%;
     padding-top: $_arrow-outer-spacing;
     padding-bottom: $_arrow-inner-spacing;
-    transform: translateY(theme.$arrow-initial-offset);
+    color: var(--rui-local-prev-arrow-color);
+    transform: translateY(var(--rui-local-prev-arrow-initial-offset));
 }
 
 .isRootVertical .arrowPrev .arrowIcon {
@@ -130,7 +125,8 @@ $_arrow-outer-spacing: spacing.of(4);
     width: 100%;
     padding-top: $_arrow-inner-spacing;
     padding-bottom: $_arrow-outer-spacing;
-    transform: translateY(calc(-1 * #{theme.$arrow-initial-offset}));
+    color: var(--rui-local-next-arrow-color);
+    transform: translateY(calc(-1 * var(--rui-local-next-arrow-initial-offset)));
 }
 
 .isRootHorizontal {
@@ -143,7 +139,7 @@ $_arrow-outer-spacing: spacing.of(4);
     left: 0;
     padding-right: $_arrow-inner-spacing;
     padding-left: $_arrow-outer-spacing;
-    transform: translateX(theme.$arrow-initial-offset);
+    transform: translateX(var(--rui-local-prev-arrow-initial-offset));
 }
 
 .isRootHorizontal .arrowPrev .arrowIcon {
@@ -156,7 +152,7 @@ $_arrow-outer-spacing: spacing.of(4);
     bottom: 0;
     padding-right: $_arrow-outer-spacing;
     padding-left: $_arrow-inner-spacing;
-    transform: translateX(calc(-1 * #{theme.$arrow-initial-offset}));
+    transform: translateX(calc(-1 * var(--rui-local-next-arrow-initial-offset)));
 }
 
 .isRootHorizontal .arrowNext .arrowIcon {
@@ -167,16 +163,19 @@ $_arrow-outer-spacing: spacing.of(4);
 .isRootVertical .scrollingShadows::after {
     right: 0;
     left: 0;
+    width: auto;
 }
 
 .isRootVertical .scrollingShadows::before {
     top: 0;
-    transform: translateY(theme.$shadow-initial-offset);
+    height: var(--rui-local-start-shadow-size);
+    transform: translateY(var(--rui-local-start-shadow-initial-offset));
 }
 
 .isRootVertical .scrollingShadows::after {
     bottom: 0;
-    transform: translateY(calc(-1 * #{theme.$shadow-initial-offset}));
+    height: var(--rui-local-end-shadow-size);
+    transform: translateY(calc(-1 * var(--rui-local-end-shadow-initial-offset)));
 }
 
 .isRootHorizontal .viewport {
@@ -193,16 +192,19 @@ $_arrow-outer-spacing: spacing.of(4);
 .isRootHorizontal .scrollingShadows::after {
     top: 0;
     bottom: 0;
+    height: auto;
 }
 
 .isRootHorizontal .scrollingShadows::before {
     left: 0;
-    transform: translateX(theme.$shadow-initial-offset);
+    width: var(--rui-local-start-shadow-size);
+    transform: translateX(var(--rui-local-start-shadow-initial-offset));
 }
 
 .isRootHorizontal .scrollingShadows::after {
     right: 0;
-    transform: translateX(calc(-1 * #{theme.$shadow-initial-offset}));
+    width: var(--rui-local-end-shadow-size);
+    transform: translateX(calc(-1 * var(--rui-local-end-shadow-initial-offset)));
 }
 
 .isRootScrolledAtStart .scrollingShadows::before,

package/src/lib/components/ScrollView/index.js

@@ -1 +1 @@
-export { default } from './ScrollView';
+export { default as ScrollView } from './ScrollView';

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

@@ -12,7 +12,7 @@ import {
   Playground,
   Props,
 } from 'docz'
-import { SelectField } from './SelectField'
+import { SelectField } from '../..'
 
 ## Basic Usage
 
@@ -79,7 +79,7 @@ See [API](#api) for all available options.
   entered.
 
 - In case of a large amount of options, consider **grouping related items
-  together** by nesting them (implements the `optgroup` HTML element).
+  together** by nesting them.
 
 👉 We use the **native `select`** HTML element to improve user experience on
 mobile devices by using the native select of the platform.
@@ -240,6 +240,70 @@ Full-width fields span the full width of a parent:
   }}
 </Playground>
 
+## Grouping Related Options
+
+For a large amount of options you can group related items together by nesting
+them (implements the `optgroup` HTML element).
+
+<Playground>
+  {() => {
+    const [crop, setCrop] = React.useState('apple');
+    const options = [
+      {
+        label: 'Fruits',
+        options: [
+          {
+            label: 'Apple',
+            value: 'apple',
+          },
+          {
+            label: 'Banana',
+            value: 'banana',
+          },
+          {
+            label: 'Grapefruit',
+            value: 'grapefruit',
+          },
+        ],
+      },
+      {
+        label: 'Vegetables',
+        options: [
+          {
+            label: 'Beetroot',
+            value: 'beetroot',
+          },
+          {
+            label: 'Carrot',
+            value: 'carrot',
+          },
+          {
+            label: 'Tomato',
+            value: 'tomato',
+          },
+        ],
+      },
+    ];
+    return (
+      <>
+        <SelectField
+          label="Your favourite crop"
+          onChange={(e) => setCrop(e.target.value)}
+          options={options}
+          value={crop}
+        />
+        <SelectField
+          label="Your favourite crop"
+          onChange={(e) => setCrop(e.target.value)}
+          options={options}
+          value={crop}
+          variant="filled"
+        />
+      </>
+    );
+  }}
+</Playground>
+
 ## Invisible Label
 
 While it may be acceptable for login screens with just a few fields or for other
@@ -594,12 +658,22 @@ It's possible to disable just some options or the whole input.
   }}
 </Playground>
 
-## API
+## 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.
+
+👉 Refer to the MDN reference for the full list of supported attributes of the
+[select] element.
 
-In addition to the options below, you can specify [React synthetic events] or
-any custom HTML attributes that do not interfere with the API, and they will be
-passed to the `<select>` HTML element. This enables making the component
-interactive and helps improve its accessibility.
+## Forwarding ref
+
+If you provide [ref], it is forwarded to the native HTML `<select>` element.
+
+## API
 
 <Props table of={SelectField} />
 
@@ -615,3 +689,5 @@ options. On top of that, the following options are available for SelectField.
 | `--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
+[ref]: https://reactjs.org/docs/refs-and-the-dom.html