@carbon/ibm-products 1.2.3 → 1.4.0

package/es/components/CreateTearsheet/CreateTearsheetStep.js

@@ -1,44 +1,94 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+
 /**
  * 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.
  */
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Column, FormGroup, Row } from 'carbon-components-react';
+import { StepsContext, StepNumberContext } from './CreateTearsheet';
 import { pkg } from '../../settings';
-import { CREATE_TEARSHEET_STEP } from './constants';
+import pconsole from '../../global/js/utils/pconsole';
+import { usePreviousValue } from '../../global/js/hooks';
 var componentName = 'CreateTearsheetStep';
 var blockClass = "".concat(pkg.prefix, "--tearsheet-create__step");
 export var CreateTearsheetStep = /*#__PURE__*/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.createElement("div", {
-    className: cx(blockClass, className),
+      onNext = _ref.onNext,
+      onMount = _ref.onMount,
+      secondaryLabel = _ref.secondaryLabel;
+  var steps = useContext(StepsContext);
+  var stepNumber = useContext(StepNumberContext);
+  var previousState = 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.
+
+  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.
+
+  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(_toConsumableArray(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.
+
+  useEffect(function () {
+    if (stepNumber === (steps === null || steps === void 0 ? void 0 : steps.currentStep)) {
+      steps.setIsDisabled(disableSubmit);
+    }
+  }, [steps, stepNumber, disableSubmit, onNext]);
+  return steps ? /*#__PURE__*/React.createElement("div", {
+    className: cx(blockClass, className, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (steps === null || steps === void 0 ? void 0 : steps.currentStep)), _defineProperty(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (steps === null || steps === void 0 ? void 0 : steps.currentStep)), _cx)),
     ref: ref
   }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
     xlg: 12,
     lg: 12,
     md: 8,
     sm: 8
-  }, !isViewingAllStepsTogether && /*#__PURE__*/React.createElement("h4", {
+  }, /*#__PURE__*/React.createElement("h4", {
     className: "".concat(blockClass, "--title")
-  }, title), !isViewingAllStepsTogether && subtitle && /*#__PURE__*/React.createElement("h6", {
+  }, title), subtitle && /*#__PURE__*/React.createElement("h6", {
     className: "".concat(blockClass, "--subtitle")
-  }, subtitle), !isViewingAllStepsTogether && description && /*#__PURE__*/React.createElement("p", {
+  }, subtitle), description && /*#__PURE__*/React.createElement("p", {
     className: "".concat(blockClass, "--description")
   }, description))), hasFieldset ? /*#__PURE__*/React.createElement(FormGroup, {
     legendText: fieldsetLegendText,
     className: "".concat(blockClass, "--fieldset")
-  }, children) : children);
+  }, children) : children) : pconsole.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
 
 CreateTearsheetStep = pkg.checkComponentEnabled(CreateTearsheetStep, componentName);
@@ -85,12 +135,6 @@ CreateTearsheetStep.propTypes = {
    */
   introStep: PropTypes.bool,
 
-  /**
-   * @ignore
-   * The is an internal prop set in CreateTearsheet so the step knows when to render it's title
-   */
-  isViewingAllStepsTogether: PropTypes.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.
@@ -124,6 +168,5 @@ CreateTearsheetStep.propTypes = {
 // component needs to make a choice or assumption when a prop is not supplied.
 
 CreateTearsheetStep.defaultProps = {
-  type: CREATE_TEARSHEET_STEP,
   hasFieldset: true
 };

package/es/components/CreateTearsheet/index.js

@@ -6,5 +6,4 @@
  */
 export { CreateTearsheet } from './CreateTearsheet';
 export { CreateTearsheetStep } from './CreateTearsheetStep';
-export { CreateTearsheetSection } from './CreateTearsheetSection';
 export { CreateTearsheetDivider } from './CreateTearsheetDivider';

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

@@ -1,4 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["value1", "setValue1"];
 
 /* eslint-disable react/prop-types */
 
@@ -15,16 +18,40 @@ import { pkg } from '../../../settings';
 import { CreateTearsheet } from '../CreateTearsheet';
 import { CreateTearsheetStep } from '../CreateTearsheetStep';
 var blockClass = "".concat(pkg.prefix, "--tearsheet-create-multi-step");
-export 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 = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(CreateTearsheetStep, _extends({}, rest, {
+    disableSubmit: !value1
+  }), /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+    xlg: 8,
+    lg: 8,
+    md: 8,
+    sm: 8
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    value: value1,
+    onChange: function onChange(event) {
+      return setValue1(event.target.value);
+    },
+    id: "custom-step-input",
+    labelText: "Location",
+    placeholder: "Enter location"
+  }))));
+};
+
+export 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 = useState(750),
       _useState2 = _slicedToArray(_useState, 1),
@@ -47,33 +74,38 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
 
   var _useState9 = useState(''),
       _useState10 = _slicedToArray(_useState9, 2),
-      stepOneTextInputValue = _useState10[0],
-      setStepOneTextInputValue = _useState10[1];
+      value1 = _useState10[0],
+      setValue1 = _useState10[1];
 
   var _useState11 = useState(''),
       _useState12 = _slicedToArray(_useState11, 2),
-      topicDescriptionValue = _useState12[0],
-      setTopicDescriptionValue = _useState12[1];
+      stepOneTextInputValue = _useState12[0],
+      setStepOneTextInputValue = _useState12[1];
 
   var _useState13 = useState(''),
       _useState14 = _slicedToArray(_useState13, 2),
-      topicVersionValue = _useState14[0],
-      setTopicVersionValue = _useState14[1];
+      topicDescriptionValue = _useState14[0],
+      setTopicDescriptionValue = _useState14[1];
 
-  var _useState15 = useState(1),
+  var _useState15 = useState(''),
       _useState16 = _slicedToArray(_useState15, 2),
-      stepTwoTextInputValue = _useState16[0],
-      setStepTwoTextInputValue = _useState16[1];
+      topicVersionValue = _useState16[0],
+      setTopicVersionValue = _useState16[1];
 
-  var _useState17 = useState('one-day'),
+  var _useState17 = useState(1),
       _useState18 = _slicedToArray(_useState17, 2),
-      stepThreeTextInputValue = _useState18[0],
-      setStepThreeTextInputValue = _useState18[1];
+      stepTwoTextInputValue = _useState18[0],
+      setStepTwoTextInputValue = _useState18[1];
 
-  var _useState19 = useState(false),
+  var _useState19 = useState('one-day'),
       _useState20 = _slicedToArray(_useState19, 2),
-      isInvalid = _useState20[0],
-      setIsInvalid = _useState20[1];
+      stepThreeTextInputValue = _useState20[0],
+      setStepThreeTextInputValue = _useState20[1];
+
+  var _useState21 = useState(false),
+      _useState22 = _slicedToArray(_useState21, 2),
+      isInvalid = _useState22[0],
+      setIsInvalid = _useState22[1];
 
   var clearCreateData = function clearCreateData() {
     setStepOneTextInputValue('');
@@ -84,6 +116,7 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
     setHasSubmitError(false);
     setIsInvalid(false);
     setOpen(false);
+    setValue1('');
   };
 
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/React.createElement(Button, {
@@ -138,9 +171,9 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
     sm: 8
   }, /*#__PURE__*/React.createElement(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);
@@ -186,7 +219,13 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref) {
     onToggle: function onToggle(event) {
       return setShouldReject(event);
     }
-  })))), /*#__PURE__*/React.createElement(CreateTearsheetStep, {
+  })))), /*#__PURE__*/React.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.createElement(CreateTearsheetStep, {
     title: "Partitions",
     disableSubmit: !stepTwoTextInputValue,
     subtitle: "One or more partitions make up a topic. A partition is an ordered list of messages.",

package/es/components/ExportModal/ExportModal.js

@@ -131,7 +131,8 @@ export var ExportModal = /*#__PURE__*/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.createElement(TextInput, {
     id: "text-input--".concat(internalId.current),
@@ -140,7 +141,8 @@ export var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     labelText: inputLabel,
     invalid: hasInvalidExtension(),
     invalidText: invalidInputText,
-    onBlur: onBlurHandler
+    onBlur: onBlurHandler,
+    "data-modal-primary-focus": true
   })), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__messaging")
   }, loading && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Loading, {

package/es/components/ImportModal/ImportModal.js

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

package/es/components/InlineEdit/InlineEdit.js

@@ -0,0 +1,224 @@
+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 = ["className", "disabled", "editDescription", "id", "inline", "invalid", "invalidText", "labelText", "onChange", "onInput", "onRevert", "revertDescription", "saveDescription", "saveDisabled", "size", "value", "warn", "warnText"];
+
+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) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/**
+ * Copyright IBM Corp. 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, { useState } 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. */
+
+import { CancelableTextEdit } from '../';
+import { Button } from 'carbon-components-react';
+import { Edit16, EditOff16 } from '@carbon/icons-react'; // The block part of our conventional BEM class names (blockClass__E--M).
+
+var blockClass = "".concat(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.
+ */
+
+export var InlineEdit = /*#__PURE__*/React.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 = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_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: cx(blockClass, // Apply the block class to the main HTML element
+    className, // Apply any supplied class names to the main HTML element.
+    _defineProperty({}, "".concat(blockClass, "--editing"), editing)),
+    id: id,
+    size: size,
+    ref: ref
+  }, getDevtoolsProps(componentName));
+
+  return editing ? /*#__PURE__*/React.createElement(CancelableTextEdit, _extends({}, 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.createElement("div", stdProps, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__value")
+  }, value), /*#__PURE__*/React.createElement(Button, {
+    className: "".concat(blockClass, "__button ").concat(carbon.prefix, "--btn--md"),
+    kind: "ghost",
+    hasIconOnly: true,
+    iconDescription: editDescription,
+    onClick: handleEdit,
+    renderIcon: disabled ? EditOff16 : Edit16,
+    disabled: disabled
+  }));
+}); // Return a placeholder if not released and not enabled by feature flag
+
+InlineEdit = 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.string,
+
+  /**
+   * disable edit
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Label for the edit button
+   */
+  editDescription: PropTypes.string.isRequired,
+
+  /**
+   * ID for inline edit
+   */
+  id: PropTypes.string,
+
+  /* TODO: add types and DocGen for all props. */
+
+  /**
+  * inline variant
+  */
+  inline: PropTypes.bool,
+
+  /**
+   * set invalid state for input
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * text shown when invalid is true
+   */
+  invalidText: PropTypes.string,
+
+  /**
+   * label for text input
+   */
+  labelText: PropTypes.string,
+
+  /**
+   * method called on change event
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * method called on input event
+   */
+  onInput: PropTypes.func,
+
+  /**
+   * method called on revert event
+   */
+  onRevert: PropTypes.func,
+
+  /**
+   * label for revert button
+   */
+  revertDescription: PropTypes.string.isRequired,
+
+  /**
+   * label for save button
+   */
+  saveDescription: PropTypes.string.isRequired,
+
+  /**
+   * disabled state of the save button
+   */
+  saveDisabled: PropTypes.bool,
+
+  /**
+   * vertical size of control
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+
+  /**
+   * initial/unedited value
+   */
+  value: PropTypes.string,
+
+  /**
+   * set warn state for input
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * text shown when warn true
+   */
+  warnText: PropTypes.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/es/components/InlineEdit/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 { InlineEdit } from './InlineEdit';

package/es/components/MultiAddSelect/MultiAddSelect.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react'; // import PropTypes from 'prop-types';
+
+import { AddSelect } from '../AddSelect';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg } from '../../settings';
+var componentName = 'MultiAddSelect';
+export var MultiAddSelect = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(AddSelect, _extends({}, props, {
+    multi: true,
+    ref: ref
+  }, getDevtoolsProps(componentName)));
+});
+MultiAddSelect = pkg.checkComponentEnabled(MultiAddSelect, componentName);
+MultiAddSelect.propTypes = {};
+MultiAddSelect.displayName = componentName;

package/es/components/MultiAddSelect/index.js

@@ -0,0 +1 @@
+export { MultiAddSelect } from './MultiAddSelect';