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

package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js

@@ -19,7 +19,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _iconsReact = require("@carbon/icons-react");
 
@@ -79,17 +79,24 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
     role: "columnheader",
     scope: "col",
     className: "".concat(blockClass, "__select-all-toggle-on")
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, (0, _extends2.default)({}, selectProps, {
+  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, (0, _extends2.default)({}, selectProps, {
     name: "".concat(tableId, "-select-all-checkbox-name"),
     onClick: function onClick(e) {
       onChange(e);
     },
     disabled: disabled,
-    id: "".concat(tableId, "-select-all-checkbox-id")
-  }))), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
-    renderIcon: _iconsReact.CaretDown16,
-    size: "sm"
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, {
+    id: "".concat(tableId, "-select-all-checkbox-id"),
+    labelText: allRowsLabel,
+    hideLabel: true
+  }))), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_iconsReact.CaretDown, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
+    size: "sm",
+    ariaLabel: allRowsLabel
+  }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
     itemText: allPageRowsLabel,
     requireTitle: true,
     disabled: disabled,
@@ -108,7 +115,7 @@ var SelectAllWithToggle = function SelectAllWithToggle(_ref) {
         }
       });
     }
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, {
     itemText: allRowsLabel,
     requireTitle: true,
     disabled: disabled,

package/lib/components/Datagrid/Datagrid/DatagridSimpleBody.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -24,7 +24,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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; }
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-var TableBody = _carbonComponentsReact.DataTable.TableBody;
+var TableBody = _react2.DataTable.TableBody;
 
 var DatagridSimpleBody = function DatagridSimpleBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,

package/lib/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _settings = require("../../../settings");
 
@@ -21,7 +21,7 @@ var _settings = require("../../../settings");
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-var TableToolbar = _carbonComponentsReact.DataTable.TableToolbar;
+var TableToolbar = _react2.DataTable.TableToolbar;
 
 var DatagridToolbar = function DatagridToolbar(datagridState) {
   var DatagridActions = datagridState.DatagridActions,

package/lib/components/Datagrid/Datagrid/DatagridVirtualBody.js

@@ -17,7 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactWindow = require("react-window");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _settings = require("../../../settings");
 
@@ -30,7 +30,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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; }
 
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-var TableBody = _carbonComponentsReact.DataTable.TableBody;
+var TableBody = _react2.DataTable.TableBody;
 var rowSizeMap = {
   xs: 24,
   sm: 32,

package/lib/components/Datagrid/Datagrid/DraggableElement.js

@@ -140,7 +140,9 @@ var DraggableElement = function DraggableElement(_ref) {
     className: (0, _classnames.default)({
       disabled: disabled
     }, "".concat(blockClass, "__draggable-handleStyle"))
-  }, /*#__PURE__*/React.createElement(_iconsReact.Draggable16, null)), children);
+  }, /*#__PURE__*/React.createElement(_iconsReact.Draggable, {
+    size: 16
+  })), children);
   return /*#__PURE__*/React.createElement("li", {
     className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), (0, _defineProperty2.default)({}, "".concat(blockClass, "__wkc-draggable-handleHolder--grabbed"), isGrabbed), "".concat(blockClass, "__draggable-handleHolder")),
     ref: ref,

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

@@ -11,11 +11,13 @@ exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _iconsReact = require("@carbon/icons-react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react = require("@carbon/react");
 
 var React = _interopRequireWildcard(require("react"));
 
@@ -48,7 +50,7 @@ var Actions = function Actions(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__customize-columns-modal--actions"),
     "test-id": "".concat(blockClass, "__customize-columns-modal--actions")
-  }, /*#__PURE__*/React.createElement(_carbonComponentsReact.Search, {
+  }, /*#__PURE__*/React.createElement(_react.Search, {
     placeholder: findColumnPlaceholderLabel,
     value: searchText,
     size: "sm",
@@ -58,14 +60,18 @@ var Actions = function Actions(_ref) {
       setSearchText(e.target.value);
     },
     "test-id": "".concat(blockClass, "__customize-columns-modal--search")
-  }), /*#__PURE__*/React.createElement(_carbonComponentsReact.Button, {
+  }), /*#__PURE__*/React.createElement(_react.Button, {
     onClick: function onClick() {
       var reset = resetToOriginal(columns, originalColumnDefinitions);
       setColumnsObject(reset);
     },
     size: "sm",
     kind: "ghost",
-    renderIcon: _iconsReact.Reset16,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(_iconsReact.Reset, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
     "test-id": "".concat(blockClass, "__customize-columns-modal--reset")
   }, resetToDefaultLabel));
 };

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

@@ -19,7 +19,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _iconsReact = require("@carbon/icons-react");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _settings = require("../../../../../settings");
 
@@ -38,8 +38,12 @@ var ButtonWrapper = function ButtonWrapper(_ref) {
       _ref$iconTooltipLabel = _ref.iconTooltipLabel,
       iconTooltipLabel = _ref$iconTooltipLabel === void 0 ? 'Customize columns' : _ref$iconTooltipLabel,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, rest, {
-    renderIcon: _iconsReact.Column16,
+  return /*#__PURE__*/React.createElement(_react2.Button, (0, _extends2.default)({}, rest, {
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(_iconsReact.Column, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
     iconDescription: iconTooltipLabel,
     tooltipPosition: "left",
     kind: "ghost",

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

@@ -19,7 +19,7 @@ var _reactDnd = require("react-dnd");
 
 var _reactDndHtml5Backend = require("react-dnd-html5-backend");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
 
@@ -143,7 +143,7 @@ var Columns = function Columns(_ref) {
           }
         }
       }
-    }, /*#__PURE__*/React.createElement(_carbonComponentsReact.Checkbox, {
+    }, /*#__PURE__*/React.createElement(_react2.Checkbox, {
       wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox"),
       checked: (0, _common.isColumnVisible)(colDef),
       onChange: onSelectColumn.bind(null, colDef),

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

@@ -17,7 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _common = require("./common");
 
@@ -122,7 +122,7 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
   };
 
   var string = searchText.trim().toLowerCase();
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Modal, {
+  return /*#__PURE__*/_react.default.createElement(_react2.Modal, {
     className: "".concat(blockClass, "__customize-columns-modal"),
     open: isOpen,
     modalHeading: customizeModalHeadingLabel,

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

@@ -23,7 +23,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _iconsReact = require("@carbon/icons-react");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -50,19 +50,19 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
       isOpen = _React$useState2[0],
       setIsOpen = _React$useState2[1];
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_carbonComponentsReact.Button, {
-    hasIconOnly: true,
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_react2.IconButton, {
     ref: buttonRef,
     kind: "ghost",
-    tooltipPosition: "left",
-    renderIcon: _iconsReact.Settings16,
+    align: "left",
     onClick: function onClick() {
       return setIsOpen(!isOpen);
     },
-    iconDescription: buttonLabel,
-    className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
-  }), isOpen && /*#__PURE__*/React.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {
-    buttonRef: buttonRef,
+    label: buttonLabel,
+    className: (0, _classnames.default)("".concat(blockClass, "__row-size-button"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__row-size-button--open"), isOpen))
+  }, /*#__PURE__*/React.createElement(_iconsReact.Settings, {
+    size: 16
+  })), isOpen && /*#__PURE__*/React.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {
+    ref: buttonRef,
     hideRadioGroup: function hideRadioGroup() {
       setIsOpen(false);
     }

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

@@ -13,7 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _isArray = _interopRequireDefault(require("lodash/isArray"));
 
@@ -34,12 +34,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-
-var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
+var RowSizeRadioGroup = /*#__PURE__*/(0, _react.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,
@@ -53,7 +51,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;
 
@@ -73,7 +89,7 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
     onClick: function onClick(e) {
       e.stopPropagation();
     }
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButtonGroup, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.RadioButtonGroup, {
     legendText: legendText,
     name: "row-height-group",
     orientation: "vertical",
@@ -88,14 +104,14 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
       labelText = option.value;
     }
 
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
+    return /*#__PURE__*/_react.default.createElement(_react2.RadioButton, {
       key: option.value,
       labelText: labelText,
       value: option.value,
       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
@@ -109,24 +125,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
@@ -147,7 +145,6 @@ RowSizeRadioGroup.defaultProps = {
   selectedOption: 'lg'
 };
 RowSizeRadioGroup.propTypes = {
-  buttonRef: _propTypes.default.any.isRequired,
   datagridName: _propTypes.default.string,
   hideRadioGroup: _propTypes.default.func.isRequired,
   legendText: _propTypes.default.string,

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "CustomizeColumnStory", {
+Object.defineProperty(exports, "CustomizeColumnStoryNotes", {
   enumerable: true,
   get: function get() {
     return _CustomizeColumnStory.story;
@@ -23,7 +23,7 @@ Object.defineProperty(exports, "RowSizeDropdownStory", {
     return _RowSizeDropdownStory.story;
   }
 });
-Object.defineProperty(exports, "SelectAllWitHToggle", {
+Object.defineProperty(exports, "SelectAllWithToggle", {
   enumerable: true,
   get: function get() {
     return _SelectAllWithToggleStory.story;

package/lib/components/Datagrid/useActionsColumn.js

@@ -17,7 +17,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _settings = require("../../settings");
 
@@ -41,9 +41,9 @@ var useActionsColumn = function useActionsColumn(hooks) {
           return [props, {
             children: /*#__PURE__*/_react.default.createElement("div", {
               className: "".concat(blockClass, "__actions-column-content")
-            }, isFetching && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.IconSkeleton, {
+            }, isFetching && /*#__PURE__*/_react.default.createElement(_react2.IconSkeleton, {
               className: "".concat(blockClass, "__actions-column-loading")
-            }), !isFetching && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
+            }), !isFetching && /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
               size: "sm",
               light: true,
               flipped: true,
@@ -66,7 +66,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
                 return null;
               }
 
-              return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenuItem, (0, _extends2.default)({}, rest, {
+              return /*#__PURE__*/_react.default.createElement(_react2.OverflowMenuItem, (0, _extends2.default)({}, rest, {
                 disabled: isDisabledByRow,
                 onClick: function onClick(e) {
                   e.stopPropagation();

package/lib/components/Datagrid/useRowExpander.js

@@ -28,7 +28,11 @@ var useRowExpander = function useRowExpander(hooks) {
       id: 'expander',
       Cell: function Cell(_ref) {
         var row = _ref.row;
-        return row.canExpand && /*#__PURE__*/_react.default.createElement("span", row.getToggleRowExpandedProps(), row.isExpanded ? /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronUp16, null) : /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDown16, null));
+        return row.canExpand && /*#__PURE__*/_react.default.createElement("span", row.getToggleRowExpandedProps(), row.isExpanded ? /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronUp, {
+          size: 16
+        }) : /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDown, {
+          size: 16
+        }));
       },
       width: 48,
       disableResizing: true,

package/lib/components/Datagrid/useSelectRows.js

@@ -19,7 +19,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _DatagridSelectAll = require("./Datagrid/DatagridSelectAll");
 
@@ -33,6 +33,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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; }
 
+var TableSelectRow = _react2.DataTable.TableSelectRow;
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 
 var useSelectRows = function useSelectRows(hooks) {
@@ -68,7 +69,7 @@ var useHighlightSelection = function useHighlightSelection(hooks) {
   var getRowProps = function getRowProps(props, _ref) {
     var row = _ref.row;
     return [props, {
-      className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? 'bx--data-table--selected' : '')
+      className: (0, _classnames.default)("".concat(blockClass, "__carbon-row"), row.getToggleRowSelectedProps().checked ? "".concat(_settings.carbon.prefix, "--data-table--selected") : '')
     }];
   };
 
@@ -91,7 +92,7 @@ var SelectRow = function SelectRow(datagridState) {
       selectProps = (0, _objectWithoutProperties2.default)(_row$getToggleRowSele, _excluded);
 
   var cellProps = cell.getCellProps();
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TableSelectRow, (0, _extends2.default)({}, cellProps, selectProps, {
+  return /*#__PURE__*/_react.default.createElement(TableSelectRow, (0, _extends2.default)({}, cellProps, selectProps, {
     radio: radio,
     onSelect: function onSelect(e) {
       e.stopPropagation(); // avoid triggering onRowClick

package/lib/components/Datagrid/useSortableColumns.js

@@ -11,9 +11,11 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _iconsReact = require("@carbon/icons-react");
 
@@ -48,30 +50,40 @@ 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 _iconsReact.ArrowUp16;
+              return /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowUp, (0, _extends2.default)({
+                size: 16
+              }, props));
 
             case true:
-              return _iconsReact.ArrowDown16;
+              return /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowDown, (0, _extends2.default)({
+                size: 16
+              }, props));
 
             default:
-              return _iconsReact.Arrows16;
+              return /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowsVertical, (0, _extends2.default)({
+                size: 16
+              }, props));
           }
         }
 
-        return _iconsReact.Arrows16;
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.ArrowsVertical, (0, _extends2.default)({
+          size: 16
+        }, props));
       };
 
       var Header = function Header(headerProp) {
-        return column.disableSortBy === true ? column.Header : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+        return column.disableSortBy === true ? column.Header : /*#__PURE__*/_react.default.createElement(_react2.Button, {
           onClick: function onClick() {
             return onSortClick(headerProp.column);
           },
           kind: "ghost",
-          renderIcon: icon(headerProp.column)
+          renderIcon: function renderIcon(props) {
+            return icon(headerProp.column, props);
+          }
         }, column.Header);
       };
 

package/lib/components/EditSidePanel/EditSidePanel.js

@@ -23,7 +23,7 @@ var _devtools = require("../../global/js/utils/devtools");
 
 var _settings = require("../../settings");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _SidePanel = require("../SidePanel");
 
@@ -103,7 +103,7 @@ var EditSidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     className: "".concat(blockClass, "__form-title-text ").concat(blockClass, "__content-text")
   }, formTitle), formDescription && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__form-description-text ").concat(blockClass, "__content-text")
-  }, formDescription), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, {
+  }, formDescription), /*#__PURE__*/_react.default.createElement(_react2.Form, {
     className: "".concat(blockClass, "__form")
   }, children));
 }); // Return a placeholder if not released and not enabled by feature flag
@@ -193,7 +193,7 @@ EditSidePanel.propTypes = {
   /**
    * Sets the size of the side panel
    */
-  size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'max']),
+  size: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', '2xl']),
 
   /**
    * Specifies which DOM element in the form should be focused.

package/lib/components/EditTearsheet/EditTearsheet.js

@@ -21,7 +21,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _settings = require("../../settings");
 
@@ -91,13 +91,13 @@ var EditTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
 
   var influencer = /*#__PURE__*/_react.default.createElement("div", {
     className: "tearsheet-stories__dummy-influencer-block"
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.SideNav, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.SideNav, {
     "aria-label": "Side navigation",
     className: "".concat(blockClass, "__side-nav"),
     expanded: true,
     isFixedNav: false
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.SideNavItems, null, sideNavItems.map(function (item, index) {
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.SideNavMenuItem, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.SideNavItems, null, sideNavItems.map(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement(_react2.SideNavMenuItem, {
       key: index,
       onClick: function onClick() {
         return handleCurrentForm(index);
@@ -133,7 +133,7 @@ var EditTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     className: "".concat(blockClass, "__content"),
     ref: contentRef,
     role: "main"
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Grid, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, null, /*#__PURE__*/_react.default.createElement(FormContext.Provider, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Grid, null, /*#__PURE__*/_react.default.createElement(_react2.Form, null, /*#__PURE__*/_react.default.createElement(FormContext.Provider, {
     value: {
       currentForm: currentForm
     }

package/lib/components/EditTearsheet/EditTearsheetForm.js

@@ -21,7 +21,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _EditTearsheet = require("./EditTearsheet");
 
@@ -58,7 +58,9 @@ var EditTearsheetForm = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
   return formContext ? /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__form--hidden-form"), formNumber !== (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__form--visible-form"), formNumber === (formContext === null || formContext === void 0 ? void 0 : formContext.currentForm)), _cx)),
     ref: ref
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.Grid, {
+    narrow: true
+  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     xlg: 12,
     lg: 12,
     md: 8,
@@ -69,7 +71,7 @@ var EditTearsheetForm = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     className: "".concat(blockClass, "--subtitle")
   }, subtitle), description && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "--description")
-  }, description))), hasFieldset ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FormGroup, {
+  }, description))), hasFieldset ? /*#__PURE__*/_react.default.createElement(_react2.FormGroup, {
     legendText: fieldsetLegendText,
     className: "".concat(blockClass, "--fieldset")
   }, children) : children) : _pconsole.default.warn("You have tried using a ".concat(componentName, " component outside of a EditTearsheet. This is not allowed. ").concat(componentName, "s should always be children of the EditTearsheet"));