@laerdal/life-react-components 2.1.1-dev.4 → 2.1.1-dev.5

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","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} 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  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onKeyDown' | 'onClick' | 'tabIndex' | 'size' | 'value' | 'prefix' | 'min' | 'max'>\n  & {\n  size?: Size.Small | Size.Medium;\n  prefix?: string;\n  interval?: number;\n\n  minValue?: number;\n  maxValue?: number;\n  allowNegative?: boolean;\n  decimalPrecision?: number;\n\n  state?: States.Valid | States.Invalid;\n  note?: string;\n  noteIcon?: React.ReactNode;\n\n  type?: 'NumberField' | 'NumberInput';\n  value?: number;\n  onChange?: (e: number) => void;\n}\n\nconst NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>((props, ref) => {\n      const {\n        type = 'NumberField',\n        size = Size.Medium,\n        note,\n        noteIcon,\n        required,\n        prefix,\n        interval = 1,\n        minValue,\n        maxValue,\n        allowNegative,\n        decimalPrecision,\n        disabled,\n        readOnly,\n        state,\n        value,\n        placeholder,\n        onChange,\n        className,\n        ...rest\n      } = props;\n\n      const [userInput, setUserInput] = React.useState(value ? value.toString() : '');\n\n      const elementRef = useFocusVisibleRef();\n\n      React.useEffect(() => setUserInput(`${value ?? ''}`), [value]);\n\n      React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\n\n      const setVal = (e: string) => {\n        setUserInput(e);\n        onChange && onChange(+e);\n      }\n\n      const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        switch (e.key) {\n          case 'ArrowUp':\n            addInterval();\n            break;\n          case 'ArrowDown':\n            subtractInterval();\n            break;\n          default:\n            break;\n        }\n      }\n\n      const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n        e.preventDefault();\n        let simpleRegex = new RegExp(/^[0-9]\\d*$/);\n        let decimalFormationRegEx = new RegExp(/^[0-9]\\d*\\.$/);\n        let negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\\d*\\.$/);\n\n        let allowNegativeRegex = new RegExp(/^[-][0-9]\\d*$/);\n        let decimalPrecisionRegex = decimalPrecision ? new RegExp(`^[0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\n        let negativeAndDecimalRegex = (decimalPrecision && allowNegative) ? new RegExp(`^[-][0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\n\n        let val = e.target.value;\n        if (val !== '') {\n          if (allowNegative && decimalPrecision) {\n            if (val.length === 1 && val.charAt(0) === '-')\n              setVal(val);\n            else {\n              if ((negativeAndDecimalRegex!.test(val) || decimalPrecisionRegex!.test(val)) && isInRange(val, true))\n                setVal(val);\n\n              else if ((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.', ''), true))\n                setVal(val);\n\n              else if ((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val, true))\n                setVal(val);\n            }\n          } else if (allowNegative) {\n            if (val.length === 1 && val.charAt(0) === '-')\n              setVal(val);\n            else if ((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val, false))\n              setVal(val);\n          } else if (decimalPrecision && (val.indexOf('.') === val.lastIndexOf('.')) && isInRange(val, true)) {\n            if (decimalPrecisionRegex!.test(val))\n              setVal(val);\n            else if (decimalFormationRegEx.test(val))\n              setVal(val);\n            else if (!val.includes('.') && simpleRegex.test(val))\n              setVal(val);\n          } else if (simpleRegex.test(val) && isInRange(val, false)) {\n            setVal(val);\n          }\n        }\n\n        if (val === '')\n          setVal('');\n      }\n\n      const isInRange = (value: string, isDecimal: boolean): boolean => {\n        let x = isDecimal ? parseFloat(value).toFixed(decimalPrecision) : parseInt(value);\n        if (minValue && minValue > x)\n          return false;\n        else if (maxValue && maxValue < x)\n          return false;\n        else\n          return true;\n      }\n\n      const addInterval = () => {\n        let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n        val = isNaN(val) && userInput === '' ? (minValue ? minValue - 1 : 0) : val;\n        if (!isNaN(val)) {\n          if (decimalPrecision)\n            val = Math.round((val + interval) * Math.pow(10, decimalPrecision!)) / Math.pow(10, decimalPrecision!);\n          else\n            val += 1;\n\n          if (maxValue && maxValue >= val)\n            setVal(val.toString());\n          else if (!maxValue)\n            setVal(val.toString());\n        }\n      }\n\n      const subtractInterval = () => {\n        let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n        val = isNaN(val) && userInput === '' ? (maxValue ? maxValue + 1 : 0) : val;\n        if (!isNaN(val)) {\n          if (decimalPrecision)\n            val = Math.round((val - interval) * Math.pow(10, decimalPrecision!)) / Math.pow(10, decimalPrecision!);\n          else\n            val -= 1;\n\n          if ((minValue && minValue <= val) || !minValue) {\n            if (allowNegative || val >= 0) {\n              setVal(val.toString());\n            }\n          }\n        }\n      }\n\n      const isLocked = (input: string, operator: string): boolean => {\n        let val = decimalPrecision ? parseFloat(input) : parseInt(input);\n        val = isNaN(val) && userInput === '' ? 0 : val;\n        let operatorState = false;\n        if (operator === 'add' && maxValue)\n          operatorState = val >= maxValue;\n\n        if (operator === 'subtract' && minValue)\n          operatorState = val <= minValue;\n\n        if (operator === 'subtract' && !minValue && !allowNegative)\n          operatorState = val <= 0;\n\n        return operatorState;\n      }\n\n      const renderNumberFieldElements = () => {\n        return (\n          <>\n            {prefix && <PrefixContainer size={size} disabled={!!disabled} className=\"operator\">\n              {prefix}\n            </PrefixContainer>}\n\n            <OperatorWrapper data-testid={'operators'} size={size} className=\"operator\">\n              <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => subtractInterval()}\n                          useTransparentBackground disabled={disabled || readOnly || isLocked(userInput, 'subtract')}>\n                <SystemIcons.Minus size=\"14px\"/>\n              </IconButton>\n              <div className=\"divider\"></div>\n              <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => addInterval()}\n                          useTransparentBackground disabled={disabled || readOnly || isLocked(userInput, 'add')}>\n                <SystemIcons.Plus size=\"14px\"/>\n              </IconButton>\n            </OperatorWrapper>\n          </>)\n      }\n\n      const renderNumberInputElements = () => {\n        return (\n          <>\n            <LeftOperator data-testid={'leftOperator'} size={size} className=\"operator\">\n              <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => subtractInterval()}\n                          useTransparentBackground disabled={disabled || readOnly || isLocked(userInput, 'subtract')}>\n                <SystemIcons.Minus size=\"14px\"/>\n              </IconButton>\n            </LeftOperator>\n            <RightOperator data-testid={'rightOperator'} size={size} className=\"operator\">\n              <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => addInterval()}\n                          useTransparentBackground disabled={disabled || readOnly || isLocked(userInput, 'add')}>\n                <SystemIcons.Plus size=\"14px\"/>\n              </IconButton>\n            </RightOperator>\n          </>)\n      }\n\n      return (\n        <Container>\n          <InputContainer type={type} size={size} tabIndex={-1}>\n            <NumberInput type={type}\n                         data-testid={'numberInput'}\n                         fieldSize={size}\n                         hasPrefix={!!prefix}\n                         placeholder={placeholder ? placeholder : 'Enter number'}\n                         value={userInput}\n                         ref={elementRef}\n                         tabIndex={(disabled || readOnly) ? -1 : 0}\n                         onChange={e => handleInput(e)}\n                         onKeyDown={e => handleKeyPress(e)}\n                         required={required}\n                         className={'numberField'.concat(disabled ? ' disabled' : '')\n                           .concat(readOnly ? ' readOnly' : '')\n                           .concat(state ? ` ${state}` : '')\n                           .concat(className ? ` ${className}` : '')}\n                         {...rest}/>\n\n            {type === 'NumberField' && renderNumberFieldElements()}\n            {type === 'NumberInput' && renderNumberInputElements()}\n          </InputContainer>\n\n          {note && <NoteContainer className={'noteField'.concat(state ? ` ${state}` : '')}>\n            <NoteIcon>\n              {noteIcon}\n            </NoteIcon>\n            <NoteLabel size={size}>\n              {note}\n            </NoteLabel>\n          </NoteContainer>\n          }\n        </Container>\n      );\n    }\n  )\n;\n\nexport default NumberField;\n"],"mappings":"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"}
+{"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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"}

package/dist/InputFields/PasswordField.cjs

@@ -20,7 +20,7 @@ var _Button = require("../Button");
 var _icons = require("../icons");
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["id", "disabled", "onChange", "invalid", "value", "validationMessage", "autoComplete", "placeholder", "required", "readOnly", "size", "margin", "className", "name"];
+var _excluded = ["id", "disabled", "onChange", "invalid", "value", "validationMessage", "autoComplete", "placeholder", "required", "readOnly", "size", "margin", "className", "dataTestId", "name"];
 var _templateObject, _templateObject2;
 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; }
@@ -42,6 +42,7 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref.size,
     margin = _ref.margin,
     className = _ref.className,
+    dataTestId = _ref.dataTestId,
     _ref$name = _ref.name,
     name = _ref$name === void 0 ? 'password' : _ref$name,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -72,6 +73,7 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(PasswordRow, {
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styling.InputFieldStyling, _objectSpread({
             id: id,
+            "data-testId": dataTestId,
             ref: inputRef,
             type: passwordHidden ? 'password' : 'text',
             name: name,

package/dist/InputFields/PasswordField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.cjs","names":["StyledPassSwitch","styled","div","Z_INDEXES","badge","PasswordRow","PasswordField","React","forwardRef","ref","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","className","name","rest","useState","passwordHidden","setPasswordHidden","inputRef","useFocusVisibleRef","useImperativeHandle","current","handleKeyDown","e","keyCode","cls","display","target","COLORS","critical_400"],"sources":["../../src/InputFields/PasswordField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\nimport { Z_INDEXES } from '../styles';\nimport { useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\ntype PasswordFieldProps =\n  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'id' | 'onChange' | 'readOnly' | 'required' | 'placeholder' | 'autoComplete' | 'value' | 'disabled' | 'tabIndex' | 'type'>\n  & {\n  id: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  invalid?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  z-index: ${Z_INDEXES.badge};\n  right: 0;\n  position: absolute;\n`;\n\nconst PasswordRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst PasswordField = React.forwardRef(({\n                                          id,\n                                          disabled,\n                                          onChange,\n                                          invalid,\n                                          value,\n                                          validationMessage,\n                                          autoComplete,\n                                          placeholder,\n                                          required,\n                                          readOnly,\n                                          size,\n                                          margin,\n                                          className,\n                                          name = 'password',\n                                          ...rest\n                                        }: PasswordFieldProps, ref) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n\n  const cls = `${invalid ? 'invalid' : ''}  ${size || ''} ${className}`;\n\n  return (\n    <>\n      <InputWrapper disabled={disabled} readOnly={readOnly} margin={margin}>\n        <div style={{ display: 'block', margin: '4px 0px'}}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name={name}\n              value={value}\n              className={cls}\n              tabIndex={disabled || readOnly ? -1 : 0}\n              autoComplete={autoComplete}\n              activeErrorMessage={!!validationMessage}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              {...rest}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !readOnly ? (\n                passwordHidden ? (\n                  <IconButton\n                    id={`${id}_Visible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOff />\n                  </IconButton>\n                ) : (\n                  <IconButton\n                    id={`${id}_NotVisible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOn />\n                  </IconButton>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default PasswordField;\n"],"mappings":"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"}
+{"version":3,"file":"PasswordField.cjs","names":["StyledPassSwitch","styled","div","Z_INDEXES","badge","PasswordRow","PasswordField","React","forwardRef","ref","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","className","dataTestId","name","rest","useState","passwordHidden","setPasswordHidden","inputRef","useFocusVisibleRef","useImperativeHandle","current","handleKeyDown","e","keyCode","cls","display","target","COLORS","critical_400"],"sources":["../../src/InputFields/PasswordField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size, Testable } from '../types';\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\nimport { Z_INDEXES } from '../styles';\nimport { useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\ntype PasswordFieldProps =\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'id' | 'onChange' | 'readOnly' | 'required' | 'placeholder' | 'autoComplete' | 'value' | 'disabled' | 'tabIndex' | 'type'>\n  & {\n  id: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  invalid?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  z-index: ${Z_INDEXES.badge};\n  right: 0;\n  position: absolute;\n`;\n\nconst PasswordRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst PasswordField = React.forwardRef(({\n                                          id,\n                                          disabled,\n                                          onChange,\n                                          invalid,\n                                          value,\n                                          validationMessage,\n                                          autoComplete,\n                                          placeholder,\n                                          required,\n                                          readOnly,\n                                          size,\n                                          margin,\n                                          className,\n                                          dataTestId,\n                                          name = 'password',\n                                          ...rest\n                                        }: PasswordFieldProps, ref) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n\n  const cls = `${invalid ? 'invalid' : ''}  ${size || ''} ${className}`;\n\n  return (\n    <>\n      <InputWrapper disabled={disabled} readOnly={readOnly} margin={margin}>\n        <div style={{ display: 'block', margin: '4px 0px'}}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              data-testId={dataTestId}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name={name}\n              value={value}\n              className={cls}\n              tabIndex={disabled || readOnly ? -1 : 0}\n              autoComplete={autoComplete}\n              activeErrorMessage={!!validationMessage}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              {...rest}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !readOnly ? (\n                passwordHidden ? (\n                  <IconButton\n                    id={`${id}_Visible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOff />\n                  </IconButton>\n                ) : (\n                  <IconButton\n                    id={`${id}_NotVisible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOn />\n                  </IconButton>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default PasswordField;\n"],"mappings":"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"}

package/dist/InputFields/PasswordField.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Size } from '../types';
-declare const PasswordField: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "id" | "placeholder" | "tabIndex" | "onChange" | "disabled" | "value" | "autoComplete" | "readOnly" | "required" | "size"> & {
+import { Size, Testable } from '../types';
+declare const PasswordField: React.ForwardRefExoticComponent<Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "id" | "placeholder" | "tabIndex" | "onChange" | "disabled" | "value" | "autoComplete" | "readOnly" | "required" | "size"> & {
     id: string;
     disabled?: boolean | undefined;
     onChange?: ((text: string) => void) | undefined;

package/dist/InputFields/PasswordField.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _excluded = ["id", "disabled", "onChange", "invalid", "value", "validationMessage", "autoComplete", "placeholder", "required", "readOnly", "size", "margin", "className", "name"];
+var _excluded = ["id", "disabled", "onChange", "invalid", "value", "validationMessage", "autoComplete", "placeholder", "required", "readOnly", "size", "margin", "className", "dataTestId", "name"];
 var _templateObject, _templateObject2;
 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; }
@@ -35,6 +35,7 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref.size,
     margin = _ref.margin,
     className = _ref.className,
+    dataTestId = _ref.dataTestId,
     _ref$name = _ref.name,
     name = _ref$name === void 0 ? 'password' : _ref$name,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -65,6 +66,7 @@ var PasswordField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         children: /*#__PURE__*/_jsxs(PasswordRow, {
           children: [/*#__PURE__*/_jsx(InputFieldStyling, _objectSpread({
             id: id,
+            "data-testId": dataTestId,
             ref: inputRef,
             type: passwordHidden ? 'password' : 'text',
             name: name,

package/dist/InputFields/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":["React","styled","COLORS","InputFieldStyling","InputWrapper","ErrorMessage","Z_INDEXES","useFocusVisibleRef","IconButton","SystemIcons","TechnicalWarning","StyledPassSwitch","div","badge","PasswordRow","PasswordField","forwardRef","ref","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","className","name","rest","useState","passwordHidden","setPasswordHidden","inputRef","useImperativeHandle","current","handleKeyDown","e","keyCode","cls","display","target","critical_400"],"sources":["../../src/InputFields/PasswordField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size } from '../types';\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\nimport { Z_INDEXES } from '../styles';\nimport { useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\ntype PasswordFieldProps =\n  Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'id' | 'onChange' | 'readOnly' | 'required' | 'placeholder' | 'autoComplete' | 'value' | 'disabled' | 'tabIndex' | 'type'>\n  & {\n  id: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  invalid?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  z-index: ${Z_INDEXES.badge};\n  right: 0;\n  position: absolute;\n`;\n\nconst PasswordRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst PasswordField = React.forwardRef(({\n                                          id,\n                                          disabled,\n                                          onChange,\n                                          invalid,\n                                          value,\n                                          validationMessage,\n                                          autoComplete,\n                                          placeholder,\n                                          required,\n                                          readOnly,\n                                          size,\n                                          margin,\n                                          className,\n                                          name = 'password',\n                                          ...rest\n                                        }: PasswordFieldProps, ref) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n\n  const cls = `${invalid ? 'invalid' : ''}  ${size || ''} ${className}`;\n\n  return (\n    <>\n      <InputWrapper disabled={disabled} readOnly={readOnly} margin={margin}>\n        <div style={{ display: 'block', margin: '4px 0px'}}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name={name}\n              value={value}\n              className={cls}\n              tabIndex={disabled || readOnly ? -1 : 0}\n              autoComplete={autoComplete}\n              activeErrorMessage={!!validationMessage}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              {...rest}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !readOnly ? (\n                passwordHidden ? (\n                  <IconButton\n                    id={`${id}_Visible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOff />\n                  </IconButton>\n                ) : (\n                  <IconButton\n                    id={`${id}_NotVisible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOn />\n                  </IconButton>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default PasswordField;\n"],"mappings":"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"}
+{"version":3,"file":"PasswordField.js","names":["React","styled","COLORS","InputFieldStyling","InputWrapper","ErrorMessage","Z_INDEXES","useFocusVisibleRef","IconButton","SystemIcons","TechnicalWarning","StyledPassSwitch","div","badge","PasswordRow","PasswordField","forwardRef","ref","id","disabled","onChange","invalid","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","className","dataTestId","name","rest","useState","passwordHidden","setPasswordHidden","inputRef","useImperativeHandle","current","handleKeyDown","e","keyCode","cls","display","target","critical_400"],"sources":["../../src/InputFields/PasswordField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS } from '../styles';\nimport { Size, Testable } from '../types';\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\nimport { Z_INDEXES } from '../styles';\nimport { useFocusVisibleRef } from '../common';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\n\ntype PasswordFieldProps =\n  Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'id' | 'onChange' | 'readOnly' | 'required' | 'placeholder' | 'autoComplete' | 'value' | 'disabled' | 'tabIndex' | 'type'>\n  & {\n  id: string;\n  disabled?: boolean;\n  onChange?: (text: string) => void;\n  invalid?: boolean;\n  value?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  required?: boolean;\n  readOnly?: boolean;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst StyledPassSwitch = styled.div`\n  z-index: ${Z_INDEXES.badge};\n  right: 0;\n  position: absolute;\n`;\n\nconst PasswordRow = styled.div`\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst PasswordField = React.forwardRef(({\n                                          id,\n                                          disabled,\n                                          onChange,\n                                          invalid,\n                                          value,\n                                          validationMessage,\n                                          autoComplete,\n                                          placeholder,\n                                          required,\n                                          readOnly,\n                                          size,\n                                          margin,\n                                          className,\n                                          dataTestId,\n                                          name = 'password',\n                                          ...rest\n                                        }: PasswordFieldProps, ref) => {\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\n  const inputRef = useFocusVisibleRef();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleKeyDown = (e: any) => {\n    if (e.keyCode === 13) {\n      setPasswordHidden(!passwordHidden);\n    }\n  };\n\n  const cls = `${invalid ? 'invalid' : ''}  ${size || ''} ${className}`;\n\n  return (\n    <>\n      <InputWrapper disabled={disabled} readOnly={readOnly} margin={margin}>\n        <div style={{ display: 'block', margin: '4px 0px'}}>\n          <PasswordRow>\n            <InputFieldStyling\n              id={id}\n              data-testId={dataTestId}\n              ref={inputRef}\n              type={passwordHidden ? 'password' : 'text'}\n              name={name}\n              value={value}\n              className={cls}\n              tabIndex={disabled || readOnly ? -1 : 0}\n              autoComplete={autoComplete}\n              activeErrorMessage={!!validationMessage}\n              placeholder={placeholder}\n              disabled={disabled}\n              required={required}\n              readOnly={readOnly}\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\n              {...rest}\n            />\n            <StyledPassSwitch className={size ? size : ''}>\n              {!disabled && !readOnly ? (\n                passwordHidden ? (\n                  <IconButton\n                    id={`${id}_Visible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOff />\n                  </IconButton>\n                ) : (\n                  <IconButton\n                    id={`${id}_NotVisible`}\n                    iconColor={'#666666'}\n                    variant={'secondary'}\n                    shape={'circular'}\n                    onKeyPress={handleKeyDown}\n                    action={() => setPasswordHidden(!passwordHidden)}>\n                    <SystemIcons.VisibleOn />\n                  </IconButton>\n                )\n              ) : null}\n            </StyledPassSwitch>\n          </PasswordRow>\n        </div>\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default PasswordField;\n"],"mappings":";;;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,MAAM,QAAQ,WAAW;AAElC,SAASC,iBAAiB,EAAEC,YAAY,EAAEC,YAAY,QAAQ,WAAW;AACzE,SAASC,SAAS,QAAQ,WAAW;AACrC,SAASC,kBAAkB,QAAQ,WAAW;AAC9C,SAASC,UAAU,QAAQ,WAAW;AACtC,SAASC,WAAW,QAAQ,UAAU;AACtC,SAASC,gBAAgB,QAAQ,kCAAkC;AAAC;AAAA;AAAA;AAmBpE,IAAMC,gBAAgB,GAAGV,MAAM,CAACW,GAAG,8HACtBN,SAAS,CAACO,KAAK,CAG3B;AAED,IAAMC,WAAW,GAAGb,MAAM,CAACW,GAAG,kKAK7B;AAED,IAAMG,aAAa,gBAAGf,KAAK,CAACgB,UAAU,CAAC,gBAiBwBC,GAAG,EAAK;EAAA,IAhB7BC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IACRC,SAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,KAAK,QAALA,KAAK;IACLC,iBAAiB,QAAjBA,iBAAiB;IACjBC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,MAAM,QAANA,MAAM;IACNC,SAAS,QAATA,SAAS;IACTC,UAAU,QAAVA,UAAU;IAAA,iBACVC,IAAI;IAAJA,IAAI,0BAAG,UAAU;IACdC,IAAI;EAE/C,sBAA4CjC,KAAK,CAACkC,QAAQ,CAAU,IAAI,CAAC;IAAA;IAAlEC,cAAc;IAAEC,iBAAiB;EACxC,IAAMC,QAAQ,GAAG9B,kBAAkB,EAAE;EAErCP,KAAK,CAACsC,mBAAmB,CAACrB,GAAG,EAAE;IAAA,OAAMoB,QAAQ,CAACE,OAAO;EAAA,GAAE,CAACF,QAAQ,CAAC,CAAC;EAElE,IAAMG,aAAa,GAAG,SAAhBA,aAAa,CAAIC,CAAM,EAAK;IAChC,IAAIA,CAAC,CAACC,OAAO,KAAK,EAAE,EAAE;MACpBN,iBAAiB,CAAC,CAACD,cAAc,CAAC;IACpC;EACF,CAAC;EAED,IAAMQ,GAAG,aAAMtB,OAAO,GAAG,SAAS,GAAG,EAAE,eAAKO,IAAI,IAAI,EAAE,cAAIE,SAAS,CAAE;EAErE,oBACE;IAAA,wBACE,KAAC,YAAY;MAAC,QAAQ,EAAEX,QAAS;MAAC,QAAQ,EAAEQ,QAAS;MAAC,MAAM,EAAEE,MAAO;MAAA,uBACnE;QAAK,KAAK,EAAE;UAAEe,OAAO,EAAE,OAAO;UAAEf,MAAM,EAAE;QAAS,CAAE;QAAA,uBACjD,MAAC,WAAW;UAAA,wBACV,KAAC,iBAAiB;YAChB,EAAE,EAAEX,EAAG;YACP,eAAaa,UAAW;YACxB,GAAG,EAAEM,QAAS;YACd,IAAI,EAAEF,cAAc,GAAG,UAAU,GAAG,MAAO;YAC3C,IAAI,EAAEH,IAAK;YACX,KAAK,EAAEV,KAAM;YACb,SAAS,EAAEqB,GAAI;YACf,QAAQ,EAAExB,QAAQ,IAAIQ,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;YACxC,YAAY,EAAEH,YAAa;YAC3B,kBAAkB,EAAE,CAAC,CAACD,iBAAkB;YACxC,WAAW,EAAEE,WAAY;YACzB,QAAQ,EAAEN,QAAS;YACnB,QAAQ,EAAEO,QAAS;YACnB,QAAQ,EAAEC,QAAS;YACnB,QAAQ,EAAE,kBAACc,CAAM;cAAA;cAAA,OAAKrB,SAAQ,IAAIA,SAAQ,CAAC,CAAAqB,CAAC,aAADA,CAAC,oCAADA,CAAC,CAAEI,MAAM,8CAAT,UAAWvB,KAAK,KAAI,EAAE,CAAC;YAAA;UAAC,GAC/DW,IAAI,EACR,eACF,KAAC,gBAAgB;YAAC,SAAS,EAAEL,IAAI,GAAGA,IAAI,GAAG,EAAG;YAAA,UAC3C,CAACT,QAAQ,IAAI,CAACQ,QAAQ,GACrBQ,cAAc,gBACZ,KAAC,UAAU;cACT,EAAE,YAAKjB,EAAE,aAAW;cACpB,SAAS,EAAE,SAAU;cACrB,OAAO,EAAE,WAAY;cACrB,KAAK,EAAE,UAAW;cAClB,UAAU,EAAEsB,aAAc;cAC1B,MAAM,EAAE;gBAAA,OAAMJ,iBAAiB,CAAC,CAACD,cAAc,CAAC;cAAA,CAAC;cAAA,uBACjD,KAAC,WAAW,CAAC,UAAU;YAAG,EACf,gBAEb,KAAC,UAAU;cACT,EAAE,YAAKjB,EAAE,gBAAc;cACvB,SAAS,EAAE,SAAU;cACrB,OAAO,EAAE,WAAY;cACrB,KAAK,EAAE,UAAW;cAClB,UAAU,EAAEsB,aAAc;cAC1B,MAAM,EAAE;gBAAA,OAAMJ,iBAAiB,CAAC,CAACD,cAAc,CAAC;cAAA,CAAC;cAAA,uBACjD,KAAC,WAAW,CAAC,SAAS;YAAG,EAE5B,GACC;UAAI,EACS;QAAA;MACP;IACV,EACO,EACdZ,iBAAiB,iBAChB,MAAC,YAAY;MAAC,SAAS,EAAEK,IAAI,IAAI,EAAG;MAAA,wBAClC,KAAC,gBAAgB;QAAC,KAAK,EAAE1B,MAAM,CAAC4C;MAAa,EAAG,eAChD;QAAA,UAAOvB;MAAiB,EAAQ;IAAA,EAEnC;EAAA,EACA;AAEP,CAAC,CAAC;AAAC;EArHDL,EAAE;EACFC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,KAAK;EACLC,iBAAiB;EACjBC,YAAY;EACZC,WAAW;EACXC,QAAQ;EACRC,QAAQ;EAERE,MAAM;AAAA;AA4GR,eAAed,aAAa"}

package/dist/InputFields/QuickSearch.cjs

@@ -140,6 +140,7 @@ var QuickSearch = function QuickSearch(_ref) {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Iconbutton.default, {
           shouldNotInteract: searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible,
           id: "".concat(id, "_Searchbutton"),
+          dataTestId: "".concat(id, "_Searchbutton"),
           variant: "secondary",
           shape: "circular",
           tabIndex: searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible ? -1 : 0,
@@ -155,6 +156,7 @@ var QuickSearch = function QuickSearch(_ref) {
         hidden: !searchTerm || !(searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Iconbutton.default, {
           id: "".concat(id, "_Clearicon"),
+          dataTestId: "".concat(id, "_Clearicon"),
           variant: "secondary",
           shape: "circular",
           action: function action(e) {

package/dist/InputFields/QuickSearch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"QuickSearch.cjs","names":["Wrapper","styled","div","StyledSearchField","COLORS","white","neutral_400","primary_800","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","React","useRef","searchFieldInputRef","useState","visible","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","focusVisible","term","neutral_300","neutral_600","Size","Small"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField, { StyledSearchField } from './components/SearchField';\n\nconst Wrapper = styled.div`\n  width: 100%;\n\n  ${StyledSearchField} {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ${COLORS.white};\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n    }\n  }\n`;\n\ntype QuickSearchProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\n    visible: false,\n  });\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleBlur = (e: any) => {\n    if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\n      setSearchFieldVisible({ visible: false });\n    }\n  };\n\n  const handleSearchIconAction = (e: any) => {\n    if (!searchFieldVisible?.visible) {\n      setSearchFieldVisible({\n        visible: !searchFieldVisible.visible,\n        focus: !searchFieldVisible.visible && e?.detail !== 1,\n      });\n    }\n  };\n\n  // set search field visibility on search term change\n  React.useEffect(() => {\n    if (!!searchTerm?.length && !searchFieldVisible?.visible) {\n      setSearchFieldVisible({ visible: true, focus: false });\n    }\n  }, [searchTerm, searchFieldVisible]);\n\n  // register click outside handler\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  }, []);\n\n  // focus search input on visibility change\n  React.useEffect(() => {\n    if (searchFieldVisible?.visible) {\n      searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\n    }\n  }, [searchFieldVisible.visible, searchFieldInputRef]);\n\n  return (\n    <Wrapper>\n      <SearchField\n        ref={searchFieldRef}\n        id={id}\n        size={size}\n        searchTerm={searchTerm}\n        style={{\n          margin: margin,\n        }}\n        onBlur={handleBlur}\n        className={searchFieldVisible?.visible ? 'expanded' : ''}>\n        {searchFieldVisible?.visible && (\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            ref={searchFieldInputRef}\n            disabled={disabled}\n            onKeyDown={handleKeyDown}\n            size={size}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            enterSearch={enterSearch}\n            focusParentRefs={[searchFieldRef]}\n          />\n        )}\n        <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\n          <IconButton\n            shouldNotInteract={searchFieldVisible?.visible}\n            id={`${id}_Searchbutton`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\n            action={handleSearchIconAction}>\n            <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </SearchIconWrapper>\n        <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\n          <IconButton\n            id={`${id}_Clearicon`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            action={(e) => {\n              removeSearch(e);\n              searchFieldInputRef?.current?.focus();\n            }}>\n            <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </StyledIcon>\n        {loading && searchFieldVisible?.visible && (\n          <StyledIcon className={size ? size : ''}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </StyledIcon>\n        )}\n      </SearchField>\n    </Wrapper>\n  );\n};\n\nexport default QuickSearch;\n"],"mappings":"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"}
+{"version":3,"file":"QuickSearch.cjs","names":["Wrapper","styled","div","StyledSearchField","COLORS","white","neutral_400","primary_800","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","React","useRef","searchFieldInputRef","useState","visible","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","focusVisible","term","neutral_300","neutral_600","Size","Small"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField, { StyledSearchField } from './components/SearchField';\n\nconst Wrapper = styled.div`\n  width: 100%;\n\n  ${StyledSearchField} {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ${COLORS.white};\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n    }\n  }\n`;\n\ntype QuickSearchProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\n    visible: false,\n  });\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleBlur = (e: any) => {\n    if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\n      setSearchFieldVisible({ visible: false });\n    }\n  };\n\n  const handleSearchIconAction = (e: any) => {\n    if (!searchFieldVisible?.visible) {\n      setSearchFieldVisible({\n        visible: !searchFieldVisible.visible,\n        focus: !searchFieldVisible.visible && e?.detail !== 1,\n      });\n    }\n  };\n\n  // set search field visibility on search term change\n  React.useEffect(() => {\n    if (!!searchTerm?.length && !searchFieldVisible?.visible) {\n      setSearchFieldVisible({ visible: true, focus: false });\n    }\n  }, [searchTerm, searchFieldVisible]);\n\n  // register click outside handler\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  }, []);\n\n  // focus search input on visibility change\n  React.useEffect(() => {\n    if (searchFieldVisible?.visible) {\n      searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\n    }\n  }, [searchFieldVisible.visible, searchFieldInputRef]);\n\n  return (\n    <Wrapper>\n      <SearchField\n        ref={searchFieldRef}\n        id={id}\n        size={size}\n        searchTerm={searchTerm}\n        style={{\n          margin: margin,\n        }}\n        onBlur={handleBlur}\n        className={searchFieldVisible?.visible ? 'expanded' : ''}>\n        {searchFieldVisible?.visible && (\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            ref={searchFieldInputRef}\n            disabled={disabled}\n            onKeyDown={handleKeyDown}\n            size={size}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            enterSearch={enterSearch}\n            focusParentRefs={[searchFieldRef]}\n          />\n        )}\n        <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\n          <IconButton\n            shouldNotInteract={searchFieldVisible?.visible}\n            id={`${id}_Searchbutton`}\n            dataTestId={`${id}_Searchbutton`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\n            action={handleSearchIconAction}>\n            <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </SearchIconWrapper>\n        <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\n          <IconButton\n            id={`${id}_Clearicon`}\n            dataTestId={`${id}_Clearicon`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            action={(e) => {\n              removeSearch(e);\n              searchFieldInputRef?.current?.focus();\n            }}>\n            <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </StyledIcon>\n        {loading && searchFieldVisible?.visible && (\n          <StyledIcon className={size ? size : ''}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </StyledIcon>\n        )}\n      </SearchField>\n    </Wrapper>\n  );\n};\n\nexport default QuickSearch;\n"],"mappings":"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"}

package/dist/InputFields/QuickSearch.js

@@ -131,6 +131,7 @@ var QuickSearch = function QuickSearch(_ref) {
         children: /*#__PURE__*/_jsx(IconButton, {
           shouldNotInteract: searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible,
           id: "".concat(id, "_Searchbutton"),
+          dataTestId: "".concat(id, "_Searchbutton"),
           variant: "secondary",
           shape: "circular",
           tabIndex: searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible ? -1 : 0,
@@ -146,6 +147,7 @@ var QuickSearch = function QuickSearch(_ref) {
         hidden: !searchTerm || !(searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible),
         children: /*#__PURE__*/_jsx(IconButton, {
           id: "".concat(id, "_Clearicon"),
+          dataTestId: "".concat(id, "_Clearicon"),
           variant: "secondary",
           shape: "circular",
           action: function action(e) {

package/dist/InputFields/QuickSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickSearch.js","names":["React","styled","IconButton","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","Search","SearchIcon","Clear","ClearIcon","SearchBarInput","SearchField","StyledSearchField","Wrapper","div","white","neutral_400","primary_800","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","useRef","searchFieldInputRef","useState","visible","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","focusVisible","term","neutral_300","neutral_600","Small"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField, { StyledSearchField } from './components/SearchField';\n\nconst Wrapper = styled.div`\n  width: 100%;\n\n  ${StyledSearchField} {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ${COLORS.white};\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n    }\n  }\n`;\n\ntype QuickSearchProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\n    visible: false,\n  });\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleBlur = (e: any) => {\n    if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\n      setSearchFieldVisible({ visible: false });\n    }\n  };\n\n  const handleSearchIconAction = (e: any) => {\n    if (!searchFieldVisible?.visible) {\n      setSearchFieldVisible({\n        visible: !searchFieldVisible.visible,\n        focus: !searchFieldVisible.visible && e?.detail !== 1,\n      });\n    }\n  };\n\n  // set search field visibility on search term change\n  React.useEffect(() => {\n    if (!!searchTerm?.length && !searchFieldVisible?.visible) {\n      setSearchFieldVisible({ visible: true, focus: false });\n    }\n  }, [searchTerm, searchFieldVisible]);\n\n  // register click outside handler\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  }, []);\n\n  // focus search input on visibility change\n  React.useEffect(() => {\n    if (searchFieldVisible?.visible) {\n      searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\n    }\n  }, [searchFieldVisible.visible, searchFieldInputRef]);\n\n  return (\n    <Wrapper>\n      <SearchField\n        ref={searchFieldRef}\n        id={id}\n        size={size}\n        searchTerm={searchTerm}\n        style={{\n          margin: margin,\n        }}\n        onBlur={handleBlur}\n        className={searchFieldVisible?.visible ? 'expanded' : ''}>\n        {searchFieldVisible?.visible && (\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            ref={searchFieldInputRef}\n            disabled={disabled}\n            onKeyDown={handleKeyDown}\n            size={size}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            enterSearch={enterSearch}\n            focusParentRefs={[searchFieldRef]}\n          />\n        )}\n        <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\n          <IconButton\n            shouldNotInteract={searchFieldVisible?.visible}\n            id={`${id}_Searchbutton`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\n            action={handleSearchIconAction}>\n            <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </SearchIconWrapper>\n        <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\n          <IconButton\n            id={`${id}_Clearicon`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            action={(e) => {\n              removeSearch(e);\n              searchFieldInputRef?.current?.focus();\n            }}>\n            <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </StyledIcon>\n        {loading && searchFieldVisible?.visible && (\n          <StyledIcon className={size ? size : ''}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </StyledIcon>\n        )}\n      </SearchField>\n    </Wrapper>\n  );\n};\n\nexport default QuickSearch;\n"],"mappings":"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"}
+{"version":3,"file":"QuickSearch.js","names":["React","styled","IconButton","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","Search","SearchIcon","Clear","ClearIcon","SearchBarInput","SearchField","StyledSearchField","Wrapper","div","white","neutral_400","primary_800","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","useRef","searchFieldInputRef","useState","visible","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","focusVisible","term","neutral_300","neutral_600","Small"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField, { StyledSearchField } from './components/SearchField';\n\nconst Wrapper = styled.div`\n  width: 100%;\n\n  ${StyledSearchField} {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ${COLORS.white};\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n    }\n  }\n`;\n\ntype QuickSearchProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\n    visible: false,\n  });\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleBlur = (e: any) => {\n    if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\n      setSearchFieldVisible({ visible: false });\n    }\n  };\n\n  const handleSearchIconAction = (e: any) => {\n    if (!searchFieldVisible?.visible) {\n      setSearchFieldVisible({\n        visible: !searchFieldVisible.visible,\n        focus: !searchFieldVisible.visible && e?.detail !== 1,\n      });\n    }\n  };\n\n  // set search field visibility on search term change\n  React.useEffect(() => {\n    if (!!searchTerm?.length && !searchFieldVisible?.visible) {\n      setSearchFieldVisible({ visible: true, focus: false });\n    }\n  }, [searchTerm, searchFieldVisible]);\n\n  // register click outside handler\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  }, []);\n\n  // focus search input on visibility change\n  React.useEffect(() => {\n    if (searchFieldVisible?.visible) {\n      searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\n    }\n  }, [searchFieldVisible.visible, searchFieldInputRef]);\n\n  return (\n    <Wrapper>\n      <SearchField\n        ref={searchFieldRef}\n        id={id}\n        size={size}\n        searchTerm={searchTerm}\n        style={{\n          margin: margin,\n        }}\n        onBlur={handleBlur}\n        className={searchFieldVisible?.visible ? 'expanded' : ''}>\n        {searchFieldVisible?.visible && (\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            ref={searchFieldInputRef}\n            disabled={disabled}\n            onKeyDown={handleKeyDown}\n            size={size}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            enterSearch={enterSearch}\n            focusParentRefs={[searchFieldRef]}\n          />\n        )}\n        <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\n          <IconButton\n            shouldNotInteract={searchFieldVisible?.visible}\n            id={`${id}_Searchbutton`}\n            dataTestId={`${id}_Searchbutton`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\n            action={handleSearchIconAction}>\n            <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </SearchIconWrapper>\n        <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\n          <IconButton\n            id={`${id}_Clearicon`}\n            dataTestId={`${id}_Clearicon`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            action={(e) => {\n              removeSearch(e);\n              searchFieldInputRef?.current?.focus();\n            }}>\n            <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </StyledIcon>\n        {loading && searchFieldVisible?.visible && (\n          <StyledIcon className={size ? size : ''}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </StyledIcon>\n        )}\n      </SearchField>\n    </Wrapper>\n  );\n};\n\nexport default QuickSearch;\n"],"mappings":"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"}

package/dist/InputFields/RadioButton.cjs

@@ -17,7 +17,7 @@ var _styles = require("../styles");
 var _types = require("../types");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className"];
+var _excluded = ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className", "dataTestId"];
 var _templateObject;
 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; }
@@ -42,6 +42,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref.size,
     tabIndexVal = _ref.tabIndexVal,
     className = _ref.className,
+    dataTestId = _ref.dataTestId,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var onKeyPress = function onKeyPress(e) {
     if (e.keyCode === 13 && !disabled) {
@@ -67,6 +68,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: 'radio-button-icon',
       id: id,
+      "data-testId": dataTestId,
       children: [selected && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.RadioButtonOn, {
         className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"

package/dist/InputFields/RadioButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.cjs","names":["StyledRadioButton","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","React","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","rest","onKeyPress","e","keyCode","Size","Medium","cls","defaultOnMouseDownHandler","undefined"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, invalid?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'>{\n  id?: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n                                                               id,\n                                                               selected,\n                                                               label,\n                                                               additionalLabel,\n                                                               invalid,\n                                                               select,\n                                                               disabled,\n                                                               margin,\n                                                               iconPointerEventsTransparent,\n                                                               size,\n                                                               tabIndexVal,\n                                                               className,\n                                                               ...rest\n                                                             }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\n\n  return (\n    <StyledRadioButton key={id}\n                       margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={cls}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       invalid={invalid}\n                       selected={selected}\n                       {...rest}>\n      <div className={'radio-button-icon'} id={id}>\n        {selected && <RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n        {!selected &&\n          <RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"mappings":"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"}
+{"version":3,"file":"RadioButton.cjs","names":["StyledRadioButton","styled","div","props","margin","COLORS","black","selected","primary_500","invalid","critical_400","neutral_600","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","ComponentMStyling","ComponentLStyling","focusStyles","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","React","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","onKeyPress","e","keyCode","Size","Medium","cls","defaultOnMouseDownHandler","undefined"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {RadioButtonOff, RadioButtonOn} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {Size, Testable} from '../types';\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, invalid?: boolean, selected?: boolean }>`\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ${props => (props.margin ? `margin: ${props.margin};` : '')}\n  cursor: pointer;\n\n  color: ${COLORS.black};\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ${props => (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ${focusStyles}\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ${COLORS.primary_100};\n\n      svg {\n        color: ${COLORS.primary_800};\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ${COLORS.neutral_300};\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ${COLORS.white};\n    }\n\n    .radio-button-icon svg {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ${COLORS.primary_20};\n\n      svg {\n        color: ${COLORS.primary_700};\n      }\n    }\n  }\n`;\n\ninterface Props extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'>{\n  id?: string;\n  selected: boolean;\n  select: (selected: boolean) => void;\n  label?: string;\n  additionalLabel?: string;\n  invalid?: boolean;\n  disabled?: boolean;\n  iconPointerEventsTransparent?: boolean;\n  margin?: string;\n  size?: Size;\n  tabIndexVal?: number;\n  className?: string;\n}\n\nconst RadioButton = React.forwardRef<HTMLDivElement, Props>(({\n                                                               id,\n                                                               selected,\n                                                               label,\n                                                               additionalLabel,\n                                                               invalid,\n                                                               select,\n                                                               disabled,\n                                                               margin,\n                                                               iconPointerEventsTransparent,\n                                                               size,\n                                                               tabIndexVal,\n                                                               className,\n                                                               dataTestId,\n                                                               ...rest\n                                                             }: Props, ref) => {\n  const onKeyPress = (e: any) => {\n    if (e.keyCode === 13 && !disabled) {\n      select(!selected);\n    }\n  };\n\n  size = size ?? Size.Medium;\n\n  const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\n\n  return (\n    <StyledRadioButton key={id}\n                       margin={margin}\n                       ref={ref}\n                       onClick={() => !disabled && select(!selected)}\n                       onMouseDown={defaultOnMouseDownHandler}\n                       onKeyDown={onKeyPress}\n                       disabled={disabled}\n                       className={cls}\n                       tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\n                       invalid={invalid}\n                       selected={selected}\n                       {...rest}>\n      <div className={'radio-button-icon'} id={id} data-testId={dataTestId}>\n        {selected && <RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n        {!selected &&\n          <RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\n      </div>\n      <div className={'radio-button-label'}>\n        {label && <label htmlFor={id}>{label}</label>}\n        {additionalLabel !== undefined && <span>{additionalLabel}</span>}\n      </div>\n    </StyledRadioButton>\n  );\n});\n\nexport default RadioButton;\n"],"mappings":"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"}

package/dist/InputFields/RadioButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Size } from '../types';
-interface Props extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> {
+import { Size, Testable } from '../types';
+interface Props extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> {
     id?: string;
     selected: boolean;
     select: (selected: boolean) => void;

package/dist/InputFields/RadioButton.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _excluded = ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className"];
+var _excluded = ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className", "dataTestId"];
 var _templateObject;
 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; }
@@ -34,6 +34,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size = _ref.size,
     tabIndexVal = _ref.tabIndexVal,
     className = _ref.className,
+    dataTestId = _ref.dataTestId,
     rest = _objectWithoutProperties(_ref, _excluded);
   var onKeyPress = function onKeyPress(e) {
     if (e.keyCode === 13 && !disabled) {
@@ -59,6 +60,7 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children: [/*#__PURE__*/_jsxs("div", {
       className: 'radio-button-icon',
       id: id,
+      "data-testId": dataTestId,
       children: [selected && /*#__PURE__*/_jsx(RadioButtonOn, {
         className: iconPointerEventsTransparent ? 'pointerTransparent' : '',
         size: "24px"