@hitachivantara/uikit-react-lab 3.38.0

package/dist/TimePicker/TimePicker.js

@@ -0,0 +1,748 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.array.filter.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/web.dom-collections.for-each.js");
+
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.regexp.to-string.js");
+
+require("core-js/modules/es.string.trim.js");
+
+require("core-js/modules/es.array.join.js");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _core = require("@material-ui/core");
+
+var _uikitReactCore = require("@hitachivantara/uikit-react-core");
+
+var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+
+var _enums = require("./enums");
+
+var _timePickerFormatter = require("./timePickerFormatter");
+
+var _timePickerConverter = require("./timePickerConverter");
+
+var _UnitTimePicker = _interopRequireDefault(require("./UnitTimePicker"));
+
+var _PeriodPicker = _interopRequireDefault(require("./PeriodPicker"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _excluded = ["classes", "className", "id", "name", "required", "disabled", "label", "aria-label", "aria-labelledby", "description", "aria-describedby", "onChange", "status", "statusMessage", "aria-errormessage", "placeholder", "hoursPlaceholder", "minutesPlaceholder", "secondsPlaceholder", "value", "defaultValue", "timeFormat", "locale", "disableDefaultValue", "onToggle", "hours", "minutes", "seconds", "period", "disablePortal", "escapeWithReference", "dropdownProps"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else 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; }
+
+var setFocusToContent = function setFocusToContent(containerRef) {
+  var _containerRef$getElem;
+
+  containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$getElem = containerRef.getElementsByTagName("input")[0]) === null || _containerRef$getElem === void 0 ? void 0 : _containerRef$getElem.focus();
+};
+
+var timeIsEqual = function timeIsEqual(timeA, timeB) {
+  return timeA === timeB || timeA == null && timeB == null || timeA != null && timeB != null && timeA.hours === timeB.hours && timeA.minutes === timeB.minutes && timeA.seconds === timeB.seconds && timeA.period === timeB.period;
+};
+
+var timeIsValid = function timeIsValid(time, timeFormat) {
+  var hourInputState = (time === null || time === void 0 ? void 0 : time.hours) != null && time.hours !== "" && time.hours >= 0 && (timeFormat === _enums.TimeFormat.H24 && time.hours <= 24 || timeFormat === _enums.TimeFormat.H12 && time.hours <= 12);
+  var minutesInputState = (time === null || time === void 0 ? void 0 : time.minutes) != null && time.minutes !== "" && time.minutes >= 0 && time.minutes <= 59;
+  var secondsInputState = (time === null || time === void 0 ? void 0 : time.seconds) != null && time.seconds !== "" && time.seconds >= 0 && time.seconds <= 59;
+  return hourInputState && minutesInputState && secondsInputState;
+};
+/**
+ * A TimePicker component used to choose the time, following specifications provided by Design System. Still in development.
+ */
+
+
+var HvTimePicker = function HvTimePicker(_ref) {
+  var classes = _ref.classes,
+      className = _ref.className,
+      id = _ref.id,
+      name = _ref.name,
+      _ref$required = _ref.required,
+      required = _ref$required === void 0 ? false : _ref$required,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      label = _ref.label,
+      ariaLabel = _ref["aria-label"],
+      ariaLabelledBy = _ref["aria-labelledby"],
+      description = _ref.description,
+      ariaDescribedBy = _ref["aria-describedby"],
+      onChange = _ref.onChange,
+      status = _ref.status,
+      statusMessage = _ref.statusMessage,
+      ariaErrorMessage = _ref["aria-errormessage"],
+      placeholder = _ref.placeholder,
+      _ref$hoursPlaceholder = _ref.hoursPlaceholder,
+      hoursPlaceholder = _ref$hoursPlaceholder === void 0 ? "hh" : _ref$hoursPlaceholder,
+      _ref$minutesPlacehold = _ref.minutesPlaceholder,
+      minutesPlaceholder = _ref$minutesPlacehold === void 0 ? "mm" : _ref$minutesPlacehold,
+      _ref$secondsPlacehold = _ref.secondsPlaceholder,
+      secondsPlaceholder = _ref$secondsPlacehold === void 0 ? "ss" : _ref$secondsPlacehold,
+      valueProp = _ref.value,
+      defaultValueProp = _ref.defaultValue,
+      chosenTimeFormat = _ref.timeFormat,
+      localeProp = _ref.locale,
+      disableDefaultValue = _ref.disableDefaultValue,
+      onToggleCallback = _ref.onToggle,
+      _ref$hours = _ref.hours,
+      hours = _ref$hours === void 0 ? new Date().getHours() : _ref$hours,
+      _ref$minutes = _ref.minutes,
+      minutes = _ref$minutes === void 0 ? new Date().getMinutes() : _ref$minutes,
+      _ref$seconds = _ref.seconds,
+      seconds = _ref$seconds === void 0 ? 0 : _ref$seconds,
+      chosenTimePeriod = _ref.period,
+      _ref$disablePortal = _ref.disablePortal,
+      disablePortal = _ref$disablePortal === void 0 ? true : _ref$disablePortal,
+      _ref$escapeWithRefere = _ref.escapeWithReference,
+      escapeWithReference = _ref$escapeWithRefere === void 0 ? true : _ref$escapeWithRefere,
+      dropdownProps = _ref.dropdownProps,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // #region STATE
+  var elementId = (0, _uikitReactCore.useUniqueId)(id, "hvtimepicker");
+  var localeFromProvider = (0, _uikitReactCore.useLocale)();
+  var locale = localeProp || localeFromProvider;
+  var timeFormat = (0, _react.useMemo)(function () {
+    return chosenTimeFormat != null ? chosenTimeFormat.toString() : (0, _timePickerFormatter.getTimeFormatForLocale)(locale);
+  }, [chosenTimeFormat, locale]);
+
+  var _useSavedState = (0, _uikitReactCore.useSavedState)(function () {
+    // fallback to the deprecated properties
+    // we shouldn't do that when promoting to core
+    // as it makes impossible to start with an empty value
+    var defaultValue = defaultValueProp !== null && defaultValueProp !== void 0 ? defaultValueProp : disableDefaultValue ? null : {
+      hours: hours,
+      minutes: minutes,
+      seconds: seconds
+    };
+    var v = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue;
+    return v != null ? {
+      hours: (v === null || v === void 0 ? void 0 : v.hours) != null ? (0, _timePickerConverter.getHoursForTimeFormat)(v.hours, timeFormat) : null,
+      minutes: v === null || v === void 0 ? void 0 : v.minutes,
+      seconds: v === null || v === void 0 ? void 0 : v.seconds,
+      period: timeFormat === _enums.TimeFormat.H12 ? chosenTimePeriod !== null && chosenTimePeriod !== void 0 ? chosenTimePeriod : (v === null || v === void 0 ? void 0 : v.hours) == null || v.hours < 12 ? _enums.PeriodPickerOptions.AM : _enums.PeriodPickerOptions.PM : null
+    } : null;
+  }),
+      _useSavedState2 = (0, _slicedToArray2.default)(_useSavedState, 4),
+      value = _useSavedState2[0],
+      setValue = _useSavedState2[1],
+      rollbackValue = _useSavedState2[2],
+      lastValidValue = _useSavedState2[3];
+
+  var _useControlled = (0, _uikitReactCore.useControlled)(statusMessage, "Required"),
+      _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 1),
+      validationMessage = _useControlled2[0];
+
+  var _useControlled3 = (0, _uikitReactCore.useControlled)(status, "standBy"),
+      _useControlled4 = (0, _slicedToArray2.default)(_useControlled3, 2),
+      validationState = _useControlled4[0],
+      setValidationState = _useControlled4[1];
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isOpen = _useState2[0],
+      setOpen = _useState2[1]; // #endregion
+  // #region SIDE EFFECTS
+
+
+  var firstRender = (0, _react.useRef)(true);
+  var currentValue = (0, _react.useRef)(value);
+  (0, _react.useEffect)(function () {
+    currentValue.current = value;
+  });
+  var currentTimeFormat = (0, _react.useRef)(timeFormat);
+  (0, _react.useEffect)(function () {
+    currentTimeFormat.current = timeFormat;
+  });
+  (0, _react.useEffect)(function () {
+    // allow external changes to the time format (via timeFormat or locale properties)
+    if (!firstRender.current && currentValue.current != null) {
+      var to12 = timeFormat === _enums.TimeFormat.H12;
+      var _currentValue$current = currentValue.current,
+          h = _currentValue$current.hours,
+          p = _currentValue$current.period;
+
+      if (to12) {
+        if (h == null || h < 12) {
+          p = _enums.PeriodPickerOptions.AM;
+        } else {
+          p = _enums.PeriodPickerOptions.PM;
+
+          if (h > 12) {
+            h -= 12;
+          }
+        }
+      } else {
+        if (p === _enums.PeriodPickerOptions.AM) {
+          if (h === 12) {
+            h = 0;
+          }
+        } else if (h < 12) {
+          h += 12;
+        }
+
+        p = undefined;
+      }
+
+      setValue({
+        hours: h,
+        minutes: currentValue.current.minutes,
+        seconds: currentValue.current.seconds,
+        period: p
+      }, true);
+    }
+  }, [setValue, timeFormat]);
+  (0, _react.useEffect)(function () {
+    // allow control of value property
+    if (!firstRender.current) {
+      var dayPeriod = (valueProp === null || valueProp === void 0 ? void 0 : valueProp.hours) == null || valueProp.hours < 12 ? _enums.PeriodPickerOptions.AM : _enums.PeriodPickerOptions.PM;
+      setValue(valueProp != null ? {
+        hours: (valueProp === null || valueProp === void 0 ? void 0 : valueProp.hours) != null ? (0, _timePickerConverter.getHoursForTimeFormat)(valueProp.hours, currentTimeFormat.current) : null,
+        minutes: valueProp === null || valueProp === void 0 ? void 0 : valueProp.minutes,
+        seconds: valueProp === null || valueProp === void 0 ? void 0 : valueProp.seconds,
+        period: currentTimeFormat.current === _enums.TimeFormat.H12 ? dayPeriod : null
+      } : null, true);
+    }
+  }, [setValue, valueProp]);
+  (0, _react.useEffect)(function () {
+    // on close, make sure to restore the last valid value
+    // (in the case the user closed with some time part invalid)
+    if (!firstRender.current && !isOpen) {
+      rollbackValue();
+    }
+  }, [isOpen, rollbackValue]);
+  (0, _react.useEffect)(function () {
+    // run validations on each render
+    // (except on the first, remaining in the standBy/untouched state)
+    if (!firstRender.current) {
+      setValidationState(function () {
+        // this will only run if status is uncontrolled
+        if (required && lastValidValue == null) {
+          return "invalid";
+        }
+
+        return "valid";
+      });
+    }
+  });
+  (0, _react.useEffect)(function () {
+    firstRender.current = false;
+  }, []); // #endregion
+  // #region EVENT HANDLERS
+
+  var handleTimeChange = function handleTimeChange(updatedTimeObject) {
+    if (!timeIsEqual(value, updatedTimeObject)) {
+      var valid = timeIsValid(updatedTimeObject, timeFormat); // the value only is commited if valid
+
+      setValue(updatedTimeObject, valid);
+
+      if (valid) {
+        // always output in 24h format
+        onChange === null || onChange === void 0 ? void 0 : onChange((0, _timePickerConverter.getTimeWithFormat24)(updatedTimeObject, timeFormat));
+      }
+    }
+  };
+  /**
+   * Handles the change of the hours value
+   * @param {Number} hours - selected hours
+   * @memberof HvTimePicker
+   */
+
+
+  var handleHoursChange = function handleHoursChange(updatedHours) {
+    var newSelectedTime = _objectSpread(_objectSpread({}, value), {}, {
+      hours: updatedHours
+    });
+
+    handleTimeChange(newSelectedTime);
+  };
+  /**
+   * Handles the change of the minutes value
+   * @param {Number} minutes - selected minutes
+   * @memberof HvTimePicker
+   */
+
+
+  var handleMinutesChange = function handleMinutesChange(updatedMinutes) {
+    var newSelectedTime = _objectSpread(_objectSpread({}, value), {}, {
+      minutes: updatedMinutes
+    });
+
+    handleTimeChange(newSelectedTime);
+  };
+  /**
+   * Handles the change of the seconds value
+   * @param {Number} seconds - selected seconds
+   * @memberof HvTimePicker
+   */
+
+
+  var handleSecondsChange = function handleSecondsChange(updatedSeconds) {
+    var newSelectedTime = _objectSpread(_objectSpread({}, value), {}, {
+      seconds: updatedSeconds
+    });
+
+    handleTimeChange(newSelectedTime);
+  };
+  /**
+   * Handles the change of the period (am/pm)
+   * @param {String} period - selected period
+   * @memberof HvTimePicker
+   */
+
+
+  var handleChangePeriod = function handleChangePeriod(updatedPeriod) {
+    var newSelectedTime = _objectSpread(_objectSpread({}, value), {}, {
+      period: updatedPeriod
+    });
+
+    handleTimeChange(newSelectedTime);
+  };
+
+  var onToggle = function onToggle(evt, open) {
+    /* 
+     If evt is null this toggle wasn't triggered by the user.
+     instead it was triggered by the baseDropdown useEffect after
+     the change of the expanded property.
+    */
+    if (evt === null) return;
+    onToggleCallback === null || onToggleCallback === void 0 ? void 0 : onToggleCallback(evt, open);
+    setOpen(open);
+  }; // #endregion
+
+
+  var hasLabels = label != null;
+  var hasDescription = description != null; // the error message area will only be created if:
+  // - an external element that provides an error message isn't identified via aria-errormessage AND
+  //   - both status and statusMessage properties are being controlled OR
+  //   - status is uncontrolled and required is true
+
+  var canShowError = ariaErrorMessage == null && (status !== undefined && statusMessage !== undefined || status === undefined && required);
+  var isStateInvalid = validationState === "invalid";
+  var errorMessageId;
+
+  if (isStateInvalid) {
+    errorMessageId = canShowError ? (0, _uikitReactCore.setId)(elementId, "error") : ariaErrorMessage;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvFormElement, (0, _extends2.default)({
+    id: id,
+    name: name,
+    locale: locale,
+    required: required,
+    disabled: disabled,
+    status: validationState,
+    classes: {
+      root: classes.formElementRoot
+    },
+    className: (0, _clsx.default)(className, classes.root)
+  }, others), (hasLabels || hasDescription) && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.labelContainer
+  }, hasLabels && /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvLabel, {
+    id: (0, _uikitReactCore.setId)(elementId, "label"),
+    label: label,
+    className: classes.label
+  }), hasDescription && /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvInfoMessage, {
+    id: (0, _uikitReactCore.setId)(elementId, "description"),
+    className: classes.description
+  }, description)), /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvBaseDropdown, (0, _extends2.default)({
+    id: (0, _uikitReactCore.setId)(elementId, "timepicker-dropdown"),
+    role: "combobox",
+    placeholder: lastValidValue != null ? (0, _timePickerFormatter.getFormattedTime)(lastValidValue, timeFormat) : /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvTypography, {
+      variant: "placeholderText"
+    }, placeholder),
+    classes: {
+      placeholder: disabled ? classes.dropdownPlaceholderDisabled : classes.dropdownPlaceholder,
+      header: isStateInvalid ? classes.dropdownHeaderInvalid : undefined,
+      headerOpen: classes.dropdownHeaderOpen
+    },
+    variableWidth: true,
+    placement: "right",
+    adornment: /*#__PURE__*/_react.default.createElement(_uikitReactIcons.Time, {
+      color: disabled ? "atmo5" : "acce1",
+      className: classes.iconBaseRoot
+    }),
+    expanded: isOpen,
+    onToggle: onToggle,
+    onContainerCreation: setFocusToContent,
+    "aria-haspopup": "dialog",
+    "aria-label": ariaLabel,
+    "aria-labelledby": [label && (0, _uikitReactCore.setId)(elementId, "label"), ariaLabelledBy].join(" ").trim() || undefined,
+    "aria-invalid": isStateInvalid ? true : undefined,
+    "aria-errormessage": errorMessageId,
+    "aria-describedby": [description && (0, _uikitReactCore.setId)(elementId, "description"), ariaDescribedBy].join(" ").trim() || undefined,
+    disablePortal: disablePortal,
+    disabled: disabled,
+    popperProps: {
+      modifiers: [{
+        name: "preventOverflow",
+        enabled: escapeWithReference
+      }]
+    }
+  }, dropdownProps), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.timePopperContainer
+  }, /*#__PURE__*/_react.default.createElement(_UnitTimePicker.default, {
+    id: (0, _uikitReactCore.setId)(elementId, "hours"),
+    placeholder: hoursPlaceholder,
+    unit: timeFormat === _enums.TimeFormat.H24 ? _enums.TimePickerUnits.HOUR_24.type : _enums.TimePickerUnits.HOUR_12.type,
+    unitValue: value === null || value === void 0 ? void 0 : value.hours,
+    onChangeUnitTimeValue: handleHoursChange
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.separator
+  }, ":"), /*#__PURE__*/_react.default.createElement(_UnitTimePicker.default, {
+    id: (0, _uikitReactCore.setId)(elementId, "minutes"),
+    placeholder: minutesPlaceholder,
+    unit: _enums.TimePickerUnits.MINUTE.type,
+    unitValue: value === null || value === void 0 ? void 0 : value.minutes,
+    onChangeUnitTimeValue: handleMinutesChange
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: classes.separator
+  }, ":"), /*#__PURE__*/_react.default.createElement(_UnitTimePicker.default, {
+    id: (0, _uikitReactCore.setId)(elementId, "seconds"),
+    placeholder: secondsPlaceholder,
+    unit: _enums.TimePickerUnits.SECOND.type,
+    unitValue: value === null || value === void 0 ? void 0 : value.seconds,
+    onChangeUnitTimeValue: handleSecondsChange
+  }), timeFormat === _enums.TimeFormat.H12 && /*#__PURE__*/_react.default.createElement(_PeriodPicker.default, {
+    onChangePeriod: handleChangePeriod,
+    period: value === null || value === void 0 ? void 0 : value.period
+  }))), canShowError && /*#__PURE__*/_react.default.createElement(_uikitReactCore.HvWarningText, {
+    id: (0, _uikitReactCore.setId)(elementId, "error"),
+    disableBorder: true,
+    className: classes.error
+  }, validationMessage));
+};
+
+HvTimePicker.propTypes = {
+  /**
+   * A Jss Object used to override or extend the styles applied to the input/popper
+   */
+  classes: _propTypes.default.shape({
+    /**
+     * Styles applied to the root element.
+     */
+    root: _propTypes.default.string,
+
+    /**
+     * Styles applied to the input.
+     */
+    input: _propTypes.default.string,
+
+    /**
+     * Styles applied to the label.
+     */
+    label: _propTypes.default.string,
+
+    /**
+     * Styles applied to the timePopperContainer.
+     */
+    timePopperContainer: _propTypes.default.string,
+
+    /**
+     * Styles applied to the separator.
+     */
+    separator: _propTypes.default.string,
+
+    /**
+     * Styles applied to the period container.
+     */
+    periodContainer: _propTypes.default.string,
+
+    /**
+     * Styles applied to the form element.
+     */
+    formElementRoot: _propTypes.default.string,
+
+    /**
+     * Styles applied to the dropdown placeholder.
+     */
+    dropdownPlaceholder: _propTypes.default.string,
+
+    /**
+     * Styles applied to the icon base.
+     */
+    iconBaseRoot: _propTypes.default.string,
+
+    /**
+     * Styles applied to the error area.
+     */
+    error: _propTypes.default.string,
+
+    /**
+     * Styles applied to the container of the labels elements.
+     */
+    labelContainer: _propTypes.default.string,
+
+    /**
+     * Styles applied to the icon information text.
+     */
+    description: _propTypes.default.string,
+
+    /**
+     * Styles applied to the dropdown when invalid information text.
+     */
+    dropdownHeaderInvalid: _propTypes.default.string,
+
+    /**
+     * Styles applied to the dropdown text when invalid.
+     */
+    dropdownPlaceholderDisabled: _propTypes.default.string,
+
+    /**
+     * Styles applied to the dropdown border when invalid.
+     */
+    dropdownHeaderOpen: _propTypes.default.string
+  }).isRequired,
+
+  /**
+   * Class names to be applied.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * Id to be applied to the form element root node.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * The form element name.
+   */
+  name: _propTypes.default.string,
+
+  /**
+   * The value of the form element.
+   */
+  value: _propTypes.default.shape({
+    hours: _propTypes.default.number,
+    minutes: _propTypes.default.number,
+    seconds: _propTypes.default.number,
+    period: _propTypes.default.string
+  }),
+
+  /**
+   * When uncontrolled, defines the initial input value.
+   */
+  defaultValue: _propTypes.default.shape({
+    hours: _propTypes.default.number,
+    minutes: _propTypes.default.number,
+    seconds: _propTypes.default.number,
+    period: _propTypes.default.string
+  }),
+
+  /**
+   * Indicates that user input is required on the form element.
+   */
+  required: _propTypes.default.bool,
+
+  /**
+   * Indicates that the form element is disabled.
+   */
+  disabled: _propTypes.default.bool,
+
+  /**
+   * The label of the form element.
+   *
+   * The form element must be labeled for accessibility reasons.
+   * If not provided, an aria-label or aria-labelledby must be provided instead.
+   */
+  label: _propTypes.default.string,
+
+  /**
+   * @ignore
+   */
+  "aria-label": _propTypes.default.string,
+
+  /**
+   * @ignore
+   */
+  "aria-labelledby": _propTypes.default.string,
+
+  /**
+   * Provide additional descriptive text for the form element.
+   */
+  description: _propTypes.default.node,
+
+  /**
+   * @ignore
+   */
+  "aria-describedby": _propTypes.default.string,
+
+  /**
+   * The placeholder value when no time is selected.
+   */
+  placeholder: _propTypes.default.string,
+
+  /**
+   * The placeholder of the hours input.
+   */
+  hoursPlaceholder: _propTypes.default.string,
+
+  /**
+   * The placeholder of the minutes input.
+   */
+  minutesPlaceholder: _propTypes.default.string,
+
+  /**
+   * The placeholder of the seconds input.
+   */
+  secondsPlaceholder: _propTypes.default.string,
+
+  /**
+   * The status of the form element.
+   *
+   * Valid is correct, invalid is incorrect and standBy means no validations have run.
+   *
+   * When uncontrolled and unspecified it will default to "standBy" and change to either "valid"
+   * or "invalid" after any change to the state.
+   */
+  status: _propTypes.default.oneOf(["standBy", "valid", "invalid"]),
+
+  /**
+   * The error message to show when the validation status is "invalid".
+   *
+   * Defaults to "Required" when the status is uncontrolled and no `aria-errormessage` is provided.
+   */
+  statusMessage: _propTypes.default.node,
+
+  /**
+   * Identifies the element that provides an error message for the time picker.
+   *
+   * Will only be used when the validation status is invalid.
+   */
+  "aria-errormessage": _propTypes.default.string,
+
+  /**
+   * If the time should be presented in 12 or 24 hour format.
+   * If undefined, the component will use a format according to the passed locale.
+   * If defined, it will "override" the default value given by the locale
+   */
+  timeFormat: _propTypes.default.oneOf([_enums.TimeFormat.H12, _enums.TimeFormat.H24, 12, 24, undefined]),
+
+  /**
+   * Locale that will provide the time format(12 or 24 hour format)
+   * It is "overwritten" by the timeFormat prop
+   */
+  locale: _propTypes.default.string,
+
+  /**
+   * Callback function to be triggered when the input value is changed.
+   * It is invoked with a object param with the following props:
+   *  - hours (in a 24h format)
+   *  - minutes
+   *  - seconds
+   *  - period
+   *
+   * It is always invoked with the hours in a 24h format
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * Callback called when dropdown changes the expanded state.
+   *
+   * @param {object} event The event source of the callback.
+   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).
+   */
+  onToggle: _propTypes.default.func,
+
+  /**
+   * Allow starting with an empty value by not defaulting to the current time.
+   * This should become the default behavior when the component is promoted to core.
+   */
+  disableDefaultValue: _propTypes.default.bool,
+
+  /**
+   * Default value for the hours picker
+   * @deprecated use defaultValue instead
+   */
+  hours: _propTypes.default.number,
+
+  /**
+   * Default value for the minutes picker
+   * @deprecated use defaultValue instead
+   */
+  minutes: _propTypes.default.number,
+
+  /**
+   * Default value for the seconds picker
+   * @deprecated use defaultValue instead
+   */
+  seconds: _propTypes.default.number,
+
+  /**
+   * Default value for the period picker
+   * @deprecated use defaultValue instead
+   */
+  period: _propTypes.default.string,
+
+  /**
+   * Disable the portal behavior. The children stay within it's parent DOM hierarchy.
+   */
+  disablePortal: _propTypes.default.bool,
+
+  /**
+   * Sets if the calendar container should follow the date picker input out of the screen or stay visible.
+   */
+  escapeWithReference: _propTypes.default.bool,
+
+  /**
+   * Extra properties to be passed to the timepicker dropdown.
+   */
+  dropdownProps: _propTypes.default.instanceOf(Object)
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvTimePicker"
+})(HvTimePicker);
+
+exports.default = _default;
+//# sourceMappingURL=TimePicker.js.map