@carbon/ibm-products 2.33.0 → 2.35.0

package/lib/components/CreateFullPage/CreateFullPageStep.js

@@ -92,6 +92,24 @@ exports.CreateFullPageStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     span: 50
   }; // Half.
 
+  var renderDescription = function renderDescription() {
+    if (description) {
+      var common = _rollupPluginBabelHelpers.objectSpread2({
+        children: description,
+        className: "".concat(blockClass, "-description")
+      }, span);
+      if (typeof description === 'string') {
+        return /*#__PURE__*/React__default["default"].createElement(react.Column, _rollupPluginBabelHelpers["extends"]({}, common, {
+          as: "p"
+        }));
+      } else if ( /*#__PURE__*/React.isValidElement(description)) {
+        return /*#__PURE__*/React__default["default"].createElement(react.Column, _rollupPluginBabelHelpers["extends"]({}, common, {
+          as: "div"
+        }));
+      }
+    }
+    return null;
+  };
   return stepsContext ? /*#__PURE__*/React__default["default"].createElement("section", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: cx__default["default"](blockClass, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep))),
     ref: ref
@@ -101,10 +119,7 @@ exports.CreateFullPageStep = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   }, span), title), subtitle && /*#__PURE__*/React__default["default"].createElement(react.Column, _rollupPluginBabelHelpers["extends"]({
     className: "".concat(blockClass, "-subtitle"),
     as: "h6"
-  }, span), subtitle), description && /*#__PURE__*/React__default["default"].createElement(react.Column, _rollupPluginBabelHelpers["extends"]({
-    className: "".concat(blockClass, "-description"),
-    as: "p"
-  }, span), description)))), hasFieldset ? /*#__PURE__*/React__default["default"].createElement(react.FormGroup, {
+  }, span), subtitle), renderDescription()))), hasFieldset ? /*#__PURE__*/React__default["default"].createElement(react.FormGroup, {
     legendText: fieldsetLegendText,
     className: "".concat(blockClass, "-fieldset")
   }, children) : children) : pconsole["default"].warn("You have tried using a ".concat(componentName, " component outside of a CreateFullPage. This is not allowed. ").concat(componentName, "s should always be children of the CreateFullPage"));
@@ -124,7 +139,7 @@ exports.CreateFullPageStep.propTypes = {
   /**
    * Sets an optional description on the progress step component
    */
-  description: index["default"].string,
+  description: index["default"].node,
   /**
    * This will conditionally disable the submit button in the multi step CreateFullPage
    */

package/lib/components/CreateSidePanel/CreateSidePanel.d.ts

@@ -1,5 +1,84 @@
+/**
+ * Copyright IBM Corp. 2021, 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 CreateSidePanelProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * The description of the CreateSidePanel serves to provide more information about the form within the panel.
+     */
+    description?: ReactNode;
+    /**
+     * Specifies a boolean for disabling or enabling the primary button. This is important for form validation
+     * Returning `true` prevents the primary button from being clicked until required fields are completed.
+     */
+    disableSubmit?: boolean;
+    /**
+     * Specifies an optional field that provides a additional context for a form
+     */
+    formDescription?: ReactNode;
+    /**
+     * Specifies a required field that provides a title for a form
+     */
+    formTitle: ReactNode;
+    /**
+     * Unique identifier
+     */
+    id?: string;
+    /**
+     * Specifies an optional handler which is called when the CreateSidePanel
+     * is closed.
+     */
+    onRequestClose?(): void;
+    /**
+     * Specifies an optional handler which is called when the CreateSidePanel
+     * primary button is pressed.
+     */
+    onRequestSubmit?(): void;
+    /**
+     * Specifies whether the CreateSidePanel is open or not.
+     */
+    open: boolean;
+    /**
+     * Specifies the primary button's text in the modal.
+     */
+    primaryButtonText: string;
+    /**
+     * Specifies the secondary button's text in the modal.
+     */
+    secondaryButtonText: string;
+    /**
+     * This is the selector to the element that contains all of the page content that will shrink when the panel is a slide in.
+     * This prop is required since create flows use the `slideIn` variant of the side panel.
+     */
+    selectorPageContent: string;
+    /**
+     * Specifies which DOM element in the form should be focused.
+     */
+    selectorPrimaryFocus: string;
+    /**
+     *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
+     */
+    slug?: ReactNode;
+    /**
+     * The subtitle of the CreateSidePanel is optional and serves to provide more information about the modal.
+     */
+    subtitle?: ReactNode;
+    /**
+     * The title of the CreateSidePanel is usually the product or service name.
+     */
+    title: string;
+}
 /**
  * Use with medium complexity creations if the user needs page context. On-page content can be seen and interacted with.
  */
-export let CreateSidePanel: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CreateSidePanel: React.ForwardRefExoticComponent<CreateSidePanelProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/CreateSidePanel/CreateSidePanel.js

@@ -56,7 +56,7 @@ exports.CreateSidePanel = /*#__PURE__*/React__default["default"].forwardRef(func
     label: primaryButtonText,
     onClick: function onClick(event) {
       event.preventDefault();
-      onRequestSubmit();
+      onRequestSubmit === null || onRequestSubmit === void 0 || onRequestSubmit();
     },
     kind: 'primary',
     disabled: disableSubmit,
@@ -99,6 +99,7 @@ exports.CreateSidePanel.propTypes = {
   /**
    * Sets the body content of the create side panel
    */
+  /**@ts-ignore*/
   children: index["default"].oneOfType([index["default"].arrayOf(index["default"].node), index["default"].node]).isRequired,
   /**
    * Provide an optional class to be applied to the containing node.
@@ -138,6 +139,7 @@ exports.CreateSidePanel.propTypes = {
   /**
    * Specifies whether the CreateSidePanel is open or not.
    */
+  /**@ts-ignore*/
   open: index["default"].bool,
   /**
    * Specifies the primary button's text in the modal.
@@ -155,6 +157,7 @@ exports.CreateSidePanel.propTypes = {
   /**
    * Specifies which DOM element in the form should be focused.
    */
+  /**@ts-ignore*/
   selectorPrimaryFocus: index["default"].node.isRequired,
   /**
    *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
@@ -167,5 +170,5 @@ exports.CreateSidePanel.propTypes = {
   /**
    * The title of the CreateSidePanel is usually the product or service name.
    */
-  title: index["default"].node.isRequired
+  title: index["default"].string.isRequired
 };

package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.d.ts

@@ -1,6 +1,86 @@
+/**
+ * Copyright IBM Corp. 2021, 2021
+ *
+ * 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, ReactNode } from 'react';
+type VerticalPosition = 'normal' | 'lower';
+interface CreateTearsheetNarrowProps extends PropsWithChildren {
+    /**
+     * Provide the contents of the CreateTearsheetNarrow.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * A description of the flow, displayed in the header area of the tearsheet.
+     */
+    description?: ReactNode;
+    /**
+     * Specifies a boolean for disabling or enabling the primary button. This is important for form validation
+     * Returning `true` prevents the primary button from being clicked until required fields are completed.
+     */
+    disableSubmit?: boolean;
+    /**
+     * Specifies an optional field that provides a additional context for a form
+     */
+    formDescription?: ReactNode;
+    /**
+     * Specifies a field that provides a title for a form
+     */
+    formTitle?: ReactNode;
+    /**
+     * A label for the tearsheet, displayed in the header area of the tearsheet
+     * to maintain context for the tearsheet (e.g. as the title changes from page
+     * to page of a multi-page task).
+     */
+    label?: ReactNode;
+    /**
+     * An optional handler that is called when the user closes the tearsheet (by
+     * clicking the close button, if enabled, or clicking outside, if enabled).
+     * Returning `false` here prevents the modal from closing.
+     */
+    onRequestClose?: () => void;
+    /**
+     * Specifies an optional handler which is called when the CreateTearsheetNarrow
+     * primary button is pressed.
+     */
+    onRequestSubmit?: () => void;
+    /**
+     * Specifies whether the tearsheet is currently open.
+     */
+    open?: boolean;
+    /**
+     * Specifies the primary button's text in the CreateTearsheetNarrow.
+     */
+    primaryButtonText: string;
+    /**
+     * Specifies the secondary button's text in the CreateTearsheetNarrow.
+     */
+    secondaryButtonText: string;
+    /**
+     * Specifies which DOM element in the form should be focused.
+     */
+    selectorPrimaryFocus?: ReactNode;
+    /**
+     * The main title of the tearsheet, displayed in the header area.
+     */
+    title?: ReactNode;
+    /**
+     * The position of the top of tearsheet in the viewport. The 'normal'
+     * position (the default) is a short distance down from the top of the
+     * viewport, leaving room at the top for a global header bar to show through
+     * from below. The 'lower' position provides a little extra room at the top
+     * to allow an action bar navigation or breadcrumbs to also show through.
+     */
+    verticalPosition?: VerticalPosition;
+}
 /**
  * Use a narrow tearsheet as an alternative to a modal when there is scrolling.
  * Use when the form fields can be broken down into sections using section headers.
  */
-export let CreateTearsheetNarrow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let CreateTearsheetNarrow: React.ForwardRefExoticComponent<CreateTearsheetNarrowProps & React.RefAttributes<unknown>>;
+export {};

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -23,14 +23,11 @@ var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var deepCloneObject = require('../../global/js/utils/deepCloneObject.js');
 var createActiveCellFn = require('./utils/createActiveCellFn.js');
 var getCellSize = require('./utils/getCellSize.js');
-var handleMultipleKeys = require('./utils/handleMultipleKeys.js');
 var handleHeaderCellSelection = require('./utils/handleHeaderCellSelection.js');
 var removeCellSelections = require('./utils/removeCellSelections.js');
 var selectAllCells = require('./utils/selectAllCells.js');
 var handleEditSubmit = require('./utils/handleEditSubmit.js');
-var handleActiveCellInSelectionEnter = require('./utils/handleActiveCellInSelectionEnter.js');
-var handleActiveCellInSelectionTab = require('./utils/handleActiveCellInSelectionTab.js');
-var handleCellDeletion = require('./utils/handleCellDeletion.js');
+var commonEventHandlers = require('./utils/commonEventHandlers.js');
 var useActiveElement = require('../../global/js/hooks/useActiveElement.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useMultipleKeyTracking = require('./hooks/useMultipleKeyTracking.js');
@@ -45,7 +42,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
-// cspell:words rowcount colcount
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--data-spreadsheet");
@@ -413,117 +409,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
       });
     }
   }, [handleInitialArrowPress, updateActiveCellCoordinates, activeCellCoordinates, columns, rows]);
-  var handleKeyPress = React.useCallback(function (event) {
-    var key = event.key;
-    // Command keys need to be returned as there is default browser behavior with these keys
-    // Needs to be returned in editing mode
-    if (checkForReturnCondition(key)) {
-      return;
-    }
-
-    // Clear out all cell selection areas if user uses any arrow key, except if the shift key is being held
-    if (['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].indexOf(key) > -1) {
-      if (selectionAreas !== null && selectionAreas !== void 0 && selectionAreas.length && keysPressedList.length < 2 && !handleMultipleKeys.includesShift(keysPressedList)) {
-        setSelectionAreas([]);
-        setSelectionAreaData([]);
-        removeCellSelections.removeCellSelections({
-          spreadsheetRef: spreadsheetRef
-        });
-      }
-    }
-    if ((keysPressedList === null || keysPressedList === void 0 ? void 0 : keysPressedList.length) > 1) {
-      handleMultipleKeys.handleMultipleKeys({
-        activeCellCoordinates: activeCellCoordinates,
-        event: event,
-        keysPressedList: keysPressedList,
-        selectionAreas: selectionAreas,
-        currentMatcher: currentMatcher,
-        rows: rows,
-        setSelectionAreas: setSelectionAreas,
-        columns: columns,
-        updateActiveCellCoordinates: updateActiveCellCoordinates,
-        spreadsheetRef: spreadsheetRef,
-        removeCellSelections: removeCellSelections.removeCellSelections,
-        blockClass: blockClass,
-        setCurrentMatcher: setCurrentMatcher,
-        usingMac: usingMac
-      });
-    }
-
-    // Allow arrow key navigation if there are less than two activeKeys OR
-    // if one of the activeCellCoordinates is in a header position
-    // Prevent arrow keys, home key, and end key from scrolling the page when the data spreadsheet container has focus
-
-    if (keysPressedList.length < 2 && !handleMultipleKeys.includesShift(keysPressedList) || activeCellCoordinates.row === 'header' || activeCellCoordinates.column === 'header') {
-      switch (key) {
-        case 'Backspace':
-        case 'Delete':
-          {
-            var deleteParams = {
-              selectionAreas: selectionAreas,
-              currentMatcher: currentMatcher,
-              rows: rows,
-              setActiveCellContent: setActiveCellContent,
-              updateData: updateData,
-              activeCellCoordinates: activeCellCoordinates
-            };
-            handleCellDeletion.handleCellDeletion(deleteParams);
-            break;
-          }
-        // Enter
-        case 'Enter':
-          {
-            handleActiveCellInSelectionEnter.handleActiveCellInSelectionEnter({
-              activeCellInsideSelectionArea: activeCellInsideSelectionArea,
-              activeCellCoordinates: activeCellCoordinates,
-              activeCellRef: activeCellRef,
-              selectionAreas: selectionAreas,
-              updateActiveCellCoordinates: updateActiveCellCoordinates
-            });
-            break;
-          }
-        // HOME
-        case 'Home':
-        case 'End':
-          {
-            event.preventDefault();
-            if (handleMultipleKeys.includesResourceKey(keysPressedList, usingMac)) {
-              return;
-            }
-            handleHomeEndKey({
-              type: key
-            });
-            break;
-          }
-        // Tab
-        case 'Tab':
-          {
-            if (activeCellInsideSelectionArea) {
-              event.preventDefault();
-              return handleActiveCellInSelectionTab.handleActiveCellInSelectionTab({
-                activeCellInsideSelectionArea: activeCellInsideSelectionArea,
-                activeCellCoordinates: activeCellCoordinates,
-                activeCellRef: activeCellRef,
-                selectionAreas: selectionAreas,
-                updateActiveCellCoordinates: updateActiveCellCoordinates
-              });
-            }
-            setSelectionAreas([]);
-            removeActiveCell();
-            removeCellEditor();
-            setContainerHasFocus(false);
-            setActiveCellCoordinates(null);
-            break;
-          }
-        case 'ArrowLeft':
-        case 'ArrowUp':
-        case 'ArrowRight':
-        case 'ArrowDown':
-          {
-            handleArrowKeyPress(key);
-          }
-      }
-    }
+  var handleKeyPressEvent = React.useCallback(function (event) {
+    commonEventHandlers.handleKeyPress(event, activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress, setSelectionAreas, setSelectionAreaData, setCurrentMatcher, activeCellRef, setActiveCellCoordinates, setContainerHasFocus, setActiveCellContent);
   }, [activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress]);
   var startEditMode = function startEditMode() {
     setIsEditing(true);
@@ -687,6 +574,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
   var handleActiveCellMouseEnter = React.useCallback(function () {
     handleActiveCellMouseEnterCallback(selectionAreas, clickAndHoldActive);
   }, [clickAndHoldActive, selectionAreas, handleActiveCellMouseEnterCallback]);
+  // cspell:words rowcount colcount
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, getTableProps(), devtools.getDevtoolsProps(componentName), {
     className: cx__default["default"](blockClass, className, "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__container-has-focus"), containerHasFocus), "".concat(blockClass, "__").concat(theme), theme === 'dark')),
     ref: spreadsheetRef,
@@ -695,7 +583,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     "aria-rowcount": (rows === null || rows === void 0 ? void 0 : rows.length) || 0,
     "aria-colcount": (columns === null || columns === void 0 ? void 0 : columns.length) || 0,
     "aria-label": spreadsheetAriaLabel,
-    onKeyDown: handleKeyPress,
+    onKeyDown: handleKeyPressEvent,
     onFocus: function onFocus() {
       return setContainerHasFocus(true);
     }

package/lib/components/DataSpreadsheet/DataSpreadsheetBody.js

@@ -17,14 +17,12 @@ var cx = require('classnames');
 var layout = require('@carbon/layout');
 var settings = require('../../settings.js');
 var deepCloneObject = require('../../global/js/utils/deepCloneObject.js');
-var uuidv4 = require('../../global/js/utils/uuidv4.js');
 var removeCellSelections = require('./utils/removeCellSelections.js');
 var createCellSelectionArea = require('./utils/createCellSelectionArea.js');
 var checkActiveHeaderCell = require('./utils/checkActiveHeaderCell.js');
 var checkSelectedHeaderCell = require('./utils/checkSelectedHeaderCell.js');
-var handleHeaderCellSelection = require('./utils/handleHeaderCellSelection.js');
 var getSpreadsheetWidth = require('./utils/getSpreadsheetWidth.js');
-var checkForHoldingKey = require('./utils/checkForHoldingKey.js');
+var commonEventHandlers = require('./utils/commonEventHandlers.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useSpreadsheetMouseUp = require('./hooks/useSpreadsheetMouseUp.js');
 
@@ -250,71 +248,10 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   // onClick fn for each cell in the data spreadsheet body,
   // adds the active cell highlight
-  var handleBodyCellClick = React.useCallback(function (cell, columnIndex) {
-    return function (event) {
-      event.preventDefault();
-      var closestBodyCell = event.target.closest(".".concat(blockClass, "__body--td"));
-      var isValidSelectionAreaStart = closestBodyCell.classList.contains("".concat(blockClass, "__body--td"));
-      setValidStartingPoint(isValidSelectionAreaStart);
-      var isHoldingCommandKey = checkForHoldingKey.checkForHoldingKey(event, 'cmd');
-      var isHoldingShiftKey = checkForHoldingKey.checkForHoldingKey(event, 'shiftKey');
-      setContainerHasFocus(true);
-      var activeCoordinates = {
-        row: cell.row.index,
-        column: columnIndex
-      };
-      var tempMatcher = uuidv4["default"]();
-      setClickAndHoldActive(true);
 
-      // prevent multiple selections unless cmd key is held
-      // meaning that selectionAreas should only have one item by default
-      if (isHoldingCommandKey) {
-        var activeCellElement = ref.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
-        activeCellElement.setAttribute('data-selection-id', tempMatcher);
-        setActiveCellInsideSelectionArea(true);
-        setActiveCellCoordinates(activeCoordinates);
-        setCurrentMatcher(tempMatcher);
-        setSelectionAreas(function (prev) {
-          return [].concat(_rollupPluginBabelHelpers.toConsumableArray(prev), [{
-            point1: activeCoordinates,
-            matcher: tempMatcher
-          }]);
-        });
-      } else if (isHoldingShiftKey) {
-        setContainerHasFocus(true);
-        var selectionAreaClone = deepCloneObject.deepCloneObject(selectionAreas);
-        var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
-          return item.matcher === currentMatcher;
-        });
-        if (indexOfItemToUpdate === -1) {
-          // There is always a selectionArea with a point1 object that updates
-          // whenever the activeCellCoordinates update, we should always be able
-          // to find an index, but if we do not for some reason we should return
-          // at this point.
-          return;
-        } else {
-          // Update the selectionArea that was found, do not update currentMatcher
-          selectionAreaClone[indexOfItemToUpdate].point1 = activeCellCoordinates;
-          selectionAreaClone[indexOfItemToUpdate].point2 = activeCoordinates;
-          selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
-          selectionAreaClone[indexOfItemToUpdate].matcher = currentMatcher;
-          setSelectionAreas(selectionAreaClone);
-        }
-      } else {
-        activeCellRef.current.style.display = 'none';
-        setActiveCellInsideSelectionArea(false);
-        setActiveCellCoordinates(activeCoordinates);
-        // remove all previous cell selections
-        removeCellSelections.removeCellSelections({
-          spreadsheetRef: ref
-        });
-        setSelectionAreas([{
-          point1: activeCoordinates,
-          matcher: tempMatcher
-        }]);
-        setCurrentMatcher(tempMatcher);
-        setSelectionAreaData([]);
-      }
+  var handleBodyCellClickEvent = React.useCallback(function (cell, columnIndex) {
+    return function (event) {
+      commonEventHandlers.handleBodyCellClick(cell, columnIndex, event, currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea, activeCellRef, setValidStartingPoint);
     };
   }, [currentMatcher, activeCellCoordinates, selectionAreas, setActiveCellCoordinates, setSelectionAreas, setContainerHasFocus, setClickAndHoldActive, setCurrentMatcher, ref, setSelectionAreaData, setActiveCellInsideSelectionArea, activeCellRef]);
   var handleBodyScroll = function handleBodyScroll() {
@@ -330,50 +267,14 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       contentScrollElementRef.removeEventListener('scroll', handleBodyScroll);
     };
   });
-  var handleBodyCellHover = React.useCallback(function (cell, columnIndex) {
+  var handleBodyCellHoverEvent = React.useCallback(function (cell, columnIndex) {
     return function () {
-      if (clickAndHoldActive) {
-        var cellCoordinates = {
-          row: cell.row.index,
-          column: columnIndex
-        };
-        setSelectionAreas(function (prev) {
-          var _selectionAreaClone$i, _selectionAreaClone$i2;
-          var selectionAreaClone = deepCloneObject.deepCloneObject(prev);
-          var indexOfItemToUpdate = selectionAreaClone.findIndex(function (item) {
-            return item.matcher === currentMatcher;
-          });
-          // No items in the array match up with the currentMatcher value
-          if (indexOfItemToUpdate === -1) {
-            return prev;
-          }
-          // Do not update state if you're still hovering on the same cell
-          if (((_selectionAreaClone$i = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i === void 0 ? void 0 : _selectionAreaClone$i.row) === cellCoordinates.row && ((_selectionAreaClone$i2 = selectionAreaClone[indexOfItemToUpdate].point2) === null || _selectionAreaClone$i2 === void 0 ? void 0 : _selectionAreaClone$i2.column) === cellCoordinates.column) {
-            return prev;
-          }
-          selectionAreaClone[indexOfItemToUpdate].point2 = cellCoordinates;
-          selectionAreaClone[indexOfItemToUpdate].areaCreated = false;
-          return selectionAreaClone;
-        });
-      }
+      commonEventHandlers.handleBodyCellHover(cell, columnIndex, clickAndHoldActive, currentMatcher, setSelectionAreas);
     };
   }, [clickAndHoldActive, currentMatcher, setSelectionAreas]);
-  var handleRowHeaderClick = React.useCallback(function (index) {
+  var handleRowHeaderClickEvent = React.useCallback(function (index) {
     return function (event) {
-      var isHoldingCommandKey = checkForHoldingKey.checkForHoldingKey(event, 'cmd');
-      handleHeaderCellSelection.handleHeaderCellSelection({
-        type: 'row',
-        activeCellCoordinates: activeCellCoordinates,
-        rows: rows,
-        columns: columns,
-        setActiveCellCoordinates: setActiveCellCoordinates,
-        setCurrentMatcher: setCurrentMatcher,
-        setSelectionAreas: setSelectionAreas,
-        spreadsheetRef: ref,
-        index: index,
-        setSelectionAreaData: setSelectionAreaData,
-        isHoldingCommandKey: isHoldingCommandKey
-      });
+      commonEventHandlers.handleRowHeaderClick(index, event, columns, ref, setSelectionAreas, setCurrentMatcher, setActiveCellCoordinates, activeCellCoordinates, rows, setSelectionAreaData);
     };
   }, [columns, ref, setSelectionAreas, setCurrentMatcher, setActiveCellCoordinates, activeCellCoordinates, rows, setSelectionAreaData]);
 
@@ -423,7 +324,7 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         "data-row-index": index,
         "data-column-index": "header",
         type: "button",
-        onClick: handleRowHeaderClick(index),
+        onClick: handleRowHeaderClickEvent(index),
         className: cx__default["default"]("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th"), "".concat(blockClass, "--interactive-cell-element"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__td-th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === index || checkActiveHeaderCell.checkActiveHeaderCell(index, selectionAreas, 'row')), "".concat(blockClass, "__td-th--selected-header"), checkSelectedHeaderCell.checkSelectedHeaderCell(index, selectionAreas, 'row', columns))),
         style: {
           width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
@@ -445,14 +346,14 @@ var DataSpreadsheetBody = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           "data-row-index": cell.row.index,
           "data-column-index": index,
           className: cx__default["default"]("".concat(blockClass, "__td"), "".concat(blockClass, "__body--td"), "".concat(blockClass, "--interactive-cell-element")),
-          onMouseDown: handleBodyCellClick(cell, index),
-          onMouseOver: handleBodyCellHover(cell, index),
+          onMouseDown: handleBodyCellClickEvent(cell, index),
+          onMouseOver: handleBodyCellHoverEvent(cell, index),
           onFocus: function onFocus() {},
           type: "button"
         }, cell.render('Cell')));
       }));
     }
-  }, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClick, handleBodyCellClick, handleBodyCellHover, defaultColumn, columns]);
+  }, [prepareRow, rows, activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, selectionAreas, handleRowHeaderClickEvent, handleBodyCellClickEvent, handleBodyCellHoverEvent, defaultColumn, columns]);
   var spreadsheetBodyRef = React.useRef();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     ref: spreadsheetBodyRef,

package/lib/components/DataSpreadsheet/utils/commonEventHandlers.d.ts

@@ -0,0 +1,4 @@
+export function handleBodyCellClick(cell: any, columnIndex: any, event: any, ...rest: any[]): void;
+export function handleBodyCellHover(cell: any, columnIndex: any, ...rest: any[]): void;
+export function handleRowHeaderClick(index: any, event: any, ...rest: any[]): void;
+export function handleKeyPress(event: any, ...rest: any[]): any;