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

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

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

Files changed (100) hide show

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

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

package/dist/InputFields/SearchBar.cjs CHANGED Viewed

@@ -38,19 +38,21 @@ var SearchBar = function SearchBar(_ref) {
     dropdownButtonIcon = _ref.dropdownButtonIcon,
     dropdownButtonLabel = _ref.dropdownButtonLabel,
     dropdownButtonVariant = _ref.dropdownButtonVariant,
+    dropdownButtonLoading = _ref.dropdownButtonLoading,
     dropdownButtonAction = _ref.dropdownButtonAction,
     _ref$searchList = _ref.searchList,
     searchList = _ref$searchList === void 0 ? [] : _ref$searchList,
     addToSearchList = _ref.addToSearchList,
     dropdownScrollable = _ref.dropdownScrollable;
   var containerRef = _react.default.useRef(null);
+  var topLevelRef = _react.default.useRef(null);
   var _React$useState = _react.default.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     isOpen = _React$useState2[0],
     setIsOpen = _React$useState2[1];
   var dropdownRef = (0, _common.useClickOutsideRef)(function () {
     return setIsOpen(false);
-  }, [containerRef]);
+  }, [containerRef, topLevelRef]);
   var isPressingEnter = function isPressingEnter(e) {
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -72,6 +74,7 @@ var SearchBar = function SearchBar(_ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.InputWrapper, {
       disabled: disabled,
       margin: margin,
+      ref: topLevelRef,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SearchField.default, {
         id: 'id',
         size: size,
@@ -141,7 +144,8 @@ var SearchBar = function SearchBar(_ref) {
           actionVariant: dropdownButtonVariant,
           onValueUpdate: function onValueUpdate(e) {},
           scrollable: dropdownScrollable,
-          pinTopItem: true
+          pinTopItem: true,
+          actionLoading: dropdownButtonLoading
         },
         isOpen: isOpen,
         setIsOpen: setIsOpen,
@@ -180,6 +184,7 @@ SearchBar.propTypes = {
   showDropdown: _propTypes.default.bool,
   dropdownButtonIcon: _propTypes.default.node,
   dropdownButtonLabel: _propTypes.default.string,
+  dropdownButtonLoading: _propTypes.default.bool,
   dropdownButtonVariant: _propTypes.default.oneOf(['primary', 'secondary', 'tertiary']),
   dropdownButtonAction: _propTypes.default.func,
   searchList: _propTypes.default.array,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchBar.cjs","names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","useState","isOpen","setIsOpen","dropdownRef","useClickOutsideRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","COLORS","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\r\nimport {COLORS} from '../styles/index';\r\nimport {SystemIcons} from '../icons';\r\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\r\nimport {IconButton} from '../Button';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField from './components/SearchField';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport { DropdownContent, DropdownItem } from '../Dropdown';\r\nimport { useClickOutsideRef } from '../common';\r\n\r\nexport type SearchBarProps = {\r\n id: string;\r\n searchTerm?: string;\r\n setSearchTerm: (term: string) => void;\r\n enterSearch: (e: any) => void;\r\n removeSearch: (e: any) => void;\r\n placeholder?: string;\r\n performSearchLabel?: string;\r\n disabled?: boolean;\r\n validationMessage?: string;\r\n onKeyDown?: (e: React.KeyboardEvent) => void;\r\n size?: Size.Small \| Size.Medium;\r\n margin?: string;\r\n showDropdown?: boolean;\r\n dropdownButtonIcon?: React.ReactNode;\r\n dropdownButtonLabel?: string;\r\n dropdownButtonVariant?: 'primary' \| 'secondary' \| 'tertiary';\r\n dropdownButtonAction?: () => boolean \| void \| undefined;\r\n searchList?: DropdownItem[];\r\n addToSearchList?: (e: DropdownItem) => void;\r\n dropdownScrollable?: boolean;\r\n};\r\n\r\nconst ClearIconWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n\r\n &.hidden {\r\n display: none !important;\r\n }\r\n`;\r\n\r\nconst SearchBar: React.FunctionComponent<SearchBarProps> = ({\r\n id,\r\n searchTerm,\r\n setSearchTerm,\r\n enterSearch,\r\n removeSearch,\r\n placeholder,\r\n performSearchLabel,\r\n disabled,\r\n validationMessage,\r\n onKeyDown,\r\n size,\r\n margin,\r\n showDropdown,\r\n dropdownButtonIcon,\r\n dropdownButtonLabel,\r\n dropdownButtonVariant,\r\n dropdownButtonAction,\r\n searchList=[],\r\n addToSearchList,\r\n dropdownScrollable\r\n }) => {\r\n const containerRef = React.useRef<any>(null);\r\n\r\n const [isOpen, setIsOpen] = React.useState(false);\r\n const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\r\n\r\n const isPressingEnter = (e: any) => {\r\n if (e.key === 'Enter') {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n const enteredSearchTerm = (e: any) => {\r\n addToSearchList && addToSearchList({value:e.target.value});\r\n enterSearch(e);\r\n }\r\n\r\n const dropdownAction = () => {\r\n if(dropdownButtonAction)\r\n dropdownButtonAction(); \r\n }\r\n\r\n return (\r\n <>\r\n <InputWrapper\r\n disabled={disabled}\r\n margin={margin}>\r\n <SearchField id={'id'} size={size}\r\n ref={containerRef}\r\n searchTerm={searchTerm}\r\n disabled={disabled}\r\n validationMessage={validationMessage}>\r\n <SearchBarInput\r\n placeholder={disabled ? '' : placeholder}\r\n id={id}\r\n size={size}\r\n disabled={disabled}\r\n setSearchTerm={(term: string) => setSearchTerm(term)}\r\n searchTerm={searchTerm}\r\n onKeyDown={onKeyDown}\r\n enterSearch={enteredSearchTerm}\r\n focusParentRefs={[containerRef]}\r\n onClick={()=>setIsOpen(!isOpen)}\r\n ref={dropdownRef}\r\n />\r\n <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\r\n <IconButton id={`${id}_Search`}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n action={enterSearch}\r\n disabled={disabled}\r\n onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\r\n <SystemIcons.Search size=\"24px\"/>\r\n </IconButton>\r\n </SearchIconWrapper>\r\n <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\r\n <IconButton id={`${id}_Clear`}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n action={removeSearch}\r\n disabled={disabled}\r\n onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\r\n <SystemIcons.Clear size=\"24px\"/>\r\n </IconButton>\r\n </ClearIconWrapper>\r\n </SearchField>\r\n\r\n {showDropdown && <DropdownContent id={'search'}\r\n containerRef={containerRef}\r\n size={size}\r\n isButton={false}\r\n ariaRolesType=\"input\"\r\n customizationProps={{\r\n items:searchList,\r\n action: dropdownAction,\r\n actionLabel: dropdownButtonLabel,\r\n actionIcon: dropdownButtonIcon,\r\n actionVariant: dropdownButtonVariant,\r\n onValueUpdate:(e)=>{},\r\n scrollable: dropdownScrollable,\r\n pinTopItem: true\r\n }}\r\n isOpen={isOpen}\r\n setIsOpen={setIsOpen}\r\n filter={''}\r\n selectedValues={searchTerm ? [searchTerm] : []}\r\n setSelectedValues={(e)=>setSearchTerm(e[0])}\r\n messageOnNoResults={''}\r\n focused={null}\r\n setFocused={()=>{}}\r\n />}\r\n\r\n </InputWrapper>\r\n {validationMessage && (\r\n <ErrorMessage className={size \|\| ''}>\r\n <SystemIcons.TechnicalWarning color={COLORS.critical_400} className={size \|\| ''}/>\r\n <span>{validationMessage}</span>\r\n </ErrorMessage>\r\n )}\r\n </>\r\n );\r\n};\r\n\r\nexport default SearchBar;\r\n"],"mappings":"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"}
1	+ {"version":3,"file":"SearchBar.cjs","names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonLoading","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","topLevelRef","useState","isOpen","setIsOpen","dropdownRef","useClickOutsideRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","actionLoading","COLORS","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\r\nimport {COLORS} from '../styles/index';\r\nimport {SystemIcons} from '../icons';\r\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\r\nimport {IconButton} from '../Button';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField from './components/SearchField';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport { DropdownContent, DropdownItem } from '../Dropdown';\r\nimport { useClickOutsideRef } from '../common';\r\n\r\nexport type SearchBarProps = {\r\n id: string;\r\n searchTerm?: string;\r\n setSearchTerm: (term: string) => void;\r\n enterSearch: (e: any) => void;\r\n removeSearch: (e: any) => void;\r\n placeholder?: string;\r\n performSearchLabel?: string;\r\n disabled?: boolean;\r\n validationMessage?: string;\r\n onKeyDown?: (e: React.KeyboardEvent) => void;\r\n size?: Size.Small \| Size.Medium;\r\n margin?: string;\r\n showDropdown?: boolean;\r\n dropdownButtonIcon?: React.ReactNode;\r\n dropdownButtonLabel?: string;\r\n dropdownButtonLoading?: boolean;\r\n dropdownButtonVariant?: 'primary' \| 'secondary' \| 'tertiary';\r\n dropdownButtonAction?: () => boolean \| void \| undefined;\r\n searchList?: DropdownItem[];\r\n addToSearchList?: (e: DropdownItem) => void;\r\n dropdownScrollable?: boolean;\r\n};\r\n\r\nconst ClearIconWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n\r\n &.hidden {\r\n display: none !important;\r\n }\r\n`;\r\n\r\nconst SearchBar: React.FunctionComponent<SearchBarProps> = ({\r\n id,\r\n searchTerm,\r\n setSearchTerm,\r\n enterSearch,\r\n removeSearch,\r\n placeholder,\r\n performSearchLabel,\r\n disabled,\r\n validationMessage,\r\n onKeyDown,\r\n size,\r\n margin,\r\n showDropdown,\r\n dropdownButtonIcon,\r\n dropdownButtonLabel,\r\n dropdownButtonVariant,\r\n dropdownButtonLoading,\r\n dropdownButtonAction,\r\n searchList=[],\r\n addToSearchList,\r\n dropdownScrollable\r\n }) => {\r\n const containerRef = React.useRef<any>(null);\r\n const topLevelRef = React.useRef<any>(null);\r\n const [isOpen, setIsOpen] = React.useState(false);\r\n const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef, topLevelRef]);\r\n\r\n const isPressingEnter = (e: any) => {\r\n if (e.key === 'Enter') {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n const enteredSearchTerm = (e: any) => {\r\n addToSearchList && addToSearchList({value:e.target.value});\r\n enterSearch(e);\r\n }\r\n\r\n const dropdownAction = () => {\r\n if(dropdownButtonAction)\r\n dropdownButtonAction(); \r\n }\r\n\r\n return (\r\n <>\r\n <InputWrapper\r\n disabled={disabled}\r\n margin={margin}\r\n ref={topLevelRef}>\r\n <SearchField id={'id'} size={size}\r\n ref={containerRef}\r\n searchTerm={searchTerm}\r\n disabled={disabled}\r\n validationMessage={validationMessage}>\r\n <SearchBarInput\r\n placeholder={disabled ? '' : placeholder}\r\n id={id}\r\n size={size}\r\n disabled={disabled}\r\n setSearchTerm={(term: string) => setSearchTerm(term)}\r\n searchTerm={searchTerm}\r\n onKeyDown={onKeyDown}\r\n enterSearch={enteredSearchTerm}\r\n focusParentRefs={[containerRef]}\r\n onClick={()=>setIsOpen(!isOpen)}\r\n ref={dropdownRef}\r\n />\r\n <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\r\n <IconButton id={`${id}_Search`}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n action={enterSearch}\r\n disabled={disabled}\r\n onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\r\n <SystemIcons.Search size=\"24px\"/>\r\n </IconButton>\r\n </SearchIconWrapper>\r\n <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\r\n <IconButton id={`${id}_Clear`}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n action={removeSearch}\r\n disabled={disabled}\r\n onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\r\n <SystemIcons.Clear size=\"24px\"/>\r\n </IconButton>\r\n </ClearIconWrapper>\r\n </SearchField>\r\n\r\n {showDropdown && <DropdownContent id={'search'}\r\n containerRef={containerRef}\r\n size={size}\r\n isButton={false}\r\n ariaRolesType=\"input\"\r\n customizationProps={{\r\n items:searchList,\r\n action: dropdownAction,\r\n actionLabel: dropdownButtonLabel,\r\n actionIcon: dropdownButtonIcon,\r\n actionVariant: dropdownButtonVariant,\r\n onValueUpdate:(e)=>{},\r\n scrollable: dropdownScrollable,\r\n pinTopItem: true,\r\n actionLoading: dropdownButtonLoading\r\n }}\r\n isOpen={isOpen}\r\n setIsOpen={setIsOpen}\r\n filter={''}\r\n selectedValues={searchTerm ? [searchTerm] : []}\r\n setSelectedValues={(e)=>setSearchTerm(e[0])}\r\n messageOnNoResults={''}\r\n focused={null}\r\n setFocused={()=>{}}\r\n />}\r\n\r\n </InputWrapper>\r\n {validationMessage && (\r\n <ErrorMessage className={size \|\| ''}>\r\n <SystemIcons.TechnicalWarning color={COLORS.critical_400} className={size \|\| ''}/>\r\n <span>{validationMessage}</span>\r\n </ErrorMessage>\r\n )}\r\n </>\r\n );\r\n};\r\n\r\nexport default SearchBar;\r\n"],"mappings":"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"}

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

@@ -17,6 +17,7 @@ export type SearchBarProps = {
     showDropdown?: boolean;
     dropdownButtonIcon?: React.ReactNode;
     dropdownButtonLabel?: string;
+    dropdownButtonLoading?: boolean;
     dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';
     dropdownButtonAction?: () => boolean | void | undefined;
     searchList?: DropdownItem[];

package/dist/InputFields/SearchBar.js CHANGED Viewed

@@ -33,19 +33,21 @@ var SearchBar = function SearchBar(_ref) {
     dropdownButtonIcon = _ref.dropdownButtonIcon,
     dropdownButtonLabel = _ref.dropdownButtonLabel,
     dropdownButtonVariant = _ref.dropdownButtonVariant,
+    dropdownButtonLoading = _ref.dropdownButtonLoading,
     dropdownButtonAction = _ref.dropdownButtonAction,
     _ref$searchList = _ref.searchList,
     searchList = _ref$searchList === void 0 ? [] : _ref$searchList,
     addToSearchList = _ref.addToSearchList,
     dropdownScrollable = _ref.dropdownScrollable;
   var containerRef = React.useRef(null);
+  var topLevelRef = React.useRef(null);
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isOpen = _React$useState2[0],
     setIsOpen = _React$useState2[1];
   var dropdownRef = useClickOutsideRef(function () {
     return setIsOpen(false);
-  }, [containerRef]);
+  }, [containerRef, topLevelRef]);
   var isPressingEnter = function isPressingEnter(e) {
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -67,6 +69,7 @@ var SearchBar = function SearchBar(_ref) {
     children: [/*#__PURE__*/_jsxs(InputWrapper, {
       disabled: disabled,
       margin: margin,
+      ref: topLevelRef,
       children: [/*#__PURE__*/_jsxs(SearchField, {
         id: 'id',
         size: size,
@@ -136,7 +139,8 @@ var SearchBar = function SearchBar(_ref) {
           actionVariant: dropdownButtonVariant,
           onValueUpdate: function onValueUpdate(e) {},
           scrollable: dropdownScrollable,
-          pinTopItem: true
+          pinTopItem: true,
+          actionLoading: dropdownButtonLoading
         },
         isOpen: isOpen,
         setIsOpen: setIsOpen,
@@ -175,6 +179,7 @@ SearchBar.propTypes = {
   showDropdown: _pt.bool,
   dropdownButtonIcon: _pt.node,
   dropdownButtonLabel: _pt.string,
+  dropdownButtonLoading: _pt.bool,
   dropdownButtonVariant: _pt.oneOf(['primary', 'secondary', 'tertiary']),
   dropdownButtonAction: _pt.func,
   searchList: _pt.array,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchBar.js","names":["React","COLORS","SystemIcons","ErrorMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","DropdownContent","useClickOutsideRef","ClearIconWrapper","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","useState","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\r\nimport {COLORS} from '../styles/index';\r\nimport {SystemIcons} from '../icons';\r\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\r\nimport {IconButton} from '../Button';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField from './components/SearchField';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport { DropdownContent, DropdownItem } from '../Dropdown';\r\nimport { useClickOutsideRef } from '../common';\r\n\r\nexport type SearchBarProps = {\r\n id: string;\r\n searchTerm?: string;\r\n setSearchTerm: (term: string) => void;\r\n enterSearch: (e: any) => void;\r\n removeSearch: (e: any) => void;\r\n placeholder?: string;\r\n performSearchLabel?: string;\r\n disabled?: boolean;\r\n validationMessage?: string;\r\n onKeyDown?: (e: React.KeyboardEvent) => void;\r\n size?: Size.Small \| Size.Medium;\r\n margin?: string;\r\n showDropdown?: boolean;\r\n dropdownButtonIcon?: React.ReactNode;\r\n dropdownButtonLabel?: string;\r\n dropdownButtonVariant?: 'primary' \| 'secondary' \| 'tertiary';\r\n dropdownButtonAction?: () => boolean \| void \| undefined;\r\n searchList?: DropdownItem[];\r\n addToSearchList?: (e: DropdownItem) => void;\r\n dropdownScrollable?: boolean;\r\n};\r\n\r\nconst ClearIconWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n\r\n &.hidden {\r\n display: none !important;\r\n }\r\n`;\r\n\r\nconst SearchBar: React.FunctionComponent<SearchBarProps> = ({\r\n id,\r\n searchTerm,\r\n setSearchTerm,\r\n enterSearch,\r\n removeSearch,\r\n placeholder,\r\n performSearchLabel,\r\n disabled,\r\n validationMessage,\r\n onKeyDown,\r\n size,\r\n margin,\r\n showDropdown,\r\n dropdownButtonIcon,\r\n dropdownButtonLabel,\r\n dropdownButtonVariant,\r\n dropdownButtonAction,\r\n searchList=[],\r\n addToSearchList,\r\n dropdownScrollable\r\n }) => {\r\n const containerRef = React.useRef<any>(null);\r\n\r\n const [isOpen, setIsOpen] = React.useState(false);\r\n const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\r\n\r\n const isPressingEnter = (e: any) => {\r\n if (e.key === 'Enter') {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n const enteredSearchTerm = (e: any) => {\r\n addToSearchList && addToSearchList({value:e.target.value});\r\n enterSearch(e);\r\n }\r\n\r\n const dropdownAction = () => {\r\n if(dropdownButtonAction)\r\n dropdownButtonAction(); \r\n }\r\n\r\n return (\r\n <>\r\n <InputWrapper\r\n disabled={disabled}\r\n margin={margin}>\r\n <SearchField id={'id'} size={size}\r\n ref={containerRef}\r\n searchTerm={searchTerm}\r\n disabled={disabled}\r\n validationMessage={validationMessage}>\r\n <SearchBarInput\r\n placeholder={disabled ? '' : placeholder}\r\n id={id}\r\n size={size}\r\n disabled={disabled}\r\n setSearchTerm={(term: string) => setSearchTerm(term)}\r\n searchTerm={searchTerm}\r\n onKeyDown={onKeyDown}\r\n enterSearch={enteredSearchTerm}\r\n focusParentRefs={[containerRef]}\r\n onClick={()=>setIsOpen(!isOpen)}\r\n ref={dropdownRef}\r\n />\r\n <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\r\n <IconButton id={`${id}_Search`}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n action={enterSearch}\r\n disabled={disabled}\r\n onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\r\n <SystemIcons.Search size=\"24px\"/>\r\n </IconButton>\r\n </SearchIconWrapper>\r\n <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\r\n <IconButton id={`${id}_Clear`}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n action={removeSearch}\r\n disabled={disabled}\r\n onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\r\n <SystemIcons.Clear size=\"24px\"/>\r\n </IconButton>\r\n </ClearIconWrapper>\r\n </SearchField>\r\n\r\n {showDropdown && <DropdownContent id={'search'}\r\n containerRef={containerRef}\r\n size={size}\r\n isButton={false}\r\n ariaRolesType=\"input\"\r\n customizationProps={{\r\n items:searchList,\r\n action: dropdownAction,\r\n actionLabel: dropdownButtonLabel,\r\n actionIcon: dropdownButtonIcon,\r\n actionVariant: dropdownButtonVariant,\r\n onValueUpdate:(e)=>{},\r\n scrollable: dropdownScrollable,\r\n pinTopItem: true\r\n }}\r\n isOpen={isOpen}\r\n setIsOpen={setIsOpen}\r\n filter={''}\r\n selectedValues={searchTerm ? [searchTerm] : []}\r\n setSelectedValues={(e)=>setSearchTerm(e[0])}\r\n messageOnNoResults={''}\r\n focused={null}\r\n setFocused={()=>{}}\r\n />}\r\n\r\n </InputWrapper>\r\n {validationMessage && (\r\n <ErrorMessage className={size \|\| ''}>\r\n <SystemIcons.TechnicalWarning color={COLORS.critical_400} className={size \|\| ''}/>\r\n <span>{validationMessage}</span>\r\n </ErrorMessage>\r\n )}\r\n </>\r\n );\r\n};\r\n\r\nexport default SearchBar;\r\n"],"mappings":"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"}
1	+ {"version":3,"file":"SearchBar.js","names":["React","COLORS","SystemIcons","ErrorMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","DropdownContent","useClickOutsideRef","ClearIconWrapper","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonLoading","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","topLevelRef","useState","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","actionLoading","critical_400"],"sources":["../../src/InputFields/SearchBar.tsx"],"sourcesContent":["import React from 'react';\r\nimport {COLORS} from '../styles/index';\r\nimport {SystemIcons} from '../icons';\r\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\r\nimport {IconButton} from '../Button';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField from './components/SearchField';\r\nimport {Size} from '../types';\r\nimport styled from 'styled-components';\r\nimport { DropdownContent, DropdownItem } from '../Dropdown';\r\nimport { useClickOutsideRef } from '../common';\r\n\r\nexport type SearchBarProps = {\r\n id: string;\r\n searchTerm?: string;\r\n setSearchTerm: (term: string) => void;\r\n enterSearch: (e: any) => void;\r\n removeSearch: (e: any) => void;\r\n placeholder?: string;\r\n performSearchLabel?: string;\r\n disabled?: boolean;\r\n validationMessage?: string;\r\n onKeyDown?: (e: React.KeyboardEvent) => void;\r\n size?: Size.Small \| Size.Medium;\r\n margin?: string;\r\n showDropdown?: boolean;\r\n dropdownButtonIcon?: React.ReactNode;\r\n dropdownButtonLabel?: string;\r\n dropdownButtonLoading?: boolean;\r\n dropdownButtonVariant?: 'primary' \| 'secondary' \| 'tertiary';\r\n dropdownButtonAction?: () => boolean \| void \| undefined;\r\n searchList?: DropdownItem[];\r\n addToSearchList?: (e: DropdownItem) => void;\r\n dropdownScrollable?: boolean;\r\n};\r\n\r\nconst ClearIconWrapper = styled.div`\r\n display: flex;\r\n align-items: center;\r\n\r\n &.hidden {\r\n display: none !important;\r\n }\r\n`;\r\n\r\nconst SearchBar: React.FunctionComponent<SearchBarProps> = ({\r\n id,\r\n searchTerm,\r\n setSearchTerm,\r\n enterSearch,\r\n removeSearch,\r\n placeholder,\r\n performSearchLabel,\r\n disabled,\r\n validationMessage,\r\n onKeyDown,\r\n size,\r\n margin,\r\n showDropdown,\r\n dropdownButtonIcon,\r\n dropdownButtonLabel,\r\n dropdownButtonVariant,\r\n dropdownButtonLoading,\r\n dropdownButtonAction,\r\n searchList=[],\r\n addToSearchList,\r\n dropdownScrollable\r\n }) => {\r\n const containerRef = React.useRef<any>(null);\r\n const topLevelRef = React.useRef<any>(null);\r\n const [isOpen, setIsOpen] = React.useState(false);\r\n const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef, topLevelRef]);\r\n\r\n const isPressingEnter = (e: any) => {\r\n if (e.key === 'Enter') {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n const enteredSearchTerm = (e: any) => {\r\n addToSearchList && addToSearchList({value:e.target.value});\r\n enterSearch(e);\r\n }\r\n\r\n const dropdownAction = () => {\r\n if(dropdownButtonAction)\r\n dropdownButtonAction(); \r\n }\r\n\r\n return (\r\n <>\r\n <InputWrapper\r\n disabled={disabled}\r\n margin={margin}\r\n ref={topLevelRef}>\r\n <SearchField id={'id'} size={size}\r\n ref={containerRef}\r\n searchTerm={searchTerm}\r\n disabled={disabled}\r\n validationMessage={validationMessage}>\r\n <SearchBarInput\r\n placeholder={disabled ? '' : placeholder}\r\n id={id}\r\n size={size}\r\n disabled={disabled}\r\n setSearchTerm={(term: string) => setSearchTerm(term)}\r\n searchTerm={searchTerm}\r\n onKeyDown={onKeyDown}\r\n enterSearch={enteredSearchTerm}\r\n focusParentRefs={[containerRef]}\r\n onClick={()=>setIsOpen(!isOpen)}\r\n ref={dropdownRef}\r\n />\r\n <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\r\n <IconButton id={`${id}_Search`}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n action={enterSearch}\r\n disabled={disabled}\r\n onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\r\n <SystemIcons.Search size=\"24px\"/>\r\n </IconButton>\r\n </SearchIconWrapper>\r\n <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\r\n <IconButton id={`${id}_Clear`}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n action={removeSearch}\r\n disabled={disabled}\r\n onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\r\n <SystemIcons.Clear size=\"24px\"/>\r\n </IconButton>\r\n </ClearIconWrapper>\r\n </SearchField>\r\n\r\n {showDropdown && <DropdownContent id={'search'}\r\n containerRef={containerRef}\r\n size={size}\r\n isButton={false}\r\n ariaRolesType=\"input\"\r\n customizationProps={{\r\n items:searchList,\r\n action: dropdownAction,\r\n actionLabel: dropdownButtonLabel,\r\n actionIcon: dropdownButtonIcon,\r\n actionVariant: dropdownButtonVariant,\r\n onValueUpdate:(e)=>{},\r\n scrollable: dropdownScrollable,\r\n pinTopItem: true,\r\n actionLoading: dropdownButtonLoading\r\n }}\r\n isOpen={isOpen}\r\n setIsOpen={setIsOpen}\r\n filter={''}\r\n selectedValues={searchTerm ? [searchTerm] : []}\r\n setSelectedValues={(e)=>setSearchTerm(e[0])}\r\n messageOnNoResults={''}\r\n focused={null}\r\n setFocused={()=>{}}\r\n />}\r\n\r\n </InputWrapper>\r\n {validationMessage && (\r\n <ErrorMessage className={size \|\| ''}>\r\n <SystemIcons.TechnicalWarning color={COLORS.critical_400} className={size \|\| ''}/>\r\n <span>{validationMessage}</span>\r\n </ErrorMessage>\r\n )}\r\n </>\r\n );\r\n};\r\n\r\nexport default SearchBar;\r\n"],"mappings":"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"}

package/dist/InputFields/TextField.cjs CHANGED Viewed

@@ -17,7 +17,7 @@ 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", "overflowTooltipPosition", "note", "className", "dataTestId"];
+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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -39,7 +39,6 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     state = _ref.state,
     size = _ref.size,
     margin = _ref.margin,
-    overflowTooltipPosition = _ref.overflowTooltipPosition,
     note = _ref.note,
     className = _ref.className,
     dataTestId = _ref.dataTestId,
@@ -82,12 +81,12 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         withoutBorder: withoutBorder
       }, rest)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow.default, {
         value: value,
-        position: overflowTooltipPosition,
         input: elementRef,
         withArrow: true,
         maxWidth: "100%",
         size: size,
         align: "end",
+        position: "bottom",
         children: value
       }), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ValidationMessage, {
         className: size || '',
@@ -122,7 +121,6 @@ TextField.propTypes = {
   pattern: _propTypes.default.string,
   maxLength: _propTypes.default.number,
   withoutBorder: _propTypes.default.bool,
-  overflowTooltipPosition: _propTypes.default.oneOf(['top', 'bottom']),
   margin: _propTypes.default.string
 };
 var _default = TextField;

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

	@@ -1 +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","~~overflowTooltipPosition","~~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';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {Size, States, Testable} from '../types';\r\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {TextFieldNote} from './types';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\n\r\nexport type TextFieldProps =\r\n Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' \| 'onChange' \| 'value' \| 'disabled' \| 'id' \| 'type' \| 'readOnly' \| 'autoComplete' \| 'pattern' \| 'maxLength'>\r\n & {\r\n id?: string;\r\n disabled?: boolean;\r\n readOnly?: boolean;\r\n onChange?: (text: string) => void;\r\n value?: string;\r\n validationMessage?: string;\r\n type?: string;\r\n state?: States.Invalid \| States.Valid;\r\n autoComplete?: string;\r\n placeholder?: string;\r\n required?: boolean;\r\n pattern?: string;\r\n maxLength?: number;\r\n withoutBorder?: boolean;\r\n ~~overflowTooltipPosition?: 'top' \| 'bottom';\r\n~~ size?: Size.Small \| Size.Medium;\r\n margin?: string;\r\n note?: TextFieldNote;\r\n};\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\r\n id,\r\n disabled,\r\n readOnly,\r\n onChange,\r\n value,\r\n validationMessage,\r\n type,\r\n autoComplete,\r\n placeholder,\r\n required,\r\n pattern,\r\n maxLength,\r\n withoutBorder,\r\n state,\r\n size,\r\n margin,\r\n ~~overflowTooltipPosition,\r\n~~ note,\r\n className,\r\n dataTestId,\r\n ...rest\r\n }: TextFieldProps, ref) => {\r\n const elementRef = useFocusVisibleRef();\r\n\r\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n const cls = `${state \|\| (validationMessage ? States.Invalid : '')} ${size \|\| ''}`;\r\n\r\n return (\r\n <>\r\n <InputWrapper\r\n readOnly={readOnly}\r\n disabled={disabled}\r\n margin={margin}\r\n onClick={(e: any) => {\r\n if (disabled \|\| readOnly) {\r\n e.preventDefault();\r\n }\r\n }}>\r\n <InputFieldStyling\r\n id={id}\r\n data-testid={dataTestId}\r\n ref={elementRef}\r\n type={type \|\| 'text'}\r\n value={value}\r\n className={cls}\r\n tabIndex={readOnly \|\| disabled ? -1 : 0}\r\n autoComplete={autoComplete}\r\n placeholder={disabled ? undefined : placeholder}\r\n disabled={disabled}\r\n readOnly={readOnly}\r\n onChange={(e: any) => onChange && onChange(e?.target?.value \|\| '')}\r\n activeErrorMessage={!!validationMessage && state !== States.Valid}\r\n required={required}\r\n pattern={pattern}\r\n maxLength={maxLength}\r\n withoutBorder={withoutBorder}\r\n {...rest}\r\n />\r\n <TooltipOverflow value={value} ~~position={overflowTooltipPosition}~~ input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n {value}\r\n </TooltipOverflow>\r\n\r\n {validationMessage && (\r\n <ValidationMessage className={size \|\| ''} type={state ?? States.Invalid}>\r\n {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.correct_400}/> :\r\n <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>}\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </InputWrapper>\r\n </>\r\n );\r\n});\r\n\r\nexport default TextField;\r\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAEA;AAA0D;AAAA;AAAA;AAAA;AAAA;AAAA;~~AAyB1D~~,IAAMA,SAAS,gBAAGC,KAAK,CAACC,UAAU,CAAmC,~~gBAsBdC~~,GAAG,EAAK;EAAA,~~IArBzBC~~,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,SAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,iBAAiB,QAAjBA,iBAAiB;IACjBC,IAAI,QAAJA,IAAI;IACJC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,aAAa,QAAbA,aAAa;IACbC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,~~uBAAuB,QAAvBA,uBAAuB;IACvBC,~~IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAE3C,IAAMC,UAAU,GAAG,IAAAC,0BAAkB,GAAE;~~EAEvCzB~~,KAAK,~~CAAC0B~~,mBAAmB,~~CAACxB~~,GAAG,EAAE;IAAA,~~OAAMsB~~,UAAU,CAACG,OAAO;EAAA,GAAE,CAACH,UAAU,CAAC,CAAC;EAEtE,IAAMI,GAAG,~~aAAMZ~~,KAAK,KAAKR,iBAAiB,~~GAAGqB~~,aAAM,CAACC,OAAO,GAAG,EAAE,CAAC,~~cAAIb~~,IAAI,IAAI,EAAE,CAAE;EAEjF,oBACE;IAAA,uBACE,sBAAC,qBAAY;MACX,QAAQ,EAAEZ,QAAS;MACnB,QAAQ,EAAED,QAAS;MACnB,MAAM,EAAEc,MAAO;MACf,OAAO,EAAE,~~iBAACa~~,CAAM,EAAK;QACnB,~~IAAI3B~~,QAAQ,IAAIC,QAAQ,EAAE;~~UACxB0B~~,CAAC,CAACC,cAAc,EAAE;QACpB;MACF,CAAE;MAAA,wBACF,qBAAC,0BAAiB;QAChB,EAAE,~~EAAE7B~~,EAAG;QACP,~~eAAamB~~,UAAW;QACxB,GAAG,EAAEE,UAAW;QAChB,IAAI,~~EAAEf~~,IAAI,IAAI,MAAO;QACrB,KAAK,EAAEF,KAAM;QACb,SAAS,~~EAAEqB~~,GAAI;QACf,QAAQ,~~EAAEvB~~,QAAQ,IAAID,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;QACxC,YAAY,EAAEM,YAAa;QAC3B,WAAW,EAAEN,QAAQ,~~GAAG6B~~,SAAS,~~GAAGtB~~,WAAY;QAChD,QAAQ,EAAEP,QAAS;QACnB,QAAQ,EAAEC,QAAS;QACnB,QAAQ,EAAE,~~kBAAC0B~~,CAAM;UAAA;UAAA,~~OAAKzB~~,SAAQ,IAAIA,SAAQ,CAAC,~~CAAAyB~~,CAAC,aAADA,CAAC,oCAADA,CAAC,CAAEG,MAAM,8CAAT,~~UAAW3B~~,KAAK,KAAI,EAAE,CAAC;QAAA,CAAC;QACnE,kBAAkB,EAAE,CAAC,CAACC,iBAAiB,IAAIQ,KAAK,~~KAAKa~~,aAAM,CAACM,KAAM;QAClE,QAAQ,~~EAAEvB~~,QAAS;QACnB,OAAO,EAAEC,OAAQ;QACjB,SAAS,EAAEC,SAAU;QACrB,aAAa,EAAEC;MAAc,~~GACzBQ~~,IAAI,EACR,eACF,qBAAC,wBAAe;QAAC,KAAK,~~EAAEhB~~,KAAM;QAAC,~~QAAQ,EAAEY,uBAAwB;QAAC,~~KAAK,~~EAAEK~~,UAAW;QAAC,SAAS,EAAE,IAAK;QAAC,QAAQ,EAAC,MAAM;QAAC,IAAI,~~EAAEP~~,IAAK;QAAC,KAAK,EAAC,KAAK;QAAA,~~UAC1IV~~;MAAK,EACU,EAEjBC,iBAAiB,iBAChB,sBAAC,0BAAiB;QAAC,SAAS,EAAES,IAAI,IAAI,EAAG;QAAC,IAAI,EAAED,KAAK,aAALA,KAAK,cAALA,KAAK,~~GAAIa~~,aAAM,CAACC,OAAQ;QAAA,~~WACrEd~~,KAAK,~~KAAKa~~,aAAM,CAACM,KAAK,gBAAG,qBAAC,kBAAW,CAAC,SAAS;UAAC,KAAK,EAAEC,cAAM,CAACC;QAAY,EAAE,gBAC3E,qBAAC,kBAAW,CAAC,gBAAgB;UAAC,KAAK,EAAED,cAAM,CAACE;QAAa,EAAE,eAC7D;UAAA,~~UAAO9B~~;QAAiB,EAAQ;MAAA,EAEnC,~~EACAY~~,IAAI,IAAI,~~CAAChB~~,QAAQ,iBAChB,sBAAC,oBAAW;QAAC,SAAS,EAAEa,IAAK;QAAA,~~WAC1BG~~,IAAI,CAACmB,IAAI,eACV;UAAA,UAAOnB,IAAI,CAACoB;QAAO,EAAQ;MAAA,EAE9B;IAAA;EACY,EACd;AAEP,CAAC,CAAC;AAAC;~~EApGDrC~~,EAAE;EACFC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,iBAAiB;EACjBC,IAAI;EAEJC,YAAY;EACZC,WAAW;EACXC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,aAAa;~~EACbI~~,~~uBAAuB,4BAAG,KAAK,EAAG,QAAQ;EAE1CD,~~MAAM;AAAA;AAAA,~~eAsFOnB~~,SAAS;AAAA"}
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';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {Size, States, Testable} from '../types';\r\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {TextFieldNote} from './types';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\n\r\nexport type TextFieldProps =\r\n Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' \| 'onChange' \| 'value' \| 'disabled' \| 'id' \| 'type' \| 'readOnly' \| 'autoComplete' \| 'pattern' \| 'maxLength'>\r\n & {\r\n id?: string;\r\n disabled?: boolean;\r\n readOnly?: boolean;\r\n onChange?: (text: string) => void;\r\n value?: string;\r\n validationMessage?: string;\r\n type?: string;\r\n state?: States.Invalid \| States.Valid;\r\n autoComplete?: string;\r\n placeholder?: string;\r\n required?: boolean;\r\n pattern?: string;\r\n maxLength?: number;\r\n withoutBorder?: boolean;\r\n size?: Size.Small \| Size.Medium;\r\n margin?: string;\r\n note?: TextFieldNote;\r\n};\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\r\n id,\r\n disabled,\r\n readOnly,\r\n onChange,\r\n value,\r\n validationMessage,\r\n type,\r\n autoComplete,\r\n placeholder,\r\n required,\r\n pattern,\r\n maxLength,\r\n withoutBorder,\r\n state,\r\n size,\r\n margin,\r\n note,\r\n className,\r\n dataTestId,\r\n ...rest\r\n }: TextFieldProps, ref) => {\r\n const elementRef = useFocusVisibleRef();\r\n\r\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n const cls = `${state \|\| (validationMessage ? States.Invalid : '')} ${size \|\| ''}`;\r\n\r\n return (\r\n <>\r\n <InputWrapper\r\n readOnly={readOnly}\r\n disabled={disabled}\r\n margin={margin}\r\n onClick={(e: any) => {\r\n if (disabled \|\| readOnly) {\r\n e.preventDefault();\r\n }\r\n }}>\r\n <InputFieldStyling\r\n id={id}\r\n data-testid={dataTestId}\r\n ref={elementRef}\r\n type={type \|\| 'text'}\r\n value={value}\r\n className={cls}\r\n tabIndex={readOnly \|\| disabled ? -1 : 0}\r\n autoComplete={autoComplete}\r\n placeholder={disabled ? undefined : placeholder}\r\n disabled={disabled}\r\n readOnly={readOnly}\r\n onChange={(e: any) => onChange && onChange(e?.target?.value \|\| '')}\r\n activeErrorMessage={!!validationMessage && state !== States.Valid}\r\n required={required}\r\n pattern={pattern}\r\n maxLength={maxLength}\r\n withoutBorder={withoutBorder}\r\n {...rest}\r\n />\r\n <TooltipOverflow value={value} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end' position='bottom'>\r\n {value}\r\n </TooltipOverflow>\r\n\r\n {validationMessage && (\r\n <ValidationMessage className={size \|\| ''} type={state ?? States.Invalid}>\r\n {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.correct_400}/> :\r\n <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>}\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </InputWrapper>\r\n </>\r\n );\r\n});\r\n\r\nexport default TextField;\r\n"],"mappings":"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"}

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

@@ -16,7 +16,6 @@ export type TextFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInput
     pattern?: string;
     maxLength?: number;
     withoutBorder?: boolean;
-    overflowTooltipPosition?: 'top' | 'bottom';
     size?: Size.Small | Size.Medium;
     margin?: string;
     note?: TextFieldNote;
@@ -36,7 +35,6 @@ declare const TextField: React.ForwardRefExoticComponent<Testable & Omit<React.I
     pattern?: string | undefined;
     maxLength?: number | undefined;
     withoutBorder?: boolean | undefined;
-    overflowTooltipPosition?: "top" | "bottom" | undefined;
     size?: Size.Small | Size.Medium | undefined;
     margin?: string | undefined;
     note?: TextFieldNote | undefined;

package/dist/InputFields/TextField.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _pt from "prop-types";
-var _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "withoutBorder", "state", "size", "margin", "overflowTooltipPosition", "note", "className", "dataTestId"];
+var _excluded = ["id", "disabled", "readOnly", "onChange", "value", "validationMessage", "type", "autoComplete", "placeholder", "required", "pattern", "maxLength", "withoutBorder", "state", "size", "margin", "note", "className", "dataTestId"];
 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';
@@ -31,7 +31,6 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     state = _ref.state,
     size = _ref.size,
     margin = _ref.margin,
-    overflowTooltipPosition = _ref.overflowTooltipPosition,
     note = _ref.note,
     className = _ref.className,
     dataTestId = _ref.dataTestId,
@@ -74,12 +73,12 @@ var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         withoutBorder: withoutBorder
       }, rest)), /*#__PURE__*/_jsx(TooltipOverflow, {
         value: value,
-        position: overflowTooltipPosition,
         input: elementRef,
         withArrow: true,
         maxWidth: "100%",
         size: size,
         align: "end",
+        position: "bottom",
         children: value
       }), validationMessage && /*#__PURE__*/_jsxs(ValidationMessage, {
         className: size || '',
@@ -114,7 +113,6 @@ TextField.propTypes = {
   pattern: _pt.string,
   maxLength: _pt.number,
   withoutBorder: _pt.bool,
-  overflowTooltipPosition: _pt.oneOf(['top', 'bottom']),
   margin: _pt.string
 };
 export default TextField;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextField.js","names":["React","SystemIcons","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","~~overflowTooltipPosition","~~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';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {Size, States, Testable} from '../types';\r\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {TextFieldNote} from './types';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\n\r\nexport type TextFieldProps =\r\n Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' \| 'onChange' \| 'value' \| 'disabled' \| 'id' \| 'type' \| 'readOnly' \| 'autoComplete' \| 'pattern' \| 'maxLength'>\r\n & {\r\n id?: string;\r\n disabled?: boolean;\r\n readOnly?: boolean;\r\n onChange?: (text: string) => void;\r\n value?: string;\r\n validationMessage?: string;\r\n type?: string;\r\n state?: States.Invalid \| States.Valid;\r\n autoComplete?: string;\r\n placeholder?: string;\r\n required?: boolean;\r\n pattern?: string;\r\n maxLength?: number;\r\n withoutBorder?: boolean;\r\n ~~overflowTooltipPosition?: 'top' \| 'bottom';\r\n~~ size?: Size.Small \| Size.Medium;\r\n margin?: string;\r\n note?: TextFieldNote;\r\n};\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\r\n id,\r\n disabled,\r\n readOnly,\r\n onChange,\r\n value,\r\n validationMessage,\r\n type,\r\n autoComplete,\r\n placeholder,\r\n required,\r\n pattern,\r\n maxLength,\r\n withoutBorder,\r\n state,\r\n size,\r\n margin,\r\n ~~overflowTooltipPosition,\r\n~~ note,\r\n className,\r\n dataTestId,\r\n ...rest\r\n }: TextFieldProps, ref) => {\r\n const elementRef = useFocusVisibleRef();\r\n\r\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n const cls = `${state \|\| (validationMessage ? States.Invalid : '')} ${size \|\| ''}`;\r\n\r\n return (\r\n <>\r\n <InputWrapper\r\n readOnly={readOnly}\r\n disabled={disabled}\r\n margin={margin}\r\n onClick={(e: any) => {\r\n if (disabled \|\| readOnly) {\r\n e.preventDefault();\r\n }\r\n }}>\r\n <InputFieldStyling\r\n id={id}\r\n data-testid={dataTestId}\r\n ref={elementRef}\r\n type={type \|\| 'text'}\r\n value={value}\r\n className={cls}\r\n tabIndex={readOnly \|\| disabled ? -1 : 0}\r\n autoComplete={autoComplete}\r\n placeholder={disabled ? undefined : placeholder}\r\n disabled={disabled}\r\n readOnly={readOnly}\r\n onChange={(e: any) => onChange && onChange(e?.target?.value \|\| '')}\r\n activeErrorMessage={!!validationMessage && state !== States.Valid}\r\n required={required}\r\n pattern={pattern}\r\n maxLength={maxLength}\r\n withoutBorder={withoutBorder}\r\n {...rest}\r\n />\r\n <TooltipOverflow value={value} ~~position={overflowTooltipPosition}~~ input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n {value}\r\n </TooltipOverflow>\r\n\r\n {validationMessage && (\r\n <ValidationMessage className={size \|\| ''} type={state ?? States.Invalid}>\r\n {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.correct_400}/> :\r\n <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>}\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </InputWrapper>\r\n </>\r\n );\r\n});\r\n\r\nexport default TextField;\r\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAQC,WAAW,QAAO,UAAU;AACpC,SAAQC,MAAM,QAAO,WAAW;AAChC,SAAcC,MAAM,QAAiB,UAAU;AAC/C,SAAQC,iBAAiB,EAAEC,YAAY,EAAEC,WAAW,EAAEC,iBAAiB,QAAO,WAAW;AACzF,SAAQC,kBAAkB,QAAO,WAAW;AAE5C,OAAOC,eAAe,MAAM,6BAA6B;AAAC;AAAA;AAAA;~~AAyB1D~~,IAAMC,SAAS,gBAAGV,KAAK,CAACW,UAAU,CAAmC,~~gBAsBdC~~,GAAG,EAAK;EAAA,~~IArBzBC~~,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,SAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,iBAAiB,QAAjBA,iBAAiB;IACjBC,IAAI,QAAJA,IAAI;IACJC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,aAAa,QAAbA,aAAa;IACbC,KAAK,QAALA,KAAK;IACLC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,~~uBAAuB,QAAvBA,uBAAuB;IACvBC,~~IAAI,QAAJA,IAAI;IACJC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAE3C,IAAMC,UAAU,~~GAAG1B~~,kBAAkB,EAAE;EAEvCR,KAAK,~~CAACmC~~,mBAAmB,~~CAACvB~~,GAAG,EAAE;IAAA,~~OAAMsB~~,UAAU,CAACE,OAAO;EAAA,GAAE,CAACF,UAAU,CAAC,CAAC;EAEtE,IAAMG,GAAG,~~aAAMX~~,KAAK,KAAKR,iBAAiB,GAAGf,MAAM,~~CAACmC~~,OAAO,GAAG,EAAE,CAAC,~~cAAIX~~,IAAI,IAAI,EAAE,CAAE;EAEjF,oBACE;IAAA,uBACE,MAAC,YAAY;MACX,QAAQ,EAAEZ,QAAS;MACnB,QAAQ,EAAED,QAAS;MACnB,MAAM,EAAEc,MAAO;MACf,OAAO,EAAE,~~iBAACW~~,CAAM,EAAK;QACnB,~~IAAIzB~~,QAAQ,IAAIC,QAAQ,EAAE;~~UACxBwB~~,CAAC,CAACC,cAAc,EAAE;QACpB;MACF,CAAE;MAAA,wBACF,KAAC,iBAAiB;QAChB,EAAE,~~EAAE3B~~,EAAG;QACP,~~eAAamB~~,UAAW;QACxB,GAAG,EAAEE,UAAW;QAChB,IAAI,~~EAAEf~~,IAAI,IAAI,MAAO;QACrB,KAAK,EAAEF,KAAM;QACb,SAAS,~~EAAEoB~~,GAAI;QACf,QAAQ,~~EAAEtB~~,QAAQ,IAAID,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;QACxC,YAAY,EAAEM,YAAa;QAC3B,WAAW,EAAEN,QAAQ,~~GAAG2B~~,SAAS,~~GAAGpB~~,WAAY;QAChD,QAAQ,EAAEP,QAAS;QACnB,QAAQ,EAAEC,QAAS;QACnB,QAAQ,EAAE,~~kBAACwB~~,CAAM;UAAA;UAAA,~~OAAKvB~~,SAAQ,IAAIA,SAAQ,CAAC,~~CAAAuB~~,CAAC,aAADA,CAAC,oCAADA,CAAC,CAAEG,MAAM,8CAAT,~~UAAWzB~~,KAAK,KAAI,EAAE,CAAC;QAAA,CAAC;QACnE,kBAAkB,EAAE,CAAC,CAACC,iBAAiB,IAAIQ,KAAK,KAAKvB,MAAM,~~CAACwC~~,KAAM;QAClE,QAAQ,~~EAAErB~~,QAAS;QACnB,OAAO,EAAEC,OAAQ;QACjB,SAAS,EAAEC,SAAU;QACrB,aAAa,EAAEC;MAAc,~~GACzBQ~~,IAAI,EACR,eACF,KAAC,eAAe;QAAC,KAAK,~~EAAEhB~~,KAAM;QAAC,~~QAAQ,EAAEY,uBAAwB;QAAC,~~KAAK,~~EAAEK~~,UAAW;QAAC,SAAS,EAAE,IAAK;QAAC,QAAQ,EAAC,MAAM;QAAC,IAAI,~~EAAEP~~,IAAK;QAAC,KAAK,EAAC,KAAK;QAAA,~~UAC1IV~~;MAAK,EACU,EAEjBC,iBAAiB,iBAChB,MAAC,iBAAiB;QAAC,SAAS,EAAES,IAAI,IAAI,EAAG;QAAC,IAAI,EAAED,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIvB,MAAM,~~CAACmC~~,OAAQ;QAAA,~~WACrEZ~~,KAAK,KAAKvB,MAAM,~~CAACwC~~,KAAK,gBAAG,KAAC,WAAW,CAAC,SAAS;UAAC,KAAK,~~EAAEzC~~,MAAM,~~CAAC0C~~;QAAY,EAAE,gBAC3E,KAAC,WAAW,CAAC,gBAAgB;UAAC,KAAK,~~EAAE1C~~,MAAM,~~CAAC2C~~;QAAa,EAAE,eAC7D;UAAA,~~UAAO3B~~;QAAiB,EAAQ;MAAA,EAEnC,~~EACAY~~,IAAI,IAAI,~~CAAChB~~,QAAQ,iBAChB,MAAC,WAAW;QAAC,SAAS,EAAEa,IAAK;QAAA,~~WAC1BG~~,IAAI,CAACgB,IAAI,eACV;UAAA,UAAOhB,IAAI,CAACiB;QAAO,EAAQ;MAAA,EAE9B;IAAA;EACY,EACd;AAEP,CAAC,CAAC;AAAC;~~EApGDlC~~,EAAE;EACFC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,iBAAiB;EACjBC,IAAI;EAEJC,YAAY;EACZC,WAAW;EACXC,QAAQ;EACRC,OAAO;EACPC,SAAS;EACTC,aAAa;~~EACbI~~,~~uBAAuB,aAAG,KAAK,EAAG,QAAQ;EAE1CD,~~MAAM;AAAA;~~AAsFR~~,eAAelB,SAAS"}
1	+ {"version":3,"file":"TextField.js","names":["React","SystemIcons","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';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS} from '../styles';\r\nimport {Size, States, Testable} from '../types';\r\nimport {InputFieldStyling, InputWrapper, NoteMessage, ValidationMessage} from './styling';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {TextFieldNote} from './types';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\n\r\nexport type TextFieldProps =\r\n Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' \| 'onChange' \| 'value' \| 'disabled' \| 'id' \| 'type' \| 'readOnly' \| 'autoComplete' \| 'pattern' \| 'maxLength'>\r\n & {\r\n id?: string;\r\n disabled?: boolean;\r\n readOnly?: boolean;\r\n onChange?: (text: string) => void;\r\n value?: string;\r\n validationMessage?: string;\r\n type?: string;\r\n state?: States.Invalid \| States.Valid;\r\n autoComplete?: string;\r\n placeholder?: string;\r\n required?: boolean;\r\n pattern?: string;\r\n maxLength?: number;\r\n withoutBorder?: boolean;\r\n size?: Size.Small \| Size.Medium;\r\n margin?: string;\r\n note?: TextFieldNote;\r\n};\r\n\r\nconst TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(({\r\n id,\r\n disabled,\r\n readOnly,\r\n onChange,\r\n value,\r\n validationMessage,\r\n type,\r\n autoComplete,\r\n placeholder,\r\n required,\r\n pattern,\r\n maxLength,\r\n withoutBorder,\r\n state,\r\n size,\r\n margin,\r\n note,\r\n className,\r\n dataTestId,\r\n ...rest\r\n }: TextFieldProps, ref) => {\r\n const elementRef = useFocusVisibleRef();\r\n\r\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n const cls = `${state \|\| (validationMessage ? States.Invalid : '')} ${size \|\| ''}`;\r\n\r\n return (\r\n <>\r\n <InputWrapper\r\n readOnly={readOnly}\r\n disabled={disabled}\r\n margin={margin}\r\n onClick={(e: any) => {\r\n if (disabled \|\| readOnly) {\r\n e.preventDefault();\r\n }\r\n }}>\r\n <InputFieldStyling\r\n id={id}\r\n data-testid={dataTestId}\r\n ref={elementRef}\r\n type={type \|\| 'text'}\r\n value={value}\r\n className={cls}\r\n tabIndex={readOnly \|\| disabled ? -1 : 0}\r\n autoComplete={autoComplete}\r\n placeholder={disabled ? undefined : placeholder}\r\n disabled={disabled}\r\n readOnly={readOnly}\r\n onChange={(e: any) => onChange && onChange(e?.target?.value \|\| '')}\r\n activeErrorMessage={!!validationMessage && state !== States.Valid}\r\n required={required}\r\n pattern={pattern}\r\n maxLength={maxLength}\r\n withoutBorder={withoutBorder}\r\n {...rest}\r\n />\r\n <TooltipOverflow value={value} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end' position='bottom'>\r\n {value}\r\n </TooltipOverflow>\r\n\r\n {validationMessage && (\r\n <ValidationMessage className={size \|\| ''} type={state ?? States.Invalid}>\r\n {state === States.Valid ? <SystemIcons.CheckMark color={COLORS.correct_400}/> :\r\n <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>}\r\n <span>{validationMessage}</span>\r\n </ValidationMessage>\r\n )}\r\n {note && !disabled && (\r\n <NoteMessage className={size}>\r\n {note.icon}\r\n <span>{note.message}</span>\r\n </NoteMessage>\r\n )}\r\n </InputWrapper>\r\n </>\r\n );\r\n});\r\n\r\nexport default TextField;\r\n"],"mappings":"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"}

package/dist/InputFields/styling.cjs CHANGED Viewed

@@ -20,13 +20,13 @@ var InputWrapper = _styledComponents.default.div(_templateObject || (_templateOb
   return props.readOnly || props.disabled ? 'cursor: not-allowed;' : '';
 }, function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
-}, (0, _TooltipStyles.TooltipTrigger)('hover'));
+}, (0, _TooltipStyles.TooltipTrigger)());
 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);
 exports.readOnlyState = readOnlyState;
 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  margin-bottom: 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  overflow: hidden;\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  &: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  margin-bottom: 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  &: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;