npm - @laerdal/life-react-components - Versions diffs - 3.5.0 → 3.5.2-uss.hackathon - Mend

@laerdal/life-react-components 3.5.0 → 3.5.2-uss.hackathon

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

Files changed (100) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"DatepickerField.js","names":["React","styled","DatePicker","en","dayjs","advancedFormat","quarterOfYear","extend","COLORS","SystemIcons","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","TooltipOverflow","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","quarterComponentsClassPrefix","DatepickerField","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","overflowTooltipPosition","onBlur","showQuarterYearPicker","id","dataTestId","rest","inputRef","datepickerRef","useRef","focusedQuarterRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","getFormattedValue","val","year","quarter","format","useEffect","current","getQuarterItem","classname","document","getElementsByClassName","selectedDate","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","wrapper","handler","event","key","currentQ","click","previousQ","tabIndex","nextQ","addEventListener","selectedQuarter","i","innerText","includes","setAttribute","firstQuarter","removeEventListener","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","handleBlur","currentTarget","contains","relatedTarget","iconSize","newDate","setMonth","undefined","params","createElement","customHeaderCount","setSelectionRange","critical_400"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/*\r\n Import react libraries.\r\n /\r\nimport React from 'react';\r\n\r\n/\r\n Import third-party libraries.\r\n /\r\nimport styled from 'styled-components';\r\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\r\nimport en from 'date-fns/locale/en-GB';\r\nimport dayjs from 'dayjs';\r\nimport advancedFormat from 'dayjs/plugin/advancedFormat';\r\nimport quarterOfYear from \"dayjs/plugin/quarterOfYear\";\r\n\r\ndayjs.extend(advancedFormat);\r\ndayjs.extend(quarterOfYear);\r\n\r\n/\r\n Import custom components.\r\n /\r\nimport COLORS from '../styles/colors';\r\nimport {SystemIcons} from '../icons';\r\nimport {DatepickerFieldHeader} from './DatepickerFieldHeader';\r\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\n\r\n/\r\n Import custom styles.\r\n /\r\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\r\nimport 'react-datepicker/dist/react-datepicker.css';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {Size, Testable} from '../types';\r\n\r\n/\r\n Add custom types.\r\n /\r\nexport type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' \| 'value' \| 'size' \| 'onBlur'> & {\r\n value?: Date;\r\n onChange?: (date: Date) => void;\r\n onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\r\n\r\n showQuarterYearPicker?: boolean;\r\n invalid?: boolean;\r\n dateFormat?: string;\r\n validationMessage?: string;\r\n autoComplete?: string;\r\n placeholder?: string;\r\n yearPicker?: boolean;\r\n yearsBeforeCurrentDate?: number;\r\n yearsAfterCurrentDate?: number;\r\n margin?: string;\r\n\r\n overflowTooltipPosition?: 'top' \| 'bottom';\r\n};\r\n\r\n/\r\n Add custom styles.\r\n /\r\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string; quarterPicker?: boolean }>`\r\n .react-datepicker-popper {\r\n z-index: ${Z_INDEXES.dropdown};\r\n }\r\n\r\n .react-datepicker-popper[data-placement^=bottom] {\r\n padding-top: 0px;\r\n }\r\n\r\n \r\n .react-datepicker-popper[data-placement^=top] {\r\n padding-bottom: 0px;\r\n }\r\n\r\n > div {\r\n display: block;\r\n\r\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\r\n .react-datepicker {\r\n box-sizing: border-box;\r\n box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\r\n border: 1px solid #e5e5e5;\r\n }\r\n .react-datepicker__input-container{\r\n z-index: 0;\r\n }\r\n\r\n .react-datepicker__navigation {\r\n line-height: normal;\r\n text-indent: inherit;\r\n border: none;\r\n border-radius: 4px;\r\n height: 48px;\r\n width: 48px;\r\n outline: none;\r\n margin: 0px;\r\n color: transparent;\r\n\r\n &:hover {\r\n background: ${COLORS.primary_20};\r\n\r\n &.react-datepicker__navigation--previous::before {\r\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\r\n }\r\n\r\n &.react-datepicker__navigation--next::before {\r\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\r\n }\r\n }\r\n\r\n &:focus {\r\n ${focusStyles}\r\n &.react-datepicker__navigation--next::before {\r\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\r\n }\r\n\r\n &.react-datepicker__navigation--previous::before {\r\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\r\n }\r\n }\r\n\r\n &::before {\r\n text-align: center;\r\n display: inline-block;\r\n content: '';\r\n height: 32px;\r\n width: 32px;\r\n vertical-align: middle;\r\n }\r\n\r\n &.react-datepicker__navigation--next::before {\r\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\r\n }\r\n\r\n &.react-datepicker__navigation--previous::before {\r\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\r\n }\r\n }\r\n\r\n .react-datepicker__month-container,\r\n .react-datepicker__year--container {\r\n width: 336px;\r\n }\r\n\r\n .react-datepicker__month {\r\n margin: 0px;\r\n }\r\n\r\n .react-datepicker__triangle {\r\n left: 50% !important;\r\n display: none;\r\n }\r\n\r\n .react-datepicker-popper[data-placement^='bottom'] {\r\n margin-top: 0;\r\n }\r\n\r\n .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\r\n border-bottom-color: ${COLORS.neutral_20};\r\n }\r\n\r\n .react-datepicker__header {\r\n border-bottom: 1px solid ${COLORS.neutral_200};\r\n background: ${COLORS.neutral_20};\r\n height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\r\n padding-top: 0px;\r\n }\r\n\r\n .react-datepicker-year-header {\r\n height: 48px;\r\n line-height: 48px !important;\r\n align-items: center;\r\n\r\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\r\n }\r\n\r\n .react-datepicker__current-month {\r\n height: 48px;\r\n display: inline-flex;\r\n align-items: center;\r\n margin-right: 5px;\r\n\r\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\r\n }\r\n\r\n .react-datepicker__year {\r\n max-height: 300px;\r\n overflow-y: scroll;\r\n\r\n ${scrollBarStyling(Size.Small)}\r\n }\r\n\r\n .react-datepicker__quarter-wrapper{\r\n width: 100%;\r\n display: flex;\r\n align-content: space-evenly;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: 20px;\r\n }\r\n\r\n .react-datepicker__year-wrapper {\r\n max-width: 100%;\r\n justify-content: space-around;\r\n }\r\n\r\n .react-datepicker__navigation-icon {\r\n display: none;\r\n }\r\n\r\n .react-datepicker__day-name {\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 48px;\r\n margin: 0px;\r\n width: 48px;\r\n\r\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n }\r\n\r\n \r\n\r\n .react-datepicker__year-text {\r\n background: ${COLORS.white};\r\n border: none;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin-top: 20px;\r\n padding-top: 10px;\r\n padding-bottom: 10px;\r\n\r\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n &.react-datepicker__year-text--disabled {\r\n display: none;\r\n }\r\n\r\n &.react-datepicker__day--keyboard-selected {\r\n color: ${COLORS.neutral_600};\r\n background: ${COLORS.white};\r\n font-weight: 400;\r\n border: none;\r\n }\r\n\r\n &:hover {\r\n color: ${COLORS.primary_700};\r\n background: ${COLORS.primary_20};\r\n }\r\n\r\n &:focus {\r\n ${focusStyles}\r\n }\r\n\r\n &.react-datepicker__year-text--selected {\r\n color: ${COLORS.white} !important;\r\n background: ${COLORS.primary_500} !important;\r\n }\r\n }\r\n\r\n .react-datepicker__day, .react-datepicker__quarter-text {\r\n background: ${COLORS.white};\r\n border: none;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-grow: 1;\r\n height: 40px;\r\n width: 40px;\r\n margin: 4px;\r\n\r\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\r\n color: ${COLORS.neutral_600};\r\n background: ${COLORS.white};\r\n flex-grow: 1;\r\n font-weight: 400;\r\n border: none;\r\n }\r\n\r\n &.react-datepicker__quarter--selected {\r\n color: ${COLORS.white} !important;\r\n flex-grow: 1;\r\n background: ${COLORS.primary_500} !important;\r\n }\r\n\r\n &:hover {\r\n color: ${COLORS.primary_700};\r\n background: ${COLORS.primary_20};\r\n }\r\n\r\n &:focus {\r\n ${focusStyles}\r\n }\r\n\r\n &.react-datepicker__day--selected {\r\n color: ${COLORS.white} !important;\r\n background: ${COLORS.primary_500} !important;\r\n }\r\n\r\n &.react-datepicker__day--today {\r\n border-radius: 0.3rem;\r\n color: ${COLORS.neutral_700};\r\n background: ${COLORS.neutral_100};\r\n\r\n &:hover {\r\n color: ${COLORS.primary_700};\r\n background: ${COLORS.primary_20};\r\n }\r\n\r\n &:focus {\r\n ${focusStyles}\r\n }\r\n }\r\n }\r\n }\r\n`;\r\n\r\nconst IconWrapper = styled.div`\r\n pointer-events: none;\r\n position: absolute;\r\n left: 16px;\r\n width: 24px;\r\n height: 24px;\r\n z-index: ${+Z_INDEXES.focus + 1};\r\n`;\r\n\r\nconst DatepickerRow = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n`;\r\n\r\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\r\n padding-left: 48px !important;\r\n \r\n &::placeholder {\r\n color: ${COLORS.neutral_500};\r\n }\r\n\r\n &:focus:not(.focus-visible) {\r\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\r\n }\r\n\r\n &:hover {\r\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\r\n\r\n ::placeholder {\r\n color: ${COLORS.primary_700};\r\n }\r\n\r\n cursor: pointer;\r\n background-color: ${COLORS.primary_20};\r\n color: ${COLORS.primary_700};\r\n }\r\n\r\n &:active,\r\n &.open {\r\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\r\n background-color: ${COLORS.primary_100};\r\n color: ${COLORS.primary_800};\r\n\r\n ::placeholder {\r\n color: ${COLORS.primary_800};\r\n }\r\n }\r\n \r\n &:disabled {\r\n background-color: ${COLORS.white};\r\n }\r\n\r\n & ~ ${IconWrapper}{\r\n color: ${COLORS.neutral_600};\r\n }\r\n\r\n &:hover ~ ${IconWrapper} {\r\n color: ${COLORS.primary_700};\r\n }\r\n\r\n &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\r\n color: ${COLORS.primary_800};\r\n }\r\n\r\n &[tabindex='-1'] ~ ${IconWrapper} {\r\n color: ${COLORS.neutral_300};\r\n }\r\n`;\r\n\r\nconst quarterComponentsClassPrefix = 'react-datepicker__quarter-';\r\n\r\nconst DatepickerField = React.forwardRef<HTMLInputElement, DatepickerFieldProps>(({\r\n disabled,\r\n readOnly,\r\n onChange,\r\n invalid,\r\n value,\r\n validationMessage,\r\n dateFormat,\r\n autoComplete,\r\n placeholder,\r\n required,\r\n yearPicker,\r\n yearsBeforeCurrentDate,\r\n yearsAfterCurrentDate,\r\n margin,\r\n overflowTooltipPosition,\r\n onBlur,\r\n showQuarterYearPicker,\r\n id,\r\n dataTestId,\r\n ...rest\r\n }: DatepickerFieldProps, ref) => {\r\n // Globally used variables within the component\r\n const inputRef = useFocusVisibleRef();\r\n const datepickerRef = React.useRef<any>(null);\r\n const focusedQuarterRef = React.useRef<number>(1);\r\n const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\r\n const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\r\n const [openAt, setOpenAt] = React.useState<Date \| null>(null);\r\n // 'open' flag is used only for tracking current state of the dropdown,\r\n // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\r\n const [open, setOpen] = React.useState<boolean>(false);\r\n\r\n const getFormattedValue = () => {\r\n if(showQuarterYearPicker)\r\n {\r\n const val = dayjs(value);\r\n return val.year() + ', Q' + val.quarter();\r\n }\r\n else \r\n return dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\r\n }\r\n /\r\n Format the date in a specific way.\r\n /\r\n React.useEffect(() => {\r\n if (value) inputRef.current.value = getFormattedValue();\r\n }, [value]);\r\n\r\n function getQuarterItem(classname: string) : HTMLElement {\r\n return document.getElementsByClassName(quarterComponentsClassPrefix + classname)[0] as HTMLElement;\r\n }\r\n\r\n React.useEffect(() => {\r\n if (yearPickerMode) {\r\n //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\r\n //we have to touch DOM directly\r\n const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\r\n const dropdownParent = selectedDate?.parentElement?.parentElement;\r\n if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 selectedDate.offsetHeight;\r\n }\r\n }, [yearPickerMode]);\r\n\r\n React.useEffect(() => {\r\n if(showQuarterYearPicker && open)\r\n {\r\n const wrapper = getQuarterItem('wrapper');\r\n const handler = (event: KeyboardEvent) => {\r\n switch(event.key)\r\n {\r\n case ' ':\r\n case 'Enter':\r\n const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n currentQ.click();\r\n break;\r\n\r\n case 'ArrowLeft':\r\n if(focusedQuarterRef.current > 1)\r\n {\r\n const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n const previousQ = getQuarterItem((focusedQuarterRef.current - 1) + '');\r\n if(previousQ)\r\n {\r\n currentQ.tabIndex = -1;\r\n previousQ.tabIndex = 0;\r\n previousQ.focus();\r\n focusedQuarterRef.current = focusedQuarterRef.current - 1;\r\n }\r\n }\r\n break;\r\n\r\n case 'ArrowRight':\r\n if(focusedQuarterRef.current < 4)\r\n {\r\n const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n const nextQ = getQuarterItem((focusedQuarterRef.current + 1) + '');\r\n if(nextQ)\r\n {\r\n currentQ.tabIndex = -1;\r\n nextQ.tabIndex = 0;\r\n nextQ.focus();\r\n focusedQuarterRef.current = focusedQuarterRef.current + 1;\r\n }\r\n }\r\n break;\r\n }\r\n };\r\n\r\n wrapper.addEventListener('keydown', handler);\r\n //unfortunately since there are no efs, and quarter picker is rendered not by our code, but by 'react-datepicker'\r\n //we have to touch DOM directly\r\n \r\n const selectedQuarter = getQuarterItem('-selected');\r\n if(selectedQuarter) {\r\n for (let i = 1; i < 5; i++) {\r\n if(selectedQuarter.innerText.includes('Q' + i)) {\r\n focusedQuarterRef.current = i;\r\n break;\r\n }\r\n }\r\n selectedQuarter.setAttribute(\"tabIndex\", \"0\");\r\n }\r\n else\r\n {\r\n const firstQuarter = getQuarterItem('1');\r\n if(firstQuarter) {\r\n focusedQuarterRef.current = 1;\r\n firstQuarter.setAttribute(\"tabIndex\", \"0\");\r\n }\r\n }\r\n\r\n return () => {\r\n wrapper.removeEventListener('keydown', handler);\r\n };\r\n }\r\n }, [showQuarterYearPicker, open]);\r\n\r\n //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\r\n //otherwise after year selection datepicker will show January month of the selected year\r\n React.useEffect(() => {\r\n if (openAt) {\r\n datepickerRef.current.setOpen(true);\r\n //setOpenAt(null);\r\n }\r\n }, [openAt]);\r\n\r\n React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\r\n\r\n const handleCalendarClose = () => {\r\n inputRef.current?.blur();\r\n setOpen(false);\r\n };\r\n\r\n const handleCalendarOpen = () => {\r\n if (openAt) setOpenAt(null);\r\n setOpen(true);\r\n };\r\n\r\n let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\r\n maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\r\n\r\n //itemsNumber - controls number of year select options generated in the dropdown\r\n //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\r\n let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\r\n const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\r\n\r\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n if (e.key === 'Escape' \|\| e.key === 'Esc')\r\n datepickerRef.current.setOpen(false);\r\n };\r\n\r\n const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\r\n // @ts-ignore\r\n if (!e.currentTarget.contains(e.relatedTarget)) {\r\n onBlur && onBlur(e);\r\n }\r\n };\r\n const iconSize = 24;\r\n\r\n return (\r\n <>\r\n {/* Let's render the input itself /}\r\n <DatePickerContainer quarterPicker={showQuarterYearPicker} data-testid={dataTestId} yearPicker={yearPickerMode} margin={margin \|\| ''} onBlur={handleBlur}>\r\n <DatePicker\r\n ref={datepickerRef}\r\n onCalendarOpen={handleCalendarOpen}\r\n onCalendarClose={handleCalendarClose}\r\n onKeyDown={handleKeyDown}\r\n id={id}\r\n onClickOutside={() => datepickerRef.current.setOpen(false)}\r\n\r\n onChange={(e: any) => {\r\n if (onChange) {\r\n if (yearPickerMode) {\r\n const newDate = new Date();\r\n newDate.setFullYear(e.getFullYear());\r\n newDate.setMonth(activeMonthPage);\r\n setOpenAt(newDate);\r\n } else onChange(e);\r\n }\r\n if (yearPickerMode) setYearPickerMode(false);\r\n }}\r\n disabled={disabled \|\| readOnly}\r\n locale={en}\r\n showQuarterYearPicker={showQuarterYearPicker}\r\n dateFormat={showQuarterYearPicker ? \"yyyy, QQQ\" : undefined}\r\n showYearPicker={yearPickerMode}\r\n //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\r\n yearItemNumber={yearPickerMode ? itemsNumber : undefined}\r\n maxDate={yearPickerMode ? maxDate : undefined}\r\n selected={value}\r\n openToDate={openAt ?? undefined}\r\n preventOpenOnFocus={true}\r\n shouldCloseOnSelect={true}\r\n renderCustomHeader={\r\n yearPicker\r\n ? (params: ReactDatePickerCustomHeaderProps) =>\r\n React.createElement(\r\n DatepickerFieldHeader,\r\n {\r\n ...params,\r\n setActiveMonthPage,\r\n customHeaderCount: 0,\r\n yearPickerMode: yearPickerMode,\r\n setYearPickerMode: setYearPickerMode,\r\n },\r\n null,\r\n )\r\n : undefined\r\n }\r\n customInput={\r\n <InputWrapper disabled={disabled} readOnly={readOnly}>\r\n <DatepickerRow>\r\n <StyledInputFieldStyling\r\n ref={inputRef}\r\n type=\"text\"\r\n name=\"datepicker\"\r\n onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\r\n className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\r\n tabIndex={disabled \|\| readOnly ? -1 : 0}\r\n onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\r\n autoComplete={autoComplete}\r\n placeholder={placeholder}\r\n extraRightPadding={iconSize}\r\n disabled={disabled}\r\n readOnly={true}\r\n suppressReadOnlyStyles={!readOnly}\r\n required={required}\r\n {...rest}\r\n />\r\n <IconWrapper>\r\n <SystemIcons.Calendar size=\"24\"/>\r\n </IconWrapper>\r\n </DatepickerRow>\r\n {!open && <TooltipOverflow position={overflowTooltipPosition} input={inputRef} withArrow={true} maxWidth=\"100%\" size={Size.Small} align='end'>\r\n {getFormattedValue()}\r\n </TooltipOverflow>}\r\n </InputWrapper>\r\n }\r\n />\r\n </DatePickerContainer>\r\n\r\n {/ If there is an error, let's render the error */}\r\n {validationMessage && (\r\n <ErrorMessage>\r\n <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>\r\n <span>{validationMessage}</span>\r\n </ErrorMessage>\r\n )}\r\n </>\r\n );\r\n});\r\n\r\nexport default DatepickerField;\r\n"],"mappings":"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"}
1	+ {"version":3,"file":"DatepickerField.js","names":["React","styled","DatePicker","en","dayjs","advancedFormat","quarterOfYear","extend","COLORS","SystemIcons","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","TooltipOverflow","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","quarterComponentsClassPrefix","DatepickerField","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","showQuarterYearPicker","id","dataTestId","rest","inputRef","datepickerRef","useRef","focusedQuarterRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","getFormattedValue","val","year","quarter","format","useEffect","current","getQuarterItem","classname","document","getElementsByClassName","selectedDate","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","wrapper","handler","event","key","currentQ","click","previousQ","tabIndex","nextQ","addEventListener","selectedQuarter","i","innerText","includes","setAttribute","firstQuarter","removeEventListener","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","handleBlur","currentTarget","contains","relatedTarget","iconSize","newDate","setMonth","undefined","params","createElement","customHeaderCount","setSelectionRange","critical_400"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/*\r\n Import react libraries.\r\n /\r\nimport React from 'react';\r\n\r\n/\r\n Import third-party libraries.\r\n /\r\nimport styled from 'styled-components';\r\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\r\nimport en from 'date-fns/locale/en-GB';\r\nimport dayjs from 'dayjs';\r\nimport advancedFormat from 'dayjs/plugin/advancedFormat';\r\nimport quarterOfYear from \"dayjs/plugin/quarterOfYear\";\r\n\r\ndayjs.extend(advancedFormat);\r\ndayjs.extend(quarterOfYear);\r\n\r\n/\r\n Import custom components.\r\n /\r\nimport COLORS from '../styles/colors';\r\nimport {SystemIcons} from '../icons';\r\nimport {DatepickerFieldHeader} from './DatepickerFieldHeader';\r\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\n\r\n/\r\n Import custom styles.\r\n /\r\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\r\nimport 'react-datepicker/dist/react-datepicker.css';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {Size, Testable} from '../types';\r\n\r\n/\r\n Add custom types.\r\n /\r\nexport type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' \| 'value' \| 'size' \| 'onBlur'> & {\r\n value?: Date;\r\n onChange?: (date: Date) => void;\r\n onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\r\n\r\n showQuarterYearPicker?: boolean;\r\n invalid?: boolean;\r\n dateFormat?: string;\r\n validationMessage?: string;\r\n autoComplete?: string;\r\n placeholder?: string;\r\n yearPicker?: boolean;\r\n yearsBeforeCurrentDate?: number;\r\n yearsAfterCurrentDate?: number;\r\n margin?: string;\r\n};\r\n\r\n/\r\n Add custom styles.\r\n /\r\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string; quarterPicker?: boolean }>`\r\n .react-datepicker-popper {\r\n z-index: ${Z_INDEXES.dropdown};\r\n }\r\n\r\n .react-datepicker-popper[data-placement^=bottom] {\r\n padding-top: 0px;\r\n }\r\n\r\n \r\n .react-datepicker-popper[data-placement^=top] {\r\n padding-bottom: 0px;\r\n }\r\n\r\n > div {\r\n display: block;\r\n\r\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\r\n .react-datepicker {\r\n box-sizing: border-box;\r\n box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\r\n border: 1px solid #e5e5e5;\r\n }\r\n .react-datepicker__input-container{\r\n z-index: 0;\r\n }\r\n\r\n .react-datepicker__navigation {\r\n line-height: normal;\r\n text-indent: inherit;\r\n border: none;\r\n border-radius: 4px;\r\n height: 48px;\r\n width: 48px;\r\n outline: none;\r\n margin: 0px;\r\n color: transparent;\r\n\r\n &:hover {\r\n background: ${COLORS.primary_20};\r\n\r\n &.react-datepicker__navigation--previous::before {\r\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\r\n }\r\n\r\n &.react-datepicker__navigation--next::before {\r\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\r\n }\r\n }\r\n\r\n &:focus {\r\n ${focusStyles}\r\n &.react-datepicker__navigation--next::before {\r\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\r\n }\r\n\r\n &.react-datepicker__navigation--previous::before {\r\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\r\n }\r\n }\r\n\r\n &::before {\r\n text-align: center;\r\n display: inline-block;\r\n content: '';\r\n height: 32px;\r\n width: 32px;\r\n vertical-align: middle;\r\n }\r\n\r\n &.react-datepicker__navigation--next::before {\r\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\r\n }\r\n\r\n &.react-datepicker__navigation--previous::before {\r\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\r\n }\r\n }\r\n\r\n .react-datepicker__month-container,\r\n .react-datepicker__year--container {\r\n width: 336px;\r\n }\r\n\r\n .react-datepicker__month {\r\n margin: 0px;\r\n }\r\n\r\n .react-datepicker__triangle {\r\n left: 50% !important;\r\n display: none;\r\n }\r\n\r\n .react-datepicker-popper[data-placement^='bottom'] {\r\n margin-top: 0;\r\n }\r\n\r\n .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\r\n border-bottom-color: ${COLORS.neutral_20};\r\n }\r\n\r\n .react-datepicker__header {\r\n border-bottom: 1px solid ${COLORS.neutral_200};\r\n background: ${COLORS.neutral_20};\r\n height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\r\n padding-top: 0px;\r\n }\r\n\r\n .react-datepicker-year-header {\r\n height: 48px;\r\n line-height: 48px !important;\r\n align-items: center;\r\n\r\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\r\n }\r\n\r\n .react-datepicker__current-month {\r\n height: 48px;\r\n display: inline-flex;\r\n align-items: center;\r\n margin-right: 5px;\r\n\r\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\r\n }\r\n\r\n .react-datepicker__year {\r\n max-height: 300px;\r\n overflow-y: scroll;\r\n\r\n ${scrollBarStyling(Size.Small)}\r\n }\r\n\r\n .react-datepicker__quarter-wrapper{\r\n width: 100%;\r\n display: flex;\r\n align-content: space-evenly;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: 20px;\r\n }\r\n\r\n .react-datepicker__year-wrapper {\r\n max-width: 100%;\r\n justify-content: space-around;\r\n }\r\n\r\n .react-datepicker__navigation-icon {\r\n display: none;\r\n }\r\n\r\n .react-datepicker__day-name {\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n height: 48px;\r\n margin: 0px;\r\n width: 48px;\r\n\r\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n }\r\n\r\n \r\n\r\n .react-datepicker__year-text {\r\n background: ${COLORS.white};\r\n border: none;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin-top: 20px;\r\n padding-top: 10px;\r\n padding-bottom: 10px;\r\n\r\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n &.react-datepicker__year-text--disabled {\r\n display: none;\r\n }\r\n\r\n &.react-datepicker__day--keyboard-selected {\r\n color: ${COLORS.neutral_600};\r\n background: ${COLORS.white};\r\n font-weight: 400;\r\n border: none;\r\n }\r\n\r\n &:hover {\r\n color: ${COLORS.primary_700};\r\n background: ${COLORS.primary_20};\r\n }\r\n\r\n &:focus {\r\n ${focusStyles}\r\n }\r\n\r\n &.react-datepicker__year-text--selected {\r\n color: ${COLORS.white} !important;\r\n background: ${COLORS.primary_500} !important;\r\n }\r\n }\r\n\r\n .react-datepicker__day, .react-datepicker__quarter-text {\r\n background: ${COLORS.white};\r\n border: none;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n flex-grow: 1;\r\n height: 40px;\r\n width: 40px;\r\n margin: 4px;\r\n\r\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\r\n color: ${COLORS.neutral_600};\r\n background: ${COLORS.white};\r\n flex-grow: 1;\r\n font-weight: 400;\r\n border: none;\r\n }\r\n\r\n &.react-datepicker__quarter--selected {\r\n color: ${COLORS.white} !important;\r\n flex-grow: 1;\r\n background: ${COLORS.primary_500} !important;\r\n }\r\n\r\n &:hover {\r\n color: ${COLORS.primary_700};\r\n background: ${COLORS.primary_20};\r\n }\r\n\r\n &:focus {\r\n ${focusStyles}\r\n }\r\n\r\n &.react-datepicker__day--selected {\r\n color: ${COLORS.white} !important;\r\n background: ${COLORS.primary_500} !important;\r\n }\r\n\r\n &.react-datepicker__day--today {\r\n border-radius: 0.3rem;\r\n color: ${COLORS.neutral_700};\r\n background: ${COLORS.neutral_100};\r\n\r\n &:hover {\r\n color: ${COLORS.primary_700};\r\n background: ${COLORS.primary_20};\r\n }\r\n\r\n &:focus {\r\n ${focusStyles}\r\n }\r\n }\r\n }\r\n }\r\n`;\r\n\r\nconst IconWrapper = styled.div`\r\n pointer-events: none;\r\n position: absolute;\r\n left: 16px;\r\n width: 24px;\r\n height: 24px;\r\n z-index: ${+Z_INDEXES.focus + 1};\r\n`;\r\n\r\nconst DatepickerRow = styled.div`\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n`;\r\n\r\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\r\n padding-left: 48px !important;\r\n \r\n &::placeholder {\r\n color: ${COLORS.neutral_500};\r\n }\r\n\r\n &:focus:not(.focus-visible) {\r\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\r\n }\r\n\r\n &:hover {\r\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\r\n\r\n ::placeholder {\r\n color: ${COLORS.primary_700};\r\n }\r\n\r\n cursor: pointer;\r\n background-color: ${COLORS.primary_20};\r\n color: ${COLORS.primary_700};\r\n }\r\n\r\n &:active,\r\n &.open {\r\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\r\n background-color: ${COLORS.primary_100};\r\n color: ${COLORS.primary_800};\r\n\r\n ::placeholder {\r\n color: ${COLORS.primary_800};\r\n }\r\n }\r\n \r\n &:disabled {\r\n background-color: ${COLORS.white};\r\n }\r\n\r\n & ~ ${IconWrapper}{\r\n color: ${COLORS.neutral_600};\r\n }\r\n\r\n &:hover ~ ${IconWrapper} {\r\n color: ${COLORS.primary_700};\r\n }\r\n\r\n &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\r\n color: ${COLORS.primary_800};\r\n }\r\n\r\n &[tabindex='-1'] ~ ${IconWrapper} {\r\n color: ${COLORS.neutral_300};\r\n }\r\n`;\r\n\r\nconst quarterComponentsClassPrefix = 'react-datepicker__quarter-';\r\n\r\nconst DatepickerField = React.forwardRef<HTMLInputElement, DatepickerFieldProps>(({\r\n disabled,\r\n readOnly,\r\n onChange,\r\n invalid,\r\n value,\r\n validationMessage,\r\n dateFormat,\r\n autoComplete,\r\n placeholder,\r\n required,\r\n yearPicker,\r\n yearsBeforeCurrentDate,\r\n yearsAfterCurrentDate,\r\n margin,\r\n onBlur,\r\n showQuarterYearPicker,\r\n id,\r\n dataTestId,\r\n ...rest\r\n }: DatepickerFieldProps, ref) => {\r\n // Globally used variables within the component\r\n const inputRef = useFocusVisibleRef();\r\n const datepickerRef = React.useRef<any>(null);\r\n const focusedQuarterRef = React.useRef<number>(1);\r\n const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\r\n const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\r\n const [openAt, setOpenAt] = React.useState<Date \| null>(null);\r\n // 'open' flag is used only for tracking current state of the dropdown,\r\n // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\r\n const [open, setOpen] = React.useState<boolean>(false);\r\n\r\n const getFormattedValue = () => {\r\n if(showQuarterYearPicker)\r\n {\r\n const val = dayjs(value);\r\n return val.year() + ', Q' + val.quarter();\r\n }\r\n else \r\n return dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\r\n }\r\n /\r\n Format the date in a specific way.\r\n /\r\n React.useEffect(() => {\r\n if (value) inputRef.current.value = getFormattedValue();\r\n }, [value]);\r\n\r\n function getQuarterItem(classname: string) : HTMLElement {\r\n return document.getElementsByClassName(quarterComponentsClassPrefix + classname)[0] as HTMLElement;\r\n }\r\n\r\n React.useEffect(() => {\r\n if (yearPickerMode) {\r\n //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\r\n //we have to touch DOM directly\r\n const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\r\n const dropdownParent = selectedDate?.parentElement?.parentElement;\r\n if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 selectedDate.offsetHeight;\r\n }\r\n }, [yearPickerMode]);\r\n\r\n React.useEffect(() => {\r\n if(showQuarterYearPicker && open)\r\n {\r\n const wrapper = getQuarterItem('wrapper');\r\n const handler = (event: KeyboardEvent) => {\r\n switch(event.key)\r\n {\r\n case ' ':\r\n case 'Enter':\r\n const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n currentQ.click();\r\n break;\r\n\r\n case 'ArrowLeft':\r\n if(focusedQuarterRef.current > 1)\r\n {\r\n const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n const previousQ = getQuarterItem((focusedQuarterRef.current - 1) + '');\r\n if(previousQ)\r\n {\r\n currentQ.tabIndex = -1;\r\n previousQ.tabIndex = 0;\r\n previousQ.focus();\r\n focusedQuarterRef.current = focusedQuarterRef.current - 1;\r\n }\r\n }\r\n break;\r\n\r\n case 'ArrowRight':\r\n if(focusedQuarterRef.current < 4)\r\n {\r\n const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n const nextQ = getQuarterItem((focusedQuarterRef.current + 1) + '');\r\n if(nextQ)\r\n {\r\n currentQ.tabIndex = -1;\r\n nextQ.tabIndex = 0;\r\n nextQ.focus();\r\n focusedQuarterRef.current = focusedQuarterRef.current + 1;\r\n }\r\n }\r\n break;\r\n }\r\n };\r\n\r\n wrapper.addEventListener('keydown', handler);\r\n //unfortunately since there are no efs, and quarter picker is rendered not by our code, but by 'react-datepicker'\r\n //we have to touch DOM directly\r\n \r\n const selectedQuarter = getQuarterItem('-selected');\r\n if(selectedQuarter) {\r\n for (let i = 1; i < 5; i++) {\r\n if(selectedQuarter.innerText.includes('Q' + i)) {\r\n focusedQuarterRef.current = i;\r\n break;\r\n }\r\n }\r\n selectedQuarter.setAttribute(\"tabIndex\", \"0\");\r\n }\r\n else\r\n {\r\n const firstQuarter = getQuarterItem('1');\r\n if(firstQuarter) {\r\n focusedQuarterRef.current = 1;\r\n firstQuarter.setAttribute(\"tabIndex\", \"0\");\r\n }\r\n }\r\n\r\n return () => {\r\n wrapper.removeEventListener('keydown', handler);\r\n };\r\n }\r\n }, [showQuarterYearPicker, open]);\r\n\r\n //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\r\n //otherwise after year selection datepicker will show January month of the selected year\r\n React.useEffect(() => {\r\n if (openAt) {\r\n datepickerRef.current.setOpen(true);\r\n //setOpenAt(null);\r\n }\r\n }, [openAt]);\r\n\r\n React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\r\n\r\n const handleCalendarClose = () => {\r\n inputRef.current?.blur();\r\n setOpen(false);\r\n };\r\n\r\n const handleCalendarOpen = () => {\r\n if (openAt) setOpenAt(null);\r\n setOpen(true);\r\n };\r\n\r\n let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\r\n maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\r\n\r\n //itemsNumber - controls number of year select options generated in the dropdown\r\n //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\r\n let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\r\n const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\r\n\r\n const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n if (e.key === 'Escape' \|\| e.key === 'Esc')\r\n datepickerRef.current.setOpen(false);\r\n };\r\n\r\n const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\r\n // @ts-ignore\r\n if (!e.currentTarget.contains(e.relatedTarget)) {\r\n onBlur && onBlur(e);\r\n }\r\n };\r\n const iconSize = 24;\r\n\r\n return (\r\n <>\r\n {/* Let's render the input itself /}\r\n <DatePickerContainer quarterPicker={showQuarterYearPicker} data-testid={dataTestId} yearPicker={yearPickerMode} margin={margin \|\| ''} onBlur={handleBlur}>\r\n <DatePicker\r\n ref={datepickerRef}\r\n onCalendarOpen={handleCalendarOpen}\r\n onCalendarClose={handleCalendarClose}\r\n onKeyDown={handleKeyDown}\r\n id={id}\r\n onClickOutside={() => datepickerRef.current.setOpen(false)}\r\n\r\n onChange={(e: any) => {\r\n if (onChange) {\r\n if (yearPickerMode) {\r\n const newDate = new Date();\r\n newDate.setFullYear(e.getFullYear());\r\n newDate.setMonth(activeMonthPage);\r\n setOpenAt(newDate);\r\n } else onChange(e);\r\n }\r\n if (yearPickerMode) setYearPickerMode(false);\r\n }}\r\n disabled={disabled \|\| readOnly}\r\n locale={en}\r\n showQuarterYearPicker={showQuarterYearPicker}\r\n dateFormat={showQuarterYearPicker ? \"yyyy, QQQ\" : undefined}\r\n showYearPicker={yearPickerMode}\r\n //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\r\n yearItemNumber={yearPickerMode ? itemsNumber : undefined}\r\n maxDate={yearPickerMode ? maxDate : undefined}\r\n selected={value}\r\n openToDate={openAt ?? undefined}\r\n preventOpenOnFocus={true}\r\n shouldCloseOnSelect={true}\r\n renderCustomHeader={\r\n yearPicker\r\n ? (params: ReactDatePickerCustomHeaderProps) =>\r\n React.createElement(\r\n DatepickerFieldHeader,\r\n {\r\n ...params,\r\n setActiveMonthPage,\r\n customHeaderCount: 0,\r\n yearPickerMode: yearPickerMode,\r\n setYearPickerMode: setYearPickerMode,\r\n },\r\n null,\r\n )\r\n : undefined\r\n }\r\n customInput={\r\n <InputWrapper disabled={disabled} readOnly={readOnly}>\r\n <DatepickerRow>\r\n <StyledInputFieldStyling\r\n ref={inputRef}\r\n type=\"text\"\r\n name=\"datepicker\"\r\n onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\r\n className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\r\n tabIndex={disabled \|\| readOnly ? -1 : 0}\r\n onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\r\n autoComplete={autoComplete}\r\n placeholder={placeholder}\r\n extraRightPadding={iconSize}\r\n disabled={disabled}\r\n readOnly={true}\r\n suppressReadOnlyStyles={!readOnly}\r\n required={required}\r\n {...rest}\r\n />\r\n <IconWrapper>\r\n <SystemIcons.Calendar size=\"24\"/>\r\n </IconWrapper>\r\n </DatepickerRow>\r\n {!open && <TooltipOverflow input={inputRef} withArrow={true} maxWidth=\"100%\" size={Size.Small} align='end' position='bottom'>\r\n {getFormattedValue()}\r\n </TooltipOverflow>}\r\n </InputWrapper>\r\n }\r\n />\r\n </DatePickerContainer>\r\n\r\n {/ If there is an error, let's render the error */}\r\n {validationMessage && (\r\n <ErrorMessage>\r\n <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>\r\n <span>{validationMessage}</span>\r\n </ErrorMessage>\r\n )}\r\n </>\r\n );\r\n});\r\n\r\nexport default DatepickerField;\r\n"],"mappings":";;;;;;;;;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;;AAEzB;AACA;AACA;AACA,OAAOC,MAAM,MAAM,mBAAmB;AACtC,OAAOC,UAAU,MAA4C,kBAAkB;AAC/E,OAAOC,EAAE,MAAM,uBAAuB;AACtC,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,cAAc,MAAO,6BAA6B;AACzD,OAAOC,aAAa,MAAM,4BAA4B;AAEtDF,KAAK,CAACG,MAAM,CAACF,cAAc,CAAC;AAC5BD,KAAK,CAACG,MAAM,CAACD,aAAa,CAAC;;AAE3B;AACA;AACA;AACA,OAAOE,MAAM,MAAM,kBAAkB;AACrC,SAAQC,WAAW,QAAO,UAAU;AACpC,SAAQC,qBAAqB,QAAO,yBAAyB;AAC7D,SAAQC,kBAAkB,EAAEC,WAAW,EAAEC,gBAAgB,QAAO,WAAW;AAC3E,OAAOC,eAAe,MAAM,6BAA6B;;AAEzD;AACA;AACA;AACA,SAAQC,YAAY,EAAEC,iBAAiB,EAAEC,YAAY,QAAO,WAAW;AACvE,OAAO,4CAA4C;AACnD,SAAQC,iBAAiB,EAAEC,iBAAiB,QAAO,WAAW;AAC9D,SAAQC,SAAS,QAAO,WAAW;AACnC,SAAQC,kBAAkB,QAAO,WAAW;AAC5C,SAAQC,IAAI,QAAiB,UAAU;;AAEvC;AACA;AACA;AAFA;AAAA;AAAA;AAoBA;AACA;AACA;AACA,IAAMC,mBAAmB,GAAGtB,MAAM,CAACuB,GAAG,i2QAEvBJ,SAAS,CAACK,QAAQ,EAe3B,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,MAAM,qBAAcD,KAAK,CAACC,MAAM,SAAM,EAAE;AAAA,CAAC,EAsB3CnB,MAAM,CAACoB,UAAU,EAY7BhB,WAAW,EA+CQJ,MAAM,CAACqB,UAAU,EAIbrB,MAAM,CAACsB,WAAW,EAC/BtB,MAAM,CAACqB,UAAU,EACrB,UAACH,KAAK;EAAA,OAAM,CAACA,KAAK,CAACK,UAAU,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC,EASxDZ,iBAAiB,CAACR,kBAAkB,CAACqB,IAAI,EAAExB,MAAM,CAACyB,WAAW,CAAC,EAS9Dd,iBAAiB,CAACR,kBAAkB,CAACqB,IAAI,EAAExB,MAAM,CAACyB,WAAW,CAAC,EAO9DpB,gBAAgB,CAACS,IAAI,CAACY,KAAK,CAAC,EA6B5BhB,iBAAiB,CAACP,kBAAkB,CAACwB,OAAO,EAAE3B,MAAM,CAACyB,WAAW,CAAC,EAMrDzB,MAAM,CAAC4B,KAAK,EASxBlB,iBAAiB,CAACP,kBAAkB,CAACwB,OAAO,EAAE3B,MAAM,CAACyB,WAAW,CAAC,EAMxDzB,MAAM,CAACyB,WAAW,EACbzB,MAAM,CAAC4B,KAAK,EAMjB5B,MAAM,CAAC6B,WAAW,EACb7B,MAAM,CAACoB,UAAU,EAI7BhB,WAAW,EAIJJ,MAAM,CAAC4B,KAAK,EACP5B,MAAM,CAAC8B,WAAW,EAKpB9B,MAAM,CAAC4B,KAAK,EAUxBlB,iBAAiB,CAACP,kBAAkB,CAACwB,OAAO,EAAE3B,MAAM,CAACyB,WAAW,CAAC,EAExDzB,MAAM,CAACyB,WAAW,EACbzB,MAAM,CAAC4B,KAAK,EAOjB5B,MAAM,CAAC4B,KAAK,EAEP5B,MAAM,CAAC8B,WAAW,EAIvB9B,MAAM,CAAC6B,WAAW,EACb7B,MAAM,CAACoB,UAAU,EAI7BhB,WAAW,EAIJJ,MAAM,CAAC4B,KAAK,EACP5B,MAAM,CAAC8B,WAAW,EAKvB9B,MAAM,CAAC+B,WAAW,EACb/B,MAAM,CAACgC,WAAW,EAGrBhC,MAAM,CAAC6B,WAAW,EACb7B,MAAM,CAACoB,UAAU,EAI7BhB,WAAW,CAKtB;AAED,IAAM6B,WAAW,GAAGxC,MAAM,CAACuB,GAAG,4LAMjB,CAACJ,SAAS,CAACsB,KAAK,GAAG,CAAC,CAChC;AAED,IAAMC,aAAa,GAAG1C,MAAM,CAACuB,GAAG,2IAI/B;AAED,IAAMoB,uBAAuB,GAAG3C,MAAM,CAACe,iBAAiB,CAAC,o1BAI5CR,MAAM,CAACqC,WAAW,EAISrC,MAAM,CAACsC,WAAW,EAIlBtC,MAAM,CAACuC,WAAW,EAG3CvC,MAAM,CAAC6B,WAAW,EAIT7B,MAAM,CAACoB,UAAU,EAC5BpB,MAAM,CAAC6B,WAAW,EAKS7B,MAAM,CAACsC,WAAW,EAClCtC,MAAM,CAACwC,WAAW,EAC7BxC,MAAM,CAACyC,WAAW,EAGhBzC,MAAM,CAACyC,WAAW,EAKTzC,MAAM,CAAC4B,KAAK,EAG5BK,WAAW,EACNjC,MAAM,CAACyB,WAAW,EAGjBQ,WAAW,EACZjC,MAAM,CAAC6B,WAAW,EAGhBI,WAAW,EAAcA,WAAW,EACtCjC,MAAM,CAACyC,WAAW,EAGRR,WAAW,EACrBjC,MAAM,CAAC0C,WAAW,CAE9B;AAED,IAAMC,4BAA4B,GAAG,4BAA4B;AAEjE,IAAMC,eAAe,gBAAGpD,KAAK,CAACqD,UAAU,CAAyC,gBAoBdC,GAAG,EAAK;EAAA,IAnB/BC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,SAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,KAAK,QAALA,KAAK;IACLC,iBAAiB,QAAjBA,iBAAiB;IACjBC,UAAU,QAAVA,UAAU;IACVC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRjC,UAAU,QAAVA,UAAU;IACVkC,sBAAsB,QAAtBA,sBAAsB;IACtBC,qBAAqB,QAArBA,qBAAqB;IACrBvC,MAAM,QAANA,MAAM;IACNwC,MAAM,QAANA,MAAM;IACNC,qBAAqB,QAArBA,qBAAqB;IACrBC,EAAE,QAAFA,EAAE;IACFC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAEjD;EACA,IAAMC,QAAQ,GAAGnD,kBAAkB,EAAE;EACrC,IAAMoD,aAAa,GAAGzE,KAAK,CAAC0E,MAAM,CAAM,IAAI,CAAC;EAC7C,IAAMC,iBAAiB,GAAG3E,KAAK,CAAC0E,MAAM,CAAS,CAAC,CAAC;EACjD,sBAA8C1E,KAAK,CAAC4E,QAAQ,CAAS,CAAC,CAAC,CAAC;IAAA;IAAjEC,eAAe;IAAEC,kBAAkB;EAC1C,uBAA4C9E,KAAK,CAAC4E,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAnEG,cAAc;IAAEC,iBAAiB;EACxC,uBAA4BhF,KAAK,CAAC4E,QAAQ,CAAc,IAAI,CAAC;IAAA;IAAtDK,MAAM;IAAEC,SAAS;EACxB;EACA;EACA,uBAAwBlF,KAAK,CAAC4E,QAAQ,CAAU,KAAK,CAAC;IAAA;IAA/CO,IAAI;IAAEC,OAAO;EAEpB,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiB,GAAS;IAC9B,IAAGjB,qBAAqB,EACxB;MACE,IAAMkB,GAAG,GAAGlF,KAAK,CAACuD,KAAK,CAAC;MACxB,OAAO2B,GAAG,CAACC,IAAI,EAAE,GAAG,KAAK,GAAGD,GAAG,CAACE,OAAO,EAAE;IAC3C,CAAC,MAEC,OAAOpF,KAAK,CAACuD,KAAK,CAAC,CAAC8B,MAAM,CAAC5B,UAAU,GAAGA,UAAU,GAAG,eAAe,CAAC;EACzE,CAAC;EACD;AACF;AACA;EACE7D,KAAK,CAAC0F,SAAS,CAAC,YAAM;IACpB,IAAI/B,KAAK,EAAEa,QAAQ,CAACmB,OAAO,CAAChC,KAAK,GAAG0B,iBAAiB,EAAE;EACzD,CAAC,EAAE,CAAC1B,KAAK,CAAC,CAAC;EAEX,SAASiC,cAAc,CAACC,SAAiB,EAAgB;IACvD,OAAOC,QAAQ,CAACC,sBAAsB,CAAC5C,4BAA4B,GAAG0C,SAAS,CAAC,CAAC,CAAC,CAAC;EACrF;EAEA7F,KAAK,CAAC0F,SAAS,CAAC,YAAM;IACpB,IAAIX,cAAc,EAAE;MAAA;MAClB;MACA;MACA,IAAMiB,YAAY,GAAGF,QAAQ,CAACC,sBAAsB,CAAC,uCAAuC,CAAC,CAAC,CAAC,CAAgB;MAC/G,IAAME,cAAc,GAAGD,YAAY,aAAZA,YAAY,gDAAZA,YAAY,CAAEE,aAAa,0DAA3B,sBAA6BA,aAAa;MACjE,IAAIF,YAAY,IAAIC,cAAc,EAAEA,cAAc,CAACE,SAAS,GAAGH,YAAY,CAACI,SAAS,GAAG,CAAC,GAAGJ,YAAY,CAACK,YAAY;IACvH;EACF,CAAC,EAAE,CAACtB,cAAc,CAAC,CAAC;EAEpB/E,KAAK,CAAC0F,SAAS,CAAC,YAAM;IACpB,IAAGtB,qBAAqB,IAAIe,IAAI,EAChC;MACE,IAAMmB,OAAO,GAAGV,cAAc,CAAC,SAAS,CAAC;MACzC,IAAMW,OAAO,GAAG,SAAVA,OAAO,CAAIC,KAAoB,EAAK;QACxC,QAAOA,KAAK,CAACC,GAAG;UAEd,KAAK,GAAG;UACR,KAAK,OAAO;YACV,IAAMC,QAAQ,GAAGd,cAAc,CAACjB,iBAAiB,CAACgB,OAAO,GAAG,EAAE,CAAC;YAC/De,QAAQ,CAACC,KAAK,EAAE;YAChB;UAEF,KAAK,WAAW;YACd,IAAGhC,iBAAiB,CAACgB,OAAO,GAAG,CAAC,EAChC;cACE,IAAMe,SAAQ,GAAGd,cAAc,CAACjB,iBAAiB,CAACgB,OAAO,GAAG,EAAE,CAAC;cAC/D,IAAMiB,SAAS,GAAGhB,cAAc,CAAEjB,iBAAiB,CAACgB,OAAO,GAAG,CAAC,GAAI,EAAE,CAAC;cACtE,IAAGiB,SAAS,EACZ;gBACEF,SAAQ,CAACG,QAAQ,GAAG,CAAC,CAAC;gBACtBD,SAAS,CAACC,QAAQ,GAAG,CAAC;gBACtBD,SAAS,CAAClE,KAAK,EAAE;gBACjBiC,iBAAiB,CAACgB,OAAO,GAAGhB,iBAAiB,CAACgB,OAAO,GAAG,CAAC;cAC3D;YACF;YACA;UAEF,KAAK,YAAY;YACf,IAAGhB,iBAAiB,CAACgB,OAAO,GAAG,CAAC,EAChC;cACE,IAAMe,UAAQ,GAAGd,cAAc,CAACjB,iBAAiB,CAACgB,OAAO,GAAG,EAAE,CAAC;cAC/D,IAAMmB,KAAK,GAAGlB,cAAc,CAAEjB,iBAAiB,CAACgB,OAAO,GAAG,CAAC,GAAI,EAAE,CAAC;cAClE,IAAGmB,KAAK,EACR;gBACEJ,UAAQ,CAACG,QAAQ,GAAG,CAAC,CAAC;gBACtBC,KAAK,CAACD,QAAQ,GAAG,CAAC;gBAClBC,KAAK,CAACpE,KAAK,EAAE;gBACbiC,iBAAiB,CAACgB,OAAO,GAAGhB,iBAAiB,CAACgB,OAAO,GAAG,CAAC;cAC3D;YACF;YACA;QAAM;MAEZ,CAAC;MAEDW,OAAO,CAACS,gBAAgB,CAAC,SAAS,EAAER,OAAO,CAAC;MAC5C;MACA;;MAEA,IAAMS,eAAe,GAAGpB,cAAc,CAAC,WAAW,CAAC;MACnD,IAAGoB,eAAe,EAAE;QAClB,KAAK,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAG,CAAC,EAAEA,CAAC,EAAE,EAAE;UAC1B,IAAGD,eAAe,CAACE,SAAS,CAACC,QAAQ,CAAC,GAAG,GAAGF,CAAC,CAAC,EAAE;YAC9CtC,iBAAiB,CAACgB,OAAO,GAAGsB,CAAC;YAC7B;UACF;QACF;QACAD,eAAe,CAACI,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC;MAC/C,CAAC,MAED;QACE,IAAMC,YAAY,GAAGzB,cAAc,CAAC,GAAG,CAAC;QACxC,IAAGyB,YAAY,EAAE;UACf1C,iBAAiB,CAACgB,OAAO,GAAG,CAAC;UAC7B0B,YAAY,CAACD,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC;QAC5C;MACF;MAEA,OAAO,YAAM;QACXd,OAAO,CAACgB,mBAAmB,CAAC,SAAS,EAAEf,OAAO,CAAC;MACjD,CAAC;IACH;EACF,CAAC,EAAE,CAACnC,qBAAqB,EAAEe,IAAI,CAAC,CAAC;;EAEjC;EACA;EACAnF,KAAK,CAAC0F,SAAS,CAAC,YAAM;IACpB,IAAIT,MAAM,EAAE;MACVR,aAAa,CAACkB,OAAO,CAACP,OAAO,CAAC,IAAI,CAAC;MACnC;IACF;EACF,CAAC,EAAE,CAACH,MAAM,CAAC,CAAC;EAEZjF,KAAK,CAACuH,mBAAmB,CAACjE,GAAG,EAAE;IAAA,OAAMkB,QAAQ,CAACmB,OAAO;EAAA,GAAE,CAACnB,QAAQ,CAAC,CAAC;EAElE,IAAMgD,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;IAAA;IAChC,qBAAAhD,QAAQ,CAACmB,OAAO,sDAAhB,kBAAkB8B,IAAI,EAAE;IACxBrC,OAAO,CAAC,KAAK,CAAC;EAChB,CAAC;EAED,IAAMsC,kBAAkB,GAAG,SAArBA,kBAAkB,GAAS;IAC/B,IAAIzC,MAAM,EAAEC,SAAS,CAAC,IAAI,CAAC;IAC3BE,OAAO,CAAC,IAAI,CAAC;EACf,CAAC;EAED,IAAIuC,OAAO,GAAG,IAAIC,IAAI,CAACjE,KAAK,IAAI,IAAIiE,IAAI,CAACjE,KAAK,CAAC,GAAG,IAAIiE,IAAI,EAAE,GAAG,IAAIA,IAAI,CAACjE,KAAK,CAAC,GAAG,IAAIiE,IAAI,EAAE,CAAC;EAC5FD,OAAO,CAACE,WAAW,CAACF,OAAO,CAACG,WAAW,EAAE,IAAI5D,qBAAqB,aAArBA,qBAAqB,cAArBA,qBAAqB,GAAI,EAAE,CAAC,CAAC;;EAE1E;EACA;EACA,IAAI6D,OAAO,GAAG,IAAIH,IAAI,CAACjE,KAAK,IAAI,IAAIiE,IAAI,CAACjE,KAAK,CAAC,GAAG,IAAIiE,IAAI,EAAE,GAAG,IAAIA,IAAI,CAACjE,KAAK,CAAC,GAAG,IAAIiE,IAAI,EAAE,CAAC;EAC5F,IAAMI,WAAW,GAAGC,IAAI,CAACC,KAAK,CAAC,CAACH,OAAO,CAACD,WAAW,EAAE,IAAI7D,sBAAsB,aAAtBA,sBAAsB,cAAtBA,sBAAsB,GAAI,EAAE,CAAC,IAAI,CAAC,CAAC;EAE5F,IAAMkE,aAAa,GAAG,SAAhBA,aAAa,CAAIC,CAAsC,EAAK;IAChE,IAAIA,CAAC,CAAC3B,GAAG,KAAK,QAAQ,IAAI2B,CAAC,CAAC3B,GAAG,KAAK,KAAK,EACvChC,aAAa,CAACkB,OAAO,CAACP,OAAO,CAAC,KAAK,CAAC;EACxC,CAAC;EAED,IAAMiD,UAAU,GAAG,SAAbA,UAAU,CAAID,CAAmC,EAAK;IAC1D;IACA,IAAI,CAACA,CAAC,CAACE,aAAa,CAACC,QAAQ,CAACH,CAAC,CAACI,aAAa,CAAC,EAAE;MAC9CrE,MAAM,IAAIA,MAAM,CAACiE,CAAC,CAAC;IACrB;EACF,CAAC;EACD,IAAMK,QAAQ,GAAG,EAAE;EAEnB,oBACE;IAAA,wBAEE,KAAC,mBAAmB;MAAC,aAAa,EAAErE,qBAAsB;MAAC,eAAaE,UAAW;MAAC,UAAU,EAAES,cAAe;MAAC,MAAM,EAAEpD,MAAM,IAAI,EAAG;MAAC,MAAM,EAAE0G,UAAW;MAAA,uBACvJ,KAAC,UAAU;QACT,GAAG,EAAE5D,aAAc;QACnB,cAAc,EAAEiD,kBAAmB;QACnC,eAAe,EAAEF,mBAAoB;QACrC,SAAS,EAAEW,aAAc;QACzB,EAAE,EAAE9D,EAAG;QACP,cAAc,EAAE;UAAA,OAAMI,aAAa,CAACkB,OAAO,CAACP,OAAO,CAAC,KAAK,CAAC;QAAA,CAAC;QAE3D,QAAQ,EAAE,kBAACgD,CAAM,EAAK;UACpB,IAAI3E,SAAQ,EAAE;YACZ,IAAIsB,cAAc,EAAE;cAClB,IAAM2D,OAAO,GAAG,IAAId,IAAI,EAAE;cAC1Bc,OAAO,CAACb,WAAW,CAACO,CAAC,CAACN,WAAW,EAAE,CAAC;cACpCY,OAAO,CAACC,QAAQ,CAAC9D,eAAe,CAAC;cACjCK,SAAS,CAACwD,OAAO,CAAC;YACpB,CAAC,MAAMjF,SAAQ,CAAC2E,CAAC,CAAC;UACpB;UACA,IAAIrD,cAAc,EAAEC,iBAAiB,CAAC,KAAK,CAAC;QAC9C,CAAE;QACF,QAAQ,EAAEzB,QAAQ,IAAIC,QAAS;QAC/B,MAAM,EAAErD,EAAG;QACX,qBAAqB,EAAEiE,qBAAsB;QAC7C,UAAU,EAAEA,qBAAqB,GAAG,WAAW,GAAGwE,SAAU;QAC5D,cAAc,EAAE7D;QAChB;QAAA;QACA,cAAc,EAAEA,cAAc,GAAGiD,WAAW,GAAGY,SAAU;QACzD,OAAO,EAAE7D,cAAc,GAAG4C,OAAO,GAAGiB,SAAU;QAC9C,QAAQ,EAAEjF,KAAM;QAChB,UAAU,EAAEsB,MAAM,aAANA,MAAM,cAANA,MAAM,GAAI2D,SAAU;QAChC,kBAAkB,EAAE,IAAK;QACzB,mBAAmB,EAAE,IAAK;QAC1B,kBAAkB,EAChB7G,UAAU,GACN,UAAC8G,MAAwC;UAAA,oBACzC7I,KAAK,CAAC8I,aAAa,CACjBpI,qBAAqB,kCAEhBmI,MAAM;YACT/D,kBAAkB,EAAlBA,kBAAkB;YAClBiE,iBAAiB,EAAE,CAAC;YACpBhE,cAAc,EAAEA,cAAc;YAC9BC,iBAAiB,EAAEA;UAAiB,IAEtC,IAAI,CACL;QAAA,IACD4D,SACL;QACD,WAAW,eACT,MAAC,YAAY;UAAC,QAAQ,EAAErF,QAAS;UAAC,QAAQ,EAAEC,QAAS;UAAA,wBACnD,MAAC,aAAa;YAAA,wBACV,KAAC,uBAAuB;cACtB,GAAG,EAAEgB,QAAS;cACd,IAAI,EAAC,MAAM;cACX,IAAI,EAAC,YAAY;cACjB,SAAS,EAAE,mBAAC4D,CAAC;gBAAA,OAAKA,CAAC,CAAC3B,GAAG,KAAK,OAAO,IAAIhC,aAAa,CAACkB,OAAO,CAACP,OAAO,CAAC,IAAI,CAAC;cAAA,CAAC;cAC3E,SAAS,EAAG1B,OAAO,GAAG,SAAS,GAAG,EAAE,IAAIyB,IAAI,GAAG,OAAO,GAAG,EAAE,CAAG;cAC9D,QAAQ,EAAE5B,QAAQ,IAAIC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;cACxC,OAAO,EAAE,iBAAC4E,CAAC;gBAAA;gBAAA,6BAAK5D,QAAQ,CAACmB,OAAO,uDAAhB,mBAAkBqD,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC;cAAA,CAAC;cAC1D,YAAY,EAAElF,YAAa;cAC3B,WAAW,EAAEC,WAAY;cACzB,iBAAiB,EAAE0E,QAAS;cAC5B,QAAQ,EAAElF,QAAS;cACnB,QAAQ,EAAE,IAAK;cACf,sBAAsB,EAAE,CAACC,QAAS;cAClC,QAAQ,EAAEQ;YAAS,GACfO,IAAI,EACR,eACF,KAAC,WAAW;cAAA,uBACV,KAAC,WAAW,CAAC,QAAQ;gBAAC,IAAI,EAAC;cAAI;YAAE,EACrB;UAAA,EACA,EACjB,CAACY,IAAI,iBAAI,KAAC,eAAe;YAAC,KAAK,EAAEX,QAAS;YAAC,SAAS,EAAE,IAAK;YAAC,QAAQ,EAAC,MAAM;YAAC,IAAI,EAAElD,IAAI,CAACY,KAAM;YAAC,KAAK,EAAC,KAAK;YAAC,QAAQ,EAAC,QAAQ;YAAA,UACzHmD,iBAAiB;UAAE,EACJ;QAAA;MAErB;IACD,EACkB,EAGrBzB,iBAAiB,iBAChB,MAAC,YAAY;MAAA,wBACX,KAAC,WAAW,CAAC,gBAAgB;QAAC,KAAK,EAAEpD,MAAM,CAACyI;MAAa,EAAE,eAC3D;QAAA,UAAOrF;MAAiB,EAAQ;IAAA,EAEnC;EAAA,EACA;AAEP,CAAC,CAAC;AAAC;EA3mBDD,KAAK;EACLF,QAAQ;EACRU,MAAM;EAENC,qBAAqB;EACrBV,OAAO;EACPG,UAAU;EACVD,iBAAiB;EACjBE,YAAY;EACZC,WAAW;EACXhC,UAAU;EACVkC,sBAAsB;EACtBC,qBAAqB;EACrBvC,MAAM;AAAA;AAgmBR,eAAeyB,eAAe"}

package/dist/InputFields/NumberField.cjs CHANGED Viewed

@@ -23,7 +23,7 @@ var _typography = require("../styles/typography");
 var _types = require("../types");
 var _styling = require("./styling");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["type", "size", "note", "noteIcon", "required", "prefix", "interval", "minValue", "maxValue", "allowNegative", "decimalPrecision", "disabled", "readOnly", "state", "value", "placeholder", "onChange", "className", "id", "overflowTooltipPosition", "dataTestId"];
+var _excluded = ["type", "size", "note", "noteIcon", "required", "prefix", "interval", "minValue", "maxValue", "allowNegative", "decimalPrecision", "disabled", "readOnly", "state", "value", "placeholder", "onChange", "className", "id", "dataTestId"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 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; }
@@ -57,7 +57,7 @@ var InputContainer = _styledComponents.default.div(_templateObject5 || (_templat
   return props.type === 'NumberField' ? '160px' : '144px';
 }, function (props) {
   return props.size === _types.Size.Small ? '48px' : '56px';
-}, _styles.Z_INDEXES.focus, (0, _TooltipStyles.TooltipTrigger)('hover'));
+}, _styles.Z_INDEXES.focus, (0, _TooltipStyles.TooltipTrigger)());
 var LeftOperator = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: ", ";\n  left: 0;\n"])), function (props) {
   return props.size === _types.Size.Small ? '0' : '4px';
 });
@@ -87,7 +87,6 @@ var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onChange = props.onChange,
     className = props.className,
     id = props.id,
-    overflowTooltipPosition = props.overflowTooltipPosition,
     dataTestId = props.dataTestId,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var _React$useState = React.useState(value ? value.toString() : ''),
@@ -277,13 +276,13 @@ var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
         },
         required: required,
         className: disabled ? ' disabled' : ''.concat(readOnly ? ' readOnly' : '').concat(state ? " ".concat(state) : '').concat(className ? " ".concat(className) : '')
-      }, rest)), type === 'NumberField' && renderNumberFieldElements(), type === 'NumberInput' && renderNumberInputElements(), value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow.default, {
-        position: overflowTooltipPosition,
+      }, rest)), type === 'NumberField' && renderNumberFieldElements(), type === 'NumberInput' && renderNumberInputElements(), !!value && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow.default, {
         input: elementRef,
         withArrow: true,
         maxWidth: "100%",
         size: size,
         align: "end",
+        position: "bottom",
         children: value === null || value === void 0 ? void 0 : value.toString()
       })]
     }), note && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ValidationMessage, {
@@ -305,8 +304,7 @@ NumberField.propTypes = {
   noteIcon: _propTypes.default.node,
   type: _propTypes.default.oneOf(['NumberField', 'NumberInput']),
   value: _propTypes.default.number,
-  onChange: _propTypes.default.func,
-  overflowTooltipPosition: _propTypes.default.oneOf(['top', 'bottom'])
+  onChange: _propTypes.default.func
 };
 var _default = NumberField;
 exports.default = _default;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberField.cjs","names":["Container","styled","div","PrefixContainer","props","size","Size","Small","disabled","COLORS","neutral_300","neutral_500","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","OperatorWrapper","Medium","neutral_200","NumberInput","input","neutral_400","fieldSize","black","type","hasPrefix","Italic","primary_800","focusStyles","primary_700","neutral_100","correct_400","critical_400","InputContainer","Z_INDEXES","focus","TooltipTrigger","LeftOperator","RightOperator","NumberField","React","forwardRef","ref","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","readOnly","state","value","placeholder","onChange","className","id","overflowTooltipPosition","dataTestId","rest","useState","toString","userInput","setUserInput","elementRef","useFocusVisibleRef","useEffect","useImperativeHandle","current","setVal","e","handleKeyPress","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","undefined","negativeAndDecimalRegex","val","target","length","charAt","test","isInRange","replace","indexOf","lastIndexOf","includes","isDecimal","x","parseFloat","toFixed","parseInt","isNaN","Math","round","pow","isLocked","operator","operatorState","renderNumberFieldElements","renderNumberInputElements","concat","States","Default"],"sources":["../../src/InputFields/NumberField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport styled from 'styled-components';\r\nimport {IconButton} from '../Button';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, focusStyles, Z_INDEXES} from '../styles';\r\nimport {\r\n ComponentMStyling,\r\n ComponentSStyling,\r\n ComponentTextStyle,\r\n ComponentXSStyling,\r\n ComponentXXSStyling\r\n} from '../styles/typography';\r\nimport {Size, States, Testable} from '../types';\r\nimport {ValidationMessage} from \"./styling\";\r\n\r\nconst Container = styled.div``;\r\n\r\nconst PrefixContainer = styled.div<{ size: Size, disabled: boolean }>`\r\n width: ${props => props.size === Size.Small ? '10px' : '11px'};\r\n height: ${props => props.size === Size.Small ? '20px' : '24px'};\r\n color: ${props => props.disabled ? COLORS.neutral_300 : COLORS.neutral_500};\r\n ${props => props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, null) : ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n position: absolute;\r\n padding: ${props => props.size === Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px'};\r\n`;\r\n\r\nconst OperatorWrapper = styled.div<{ size: Size }>`\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n display: flex;\r\n margin: ${props => props.size === Size.Medium ? '4px 0' : ''};\r\n\r\n svg {\r\n height: 14px;\r\n width: 14px;\r\n }\r\n\r\n .divider {\r\n margin: 16px 0;\r\n background: ${COLORS.neutral_200};\r\n width: 1px;\r\n }\r\n`;\r\n\r\nconst NumberInput = styled.input<{ fieldSize: Size, hasPrefix: boolean, type: string }>`\r\n width: 100%;\r\n border: none;\r\n border-radius: 4px;\r\n text-overflow: ellipsis;\r\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\r\n outline: none;\r\n color: ${COLORS.neutral_500};\r\n\r\n ${props => props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.black) : ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n ${props => props.type === 'NumberField' ? `\r\n padding: ${props.fieldSize === Size.Small ? '14px 97px 14px 16px' : '16px 97px 16px 16px'};\r\n padding-left: ${props.hasPrefix ? '30px' : ''};\r\n ` : ''}\r\n ${props => props.type === 'NumberInput' ? `\r\n padding: ${props.fieldSize === Size.Small ? '14px 48px' : '16px 48px'};\r\n ` : ''}\r\n &::placeholder {\r\n ${props => props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Italic, null) : ComponentMStyling(ComponentTextStyle.Italic, null)}\r\n }\r\n\r\n &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\r\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n }\r\n\r\n &.focus-visible {\r\n ${focusStyles}\r\n }\r\n\r\n &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\r\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\r\n }\r\n\r\n &.disabled {\r\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\r\n cursor: not-allowed;\r\n color: ${COLORS.neutral_300};\r\n pointer-events: none;\r\n\r\n &::placeholder {\r\n color: ${COLORS.neutral_300};\r\n }\r\n }\r\n\r\n &.readOnly {\r\n background: ${COLORS.neutral_100};\r\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_300};\r\n cursor: not-allowed;\r\n background: ${COLORS.neutral_100};\r\n pointer-events: none;\r\n color: ${COLORS.neutral_500};\r\n }\r\n\r\n &.valid {\r\n box-shadow: inset 0 0 0 2px ${COLORS.correct_400};\r\n }\r\n\r\n &.invalid {\r\n box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\r\n }\r\n`;\r\n\r\nconst InputContainer = styled.div<{ size: Size, type: string }>`\r\n min-width: ${props => props.type === 'NumberField' ? '160px' : '144px'};\r\n height: ${props => props.size === Size.Small ? '48px' : '56px'};\r\n display: flex;\r\n position: relative;\r\n margin-bottom: 4px;\r\n\r\n input.focus-visible ~ div.operator {\r\n z-index: ${Z_INDEXES.focus};\r\n }\r\n\r\n ${TooltipTrigger('hover')}\r\n`;\r\n\r\nconst LeftOperator = styled.div<{ size: Size }>`\r\n position: absolute;\r\n top: ${props => props.size === Size.Small ? '0' : '4px'};\r\n left: 0;\r\n`;\r\n\r\nconst RightOperator = styled.div<{ size: Size }>`\r\n position: absolute;\r\n top: ${props => props.size === Size.Small ? '0' : '4px'};\r\n right: 0;\r\n`;\r\n\r\nexport type NumberFieldProps =\r\n Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' \| 'onKeyDown' \| 'onClick' \| 'tabIndex' \| 'size' \| 'value' \| 'prefix' \| 'min' \| 'max'>\r\n & {\r\n size?: Size.Small \| Size.Medium;\r\n prefix?: string;\r\n interval?: number;\r\n\r\n minValue?: number;\r\n maxValue?: number;\r\n allowNegative?: boolean;\r\n decimalPrecision?: number;\r\n\r\n state?: States.Valid \| States.Invalid;\r\n note?: string;\r\n noteIcon?: React.ReactNode;\r\n\r\n type?: 'NumberField' \| 'NumberInput';\r\n value?: number;\r\n onChange?: (e: number) => void;\r\n overflowTooltipPosition?: 'top' \| 'bottom';\r\n}\r\n\r\nconst NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>((props, ref) => {\r\n const {\r\n type = 'NumberField',\r\n size = Size.Medium,\r\n note,\r\n noteIcon,\r\n required,\r\n prefix,\r\n interval = 1,\r\n minValue,\r\n maxValue,\r\n allowNegative,\r\n decimalPrecision,\r\n disabled,\r\n readOnly,\r\n state,\r\n value,\r\n placeholder,\r\n onChange,\r\n className,\r\n id,\r\n overflowTooltipPosition,\r\n dataTestId,\r\n ...rest\r\n } = props;\r\n\r\n const [userInput, setUserInput] = React.useState(value ? value.toString() : '');\r\n\r\n const elementRef = useFocusVisibleRef();\r\n\r\n React.useEffect(() => setUserInput(`${value ?? ''}`), [value]);\r\n\r\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n const setVal = (e: string) => {\r\n setUserInput(e);\r\n onChange && onChange(+e);\r\n }\r\n\r\n const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n switch (e.key) {\r\n case 'ArrowUp':\r\n addInterval();\r\n break;\r\n case 'ArrowDown':\r\n subtractInterval();\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n e.preventDefault();\r\n let simpleRegex = new RegExp(/^[0-9]\\d$/);\r\n let decimalFormationRegEx = new RegExp(/^[0-9]\\d\\.$/);\r\n let negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\\d\\.$/);\r\n\r\n let allowNegativeRegex = new RegExp(/^[-][0-9]\\d$/);\r\n let decimalPrecisionRegex = decimalPrecision ? new RegExp(`^[0-9]\\\\d\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\r\n let negativeAndDecimalRegex = (decimalPrecision && allowNegative) ? new RegExp(`^[-][0-9]\\\\d\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\r\n\r\n let val = e.target.value;\r\n if (val !== '') {\r\n if (allowNegative && decimalPrecision) {\r\n if (val.length === 1 && val.charAt(0) === '-')\r\n setVal(val);\r\n else {\r\n if ((negativeAndDecimalRegex!.test(val) \|\| decimalPrecisionRegex!.test(val)) && isInRange(val, true))\r\n setVal(val);\r\n\r\n else if ((negativeDecimalFormationRegEx.test(val) \|\| decimalFormationRegEx.test(val)) && isInRange(val.replace('.', ''), true))\r\n setVal(val);\r\n\r\n else if ((allowNegativeRegex.test(val) \|\| simpleRegex.test(val)) && isInRange(val, true))\r\n setVal(val);\r\n }\r\n } else if (allowNegative) {\r\n if (val.length === 1 && val.charAt(0) === '-')\r\n setVal(val);\r\n else if ((allowNegativeRegex.test(val) \|\| simpleRegex.test(val)) && isInRange(val, false))\r\n setVal(val);\r\n } else if (decimalPrecision && (val.indexOf('.') === val.lastIndexOf('.')) && isInRange(val, true)) {\r\n if (decimalPrecisionRegex!.test(val))\r\n setVal(val);\r\n else if (decimalFormationRegEx.test(val))\r\n setVal(val);\r\n else if (!val.includes('.') && simpleRegex.test(val))\r\n setVal(val);\r\n } else if (simpleRegex.test(val) && isInRange(val, false)) {\r\n setVal(val);\r\n }\r\n }\r\n\r\n if (val === '')\r\n setVal('');\r\n }\r\n\r\n const isInRange = (value: string, isDecimal: boolean): boolean => {\r\n let x = isDecimal ? parseFloat(value).toFixed(decimalPrecision) : parseInt(value);\r\n if (minValue && minValue > x)\r\n return false;\r\n else if (maxValue && maxValue < x)\r\n return false;\r\n else\r\n return true;\r\n }\r\n\r\n const addInterval = () => {\r\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\r\n val = isNaN(val) && userInput === '' ? (minValue ? minValue - 1 : 0) : val;\r\n if (!isNaN(val)) {\r\n if (decimalPrecision)\r\n val = Math.round((val + interval) * Math.pow(10, decimalPrecision!)) / Math.pow(10, decimalPrecision!);\r\n else\r\n val += 1;\r\n\r\n if (maxValue && maxValue >= val)\r\n setVal(val.toString());\r\n else if (!maxValue)\r\n setVal(val.toString());\r\n }\r\n }\r\n\r\n const subtractInterval = () => {\r\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\r\n val = isNaN(val) && userInput === '' ? (maxValue ? maxValue + 1 : 0) : val;\r\n if (!isNaN(val)) {\r\n if (decimalPrecision)\r\n val = Math.round((val - interval) * Math.pow(10, decimalPrecision!)) / Math.pow(10, decimalPrecision!);\r\n else\r\n val -= 1;\r\n\r\n if ((minValue && minValue <= val) \|\| !minValue) {\r\n if (allowNegative \|\| val >= 0) {\r\n setVal(val.toString());\r\n }\r\n }\r\n }\r\n }\r\n\r\n const isLocked = (input: string, operator: string): boolean => {\r\n let val = decimalPrecision ? parseFloat(input) : parseInt(input);\r\n val = isNaN(val) && userInput === '' ? 0 : val;\r\n let operatorState = false;\r\n if (operator === 'add' && maxValue)\r\n operatorState = val >= maxValue;\r\n\r\n if (operator === 'subtract' && minValue)\r\n operatorState = val <= minValue;\r\n\r\n if (operator === 'subtract' && !minValue && !allowNegative)\r\n operatorState = val <= 0;\r\n\r\n return operatorState;\r\n }\r\n\r\n const renderNumberFieldElements = () => {\r\n return (\r\n <>\r\n {prefix && <PrefixContainer size={size} disabled={!!disabled} className=\"operator\">\r\n {prefix}\r\n </PrefixContainer>}\r\n\r\n <OperatorWrapper data-testid={'operators'} size={size} className=\"operator\">\r\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => subtractInterval()}\r\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'subtract')}>\r\n <SystemIcons.Minus size=\"14px\"/>\r\n </IconButton>\r\n <div className=\"divider\"></div>\r\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => addInterval()}\r\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'add')}>\r\n <SystemIcons.Plus size=\"14px\"/>\r\n </IconButton>\r\n </OperatorWrapper>\r\n </>)\r\n }\r\n\r\n const renderNumberInputElements = () => {\r\n return (\r\n <>\r\n <LeftOperator data-testid={'leftOperator'} size={size} className=\"operator\">\r\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => subtractInterval()}\r\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'subtract')}>\r\n <SystemIcons.Minus size=\"14px\"/>\r\n </IconButton>\r\n </LeftOperator>\r\n <RightOperator data-testid={'rightOperator'} size={size} className=\"operator\">\r\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => addInterval()}\r\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'add')}>\r\n <SystemIcons.Plus size=\"14px\"/>\r\n </IconButton>\r\n </RightOperator>\r\n </>)\r\n }\r\n\r\n return (\r\n <Container>\r\n <InputContainer type={type} size={size} tabIndex={-1}>\r\n <NumberInput type={type}\r\n id={id}\r\n data-testid={dataTestId}\r\n fieldSize={size}\r\n hasPrefix={!!prefix}\r\n placeholder={placeholder ? placeholder : 'Enter number'}\r\n value={userInput}\r\n ref={elementRef}\r\n tabIndex={(disabled \|\| readOnly) ? -1 : 0}\r\n onChange={e => handleInput(e)}\r\n onKeyDown={e => handleKeyPress(e)}\r\n required={required}\r\n className={disabled ? ' disabled' : ''\r\n .concat(readOnly ? ' readOnly' : '')\r\n .concat(state ? ` ${state}` : '')\r\n .concat(className ? ` ${className}` : '')}\r\n {...rest}/>\r\n\r\n {type === 'NumberField' && renderNumberFieldElements()}\r\n {type === 'NumberInput' && renderNumberInputElements()}\r\n {value && <TooltipOverflow position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n {value?.toString()}\r\n </TooltipOverflow>}\r\n </InputContainer>\r\n\r\n {\r\n note &&\r\n <ValidationMessage type={state \|\| States.Default}>\r\n {noteIcon}\r\n <span>{note}</span>\r\n </ValidationMessage>\r\n }\r\n\r\n </Container>\r\n );\r\n }\r\n )\r\n;\r\n\r\nexport default NumberField;\r\n"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAOA;AACA;AAA4C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAE5C,IAAMA,SAAS,GAAGC,yBAAM,CAACC,GAAG,mFAAE;AAE9B,IAAMC,eAAe,GAAGF,yBAAM,CAACC,GAAG,0LACvB,UAAAE,KAAK;EAAA,OAAIA,KAAK,CAACC,IAAI,KAAKC,WAAI,CAACC,KAAK,GAAG,MAAM,GAAG,MAAM;AAAA,GACnD,UAAAH,KAAK;EAAA,OAAIA,KAAK,CAACC,IAAI,KAAKC,WAAI,CAACC,KAAK,GAAG,MAAM,GAAG,MAAM;AAAA,GACrD,UAAAH,KAAK;EAAA,OAAIA,KAAK,CAACI,QAAQ,GAAGC,cAAM,CAACC,WAAW,GAAGD,cAAM,CAACE,WAAW;AAAA,GACxE,UAAAP,KAAK;EAAA,OAAIA,KAAK,CAACC,IAAI,KAAKC,WAAI,CAACC,KAAK,GAAG,IAAAK,6BAAiB,EAACC,8BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC,GAAG,IAAAC,6BAAiB,EAACF,8BAAkB,CAACC,OAAO,EAAE,IAAI,CAAC;AAAA,GAErI,UAAAV,KAAK;EAAA,OAAIA,KAAK,CAACC,IAAI,KAAKC,WAAI,CAACC,KAAK,GAAG,kBAAkB,GAAG,kBAAkB;AAAA,EACxF;AAED,IAAMS,eAAe,GAAGf,yBAAM,CAACC,GAAG,iTAKtB,UAAAE,KAAK;EAAA,OAAIA,KAAK,CAACC,IAAI,KAAKC,WAAI,CAACW,MAAM,GAAG,OAAO,GAAG,EAAE;AAAA,GAS5CR,cAAM,CAACS,WAAW,CAGnC;AAED,IAAMC,WAAW,GAAGlB,yBAAM,CAACmB,KAAK,mjCAKAX,cAAM,CAACY,WAAW,EAEvCZ,cAAM,CAACE,WAAW,EAEzB,UAAAP,KAAK;EAAA,OAAIA,KAAK,CAACkB,SAAS,KAAKhB,WAAI,CAACC,KAAK,GAAG,IAAAK,6BAAiB,EAACC,8BAAkB,CAACC,OAAO,EAAEL,cAAM,CAACc,KAAK,CAAC,GAAG,IAAAR,6BAAiB,EAACF,8BAAkB,CAACC,OAAO,EAAEL,cAAM,CAACc,KAAK,CAAC;AAAA,GACnK,UAAAnB,KAAK;EAAA,OAAIA,KAAK,CAACoB,IAAI,KAAK,aAAa,gCACtBpB,KAAK,CAACkB,SAAS,KAAKhB,WAAI,CAACC,KAAK,GAAG,qBAAqB,GAAG,qBAAqB,sCACzEH,KAAK,CAACqB,SAAS,GAAG,MAAM,GAAG,EAAE,eAC7C,EAAE;AAAA,GACN,UAAArB,KAAK;EAAA,OAAIA,KAAK,CAACoB,IAAI,KAAK,aAAa,gCACtBpB,KAAK,CAACkB,SAAS,KAAKhB,WAAI,CAACC,KAAK,GAAG,WAAW,GAAG,WAAW,eACrE,EAAE;AAAA,GAEJ,UAAAH,KAAK;EAAA,OAAIA,KAAK,CAACkB,SAAS,KAAKhB,WAAI,CAACC,KAAK,GAAG,IAAAK,6BAAiB,EAACC,8BAAkB,CAACa,MAAM,EAAE,IAAI,CAAC,GAAG,IAAAX,6BAAiB,EAACF,8BAAkB,CAACa,MAAM,EAAE,IAAI,CAAC;AAAA,GAIrHjB,cAAM,CAACkB,WAAW,EAI9CC,mBAAW,EAIiBnB,cAAM,CAACoB,WAAW,EAIlBpB,cAAM,CAACqB,WAAW,EAEvCrB,cAAM,CAACC,WAAW,EAIhBD,cAAM,CAACC,WAAW,EAKfD,cAAM,CAACqB,WAAW,EACFrB,cAAM,CAACC,WAAW,EAElCD,cAAM,CAACqB,WAAW,EAEvBrB,cAAM,CAACE,WAAW,EAIGF,cAAM,CAACsB,WAAW,EAIlBtB,cAAM,CAACuB,YAAY,CAEpD;AAED,IAAMC,cAAc,GAAGhC,yBAAM,CAACC,GAAG,0QAClB,UAAAE,KAAK;EAAA,OAAIA,KAAK,CAACoB,IAAI,KAAK,aAAa,GAAG,OAAO,GAAG,OAAO;AAAA,GAC5D,UAAApB,KAAK;EAAA,OAAIA,KAAK,CAACC,IAAI,KAAKC,WAAI,CAACC,KAAK,GAAG,MAAM,GAAG,MAAM;AAAA,GAMjD2B,iBAAS,CAACC,KAAK,EAG1B,IAAAC,6BAAc,EAAC,OAAO,CAAC,CAC1B;AAED,IAAMC,YAAY,GAAGpC,yBAAM,CAACC,GAAG,yIAEtB,UAAAE,KAAK;EAAA,OAAIA,KAAK,CAACC,IAAI,KAAKC,WAAI,CAACC,KAAK,GAAG,GAAG,GAAG,KAAK;AAAA,EAExD;AAED,IAAM+B,aAAa,GAAGrC,yBAAM,CAACC,GAAG,0IAEvB,UAAAE,KAAK;EAAA,OAAIA,KAAK,CAACC,IAAI,KAAKC,WAAI,CAACC,KAAK,GAAG,GAAG,GAAG,KAAK;AAAA,EAExD;AAwBD,IAAMgC,WAAW,gBAAGC,KAAK,CAACC,UAAU,CAAqC,UAACrC,KAAK,EAAEsC,GAAG,EAAK;EACnF,kBAuBItC,KAAK,CAtBPoB,IAAI;IAAJA,IAAI,4BAAG,aAAa;IAAA,cAsBlBpB,KAAK,CArBPC,IAAI;IAAJA,IAAI,4BAAGC,WAAI,CAACW,MAAM;IAClB0B,IAAI,GAoBFvC,KAAK,CApBPuC,IAAI;IACJC,QAAQ,GAmBNxC,KAAK,CAnBPwC,QAAQ;IACRC,QAAQ,GAkBNzC,KAAK,CAlBPyC,QAAQ;IACRC,MAAM,GAiBJ1C,KAAK,CAjBP0C,MAAM;IAAA,kBAiBJ1C,KAAK,CAhBP2C,QAAQ;IAARA,QAAQ,gCAAG,CAAC;IACZC,QAAQ,GAeN5C,KAAK,CAfP4C,QAAQ;IACRC,QAAQ,GAcN7C,KAAK,CAdP6C,QAAQ;IACRC,aAAa,GAaX9C,KAAK,CAbP8C,aAAa;IACbC,gBAAgB,GAYd/C,KAAK,CAZP+C,gBAAgB;IAChB3C,QAAQ,GAWNJ,KAAK,CAXPI,QAAQ;IACR4C,QAAQ,GAUNhD,KAAK,CAVPgD,QAAQ;IACRC,KAAK,GASHjD,KAAK,CATPiD,KAAK;IACLC,KAAK,GAQHlD,KAAK,CARPkD,KAAK;IACLC,WAAW,GAOTnD,KAAK,CAPPmD,WAAW;IACXC,QAAQ,GAMNpD,KAAK,CANPoD,QAAQ;IACRC,SAAS,GAKPrD,KAAK,CALPqD,SAAS;IACTC,EAAE,GAIAtD,KAAK,CAJPsD,EAAE;IACFC,uBAAuB,GAGrBvD,KAAK,CAHPuD,uBAAuB;IACvBC,UAAU,GAERxD,KAAK,CAFPwD,UAAU;IACPC,IAAI,0CACLzD,KAAK;EAET,sBAAkCoC,KAAK,CAACsB,QAAQ,CAACR,KAAK,GAAGA,KAAK,CAACS,QAAQ,EAAE,GAAG,EAAE,CAAC;IAAA;IAAxEC,SAAS;IAAEC,YAAY;EAE9B,IAAMC,UAAU,GAAG,IAAAC,0BAAkB,GAAE;EAEvC3B,KAAK,CAAC4B,SAAS,CAAC;IAAA,OAAMH,YAAY,WAAIX,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE,EAAG;EAAA,GAAE,CAACA,KAAK,CAAC,CAAC;EAE9Dd,KAAK,CAAC6B,mBAAmB,CAAC3B,GAAG,EAAE;IAAA,OAAMwB,UAAU,CAACI,OAAO;EAAA,GAAE,CAACJ,UAAU,CAAC,CAAC;EAEtE,IAAMK,MAAM,GAAG,SAATA,MAAM,CAAIC,CAAS,EAAK;IAC5BP,YAAY,CAACO,CAAC,CAAC;IACfhB,QAAQ,IAAIA,QAAQ,CAAC,CAACgB,CAAC,CAAC;EAC1B,CAAC;EAED,IAAMC,cAAc,GAAG,SAAjBA,cAAc,CAAID,CAAwC,EAAK;IACnE,QAAQA,CAAC,CAACE,GAAG;MACX,KAAK,SAAS;QACZC,WAAW,EAAE;QACb;MACF,KAAK,WAAW;QACdC,gBAAgB,EAAE;QAClB;MACF;QACE;IAAM;EAEZ,CAAC;EAED,IAAMC,WAAW,GAAG,SAAdA,WAAW,CAAIL,CAAsC,EAAK;IAC9DA,CAAC,CAACM,cAAc,EAAE;IAClB,IAAIC,WAAW,GAAG,IAAIC,MAAM,CAAC,YAAY,CAAC;IAC1C,IAAIC,qBAAqB,GAAG,IAAID,MAAM,CAAC,cAAc,CAAC;IACtD,IAAIE,6BAA6B,GAAG,IAAIF,MAAM,CAAC,iBAAiB,CAAC;IAEjE,IAAIG,kBAAkB,GAAG,IAAIH,MAAM,CAAC,eAAe,CAAC;IACpD,IAAII,qBAAqB,GAAGjC,gBAAgB,GAAG,IAAI6B,MAAM,mCAA4B7B,gBAAgB,GAAC,CAAC,QAAK,GAAGkC,SAAS;IACxH,IAAIC,uBAAuB,GAAInC,gBAAgB,IAAID,aAAa,GAAI,IAAI8B,MAAM,sCAA+B7B,gBAAgB,GAAC,CAAC,QAAK,GAAGkC,SAAS;IAEhJ,IAAIE,GAAG,GAAGf,CAAC,CAACgB,MAAM,CAAClC,KAAK;IACxB,IAAIiC,GAAG,KAAK,EAAE,EAAE;MACd,IAAIrC,aAAa,IAAIC,gBAAgB,EAAE;QACrC,IAAIoC,GAAG,CAACE,MAAM,KAAK,CAAC,IAAIF,GAAG,CAACG,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,EAC3CnB,MAAM,CAACgB,GAAG,CAAC,CAAC,KACT;UACH,IAAI,CAACD,uBAAuB,CAAEK,IAAI,CAACJ,GAAG,CAAC,IAAIH,qBAAqB,CAAEO,IAAI,CAACJ,GAAG,CAAC,KAAKK,SAAS,CAACL,GAAG,EAAE,IAAI,CAAC,EAClGhB,MAAM,CAACgB,GAAG,CAAC,CAAC,KAET,IAAI,CAACL,6BAA6B,CAACS,IAAI,CAACJ,GAAG,CAAC,IAAIN,qBAAqB,CAACU,IAAI,CAACJ,GAAG,CAAC,KAAKK,SAAS,CAACL,GAAG,CAACM,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,EAC5HtB,MAAM,CAACgB,GAAG,CAAC,CAAC,KAET,IAAI,CAACJ,kBAAkB,CAACQ,IAAI,CAACJ,GAAG,CAAC,IAAIR,WAAW,CAACY,IAAI,CAACJ,GAAG,CAAC,KAAKK,SAAS,CAACL,GAAG,EAAE,IAAI,CAAC,EACtFhB,MAAM,CAACgB,GAAG,CAAC;QACf;MACF,CAAC,MAAM,IAAIrC,aAAa,EAAE;QACxB,IAAIqC,GAAG,CAACE,MAAM,KAAK,CAAC,IAAIF,GAAG,CAACG,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,EAC3CnB,MAAM,CAACgB,GAAG,CAAC,CAAC,KACT,IAAI,CAACJ,kBAAkB,CAACQ,IAAI,CAACJ,GAAG,CAAC,IAAIR,WAAW,CAACY,IAAI,CAACJ,GAAG,CAAC,KAAKK,SAAS,CAACL,GAAG,EAAE,KAAK,CAAC,EACvFhB,MAAM,CAACgB,GAAG,CAAC;MACf,CAAC,MAAM,IAAIpC,gBAAgB,IAAKoC,GAAG,CAACO,OAAO,CAAC,GAAG,CAAC,KAAKP,GAAG,CAACQ,WAAW,CAAC,GAAG,CAAE,IAAIH,SAAS,CAACL,GAAG,EAAE,IAAI,CAAC,EAAE;QAClG,IAAIH,qBAAqB,CAAEO,IAAI,CAACJ,GAAG,CAAC,EAClChB,MAAM,CAACgB,GAAG,CAAC,CAAC,KACT,IAAIN,qBAAqB,CAACU,IAAI,CAACJ,GAAG,CAAC,EACtChB,MAAM,CAACgB,GAAG,CAAC,CAAC,KACT,IAAI,CAACA,GAAG,CAACS,QAAQ,CAAC,GAAG,CAAC,IAAIjB,WAAW,CAACY,IAAI,CAACJ,GAAG,CAAC,EAClDhB,MAAM,CAACgB,GAAG,CAAC;MACf,CAAC,MAAM,IAAIR,WAAW,CAACY,IAAI,CAACJ,GAAG,CAAC,IAAIK,SAAS,CAACL,GAAG,EAAE,KAAK,CAAC,EAAE;QACzDhB,MAAM,CAACgB,GAAG,CAAC;MACb;IACF;IAEA,IAAIA,GAAG,KAAK,EAAE,EACZhB,MAAM,CAAC,EAAE,CAAC;EACd,CAAC;EAED,IAAMqB,SAAS,GAAG,SAAZA,SAAS,CAAItC,KAAa,EAAE2C,SAAkB,EAAc;IAChE,IAAIC,CAAC,GAAGD,SAAS,GAAGE,UAAU,CAAC7C,KAAK,CAAC,CAAC8C,OAAO,CAACjD,gBAAgB,CAAC,GAAGkD,QAAQ,CAAC/C,KAAK,CAAC;IACjF,IAAIN,QAAQ,IAAIA,QAAQ,GAAGkD,CAAC,EAC1B,OAAO,KAAK,CAAC,KACV,IAAIjD,QAAQ,IAAIA,QAAQ,GAAGiD,CAAC,EAC/B,OAAO,KAAK,CAAC,KAEb,OAAO,IAAI;EACf,CAAC;EAED,IAAMvB,WAAW,GAAG,SAAdA,WAAW,GAAS;IACxB,IAAIY,GAAG,GAAGpC,gBAAgB,GAAGgD,UAAU,CAACnC,SAAS,CAAC,GAAGqC,QAAQ,CAACrC,SAAS,CAAC;IACxEuB,GAAG,GAAGe,KAAK,CAACf,GAAG,CAAC,IAAIvB,SAAS,KAAK,EAAE,GAAIhB,QAAQ,GAAGA,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAIuC,GAAG;IAC1E,IAAI,CAACe,KAAK,CAACf,GAAG,CAAC,EAAE;MACf,IAAIpC,gBAAgB,EAClBoC,GAAG,GAAGgB,IAAI,CAACC,KAAK,CAAC,CAACjB,GAAG,GAAGxC,QAAQ,IAAIwD,IAAI,CAACE,GAAG,CAAC,EAAE,EAAEtD,gBAAgB,CAAE,CAAC,GAAGoD,IAAI,CAACE,GAAG,CAAC,EAAE,EAAEtD,gBAAgB,CAAE,CAAC,KAEvGoC,GAAG,IAAI,CAAC;MAEV,IAAItC,QAAQ,IAAIA,QAAQ,IAAIsC,GAAG,EAC7BhB,MAAM,CAACgB,GAAG,CAACxB,QAAQ,EAAE,CAAC,CAAC,KACpB,IAAI,CAACd,QAAQ,EAChBsB,MAAM,CAACgB,GAAG,CAACxB,QAAQ,EAAE,CAAC;IAC1B;EACF,CAAC;EAED,IAAMa,gBAAgB,GAAG,SAAnBA,gBAAgB,GAAS;IAC7B,IAAIW,GAAG,GAAGpC,gBAAgB,GAAGgD,UAAU,CAACnC,SAAS,CAAC,GAAGqC,QAAQ,CAACrC,SAAS,CAAC;IACxEuB,GAAG,GAAGe,KAAK,CAACf,GAAG,CAAC,IAAIvB,SAAS,KAAK,EAAE,GAAIf,QAAQ,GAAGA,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAIsC,GAAG;IAC1E,IAAI,CAACe,KAAK,CAACf,GAAG,CAAC,EAAE;MACf,IAAIpC,gBAAgB,EAClBoC,GAAG,GAAGgB,IAAI,CAACC,KAAK,CAAC,CAACjB,GAAG,GAAGxC,QAAQ,IAAIwD,IAAI,CAACE,GAAG,CAAC,EAAE,EAAEtD,gBAAgB,CAAE,CAAC,GAAGoD,IAAI,CAACE,GAAG,CAAC,EAAE,EAAEtD,gBAAgB,CAAE,CAAC,KAEvGoC,GAAG,IAAI,CAAC;MAEV,IAAKvC,QAAQ,IAAIA,QAAQ,IAAIuC,GAAG,IAAK,CAACvC,QAAQ,EAAE;QAC9C,IAAIE,aAAa,IAAIqC,GAAG,IAAI,CAAC,EAAE;UAC7BhB,MAAM,CAACgB,GAAG,CAACxB,QAAQ,EAAE,CAAC;QACxB;MACF;IACF;EACF,CAAC;EAED,IAAM2C,QAAQ,GAAG,SAAXA,QAAQ,CAAItF,KAAa,EAAEuF,QAAgB,EAAc;IAC7D,IAAIpB,GAAG,GAAGpC,gBAAgB,GAAGgD,UAAU,CAAC/E,KAAK,CAAC,GAAGiF,QAAQ,CAACjF,KAAK,CAAC;IAChEmE,GAAG,GAAGe,KAAK,CAACf,GAAG,CAAC,IAAIvB,SAAS,KAAK,EAAE,GAAG,CAAC,GAAGuB,GAAG;IAC9C,IAAIqB,aAAa,GAAG,KAAK;IACzB,IAAID,QAAQ,KAAK,KAAK,IAAI1D,QAAQ,EAChC2D,aAAa,GAAGrB,GAAG,IAAItC,QAAQ;IAEjC,IAAI0D,QAAQ,KAAK,UAAU,IAAI3D,QAAQ,EACrC4D,aAAa,GAAGrB,GAAG,IAAIvC,QAAQ;IAEjC,IAAI2D,QAAQ,KAAK,UAAU,IAAI,CAAC3D,QAAQ,IAAI,CAACE,aAAa,EACxD0D,aAAa,GAAGrB,GAAG,IAAI,CAAC;IAE1B,OAAOqB,aAAa;EACtB,CAAC;EAED,IAAMC,yBAAyB,GAAG,SAA5BA,yBAAyB,GAAS;IACtC,oBACE;MAAA,WACG/D,MAAM,iBAAI,qBAAC,eAAe;QAAC,IAAI,EAAEzC,IAAK;QAAC,QAAQ,EAAE,CAAC,CAACG,QAAS;QAAC,SAAS,EAAC,UAAU;QAAA,UAC/EsC;MAAM,EACS,eAElB,sBAAC,eAAe;QAAC,eAAa,WAAY;QAAC,IAAI,EAAEzC,IAAK;QAAC,SAAS,EAAC,UAAU;QAAA,wBACzE,qBAAC,kBAAU;UAAC,QAAQ,EAAE,CAAE;UAAC,OAAO,EAAC,WAAW;UAAC,KAAK,EAAC,QAAQ;UAAC,MAAM,EAAE;YAAA,OAAMuE,gBAAgB,EAAE;UAAA,CAAC;UACjF,wBAAwB;UAAC,QAAQ,EAAEpE,QAAQ,IAAI4C,QAAQ,IAAIsD,QAAQ,CAAC1C,SAAS,EAAE,UAAU,CAAE;UAAA,uBACrG,qBAAC,kBAAW,CAAC,KAAK;YAAC,IAAI,EAAC;UAAM;QAAE,EACrB,eACb;UAAK,SAAS,EAAC;QAAS,EAAO,eAC/B,qBAAC,kBAAU;UAAC,QAAQ,EAAE,CAAE;UAAC,OAAO,EAAC,WAAW;UAAC,KAAK,EAAC,QAAQ;UAAC,MAAM,EAAE;YAAA,OAAMW,WAAW,EAAE;UAAA,CAAC;UAC5E,wBAAwB;UAAC,QAAQ,EAAEnE,QAAQ,IAAI4C,QAAQ,IAAIsD,QAAQ,CAAC1C,SAAS,EAAE,KAAK,CAAE;UAAA,uBAChG,qBAAC,kBAAW,CAAC,IAAI;YAAC,IAAI,EAAC;UAAM;QAAE,EACpB;MAAA,EACG;IAAA,EACjB;EACP,CAAC;EAED,IAAM8C,yBAAyB,GAAG,SAA5BA,yBAAyB,GAAS;IACtC,oBACE;MAAA,wBACE,qBAAC,YAAY;QAAC,eAAa,cAAe;QAAC,IAAI,EAAEzG,IAAK;QAAC,SAAS,EAAC,UAAU;QAAA,uBACzE,qBAAC,kBAAU;UAAC,QAAQ,EAAE,CAAE;UAAC,OAAO,EAAC,WAAW;UAAC,KAAK,EAAC,QAAQ;UAAC,MAAM,EAAE;YAAA,OAAMuE,gBAAgB,EAAE;UAAA,CAAC;UACjF,wBAAwB;UAAC,QAAQ,EAAEpE,QAAQ,IAAI4C,QAAQ,IAAIsD,QAAQ,CAAC1C,SAAS,EAAE,UAAU,CAAE;UAAA,uBACrG,qBAAC,kBAAW,CAAC,KAAK;YAAC,IAAI,EAAC;UAAM;QAAE;MACrB,EACA,eACf,qBAAC,aAAa;QAAC,eAAa,eAAgB;QAAC,IAAI,EAAE3D,IAAK;QAAC,SAAS,EAAC,UAAU;QAAA,uBAC3E,qBAAC,kBAAU;UAAC,QAAQ,EAAE,CAAE;UAAC,OAAO,EAAC,WAAW;UAAC,KAAK,EAAC,QAAQ;UAAC,MAAM,EAAE;YAAA,OAAMsE,WAAW,EAAE;UAAA,CAAC;UAC5E,wBAAwB;UAAC,QAAQ,EAAEnE,QAAQ,IAAI4C,QAAQ,IAAIsD,QAAQ,CAAC1C,SAAS,EAAE,KAAK,CAAE;UAAA,uBAChG,qBAAC,kBAAW,CAAC,IAAI;YAAC,IAAI,EAAC;UAAM;QAAE;MACpB,EACC;IAAA,EACf;EACP,CAAC;EAED,oBACE,sBAAC,SAAS;IAAA,wBACR,sBAAC,cAAc;MAAC,IAAI,EAAExC,IAAK;MAAC,IAAI,EAAEnB,IAAK;MAAC,QAAQ,EAAE,CAAC,CAAE;MAAA,wBACnD,qBAAC,WAAW;QAAC,IAAI,EAAEmB,IAAK;QACV,EAAE,EAAEkC,EAAG;QACR,eAAaE,UAAW;QACxB,SAAS,EAAEvD,IAAK;QAChB,SAAS,EAAE,CAAC,CAACyC,MAAO;QACpB,WAAW,EAAES,WAAW,GAAGA,WAAW,GAAG,cAAe;QACxD,KAAK,EAAES,SAAU;QACjB,GAAG,EAAEE,UAAW;QAChB,QAAQ,EAAG1D,QAAQ,IAAI4C,QAAQ,GAAI,CAAC,CAAC,GAAG,CAAE;QAC1C,QAAQ,EAAE,kBAAAoB,CAAC;UAAA,OAAIK,WAAW,CAACL,CAAC,CAAC;QAAA,CAAC;QAC9B,SAAS,EAAE,mBAAAA,CAAC;UAAA,OAAIC,cAAc,CAACD,CAAC,CAAC;QAAA,CAAC;QAClC,QAAQ,EAAE3B,QAAS;QACnB,SAAS,EAAErC,QAAQ,GAAG,WAAW,GAAG,EAAE,CACnCuG,MAAM,CAAC3D,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnC2D,MAAM,CAAC1D,KAAK,cAAOA,KAAK,IAAK,EAAE,CAAC,CAChC0D,MAAM,CAACtD,SAAS,cAAOA,SAAS,IAAK,EAAE;MAAE,GACxCI,IAAI,EAAG,EAEvBrC,IAAI,KAAK,aAAa,IAAIqF,yBAAyB,EAAE,EACrDrF,IAAI,KAAK,aAAa,IAAIsF,yBAAyB,EAAE,EACrDxD,KAAK,iBAAI,qBAAC,wBAAe;QAAC,QAAQ,EAAEK,uBAAwB;QAAC,KAAK,EAAEO,UAAW;QAAC,SAAS,EAAE,IAAK;QAAC,QAAQ,EAAC,MAAM;QAAC,IAAI,EAAE7D,IAAK;QAAC,KAAK,EAAC,KAAK;QAAA,UACtIiD,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAES,QAAQ;MAAE,EACF;IAAA,EACH,EAGfpB,IAAI,iBACJ,sBAAC,0BAAiB;MAAC,IAAI,EAAEU,KAAK,IAAI2D,aAAM,CAACC,OAAQ;MAAA,WAC9CrE,QAAQ,eACT;QAAA,UAAOD;MAAI,EAAQ;IAAA,EACD;EAAA,EAGZ;AAEhB,CAAC,CACF;AACF;EA9PCG,MAAM;EACNC,QAAQ;EAERC,QAAQ;EACRC,QAAQ;EACRC,aAAa;EACbC,gBAAgB;EAGhBR,IAAI;EACJC,QAAQ;EAERpB,IAAI,4BAAG,aAAa,EAAG,aAAa;EACpC8B,KAAK;EACLE,QAAQ;EACRG,uBAAuB,4BAAG,KAAK,EAAG,QAAQ;AAAA;AAAA,eAiP7BpB,WAAW;AAAA"}
1	+ {"version":3,"file":"NumberField.cjs","names":["Container","styled","div","PrefixContainer","props","size","Size","Small","disabled","COLORS","neutral_300","neutral_500","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","OperatorWrapper","Medium","neutral_200","NumberInput","input","neutral_400","fieldSize","black","type","hasPrefix","Italic","primary_800","focusStyles","primary_700","neutral_100","correct_400","critical_400","InputContainer","Z_INDEXES","focus","TooltipTrigger","LeftOperator","RightOperator","NumberField","React","forwardRef","ref","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","readOnly","state","value","placeholder","onChange","className","id","dataTestId","rest","useState","toString","userInput","setUserInput","elementRef","useFocusVisibleRef","useEffect","useImperativeHandle","current","setVal","e","handleKeyPress","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","undefined","negativeAndDecimalRegex","val","target","length","charAt","test","isInRange","replace","indexOf","lastIndexOf","includes","isDecimal","x","parseFloat","toFixed","parseInt","isNaN","Math","round","pow","isLocked","operator","operatorState","renderNumberFieldElements","renderNumberInputElements","concat","States","Default"],"sources":["../../src/InputFields/NumberField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport styled from 'styled-components';\r\nimport {IconButton} from '../Button';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, focusStyles, Z_INDEXES} from '../styles';\r\nimport {\r\n ComponentMStyling,\r\n ComponentSStyling,\r\n ComponentTextStyle,\r\n ComponentXSStyling,\r\n ComponentXXSStyling\r\n} from '../styles/typography';\r\nimport {Size, States, Testable} from '../types';\r\nimport {ValidationMessage} from \"./styling\";\r\n\r\nconst Container = styled.div``;\r\n\r\nconst PrefixContainer = styled.div<{ size: Size, disabled: boolean }>`\r\n width: ${props => props.size === Size.Small ? '10px' : '11px'};\r\n height: ${props => props.size === Size.Small ? '20px' : '24px'};\r\n color: ${props => props.disabled ? COLORS.neutral_300 : COLORS.neutral_500};\r\n ${props => props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, null) : ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n position: absolute;\r\n padding: ${props => props.size === Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px'};\r\n`;\r\n\r\nconst OperatorWrapper = styled.div<{ size: Size }>`\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n display: flex;\r\n margin: ${props => props.size === Size.Medium ? '4px 0' : ''};\r\n\r\n svg {\r\n height: 14px;\r\n width: 14px;\r\n }\r\n\r\n .divider {\r\n margin: 16px 0;\r\n background: ${COLORS.neutral_200};\r\n width: 1px;\r\n }\r\n`;\r\n\r\nconst NumberInput = styled.input<{ fieldSize: Size, hasPrefix: boolean, type: string }>`\r\n width: 100%;\r\n border: none;\r\n border-radius: 4px;\r\n text-overflow: ellipsis;\r\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\r\n outline: none;\r\n color: ${COLORS.neutral_500};\r\n\r\n ${props => props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.black) : ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n ${props => props.type === 'NumberField' ? `\r\n padding: ${props.fieldSize === Size.Small ? '14px 97px 14px 16px' : '16px 97px 16px 16px'};\r\n padding-left: ${props.hasPrefix ? '30px' : ''};\r\n ` : ''}\r\n ${props => props.type === 'NumberInput' ? `\r\n padding: ${props.fieldSize === Size.Small ? '14px 48px' : '16px 48px'};\r\n ` : ''}\r\n &::placeholder {\r\n ${props => props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Italic, null) : ComponentMStyling(ComponentTextStyle.Italic, null)}\r\n }\r\n\r\n &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\r\n box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n }\r\n\r\n &.focus-visible {\r\n ${focusStyles}\r\n }\r\n\r\n &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\r\n box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\r\n }\r\n\r\n &.disabled {\r\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\r\n cursor: not-allowed;\r\n color: ${COLORS.neutral_300};\r\n pointer-events: none;\r\n\r\n &::placeholder {\r\n color: ${COLORS.neutral_300};\r\n }\r\n }\r\n\r\n &.readOnly {\r\n background: ${COLORS.neutral_100};\r\n box-shadow: inset 0 0 0 1px ${COLORS.neutral_300};\r\n cursor: not-allowed;\r\n background: ${COLORS.neutral_100};\r\n pointer-events: none;\r\n color: ${COLORS.neutral_500};\r\n }\r\n\r\n &.valid {\r\n box-shadow: inset 0 0 0 2px ${COLORS.correct_400};\r\n }\r\n\r\n &.invalid {\r\n box-shadow: inset 0 0 0 2px ${COLORS.critical_400};\r\n }\r\n`;\r\n\r\nconst InputContainer = styled.div<{ size: Size, type: string }>`\r\n min-width: ${props => props.type === 'NumberField' ? '160px' : '144px'};\r\n height: ${props => props.size === Size.Small ? '48px' : '56px'};\r\n display: flex;\r\n position: relative;\r\n margin-bottom: 4px;\r\n\r\n input.focus-visible ~ div.operator {\r\n z-index: ${Z_INDEXES.focus};\r\n }\r\n\r\n ${TooltipTrigger()}\r\n`;\r\n\r\nconst LeftOperator = styled.div<{ size: Size }>`\r\n position: absolute;\r\n top: ${props => props.size === Size.Small ? '0' : '4px'};\r\n left: 0;\r\n`;\r\n\r\nconst RightOperator = styled.div<{ size: Size }>`\r\n position: absolute;\r\n top: ${props => props.size === Size.Small ? '0' : '4px'};\r\n right: 0;\r\n`;\r\n\r\nexport type NumberFieldProps =\r\n Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' \| 'onKeyDown' \| 'onClick' \| 'tabIndex' \| 'size' \| 'value' \| 'prefix' \| 'min' \| 'max'>\r\n & {\r\n size?: Size.Small \| Size.Medium;\r\n prefix?: string;\r\n interval?: number;\r\n\r\n minValue?: number;\r\n maxValue?: number;\r\n allowNegative?: boolean;\r\n decimalPrecision?: number;\r\n\r\n state?: States.Valid \| States.Invalid;\r\n note?: string;\r\n noteIcon?: React.ReactNode;\r\n\r\n type?: 'NumberField' \| 'NumberInput';\r\n value?: number;\r\n onChange?: (e: number) => void;\r\n}\r\n\r\nconst NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>((props, ref) => {\r\n const {\r\n type = 'NumberField',\r\n size = Size.Medium,\r\n note,\r\n noteIcon,\r\n required,\r\n prefix,\r\n interval = 1,\r\n minValue,\r\n maxValue,\r\n allowNegative,\r\n decimalPrecision,\r\n disabled,\r\n readOnly,\r\n state,\r\n value,\r\n placeholder,\r\n onChange,\r\n className,\r\n id,\r\n dataTestId,\r\n ...rest\r\n } = props;\r\n\r\n const [userInput, setUserInput] = React.useState(value ? value.toString() : '');\r\n\r\n const elementRef = useFocusVisibleRef();\r\n\r\n React.useEffect(() => setUserInput(`${value ?? ''}`), [value]);\r\n\r\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n const setVal = (e: string) => {\r\n setUserInput(e);\r\n onChange && onChange(+e);\r\n }\r\n\r\n const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n switch (e.key) {\r\n case 'ArrowUp':\r\n addInterval();\r\n break;\r\n case 'ArrowDown':\r\n subtractInterval();\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n e.preventDefault();\r\n let simpleRegex = new RegExp(/^[0-9]\\d$/);\r\n let decimalFormationRegEx = new RegExp(/^[0-9]\\d\\.$/);\r\n let negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\\d\\.$/);\r\n\r\n let allowNegativeRegex = new RegExp(/^[-][0-9]\\d$/);\r\n let decimalPrecisionRegex = decimalPrecision ? new RegExp(`^[0-9]\\\\d\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\r\n let negativeAndDecimalRegex = (decimalPrecision && allowNegative) ? new RegExp(`^[-][0-9]\\\\d\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\r\n\r\n let val = e.target.value;\r\n if (val !== '') {\r\n if (allowNegative && decimalPrecision) {\r\n if (val.length === 1 && val.charAt(0) === '-')\r\n setVal(val);\r\n else {\r\n if ((negativeAndDecimalRegex!.test(val) \|\| decimalPrecisionRegex!.test(val)) && isInRange(val, true))\r\n setVal(val);\r\n\r\n else if ((negativeDecimalFormationRegEx.test(val) \|\| decimalFormationRegEx.test(val)) && isInRange(val.replace('.', ''), true))\r\n setVal(val);\r\n\r\n else if ((allowNegativeRegex.test(val) \|\| simpleRegex.test(val)) && isInRange(val, true))\r\n setVal(val);\r\n }\r\n } else if (allowNegative) {\r\n if (val.length === 1 && val.charAt(0) === '-')\r\n setVal(val);\r\n else if ((allowNegativeRegex.test(val) \|\| simpleRegex.test(val)) && isInRange(val, false))\r\n setVal(val);\r\n } else if (decimalPrecision && (val.indexOf('.') === val.lastIndexOf('.')) && isInRange(val, true)) {\r\n if (decimalPrecisionRegex!.test(val))\r\n setVal(val);\r\n else if (decimalFormationRegEx.test(val))\r\n setVal(val);\r\n else if (!val.includes('.') && simpleRegex.test(val))\r\n setVal(val);\r\n } else if (simpleRegex.test(val) && isInRange(val, false)) {\r\n setVal(val);\r\n }\r\n }\r\n\r\n if (val === '')\r\n setVal('');\r\n }\r\n\r\n const isInRange = (value: string, isDecimal: boolean): boolean => {\r\n let x = isDecimal ? parseFloat(value).toFixed(decimalPrecision) : parseInt(value);\r\n if (minValue && minValue > x)\r\n return false;\r\n else if (maxValue && maxValue < x)\r\n return false;\r\n else\r\n return true;\r\n }\r\n\r\n const addInterval = () => {\r\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\r\n val = isNaN(val) && userInput === '' ? (minValue ? minValue - 1 : 0) : val;\r\n if (!isNaN(val)) {\r\n if (decimalPrecision)\r\n val = Math.round((val + interval) * Math.pow(10, decimalPrecision!)) / Math.pow(10, decimalPrecision!);\r\n else\r\n val += 1;\r\n\r\n if (maxValue && maxValue >= val)\r\n setVal(val.toString());\r\n else if (!maxValue)\r\n setVal(val.toString());\r\n }\r\n }\r\n\r\n const subtractInterval = () => {\r\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\r\n val = isNaN(val) && userInput === '' ? (maxValue ? maxValue + 1 : 0) : val;\r\n if (!isNaN(val)) {\r\n if (decimalPrecision)\r\n val = Math.round((val - interval) * Math.pow(10, decimalPrecision!)) / Math.pow(10, decimalPrecision!);\r\n else\r\n val -= 1;\r\n\r\n if ((minValue && minValue <= val) \|\| !minValue) {\r\n if (allowNegative \|\| val >= 0) {\r\n setVal(val.toString());\r\n }\r\n }\r\n }\r\n }\r\n\r\n const isLocked = (input: string, operator: string): boolean => {\r\n let val = decimalPrecision ? parseFloat(input) : parseInt(input);\r\n val = isNaN(val) && userInput === '' ? 0 : val;\r\n let operatorState = false;\r\n if (operator === 'add' && maxValue)\r\n operatorState = val >= maxValue;\r\n\r\n if (operator === 'subtract' && minValue)\r\n operatorState = val <= minValue;\r\n\r\n if (operator === 'subtract' && !minValue && !allowNegative)\r\n operatorState = val <= 0;\r\n\r\n return operatorState;\r\n }\r\n\r\n const renderNumberFieldElements = () => {\r\n return (\r\n <>\r\n {prefix && <PrefixContainer size={size} disabled={!!disabled} className=\"operator\">\r\n {prefix}\r\n </PrefixContainer>}\r\n\r\n <OperatorWrapper data-testid={'operators'} size={size} className=\"operator\">\r\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => subtractInterval()}\r\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'subtract')}>\r\n <SystemIcons.Minus size=\"14px\"/>\r\n </IconButton>\r\n <div className=\"divider\"></div>\r\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => addInterval()}\r\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'add')}>\r\n <SystemIcons.Plus size=\"14px\"/>\r\n </IconButton>\r\n </OperatorWrapper>\r\n </>)\r\n }\r\n\r\n const renderNumberInputElements = () => {\r\n return (\r\n <>\r\n <LeftOperator data-testid={'leftOperator'} size={size} className=\"operator\">\r\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => subtractInterval()}\r\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'subtract')}>\r\n <SystemIcons.Minus size=\"14px\"/>\r\n </IconButton>\r\n </LeftOperator>\r\n <RightOperator data-testid={'rightOperator'} size={size} className=\"operator\">\r\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => addInterval()}\r\n useTransparentBackground disabled={disabled \|\| readOnly \|\| isLocked(userInput, 'add')}>\r\n <SystemIcons.Plus size=\"14px\"/>\r\n </IconButton>\r\n </RightOperator>\r\n </>)\r\n }\r\n\r\n return (\r\n <Container>\r\n <InputContainer type={type} size={size} tabIndex={-1}>\r\n <NumberInput type={type}\r\n id={id}\r\n data-testid={dataTestId}\r\n fieldSize={size}\r\n hasPrefix={!!prefix}\r\n placeholder={placeholder ? placeholder : 'Enter number'}\r\n value={userInput}\r\n ref={elementRef}\r\n tabIndex={(disabled \|\| readOnly) ? -1 : 0}\r\n onChange={e => handleInput(e)}\r\n onKeyDown={e => handleKeyPress(e)}\r\n required={required}\r\n className={disabled ? ' disabled' : ''\r\n .concat(readOnly ? ' readOnly' : '')\r\n .concat(state ? ` ${state}` : '')\r\n .concat(className ? ` ${className}` : '')}\r\n {...rest}/>\r\n\r\n {type === 'NumberField' && renderNumberFieldElements()}\r\n {type === 'NumberInput' && renderNumberInputElements()}\r\n {!!value && <TooltipOverflow input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end' position='bottom'>\r\n {value?.toString()}\r\n </TooltipOverflow>}\r\n </InputContainer>\r\n\r\n {\r\n note &&\r\n <ValidationMessage type={state \|\| States.Default}>\r\n {noteIcon}\r\n <span>{note}</span>\r\n </ValidationMessage>\r\n }\r\n\r\n </Container>\r\n );\r\n }\r\n )\r\n;\r\n\r\nexport default NumberField;\r\n"],"mappings":"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"}

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

@@ -14,7 +14,6 @@ export type NumberFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInp
     type?: 'NumberField' | 'NumberInput';
     value?: number;
     onChange?: (e: number) => void;
-    overflowTooltipPosition?: 'top' | 'bottom';
 };
 declare const NumberField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "tabIndex" | "prefix" | "onChange" | "onKeyDown" | "onClick" | "size" | "max" | "min" | "value"> & {
     size?: Size.Small | Size.Medium | undefined;
@@ -30,6 +29,5 @@ declare const NumberField: React.ForwardRefExoticComponent<Testable & Omit<React
     type?: "NumberField" | "NumberInput" | undefined;
     value?: number | undefined;
     onChange?: ((e: number) => void) | undefined;
-    overflowTooltipPosition?: "top" | "bottom" | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
 export default NumberField;

package/dist/InputFields/NumberField.js CHANGED Viewed

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _excluded = ["type", "size", "note", "noteIcon", "required", "prefix", "interval", "minValue", "maxValue", "allowNegative", "decimalPrecision", "disabled", "readOnly", "state", "value", "placeholder", "onChange", "className", "id", "overflowTooltipPosition", "dataTestId"];
+var _excluded = ["type", "size", "note", "noteIcon", "required", "prefix", "interval", "minValue", "maxValue", "allowNegative", "decimalPrecision", "disabled", "readOnly", "state", "value", "placeholder", "onChange", "className", "id", "dataTestId"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -49,7 +49,7 @@ var InputContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedT
   return props.type === 'NumberField' ? '160px' : '144px';
 }, function (props) {
   return props.size === Size.Small ? '48px' : '56px';
-}, Z_INDEXES.focus, TooltipTrigger('hover'));
+}, Z_INDEXES.focus, TooltipTrigger());
 var LeftOperator = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", ";\n  left: 0;\n"])), function (props) {
   return props.size === Size.Small ? '0' : '4px';
 });
@@ -79,7 +79,6 @@ var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onChange = props.onChange,
     className = props.className,
     id = props.id,
-    overflowTooltipPosition = props.overflowTooltipPosition,
     dataTestId = props.dataTestId,
     rest = _objectWithoutProperties(props, _excluded);
   var _React$useState = React.useState(value ? value.toString() : ''),
@@ -269,13 +268,13 @@ var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
         },
         required: required,
         className: disabled ? ' disabled' : ''.concat(readOnly ? ' readOnly' : '').concat(state ? " ".concat(state) : '').concat(className ? " ".concat(className) : '')
-      }, rest)), type === 'NumberField' && renderNumberFieldElements(), type === 'NumberInput' && renderNumberInputElements(), value && /*#__PURE__*/_jsx(TooltipOverflow, {
-        position: overflowTooltipPosition,
+      }, rest)), type === 'NumberField' && renderNumberFieldElements(), type === 'NumberInput' && renderNumberInputElements(), !!value && /*#__PURE__*/_jsx(TooltipOverflow, {
         input: elementRef,
         withArrow: true,
         maxWidth: "100%",
         size: size,
         align: "end",
+        position: "bottom",
         children: value === null || value === void 0 ? void 0 : value.toString()
       })]
     }), note && /*#__PURE__*/_jsxs(ValidationMessage, {
@@ -297,8 +296,7 @@ NumberField.propTypes = {
   noteIcon: _pt.node,
   type: _pt.oneOf(['NumberField', 'NumberInput']),
   value: _pt.number,
-  onChange: _pt.func,
-  overflowTooltipPosition: _pt.oneOf(['top', 'bottom'])
+  onChange: _pt.func
 };
 export default NumberField;
 //# sourceMappingURL=NumberField.js.map