@carbon/ibm-products 1.61.1 → 1.62.1

package/lib/components/Carousel/Carousel.js

@@ -7,22 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Carousel = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _lodash = require("lodash");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _CarouselItem = require("./CarouselItem");
-var _utils = require("./utils");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _devtools = require("../../global/js/utils/devtools");
 var _settings = require("../../settings");
-var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "scrollableChange", "scrollTune"];
+var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "onChangeIsScrollable", "onScroll"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-// 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(_settings.pkg.prefix, "--carousel");
 var componentName = 'Carousel';
@@ -30,13 +24,25 @@ var componentName = 'Carousel';
 // Default values for props
 var defaults = {
   disableArrowScroll: false,
-  scrollTune: 0
+  onScroll: function onScroll() {},
+  onChangeIsScrollable: function onChangeIsScrollable() {}
 };
 
 /**
  * The Carousel acts as a scaffold for other Novice to Pro content.
  *
  * This component is not intended for general use.
+ *
+ * Expected scrolling behavior.
+ * 1. Scroll the maximum number of visible items at a time.
+ * 2. The left-most item should always be left-aligned in the viewport.
+ *
+ * Exception.
+ * 1. After scrolling to the last (right-most) item,
+ *      if some of its content remains hidden,
+ *      then nudge it to the right until it is right-aligned.
+ * 2. From the right-aligned position, when scrolling left,
+ *      the left-most item should again be left-aligned.
  */
 var Carousel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -44,93 +50,152 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     _ref$disableArrowScro = _ref.disableArrowScroll,
     disableArrowScroll = _ref$disableArrowScro === void 0 ? defaults.disableArrowScroll : _ref$disableArrowScro,
     fadedEdgeColor = _ref.fadedEdgeColor,
-    scrollableChange = _ref.scrollableChange,
-    _ref$scrollTune = _ref.scrollTune,
-    scrollTune = _ref$scrollTune === void 0 ? defaults.scrollTune : _ref$scrollTune,
+    _ref$onChangeIsScroll = _ref.onChangeIsScrollable,
+    onChangeIsScrollable = _ref$onChangeIsScroll === void 0 ? defaults.onChangeIsScrollable : _ref$onChangeIsScroll,
+    _ref$onScroll = _ref.onScroll,
+    onScroll = _ref$onScroll === void 0 ? defaults.onScroll : _ref$onScroll,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var carouselScrollPromiseDelay = 700;
-  var totalViews = _react.default.Children.count(children) || 1;
+  var carouselRef = (0, _react.useRef)();
+  var scrollRef = (0, _react.useRef)();
+  // Array of refs used to reference this component's children DOM elements
+  var childElementsRef = (0, _react.useRef)(Array(_react.default.Children.count(children)).fill((0, _react.useRef)(null)));
   var leftFadedEdgeColor = (fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left) || fadedEdgeColor;
   var rightFadedEdgeColor = (fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.right) || fadedEdgeColor;
-  var _useState = (0, _react.useState)(0),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    currentViewID = _useState2[0],
-    _setCurrentViewID = _useState2[1];
-  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.
-  // Chrome appears to be the slowest implementation.
-  // Here is the spec: https://drafts.csswg.org/cssom-view/#concept-smooth-scroll
-  // found issue: https://github.com/w3c/csswg-drafts/issues/3744
-
-  var scrollNext = (0, _react.useCallback)(function () {
-    return scrollToView(currentViewID + 1);
-  }, [currentViewID, scrollToView]);
-  var scrollPrev = (0, _react.useCallback)(function () {
-    return scrollToView(currentViewID - 1);
-  }, [currentViewID, scrollToView]);
-  var scrollToView = (0, _react.useCallback)(function (viewID) {
-    if (!isScrolling && scrollRef.current && mountedRef.current) {
-      var _scrollRef$current;
-      var targetViewID = (0, _lodash.clamp)(viewID, 0, totalViews - 1);
-      setCurrentViewID(targetViewID);
-      setIsScrolling(true);
-      scrollRef.current.scrollLeft = ((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.offsetWidth) * targetViewID + scrollTune;
-      return scrollPromise();
+
+  // Trigger callbacks to report state of the carousel
+  var handleOnScroll = (0, _react.useCallback)(function () {
+    // viewport's width
+    var clientWidth = scrollRef.current.clientWidth;
+    // scroll position
+    var scrollLeft = parseInt(scrollRef.current.scrollLeft, 10);
+    // scrollable width
+    var scrollWidth = scrollRef.current.scrollWidth;
+
+    // The maximum scrollLeft achievable is the scrollable width - the viewport width.
+    var scrollLeftMax = scrollWidth - clientWidth;
+    // if isNaN(scrollLeft / scrollLeftMax), then set to zero
+    var scrollPercent = parseFloat((scrollLeft / scrollLeftMax).toFixed(2)) || 0;
+    if (!scrollRef.current) {
+      return;
     }
-    return new Promise(function (resolve) {
-      return resolveScroll(resolve);
+
+    // Callback 1: Does the carousel have enough content to enable scrolling?
+    onChangeIsScrollable(scrollWidth > clientWidth);
+
+    // Callback 2: Return the percentage of current scroll, between 0 and 1.
+    onScroll(scrollPercent);
+  }, [onChangeIsScrollable, onScroll]);
+
+  // Check if an individual child element is visible in the container
+  var getElementInView = (0, _react.useCallback)(function (containerRect, elementRect) {
+    // Is the element's left greater than or equal to the containers left
+    var elementLeftIsRightOfContainerLeft = elementRect.left >= containerRect.left;
+    // Is the element's right less than or equal to the containers right
+    var elementRightIsLeftOfContainerRight = elementRect.right <= containerRect.right;
+    return elementLeftIsRightOfContainerLeft && elementRightIsLeftOfContainerRight;
+  }, []);
+
+  // Get all elements that are visible in the container.
+  var getElementsInView = (0, _react.useCallback)(function () {
+    var containerRect = scrollRef.current.getBoundingClientRect();
+    var inViewElements = childElementsRef.current.filter(function (el) {
+      return getElementInView(containerRect, el.getBoundingClientRect());
     });
-  }, [isScrolling, resolveScroll, scrollPromise, scrollTune, totalViews]);
-  var scrollPromise = (0, _react.useCallback)(function () {
-    return new Promise(function (resolve) {
-      setTimeout(function () {
-        return resolveScroll(resolve);
-      }, carouselScrollPromiseDelay);
+    return inViewElements;
+  }, [getElementInView]);
+
+  // Return container's and children's rect data
+  var getContainerAndChildRectData = (0, _react.useCallback)(function () {
+    // Get the rect of the container
+    var containerRect = scrollRef.current.getBoundingClientRect();
+    // Get all child elements that are in view of the container, and return their bounding rects.
+    var elementRectsInView = getElementsInView().map(function (el) {
+      return el.getBoundingClientRect();
     });
-  }, [resolveScroll]);
-  var resolveScroll = (0, _react.useCallback)(function (resolve) {
-    if (mountedRef.current) {
-      setIsScrolling(false);
-      var percentage = scrollPosition() / maxScroll();
-      return resolve(parseFloat(percentage.toFixed(2)));
-    }
+
+    // What is the overall width of the visible elements in the container
+    // Note: may end up being 0 if the container's width is less than the child's width
+    var visibleWidth = elementRectsInView.reduce(function (accumulator, currentValue) {
+      return accumulator + currentValue.width;
+    }, 0);
+    return {
+      containerRect: containerRect,
+      elementRectsInView: elementRectsInView,
+      visibleWidth: visibleWidth
+    };
+  }, [getElementsInView]);
+  var handleScrollNext = (0, _react.useCallback)(function () {
+    var _getContainerAndChild = getContainerAndChildRectData(),
+      containerRect = _getContainerAndChild.containerRect,
+      visibleWidth = _getContainerAndChild.visibleWidth;
+    // Set the scrollValue to the visibleWidth, but if the visibleWidth value is 0, set it to the container's width
+    var scrollValue = visibleWidth > 0 ? visibleWidth : containerRect.width;
+    // Increment the scrollLeft of the container
+    scrollRef.current.scrollLeft += scrollValue;
+  }, [getContainerAndChildRectData]);
+  var handleScrollPrev = (0, _react.useCallback)(function () {
+    var _getContainerAndChild2 = getContainerAndChildRectData(),
+      containerRect = _getContainerAndChild2.containerRect,
+      elementRectsInView = _getContainerAndChild2.elementRectsInView,
+      visibleWidth = _getContainerAndChild2.visibleWidth;
+    // Set the scrollValue to the visibleWidth minus the first child's left value,
+    // but if the visibleWidth value is 0, set it to the container's width plus the container's left value
+    var scrollValue = visibleWidth > 0 ? visibleWidth - elementRectsInView[0].left : containerRect.width + containerRect.left;
+
+    // Decrement the scrollLeft of the container
+    scrollRef.current.scrollLeft -= scrollValue;
+  }, [getContainerAndChildRectData]);
+  var handleScrollReset = (0, _react.useCallback)(function () {
+    // This doesn't trigger "scrollend"...
+    scrollRef.current.scrollLeft = 0;
+    // ...so trigger a callback manually.
+    handleOnScroll();
+  }, [handleOnScroll]);
+  var handleScrollToView = (0, _react.useCallback)(function (itemNumber) {
+    childElementsRef.current[itemNumber].scrollIntoView();
   }, []);
-  var scrollPosition = function scrollPosition() {
-    var _scrollRef$current2;
-    return (_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.scrollLeft;
-  };
-  var maxScroll = function maxScroll() {
-    var _scrollRef$current3, _scrollRef$current4;
-    return ((_scrollRef$current3 = scrollRef.current) === null || _scrollRef$current3 === void 0 ? void 0 : _scrollRef$current3.scrollWidth) - ((_scrollRef$current4 = scrollRef.current) === null || _scrollRef$current4 === void 0 ? void 0 : _scrollRef$current4.clientWidth);
-  };
-  var handleResize = (0, _lodash.debounce)(function () {
-    scrollToView(currentViewIDRef.current);
-  }, 200);
-  var setCurrentViewID = function setCurrentViewID(val) {
-    currentViewIDRef.current = val;
-    _setCurrentViewID(val);
-  };
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isScrolling = _useState4[0],
-    setIsScrolling = _useState4[1];
-
-  // EFFECTS
-  (0, _utils.useWindowEvent)('resize', handleResize);
-  // SAVE POINT
 
+  // Trigger a callback after first render (and applied CSS).
   (0, _react.useEffect)(function () {
-    if (scrollableChange && mountedRef.current) {
-      scrollableChange(isScrollable);
-    }
-  }, [isScrollable, scrollableChange]);
+    // Normally, we can trigger a callback "immediately after first
+    // render", because we will be doing more "logical" work (update
+    // a state, show / hide a feature, etc.), and the final, applied
+    // CSS can "catch up" asynchronously without breaking anything.
+    setTimeout(function () {
+      // But, because we are making calculations based on the final,
+      // applied CSS, we must wait for one more "tick".
+      handleOnScroll();
+    }, 0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // On window.resize, reset carousel to zero.
   (0, _react.useEffect)(function () {
-    function updateScrollPosition(event) {
+    var handleWindowResize = function handleWindowResize() {
+      scrollRef.current.scrollLeft = 0;
+      handleOnScroll();
+    };
+    window.addEventListener('resize', handleWindowResize);
+    return function () {
+      return window.removeEventListener('resize', handleWindowResize);
+    };
+  }, [handleOnScroll]);
+
+  // On scrollRef.scrollend, trigger a callback.
+  (0, _react.useEffect)(function () {
+    var handleScrollend = function handleScrollend() {
+      handleOnScroll();
+    };
+    var scrollDiv = scrollRef.current;
+    scrollDiv.addEventListener('scrollend', handleScrollend);
+    return function () {
+      return scrollDiv.removeEventListener('scrollend', handleScrollend);
+    };
+  }, [handleOnScroll]);
+
+  // Disable wheel scrolling
+  (0, _react.useEffect)(function () {
+    function handleWheel(event) {
       // update the scroll position
       event.stopPropagation();
       event.preventDefault();
@@ -138,18 +203,20 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     }
     var scrollDiv = scrollRef.current;
     if (scrollDiv) {
-      scrollDiv.addEventListener('wheel', updateScrollPosition, {
+      scrollDiv.addEventListener('wheel', handleWheel, {
         passive: false
       });
       return function () {
-        scrollDiv.removeEventListener('wheel', updateScrollPosition, {
+        scrollDiv.removeEventListener('wheel', handleWheel, {
           passive: false
         });
       };
     }
   }, []);
+
+  // Enable arrow scrolling from within the carousel
   (0, _react.useEffect)(function () {
-    function keypress(event) {
+    function handleKeydown(event) {
       var key = event.key;
       if ((key === 'ArrowLeft' || key === 'ArrowRight') && disableArrowScroll) {
         event.stopPropagation();
@@ -157,27 +224,32 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         event.cancelBubble = false;
       }
     }
-    var outerDiv = carouselRef.current;
-    if (outerDiv) {
-      outerDiv.addEventListener('keydown', keypress);
+    var carouselDiv = carouselRef.current;
+    if (carouselDiv) {
+      carouselDiv.addEventListener('keydown', handleKeydown);
       return function () {
-        return outerDiv.removeEventListener('keydown', keypress);
+        return carouselDiv.removeEventListener('keydown', handleKeydown);
       };
     }
   }, [disableArrowScroll]);
-  (0, _react.useEffect)(function () {
-    return function () {
-      mountedRef.current = false;
-    };
-  }, []);
+
+  // Enable external function calls
   (0, _react.useImperativeHandle)(ref, function () {
     return {
-      scrollNext: scrollNext,
-      scrollPrev: scrollPrev,
-      scrollToView: scrollToView,
-      maxScroll: maxScroll
+      scrollNext: function scrollNext() {
+        handleScrollNext();
+      },
+      scrollPrev: function scrollPrev() {
+        handleScrollPrev();
+      },
+      scrollReset: function scrollReset() {
+        handleScrollReset();
+      },
+      scrollToView: function scrollToView(itemNumber) {
+        handleScrollToView(itemNumber);
+      }
     };
-  }, [scrollNext, scrollPrev, scrollToView]);
+  }, [handleScrollNext, handleScrollPrev, handleScrollReset, handleScrollToView]);
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     tabIndex: -1,
     className: (0, _classnames.default)(blockClass, className),
@@ -188,8 +260,13 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__elements"),
     ref: scrollRef
-  }, _react.default.Children.map(children, function (child) {
-    return /*#__PURE__*/_react.default.createElement(_CarouselItem.CarouselItem, null, child);
+  }, _react.default.Children.map(children, function (child, index) {
+    return /*#__PURE__*/_react.default.createElement(_CarouselItem.CarouselItem, {
+      key: index,
+      ref: function ref(element) {
+        return childElementsRef.current[index] = element;
+      }
+    }, child);
   })), leftFadedEdgeColor && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__elements-container--scrolled"),
     style: {
@@ -202,9 +279,6 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     }
   })));
 });
-
-// The display name of the component, used by React. Note that displayName
-// is used in preference to relying on function.name.
 exports.Carousel = Carousel;
 Carousel.displayName = componentName;
 
@@ -228,21 +302,23 @@ Carousel.propTypes = {
   /**
    * Enables the edges of the component to have faded styling.
    *
-   * Pass a single string to specify the same color for left and right.
+   * Pass a single string (`$color`) to specify the same color for left and right.
    *
-   * Pass `{ left: $color1, right: $color2 }` to specify different colors.
+   * Or pass an object (`{ left: $color1, right: $color2 }`) to specify different colors.
    */
   fadedEdgeColor: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({
     left: _propTypes.default.string,
     right: _propTypes.default.string
   })]),
   /**
-   * Determines how much of the Carousel moves into view on rotation.
+   * An optional callback function that returns `true`
+   * when the carousel has enough content to be scrollable,
+   * and `false` when there is not enough content.
    */
-  scrollTune: _propTypes.default.number,
+  onChangeIsScrollable: _propTypes.default.func,
   /**
-   * An optional callback function that returns `true`
-   * when the carousel has completed scrolling a single item.
+   * An optional callback function that returns the scroll position as
+   * a value between 0 and 1.
    */
-  scrollableChange: _propTypes.default.func
+  onScroll: _propTypes.default.func
 };

package/lib/components/Carousel/CarouselItem.js

@@ -1,23 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CarouselItem = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _utils = require("./utils");
 var _devtools = require("../../global/js/utils/devtools");
 var _settings = require("../../settings");
 var _excluded = ["children", "className"];
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
@@ -28,32 +23,21 @@ var componentName = 'CarouselItem';
 /**
  * TODO: A description of the component.
  */
-var CarouselItem = function CarouselItem(_ref) {
+var CarouselItem = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var itemRef = (0, _react.useRef)();
-  var isInView = (0, _utils.useIntersection)(itemRef, 0.85);
-  (0, _react.useEffect)(function () {
-    var _itemRef$current;
-    var matches = (_itemRef$current = itemRef.current) === null || _itemRef$current === void 0 ? void 0 : _itemRef$current.querySelectorAll('a, button, [role="button"], [tabindex]');
-    if (matches) {
-      var ti = isInView ? 0 : -1;
-      (0, _toConsumableArray2.default)(matches).forEach(function (match) {
-        match.tabIndex = ti;
-      });
-    }
-  }, [isInView]);
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
-    className: (0, _classnames.default)(blockClass, className),
-    ref: itemRef
-  }, (0, _devtools.getDevtoolsProps)(componentName)), children);
-};
-
+    className: (0, _classnames.default)(blockClass, className)
+  }, (0, _devtools.getDevtoolsProps)(componentName), {
+    ref: ref
+  }), children);
+});
+exports.CarouselItem = CarouselItem;
+CarouselItem.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.
-exports.CarouselItem = CarouselItem;
 CarouselItem.propTypes = {
   /**
    * Provide the contents of the CarouselItem.

package/lib/components/Coachmark/Coachmark.js

@@ -25,6 +25,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--coachmark");
+var overlayBlockClass = "".concat(blockClass, "-overlay");
 var componentName = 'Coachmark';
 var defaults = {
   align: 'bottom',
@@ -86,7 +87,18 @@ var Coachmark = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var closeOverlay = function closeOverlay() {
     setIsOpen(false);
   };
-  var handleClose = function handleClose() {
+  var escFunction = (0, _react.useCallback)(function (event) {
+    if (event.key === 'Escape') {
+      handleClose();
+    }
+  }, [handleClose]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener('keydown', escFunction, false);
+    return function () {
+      document.removeEventListener('keydown', escFunction, false);
+    };
+  }, [escFunction]);
+  var handleClose = (0, _react.useCallback)(function () {
     if (isStacked) {
       // If stacked, do not unmount,
       // only call its ("parent") onClose method.
@@ -95,7 +107,7 @@ var Coachmark = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       setIsOpen(false);
       onClose();
     }
-  };
+  }, [isStacked, onClose]);
   var handleTargetClick = function handleTargetClick(e) {
     setTargetRect(e.target.getBoundingClientRect());
     setTargetOffset({
@@ -116,6 +128,7 @@ var Coachmark = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var contextValue = {
     buttonProps: {
       'aria-expanded': isOpen,
+      tabIndex: 0,
       onClick: handleTargetClick,
       // Compensate for accidental open/close on double-click.
       // Only open on double-click.
@@ -167,7 +180,7 @@ var Coachmark = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     kind: overlayKind,
     onClose: handleClose,
     theme: theme,
-    className: overlayClassName
+    className: (0, _classnames.default)(overlayClassName, "".concat(overlayBlockClass, "--is-visible"))
   }, children), portalNode)));
 });
 
@@ -189,7 +202,6 @@ Coachmark.propTypes = {
    * @see COACHMARK_ALIGNMENT
    */
   align: _propTypes.default.oneOf(['bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom', 'right', 'right-top', 'right-bottom', 'top', 'top-left', 'top-right']),
-  // TODO: UPDATE COMMENT HERE - UPDATE MDX TO HAVE DIRECTION TO USE ONLY OVERLAY ELEMENTS>...
   /**
    * Coachmark should use a single CoachmarkOverlayElements component as a child.
    * @see CoachmarkOverlayElements

package/lib/components/Coachmark/CoachmarkDragbar.js

@@ -16,7 +16,7 @@ var _iconsReact = require("@carbon/icons-react");
 var _carbonComponentsReact = require("carbon-components-react");
 var _devtools = require("../../global/js/utils/devtools");
 var _settings = require("../../settings");
-var _excluded = ["closeIconDescription", "onClose", "onDrag", "showCloseButton", "theme"];
+var _excluded = ["a11yKeyboardHandler", "closeIconDescription", "onClose", "onDrag", "showCloseButton", "theme"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Carbon and package components we use.
@@ -24,6 +24,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--coachmark-dragbar");
+var overlayBlockClass = "".concat(_settings.pkg.prefix, "--coachmark-overlay");
 var componentName = 'CoachmarkDragbar';
 var defaults = {
   closeIconDescription: 'Close',
@@ -38,7 +39,8 @@ var defaults = {
  * of other Novice to Pro components.
  */
 var CoachmarkDragbar = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var _ref$closeIconDescrip = _ref.closeIconDescription,
+  var a11yKeyboardHandler = _ref.a11yKeyboardHandler,
+    _ref$closeIconDescrip = _ref.closeIconDescription,
     closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
     _ref$onClose = _ref.onClose,
     onClose = _ref$onClose === void 0 ? defaults.onClose : _ref$onClose,
@@ -88,15 +90,16 @@ var CoachmarkDragbar = /*#__PURE__*/_react.default.forwardRef(function (_ref, re
     // role="main"
   }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
-    className: "".concat(blockClass, "__handle"),
-    onMouseDown: handleDragStart
+    className: "".concat(overlayBlockClass, "__handle"),
+    onMouseDown: handleDragStart,
+    onKeyDown: a11yKeyboardHandler
   }, /*#__PURE__*/_react.default.createElement(_iconsReact.Draggable16, null)), showCloseButton && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
     kind: "ghost",
     size: "sm",
     renderIcon: _iconsReact.Close16,
     iconDescription: closeIconDescription,
     hasIconOnly: true,
-    className: "".concat(blockClass, "--close-btn"),
+    className: "".concat(overlayBlockClass, "--close-btn"),
     onClick: onClose
   }));
 });
@@ -113,6 +116,10 @@ CoachmarkDragbar.displayName = componentName;
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
 CoachmarkDragbar.propTypes = {
+  /**
+   * Handler to manage keyboard interactions with the dragbar.
+   */
+  a11yKeyboardHandler: _propTypes.default.func.isRequired,
   /**
    * Tooltip text and aria label for the Close button icon.
    */

package/lib/components/Coachmark/CoachmarkHeader.js

@@ -17,6 +17,7 @@ var _settings = require("../../settings");
 var _excluded = ["closeIconDescription", "onClose", "showCloseButton", "theme"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(_settings.pkg.prefix, "--coachmark-header");
+var overlayBlockClass = "".concat(_settings.pkg.prefix, "--coachmark-overlay");
 var componentName = 'CoachmarkHeader';
 var defaults = {
   closeIconDescription: 'Close',
@@ -49,7 +50,7 @@ var CoachmarkHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     renderIcon: _iconsReact.Close16,
     iconDescription: closeIconDescription,
     hasIconOnly: true,
-    className: "".concat(blockClass, "--close-btn"),
+    className: "".concat(overlayBlockClass, "--close-btn"),
     onClick: onClose
   }));
 });