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

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

@@ -9,18 +9,20 @@ route: /components/scroll-view
 ScrollView makes long content scrollable.
 
 👉 Please note that HTML is rendered even when no children are provided.
-This is needed to allow the autoscroll feature to work.
+This is needed to allow the auto-scroll feature to work.
 
 import {
   Playground,
   Props,
 } from 'docz'
 import { Placeholder } from '../../../docs/_components/Placeholder/Placeholder'
-import Button from '../Button'
-import Radio from '../Radio'
-import { Toolbar } from '../Toolbar/Toolbar'
-import { ToolbarItem } from '../Toolbar/ToolbarItem'
-import { ScrollView } from './ScrollView'
+import {
+  Button,
+  Radio,
+  Toolbar,
+  ToolbarItem,
+  ScrollView,
+} from '../..'
 
 ## Basic Usage
 
@@ -89,9 +91,9 @@ See [API](#api) for all available options.
   to restrict the height of its parent to activate scrolling.
 
 - While arrow controls are optional in the vertical mode, you should always
-  **enable arrows in the horizontal mode when scrollbar is disabled.** Because
-  if you don't, users without horizontal-scrolling-enabled devices (like an
-  old-school mouse) might not be able to access your content.
+  **enable arrows in the horizontal mode when the scrollbar is disabled.**
+  Because if you don't, users without horizontal-scrolling-enabled devices
+  (like an old-school mouse) might not be able to access your content.
 
 - For dynamic content such as chat window or console output, consider using the
   **auto-scroll feature**. This will ensure the newest content is always
@@ -101,13 +103,13 @@ See [API](#api) for all available options.
   area in your app scrollable based on viewport size, please use custom CSS
   with media queries instead.
 
-- ScrollView only supports **scrolling in single direction at a time.** It crops
-  content that could possibly overflow in the other direction because additional
-  scrollbars would be unreachable under scrolling shadows. If you need your
-  content to be ready for bi-directional scrolling, either consider using just
-  `overflow: auto` instead of ScrollView, or make your content scrollable before
-  putting it into ScrollView and make sure its scrollbars don't collide with
-  scrolling shadows.
+- ScrollView only supports **scrolling in a single direction at a time.** It
+  crops content that would possibly overflow in the other direction because
+  additional scrollbars would be unreachable under scrolling shadows. If you
+  need your content to be ready for bi-directional scrolling, either consider
+  using just `overflow: auto` instead of ScrollView, or make your content
+  scrollable before putting it into ScrollView and make sure its scrollbars
+  don't collide with scrolling shadows.
 
 ## Arrows
 
@@ -168,7 +170,7 @@ horizontal content and you need to make sure it remains accessible on all
 viewport sizes.
 
 <Playground>
-  <ScrollView direction="horizontal">
+  <ScrollView direction="horizontal" arrows>
     <Placeholder>
       <div style={{ whiteSpace: 'nowrap' }}>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
@@ -284,60 +286,20 @@ property defined because it detects changes of these keys.
 It's possible to entirely customize the arrow controls, including the scroll
 step, and the scrolling shadows.
 
-### Custom Arrows and Shadow Color
-
-You can pass any HTML element or even custom React component to be used as the
-arrow control.
-
-The color of arrows and scrolling shadows can be simply adjusted, too. While the
-`arrowsColor` accepts
-[color in any valid CSS format](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value),
-the `shadowColor` is broken down to individual color channels so we can easily
-derive the transparent version from the value without having to parse it.
+### Custom Arrows
 
-Furthermore, you can change the scroll step if you need to scroll by smaller or
-bigger portions.
+You can pass any HTML element or even a custom React component to be used as the
+arrow control. Furthermore, you can change the scroll step if you need to scroll
+by smaller or bigger portions.
 
 <Playground>
   <ScrollView
     arrows
-    arrowsColor="white"
     arrowsScrollStep={300}
-    customNextArrow={(
-      <span
-        style={{
-          fontSize: '1.5rem',
-          fontWeight: 'bold',
-          position: 'relative',
-          textShadow: '0 0 0.4em black',
-          top: '-0.05em',
-        }}
-      >
-        →
-      </span>
-    )}
-    customPrevArrow={(
-      <span
-        style={{
-          fontSize: '1.5rem',
-          fontWeight: 'bold',
-          position: 'relative',
-          textShadow: '0 0 0.4em black',
-          top: '-0.05em',
-        }}
-      >
-        ←
-      </span>
-    )}
     direction="horizontal"
+    nextArrowElement={(<span class="typography-size-3">➡️</span>)}
+    prevArrowElement={(<span class="typography-size-3">⬅️</span>)}
     scrollbar={false}
-    shadowColor={{
-      alpha: 0.75,
-      blue: 0,
-      green: 0,
-      red: 0,
-    }}
-    shadowSize="5rem"
   >
     <Placeholder>
       <div style={{ whiteSpace: 'nowrap' }}>
@@ -352,36 +314,34 @@ bigger portions.
   </ScrollView>
 </Playground>
 
-### Custom Scrolling Shadows
+### Scrolling Shadows
 
-Aside from setting a custom shadow color and size, you can entirely customize
-the scrolling shadows with `background` or `box-shadow` CSS properties.
-
-The following example demonstrates exactly the same custom scrolling shadows as
-we use in the [Modal](/components/modal#scrolling-long-content) component.
+You can customize the start and end scrolling shadows using `startShadow*` and
+`endShadow*` properties.
 
 <Playground>
   <Placeholder height="200px">
     <ScrollView
-      customStartShadowStyle={{
-        background: 'radial-gradient('
+      startShadowBackground={'radial-gradient('
           + 'farthest-side at center top, '
           + 'rgba(0, 0, 0, 0.15) 0%, '
           + 'rgba(0, 0, 0, 0.05) 60%, '
           + 'rgba(0, 0, 0, 0.02) 85%, '
           + 'rgba(0, 0, 0, 0) 100%'
-        + ')',
-      }}
-      customEndShadowStyle={{
-        background: 'radial-gradient('
+        + ')'
+      }
+      startShadowInitialOffset="-5px"
+      startShadowSize="40px"
+      endShadowBackground={'radial-gradient('
           + 'farthest-side at center bottom, '
           + 'rgba(0, 0, 0, 0.15) 0%, '
           + 'rgba(0, 0, 0, 0.05) 60%, '
           + 'rgba(0, 0, 0, 0.02) 85%, '
           + 'rgba(0, 0, 0, 0) 100%'
-        + ')',
-      }}
-      shadowSize="40px"
+        + ')'
+      }
+      endShadowInitialOffset="-5px"
+      endShadowSize="40px"
     >
       <div>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
@@ -428,13 +388,115 @@ we use in the [Modal](/components/modal#scrolling-long-content) component.
   </Placeholder>
 </Playground>
 
+#### Linear Gradients
+
+For easier CSS definition of [linear gradients] for both vertical and horizontal
+directions at the same time, there are `--rui-local-start-shadow-direction` and
+`--rui-local-end-shadow-direction` custom properties that can be used inside
+`startShadowBackground` and `endShadowBackground` definitions. The value of the
+custom properties then reacts to the `direction` option:
+
+| Custom property                      | Vertical direction | Horizontal direction |
+|--------------------------------------|--------------------|----------------------|
+| `--rui-local-start-shadow-direction` | `to bottom`        | `to right`           |
+| `--rui-local-end-shadow-direction`   | `to top`           | `to left`            |
+
+This is useful if you want to create a single definition of linear gradients for
+scrolling shadows in both directions via
+[global props](/customize/global-props).
+
+<Playground>
+  {() => {
+    const START_SHADOW_BACKGROUND = `linear-gradient(
+        var(--rui-local-start-shadow-direction),
+        rgba(0 0 0 / 0.5),
+        rgba(0 0 0 / 0)
+      )`;
+    const END_SHADOW_BACKGROUND = `linear-gradient(
+        var(--rui-local-end-shadow-direction),
+        rgba(0 0 0 / 0.5),
+        rgba(0 0 0 / 0)
+      )`
+    const [direction, setDirection] = React.useState('vertical');
+    return(
+      <>
+        <Radio
+          label="Direction:"
+          onChange={(e) => setDirection(e.target.value)}
+          options={[
+            {
+              label: 'Vertical',
+              value: 'vertical',
+            },
+            {
+              label: 'Horizontal',
+              value: 'horizontal',
+            },
+          ]}
+          value={direction}
+        />
+        <Placeholder height="200px">
+          <ScrollView
+            direction={direction}
+            endShadowBackground={END_SHADOW_BACKGROUND}
+            startShadowBackground={START_SHADOW_BACKGROUND}
+          >
+            <div
+              style={{
+                width: (direction === 'horizontal' ? '3000px' : 'auto'),
+              }}
+            >
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
+              commodo ligula eget dolor. Aenean massa. Cum sociis natoque
+              penatibus et magnis dis parturient montes, nascetur ridiculus mus.
+              Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
+              sem. Nulla consequat massa quis enim. Donec pede justo, fringilla
+              vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut,
+              imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede
+              mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum
+              semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
+              porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
+              ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
+              viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
+              imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
+              ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus,
+              tellus eget condimentum rhoncus, sem quam semper libero, sit amet
+              adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus
+              pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
+              tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam
+              quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis
+              leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis
+              magna. Sed consequat, leo eget bibendum sodales, augue velit
+              cursus nunc. Aenean massa. Cum sociis natoque penatibus et magnis
+              dis parturient montes, nascetur ridiculus mus. Donec quam felis,
+              ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat
+              massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
+              vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a,
+              venenatis vitae, justo. Nullam dictum felis eu pede mollis
+              pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper
+              nisi. Aenean vulputate eleifend tellus. Aenean leo ligula,
+              porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
+              ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus
+              viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean
+              imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper
+              ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus,
+              tellus eget condimentum rhoncus, sem quam semper libero, sit amet
+              adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus
+              pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt
+              tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam
+              quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis
+              leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis
+              magna. Sed consequat, leo eget bibendum sodales, augue velit
+              cursus nunc.
+            </div>
+          </ScrollView>
+        </Placeholder>
+      </>
+    )}}
+</Playground>
+
 ## API
 
 <Props table of={ScrollView} />
 
-## Theming
-
-| Custom Property                                      | Description                                                  |
-|------------------------------------------------------|--------------------------------------------------------------|
-| `--rui-ScrollView__arrow__initial-offset`            | Initial offset of scrolling arrows (transitioned)            |
-| `--rui-ScrollView__shadow__initial-offset`           | Initial offset of scrolling shadows (transitioned)           |
+[linear gradients]: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient

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

@@ -24,20 +24,26 @@ const EDGE_DETECTION_INACCURACY_PX = 1;
 export const ScrollView = (props) => {
   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,
   } = props;
 
   const { translations } = useContext(RUIContext);
@@ -84,7 +90,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 +162,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;
@@ -210,31 +179,39 @@ 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.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 +220,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 +237,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>
@@ -274,25 +251,26 @@ export const ScrollView = (props) => {
 
 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 +278,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 +298,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 +325,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');