@carbon/ibm-products 1.23.1 → 1.25.1

package/es/components/EditTearsheet/preview-components/MultiFormEditTearsheet.js

@@ -0,0 +1,230 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/* eslint-disable react/prop-types */
+
+/**
+ * Copyright IBM Corp. 2022, 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.
+ */
+import React, { useState } from 'react';
+import { Button, Column, InlineNotification, RadioButtonGroup, RadioButton, Row, TextInput, Toggle, NumberInput } from 'carbon-components-react';
+import cx from 'classnames';
+import { pkg } from '../../../settings';
+import { EditTearsheet } from '../EditTearsheet';
+import { EditTearsheetForm } from '../EditTearsheetForm';
+var blockClass = "".concat(pkg.prefix, "--tearsheet-edit-multi-form");
+export var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
+  var cancelButtonText = _ref.cancelButtonText,
+      className = _ref.className,
+      description = _ref.description,
+      influencerWidth = _ref.influencerWidth,
+      label = _ref.label,
+      submitButtonText = _ref.submitButtonText,
+      title = _ref.title;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hasSubmitError = _useState4[0],
+      setHasSubmitError = _useState4[1];
+
+  var _useState5 = useState('Topic name here'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      formOneTextInputValue = _useState6[0],
+      setFormOneTextInputValue = _useState6[1];
+
+  var _useState7 = useState('Topic description here'),
+      _useState8 = _slicedToArray(_useState7, 2),
+      topicDescriptionValue = _useState8[0],
+      setTopicDescriptionValue = _useState8[1];
+
+  var _useState9 = useState('Topic value here'),
+      _useState10 = _slicedToArray(_useState9, 2),
+      topicVersionValue = _useState10[0],
+      setTopicVersionValue = _useState10[1];
+
+  var _useState11 = useState('Location here'),
+      _useState12 = _slicedToArray(_useState11, 2),
+      topicLocationValue = _useState12[0],
+      setTopicLocationValue = _useState12[1];
+
+  var _useState13 = useState(1),
+      _useState14 = _slicedToArray(_useState13, 2),
+      formTwoTextInputValue = _useState14[0],
+      setFormTwoTextInputValue = _useState14[1];
+
+  var _useState15 = useState('one-day'),
+      _useState16 = _slicedToArray(_useState15, 2),
+      formThreeTextInputValue = _useState16[0],
+      setFormThreeTextInputValue = _useState16[1];
+
+  var _useState17 = useState(false),
+      _useState18 = _slicedToArray(_useState17, 2),
+      isInvalid = _useState18[0],
+      setIsInvalid = _useState18[1];
+
+  var clearCreateData = function clearCreateData() {
+    setFormOneTextInputValue(formOneTextInputValue);
+    setTopicDescriptionValue(topicDescriptionValue);
+    setTopicVersionValue(topicVersionValue);
+    setTopicLocationValue(topicLocationValue);
+    setFormTwoTextInputValue(1);
+    setFormThreeTextInputValue('one-day');
+    setHasSubmitError(false);
+    setIsInvalid(false);
+    setOpen(false);
+  };
+
+  var handleModalClick = function handleModalClick() {
+    setOpen(!open);
+  };
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/React.createElement(Button, {
+    onClick: handleModalClick
+  }, open ? 'Close EditTearsheet' : 'Open EditTearsheet'), /*#__PURE__*/React.createElement(EditTearsheet, {
+    influencerWidth: influencerWidth,
+    label: label,
+    className: cx(blockClass, className),
+    submitButtonText: submitButtonText,
+    cancelButtonText: cancelButtonText,
+    description: description,
+    title: title,
+    open: open,
+    onHandleModalClick: handleModalClick,
+    onClose: clearCreateData
+  }, /*#__PURE__*/React.createElement(EditTearsheetForm, {
+    title: "Topic name",
+    fieldsetLegendText: "Topic information",
+    subtitle: "This is the unique name used to recognize your topic",
+    description: "It will also be used by your producers and consumers as part of the connection information, so make it something easy to recognize."
+  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+    xlg: 8,
+    lg: 8,
+    md: 8,
+    sm: 8
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    labelText: "Topic name",
+    placeholder: "Enter topic name",
+    id: "tearsheet-multi-form-story-text-input-multi-form-1",
+    value: formOneTextInputValue,
+    onChange: function onChange(event) {
+      if (event.target.value.length) {
+        setIsInvalid(false);
+      }
+
+      setFormOneTextInputValue(event.target.value);
+    },
+    invalid: isInvalid,
+    invalidText: "This is a required field",
+    onBlur: function onBlur() {
+      if (!formOneTextInputValue.length) {
+        setIsInvalid(true);
+      }
+    }
+  }), /*#__PURE__*/React.createElement(TextInput, {
+    labelText: "Topic description (optional)",
+    id: "tearsheet-multi-form-story-text-input-multi-form-1-input-2",
+    value: topicDescriptionValue,
+    placeholder: "Enter topic description",
+    onChange: function onChange(event) {
+      return setTopicDescriptionValue(event.target.value);
+    }
+  }), /*#__PURE__*/React.createElement(TextInput, {
+    labelText: "Topic version (optional)",
+    id: "tearsheet-multi-form-story-text-input-multi-form-1-input-3",
+    value: topicVersionValue,
+    placeholder: "Enter topic version",
+    onChange: function onChange(event) {
+      return setTopicVersionValue(event.target.value);
+    }
+  }), hasSubmitError && /*#__PURE__*/React.createElement(InlineNotification, {
+    kind: "error",
+    title: "Error",
+    subtitle: "Resolve errors to continue",
+    onClose: function onClose() {
+      return setHasSubmitError(!hasSubmitError);
+    }
+  }), /*#__PURE__*/React.createElement(Toggle, {
+    className: "".concat(blockClass, "__error--toggle"),
+    id: "simulated-error-toggle",
+    size: "sm",
+    labelText: "Simulate error",
+    onToggle: function onToggle() {
+      return setHasSubmitError(!hasSubmitError);
+    },
+    toggled: hasSubmitError
+  })))), /*#__PURE__*/React.createElement(EditTearsheetForm, {
+    title: "Location",
+    subtitle: "Custom form subtitle",
+    fieldsetLegendText: "",
+    description: "Custom form description (see storybook implementation for new custom form capability)"
+  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+    xlg: 8,
+    lg: 8,
+    md: 8,
+    sm: 8
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    value: topicLocationValue,
+    onChange: function onChange(event) {
+      return setTopicLocationValue(event.target.value);
+    },
+    id: "custom-form-input",
+    labelText: "Location",
+    placeholder: "Enter location"
+  })))), /*#__PURE__*/React.createElement(EditTearsheetForm, {
+    title: "Partitions",
+    subtitle: "One or more partitions make up a topic. A partition is an ordered list of messages.",
+    description: "Partitions are distributed across the brokers in order to increase the scalability of your topic. You can also use them to distribute messages across the members of a consumer group.",
+    fieldsetLegendText: "Partition information"
+  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+    xlg: 3,
+    lg: 3
+  }, /*#__PURE__*/React.createElement(NumberInput, {
+    id: "carbon-number",
+    min: 1,
+    max: 100,
+    value: formTwoTextInputValue,
+    label: "Partitions",
+    helperText: "1 partition is sufficient for getting started but, production systems often have more.",
+    invalidText: "Max partitions is 100, min is 1",
+    onChange: function onChange(event) {
+      return setFormTwoTextInputValue(event.imaginaryTarget.value);
+    }
+  })))), /*#__PURE__*/React.createElement(EditTearsheetForm, {
+    title: "Message retention",
+    subtitle: "This is how long messages are retained before they are deleted.",
+    description: "If your messages are not read by a consumer within this time, they will be missed.",
+    fieldsetLegendText: "Message retention scheduling"
+  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+    xlg: 8,
+    lg: 8,
+    md: 8,
+    sm: 8
+  }, /*#__PURE__*/React.createElement(RadioButtonGroup, {
+    legendText: "Message retention",
+    name: "radio-button-group",
+    defaultSelected: formThreeTextInputValue,
+    onChange: function onChange(value) {
+      return setFormThreeTextInputValue(value);
+    },
+    orientation: "vertical"
+  }, /*#__PURE__*/React.createElement(RadioButton, {
+    labelText: "A day",
+    value: "one-day",
+    id: "one-day"
+  }), /*#__PURE__*/React.createElement(RadioButton, {
+    labelText: "A week",
+    value: "one-week",
+    id: "one-week"
+  }), /*#__PURE__*/React.createElement(RadioButton, {
+    labelText: "A month",
+    value: "one-month",
+    id: "one-month"
+  })))))));
+};

package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className"];
+
+/**
+ * Copyright IBM Corp. 2022, 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.
+ */
+// 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 { pkg
+/*, carbon */
+} from '../../settings'; // 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, "--edit-tearsheet-narrow");
+var componentName = 'EditTearsheetNarrow'; // 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.
+ */
+
+export var EditTearsheetNarrow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx(blockClass, // Apply the block class to the main HTML element
+    className, // Apply any supplied class names to the main HTML element.
+    // 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: "main"
+  }, getDevtoolsProps(componentName)), children);
+}); // Return a placeholder if not released and not enabled by feature flag
+
+EditTearsheetNarrow = pkg.checkComponentEnabled(EditTearsheetNarrow, componentName); // The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+
+EditTearsheetNarrow.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.
+
+EditTearsheetNarrow.propTypes = {
+  /**
+   * Provide the contents of the EditTearsheetNarrow.
+   */
+  children: PropTypes.node.isRequired,
+
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string
+  /* TODO: add types and DocGen for all props. */
+
+};

package/es/components/EditTearsheetNarrow/index.js

@@ -0,0 +1,7 @@
+/**
+ * Copyright IBM Corp. 2022, 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.
+ */
+export { EditTearsheetNarrow } from './EditTearsheetNarrow';

package/es/components/EmptyStates/EmptyStateContent.js

@@ -36,7 +36,8 @@ export var EmptyStateContent = function EmptyStateContent(_ref) {
     className: "".concat(blockClass, "__action-button"),
     kind: action.kind || 'tertiary',
     onClick: action.onClick,
-    renderIcon: action.renderIcon || null
+    renderIcon: action.renderIcon || null,
+    size: 'sm'
   }), action.text), (link === null || link === void 0 ? void 0 : link.text) && (link === null || link === void 0 ? void 0 : link.href) && /*#__PURE__*/React.createElement(Link, _extends({}, link, {
     className: "".concat(blockClass, "__link"),
     href: link.href

package/es/components/ImportModal/ImportModal.js

@@ -4,7 +4,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["accept", "className", "defaultErrorBody", "defaultErrorHeader", "description", "fetchErrorBody", "fetchErrorHeader", "fileDropHeader", "fileDropLabel", "fileUploadLabel", "inputButtonText", "inputId", "inputLabel", "inputPlaceholder", "invalidFileTypeErrorBody", "invalidFileTypeErrorHeader", "invalidIconDescription", "maxFileSize", "maxFileSizeErrorBody", "maxFileSizeErrorHeader", "onClose", "onRequestSubmit", "open", "primaryButtonText", "secondaryButtonText", "title"];
+var _excluded = ["accept", "className", "defaultErrorBody", "defaultErrorHeader", "description", "fetchErrorBody", "fetchErrorHeader", "fileDropHeader", "fileDropLabel", "fileUploadLabel", "inputButtonIcon", "inputButtonText", "inputId", "inputLabel", "inputPlaceholder", "invalidFileTypeErrorBody", "invalidFileTypeErrorHeader", "invalidIconDescription", "maxFileSize", "maxFileSizeErrorBody", "maxFileSizeErrorHeader", "onClose", "onRequestSubmit", "open", "primaryButtonText", "secondaryButtonText", "title"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 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; }
@@ -18,6 +18,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 // LICENSE file in the root directory of this source tree.
 //
 import React, { useState, forwardRef } from 'react';
+import { Add20 } from '@carbon/icons-react';
 import { ComposedModal, ModalHeader, ModalFooter, ModalBody, FileUploaderDropContainer, FileUploaderItem, TextInput, Button } from 'carbon-components-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
@@ -41,6 +42,7 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
       fileDropHeader = _ref.fileDropHeader,
       fileDropLabel = _ref.fileDropLabel,
       fileUploadLabel = _ref.fileUploadLabel,
+      inputButtonIcon = _ref.inputButtonIcon,
       inputButtonText = _ref.inputButtonText,
       inputId = _ref.inputId,
       inputLabel = _ref.inputLabel,
@@ -252,7 +254,8 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onClick: fetchFile,
     className: "".concat(blockClass, "__import-button"),
     size: "sm",
-    disabled: importButtonDisabled
+    disabled: importButtonDisabled,
+    renderIcon: inputButtonIcon ? Add20 : null
   }, inputButtonText)), /*#__PURE__*/React.createElement("div", {
     className: "".concat(carbon.prefix, "--file-container ").concat(blockClass, "__file-container")
   }, hasFiles && /*#__PURE__*/React.createElement("p", {
@@ -341,6 +344,11 @@ ImportModal.propTypes = {
    */
   fileUploadLabel: PropTypes.string,
 
+  /**
+   * Button icon for import by url button
+   */
+  inputButtonIcon: PropTypes.bool,
+
   /**
    * Button text for import by url button
    */

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; }
 
@@ -24,6 +24,7 @@ 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 { 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)), {
@@ -172,23 +189,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 { 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,7 +14,7 @@ var Navigation = function Navigation(_ref) {
     prefix: "IBM"
   }, "[Platform]"), /*#__PURE__*/React.createElement(HeaderGlobalBar, null, /*#__PURE__*/React.createElement(HeaderGlobalAction, {
     "aria-label": "Web terminal",
-    onClick: openTerminal
+    onClick: openWebTerminal
   }, /*#__PURE__*/React.createElement(Terminal, null)), /*#__PURE__*/React.createElement(HeaderGlobalAction, {
     "aria-label": "Search",
     onClick: function onClick() {}
@@ -22,10 +24,4 @@ var Navigation = function Navigation(_ref) {
   }, /*#__PURE__*/React.createElement(User, null))));
 };
 
-Navigation.propTypes = {
-  /**
-   * Opens the terminal
-   */
-  openTerminal: PropTypes.func.isRequired
-};
 export default Navigation;

package/es/components/index.js

@@ -32,9 +32,12 @@ 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';
 export { DataSpreadsheet } from './DataSpreadsheet';
-export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle } from './Datagrid';
+export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle } from './Datagrid';
+export { EditTearsheet } from './EditTearsheet';
+export { EditTearsheetNarrow } from './EditTearsheetNarrow';
+export { EditFullPage } from './EditFullPage';

package/es/global/js/package-settings.js

@@ -62,10 +62,14 @@ var defaults = {
     ToolbarGroup: false,
     WebTerminal: false,
     WebTerminalContentWrapper: false,
+    WebTerminalProvider: false,
     EditSidePanel: false,
     CancelableTextEdit: false,
     DataSpreadsheet: false,
-    Datagrid: false
+    Datagrid: false,
+    EditTearsheet: false,
+    EditTearsheetNarrow: false,
+    EditFullPage: false
     /* new component flags here - comment used by generate CLI */
 
   },

package/lib/components/AddSelect/AddSelect.js

@@ -47,7 +47,7 @@ var AddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     return (0, _defineProperty2.default)({
       id: item.id
     }, modifierAttribute, item[modifierAttribute]);
-  }) : null;
+  }) : [];
   return /*#__PURE__*/_react.default.createElement(_AddSelectBody.AddSelectBody, (0, _extends2.default)({}, props, {
     className: blockClass,
     ref: ref,
@@ -123,7 +123,6 @@ AddSelect.propTypes = {
    * portal target for the all tags modal
    */
   portalTarget: _propTypes.default.node,
-  removeIconDescription: _propTypes.default.string,
   searchResultsLabel: _propTypes.default.string,
   title: _propTypes.default.string.isRequired
 };