@carbon/react 0.16.2 → 1.0.0-rc.0

package/lib/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,120 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var PropTypes = require('prop-types');
+var cx = require('classnames');
+var useId = require('../../internal/useId.js');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+function ProgressBar(_ref) {
+  var className = _ref.className,
+      helperText = _ref.helperText,
+      hideLabel = _ref.hideLabel,
+      label = _ref.label,
+      _ref$max = _ref.max,
+      max = _ref$max === void 0 ? 100 : _ref$max,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'big' : _ref$size,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      value = _ref.value;
+  var labelId = useId.useId('progress-bar');
+  var helperId = useId.useId('progress-bar-helper');
+  var prefix = usePrefix.usePrefix();
+  var indeterminate = value === null || value === undefined;
+  var cappedValue = value;
+
+  if (cappedValue > max) {
+    cappedValue = max;
+  }
+
+  if (cappedValue < 0) {
+    cappedValue = 0;
+  }
+
+  var percentage = cappedValue / max;
+  var wrapperClasses = cx__default["default"]("".concat(prefix, "--progress-bar"), "".concat(prefix, "--progress-bar--").concat(size), "".concat(prefix, "--progress-bar--").concat(type), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--progress-bar--indeterminate"), indeterminate), className);
+  var labelClasses = cx__default["default"]("".concat(prefix, "--progress-bar__label"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: wrapperClasses
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    className: labelClasses,
+    id: labelId
+  }, label), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--progress-bar__track"),
+    role: "progressbar",
+    "aria-labelledby": labelId,
+    "aria-describedby": helperText ? helperId : null,
+    "aria-valuemin": !indeterminate ? 0 : null,
+    "aria-valuemax": !indeterminate ? max : null,
+    "aria-valuenow": !indeterminate ? cappedValue : null
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--progress-bar__bar"),
+    style: {
+      transform: "scaleX(".concat(percentage, ")")
+    }
+  })), helperText && /*#__PURE__*/React__default["default"].createElement("div", {
+    id: helperId,
+    className: "".concat(prefix, "--progress-bar__helper-text")
+  }, helperText));
+}
+
+ProgressBar.propTypes = {
+  /**
+   * Additional CSS class names.
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * The current progress as a textual representation.
+   */
+  helperText: PropTypes__default["default"].string,
+
+  /**
+   * Whether the label should be visually hidden.
+   */
+  hideLabel: PropTypes__default["default"].bool,
+
+  /**
+   * A label describing the progress bar.
+   */
+  label: PropTypes__default["default"].string.isRequired,
+
+  /**
+   * The maximum value.
+   */
+  max: PropTypes__default["default"].number,
+
+  /**
+   * Specify the size of the ProgressBar.
+   */
+  size: PropTypes__default["default"].oneOf(['small', 'big']),
+
+  /**
+   * Defines the alignment variant of the progress bar.
+   */
+  type: PropTypes__default["default"].oneOf(['default', 'inline', 'indented']),
+
+  /**
+   * The current value.
+   */
+  value: PropTypes__default["default"].number
+};
+
+exports["default"] = ProgressBar;

package/lib/components/ProgressIndicator/ProgressIndicator.Skeleton.js

@@ -0,0 +1,60 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var usePrefix = require('../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["className"];
+
+var _svg, _Step, _Step2, _Step3, _Step4;
+
+function Step() {
+  var prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    className: "".concat(prefix, "--progress-step ").concat(prefix, "--progress-step--incomplete")
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--progress-step-button ").concat(prefix, "--progress-step-button--unclickable")
+  }, _svg || (_svg = /*#__PURE__*/React__default["default"].createElement("svg", null, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0"
+  }))), /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "".concat(prefix, "--progress-label")
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--progress-line")
+  })));
+}
+
+function ProgressIndicatorSkeleton(_ref) {
+  var className = _ref.className,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
+    className: cx__default["default"]("".concat(prefix, "--progress"), "".concat(prefix, "--skeleton"), className)
+  }, rest), _Step || (_Step = /*#__PURE__*/React__default["default"].createElement(Step, null)), _Step2 || (_Step2 = /*#__PURE__*/React__default["default"].createElement(Step, null)), _Step3 || (_Step3 = /*#__PURE__*/React__default["default"].createElement(Step, null)), _Step4 || (_Step4 = /*#__PURE__*/React__default["default"].createElement(Step, null)));
+}
+
+ProgressIndicatorSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes__default["default"].string
+};
+
+exports["default"] = ProgressIndicatorSkeleton;

package/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -0,0 +1,334 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var iconsReact = require('@carbon/icons-react');
+var usePrefix = require('../../internal/usePrefix.js');
+var match = require('../../internal/keyboard/match.js');
+var keys = require('../../internal/keyboard/keys.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _excluded = ["label", "description", "className", "current", "complete", "invalid", "secondaryLabel", "disabled", "onClick", "translateWithId"],
+    _excluded2 = ["className", "currentIndex", "vertical", "spaceEqually"];
+var defaultTranslations = {
+  'carbon.progress-step.complete': 'Complete',
+  'carbon.progress-step.incomplete': 'Incomplete',
+  'carbon.progress-step.current': 'Current',
+  'carbon.progress-step.invalid': 'Invalid'
+};
+
+function translateWithId(messageId) {
+  return defaultTranslations[messageId];
+}
+
+function ProgressStep(_ref) {
+  var _classnames;
+
+  var label = _ref.label,
+      description = _ref.description,
+      className = _ref.className,
+      current = _ref.current,
+      complete = _ref.complete,
+      invalid = _ref.invalid,
+      secondaryLabel = _ref.secondaryLabel,
+      disabled = _ref.disabled,
+      onClick = _ref.onClick,
+      t = _ref.translateWithId,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+  var classes = cx__default["default"]((_classnames = {}, _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--progress-step"), true), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--progress-step--current"), current), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--progress-step--complete"), complete), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--progress-step--incomplete"), !complete && !current), _rollupPluginBabelHelpers.defineProperty(_classnames, "".concat(prefix, "--progress-step--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classnames, className, className), _classnames));
+
+  var handleKeyDown = function handleKeyDown(e) {
+    if (match.matches(e, [keys.Enter, keys.Space])) {
+      onClick();
+    }
+  }; // eslint-disable-next-line react/prop-types
+
+
+  var SVGIcon = function SVGIcon(_ref2) {
+    var _title;
+
+    var complete = _ref2.complete,
+        current = _ref2.current,
+        description = _ref2.description,
+        invalid = _ref2.invalid,
+        prefix = _ref2.prefix;
+
+    if (invalid) {
+      return /*#__PURE__*/React__default["default"].createElement(iconsReact.Warning, {
+        className: "".concat(prefix, "--progress__warning")
+      }, _title || (_title = /*#__PURE__*/React__default["default"].createElement("title", null, description)));
+    }
+
+    if (current) {
+      return /*#__PURE__*/React__default["default"].createElement(iconsReact.Incomplete, null, /*#__PURE__*/React__default["default"].createElement("title", null, description));
+    }
+
+    if (complete) {
+      return /*#__PURE__*/React__default["default"].createElement(iconsReact.CheckmarkOutline, null, /*#__PURE__*/React__default["default"].createElement("title", null, description));
+    }
+
+    return /*#__PURE__*/React__default["default"].createElement(iconsReact.CircleDash, null, /*#__PURE__*/React__default["default"].createElement("title", null, description));
+  };
+
+  var message = t('carbon.progress-step.incomplete');
+
+  if (current) {
+    message = t('carbon.progress-step.current');
+  }
+
+  if (complete) {
+    message = t('carbon.progress-step.complete');
+  }
+
+  if (invalid) {
+    message = t('carbon.progress-step.invalid');
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("li", {
+    className: classes
+  }, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({
+    type: "button",
+    className: cx__default["default"]("".concat(prefix, "--progress-step-button"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--progress-step-button--unclickable"), !onClick || current)),
+    disabled: disabled,
+    "aria-disabled": disabled,
+    tabIndex: !current && onClick && !disabled ? 0 : -1,
+    onClick: !current ? onClick : undefined,
+    onKeyDown: handleKeyDown,
+    title: label
+  }, rest), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--assistive-text")
+  }, message), /*#__PURE__*/React__default["default"].createElement(SVGIcon, {
+    complete: complete,
+    current: current,
+    description: description,
+    invalid: invalid,
+    prefix: prefix
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(prefix, "--progress-text")
+  }, /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "".concat(prefix, "--progress-label")
+  }, label), secondaryLabel !== null && secondaryLabel !== undefined ? /*#__PURE__*/React__default["default"].createElement("p", {
+    className: "".concat(prefix, "--progress-optional")
+  }, secondaryLabel) : null), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: "".concat(prefix, "--progress-line")
+  })));
+}
+ProgressStep.propTypes = {
+  /**
+   * Provide an optional className to be applied to the containing `<li>` node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the step has been completed
+   */
+  complete: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether the step is the current step
+   */
+  current: PropTypes__default["default"].bool,
+
+  /**
+   * Provide a description for the `<ProgressStep>`
+   */
+  description: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the step is disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+
+  /**
+   * Index of the current step within the ProgressIndicator
+   */
+  index: PropTypes__default["default"].number,
+
+  /**
+   * Specify whether the step is invalid
+   */
+  invalid: PropTypes__default["default"].bool,
+
+  /**
+   * Provide the label for the `<ProgressStep>`
+   */
+  label: PropTypes__default["default"].node.isRequired,
+
+  /**
+   * A callback called if the step is clicked or the enter key is pressed
+   */
+  onClick: PropTypes__default["default"].func,
+
+  /**
+   * Provide the props that describe a progress step tooltip
+   */
+  overflowTooltipProps: PropTypes__default["default"].object,
+
+  /**
+   * Provide an optional secondary label
+   */
+  secondaryLabel: PropTypes__default["default"].string,
+
+  /**
+   * The ID of the tooltip content.
+   */
+  tooltipId: PropTypes__default["default"].string,
+
+  /**
+   * Optional method that takes in a message id and returns an
+   * internationalized string.
+   */
+  translateWithId: PropTypes__default["default"].func
+};
+ProgressStep.defaultProps = {
+  translateWithId: translateWithId
+};
+var ProgressIndicator = /*#__PURE__*/function (_Component) {
+  _rollupPluginBabelHelpers.inherits(ProgressIndicator, _Component);
+
+  var _super = _rollupPluginBabelHelpers.createSuper(ProgressIndicator);
+
+  function ProgressIndicator() {
+    var _this;
+
+    _rollupPluginBabelHelpers.classCallCheck(this, ProgressIndicator);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "state", {});
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "renderSteps", function () {
+      var onChange = _this.props.onChange;
+      return React__default["default"].Children.map(_this.props.children, function (child, index) {
+        // only setup click handlers if onChange event is passed
+        var onClick = onChange ? function () {
+          return onChange(index);
+        } : undefined;
+
+        if (index === _this.state.currentIndex) {
+          return /*#__PURE__*/React__default["default"].cloneElement(child, {
+            current: true,
+            index: index,
+            onClick: onClick
+          });
+        }
+
+        if (index < _this.state.currentIndex) {
+          return /*#__PURE__*/React__default["default"].cloneElement(child, {
+            complete: true,
+            index: index,
+            onClick: onClick
+          });
+        }
+
+        if (index > _this.state.currentIndex) {
+          return /*#__PURE__*/React__default["default"].cloneElement(child, {
+            complete: child.props.complete || false,
+            index: index,
+            onClick: onClick
+          });
+        }
+
+        return null;
+      });
+    });
+
+    return _this;
+  }
+
+  _rollupPluginBabelHelpers.createClass(ProgressIndicator, [{
+    key: "render",
+    value: function render() {
+      var _classnames3;
+
+      var _this$props = this.props,
+          className = _this$props.className;
+          _this$props.currentIndex;
+          var vertical = _this$props.vertical,
+          spaceEqually = _this$props.spaceEqually,
+          other = _rollupPluginBabelHelpers.objectWithoutProperties(_this$props, _excluded2);
+
+      var prefix = this.context;
+      var classes = cx__default["default"]((_classnames3 = {}, _rollupPluginBabelHelpers.defineProperty(_classnames3, "".concat(prefix, "--progress"), true), _rollupPluginBabelHelpers.defineProperty(_classnames3, "".concat(prefix, "--progress--vertical"), vertical), _rollupPluginBabelHelpers.defineProperty(_classnames3, "".concat(prefix, "--progress--space-equal"), spaceEqually && !vertical), _rollupPluginBabelHelpers.defineProperty(_classnames3, className, className), _classnames3));
+      return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
+        className: classes
+      }, other), this.renderSteps());
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(_ref3, state) {
+      var currentIndex = _ref3.currentIndex;
+      var prevCurrentIndex = state.prevCurrentIndex;
+      return prevCurrentIndex === currentIndex ? null : {
+        currentIndex: currentIndex,
+        prevCurrentIndex: currentIndex
+      };
+    }
+  }]);
+
+  return ProgressIndicator;
+}(React.Component);
+
+_rollupPluginBabelHelpers.defineProperty(ProgressIndicator, "propTypes", {
+  /**
+   * Provide `<ProgressStep>` components to be rendered in the
+   * `<ProgressIndicator>`
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide an optional className to be applied to the containing node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Optionally specify the current step array index
+   */
+  currentIndex: PropTypes__default["default"].number,
+
+  /**
+   * Optional callback called if a ProgressStep is clicked on.  Returns the index of the step.
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Specify whether the progress steps should be split equally in size in the div
+   */
+  spaceEqually: PropTypes__default["default"].bool,
+
+  /**
+   * Determines whether or not the ProgressIndicator should be rendered vertically.
+   */
+  vertical: PropTypes__default["default"].bool
+});
+
+_rollupPluginBabelHelpers.defineProperty(ProgressIndicator, "contextType", usePrefix.PrefixContext);
+
+_rollupPluginBabelHelpers.defineProperty(ProgressIndicator, "defaultProps", {
+  currentIndex: 0
+});
+
+exports.ProgressIndicator = ProgressIndicator;
+exports.ProgressStep = ProgressStep;

package/lib/components/ProgressIndicator/index.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var FeatureFlags = require('@carbon/feature-flags');
+var ProgressIndicator$1 = require('./ProgressIndicator.js');
+var ProgressIndicator$2 = require('./next/ProgressIndicator.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+
+var ProgressIndicator = FeatureFlags__namespace.enabled('enable-v11-release') ? ProgressIndicator$2.ProgressIndicator : ProgressIndicator$1.ProgressIndicator;
+
+exports.ProgressStep = ProgressIndicator$1.ProgressStep;
+exports.ProgressIndicator = ProgressIndicator;

package/lib/components/ProgressIndicator/next/ProgressIndicator.js

@@ -0,0 +1,127 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var cx = require('classnames');
+var PropTypes = require('prop-types');
+var React = require('react');
+var usePrefix = require('../../../internal/usePrefix.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["children", "className", "currentIndex", "onChange", "spaceEqually", "vertical"];
+
+function ProgressIndicator(_ref) {
+  var _cx;
+
+  var children = _ref.children,
+      customClassName = _ref.className,
+      _ref$currentIndex = _ref.currentIndex,
+      controlledIndex = _ref$currentIndex === void 0 ? 0 : _ref$currentIndex,
+      onChange = _ref.onChange,
+      spaceEqually = _ref.spaceEqually,
+      vertical = _ref.vertical,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var prefix = usePrefix.usePrefix();
+
+  var _useState = React.useState(controlledIndex),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      currentIndex = _useState2[0],
+      setCurrentIndex = _useState2[1];
+
+  var _useState3 = React.useState(controlledIndex),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      prevControlledIndex = _useState4[0],
+      setPrevControlledIndex = _useState4[1];
+
+  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--progress"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--progress--vertical"), vertical), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--progress--space-equal"), spaceEqually && !vertical), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, customClassName), _cx));
+
+  if (controlledIndex !== prevControlledIndex) {
+    setCurrentIndex(controlledIndex);
+    setPrevControlledIndex(controlledIndex);
+  }
+
+  return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
+    className: className
+  }, rest), React__default["default"].Children.map(children, function (child, index) {
+    // only setup click handlers if onChange event is passed
+    var onClick = onChange ? function () {
+      return onChange(index);
+    } : undefined;
+
+    if (index === currentIndex) {
+      return /*#__PURE__*/React__default["default"].cloneElement(child, {
+        complete: child.props.complete,
+        current: child.props.complete ? false : true,
+        index: index,
+        onClick: onClick
+      });
+    }
+
+    if (index < currentIndex) {
+      return /*#__PURE__*/React__default["default"].cloneElement(child, {
+        complete: true,
+        index: index,
+        onClick: onClick
+      });
+    }
+
+    if (index > currentIndex) {
+      return /*#__PURE__*/React__default["default"].cloneElement(child, {
+        complete: child.props.complete || false,
+        index: index,
+        onClick: onClick
+      });
+    }
+
+    return null;
+  }));
+}
+
+ProgressIndicator.propTypes = {
+  /**
+   * Provide `<ProgressStep>` components to be rendered in the
+   * `<ProgressIndicator>`
+   */
+  children: PropTypes__default["default"].node,
+
+  /**
+   * Provide an optional className to be applied to the containing node
+   */
+  className: PropTypes__default["default"].string,
+
+  /**
+   * Optionally specify the current step array index
+   */
+  currentIndex: PropTypes__default["default"].number,
+
+  /**
+   * Optional callback called if a ProgressStep is clicked on.  Returns the index of the step.
+   */
+  onChange: PropTypes__default["default"].func,
+
+  /**
+   * Specify whether the progress steps should be split equally in size in the div
+   */
+  spaceEqually: PropTypes__default["default"].bool,
+
+  /**
+   * Determines whether or not the ProgressIndicator should be rendered vertically.
+   */
+  vertical: PropTypes__default["default"].bool
+};
+
+exports.ProgressIndicator = ProgressIndicator;