@carbon/ibm-products 2.23.0 → 2.25.0

package/es/components/TruncatedList/TruncatedList.js

@@ -0,0 +1,171 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { Children, useState, useRef, useEffect } from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import cx from '../../node_modules/classnames/index.js';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { pkg, carbon } from '../../settings.js';
+import { Button } from '@carbon/react';
+
+var _excluded = ["children", "className", "as", "buttonClassName", "collapsedItemsLimit", "expandedItemsLimit", "onClick", "viewLessLabel", "viewMoreLabel"];
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--truncated-list");
+var componentName = 'TruncatedList';
+var defaults = {
+  as: 'ul',
+  collapsedItemsLimit: 5,
+  expandedItemsLimit: 10,
+  onClick: function onClick() {},
+  viewLessLabel: 'View less',
+  viewMoreLabel: function viewMoreLabel(value) {
+    return "View more (".concat(value, ")");
+  }
+};
+
+/**
+ * The `TruncatedList` allows consumers to control how many items are
+ * revealed to the user while giving the user the ability to expand
+ * and see the entire list.
+ */
+var TruncatedList = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$as = _ref.as,
+    List = _ref$as === void 0 ? defaults.as : _ref$as,
+    buttonClassName = _ref.buttonClassName,
+    _ref$collapsedItemsLi = _ref.collapsedItemsLimit,
+    collapsedItemsLimit = _ref$collapsedItemsLi === void 0 ? defaults.collapsedItemsLimit : _ref$collapsedItemsLi,
+    _ref$expandedItemsLim = _ref.expandedItemsLimit,
+    expandedItemsLimit = _ref$expandedItemsLim === void 0 ? defaults.expandedItemsLimit : _ref$expandedItemsLim,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? defaults.onClick : _ref$onClick,
+    _ref$viewLessLabel = _ref.viewLessLabel,
+    viewLessLabel = _ref$viewLessLabel === void 0 ? defaults.viewLessLabel : _ref$viewLessLabel,
+    _ref$viewMoreLabel = _ref.viewMoreLabel,
+    viewMoreLabel = _ref$viewMoreLabel === void 0 ? defaults.viewMoreLabel : _ref$viewMoreLabel,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var childrenArray = Children.toArray(children);
+  // Exception handling: minimum number of items is 1.
+  var minItems = Math.max(collapsedItemsLimit, 1);
+  // Exception handling: maximum number of items is the number of items passed as children.
+  var maxItems = Math.min(expandedItemsLimit, childrenArray.length);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isCollapsed = _useState2[0],
+    setIsCollapsed = _useState2[1];
+  // To minimize *initial* animation,
+  //   (difference of zero height to component's rendered height)
+  // guesstimate the initial height to reduce animation distance.
+  //   (difference of the guessed height to rendered height - a few pixels)
+  var _useState3 = useState(minItems * 16),
+    _useState4 = _slicedToArray(_useState3, 2),
+    listHeight = _useState4[0],
+    setListHeight = _useState4[1];
+  var listRef = useRef();
+  var handleToggle = function handleToggle() {
+    setIsCollapsed(function (prev) {
+      return !prev;
+    });
+  };
+  useEffect(function () {
+    onClick(isCollapsed);
+  }, [isCollapsed, onClick]);
+
+  // Calculate height of the list by measuring the height of each item.
+  // (E.g. the height of plain text is not the same height as a link.)
+  // CSS animation requires an explicitly declared height for when the
+  // list is both collapsed and expanded.
+  useEffect(function () {
+    if (listRef && childrenArray.length > 0) {
+      var numItemsToShow = isCollapsed ? minItems : maxItems;
+      var items = listRef.current.childNodes;
+      var _listHeight = 0;
+      for (var index = 0; index < numItemsToShow; index++) {
+        var _window;
+        var height = ((_window = window) === null || _window === void 0 || (_window = _window.getComputedStyle(items[index])) === null || _window === void 0 ? void 0 : _window.height) || 16;
+        _listHeight += parseInt(height);
+      }
+      setListHeight(_listHeight);
+    }
+  }, [childrenArray, minItems, maxItems, isCollapsed, listRef]);
+  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+    className: cx(blockClass, className, isCollapsed ? "".concat(blockClass, "--collapsed") : "".concat(blockClass, "--expanded"),
+    // If the list is expanded && showing all the items,
+    // then disable scrolling using CSS, instead of adding an arbitrary #px to the height of the list.
+    !isCollapsed && childrenArray.length <= maxItems && "".concat(blockClass, "--expanded-all")),
+    ref: ref
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement(List, {
+    className: "".concat(blockClass, "__list"),
+    ref: listRef,
+    style: {
+      height: listHeight
+    }
+  }, isCollapsed ? childrenArray.slice(0, minItems) : children), childrenArray.length > minItems && /*#__PURE__*/React__default.createElement(Button, {
+    className: cx("".concat(blockClass, "__button"), "".concat(carbon.prefix, "--link"), buttonClassName),
+    kind: "ghost",
+    size: "sm",
+    onClick: handleToggle
+  }, isCollapsed ? viewMoreLabel(childrenArray.length - minItems) : viewLessLabel));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+TruncatedList = pkg.checkComponentEnabled(TruncatedList, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+TruncatedList.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+TruncatedList.propTypes = {
+  /**
+   * The type of list element to render.
+   * This could be a `ul`, `ol`, or a custom React component.
+   */
+  as: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string]),
+  /**
+   * Optional class name for expand/collapse button.
+   */
+  buttonClassName: PropTypes.string,
+  /**
+   * The contents of the TruncatedList.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * Number of items to render and display when the list is truncated and collapsed.
+   * Scrolling is not enabled when collapsed. The smallest number is 1.
+   */
+  collapsedItemsLimit: PropTypes.number,
+  /**
+   * Maximum number of items to show when the list is expanded. All
+   * items are rendered when the list is expanded. Scrolling is enabled
+   * if there are more items to display than this number.
+   */
+  expandedItemsLimit: PropTypes.number,
+  /**
+   * Optional callback reports the collapsed state of the list.
+   */
+  onClick: PropTypes.func,
+  /**
+   * Text label for when the list is expanded.
+   */
+  viewLessLabel: PropTypes.string,
+  /**
+   * Callback function for building the label when the list is collapsed.
+   */
+  viewMoreLabel: PropTypes.func
+};
+
+export { TruncatedList };

package/es/components/TruncatedList/index.d.ts

@@ -0,0 +1 @@
+export { TruncatedList } from "./TruncatedList";

package/es/components/UserAvatar/UserAvatar.d.ts

@@ -0,0 +1,2 @@
+export let UserAvatar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/es/components/UserAvatar/UserAvatar.js

@@ -0,0 +1,147 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * 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 { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import cx from '../../node_modules/classnames/index.js';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import { pkg } from '../../settings.js';
+import { User, Group } from '@carbon/react/icons';
+import { usePrefix, Tooltip } from '@carbon/react';
+import { TooltipTrigger } from '../TooltipTrigger/TooltipTrigger.js';
+
+var _excluded = ["backgroundColor", "className", "renderIcon", "tooltipText", "tooltipAlignment"];
+var _User, _User2, _Group;
+// Carbon and package components we use.
+/* TODO: @import(s) of carbon components and other package components. */
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--user-avatar");
+var componentName = 'UserAvatar';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+// Default values can be included here and then assigned to the prop params,
+// e.g. prop = defaults.prop,
+// This gathers default values together neatly and ensures non-primitive
+// values are initialized early to avoid react making unnecessary re-renders.
+// Note that default values are not required for props that are 'required',
+// nor for props where the component can apply undefined values reasonably.
+// Default values should be provided when the component needs to make a choice
+// or assumption when a prop is not supplied.
+
+// Default values for props
+// const defaults = {
+//   /* TODO: add defaults for relevant props if needed */
+// };
+
+/**
+ * TODO: A description of the component.
+ */
+
+var defaults = {
+  renderIcon: function renderIcon() {
+    return _User || (_User = /*#__PURE__*/React__default.createElement(User, {
+      size: 32
+    }));
+  },
+  tooltipAlignment: 'bottom',
+  tooltipText: 'Thomas J. Watson'
+};
+var UserAvatar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var _SetItem;
+  var backgroundColor = _ref.backgroundColor,
+    className = _ref.className,
+    _ref$renderIcon = _ref.renderIcon,
+    renderIcon = _ref$renderIcon === void 0 ? defaults.renderIcon : _ref$renderIcon,
+    _ref$tooltipText = _ref.tooltipText,
+    tooltipText = _ref$tooltipText === void 0 ? defaults.tooltipText : _ref$tooltipText,
+    _ref$tooltipAlignment = _ref.tooltipAlignment,
+    tooltipAlignment = _ref$tooltipAlignment === void 0 ? defaults.tooltipAlignment : _ref$tooltipAlignment,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var carbonPrefix = usePrefix();
+  var icons = {
+    user: {
+      md: _User2 || (_User2 = /*#__PURE__*/React__default.createElement(User, {
+        size: 32
+      }))
+    },
+    group: {
+      md: _Group || (_Group = /*#__PURE__*/React__default.createElement(Group, {
+        size: 32
+      }))
+    }
+  };
+  var getItem = function getItem(renderIcon) {
+    if (renderIcon === User) {
+      return icons.user['md'];
+    } else if (renderIcon === Group) {
+      return icons.group['md'];
+    } else {
+      return renderIcon;
+    }
+  };
+  var SetItem = getItem(renderIcon);
+  var renderUserAvatar = function renderUserAvatar() {
+    return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+      tabIndex: 0,
+      className: cx(blockClass,
+      // Apply the block class to the main HTML element
+      className, // Apply any supplied class names to the main HTML element.
+      "".concat(blockClass, "--").concat(backgroundColor),
+      // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
+      {
+        // switched classes dependant on props or state
+        // example: [`${blockClass}__here-if-small`]: size === 'sm',
+      }),
+      ref: ref,
+      role: "button"
+    }, getDevtoolsProps(componentName)), _SetItem || (_SetItem = /*#__PURE__*/React__default.createElement(SetItem, null)));
+  };
+  return SetItem && (tooltipText ? /*#__PURE__*/React__default.createElement(Tooltip, {
+    align: tooltipAlignment,
+    label: tooltipText,
+    className: "".concat(blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
+  }, /*#__PURE__*/React__default.createElement(TooltipTrigger, null, renderUserAvatar())) : renderUserAvatar());
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+UserAvatar = pkg.checkComponentEnabled(UserAvatar, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+UserAvatar.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+UserAvatar.propTypes = {
+  /**
+   * Provide the background color need to be set for UserAvatar.
+   */
+  backgroundColor: PropTypes.oneOf(['light-cyan', 'dark-cyan']),
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * Provide a custom icon to use if you need to use an icon other than the default one
+   */
+  renderIcon: PropTypes.func,
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  tooltipAlignment: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  /**
+   * Pass in the display name to have it shown on hover
+   */
+  tooltipText: PropTypes.string
+  /* TODO: add types and DocGen for all props. */
+};
+
+export { UserAvatar };

package/es/components/UserAvatar/index.d.ts

@@ -0,0 +1 @@
+export { UserAvatar } from "./UserAvatar";

package/es/components/UserProfileImage/UserProfileImage.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
+ */
+export let UserProfileImage: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/es/components/UserProfileImage/UserProfileImage.js

@@ -1,27 +1,22 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText", "tooltipAlignment"];
 /**
- * Copyright IBM Corp. 2021, 2021
+ * Copyright IBM Corp. 2020, 2024
  *
  * 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 portions of React that are needed.
-import React from 'react';
-
-// Other standard imports.
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { getDevtoolsProps } from '../../global/js/utils/devtools';
-import '../../global/js/utils/props-helper';
-import { pkg } from '../../settings';
-
-// Carbon and package components we use.
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import cx from '../../node_modules/classnames/index.js';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+import '../../global/js/utils/props-helper.js';
+import { pkg } from '../../settings.js';
 import { User, Group } from '@carbon/react/icons';
-import { Tooltip, usePrefix } from '@carbon/react';
-import { TooltipTrigger } from '../TooltipTrigger';
+import { usePrefix, Tooltip } from '@carbon/react';
+import { TooltipTrigger } from '../TooltipTrigger/TooltipTrigger.js';
+
+var _excluded = ["backgroundColor", "className", "kind", "icon", "initials", "image", "imageDescription", "size", "theme", "tooltipText", "tooltipAlignment"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--user-profile-image");
@@ -36,7 +31,8 @@ var defaults = {
 /**
  * The user profile avatar allows for an image of the user to be displayed by passing in the image prop. By default the component will display a user icon on a blue background.
  */
-export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var UserProfileImage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+  var _FillItem;
   var backgroundColor = _ref.backgroundColor,
     className = _ref.className,
     kind = _ref.kind,
@@ -54,34 +50,34 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   var icons = {
     user: {
       md: function md(props) {
-        return /*#__PURE__*/React.createElement(User, _extends({
+        return /*#__PURE__*/React__default.createElement(User, _extends({
           size: 20
         }, props));
       },
       lg: function lg(props) {
-        return /*#__PURE__*/React.createElement(User, _extends({
+        return /*#__PURE__*/React__default.createElement(User, _extends({
           size: 24
         }, props));
       },
       xl: function xl(props) {
-        return /*#__PURE__*/React.createElement(User, _extends({
+        return /*#__PURE__*/React__default.createElement(User, _extends({
           size: 32
         }, props));
       }
     },
     group: {
       md: function md(props) {
-        return /*#__PURE__*/React.createElement(Group, _extends({
+        return /*#__PURE__*/React__default.createElement(Group, _extends({
           size: 20
         }, props));
       },
       lg: function lg(props) {
-        return /*#__PURE__*/React.createElement(Group, _extends({
+        return /*#__PURE__*/React__default.createElement(Group, _extends({
           size: 24
         }, props));
       },
       xl: function xl(props) {
-        return /*#__PURE__*/React.createElement(Group, _extends({
+        return /*#__PURE__*/React__default.createElement(Group, _extends({
           size: 32
         }, props));
       }
@@ -98,7 +94,7 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   var getFillItem = function getFillItem() {
     if (image) {
       return function () {
-        return /*#__PURE__*/React.createElement("img", {
+        return /*#__PURE__*/React__default.createElement("img", {
           alt: imageDescription,
           src: image,
           className: "".concat(blockClass, "__photo ").concat(blockClass, "__photo--").concat(size)
@@ -121,16 +117,16 @@ export var UserProfileImage = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   };
   var FillItem = getFillItem();
   var renderUserProfileImage = function renderUserProfileImage() {
-    return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
       ref: ref,
       className: cx([blockClass, className, "".concat(blockClass, "--").concat(size), "".concat(blockClass, "--").concat(theme), "".concat(blockClass, "--").concat(backgroundColor || getRandomColor())])
-    }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(FillItem, null));
+    }, getDevtoolsProps(componentName)), _FillItem || (_FillItem = /*#__PURE__*/React__default.createElement(FillItem, null)));
   };
-  return FillItem && (tooltipText ? /*#__PURE__*/React.createElement(Tooltip, {
+  return FillItem && (tooltipText ? /*#__PURE__*/React__default.createElement(Tooltip, {
     align: tooltipAlignment,
     label: tooltipText,
     className: "".concat(blockClass, "__tooltip ").concat(carbonPrefix, "--icon-tooltip")
-  }, /*#__PURE__*/React.createElement(TooltipTrigger, null, renderUserProfileImage())) : renderUserProfileImage());
+  }, /*#__PURE__*/React__default.createElement(TooltipTrigger, null, renderUserProfileImage())) : renderUserProfileImage());
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -185,4 +181,6 @@ UserProfileImage.propTypes = {
    * Pass in the display name to have it shown on hover
    */
   tooltipText: PropTypes.string
-};
+};
+
+export { UserProfileImage };

package/es/components/UserProfileImage/index.d.ts

@@ -0,0 +1 @@
+export { UserProfileImage } from "./UserProfileImage";

package/es/components/WebTerminal/WebTerminal.d.ts

@@ -0,0 +1,5 @@
+/**
+ * The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI.
+ */
+export let WebTerminal: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';

package/es/components/WebTerminal/WebTerminal.js

@@ -1,32 +1,22 @@
-import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
-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", "documentationLinks", "documentationLinksIconDescription", "isInitiallyOpen"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2024
  *
  * 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 portions of React that are needed.
-import React, { useMemo, useState, useEffect } from 'react';
-
-// Other standard imports.
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import { pkg } from '../../settings';
-
-// Carbon and package components we use.
-import { Close, Help } from '@carbon/react/icons';
-import { Button, OverflowMenu, OverflowMenuItem, Theme } from '@carbon/react';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty, objectSpread2 as _objectSpread2, objectDestructuringEmpty as _objectDestructuringEmpty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, useMemo, useEffect } from 'react';
+import PropTypes from '../../node_modules/prop-types/index.js';
+import cx from '../../node_modules/classnames/index.js';
+import { pkg } from '../../settings.js';
+import { Help, Close } from '@carbon/react/icons';
+import { OverflowMenu, OverflowMenuItem, Button, Theme } from '@carbon/react';
 import { moderate02 } from '@carbon/motion';
-import { useWebTerminal } from './hooks';
-import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { useWebTerminal } from './hooks/index.js';
+import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
+
+var _excluded = ["actions", "children", "className", "closeIconDescription", "documentationLinks", "documentationLinksIconDescription", "isInitiallyOpen"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var componentName = 'WebTerminal';
@@ -43,7 +33,7 @@ var defaults = {
 /**
  * The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI.
  */
-export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
     children = _ref.children,
@@ -105,20 +95,20 @@ export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
     closeWebTerminal();
   };
-  return shouldRender ? /*#__PURE__*/React.createElement("div", _extends({}, _objectSpread(_objectSpread({}, rest), getDevtoolsProps(componentName)), {
+  return shouldRender ? /*#__PURE__*/React__default.createElement("div", _extends({}, _objectSpread2(_objectSpread2({}, rest), getDevtoolsProps(componentName)), {
     ref: ref,
     className: cx([blockClass, className, _defineProperty(_defineProperty({}, "".concat(blockClass, "--open"), open), "".concat(blockClass, "--closed"), !open)]),
     style: {
       animation: !prefersReducedMotion && webTerminalAnimationName
     },
     onAnimationEnd: onAnimationEnd
-  }), /*#__PURE__*/React.createElement("header", {
+  }), /*#__PURE__*/React__default.createElement("header", {
     className: "".concat(blockClass, "__bar")
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__actions")
-  }, showDocumentationLinks && /*#__PURE__*/React.createElement(OverflowMenu, {
+  }, showDocumentationLinks && /*#__PURE__*/React__default.createElement(OverflowMenu, {
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(Help, _extends({
+      return /*#__PURE__*/React__default.createElement(Help, _extends({
         size: 16
       }, props));
     },
@@ -128,14 +118,14 @@ export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size: "lg"
   }, documentationLinks.map(function (_ref4, i) {
     var rest = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
-    return /*#__PURE__*/React.createElement(OverflowMenuItem, _extends({
+    return /*#__PURE__*/React__default.createElement(OverflowMenuItem, _extends({
       key: i
     }, rest));
   })), actions.map(function (_ref5) {
     var renderIcon = _ref5.renderIcon,
       onClick = _ref5.onClick,
       iconDescription = _ref5.iconDescription;
-    return /*#__PURE__*/React.createElement(Button, {
+    return /*#__PURE__*/React__default.createElement(Button, {
       key: iconDescription,
       hasIconOnly: true,
       renderIcon: renderIcon,
@@ -144,10 +134,10 @@ export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       kind: "ghost",
       "aria-label": iconDescription
     });
-  })), /*#__PURE__*/React.createElement(Button, {
+  })), /*#__PURE__*/React__default.createElement(Button, {
     hasIconOnly: true,
     renderIcon: function renderIcon(props) {
-      return /*#__PURE__*/React.createElement(Close, _extends({
+      return /*#__PURE__*/React__default.createElement(Close, _extends({
         size: 16
       }, props));
     },
@@ -157,9 +147,9 @@ export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onAnimationEnd: function onAnimationEnd(event) {
       return event.stopPropagation();
     }
-  })), /*#__PURE__*/React.createElement(Theme, {
+  })), /*#__PURE__*/React__default.createElement(Theme, {
     theme: "g100"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__body")
   }, children))) : null;
 });
@@ -198,7 +188,7 @@ WebTerminal.propTypes = {
   /**
    * 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))),
+  documentationLinks: PropTypes.arrayOf(PropTypes.shape(_objectSpread2({}, OverflowMenuItem.propTypes))),
   /**
    * Description for the documentation link overflow menu tooltip
    */
@@ -207,4 +197,6 @@ WebTerminal.propTypes = {
    * Optionally pass if the web terminal should be open by default
    */
   isInitiallyOpen: PropTypes.bool
-};
+};
+
+export { WebTerminal };

package/es/components/WebTerminal/WebTerminalContentWrapper.d.ts

@@ -0,0 +1,2 @@
+export let WebTerminalContentWrapper: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';