@laerdal/life-react-components 3.0.1-dev.2 → 3.0.1-dev.20.full

package/dist/InputFields/NumberField.js.map

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

package/dist/ProfileButton/ProfileButton.cjs

@@ -26,7 +26,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var PortraitOverlay = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"])), _.COLORS.black);
 var ProfileButtonContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ", " {\n    display: ", ";\n\n    ", " {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"])), _Iconbutton.StyledPrimaryIconButton, function (props) {
   return props.hideOnLowWidth ? 'none' : 'inline';
-}, _styles.BREAKPOINTS.MEDIUM, _Iconbutton.IconButtonContent, _.COLORS.neutral_100, _.COLORS.neutral_300, PortraitOverlay, PortraitOverlay);
+}, _styles.BREAKPOINTS.MEDIUM, _Iconbutton.IconButtonContentStyles, _.COLORS.neutral_100, _.COLORS.neutral_300, PortraitOverlay, PortraitOverlay);
 exports.ProfileButtonContainer = ProfileButtonContainer;
 var NotificationContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"])));
 var ImageWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n"])));

package/dist/ProfileButton/ProfileButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileButton.cjs","names":["PortraitOverlay","styled","div","COLORS","black","ProfileButtonContainer","StyledPrimaryIconButton","props","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContent","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","React","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","renderIcon","ComponentTextStyle","Bold","white","Size","Medium"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\nexport type ProfileButtonProps = {\n  portraitSrc?: string;\n  icon?: React.ReactNode;\n  initials?: string;\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  notificationVariant?: 'positive' | 'critical';\n  hideOnLowWidth?: boolean;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\n\nconst PortraitOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ${COLORS.black};\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n`;\n\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ${StyledPrimaryIconButton} {\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n    ${BREAKPOINTS.MEDIUM} {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ${IconButtonContent} {\n        background-color: ${COLORS.neutral_100};\n\n        svg, svg path {\n          fill: ${COLORS.neutral_300};\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ${PortraitOverlay} {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ${PortraitOverlay} {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n`;\n\nconst NotificationContainer = styled.div`\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n                                                                                 portraitSrc,\n                                                                                 icon,\n                                                                                 initials,\n                                                                                 onClick,\n                                                                                 hideOnLowWidth,\n                                                                                 disabled,\n                                                                                 notificationVariant,\n                                                                                 className,\n                                                                                 tabIndex,\n                                                                                 ...rest\n                                                                               }, ref) => {\n  const renderIcon = () => {\n    return (\n      (portraitSrc && (\n        <ImageWrapper>\n          <img src={portraitSrc}/>\n          <PortraitOverlay/>\n        </ImageWrapper>\n      )) ||\n      (initials && (\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n                    color={disabled ? COLORS.neutral_300 : COLORS.white}>\n          {initials}\n        </ComponentS>\n      )) || <>{icon}</>\n    );\n  };\n\n  return (\n    <ProfileButtonContainer hideOnLowWidth={hideOnLowWidth}>\n      <IconButton ref={ref}\n                  className={className}\n                  disabled={disabled}\n                  action={onClick}\n                  variant=\"primary\"\n                  tabIndex={tabIndex}\n                  shape=\"circular\"\n                  hideOnLowWidth={hideOnLowWidth}\n                  {...rest}>\n        {renderIcon()}\n        {notificationVariant && (\n          <NotificationContainer>\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n          </NotificationContainer>\n        )}\n      </IconButton>\n    </ProfileButtonContainer>\n  );\n});\n\nexport default ProfileButton;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAsE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWtE,IAAMA,eAAe,GAAGC,yBAAM,CAACC,GAAG,0OAIZC,QAAM,CAACC,KAAK,CAKjC;AAEM,IAAMC,sBAAsB,GAAGJ,yBAAM,CAACC,GAAG,8vBAM5CI,mCAAuB,EACZ,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC,EAE5DC,mBAAW,CAACC,MAAM,EAShBC,6BAAiB,EACGR,QAAM,CAACS,WAAW,EAG5BT,QAAM,CAACU,WAAW,EAO5Bb,eAAe,EAQfA,eAAe,CAMtB;AAAC;AAEF,IAAMc,qBAAqB,GAAGb,yBAAM,CAACC,GAAG,8IAIvC;AAED,IAAMa,YAAY,GAAGd,yBAAM,CAACC,GAAG,qPAW9B;AAED,IAAMc,aAAa,gBAAGC,KAAK,CAACC,UAAU,CAAwC,gBAWIC,GAAG,EAAK;EAAA,IAVTC,WAAW,QAAXA,WAAW;IACXC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPf,cAAc,QAAdA,cAAc;IACdgB,QAAQ,QAARA,QAAQ;IACRC,mBAAmB,QAAnBA,mBAAmB;IACnBC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAEtF,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACvB,OACGT,WAAW,iBACV,sBAAC,YAAY;MAAA,wBACX;QAAK,GAAG,EAAEA;MAAY,EAAE,eACxB,qBAAC,eAAe,KAAE;IAAA,EAErB,IACAE,QAAQ,iBACP,qBAAC,kBAAU;MAAC,SAAS,EAAC,UAAU;MAAC,SAAS,EAAEQ,0BAAkB,CAACC,IAAK;MACxD,KAAK,EAAEP,QAAQ,GAAGrB,QAAM,CAACU,WAAW,GAAGV,QAAM,CAAC6B,KAAM;MAAA,UAC7DV;IAAQ,EAEX,iBAAI;MAAA,UAAGD;IAAI,EAAI;EAErB,CAAC;EAED,oBACE,qBAAC,sBAAsB;IAAC,cAAc,EAAEb,cAAe;IAAA,uBACrD,sBAAC,YAAU;MAAC,GAAG,EAAEW,GAAI;MACT,SAAS,EAAEO,SAAU;MACrB,QAAQ,EAAEF,QAAS;MACnB,MAAM,EAAED,OAAQ;MAChB,OAAO,EAAC,SAAS;MACjB,QAAQ,EAAEI,QAAS;MACnB,KAAK,EAAC,UAAU;MAChB,cAAc,EAAEnB;IAAe,GAC3BoB,IAAI;MAAA,WACjBC,UAAU,EAAE,EACZJ,mBAAmB,iBAClB,qBAAC,qBAAqB;QAAA,uBACpB,qBAAC,gCAAe;UAAC,IAAI,EAAEQ,MAAI,CAACC,MAAO;UAAC,OAAO,EAAET;QAAoB;MAAE,EAEtE;IAAA;EACU,EACU;AAE7B,CAAC,CAAC;AAAC;EApIDL,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,OAAO;EACPE,mBAAmB,4BAAG,UAAU,EAAG,UAAU;EAC7CjB,cAAc;AAAA;AAAA,eAiIDQ,aAAa;AAAA"}
+{"version":3,"file":"ProfileButton.cjs","names":["PortraitOverlay","styled","div","COLORS","black","ProfileButtonContainer","StyledPrimaryIconButton","props","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContentStyles","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","React","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","renderIcon","ComponentTextStyle","Bold","white","Size","Medium"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContentStyles, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\nexport type ProfileButtonProps = {\n  portraitSrc?: string;\n  icon?: React.ReactNode;\n  initials?: string;\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  notificationVariant?: 'positive' | 'critical';\n  hideOnLowWidth?: boolean;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\n\nconst PortraitOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ${COLORS.black};\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n`;\n\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ${StyledPrimaryIconButton} {\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n    ${BREAKPOINTS.MEDIUM} {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ${IconButtonContentStyles} {\n        background-color: ${COLORS.neutral_100};\n\n        svg, svg path {\n          fill: ${COLORS.neutral_300};\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ${PortraitOverlay} {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ${PortraitOverlay} {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n`;\n\nconst NotificationContainer = styled.div`\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n                                                                                 portraitSrc,\n                                                                                 icon,\n                                                                                 initials,\n                                                                                 onClick,\n                                                                                 hideOnLowWidth,\n                                                                                 disabled,\n                                                                                 notificationVariant,\n                                                                                 className,\n                                                                                 tabIndex,\n                                                                                 ...rest\n                                                                               }, ref) => {\n  const renderIcon = () => {\n    return (\n      (portraitSrc && (\n        <ImageWrapper>\n          <img src={portraitSrc}/>\n          <PortraitOverlay/>\n        </ImageWrapper>\n      )) ||\n      (initials && (\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n                    color={disabled ? COLORS.neutral_300 : COLORS.white}>\n          {initials}\n        </ComponentS>\n      )) || <>{icon}</>\n    );\n  };\n\n  return (\n    <ProfileButtonContainer hideOnLowWidth={hideOnLowWidth}>\n      <IconButton ref={ref}\n                  className={className}\n                  disabled={disabled}\n                  action={onClick}\n                  variant=\"primary\"\n                  tabIndex={tabIndex}\n                  shape=\"circular\"\n                  hideOnLowWidth={hideOnLowWidth}\n                  {...rest}>\n        {renderIcon()}\n        {notificationVariant && (\n          <NotificationContainer>\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n          </NotificationContainer>\n        )}\n      </IconButton>\n    </ProfileButtonContainer>\n  );\n});\n\nexport default ProfileButton;\n"],"mappings":";;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AAAsE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWtE,IAAMA,eAAe,GAAGC,yBAAM,CAACC,GAAG,0OAIZC,QAAM,CAACC,KAAK,CAKjC;AAEM,IAAMC,sBAAsB,GAAGJ,yBAAM,CAACC,GAAG,8vBAM5CI,mCAAuB,EACZ,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC,EAE5DC,mBAAW,CAACC,MAAM,EAShBC,mCAAuB,EACHR,QAAM,CAACS,WAAW,EAG5BT,QAAM,CAACU,WAAW,EAO5Bb,eAAe,EAQfA,eAAe,CAMtB;AAAC;AAEF,IAAMc,qBAAqB,GAAGb,yBAAM,CAACC,GAAG,8IAIvC;AAED,IAAMa,YAAY,GAAGd,yBAAM,CAACC,GAAG,qPAW9B;AAED,IAAMc,aAAa,gBAAGC,KAAK,CAACC,UAAU,CAAwC,gBAWIC,GAAG,EAAK;EAAA,IAVTC,WAAW,QAAXA,WAAW;IACXC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPf,cAAc,QAAdA,cAAc;IACdgB,QAAQ,QAARA,QAAQ;IACRC,mBAAmB,QAAnBA,mBAAmB;IACnBC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAEtF,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACvB,OACGT,WAAW,iBACV,sBAAC,YAAY;MAAA,wBACX;QAAK,GAAG,EAAEA;MAAY,EAAE,eACxB,qBAAC,eAAe,KAAE;IAAA,EAErB,IACAE,QAAQ,iBACP,qBAAC,kBAAU;MAAC,SAAS,EAAC,UAAU;MAAC,SAAS,EAAEQ,0BAAkB,CAACC,IAAK;MACxD,KAAK,EAAEP,QAAQ,GAAGrB,QAAM,CAACU,WAAW,GAAGV,QAAM,CAAC6B,KAAM;MAAA,UAC7DV;IAAQ,EAEX,iBAAI;MAAA,UAAGD;IAAI,EAAI;EAErB,CAAC;EAED,oBACE,qBAAC,sBAAsB;IAAC,cAAc,EAAEb,cAAe;IAAA,uBACrD,sBAAC,YAAU;MAAC,GAAG,EAAEW,GAAI;MACT,SAAS,EAAEO,SAAU;MACrB,QAAQ,EAAEF,QAAS;MACnB,MAAM,EAAED,OAAQ;MAChB,OAAO,EAAC,SAAS;MACjB,QAAQ,EAAEI,QAAS;MACnB,KAAK,EAAC,UAAU;MAChB,cAAc,EAAEnB;IAAe,GAC3BoB,IAAI;MAAA,WACjBC,UAAU,EAAE,EACZJ,mBAAmB,iBAClB,qBAAC,qBAAqB;QAAA,uBACpB,qBAAC,gCAAe;UAAC,IAAI,EAAEQ,MAAI,CAACC,MAAO;UAAC,OAAO,EAAET;QAAoB;MAAE,EAEtE;IAAA;EACU,EACU;AAE7B,CAAC,CAAC;AAAC;EApIDL,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,OAAO;EACPE,mBAAmB,4BAAG,UAAU,EAAG,UAAU;EAC7CjB,cAAc;AAAA;AAAA,eAiIDQ,aAAa;AAAA"}

package/dist/ProfileButton/ProfileButton.js

@@ -9,7 +9,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import * as React from 'react';
 import styled from 'styled-components';
 import { COLORS, IconButton, Size } from '..';
-import { IconButtonContent, StyledPrimaryIconButton } from '../Button/Iconbutton';
+import { IconButtonContentStyles, StyledPrimaryIconButton } from '../Button/Iconbutton';
 import { NotificationDot } from '../NotificationDot';
 import { BREAKPOINTS, ComponentS, ComponentTextStyle } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -18,7 +18,7 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 var PortraitOverlay = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"])), COLORS.black);
 export var ProfileButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ", " {\n    display: ", ";\n\n    ", " {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"])), StyledPrimaryIconButton, function (props) {
   return props.hideOnLowWidth ? 'none' : 'inline';
-}, BREAKPOINTS.MEDIUM, IconButtonContent, COLORS.neutral_100, COLORS.neutral_300, PortraitOverlay, PortraitOverlay);
+}, BREAKPOINTS.MEDIUM, IconButtonContentStyles, COLORS.neutral_100, COLORS.neutral_300, PortraitOverlay, PortraitOverlay);
 var NotificationContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"])));
 var ImageWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n"])));
 var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {

package/dist/ProfileButton/ProfileButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProfileButton.js","names":["React","styled","COLORS","IconButton","Size","IconButtonContent","StyledPrimaryIconButton","NotificationDot","BREAKPOINTS","ComponentS","ComponentTextStyle","PortraitOverlay","div","black","ProfileButtonContainer","props","hideOnLowWidth","MEDIUM","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","renderIcon","Bold","white","Medium"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\nexport type ProfileButtonProps = {\n  portraitSrc?: string;\n  icon?: React.ReactNode;\n  initials?: string;\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  notificationVariant?: 'positive' | 'critical';\n  hideOnLowWidth?: boolean;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\n\nconst PortraitOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ${COLORS.black};\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n`;\n\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ${StyledPrimaryIconButton} {\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n    ${BREAKPOINTS.MEDIUM} {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ${IconButtonContent} {\n        background-color: ${COLORS.neutral_100};\n\n        svg, svg path {\n          fill: ${COLORS.neutral_300};\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ${PortraitOverlay} {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ${PortraitOverlay} {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n`;\n\nconst NotificationContainer = styled.div`\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n                                                                                 portraitSrc,\n                                                                                 icon,\n                                                                                 initials,\n                                                                                 onClick,\n                                                                                 hideOnLowWidth,\n                                                                                 disabled,\n                                                                                 notificationVariant,\n                                                                                 className,\n                                                                                 tabIndex,\n                                                                                 ...rest\n                                                                               }, ref) => {\n  const renderIcon = () => {\n    return (\n      (portraitSrc && (\n        <ImageWrapper>\n          <img src={portraitSrc}/>\n          <PortraitOverlay/>\n        </ImageWrapper>\n      )) ||\n      (initials && (\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n                    color={disabled ? COLORS.neutral_300 : COLORS.white}>\n          {initials}\n        </ComponentS>\n      )) || <>{icon}</>\n    );\n  };\n\n  return (\n    <ProfileButtonContainer hideOnLowWidth={hideOnLowWidth}>\n      <IconButton ref={ref}\n                  className={className}\n                  disabled={disabled}\n                  action={onClick}\n                  variant=\"primary\"\n                  tabIndex={tabIndex}\n                  shape=\"circular\"\n                  hideOnLowWidth={hideOnLowWidth}\n                  {...rest}>\n        {renderIcon()}\n        {notificationVariant && (\n          <NotificationContainer>\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n          </NotificationContainer>\n        )}\n      </IconButton>\n    </ProfileButtonContainer>\n  );\n});\n\nexport default ProfileButton;\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,UAAU,EAAEC,IAAI,QAAO,IAAI;AAC3C,SAAQC,iBAAiB,EAAEC,uBAAuB,QAAO,sBAAsB;AAC/E,SAAQC,eAAe,QAAO,oBAAoB;AAClD,SAAQC,WAAW,EAAEC,UAAU,EAAEC,kBAAkB,QAAO,WAAW;AAAC;AAAA;AAAA;AAWtE,IAAMC,eAAe,GAAGV,MAAM,CAACW,GAAG,4NAIZV,MAAM,CAACW,KAAK,CAKjC;AAED,OAAO,IAAMC,sBAAsB,GAAGb,MAAM,CAACW,GAAG,gvBAM5CN,uBAAuB,EACZ,UAAAS,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC,EAE5DR,WAAW,CAACS,MAAM,EAShBZ,iBAAiB,EACGH,MAAM,CAACgB,WAAW,EAG5BhB,MAAM,CAACiB,WAAW,EAO5BR,eAAe,EAQfA,eAAe,CAMtB;AAED,IAAMS,qBAAqB,GAAGnB,MAAM,CAACW,GAAG,gIAIvC;AAED,IAAMS,YAAY,GAAGpB,MAAM,CAACW,GAAG,uOAW9B;AAED,IAAMU,aAAa,gBAAGtB,KAAK,CAACuB,UAAU,CAAwC,gBAWIC,GAAG,EAAK;EAAA,IAVTC,WAAW,QAAXA,WAAW;IACXC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPZ,cAAc,QAAdA,cAAc;IACda,QAAQ,QAARA,QAAQ;IACRC,mBAAmB,QAAnBA,mBAAmB;IACnBC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAEtF,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACvB,OACGT,WAAW,iBACV,MAAC,YAAY;MAAA,wBACX;QAAK,GAAG,EAAEA;MAAY,EAAE,eACxB,KAAC,eAAe,KAAE;IAAA,EAErB,IACAE,QAAQ,iBACP,KAAC,UAAU;MAAC,SAAS,EAAC,UAAU;MAAC,SAAS,EAAEjB,kBAAkB,CAACyB,IAAK;MACxD,KAAK,EAAEN,QAAQ,GAAG3B,MAAM,CAACiB,WAAW,GAAGjB,MAAM,CAACkC,KAAM;MAAA,UAC7DT;IAAQ,EAEX,iBAAI;MAAA,UAAGD;IAAI,EAAI;EAErB,CAAC;EAED,oBACE,KAAC,sBAAsB;IAAC,cAAc,EAAEV,cAAe;IAAA,uBACrD,MAAC,UAAU;MAAC,GAAG,EAAEQ,GAAI;MACT,SAAS,EAAEO,SAAU;MACrB,QAAQ,EAAEF,QAAS;MACnB,MAAM,EAAED,OAAQ;MAChB,OAAO,EAAC,SAAS;MACjB,QAAQ,EAAEI,QAAS;MACnB,KAAK,EAAC,UAAU;MAChB,cAAc,EAAEhB;IAAe,GAC3BiB,IAAI;MAAA,WACjBC,UAAU,EAAE,EACZJ,mBAAmB,iBAClB,KAAC,qBAAqB;QAAA,uBACpB,KAAC,eAAe;UAAC,IAAI,EAAE1B,IAAI,CAACiC,MAAO;UAAC,OAAO,EAAEP;QAAoB;MAAE,EAEtE;IAAA;EACU,EACU;AAE7B,CAAC,CAAC;AAAC;EApIDL,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,OAAO;EACPE,mBAAmB,aAAG,UAAU,EAAG,UAAU;EAC7Cd,cAAc;AAAA;AAiIhB,eAAeM,aAAa"}
+{"version":3,"file":"ProfileButton.js","names":["React","styled","COLORS","IconButton","Size","IconButtonContentStyles","StyledPrimaryIconButton","NotificationDot","BREAKPOINTS","ComponentS","ComponentTextStyle","PortraitOverlay","div","black","ProfileButtonContainer","props","hideOnLowWidth","MEDIUM","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","renderIcon","Bold","white","Medium"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContentStyles, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\nexport type ProfileButtonProps = {\n  portraitSrc?: string;\n  icon?: React.ReactNode;\n  initials?: string;\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  notificationVariant?: 'positive' | 'critical';\n  hideOnLowWidth?: boolean;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\n\nconst PortraitOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ${COLORS.black};\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n`;\n\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ${StyledPrimaryIconButton} {\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n    ${BREAKPOINTS.MEDIUM} {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ${IconButtonContentStyles} {\n        background-color: ${COLORS.neutral_100};\n\n        svg, svg path {\n          fill: ${COLORS.neutral_300};\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ${PortraitOverlay} {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ${PortraitOverlay} {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n`;\n\nconst NotificationContainer = styled.div`\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n                                                                                 portraitSrc,\n                                                                                 icon,\n                                                                                 initials,\n                                                                                 onClick,\n                                                                                 hideOnLowWidth,\n                                                                                 disabled,\n                                                                                 notificationVariant,\n                                                                                 className,\n                                                                                 tabIndex,\n                                                                                 ...rest\n                                                                               }, ref) => {\n  const renderIcon = () => {\n    return (\n      (portraitSrc && (\n        <ImageWrapper>\n          <img src={portraitSrc}/>\n          <PortraitOverlay/>\n        </ImageWrapper>\n      )) ||\n      (initials && (\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n                    color={disabled ? COLORS.neutral_300 : COLORS.white}>\n          {initials}\n        </ComponentS>\n      )) || <>{icon}</>\n    );\n  };\n\n  return (\n    <ProfileButtonContainer hideOnLowWidth={hideOnLowWidth}>\n      <IconButton ref={ref}\n                  className={className}\n                  disabled={disabled}\n                  action={onClick}\n                  variant=\"primary\"\n                  tabIndex={tabIndex}\n                  shape=\"circular\"\n                  hideOnLowWidth={hideOnLowWidth}\n                  {...rest}>\n        {renderIcon()}\n        {notificationVariant && (\n          <NotificationContainer>\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n          </NotificationContainer>\n        )}\n      </IconButton>\n    </ProfileButtonContainer>\n  );\n});\n\nexport default ProfileButton;\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,MAAM,EAAEC,UAAU,EAAEC,IAAI,QAAO,IAAI;AAC3C,SAAQC,uBAAuB,EAAEC,uBAAuB,QAAO,sBAAsB;AACrF,SAAQC,eAAe,QAAO,oBAAoB;AAClD,SAAQC,WAAW,EAAEC,UAAU,EAAEC,kBAAkB,QAAO,WAAW;AAAC;AAAA;AAAA;AAWtE,IAAMC,eAAe,GAAGV,MAAM,CAACW,GAAG,4NAIZV,MAAM,CAACW,KAAK,CAKjC;AAED,OAAO,IAAMC,sBAAsB,GAAGb,MAAM,CAACW,GAAG,gvBAM5CN,uBAAuB,EACZ,UAAAS,KAAK;EAAA,OAAKA,KAAK,CAACC,cAAc,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC,EAE5DR,WAAW,CAACS,MAAM,EAShBZ,uBAAuB,EACHH,MAAM,CAACgB,WAAW,EAG5BhB,MAAM,CAACiB,WAAW,EAO5BR,eAAe,EAQfA,eAAe,CAMtB;AAED,IAAMS,qBAAqB,GAAGnB,MAAM,CAACW,GAAG,gIAIvC;AAED,IAAMS,YAAY,GAAGpB,MAAM,CAACW,GAAG,uOAW9B;AAED,IAAMU,aAAa,gBAAGtB,KAAK,CAACuB,UAAU,CAAwC,gBAWIC,GAAG,EAAK;EAAA,IAVTC,WAAW,QAAXA,WAAW;IACXC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPZ,cAAc,QAAdA,cAAc;IACda,QAAQ,QAARA,QAAQ;IACRC,mBAAmB,QAAnBA,mBAAmB;IACnBC,SAAS,QAATA,SAAS;IACTC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAEtF,IAAMC,UAAU,GAAG,SAAbA,UAAU,GAAS;IACvB,OACGT,WAAW,iBACV,MAAC,YAAY;MAAA,wBACX;QAAK,GAAG,EAAEA;MAAY,EAAE,eACxB,KAAC,eAAe,KAAE;IAAA,EAErB,IACAE,QAAQ,iBACP,KAAC,UAAU;MAAC,SAAS,EAAC,UAAU;MAAC,SAAS,EAAEjB,kBAAkB,CAACyB,IAAK;MACxD,KAAK,EAAEN,QAAQ,GAAG3B,MAAM,CAACiB,WAAW,GAAGjB,MAAM,CAACkC,KAAM;MAAA,UAC7DT;IAAQ,EAEX,iBAAI;MAAA,UAAGD;IAAI,EAAI;EAErB,CAAC;EAED,oBACE,KAAC,sBAAsB;IAAC,cAAc,EAAEV,cAAe;IAAA,uBACrD,MAAC,UAAU;MAAC,GAAG,EAAEQ,GAAI;MACT,SAAS,EAAEO,SAAU;MACrB,QAAQ,EAAEF,QAAS;MACnB,MAAM,EAAED,OAAQ;MAChB,OAAO,EAAC,SAAS;MACjB,QAAQ,EAAEI,QAAS;MACnB,KAAK,EAAC,UAAU;MAChB,cAAc,EAAEhB;IAAe,GAC3BiB,IAAI;MAAA,WACjBC,UAAU,EAAE,EACZJ,mBAAmB,iBAClB,KAAC,qBAAqB;QAAA,uBACpB,KAAC,eAAe;UAAC,IAAI,EAAE1B,IAAI,CAACiC,MAAO;UAAC,OAAO,EAAEP;QAAoB;MAAE,EAEtE;IAAA;EACU,EACU;AAE7B,CAAC,CAAC;AAAC;EApIDL,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,OAAO;EACPE,mBAAmB,aAAG,UAAU,EAAG,UAAU;EAC7Cd,cAAc;AAAA;AAiIhB,eAAeM,aAAa"}

package/dist/Table/Table.cjs

@@ -42,7 +42,8 @@ var Table = function Table(props) {
     _props$collapsed = props.collapsed,
     collapsed = _props$collapsed === void 0 ? true : _props$collapsed,
     collapsedRows = props.collapsedRows,
-    rowsPerPageLabel = props.rowsPerPageLabel;
+    rowsPerPageLabel = props.rowsPerPageLabel,
+    loaderZIndex = props.loaderZIndex;
 
   // States used within the component
   var _React$useState = React.useState(10),
@@ -61,7 +62,7 @@ var Table = function Table(props) {
     _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
     currentPage = _React$useState8[0],
     setCurrentPage = _React$useState8[1];
-  var _React$useState9 = React.useState(sortProps),
+  var _React$useState9 = React.useState(),
     _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
     sort = _React$useState10[0],
     setSort = _React$useState10[1];
@@ -90,7 +91,12 @@ var Table = function Table(props) {
     selected = _React$useState22[0],
     setSelected = _React$useState22[1];
   React.useEffect(function () {
-    setSort(sortProps);
+    var _sortProps$column, _sortProps$direction;
+    setSort({
+      column: (_sortProps$column = sortProps === null || sortProps === void 0 ? void 0 : sortProps.column) !== null && _sortProps$column !== void 0 ? _sortProps$column : '',
+      direction: (_sortProps$direction = sortProps === null || sortProps === void 0 ? void 0 : sortProps.direction) !== null && _sortProps$direction !== void 0 ? _sortProps$direction : 'asc',
+      allowClearingSort: (sortProps === null || sortProps === void 0 ? void 0 : sortProps.allowClearingSort) === undefined ? true : sortProps.allowClearingSort
+    });
   }, [sortProps]);
   React.useEffect(function () {
     setSelected(props.selectedRows || (multiSelect ? [] : undefined));
@@ -228,7 +234,7 @@ var Table = function Table(props) {
       columnKey = column.key;
       sortDirection = 'asc';
     } else {
-      if ((sort === null || sort === void 0 ? void 0 : sort.direction) === 'desc') {
+      if ((sort === null || sort === void 0 ? void 0 : sort.direction) === 'desc' && sort !== null && sort !== void 0 && sort.allowClearingSort) {
         columnKey = '';
         sortDirection = undefined;
       } else {
@@ -236,9 +242,14 @@ var Table = function Table(props) {
         sortDirection = sort.direction === 'asc' ? 'desc' : 'asc';
       }
     }
-    if (columnKey == '') setSort(undefined);else setSort({
+    if (columnKey == '') setSort({
+      column: '',
+      direction: 'asc',
+      allowClearingSort: sort === null || sort === void 0 ? void 0 : sort.allowClearingSort
+    });else setSort({
       column: columnKey,
-      direction: sortDirection
+      direction: sortDirection,
+      allowClearingSort: sort === null || sort === void 0 ? void 0 : sort.allowClearingSort
     });
     remoteOperations && onTriggerSortingChange && onTriggerSortingChange(columnKey, sortDirection);
   };
@@ -368,6 +379,7 @@ var Table = function Table(props) {
       nextPage: nextPage,
       prevPage: previousPage
     })), showLoadingIndicator && /*#__PURE__*/(0, _jsxRuntime.jsx)(_TableStyles.StyledTableSpinner, {
+      zindex: loaderZIndex,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.LoadingIndicator, {
         size: _types.Size.Medium
       })

package/dist/Table/Table.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.cjs","names":["Table","props","onPreviousPageClick","onNextPageClick","onRowsPerPageChange","onTriggerSortingChange","columns","rows","remoteOperations","pagination","showLoadingIndicator","selectable","multiSelect","keyExpr","sortProps","accordion","collapsed","collapsedRows","rowsPerPageLabel","React","useState","rowsPerPage","setRowsPerPage","filteredRows","setFilteredRows","currentPageRows","setCurrentPageRows","currentPage","setCurrentPage","sort","setSort","from","setFrom","to","setTo","total","setTotal","isCollapsed","setIsCollapsed","selectAllState","setSelectAllState","undefined","selected","setSelected","useEffect","selectedRows","currentList","map","row","count","filter","item","includes","length","filterAndSortRows","tmpFilteredRows","matchFilterCriteria","column","filterValue","key","toLowerCase","indexOf","direction","a","b","rowsFrom","rowsTo","slice","sortTableColumn","columnKey","sortDirection","previousPage","nextPage","changeRowsPerPage","value","onRowClick","selectedText","window","getSelection","toString","currentSelection","existing","splice","onSelectionChange","onSelectAllClick","border","Size","Medium"],"sources":["../../src/Table/Table.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {Size} from '../types'\n\n/**\n * Import custom styles.\n */\nimport {StyledTable, StyledTableSpinner, TableWrapper} from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport {TableProps, TableColumn, TableSortingDirection, TableSortProps} from './TableTypes';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport TableHeader from './TableHeaders';\nimport TableFooter from './TableFooter';\nimport TableBody from './TableBody';\n\nconst Table: React.FunctionComponent<TableProps> = (props: TableProps) => {\n  let {\n    onPreviousPageClick,\n    onNextPageClick,\n    onRowsPerPageChange,\n    onTriggerSortingChange,\n    columns,\n    rows,\n    remoteOperations,\n    pagination,\n    showLoadingIndicator,\n    selectable,\n    multiSelect,\n    keyExpr,\n    sortProps,\n    accordion,\n    collapsed = true,\n    collapsedRows,\n    rowsPerPageLabel\n  } = props;\n\n  // States used within the component\n  const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);\n  const [filteredRows, setFilteredRows] = React.useState<any[]>([]);\n  const [currentPageRows, setCurrentPageRows] = React.useState<any[]>([]);\n  const [currentPage, setCurrentPage] = React.useState<number>(1);\n  const [sort, setSort] = React.useState<TableSortProps | undefined>(sortProps);\n  const [from, setFrom] = React.useState<number>();\n  const [to, setTo] = React.useState<number>();\n  const [total, setTotal] = React.useState<number>();\n\n  const [isCollapsed, setIsCollapsed] = React.useState(true);\n\n  const [selectAllState, setSelectAllState] = React.useState<'all' | 'some' | 'none'>('none');\n\n  const [selected, setSelected] = React.useState<any | any[]>(multiSelect ? [] : undefined);\n\n  React.useEffect(() => {\n    setSort(sortProps);\n  }, [sortProps])\n\n  React.useEffect(() => {\n    setSelected(props.selectedRows || (multiSelect ? [] : undefined))\n  }, [props.selectedRows, multiSelect])\n\n  /**\n   * update select all checkbox state\n   */\n  React.useEffect(() => {\n    if (multiSelect) {\n      const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n      const count = selected.filter((item: any) => currentList.includes(item)).length;\n\n      setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');\n    }\n  }, [currentPageRows, multiSelect, selected, keyExpr])\n\n  /**\n   * Takes care of remote pagination.\n   * Works only in case remote pagination is set to true.\n   */\n  React.useEffect(() => {\n    if (remoteOperations) {\n      setCurrentPageRows(rows);\n\n      // Let's assign pagination values\n      setFrom(pagination?.from);\n      setTo(pagination?.to);\n      setTotal(pagination?.total);\n      setCurrentPage(pagination?.currentPage!);\n      setRowsPerPage(pagination?.rowsPerPage!);\n    }\n  }, [remoteOperations, pagination, rows]);\n\n  /**\n   * Sets number of rows to display when accordion.\n   */\n  React.useEffect(() => {\n    if (!accordion) return;\n\n    setRowsPerPage(isCollapsed ? collapsedRows || 10 : rows.length);\n  }, [rows, accordion, collapsedRows, isCollapsed])\n\n  React.useEffect(() => {\n    if (!accordion) return;\n\n    setIsCollapsed(!!collapsed);\n  }, [accordion, collapsed])\n\n  /**\n   * Filters out a rows by specific column filters and sorts them if any sorting is set.\n   * @returns Filtered and sorted rows.\n   */\n  const filterAndSortRows = (): any[] => {\n    let tmpFilteredRows = rows.filter((row) => {\n      // Let's start with matched filter criteria\n      let matchFilterCriteria = true;\n\n      // Let's go through columns\n      for (const column of columns) {\n        // Let's check if filter value is specified for the column\n        // And if it doesn't match the current row column value\n        // Then let's update match filter criteria to failed\n        if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {\n          matchFilterCriteria = false;\n        }\n      }\n\n      // Let's return row only in case match filter criteria succeeds\n      if (matchFilterCriteria) {\n        return row;\n      }\n    });\n\n    // Let's apply sorting if needed\n    if (!!sort?.column && !!sort?.direction) {\n      // Let's sort the rows\n      tmpFilteredRows.sort((a, b) => {\n        if (a[sort.column!] > b[sort.column!]) {\n          return sort.direction! === 'asc' ? 1 : -1;\n        } else if (a[sort.column!] < b[sort.column!]) {\n          return sort.direction! === 'asc' ? -1 : 1;\n        } else {\n          return 0;\n        }\n      });\n    }\n\n    // Let's return filtered rows\n    return tmpFilteredRows;\n  };\n\n  /**\n   * Takes care of local pagination.\n   * Works only in case remote pagination is not defined or is set to false.\n   */\n  React.useEffect(() => {\n    if (!remoteOperations) {\n      // Let's retrieve temporary filtered rows and update globally filtered rows\n      const tmpFilteredRows = filterAndSortRows();\n      setFilteredRows(tmpFilteredRows);\n      setTotal(tmpFilteredRows.length);\n\n      // Assign rows from and rows to\n      const rowsFrom = (currentPage - 1) * rowsPerPage;\n      const rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;\n\n      // Set from and to values\n      setFrom(rowsFrom + 1);\n      setTo(rowsTo);\n\n      // Filter out the rows\n      setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));\n    }\n  }, [rowsPerPage, rows, currentPage, columns, sort, remoteOperations]);\n\n\n  /**\n   * Applies a specific sorting to a column.\n   * If no sorting exists, then applies ascending initially\n   * @param column - Column to which sorting should be applied.\n   */\n  const sortTableColumn = (column: TableColumn): void => {\n    let columnKey = '';\n    let sortDirection: TableSortingDirection | undefined = undefined;\n\n    if (sort?.column !== column.key) {\n      columnKey = column.key;\n      sortDirection = 'asc';\n    } else {\n      if (sort?.direction === 'desc') {\n        columnKey = '';\n        sortDirection = undefined;\n      } else {\n        columnKey = sort.column;\n        sortDirection = sort.direction === 'asc' ? 'desc' : 'asc';\n      }\n    }\n\n    if(columnKey == '')\n      setSort(undefined);\n    else\n      setSort({column: columnKey, direction: sortDirection!});\n\n    remoteOperations && onTriggerSortingChange && onTriggerSortingChange(columnKey, sortDirection);\n  };\n\n  /**\n   * Navigates user back to the previous page and updates the current table page.\n   */\n  const previousPage = () => {\n    if (remoteOperations) {\n      // Let's inform parent component about page change\n      if (onPreviousPageClick) {\n        onPreviousPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);\n    }\n  };\n\n  /**\n   * Navigates user to the next page and updates the current table page.\n   */\n  const nextPage = () => {\n    if (remoteOperations) {\n      // Let's inform parent component about page change\n      if (onNextPageClick) {\n        onNextPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);\n    }\n  };\n\n  /**\n   * Updates the rows per page value and refreshes the table content accordingly.\n   * @param value - Newly selected rows per page value.\n   */\n  const changeRowsPerPage = (value: number) => {\n    // Let's check if we are using remote pagination\n    if (remoteOperations) {\n      // Inform parent component about rows per page change\n      if (onRowsPerPageChange) {\n        onRowsPerPageChange(value);\n      }\n    } else {\n      // Let's reset current page to 1\n      setCurrentPage(1);\n    }\n\n    // Let's set rows per page\n    setRowsPerPage(value);\n  };\n\n\n  /**\n   * Function which is called when a mouse click happens on a row to pass data to the parent component.\n   * @param row - Row in which the link is located.\n   */\n  const onRowClick = (row: any): void => {\n    const selectedText = window?.getSelection()?.toString();\n\n    if (selectedText?.length === 0 && selectable) {\n      const value = keyExpr ? row[keyExpr] : row;\n      let currentSelection = value;\n      if (!!multiSelect) {\n        const existing = selected?.indexOf(value);\n        if (existing > -1) {\n          currentSelection = [...selected];\n          currentSelection.splice(existing, 1);\n        } else {\n          currentSelection = [...selected, currentSelection];\n        }\n      }\n\n      setSelected(currentSelection)\n      props.onSelectionChange && props.onSelectionChange(currentSelection);\n    }\n  };\n\n  /**\n   * Function which is called when user clicks checkbox to select or deselect all rows.\n   */\n  const onSelectAllClick = () => {\n    const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n\n    switch (selectAllState) {\n      case 'all':\n        setSelected([...selected].filter(item => !currentList.includes(item)));\n        setSelectAllState('none');\n        break;\n      case 'none':\n        setSelected([...selected, ...currentList]);\n        setSelectAllState('all');\n        break;\n      case 'some':\n        setSelected([...selected, ...currentList.filter(item => !selected.includes(item))]);\n        setSelectAllState('all');\n        break;\n    }\n  };\n\n  /**\n   * Return Table component.\n   */\n  return (\n    <TableWrapper className={props.border ? 'border' : undefined}>\n      <TableHeader {...props}/>\n      <TableBody {...props}\n                 currentPageRows={currentPageRows}\n                 selected={selected}\n                 onRowClick={onRowClick}\n                 sortByColumn={sortTableColumn}\n                 onSelectAllClick={onSelectAllClick}\n                 sortProps={sort}\n                 selectAllState={selectAllState}/>\n      <TableFooter {...props}\n                   onRowsPerPageChange={changeRowsPerPage}\n                   rowsPerPage={rowsPerPage}\n                   setIsCollapsed={setIsCollapsed}\n                   isCollapsed={isCollapsed}\n                   from={from}\n                   to={to}\n                   total={total}\n                   nextPage={nextPage}\n                   prevPage={previousPage}/>\n      {showLoadingIndicator && (\n        <StyledTableSpinner>\n          <LoadingIndicator size={Size.Medium}/>\n        </StyledTableSpinner>\n      )}\n    </TableWrapper>\n  );\n};\n\nexport default Table;\n"],"mappings":";;;;;;;;;;;AAGA;AAKA;AAKA;AAMA;AACA;AACA;AACA;AAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpC,IAAMA,KAA0C,GAAG,SAA7CA,KAA0C,CAAIC,KAAiB,EAAK;EACxE,IACEC,mBAAmB,GAiBjBD,KAAK,CAjBPC,mBAAmB;IACnBC,eAAe,GAgBbF,KAAK,CAhBPE,eAAe;IACfC,mBAAmB,GAejBH,KAAK,CAfPG,mBAAmB;IACnBC,sBAAsB,GAcpBJ,KAAK,CAdPI,sBAAsB;IACtBC,OAAO,GAaLL,KAAK,CAbPK,OAAO;IACPC,IAAI,GAYFN,KAAK,CAZPM,IAAI;IACJC,gBAAgB,GAWdP,KAAK,CAXPO,gBAAgB;IAChBC,UAAU,GAURR,KAAK,CAVPQ,UAAU;IACVC,oBAAoB,GASlBT,KAAK,CATPS,oBAAoB;IACpBC,UAAU,GAQRV,KAAK,CARPU,UAAU;IACVC,WAAW,GAOTX,KAAK,CAPPW,WAAW;IACXC,OAAO,GAMLZ,KAAK,CANPY,OAAO;IACPC,SAAS,GAKPb,KAAK,CALPa,SAAS;IACTC,SAAS,GAIPd,KAAK,CAJPc,SAAS;IAAA,mBAIPd,KAAK,CAHPe,SAAS;IAATA,SAAS,iCAAG,IAAI;IAChBC,aAAa,GAEXhB,KAAK,CAFPgB,aAAa;IACbC,gBAAgB,GACdjB,KAAK,CADPiB,gBAAgB;;EAGlB;EACA,sBAAsCC,KAAK,CAACC,QAAQ,CAAS,EAAE,CAAC;IAAA;IAAzDC,WAAW;IAAEC,cAAc;EAClC,uBAAwCH,KAAK,CAACC,QAAQ,CAAQ,EAAE,CAAC;IAAA;IAA1DG,YAAY;IAAEC,eAAe;EACpC,uBAA8CL,KAAK,CAACC,QAAQ,CAAQ,EAAE,CAAC;IAAA;IAAhEK,eAAe;IAAEC,kBAAkB;EAC1C,uBAAsCP,KAAK,CAACC,QAAQ,CAAS,CAAC,CAAC;IAAA;IAAxDO,WAAW;IAAEC,cAAc;EAClC,uBAAwBT,KAAK,CAACC,QAAQ,CAA6BN,SAAS,CAAC;IAAA;IAAtEe,IAAI;IAAEC,OAAO;EACpB,wBAAwBX,KAAK,CAACC,QAAQ,EAAU;IAAA;IAAzCW,IAAI;IAAEC,OAAO;EACpB,wBAAoBb,KAAK,CAACC,QAAQ,EAAU;IAAA;IAArCa,EAAE;IAAEC,KAAK;EAChB,wBAA0Bf,KAAK,CAACC,QAAQ,EAAU;IAAA;IAA3Ce,KAAK;IAAEC,QAAQ;EAEtB,wBAAsCjB,KAAK,CAACC,QAAQ,CAAC,IAAI,CAAC;IAAA;IAAnDiB,WAAW;IAAEC,cAAc;EAElC,wBAA4CnB,KAAK,CAACC,QAAQ,CAA0B,MAAM,CAAC;IAAA;IAApFmB,cAAc;IAAEC,iBAAiB;EAExC,wBAAgCrB,KAAK,CAACC,QAAQ,CAAcR,WAAW,GAAG,EAAE,GAAG6B,SAAS,CAAC;IAAA;IAAlFC,QAAQ;IAAEC,WAAW;EAE5BxB,KAAK,CAACyB,SAAS,CAAC,YAAM;IACpBd,OAAO,CAAChB,SAAS,CAAC;EACpB,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEfK,KAAK,CAACyB,SAAS,CAAC,YAAM;IACpBD,WAAW,CAAC1C,KAAK,CAAC4C,YAAY,KAAKjC,WAAW,GAAG,EAAE,GAAG6B,SAAS,CAAC,CAAC;EACnE,CAAC,EAAE,CAACxC,KAAK,CAAC4C,YAAY,EAAEjC,WAAW,CAAC,CAAC;;EAErC;AACF;AACA;EACEO,KAAK,CAACyB,SAAS,CAAC,YAAM;IACpB,IAAIhC,WAAW,EAAE;MACf,IAAMkC,WAAW,GAAGrB,eAAe,CAACsB,GAAG,CAAC,UAAAC,GAAG;QAAA,OAAInC,OAAO,GAAGmC,GAAG,CAACnC,OAAO,CAAC,GAAGmC,GAAG;MAAA,EAAC;MAC5E,IAAMC,KAAK,GAAGP,QAAQ,CAACQ,MAAM,CAAC,UAACC,IAAS;QAAA,OAAKL,WAAW,CAACM,QAAQ,CAACD,IAAI,CAAC;MAAA,EAAC,CAACE,MAAM;MAE/Eb,iBAAiB,CAACS,KAAK,KAAKH,WAAW,CAACO,MAAM,GAAG,KAAK,GAAGJ,KAAK,GAAG,CAAC,GAAG,MAAM,GAAG,MAAM,CAAC;IACvF;EACF,CAAC,EAAE,CAACxB,eAAe,EAAEb,WAAW,EAAE8B,QAAQ,EAAE7B,OAAO,CAAC,CAAC;;EAErD;AACF;AACA;AACA;EACEM,KAAK,CAACyB,SAAS,CAAC,YAAM;IACpB,IAAIpC,gBAAgB,EAAE;MACpBkB,kBAAkB,CAACnB,IAAI,CAAC;;MAExB;MACAyB,OAAO,CAACvB,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEsB,IAAI,CAAC;MACzBG,KAAK,CAACzB,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEwB,EAAE,CAAC;MACrBG,QAAQ,CAAC3B,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAE0B,KAAK,CAAC;MAC3BP,cAAc,CAACnB,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEkB,WAAW,CAAE;MACxCL,cAAc,CAACb,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEY,WAAW,CAAE;IAC1C;EACF,CAAC,EAAE,CAACb,gBAAgB,EAAEC,UAAU,EAAEF,IAAI,CAAC,CAAC;;EAExC;AACF;AACA;EACEY,KAAK,CAACyB,SAAS,CAAC,YAAM;IACpB,IAAI,CAAC7B,SAAS,EAAE;IAEhBO,cAAc,CAACe,WAAW,GAAGpB,aAAa,IAAI,EAAE,GAAGV,IAAI,CAAC8C,MAAM,CAAC;EACjE,CAAC,EAAE,CAAC9C,IAAI,EAAEQ,SAAS,EAAEE,aAAa,EAAEoB,WAAW,CAAC,CAAC;EAEjDlB,KAAK,CAACyB,SAAS,CAAC,YAAM;IACpB,IAAI,CAAC7B,SAAS,EAAE;IAEhBuB,cAAc,CAAC,CAAC,CAACtB,SAAS,CAAC;EAC7B,CAAC,EAAE,CAACD,SAAS,EAAEC,SAAS,CAAC,CAAC;;EAE1B;AACF;AACA;AACA;EACE,IAAMsC,iBAAiB,GAAG,SAApBA,iBAAiB,GAAgB;IACrC,IAAIC,eAAe,GAAGhD,IAAI,CAAC2C,MAAM,CAAC,UAACF,GAAG,EAAK;MACzC;MACA,IAAIQ,mBAAmB,GAAG,IAAI;;MAE9B;MAAA,2CACqBlD,OAAO;QAAA;MAAA;QAA5B,oDAA8B;UAAA,IAAnBmD,MAAM;UACf;UACA;UACA;UACA,IAAIA,MAAM,CAACC,WAAW,IAAIV,GAAG,CAACS,MAAM,CAACE,GAAG,CAAC,CAACC,WAAW,EAAE,CAACC,OAAO,CAACJ,MAAM,CAACC,WAAW,CAACE,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE;YACxGJ,mBAAmB,GAAG,KAAK;UAC7B;QACF;;QAEA;MAAA;QAAA;MAAA;QAAA;MAAA;MACA,IAAIA,mBAAmB,EAAE;QACvB,OAAOR,GAAG;MACZ;IACF,CAAC,CAAC;;IAEF;IACA,IAAI,CAAC,EAACnB,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAE4B,MAAM,KAAI,CAAC,EAAC5B,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAEiC,SAAS,GAAE;MACvC;MACAP,eAAe,CAAC1B,IAAI,CAAC,UAACkC,CAAC,EAAEC,CAAC,EAAK;QAC7B,IAAID,CAAC,CAAClC,IAAI,CAAC4B,MAAM,CAAE,GAAGO,CAAC,CAACnC,IAAI,CAAC4B,MAAM,CAAE,EAAE;UACrC,OAAO5B,IAAI,CAACiC,SAAS,KAAM,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;QAC3C,CAAC,MAAM,IAAIC,CAAC,CAAClC,IAAI,CAAC4B,MAAM,CAAE,GAAGO,CAAC,CAACnC,IAAI,CAAC4B,MAAM,CAAE,EAAE;UAC5C,OAAO5B,IAAI,CAACiC,SAAS,KAAM,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC;QAC3C,CAAC,MAAM;UACL,OAAO,CAAC;QACV;MACF,CAAC,CAAC;IACJ;;IAEA;IACA,OAAOP,eAAe;EACxB,CAAC;;EAED;AACF;AACA;AACA;EACEpC,KAAK,CAACyB,SAAS,CAAC,YAAM;IACpB,IAAI,CAACpC,gBAAgB,EAAE;MACrB;MACA,IAAM+C,eAAe,GAAGD,iBAAiB,EAAE;MAC3C9B,eAAe,CAAC+B,eAAe,CAAC;MAChCnB,QAAQ,CAACmB,eAAe,CAACF,MAAM,CAAC;;MAEhC;MACA,IAAMY,QAAQ,GAAG,CAACtC,WAAW,GAAG,CAAC,IAAIN,WAAW;MAChD,IAAM6C,MAAM,GAAGD,QAAQ,GAAG5C,WAAW,IAAIkC,eAAe,CAACF,MAAM,GAAGE,eAAe,CAACF,MAAM,GAAGY,QAAQ,GAAG5C,WAAW;;MAEjH;MACAW,OAAO,CAACiC,QAAQ,GAAG,CAAC,CAAC;MACrB/B,KAAK,CAACgC,MAAM,CAAC;;MAEb;MACAxC,kBAAkB,CAAC6B,eAAe,CAACY,KAAK,CAACF,QAAQ,EAAEC,MAAM,CAAC,CAAC;IAC7D;EACF,CAAC,EAAE,CAAC7C,WAAW,EAAEd,IAAI,EAAEoB,WAAW,EAAErB,OAAO,EAAEuB,IAAI,EAAErB,gBAAgB,CAAC,CAAC;;EAGrE;AACF;AACA;AACA;AACA;EACE,IAAM4D,eAAe,GAAG,SAAlBA,eAAe,CAAIX,MAAmB,EAAW;IACrD,IAAIY,SAAS,GAAG,EAAE;IAClB,IAAIC,aAAgD,GAAG7B,SAAS;IAEhE,IAAI,CAAAZ,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAE4B,MAAM,MAAKA,MAAM,CAACE,GAAG,EAAE;MAC/BU,SAAS,GAAGZ,MAAM,CAACE,GAAG;MACtBW,aAAa,GAAG,KAAK;IACvB,CAAC,MAAM;MACL,IAAI,CAAAzC,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEiC,SAAS,MAAK,MAAM,EAAE;QAC9BO,SAAS,GAAG,EAAE;QACdC,aAAa,GAAG7B,SAAS;MAC3B,CAAC,MAAM;QACL4B,SAAS,GAAGxC,IAAI,CAAC4B,MAAM;QACvBa,aAAa,GAAGzC,IAAI,CAACiC,SAAS,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK;MAC3D;IACF;IAEA,IAAGO,SAAS,IAAI,EAAE,EAChBvC,OAAO,CAACW,SAAS,CAAC,CAAC,KAEnBX,OAAO,CAAC;MAAC2B,MAAM,EAAEY,SAAS;MAAEP,SAAS,EAAEQ;IAAc,CAAC,CAAC;IAEzD9D,gBAAgB,IAAIH,sBAAsB,IAAIA,sBAAsB,CAACgE,SAAS,EAAEC,aAAa,CAAC;EAChG,CAAC;;EAED;AACF;AACA;EACE,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;IACzB,IAAI/D,gBAAgB,EAAE;MACpB;MACA,IAAIN,mBAAmB,EAAE;QACvBA,mBAAmB,EAAE;MACvB;IACF,CAAC,MAAM;MACL;MACA0B,cAAc,CAACD,WAAW,GAAG,CAAC,GAAGA,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;IACvD;EACF,CAAC;;EAED;AACF;AACA;EACE,IAAM6C,QAAQ,GAAG,SAAXA,QAAQ,GAAS;IACrB,IAAIhE,gBAAgB,EAAE;MACpB;MACA,IAAIL,eAAe,EAAE;QACnBA,eAAe,EAAE;MACnB;IACF,CAAC,MAAM;MACL;MACAyB,cAAc,CAACD,WAAW,GAAGN,WAAW,IAAIE,YAAY,CAAC8B,MAAM,GAAG1B,WAAW,GAAGA,WAAW,GAAG,CAAC,CAAC;IAClG;EACF,CAAC;;EAED;AACF;AACA;AACA;EACE,IAAM8C,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,KAAa,EAAK;IAC3C;IACA,IAAIlE,gBAAgB,EAAE;MACpB;MACA,IAAIJ,mBAAmB,EAAE;QACvBA,mBAAmB,CAACsE,KAAK,CAAC;MAC5B;IACF,CAAC,MAAM;MACL;MACA9C,cAAc,CAAC,CAAC,CAAC;IACnB;;IAEA;IACAN,cAAc,CAACoD,KAAK,CAAC;EACvB,CAAC;;EAGD;AACF;AACA;AACA;EACE,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAI3B,GAAQ,EAAW;IAAA;IACrC,IAAM4B,YAAY,cAAGC,MAAM,oEAAN,QAAQC,YAAY,EAAE,yDAAtB,qBAAwBC,QAAQ,EAAE;IAEvD,IAAI,CAAAH,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAEvB,MAAM,MAAK,CAAC,IAAI1C,UAAU,EAAE;MAC5C,IAAM+D,KAAK,GAAG7D,OAAO,GAAGmC,GAAG,CAACnC,OAAO,CAAC,GAAGmC,GAAG;MAC1C,IAAIgC,gBAAgB,GAAGN,KAAK;MAC5B,IAAI,CAAC,CAAC9D,WAAW,EAAE;QACjB,IAAMqE,QAAQ,GAAGvC,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEmB,OAAO,CAACa,KAAK,CAAC;QACzC,IAAIO,QAAQ,GAAG,CAAC,CAAC,EAAE;UACjBD,gBAAgB,oCAAOtC,QAAQ,CAAC;UAChCsC,gBAAgB,CAACE,MAAM,CAACD,QAAQ,EAAE,CAAC,CAAC;QACtC,CAAC,MAAM;UACLD,gBAAgB,8CAAOtC,QAAQ,IAAEsC,gBAAgB,EAAC;QACpD;MACF;MAEArC,WAAW,CAACqC,gBAAgB,CAAC;MAC7B/E,KAAK,CAACkF,iBAAiB,IAAIlF,KAAK,CAACkF,iBAAiB,CAACH,gBAAgB,CAAC;IACtE;EACF,CAAC;;EAED;AACF;AACA;EACE,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAgB,GAAS;IAC7B,IAAMtC,WAAW,GAAGrB,eAAe,CAACsB,GAAG,CAAC,UAAAC,GAAG;MAAA,OAAInC,OAAO,GAAGmC,GAAG,CAACnC,OAAO,CAAC,GAAGmC,GAAG;IAAA,EAAC;IAE5E,QAAQT,cAAc;MACpB,KAAK,KAAK;QACRI,WAAW,CAAC,iCAAID,QAAQ,EAAEQ,MAAM,CAAC,UAAAC,IAAI;UAAA,OAAI,CAACL,WAAW,CAACM,QAAQ,CAACD,IAAI,CAAC;QAAA,EAAC,CAAC;QACtEX,iBAAiB,CAAC,MAAM,CAAC;QACzB;MACF,KAAK,MAAM;QACTG,WAAW,4CAAKD,QAAQ,oCAAKI,WAAW,GAAE;QAC1CN,iBAAiB,CAAC,KAAK,CAAC;QACxB;MACF,KAAK,MAAM;QACTG,WAAW,4CAAKD,QAAQ,oCAAKI,WAAW,CAACI,MAAM,CAAC,UAAAC,IAAI;UAAA,OAAI,CAACT,QAAQ,CAACU,QAAQ,CAACD,IAAI,CAAC;QAAA,EAAC,GAAE;QACnFX,iBAAiB,CAAC,KAAK,CAAC;QACxB;IAAM;EAEZ,CAAC;;EAED;AACF;AACA;EACE,oBACE,sBAAC,yBAAY;IAAC,SAAS,EAAEvC,KAAK,CAACoF,MAAM,GAAG,QAAQ,GAAG5C,SAAU;IAAA,wBAC3D,qBAAC,qBAAW,oBAAKxC,KAAK,EAAG,eACzB,qBAAC,kBAAS,kCAAKA,KAAK;MACT,eAAe,EAAEwB,eAAgB;MACjC,QAAQ,EAAEiB,QAAS;MACnB,UAAU,EAAEiC,UAAW;MACvB,YAAY,EAAEP,eAAgB;MAC9B,gBAAgB,EAAEgB,gBAAiB;MACnC,SAAS,EAAEvD,IAAK;MAChB,cAAc,EAAEU;IAAe,GAAE,eAC5C,qBAAC,oBAAW,kCAAKtC,KAAK;MACT,mBAAmB,EAAEwE,iBAAkB;MACvC,WAAW,EAAEpD,WAAY;MACzB,cAAc,EAAEiB,cAAe;MAC/B,WAAW,EAAED,WAAY;MACzB,IAAI,EAAEN,IAAK;MACX,EAAE,EAAEE,EAAG;MACP,KAAK,EAAEE,KAAM;MACb,QAAQ,EAAEqC,QAAS;MACnB,QAAQ,EAAED;IAAa,GAAE,EACrC7D,oBAAoB,iBACnB,qBAAC,+BAAkB;MAAA,uBACjB,qBAAC,kCAAgB;QAAC,IAAI,EAAE4E,WAAI,CAACC;MAAO;IAAE,EAEzC;EAAA,EACY;AAEnB,CAAC;AAAC,eAEavF,KAAK;AAAA"}
+{"version":3,"file":"Table.cjs","names":["Table","props","onPreviousPageClick","onNextPageClick","onRowsPerPageChange","onTriggerSortingChange","columns","rows","remoteOperations","pagination","showLoadingIndicator","selectable","multiSelect","keyExpr","sortProps","accordion","collapsed","collapsedRows","rowsPerPageLabel","loaderZIndex","React","useState","rowsPerPage","setRowsPerPage","filteredRows","setFilteredRows","currentPageRows","setCurrentPageRows","currentPage","setCurrentPage","sort","setSort","from","setFrom","to","setTo","total","setTotal","isCollapsed","setIsCollapsed","selectAllState","setSelectAllState","undefined","selected","setSelected","useEffect","column","direction","allowClearingSort","selectedRows","currentList","map","row","count","filter","item","includes","length","filterAndSortRows","tmpFilteredRows","matchFilterCriteria","filterValue","key","toLowerCase","indexOf","a","b","rowsFrom","rowsTo","slice","sortTableColumn","columnKey","sortDirection","previousPage","nextPage","changeRowsPerPage","value","onRowClick","selectedText","window","getSelection","toString","currentSelection","existing","splice","onSelectionChange","onSelectAllClick","border","Size","Medium"],"sources":["../../src/Table/Table.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {Size} from '../types'\n\n/**\n * Import custom styles.\n */\nimport {StyledTable, StyledTableSpinner, TableWrapper} from './TableStyles';\n\n/**\n * Import custom types.\n */\nimport {TableProps, TableColumn, TableSortingDirection, TableSortProps} from './TableTypes';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport TableHeader from './TableHeaders';\nimport TableFooter from './TableFooter';\nimport TableBody from './TableBody';\n\nconst Table: React.FunctionComponent<TableProps> = (props: TableProps) => {\n  let {\n    onPreviousPageClick,\n    onNextPageClick,\n    onRowsPerPageChange,\n    onTriggerSortingChange,\n    columns,\n    rows,\n    remoteOperations,\n    pagination,\n    showLoadingIndicator,\n    selectable,\n    multiSelect,\n    keyExpr,\n    sortProps,\n    accordion,\n    collapsed = true,\n\n    collapsedRows,\n    rowsPerPageLabel,\n    loaderZIndex\n  } = props;\n\n  // States used within the component\n  const [rowsPerPage, setRowsPerPage] = React.useState<number>(10);\n  const [filteredRows, setFilteredRows] = React.useState<any[]>([]);\n  const [currentPageRows, setCurrentPageRows] = React.useState<any[]>([]);\n  const [currentPage, setCurrentPage] = React.useState<number>(1);\n  const [sort, setSort] = React.useState<TableSortProps | undefined>();\n  const [from, setFrom] = React.useState<number>();\n  const [to, setTo] = React.useState<number>();\n  const [total, setTotal] = React.useState<number>();\n\n  const [isCollapsed, setIsCollapsed] = React.useState(true);\n\n  const [selectAllState, setSelectAllState] = React.useState<'all' | 'some' | 'none'>('none');\n\n  const [selected, setSelected] = React.useState<any | any[]>(multiSelect ? [] : undefined);\n\n  React.useEffect(() => {\n    setSort({\n      column: sortProps?.column ?? '', \n      direction: sortProps?.direction ?? 'asc', \n      allowClearingSort: sortProps?.allowClearingSort === undefined ? true : sortProps.allowClearingSort\n    });\n  }, [sortProps])\n\n  React.useEffect(() => {\n    setSelected(props.selectedRows || (multiSelect ? [] : undefined))\n  }, [props.selectedRows, multiSelect])\n\n  /**\n   * update select all checkbox state\n   */\n  React.useEffect(() => {\n    if (multiSelect) {\n      const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n      const count = selected.filter((item: any) => currentList.includes(item)).length;\n\n      setSelectAllState(count === currentList.length ? 'all' : count > 0 ? 'some' : 'none');\n    }\n  }, [currentPageRows, multiSelect, selected, keyExpr])\n\n  /**\n   * Takes care of remote pagination.\n   * Works only in case remote pagination is set to true.\n   */\n  React.useEffect(() => {\n    if (remoteOperations) {\n      setCurrentPageRows(rows);\n\n      // Let's assign pagination values\n      setFrom(pagination?.from);\n      setTo(pagination?.to);\n      setTotal(pagination?.total);\n      setCurrentPage(pagination?.currentPage!);\n      setRowsPerPage(pagination?.rowsPerPage!);\n    }\n  }, [remoteOperations, pagination, rows]);\n\n  /**\n   * Sets number of rows to display when accordion.\n   */\n  React.useEffect(() => {\n    if (!accordion) return;\n\n    setRowsPerPage(isCollapsed ? collapsedRows || 10 : rows.length);\n  }, [rows, accordion, collapsedRows, isCollapsed])\n\n  React.useEffect(() => {\n    if (!accordion) return;\n\n    setIsCollapsed(!!collapsed);\n  }, [accordion, collapsed])\n\n  /**\n   * Filters out a rows by specific column filters and sorts them if any sorting is set.\n   * @returns Filtered and sorted rows.\n   */\n  const filterAndSortRows = (): any[] => {\n    let tmpFilteredRows = rows.filter((row) => {\n      // Let's start with matched filter criteria\n      let matchFilterCriteria = true;\n\n      // Let's go through columns\n      for (const column of columns) {\n        // Let's check if filter value is specified for the column\n        // And if it doesn't match the current row column value\n        // Then let's update match filter criteria to failed\n        if (column.filterValue && row[column.key].toLowerCase().indexOf(column.filterValue.toLowerCase()) === -1) {\n          matchFilterCriteria = false;\n        }\n      }\n\n      // Let's return row only in case match filter criteria succeeds\n      if (matchFilterCriteria) {\n        return row;\n      }\n    });\n\n    // Let's apply sorting if needed\n    if (!!sort?.column && !!sort?.direction) {\n      // Let's sort the rows\n      tmpFilteredRows.sort((a, b) => {\n        if (a[sort.column!] > b[sort.column!]) {\n          return sort.direction! === 'asc' ? 1 : -1;\n        } else if (a[sort.column!] < b[sort.column!]) {\n          return sort.direction! === 'asc' ? -1 : 1;\n        } else {\n          return 0;\n        }\n      });\n    }\n\n    // Let's return filtered rows\n    return tmpFilteredRows;\n  };\n\n  /**\n   * Takes care of local pagination.\n   * Works only in case remote pagination is not defined or is set to false.\n   */\n  React.useEffect(() => {\n    if (!remoteOperations) {\n      // Let's retrieve temporary filtered rows and update globally filtered rows\n      const tmpFilteredRows = filterAndSortRows();\n      setFilteredRows(tmpFilteredRows);\n      setTotal(tmpFilteredRows.length);\n\n      // Assign rows from and rows to\n      const rowsFrom = (currentPage - 1) * rowsPerPage;\n      const rowsTo = rowsFrom + rowsPerPage >= tmpFilteredRows.length ? tmpFilteredRows.length : rowsFrom + rowsPerPage;\n\n      // Set from and to values\n      setFrom(rowsFrom + 1);\n      setTo(rowsTo);\n\n      // Filter out the rows\n      setCurrentPageRows(tmpFilteredRows.slice(rowsFrom, rowsTo));\n    }\n  }, [rowsPerPage, rows, currentPage, columns, sort, remoteOperations]);\n\n\n  /**\n   * Applies a specific sorting to a column.\n   * If no sorting exists, then applies ascending initially\n   * @param column - Column to which sorting should be applied.\n   */\n  const sortTableColumn = (column: TableColumn): void => {\n    let columnKey = '';\n    let sortDirection: TableSortingDirection | undefined = undefined;\n\n    if (sort?.column !== column.key) {\n      columnKey = column.key;\n      sortDirection = 'asc';\n    } else {\n      if (sort?.direction === 'desc' && sort?.allowClearingSort) {\n        columnKey = '';\n        sortDirection = undefined;\n      } else {\n        columnKey = sort.column;\n        sortDirection = sort.direction === 'asc' ? 'desc' : 'asc';\n      }\n    }\n\n    if(columnKey == '')\n      setSort({ column: '', direction: 'asc', allowClearingSort: sort?.allowClearingSort});\n    else\n      setSort({column: columnKey, direction: sortDirection!, allowClearingSort: sort?.allowClearingSort});\n\n    remoteOperations && onTriggerSortingChange && onTriggerSortingChange(columnKey, sortDirection);\n  };\n\n  /**\n   * Navigates user back to the previous page and updates the current table page.\n   */\n  const previousPage = () => {\n    if (remoteOperations) {\n      // Let's inform parent component about page change\n      if (onPreviousPageClick) {\n        onPreviousPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage > 1 ? currentPage - 1 : 1);\n    }\n  };\n\n  /**\n   * Navigates user to the next page and updates the current table page.\n   */\n  const nextPage = () => {\n    if (remoteOperations) {\n      // Let's inform parent component about page change\n      if (onNextPageClick) {\n        onNextPageClick();\n      }\n    } else {\n      // Let's change the page within the component\n      setCurrentPage(currentPage * rowsPerPage >= filteredRows.length ? currentPage : currentPage + 1);\n    }\n  };\n\n  /**\n   * Updates the rows per page value and refreshes the table content accordingly.\n   * @param value - Newly selected rows per page value.\n   */\n  const changeRowsPerPage = (value: number) => {\n    // Let's check if we are using remote pagination\n    if (remoteOperations) {\n      // Inform parent component about rows per page change\n      if (onRowsPerPageChange) {\n        onRowsPerPageChange(value);\n      }\n    } else {\n      // Let's reset current page to 1\n      setCurrentPage(1);\n    }\n\n    // Let's set rows per page\n    setRowsPerPage(value);\n  };\n\n\n  /**\n   * Function which is called when a mouse click happens on a row to pass data to the parent component.\n   * @param row - Row in which the link is located.\n   */\n  const onRowClick = (row: any): void => {\n    const selectedText = window?.getSelection()?.toString();\n\n    if (selectedText?.length === 0 && selectable) {\n      const value = keyExpr ? row[keyExpr] : row;\n      let currentSelection = value;\n      if (!!multiSelect) {\n        const existing = selected?.indexOf(value);\n        if (existing > -1) {\n          currentSelection = [...selected];\n          currentSelection.splice(existing, 1);\n        } else {\n          currentSelection = [...selected, currentSelection];\n        }\n      }\n\n      setSelected(currentSelection)\n      props.onSelectionChange && props.onSelectionChange(currentSelection);\n    }\n  };\n\n  /**\n   * Function which is called when user clicks checkbox to select or deselect all rows.\n   */\n  const onSelectAllClick = () => {\n    const currentList = currentPageRows.map(row => keyExpr ? row[keyExpr] : row);\n\n    switch (selectAllState) {\n      case 'all':\n        setSelected([...selected].filter(item => !currentList.includes(item)));\n        setSelectAllState('none');\n        break;\n      case 'none':\n        setSelected([...selected, ...currentList]);\n        setSelectAllState('all');\n        break;\n      case 'some':\n        setSelected([...selected, ...currentList.filter(item => !selected.includes(item))]);\n        setSelectAllState('all');\n        break;\n    }\n  };\n\n  /**\n   * Return Table component.\n   */\n  return (\n    <TableWrapper className={props.border ? 'border' : undefined}>\n      <TableHeader {...props}/>\n      <TableBody {...props}\n                 currentPageRows={currentPageRows}\n                 selected={selected}\n                 onRowClick={onRowClick}\n                 sortByColumn={sortTableColumn}\n                 onSelectAllClick={onSelectAllClick}\n                 sortProps={sort}\n                 selectAllState={selectAllState}/>\n      <TableFooter {...props}\n                   onRowsPerPageChange={changeRowsPerPage}\n                   rowsPerPage={rowsPerPage}\n                   setIsCollapsed={setIsCollapsed}\n                   isCollapsed={isCollapsed}\n                   from={from}\n                   to={to}\n                   total={total}\n                   nextPage={nextPage}\n                   prevPage={previousPage}/>\n      {showLoadingIndicator && (\n        <StyledTableSpinner zindex={loaderZIndex}>\n          <LoadingIndicator size={Size.Medium}/>\n        </StyledTableSpinner>\n      )}\n    </TableWrapper>\n  );\n};\n\nexport default Table;\n"],"mappings":";;;;;;;;;;;AAGA;AAKA;AAKA;AAMA;AACA;AACA;AACA;AAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEpC,IAAMA,KAA0C,GAAG,SAA7CA,KAA0C,CAAIC,KAAiB,EAAK;EACxE,IACEC,mBAAmB,GAmBjBD,KAAK,CAnBPC,mBAAmB;IACnBC,eAAe,GAkBbF,KAAK,CAlBPE,eAAe;IACfC,mBAAmB,GAiBjBH,KAAK,CAjBPG,mBAAmB;IACnBC,sBAAsB,GAgBpBJ,KAAK,CAhBPI,sBAAsB;IACtBC,OAAO,GAeLL,KAAK,CAfPK,OAAO;IACPC,IAAI,GAcFN,KAAK,CAdPM,IAAI;IACJC,gBAAgB,GAadP,KAAK,CAbPO,gBAAgB;IAChBC,UAAU,GAYRR,KAAK,CAZPQ,UAAU;IACVC,oBAAoB,GAWlBT,KAAK,CAXPS,oBAAoB;IACpBC,UAAU,GAURV,KAAK,CAVPU,UAAU;IACVC,WAAW,GASTX,KAAK,CATPW,WAAW;IACXC,OAAO,GAQLZ,KAAK,CARPY,OAAO;IACPC,SAAS,GAOPb,KAAK,CAPPa,SAAS;IACTC,SAAS,GAMPd,KAAK,CANPc,SAAS;IAAA,mBAMPd,KAAK,CALPe,SAAS;IAATA,SAAS,iCAAG,IAAI;IAEhBC,aAAa,GAGXhB,KAAK,CAHPgB,aAAa;IACbC,gBAAgB,GAEdjB,KAAK,CAFPiB,gBAAgB;IAChBC,YAAY,GACVlB,KAAK,CADPkB,YAAY;;EAGd;EACA,sBAAsCC,KAAK,CAACC,QAAQ,CAAS,EAAE,CAAC;IAAA;IAAzDC,WAAW;IAAEC,cAAc;EAClC,uBAAwCH,KAAK,CAACC,QAAQ,CAAQ,EAAE,CAAC;IAAA;IAA1DG,YAAY;IAAEC,eAAe;EACpC,uBAA8CL,KAAK,CAACC,QAAQ,CAAQ,EAAE,CAAC;IAAA;IAAhEK,eAAe;IAAEC,kBAAkB;EAC1C,uBAAsCP,KAAK,CAACC,QAAQ,CAAS,CAAC,CAAC;IAAA;IAAxDO,WAAW;IAAEC,cAAc;EAClC,uBAAwBT,KAAK,CAACC,QAAQ,EAA8B;IAAA;IAA7DS,IAAI;IAAEC,OAAO;EACpB,wBAAwBX,KAAK,CAACC,QAAQ,EAAU;IAAA;IAAzCW,IAAI;IAAEC,OAAO;EACpB,wBAAoBb,KAAK,CAACC,QAAQ,EAAU;IAAA;IAArCa,EAAE;IAAEC,KAAK;EAChB,wBAA0Bf,KAAK,CAACC,QAAQ,EAAU;IAAA;IAA3Ce,KAAK;IAAEC,QAAQ;EAEtB,wBAAsCjB,KAAK,CAACC,QAAQ,CAAC,IAAI,CAAC;IAAA;IAAnDiB,WAAW;IAAEC,cAAc;EAElC,wBAA4CnB,KAAK,CAACC,QAAQ,CAA0B,MAAM,CAAC;IAAA;IAApFmB,cAAc;IAAEC,iBAAiB;EAExC,wBAAgCrB,KAAK,CAACC,QAAQ,CAAcT,WAAW,GAAG,EAAE,GAAG8B,SAAS,CAAC;IAAA;IAAlFC,QAAQ;IAAEC,WAAW;EAE5BxB,KAAK,CAACyB,SAAS,CAAC,YAAM;IAAA;IACpBd,OAAO,CAAC;MACNe,MAAM,uBAAEhC,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEgC,MAAM,iEAAI,EAAE;MAC/BC,SAAS,0BAAEjC,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEiC,SAAS,uEAAI,KAAK;MACxCC,iBAAiB,EAAE,CAAAlC,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEkC,iBAAiB,MAAKN,SAAS,GAAG,IAAI,GAAG5B,SAAS,CAACkC;IACnF,CAAC,CAAC;EACJ,CAAC,EAAE,CAAClC,SAAS,CAAC,CAAC;EAEfM,KAAK,CAACyB,SAAS,CAAC,YAAM;IACpBD,WAAW,CAAC3C,KAAK,CAACgD,YAAY,KAAKrC,WAAW,GAAG,EAAE,GAAG8B,SAAS,CAAC,CAAC;EACnE,CAAC,EAAE,CAACzC,KAAK,CAACgD,YAAY,EAAErC,WAAW,CAAC,CAAC;;EAErC;AACF;AACA;EACEQ,KAAK,CAACyB,SAAS,CAAC,YAAM;IACpB,IAAIjC,WAAW,EAAE;MACf,IAAMsC,WAAW,GAAGxB,eAAe,CAACyB,GAAG,CAAC,UAAAC,GAAG;QAAA,OAAIvC,OAAO,GAAGuC,GAAG,CAACvC,OAAO,CAAC,GAAGuC,GAAG;MAAA,EAAC;MAC5E,IAAMC,KAAK,GAAGV,QAAQ,CAACW,MAAM,CAAC,UAACC,IAAS;QAAA,OAAKL,WAAW,CAACM,QAAQ,CAACD,IAAI,CAAC;MAAA,EAAC,CAACE,MAAM;MAE/EhB,iBAAiB,CAACY,KAAK,KAAKH,WAAW,CAACO,MAAM,GAAG,KAAK,GAAGJ,KAAK,GAAG,CAAC,GAAG,MAAM,GAAG,MAAM,CAAC;IACvF;EACF,CAAC,EAAE,CAAC3B,eAAe,EAAEd,WAAW,EAAE+B,QAAQ,EAAE9B,OAAO,CAAC,CAAC;;EAErD;AACF;AACA;AACA;EACEO,KAAK,CAACyB,SAAS,CAAC,YAAM;IACpB,IAAIrC,gBAAgB,EAAE;MACpBmB,kBAAkB,CAACpB,IAAI,CAAC;;MAExB;MACA0B,OAAO,CAACxB,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEuB,IAAI,CAAC;MACzBG,KAAK,CAAC1B,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEyB,EAAE,CAAC;MACrBG,QAAQ,CAAC5B,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAE2B,KAAK,CAAC;MAC3BP,cAAc,CAACpB,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEmB,WAAW,CAAE;MACxCL,cAAc,CAACd,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CAAEa,WAAW,CAAE;IAC1C;EACF,CAAC,EAAE,CAACd,gBAAgB,EAAEC,UAAU,EAAEF,IAAI,CAAC,CAAC;;EAExC;AACF;AACA;EACEa,KAAK,CAACyB,SAAS,CAAC,YAAM;IACpB,IAAI,CAAC9B,SAAS,EAAE;IAEhBQ,cAAc,CAACe,WAAW,GAAGrB,aAAa,IAAI,EAAE,GAAGV,IAAI,CAACkD,MAAM,CAAC;EACjE,CAAC,EAAE,CAAClD,IAAI,EAAEQ,SAAS,EAAEE,aAAa,EAAEqB,WAAW,CAAC,CAAC;EAEjDlB,KAAK,CAACyB,SAAS,CAAC,YAAM;IACpB,IAAI,CAAC9B,SAAS,EAAE;IAEhBwB,cAAc,CAAC,CAAC,CAACvB,SAAS,CAAC;EAC7B,CAAC,EAAE,CAACD,SAAS,EAAEC,SAAS,CAAC,CAAC;;EAE1B;AACF;AACA;AACA;EACE,IAAM0C,iBAAiB,GAAG,SAApBA,iBAAiB,GAAgB;IACrC,IAAIC,eAAe,GAAGpD,IAAI,CAAC+C,MAAM,CAAC,UAACF,GAAG,EAAK;MACzC;MACA,IAAIQ,mBAAmB,GAAG,IAAI;;MAE9B;MAAA,2CACqBtD,OAAO;QAAA;MAAA;QAA5B,oDAA8B;UAAA,IAAnBwC,MAAM;UACf;UACA;UACA;UACA,IAAIA,MAAM,CAACe,WAAW,IAAIT,GAAG,CAACN,MAAM,CAACgB,GAAG,CAAC,CAACC,WAAW,EAAE,CAACC,OAAO,CAAClB,MAAM,CAACe,WAAW,CAACE,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE;YACxGH,mBAAmB,GAAG,KAAK;UAC7B;QACF;;QAEA;MAAA;QAAA;MAAA;QAAA;MAAA;MACA,IAAIA,mBAAmB,EAAE;QACvB,OAAOR,GAAG;MACZ;IACF,CAAC,CAAC;;IAEF;IACA,IAAI,CAAC,EAACtB,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAEgB,MAAM,KAAI,CAAC,EAAChB,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAEiB,SAAS,GAAE;MACvC;MACAY,eAAe,CAAC7B,IAAI,CAAC,UAACmC,CAAC,EAAEC,CAAC,EAAK;QAC7B,IAAID,CAAC,CAACnC,IAAI,CAACgB,MAAM,CAAE,GAAGoB,CAAC,CAACpC,IAAI,CAACgB,MAAM,CAAE,EAAE;UACrC,OAAOhB,IAAI,CAACiB,SAAS,KAAM,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC;QAC3C,CAAC,MAAM,IAAIkB,CAAC,CAACnC,IAAI,CAACgB,MAAM,CAAE,GAAGoB,CAAC,CAACpC,IAAI,CAACgB,MAAM,CAAE,EAAE;UAC5C,OAAOhB,IAAI,CAACiB,SAAS,KAAM,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC;QAC3C,CAAC,MAAM;UACL,OAAO,CAAC;QACV;MACF,CAAC,CAAC;IACJ;;IAEA;IACA,OAAOY,eAAe;EACxB,CAAC;;EAED;AACF;AACA;AACA;EACEvC,KAAK,CAACyB,SAAS,CAAC,YAAM;IACpB,IAAI,CAACrC,gBAAgB,EAAE;MACrB;MACA,IAAMmD,eAAe,GAAGD,iBAAiB,EAAE;MAC3CjC,eAAe,CAACkC,eAAe,CAAC;MAChCtB,QAAQ,CAACsB,eAAe,CAACF,MAAM,CAAC;;MAEhC;MACA,IAAMU,QAAQ,GAAG,CAACvC,WAAW,GAAG,CAAC,IAAIN,WAAW;MAChD,IAAM8C,MAAM,GAAGD,QAAQ,GAAG7C,WAAW,IAAIqC,eAAe,CAACF,MAAM,GAAGE,eAAe,CAACF,MAAM,GAAGU,QAAQ,GAAG7C,WAAW;;MAEjH;MACAW,OAAO,CAACkC,QAAQ,GAAG,CAAC,CAAC;MACrBhC,KAAK,CAACiC,MAAM,CAAC;;MAEb;MACAzC,kBAAkB,CAACgC,eAAe,CAACU,KAAK,CAACF,QAAQ,EAAEC,MAAM,CAAC,CAAC;IAC7D;EACF,CAAC,EAAE,CAAC9C,WAAW,EAAEf,IAAI,EAAEqB,WAAW,EAAEtB,OAAO,EAAEwB,IAAI,EAAEtB,gBAAgB,CAAC,CAAC;;EAGrE;AACF;AACA;AACA;AACA;EACE,IAAM8D,eAAe,GAAG,SAAlBA,eAAe,CAAIxB,MAAmB,EAAW;IACrD,IAAIyB,SAAS,GAAG,EAAE;IAClB,IAAIC,aAAgD,GAAG9B,SAAS;IAEhE,IAAI,CAAAZ,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEgB,MAAM,MAAKA,MAAM,CAACgB,GAAG,EAAE;MAC/BS,SAAS,GAAGzB,MAAM,CAACgB,GAAG;MACtBU,aAAa,GAAG,KAAK;IACvB,CAAC,MAAM;MACL,IAAI,CAAA1C,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEiB,SAAS,MAAK,MAAM,IAAIjB,IAAI,aAAJA,IAAI,eAAJA,IAAI,CAAEkB,iBAAiB,EAAE;QACzDuB,SAAS,GAAG,EAAE;QACdC,aAAa,GAAG9B,SAAS;MAC3B,CAAC,MAAM;QACL6B,SAAS,GAAGzC,IAAI,CAACgB,MAAM;QACvB0B,aAAa,GAAG1C,IAAI,CAACiB,SAAS,KAAK,KAAK,GAAG,MAAM,GAAG,KAAK;MAC3D;IACF;IAEA,IAAGwB,SAAS,IAAI,EAAE,EAChBxC,OAAO,CAAC;MAAEe,MAAM,EAAE,EAAE;MAAEC,SAAS,EAAE,KAAK;MAAEC,iBAAiB,EAAElB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEkB;IAAiB,CAAC,CAAC,CAAC,KAErFjB,OAAO,CAAC;MAACe,MAAM,EAAEyB,SAAS;MAAExB,SAAS,EAAEyB,aAAc;MAAExB,iBAAiB,EAAElB,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEkB;IAAiB,CAAC,CAAC;IAErGxC,gBAAgB,IAAIH,sBAAsB,IAAIA,sBAAsB,CAACkE,SAAS,EAAEC,aAAa,CAAC;EAChG,CAAC;;EAED;AACF;AACA;EACE,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;IACzB,IAAIjE,gBAAgB,EAAE;MACpB;MACA,IAAIN,mBAAmB,EAAE;QACvBA,mBAAmB,EAAE;MACvB;IACF,CAAC,MAAM;MACL;MACA2B,cAAc,CAACD,WAAW,GAAG,CAAC,GAAGA,WAAW,GAAG,CAAC,GAAG,CAAC,CAAC;IACvD;EACF,CAAC;;EAED;AACF;AACA;EACE,IAAM8C,QAAQ,GAAG,SAAXA,QAAQ,GAAS;IACrB,IAAIlE,gBAAgB,EAAE;MACpB;MACA,IAAIL,eAAe,EAAE;QACnBA,eAAe,EAAE;MACnB;IACF,CAAC,MAAM;MACL;MACA0B,cAAc,CAACD,WAAW,GAAGN,WAAW,IAAIE,YAAY,CAACiC,MAAM,GAAG7B,WAAW,GAAGA,WAAW,GAAG,CAAC,CAAC;IAClG;EACF,CAAC;;EAED;AACF;AACA;AACA;EACE,IAAM+C,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIC,KAAa,EAAK;IAC3C;IACA,IAAIpE,gBAAgB,EAAE;MACpB;MACA,IAAIJ,mBAAmB,EAAE;QACvBA,mBAAmB,CAACwE,KAAK,CAAC;MAC5B;IACF,CAAC,MAAM;MACL;MACA/C,cAAc,CAAC,CAAC,CAAC;IACnB;;IAEA;IACAN,cAAc,CAACqD,KAAK,CAAC;EACvB,CAAC;;EAGD;AACF;AACA;AACA;EACE,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAIzB,GAAQ,EAAW;IAAA;IACrC,IAAM0B,YAAY,cAAGC,MAAM,oEAAN,QAAQC,YAAY,EAAE,yDAAtB,qBAAwBC,QAAQ,EAAE;IAEvD,IAAI,CAAAH,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAErB,MAAM,MAAK,CAAC,IAAI9C,UAAU,EAAE;MAC5C,IAAMiE,KAAK,GAAG/D,OAAO,GAAGuC,GAAG,CAACvC,OAAO,CAAC,GAAGuC,GAAG;MAC1C,IAAI8B,gBAAgB,GAAGN,KAAK;MAC5B,IAAI,CAAC,CAAChE,WAAW,EAAE;QACjB,IAAMuE,QAAQ,GAAGxC,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEqB,OAAO,CAACY,KAAK,CAAC;QACzC,IAAIO,QAAQ,GAAG,CAAC,CAAC,EAAE;UACjBD,gBAAgB,oCAAOvC,QAAQ,CAAC;UAChCuC,gBAAgB,CAACE,MAAM,CAACD,QAAQ,EAAE,CAAC,CAAC;QACtC,CAAC,MAAM;UACLD,gBAAgB,8CAAOvC,QAAQ,IAAEuC,gBAAgB,EAAC;QACpD;MACF;MAEAtC,WAAW,CAACsC,gBAAgB,CAAC;MAC7BjF,KAAK,CAACoF,iBAAiB,IAAIpF,KAAK,CAACoF,iBAAiB,CAACH,gBAAgB,CAAC;IACtE;EACF,CAAC;;EAED;AACF;AACA;EACE,IAAMI,gBAAgB,GAAG,SAAnBA,gBAAgB,GAAS;IAC7B,IAAMpC,WAAW,GAAGxB,eAAe,CAACyB,GAAG,CAAC,UAAAC,GAAG;MAAA,OAAIvC,OAAO,GAAGuC,GAAG,CAACvC,OAAO,CAAC,GAAGuC,GAAG;IAAA,EAAC;IAE5E,QAAQZ,cAAc;MACpB,KAAK,KAAK;QACRI,WAAW,CAAC,iCAAID,QAAQ,EAAEW,MAAM,CAAC,UAAAC,IAAI;UAAA,OAAI,CAACL,WAAW,CAACM,QAAQ,CAACD,IAAI,CAAC;QAAA,EAAC,CAAC;QACtEd,iBAAiB,CAAC,MAAM,CAAC;QACzB;MACF,KAAK,MAAM;QACTG,WAAW,4CAAKD,QAAQ,oCAAKO,WAAW,GAAE;QAC1CT,iBAAiB,CAAC,KAAK,CAAC;QACxB;MACF,KAAK,MAAM;QACTG,WAAW,4CAAKD,QAAQ,oCAAKO,WAAW,CAACI,MAAM,CAAC,UAAAC,IAAI;UAAA,OAAI,CAACZ,QAAQ,CAACa,QAAQ,CAACD,IAAI,CAAC;QAAA,EAAC,GAAE;QACnFd,iBAAiB,CAAC,KAAK,CAAC;QACxB;IAAM;EAEZ,CAAC;;EAED;AACF;AACA;EACE,oBACE,sBAAC,yBAAY;IAAC,SAAS,EAAExC,KAAK,CAACsF,MAAM,GAAG,QAAQ,GAAG7C,SAAU;IAAA,wBAC3D,qBAAC,qBAAW,oBAAKzC,KAAK,EAAG,eACzB,qBAAC,kBAAS,kCAAKA,KAAK;MACT,eAAe,EAAEyB,eAAgB;MACjC,QAAQ,EAAEiB,QAAS;MACnB,UAAU,EAAEkC,UAAW;MACvB,YAAY,EAAEP,eAAgB;MAC9B,gBAAgB,EAAEgB,gBAAiB;MACnC,SAAS,EAAExD,IAAK;MAChB,cAAc,EAAEU;IAAe,GAAE,eAC5C,qBAAC,oBAAW,kCAAKvC,KAAK;MACT,mBAAmB,EAAE0E,iBAAkB;MACvC,WAAW,EAAErD,WAAY;MACzB,cAAc,EAAEiB,cAAe;MAC/B,WAAW,EAAED,WAAY;MACzB,IAAI,EAAEN,IAAK;MACX,EAAE,EAAEE,EAAG;MACP,KAAK,EAAEE,KAAM;MACb,QAAQ,EAAEsC,QAAS;MACnB,QAAQ,EAAED;IAAa,GAAE,EACrC/D,oBAAoB,iBACnB,qBAAC,+BAAkB;MAAC,MAAM,EAAES,YAAa;MAAA,uBACvC,qBAAC,kCAAgB;QAAC,IAAI,EAAEqE,WAAI,CAACC;MAAO;IAAE,EAEzC;EAAA,EACY;AAEnB,CAAC;AAAC,eAEazF,KAAK;AAAA"}

package/dist/Table/Table.js

@@ -49,7 +49,8 @@ var Table = function Table(props) {
     _props$collapsed = props.collapsed,
     collapsed = _props$collapsed === void 0 ? true : _props$collapsed,
     collapsedRows = props.collapsedRows,
-    rowsPerPageLabel = props.rowsPerPageLabel;
+    rowsPerPageLabel = props.rowsPerPageLabel,
+    loaderZIndex = props.loaderZIndex;
 
   // States used within the component
   var _React$useState = React.useState(10),
@@ -68,7 +69,7 @@ var Table = function Table(props) {
     _React$useState8 = _slicedToArray(_React$useState7, 2),
     currentPage = _React$useState8[0],
     setCurrentPage = _React$useState8[1];
-  var _React$useState9 = React.useState(sortProps),
+  var _React$useState9 = React.useState(),
     _React$useState10 = _slicedToArray(_React$useState9, 2),
     sort = _React$useState10[0],
     setSort = _React$useState10[1];
@@ -97,7 +98,12 @@ var Table = function Table(props) {
     selected = _React$useState22[0],
     setSelected = _React$useState22[1];
   React.useEffect(function () {
-    setSort(sortProps);
+    var _sortProps$column, _sortProps$direction;
+    setSort({
+      column: (_sortProps$column = sortProps === null || sortProps === void 0 ? void 0 : sortProps.column) !== null && _sortProps$column !== void 0 ? _sortProps$column : '',
+      direction: (_sortProps$direction = sortProps === null || sortProps === void 0 ? void 0 : sortProps.direction) !== null && _sortProps$direction !== void 0 ? _sortProps$direction : 'asc',
+      allowClearingSort: (sortProps === null || sortProps === void 0 ? void 0 : sortProps.allowClearingSort) === undefined ? true : sortProps.allowClearingSort
+    });
   }, [sortProps]);
   React.useEffect(function () {
     setSelected(props.selectedRows || (multiSelect ? [] : undefined));
@@ -235,7 +241,7 @@ var Table = function Table(props) {
       columnKey = column.key;
       sortDirection = 'asc';
     } else {
-      if ((sort === null || sort === void 0 ? void 0 : sort.direction) === 'desc') {
+      if ((sort === null || sort === void 0 ? void 0 : sort.direction) === 'desc' && sort !== null && sort !== void 0 && sort.allowClearingSort) {
         columnKey = '';
         sortDirection = undefined;
       } else {
@@ -243,9 +249,14 @@ var Table = function Table(props) {
         sortDirection = sort.direction === 'asc' ? 'desc' : 'asc';
       }
     }
-    if (columnKey == '') setSort(undefined);else setSort({
+    if (columnKey == '') setSort({
+      column: '',
+      direction: 'asc',
+      allowClearingSort: sort === null || sort === void 0 ? void 0 : sort.allowClearingSort
+    });else setSort({
       column: columnKey,
-      direction: sortDirection
+      direction: sortDirection,
+      allowClearingSort: sort === null || sort === void 0 ? void 0 : sort.allowClearingSort
     });
     remoteOperations && onTriggerSortingChange && onTriggerSortingChange(columnKey, sortDirection);
   };
@@ -375,6 +386,7 @@ var Table = function Table(props) {
       nextPage: nextPage,
       prevPage: previousPage
     })), showLoadingIndicator && /*#__PURE__*/_jsx(StyledTableSpinner, {
+      zindex: loaderZIndex,
       children: /*#__PURE__*/_jsx(LoadingIndicator, {
         size: Size.Medium
       })