@carbon/ibm-products 1.55.1 → 1.56.0

package/es/components/CoachmarkStack/CoachmarkStackHome.js

@@ -0,0 +1,157 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "description", "media", "navLinkLabels", "onClickNavItem", "onClose", "portalTarget", "closeButtonLabel", "title"];
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { forwardRef } from 'react';
+import pconsole from '../../global/js/utils/pconsole';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Idea20 } from '@carbon/icons-react';
+import { Button } from 'carbon-components-react';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg /*, carbon */ } from '../../settings';
+import { createPortal } from 'react-dom';
+import { CoachmarkHeader } from '../Coachmark/CoachmarkHeader';
+import { SteppedAnimatedMedia } from '../SteppedAnimatedMedia';
+
+// Carbon and package components we use.
+/* TODO: @import(s) of carbon components and other package components. */
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--coachmark-stacked-home");
+var overlayClass = "".concat(pkg.prefix, "--coachmark-overlay");
+var componentName = 'CoachmarkStackHome';
+
+/**
+ * DO NOT USE. This component is for the exclusive use
+ * of other Novice to Pro components.
+ */
+export var CoachmarkStackHome = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _document$querySelect;
+  var className = _ref.className,
+    description = _ref.description,
+    media = _ref.media,
+    navLinkLabels = _ref.navLinkLabels,
+    onClickNavItem = _ref.onClickNavItem,
+    onClose = _ref.onClose,
+    portalTarget = _ref.portalTarget,
+    closeButtonLabel = _ref.closeButtonLabel,
+    title = _ref.title,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  if (!navLinkLabels) {
+    return pconsole.warn("".concat(componentName, " is a Novice to Pro internal component and is not intended for general use."));
+  }
+  var portalNode = portalTarget ? (_document$querySelect = document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.querySelector('body') : document.querySelector('body');
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx(blockClass, className),
+    ref: ref,
+    role: "main"
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(CoachmarkHeader, {
+    onClose: onClose
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(overlayClass, "__body")
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(overlayClass, "-element")
+  }, !media && /*#__PURE__*/React.createElement(Idea20, {
+    className: "".concat(blockClass, "__icon-idea")
+  }), media && (media.render ? media.render() : /*#__PURE__*/React.createElement(SteppedAnimatedMedia, {
+    className: "".concat(overlayClass, "__element-stepped-media"),
+    filePaths: media.filePaths,
+    playStep: 0
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(overlayClass, "-element__content")
+  }, title && /*#__PURE__*/React.createElement("h2", {
+    className: "".concat(overlayClass, "-element__title")
+  }, title), description && /*#__PURE__*/React.createElement("p", {
+    className: "".concat(overlayClass, "-element__body")
+  }, description)), /*#__PURE__*/React.createElement("ul", {
+    className: "".concat(blockClass, "__nav-links")
+  }, navLinkLabels.map(function (label, index) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: index
+    }, /*#__PURE__*/React.createElement(Button, {
+      kind: "ghost",
+      size: "sm",
+      onClick: function onClick() {
+        onClickNavItem(index + 1);
+      }
+    }, label));
+  })), closeButtonLabel && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(overlayClass, "__footer")
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "sm",
+    onClick: onClose
+  }, closeButtonLabel))))), portalNode);
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+CoachmarkStackHome = pkg.checkComponentEnabled(CoachmarkStackHome, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+CoachmarkStackHome.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+CoachmarkStackHome.propTypes = {
+  /**
+   * Optional class name for this component.
+   */
+  className: PropTypes.string,
+  /**
+   * The label for the button that will close the stack
+   */
+  closeButtonLabel: PropTypes.string,
+  /**
+   * The description of the Coachmark.
+   */
+  description: PropTypes.node.isRequired,
+  /**
+   * The object describing an image in one of two shapes.
+   *
+   * If a single media element is required, use `{render}`.
+   *
+   * If a stepped animation is required, use `{filePaths}`.
+   *
+   * @see {@link MEDIA_PROP_TYPE}.
+   */
+  media: PropTypes.oneOfType([PropTypes.shape({
+    render: PropTypes.func
+  }), PropTypes.shape({
+    filePaths: PropTypes.arrayOf(PropTypes.string)
+  })]),
+  /**
+   * The labels used to link to the stackable Coachmarks.
+   */
+  navLinkLabels: PropTypes.arrayOf(PropTypes.string).isRequired,
+  /**
+   * For internal use only by CoachmarkStack and CoachmarkStackHome.
+   */
+  onClickNavItem: PropTypes.func.isRequired,
+  /**
+   * Function to call when the stack closes.
+   */
+  onClose: PropTypes.func.isRequired,
+  /**
+   * By default, the CoachmarkStackHome will be appended to the end of `document.body`.
+   * The CoachmarkStackHome will remain persistent as the user navigates the app until
+   * the user closes the CoachmarkStackHome.
+   *
+   * Alternatively, the app developer can tightly couple the CoachmarkStackHome to a DOM
+   * element or other component by specifying a CSS selector. The CoachmarkStackHome will
+   * remain visible as long as that element remains visible or mounted. When the
+   * element is hidden or component is unmounted, the CoachmarkStackHome will disappear.
+   */
+  portalTarget: PropTypes.string,
+  /**
+   * The title of the Coachmark.
+   */
+  title: PropTypes.string.isRequired
+};

package/es/components/CoachmarkStack/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { CoachmarkStack } from './CoachmarkStack';

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -35,8 +35,7 @@ var Columns = function Columns(_ref) {
     onSelectColumn = _ref.onSelectColumn,
     assistiveTextInstructionsLabel = _ref.assistiveTextInstructionsLabel,
     assistiveTextDisabledInstructionsLabel = _ref.assistiveTextDisabledInstructionsLabel,
-    selectAllLabel = _ref.selectAllLabel,
-    isTableSortable = _ref.isTableSortable;
+    selectAllLabel = _ref.selectAllLabel;
   var _React$useState = React.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     ariaRegionText = _React$useState2[0],
@@ -92,7 +91,6 @@ var Columns = function Columns(_ref) {
     filterString: filterString,
     focusIndex: focusIndex,
     getNextIndex: getNextIndex,
-    isTableSortable: isTableSortable,
     moveElement: moveElement,
     onSelectColumn: onSelectColumn,
     setAriaRegionText: setAriaRegionText,
@@ -108,7 +106,6 @@ Columns.propTypes = {
   filterString: PropTypes.string.isRequired,
   getVisibleColumnsCount: PropTypes.func.isRequired,
   instructionsLabel: PropTypes.string,
-  isTableSortable: PropTypes.bool.isRequired,
   onSelectColumn: PropTypes.func.isRequired,
   selectAllLabel: PropTypes.string,
   setColumnStatus: PropTypes.func,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -41,8 +41,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
     _ref$assistiveTextDis = _ref.assistiveTextDisabledInstructionsLabel,
     assistiveTextDisabledInstructionsLabel = _ref$assistiveTextDis === void 0 ? 'Reordering columns are disabled because they are filtered currently.' : _ref$assistiveTextDis,
     _ref$selectAllLabel = _ref.selectAllLabel,
-    selectAllLabel = _ref$selectAllLabel === void 0 ? 'Column name' : _ref$selectAllLabel,
-    isTableSortable = _ref.isTableSortable;
+    selectAllLabel = _ref$selectAllLabel === void 0 ? 'Column name' : _ref$selectAllLabel;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     visibleColumnsCount = _useState2[0],
@@ -152,8 +151,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
       setColumnObjects(cols);
       setDirty();
     },
-    selectAllLabel: selectAllLabel,
-    isTableSortable: isTableSortable
+    selectAllLabel: selectAllLabel
   }));
 };
 CustomizeColumnsTearsheet.propTypes = {
@@ -164,7 +162,6 @@ CustomizeColumnsTearsheet.propTypes = {
   findColumnPlaceholderLabel: PropTypes.string,
   instructionsLabel: PropTypes.string,
   isOpen: PropTypes.bool.isRequired,
-  isTableSortable: PropTypes.bool.isRequired,
   onSaveColumnPrefs: PropTypes.func.isRequired,
   originalColumnDefinitions: PropTypes.array.isRequired,
   primaryButtonTextLabel: PropTypes.string,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js

@@ -17,32 +17,49 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
     filterString = _ref.filterString,
     focusIndex = _ref.focusIndex,
     getNextIndex = _ref.getNextIndex,
-    isTableSortable = _ref.isTableSortable,
     moveElement = _ref.moveElement,
     onSelectColumn = _ref.onSelectColumn,
     setAriaRegionText = _ref.setAriaRegionText,
     setColumnsObject = _ref.setColumnsObject,
     setFocusIndex = _ref.setFocusIndex;
+  // This function recursively looks for the nested header element until we can find the key which contains the title.
+  // This can happen if multiple hooks are used together that manipulate the rendering of the column
+  // header, such as `useColumnCenterAlign` and `useSortableColumns`.
+  var getNestedTitle = function getNestedTitle(component) {
+    if (component && !component.key) {
+      return getNestedTitle(component.children);
+    }
+    if (component && component.key && typeof component.key === 'string') {
+      return component.key;
+    }
+  };
+  var getColTitle = function getColTitle(col) {
+    if (!col) {
+      return;
+    }
+    var checkTitle = function checkTitle() {
+      if (col.Header().props.children.props && col.Header().props.children.props.title) {
+        return col.Header().props.children.props.title;
+      }
+      return getNestedTitle(col.Header().props.children.props);
+    };
+    return typeof (col === null || col === void 0 ? void 0 : col.Header) === 'function' ? checkTitle() : col.Header.props.title;
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, columns
   // hide the columns without Header, e.g the sticky actions, spacer
   .filter(function (colDef) {
-    var _colDef$Header$props$, _colDef$Header$props;
-    var sortableTitle = isTableSortable && ((_colDef$Header$props$ = colDef.Header().props.children.props) === null || _colDef$Header$props$ === void 0 ? void 0 : _colDef$Header$props$.title);
-    return !!colDef.Header.props && !!((_colDef$Header$props = colDef.Header.props) !== null && _colDef$Header$props !== void 0 && _colDef$Header$props.title) || isTableSortable && !!sortableTitle;
-  }).filter(function (colDef) {
+    return !!getColTitle(colDef);
+  }).filter(Boolean).filter(function (colDef) {
     return !colDef.isAction;
   }).filter(function (colDef) {
-    var _colDef$Header$props$2, _colDef$Header$props2, _colDef$Header$props3;
-    var sortableTitle = isTableSortable && ((_colDef$Header$props$2 = colDef.Header().props.children.props) === null || _colDef$Header$props$2 === void 0 ? void 0 : _colDef$Header$props$2.title);
-    return filterString.length === 0 || (isTableSortable ? sortableTitle === null || sortableTitle === void 0 ? void 0 : sortableTitle.toLowerCase().includes(filterString) : (_colDef$Header$props2 = colDef.Header.props) === null || _colDef$Header$props2 === void 0 ? void 0 : (_colDef$Header$props3 = _colDef$Header$props2.title) === null || _colDef$Header$props3 === void 0 ? void 0 : _colDef$Header$props3.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
+    var _getColTitle;
+    return filterString.length === 0 || ((_getColTitle = getColTitle(colDef)) === null || _getColTitle === void 0 ? void 0 : _getColTitle.toLowerCase().includes(filterString)) && colDef.id !== 'spacer';
   }).map(function (colDef, i) {
-    var _colDef$Header$props$3, _colDef$Header$props4, _colDef$Header$props5, _colDef$Header$props6, _colDef$Header$props7;
-    var isSortableColumn = !!colDef.canSort && !!isTableSortable;
-    var sortableTitle = isTableSortable && ((_colDef$Header$props$3 = colDef.Header().props.children.props) === null || _colDef$Header$props$3 === void 0 ? void 0 : _colDef$Header$props$3.title);
+    var colHeaderTitle = getColTitle(colDef);
     var searchString = new RegExp('(' + filterString + ')');
-    var res = filterString.length ? isSortableColumn ? sortableTitle.toLowerCase().split(searchString) : colDef.Header.props.title.toLowerCase().split(searchString) : null;
+    var res = filterString.length ? colHeaderTitle.toLowerCase().split(searchString) : null;
     var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
-    var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : isSortableColumn ? sortableTitle : (_colDef$Header$props4 = colDef.Header.props) === null || _colDef$Header$props4 === void 0 ? void 0 : _colDef$Header$props4.title;
+    var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colHeaderTitle;
     var isFrozenColumn = !!colDef.sticky;
     var listContents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
       wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
@@ -50,8 +67,8 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
       disabled: isFrozenColumn,
       onChange: onSelectColumn.bind(null, colDef),
       id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
-      labelText: isSortableColumn ? sortableTitle : (_colDef$Header$props5 = colDef.Header.props) === null || _colDef$Header$props5 === void 0 ? void 0 : _colDef$Header$props5.title,
-      title: isSortableColumn ? sortableTitle : (_colDef$Header$props6 = colDef.Header.props) === null || _colDef$Header$props6 === void 0 ? void 0 : _colDef$Header$props6.title,
+      labelText: colHeaderTitle,
+      title: colHeaderTitle,
       className: "".concat(blockClass, "__customize-columns-checkbox"),
       hideLabel: true
     }), /*#__PURE__*/React.createElement("div", {
@@ -67,7 +84,7 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
       id: "dnd-datagrid-columns-".concat(colDef.id),
       type: "column-customization",
       disabled: filterString.length > 0 || isFrozenColumn,
-      ariaLabel: isSortableColumn ? sortableTitle : (_colDef$Header$props7 = colDef.Header.props) === null || _colDef$Header$props7 === void 0 ? void 0 : _colDef$Header$props7.title,
+      ariaLabel: colHeaderTitle,
       onGrab: setAriaRegionText,
       isFocused: focusIndex === i,
       moveElement: moveElement,
@@ -96,7 +113,6 @@ DraggableItemsList.propTypes = {
   filterString: PropTypes.string.isRequired,
   focusIndex: PropTypes.number.isRequired,
   getNextIndex: PropTypes.func.isRequired,
-  isTableSortable: PropTypes.bool,
   moveElement: PropTypes.func.isRequired,
   onSelectColumn: PropTypes.func.isRequired,
   setAriaRegionText: PropTypes.func.isRequired,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js

@@ -21,7 +21,6 @@ var TearsheetWrapper = function TearsheetWrapper(_ref) {
     rest = _objectWithoutProperties(_instance$customizeCo, _excluded);
   return /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, _extends({}, rest, labels, {
     isOpen: isTearsheetOpen,
-    isTableSortable: instance === null || instance === void 0 ? void 0 : instance.isTableSortable,
     setIsTearsheetOpen: setIsTearsheetOpen,
     columnDefinitions: instance.allColumns,
     originalColumnDefinitions: instance.columns,

package/es/components/Datagrid/useDefaultStringRenderer.js

@@ -24,7 +24,8 @@ var useDefaultStringRenderer = function useDefaultStringRenderer(hooks) {
   var HeaderRenderer = function HeaderRenderer(header) {
     return /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__defaultStringRenderer"),
-      title: typeof header === 'string' ? header : ''
+      title: typeof header === 'string' ? header : '',
+      key: typeof header === 'string' ? header : ''
     }, header);
   };
   var visibleColumns = function visibleColumns(columns) {

package/es/components/Datagrid/useSortableColumns.js

@@ -24,8 +24,12 @@ var getAriaSortValue = function getAriaSortValue(col, _ref) {
   var ascendingSortableLabelText = _ref.ascendingSortableLabelText,
     descendingSortableLabelText = _ref.descendingSortableLabelText,
     defaultSortableLabelText = _ref.defaultSortableLabelText;
-  var isSorted = col.isSorted,
-    isSortedDesc = col.isSortedDesc;
+  if (!col) {
+    return;
+  }
+  var _ref2 = col || {},
+    isSorted = _ref2.isSorted,
+    isSortedDesc = _ref2.isSortedDesc;
   if (!isSorted) {
     return defaultSortableLabelText || 'none';
   }
@@ -37,9 +41,9 @@ var getAriaSortValue = function getAriaSortValue(col, _ref) {
   }
 };
 var useSortableColumns = function useSortableColumns(hooks) {
-  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref2) {
+  var sortableVisibleColumns = function sortableVisibleColumns(visibleColumns, _ref3) {
     var _instance$customizeCo;
-    var instance = _ref2.instance;
+    var instance = _ref3.instance;
     var onSort = instance.onSort,
       ascendingSortableLabelText = instance.ascendingSortableLabelText,
       descendingSortableLabelText = instance.descendingSortableLabelText,

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -20,6 +20,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { useClickOutside } from '../../global/js/hooks';
 import { pkg } from '../../settings';
 import { timeAgo } from './utils';
+import { prepareProps } from '../../global/js/utils/props-helper';
 import { NotificationsEmptyState } from '../EmptyStates/NotificationsEmptyState';
 
 // Carbon and package components we use.
@@ -289,10 +290,10 @@ export var NotificationsPanel = /*#__PURE__*/React.forwardRef(function (_ref, re
       nowText: nowText
     })), /*#__PURE__*/React.createElement("h6", {
       className: notificationHeaderClassName
-    }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/React.createElement(Link, {
+    }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/React.createElement(Link, _extends({
       href: notification.link.url,
       className: "".concat(blockClass, "__notifications-link")
-    }, notification.link.text)), /*#__PURE__*/React.createElement(Button, {
+    }, prepareProps({}, notification.link, ['text', 'url'])), notification.link.text)), /*#__PURE__*/React.createElement(Button, {
       kind: "ghost",
       size: "small",
       renderIcon: Close16,

package/es/components/index.js

@@ -46,4 +46,11 @@ export { InlineEdit } from './InlineEdit';
 export { EditInPlace } from './EditInPlace';
 export { Guidebanner } from './Guidebanner';
 export { NonLinearReading } from './NonLinearReading';
+export { Coachmark } from './Coachmark';
+export { CoachmarkFixed } from './CoachmarkFixed';
+export { CoachmarkBeacon } from './CoachmarkBeacon';
+export { CoachmarkButton } from './CoachmarkButton';
+export { CoachmarkOverlayElements } from './CoachmarkOverlayElements';
+export { CoachmarkOverlayElement } from './CoachmarkOverlayElement';
+export { CoachmarkStack } from './CoachmarkStack';
 export { InlineTip } from './InlineTip';

package/es/global/js/package-settings.js

@@ -74,7 +74,14 @@ var defaults = {
     // Novice to pro components not yet reviewed and released:
     InlineTip: false,
     Guidebanner: false,
-    NonLinearReading: false
+    NonLinearReading: false,
+    Coachmark: false,
+    CoachmarkBeacon: false,
+    CoachmarkButton: false,
+    CoachmarkFixed: false,
+    CoachmarkOverlayElement: false,
+    CoachmarkOverlayElements: false,
+    CoachmarkStack: false
     /* new component flags here - comment used by generate CLI */
   },
 

package/es/global/js/utils/test-helper.js

@@ -109,7 +109,7 @@ var makeMatcherArray = function makeMatcherArray(args) {
  * A helper function to enable a test to expect a single call to
  * console.warn, for example when intentionally using a deprecated prop
  * or supplying invalid parameters for the purposes of the test.
- * @param {string|regex|function|[]} message the expected parameters for the call to
+ * @param {string|regex|Function|[]} message the expected parameters for the call to
  * console.warn, which must be called exactly once. A single string or regex or an
  * expect matcher can be used to match a single-argument call to console.warn (most common),
  * while an array of strings and/or regex and/or expect matchers can be used to match a
@@ -194,7 +194,7 @@ var checkLogging = function checkLogging(mock, message) {
  * A helper function to enable a test to expect a single call to
  * console.error, for example when intentionally omitting a required prop
  * or supplying an invalid prop type or value for the purposes of the test.
- * @param {errors: {string|regex|function|[]}, warnings: {string|regex|function|[]}} messages the expected parameters for the call to
+ * @param {errors: {string|regex|Function|[]}, warnings: {string|regex|Function|[]}} messages the expected parameters for the call to
  * console.error or console.warn, which must be called exactly once. A single string or regex or an
  * expect matcher can be used to match a single-argument call to console.error (most common),
  * while an array of strings and/or regex and/or expect matchers can be used to match a
@@ -220,7 +220,7 @@ export var expectLogging = function expectLogging(_ref2, test) {
  * A helper function to enable a test to expect a single call to
  * console.error, for example when intentionally omitting a required prop
  * or supplying an invalid prop type or value for the purposes of the test.
- * @param {string|regex|function|[]} message the expected parameters for the call to
+ * @param {string|regex|Function|[]} message the expected parameters for the call to
  * console.error, which must be called exactly once. A single string or regex or an
  * expect matcher can be used to match a single-argument call to console.error (most common),
  * while an array of strings and/or regex and/or expect matchers can be used to match a

package/lib/components/Carousel/Carousel.js

@@ -59,6 +59,7 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var currentViewIDRef = (0, _react.useRef)(currentViewID);
   var scrollRef = (0, _react.useRef)();
   var carouselRef = (0, _react.useRef)();
+  var mountedRef = (0, _react.useRef)(true);
   var isScrollable = (0, _utils.useIsOverflow)(scrollRef);
   // Scrolling has no complete callback, nor does it return a promise.
   // Since there is no way to tell when a scroll is finished we can set a timeout.
@@ -73,7 +74,7 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     return scrollToView(currentViewID - 1);
   }, [currentViewID, scrollToView]);
   var scrollToView = (0, _react.useCallback)(function (viewID) {
-    if (!isScrolling) {
+    if (!isScrolling && scrollRef.current && mountedRef.current) {
       var _scrollRef$current;
       var targetViewID = (0, _lodash.clamp)(viewID, 0, totalViews - 1);
       setCurrentViewID(targetViewID);
@@ -93,9 +94,11 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     });
   }, [resolveScroll]);
   var resolveScroll = (0, _react.useCallback)(function (resolve) {
-    setIsScrolling(false);
-    var percentage = scrollPosition() / maxScroll();
-    return resolve(parseFloat(percentage.toFixed(2)));
+    if (mountedRef.current) {
+      setIsScrolling(false);
+      var percentage = scrollPosition() / maxScroll();
+      return resolve(parseFloat(percentage.toFixed(2)));
+    }
   }, []);
   var scrollPosition = function scrollPosition() {
     var _scrollRef$current2;
@@ -119,8 +122,10 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
   // EFFECTS
   (0, _utils.useWindowEvent)('resize', handleResize);
+  // SAVE POINT
+
   (0, _react.useEffect)(function () {
-    if (scrollableChange) {
+    if (scrollableChange && mountedRef.current) {
       scrollableChange(isScrollable);
     }
   }, [isScrollable, scrollableChange]);
@@ -160,6 +165,11 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       };
     }
   }, [disableArrowScroll]);
+  (0, _react.useEffect)(function () {
+    return function () {
+      mountedRef.current = false;
+    };
+  }, []);
   (0, _react.useImperativeHandle)(ref, function () {
     return {
       scrollNext: scrollNext,