@instructure/quiz-core 17.19.2 → 17.19.3-rc.0

package/lib/common/components/shared/TagSuggestSelect/presenter.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TagSuggest = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _immutable = _interopRequireDefault(require("immutable"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactImmutableProptypes = _interopRequireDefault(require("react-immutable-proptypes"));
+
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
+var _index = _interopRequireDefault(require("../TagSelect/index.js"));
+
+var tagShape = _propTypes.default.shape({
+  id: _propTypes.default.string,
+  value: _propTypes.default.string.isRequired
+});
+
+var TagSuggest = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(TagSuggest, _Component);
+
+  var _super = (0, _createSuper2.default)(TagSuggest);
+
+  function TagSuggest() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, TagSuggest);
+
+    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));
+    _this.debouncedSuggestions = (0, _debounce.default)(function (parentType, parentId, tagText) {
+      return _this.props.getTagSuggestions(parentType, parentId, tagText);
+    }, 200);
+
+    _this.handleTagInputChange = function (tagText) {
+      var _this$props = _this.props,
+          parentType = _this$props.parentType,
+          parentId = _this$props.parentId;
+
+      _this.props.setTagInput(parentType, parentId, tagText);
+
+      if (tagText != null) {
+        _this.debouncedSuggestions(parentType, parentId, tagText);
+      } else {
+        _this.props.setTagSuggestions(parentType, parentId, null, tagText);
+      }
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(TagSuggest, [{
+    key: "getTagSuggestions",
+    value: function getTagSuggestions() {
+      var _this$props2 = this.props,
+          defaultSuggestions = _this$props2.defaultSuggestions,
+          tagSuggestions = _this$props2.tagSuggestions,
+          tags = _this$props2.tags;
+
+      var suggestions = tagSuggestions || _immutable.default.fromJS(defaultSuggestions);
+
+      var visibleTagIds = tags.map(function (tag) {
+        return tag.id;
+      }); // Exclude suggestions for tags already selected
+
+      return suggestions.filterNot(function (tag) {
+        return visibleTagIds.includes(tag.get('id'));
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_index.default, {
+        allowNewTags: this.props.allowNewTags,
+        noMatchText: this.props.noMatchText,
+        tags: this.props.tags,
+        tagInput: this.props.tagInput,
+        tagSuggestions: this.getTagSuggestions().toJS(),
+        newTagSuggest: this.props.newTagSuggest,
+        onChange: this.props.onChange,
+        onInputChange: this.handleTagInputChange
+      });
+    }
+  }]);
+  TagSuggest.displayName = "TagSuggest";
+  return TagSuggest;
+}(_react.Component);
+
+exports.TagSuggest = TagSuggest;
+TagSuggest.propTypes = {
+  allowNewTags: _propTypes.default.bool,
+  parentType: _propTypes.default.string.isRequired,
+  parentId: _propTypes.default.string.isRequired,
+  noMatchText: _propTypes.default.string.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  defaultSuggestions: _propTypes.default.arrayOf(tagShape),
+  tagSuggestions: _reactImmutableProptypes.default.listOf(_reactImmutableProptypes.default.map),
+  setTagInput: _propTypes.default.func.isRequired,
+  newTagSuggest: _propTypes.default.string,
+  getTagSuggestions: _propTypes.default.func.isRequired,
+  setTagSuggestions: _propTypes.default.func.isRequired,
+  tagInput: _propTypes.default.string,
+  tags: _propTypes.default.arrayOf(tagShape)
+};
+TagSuggest.defaultProps = {
+  allowNewTags: false,
+  newTagSuggest: null,
+  tagInput: null,
+  tags: [],
+  defaultSuggestions: [],
+  tagSuggestions: null
+};
+var _default = TagSuggest;
+exports.default = _default;

package/lib/common/components/shared/TagWrapper/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+var _default = _presenter.default;
+exports.default = _default;

package/lib/common/components/shared/TagWrapper/presenter.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TagWrapper = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiTag = require("@instructure/ui-tag");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var TagWrapper = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(TagWrapper, _Component);
+
+  var _super = (0, _createSuper2.default)(TagWrapper);
+
+  function TagWrapper() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, TagWrapper);
+
+    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));
+
+    _this.dismissTag = function (e) {
+      // prevent closing of list
+      e.stopPropagation();
+      e.preventDefault();
+
+      _this.props.onClick(_this.props.id);
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(TagWrapper, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          id = _this$props.id,
+          text = _this$props.text,
+          index = _this$props.index;
+      return /*#__PURE__*/_react.default.createElement(_uiTag.Tag, {
+        text: /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+          alt: (0, _formatMessage.default)('Remove {label}', {
+            label: text
+          })
+        }, text),
+        dismissible: true,
+        key: id,
+        margin: index > 0 ? 'xxx-small 0 xxx-small xx-small' : 'xxx-small 0',
+        onClick: this.dismissTag
+      });
+    }
+  }]);
+  TagWrapper.displayName = "TagWrapper";
+  return TagWrapper;
+}(_react.Component);
+
+exports.TagWrapper = TagWrapper;
+TagWrapper.propTypes = {
+  text: _propTypes.default.string.isRequired,
+  index: _propTypes.default.number.isRequired,
+  id: _propTypes.default.string.isRequired,
+  onClick: _propTypes.default.func.isRequired
+};
+var _default = TagWrapper;
+exports.default = _default;

package/lib/common/components/shared/TimeUnitsInput/TimeUnitsInput.examples.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  propValues: {
+    timeInDays: [true, false],
+    margin: [null, 'medium'],
+    inputWidth: [null, '10rem'],
+    timeInSeconds: [5820, 50340, 99999]
+  },
+  getComponentProps: function getComponentProps(props) {
+    return {
+      onChange: Function.prototype,
+      description: 'Time Units Input',
+      hoursLabel: 'Hours',
+      minutesLabel: 'Minutes',
+      maxTimeInSeconds: 100000,
+      normalizeOnInput: true
+    };
+  }
+};
+exports.default = _default;

package/lib/common/components/shared/TimeUnitsInput/index.js

@@ -0,0 +1,366 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TimeUnitsInput = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _uiFormField = require("@instructure/ui-form-field");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiView = require("@instructure/ui-view");
+
+var _Errors = _interopRequireDefault(require("../../../../common/components/shared/errors/Errors.js"));
+
+var _quizNumberInput = _interopRequireDefault(require("@instructure/quiz-number-input"));
+
+var _immutable = require("immutable");
+
+var _index = require("../FormattedDuration/index.js");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+// This component renders an input for multiple time units, and handles:
+// * converting smaller units to larger units when over the unit threshold (e.g. 95 minutes to 1h35m)
+// * displaying feedback messages when unit values are over a unit threshold
+// * displaying feedback messages when user input is out-of-range
+// * displaying error messages when user input is invalid
+// * calling onChange with a value which is always valid and in-range
+//
+// Currently only minutes/hours/days are supported, but support for
+// seconds could be added in the future if needed
+var TimeUnitsInput = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(TimeUnitsInput, _Component);
+
+  var _super = (0, _createSuper2.default)(TimeUnitsInput);
+
+  function TimeUnitsInput() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, TimeUnitsInput);
+
+    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));
+
+    _this.isIncrementOrDecrement = function (e) {
+      // Is the event an increment or decrement event?
+      // These events can be sourced from either the arrow buttons on the input, or the user
+      // using the up or down arrows on the keyboard
+      var fromButtonInput = e.nativeEvent.target && e.nativeEvent.target.tagName !== 'INPUT';
+      var fromArrowKeys = e.key === 'ArrowUp' || e.key === 'ArrowDown';
+      return fromButtonInput || fromArrowKeys;
+    };
+
+    _this.onChangeTime = function (e, rawString, inputNumber, source) {
+      var normalizeOnInput = _this.isIncrementOrDecrement(e) || _this.props.normalizeOnInput;
+
+      var minutes = source === 'minutes' ? inputNumber : _this.state.minutes;
+      minutes = normalizeOnInput ? minutes : Math.max(minutes, 0);
+      var hours = source === 'hours' ? inputNumber : _this.state.hours;
+      hours = normalizeOnInput ? hours : Math.max(hours, 0);
+      var days = source === 'days' ? inputNumber : _this.state.days || 0;
+      var totalSeconds = minutes * _index.MINUTE_IN_SECONDS + hours * _index.HOUR_IN_SECONDS + days * _index.DAY_IN_SECONDS;
+      var hoursError = null;
+      var daysError = null;
+
+      var _breakdownSeconds = (0, _index.breakdownSeconds)(totalSeconds, _this.props.includeDays),
+          newDays = _breakdownSeconds.days,
+          newHours = _breakdownSeconds.hours,
+          newMinutes = _breakdownSeconds.minutes;
+
+      if (totalSeconds > _this.props.maxTimeInSeconds) {
+        var _breakdownSeconds2 = (0, _index.breakdownSeconds)(_this.props.maxTimeInSeconds, _this.props.includeDays),
+            maxDays = _breakdownSeconds2.days,
+            maxHours = _breakdownSeconds2.hours,
+            maxMinutes = _breakdownSeconds2.minutes;
+
+        if (_this.props.includeDays) {
+          daysError = (0, _formatMessage.default)('{newDays, number} days {newHours, number} hours {newMinutes, number} minutes exceeds maximum time of {maxDays, number} days {maxHours, number} hours {maxMinutes, number} minutes.', {
+            newDays: newDays,
+            newHours: newHours,
+            newMinutes: newMinutes,
+            maxDays: maxDays,
+            maxHours: maxHours,
+            maxMinutes: maxMinutes
+          });
+        } else {
+          hoursError = (0, _formatMessage.default)('{newHours, number} hours {newMinutes, number} minutes exceeds maximum time of {maxHours, number} hours {maxMinutes, number} minutes.', {
+            newHours: newHours,
+            newMinutes: newMinutes,
+            maxHours: maxHours,
+            maxMinutes: maxMinutes
+          });
+        }
+
+        totalSeconds = _this.props.maxTimeInSeconds;
+      } else if (totalSeconds < _this.props.minTimeInSeconds) {
+        var _breakdownSeconds3 = (0, _index.breakdownSeconds)(_this.props.minTimeInSeconds, _this.props.includeDays),
+            minDays = _breakdownSeconds3.days,
+            minHours = _breakdownSeconds3.hours,
+            minMinutes = _breakdownSeconds3.minutes;
+
+        if (_this.props.includeDays) {
+          daysError = (0, _formatMessage.default)('{newDays, number} days {newHours, number} hours {newMinutes, number} minutes is lower than the minimum time of {minDays, number} days {minHours, number} hours {minMinutes, number} minutes.', {
+            newDays: newDays,
+            newHours: newHours,
+            newMinutes: newMinutes,
+            minDays: minDays,
+            minHours: minHours,
+            minMinutes: minMinutes
+          });
+        } else {
+          hoursError = (0, _formatMessage.default)('{newHours, number} hours {newMinutes, number} minutes is lower than the minimum time of {minHours, number} hours {minMinutes, number} minutes.', {
+            newHours: newHours,
+            newMinutes: newMinutes,
+            minHours: minHours,
+            minMinutes: minMinutes
+          });
+        }
+
+        totalSeconds = _this.props.minTimeInSeconds;
+      }
+
+      if (normalizeOnInput) {
+        _this.setState({
+          days: days,
+          hours: hours,
+          minutes: minutes,
+          daysError: daysError,
+          hoursError: hoursError,
+          minutesError: null,
+          totalSeconds: totalSeconds
+        }, _this.onNormalizeTime);
+      } else {
+        _this.setState({
+          days: days,
+          rawDaysText: days,
+          hours: hours,
+          rawHoursText: hours,
+          minutes: minutes,
+          rawMinutesText: minutes,
+          daysError: daysError,
+          hoursError: hoursError,
+          minutesError: null,
+          totalSeconds: totalSeconds
+        });
+      }
+    };
+
+    _this.onNormalizeTime = function () {
+      var _breakdownSeconds4 = (0, _index.breakdownSeconds)(_this.state.totalSeconds, _this.props.includeDays),
+          newDays = _breakdownSeconds4.days,
+          newHours = _breakdownSeconds4.hours,
+          newMinutes = _breakdownSeconds4.minutes;
+
+      _this.setState({
+        days: newDays,
+        rawDaysText: newDays,
+        hours: newHours,
+        rawHoursText: newHours,
+        minutes: newMinutes,
+        rawMinutesText: newMinutes
+      });
+
+      _this.props.onChange(_this.state.totalSeconds);
+    };
+
+    _this.onChangeExtraMinutes = function (e, rawString, normalizedString) {
+      _this.onChangeTimeUnit(e, rawString, normalizedString, 'minutes');
+    };
+
+    _this.onChangeExtraHours = function (e, rawString, normalizedString) {
+      _this.onChangeTimeUnit(e, rawString, normalizedString, 'hours');
+    };
+
+    _this.onChangeExtraDays = function (e, rawString, normalizedString) {
+      _this.onChangeTimeUnit(e, rawString, normalizedString, 'days');
+    };
+
+    _this.getErrorList = function () {
+      var errorArray = [];
+      var _this$state = _this.state,
+          daysError = _this$state.daysError,
+          hoursError = _this$state.hoursError,
+          minutesError = _this$state.minutesError;
+      daysError && errorArray.push(daysError);
+      hoursError && errorArray.push(hoursError);
+      minutesError && errorArray.push(minutesError);
+      return (0, _immutable.List)(errorArray);
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(TimeUnitsInput, [{
+    key: "componentWillMount",
+    value: function componentWillMount() {
+      var _breakdownSeconds5 = (0, _index.breakdownSeconds)(this.props.timeInSeconds, this.props.includeDays),
+          days = _breakdownSeconds5.days,
+          hours = _breakdownSeconds5.hours,
+          minutes = _breakdownSeconds5.minutes;
+
+      this.setState({
+        days: days,
+        hours: hours,
+        minutes: minutes,
+        rawDaysText: days,
+        rawHoursText: hours,
+        rawMinutesText: minutes,
+        totalSeconds: this.props.timeInSeconds,
+        errors: (0, _immutable.List)()
+      });
+    }
+  }, {
+    key: "onChangeTimeUnit",
+    value: function onChangeTimeUnit(e, rawString, normalizedString, unit) {
+      // Check that input is a valid number.
+      // If not, set an error indicator. If so, remove error indicator.
+      var rawStringBlank = rawString === '';
+      var inputNumber = normalizedString === null ? NaN : Number(normalizedString);
+      var numberInvalid = isNaN(inputNumber);
+
+      if (this.props.normalizeOnInput && rawStringBlank) {
+        // When normalizeOnInput is true, treat blank strings as 0,
+        // otherwise it's really hard to clear the input and enter a new number
+        inputNumber = 0;
+        numberInvalid = false;
+      }
+
+      if (numberInvalid) {
+        if (this.props.normalizeOnInput) {
+          this.onNormalizeTime();
+          return;
+        }
+
+        var unitMessageText = (0, _formatMessage.default)('{userInput, string} is not a valid number.', {
+          userInput: rawString
+        });
+        var update = {};
+
+        if (unit === 'minutes') {
+          update.rawMinutesText = rawString;
+          update.minutesError = rawStringBlank ? null : unitMessageText;
+        } else if (unit === 'hours') {
+          update.rawHoursText = rawString;
+          update.hoursError = rawStringBlank ? null : unitMessageText;
+        } else if (unit === 'days') {
+          update.rawDaysText = rawString;
+          update.daysError = rawStringBlank ? null : unitMessageText;
+        }
+
+        this.setState(update);
+      } else {
+        this.onChangeTime(e, rawString, inputNumber, unit);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        display: "block",
+        margin: this.props.margin
+      }, /*#__PURE__*/_react.default.createElement(_uiFormField.FormFieldGroup, {
+        description: /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, this.props.description),
+        layout: "columns",
+        vAlign: "top",
+        startAt: "small"
+      }, this.props.includeDays && /*#__PURE__*/_react.default.createElement(_quizNumberInput.default, {
+        renderLabel: this.props.daysLabel,
+        min: 0,
+        value: this.state.rawDaysText,
+        onChange: this.onChangeExtraDays,
+        onBlur: this.onNormalizeTime,
+        messages: this.state.daysError ? [{
+          type: 'error'
+        }] : null,
+        "data-automation": this.props.daysDataAutomation,
+        width: this.props.inputWidth
+      }), /*#__PURE__*/_react.default.createElement(_quizNumberInput.default, {
+        renderLabel: this.props.hoursLabel,
+        min: this.props.includeDays ? void 0 : 0,
+        value: this.state.rawHoursText,
+        onChange: this.onChangeExtraHours,
+        onBlur: this.onNormalizeTime,
+        messages: this.state.hoursError ? [{
+          type: 'error'
+        }] : null,
+        "data-automation": this.props.hoursDataAutomation,
+        width: this.props.inputWidth
+      }), /*#__PURE__*/_react.default.createElement(_quizNumberInput.default, {
+        renderLabel: this.props.minutesLabel,
+        value: this.state.rawMinutesText,
+        onChange: this.onChangeExtraMinutes,
+        onBlur: this.onNormalizeTime,
+        messages: this.state.minutesError ? [{
+          type: 'error'
+        }] : null,
+        "data-automation": this.props.minutesDataAutomation,
+        width: this.props.inputWidth
+      })), /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        display: "block"
+      }, /*#__PURE__*/_react.default.createElement(_Errors.default, {
+        errorList: this.getErrorList()
+      })));
+    }
+  }]);
+  TimeUnitsInput.displayName = "TimeUnitsInput";
+  return TimeUnitsInput;
+}(_react.Component);
+
+exports.TimeUnitsInput = TimeUnitsInput;
+TimeUnitsInput.propTypes = {
+  onChange: _propTypes.default.func.isRequired,
+  margin: _propTypes.default.string,
+  inputWidth: _propTypes.default.string,
+  description: _propTypes.default.string.isRequired,
+  timeInSeconds: _propTypes.default.number,
+  includeDays: _propTypes.default.bool,
+  daysLabel: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
+  hoursLabel: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
+  minutesLabel: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
+  daysDataAutomation: _propTypes.default.string,
+  hoursDataAutomation: _propTypes.default.string,
+  minutesDataAutomation: _propTypes.default.string,
+  maxTimeInSeconds: _propTypes.default.number.isRequired,
+  minTimeInSeconds: _propTypes.default.number,
+  normalizeOnInput: _propTypes.default.bool // Should the number inputs normalize on every input event, instead of waiting for blur event?
+  // Note: increment actions (e.g. arrow up) will always normalize immediately
+  // Note: onChange will only ever be called after normalization
+
+};
+TimeUnitsInput.defaultProps = {
+  includeDays: false,
+  daysLabel: (0, _formatMessage.default)('Days'),
+  hoursLabel: (0, _formatMessage.default)('Hours'),
+  minutesLabel: (0, _formatMessage.default)('Minutes'),
+  timeInSeconds: 0,
+  minTimeInSeconds: 0,
+  normalizeOnInput: false,
+  margin: void 0,
+  daysDataAutomation: '',
+  hoursDataAutomation: '',
+  minutesDataAutomation: '',
+  inputWidth: null
+};
+var _default = TimeUnitsInput;
+exports.default = _default;