@hitachivantara/uikit-react-core 4.0.2 → 4.0.4

package/dist/legacy/DatePicker/DatePicker.js

@@ -2,11 +2,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", "label", "aria-label", "aria-labelledby", "description", "aria-describedby", "onChange", "onCancel", "onClear", "status", "statusMessage", "aria-errormessage", "placeholder", "labels", "value", "startValue", "endValue", "rangeMode", "startAdornment", "horizontalPlacement", "locale", "showActions", "showClear", "disablePortal", "escapeWithReference", "dropdownProps", "readOnly"];
-
 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";
@@ -39,95 +36,87 @@ var DEFAULT_LABELS = {
   cancelLabel: "Cancel",
   clearLabel: "Clear"
 };
+
 /**
  * A date picker, popup calendar or date range picker is a graphical user
  * interface widget which allows the user to select a date from a calendar.
  */
-
 var HvDatePicker = function HvDatePicker(props) {
   var classes = props.classes,
-      className = props.className,
-      id = props.id,
-      name = props.name,
-      _props$required = props.required,
-      required = _props$required === void 0 ? false : _props$required,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      label = props.label,
-      ariaLabel = props["aria-label"],
-      ariaLabelledBy = props["aria-labelledby"],
-      description = props.description,
-      ariaDescribedBy = props["aria-describedby"],
-      onChange = props.onChange,
-      onCancel = props.onCancel,
-      onClear = props.onClear,
-      status = props.status,
-      statusMessage = props.statusMessage,
-      ariaErrorMessage = props["aria-errormessage"],
-      placeholder = props.placeholder,
-      labelsProp = props.labels,
-      value = props.value,
-      startValue = props.startValue,
-      endValue = props.endValue,
-      _props$rangeMode = props.rangeMode,
-      rangeMode = _props$rangeMode === void 0 ? false : _props$rangeMode,
-      startAdornment = props.startAdornment,
-      _props$horizontalPlac = props.horizontalPlacement,
-      horizontalPlacement = _props$horizontalPlac === void 0 ? "right" : _props$horizontalPlac,
-      localeProp = props.locale,
-      _props$showActions = props.showActions,
-      showActions = _props$showActions === void 0 ? false : _props$showActions,
-      _props$showClear = props.showClear,
-      showClear = _props$showClear === void 0 ? false : _props$showClear,
-      _props$disablePortal = props.disablePortal,
-      disablePortal = _props$disablePortal === void 0 ? true : _props$disablePortal,
-      _props$escapeWithRefe = props.escapeWithReference,
-      escapeWithReference = _props$escapeWithRefe === void 0 ? true : _props$escapeWithRefe,
-      dropdownProps = props.dropdownProps,
-      readOnly = props.readOnly,
-      others = _objectWithoutProperties(props, _excluded);
-
+    className = props.className,
+    id = props.id,
+    name = props.name,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    label = props.label,
+    ariaLabel = props["aria-label"],
+    ariaLabelledBy = props["aria-labelledby"],
+    description = props.description,
+    ariaDescribedBy = props["aria-describedby"],
+    onChange = props.onChange,
+    onCancel = props.onCancel,
+    onClear = props.onClear,
+    status = props.status,
+    statusMessage = props.statusMessage,
+    ariaErrorMessage = props["aria-errormessage"],
+    placeholder = props.placeholder,
+    labelsProp = props.labels,
+    value = props.value,
+    startValue = props.startValue,
+    endValue = props.endValue,
+    _props$rangeMode = props.rangeMode,
+    rangeMode = _props$rangeMode === void 0 ? false : _props$rangeMode,
+    startAdornment = props.startAdornment,
+    _props$horizontalPlac = props.horizontalPlacement,
+    horizontalPlacement = _props$horizontalPlac === void 0 ? "right" : _props$horizontalPlac,
+    localeProp = props.locale,
+    _props$showActions = props.showActions,
+    showActions = _props$showActions === void 0 ? false : _props$showActions,
+    _props$showClear = props.showClear,
+    showClear = _props$showClear === void 0 ? false : _props$showClear,
+    _props$disablePortal = props.disablePortal,
+    disablePortal = _props$disablePortal === void 0 ? true : _props$disablePortal,
+    _props$escapeWithRefe = props.escapeWithReference,
+    escapeWithReference = _props$escapeWithRefe === void 0 ? true : _props$escapeWithRefe,
+    dropdownProps = props.dropdownProps,
+    readOnly = props.readOnly,
+    others = _objectWithoutProperties(props, _excluded);
   var labels = useLabels(DEFAULT_LABELS, labelsProp);
   var elementId = useUniqueId(id, "hvdatepicker");
-
   var _useControlled = useControlled(status, "standBy"),
-      _useControlled2 = _slicedToArray(_useControlled, 2),
-      validationState = _useControlled2[0],
-      setValidationState = _useControlled2[1];
-
+    _useControlled2 = _slicedToArray(_useControlled, 2),
+    validationState = _useControlled2[0],
+    setValidationState = _useControlled2[1];
   var _useControlled3 = useControlled(statusMessage, "Required"),
-      _useControlled4 = _slicedToArray(_useControlled3, 1),
-      validationMessage = _useControlled4[0];
-
+    _useControlled4 = _slicedToArray(_useControlled3, 1),
+    validationMessage = _useControlled4[0];
   var localeFromProvider = useLocale();
   var locale = localeProp || localeFromProvider;
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      calendarOpen = _useState2[0],
-      setCalendarOpen = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    calendarOpen = _useState2[0],
+    setCalendarOpen = _useState2[1];
   var _useSavedState = useSavedState(rangeMode ? startValue : value),
-      _useSavedState2 = _slicedToArray(_useSavedState, 3),
-      startDate = _useSavedState2[0],
-      setStartDate = _useSavedState2[1],
-      rollbackStartDate = _useSavedState2[2];
-
+    _useSavedState2 = _slicedToArray(_useSavedState, 3),
+    startDate = _useSavedState2[0],
+    setStartDate = _useSavedState2[1],
+    rollbackStartDate = _useSavedState2[2];
   var _useSavedState3 = useSavedState(endValue),
-      _useSavedState4 = _slicedToArray(_useSavedState3, 3),
-      endDate = _useSavedState4[0],
-      setEndDate = _useSavedState4[1],
-      rollbackEndDate = _useSavedState4[2];
-
+    _useSavedState4 = _slicedToArray(_useSavedState3, 3),
+    endDate = _useSavedState4[0],
+    setEndDate = _useSavedState4[1],
+    rollbackEndDate = _useSavedState4[2];
   var _useVisibleDate = useVisibleDate(startDate, endDate),
-      _useVisibleDate2 = _slicedToArray(_useVisibleDate, 2),
-      visibleDate = _useVisibleDate2[0],
-      dispatchAction = _useVisibleDate2[1];
-
+    _useVisibleDate2 = _slicedToArray(_useVisibleDate, 2),
+    visibleDate = _useVisibleDate2[0],
+    dispatchAction = _useVisibleDate2[1];
   var focusTarget = useRef();
   useEffect(function () {
     setStartDate(rangeMode ? startValue : value, true);
-    setEndDate(endValue, true); // eslint-disable-next-line react-hooks/exhaustive-deps
+    setEndDate(endValue, true);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value, startValue, endValue, rangeMode]);
   var endDateIsSet = useRef(false);
   endDateIsSet.current = endDate != null;
@@ -151,10 +140,10 @@ var HvDatePicker = function HvDatePicker(props) {
       });
     }
   }, [dispatchAction, endDate]);
+
   /**
    * Handles the `Apply` action. Both single and ranged modes are handled here.
    */
-
   var handleApply = function handleApply() {
     setStartDate(startDate, true);
     setEndDate(endDate !== null && endDate !== void 0 ? endDate : startDate, true);
@@ -164,43 +153,37 @@ var HvDatePicker = function HvDatePicker(props) {
       if (required && (!isDate(startDate) || rangeMode && !isDate(endDate))) {
         return "invalid";
       }
-
       return "valid";
     });
     setCalendarOpen(false);
   };
+
   /**
    * Handles the `Cancel` action. Both single and ranged modes are handled here.
    */
-
-
   var handleCancel = function handleCancel() {
     rollbackStartDate();
     rollbackEndDate();
     onCancel === null || onCancel === void 0 ? void 0 : onCancel();
     setCalendarOpen(false);
   };
+
   /**
    * Handles the `Cancel` action. Both single and ranged modes are handled here.
    */
-
-
   var handleClear = function handleClear() {
     setStartDate(undefined, false);
     setEndDate(undefined, false);
     onClear === null || onClear === void 0 ? void 0 : onClear();
   };
-
   var handleCalendarClose = function handleCalendarClose() {
     var shouldSave = !(rangeMode || showActions);
-
     if (shouldSave) {
       handleApply();
     } else {
       handleCancel();
     }
   };
-
   var handleToggle = function handleToggle(evt, open) {
     /* 
      If evt is null this toggle wasn't triggered by the user.
@@ -211,17 +194,13 @@ var HvDatePicker = function HvDatePicker(props) {
     setCalendarOpen(open);
     if (!open) handleCalendarClose();
   };
-
   var focusOnContainer = function focusOnContainer() {
     var _focusTarget$current;
-
     (_focusTarget$current = focusTarget.current) === null || _focusTarget$current === void 0 ? void 0 : _focusTarget$current.focus();
   };
-
   var handleDateChange = function handleDateChange(event, newDate) {
     if (!isDate(newDate)) return;
     var autoSave = !showActions && !rangeMode;
-
     if (rangeMode) {
       if (!startDate || startDate && endDate || newDate < startDate) {
         setStartDate(newDate);
@@ -232,7 +211,6 @@ var HvDatePicker = function HvDatePicker(props) {
     } else {
       setStartDate(newDate, autoSave);
     }
-
     if (autoSave) {
       onChange === null || onChange === void 0 ? void 0 : onChange(newDate);
       setValidationState(function () {
@@ -240,21 +218,17 @@ var HvDatePicker = function HvDatePicker(props) {
         if (required && !isDate(newDate)) {
           return "invalid";
         }
-
         return "valid";
       });
       setCalendarOpen(false);
     }
   };
-
   var handleInputDateChange = function handleInputDateChange(event, newDate, position) {
     if (!isDate(newDate)) return;
-
     if (!rangeMode) {
       handleDateChange(event, newDate);
       return;
     }
-
     if (position === "left") {
       setStartDate(newDate > endDate ? endDate : newDate);
     } else if (position === "right") {
@@ -262,15 +236,13 @@ var HvDatePicker = function HvDatePicker(props) {
         setStartDate(newDate > endDate ? endDate : newDate);
         return;
       }
-
       setEndDate(newDate < startDate ? startDate : newDate);
     }
   };
+
   /**
    * Renders the container for the action elements.
    */
-
-
   var renderActions = function renderActions() {
     return /*#__PURE__*/_jsxs(HvActionBar, {
       className: clsx(showClear && classes.actionContainer),
@@ -301,32 +273,29 @@ var HvDatePicker = function HvDatePicker(props) {
       })]
     });
   };
-
   var renderInput = function renderInput(dateString) {
     return /*#__PURE__*/_jsx(HvTypography, {
       variant: dateString ? "normalText" : "placeholderText",
       children: (dateString || placeholder) === undefined ? "" : dateString || placeholder
     });
   };
-
   var dateValue = rangeMode ? {
     startDate: startDate,
     endDate: endDate
   } : startDate;
   var hasLabel = 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 = isInvalid(validationState);
   var errorMessageId;
-
   if (isStateInvalid) {
     errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
   }
-
   return /*#__PURE__*/_jsxs(HvFormElement, _objectSpread(_objectSpread({
     id: id,
     name: name,
@@ -409,13 +378,11 @@ var HvDatePicker = function HvDatePicker(props) {
     })]
   }));
 };
-
 process.env.NODE_ENV !== "production" ? HvDatePicker.propTypes = {
   /**
    * Class names to be applied.
    */
   className: PropTypes.string,
-
   /**
    * A Jss Object used to override or extend the component styles applied.
    */
@@ -424,27 +391,22 @@ process.env.NODE_ENV !== "production" ? HvDatePicker.propTypes = {
      * Styles applied to the component root class.
      */
     root: PropTypes.string,
-
     /**
      * Styles applied to the container of the labels elements.
      */
     labelContainer: PropTypes.string,
-
     /**
      * Styles applied to the label element.
      */
     label: PropTypes.string,
-
     /**
      * Styles applied to the icon information text.
      */
     description: PropTypes.string,
-
     /**
      * Styles applied to the error area.
      */
     error: PropTypes.string,
-
     /**
      * Styles applied to the dropdown.
      */
@@ -452,43 +414,35 @@ process.env.NODE_ENV !== "production" ? HvDatePicker.propTypes = {
     panel: PropTypes.string,
     action: PropTypes.string,
     icon: PropTypes.string,
-
     /**
      * Styles applied to the date picker when invalid.
      */
     dropdownHeaderInvalid: PropTypes.string,
-
     /**
      * Styles applied to the date picker when opened.
      */
     dropdownHeaderOpen: PropTypes.string,
-
     /**
      * Styles applied to the container that holds the actions buttons.
      */
     actionContainer: PropTypes.string,
-
     /**
      * Styles applied to the container that holds the clear button.
      */
     leftContainer: PropTypes.string,
-
     /**
      * Styles applied to the container that holds the apply and cancel button.
      */
     rightContainer: PropTypes.string
   }).isRequired,
-
   /**
    * Id to be applied to the form element root node.
    */
   id: PropTypes.string,
-
   /**
    * The form element name.
    */
   name: PropTypes.string,
-
   /**
    * The label of the form element.
    *
@@ -496,42 +450,34 @@ process.env.NODE_ENV !== "production" ? HvDatePicker.propTypes = {
    * If not provided, an aria-label or aria-labelledby must be provided instead.
    */
   label: PropTypes.node,
-
   /**
    * @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 nothing is selected.
    */
   placeholder: PropTypes.string,
-
   /**
    * Indicates that the form element is disabled.
    */
   disabled: PropTypes.bool,
-
   /**
    * Indicates that user input is required on the form element.
    */
   required: PropTypes.bool,
-
   /**
    * The status of the form element.
    *
@@ -541,36 +487,30 @@ process.env.NODE_ENV !== "production" ? HvDatePicker.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 date picker.
    *
    * Will only be used when the validation status is invalid.
    */
   "aria-errormessage": PropTypes.string,
-
   /**
    * The callback fired when the value changes.
    */
   onChange: PropTypes.func,
-
   /**
    * The callback fired when user clicks on cancel.
    */
   onCancel: PropTypes.func,
-
   /**
    * The callback fired when user clicks on clear.
    */
   onClear: PropTypes.func,
-
   /**
    * An object containing all the labels for the datepicker.
    */
@@ -579,80 +519,65 @@ process.env.NODE_ENV !== "production" ? HvDatePicker.propTypes = {
      * Apply button label.
      */
     applyLabel: PropTypes.string,
-
     /**
      * Cancel button label.
      */
     cancelLabel: PropTypes.string,
-
     /**
      * Clear button label.
      */
     clearLabel: PropTypes.string
   }),
-
   /**
    * The initial value of the input when in single calendar mode.
    */
   value: PropTypes.instanceOf(Date),
-
   /**
    * The initial value for the start date when in range mode.
    */
   startValue: PropTypes.instanceOf(Date),
-
   /**
    * The initial value for the end date when in range mode.
    */
   endValue: PropTypes.instanceOf(Date),
-
   /**
    * Flag informing if the the component should be in range mode or in single mode.
    */
   rangeMode: PropTypes.bool,
-
   /**
    * The placement where the calendar should be placed according to the input. Options are `left` or `right`.
    * Note this prop only affects the calendar when in `rangeMode`.
    */
   horizontalPlacement: PropTypes.oneOf(["left", "right"]),
-
   /**
    * The calendar locale. If undefined, it uses calendar default
    */
   locale: PropTypes.string,
-
   /**
    * Controls if actions buttons are visible at the calendar.
    */
   showActions: PropTypes.bool,
-
   /**
    * Controls if clear button is visible at the calendar,
    * only works if showing actions or in range mode.
    */
   showClear: PropTypes.bool,
-
   /**
    * 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,
-
   /**
    * An element placed before the Calendar
    */
   startAdornment: PropTypes.node,
-
   /**
    * An object containing props to be passed onto the baseDropdown.
    */
   dropdownProps: PropTypes.instanceOf(Object),
-
   /**
    * If `true` the DatePicker will be in read only mode, unable to be interacted.
    */