@carbon/ibm-products 2.38.0 → 2.39.0

package/es/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -63,21 +63,21 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var previousState = usePreviousValue({
     selectionAreaData: selectionAreaData,
     clickAndHoldActive: clickAndHoldActive,
-    rowHeight: defaultColumn.rowHeight
-  });
+    rowHeight: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight
+  }) || {};
 
   // Set custom css property containing the spreadsheet total width
   useEffect(function () {
-    ref === null || ref === void 0 || ref.current.style.setProperty("--".concat(blockClass, "--total-width"), px(totalColumnsWidth + scrollBarSize));
+    ref === null || ref === void 0 || ref.current.style.setProperty("--".concat(blockClass, "--total-width"), px((totalColumnsWidth || 0) + (scrollBarSize || 0)));
   }, [ref, scrollBarSize, totalColumnsWidth]);
 
   // Call the `onSelectionAreaChange` handler to send selection area data
   // back to the consumer
   useEffect(function () {
-    if (selectionAreaData.length) {
+    if (selectionAreaData !== null && selectionAreaData !== void 0 && selectionAreaData.length) {
       var _previousState$select;
       if (!clickAndHoldActive && previousState !== null && previousState !== void 0 && previousState.clickAndHoldActive || (previousState === null || previousState === void 0 || (_previousState$select = previousState.selectionAreaData) === null || _previousState$select === void 0 ? void 0 : _previousState$select.length) !== (selectionAreaData === null || selectionAreaData === void 0 ? void 0 : selectionAreaData.length)) {
-        onSelectionAreaChange(selectionAreaData);
+        onSelectionAreaChange === null || onSelectionAreaChange === void 0 || onSelectionAreaChange(selectionAreaData);
       }
     }
   }, [previousState === null || previousState === void 0 ? void 0 : previousState.selectionAreaData, selectionAreaData, onSelectionAreaChange, clickAndHoldActive, previousState === null || previousState === void 0 ? void 0 : previousState.clickAndHoldActive]);
@@ -109,7 +109,7 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
             }),
             selectionId: area.matcher
           };
-          setSelectionAreaData(function (prev) {
+          setSelectionAreaData === null || setSelectionAreaData === void 0 || setSelectionAreaData(function (prev) {
             var prevValues = deepCloneObject(prev);
             var newAreaData = prevValues.filter(function (item) {
               return item.selectionId !== area.matcher;
@@ -167,19 +167,28 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   // cell also gets updated with the new size and new top placement
   // value. All of the cell selections will be updated as well
   useEffect(function () {
-    var listContainer = spreadsheetBodyRef === null || spreadsheetBodyRef === void 0 ? void 0 : spreadsheetBodyRef.current;
-    var activeCellButton = listContainer.querySelector(".".concat(blockClass, "__active-cell--highlight"));
-    if (activeCellButton && defaultColumn.rowHeight !== previousState.rowHeight) {
+    var listContainer;
+    var activeCellButton;
+    if (spreadsheetBodyRef !== null && spreadsheetBodyRef !== void 0 && spreadsheetBodyRef.current) {
+      var _listContainer;
+      listContainer = spreadsheetBodyRef === null || spreadsheetBodyRef === void 0 ? void 0 : spreadsheetBodyRef.current;
+      activeCellButton = (_listContainer = listContainer) === null || _listContainer === void 0 ? void 0 : _listContainer.querySelector(".".concat(blockClass, "__active-cell--highlight"));
+    }
+    if (activeCellButton && (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight) !== previousState.rowHeight) {
       activeCellButton.style.height = "".concat(defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight, "px");
       if (activeCellCoordinates) {
-        var activeTargetElement = ref.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates.column, "\"]"));
-        var _listContainer = ref.current.querySelector(".".concat(blockClass, "__list--container"));
-        var newActiveCellTopPosition = activeTargetElement.getBoundingClientRect().top - _listContainer.getBoundingClientRect().top;
+        var activeTargetElement = ref === null || ref === void 0 ? void 0 : ref.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates.column, "\"]"));
+        var _listContainer2 = ref === null || ref === void 0 ? void 0 : ref.current.querySelector(".".concat(blockClass, "__list--container"));
+        var newActiveCellTopPosition;
+        if (activeTargetElement && _listContainer2) {
+          newActiveCellTopPosition = (activeTargetElement === null || activeTargetElement === void 0 ? void 0 : activeTargetElement.getBoundingClientRect().top) - _listContainer2.getBoundingClientRect().top;
+        }
         activeCellButton.style.top = px(newActiveCellTopPosition);
         removeCellSelections({
+          matcher: undefined,
           spreadsheetRef: ref
         });
-        selectionAreas.map(function (area) {
+        selectionAreas === null || selectionAreas === void 0 || selectionAreas.map(function (area) {
           if (!area.areaCreated && area.point1 && area.point2 && area.matcher) {
             return createCellSelectionArea({
               ref: ref,
@@ -202,12 +211,12 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var removeDuplicateSelections = useCallback(function () {
     var uniqueAttrArray = [],
       removedSelectionAreaMatcherArr = [];
-    ref.current.querySelectorAll(".".concat(blockClass, "__selection-area--element")).forEach(function (selectorEl) {
-      var _selectorEl$style = selectorEl.style,
-        top = _selectorEl$style.top,
-        left = _selectorEl$style.left,
-        height = _selectorEl$style.height,
-        width = _selectorEl$style.width;
+    ref === null || ref === void 0 || ref.current.querySelectorAll(".".concat(blockClass, "__selection-area--element")).forEach(function (selectorEl) {
+      var _style = selectorEl.style,
+        top = _style.top,
+        left = _style.left,
+        height = _style.height,
+        width = _style.width;
       var uniqueAttrStr = "".concat(top).concat(left).concat(height).concat(width); // eg: 20px30px70px90px
       if (uniqueAttrArray.indexOf(uniqueAttrStr) == -1) {
         uniqueAttrArray.push(uniqueAttrStr);
@@ -219,13 +228,13 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
     //clean the duplicate selectionAreaData and selectionArea
     if (removedSelectionAreaMatcherArr.length) {
-      setSelectionAreas(function (prev) {
+      setSelectionAreas === null || setSelectionAreas === void 0 || setSelectionAreas(function (prev) {
         var prevValues = deepCloneObject(prev);
         return prevValues.filter(function (item) {
           return !removedSelectionAreaMatcherArr.includes(item.matcher);
         });
       });
-      setSelectionAreaData(function (prev) {
+      setSelectionAreaData === null || setSelectionAreaData === void 0 || setSelectionAreaData(function (prev) {
         var prevValues = deepCloneObject(prev);
         return prevValues.filter(function (item) {
           return !removedSelectionAreaMatcherArr.includes(item.selectionId);
@@ -248,14 +257,14 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     };
   }, [currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea, activeCellRef]);
   var handleBodyScroll = function handleBodyScroll() {
-    var headerRowElement = ref.current.querySelector("\n        .".concat(blockClass, "__header--container .").concat(blockClass, "__tr"));
-    headerRowElement.scrollLeft = contentScrollRef.current.scrollLeft;
+    var headerRowElement = ref.current.querySelector("\n        .".concat(blockClass, "__header--container .").concat(blockClass, "__tr")) || new HTMLDivElement();
+    headerRowElement.scrollLeft = contentScrollRef === null || contentScrollRef === void 0 ? void 0 : contentScrollRef.current.scrollLeft;
   };
   useEffect(function () {
-    contentScrollRef.current.addEventListener('scroll', function (event) {
+    contentScrollRef.current.addEventListener('scroll', function () {
       return handleBodyScroll();
     });
-    var contentScrollElementRef = contentScrollRef.current;
+    var contentScrollElementRef = contentScrollRef.current || new HTMLElement();
     return function () {
       contentScrollElementRef.removeEventListener('scroll', handleBodyScroll);
     };
@@ -280,12 +289,12 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
         _toConsumableArray(Array(defaultEmptyRowCount)).map(function () {
           var _headerGroups$;
           var emptyCell = {};
-          (_headerGroups$ = headerGroups[0]) === null || _headerGroups$ === void 0 || _headerGroups$.headers.map(function (header) {
+          headerGroups === null || headerGroups === void 0 || (_headerGroups$ = headerGroups[0]) === null || _headerGroups$ === void 0 || _headerGroups$.headers.map(function (header) {
             emptyCell[header.id] = null;
           });
           emptyRowData.push(emptyCell);
         });
-        onDataUpdate(emptyRowData);
+        onDataUpdate === null || onDataUpdate === void 0 || onDataUpdate(emptyRowData);
       };
       buildEmptyRows();
     }
@@ -298,9 +307,9 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var RenderRow = useCallback(function (_ref3) {
     var index = _ref3.index,
       style = _ref3.style;
-    var row = rows[index];
+    var row = rows === null || rows === void 0 ? void 0 : rows[index];
     if (rows && rows.length) {
-      prepareRow(row);
+      prepareRow === null || prepareRow === void 0 || prepareRow(row);
       var rowProps = prepareProps(row.getRowProps({
         style: style
       }), 'key');
@@ -355,12 +364,14 @@ var DataSpreadsheetBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React__default.createElement("div", _extends({
     ref: spreadsheetBodyRef,
     className: cx("".concat(blockClass, "__body--container"))
-  }, getTableBodyProps()), /*#__PURE__*/React__default.createElement(FixedSizeList, {
+  }, getTableBodyProps === null || getTableBodyProps === void 0 ? void 0 : getTableBodyProps()), /*#__PURE__*/React__default.createElement(FixedSizeList, {
     className: cx("".concat(blockClass, "__list--container"), "".concat(blockClass, "__list--container--").concat(id)),
     height: 400,
-    itemCount: rows.length || defaultEmptyRowCount,
+    itemCount: (rows === null || rows === void 0 ? void 0 : rows.length) || defaultEmptyRowCount,
     itemSize: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeight,
     width: getSpreadsheetWidth({
+      headerGroup: undefined,
+      type: undefined,
       scrollBarSizeValue: scrollBarSize,
       totalVisibleColumns: totalVisibleColumns,
       defaultColumn: defaultColumn,
@@ -374,6 +385,7 @@ DataSpreadsheetBody.propTypes = {
   /**
    * Object containing the active cell coordinates
    */
+  /**@ts-ignore */
   activeCellCoordinates: PropTypes.shape({
     row: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     column: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
@@ -381,6 +393,7 @@ DataSpreadsheetBody.propTypes = {
   /**
    *This is the ref of the button input, which is the active cell element
    */
+  /**@ts-ignore */
   activeCellRef: PropTypes.object,
   /**
    * Is the user clicking and holding in the data spreadsheet body
@@ -397,6 +410,7 @@ DataSpreadsheetBody.propTypes = {
   /**
    * Default spreadsheet sizing values
    */
+  /**@ts-ignore */
   defaultColumn: PropTypes.shape({
     rowHeight: PropTypes.number,
     rowHeaderWidth: PropTypes.number,
@@ -498,6 +512,7 @@ DataSpreadsheetBody.propTypes = {
   /**
    * Prop from react-table used to reorder columns
    */
+  /**@ts-ignore */
   visibleColumns: PropTypes.array
 };
 

package/es/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/es/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -52,12 +52,12 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setSelectedHeaderReorderActive = _useState4[1];
   var previousState = usePreviousValue({
     cellSize: cellSize
-  });
+  }) || {};
   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;
       setScrollBarSizeValue(scrollBarValue);
     }
@@ -71,15 +71,16 @@ var DataSpreadsheetHeader = /*#__PURE__*/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
       });
     };
   };
@@ -96,34 +97,36 @@ var DataSpreadsheetHeader = /*#__PURE__*/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 = 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 = 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({
@@ -134,7 +137,7 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React__default.createElement("div", {
     className: cx("".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 = prepareProps(headerGroup.getHeaderGroupProps(), 'key');
     return /*#__PURE__*/React__default.createElement("div", _extends({
       key: "header_".concat(index)
@@ -146,6 +149,7 @@ var DataSpreadsheetHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
           scrollBarSizeValue: scrollBarSizeValue,
           totalVisibleColumns: totalVisibleColumns,
           defaultColumn: defaultColumn,
+          totalColumnsWidth: undefined,
           visibleColumns: visibleColumns
         }),
         overflow: 'hidden'
@@ -179,11 +183,11 @@ var DataSpreadsheetHeader = /*#__PURE__*/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)
@@ -198,6 +202,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * Object containing the active cell coordinates
    */
+  /**@ts-ignore */
   activeCellCoordinates: PropTypes.shape({
     row: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     column: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
@@ -217,6 +222,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * Default spreadsheet sizing values
    */
+  /**@ts-ignore */
   defaultColumn: PropTypes.shape({
     rowHeight: PropTypes.number,
     rowHeaderWidth: PropTypes.number,
@@ -233,6 +239,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * All of the spreadsheet row data
    */
+  /**@ts-ignore */
   rows: PropTypes.arrayOf(PropTypes.object),
   /**
    * The scrollbar width
@@ -245,6 +252,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * All of the cell selection area items
    */
+  /**@ts-ignore */
   selectionAreas: PropTypes.arrayOf(PropTypes.object),
   /**
    * Setter fn for activeCellCoordinates value
@@ -278,6 +286,7 @@ DataSpreadsheetHeader.propTypes = {
   /**
    * Array of visible columns provided by react-table useTable hook
    */
+  /**@ts-ignore */
   visibleColumns: PropTypes.array
 };
 

package/es/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/es/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/es/components/GetStartedCard/GetStartedCard.js

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

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

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

package/es/components/Guidebanner/Guidebanner.js

@@ -77,7 +77,6 @@ var Guidebanner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     });
   };
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
-    "aria-expanded": !isCollapsed,
     className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), withLeftGutter && "".concat(blockClass, "__with-left-gutter")),
     ref: ref
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(Idea, {
@@ -108,7 +107,8 @@ var Guidebanner = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     size: "md",
     className: "".concat(blockClass, "__toggle-button"),
     onClick: handleClickToggle,
-    ref: toggleRef
+    ref: toggleRef,
+    "aria-expanded": !isCollapsed
   }, isCollapsed ? expandButtonLabel : collapseButtonLabel), showNavigation && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
     className: cx("".concat(blockClass, "__back-button"), [scrollPosition === 0 ? "".concat(blockClass, "__back-button--disabled") : null])
   }, /*#__PURE__*/React__default.createElement(IconButton, {