@carbon/ibm-products 2.0.0-rc.9 → 2.0.1

package/lib/components/DataSpreadsheet/DataSpreadsheetHeader.js

@@ -1,98 +1,76 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DataSpreadsheetHeader = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _layout = require("@carbon/layout");
-
 var _settings = require("../../settings");
-
 var _hooks = require("../../global/js/hooks");
-
 var _checkActiveHeaderCell = require("./utils/checkActiveHeaderCell");
-
 var _checkSelectedHeaderCell = require("./utils/checkSelectedHeaderCell");
-
 var _handleHeaderCellSelection = require("./utils/handleHeaderCellSelection");
-
 var _selectAllCells = require("./utils/selectAllCells");
-
 var _getSpreadsheetWidth = require("./utils/getSpreadsheetWidth");
-
 var _hooks2 = require("./hooks");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /**
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * 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.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          */
 var blockClass = "".concat(_settings.pkg.prefix, "--data-spreadsheet");
 var DataSpreadsheetHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var activeCellCoordinates = _ref.activeCellCoordinates,
-      cellSize = _ref.cellSize,
-      columns = _ref.columns,
-      currentMatcher = _ref.currentMatcher,
-      defaultColumn = _ref.defaultColumn,
-      headerGroups = _ref.headerGroups,
-      scrollBarSize = _ref.scrollBarSize,
-      selectionAreas = _ref.selectionAreas,
-      setActiveCellCoordinates = _ref.setActiveCellCoordinates,
-      setCurrentMatcher = _ref.setCurrentMatcher,
-      setSelectionAreas = _ref.setSelectionAreas,
-      setSelectionAreaData = _ref.setSelectionAreaData,
-      rows = _ref.rows,
-      totalVisibleColumns = _ref.totalVisibleColumns,
-      updateActiveCellCoordinates = _ref.updateActiveCellCoordinates,
-      setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
-      headerCellHoldActive = _ref.headerCellHoldActive,
-      selectAllAriaLabel = _ref.selectAllAriaLabel,
-      visibleColumns = _ref.visibleColumns;
-
+    cellSize = _ref.cellSize,
+    columns = _ref.columns,
+    currentMatcher = _ref.currentMatcher,
+    defaultColumn = _ref.defaultColumn,
+    headerGroups = _ref.headerGroups,
+    scrollBarSize = _ref.scrollBarSize,
+    selectionAreas = _ref.selectionAreas,
+    setActiveCellCoordinates = _ref.setActiveCellCoordinates,
+    setCurrentMatcher = _ref.setCurrentMatcher,
+    setSelectionAreas = _ref.setSelectionAreas,
+    setSelectionAreaData = _ref.setSelectionAreaData,
+    rows = _ref.rows,
+    totalVisibleColumns = _ref.totalVisibleColumns,
+    updateActiveCellCoordinates = _ref.updateActiveCellCoordinates,
+    setHeaderCellHoldActive = _ref.setHeaderCellHoldActive,
+    headerCellHoldActive = _ref.headerCellHoldActive,
+    selectAllAriaLabel = _ref.selectAllAriaLabel,
+    visibleColumns = _ref.visibleColumns;
   var _useState = (0, _react.useState)(0),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      scrollBarSizeValue = _useState2[0],
-      setScrollBarSizeValue = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    scrollBarSizeValue = _useState2[0],
+    setScrollBarSizeValue = _useState2[1];
   var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      selectedHeaderReorderActive = _useState4[0],
-      setSelectedHeaderReorderActive = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    selectedHeaderReorderActive = _useState4[0],
+    setSelectedHeaderReorderActive = _useState4[1];
   var previousState = (0, _hooks.usePreviousValue)({
     cellSize: cellSize
   });
   (0, _react.useEffect)(function () {
     if ((previousState === null || previousState === void 0 ? void 0 : previousState.cellSize) !== cellSize) {
       var _ref$current;
-
       var scrollContainer = ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector(".".concat(blockClass, "__list--container"));
       var hasScrollBar = (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollHeight) > (scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.clientHeight);
       var scrollBarValue = hasScrollBar ? 0 : scrollBarSize;
       setScrollBarSizeValue(scrollBarValue);
     }
   }, [cellSize, ref, scrollBarSize, previousState === null || previousState === void 0 ? void 0 : previousState.cellSize]);
-
   var handleColumnHeaderClick = function handleColumnHeaderClick(index) {
     return function (event) {
       var isHoldingCommandKey = event.metaKey || event.ctrlKey;
@@ -114,7 +92,6 @@ var DataSpreadsheetHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
       });
     };
   };
-
   var handleSelectAllClick = function handleSelectAllClick() {
     (0, _selectAllCells.selectAllCells)({
       ref: ref,
@@ -126,16 +103,13 @@ var DataSpreadsheetHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
       updateActiveCellCoordinates: updateActiveCellCoordinates
     });
   };
-
   var handleHeaderMouseDown = function handleHeaderMouseDown(index) {
     return function (event) {
       var _selectionAreaToClone;
-
       if (event.shiftKey) {
         // Remove columns, need to call handleHeaderCellSelection
         return;
       }
-
       setSelectedHeaderReorderActive(true);
       var selectionAreaToClone = selectionAreas.filter(function (item) {
         return (item === null || item === void 0 ? void 0 : item.matcher) === currentMatcher;
@@ -161,7 +135,6 @@ var DataSpreadsheetHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
       setHeaderCellHoldActive(true);
     };
   };
-
   (0, _hooks2.useSpreadsheetMouseMove)({
     ref: ref,
     headerCellHoldActive: headerCellHoldActive,
@@ -204,7 +177,6 @@ var DataSpreadsheetHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
       className: (0, _classnames.default)("".concat(blockClass, "__th"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__th--select-all"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__th--active-header"), (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) === 'header' && (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header'))
     }, "\xA0")), headerGroup.headers.map(function (column, index) {
       var _cx2;
-
       var selectedHeader = (0, _checkSelectedHeaderCell.checkSelectedHeaderCell)(index, selectionAreas, 'column', rows);
       return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
         key: "column_".concat(index),
@@ -239,22 +211,18 @@ DataSpreadsheetHeader.propTypes = {
     row: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
     column: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])
   }),
-
   /**
    * Specifies the cell height
    */
   cellSize: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg']),
-
   /**
    * All of the spreadsheet columns
    */
   columns: _propTypes.default.array,
-
   /**
    * uuid that corresponds to the current selection area
    */
   currentMatcher: _propTypes.default.string,
-
   /**
    * Default spreadsheet sizing values
    */
@@ -263,73 +231,59 @@ DataSpreadsheetHeader.propTypes = {
     rowHeaderWidth: _propTypes.default.number,
     width: _propTypes.default.number
   }),
-
   /**
    * Whether or not a click/hold is active on a header cell
    */
   headerCellHoldActive: _propTypes.default.bool,
-
   /**
    * Headers provided from useTable hook
    */
   headerGroups: _propTypes.default.arrayOf(_propTypes.default.object),
-
   /**
    * All of the spreadsheet row data
    */
   rows: _propTypes.default.arrayOf(_propTypes.default.object),
-
   /**
    * The scrollbar width
    */
   scrollBarSize: _propTypes.default.number,
-
   /**
    * The aria label applied to the Select all button
    */
   selectAllAriaLabel: _propTypes.default.string.isRequired,
-
   /**
    * All of the cell selection area items
    */
   selectionAreas: _propTypes.default.arrayOf(_propTypes.default.object),
-
   /**
    * Setter fn for activeCellCoordinates value
    */
   setActiveCellCoordinates: _propTypes.default.func,
-
   /**
    * Setter fn for currentMatcher value
    */
   setCurrentMatcher: _propTypes.default.func,
-
   /**
    * Setter fn for header cell hold active value
    */
   setHeaderCellHoldActive: _propTypes.default.func,
-
   /**
    * Setter fn for selectionAreaData state value
    */
   setSelectionAreaData: _propTypes.default.func,
-
   /**
    * Setter fn for selectionAreas value
    */
   setSelectionAreas: _propTypes.default.func,
-
   /**
    * The total number of columns to be initially visible, additional columns will be rendered and
    * visible via horizontal scrollbar
    */
   totalVisibleColumns: _propTypes.default.number,
-
   /**
    * Function used to update the active cell coordinates
    */
   updateActiveCellCoordinates: _propTypes.default.func,
-
   /**
    * Array of visible columns provided by react-table useTable hook
    */

package/lib/components/DataSpreadsheet/hooks/index.js

@@ -45,17 +45,10 @@ Object.defineProperty(exports, "useSpreadsheetOutsideClick", {
     return _useSpreadsheetOutsideClick.useSpreadsheetOutsideClick;
   }
 });
-
 var _useMoveActiveCell = require("./useMoveActiveCell");
-
 var _useMultipleKeyTracking = require("./useMultipleKeyTracking");
-
 var _useResetSpreadsheetFocus = require("./useResetSpreadsheetFocus");
-
 var _useSpreadsheetOutsideClick = require("./useSpreadsheetOutsideClick");
-
 var _useSpreadsheetEdit = require("./useSpreadsheetEdit");
-
 var _useSpreadsheetMouseUp = require("./useSpreadsheetMouseUp");
-
 var _useSpreadsheetMouseMove = require("./useSpreadsheetMouseMove");

package/lib/components/DataSpreadsheet/hooks/useMoveActiveCell.js

@@ -4,26 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useMoveActiveCell = void 0;
-
 var _react = require("react");
-
 /**
  * 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.
  */
+
 // Moves the placement of the active cell
 var useMoveActiveCell = function useMoveActiveCell(_ref) {
   var spreadsheetRef = _ref.spreadsheetRef,
-      activeCellCoordinates = _ref.activeCellCoordinates,
-      containerHasFocus = _ref.containerHasFocus,
-      createActiveCell = _ref.createActiveCell;
+    activeCellCoordinates = _ref.activeCellCoordinates,
+    containerHasFocus = _ref.containerHasFocus,
+    createActiveCell = _ref.createActiveCell;
   (0, _react.useEffect)(function () {
     var activeCellPlacementElement = spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.current.querySelector("[data-row-index=\"".concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "\"][data-column-index=\"").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column, "\"]"));
     var shouldPlaceActiveCellInHeader = (activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row) === 'header' && true;
     var selectAllElement = spreadsheetRef === null || spreadsheetRef === void 0 ? void 0 : spreadsheetRef.current.querySelector("[data-row-index=\"header\"][data-column-index=\"header\"]");
-
     if (containerHasFocus) {
       createActiveCell({
         placementElement: activeCellCoordinates ? activeCellPlacementElement : selectAllElement,
@@ -33,5 +31,4 @@ var useMoveActiveCell = function useMoveActiveCell(_ref) {
     }
   }, [activeCellCoordinates, spreadsheetRef, createActiveCell, containerHasFocus]);
 };
-
 exports.useMoveActiveCell = useMoveActiveCell;

package/lib/components/DataSpreadsheet/hooks/useMultipleKeyTracking.js

@@ -1,78 +1,63 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useMultipleKeyTracking = void 0;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = require("react");
-
 var _hooks = require("../../../global/js/hooks");
-
 var _handleMultipleKeys = require("../utils/handleMultipleKeys");
-
 /**
  * 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.
  */
+
 var hasFocus = function hasFocus() {
   return typeof document !== 'undefined' && document.hasFocus();
 };
-
 var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
   var ref = _ref.ref,
-      containerHasFocus = _ref.containerHasFocus,
-      isEditing = _ref.isEditing;
-
+    containerHasFocus = _ref.containerHasFocus,
+    isEditing = _ref.isEditing;
   var _useState = (0, _react.useState)(''),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      usingMac = _useState2[0],
-      setUsingMac = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    usingMac = _useState2[0],
+    setUsingMac = _useState2[1];
   var _useState3 = (0, _react.useState)(hasFocus),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      windowFocused = _useState4[0],
-      setWindowFocused = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    windowFocused = _useState4[0],
+    setWindowFocused = _useState4[1];
   var _useState5 = (0, _react.useState)([]),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      keysPressedList = _useState6[0],
-      setKeysPressedList = _useState6[1];
-
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    keysPressedList = _useState6[0],
+    setKeysPressedList = _useState6[1];
   var previousState = (0, _hooks.usePreviousValue)({
     isEditing: isEditing,
     windowFocused: windowFocused,
     containerHasFocus: containerHasFocus
-  }); // useEffect to check for window focus, if window loses focus
-  // we need to clear out the keysPressedList
+  });
 
+  // useEffect to check for window focus, if window loses focus
+  // we need to clear out the keysPressedList
   (0, _react.useEffect)(function () {
     var userAgentString = window.navigator.userAgent;
-
     if (userAgentString.includes('Macintosh')) {
       setUsingMac(true);
     } else {
       setUsingMac(false);
     }
-
     setWindowFocused(hasFocus());
-
     var onWindowFocus = function onWindowFocus() {
       return setWindowFocused(true);
     };
-
     var onWindowBlur = function onWindowBlur() {
       return setWindowFocused(false);
     };
-
     window.addEventListener('focus', onWindowFocus);
     window.addEventListener('blur', onWindowBlur);
     return function () {
@@ -88,11 +73,10 @@ var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
           // Prevent multiple keys of the same type being added to our keysPressedList array
           if (keysPressedList.includes(event.code)) {
             return;
-          } // Because keyup events are lost when using the Command key
+          }
+          // Because keyup events are lost when using the Command key
           // we need to remove the previously pressed keys so that we
           // do not have keys in the pressed list that should not be
-
-
           if ((0, _handleMultipleKeys.includesResourceKey)(keysPressedList, usingMac) && keysPressedList.length > 1) {
             var clonedKeys = (0, _toConsumableArray2.default)(keysPressedList);
             var filteredClonedKeys = clonedKeys.filter(function (item) {
@@ -101,42 +85,34 @@ var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
             filteredClonedKeys.push(event.code);
             return setKeysPressedList((0, _toConsumableArray2.default)(new Set(filteredClonedKeys)));
           }
-
           var tempKeys = (0, _toConsumableArray2.default)(keysPressedList);
           tempKeys.push(event.code);
           setKeysPressedList((0, _toConsumableArray2.default)(new Set(tempKeys)));
-        } // If keyup, we will remove the key from the keysPressedList array
-
-
+        }
+        // If keyup, we will remove the key from the keysPressedList array
         if (event.type === 'keyup') {
           var _tempKeys = (0, _toConsumableArray2.default)(keysPressedList);
-
           var filteredClone = _tempKeys.filter(function (item) {
             return item !== event.code;
-          }); // Keyup events are lost on all other keys if a Meta key is used
+          });
+          // Keyup events are lost on all other keys if a Meta key is used
           // so to work around this behavior, we empty out all other keys
           // from the keysPressedList array if we detect a Meta keyup event
-
-
           if (event.code === 'MetaLeft' || event.code === 'MetaRight') {
             return setKeysPressedList([]);
           }
-
           setKeysPressedList((0, _toConsumableArray2.default)(new Set(filteredClone)));
         }
       };
     }
-
     if (previousState !== null && previousState !== void 0 && previousState.windowFocused && !windowFocused) {
       setKeysPressedList([]);
-    } // Remove handlers if the spreadsheet container loses focus
+    }
+    // Remove handlers if the spreadsheet container loses focus
     // or is currently in edit mode
-
-
     if (ref && !containerHasFocus || isEditing) {
       ref.current.onkeydown = undefined;
       ref.current.onkeyup = undefined;
-
       if (!(previousState !== null && previousState !== void 0 && previousState.isEditing) && isEditing || previousState !== null && previousState !== void 0 && previousState.containerHasFocus && !containerHasFocus) {
         setKeysPressedList([]);
       }
@@ -148,5 +124,4 @@ var useMultipleKeyTracking = function useMultipleKeyTracking(_ref) {
     usingMac: usingMac
   };
 };
-
 exports.useMultipleKeyTracking = useMultipleKeyTracking;

package/lib/components/DataSpreadsheet/hooks/useResetSpreadsheetFocus.js

@@ -4,34 +4,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useResetSpreadsheetFocus = void 0;
-
 var _react = require("react");
-
 var _settings = require("../../../settings");
-
 /**
  * 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.
  */
+
 var useResetSpreadsheetFocus = function useResetSpreadsheetFocus(_ref) {
   var _ref$blockClass = _ref.blockClass,
-      blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
-      focusedElement = _ref.focusedElement,
-      removeActiveCell = _ref.removeActiveCell,
-      setContainerHasFocus = _ref.setContainerHasFocus;
+    blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass,
+    focusedElement = _ref.focusedElement,
+    removeActiveCell = _ref.removeActiveCell,
+    setContainerHasFocus = _ref.setContainerHasFocus;
   // Reset everything when spreadsheet loses focus
   (0, _react.useEffect)(function () {
     if (!focusedElement.classList.contains("".concat(blockClass, "--interactive-cell-element"))) {
       setContainerHasFocus(false);
       removeActiveCell();
     }
-
     if (focusedElement.classList.contains(blockClass) || focusedElement.classList.contains("".concat(blockClass, "--interactive-cell-element"))) {
       setContainerHasFocus(true);
     }
   }, [focusedElement, removeActiveCell, blockClass, setContainerHasFocus]);
 };
-
 exports.useResetSpreadsheetFocus = useResetSpreadsheetFocus;

package/lib/components/DataSpreadsheet/hooks/useSpreadsheetEdit.js

@@ -1,46 +1,38 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSpreadsheetEdit = void 0;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = require("react");
-
 var _layout = require("@carbon/layout");
-
 var _settings = require("../../../settings");
-
 var _hooks = require("../../../global/js/hooks");
-
 /**
  * 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.
  */
+
 var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
   var isEditing = _ref.isEditing,
-      rows = _ref.rows,
-      activeCellCoordinates = _ref.activeCellCoordinates,
-      activeCellRef = _ref.activeCellRef,
-      cellEditorRef = _ref.cellEditorRef,
-      cellEditorRulerRef = _ref.cellEditorRulerRef,
-      visibleColumns = _ref.visibleColumns,
-      defaultColumn = _ref.defaultColumn,
-      cellEditorValue = _ref.cellEditorValue,
-      _ref$blockClass = _ref.blockClass,
-      blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass;
-
+    rows = _ref.rows,
+    activeCellCoordinates = _ref.activeCellCoordinates,
+    activeCellRef = _ref.activeCellRef,
+    cellEditorRef = _ref.cellEditorRef,
+    cellEditorRulerRef = _ref.cellEditorRulerRef,
+    visibleColumns = _ref.visibleColumns,
+    defaultColumn = _ref.defaultColumn,
+    cellEditorValue = _ref.cellEditorValue,
+    _ref$blockClass = _ref.blockClass,
+    blockClass = _ref$blockClass === void 0 ? "".concat(_settings.pkg.prefix, "--data-spreadsheet") : _ref$blockClass;
   var _useState = (0, _react.useState)(null),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      nextIndex = _useState2[0],
-      setNextIndex = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    nextIndex = _useState2[0],
+    setNextIndex = _useState2[1];
   var previousState = (0, _hooks.usePreviousValue)({
     nextIndex: nextIndex
   });
@@ -52,10 +44,8 @@ var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
   (0, _react.useEffect)(function () {
     var rulerWidth = cellEditorRulerRef.current.offsetWidth;
     var cellEditorCurrentWidth = parseInt(cellEditorRef.current.style.width);
-
     if (isEditing) {
       var _rows$activeCellCoord, _cellProps$column, _cellEditorRef$curren;
-
       var cellProps = (_rows$activeCellCoord = rows[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row]) === null || _rows$activeCellCoord === void 0 ? void 0 : _rows$activeCellCoord.cells[activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column];
       var activeCellLeftPosition = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.left;
       var activeCellTopPosition = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.top;
@@ -64,36 +54,30 @@ var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
       cellEditorRef.current.style.display = 'block';
       cellEditorRef.current.style.height = activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.height;
       cellEditorRef.current.style.paddingTop = "".concat((parseInt(activeCellRef === null || activeCellRef === void 0 ? void 0 : activeCellRef.current.style.height) - 16) / 2 - 1, "px"); // calculate paddingTop based on cellHeight which could be variable depending on the cellSize prop
-
       cellEditorRef.current.style.textAlign = (cellProps === null || cellProps === void 0 ? void 0 : (_cellProps$column = cellProps.column) === null || _cellProps$column === void 0 ? void 0 : _cellProps$column.placement) === 'right' ? 'right' : 'left';
       (_cellEditorRef$curren = cellEditorRef.current) === null || _cellEditorRef$curren === void 0 ? void 0 : _cellEditorRef$curren.focus();
-
       if (rulerWidth < cellEditorCurrentWidth) {
         var _visibleColumns$nextI;
-
-        var currentColumnWidth = ((_visibleColumns$nextI = visibleColumns[nextIndex]) === null || _visibleColumns$nextI === void 0 ? void 0 : _visibleColumns$nextI.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width); // If the contents of the cell editor is deleted past the point of the next column
-
+        var currentColumnWidth = ((_visibleColumns$nextI = visibleColumns[nextIndex]) === null || _visibleColumns$nextI === void 0 ? void 0 : _visibleColumns$nextI.width) || (defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.width);
+        // If the contents of the cell editor is deleted past the point of the next column
         if (rulerWidth < cellEditorCurrentWidth - currentColumnWidth) {
           cellEditorRef.current.style.width = (0, _layout.px)(parseInt(cellEditorRef.current.style.width) - currentColumnWidth);
           setNextIndex(function (prev) {
             if (prev === 0) {
               return prev;
             }
-
             return prev - 1;
           });
-        } // Decrease cell editor width by increment of current column width
-
+        }
+        // Decrease cell editor width by increment of current column width
       }
 
       if (rulerWidth >= cellEditorCurrentWidth) {
         var _visibleColumns;
-
         setNextIndex(function (prev) {
           if (prev === visibleColumns.length - 1) {
             return prev;
           }
-
           return prev + 1;
         });
         var onLastColumnIndex = nextIndex + 1 === visibleColumns.length;
@@ -107,7 +91,6 @@ var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
         // Cell editor has reached max height, we need to add the scrolling back.
         // We also need to subtract 1 to account for the fact that the cell editor
         // is placed one pixel below the cell being edited to account for the border
-
         if (cellEditorRef.current.clientHeight === totalCellEditorMaxHeight - 1) {
           cellEditorRef.current.style.overflow = 'auto';
         } else {
@@ -115,7 +98,6 @@ var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
         }
       }
     }
-
     if (!isEditing) {
       cellEditorRef.current.style.overflow = 'hidden';
       cellEditorRef.current.style.display = 'none';
@@ -125,5 +107,4 @@ var useSpreadsheetEdit = function useSpreadsheetEdit(_ref) {
     }
   }, [isEditing, activeCellCoordinates, rows, cellEditorValue, defaultColumn, activeCellRef, cellEditorRef, cellEditorRulerRef, visibleColumns, blockClass, previousState === null || previousState === void 0 ? void 0 : previousState.cellEditorValue, nextIndex]);
 };
-
 exports.useSpreadsheetEdit = useSpreadsheetEdit;