@carbon/ibm-products 1.61.1 → 1.62.1

package/es/components/Carousel/Carousel.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "scrollableChange", "scrollTune"];
+var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "onChangeIsScrollable", "onScroll"];
 /**
  * Copyright IBM Corp. 2023, 2023
  *
@@ -9,20 +8,13 @@ var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor"
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-
-// Other standard imports.
-import { clamp, debounce } from 'lodash';
+import React, { useCallback, useEffect, useImperativeHandle, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { CarouselItem } from './CarouselItem';
-import { useIsOverflow, useWindowEvent } from './utils';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
 
-// 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, "--carousel");
 var componentName = 'Carousel';
@@ -30,107 +22,178 @@ 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.
  */
-export var Carousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var Carousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     _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 = _objectWithoutProperties(_ref, _excluded);
-  var carouselScrollPromiseDelay = 700;
-  var totalViews = React.Children.count(children) || 1;
+  var carouselRef = useRef();
+  var scrollRef = useRef();
+  // Array of refs used to reference this component's children DOM elements
+  var childElementsRef = useRef(Array(React.Children.count(children)).fill(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 = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    currentViewID = _useState2[0],
-    _setCurrentViewID = _useState2[1];
-  var currentViewIDRef = useRef(currentViewID);
-  var scrollRef = useRef();
-  var carouselRef = useRef();
-  var mountedRef = useRef(true);
-  var isScrollable = 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 = useCallback(function () {
-    return scrollToView(currentViewID + 1);
-  }, [currentViewID, scrollToView]);
-  var scrollPrev = useCallback(function () {
-    return scrollToView(currentViewID - 1);
-  }, [currentViewID, scrollToView]);
-  var scrollToView = useCallback(function (viewID) {
-    if (!isScrolling && scrollRef.current && mountedRef.current) {
-      var _scrollRef$current;
-      var targetViewID = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = 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 = useCallback(function () {
+    // This doesn't trigger "scrollend"...
+    scrollRef.current.scrollLeft = 0;
+    // ...so trigger a callback manually.
+    handleOnScroll();
+  }, [handleOnScroll]);
+  var handleScrollToView = 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 = debounce(function () {
-    scrollToView(currentViewIDRef.current);
-  }, 200);
-  var setCurrentViewID = function setCurrentViewID(val) {
-    currentViewIDRef.current = val;
-    _setCurrentViewID(val);
-  };
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isScrolling = _useState4[0],
-    setIsScrolling = _useState4[1];
-
-  // EFFECTS
-  useWindowEvent('resize', handleResize);
-  // SAVE POINT
 
+  // Trigger a callback after first render (and applied CSS).
   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.
   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.
+  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
+  useEffect(function () {
+    function handleWheel(event) {
       // update the scroll position
       event.stopPropagation();
       event.preventDefault();
@@ -138,18 +201,20 @@ export var Carousel = /*#__PURE__*/React.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
   useEffect(function () {
-    function keypress(event) {
+    function handleKeydown(event) {
       var key = event.key;
       if ((key === 'ArrowLeft' || key === 'ArrowRight') && disableArrowScroll) {
         event.stopPropagation();
@@ -157,27 +222,32 @@ export var Carousel = /*#__PURE__*/React.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]);
-  useEffect(function () {
-    return function () {
-      mountedRef.current = false;
-    };
-  }, []);
+
+  // Enable external function calls
   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.createElement("div", _extends({}, rest, {
     tabIndex: -1,
     className: cx(blockClass, className),
@@ -188,8 +258,13 @@ export var Carousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__elements"),
     ref: scrollRef
-  }, React.Children.map(children, function (child) {
-    return /*#__PURE__*/React.createElement(CarouselItem, null, child);
+  }, React.Children.map(children, function (child, index) {
+    return /*#__PURE__*/React.createElement(CarouselItem, {
+      key: index,
+      ref: function ref(element) {
+        return childElementsRef.current[index] = element;
+      }
+    }, child);
   })), leftFadedEdgeColor && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__elements-container--scrolled"),
     style: {
@@ -202,9 +277,6 @@ export var Carousel = /*#__PURE__*/React.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.
 Carousel.displayName = componentName;
 
 // The types and DocGen commentary for the component props,
@@ -227,21 +299,24 @@ 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.oneOfType([PropTypes.string, PropTypes.shape({
     left: PropTypes.string,
     right: PropTypes.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.number,
+  onChangeIsScrollable: PropTypes.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.func
-};
+  onScroll: PropTypes.func
+};
+export { Carousel };

package/es/components/Carousel/CarouselItem.js

@@ -1,5 +1,4 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className"];
 /**
@@ -9,12 +8,11 @@ var _excluded = ["children", "className"];
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useEffect, useRef } from 'react';
+import React from 'react';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { useIntersection } from './utils';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { pkg } from '../../settings';
 
@@ -28,28 +26,17 @@ var componentName = 'CarouselItem';
 /**
  * TODO: A description of the component.
  */
-var CarouselItem = function CarouselItem(_ref) {
+var CarouselItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var itemRef = useRef();
-  var isInView = useIntersection(itemRef, 0.85);
-  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;
-      _toConsumableArray(matches).forEach(function (match) {
-        match.tabIndex = ti;
-      });
-    }
-  }, [isInView]);
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
-    className: cx(blockClass, className),
-    ref: itemRef
-  }, getDevtoolsProps(componentName)), children);
-};
-
+    className: cx(blockClass, className)
+  }, getDevtoolsProps(componentName), {
+    ref: ref
+  }), children);
+});
+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.

package/es/components/Coachmark/Coachmark.js

@@ -9,7 +9,7 @@ var _excluded = ["align", "children", "className", "onClose", "overlayClassName"
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useRef, useState, useCallback } from 'react';
 import cx from 'classnames';
 import PropTypes, { Component } from 'prop-types';
 import { createPortal } from 'react-dom';
@@ -22,6 +22,7 @@ import { pkg /*, carbon */ } from '../../settings';
 import { throttle } from 'lodash';
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--coachmark");
+var overlayBlockClass = "".concat(blockClass, "-overlay");
 var componentName = 'Coachmark';
 var defaults = {
   align: 'bottom',
@@ -83,7 +84,18 @@ export var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var closeOverlay = function closeOverlay() {
     setIsOpen(false);
   };
-  var handleClose = function handleClose() {
+  var escFunction = useCallback(function (event) {
+    if (event.key === 'Escape') {
+      handleClose();
+    }
+  }, [handleClose]);
+  useEffect(function () {
+    document.addEventListener('keydown', escFunction, false);
+    return function () {
+      document.removeEventListener('keydown', escFunction, false);
+    };
+  }, [escFunction]);
+  var handleClose = useCallback(function () {
     if (isStacked) {
       // If stacked, do not unmount,
       // only call its ("parent") onClose method.
@@ -92,7 +104,7 @@ export var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
       setIsOpen(false);
       onClose();
     }
-  };
+  }, [isStacked, onClose]);
   var handleTargetClick = function handleTargetClick(e) {
     setTargetRect(e.target.getBoundingClientRect());
     setTargetOffset({
@@ -113,6 +125,7 @@ export var Coachmark = /*#__PURE__*/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.
@@ -164,7 +177,7 @@ export var Coachmark = /*#__PURE__*/forwardRef(function (_ref, ref) {
     kind: overlayKind,
     onClose: handleClose,
     theme: theme,
-    className: overlayClassName
+    className: cx(overlayClassName, "".concat(overlayBlockClass, "--is-visible"))
   }, children), portalNode)));
 });
 
@@ -185,7 +198,6 @@ Coachmark.propTypes = {
    * @see COACHMARK_ALIGNMENT
    */
   align: PropTypes.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/es/components/Coachmark/CoachmarkDragbar.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["closeIconDescription", "onClose", "onDrag", "showCloseButton", "theme"];
+var _excluded = ["a11yKeyboardHandler", "closeIconDescription", "onClose", "onDrag", "showCloseButton", "theme"];
 /**
  * Copyright IBM Corp. 2023, 2023
  *
@@ -25,6 +25,7 @@ import { pkg /*, carbon */ } from '../../settings';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--coachmark-dragbar");
+var overlayBlockClass = "".concat(pkg.prefix, "--coachmark-overlay");
 var componentName = 'CoachmarkDragbar';
 var defaults = {
   closeIconDescription: 'Close',
@@ -39,7 +40,8 @@ var defaults = {
  * of other Novice to Pro components.
  */
 export var CoachmarkDragbar = /*#__PURE__*/React.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,
@@ -89,15 +91,16 @@ export var CoachmarkDragbar = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     // role="main"
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "".concat(blockClass, "__handle"),
-    onMouseDown: handleDragStart
+    className: "".concat(overlayBlockClass, "__handle"),
+    onMouseDown: handleDragStart,
+    onKeyDown: a11yKeyboardHandler
   }, /*#__PURE__*/React.createElement(Draggable16, null)), showCloseButton && /*#__PURE__*/React.createElement(Button, {
     kind: "ghost",
     size: "sm",
     renderIcon: 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.func.isRequired,
   /**
    * Tooltip text and aria label for the Close button icon.
    */

package/es/components/Coachmark/CoachmarkHeader.js

@@ -21,6 +21,7 @@ import { pkg /*, carbon */ } from '../../settings';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--coachmark-header");
+var overlayBlockClass = "".concat(pkg.prefix, "--coachmark-overlay");
 var componentName = 'CoachmarkHeader';
 var defaults = {
   closeIconDescription: 'Close',
@@ -53,7 +54,7 @@ export var CoachmarkHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     renderIcon: Close16,
     iconDescription: closeIconDescription,
     hasIconOnly: true,
-    className: "".concat(blockClass, "--close-btn"),
+    className: "".concat(overlayBlockClass, "--close-btn"),
     onClick: onClose
   }));
 });