@carbon/ibm-products 2.39.0 → 2.40.1-canary.10

package/es/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemTime/ConditionBuilderItemTime.js

@@ -33,17 +33,17 @@ var ConditionBuilderItemTime = function ConditionBuilderItemTime(_ref) {
     onChange(timeValue ? timeToUpdate : undefined);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [timeValue, dayZoneValue, timeZoneValue]);
-  var setTimeZone = function setTimeZone(e) {
-    setTimeZoneValue(e.target.value);
+  var setTimeZone = function setTimeZone(evt) {
+    setTimeZoneValue(evt.target.value);
   };
-  var setDayZone = function setDayZone(e) {
-    setDayZoneValue(e.target.value);
+  var setDayZone = function setDayZone(evt) {
+    setDayZoneValue(evt.target.value);
   };
-  var setTime = function setTime(e) {
-    setTimeValue(e.target.value);
+  var setTime = function setTime(evt) {
+    setTimeValue(evt.target.value);
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(blockClass, "__condition-builder-item-time")
+    className: "".concat(blockClass, "__item-time")
   }, /*#__PURE__*/React__default.createElement(TimePicker, {
     id: "time-picker",
     labelText: "Select a time",

package/es/components/ConditionBuilder/ConditionConnector/ConditionConnector.js

@@ -28,17 +28,17 @@ function ConditionConnector(_ref) {
       parentGroup.classList.remove('hoveredConnector');
     }
   }, []);
-  var activeConnectorHandler = function activeConnectorHandler(e) {
-    var parentGroup = e.currentTarget.closest('.eachGroup');
+  var activeConnectorHandler = function activeConnectorHandler(evt) {
+    var parentGroup = evt.currentTarget.closest('.eachGroup');
     handleConnectorHover(parentGroup, true);
   };
-  var inActiveConnectorHandler = function inActiveConnectorHandler(e) {
-    var parentGroup = e.currentTarget.closest('.eachGroup');
+  var inActiveConnectorHandler = function inActiveConnectorHandler(evt) {
+    var parentGroup = evt.currentTarget.closest('.eachGroup');
     handleConnectorHover(parentGroup, false);
   };
-  var onChangeHandler = function onChangeHandler(op, e) {
+  var onChangeHandler = function onChangeHandler(op, evt) {
     onChange(op);
-    focusThisField(e);
+    focusThisField(evt);
   };
   return (
     /*#__PURE__*/

package/es/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js

@@ -26,16 +26,16 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     onChange = _ref.onChange,
     conditionBuilderRef = _ref.conditionBuilderRef,
     className = _ref.className;
-  var onRemoveHandler = function onRemoveHandler(conditionId, e) {
+  var onRemoveHandler = function onRemoveHandler(conditionId, evt) {
     if (group.conditions.length > 1) {
       onChange(_objectSpread2(_objectSpread2({}, group), {}, {
         conditions: group.conditions.filter(function (condition) {
           return conditionId !== condition.id;
         })
       }));
-      handleFocusOnClose(e);
+      handleFocusOnClose(evt);
     } else {
-      onRemove();
+      onRemove(evt);
     }
   };
   var onChangeHandler = function onChangeHandler(updatedCondition, conditionIndex) {
@@ -59,9 +59,9 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
   var isLastCondition = function isLastCondition(conditionIndex, conditionArr) {
     return conditionIndex + 1 >= conditionArr.length || conditionArr.length - 1 != conditionIndex && conditionArr[conditionIndex + 1].conditions;
   };
-  var handleFocusOnClose = function handleFocusOnClose(e) {
-    var _e$currentTarget;
-    var previousClose = (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 || (_e$currentTarget = _e$currentTarget.closest('[role="row"]')) === null || _e$currentTarget === void 0 || (_e$currentTarget = _e$currentTarget.previousSibling) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.querySelector('[data-name="closeCondition"]');
+  var handleFocusOnClose = function handleFocusOnClose(evt) {
+    var _evt$currentTarget;
+    var previousClose = (_evt$currentTarget = evt.currentTarget) === null || _evt$currentTarget === void 0 || (_evt$currentTarget = _evt$currentTarget.closest('[role="row"]')) === null || _evt$currentTarget === void 0 || (_evt$currentTarget = _evt$currentTarget.parentElement) === null || _evt$currentTarget === void 0 || (_evt$currentTarget = _evt$currentTarget.previousSibling) === null || _evt$currentTarget === void 0 ? void 0 : _evt$currentTarget.querySelector('[data-name="closeCondition"]');
     if (previousClose) {
       previousClose.focus();
     }
@@ -76,7 +76,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     return /*#__PURE__*/React__default.createElement("div", {
       key: eachCondition.id
     }, eachCondition.conditions && /*#__PURE__*/React__default.createElement(ConditionGroupBuilder, {
-      className: "".concat(blockClass, "__condition-builder__group"),
+      className: "".concat(blockClass, "__group"),
       aria: {
         level: aria.level + 1,
         posinset: conditionIndex + 1,
@@ -86,8 +86,8 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       onChange: function onChange(updatedCondition) {
         onChangeHandler(updatedCondition, conditionIndex);
       },
-      onRemove: function onRemove(e) {
-        onRemoveHandler(eachCondition.id, e);
+      onRemove: function onRemove(evt) {
+        onRemoveHandler(eachCondition.id, evt);
       },
       conditionBuilderRef: conditionBuilderRef
     }), !eachCondition.conditions && /*#__PURE__*/React__default.createElement(ConditionBlock, {
@@ -106,8 +106,8 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         onChangeHandler(updatedConditions, conditionIndex);
       },
       addConditionHandler: addConditionHandler,
-      onRemove: function onRemove(e) {
-        onRemoveHandler(eachCondition.id, e);
+      onRemove: function onRemove(evt) {
+        onRemoveHandler(eachCondition.id, evt);
       },
       onConnectorOperatorChange: function onConnectorOperatorChange(op) {
         onChange(_objectSpread2(_objectSpread2({}, group), {}, {

package/es/components/ConditionBuilder/utils/checkForHoldingKey.d.ts

@@ -0,0 +1 @@
+export function checkForHoldingKey(evt: any, key: any): any;

package/es/components/ConditionBuilder/utils/checkForHoldingKey.js

@@ -0,0 +1,16 @@
+/**
+ * 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.
+ */
+
+var checkForHoldingKey = function checkForHoldingKey(evt, key) {
+  // possible key inputs: altKey,ctrlKey,metaKey,shiftKey
+  if (key === 'cmd') {
+    return evt.metaKey || evt.ctrlKey;
+  }
+  return evt[key];
+};
+
+export { checkForHoldingKey };

package/es/components/ConditionBuilder/utils/handleKeyboardEvents.d.ts

@@ -0,0 +1 @@
+export function handleKeyDown(evt: any, conditionBuilderRef: any): void;

package/es/components/ConditionBuilder/utils/handleKeyboardEvents.js

@@ -0,0 +1,125 @@
+/**
+ * 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 { toConsumableArray as _toConsumableArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { blockClass } from '../ConditionBuilderContext/DataConfigs.js';
+import { checkForHoldingKey } from './checkForHoldingKey.js';
+import { focusThisField, traverseReverse, traverseClockVise } from './util.js';
+
+var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef) {
+  var activeElement = document.activeElement;
+  if (activeElement.closest("[role=\"dialog\"]")) {
+    handleKeyPressForPopover(evt, activeElement.closest("[role=\"dialog\"]"));
+  } else {
+    handleKeyPressForMainContent(evt, conditionBuilderRef);
+  }
+};
+var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentContainer) {
+  var _parentContainer$quer;
+  var key = evt.key;
+  var isHoldingShiftKey = checkForHoldingKey(evt, 'shiftKey');
+  var isMultiSelect = (_parentContainer$quer = parentContainer.querySelector('ul')) === null || _parentContainer$quer === void 0 ? void 0 : _parentContainer$quer.dataset.multiSelect;
+  var allItems = [];
+  switch (key) {
+    case 'ArrowUp':
+      //traverse through the popover options, search box, selectAll button
+      parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
+        traverseReverse(eachElem, index, allElements);
+      });
+      break;
+    case 'ArrowDown':
+      //traverse through the popover options, search box, selectAll button
+      parentContainer.querySelectorAll("[role=\"option\"]").forEach(function (eachElem, index, allElements) {
+        traverseClockVise(eachElem, index, allElements);
+      });
+      break;
+    case 'Tab':
+      allItems = [].concat(_toConsumableArray(Array.from(parentContainer.querySelectorAll(".".concat(blockClass, "__selectAll-button,[role=\"searchbox\"]")))), [parentContainer.querySelector("[role=\"option\"]")]);
+      allItems.forEach(function (eachElem, index, allElements) {
+        if (isHoldingShiftKey) {
+          traverseReverse(eachElem, index, allElements, true, true);
+        } else {
+          traverseClockVise(eachElem, index, allElements, true, true);
+        }
+      });
+      evt.preventDefault();
+      break;
+    case ' ':
+      if (isMultiSelect === 'true') {
+        if (document.activeElement.type !== 'button') {
+          var _document$activeEleme;
+          //for button , enter key is click which already handled by framework, for other elements trigger click
+          (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 || _document$activeEleme.click();
+        }
+        evt.preventDefault();
+      }
+      break;
+    case 'Enter':
+      if (isMultiSelect !== 'true') {
+        if (document.activeElement.type !== 'button') {
+          var _document$activeEleme2;
+          //for button , enter key is click which already handled by framework, else trigger click
+          (_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 || _document$activeEleme2.click();
+          focusThisField(evt);
+        }
+      }
+      break;
+    case 'Escape':
+      //focus the corresponding field in which the popover is triggered
+      focusThisField(evt);
+      break;
+  }
+};
+var getRows = function getRows(conditionBuilderRef) {
+  return Array.from(conditionBuilderRef.current.querySelectorAll('[role="row"]'));
+};
+var getRowIndex = function getRowIndex(element, conditionBuilderRef) {
+  var rows = getRows(conditionBuilderRef);
+  return rows.findIndex(function (row) {
+    return row.contains(element);
+  });
+};
+var handleRowNavigation = function handleRowNavigation(evt, conditionBuilderRef) {
+  var rows = getRows(conditionBuilderRef);
+  var currentRowIndex = getRowIndex(evt.target, conditionBuilderRef);
+  navigateToNextRowCell(evt, currentRowIndex, rows);
+};
+var navigateToNextRowCell = function navigateToNextRowCell(evt, currentRowIndex, rows) {
+  var _nextRow$querySelecto;
+  //when the focussed element is a cell of the row which has only 1 cell (connector or statement) , focus the next row
+
+  var nextRowIndex = currentRowIndex;
+  if (evt.key === 'ArrowUp') {
+    nextRowIndex = currentRowIndex == 0 ? currentRowIndex : currentRowIndex - 1;
+  }
+  if (evt.key === 'ArrowDown') {
+    nextRowIndex = currentRowIndex === rows.length - 1 ? rows.length - 1 : currentRowIndex + 1;
+  }
+  var nextRow = rows[nextRowIndex];
+  var itemName = evt.target.dataset.name;
+  nextRow === null || nextRow === void 0 || (_nextRow$querySelecto = nextRow.querySelector("[data-name=\"".concat(itemName, "\"]"))) === null || _nextRow$querySelecto === void 0 || _nextRow$querySelecto.focus();
+};
+var handleKeyPressForMainContent = function handleKeyPressForMainContent(evt, conditionBuilderRef) {
+  switch (evt.key) {
+    case 'ArrowRight':
+    case 'ArrowLeft':
+      conditionBuilderRef.current.querySelectorAll("[role=\"gridcell\"] button").forEach(function (eachElem, index, allElements) {
+        if (evt.key === 'ArrowRight') {
+          traverseClockVise(eachElem, index, allElements);
+        } else {
+          traverseReverse(eachElem, index, allElements);
+        }
+      });
+      break;
+    case 'ArrowUp':
+    case 'ArrowDown':
+      handleRowNavigation(evt, conditionBuilderRef);
+      break;
+  }
+};
+
+export { handleKeyDown };

package/es/components/ConditionBuilder/utils/util.d.ts

@@ -1,4 +1,4 @@
-export function focusThisField(e: any): void;
+export function focusThisField(evt: any): void;
 export function focusThisItem(currentElement: any): void;
 export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
 export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;

package/es/components/ConditionBuilder/utils/util.js

@@ -5,12 +5,41 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var focusThisField = function focusThisField(e) {
+var focusThisField = function focusThisField(evt) {
   setTimeout(function () {
-    var _e$target$closest, _e$target$closest2;
-    (_e$target$closest = e.target.closest('[role="gridcell"]')) === null || _e$target$closest === void 0 || (_e$target$closest = _e$target$closest.querySelector('button')) === null || _e$target$closest === void 0 || _e$target$closest.click();
-    (_e$target$closest2 = e.target.closest('[role="gridcell"]')) === null || _e$target$closest2 === void 0 || (_e$target$closest2 = _e$target$closest2.querySelector('button')) === null || _e$target$closest2 === void 0 || _e$target$closest2.focus();
+    var _evt$target$closest, _evt$target$closest2;
+    (_evt$target$closest = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest === void 0 || (_evt$target$closest = _evt$target$closest.querySelector('button')) === null || _evt$target$closest === void 0 || _evt$target$closest.click();
+    (_evt$target$closest2 = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest2 === void 0 || (_evt$target$closest2 = _evt$target$closest2.querySelector('button')) === null || _evt$target$closest2 === void 0 || _evt$target$closest2.focus();
   }, 0);
 };
+var focusThisItem = function focusThisItem(currentElement) {
+  setTimeout(function () {
+    //document.activeElement.setAttribute('tabindex', '-1');
+    // currentElement.setAttribute('tabindex', '0');
+    currentElement === null || currentElement === void 0 || currentElement.focus();
+  }, 0);
+};
+var traverseClockVise = function traverseClockVise(eachElem, index, allElements, rotate, trapFocus) {
+  if (eachElem == document.activeElement) {
+    if (index !== allElements.length - 1) {
+      focusThisItem(allElements[index + 1]);
+    } else {
+      focusThisItem(allElements[rotate ? 0 : allElements.length - 1]);
+    }
+  } else if (Array.from(allElements).indexOf(document.activeElement) == -1 && trapFocus) {
+    focusThisItem(allElements[0]);
+  }
+};
+var traverseReverse = function traverseReverse(eachElem, index, allElements, rotate, trapFocus) {
+  if (eachElem == document.activeElement) {
+    if (index !== 0) {
+      focusThisItem(allElements[index - 1]);
+    } else {
+      focusThisItem(allElements[rotate ? allElements.length - 1 : 0]);
+    }
+  } else if (Array.from(allElements).indexOf(document.activeElement) == -1 && trapFocus) {
+    focusThisItem(allElements[allElements.length - 1]);
+  }
+};
 
-export { focusThisField };
+export { focusThisField, focusThisItem, traverseClockVise, traverseReverse };

package/es/components/CreateInfluencer/CreateInfluencer.js

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

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

@@ -46,7 +46,7 @@ var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var stepsContext = useContext(StepsContext);
   var stepNumber = useContext(StepNumberContext);
-  var _useState = useState(),
+  var _useState = useState(includeStep),
     _useState2 = _slicedToArray(_useState, 2),
     shouldIncludeStep = _useState2[0],
     setShouldIncludeStep = _useState2[1];
@@ -56,11 +56,11 @@ var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
   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
@@ -80,7 +80,7 @@ var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
   // steps container context so that it can manage the 'Next' button appropriately.
   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);
     }
@@ -144,6 +144,7 @@ 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: PropTypes.string.isRequired.if(function (_ref2) {
     var hasFieldset = _ref2.hasFieldset;
     return !!hasFieldset;
@@ -153,6 +154,7 @@ 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: PropTypes.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/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -205,8 +205,9 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     }
     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);
@@ -414,8 +415,8 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     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/es/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -59,6 +59,11 @@ var DataSpreadsheetHeader = /*#__PURE__*/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/es/components/Datagrid/Datagrid/DatagridContent.js

@@ -87,7 +87,7 @@ var DatagridContent = function DatagridContent(_ref) {
   var renderTable = function renderTable() {
     var _getTableProps;
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Table, _extends({}, getTableProps(), {
-      className: cx(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.isResizingColumn) === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
+      className: cx(withVirtualScroll ? "".concat(blockClass, "__table-virtual-scroll") : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), _defineProperty({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), _defineProperty({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), _defineProperty({}, "".concat(blockClass, "__table-grid-active"), gridActive), _defineProperty({}, "".concat(blockClass, "__table-is-resizing"), typeof (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.isResizingColumn) === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
       role: withInlineEdit ? 'grid' : undefined,
       tabIndex: withInlineEdit ? 0 : -1,
       onKeyDown: /* istanbul ignore next */
@@ -106,7 +106,7 @@ var DatagridContent = function DatagridContent(_ref) {
         return handleGridFocus(inlineEditState, dispatch);
       },
       title: title
-    }), !withVirtualScroll && /*#__PURE__*/React__default.createElement(DatagridHead, datagridState), /*#__PURE__*/React__default.createElement(DatagridBody, _extends({}, datagridState, {
+    }), (!withVirtualScroll || withVirtualScroll && !isFetching && !contentRows.length) && /*#__PURE__*/React__default.createElement(DatagridHead, datagridState), /*#__PURE__*/React__default.createElement(DatagridBody, _extends({}, datagridState, {
       rows: contentRows
     }))), (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'panel' && renderPagination());
   };

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -20,7 +20,7 @@ import { useInitialColumnSort } from '../useInitialColumnSort.js';
 var _th;
 var _excluded = ["role"],
   _excluded2 = ["className", "role"],
-  _excluded3 = ["role", "className"];
+  _excluded3 = ["role"];
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
   var props = {};
@@ -176,11 +176,10 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
     var originalCol = visibleColumns[index];
     var _header$getHeaderProp = header.getHeaderProps();
       _header$getHeaderProp.role;
-      var headerClassName = _header$getHeaderProp.className,
-      headerProps = _objectWithoutProperties(_header$getHeaderProp, _excluded3);
+      var headerProps = _objectWithoutProperties(_header$getHeaderProp, _excluded3);
     var resizerProps = header === null || header === void 0 || (_header$getResizerPro = header.getResizerProps) === null || _header$getResizerPro === void 0 ? void 0 : _header$getResizerPro.call(header);
     return /*#__PURE__*/React__default.createElement(TableHeader, _extends({}, headerProps, {
-      className: cx(headerClassName, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header.isSorted), "".concat(blockClass, "__header-actions-column"), header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default.isValidElement(header.slug))),
+      className: cx(header.className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__resizableColumn"), resizerProps), "".concat(blockClass, "__isResizing"), header.isResizing), "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), "".concat(blockClass, "__isSorted"), header.isSorted), "".concat(blockClass, "__header-actions-column"), header.isAction), "".concat(blockClass, "__with-slug"), header.slug && /*#__PURE__*/React__default.isValidElement(header.slug))),
       key: header.id,
       "aria-hidden": header.id === 'spacer' && 'true'
     }, getAccessibilityProps(header)), header.render('Header'), renderSlug(header.slug), resizerProps && !header.isAction && /*#__PURE__*/React__default.createElement(ResizeHeader, {

package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -39,7 +39,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() {
@@ -89,6 +90,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/es/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
      */