@carbon/ibm-products 2.43.2-canary.4 → 2.43.2-canary.40

package/lib/components/ConditionBuilder/ConditionBuilderItem/ConditionBuilderItemOption/{ConditionBuilderItemOption.js → ItemOptionForValueField.js}

@@ -21,28 +21,51 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _CheckboxCheckedFille, _Checkbox, _SelectSkeleton;
-var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
+var _SelectSkeleton, _CheckboxCheckedFille, _Checkbox;
+var ItemOptionForValueField = function ItemOptionForValueField(_ref) {
   var _ref$conditionState = _ref.conditionState,
     conditionState = _ref$conditionState === void 0 ? {} : _ref$conditionState,
     _ref$config = _ref.config,
     config = _ref$config === void 0 ? {} : _ref$config,
     onChange = _ref.onChange;
-  var multiSelectable = conditionState.operator === 'one-of';
+  var multiSelectable = conditionState.operator === 'one_of';
   var _useContext = React.useContext(ConditionBuilderProvider.ConditionBuilderContext),
     popOverSearchThreshold = _useContext.popOverSearchThreshold,
-    getOptions = _useContext.getOptions;
+    getOptions = _useContext.getOptions,
+    rootState = _useContext.rootState;
+  var contentRef = React.useRef();
   var _useState = React.useState(config.options),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     allOptions = _useState2[0],
     setAllOptions = _useState2[1];
-  var _useState3 = React.useState(config.options),
+  var _useState3 = React.useState(''),
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    filteredItems = _useState4[0],
-    setFilteredItems = _useState4[1];
+    searchValue = _useState4[0],
+    setSearchValue = _useState4[1];
+  var filteredItems = allOptions === null || allOptions === void 0 ? void 0 : allOptions.filter(function (opt) {
+    return opt.label.toLowerCase().includes(searchValue.toLowerCase());
+  });
   var selection = Array.isArray(conditionState.value) ? conditionState.value : conditionState.value !== undefined ? [conditionState.value] : [];
-  var contentRef = React.useRef();
   React.useEffect(function () {
+    // if(rest['data-name'] == 'valueField'){
+    //   const fetchData = async () => {
+    //     const response = await config.options(conditionState);
+    //     if (
+    //       response?.length > 0 &&
+    //       Object.keys(response[0]).includes('label') &&
+    //       Object.keys(response[0]).includes('id')
+    //     ) {
+    //       setAllOptions(response);
+    //       setFilteredItems(response);
+    //     }
+    //   };
+
+    //   fetchData(); // Call the async method
+    // }else{
+    //   setAllOptions(config.options);
+    //       setFilteredItems(config.options);
+    // }
+
     if (!allOptions && getOptions) {
       var fetchData = /*#__PURE__*/function () {
         var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee() {
@@ -51,12 +74,11 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
             while (1) switch (_context.prev = _context.next) {
               case 0:
                 _context.next = 2;
-                return getOptions(conditionState);
+                return getOptions(rootState, conditionState);
               case 2:
                 response = _context.sent;
                 if ((response === null || response === void 0 ? void 0 : response.length) > 0 && Object.keys(response[0]).includes('label') && Object.keys(response[0]).includes('id')) {
                   setAllOptions(response);
-                  setFilteredItems(response);
                 }
               case 4:
               case "end":
@@ -76,46 +98,47 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
     //this will focus the first input field in the popover
 
     if (contentRef.current) {
-      var _contentRef$current;
-      var firstFocusableElement = (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 ? void 0 : _contentRef$current.querySelector('input, button,li');
-      firstFocusableElement === null || firstFocusableElement === void 0 || firstFocusableElement.focus();
+      var firstFocusableElement = contentRef.current.querySelector('input, button,li');
+      if (firstFocusableElement) {
+        firstFocusableElement.focus();
+      }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [allOptions]);
   var handleSelectAll = function handleSelectAll(evt) {
     if (evt.currentTarget.dataset.selectedAll == 'false') {
       onChange(undefined);
     } else {
-      onChange(allOptions.map(function (op) {
-        return op.id;
-      }));
+      onChange(allOptions);
     }
   };
   var onSearchChangeHandler = function onSearchChangeHandler(evt) {
     var value = evt.target.value;
-    var _filteredItems = allOptions.filter(function (opt) {
-      return opt.label.toLowerCase().includes(value.toLowerCase());
-    });
-    setFilteredItems(_filteredItems);
+    setSearchValue(value);
   };
   var onClickHandler = function onClickHandler(evt, option, isSelected) {
     if (multiSelectable) {
       if (isSelected) {
         var items = selection.filter(function (v) {
-          return v !== option.id;
+          return v.id !== option.id;
         });
         onChange(items.length > 0 ? items : undefined, evt);
       } else {
-        onChange([].concat(_rollupPluginBabelHelpers.toConsumableArray(selection), [option.id]), evt);
+        onChange([].concat(_rollupPluginBabelHelpers.toConsumableArray(selection), [option]), evt);
       }
     } else {
-      onChange(option.id, evt);
+      onChange(option, evt);
     }
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, allOptions && /*#__PURE__*/React__default["default"].createElement("div", {
+  var getAriaLabel = function getAriaLabel() {
+    return conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : DataConfigs.translateWithId('property');
+  };
+  if (!allOptions) {
+    return _SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React__default["default"].createElement(react.SelectSkeleton, null));
+  }
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(DataConfigs.blockClass, "__item-option"),
     ref: contentRef
-  }, (config.includeSearch || allOptions.length > popOverSearchThreshold) && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, allOptions.length > popOverSearchThreshold && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(DataConfigs.blockClass, "__item-option__search")
   }, /*#__PURE__*/React__default["default"].createElement(react.Search, {
     size: "sm",
@@ -131,11 +154,13 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
     onClick: handleSelectAll,
     className: "".concat(DataConfigs.blockClass, "__selectAll-button")
   }, selection.length == 0 ? 'Select all' : 'Deselect all')), /*#__PURE__*/React__default["default"].createElement("ul", {
-    "aria-label": conditionState.label ? conditionState.label : conditionState.property ? conditionState.property : DataConfigs.translateWithId('property'),
+    "aria-label": getAriaLabel(),
     role: "listbox",
     "data-multi-select": multiSelectable
   }, filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.map(function (option) {
-    var isSelected = selection.includes(option.id);
+    var isSelected = selection.map(function (option) {
+      return option.id;
+    }).includes(option.id);
     var Icon = option.icon;
     return /*#__PURE__*/React__default["default"].createElement("li", {
       tabIndex: 0,
@@ -162,9 +187,9 @@ var ConditionBuilderItemOption = function ConditionBuilderItemOption(_ref) {
     }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, null), option.label), isSelected && /*#__PURE__*/React__default["default"].createElement(icons.Checkmark, {
       className: "".concat(DataConfigs.blockClass, "__checkmark")
     }))));
-  }))), !allOptions && (_SelectSkeleton || (_SelectSkeleton = /*#__PURE__*/React__default["default"].createElement(react.SelectSkeleton, null))));
+  })));
 };
-ConditionBuilderItemOption.propTypes = {
+ItemOptionForValueField.propTypes = {
   /**
    * current condition object
    */
@@ -179,4 +204,4 @@ ConditionBuilderItemOption.propTypes = {
   onChange: index["default"].func
 };
 
-exports.ConditionBuilderItemOption = ConditionBuilderItemOption;
+exports.ItemOptionForValueField = ItemOptionForValueField;

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

@@ -16,12 +16,12 @@ var index = require('../../../node_modules/prop-types/index.js');
 var cx = require('classnames');
 var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
 var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
-var ConditionBuilderItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ConditionBuilderItemOption.js');
 var util = require('../utils/util.js');
 var ConditionConnector = require('../ConditionBuilderConnector/ConditionConnector.js');
 var ConditionBuilderProvider = require('../ConditionBuilderContext/ConditionBuilderProvider.js');
 var uuidv4 = require('../../../global/js/utils/uuidv4.js');
 var ConditionPreview = require('../ConditionPreview/ConditionPreview.js');
+var ItemOption = require('../ConditionBuilderItem/ConditionBuilderItemOption/ItemOption.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,7 +29,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _ConditionPreview, _ConditionPreview2;
-
 /**
  *
  *  state - this is the current group that is being rendered . This can be a inner group or outer group
@@ -94,7 +93,6 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
   var addConditionSubGroupHandler = function addConditionSubGroupHandler(conditionIndex) {
     onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, group), {}, {
       conditions: [].concat(_rollupPluginBabelHelpers.toConsumableArray(group.conditions.slice(0, conditionIndex + 1)), [{
-        groupSeparateOperator: null,
         groupOperator: 'and',
         statement: 'if',
         conditions: [{
@@ -187,7 +185,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
       "data-name": "connectorField",
       popOverClassName: "".concat(DataConfigs.blockClass, "__gap"),
       className: "".concat(DataConfigs.blockClass, "__statement-button")
-    }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItemOption.ConditionBuilderItemOption, {
+    }, /*#__PURE__*/React__default["default"].createElement(ItemOption.ItemOption, {
       conditionState: {
         value: group.statement,
         label: DataConfigs.translateWithId('condition')
@@ -223,7 +221,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
           onRemoveHandler(eachCondition.id, e);
         },
         conditionBuilderRef: conditionBuilderRef
-      })) : /*#__PURE__*/React__default["default"].createElement(ConditionBlock["default"], {
+      })) : /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(ConditionBlock["default"], {
         conjunction: conditionIndex > 0 ? group.groupOperator : undefined,
         aria: {
           level: aria.level + 1,
@@ -253,7 +251,7 @@ var ConditionGroupBuilder = function ConditionGroupBuilder(_ref) {
         },
         hideConditionPreviewHandler: hideConditionPreviewHandler,
         isLastCondition: isLastCondition
-      }), conditionIndex == showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
+      })), conditionIndex == showConditionSubGroupPreview && (_ConditionPreview || (_ConditionPreview = /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
         previewType: "subGroup"
       }))), conditionIndex == showConditionPreview && (_ConditionPreview2 || (_ConditionPreview2 = /*#__PURE__*/React__default["default"].createElement(ConditionPreview["default"], {
         previewType: "condition"

package/lib/components/ConditionBuilder/ConditionPreview/ConditionPreview.js

@@ -9,7 +9,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
+var cx = require('classnames');
 var index = require('../../../node_modules/prop-types/index.js');
 var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
 var ConditionBuilderItem = require('../ConditionBuilderItem/ConditionBuilderItem.js');
@@ -18,9 +20,17 @@ var ConditionConnector = require('../ConditionBuilderConnector/ConditionConnecto
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var ConditionPreview = function ConditionPreview(_ref) {
   var previewType = _ref.previewType;
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    animate = _useState2[0],
+    setAnimate = _useState2[1];
+  React.useEffect(function () {
+    setAnimate(true);
+  }, []);
   var getConditionSection = function getConditionSection() {
     return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
       label: DataConfigs.translateWithId('property')
@@ -31,20 +41,20 @@ var ConditionPreview = function ConditionPreview(_ref) {
     }));
   };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, previewType == 'newGroup' && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview  ")
+    className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview "), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
     className: "".concat(DataConfigs.blockClass, "__statement-button"),
     label: DataConfigs.translateWithId('and')
   })), /*#__PURE__*/React__default["default"].createElement("div", {
     "aria-hidden": true,
-    className: "".concat(DataConfigs.blockClass, "__group ").concat(DataConfigs.blockClass, "__condition-wrapper ").concat(DataConfigs.blockClass, "__group-preview ").concat(DataConfigs.blockClass, "__group-wrapper")
+    className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group ").concat(DataConfigs.blockClass, "__condition-wrapper ").concat(DataConfigs.blockClass, "__group-preview ").concat(DataConfigs.blockClass, "__group-wrapper "), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(DataConfigs.blockClass, "__gap")
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
     className: "".concat(DataConfigs.blockClass, "__statement-button"),
     label: DataConfigs.translateWithId('if')
   })), getConditionSection())), previewType == 'subGroup' && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__group-preview")
+    className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview "), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(DataConfigs.blockClass, "__condition-block  ").concat(DataConfigs.blockClass, "__gap")
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {
@@ -57,7 +67,7 @@ var ConditionPreview = function ConditionPreview(_ref) {
     className: "".concat(DataConfigs.blockClass, "__gap ").concat(DataConfigs.blockClass, "__groupConnector"),
     operator: DataConfigs.translateWithId('if')
   }), getConditionSection()))), previewType == 'condition' && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(DataConfigs.blockClass, "__group-preview")
+    className: cx__default["default"](["".concat(DataConfigs.blockClass, "__group__row ").concat(DataConfigs.blockClass, "__group-preview "), _rollupPluginBabelHelpers.defineProperty({}, "".concat(DataConfigs.blockClass, "__group-preview-animate"), animate)])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(DataConfigs.blockClass, "__condition-block  ").concat(DataConfigs.blockClass, "__gap")
   }, /*#__PURE__*/React__default["default"].createElement(ConditionBuilderItem.ConditionBuilderItem, {

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

@@ -11,7 +11,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var DataConfigs = require('../ConditionBuilderContext/DataConfigs.js');
-var checkForHoldingKey = require('./checkForHoldingKey.js');
 var util = require('./util.js');
 
 var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef) {
@@ -25,7 +24,7 @@ var handleKeyDown = function handleKeyDown(evt, conditionBuilderRef) {
 var handleKeyPressForPopover = function handleKeyPressForPopover(evt, parentContainer) {
   var _parentContainer$quer;
   var key = evt.key;
-  var isHoldingShiftKey = checkForHoldingKey.checkForHoldingKey(evt, 'shiftKey');
+  var isHoldingShiftKey = util.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) {

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

@@ -3,3 +3,4 @@ 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;
 export function checkForHoldingKey(evt: any, key: any): any;
+export function checkDuplicateAction(actionState: any, selectedId: any, currentActionId: any): boolean;

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

@@ -45,7 +45,24 @@ var traverseReverse = function traverseReverse(eachElem, index, allElements, rot
     focusThisItem(allElements[allElements.length - 1]);
   }
 };
+var checkForHoldingKey = function checkForHoldingKey(evt, key) {
+  // possible key inputs: altKey,ctrlKey,metaKey,shiftKey
+  if (key === 'cmd') {
+    return evt.metaKey || evt.ctrlKey;
+  }
+  return evt[key];
+};
+var checkDuplicateAction = function checkDuplicateAction(actionState, selectedId, currentActionId) {
+  if (selectedId !== currentActionId && actionState.find(function (eachAction) {
+    return eachAction.id === selectedId;
+  })) {
+    return true;
+  }
+  return false;
+};
 
+exports.checkDuplicateAction = checkDuplicateAction;
+exports.checkForHoldingKey = checkForHoldingKey;
 exports.focusThisField = focusThisField;
 exports.focusThisItem = focusThisItem;
 exports.traverseClockVise = traverseClockVise;

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

@@ -28,6 +28,10 @@ interface DataSpreadsheetProps {
      * Sets the number of empty rows to be created when there is no data provided
      */
     defaultEmptyRowCount?: number;
+    /**
+     * Check if has custom row header component attached
+     */
+    hasCustomRowHeader?: boolean;
     /**
      * The spreadsheet id
      */
@@ -46,6 +50,14 @@ interface DataSpreadsheetProps {
      * The event handler that is called when the selection area values change
      */
     onSelectionAreaChange?: () => void;
+    /**
+     * Position of the custom row numbering component
+     */
+    renderRowHeaderDirection?: 'left' | 'right';
+    /**
+     * Component next to numbering rows
+     */
+    renderRowHeader?: (index: number) => any[];
     /**
      * The aria label applied to the Select all button
      */

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -41,7 +41,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 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"];
+var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "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';
@@ -76,6 +76,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     onActiveCellChange = _ref$onActiveCellChan === void 0 ? defaults.onActiveCellChange : _ref$onActiveCellChan,
     _ref$onSelectionAreaC = _ref.onSelectionAreaChange,
     onSelectionAreaChange = _ref$onSelectionAreaC === void 0 ? defaults.onSelectionAreaChange : _ref$onSelectionAreaC,
+    renderRowHeader = _ref.renderRowHeader,
+    renderRowHeaderDirection = _ref.renderRowHeaderDirection,
     selectAllAriaLabel = _ref.selectAllAriaLabel,
     spreadsheetAriaLabel = _ref.spreadsheetAriaLabel,
     theme = _ref.theme,
@@ -121,15 +123,19 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     _useState18 = _rollupPluginBabelHelpers.slicedToArray(_useState17, 2),
     headerCellHoldActive = _useState18[0],
     setHeaderCellHoldActive = _useState18[1];
-  var isBlurSpreadsheet = React.useRef(false);
   var _useState19 = React.useState(false),
     _useState20 = _rollupPluginBabelHelpers.slicedToArray(_useState19, 2),
-    isActiveHeaderCellChanged = _useState20[0],
-    setIsActiveHeaderCellChanged = _useState20[1];
+    selectedHeaderReorderActive = _useState20[0],
+    setSelectedHeaderReorderActive = _useState20[1];
+  var isBlurSpreadsheet = React.useRef(false);
   var _useState21 = React.useState(false),
     _useState22 = _rollupPluginBabelHelpers.slicedToArray(_useState21, 2),
-    activeCellInsideSelectionArea = _useState22[0],
-    setActiveCellInsideSelectionArea = _useState22[1];
+    isActiveHeaderCellChanged = _useState22[0],
+    setIsActiveHeaderCellChanged = _useState22[1];
+  var _useState23 = React.useState(false),
+    _useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
+    activeCellInsideSelectionArea = _useState24[0],
+    setActiveCellInsideSelectionArea = _useState24[1];
   var previousState = usePreviousValue.usePreviousValue({
     activeCellCoordinates: activeCellCoordinates,
     isEditing: isEditing,
@@ -137,19 +143,21 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
   }) || {};
   var cellSizeValue = getCellSize.getCellSize(cellSize);
   var cellEditorRef = React.useRef();
-  var _useState23 = React.useState(),
-    _useState24 = _rollupPluginBabelHelpers.slicedToArray(_useState23, 2),
-    activeCellContent = _useState24[0],
-    setActiveCellContent = _useState24[1];
+  var _useState25 = React.useState(),
+    _useState26 = _rollupPluginBabelHelpers.slicedToArray(_useState25, 2),
+    activeCellContent = _useState26[0],
+    setActiveCellContent = _useState26[1];
   var activeCellRef = React.useRef();
   var cellEditorRulerRef = React.useRef();
+  var hasCustomRowHeader = typeof renderRowHeader === 'function';
+  var maxNumRowsCount = data.length.toString().length;
   var defaultColumn = React.useMemo(function () {
     return {
       width: 150,
-      rowHeaderWidth: 64,
+      rowHeaderWidth: hasCustomRowHeader ? 40 + maxNumRowsCount * 8.56 : 64,
       rowHeight: cellSizeValue
     };
-  }, [cellSizeValue]);
+  }, [cellSizeValue, hasCustomRowHeader, maxNumRowsCount]);
   var _useMultipleKeyTracki = useMultipleKeyTracking.useMultipleKeyTracking({
       ref: multiKeyTrackingRef,
       containerHasFocus: containerHasFocus,
@@ -216,9 +224,12 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     }
     if ((prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) || (prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column)) {
       if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
-        var _activeCellFullData$r;
         var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
-        setActiveCellContent((_activeCellFullData$r = activeCellFullData === null || activeCellFullData === void 0 ? void 0 : activeCellFullData.render('Cell')) !== null && _activeCellFullData$r !== void 0 ? _activeCellFullData$r : null);
+        if (activeCellFullData) {
+          setActiveCellContent(activeCellFullData.render('Cell'));
+        } else {
+          setActiveCellContent(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);
@@ -433,8 +444,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
     var activeCellValue;
     if (activeCellFullData && activeCellCoordinates !== null && activeCellCoordinates !== void 0 && activeCellCoordinates.column) {
-      var _activeCellFullData$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;
+      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 || '');
     if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
@@ -624,6 +635,8 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     columns: columns,
     currentMatcher: currentMatcher,
     defaultColumn: defaultColumn,
+    selectedHeaderReorderActive: selectedHeaderReorderActive,
+    setSelectedHeaderReorderActive: setSelectedHeaderReorderActive,
     headerGroups: headerGroups,
     rows: rows,
     scrollBarSize: scrollBarSize,
@@ -647,12 +660,17 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
     currentMatcher: currentMatcher,
     setCurrentMatcher: setCurrentMatcher,
     setContainerHasFocus: setContainerHasFocus,
+    selectedHeaderReorderActive: selectedHeaderReorderActive,
+    setSelectedHeaderReorderActive: setSelectedHeaderReorderActive,
     selectionAreas: selectionAreas,
     setSelectionAreas: setSelectionAreas,
     headerGroups: headerGroups,
     defaultColumn: defaultColumn,
     getTableBodyProps: getTableBodyProps,
+    hasCustomRowHeader: hasCustomRowHeader,
     onDataUpdate: onDataUpdate,
+    renderRowHeaderDirection: renderRowHeaderDirection,
+    renderRowHeader: renderRowHeader,
     onActiveCellChange: onActiveCellChange,
     onSelectionAreaChange: onSelectionAreaChange,
     prepareRow: prepareRow,
@@ -697,9 +715,11 @@ exports.DataSpreadsheet = /*#__PURE__*/React__default["default"].forwardRef(func
       updateData: updateData
     }),
     onChange: function onChange(event) {
-      setCellEditorValue(event.target.value);
-      if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
-        cellEditorRulerRef.current.textContent = event.target.value;
+      if (previousState.isEditing) {
+        setCellEditorValue(event.target.value);
+        if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
+          cellEditorRulerRef.current.textContent = event.target.value;
+        }
       }
     },
     ref: cellEditorRef,
@@ -749,6 +769,10 @@ exports.DataSpreadsheet.propTypes = {
    * Sets the number of empty rows to be created when there is no data provided
    */
   defaultEmptyRowCount: index["default"].number,
+  /**
+   * Check if spreadsheet is using custom row header component attached
+   */
+  hasCustomRowHeader: index["default"].bool,
   /**
    * The spreadsheet id
    */
@@ -765,6 +789,14 @@ exports.DataSpreadsheet.propTypes = {
    * The event handler that is called when the selection area values change
    */
   onSelectionAreaChange: index["default"].func,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeader: index["default"].func,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeaderDirection: index["default"].oneOf(['left', 'right']),
   /**
    * The aria label applied to the Select all button
    */

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

@@ -52,6 +52,18 @@ interface DataSpreadsheetBodyProps {
      * The event handler that is called when the active cell changes
      */
     onActiveCellChange?: () => void;
+    /**
+     * Check if user is using custom component
+     */
+    hasCustomRowHeader?: boolean;
+    /**
+     * Component next to numbering rows
+     */
+    renderRowHeader?: (index: number) => any[];
+    /**
+     * Component next to numbering rows
+     */
+    renderRowHeaderDirection?: string;
     /**
      * The event handler that is called to set the rows for the empty spreadsheet
      */
@@ -79,7 +91,15 @@ interface DataSpreadsheetBodyProps {
     /**
      * Array of selection area data
      */
-    selectionAreaData?: object[];
+    selectionAreaData?: any[];
+    /**
+     * Header reordering is active
+     */
+    selectedHeaderReorderActive?: boolean;
+    /**
+     * Set header reordering active or not
+     */
+    setSelectedHeaderReorderActive?: Dispatch<SetStateAction<boolean>>;
     /**
      * Array of selection areas
      */