@laerdal/life-react-components 1.8.0-dev.1.full → 1.8.0-dev.12

package/dist/InputFields/DatepickerField.js

@@ -39,10 +39,6 @@ import { ComponentMStyling, ComponentSStyling } from '../styles/typography';
 import { Z_INDEXES } from '../styles/z-indexes';
 import { useFocusVisibleRef } from '../common/FocusVisible';
 import { Size } from '../types';
-/**
- * Add custom types.
- */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -57,14 +53,14 @@ var DatePickerContainer = styled.div(_templateObject || (_templateObject = _tagg
 }, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), scrollBarStyling(Size.Small), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.neutral_600, COLORS.white, COLORS.primary_700, COLORS.primary_20, focusStyles, COLORS.white, COLORS.primary_500, COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.neutral_600, COLORS.white, COLORS.primary_700, COLORS.primary_20, focusStyles, COLORS.white, COLORS.primary_500, COLORS.neutral_700, COLORS.neutral_100, COLORS.primary_700, COLORS.primary_20, focusStyles);
 var IconWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ", ";\n  color: ", ";\n"])), Z_INDEXES.focus + 1, COLORS.neutral_600);
 var DatepickerRow = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
-var StyledInputFieldStyling = styled(InputFieldStyling)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  &::placeholder {\n    color: ", ";\n  }\n  \n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    background-color: ", ";\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n  }\n\n  &:disabled {\n    background-color: ", ";\n  }\n\n  &:hover ~ ", " {\n    color: ", ";\n  }\n\n  &:active ~ ", ",\n  &.open ~ ", " {\n    color: ", ";\n  }\n\n  &:disabled ~ ", ",\n  &.locked ~ ", " {\n    color: ", ";\n  }\n"])), COLORS.neutral_500, COLORS.primary_300, COLORS.primary_200, COLORS.primary_700, COLORS.primary_20, COLORS.primary_700, COLORS.primary_300, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, COLORS.white, IconWrapper, COLORS.primary_700, IconWrapper, IconWrapper, COLORS.primary_800, IconWrapper, IconWrapper, COLORS.neutral_300);
+var StyledInputFieldStyling = styled(InputFieldStyling)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  &::placeholder {\n    color: ", ";\n  }\n  \n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    background-color: ", ";\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n  }\n\n  &:disabled {\n    background-color: ", ";\n  }\n\n  &:hover ~ ", " {\n    color: ", ";\n  }\n\n  &:active ~ ", ",\n  &.open ~ ", " {\n    color: ", ";\n  }\n\n  &:disabled ~ ", ",\n  &:read-only ~ ", " {\n    color: ", ";\n  }\n"])), COLORS.neutral_500, COLORS.primary_300, COLORS.primary_200, COLORS.primary_700, COLORS.primary_20, COLORS.primary_700, COLORS.primary_300, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, COLORS.white, IconWrapper, COLORS.primary_700, IconWrapper, IconWrapper, COLORS.primary_800, IconWrapper, IconWrapper, COLORS.neutral_300);
 
 var DatepickerField = function DatepickerField(_ref) {
   var id = _ref.id,
       disabled = _ref.disabled,
-      locked = _ref.locked,
+      readOnly = _ref.readOnly,
       _onChange = _ref.onChange,
-      hasError = _ref.hasError,
+      invalid = _ref.invalid,
       value = _ref.value,
       validationMessage = _ref.validationMessage,
       dateFormat = _ref.dateFormat,
@@ -168,7 +164,7 @@ var DatepickerField = function DatepickerField(_ref) {
           return setOpen(false);
         },
         onInputClick: function onInputClick() {
-          return !disabled && !locked && setOpen(!open);
+          return !disabled && !readOnly && setOpen(!open);
         },
         onChange: function onChange(e) {
           setOpen(false);
@@ -184,7 +180,7 @@ var DatepickerField = function DatepickerField(_ref) {
 
           if (yearPickerMode) setYearPickerMode(false);
         },
-        disabled: disabled || locked,
+        disabled: disabled || readOnly,
         locale: en,
         showYearPicker: yearPickerMode //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year
         ,
@@ -204,14 +200,12 @@ var DatepickerField = function DatepickerField(_ref) {
         } : undefined,
         customInput: /*#__PURE__*/_jsx(InputWrapper, {
           disabled: disabled,
-          locked: locked,
+          readOnly: readOnly,
           children: /*#__PURE__*/_jsx("div", {
             style: {
               display: 'block'
             },
             children: /*#__PURE__*/_jsxs(DatepickerRow, {
-              locked: locked,
-              disabled: disabled,
               children: [/*#__PURE__*/_jsx(StyledInputFieldStyling, {
                 id: id,
                 ref: inputRef,
@@ -220,9 +214,8 @@ var DatepickerField = function DatepickerField(_ref) {
                 onKeyDown: function onKeyDown(e) {
                   return e.key === 'Enter' && setOpen(true);
                 },
-                readOnly: true,
-                className: (hasError ? 'error' : '') + (locked ? ' locked' : '') + (open ? ' open' : ''),
-                tabIndex: disabled || locked ? -1 : 0,
+                className: (invalid ? 'invalid' : '') + (open ? ' open' : ''),
+                tabIndex: disabled || readOnly ? -1 : 0,
                 onFocus: function onFocus(e) {
                   var _inputRef$current2;
 
@@ -231,7 +224,8 @@ var DatepickerField = function DatepickerField(_ref) {
                 autoComplete: autoComplete,
                 placeholder: placeholder,
                 disabled: disabled,
-                locked: locked,
+                readOnly: true,
+                suppressReadOnlyStyles: !readOnly,
                 required: required
               }), /*#__PURE__*/_jsx(IconWrapper, {
                 children: /*#__PURE__*/_jsx(Calendar, {
@@ -256,9 +250,9 @@ var DatepickerField = function DatepickerField(_ref) {
 DatepickerField.propTypes = {
   id: _pt.string.isRequired,
   disabled: _pt.bool,
-  locked: _pt.bool,
+  readOnly: _pt.bool,
   onChange: _pt.func,
-  hasError: _pt.bool,
+  invalid: _pt.bool,
   value: _pt.instanceOf(Date),
   dateFormat: _pt.string,
   validationMessage: _pt.string,

package/dist/InputFields/DatepickerField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["React","styled","DatePicker","en","moment","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","id","disabled","locked","onChange","hasError","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","blur","handleCalendarOpen","handleCalendarClose","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","setSelectionRange","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled, {css} from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {IconButton} from '../Button/index';\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/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {useFocusVisibleRef} from '../common/FocusVisible';\nimport { Size } from '../types';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = {\n  id: string;\n  disabled?: boolean;\n  locked?: boolean;\n  onChange?: (date: Date) => void;\n  hasError?: boolean;\n  value?: Date;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\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\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\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\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<{ disabled?: boolean; locked?: boolean }>`\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},\n  &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled ~ ${IconWrapper},\n  &.locked ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = ({\n                           id,\n                           disabled,\n                           locked,\n                           onChange,\n                           hasError,\n                           value,\n                           validationMessage,\n                           dateFormat,\n                           autoComplete,\n                           placeholder,\n                           required,\n                           yearPicker,\n                           yearsBeforeCurrentDate,\n                           yearsAfterCurrentDate,\n                           margin,\n                         }: DatepickerFieldProps) => {\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  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 = moment(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.useEffect(() => {\n    if (!open) {\n      inputRef.current?.blur();\n    }\n  }, [open]);\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  const handleCalendarClose = () => {\n    setOpen(false);\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      setOpen(false);\n    }\n  };\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          open={open}\n          onKeyDown={handleKeyDown}\n          onClickOutside={() => setOpen(false)}\n          onInputClick={() => !disabled && !locked && setOpen(!open)}\n          onChange={(e: any) => {\n            setOpen(false);\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 || locked}\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: DatepickerFieldHeaderParams) =>\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} locked={locked}>\n              <div style={{display: 'block'}}>\n                <DatepickerRow locked={locked} disabled={disabled}>\n                  <StyledInputFieldStyling\n                    id={id}\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && setOpen(true)}\n                    readOnly={true}\n                    className={(hasError ? 'error' : '') + (locked ? ' locked' : '') + (open ? ' open' : '')}\n                    tabIndex={disabled || locked ? -1 : 0}\n                    onFocus={e => inputRef.current?.setSelectionRange(0, 0)}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    locked={locked}\n                    required={required}/>\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 size=\"20px\" color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.js"}
+{"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["React","styled","DatePicker","en","moment","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","id","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","blur","handleCalendarOpen","handleCalendarClose","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","setSelectionRange","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled, {css} from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\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/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {useFocusVisibleRef} from '../common/FocusVisible';\nimport { Size } from '../types';\nimport {defaultOnMouseDownHandler} from '../common';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (date: Date) => void;\n  invalid?: boolean;\n  value?: Date;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\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\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\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\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},\n  &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled ~ ${IconWrapper},\n  &:read-only ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = ({\n                           id,\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                         }: DatepickerFieldProps) => {\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  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 = moment(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.useEffect(() => {\n    if (!open) {\n      inputRef.current?.blur();\n    }\n  }, [open]);\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  const handleCalendarClose = () => {\n    setOpen(false);\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      setOpen(false);\n    }\n  };\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          open={open}\n          onKeyDown={handleKeyDown}\n          onClickOutside={() => setOpen(false)}\n          onInputClick={() => !disabled && !readOnly && setOpen(!open)}\n          onChange={(e: any) => {\n            setOpen(false);\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: DatepickerFieldHeaderParams) =>\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'}}>\n                <DatepickerRow>\n                  <StyledInputFieldStyling\n                    id={id}\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && 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                  <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 size=\"20px\" color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.js"}

package/dist/InputFields/NumberField.cjs

@@ -0,0 +1,276 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Button = require("../Button");
+
+var _icons = require("../icons");
+
+var _styles = require("../styles");
+
+var _typography = require("../styles/typography");
+
+var _types = require("../types");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
+
+var LabelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    margin-bottom: 4px;\n    color: ", ";\n    display: flex;\n    ", "\n"])), _styles.COLORS.neutral_500, (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null));
+
+var LabelText = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)([""])));
+
+var LabelIcon = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    margin-right: ", ";\n    svg {\n        height: 9px;\n        width: 9px;\n    }\n"])), function (props) {
+  return props.size === _types.Size.Small ? '6px' : '8px';
+});
+
+var InputWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    margin: ", ";\n    display: flex;\n    flex-grow: 1;\n"])), function (props) {
+  return props.size === _types.Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px';
+});
+
+var PrefixContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    margin-right: 4px;\n    width: ", ";\n    height: ", ";\n    color: ", ";\n    ", "\n"])), function (props) {
+  return props.size === _types.Size.Small ? '10px' : '11px';
+}, function (props) {
+  return props.size === _types.Size.Small ? '20px' : '24px';
+}, _styles.COLORS.neutral_500, function (props) {
+  return props.size === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null);
+});
+
+var OperatorWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    margin:", ";\n    svg {\n        height: 14px;\n        width: 14px;\n    }\n    .divider {\n        border: 1px solid ", ";\n        margin: 16px 0;\n        background: ", ";\n    }\n"])), function (props) {
+  return props.size === _types.Size.Medium ? '4px 0' : '';
+}, _styles.COLORS.neutral_200, _styles.COLORS.neutral_200);
+
+var NumberInput = _styledComponents.default.input(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;\n    height: ", ";\n    border: none;\n    color: ", ";\n    ", "\n\n    &:hover, &:focus, &:active {\n        outline: none;\n    }\n"])), function (props) {
+  return props.fieldSize === _types.Size.Small ? '20px' : '24px';
+}, _styles.COLORS.neutral_500, function (props) {
+  return props.fieldSize === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, null) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, null);
+});
+
+var NoteLabel = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n    color: ", ";\n    ", "    \n"])), _styles.COLORS.neutral_500, (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null));
+
+var NoteIcon = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n    svg {\n        height: 16px;\n    }\n"])));
+
+var NoteContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    margin-top: 5px;\n\n    &.valid {\n        ", " {\n            color: ", ";\n        }\n\n        ", " {\n            svg path {\n                fill: ", ";\n            }\n        }\n    }\n\n    &.invalid {\n        ", " {\n            color: ", ";\n        }\n\n        ", " {\n            svg path {\n                fill: ", ";\n            }\n        }\n    }\n"])), NoteLabel, _styles.COLORS.correct_500, NoteIcon, _styles.COLORS.correct_500, NoteLabel, _styles.COLORS.critical_500, NoteIcon, _styles.COLORS.critical_500);
+
+var InputContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n    min-width: 280px;\n    height: ", ";\n    display: flex;    \n    border: 1px solid ", ";\n    border-radius: 4px;\n\n    &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        border: 2px solid ", ";\n    }\n\n    &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        border: 2px solid ", ";\n    }\n\n    &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        border: 2px solid ", ";\n    }\n\n    &.disabled {\n        border: 1px solid ", ";\n        cursor: not-allowed;\n        \n        ", "{\n            color: ", ";\n        }\n\n        ", "{\n            color: ", ";\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.readOnly {\n        background: ", ";\n        border: 1px solid ", ";\n        cursor: not-allowed;\n\n        ", "{\n            background: ", ";\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.valid {\n        border: 2px solid ", ";\n    }\n\n    &.invalid {\n        border: 2px solid ", ";\n    }\n"])), function (props) {
+  return props.size === _types.Size.Small ? '48px' : '56px';
+}, _styles.COLORS.neutral_400, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, PrefixContainer, _styles.COLORS.neutral_300, NumberInput, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, NumberInput, _styles.COLORS.neutral_100, _styles.COLORS.correct_400, _styles.COLORS.critical_400);
+
+var NumberField = function NumberField(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _types.Size.Small : _ref$size,
+      label = _ref.label,
+      note = _ref.note,
+      noteIcon = _ref.noteIcon,
+      required = _ref.required,
+      prefix = _ref.prefix,
+      _ref$interval = _ref.interval,
+      interval = _ref$interval === void 0 ? 1 : _ref$interval,
+      minValue = _ref.minValue,
+      maxValue = _ref.maxValue,
+      allowNegative = _ref.allowNegative,
+      decimalPrecision = _ref.decimalPrecision,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$readOnly = _ref.readOnly,
+      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+      valid = _ref.valid,
+      defaultVal = _ref.defaultVal;
+
+  var _React$useState = React.useState(defaultVal ? defaultVal.toString() : ''),
+      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+      userInput = _React$useState2[0],
+      setUserInput = _React$useState2[1];
+
+  var fieldState = valid !== undefined ? valid ? 'valid' : 'invalid' : undefined;
+
+  var handleKeyPress = function handleKeyPress(e) {
+    switch (e.key) {
+      case 'ArrowUp':
+        addInterval();
+        break;
+
+      case 'ArrowDown':
+        subtractInterval();
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  var handleInput = function handleInput(e) {
+    e.preventDefault();
+    var simpleRegex = new RegExp(/^[0-9]\d*$/);
+    var decimalFormationRegEx = new RegExp(/^[0-9]\d*\.$/);
+    var negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\d*\.$/);
+    var allowNegativeRegex = new RegExp(/^[-][0-9]\d*$/);
+    var decimalPrecisionRegex = decimalPrecision ? new RegExp("^[0-9]\\d*\\.[0-9]\\d{0,".concat(decimalPrecision - 1, "}$")) : undefined;
+    var negativeAndDecimalRegex = decimalPrecision && allowNegative ? new RegExp("^[-][0-9]\\d*\\.[0-9]\\d{0,".concat(decimalPrecision - 1, "}$")) : undefined;
+    var val = e.target.value;
+
+    if (val !== '') {
+      if (allowNegative && decimalPrecision) {
+        if (val.length === 1 && val.charAt(0) === '-') setUserInput(val);else {
+          if ((negativeAndDecimalRegex.test(val) || decimalPrecisionRegex.test(val)) && isInRange(val, true)) setUserInput(val);else if ((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.', ''), true)) setUserInput(val);else if ((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val, true)) setUserInput(val);
+        }
+      } else if (allowNegative) {
+        if (val.length === 1 && val.charAt(0) === '-') setUserInput(val);else if ((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val, false)) setUserInput(val);
+      } else if (decimalPrecision && val.indexOf('.') === val.lastIndexOf('.') && isInRange(val, true)) {
+        if (decimalPrecisionRegex.test(val)) setUserInput(val);else if (decimalFormationRegEx.test(val)) setUserInput(val);else if (!val.includes('.') && simpleRegex.test(val)) setUserInput(val);
+      } else if (simpleRegex.test(val) && isInRange(val, false)) {
+        setUserInput(val);
+      }
+    }
+
+    if (val === '') setUserInput('');
+  };
+
+  var isInRange = function isInRange(value, isDecimal) {
+    var x = isDecimal ? parseFloat(value).toFixed(decimalPrecision) : parseInt(value);
+    if (minValue && minValue > x) return false;else if (maxValue && maxValue < x) return false;else return true;
+  };
+
+  var addInterval = function addInterval() {
+    var val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);
+    val = isNaN(val) && userInput === '' ? minValue !== null && minValue !== void 0 ? minValue : 0 : val;
+
+    if (!isNaN(val)) {
+      if (decimalPrecision) val = Math.round((val + interval) * Math.pow(10, decimalPrecision)) / Math.pow(10, decimalPrecision);else val += 1;
+      if (maxValue && maxValue >= val) setUserInput(val.toString());else if (!maxValue) setUserInput(val.toString());
+    }
+  };
+
+  var subtractInterval = function subtractInterval() {
+    var val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);
+    val = isNaN(val) && userInput === '' ? maxValue !== null && maxValue !== void 0 ? maxValue : 0 : val;
+
+    if (!isNaN(val)) {
+      if (decimalPrecision) val = Math.round((val - interval) * Math.pow(10, decimalPrecision)) / Math.pow(10, decimalPrecision);else val -= 1;
+      if (minValue && minValue <= val) allowNegative ? setUserInput(val.toString()) : val >= 0 ? setUserInput(val.toString()) : undefined;else if (!minValue) allowNegative ? setUserInput(val.toString()) : val >= 0 ? setUserInput(val.toString()) : undefined;
+    }
+  };
+
+  var isLocked = function isLocked(input, operator) {
+    var val = decimalPrecision ? parseFloat(input) : parseInt(input);
+    var operatorState = false;
+    if (operator === 'add' && maxValue) operatorState = val < maxValue ? false : true;
+    if (operator === 'subtract' && minValue) operatorState = val > minValue ? false : true;
+    return operatorState;
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(LabelContainer, {
+      children: [required && /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelIcon, {
+        size: size,
+        "data-testid": 'labelIcon',
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Asterisk, {
+          color: _styles.COLORS.critical_500
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelText, {
+        children: label
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(InputContainer, {
+      size: size,
+      "data-testid": 'inputContainer',
+      tabIndex: -1,
+      className: 'numberField'.concat(disabled ? ' disabled' : '').concat(readOnly ? ' readOnly' : '').concat(fieldState ? " ".concat(fieldState) : ''),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(InputWrapper, {
+        size: size,
+        children: [prefix && /*#__PURE__*/(0, _jsxRuntime.jsx)(PrefixContainer, {
+          size: size,
+          children: prefix
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NumberInput, {
+          fieldSize: size,
+          placeholder: "Enter number",
+          value: userInput,
+          tabIndex: disabled || readOnly ? -1 : 0,
+          onChange: function onChange(e) {
+            return handleInput(e);
+          },
+          onKeyDown: function onKeyDown(e) {
+            return handleKeyPress(e);
+          }
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(OperatorWrapper, {
+        "data-testid": 'operators',
+        size: size,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          variant: "secondary",
+          shape: "square",
+          action: function action() {
+            return subtractInterval();
+          },
+          useTransparentBackground: true,
+          disabled: disabled || readOnly || isLocked(userInput, 'subtract'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Minus, {
+            size: "14px"
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "divider"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          variant: "secondary",
+          shape: "square",
+          action: function action() {
+            return addInterval();
+          },
+          useTransparentBackground: true,
+          disabled: disabled || readOnly || isLocked(userInput, 'add'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Plus, {
+            size: "14px"
+          })
+        })]
+      })]
+    }), note && /*#__PURE__*/(0, _jsxRuntime.jsxs)(NoteContainer, {
+      className: 'noteField'.concat(fieldState ? " ".concat(fieldState) : ''),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NoteIcon, {
+        children: noteIcon
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NoteLabel, {
+        children: note
+      })]
+    })]
+  });
+};
+
+NumberField.propTypes = {
+  prefix: _propTypes.default.string,
+  interval: _propTypes.default.number,
+  label: _propTypes.default.string.isRequired,
+  note: _propTypes.default.string,
+  noteIcon: _propTypes.default.node,
+  required: _propTypes.default.bool,
+  minValue: _propTypes.default.number,
+  maxValue: _propTypes.default.number,
+  allowNegative: _propTypes.default.bool,
+  decimalPrecision: _propTypes.default.number,
+  disabled: _propTypes.default.bool,
+  readOnly: _propTypes.default.bool,
+  valid: _propTypes.default.bool,
+  defaultVal: _propTypes.default.number
+};
+var _default = NumberField;
+exports.default = _default;
+//# sourceMappingURL=NumberField.cjs.map

package/dist/InputFields/NumberField.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/InputFields/NumberField.tsx"],"names":["Container","styled","div","LabelContainer","COLORS","neutral_500","ComponentTextStyle","Regular","LabelText","LabelIcon","props","size","Size","Small","InputWrapper","PrefixContainer","OperatorWrapper","Medium","neutral_200","NumberInput","input","fieldSize","Italic","NoteLabel","NoteIcon","NoteContainer","correct_500","critical_500","InputContainer","neutral_400","primary_700","primary_800","neutral_100","neutral_300","correct_400","critical_400","NumberField","label","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","disabled","readOnly","valid","defaultVal","React","useState","toString","userInput","setUserInput","fieldState","undefined","handleKeyPress","e","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","negativeAndDecimalRegex","val","target","value","length","charAt","test","isInRange","replace","indexOf","lastIndexOf","includes","isDecimal","x","parseFloat","toFixed","parseInt","isNaN","Math","round","pow","isLocked","operator","operatorState","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nconst Container = styled.div``;\n\nconst LabelContainer = styled.div`\n    margin-bottom: 4px;\n    color: ${COLORS.neutral_500};\n    display: flex;\n    ${ComponentXXSStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst LabelText = styled.div``;\n\nconst LabelIcon = styled.div<{size: Size}>`\n    margin-right: ${props => props.size === Size.Small?'6px':'8px'};\n    svg {\n        height: 9px;\n        width: 9px;\n    }\n`;\n\nconst InputWrapper = styled.div<{size: Size}>`\n    margin: ${props => props.size === Size.Small?'14px 0 14px 16px':'16px 0 16px 16px'};\n    display: flex;\n    flex-grow: 1;\n`;\n\nconst PrefixContainer = styled.div<{size: Size}>`\n    margin-right: 4px;\n    width: ${props => props.size === Size.Small?'10px':'11px'};\n    height: ${props => props.size === Size.Small?'20px':'24px'};\n    color: ${COLORS.neutral_500};\n    ${props=>props.size===Size.Small?ComponentSStyling(ComponentTextStyle.Regular,null):ComponentMStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst OperatorWrapper = styled.div<{size: Size}>`\n    display: flex;\n    margin:${props => props.size === Size.Medium?'4px 0':''};\n    svg {\n        height: 14px;\n        width: 14px;\n    }\n    .divider {\n        border: 1px solid ${COLORS.neutral_200};\n        margin: 16px 0;\n        background: ${COLORS.neutral_200};\n    }\n`;\n\nconst NumberInput = styled.input<{fieldSize: Size}>`\n    width: 100%;\n    height: ${props => props.fieldSize === Size.Small?'20px':'24px'};\n    border: none;\n    color: ${COLORS.neutral_500};\n    ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Italic, null):ComponentMStyling(ComponentTextStyle.Italic, null)}\n\n    &:hover, &:focus, &:active {\n        outline: none;\n    }\n`;\n\nconst NoteLabel = styled.div`\n    color: ${COLORS.neutral_500};\n    ${ComponentXXSStyling(ComponentTextStyle.Regular,null)}    \n`;\n\nconst NoteIcon = styled.div`\n    svg {\n        height: 16px;\n    }\n`;\n\nconst NoteContainer = styled.div`\n    display: flex;\n    margin-top: 5px;\n\n    &.valid {\n        ${NoteLabel} {\n            color: ${COLORS.correct_500};\n        }\n\n        ${NoteIcon} {\n            svg path {\n                fill: ${COLORS.correct_500};\n            }\n        }\n    }\n\n    &.invalid {\n        ${NoteLabel} {\n            color: ${COLORS.critical_500};\n        }\n\n        ${NoteIcon} {\n            svg path {\n                fill: ${COLORS.critical_500};\n            }\n        }\n    }\n`;\n\nconst InputContainer = styled.div<{size: Size}>`\n    min-width: 280px;\n    height: ${props => props.size === Size.Small?'48px':'56px'};\n    display: flex;    \n    border: 1px solid ${COLORS.neutral_400};\n    border-radius: 4px;\n\n    &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        border: 2px solid ${COLORS.primary_700};\n    }\n\n    &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        border: 2px solid ${COLORS.primary_800};\n    }\n\n    &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        border: 2px solid ${COLORS.primary_800};\n    }\n\n    &.disabled {\n        border: 1px solid ${COLORS.neutral_100};\n        cursor: not-allowed;\n        \n        ${PrefixContainer}{\n            color: ${COLORS.neutral_300};\n        }\n\n        ${NumberInput}{\n            color: ${COLORS.neutral_300};\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.readOnly {\n        background: ${COLORS.neutral_100};\n        border: 1px solid ${COLORS.neutral_300};\n        cursor: not-allowed;\n\n        ${NumberInput}{\n            background: ${COLORS.neutral_100};\n            cursor: not-allowed;\n            pointer-events: none;\n        }\n    }\n\n    &.valid {\n        border: 2px solid ${COLORS.correct_400};\n    }\n\n    &.invalid {\n        border: 2px solid ${COLORS.critical_400};\n    }\n`;\n\ntype NumberFieldProps = {\n    size: Size.Small | Size.Medium;\n    prefix?: string;\n    interval?: number;\n    label: string;\n    note?: string;\n    noteIcon?: React.ReactNode;\n    required?: boolean;\n    minValue?: number;\n    maxValue?: number;\n    allowNegative?: boolean;\n    decimalPrecision?: number;\n    disabled?: boolean;\n    readOnly?: boolean;\n    valid?: boolean;\n    defaultVal?: number;\n}\n\nconst NumberField: React.FunctionComponent<NumberFieldProps> = (\n    {size=Size.Small, \n     label,\n     note, \n     noteIcon, \n     required, \n     prefix,\n     interval=1, \n     minValue, \n     maxValue, \n     allowNegative, \n     decimalPrecision, \n     disabled=false, \n     readOnly=false, \n     valid,\n     defaultVal}) => {\n    const [userInput, setUserInput] = React.useState(defaultVal?defaultVal.toString():'');\n    let fieldState = (valid!==undefined) ? (valid?'valid':'invalid') : undefined;\n\n    const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        switch(e.key){\n            case 'ArrowUp': addInterval();\n                            break;\n            case 'ArrowDown': subtractInterval();\n                            break;\n            default: break;\n        }\n    }\n\n    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n        e.preventDefault();\n        let simpleRegex = new RegExp(/^[0-9]\\d*$/);\n        let decimalFormationRegEx = new RegExp(/^[0-9]\\d*\\.$/); \n        let negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\\d*\\.$/);\n        \n        let allowNegativeRegex = new RegExp(/^[-][0-9]\\d*$/);        \n        let decimalPrecisionRegex = decimalPrecision ? new RegExp(`^[0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\n        let negativeAndDecimalRegex =  (decimalPrecision && allowNegative) ? new RegExp(`^[-][0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`): undefined;\n        \n        let val = e.target.value;    \n        if(val!==''){\n            if(allowNegative && decimalPrecision){\n                if(val.length===1 && val.charAt(0)==='-')\n                    setUserInput(val);\n                else{\n                    if((negativeAndDecimalRegex!.test(val) || decimalPrecisionRegex!.test(val)) && isInRange(val,true))\n                        setUserInput(val);\n\n                    else if((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.',''),true))\n                        setUserInput(val);\n                    \n                    else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,true))\n                        setUserInput(val);\n                }\n            }\n\n            else if(allowNegative){\n                if(val.length===1 && val.charAt(0)==='-')\n                    setUserInput(val);\n                else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,false))\n                    setUserInput(val);\n            }\n\n            else if(decimalPrecision && (val.indexOf('.')===val.lastIndexOf('.')) && isInRange(val,true)){\n                if(decimalPrecisionRegex!.test(val))\n                    setUserInput(val);\n                else if(decimalFormationRegEx.test(val))\n                    setUserInput(val);\n                else if(!val.includes('.') && simpleRegex.test(val))\n                    setUserInput(val);\n            }\n\n            else if(simpleRegex.test(val) && isInRange(val, false)){\n                setUserInput(val);\n            }\n        }\n\n        if(val==='')\n            setUserInput('');\n    }\n\n    const isInRange = (value: string, isDecimal: boolean): boolean => {\n        let x = isDecimal ? parseFloat(value).toFixed(decimalPrecision) : parseInt(value);\n        if(minValue && minValue>x)\n            return false;\n        else if(maxValue && maxValue<x)\n            return false;\n        else\n            return true;\n    }\n\n    const addInterval = () => {\n        let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n        val = isNaN(val) && userInput === '' ? (minValue ?? 0) : val;\n        if(!isNaN(val)){\n            if(decimalPrecision)\n                val = Math.round((val+interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n            else\n                val +=1;\n\n            if(maxValue && maxValue>=val)\n                setUserInput(val.toString());\n            else if(!maxValue)\n                setUserInput(val.toString());\n        }\n    }\n\n    const subtractInterval = () => {\n        let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n        val = isNaN(val) && userInput === '' ? (maxValue ?? 0) : val;\n        if(!isNaN(val)){\n            if(decimalPrecision)\n                val = Math.round((val-interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n            else\n                val -=1;\n            \n            if(minValue && minValue<=val)\n                allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n            else if(!minValue)\n                allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n        }\n    }\n\n    const isLocked = (input: string, operator: string): boolean => {\n        let val = decimalPrecision ? parseFloat(input) : parseInt(input);\n        let operatorState = false;\n        if(operator === 'add' && maxValue)\n            operatorState = val < maxValue ? false : true;\n        \n        if(operator === 'subtract' && minValue)\n            operatorState =  val > minValue ? false : true;\n\n        return operatorState;\n    }\n\n    return (\n        <Container>\n            <LabelContainer>\n                {required && <LabelIcon size={size} data-testid={'labelIcon'}>\n                    <SystemIcons.Asterisk color={COLORS.critical_500}/>\n                </LabelIcon>\n                }\n                <LabelText>\n                    {label}\n                </LabelText>\n            </LabelContainer>\n\n            <InputContainer size={size} data-testid={'inputContainer'} tabIndex={-1} className={'numberField'.concat(disabled?' disabled':'')\n                                                                .concat(readOnly?' readOnly':'')\n                                                                .concat(fieldState?` ${fieldState}`:'')}>\n                <InputWrapper size={size}>\n                    {prefix && <PrefixContainer size={size}>\n                        {prefix}\n                    </PrefixContainer>}\n                    <NumberInput fieldSize={size} placeholder='Enter number' value={userInput} tabIndex={(disabled || readOnly) ? -1 : 0} onChange={e=>handleInput(e)} onKeyDown={e=>handleKeyPress(e)}/>\n                </InputWrapper>\n\n                <OperatorWrapper data-testid={'operators'} size={size}>\n                    <IconButton variant='secondary' shape='square' action={()=>subtractInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'subtract')}>\n                        <SystemIcons.Minus size='14px'/>\n                    </IconButton>                    \n                    <div className='divider'></div>\n                    <IconButton variant='secondary' shape='square' action={()=>addInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'add')}>\n                        <SystemIcons.Plus size='14px'/>\n                    </IconButton>\n                </OperatorWrapper>\n            </InputContainer>\n\n            {note && <NoteContainer className={'noteField'.concat(fieldState?` ${fieldState}`:'')}>\n                <NoteIcon>\n                    {noteIcon}\n                </NoteIcon>\n                <NoteLabel>\n                    {note}\n                </NoteLabel>                \n            </NoteContainer>\n            }\n        </Container>\n    );    \n}\n\nexport default NumberField;\n"],"file":"NumberField.cjs"}

package/dist/InputFields/NumberField.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Size } from '../types';
+declare type NumberFieldProps = {
+    size: Size.Small | Size.Medium;
+    prefix?: string;
+    interval?: number;
+    label: string;
+    note?: string;
+    noteIcon?: React.ReactNode;
+    required?: boolean;
+    minValue?: number;
+    maxValue?: number;
+    allowNegative?: boolean;
+    decimalPrecision?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    valid?: boolean;
+    defaultVal?: number;
+};
+declare const NumberField: React.FunctionComponent<NumberFieldProps>;
+export default NumberField;