@carbon/ibm-products 1.27.0 → 2.0.0-rc.2

package/lib/components/CreateTearsheet/preview-components/MultiStepWithIntro.js

@@ -13,7 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -116,7 +116,7 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     setSelectedCategory('standard');
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     onClick: function onClick() {
       return setOpen(!open);
     }
@@ -145,7 +145,7 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     subtitle: "This is the category of item you will create",
     introStep: true,
     hasFieldset: false
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TileGroup, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TileGroup, {
     defaultSelected: selectedCategory,
     legend: "Categories",
     name: "Select a category",
@@ -153,7 +153,7 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
       return setSelectedCategory(value);
     },
     valueSelected: selectedCategory
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioTile, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.RadioTile, {
     className: "".concat(_settings.pkg.prefix, "--tearsheet-create-multi-step--custom-tile"),
     value: "standard",
     id: "tile-1"
@@ -161,7 +161,7 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     size: "lg"
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(_settings.pkg.prefix, "--tearsheet-create-multi-step--custom-tile-label")
-  }, "Standard")), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioTile, {
+  }, "Standard")), /*#__PURE__*/_react.default.createElement(_react2.RadioTile, {
     className: "".concat(_settings.pkg.prefix, "--tearsheet-create-multi-step--custom-tile"),
     value: "premium",
     id: "tile-2"
@@ -169,7 +169,7 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     size: "lg"
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(_settings.pkg.prefix, "--tearsheet-create-multi-step--custom-tile-label")
-  }, "Premium")), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioTile, {
+  }, "Premium")), /*#__PURE__*/_react.default.createElement(_react2.RadioTile, {
     className: "".concat(_settings.pkg.prefix, "--tearsheet-create-multi-step--custom-tile"),
     value: "plus",
     id: "tile-3"
@@ -207,12 +207,14 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     disableSubmit: !stepOneTextInputValue,
     subtitle: "This is the unique name used to recognize your topic",
     description: "It will also be used by your producers and consumers as part of the connection information, so make it something easy to recognize."
-  }, /*#__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: 8,
     lg: 8,
     md: 8,
     sm: 8
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     labelText: "Topic name",
     id: "tearsheet-multi-step-story-text-input-multi-step-1",
     value: stepOneTextInputValue,
@@ -227,7 +229,7 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     invalid: isInvalid,
     invalidText: "This is a required field",
     onBlur: function onBlur() {}
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     labelText: "Topic description (optional)",
     id: "tearsheet-multi-step-story-text-input-multi-step-1-input-2",
     value: topicDescriptionValue,
@@ -235,7 +237,7 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     onChange: function onChange(event) {
       return setTopicDescriptionValue(event.target.value);
     }
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     labelText: "Topic version (optional)",
     id: "tearsheet-multi-step-story-text-input-multi-step-1-input-3",
     value: topicVersionValue,
@@ -243,14 +245,14 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     onChange: function onChange(event) {
       return setTopicVersionValue(event.target.value);
     }
-  }), hasSubmitError && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.InlineNotification, {
+  }), hasSubmitError && /*#__PURE__*/_react.default.createElement(_react2.InlineNotification, {
     kind: "error",
     title: "Error",
     subtitle: "Resolve errors to continue",
     onClose: function onClose() {
       return setHasSubmitError(false);
     }
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Toggle, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.Toggle, {
     className: "".concat(blockClass, "__error--toggle"),
     id: "simulated-error-toggle",
     size: "sm",
@@ -264,10 +266,13 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     subtitle: "One or more partitions make up a topic. A partition is an ordered list of messages.",
     description: "Partitions are distributed across the brokers in order to increase the scalability of your topic. You can also use them to distribute messages across the members of a consumer group.",
     fieldsetLegendText: "Partition information"
-  }, /*#__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: 3,
     lg: 3
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.NumberInput, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.NumberInput, {
+    iconDescription: "Choose a number",
     id: "carbon-number",
     min: 1,
     max: 100,
@@ -287,12 +292,14 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     subtitle: "This is how long messages are retained before they are deleted.",
     description: "If your messages are not read by a consumer within this time, they will be missed.",
     fieldsetLegendText: "Message retention scheduling"
-  }, /*#__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: 8,
     lg: 8,
     md: 8,
     sm: 8
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButtonGroup, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.RadioButtonGroup, {
     legendText: "Message retention",
     name: "radio-button-group",
     defaultSelected: stepThreeTextInputValue,
@@ -300,15 +307,15 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
       return setStepThreeTextInputValue(value);
     },
     orientation: "vertical"
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.RadioButton, {
     labelText: "A day",
     value: "one-day",
     id: "one-day"
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.RadioButton, {
     labelText: "A week",
     value: "one-week",
     id: "one-week"
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.RadioButton, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.RadioButton, {
     labelText: "A month",
     value: "one-month",
     id: "one-month"

package/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.js

@@ -17,7 +17,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _devtools = require("../../global/js/utils/devtools");
 
@@ -82,7 +82,7 @@ var CreateTearsheetNarrow = /*#__PURE__*/_react.default.forwardRef(function (_re
     className: (0, _classnames.default)("".concat(blockClass, "__form-title-text"), formTextClass)
   }, formTitle), /*#__PURE__*/_react.default.createElement("p", {
     className: (0, _classnames.default)("".concat(blockClass, "__form-description-text"), formTextClass)
-  }, 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

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -27,8 +27,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
-
 var _settings = require("../../settings");
 
 var _DataSpreadsheetBody = require("./DataSpreadsheetBody");
@@ -859,7 +857,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     ref: activeCellRef,
     className: (0, _classnames.default)("".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__active-cell--highlight"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__active-cell--with-selection"), activeCellInsideSelectionArea)),
     type: "button"
-  }, activeCellContent), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextArea, {
+  }, activeCellContent), /*#__PURE__*/_react.default.createElement("textarea", {
     value: cellEditorValue,
     onKeyDown: (0, _handleEditSubmit.handleEditSubmit)({
       activeCellCoordinates: activeCellCoordinates,
@@ -879,7 +877,6 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
       cellEditorRulerRef.current.textContent = event.target.value;
     },
     ref: cellEditorRef,
-    labelText: "",
     "aria-labelledby": activeCellCoordinates ? "#".concat(blockClass, "__cell--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.row, "--").concat(activeCellCoordinates === null || activeCellCoordinates === void 0 ? void 0 : activeCellCoordinates.column) : null,
     className: (0, _classnames.default)("".concat(blockClass, "__cell-editor"), "".concat(blockClass, "--interactive-cell-element"), "".concat(blockClass, "__cell-editor--").concat(cellSize), (0, _defineProperty2.default)({}, "".concat(blockClass, "__cell-editor--active"), isEditing))
   }), /*#__PURE__*/_react.default.createElement("pre", {

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

@@ -17,7 +17,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -36,8 +36,8 @@ var _pconsole = _interopRequireDefault(require("../../../global/js/utils/pconsol
 var _excluded = ["datagridState"];
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var componentName = 'Datagrid';
-var TableContainer = _carbonComponentsReact.DataTable.TableContainer,
-    Table = _carbonComponentsReact.DataTable.Table;
+var TableContainer = _react2.DataTable.TableContainer,
+    Table = _react2.DataTable.Table;
 
 var Datagrid = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _getTableProps;

package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js

@@ -13,7 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _settings = require("../../../settings");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _NoDataEmptyState = require("../../EmptyStates/NoDataEmptyState");
 
@@ -25,9 +25,9 @@ var _NoDataEmptyState = require("../../EmptyStates/NoDataEmptyState");
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-var TableBody = _carbonComponentsReact.DataTable.TableBody,
-    TableRow = _carbonComponentsReact.DataTable.TableRow,
-    TableCell = _carbonComponentsReact.DataTable.TableCell;
+var TableBody = _react2.DataTable.TableBody,
+    TableRow = _react2.DataTable.TableRow,
+    TableCell = _react2.DataTable.TableCell;
 
 var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {
   var getTableBodyProps = datagridState.getTableBodyProps,

package/lib/components/Datagrid/Datagrid/DatagridHead.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");
 
 /**
  * Copyright IBM Corp. 2020, 2022
@@ -17,7 +17,7 @@ var _carbonComponentsReact = require("carbon-components-react");
  * 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 TableHead = _carbonComponentsReact.DataTable.TableHead;
+var TableHead = _react2.DataTable.TableHead;
 
 var DatagridHead = function DatagridHead(datagridState) {
   var _datagridState$header = datagridState.headerGroups,

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _commonColumnIds = require("../common-column-ids");
 
@@ -56,8 +56,8 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   }));
 };
 
-var TableHeader = _carbonComponentsReact.DataTable.TableHeader,
-    TableRow = _carbonComponentsReact.DataTable.TableRow;
+var TableHeader = _react2.DataTable.TableHeader,
+    TableRow = _react2.DataTable.TableRow;
 
 var useHeaderRow = function useHeaderRow(hooks) {
   var useInstance = function useInstance(instance) {

package/lib/components/Datagrid/Datagrid/DatagridRow.js

@@ -15,7 +15,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 _commonColumnIds = require("../common-column-ids");
 
@@ -25,8 +25,8 @@ var _settings = require("../../../settings");
 
 var _excluded = ["children"];
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-var TableRow = _carbonComponentsReact.DataTable.TableRow,
-    TableCell = _carbonComponentsReact.DataTable.TableCell; // eslint-disable-next-line react/prop-types
+var TableRow = _react2.DataTable.TableRow,
+    TableCell = _react2.DataTable.TableCell; // eslint-disable-next-line react/prop-types
 
 var DatagridRow = function DatagridRow(datagridState) {
   var _cx;
@@ -49,7 +49,7 @@ var DatagridRow = function DatagridRow(datagridState) {
     var children = cellProps.children,
         restProps = (0, _objectWithoutProperties2.default)(cellProps, _excluded);
 
-    var content = children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.SkeletonText, null));
+    var content = children || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !row.isSkeleton && cell.render('Cell'), row.isSkeleton && /*#__PURE__*/_react.default.createElement(_react2.SkeletonText, null));
 
     if (cell && cell.column && cell.column.id === _commonColumnIds.selectionColumnId) {
       // directly render component without the wrapping TableCell

package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js

@@ -13,7 +13,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _settings = require("../../../settings");
 
@@ -52,4 +52,4 @@ var SelectAll = function SelectAll(datagridState) {
 };
 
 exports.SelectAll = SelectAll;
-var TableSelectAll = _carbonComponentsReact.DataTable.TableSelectAll;
+var TableSelectAll = _react2.DataTable.TableSelectAll;

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

@@ -17,7 +17,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _iconsReact = require("@carbon/icons-react");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _reactResizeDetector = require("react-resize-detector");
 
@@ -38,7 +38,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * LICENSE file in the root directory of this source tree.
  */
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
-var TableToolbar = _carbonComponentsReact.DataTable.TableToolbar;
+var TableToolbar = _react2.DataTable.TableToolbar;
 
 var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridState, width, ref) {
   var _useState = (0, _react.useState)(false),
@@ -90,7 +90,7 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
 
     return /*#__PURE__*/_react.default.createElement(_ButtonMenu.ButtonMenu, {
       label: width > minWidthBeforeOverflowIcon ? 'More' : null,
-      renderIcon: width > minWidthBeforeOverflowIcon ? _iconsReact.Add16 : _iconsReact.OverflowMenuVertical16,
+      renderIcon: width > minWidthBeforeOverflowIcon ? _iconsReact.Add : _iconsReact.OverflowMenuVertical,
       className: (0, _classnames.default)("".concat(blockClass, "__button-menu"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__button-menu--icon-only"), width <= minWidthBeforeOverflowIcon)),
       menuOptionsClass: "".concat(blockClass, "__button-menu-options"),
       flipped: true
@@ -130,7 +130,7 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
   // 3 batch actions
 
 
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TableBatchActions, {
+  return /*#__PURE__*/_react.default.createElement(_react2.TableBatchActions, {
     shouldShowBatchActions: totalSelected > 0,
     totalSelected: totalSelected,
     onCancel: function onCancel() {
@@ -138,7 +138,7 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     }
   }, !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.default.createElement(_carbonComponentsReact.TableBatchAction, {
+      return /*#__PURE__*/_react.default.createElement(_react2.TableBatchAction, {
         key: "".concat(batchAction.label, "-").concat(index),
         renderIcon: batchAction.renderIcon,
         onClick: function onClick() {
@@ -165,9 +165,9 @@ var DatagridToolbar = function DatagridToolbar(datagridState) {
   return batchActions && DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
     ref: ref,
     className: "".concat(blockClass, "__table-toolbar")
-  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : DatagridActions ? /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActionsToolbar && DatagridBatchActionsToolbar(datagridState, width, ref))) : /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__table-toolbar")
-  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState))) : null;
+  }, /*#__PURE__*/_react.default.createElement(TableToolbar, null, DatagridActions && DatagridActions(datagridState), DatagridBatchActions && DatagridBatchActions(datagridState)));
 };
 
 var _default = DatagridToolbar;

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);
     }