@carbon/ibm-products 2.43.2-canary.1 → 2.43.2-canary.101

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

@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useContext } from 'react';
+import { ConditionBuilderContext } from '../ConditionBuilderContext/ConditionBuilderProvider.js';
+import { translationsObject } from '../ConditionBuilderContext/translationObject.js';
+
+var useTranslations = function useTranslations(translationKeys) {
+  var _useContext = useContext(ConditionBuilderContext),
+    translateWithId = _useContext.translateWithId;
+  return translationKeys.map(function (translationKey) {
+    if (translateWithId !== null && translateWithId !== void 0 && translateWithId(translationKey)) {
+      return translateWithId(translationKey);
+    } else if (translationsObject[translationKey]) {
+      return translationsObject[translationKey];
+    } else {
+      return translationKey;
+    }
+  });
+};
+
+export { useTranslations };

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

@@ -1,5 +1,7 @@
-export function focusThisField(evt: any): void;
-export function focusThisItem(currentElement: any): void;
-export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
-export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any): void;
+export function focusThisField(evt: any, conditionBuilderRef: any): void;
+export function focusThisItem(currentElement: any, conditionBuilderRef: any): void;
+export function traverseClockVise(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any, conditionBuilderRef: any): void;
+export function traverseReverse(eachElem: any, index: any, allElements: any, rotate: any, trapFocus: any, conditionBuilderRef: any): void;
 export function checkForHoldingKey(evt: any, key: any): any;
+export function checkIsValid(item: any): any;
+export function manageTabIndexAndFocus(currentElement: any, conditionBuilderRef: any): void;

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

@@ -5,41 +5,66 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-var focusThisField = function focusThisField(evt) {
-  setTimeout(function () {
-    var _evt$target$closest, _evt$target$closest2;
-    (_evt$target$closest = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest === void 0 || (_evt$target$closest = _evt$target$closest.querySelector('button')) === null || _evt$target$closest === void 0 || _evt$target$closest.click();
-    (_evt$target$closest2 = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest2 === void 0 || (_evt$target$closest2 = _evt$target$closest2.querySelector('button')) === null || _evt$target$closest2 === void 0 || _evt$target$closest2.focus();
-  }, 0);
+import { blockClass } from '../ConditionBuilderContext/DataConfigs.js';
+
+var focusThisField = function focusThisField(evt, conditionBuilderRef) {
+  if (evt) {
+    setTimeout(function () {
+      var _evt$target$closest, _evt$target$closest2, _evt$target$closest3;
+      manageTabIndexAndFocus((_evt$target$closest = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest === void 0 ? void 0 : _evt$target$closest.querySelector('button'), conditionBuilderRef);
+      (_evt$target$closest2 = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest2 === void 0 || (_evt$target$closest2 = _evt$target$closest2.querySelector('button')) === null || _evt$target$closest2 === void 0 || _evt$target$closest2.click();
+      (_evt$target$closest3 = evt.target.closest('[role="gridcell"]')) === null || _evt$target$closest3 === void 0 || (_evt$target$closest3 = _evt$target$closest3.querySelector('button')) === null || _evt$target$closest3 === void 0 || _evt$target$closest3.focus();
+    }, 0);
+  }
 };
-var focusThisItem = function focusThisItem(currentElement) {
+var focusThisItem = function focusThisItem(currentElement, conditionBuilderRef) {
   setTimeout(function () {
     //document.activeElement.setAttribute('tabindex', '-1');
     // currentElement.setAttribute('tabindex', '0');
-    currentElement === null || currentElement === void 0 || currentElement.focus();
+    manageTabIndexAndFocus(currentElement, conditionBuilderRef);
   }, 0);
 };
-var traverseClockVise = function traverseClockVise(eachElem, index, allElements, rotate, trapFocus) {
+var traverseClockVise = function traverseClockVise(eachElem, index, allElements, rotate, trapFocus, conditionBuilderRef) {
   if (eachElem == document.activeElement) {
     if (index !== allElements.length - 1) {
-      focusThisItem(allElements[index + 1]);
+      focusThisItem(allElements[index + 1], conditionBuilderRef);
     } else {
-      focusThisItem(allElements[rotate ? 0 : allElements.length - 1]);
+      focusThisItem(allElements[rotate ? 0 : allElements.length - 1], conditionBuilderRef);
     }
   } else if (Array.from(allElements).indexOf(document.activeElement) == -1 && trapFocus) {
-    focusThisItem(allElements[0]);
+    focusThisItem(allElements[0], conditionBuilderRef);
   }
 };
-var traverseReverse = function traverseReverse(eachElem, index, allElements, rotate, trapFocus) {
+var traverseReverse = function traverseReverse(eachElem, index, allElements, rotate, trapFocus, conditionBuilderRef) {
   if (eachElem == document.activeElement) {
     if (index !== 0) {
-      focusThisItem(allElements[index - 1]);
+      focusThisItem(allElements[index - 1], conditionBuilderRef);
     } else {
-      focusThisItem(allElements[rotate ? allElements.length - 1 : 0]);
+      focusThisItem(allElements[rotate ? allElements.length - 1 : 0], conditionBuilderRef);
     }
   } else if (Array.from(allElements).indexOf(document.activeElement) == -1 && trapFocus) {
-    focusThisItem(allElements[allElements.length - 1]);
+    focusThisItem(allElements[allElements.length - 1], conditionBuilderRef);
   }
 };
+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 checkIsValid = function checkIsValid(item) {
+  return item && item !== 'INVALID';
+};
+var manageTabIndexAndFocus = function manageTabIndexAndFocus(currentElement, conditionBuilderRef) {
+  var _currentElement$close, _conditionBuilderRef$;
+  var contentContainer = (_currentElement$close = currentElement === null || currentElement === void 0 ? void 0 : currentElement.closest(".".concat(blockClass, "__content-container"))) !== null && _currentElement$close !== void 0 ? _currentElement$close : currentElement === null || currentElement === void 0 ? void 0 : currentElement.closest(".".concat(blockClass, "__actions-container"));
+  contentContainer && Array.from(contentContainer.querySelectorAll('[tabindex="0"]')).map(function (element) {
+    return element === null || element === void 0 ? void 0 : element.setAttribute('tabindex', '-1');
+  });
+  currentElement === null || currentElement === void 0 || currentElement.setAttribute('tabindex', '0');
+  (_conditionBuilderRef$ = conditionBuilderRef.current) === null || _conditionBuilderRef$ === void 0 || (_conditionBuilderRef$ = _conditionBuilderRef$.querySelector(".".concat(blockClass, "__statement-button"))) === null || _conditionBuilderRef$ === void 0 || _conditionBuilderRef$.setAttribute('tabindex', '1');
+  currentElement === null || currentElement === void 0 || currentElement.focus();
+};
 
-export { focusThisField, focusThisItem, traverseClockVise, traverseReverse };
+export { checkForHoldingKey, checkIsValid, focusThisField, focusThisItem, manageTabIndexAndFocus, traverseClockVise, traverseReverse };

package/es/components/CreateFullPage/CreateFullPage.js

@@ -89,6 +89,7 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _useState10 = _slicedToArray(_useState9, 2),
     modalIsOpen = _useState10[0],
     setModalIsOpen = _useState10[1];
+  // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
   var previousState = usePreviousValue({
     currentStep: currentStep,
     open: open
@@ -146,8 +147,7 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   useResetCreateComponent({
     firstIncludedStep: firstIncludedStep,
     previousState: previousState,
-    /**@ts-ignore */
-    open: open,
+    open: true,
     setCurrentStep: setCurrentStep,
     stepData: stepData,
     /**@ts-ignore */

package/es/components/DataSpreadsheet/DataSpreadsheet.d.ts

@@ -20,6 +20,10 @@ interface DataSpreadsheetProps {
      * The data that will build the column headers
      */
     columns?: readonly Column<object>[];
+    /**
+     * Disable column swapping, default false
+     */
+    disableColumnSwapping?: boolean;
     /**
      * The spreadsheet data that will be rendered in the body of the spreadsheet component
      */
@@ -28,6 +32,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
      */
@@ -36,6 +44,12 @@ interface DataSpreadsheetProps {
      * The event handler that is called when the active cell changes
      */
     onActiveCellChange?: () => void;
+    /**
+     * Callback for columns after being dragged
+     */
+    onColDrag?: ({ ...args }: {
+        [x: string]: any;
+    }) => void;
     /**
      * The setter fn for the data prop
      */
@@ -46,6 +60,18 @@ interface DataSpreadsheetProps {
      * The event handler that is called when the selection area values change
      */
     onSelectionAreaChange?: () => void;
+    /**
+     * Read-only table
+     */
+    readOnlyTable?: boolean;
+    /**
+     * 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/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -32,7 +32,7 @@ import { useSpreadsheetOutsideClick } from './hooks/useSpreadsheetOutsideClick.j
 import { useMoveActiveCell } from './hooks/useMoveActiveCell.js';
 import { useSpreadsheetEdit } from './hooks/useSpreadsheetEdit.js';
 
-var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "id", "onActiveCellChange", "onSelectionAreaChange", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
+var _excluded = ["cellSize", "className", "columns", "data", "defaultEmptyRowCount", "onDataUpdate", "onColDrag", "id", "onActiveCellChange", "onSelectionAreaChange", "renderRowHeader", "renderRowHeaderDirection", "disableColumnSwapping", "readOnlyTable", "selectAllAriaLabel", "spreadsheetAriaLabel", "theme", "totalVisibleColumns"];
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
 var componentName = 'DataSpreadsheet';
@@ -43,6 +43,7 @@ var defaults = {
   data: Object.freeze([]),
   defaultEmptyRowCount: 16,
   onDataUpdate: Object.freeze(function () {}),
+  onColDrag: Object.freeze(function () {}),
   onActiveCellChange: Object.freeze(function () {}),
   onSelectionAreaChange: Object.freeze(function () {}),
   theme: 'light'
@@ -62,11 +63,19 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     defaultEmptyRowCount = _ref$defaultEmptyRowC === void 0 ? defaults.defaultEmptyRowCount : _ref$defaultEmptyRowC,
     _ref$onDataUpdate = _ref.onDataUpdate,
     onDataUpdate = _ref$onDataUpdate === void 0 ? defaults.onDataUpdate : _ref$onDataUpdate,
+    _ref$onColDrag = _ref.onColDrag,
+    onColDrag = _ref$onColDrag === void 0 ? defaults.onColDrag : _ref$onColDrag,
     id = _ref.id,
     _ref$onActiveCellChan = _ref.onActiveCellChange,
     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,
+    _ref$disableColumnSwa = _ref.disableColumnSwapping,
+    disableColumnSwapping = _ref$disableColumnSwa === void 0 ? false : _ref$disableColumnSwa,
+    _ref$readOnlyTable = _ref.readOnlyTable,
+    readOnlyTable = _ref$readOnlyTable === void 0 ? false : _ref$readOnlyTable,
     selectAllAriaLabel = _ref.selectAllAriaLabel,
     spreadsheetAriaLabel = _ref.spreadsheetAriaLabel,
     theme = _ref.theme,
@@ -76,71 +85,86 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   var localRef = useRef();
   var spreadsheetRef = ref || localRef;
   var focusedElement = useActiveElement();
-  var _useState = useState(false),
+  var _useState = useState(columns),
     _useState2 = _slicedToArray(_useState, 2),
-    containerHasFocus = _useState2[0],
-    setContainerHasFocus = _useState2[1];
-  var _useState3 = useState(null),
+    currentColumns = _useState2[0],
+    setCurrentColumns = _useState2[1];
+  var _useState3 = useState([]),
     _useState4 = _slicedToArray(_useState3, 2),
-    activeCellCoordinates = _useState4[0],
-    setActiveCellCoordinates = _useState4[1];
-  var _useState5 = useState([]),
+    pastColumns = _useState4[0],
+    setPastColumns = _useState4[1];
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    selectionAreas = _useState6[0],
-    setSelectionAreas = _useState6[1];
-  var _useState7 = useState([]),
+    containerHasFocus = _useState6[0],
+    setContainerHasFocus = _useState6[1];
+  var _useState7 = useState(null),
     _useState8 = _slicedToArray(_useState7, 2),
-    selectionAreaData = _useState8[0],
-    setSelectionAreaData = _useState8[1];
-  var _useState9 = useState(false),
+    activeCellCoordinates = _useState8[0],
+    setActiveCellCoordinates = _useState8[1];
+  var _useState9 = useState([]),
     _useState10 = _slicedToArray(_useState9, 2),
-    clickAndHoldActive = _useState10[0],
-    setClickAndHoldActive = _useState10[1];
-  var _useState11 = useState(''),
+    selectionAreas = _useState10[0],
+    setSelectionAreas = _useState10[1];
+  var _useState11 = useState([]),
     _useState12 = _slicedToArray(_useState11, 2),
-    currentMatcher = _useState12[0],
-    setCurrentMatcher = _useState12[1];
+    selectionAreaData = _useState12[0],
+    setSelectionAreaData = _useState12[1];
   var _useState13 = useState(false),
     _useState14 = _slicedToArray(_useState13, 2),
-    isEditing = _useState14[0],
-    setIsEditing = _useState14[1];
+    clickAndHoldActive = _useState14[0],
+    setClickAndHoldActive = _useState14[1];
   var _useState15 = useState(''),
     _useState16 = _slicedToArray(_useState15, 2),
-    cellEditorValue = _useState16[0],
-    setCellEditorValue = _useState16[1];
+    currentMatcher = _useState16[0],
+    setCurrentMatcher = _useState16[1];
   var _useState17 = useState(false),
     _useState18 = _slicedToArray(_useState17, 2),
-    headerCellHoldActive = _useState18[0],
-    setHeaderCellHoldActive = _useState18[1];
-  var isBlurSpreadsheet = useRef(false);
-  var _useState19 = useState(false),
+    isEditing = _useState18[0],
+    setIsEditing = _useState18[1];
+  var _useState19 = useState(''),
     _useState20 = _slicedToArray(_useState19, 2),
-    isActiveHeaderCellChanged = _useState20[0],
-    setIsActiveHeaderCellChanged = _useState20[1];
+    cellEditorValue = _useState20[0],
+    setCellEditorValue = _useState20[1];
   var _useState21 = useState(false),
     _useState22 = _slicedToArray(_useState21, 2),
-    activeCellInsideSelectionArea = _useState22[0],
-    setActiveCellInsideSelectionArea = _useState22[1];
+    headerCellHoldActive = _useState22[0],
+    setHeaderCellHoldActive = _useState22[1];
+  var _useState23 = useState(false),
+    _useState24 = _slicedToArray(_useState23, 2),
+    selectedHeaderReorderActive = _useState24[0],
+    setSelectedHeaderReorderActive = _useState24[1];
+  var isBlurSpreadsheet = useRef(false);
+  var _useState25 = useState(false),
+    _useState26 = _slicedToArray(_useState25, 2),
+    isActiveHeaderCellChanged = _useState26[0],
+    setIsActiveHeaderCellChanged = _useState26[1];
+  var _useState27 = useState(false),
+    _useState28 = _slicedToArray(_useState27, 2),
+    activeCellInsideSelectionArea = _useState28[0],
+    setActiveCellInsideSelectionArea = _useState28[1];
   var previousState = usePreviousValue({
     activeCellCoordinates: activeCellCoordinates,
     isEditing: isEditing,
-    cellEditorValue: cellEditorValue
+    cellEditorValue: cellEditorValue,
+    selectedHeaderReorderActive: selectedHeaderReorderActive
   }) || {};
   var cellSizeValue = getCellSize(cellSize);
   var cellEditorRef = useRef();
-  var _useState23 = useState(),
-    _useState24 = _slicedToArray(_useState23, 2),
-    activeCellContent = _useState24[0],
-    setActiveCellContent = _useState24[1];
+  var _useState29 = useState(),
+    _useState30 = _slicedToArray(_useState29, 2),
+    activeCellContent = _useState30[0],
+    setActiveCellContent = _useState30[1];
   var activeCellRef = useRef();
   var cellEditorRulerRef = useRef();
+  var hasCustomRowHeader = typeof renderRowHeader === 'function';
+  var maxNumRowsCount = data.length.toString().length;
   var defaultColumn = useMemo(function () {
     return {
       width: 150,
-      rowHeaderWidth: 64,
+      rowHeaderWidth: hasCustomRowHeader ? 40 + maxNumRowsCount * 8.56 : 64,
       rowHeight: cellSizeValue
     };
-  }, [cellSizeValue]);
+  }, [cellSizeValue, hasCustomRowHeader, maxNumRowsCount]);
   var _useMultipleKeyTracki = useMultipleKeyTracking({
       ref: multiKeyTrackingRef,
       containerHasFocus: containerHasFocus,
@@ -176,6 +200,28 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       });
     });
   }, [cellEditorValue, onDataUpdate]);
+  useEffect(function () {
+    var currentHeaders = [];
+    if (Object.keys(currentColumns).length > 0) {
+      Object.keys(currentColumns).forEach(function (itemIndex) {
+        if (currentColumns[itemIndex].Header) {
+          currentHeaders.push(currentColumns[itemIndex].Header);
+        }
+      });
+    }
+    if (previousState.selectedHeaderReorderActive) {
+      setPastColumns(currentHeaders);
+    }
+    if (!previousState.selectedHeaderReorderActive && pastColumns.length > 0 && !headerCellHoldActive && JSON.stringify(currentHeaders) !== JSON.stringify(pastColumns)) {
+      onColDrag({
+        headers: currentHeaders,
+        data: activeCellContent.props.data
+      });
+      if (currentHeaders.length === 0) {
+        setPastColumns([]);
+      }
+    }
+  }, [previousState === null || previousState === void 0 ? void 0 : previousState.selectedHeaderReorderActive, currentColumns, headerCellHoldActive, columns, activeCellContent, onColDrag, pastColumns]);
 
   // Removes the active cell element
   var removeActiveCell = useCallback(function () {
@@ -207,9 +253,12 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     }
     if ((prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.row) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) || (prevCoords === null || prevCoords === void 0 ? void 0 : prevCoords.column) !== (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column)) {
       if (activeCellCoordinates && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header') {
-        var _activeCellFullData$r;
         var activeCellFullData = typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'number' && typeof (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'number' ? rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row].cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column] : null;
-        setActiveCellContent((_activeCellFullData$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);
@@ -416,17 +465,14 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     }
   }, [handleInitialArrowPress, updateActiveCellCoordinates, activeCellCoordinates, columns, rows]);
   var handleKeyPressEvent = useCallback(function (event) {
-    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]);
+    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, readOnlyTable);
+  }, [activeCellInsideSelectionArea, updateActiveCellCoordinates, activeCellCoordinates, removeActiveCell, columns, rows, spreadsheetRef, currentMatcher, removeCellEditor, selectionAreas, handleHomeEndKey, keysPressedList, usingMac, updateData, checkForReturnCondition, handleArrowKeyPress, readOnlyTable]);
   var startEditMode = function startEditMode() {
+    var _activeCellFullData$r;
     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;
-    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 activeCellValue = activeCellFullData === null || activeCellFullData === void 0 || (_activeCellFullData$r = activeCellFullData.row) === null || _activeCellFullData$r === void 0 || (_activeCellFullData$r = _activeCellFullData$r.cells) === null || _activeCellFullData$r === void 0 || (_activeCellFullData$r = _activeCellFullData$r[Number(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column)]) === null || _activeCellFullData$r === void 0 ? void 0 : _activeCellFullData$r.value;
     setCellEditorValue(activeCellValue || '');
     if (cellEditorRulerRef !== null && cellEditorRulerRef !== void 0 && cellEditorRulerRef.current) {
       cellEditorRulerRef.current.textContent = activeCellValue;
@@ -488,7 +534,7 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   // Go into edit mode if 'Enter' key is pressed on activeCellRef
   var handleActiveCellKeyDown = function handleActiveCellKeyDown(event) {
     var key = event.key;
-    if (key === 'Enter' && !activeCellInsideSelectionArea) {
+    if (key === 'Enter' && !activeCellInsideSelectionArea && !readOnlyTable) {
       if ((activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) !== 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) !== 'header') {
         startEditMode();
       }
@@ -544,8 +590,10 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   };
 
   // Go into edit mode if double click is detected on activeCellRef
-  var handleActiveCellDoubleClick = function handleActiveCellDoubleClick() {
-    startEditMode();
+  var handleActiveCellDoubleClick = function handleActiveCellDoubleClick(readOnlyTable) {
+    if (!readOnlyTable) {
+      startEditMode();
+    }
   };
   useSpreadsheetEdit({
     isEditing: isEditing,
@@ -615,6 +663,8 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     columns: columns,
     currentMatcher: currentMatcher,
     defaultColumn: defaultColumn,
+    selectedHeaderReorderActive: selectedHeaderReorderActive,
+    setSelectedHeaderReorderActive: setSelectedHeaderReorderActive,
     headerGroups: headerGroups,
     rows: rows,
     scrollBarSize: scrollBarSize,
@@ -623,6 +673,8 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     setSelectionAreas: setSelectionAreas,
     setCurrentMatcher: setCurrentMatcher,
     setSelectionAreaData: setSelectionAreaData,
+    disableColumnSwapping: disableColumnSwapping,
+    readOnlyTable: readOnlyTable,
     totalVisibleColumns: totalVisibleColumns,
     updateActiveCellCoordinates: updateActiveCellCoordinates,
     setHeaderCellHoldActive: setHeaderCellHoldActive,
@@ -632,18 +684,24 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
   }), /*#__PURE__*/React__default.createElement(DataSpreadsheetBody, {
     activeCellRef: activeCellRef,
     activeCellCoordinates: activeCellCoordinates,
+    setCurrentColumns: setCurrentColumns,
     ref: spreadsheetRef,
     clickAndHoldActive: clickAndHoldActive,
     setClickAndHoldActive: setClickAndHoldActive,
     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,
@@ -666,7 +724,9 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     onMouseUp: handleActiveCellMouseUp,
     onClick: handleActiveCellClick,
     onKeyDown: handleActiveCellKeyDown,
-    onDoubleClick: handleActiveCellDoubleClick,
+    onDoubleClick: function onDoubleClick() {
+      return handleActiveCellDoubleClick(readOnlyTable);
+    },
     onMouseEnter: handleActiveCellMouseEnter,
     ref: activeCellRef,
     className: cx("".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__active-cell--highlight"), _defineProperty({}, "".concat(blockClass, "__active-cell--with-selection"), activeCellInsideSelectionArea)),
@@ -688,9 +748,11 @@ var DataSpreadsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
       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,
@@ -740,6 +802,14 @@ DataSpreadsheet.propTypes = {
    * Sets the number of empty rows to be created when there is no data provided
    */
   defaultEmptyRowCount: PropTypes.number,
+  /**
+   * Disable column swapping, default false
+   */
+  disableColumnSwapping: PropTypes.bool,
+  /**
+   * Check if spreadsheet is using custom row header component attached
+   */
+  hasCustomRowHeader: PropTypes.bool,
   /**
    * The spreadsheet id
    */
@@ -748,6 +818,10 @@ DataSpreadsheet.propTypes = {
    * The event handler that is called when the active cell changes
    */
   onActiveCellChange: PropTypes.func,
+  /**
+   * Callback for when columns are dropped after dragged
+   */
+  onColDrag: PropTypes.func,
   /**
    * The setter fn for the data prop
    */
@@ -756,6 +830,18 @@ DataSpreadsheet.propTypes = {
    * The event handler that is called when the selection area values change
    */
   onSelectionAreaChange: PropTypes.func,
+  /**
+   * Read-only table
+   */
+  readOnlyTable: PropTypes.bool,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeader: PropTypes.func,
+  /**
+   * Component next to numbering rows
+   */
+  renderRowHeaderDirection: PropTypes.oneOf(['left', 'right']),
   /**
    * The aria label applied to the Select all button
    */

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

@@ -48,10 +48,26 @@ interface DataSpreadsheetBodyProps {
      * The spreadsheet id
      */
     id?: number | string;
+    /**
+     * Set current columns after drag drop
+     */
+    setCurrentColumns?: Dispatch<SetStateAction<object[]>>;
     /**
      * 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 +95,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
      */