@laerdal/life-react-components 2.1.1-dev.4 → 2.1.1-dev.5

package/dist/InputFields/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","className","rest","onKeyPress","e","keyCode","handleClick","Size","Medium","cls","defaultOnMouseDownHandler"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { CheckboxProps } from './types';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            invalid,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readOnly,\n                                                            tabIndexVal,\n                                                            className,\n                                                            ...rest\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readOnly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readOnly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    aria-checked={selected}\n                    selected={selected}\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    invalid={invalid}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}\n                    {...rest}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.cjs","names":["StyledCheckBox","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","React","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","onKeyPress","e","keyCode","handleClick","Size","Medium","cls","defaultOnMouseDownHandler"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { CheckboxProps } from './types';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            invalid,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readOnly,\n                                                            tabIndexVal,\n                                                            dataTestId,\n                                                            className,\n                                                            ...rest\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readOnly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readOnly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    aria-checked={selected}\n                    selected={selected}\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    invalid={invalid}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}\n                    {...rest}>\n      <div id={id} data-testId={dataTestId} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}

package/dist/InputFields/Checkbox.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _excluded = ["id", "selected", "select", "label", "invalid", "iconPointerEventsTransparent", "disabled", "margin", "size", "semiSelected", "children", "readOnly", "tabIndexVal", "className"];
+var _excluded = ["id", "selected", "select", "label", "invalid", "iconPointerEventsTransparent", "disabled", "margin", "size", "semiSelected", "children", "readOnly", "tabIndexVal", "dataTestId", "className"];
 var _templateObject;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -34,6 +34,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children = _ref.children,
     readOnly = _ref.readOnly,
     tabIndexVal = _ref.tabIndexVal,
+    dataTestId = _ref.dataTestId,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   var onKeyPress = function onKeyPress(e) {
@@ -64,6 +65,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, rest), {}, {
     children: [/*#__PURE__*/_jsx("div", {
       id: id,
+      "data-testId": dataTestId,
       className: 'checkbox-icon',
       children: selected ? /*#__PURE__*/_jsx(CheckboxOn, {
         className: iconPointerEventsTransparent ? 'pointerTransparent' : '',

package/dist/InputFields/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","StyledCheckBox","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","className","rest","onKeyPress","e","keyCode","handleClick","Medium","cls"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { CheckboxProps } from './types';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            invalid,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readOnly,\n                                                            tabIndexVal,\n                                                            className,\n                                                            ...rest\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readOnly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readOnly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    aria-checked={selected}\n                    selected={selected}\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    invalid={invalid}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}\n                    {...rest}>\n      <div id={id} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["React","styled","CheckboxOff","CheckboxOn","CheckboxSemi","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","defaultOnMouseDownHandler","StyledCheckBox","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","Checkbox","forwardRef","ref","id","select","label","iconPointerEventsTransparent","disabled","size","semiSelected","children","readOnly","tabIndexVal","dataTestId","className","rest","onKeyPress","e","keyCode","handleClick","Medium","cls"],"sources":["../../src/InputFields/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {CheckboxOff, CheckboxOn, CheckboxSemi} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling} from '../styles/typography';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { CheckboxProps } from './types';\n\nexport const StyledCheckBox = styled.div<{ disabled?: boolean; invalid?: boolean; selected?: boolean; margin?: string }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .checkbox-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .checkbox-label {\n    user-select: none;\n    cursor: inherit;\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .checkbox-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):not(.readonly):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):not(.readonly):hover {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):not(.readonly):active {\n    .checkbox-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.readonly {\n    cursor: inherit;\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .checkbox-icon,\n    .checkbox-label {\n      pointer-events: none;\n    }\n\n    .checkbox-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .checkbox-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .checkbox-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\nconst Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(({\n                                                            id,\n                                                            selected,\n                                                            select,\n                                                            label,\n                                                            invalid,\n                                                            iconPointerEventsTransparent,\n                                                            disabled,\n                                                            margin,\n                                                            size,\n                                                            semiSelected,\n                                                            children,\n                                                            readOnly,\n                                                            tabIndexVal,\n                                                            dataTestId,\n                                                            className,\n                                                            ...rest\n                                                          }, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled && !readOnly) {\n      select && select(!selected);\n    }\n  };\n\n  const handleClick = () => {\n    if (disabled || readOnly) {\n      return;\n    }\n    select && select(!selected);\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''} ${readOnly ? ' readonly' : ''}`;\n\n  return (\n    <StyledCheckBox key={id}\n                    ref={ref}\n                    disabled={disabled}\n                    className={cls}\n                    aria-checked={selected}\n                    selected={selected}\n                    tabIndex={disabled || readOnly ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                    invalid={invalid}\n                    margin={margin}\n                    onClick={handleClick}\n                    onKeyDown={onKeyPress}\n                    onMouseDown={defaultOnMouseDownHandler}\n                    {...rest}>\n      <div id={id} data-testId={dataTestId} className={'checkbox-icon'}>\n        {\n          selected\n            ? <CheckboxOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n            : semiSelected\n              ? <CheckboxSemi className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n              : <CheckboxOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>\n        }\n      </div>\n      {\n        label &&\n        (\n          <label className={'checkbox-label'}\n                 htmlFor={id}>\n            {label}\n          </label>\n        )\n      }\n      {\n        !label &&\n        <label className={'checkbox-label'}\n               htmlFor={id}>\n          {children}\n        </label>\n      }\n    </StyledCheckBox>\n  );\n});\n\nexport default Checkbox;\n"],"mappings":"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"}

package/dist/InputFields/DatepickerField.cjs

@@ -25,7 +25,7 @@ require("react-datepicker/dist/react-datepicker.css");
 var _common = require("../common");
 var _types = require("../types");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["disabled", "readOnly", "onChange", "invalid", "value", "validationMessage", "dateFormat", "autoComplete", "placeholder", "required", "yearPicker", "yearsBeforeCurrentDate", "yearsAfterCurrentDate", "margin", "onBlur"];
+var _excluded = ["disabled", "readOnly", "onChange", "invalid", "value", "validationMessage", "dateFormat", "autoComplete", "placeholder", "required", "yearPicker", "yearsBeforeCurrentDate", "yearsAfterCurrentDate", "margin", "onBlur", "id", "dataTestId"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -62,6 +62,8 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
     yearsAfterCurrentDate = _ref.yearsAfterCurrentDate,
     margin = _ref.margin,
     onBlur = _ref.onBlur,
+    id = _ref.id,
+    dataTestId = _ref.dataTestId,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Globally used variables within the component
   var inputRef = (0, _common.useFocusVisibleRef)();
@@ -140,6 +142,7 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DatePickerContainer, {
+      "data-testId": dataTestId,
       yearPicker: yearPickerMode,
       margin: margin || '',
       onBlur: handleBlur,
@@ -148,6 +151,7 @@ var DatepickerField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
         onCalendarOpen: handleCalendarOpen,
         onCalendarClose: handleCalendarClose,
         onKeyDown: handleKeyDown,
+        id: id,
         onClickOutside: function onClickOutside() {
           return datepickerRef.current.setOpen(false);
         },

package/dist/InputFields/DatepickerField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerField.cjs","names":["dayjs","extend","advancedFormat","DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","focusStyles","neutral_20","neutral_200","yearPicker","ComponentSStyling","ComponentTextStyle","Bold","neutral_600","scrollBarStyling","Size","Small","ComponentMStyling","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","InputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","React","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","rest","inputRef","useFocusVisibleRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","handleBlur","currentTarget","contains","relatedTarget","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","display","setSelectionRange","critical_400"],"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 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';\n\ndayjs.extend(advancedFormat);\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\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} from '../types';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n  value?: Date;\n  onChange?: (date: Date) => void;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n  invalid?: boolean;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\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: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ${COLORS.primary_20};\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: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling(Size.Small)}\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\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      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\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      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          ${focusStyles}\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${+Z_INDEXES.focus + 1};\n  color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  &::placeholder {\n    color: ${COLORS.neutral_500};\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n    ::placeholder {\n      color: ${COLORS.primary_700};\n    }\n\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled ~ ${IconWrapper}, &:read-only ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = React.forwardRef(({\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                                            onBlur,\n                                            ...rest\n                                          }: DatepickerFieldProps, ref) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\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  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\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  //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\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          onKeyDown={handleKeyDown}\n\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          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              <div style={{display: 'block', margin: '4px 0px'}}>\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                    disabled={disabled}\n                    readOnly={true}\n                    suppressReadOnlyStyles={!readOnly}\n                    required={required}\n                    {...rest}\n                  />\n                  <IconWrapper>\n                    <Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              </div>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default DatepickerField;\n"],"mappings":"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"}
+{"version":3,"file":"DatepickerField.cjs","names":["dayjs","extend","advancedFormat","DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","focusStyles","neutral_20","neutral_200","yearPicker","ComponentSStyling","ComponentTextStyle","Bold","neutral_600","scrollBarStyling","Size","Small","ComponentMStyling","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","InputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","React","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","id","dataTestId","rest","inputRef","useFocusVisibleRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","handleBlur","currentTarget","contains","relatedTarget","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","display","setSelectionRange","critical_400"],"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 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';\n\ndayjs.extend(advancedFormat);\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\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 */\ntype DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n  value?: Date;\n  onChange?: (date: Date) => void;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n  invalid?: boolean;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\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: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ${COLORS.primary_20};\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: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling(Size.Small)}\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\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      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\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      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          ${focusStyles}\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${+Z_INDEXES.focus + 1};\n  color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  &::placeholder {\n    color: ${COLORS.neutral_500};\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n    ::placeholder {\n      color: ${COLORS.primary_700};\n    }\n\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled ~ ${IconWrapper}, &:read-only ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = React.forwardRef(({\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                                            onBlur,\n                                            id,\n                                            dataTestId,\n                                            ...rest\n                                          }: DatepickerFieldProps, ref) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\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  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\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  //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\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer 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          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              <div style={{display: 'block', margin: '4px 0px'}}>\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                    disabled={disabled}\n                    readOnly={true}\n                    suppressReadOnlyStyles={!readOnly}\n                    required={required}\n                    {...rest}\n                  />\n                  <IconWrapper>\n                    <Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              </div>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default DatepickerField;\n"],"mappings":"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"}

package/dist/InputFields/DatepickerField.d.ts

@@ -3,7 +3,8 @@
  */
 import React from 'react';
 import 'react-datepicker/dist/react-datepicker.css';
-declare const DatepickerField: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onBlur" | "onChange" | "value" | "size"> & {
+import { Testable } from '../types';
+declare const DatepickerField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "onBlur" | "onChange" | "value" | "size"> & {
     value?: Date | undefined;
     onChange?: ((date: Date) => void) | undefined;
     onBlur?: ((event: React.FocusEvent<HTMLDivElement>) => void) | undefined;

package/dist/InputFields/DatepickerField.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _excluded = ["disabled", "readOnly", "onChange", "invalid", "value", "validationMessage", "dateFormat", "autoComplete", "placeholder", "required", "yearPicker", "yearsBeforeCurrentDate", "yearsAfterCurrentDate", "margin", "onBlur"];
+var _excluded = ["disabled", "readOnly", "onChange", "invalid", "value", "validationMessage", "dateFormat", "autoComplete", "placeholder", "required", "yearPicker", "yearsBeforeCurrentDate", "yearsAfterCurrentDate", "margin", "onBlur", "id", "dataTestId"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -73,6 +73,8 @@ var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     yearsAfterCurrentDate = _ref.yearsAfterCurrentDate,
     margin = _ref.margin,
     onBlur = _ref.onBlur,
+    id = _ref.id,
+    dataTestId = _ref.dataTestId,
     rest = _objectWithoutProperties(_ref, _excluded);
   // Globally used variables within the component
   var inputRef = useFocusVisibleRef();
@@ -151,6 +153,7 @@ var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(DatePickerContainer, {
+      "data-testId": dataTestId,
       yearPicker: yearPickerMode,
       margin: margin || '',
       onBlur: handleBlur,
@@ -159,6 +162,7 @@ var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         onCalendarOpen: handleCalendarOpen,
         onCalendarClose: handleCalendarClose,
         onKeyDown: handleKeyDown,
+        id: id,
         onClickOutside: function onClickOutside() {
           return datepickerRef.current.setOpen(false);
         },

package/dist/InputFields/DatepickerField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerField.js","names":["React","styled","DatePicker","en","dayjs","advancedFormat","extend","COLORS","Calendar","TechnicalWarning","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","Size","DatePickerContainer","div","dropdown","props","margin","primary_20","neutral_20","neutral_200","yearPicker","Bold","neutral_600","Small","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","rest","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","handleBlur","currentTarget","contains","relatedTarget","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","setSelectionRange","critical_400"],"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 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';\n\ndayjs.extend(advancedFormat);\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\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} from '../types';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n  value?: Date;\n  onChange?: (date: Date) => void;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n  invalid?: boolean;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\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: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ${COLORS.primary_20};\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: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling(Size.Small)}\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\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      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\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      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          ${focusStyles}\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${+Z_INDEXES.focus + 1};\n  color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  &::placeholder {\n    color: ${COLORS.neutral_500};\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n    ::placeholder {\n      color: ${COLORS.primary_700};\n    }\n\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled ~ ${IconWrapper}, &:read-only ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = React.forwardRef(({\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                                            onBlur,\n                                            ...rest\n                                          }: DatepickerFieldProps, ref) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\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  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\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  //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\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          onKeyDown={handleKeyDown}\n\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          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              <div style={{display: 'block', margin: '4px 0px'}}>\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                    disabled={disabled}\n                    readOnly={true}\n                    suppressReadOnlyStyles={!readOnly}\n                    required={required}\n                    {...rest}\n                  />\n                  <IconWrapper>\n                    <Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              </div>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default DatepickerField;\n"],"mappings":"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"}
+{"version":3,"file":"DatepickerField.js","names":["React","styled","DatePicker","en","dayjs","advancedFormat","extend","COLORS","Calendar","TechnicalWarning","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","Size","DatePickerContainer","div","dropdown","props","margin","primary_20","neutral_20","neutral_200","yearPicker","Bold","neutral_600","Small","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","id","dataTestId","rest","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","handleBlur","currentTarget","contains","relatedTarget","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","setSelectionRange","critical_400"],"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 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';\n\ndayjs.extend(advancedFormat);\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\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 */\ntype DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n  value?: Date;\n  onChange?: (date: Date) => void;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n  invalid?: boolean;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\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: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ${COLORS.primary_20};\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: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling(Size.Small)}\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\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      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\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      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          ${focusStyles}\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${+Z_INDEXES.focus + 1};\n  color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  &::placeholder {\n    color: ${COLORS.neutral_500};\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n    ::placeholder {\n      color: ${COLORS.primary_700};\n    }\n\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled ~ ${IconWrapper}, &:read-only ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = React.forwardRef(({\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                                            onBlur,\n                                            id,\n                                            dataTestId,\n                                            ...rest\n                                          }: DatepickerFieldProps, ref) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\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  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\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  //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\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer 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          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              <div style={{display: 'block', margin: '4px 0px'}}>\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                    disabled={disabled}\n                    readOnly={true}\n                    suppressReadOnlyStyles={!readOnly}\n                    required={required}\n                    {...rest}\n                  />\n                  <IconWrapper>\n                    <Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              </div>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default DatepickerField;\n"],"mappings":"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"}