@laerdal/life-react-components 2.2.1-dev.2.full → 2.2.1-dev.21

package/dist/InputFields/NumberField.cjs.map

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

package/dist/InputFields/NumberField.js

@@ -8,6 +8,8 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 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; }
 import * as React from 'react';
+import { TooltipTrigger } from '../Tooltips/TooltipStyles';
+import TooltipOverflow from '../Tooltips/TooltipOverflow';
 import styled from 'styled-components';
 import { IconButton } from '../Button';
 import { useFocusVisibleRef } from '../common';
@@ -15,9 +17,9 @@ import { SystemIcons } from '../icons';
 import { COLORS, focusStyles, Z_INDEXES } from '../styles';
 import { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling, ComponentXSStyling } from '../styles/typography';
 import { Size } from '../types';
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
 var PrefixContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  ", "\n  position: absolute;\n  padding: ", ";\n"])), function (props) {
   return props.size === Size.Small ? '10px' : '11px';
@@ -33,7 +35,7 @@ var PrefixContainer = styled.div(_templateObject2 || (_templateObject2 = _tagged
 var OperatorWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  display: flex;\n  margin: ", ";\n\n  svg {\n    height: 14px;\n    width: 14px;\n  }\n\n  .divider {\n    margin: 16px 0;\n    background: ", ";\n    width: 1px;\n  }\n"])), function (props) {
   return props.size === Size.Medium ? '4px 0' : '';
 }, COLORS.neutral_200);
-var NumberInput = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  border: none;\n  border-radius: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  outline: none;\n  color: ", ";\n\n  ", "\n  ", "\n  ", "\n  &::placeholder {\n    ", "\n  }\n\n  &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ", ";\n    cursor: not-allowed;\n    color: ", ";\n    pointer-events: none;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &.readOnly {\n    background: ", ";\n    box-shadow: inset 0 0 0 1px ", ";\n    cursor: not-allowed;\n    background: ", ";\n    pointer-events: none;\n    color: ", ";\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), COLORS.neutral_400, COLORS.neutral_500, function (props) {
+var NumberInput = styled.input(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  border: none;\n  border-radius: 4px;\n  text-overflow: ellipsis;\n  box-shadow: inset 0 0 0 1px ", ";\n  outline: none;\n  color: ", ";\n\n  ", "\n  ", "\n  ", "\n  &::placeholder {\n    ", "\n  }\n\n  &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    box-shadow: inset 0 0 0 1px ", ";\n    cursor: not-allowed;\n    color: ", ";\n    pointer-events: none;\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n\n  &.readOnly {\n    background: ", ";\n    box-shadow: inset 0 0 0 1px ", ";\n    cursor: not-allowed;\n    background: ", ";\n    pointer-events: none;\n    color: ", ";\n  }\n\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n"])), COLORS.neutral_400, COLORS.neutral_500, function (props) {
   return props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.black) : ComponentMStyling(ComponentTextStyle.Regular, COLORS.black);
 }, function (props) {
   return props.type === 'NumberField' ? "\n        padding: ".concat(props.fieldSize === Size.Small ? '14px 97px 14px 16px' : '16px 97px 16px 16px', ";\n        padding-left: ").concat(props.hasPrefix ? '30px' : '', ";\n    ") : '';
@@ -47,11 +49,11 @@ var NoteLabel = styled.div(_templateObject5 || (_templateObject5 = _taggedTempla
 });
 var NoteIcon = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  svg {\n    height: 16px;\n  }\n"])));
 var NoteContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-top: 5px;\n\n  &.valid {\n    ", " {\n      color: ", ";\n    }\n\n    ", " {\n      svg path {\n        fill: ", ";\n      }\n    }\n  }\n\n  &.invalid {\n    ", " {\n      color: ", ";\n    }\n\n    ", " {\n      svg path {\n        fill: ", ";\n      }\n    }\n  }\n"])), NoteLabel, COLORS.correct_500, NoteIcon, COLORS.correct_500, NoteLabel, COLORS.critical_500, NoteIcon, COLORS.critical_500);
-var InputContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  min-width: ", ";\n  height: ", ";\n  display: flex;\n  position: relative;\n  margin: 4px 0px;\n\n  input.focus-visible ~ div.operator {\n    z-index: ", ";\n  }\n"])), function (props) {
+var InputContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  min-width: ", ";\n  height: ", ";\n  display: flex;\n  position: relative;\n  margin: 4px 0px;\n\n  input.focus-visible ~ div.operator {\n    z-index: ", ";\n  }\n\n  ", "\n"])), function (props) {
   return props.type === 'NumberField' ? '160px' : '144px';
 }, function (props) {
   return props.size === Size.Small ? '48px' : '56px';
-}, Z_INDEXES.focus);
+}, Z_INDEXES.focus, TooltipTrigger('hover'));
 var LeftOperator = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: ", ";\n  left: 0;\n"])), function (props) {
   return props.size === Size.Small ? '0' : '4px';
 });
@@ -270,7 +272,14 @@ var NumberField = /*#__PURE__*/React.forwardRef(function (props, ref) {
         },
         required: required,
         className: 'numberField'.concat(disabled ? ' disabled' : '').concat(readOnly ? ' readOnly' : '').concat(state ? " ".concat(state) : '').concat(className ? " ".concat(className) : '')
-      }, rest)), type === 'NumberField' && renderNumberFieldElements(), type === 'NumberInput' && renderNumberInputElements()]
+      }, rest)), type === 'NumberField' && renderNumberFieldElements(), type === 'NumberInput' && renderNumberInputElements(), value && /*#__PURE__*/_jsx(TooltipOverflow, {
+        input: elementRef,
+        withArrow: true,
+        maxWidth: "100%",
+        size: size,
+        align: "end",
+        children: value === null || value === void 0 ? void 0 : value.toString()
+      })]
     }), note && /*#__PURE__*/_jsxs(NoteContainer, {
       className: 'noteField'.concat(state ? " ".concat(state) : ''),
       children: [/*#__PURE__*/_jsx(NoteIcon, {

package/dist/InputFields/NumberField.js.map

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

package/dist/InputFields/PasswordField.js

@@ -16,9 +16,9 @@ import { useFocusVisibleRef } from '../common';
 import { IconButton } from '../Button';
 import { SystemIcons } from '../icons';
 import { TechnicalWarning } from '../icons/systemicons/SystemIcons';
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 var StyledPassSwitch = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  z-index: ", ";\n  right: 0;\n  position: absolute;\n"])), Z_INDEXES.badge);
 var PasswordRow = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
 var PasswordField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {

package/dist/InputFields/SearchBar.js

@@ -12,9 +12,9 @@ import SearchField from './components/SearchField';
 import styled from 'styled-components';
 import { DropdownContent } from '../Dropdown';
 import { useClickOutsideRef } from '../common';
-import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 var ClearIconWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n"])));
 var SearchBar = function SearchBar(_ref) {
   var id = _ref.id,

package/dist/InputFields/TextField.cjs

@@ -15,6 +15,7 @@ var _styles = require("../styles");
 var _types = require("../types");
 var _styling = require("./styling");
 var _common = require("../common");
+var _TooltipOverflow = _interopRequireDefault(require("../Tooltips/TooltipOverflow"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "withoutBorder", "state", "size", "margin", "note", "className", "dataTestId"];
 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); }
@@ -79,7 +80,15 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         pattern: pattern,
         maxLength: maxLength,
         withoutBorder: withoutBorder
-      }, rest)), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ValidationMessage, {
+      }, rest)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow.default, {
+        value: value,
+        input: elementRef,
+        withArrow: true,
+        maxWidth: "100%",
+        size: size,
+        align: "end",
+        children: value
+      }), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ValidationMessage, {
         className: size || '',
         type: state !== null && state !== void 0 ? state : _types.States.Invalid,
         children: [state === _types.States.Valid ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.CheckMark, {

package/dist/InputFields/TextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","names":["TextField","React","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","dataTestId","rest","elementRef","useFocusVisibleRef","useImperativeHandle","current","cls","States","Invalid","e","preventDefault","undefined","target","Valid","COLORS","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps =\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n  & {\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin = '4px 0',\n                                      note,\n                                      className,\n                                      dataTestId,\n                                      ...rest\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          data-testId={dataTestId}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={cls}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n          {...rest}\n        />\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400}/> :\n              <TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"mappings":"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"}
+{"version":3,"file":"TextField.cjs","names":["TextField","React","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","dataTestId","rest","elementRef","useFocusVisibleRef","useImperativeHandle","current","cls","States","Invalid","e","preventDefault","undefined","target","Valid","COLORS","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\ntype TextFieldProps =\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n  & {\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin = '4px 0',\n                                      note,\n                                      className,\n                                      dataTestId,\n                                      ...rest\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          data-testId={dataTestId}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={cls}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n          {...rest}\n        />\n        <TooltipOverflow value={value} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\n          {value}\n        </TooltipOverflow>\n\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400}/> :\n              <TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"mappings":"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"}

package/dist/InputFields/TextField.js

@@ -10,9 +10,10 @@ import { COLORS } from '../styles';
 import { States } from '../types';
 import { InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage } from './styling';
 import { useFocusVisibleRef } from '../common';
-import { Fragment as _Fragment } from "react/jsx-runtime";
+import TooltipOverflow from '../Tooltips/TooltipOverflow';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
     disabled = _ref.disabled,
@@ -71,7 +72,15 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         pattern: pattern,
         maxLength: maxLength,
         withoutBorder: withoutBorder
-      }, rest)), validationMessage && /*#__PURE__*/_jsxs(ValidationMessage, {
+      }, rest)), /*#__PURE__*/_jsx(TooltipOverflow, {
+        value: value,
+        input: elementRef,
+        withArrow: true,
+        maxWidth: "100%",
+        size: size,
+        align: "end",
+        children: value
+      }), validationMessage && /*#__PURE__*/_jsxs(ValidationMessage, {
         className: size || '',
         type: state !== null && state !== void 0 ? state : States.Invalid,
         children: [state === States.Valid ? /*#__PURE__*/_jsx(CheckMark, {

package/dist/InputFields/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":["React","CheckMark","TechnicalWarning","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TextField","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","dataTestId","rest","elementRef","useImperativeHandle","current","cls","Invalid","e","preventDefault","undefined","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\n\ntype TextFieldProps =\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n  & {\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin = '4px 0',\n                                      note,\n                                      className,\n                                      dataTestId,\n                                      ...rest\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          data-testId={dataTestId}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={cls}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n          {...rest}\n        />\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400}/> :\n              <TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"mappings":"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"}
+{"version":3,"file":"TextField.js","names":["React","CheckMark","TechnicalWarning","COLORS","States","InputFieldStyling","InputWrapper","NoteMessage","ValidationMessage","useFocusVisibleRef","TooltipOverflow","TextField","forwardRef","ref","id","disabled","readOnly","onChange","value","validationMessage","type","autoComplete","placeholder","required","pattern","maxLength","withoutBorder","state","size","margin","note","className","dataTestId","rest","elementRef","useImperativeHandle","current","cls","Invalid","e","preventDefault","undefined","target","Valid","correct_400","critical_400","icon","message"],"sources":["../../src/InputFields/TextField.tsx"],"sourcesContent":["import * as React from 'react';\nimport {CheckMark, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS} from '../styles';\nimport {Size, States, Testable} from '../types';\nimport {ErrorMessage, InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\nimport {useFocusVisibleRef} from '../common';\nimport {TextFieldNote} from './types';\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\n\ntype TextFieldProps =\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'value' | 'disabled' | 'id'  | 'type' | 'readOnly' | 'autoComplete' | 'pattern' | 'maxLength'>\n  & {\n  id?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  onChange?: (text: string) => void;\n  value?: string;\n  validationMessage?: string;\n  type?: string;\n  state?: States.Invalid | States.Valid;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  pattern?: string;\n  maxLength?: number;\n  withoutBorder?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  note?: TextFieldNote;\n};\n\nconst TextField = React.forwardRef(({\n                                      id,\n                                      disabled,\n                                      readOnly,\n                                      onChange,\n                                      value,\n                                      validationMessage,\n                                      type,\n                                      autoComplete,\n                                      placeholder,\n                                      required,\n                                      pattern,\n                                      maxLength,\n                                      withoutBorder,\n                                      state,\n                                      size,\n                                      margin = '4px 0',\n                                      note,\n                                      className,\n                                      dataTestId,\n                                      ...rest\n                                    }: TextFieldProps, ref) => {\n  const elementRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n  const cls = `${state || (validationMessage ? States.Invalid : '')} ${size || ''}`;\n\n  return (\n    <>\n      <InputWrapper\n        readOnly={readOnly}\n        disabled={disabled}\n        margin={margin}\n        onClick={(e: any) => {\n          if (disabled || readOnly) {\n            e.preventDefault();\n          }\n        }}>\n        <InputFieldStyling\n          id={id}\n          data-testId={dataTestId}\n          ref={elementRef}\n          type={type || 'text'}\n          value={value}\n          className={cls}\n          tabIndex={readOnly || disabled ? -1 : 0}\n          autoComplete={autoComplete}\n          placeholder={disabled ? undefined : placeholder}\n          disabled={disabled}\n          readOnly={readOnly}\n          onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n          activeErrorMessage={!!validationMessage && state !== States.Valid}\n          required={required}\n          pattern={pattern}\n          maxLength={maxLength}\n          withoutBorder={withoutBorder}\n          {...rest}\n        />\n        <TooltipOverflow value={value} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\n          {value}\n        </TooltipOverflow>\n\n        {validationMessage && (\n          <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\n            {state === States.Valid ? <CheckMark color={COLORS.correct_400}/> :\n              <TechnicalWarning color={COLORS.critical_400}/>}\n            <span>{validationMessage}</span>\n          </ValidationMessage>\n        )}\n        {note && !disabled && (\n          <NoteMessage className={size}>\n            {note.icon}\n            <span>{note.message}</span>\n          </NoteMessage>\n        )}\n      </InputWrapper>\n    </>\n  );\n});\n\nexport default TextField;\n"],"mappings":"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"}

package/dist/InputFields/styling.cjs

@@ -7,23 +7,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.activeErrorMessageState = exports.Warning = exports.ValidationStyling = exports.ValidationMessage = exports.StyledIcon = exports.SearchIconWrapper = exports.NoteMessage = exports.InputWrapper = exports.InputFieldStyling = exports.ErrorMessage = exports.AutofilledMessage = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _TooltipStyles = require("../Tooltips/TooltipStyles");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styles = require("../styles");
 var _typography = require("../styles/typography");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var InputWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  ", ";\n  ", "\n  position: relative;\n"])), function (props) {
+var InputWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  ", ";\n  ", "\n  position: relative;\n  \n  ", "\n\n"])), function (props) {
   return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
-});
+}, (0, _TooltipStyles.TooltipTrigger)('hover'));
 exports.InputWrapper = InputWrapper;
 var readOnlyState = (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  box-shadow: inset 0 0 0 1px ", " !important;\n  color: ", " !important;\n  pointer-events: none;\n  outline: none;\n  cursor: not-allowed;\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_600);
 var activeErrorMessageState = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 0 0 0 2px ", ";\n"])), _styles.COLORS.critical_400);
 exports.activeErrorMessageState = activeErrorMessageState;
-var InputFieldStyling = _styledComponents.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ", " !important;\n\n  ", "\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.invalid {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n"])), function (props) {
+var InputFieldStyling = _styledComponents.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n\n  border: 0;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 ", "px 0 16px !important;\n  text-overflow: ellipsis;\n\n  outline: none;\n  position: relative;\n\n  font-size: 16px;\n\n  &::placeholder {\n    ", "\n  }\n\n  ", " {\n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      ", "\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px;\n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px;\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  color: ", " !important;\n\n  ", "\n\n  &:read-only:not(:disabled) {\n    ", "\n  }\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.focus-visible {\n    ", "\n  }\n\n  &.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n  &.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.invalid {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n"])), function (props) {
   return props.withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(_styles.COLORS.neutral_400, ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.neutral_400, ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.neutral_400, ";");
+}, function (props) {
+  var _props$extraRightPadd;
+  return 16 + ((_props$extraRightPadd = props.extraRightPadding) !== null && _props$extraRightPadd !== void 0 ? _props$extraRightPadd : 0);
 }, (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), _styles.COLORS.black, function (props) {
   return props.activeErrorMessage ? activeErrorMessageState : '';
 }, function (props) {