@carbon/ibm-products 2.38.0 → 2.40.0

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.d.ts

@@ -1,2 +1,89 @@
-export const DataSpreadsheetHeader: 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, { Dispatch, SetStateAction } from 'react';
+import { ActiveCellCoordinates, Column, ItemType, Size } from './types';
+interface DataSpreadsheetHeaderProps {
+    /**
+     * Object containing the active cell coordinates
+     */
+    activeCellCoordinates?: ActiveCellCoordinates | null;
+    /**
+     * Specifies the cell height
+     */
+    cellSize?: Size;
+    /**
+     * All of the spreadsheet columns
+     */
+    columns?: readonly Column[];
+    /**
+     * uuid that corresponds to the current selection area
+     */
+    currentMatcher?: string;
+    /**
+     * Default spreadsheet sizing values
+     */
+    defaultColumn?: Column;
+    /**
+     * Whether or not a click/hold is active on a header cell
+     */
+    headerCellHoldActive?: boolean;
+    /**
+     * Headers provided from useTable hook
+     */
+    headerGroups?: any[];
+    /**
+     * All of the spreadsheet row data
+     */
+    rows?: object[];
+    /**
+     * The scrollbar width
+     */
+    scrollBarSize?: number;
+    /**
+     * The aria label applied to the Select all button
+     */
+    selectAllAriaLabel: string;
+    /**
+     * All of the cell selection area items
+     */
+    selectionAreas?: ItemType[];
+    /**
+     * Setter fn for activeCellCoordinates value
+     */
+    setActiveCellCoordinates?: Dispatch<SetStateAction<ActiveCellCoordinates | null>>;
+    /**
+     * Setter fn for currentMatcher value
+     */
+    setCurrentMatcher?: Dispatch<SetStateAction<string>>;
+    /**
+     * Setter fn for header cell hold active value
+     */
+    setHeaderCellHoldActive?: (arg: boolean) => void;
+    /**
+     * Setter fn for selectionAreaData state value
+     */
+    setSelectionAreaData?: Dispatch<SetStateAction<object[]>>;
+    /**
+     * Setter fn for selectionAreas value
+     */
+    setSelectionAreas?: Dispatch<SetStateAction<object[]>>;
+    /**
+     * The total number of columns to be initially visible, additional columns will be rendered and
+     * visible via horizontal scrollbar
+     */
+    totalVisibleColumns?: number;
+    /**
+     * Function used to update the active cell coordinates
+     */
+    updateActiveCellCoordinates?: (arg: any) => void;
+    /**
+     * Array of visible columns provided by react-table useTable hook
+     */
+    visibleColumns?: [];
+}
+export declare const DataSpreadsheetHeader: React.ForwardRefExoticComponent<DataSpreadsheetHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -61,13 +61,18 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setSelectedHeaderReorderActive = _useState4[1];
   var previousState = usePreviousValue.usePreviousValue({
     cellSize: cellSize
-  });
+  }) || {};
   React.useEffect(function () {
     if ((previousState === null || previousState === void 0 ? void 0 : previousState.cellSize) !== cellSize) {
-      var _ref$current;
-      var scrollContainer = ref === null || ref === void 0 || (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(".".concat(blockClass, "__list--container"));
-      var hasScrollBar = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollHeight) > (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.clientHeight);
+      var _current;
+      var scrollContainer = ref === null || ref === void 0 || (_current = ref.current) === null || _current === void 0 ? void 0 : _current.querySelector(".".concat(blockClass, "__list--container"));
+      var hasScrollBar = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollHeight) && (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.clientHeight) && (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollHeight) > (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.clientHeight);
       var scrollBarValue = hasScrollBar ? 0 : scrollBarSize;
+
+      // fix for a11y violation element_scrollable_tabbable
+      if (!(scrollContainer !== null && scrollContainer !== void 0 && scrollContainer.getAttribute('tabIndex'))) {
+        scrollContainer === null || scrollContainer === void 0 || scrollContainer.setAttribute('tabIndex', '0');
+      }
       setScrollBarSizeValue(scrollBarValue);
     }
   }, [cellSize, ref, scrollBarSize, previousState === null || previousState === void 0 ? void 0 : previousState.cellSize]);
@@ -80,15 +85,16 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         activeCellCoordinates: activeCellCoordinates,
         rows: rows,
         columns: columns,
+        currentMatcher: currentMatcher,
         setActiveCellCoordinates: setActiveCellCoordinates,
         setCurrentMatcher: setCurrentMatcher,
         setSelectionAreas: setSelectionAreas,
         spreadsheetRef: ref,
         index: index,
+        isKeyboard: undefined,
         setSelectionAreaData: setSelectionAreaData,
         isHoldingCommandKey: isHoldingCommandKey,
-        isHoldingShiftKey: isHoldingShiftKey,
-        currentMatcher: currentMatcher
+        isHoldingShiftKey: isHoldingShiftKey
       });
     };
   };
@@ -105,34 +111,36 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   var handleHeaderMouseDown = function handleHeaderMouseDown(index) {
     return function (event) {
-      var _selectionAreaToClone;
+      var _selectionAreaToClone, _selectionAreaToClone2, _selectionAreaToClone3, _document;
       if (event.shiftKey) {
         // Remove columns, need to call handleHeaderCellSelection
         return;
       }
       setSelectedHeaderReorderActive(true);
-      var selectionAreaToClone = selectionAreas.filter(function (item) {
+      var selectionAreaToClone = selectionAreas === null || selectionAreas === void 0 ? void 0 : selectionAreas.filter(function (item) {
         return (item === null || item === void 0 ? void 0 : item.matcher) === currentMatcher;
       });
-      var selectionAreaElement = ref.current.querySelector("[data-matcher-id=\"".concat((_selectionAreaToClone = selectionAreaToClone[0]) === null || _selectionAreaToClone === void 0 ? void 0 : _selectionAreaToClone.matcher, "\"]"));
+      var selectionAreaElement = ref.current.querySelector("[data-matcher-id=\"".concat(selectionAreaToClone === null || selectionAreaToClone === void 0 || (_selectionAreaToClone = selectionAreaToClone[0]) === null || _selectionAreaToClone === void 0 ? void 0 : _selectionAreaToClone.matcher, "\"]"));
       var clickXPosition = event.clientX;
       var headerButtonCoords = event.target.getBoundingClientRect();
       var headerIndex = event.target.getAttribute('data-column-index');
       var offsetXValue = clickXPosition - headerButtonCoords.left;
-      var lowestColumnIndexFromSelectionArea = Math.min(selectionAreaToClone[0].point1.column, selectionAreaToClone[0].point2.column);
-      var selectionAreaCoords = selectionAreaElement.getBoundingClientRect();
-      var updatedOffsetDifference = lowestColumnIndexFromSelectionArea < parseInt(headerIndex) ? offsetXValue + (headerButtonCoords.left - selectionAreaCoords.left) : offsetXValue;
-      var bodyContainer = document.querySelector(".".concat(blockClass, "__list--container")).firstElementChild;
-      var selectionAreaClonedElement = selectionAreaElement.cloneNode();
-      var reorderIndicatorLine = selectionAreaElement.cloneNode();
-      reorderIndicatorLine.className = "".concat(blockClass, "__reorder-indicator-line");
-      reorderIndicatorLine.style.width = layout.px(2);
+      var lowestColumnIndexFromSelectionArea = Math.min((selectionAreaToClone === null || selectionAreaToClone === void 0 || (_selectionAreaToClone2 = selectionAreaToClone[0]) === null || _selectionAreaToClone2 === void 0 || (_selectionAreaToClone2 = _selectionAreaToClone2.point1) === null || _selectionAreaToClone2 === void 0 ? void 0 : _selectionAreaToClone2.column) || 0, (selectionAreaToClone === null || selectionAreaToClone === void 0 || (_selectionAreaToClone3 = selectionAreaToClone[0]) === null || _selectionAreaToClone3 === void 0 || (_selectionAreaToClone3 = _selectionAreaToClone3.point2) === null || _selectionAreaToClone3 === void 0 ? void 0 : _selectionAreaToClone3.column) || 0);
+      var selectionAreaCoords = (selectionAreaElement === null || selectionAreaElement === void 0 ? void 0 : selectionAreaElement.getBoundingClientRect()) || new DOMRect();
+      var updatedOffsetDifference = lowestColumnIndexFromSelectionArea < parseInt(headerIndex) ? offsetXValue + (headerButtonCoords.left - (selectionAreaCoords === null || selectionAreaCoords === void 0 ? void 0 : selectionAreaCoords.left)) : offsetXValue;
+      var bodyContainer = (_document = document) === null || _document === void 0 || (_document = _document.querySelector(".".concat(blockClass, "__list--container"))) === null || _document === void 0 ? void 0 : _document.firstElementChild;
+      var selectionAreaClonedElement = selectionAreaElement === null || selectionAreaElement === void 0 ? void 0 : selectionAreaElement.cloneNode();
+      var reorderIndicatorLine = selectionAreaElement === null || selectionAreaElement === void 0 ? void 0 : selectionAreaElement.cloneNode();
+      if (reorderIndicatorLine) {
+        reorderIndicatorLine.className = "".concat(blockClass, "__reorder-indicator-line");
+        reorderIndicatorLine.style.width = layout.px(2);
+      }
       selectionAreaClonedElement.classList.add("".concat(blockClass, "__selection-area--element-cloned"));
-      selectionAreaClonedElement.setAttribute('data-clone-offset-x', updatedOffsetDifference);
+      selectionAreaClonedElement.setAttribute('data-clone-offset-x', "".concat(updatedOffsetDifference));
       selectionAreaClonedElement.setAttribute('data-column-index-original', index);
-      bodyContainer.appendChild(selectionAreaClonedElement);
-      bodyContainer.appendChild(reorderIndicatorLine);
-      setHeaderCellHoldActive(true);
+      bodyContainer === null || bodyContainer === void 0 || bodyContainer.appendChild(selectionAreaClonedElement);
+      bodyContainer === null || bodyContainer === void 0 || bodyContainer.appendChild(reorderIndicatorLine);
+      setHeaderCellHoldActive === null || setHeaderCellHoldActive === void 0 || setHeaderCellHoldActive(true);
     };
   };
   useSpreadsheetMouseMove.useSpreadsheetMouseMove({
@@ -143,7 +151,7 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: cx__default["default"]("".concat(blockClass, "__header--container")),
     role: "rowgroup"
-  }, headerGroups.map(function (headerGroup, index) {
+  }, headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups.map(function (headerGroup, index) {
     var headerProps = propsHelper.prepareProps(headerGroup.getHeaderGroupProps(), 'key');
     return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
       key: "header_".concat(index)
@@ -155,6 +163,7 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           scrollBarSizeValue: scrollBarSizeValue,
           totalVisibleColumns: totalVisibleColumns,
           defaultColumn: defaultColumn,
+          totalColumnsWidth: undefined,
           visibleColumns: visibleColumns
         }),
         overflow: 'hidden'
@@ -188,11 +197,11 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         "data-row-index": "header",
         "data-column-index": index,
         tabIndex: -1,
-        onMouseDown: selectedHeader ? handleHeaderMouseDown(index) : null,
+        onMouseDown: selectedHeader ? handleHeaderMouseDown(index) : undefined,
         onMouseUp: selectedHeader ? function () {
           return setSelectedHeaderReorderActive(false);
-        } : null,
-        onClick: !selectedHeader ? handleColumnHeaderClick(index) : null,
+        } : undefined,
+        onClick: !selectedHeader ? handleColumnHeaderClick(index) : undefined,
         style: {
           height: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
           width: (column === null || column === void 0 ? void 0 : column.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width)
@@ -207,6 +216,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * Object containing the active cell coordinates
    */
+  /**@ts-ignore */
   activeCellCoordinates: index["default"].shape({
     row: index["default"].oneOfType([index["default"].number, index["default"].string]),
     column: index["default"].oneOfType([index["default"].number, index["default"].string])
@@ -226,6 +236,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * Default spreadsheet sizing values
    */
+  /**@ts-ignore */
   defaultColumn: index["default"].shape({
     rowHeight: index["default"].number,
     rowHeaderWidth: index["default"].number,
@@ -242,6 +253,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * All of the spreadsheet row data
    */
+  /**@ts-ignore */
   rows: index["default"].arrayOf(index["default"].object),
   /**
    * The scrollbar width
@@ -254,6 +266,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * All of the cell selection area items
    */
+  /**@ts-ignore */
   selectionAreas: index["default"].arrayOf(index["default"].object),
   /**
    * Setter fn for activeCellCoordinates value
@@ -287,6 +300,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * Array of visible columns provided by react-table useTable hook
    */
+  /**@ts-ignore */
   visibleColumns: index["default"].array
 };
 

package/lib/components/DataSpreadsheet/types/index.d.ts

@@ -0,0 +1,30 @@
+export type Size = 'xs' | 'sm' | 'md' | 'lg';
+export type Theme = 'light' | 'dark';
+export interface Column {
+    Header?: string;
+    accessor?: string | (() => void);
+    Cell?: () => void;
+    rowHeight?: number;
+    rowHeaderWidth?: number;
+    width?: number;
+}
+export interface ActiveCellCoordinates {
+    row?: number | string;
+    column?: number | string;
+}
+export interface PrevState {
+    activeCellCoordinates?: ActiveCellCoordinates;
+    isEditing?: boolean;
+    selectionAreaData?: object[];
+    clickAndHoldActive?: boolean;
+    rowHeight?: number;
+    cellSize?: Size;
+}
+export interface Point {
+    column?: number;
+}
+export interface ItemType {
+    matcher?: string;
+    point1?: Point;
+    point2?: Point;
+}

package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -47,7 +47,8 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     page = datagridState.page,
     handleResize = datagridState.handleResize,
     gridRef = datagridState.gridRef,
-    tableId = datagridState.tableId;
+    tableId = datagridState.tableId,
+    onVirtualScroll = datagridState.onVirtualScroll;
 
   /* istanbul ignore next */
   var handleVirtualGridResize = function handleVirtualGridResize() {
@@ -97,6 +98,9 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     },
     estimatedItemSize: rowHeight,
     onScroll: onScroll,
+    onItemsRendered: function onItemsRendered(e) {
+      return onVirtualScroll === null || onVirtualScroll === void 0 ? void 0 : onVirtualScroll(e);
+    },
     innerRef: innerListRef,
     outerRef: testRef,
     ref: listRef,

package/lib/components/ExpressiveCard/ExpressiveCard.d.ts

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 type ActionIcon = {
     id?: string;
     icon?: () => void | object;
@@ -50,7 +51,7 @@ interface ExpressiveCardProps extends PropsWithChildren {
     /**
      * Provides the icon that's displayed at the top of the card
      */
-    pictogram?: () => void | object;
+    pictogram?: CarbonIconType;
     /**
      * Optionally specify an href for your Button to become an <a> element
      */

package/lib/components/GetStartedCard/GetStartedCard.d.ts

@@ -0,0 +1,5 @@
+/**
+ * GetStartedCard a card with icon, number, and media variants
+ */
+export let GetStartedCard: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/lib/components/GetStartedCard/GetStartedCard.js

@@ -0,0 +1,88 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../node_modules/prop-types/index.js');
+var devtools = require('../../global/js/utils/devtools.js');
+var settings = require('../../settings.js');
+var Card = require('../Card/Card.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var componentName = 'GetStartedCard';
+
+/**
+ * GetStartedCard a card with icon, number, and media variants
+ */
+exports.GetStartedCard = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+  var rest = _rollupPluginBabelHelpers["extends"]({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(_ref), _ref));
+  return /*#__PURE__*/React__default["default"].createElement(Card.Card, _rollupPluginBabelHelpers["extends"]({
+    getStarted: true,
+    ref: ref
+  }, rest, devtools.getDevtoolsProps(componentName)));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.GetStartedCard = settings.pkg.checkComponentEnabled(exports.GetStartedCard, componentName);
+exports.GetStartedCard.displayName = componentName;
+exports.GetStartedCard.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index["default"].string,
+  /**
+   * Optional if the card should be disabled
+   */
+  disabled: index["default"].bool,
+  /**
+   * Provides the action icon that's displayed at the footer of the card
+   */
+  footerActionIcon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  /**
+   * Optional label for the top of the card
+   */
+  label: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node]),
+  /**
+   * Optional media content like an image to be placed in the card
+   */
+  media: index["default"].node,
+  /**
+   * Icons that are displayed on the card showing the time and skill needed
+   */
+  metadata: index["default"].arrayOf(index["default"].shape({
+    id: index["default"].string,
+    icon: index["default"].oneOfType([index["default"].func, index["default"].object]),
+    iconDescription: index["default"].string
+  })),
+  /**
+   * Provides the callback for a clickable card
+   */
+  onClick: index["default"].func.isRequired,
+  /**
+   * Provides the icon that's displayed at the top of the card
+   */
+  pictogram: index["default"].oneOfType([index["default"].func, index["default"].object]),
+  /**
+   * Provides number for card for tasks in a sequential order
+   */
+  sequence: index["default"].number,
+  /**
+   * Provides the status that's displayed at the top of the card
+   */
+  status: index["default"].oneOf(['complete', 'incomplete']),
+  /**
+   * Title that's displayed at the top of the card
+   */
+  title: index["default"].oneOfType([index["default"].string, index["default"].object, index["default"].node])
+};

package/lib/components/GetStartedCard/index.d.ts

@@ -0,0 +1 @@
+export { GetStartedCard } from "./GetStartedCard";

package/lib/components/Guidebanner/Guidebanner.d.ts

@@ -1,6 +1,66 @@
+/**
+ * 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, { ReactNode } from 'react';
+interface GuidebannerProps {
+    /**
+     * Provide the contents of the Guidebanner.
+     * One or more GuidebannerElement components are required.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
+    /**
+     * Text label for the Collapse button.
+     */
+    collapseButtonLabel?: string;
+    /**
+     * When true, the Guidebanner will initialize in a collapsed state,
+     * showing the title and the Expand button.
+     *
+     * When expanded, it will show the GuidebannerElement child components and the Collapse button.
+     */
+    collapsible?: boolean;
+    /**
+     * Text label for the Expand button.
+     */
+    expandButtonLabel?: string;
+    /**
+     * Tooltip text and aria label for the Next button icon.
+     */
+    nextIconDescription?: string;
+    /**
+     * If defined, a Close button will render in the top-right corner and a
+     * callback function will be triggered when button is clicked.
+     */
+    onClose?: () => void;
+    /**
+     * Tooltip text and aria label for the Back button icon.
+     */
+    previousIconDescription?: string;
+    /**
+     * Title text.
+     */
+    title: string;
+    /**
+     * If true, insert 1 rem of "space" on the left of the component.
+     * This will allow the component's content to line up with other
+     * content on the page under special circumstances.
+     */
+    withLeftGutter?: boolean;
+}
 /**
  * The guide banner sits at the top of a page, or page-level tab,
  * to introduce foundational concepts related to the page's content.
  */
-export let Guidebanner: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let Guidebanner: React.ForwardRefExoticComponent<GuidebannerProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/Guidebanner/Guidebanner.js

@@ -66,8 +66,8 @@ exports.Guidebanner = /*#__PURE__*/React__default["default"].forwardRef(function
     previousIconDescription = _ref$previousIconDesc === void 0 ? defaults.previousIconDescription : _ref$previousIconDesc,
     title = _ref.title,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var scrollRef = React.useRef();
-  var toggleRef = React.useRef();
+  var scrollRef = React.useRef(null);
+  var toggleRef = React.useRef(null);
   var _useState = React.useState(0),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     scrollPosition = _useState2[0],
@@ -181,9 +181,10 @@ exports.Guidebanner.propTypes = {
     React__default["default"].Children.forEach(prop, function (child) {
       if (child.type.displayName !== 'GuidebannerElement') {
         var _child$type, _child$type2;
-        // If not GuidebannerElement, then show:
-        // React component name(child.type?.name) or
-        // HTML element name(child.type).
+        // If child element is not `GuidebannerElement`, then show:
+        // Carbon Products component's `displayName` (child.type.displayName) or
+        // React component's `name` (child.type.name) or
+        // HTML element's tag name (child.type).
         error = new Error("`Guidebanner` only accepts children of type `GuidebannerElement`, found `".concat(((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) || ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name) || child.type, "` instead."));
       }
     });

package/lib/components/Guidebanner/GuidebannerElement.d.ts

@@ -1,19 +1,32 @@
-export function GuidebannerElement({ button, className, description, title, ...rest }: {
-    [x: string]: any;
-    button: any;
-    className: any;
-    description: any;
-    title: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace GuidebannerElement {
-    export { componentName as displayName };
-    export namespace propTypes {
-        let button: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        let className: PropTypes.Requireable<string>;
-        let description: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-        let title: PropTypes.Requireable<string>;
-    }
+/**
+ * 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, { ReactNode } from 'react';
+interface GuidebannerElementProps {
+    /**
+     * An optional button can be rendered below the description.
+     * This can be a link, button, Coachmark button, etc.
+     */
+    button?: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * The description of the element.
+     */
+    description: ReactNode;
+    /**
+     * The title of the element.
+     */
+    title?: string;
 }
-declare const componentName: "GuidebannerElement";
-import PropTypes from 'prop-types';
+/**
+ * The GuidebannerElement is a required child component of the Guidebanner,
+ * and acts as a container for a CarouselItem.
+ */
+export declare let GuidebannerElement: React.ForwardRefExoticComponent<GuidebannerElementProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/lib/components/Guidebanner/GuidebannerElement.js

@@ -26,19 +26,19 @@ var _excluded = ["button", "className", "description", "title"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--guidebanner__element");
 var componentName = 'GuidebannerElement';
-
 /**
  * The GuidebannerElement is a required child component of the Guidebanner,
  * and acts as a container for a CarouselItem.
  */
-exports.GuidebannerElement = function GuidebannerElement(_ref) {
+exports.GuidebannerElement = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var button = _ref.button,
     className = _ref.className,
     description = _ref.description,
     title = _ref.title,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
-    className: cx__default["default"](blockClass, className)
+    className: cx__default["default"](blockClass, className),
+    ref: ref
   }, devtools.getDevtoolsProps(componentName)), title && /*#__PURE__*/React__default["default"].createElement("h2", {
     className: "".concat(blockClass, "-title")
   }, title), description && /*#__PURE__*/React__default["default"].createElement("p", {
@@ -46,7 +46,7 @@ exports.GuidebannerElement = function GuidebannerElement(_ref) {
   }, description), button && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "-buttons")
   }, button));
-};
+});
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.GuidebannerElement = settings.pkg.checkComponentEnabled(exports.GuidebannerElement, componentName);

package/lib/components/Guidebanner/GuidebannerElementButton.d.ts

@@ -1,17 +1,31 @@
-export function GuidebannerElementButton({ children, className, type, ...rest }: {
-    [x: string]: any;
-    children: any;
-    className: any;
-    type: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace GuidebannerElementButton {
-    export { componentName as displayName };
-    export namespace propTypes {
-        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
-        let className: PropTypes.Requireable<string>;
-        let type: PropTypes.Requireable<string>;
-    }
+/**
+ * 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, { ReactNode } from 'react';
+interface GuidebannerElementButtonProps {
+    /**
+     * Provide the contents of the GuidebannerElementLink.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Provide a description for the icon.
+     */
+    iconDescription?: string;
+    /**
+     * If type is "primary", then return a tertiary button with the "crossroads" icon,
+     * else return a ghost button.
+     */
+    type?: string;
 }
-declare const componentName: "GuidebannerElementButton";
-import PropTypes from 'prop-types';
+/**
+ * One of two buttons styled specifically for the GuidebannerElement.
+ */
+export declare let GuidebannerElementButton: React.ForwardRefExoticComponent<GuidebannerElementButtonProps & React.RefAttributes<Button>>;
 export {};