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

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,7 +41,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
           return [props, {
             children: /*#__PURE__*/_react.default.createElement("div", {
               className: "".concat(blockClass, "__actions-column-contents")
-            }, isFetching && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.IconSkeleton, {
+            }, isFetching && /*#__PURE__*/_react.default.createElement(_react2.IconSkeleton, {
               className: "".concat(blockClass, "__actions-column-loading")
             }), !isFetching && rowActions.length <= 2 && /*#__PURE__*/_react.default.createElement("div", {
               className: "".concat(blockClass, "_actions-column"),
@@ -56,7 +56,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
               return /*#__PURE__*/_react.default.createElement("div", {
                 className: "".concat(blockClass, "__actions-column-button"),
                 key: ""
-              }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
+              }, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
                 renderIcon: icon,
                 hasIconOnly: true,
                 light: true,
@@ -68,7 +68,7 @@ var useActionsColumn = function useActionsColumn(hooks) {
                   _onClick(id, row, e);
                 }
               }));
-            })), !isFetching && rowActions.length > 2 && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.OverflowMenu, {
+            })), !isFetching && rowActions.length > 2 && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_react2.OverflowMenu, {
               size: "sm",
               light: true,
               flipped: true,
@@ -91,7 +91,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) {
@@ -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"));

package/lib/components/EditTearsheet/preview-components/MultiFormEditTearsheet.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"));
 
@@ -107,7 +107,7 @@ var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
     setOpen(!open);
   };
 
-  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: handleModalClick
   }, open ? 'Close EditTearsheet' : 'Open EditTearsheet'), /*#__PURE__*/_react.default.createElement(_EditTearsheet.EditTearsheet, {
     influencerWidth: influencerWidth,
@@ -125,12 +125,12 @@ var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
     fieldsetLegendText: "Topic information",
     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.Column, {
     xlg: 8,
     lg: 8,
     md: 8,
     sm: 8
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     labelText: "Topic name",
     placeholder: "Enter topic name",
     id: "tearsheet-multi-form-story-text-input-multi-form-1",
@@ -149,7 +149,7 @@ var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
         setIsInvalid(true);
       }
     }
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     labelText: "Topic description (optional)",
     id: "tearsheet-multi-form-story-text-input-multi-form-1-input-2",
     value: topicDescriptionValue,
@@ -157,7 +157,7 @@ var MultiFormEditTearsheet = function MultiFormEditTearsheet(_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-form-story-text-input-multi-form-1-input-3",
     value: topicVersionValue,
@@ -165,14 +165,14 @@ var MultiFormEditTearsheet = function MultiFormEditTearsheet(_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(!hasSubmitError);
     }
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Toggle, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.Toggle, {
     className: "".concat(blockClass, "__error--toggle"),
     id: "simulated-error-toggle",
     size: "sm",
@@ -181,17 +181,17 @@ var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
       return setHasSubmitError(!hasSubmitError);
     },
     toggled: hasSubmitError
-  })))), /*#__PURE__*/_react.default.createElement(_EditTearsheetForm.EditTearsheetForm, {
+  }))), /*#__PURE__*/_react.default.createElement(_EditTearsheetForm.EditTearsheetForm, {
     title: "Location",
     subtitle: "Custom form subtitle",
     fieldsetLegendText: "",
     description: "Custom form description (see storybook implementation for new custom form capability)"
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+  }, /*#__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, {
     value: topicLocationValue,
     onChange: function onChange(event) {
       return setTopicLocationValue(event.target.value);
@@ -199,15 +199,15 @@ var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
     id: "custom-form-input",
     labelText: "Location",
     placeholder: "Enter location"
-  })))), /*#__PURE__*/_react.default.createElement(_EditTearsheetForm.EditTearsheetForm, {
+  }))), /*#__PURE__*/_react.default.createElement(_EditTearsheetForm.EditTearsheetForm, {
     title: "Partitions",
     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.Column, {
     xlg: 3,
     lg: 3
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.NumberInput, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.NumberInput, {
     id: "carbon-number",
     min: 1,
     max: 100,
@@ -218,17 +218,17 @@ var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
     onChange: function onChange(event) {
       return setFormTwoTextInputValue(event.imaginaryTarget.value);
     }
-  })))), /*#__PURE__*/_react.default.createElement(_EditTearsheetForm.EditTearsheetForm, {
+  }))), /*#__PURE__*/_react.default.createElement(_EditTearsheetForm.EditTearsheetForm, {
     title: "Message retention",
     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.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: formThreeTextInputValue,
@@ -236,19 +236,19 @@ var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
       return setFormThreeTextInputValue(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"
-  })))))));
+  }))))));
 };
 
 exports.MultiFormEditTearsheet = MultiFormEditTearsheet;

package/lib/components/EmptyStates/EmptyState.js

@@ -19,7 +19,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");
 
@@ -83,10 +83,10 @@ EmptyState.propTypes = {
   /**
    * Empty state action button
    */
-  action: _propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
+  action: _propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Button.propTypes), {}, {
     kind: _propTypes.default.oneOf(['primary', 'secondary', 'tertiary']),
     renderIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-    onClick: _carbonComponentsReact.Button.propTypes.onClick,
+    onClick: _react2.Button.propTypes.onClick,
     text: _propTypes.default.string
   })),
 
@@ -112,7 +112,7 @@ EmptyState.propTypes = {
   /**
    * Empty state link object
    */
-  link: _propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Link.propTypes), {}, {
+  link: _propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Link.propTypes), {}, {
     text: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
     href: _propTypes.default.string
   })),

package/lib/components/EmptyStates/EmptyStateContent.js

@@ -19,7 +19,7 @@ var _settings = require("../../settings");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 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; }
 
@@ -39,13 +39,13 @@ var EmptyStateContent = function EmptyStateContent(_ref) {
     className: (0, _classnames.default)("".concat(blockClass, "__header"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__header--small"), size === 'sm'))
   }, title), subtitle && /*#__PURE__*/_react.default.createElement("p", {
     className: (0, _classnames.default)("".concat(blockClass, "__subtitle"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__subtitle--small"), size === 'sm'))
-  }, subtitle), (action === null || action === void 0 ? void 0 : action.text) && (action === null || action === void 0 ? void 0 : action.onClick) && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, action, {
+  }, subtitle), (action === null || action === void 0 ? void 0 : action.text) && (action === null || action === void 0 ? void 0 : action.onClick) && /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({}, action, {
     className: "".concat(blockClass, "__action-button"),
     kind: action.kind || 'tertiary',
     onClick: action.onClick,
     renderIcon: action.renderIcon || null,
     size: 'sm'
-  }), action.text), (link === null || link === void 0 ? void 0 : link.text) && (link === null || link === void 0 ? void 0 : link.href) && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Link, (0, _extends2.default)({}, link, {
+  }), action.text), (link === null || link === void 0 ? void 0 : link.text) && (link === null || link === void 0 ? void 0 : link.href) && /*#__PURE__*/_react.default.createElement(_react2.Link, (0, _extends2.default)({}, link, {
     className: "".concat(blockClass, "__link"),
     href: link.href
   }), link.text));
@@ -62,18 +62,18 @@ EmptyStateContent.propTypes = {
   /**
    * Empty state action button
    */
-  action: _propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
+  action: _propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Button.propTypes), {}, {
     iconDescription: _propTypes.default.string,
     kind: _propTypes.default.oneOf(['primary', 'secondary', 'tertiary']),
     renderIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-    onClick: _carbonComponentsReact.Button.propTypes.onClick,
+    onClick: _react2.Button.propTypes.onClick,
     text: _propTypes.default.string
   })),
 
   /**
    * Empty state link object
    */
-  link: _propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Link.propTypes), {}, {
+  link: _propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Link.propTypes), {}, {
     text: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
     href: _propTypes.default.string
   })),

package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.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"));
 
@@ -79,10 +79,10 @@ ErrorEmptyState.propTypes = {
   /**
    * Empty state action button
    */
-  action: _propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
+  action: _propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Button.propTypes), {}, {
     kind: _propTypes.default.oneOf(['primary', 'secondary', 'tertiary']),
     renderIcon: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
-    onClick: _carbonComponentsReact.Button.propTypes.onClick,
+    onClick: _react2.Button.propTypes.onClick,
     text: _propTypes.default.string
   })),
 
@@ -102,7 +102,7 @@ ErrorEmptyState.propTypes = {
   /**
    * Empty state link object
    */
-  link: _propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Link.propTypes), {}, {
+  link: _propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Link.propTypes), {}, {
     text: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
     href: _propTypes.default.string
   })),