@carbon/ibm-products 2.39.0 → 2.40.0

package/lib/components/AddSelect/AddSelectBody.js

@@ -131,7 +131,7 @@ var AddSelectBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   var onCloseHandler = function onCloseHandler() {
     resetState();
-    onClose();
+    onClose === null || onClose === void 0 || onClose();
   };
   var tearsheetClassnames = cx__default["default"](className, blockClass, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__single"), !multi), "".concat(blockClass, "__multi"), multi));
   var globalFilterKeys = Object.keys(appliedGlobalFilters);
@@ -145,17 +145,17 @@ var AddSelectBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setAppliedGlobalFilters(filters);
   };
   var submitHandler = function submitHandler() {
-    if (multi && appliedModifiers.length > 0) {
+    if (multi && appliedModifiers && (appliedModifiers === null || appliedModifiers === void 0 ? void 0 : appliedModifiers.length) > 0) {
       var selections = multiSelection.map(function (item) {
         return appliedModifiers.find(function (mod) {
           return mod.id === item;
         });
       });
-      onSubmit(selections);
-    } else if (multi && appliedModifiers.length === 0) {
-      onSubmit(multiSelection);
+      onSubmit === null || onSubmit === void 0 || onSubmit(selections);
+    } else if (multi && (appliedModifiers === null || appliedModifiers === void 0 ? void 0 : appliedModifiers.length) === 0) {
+      onSubmit === null || onSubmit === void 0 || onSubmit(multiSelection);
     } else {
-      onSubmit(singleSelection);
+      onSubmit === null || onSubmit === void 0 || onSubmit(singleSelection);
     }
     onCloseHandler();
   };
@@ -222,9 +222,9 @@ var AddSelectBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     displayMetalPanel: displayMetalPanel,
     illustrationTheme: illustrationTheme,
     influencerTitle: influencerTitle,
-    items: useNormalizedItems ? normalizedItems : items.entries,
+    items: useNormalizedItems ? normalizedItems : items === null || items === void 0 ? void 0 : items.entries,
     metaPanelTitle: metaPanelTitle,
-    modifiers: items.modifiers,
+    modifiers: items === null || items === void 0 ? void 0 : items.modifiers,
     multiSelection: multiSelection,
     noSelectionDescription: noSelectionDescription,
     noSelectionTitle: noSelectionTitle,
@@ -266,11 +266,8 @@ var AddSelectBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     type: "gray",
     size: "sm"
   }, itemsToDisplay.length)), showSort && /*#__PURE__*/React__default["default"].createElement(AddSelectSort.AddSelectSort, {
-    items: itemsToDisplay,
     setSortAttribute: setSortAttribute,
     setSortDirection: setSortDirection,
-    sortAttribute: sortAttribute,
-    sortDirection: sortDirection,
     sortBy: globalSortBy
   }))), displayColumnView ? /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__columns")
@@ -282,7 +279,7 @@ var AddSelectBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     sortByLabel: sortByLabel
   }))) : /*#__PURE__*/React__default["default"].createElement("div", null, hasResults ? /*#__PURE__*/React__default["default"].createElement(AddSelectList.AddSelectList, _rollupPluginBabelHelpers["extends"]({}, commonListProps, {
     filteredItems: itemsToDisplay,
-    modifiers: items.modifiers,
+    modifiers: items === null || items === void 0 ? void 0 : items.modifiers,
     appliedModifiers: appliedModifiers,
     setAppliedModifiers: setAppliedModifiers,
     setParentSelected: parentSelectionHandler,
@@ -322,6 +319,7 @@ AddSelectBody.propTypes = {
   globalSortBy: index["default"].array,
   illustrationTheme: index["default"].oneOf(['light', 'dark']),
   influencerTitle: index["default"].string,
+  /**@ts-ignore */
   items: index["default"].shape({
     modifiers: index["default"].shape({
       id: index["default"].string,

package/lib/components/AddSelect/AddSelectSort.d.ts

@@ -1,18 +1,17 @@
-export function AddSelectSort({ setSortAttribute, setSortDirection, sortBy, sortByLabel, }: {
-    setSortAttribute: any;
-    setSortDirection: any;
-    sortBy: any;
-    sortByLabel: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace AddSelectSort {
-    export namespace propTypes {
-        let setSortAttribute: PropTypes.Requireable<(...args: any[]) => any>;
-        let setSortDirection: PropTypes.Requireable<(...args: any[]) => any>;
-        let sortBy: PropTypes.Requireable<any[]>;
-        let sortByLabel: PropTypes.Requireable<string>;
-    }
-    export { componentName as displayName };
-}
 import PropTypes from 'prop-types';
-declare const componentName: "AddSelectSort";
-export {};
+export interface AddSelectSortProps {
+    setSortAttribute?: (attribute: any) => void;
+    setSortDirection?: (direction: any) => void;
+    sortBy?: Array<string>;
+    sortByLabel?: string;
+}
+export declare const AddSelectSort: {
+    ({ setSortAttribute, setSortDirection, sortBy, sortByLabel, }: AddSelectSortProps): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        setSortAttribute: PropTypes.Requireable<(...args: any[]) => any>;
+        setSortDirection: PropTypes.Requireable<(...args: any[]) => any>;
+        sortBy: PropTypes.Requireable<any[]>;
+        sortByLabel: PropTypes.Requireable<string>;
+    };
+    displayName: string;
+};

package/lib/components/AddSelect/AddSelectSort.js

@@ -28,7 +28,7 @@ var AddSelectSort = function AddSelectSort(_ref) {
     setSortDirection = _ref.setSortDirection,
     sortBy = _ref.sortBy,
     sortByLabel = _ref.sortByLabel;
-  var sortByOpts = sortBy ? sortBy.reduce(function (acc, cur) {
+  var sortByOpts = sortBy ? sortBy === null || sortBy === void 0 ? void 0 : sortBy.reduce(function (acc, cur) {
     var opts = [{
       id: "".concat(cur, "-asc"),
       itemText: /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, _ArrowUp || (_ArrowUp = /*#__PURE__*/React__default["default"].createElement(icons.ArrowUp, {
@@ -51,8 +51,8 @@ var AddSelectSort = function AddSelectSort(_ref) {
   var sortHandler = function sortHandler(_ref2) {
     var direction = _ref2.direction,
       attribute = _ref2.attribute;
-    setSortAttribute(attribute);
-    setSortDirection(direction);
+    setSortAttribute === null || setSortAttribute === void 0 || setSortAttribute(attribute);
+    setSortDirection === null || setSortDirection === void 0 || setSortDirection(direction);
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: blockClass
@@ -69,8 +69,8 @@ var AddSelectSort = function AddSelectSort(_ref) {
   }, sortByOpts.map(function (opt) {
     return /*#__PURE__*/React__default["default"].createElement(react.OverflowMenuItem, {
       className: "".concat(blockClass, "_overflow-item"),
-      key: opt.id,
-      itemText: opt.itemText,
+      key: opt === null || opt === void 0 ? void 0 : opt.id,
+      itemText: opt === null || opt === void 0 ? void 0 : opt.itemText,
       onClick: function onClick() {
         return sortHandler(opt);
       }

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

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+export type Theme = 'light' | 'dark';
+export interface Filter {
+    id?: string;
+    label?: string;
+}
+export interface Modifier {
+    id?: string;
+    label?: string;
+    options?: string[];
+}
+export interface Avatar {
+    alt?: string;
+    icon?: () => void;
+    src?: string;
+    theme?: Theme;
+}
+export interface Meta {
+    id?: string;
+    title?: string;
+    value?: string;
+}
+export interface Entry {
+    id: string;
+    title: string;
+    value: string;
+    avatar?: Avatar;
+    children?: ReactNode;
+    icon?: () => void | object;
+    meta?: Meta[] | ReactNode;
+    subtitle?: string;
+}
+export interface Item {
+    entries: Entry[];
+    modifiers?: Modifier;
+    sortBy?: string[];
+    filterBy?: string[];
+}
+export interface SortOption {
+    id?: string;
+    direction?: string;
+    attribute?: string;
+    itemText?: object;
+}

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.d.ts

@@ -27,7 +27,11 @@ export namespace BreadcrumbWithOverflow {
              */
             label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
             /**
-             * A string based alternative to the children, required only if children is not of type string.
+             * An optional title label for extra long breadcrumb
+             */
+            shortTitle: PropTypes.Requireable<string>;
+            /**
+             * A string based alternative to the children, required only if children is not of type string
              */
             title: any;
         }> | null | undefined)[]>;

package/lib/components/BreadcrumbWithOverflow/BreadcrumbWithOverflow.js

@@ -28,8 +28,8 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _TooltipTrigger;
 var _excluded = ["breadcrumbs", "className", "maxVisible", "noTrailingSlash", "overflowAriaLabel", "overflowTooltipAlign"],
-  _excluded2 = ["label", "key", "title", "id"],
-  _excluded3 = ["className", "key", "label", "title"];
+  _excluded2 = ["label", "key", "title", "id", "shortTitle"],
+  _excluded3 = ["className", "key", "label", "shortTitle", "title"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--breadcrumb-with-overflow");
@@ -115,8 +115,9 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       var label = _ref3.label,
         key = _ref3.key,
         title = _ref3.title,
-        id = _ref3.id,
-        rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded2);
+        id = _ref3.id;
+        _ref3.shortTitle;
+        var rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded2);
       return /*#__PURE__*/React__default["default"].createElement(react.BreadcrumbItem, _rollupPluginBabelHelpers["extends"]({
         key: key
       }, rest, {
@@ -137,13 +138,14 @@ exports.BreadcrumbWithOverflow = function BreadcrumbWithOverflow(_ref) {
       var className = _ref4.className,
         key = _ref4.key,
         label = _ref4.label,
+        shortTitle = _ref4.shortTitle,
         title = _ref4.title,
         rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref4, _excluded3);
       return /*#__PURE__*/React__default["default"].createElement(react.BreadcrumbItem, _rollupPluginBabelHelpers["extends"]({
         key: key,
         className: index > 0 || displayCount > 1 ? cx__default["default"]([className, "".concat(blockClass, "__displayed-breadcrumb")]) : className,
         title: index + 1 === breadcrumbs.length ? title : null
-      }, rest), label);
+      }, rest), shortTitle || label);
     });
 
     // The breadcrumb has the form [first item] [overflow] [items 2...(n-1)] [last item].
@@ -305,7 +307,11 @@ exports.BreadcrumbWithOverflow.propTypes = {
      */
     label: index["default"].node,
     /**
-     * A string based alternative to the children, required only if children is not of type string.
+     * An optional title label for extra long breadcrumb
+     */
+    shortTitle: index["default"].string,
+    /**
+     * A string based alternative to the children, required only if children is not of type string
      */
     title: index["default"].string.isRequired.if(function (_ref5) {
       var label = _ref5.label;

package/lib/components/Card/Card.js

@@ -268,7 +268,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, status === 'incomplete' && (_Incomplete || (_Incomplete = /*#__PURE__*/React__default["default"].createElement(icons.Incomplete, null))), status === 'complete' && (_CheckmarkOutline || (_CheckmarkOutline = /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkOutline, null)))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__content-container")
   }, /*#__PURE__*/React__default["default"].createElement("div", getHeaderBodyProps(), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(blockClass, "__header-container")
+    className: "".concat(blockClass, "__header-wrapper")
   }, /*#__PURE__*/React__default["default"].createElement(CardHeader.CardHeader, getHeaderProps()), /*#__PURE__*/React__default["default"].createElement("div", getBodyProps(), children)), getStarted && media && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__media")
   }, media)), hasBottomBar && /*#__PURE__*/React__default["default"].createElement(CardFooter.CardFooter, getFooterProps())));

package/lib/components/CreateInfluencer/CreateInfluencer.js

@@ -71,7 +71,7 @@ var CreateInfluencer = function CreateInfluencer(_ref) {
       return /*#__PURE__*/React__default["default"].createElement(react.ProgressStep, {
         label: step.title,
         key: stepIndex,
-        secondaryLabel: step.secondaryLabel,
+        secondaryLabel: step.secondaryLabel || undefined,
         invalid: step.invalid
       });
     })));

package/lib/components/CreateTearsheet/CreateTearsheetStep.d.ts

@@ -1,2 +1,95 @@
-export let CreateTearsheetStep: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+/**
+ * Copyright IBM Corp. 2021, 2023
+ *
+ * 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, { PropsWithChildren } from 'react';
+type fieldsetLegendTextProps = {
+    /**
+     * This optional prop will render your form content inside of a fieldset html element
+     * and is defaulted to true.
+     * You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's step content.
+     */
+    hasFieldset: false;
+    /**
+     * This is the required legend text that appears above a fieldset html element for accessibility purposes.
+     * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's step content.
+     * Otherwise, use CSS to hide/remove this label text.
+     */
+    fieldsetLegendText?: string;
+} | {
+    /**
+     * This optional prop will render your form content inside of a fieldset html element
+     * and is defaulted to true.
+     * You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's step content.
+     */
+    hasFieldset?: true;
+    /**
+     * This is the required legend text that appears above a fieldset html element for accessibility purposes.
+     * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's step content.
+     * Otherwise, use CSS to hide/remove this label text.
+     */
+    fieldsetLegendText: string;
+};
+interface CreateTearsheetStepBaseProps extends PropsWithChildren {
+    /**
+     * Content that shows in the tearsheet step
+     */
+    children?: React.ReactNode;
+    /**
+     * Sets an optional className to be added to the tearsheet step
+     */
+    className?: string;
+    /**
+     * Sets an optional description on the step component
+     */
+    description?: React.ReactNode;
+    /**
+     * This will conditionally disable the submit button in the multi step Tearsheet
+     */
+    disableSubmit?: boolean;
+    /**
+     * This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator
+     * steps. If this value is `true` then the step will be included in the list of visible steps, as well as being included in the ProgressIndicator step list
+     */
+    includeStep?: boolean;
+    /**
+     * This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
+     */
+    introStep?: boolean;
+    /**
+     * This optional prop will indicate an error icon on the progress indicator step item
+     */
+    invalid?: boolean;
+    /**
+     * Optional function to be called on initial mount of a step.
+     * For example, this can be used to fetch data that is required on a particular step.
+     */
+    onMount?: () => void;
+    /**
+     * Optional function to be called when you move to the next step.
+     * For example, this can be used to validate input fields before proceeding to the next step.
+     * This function can _optionally_ return a promise that is either resolved or rejected and the CreateTearsheet will handle the submitting state of the next button.
+     */
+    onNext?: () => Promise<void>;
+    /**
+     * Optional function to be called when you move to the previous step.
+     */
+    onPrevious?: () => void;
+    /**
+     * Sets the optional secondary label on the progress step component
+     */
+    secondaryLabel?: string;
+    /**
+     * Sets an optional subtitle on the step component
+     */
+    subtitle?: string;
+    /**
+     * Sets the title text for a tearsheet step
+     */
+    title: React.ReactNode;
+}
+type CreateTearsheetStepProps = CreateTearsheetStepBaseProps & fieldsetLegendTextProps;
+export declare let CreateTearsheetStep: React.ForwardRefExoticComponent<CreateTearsheetStepProps & React.RefAttributes<unknown>>;
+export {};

package/lib/components/CreateTearsheet/CreateTearsheetStep.js

@@ -55,7 +55,7 @@ exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var stepsContext = React.useContext(CreateTearsheet.StepsContext);
   var stepNumber = React.useContext(CreateTearsheet.StepNumberContext);
-  var _useState = React.useState(),
+  var _useState = React.useState(includeStep),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     shouldIncludeStep = _useState2[0],
     setShouldIncludeStep = _useState2[1];
@@ -65,11 +65,11 @@ exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   useRetrieveStepData.useRetrieveStepData({
     stepsContext: stepsContext,
     stepNumber: stepNumber,
-    introStep: introStep,
+    introStep: !!introStep,
     shouldIncludeStep: shouldIncludeStep,
-    secondaryLabel: secondaryLabel,
+    secondaryLabel: secondaryLabel || '',
     title: title,
-    invalid: invalid
+    invalid: !!invalid
   });
 
   // This useEffect reports back the onMount value so that they can be used
@@ -89,7 +89,7 @@ exports.CreateTearsheetStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   // steps container context so that it can manage the 'Next' button appropriately.
   React.useEffect(function () {
     if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
-      stepsContext.setIsDisabled(disableSubmit);
+      stepsContext.setIsDisabled(!!disableSubmit);
       stepsContext === null || stepsContext === void 0 || stepsContext.setOnNext(onNext); // needs to be updated here otherwise there could be stale state values from only initially setting onNext
       stepsContext === null || stepsContext === void 0 || stepsContext.setOnPrevious(onPrevious);
     }
@@ -153,6 +153,7 @@ exports.CreateTearsheetStep.propTypes = {
    * You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's step content.
    * Otherwise, use CSS to hide/remove this label text.
    */
+  /**@ts-ignore*/
   fieldsetLegendText: index["default"].string.isRequired.if(function (_ref2) {
     var hasFieldset = _ref2.hasFieldset;
     return !!hasFieldset;
@@ -162,6 +163,7 @@ exports.CreateTearsheetStep.propTypes = {
    * and is defaulted to true.
    * You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's step content.
    */
+  /**@ts-ignore*/
   hasFieldset: index["default"].bool,
   /**
    * This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -214,8 +214,9 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     }
     if ((prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) || (prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column)) {
       if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
+        var _activeCellFullData$r;
         var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
-        setActiveCellContent(activeCellFullData.render('Cell'));
+        setActiveCellContent((_activeCellFullData$r = activeCellFullData === null || activeCellFullData === void 0 ? void 0 : activeCellFullData.render('Cell')) !== null && _activeCellFullData$r !== void 0 ? _activeCellFullData$r : null);
       }
       if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' || (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header') {
         setActiveCellContent(null);
@@ -423,8 +424,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
     var activeCellValue;
     if (activeCellFullData && activeCellCoordinates !== null && activeCellCoordinates !== void 0 && activeCellCoordinates.column) {
-      var _activeCellFullData$r;
-      activeCellValue = activeCellFullData ? (_activeCellFullData$r = activeCellFullData.row.cells) === null || _activeCellFullData$r === void 0 || (_activeCellFullData$r = _activeCellFullData$r[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column]) === null || _activeCellFullData$r === void 0 ? void 0 : _activeCellFullData$r.value : null;
+      var _activeCellFullData$r2;
+      activeCellValue = activeCellFullData ? (_activeCellFullData$r2 = activeCellFullData.row.cells) === null || _activeCellFullData$r2 === void 0 || (_activeCellFullData$r2 = _activeCellFullData$r2[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column]) === null || _activeCellFullData$r2 === void 0 ? void 0 : _activeCellFullData$r2.value : null;
     }
     setCellEditorValue(activeCellValue || '');
     if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -68,6 +68,11 @@ var DataSpreadsheetHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       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]);

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/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],
@@ -86,6 +86,7 @@ exports.Guidebanner = /*#__PURE__*/React__default["default"].forwardRef(function
     });
   };
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    "aria-expanded": !isCollapsed,
     className: cx__default["default"](blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), withLeftGutter && "".concat(blockClass, "__with-left-gutter")),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement(icons.Idea, {
@@ -116,8 +117,7 @@ exports.Guidebanner = /*#__PURE__*/React__default["default"].forwardRef(function
     size: "md",
     className: "".concat(blockClass, "__toggle-button"),
     onClick: handleClickToggle,
-    ref: toggleRef,
-    "aria-expanded": !isCollapsed
+    ref: toggleRef
   }, isCollapsed ? expandButtonLabel : collapseButtonLabel), showNavigation && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
     className: cx__default["default"]("".concat(blockClass, "__back-button"), [scrollPosition === 0 ? "".concat(blockClass, "__back-button--disabled") : null])
   }, /*#__PURE__*/React__default["default"].createElement(react.IconButton, {
@@ -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."));
       }
     });