@laerdal/life-react-components 1.11.0-dev.9 → 2.0.0-dev.1.full

package/dist/InputFields/NumberField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NumberField.cjs","names":["Container","styled","div","PrefixContainer","props","size","Size","Small","disabled","COLORS","neutral_300","neutral_500","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","OperatorWrapper","Medium","neutral_200","NumberInput","input","neutral_400","fieldSize","black","type","hasPrefix","Italic","primary_800","focusStyles","primary_700","neutral_100","correct_400","critical_400","NoteLabel","ComponentXXSStyling","ComponentXSStyling","NoteIcon","NoteContainer","correct_500","critical_500","InputContainer","Z_INDEXES","focus","LeftOperator","RightOperator","NumberField","React","forwardRef","ref","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","readOnly","state","value","placeholder","onChange","className","rest","useState","toString","userInput","setUserInput","elementRef","useFocusVisibleRef","useEffect","useImperativeHandle","current","setVal","e","handleKeyPress","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","undefined","negativeAndDecimalRegex","val","target","length","charAt","test","isInRange","replace","indexOf","lastIndexOf","includes","isDecimal","x","parseFloat","toFixed","parseInt","isNaN","Math","round","pow","isLocked","operator","operatorState","renderNumberFieldElements","renderNumberInputElements","concat"],"sources":["../../src/InputFields/NumberField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {IconButton} from '../Button';\nimport {useFocusVisibleRef} from '../common';\nimport {SystemIcons} from '../icons';\nimport {COLORS, focusStyles, Z_INDEXES} from '../styles';\nimport {\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXXSStyling,\n  ComponentXSStyling\n} from '../styles/typography';\nimport {Size, States} 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\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.cjs","names":["Container","styled","div","PrefixContainer","props","size","Size","Small","disabled","COLORS","neutral_300","neutral_500","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","OperatorWrapper","Medium","neutral_200","NumberInput","input","neutral_400","fieldSize","black","type","hasPrefix","Italic","primary_800","focusStyles","primary_700","neutral_100","correct_400","critical_400","NoteLabel","ComponentXXSStyling","ComponentXSStyling","NoteIcon","NoteContainer","correct_500","critical_500","InputContainer","Z_INDEXES","focus","LeftOperator","RightOperator","NumberField","React","forwardRef","ref","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","readOnly","state","value","placeholder","onChange","className","rest","useState","toString","userInput","setUserInput","elementRef","useFocusVisibleRef","useEffect","useImperativeHandle","current","setVal","e","handleKeyPress","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","undefined","negativeAndDecimalRegex","val","target","length","charAt","test","isInRange","replace","indexOf","lastIndexOf","includes","isDecimal","x","parseFloat","toFixed","parseInt","isNaN","Math","round","pow","isLocked","operator","operatorState","renderNumberFieldElements","renderNumberInputElements","concat"],"sources":["../../src/InputFields/NumberField.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {IconButton} from '../Button';\nimport {useFocusVisibleRef} from '../common';\nimport {SystemIcons} from '../icons';\nimport {COLORS, focusStyles, Z_INDEXES} from '../styles';\nimport {\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXXSStyling,\n  ComponentXSStyling\n} from '../styles/typography';\nimport {Size, States} 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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"}

package/dist/InputFields/NumberField.js

@@ -51,7 +51,7 @@ var NoteLabel = styled.div(_templateObject5 || (_templateObject5 = _taggedTempla
 });
 var NoteIcon = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  svg {\n    height: 16px;\n  }\n"])));
 var NoteContainer = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-top: 5px;\n\n  &.valid {\n    ", " {\n      color: ", ";\n    }\n\n    ", " {\n      svg path {\n        fill: ", ";\n      }\n    }\n  }\n\n  &.invalid {\n    ", " {\n      color: ", ";\n    }\n\n    ", " {\n      svg path {\n        fill: ", ";\n      }\n    }\n  }\n"])), NoteLabel, COLORS.correct_500, NoteIcon, COLORS.correct_500, NoteLabel, COLORS.critical_500, NoteIcon, COLORS.critical_500);
-var InputContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  min-width: ", ";\n  height: ", ";\n  display: flex;\n  position: relative;\n\n  input.focus-visible ~ div.operator {\n    z-index: ", ";\n  }\n"])), function (props) {
+var InputContainer = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  min-width: ", ";\n  height: ", ";\n  display: flex;\n  position: relative;\n  margin: 4px 0px;\n\n  input.focus-visible ~ div.operator {\n    z-index: ", ";\n  }\n"])), function (props) {
   return props.type === 'NumberField' ? '160px' : '144px';
 }, function (props) {
   return props.size === Size.Small ? '48px' : '56px';

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\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","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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"}

package/dist/InputFields/QuickSearch.cjs

@@ -124,7 +124,7 @@ var QuickSearch = function QuickSearch(_ref) {
     return function () {
       document.removeEventListener('click', handleClickOutside);
     };
-  }); // focus search input on visibility change
+  }, []); // focus search input on visibility change
 
   React.useEffect(function () {
     if (searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible) {

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            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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"}

package/dist/InputFields/QuickSearch.js

@@ -98,7 +98,7 @@ var QuickSearch = function QuickSearch(_ref) {
     return function () {
       document.removeEventListener('click', handleClickOutside);
     };
-  }); // focus search input on visibility change
+  }, []); // focus search input on visibility change
 
   React.useEffect(function () {
     if (searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible) {

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":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,OAAOC,UAAP,MAAuB,sBAAvB;AACA,SAASC,iBAAT,EAA4BC,UAA5B,QAA8C,WAA9C;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,SAASC,MAAT,EAAiBC,gBAAjB,QAAyC,IAAzC;AACA,SAASC,MAAM,IAAIC,UAAnB,EAA+BC,KAAK,IAAIC,SAAxC,QAAyD,kCAAzD;AACA,OAAOC,cAAP,MAA2B,6BAA3B;AACA,OAAOC,WAAP,IAAsBC,iBAAtB,QAA+C,0BAA/C;;;AAEA,IAAMC,OAAO,GAAGd,MAAM,CAACe,GAAV,knBAGTF,iBAHS,EA2BaR,MAAM,CAACW,KA3BpB,EA4BuBX,MAAM,CAACY,WA5B9B,EAiCuBZ,MAAM,CAACa,WAjC9B,CAAb;;AAqDA,IAAMC,WAAsD,GAAG,SAAzDA,WAAyD,OAavC;EAAA,IAZtBC,EAYsB,QAZtBA,EAYsB;EAAA,IAXtBC,UAWsB,QAXtBA,UAWsB;EAAA,IAVtBC,cAUsB,QAVtBA,aAUsB;EAAA,IATtBC,WASsB,QATtBA,WASsB;EAAA,IARtBC,YAQsB,QARtBA,YAQsB;EAAA,IAPtBC,WAOsB,QAPtBA,WAOsB;EAAA,IANtBC,kBAMsB,QANtBA,kBAMsB;EAAA,IALtBC,QAKsB,QALtBA,QAKsB;EAAA,IAJtBC,SAIsB,QAJtBA,SAIsB;EAAA,IAHtBC,IAGsB,QAHtBA,IAGsB;EAAA,IAFtBC,MAEsB,QAFtBA,MAEsB;EAAA,IADtBC,OACsB,QADtBA,OACsB;EACtB,IAAMC,cAAc,GAAGjC,KAAK,CAACkC,MAAN,CAA6B,IAA7B,CAAvB;EACA,IAAMC,mBAAmB,GAAGnC,KAAK,CAACkC,MAAN,CAA+B,IAA/B,CAA5B;;EAEA,sBAAoDlC,KAAK,CAACoC,QAAN,CAAsD;IACxGC,OAAO,EAAE;EAD+F,CAAtD,CAApD;EAAA;EAAA,IAAOC,kBAAP;EAAA,IAA2BC,qBAA3B;;EAIA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,CAAD,EAAY;IACrC,IAAIR,cAAc,SAAd,IAAAA,cAAc,WAAd,IAAAA,cAAc,CAAES,OAAhB,IAA2B,CAACT,cAAc,CAACS,OAAf,CAAuBC,QAAvB,CAAgCF,CAAC,CAACG,MAAlC,CAAhC,EAA2E;MACzE,IAAIN,kBAAkB,SAAlB,IAAAA,kBAAkB,WAAlB,IAAAA,kBAAkB,CAAED,OAApB,IAA+B,EAACf,UAAD,aAACA,UAAD,eAACA,UAAU,CAAEuB,MAAb,CAAnC,EAAwD;QACtDN,qBAAqB,CAAC;UAAEF,OAAO,EAAE;QAAX,CAAD,CAArB;MACD;IACF;EACF,CAND;;EAQA,IAAMS,aAAa,GAAG,SAAhBA,aAAgB,CAACL,CAAD,EAAY;IAChC,IAAIZ,SAAJ,EAAe;MACbA,SAAS,CAACY,CAAD,CAAT;IACD;;IACD,IAAIA,CAAC,CAACM,GAAF,KAAU,QAAd,EAAwB;MACtB,IAAIT,kBAAkB,SAAlB,IAAAA,kBAAkB,WAAlB,IAAAA,kBAAkB,CAAED,OAApB,IAA+B,EAACf,UAAD,aAACA,UAAD,eAACA,UAAU,CAAEuB,MAAb,CAAnC,EAAwD;QACtDN,qBAAqB,CAAC;UAAEF,OAAO,EAAE;QAAX,CAAD,CAArB;MACD;IACF;EACF,CATD;;EAWA,IAAMW,UAAU,GAAG,SAAbA,UAAa,CAACP,CAAD,EAAY;IAAA;;IAC7B,IAAI,CAACnB,UAAD,KAAgB,CAACmB,CAAC,CAACQ,aAAH,IAAoB,2BAAChB,cAAc,CAACS,OAAhB,kDAAC,sBAAwBC,QAAxB,CAAiCF,CAAC,CAACQ,aAAnC,CAAD,CAApC,CAAJ,EAA6F;MAC3FV,qBAAqB,CAAC;QAAEF,OAAO,EAAE;MAAX,CAAD,CAArB;IACD;EACF,CAJD;;EAMA,IAAMa,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACT,CAAD,EAAY;IACzC,IAAI,EAACH,kBAAD,aAACA,kBAAD,eAACA,kBAAkB,CAAED,OAArB,CAAJ,EAAkC;MAChCE,qBAAqB,CAAC;QACpBF,OAAO,EAAE,CAACC,kBAAkB,CAACD,OADT;QAEpBc,KAAK,EAAE,CAACb,kBAAkB,CAACD,OAApB,IAA+B,CAAAI,CAAC,SAAD,IAAAA,CAAC,WAAD,YAAAA,CAAC,CAAEW,MAAH,MAAc;MAFhC,CAAD,CAArB;IAID;EACF,CAPD,CAjCsB,CA0CtB;;;EACApD,KAAK,CAACqD,SAAN,CAAgB,YAAM;IACpB,IAAI,CAAC,EAAC/B,UAAD,aAACA,UAAD,eAACA,UAAU,CAAEuB,MAAb,CAAD,IAAwB,EAACP,kBAAD,aAACA,kBAAD,eAACA,kBAAkB,CAAED,OAArB,CAA5B,EAA0D;MACxDE,qBAAqB,CAAC;QAAEF,OAAO,EAAE,IAAX;QAAiBc,KAAK,EAAE;MAAxB,CAAD,CAArB;IACD;EACF,CAJD,EAIG,CAAC7B,UAAD,EAAagB,kBAAb,CAJH,EA3CsB,CAiDtB;;EACAtC,KAAK,CAACqD,SAAN,CAAgB,YAAM;IACpBC,QAAQ,CAACC,gBAAT,CAA0B,OAA1B,EAAmCf,kBAAnC;IACA,OAAO,YAAM;MACXc,QAAQ,CAACE,mBAAT,CAA6B,OAA7B,EAAsChB,kBAAtC;IACD,CAFD;EAGD,CALD,EAlDsB,CAyDtB;;EACAxC,KAAK,CAACqD,SAAN,CAAgB,YAAM;IACpB,IAAIf,kBAAJ,aAAIA,kBAAJ,eAAIA,kBAAkB,CAAED,OAAxB,EAAiC;MAAA;;MAC/BF,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,qCAAAA,mBAAmB,CAAEO,OAArB,gFAA8BS,KAA9B,CAAoC;QAAEM,YAAY,EAAEnB,kBAAkB,CAACa;MAAnC,CAApC;IACD;EACF,CAJD,EAIG,CAACb,kBAAkB,CAACD,OAApB,EAA6BF,mBAA7B,CAJH;EAMA,oBACE,KAAC,OAAD;IAAA,uBACE,MAAC,WAAD;MACE,GAAG,EAAEF,cADP;MAEE,EAAE,EAAEZ,EAFN;MAGE,IAAI,EAAES,IAHR;MAIE,UAAU,EAAER,UAJd;MAKE,KAAK,EAAE;QACLS,MAAM,EAAEA;MADH,CALT;MAQE,MAAM,EAAEiB,UARV;MASE,SAAS,EAAEV,kBAAkB,SAAlB,IAAAA,kBAAkB,WAAlB,IAAAA,kBAAkB,CAAED,OAApB,GAA8B,UAA9B,GAA2C,EATxD;MAAA,WAUG,CAAAC,kBAAkB,SAAlB,IAAAA,kBAAkB,WAAlB,YAAAA,kBAAkB,CAAED,OAApB,kBACC,KAAC,cAAD;QACE,WAAW,EAAET,QAAQ,GAAG,EAAH,GAAQF,WAD/B;QAEE,EAAE,EAAEL,EAFN;QAGE,GAAG,EAAEc,mBAHP;QAIE,QAAQ,EAAEP,QAJZ;QAKE,SAAS,EAAEkB,aALb;QAME,IAAI,EAAEhB,IANR;QAOE,aAAa,EAAE,uBAAC4B,IAAD;UAAA,OAAkBnC,cAAa,CAACmC,IAAD,CAA/B;QAAA,CAPjB;QAQE,UAAU,EAAEpC,UARd;QASE,WAAW,EAAEE,WATf;QAUE,eAAe,EAAE,CAACS,cAAD;MAVnB,EAXJ,eAwBE,KAAC,iBAAD;QAAmB,SAAS,EAAEH,IAAI,GAAGA,IAAH,GAAU,EAA5C;QAAgD,IAAI,EAAC,QAArD;QAA8D,cAAYH,kBAA1E;QAAA,uBACE,KAAC,UAAD;UACE,iBAAiB,EAAEW,kBAAF,aAAEA,kBAAF,uBAAEA,kBAAkB,CAAED,OADzC;UAEE,EAAE,YAAKhB,EAAL,kBAFJ;UAGE,OAAO,EAAC,WAHV;UAIE,KAAK,EAAC,UAJR;UAKE,QAAQ,EAAEiB,kBAAkB,SAAlB,IAAAA,kBAAkB,WAAlB,IAAAA,kBAAkB,CAAED,OAApB,GAA8B,CAAC,CAA/B,GAAmC,CAL/C;UAME,MAAM,EAAEa,sBANV;UAAA,uBAOE,KAAC,UAAD;YAAY,IAAI,EAAC,MAAjB;YAAwB,KAAK,EAAEtB,QAAQ,GAAGtB,MAAM,CAACqD,WAAV,GAAwBrD,MAAM,CAACsD;UAAtE;QAPF;MADF,EAxBF,eAmCE,KAAC,UAAD;QAAY,SAAS,EAAE9B,IAAI,GAAGA,IAAH,GAAU,EAArC;QAAyC,IAAI,EAAC,QAA9C;QAAuD,MAAM,EAAE,CAACR,UAAD,IAAe,EAACgB,kBAAD,aAACA,kBAAD,eAACA,kBAAkB,CAAED,OAArB,CAA9E;QAAA,uBACE,KAAC,UAAD;UACE,EAAE,YAAKhB,EAAL,eADJ;UAEE,OAAO,EAAC,WAFV;UAGE,KAAK,EAAC,UAHR;UAIE,MAAM,EAAE,gBAACoB,CAAD,EAAO;YAAA;;YACbhB,YAAY,CAACgB,CAAD,CAAZ;YACAN,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,sCAAAA,mBAAmB,CAAEO,OAArB,kFAA8BS,KAA9B;UACD,CAPH;UAAA,uBAQE,KAAC,SAAD;YAAW,IAAI,EAAC,MAAhB;YAAuB,KAAK,EAAEvB,QAAQ,GAAGtB,MAAM,CAACqD,WAAV,GAAwBrD,MAAM,CAACsD;UAArE;QARF;MADF,EAnCF,EA+CG5B,OAAO,KAAIM,kBAAJ,aAAIA,kBAAJ,uBAAIA,kBAAkB,CAAED,OAAxB,CAAP,iBACC,KAAC,UAAD;QAAY,SAAS,EAAEP,IAAI,GAAGA,IAAH,GAAU,EAArC;QAAA,uBACE,KAAC,gBAAD;UAAkB,IAAI,EAAEzB,IAAI,CAACwD,KAA7B;UAAoC,KAAK,EAAEvD,MAAM,CAACsD;QAAlD;MADF,EAhDJ;IAAA;EADF,EADF;AAyDD,CAtID;;;EAdEvC,E;EACAC,U;EACAC,a;EACAC,W;EACAC,Y;EACAC,W;EACAC,kB;EACAC,Q;EACAC,S;EAEAE,M;EACAC,O;;AA2IF,eAAeZ,WAAf"}
+{"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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"}

package/dist/InputFields/ResponsiveComponentWrapper.cjs

@@ -49,10 +49,10 @@ var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
     };
 
     window.addEventListener('resize', handleResize);
-    return function cleanup() {
-      window.removeEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
     };
-  });
+  }, []);
   return size && size === _types.Size.Medium ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentXS, {
     children: children
   }) : size && size === _types.Size.Small ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentXXS, {

package/dist/InputFields/ResponsiveComponentWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveComponentWrapper.cjs","names":["ReponsiveComponentWrapper","children","size","React","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","BREAKPOINTS","MEDIUM","replace","matches","addEventListener","cleanup","removeEventListener","Size","Medium","Small"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return function cleanup() {\n      window.removeEventListener('resize', handleResize);\n    };\n  });\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"mappings":";;;;;;;;;;;;;;;AAGA;;AACA;;AAKA;;;;;;;;AATA;AACA;AACA;;AAIA;AACA;AACA;AASA,IAAMA,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;EAAA,IAAjCC,QAAiC,QAAjCA,QAAiC;EAAA,IAAvBC,IAAuB,QAAvBA,IAAuB;;EACzG;EACA,sBAAwCC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAxC;EAAA;EAAA,IAAOC,YAAP;EAAA,IAAqBC,eAArB;;EAEAH,KAAK,CAACI,SAAN,CAAgB,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBC,mBAAA,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;MACAR,eAAe,CAACG,GAAG,CAACM,OAAL,CAAf;IACD,CAHD;;IAIAL,MAAM,CAACM,gBAAP,CAAwB,QAAxB,EAAkCR,YAAlC;IACA,OAAO,SAASS,OAAT,GAAmB;MACxBP,MAAM,CAACQ,mBAAP,CAA2B,QAA3B,EAAqCV,YAArC;IACD,CAFD;EAGD,CATD;EAWA,OAAON,IAAI,IAAIA,IAAI,KAAKiB,WAAA,CAAKC,MAAtB,gBACL,qBAAC,mBAAD;IAAA,UAAcnB;EAAd,EADK,GAEHC,IAAI,IAAIA,IAAI,KAAKiB,WAAA,CAAKE,KAAtB,gBACF,qBAAC,oBAAD;IAAA,UAAepB;EAAf,EADE,GAEAI,YAAY,gBACd,qBAAC,mBAAD;IAAA,UAAcJ;EAAd,EADc,gBAGd,qBAAC,oBAAD;IAAA,UAAeA;EAAf,EAPF;AASD,CAxBD;;;EAHEA,Q;;eA6BaD,yB"}
+{"version":3,"file":"ResponsiveComponentWrapper.cjs","names":["ReponsiveComponentWrapper","children","size","React","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","BREAKPOINTS","MEDIUM","replace","matches","addEventListener","removeEventListener","Size","Medium","Small"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"mappings":";;;;;;;;;;;;;;;AAGA;;AACA;;AAKA;;;;;;;;AATA;AACA;AACA;;AAIA;AACA;AACA;AASA,IAAMA,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;EAAA,IAAjCC,QAAiC,QAAjCA,QAAiC;EAAA,IAAvBC,IAAuB,QAAvBA,IAAuB;;EACzG;EACA,sBAAwCC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAxC;EAAA;EAAA,IAAOC,YAAP;EAAA,IAAqBC,eAArB;;EAEAH,KAAK,CAACI,SAAN,CAAgB,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBC,mBAAA,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;MACAR,eAAe,CAACG,GAAG,CAACM,OAAL,CAAf;IACD,CAHD;;IAIAL,MAAM,CAACM,gBAAP,CAAwB,QAAxB,EAAkCR,YAAlC;IACA,OAAO;MAAA,OAAME,MAAM,CAACO,mBAAP,CAA2B,QAA3B,EAAqCT,YAArC,CAAN;IAAA,CAAP;EACD,CAPD,EAOG,EAPH;EASA,OAAON,IAAI,IAAIA,IAAI,KAAKgB,WAAA,CAAKC,MAAtB,gBACL,qBAAC,mBAAD;IAAA,UAAclB;EAAd,EADK,GAEHC,IAAI,IAAIA,IAAI,KAAKgB,WAAA,CAAKE,KAAtB,gBACF,qBAAC,oBAAD;IAAA,UAAenB;EAAf,EADE,GAEAI,YAAY,gBACd,qBAAC,mBAAD;IAAA,UAAcJ;EAAd,EADc,gBAGd,qBAAC,oBAAD;IAAA,UAAeA;EAAf,EAPF;AASD,CAtBD;;;EAHEA,Q;;eA2BaD,yB"}

package/dist/InputFields/ResponsiveComponentWrapper.js

@@ -31,10 +31,10 @@ var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
     };
 
     window.addEventListener('resize', handleResize);
-    return function cleanup() {
-      window.removeEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
     };
-  });
+  }, []);
   return size && size === Size.Medium ? /*#__PURE__*/_jsx(ComponentXS, {
     children: children
   }) : size && size === Size.Small ? /*#__PURE__*/_jsx(ComponentXXS, {

package/dist/InputFields/ResponsiveComponentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveComponentWrapper.js","names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","ReponsiveComponentWrapper","children","size","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","MEDIUM","replace","matches","addEventListener","cleanup","removeEventListener","Medium","Small"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return function cleanup() {\n      window.removeEventListener('resize', handleResize);\n    };\n  });\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,YAAtB,EAAoCC,WAApC,QAAuD,WAAvD,C,CAEA;;;;AAMA,IAAMC,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;EAAA,IAAjCC,QAAiC,QAAjCA,QAAiC;EAAA,IAAvBC,IAAuB,QAAvBA,IAAuB;;EACzG;EACA,sBAAwCP,KAAK,CAACQ,QAAN,CAAwB,KAAxB,CAAxC;EAAA;EAAA,IAAOC,YAAP;EAAA,IAAqBC,eAArB;;EAEAV,KAAK,CAACW,SAAN,CAAgB,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBb,WAAW,CAACc,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;MACAP,eAAe,CAACG,GAAG,CAACK,OAAL,CAAf;IACD,CAHD;;IAIAJ,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCP,YAAlC;IACA,OAAO,SAASQ,OAAT,GAAmB;MACxBN,MAAM,CAACO,mBAAP,CAA2B,QAA3B,EAAqCT,YAArC;IACD,CAFD;EAGD,CATD;EAWA,OAAOL,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACqB,MAAtB,gBACL,KAAC,WAAD;IAAA,UAAchB;EAAd,EADK,GAEHC,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACsB,KAAtB,gBACF,KAAC,YAAD;IAAA,UAAejB;EAAf,EADE,GAEAG,YAAY,gBACd,KAAC,WAAD;IAAA,UAAcH;EAAd,EADc,gBAGd,KAAC,YAAD;IAAA,UAAeA;EAAf,EAPF;AASD,CAxBD;;;EAHEA,Q;;AA6BF,eAAeD,yBAAf"}
+{"version":3,"file":"ResponsiveComponentWrapper.js","names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","ReponsiveComponentWrapper","children","size","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","MEDIUM","replace","matches","addEventListener","removeEventListener","Medium","Small"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,YAAtB,EAAoCC,WAApC,QAAuD,WAAvD,C,CAEA;;;;AAMA,IAAMC,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;EAAA,IAAjCC,QAAiC,QAAjCA,QAAiC;EAAA,IAAvBC,IAAuB,QAAvBA,IAAuB;;EACzG;EACA,sBAAwCP,KAAK,CAACQ,QAAN,CAAwB,KAAxB,CAAxC;EAAA;EAAA,IAAOC,YAAP;EAAA,IAAqBC,eAArB;;EAEAV,KAAK,CAACW,SAAN,CAAgB,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBb,WAAW,CAACc,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;MACAP,eAAe,CAACG,GAAG,CAACK,OAAL,CAAf;IACD,CAHD;;IAIAJ,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCP,YAAlC;IACA,OAAO;MAAA,OAAME,MAAM,CAACM,mBAAP,CAA2B,QAA3B,EAAqCR,YAArC,CAAN;IAAA,CAAP;EACD,CAPD,EAOG,EAPH;EASA,OAAOL,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACoB,MAAtB,gBACL,KAAC,WAAD;IAAA,UAAcf;EAAd,EADK,GAEHC,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACqB,KAAtB,gBACF,KAAC,YAAD;IAAA,UAAehB;EAAf,EADE,GAEAG,YAAY,gBACd,KAAC,WAAD;IAAA,UAAcH;EAAd,EADc,gBAGd,KAAC,YAAD;IAAA,UAAeA;EAAf,EAPF;AASD,CAtBD;;;EAHEA,Q;;AA2BF,eAAeD,yBAAf"}

package/dist/InputFields/SearchBar.cjs

@@ -159,6 +159,7 @@ var SearchBar = function SearchBar(_ref) {
         containerRef: containerRef,
         size: size,
         isButton: false,
+        ariaRolesType: "input",
         customizationProps: {
           items: searchList,
           action: dropdownAction,