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

package/lib/components/ModifiedTabs/ModifiedTabs.js

@@ -13,7 +13,9 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react2 = require("@carbon/react");
 
 var _ModifiedTabLabelWithClose = require("./ModifiedTabLabelWithClose");
 
@@ -31,23 +33,19 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 // 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 blockClass = "".concat(_settings.pkg.prefix, "--modified-tabs");
 var componentName = 'ModifiedTabs'; // Default values for props
 
 var defaults = {
-  tabs: [{
-    id: 'tab-1',
-    label: 'Tab 1',
-    content: /*#__PURE__*/_react.default.createElement("div", null, "Iam am the content of tab 1."),
-    unsavedContent: false
-  }],
   newTabLabel: 'New tab',
   newTabContent: 'Your new tab will be here soon',
   onNewTab: undefined,
-  onCloseTab: undefined
+  onCloseTab: undefined,
+  tabs: []
 };
-
-var ModifiedTabs = function ModifiedTabs(_ref) {
-  var _ref$tabs = _ref.tabs,
+var ModifiedTabs = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var className = _ref.className,
+      _ref$tabs = _ref.tabs,
       tabs = _ref$tabs === void 0 ? defaults.tabs : _ref$tabs,
       _ref$newTabLabel = _ref.newTabLabel,
       newTabLabel = _ref$newTabLabel === void 0 ? defaults.newTabLabel : _ref$newTabLabel,
@@ -56,18 +54,19 @@ var ModifiedTabs = function ModifiedTabs(_ref) {
       _ref$onNewTab = _ref.onNewTab,
       onNewTab = _ref$onNewTab === void 0 ? defaults.onNewTab : _ref$onNewTab,
       _ref$onCloseTab = _ref.onCloseTab,
-      onCloseTab = _ref$onCloseTab === void 0 ? defaults.onCloseTab : _ref$onCloseTab;
+      onCloseTab = _ref$onCloseTab === void 0 ? defaults.onCloseTab : _ref$onCloseTab,
+      tabListAriaLabel = _ref.tabListAriaLabel;
+  var tabsRef = (0, _react.useRef)();
+  var localRef = ref || tabsRef;
 
   var handleNewTab = function handleNewTab() {
     if (onNewTab) {
       onNewTab();
       setTimeout(function () {
         // set focus to the new tab
-        var tab = tabsRef.current.getTabAt(tabs.length);
-
-        if (tab & tab.tabAnchor) {
-          tab.tabAnchor.focus();
-        }
+        var addNewTabButton = localRef.current.querySelector(".".concat(blockClass, "__tab-new"));
+        var tab = addNewTabButton === null || addNewTabButton === void 0 ? void 0 : addNewTabButton.previousSibling;
+        tab === null || tab === void 0 ? void 0 : tab.focus();
       });
     }
   };
@@ -78,43 +77,55 @@ var ModifiedTabs = function ModifiedTabs(_ref) {
     }
   };
 
-  var tabsRef = (0, _react.useRef)(null);
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tabs, {
-    className: "modified-tabs",
-    ref: tabsRef
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(blockClass, className),
+    ref: localRef
+  }, /*#__PURE__*/_react.default.createElement(_react2.Tabs, {
+    className: "modified-tabs"
+  }, /*#__PURE__*/_react.default.createElement(_react2.TabList, {
+    "aria-label": tabListAriaLabel
   }, tabs.map(function (tab) {
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tab, {
-      id: tab.id,
-      key: tab.id,
-      label: /*#__PURE__*/_react.default.createElement(_ModifiedTabLabelWithClose.ModifiedTabLabelWithClose, {
-        label: tab.label,
-        onClose: function onClose() {
-          return handleClose(tab.id);
-        },
-        unsavedContent: tab.unsavedContent
-      })
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "some-content"
-    }, tab.content));
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tab, {
+    return /*#__PURE__*/_react.default.createElement(_react2.Tab, {
+      key: tab.id
+    }, /*#__PURE__*/_react.default.createElement(_ModifiedTabLabelWithClose.ModifiedTabLabelWithClose, {
+      label: tab.label,
+      onClose: function onClose() {
+        return handleClose(tab.id);
+      },
+      unsavedContent: tab.unsavedContent
+    }));
+  }), /*#__PURE__*/_react.default.createElement(_react2.Tab, {
     id: "modified-tabs__tab-new",
-    label: /*#__PURE__*/_react.default.createElement(_ModifiedTabLabelNew.ModifiedTabLabelNew, {
-      label: newTabLabel
-    }),
     onClick: handleNewTab,
     onKeyUp: function onKeyUp(ev) {
       return ev.keyCode === 32 && handleNewTab();
     },
-    role: "button"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "some-content"
-  }, newTabContent)));
-}; // Return a placeholder if not released and not enabled by feature flag
-
+    role: "button",
+    className: "".concat(blockClass, "__tab-new")
+  }, /*#__PURE__*/_react.default.createElement(_ModifiedTabLabelNew.ModifiedTabLabelNew, {
+    label: newTabLabel
+  }))), /*#__PURE__*/_react.default.createElement(_react2.TabPanels, null, tabs.map(function (tab) {
+    var _tab$content;
+
+    return /*#__PURE__*/_react.default.createElement(_react2.TabPanel, {
+      key: tab.id,
+      id: tab.id
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(blockClass, "__tab-content")
+    }, (_tab$content = tab.content) === null || _tab$content === void 0 ? void 0 : _tab$content.call(tab)));
+  }), /*#__PURE__*/_react.default.createElement(_react2.TabPanel, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__tab-content")
+  }, newTabContent)))));
+}); // Return a placeholder if not released and not enabled by feature flag
 
 exports.ModifiedTabs = ModifiedTabs;
 exports.ModifiedTabs = ModifiedTabs = _settings.pkg.checkComponentEnabled(ModifiedTabs, componentName);
 ModifiedTabs.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string,
+
   /**
    * New tab content
    */
@@ -135,9 +146,19 @@ ModifiedTabs.propTypes = {
    */
   onNewTab: _propTypes.default.func,
 
+  /**
+   * Tab list aria label, passed to Carbon TabList
+   */
+  tabListAriaLabel: _propTypes.default.string.isRequired,
+
   /**
    * Tabs array containing tab object { id, label, content }
    */
-  tabs: _propTypes.default.array
+  tabs: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string,
+    label: _propTypes.default.node,
+    content: _propTypes.default.func,
+    unsavedContent: _propTypes.default.bool
+  })).isRequired
 };
 ModifiedTabs.displayName = componentName;

package/lib/components/MultiAddSelect/MultiAddSelect.js

@@ -105,11 +105,11 @@ MultiAddSelect.propTypes = {
     entries: _propTypes.default.arrayOf(_propTypes.default.shape({
       avatar: _propTypes.default.shape({
         alt: _propTypes.default.string,
-        icon: _propTypes.default.object,
+        icon: _propTypes.default.func,
         src: _propTypes.default.string
       }),
       children: _propTypes.default.object,
-      icon: _propTypes.default.object,
+      icon: _propTypes.default.func,
       id: _propTypes.default.string.isRequired,
       subtitle: _propTypes.default.string,
       title: _propTypes.default.string.isRequired,

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -33,7 +33,7 @@ var _utils = require("./utils");
 
 var _NotificationsEmptyState = require("../EmptyStates/NotificationsEmptyState");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _iconsReact = require("@carbon/icons-react");
 
@@ -246,10 +246,14 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
     var showMoreButtonClassName = (0, _classnames.default)([(_ref3 = {}, (0, _defineProperty2.default)(_ref3, "".concat(blockClass, "__notification-read-less-button"), notification.showAll), (0, _defineProperty2.default)(_ref3, "".concat(blockClass, "__notification-read-more-button"), !notification.showAll), _ref3)]);
     return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
       className: descriptionClassName
-    }, description), description.length > trimLength && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    }, description), description.length > trimLength && /*#__PURE__*/_react.default.createElement(_react2.Button, {
       kind: "ghost",
-      size: "small",
-      renderIcon: _iconsReact.ChevronDown16,
+      size: "sm",
+      renderIcon: function renderIcon(props) {
+        return /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDown, (0, _extends2.default)({
+          size: 16
+        }, props));
+      },
       iconDescription: notification.showAll ? readLessLabel : readMoreLabel,
       onClick: function onClick(event) {
         event.preventDefault();
@@ -289,13 +293,17 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
 
         event.which === 13 && notification.onNotificationClick(notification);
       }
-    }, notification.type === 'error' && /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled16, {
+    }, notification.type === 'error' && /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled, {
+      size: 16,
       className: (0, _classnames.default)(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-error")])
-    }), notification.type === 'success' && /*#__PURE__*/_react.default.createElement(_iconsReact.CheckmarkFilled16, {
+    }), notification.type === 'success' && /*#__PURE__*/_react.default.createElement(_iconsReact.CheckmarkFilled, {
+      size: 16,
       className: (0, _classnames.default)(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-success")])
-    }), notification.type === 'warning' && /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltFilled16, {
+    }), notification.type === 'warning' && /*#__PURE__*/_react.default.createElement(_iconsReact.WarningAltFilled, {
+      size: 16,
       className: (0, _classnames.default)(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-warning")])
-    }), notification.type === 'informational' && /*#__PURE__*/_react.default.createElement(_iconsReact.InformationSquareFilled16, {
+    }), notification.type === 'informational' && /*#__PURE__*/_react.default.createElement(_iconsReact.InformationSquareFilled, {
+      size: 16,
       className: (0, _classnames.default)(["".concat(blockClass, "__notification-status-icon"), "".concat(blockClass, "__notification-status-icon-informational")])
     }), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "__notification-content")
@@ -317,20 +325,21 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
       nowText: nowText
     })), /*#__PURE__*/_react.default.createElement("h6", {
       className: notificationHeaderClassName
-    }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Link, {
+    }, notification.title), notification.description && notification.description.length && renderDescription(notification.id), notification.link && notification.link.text && notification.link.url && /*#__PURE__*/_react.default.createElement(_react2.Link, {
       href: notification.link.url,
       className: "".concat(blockClass, "__notifications-link")
-    }, notification.link.text)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    }, notification.link.text)), /*#__PURE__*/_react.default.createElement(_react2.IconButton, {
+      align: "left",
       kind: "ghost",
-      size: "small",
-      renderIcon: _iconsReact.Close16,
-      iconDescription: dismissSingleNotificationIconDescription,
-      tooltipPosition: "left",
+      size: "sm",
+      label: dismissSingleNotificationIconDescription,
       className: "".concat(blockClass, "__dismiss-single-button"),
       onClick: function onClick(event) {
         return dismissSingleNotification(event, notification);
       }
-    }));
+    }, /*#__PURE__*/_react.default.createElement(_iconsReact.Close, {
+      size: 16
+    })));
   };
 
   var dismissSingleNotification = function dismissSingleNotification(event, notification) {
@@ -354,14 +363,14 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
     className: "".concat(blockClass, "__header-flex")
   }, /*#__PURE__*/_react.default.createElement("h1", {
     className: "".concat(blockClass, "__header")
-  }, title), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
-    size: "small",
+  }, title), /*#__PURE__*/_react.default.createElement(_react2.Button, {
+    size: "sm",
     kind: "ghost",
     className: "".concat(blockClass, "__dismiss-button"),
     onClick: function onClick() {
       return onDismissAllNotifications();
     }
-  }, dismissAllLabel)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Toggle, {
+  }, dismissAllLabel)), /*#__PURE__*/_react.default.createElement(_react2.Toggle, {
     size: "sm",
     className: "".concat(blockClass, "__do-not-disturb-toggle"),
     id: "".concat(blockClass, "__do-not-disturb-toggle-component"),
@@ -371,7 +380,8 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
       return onDoNotDisturbChange(event);
     },
     defaultToggled: doNotDisturbDefaultToggled,
-    "aria-label": doNotDisturbLabel
+    "aria-label": doNotDisturbLabel,
+    labelText: doNotDisturbLabel
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: mainSectionClassName
   }, withinLastDayNotifications && withinLastDayNotifications.length ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h6", {
@@ -392,17 +402,21 @@ var NotificationsPanel = /*#__PURE__*/_react.default.forwardRef(function (_ref,
     subtitle: emptyStateLabel
   })), onViewAllClick && onSettingsClick && allNotifications && allNotifications.length ? /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__bottom-actions")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: "ghost",
     className: "".concat(blockClass, "__view-all-button"),
     onClick: function onClick() {
       return onViewAllClick();
     }
-  }, viewAllLabel(allNotifications.length)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, viewAllLabel(allNotifications.length)), /*#__PURE__*/_react.default.createElement(_react2.Button, {
     kind: "ghost",
-    size: "small",
+    size: "sm",
     className: "".concat(blockClass, "__settings-button"),
-    renderIcon: _iconsReact.Settings16,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_iconsReact.Settings, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
     iconDescription: settingsIconDescription,
     onClick: function onClick() {
       return onSettingsClick();

package/lib/components/OptionsTile/OptionsTile.js

@@ -29,7 +29,7 @@ var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 
 var _settings = require("../../settings");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _iconsReact = require("@carbon/icons-react");
 
@@ -194,15 +194,15 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     var summaryClasses = ["".concat(blockClass, "__summary")];
 
     if (invalid) {
-      Icon = _iconsReact.WarningFilled16;
+      Icon = _iconsReact.WarningFilled;
       text = invalidText;
       summaryClasses.push("".concat(blockClass, "__summary--invalid"));
     } else if (warn) {
-      Icon = _iconsReact.WarningAltFilled16;
+      Icon = _iconsReact.WarningAltFilled;
       text = warnText;
       summaryClasses.push("".concat(blockClass, "__summary--warn"));
     } else if (locked) {
-      Icon = _iconsReact.Locked16;
+      Icon = _iconsReact.Locked;
       summaryClasses.push("".concat(blockClass, "__summary--locked"));
 
       if (!text) {
@@ -225,7 +225,9 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     }, title), text && /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _classnames.default)(summaryClasses),
       "aria-hidden": summaryHidden
-    }, Icon && /*#__PURE__*/_react.default.createElement(Icon, null), /*#__PURE__*/_react.default.createElement("span", {
+    }, Icon && /*#__PURE__*/_react.default.createElement(Icon, {
+      size: 16
+    }), /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(blockClass, "__summary-text")
     }, text)));
   }
@@ -237,7 +239,7 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), enabled !== undefined && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__toggle-container")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Toggle, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Toggle, {
     id: "".concat(id, "-toggle"),
     className: "".concat(blockClass, "__toggle"),
     toggled: enabled,
@@ -246,21 +248,25 @@ var OptionsTile = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     "aria-labelledby": titleId,
     onToggle: onToggle,
     size: "sm",
-    disabled: isLocked
+    disabled: isLocked,
+    labelText: title
   })), isExpandable ? /*#__PURE__*/_react.default.createElement("details", {
     open: isOpen,
     ref: detailsRef
   }, /*#__PURE__*/_react.default.createElement("summary", {
     className: "".concat(blockClass, "__header"),
     onClick: toggle
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDown16, {
+  }, /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronDown, {
+    size: 16,
     className: "".concat(blockClass, "__chevron")
   }), renderTitle()), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__content"),
     ref: contentRef
   }, isLocked && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__locked-text")
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.Locked16, null), lockedText), children)) : /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_iconsReact.Locked, {
+    size: 16
+  }), lockedText), children)) : /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__static-content")
   }, renderTitle()));
 }); // Return a placeholder if not released and not enabled by feature flag

package/lib/components/PageHeader/PageHeader.js

@@ -27,7 +27,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _reactResizeDetector = require("react-resize-detector");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _hooks = require("../../global/js/hooks");
 
@@ -340,7 +340,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     var result = withoutBackground ? 0 : 1;
 
     if (!result && metrics.headerHeight > 0 && (breadcrumbs || actionBarItems || tags || navigation)) {
-      var startAddingAt = parseFloat(_layout.layout05, 10) * parseInt(_layout.baseFontSize);
+      var startAddingAt = parseFloat(_layout.spacing10, 10) * parseInt(_layout.baseFontSize);
       var scrollRemaining = metrics.headerHeight - scrollYValue;
       /* don't know how to test resize */
 
@@ -396,17 +396,17 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     className: (0, _classnames.default)([_PageHeaderUtils.blockClass, "".concat(_PageHeaderUtils.blockClass, "--no-margins-below-row"), className, (_ref6 = {}, (0, _defineProperty2.default)(_ref6, "".concat(_PageHeaderUtils.blockClass, "--has-navigation"), navigation || tags), (0, _defineProperty2.default)(_ref6, "".concat(_PageHeaderUtils.blockClass, "--has-navigation-tags-only"), !navigation && tags), _ref6)]),
     style: pageHeaderStyles,
     ref: headerRef
-  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Grid, {
+  }, (0, _devtools.getDevtoolsProps)(componentName)), /*#__PURE__*/_react.default.createElement(_react2.FlexGrid, {
     fullWidth: fullWidthGrid === true || fullWidthGrid === 'xl',
     narrow: narrowGrid,
     className: (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "--width--xl"), fullWidthGrid === 'xl'))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_PageHeaderUtils.blockClass, "__non-navigation-row-content")
-  }, hasBreadcrumbRow ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, {
+  }, hasBreadcrumbRow ? /*#__PURE__*/_react.default.createElement(_react2.Row, {
     className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--next-to-tabs"), nextToTabsCheck()), (0, _defineProperty2.default)(_cx2, "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--has-breadcrumbs"), breadcrumbs || breadcrumbItemForTitle), (0, _defineProperty2.default)(_cx2, "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--has-action-bar"), hasActionBar || widthIsNarrow), (0, _defineProperty2.default)(_cx2, "".concat(_PageHeaderUtils.blockClass, "__has-page-actions-without-action-bar"), !hasActionBar && !widthIsNarrow && pageActions), _cx2))
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-row--container")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__breadcrumb-column"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__breadcrumb-column--background"), !!breadcrumbs || hasActionBar || widthIsNarrow))
   }, breadcrumbs || breadcrumbItemForTitle ? /*#__PURE__*/_react.default.createElement(_BreadcrumbWithOverflow.BreadcrumbWithOverflow, {
     className: "".concat(_PageHeaderUtils.blockClass, "__breadcrumb"),
@@ -414,7 +414,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     overflowAriaLabel: breadcrumbOverflowAriaLabel,
     breadcrumbs: breadcrumbs && breadcrumbItemForTitle ? breadcrumbs.concat(breadcrumbItemForTitle) : breadcrumbItemForTitle ? [breadcrumbItemForTitle] : breadcrumbs // breadcrumbs may be null or undefined
 
-  }) : null), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+  }) : null), /*#__PURE__*/_react.default.createElement(_react2.Column, {
     className: (0, _classnames.default)(["".concat(_PageHeaderUtils.blockClass, "__action-bar-column ").concat(_PageHeaderUtils.blockClass, "__action-bar-column--background"), (_ref7 = {}, (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--has-page-actions"), pageActions), (0, _defineProperty2.default)(_ref7, "".concat(_PageHeaderUtils.blockClass, "__action-bar-column--influenced-by-collapse-button"), spaceForCollapseButton), _ref7)])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(_PageHeaderUtils.blockClass, "__action-bar-column-content"),
@@ -429,31 +429,31 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     className: "".concat(_PageHeaderUtils.blockClass, "__action-bar"),
     onWidthChange: handleActionBarWidthChange,
     rightAlign: true
-  })) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, {
+  })) : widthIsNarrow && thePageActions(true, pageActionsInBreadcrumbRow))))) : null, !collapseTitle && (title || pageActions) ? /*#__PURE__*/_react.default.createElement(_react2.Row, {
     className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__title-row"), (_cx4 = {}, (0, _defineProperty2.default)(_cx4, "".concat(_PageHeaderUtils.blockClass, "__title-row--no-breadcrumb-row"), !hasBreadcrumbRow), (0, _defineProperty2.default)(_cx4, "".concat(_PageHeaderUtils.blockClass, "__title-row--under-action-bar"), hasActionBar || widthIsNarrow), (0, _defineProperty2.default)(_cx4, "".concat(_PageHeaderUtils.blockClass, "__title-row--has-page-actions"), !!pageActions), (0, _defineProperty2.default)(_cx4, "".concat(_PageHeaderUtils.blockClass, "__title-row--sticky"), !!pageActions && !actionBarItems && hasBreadcrumbRow), _cx4))
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     className: "".concat(_PageHeaderUtils.blockClass, "__title-column")
   }, title ? /*#__PURE__*/_react.default.createElement(_PageHeaderTitle.PageHeaderTitle, {
     blockClass: _PageHeaderUtils.blockClass,
     hasBreadcrumbRow: hasBreadcrumbRow,
     title: title
-  }) : null), thePageActions(false, pageActionsInBreadcrumbRow)) : null, subtitle ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, {
+  }) : null), thePageActions(false, pageActionsInBreadcrumbRow)) : null, subtitle ? /*#__PURE__*/_react.default.createElement(_react2.Row, {
     className: "".concat(_PageHeaderUtils.blockClass, "__subtitle-row")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     className: "".concat(_PageHeaderUtils.blockClass, "__subtitle")
-  }, subtitle)) : null, children ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, {
+  }, subtitle)) : null, children ? /*#__PURE__*/_react.default.createElement(_react2.Row, {
     className: "".concat(_PageHeaderUtils.blockClass, "__available-row")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     className: "".concat(_PageHeaderUtils.blockClass, "__available-column")
   }, children)) : null, (breadcrumbs || actionBarItems || title || pageActions || children || subtitle) && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(["".concat(_PageHeaderUtils.blockClass, "__last-row-buffer"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__last-row-buffer--active"), lastRowBufferActive)])
   }), // this navigation row scrolls under the breadcrumb if there is one
-  tags && !navigation ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, {
+  tags && !navigation ? /*#__PURE__*/_react.default.createElement(_react2.Row, {
     className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__navigation-row"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__navigation-row--has-tags"), tags))
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__navigation-tags"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__navigation-tags--tags-only"), !navigation))
   }, /*#__PURE__*/_react.default.createElement(_TagSet.TagSet, {
-    overflowAlign: "start",
+    overflowAlign: "bottom-right",
     allTagsModalSearchLabel: allTagsModalSearchLabel,
     allTagsModalSearchPlaceholderText: allTagsModalSearchPlaceholderText,
     allTagsModalTitle: allTagsModalTitle,
@@ -461,21 +461,21 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     tags: tags,
     overflowClassName: "".concat(_PageHeaderUtils.blockClass, "__navigation-tags-overflow")
   }))) : null), // this navigation pushes the breadcrumb off or settles underneath it depending on enableBreadcrumbScroll
-  navigation ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, {
+  navigation ? /*#__PURE__*/_react.default.createElement(_react2.Row, {
     className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__navigation-row"), (_cx7 = {}, (0, _defineProperty2.default)(_cx7, "".concat(_PageHeaderUtils.blockClass, "__navigation-row--spacing-above-06"), !!navigation), (0, _defineProperty2.default)(_cx7, "".concat(_PageHeaderUtils.blockClass, "__navigation-row--has-tags"), tags), _cx7))
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Column, {
     className: "".concat(_PageHeaderUtils.blockClass, "__navigation-tabs")
-  }, navigation), tags ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+  }, navigation), tags ? /*#__PURE__*/_react.default.createElement(_react2.Column, {
     className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__navigation-tags"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__navigation-tags--tags-only"), !navigation))
   }, /*#__PURE__*/_react.default.createElement(_TagSet.TagSet, {
-    overflowAlign: "end",
+    overflowAlign: "bottom-right",
     allTagsModalSearchLabel: allTagsModalSearchLabel,
     allTagsModalSearchPlaceholderText: allTagsModalSearchPlaceholderText,
     allTagsModalTitle: allTagsModalTitle,
     showAllTagsLabel: showAllTagsLabel,
     tags: tags,
     overflowClassName: "".concat(_PageHeaderUtils.blockClass, "__navigation-tags-overflow")
-  })) : null) : null), hasCollapseButton ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  })) : null) : null), hasCollapseButton ? /*#__PURE__*/_react.default.createElement(_react2.Button, {
     className: (0, _classnames.default)("".concat(_PageHeaderUtils.blockClass, "__collapse-expand-toggle"), (0, _defineProperty2.default)({}, "".concat(_PageHeaderUtils.blockClass, "__collapse-expand-toggle--collapsed"), fullyCollapsed)),
     hasIconOnly: true,
     iconDescription:
@@ -483,8 +483,12 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     fullyCollapsed ? expandHeaderIconDescription : collapseHeaderIconDescription,
     kind: "ghost",
     onClick: handleCollapseToggle,
-    renderIcon: _iconsReact.ChevronUp16,
-    size: "field",
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_iconsReact.ChevronUp, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
+    size: "md",
     tooltipPosition: "bottom",
     tooltipAlignment: "end",
     type: "button"
@@ -494,7 +498,7 @@ var PageHeader = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     if (pageActions) {
       var _pageActions$content;
 
-      var _Tag = isBreadcrumbRow ? 'div' : _carbonComponentsReact.Column; // Only report size change of version action bar is rendered as part of the breadcrumb row.
+      var _Tag = isBreadcrumbRow ? 'div' : _react2.Column; // Only report size change of version action bar is rendered as part of the breadcrumb row.
       // and when there is an actionBar
 
 
@@ -553,10 +557,10 @@ PageHeader.propTypes = _objectSpread({
    * Each item is specified as an object with the properties of a Carbon Button in icon only form.
    * Button kind, size, tooltipPosition, tooltipAlignment and type are ignored.
    */
-  actionBarItems: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, (0, _propsHelper.prepareProps)(_carbonComponentsReact.Button.propTypes, ['kind', 'size', 'tooltipPosition', 'tooltipAlignment'])), {}, {
+  actionBarItems: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, (0, _propsHelper.prepareProps)(_react2.Button.propTypes, ['kind', 'size', 'tooltipPosition', 'tooltipAlignment'])), {}, {
     iconDescription: _propTypes.default.string.isRequired,
-    onClick: _carbonComponentsReact.Button.propTypes.onClick,
-    renderIcon: _carbonComponentsReact.Button.propTypes.renderIcon.isRequired
+    onClick: _react2.Button.propTypes.onClick,
+    renderIcon: _react2.Button.propTypes.renderIcon.isRequired
   }))),
 
   /**
@@ -746,9 +750,9 @@ PageHeader.propTypes = _objectSpread({
    * - maxWidth: maximum number of pixels the content will grow to
    * Carbon Button API https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  pageActions: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _carbonComponentsReact.Button.propTypes), {}, {
+  pageActions: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Button.propTypes), {}, {
     key: _propTypes.default.string.isRequired,
-    kind: _carbonComponentsReact.Button.propTypes.kind,
+    kind: _react2.Button.propTypes.kind,
     label: _propTypes.default.node,
     onClick: _propTypes.default.func
   }))), _propTypes.default.shape({
@@ -804,7 +808,7 @@ PageHeader.propTypes = _objectSpread({
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-tag--default
    */
-  tags: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, (0, _propsHelper.prepareProps)(_carbonComponentsReact.Tag.propTypes, 'filter')), {}, {
+  tags: _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, (0, _propsHelper.prepareProps)(_react2.Tag.propTypes, 'filter')), {}, {
     label: _propTypes.default.string.isRequired,
     // we duplicate this prop to improve the DocGen
     type: _propTypes.default.oneOf(tagTypes)

package/lib/components/PageHeader/PageHeaderTitle.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 _ = require("../");
 
@@ -61,7 +61,7 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
     var TitleIcon = icon;
     titleInnards = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && !loading ? /*#__PURE__*/_react.default.createElement(TitleIcon, {
       className: "".concat(blockClass, "__title-icon")
-    }) : null, loading ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.SkeletonText, {
+    }) : null, loading ? /*#__PURE__*/_react.default.createElement(_react2.SkeletonText, {
       className: "".concat(blockClass, "__title-skeleton")
     }) : isEditable ? /*#__PURE__*/_react.default.createElement(_.InlineEdit, (0, _extends2.default)({
       hideLabel: true,

package/lib/components/PageHeader/PageHeaderUtils.js

@@ -17,7 +17,7 @@ var _settings = require("../../settings");
 
 var _scrollableAncestor = require("../../global/js/utils/scrollableAncestor");
 
-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; }
 
@@ -193,7 +193,7 @@ var utilGetBreadcrumbItemForTitle = function utilGetBreadcrumbItemForTitle(block
     if (title.text !== undefined) {
       // Shape title provided
       breadcrumbTitle = {
-        label: /*#__PURE__*/_react.default.createElement("span", null, title.loading ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.SkeletonText, null) : title.text),
+        label: /*#__PURE__*/_react.default.createElement("span", null, title.loading ? /*#__PURE__*/_react.default.createElement(_react2.SkeletonText, null) : title.text),
         title: title.text
       };
     } else if (title.content !== undefined) {

package/lib/components/ProductiveCard/ProductiveCard.js

@@ -120,6 +120,11 @@ ProductiveCard.propTypes = {
     onKeyDown: _propTypes.default.func
   })),
 
+  /**
+   * Aria label prop required for OverflowMenu
+   */
+  overflowAriaLabel: _propTypes.default.string,
+
   /**
    * Optionally specify an href for your Button to become an <a> element
    */