npm - @laerdal/life-react-components - Versions diffs - 1.11.0-dev.6 → 1.11.0-dev.7 - Mend

@laerdal/life-react-components 1.11.0-dev.6 → 1.11.0-dev.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/dist/InputFields/DatepickerField.cjs +2 -2
package/dist/InputFields/DatepickerField.cjs.map +1 -1
package/dist/InputFields/DatepickerField.js +2 -2
package/dist/InputFields/DatepickerField.js.map +1 -1
package/dist/InputFields/NumberField.cjs +24 -42
package/dist/InputFields/NumberField.cjs.map +1 -1
package/dist/InputFields/NumberField.d.ts +4 -5
package/dist/InputFields/NumberField.js +24 -39
package/dist/InputFields/NumberField.js.map +1 -1
package/package.json +1 -1

package/dist/InputFields/DatepickerField.cjs CHANGED Viewed

@@ -56,13 +56,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /**
  * Add custom styles.
  */
-var DatePickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .react-datepicker-popper {\n    z-index: ", ";\n  }\n\n  > div {\n    display: block;\n\n    ", "\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ", ";\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ", "\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ", ";\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ", ";\n      background: ", ";\n      height: ", ";\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ", "\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ", "\n    }\n\n    .react-datepicker__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      ", "\n    }\n\n    .react-datepicker__year-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ", "\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ", ";\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      ", "\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__day--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ", ";\n        background: ", ";\n\n        &:hover {\n          color: ", ";\n          background: ", ";\n        }\n\n        &:focus {\n          ", "\n        }\n      }\n    }\n  }\n"])), _styles.Z_INDEXES.dropdown, function (props) {
+var DatePickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .react-datepicker-popper {\n    z-index: ", ";\n  }\n\n  > div {\n    display: block;\n\n    ", "\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n\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: ", ";\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ", "\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ", ";\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ", ";\n      background: ", ";\n      height: ", ";\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ", "\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ", "\n    }\n\n    .react-datepicker__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      ", "\n    }\n\n    .react-datepicker__year-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ", "\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ", ";\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      ", "\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__day--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ", ";\n        background: ", ";\n\n        &:hover {\n          color: ", ";\n          background: ", ";\n        }\n\n        &:focus {\n          ", "\n        }\n      }\n    }\n  }\n"])), _styles.Z_INDEXES.dropdown, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, _colors.default.primary_20, _styles.focusStyles, _colors.default.neutral_20, _colors.default.neutral_200, _colors.default.neutral_20, function (props) {
   return !props.yearPicker ? '96px' : '54px';
 }, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, _colors.default.neutral_600), (0, _styles.scrollBarStyling)(_types.Size.Small), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.neutral_600, _colors.default.white, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles, _colors.default.white, _colors.default.primary_500, _colors.default.white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _colors.default.neutral_600), _colors.default.neutral_600, _colors.default.white, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles, _colors.default.white, _colors.default.primary_500, _colors.default.neutral_700, _colors.default.neutral_100, _colors.default.primary_700, _colors.default.primary_20, _styles.focusStyles);
-var IconWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ", ";\n  color: ", ";\n"])), +_styles.Z_INDEXES.focus + 1, _colors.default.neutral_600);
+var IconWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ", ";\n  color: ", ";\n"])), _styles.Z_INDEXES.focus + 1, _colors.default.neutral_600);
 var DatepickerRow = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));

package/dist/InputFields/DatepickerField.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","focusStyles","neutral_20","neutral_200","yearPicker","ComponentTextStyle","Bold","neutral_600","Size","Small","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","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"],"mappings":"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","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 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';\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 = 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.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: 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', 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"],"file":"DatepickerField.cjs"}
1	+ {"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","focusStyles","neutral_20","neutral_200","yearPicker","ComponentTextStyle","Bold","neutral_600","Size","Small","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","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"],"mappings":";;;;;;;;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAGA;;AACA;;;;;;;;;;;;AAqBA;AACA;AACA;AACA,IAAMA,mBAAmB,GAAGC,0BAAOC,GAAV,87OAEVC,kBAAUC,QAFA,EAQnB,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CARmB,EA2BHC,gBAAOC,UA3BJ,EAuCfC,mBAvCe,EAsFIF,gBAAOG,UAtFX,EA0FQH,gBAAOI,WA1Ff,EA2FLJ,gBAAOG,UA3FF,EA4FT,UAACL,KAAD;AAAA,SAAY,CAACA,KAAK,CAACO,UAAP,GAAoB,MAApB,GAA6B,MAAzC;AAAA,CA5FS,EAsGjB,+BAAkBC,2BAAmBC,IAArC,EAA2CP,gBAAOQ,WAAlD,CAtGiB,EA6GjB,8BAAiBC,YAAKC,KAAtB,CA7GiB,EA6HjB,+BAAkBJ,2BAAmBK,OAArC,EAA8CX,gBAAOQ,WAArD,CA7HiB,EAiILR,gBAAOY,KAjIF,EA0IjB,+BAAkBN,2BAAmBK,OAArC,EAA8CX,gBAAOQ,WAArD,CA1IiB,EAgJRR,gBAAOQ,WAhJC,EAiJHR,gBAAOY,KAjJJ,EAuJRZ,gBAAOa,WAvJC,EAwJHb,gBAAOC,UAxJJ,EA4JfC,mBA5Je,EAgKRF,gBAAOY,KAhKC,EAiKHZ,gBAAOc,WAjKJ,EAsKLd,gBAAOY,KAtKF,EA+KjB,+BAAkBN,2BAAmBK,OAArC,EAA8CX,gBAAOQ,WAArD,CA/KiB,EAiLRR,gBAAOQ,WAjLC,EAkLHR,gBAAOY,KAlLJ,EAwLRZ,gBAAOa,WAxLC,EAyLHb,gBAAOC,UAzLJ,EA6LfC,mBA7Le,EAiMRF,gBAAOY,KAjMC,EAkMHZ,gBAAOc,WAlMJ,EAuMRd,gBAAOe,WAvMC,EAwMHf,gBAAOgB,WAxMJ,EA2MNhB,gBAAOa,WA3MD,EA4MDb,gBAAOC,UA5MN,EAgNbC,mBAhNa,CAAzB;;AAuNA,IAAMe,WAAW,GAAGvB,0BAAOC,GAAV,2NAMJC,kBAAUsB,KAAV,GAAkB,CANd,EAONlB,gBAAOQ,WAPD,CAAjB;;AAUA,IAAMW,aAAa,GAAGzB,0BAAOC,GAAV,yJAAnB;;AAMA,IAAMyB,uBAAuB,GAAG,+BAAOC,0BAAP,CAAH,kyBAEhBrB,gBAAOsB,WAFS,EAMWtB,gBAAOuB,WANlB,EAUWvB,gBAAOwB,WAVlB,EAadxB,gBAAOa,WAbO,EAiBLb,gBAAOC,UAjBF,EAkBhBD,gBAAOa,WAlBS,EAuBWb,gBAAOuB,WAvBlB,EAwBLvB,gBAAOyB,WAxBF,EAyBhBzB,gBAAO0B,WAzBS,EA4Bd1B,gBAAO0B,WA5BO,EAiCL1B,gBAAOY,KAjCF,EAoCfK,WApCe,EAqChBjB,gBAAOa,WArCS,EAwCdI,WAxCc,EAwCWA,WAxCX,EAyChBjB,gBAAO0B,WAzCS,EA4CZT,WA5CY,EA4CkBA,WA5ClB,EA6ChBjB,gBAAO2B,WA7CS,CAA7B;;AAiDA,IAAMC,eAAe,gBAAGC,eAAMC,UAAN,CAAiB,gBAiB0BC,GAjB1B,EAiBkC;AAAA,MAhB/BC,QAgB+B,QAhB/BA,QAgB+B;AAAA,MAf/BC,QAe+B,QAf/BA,QAe+B;AAAA,MAd/BC,SAc+B,QAd/BA,QAc+B;AAAA,MAb/BC,OAa+B,QAb/BA,OAa+B;AAAA,MAZ/BC,KAY+B,QAZ/BA,KAY+B;AAAA,MAX/BC,iBAW+B,QAX/BA,iBAW+B;AAAA,MAV/BC,UAU+B,QAV/BA,UAU+B;AAAA,MAT/BC,YAS+B,QAT/BA,YAS+B;AAAA,MAR/BC,WAQ+B,QAR/BA,WAQ+B;AAAA,MAP/BC,QAO+B,QAP/BA,QAO+B;AAAA,MAN/BpC,UAM+B,QAN/BA,UAM+B;AAAA,MAL/BqC,sBAK+B,QAL/BA,sBAK+B;AAAA,MAJ/BC,qBAI+B,QAJ/BA,qBAI+B;AAAA,MAH/B5C,MAG+B,QAH/BA,MAG+B;AAAA,MAF/B6C,MAE+B,QAF/BA,MAE+B;AAAA,MAD5BC,IAC4B;AACzE;AACA,MAAMC,QAAQ,GAAG,iCAAjB;;AACA,MAAMC,aAAa,GAAGlB,eAAMmB,MAAN,CAAkB,IAAlB,CAAtB;;AACA,wBAA8CnB,eAAMoB,QAAN,CAAuB,CAAC,CAAxB,CAA9C;AAAA;AAAA,MAAOC,eAAP;AAAA,MAAwBC,kBAAxB;;AACA,yBAA4CtB,eAAMoB,QAAN,CAAwB,KAAxB,CAA5C;AAAA;AAAA,MAAOG,cAAP;AAAA,MAAuBC,iBAAvB;;AACA,yBAA4BxB,eAAMoB,QAAN,CAA4B,IAA5B,CAA5B;AAAA;AAAA,MAAOK,MAAP;AAAA,MAAeC,SAAf,uBANyE,CAOzE;AACA;;;AACA,yBAAwB1B,eAAMoB,QAAN,CAAwB,KAAxB,CAAxB;AAAA;AAAA,MAAOO,IAAP;AAAA,MAAaC,OAAb;AAEA;AACF;AACA;;;AACE5B,iBAAM6B,SAAN,CAAgB,YAAM;AACpB,QAAItB,KAAJ,EAAWU,QAAQ,CAACa,OAAT,CAAiBvB,KAAjB,GAAyB,qBAAOA,KAAP,EAAcwB,MAAd,CAAqBtB,UAAU,GAAGA,UAAH,GAAgB,eAA/C,CAAzB;AACZ,GAFD,EAEG,CAACF,KAAD,CAFH;;AAIAP,iBAAM6B,SAAN,CAAgB,YAAM;AACpB,QAAIN,cAAJ,EAAoB;AAAA;;AAClB;AACA;AACA,UAAMS,YAAY,GAAGC,QAAQ,CAACC,sBAAT,CAAgC,uCAAhC,EAAyE,CAAzE,CAArB;AACA,UAAMC,cAAc,GAAGH,YAAH,aAAGA,YAAH,gDAAGA,YAAY,CAAEI,aAAjB,0DAAG,sBAA6BA,aAApD;AACA,UAAIJ,YAAY,IAAIG,cAApB,EAAoCA,cAAc,CAACE,SAAf,GAA2BL,YAAY,CAACM,SAAb,GAAyB,IAAIN,YAAY,CAACO,YAArE;AACrC;AACF,GARD,EAQG,CAAChB,cAAD,CARH,EAlByE,CA4BzE;AACA;;;AACAvB,iBAAM6B,SAAN,CAAgB,YAAM;AACpB,QAAIJ,MAAJ,EAAY;AACVP,MAAAA,aAAa,CAACY,OAAd,CAAsBF,OAAtB,CAA8B,IAA9B,EADU,CAEV;AACD;AACF,GALD,EAKG,CAACH,MAAD,CALH;;AAOAzB,iBAAMwC,mBAAN,CAA0BtC,GAA1B,EAA+B;AAAA,WAAMe,QAAQ,CAACa,OAAf;AAAA,GAA/B,EAAuD,CAACb,QAAD,CAAvD;;AAEA,MAAMwB,mBAAmB,GAAG,SAAtBA,mBAAsB,GAAM;AAAA;;AAChC,yBAAAxB,QAAQ,CAACa,OAAT,wEAAkBY,IAAlB;AACAd,IAAAA,OAAO,CAAC,KAAD,CAAP;AACD,GAHD;;AAKA,MAAMe,kBAAkB,GAAG,SAArBA,kBAAqB,GAAM;AAC/B,QAAIlB,MAAJ,EAAYC,SAAS,CAAC,IAAD,CAAT;AACZE,IAAAA,OAAO,CAAC,IAAD,CAAP;AACD,GAHD;;AAKA,MAAIgB,OAAO,GAAG,IAAIC,IAAJ,CAAStC,KAAK,IAAI,IAAIsC,IAAJ,CAAStC,KAAT,IAAkB,IAAIsC,IAAJ,EAA3B,GAAwC,IAAIA,IAAJ,CAAStC,KAAT,CAAxC,GAA0D,IAAIsC,IAAJ,EAAnE,CAAd;AACAD,EAAAA,OAAO,CAACE,WAAR,CAAoBF,OAAO,CAACG,WAAR,MAAyBjC,qBAAzB,aAAyBA,qBAAzB,cAAyBA,qBAAzB,GAAkD,EAAlD,CAApB,EAlDyE,CAoDzE;AACA;;AACA,MAAIkC,OAAO,GAAG,IAAIH,IAAJ,CAAStC,KAAK,IAAI,IAAIsC,IAAJ,CAAStC,KAAT,IAAkB,IAAIsC,IAAJ,EAA3B,GAAwC,IAAIA,IAAJ,CAAStC,KAAT,CAAxC,GAA0D,IAAIsC,IAAJ,EAAnE,CAAd;AACA,MAAMI,WAAW,GAAGC,IAAI,CAACC,KAAL,CAAW,CAACH,OAAO,CAACD,WAAR,MAAyBlC,sBAAzB,aAAyBA,sBAAzB,cAAyBA,sBAAzB,GAAmD,EAAnD,CAAD,IAA2D,CAAtE,CAApB;;AAEA,MAAMuC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAA4C;AAChE,QAAIA,CAAC,CAACC,GAAF,KAAU,QAAV,IAAsBD,CAAC,CAACC,GAAF,KAAU,KAApC,EACEpC,aAAa,CAACY,OAAd,CAAsBF,OAAtB,CAA8B,KAA9B;AACH,GAHD;;AAKA,MAAM2B,UAAU,GAAG,SAAbA,UAAa,CAACF,CAAD,EAAyC;AAC1D;AACA,QAAI,CAACA,CAAC,CAACG,aAAF,CAAgBC,QAAhB,CAAyBJ,CAAC,CAACK,aAA3B,CAAL,EAAgD;AAC9C3C,MAAAA,MAAM,IAAIA,MAAM,CAACsC,CAAD,CAAhB;AACD;AACF,GALD;;AAOA,sBACE;AAAA,4BAEE,qBAAC,mBAAD;AAAqB,MAAA,UAAU,EAAE9B,cAAjC;AAAiD,MAAA,MAAM,EAAErD,MAAM,IAAI,EAAnE;AAAuE,MAAA,MAAM,EAAEqF,UAA/E;AAAA,6BACE,qBAAC,wBAAD;AACE,QAAA,GAAG,EAAErC,aADP;AAEE,QAAA,cAAc,EAAEyB,kBAFlB;AAGE,QAAA,eAAe,EAAEF,mBAHnB;AAIE,QAAA,SAAS,EAAEW,aAJb;AAME,QAAA,cAAc,EAAE;AAAA,iBAAMlC,aAAa,CAACY,OAAd,CAAsBF,OAAtB,CAA8B,KAA9B,CAAN;AAAA,SANlB;AAQE,QAAA,QAAQ,EAAE,kBAACyB,CAAD,EAAY;AACpB,cAAIhD,SAAJ,EAAc;AACZ,gBAAIkB,cAAJ,EAAoB;AAClB,kBAAMoC,OAAO,GAAG,IAAId,IAAJ,EAAhB;AACAc,cAAAA,OAAO,CAACb,WAAR,CAAoBO,CAAC,CAACN,WAAF,EAApB;AACAY,cAAAA,OAAO,CAACC,QAAR,CAAiBvC,eAAjB;AACAK,cAAAA,SAAS,CAACiC,OAAD,CAAT;AACD,aALD,MAKOtD,SAAQ,CAACgD,CAAD,CAAR;AACR;;AACD,cAAI9B,cAAJ,EAAoBC,iBAAiB,CAAC,KAAD,CAAjB;AACrB,SAlBH;AAmBE,QAAA,QAAQ,EAAErB,QAAQ,IAAIC,QAnBxB;AAoBE,QAAA,MAAM,EAAEyD,aApBV;AAqBE,QAAA,cAAc,EAAEtC,cArBlB,CAsBE;AAtBF;AAuBE,QAAA,cAAc,EAAEA,cAAc,GAAG0B,WAAH,GAAiBa,SAvBjD;AAwBE,QAAA,OAAO,EAAEvC,cAAc,GAAGqB,OAAH,GAAakB,SAxBtC;AAyBE,QAAA,QAAQ,EAAEvD,KAzBZ;AA0BE,QAAA,UAAU,EAAEkB,MAAF,aAAEA,MAAF,cAAEA,MAAF,GAAYqC,SA1BxB;AA2BE,QAAA,kBAAkB,EAAE,IA3BtB;AA4BE,QAAA,mBAAmB,EAAE,IA5BvB;AA6BE,QAAA,kBAAkB,EAChBtF,UAAU,GACN,UAACuF,MAAD;AAAA,8BACA/D,eAAMgE,aAAN,CACEC,4CADF,kCAGOF,MAHP;AAIIzC,YAAAA,kBAAkB,EAAlBA,kBAJJ;AAKI4C,YAAAA,iBAAiB,EAAE,CALvB;AAMI3C,YAAAA,cAAc,EAAEA,cANpB;AAOIC,YAAAA,iBAAiB,EAAEA;AAPvB,cASE,IATF,CADA;AAAA,SADM,GAaNsC,SA3CR;AA6CE,QAAA,WAAW,eACT,qBAAC,qBAAD;AAAc,UAAA,QAAQ,EAAE3D,QAAxB;AAAkC,UAAA,QAAQ,EAAEC,QAA5C;AAAA,iCACE;AAAK,YAAA,KAAK,EAAE;AAAC+D,cAAAA,OAAO,EAAE,OAAV;AAAmBjG,cAAAA,MAAM,EAAE;AAA3B,aAAZ;AAAA,mCACE,sBAAC,aAAD;AAAA,sCACE,qBAAC,uBAAD;AACE,gBAAA,GAAG,EAAE+C,QADP;AAEE,gBAAA,IAAI,EAAC,MAFP;AAGE,gBAAA,IAAI,EAAC,YAHP;AAIE,gBAAA,SAAS,EAAE,mBAACoC,CAAD;AAAA,yBAAOA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBpC,aAAa,CAACY,OAAd,CAAsBF,OAAtB,CAA8B,IAA9B,CAA5B;AAAA,iBAJb;AAKE,gBAAA,SAAS,EAAGtB,OAAO,GAAG,SAAH,GAAe,MAAMqB,IAAI,GAAG,OAAH,GAAa,EAAvB,CALpC;AAME,gBAAA,QAAQ,EAAExB,QAAQ,IAAIC,QAAZ,GAAuB,CAAC,CAAxB,GAA4B,CANxC;AAOE,gBAAA,OAAO,EAAE,iBAACiD,CAAD;AAAA;;AAAA,+CAAOpC,QAAQ,CAACa,OAAhB,uDAAO,mBAAkBsC,iBAAlB,CAAoC,CAApC,EAAuC,CAAvC,CAAP;AAAA,iBAPX;AAQE,gBAAA,YAAY,EAAE1D,YARhB;AASE,gBAAA,WAAW,EAAEC,WATf;AAUE,gBAAA,QAAQ,EAAER,QAVZ;AAWE,gBAAA,QAAQ,EAAE,IAXZ;AAYE,gBAAA,sBAAsB,EAAE,CAACC,QAZ3B;AAaE,gBAAA,QAAQ,EAAEQ;AAbZ,iBAcMI,IAdN,EADF,eAiBE,qBAAC,WAAD;AAAA,uCACE,qBAAC,qBAAD;AAAU,kBAAA,IAAI,EAAC;AAAf;AADF,gBAjBF;AAAA;AADF;AADF;AA9CJ;AADF,MAFF,EA+EGR,iBAAiB,iBAChB,sBAAC,qBAAD;AAAA,8BACE,qBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAErC,gBAAOkG;AAAhC,QADF,eAEE;AAAA,kBAAO7D;AAAP,QAFF;AAAA,MAhFJ;AAAA,IADF;AAwFD,CA9KuB,CAAxB;;;AA1SED,EAAAA,K;AACAF,EAAAA,Q;AACAU,EAAAA,M;AAEAT,EAAAA,O;AACAG,EAAAA,U;AACAD,EAAAA,iB;AACAE,EAAAA,Y;AACAC,EAAAA,W;AACAnC,EAAAA,U;AACAqC,EAAAA,sB;AACAC,EAAAA,qB;AACA5C,EAAAA,M;;eA8ca6B,e","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 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';\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\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 = 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.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: 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', 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"],"file":"DatepickerField.cjs"}

package/dist/InputFields/DatepickerField.js CHANGED Viewed

@@ -52,12 +52,12 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Add custom styles.
  */
-var DatePickerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .react-datepicker-popper {\n    z-index: ", ";\n  }\n\n  > div {\n    display: block;\n\n    ", "\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ", ";\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ", "\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ", ";\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ", ";\n      background: ", ";\n      height: ", ";\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ", "\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ", "\n    }\n\n    .react-datepicker__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      ", "\n    }\n\n    .react-datepicker__year-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ", "\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ", ";\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      ", "\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__day--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ", ";\n        background: ", ";\n\n        &:hover {\n          color: ", ";\n          background: ", ";\n        }\n\n        &:focus {\n          ", "\n        }\n      }\n    }\n  }\n"])), Z_INDEXES.dropdown, function (props) {
+var DatePickerContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .react-datepicker-popper {\n    z-index: ", ";\n  }\n\n  > div {\n    display: block;\n\n    ", "\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n\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: ", ";\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ", "\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ", ";\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ", ";\n      background: ", ";\n      height: ", ";\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ", "\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ", "\n    }\n\n    .react-datepicker__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      ", "\n    }\n\n    .react-datepicker__year-text {\n      background: ", ";\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ", "\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ", ";\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      ", "\n      &.react-datepicker__day--keyboard-selected {\n        color: ", ";\n        background: ", ";\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ", ";\n        background: ", ";\n      }\n\n      &:focus {\n        ", "\n      }\n\n      &.react-datepicker__day--selected {\n        color: ", " !important;\n        background: ", " !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ", ";\n        background: ", ";\n\n        &:hover {\n          color: ", ";\n          background: ", ";\n        }\n\n        &:focus {\n          ", "\n        }\n      }\n    }\n  }\n"])), Z_INDEXES.dropdown, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 }, COLORS.primary_20, focusStyles, COLORS.neutral_20, COLORS.neutral_200, COLORS.neutral_20, function (props) {
   return !props.yearPicker ? '96px' : '54px';
 }, 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 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 ~ ", ", &.open ~ ", " {\n    color: ", ";\n  }\n\n  &:disabled ~ ", ", &: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 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {

package/dist/InputFields/DatepickerField.js.map CHANGED Viewed

	@@ -1 +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","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"],"mappings":"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","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 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';\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 = 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.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: 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', 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"],"file":"DatepickerField.js"}
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","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"],"mappings":"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","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 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';\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\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 = 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.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: 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', 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"],"file":"DatepickerField.js"}

package/dist/InputFields/NumberField.cjs CHANGED Viewed

@@ -37,9 +37,9 @@ var _types = require("../types");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["size", "label", "note", "noteIcon", "required", "prefix", "interval", "minValue", "maxValue", "allowNegative", "decimalPrecision", "disabled", "readOnly", "state", "value", "placeholder", "type", "onChange", "className"];
+var _excluded = ["type", "size", "note", "noteIcon", "required", "prefix", "interval", "minValue", "maxValue", "allowNegative", "decimalPrecision", "disabled", "readOnly", "state", "value", "placeholder", "onChange", "className"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 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); }
@@ -51,17 +51,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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, function (props) {
-  return props.size === _types.Size.Small ? (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null) : (0, _typography.ComponentXSStyling)(_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\n  svg {\n    height: 9px;\n    width: 9px;\n  }\n"])), function (props) {
-  return props.size === _types.Size.Small ? '6px' : '8px';
-});
-var PrefixContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  ", "\n  position: absolute;\n  padding: ", ";\n"])), function (props) {
+var PrefixContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  ", "\n  position: absolute;\n  padding: ", ";\n"])), function (props) {
   return props.size === _types.Size.Small ? '10px' : '11px';
 }, function (props) {
   return props.size === _types.Size.Small ? '20px' : '24px';
@@ -73,11 +63,11 @@ var PrefixContainer = _styledComponents.default.div(_templateObject5 || (_templa
   return props.size === _types.Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px';
 });
-var OperatorWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: flex;\n  margin: ", ";\n\n  svg {\n    height: 14px;\n    width: 14px;\n  }\n\n  .divider {\n    margin: 16px 0;\n    background: ", ";\n    width: 1px;\n  }\n"])), function (props) {
+var OperatorWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: flex;\n  margin: ", ";\n\n  svg {\n    height: 14px;\n    width: 14px;\n  }\n\n  .divider {\n    margin: 16px 0;\n    background: ", ";\n    width: 1px;\n  }\n"])), function (props) {
   return props.size === _types.Size.Medium ? '4px 0' : '';
 }, _styles.COLORS.neutral_200);
-var NumberInput = _styledComponents.default.input(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  border: none;\n  border-radius: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  outline: none;\n  color: ", ";\n\n  ", "\n  ", "\n  ", "\n  &::placeholder {\n    ", "\n  }\n\n  &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ", ";\n    cursor: not-allowed;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &.readOnly {\n    background: ", ";\n    box-shadow: inset 0 0 0 1px ", ";\n    cursor: not-allowed;\n    background: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    color: ", ";\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), _styles.COLORS.neutral_400, _styles.COLORS.neutral_500, function (props) {
+var NumberInput = _styledComponents.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  border: none;\n  border-radius: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  outline: none;\n  color: ", ";\n\n  ", "\n  ", "\n  ", "\n  &::placeholder {\n    ", "\n  }\n\n  &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ", ";\n    cursor: not-allowed;\n    color: ", ";\n    pointer-events: none;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &.readOnly {\n    background: ", ";\n    box-shadow: inset 0 0 0 1px ", ";\n    cursor: not-allowed;\n    background: ", ";\n    pointer-events: none;\n    color: ", ";\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), _styles.COLORS.neutral_400, _styles.COLORS.neutral_500, function (props) {
   return props.fieldSize === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black);
 }, function (props) {
   return props.type === 'NumberField' ? "\n        padding: ".concat(props.fieldSize === _types.Size.Small ? '14px 97px 14px 16px' : '16px 97px 16px 16px', ";\n        padding-left: ").concat(props.hasPrefix ? '30px' : '', ";\n    ") : '';
@@ -87,32 +77,33 @@ var NumberInput = _styledComponents.default.input(_templateObject7 || (_template
   return props.fieldSize === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, null) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, null);
 }, _styles.COLORS.primary_800, _styles.focusStyles, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_500, _styles.COLORS.correct_400, _styles.COLORS.critical_400);
-var NoteLabel = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  ", "\n"])), _styles.COLORS.neutral_500, function (props) {
+var NoteLabel = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  ", "\n"])), _styles.COLORS.neutral_500, function (props) {
   return props.size === _types.Size.Small ? (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null) : (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, null);
 });
-var NoteIcon = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  svg {\n    height: 16px;\n  }\n"])));
+var NoteIcon = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  svg {\n    height: 16px;\n  }\n"])));
-var NoteContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (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 NoteContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (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(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", ";\n  height: ", ";\n  display: flex;\n  position: relative;\n\n  input.focus-visible ~ div.operator {\n    z-index: ", ";\n  }\n"])), function (props) {
+var InputContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", ";\n  height: ", ";\n  display: flex;\n  position: relative;\n\n  input.focus-visible ~ div.operator {\n    z-index: ", ";\n  }\n"])), function (props) {
   return props.type === 'NumberField' ? '160px' : '144px';
 }, function (props) {
   return props.size === _types.Size.Small ? '48px' : '56px';
 }, _styles.Z_INDEXES.focus);
-var LeftOperator = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", ";\n  left: 0;\n"])), function (props) {
+var LeftOperator = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", ";\n  left: 0;\n"])), function (props) {
   return props.size === _types.Size.Small ? '0' : '4px';
 });
-var RightOperator = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", ";\n  right: 0;\n"])), function (props) {
+var RightOperator = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", ";\n  right: 0;\n"])), function (props) {
   return props.size === _types.Size.Small ? '0' : '4px';
 });
 var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$size = props.size,
-      size = _props$size === void 0 ? _types.Size.Small : _props$size,
-      label = props.label,
+  var _props$type = props.type,
+      type = _props$type === void 0 ? 'NumberField' : _props$type,
+      _props$size = props.size,
+      size = _props$size === void 0 ? _types.Size.Medium : _props$size,
       note = props.note,
       noteIcon = props.noteIcon,
       required = props.required,
@@ -128,7 +119,6 @@ var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
       state = props.state,
       value = props.value,
       placeholder = props.placeholder,
-      type = props.type,
       onChange = props.onChange,
       className = props.className,
       rest = (0, _objectWithoutProperties2.default)(props, _excluded);
@@ -139,13 +129,16 @@ var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setUserInput = _React$useState2[1];
   var elementRef = (0, _common.useFocusVisibleRef)();
+  React.useEffect(function () {
+    return setUserInput("".concat(value !== null && value !== void 0 ? value : ''));
+  }, [value]);
   React.useImperativeHandle(ref, function () {
     return elementRef.current;
   }, [elementRef]);
   var setVal = function setVal(e) {
     setUserInput(e);
-    onChange && onChange(e);
+    onChange && onChange(+e);
   };
   var handleKeyPress = function handleKeyPress(e) {
@@ -313,18 +306,7 @@ var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(LabelContainer, {
-      size: size,
-      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, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(InputContainer, {
       type: type,
       size: size,
       tabIndex: -1,
@@ -343,6 +325,7 @@ var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
         onKeyDown: function onKeyDown(e) {
           return handleKeyPress(e);
         },
+        required: required,
         className: 'numberField'.concat(disabled ? ' disabled' : '').concat(readOnly ? ' readOnly' : '').concat(state ? " ".concat(state) : '').concat(className ? " ".concat(className) : '')
       }, rest)), type === 'NumberField' && renderNumberFieldElements(), type === 'NumberInput' && renderNumberInputElements()]
     }), note && /*#__PURE__*/(0, _jsxRuntime.jsxs)(NoteContainer, {
@@ -359,14 +342,13 @@ var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
 NumberField.propTypes = {
   prefix: _propTypes.default.string,
   interval: _propTypes.default.number,
-  label: _propTypes.default.string.isRequired,
-  note: _propTypes.default.string,
-  noteIcon: _propTypes.default.node,
   minValue: _propTypes.default.number,
   maxValue: _propTypes.default.number,
   allowNegative: _propTypes.default.bool,
   decimalPrecision: _propTypes.default.number,
-  type: _propTypes.default.oneOf(['NumberField', 'NumberInput']).isRequired,
+  note: _propTypes.default.string,
+  noteIcon: _propTypes.default.node,
+  type: _propTypes.default.oneOf(['NumberField', 'NumberInput']),
   value: _propTypes.default.number,
   onChange: _propTypes.default.func
 };

package/dist/InputFields/NumberField.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/InputFields/NumberField.tsx"],"names":["Container","styled","div","LabelContainer","COLORS","neutral_500","props","size","Size","Small","ComponentTextStyle","Regular","LabelText","LabelIcon","PrefixContainer","disabled","neutral_300","OperatorWrapper","Medium","neutral_200","NumberInput","input","neutral_400","fieldSize","black","type","hasPrefix","Italic","primary_800","focusStyles","primary_700","neutral_100","correct_400","critical_400","NoteLabel","NoteIcon","NoteContainer","correct_500","critical_500","InputContainer","Z_INDEXES","focus","LeftOperator","RightOperator","NumberField","React","forwardRef","ref","label","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","readOnly","state","value","placeholder","onChange","className","rest","useState","toString","userInput","setUserInput","elementRef","useImperativeHandle","current","setVal","e","handleKeyPress","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","undefined","negativeAndDecimalRegex","val","target","length","charAt","test","isInRange","replace","indexOf","lastIndexOf","includes","isDecimal","x","parseFloat","toFixed","parseInt","isNaN","Math","round","pow","isLocked","operator","operatorState","renderNumberFieldElements","renderNumberInputElements","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {IconButton} from '../Button';\nimport {useFocusVisibleRef} from '../common';\nimport {SystemIcons} from '../icons';\nimport {COLORS, focusStyles, Z_INDEXES} from '../styles';\nimport {\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXXSStyling,\n ComponentXSStyling\n} from '../styles/typography';\nimport {Size, States} from '../types';\n\nconst Container = styled.div``;\n\nconst LabelContainer = styled.div<{ size: Size }>`\n margin-bottom: 4px;\n color: ${COLORS.neutral_500};\n display: flex;\n ${props => props.size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, null) : ComponentXSStyling(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\n svg {\n height: 9px;\n width: 9px;\n }\n`;\n\nconst PrefixContainer = styled.div<{ size: Size, disabled: boolean }>`\n width: ${props => props.size === Size.Small ? '10px' : '11px'};\n height: ${props => props.size === Size.Small ? '20px' : '24px'};\n color: ${props => props.disabled ? COLORS.neutral_300 : COLORS.neutral_500};\n ${props => props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, null) : ComponentMStyling(ComponentTextStyle.Regular, null)}\n position: absolute;\n padding: ${props => props.size === Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px'};\n`;\n\nconst OperatorWrapper = styled.div<{ size: Size }>`\n position: absolute;\n top: 0;\n right: 0;\n display: flex;\n margin: ${props => props.size === Size.Medium ? '4px 0' : ''};\n\n svg {\n height: 14px;\n width: 14px;\n }\n\n .divider {\n margin: 16px 0;\n background: ${COLORS.neutral_200};\n width: 1px;\n }\n`;\n\nconst NumberInput = styled.input<{ fieldSize: Size, hasPrefix: boolean, type: string }>`\n width: 100%;\n border: none;\n border-radius: 4px;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n outline: none;\n color: ${COLORS.neutral_500};\n\n ${props => props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.black) : ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n ${props => props.type === 'NumberField' ? `\n padding: ${props.fieldSize === Size.Small ? '14px 97px 14px 16px' : '16px 97px 16px 16px'};\n padding-left: ${props.hasPrefix ? '30px' : ''};\n ` : ''}\n ${props => props.type === 'NumberInput' ? `\n padding: ${props.fieldSize === Size.Small ? '14px 48px' : '16px 48px'};\n ` : ''}\n &::placeholder {\n ${props => props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Italic, null) : ComponentMStyling(ComponentTextStyle.Italic, null)}\n }\n\n &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n &.focus-visible {\n ${focusStyles}\n }\n\n &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n &.disabled {\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n cursor: not-allowed;\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n\n &::placeholder {\n color: ${COLORS.neutral_300};\n }\n }\n\n &.readOnly {\n background: ${COLORS.neutral_100};\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_300};\n cursor: not-allowed;\n background: ${COLORS.neutral_100};\n cursor: not-allowed;\n pointer-events: none;\n color: ${COLORS.neutral_500};\n }\n\n &.valid {\n box-shadow: inset 0 0 0 2px ${COLORS.correct_400};\n }\n\n &.invalid {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n }\n`;\n\nconst NoteLabel = styled.div<{ size: Size }>`\n color: ${COLORS.neutral_500};\n ${props => props.size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, null) : ComponentXSStyling(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, type: string }>`\n min-width: ${props => props.type === 'NumberField' ? '160px' : '144px'};\n height: ${props => props.size === Size.Small ? '48px' : '56px'};\n display: flex;\n position: relative;\n\n input.focus-visible ~ div.operator {\n z-index: ${Z_INDEXES.focus};\n }\n`;\n\nconst LeftOperator = styled.div<{ size: Size }>`\n position: absolute;\n top: ${props => props.size === Size.Small ? '0' : '4px'};\n left: 0;\n`;\n\nconst RightOperator = styled.div<{ size: Size }>`\n position: absolute;\n top: ${props => props.size === Size.Small ? '0' : '4px'};\n right: 0;\n`;\n\ntype NumberFieldProps =\n Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' \| 'onKeyDown' \| 'onClick' \| 'tabIndex' \| 'size' \| 'value' \| 'prefix' \| 'min' \| 'max'>\n & {\n size?: Size.Small \| Size.Medium;\n prefix?: string;\n interval?: number;\n label: string;\n note?: string;\n noteIcon?: React.ReactNode;\n\n minValue?: number;\n maxValue?: number;\n allowNegative?: boolean;\n decimalPrecision?: number;\n\n state?: States.Valid \| States.Invalid;\n\n type: 'NumberField' \| 'NumberInput';\n value?: number;\n onChange?: (e: string) => void;\n}\n\nconst NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>((props, ref) => {\n const {\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,\n readOnly,\n state,\n value,\n placeholder,\n type,\n onChange,\n className,\n ...rest\n } = props;\n\n const [userInput, setUserInput] = React.useState(value ? value.toString() : '');\n\n const elementRef = useFocusVisibleRef();\n\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n const setVal = (e: string) => {\n setUserInput(e);\n onChange && onChange(e);\n }\n\n const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n switch (e.key) {\n case 'ArrowUp':\n addInterval();\n break;\n case 'ArrowDown':\n subtractInterval();\n break;\n default:\n 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 setVal(val);\n else {\n if ((negativeAndDecimalRegex!.test(val) \|\| decimalPrecisionRegex!.test(val)) && isInRange(val, true))\n setVal(val);\n\n else if ((negativeDecimalFormationRegEx.test(val) \|\| decimalFormationRegEx.test(val)) && isInRange(val.replace('.', ''), true))\n setVal(val);\n\n else if ((allowNegativeRegex.test(val) \|\| simpleRegex.test(val)) && isInRange(val, true))\n setVal(val);\n }\n } else if (allowNegative) {\n if (val.length === 1 && val.charAt(0) === '-')\n setVal(val);\n else if ((allowNegativeRegex.test(val) \|\| simpleRegex.test(val)) && isInRange(val, false))\n setVal(val);\n } else if (decimalPrecision && (val.indexOf('.') === val.lastIndexOf('.')) && isInRange(val, true)) {\n if (decimalPrecisionRegex!.test(val))\n setVal(val);\n else if (decimalFormationRegEx.test(val))\n setVal(val);\n else if (!val.includes('.') && simpleRegex.test(val))\n setVal(val);\n } else if (simpleRegex.test(val) && isInRange(val, false)) {\n setVal(val);\n }\n }\n\n if (val === '')\n setVal('');\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 ? minValue - 1 : 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 setVal(val.toString());\n else if (!maxValue)\n setVal(val.toString());\n }\n }\n\n const subtractInterval = () => {\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n val = isNaN(val) && userInput === '' ? (maxValue ? maxValue + 1 : 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) \|\| !minValue) {\n if (allowNegative \|\| val >= 0) {\n setVal(val.toString());\n }\n }\n }\n }\n\n const isLocked = (input: string, operator: string): boolean => {\n let val = decimalPrecision ? parseFloat(input) : parseInt(input);\n val = isNaN(val) && userInput === '' ? 0 : val;\n let operatorState = false;\n if (operator === 'add' && maxValue)\n operatorState = val >= maxValue;\n\n if (operator === 'subtract' && minValue)\n operatorState = val <= minValue;\n\n if (operator === 'subtract' && !minValue && !allowNegative)\n operatorState = val <= 0;\n\n return operatorState;\n }\n\n const renderNumberFieldElements = () => {\n return (\n <>\n {prefix && <PrefixContainer size={size} disabled={!!disabled} className=\"operator\">\n {prefix}\n </PrefixContainer>}\n\n <OperatorWrapper data-testid={'operators'} size={size} className=\"operator\">\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => subtractInterval()}\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'subtract')}>\n <SystemIcons.Minus size=\"14px\"/>\n </IconButton>\n <div className=\"divider\"></div>\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => addInterval()}\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'add')}>\n <SystemIcons.Plus size=\"14px\"/>\n </IconButton>\n </OperatorWrapper>\n </>)\n }\n\n const renderNumberInputElements = () => {\n return (\n <>\n <LeftOperator data-testid={'leftOperator'} size={size} className=\"operator\">\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => subtractInterval()}\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'subtract')}>\n <SystemIcons.Minus size=\"14px\"/>\n </IconButton>\n </LeftOperator>\n <RightOperator data-testid={'rightOperator'} size={size} className=\"operator\">\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => addInterval()}\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'add')}>\n <SystemIcons.Plus size=\"14px\"/>\n </IconButton>\n </RightOperator>\n </>)\n }\n\n return (\n <Container>\n <LabelContainer size={size}>\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 type={type} size={size} tabIndex={-1}>\n <NumberInput type={type}\n data-testid={'numberInput'}\n fieldSize={size}\n hasPrefix={!!prefix}\n placeholder={placeholder ? placeholder : 'Enter number'}\n value={userInput}\n ref={elementRef}\n tabIndex={(disabled \|\| readOnly) ? -1 : 0}\n onChange={e => handleInput(e)}\n onKeyDown={e => handleKeyPress(e)}\n className={'numberField'.concat(disabled ? ' disabled' : '')\n .concat(readOnly ? ' readOnly' : '')\n .concat(state ? ` ${state}` : '')\n .concat(className ? ` ${className}` : '')}\n {...rest}/>\n\n {type === 'NumberField' && renderNumberFieldElements()}\n {type === 'NumberInput' && renderNumberInputElements()}\n </InputContainer>\n\n {note && <NoteContainer className={'noteField'.concat(state ? ` ${state}` : '')}>\n <NoteIcon>\n {noteIcon}\n </NoteIcon>\n <NoteLabel size={size}>\n {note}\n </NoteLabel>\n </NoteContainer>\n }\n </Container>\n );\n }\n )\n;\n\nexport default NumberField;\n"],"file":"NumberField.cjs"}
1	+ {"version":3,"sources":["../../src/InputFields/NumberField.tsx"],"names":["Container","styled","div","PrefixContainer","props","size","Size","Small","disabled","COLORS","neutral_300","neutral_500","ComponentTextStyle","Regular","OperatorWrapper","Medium","neutral_200","NumberInput","input","neutral_400","fieldSize","black","type","hasPrefix","Italic","primary_800","focusStyles","primary_700","neutral_100","correct_400","critical_400","NoteLabel","NoteIcon","NoteContainer","correct_500","critical_500","InputContainer","Z_INDEXES","focus","LeftOperator","RightOperator","NumberField","React","forwardRef","ref","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","readOnly","state","value","placeholder","onChange","className","rest","useState","toString","userInput","setUserInput","elementRef","useEffect","useImperativeHandle","current","setVal","e","handleKeyPress","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","undefined","negativeAndDecimalRegex","val","target","length","charAt","test","isInRange","replace","indexOf","lastIndexOf","includes","isDecimal","x","parseFloat","toFixed","parseInt","isNaN","Math","round","pow","isLocked","operator","operatorState","renderNumberFieldElements","renderNumberInputElements","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {IconButton} from '../Button';\nimport {useFocusVisibleRef} from '../common';\nimport {SystemIcons} from '../icons';\nimport {COLORS, focusStyles, Z_INDEXES} from '../styles';\nimport {\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXXSStyling,\n ComponentXSStyling\n} from '../styles/typography';\nimport {Size, States} from '../types';\n\nconst Container = styled.div``;\n\nconst PrefixContainer = styled.div<{ size: Size, disabled: boolean }>`\n width: ${props => props.size === Size.Small ? '10px' : '11px'};\n height: ${props => props.size === Size.Small ? '20px' : '24px'};\n color: ${props => props.disabled ? COLORS.neutral_300 : COLORS.neutral_500};\n ${props => props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, null) : ComponentMStyling(ComponentTextStyle.Regular, null)}\n position: absolute;\n padding: ${props => props.size === Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px'};\n`;\n\nconst OperatorWrapper = styled.div<{ size: Size }>`\n position: absolute;\n top: 0;\n right: 0;\n display: flex;\n margin: ${props => props.size === Size.Medium ? '4px 0' : ''};\n\n svg {\n height: 14px;\n width: 14px;\n }\n\n .divider {\n margin: 16px 0;\n background: ${COLORS.neutral_200};\n width: 1px;\n }\n`;\n\nconst NumberInput = styled.input<{ fieldSize: Size, hasPrefix: boolean, type: string }>`\n width: 100%;\n border: none;\n border-radius: 4px;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n outline: none;\n color: ${COLORS.neutral_500};\n\n ${props => props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.black) : ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n ${props => props.type === 'NumberField' ? `\n padding: ${props.fieldSize === Size.Small ? '14px 97px 14px 16px' : '16px 97px 16px 16px'};\n padding-left: ${props.hasPrefix ? '30px' : ''};\n ` : ''}\n ${props => props.type === 'NumberInput' ? `\n padding: ${props.fieldSize === Size.Small ? '14px 48px' : '16px 48px'};\n ` : ''}\n &::placeholder {\n ${props => props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Italic, null) : ComponentMStyling(ComponentTextStyle.Italic, null)}\n }\n\n &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n &.focus-visible {\n ${focusStyles}\n }\n\n &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n &.disabled {\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n cursor: not-allowed;\n color: ${COLORS.neutral_300};\n pointer-events: none;\n\n &::placeholder {\n color: ${COLORS.neutral_300};\n }\n }\n\n &.readOnly {\n background: ${COLORS.neutral_100};\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_300};\n cursor: not-allowed;\n background: ${COLORS.neutral_100};\n pointer-events: none;\n color: ${COLORS.neutral_500};\n }\n\n &.valid {\n box-shadow: inset 0 0 0 2px ${COLORS.correct_400};\n }\n\n &.invalid {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n }\n`;\n\nconst NoteLabel = styled.div<{ size: Size }>`\n color: ${COLORS.neutral_500};\n ${props => props.size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, null) : ComponentXSStyling(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, type: string }>`\n min-width: ${props => props.type === 'NumberField' ? '160px' : '144px'};\n height: ${props => props.size === Size.Small ? '48px' : '56px'};\n display: flex;\n position: relative;\n\n input.focus-visible ~ div.operator {\n z-index: ${Z_INDEXES.focus};\n }\n`;\n\nconst LeftOperator = styled.div<{ size: Size }>`\n position: absolute;\n top: ${props => props.size === Size.Small ? '0' : '4px'};\n left: 0;\n`;\n\nconst RightOperator = styled.div<{ size: Size }>`\n position: absolute;\n top: ${props => props.size === Size.Small ? '0' : '4px'};\n right: 0;\n`;\n\ntype NumberFieldProps =\n Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' \| 'onKeyDown' \| 'onClick' \| 'tabIndex' \| 'size' \| 'value' \| 'prefix' \| 'min' \| 'max'>\n & {\n size?: Size.Small \| Size.Medium;\n prefix?: string;\n interval?: number;\n\n minValue?: number;\n maxValue?: number;\n allowNegative?: boolean;\n decimalPrecision?: number;\n\n state?: States.Valid \| States.Invalid;\n note?: string;\n noteIcon?: React.ReactNode;\n\n type?: 'NumberField' \| 'NumberInput';\n value?: number;\n onChange?: (e: number) => void;\n}\n\nconst NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>((props, ref) => {\n const {\n type = 'NumberField',\n size = Size.Medium,\n note,\n noteIcon,\n required,\n prefix,\n interval = 1,\n minValue,\n maxValue,\n allowNegative,\n decimalPrecision,\n disabled,\n readOnly,\n state,\n value,\n placeholder,\n onChange,\n className,\n ...rest\n } = props;\n\n const [userInput, setUserInput] = React.useState(value ? value.toString() : '');\n\n const elementRef = useFocusVisibleRef();\n\n React.useEffect(() => setUserInput(`${value ?? ''}`), [value]);\n\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n const setVal = (e: string) => {\n setUserInput(e);\n onChange && onChange(+e);\n }\n\n const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n switch (e.key) {\n case 'ArrowUp':\n addInterval();\n break;\n case 'ArrowDown':\n subtractInterval();\n break;\n default:\n 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 setVal(val);\n else {\n if ((negativeAndDecimalRegex!.test(val) \|\| decimalPrecisionRegex!.test(val)) && isInRange(val, true))\n setVal(val);\n\n else if ((negativeDecimalFormationRegEx.test(val) \|\| decimalFormationRegEx.test(val)) && isInRange(val.replace('.', ''), true))\n setVal(val);\n\n else if ((allowNegativeRegex.test(val) \|\| simpleRegex.test(val)) && isInRange(val, true))\n setVal(val);\n }\n } else if (allowNegative) {\n if (val.length === 1 && val.charAt(0) === '-')\n setVal(val);\n else if ((allowNegativeRegex.test(val) \|\| simpleRegex.test(val)) && isInRange(val, false))\n setVal(val);\n } else if (decimalPrecision && (val.indexOf('.') === val.lastIndexOf('.')) && isInRange(val, true)) {\n if (decimalPrecisionRegex!.test(val))\n setVal(val);\n else if (decimalFormationRegEx.test(val))\n setVal(val);\n else if (!val.includes('.') && simpleRegex.test(val))\n setVal(val);\n } else if (simpleRegex.test(val) && isInRange(val, false)) {\n setVal(val);\n }\n }\n\n if (val === '')\n setVal('');\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 ? minValue - 1 : 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 setVal(val.toString());\n else if (!maxValue)\n setVal(val.toString());\n }\n }\n\n const subtractInterval = () => {\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n val = isNaN(val) && userInput === '' ? (maxValue ? maxValue + 1 : 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) \|\| !minValue) {\n if (allowNegative \|\| val >= 0) {\n setVal(val.toString());\n }\n }\n }\n }\n\n const isLocked = (input: string, operator: string): boolean => {\n let val = decimalPrecision ? parseFloat(input) : parseInt(input);\n val = isNaN(val) && userInput === '' ? 0 : val;\n let operatorState = false;\n if (operator === 'add' && maxValue)\n operatorState = val >= maxValue;\n\n if (operator === 'subtract' && minValue)\n operatorState = val <= minValue;\n\n if (operator === 'subtract' && !minValue && !allowNegative)\n operatorState = val <= 0;\n\n return operatorState;\n }\n\n const renderNumberFieldElements = () => {\n return (\n <>\n {prefix && <PrefixContainer size={size} disabled={!!disabled} className=\"operator\">\n {prefix}\n </PrefixContainer>}\n\n <OperatorWrapper data-testid={'operators'} size={size} className=\"operator\">\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => subtractInterval()}\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'subtract')}>\n <SystemIcons.Minus size=\"14px\"/>\n </IconButton>\n <div className=\"divider\"></div>\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => addInterval()}\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'add')}>\n <SystemIcons.Plus size=\"14px\"/>\n </IconButton>\n </OperatorWrapper>\n </>)\n }\n\n const renderNumberInputElements = () => {\n return (\n <>\n <LeftOperator data-testid={'leftOperator'} size={size} className=\"operator\">\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => subtractInterval()}\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'subtract')}>\n <SystemIcons.Minus size=\"14px\"/>\n </IconButton>\n </LeftOperator>\n <RightOperator data-testid={'rightOperator'} size={size} className=\"operator\">\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => addInterval()}\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'add')}>\n <SystemIcons.Plus size=\"14px\"/>\n </IconButton>\n </RightOperator>\n </>)\n }\n\n return (\n <Container>\n <InputContainer type={type} size={size} tabIndex={-1}>\n <NumberInput type={type}\n data-testid={'numberInput'}\n fieldSize={size}\n hasPrefix={!!prefix}\n placeholder={placeholder ? placeholder : 'Enter number'}\n value={userInput}\n ref={elementRef}\n tabIndex={(disabled \|\| readOnly) ? -1 : 0}\n onChange={e => handleInput(e)}\n onKeyDown={e => handleKeyPress(e)}\n required={required}\n className={'numberField'.concat(disabled ? ' disabled' : '')\n .concat(readOnly ? ' readOnly' : '')\n .concat(state ? ` ${state}` : '')\n .concat(className ? ` ${className}` : '')}\n {...rest}/>\n\n {type === 'NumberField' && renderNumberFieldElements()}\n {type === 'NumberInput' && renderNumberInputElements()}\n </InputContainer>\n\n {note && <NoteContainer className={'noteField'.concat(state ? ` ${state}` : '')}>\n <NoteIcon>\n {noteIcon}\n </NoteIcon>\n <NoteLabel size={size}>\n {note}\n </NoteLabel>\n </NoteContainer>\n }\n </Container>\n );\n }\n )\n;\n\nexport default NumberField;\n"],"file":"NumberField.cjs"}

package/dist/InputFields/NumberField.d.ts CHANGED Viewed

@@ -4,16 +4,15 @@ declare const NumberField: React.ForwardRefExoticComponent<Omit<React.InputHTMLA
     size?: Size.Small | Size.Medium | undefined;
     prefix?: string | undefined;
     interval?: number | undefined;
-    label: string;
-    note?: string | undefined;
-    noteIcon?: React.ReactNode;
     minValue?: number | undefined;
     maxValue?: number | undefined;
     allowNegative?: boolean | undefined;
     decimalPrecision?: number | undefined;
     state?: States.Valid | States.Invalid | undefined;
-    type: 'NumberField' | 'NumberInput';
+    note?: string | undefined;
+    noteIcon?: React.ReactNode;
+    type?: "NumberField" | "NumberInput" | undefined;
     value?: number | undefined;
-    onChange?: ((e: string) => void) | undefined;
+    onChange?: ((e: number) => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export default NumberField;

package/dist/InputFields/NumberField.js CHANGED Viewed

@@ -3,9 +3,9 @@ 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 = ["size", "label", "note", "noteIcon", "required", "prefix", "interval", "minValue", "maxValue", "allowNegative", "decimalPrecision", "disabled", "readOnly", "state", "value", "placeholder", "type", "onChange", "className"];
+var _excluded = ["type", "size", "note", "noteIcon", "required", "prefix", "interval", "minValue", "maxValue", "allowNegative", "decimalPrecision", "disabled", "readOnly", "state", "value", "placeholder", "onChange", "className"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -23,14 +23,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
-var LabelContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-bottom: 4px;\n  color: ", ";\n  display: flex;\n  ", "\n"])), COLORS.neutral_500, function (props) {
-  return props.size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, null) : ComponentXSStyling(ComponentTextStyle.Regular, null);
-});
-var LabelText = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
-var LabelIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin-right: ", ";\n\n  svg {\n    height: 9px;\n    width: 9px;\n  }\n"])), function (props) {
-  return props.size === Size.Small ? '6px' : '8px';
-});
-var PrefixContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  ", "\n  position: absolute;\n  padding: ", ";\n"])), function (props) {
+var PrefixContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  ", "\n  position: absolute;\n  padding: ", ";\n"])), function (props) {
   return props.size === Size.Small ? '10px' : '11px';
 }, function (props) {
   return props.size === Size.Small ? '20px' : '24px';
@@ -41,10 +34,10 @@ var PrefixContainer = styled.div(_templateObject5 || (_templateObject5 = _tagged
 }, function (props) {
   return props.size === Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px';
 });
-var OperatorWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: flex;\n  margin: ", ";\n\n  svg {\n    height: 14px;\n    width: 14px;\n  }\n\n  .divider {\n    margin: 16px 0;\n    background: ", ";\n    width: 1px;\n  }\n"])), function (props) {
+var OperatorWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: flex;\n  margin: ", ";\n\n  svg {\n    height: 14px;\n    width: 14px;\n  }\n\n  .divider {\n    margin: 16px 0;\n    background: ", ";\n    width: 1px;\n  }\n"])), function (props) {
   return props.size === Size.Medium ? '4px 0' : '';
 }, COLORS.neutral_200);
-var NumberInput = styled.input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 100%;\n  border: none;\n  border-radius: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  outline: none;\n  color: ", ";\n\n  ", "\n  ", "\n  ", "\n  &::placeholder {\n    ", "\n  }\n\n  &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ", ";\n    cursor: not-allowed;\n    color: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &.readOnly {\n    background: ", ";\n    box-shadow: inset 0 0 0 1px ", ";\n    cursor: not-allowed;\n    background: ", ";\n    cursor: not-allowed;\n    pointer-events: none;\n    color: ", ";\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), COLORS.neutral_400, COLORS.neutral_500, function (props) {
+var NumberInput = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  border: none;\n  border-radius: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  outline: none;\n  color: ", ";\n\n  ", "\n  ", "\n  ", "\n  &::placeholder {\n    ", "\n  }\n\n  &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ", ";\n    cursor: not-allowed;\n    color: ", ";\n    pointer-events: none;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &.readOnly {\n    background: ", ";\n    box-shadow: inset 0 0 0 1px ", ";\n    cursor: not-allowed;\n    background: ", ";\n    pointer-events: none;\n    color: ", ";\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), COLORS.neutral_400, COLORS.neutral_500, function (props) {
   return props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.black) : ComponentMStyling(ComponentTextStyle.Regular, COLORS.black);
 }, function (props) {
   return props.type === 'NumberField' ? "\n        padding: ".concat(props.fieldSize === Size.Small ? '14px 97px 14px 16px' : '16px 97px 16px 16px', ";\n        padding-left: ").concat(props.hasPrefix ? '30px' : '', ";\n    ") : '';
@@ -53,26 +46,27 @@ var NumberInput = styled.input(_templateObject7 || (_templateObject7 = _taggedTe
 }, function (props) {
   return props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Italic, null) : ComponentMStyling(ComponentTextStyle.Italic, null);
 }, COLORS.primary_800, focusStyles, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_500, COLORS.correct_400, COLORS.critical_400);
-var NoteLabel = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", "\n"])), COLORS.neutral_500, function (props) {
+var NoteLabel = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  ", "\n"])), COLORS.neutral_500, function (props) {
   return props.size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, null) : ComponentXSStyling(ComponentTextStyle.Regular, null);
 });
-var NoteIcon = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  svg {\n    height: 16px;\n  }\n"])));
-var NoteContainer = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\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, COLORS.correct_500, NoteIcon, COLORS.correct_500, NoteLabel, COLORS.critical_500, NoteIcon, COLORS.critical_500);
-var InputContainer = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  min-width: ", ";\n  height: ", ";\n  display: flex;\n  position: relative;\n\n  input.focus-visible ~ div.operator {\n    z-index: ", ";\n  }\n"])), function (props) {
+var NoteIcon = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  svg {\n    height: 16px;\n  }\n"])));
+var NoteContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\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, COLORS.correct_500, NoteIcon, COLORS.correct_500, NoteLabel, COLORS.critical_500, NoteIcon, COLORS.critical_500);
+var InputContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  min-width: ", ";\n  height: ", ";\n  display: flex;\n  position: relative;\n\n  input.focus-visible ~ div.operator {\n    z-index: ", ";\n  }\n"])), function (props) {
   return props.type === 'NumberField' ? '160px' : '144px';
 }, function (props) {
   return props.size === Size.Small ? '48px' : '56px';
 }, Z_INDEXES.focus);
-var LeftOperator = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", ";\n  left: 0;\n"])), function (props) {
+var LeftOperator = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", ";\n  left: 0;\n"])), function (props) {
   return props.size === Size.Small ? '0' : '4px';
 });
-var RightOperator = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", ";\n  right: 0;\n"])), function (props) {
+var RightOperator = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", ";\n  right: 0;\n"])), function (props) {
   return props.size === Size.Small ? '0' : '4px';
 });
 var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$size = props.size,
-      size = _props$size === void 0 ? Size.Small : _props$size,
-      label = props.label,
+  var _props$type = props.type,
+      type = _props$type === void 0 ? 'NumberField' : _props$type,
+      _props$size = props.size,
+      size = _props$size === void 0 ? Size.Medium : _props$size,
       note = props.note,
       noteIcon = props.noteIcon,
       required = props.required,
@@ -88,7 +82,6 @@ var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
       state = props.state,
       value = props.value,
       placeholder = props.placeholder,
-      type = props.type,
       onChange = props.onChange,
       className = props.className,
       rest = _objectWithoutProperties(props, _excluded);
@@ -99,13 +92,16 @@ var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setUserInput = _React$useState2[1];
   var elementRef = useFocusVisibleRef();
+  React.useEffect(function () {
+    return setUserInput("".concat(value !== null && value !== void 0 ? value : ''));
+  }, [value]);
   React.useImperativeHandle(ref, function () {
     return elementRef.current;
   }, [elementRef]);
   var setVal = function setVal(e) {
     setUserInput(e);
-    onChange && onChange(e);
+    onChange && onChange(+e);
   };
   var handleKeyPress = function handleKeyPress(e) {
@@ -273,18 +269,7 @@ var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
   return /*#__PURE__*/_jsxs(Container, {
-    children: [/*#__PURE__*/_jsxs(LabelContainer, {
-      size: size,
-      children: [required && /*#__PURE__*/_jsx(LabelIcon, {
-        size: size,
-        "data-testid": 'labelIcon',
-        children: /*#__PURE__*/_jsx(SystemIcons.Asterisk, {
-          color: COLORS.critical_500
-        })
-      }), /*#__PURE__*/_jsx(LabelText, {
-        children: label
-      })]
-    }), /*#__PURE__*/_jsxs(InputContainer, {
+    children: [/*#__PURE__*/_jsxs(InputContainer, {
       type: type,
       size: size,
       tabIndex: -1,
@@ -303,6 +288,7 @@ var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
         onKeyDown: function onKeyDown(e) {
           return handleKeyPress(e);
         },
+        required: required,
         className: 'numberField'.concat(disabled ? ' disabled' : '').concat(readOnly ? ' readOnly' : '').concat(state ? " ".concat(state) : '').concat(className ? " ".concat(className) : '')
       }, rest)), type === 'NumberField' && renderNumberFieldElements(), type === 'NumberInput' && renderNumberInputElements()]
     }), note && /*#__PURE__*/_jsxs(NoteContainer, {
@@ -319,14 +305,13 @@ var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
 NumberField.propTypes = {
   prefix: _pt.string,
   interval: _pt.number,
-  label: _pt.string.isRequired,
-  note: _pt.string,
-  noteIcon: _pt.node,
   minValue: _pt.number,
   maxValue: _pt.number,
   allowNegative: _pt.bool,
   decimalPrecision: _pt.number,
-  type: _pt.oneOf(['NumberField', 'NumberInput']).isRequired,
+  note: _pt.string,
+  noteIcon: _pt.node,
+  type: _pt.oneOf(['NumberField', 'NumberInput']),
   value: _pt.number,
   onChange: _pt.func
 };

package/dist/InputFields/NumberField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/InputFields/NumberField.tsx"],"names":["React","styled","IconButton","useFocusVisibleRef","SystemIcons","COLORS","focusStyles","Z_INDEXES","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXXSStyling","ComponentXSStyling","Size","Container","div","LabelContainer","neutral_500","props","size","Small","Regular","LabelText","LabelIcon","PrefixContainer","disabled","neutral_300","OperatorWrapper","Medium","neutral_200","NumberInput","input","neutral_400","fieldSize","black","type","hasPrefix","Italic","primary_800","primary_700","neutral_100","correct_400","critical_400","NoteLabel","NoteIcon","NoteContainer","correct_500","critical_500","InputContainer","focus","LeftOperator","RightOperator","NumberField","forwardRef","ref","label","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","readOnly","state","value","placeholder","onChange","className","rest","useState","toString","userInput","setUserInput","elementRef","useImperativeHandle","current","setVal","e","handleKeyPress","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","undefined","negativeAndDecimalRegex","val","target","length","charAt","test","isInRange","replace","indexOf","lastIndexOf","includes","isDecimal","x","parseFloat","toFixed","parseInt","isNaN","Math","round","pow","isLocked","operator","operatorState","renderNumberFieldElements","renderNumberInputElements","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {IconButton} from '../Button';\nimport {useFocusVisibleRef} from '../common';\nimport {SystemIcons} from '../icons';\nimport {COLORS, focusStyles, Z_INDEXES} from '../styles';\nimport {\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXXSStyling,\n ComponentXSStyling\n} from '../styles/typography';\nimport {Size, States} from '../types';\n\nconst Container = styled.div``;\n\nconst LabelContainer = styled.div<{ size: Size }>`\n margin-bottom: 4px;\n color: ${COLORS.neutral_500};\n display: flex;\n ${props => props.size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, null) : ComponentXSStyling(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\n svg {\n height: 9px;\n width: 9px;\n }\n`;\n\nconst PrefixContainer = styled.div<{ size: Size, disabled: boolean }>`\n width: ${props => props.size === Size.Small ? '10px' : '11px'};\n height: ${props => props.size === Size.Small ? '20px' : '24px'};\n color: ${props => props.disabled ? COLORS.neutral_300 : COLORS.neutral_500};\n ${props => props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, null) : ComponentMStyling(ComponentTextStyle.Regular, null)}\n position: absolute;\n padding: ${props => props.size === Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px'};\n`;\n\nconst OperatorWrapper = styled.div<{ size: Size }>`\n position: absolute;\n top: 0;\n right: 0;\n display: flex;\n margin: ${props => props.size === Size.Medium ? '4px 0' : ''};\n\n svg {\n height: 14px;\n width: 14px;\n }\n\n .divider {\n margin: 16px 0;\n background: ${COLORS.neutral_200};\n width: 1px;\n }\n`;\n\nconst NumberInput = styled.input<{ fieldSize: Size, hasPrefix: boolean, type: string }>`\n width: 100%;\n border: none;\n border-radius: 4px;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n outline: none;\n color: ${COLORS.neutral_500};\n\n ${props => props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.black) : ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n ${props => props.type === 'NumberField' ? `\n padding: ${props.fieldSize === Size.Small ? '14px 97px 14px 16px' : '16px 97px 16px 16px'};\n padding-left: ${props.hasPrefix ? '30px' : ''};\n ` : ''}\n ${props => props.type === 'NumberInput' ? `\n padding: ${props.fieldSize === Size.Small ? '14px 48px' : '16px 48px'};\n ` : ''}\n &::placeholder {\n ${props => props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Italic, null) : ComponentMStyling(ComponentTextStyle.Italic, null)}\n }\n\n &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n &.focus-visible {\n ${focusStyles}\n }\n\n &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n &.disabled {\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n cursor: not-allowed;\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n\n &::placeholder {\n color: ${COLORS.neutral_300};\n }\n }\n\n &.readOnly {\n background: ${COLORS.neutral_100};\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_300};\n cursor: not-allowed;\n background: ${COLORS.neutral_100};\n cursor: not-allowed;\n pointer-events: none;\n color: ${COLORS.neutral_500};\n }\n\n &.valid {\n box-shadow: inset 0 0 0 2px ${COLORS.correct_400};\n }\n\n &.invalid {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n }\n`;\n\nconst NoteLabel = styled.div<{ size: Size }>`\n color: ${COLORS.neutral_500};\n ${props => props.size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, null) : ComponentXSStyling(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, type: string }>`\n min-width: ${props => props.type === 'NumberField' ? '160px' : '144px'};\n height: ${props => props.size === Size.Small ? '48px' : '56px'};\n display: flex;\n position: relative;\n\n input.focus-visible ~ div.operator {\n z-index: ${Z_INDEXES.focus};\n }\n`;\n\nconst LeftOperator = styled.div<{ size: Size }>`\n position: absolute;\n top: ${props => props.size === Size.Small ? '0' : '4px'};\n left: 0;\n`;\n\nconst RightOperator = styled.div<{ size: Size }>`\n position: absolute;\n top: ${props => props.size === Size.Small ? '0' : '4px'};\n right: 0;\n`;\n\ntype NumberFieldProps =\n Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' \| 'onKeyDown' \| 'onClick' \| 'tabIndex' \| 'size' \| 'value' \| 'prefix' \| 'min' \| 'max'>\n & {\n size?: Size.Small \| Size.Medium;\n prefix?: string;\n interval?: number;\n label: string;\n note?: string;\n noteIcon?: React.ReactNode;\n\n minValue?: number;\n maxValue?: number;\n allowNegative?: boolean;\n decimalPrecision?: number;\n\n state?: States.Valid \| States.Invalid;\n\n type: 'NumberField' \| 'NumberInput';\n value?: number;\n onChange?: (e: string) => void;\n}\n\nconst NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>((props, ref) => {\n const {\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,\n readOnly,\n state,\n value,\n placeholder,\n type,\n onChange,\n className,\n ...rest\n } = props;\n\n const [userInput, setUserInput] = React.useState(value ? value.toString() : '');\n\n const elementRef = useFocusVisibleRef();\n\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n const setVal = (e: string) => {\n setUserInput(e);\n onChange && onChange(e);\n }\n\n const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n switch (e.key) {\n case 'ArrowUp':\n addInterval();\n break;\n case 'ArrowDown':\n subtractInterval();\n break;\n default:\n 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 setVal(val);\n else {\n if ((negativeAndDecimalRegex!.test(val) \|\| decimalPrecisionRegex!.test(val)) && isInRange(val, true))\n setVal(val);\n\n else if ((negativeDecimalFormationRegEx.test(val) \|\| decimalFormationRegEx.test(val)) && isInRange(val.replace('.', ''), true))\n setVal(val);\n\n else if ((allowNegativeRegex.test(val) \|\| simpleRegex.test(val)) && isInRange(val, true))\n setVal(val);\n }\n } else if (allowNegative) {\n if (val.length === 1 && val.charAt(0) === '-')\n setVal(val);\n else if ((allowNegativeRegex.test(val) \|\| simpleRegex.test(val)) && isInRange(val, false))\n setVal(val);\n } else if (decimalPrecision && (val.indexOf('.') === val.lastIndexOf('.')) && isInRange(val, true)) {\n if (decimalPrecisionRegex!.test(val))\n setVal(val);\n else if (decimalFormationRegEx.test(val))\n setVal(val);\n else if (!val.includes('.') && simpleRegex.test(val))\n setVal(val);\n } else if (simpleRegex.test(val) && isInRange(val, false)) {\n setVal(val);\n }\n }\n\n if (val === '')\n setVal('');\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 ? minValue - 1 : 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 setVal(val.toString());\n else if (!maxValue)\n setVal(val.toString());\n }\n }\n\n const subtractInterval = () => {\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n val = isNaN(val) && userInput === '' ? (maxValue ? maxValue + 1 : 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) \|\| !minValue) {\n if (allowNegative \|\| val >= 0) {\n setVal(val.toString());\n }\n }\n }\n }\n\n const isLocked = (input: string, operator: string): boolean => {\n let val = decimalPrecision ? parseFloat(input) : parseInt(input);\n val = isNaN(val) && userInput === '' ? 0 : val;\n let operatorState = false;\n if (operator === 'add' && maxValue)\n operatorState = val >= maxValue;\n\n if (operator === 'subtract' && minValue)\n operatorState = val <= minValue;\n\n if (operator === 'subtract' && !minValue && !allowNegative)\n operatorState = val <= 0;\n\n return operatorState;\n }\n\n const renderNumberFieldElements = () => {\n return (\n <>\n {prefix && <PrefixContainer size={size} disabled={!!disabled} className=\"operator\">\n {prefix}\n </PrefixContainer>}\n\n <OperatorWrapper data-testid={'operators'} size={size} className=\"operator\">\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => subtractInterval()}\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'subtract')}>\n <SystemIcons.Minus size=\"14px\"/>\n </IconButton>\n <div className=\"divider\"></div>\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => addInterval()}\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'add')}>\n <SystemIcons.Plus size=\"14px\"/>\n </IconButton>\n </OperatorWrapper>\n </>)\n }\n\n const renderNumberInputElements = () => {\n return (\n <>\n <LeftOperator data-testid={'leftOperator'} size={size} className=\"operator\">\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => subtractInterval()}\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'subtract')}>\n <SystemIcons.Minus size=\"14px\"/>\n </IconButton>\n </LeftOperator>\n <RightOperator data-testid={'rightOperator'} size={size} className=\"operator\">\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => addInterval()}\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'add')}>\n <SystemIcons.Plus size=\"14px\"/>\n </IconButton>\n </RightOperator>\n </>)\n }\n\n return (\n <Container>\n <LabelContainer size={size}>\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 type={type} size={size} tabIndex={-1}>\n <NumberInput type={type}\n data-testid={'numberInput'}\n fieldSize={size}\n hasPrefix={!!prefix}\n placeholder={placeholder ? placeholder : 'Enter number'}\n value={userInput}\n ref={elementRef}\n tabIndex={(disabled \|\| readOnly) ? -1 : 0}\n onChange={e => handleInput(e)}\n onKeyDown={e => handleKeyPress(e)}\n className={'numberField'.concat(disabled ? ' disabled' : '')\n .concat(readOnly ? ' readOnly' : '')\n .concat(state ? ` ${state}` : '')\n .concat(className ? ` ${className}` : '')}\n {...rest}/>\n\n {type === 'NumberField' && renderNumberFieldElements()}\n {type === 'NumberInput' && renderNumberInputElements()}\n </InputContainer>\n\n {note && <NoteContainer className={'noteField'.concat(state ? ` ${state}` : '')}>\n <NoteIcon>\n {noteIcon}\n </NoteIcon>\n <NoteLabel size={size}>\n {note}\n </NoteLabel>\n </NoteContainer>\n }\n </Container>\n );\n }\n )\n;\n\nexport default NumberField;\n"],"file":"NumberField.js"}
1	+ {"version":3,"sources":["../../src/InputFields/NumberField.tsx"],"names":["React","styled","IconButton","useFocusVisibleRef","SystemIcons","COLORS","focusStyles","Z_INDEXES","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXXSStyling","ComponentXSStyling","Size","Container","div","PrefixContainer","props","size","Small","disabled","neutral_300","neutral_500","Regular","OperatorWrapper","Medium","neutral_200","NumberInput","input","neutral_400","fieldSize","black","type","hasPrefix","Italic","primary_800","primary_700","neutral_100","correct_400","critical_400","NoteLabel","NoteIcon","NoteContainer","correct_500","critical_500","InputContainer","focus","LeftOperator","RightOperator","NumberField","forwardRef","ref","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","readOnly","state","value","placeholder","onChange","className","rest","useState","toString","userInput","setUserInput","elementRef","useEffect","useImperativeHandle","current","setVal","e","handleKeyPress","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","undefined","negativeAndDecimalRegex","val","target","length","charAt","test","isInRange","replace","indexOf","lastIndexOf","includes","isDecimal","x","parseFloat","toFixed","parseInt","isNaN","Math","round","pow","isLocked","operator","operatorState","renderNumberFieldElements","renderNumberInputElements","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {IconButton} from '../Button';\nimport {useFocusVisibleRef} from '../common';\nimport {SystemIcons} from '../icons';\nimport {COLORS, focusStyles, Z_INDEXES} from '../styles';\nimport {\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXXSStyling,\n ComponentXSStyling\n} from '../styles/typography';\nimport {Size, States} from '../types';\n\nconst Container = styled.div``;\n\nconst PrefixContainer = styled.div<{ size: Size, disabled: boolean }>`\n width: ${props => props.size === Size.Small ? '10px' : '11px'};\n height: ${props => props.size === Size.Small ? '20px' : '24px'};\n color: ${props => props.disabled ? COLORS.neutral_300 : COLORS.neutral_500};\n ${props => props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, null) : ComponentMStyling(ComponentTextStyle.Regular, null)}\n position: absolute;\n padding: ${props => props.size === Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px'};\n`;\n\nconst OperatorWrapper = styled.div<{ size: Size }>`\n position: absolute;\n top: 0;\n right: 0;\n display: flex;\n margin: ${props => props.size === Size.Medium ? '4px 0' : ''};\n\n svg {\n height: 14px;\n width: 14px;\n }\n\n .divider {\n margin: 16px 0;\n background: ${COLORS.neutral_200};\n width: 1px;\n }\n`;\n\nconst NumberInput = styled.input<{ fieldSize: Size, hasPrefix: boolean, type: string }>`\n width: 100%;\n border: none;\n border-radius: 4px;\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n outline: none;\n color: ${COLORS.neutral_500};\n\n ${props => props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.black) : ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n ${props => props.type === 'NumberField' ? `\n padding: ${props.fieldSize === Size.Small ? '14px 97px 14px 16px' : '16px 97px 16px 16px'};\n padding-left: ${props.hasPrefix ? '30px' : ''};\n ` : ''}\n ${props => props.type === 'NumberInput' ? `\n padding: ${props.fieldSize === Size.Small ? '14px 48px' : '16px 48px'};\n ` : ''}\n &::placeholder {\n ${props => props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Italic, null) : ComponentMStyling(ComponentTextStyle.Italic, null)}\n }\n\n &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n }\n\n &.focus-visible {\n ${focusStyles}\n }\n\n &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n }\n\n &.disabled {\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n cursor: not-allowed;\n color: ${COLORS.neutral_300};\n pointer-events: none;\n\n &::placeholder {\n color: ${COLORS.neutral_300};\n }\n }\n\n &.readOnly {\n background: ${COLORS.neutral_100};\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_300};\n cursor: not-allowed;\n background: ${COLORS.neutral_100};\n pointer-events: none;\n color: ${COLORS.neutral_500};\n }\n\n &.valid {\n box-shadow: inset 0 0 0 2px ${COLORS.correct_400};\n }\n\n &.invalid {\n box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\n }\n`;\n\nconst NoteLabel = styled.div<{ size: Size }>`\n color: ${COLORS.neutral_500};\n ${props => props.size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, null) : ComponentXSStyling(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, type: string }>`\n min-width: ${props => props.type === 'NumberField' ? '160px' : '144px'};\n height: ${props => props.size === Size.Small ? '48px' : '56px'};\n display: flex;\n position: relative;\n\n input.focus-visible ~ div.operator {\n z-index: ${Z_INDEXES.focus};\n }\n`;\n\nconst LeftOperator = styled.div<{ size: Size }>`\n position: absolute;\n top: ${props => props.size === Size.Small ? '0' : '4px'};\n left: 0;\n`;\n\nconst RightOperator = styled.div<{ size: Size }>`\n position: absolute;\n top: ${props => props.size === Size.Small ? '0' : '4px'};\n right: 0;\n`;\n\ntype NumberFieldProps =\n Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' \| 'onKeyDown' \| 'onClick' \| 'tabIndex' \| 'size' \| 'value' \| 'prefix' \| 'min' \| 'max'>\n & {\n size?: Size.Small \| Size.Medium;\n prefix?: string;\n interval?: number;\n\n minValue?: number;\n maxValue?: number;\n allowNegative?: boolean;\n decimalPrecision?: number;\n\n state?: States.Valid \| States.Invalid;\n note?: string;\n noteIcon?: React.ReactNode;\n\n type?: 'NumberField' \| 'NumberInput';\n value?: number;\n onChange?: (e: number) => void;\n}\n\nconst NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>((props, ref) => {\n const {\n type = 'NumberField',\n size = Size.Medium,\n note,\n noteIcon,\n required,\n prefix,\n interval = 1,\n minValue,\n maxValue,\n allowNegative,\n decimalPrecision,\n disabled,\n readOnly,\n state,\n value,\n placeholder,\n onChange,\n className,\n ...rest\n } = props;\n\n const [userInput, setUserInput] = React.useState(value ? value.toString() : '');\n\n const elementRef = useFocusVisibleRef();\n\n React.useEffect(() => setUserInput(`${value ?? ''}`), [value]);\n\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n const setVal = (e: string) => {\n setUserInput(e);\n onChange && onChange(+e);\n }\n\n const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n switch (e.key) {\n case 'ArrowUp':\n addInterval();\n break;\n case 'ArrowDown':\n subtractInterval();\n break;\n default:\n 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 setVal(val);\n else {\n if ((negativeAndDecimalRegex!.test(val) \|\| decimalPrecisionRegex!.test(val)) && isInRange(val, true))\n setVal(val);\n\n else if ((negativeDecimalFormationRegEx.test(val) \|\| decimalFormationRegEx.test(val)) && isInRange(val.replace('.', ''), true))\n setVal(val);\n\n else if ((allowNegativeRegex.test(val) \|\| simpleRegex.test(val)) && isInRange(val, true))\n setVal(val);\n }\n } else if (allowNegative) {\n if (val.length === 1 && val.charAt(0) === '-')\n setVal(val);\n else if ((allowNegativeRegex.test(val) \|\| simpleRegex.test(val)) && isInRange(val, false))\n setVal(val);\n } else if (decimalPrecision && (val.indexOf('.') === val.lastIndexOf('.')) && isInRange(val, true)) {\n if (decimalPrecisionRegex!.test(val))\n setVal(val);\n else if (decimalFormationRegEx.test(val))\n setVal(val);\n else if (!val.includes('.') && simpleRegex.test(val))\n setVal(val);\n } else if (simpleRegex.test(val) && isInRange(val, false)) {\n setVal(val);\n }\n }\n\n if (val === '')\n setVal('');\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 ? minValue - 1 : 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 setVal(val.toString());\n else if (!maxValue)\n setVal(val.toString());\n }\n }\n\n const subtractInterval = () => {\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n val = isNaN(val) && userInput === '' ? (maxValue ? maxValue + 1 : 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) \|\| !minValue) {\n if (allowNegative \|\| val >= 0) {\n setVal(val.toString());\n }\n }\n }\n }\n\n const isLocked = (input: string, operator: string): boolean => {\n let val = decimalPrecision ? parseFloat(input) : parseInt(input);\n val = isNaN(val) && userInput === '' ? 0 : val;\n let operatorState = false;\n if (operator === 'add' && maxValue)\n operatorState = val >= maxValue;\n\n if (operator === 'subtract' && minValue)\n operatorState = val <= minValue;\n\n if (operator === 'subtract' && !minValue && !allowNegative)\n operatorState = val <= 0;\n\n return operatorState;\n }\n\n const renderNumberFieldElements = () => {\n return (\n <>\n {prefix && <PrefixContainer size={size} disabled={!!disabled} className=\"operator\">\n {prefix}\n </PrefixContainer>}\n\n <OperatorWrapper data-testid={'operators'} size={size} className=\"operator\">\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => subtractInterval()}\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'subtract')}>\n <SystemIcons.Minus size=\"14px\"/>\n </IconButton>\n <div className=\"divider\"></div>\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => addInterval()}\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'add')}>\n <SystemIcons.Plus size=\"14px\"/>\n </IconButton>\n </OperatorWrapper>\n </>)\n }\n\n const renderNumberInputElements = () => {\n return (\n <>\n <LeftOperator data-testid={'leftOperator'} size={size} className=\"operator\">\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => subtractInterval()}\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'subtract')}>\n <SystemIcons.Minus size=\"14px\"/>\n </IconButton>\n </LeftOperator>\n <RightOperator data-testid={'rightOperator'} size={size} className=\"operator\">\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => addInterval()}\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'add')}>\n <SystemIcons.Plus size=\"14px\"/>\n </IconButton>\n </RightOperator>\n </>)\n }\n\n return (\n <Container>\n <InputContainer type={type} size={size} tabIndex={-1}>\n <NumberInput type={type}\n data-testid={'numberInput'}\n fieldSize={size}\n hasPrefix={!!prefix}\n placeholder={placeholder ? placeholder : 'Enter number'}\n value={userInput}\n ref={elementRef}\n tabIndex={(disabled \|\| readOnly) ? -1 : 0}\n onChange={e => handleInput(e)}\n onKeyDown={e => handleKeyPress(e)}\n required={required}\n className={'numberField'.concat(disabled ? ' disabled' : '')\n .concat(readOnly ? ' readOnly' : '')\n .concat(state ? ` ${state}` : '')\n .concat(className ? ` ${className}` : '')}\n {...rest}/>\n\n {type === 'NumberField' && renderNumberFieldElements()}\n {type === 'NumberInput' && renderNumberInputElements()}\n </InputContainer>\n\n {note && <NoteContainer className={'noteField'.concat(state ? ` ${state}` : '')}>\n <NoteIcon>\n {noteIcon}\n </NoteIcon>\n <NoteLabel size={size}>\n {note}\n </NoteLabel>\n </NoteContainer>\n }\n </Container>\n );\n }\n )\n;\n\nexport default NumberField;\n"],"file":"NumberField.js"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.11.0-dev.6",
+  "version": "1.11.0-dev.7",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [