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

package/lib/components/FilterSummary/FilterSummary.js

@@ -18,7 +18,7 @@ var icons = require('@carbon/react/icons');
 var index = require('../../_virtual/index.js');
 var TagSet = require('../TagSet/TagSet.js');
 var cx = require('classnames');
-var debounce = require('lodash/debounce');
+var debounce = require('../../global/js/utils/debounce.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
@@ -121,7 +121,7 @@ var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         setMultiline(false);
       }
     };
-    var filterResize = debounce(handleFilterSummaryResize, 500);
+    var filterResize = debounce.debounce(handleFilterSummaryResize, 500);
     filterResize();
   }, [previousState === null || previousState === undefined ? undefined : previousState.multiline, multiline]);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, devtools.getDevtoolsProps(componentName), {

package/lib/components/InterstitialScreen/InterstitialScreen.js

@@ -15,8 +15,8 @@ var Carousel = require('../Carousel/Carousel.js');
 require('../Carousel/CarouselItem.js');
 var index = require('../../_virtual/index.js');
 var SteppedAnimatedMedia = require('../SteppedAnimatedMedia/SteppedAnimatedMedia.js');
-var lodash = require('lodash');
 var cx = require('classnames');
+var clamp = require('../../global/js/utils/clamp.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
@@ -139,13 +139,13 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef(function (props, ref)
     });
   };
   var handleClickPrev = function handleClickPrev() {
-    var targetStep = lodash.clamp(progStep - 1, progStepFloor, progStepCeil);
+    var targetStep = clamp.clamp(progStep - 1, progStepFloor, progStepCeil);
     scrollRef.current.scrollPrev();
     scrollBodyToTop();
     setProgStep(targetStep);
   };
   var handleClickNext = function handleClickNext() {
-    var targetStep = lodash.clamp(progStep + 1, progStepFloor, progStepCeil);
+    var targetStep = clamp.clamp(progStep + 1, progStepFloor, progStepCeil);
     scrollRef.current.scrollNext();
     scrollBodyToTop();
     setProgStep(targetStep);

package/lib/components/Nav/NavItem.js

@@ -16,7 +16,7 @@ var cx = require('classnames');
 var settings = require('../../settings.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var NavItemLink = require('./NavItemLink.js');
-var bucket9 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-9.js');
+var bucket10 = require('../../node_modules/@carbon/icons-react/es/generated/bucket-10.js');
 
 var _excluded = ["activeHref", "children", "className", "current", "disabled", "element", "href", "id", "label", "onClick", "tabIndex"];
 
@@ -95,7 +95,7 @@ exports.NavItem = function NavItem(_ref) {
     element: element,
     href: href,
     tabIndex: navItemTabIndex
-  }, rest, externalLinkProps), children, externalLink && /*#__PURE__*/React.createElement(bucket9.Launch, {
+  }, rest, externalLinkProps), children, externalLink && /*#__PURE__*/React.createElement(bucket10.Launch, {
     className: "".concat(blockClass, "__link--external__icon")
   })));
 };

package/lib/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/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -24,19 +24,17 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
-var utils = require('./utils.js');
 var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
+var utils = require('./utils.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useClickOutside = require('../../global/js/hooks/useClickOutside.js');
-var useIsomorphicEffect = require('../../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(settings.pkg.prefix, "--notifications-panel");
-
 // Default values for props
 var defaults = {
   daysAgoText: function daysAgoText(value) {
@@ -52,6 +50,7 @@ var defaults = {
   hoursAgoText: function hoursAgoText(value) {
     return "".concat(value, " hours ago");
   },
+  illustrationTheme: 'light',
   minuteAgoText: function minuteAgoText(value) {
     return "".concat(value, " minute ago");
   },
@@ -108,6 +107,8 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, 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,
@@ -365,17 +366,6 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     onDismissSingleNotification(notification);
   };
   var mainSectionClassName = cx(["".concat(blockClass, "__main-section"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__main-section-empty"), allNotifications && !allNotifications.length)]);
-  useIsomorphicEffect.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "".concat(carbonPrefix, "--visually-hidden"),
@@ -387,7 +377,7 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     tabIndex: 0
   }, rest, {
     id: blockClass,
-    className: cx(blockClass, className, "".concat(blockClass, "__container")),
+    className: cx(blockClass, className, "".concat(blockClass, "__container"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__entrance"), open), "".concat(blockClass, "__exit"), !open)),
     onAnimationEnd: onAnimationEnd,
     ref: ref || notificationPanelRef
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
@@ -430,7 +420,7 @@ exports.NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   }, previousLabel), previousNotifications.map(function (notification, index) {
     return renderNotification('previous', notification, index);
   })) : null, !allNotifications.length && /*#__PURE__*/React.createElement(NotificationsEmptyState.NotificationsEmptyState, {
-    illustrationTheme: "dark",
+    illustrationTheme: illustrationTheme,
     title: "",
     subtitle: emptyStateLabel
   })), onViewAllClick && onSettingsClick && allNotifications && allNotifications.length > 0 && /*#__PURE__*/React.createElement("div", {
@@ -523,6 +513,10 @@ exports.NotificationsPanel.propTypes = {
    * Sets the `hours ago` label text
    */
   hoursAgoText: index.default.func,
+  /**
+   * Determines the theme of the empty state's illustration.
+   */
+  illustrationTheme: index.default.oneOf(['light', 'dark']),
   /**
    * Sets the `minute ago` label text
    */

package/lib/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/lib/components/OptionsTile/OptionsTile.js

@@ -47,64 +47,43 @@ var componentName = 'OptionsTile';
 var defaults = {
   size: 'lg'
 };
-exports.OptionsTile = /*#__PURE__*/React.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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var _useState = React.useState(open),
+exports.OptionsTile = /*#__PURE__*/React.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 = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+  var _useState = React.useState(false),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    prevIsOpen = _useState2[0],
-    setPrevIsOpen = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    closing = _useState4[0],
-    setClosing = _useState4[1];
-  var _useControllableState = 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.useControllableState(userOpen !== null && userOpen !== undefined ? userOpen : false, onChange),
     _useControllableState2 = _rollupPluginBabelHelpers.slicedToArray(_useControllableState, 2),
-    isOpen = _useControllableState2[0],
-    setIsOpen = _useControllableState2[1];
+    open = _useControllableState2[0],
+    setOpen = _useControllableState2[1];
   var detailsRef = React.useRef(null);
   var contentRef = React.useRef(null);
-  var id = uuidv4.default();
-  var titleId = userDefinedTitleId !== null && userDefinedTitleId !== undefined ? userDefinedTitleId : "".concat(id, "-title");
+  var titleId = userDefinedTitleId !== null && userDefinedTitleId !== undefined ? userDefinedTitleId : "".concat(uuidv4.default(), "-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.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,
@@ -127,11 +106,10 @@ exports.OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         easing: carbonMotion__namespace.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),
@@ -154,76 +132,57 @@ exports.OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         easing: carbonMotion__namespace.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 = icons.WarningFilled;
       text = invalidText;
-      summaryClasses.push("".concat(blockClass, "__summary--invalid"));
     } else if (warn) {
       Icon = icons.WarningAltFilled;
       text = warnText;
-      summaryClasses.push("".concat(blockClass, "__summary--warn"));
     } else if (locked) {
       Icon = icons.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"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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.createElement("div", {
       className: "".concat(blockClass, "__heading")
     }, /*#__PURE__*/React.createElement("h6", {
       id: titleId,
       className: "".concat(blockClass, "__title")
     }, title), text && /*#__PURE__*/React.createElement("span", {
-      className: cx(summaryClasses),
+      className: summaryClasses,
       "aria-hidden": summaryHidden
     }, Icon && /*#__PURE__*/React.createElement(Icon, {
       size: 16
     }), /*#__PURE__*/React.createElement("span", {
       className: "".concat(blockClass, "__summary-text")
     }, text)));
-  }
+  };
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className, "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--closing"), closing)),
     ref: ref
@@ -239,20 +198,14 @@ exports.OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size: "sm",
     disabled: isLocked
   })), isExpandable ? /*#__PURE__*/React.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.createElement("summary", {
+  }, /*#__PURE__*/React.createElement("summary", {
     className: "".concat(blockClass, "__header"),
     onClick: toggle
   }, /*#__PURE__*/React.createElement(icons.ChevronDown, {
     size: 16,
-    className: cx("".concat(blockClass, "__chevron"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__chevron--open"), isOpen), "".concat(blockClass, "__chevron--closing"), closing))
+    className: cx("".concat(blockClass, "__chevron"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__chevron--open"), open), "".concat(blockClass, "__chevron--closing"), closing))
   }), renderTitle()), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__content"),
     ref: contentRef
@@ -307,8 +260,7 @@ exports.OptionsTile.propTypes = {
    */
   lockedText: index.default.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: index.default.func,
   /**
@@ -317,7 +269,7 @@ exports.OptionsTile.propTypes = {
    */
   onToggle: index.default.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: index.default.bool,
   /**

package/lib/components/PageHeader/PageHeader.js

@@ -21,7 +21,7 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
-var checkForOverflow = require('../../global/js/utils/checkForOverflow.js');
+var useOverflowString = require('../../global/js/hooks/useOverflowString.js');
 var useWindowScroll = require('../../global/js/hooks/useWindowScroll.js');
 var useWindowResize = require('../../global/js/hooks/useWindowResize.js');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
@@ -175,21 +175,23 @@ exports.PageHeader = /*#__PURE__*/React.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,
@@ -375,7 +377,7 @@ exports.PageHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     });
   }, [headerRef, pageHeaderStyles]);
   var subtitleRef = React.useRef(null);
-  var isOverflowing = checkForOverflow.checkHeightOverflow(subtitleRef.current);
+  var isOverflowing = useOverflowString.useOverflowStringHeight(subtitleRef);
   var subtitleContent = /*#__PURE__*/React.createElement("span", {
     ref: subtitleRef,
     className: "".concat(PageHeaderUtils.blockClass, "__subtitle-text")

package/lib/components/PageHeader/PageHeaderTitle.js

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

package/lib/components/ScrollGradient/ScrollGradient.js

@@ -13,7 +13,6 @@ var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
-var lodash = require('lodash');
 var constants = require('./constants.js');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
@@ -45,6 +44,10 @@ exports.ScrollGradient = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$hideStartGradien = _ref.hideStartGradient,
     hideStartGradient = _ref$hideStartGradien === undefined ? defaults.hideStartGradient : _ref$hideStartGradien,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var intersectionStartRef = React.useRef();
+  var intersectionEndRef = React.useRef();
+  var intersectionLeftRef = React.useRef();
+  var intersectionRightRef = React.useRef();
   var scrollContainer = React.useRef(undefined);
   var contentChildrenContainer = React.useRef(undefined);
   var _useIsOverflow = constants.useIsOverflow(scrollContainer),
@@ -53,13 +56,11 @@ exports.ScrollGradient = /*#__PURE__*/React.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 = React.useState(constants.ScrollStates.NONE),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    verticalPosition = _useState2[0],
-    setVerticalPosition = _useState2[1];
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 1),
+    verticalPosition = _useState2[0];
   var _useState3 = React.useState(constants.ScrollStates.NONE),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    horizontalPosition = _useState4[0],
-    setHorizontalPosition = _useState4[1];
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 1),
+    horizontalPosition = _useState4[0];
   var startVerticalRef = React.useRef(null);
   var startHorizontalRef = React.useRef(null);
   var endVerticalRef = React.useRef(null);
@@ -80,36 +81,84 @@ exports.ScrollGradient = /*#__PURE__*/React.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 = lodash.throttle(function () {
-    var updatedVerticalVal = constants.getScrollState(scrollContainer.current, constants.ScrollDirection.Y);
-    var updatedHorizontalVal = constants.getScrollState(scrollContainer.current, constants.ScrollDirection.X);
-    setVerticalPosition(updatedVerticalVal);
-    setHorizontalPosition(updatedHorizontalVal);
-  }, 150);
-  var scrollHandler = React.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);
+      }
+    }
+  };
+  React.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);
   };
-  React.useEffect(function () {
-    scrollHandler();
-  }, [scrollHandler]);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, "".concat(blockClass, "--x-").concat(horizontalPosition.toLowerCase()), "".concat(blockClass, "--y-").concat(verticalPosition.toLowerCase()), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--x-scrollable"), xScrollable), "".concat(blockClass, "--y-scrollable"), yScrollable), className),
     ref: ref,
     role: "presentation"
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
-    onScroll: scrollHandler,
+    onScroll: onScroll,
     ref: setRefs,
     className: cx("".concat(blockClass, "__content"), scrollElementClassName),
     tabIndex: 0
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("span", {
+    ref: intersectionStartRef,
+    "data-start-vertical": true
+  }), /*#__PURE__*/React.createElement("span", {
+    ref: intersectionLeftRef,
+    "data-start-horizontal": true
+  }), /*#__PURE__*/React.createElement("div", {
     ref: contentChildrenContainer,
     className: "".concat(blockClass, "__content-children")
-  }, children)), !hideStartGradient && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, children), /*#__PURE__*/React.createElement("span", {
+    ref: intersectionEndRef,
+    "data-end-vertical": true
+  }), /*#__PURE__*/React.createElement("span", {
+    ref: intersectionRightRef,
+    "data-end-horizontal": true
+  })), !hideStartGradient && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     ref: startVerticalRef,
     className: "".concat(blockClass, "__start-vertical"),
     role: "presentation",