@hitachivantara/uikit-react-core 4.0.3 → 4.0.4

package/dist/DatePicker/DatePicker.js

@@ -1,183 +1,135 @@
 "use strict";
 
 require("core-js/modules/es.object.keys.js");
-
 require("core-js/modules/es.array.filter.js");
-
 require("core-js/modules/es.object.to-string.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.string.trim.js");
-
 require("core-js/modules/es.array.join.js");
-
 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 _styles = require("@mui/styles");
-
 var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-
 var _clsx = _interopRequireDefault(require("clsx"));
-
 var _utils = require("../utils");
-
 var _ = require("..");
-
 var _validationStates = require("../Forms/FormElement/validationStates");
-
 var _styles2 = _interopRequireDefault(require("./styles"));
-
 var _utils2 = require("../Calendar/utils");
-
 var _utils3 = require("./utils");
-
 var _useVisibleDate3 = _interopRequireDefault(require("./useVisibleDate"));
-
 var _useLocale = _interopRequireDefault(require("../Provider/useLocale"));
-
 var _enums = require("../Calendar/enums");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 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 _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); 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) { (0, _defineProperty2.default)(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; }
-
 var DEFAULT_LABELS = {
   applyLabel: "Apply",
   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 = (0, _objectWithoutProperties2.default)(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 = (0, _objectWithoutProperties2.default)(props, _excluded);
   var labels = (0, _utils.useLabels)(DEFAULT_LABELS, labelsProp);
   var elementId = (0, _.useUniqueId)(id, "hvdatepicker");
-
   var _useControlled = (0, _.useControlled)(status, "standBy"),
-      _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
-      validationState = _useControlled2[0],
-      setValidationState = _useControlled2[1];
-
+    _useControlled2 = (0, _slicedToArray2.default)(_useControlled, 2),
+    validationState = _useControlled2[0],
+    setValidationState = _useControlled2[1];
   var _useControlled3 = (0, _.useControlled)(statusMessage, "Required"),
-      _useControlled4 = (0, _slicedToArray2.default)(_useControlled3, 1),
-      validationMessage = _useControlled4[0];
-
+    _useControlled4 = (0, _slicedToArray2.default)(_useControlled3, 1),
+    validationMessage = _useControlled4[0];
   var localeFromProvider = (0, _useLocale.default)();
   var locale = localeProp || localeFromProvider;
-
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      calendarOpen = _useState2[0],
-      setCalendarOpen = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    calendarOpen = _useState2[0],
+    setCalendarOpen = _useState2[1];
   var _useSavedState = (0, _utils.useSavedState)(rangeMode ? startValue : value),
-      _useSavedState2 = (0, _slicedToArray2.default)(_useSavedState, 3),
-      startDate = _useSavedState2[0],
-      setStartDate = _useSavedState2[1],
-      rollbackStartDate = _useSavedState2[2];
-
+    _useSavedState2 = (0, _slicedToArray2.default)(_useSavedState, 3),
+    startDate = _useSavedState2[0],
+    setStartDate = _useSavedState2[1],
+    rollbackStartDate = _useSavedState2[2];
   var _useSavedState3 = (0, _utils.useSavedState)(endValue),
-      _useSavedState4 = (0, _slicedToArray2.default)(_useSavedState3, 3),
-      endDate = _useSavedState4[0],
-      setEndDate = _useSavedState4[1],
-      rollbackEndDate = _useSavedState4[2];
-
+    _useSavedState4 = (0, _slicedToArray2.default)(_useSavedState3, 3),
+    endDate = _useSavedState4[0],
+    setEndDate = _useSavedState4[1],
+    rollbackEndDate = _useSavedState4[2];
   var _useVisibleDate = (0, _useVisibleDate3.default)(startDate, endDate),
-      _useVisibleDate2 = (0, _slicedToArray2.default)(_useVisibleDate, 2),
-      visibleDate = _useVisibleDate2[0],
-      dispatchAction = _useVisibleDate2[1];
-
+    _useVisibleDate2 = (0, _slicedToArray2.default)(_useVisibleDate, 2),
+    visibleDate = _useVisibleDate2[0],
+    dispatchAction = _useVisibleDate2[1];
   var focusTarget = (0, _react.useRef)();
   (0, _react.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 = (0, _react.useRef)(false);
   endDateIsSet.current = endDate != null;
@@ -201,10 +153,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);
@@ -214,43 +166,37 @@ var HvDatePicker = function HvDatePicker(props) {
       if (required && (!(0, _utils2.isDate)(startDate) || rangeMode && !(0, _utils2.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.
@@ -261,17 +207,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 (!(0, _utils2.isDate)(newDate)) return;
     var autoSave = !showActions && !rangeMode;
-
     if (rangeMode) {
       if (!startDate || startDate && endDate || newDate < startDate) {
         setStartDate(newDate);
@@ -282,7 +224,6 @@ var HvDatePicker = function HvDatePicker(props) {
     } else {
       setStartDate(newDate, autoSave);
     }
-
     if (autoSave) {
       onChange === null || onChange === void 0 ? void 0 : onChange(newDate);
       setValidationState(function () {
@@ -290,21 +231,17 @@ var HvDatePicker = function HvDatePicker(props) {
         if (required && !(0, _utils2.isDate)(newDate)) {
           return "invalid";
         }
-
         return "valid";
       });
       setCalendarOpen(false);
     }
   };
-
   var handleInputDateChange = function handleInputDateChange(event, newDate, position) {
     if (!(0, _utils2.isDate)(newDate)) return;
-
     if (!rangeMode) {
       handleDateChange(event, newDate);
       return;
     }
-
     if (position === "left") {
       setStartDate(newDate > endDate ? endDate : newDate);
     } else if (position === "right") {
@@ -312,15 +249,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__*/(0, _jsxRuntime.jsxs)(_.HvActionBar, {
       className: (0, _clsx.default)(showClear && classes.actionContainer),
@@ -351,32 +286,29 @@ var HvDatePicker = function HvDatePicker(props) {
       })]
     });
   };
-
   var renderInput = function renderInput(dateString) {
     return /*#__PURE__*/(0, _jsxRuntime.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 = (0, _validationStates.isInvalid)(validationState);
   var errorMessageId;
-
   if (isStateInvalid) {
     errorMessageId = canShowError ? (0, _utils.setId)(elementId, "error") : ariaErrorMessage;
   }
-
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.HvFormElement, _objectSpread(_objectSpread({
     id: id,
     name: name,
@@ -459,13 +391,11 @@ var HvDatePicker = function HvDatePicker(props) {
     })]
   }));
 };
-
 process.env.NODE_ENV !== "production" ? HvDatePicker.propTypes = {
   /**
    * Class names to be applied.
    */
   className: _propTypes.default.string,
-
   /**
    * A Jss Object used to override or extend the component styles applied.
    */
@@ -474,27 +404,22 @@ process.env.NODE_ENV !== "production" ? HvDatePicker.propTypes = {
      * Styles applied to the component root class.
      */
     root: _propTypes.default.string,
-
     /**
      * Styles applied to the container of the labels elements.
      */
     labelContainer: _propTypes.default.string,
-
     /**
      * Styles applied to the label element.
      */
     label: _propTypes.default.string,
-
     /**
      * Styles applied to the icon information text.
      */
     description: _propTypes.default.string,
-
     /**
      * Styles applied to the error area.
      */
     error: _propTypes.default.string,
-
     /**
      * Styles applied to the dropdown.
      */
@@ -502,43 +427,35 @@ process.env.NODE_ENV !== "production" ? HvDatePicker.propTypes = {
     panel: _propTypes.default.string,
     action: _propTypes.default.string,
     icon: _propTypes.default.string,
-
     /**
      * Styles applied to the date picker when invalid.
      */
     dropdownHeaderInvalid: _propTypes.default.string,
-
     /**
      * Styles applied to the date picker when opened.
      */
     dropdownHeaderOpen: _propTypes.default.string,
-
     /**
      * Styles applied to the container that holds the actions buttons.
      */
     actionContainer: _propTypes.default.string,
-
     /**
      * Styles applied to the container that holds the clear button.
      */
     leftContainer: _propTypes.default.string,
-
     /**
      * Styles applied to the container that holds the apply and cancel button.
      */
     rightContainer: _propTypes.default.string
   }).isRequired,
-
   /**
    * Id to be applied to the form element root node.
    */
   id: _propTypes.default.string,
-
   /**
    * The form element name.
    */
   name: _propTypes.default.string,
-
   /**
    * The label of the form element.
    *
@@ -546,42 +463,34 @@ process.env.NODE_ENV !== "production" ? HvDatePicker.propTypes = {
    * If not provided, an aria-label or aria-labelledby must be provided instead.
    */
   label: _propTypes.default.node,
-
   /**
    * @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 nothing is selected.
    */
   placeholder: _propTypes.default.string,
-
   /**
    * Indicates that the form element is disabled.
    */
   disabled: _propTypes.default.bool,
-
   /**
    * Indicates that user input is required on the form element.
    */
   required: _propTypes.default.bool,
-
   /**
    * The status of the form element.
    *
@@ -591,36 +500,30 @@ process.env.NODE_ENV !== "production" ? HvDatePicker.propTypes = {
    * 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 date picker.
    *
    * Will only be used when the validation status is invalid.
    */
   "aria-errormessage": _propTypes.default.string,
-
   /**
    * The callback fired when the value changes.
    */
   onChange: _propTypes.default.func,
-
   /**
    * The callback fired when user clicks on cancel.
    */
   onCancel: _propTypes.default.func,
-
   /**
    * The callback fired when user clicks on clear.
    */
   onClear: _propTypes.default.func,
-
   /**
    * An object containing all the labels for the datepicker.
    */
@@ -629,90 +532,73 @@ process.env.NODE_ENV !== "production" ? HvDatePicker.propTypes = {
      * Apply button label.
      */
     applyLabel: _propTypes.default.string,
-
     /**
      * Cancel button label.
      */
     cancelLabel: _propTypes.default.string,
-
     /**
      * Clear button label.
      */
     clearLabel: _propTypes.default.string
   }),
-
   /**
    * The initial value of the input when in single calendar mode.
    */
   value: _propTypes.default.instanceOf(Date),
-
   /**
    * The initial value for the start date when in range mode.
    */
   startValue: _propTypes.default.instanceOf(Date),
-
   /**
    * The initial value for the end date when in range mode.
    */
   endValue: _propTypes.default.instanceOf(Date),
-
   /**
    * Flag informing if the the component should be in range mode or in single mode.
    */
   rangeMode: _propTypes.default.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.default.oneOf(["left", "right"]),
-
   /**
    * The calendar locale. If undefined, it uses calendar default
    */
   locale: _propTypes.default.string,
-
   /**
    * Controls if actions buttons are visible at the calendar.
    */
   showActions: _propTypes.default.bool,
-
   /**
    * Controls if clear button is visible at the calendar,
    * only works if showing actions or in range mode.
    */
   showClear: _propTypes.default.bool,
-
   /**
    * 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,
-
   /**
    * An element placed before the Calendar
    */
   startAdornment: _propTypes.default.node,
-
   /**
    * An object containing props to be passed onto the baseDropdown.
    */
   dropdownProps: _propTypes.default.instanceOf(Object),
-
   /**
    * If `true` the DatePicker will be in read only mode, unable to be interacted.
    */
   readOnly: _propTypes.default.bool
 } : void 0;
-
 var _default = (0, _styles.withStyles)(_styles2.default, {
   name: "HvDatePicker",
   index: 1
 })(HvDatePicker);
-
 exports.default = _default;
 //# sourceMappingURL=DatePicker.js.map