@carbon/ibm-products 1.2.3 → 1.4.0

package/lib/components/CreateTearsheet/CreateTearsheetStep.js

@@ -9,6 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CreateTearsheetStep = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -17,9 +21,13 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _carbonComponentsReact = require("carbon-components-react");
 
+var _CreateTearsheet = require("./CreateTearsheet");
+
 var _settings = require("../../settings");
 
-var _constants = require("./constants");
+var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
+
+var _hooks = require("../../global/js/hooks");
 
 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); }
 
@@ -34,32 +42,77 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var componentName = 'CreateTearsheetStep';
 var blockClass = "".concat(_settings.pkg.prefix, "--tearsheet-create__step");
 var CreateTearsheetStep = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _cx;
+
   var children = _ref.children,
       className = _ref.className,
       subtitle = _ref.subtitle,
       description = _ref.description,
+      disableSubmit = _ref.disableSubmit,
+      introStep = _ref.introStep,
       title = _ref.title,
       hasFieldset = _ref.hasFieldset,
       fieldsetLegendText = _ref.fieldsetLegendText,
-      isViewingAllStepsTogether = _ref.isViewingAllStepsTogether;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(blockClass, className),
+      onNext = _ref.onNext,
+      onMount = _ref.onMount,
+      secondaryLabel = _ref.secondaryLabel;
+  var steps = (0, _react.useContext)(_CreateTearsheet.StepsContext);
+  var stepNumber = (0, _react.useContext)(_CreateTearsheet.StepNumberContext);
+  var previousState = (0, _hooks.usePreviousValue)({
+    currentStep: steps === null || steps === void 0 ? void 0 : steps.currentStep
+  }); // This useEffect reports back the onNext and onMount values so that they can be used
+  // in the appropriate custom hooks.
+
+  (0, _react.useEffect)(function () {
+    if (stepNumber === (steps === null || steps === void 0 ? void 0 : steps.currentStep) && (previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== (steps === null || steps === void 0 ? void 0 : steps.currentStep)) {
+      steps === null || steps === void 0 ? void 0 : steps.setOnNext(onNext);
+      steps === null || steps === void 0 ? void 0 : steps.setOnMount(onMount);
+    }
+  }, [onMount, onNext, steps, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]); // This useEffect makes sure that every CreateTearsheetStep reports back it's
+  // title, secondaryLabel, and introStep props so that it can be sent to the CreateInfluencer.
+
+  (0, _react.useEffect)(function () {
+    var _steps$stepData, _steps$stepData2;
+
+    var stepHasReported = steps === null || steps === void 0 ? void 0 : (_steps$stepData = steps.stepData) === null || _steps$stepData === void 0 ? void 0 : _steps$stepData.includes(function (item) {
+      return item.title === title;
+    });
+
+    if (!stepHasReported && (steps === null || steps === void 0 ? void 0 : (_steps$stepData2 = steps.stepData) === null || _steps$stepData2 === void 0 ? void 0 : _steps$stepData2.length) < (steps === null || steps === void 0 ? void 0 : steps.totalStepCount)) {
+      steps === null || steps === void 0 ? void 0 : steps.setStepData(function (prev) {
+        return [].concat((0, _toConsumableArray2.default)(prev), [{
+          title: title,
+          secondaryLabel: secondaryLabel,
+          introStep: introStep
+        }]);
+      });
+    }
+  }, [steps, title, secondaryLabel, introStep]); // Whenever we are the current step, supply our disableSubmit value to the
+  // steps container context so that it can manage the 'Next' button appropriately.
+
+  (0, _react.useEffect)(function () {
+    if (stepNumber === (steps === null || steps === void 0 ? void 0 : steps.currentStep)) {
+      steps.setIsDisabled(disableSubmit);
+    }
+  }, [steps, stepNumber, disableSubmit, onNext]);
+  return steps ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(blockClass, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (steps === null || steps === void 0 ? void 0 : steps.currentStep)), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (steps === null || steps === void 0 ? void 0 : steps.currentStep)), _cx)),
     ref: ref
   }, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Row, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Column, {
     xlg: 12,
     lg: 12,
     md: 8,
     sm: 8
-  }, !isViewingAllStepsTogether && /*#__PURE__*/_react.default.createElement("h4", {
+  }, /*#__PURE__*/_react.default.createElement("h4", {
     className: "".concat(blockClass, "--title")
-  }, title), !isViewingAllStepsTogether && subtitle && /*#__PURE__*/_react.default.createElement("h6", {
+  }, title), subtitle && /*#__PURE__*/_react.default.createElement("h6", {
     className: "".concat(blockClass, "--subtitle")
-  }, subtitle), !isViewingAllStepsTogether && description && /*#__PURE__*/_react.default.createElement("p", {
+  }, subtitle), description && /*#__PURE__*/_react.default.createElement("p", {
     className: "".concat(blockClass, "--description")
   }, description))), hasFieldset ? /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.FormGroup, {
     legendText: fieldsetLegendText,
     className: "".concat(blockClass, "--fieldset")
-  }, children) : children);
+  }, children) : children) : _pconsole.default.warn("You have tried using a ".concat(componentName, " component outside of a CreateTearsheet. This is not allowed. ").concat(componentName, "s should always be children of the CreateTearsheet"));
 }); // Return a placeholder if not released and not enabled by feature flag
 
 exports.CreateTearsheetStep = CreateTearsheetStep;
@@ -107,12 +160,6 @@ CreateTearsheetStep.propTypes = {
    */
   introStep: _propTypes.default.bool,
 
-  /**
-   * @ignore
-   * The is an internal prop set in CreateTearsheet so the step knows when to render it's title
-   */
-  isViewingAllStepsTogether: _propTypes.default.bool,
-
   /**
    * Optional function to be called on initial mount of a step.
    * For example, this can be used to fetch data that is required on a particular step.
@@ -146,6 +193,5 @@ CreateTearsheetStep.propTypes = {
 // component needs to make a choice or assumption when a prop is not supplied.
 
 CreateTearsheetStep.defaultProps = {
-  type: _constants.CREATE_TEARSHEET_STEP,
   hasFieldset: true
 };

package/lib/components/CreateTearsheet/index.js

@@ -15,12 +15,6 @@ Object.defineProperty(exports, "CreateTearsheetDivider", {
     return _CreateTearsheetDivider.CreateTearsheetDivider;
   }
 });
-Object.defineProperty(exports, "CreateTearsheetSection", {
-  enumerable: true,
-  get: function get() {
-    return _CreateTearsheetSection.CreateTearsheetSection;
-  }
-});
 Object.defineProperty(exports, "CreateTearsheetStep", {
   enumerable: true,
   get: function get() {
@@ -32,6 +26,4 @@ var _CreateTearsheet = require("./CreateTearsheet");
 
 var _CreateTearsheetStep = require("./CreateTearsheetStep");
 
-var _CreateTearsheetSection = require("./CreateTearsheetSection");
-
 var _CreateTearsheetDivider = require("./CreateTearsheetDivider");

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,38 @@ 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 clearCreateData = function clearCreateData() {
     setStepOneTextInputValue('');
@@ -106,6 +131,7 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
     setHasSubmitError(false);
     setIsInvalid(false);
     setOpen(false);
+    setValue1('');
   };
 
   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 +186,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 +234,13 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
     onToggle: function onToggle(event) {
       return setShouldReject(event);
     }
-  })))), /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
+  })))), /*#__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
+  }), /*#__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/ExportModal/ExportModal.js

@@ -152,7 +152,8 @@ 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),
@@ -161,7 +162,8 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     labelText: inputLabel,
     invalid: hasInvalidExtension(),
     invalidText: invalidInputText,
-    onBlur: onBlurHandler
+    onBlur: onBlurHandler,
+    "data-modal-primary-focus": true
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__messaging")
   }, loading && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Loading, {

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");