@carbon/ibm-products 2.37.0 → 2.38.0

package/es/components/TagSet/TagSetOverflow.d.ts

@@ -1,2 +1,45 @@
-export const TagSetOverflow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+import React, { ReactNode } from 'react';
+type OverflowAlign = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
+type OverflowType = 'default' | 'tag';
+interface TagSetOverflowProps {
+    /**
+     * count of overflowTags over which a modal is offered
+     */
+    allTagsModalSearchThreshold?: number;
+    /**
+     * className
+     */
+    className?: string;
+    /**
+     * function to execute on clicking show all
+     */
+    onShowAllClick: () => void;
+    /**
+     * overflowAlign from the standard tooltip
+     */
+    overflowAlign?: OverflowAlign;
+    /** @type {Array<any>}
+     * tags shown in overflow
+     */
+    overflowTags: ReactNode[];
+    /**
+     * Type of rendering displayed inside of the tag overflow component
+     */
+    overflowType?: OverflowType;
+    /**
+     * Open state of the popover
+     */
+    popoverOpen?: boolean;
+    /**
+     * Setter function for the popoverOpen state value
+     */
+    setPopoverOpen?: ((value: boolean) => void) | undefined;
+    /**
+     * label for the overflow show all tags link
+     */
+    showAllTagsLabel?: string;
+}
+export declare const TagSetOverflow: React.ForwardRefExoticComponent<TagSetOverflowProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/es/components/TagSet/TagSetOverflow.js

@@ -19,8 +19,7 @@ var blockClass = "".concat(pkg.prefix, "--tag-set-overflow");
 
 // Default values for props
 var defaults = {
-  allTagsModalSearchThreshold: 10,
-  overflowAlign: 'bottom'
+  allTagsModalSearchThreshold: 10
 };
 var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$allTagsModalSear = _ref.allTagsModalSearchThreshold,
@@ -28,30 +27,30 @@ var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     className = _ref.className,
     onShowAllClick = _ref.onShowAllClick,
     _ref$overflowAlign = _ref.overflowAlign,
-    overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
+    overflowAlign = _ref$overflowAlign === void 0 ? 'bottom' : _ref$overflowAlign,
     overflowTags = _ref.overflowTags,
     overflowType = _ref.overflowType,
     showAllTagsLabel = _ref.showAllTagsLabel,
     popoverOpen = _ref.popoverOpen,
     setPopoverOpen = _ref.setPopoverOpen,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var localRef = useRef();
+  var localRef = useRef(null);
   var overflowTagContent = useRef(null);
   useClickOutside(ref || localRef, function () {
     if (popoverOpen) {
-      setPopoverOpen(false);
+      setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
     }
   });
   var handleShowAllTagsClick = function handleShowAllTagsClick(ev) {
     ev.stopPropagation();
     ev.preventDefault();
-    setPopoverOpen(false);
+    setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
     onShowAllClick();
   };
   var handleEscKeyPress = function handleEscKeyPress(event) {
     var key = event.key;
     if (key === 'Escape') {
-      setPopoverOpen(false);
+      setPopoverOpen === null || setPopoverOpen === void 0 || setPopoverOpen(false);
     }
   };
   return /*#__PURE__*/React__default.createElement("span", _extends({}, rest, {
@@ -67,7 +66,7 @@ var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     open: popoverOpen
   }, /*#__PURE__*/React__default.createElement(Tag, {
     onClick: function onClick() {
-      return setPopoverOpen(!popoverOpen);
+      return setPopoverOpen === null || setPopoverOpen === void 0 ? void 0 : setPopoverOpen(!popoverOpen);
     },
     className: cx("".concat(blockClass, "__popover-trigger"))
   }, "+", overflowTags.length), /*#__PURE__*/React__default.createElement(PopoverContent, null, /*#__PURE__*/React__default.createElement("div", {
@@ -85,10 +84,12 @@ var TagSetOverflow = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     if (overflowType === 'default') {
       tagProps.filter = false;
     }
-    return /*#__PURE__*/React__default.createElement("li", {
-      className: cx("".concat(blockClass, "__tag-item"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag')),
-      key: index
-    }, /*#__PURE__*/React__default.cloneElement(tag, tagProps));
+    if ( /*#__PURE__*/React__default.isValidElement(tag)) {
+      return /*#__PURE__*/React__default.createElement("li", {
+        className: cx("".concat(blockClass, "__tag-item"), _defineProperty(_defineProperty({}, "".concat(blockClass, "__tag-item--default"), overflowType === 'default'), "".concat(blockClass, "__tag-item--tag"), overflowType === 'tag')),
+        key: index
+      }, /*#__PURE__*/React__default.cloneElement(tag, tagProps));
+    }
   })), overflowTags.length > allTagsModalSearchThreshold && /*#__PURE__*/React__default.createElement(Link, {
     className: "".concat(blockClass, "__show-all-tags-link"),
     href: "",
@@ -117,6 +118,7 @@ TagSetOverflow.propTypes = {
   /**
    * tags shown in overflow
    */
+  /**@ts-ignore */
   overflowTags: PropTypes.arrayOf(PropTypes.object).isRequired,
   /**
    * Type of rendering displayed inside of the tag overflow component

package/es/components/WebTerminal/WebTerminal.js

@@ -72,7 +72,7 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   */
   useEffect(function () {
     if (isInitiallyOpen) {
-      openWebTerminal();
+      openWebTerminal === null || openWebTerminal === void 0 || openWebTerminal();
     }
   }, []); // eslint-disable-line
 
@@ -92,7 +92,7 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     if (prefersReducedMotion) {
       setRender(false);
     }
-    closeWebTerminal();
+    closeWebTerminal === null || closeWebTerminal === void 0 || closeWebTerminal();
   };
   return shouldRender ? /*#__PURE__*/React__default.createElement("div", _extends({}, _objectSpread2(_objectSpread2({}, rest), getDevtoolsProps(componentName)), {
     ref: ref,

package/es/components/WebTerminal/WebTerminalContentWrapper.d.ts

@@ -1,2 +1,15 @@
-export let WebTerminalContentWrapper: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+/**
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * 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, { ReactNode } from 'react';
+interface WebTerminalContentWrapperProps {
+    /**
+     * Pass in content as children.
+     */
+    children: ReactNode | ReactNode[];
+}
+export declare let WebTerminalContentWrapper: React.ForwardRefExoticComponent<WebTerminalContentWrapperProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/es/components/WebTerminal/hooks/index.d.ts

@@ -1,12 +1,17 @@
-export const WebTerminalContext: React.Context<any>;
-export function WebTerminalProvider({ children }: {
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace WebTerminalProvider {
-    namespace propTypes {
-        let children: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-    }
+import React, { ReactNode } from 'react';
+export interface WebTerminalContextType {
+    open?: boolean;
+    openWebTerminal?: () => void;
+    closeWebTerminal?: () => void;
+    toggleWebTerminal?: () => void;
 }
-export function useWebTerminal(): any;
-import React from 'react';
-import PropTypes from 'prop-types';
+export declare const WebTerminalContext: React.Context<WebTerminalContextType>;
+interface WebTerminalProviderProps {
+    /**
+     * Provide your own terminal component as children to show up in the web terminal
+     */
+    children: ReactNode | ReactNode[];
+}
+export declare let WebTerminalProvider: React.FC<WebTerminalProviderProps>;
+export declare const useWebTerminal: () => WebTerminalContextType;
+export {};

package/es/components/WebTerminal/hooks/index.js

@@ -10,7 +10,7 @@ import React__default, { useState, useCallback, useContext, createContext } from
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import { pkg } from '../../../settings.js';
 
-var WebTerminalContext = /*#__PURE__*/createContext();
+var WebTerminalContext = /*#__PURE__*/createContext({});
 var componentName = 'WebTerminalProvider';
 var WebTerminalProvider = function WebTerminalProvider(_ref) {
   var children = _ref.children;

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

@@ -24,6 +24,7 @@ declare namespace defaults {
         let AboutModal: boolean;
         let APIKeyModal: boolean;
         let Cascade: boolean;
+        let Checklist: boolean;
         let CreateModal: boolean;
         let CreateFullPage: boolean;
         let CreateFullPageStep: boolean;
@@ -112,7 +113,6 @@ declare namespace defaults {
         let DescriptionListRow: boolean;
         let SearchBar: boolean;
         let UserAvatar: boolean;
-        let Checklist: boolean;
         let EmptyStateV2: boolean;
         let Guidebanner: boolean;
         let GuidebannerElement: boolean;

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

@@ -22,6 +22,7 @@ var defaults = {
     AboutModal: true,
     APIKeyModal: true,
     Cascade: true,
+    Checklist: true,
     CreateModal: true,
     CreateFullPage: true,
     CreateFullPageStep: true,
@@ -117,7 +118,6 @@ var defaults = {
     /* new component flags here - comment used by generate CLI */
 
     // Novice to pro components not yet reviewed and released:
-    Checklist: false,
     EmptyStateV2: false,
     Guidebanner: false,
     GuidebannerElement: false,

package/es/node_modules/@carbon/colors/es/index.js

@@ -5,7 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+var purple50 = '#a56eff';
 var purple70 = '#6929c4';
 var blue90 = '#001d6c';
+var gray20 = '#e0e0e0';
+var gray70 = '#525252';
 
-export { blue90, purple70 };
+export { blue90, gray20, gray70, purple50, purple70 };

package/es/settings.d.ts

@@ -10,6 +10,7 @@ export const pkg: {
         AboutModal: boolean;
         APIKeyModal: boolean;
         Cascade: boolean;
+        Checklist: boolean;
         CreateModal: boolean;
         CreateFullPage: boolean;
         CreateFullPageStep: boolean;
@@ -98,7 +99,6 @@ export const pkg: {
         DescriptionListRow: boolean;
         SearchBar: boolean;
         UserAvatar: boolean;
-        Checklist: boolean;
         EmptyStateV2: boolean;
         Guidebanner: boolean;
         GuidebannerElement: boolean;

package/lib/components/ActionSet/ActionSet.js

@@ -107,9 +107,10 @@ var ActionSet = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
     role: "presentation",
     stacked: stacking
   }), buttons.map(function (action, index) {
+    var actionProps = propsHelper.prepareProps(action, ['key']);
     return /*#__PURE__*/React__default["default"].createElement(ActionSetButton, _rollupPluginBabelHelpers["extends"]({
       key: action.key || index
-    }, action, {
+    }, actionProps, {
       size: buttonSize
     }));
   }));

package/lib/components/Checklist/Checklist.js

@@ -26,7 +26,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["chartValue", "chartLabel", "checklistAriaLabel", "checklistToggleAriaLabel", "className", "onClickViewAll", "onToggle", "open", "showToggle", "taskLists", "theme", "title", "toggleLabel", "toggleLabelAlign", "viewAllLabel"];
+var _excluded = ["chartValue", "chartLabel", "checklistAriaLabel", "checklistToggleAriaLabel", "className", "onClickViewAll", "onToggle", "open", "enableToggle", "taskLists", "theme", "title", "toggleLabel", "toggleLabelAlign", "viewAllLabel"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--checklist");
@@ -50,7 +50,7 @@ var defaults = {
   onClickViewAll: function onClickViewAll() {},
   onToggle: function onToggle() {},
   open: true,
-  showToggle: true,
+  enableToggle: true,
   taskLists: [],
   theme: 'light',
   toggleLabel: 'Toggle',
@@ -77,8 +77,8 @@ exports.Checklist = /*#__PURE__*/React__default["default"].forwardRef(function (
     onToggle = _ref$onToggle === void 0 ? defaults.onToggle : _ref$onToggle,
     _ref$open = _ref.open,
     open = _ref$open === void 0 ? defaults.open : _ref$open,
-    _ref$showToggle = _ref.showToggle,
-    showToggle = _ref$showToggle === void 0 ? defaults.showToggle : _ref$showToggle,
+    _ref$enableToggle = _ref.enableToggle,
+    enableToggle = _ref$enableToggle === void 0 ? defaults.enableToggle : _ref$enableToggle,
     _ref$taskLists = _ref.taskLists,
     taskLists = _ref$taskLists === void 0 ? defaults.taskLists : _ref$taskLists,
     _ref$theme = _ref.theme,
@@ -142,7 +142,7 @@ exports.Checklist = /*#__PURE__*/React__default["default"].forwardRef(function (
   }, title), chartLabelAndValue && /*#__PURE__*/React__default["default"].createElement("h3", {
     id: chartLabelId,
     className: "".concat(blockClass, "__chart-label")
-  }, chartLabel)), showToggle && /*#__PURE__*/React__default["default"].createElement(react.IconButton, {
+  }, chartLabel)), enableToggle && /*#__PURE__*/React__default["default"].createElement(react.IconButton, {
     align: toggleLabelAlign,
     "aria-controls": listContainerId,
     "aria-expanded": isOpen,
@@ -228,6 +228,10 @@ exports.Checklist.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: index["default"].string,
+  /**
+   * Whether or not to show the open/close toggle.
+   */
+  enableToggle: index["default"].bool,
   /**
    * Callback for the "View all" button. See also `viewAllLabel`.
    */
@@ -241,10 +245,6 @@ exports.Checklist.propTypes = {
    * This can be set during initialization, or changed after being rendered.
    */
   open: index["default"].bool,
-  /**
-   * Whether or not to show the open/close toggle.
-   */
-  showToggle: index["default"].bool,
   /**
    * The task list can be broken down into sub-lists.
    *
@@ -271,7 +271,7 @@ exports.Checklist.propTypes = {
   /**
    * The title of the component.
    */
-  title: index["default"].string,
+  title: index["default"].node,
   /**
    * The label for the toggle's tooltip.
    */

package/lib/components/Checklist/ChecklistChart.d.ts

@@ -1,5 +1,5 @@
 /**
- * TODO: A description of the component.
+ * Custom chart component used within Checklist PLG component
  */
 export let ChecklistChart: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';

package/lib/components/Checklist/ChecklistChart.js

@@ -13,9 +13,10 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var index = require('../../node_modules/prop-types/index.js');
 var cx = require('classnames');
+var clamp = require('lodash/clamp');
+var index$1 = require('../../node_modules/@carbon/colors/es/index.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
-var clamp = require('lodash/clamp');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,32 +25,14 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var clamp__default = /*#__PURE__*/_interopDefaultLegacy(clamp);
 
 var _excluded = ["className", "value", "theme"];
-
-// 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, "--checklist__chart");
 var componentName = 'ChecklistChart';
-
-// NOTE: the component SCSS is not imported here: it is rolled up separately.
-
-// Default values can be included here and then assigned to the prop params,
-// e.g. prop = defaults.prop,
-// This gathers default values together neatly and ensures non-primitive
-// values are initialized early to avoid react making unnecessary re-renders.
-// Note that default values are not required for props that are 'required',
-// nor for props where the component can apply undefined values reasonably.
-// Default values should be provided when the component needs to make a choice
-// or assumption when a prop is not supplied.
-
-// Default values for props
 var defaults = {
   theme: 'light'
 };
 
 /**
- * TODO: A description of the component.
+ * Custom chart component used within Checklist PLG component
  */
 var ChecklistChart = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var className = _ref.className,
@@ -58,9 +41,8 @@ var ChecklistChart = /*#__PURE__*/React__default["default"].forwardRef(function
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var numDegrees = clamp__default["default"](value * 360, 0, 360);
-  var circleColor = theme === 'light' ? '#e0e0e0' : '#525252'; // $ui-03 (-ish)
-  var progressColor = theme === 'light' ? '#a56eff' : '#a56eff'; // $purple-50
-
+  var circleColor = theme === 'light' ? index$1.gray20 : index$1.gray70; // $ui-03 (-ish)
+  var progressColor = index$1.purple50;
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](blockClass, className),
     style: {
@@ -71,13 +53,7 @@ var ChecklistChart = /*#__PURE__*/React__default["default"].forwardRef(function
     role: "img"
   }, devtools.getDevtoolsProps(componentName)));
 });
-
-// Return a placeholder if not released and not enabled by feature flag
-// ChecklistChart = pkg.checkComponentEnabled(ChecklistChart, componentName);
-
-// The display name of the component, used by React. Note that displayName
-// is used in preference to relying on function.name.
-// ChecklistChart.displayName = componentName;
+ChecklistChart.displayName = componentName;
 
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).

package/lib/components/Coachmark/Coachmark.d.ts

@@ -1,7 +1,70 @@
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * 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, { MutableRefObject, ReactNode } from 'react';
+interface CoachmarkProps {
+    /**
+     * Where to render the Coachmark relative to its target.
+     * Applies only to Floating and Tooltip Coachmarks.
+     * @see COACHMARK_ALIGNMENT
+     */
+    align?: 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom' | 'top' | 'top-left' | 'top-right';
+    /**
+     * Coachmark should use a single CoachmarkOverlayElements component as a child.
+     * @see CoachmarkOverlayElements
+     */
+    children: ReactNode;
+    /**
+     * Optional class name for this component.
+     */
+    className?: string;
+    /**
+     * Function to call when the Coachmark closes.
+     */
+    onClose?: () => void;
+    /**
+     * Optional class name for the Coachmark Overlay component.
+     */
+    overlayClassName?: string;
+    /**
+     * What kind or style of Coachmark to render.
+     */
+    overlayKind?: 'tooltip' | 'floating' | 'stacked';
+    overlayRef?: MutableRefObject<HTMLElement | null>;
+    /**
+     * By default, the Coachmark will be appended to the end of `document.body`.
+     * The Coachmark will remain persistent as the user navigates the app until
+     * the user closes the Coachmark.
+     *
+     * Alternatively, the app developer can tightly couple the Coachmark to a DOM
+     * element or other component by specifying a CSS selector. The Coachmark will
+     * remain visible as long as that element remains visible or mounted. When the
+     * element is hidden or component is unmounted, the Coachmark will disappear.
+     */
+    portalTarget?: string;
+    /**
+     * Fine tune the position of the target in pixels. Applies only to Beacons.
+     */
+    positionTune?: {
+        x: number;
+        y: number;
+    } | object;
+    /**
+     * The optional button or beacon that the user will click to show the Coachmark.
+     */
+    target: React.ReactNode;
+    /**
+     * Determines the theme of the component.
+     */
+    theme?: 'light' | 'dark';
+}
 /**
  * Coachmarks are used to call out specific functionality or concepts
  * within the UI that may not be intuitive but are important for the
  * user to gain understanding of the product's main value and discover new use cases.
  */
-export let Coachmark: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let Coachmark: React.ForwardRefExoticComponent<CoachmarkProps & React.RefAttributes<HTMLElement>>;
+export {};

package/lib/components/Coachmark/Coachmark.js

@@ -38,7 +38,6 @@ var defaults = {
   overlayKind: 'tooltip',
   theme: 'light'
 };
-
 /**
  * Coachmarks are used to call out specific functionality or concepts
  * within the UI that may not be intuitive but are important for the
@@ -186,7 +185,9 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onClose: handleClose,
     theme: theme,
     className: cx__default["default"](overlayClassName, "".concat(overlayBlockClass, "--is-visible"))
-  }, children), portalNode)));
+  }, children),
+  // Default to `document.body` when `portalNode` is `null`
+  portalNode || document.body)));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -227,13 +228,9 @@ exports.Coachmark.propTypes = {
    * What kind or style of Coachmark to render.
    */
   overlayKind: index["default"].oneOf(['tooltip', 'floating', 'stacked']),
-  overlayRef: index["default"].oneOfType([
-  // Either a function
-  index["default"].func,
-  // Or the instance of a DOM native element (see the note about SSR)
-  index["default"].shape({
-    current: index["default"].instanceOf(index.propTypesExports.Component)
-  })]),
+  overlayRef: index["default"].shape({
+    current: index["default"].instanceOf(HTMLElement)
+  }),
   /**
    * By default, the Coachmark will be appended to the end of `document.body`.
    * The Coachmark will remain persistent as the user navigates the app until

package/lib/components/Coachmark/CoachmarkDragbar.d.ts

@@ -1,6 +1,44 @@
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * 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 from 'react';
+interface CoachmarkDragbarProps {
+    /**
+     * Handler to manage keyboard interactions with the dragbar.
+     */
+    a11yKeyboardHandler: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
+    /**
+     * Function to call when the close button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * Function to call when the user clicks and drags the Coachmark.
+     * For internal use only by the parent CoachmarkOverlay.
+     */
+    onDrag?: (movementX: number, movementY: number) => void;
+    /**
+     * Show/hide the "X" close button.
+     */
+    showCloseButton?: boolean;
+    /**
+     * Determines the theme of the component.
+     */
+    theme?: 'light' | 'dark';
+    /**
+     * Additional props passed to the component.
+     */
+    [key: string]: any;
+}
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.
  */
-export let CoachmarkDragbar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CoachmarkDragbar: React.ForwardRefExoticComponent<Omit<CoachmarkDragbarProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export {};

package/lib/components/Coachmark/CoachmarkDragbar.js

@@ -40,7 +40,6 @@ var defaults = {
   showCloseButton: true,
   theme: 'light'
 };
-
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.
@@ -100,6 +99,9 @@ exports.CoachmarkDragbar = /*#__PURE__*/React__default["default"].forwardRef(fun
     className: "".concat(overlayBlockClass, "__handle"),
     onMouseDown: handleDragStart,
     onKeyDown: a11yKeyboardHandler
+    // TODO: i18n
+    ,
+    title: "Drag Handle"
   }, _Draggable || (_Draggable = /*#__PURE__*/React__default["default"].createElement(icons.Draggable, {
     size: "16"
   }))), showCloseButton && /*#__PURE__*/React__default["default"].createElement(react.Button, {

package/lib/components/Coachmark/CoachmarkHeader.d.ts

@@ -1,6 +1,31 @@
+/**
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * 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 from 'react';
+interface CoachmarkHeaderProps {
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
+    /**
+     * Function to call when the close button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * Show/hide the "X" close button.
+     */
+    showCloseButton?: boolean;
+    /**
+     * Determines the theme of the component.
+     */
+    theme?: 'light' | 'dark';
+}
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.
  */
-export let CoachmarkHeader: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CoachmarkHeader: React.ForwardRefExoticComponent<CoachmarkHeaderProps & React.RefAttributes<HTMLElement>>;
+export {};

package/lib/components/Coachmark/CoachmarkHeader.js

@@ -35,7 +35,6 @@ var defaults = {
   showCloseButton: true,
   theme: 'light'
 };
-
 /**
  * DO NOT USE. This component is for the exclusive use
  * of other Novice to Pro components.