@hitachivantara/uikit-react-core 3.52.5

package/dist/Calendar/Calendar.js

@@ -0,0 +1,218 @@
+"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;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+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 _utils = require("../utils");
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _FormElement = require("../Forms/FormElement");
+
+var _utils2 = require("./utils");
+
+var _SingleCalendar = _interopRequireDefault(require("./SingleCalendar"));
+
+var _excluded = ["classes", "id", "locale", "value", "visibleMonth", "visibleYear", "rightVisibleMonth", "rightVisibleYear", "minimumDate", "maximumDate", "startAdornment", "onChange", "onInputChange", "onVisibleDateChange"];
+
+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 HvCalendar = function HvCalendar(_ref) {
+  var classes = _ref.classes,
+      id = _ref.id,
+      locale = _ref.locale,
+      value = _ref.value,
+      visibleMonth = _ref.visibleMonth,
+      visibleYear = _ref.visibleYear,
+      rightVisibleMonth = _ref.rightVisibleMonth,
+      rightVisibleYear = _ref.rightVisibleYear,
+      minimumDate = _ref.minimumDate,
+      maximumDate = _ref.maximumDate,
+      startAdornment = _ref.startAdornment,
+      onChange = _ref.onChange,
+      _onInputChange = _ref.onInputChange,
+      _onVisibleDateChange = _ref.onVisibleDateChange,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useContext = (0, _react.useContext)(_FormElement.HvFormElementContext),
+      elementId = _useContext.elementId;
+
+  var elementValue = (0, _react.useContext)(_FormElement.HvFormElementValueContext);
+  var localValue = value !== null && value !== void 0 ? value : elementValue;
+  var localId = id !== null && id !== void 0 ? id : (0, _utils.setId)(elementId, "single-calendar");
+  var rangeMode = (0, _utils2.isRange)(localValue);
+  var rightCalendarId = (0, _utils.setId)(localId, "single-calendar-right");
+  var clampedMonth = visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;
+
+  var singleCalendar = /*#__PURE__*/_react.default.createElement(_SingleCalendar.default, (0, _extends2.default)({
+    id: localId,
+    locale: locale,
+    value: localValue,
+    visibleMonth: clampedMonth,
+    visibleYear: visibleYear,
+    minimumDate: minimumDate,
+    maximumDate: maximumDate,
+    onChange: onChange,
+    onInputChange: function onInputChange(evt, date) {
+      return _onInputChange(evt, date, "left");
+    },
+    onVisibleDateChange: _onVisibleDateChange
+  }, others));
+
+  var rangeCalendar = /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.rangeCalendarContainer
+  }, /*#__PURE__*/_react.default.createElement(_SingleCalendar.default, (0, _extends2.default)({
+    className: classes.singleCalendar,
+    id: localId,
+    locale: locale,
+    value: localValue,
+    visibleMonth: clampedMonth,
+    visibleYear: visibleYear,
+    minimumDate: minimumDate,
+    maximumDate: maximumDate,
+    onChange: onChange,
+    onInputChange: function onInputChange(evt, date) {
+      return _onInputChange(evt, date, "left");
+    },
+    onVisibleDateChange: function onVisibleDateChange(event, action, index) {
+      return _onVisibleDateChange === null || _onVisibleDateChange === void 0 ? void 0 : _onVisibleDateChange(event, action, index, "left");
+    }
+  }, others)), /*#__PURE__*/_react.default.createElement(_SingleCalendar.default, (0, _extends2.default)({
+    className: classes.singleCalendar,
+    id: rightCalendarId,
+    locale: locale,
+    value: localValue,
+    visibleMonth: rightVisibleMonth,
+    visibleYear: rightVisibleYear,
+    minimumDate: minimumDate,
+    maximumDate: maximumDate,
+    onChange: onChange,
+    onInputChange: function onInputChange(evt, date) {
+      return _onInputChange(evt, date, "right");
+    },
+    onVisibleDateChange: function onVisibleDateChange(event, action, index) {
+      _onVisibleDateChange === null || _onVisibleDateChange === void 0 ? void 0 : _onVisibleDateChange(event, action, index, "right");
+    },
+    showEndDate: true
+  }, others)));
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.root
+  }, startAdornment, rangeMode ? rangeCalendar : singleCalendar);
+};
+
+HvCalendar.propTypes = {
+  /**
+   * Styles applied from the theme.
+   */
+  classes: _propTypes.default.instanceOf(Object).isRequired,
+
+  /**
+   * Identifier.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * The calendar locale. If undefined, it defaults to en-US
+   *
+   */
+  locale: _propTypes.default.string,
+
+  /**
+   * Date that the calendar would show.
+   * if using the object format the calendar enter in range mode showing two calendars
+   */
+  value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.shape({
+    startDate: _propTypes.default.instanceOf(Date),
+    endDate: _propTypes.default.instanceOf(Date)
+  })]),
+
+  /**
+   * Controls the visible month of the Calendar
+   */
+  visibleMonth: _propTypes.default.number,
+
+  /**
+   * Controls the visible year of the Calendar
+   */
+  visibleYear: _propTypes.default.number,
+
+  /**
+   * Controls the visible month of the Calendar on the right side of the datepicker
+   */
+  rightVisibleMonth: _propTypes.default.number,
+
+  /**
+   * Controls the visible year of the Calendar on the right side of the datepicker
+   */
+  rightVisibleYear: _propTypes.default.number,
+
+  /**
+   * Callback function to be triggered when the selected date has changed.
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * Callback function to be triggered when the selected date input has changed.
+   */
+  onInputChange: _propTypes.default.func,
+
+  /**
+   * Callback function to be triggered when the user clicks on the month or year selector.
+   * it receives the action that was pressed:
+   * previous_month, next_month, previous_year, next_year,month
+   */
+  onVisibleDateChange: _propTypes.default.func,
+
+  /**
+   * The maximum selectable date after this all values are disabled.
+   */
+  maximumDate: _propTypes.default.instanceOf(Date),
+
+  /**
+   * The minimum selectable date before this all values are disabled.
+   */
+  minimumDate: _propTypes.default.instanceOf(Date),
+
+  /**
+   * An element placed before the Calendar
+   */
+  startAdornment: _propTypes.default.node
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvCalendar"
+})(HvCalendar);
+
+exports.default = _default;
+//# sourceMappingURL=Calendar.js.map

package/dist/Calendar/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Calendar/Calendar.js"],"names":["HvCalendar","classes","id","locale","value","visibleMonth","visibleYear","rightVisibleMonth","rightVisibleYear","minimumDate","maximumDate","startAdornment","onChange","onInputChange","onVisibleDateChange","others","HvFormElementContext","elementId","elementValue","HvFormElementValueContext","localValue","localId","rangeMode","rightCalendarId","clampedMonth","singleCalendar","evt","date","rangeCalendar","rangeCalendarContainer","event","action","index","root","propTypes","PropTypes","instanceOf","Object","isRequired","string","oneOfType","Date","shape","startDate","endDate","number","func","node","styles","name"],"mappings":"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","sourcesContent":["import React, { useContext } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui/core\";\nimport { setId } from \"../utils\";\nimport styles from \"./styles\";\nimport { HvFormElementContext, HvFormElementValueContext } from \"../Forms/FormElement\";\nimport { isRange } from \"./utils\";\nimport SingleCalendar from \"./SingleCalendar\";\n\nconst HvCalendar = ({\n  classes,\n  id,\n  locale,\n  value,\n  visibleMonth,\n  visibleYear,\n  rightVisibleMonth,\n  rightVisibleYear,\n  minimumDate,\n  maximumDate,\n  startAdornment,\n  onChange,\n  onInputChange,\n  onVisibleDateChange,\n  ...others\n}) => {\n  const { elementId } = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const localValue = value ?? elementValue;\n  const localId = id ?? setId(elementId, \"single-calendar\");\n  const rangeMode = isRange(localValue);\n  const rightCalendarId = setId(localId, \"single-calendar-right\");\n  const clampedMonth = visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;\n\n  const singleCalendar = (\n    <SingleCalendar\n      id={localId}\n      locale={locale}\n      value={localValue}\n      visibleMonth={clampedMonth}\n      visibleYear={visibleYear}\n      minimumDate={minimumDate}\n      maximumDate={maximumDate}\n      onChange={onChange}\n      onInputChange={(evt, date) => onInputChange(evt, date, \"left\")}\n      onVisibleDateChange={onVisibleDateChange}\n      {...others}\n    />\n  );\n\n  const rangeCalendar = (\n    <div className={classes.rangeCalendarContainer}>\n      <SingleCalendar\n        className={classes.singleCalendar}\n        id={localId}\n        locale={locale}\n        value={localValue}\n        visibleMonth={clampedMonth}\n        visibleYear={visibleYear}\n        minimumDate={minimumDate}\n        maximumDate={maximumDate}\n        onChange={onChange}\n        onInputChange={(evt, date) => onInputChange(evt, date, \"left\")}\n        onVisibleDateChange={(event, action, index) =>\n          onVisibleDateChange?.(event, action, index, \"left\")\n        }\n        {...others}\n      />\n\n      <SingleCalendar\n        className={classes.singleCalendar}\n        id={rightCalendarId}\n        locale={locale}\n        value={localValue}\n        visibleMonth={rightVisibleMonth}\n        visibleYear={rightVisibleYear}\n        minimumDate={minimumDate}\n        maximumDate={maximumDate}\n        onChange={onChange}\n        onInputChange={(evt, date) => onInputChange(evt, date, \"right\")}\n        onVisibleDateChange={(event, action, index) => {\n          onVisibleDateChange?.(event, action, index, \"right\");\n        }}\n        showEndDate\n        {...others}\n      />\n    </div>\n  );\n\n  return (\n    <div className={classes.root}>\n      {startAdornment}\n      {rangeMode ? rangeCalendar : singleCalendar}\n    </div>\n  );\n};\n\nHvCalendar.propTypes = {\n  /**\n   * Styles applied from the theme.\n   */\n  classes: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * Identifier.\n   */\n  id: PropTypes.string,\n  /**\n   * The calendar locale. If undefined, it defaults to en-US\n   *\n   */\n  locale: PropTypes.string,\n  /**\n   * Date that the calendar would show.\n   * if using the object format the calendar enter in range mode showing two calendars\n   */\n  value: PropTypes.oneOfType([\n    PropTypes.instanceOf(Date),\n    PropTypes.shape({ startDate: PropTypes.instanceOf(Date), endDate: PropTypes.instanceOf(Date) }),\n  ]),\n  /**\n   * Controls the visible month of the Calendar\n   */\n  visibleMonth: PropTypes.number,\n  /**\n   * Controls the visible year of the Calendar\n   */\n  visibleYear: PropTypes.number,\n  /**\n   * Controls the visible month of the Calendar on the right side of the datepicker\n   */\n  rightVisibleMonth: PropTypes.number,\n  /**\n   * Controls the visible year of the Calendar on the right side of the datepicker\n   */\n  rightVisibleYear: PropTypes.number,\n  /**\n   * Callback function to be triggered when the selected date has changed.\n   */\n  onChange: PropTypes.func,\n  /**\n   * Callback function to be triggered when the selected date input has changed.\n   */\n  onInputChange: PropTypes.func,\n  /**\n   * Callback function to be triggered when the user clicks on the month or year selector.\n   * it receives the action that was pressed:\n   * previous_month, next_month, previous_year, next_year,month\n   */\n  onVisibleDateChange: PropTypes.func,\n\n  /**\n   * The maximum selectable date after this all values are disabled.\n   */\n  maximumDate: PropTypes.instanceOf(Date),\n  /**\n   * The minimum selectable date before this all values are disabled.\n   */\n  minimumDate: PropTypes.instanceOf(Date),\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment: PropTypes.node,\n};\n\nexport default withStyles(styles, { name: \"HvCalendar\" })(HvCalendar);\n"],"file":"Calendar.js"}

package/dist/Calendar/CalendarHeader/CalendarHeader.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { StandardProps } from "@material-ui/core";
+
+export interface DateRangeProp {
+  startDate?: Date;
+  endDate: Date;
+}
+
+export type HvHeaderClassKey =
+  | "rangeLabel"
+  | "background"
+  | "headerDayOfWeek"
+  | "headerDate"
+  | "invalid"
+  | "input";
+
+export interface HvHeaderCalendarProps
+  extends StandardProps<React.HTMLAttributes<HTMLElement>, HvHeaderClassKey, "onChange" | "onBlur" | "onFocus"> {
+  /**
+   * Locale to be used by the calendar header.
+   */
+  locale?: string;
+  /**
+   * Date that the calendar header would show.
+   */
+  value?: string | Date | DateRangeProp;
+  /**
+   * Callback function to be triggered when the selected date has changed.
+   */
+  onChange?: ( 
+    event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement> | undefined,
+    value: string | Date | DateRangeProp
+    ) => void;
+  /**
+   * Indicates if header should display end date in a date range.
+   */
+  showEndDate?: boolean;
+}
+
+export default function HvHeaderCalendar(props: HvHeaderCalendarProps): JSX.Element | null;

package/dist/Calendar/CalendarHeader/CalendarHeader.js

@@ -0,0 +1,284 @@
+"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;
+
+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 _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+
+var _dayjs = _interopRequireDefault(require("dayjs"));
+
+var _localeData = _interopRequireDefault(require("dayjs/plugin/localeData"));
+
+var _localizedFormat = _interopRequireDefault(require("dayjs/plugin/localizedFormat"));
+
+var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _isNil = _interopRequireDefault(require("lodash/isNil"));
+
+var _core = require("@material-ui/core");
+
+var _utils = require("../../utils");
+
+var _Typography = _interopRequireDefault(require("../../Typography"));
+
+var _styles = _interopRequireDefault(require("./styles"));
+
+var _FormElement = require("../../Forms/FormElement");
+
+var _utils2 = require("../utils");
+
+var _excluded = ["id", "value", "locale", "classes", "onChange", "showEndDate", "onFocus"];
+
+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; }
+
+_dayjs.default.extend(_localeData.default);
+
+_dayjs.default.extend(_localizedFormat.default);
+
+_dayjs.default.extend(_customParseFormat.default);
+
+var Enter = _utils.KeyboardCodes.Enter;
+
+var HvCalendarHeader = function HvCalendarHeader(_ref) {
+  var _ref2, _label$;
+
+  var id = _ref.id,
+      value = _ref.value,
+      locale = _ref.locale,
+      classes = _ref.classes,
+      onChange = _ref.onChange,
+      showEndDate = _ref.showEndDate,
+      onFocus = _ref.onFocus,
+      others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useContext = (0, _react.useContext)(_FormElement.HvFormElementContext),
+      elementId = _useContext.elementId;
+
+  var elementValue = (0, _react.useContext)(_FormElement.HvFormElementValueContext);
+
+  var _useContext2 = (0, _react.useContext)(_FormElement.HvFormElementDescriptorsContext),
+      label = _useContext2.label;
+
+  var localValue = (_ref2 = value !== null && value !== void 0 ? value : elementValue) !== null && _ref2 !== void 0 ? _ref2 : "";
+
+  if ((0, _utils2.isRange)(localValue)) {
+    localValue = showEndDate ? localValue.endDate : localValue.startDate;
+  }
+
+  var _useState = (0, _react.useState)(localValue),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      dateValue = _useState2[0],
+      setDateValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      editedValue = _useState4[0],
+      setEditedValue = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(""),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      displayValue = _useState6[0],
+      setDisplayValue = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(""),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      weekdayDisplay = _useState8[0],
+      setWeekdayDisplay = _useState8[1];
+
+  var localId = id !== null && id !== void 0 ? id : (0, _utils.setId)(elementId, "calendarHeader");
+  var inputValue = editedValue !== null && editedValue !== void 0 ? editedValue : displayValue;
+  var localeFormat = (0, _dayjs.default)().locale(locale).localeData().longDateFormat("L");
+
+  var _useState9 = (0, _react.useState)(inputValue.length === 0 || !!inputValue && (0, _dayjs.default)(localValue).isValid()),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      isValidValue = _useState10[0],
+      setIsValidValue = _useState10[1];
+
+  var validateInput = function validateInput(incomingValid) {
+    return incomingValid === undefined || (0, _dayjs.default)(incomingValid).isValid();
+  };
+
+  (0, _react.useEffect)(function () {
+    var valid = validateInput(localValue);
+    setIsValidValue(valid);
+
+    if (valid) {
+      if (!localValue) {
+        setDisplayValue("");
+        setEditedValue(null);
+        setWeekdayDisplay("");
+        return;
+      }
+
+      var weekday = new Intl.DateTimeFormat(locale, {
+        weekday: "short"
+      }).format(localValue);
+      setDisplayValue((0, _utils2.formatDMY)(localValue, locale));
+      setEditedValue(null);
+      setWeekdayDisplay(weekday);
+    }
+  }, [localValue, locale]);
+
+  var handleNewDate = function handleNewDate(event, date) {
+    // attempt to format in locale data, or fallback to default
+    var localeParsedDate = (0, _dayjs.default)(date, localeFormat);
+    var isValidInput = localeParsedDate.isValid();
+    var dateParsed = isValidInput ? localeParsedDate.toDate() : (0, _dayjs.default)(date).toDate(); // prevent extra updates
+
+    if (!(0, _utils2.isSameDay)(dateParsed, dateValue)) {
+      setDateValue(dateParsed);
+      onChange === null || onChange === void 0 ? void 0 : onChange(event, dateParsed);
+    }
+
+    setIsValidValue(isValidInput);
+
+    if (isValidInput) {
+      setEditedValue(null);
+    }
+  };
+
+  var onBlurHandler = function onBlurHandler(event) {
+    if ((0, _isNil.default)(editedValue)) return;
+
+    if (editedValue === "") {
+      setIsValidValue(true);
+      setEditedValue(null);
+      return;
+    }
+
+    handleNewDate(event, editedValue);
+  };
+
+  var keyDownHandler = function keyDownHandler(event) {
+    if (!(0, _utils.isKeypress)(event, Enter) || (0, _isNil.default)(editedValue) || editedValue === "") return;
+    event.preventDefault();
+    handleNewDate(event, editedValue);
+  };
+
+  var onFocusHandler = function onFocusHandler(event) {
+    if (!localValue) return;
+    var formattedDate = isValidValue ? (0, _dayjs.default)(localValue).locale(locale).format("L") : editedValue;
+    setEditedValue(formattedDate);
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event, formattedDate);
+  };
+
+  var onChangeHandler = function onChangeHandler(event) {
+    setEditedValue(event.target.value);
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    id: localId,
+    className: (0, _clsx.default)(classes.root, !isValidValue && inputValue !== "" && classes.invalid)
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    variant: "normalText",
+    className: classes.headerDayOfWeek
+  }, weekdayDisplay || "\xA0"), /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.headerDate
+  }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
+    type: "text",
+    id: (0, _utils.setId)(localId, "header-input"),
+    placeholder: localeFormat,
+    value: inputValue,
+    className: classes.input,
+    onBlur: onBlurHandler,
+    onFocus: onFocusHandler,
+    onChange: onChangeHandler,
+    onKeyDown: keyDownHandler,
+    "aria-labelledby": label === null || label === void 0 ? void 0 : (_label$ = label[0]) === null || _label$ === void 0 ? void 0 : _label$.id
+  }, others)))), !isValidValue && inputValue !== "" && /*#__PURE__*/_react.default.createElement("div", {
+    role: "presentation",
+    className: classes.inputBorderContainer
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      height: 32
+    }
+  }, !isValidValue && inputValue !== "" && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    component: "span",
+    variant: "normalText",
+    className: classes.invalidMessageStyling
+  }, /*#__PURE__*/_react.default.createElement(_uikitReactIcons.Info, {
+    color: "acce3",
+    iconSize: "S"
+  }), "Invalid date")));
+}; // TODO: refactor this out
+
+
+HvCalendarHeader.formElementType = "HvCalendarHeader";
+HvCalendarHeader.propTypes = {
+  /**
+   * A Jss Object used to override or extend the component styles.
+   */
+  classes: _propTypes.default.instanceOf(Object).isRequired,
+
+  /**
+   * Identifier.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * The text to be shown on the main part of the header.
+   */
+  value: _propTypes.default.oneOfType([_propTypes.default.instanceOf(Date), _propTypes.default.string, _propTypes.default.shape({
+    startDate: _propTypes.default.instanceOf(Date),
+    endDate: _propTypes.default.instanceOf(Date)
+  })]),
+
+  /**
+   * Locale to be used by the calendar.
+   */
+  locale: _propTypes.default.string.isRequired,
+
+  /**
+   * Callback to define the input date.
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * Callback to handle input onFocus.
+   */
+  onFocus: _propTypes.default.func,
+
+  /**
+   * Indicates if header should display end date in a date range.
+   */
+  showEndDate: _propTypes.default.bool
+};
+
+var _default = (0, _core.withStyles)(_styles.default, {
+  name: "HvCalendarHeader"
+})(HvCalendarHeader);
+
+exports.default = _default;
+//# sourceMappingURL=CalendarHeader.js.map

package/dist/Calendar/CalendarHeader/CalendarHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Calendar/CalendarHeader/CalendarHeader.js"],"names":["dayjs","extend","localeData","localizedFormat","customParseFormat","Enter","KeyboardCodes","HvCalendarHeader","id","value","locale","classes","onChange","showEndDate","onFocus","others","HvFormElementContext","elementId","elementValue","HvFormElementValueContext","HvFormElementDescriptorsContext","label","localValue","endDate","startDate","dateValue","setDateValue","editedValue","setEditedValue","displayValue","setDisplayValue","weekdayDisplay","setWeekdayDisplay","localId","inputValue","localeFormat","longDateFormat","length","isValid","isValidValue","setIsValidValue","validateInput","incomingValid","undefined","valid","weekday","Intl","DateTimeFormat","format","handleNewDate","event","date","localeParsedDate","isValidInput","dateParsed","toDate","onBlurHandler","keyDownHandler","preventDefault","onFocusHandler","formattedDate","onChangeHandler","target","root","invalid","headerDayOfWeek","headerDate","input","inputBorderContainer","height","invalidMessageStyling","formElementType","propTypes","PropTypes","instanceOf","Object","isRequired","string","oneOfType","Date","shape","func","bool","styles","name"],"mappings":"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","sourcesContent":["import React, { useState, useEffect, useContext } from \"react\";\nimport PropTypes from \"prop-types\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\nimport dayjs from \"dayjs\";\nimport localeData from \"dayjs/plugin/localeData\";\nimport localizedFormat from \"dayjs/plugin/localizedFormat\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport clsx from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport { withStyles } from \"@material-ui/core\";\nimport { setId, isKeypress, KeyboardCodes } from \"../../utils\";\nimport HvTypography from \"../../Typography\";\nimport styles from \"./styles\";\nimport {\n  HvFormElementContext,\n  HvFormElementValueContext,\n  HvFormElementDescriptorsContext,\n} from \"../../Forms/FormElement\";\nimport { isRange, isSameDay, formatDMY } from \"../utils\";\n\ndayjs.extend(localeData);\ndayjs.extend(localizedFormat);\ndayjs.extend(customParseFormat);\n\nconst { Enter } = KeyboardCodes;\n\nconst HvCalendarHeader = ({\n  id,\n  value,\n  locale,\n  classes,\n  onChange,\n  showEndDate,\n  onFocus,\n  ...others\n}) => {\n  const { elementId } = useContext(HvFormElementContext);\n  const elementValue = useContext(HvFormElementValueContext);\n  const { label } = useContext(HvFormElementDescriptorsContext);\n\n  let localValue = value ?? elementValue ?? \"\";\n  if (isRange(localValue)) {\n    localValue = showEndDate ? localValue.endDate : localValue.startDate;\n  }\n  const [dateValue, setDateValue] = useState(localValue);\n  const [editedValue, setEditedValue] = useState(null);\n  const [displayValue, setDisplayValue] = useState(\"\");\n  const [weekdayDisplay, setWeekdayDisplay] = useState(\"\");\n\n  const localId = id ?? setId(elementId, \"calendarHeader\");\n\n  const inputValue = editedValue ?? displayValue;\n  const localeFormat = dayjs().locale(locale).localeData().longDateFormat(\"L\");\n\n  const [isValidValue, setIsValidValue] = useState(\n    inputValue.length === 0 || (!!inputValue && dayjs(localValue).isValid())\n  );\n\n  const validateInput = (incomingValid) =>\n    incomingValid === undefined || dayjs(incomingValid).isValid();\n  useEffect(() => {\n    const valid = validateInput(localValue);\n    setIsValidValue(valid);\n    if (valid) {\n      if (!localValue) {\n        setDisplayValue(\"\");\n        setEditedValue(null);\n        setWeekdayDisplay(\"\");\n        return;\n      }\n      const weekday = new Intl.DateTimeFormat(locale, { weekday: \"short\" }).format(localValue);\n      setDisplayValue(formatDMY(localValue, locale));\n      setEditedValue(null);\n      setWeekdayDisplay(weekday);\n    }\n  }, [localValue, locale]);\n\n  const handleNewDate = (event, date) => {\n    // attempt to format in locale data, or fallback to default\n    const localeParsedDate = dayjs(date, localeFormat);\n\n    const isValidInput = localeParsedDate.isValid();\n    const dateParsed = isValidInput ? localeParsedDate.toDate() : dayjs(date).toDate();\n    // prevent extra updates\n    if (!isSameDay(dateParsed, dateValue)) {\n      setDateValue(dateParsed);\n      onChange?.(event, dateParsed);\n    }\n\n    setIsValidValue(isValidInput);\n    if (isValidInput) {\n      setEditedValue(null);\n    }\n  };\n\n  const onBlurHandler = (event) => {\n    if (isNil(editedValue)) return;\n    if (editedValue === \"\") {\n      setIsValidValue(true);\n      setEditedValue(null);\n      return;\n    }\n    handleNewDate(event, editedValue);\n  };\n\n  const keyDownHandler = (event) => {\n    if (!isKeypress(event, Enter) || isNil(editedValue) || editedValue === \"\") return;\n    event.preventDefault();\n\n    handleNewDate(event, editedValue);\n  };\n\n  const onFocusHandler = (event) => {\n    if (!localValue) return;\n    const formattedDate = isValidValue ? dayjs(localValue).locale(locale).format(\"L\") : editedValue;\n    setEditedValue(formattedDate);\n    onFocus?.(event, formattedDate);\n  };\n\n  const onChangeHandler = (event) => {\n    setEditedValue(event.target.value);\n  };\n  return (\n    <>\n      <div\n        id={localId}\n        className={clsx(classes.root, {\n          [classes.invalid]: !isValidValue && inputValue !== \"\",\n        })}\n      >\n        <HvTypography variant=\"normalText\" className={classes.headerDayOfWeek}>\n          {weekdayDisplay || \"\\u00A0\"}\n        </HvTypography>\n        <div className={classes.headerDate}>\n          <input\n            type=\"text\"\n            id={setId(localId, \"header-input\")}\n            placeholder={localeFormat}\n            value={inputValue}\n            className={classes.input}\n            onBlur={onBlurHandler}\n            onFocus={onFocusHandler}\n            onChange={onChangeHandler}\n            onKeyDown={keyDownHandler}\n            aria-labelledby={label?.[0]?.id}\n            {...others}\n          />\n        </div>\n      </div>\n      {!isValidValue && inputValue !== \"\" && (\n        <div role=\"presentation\" className={classes.inputBorderContainer} />\n      )}\n      <div style={{ height: 32 }}>\n        {!isValidValue && inputValue !== \"\" && (\n          <HvTypography\n            component=\"span\"\n            variant=\"normalText\"\n            className={classes.invalidMessageStyling}\n          >\n            <Info color=\"acce3\" iconSize=\"S\" />\n            Invalid date\n          </HvTypography>\n        )}\n      </div>\n    </>\n  );\n};\n\n// TODO: refactor this out\nHvCalendarHeader.formElementType = \"HvCalendarHeader\";\n\nHvCalendarHeader.propTypes = {\n  /**\n   * A Jss Object used to override or extend the component styles.\n   */\n  classes: PropTypes.instanceOf(Object).isRequired,\n  /**\n   * Identifier.\n   */\n  id: PropTypes.string,\n  /**\n   * The text to be shown on the main part of the header.\n   */\n  value: PropTypes.oneOfType([\n    PropTypes.instanceOf(Date),\n    PropTypes.string,\n    PropTypes.shape({ startDate: PropTypes.instanceOf(Date), endDate: PropTypes.instanceOf(Date) }),\n  ]),\n\n  /**\n   * Locale to be used by the calendar.\n   */\n  locale: PropTypes.string.isRequired,\n  /**\n   * Callback to define the input date.\n   */\n  onChange: PropTypes.func,\n  /**\n   * Callback to handle input onFocus.\n   */\n  onFocus: PropTypes.func,\n  /**\n   * Indicates if header should display end date in a date range.\n   */\n  showEndDate: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvCalendarHeader\" })(HvCalendarHeader);\n"],"file":"CalendarHeader.js"}

package/dist/Calendar/CalendarHeader/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./CalendarHeader";

package/dist/Calendar/CalendarHeader/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _CalendarHeader.default;
+  }
+});
+
+var _CalendarHeader = _interopRequireDefault(require("./CalendarHeader"));
+//# sourceMappingURL=index.js.map

package/dist/Calendar/CalendarHeader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Calendar/CalendarHeader/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from \"./CalendarHeader\";\n"],"file":"index.js"}