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

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["actions", "children", "className", "closeIconDescription", "closeTerminal", "documentationLinks", "documentationLinksIconDescription", "open"];
+var _excluded = ["actions", "children", "className", "closeIconDescription", "documentationLinks", "documentationLinksIconDescription", "isInitiallyOpen"];
 
 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; }
 
@@ -21,9 +21,10 @@ 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).
 
 var componentName = 'WebTerminal';
@@ -32,7 +33,8 @@ var blockClass = "".concat(pkg.prefix, "--web-terminal"); // Default values for
 var defaults = {
   actions: Object.freeze([]),
   documentationLinks: Object.freeze([]),
-  documentationLinksIconDescription: 'Show documentation links'
+  documentationLinksIconDescription: 'Show documentation links',
+  isInitiallyOpen: false
 };
 export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref3;
@@ -42,14 +44,19 @@ export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       children = _ref.children,
       className = _ref.className,
       closeIconDescription = _ref.closeIconDescription,
-      closeTerminal = _ref.closeTerminal,
       _ref$documentationLin = _ref.documentationLinks,
       documentationLinks = _ref$documentationLin === void 0 ? defaults.documentationLinks : _ref$documentationLin,
       _ref$documentationLin2 = _ref.documentationLinksIconDescription,
       documentationLinksIconDescription = _ref$documentationLin2 === void 0 ? defaults.documentationLinksIconDescription : _ref$documentationLin2,
-      open = _ref.open,
+      _ref$isInitiallyOpen = _ref.isInitiallyOpen,
+      isInitiallyOpen = _ref$isInitiallyOpen === void 0 ? defaults.isInitiallyOpen : _ref$isInitiallyOpen,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var _useWebTerminal = useWebTerminal(),
+      open = _useWebTerminal.open,
+      closeWebTerminal = _useWebTerminal.closeWebTerminal,
+      openWebTerminal = _useWebTerminal.openWebTerminal;
+
   var _useState = useState(open),
       _useState2 = _slicedToArray(_useState, 2),
       shouldRender = _useState2[0],
@@ -69,6 +76,16 @@ export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setRender(true);
     }
   }, [open]);
+  /**
+    On render, check if user want's the web terminal to be open by default
+  */
+
+  useEffect(function () {
+    if (isInitiallyOpen) {
+      openWebTerminal();
+    }
+  }, []); // eslint-disable-line
+
   /** 
     When the web terminal slide in animation is complete, sets render to false.
   */
@@ -88,7 +105,7 @@ export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setRender(false);
     }
 
-    closeTerminal();
+    closeWebTerminal();
   };
 
   return shouldRender ? /*#__PURE__*/React.createElement("div", _extends({}, _objectSpread(_objectSpread({}, rest), getDevtoolsProps(componentName)), {
@@ -103,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"),
@@ -124,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,
@@ -152,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
   })),
@@ -172,23 +198,18 @@ WebTerminal.propTypes = {
    */
   closeIconDescription: PropTypes.string.isRequired,
 
-  /**
-   * Function that should set the open prop to false
-   */
-  closeTerminal: PropTypes.func.isRequired,
-
   /**
    * Array of objects for each documentation link. Each documentation link uses the prop types of OverflowMenuItems. See more: https://react.carbondesignsystem.com/?path=/docs/components-overflowmenu--default
    */
   documentationLinks: PropTypes.arrayOf(PropTypes.shape(_objectSpread({}, OverflowMenuItem.propTypes))),
 
   /**
-   * Icon description for the documentation link overflow menu
+   * Description for the documentation link overflow menu tooltip
    */
   documentationLinksIconDescription: PropTypes.string,
 
   /**
-   * Boolean that determines if the web terminal is opened or closed
+   * Optionally pass if the web terminal should be open by default
    */
-  open: PropTypes.bool.isRequired
+  isInitiallyOpen: PropTypes.bool
 };

package/es/components/WebTerminal/WebTerminalContentWrapper.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 = ["children", "isTerminalOpen"];
+var _excluded = ["children"];
 
 /**
  * Copyright IBM Corp. 2020, 2021
@@ -14,18 +14,21 @@ import React from 'react'; // Other standard imports.
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { pkg } from '../../settings'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { pkg } from '../../settings';
+import { useWebTerminal } from './hooks'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var componentName = 'WebTerminalContentWrapper';
 var blockClass = "".concat(pkg.prefix, "--web-terminal-content-wrapper");
 export var WebTerminalContentWrapper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      isTerminalOpen = _ref.isTerminalOpen,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var _useWebTerminal = useWebTerminal(),
+      open = _useWebTerminal.open;
+
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref,
-    className: cx([blockClass, _defineProperty({}, "".concat(blockClass, "--open"), isTerminalOpen)])
+    className: cx([blockClass, _defineProperty({}, "".concat(blockClass, "--open"), open)])
   }, rest), children);
 }); // Return a placeholder if not released and not enabled by feature flag
 
@@ -40,10 +43,5 @@ WebTerminalContentWrapper.propTypes = {
   /**
    * Pass in content as children.
    */
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-
-  /**
-   * A boolean to determine if the terminal is open.
-   */
-  isTerminalOpen: PropTypes.bool.isRequired
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
 };

package/es/components/WebTerminal/hooks/index.js

@@ -0,0 +1,45 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState, useCallback, createContext } from 'react';
+import { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { pkg } from '../../../settings';
+export var WebTerminalContext = /*#__PURE__*/createContext();
+var componentName = 'WebTerminalProvider';
+export var WebTerminalProvider = function WebTerminalProvider(_ref) {
+  var children = _ref.children;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var openWebTerminal = useCallback(function () {
+    return setOpen(true);
+  }, []);
+  var closeWebTerminal = useCallback(function () {
+    return setOpen(false);
+  }, []);
+  var toggleWebTerminal = useCallback(function () {
+    return setOpen(!open);
+  }, [open]);
+  return /*#__PURE__*/React.createElement(WebTerminalContext.Provider, {
+    value: {
+      open: open,
+      openWebTerminal: openWebTerminal,
+      closeWebTerminal: closeWebTerminal,
+      toggleWebTerminal: toggleWebTerminal
+    }
+  }, children);
+}; // Return a placeholder if not released and not enabled by feature flag
+
+WebTerminalProvider = pkg.checkComponentEnabled(WebTerminalProvider, componentName);
+WebTerminalProvider.propTypes = {
+  /**
+   * Provide your own terminal component as children to show up in the web terminal
+   */
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+}; // Custom hook that exposes the provided value from context
+
+export var useWebTerminal = function useWebTerminal() {
+  return useContext(WebTerminalContext);
+};

package/es/components/WebTerminal/index.js

@@ -1,2 +1,3 @@
 export { WebTerminal } from './WebTerminal';
-export { WebTerminalContentWrapper } from './WebTerminalContentWrapper';
+export { WebTerminalContentWrapper } from './WebTerminalContentWrapper';
+export { useWebTerminal, WebTerminalProvider } from './hooks';

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

@@ -1,10 +1,12 @@
 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 PropTypes from 'prop-types';
+import { Header, HeaderName, HeaderGlobalAction, HeaderGlobalBar } from '@carbon/react';
+import { Terminal, Search, User } from '@carbon/icons-react';
+import { useWebTerminal } from '../hooks';
+
+var Navigation = function Navigation() {
+  var _useWebTerminal = useWebTerminal(),
+      openWebTerminal = _useWebTerminal.openWebTerminal;
 
-var Navigation = function Navigation(_ref) {
-  var openTerminal = _ref.openTerminal;
   return /*#__PURE__*/React.createElement(Header, {
     "aria-label": "IBM Platform Name"
   }, /*#__PURE__*/React.createElement(HeaderName, {
@@ -12,20 +14,20 @@ var Navigation = function Navigation(_ref) {
     prefix: "IBM"
   }, "[Platform]"), /*#__PURE__*/React.createElement(HeaderGlobalBar, null, /*#__PURE__*/React.createElement(HeaderGlobalAction, {
     "aria-label": "Web terminal",
-    onClick: openTerminal
-  }, /*#__PURE__*/React.createElement(Terminal, null)), /*#__PURE__*/React.createElement(HeaderGlobalAction, {
+    onClick: openWebTerminal
+  }, /*#__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
+  }))));
 };
 
-Navigation.propTypes = {
-  /**
-   * Opens the terminal
-   */
-  openTerminal: PropTypes.func.isRequired
-};
 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/components/index.js

@@ -32,7 +32,7 @@ export { TagSet } from './TagSet';
 export { Tearsheet, TearsheetNarrow } from './Tearsheet';
 export { Toolbar, ToolbarButton, ToolbarGroup } from './Toolbar';
 export { UserProfileImage } from './UserProfileImage';
-export { WebTerminal, WebTerminalContentWrapper } from './WebTerminal';
+export { WebTerminal, WebTerminalContentWrapper, useWebTerminal, WebTerminalProvider } from './WebTerminal';
 export { EditSidePanel } from './EditSidePanel';
 export { OptionsTile } from './OptionsTile';
 export { InlineEdit } from './InlineEdit';

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/package-settings.js

@@ -62,6 +62,7 @@ var defaults = {
     ToolbarGroup: false,
     WebTerminal: false,
     WebTerminalContentWrapper: false,
+    WebTerminalProvider: false,
     EditSidePanel: false,
     CancelableTextEdit: false,
     DataSpreadsheet: false,

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.