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

package/es/components/Tearsheet/TearsheetShell.js

@@ -9,7 +9,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) { _defineProperty(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; }
 
 /**
- * Copyright IBM Corp. 2020, 2021
+ * Copyright IBM Corp. 2020, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -21,15 +21,14 @@ import { useResizeDetector } from 'react-resize-detector'; // Other standard imp
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { pkg, carbon } from '../../settings';
+import { pkg } from '../../settings';
 import pconsole from '../../global/js/utils/pconsole'; // Carbon and package components we use.
 
-import { Button, ComposedModal, ModalHeader, ModalBody } from 'carbon-components-react';
+import { Button, ComposedModal, ModalHeader, ModalBody, usePrefix } from '@carbon/react';
 import { ActionSet } from '../ActionSet';
 import { Wrap } from '../../global/js/utils/Wrap'; // The block part of our conventional BEM class names (bc__E--M).
 
 var bc = "".concat(pkg.prefix, "--tearsheet");
-var bcModalHeader = "".concat(carbon.prefix, "--modal-header");
 var componentName = 'TearsheetShell';
 var maxDepth = 3; // NOTE: the component SCSS is not imported here: it is rolled up separately.
 // Global data structure to communicate the state of tearsheet stacking
@@ -74,7 +73,9 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       verticalPosition = _ref.verticalPosition,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  // node the modal tearsheet is hosted in
+  var carbonPrefix = usePrefix();
+  var bcModalHeader = "".concat(carbonPrefix, "--modal-header"); // node the modal tearsheet is hosted in
+
   var _useState = useState(null),
       _useState2 = _slicedToArray(_useState, 2),
       portalTarget = _useState2[0],
@@ -126,14 +127,14 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   handleStackChange.checkFocus = function () {
     // if we are now the topmost tearsheet, ensure we have focus
-    if (position === depth && modalRef.current && !modalRef.current.innerModal.current.contains(document.activeElement)) {
+    if (position === depth && modalRef.current && !modalRef.current.contains(document.activeElement)) {
       handleStackChange.claimFocus();
     }
   }; // Callback to give the tearsheet the opportunity to claim focus
 
 
   handleStackChange.claimFocus = function () {
-    var element = selectorPrimaryFocus ? modalRef.current.innerModal.current.querySelector(selectorPrimaryFocus) : modalRef.current.startSentinel.current;
+    var element = selectorPrimaryFocus ? modalRef.current.querySelector(selectorPrimaryFocus) : modalRef.current;
     setTimeout(function () {
       return element.focus();
     }, 1);
@@ -207,11 +208,12 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onFocus: handleFocus,
       preventCloseOnClickOutside: !isPassive,
       ref: modalRef,
-      selectorsFloatingMenus: [".".concat(carbon.prefix, "--overflow-menu-options"), ".".concat(carbon.prefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
+      selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
       size: "sm"
     }), includeHeader && /*#__PURE__*/React.createElement(ModalHeader, {
       className: cx("".concat(bc, "__header"), (_cx3 = {}, _defineProperty(_cx3, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), _defineProperty(_cx3, "".concat(bc, "__header--with-nav"), navigation), _cx3)),
       closeClassName: cx(_defineProperty({}, "".concat(bc, "__header--no-close-icon"), !effectiveHasCloseIcon)),
+      closeModal: onClose,
       iconDescription: closeIconDescription
     }, /*#__PURE__*/React.createElement(Wrap, {
       className: "".concat(bc, "__header-content")
@@ -252,7 +254,7 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       actions: actions,
       buttonSize: size === 'wide' ? 'xl' : null,
       className: "".concat(bc, "__buttons"),
-      size: size === 'wide' ? 'max' : 'lg'
+      size: size === 'wide' ? '2xl' : 'lg'
     })))), /*#__PURE__*/React.createElement("div", {
       className: "".concat(bc, "__resize-detector"),
       ref: resizer

package/es/components/Toolbar/Toolbar.js

@@ -13,6 +13,7 @@ var _excluded = ["children", "className", "vertical"];
 import cx from 'classnames';
 import { bool, node, string } from 'prop-types';
 import React, { createContext, forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import { getFocusableElements as _getFocusableElements } from '../../global/js/utils/getFocusableElements';
 import { pkg } from '../../settings';
 var checkComponentEnabled = pkg.checkComponentEnabled,
@@ -91,7 +92,7 @@ var Toolbar = /*#__PURE__*/forwardRef(function (_ref2, r) {
     onKeyDown: onKeyDown
   }, vertical && {
     'aria-orientation': 'vertical'
-  }, {
+  }, getDevtoolsProps(componentName), {
     role: "toolbar"
   }), /*#__PURE__*/React.createElement(ToolbarContext.Provider, {
     value: {

package/es/components/Toolbar/ToolbarButton.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["caret", "children", "className"];
+var _excluded = ["caret", "children", "className", "renderIcon", "iconDescription"];
 
 /**
  * Copyright IBM Corp. 2021, 2021
@@ -9,32 +9,36 @@ var _excluded = ["caret", "children", "className"];
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { Button } from 'carbon-components-react';
+import { IconButton } from '@carbon/react';
 import cx from 'classnames';
-import { bool, node, string } from 'prop-types';
+import { bool, func, node, string } from 'prop-types';
 import React, { forwardRef, useContext } from 'react';
 import { pkg } from '../../settings';
 import { blockClass as toolbarClass, ToolbarContext } from './Toolbar';
-var blockClass = "".concat(toolbarClass, "__button");
+export var blockClass = "".concat(toolbarClass, "__button");
 /** Toolbar buttons are common functions performed as part of a products interface or an open window.  */
 
-var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
+export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _useContext;
 
   var caret = _ref.caret,
       children = _ref.children,
       className = _ref.className,
+      renderIcon = _ref.renderIcon,
+      _ref$iconDescription = _ref.iconDescription,
+      iconDescription = _ref$iconDescription === void 0 ? '' : _ref$iconDescription,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(Button, _extends({
-    tooltipPosition: ((_useContext = useContext(ToolbarContext)) === null || _useContext === void 0 ? void 0 : _useContext.vertical) && 'right'
+  var Icon = renderIcon;
+  return /*#__PURE__*/React.createElement(IconButton, _extends({
+    align: ((_useContext = useContext(ToolbarContext)) === null || _useContext === void 0 ? void 0 : _useContext.vertical) && 'right'
   }, rest, {
+    label: iconDescription,
     ref: ref,
     className: cx(className, _defineProperty({}, "".concat(blockClass, "--caret"), caret)),
     kind: "ghost",
-    size: "md",
-    hasIconOnly: true
-  }), /*#__PURE__*/React.createElement(React.Fragment, null, children, caret && /*#__PURE__*/React.createElement("span", {
+    size: "md"
+  }), /*#__PURE__*/React.createElement(React.Fragment, null, Icon ? /*#__PURE__*/React.createElement(Icon, null) : null, children, caret && /*#__PURE__*/React.createElement("span", {
     className: "".concat(blockClass, "__caret")
   })));
 });
@@ -48,7 +52,12 @@ ToolbarButton.propTypes = {
   children: node,
 
   /** Provide an optional class to be applied to the containing node */
-  className: string
+  className: string,
+
+  /** Specifies the label for the icon button */
+  iconDescription: string.isRequired,
+
+  /** Specifies the icon to be used by the ToolbarButton component */
+  renderIcon: func.isRequired
 };
-ToolbarButton = pkg.checkComponentEnabled(ToolbarButton, componentName);
-export { blockClass, ToolbarButton };
+ToolbarButton = pkg.checkComponentEnabled(ToolbarButton, componentName);

package/es/components/UserProfileImage/UserProfileImage.js

@@ -17,8 +17,8 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import '../../global/js/utils/props-helper';
 import { pkg } from '../../settings'; // Carbon and package components we use.
 
-import { User20, User24, User32, Group20, Group24, Group32 } from '@carbon/icons-react';
-import { TooltipIcon } from 'carbon-components-react'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { User, Group } from '@carbon/icons-react';
+import { IconButton } from '@carbon/react'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--user-profile-image");
 var componentName = 'UserProfileImage'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -42,14 +42,38 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
 
   var icons = {
     user: {
-      md: User20,
-      lg: User24,
-      xlg: User32
+      md: function md(props) {
+        return /*#__PURE__*/React.createElement(User, _extends({
+          size: 20
+        }, props));
+      },
+      lg: function lg(props) {
+        return /*#__PURE__*/React.createElement(User, _extends({
+          size: 24
+        }, props));
+      },
+      xl: function xl(props) {
+        return /*#__PURE__*/React.createElement(User, _extends({
+          size: 32
+        }, props));
+      }
     },
     group: {
-      md: Group20,
-      lg: Group24,
-      xlg: Group32
+      md: function md(props) {
+        return /*#__PURE__*/React.createElement(Group, _extends({
+          size: 20
+        }, props));
+      },
+      lg: function lg(props) {
+        return /*#__PURE__*/React.createElement(Group, _extends({
+          size: 24
+        }, props));
+      },
+      xl: function xl(props) {
+        return /*#__PURE__*/React.createElement(Group, _extends({
+          size: 32
+        }, props));
+      }
     }
   };
 
@@ -100,9 +124,10 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(FillItem, null));
   };
 
-  return FillItem && (tooltipText ? /*#__PURE__*/React.createElement(TooltipIcon, {
-    tooltipText: tooltipText,
-    className: "".concat(blockClass, "__tooltip")
+  return FillItem && (tooltipText ? /*#__PURE__*/React.createElement(IconButton, {
+    label: tooltipText,
+    className: "".concat(blockClass, "__tooltip"),
+    kind: "ghost"
   }, renderUserProfileImage()) : renderUserProfileImage());
 }); // Return a placeholder if not released and not enabled by feature flag
 
@@ -123,7 +148,7 @@ UserProfileImage.propTypes = {
   /**
    * Provide a custom icon to use if you need to use an icon other than the included ones
    */
-  icon: PropTypes.object,
+  icon: PropTypes.func,
 
   /**
    * When passing the image prop, supply a full path to the image to be displayed.
@@ -151,7 +176,7 @@ UserProfileImage.propTypes = {
   /**
    * Set the size of the avatar circle
    */
-  size: PropTypes.oneOf(['xlg', 'lg', 'md']).isRequired,
+  size: PropTypes.oneOf(['xl', 'lg', 'md']).isRequired,
 
   /**
    * Set theme in which the component will be rendered

package/es/components/WebTerminal/WebTerminal.js

@@ -21,8 +21,8 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings'; // Carbon and package components we use.
 
-import { Close16 as Close, Help16 as Help } from '@carbon/icons-react';
-import { Button, OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
+import { Close, Help } from '@carbon/icons-react';
+import { Button, OverflowMenu, OverflowMenuItem } from '@carbon/react';
 import { moderate02 } from '@carbon/motion';
 import { useWebTerminal } from './hooks';
 import { getDevtoolsProps } from '../../global/js/utils/devtools'; // The block part of our conventional BEM class names (blockClass__E--M).
@@ -120,7 +120,11 @@ export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__actions")
   }, showDocumentationLinks && /*#__PURE__*/React.createElement(OverflowMenu, {
-    renderIcon: Help,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(Help, _extends({
+        size: 16
+      }, props));
+    },
     iconDescription: documentationLinksIconDescription,
     ariaLabel: documentationLinksIconDescription,
     menuOptionsClass: "".concat(blockClass, "__documentation-overflow"),
@@ -141,11 +145,16 @@ export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       renderIcon: renderIcon,
       onClick: onClick,
       iconDescription: iconDescription,
-      kind: "ghost"
+      kind: "ghost",
+      "aria-label": iconDescription
     });
   })), /*#__PURE__*/React.createElement(Button, {
     hasIconOnly: true,
-    renderIcon: Close,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/React.createElement(Close, _extends({
+        size: 16
+      }, props));
+    },
     kind: "ghost",
     iconDescription: closeIconDescription,
     onClick: handleCloseTerminal,
@@ -169,7 +178,7 @@ WebTerminal.propTypes = {
    * An array of actions to be displayed in the web terminal header bar
    */
   actions: PropTypes.arrayOf(PropTypes.shape({
-    renderIcon: PropTypes.object.isRequired,
+    renderIcon: PropTypes.func.isRequired,
     onClick: PropTypes.func.isRequired,
     iconDescription: PropTypes.string.isRequired
   })),

package/es/components/WebTerminal/preview-components/Navigation.js

@@ -5,8 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 import React from 'react';
-import { Header, HeaderName, HeaderGlobalAction, HeaderGlobalBar } from 'carbon-components-react';
-import { Terminal20 as Terminal, Search20 as Search, User20 as User } from '@carbon/icons-react';
+import { Header, HeaderName, HeaderGlobalAction, HeaderGlobalBar } from '@carbon/react';
+import { Terminal, Search, User } from '@carbon/icons-react';
 import { useWebTerminal } from '../hooks';
 
 var Navigation = function Navigation() {
@@ -21,13 +21,19 @@ var Navigation = function Navigation() {
   }, "[Platform]"), /*#__PURE__*/React.createElement(HeaderGlobalBar, null, /*#__PURE__*/React.createElement(HeaderGlobalAction, {
     "aria-label": "Web terminal",
     onClick: openWebTerminal
-  }, /*#__PURE__*/React.createElement(Terminal, null)), /*#__PURE__*/React.createElement(HeaderGlobalAction, {
+  }, /*#__PURE__*/React.createElement(Terminal, {
+    size: 20
+  })), /*#__PURE__*/React.createElement(HeaderGlobalAction, {
     "aria-label": "Search",
     onClick: function onClick() {}
-  }, /*#__PURE__*/React.createElement(Search, null)), /*#__PURE__*/React.createElement(HeaderGlobalAction, {
+  }, /*#__PURE__*/React.createElement(Search, {
+    size: 20
+  })), /*#__PURE__*/React.createElement(HeaderGlobalAction, {
     "aria-label": "User",
     onClick: function onClick() {}
-  }, /*#__PURE__*/React.createElement(User, null))));
+  }, /*#__PURE__*/React.createElement(User, {
+    size: 20
+  }))));
 };
 
 export default Navigation;

package/es/components/_Canary/Canary.js

@@ -16,7 +16,7 @@ import cx from 'classnames'; // load the package settings direct, because Canary
 
 import pkg from '../../global/js/package-settings'; // Carbon and package components we use.
 
-import { CodeSnippet } from 'carbon-components-react'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { CodeSnippet } from '@carbon/react'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var blockClass = "".concat(pkg.prefix, "--canary");
 /**

package/es/global/js/hooks/index.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2021
+ * Copyright IBM Corp. 2020, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.

package/es/global/js/utils/test-helper.js

@@ -50,7 +50,8 @@ export var scssCompile = function scssCompile(file) {
     // When the sass API is revised it may be feasible to switch back to
     // using the API for SCSS compilation and checking.
     execFileSync('sass', [compressed ? '--style=compressed' : '--style=expanded', '--no-source-map', '--load-path', loadPath1, '--load-path', loadPath2, file], {
-      stdio: ['ignore', 'pipe', 'pipe']
+      stdio: ['ignore', 'pipe', 'pipe'],
+      maxBuffer: 1024 * 1024 * 1.5
     }).toString()
   );
 };

package/es/settings.js

@@ -1,21 +1,13 @@
 import { Canary } from './components/_Canary';
 import pkgSettings from './global/js/package-settings';
-import { settings as carbonSettings } from 'carbon-components';
 import React from 'react';
 import { themes } from '@carbon/themes';
 export var carbon = {
-  get prefix() {
-    return carbonSettings.prefix;
-  },
-
-  set prefix(val) {
-    carbonSettings.prefix = val;
-  },
-
   get themes() {
     return themes;
-  }
+  },
 
+  prefix: 'cds'
 }; // Check that a component is enabled. This function returns a stub which checks
 // the component status on first use and then renders as the component or as
 // a Canary placeholder initialized with the name of the replaced component.

package/lib/components/APIKeyModal/APIKeyModal.js

@@ -11,12 +11,12 @@ exports.APIKeyModal = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -27,7 +27,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
 var _iconsReact = require("@carbon/icons-react");
 
@@ -127,7 +127,11 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var hasNextStep = hasSteps && currentStep < customSteps.length - 1;
   var hasPreviousStep = hasSteps && currentStep !== 0;
   var copyButtonProps = {
-    renderIcon: _iconsReact.Copy16,
+    renderIcon: function renderIcon(props) {
+      return /*#__PURE__*/_react.default.createElement(_iconsReact.Copy, (0, _extends2.default)({
+        size: 16
+      }, props));
+    },
     iconDescription: copyIconDescription,
     ref: copyRef
   };
@@ -283,7 +287,7 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
   };
 
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ComposedModal, (0, _extends2.default)({}, rest, _objectSpread({
+  return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, _objectSpread({
     open: open,
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), {
@@ -292,28 +296,28 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     size: "sm",
     "aria-label": modalLabel,
     preventCloseOnClickOutside: true
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalHeader, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, {
     className: "".concat(blockClass, "__header"),
     title: getTitle(),
     label: modalLabel
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalBody, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, {
     className: "".concat(blockClass, "__body-container")
   }, hasSteps && !apiKeyLoaded ? customSteps[currentStep].content : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, body && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__body")
-  }, body), !editing && apiKey && hasAPIKeyVisibilityToggle && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.PasswordInput, {
+  }, body), !editing && apiKey && hasAPIKeyVisibilityToggle && /*#__PURE__*/_react.default.createElement(_react2.PasswordInput, {
     value: apiKey,
     labelText: apiKeyLabel,
     id: apiKeyInputId.current,
     showPasswordLabel: showAPIKeyLabel,
     hidePasswordLabel: hideAPIKeyLabel,
     tooltipPosition: "left"
-  }), !editing && apiKey && !hasAPIKeyVisibilityToggle && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+  }), !editing && apiKey && !hasAPIKeyVisibilityToggle && /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     value: apiKey,
     labelText: apiKeyLabel,
     id: apiKeyInputId.current
-  }), (editing || !apiKeyLoaded && nameRequired) && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Form, {
+  }), (editing || !apiKeyLoaded && nameRequired) && /*#__PURE__*/_react.default.createElement(_react2.Form, {
     onSubmit: submitHandler
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.TextInput, {
     helperText: nameHelperText,
     placeholder: namePlaceholder,
     labelText: nameLabel,
@@ -323,18 +327,22 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     disabled: loading,
     required: nameRequired,
     "data-modal-primary-focus": true
-  })), loading && /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.InlineLoading, {
+  })), loading && /*#__PURE__*/_react.default.createElement(_react2.InlineLoading, {
     description: loadingText,
     className: "".concat(blockClass, "__loader")
   }), (copyError || error) && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__messaging")
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__error-icon")
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled16, null)), /*#__PURE__*/_react.default.createElement("p", {
+  }, /*#__PURE__*/_react.default.createElement(_iconsReact.ErrorFilled, {
+    size: 16
+  })), /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__messaging-text")
   }, copyError ? copyErrorText : errorText)), apiKeyLoaded && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__messaging")
-  }, /*#__PURE__*/_react.default.createElement(_iconsReact.InformationFilled16, null), hasDownloadLink ? /*#__PURE__*/_react.default.createElement(_APIKeyDownloader.APIKeyDownloader, {
+  }, /*#__PURE__*/_react.default.createElement(_iconsReact.InformationFilled, {
+    size: 16
+  }), hasDownloadLink ? /*#__PURE__*/_react.default.createElement(_APIKeyDownloader.APIKeyDownloader, {
     apiKey: apiKey,
     body: downloadBodyText,
     fileName: downloadFileName,
@@ -342,13 +350,13 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     fileType: downloadFileType
   }) : /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__messaging-text")
-  }, generateSuccessBody)))), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalFooter, {
+  }, generateSuccessBody)))), /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, {
     className: "".concat(blockClass, "__footer")
-  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_react2.Button, {
     type: "button",
     kind: "secondary",
     onClick: onBackHandler
-  }, getSecondaryButtonText()), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, (0, _extends2.default)({}, apiKeyLoaded ? copyButtonProps : {}, {
+  }, getSecondaryButtonText()), /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({}, apiKeyLoaded ? copyButtonProps : {}, {
     type: "submit",
     kind: "primary",
     onClick: submitHandler,

package/lib/components/AboutModal/AboutModal.js

@@ -31,9 +31,11 @@ var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 
 var _devtools = require("../../global/js/utils/devtools");
 
-var _carbonComponentsReact = require("carbon-components-react");
+var _react2 = require("@carbon/react");
 
-var _excluded = ["additionalInfo", "className", "closeIconDescription", "content", "copyrightText", "legalText", "links", "logo", "onClose", "open", "title"];
+var _propsHelper = require("../../global/js/utils/props-helper");
+
+var _excluded = ["additionalInfo", "className", "closeIconDescription", "content", "copyrightText", "legalText", "links", "logo", "modalAriaLabel", "onClose", "open", "tabListAriaLabel", "title"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -64,8 +66,10 @@ var AboutModal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       legalText = _ref.legalText,
       links = _ref.links,
       logo = _ref.logo,
+      modalAriaLabel = _ref.modalAriaLabel,
       onClose = _ref.onClose,
       open = _ref.open,
+      tabListAriaLabel = _ref.tabListAriaLabel,
       title = _ref.title,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
@@ -94,22 +98,24 @@ var AboutModal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     onResize: handleResize,
     targetRef: bodyRef
   });
-  return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ComposedModal, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, // Apply the block class to the main HTML element
     className, // Apply any supplied class names to the main HTML element.
-    (0, _defineProperty2.default)({}, "".concat(blockClass, "--with-tabs"), additionalInfo && additionalInfo.length > 1))
+    (0, _defineProperty2.default)({}, "".concat(blockClass, "--with-tabs"), additionalInfo && additionalInfo.length > 1)),
+    "aria-label": modalAriaLabel
   }, _objectSpread({
     onClose: onClose,
     open: open,
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName))), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__logo")
-  }, logo), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalHeader, {
+  }, logo), /*#__PURE__*/_react.default.createElement(_react2.ModalHeader, {
     className: "".concat(blockClass, "__header"),
+    closeModal: onClose,
     iconDescription: closeIconDescription,
     label: title,
     labelClassName: "".concat(blockClass, "__title")
-  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalBody, {
+  }), /*#__PURE__*/_react.default.createElement(_react2.ModalBody, {
     "aria-label": hasScrollingContent ? '' : null,
     "aria-labelledby": hasScrollingContent ? contentId : null,
     className: "".concat(blockClass, "__body"),
@@ -128,30 +134,42 @@ var AboutModal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__legal-text")
   }, legalText), copyrightText && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__copyright-text")
-  }, copyrightText))), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ModalFooter, {
+  }, copyrightText))), /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, {
     className: "".concat(blockClass, "__footer")
   }, additionalInfo && additionalInfo.length > 0 && (additionalInfo.length === 1 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__version-label")
   }, additionalInfo[0].label), /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__version-number")
-  }, additionalInfo[0].content)) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tabs, {
+  }, additionalInfo[0].content)) : /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__tab-container")
-  }, additionalInfo.map(function (tab, i) {
-    return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Tab, {
-      id: 'about-modal-tab-' + tab.label,
-      label: tab.label,
-      key: i
+  }, /*#__PURE__*/_react.default.createElement(_react2.Tabs, null, /*#__PURE__*/_react.default.createElement(_react2.TabList, {
+    "aria-label": tabListAriaLabel
+  }, additionalInfo.map(function (tab, index) {
+    return /*#__PURE__*/_react.default.createElement(_react2.Tab, {
+      key: index
+    }, tab.label);
+  })), /*#__PURE__*/_react.default.createElement(_react2.TabPanels, null, additionalInfo.map(function (tab, index) {
+    return /*#__PURE__*/_react.default.createElement(_react2.TabPanel, {
+      key: index
     }, tab.content);
-  })))));
+  })))))));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 
 exports.AboutModal = AboutModal;
 exports.AboutModal = AboutModal = _settings.pkg.checkComponentEnabled(AboutModal, componentName);
-AboutModal.displayName = componentName; // The types and DocGen commentary for the component props,
+AboutModal.displayName = componentName;
+
+var tabListAriaLabelRequiredProps = function tabListAriaLabelRequiredProps(type) {
+  return (0, _propsHelper.isRequiredIf)(type, function (_ref2) {
+    var additionalInfo = _ref2.additionalInfo;
+    return additionalInfo === null || additionalInfo === void 0 ? void 0 : additionalInfo.length;
+  });
+}; // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
 
+
 AboutModal.propTypes = {
   /**
    * Additional information to be displayed in the footer. Can be used for
@@ -204,6 +222,11 @@ AboutModal.propTypes = {
    */
   logo: _propTypes.default.node.isRequired,
 
+  /**
+   * Specifies aria label for AboutModal
+   */
+  modalAriaLabel: _propTypes.default.string,
+
   /**
    * Specifies an optional handler which is called when the AboutModal
    * is closed. Returning `false` prevents the AboutModal from closing.
@@ -215,6 +238,11 @@ AboutModal.propTypes = {
    */
   open: _propTypes.default.bool,
 
+  /**
+   * Specifies the tab list aria label
+   */
+  tabListAriaLabel: tabListAriaLabelRequiredProps(_propTypes.default.string),
+
   /**
    * The title of the AboutModal is usually the product or service name.
    */