@carbon/ibm-products 2.38.0-alpha.5 → 2.39.0

package/lib/components/ConditionBuilder/ConditionGroupBuilder/ConditionGroupBuilder.js

@@ -14,6 +14,7 @@ var React = require('react');
 var ConditionBlock = require('../ConditionBlock/ConditionBlock.js');
 var index = require('../../../node_modules/prop-types/index.js');
 var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
+var uuidv4 = require('../../../global/js/utils/uuidv4.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -26,17 +27,18 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  * @returns
  */
 var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
-  var _state$conditions;
-  var state = _ref.state,
+  var _group$conditions;
+  var group = _ref.group,
     aria = _ref.aria,
     onRemove = _ref.onRemove,
     onChange = _ref.onChange,
-    conditionBuilderRef = _ref.conditionBuilderRef;
-  var onRemoveHandler = function onRemoveHandler(conditionIndex, e) {
-    if (state.conditions.length > 1) {
-      onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
-        conditions: state.conditions.filter(function (condition, cIndex) {
-          return conditionIndex !== cIndex;
+    conditionBuilderRef = _ref.conditionBuilderRef,
+    className = _ref.className;
+  var onRemoveHandler = function onRemoveHandler(conditionId, e) {
+    if (group.conditions.length > 1) {
+      onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
+        conditions: group.conditions.filter(function (condition) {
+          return conditionId !== condition.id;
         })
       }));
       handleFocusOnClose(e);
@@ -44,23 +46,27 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       onRemove();
     }
   };
-  var onChangeHandler = function onChangeHandler(updatedConditions, conditionIndex) {
-    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
-      conditions: state.conditions.map(function (condition, cIndex) {
-        return conditionIndex === cIndex ? updatedConditions : condition;
-      })
+  var onChangeHandler = function onChangeHandler(updatedCondition, conditionIndex) {
+    var updatedConditions = [].concat(_rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(0, conditionIndex)), [updatedCondition], _rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(conditionIndex + 1)));
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
+      conditions: updatedConditions
     }));
   };
   var addConditionHandler = function addConditionHandler(conditionIndex) {
-    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
-      conditions: [].concat(_rollupPluginBabelHelpers.toConsumableArray(state.conditions.slice(0, conditionIndex + 1)), [{
-        property: undefined,
-        operator: '',
-        value: '',
-        popoverToOpen: 'propertyField'
-      }], _rollupPluginBabelHelpers.toConsumableArray(state.conditions.slice(conditionIndex + 1)))
+    var newCondition = {
+      property: undefined,
+      operator: '',
+      value: '',
+      popoverToOpen: 'propertyField',
+      id: uuidv4["default"]()
+    };
+    onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
+      conditions: [].concat(_rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(0, conditionIndex + 1)), [newCondition], _rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(conditionIndex + 1)))
     }));
   };
+  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"]');
@@ -69,40 +75,39 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
     }
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: " ".concat(DataConfigs.blockClass, "__condition-builder__group eachGroup")
+    className: "".concat(className, "  eachGroup")
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(DataConfigs.blockClass, "__condition-wrapper"),
     role: "grid",
     "aria-label": DataConfigs.translateWithId('condition_builder_group')
-  }, state === null || state === void 0 || (_state$conditions = state.conditions) === null || _state$conditions === void 0 ? void 0 : _state$conditions.map(function (eachCondition, conditionIndex) {
+  }, group === null || group === void 0 || (_group$conditions = group.conditions) === null || _group$conditions === void 0 ? void 0 : _group$conditions.map(function (eachCondition, conditionIndex) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      key: conditionIndex
+      key: eachCondition.id
     }, eachCondition.conditions && /*#__PURE__*/React__default["default"].createElement(ConditionGroupBuilder, {
+      className: "".concat(DataConfigs.blockClass, "__condition-builder__group"),
       aria: {
         level: aria.level + 1,
         posinset: conditionIndex + 1,
-        setsize: state.conditions.length
+        setsize: group.conditions.length
       },
-      state: eachCondition,
-      onChange: function onChange(updatedConditions) {
-        onChangeHandler(updatedConditions, conditionIndex);
+      group: eachCondition,
+      onChange: function onChange(updatedCondition) {
+        onChangeHandler(updatedCondition, conditionIndex);
       },
       onRemove: function onRemove(e) {
-        onRemoveHandler(conditionIndex, e);
+        onRemoveHandler(eachCondition.id, e);
       },
-      conditionBuilderRef: conditionBuilderRef,
-      key: conditionIndex
+      conditionBuilderRef: conditionBuilderRef
     }), !eachCondition.conditions && /*#__PURE__*/React__default["default"].createElement(ConditionBlock["default"], {
-      key: conditionIndex,
-      conjunction: conditionIndex > 0 ? state.groupOperator : undefined,
+      conjunction: conditionIndex > 0 ? group.groupOperator : undefined,
       aria: {
         level: aria.level + 1,
         posinset: conditionIndex + 1,
-        setsize: state.conditions.length
+        setsize: group.conditions.length
       },
       isStatement: conditionIndex == 0,
-      state: eachCondition,
-      group: state,
+      condition: eachCondition,
+      group: group,
       conditionIndex: conditionIndex,
       className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__gap-bottom"),
       onChange: function onChange(updatedConditions) {
@@ -110,18 +115,19 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       },
       addConditionHandler: addConditionHandler,
       onRemove: function onRemove(e) {
-        onRemoveHandler(conditionIndex, e);
+        onRemoveHandler(eachCondition.id, e);
       },
       onConnectorOperatorChange: function onConnectorOperatorChange(op) {
-        onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+        onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
           groupOperator: op
         }));
       },
       onStatementChange: function onStatementChange(updatedStatement) {
-        onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+        onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
           statement: updatedStatement
         }));
-      }
+      },
+      isLastCondition: isLastCondition
     }));
   })));
 };
@@ -131,10 +137,18 @@ ConditionGroupBuilder.propTypes = {
    * object contains the aria attributes
    */
   aria: index["default"].object,
+  /**
+   * Provide an  class to be applied to the containing node.
+   */
+  className: index["default"].string,
   /**
    * ref of condition builder
    */
   conditionBuilderRef: index["default"].object,
+  /**
+   * group defines the current group
+   */
+  group: index["default"].object,
   /**
   
    * callback to update the current condition of the state tree
@@ -143,11 +157,7 @@ ConditionGroupBuilder.propTypes = {
   /**
    * call back to remove the particular group from the state tree
    */
-  onRemove: index["default"].func,
-  /**
-   * state defines the current group
-   */
-  state: index["default"].object
+  onRemove: index["default"].func
 };
 
 exports["default"] = ConditionGroupBuilder$1;

package/lib/components/CreateInfluencer/CreateInfluencer.d.ts

@@ -1,23 +1,61 @@
-export function CreateInfluencer({ className, currentStep, stepData, title }: {
-    className: any;
-    currentStep: any;
-    stepData: any;
-    title: any;
-}): import("react/jsx-runtime").JSX.Element;
-export namespace CreateInfluencer {
-    export { componentName as displayName };
-    export namespace propTypes {
-        let className: PropTypes.Requireable<string>;
-        let currentStep: PropTypes.Validator<number>;
-        let stepData: PropTypes.Requireable<(PropTypes.InferProps<{
+/**
+ * Copyright IBM Corp. 2021, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { PropsWithChildren, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import '../../global/js/utils/props-helper';
+interface Step {
+    introStep?: boolean;
+    secondaryLabel?: string;
+    shouldIncludeStep?: boolean;
+    title?: ReactNode;
+}
+interface CreateInfluencerProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Provide the current step number.
+     */
+    currentStep: number;
+    /**
+     * Provide the Set Data.
+     */
+    stepData: Step[];
+    /**
+     * Title.
+     */
+    title?: string | undefined;
+}
+export declare const CreateInfluencer: {
+    ({ className, currentStep, stepData, title, }: PropsWithChildren<CreateInfluencerProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+    propTypes: {
+        /**
+         * Provide an optional class to be applied to the containing node.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * Used to mark the current step on the ProgressIndicator component
+         */
+        currentStep: PropTypes.Validator<number>;
+        /**
+         * The step data that renders the progress items
+         */
+        stepData: PropTypes.Requireable<(PropTypes.InferProps<{
             introStep: PropTypes.Requireable<boolean>;
             secondaryLabel: PropTypes.Requireable<string>;
             shouldIncludeStep: PropTypes.Requireable<boolean>;
             title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         }> | null | undefined)[]>;
-        let title: PropTypes.Requireable<string>;
-    }
-}
-declare const componentName: "CreateInfluencer";
-import PropTypes from 'prop-types';
+        /**
+         * The main title of the full page, displayed in the influencer area.
+         */
+        title: PropTypes.Requireable<string>;
+    };
+};
 export {};

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

@@ -1,5 +1,70 @@
 /**
- * DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
+ * Copyright IBM Corp. 2022, 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
-export let DataSpreadsheet: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+import { Column, Size, Theme } from './types';
+interface DataSpreadsheetProps {
+    /**
+     * Specifies the cell height
+     */
+    cellSize?: Size;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * The data that will build the column headers
+     */
+    columns?: readonly Column[];
+    /**
+     * The spreadsheet data that will be rendered in the body of the spreadsheet component
+     */
+    data?: readonly object[];
+    /**
+     * Sets the number of empty rows to be created when there is no data provided
+     */
+    defaultEmptyRowCount?: number;
+    /**
+     * The spreadsheet id
+     */
+    id?: number | string;
+    /**
+     * The event handler that is called when the active cell changes
+     */
+    onActiveCellChange?: () => void;
+    /**
+     * The setter fn for the data prop
+     */
+    onDataUpdate?: ({ ...args }: {
+        [x: string]: any;
+    }) => void;
+    /**
+     * The event handler that is called when the selection area values change
+     */
+    onSelectionAreaChange?: () => void;
+    /**
+     * The aria label applied to the Select all button
+     */
+    selectAllAriaLabel: string;
+    /**
+     * The aria label applied to the Data spreadsheet component
+     */
+    spreadsheetAriaLabel: string;
+    /**
+     * The theme the DataSpreadsheet should use (only used to render active cell/selection area colors on dark theme)
+     */
+    theme?: Theme;
+    /**
+     * The total number of columns to be initially visible, additional columns will be rendered and
+     * visible via horizontal scrollbar
+     */
+    totalVisibleColumns?: number;
+}
+/**
+ * DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
+ */
+export declare let DataSpreadsheet: React.ForwardRefExoticComponent<DataSpreadsheetProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -42,14 +42,12 @@ 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"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--data-spreadsheet");
 var componentName = 'DataSpreadsheet';
 
 // Default values for props
 var defaults = {
-  cellSize: 'sm',
   columns: Object.freeze([]),
   data: Object.freeze([]),
   defaultEmptyRowCount: 16,
@@ -58,13 +56,12 @@ var defaults = {
   onSelectionAreaChange: Object.freeze(function () {}),
   theme: 'light'
 };
-
 /**
  * DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
  */
 exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
   var _ref$cellSize = _ref.cellSize,
-    cellSize = _ref$cellSize === void 0 ? defaults.cellSize : _ref$cellSize,
+    cellSize = _ref$cellSize === void 0 ? 'sm' : _ref$cellSize,
     className = _ref.className,
     _ref$columns = _ref.columns,
     columns = _ref$columns === void 0 ? defaults.columns : _ref$columns,
@@ -84,7 +81,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     theme = _ref.theme,
     totalVisibleColumns = _ref.totalVisibleColumns,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var multiKeyTrackingRef = React.useRef();
+  var multiKeyTrackingRef = React.useRef(null);
   var localRef = React.useRef();
   var spreadsheetRef = ref || localRef;
   var focusedElement = useActiveElement.useActiveElement();
@@ -124,7 +121,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     _useState18 = _rollupPluginBabelHelpers.slicedToArray(_useState17, 2),
     headerCellHoldActive = _useState18[0],
     setHeaderCellHoldActive = _useState18[1];
-  var _useState19 = React.useState(null),
+  var _useState19 = React.useState(false),
     _useState20 = _rollupPluginBabelHelpers.slicedToArray(_useState19, 2),
     isActiveHeaderCellChanged = _useState20[0],
     setIsActiveHeaderCellChanged = _useState20[1];
@@ -135,10 +132,10 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
   var previousState = usePreviousValue.usePreviousValue({
     activeCellCoordinates: activeCellCoordinates,
     isEditing: isEditing
-  });
+  }) || {};
   var cellSizeValue = getCellSize.getCellSize(cellSize);
   var cellEditorRef = React.useRef();
-  var _useState23 = React.useState(),
+  var _useState23 = React.useState(null),
     _useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
     activeCellContent = _useState24[0],
     setActiveCellContent = _useState24[1];
@@ -189,13 +186,18 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
 
   // Removes the active cell element
   var removeActiveCell = React.useCallback(function () {
-    var activeCellHighlight = spreadsheetRef.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
-    activeCellHighlight.style.display = 'none';
+    var _current;
+    var activeCellHighlight = spreadsheetRef === null || spreadsheetRef === void 0 || (_current = spreadsheetRef.current) === null || _current === void 0 ? void 0 : _current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
+    if (activeCellHighlight) {
+      activeCellHighlight.style.display = 'none';
+    }
   }, [spreadsheetRef]);
   var removeCellEditor = React.useCallback(function () {
     setCellEditorValue('');
     setIsEditing(false);
-    cellEditorRef.current.style.display = 'none';
+    if (cellEditorRef !== null && cellEditorRef !== void 0 && cellEditorRef.current) {
+      cellEditorRef.current.style.display = 'none';
+    }
   }, []);
 
   // Remove cell editor if the active cell coordinates change and save with new cell data, this will
@@ -205,8 +207,10 @@ 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)) && isEditing) {
       var cellProps = rows[prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row].cells[prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column];
       removeCellEditor();
-      updateData(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row, cellProps.column.id);
-      cellEditorRulerRef.current.textContent = '';
+      updateData(prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row, cellProps.column.id, undefined);
+      if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
+        cellEditorRulerRef.current.textContent = '';
+      }
     }
     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') {
@@ -251,7 +255,6 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     setActiveCellCoordinates: setActiveCellCoordinates,
     setSelectionAreas: setSelectionAreas,
     removeActiveCell: removeActiveCell,
-    removeCellSelections: removeCellSelections.removeCellSelections,
     setContainerHasFocus: setContainerHasFocus,
     removeCellEditor: removeCellEditor
   });
@@ -306,6 +309,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
       }
     });
     removeCellSelections.removeCellSelections({
+      matcher: undefined,
       spreadsheetRef: spreadsheetRef
     });
   }, [activeCellCoordinates, updateActiveCellCoordinates, spreadsheetRef, columns.length]);
@@ -313,7 +317,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     return isEditing || key === 'Meta' || key === 'Control';
   }, [isEditing]);
   var handleArrowKeyPress = React.useCallback(function (arrowKey) {
-    event.preventDefault();
+    var _event;
+    (_event = event) === null || _event === void 0 || _event.preventDefault();
     handleInitialArrowPress();
     var coordinatesClone = _rollupPluginBabelHelpers.objectSpread2({}, activeCellCoordinates);
     var updatedValue;
@@ -416,18 +421,28 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     setIsEditing(true);
     setClickAndHoldActive(false);
     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 = activeCellFullData ? activeCellFullData.row.cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column].value : 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;
+    }
     setCellEditorValue(activeCellValue || '');
-    cellEditorRulerRef.current.textContent = activeCellValue;
-    cellEditorRef.current.style.width = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.width;
+    if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
+      cellEditorRulerRef.current.textContent = activeCellValue;
+    }
+    if (cellEditorRef !== null && cellEditorRef !== void 0 && cellEditorRef.current && activeCellRef !== null && activeCellRef !== void 0 && activeCellRef.current) {
+      var _activeCellRef$curren;
+      cellEditorRef.current.style.width = activeCellRef === null || activeCellRef === void 0 || (_activeCellRef$curren = activeCellRef.current) === null || _activeCellRef$curren === void 0 || (_activeCellRef$curren = _activeCellRef$curren.style) === null || _activeCellRef$curren === void 0 ? void 0 : _activeCellRef$curren.width;
+    }
   };
 
   // Sets the initial placement of the cell editor cursor at the end of the text area
   // this is not done for us by default in Safari
   React.useEffect(function () {
     if (isEditing && !(previousState !== null && previousState !== void 0 && previousState.isEditing)) {
-      cellEditorRef.current.setSelectionRange(cellEditorRulerRef.current.textContent.length, cellEditorRulerRef.current.textContent.length);
-      cellEditorRef.current.focus();
+      var _cellEditorRef$curren, _cellEditorRulerRef$c, _cellEditorRulerRef$c2, _cellEditorRef$curren2;
+      cellEditorRef === null || cellEditorRef === void 0 || (_cellEditorRef$curren = cellEditorRef.current) === null || _cellEditorRef$curren === void 0 || _cellEditorRef$curren.setSelectionRange(Number(cellEditorRulerRef === null || cellEditorRulerRef === void 0 || (_cellEditorRulerRef$c = cellEditorRulerRef.current) === null || _cellEditorRulerRef$c === void 0 || (_cellEditorRulerRef$c = _cellEditorRulerRef$c.textContent) === null || _cellEditorRulerRef$c === void 0 ? void 0 : _cellEditorRulerRef$c.length), Number(cellEditorRulerRef === null || cellEditorRulerRef === void 0 || (_cellEditorRulerRef$c2 = cellEditorRulerRef.current) === null || _cellEditorRulerRef$c2 === void 0 || (_cellEditorRulerRef$c2 = _cellEditorRulerRef$c2.textContent) === null || _cellEditorRulerRef$c2 === void 0 ? void 0 : _cellEditorRulerRef$c2.length));
+      cellEditorRef === null || cellEditorRef === void 0 || (_cellEditorRef$curren2 = cellEditorRef.current) === null || _cellEditorRef$curren2 === void 0 || _cellEditorRef$curren2.focus();
     }
   }, [isEditing, previousState === null || previousState === void 0 ? void 0 : previousState.isEditing]);
   var handleActiveCellClick = function handleActiveCellClick() {
@@ -438,7 +453,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
       }
       handleRowColumnHeaderClick({
         isKeyboard: false,
-        index: indexValue
+        index: Number(indexValue)
       });
     }
     return;
@@ -455,6 +470,7 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
       var tempMatcher = uuidv4["default"]();
       setClickAndHoldActive(true);
       removeCellSelections.removeCellSelections({
+        matcher: null,
         spreadsheetRef: spreadsheetRef
       });
       setSelectionAreas([{
@@ -485,19 +501,21 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
   var handleRowColumnHeaderClick = function handleRowColumnHeaderClick(_ref5) {
     var isKeyboard = _ref5.isKeyboard,
       _ref5$index = _ref5.index,
-      index = _ref5$index === void 0 ? null : _ref5$index;
+      index = _ref5$index === void 0 ? -1 : _ref5$index;
     var handleHeaderCellProps = {
       activeCellCoordinates: activeCellCoordinates,
       rows: rows,
       columns: columns,
+      currentMatcher: currentMatcher,
       setActiveCellCoordinates: setActiveCellCoordinates,
       setCurrentMatcher: setCurrentMatcher,
       setSelectionAreas: setSelectionAreas,
       spreadsheetRef: spreadsheetRef,
+      index: index,
       isKeyboard: isKeyboard,
       setSelectionAreaData: setSelectionAreaData,
-      index: index,
-      currentMatcher: currentMatcher
+      isHoldingCommandKey: null,
+      isHoldingShiftKey: null
     };
     // Select an entire column
     if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
@@ -621,7 +639,6 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     setContainerHasFocus: setContainerHasFocus,
     selectionAreas: selectionAreas,
     setSelectionAreas: setSelectionAreas,
-    cellSize: cellSize,
     headerGroups: headerGroups,
     defaultColumn: defaultColumn,
     getTableBodyProps: getTableBodyProps,
@@ -671,10 +688,12 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     }),
     onChange: function onChange(event) {
       setCellEditorValue(event.target.value);
-      cellEditorRulerRef.current.textContent = event.target.value;
+      if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
+        cellEditorRulerRef.current.textContent = event.target.value;
+      }
     },
     ref: cellEditorRef,
-    "aria-labelledby": activeCellCoordinates ? "".concat(blockClass, "__cell--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) : null,
+    "aria-labelledby": activeCellCoordinates ? "".concat(blockClass, "__cell--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) : '',
     className: cx__default["default"]("".concat(blockClass, "__cell-editor"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__cell-editor--").concat(cellSize), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__cell-editor--active"), isEditing))
   }), /*#__PURE__*/React__default["default"].createElement("pre", {
     "aria-hidden": true,
@@ -705,6 +724,7 @@ exports.DataSpreadsheet.propTypes = {
   /**
    * The data that will build the column headers
    */
+  /**@ts-ignore */
   columns: index["default"].arrayOf(index["default"].shape({
     Header: index["default"].string,
     accessor: index["default"].oneOfType([index["default"].string, index["default"].func]),
@@ -713,6 +733,7 @@ exports.DataSpreadsheet.propTypes = {
   /**
    * The spreadsheet data that will be rendered in the body of the spreadsheet component
    */
+  /**@ts-ignore */
   data: index["default"].arrayOf(index["default"].shape),
   /**
    * Sets the number of empty rows to be created when there is no data provided