@carbon/ibm-products 2.0.0-rc.29 → 2.0.0-rc.32

package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -3,82 +3,71 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["onChange"];
-
 /**
  * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+
 import React, { useEffect, useState, useLayoutEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Checkbox, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { CaretDown } from '@carbon/react/icons';
-import { pkg } from '../../../settings'; // cspell:words columnheader
+import { pkg } from '../../../settings';
+// cspell:words columnheader
 
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var SELECT_ALL_PAGE_ROWS = 'pageRows';
 var SELECT_ALL_ROWS = 'allRows';
-
 var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
   var _columns$;
-
   var tableId = _ref.tableId,
-      isFetching = _ref.isFetching,
-      isAllRowsSelected = _ref.isAllRowsSelected,
-      selectAllToggle = _ref.selectAllToggle,
-      getToggleAllPageRowsSelectedProps = _ref.getToggleAllPageRowsSelectedProps,
-      getToggleAllRowsSelectedProps = _ref.getToggleAllRowsSelectedProps,
-      _ref$allPageRowsLabel = _ref.allPageRowsLabel,
-      allPageRowsLabel = _ref$allPageRowsLabel === void 0 ? 'Select all on page' : _ref$allPageRowsLabel,
-      _ref$allRowsLabel = _ref.allRowsLabel,
-      allRowsLabel = _ref$allRowsLabel === void 0 ? 'Select all' : _ref$allRowsLabel,
-      columns = _ref.columns,
-      withStickyColumn = _ref.withStickyColumn;
-
+    isFetching = _ref.isFetching,
+    isAllRowsSelected = _ref.isAllRowsSelected,
+    selectAllToggle = _ref.selectAllToggle,
+    getToggleAllPageRowsSelectedProps = _ref.getToggleAllPageRowsSelectedProps,
+    getToggleAllRowsSelectedProps = _ref.getToggleAllRowsSelectedProps,
+    _ref$allPageRowsLabel = _ref.allPageRowsLabel,
+    allPageRowsLabel = _ref$allPageRowsLabel === void 0 ? 'Select all on page' : _ref$allPageRowsLabel,
+    _ref$allRowsLabel = _ref.allRowsLabel,
+    allRowsLabel = _ref$allRowsLabel === void 0 ? 'Select all' : _ref$allRowsLabel,
+    columns = _ref.columns,
+    withStickyColumn = _ref.withStickyColumn;
   var _useState = useState(SELECT_ALL_PAGE_ROWS),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectAllMode = _useState2[0],
-      setSelectAllMode = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    selectAllMode = _useState2[0],
+    setSelectAllMode = _useState2[1];
   useEffect(function () {
     if (onSelectAllRows) {
       onSelectAllRows(isAllRowsSelected && selectAllMode === SELECT_ALL_ROWS);
     }
   }, [isAllRowsSelected, selectAllMode, onSelectAllRows]);
-
   var _useState3 = useState(window.innerWidth),
-      _useState4 = _slicedToArray(_useState3, 2),
-      windowSize = _useState4[0],
-      setWindowSize = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    windowSize = _useState4[0],
+    setWindowSize = _useState4[1];
   useLayoutEffect(function () {
     function updateSize() {
       setWindowSize(window.innerWidth);
     }
-
     window.addEventListener('resize', updateSize);
     return function () {
       return window.removeEventListener('resize', updateSize);
     };
   }, []);
-
   var _ref2 = selectAllToggle || {},
-      onSelectAllRows = _ref2.onSelectAllRows,
-      labels = _ref2.labels;
-
+    onSelectAllRows = _ref2.onSelectAllRows,
+    labels = _ref2.labels;
   if (labels) {
     allPageRowsLabel = labels.allPageRows || allPageRowsLabel;
     allRowsLabel = labels.allRows || allRowsLabel;
   }
-
   var getProps = selectAllMode === SELECT_ALL_PAGE_ROWS ? getToggleAllPageRowsSelectedProps : getToggleAllRowsSelectedProps;
-
   var _getProps = getProps(),
-      onChange = _getProps.onChange,
-      selectProps = _objectWithoutProperties(_getProps, _excluded);
-
+    onChange = _getProps.onChange,
+    selectProps = _objectWithoutProperties(_getProps, _excluded);
   var disabled = isFetching || selectProps.disabled;
   var isFirstColumnStickyLeft = ((_columns$ = columns[0]) === null || _columns$ === void 0 ? void 0 : _columns$.sticky) === 'left' && withStickyColumn;
   return /*#__PURE__*/React.createElement("th", {
@@ -101,21 +90,21 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
       }, props));
     },
     size: "sm",
-    ariaLabel: allRowsLabel,
+    "aria-label": allRowsLabel,
     menuOptionsClass: "".concat(blockClass, "__select-all-toggle-overflow")
   }, /*#__PURE__*/React.createElement(OverflowMenuItem, {
     itemText: allPageRowsLabel,
     requireTitle: true,
     disabled: disabled,
     onClick: function onClick() {
-      setSelectAllMode(SELECT_ALL_PAGE_ROWS); // deselect all rows first
-
+      setSelectAllMode(SELECT_ALL_PAGE_ROWS);
+      // deselect all rows first
       getToggleAllRowsSelectedProps().onChange({
         target: {
           checked: false
         }
-      }); // select all row on current page
-
+      });
+      // select all row on current page
       getToggleAllPageRowsSelectedProps().onChange({
         target: {
           checked: true
@@ -136,7 +125,6 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
     }
   })));
 };
-
 SelectAllWithToggle.propTypes = {
   allPageRowsLabel: PropTypes.string,
   allRowsLabel: PropTypes.string,

package/es/components/Datagrid/Datagrid/DatagridSimpleBody.js

@@ -1,10 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 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) { _defineProperty(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; }
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -17,11 +14,10 @@ import { TableBody } from '@carbon/react';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-
 var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,
-      rows = datagridState.rows,
-      prepareRow = datagridState.prepareRow;
+    rows = datagridState.rows,
+    prepareRow = datagridState.prepareRow;
   return /*#__PURE__*/React.createElement(TableBody, _extends({}, getTableBodyProps({
     role: false
   }), {
@@ -33,5 +29,4 @@ var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
     }));
   }));
 };
-
 export default DatagridSimpleBody;

package/es/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -1,12 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 /**
  * 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.
  */
+
 import React, { useEffect, useRef, useState } from 'react';
 import { Add, OverflowMenuVertical } from '@carbon/react/icons';
 import { TableToolbar, TableBatchActions, TableBatchAction } from '@carbon/react';
@@ -15,31 +15,28 @@ import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
 import { pkg, carbon } from '../../../settings';
 import cx from 'classnames';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-
 var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      displayAllInMenu = _useState2[0],
-      setDisplayAllInMenu = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    displayAllInMenu = _useState2[0],
+    setDisplayAllInMenu = _useState2[1];
   var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      initialListWidth = _useState4[0],
-      setInitialListWidth = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    initialListWidth = _useState4[0],
+    setInitialListWidth = _useState4[1];
   var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      receivedInitialWidth = _useState6[0],
-      setReceivedInitialWidth = _useState6[1];
-
+    _useState6 = _slicedToArray(_useState5, 2),
+    receivedInitialWidth = _useState6[0],
+    setReceivedInitialWidth = _useState6[1];
   var selectedFlatRows = datagridState.selectedFlatRows,
-      toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
-      toolbarBatchActions = datagridState.toolbarBatchActions,
-      setGlobalFilter = datagridState.setGlobalFilter;
-  var totalSelected = selectedFlatRows && selectedFlatRows.length; // Get initial width of batch actions container,
+    toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
+    toolbarBatchActions = datagridState.toolbarBatchActions,
+    setGlobalFilter = datagridState.setGlobalFilter;
+  var totalSelected = selectedFlatRows && selectedFlatRows.length;
+
+  // Get initial width of batch actions container,
   // used to measure when all items are put inside
   // the ButtonMenu
-
   useEffect(function () {
     if (totalSelected === 1 && !receivedInitialWidth) {
       var batchActionListWidth = ref.current.querySelector(".".concat(carbon.prefix, "--action-list")).offsetWidth;
@@ -49,22 +46,21 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
   }, [totalSelected, receivedInitialWidth, ref]);
   useEffect(function () {
     var summaryWidth = ref.current.querySelector(".".concat(carbon.prefix, "--batch-summary")).offsetWidth;
-
     if (width < summaryWidth + initialListWidth + 32) {
       setDisplayAllInMenu(true);
     } else {
       setDisplayAllInMenu(false);
     }
-  }, [width, ref, initialListWidth]); // Render batch actions in ButtonMenu
+  }, [width, ref, initialListWidth]);
 
+  // Render batch actions in ButtonMenu
   var renderBatchActionOverflow = function renderBatchActionOverflow() {
-    var minWidthBeforeOverflowIcon = 380; // Do not render ButtonMenu when there are 3 or less items
+    var minWidthBeforeOverflowIcon = 380;
+    // Do not render ButtonMenu when there are 3 or less items
     // and if there is enough available space to render all the items
-
     if ((toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.length) <= 3 && !displayAllInMenu) {
       return null;
     }
-
     return /*#__PURE__*/React.createElement(ButtonMenu, {
       label: width > minWidthBeforeOverflowIcon ? 'More' : null,
       renderIcon: width > minWidthBeforeOverflowIcon ? Add : OverflowMenuVertical,
@@ -80,34 +76,30 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
             itemText: batchAction.label,
             onClick: function onClick() {
               batchAction.onClick();
-
               if (batchAction.type === 'select_all') {
                 toggleAllRowsSelected(true);
               }
             }
           });
         }
-
         return null;
       }
-
       return /*#__PURE__*/React.createElement(ButtonMenuItem, {
         key: "".concat(batchAction.label, "-").concat(index),
         itemText: batchAction.label,
         onClick: function onClick() {
           batchAction.onClick();
-
           if (batchAction.type === 'select_all') {
             toggleAllRowsSelected(true);
           }
         }
       });
     }));
-  }; // Only display the first two batch actions, the rest are
+  };
+
+  // Only display the first two batch actions, the rest are
   // displayed inside of the ButtonMenu if there are more than
   // 3 batch actions
-
-
   return /*#__PURE__*/React.createElement(TableBatchActions, {
     shouldShowBatchActions: totalSelected > 0,
     totalSelected: totalSelected,
@@ -122,7 +114,6 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
         renderIcon: batchAction.renderIcon,
         onClick: function onClick() {
           batchAction.onClick();
-
           if (batchAction.type === 'select_all') {
             toggleAllRowsSelected(true);
           }
@@ -132,17 +123,14 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     }
   })), renderBatchActionOverflow());
 };
-
 var DatagridToolbar = function DatagridToolbar(datagridState) {
   var ref = useRef(null);
-
   var _useResizeObserver = useResizeObserver(ref),
-      width = _useResizeObserver.width;
-
+    width = _useResizeObserver.width;
   var DatagridActions = datagridState.DatagridActions,
-      DatagridBatchActions = datagridState.DatagridBatchActions,
-      batchActions = datagridState.batchActions,
-      rowSize = datagridState.rowSize;
+    DatagridBatchActions = datagridState.DatagridBatchActions,
+    batchActions = datagridState.batchActions,
+    rowSize = datagridState.rowSize;
   var getRowHeight = rowSize ? rowSize : 'lg';
   return batchActions && DatagridActions ? /*#__PURE__*/React.createElement("div", {
     ref: ref,
@@ -151,5 +139,4 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
     className: "".concat(blockClass, "__table-toolbar")
   }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
 };
-
 export default DatagridToolbar;

package/es/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -1,10 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 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) { _defineProperty(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; }
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -33,34 +30,29 @@ var rowSizeMap = {
   tall: 64
 };
 var defaultRowHeight = rowSizeMap.lg;
-
 var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
   var _gridRef$current, _gridRef$current2;
-
   var getTableBodyProps = datagridState.getTableBodyProps,
-      rows = datagridState.rows,
-      prepareRow = datagridState.prepareRow,
-      onScroll = datagridState.onScroll,
-      innerListRef = datagridState.innerListRef,
-      _datagridState$tableH = datagridState.tableHeight,
-      tableHeight = _datagridState$tableH === void 0 ? 400 : _datagridState$tableH,
-      virtualHeight = datagridState.virtualHeight,
-      listRef = datagridState.listRef,
-      rowSize = datagridState.rowSize,
-      DatagridPagination = datagridState.DatagridPagination,
-      page = datagridState.page,
-      handleResize = datagridState.handleResize,
-      gridRef = datagridState.gridRef;
-
+    rows = datagridState.rows,
+    prepareRow = datagridState.prepareRow,
+    onScroll = datagridState.onScroll,
+    innerListRef = datagridState.innerListRef,
+    _datagridState$tableH = datagridState.tableHeight,
+    tableHeight = _datagridState$tableH === void 0 ? 400 : _datagridState$tableH,
+    virtualHeight = datagridState.virtualHeight,
+    listRef = datagridState.listRef,
+    rowSize = datagridState.rowSize,
+    DatagridPagination = datagridState.DatagridPagination,
+    page = datagridState.page,
+    handleResize = datagridState.handleResize,
+    gridRef = datagridState.gridRef;
   var handleVirtualGridResize = function handleVirtualGridResize() {
     var gridRefElement = gridRef === null || gridRef === void 0 ? void 0 : gridRef.current;
     gridRefElement.style.width = gridRefElement === null || gridRefElement === void 0 ? void 0 : gridRefElement.clientWidth;
   };
-
   useResizeObserver(gridRef, {
     callback: handleVirtualGridResize
   });
-
   var syncScroll = function syncScroll(e) {
     var virtualBody = e.target;
     document.querySelector(".".concat(blockClass, "__head-wrap")).scrollLeft = virtualBody.scrollLeft;
@@ -72,11 +64,9 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     handleResize();
   }, [handleResize]);
   var rowHeight = rowSize && rowSizeMap[rowSize] || defaultRowHeight;
-
   if (listRef && listRef.current) {
     listRef.current.resetAfterIndex(0);
   }
-
   var visibleRows = DatagridPagination && page || rows;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__head-wrap"),
@@ -106,7 +96,7 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     }
   }, function (_ref) {
     var index = _ref.index,
-        style = _ref.style;
+      style = _ref.style;
     var row = visibleRows[index];
     prepareRow(row);
     return /*#__PURE__*/React.createElement("div", {
@@ -116,5 +106,4 @@ var DatagridVirtualBody = function DatagridVirtualBody(datagridState) {
     })));
   })));
 };
-
 export default DatagridVirtualBody;

package/es/components/Datagrid/Datagrid/DraggableElement.js

@@ -1,7 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 // @flow
-
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -16,106 +15,97 @@ import { useDrag, useDrop } from 'react-dnd';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
 var useEffect = React.useEffect,
-    useRef = React.useRef,
-    useState = React.useState;
+  useRef = React.useRef,
+  useState = React.useState;
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var DRAG_TYPE = "".concat(blockClass, "__shared-ui-draggable-element");
-
 var DraggableElement = function DraggableElement(_ref) {
   var _cx;
-
   var id = _ref.id,
-      index = _ref.index,
-      listData = _ref.listData,
-      children = _ref.children,
-      type = _ref.type,
-      disabled = _ref.disabled,
-      ariaLabel = _ref.ariaLabel,
-      onGrab = _ref.onGrab,
-      onArrowKeyDown = _ref.onArrowKeyDown,
-      isFocused = _ref.isFocused,
-      isSticky = _ref.isSticky,
-      moveElement = _ref.moveElement,
-      selected = _ref.selected,
-      _ref$positionLabel = _ref.positionLabel,
-      positionLabel = _ref$positionLabel === void 0 ? 'Current position {index} of {total}' : _ref$positionLabel,
-      _ref$grabbedLabel = _ref.grabbedLabel,
-      grabbedLabel = _ref$grabbedLabel === void 0 ? '{itemName} grabbed.' : _ref$grabbedLabel,
-      _ref$droppedLabel = _ref.droppedLabel,
-      droppedLabel = _ref$droppedLabel === void 0 ? '{itemName} dropped.' : _ref$droppedLabel;
+    index = _ref.index,
+    listData = _ref.listData,
+    children = _ref.children,
+    type = _ref.type,
+    disabled = _ref.disabled,
+    ariaLabel = _ref.ariaLabel,
+    onGrab = _ref.onGrab,
+    onArrowKeyDown = _ref.onArrowKeyDown,
+    isFocused = _ref.isFocused,
+    isSticky = _ref.isSticky,
+    moveElement = _ref.moveElement,
+    selected = _ref.selected,
+    _ref$positionLabel = _ref.positionLabel,
+    positionLabel = _ref$positionLabel === void 0 ? 'Current position {index} of {total}' : _ref$positionLabel,
+    _ref$grabbedLabel = _ref.grabbedLabel,
+    grabbedLabel = _ref$grabbedLabel === void 0 ? '{itemName} grabbed.' : _ref$grabbedLabel,
+    _ref$droppedLabel = _ref.droppedLabel,
+    droppedLabel = _ref$droppedLabel === void 0 ? '{itemName} dropped.' : _ref$droppedLabel;
   var ref = useRef();
-
   var _useDrop = useDrop({
-    accept: DRAG_TYPE + type,
-    collect: function collect(monitor) {
-      return {
-        isOver: !!monitor.isOver()
-      };
-    },
-    drop: function drop(item) {
-      moveElement(item.index, index);
-    },
-    canDrop: function canDrop() {
-      return !disabled;
-    },
-    hover: function hover(item) {
-      var dragIndex = item.index;
-      var hoverIndex = index; // Don't replace items with themselves
-
-      if (dragIndex === hoverIndex || disabled) {
-        return;
+      accept: DRAG_TYPE + type,
+      collect: function collect(monitor) {
+        return {
+          isOver: !!monitor.isOver()
+        };
+      },
+      drop: function drop(item) {
+        moveElement(item.index, index);
+      },
+      canDrop: function canDrop() {
+        return !disabled;
+      },
+      hover: function hover(item) {
+        var dragIndex = item.index;
+        var hoverIndex = index;
+        // Don't replace items with themselves
+        if (dragIndex === hoverIndex || disabled) {
+          return;
+        }
+        moveElement(dragIndex, hoverIndex);
+        // Time to actually perform the action
+        // Note: we're mutating the monitor item here!
+        // Generally it's better to avoid mutations,
+        // but it's good here for the sake of performance
+        // to avoid expensive index searches.
+        // eslint-disable-next-line no-param-reassign
+        item.index = hoverIndex;
       }
-
-      moveElement(dragIndex, hoverIndex); // Time to actually perform the action
-      // Note: we're mutating the monitor item here!
-      // Generally it's better to avoid mutations,
-      // but it's good here for the sake of performance
-      // to avoid expensive index searches.
-      // eslint-disable-next-line no-param-reassign
-
-      item.index = hoverIndex;
-    }
-  }),
-      _useDrop2 = _slicedToArray(_useDrop, 2),
-      isOver = _useDrop2[0].isOver,
-      drop = _useDrop2[1];
-
+    }),
+    _useDrop2 = _slicedToArray(_useDrop, 2),
+    isOver = _useDrop2[0].isOver,
+    drop = _useDrop2[1];
   var _useDrag = useDrag({
-    type: DRAG_TYPE + type,
-    item: {
-      id: id,
-      index: index
-    },
-    canDrag: function canDrag() {
-      return !disabled;
-    },
-    collect: function collect(monitor) {
-      return {
-        isDragging: monitor.isDragging()
-      };
-    }
-  }),
-      _useDrag2 = _slicedToArray(_useDrag, 3),
-      isDragging = _useDrag2[0].isDragging,
-      drag = _useDrag2[1],
-      preview = _useDrag2[2];
-
+      type: DRAG_TYPE + type,
+      item: {
+        id: id,
+        index: index
+      },
+      canDrag: function canDrag() {
+        return !disabled;
+      },
+      collect: function collect(monitor) {
+        return {
+          isDragging: monitor.isDragging()
+        };
+      }
+    }),
+    _useDrag2 = _slicedToArray(_useDrag, 3),
+    isDragging = _useDrag2[0].isDragging,
+    drag = _useDrag2[1],
+    preview = _useDrag2[2];
   useEffect(function () {
     if (isFocused && ref && ref.current) {
       ref.current.focus();
     }
   }, [isFocused]);
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isGrabbed = _useState2[0],
-      setIsGrabbed = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isGrabbed = _useState2[0],
+    setIsGrabbed = _useState2[1];
   var _useState3 = useState(isFocused),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isFocusedOnItem = _useState4[0],
-      setIsFocusedOnItem = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    isFocusedOnItem = _useState4[0],
+    setIsFocusedOnItem = _useState4[1];
   drop(ref);
   var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: cx({
@@ -166,7 +156,6 @@ var DraggableElement = function DraggableElement(_ref) {
     className: cx(_defineProperty({}, "".concat(blockClass, "__draggable-handleStyle"), !disabled), ["".concat(blockClass, "__draggable-handleHolder-droppable")])
   }, (!isOver || disabled) && content));
 };
-
 DraggableElement.propTypes = {
   ariaLabel: PropTypes.string.isRequired,
   children: PropTypes.element.isRequired,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js

@@ -4,16 +4,16 @@
  * 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 PropTypes from 'prop-types';
 import { Search } from '@carbon/react';
 import * as React from 'react';
 import { pkg } from '../../../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-
 var Actions = function Actions(_ref) {
   var searchText = _ref.searchText,
-      setSearchText = _ref.setSearchText,
-      findColumnPlaceholderLabel = _ref.findColumnPlaceholderLabel;
+    setSearchText = _ref.setSearchText,
+    findColumnPlaceholderLabel = _ref.findColumnPlaceholderLabel;
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__customize-columns-tearsheet--actions")
   }, /*#__PURE__*/React.createElement(Search, {
@@ -27,7 +27,6 @@ var Actions = function Actions(_ref) {
     }
   }));
 };
-
 Actions.propTypes = {
   columns: PropTypes.array.isRequired,
   findColumnPlaceholderLabel: PropTypes.string,