@hitachivantara/uikit-react-lab 2.6.18

package/dist/legacy/TimePicker/TimePicker.js

@@ -0,0 +1,402 @@
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.reflect.construct.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from "react";
+import PropTypes from "prop-types";
+import { ClickAwayListener, Popper, withStyles } from "@material-ui/core";
+import clsx from "clsx";
+import { HvTypography } from "@hitachivantara/uikit-react-core";
+import { Time as TimeIcon } from "@hitachivantara/uikit-react-icons";
+import UnitTimePicker from "./UnitTimePicker";
+import { TimePickerUnits, TimeFormat } from "./enums";
+import { getPeriodForDate } from "./timePickerUtils";
+import { getFormattedTime, getTimeFormatForLocale } from "./timePickerFormatter";
+import { getHoursForTimeFormat, getTimeWithFormat24 } from "./timePickerConverter";
+import PeriodPicker from "./PeriodPicker";
+import styles from "./styles";
+/**
+ * A TimePicker component with a popup used to choose the time, following specifications provided by Design System. Still in development.
+ */
+
+var HvTimePicker = /*#__PURE__*/function (_React$Component) {
+  _inherits(HvTimePicker, _React$Component);
+
+  var _super = _createSuper(HvTimePicker);
+
+  function HvTimePicker(props) {
+    var _this;
+
+    _classCallCheck(this, HvTimePicker);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "handleTimePopperClickAway", function () {
+      _this.cancelTimeSelection();
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleTimeIconClick", function (event) {
+      var currentTarget = event.currentTarget;
+      var timePopperOpen = _this.state.timePopperOpen;
+
+      _this.setTimePopperState(currentTarget.parentElement, !timePopperOpen);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "cancelTimeSelection", function () {
+      _this.setTimePopperState(null, false);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleHoursChange", function (hours) {
+      var selectedTime = _this.state.selectedTime;
+
+      var newSelectedTime = _objectSpread(_objectSpread({}, selectedTime), {}, {
+        hours: hours
+      });
+
+      _this.onSelectedTimeChange(newSelectedTime);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMinutesChange", function (minutes) {
+      var selectedTime = _this.state.selectedTime;
+
+      var newSelectedTime = _objectSpread(_objectSpread({}, selectedTime), {}, {
+        minutes: minutes
+      });
+
+      _this.onSelectedTimeChange(newSelectedTime);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleSecondsChange", function (seconds) {
+      var selectedTime = _this.state.selectedTime;
+
+      var newSelectedTime = _objectSpread(_objectSpread({}, selectedTime), {}, {
+        seconds: seconds
+      });
+
+      _this.onSelectedTimeChange(newSelectedTime);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleChangePeriod", function (period) {
+      var selectedTime = _this.state.selectedTime;
+
+      var newSelectedTime = _objectSpread(_objectSpread({}, selectedTime), {}, {
+        period: period
+      });
+
+      _this.onSelectedTimeChange(newSelectedTime);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setTimePopperState", function (anchor, open) {
+      _this.setState({
+        timePopperAnchor: anchor,
+        timePopperOpen: open
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setTimePopperPlacement", function (placement) {
+      var timePopperPlacement = _this.state.timePopperPlacement;
+
+      if (timePopperPlacement !== placement) {
+        _this.setState({
+          timePopperPlacement: placement
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onSelectedTimeChange", function (selectedTime) {
+      var onChange = _this.props.onChange;
+      var timeFormat = _this.state.timeFormat;
+
+      _this.setState({
+        selectedTime: selectedTime
+      });
+
+      var selectedTimeIn24Format = getTimeWithFormat24(selectedTime, timeFormat);
+      onChange(selectedTimeIn24Format);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getTimeFormat", function () {
+      var _this$props = _this.props,
+          timeFormat = _this$props.timeFormat,
+          locale = _this$props.locale;
+
+      if (timeFormat) {
+        return timeFormat;
+      }
+
+      return getTimeFormatForLocale(locale);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "isPopperBelowParent", function () {
+      var timePopperPlacement = _this.state.timePopperPlacement;
+      return timePopperPlacement.includes("bottom");
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderLabel", function () {
+      var _this$props2 = _this.props,
+          classes = _this$props2.classes,
+          labels = _this$props2.labels;
+      return /*#__PURE__*/React.createElement(HvTypography, {
+        variant: "labelText",
+        className: classes.label
+      }, labels.title);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderInput", function () {
+      var _this$props3 = _this.props,
+          classes = _this$props3.classes,
+          labels = _this$props3.labels;
+      var _this$state = _this.state,
+          selectedTime = _this$state.selectedTime,
+          timePopperOpen = _this$state.timePopperOpen;
+
+      var isPopperBelow = _this.isPopperBelowParent();
+
+      return /*#__PURE__*/React.createElement(React.Fragment, null, labels && labels.title && _this.renderLabel(), /*#__PURE__*/React.createElement("div", {
+        className: clsx(classes.inputContainer, timePopperOpen ? isPopperBelow ? classes.inputPopperOpenedBelow : classes.inputPopperOpenedAbove : classes.inputPopperClosed)
+      }, /*#__PURE__*/React.createElement("input", {
+        ref: function ref(element) {
+          _this.inputElement = element;
+        },
+        className: classes.input,
+        value: getFormattedTime(selectedTime),
+        placeholder: labels.placeholder,
+        type: "text",
+        readOnly: true
+      }), /*#__PURE__*/React.createElement(TimeIcon, {
+        className: classes.icon,
+        onClick: _this.handleTimeIconClick
+      })));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderPopper", function () {
+      var classes = _this.props.classes;
+      var _this$state2 = _this.state,
+          timePopperOpen = _this$state2.timePopperOpen,
+          timePopperAnchor = _this$state2.timePopperAnchor;
+
+      var isPopperBelow = _this.isPopperBelowParent();
+
+      return /*#__PURE__*/React.createElement(Popper, {
+        className: clsx(classes.popper, isPopperBelow ? classes.popperBelow : classes.popperAbove),
+        open: timePopperOpen,
+        anchorEl: timePopperAnchor,
+        placement: "bottom-start",
+        disablePortal: true,
+        popperOptions: {
+          onCreate: function onCreate(data) {
+            _this.setTimePopperPlacement(data.placement);
+          },
+          onUpdate: function onUpdate(data) {
+            _this.setTimePopperPlacement(data.placement);
+          }
+        }
+      }, _this.renderTimePopperContent());
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderTimePopperContent", function () {
+      var classes = _this.props.classes;
+      var _this$state3 = _this.state,
+          selectedTime = _this$state3.selectedTime,
+          timeFormat = _this$state3.timeFormat;
+      var separator = /*#__PURE__*/React.createElement("span", {
+        className: classes.separator
+      }, ":");
+      return /*#__PURE__*/React.createElement("div", {
+        className: classes.timePopperContainer
+      }, /*#__PURE__*/React.createElement(UnitTimePicker, {
+        unit: timeFormat === TimeFormat.H24 ? TimePickerUnits.HOUR_24.type : TimePickerUnits.HOUR_12.type,
+        unitValue: selectedTime.hours,
+        onChangeUnitTimeValue: _this.handleHoursChange
+      }), separator, /*#__PURE__*/React.createElement(UnitTimePicker, {
+        unit: TimePickerUnits.MINUTE.type,
+        unitValue: selectedTime.minutes,
+        onChangeUnitTimeValue: _this.handleMinutesChange
+      }), separator, /*#__PURE__*/React.createElement(UnitTimePicker, {
+        unit: TimePickerUnits.SECOND.type,
+        unitValue: selectedTime.seconds,
+        onChangeUnitTimeValue: _this.handleSecondsChange
+      }), timeFormat === TimeFormat.H12 && /*#__PURE__*/React.createElement("div", {
+        className: classes.periodContainer
+      }, /*#__PURE__*/React.createElement(PeriodPicker, {
+        onChangePeriod: _this.handleChangePeriod,
+        period: selectedTime.period
+      })));
+    });
+
+    var _this$props4 = _this.props,
+        _onChange = _this$props4.onChange,
+        _hours = _this$props4.hours,
+        _minutes = _this$props4.minutes,
+        _seconds = _this$props4.seconds,
+        _period = _this$props4.period;
+
+    var _timeFormat = _this.getTimeFormat();
+
+    var _selectedTime = {
+      hours: getHoursForTimeFormat(_hours, _timeFormat),
+      minutes: _minutes,
+      seconds: _seconds,
+      period: _timeFormat === TimeFormat.H24 ? undefined : _period
+    };
+    _this.state = {
+      timePopperOpen: false,
+      timePopperAnchor: null,
+      timePopperPlacement: "bottom-start",
+      timeFormat: _timeFormat,
+      selectedTime: _selectedTime
+    };
+
+    _onChange(getTimeWithFormat24(_selectedTime, _timeFormat));
+
+    return _this;
+  }
+  /**
+   * Handles the event of clicking away from the Popper.
+   *
+   * @memberof HvTimePicker
+   */
+
+
+  _createClass(HvTimePicker, [{
+    key: "render",
+    value:
+    /**
+     * Renders the TimePicker component.
+     *
+     * @returns
+     * @memberof HvTimePicker
+     */
+    function render() {
+      var classes = this.props.classes;
+      return /*#__PURE__*/React.createElement(ClickAwayListener, {
+        onClickAway: this.handleTimePopperClickAway
+      }, /*#__PURE__*/React.createElement("div", {
+        className: classes.timePickerContainer
+      }, this.renderInput(), this.renderPopper()));
+    }
+  }]);
+
+  return HvTimePicker;
+}(React.Component);
+
+process.env.NODE_ENV !== "production" ? HvTimePicker.propTypes = {
+  /**
+   * An Object containing the various text associated with the time picker.
+   */
+  labels: PropTypes.shape({
+    /**
+     * Time picker label (appears above the input)
+     */
+    title: PropTypes.string,
+
+    /**
+     * Time picker placeholder (appears in the input)
+     */
+    placeholder: PropTypes.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.oneOf([TimeFormat.H12, TimeFormat.H24, undefined]),
+
+  /**
+   * Locale that will provide the time format(12 or 24 hour format)
+   * It is "overwritten" by the timeFormat prop
+   */
+  locale: PropTypes.string,
+
+  /**
+   * Default value for the hours picker
+   */
+  hours: PropTypes.number,
+
+  /**
+   * Default value for the minutes picker
+   */
+  minutes: PropTypes.number,
+
+  /**
+   * Default value for the seconds picker
+   */
+  seconds: PropTypes.number,
+
+  /**
+   * Default value for the period picker
+   */
+  period: PropTypes.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.func,
+
+  /**
+   * A Jss Object used to override or extend the styles applied to the input/popper
+   */
+  classes: PropTypes.shape({
+    input: PropTypes.string,
+    inputPopperOpenedBelow: PropTypes.string,
+    inputPopperOpenedAbove: PropTypes.string,
+    inputPopperClosed: PropTypes.string,
+    inputContainer: PropTypes.string,
+    icon: PropTypes.string,
+    timePickerContainer: PropTypes.string,
+    label: PropTypes.string,
+    timePopperContainer: PropTypes.string,
+    popper: PropTypes.string,
+    popperBelow: PropTypes.string,
+    popperAbove: PropTypes.string,
+    separator: PropTypes.string,
+    periodContainer: PropTypes.string
+  }).isRequired
+} : void 0;
+HvTimePicker.defaultProps = {
+  labels: {
+    title: undefined,
+    placeholder: "hh:mm:ss"
+  },
+  timeFormat: undefined,
+  locale: "en",
+  hours: new Date().getHours(),
+  minutes: new Date().getMinutes(),
+  seconds: 0,
+  period: getPeriodForDate(),
+  onChange: function onChange() {}
+};
+export default withStyles(styles, {
+  name: "HvTimePicker"
+})(HvTimePicker);
+//# sourceMappingURL=TimePicker.js.map

package/dist/legacy/TimePicker/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.js","names":["React","PropTypes","ClickAwayListener","Popper","withStyles","clsx","HvTypography","Time","TimeIcon","UnitTimePicker","TimePickerUnits","TimeFormat","getPeriodForDate","getFormattedTime","getTimeFormatForLocale","getHoursForTimeFormat","getTimeWithFormat24","PeriodPicker","styles","HvTimePicker","props","cancelTimeSelection","event","currentTarget","timePopperOpen","state","setTimePopperState","parentElement","hours","selectedTime","newSelectedTime","onSelectedTimeChange","minutes","seconds","period","anchor","open","setState","timePopperAnchor","placement","timePopperPlacement","onChange","timeFormat","selectedTimeIn24Format","locale","includes","classes","labels","label","title","isPopperBelow","isPopperBelowParent","renderLabel","inputContainer","inputPopperOpenedBelow","inputPopperOpenedAbove","inputPopperClosed","element","inputElement","input","placeholder","icon","handleTimeIconClick","popper","popperBelow","popperAbove","onCreate","data","setTimePopperPlacement","onUpdate","renderTimePopperContent","separator","timePopperContainer","H24","HOUR_24","type","HOUR_12","handleHoursChange","MINUTE","handleMinutesChange","SECOND","handleSecondsChange","H12","periodContainer","handleChangePeriod","getTimeFormat","undefined","handleTimePopperClickAway","timePickerContainer","renderInput","renderPopper","Component","propTypes","shape","string","oneOf","number","func","isRequired","defaultProps","Date","getHours","getMinutes","name"],"sources":["../../../src/TimePicker/TimePicker.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { ClickAwayListener, Popper, withStyles } from \"@material-ui/core\";\nimport clsx from \"clsx\";\nimport { HvTypography } from \"@hitachivantara/uikit-react-core\";\nimport { Time as TimeIcon } from \"@hitachivantara/uikit-react-icons\";\nimport UnitTimePicker from \"./UnitTimePicker\";\nimport { TimePickerUnits, TimeFormat } from \"./enums\";\nimport { getPeriodForDate } from \"./timePickerUtils\";\nimport { getFormattedTime, getTimeFormatForLocale } from \"./timePickerFormatter\";\nimport { getHoursForTimeFormat, getTimeWithFormat24 } from \"./timePickerConverter\";\nimport PeriodPicker from \"./PeriodPicker\";\nimport styles from \"./styles\";\n\n/**\n * A TimePicker component with a popup used to choose the time, following specifications provided by Design System. Still in development.\n */\nclass HvTimePicker extends React.Component {\n  constructor(props) {\n    super(props);\n\n    const { onChange, hours, minutes, seconds, period } = this.props;\n    const timeFormat = this.getTimeFormat();\n    const selectedTime = {\n      hours: getHoursForTimeFormat(hours, timeFormat),\n      minutes,\n      seconds,\n      period: timeFormat === TimeFormat.H24 ? undefined : period,\n    };\n\n    this.state = {\n      timePopperOpen: false,\n      timePopperAnchor: null,\n      timePopperPlacement: \"bottom-start\",\n      timeFormat,\n      selectedTime,\n    };\n\n    onChange(getTimeWithFormat24(selectedTime, timeFormat));\n  }\n\n  /**\n   * Handles the event of clicking away from the Popper.\n   *\n   * @memberof HvTimePicker\n   */\n  handleTimePopperClickAway = () => {\n    this.cancelTimeSelection();\n  };\n\n  /**\n   * Handles the click on the Time icon inside the input.\n   *\n   * @param {Object} event - on click event on the icon\n   * @memberof HvTimePicker\n   */\n  handleTimeIconClick = (event) => {\n    const { currentTarget } = event;\n    const { timePopperOpen } = this.state;\n    this.setTimePopperState(currentTarget.parentElement, !timePopperOpen);\n  };\n\n  /**\n   * Cancels the time selection and closes the Time popper.\n   *\n   * @memberof HvTimePicker\n   */\n  cancelTimeSelection = () => {\n    this.setTimePopperState(null, false);\n  };\n\n  /**\n   * Handles the change of the hours value\n   * @param {Number} hours - selected hours\n   * @memberof HvTimePicker\n   */\n  handleHoursChange = (hours) => {\n    const { selectedTime } = this.state;\n    const newSelectedTime = {\n      ...selectedTime,\n      hours,\n    };\n    this.onSelectedTimeChange(newSelectedTime);\n  };\n\n  /**\n   * Handles the change of the minutes value\n   * @param {Number} minutes - selected minutes\n   * @memberof HvTimePicker\n   */\n  handleMinutesChange = (minutes) => {\n    const { selectedTime } = this.state;\n    const newSelectedTime = {\n      ...selectedTime,\n      minutes,\n    };\n    this.onSelectedTimeChange(newSelectedTime);\n  };\n\n  /**\n   * Handles the change of the seconds value\n   * @param {Number} seconds - selected seconds\n   * @memberof HvTimePicker\n   */\n  handleSecondsChange = (seconds) => {\n    const { selectedTime } = this.state;\n    const newSelectedTime = {\n      ...selectedTime,\n      seconds,\n    };\n    this.onSelectedTimeChange(newSelectedTime);\n  };\n\n  /**\n   * Handles the change of the period (am/pm)\n   * @param {String} period - selected period\n   * @memberof HvTimePicker\n   */\n  handleChangePeriod = (period) => {\n    const { selectedTime } = this.state;\n    const newSelectedTime = {\n      ...selectedTime,\n      period,\n    };\n    this.onSelectedTimeChange(newSelectedTime);\n  };\n\n  /**\n   * Changes the popper open state according to the received flag.\n   *\n   * @param {element} anchor - Anchor element to append the popper\n   * @param {boolean} open - Opens / closes the popper according to this flag.\n   * @memberof HvTimePicker\n   */\n  setTimePopperState = (anchor, open) => {\n    this.setState({\n      timePopperAnchor: anchor,\n      timePopperOpen: open,\n    });\n  };\n\n  /**\n   * Changes the popper placement in the state\n   *\n   * @param {String} placement - Popper placement\n   * @memberof HvTimePicker\n   */\n  setTimePopperPlacement = (placement) => {\n    const { timePopperPlacement } = this.state;\n    if (timePopperPlacement !== placement) {\n      this.setState({\n        timePopperPlacement: placement,\n      });\n    }\n  };\n\n  /**\n   * Changes the selected time on the component state\n   * Also calls the onChange callback\n   * @param {Object} selectedTime - time object with the selected values for hours, minutes, seconds and period\n   */\n  onSelectedTimeChange = (selectedTime) => {\n    const { onChange } = this.props;\n    const { timeFormat } = this.state;\n    this.setState({\n      selectedTime,\n    });\n    const selectedTimeIn24Format = getTimeWithFormat24(selectedTime, timeFormat);\n    onChange(selectedTimeIn24Format);\n  };\n\n  /**\n   * Returns the appropriate time format (12 or 24) depending on the passed props(timeFormat and locale)\n   * @memberof HvTimePicker\n   */\n  getTimeFormat = () => {\n    const { timeFormat, locale } = this.props;\n    if (timeFormat) {\n      return timeFormat;\n    }\n    return getTimeFormatForLocale(locale);\n  };\n\n  /**\n   * Returns true if the popper is below the input and false otherwise\n   * @memberof HvTimePicker\n   */\n  isPopperBelowParent = () => {\n    const { timePopperPlacement } = this.state;\n    return timePopperPlacement.includes(\"bottom\");\n  };\n\n  /**\n   * Renderers\n   */\n\n  /**\n   * Renders the Label element.\n   *\n   * @memberof HvTimePicker\n   */\n  renderLabel = () => {\n    const { classes, labels } = this.props;\n    return (\n      <HvTypography variant=\"labelText\" className={classes.label}>\n        {labels.title}\n      </HvTypography>\n    );\n  };\n\n  /**\n   * Renders the input.\n   *\n   * @memberof HvTimePicker\n   */\n  renderInput = () => {\n    const { classes, labels } = this.props;\n    const { selectedTime, timePopperOpen } = this.state;\n    const isPopperBelow = this.isPopperBelowParent();\n    return (\n      <>\n        {labels && labels.title && this.renderLabel()}\n        <div\n          className={clsx(classes.inputContainer, {\n            [classes.inputPopperOpenedBelow]: timePopperOpen && isPopperBelow,\n            [classes.inputPopperOpenedAbove]: timePopperOpen && !isPopperBelow,\n            [classes.inputPopperClosed]: !timePopperOpen,\n          })}\n        >\n          <input\n            ref={(element) => {\n              this.inputElement = element;\n            }}\n            className={classes.input}\n            value={getFormattedTime(selectedTime)}\n            placeholder={labels.placeholder}\n            type=\"text\"\n            readOnly\n          />\n          <TimeIcon className={classes.icon} onClick={this.handleTimeIconClick} />\n        </div>\n      </>\n    );\n  };\n\n  /**\n   * Renders the Popper to choose the time\n   *\n   * @memberof HvTimePicker\n   */\n  renderPopper = () => {\n    const { classes } = this.props;\n    const { timePopperOpen, timePopperAnchor } = this.state;\n    const isPopperBelow = this.isPopperBelowParent();\n\n    return (\n      <Popper\n        className={clsx(classes.popper, {\n          [classes.popperBelow]: isPopperBelow,\n          [classes.popperAbove]: !isPopperBelow,\n        })}\n        open={timePopperOpen}\n        anchorEl={timePopperAnchor}\n        placement=\"bottom-start\"\n        disablePortal\n        popperOptions={{\n          onCreate: (data) => {\n            this.setTimePopperPlacement(data.placement);\n          },\n          onUpdate: (data) => {\n            this.setTimePopperPlacement(data.placement);\n          },\n        }}\n      >\n        {this.renderTimePopperContent()}\n      </Popper>\n    );\n  };\n\n  /**\n   * Renders the time popper content for time selection.\n   *\n   * @memberof HvTimePicker\n   */\n  renderTimePopperContent = () => {\n    const { classes } = this.props;\n    const { selectedTime, timeFormat } = this.state;\n\n    const separator = <span className={classes.separator}>:</span>;\n\n    return (\n      <div className={classes.timePopperContainer}>\n        <UnitTimePicker\n          unit={\n            timeFormat === TimeFormat.H24\n              ? TimePickerUnits.HOUR_24.type\n              : TimePickerUnits.HOUR_12.type\n          }\n          unitValue={selectedTime.hours}\n          onChangeUnitTimeValue={this.handleHoursChange}\n        />\n        {separator}\n        <UnitTimePicker\n          unit={TimePickerUnits.MINUTE.type}\n          unitValue={selectedTime.minutes}\n          onChangeUnitTimeValue={this.handleMinutesChange}\n        />\n        {separator}\n        <UnitTimePicker\n          unit={TimePickerUnits.SECOND.type}\n          unitValue={selectedTime.seconds}\n          onChangeUnitTimeValue={this.handleSecondsChange}\n        />\n        {timeFormat === TimeFormat.H12 && (\n          <div className={classes.periodContainer}>\n            <PeriodPicker onChangePeriod={this.handleChangePeriod} period={selectedTime.period} />\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  /**\n   * Renders the TimePicker component.\n   *\n   * @returns\n   * @memberof HvTimePicker\n   */\n  render() {\n    const { classes } = this.props;\n\n    return (\n      <ClickAwayListener onClickAway={this.handleTimePopperClickAway}>\n        <div className={classes.timePickerContainer}>\n          {this.renderInput()}\n          {this.renderPopper()}\n        </div>\n      </ClickAwayListener>\n    );\n  }\n}\n\nHvTimePicker.propTypes = {\n  /**\n   * An Object containing the various text associated with the time picker.\n   */\n  labels: PropTypes.shape({\n    /**\n     * Time picker label (appears above the input)\n     */\n    title: PropTypes.string,\n    /**\n     * Time picker placeholder (appears in the input)\n     */\n    placeholder: PropTypes.string,\n  }),\n  /**\n   * If the time should be presented in 12 or 24 hour format.\n   * If undefined, the component will use a format according to the passed locale.\n   * If defined, it will \"override\" the default value given by the locale\n   */\n  timeFormat: PropTypes.oneOf([TimeFormat.H12, TimeFormat.H24, undefined]),\n  /**\n   * Locale that will provide the time format(12 or 24 hour format)\n   * It is \"overwritten\" by the timeFormat prop\n   */\n  locale: PropTypes.string,\n  /**\n   * Default value for the hours picker\n   */\n  hours: PropTypes.number,\n  /**\n   * Default value for the minutes picker\n   */\n  minutes: PropTypes.number,\n  /**\n   * Default value for the seconds picker\n   */\n  seconds: PropTypes.number,\n  /**\n   * Default value for the period picker\n   */\n  period: PropTypes.string,\n  /**\n   * Callback function to be triggered when the input value is changed.\n   * It is invoked with a object param with the following props:\n   *  - hours (in a 24h format)\n   *  - minutes\n   *  - seconds\n   *  - period\n   *\n   * It is always invoked with the hours in a 24h format\n   */\n  onChange: PropTypes.func,\n  /**\n   * A Jss Object used to override or extend the styles applied to the input/popper\n   */\n  classes: PropTypes.shape({\n    input: PropTypes.string,\n    inputPopperOpenedBelow: PropTypes.string,\n    inputPopperOpenedAbove: PropTypes.string,\n    inputPopperClosed: PropTypes.string,\n    inputContainer: PropTypes.string,\n    icon: PropTypes.string,\n    timePickerContainer: PropTypes.string,\n    label: PropTypes.string,\n    timePopperContainer: PropTypes.string,\n    popper: PropTypes.string,\n    popperBelow: PropTypes.string,\n    popperAbove: PropTypes.string,\n    separator: PropTypes.string,\n    periodContainer: PropTypes.string,\n  }).isRequired,\n};\n\nHvTimePicker.defaultProps = {\n  labels: {\n    title: undefined,\n    placeholder: \"hh:mm:ss\",\n  },\n  timeFormat: undefined,\n  locale: \"en\",\n  hours: new Date().getHours(),\n  minutes: new Date().getMinutes(),\n  seconds: 0,\n  period: getPeriodForDate(),\n  onChange: () => {},\n};\n\nexport default withStyles(styles, { name: \"HvTimePicker\" })(HvTimePicker);\n"],"mappings":"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"}

package/dist/legacy/TimePicker/UnitTimePicker/UnitTimePicker.js

@@ -0,0 +1,207 @@
+import "core-js/modules/es.reflect.construct.js";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import "core-js/modules/es.number.constructor.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.regexp.to-string.js";
+import "core-js/modules/es.array.concat.js";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React from "react";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { HvInput } from "@hitachivantara/uikit-react-core";
+import { DropUpXS as AddTimeIcon, DropDownXS as SubtractTimeIcon } from "@hitachivantara/uikit-react-icons";
+import { isUnitTimeInValidRange } from "../timePickerUtils";
+import { padTime } from "../timePickerFormatter";
+import { TimePickerUnits } from "../enums";
+
+var UnitTimePicker = /*#__PURE__*/function (_React$Component) {
+  _inherits(UnitTimePicker, _React$Component);
+
+  var _super = _createSuper(UnitTimePicker);
+
+  function UnitTimePicker(props) {
+    var _this;
+
+    _classCallCheck(this, UnitTimePicker);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "handleCurrentValueChange", function (event, value) {
+      var unitTime = value === "" ? value : Number(value);
+
+      if ((unitTime || unitTime === "") && unitTime.toString().length <= 2) {
+        _this.changeTimeUnit(unitTime);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleFocusChange", function () {
+      var isFocused = _this.state.isFocused;
+
+      _this.setState({
+        isFocused: !isFocused
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleAddTime", function () {
+      var _this$state = _this.state,
+          currentValue = _this$state.currentValue,
+          maxValue = _this$state.maxValue,
+          minValue = _this$state.minValue;
+      var newUnitTime = currentValue === "" ? minValue : currentValue + 1;
+
+      if (newUnitTime > maxValue) {
+        newUnitTime = minValue;
+      }
+
+      _this.changeTimeUnit(newUnitTime);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleSubtractTime", function () {
+      var _this$state2 = _this.state,
+          currentValue = _this$state2.currentValue,
+          maxValue = _this$state2.maxValue,
+          minValue = _this$state2.minValue;
+      var newUnitTime = currentValue === "" ? maxValue : currentValue - 1;
+
+      if (newUnitTime < minValue) {
+        newUnitTime = maxValue;
+      }
+
+      _this.changeTimeUnit(newUnitTime);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "changeTimeUnit", function (value) {
+      var onChangeUnitTimeValue = _this.props.onChangeUnitTimeValue;
+
+      _this.setState({
+        currentValue: value
+      });
+
+      if (_this.isUnitTimeValid(value)) {
+        onChangeUnitTimeValue(value);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "isUnitTimeValid", function (unitTime) {
+      var unit = _this.props.unit;
+      var isValid = isUnitTimeInValidRange(unitTime, unit);
+
+      _this.setState({
+        isValid: isValid
+      });
+
+      return isValid;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderTimeUnit", function () {
+      var _this$state3 = _this.state,
+          currentValue = _this$state3.currentValue,
+          isFocused = _this$state3.isFocused;
+      return isFocused ? currentValue.toString() : padTime(currentValue).toString();
+    });
+
+    _this.state = {
+      minValue: TimePickerUnits[props.unit].min,
+      maxValue: TimePickerUnits[props.unit].max,
+      currentValue: props.unitValue,
+      isFocused: false,
+      isValid: true
+    };
+    return _this;
+  }
+  /**
+   * Handles the unit time value change when it is done through a change on the input.
+   * It only reflects on the state if the number of digits is between 0 and 2
+   * @param {Number} value - new unit time value
+   * @memberof UnitTimePicker
+   */
+
+
+  _createClass(UnitTimePicker, [{
+    key: "render",
+    value:
+    /**
+     * Renders the UnitTimePicker
+     */
+    function render() {
+      var classes = this.props.classes;
+      var isValid = this.state.isValid;
+      return /*#__PURE__*/React.createElement("div", {
+        className: classes.unitTimeContainer
+      }, /*#__PURE__*/React.createElement(AddTimeIcon, {
+        className: classes.addIcon,
+        onClick: this.handleAddTime
+      }), /*#__PURE__*/React.createElement(HvInput, {
+        disableClear: true,
+        className: classes.unitTime,
+        classes: {
+          input: classes.unitTimeInput,
+          root: classes.inputContainer,
+          inputRoot: clsx(classes.unitTimeInputRoot, !isValid && classes.unitTimeInputRootInvalid)
+        },
+        value: this.renderTimeUnit(),
+        onChange: this.handleCurrentValueChange,
+        onFocus: this.handleFocusChange,
+        onBlur: this.handleFocusChange,
+        validationIconVisible: false,
+        showInfo: false,
+        validation: this.validateUnitTime,
+        labels: {
+          placeholder: ""
+        }
+      }), /*#__PURE__*/React.createElement(SubtractTimeIcon, {
+        className: classes.subtractIcon,
+        onClick: this.handleSubtractTime
+      }));
+    }
+  }]);
+
+  return UnitTimePicker;
+}(React.Component);
+
+process.env.NODE_ENV !== "production" ? UnitTimePicker.propTypes = {
+  /**
+   * A Jss Object used to override or extend the styles applied to the input/popper
+   */
+  classes: PropTypes.instanceOf(Object).isRequired,
+
+  /**
+   * Type of Unit time picker (hour, minute or second)
+   */
+  unit: PropTypes.oneOf([TimePickerUnits.HOUR_24.type, TimePickerUnits.HOUR_12.type, TimePickerUnits.MINUTE.type, TimePickerUnits.SECOND.type]).isRequired,
+
+  /**
+   * Default unit time value
+   */
+  unitValue: function unitValue(otherProps, propName, componentName) {
+    var minValue = TimePickerUnits[otherProps.unit].min;
+    var maxValue = TimePickerUnits[otherProps.unit].max;
+    var unitValue = otherProps[propName];
+
+    if (unitValue > maxValue || unitValue < minValue) {
+      return new Error("Invalid prop ".concat(propName, " supplied to ").concat(componentName, ". Value not in the correct range ").concat(minValue, "-").concat(maxValue));
+    }
+
+    return null;
+  },
+
+  /**
+   * Callback function called when the unit time value changes
+   */
+  onChangeUnitTimeValue: PropTypes.func.isRequired
+} : void 0;
+UnitTimePicker.defaultProps = {
+  unitValue: 0
+};
+export default UnitTimePicker;
+//# sourceMappingURL=UnitTimePicker.js.map