@hitachivantara/uikit-react-core 4.0.3 → 4.1.0

package/dist/legacy/TimePicker/TimePicker.js

@@ -7,11 +7,8 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["classes", "className", "id", "name", "required", "disabled", "readOnly", "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 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; }
-
 import "core-js/modules/es.function.name.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
@@ -33,75 +30,70 @@ import PeriodPicker from "./PeriodPicker";
 import styles from "./styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 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 === TimeFormat.H24 && time.hours <= 24 || timeFormat === 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.
  */
 
-
 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,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      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 = _objectWithoutProperties(_ref, _excluded);
-
+    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,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    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 = _objectWithoutProperties(_ref, _excluded);
   // #region STATE
   var elementId = useUniqueId(id, "hvtimepicker");
   var localeFromProvider = useLocale();
@@ -109,46 +101,42 @@ var HvTimePicker = function HvTimePicker(_ref) {
   var timeFormat = useMemo(function () {
     return chosenTimeFormat != null ? chosenTimeFormat.toString() : getTimeFormatForLocale(locale);
   }, [chosenTimeFormat, locale]);
-
   var _useSavedState = 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 ? 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 === TimeFormat.H12 ? chosenTimePeriod !== null && chosenTimePeriod !== void 0 ? chosenTimePeriod : (v === null || v === void 0 ? void 0 : v.hours) == null || v.hours < 12 ? PeriodPickerOptions.AM : PeriodPickerOptions.PM : null
-    } : null;
-  }),
-      _useSavedState2 = _slicedToArray(_useSavedState, 4),
-      value = _useSavedState2[0],
-      setValue = _useSavedState2[1],
-      rollbackValue = _useSavedState2[2],
-      lastValidValue = _useSavedState2[3];
-
+      // 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 ? 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 === TimeFormat.H12 ? chosenTimePeriod !== null && chosenTimePeriod !== void 0 ? chosenTimePeriod : (v === null || v === void 0 ? void 0 : v.hours) == null || v.hours < 12 ? PeriodPickerOptions.AM : PeriodPickerOptions.PM : null
+      } : null;
+    }),
+    _useSavedState2 = _slicedToArray(_useSavedState, 4),
+    value = _useSavedState2[0],
+    setValue = _useSavedState2[1],
+    rollbackValue = _useSavedState2[2],
+    lastValidValue = _useSavedState2[3];
   var _useControlled = useControlled(statusMessage, "Required"),
-      _useControlled2 = _slicedToArray(_useControlled, 1),
-      validationMessage = _useControlled2[0];
-
+    _useControlled2 = _slicedToArray(_useControlled, 1),
+    validationMessage = _useControlled2[0];
   var _useControlled3 = useControlled(status, "standBy"),
-      _useControlled4 = _slicedToArray(_useControlled3, 2),
-      validationState = _useControlled4[0],
-      setValidationState = _useControlled4[1];
-
+    _useControlled4 = _slicedToArray(_useControlled3, 2),
+    validationState = _useControlled4[0],
+    setValidationState = _useControlled4[1];
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setOpen = _useState2[1]; // #endregion
-  // #region SIDE EFFECTS
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setOpen = _useState2[1];
+  // #endregion
 
+  // #region SIDE EFFECTS
   var firstRender = useRef(true);
   var currentValue = useRef(value);
   useEffect(function () {
@@ -163,15 +151,13 @@ var HvTimePicker = function HvTimePicker(_ref) {
     if (!firstRender.current && currentValue.current != null) {
       var to12 = timeFormat === TimeFormat.H12;
       var _currentValue$current = currentValue.current,
-          h = _currentValue$current.hours,
-          p = _currentValue$current.period;
-
+        h = _currentValue$current.hours,
+        p = _currentValue$current.period;
       if (to12) {
         if (h == null || h < 12) {
           p = PeriodPickerOptions.AM;
         } else {
           p = PeriodPickerOptions.PM;
-
           if (h > 12) {
             h -= 12;
           }
@@ -184,10 +170,8 @@ var HvTimePicker = function HvTimePicker(_ref) {
         } else if (h < 12) {
           h += 12;
         }
-
         p = undefined;
       }
-
       setValue({
         hours: h,
         minutes: currentValue.current.minutes,
@@ -224,85 +208,76 @@ var HvTimePicker = function HvTimePicker(_ref) {
         if (required && lastValidValue == null) {
           return "invalid";
         }
-
         return "valid";
       });
     }
   });
   useEffect(function () {
     firstRender.current = false;
-  }, []); // #endregion
-  // #region EVENT HANDLERS
+  }, []);
+  // #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
+      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(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.
@@ -312,23 +287,22 @@ var HvTimePicker = function HvTimePicker(_ref) {
     if (evt === null) return;
     onToggleCallback === null || onToggleCallback === void 0 ? void 0 : onToggleCallback(evt, open);
     setOpen(open);
-  }; // #endregion
-
+  };
+  // #endregion
 
   var hasLabels = label != null;
-  var hasDescription = description != null; // the error message area will only be created if:
+  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 ? setId(elementId, "error") : ariaErrorMessage;
   }
-
   return /*#__PURE__*/_jsxs(HvFormElement, _objectSpread(_objectSpread({
     id: id,
     name: name,
@@ -428,7 +402,6 @@ var HvTimePicker = function HvTimePicker(_ref) {
     })]
   }));
 };
-
 process.env.NODE_ENV !== "production" ? HvTimePicker.propTypes = {
   /**
    * A Jss Object used to override or extend the styles applied to the input/popper
@@ -438,93 +411,76 @@ process.env.NODE_ENV !== "production" ? HvTimePicker.propTypes = {
      * Styles applied to the root element.
      */
     root: PropTypes.string,
-
     /**
      * Styles applied to the input.
      */
     input: PropTypes.string,
-
     /**
      * Styles applied to the label.
      */
     label: PropTypes.string,
-
     /**
      * Styles applied to the timePopperContainer.
      */
     timePopperContainer: PropTypes.string,
-
     /**
      * Styles applied to the separator.
      */
     separator: PropTypes.string,
-
     /**
      * Styles applied to the period container.
      */
     periodContainer: PropTypes.string,
-
     /**
      * Styles applied to the form element.
      */
     formElementRoot: PropTypes.string,
-
     /**
      * Styles applied to the dropdown placeholder.
      */
     dropdownPlaceholder: PropTypes.string,
-
     /**
      * Styles applied to the icon base.
      */
     iconBaseRoot: PropTypes.string,
-
     /**
      * Styles applied to the error area.
      */
     error: PropTypes.string,
-
     /**
      * Styles applied to the container of the labels elements.
      */
     labelContainer: PropTypes.string,
-
     /**
      * Styles applied to the icon information text.
      */
     description: PropTypes.string,
-
     /**
      * Styles applied to the dropdown when invalid information text.
      */
     dropdownHeaderInvalid: PropTypes.string,
-
     /**
      * Styles applied to the dropdown text when invalid.
      */
-    dropdownPlaceholderDisabled: PropTypes.string,
 
+    dropdownPlaceholderDisabled: PropTypes.string,
     /**
      * Styles applied to the dropdown border when invalid.
      */
     dropdownHeaderOpen: PropTypes.string
   }).isRequired,
-
   /**
    * Class names to be applied.
    */
   className: PropTypes.string,
-
   /**
    * Id to be applied to the form element root node.
    */
   id: PropTypes.string,
-
   /**
    * The form element name.
    */
   name: PropTypes.string,
-
   /**
    * The value of the form element.
    */
@@ -534,7 +490,6 @@ process.env.NODE_ENV !== "production" ? HvTimePicker.propTypes = {
     seconds: PropTypes.number,
     period: PropTypes.string
   }),
-
   /**
    * When uncontrolled, defines the initial input value.
    */
@@ -544,22 +499,18 @@ process.env.NODE_ENV !== "production" ? HvTimePicker.propTypes = {
     seconds: PropTypes.number,
     period: PropTypes.string
   }),
-
   /**
    * Indicates that user input is required on the form element.
    */
   required: PropTypes.bool,
-
   /**
    * Indicates that the form element is disabled.
    */
   disabled: PropTypes.bool,
-
   /**
    * Indicates that the form element is in read only mode.
    */
   readOnly: PropTypes.bool,
-
   /**
    * The label of the form element.
    *
@@ -567,47 +518,38 @@ process.env.NODE_ENV !== "production" ? HvTimePicker.propTypes = {
    * If not provided, an aria-label or aria-labelledby must be provided instead.
    */
   label: PropTypes.string,
-
   /**
    * @ignore
    */
   "aria-label": PropTypes.string,
-
   /**
    * @ignore
    */
   "aria-labelledby": PropTypes.string,
-
   /**
    * Provide additional descriptive text for the form element.
    */
   description: PropTypes.node,
-
   /**
    * @ignore
    */
   "aria-describedby": PropTypes.string,
-
   /**
    * The placeholder value when no time is selected.
    */
   placeholder: PropTypes.string,
-
   /**
    * The placeholder of the hours input.
    */
   hoursPlaceholder: PropTypes.string,
-
   /**
    * The placeholder of the minutes input.
    */
   minutesPlaceholder: PropTypes.string,
-
   /**
    * The placeholder of the seconds input.
    */
   secondsPlaceholder: PropTypes.string,
-
   /**
    * The status of the form element.
    *
@@ -617,34 +559,29 @@ process.env.NODE_ENV !== "production" ? HvTimePicker.propTypes = {
    * or "invalid" after any change to the state.
    */
   status: PropTypes.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.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.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, 12, 24, undefined]),
-
   /**
    * Locale that will provide the time format(12 or 24 hour format)
    * It is "overwritten" by the timeFormat prop
    */
   locale: PropTypes.string,
-
   /**
    * Callback function to be triggered when the input value is changed.
    * It is invoked with a object param with the following props:
@@ -656,7 +593,6 @@ process.env.NODE_ENV !== "production" ? HvTimePicker.propTypes = {
    * It is always invoked with the hours in a 24h format
    */
   onChange: PropTypes.func,
-
   /**
    * Callback called when dropdown changes the expanded state.
    *
@@ -664,47 +600,39 @@ process.env.NODE_ENV !== "production" ? HvTimePicker.propTypes = {
    * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).
    */
   onToggle: PropTypes.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.bool,
-
   /**
    * Default value for the hours picker
    * @deprecated use defaultValue instead
    */
   hours: PropTypes.number,
-
   /**
    * Default value for the minutes picker
    * @deprecated use defaultValue instead
    */
   minutes: PropTypes.number,
-
   /**
    * Default value for the seconds picker
    * @deprecated use defaultValue instead
    */
   seconds: PropTypes.number,
-
   /**
    * Default value for the period picker
    * @deprecated use defaultValue instead
    */
   period: PropTypes.string,
-
   /**
    * Disable the portal behavior. The children stay within it's parent DOM hierarchy.
    */
   disablePortal: PropTypes.bool,
-
   /**
    * Sets if the calendar container should follow the date picker input out of the screen or stay visible.
    */
   escapeWithReference: PropTypes.bool,
-
   /**
    * Extra properties to be passed to the timepicker dropdown.
    */