@carbon/ibm-products 1.2.4 → 1.5.0

package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js

@@ -11,6 +11,10 @@ exports.MultiStepTearsheet = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _carbonComponentsReact = require("carbon-components-react");
@@ -23,30 +27,46 @@ var _CreateTearsheet = require("../CreateTearsheet");
 
 var _CreateTearsheetStep = require("../CreateTearsheetStep");
 
+var _excluded = ["value1", "setValue1"];
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/* eslint-disable react/prop-types */
-
-/**
- * Copyright IBM Corp. 2021, 2021
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
 var blockClass = "".concat(_settings.pkg.prefix, "--tearsheet-create-multi-step");
 
-var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
-  var backButtonText = _ref.backButtonText,
-      cancelButtonText = _ref.cancelButtonText,
-      className = _ref.className,
-      description = _ref.description,
-      influencerWidth = _ref.influencerWidth,
-      label = _ref.label,
-      nextButtonText = _ref.nextButtonText,
-      submitButtonText = _ref.submitButtonText,
-      title = _ref.title;
+var CustomStep = function CustomStep(_ref) {
+  var value1 = _ref.value1,
+      setValue1 = _ref.setValue1,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, (0, _extends2.default)({}, rest, {
+    disableSubmit: !value1
+  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
+    xlg: 8,
+    lg: 8,
+    md: 8,
+    sm: 8
+  }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
+    value: value1,
+    onChange: function onChange(event) {
+      return setValue1(event.target.value);
+    },
+    id: "custom-step-input",
+    labelText: "Location",
+    placeholder: "Enter location"
+  }))));
+};
+
+var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
+  var backButtonText = _ref2.backButtonText,
+      cancelButtonText = _ref2.cancelButtonText,
+      className = _ref2.className,
+      description = _ref2.description,
+      influencerWidth = _ref2.influencerWidth,
+      label = _ref2.label,
+      nextButtonText = _ref2.nextButtonText,
+      submitButtonText = _ref2.submitButtonText,
+      title = _ref2.title;
 
   var _useState = (0, _react.useState)(750),
       _useState2 = (0, _slicedToArray2.default)(_useState, 1),
@@ -69,33 +89,43 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
 
   var _useState9 = (0, _react.useState)(''),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      stepOneTextInputValue = _useState10[0],
-      setStepOneTextInputValue = _useState10[1];
+      value1 = _useState10[0],
+      setValue1 = _useState10[1];
 
   var _useState11 = (0, _react.useState)(''),
       _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-      topicDescriptionValue = _useState12[0],
-      setTopicDescriptionValue = _useState12[1];
+      stepOneTextInputValue = _useState12[0],
+      setStepOneTextInputValue = _useState12[1];
 
   var _useState13 = (0, _react.useState)(''),
       _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      topicVersionValue = _useState14[0],
-      setTopicVersionValue = _useState14[1];
+      topicDescriptionValue = _useState14[0],
+      setTopicDescriptionValue = _useState14[1];
 
-  var _useState15 = (0, _react.useState)(1),
+  var _useState15 = (0, _react.useState)(''),
       _useState16 = (0, _slicedToArray2.default)(_useState15, 2),
-      stepTwoTextInputValue = _useState16[0],
-      setStepTwoTextInputValue = _useState16[1];
+      topicVersionValue = _useState16[0],
+      setTopicVersionValue = _useState16[1];
 
-  var _useState17 = (0, _react.useState)('one-day'),
+  var _useState17 = (0, _react.useState)(1),
       _useState18 = (0, _slicedToArray2.default)(_useState17, 2),
-      stepThreeTextInputValue = _useState18[0],
-      setStepThreeTextInputValue = _useState18[1];
+      stepTwoTextInputValue = _useState18[0],
+      setStepTwoTextInputValue = _useState18[1];
 
-  var _useState19 = (0, _react.useState)(false),
+  var _useState19 = (0, _react.useState)('one-day'),
       _useState20 = (0, _slicedToArray2.default)(_useState19, 2),
-      isInvalid = _useState20[0],
-      setIsInvalid = _useState20[1];
+      stepThreeTextInputValue = _useState20[0],
+      setStepThreeTextInputValue = _useState20[1];
+
+  var _useState21 = (0, _react.useState)(false),
+      _useState22 = (0, _slicedToArray2.default)(_useState21, 2),
+      isInvalid = _useState22[0],
+      setIsInvalid = _useState22[1];
+
+  var _useState23 = (0, _react.useState)(false),
+      _useState24 = (0, _slicedToArray2.default)(_useState23, 2),
+      shouldIncludeAdditionalStep = _useState24[0],
+      setShouldIncludeAdditionalStep = _useState24[1];
 
   var clearCreateData = function clearCreateData() {
     setStepOneTextInputValue('');
@@ -106,6 +136,8 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
     setHasSubmitError(false);
     setIsInvalid(false);
     setOpen(false);
+    setValue1('');
+    setShouldIncludeAdditionalStep(false);
   };
 
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
@@ -160,9 +192,9 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
     sm: 8
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
     labelText: "Topic name",
+    placeholder: "Enter topic name",
     id: "tearsheet-multi-step-story-text-input-multi-step-1",
     value: stepOneTextInputValue,
-    placeholder: "Enter topic name",
     onChange: function onChange(event) {
       if (event.target.value.length) {
         setIsInvalid(false);
@@ -208,7 +240,27 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
     onToggle: function onToggle(event) {
       return setShouldReject(event);
     }
+  }), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
+    labelText: "Include additional step",
+    id: "include-additional-step-checkbox",
+    onChange: function onChange(value) {
+      return setShouldIncludeAdditionalStep(value);
+    },
+    checked: shouldIncludeAdditionalStep
   })))), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
+    title: "Dynamic step",
+    subtitle: "Dynamic step subtitle",
+    description: "This is an example showing how to include a dynamic step into the CreateTearsheet",
+    hasFieldset: false,
+    includeStep: shouldIncludeAdditionalStep
+  }, "dynamic step content"), /*#__PURE__*/_react.default.createElement(CustomStep, {
+    title: "Location",
+    subtitle: "Custom step subtitle",
+    description: "Custom step description (see storybook implementation for new custom step capability)",
+    value1: value1,
+    setValue1: setValue1,
+    hasFieldset: false
+  }), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
     title: "Partitions",
     disableSubmit: !stepTwoTextInputValue,
     subtitle: "One or more partitions make up a topic. A partition is an ordered list of messages.",

package/lib/components/CreateTearsheet/preview-components/MultiStepWithIntro.js

@@ -32,7 +32,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /* eslint-disable react/prop-types */
 
 /**
- * Copyright IBM Corp. 2021, 2021
+ * Copyright IBM Corp. 2021, 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.
@@ -177,14 +177,16 @@ var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     size: "lg"
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(_settings.pkg.prefix, "--tearsheet-create-multi-step--custom-tile-label")
-  }, "Plus")))), selectedCategory === 'plus' && /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
+  }, "Plus")))), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
     title: "Conditional step",
     subtitle: "This step will only show for plus category creation flows",
-    hasFieldset: false
-  }, "conditional step content"), selectedCategory === 'standard' && /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
+    hasFieldset: false,
+    includeStep: selectedCategory === 'plus'
+  }, "This step will only show for plus create flows"), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
     title: "Standard step only",
-    hasFieldset: false
-  }, "This step will only show for standard flows"), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
+    hasFieldset: false,
+    includeStep: selectedCategory === 'standard'
+  }, "This step will only show for standard create flows"), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
     onNext: function onNext() {
       return new Promise(function (resolve, reject) {
         setTimeout(function () {

package/lib/components/ExportModal/ExportModal.js

@@ -33,7 +33,7 @@ var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 
 var _settings = require("../../settings");
 
-var _excluded = ["body", "className", "error", "errorMessage", "filename", "inputLabel", "invalidInputText", "loading", "loadingMessage", "onClose", "onRequestSubmit", "open", "preformattedExtensions", "preformattedExtensionsLabel", "primaryButtonText", "secondaryButtonText", "successMessage", "successful", "title", "validExtensions"];
+var _excluded = ["body", "className", "error", "errorMessage", "filename", "hidePasswordLabel", "inputLabel", "inputType", "invalidInputText", "loading", "loadingMessage", "onClose", "onRequestSubmit", "open", "preformattedExtensions", "preformattedExtensionsLabel", "primaryButtonText", "secondaryButtonText", "showPasswordLabel", "successMessage", "successful", "title", "validExtensions"];
 
 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); }
 
@@ -52,7 +52,9 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       error = _ref.error,
       errorMessage = _ref.errorMessage,
       filename = _ref.filename,
+      hidePasswordLabel = _ref.hidePasswordLabel,
       inputLabel = _ref.inputLabel,
+      inputType = _ref.inputType,
       invalidInputText = _ref.invalidInputText,
       loading = _ref.loading,
       loadingMessage = _ref.loadingMessage,
@@ -63,6 +65,7 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       preformattedExtensionsLabel = _ref.preformattedExtensionsLabel,
       primaryButtonText = _ref.primaryButtonText,
       secondaryButtonText = _ref.secondaryButtonText,
+      showPasswordLabel = _ref.showPasswordLabel,
       successMessage = _ref.successMessage,
       successful = _ref.successful,
       title = _ref.title,
@@ -124,6 +127,15 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var internalId = (0, _react.useRef)((0, _uuidv.default)());
   var primaryButtonDisabled = loading || !name || hasInvalidExtension();
   var submitted = loading || error || successful;
+  var commonInputProps = (0, _defineProperty2.default)({
+    id: "text-input--".concat(internalId.current),
+    value: name,
+    onChange: onNameChangeHandler,
+    labelText: inputLabel,
+    invalid: hasInvalidExtension(),
+    invalidText: invalidInputText,
+    onBlur: onBlurHandler
+  }, 'data-modal-primary-focus', true);
   return /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.ComposedModal, (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, className),
     "aria-label": title,
@@ -152,17 +164,16 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       key: o.extension,
       id: o.extension,
       value: o.extension,
-      labelText: "".concat(o.extension, " (").concat(o.description, ")")
+      labelText: "".concat(o.extension, " (").concat(o.description, ")"),
+      "data-modal-primary-focus": true
     });
-  }))) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, {
-    id: "text-input--".concat(internalId.current),
-    value: name,
-    onChange: onNameChangeHandler,
-    labelText: inputLabel,
-    invalid: hasInvalidExtension(),
-    invalidText: invalidInputText,
-    onBlur: onBlurHandler
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  }))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__input-container")
+  }, inputType === 'text' ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.TextInput, commonInputProps) : /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.PasswordInput, (0, _extends2.default)({}, commonInputProps, {
+    showPasswordLabel: showPasswordLabel,
+    hidePasswordLabel: hidePasswordLabel,
+    tooltipPosition: "left"
+  })))), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__messaging")
   }, loading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Loading, {
     small: true,
@@ -213,11 +224,21 @@ ExportModal.propTypes = {
    */
   filename: _propTypes.default.string.isRequired,
 
+  /**
+   * label text that's displayed when hovering over visibility toggler to hide key
+   */
+  hidePasswordLabel: _propTypes.default.string,
+
   /**
    * label for the text input
    */
   inputLabel: _propTypes.default.string,
 
+  /**
+   * specify the type of text input
+   */
+  inputType: _propTypes.default.oneOf(['text', 'password']),
+
   /**
    * text for an invalid input
    */
@@ -271,6 +292,11 @@ ExportModal.propTypes = {
    */
   secondaryButtonText: _propTypes.default.string.isRequired,
 
+  /**
+   * label text that's displayed when hovering over visibility toggler to show key
+   */
+  showPasswordLabel: _propTypes.default.string,
+
   /**
    * messaging to display if the export was successful
    */
@@ -292,6 +318,7 @@ ExportModal.propTypes = {
   validExtensions: _propTypes.default.array
 };
 ExportModal.defaultProps = {
+  inputType: 'text',
   preformattedExtensions: [],
   validExtensions: []
 };

package/lib/components/ImportModal/ImportModal.js

@@ -250,7 +250,8 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     accept: accept,
     labelText: fileDropLabel,
     onAddFiles: onAddFile,
-    disabled: hasFiles
+    disabled: hasFiles,
+    "data-modal-primary-focus": true
   }), inputLabel && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "__label")
   }, inputLabel), /*#__PURE__*/_react.default.createElement("div", {

package/lib/components/InlineEdit/InlineEdit.js

@@ -0,0 +1,242 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineEdit = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _devtools = require("../../global/js/utils/devtools");
+
+var _settings = require("../../settings");
+
+var _ = require("../");
+
+var _carbonComponentsReact = require("carbon-components-react");
+
+var _iconsReact = require("@carbon/icons-react");
+
+var _excluded = ["className", "disabled", "editDescription", "id", "inline", "invalid", "invalidText", "labelText", "onChange", "onInput", "onRevert", "revertDescription", "saveDescription", "saveDisabled", "size", "value", "warn", "warnText"];
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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; }
+
+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) { (0, _defineProperty2.default)(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; }
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(_settings.pkg.prefix, "--inline-edit");
+var componentName = 'InlineEdit'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+/**
+ * TODO: A description of the component.
+ */
+
+var InlineEdit = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      disabled = _ref.disabled,
+      editDescription = _ref.editDescription,
+      id = _ref.id,
+      inline = _ref.inline,
+      invalid = _ref.invalid,
+      invalidText = _ref.invalidText,
+      labelText = _ref.labelText,
+      onChange = _ref.onChange,
+      onInput = _ref.onInput,
+      onRevert = _ref.onRevert,
+      revertDescription = _ref.revertDescription,
+      saveDescription = _ref.saveDescription,
+      saveDisabled = _ref.saveDisabled,
+      size = _ref.size,
+      value = _ref.value,
+      warn = _ref.warn,
+      warnText = _ref.warnText,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      editing = _useState2[0],
+      setEditing = _useState2[1];
+
+  var handleEdit = function handleEdit() {
+    return setEditing(function (prev) {
+      return !prev;
+    });
+  };
+
+  var handleChange = function handleChange(val) {
+    setEditing(false);
+    onChange(val);
+  };
+
+  var handleRevert = function handleRevert() {
+    setEditing(false);
+    onRevert(value);
+  };
+
+  var stdProps = _objectSpread(_objectSpread({}, 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, "--editing"), editing)),
+    id: id,
+    size: size,
+    ref: ref
+  }, (0, _devtools.getDevtoolsProps)(componentName));
+
+  return editing ? /*#__PURE__*/_react.default.createElement(_.CancelableTextEdit, (0, _extends2.default)({}, stdProps, {
+    hideLabel: true,
+    inline: inline,
+    invalid: invalid,
+    invalidText: invalidText,
+    labelText: labelText,
+    onChange: handleChange,
+    onInput: onInput,
+    onRevert: handleRevert,
+    revertDescription: revertDescription,
+    saveDescription: saveDescription,
+    saveDisabled: saveDisabled,
+    value: value,
+    warn: warn,
+    warnText: warnText
+  })) : /*#__PURE__*/_react.default.createElement("div", stdProps, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__value")
+  }, value), /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Button, {
+    className: "".concat(blockClass, "__button ").concat(_settings.carbon.prefix, "--btn--md"),
+    kind: "ghost",
+    hasIconOnly: true,
+    iconDescription: editDescription,
+    onClick: handleEdit,
+    renderIcon: disabled ? _iconsReact.EditOff16 : _iconsReact.Edit16,
+    disabled: disabled
+  }));
+}); // Return a placeholder if not released and not enabled by feature flag
+
+
+exports.InlineEdit = InlineEdit;
+exports.InlineEdit = InlineEdit = _settings.pkg.checkComponentEnabled(InlineEdit, componentName); // The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+
+InlineEdit.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.
+
+InlineEdit.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * disable edit
+   */
+  disabled: _propTypes.default.bool,
+
+  /**
+   * Label for the edit button
+   */
+  editDescription: _propTypes.default.string.isRequired,
+
+  /**
+   * ID for inline edit
+   */
+  id: _propTypes.default.string,
+
+  /* TODO: add types and DocGen for all props. */
+
+  /**
+  * inline variant
+  */
+  inline: _propTypes.default.bool,
+
+  /**
+   * set invalid state for input
+   */
+  invalid: _propTypes.default.bool,
+
+  /**
+   * text shown when invalid is true
+   */
+  invalidText: _propTypes.default.string,
+
+  /**
+   * label for text input
+   */
+  labelText: _propTypes.default.string,
+
+  /**
+   * method called on change event
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * method called on input event
+   */
+  onInput: _propTypes.default.func,
+
+  /**
+   * method called on revert event
+   */
+  onRevert: _propTypes.default.func,
+
+  /**
+   * label for revert button
+   */
+  revertDescription: _propTypes.default.string.isRequired,
+
+  /**
+   * label for save button
+   */
+  saveDescription: _propTypes.default.string.isRequired,
+
+  /**
+   * disabled state of the save button
+   */
+  saveDisabled: _propTypes.default.bool,
+
+  /**
+   * vertical size of control
+   */
+  size: _propTypes.default.oneOf(['sm', 'md', 'lg']),
+
+  /**
+   * initial/unedited value
+   */
+  value: _propTypes.default.string,
+
+  /**
+   * set warn state for input
+   */
+  warn: _propTypes.default.bool,
+
+  /**
+   * text shown when warn true
+   */
+  warnText: _propTypes.default.string
+}; // Default values for component props. 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.
+
+InlineEdit.defaultProps = {
+  /* TODO: add defaults for relevant props. */
+  size: 'md'
+};

package/lib/components/InlineEdit/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "InlineEdit", {
+  enumerable: true,
+  get: function get() {
+    return _InlineEdit.InlineEdit;
+  }
+});
+
+var _InlineEdit = require("./InlineEdit");

package/lib/components/MultiAddSelect/MultiAddSelect.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiAddSelect = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _AddSelect = require("../AddSelect");
+
+var _devtools = require("../../global/js/utils/devtools");
+
+var _settings = require("../../settings");
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+// import PropTypes from 'prop-types';
+var componentName = 'MultiAddSelect';
+var MultiAddSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement(_AddSelect.AddSelect, (0, _extends2.default)({}, props, {
+    multi: true,
+    ref: ref
+  }, (0, _devtools.getDevtoolsProps)(componentName)));
+});
+exports.MultiAddSelect = MultiAddSelect;
+exports.MultiAddSelect = MultiAddSelect = _settings.pkg.checkComponentEnabled(MultiAddSelect, componentName);
+MultiAddSelect.propTypes = {};
+MultiAddSelect.displayName = componentName;

package/lib/components/MultiAddSelect/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "MultiAddSelect", {
+  enumerable: true,
+  get: function get() {
+    return _MultiAddSelect.MultiAddSelect;
+  }
+});
+
+var _MultiAddSelect = require("./MultiAddSelect");