@laerdal/life-react-components 5.0.6-dev.2 → 5.0.6

package/dist/InputFields/DatepickerField.d.ts

@@ -1,78 +1,78 @@
-/**
- * Import react libraries.
- */
-import React from 'react';
-import 'react-datepicker/dist/react-datepicker.css';
-import { Testable } from '../types';
-/**
- * Add custom types.
- */
-export type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {
-    /** Optional. Selected date. Defaults to current date */
-    value?: Date;
-    /** Optional. Handler to be called when selected date was changed. */
-    onChange?: (date: Date) => void;
-    /** Optional. Handler to be called when control is losing focus. */
-    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
-    /** Optional. Quarter picker mode. If set, then user can not select a particular date, but quarter of the year.
-     * 1st day of the quarter will be set as value.
-     */
-    showQuarterYearPicker?: boolean;
-    /** Optional. If set, then input field will be shown in 'invalid' state */
-    invalid?: boolean;
-    /** Optional. Format in which date will be shown in the input field. Defaults to 'MMMM Do, yyyy'.
-     * For quarter picker will be shown in 'YYYY, qqq' format.
-     */
-    dateFormat?: string;
-    /** Optional. Validation message to be shown under the input field */
-    validationMessage?: string;
-    /** Optional. Value for 'autocomplete' attribute of input field tag. */
-    autoComplete?: string;
-    /** Optional. Placeholder text to be shown when no value is selected. */
-    placeholder?: string;
-    /** Optional. If set, then user will be able to open year selector by clicking on the month in the dropdown. */
-    yearPicker?: boolean;
-    /** Optional. How many years before current year will be available in the year selector mode. */
-    yearsBeforeCurrentDate?: number;
-    /** Optional. How many years after current year will be available in the year selector mode. */
-    yearsAfterCurrentDate?: number;
-    /** Optional. Margin value to be set to the dropdown container. */
-    margin?: string;
-    /** Optional. Position where to show tooltip in case of closed datepicker and value overflowing the input field. */
-    overflowTooltipPosition?: 'top' | 'bottom';
-};
-declare const DatepickerField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onBlur" | "onChange" | "size" | "value"> & {
-    /** Optional. Selected date. Defaults to current date */
-    value?: Date | undefined;
-    /** Optional. Handler to be called when selected date was changed. */
-    onChange?: ((date: Date) => void) | undefined;
-    /** Optional. Handler to be called when control is losing focus. */
-    onBlur?: ((event: React.FocusEvent<HTMLDivElement>) => void) | undefined;
-    /** Optional. Quarter picker mode. If set, then user can not select a particular date, but quarter of the year.
-     * 1st day of the quarter will be set as value.
-     */
-    showQuarterYearPicker?: boolean | undefined;
-    /** Optional. If set, then input field will be shown in 'invalid' state */
-    invalid?: boolean | undefined;
-    /** Optional. Format in which date will be shown in the input field. Defaults to 'MMMM Do, yyyy'.
-     * For quarter picker will be shown in 'YYYY, qqq' format.
-     */
-    dateFormat?: string | undefined;
-    /** Optional. Validation message to be shown under the input field */
-    validationMessage?: string | undefined;
-    /** Optional. Value for 'autocomplete' attribute of input field tag. */
-    autoComplete?: string | undefined;
-    /** Optional. Placeholder text to be shown when no value is selected. */
-    placeholder?: string | undefined;
-    /** Optional. If set, then user will be able to open year selector by clicking on the month in the dropdown. */
-    yearPicker?: boolean | undefined;
-    /** Optional. How many years before current year will be available in the year selector mode. */
-    yearsBeforeCurrentDate?: number | undefined;
-    /** Optional. How many years after current year will be available in the year selector mode. */
-    yearsAfterCurrentDate?: number | undefined;
-    /** Optional. Margin value to be set to the dropdown container. */
-    margin?: string | undefined;
-    /** Optional. Position where to show tooltip in case of closed datepicker and value overflowing the input field. */
-    overflowTooltipPosition?: "bottom" | "top" | undefined;
-} & React.RefAttributes<HTMLInputElement>>;
-export default DatepickerField;
+/**
+ * Import react libraries.
+ */
+import React from 'react';
+import 'react-datepicker/dist/react-datepicker.css';
+import { Testable } from '../types';
+/**
+ * Add custom types.
+ */
+export type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {
+    /** Optional. Selected date. Defaults to current date */
+    value?: Date;
+    /** Optional. Handler to be called when selected date was changed. */
+    onChange?: (date: Date) => void;
+    /** Optional. Handler to be called when control is losing focus. */
+    onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
+    /** Optional. Quarter picker mode. If set, then user can not select a particular date, but quarter of the year.
+     * 1st day of the quarter will be set as value.
+     */
+    showQuarterYearPicker?: boolean;
+    /** Optional. If set, then input field will be shown in 'invalid' state */
+    invalid?: boolean;
+    /** Optional. Format in which date will be shown in the input field. Defaults to 'MMMM Do, yyyy'.
+     * For quarter picker will be shown in 'YYYY, qqq' format.
+     */
+    dateFormat?: string;
+    /** Optional. Validation message to be shown under the input field */
+    validationMessage?: string;
+    /** Optional. Value for 'autocomplete' attribute of input field tag. */
+    autoComplete?: string;
+    /** Optional. Placeholder text to be shown when no value is selected. */
+    placeholder?: string;
+    /** Optional. If set, then user will be able to open year selector by clicking on the month in the dropdown. */
+    yearPicker?: boolean;
+    /** Optional. How many years before current year will be available in the year selector mode. */
+    yearsBeforeCurrentDate?: number;
+    /** Optional. How many years after current year will be available in the year selector mode. */
+    yearsAfterCurrentDate?: number;
+    /** Optional. Margin value to be set to the dropdown container. */
+    margin?: string;
+    /** Optional. Position where to show tooltip in case of closed datepicker and value overflowing the input field. */
+    overflowTooltipPosition?: 'top' | 'bottom';
+};
+declare const DatepickerField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onBlur" | "onChange" | "size" | "value"> & {
+    /** Optional. Selected date. Defaults to current date */
+    value?: Date | undefined;
+    /** Optional. Handler to be called when selected date was changed. */
+    onChange?: ((date: Date) => void) | undefined;
+    /** Optional. Handler to be called when control is losing focus. */
+    onBlur?: ((event: React.FocusEvent<HTMLDivElement>) => void) | undefined;
+    /** Optional. Quarter picker mode. If set, then user can not select a particular date, but quarter of the year.
+     * 1st day of the quarter will be set as value.
+     */
+    showQuarterYearPicker?: boolean | undefined;
+    /** Optional. If set, then input field will be shown in 'invalid' state */
+    invalid?: boolean | undefined;
+    /** Optional. Format in which date will be shown in the input field. Defaults to 'MMMM Do, yyyy'.
+     * For quarter picker will be shown in 'YYYY, qqq' format.
+     */
+    dateFormat?: string | undefined;
+    /** Optional. Validation message to be shown under the input field */
+    validationMessage?: string | undefined;
+    /** Optional. Value for 'autocomplete' attribute of input field tag. */
+    autoComplete?: string | undefined;
+    /** Optional. Placeholder text to be shown when no value is selected. */
+    placeholder?: string | undefined;
+    /** Optional. If set, then user will be able to open year selector by clicking on the month in the dropdown. */
+    yearPicker?: boolean | undefined;
+    /** Optional. How many years before current year will be available in the year selector mode. */
+    yearsBeforeCurrentDate?: number | undefined;
+    /** Optional. How many years after current year will be available in the year selector mode. */
+    yearsAfterCurrentDate?: number | undefined;
+    /** Optional. Margin value to be set to the dropdown container. */
+    margin?: string | undefined;
+    /** Optional. Position where to show tooltip in case of closed datepicker and value overflowing the input field. */
+    overflowTooltipPosition?: "bottom" | "top" | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
+export default DatepickerField;

package/dist/InputFields/DatepickerField.js

@@ -7,13 +7,13 @@ var _excluded = ["disabled", "readOnly", "onChange", "invalid", "value", "valida
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-/**
- * Import react libraries.
+/**
+ * Import react libraries.
  */
 import React from 'react';
 
-/**
- * Import third-party libraries.
+/**
+ * Import third-party libraries.
  */
 import styled, { useTheme } from 'styled-components';
 import DatePicker from 'react-datepicker';
@@ -24,8 +24,8 @@ import quarterOfYear from "dayjs/plugin/quarterOfYear";
 dayjs.extend(advancedFormat);
 dayjs.extend(quarterOfYear);
 
-/**
- * Import custom components.
+/**
+ * Import custom components.
  */
 import COLORS from '../styles/colors';
 import { SystemIcons } from '../icons';
@@ -33,8 +33,8 @@ import { DatepickerFieldHeader } from './DatepickerFieldHeader';
 import { ComponentTextStyle, focusStyles, scrollBarStyling } from '../styles';
 import TooltipOverflow from '../Tooltips/TooltipOverflow';
 
-/**
- * Import custom styles.
+/**
+ * Import custom styles.
  */
 import { ErrorMessage, InputFieldStyling, InputWrapper } from './styling';
 import 'react-datepicker/dist/react-datepicker.css';
@@ -43,14 +43,14 @@ import { Z_INDEXES } from '../styles';
 import { useFocusVisibleRef } from '../common';
 import { Size } from '../types';
 
-/**
- * Add custom types.
+/**
+ * Add custom types.
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * Add custom styles.
+/**
+ * Add custom styles.
  */
 var DatePickerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .react-datepicker-popper {\n    z-index: ", ";\n  }\n\n  .react-datepicker-popper[data-placement^=bottom] {\n    padding-top: 0px;\n  }\n\n  \n  .react-datepicker-popper[data-placement^=top] {\n    padding-bottom: 0px;\n  }\n\n  > div {\n    display: block;\n\n    ", "\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 48px;\n      width: 48px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ", ";\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ", "\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ", ";\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ", ";\n      background: ", ";\n      height: ", ";\n      padding-top: 0px;\n    }\n\n    .react-datepicker-year-header {\n      height: 48px;\n      line-height: 48px !important;\n      align-items: center;\n\n      ", "\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ", "\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ", "\n    }\n\n    .react-datepicker__quarter-wrapper{\n      width: 100%;\n      display: flex;\n      align-content: space-evenly;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 20px;\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__navigation-icon {\n      display: none;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ", "\n    }\n\n    \n\n    .react-datepicker__year-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ", "\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n    }\n\n    .react-datepicker__day, .react-datepicker__quarter-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      flex-grow: 1;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ", "\n      &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        flex-grow: 1;\n        font-weight: 400;\n        border: none;\n      }\n\n      &.react-datepicker__quarter--selected {\n        color: ", " !important;\n        flex-grow: 1;\n        background: ", " !important;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__day--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ", ";\n        background: ", ";\n\n        &:hover {\n          color: ", ";\n          background: ", ";\n        }\n\n        &:focus {\n          ", "\n        }\n      }\n    }\n  }\n"])), Z_INDEXES.dropdown, function (props) {
   return props.$margin ? "margin: ".concat(props.$margin, ";") : '';
@@ -199,8 +199,8 @@ var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return val.year() + ', Q' + val.quarter();
     } else return dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');
   };
-  /**
-   * Format the date in a specific way.
+  /**
+   * Format the date in a specific way.
    */
   React.useEffect(function () {
     if (value) inputRef.current.value = getFormattedValue();

package/dist/InputFields/DatepickerField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerField.js","names":["React","styled","useTheme","DatePicker","en","dayjs","advancedFormat","quarterOfYear","extend","COLORS","SystemIcons","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","TooltipOverflow","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","Size","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DatePickerContainer","div","_templateObject","_taggedTemplateLiteral","dropdown","props","$margin","concat","getColor","theme","$yearPicker","Bold","Small","Regular","IconWrapper","_templateObject2","focus","DatepickerRow","_templateObject3","StyledInputFieldStyling","_templateObject4","quarterComponentsClassPrefix","DatepickerField","forwardRef","_ref","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearPicker","yearsBeforeCurrentDate","yearsAfterCurrentDate","margin","overflowTooltipPosition","onBlur","showQuarterYearPicker","id","dataTestId","rest","_objectWithoutProperties","_excluded","inputRef","datepickerRef","useRef","focusedQuarterRef","_React$useState","useState","_React$useState2","_slicedToArray","activeMonthPage","setActiveMonthPage","_React$useState3","_React$useState4","yearPickerMode","setYearPickerMode","_React$useState5","_React$useState6","openAt","setOpenAt","_React$useState7","_React$useState8","open","setOpen","getFormattedValue","val","year","quarter","format","useEffect","current","getQuarterItem","classname","document","getElementsByClassName","_selectedDate$parentE","selectedDate","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","wrapper","handler","event","key","currentQ","click","previousQ","tabIndex","nextQ","addEventListener","selectedQuarter","i","innerText","includes","setAttribute","firstQuarter","removeEventListener","useImperativeHandle","handleCalendarClose","_inputRef$current","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","handleBlur","currentTarget","contains","relatedTarget","iconSize","children","$quarterPicker","onCalendarOpen","onCalendarClose","onKeyDown","onClickOutside","newDate","setMonth","locale","undefined","showYearPicker","yearItemNumber","selected","openToDate","preventOpenOnFocus","shouldCloseOnSelect","renderCustomHeader","params","createElement","_objectSpread","customHeaderCount","customInput","$disabled","$readOnly","type","name","className","onFocus","_inputRef$current2","setSelectionRange","$extraRightPadding","$suppressReadOnlyStyles","Calendar","size","position","input","withArrow","maxWidth","align","TechnicalWarning","color","propTypes","_pt","instanceOf","func","bool","string","number","oneOf"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\r\n * Import react libraries.\r\n */\r\nimport React from 'react';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { useTheme } from 'styled-components';\r\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\r\nimport en from 'date-fns/locale/en-GB';\r\nimport dayjs from 'dayjs';\r\nimport advancedFormat  from 'dayjs/plugin/advancedFormat';\r\nimport quarterOfYear from \"dayjs/plugin/quarterOfYear\";\r\n\r\ndayjs.extend(advancedFormat);\r\ndayjs.extend(quarterOfYear);\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport COLORS from '../styles/colors';\r\nimport {SystemIcons} from '../icons';\r\nimport {DatepickerFieldHeader} from './DatepickerFieldHeader';\r\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\r\nimport 'react-datepicker/dist/react-datepicker.css';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {Size, Testable} from '../types';\r\n\r\n/**\r\n * Add custom types.\r\n */\r\nexport type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\r\n  /** Optional. Selected date. Defaults to current date */\r\n  value?: Date;\r\n  /** Optional. Handler to be called when selected date was changed. */\r\n  onChange?: (date: Date) => void;\r\n  /** Optional. Handler to be called when control is losing focus. */\r\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\r\n  /** Optional. Quarter picker mode. If set, then user can not select a particular date, but quarter of the year.\r\n   * 1st day of the quarter will be set as value.\r\n   */\r\n  showQuarterYearPicker?: boolean;\r\n  /** Optional. If set, then input field will be shown in 'invalid' state */\r\n  invalid?: boolean;\r\n  /** Optional. Format in which date will be shown in the input field. Defaults to 'MMMM Do, yyyy'. \r\n   * For quarter picker will be shown in 'YYYY, qqq' format.\r\n   */\r\n  dateFormat?: string;\r\n  /** Optional. Validation message to be shown under the input field */\r\n  validationMessage?: string;\r\n  /** Optional. Value for 'autocomplete' attribute of input field tag. */\r\n  autoComplete?: string;\r\n  /** Optional. Placeholder text to be shown when no value is selected. */\r\n  placeholder?: string;\r\n  /** Optional. If set, then user will be able to open year selector by clicking on the month in the dropdown. */\r\n  yearPicker?: boolean;\r\n  /** Optional. How many years before current year will be available in the year selector mode. */\r\n  yearsBeforeCurrentDate?: number;\r\n  /** Optional. How many years after current year will be available in the year selector mode. */\r\n  yearsAfterCurrentDate?: number;\r\n  /** Optional. Margin value to be set to the dropdown container. */\r\n  margin?: string;\r\n  /** Optional. Position where to show tooltip in case of closed datepicker and value overflowing the input field. */\r\n  overflowTooltipPosition?: 'top' | 'bottom';\r\n};\r\n\r\n/**\r\n * Add custom styles.\r\n */\r\nconst DatePickerContainer = styled.div<{ $yearPicker: boolean; $margin: string; $quarterPicker?: boolean }>`\r\n  .react-datepicker-popper {\r\n    z-index: ${Z_INDEXES.dropdown};\r\n  }\r\n\r\n  .react-datepicker-popper[data-placement^=bottom] {\r\n    padding-top: 0px;\r\n  }\r\n\r\n  \r\n  .react-datepicker-popper[data-placement^=top] {\r\n    padding-bottom: 0px;\r\n  }\r\n\r\n  > div {\r\n    display: block;\r\n\r\n    ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n    .react-datepicker {\r\n      box-sizing: border-box;\r\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\r\n      border: 1px solid #e5e5e5;\r\n    }\r\n    .react-datepicker__input-container{\r\n      z-index: 0;\r\n    }\r\n\r\n    .react-datepicker__navigation {\r\n      line-height: normal;\r\n      text-indent: inherit;\r\n      border: none;\r\n      border-radius: 4px;\r\n      height: 48px;\r\n      width: 48px;\r\n      outline: none;\r\n      margin: 0px;\r\n      color: transparent;\r\n\r\n      &:hover {\r\n        background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n        &.react-datepicker__navigation--previous::before {\r\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\r\n        }\r\n\r\n        &.react-datepicker__navigation--next::before {\r\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\r\n        }\r\n      }\r\n\r\n      &:focus {\r\n        ${focusStyles}\r\n        &.react-datepicker__navigation--next::before {\r\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\r\n        }\r\n\r\n        &.react-datepicker__navigation--previous::before {\r\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\r\n        }\r\n      }\r\n\r\n      &::before {\r\n        text-align: center;\r\n        display: inline-block;\r\n        content: '';\r\n        height: 32px;\r\n        width: 32px;\r\n        vertical-align: middle;\r\n      }\r\n\r\n      &.react-datepicker__navigation--next::before {\r\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\r\n      }\r\n\r\n      &.react-datepicker__navigation--previous::before {\r\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\r\n      }\r\n    }\r\n\r\n    .react-datepicker__month-container,\r\n    .react-datepicker__year--container {\r\n      width: 336px;\r\n    }\r\n\r\n    .react-datepicker__month {\r\n      margin: 0px;\r\n    }\r\n\r\n    .react-datepicker__triangle {\r\n      left: 50% !important;\r\n      display: none;\r\n    }\r\n\r\n    .react-datepicker-popper[data-placement^='bottom'] {\r\n      margin-top: 0;\r\n    }\r\n\r\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\r\n      border-bottom-color: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n    }\r\n\r\n    .react-datepicker__header {\r\n      border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\r\n      background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n      height: ${(props) => (!props.$yearPicker ? '96px' : '54px')};\r\n      padding-top: 0px;\r\n    }\r\n\r\n    .react-datepicker-year-header {\r\n      height: 48px;\r\n      line-height: 48px !important;\r\n      align-items: center;\r\n\r\n      ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n\r\n    .react-datepicker__current-month {\r\n      height: 48px;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      margin-right: 5px;\r\n\r\n      ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n\r\n    .react-datepicker__year {\r\n      max-height: 300px;\r\n      overflow-y: scroll;\r\n\r\n      ${scrollBarStyling(Size.Small)}\r\n    }\r\n\r\n    .react-datepicker__quarter-wrapper{\r\n      width: 100%;\r\n      display: flex;\r\n      align-content: space-evenly;\r\n      flex-wrap: wrap;\r\n      align-items: center;\r\n      gap: 20px;\r\n    }\r\n\r\n    .react-datepicker__year-wrapper {\r\n      max-width: 100%;\r\n      justify-content: space-around;\r\n    }\r\n\r\n    .react-datepicker__navigation-icon {\r\n      display: none;\r\n    }\r\n\r\n    .react-datepicker__day-name {\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      height: 48px;\r\n      margin: 0px;\r\n      width: 48px;\r\n\r\n      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n    }\r\n\r\n    \r\n\r\n    .react-datepicker__year-text {\r\n      background: ${props => COLORS.getColor('white', props.theme)};\r\n      border: none;\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      margin-top: 20px;\r\n      padding-top: 10px;\r\n      padding-bottom: 10px;\r\n\r\n      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n      &.react-datepicker__year-text--disabled {\r\n        display: none;\r\n      }\r\n\r\n      &.react-datepicker__day--keyboard-selected {\r\n        color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n        background: ${props => COLORS.getColor('white', props.theme)};\r\n        font-weight: 400;\r\n        border: none;\r\n      }\r\n\r\n      &:hover {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n        background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n      }\r\n\r\n      &:focus {\r\n        ${focusStyles}\r\n      }\r\n\r\n      &.react-datepicker__year-text--selected {\r\n        color: ${props => COLORS.getColor('white', props.theme)} !important;\r\n        background: ${props => COLORS.getColor('primary_500', props.theme)} !important;\r\n      }\r\n    }\r\n\r\n    .react-datepicker__day, .react-datepicker__quarter-text {\r\n      background: ${props => COLORS.getColor('white', props.theme)};\r\n      border: none;\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      flex-grow: 1;\r\n      height: 40px;\r\n      width: 40px;\r\n      margin: 4px;\r\n\r\n      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\r\n      &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\r\n        color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n        background: ${props => COLORS.getColor('white', props.theme)};\r\n        flex-grow: 1;\r\n        font-weight: 400;\r\n        border: none;\r\n      }\r\n\r\n      &.react-datepicker__quarter--selected {\r\n        color: ${props => COLORS.getColor('white', props.theme)} !important;\r\n        flex-grow: 1;\r\n        background: ${props => COLORS.getColor('primary_500', props.theme)} !important;\r\n      }\r\n\r\n      &:hover {\r\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n        background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n      }\r\n\r\n      &:focus {\r\n        ${focusStyles}\r\n      }\r\n\r\n      &.react-datepicker__day--selected {\r\n        color: ${props => COLORS.getColor('white', props.theme)} !important;\r\n        background: ${props => COLORS.getColor('primary_500', props.theme)} !important;\r\n      }\r\n\r\n      &.react-datepicker__day--today {\r\n        border-radius: 0.3rem;\r\n        color: ${props => COLORS.getColor('neutral_700', props.theme)};\r\n        background: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n        &:hover {\r\n          color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n          background: ${props => COLORS.getColor('primary_20', props.theme)};\r\n        }\r\n\r\n        &:focus {\r\n          ${focusStyles}\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst IconWrapper = styled.div`\r\n  pointer-events: none;\r\n  position: absolute;\r\n  left: 16px;\r\n  width: 24px;\r\n  height: 24px;\r\n  z-index: ${+Z_INDEXES.focus + 1};\r\n`;\r\n\r\nconst DatepickerRow = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\r\n  padding-left: 48px !important;\r\n  \r\n  &::placeholder {\r\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\r\n  }\r\n\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_300', props.theme)};\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_200', props.theme)};\r\n\r\n    ::placeholder {\r\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n\r\n    cursor: pointer;\r\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &:active,\r\n  &.open {\r\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_300', props.theme)};\r\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n\r\n    ::placeholder {\r\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n  \r\n  &:disabled {\r\n    background-color: ${props => COLORS.getColor('white', props.theme)};\r\n  }\r\n\r\n  & ~ ${IconWrapper}{\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n\r\n  &:hover ~ ${IconWrapper} {\r\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n  }\r\n\r\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\r\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n  }\r\n\r\n  &[tabindex='-1'] ~ ${IconWrapper} {\r\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n  }\r\n`;\r\n\r\nconst quarterComponentsClassPrefix = 'react-datepicker__quarter-';\r\n\r\nconst DatepickerField = React.forwardRef<HTMLInputElement, DatepickerFieldProps>(({\r\n                                            disabled,\r\n                                            readOnly,\r\n                                            onChange,\r\n                                            invalid,\r\n                                            value,\r\n                                            validationMessage,\r\n                                            dateFormat,\r\n                                            autoComplete,\r\n                                            placeholder,\r\n                                            required,\r\n                                            yearPicker,\r\n                                            yearsBeforeCurrentDate,\r\n                                            yearsAfterCurrentDate,\r\n                                            margin,\r\n                                            overflowTooltipPosition,\r\n                                            onBlur,\r\n                                            showQuarterYearPicker,\r\n                                            id,\r\n                                            dataTestId,\r\n                                            ...rest\r\n                                          }: DatepickerFieldProps, ref) => {\r\n  // Globally used variables within the component\r\n  const theme = useTheme();\r\n  const inputRef = useFocusVisibleRef();\r\n  const datepickerRef = React.useRef<any>(null);\r\n  const focusedQuarterRef = React.useRef<number>(1);\r\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\r\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\r\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\r\n  // 'open' flag is used only for tracking current state of the dropdown,\r\n  // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\r\n  const [open, setOpen] = React.useState<boolean>(false);\r\n\r\n  const getFormattedValue = () => {\r\n    if(showQuarterYearPicker)\r\n    {\r\n      const val = dayjs(value);\r\n      return val.year() + ', Q' + val.quarter();\r\n    }\r\n    else \r\n      return dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\r\n  }\r\n  /**\r\n   * Format the date in a specific way.\r\n   */\r\n  React.useEffect(() => {\r\n    if (value) inputRef.current.value = getFormattedValue();\r\n  }, [value]);\r\n\r\n  function getQuarterItem(classname: string) : HTMLElement {\r\n    return document.getElementsByClassName(quarterComponentsClassPrefix + classname)[0] as HTMLElement;\r\n  }\r\n\r\n  React.useEffect(() => {\r\n    if (yearPickerMode) {\r\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\r\n      //we have to touch DOM directly\r\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\r\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\r\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\r\n    }\r\n  }, [yearPickerMode]);\r\n\r\n  React.useEffect(() => {\r\n    if(showQuarterYearPicker && open)\r\n    {\r\n      const wrapper = getQuarterItem('wrapper');\r\n      const handler = (event: KeyboardEvent) => {\r\n        switch(event.key)\r\n        {\r\n          case ' ':\r\n          case 'Enter':\r\n            const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n            currentQ.click();\r\n            break;\r\n\r\n          case 'ArrowLeft':\r\n            if(focusedQuarterRef.current > 1)\r\n            {\r\n              const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n              const previousQ = getQuarterItem((focusedQuarterRef.current - 1) + '');\r\n              if(previousQ)\r\n              {\r\n                currentQ.tabIndex = -1;\r\n                previousQ.tabIndex = 0;\r\n                previousQ.focus();\r\n                focusedQuarterRef.current = focusedQuarterRef.current - 1;\r\n              }\r\n            }\r\n            break;\r\n\r\n          case 'ArrowRight':\r\n            if(focusedQuarterRef.current < 4)\r\n            {\r\n              const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n              const nextQ = getQuarterItem((focusedQuarterRef.current + 1) + '');\r\n              if(nextQ)\r\n              {\r\n                currentQ.tabIndex = -1;\r\n                nextQ.tabIndex = 0;\r\n                nextQ.focus();\r\n                focusedQuarterRef.current = focusedQuarterRef.current + 1;\r\n              }\r\n            }\r\n            break;\r\n        }\r\n      };\r\n\r\n      wrapper.addEventListener('keydown', handler);\r\n      //unfortunately since there are no efs, and quarter picker is rendered not by our code, but by 'react-datepicker'\r\n      //we have to touch DOM directly\r\n      \r\n      const selectedQuarter = getQuarterItem('-selected');\r\n      if(selectedQuarter) {\r\n        for (let i = 1; i < 5; i++) {\r\n          if(selectedQuarter.innerText.includes('Q' + i)) {\r\n            focusedQuarterRef.current = i;\r\n            break;\r\n          }\r\n        }\r\n        selectedQuarter.setAttribute(\"tabIndex\", \"0\");\r\n      }\r\n      else\r\n      {\r\n        const firstQuarter = getQuarterItem('1');\r\n        if(firstQuarter) {\r\n          focusedQuarterRef.current = 1;\r\n          firstQuarter.setAttribute(\"tabIndex\", \"0\");\r\n        }\r\n      }\r\n\r\n      return () => {\r\n        wrapper.removeEventListener('keydown', handler);\r\n      };\r\n    }\r\n  }, [showQuarterYearPicker, open]);\r\n\r\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\r\n  //otherwise after year selection datepicker will show January month of the selected year\r\n  React.useEffect(() => {\r\n    if (openAt) {\r\n      datepickerRef.current.setOpen(true);\r\n      //setOpenAt(null);\r\n    }\r\n  }, [openAt]);\r\n\r\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\r\n\r\n  const handleCalendarClose = () => {\r\n    inputRef.current?.blur();\r\n    setOpen(false);\r\n  };\r\n\r\n  const handleCalendarOpen = () => {\r\n    if (openAt) setOpenAt(null);\r\n    setOpen(true);\r\n  };\r\n\r\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\r\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\r\n\r\n  //itemsNumber - controls number of year select options generated in the dropdown\r\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\r\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\r\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (e.key === 'Escape' || e.key === 'Esc')\r\n      datepickerRef.current.setOpen(false);\r\n  };\r\n\r\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\r\n    // @ts-ignore\r\n    if (!e.currentTarget.contains(e.relatedTarget)) {\r\n      onBlur && onBlur(e);\r\n    }\r\n  };\r\n  const iconSize = 24;\r\n\r\n  return (\r\n    <>\r\n      {/* Let's render the input itself */}\r\n      <DatePickerContainer $quarterPicker={showQuarterYearPicker} data-testid={dataTestId} $yearPicker={yearPickerMode} $margin={margin || ''} onBlur={handleBlur}>\r\n        <DatePicker\r\n          ref={datepickerRef}\r\n          onCalendarOpen={handleCalendarOpen}\r\n          onCalendarClose={handleCalendarClose}\r\n          onKeyDown={handleKeyDown}\r\n          id={id}\r\n          onClickOutside={() => datepickerRef.current.setOpen(false)}\r\n\r\n          onChange={(e: any) => {\r\n            if (onChange) {\r\n              if (yearPickerMode) {\r\n                const newDate = new Date();\r\n                newDate.setFullYear(e.getFullYear());\r\n                newDate.setMonth(activeMonthPage);\r\n                setOpenAt(newDate);\r\n              } else onChange(e);\r\n            }\r\n            if (yearPickerMode) setYearPickerMode(false);\r\n          }}\r\n          disabled={disabled || readOnly}\r\n          locale={en}\r\n          showQuarterYearPicker={showQuarterYearPicker}\r\n          dateFormat={showQuarterYearPicker ? \"yyyy, QQQ\" : undefined}\r\n          showYearPicker={yearPickerMode}\r\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\r\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\r\n          maxDate={yearPickerMode ? maxDate : undefined}\r\n          selected={value}\r\n          openToDate={openAt ?? undefined}\r\n          preventOpenOnFocus={true}\r\n          shouldCloseOnSelect={true}\r\n          renderCustomHeader={\r\n            yearPicker\r\n              ? (params: ReactDatePickerCustomHeaderProps) =>\r\n                React.createElement(\r\n                  DatepickerFieldHeader,\r\n                  {\r\n                    ...params,\r\n                    setActiveMonthPage,\r\n                    customHeaderCount: 0,\r\n                    yearPickerMode: yearPickerMode,\r\n                    setYearPickerMode: setYearPickerMode,\r\n                  },\r\n                  null,\r\n                )\r\n              : undefined\r\n          }\r\n          customInput={\r\n            <InputWrapper $disabled={disabled} $readOnly={readOnly}>\r\n              <DatepickerRow>\r\n                  <StyledInputFieldStyling\r\n                    ref={inputRef}\r\n                    type=\"text\"\r\n                    name=\"datepicker\"\r\n                    onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\r\n                    className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\r\n                    tabIndex={disabled || readOnly ? -1 : 0}\r\n                    onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\r\n                    autoComplete={autoComplete}\r\n                    placeholder={placeholder}\r\n                    $extraRightPadding={iconSize}\r\n                    disabled={disabled}\r\n                    readOnly={true}\r\n                    $suppressReadOnlyStyles={!readOnly}\r\n                    required={required}\r\n                    {...rest}\r\n                  />\r\n                  <IconWrapper>\r\n                    <SystemIcons.Calendar size=\"24\"/>\r\n                  </IconWrapper>\r\n                </DatepickerRow>\r\n              {!open && <TooltipOverflow position={overflowTooltipPosition} input={inputRef} withArrow={true} maxWidth=\"100%\" size={Size.Small} align='end'>\r\n                {getFormattedValue()}\r\n              </TooltipOverflow>}\r\n            </InputWrapper>\r\n          }\r\n        />\r\n      </DatePickerContainer>\r\n\r\n      {/* If there is an error, let's render the error */}\r\n      {validationMessage && (\r\n        <ErrorMessage>\r\n          <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)}/>\r\n          <span>{validationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n    </>\r\n  );\r\n});\r\n\r\nexport default DatepickerField;\r\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA,OAAOC,MAAM,IAAIC,QAAQ,QAAQ,mBAAmB;AACpD,OAAOC,UAAU,MAA4C,kBAAkB;AAC/E,OAAOC,EAAE,MAAM,uBAAuB;AACtC,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,cAAc,MAAO,6BAA6B;AACzD,OAAOC,aAAa,MAAM,4BAA4B;AAEtDF,KAAK,CAACG,MAAM,CAACF,cAAc,CAAC;AAC5BD,KAAK,CAACG,MAAM,CAACD,aAAa,CAAC;;AAE3B;AACA;AACA;AACA,OAAOE,MAAM,MAAM,kBAAkB;AACrC,SAAQC,WAAW,QAAO,UAAU;AACpC,SAAQC,qBAAqB,QAAO,yBAAyB;AAC7D,SAAQC,kBAAkB,EAAEC,WAAW,EAAEC,gBAAgB,QAAO,WAAW;AAC3E,OAAOC,eAAe,MAAM,6BAA6B;;AAEzD;AACA;AACA;AACA,SAAQC,YAAY,EAAEC,iBAAiB,EAAEC,YAAY,QAAO,WAAW;AACvE,OAAO,4CAA4C;AACnD,SAAQC,iBAAiB,EAAEC,iBAAiB,QAAO,WAAW;AAC9D,SAAQC,SAAS,QAAO,WAAW;AACnC,SAAQC,kBAAkB,QAAO,WAAW;AAC5C,SAAQC,IAAI,QAAiB,UAAU;;AAEvC;AACA;AACA;AAFA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAsCA;AACA;AACA;AACA,IAAMC,mBAAmB,GAAG7B,MAAM,CAAC8B,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,oyQAEvBZ,SAAS,CAACa,QAAQ,EAe3B,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,OAAO,cAAAC,MAAA,CAAcF,KAAK,CAACC,OAAO,SAAM,EAAE;AAAA,CAAC,EAsB7C,UAAAD,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,YAAY,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAY/D1B,WAAW,EA+CQ,UAAAsB,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,YAAY,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAI/C,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GACjE,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,YAAY,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GACvD,UAACJ,KAAK;EAAA,OAAM,CAACA,KAAK,CAACK,WAAW,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC,EASzD,UAAAL,KAAK;EAAA,OAAIf,iBAAiB,CAACR,kBAAkB,CAAC6B,IAAI,EAAEhC,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC,CAAC;AAAA,GAShG,UAAAJ,KAAK;EAAA,OAAIf,iBAAiB,CAACR,kBAAkB,CAAC6B,IAAI,EAAEhC,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC,CAAC;AAAA,GAOhGzB,gBAAgB,CAACS,IAAI,CAACmB,KAAK,CAAC,EA6B5B,UAAAP,KAAK;EAAA,OAAIhB,iBAAiB,CAACP,kBAAkB,CAAC+B,OAAO,EAAElC,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC,CAAC;AAAA,GAMvF,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,OAAO,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAS1D,UAAAJ,KAAK;EAAA,OAAIhB,iBAAiB,CAACP,kBAAkB,CAAC+B,OAAO,EAAElC,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC,CAAC;AAAA,GAM1F,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAC/C,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,OAAO,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAMnD,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAC/C,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,YAAY,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAI/D1B,WAAW,EAIJ,UAAAsB,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,OAAO,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GACzC,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAKtD,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,OAAO,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAU1D,UAAAJ,KAAK;EAAA,OAAIhB,iBAAiB,CAACP,kBAAkB,CAAC+B,OAAO,EAAElC,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC,CAAC;AAAA,GAE1F,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAC/C,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,OAAO,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAOnD,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,OAAO,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAEzC,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAIzD,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAC/C,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,YAAY,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAI/D1B,WAAW,EAIJ,UAAAsB,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,OAAO,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GACzC,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAKzD,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAC/C,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAGvD,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAC/C,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,YAAY,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAI/D1B,WAAW,CAKtB;AAED,IAAM+B,WAAW,GAAG3C,MAAM,CAAC8B,GAAG,CAAAc,gBAAA,KAAAA,gBAAA,GAAAZ,sBAAA,6HAMjB,CAACZ,SAAS,CAACyB,KAAK,GAAG,CAAC,CAChC;AAED,IAAMC,aAAa,GAAG9C,MAAM,CAAC8B,GAAG,CAAAiB,gBAAA,KAAAA,gBAAA,GAAAf,sBAAA,4EAI/B;AAED,IAAMgB,uBAAuB,GAAGhD,MAAM,CAACgB,iBAAiB,CAAC,CAAAiC,gBAAA,KAAAA,gBAAA,GAAAjB,sBAAA,qxBAI5C,UAAAE,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAIzB,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAIpD,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAG7E,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAI3C,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,YAAY,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAC9D,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAKzB,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GACpE,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAC/D,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAGlD,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAK3C,UAAAJ,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,OAAO,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAG9DK,WAAW,EACN,UAAAT,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAGnDK,WAAW,EACZ,UAAAT,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAGlDK,WAAW,EAAcA,WAAW,EACtC,UAAAT,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,GAG1CK,WAAW,EACrB,UAAAT,KAAK;EAAA,OAAI1B,MAAM,CAAC6B,QAAQ,CAAC,aAAa,EAAEH,KAAK,CAACI,KAAK,CAAC;AAAA,EAEhE;AAED,IAAMY,4BAA4B,GAAG,4BAA4B;AAEjE,IAAMC,eAAe,gBAAGpD,KAAK,CAACqD,UAAU,CAAyC,UAAAC,IAAA,EAqBdC,GAAG,EAAK;EAAA,IApB/BC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,SAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACRC,OAAO,GAAAL,IAAA,CAAPK,OAAO;IACPC,KAAK,GAAAN,IAAA,CAALM,KAAK;IACLC,iBAAiB,GAAAP,IAAA,CAAjBO,iBAAiB;IACjBC,UAAU,GAAAR,IAAA,CAAVQ,UAAU;IACVC,YAAY,GAAAT,IAAA,CAAZS,YAAY;IACZC,WAAW,GAAAV,IAAA,CAAXU,WAAW;IACXC,QAAQ,GAAAX,IAAA,CAARW,QAAQ;IACRC,UAAU,GAAAZ,IAAA,CAAVY,UAAU;IACVC,sBAAsB,GAAAb,IAAA,CAAtBa,sBAAsB;IACtBC,qBAAqB,GAAAd,IAAA,CAArBc,qBAAqB;IACrBC,MAAM,GAAAf,IAAA,CAANe,MAAM;IACNC,uBAAuB,GAAAhB,IAAA,CAAvBgB,uBAAuB;IACvBC,MAAM,GAAAjB,IAAA,CAANiB,MAAM;IACNC,qBAAqB,GAAAlB,IAAA,CAArBkB,qBAAqB;IACrBC,EAAE,GAAAnB,IAAA,CAAFmB,EAAE;IACFC,UAAU,GAAApB,IAAA,CAAVoB,UAAU;IACPC,IAAI,GAAAC,wBAAA,CAAAtB,IAAA,EAAAuB,SAAA;EAEjD;EACA,IAAMtC,KAAK,GAAGrC,QAAQ,CAAC,CAAC;EACxB,IAAM4E,QAAQ,GAAGxD,kBAAkB,CAAC,CAAC;EACrC,IAAMyD,aAAa,GAAG/E,KAAK,CAACgF,MAAM,CAAM,IAAI,CAAC;EAC7C,IAAMC,iBAAiB,GAAGjF,KAAK,CAACgF,MAAM,CAAS,CAAC,CAAC;EACjD,IAAAE,eAAA,GAA8ClF,KAAK,CAACmF,QAAQ,CAAS,CAAC,CAAC,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAH,eAAA;IAAjEI,eAAe,GAAAF,gBAAA;IAAEG,kBAAkB,GAAAH,gBAAA;EAC1C,IAAAI,gBAAA,GAA4CxF,KAAK,CAACmF,QAAQ,CAAU,KAAK,CAAC;IAAAM,gBAAA,GAAAJ,cAAA,CAAAG,gBAAA;IAAnEE,cAAc,GAAAD,gBAAA;IAAEE,iBAAiB,GAAAF,gBAAA;EACxC,IAAAG,gBAAA,GAA4B5F,KAAK,CAACmF,QAAQ,CAAc,IAAI,CAAC;IAAAU,gBAAA,GAAAR,cAAA,CAAAO,gBAAA;IAAtDE,MAAM,GAAAD,gBAAA;IAAEE,SAAS,GAAAF,gBAAA;EACxB;EACA;EACA,IAAAG,gBAAA,GAAwBhG,KAAK,CAACmF,QAAQ,CAAU,KAAK,CAAC;IAAAc,gBAAA,GAAAZ,cAAA,CAAAW,gBAAA;IAA/CE,IAAI,GAAAD,gBAAA;IAAEE,OAAO,GAAAF,gBAAA;EAEpB,IAAMG,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAA,EAAS;IAC9B,IAAG5B,qBAAqB,EACxB;MACE,IAAM6B,GAAG,GAAGhG,KAAK,CAACuD,KAAK,CAAC;MACxB,OAAOyC,GAAG,CAACC,IAAI,CAAC,CAAC,GAAG,KAAK,GAAGD,GAAG,CAACE,OAAO,CAAC,CAAC;IAC3C,CAAC,MAEC,OAAOlG,KAAK,CAACuD,KAAK,CAAC,CAAC4C,MAAM,CAAC1C,UAAU,GAAGA,UAAU,GAAG,eAAe,CAAC;EACzE,CAAC;EACD;AACF;AACA;EACE9D,KAAK,CAACyG,SAAS,CAAC,YAAM;IACpB,IAAI7C,KAAK,EAAEkB,QAAQ,CAAC4B,OAAO,CAAC9C,KAAK,GAAGwC,iBAAiB,CAAC,CAAC;EACzD,CAAC,EAAE,CAACxC,KAAK,CAAC,CAAC;EAEX,SAAS+C,cAAcA,CAACC,SAAiB,EAAgB;IACvD,OAAOC,QAAQ,CAACC,sBAAsB,CAAC3D,4BAA4B,GAAGyD,SAAS,CAAC,CAAC,CAAC,CAAC;EACrF;EAEA5G,KAAK,CAACyG,SAAS,CAAC,YAAM;IACpB,IAAIf,cAAc,EAAE;MAAA,IAAAqB,qBAAA;MAClB;MACA;MACA,IAAMC,YAAY,GAAGH,QAAQ,CAACC,sBAAsB,CAAC,uCAAuC,CAAC,CAAC,CAAC,CAAgB;MAC/G,IAAMG,cAAc,GAAGD,YAAY,aAAZA,YAAY,wBAAAD,qBAAA,GAAZC,YAAY,CAAEE,aAAa,cAAAH,qBAAA,uBAA3BA,qBAAA,CAA6BG,aAAa;MACjE,IAAIF,YAAY,IAAIC,cAAc,EAAEA,cAAc,CAACE,SAAS,GAAGH,YAAY,CAACI,SAAS,GAAG,CAAC,GAAGJ,YAAY,CAACK,YAAY;IACvH;EACF,CAAC,EAAE,CAAC3B,cAAc,CAAC,CAAC;EAEpB1F,KAAK,CAACyG,SAAS,CAAC,YAAM;IACpB,IAAGjC,qBAAqB,IAAI0B,IAAI,EAChC;MACE,IAAMoB,OAAO,GAAGX,cAAc,CAAC,SAAS,CAAC;MACzC,IAAMY,OAAO,GAAG,SAAVA,OAAOA,CAAIC,KAAoB,EAAK;QACxC,QAAOA,KAAK,CAACC,GAAG;UAEd,KAAK,GAAG;UACR,KAAK,OAAO;YACV,IAAMC,QAAQ,GAAGf,cAAc,CAAC1B,iBAAiB,CAACyB,OAAO,GAAG,EAAE,CAAC;YAC/DgB,QAAQ,CAACC,KAAK,CAAC,CAAC;YAChB;UAEF,KAAK,WAAW;YACd,IAAG1C,iBAAiB,CAACyB,OAAO,GAAG,CAAC,EAChC;cACE,IAAMgB,SAAQ,GAAGf,cAAc,CAAC1B,iBAAiB,CAACyB,OAAO,GAAG,EAAE,CAAC;cAC/D,IAAMkB,SAAS,GAAGjB,cAAc,CAAE1B,iBAAiB,CAACyB,OAAO,GAAG,CAAC,GAAI,EAAE,CAAC;cACtE,IAAGkB,SAAS,EACZ;gBACEF,SAAQ,CAACG,QAAQ,GAAG,CAAC,CAAC;gBACtBD,SAAS,CAACC,QAAQ,GAAG,CAAC;gBACtBD,SAAS,CAAC9E,KAAK,CAAC,CAAC;gBACjBmC,iBAAiB,CAACyB,OAAO,GAAGzB,iBAAiB,CAACyB,OAAO,GAAG,CAAC;cAC3D;YACF;YACA;UAEF,KAAK,YAAY;YACf,IAAGzB,iBAAiB,CAACyB,OAAO,GAAG,CAAC,EAChC;cACE,IAAMgB,UAAQ,GAAGf,cAAc,CAAC1B,iBAAiB,CAACyB,OAAO,GAAG,EAAE,CAAC;cAC/D,IAAMoB,KAAK,GAAGnB,cAAc,CAAE1B,iBAAiB,CAACyB,OAAO,GAAG,CAAC,GAAI,EAAE,CAAC;cAClE,IAAGoB,KAAK,EACR;gBACEJ,UAAQ,CAACG,QAAQ,GAAG,CAAC,CAAC;gBACtBC,KAAK,CAACD,QAAQ,GAAG,CAAC;gBAClBC,KAAK,CAAChF,KAAK,CAAC,CAAC;gBACbmC,iBAAiB,CAACyB,OAAO,GAAGzB,iBAAiB,CAACyB,OAAO,GAAG,CAAC;cAC3D;YACF;YACA;QACJ;MACF,CAAC;MAEDY,OAAO,CAACS,gBAAgB,CAAC,SAAS,EAAER,OAAO,CAAC;MAC5C;MACA;;MAEA,IAAMS,eAAe,GAAGrB,cAAc,CAAC,WAAW,CAAC;MACnD,IAAGqB,eAAe,EAAE;QAClB,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAG,CAAC,EAAEA,CAAC,EAAE,EAAE;UAC1B,IAAGD,eAAe,CAACE,SAAS,CAACC,QAAQ,CAAC,GAAG,GAAGF,CAAC,CAAC,EAAE;YAC9ChD,iBAAiB,CAACyB,OAAO,GAAGuB,CAAC;YAC7B;UACF;QACF;QACAD,eAAe,CAACI,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC;MAC/C,CAAC,MAED;QACE,IAAMC,YAAY,GAAG1B,cAAc,CAAC,GAAG,CAAC;QACxC,IAAG0B,YAAY,EAAE;UACfpD,iBAAiB,CAACyB,OAAO,GAAG,CAAC;UAC7B2B,YAAY,CAACD,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC;QAC5C;MACF;MAEA,OAAO,YAAM;QACXd,OAAO,CAACgB,mBAAmB,CAAC,SAAS,EAAEf,OAAO,CAAC;MACjD,CAAC;IACH;EACF,CAAC,EAAE,CAAC/C,qBAAqB,EAAE0B,IAAI,CAAC,CAAC;;EAEjC;EACA;EACAlG,KAAK,CAACyG,SAAS,CAAC,YAAM;IACpB,IAAIX,MAAM,EAAE;MACVf,aAAa,CAAC2B,OAAO,CAACP,OAAO,CAAC,IAAI,CAAC;MACnC;IACF;EACF,CAAC,EAAE,CAACL,MAAM,CAAC,CAAC;EAEZ9F,KAAK,CAACuI,mBAAmB,CAAChF,GAAG,EAAE;IAAA,OAAMuB,QAAQ,CAAC4B,OAAO;EAAA,GAAE,CAAC5B,QAAQ,CAAC,CAAC;EAElE,IAAM0D,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAA,EAAS;IAAA,IAAAC,iBAAA;IAChC,CAAAA,iBAAA,GAAA3D,QAAQ,CAAC4B,OAAO,cAAA+B,iBAAA,uBAAhBA,iBAAA,CAAkBC,IAAI,CAAC,CAAC;IACxBvC,OAAO,CAAC,KAAK,CAAC;EAChB,CAAC;EAED,IAAMwC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAA,EAAS;IAC/B,IAAI7C,MAAM,EAAEC,SAAS,CAAC,IAAI,CAAC;IAC3BI,OAAO,CAAC,IAAI,CAAC;EACf,CAAC;EAED,IAAIyC,OAAO,GAAG,IAAIC,IAAI,CAACjF,KAAK,IAAI,IAAIiF,IAAI,CAACjF,KAAK,CAAC,GAAG,IAAIiF,IAAI,CAAC,CAAC,GAAG,IAAIA,IAAI,CAACjF,KAAK,CAAC,GAAG,IAAIiF,IAAI,CAAC,CAAC,CAAC;EAC5FD,OAAO,CAACE,WAAW,CAACF,OAAO,CAACG,WAAW,CAAC,CAAC,IAAI3E,qBAAqB,aAArBA,qBAAqB,cAArBA,qBAAqB,GAAI,EAAE,CAAC,CAAC;;EAE1E;EACA;EACA,IAAI4E,OAAO,GAAG,IAAIH,IAAI,CAACjF,KAAK,IAAI,IAAIiF,IAAI,CAACjF,KAAK,CAAC,GAAG,IAAIiF,IAAI,CAAC,CAAC,GAAG,IAAIA,IAAI,CAACjF,KAAK,CAAC,GAAG,IAAIiF,IAAI,CAAC,CAAC,CAAC;EAC5F,IAAMI,WAAW,GAAGC,IAAI,CAACC,KAAK,CAAC,CAACH,OAAO,CAACD,WAAW,CAAC,CAAC,IAAI5E,sBAAsB,aAAtBA,sBAAsB,cAAtBA,sBAAsB,GAAI,EAAE,CAAC,IAAI,CAAC,CAAC;EAE5F,IAAMiF,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,CAAsC,EAAK;IAChE,IAAIA,CAAC,CAAC5B,GAAG,KAAK,QAAQ,IAAI4B,CAAC,CAAC5B,GAAG,KAAK,KAAK,EACvC1C,aAAa,CAAC2B,OAAO,CAACP,OAAO,CAAC,KAAK,CAAC;EACxC,CAAC;EAED,IAAMmD,UAAU,GAAG,SAAbA,UAAUA,CAAID,CAAmC,EAAK;IAC1D;IACA,IAAI,CAACA,CAAC,CAACE,aAAa,CAACC,QAAQ,CAACH,CAAC,CAACI,aAAa,CAAC,EAAE;MAC9ClF,MAAM,IAAIA,MAAM,CAAC8E,CAAC,CAAC;IACrB;EACF,CAAC;EACD,IAAMK,QAAQ,GAAG,EAAE;EAEnB,oBACE/H,KAAA,CAAAE,SAAA;IAAA8H,QAAA,gBAEElI,IAAA,CAACK,mBAAmB;MAAC8H,cAAc,EAAEpF,qBAAsB;MAAC,eAAaE,UAAW;MAAClC,WAAW,EAAEkD,cAAe;MAACtD,OAAO,EAAEiC,MAAM,IAAI,EAAG;MAACE,MAAM,EAAE+E,UAAW;MAAAK,QAAA,eAC1JlI,IAAA,CAACtB,UAAU;QACToD,GAAG,EAAEwB,aAAc;QACnB8E,cAAc,EAAElB,kBAAmB;QACnCmB,eAAe,EAAEtB,mBAAoB;QACrCuB,SAAS,EAAEX,aAAc;QACzB3E,EAAE,EAAEA,EAAG;QACPuF,cAAc,EAAE,SAAAA,eAAA;UAAA,OAAMjF,aAAa,CAAC2B,OAAO,CAACP,OAAO,CAAC,KAAK,CAAC;QAAA,CAAC;QAE3DzC,QAAQ,EAAE,SAAAA,SAAC2F,CAAM,EAAK;UACpB,IAAI3F,SAAQ,EAAE;YACZ,IAAIgC,cAAc,EAAE;cAClB,IAAMuE,OAAO,GAAG,IAAIpB,IAAI,CAAC,CAAC;cAC1BoB,OAAO,CAACnB,WAAW,CAACO,CAAC,CAACN,WAAW,CAAC,CAAC,CAAC;cACpCkB,OAAO,CAACC,QAAQ,CAAC5E,eAAe,CAAC;cACjCS,SAAS,CAACkE,OAAO,CAAC;YACpB,CAAC,MAAMvG,SAAQ,CAAC2F,CAAC,CAAC;UACpB;UACA,IAAI3D,cAAc,EAAEC,iBAAiB,CAAC,KAAK,CAAC;QAC9C,CAAE;QACFnC,QAAQ,EAAEA,QAAQ,IAAIC,QAAS;QAC/B0G,MAAM,EAAE/J,EAAG;QACXoE,qBAAqB,EAAEA,qBAAsB;QAC7CV,UAAU,EAAEU,qBAAqB,GAAG,WAAW,GAAG4F,SAAU;QAC5DC,cAAc,EAAE3E;QAChB;QAAA;QACA4E,cAAc,EAAE5E,cAAc,GAAGuD,WAAW,GAAGmB,SAAU;QACzDxB,OAAO,EAAElD,cAAc,GAAGkD,OAAO,GAAGwB,SAAU;QAC9CG,QAAQ,EAAE3G,KAAM;QAChB4G,UAAU,EAAE1E,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIsE,SAAU;QAChCK,kBAAkB,EAAE,IAAK;QACzBC,mBAAmB,EAAE,IAAK;QAC1BC,kBAAkB,EAChBzG,UAAU,GACN,UAAC0G,MAAwC;UAAA,oBACzC5K,KAAK,CAAC6K,aAAa,CACjBlK,qBAAqB,EAAAmK,aAAA,CAAAA,aAAA,KAEhBF,MAAM;YACTrF,kBAAkB,EAAlBA,kBAAkB;YAClBwF,iBAAiB,EAAE,CAAC;YACpBrF,cAAc,EAAEA,cAAc;YAC9BC,iBAAiB,EAAEA;UAAiB,IAEtC,IACF,CAAC;QAAA,IACDyE,SACL;QACDY,WAAW,eACTrJ,KAAA,CAACT,YAAY;UAAC+J,SAAS,EAAEzH,QAAS;UAAC0H,SAAS,EAAEzH,QAAS;UAAAkG,QAAA,gBACrDhI,KAAA,CAACoB,aAAa;YAAA4G,QAAA,gBACVlI,IAAA,CAACwB,uBAAuB,EAAA6H,aAAA;cACtBvH,GAAG,EAAEuB,QAAS;cACdqG,IAAI,EAAC,MAAM;cACXC,IAAI,EAAC,YAAY;cACjBrB,SAAS,EAAE,SAAAA,UAACV,CAAC;gBAAA,OAAKA,CAAC,CAAC5B,GAAG,KAAK,OAAO,IAAI1C,aAAa,CAAC2B,OAAO,CAACP,OAAO,CAAC,IAAI,CAAC;cAAA,CAAC;cAC3EkF,SAAS,EAAG1H,OAAO,GAAG,SAAS,GAAG,EAAE,IAAIuC,IAAI,GAAG,OAAO,GAAG,EAAE,CAAG;cAC9D2B,QAAQ,EAAErE,QAAQ,IAAIC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;cACxC6H,OAAO,EAAE,SAAAA,QAACjC,CAAC;gBAAA,IAAAkC,kBAAA;gBAAA,QAAAA,kBAAA,GAAKzG,QAAQ,CAAC4B,OAAO,cAAA6E,kBAAA,uBAAhBA,kBAAA,CAAkBC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC;cAAA,CAAC;cAC1DzH,YAAY,EAAEA,YAAa;cAC3BC,WAAW,EAAEA,WAAY;cACzByH,kBAAkB,EAAE/B,QAAS;cAC7BlG,QAAQ,EAAEA,QAAS;cACnBC,QAAQ,EAAE,IAAK;cACfiI,uBAAuB,EAAE,CAACjI,QAAS;cACnCQ,QAAQ,EAAEA;YAAS,GACfU,IAAI,CACT,CAAC,eACFlD,IAAA,CAACmB,WAAW;cAAA+G,QAAA,eACVlI,IAAA,CAACf,WAAW,CAACiL,QAAQ;gBAACC,IAAI,EAAC;cAAI,CAAC;YAAC,CACtB,CAAC;UAAA,CACD,CAAC,EACjB,CAAC1F,IAAI,iBAAIzE,IAAA,CAACV,eAAe;YAAC8K,QAAQ,EAAEvH,uBAAwB;YAACwH,KAAK,EAAEhH,QAAS;YAACiH,SAAS,EAAE,IAAK;YAACC,QAAQ,EAAC,MAAM;YAACJ,IAAI,EAAErK,IAAI,CAACmB,KAAM;YAACuJ,KAAK,EAAC,KAAK;YAAAtC,QAAA,EAC1IvD,iBAAiB,CAAC;UAAC,CACL,CAAC;QAAA,CACN;MACf,CACF;IAAC,CACiB,CAAC,EAGrBvC,iBAAiB,iBAChBlC,KAAA,CAACX,YAAY;MAAA2I,QAAA,gBACXlI,IAAA,CAACf,WAAW,CAACwL,gBAAgB;QAACC,KAAK,EAAE1L,MAAM,CAAC6B,QAAQ,CAAC,cAAc,EAAEC,KAAK;MAAE,CAAC,CAAC,eAC9Ed,IAAA;QAAAkI,QAAA,EAAO9F;MAAiB,CAAO,CAAC;IAAA,CACpB,CACf;EAAA,CACD,CAAC;AAEP,CAAC,CAAC;AAACT,eAAA,CAAAgJ,SAAA;EA9nBDxI,KAAK,EAAAyI,GAAA,CAAAC,UAAA,CAAAzD,IAAA;EAELnF,QAAQ,EAAA2I,GAAA,CAAAE,IAAA;EAERhI,MAAM,EAAA8H,GAAA,CAAAE,IAAA;EAIN/H,qBAAqB,EAAA6H,GAAA,CAAAG,IAAA;EAErB7I,OAAO,EAAA0I,GAAA,CAAAG,IAAA;EAIP1I,UAAU,EAAAuI,GAAA,CAAAI,MAAA;EAEV5I,iBAAiB,EAAAwI,GAAA,CAAAI,MAAA;EAEjB1I,YAAY,EAAAsI,GAAA,CAAAI,MAAA;EAEZzI,WAAW,EAAAqI,GAAA,CAAAI,MAAA;EAEXvI,UAAU,EAAAmI,GAAA,CAAAG,IAAA;EAEVrI,sBAAsB,EAAAkI,GAAA,CAAAK,MAAA;EAEtBtI,qBAAqB,EAAAiI,GAAA,CAAAK,MAAA;EAErBrI,MAAM,EAAAgI,GAAA,CAAAI,MAAA;EAENnI,uBAAuB,EAAA+H,GAAA,CAAAM,KAAA,EAAG,KAAK,EAAG,QAAQ;AAAA;AAkmB5C,eAAevJ,eAAe","ignoreList":[]}
+{"version":3,"file":"DatepickerField.js","names":["React","styled","useTheme","DatePicker","en","dayjs","advancedFormat","quarterOfYear","extend","COLORS","SystemIcons","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","TooltipOverflow","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","Size","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DatePickerContainer","div","_templateObject","_taggedTemplateLiteral","dropdown","props","$margin","concat","getColor","theme","$yearPicker","Bold","Small","Regular","IconWrapper","_templateObject2","focus","DatepickerRow","_templateObject3","StyledInputFieldStyling","_templateObject4","quarterComponentsClassPrefix","DatepickerField","forwardRef","_ref","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearPicker","yearsBeforeCurrentDate","yearsAfterCurrentDate","margin","overflowTooltipPosition","onBlur","showQuarterYearPicker","id","dataTestId","rest","_objectWithoutProperties","_excluded","inputRef","datepickerRef","useRef","focusedQuarterRef","_React$useState","useState","_React$useState2","_slicedToArray","activeMonthPage","setActiveMonthPage","_React$useState3","_React$useState4","yearPickerMode","setYearPickerMode","_React$useState5","_React$useState6","openAt","setOpenAt","_React$useState7","_React$useState8","open","setOpen","getFormattedValue","val","year","quarter","format","useEffect","current","getQuarterItem","classname","document","getElementsByClassName","_selectedDate$parentE","selectedDate","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","wrapper","handler","event","key","currentQ","click","previousQ","tabIndex","nextQ","addEventListener","selectedQuarter","i","innerText","includes","setAttribute","firstQuarter","removeEventListener","useImperativeHandle","handleCalendarClose","_inputRef$current","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","handleBlur","currentTarget","contains","relatedTarget","iconSize","children","$quarterPicker","onCalendarOpen","onCalendarClose","onKeyDown","onClickOutside","newDate","setMonth","locale","undefined","showYearPicker","yearItemNumber","selected","openToDate","preventOpenOnFocus","shouldCloseOnSelect","renderCustomHeader","params","createElement","_objectSpread","customHeaderCount","customInput","$disabled","$readOnly","type","name","className","onFocus","_inputRef$current2","setSelectionRange","$extraRightPadding","$suppressReadOnlyStyles","Calendar","size","position","input","withArrow","maxWidth","align","TechnicalWarning","color","propTypes","_pt","instanceOf","func","bool","string","number","oneOf"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { useTheme } from 'styled-components';\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport dayjs from 'dayjs';\nimport advancedFormat  from 'dayjs/plugin/advancedFormat';\nimport quarterOfYear from \"dayjs/plugin/quarterOfYear\";\n\ndayjs.extend(advancedFormat);\ndayjs.extend(quarterOfYear);\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {SystemIcons} from '../icons';\nimport {DatepickerFieldHeader} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\n/**\n * Import custom styles.\n */\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {useFocusVisibleRef} from '../common';\nimport {Size, Testable} from '../types';\n\n/**\n * Add custom types.\n */\nexport type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n  /** Optional. Selected date. Defaults to current date */\n  value?: Date;\n  /** Optional. Handler to be called when selected date was changed. */\n  onChange?: (date: Date) => void;\n  /** Optional. Handler to be called when control is losing focus. */\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n  /** Optional. Quarter picker mode. If set, then user can not select a particular date, but quarter of the year.\n   * 1st day of the quarter will be set as value.\n   */\n  showQuarterYearPicker?: boolean;\n  /** Optional. If set, then input field will be shown in 'invalid' state */\n  invalid?: boolean;\n  /** Optional. Format in which date will be shown in the input field. Defaults to 'MMMM Do, yyyy'. \n   * For quarter picker will be shown in 'YYYY, qqq' format.\n   */\n  dateFormat?: string;\n  /** Optional. Validation message to be shown under the input field */\n  validationMessage?: string;\n  /** Optional. Value for 'autocomplete' attribute of input field tag. */\n  autoComplete?: string;\n  /** Optional. Placeholder text to be shown when no value is selected. */\n  placeholder?: string;\n  /** Optional. If set, then user will be able to open year selector by clicking on the month in the dropdown. */\n  yearPicker?: boolean;\n  /** Optional. How many years before current year will be available in the year selector mode. */\n  yearsBeforeCurrentDate?: number;\n  /** Optional. How many years after current year will be available in the year selector mode. */\n  yearsAfterCurrentDate?: number;\n  /** Optional. Margin value to be set to the dropdown container. */\n  margin?: string;\n  /** Optional. Position where to show tooltip in case of closed datepicker and value overflowing the input field. */\n  overflowTooltipPosition?: 'top' | 'bottom';\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ $yearPicker: boolean; $margin: string; $quarterPicker?: boolean }>`\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\n  }\n\n  .react-datepicker-popper[data-placement^=bottom] {\n    padding-top: 0px;\n  }\n\n  \n  .react-datepicker-popper[data-placement^=top] {\n    padding-bottom: 0px;\n  }\n\n  > div {\n    display: block;\n\n    ${(props) => (props.$margin ? `margin: ${props.$margin};` : '')}\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 48px;\n      width: 48px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ${props => COLORS.getColor('primary_20', props.theme)};\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ${focusStyles}\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ${props => COLORS.getColor('neutral_20', props.theme)};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${props => COLORS.getColor('neutral_200', props.theme)};\n      background: ${props => COLORS.getColor('neutral_20', props.theme)};\n      height: ${(props) => (!props.$yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker-year-header {\n      height: 48px;\n      line-height: 48px !important;\n      align-items: center;\n\n      ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ${props => ComponentSStyling(ComponentTextStyle.Bold, COLORS.getColor('neutral_600', props.theme))}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling(Size.Small)}\n    }\n\n    .react-datepicker__quarter-wrapper{\n      width: 100%;\n      display: flex;\n      align-content: space-evenly;\n      flex-wrap: wrap;\n      align-items: center;\n      gap: 20px;\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__navigation-icon {\n      display: none;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\n    }\n\n    \n\n    .react-datepicker__year-text {\n      background: ${props => COLORS.getColor('white', props.theme)};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${props => COLORS.getColor('neutral_600', props.theme)};\n        background: ${props => COLORS.getColor('white', props.theme)};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\n        background: ${props => COLORS.getColor('primary_20', props.theme)};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${props => COLORS.getColor('white', props.theme)} !important;\n        background: ${props => COLORS.getColor('primary_500', props.theme)} !important;\n      }\n    }\n\n    .react-datepicker__day, .react-datepicker__quarter-text {\n      background: ${props => COLORS.getColor('white', props.theme)};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      flex-grow: 1;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('neutral_600', props.theme))}\n      &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\n        color: ${props => COLORS.getColor('neutral_600', props.theme)};\n        background: ${props => COLORS.getColor('white', props.theme)};\n        flex-grow: 1;\n        font-weight: 400;\n        border: none;\n      }\n\n      &.react-datepicker__quarter--selected {\n        color: ${props => COLORS.getColor('white', props.theme)} !important;\n        flex-grow: 1;\n        background: ${props => COLORS.getColor('primary_500', props.theme)} !important;\n      }\n\n      &:hover {\n        color: ${props => COLORS.getColor('primary_700', props.theme)};\n        background: ${props => COLORS.getColor('primary_20', props.theme)};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${props => COLORS.getColor('white', props.theme)} !important;\n        background: ${props => COLORS.getColor('primary_500', props.theme)} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${props => COLORS.getColor('neutral_700', props.theme)};\n        background: ${props => COLORS.getColor('neutral_100', props.theme)};\n\n        &:hover {\n          color: ${props => COLORS.getColor('primary_700', props.theme)};\n          background: ${props => COLORS.getColor('primary_20', props.theme)};\n        }\n\n        &:focus {\n          ${focusStyles}\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  left: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${+Z_INDEXES.focus + 1};\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  padding-left: 48px !important;\n  \n  &::placeholder {\n    color: ${props => COLORS.getColor('neutral_500', props.theme)};\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_300', props.theme)};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_200', props.theme)};\n\n    ::placeholder {\n      color: ${props => COLORS.getColor('primary_700', props.theme)};\n    }\n\n    cursor: pointer;\n    background-color: ${props => COLORS.getColor('primary_20', props.theme)};\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${props => COLORS.getColor('primary_300', props.theme)};\n    background-color: ${props => COLORS.getColor('primary_100', props.theme)};\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\n\n    ::placeholder {\n      color: ${props => COLORS.getColor('primary_800', props.theme)};\n    }\n  }\n  \n  &:disabled {\n    background-color: ${props => COLORS.getColor('white', props.theme)};\n  }\n\n  & ~ ${IconWrapper}{\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${props => COLORS.getColor('primary_700', props.theme)};\n  }\n\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n    color: ${props => COLORS.getColor('primary_800', props.theme)};\n  }\n\n  &[tabindex='-1'] ~ ${IconWrapper} {\n    color: ${props => COLORS.getColor('neutral_300', props.theme)};\n  }\n`;\n\nconst quarterComponentsClassPrefix = 'react-datepicker__quarter-';\n\nconst DatepickerField = React.forwardRef<HTMLInputElement, DatepickerFieldProps>(({\n                                            disabled,\n                                            readOnly,\n                                            onChange,\n                                            invalid,\n                                            value,\n                                            validationMessage,\n                                            dateFormat,\n                                            autoComplete,\n                                            placeholder,\n                                            required,\n                                            yearPicker,\n                                            yearsBeforeCurrentDate,\n                                            yearsAfterCurrentDate,\n                                            margin,\n                                            overflowTooltipPosition,\n                                            onBlur,\n                                            showQuarterYearPicker,\n                                            id,\n                                            dataTestId,\n                                            ...rest\n                                          }: DatepickerFieldProps, ref) => {\n  // Globally used variables within the component\n  const theme = useTheme();\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\n  const focusedQuarterRef = React.useRef<number>(1);\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\n  // 'open' flag is used only for tracking current state of the dropdown,\n  // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  const getFormattedValue = () => {\n    if(showQuarterYearPicker)\n    {\n      const val = dayjs(value);\n      return val.year() + ', Q' + val.quarter();\n    }\n    else \n      return dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = getFormattedValue();\n  }, [value]);\n\n  function getQuarterItem(classname: string) : HTMLElement {\n    return document.getElementsByClassName(quarterComponentsClassPrefix + classname)[0] as HTMLElement;\n  }\n\n  React.useEffect(() => {\n    if (yearPickerMode) {\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n    }\n  }, [yearPickerMode]);\n\n  React.useEffect(() => {\n    if(showQuarterYearPicker && open)\n    {\n      const wrapper = getQuarterItem('wrapper');\n      const handler = (event: KeyboardEvent) => {\n        switch(event.key)\n        {\n          case ' ':\n          case 'Enter':\n            const currentQ = getQuarterItem(focusedQuarterRef.current + '');\n            currentQ.click();\n            break;\n\n          case 'ArrowLeft':\n            if(focusedQuarterRef.current > 1)\n            {\n              const currentQ = getQuarterItem(focusedQuarterRef.current + '');\n              const previousQ = getQuarterItem((focusedQuarterRef.current - 1) + '');\n              if(previousQ)\n              {\n                currentQ.tabIndex = -1;\n                previousQ.tabIndex = 0;\n                previousQ.focus();\n                focusedQuarterRef.current = focusedQuarterRef.current - 1;\n              }\n            }\n            break;\n\n          case 'ArrowRight':\n            if(focusedQuarterRef.current < 4)\n            {\n              const currentQ = getQuarterItem(focusedQuarterRef.current + '');\n              const nextQ = getQuarterItem((focusedQuarterRef.current + 1) + '');\n              if(nextQ)\n              {\n                currentQ.tabIndex = -1;\n                nextQ.tabIndex = 0;\n                nextQ.focus();\n                focusedQuarterRef.current = focusedQuarterRef.current + 1;\n              }\n            }\n            break;\n        }\n      };\n\n      wrapper.addEventListener('keydown', handler);\n      //unfortunately since there are no efs, and quarter picker is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      \n      const selectedQuarter = getQuarterItem('-selected');\n      if(selectedQuarter) {\n        for (let i = 1; i < 5; i++) {\n          if(selectedQuarter.innerText.includes('Q' + i)) {\n            focusedQuarterRef.current = i;\n            break;\n          }\n        }\n        selectedQuarter.setAttribute(\"tabIndex\", \"0\");\n      }\n      else\n      {\n        const firstQuarter = getQuarterItem('1');\n        if(firstQuarter) {\n          focusedQuarterRef.current = 1;\n          firstQuarter.setAttribute(\"tabIndex\", \"0\");\n        }\n      }\n\n      return () => {\n        wrapper.removeEventListener('keydown', handler);\n      };\n    }\n  }, [showQuarterYearPicker, open]);\n\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n  //otherwise after year selection datepicker will show January month of the selected year\n  React.useEffect(() => {\n    if (openAt) {\n      datepickerRef.current.setOpen(true);\n      //setOpenAt(null);\n    }\n  }, [openAt]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleCalendarClose = () => {\n    inputRef.current?.blur();\n    setOpen(false);\n  };\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n  //itemsNumber - controls number of year select options generated in the dropdown\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape' || e.key === 'Esc')\n      datepickerRef.current.setOpen(false);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n  const iconSize = 24;\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer $quarterPicker={showQuarterYearPicker} data-testid={dataTestId} $yearPicker={yearPickerMode} $margin={margin || ''} onBlur={handleBlur}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          onKeyDown={handleKeyDown}\n          id={id}\n          onClickOutside={() => datepickerRef.current.setOpen(false)}\n\n          onChange={(e: any) => {\n            if (onChange) {\n              if (yearPickerMode) {\n                const newDate = new Date();\n                newDate.setFullYear(e.getFullYear());\n                newDate.setMonth(activeMonthPage);\n                setOpenAt(newDate);\n              } else onChange(e);\n            }\n            if (yearPickerMode) setYearPickerMode(false);\n          }}\n          disabled={disabled || readOnly}\n          locale={en}\n          showQuarterYearPicker={showQuarterYearPicker}\n          dateFormat={showQuarterYearPicker ? \"yyyy, QQQ\" : undefined}\n          showYearPicker={yearPickerMode}\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n          maxDate={yearPickerMode ? maxDate : undefined}\n          selected={value}\n          openToDate={openAt ?? undefined}\n          preventOpenOnFocus={true}\n          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: ReactDatePickerCustomHeaderProps) =>\n                React.createElement(\n                  DatepickerFieldHeader,\n                  {\n                    ...params,\n                    setActiveMonthPage,\n                    customHeaderCount: 0,\n                    yearPickerMode: yearPickerMode,\n                    setYearPickerMode: setYearPickerMode,\n                  },\n                  null,\n                )\n              : undefined\n          }\n          customInput={\n            <InputWrapper $disabled={disabled} $readOnly={readOnly}>\n              <DatepickerRow>\n                  <StyledInputFieldStyling\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n                    className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n                    tabIndex={disabled || readOnly ? -1 : 0}\n                    onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    $extraRightPadding={iconSize}\n                    disabled={disabled}\n                    readOnly={true}\n                    $suppressReadOnlyStyles={!readOnly}\n                    required={required}\n                    {...rest}\n                  />\n                  <IconWrapper>\n                    <SystemIcons.Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              {!open && <TooltipOverflow position={overflowTooltipPosition} input={inputRef} withArrow={true} maxWidth=\"100%\" size={Size.Small} align='end'>\n                {getFormattedValue()}\n              </TooltipOverflow>}\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <SystemIcons.TechnicalWarning color={COLORS.getColor('critical_400', theme)}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default DatepickerField;\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/DatepickerFieldHeader.cjs

@@ -15,8 +15,8 @@ var _common = require("../common");
 var _styles = require("../styles");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
-/**
- * Import react libraries.
+/**
+ * Import react libraries.
  */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }

package/dist/InputFields/DatepickerFieldHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerFieldHeader.cjs","names":["React","_interopRequireWildcard","require","_icons","_styledComponents","_interopRequireDefault","_common","_styles","_jsxRuntime","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","HeaderLabelContainer","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","CommonInteractionStyling","DatepickerFieldHeader","_ref","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","useEffect","jsx","Fragment","children","jsxs","style","display","justifyContent","type","className","onClick","disabled","concat","getFullYear","SystemIcons","ArrowDropUp","size","ArrowDropDown","exports","propTypes","_propTypes","instanceOf","Date","isRequired","customHeaderCount","number","bool","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\r\n * Import react libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { SystemIcons } from '../icons';\r\nimport styled from 'styled-components';\r\nimport { CommonInteractionStyling } from '../common';\r\nimport { COLORS } from '../styles';\r\n\r\nexport interface DatepickerFieldHeaderParams {\r\n  date: Date;\r\n  changeYear(year: number): void;\r\n  changeMonth(month: number): void;\r\n  customHeaderCount: number;\r\n  decreaseMonth(): void;\r\n  increaseMonth(): void;\r\n  prevMonthButtonDisabled: boolean;\r\n  nextMonthButtonDisabled: boolean;\r\n  decreaseYear(): void;\r\n  increaseYear(): void;\r\n  prevYearButtonDisabled: boolean;\r\n  nextYearButtonDisabled: boolean;\r\n  yearPickerMode: boolean;\r\n  setYearPickerMode(val: boolean): void;\r\n  setActiveMonthPage(val: number): void;\r\n}\r\n\r\nconst HeaderLabelContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding-left: 10px;\r\n  cursor: pointer;\r\n\r\n  button {\r\n    background: transparent;\r\n    padding: 0px;\r\n    width: auto;\r\n  }\r\n\r\n  svg {\r\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\r\n  }\r\n\r\n  ${CommonInteractionStyling}\r\n\r\n  &:hover {\r\n    div {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)} !important;\r\n    }\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    div {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)} !important;\r\n    }\r\n    svg {\r\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const DatepickerFieldHeader = ({\r\n  date,\r\n  decreaseMonth,\r\n  increaseMonth,\r\n  prevMonthButtonDisabled,\r\n  nextMonthButtonDisabled,\r\n  setYearPickerMode,\r\n  yearPickerMode,\r\n  setActiveMonthPage,\r\n}: DatepickerFieldHeaderParams) => {\r\n  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\r\n  const handleDecreaseMonth = () => {\r\n    let previousMonth = date.getMonth() - 1;\r\n    if (previousMonth < 0) previousMonth = months.length - 1;\r\n    setActiveMonthPage(previousMonth);\r\n    decreaseMonth();\r\n  };\r\n\r\n  const handleIncreaseMonth = () => {\r\n    let nextMonth = date.getMonth() + 1;\r\n    if (nextMonth >= months.length - 1) nextMonth = 0;\r\n    setActiveMonthPage(nextMonth);\r\n    increaseMonth();\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    setActiveMonthPage(date.getMonth());\r\n  }, [date]);\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        style={{\r\n          display: 'flex',\r\n          justifyContent: 'center',\r\n        }}>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n        <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\r\n          <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\r\n          {yearPickerMode ? <SystemIcons.ArrowDropUp size=\"24px\" /> : <SystemIcons.ArrowDropDown size=\"24px\" />}\r\n        </HeaderLabelContainer>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DatepickerFieldHeader.cjs","names":["React","_interopRequireWildcard","require","_icons","_styledComponents","_interopRequireDefault","_common","_styles","_jsxRuntime","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","HeaderLabelContainer","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","CommonInteractionStyling","DatepickerFieldHeader","_ref","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","useEffect","jsx","Fragment","children","jsxs","style","display","justifyContent","type","className","onClick","disabled","concat","getFullYear","SystemIcons","ArrowDropUp","size","ArrowDropDown","exports","propTypes","_propTypes","instanceOf","Date","isRequired","customHeaderCount","number","bool","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\nimport { SystemIcons } from '../icons';\nimport styled from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport { COLORS } from '../styles';\n\nexport interface DatepickerFieldHeaderParams {\n  date: Date;\n  changeYear(year: number): void;\n  changeMonth(month: number): void;\n  customHeaderCount: number;\n  decreaseMonth(): void;\n  increaseMonth(): void;\n  prevMonthButtonDisabled: boolean;\n  nextMonthButtonDisabled: boolean;\n  decreaseYear(): void;\n  increaseYear(): void;\n  prevYearButtonDisabled: boolean;\n  nextYearButtonDisabled: boolean;\n  yearPickerMode: boolean;\n  setYearPickerMode(val: boolean): void;\n  setActiveMonthPage(val: number): void;\n}\n\nconst HeaderLabelContainer = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 10px;\n  cursor: pointer;\n\n  button {\n    background: transparent;\n    padding: 0px;\n    width: auto;\n  }\n\n  svg {\n    color: ${props => COLORS.getColor('neutral_600', props.theme)};\n  }\n\n  ${CommonInteractionStyling}\n\n  &:hover {\n    div {\n      color: ${props => COLORS.getColor('primary_600', props.theme)} !important;\n    }\n    svg {\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\n    }\n  }\n\n  &:active {\n    div {\n      color: ${props => COLORS.getColor('primary_600', props.theme)} !important;\n    }\n    svg {\n      color: ${props => COLORS.getColor('primary_600', props.theme)};\n    }\n  }\n`;\n\nexport const DatepickerFieldHeader = ({\n  date,\n  decreaseMonth,\n  increaseMonth,\n  prevMonthButtonDisabled,\n  nextMonthButtonDisabled,\n  setYearPickerMode,\n  yearPickerMode,\n  setActiveMonthPage,\n}: DatepickerFieldHeaderParams) => {\n  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n  const handleDecreaseMonth = () => {\n    let previousMonth = date.getMonth() - 1;\n    if (previousMonth < 0) previousMonth = months.length - 1;\n    setActiveMonthPage(previousMonth);\n    decreaseMonth();\n  };\n\n  const handleIncreaseMonth = () => {\n    let nextMonth = date.getMonth() + 1;\n    if (nextMonth >= months.length - 1) nextMonth = 0;\n    setActiveMonthPage(nextMonth);\n    increaseMonth();\n  };\n\n  React.useEffect(() => {\n    setActiveMonthPage(date.getMonth());\n  }, [date]);\n\n  return (\n    <>\n      <div\n        style={{\n          display: 'flex',\n          justifyContent: 'center',\n        }}>\n        {!yearPickerMode && (\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\n          </button>\n        )}\n        <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\n          <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\n          {yearPickerMode ? <SystemIcons.ArrowDropUp size=\"24px\" /> : <SystemIcons.ArrowDropDown size=\"24px\" />}\n        </HeaderLabelContainer>\n        {!yearPickerMode && (\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\n          </button>\n        )}\n      </div>\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAAmC,IAAAM,WAAA,GAAAN,OAAA;AAAA,IAAAO,eAAA;AAPnC;AACA;AACA;AAFA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAV,wBAAAU,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,gBAAAK,OAAA,CAAAL,CAAA,0BAAAA,CAAA,sBAAAA,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,cAAAR,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AA2BA,IAAMW,oBAAoB,GAAGC,4BAAM,CAACC,GAAG,CAAAvB,eAAA,KAAAA,eAAA,OAAAwB,uBAAA,ieAc1B,UAAAC,KAAK;EAAA,OAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAG7DC,gCAAwB,EAIb,UAAAJ,KAAK;EAAA,OAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAGpD,UAAAH,KAAK;EAAA,OAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAMpD,UAAAH,KAAK;EAAA,OAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,GAGpD,UAAAH,KAAK;EAAA,OAAIC,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEF,KAAK,CAACG,KAAK,CAAC;AAAA,EAGlE;AAEM,IAAME,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAAC,IAAA,EASC;EAAA,IARjCC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,aAAa,GAAAF,IAAA,CAAbE,aAAa;IACbC,aAAa,GAAAH,IAAA,CAAbG,aAAa;IACbC,uBAAuB,GAAAJ,IAAA,CAAvBI,uBAAuB;IACvBC,uBAAuB,GAAAL,IAAA,CAAvBK,uBAAuB;IACvBC,iBAAiB,GAAAN,IAAA,CAAjBM,iBAAiB;IACjBC,cAAc,GAAAP,IAAA,CAAdO,cAAc;IACdC,kBAAkB,GAAAR,IAAA,CAAlBQ,kBAAkB;EAElB,IAAMC,MAAM,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,CAAC;EACzI,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAA,EAAS;IAChC,IAAIC,aAAa,GAAGV,IAAI,CAACW,QAAQ,CAAC,CAAC,GAAG,CAAC;IACvC,IAAID,aAAa,GAAG,CAAC,EAAEA,aAAa,GAAGF,MAAM,CAACI,MAAM,GAAG,CAAC;IACxDL,kBAAkB,CAACG,aAAa,CAAC;IACjCT,aAAa,CAAC,CAAC;EACjB,CAAC;EAED,IAAMY,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAA,EAAS;IAChC,IAAIC,SAAS,GAAGd,IAAI,CAACW,QAAQ,CAAC,CAAC,GAAG,CAAC;IACnC,IAAIG,SAAS,IAAIN,MAAM,CAACI,MAAM,GAAG,CAAC,EAAEE,SAAS,GAAG,CAAC;IACjDP,kBAAkB,CAACO,SAAS,CAAC;IAC7BZ,aAAa,CAAC,CAAC;EACjB,CAAC;EAED3C,KAAK,CAACwD,SAAS,CAAC,YAAM;IACpBR,kBAAkB,CAACP,IAAI,CAACW,QAAQ,CAAC,CAAC,CAAC;EACrC,CAAC,EAAE,CAACX,IAAI,CAAC,CAAC;EAEV,oBACE,IAAAjC,WAAA,CAAAiD,GAAA,EAAAjD,WAAA,CAAAkD,QAAA;IAAAC,QAAA,eACE,IAAAnD,WAAA,CAAAoD,IAAA;MACEC,KAAK,EAAE;QACLC,OAAO,EAAE,MAAM;QACfC,cAAc,EAAE;MAClB,CAAE;MAAAJ,QAAA,GACD,CAACZ,cAAc,iBACd,IAAAvC,WAAA,CAAAiD,GAAA;QAAQO,IAAI,EAAC,QAAQ;QAACC,SAAS,EAAC,qEAAqE;QAACC,OAAO,EAAEhB,mBAAoB;QAACiB,QAAQ,EAAEvB;MAAwB,CAC9J,CACT,eACD,IAAApC,WAAA,CAAAoD,IAAA,EAAC9B,oBAAoB;QAACoC,OAAO,EAAE,SAAAA,QAAA;UAAA,OAAMpB,iBAAiB,CAAC,CAACC,cAAc,CAAC;QAAA,CAAC;QAAAY,QAAA,gBACtE,IAAAnD,WAAA,CAAAiD,GAAA;UAAKQ,SAAS,EAAC,iCAAiC;UAAAN,QAAA,KAAAS,MAAA,CAAKnB,MAAM,CAACR,IAAI,CAACW,QAAQ,CAAC,CAAC,CAAC,OAAAgB,MAAA,CAAI3B,IAAI,CAAC4B,WAAW,CAAC,CAAC;QAAA,CAAQ,CAAC,EAC1GtB,cAAc,gBAAG,IAAAvC,WAAA,CAAAiD,GAAA,EAACtD,MAAA,CAAAmE,WAAW,CAACC,WAAW;UAACC,IAAI,EAAC;QAAM,CAAE,CAAC,gBAAG,IAAAhE,WAAA,CAAAiD,GAAA,EAACtD,MAAA,CAAAmE,WAAW,CAACG,aAAa;UAACD,IAAI,EAAC;QAAM,CAAE,CAAC;MAAA,CACjF,CAAC,EACtB,CAACzB,cAAc,iBACd,IAAAvC,WAAA,CAAAiD,GAAA;QAAQO,IAAI,EAAC,QAAQ;QAACC,SAAS,EAAC,iEAAiE;QAACC,OAAO,EAAEZ,mBAAoB;QAACa,QAAQ,EAAEtB;MAAwB,CAC1J,CACT;IAAA,CACE;EAAC,CACN,CAAC;AAEP,CAAC;AAAC6B,OAAA,CAAAnC,qBAAA,GAAAA,qBAAA;AAAAA,qBAAA,CAAAoC,SAAA;EA1GAlC,IAAI,EAAAmC,UAAA,YAAAC,UAAA,CAAAC,IAAA,EAAAC,UAAA;EAGJC,iBAAiB,EAAAJ,UAAA,YAAAK,MAAA,CAAAF,UAAA;EAGjBnC,uBAAuB,EAAAgC,UAAA,YAAAM,IAAA,CAAAH,UAAA;EACvBlC,uBAAuB,EAAA+B,UAAA,YAAAM,IAAA,CAAAH,UAAA;EAGvBI,sBAAsB,EAAAP,UAAA,YAAAM,IAAA,CAAAH,UAAA;EACtBK,sBAAsB,EAAAR,UAAA,YAAAM,IAAA,CAAAH,UAAA;EACtBhC,cAAc,EAAA6B,UAAA,YAAAM,IAAA,CAAAH;AAAA","ignoreList":[]}

package/dist/InputFields/DatepickerFieldHeader.d.ts

@@ -1,22 +1,22 @@
-/**
- * Import react libraries.
- */
-import * as React from 'react';
-export interface DatepickerFieldHeaderParams {
-    date: Date;
-    changeYear(year: number): void;
-    changeMonth(month: number): void;
-    customHeaderCount: number;
-    decreaseMonth(): void;
-    increaseMonth(): void;
-    prevMonthButtonDisabled: boolean;
-    nextMonthButtonDisabled: boolean;
-    decreaseYear(): void;
-    increaseYear(): void;
-    prevYearButtonDisabled: boolean;
-    nextYearButtonDisabled: boolean;
-    yearPickerMode: boolean;
-    setYearPickerMode(val: boolean): void;
-    setActiveMonthPage(val: number): void;
-}
-export declare const DatepickerFieldHeader: ({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, setYearPickerMode, yearPickerMode, setActiveMonthPage, }: DatepickerFieldHeaderParams) => React.JSX.Element;
+/**
+ * Import react libraries.
+ */
+import * as React from 'react';
+export interface DatepickerFieldHeaderParams {
+    date: Date;
+    changeYear(year: number): void;
+    changeMonth(month: number): void;
+    customHeaderCount: number;
+    decreaseMonth(): void;
+    increaseMonth(): void;
+    prevMonthButtonDisabled: boolean;
+    nextMonthButtonDisabled: boolean;
+    decreaseYear(): void;
+    increaseYear(): void;
+    prevYearButtonDisabled: boolean;
+    nextYearButtonDisabled: boolean;
+    yearPickerMode: boolean;
+    setYearPickerMode(val: boolean): void;
+    setActiveMonthPage(val: number): void;
+}
+export declare const DatepickerFieldHeader: ({ date, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, setYearPickerMode, yearPickerMode, setActiveMonthPage, }: DatepickerFieldHeaderParams) => React.JSX.Element;

package/dist/InputFields/DatepickerFieldHeader.js

@@ -1,8 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _templateObject;
-/**
- * Import react libraries.
+/**
+ * Import react libraries.
  */
 import * as React from 'react';
 import { SystemIcons } from '../icons';