@hitachivantara/uikit-react-core 3.52.5

package/dist/DatePicker/DatePicker.js

@@ -0,0 +1,682 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/es.object.to-string.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");
+
+require("core-js/modules/es.object.get-own-property-descriptor.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+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 _core = require("@material-ui/core");
+
+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 _styles = _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 _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"];
+
+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; }
+
+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,
+      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];
+
+  var _useControlled3 = (0, _.useControlled)(statusMessage, "Required"),
+      _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];
+
+  var _useSavedState = (0, _utils.useSavedState)(rangeMode ? startValue : value),
+      _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];
+
+  var _useVisibleDate = (0, _useVisibleDate3.default)(startDate, endDate),
+      _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
+  }, [value, startValue, endValue, rangeMode]);
+  var endDateIsSet = (0, _react.useRef)(false);
+  endDateIsSet.current = endDate != null;
+  (0, _react.useEffect)(function () {
+    if (startDate != null) {
+      dispatchAction({
+        type: _enums.NAV_OPTIONS.MONTH_YEAR,
+        target: endDateIsSet.current ? "left" : "best",
+        year: startDate.getFullYear(),
+        month: startDate.getMonth() + 1
+      });
+    }
+  }, [dispatchAction, startDate]);
+  (0, _react.useEffect)(function () {
+    if (endDate != null) {
+      dispatchAction({
+        type: _enums.NAV_OPTIONS.MONTH_YEAR,
+        target: "right",
+        year: endDate.getFullYear(),
+        month: endDate.getMonth() + 1
+      });
+    }
+  }, [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);
+    onChange === null || onChange === void 0 ? void 0 : onChange(startDate, endDate);
+    setValidationState(function () {
+      // this will only run if status is uncontrolled
+      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.
+     instead it was triggered by the baseDropdown useEffect after
+     the datepicker changed the expanded value this baseDropdown behavior needs a review
+    */
+    if (evt === null) return;
+    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);
+        setEndDate(null);
+      } else {
+        setEndDate(newDate);
+      }
+    } else {
+      setStartDate(newDate, autoSave);
+    }
+
+    if (autoSave) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(newDate);
+      setValidationState(function () {
+        // this will only run if status is uncontrolled
+        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") {
+      if (!startDate) {
+        setStartDate(newDate > endDate ? endDate : newDate);
+        return;
+      }
+
+      setEndDate(newDate < startDate ? startDate : newDate);
+    }
+  };
+  /**
+   * Renders the container for the action elements.
+   */
+
+
+  var renderActions = function renderActions() {
+    return /*#__PURE__*/_react.default.createElement(_.HvActionBar, {
+      className: (0, _clsx.default)(showClear && classes.actionContainer)
+    }, showClear && /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.leftContainer
+    }, /*#__PURE__*/_react.default.createElement(_.HvButton, {
+      id: (0, _utils.setId)(id, "action", "clear"),
+      className: classes.action,
+      category: "ghost",
+      onClick: handleClear
+    }, labels.clearLabel)), /*#__PURE__*/_react.default.createElement("div", {
+      className: classes.rightContainer
+    }, /*#__PURE__*/_react.default.createElement(_.HvButton, {
+      id: (0, _utils.setId)(id, "action", "apply"),
+      className: classes.action,
+      category: "ghost",
+      onClick: handleApply
+    }, labels.applyLabel), /*#__PURE__*/_react.default.createElement(_.HvButton, {
+      id: (0, _utils.setId)(id, "action", "cancel"),
+      className: classes.action,
+      category: "ghost",
+      onClick: handleCancel
+    }, labels.cancelLabel)));
+  };
+
+  var renderInput = function renderInput(dateString) {
+    return /*#__PURE__*/_react.default.createElement(_.HvTypography, {
+      variant: dateString ? "normalText" : "placeholderText"
+    }, (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:
+  // - 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__*/_react.default.createElement(_.HvFormElement, (0, _extends2.default)({
+    id: id,
+    name: name,
+    value: dateValue,
+    status: validationState,
+    disabled: disabled,
+    required: required,
+    className: (0, _clsx.default)(className, classes.root),
+    locale: locale
+  }, others), (hasLabel || hasDescription) && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.labelContainer
+  }, hasLabel && /*#__PURE__*/_react.default.createElement(_.HvLabel, {
+    id: (0, _utils.setId)(elementId, "label"),
+    label: label,
+    className: classes.label
+  }), hasDescription && /*#__PURE__*/_react.default.createElement(_.HvInfoMessage, {
+    id: (0, _utils.setId)(elementId, "description"),
+    className: classes.description
+  }, description)), /*#__PURE__*/_react.default.createElement(_.HvBaseDropdown, (0, _extends2.default)({
+    role: "combobox",
+    classes: {
+      root: classes.dropdown,
+      panel: classes.panel,
+      header: isStateInvalid ? classes.dropdownHeaderInvalid : undefined,
+      headerOpen: classes.dropdownHeaderOpen
+    },
+    disabled: disabled,
+    disablePortal: disablePortal,
+    variableWidth: true,
+    placement: horizontalPlacement,
+    expanded: calendarOpen,
+    onToggle: handleToggle,
+    onClickOutside: handleCalendarClose,
+    onContainerCreation: focusOnContainer,
+    placeholder: renderInput((0, _utils3.getDateLabel)(dateValue, rangeMode, locale)),
+    adornment: /*#__PURE__*/_react.default.createElement(_uikitReactIcons.Calendar, {
+      className: classes.icon,
+      color: disabled ? "atmo5" : undefined
+    }),
+    popperProps: {
+      modifiers: [{
+        name: "preventOverflow",
+        enabled: escapeWithReference
+      }]
+    },
+    "aria-haspopup": "dialog",
+    "aria-label": ariaLabel,
+    "aria-labelledby": [label && (0, _utils.setId)(elementId, "label"), ariaLabelledBy].join(" ").trim() || undefined,
+    "aria-invalid": isStateInvalid ? true : undefined,
+    "aria-errormessage": errorMessageId,
+    "aria-describedby": [description && (0, _utils.setId)(elementId, "description"), ariaDescribedBy].join(" ").trim() || undefined
+  }, dropdownProps), /*#__PURE__*/_react.default.createElement("div", {
+    ref: focusTarget,
+    tabIndex: -1
+  }), /*#__PURE__*/_react.default.createElement(_.HvCalendar, (0, _extends2.default)({
+    id: (0, _utils.setId)(id, "calendar"),
+    startAdornment: startAdornment,
+    onChange: handleDateChange,
+    onInputChange: handleInputDateChange,
+    onVisibleDateChange: function onVisibleDateChange(_event, type, month, target) {
+      dispatchAction({
+        type: type,
+        target: target,
+        month: month
+      });
+    },
+    locale: locale
+  }, visibleDate)), (rangeMode || showActions) && renderActions()), canShowError && /*#__PURE__*/_react.default.createElement(_.HvWarningText, {
+    id: (0, _utils.setId)(elementId, "error"),
+    disableBorder: true,
+    className: classes.error
+  }, validationMessage));
+};
+
+HvDatePicker.propTypes = {
+  /**
+   * Class names to be applied.
+   */
+  className: _propTypes.default.string,
+
+  /**
+   * A Jss Object used to override or extend the component styles applied.
+   */
+  classes: _propTypes.default.shape({
+    /**
+     * 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.
+     */
+    dropdown: _propTypes.default.string,
+    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.
+   *
+   * The form element must be labeled for accessibility reasons.
+   * If not provided, an aria-label or aria-labelledby must be provided instead.
+   */
+  label: _propTypes.default.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.
+   *
+   * Valid is correct, invalid is incorrect and standBy means no validations have run.
+   *
+   * When uncontrolled and unspecified it will default to "standBy" and change to either "valid"
+   * or "invalid" after any change to the state.
+   */
+  status: _propTypes.default.oneOf(["standBy", "valid", "invalid"]),
+
+  /**
+   * The error message to show when the validation status is "invalid".
+   *
+   * Defaults to "Required" when the status is uncontrolled and no `aria-errormessage` is provided.
+   */
+  statusMessage: _propTypes.default.node,
+
+  /**
+   * Identifies the element that provides an error message for the 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.
+   */
+  labels: _propTypes.default.shape({
+    /**
+     * 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)
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvDatePicker",
+  index: 1
+})(HvDatePicker);
+
+exports.default = _default;
+//# sourceMappingURL=DatePicker.js.map