@laerdal/life-react-components 6.0.0-dev.24 → 6.0.0-dev.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Card/VerticalCard/CardBottomSection.cjs +18 -6
- package/dist/Card/VerticalCard/CardBottomSection.cjs.map +1 -1
- package/dist/Card/VerticalCard/CardBottomSection.d.ts +4 -0
- package/dist/Card/VerticalCard/CardBottomSection.js +18 -6
- package/dist/Card/VerticalCard/CardBottomSection.js.map +1 -1
- package/dist/Card/VerticalCard/CardMiddleSection.cjs +19 -0
- package/dist/Card/VerticalCard/CardMiddleSection.cjs.map +1 -1
- package/dist/Card/VerticalCard/CardMiddleSection.js +18 -0
- package/dist/Card/VerticalCard/CardMiddleSection.js.map +1 -1
- package/dist/Chips/ActionChip.cjs +6 -0
- package/dist/Chips/ActionChip.cjs.map +1 -1
- package/dist/Chips/ActionChip.js +6 -0
- package/dist/Chips/ActionChip.js.map +1 -1
- package/dist/Chips/ChipStyles.cjs +210 -31
- package/dist/Chips/ChipStyles.cjs.map +1 -1
- package/dist/Chips/ChipStyles.js +210 -31
- package/dist/Chips/ChipStyles.js.map +1 -1
- package/dist/Chips/ChoiceChips.cjs +1 -1
- package/dist/Chips/ChoiceChips.cjs.map +1 -1
- package/dist/Chips/ChoiceChips.js +1 -1
- package/dist/Chips/ChoiceChips.js.map +1 -1
- package/dist/Chips/FilterChip.cjs +7 -1
- package/dist/Chips/FilterChip.cjs.map +1 -1
- package/dist/Chips/FilterChip.js +7 -1
- package/dist/Chips/FilterChip.js.map +1 -1
- package/dist/Chips/InputChip.cjs +14 -0
- package/dist/Chips/InputChip.cjs.map +1 -1
- package/dist/Chips/InputChip.js +14 -0
- package/dist/Chips/InputChip.js.map +1 -1
- package/dist/ChipsInput/ChipInputField.cjs +8 -2
- package/dist/ChipsInput/ChipInputField.cjs.map +1 -1
- package/dist/ChipsInput/ChipInputField.js +8 -2
- package/dist/ChipsInput/ChipInputField.js.map +1 -1
- package/dist/Footer/Components/FooterTop.cjs +3 -0
- package/dist/Footer/Components/FooterTop.cjs.map +1 -1
- package/dist/Footer/Components/FooterTop.js +3 -0
- package/dist/Footer/Components/FooterTop.js.map +1 -1
- package/dist/InputFields/DatepickerField.cjs +20 -4
- package/dist/InputFields/DatepickerField.cjs.map +1 -1
- package/dist/InputFields/DatepickerField.js +20 -4
- package/dist/InputFields/DatepickerField.js.map +1 -1
- package/dist/InputFields/NumberField.cjs +4 -0
- package/dist/InputFields/NumberField.cjs.map +1 -1
- package/dist/InputFields/NumberField.js +4 -0
- package/dist/InputFields/NumberField.js.map +1 -1
- package/dist/InputFields/RadioButton.cjs +2 -2
- package/dist/InputFields/RadioButton.cjs.map +1 -1
- package/dist/InputFields/RadioButton.d.ts +4 -4
- package/dist/InputFields/RadioButton.js +2 -2
- package/dist/InputFields/RadioButton.js.map +1 -1
- package/dist/InputFields/components/SearchBarInput.cjs +5 -0
- package/dist/InputFields/components/SearchBarInput.cjs.map +1 -1
- package/dist/InputFields/components/SearchBarInput.js +5 -0
- package/dist/InputFields/components/SearchBarInput.js.map +1 -1
- package/dist/Modals/ModalContainer.cjs +7 -1
- package/dist/Modals/ModalContainer.cjs.map +1 -1
- package/dist/Modals/ModalContainer.d.ts +3 -0
- package/dist/Modals/ModalContainer.js +8 -2
- package/dist/Modals/ModalContainer.js.map +1 -1
- package/dist/Modals/ModalContent.cjs +5 -1
- package/dist/Modals/ModalContent.cjs.map +1 -1
- package/dist/Modals/ModalContent.js +5 -1
- package/dist/Modals/ModalContent.js.map +1 -1
- package/dist/Modals/ModalStyles.cjs +12 -0
- package/dist/Modals/ModalStyles.cjs.map +1 -1
- package/dist/Modals/ModalStyles.js +12 -0
- package/dist/Modals/ModalStyles.js.map +1 -1
- package/dist/Navigation/NavigationProvider.cjs.map +1 -1
- package/dist/Navigation/NavigationProvider.d.ts +3 -0
- package/dist/Navigation/NavigationProvider.js.map +1 -1
- package/dist/Paginator/Paginator.cjs +1 -1
- package/dist/Paginator/Paginator.cjs.map +1 -1
- package/dist/Paginator/Paginator.js +1 -1
- package/dist/Paginator/Paginator.js.map +1 -1
- package/dist/Table/TableStyles.cjs +4 -1
- package/dist/Table/TableStyles.cjs.map +1 -1
- package/dist/Table/TableStyles.js +4 -1
- package/dist/Table/TableStyles.js.map +1 -1
- package/dist/Tag/Tag.cjs +48 -12
- package/dist/Tag/Tag.cjs.map +1 -1
- package/dist/Tag/Tag.js +48 -12
- package/dist/Tag/Tag.js.map +1 -1
- package/dist/common/NavigationHelper.cjs +2 -0
- package/dist/common/NavigationHelper.cjs.map +1 -0
- package/dist/common/NavigationHelper.d.ts +0 -0
- package/dist/common/NavigationHelper.js +2 -0
- package/dist/common/NavigationHelper.js.map +1 -0
- package/dist/styles/colors.cjs +6 -0
- package/dist/styles/colors.cjs.map +1 -1
- package/dist/styles/colors.d.ts +6 -0
- package/dist/styles/colors.js +6 -0
- package/dist/styles/colors.js.map +1 -1
- package/dist/styles/design-tokens/dark/tokens.css +481 -0
- package/dist/styles/design-tokens/light/tokens.css +481 -0
- package/dist/styles/design-tokens/rqi_dark/tokens.css +481 -0
- package/dist/styles/design-tokens/rqi_light/tokens.css +481 -0
- package/dist/styles/global.cjs +4 -4
- package/dist/styles/global.cjs.map +1 -1
- package/dist/styles/global.js +4 -4
- package/dist/styles/global.js.map +1 -1
- package/dist/styles/typography.cjs +4 -1
- package/dist/styles/typography.cjs.map +1 -1
- package/dist/styles/typography.js +4 -1
- package/dist/styles/typography.js.map +1 -1
- package/package.json +6 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberField.js","names":["React","TooltipTrigger","TooltipOverflow","styled","IconButton","useFocusVisibleRef","SystemIcons","COLORS","focusStyles","Z_INDEXES","ComponentMStyling","ComponentSStyling","ComponentTextStyle","Size","States","ValidationMessage","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Container","div","PrefixContainer","props","$size","Small","$disabled","generateToken","componentType","state","theme","defaultVariant","Regular","OperatorWrapper","Medium","NumberInput","input","$fieldSize","$type","$hasPrefix","Italic","InputContainer","focus","LeftOperator","RightOperator","NumberField","forwardRef","ref","type","size","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","disabled","readOnly","value","placeholder","onChange","className","id","overflowTooltipPosition","dataTestId","rest","_objectWithoutProperties","_excluded","userInput","setUserInput","useState","toString","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","children","tabIndex","variant","shape","action","useTransparentBackground","Minus","Plus","renderNumberInputElements","_objectSpread","onKeyDown","concat","position","withArrow","maxWidth","align","Default","propTypes","_pt","string","number","bool","node","oneOf","func"],"sources":["../../src/InputFields/NumberField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport styled from 'styled-components';\r\nimport {IconButton} from '../Button';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, focusStyles, Z_INDEXES} from '../styles';\r\nimport {\r\n ComponentMStyling,\r\n ComponentSStyling,\r\n ComponentTextStyle,\r\n ComponentXSStyling,\r\n ComponentXXSStyling\r\n} from '../styles/typography';\r\nimport {Size, States, Testable} from '../types';\r\nimport {ValidationMessage} from \"./styling\";\r\n\r\nconst Container = styled.div``;\r\n\r\nconst PrefixContainer = styled.div<{ $size: Size, $disabled: boolean }>`\r\n width: ${props => props.$size === Size.Small ? '10px' : '11px'};\r\n height: ${props => props.$size === Size.Small ? '20px' : '24px'};\r\n color: ${props => props.$disabled ? COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme) : \r\n COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme)};\r\n ${props => props.$size === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, null) : ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n position: absolute;\r\n padding: ${props => props.$size === Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px'};\r\n`;\r\n\r\nconst OperatorWrapper = styled.div<{ $size: Size }>`\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n display: flex;\r\n margin: ${props => props.$size === Size.Medium ? '4px 0' : ''};\r\n\r\n svg {\r\n height: 14px;\r\n width: 14px;\r\n }\r\n\r\n .divider {\r\n margin: 16px 0;\r\n background: ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'subtle' }, props.theme)};\r\n width: 1px;\r\n }\r\n`;\r\n\r\nconst NumberInput = styled.input<{ $fieldSize: Size, $hasPrefix: boolean, $type: string }>`\r\n width: 100%;\r\n border: none;\r\n border-radius: 4px;\r\n text-overflow: ellipsis;\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default' }, props.theme)};\r\n outline: none;\r\n color: ${props => COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme)};\r\n\r\n ${props => props.$fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme)) :\r\n ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n ${props => props.$type === 'NumberField' ? `\r\n padding: ${props.$fieldSize === Size.Small ? '14px 97px 14px 16px' : '16px 97px 16px 16px'};\r\n padding-left: ${props.$hasPrefix ? '30px' : ''};\r\n ` : ''}\r\n ${props => props.$type === 'NumberInput' ? `\r\n padding: ${props.$fieldSize === Size.Small ? '14px 48px' : '16px 48px'};\r\n ` : ''}\r\n &::placeholder {\r\n ${props => props.$fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Italic, null) : ComponentMStyling(ComponentTextStyle.Italic, null)}\r\n }\r\n\r\n &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType:'border', state:'hover' }, props.theme)};\r\n }\r\n\r\n &.focus-visible {\r\n ${focusStyles}\r\n }\r\n\r\n &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType:'border', state:'hover' }, props.theme)};\r\n }\r\n\r\n &.disabled {\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({ componentType:'border', state:'disabled' }, props.theme)};\r\n cursor: not-allowed;\r\n color: ${props => COLORS.generateToken({ componentType:'text', state:'disabled' }, props.theme)};\r\n pointer-events: none;\r\n\r\n &::placeholder {\r\n color: ${props => COLORS.generateToken({ componentType:'text', state:'disabled' }, props.theme)};\r\n }\r\n }\r\n\r\n &.readOnly {\r\n background: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'disabled' }, props.theme)};\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'default' }, props.theme)};\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n }\r\n\r\n &.valid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType:'border', defaultVariant:'positive' }, props.theme)};\r\n }\r\n\r\n &.invalid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType:'border', defaultVariant:'critical' }, props.theme)};\r\n }\r\n`;\r\n\r\nconst InputContainer = styled.div<{ $size: Size, $type: string }>`\r\n min-width: ${props => props.$type === 'NumberField' ? '160px' : '144px'};\r\n height: ${props => props.$size === Size.Small ? '48px' : '56px'};\r\n display: flex;\r\n position: relative;\r\n margin-bottom: 4px;\r\n\r\n input.focus-visible ~ div.operator {\r\n z-index: ${Z_INDEXES.focus};\r\n }\r\n\r\n ${TooltipTrigger('hover')}\r\n`;\r\n\r\nconst LeftOperator = styled.div<{ $size: Size }>`\r\n position: absolute;\r\n top: ${props => props.$size === Size.Small ? '0' : '4px'};\r\n left: 0;\r\n`;\r\n\r\nconst RightOperator = styled.div<{ $size: Size }>`\r\n position: absolute;\r\n top: ${props => props.$size === Size.Small ? '0' : '4px'};\r\n right: 0;\r\n`;\r\n\r\nexport interface NumberFieldProps extends Testable, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onKeyDown' | 'onClick' | 'tabIndex' | 'size' | 'value' | 'prefix' | 'min' | 'max'>\r\n{\r\n /**\r\n * Optional. The size of the number field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The prefix to be displayed before the number in the field.\r\n */\r\n prefix?: string;\r\n\r\n /**\r\n * Optional. The interval for incrementing and decrementing the number in the field.\r\n */\r\n interval?: number;\r\n\r\n /**\r\n * Optional. The minimum value that can be entered in the field.\r\n */\r\n minValue?: number;\r\n\r\n /**\r\n * Optional. The maximum value that can be entered in the field.\r\n */\r\n maxValue?: number;\r\n\r\n /**\r\n * Optional. A boolean indicating whether negative numbers are allowed.\r\n */\r\n allowNegative?: boolean;\r\n\r\n /**\r\n * Optional. The number of decimal places allowed in the number.\r\n */\r\n decimalPrecision?: number;\r\n\r\n /**\r\n * Optional. The state of the number field. Can be 'Valid' or 'Invalid'.\r\n */\r\n state?: States.Valid | States.Invalid;\r\n\r\n /**\r\n * Optional. A note to be displayed below the number field.\r\n */\r\n note?: string;\r\n\r\n /**\r\n * Optional. An icon to be displayed next to the note.\r\n */\r\n noteIcon?: React.ReactNode;\r\n\r\n /**\r\n * Optional. The type of the number field. Can be 'NumberField' or 'NumberInput'.\r\n */\r\n type?: 'NumberField' | 'NumberInput';\r\n\r\n /**\r\n * Optional. The current value of the number field.\r\n */\r\n value?: number;\r\n\r\n /**\r\n * Optional. A function to be called when the value of the number field changes.\r\n */\r\n onChange?: (e: number) => void;\r\n\r\n /**\r\n * Optional. The position of the tooltip when the number overflows. Can be 'top' or 'bottom'.\r\n */\r\n overflowTooltipPosition?: 'top' | 'bottom';\r\n}\r\n\r\nconst NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>((props, ref) => {\r\n const {\r\n type = 'NumberField',\r\n size = Size.Medium,\r\n note,\r\n noteIcon,\r\n required,\r\n prefix,\r\n interval = 1,\r\n minValue,\r\n maxValue,\r\n allowNegative,\r\n decimalPrecision,\r\n disabled,\r\n readOnly,\r\n state,\r\n value,\r\n placeholder,\r\n onChange,\r\n className,\r\n id,\r\n overflowTooltipPosition,\r\n dataTestId,\r\n ...rest\r\n } = props;\r\n\r\n const [userInput, setUserInput] = React.useState(value ? value.toString() : '');\r\n\r\n const elementRef = useFocusVisibleRef();\r\n\r\n React.useEffect(() => setUserInput(`${value ?? ''}`), [value]);\r\n\r\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n const setVal = (e: string) => {\r\n setUserInput(e);\r\n onChange && onChange(+e);\r\n }\r\n\r\n const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n switch (e.key) {\r\n case 'ArrowUp':\r\n addInterval();\r\n break;\r\n case 'ArrowDown':\r\n subtractInterval();\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n e.preventDefault();\r\n let simpleRegex = new RegExp(/^[0-9]\\d*$/);\r\n let decimalFormationRegEx = new RegExp(/^[0-9]\\d*\\.$/);\r\n let negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\\d*\\.$/);\r\n\r\n let allowNegativeRegex = new RegExp(/^[-][0-9]\\d*$/);\r\n let decimalPrecisionRegex = decimalPrecision ? new RegExp(`^[0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\r\n let negativeAndDecimalRegex = (decimalPrecision && allowNegative) ? new RegExp(`^[-][0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\r\n\r\n let val = e.target.value;\r\n if (val !== '') {\r\n if (allowNegative && decimalPrecision) {\r\n if (val.length === 1 && val.charAt(0) === '-')\r\n setVal(val);\r\n else {\r\n if ((negativeAndDecimalRegex!.test(val) || decimalPrecisionRegex!.test(val)) && isInRange(val, true))\r\n setVal(val);\r\n\r\n else if ((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.', ''), true))\r\n setVal(val);\r\n\r\n else if ((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val, true))\r\n setVal(val);\r\n }\r\n } else if (allowNegative) {\r\n if (val.length === 1 && val.charAt(0) === '-')\r\n setVal(val);\r\n else if ((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val, false))\r\n setVal(val);\r\n } else if (decimalPrecision && (val.indexOf('.') === val.lastIndexOf('.')) && isInRange(val, true)) {\r\n if (decimalPrecisionRegex!.test(val))\r\n setVal(val);\r\n else if (decimalFormationRegEx.test(val))\r\n setVal(val);\r\n else if (!val.includes('.') && simpleRegex.test(val))\r\n setVal(val);\r\n } else if (simpleRegex.test(val) && isInRange(val, false)) {\r\n setVal(val);\r\n }\r\n }\r\n\r\n if (val === '')\r\n setVal('');\r\n }\r\n\r\n const isInRange = (value: string, isDecimal: boolean): boolean => {\r\n let x = isDecimal ? parseFloat(parseFloat(value).toFixed(decimalPrecision)) : parseInt(value);\r\n if (minValue && minValue > x)\r\n return false;\r\n else if (maxValue && maxValue < x)\r\n return false;\r\n else\r\n return true;\r\n }\r\n\r\n const addInterval = () => {\r\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\r\n val = isNaN(val) && userInput === '' ? (minValue ? minValue - 1 : 0) : val;\r\n if (!isNaN(val)) {\r\n if (decimalPrecision)\r\n val = Math.round((val + interval) * Math.pow(10, decimalPrecision!)) / Math.pow(10, decimalPrecision!);\r\n else\r\n val += 1;\r\n\r\n if (maxValue && maxValue >= val)\r\n setVal(val.toString());\r\n else if (!maxValue)\r\n setVal(val.toString());\r\n }\r\n }\r\n\r\n const subtractInterval = () => {\r\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\r\n val = isNaN(val) && userInput === '' ? (maxValue ? maxValue + 1 : 0) : val;\r\n if (!isNaN(val)) {\r\n if (decimalPrecision)\r\n val = Math.round((val - interval) * Math.pow(10, decimalPrecision!)) / Math.pow(10, decimalPrecision!);\r\n else\r\n val -= 1;\r\n\r\n if ((minValue && minValue <= val) || !minValue) {\r\n if (allowNegative || val >= 0) {\r\n setVal(val.toString());\r\n }\r\n }\r\n }\r\n }\r\n\r\n const isLocked = (input: string, operator: string): boolean => {\r\n let val = decimalPrecision ? parseFloat(input) : parseInt(input);\r\n val = isNaN(val) && userInput === '' ? 0 : val;\r\n let operatorState = false;\r\n if (operator === 'add' && maxValue)\r\n operatorState = val >= maxValue;\r\n\r\n if (operator === 'subtract' && minValue)\r\n operatorState = val <= minValue;\r\n\r\n if (operator === 'subtract' && !minValue && !allowNegative)\r\n operatorState = val <= 0;\r\n\r\n return operatorState;\r\n }\r\n\r\n const renderNumberFieldElements = () => {\r\n return (\r\n <>\r\n {prefix && <PrefixContainer $size={size} $disabled={!!disabled} className=\"operator\">\r\n {prefix}\r\n </PrefixContainer>}\r\n\r\n <OperatorWrapper data-testid={'operators'} $size={size} className=\"operator\">\r\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => subtractInterval()}\r\n useTransparentBackground disabled={disabled || readOnly || isLocked(userInput, 'subtract')}>\r\n <SystemIcons.Minus size=\"14px\"/>\r\n </IconButton>\r\n <div className=\"divider\"></div>\r\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => addInterval()}\r\n useTransparentBackground disabled={disabled || readOnly || isLocked(userInput, 'add')}>\r\n <SystemIcons.Plus size=\"14px\"/>\r\n </IconButton>\r\n </OperatorWrapper>\r\n </>)\r\n }\r\n\r\n const renderNumberInputElements = () => {\r\n return (\r\n <>\r\n <LeftOperator data-testid={'leftOperator'} $size={size} className=\"operator\">\r\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => subtractInterval()}\r\n useTransparentBackground disabled={disabled || readOnly || isLocked(userInput, 'subtract')}>\r\n <SystemIcons.Minus size=\"14px\"/>\r\n </IconButton>\r\n </LeftOperator>\r\n <RightOperator data-testid={'rightOperator'} $size={size} className=\"operator\">\r\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => addInterval()}\r\n useTransparentBackground disabled={disabled || readOnly || isLocked(userInput, 'add')}>\r\n <SystemIcons.Plus size=\"14px\"/>\r\n </IconButton>\r\n </RightOperator>\r\n </>)\r\n }\r\n\r\n return (\r\n <Container>\r\n <InputContainer $type={type} $size={size} tabIndex={-1}>\r\n <NumberInput $type={type}\r\n id={id}\r\n data-testid={dataTestId}\r\n $fieldSize={size}\r\n $hasPrefix={!!prefix}\r\n placeholder={placeholder ? placeholder : 'Enter number'}\r\n value={userInput}\r\n ref={elementRef}\r\n tabIndex={(disabled || readOnly) ? -1 : 0}\r\n onChange={e => handleInput(e)}\r\n onKeyDown={e => handleKeyPress(e)}\r\n required={required}\r\n className={disabled ? ' disabled' : ''\r\n .concat(readOnly ? ' readOnly' : '')\r\n .concat(state ? ` ${state}` : '')\r\n .concat(className ? ` ${className}` : '')}\r\n {...rest}/>\r\n\r\n {type === 'NumberField' && renderNumberFieldElements()}\r\n {type === 'NumberInput' && renderNumberInputElements()}\r\n {value && <TooltipOverflow position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n {value?.toString()}\r\n </TooltipOverflow>}\r\n </InputContainer>\r\n\r\n {\r\n note &&\r\n <ValidationMessage type={state || States.Default}>\r\n {noteIcon}\r\n <span>{note}</span>\r\n </ValidationMessage>\r\n }\r\n\r\n </Container>\r\n );\r\n }\r\n )\r\n;\r\n\r\nexport default NumberField;\r\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"NumberField.js","names":["React","TooltipTrigger","TooltipOverflow","styled","IconButton","useFocusVisibleRef","SystemIcons","COLORS","focusStyles","Z_INDEXES","ComponentMStyling","ComponentSStyling","ComponentTextStyle","Size","States","ValidationMessage","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","Container","div","PrefixContainer","props","$size","Small","$disabled","generateToken","componentType","state","theme","defaultVariant","Regular","OperatorWrapper","Medium","NumberInput","input","$fieldSize","$type","$hasPrefix","Italic","InputContainer","focus","LeftOperator","RightOperator","NumberField","forwardRef","ref","type","size","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","disabled","readOnly","value","placeholder","onChange","className","id","overflowTooltipPosition","dataTestId","rest","_objectWithoutProperties","_excluded","userInput","setUserInput","useState","toString","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","children","tabIndex","variant","shape","action","useTransparentBackground","Minus","Plus","renderNumberInputElements","_objectSpread","onKeyDown","concat","position","withArrow","maxWidth","align","Default","propTypes","_pt","string","number","bool","node","oneOf","func"],"sources":["../../src/InputFields/NumberField.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { TooltipTrigger } from '../Tooltips/TooltipStyles';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\nimport styled from 'styled-components';\r\nimport {IconButton} from '../Button';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, focusStyles, Z_INDEXES} from '../styles';\r\nimport {\r\n ComponentMStyling,\r\n ComponentSStyling,\r\n ComponentTextStyle,\r\n ComponentXSStyling,\r\n ComponentXXSStyling\r\n} from '../styles/typography';\r\nimport {Size, States, Testable} from '../types';\r\nimport {ValidationMessage} from \"./styling\";\r\n\r\nconst Container = styled.div``;\r\n\r\nconst PrefixContainer = styled.div<{ $size: Size, $disabled: boolean }>`\r\n width: ${props => props.$size === Size.Small ? '10px' : '11px'};\r\n height: ${props => props.$size === Size.Small ? '20px' : '24px'};\r\n color: ${props => props.$disabled ? COLORS.generateToken({componentType:'text', state:'disabled'}, props.theme) : \r\n COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme)};\r\n ${props => props.$size === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, null) : ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n position: absolute;\r\n padding: ${props => props.$size === Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px'};\r\n`;\r\n\r\nconst OperatorWrapper = styled.div<{ $size: Size }>`\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n display: flex;\r\n margin: ${props => props.$size === Size.Medium ? '4px 0' : ''};\r\n\r\n svg {\r\n height: 14px;\r\n width: 14px;\r\n }\r\n\r\n .divider {\r\n margin: 16px 0;\r\n background: ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'subtle' }, props.theme)};\r\n width: 1px;\r\n }\r\n`;\r\n\r\nconst NumberInput = styled.input<{ $fieldSize: Size, $hasPrefix: boolean, $type: string }>`\r\n width: 100%;\r\n border: none;\r\n border-radius: 4px;\r\n text-overflow: ellipsis;\r\n background: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'default' }, props.theme)};\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({componentType:'border', defaultVariant:'default' }, props.theme)};\r\n outline: none;\r\n color: ${props => COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme)};\r\n\r\n ${props => props.$fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme)) :\r\n ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n ${props => props.$type === 'NumberField' ? `\r\n padding: ${props.$fieldSize === Size.Small ? '14px 97px 14px 16px' : '16px 97px 16px 16px'};\r\n padding-left: ${props.$hasPrefix ? '30px' : ''};\r\n ` : ''}\r\n ${props => props.$type === 'NumberInput' ? `\r\n padding: ${props.$fieldSize === Size.Small ? '14px 48px' : '16px 48px'};\r\n ` : ''}\r\n &::placeholder {\r\n ${props => props.$fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Italic, null) : ComponentMStyling(ComponentTextStyle.Italic, null)}\r\n }\r\n\r\n &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType:'border', state:'hover' }, props.theme)};\r\n }\r\n\r\n &.focus-visible {\r\n ${focusStyles}\r\n }\r\n\r\n &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType:'border', state:'hover' }, props.theme)};\r\n }\r\n\r\n &.disabled {\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({ componentType:'border', state:'disabled' }, props.theme)};\r\n cursor: not-allowed;\r\n color: ${props => COLORS.generateToken({ componentType:'text', state:'disabled' }, props.theme)};\r\n pointer-events: none;\r\n\r\n &::placeholder {\r\n color: ${props => COLORS.generateToken({ componentType:'text', state:'disabled' }, props.theme)};\r\n }\r\n }\r\n\r\n &.readOnly {\r\n background: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'disabled' }, props.theme)};\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'default' }, props.theme)};\r\n cursor: not-allowed;\r\n pointer-events: none;\r\n color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'subtle' }, props.theme)};\r\n }\r\n\r\n &.valid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType:'border', defaultVariant:'positive' }, props.theme)};\r\n }\r\n\r\n &.invalid {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.generateToken({ componentType:'border', defaultVariant:'critical' }, props.theme)};\r\n }\r\n`;\r\n\r\nconst InputContainer = styled.div<{ $size: Size, $type: string }>`\r\n min-width: ${props => props.$type === 'NumberField' ? '160px' : '144px'};\r\n height: ${props => props.$size === Size.Small ? '48px' : '56px'};\r\n display: flex;\r\n position: relative;\r\n margin-bottom: 4px;\r\n\r\n input.focus-visible ~ div.operator {\r\n z-index: ${Z_INDEXES.focus};\r\n }\r\n\r\n ${TooltipTrigger('hover')}\r\n`;\r\n\r\nconst LeftOperator = styled.div<{ $size: Size }>`\r\n position: absolute;\r\n top: ${props => props.$size === Size.Small ? '0' : '4px'};\r\n left: 0;\r\n`;\r\n\r\nconst RightOperator = styled.div<{ $size: Size }>`\r\n position: absolute;\r\n top: ${props => props.$size === Size.Small ? '0' : '4px'};\r\n right: 0;\r\n`;\r\n\r\nexport interface NumberFieldProps extends Testable, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'onKeyDown' | 'onClick' | 'tabIndex' | 'size' | 'value' | 'prefix' | 'min' | 'max'>\r\n{\r\n /**\r\n * Optional. The size of the number field. Can be 'Small' or 'Medium'.\r\n */\r\n size?: Size.Small | Size.Medium;\r\n\r\n /**\r\n * Optional. The prefix to be displayed before the number in the field.\r\n */\r\n prefix?: string;\r\n\r\n /**\r\n * Optional. The interval for incrementing and decrementing the number in the field.\r\n */\r\n interval?: number;\r\n\r\n /**\r\n * Optional. The minimum value that can be entered in the field.\r\n */\r\n minValue?: number;\r\n\r\n /**\r\n * Optional. The maximum value that can be entered in the field.\r\n */\r\n maxValue?: number;\r\n\r\n /**\r\n * Optional. A boolean indicating whether negative numbers are allowed.\r\n */\r\n allowNegative?: boolean;\r\n\r\n /**\r\n * Optional. The number of decimal places allowed in the number.\r\n */\r\n decimalPrecision?: number;\r\n\r\n /**\r\n * Optional. The state of the number field. Can be 'Valid' or 'Invalid'.\r\n */\r\n state?: States.Valid | States.Invalid;\r\n\r\n /**\r\n * Optional. A note to be displayed below the number field.\r\n */\r\n note?: string;\r\n\r\n /**\r\n * Optional. An icon to be displayed next to the note.\r\n */\r\n noteIcon?: React.ReactNode;\r\n\r\n /**\r\n * Optional. The type of the number field. Can be 'NumberField' or 'NumberInput'.\r\n */\r\n type?: 'NumberField' | 'NumberInput';\r\n\r\n /**\r\n * Optional. The current value of the number field.\r\n */\r\n value?: number;\r\n\r\n /**\r\n * Optional. A function to be called when the value of the number field changes.\r\n */\r\n onChange?: (e: number) => void;\r\n\r\n /**\r\n * Optional. The position of the tooltip when the number overflows. Can be 'top' or 'bottom'.\r\n */\r\n overflowTooltipPosition?: 'top' | 'bottom';\r\n}\r\n\r\nconst NumberField = React.forwardRef<HTMLInputElement, NumberFieldProps>((props, ref) => {\r\n const {\r\n type = 'NumberField',\r\n size = Size.Medium,\r\n note,\r\n noteIcon,\r\n required,\r\n prefix,\r\n interval = 1,\r\n minValue,\r\n maxValue,\r\n allowNegative,\r\n decimalPrecision,\r\n disabled,\r\n readOnly,\r\n state,\r\n value,\r\n placeholder,\r\n onChange,\r\n className,\r\n id,\r\n overflowTooltipPosition,\r\n dataTestId,\r\n ...rest\r\n } = props;\r\n\r\n const [userInput, setUserInput] = React.useState(value ? value.toString() : '');\r\n\r\n const elementRef = useFocusVisibleRef();\r\n\r\n React.useEffect(() => setUserInput(`${value ?? ''}`), [value]);\r\n\r\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n const setVal = (e: string) => {\r\n setUserInput(e);\r\n onChange && onChange(+e);\r\n }\r\n\r\n const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n switch (e.key) {\r\n case 'ArrowUp':\r\n addInterval();\r\n break;\r\n case 'ArrowDown':\r\n subtractInterval();\r\n break;\r\n default:\r\n break;\r\n }\r\n }\r\n\r\n const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {\r\n e.preventDefault();\r\n let simpleRegex = new RegExp(/^[0-9]\\d*$/);\r\n let decimalFormationRegEx = new RegExp(/^[0-9]\\d*\\.$/);\r\n let negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\\d*\\.$/);\r\n\r\n let allowNegativeRegex = new RegExp(/^[-][0-9]\\d*$/);\r\n let decimalPrecisionRegex = decimalPrecision ? new RegExp(`^[0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\r\n let negativeAndDecimalRegex = (decimalPrecision && allowNegative) ? new RegExp(`^[-][0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\r\n\r\n let val = e.target.value;\r\n if (val !== '') {\r\n if (allowNegative && decimalPrecision) {\r\n if (val.length === 1 && val.charAt(0) === '-')\r\n setVal(val);\r\n else {\r\n if ((negativeAndDecimalRegex!.test(val) || decimalPrecisionRegex!.test(val)) && isInRange(val, true))\r\n setVal(val);\r\n\r\n else if ((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.', ''), true))\r\n setVal(val);\r\n\r\n else if ((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val, true))\r\n setVal(val);\r\n }\r\n } else if (allowNegative) {\r\n if (val.length === 1 && val.charAt(0) === '-')\r\n setVal(val);\r\n else if ((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val, false))\r\n setVal(val);\r\n } else if (decimalPrecision && (val.indexOf('.') === val.lastIndexOf('.')) && isInRange(val, true)) {\r\n if (decimalPrecisionRegex!.test(val))\r\n setVal(val);\r\n else if (decimalFormationRegEx.test(val))\r\n setVal(val);\r\n else if (!val.includes('.') && simpleRegex.test(val))\r\n setVal(val);\r\n } else if (simpleRegex.test(val) && isInRange(val, false)) {\r\n setVal(val);\r\n }\r\n }\r\n\r\n if (val === '')\r\n setVal('');\r\n }\r\n\r\n const isInRange = (value: string, isDecimal: boolean): boolean => {\r\n let x = isDecimal ? parseFloat(parseFloat(value).toFixed(decimalPrecision)) : parseInt(value);\r\n if (minValue && minValue > x)\r\n return false;\r\n else if (maxValue && maxValue < x)\r\n return false;\r\n else\r\n return true;\r\n }\r\n\r\n const addInterval = () => {\r\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\r\n val = isNaN(val) && userInput === '' ? (minValue ? minValue - 1 : 0) : val;\r\n if (!isNaN(val)) {\r\n if (decimalPrecision)\r\n val = Math.round((val + interval) * Math.pow(10, decimalPrecision!)) / Math.pow(10, decimalPrecision!);\r\n else\r\n val += 1;\r\n\r\n if (maxValue && maxValue >= val)\r\n setVal(val.toString());\r\n else if (!maxValue)\r\n setVal(val.toString());\r\n }\r\n }\r\n\r\n const subtractInterval = () => {\r\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\r\n val = isNaN(val) && userInput === '' ? (maxValue ? maxValue + 1 : 0) : val;\r\n if (!isNaN(val)) {\r\n if (decimalPrecision)\r\n val = Math.round((val - interval) * Math.pow(10, decimalPrecision!)) / Math.pow(10, decimalPrecision!);\r\n else\r\n val -= 1;\r\n\r\n if ((minValue && minValue <= val) || !minValue) {\r\n if (allowNegative || val >= 0) {\r\n setVal(val.toString());\r\n }\r\n }\r\n }\r\n }\r\n\r\n const isLocked = (input: string, operator: string): boolean => {\r\n let val = decimalPrecision ? parseFloat(input) : parseInt(input);\r\n val = isNaN(val) && userInput === '' ? 0 : val;\r\n let operatorState = false;\r\n if (operator === 'add' && maxValue)\r\n operatorState = val >= maxValue;\r\n\r\n if (operator === 'subtract' && minValue)\r\n operatorState = val <= minValue;\r\n\r\n if (operator === 'subtract' && !minValue && !allowNegative)\r\n operatorState = val <= 0;\r\n\r\n return operatorState;\r\n }\r\n\r\n const renderNumberFieldElements = () => {\r\n return (\r\n <>\r\n {prefix && <PrefixContainer $size={size} $disabled={!!disabled} className=\"operator\">\r\n {prefix}\r\n </PrefixContainer>}\r\n\r\n <OperatorWrapper data-testid={'operators'} $size={size} className=\"operator\">\r\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => subtractInterval()}\r\n useTransparentBackground disabled={disabled || readOnly || isLocked(userInput, 'subtract')}>\r\n <SystemIcons.Minus size=\"14px\"/>\r\n </IconButton>\r\n <div className=\"divider\"></div>\r\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => addInterval()}\r\n useTransparentBackground disabled={disabled || readOnly || isLocked(userInput, 'add')}>\r\n <SystemIcons.Plus size=\"14px\"/>\r\n </IconButton>\r\n </OperatorWrapper>\r\n </>)\r\n }\r\n\r\n const renderNumberInputElements = () => {\r\n return (\r\n <>\r\n <LeftOperator data-testid={'leftOperator'} $size={size} className=\"operator\">\r\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => subtractInterval()}\r\n useTransparentBackground disabled={disabled || readOnly || isLocked(userInput, 'subtract')}>\r\n <SystemIcons.Minus size=\"14px\"/>\r\n </IconButton>\r\n </LeftOperator>\r\n <RightOperator data-testid={'rightOperator'} $size={size} className=\"operator\">\r\n <IconButton tabIndex={0} variant=\"secondary\" shape=\"square\" action={() => addInterval()}\r\n useTransparentBackground disabled={disabled || readOnly || isLocked(userInput, 'add')}>\r\n <SystemIcons.Plus size=\"14px\"/>\r\n </IconButton>\r\n </RightOperator>\r\n </>)\r\n }\r\n\r\n return (\r\n <Container>\r\n <InputContainer $type={type} $size={size} tabIndex={-1}>\r\n <NumberInput $type={type}\r\n id={id}\r\n data-testid={dataTestId}\r\n $fieldSize={size}\r\n $hasPrefix={!!prefix}\r\n placeholder={placeholder ? placeholder : 'Enter number'}\r\n value={userInput}\r\n ref={elementRef}\r\n tabIndex={(disabled || readOnly) ? -1 : 0}\r\n onChange={e => handleInput(e)}\r\n onKeyDown={e => handleKeyPress(e)}\r\n required={required}\r\n className={disabled ? ' disabled' : ''\r\n .concat(readOnly ? ' readOnly' : '')\r\n .concat(state ? ` ${state}` : '')\r\n .concat(className ? ` ${className}` : '')}\r\n {...rest}/>\r\n\r\n {type === 'NumberField' && renderNumberFieldElements()}\r\n {type === 'NumberInput' && renderNumberInputElements()}\r\n {value && <TooltipOverflow position={overflowTooltipPosition} input={elementRef} withArrow={true} maxWidth=\"100%\" size={size} align='end'>\r\n {value?.toString()}\r\n </TooltipOverflow>}\r\n </InputContainer>\r\n\r\n {\r\n note &&\r\n <ValidationMessage type={state || States.Default}>\r\n {noteIcon}\r\n <span>{note}</span>\r\n </ValidationMessage>\r\n }\r\n\r\n </Container>\r\n );\r\n }\r\n )\r\n;\r\n\r\nexport default NumberField;\r\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,QAAQ,2BAA2B;AAC1D,OAAOC,eAAe,MAAM,6BAA6B;AACzD,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,UAAU,QAAO,WAAW;AACpC,SAAQC,kBAAkB,QAAO,WAAW;AAC5C,SAAQC,WAAW,QAAO,UAAU;AACpC,SAAQC,MAAM,EAAEC,WAAW,EAAEC,SAAS,QAAO,WAAW;AACxD,SACEC,iBAAiB,EACjBC,iBAAiB,EACjBC,kBAAkB,QAGb,sBAAsB;AAC7B,SAAQC,IAAI,EAAEC,MAAM,QAAiB,UAAU;AAC/C,SAAQC,iBAAiB,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAE5C,MAAMC,SAAS,GAAGnB,MAAM,CAACoB,GAAG,EAAE;AAE9B,MAAMC,eAAe,GAAGrB,MAAM,CAACoB,GAAwC;AACvE,WAAWE,KAAK,IAAIA,KAAK,CAACC,KAAK,KAAKb,IAAI,CAACc,KAAK,GAAG,MAAM,GAAG,MAAM;AAChE,YAAYF,KAAK,IAAIA,KAAK,CAACC,KAAK,KAAKb,IAAI,CAACc,KAAK,GAAG,MAAM,GAAG,MAAM;AACjE,WAAWF,KAAK,IAAIA,KAAK,CAACG,SAAS,GAAGrB,MAAM,CAACsB,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEC,KAAK,EAAC;AAAU,CAAC,EAAEN,KAAK,CAACO,KAAK,CAAC,GAC7GzB,MAAM,CAACsB,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEG,cAAc,EAAC;AAAQ,CAAC,EAAER,KAAK,CAACO,KAAK,CAAC;AACtF,IAAIP,KAAK,IAAIA,KAAK,CAACC,KAAK,KAAKb,IAAI,CAACc,KAAK,GAAGhB,iBAAiB,CAACC,kBAAkB,CAACsB,OAAO,EAAE,IAAI,CAAC,GAAGxB,iBAAiB,CAACE,kBAAkB,CAACsB,OAAO,EAAE,IAAI,CAAC;AACnJ;AACA,aAAaT,KAAK,IAAIA,KAAK,CAACC,KAAK,KAAKb,IAAI,CAACc,KAAK,GAAG,kBAAkB,GAAG,kBAAkB;AAC1F,CAAC;AAED,MAAMQ,eAAe,GAAGhC,MAAM,CAACoB,GAAoB;AACnD;AACA;AACA;AACA;AACA,YAAYE,KAAK,IAAIA,KAAK,CAACC,KAAK,KAAKb,IAAI,CAACuB,MAAM,GAAG,OAAO,GAAG,EAAE;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBX,KAAK,IAAIlB,MAAM,CAACsB,aAAa,CAAC;EAAEC,aAAa,EAAE,QAAQ;EAAEG,cAAc,EAAE;AAAS,CAAC,EAAER,KAAK,CAACO,KAAK,CAAC;AACnH;AACA;AACA,CAAC;AAED,MAAMK,WAAW,GAAGlC,MAAM,CAACmC,KAA+D;AAC1F;AACA;AACA;AACA;AACA,gBAAgBb,KAAK,IAAIlB,MAAM,CAACsB,aAAa,CAAC;EAAEC,aAAa,EAAE,YAAY;EAAEG,cAAc,EAAE;AAAW,CAAC,EAAER,KAAK,CAACO,KAAK,CAAC;AACvH,gCAAgCP,KAAK,IAAIlB,MAAM,CAACsB,aAAa,CAAC;EAACC,aAAa,EAAC,QAAQ;EAAEG,cAAc,EAAC;AAAU,CAAC,EAAER,KAAK,CAACO,KAAK,CAAC;AAC/H;AACA,WAAWP,KAAK,IAAIlB,MAAM,CAACsB,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEG,cAAc,EAAC;AAAQ,CAAC,EAAER,KAAK,CAACO,KAAK,CAAC;AACtG;AACA,IAAIP,KAAK,IAAIA,KAAK,CAACc,UAAU,KAAK1B,IAAI,CAACc,KAAK,GAAGhB,iBAAiB,CAACC,kBAAkB,CAACsB,OAAO,EAAE3B,MAAM,CAACsB,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEG,cAAc,EAAC;AAAS,CAAC,EAAER,KAAK,CAACO,KAAK,CAAC,CAAC,GAC5KtB,iBAAiB,CAACE,kBAAkB,CAACsB,OAAO,EAAE3B,MAAM,CAACsB,aAAa,CAAC;EAACC,aAAa,EAAC,MAAM;EAAEG,cAAc,EAAC;AAAS,CAAC,EAAER,KAAK,CAACO,KAAK,CAAC,CAAC;AACvI,IAAIP,KAAK,IAAIA,KAAK,CAACe,KAAK,KAAK,aAAa,GAAG;AAC7C,mBAAmBf,KAAK,CAACc,UAAU,KAAK1B,IAAI,CAACc,KAAK,GAAG,qBAAqB,GAAG,qBAAqB;AAClG,wBAAwBF,KAAK,CAACgB,UAAU,GAAG,MAAM,GAAG,EAAE;AACtD,KAAK,GAAG,EAAE;AACV,IAAIhB,KAAK,IAAIA,KAAK,CAACe,KAAK,KAAK,aAAa,GAAG;AAC7C,mBAAmBf,KAAK,CAACc,UAAU,KAAK1B,IAAI,CAACc,KAAK,GAAG,WAAW,GAAG,WAAW;AAC9E,KAAK,GAAG,EAAE;AACV;AACA,MAAMF,KAAK,IAAIA,KAAK,CAACc,UAAU,KAAK1B,IAAI,CAACc,KAAK,GAAGhB,iBAAiB,CAACC,kBAAkB,CAAC8B,MAAM,EAAE,IAAI,CAAC,GAAGhC,iBAAiB,CAACE,kBAAkB,CAAC8B,MAAM,EAAE,IAAI,CAAC;AACxJ;AACA;AACA;AACA,kCAAkCjB,KAAK,IAAIlB,MAAM,CAACsB,aAAa,CAAC;EAAEC,aAAa,EAAC,QAAQ;EAAEC,KAAK,EAAC;AAAQ,CAAC,EAAEN,KAAK,CAACO,KAAK,CAAC;AACvH;AACA;AACA;AACA,MAAMxB,WAAW;AACjB;AACA;AACA;AACA,kCAAkCiB,KAAK,IAAIlB,MAAM,CAACsB,aAAa,CAAC;EAAEC,aAAa,EAAC,QAAQ;EAAEC,KAAK,EAAC;AAAQ,CAAC,EAAEN,KAAK,CAACO,KAAK,CAAC;AACvH;AACA;AACA;AACA,kCAAkCP,KAAK,IAAIlB,MAAM,CAACsB,aAAa,CAAC;EAAEC,aAAa,EAAC,QAAQ;EAAEC,KAAK,EAAC;AAAW,CAAC,EAAEN,KAAK,CAACO,KAAK,CAAC;AAC1H;AACA,aAAaP,KAAK,IAAIlB,MAAM,CAACsB,aAAa,CAAC;EAAEC,aAAa,EAAC,MAAM;EAAEC,KAAK,EAAC;AAAW,CAAC,EAAEN,KAAK,CAACO,KAAK,CAAC;AACnG;AACA;AACA;AACA,eAAeP,KAAK,IAAIlB,MAAM,CAACsB,aAAa,CAAC;EAAEC,aAAa,EAAC,MAAM;EAAEC,KAAK,EAAC;AAAW,CAAC,EAAEN,KAAK,CAACO,KAAK,CAAC;AACrG;AACA;AACA;AACA;AACA,kBAAkBP,KAAK,IAAIlB,MAAM,CAACsB,aAAa,CAAC;EAAEC,aAAa,EAAE,YAAY;EAAEC,KAAK,EAAE;AAAY,CAAC,EAAEN,KAAK,CAACO,KAAK,CAAC;AACjH,kCAAkCP,KAAK,IAAIlB,MAAM,CAACsB,aAAa,CAAC;EAAEC,aAAa,EAAE,QAAQ;EAAEG,cAAc,EAAE;AAAW,CAAC,EAAER,KAAK,CAACO,KAAK,CAAC;AACrI;AACA;AACA,aAAaP,KAAK,IAAIlB,MAAM,CAACsB,aAAa,CAAC;EAAEC,aAAa,EAAE,MAAM;EAAEG,cAAc,EAAE;AAAU,CAAC,EAAER,KAAK,CAACO,KAAK,CAAC;AAC7G;AACA;AACA;AACA,kCAAkCP,KAAK,IAAIlB,MAAM,CAACsB,aAAa,CAAC;EAAEC,aAAa,EAAC,QAAQ;EAAEG,cAAc,EAAC;AAAW,CAAC,EAAER,KAAK,CAACO,KAAK,CAAC;AACnI;AACA;AACA;AACA,kCAAkCP,KAAK,IAAIlB,MAAM,CAACsB,aAAa,CAAC;EAAEC,aAAa,EAAC,QAAQ;EAAEG,cAAc,EAAC;AAAW,CAAC,EAAER,KAAK,CAACO,KAAK,CAAC;AACnI;AACA,CAAC;AAED,MAAMW,cAAc,GAAGxC,MAAM,CAACoB,GAAmC;AACjE,eAAeE,KAAK,IAAIA,KAAK,CAACe,KAAK,KAAK,aAAa,GAAG,OAAO,GAAG,OAAO;AACzE,YAAYf,KAAK,IAAIA,KAAK,CAACC,KAAK,KAAKb,IAAI,CAACc,KAAK,GAAG,MAAM,GAAG,MAAM;AACjE;AACA;AACA;AACA;AACA;AACA,eAAelB,SAAS,CAACmC,KAAK;AAC9B;AACA;AACA,IAAI3C,cAAc,CAAC,OAAO,CAAC;AAC3B,CAAC;AAED,MAAM4C,YAAY,GAAG1C,MAAM,CAACoB,GAAoB;AAChD;AACA,SAASE,KAAK,IAAIA,KAAK,CAACC,KAAK,KAAKb,IAAI,CAACc,KAAK,GAAG,GAAG,GAAG,KAAK;AAC1D;AACA,CAAC;AAED,MAAMmB,aAAa,GAAG3C,MAAM,CAACoB,GAAoB;AACjD;AACA,SAASE,KAAK,IAAIA,KAAK,CAACC,KAAK,KAAKb,IAAI,CAACc,KAAK,GAAG,GAAG,GAAG,KAAK;AAC1D;AACA,CAAC;AA2ED,MAAMoB,WAAW,gBAAG/C,KAAK,CAACgD,UAAU,CAAqC,CAACvB,KAAK,EAAEwB,GAAG,KAAK;EACnF,MAAM;MACJC,IAAI,GAAG,aAAa;MACpBC,IAAI,GAAGtC,IAAI,CAACuB,MAAM;MAClBgB,IAAI;MACJC,QAAQ;MACRC,QAAQ;MACRC,MAAM;MACNC,QAAQ,GAAG,CAAC;MACZC,QAAQ;MACRC,QAAQ;MACRC,aAAa;MACbC,gBAAgB;MAChBC,QAAQ;MACRC,QAAQ;MACR/B,KAAK;MACLgC,KAAK;MACLC,WAAW;MACXC,QAAQ;MACRC,SAAS;MACTC,EAAE;MACFC,uBAAuB;MACvBC;IAEF,CAAC,GAAG5C,KAAK;IADJ6C,IAAI,GAAAC,wBAAA,CACL9C,KAAK,EAAA+C,SAAA;EAET,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG1E,KAAK,CAAC2E,QAAQ,CAACZ,KAAK,GAAGA,KAAK,CAACa,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;EAE/E,MAAMC,UAAU,GAAGxE,kBAAkB,CAAC,CAAC;EAEvCL,KAAK,CAAC8E,SAAS,CAAC,MAAMJ,YAAY,CAAC,GAAGX,KAAK,IAAI,EAAE,EAAE,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAE9D/D,KAAK,CAAC+E,mBAAmB,CAAC9B,GAAG,EAAE,MAAM4B,UAAU,CAACG,OAAO,EAAE,CAACH,UAAU,CAAC,CAAC;EAEtE,MAAMI,MAAM,GAAIC,CAAS,IAAK;IAC5BR,YAAY,CAACQ,CAAC,CAAC;IACfjB,QAAQ,IAAIA,QAAQ,CAAC,CAACiB,CAAC,CAAC;EAC1B,CAAC;EAED,MAAMC,cAAc,GAAID,CAAwC,IAAK;IACnE,QAAQA,CAAC,CAACE,GAAG;MACX,KAAK,SAAS;QACZC,WAAW,CAAC,CAAC;QACb;MACF,KAAK,WAAW;QACdC,gBAAgB,CAAC,CAAC;QAClB;MACF;QACE;IACJ;EACF,CAAC;EAED,MAAMC,WAAW,GAAIL,CAAsC,IAAK;IAC9DA,CAAC,CAACM,cAAc,CAAC,CAAC;IAClB,IAAIC,WAAW,GAAG,IAAIC,MAAM,CAAC,YAAY,CAAC;IAC1C,IAAIC,qBAAqB,GAAG,IAAID,MAAM,CAAC,cAAc,CAAC;IACtD,IAAIE,6BAA6B,GAAG,IAAIF,MAAM,CAAC,iBAAiB,CAAC;IAEjE,IAAIG,kBAAkB,GAAG,IAAIH,MAAM,CAAC,eAAe,CAAC;IACpD,IAAII,qBAAqB,GAAGlC,gBAAgB,GAAG,IAAI8B,MAAM,CAAC,2BAA2B9B,gBAAgB,GAAC,CAAC,IAAI,CAAC,GAAGmC,SAAS;IACxH,IAAIC,uBAAuB,GAAIpC,gBAAgB,IAAID,aAAa,GAAI,IAAI+B,MAAM,CAAC,8BAA8B9B,gBAAgB,GAAC,CAAC,IAAI,CAAC,GAAGmC,SAAS;IAEhJ,IAAIE,GAAG,GAAGf,CAAC,CAACgB,MAAM,CAACnC,KAAK;IACxB,IAAIkC,GAAG,KAAK,EAAE,EAAE;MACd,IAAItC,aAAa,IAAIC,gBAAgB,EAAE;QACrC,IAAIqC,GAAG,CAACE,MAAM,KAAK,CAAC,IAAIF,GAAG,CAACG,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,EAC3CnB,MAAM,CAACgB,GAAG,CAAC,CAAC,KACT;UACH,IAAI,CAACD,uBAAuB,CAAEK,IAAI,CAACJ,GAAG,CAAC,IAAIH,qBAAqB,CAAEO,IAAI,CAACJ,GAAG,CAAC,KAAKK,SAAS,CAACL,GAAG,EAAE,IAAI,CAAC,EAClGhB,MAAM,CAACgB,GAAG,CAAC,CAAC,KAET,IAAI,CAACL,6BAA6B,CAACS,IAAI,CAACJ,GAAG,CAAC,IAAIN,qBAAqB,CAACU,IAAI,CAACJ,GAAG,CAAC,KAAKK,SAAS,CAACL,GAAG,CAACM,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,EAC5HtB,MAAM,CAACgB,GAAG,CAAC,CAAC,KAET,IAAI,CAACJ,kBAAkB,CAACQ,IAAI,CAACJ,GAAG,CAAC,IAAIR,WAAW,CAACY,IAAI,CAACJ,GAAG,CAAC,KAAKK,SAAS,CAACL,GAAG,EAAE,IAAI,CAAC,EACtFhB,MAAM,CAACgB,GAAG,CAAC;QACf;MACF,CAAC,MAAM,IAAItC,aAAa,EAAE;QACxB,IAAIsC,GAAG,CAACE,MAAM,KAAK,CAAC,IAAIF,GAAG,CAACG,MAAM,CAAC,CAAC,CAAC,KAAK,GAAG,EAC3CnB,MAAM,CAACgB,GAAG,CAAC,CAAC,KACT,IAAI,CAACJ,kBAAkB,CAACQ,IAAI,CAACJ,GAAG,CAAC,IAAIR,WAAW,CAACY,IAAI,CAACJ,GAAG,CAAC,KAAKK,SAAS,CAACL,GAAG,EAAE,KAAK,CAAC,EACvFhB,MAAM,CAACgB,GAAG,CAAC;MACf,CAAC,MAAM,IAAIrC,gBAAgB,IAAKqC,GAAG,CAACO,OAAO,CAAC,GAAG,CAAC,KAAKP,GAAG,CAACQ,WAAW,CAAC,GAAG,CAAE,IAAIH,SAAS,CAACL,GAAG,EAAE,IAAI,CAAC,EAAE;QAClG,IAAIH,qBAAqB,CAAEO,IAAI,CAACJ,GAAG,CAAC,EAClChB,MAAM,CAACgB,GAAG,CAAC,CAAC,KACT,IAAIN,qBAAqB,CAACU,IAAI,CAACJ,GAAG,CAAC,EACtChB,MAAM,CAACgB,GAAG,CAAC,CAAC,KACT,IAAI,CAACA,GAAG,CAACS,QAAQ,CAAC,GAAG,CAAC,IAAIjB,WAAW,CAACY,IAAI,CAACJ,GAAG,CAAC,EAClDhB,MAAM,CAACgB,GAAG,CAAC;MACf,CAAC,MAAM,IAAIR,WAAW,CAACY,IAAI,CAACJ,GAAG,CAAC,IAAIK,SAAS,CAACL,GAAG,EAAE,KAAK,CAAC,EAAE;QACzDhB,MAAM,CAACgB,GAAG,CAAC;MACb;IACF;IAEA,IAAIA,GAAG,KAAK,EAAE,EACZhB,MAAM,CAAC,EAAE,CAAC;EACd,CAAC;EAED,MAAMqB,SAAS,GAAGA,CAACvC,KAAa,EAAE4C,SAAkB,KAAc;IAChE,IAAIC,CAAC,GAAGD,SAAS,GAAGE,UAAU,CAACA,UAAU,CAAC9C,KAAK,CAAC,CAAC+C,OAAO,CAAClD,gBAAgB,CAAC,CAAC,GAAGmD,QAAQ,CAAChD,KAAK,CAAC;IAC7F,IAAIN,QAAQ,IAAIA,QAAQ,GAAGmD,CAAC,EAC1B,OAAO,KAAK,CAAC,KACV,IAAIlD,QAAQ,IAAIA,QAAQ,GAAGkD,CAAC,EAC/B,OAAO,KAAK,CAAC,KAEb,OAAO,IAAI;EACf,CAAC;EAED,MAAMvB,WAAW,GAAGA,CAAA,KAAM;IACxB,IAAIY,GAAG,GAAGrC,gBAAgB,GAAGiD,UAAU,CAACpC,SAAS,CAAC,GAAGsC,QAAQ,CAACtC,SAAS,CAAC;IACxEwB,GAAG,GAAGe,KAAK,CAACf,GAAG,CAAC,IAAIxB,SAAS,KAAK,EAAE,GAAIhB,QAAQ,GAAGA,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAIwC,GAAG;IAC1E,IAAI,CAACe,KAAK,CAACf,GAAG,CAAC,EAAE;MACf,IAAIrC,gBAAgB,EAClBqC,GAAG,GAAGgB,IAAI,CAACC,KAAK,CAAC,CAACjB,GAAG,GAAGzC,QAAQ,IAAIyD,IAAI,CAACE,GAAG,CAAC,EAAE,EAAEvD,gBAAiB,CAAC,CAAC,GAAGqD,IAAI,CAACE,GAAG,CAAC,EAAE,EAAEvD,gBAAiB,CAAC,CAAC,KAEvGqC,GAAG,IAAI,CAAC;MAEV,IAAIvC,QAAQ,IAAIA,QAAQ,IAAIuC,GAAG,EAC7BhB,MAAM,CAACgB,GAAG,CAACrB,QAAQ,CAAC,CAAC,CAAC,CAAC,KACpB,IAAI,CAAClB,QAAQ,EAChBuB,MAAM,CAACgB,GAAG,CAACrB,QAAQ,CAAC,CAAC,CAAC;IAC1B;EACF,CAAC;EAED,MAAMU,gBAAgB,GAAGA,CAAA,KAAM;IAC7B,IAAIW,GAAG,GAAGrC,gBAAgB,GAAGiD,UAAU,CAACpC,SAAS,CAAC,GAAGsC,QAAQ,CAACtC,SAAS,CAAC;IACxEwB,GAAG,GAAGe,KAAK,CAACf,GAAG,CAAC,IAAIxB,SAAS,KAAK,EAAE,GAAIf,QAAQ,GAAGA,QAAQ,GAAG,CAAC,GAAG,CAAC,GAAIuC,GAAG;IAC1E,IAAI,CAACe,KAAK,CAACf,GAAG,CAAC,EAAE;MACf,IAAIrC,gBAAgB,EAClBqC,GAAG,GAAGgB,IAAI,CAACC,KAAK,CAAC,CAACjB,GAAG,GAAGzC,QAAQ,IAAIyD,IAAI,CAACE,GAAG,CAAC,EAAE,EAAEvD,gBAAiB,CAAC,CAAC,GAAGqD,IAAI,CAACE,GAAG,CAAC,EAAE,EAAEvD,gBAAiB,CAAC,CAAC,KAEvGqC,GAAG,IAAI,CAAC;MAEV,IAAKxC,QAAQ,IAAIA,QAAQ,IAAIwC,GAAG,IAAK,CAACxC,QAAQ,EAAE;QAC9C,IAAIE,aAAa,IAAIsC,GAAG,IAAI,CAAC,EAAE;UAC7BhB,MAAM,CAACgB,GAAG,CAACrB,QAAQ,CAAC,CAAC,CAAC;QACxB;MACF;IACF;EACF,CAAC;EAED,MAAMwC,QAAQ,GAAGA,CAAC9E,KAAa,EAAE+E,QAAgB,KAAc;IAC7D,IAAIpB,GAAG,GAAGrC,gBAAgB,GAAGiD,UAAU,CAACvE,KAAK,CAAC,GAAGyE,QAAQ,CAACzE,KAAK,CAAC;IAChE2D,GAAG,GAAGe,KAAK,CAACf,GAAG,CAAC,IAAIxB,SAAS,KAAK,EAAE,GAAG,CAAC,GAAGwB,GAAG;IAC9C,IAAIqB,aAAa,GAAG,KAAK;IACzB,IAAID,QAAQ,KAAK,KAAK,IAAI3D,QAAQ,EAChC4D,aAAa,GAAGrB,GAAG,IAAIvC,QAAQ;IAEjC,IAAI2D,QAAQ,KAAK,UAAU,IAAI5D,QAAQ,EACrC6D,aAAa,GAAGrB,GAAG,IAAIxC,QAAQ;IAEjC,IAAI4D,QAAQ,KAAK,UAAU,IAAI,CAAC5D,QAAQ,IAAI,CAACE,aAAa,EACxD2D,aAAa,GAAGrB,GAAG,IAAI,CAAC;IAE1B,OAAOqB,aAAa;EACtB,CAAC;EAED,MAAMC,yBAAyB,GAAGA,CAAA,KAAM;IACtC,oBACEpG,KAAA,CAAAE,SAAA;MAAAmG,QAAA,GACGjE,MAAM,iBAAItC,IAAA,CAACO,eAAe;QAACE,KAAK,EAAEyB,IAAK;QAACvB,SAAS,EAAE,CAAC,CAACiC,QAAS;QAACK,SAAS,EAAC,UAAU;QAAAsD,QAAA,EACjFjE;MAAM,CACQ,CAAC,eAElBpC,KAAA,CAACgB,eAAe;QAAC,eAAa,WAAY;QAACT,KAAK,EAAEyB,IAAK;QAACe,SAAS,EAAC,UAAU;QAAAsD,QAAA,gBAC1EvG,IAAA,CAACb,UAAU;UAACqH,QAAQ,EAAE,CAAE;UAACC,OAAO,EAAC,WAAW;UAACC,KAAK,EAAC,QAAQ;UAACC,MAAM,EAAEA,CAAA,KAAMtC,gBAAgB,CAAC,CAAE;UACjFuC,wBAAwB;UAAChE,QAAQ,EAAEA,QAAQ,IAAIC,QAAQ,IAAIsD,QAAQ,CAAC3C,SAAS,EAAE,UAAU,CAAE;UAAA+C,QAAA,eACrGvG,IAAA,CAACX,WAAW,CAACwH,KAAK;YAAC3E,IAAI,EAAC;UAAM,CAAC;QAAC,CACtB,CAAC,eACblC,IAAA;UAAKiD,SAAS,EAAC;QAAS,CAAM,CAAC,eAC/BjD,IAAA,CAACb,UAAU;UAACqH,QAAQ,EAAE,CAAE;UAACC,OAAO,EAAC,WAAW;UAACC,KAAK,EAAC,QAAQ;UAACC,MAAM,EAAEA,CAAA,KAAMvC,WAAW,CAAC,CAAE;UAC5EwC,wBAAwB;UAAChE,QAAQ,EAAEA,QAAQ,IAAIC,QAAQ,IAAIsD,QAAQ,CAAC3C,SAAS,EAAE,KAAK,CAAE;UAAA+C,QAAA,eAChGvG,IAAA,CAACX,WAAW,CAACyH,IAAI;YAAC5E,IAAI,EAAC;UAAM,CAAC;QAAC,CACrB,CAAC;MAAA,CACE,CAAC;IAAA,CAClB,CAAC;EACP,CAAC;EAED,MAAM6E,yBAAyB,GAAGA,CAAA,KAAM;IACtC,oBACE7G,KAAA,CAAAE,SAAA;MAAAmG,QAAA,gBACEvG,IAAA,CAAC4B,YAAY;QAAC,eAAa,cAAe;QAACnB,KAAK,EAAEyB,IAAK;QAACe,SAAS,EAAC,UAAU;QAAAsD,QAAA,eAC1EvG,IAAA,CAACb,UAAU;UAACqH,QAAQ,EAAE,CAAE;UAACC,OAAO,EAAC,WAAW;UAACC,KAAK,EAAC,QAAQ;UAACC,MAAM,EAAEA,CAAA,KAAMtC,gBAAgB,CAAC,CAAE;UACjFuC,wBAAwB;UAAChE,QAAQ,EAAEA,QAAQ,IAAIC,QAAQ,IAAIsD,QAAQ,CAAC3C,SAAS,EAAE,UAAU,CAAE;UAAA+C,QAAA,eACrGvG,IAAA,CAACX,WAAW,CAACwH,KAAK;YAAC3E,IAAI,EAAC;UAAM,CAAC;QAAC,CACtB;MAAC,CACD,CAAC,eACflC,IAAA,CAAC6B,aAAa;QAAC,eAAa,eAAgB;QAACpB,KAAK,EAAEyB,IAAK;QAACe,SAAS,EAAC,UAAU;QAAAsD,QAAA,eAC5EvG,IAAA,CAACb,UAAU;UAACqH,QAAQ,EAAE,CAAE;UAACC,OAAO,EAAC,WAAW;UAACC,KAAK,EAAC,QAAQ;UAACC,MAAM,EAAEA,CAAA,KAAMvC,WAAW,CAAC,CAAE;UAC5EwC,wBAAwB;UAAChE,QAAQ,EAAEA,QAAQ,IAAIC,QAAQ,IAAIsD,QAAQ,CAAC3C,SAAS,EAAE,KAAK,CAAE;UAAA+C,QAAA,eAChGvG,IAAA,CAACX,WAAW,CAACyH,IAAI;YAAC5E,IAAI,EAAC;UAAM,CAAC;QAAC,CACrB;MAAC,CACA,CAAC;IAAA,CAChB,CAAC;EACP,CAAC;EAED,oBACEhC,KAAA,CAACG,SAAS;IAAAkG,QAAA,gBACRrG,KAAA,CAACwB,cAAc;MAACH,KAAK,EAAEU,IAAK;MAACxB,KAAK,EAAEyB,IAAK;MAACsE,QAAQ,EAAE,CAAC,CAAE;MAAAD,QAAA,gBACrDvG,IAAA,CAACoB,WAAW,EAAA4F,aAAA;QAACzF,KAAK,EAAEU,IAAK;QACXiB,EAAE,EAAEA,EAAG;QACR,eAAaE,UAAW;QACxB9B,UAAU,EAAEY,IAAK;QACjBV,UAAU,EAAE,CAAC,CAACc,MAAO;QACrBS,WAAW,EAAEA,WAAW,GAAGA,WAAW,GAAG,cAAe;QACxDD,KAAK,EAAEU,SAAU;QACjBxB,GAAG,EAAE4B,UAAW;QAChB4C,QAAQ,EAAG5D,QAAQ,IAAIC,QAAQ,GAAI,CAAC,CAAC,GAAG,CAAE;QAC1CG,QAAQ,EAAEiB,CAAC,IAAIK,WAAW,CAACL,CAAC,CAAE;QAC9BgD,SAAS,EAAEhD,CAAC,IAAIC,cAAc,CAACD,CAAC,CAAE;QAClC5B,QAAQ,EAAEA,QAAS;QACnBY,SAAS,EAAEL,QAAQ,GAAG,WAAW,GAAG,EAAE,CACnCsE,MAAM,CAACrE,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAC,CACnCqE,MAAM,CAACpG,KAAK,GAAG,IAAIA,KAAK,EAAE,GAAG,EAAE,CAAC,CAChCoG,MAAM,CAACjE,SAAS,GAAG,IAAIA,SAAS,EAAE,GAAG,EAAE;MAAE,GACxCI,IAAI,CAAE,CAAC,EAEvBpB,IAAI,KAAK,aAAa,IAAIqE,yBAAyB,CAAC,CAAC,EACrDrE,IAAI,KAAK,aAAa,IAAI8E,yBAAyB,CAAC,CAAC,EACrDjE,KAAK,iBAAI9C,IAAA,CAACf,eAAe;QAACkI,QAAQ,EAAEhE,uBAAwB;QAAC9B,KAAK,EAAEuC,UAAW;QAACwD,SAAS,EAAE,IAAK;QAACC,QAAQ,EAAC,MAAM;QAACnF,IAAI,EAAEA,IAAK;QAACoF,KAAK,EAAC,KAAK;QAAAf,QAAA,EACtIzD,KAAK,EAAEa,QAAQ,CAAC;MAAC,CACH,CAAC;IAAA,CACJ,CAAC,EAGfxB,IAAI,iBACJjC,KAAA,CAACJ,iBAAiB;MAACmC,IAAI,EAAEnB,KAAK,IAAIjB,MAAM,CAAC0H,OAAQ;MAAAhB,QAAA,GAC9CnE,QAAQ,eACTpC,IAAA;QAAAuG,QAAA,EAAOpE;MAAI,CAAO,CAAC;IAAA,CACF,CAAC;EAAA,CAGb,CAAC;AAEhB,CACF,CAAC;AACFL,WAAA,CAAA0F,SAAA;EA3SClF,MAAM,EAAAmF,GAAA,CAAAC,MAAA;EAKNnF,QAAQ,EAAAkF,GAAA,CAAAE,MAAA;EAKRnF,QAAQ,EAAAiF,GAAA,CAAAE,MAAA;EAKRlF,QAAQ,EAAAgF,GAAA,CAAAE,MAAA;EAKRjF,aAAa,EAAA+E,GAAA,CAAAG,IAAA;EAKbjF,gBAAgB,EAAA8E,GAAA,CAAAE,MAAA;EAUhBxF,IAAI,EAAAsF,GAAA,CAAAC,MAAA;EAKJtF,QAAQ,EAAAqF,GAAA,CAAAI,IAAA;EAKR5F,IAAI,EAAAwF,GAAA,CAAAK,KAAA,EAAG,aAAa,EAAG,aAAa;EAKpChF,KAAK,EAAA2E,GAAA,CAAAE,MAAA;EAKL3E,QAAQ,EAAAyE,GAAA,CAAAM,IAAA;EAKR5E,uBAAuB,EAAAsE,GAAA,CAAAK,KAAA,EAAG,KAAK,EAAG,QAAQ;AAAA;AAiP5C,eAAehG,WAAW","ignoreList":[]}
|
|
@@ -248,8 +248,8 @@ RadioButton.propTypes = {
|
|
|
248
248
|
id: _propTypes.default.string,
|
|
249
249
|
selected: _propTypes.default.bool.isRequired,
|
|
250
250
|
select: _propTypes.default.func.isRequired,
|
|
251
|
-
label: _propTypes.default.string,
|
|
252
|
-
additionalLabel: _propTypes.default.string,
|
|
251
|
+
label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
|
|
252
|
+
additionalLabel: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
|
|
253
253
|
invalid: _propTypes.default.bool,
|
|
254
254
|
disabled: _propTypes.default.bool,
|
|
255
255
|
iconPointerEventsTransparent: _propTypes.default.bool,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_icons","_styles","_types","_common","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","StyledRadioButton","styled","div","props","$margin","COLORS","generateToken","componentType","defaultVariant","theme","$selected","$invalid","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","ComponentMStyling","ComponentLStyling","focusStyles","state","RadioButton","forwardRef","_ref","ref","id","selected","label","additionalLabel","invalid","select","disabled","margin","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties2","onKeyPress","keyCode","Size","Medium","cls","jsxs","onClick","onMouseDown","defaultOnMouseDownHandler","onKeyDown","$disabled","tabIndex","children","jsx","SystemIcons","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_propTypes","string","bool","isRequired","func","number","_default","exports"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size, Testable} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst StyledRadioButton = styled.div<{ $margin?: string, $disabled?: boolean, $invalid?: boolean, $selected?: boolean }>`\r\n display: flex;\r\n width: 100%;\r\n min-height: 48px;\r\n min-width: 48px;\r\n\r\n ${props => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n cursor: pointer;\r\n\r\n color: ${props => COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme)};\r\n\r\n .pointerTransparent {\r\n pointer-events: none;\r\n }\r\n\r\n .radio-button-icon {\r\n margin: 6px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n height: 36px;\r\n min-width: 36px;\r\n border-radius: 50%;\r\n\r\n svg {\r\n color: ${props => (props.$selected ? COLORS.generateToken({componentType:'icon', defaultVariant:'selected'}, props.theme) : \r\n props.$invalid ? COLORS.generateToken({componentType:'icon', defaultVariant:'critical'}, props.theme) : COLORS.generateToken({componentType:'icon',defaultVariant:'subtle'}, props.theme))};\r\n }\r\n }\r\n\r\n .radio-button-label {\r\n user-select: none;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n label {\r\n cursor: inherit;\r\n }\r\n\r\n span {\r\n ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n .radio-button-label {\r\n padding-top: 14px;\r\n }\r\n }\r\n\r\n &.medium {\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n .radio-button-label {\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n &.large {\r\n ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n .radio-button-label {\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n &:not(.disabled):focus {\r\n ${focusStyles}\r\n }\r\n\r\n &:not(.disabled):hover {\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'hover' }, props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.generateToken({ componentType:'icon', state:'hover' }, props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &:not(.disabled):active {\r\n .radio-button-icon {\r\n background: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'active' }, props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.generateToken({ componentType:'icon', state:'active' }, props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n\r\n .radio-button-icon,\r\n .radio-button-label {\r\n pointer-events: none;\r\n }\r\n\r\n .radio-button-icon {\r\n background-color: transparent;\r\n }\r\n\r\n .radio-button-icon svg {\r\n color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)};\r\n }\r\n }\r\n\r\n &.dropdown-hover:not(.disabled) {\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover' }, props.theme)};\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {\r\n /** Optional. Id of the component */\r\n id?: string;\r\n /** Required. Current state of the component. */\r\n selected: boolean;\r\n /** Required. Handler to be called when user selects/unselected the radio button. */\r\n select: (selected: boolean) => void;\r\n /** Optional. Label to be shown on the right side of the radio button. */\r\n label?: string;\r\n /** Optional. Secondary label to be shown under the main 'label' */\r\n additionalLabel?: string;\r\n /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */\r\n invalid?: boolean;\r\n /** Optional. If disabled, user can not interact with the component. */\r\n disabled?: boolean;\r\n /** Optional. If set, then 'pointer-events: none' will be set on the component. */\r\n iconPointerEventsTransparent?: boolean;\r\n /** Optional. Margin style attribute to be set on the top level tag of the component. */\r\n margin?: string;\r\n /** Optional. Size of the radio button, defaults to 'medium'. */\r\n size?: Size.Small | Size.Medium | Size.Large;\r\n /** Optional. TabIndex attribute to be set on the component. */\r\n tabIndexVal?: number;\r\n /** Optional. Extra classname to be set on the container of the component. */\r\n className?: string;\r\n}\r\n\r\nconst RadioButton = React.forwardRef<HTMLDivElement, RadioButtonProps>(({\r\n id,\r\n selected,\r\n label,\r\n additionalLabel,\r\n invalid,\r\n select,\r\n disabled,\r\n margin,\r\n iconPointerEventsTransparent,\r\n size,\r\n tabIndexVal,\r\n className,\r\n dataTestId,\r\n ...rest\r\n }: RadioButtonProps, ref) => {\r\n const onKeyPress = (e: any) => {\r\n if (e.keyCode === 13 && !disabled) {\r\n select(!selected);\r\n }\r\n };\r\n\r\n size = size ?? Size.Medium;\r\n\r\n const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\r\n\r\n return (\r\n <StyledRadioButton key={id}\r\n $margin={margin}\r\n ref={ref}\r\n onClick={() => !disabled && select(!selected)}\r\n onMouseDown={defaultOnMouseDownHandler}\r\n onKeyDown={onKeyPress}\r\n $disabled={disabled}\r\n className={cls}\r\n tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n $invalid={invalid}\r\n $selected={selected}\r\n {...rest}>\r\n <div className={'radio-button-icon'} id={id} data-testid={dataTestId}>\r\n {selected && <SystemIcons.RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n {!selected &&\r\n <SystemIcons.RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n </div>\r\n <div className={'radio-button-label'}>\r\n {label && <label htmlFor={id}>{label}</label>}\r\n {additionalLabel !== undefined && <span>{additionalLabel}</span>}\r\n </div>\r\n </StyledRadioButton>\r\n );\r\n});\r\n\r\nexport default RadioButton;\r\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"RadioButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_icons","_styles","_types","_common","_jsxRuntime","_excluded","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","StyledRadioButton","styled","div","props","$margin","COLORS","generateToken","componentType","defaultVariant","theme","$selected","$invalid","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","ComponentMStyling","ComponentLStyling","focusStyles","state","RadioButton","forwardRef","_ref","ref","id","selected","label","additionalLabel","invalid","select","disabled","margin","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties2","onKeyPress","keyCode","Size","Medium","cls","jsxs","onClick","onMouseDown","defaultOnMouseDownHandler","onKeyDown","$disabled","tabIndex","children","jsx","SystemIcons","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_propTypes","string","bool","isRequired","func","oneOfType","node","number","_default","exports"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size, Testable} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst StyledRadioButton = styled.div<{ $margin?: string, $disabled?: boolean, $invalid?: boolean, $selected?: boolean }>`\r\n display: flex;\r\n width: 100%;\r\n min-height: 48px;\r\n min-width: 48px;\r\n\r\n ${props => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n cursor: pointer;\r\n\r\n color: ${props => COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme)};\r\n\r\n .pointerTransparent {\r\n pointer-events: none;\r\n }\r\n\r\n .radio-button-icon {\r\n margin: 6px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n height: 36px;\r\n min-width: 36px;\r\n border-radius: 50%;\r\n\r\n svg {\r\n color: ${props => (props.$selected ? COLORS.generateToken({componentType:'icon', defaultVariant:'selected'}, props.theme) : \r\n props.$invalid ? COLORS.generateToken({componentType:'icon', defaultVariant:'critical'}, props.theme) : COLORS.generateToken({componentType:'icon',defaultVariant:'subtle'}, props.theme))};\r\n }\r\n }\r\n\r\n .radio-button-label {\r\n user-select: none;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n label {\r\n cursor: inherit;\r\n }\r\n\r\n span {\r\n ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n .radio-button-label {\r\n padding-top: 14px;\r\n }\r\n }\r\n\r\n &.medium {\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n .radio-button-label {\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n &.large {\r\n ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n .radio-button-label {\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n &:not(.disabled):focus {\r\n ${focusStyles}\r\n }\r\n\r\n &:not(.disabled):hover {\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'hover' }, props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.generateToken({ componentType:'icon', state:'hover' }, props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &:not(.disabled):active {\r\n .radio-button-icon {\r\n background: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'active' }, props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.generateToken({ componentType:'icon', state:'active' }, props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n\r\n .radio-button-icon,\r\n .radio-button-label {\r\n pointer-events: none;\r\n }\r\n\r\n .radio-button-icon {\r\n background-color: transparent;\r\n }\r\n\r\n .radio-button-icon svg {\r\n color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)};\r\n }\r\n }\r\n\r\n &.dropdown-hover:not(.disabled) {\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover' }, props.theme)};\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {\r\n /** Optional. Id of the component */\r\n id?: string;\r\n /** Required. Current state of the component. */\r\n selected: boolean;\r\n /** Required. Handler to be called when user selects/unselected the radio button. */\r\n select: (selected: boolean) => void;\r\n /** Optional. Label to be shown on the right side of the radio button. */\r\n label?: string | React.ReactNode;\r\n /** Optional. Secondary label to be shown under the main 'label' */\r\n additionalLabel?: string | React.ReactNode;\r\n /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */\r\n invalid?: boolean;\r\n /** Optional. If disabled, user can not interact with the component. */\r\n disabled?: boolean;\r\n /** Optional. If set, then 'pointer-events: none' will be set on the component. */\r\n iconPointerEventsTransparent?: boolean;\r\n /** Optional. Margin style attribute to be set on the top level tag of the component. */\r\n margin?: string;\r\n /** Optional. Size of the radio button, defaults to 'medium'. */\r\n size?: Size.Small | Size.Medium | Size.Large;\r\n /** Optional. TabIndex attribute to be set on the component. */\r\n tabIndexVal?: number;\r\n /** Optional. Extra classname to be set on the container of the component. */\r\n className?: string;\r\n}\r\n\r\nconst RadioButton = React.forwardRef<HTMLDivElement, RadioButtonProps>(({\r\n id,\r\n selected,\r\n label,\r\n additionalLabel,\r\n invalid,\r\n select,\r\n disabled,\r\n margin,\r\n iconPointerEventsTransparent,\r\n size,\r\n tabIndexVal,\r\n className,\r\n dataTestId,\r\n ...rest\r\n }: RadioButtonProps, ref) => {\r\n const onKeyPress = (e: any) => {\r\n if (e.keyCode === 13 && !disabled) {\r\n select(!selected);\r\n }\r\n };\r\n\r\n size = size ?? Size.Medium;\r\n\r\n const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\r\n\r\n return (\r\n <StyledRadioButton key={id}\r\n $margin={margin}\r\n ref={ref}\r\n onClick={() => !disabled && select(!selected)}\r\n onMouseDown={defaultOnMouseDownHandler}\r\n onKeyDown={onKeyPress}\r\n $disabled={disabled}\r\n className={cls}\r\n tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n $invalid={invalid}\r\n $selected={selected}\r\n {...rest}>\r\n <div className={'radio-button-icon'} id={id} data-testid={dataTestId}>\r\n {selected && <SystemIcons.RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n {!selected &&\r\n <SystemIcons.RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n </div>\r\n <div className={'radio-button-label'}>\r\n {label && <label htmlFor={id}>{label}</label>}\r\n {additionalLabel !== undefined && <span>{additionalLabel}</span>}\r\n </div>\r\n </StyledRadioButton>\r\n );\r\n});\r\n\r\nexport default RadioButton;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -8,9 +8,9 @@ export type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivEleme
|
|
|
8
8
|
/** Required. Handler to be called when user selects/unselected the radio button. */
|
|
9
9
|
select: (selected: boolean) => void;
|
|
10
10
|
/** Optional. Label to be shown on the right side of the radio button. */
|
|
11
|
-
label?: string;
|
|
11
|
+
label?: string | React.ReactNode;
|
|
12
12
|
/** Optional. Secondary label to be shown under the main 'label' */
|
|
13
|
-
additionalLabel?: string;
|
|
13
|
+
additionalLabel?: string | React.ReactNode;
|
|
14
14
|
/** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */
|
|
15
15
|
invalid?: boolean;
|
|
16
16
|
/** Optional. If disabled, user can not interact with the component. */
|
|
@@ -34,9 +34,9 @@ declare const RadioButton: React.ForwardRefExoticComponent<Testable & Omit<React
|
|
|
34
34
|
/** Required. Handler to be called when user selects/unselected the radio button. */
|
|
35
35
|
select: (selected: boolean) => void;
|
|
36
36
|
/** Optional. Label to be shown on the right side of the radio button. */
|
|
37
|
-
label?: string;
|
|
37
|
+
label?: string | React.ReactNode;
|
|
38
38
|
/** Optional. Secondary label to be shown under the main 'label' */
|
|
39
|
-
additionalLabel?: string;
|
|
39
|
+
additionalLabel?: string | React.ReactNode;
|
|
40
40
|
/** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */
|
|
41
41
|
invalid?: boolean;
|
|
42
42
|
/** Optional. If disabled, user can not interact with the component. */
|
|
@@ -240,8 +240,8 @@ RadioButton.propTypes = {
|
|
|
240
240
|
id: _pt.string,
|
|
241
241
|
selected: _pt.bool.isRequired,
|
|
242
242
|
select: _pt.func.isRequired,
|
|
243
|
-
label: _pt.string,
|
|
244
|
-
additionalLabel: _pt.string,
|
|
243
|
+
label: _pt.oneOfType([_pt.string, _pt.node]),
|
|
244
|
+
additionalLabel: _pt.oneOfType([_pt.string, _pt.node]),
|
|
245
245
|
invalid: _pt.bool,
|
|
246
246
|
disabled: _pt.bool,
|
|
247
247
|
iconPointerEventsTransparent: _pt.bool,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButton.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledRadioButton","div","props","$margin","generateToken","componentType","defaultVariant","theme","$selected","$invalid","Regular","state","RadioButton","forwardRef","_ref","ref","id","selected","label","additionalLabel","invalid","select","disabled","margin","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","Medium","cls","_objectSpread","onClick","onMouseDown","onKeyDown","$disabled","tabIndex","children","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_pt","string","bool","isRequired","func","number"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size, Testable} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst StyledRadioButton = styled.div<{ $margin?: string, $disabled?: boolean, $invalid?: boolean, $selected?: boolean }>`\r\n display: flex;\r\n width: 100%;\r\n min-height: 48px;\r\n min-width: 48px;\r\n\r\n ${props => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n cursor: pointer;\r\n\r\n color: ${props => COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme)};\r\n\r\n .pointerTransparent {\r\n pointer-events: none;\r\n }\r\n\r\n .radio-button-icon {\r\n margin: 6px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n height: 36px;\r\n min-width: 36px;\r\n border-radius: 50%;\r\n\r\n svg {\r\n color: ${props => (props.$selected ? COLORS.generateToken({componentType:'icon', defaultVariant:'selected'}, props.theme) : \r\n props.$invalid ? COLORS.generateToken({componentType:'icon', defaultVariant:'critical'}, props.theme) : COLORS.generateToken({componentType:'icon',defaultVariant:'subtle'}, props.theme))};\r\n }\r\n }\r\n\r\n .radio-button-label {\r\n user-select: none;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n label {\r\n cursor: inherit;\r\n }\r\n\r\n span {\r\n ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n .radio-button-label {\r\n padding-top: 14px;\r\n }\r\n }\r\n\r\n &.medium {\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n .radio-button-label {\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n &.large {\r\n ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n .radio-button-label {\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n &:not(.disabled):focus {\r\n ${focusStyles}\r\n }\r\n\r\n &:not(.disabled):hover {\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'hover' }, props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.generateToken({ componentType:'icon', state:'hover' }, props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &:not(.disabled):active {\r\n .radio-button-icon {\r\n background: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'active' }, props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.generateToken({ componentType:'icon', state:'active' }, props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n\r\n .radio-button-icon,\r\n .radio-button-label {\r\n pointer-events: none;\r\n }\r\n\r\n .radio-button-icon {\r\n background-color: transparent;\r\n }\r\n\r\n .radio-button-icon svg {\r\n color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)};\r\n }\r\n }\r\n\r\n &.dropdown-hover:not(.disabled) {\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover' }, props.theme)};\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {\r\n /** Optional. Id of the component */\r\n id?: string;\r\n /** Required. Current state of the component. */\r\n selected: boolean;\r\n /** Required. Handler to be called when user selects/unselected the radio button. */\r\n select: (selected: boolean) => void;\r\n /** Optional. Label to be shown on the right side of the radio button. */\r\n label?: string;\r\n /** Optional. Secondary label to be shown under the main 'label' */\r\n additionalLabel?: string;\r\n /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */\r\n invalid?: boolean;\r\n /** Optional. If disabled, user can not interact with the component. */\r\n disabled?: boolean;\r\n /** Optional. If set, then 'pointer-events: none' will be set on the component. */\r\n iconPointerEventsTransparent?: boolean;\r\n /** Optional. Margin style attribute to be set on the top level tag of the component. */\r\n margin?: string;\r\n /** Optional. Size of the radio button, defaults to 'medium'. */\r\n size?: Size.Small | Size.Medium | Size.Large;\r\n /** Optional. TabIndex attribute to be set on the component. */\r\n tabIndexVal?: number;\r\n /** Optional. Extra classname to be set on the container of the component. */\r\n className?: string;\r\n}\r\n\r\nconst RadioButton = React.forwardRef<HTMLDivElement, RadioButtonProps>(({\r\n id,\r\n selected,\r\n label,\r\n additionalLabel,\r\n invalid,\r\n select,\r\n disabled,\r\n margin,\r\n iconPointerEventsTransparent,\r\n size,\r\n tabIndexVal,\r\n className,\r\n dataTestId,\r\n ...rest\r\n }: RadioButtonProps, ref) => {\r\n const onKeyPress = (e: any) => {\r\n if (e.keyCode === 13 && !disabled) {\r\n select(!selected);\r\n }\r\n };\r\n\r\n size = size ?? Size.Medium;\r\n\r\n const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\r\n\r\n return (\r\n <StyledRadioButton key={id}\r\n $margin={margin}\r\n ref={ref}\r\n onClick={() => !disabled && select(!selected)}\r\n onMouseDown={defaultOnMouseDownHandler}\r\n onKeyDown={onKeyPress}\r\n $disabled={disabled}\r\n className={cls}\r\n tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n $invalid={invalid}\r\n $selected={selected}\r\n {...rest}>\r\n <div className={'radio-button-icon'} id={id} data-testid={dataTestId}>\r\n {selected && <SystemIcons.RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n {!selected &&\r\n <SystemIcons.RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n </div>\r\n <div className={'radio-button-label'}>\r\n {label && <label htmlFor={id}>{label}</label>}\r\n {additionalLabel !== undefined && <span>{additionalLabel}</span>}\r\n </div>\r\n </StyledRadioButton>\r\n );\r\n});\r\n\r\nexport default RadioButton;\r\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"RadioButton.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledRadioButton","div","props","$margin","generateToken","componentType","defaultVariant","theme","$selected","$invalid","Regular","state","RadioButton","forwardRef","_ref","ref","id","selected","label","additionalLabel","invalid","select","disabled","margin","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","Medium","cls","_objectSpread","onClick","onMouseDown","onKeyDown","$disabled","tabIndex","children","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_pt","string","bool","isRequired","func","oneOfType","node","number"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size, Testable} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst StyledRadioButton = styled.div<{ $margin?: string, $disabled?: boolean, $invalid?: boolean, $selected?: boolean }>`\r\n display: flex;\r\n width: 100%;\r\n min-height: 48px;\r\n min-width: 48px;\r\n\r\n ${props => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n cursor: pointer;\r\n\r\n color: ${props => COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme)};\r\n\r\n .pointerTransparent {\r\n pointer-events: none;\r\n }\r\n\r\n .radio-button-icon {\r\n margin: 6px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n height: 36px;\r\n min-width: 36px;\r\n border-radius: 50%;\r\n\r\n svg {\r\n color: ${props => (props.$selected ? COLORS.generateToken({componentType:'icon', defaultVariant:'selected'}, props.theme) : \r\n props.$invalid ? COLORS.generateToken({componentType:'icon', defaultVariant:'critical'}, props.theme) : COLORS.generateToken({componentType:'icon',defaultVariant:'subtle'}, props.theme))};\r\n }\r\n }\r\n\r\n .radio-button-label {\r\n user-select: none;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n label {\r\n cursor: inherit;\r\n }\r\n\r\n span {\r\n ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n .radio-button-label {\r\n padding-top: 14px;\r\n }\r\n }\r\n\r\n &.medium {\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n .radio-button-label {\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n &.large {\r\n ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n .radio-button-label {\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n &:not(.disabled):focus {\r\n ${focusStyles}\r\n }\r\n\r\n &:not(.disabled):hover {\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'hover' }, props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.generateToken({ componentType:'icon', state:'hover' }, props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &:not(.disabled):active {\r\n .radio-button-icon {\r\n background: ${props => COLORS.generateToken({ componentType:'bg-surface', state:'active' }, props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.generateToken({ componentType:'icon', state:'active' }, props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled' }, props.theme)};\r\n\r\n .radio-button-icon,\r\n .radio-button-label {\r\n pointer-events: none;\r\n }\r\n\r\n .radio-button-icon {\r\n background-color: transparent;\r\n }\r\n\r\n .radio-button-icon svg {\r\n color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)};\r\n }\r\n }\r\n\r\n &.dropdown-hover:not(.disabled) {\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover' }, props.theme)};\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {\r\n /** Optional. Id of the component */\r\n id?: string;\r\n /** Required. Current state of the component. */\r\n selected: boolean;\r\n /** Required. Handler to be called when user selects/unselected the radio button. */\r\n select: (selected: boolean) => void;\r\n /** Optional. Label to be shown on the right side of the radio button. */\r\n label?: string | React.ReactNode;\r\n /** Optional. Secondary label to be shown under the main 'label' */\r\n additionalLabel?: string | React.ReactNode;\r\n /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */\r\n invalid?: boolean;\r\n /** Optional. If disabled, user can not interact with the component. */\r\n disabled?: boolean;\r\n /** Optional. If set, then 'pointer-events: none' will be set on the component. */\r\n iconPointerEventsTransparent?: boolean;\r\n /** Optional. Margin style attribute to be set on the top level tag of the component. */\r\n margin?: string;\r\n /** Optional. Size of the radio button, defaults to 'medium'. */\r\n size?: Size.Small | Size.Medium | Size.Large;\r\n /** Optional. TabIndex attribute to be set on the component. */\r\n tabIndexVal?: number;\r\n /** Optional. Extra classname to be set on the container of the component. */\r\n className?: string;\r\n}\r\n\r\nconst RadioButton = React.forwardRef<HTMLDivElement, RadioButtonProps>(({\r\n id,\r\n selected,\r\n label,\r\n additionalLabel,\r\n invalid,\r\n select,\r\n disabled,\r\n margin,\r\n iconPointerEventsTransparent,\r\n size,\r\n tabIndexVal,\r\n className,\r\n dataTestId,\r\n ...rest\r\n }: RadioButtonProps, ref) => {\r\n const onKeyPress = (e: any) => {\r\n if (e.keyCode === 13 && !disabled) {\r\n select(!selected);\r\n }\r\n };\r\n\r\n size = size ?? Size.Medium;\r\n\r\n const cls = `${size} ${className || ''} ${disabled ? ' disabled' : ''}`;\r\n\r\n return (\r\n <StyledRadioButton key={id}\r\n $margin={margin}\r\n ref={ref}\r\n onClick={() => !disabled && select(!selected)}\r\n onMouseDown={defaultOnMouseDownHandler}\r\n onKeyDown={onKeyPress}\r\n $disabled={disabled}\r\n className={cls}\r\n tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n $invalid={invalid}\r\n $selected={selected}\r\n {...rest}>\r\n <div className={'radio-button-icon'} id={id} data-testid={dataTestId}>\r\n {selected && <SystemIcons.RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n {!selected &&\r\n <SystemIcons.RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n </div>\r\n <div className={'radio-button-label'}>\r\n {label && <label htmlFor={id}>{label}</label>}\r\n {additionalLabel !== undefined && <span>{additionalLabel}</span>}\r\n </div>\r\n </StyledRadioButton>\r\n );\r\n});\r\n\r\nexport default RadioButton;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -99,6 +99,11 @@ const Search = exports.Search = _styledComponents.default.input.attrs(() => ({
|
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
+
background: ${props => _index.COLORS.generateToken({
|
|
103
|
+
componentType: 'bg-surface',
|
|
104
|
+
defaultVariant: 'default'
|
|
105
|
+
}, props.theme)};
|
|
106
|
+
|
|
102
107
|
&:disabled {
|
|
103
108
|
background: transparent;
|
|
104
109
|
border: none;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBarInput.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_index","_styles","_common","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Search","exports","styled","input","attrs","type","props","ComponentSStyling","ComponentTextStyle","Italic","COLORS","generateToken","componentType","defaultVariant","theme","Regular","BREAKPOINTS","MEDIUM","ComponentMStyling","SearchBarInput","forwardRef","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","useFocusVisibleRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","key","preventDefault","stopPropagation","jsx","className","tabIndex","onChange","target","value","onKeyPress","propTypes","_propTypes","string","isRequired","func","bool","array","_default"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\r\nimport { Size } from '../../types';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { useFocusVisibleRef } from '../../common';\r\n\r\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\r\n appearance: none;\r\n width: calc(100% - 96px);\r\n\r\n /* To prevent browser putting its own cross inside the search bar */\r\n\r\n &::-ms-clear {\r\n display: none;\r\n width: 0;\r\n height: 0;\r\n }\r\n\r\n &::-ms-reveal {\r\n display: none;\r\n width: 0;\r\n height: 0;\r\n }\r\n\r\n &::-webkit-search-decoration,\r\n &::-webkit-search-cancel-button,\r\n &::-webkit-search-results-button,\r\n &::-webkit-search-results-decoration {\r\n display: none;\r\n }\r\n\r\n &::placeholder {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n\r\n height: 32px;\r\n border-width: 0;\r\n margin-left: 48px;\r\n outline: none;\r\n\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n ::placeholder {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n ::placeholder {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n margin-left: 44px;\r\n\r\n ::placeholder {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n &.medium {\r\n margin-left: 48px;\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n \r\n ::placeholder {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n &:disabled {\r\n background: transparent;\r\n border: none;\r\n }\r\n`;\r\n\r\ntype SearchBarInputProps = {\r\n id: string;\r\n searchTerm?: string;\r\n setSearchTerm: (term: string) => void;\r\n enterSearch: (e: any) => void;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n onKeyDown?: (e: React.KeyboardEvent) => void;\r\n size?: Size.Small | Size.Medium;\r\n onBlur?: (e: any) => void;\r\n focusParentRefs?: React.RefObject<any>[];\r\n onClick?: ()=>void;\r\n};\r\n\r\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\r\n const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\r\n\r\n const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\r\n\r\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n const isPressingEnter = (e: any) => {\r\n if (e.key === 'Enter') {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n return (\r\n <Search\r\n placeholder={disabled ? '' : placeholder}\r\n ref={elementRef}\r\n id={id}\r\n data-testid={id}\r\n className={size ? size : ''}\r\n tabIndex={0}\r\n disabled={disabled}\r\n onChange={(e: any) => setSearchTerm(e.target.value)}\r\n value={searchTerm}\r\n onBlur={(e) => onBlur && onBlur(e)}\r\n onKeyDown={onKeyDown}\r\n onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\r\n onClick={onClick}\r\n />\r\n );\r\n});\r\n\r\nexport default SearchBarInput;\r\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"SearchBarInput.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_index","_styles","_common","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Search","exports","styled","input","attrs","type","props","ComponentSStyling","ComponentTextStyle","Italic","COLORS","generateToken","componentType","defaultVariant","theme","Regular","BREAKPOINTS","MEDIUM","ComponentMStyling","SearchBarInput","forwardRef","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","useFocusVisibleRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","key","preventDefault","stopPropagation","jsx","className","tabIndex","onChange","target","value","onKeyPress","propTypes","_propTypes","string","isRequired","func","bool","array","_default"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\r\nimport { Size } from '../../types';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { useFocusVisibleRef } from '../../common';\r\n\r\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\r\n appearance: none;\r\n width: calc(100% - 96px);\r\n\r\n /* To prevent browser putting its own cross inside the search bar */\r\n\r\n &::-ms-clear {\r\n display: none;\r\n width: 0;\r\n height: 0;\r\n }\r\n\r\n &::-ms-reveal {\r\n display: none;\r\n width: 0;\r\n height: 0;\r\n }\r\n\r\n &::-webkit-search-decoration,\r\n &::-webkit-search-cancel-button,\r\n &::-webkit-search-results-button,\r\n &::-webkit-search-results-decoration {\r\n display: none;\r\n }\r\n\r\n &::placeholder {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n\r\n height: 32px;\r\n border-width: 0;\r\n margin-left: 48px;\r\n outline: none;\r\n\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n ::placeholder {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n ::placeholder {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n margin-left: 44px;\r\n\r\n ::placeholder {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n &.medium {\r\n margin-left: 48px;\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n \r\n ::placeholder {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n background: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n\r\n &:disabled {\r\n background: transparent;\r\n border: none;\r\n }\r\n`;\r\n\r\ntype SearchBarInputProps = {\r\n id: string;\r\n searchTerm?: string;\r\n setSearchTerm: (term: string) => void;\r\n enterSearch: (e: any) => void;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n onKeyDown?: (e: React.KeyboardEvent) => void;\r\n size?: Size.Small | Size.Medium;\r\n onBlur?: (e: any) => void;\r\n focusParentRefs?: React.RefObject<any>[];\r\n onClick?: ()=>void;\r\n};\r\n\r\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\r\n const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\r\n\r\n const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\r\n\r\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n const isPressingEnter = (e: any) => {\r\n if (e.key === 'Enter') {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n return (\r\n <Search\r\n placeholder={disabled ? '' : placeholder}\r\n ref={elementRef}\r\n id={id}\r\n data-testid={id}\r\n className={size ? size : ''}\r\n tabIndex={0}\r\n disabled={disabled}\r\n onChange={(e: any) => setSearchTerm(e.target.value)}\r\n value={searchTerm}\r\n onBlur={(e) => onBlur && onBlur(e)}\r\n onKeyDown={onKeyDown}\r\n onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\r\n onClick={onClick}\r\n />\r\n );\r\n});\r\n\r\nexport default SearchBarInput;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -90,6 +90,11 @@ export const Search = styled.input.attrs(() => ({
|
|
|
90
90
|
}
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
+
background: ${props => COLORS.generateToken({
|
|
94
|
+
componentType: 'bg-surface',
|
|
95
|
+
defaultVariant: 'default'
|
|
96
|
+
}, props.theme)};
|
|
97
|
+
|
|
93
98
|
&:disabled {
|
|
94
99
|
background: transparent;
|
|
95
100
|
border: none;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchBarInput.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","useFocusVisibleRef","jsx","_jsx","Search","input","attrs","type","props","Italic","generateToken","componentType","defaultVariant","theme","Regular","MEDIUM","SearchBarInput","forwardRef","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","e","key","preventDefault","stopPropagation","className","tabIndex","onChange","target","value","onKeyPress","propTypes","_pt","string","isRequired","func","bool","array"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\r\nimport { Size } from '../../types';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { useFocusVisibleRef } from '../../common';\r\n\r\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\r\n appearance: none;\r\n width: calc(100% - 96px);\r\n\r\n /* To prevent browser putting its own cross inside the search bar */\r\n\r\n &::-ms-clear {\r\n display: none;\r\n width: 0;\r\n height: 0;\r\n }\r\n\r\n &::-ms-reveal {\r\n display: none;\r\n width: 0;\r\n height: 0;\r\n }\r\n\r\n &::-webkit-search-decoration,\r\n &::-webkit-search-cancel-button,\r\n &::-webkit-search-results-button,\r\n &::-webkit-search-results-decoration {\r\n display: none;\r\n }\r\n\r\n &::placeholder {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n\r\n height: 32px;\r\n border-width: 0;\r\n margin-left: 48px;\r\n outline: none;\r\n\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n ::placeholder {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n ::placeholder {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n margin-left: 44px;\r\n\r\n ::placeholder {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n &.medium {\r\n margin-left: 48px;\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n \r\n ::placeholder {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n &:disabled {\r\n background: transparent;\r\n border: none;\r\n }\r\n`;\r\n\r\ntype SearchBarInputProps = {\r\n id: string;\r\n searchTerm?: string;\r\n setSearchTerm: (term: string) => void;\r\n enterSearch: (e: any) => void;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n onKeyDown?: (e: React.KeyboardEvent) => void;\r\n size?: Size.Small | Size.Medium;\r\n onBlur?: (e: any) => void;\r\n focusParentRefs?: React.RefObject<any>[];\r\n onClick?: ()=>void;\r\n};\r\n\r\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\r\n const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\r\n\r\n const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\r\n\r\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n const isPressingEnter = (e: any) => {\r\n if (e.key === 'Enter') {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n return (\r\n <Search\r\n placeholder={disabled ? '' : placeholder}\r\n ref={elementRef}\r\n id={id}\r\n data-testid={id}\r\n className={size ? size : ''}\r\n tabIndex={0}\r\n disabled={disabled}\r\n onChange={(e: any) => setSearchTerm(e.target.value)}\r\n value={searchTerm}\r\n onBlur={(e) => onBlur && onBlur(e)}\r\n onKeyDown={onKeyDown}\r\n onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\r\n onClick={onClick}\r\n />\r\n );\r\n});\r\n\r\nexport default SearchBarInput;\r\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"SearchBarInput.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","ComponentMStyling","ComponentSStyling","useFocusVisibleRef","jsx","_jsx","Search","input","attrs","type","props","Italic","generateToken","componentType","defaultVariant","theme","Regular","MEDIUM","SearchBarInput","forwardRef","ref","id","searchTerm","setSearchTerm","enterSearch","placeholder","disabled","onKeyDown","size","onBlur","onClick","elementRef","focusParentRefs","useImperativeHandle","current","isPressingEnter","e","key","preventDefault","stopPropagation","className","tabIndex","onChange","target","value","onKeyPress","propTypes","_pt","string","isRequired","func","bool","array"],"sources":["../../../src/InputFields/components/SearchBarInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles/index';\r\nimport { Size } from '../../types';\r\nimport { ComponentMStyling, ComponentSStyling } from '../../styles';\r\nimport { useFocusVisibleRef } from '../../common';\r\n\r\nexport const Search = styled.input.attrs(() => ({ type: 'search' }))`\r\n appearance: none;\r\n width: calc(100% - 96px);\r\n\r\n /* To prevent browser putting its own cross inside the search bar */\r\n\r\n &::-ms-clear {\r\n display: none;\r\n width: 0;\r\n height: 0;\r\n }\r\n\r\n &::-ms-reveal {\r\n display: none;\r\n width: 0;\r\n height: 0;\r\n }\r\n\r\n &::-webkit-search-decoration,\r\n &::-webkit-search-cancel-button,\r\n &::-webkit-search-results-button,\r\n &::-webkit-search-results-decoration {\r\n display: none;\r\n }\r\n\r\n &::placeholder {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text', defaultVariant:'subtle'}, props.theme))}\r\n }\r\n\r\n height: 32px;\r\n border-width: 0;\r\n margin-left: 48px;\r\n outline: none;\r\n\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n ::placeholder {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n }\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n ::placeholder {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n margin-left: 44px;\r\n\r\n ::placeholder {\r\n ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n &.medium {\r\n margin-left: 48px;\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({componentType:'text', defaultVariant:'default'}, props.theme))}\r\n \r\n ::placeholder {\r\n ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.generateToken({componentType:'text',defaultVariant:'subtle'}, props.theme))}\r\n }\r\n }\r\n\r\n background: ${props => COLORS.generateToken({componentType:'bg-surface', defaultVariant:'default'}, props.theme)};\r\n\r\n &:disabled {\r\n background: transparent;\r\n border: none;\r\n }\r\n`;\r\n\r\ntype SearchBarInputProps = {\r\n id: string;\r\n searchTerm?: string;\r\n setSearchTerm: (term: string) => void;\r\n enterSearch: (e: any) => void;\r\n placeholder?: string;\r\n disabled?: boolean;\r\n onKeyDown?: (e: React.KeyboardEvent) => void;\r\n size?: Size.Small | Size.Medium;\r\n onBlur?: (e: any) => void;\r\n focusParentRefs?: React.RefObject<any>[];\r\n onClick?: ()=>void;\r\n};\r\n\r\nconst SearchBarInput = React.forwardRef<HTMLInputElement, SearchBarInputProps>((props: SearchBarInputProps, ref) => {\r\n const { id, searchTerm, setSearchTerm, enterSearch, placeholder, disabled, onKeyDown, size, onBlur, onClick } = props;\r\n\r\n const elementRef = useFocusVisibleRef(props.focusParentRefs || []);\r\n\r\n React.useImperativeHandle(ref, () => elementRef.current, [elementRef]);\r\n\r\n const isPressingEnter = (e: any) => {\r\n if (e.key === 'Enter') {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n return true;\r\n }\r\n return false;\r\n };\r\n\r\n return (\r\n <Search\r\n placeholder={disabled ? '' : placeholder}\r\n ref={elementRef}\r\n id={id}\r\n data-testid={id}\r\n className={size ? size : ''}\r\n tabIndex={0}\r\n disabled={disabled}\r\n onChange={(e: any) => setSearchTerm(e.target.value)}\r\n value={searchTerm}\r\n onBlur={(e) => onBlur && onBlur(e)}\r\n onKeyDown={onKeyDown}\r\n onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}\r\n onClick={onClick}\r\n />\r\n );\r\n});\r\n\r\nexport default SearchBarInput;\r\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -10,6 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
10
10
|
var React = _interopRequireWildcard(require("react"));
|
|
11
11
|
var _reactModal = _interopRequireDefault(require("react-modal"));
|
|
12
12
|
var _styles = require("../styles");
|
|
13
|
+
var _styledComponents = require("styled-components");
|
|
13
14
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
14
15
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
15
16
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -140,7 +141,11 @@ class ModalContainer extends React.Component {
|
|
|
140
141
|
overflow,
|
|
141
142
|
minWidth,
|
|
142
143
|
maxWidth,
|
|
143
|
-
zIndex: zIndexValue
|
|
144
|
+
zIndex: zIndexValue,
|
|
145
|
+
background: _styles.COLORS.generateToken({
|
|
146
|
+
componentType: 'bg-surface',
|
|
147
|
+
defaultVariant: 'default'
|
|
148
|
+
}, this.context.theme)
|
|
144
149
|
});
|
|
145
150
|
const styles = {
|
|
146
151
|
content: stylesConfiguration
|
|
@@ -201,5 +206,6 @@ class ModalContainer extends React.Component {
|
|
|
201
206
|
shouldCloseOnOverlayClick: _propTypes.default.bool
|
|
202
207
|
});
|
|
203
208
|
(0, _defineProperty2.default)(ModalContainer, "openInstances", 0);
|
|
209
|
+
(0, _defineProperty2.default)(ModalContainer, "contextType", _styledComponents.ThemeContext);
|
|
204
210
|
var _default = exports.default = ModalContainer;
|
|
205
211
|
//# sourceMappingURL=ModalContainer.cjs.map
|