@carbon/ibm-products 2.60.0 → 2.61.0-rc.0

package/es/components/NotificationsPanel/NotificationsPanel.d.ts

@@ -6,6 +6,7 @@
  */
 import { Link } from '@carbon/react';
 import React, { RefObject } from 'react';
+export type Themes = 'light' | 'dark';
 interface Link {
     url: string;
     text: string;
@@ -61,6 +62,10 @@ export interface NotificationsPanelProps {
      * Sets the `hours ago` label text
      */
     hoursAgoText?: (value: number) => string;
+    /**
+     * Determines the theme of the empty state's illustration.
+     */
+    illustrationTheme: Themes;
     /**
      * Sets the `minute ago` label text
      */

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -22,19 +22,17 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { prepareProps } from '../../global/js/utils/props-helper.js';
-import { timeAgo } from './utils.js';
 import { usePrefersReducedMotion } from '../../global/js/hooks/usePrefersReducedMotion.js';
+import { timeAgo } from './utils.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
-import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 var _Close;
-var _excluded = ["className", "data", "daysAgoText", "dismissAllLabel", "dismissSingleNotificationIconDescription", "doNotDisturbDefaultToggled", "doNotDisturbLabel", "emptyStateLabel", "hourAgoText", "hoursAgoText", "minuteAgoText", "minutesAgoText", "monthAgoText", "monthsAgoText", "nowText", "onClickOutside", "onDismissAllNotifications", "onDismissSingleNotification", "onDoNotDisturbChange", "onSettingsClick", "onViewAllClick", "open", "previousLabel", "readLessLabel", "readMoreLabel", "secondsAgoText", "settingsIconDescription", "title", "todayLabel", "viewAllLabel", "yearAgoText", "yearsAgoText", "yesterdayAtText", "yesterdayLabel", "triggerButtonRef"];
+var _excluded = ["className", "data", "daysAgoText", "dismissAllLabel", "dismissSingleNotificationIconDescription", "doNotDisturbDefaultToggled", "doNotDisturbLabel", "emptyStateLabel", "hourAgoText", "hoursAgoText", "illustrationTheme", "minuteAgoText", "minutesAgoText", "monthAgoText", "monthsAgoText", "nowText", "onClickOutside", "onDismissAllNotifications", "onDismissSingleNotification", "onDoNotDisturbChange", "onSettingsClick", "onViewAllClick", "open", "previousLabel", "readLessLabel", "readMoreLabel", "secondsAgoText", "settingsIconDescription", "title", "todayLabel", "viewAllLabel", "yearAgoText", "yearsAgoText", "yesterdayAtText", "yesterdayLabel", "triggerButtonRef"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var componentName = 'NotificationsPanel';
 var blockClass = "".concat(pkg.prefix, "--notifications-panel");
-
 // Default values for props
 var defaults = {
   daysAgoText: function daysAgoText(value) {
@@ -50,6 +48,7 @@ var defaults = {
   hoursAgoText: function hoursAgoText(value) {
     return "".concat(value, " hours ago");
   },
+  illustrationTheme: 'light',
   minuteAgoText: function minuteAgoText(value) {
     return "".concat(value, " minute ago");
   },
@@ -106,6 +105,8 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     hourAgoText = _ref$hourAgoText === undefined ? defaults.hourAgoText : _ref$hourAgoText,
     _ref$hoursAgoText = _ref.hoursAgoText,
     hoursAgoText = _ref$hoursAgoText === undefined ? defaults.hoursAgoText : _ref$hoursAgoText,
+    _ref$illustrationThem = _ref.illustrationTheme,
+    illustrationTheme = _ref$illustrationThem === undefined ? defaults.illustrationTheme : _ref$illustrationThem,
     _ref$minuteAgoText = _ref.minuteAgoText,
     minuteAgoText = _ref$minuteAgoText === undefined ? defaults.minuteAgoText : _ref$minuteAgoText,
     _ref$minutesAgoText = _ref.minutesAgoText,
@@ -363,17 +364,6 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     onDismissSingleNotification(notification);
   };
   var mainSectionClassName = cx(["".concat(blockClass, "__main-section"), _defineProperty({}, "".concat(blockClass, "__main-section-empty"), allNotifications && !allNotifications.length)]);
-  useIsomorphicEffect(function () {
-    // setTimeout ensures that this gets run
-    var timeout = setTimeout(function () {
-      if (notificationPanelRef.current && !reducedMotion) {
-        notificationPanelRef.current.style.animation = open ? 'fade-in 250ms' : 'fade-out forwards 250ms';
-      }
-    }, 0);
-    return function () {
-      return clearTimeout(timeout);
-    };
-  }, [open, reducedMotion]);
   return shouldRender ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: "".concat(carbonPrefix, "--visually-hidden"),
@@ -385,7 +375,7 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     tabIndex: 0
   }, rest, {
     id: blockClass,
-    className: cx(blockClass, className, "".concat(blockClass, "__container")),
+    className: cx(blockClass, className, "".concat(blockClass, "__container"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__entrance"), open), "".concat(blockClass, "__exit"), !open)),
     onAnimationEnd: onAnimationEnd,
     ref: ref || notificationPanelRef
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
@@ -428,7 +418,7 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
   }, previousLabel), previousNotifications.map(function (notification, index) {
     return renderNotification('previous', notification, index);
   })) : null, !allNotifications.length && /*#__PURE__*/React__default.createElement(NotificationsEmptyState, {
-    illustrationTheme: "dark",
+    illustrationTheme: illustrationTheme,
     title: "",
     subtitle: emptyStateLabel
   })), onViewAllClick && onSettingsClick && allNotifications && allNotifications.length > 0 && /*#__PURE__*/React__default.createElement("div", {
@@ -521,6 +511,10 @@ NotificationsPanel.propTypes = {
    * Sets the `hours ago` label text
    */
   hoursAgoText: PropTypes.func,
+  /**
+   * Determines the theme of the empty state's illustration.
+   */
+  illustrationTheme: PropTypes.oneOf(['light', 'dark']),
   /**
    * Sets the `minute ago` label text
    */

package/es/components/OptionsTile/OptionsTile.d.ts

@@ -37,8 +37,7 @@ export interface OptionsTileProps {
      */
     lockedText?: string;
     /**
-     * Provide a function which will be called each time the user
-     * toggles the open state of the OptionsTile.
+     * A handler for managing the controlled state of open prop. If not passed the open prop will not be honored and an uncontrolled state will be used.
      */
     onChange?: (value: boolean) => void;
     /**
@@ -47,7 +46,7 @@ export interface OptionsTileProps {
      */
     onToggle?: (value: boolean) => void;
     /**
-     * Whether the OptionsTile is in open state.
+     * For controlled usage of the tile open state. This prop only works when an onChange prop is also passed, otherwise an uncontrolled state is used.
      */
     open?: boolean;
     /**

package/es/components/OptionsTile/OptionsTile.js

@@ -26,64 +26,43 @@ var componentName = 'OptionsTile';
 var defaults = {
   size: 'lg'
 };
-var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    enabled = _ref.enabled,
-    invalid = _ref.invalid,
-    invalidText = _ref.invalidText,
-    locked = _ref.locked,
-    lockedText = _ref.lockedText,
-    _onChange = _ref.onChange,
-    onToggle = _ref.onToggle,
-    open = _ref.open,
-    _ref$size = _ref.size,
-    size = _ref$size === undefined ? defaults.size : _ref$size,
-    summary = _ref.summary,
-    title = _ref.title,
-    userDefinedTitleId = _ref.titleId,
-    warn = _ref.warn,
-    warnText = _ref.warnText,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(open),
+var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
+  var children = props.children,
+    className = props.className,
+    enabled = props.enabled,
+    invalid = props.invalid,
+    invalidText = props.invalidText,
+    locked = props.locked,
+    lockedText = props.lockedText,
+    onChange = props.onChange,
+    onToggle = props.onToggle,
+    userOpen = props.open,
+    _props$size = props.size,
+    size = _props$size === undefined ? defaults.size : _props$size,
+    summary = props.summary,
+    title = props.title,
+    userDefinedTitleId = props.titleId,
+    warn = props.warn,
+    warnText = props.warnText,
+    rest = _objectWithoutProperties(props, _excluded);
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    prevIsOpen = _useState2[0],
-    setPrevIsOpen = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    closing = _useState4[0],
-    setClosing = _useState4[1];
-  var _useControllableState = useControllableState({
-      defaultValue: open || null,
-      name: 'OptionsTile',
-      onChange: function onChange(value) {
-        return _onChange === null || _onChange === undefined ? undefined : _onChange(value);
-      },
-      value: open
-    }),
+    closing = _useState2[0],
+    setClosing = _useState2[1];
+  var _useControllableState = useControllableState(userOpen !== null && userOpen !== undefined ? userOpen : false, onChange),
     _useControllableState2 = _slicedToArray(_useControllableState, 2),
-    isOpen = _useControllableState2[0],
-    setIsOpen = _useControllableState2[1];
+    open = _useControllableState2[0],
+    setOpen = _useControllableState2[1];
   var detailsRef = useRef(null);
   var contentRef = useRef(null);
-  var id = uuidv4();
-  var titleId = userDefinedTitleId !== null && userDefinedTitleId !== undefined ? userDefinedTitleId : "".concat(id, "-title");
+  var titleId = userDefinedTitleId !== null && userDefinedTitleId !== undefined ? userDefinedTitleId : "".concat(uuidv4(), "-title");
   var isExpandable = children !== undefined;
-  var isInvalid = invalid;
-  var isWarn = !isInvalid && warn;
-  var isLocked = !isInvalid && !isWarn && locked;
+  var isWarn = !invalid && warn;
+  var isLocked = !invalid && !isWarn && locked;
   var shouldReduceMotion = usePrefersReducedMotion();
-  if (open !== prevIsOpen) {
-    if (isOpen && !open) {
-      collapse();
-    } else if (!isOpen && open) {
-      expand();
-    }
-    setPrevIsOpen(open);
-  }
-  function expand() {
+  var expand = function expand() {
     if (detailsRef.current && contentRef.current && !shouldReduceMotion) {
-      setIsOpen(true);
+      setOpen(true);
       detailsRef.current.open = true;
       var _getComputedStyle = getComputedStyle(contentRef.current),
         paddingTop = _getComputedStyle.paddingTop,
@@ -106,11 +85,10 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         easing: carbonMotion.easings.entrance.productive
       });
     } else {
-      // in case the refs are not set or the user prefers reduced motion, skip the animation
-      setIsOpen(true);
+      setOpen(true);
     }
-  }
-  function collapse() {
+  };
+  var collapse = function collapse() {
     if (contentRef.current && !shouldReduceMotion) {
       setClosing(true);
       var _getComputedStyle2 = getComputedStyle(contentRef.current),
@@ -133,76 +111,57 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         easing: carbonMotion.easings.entrance.productive
       });
       var callback = function callback() {
-        setIsOpen(false);
+        setOpen(false);
         setClosing(false);
       };
-
-      //This is to fix the flicking issue while collapsing.
-      //root cause : after the animation is finished , isOpen is still true until onFinish callback is triggered.For that minute duration , collapsed content will again show.
-      // To avoid this , isOpen is set to false after the 90% of animation duration.
       setTimeout(function () {
         callback();
       }, animationDuration * 0.9);
-
-      // animation.onfinish = callback;
       animation.oncancel = callback;
     } else {
-      // in case the ref is not set or the user prefers reduced motion, skip the animation
-      setIsOpen(false);
+      setOpen(false);
     }
-  }
-  function toggle(e) {
-    e.preventDefault();
-    if (isOpen) {
+  };
+  var toggle = function toggle(evt) {
+    evt.preventDefault();
+    if (open) {
       collapse();
     } else {
       expand();
     }
-  }
-  function renderTitle() {
+  };
+  var renderTitle = function renderTitle() {
     var Icon = null;
     var text = summary;
-    var summaryClasses = ["".concat(blockClass, "__summary")];
-    if (closing) {
-      summaryClasses.push("".concat(blockClass, "__summary--closing"));
-    }
-    if (isOpen) {
-      summaryClasses.push("".concat(blockClass, "__summary--open"));
-    }
     if (invalid) {
       Icon = WarningFilled;
       text = invalidText;
-      summaryClasses.push("".concat(blockClass, "__summary--invalid"));
     } else if (warn) {
       Icon = WarningAltFilled;
       text = warnText;
-      summaryClasses.push("".concat(blockClass, "__summary--warn"));
     } else if (locked) {
       Icon = Locked;
-      summaryClasses.push("".concat(blockClass, "__summary--locked"));
       if (!text) {
         text = lockedText;
       }
     }
     var hasValidationState = invalid || warn || locked;
     var summaryHidden = !hasValidationState && enabled === false;
-    if (summaryHidden) {
-      summaryClasses.push("".concat(blockClass, "__summary--hidden"));
-    }
+    var summaryClasses = cx("".concat(blockClass, "__summary"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__summary--closing"), closing), "".concat(blockClass, "__summary--open"), open), "".concat(blockClass, "__summary--invalid"), invalid), "".concat(blockClass, "__summary--warn"), warn), "".concat(blockClass, "__summary--locked"), locked), "".concat(blockClass, "__summary--hidden"), summaryHidden));
     return /*#__PURE__*/React__default.createElement("div", {
       className: "".concat(blockClass, "__heading")
     }, /*#__PURE__*/React__default.createElement("h6", {
       id: titleId,
       className: "".concat(blockClass, "__title")
     }, title), text && /*#__PURE__*/React__default.createElement("span", {
-      className: cx(summaryClasses),
+      className: summaryClasses,
       "aria-hidden": summaryHidden
     }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
       size: 16
     }), /*#__PURE__*/React__default.createElement("span", {
       className: "".concat(blockClass, "__summary-text")
     }, text)));
-  }
+  };
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className, "".concat(blockClass, "--").concat(size), _defineProperty({}, "".concat(blockClass, "--closing"), closing)),
     ref: ref
@@ -218,20 +177,14 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     size: "sm",
     disabled: isLocked
   })), isExpandable ? /*#__PURE__*/React__default.createElement("details", {
-    open: isOpen,
+    open: open,
     ref: detailsRef
-  },
-  /*#__PURE__*/
-  /* summary should not be considered non-interactive
-   * https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/656
-   * https://github.com/A11yance/axobject-query/issues/319
-   */
-  React__default.createElement("summary", {
+  }, /*#__PURE__*/React__default.createElement("summary", {
     className: "".concat(blockClass, "__header"),
     onClick: toggle
   }, /*#__PURE__*/React__default.createElement(ChevronDown, {
     size: 16,
-    className: cx("".concat(blockClass, "__chevron"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__chevron--open"), isOpen), "".concat(blockClass, "__chevron--closing"), closing))
+    className: cx("".concat(blockClass, "__chevron"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__chevron--open"), open), "".concat(blockClass, "__chevron--closing"), closing))
   }), renderTitle()), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__content"),
     ref: contentRef
@@ -286,8 +239,7 @@ OptionsTile.propTypes = {
    */
   lockedText: PropTypes.string,
   /**
-   * Provide a function which will be called each time the user
-   * toggles the open state of the OptionsTile.
+   * A handler for managing the controlled state of open prop. If not passed the open prop will not be honored and an uncontrolled state will be used.
    */
   onChange: PropTypes.func,
   /**
@@ -296,7 +248,7 @@ OptionsTile.propTypes = {
    */
   onToggle: PropTypes.func,
   /**
-   * Whether the OptionsTile is in open state.
+   * For controlled usage of the tile open state. This prop only works when an onChange prop is also passed, otherwise an uncontrolled state is used.
    */
   open: PropTypes.bool,
   /**

package/es/components/PageHeader/PageHeader.js

@@ -19,7 +19,7 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
-import { checkHeightOverflow } from '../../global/js/utils/checkForOverflow.js';
+import { useOverflowStringHeight } from '../../global/js/hooks/useOverflowString.js';
 import { useNearestScroll } from '../../global/js/hooks/useWindowScroll.js';
 import { useWindowResize } from '../../global/js/hooks/useWindowResize.js';
 import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
@@ -173,21 +173,23 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 
   // handlers
   var handleActionBarWidthChange = function handleActionBarWidthChange(_ref2) {
-    var _overflowMenuRef$curr;
     var minWidth = _ref2.minWidth,
       maxWidth = _ref2.maxWidth;
-    var overflowMenuWidth = 0;
-    var overflowMenu = overflowMenuRef === null || overflowMenuRef === undefined || (_overflowMenuRef$curr = overflowMenuRef.current) === null || _overflowMenuRef$curr === undefined ? undefined : _overflowMenuRef$curr.querySelector(".".concat(prefix, "--overflow-menu"));
-    if (overflowMenu) {
-      overflowMenuWidth = overflowMenu.offsetWidth;
-    }
+    if (minWidth !== actionBarMinWidth || maxWidth !== actionBarMaxWidth) {
+      var _overflowMenuRef$curr;
+      var overflowMenuWidth = 0;
+      var overflowMenu = overflowMenuRef === null || overflowMenuRef === undefined || (_overflowMenuRef$curr = overflowMenuRef.current) === null || _overflowMenuRef$curr === undefined ? undefined : _overflowMenuRef$curr.querySelector(".".concat(prefix, "--overflow-menu"));
+      if (overflowMenu) {
+        overflowMenuWidth = overflowMenu.offsetWidth;
+      }
 
-    /* don't know how to test resize */
-    /* istanbul ignore next */
-    setActionBarMaxWidth(maxWidth + overflowMenuWidth);
-    /* don't know how to test resize */
-    /* istanbul ignore next */
-    setActionBarMinWidth(minWidth);
+      /* don't know how to test resize */
+      /* istanbul ignore next */
+      setActionBarMaxWidth(maxWidth + overflowMenuWidth);
+      /* don't know how to test resize */
+      /* istanbul ignore next */
+      setActionBarMinWidth(minWidth);
+    }
   };
   var handlePageActionWidthChange = function handlePageActionWidthChange(_ref3) {
     var minWidth = _ref3.minWidth,
@@ -373,7 +375,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     });
   }, [headerRef, pageHeaderStyles]);
   var subtitleRef = useRef(null);
-  var isOverflowing = checkHeightOverflow(subtitleRef.current);
+  var isOverflowing = useOverflowStringHeight(subtitleRef);
   var subtitleContent = /*#__PURE__*/React__default.createElement("span", {
     ref: subtitleRef,
     className: "".concat(blockClass, "__subtitle-text")

package/es/components/PageHeader/PageHeaderTitle.js

@@ -11,7 +11,7 @@ import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { SkeletonText, DefinitionTooltip } from '@carbon/react';
 import { EditInPlace } from '../EditInPlace/EditInPlace.js';
-import { checkWidthOverflow } from '../../global/js/utils/checkForOverflow.js';
+import { useOverflowStringWidth } from '../../global/js/hooks/useOverflowString.js';
 
 var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "cancelDescription", "saveDescription", "tooltipAlignment"];
 
@@ -45,7 +45,7 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
   var titleText;
   var isEditable = !!onSave;
   var titleRef = useRef();
-  var isEllipsisApplied = checkWidthOverflow(titleRef.current);
+  var isEllipsisApplied = useOverflowStringWidth(titleRef);
   if (text || !content) {
     if (text === undefined && typeof title === 'string') {
       text = title;

package/es/components/ScrollGradient/ScrollGradient.js

@@ -6,13 +6,12 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState, useCallback, useEffect } from 'react';
+import React__default, { useRef, useState, useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { carbon, pkg } from '../../settings.js';
-import { throttle } from 'lodash';
-import { useIsOverflow, ScrollStates, getScrollState, ScrollDirection } from './constants.js';
+import { useIsOverflow, ScrollStates } from './constants.js';
 import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 var _excluded = ["children", "className", "color", "onScroll", "scrollElementClassName", "getScrollElementRef", "hideStartGradient"];
@@ -43,6 +42,10 @@ var ScrollGradient = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _ref$hideStartGradien = _ref.hideStartGradient,
     hideStartGradient = _ref$hideStartGradien === undefined ? defaults.hideStartGradient : _ref$hideStartGradien,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var intersectionStartRef = useRef();
+  var intersectionEndRef = useRef();
+  var intersectionLeftRef = useRef();
+  var intersectionRightRef = useRef();
   var scrollContainer = useRef(undefined);
   var contentChildrenContainer = useRef(undefined);
   var _useIsOverflow = useIsOverflow(scrollContainer),
@@ -51,13 +54,11 @@ var ScrollGradient = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   var gradientRight = yScrollable && scrollContainer.current && contentChildrenContainer.current ? scrollContainer.current.offsetWidth - contentChildrenContainer.current.offsetWidth : 0;
   var gradientBottom = xScrollable && scrollContainer.current && contentChildrenContainer.current ? scrollContainer.current.offsetHeight - contentChildrenContainer.current.offsetHeight : 0;
   var _useState = useState(ScrollStates.NONE),
-    _useState2 = _slicedToArray(_useState, 2),
-    verticalPosition = _useState2[0],
-    setVerticalPosition = _useState2[1];
+    _useState2 = _slicedToArray(_useState, 1),
+    verticalPosition = _useState2[0];
   var _useState3 = useState(ScrollStates.NONE),
-    _useState4 = _slicedToArray(_useState3, 2),
-    horizontalPosition = _useState4[0],
-    setHorizontalPosition = _useState4[1];
+    _useState4 = _slicedToArray(_useState3, 1),
+    horizontalPosition = _useState4[0];
   var startVerticalRef = useRef(null);
   var startHorizontalRef = useRef(null);
   var endVerticalRef = useRef(null);
@@ -78,36 +79,84 @@ var ScrollGradient = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     endHorizontalRef.current.style.bottom = gradientBottom;
     endHorizontalRef.current.style.backgroundImage = "linear-gradient(-90deg, ".concat(color, " 10%, transparent)");
   }, [color, gradientRight, gradientBottom]);
-  var updateScrollState = throttle(function () {
-    var updatedVerticalVal = getScrollState(scrollContainer.current, ScrollDirection.Y);
-    var updatedHorizontalVal = getScrollState(scrollContainer.current, ScrollDirection.X);
-    setVerticalPosition(updatedVerticalVal);
-    setHorizontalPosition(updatedHorizontalVal);
-  }, 150);
-  var scrollHandler = useCallback(function (event) {
-    onScroll(event);
-    updateScrollState();
-  }, [onScroll, updateScrollState]);
+  var setGradientOnIntersection = function setGradientOnIntersection(entry, gradientRef) {
+    if (gradientRef.current) {
+      if (entry.isIntersecting) {
+        gradientRef.current.style.opacity = 0;
+        gradientRef.current.style.display = 'none';
+        gradientRef === null || gradientRef === undefined || gradientRef.current.setAttribute('aria-hidden', false);
+      } else {
+        gradientRef.current.style.opacity = 1;
+        gradientRef.current.style.display = 'block';
+        gradientRef === null || gradientRef === undefined || gradientRef.current.setAttribute('aria-hidden', true);
+      }
+    }
+  };
+  useEffect(function () {
+    var observer = new IntersectionObserver(function (entries) {
+      entries.forEach(function (entry) {
+        if (entry.target.hasAttribute('data-start-vertical')) {
+          setGradientOnIntersection(entry, startVerticalRef);
+        }
+        if (entry.target.hasAttribute('data-end-vertical')) {
+          setGradientOnIntersection(entry, endVerticalRef);
+        }
+        if (entry.target.hasAttribute('data-start-horizontal')) {
+          setGradientOnIntersection(entry, startHorizontalRef);
+        }
+        if (entry.target.hasAttribute('data-end-horizontal')) {
+          setGradientOnIntersection(entry, endHorizontalRef);
+        }
+      });
+    }, {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.1
+    });
+    observer.observe(intersectionStartRef.current);
+    observer.observe(intersectionEndRef.current);
+    observer.observe(intersectionLeftRef.current);
+    observer.observe(intersectionRightRef.current);
+    var startVerticalRefValue = intersectionStartRef.current;
+    var endVerticalRefValue = intersectionEndRef.current;
+    var startHorizontalRefValue = intersectionLeftRef.current;
+    var endHorizontalRefValue = intersectionRightRef.current;
+    return function () {
+      observer.unobserve(startVerticalRefValue);
+      observer.unobserve(endVerticalRefValue);
+      observer.unobserve(startHorizontalRefValue);
+      observer.unobserve(endHorizontalRefValue);
+    };
+  }, []);
   var setRefs = function setRefs(element) {
     scrollContainer.current = element;
     getScrollElementRef(element);
   };
-  useEffect(function () {
-    scrollHandler();
-  }, [scrollHandler]);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, "".concat(blockClass, "--x-").concat(horizontalPosition.toLowerCase()), "".concat(blockClass, "--y-").concat(verticalPosition.toLowerCase()), _defineProperty(_defineProperty({}, "".concat(blockClass, "--x-scrollable"), xScrollable), "".concat(blockClass, "--y-scrollable"), yScrollable), className),
     ref: ref,
     role: "presentation"
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
-    onScroll: scrollHandler,
+    onScroll: onScroll,
     ref: setRefs,
     className: cx("".concat(blockClass, "__content"), scrollElementClassName),
     tabIndex: 0
-  }, /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("span", {
+    ref: intersectionStartRef,
+    "data-start-vertical": true
+  }), /*#__PURE__*/React__default.createElement("span", {
+    ref: intersectionLeftRef,
+    "data-start-horizontal": true
+  }), /*#__PURE__*/React__default.createElement("div", {
     ref: contentChildrenContainer,
     className: "".concat(blockClass, "__content-children")
-  }, children)), !hideStartGradient && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+  }, children), /*#__PURE__*/React__default.createElement("span", {
+    ref: intersectionEndRef,
+    "data-end-vertical": true
+  }), /*#__PURE__*/React__default.createElement("span", {
+    ref: intersectionRightRef,
+    "data-end-horizontal": true
+  })), !hideStartGradient && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     ref: startVerticalRef,
     className: "".concat(blockClass, "__start-vertical"),
     role: "presentation",

package/es/components/ScrollGradient/constants.d.ts

@@ -1,14 +1,9 @@
-export namespace ScrollDirection {
-    let X: string;
-    let Y: string;
-}
 export namespace ScrollStates {
     let NONE: string;
     let INITIAL: string;
     let STARTED: string;
     let END: string;
 }
-export function getScrollState(element: any, scrollDirection: any): string;
 export function useIsOverflow(ref: any): {
     xScrollable: undefined;
     yScrollable: undefined;