@laerdal/life-react-components 1.10.3-dev.2 → 1.10.3-dev.5

package/dist/InputFields/DatepickerField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/DatepickerField.tsx"],"names":["React","styled","DatePicker","en","moment","COLORS","Calendar","TechnicalWarning","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","Size","DatePickerContainer","div","dropdown","props","margin","primary_20","neutral_20","neutral_200","yearPicker","Bold","neutral_600","Small","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","id","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","setSelectionRange","critical_400"],"mappings":"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","sourcesContent":["/**\n * Import react libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled, { css } from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport { Calendar, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { DatepickerFieldHeader, DatepickerFieldHeaderParams } from './DatepickerFieldHeader';\nimport { ComponentTextStyle, focusStyles, scrollBarStyling } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { ErrorMessage, InputFieldStyling, InputWrapper } from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport { ComponentMStyling, ComponentSStyling } from '../styles/typography';\nimport { Z_INDEXES } from '../styles/z-indexes';\nimport { useFocusVisibleRef } from '../common/FocusVisible';\nimport { Size } from '../types';\nimport { defaultOnMouseDownHandler } from '../common';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = {\n  id: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (date: Date) => void;\n  invalid?: boolean;\n  value?: Date;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\n  }\n\n  > div {\n    display: block;\n\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ${COLORS.primary_20};\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ${focusStyles}\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling(Size.Small)}\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          ${focusStyles}\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${Z_INDEXES.focus + 1};\n  color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  &::placeholder {\n    color: ${COLORS.neutral_500};\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n    ::placeholder {\n      color: ${COLORS.primary_700};\n    }\n\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper}, &.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 = ({\n  id,\n  disabled,\n  readOnly,\n  onChange,\n  invalid,\n  value,\n  validationMessage,\n  dateFormat,\n  autoComplete,\n  placeholder,\n  required,\n  yearPicker,\n  yearsBeforeCurrentDate,\n  yearsAfterCurrentDate,\n  margin,\n}: DatepickerFieldProps) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\n  // '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  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  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          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                    id={id}\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                  />\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"}
+{"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

@@ -9,8 +9,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -33,25 +37,31 @@ 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 _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 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) {
+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    svg {\n        height: 9px;\n        width: 9px;\n    }\n"])), function (props) {
+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(_templateObject5 || (_templateObject5 = (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';
@@ -63,11 +73,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    svg {\n        height: 14px;\n        width: 14px;\n    }\n    .divider {\n        margin: 16px 0;\n        background: ", ";\n        width: 1px;\n    }\n"])), function (props) {
+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) {
   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 0px 0px 0px 1px ", ";\n    outline: none;\n    color: ", ";\n    ", "\n\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 0px 0px 0px 2px ", ";\n    }\n    \n    &.focus-visible {\n        ", "\n    }\n\n    &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n\n    &.disabled {\n        box-shadow: inset 0px 0px 0px 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 0px 0px 0px 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 0px 0px 0px 2px ", ";\n    }\n\n    &.invalid {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n"])), _styles.COLORS.neutral_400, _styles.COLORS.neutral_500, function (props) {
+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) {
   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    ") : '';
@@ -77,59 +87,61 @@ 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(_templateObject8 || (_templateObject8 = (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(_templateObject9 || (_templateObject9 = (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(_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 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(_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) {
   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(_templateObject12 || (_templateObject12 = (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(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", ";\n  right: 0;\n"])), function (props) {
   return props.size === _types.Size.Small ? '0' : '4px';
 });
 
-var NumberField = function NumberField(_ref) {
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _types.Size.Small : _ref$size,
-      label = _ref.label,
-      note = _ref.note,
-      noteIcon = _ref.noteIcon,
-      required = _ref.required,
-      prefix = _ref.prefix,
-      _ref$interval = _ref.interval,
-      interval = _ref$interval === void 0 ? 1 : _ref$interval,
-      minValue = _ref.minValue,
-      maxValue = _ref.maxValue,
-      allowNegative = _ref.allowNegative,
-      decimalPrecision = _ref.decimalPrecision,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      valid = _ref.valid,
-      value = _ref.value,
-      placeholder = _ref.placeholder,
-      type = _ref.type,
-      onChange = _ref.onChange;
+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,
+      note = props.note,
+      noteIcon = props.noteIcon,
+      required = props.required,
+      prefix = props.prefix,
+      _props$interval = props.interval,
+      interval = _props$interval === void 0 ? 1 : _props$interval,
+      minValue = props.minValue,
+      maxValue = props.maxValue,
+      allowNegative = props.allowNegative,
+      decimalPrecision = props.decimalPrecision,
+      disabled = props.disabled,
+      readOnly = props.readOnly,
+      state = props.state,
+      value = props.value,
+      placeholder = props.placeholder,
+      type = props.type,
+      onChange = props.onChange,
+      className = props.className,
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
 
   var _React$useState = React.useState(value ? value.toString() : ''),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       userInput = _React$useState2[0],
       setUserInput = _React$useState2[1];
 
-  var fieldState = valid !== undefined ? valid ? 'valid' : 'invalid' : undefined;
   var elementRef = (0, _common.useFocusVisibleRef)();
+  React.useImperativeHandle(ref, function () {
+    return elementRef.current;
+  }, [elementRef]);
 
   var setVal = function setVal(e) {
     setUserInput(e);
@@ -199,7 +211,12 @@ var NumberField = function NumberField(_ref) {
 
     if (!isNaN(val)) {
       if (decimalPrecision) val = Math.round((val - interval) * Math.pow(10, decimalPrecision)) / Math.pow(10, decimalPrecision);else val -= 1;
-      if (minValue && minValue <= val) allowNegative ? setVal(val.toString()) : val >= 0 ? setVal(val.toString()) : undefined;else if (!minValue) allowNegative ? setVal(val.toString()) : val >= 0 ? setVal(val.toString()) : undefined;
+
+      if (minValue && minValue <= val || !minValue) {
+        if (allowNegative || val >= 0) {
+          setVal(val.toString());
+        }
+      }
     }
   };
 
@@ -207,9 +224,9 @@ var NumberField = function NumberField(_ref) {
     var val = decimalPrecision ? parseFloat(input) : parseInt(input);
     val = isNaN(val) && userInput === '' ? 0 : val;
     var operatorState = false;
-    if (operator === 'add' && maxValue) operatorState = val < maxValue ? false : true;
-    if (operator === 'subtract' && minValue) operatorState = val > minValue ? false : true;
-    if (operator === 'subtract' && !minValue && !allowNegative) operatorState = val > 0 ? false : true;
+    if (operator === 'add' && maxValue) operatorState = val >= maxValue;
+    if (operator === 'subtract' && minValue) operatorState = val <= minValue;
+    if (operator === 'subtract' && !minValue && !allowNegative) operatorState = val <= 0;
     return operatorState;
   };
 
@@ -217,7 +234,7 @@ var NumberField = function NumberField(_ref) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [prefix && /*#__PURE__*/(0, _jsxRuntime.jsx)(PrefixContainer, {
         size: size,
-        disabled: disabled,
+        disabled: !!disabled,
         className: "operator",
         children: prefix
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(OperatorWrapper, {
@@ -311,7 +328,7 @@ var NumberField = function NumberField(_ref) {
       type: type,
       size: size,
       tabIndex: -1,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NumberInput, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NumberInput, _objectSpread({
         type: type,
         "data-testid": 'numberInput',
         fieldSize: size,
@@ -326,10 +343,10 @@ var NumberField = function NumberField(_ref) {
         onKeyDown: function onKeyDown(e) {
           return handleKeyPress(e);
         },
-        className: 'numberField'.concat(disabled ? ' disabled' : '').concat(readOnly ? ' readOnly' : '').concat(fieldState ? " ".concat(fieldState) : '')
-      }), type === 'NumberField' && renderNumberFieldElements(), type === 'NumberInput' && renderNumberInputElements()]
+        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, {
-      className: 'noteField'.concat(fieldState ? " ".concat(fieldState) : ''),
+      className: 'noteField'.concat(state ? " ".concat(state) : ''),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NoteIcon, {
         children: noteIcon
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NoteLabel, {
@@ -338,25 +355,19 @@ var NumberField = function NumberField(_ref) {
       })]
     })]
   });
-};
-
+});
 NumberField.propTypes = {
   prefix: _propTypes.default.string,
   interval: _propTypes.default.number,
   label: _propTypes.default.string.isRequired,
   note: _propTypes.default.string,
   noteIcon: _propTypes.default.node,
-  required: _propTypes.default.bool,
   minValue: _propTypes.default.number,
   maxValue: _propTypes.default.number,
   allowNegative: _propTypes.default.bool,
   decimalPrecision: _propTypes.default.number,
-  disabled: _propTypes.default.bool,
-  readOnly: _propTypes.default.bool,
-  valid: _propTypes.default.bool,
-  value: _propTypes.default.number,
-  placeholder: _propTypes.default.string,
   type: _propTypes.default.oneOf(['NumberField', 'NumberInput']).isRequired,
+  value: _propTypes.default.number,
   onChange: _propTypes.default.func
 };
 var _default = NumberField;

package/dist/InputFields/NumberField.cjs.map

@@ -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","label","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","readOnly","valid","value","placeholder","onChange","React","useState","toString","userInput","setUserInput","fieldState","undefined","elementRef","setVal","e","handleKeyPress","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","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 { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } 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    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    svg {\n        height: 14px;\n        width: 14px;\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 0px 0px 0px 1px ${COLORS.neutral_400};\n    outline: none;\n    color: ${COLORS.neutral_500};\n    ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Regular, COLORS.black):ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\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\n    ${props => props.type === 'NumberInput' ? `\n        padding: ${props.fieldSize === Size.Small?'14px 48px':'16px 48px'};\n    ` : ''}\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 0px 0px 0px 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 0px 0px 0px 2px ${COLORS.primary_700};\n    }\n\n    &.disabled {\n        box-shadow: inset 0px 0px 0px 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 0px 0px 0px 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 0px 0px 0px 2px ${COLORS.correct_400};\n    }\n\n    &.invalid {\n        box-shadow: inset 0px 0px 0px 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    size: Size.Small | Size.Medium;\n    prefix?: string;\n    interval?: number;\n    label: string;\n    note?: string;\n    noteIcon?: React.ReactNode;\n    required?: boolean;\n    minValue?: number;\n    maxValue?: number;\n    allowNegative?: boolean;\n    decimalPrecision?: number;\n    disabled?: boolean;\n    readOnly?: boolean;\n    valid?: boolean;\n    value?: number;\n    placeholder?: string;\n    type: 'NumberField' | 'NumberInput';\n    onChange?: (e: string) => void;\n}\n\nconst NumberField: React.FunctionComponent<NumberFieldProps> = (\n    {size=Size.Small, \n     label,\n     note, \n     noteIcon, \n     required, \n     prefix,\n     interval=1, \n     minValue, \n     maxValue, \n     allowNegative, \n     decimalPrecision, \n     disabled=false, \n     readOnly=false, \n     valid,\n     value,\n     placeholder,\n     type,\n     onChange}) => {\n    const [userInput, setUserInput] = React.useState(value?value.toString():'');\n    let fieldState = (valid!==undefined) ? (valid?'valid':'invalid') : undefined;\n\n    const elementRef = useFocusVisibleRef();\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': addInterval();\n                            break;\n            case 'ArrowDown': subtractInterval();\n                            break;\n            default: break;\n        }\n    }\n\n    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n        e.preventDefault();\n        let simpleRegex = new RegExp(/^[0-9]\\d*$/);\n        let decimalFormationRegEx = new RegExp(/^[0-9]\\d*\\.$/); \n        let negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\\d*\\.$/);\n        \n        let allowNegativeRegex = new RegExp(/^[-][0-9]\\d*$/);        \n        let decimalPrecisionRegex = decimalPrecision ? new RegExp(`^[0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\n        let negativeAndDecimalRegex =  (decimalPrecision && allowNegative) ? new RegExp(`^[-][0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`): undefined;\n        \n        let val = e.target.value;    \n        if(val!==''){\n            if(allowNegative && decimalPrecision){\n                if(val.length===1 && val.charAt(0)==='-')\n                    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            }\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            }\n\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            }\n\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)\n                allowNegative ? setVal(val.toString()) : (val>=0 ? setVal(val.toString()) : undefined);\n            else if(!minValue)\n                allowNegative ? setVal(val.toString()) : (val>=0 ? setVal(val.toString()) : undefined);\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 ? false : true;\n        \n        if(operator === 'subtract' && minValue)\n            operatorState =  val > minValue ? false : true;\n\n        if(operator === 'subtract' && !minValue && !allowNegative)\n            operatorState =  val > 0 ? false : true;\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()} 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()} 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()} 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()} 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} data-testid={'numberInput'} fieldSize={size} hasPrefix={!!prefix} placeholder={placeholder ? placeholder : 'Enter number'}\n                             value={userInput} ref={elementRef}\n                             tabIndex={(disabled || readOnly) ? -1 : 0} onChange={e=>handleInput(e)} onKeyDown={e=>handleKeyPress(e)}\n                             className={'numberField'.concat(disabled?' disabled':'')\n                                                     .concat(readOnly?' readOnly':'')\n                                                     .concat(fieldState?` ${fieldState}`:'')}/>\n                \n                {type === 'NumberField' && renderNumberFieldElements()}\n                {type === 'NumberInput' && renderNumberInputElements()}\n            </InputContainer>\n\n            {note && <NoteContainer className={'noteField'.concat(fieldState?` ${fieldState}`:'')}>\n                <NoteIcon>\n                    {noteIcon}\n                </NoteIcon>\n                <NoteLabel size={size}>\n                    {note}\n                </NoteLabel>                \n            </NoteContainer>\n            }\n        </Container>\n    );    \n}\n\nexport default NumberField;\n"],"file":"NumberField.cjs"}
+{"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"}

package/dist/InputFields/NumberField.d.ts

@@ -1,24 +1,19 @@
 import * as React from 'react';
-import { Size } from '../types';
-declare type NumberFieldProps = {
-    size: Size.Small | Size.Medium;
-    prefix?: string;
-    interval?: number;
+import { Size, States } from '../types';
+declare const NumberField: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "tabIndex" | "prefix" | "onChange" | "onKeyDown" | "onClick" | "size" | "max" | "min" | "value"> & {
+    size?: Size.Small | Size.Medium | undefined;
+    prefix?: string | undefined;
+    interval?: number | undefined;
     label: string;
-    note?: string;
+    note?: string | undefined;
     noteIcon?: React.ReactNode;
-    required?: boolean;
-    minValue?: number;
-    maxValue?: number;
-    allowNegative?: boolean;
-    decimalPrecision?: number;
-    disabled?: boolean;
-    readOnly?: boolean;
-    valid?: boolean;
-    value?: number;
-    placeholder?: string;
+    minValue?: number | undefined;
+    maxValue?: number | undefined;
+    allowNegative?: boolean | undefined;
+    decimalPrecision?: number | undefined;
+    state?: States.Valid | States.Invalid | undefined;
     type: 'NumberField' | 'NumberInput';
-    onChange?: (e: string) => void;
-};
-declare const NumberField: React.FunctionComponent<NumberFieldProps>;
+    value?: number | undefined;
+    onChange?: ((e: string) => void) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;
 export default NumberField;