@instructure/quiz-core 22.16.1 → 22.18.0

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

@@ -1,31 +1,10 @@
-function _assert_this_initialized(self) {
-    if (self === void 0) {
-        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-    }
-    return self;
-}
-function _call_super(_this, derived, args) {
-    derived = _get_prototype_of(derived);
-    return _possible_constructor_return(_this, _is_native_reflect_construct() ? Reflect.construct(derived, args || [], _get_prototype_of(_this).constructor) : derived.apply(_this, args));
-}
-function _class_call_check(instance, Constructor) {
-    if (!(instance instanceof Constructor)) {
-        throw new TypeError("Cannot call a class as a function");
-    }
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
 }
-function _defineProperties(target, props) {
-    for(var i = 0; i < props.length; i++){
-        var descriptor = props[i];
-        descriptor.enumerable = descriptor.enumerable || false;
-        descriptor.configurable = true;
-        if ("value" in descriptor) descriptor.writable = true;
-        Object.defineProperty(target, descriptor.key, descriptor);
-    }
-}
-function _create_class(Constructor, protoProps, staticProps) {
-    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) _defineProperties(Constructor, staticProps);
-    return Constructor;
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
 }
 function _define_property(obj, key, value) {
     if (key in obj) {
@@ -40,59 +19,92 @@ function _define_property(obj, key, value) {
     }
     return obj;
 }
-function _get_prototype_of(o) {
-    _get_prototype_of = Object.setPrototypeOf ? Object.getPrototypeOf : function getPrototypeOf(o) {
-        return o.__proto__ || Object.getPrototypeOf(o);
-    };
-    return _get_prototype_of(o);
-}
-function _inherits(subClass, superClass) {
-    if (typeof superClass !== "function" && superClass !== null) {
-        throw new TypeError("Super expression must either be null or a function");
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
     }
-    subClass.prototype = Object.create(superClass && superClass.prototype, {
-        constructor: {
-            value: subClass,
-            writable: true,
-            configurable: true
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
         }
-    });
-    if (superClass) _set_prototype_of(subClass, superClass);
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
 }
-function _possible_constructor_return(self, call) {
-    if (call && (_type_of(call) === "object" || typeof call === "function")) {
-        return call;
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
     }
-    return _assert_this_initialized(self);
+    return keys;
 }
-function _set_prototype_of(o, p) {
-    _set_prototype_of = Object.setPrototypeOf || function setPrototypeOf(o, p) {
-        o.__proto__ = p;
-        return o;
-    };
-    return _set_prototype_of(o, p);
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
 }
-function _type_of(obj) {
-    "@swc/helpers - typeof";
-    return obj && typeof Symbol !== "undefined" && obj.constructor === Symbol ? "symbol" : typeof obj;
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
 }
-function _is_native_reflect_construct() {
-    try {
-        var result = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}));
-    } catch (_) {}
-    return (_is_native_reflect_construct = function() {
-        return !!result;
-    })();
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
 }
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { FormFieldGroup } from '@instructure/quiz-common';
+import { FormFieldGroup } from '@instructure/quiz-common/components/FormFieldGroup/index';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import { View } from '@instructure/ui-view';
 import { List } from 'immutable';
 import { breakdownSeconds, DAY_IN_SECONDS, HOUR_IN_SECONDS, MINUTE_IN_SECONDS } from '../FormattedDuration';
 import t from '@instructure/quiz-i18n/format-message';
-import { NumberInput } from '@instructure/quiz-number-input';
+import { NumberInput } from '@instructure/quiz-number-input/components/NumberInput/index';
 // 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
@@ -102,107 +114,43 @@ import { NumberInput } from '@instructure/quiz-number-input';
 //
 // Currently only minutes/hours/days are supported, but support for
 // seconds could be added in the future if needed
-export var TimeUnitsInput = /*#__PURE__*/ function(Component) {
-    "use strict";
-    _inherits(TimeUnitsInput, Component);
-    function TimeUnitsInput() {
-        _class_call_check(this, TimeUnitsInput);
-        var _this;
-        _this = _call_super(this, TimeUnitsInput, arguments), _define_property(_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;
-        }), _define_property(_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 * MINUTE_IN_SECONDS + hours * HOUR_IN_SECONDS + days * DAY_IN_SECONDS;
-            var hoursError = null;
-            var daysError = null;
-            var shouldResetOnNormalize = false;
-            var _breakdownSeconds = breakdownSeconds(totalSeconds, _this.props.includeDays), newDays = _breakdownSeconds.days, newHours = _breakdownSeconds.hours, newMinutes = _breakdownSeconds.minutes;
-            if (totalSeconds > _this.props.maxTimeInSeconds) {
-                var _breakdownSeconds1 = breakdownSeconds(_this.props.maxTimeInSeconds, _this.props.includeDays), maxDays = _breakdownSeconds1.days, maxHours = _breakdownSeconds1.hours, maxMinutes = _breakdownSeconds1.minutes;
-                if (_this.props.includeDays) {
-                    daysError = t('{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 = t('{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;
-                shouldResetOnNormalize = true;
-            } else if (totalSeconds < _this.props.minTimeInSeconds) {
-                var _breakdownSeconds2 = breakdownSeconds(_this.props.minTimeInSeconds, _this.props.includeDays), minDays = _breakdownSeconds2.days, minHours = _breakdownSeconds2.hours, minMinutes = _breakdownSeconds2.minutes;
-                if (_this.props.includeDays) {
-                    daysError = t('{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 = t('{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;
-                shouldResetOnNormalize = true;
-            }
-            if (normalizeOnInput) {
-                _this.setState({
-                    days: days,
-                    hours: hours,
-                    minutes: minutes,
-                    daysError: daysError,
-                    hoursError: hoursError,
-                    minutesError: null,
-                    totalSeconds: totalSeconds,
-                    shouldResetOnNormalize: shouldResetOnNormalize
-                }, _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,
-                    shouldResetOnNormalize: shouldResetOnNormalize
-                });
-            }
-        }), _define_property(_this, "onNormalizeTime", function() {
-            var _breakdownSeconds = breakdownSeconds(_this.state.totalSeconds, _this.props.includeDays), newDays = _breakdownSeconds.days, newHours = _breakdownSeconds.hours, newMinutes = _breakdownSeconds.minutes;
-            if (_this.state.shouldResetOnNormalize) {
-                var _this_props_onReset, _this_props;
-                (_this_props_onReset = (_this_props = _this.props).onReset) === null || _this_props_onReset === void 0 ? void 0 : _this_props_onReset.call(_this_props);
-            }
-            _this.setState({
+export function TimeUnitsInput(props) {
+    var daysDataAutomation = props.daysDataAutomation, daysLabel = props.daysLabel, description = props.description, hoursDataAutomation = props.hoursDataAutomation, hoursLabel = props.hoursLabel, includeDays = props.includeDays, inputWidth = props.inputWidth, maxTimeInSeconds = props.maxTimeInSeconds, minTimeInSeconds = props.minTimeInSeconds, minutesDataAutomation = props.minutesDataAutomation, minutesLabel = props.minutesLabel, normalizeOnInput = props.normalizeOnInput, onChange = props.onChange, onReset = props.onReset, timeInSeconds = props.timeInSeconds;
+    // Initialize state from props (replaces UNSAFE_componentWillMount)
+    var _useState = _sliced_to_array(useState(function() {
+        var _breakdownSeconds = breakdownSeconds(timeInSeconds, includeDays), days = _breakdownSeconds.days, hours = _breakdownSeconds.hours, minutes = _breakdownSeconds.minutes;
+        return {
+            days: days,
+            hours: hours,
+            minutes: minutes,
+            rawDaysText: days,
+            rawHoursText: hours,
+            rawMinutesText: minutes,
+            totalSeconds: timeInSeconds,
+            shouldResetOnNormalize: false,
+            errors: List(),
+            daysError: null,
+            hoursError: null,
+            minutesError: null
+        };
+    }), 2), state = _useState[0], setState = _useState[1];
+    // Helper function to check if event is increment/decrement
+    function isIncrementOrDecrement(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;
+    }
+    // Normalize time with given values (used after state update)
+    function normalizeTimeWithValues(totalSeconds, shouldReset) {
+        var _breakdownSeconds = breakdownSeconds(totalSeconds, includeDays), newDays = _breakdownSeconds.days, newHours = _breakdownSeconds.hours, newMinutes = _breakdownSeconds.minutes;
+        if (shouldReset) {
+            onReset === null || onReset === void 0 ? void 0 : onReset();
+        }
+        setState(function(prev) {
+            return _object_spread_props(_object_spread({}, prev), {
                 days: newDays,
                 rawDaysText: newDays,
                 hours: newHours,
@@ -211,141 +159,210 @@ export var TimeUnitsInput = /*#__PURE__*/ function(Component) {
                 rawMinutesText: newMinutes,
                 shouldResetOnNormalize: false
             });
-            _this.props.onChange(_this.state.totalSeconds);
-        }), _define_property(_this, "onChangeExtraMinutes", function(e, rawString, normalizedString) {
-            _this.onChangeTimeUnit(e, rawString, normalizedString, 'minutes');
-        }), _define_property(_this, "onChangeExtraHours", function(e, rawString, normalizedString) {
-            _this.onChangeTimeUnit(e, rawString, normalizedString, 'hours');
-        }), _define_property(_this, "onChangeExtraDays", function(e, rawString, normalizedString) {
-            _this.onChangeTimeUnit(e, rawString, normalizedString, 'days');
-        }), _define_property(_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 errorArray.map(function(error) {
-                return {
-                    type: 'error',
-                    text: error
-                };
-            });
         });
-        return _this;
+        onChange(totalSeconds);
     }
-    _create_class(TimeUnitsInput, [
-        {
-            key: "UNSAFE_componentWillMount",
-            value: function UNSAFE_componentWillMount() {
-                var _breakdownSeconds = breakdownSeconds(this.props.timeInSeconds, this.props.includeDays), days = _breakdownSeconds.days, hours = _breakdownSeconds.hours, minutes = _breakdownSeconds.minutes;
-                this.setState({
-                    days: days,
-                    hours: hours,
-                    minutes: minutes,
-                    rawDaysText: days,
-                    rawHoursText: hours,
-                    rawMinutesText: minutes,
-                    totalSeconds: this.props.timeInSeconds,
-                    shouldResetOnNormalize: false,
-                    errors: List()
+    // Normalize time from current state (used by onBlur)
+    function onNormalizeTime() {
+        normalizeTimeWithValues(state.totalSeconds, state.shouldResetOnNormalize);
+    }
+    function onChangeTime(e, rawString, inputNumber, source) {
+        var shouldNormalizeOnInput = isIncrementOrDecrement(e) || normalizeOnInput;
+        var newMinutes = source === 'minutes' ? inputNumber : state.minutes;
+        newMinutes = shouldNormalizeOnInput ? newMinutes : Math.max(newMinutes, 0);
+        var newHours = source === 'hours' ? inputNumber : state.hours;
+        newHours = shouldNormalizeOnInput ? newHours : Math.max(newHours, 0);
+        var newDays = source === 'days' ? inputNumber : state.days || 0;
+        var newTotalSeconds = newMinutes * MINUTE_IN_SECONDS + newHours * HOUR_IN_SECONDS + newDays * DAY_IN_SECONDS;
+        var newHoursError = null;
+        var newDaysError = null;
+        var newShouldResetOnNormalize = false;
+        var _breakdownSeconds = breakdownSeconds(newTotalSeconds, includeDays), calculatedDays = _breakdownSeconds.days, calculatedHours = _breakdownSeconds.hours, calculatedMinutes = _breakdownSeconds.minutes;
+        if (newTotalSeconds > maxTimeInSeconds) {
+            var _breakdownSeconds1 = breakdownSeconds(maxTimeInSeconds, includeDays), maxDays = _breakdownSeconds1.days, maxHours = _breakdownSeconds1.hours, maxMinutes = _breakdownSeconds1.minutes;
+            if (includeDays) {
+                newDaysError = t('{newDays, number} days {newHours, number} hours {newMinutes, number} minutes exceeds maximum time of {maxDays, number} days {maxHours, number} hours {maxMinutes, number} minutes.', {
+                    newDays: calculatedDays,
+                    newHours: calculatedHours,
+                    newMinutes: calculatedMinutes,
+                    maxDays: maxDays,
+                    maxHours: maxHours,
+                    maxMinutes: maxMinutes
+                });
+            } else {
+                newHoursError = t('{newHours, number} hours {newMinutes, number} minutes exceeds maximum time of {maxHours, number} hours {maxMinutes, number} minutes.', {
+                    newHours: calculatedHours,
+                    newMinutes: calculatedMinutes,
+                    maxHours: maxHours,
+                    maxMinutes: maxMinutes
+                });
+            }
+            newTotalSeconds = maxTimeInSeconds;
+            newShouldResetOnNormalize = true;
+        } else if (newTotalSeconds < minTimeInSeconds) {
+            var _breakdownSeconds2 = breakdownSeconds(minTimeInSeconds, includeDays), minDays = _breakdownSeconds2.days, minHours = _breakdownSeconds2.hours, minMinutes = _breakdownSeconds2.minutes;
+            if (includeDays) {
+                newDaysError = t('{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: calculatedDays,
+                    newHours: calculatedHours,
+                    newMinutes: calculatedMinutes,
+                    minDays: minDays,
+                    minHours: minHours,
+                    minMinutes: minMinutes
+                });
+            } else {
+                newHoursError = t('{newHours, number} hours {newMinutes, number} minutes is lower than the minimum time of {minHours, number} hours {minMinutes, number} minutes.', {
+                    newHours: calculatedHours,
+                    newMinutes: calculatedMinutes,
+                    minHours: minHours,
+                    minMinutes: minMinutes
                 });
             }
-        },
-        {
-            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 = t('{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);
-                }
+            newTotalSeconds = minTimeInSeconds;
+            newShouldResetOnNormalize = true;
+        }
+        if (shouldNormalizeOnInput) {
+            setState(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), {
+                    days: newDays,
+                    hours: newHours,
+                    minutes: newMinutes,
+                    daysError: newDaysError,
+                    hoursError: newHoursError,
+                    minutesError: null,
+                    totalSeconds: newTotalSeconds,
+                    shouldResetOnNormalize: newShouldResetOnNormalize
+                });
+            });
+            // Normalize immediately with the calculated values
+            normalizeTimeWithValues(newTotalSeconds, newShouldResetOnNormalize);
+        } else {
+            setState(function(prev) {
+                return _object_spread_props(_object_spread({}, prev), {
+                    days: newDays,
+                    rawDaysText: newDays,
+                    hours: newHours,
+                    rawHoursText: newHours,
+                    minutes: newMinutes,
+                    rawMinutesText: newMinutes,
+                    daysError: newDaysError,
+                    hoursError: newHoursError,
+                    minutesError: null,
+                    totalSeconds: newTotalSeconds,
+                    shouldResetOnNormalize: newShouldResetOnNormalize
+                });
+            });
+        }
+    }
+    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 (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 (normalizeOnInput) {
+                onNormalizeTime();
+                return;
             }
-        },
-        {
-            key: "render",
-            value: function render() {
-                return /*#__PURE__*/ React.createElement(View, {
-                    display: "block"
-                }, /*#__PURE__*/ React.createElement(FormFieldGroup, {
-                    description: /*#__PURE__*/ React.createElement(ScreenReaderContent, null, this.props.description),
-                    layout: "columns",
-                    vAlign: "top",
-                    startAt: "small",
-                    messages: this.getErrorList()
-                }, this.props.includeDays && /*#__PURE__*/ React.createElement(NumberInput, {
-                    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.createElement(NumberInput, {
-                    renderLabel: this.props.hoursLabel,
-                    min: this.props.includeDays ? undefined : 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.createElement(NumberInput, {
-                    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
-                })));
+            var unitMessageText = t('{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;
             }
+            setState(function(prev) {
+                return _object_spread({}, prev, update);
+            });
+        } else {
+            onChangeTime(e, rawString, inputNumber, unit);
         }
-    ]);
-    return TimeUnitsInput;
-}(Component);
-_define_property(TimeUnitsInput, "propTypes", {
+    }
+    function onChangeExtraMinutes(e, rawString, normalizedString) {
+        onChangeTimeUnit(e, rawString, normalizedString, 'minutes');
+    }
+    function onChangeExtraHours(e, rawString, normalizedString) {
+        onChangeTimeUnit(e, rawString, normalizedString, 'hours');
+    }
+    function onChangeExtraDays(e, rawString, normalizedString) {
+        onChangeTimeUnit(e, rawString, normalizedString, 'days');
+    }
+    function getErrorList() {
+        var errorArray = [];
+        var daysError = state.daysError, hoursError = state.hoursError, minutesError = state.minutesError;
+        daysError && errorArray.push(daysError);
+        hoursError && errorArray.push(hoursError);
+        minutesError && errorArray.push(minutesError);
+        return errorArray.map(function(error) {
+            return {
+                type: 'error',
+                text: error
+            };
+        });
+    }
+    return /*#__PURE__*/ React.createElement(View, {
+        display: "block"
+    }, /*#__PURE__*/ React.createElement(FormFieldGroup, {
+        description: /*#__PURE__*/ React.createElement(ScreenReaderContent, null, description),
+        layout: "columns",
+        vAlign: "top",
+        startAt: "small",
+        messages: getErrorList()
+    }, includeDays && /*#__PURE__*/ React.createElement(NumberInput, {
+        renderLabel: daysLabel,
+        min: 0,
+        value: state.rawDaysText,
+        onChange: onChangeExtraDays,
+        onBlur: onNormalizeTime,
+        messages: state.daysError ? [
+            {
+                type: 'error'
+            }
+        ] : null,
+        "data-automation": daysDataAutomation,
+        width: inputWidth
+    }), /*#__PURE__*/ React.createElement(NumberInput, {
+        renderLabel: hoursLabel,
+        min: includeDays ? undefined : 0,
+        value: state.rawHoursText,
+        onChange: onChangeExtraHours,
+        onBlur: onNormalizeTime,
+        messages: state.hoursError ? [
+            {
+                type: 'error'
+            }
+        ] : null,
+        "data-automation": hoursDataAutomation,
+        width: inputWidth
+    }), /*#__PURE__*/ React.createElement(NumberInput, {
+        renderLabel: minutesLabel,
+        value: state.rawMinutesText,
+        onChange: onChangeExtraMinutes,
+        onBlur: onNormalizeTime,
+        messages: state.minutesError ? [
+            {
+                type: 'error'
+            }
+        ] : null,
+        "data-automation": minutesDataAutomation,
+        width: inputWidth
+    })));
+}
+TimeUnitsInput.propTypes = {
     onChange: PropTypes.func.isRequired,
     margin: PropTypes.string,
     inputWidth: PropTypes.string,
@@ -371,8 +388,8 @@ _define_property(TimeUnitsInput, "propTypes", {
     minTimeInSeconds: PropTypes.number,
     normalizeOnInput: PropTypes.bool,
     onReset: PropTypes.func
-});
-_define_property(TimeUnitsInput, "defaultProps", {
+};
+TimeUnitsInput.defaultProps = {
     includeDays: false,
     daysLabel: t('Days'),
     hoursLabel: t('Hours'),
@@ -386,5 +403,5 @@ _define_property(TimeUnitsInput, "defaultProps", {
     minutesDataAutomation: '',
     inputWidth: null,
     onReset: void 0
-});
+};
 export default TimeUnitsInput;