@carbon/ibm-products 1.25.1 → 2.0.0-rc.1

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

@@ -13,7 +13,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 import React from 'react';
-import { DataTable } from 'carbon-components-react';
+import { DataTable } from '@carbon/react';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");

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

@@ -1,22 +1,150 @@
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+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 from 'react';
-import { DataTable } from 'carbon-components-react';
-import { pkg } from '../../../settings';
+import React, { useEffect, useState } from 'react';
+import { Add, OverflowMenuVertical } from '@carbon/icons-react';
+import { DataTable, TableBatchActions, TableBatchAction } from '@carbon/react';
+import { useResizeDetector } from 'react-resize-detector';
+import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
+import { pkg, carbon } from '../../../settings';
+import cx from 'classnames';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var TableToolbar = DataTable.TableToolbar;
 
+var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      displayAllInMenu = _useState2[0],
+      setDisplayAllInMenu = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      initialListWidth = _useState4[0],
+      setInitialListWidth = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      receivedInitialWidth = _useState6[0],
+      setReceivedInitialWidth = _useState6[1];
+
+  var selectedFlatRows = datagridState.selectedFlatRows,
+      toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
+      toolbarBatchActions = datagridState.toolbarBatchActions;
+  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;
+      setInitialListWidth(batchActionListWidth);
+      setReceivedInitialWidth(true);
+    }
+  }, [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
+
+  var renderBatchActionOverflow = function renderBatchActionOverflow() {
+    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,
+      className: cx("".concat(blockClass, "__button-menu"), _defineProperty({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon)),
+      menuOptionsClass: "".concat(blockClass, "__button-menu-options"),
+      flipped: true
+    }, toolbarBatchActions && toolbarBatchActions.map(function (batchAction, index) {
+      if (index < 2) {
+        if (displayAllInMenu) {
+          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);
+              }
+            }
+          });
+        }
+
+        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
+  // displayed inside of the ButtonMenu if there are more than
+  // 3 batch actions
+
+
+  return /*#__PURE__*/React.createElement(TableBatchActions, {
+    shouldShowBatchActions: totalSelected > 0,
+    totalSelected: totalSelected,
+    onCancel: function onCancel() {
+      return toggleAllRowsSelected(false);
+    }
+  }, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
+    if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length === 3) {
+      return /*#__PURE__*/React.createElement(TableBatchAction, {
+        key: "".concat(batchAction.label, "-").concat(index),
+        renderIcon: batchAction.renderIcon,
+        onClick: function onClick() {
+          batchAction.onClick();
+
+          if (batchAction.type === 'select_all') {
+            toggleAllRowsSelected(true);
+          }
+        },
+        iconDescription: batchAction.label
+      }, batchAction.label);
+    }
+  })), renderBatchActionOverflow());
+};
+
 var DatagridToolbar = function DatagridToolbar(datagridState) {
+  var _useResizeDetector = useResizeDetector(),
+      width = _useResizeDetector.width,
+      ref = _useResizeDetector.ref;
+
   var DatagridActions = datagridState.DatagridActions,
-      DatagridBatchActions = datagridState.DatagridBatchActions;
-  return DatagridActions || DatagridBatchActions ? /*#__PURE__*/React.createElement("div", {
+      DatagridBatchActions = datagridState.DatagridBatchActions,
+      batchActions = datagridState.batchActions;
+  return batchActions && DatagridActions ? /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: "".concat(blockClass, "__table-toolbar")
+  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__table-toolbar")
-  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
+  }, /*#__PURE__*/React.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)));
 };
 
 export default DatagridToolbar;

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

@@ -14,7 +14,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 import React, { useEffect } from 'react';
 import { VariableSizeList } from 'react-window';
-import { DataTable } from 'carbon-components-react';
+import { DataTable } from '@carbon/react';
 import { pkg } from '../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var TableBody = DataTable.TableBody;

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

@@ -11,7 +11,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Draggable16 } from '@carbon/icons-react';
+import { Draggable } from '@carbon/icons-react';
 import { useDrag, useDrop } from 'react-dnd';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
@@ -117,7 +117,9 @@ var DraggableElement = function DraggableElement(_ref) {
     className: cx({
       disabled: disabled
     }, "".concat(blockClass, "__draggable-handleStyle"))
-  }, /*#__PURE__*/React.createElement(Draggable16, null)), children);
+  }, /*#__PURE__*/React.createElement(Draggable, {
+    size: 16
+  })), children);
   return /*#__PURE__*/React.createElement("li", {
     className: cx(_defineProperty({}, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), _defineProperty({}, "".concat(blockClass, "__wkc-draggable-handleHolder--grabbed"), isGrabbed), "".concat(blockClass, "__draggable-handleHolder")),
     ref: ref,

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

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 
 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; }
 
@@ -13,9 +14,9 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
-import { Reset16 } from '@carbon/icons-react';
+import { Reset } from '@carbon/icons-react';
 import PropTypes from 'prop-types';
-import { Button, Search } from 'carbon-components-react';
+import { Button, Search } from '@carbon/react';
 import * as React from 'react';
 import keyBy from 'lodash/keyBy';
 import { pkg } from '../../../../../settings';
@@ -52,7 +53,11 @@ var Actions = function Actions(_ref) {
     },
     size: "sm",
     kind: "ghost",
-    renderIcon: Reset16,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(Reset, _extends({
+        size: 16
+      }, props));
+    },
     "test-id": "".concat(blockClass, "__customize-columns-modal--reset")
   }, resetToDefaultLabel));
 };

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

@@ -12,8 +12,8 @@ var _excluded = ["onClick", "setIsModalOpen", "isModalOpen", "iconTooltipLabel"]
  */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Column16 } from '@carbon/icons-react';
-import { Button } from 'carbon-components-react';
+import { Column } from '@carbon/icons-react';
+import { Button } from '@carbon/react';
 import { pkg } from '../../../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
@@ -26,7 +26,11 @@ var ButtonWrapper = function ButtonWrapper(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
-    renderIcon: Column16,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(Column, _extends({
+        size: 16
+      }, props));
+    },
     iconDescription: iconTooltipLabel,
     tooltipPosition: "left",
     kind: "ghost",

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

@@ -12,7 +12,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { Checkbox } from 'carbon-components-react';
+import { Checkbox } from '@carbon/react';
 import update from 'immutability-helper';
 import { pkg } from '../../../../../settings';
 import DraggableElement from '../../DraggableElement';

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

@@ -15,7 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // @flow
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Modal } from 'carbon-components-react';
+import { Modal } from '@carbon/react';
 import { isColumnVisible } from './common';
 import Columns from './Columns';
 import Actions from './Actions';

package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js

@@ -14,8 +14,8 @@ var _excluded = ["buttonLabel"];
  */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Settings16 } from '@carbon/icons-react';
-import { Button } from 'carbon-components-react';
+import { Settings } from '@carbon/icons-react';
+import { IconButton } from '@carbon/react';
 import cx from 'classnames';
 import RowSizeRadioGroup from './RowSizeRadioGroup';
 import { pkg } from '../../../../../settings';
@@ -33,19 +33,19 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
       isOpen = _React$useState2[0],
       setIsOpen = _React$useState2[1];
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    hasIconOnly: true,
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconButton, {
     ref: buttonRef,
     kind: "ghost",
-    tooltipPosition: "left",
-    renderIcon: Settings16,
+    align: "left",
     onClick: function onClick() {
       return setIsOpen(!isOpen);
     },
-    iconDescription: buttonLabel,
-    className: cx(_defineProperty({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
-  }), isOpen && /*#__PURE__*/React.createElement(RowSizeRadioGroup, _extends({}, props, {
-    buttonRef: buttonRef,
+    label: buttonLabel,
+    className: cx("".concat(blockClass, "__row-size-button"), _defineProperty({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
+  }, /*#__PURE__*/React.createElement(Settings, {
+    size: 16
+  })), isOpen && /*#__PURE__*/React.createElement(RowSizeRadioGroup, _extends({}, props, {
+    ref: buttonRef,
     hideRadioGroup: function hideRadioGroup() {
       setIsOpen(false);
     }

package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js

@@ -8,18 +8,16 @@
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
-import React, { useEffect } from 'react';
+import React, { useEffect, forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { RadioButtonGroup, RadioButton } from 'carbon-components-react';
+import { RadioButtonGroup, RadioButton } from '@carbon/react';
 import isArray from 'lodash/isArray';
 import { pkg } from '../../../../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-
-var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
+var RowSizeRadioGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var rowSizes = _ref.rowSizes,
       selectedOption = _ref.selectedOption,
       datagridName = _ref.datagridName,
-      buttonRef = _ref.buttonRef,
       onChange = _ref.onChange,
       hideRadioGroup = _ref.hideRadioGroup,
       _ref$legendText = _ref.legendText,
@@ -33,7 +31,25 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
     xs: 'Extra small'
   } : _ref$rowSizeLabels;
 
-  var _getDropdownPosition = getDropdownPosition(buttonRef.current),
+  var getDropdownPosition = function getDropdownPosition(buttonEle) {
+    if (buttonEle instanceof HTMLElement) {
+      var _top = buttonEle.offsetTop + buttonEle.offsetHeight;
+
+      var _right = buttonEle.offsetLeft + buttonEle.offsetWidth;
+
+      return {
+        top: _top,
+        right: _right
+      };
+    }
+
+    return {
+      top: 0,
+      right: 0
+    };
+  };
+
+  var _getDropdownPosition = getDropdownPosition(ref.current),
       top = _getDropdownPosition.top,
       right = _getDropdownPosition.right;
 
@@ -75,7 +91,7 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
       id: "".concat(datagridName || 'datagrid', "--row-density--").concat(option.value)
     });
   })));
-};
+});
 
 var getBackwardCompatibleRowSize = function getBackwardCompatibleRowSize(rowSize) {
   // TODO: deprecate this function in next major release (v8) on carbon-components-react
@@ -89,24 +105,6 @@ var getBackwardCompatibleRowSize = function getBackwardCompatibleRowSize(rowSize
   return rowSizeMap[rowSize] || rowSize;
 };
 
-var getDropdownPosition = function getDropdownPosition(buttonEle) {
-  var parent = buttonEle.parentElement;
-
-  if (parent instanceof HTMLElement) {
-    var top = buttonEle.offsetTop + buttonEle.offsetHeight;
-    var right = parent.offsetWidth - parent.offsetLeft - (buttonEle.offsetLeft + buttonEle.offsetWidth);
-    return {
-      top: top,
-      right: right
-    };
-  }
-
-  return {
-    top: 0,
-    right: 0
-  };
-};
-
 RowSizeRadioGroup.defaultProps = {
   rowSizes: [{
     value: 'xl' // 64
@@ -127,7 +125,6 @@ RowSizeRadioGroup.defaultProps = {
   selectedOption: 'lg'
 };
 RowSizeRadioGroup.propTypes = {
-  buttonRef: PropTypes.any.isRequired,
   datagridName: PropTypes.string,
   hideRadioGroup: PropTypes.func.isRequired,
   legendText: PropTypes.string,

package/es/components/Datagrid/{Datagrid.stories → Datagrid.stories-helpers}/index.js

@@ -1,5 +1,5 @@
-export { story as CustomizeColumnStory } from './CustomizeColumnStory';
+export { story as CustomizeColumnStoryNotes } from './CustomizeColumnStory';
 export { default as StickyActionsColumn } from './StickyActionsColumnStory';
 export { story as RowSizeDropdownStory } from './RowSizeDropdownStory';
 export { story as LeftPanelStory } from './LeftPanelStory';
-export { story as SelectAllWitHToggle } from './SelectAllWithToggleStory';
+export { story as SelectAllWithToggle } from './SelectAllWithToggleStory';

package/es/components/Datagrid/useActionsColumn.js

@@ -12,7 +12,7 @@ var _excluded = ["id", "onClick", "shouldHideMenuItem", "shouldDisableMenuItem",
  */
 import React from 'react';
 import cx from 'classnames';
-import { IconSkeleton, OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
+import { IconSkeleton, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { pkg } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
@@ -32,19 +32,44 @@ var useActionsColumn = function useActionsColumn(hooks) {
 
           return [props, {
             children: /*#__PURE__*/React.createElement("div", {
-              className: "".concat(blockClass, "__actions-column-content")
+              className: "".concat(blockClass, "__actions-column-contents")
             }, isFetching && /*#__PURE__*/React.createElement(IconSkeleton, {
               className: "".concat(blockClass, "__actions-column-loading")
-            }), !isFetching && /*#__PURE__*/React.createElement(OverflowMenu, {
+            }), !isFetching && rowActions.length <= 2 && /*#__PURE__*/React.createElement("div", {
+              className: "".concat(blockClass, "_actions-column"),
+              style: {
+                display: 'flex'
+              }
+            }, rowActions.map(function (action) {
+              var id = action.id,
+                  itemText = action.itemText,
+                  _onClick = action.onClick,
+                  icon = action.icon;
+              return /*#__PURE__*/React.createElement("div", {
+                className: "".concat(blockClass, "__actions-column-button"),
+                key: ""
+              }, /*#__PURE__*/React.createElement(OverflowMenu, {
+                renderIcon: icon,
+                hasIconOnly: true,
+                light: true,
+                iconDescription: itemText,
+                kind: "ghost",
+                onClick: function onClick(e) {
+                  e.stopPropagation();
+
+                  _onClick(id, row, e);
+                }
+              }));
+            })), !isFetching && rowActions.length > 2 && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(OverflowMenu, {
               size: "sm",
               light: true,
               flipped: true,
               onClick: function onClick(e) {
-                return e.stopPropagation();
+                e.stopPropagation();
               }
             }, rowActions.map(function (action) {
               var id = action.id,
-                  _onClick = action.onClick,
+                  _onClick2 = action.onClick,
                   shouldHideMenuItem = action.shouldHideMenuItem,
                   shouldDisableMenuItem = action.shouldDisableMenuItem,
                   disabled = action.disabled,
@@ -64,11 +89,11 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 onClick: function onClick(e) {
                   e.stopPropagation();
 
-                  _onClick(id, row, e);
+                  _onClick2(id, row, e);
                 },
                 key: id
               }));
-            }))),
+            })))),
             className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__actions-column-cell"), true), _defineProperty(_cx, "".concat(blockClass, "__cell"), true), _cx))
           }];
         }

package/es/components/Datagrid/useRowExpander.js

@@ -10,7 +10,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 import React from 'react';
-import { ChevronDown16, ChevronUp16 } from '@carbon/icons-react';
+import { ChevronDown, ChevronUp } from '@carbon/icons-react';
 
 var useRowExpander = function useRowExpander(hooks) {
   var visibleColumns = function visibleColumns(columns) {
@@ -18,7 +18,11 @@ var useRowExpander = function useRowExpander(hooks) {
       id: 'expander',
       Cell: function Cell(_ref) {
         var row = _ref.row;
-        return row.canExpand && /*#__PURE__*/React.createElement("span", row.getToggleRowExpandedProps(), row.isExpanded ? /*#__PURE__*/React.createElement(ChevronUp16, null) : /*#__PURE__*/React.createElement(ChevronDown16, null));
+        return row.canExpand && /*#__PURE__*/React.createElement("span", row.getToggleRowExpandedProps(), row.isExpanded ? /*#__PURE__*/React.createElement(ChevronUp, {
+          size: 16
+        }) : /*#__PURE__*/React.createElement(ChevronDown, {
+          size: 16
+        }));
       },
       width: 48,
       disableResizing: true,

package/es/components/Datagrid/useSelectRows.js

@@ -18,10 +18,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // @flow
 import React from 'react';
 import cx from 'classnames';
-import { TableSelectRow } from 'carbon-components-react';
+import { DataTable } from '@carbon/react';
 import { SelectAll } from './Datagrid/DatagridSelectAll';
 import { selectionColumnId } from './common-column-ids';
-import { pkg } from '../../settings';
+import { pkg, carbon } from '../../settings';
+var TableSelectRow = DataTable.TableSelectRow;
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
 var useSelectRows = function useSelectRows(hooks) {
@@ -57,7 +58,7 @@ var useHighlightSelection = function useHighlightSelection(hooks) {
   var getRowProps = function getRowProps(props, _ref) {
     var row = _ref.row;
     return [props, {
-      className: cx("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? 'bx--data-table--selected' : '')
+      className: cx("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? "".concat(carbon.prefix, "--data-table--selected ").concat(blockClass, "__active-row") : '')
     }];
   };
 

package/es/components/Datagrid/useSortableColumns.js

@@ -1,5 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 
 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; }
 
@@ -13,8 +14,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 import React from 'react';
-import { Button } from 'carbon-components-react';
-import { ArrowUp16, ArrowDown16, Arrows16 } from '@carbon/icons-react';
+import { Button } from '@carbon/react';
+import { ArrowUp, ArrowDown, ArrowsVertical } from '@carbon/icons-react';
 var ordering = {
   ASC: 'ASC',
   DESC: 'DESC',
@@ -42,21 +43,29 @@ var useSortableColumns = function useSortableColumns(hooks) {
     };
 
     var sortableColumns = visibleColumns.map(function (column) {
-      var icon = function icon(col) {
+      var icon = function icon(col, props) {
         if (col.isSorted) {
           switch (col.isSortedDesc) {
             case false:
-              return ArrowUp16;
+              return /*#__PURE__*/React.createElement(ArrowUp, _extends({
+                size: 16
+              }, props));
 
             case true:
-              return ArrowDown16;
+              return /*#__PURE__*/React.createElement(ArrowDown, _extends({
+                size: 16
+              }, props));
 
             default:
-              return Arrows16;
+              return /*#__PURE__*/React.createElement(ArrowsVertical, _extends({
+                size: 16
+              }, props));
           }
         }
 
-        return Arrows16;
+        return /*#__PURE__*/React.createElement(ArrowsVertical, _extends({
+          size: 16
+        }, props));
       };
 
       var Header = function Header(headerProp) {
@@ -65,7 +74,9 @@ var useSortableColumns = function useSortableColumns(hooks) {
             return onSortClick(headerProp.column);
           },
           kind: "ghost",
-          renderIcon: icon(headerProp.column)
+          renderIcon: function renderIcon(props) {
+            return icon(headerProp.column, props);
+          }
         }, column.Header);
       };
 

package/es/components/Datagrid/useStickyColumn.js

@@ -117,6 +117,9 @@ var useStickyColumn = function useStickyColumn(hooks) {
     if (spacerIdx >= 0 && stickyIdx >= 0 && stickyIdx < spacerIdx) {
       var _temp = newHeaders[spacerIdx];
       newHeaders[spacerIdx] = newHeaders[stickyIdx];
+      newHeaders[spacerIdx].canResize = false;
+      newHeaders[spacerIdx].disableResizing = true;
+      delete newHeaders[spacerIdx].getResizerProps;
       newHeaders[stickyIdx] = _temp;
     }
   });

package/es/components/EditSidePanel/EditSidePanel.js

@@ -23,7 +23,7 @@ import { pkg
 /*, carbon */
 } from '../../settings'; // Carbon and package components we use.
 
-import { Form } from 'carbon-components-react';
+import { Form } from '@carbon/react';
 import { SidePanel } from '../SidePanel';
 import '../../global/js/utils/props-helper'; // The block part of our conventional BEM class names (blockClass__E--M).
 
@@ -183,7 +183,7 @@ EditSidePanel.propTypes = {
   /**
    * Sets the size of the side panel
    */
-  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'max']),
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
 
   /**
    * Specifies which DOM element in the form should be focused.