npm - @bikdotai/bik-component-library - Versions diffs - 0.0.839 → 0.0.840-beta.0 - Mend

@bikdotai/bik-component-library 0.0.839 → 0.0.840-beta.0

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

Files changed (185) hide show

package/dist/cjs/components/input/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import InfoIcon from '@src/assets/icons/info.svg';\nimport React, {\n\tforwardRef,\n\tMutableRefObject,\n\tRef,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { Button } from '@src/components/button';\nimport {\n\tisFunction,\n\tsanitizeUnsafeInput,\n\tshouldSanitizeForType,\n\tvalidateInput,\n} from '@src/components/input/Input-helper';\nimport { Tooltip } from '@src/components/tooltips';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputStyleContext } from './context/InputStyleProvider';\nimport { InputProps, InputTypeI, InputVariant } from './Input.model';\nimport * as SC from './Input.styled';\nimport { PrefixHolder, SuffixHolder } from './Input.styled';\n\nexport const Input = forwardRef(\n\t(\n\t\tprops: InputProps,\n\t\tfRef: React.ForwardedRef<HTMLInputElement \| HTMLTextAreaElement \| null>,\n\t) => {\n\t\tconst {\n\t\t\tplaceholder,\n\t\t\tleftIcon,\n\t\t\trightIcon,\n\t\t\tlabelText,\n\t\t\tmaxCharLimit,\n\t\t\tisRequired,\n\t\t\thintText,\n\t\t\ttype,\n\t\t\tstate,\n\t\t\tvalidate,\n\t\t\tvariant,\n\t\t\tbutton,\n\t\t\tsuffixText,\n\t\t\tprefixText,\n\t\t\tonChangeText,\n\t\t\tvalue,\n\t\t\tnoErrorHint,\n\t\t\treset,\n\t\t\trangeValidation,\n\t\t\tnoKeyDownChange,\n\t\t\tversion,\n\t\t\tnoMaxCharCheck,\n\t\t\tlabelElement,\n\t\t\tautoGrow,\n\t\t\tminHeight,\n\t\t\tmaxHeight,\n\t\t\tlabelTextBold,\n\t\t\ttruncateText,\n\t\t\tmaxCharLimitPosition,\n\t\t\tmaxCharStyle,\n\t\t\thightlightInputColor,\n\t\t\tonKeyDownEvent,\n\t\t\thideInputHeader,\n\t\t\thideBorder,\n\t\t\tinputWrapperStyles,\n\t\t\tminCharsToTrigger,\n\t\t\tmaxCharAlignment,\n\t\t\tisDisabled = false,\n\t\t\tallowUnsafeInput,\n\t\t\tleftIconStyle,\n\t\t} = {\n\t\t\tmaxCharLimit: 0,\n\t\t\ttype: 'text' as InputTypeI,\n\t\t\tvariant: 'default' as InputVariant,\n\t\t\tmaxCharLimitPosition: 'TOP',\n\t\t\tminCharsToTrigger: 0,\n\t\t\tmaxCharAlignment: false,\n\t\t\t...props,\n\t\t};\n\t\tconst LeftIcon = leftIcon?.icon;\n\t\tconst RightIcon = rightIcon?.icon;\n\t\tconst [isInvalid, setIsInvalid] = useState<boolean>(false);\n\t\tconst [isActive, setIsActive] = useState<boolean>(false);\n\t\tconst [errorMessage, setErrorMessage] = useState<string>();\n\t\tconst iconSize =\n\t\t\tvariant === 'x-small' ? '12px' : variant === 'small' ? '18px' : '22px';\n\t\tconst stylesFromOutside = useContext(InputStyleContext);\n\t\tconst [inputValue, setInputValue] = useState<string>('');\n\t\tconst _ref = useRef<HTMLInputElement \| HTMLTextAreaElement>(null);\n\t\tconst inputRef: MutableRefObject<HTMLInputElement \| HTMLTextAreaElement> =\n\t\t\t(fRef ?? _ref) as MutableRefObject<\n\t\t\t\tHTMLInputElement \| HTMLTextAreaElement\n\t\t\t>;\n\n\t\tuseEffect(() => {\n\t\t\tsetInputValue(value \|\| '');\n\t\t\tif (!value && autoGrow) {\n\t\t\t\tinputRef.current.style.height = minHeight \|\| '48px';\n\t\t\t}\n\t\t}, [value]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!inputRef.current) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tprops.onReferenceInit?.(inputRef.current);\n\t\t}, [inputRef]);\n\n\t\tuseEffect(() => {\n\t\t\tconst numberInput = inputRef.current;\n\t\t\tif (numberInput && ['phonenumber', 'zip', 'number'].includes(type)) {\n\t\t\t\tnumberInput.addEventListener('wheel', onWheel, { passive: false });\n\n\t\t\t\treturn () => {\n\t\t\t\t\tnumberInput.removeEventListener('wheel', onWheel);\n\t\t\t\t};\n\t\t\t}\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tif (!reset) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetInputValue('');\n\t\t}, [reset]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsActive(!!props.isActive);\n\t\t\tif (props.isActive) {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}\n\t\t}, [props.isActive]);\n\n\t\tuseEffect(() => {\n\t\t\tsetErrorMessage(props.errorMessage);\n\t\t}, [props.errorMessage]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsInvalid(false);\n\t\t\tif (\n\t\t\t\tprops.state === 'invalid' \|\|\n\t\t\t\terrorMessage \|\|\n\t\t\t\tprops.state === 'disabled-invalid'\n\t\t\t) {\n\t\t\t\tsetIsInvalid(true);\n\t\t\t}\n\t\t\tif (props.state === 'active') {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}\n\t\t}, [props.state, errorMessage]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsInvalid(!!errorMessage \|\| props.state === 'invalid');\n\t\t}, [errorMessage, props.state]);\n\n\t\tconst executeCallback = (cb: any, ...params: any[]): void => {\n\t\t\tif (!isFunction(cb)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tcb(...params);\n\t\t};\n\n\t\tconst getMaxChar = () => {\n\t\t\tif (type === 'zip') {\n\t\t\t\treturn 6;\n\t\t\t}\n\t\t\treturn 2000;\n\t\t};\n\n\t\tconst onKeyDown = (e) => {\n\t\t\tconst MAX_CHAR_LIMIT = maxCharLimit !== 0 ? maxCharLimit : getMaxChar();\n\t\t\tconst KEY_CODES_TO_BE_EXCLUDED = [8];\n\t\t\tconst MIN_CHAR_LIMIT = minCharsToTrigger;\n\t\t\tconst inputText = e.target.value;\n\t\t\tif (\n\t\t\t\tonKeyDownEvent &&\n\t\t\t\t(!inputText.length \|\| inputText.length >= MIN_CHAR_LIMIT)\n\t\t\t) {\n\t\t\t\tonKeyDownEvent(e);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t!noKeyDownChange &&\n\t\t\t\t(!inputText.length \|\| inputText.length >= MIN_CHAR_LIMIT)\n\t\t\t) {\n\t\t\t\tonChangeText(value \|\| '', e);\n\t\t\t}\n\t\t\tif (noMaxCharCheck) return;\n\n\t\t\tif (\n\t\t\t\t!KEY_CODES_TO_BE_EXCLUDED.includes(e.which) &&\n\t\t\t\tMAX_CHAR_LIMIT > 0 &&\n\t\t\t\tinputText.length >= MAX_CHAR_LIMIT\n\t\t\t) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t};\n\n\t\tconst onWheel = (event) => {\n\t\t\tevent.preventDefault(); // Prevent the default scroll behavior\n\t\t};\n\n\t\tconst onChange = (e) => {\n\t\t\tlet inputText = e.target.value;\n\t\t\tconst MAX_CHAR_LIMIT =\n\t\t\t\tmaxCharLimit !== 0 ? maxCharLimit + 1 : getMaxChar();\n\t\t\tconst MIN_CHAR_LIMIT = minCharsToTrigger;\n\n\t\t\tif (!allowUnsafeInput && shouldSanitizeForType(type)) {\n\t\t\t\tinputText = sanitizeUnsafeInput(inputText);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t!noMaxCharCheck &&\n\t\t\t\tMAX_CHAR_LIMIT > 0 &&\n\t\t\t\tinputText.length >= MAX_CHAR_LIMIT\n\t\t\t) {\n\t\t\t\t// letting user to copy paste text upto max limit instead of blank action\n\t\t\t\tinputText = inputText.substring(0, MAX_CHAR_LIMIT - 1);\n\t\t\t}\n\n\t\t\tif (!props.textControl) {\n\t\t\t\tsetInputValue(inputText \|\| '');\n\t\t\t}\n\t\t\tif (MIN_CHAR_LIMIT && inputText && inputText.length < MIN_CHAR_LIMIT) {\n\t\t\t\t// if minCharsToTrigger exists and is not reached, do nothing\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonChangeText(inputText, e);\n\t\t\tif (autoGrow) {\n\t\t\t\tinputRef.current.style.height = `${inputRef.current.scrollHeight}px`;\n\t\t\t\tif (!inputText) {\n\t\t\t\t\tinputRef.current.style.height = minHeight \|\| '48px';\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst validateFunction = validate \|\| validateInput;\n\t\t\tif (!validateFunction \|\| !isFunction(validateFunction)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst [isValid, error] = validateFunction(\n\t\t\t\tinputText,\n\t\t\t\ttype,\n\t\t\t\trangeValidation,\n\t\t\t);\n\n\t\t\tsetIsInvalid(!isValid);\n\t\t\tsetErrorMessage(props.errorMessage ? props.errorMessage : error);\n\t\t};\n\n\t\tconst onFocus = (e) => {\n\t\t\tif (!props.skipFocus) {\n\t\t\t\tsetIsActive(true);\n\t\t\t}\n\t\t\texecuteCallback(props.onFocus?.(e));\n\t\t};\n\n\t\tconst onBlur = (e) => {\n\t\t\tif (!props.skipFocus) {\n\t\t\t\tsetIsActive(false);\n\t\t\t}\n\t\t\texecuteCallback(props.onBlur?.(e));\n\t\t};\n\n\t\tconst getInputHTML = () => {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t{type !== 'multiline' && (\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclassName={truncateText ? 'truncate-class' : ''}\n\t\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\t\tid={props.id}\n\t\t\t\t\t\t\tstyle={stylesFromOutside?.input ?? {}}\n\t\t\t\t\t\t\tref={inputRef as Ref<HTMLInputElement>}\n\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\ttype={\n\t\t\t\t\t\t\t\t['phonenumber', 'zip', 'number'].includes(type)\n\t\t\t\t\t\t\t\t\t? 'number'\n\t\t\t\t\t\t\t\t\t: type\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\tonFocus={(e) => onFocus(e)}\n\t\t\t\t\t\t\tonBlur={(e) => onBlur(e)}\n\t\t\t\t\t\t\tplaceholder={placeholder \|\| 'Enter here'}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tonClick={(e) => executeCallback(props.onClick)}\n\t\t\t\t\t\t\tonKeyDown={(e) => onKeyDown(e)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{type === 'multiline' && (\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\tref={inputRef as Ref<HTMLTextAreaElement>}\n\t\t\t\t\t\t\tonFocus={(e) => onFocus(e)}\n\t\t\t\t\t\t\tonBlur={(e) => onBlur(e)}\n\t\t\t\t\t\t\tonClick={(e) => executeCallback(props.onClick)}\n\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\tplaceholder={placeholder \|\| 'Enter here'}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tonKeyDown={(e) => onKeyDown(e)}\n\t\t\t\t\t\t\tmaxLength={maxCharLimit > 0 ? maxCharLimit : undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<SC.RootContainer\n\t\t\t\twidth={props.width}\n\t\t\t\theight={props.height}\n\t\t\t\tstate={state}\n\t\t\t\ttype={type}\n\t\t\t\tstyle={stylesFromOutside?.RootContainer ?? {}}\n\t\t\t>\n\t\t\t\t<div className=\"flex-align-center\">\n\t\t\t\t\t{!noErrorHint && (!!hintText \|\| !!errorMessage) && (\n\t\t\t\t\t\t<SC.InputFooter invalid={!!errorMessage}>\n\t\t\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t\t\t{errorMessage \|\| hintText}\n\t\t\t\t\t\t</SC.InputFooter>\n\t\t\t\t\t)}\n\t\t\t\t\t{maxCharLimit > 0 && maxCharLimitPosition === 'BOTTOM' && (\n\t\t\t\t\t\t<SC.MaxCharStyle position={'BOTTOM'} style={maxCharStyle}>\n\t\t\t\t\t\t\t{(value ?? '').toString()?.length ?? 0}/{maxCharLimit}\n\t\t\t\t\t\t</SC.MaxCharStyle>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<SC.InputWrapper\n\t\t\t\t\tvariant={variant}\n\t\t\t\t\tstate={state}\n\t\t\t\t\twidth={props.width}\n\t\t\t\t\tisActive={state === 'active' \|\| isActive}\n\t\t\t\t\tisInvalid={isInvalid}\n\t\t\t\t\tstyle={stylesFromOutside?.InputWrapper ?? inputWrapperStyles ?? {}}\n\t\t\t\t\tversion={version}\n\t\t\t\t\theight={props.height}\n\t\t\t\t\thightlightInputColor={hightlightInputColor}\n\t\t\t\t\thideBorder={hideBorder}\n\t\t\t\t>\n\t\t\t\t\t{!!LeftIcon && (\n\t\t\t\t\t\t<SC.IconHolder\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\t\tonClick={() => executeCallback(leftIcon?.callback)}\n\t\t\t\t\t\t\tisLeft={true}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t...(stylesFromOutside?.IconHolder ?? {}),\n\t\t\t\t\t\t\t\t...leftIconStyle,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<LeftIcon />\n\t\t\t\t\t\t</SC.IconHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!prefixText && (\n\t\t\t\t\t\t<PrefixHolder variant={variant}>{prefixText}</PrefixHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'default' && (\n\t\t\t\t\t\t<SC.InputContainer\n\t\t\t\t\t\t\theight={props.height}\n\t\t\t\t\t\t\ttype={props.type}\n\t\t\t\t\t\t\tminHeight={minHeight}\n\t\t\t\t\t\t\tmaxHeight={maxHeight}\n\t\t\t\t\t\t\tautoGrow={autoGrow}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainer>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'small' && (\n\t\t\t\t\t\t<SC.InputContainerSmall height={props.height} type={props.type}>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainerSmall>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'x-small' && (\n\t\t\t\t\t\t<SC.InputContainerXSmall height={props.height} type={props.type}>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainerXSmall>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!RightIcon && (\n\t\t\t\t\t\t<SC.IconHolder\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\t\tonClick={() => executeCallback(rightIcon?.callback)}\n\t\t\t\t\t\t\tisLeft={false}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<RightIcon />\n\t\t\t\t\t\t</SC.IconHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!suffixText && (\n\t\t\t\t\t\t<SuffixHolder variant={variant}>{suffixText}</SuffixHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{button && button.text && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={button.text}\n\t\t\t\t\t\t\tbuttonType={button.buttonType}\n\t\t\t\t\t\t\tonClick={() => executeCallback(button?.onClick)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{button && button.buttonProps && <Button {...button.buttonProps} />}\n\t\t\t\t</SC.InputWrapper>\n\t\t\t\t{!hideInputHeader && (!!labelText \|\| !!maxCharLimit) && (\n\t\t\t\t\t<SC.InputHeader\n\t\t\t\t\t\tinvalid={isInvalid}\n\t\t\t\t\t\tmaxCharAlignment={maxCharAlignment}\n\t\t\t\t\t>\n\t\t\t\t\t\t{labelElement && labelElement}\n\t\t\t\t\t\t<div className=\"label__container\">\n\t\t\t\t\t\t\t{labelTextBold ? (\n\t\t\t\t\t\t\t\t<TitleSmall>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t\t{isRequired ? <span></span> : ''}\n\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<BodySecondary>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t\t{isRequired ? <span></span> : ''}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{props.tooltipText && (\n\t\t\t\t\t\t\t\t<Tooltip body={props.tooltipText} placement={'top'}>\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ marginTop: -3 }}\n\t\t\t\t\t\t\t\t\t\t\twidth={18}\n\t\t\t\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\tisInvalid\n\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{maxCharLimit > 0 && maxCharLimitPosition === 'TOP' && (\n\t\t\t\t\t\t\t<SC.MaxCharStyle style={maxCharStyle}>\n\t\t\t\t\t\t\t\t{(value ?? '').toString()?.length ?? 0}/{maxCharLimit}\n\t\t\t\t\t\t\t</SC.MaxCharStyle>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</SC.InputHeader>\n\t\t\t\t)}\n\t\t\t</SC.RootContainer>\n\t\t);\n\t},\n);\n\nInput.displayName = 'Input';\n"],"names":["Input","forwardRef","props","fRef","placeholder","leftIcon","rightIcon","labelText","maxCharLimit","isRequired","hintText","type","state","validate","variant","button","suffixText","prefixText","onChangeText","value","noErrorHint","reset","rangeValidation","noKeyDownChange","version","noMaxCharCheck","labelElement","autoGrow","minHeight","maxHeight","labelTextBold","truncateText","maxCharLimitPosition","maxCharStyle","hightlightInputColor","onKeyDownEvent","hideInputHeader","hideBorder","inputWrapperStyles","minCharsToTrigger","maxCharAlignment","isDisabled","allowUnsafeInput","leftIconStyle","LeftIcon","RightIcon","isInvalid","setIsInvalid","useState","isActive","setIsActive","errorMessage","setErrorMessage","iconSize","stylesFromOutside","useContext","InputStyleContext","inputValue","setInputValue","_ref","useRef","inputRef","useEffect","numberInput","onWheel","executeCallback","cb","params","isFunction","getMaxChar","onKeyDown","e","MAX_CHAR_LIMIT","KEY_CODES_TO_BE_EXCLUDED","MIN_CHAR_LIMIT","inputText","event","onChange","shouldSanitizeForType","sanitizeUnsafeInput","validateFunction","validateInput","isValid","error","onFocus","onBlur","getInputHTML","jsxs","Fragment","jsx","SC.RootContainer","SC.InputFooter","ErrorIcon","SC.MaxCharStyle","SC.InputWrapper","SC.IconHolder","PrefixHolder","SC.InputContainer","SC.InputContainerSmall","SC.InputContainerXSmall","SuffixHolder","Button","SC.InputHeader","TitleSmall","BodySecondary","Tooltip","InfoIcon","COLORS"],"mappings":"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"}
1	+ {"version":3,"file":"Input.js","sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import InfoIcon from '@src/assets/icons/info.svg';\nimport React, {\n\tforwardRef,\n\tMutableRefObject,\n\tRef,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { Button } from '@src/components/button';\nimport {\n\tisFunction,\n\tsanitizeUnsafeInput,\n\tshouldSanitizeForType,\n\tvalidateInput,\n} from '@src/components/input/Input-helper';\nimport { Tooltip } from '@src/components/tooltips';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputStyleContext } from './context/InputStyleProvider';\nimport { InputProps, InputTypeI, InputVariant } from './Input.model';\nimport * as SC from './Input.styled';\nimport { PrefixHolder, SuffixHolder } from './Input.styled';\n\nexport const Input = forwardRef(\n\t(\n\t\tprops: InputProps,\n\t\tfRef: React.ForwardedRef<HTMLInputElement \| HTMLTextAreaElement \| null>,\n\t) => {\n\t\tconst {\n\t\t\tplaceholder,\n\t\t\tleftIcon,\n\t\t\trightIcon,\n\t\t\tlabelText,\n\t\t\tmaxCharLimit,\n\t\t\tisRequired,\n\t\t\thintText,\n\t\t\ttype,\n\t\t\tstate,\n\t\t\tvalidate,\n\t\t\tvariant,\n\t\t\tbutton,\n\t\t\tsuffixText,\n\t\t\tprefixText,\n\t\t\tonChangeText,\n\t\t\tvalue,\n\t\t\tnoErrorHint,\n\t\t\treset,\n\t\t\trangeValidation,\n\t\t\tnoKeyDownChange,\n\t\t\tversion,\n\t\t\tnoMaxCharCheck,\n\t\t\tlabelElement,\n\t\t\tautoGrow,\n\t\t\tminHeight,\n\t\t\tmaxHeight,\n\t\t\tlabelTextBold,\n\t\t\ttruncateText,\n\t\t\tmaxCharLimitPosition,\n\t\t\tmaxCharStyle,\n\t\t\thightlightInputColor,\n\t\t\tonKeyDownEvent,\n\t\t\thideInputHeader,\n\t\t\thideBorder,\n\t\t\tinputWrapperStyles,\n\t\t\tminCharsToTrigger,\n\t\t\tmaxCharAlignment,\n\t\t\tisDisabled = false,\n\t\t\tallowUnsafeInput,\n\t\t\tleftIconStyle,\n\t\t} = {\n\t\t\tmaxCharLimit: 0,\n\t\t\ttype: 'text' as InputTypeI,\n\t\t\tvariant: 'default' as InputVariant,\n\t\t\tmaxCharLimitPosition: 'TOP',\n\t\t\tminCharsToTrigger: 0,\n\t\t\tmaxCharAlignment: false,\n\t\t\t...props,\n\t\t};\n\t\tconst LeftIcon = leftIcon?.icon;\n\t\tconst RightIcon = rightIcon?.icon;\n\t\tconst [isInvalid, setIsInvalid] = useState<boolean>(false);\n\t\tconst [isActive, setIsActive] = useState<boolean>(false);\n\t\tconst [errorMessage, setErrorMessage] = useState<string>();\n\t\tconst iconSize =\n\t\t\tvariant === 'x-small' ? '12px' : variant === 'small' ? '18px' : '22px';\n\t\tconst stylesFromOutside = useContext(InputStyleContext);\n\t\tconst [inputValue, setInputValue] = useState<string>('');\n\t\tconst _ref = useRef<HTMLInputElement \| HTMLTextAreaElement>(null);\n\t\tconst inputRef: MutableRefObject<HTMLInputElement \| HTMLTextAreaElement> =\n\t\t\t(fRef ?? _ref) as MutableRefObject<\n\t\t\t\tHTMLInputElement \| HTMLTextAreaElement\n\t\t\t>;\n\n\t\tuseEffect(() => {\n\t\t\tsetInputValue(value \|\| '');\n\t\t\tif (!value && autoGrow) {\n\t\t\t\tinputRef.current.style.height = minHeight \|\| '48px';\n\t\t\t}\n\t\t}, [value]);\n\n\t\tuseEffect(() => {\n\t\t\tif (!inputRef.current) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tprops.onReferenceInit?.(inputRef.current);\n\t\t}, [inputRef]);\n\n\t\tuseEffect(() => {\n\t\t\tconst numberInput = inputRef.current;\n\t\t\tif (numberInput && ['phonenumber', 'zip', 'number'].includes(type)) {\n\t\t\t\tnumberInput.addEventListener('wheel', onWheel, { passive: false });\n\n\t\t\t\treturn () => {\n\t\t\t\t\tnumberInput.removeEventListener('wheel', onWheel);\n\t\t\t\t};\n\t\t\t}\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tif (!reset) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetInputValue('');\n\t\t}, [reset]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsActive(!!props.isActive);\n\t\t\tif (props.isActive) {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}\n\t\t}, [props.isActive]);\n\n\t\tuseEffect(() => {\n\t\t\tsetErrorMessage(props.errorMessage);\n\t\t}, [props.errorMessage]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsInvalid(false);\n\t\t\tif (\n\t\t\t\tprops.state === 'invalid' \|\|\n\t\t\t\terrorMessage \|\|\n\t\t\t\tprops.state === 'disabled-invalid'\n\t\t\t) {\n\t\t\t\tsetIsInvalid(true);\n\t\t\t}\n\t\t\tif (props.state === 'active') {\n\t\t\t\tinputRef.current?.focus();\n\t\t\t}\n\t\t}, [props.state, errorMessage]);\n\n\t\tuseEffect(() => {\n\t\t\tsetIsInvalid(!!errorMessage \|\| props.state === 'invalid');\n\t\t}, [errorMessage, props.state]);\n\n\t\tconst executeCallback = (cb: any, ...params: any[]): void => {\n\t\t\tif (!isFunction(cb)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tcb(...params);\n\t\t};\n\n\t\tconst getMaxChar = () => {\n\t\t\tif (type === 'zip') {\n\t\t\t\treturn 6;\n\t\t\t}\n\t\t\treturn 2000;\n\t\t};\n\n\t\tconst onKeyDown = (e) => {\n\t\t\tconst MAX_CHAR_LIMIT = maxCharLimit !== 0 ? maxCharLimit : getMaxChar();\n\t\t\tconst KEY_CODES_TO_BE_EXCLUDED = [8];\n\t\t\tconst MIN_CHAR_LIMIT = minCharsToTrigger;\n\t\t\tconst inputText = e.target.value;\n\t\t\tif (\n\t\t\t\tonKeyDownEvent &&\n\t\t\t\t(!inputText.length \|\| inputText.length >= MIN_CHAR_LIMIT)\n\t\t\t) {\n\t\t\t\tonKeyDownEvent(e);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t!noKeyDownChange &&\n\t\t\t\t(!inputText.length \|\| inputText.length >= MIN_CHAR_LIMIT)\n\t\t\t) {\n\t\t\t\tonChangeText(value \|\| '', e);\n\t\t\t}\n\t\t\tif (noMaxCharCheck) return;\n\n\t\t\tif (\n\t\t\t\t!KEY_CODES_TO_BE_EXCLUDED.includes(e.which) &&\n\t\t\t\tMAX_CHAR_LIMIT > 0 &&\n\t\t\t\tinputText.length >= MAX_CHAR_LIMIT\n\t\t\t) {\n\t\t\t\te.preventDefault();\n\t\t\t}\n\t\t};\n\n\t\tconst onWheel = (event) => {\n\t\t\tevent.preventDefault(); // Prevent the default scroll behavior\n\t\t};\n\n\t\tconst onChange = (e) => {\n\t\t\tlet inputText = e.target.value;\n\t\t\tconst MAX_CHAR_LIMIT =\n\t\t\t\tmaxCharLimit !== 0 ? maxCharLimit + 1 : getMaxChar();\n\t\t\tconst MIN_CHAR_LIMIT = minCharsToTrigger;\n\n\t\t\tif (!allowUnsafeInput && shouldSanitizeForType(type)) {\n\t\t\t\tinputText = sanitizeUnsafeInput(inputText);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\t!noMaxCharCheck &&\n\t\t\t\tMAX_CHAR_LIMIT > 0 &&\n\t\t\t\tinputText.length >= MAX_CHAR_LIMIT\n\t\t\t) {\n\t\t\t\t// letting user to copy paste text upto max limit instead of blank action\n\t\t\t\tinputText = inputText.substring(0, MAX_CHAR_LIMIT - 1);\n\t\t\t}\n\n\t\t\tif (!props.textControl) {\n\t\t\t\tsetInputValue(inputText \|\| '');\n\t\t\t}\n\t\t\tif (MIN_CHAR_LIMIT && inputText && inputText.length < MIN_CHAR_LIMIT) {\n\t\t\t\t// if minCharsToTrigger exists and is not reached, do nothing\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonChangeText(inputText, e);\n\t\t\tif (autoGrow) {\n\t\t\t\tinputRef.current.style.height = `${inputRef.current.scrollHeight}px`;\n\t\t\t\tif (!inputText) {\n\t\t\t\t\tinputRef.current.style.height = minHeight \|\| '48px';\n\t\t\t\t}\n\t\t\t}\n\t\t\tconst validateFunction = validate \|\| validateInput;\n\t\t\tif (!validateFunction \|\| !isFunction(validateFunction)) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst [isValid, error] = validateFunction(\n\t\t\t\tinputText,\n\t\t\t\ttype,\n\t\t\t\trangeValidation,\n\t\t\t);\n\n\t\t\tsetIsInvalid(!isValid);\n\t\t\tsetErrorMessage(props.errorMessage ? props.errorMessage : error);\n\t\t};\n\n\t\tconst onFocus = (e) => {\n\t\t\tif (!props.skipFocus) {\n\t\t\t\tsetIsActive(true);\n\t\t\t}\n\t\t\texecuteCallback(props.onFocus?.(e));\n\t\t};\n\n\t\tconst onBlur = (e) => {\n\t\t\tif (!props.skipFocus) {\n\t\t\t\tsetIsActive(false);\n\t\t\t}\n\t\t\texecuteCallback(props.onBlur?.(e));\n\t\t};\n\n\t\tconst getInputHTML = () => {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t{type !== 'multiline' && (\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tclassName={truncateText ? 'truncate-class' : ''}\n\t\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\t\tid={props.id}\n\t\t\t\t\t\t\tstyle={stylesFromOutside?.input ?? {}}\n\t\t\t\t\t\t\tref={inputRef as Ref<HTMLInputElement>}\n\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\ttype={\n\t\t\t\t\t\t\t\t['phonenumber', 'zip', 'number'].includes(type)\n\t\t\t\t\t\t\t\t\t? 'number'\n\t\t\t\t\t\t\t\t\t: type\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\tonFocus={(e) => onFocus(e)}\n\t\t\t\t\t\t\tonBlur={(e) => onBlur(e)}\n\t\t\t\t\t\t\tplaceholder={placeholder \|\| 'Enter here'}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tonClick={(e) => executeCallback(props.onClick)}\n\t\t\t\t\t\t\tonKeyDown={(e) => onKeyDown(e)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{type === 'multiline' && (\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\tref={inputRef as Ref<HTMLTextAreaElement>}\n\t\t\t\t\t\t\tonFocus={(e) => onFocus(e)}\n\t\t\t\t\t\t\tonBlur={(e) => onBlur(e)}\n\t\t\t\t\t\t\tonClick={(e) => executeCallback(props.onClick)}\n\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\tplaceholder={placeholder \|\| 'Enter here'}\n\t\t\t\t\t\t\tonChange={onChange}\n\t\t\t\t\t\t\tonKeyDown={(e) => onKeyDown(e)}\n\t\t\t\t\t\t\tmaxLength={maxCharLimit > 0 ? maxCharLimit : undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<SC.RootContainer\n\t\t\t\twidth={props.width}\n\t\t\t\theight={props.height}\n\t\t\t\tstate={state}\n\t\t\t\ttype={type}\n\t\t\t\tstyle={stylesFromOutside?.RootContainer ?? {}}\n\t\t\t>\n\t\t\t\t<div className=\"flex-align-center\">\n\t\t\t\t\t{!noErrorHint && (!!hintText \|\| !!errorMessage) && (\n\t\t\t\t\t\t<SC.InputFooter invalid={!!errorMessage}>\n\t\t\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t\t\t{errorMessage \|\| hintText}\n\t\t\t\t\t\t</SC.InputFooter>\n\t\t\t\t\t)}\n\t\t\t\t\t{maxCharLimit > 0 && maxCharLimitPosition === 'BOTTOM' && (\n\t\t\t\t\t\t<SC.MaxCharStyle position={'BOTTOM'} style={maxCharStyle}>\n\t\t\t\t\t\t\t{(value ?? '').toString()?.length ?? 0}/{maxCharLimit}\n\t\t\t\t\t\t</SC.MaxCharStyle>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<SC.InputWrapper\n\t\t\t\t\tvariant={variant}\n\t\t\t\t\tstate={state}\n\t\t\t\t\twidth={props.width}\n\t\t\t\t\tisActive={state === 'active' \|\| isActive}\n\t\t\t\t\tisInvalid={isInvalid}\n\t\t\t\t\tstyle={stylesFromOutside?.InputWrapper ?? inputWrapperStyles ?? {}}\n\t\t\t\t\tversion={version}\n\t\t\t\t\theight={props.height}\n\t\t\t\t\thightlightInputColor={hightlightInputColor}\n\t\t\t\t\thideBorder={hideBorder}\n\t\t\t\t>\n\t\t\t\t\t{!!LeftIcon && (\n\t\t\t\t\t\t<SC.IconHolder\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\t\tonClick={() => executeCallback(leftIcon?.callback)}\n\t\t\t\t\t\t\tisLeft={true}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t...(stylesFromOutside?.IconHolder ?? {}),\n\t\t\t\t\t\t\t\t...leftIconStyle,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<LeftIcon />\n\t\t\t\t\t\t</SC.IconHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!prefixText && (\n\t\t\t\t\t\t<PrefixHolder variant={variant}>{prefixText}</PrefixHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'default' && (\n\t\t\t\t\t\t<SC.InputContainer\n\t\t\t\t\t\t\theight={props.height}\n\t\t\t\t\t\t\ttype={props.type}\n\t\t\t\t\t\t\tminHeight={minHeight}\n\t\t\t\t\t\t\tmaxHeight={maxHeight}\n\t\t\t\t\t\t\tautoGrow={autoGrow}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainer>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'small' && (\n\t\t\t\t\t\t<SC.InputContainerSmall height={props.height} type={props.type}>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainerSmall>\n\t\t\t\t\t)}\n\t\t\t\t\t{variant === 'x-small' && (\n\t\t\t\t\t\t<SC.InputContainerXSmall height={props.height} type={props.type}>\n\t\t\t\t\t\t\t{getInputHTML()}\n\t\t\t\t\t\t</SC.InputContainerXSmall>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!RightIcon && (\n\t\t\t\t\t\t<SC.IconHolder\n\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\ticonSize={iconSize}\n\t\t\t\t\t\t\tonClick={() => executeCallback(rightIcon?.callback)}\n\t\t\t\t\t\t\tisLeft={false}\n\t\t\t\t\t\t\tdata-test={rightIcon?.['data-test']}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<RightIcon />\n\t\t\t\t\t\t</SC.IconHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{!!suffixText && (\n\t\t\t\t\t\t<SuffixHolder variant={variant}>{suffixText}</SuffixHolder>\n\t\t\t\t\t)}\n\t\t\t\t\t{button && button.text && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonText={button.text}\n\t\t\t\t\t\t\tbuttonType={button.buttonType}\n\t\t\t\t\t\t\tonClick={() => executeCallback(button?.onClick)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t{button && button.buttonProps && <Button {...button.buttonProps} />}\n\t\t\t\t</SC.InputWrapper>\n\t\t\t\t{!hideInputHeader && (!!labelText \|\| !!maxCharLimit) && (\n\t\t\t\t\t<SC.InputHeader\n\t\t\t\t\t\tinvalid={isInvalid}\n\t\t\t\t\t\tmaxCharAlignment={maxCharAlignment}\n\t\t\t\t\t>\n\t\t\t\t\t\t{labelElement && labelElement}\n\t\t\t\t\t\t<div className=\"label__container\">\n\t\t\t\t\t\t\t{labelTextBold ? (\n\t\t\t\t\t\t\t\t<TitleSmall>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t\t{isRequired ? <span></span> : ''}\n\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<BodySecondary>\n\t\t\t\t\t\t\t\t\t{labelText}\n\t\t\t\t\t\t\t\t\t{isRequired ? <span></span> : ''}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{props.tooltipText && (\n\t\t\t\t\t\t\t\t<Tooltip body={props.tooltipText} placement={'top'}>\n\t\t\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ marginTop: -3 }}\n\t\t\t\t\t\t\t\t\t\t\twidth={18}\n\t\t\t\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\tisInvalid\n\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{maxCharLimit > 0 && maxCharLimitPosition === 'TOP' && (\n\t\t\t\t\t\t\t<SC.MaxCharStyle style={maxCharStyle}>\n\t\t\t\t\t\t\t\t{(value ?? '').toString()?.length ?? 0}/{maxCharLimit}\n\t\t\t\t\t\t\t</SC.MaxCharStyle>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</SC.InputHeader>\n\t\t\t\t)}\n\t\t\t</SC.RootContainer>\n\t\t);\n\t},\n);\n\nInput.displayName = 'Input';\n"],"names":["Input","forwardRef","props","fRef","placeholder","leftIcon","rightIcon","labelText","maxCharLimit","isRequired","hintText","type","state","validate","variant","button","suffixText","prefixText","onChangeText","value","noErrorHint","reset","rangeValidation","noKeyDownChange","version","noMaxCharCheck","labelElement","autoGrow","minHeight","maxHeight","labelTextBold","truncateText","maxCharLimitPosition","maxCharStyle","hightlightInputColor","onKeyDownEvent","hideInputHeader","hideBorder","inputWrapperStyles","minCharsToTrigger","maxCharAlignment","isDisabled","allowUnsafeInput","leftIconStyle","LeftIcon","RightIcon","isInvalid","setIsInvalid","useState","isActive","setIsActive","errorMessage","setErrorMessage","iconSize","stylesFromOutside","useContext","InputStyleContext","inputValue","setInputValue","_ref","useRef","inputRef","useEffect","numberInput","onWheel","executeCallback","cb","params","isFunction","getMaxChar","onKeyDown","e","MAX_CHAR_LIMIT","KEY_CODES_TO_BE_EXCLUDED","MIN_CHAR_LIMIT","inputText","event","onChange","shouldSanitizeForType","sanitizeUnsafeInput","validateFunction","validateInput","isValid","error","onFocus","onBlur","getInputHTML","jsxs","Fragment","jsx","SC.RootContainer","SC.InputFooter","ErrorIcon","SC.MaxCharStyle","SC.InputWrapper","SC.IconHolder","PrefixHolder","SC.InputContainer","SC.InputContainerSmall","SC.InputContainerXSmall","SuffixHolder","Button","SC.InputHeader","TitleSmall","BodySecondary","Tooltip","InfoIcon","COLORS"],"mappings":"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"}

package/dist/cjs/components/multi-level-dropdown/MenuItem.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),T=require("../../assets/icons/chevronRight2.svg.js"),x=require("react"),n=require("../../constants/Theme.js"),M=require("../TypographyStyle.js"),s=require("./MultiLevelDropdown.styled.js"),v=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},o=v(x),q=({width:r,onDropdownItemClick:f,option:e,parents:O,allowParentSelection:y,maxLevels:S,currentLevel:h,renderNestedMenu:R,version:l})=>{const[C,b]=o.default.useState(!1),[c,g]=o.default.useState(!1),[m,j]=o.default.useState({top:0,left:0}),L=x.useRef({top:0,left:0}),d=!!e.children&&e.children.length>0,u=d&&(S===void 0||h<S),p=()=>{!f||(e.disabled??!1)||(!d||y)&&f(e,O)},I=a=>{const i=a.currentTarget.getBoundingClientRect();j({top:i.top,left:i.right}),L.current={top:i.top,left:i.right}};return t.jsxs(s.MenuItemWrapper,{version:l,onMouseEnter:a=>{u&&(b(!0),I(a))},onMouseLeave:()=>{b(!1)},onClick:a=>{a.stopPropagation(),p()},id:"menuItemWrapper",style:{cursor:e.disabled??!1?"not-allowed":"pointer",backgroundColor:e.disabled??!1?n.COLORS.surface.standard:"transparent"},children:[e.customComponent?e.customComponent:t.jsxs(s.MenuItemContainer,{isSelected:e.selected,isSubMenuOpen:C,isHovered:c,isDisabled:e.disabled??!1,version:l,children:[t.jsxs(s.ContentContainer,{children:[e.leadingIcon&&t.jsx(s.LeadingIconContainer,{children:e.leadingIcon}),t.jsxs("div",{children:[t.jsx(M.BodyCaption,{style:{color:e.disabled??!1?n.COLORS.content.inactive:e.selected||c?l==="3.0"?n.COLORS.text.primary:n.COLORS.content.positive:n.COLORS.content.primary},children:e.label}),e.subText&&t.jsx(M.BodyTiny,{style:{color:e.disabled??!1?n.COLORS.content.inactive:e.selected||c?l==="3.0"?n.COLORS.text.primary:n.COLORS.content.positive:n.COLORS.content.secondary,marginTop:"2px"},children:e.subText})]})]}),d?t.jsx(s.TrailingIconContainer,{children:t.jsx(T.default,{width:16,height:16,color:!u||(e.disabled??!1)?n.COLORS.content.inactive:e.selected||c?l==="3.0"?n.COLORS.text.primary:n.COLORS.content.positive:n.COLORS.content.primary})}):e.trailingIcon?t.jsx(s.TrailingIconContainer,{children:e.trailingIcon}):t.jsx(t.Fragment,{})]}),!(e.disabled??!1)&&e.children&&e.children.length>0&&u&&C&&t.jsx(s.SubMenuContainer,{width:r,className:"submenu",onMouseEnter:()=>g(!0),onMouseLeave:()=>g(!1),children:t.jsx(s.StyledSubMenuWrapper,{width:r,top:m.top,left:m.left,children:t.jsx(s.SubMenuListContainer,{version:l,children:R(e.children,[...O,e],h+1)})})})]})};exports.MenuItem=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),T=require("../../assets/icons/chevronRight2.svg.js"),x=require("react"),n=require("../../constants/Theme.js"),M=require("../TypographyStyle.js"),s=require("./MultiLevelDropdown.styled.js"),v=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},o=v(x),q=({width:r,onDropdownItemClick:f,option:e,parents:O,allowParentSelection:y,maxLevels:S,currentLevel:h,renderNestedMenu:R,version:l})=>{const[C,b]=o.default.useState(!1),[c,g]=o.default.useState(!1),[m,j]=o.default.useState({top:0,left:0}),p=x.useRef({top:0,left:0}),d=!!e.children&&e.children.length>0,u=d&&(S===void 0||h<S),L=()=>{!f||(e.disabled??!1)||(!d||y)&&f(e,O)},I=a=>{const i=a.currentTarget.getBoundingClientRect();j({top:i.top,left:i.right}),p.current={top:i.top,left:i.right}};return t.jsxs(s.MenuItemWrapper,{version:l,onMouseEnter:a=>{u&&(b(!0),I(a))},onMouseLeave:()=>{b(!1)},onClick:a=>{a.stopPropagation(),L()},id:"menuItemWrapper","data-testid":"menuItemWrapper",style:{cursor:e.disabled??!1?"not-allowed":"pointer",backgroundColor:e.disabled??!1?n.COLORS.surface.standard:"transparent"},children:[e.customComponent?e.customComponent:t.jsxs(s.MenuItemContainer,{isSelected:e.selected,isSubMenuOpen:C,isHovered:c,isDisabled:e.disabled??!1,version:l,children:[t.jsxs(s.ContentContainer,{children:[e.leadingIcon&&t.jsx(s.LeadingIconContainer,{children:e.leadingIcon}),t.jsxs("div",{children:[t.jsx(M.BodyCaption,{style:{color:e.disabled??!1?n.COLORS.content.inactive:e.selected||c?l==="3.0"?n.COLORS.text.primary:n.COLORS.content.positive:n.COLORS.content.primary},children:e.label}),e.subText&&t.jsx(M.BodyTiny,{style:{color:e.disabled??!1?n.COLORS.content.inactive:e.selected||c?l==="3.0"?n.COLORS.text.primary:n.COLORS.content.positive:n.COLORS.content.secondary,marginTop:"2px"},children:e.subText})]})]}),d?t.jsx(s.TrailingIconContainer,{children:t.jsx(T.default,{width:16,height:16,color:!u||(e.disabled??!1)?n.COLORS.content.inactive:e.selected||c?l==="3.0"?n.COLORS.text.primary:n.COLORS.content.positive:n.COLORS.content.primary})}):e.trailingIcon?t.jsx(s.TrailingIconContainer,{children:e.trailingIcon}):t.jsx(t.Fragment,{})]}),!(e.disabled??!1)&&e.children&&e.children.length>0&&u&&C&&t.jsx(s.SubMenuContainer,{width:r,className:"submenu",onMouseEnter:()=>g(!0),onMouseLeave:()=>g(!1),children:t.jsx(s.StyledSubMenuWrapper,{width:r,top:m.top,left:m.left,children:t.jsx(s.SubMenuListContainer,{version:l,children:R(e.children,[...O,e],h+1)})})})]})};exports.MenuItem=q;
 //# sourceMappingURL=MenuItem.js.map

package/dist/cjs/components/multi-level-dropdown/MenuItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItem.js","sources":["../../../../src/components/multi-level-dropdown/MenuItem.tsx"],"sourcesContent":["import ChevronRightIcon from '@src/assets/icons/chevronRight2.svg';\nimport React, { useRef } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyCaption, BodyTiny } from '../TypographyStyle';\nimport {\n\tContentContainer,\n\tLeadingIconContainer,\n\tMenuItemContainer,\n\tMenuItemWrapper,\n\tStyledSubMenuWrapper,\n\tSubMenuContainer,\n\tSubMenuListContainer,\n\tTrailingIconContainer,\n} from './MultiLevelDropdown.styled';\nimport {\n\tMultiLevelDropdownOption,\n\tRenderNestedMenu,\n\tSingleOption,\n} from './type';\n\nexport const MenuItem: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toption: SingleOption;\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\tcurrentLevel: number;\n\trenderNestedMenu: RenderNestedMenu;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toption,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\tcurrentLevel,\n\trenderNestedMenu,\n\tversion,\n}) => {\n\tconst [isSubMenuOpen, setIsSubMenuOpen] = React.useState(false);\n\tconst [isSubMenuHovered, setIsSubMenuHovered] = React.useState(false);\n\tconst [subMenuPosition, setSubMenuPosition] = React.useState({\n\t\ttop: 0,\n\t\tleft: 0,\n\t});\n\tconst positionRef = useRef<any>({ top: 0, left: 0 });\n\tconst hasChildren = !!option.children && option.children.length > 0;\n\tconst canOpenSubMenu =\n\t\thasChildren && (maxLevels === undefined \|\| currentLevel < maxLevels);\n\n\tconst handleDropdownOptionClick = () => {\n\t\tif (!onDropdownItemClick \|\| (option.disabled ?? false)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!hasChildren \|\| allowParentSelection) {\n\t\t\tonDropdownItemClick(option, parents);\n\t\t}\n\t};\n\n\tconst calculateSubMenuPosition = (event: React.MouseEvent) => {\n\t\tconst rect = (event.currentTarget as HTMLElement).getBoundingClientRect();\n\t\tsetSubMenuPosition({\n\t\t\ttop: rect.top,\n\t\t\tleft: rect.right,\n\t\t});\n\t\tpositionRef.current = {\n\t\t\ttop: rect.top,\n\t\t\tleft: rect.right,\n\t\t};\n\t};\n\n\treturn (\n\t\t<MenuItemWrapper\n\t\t\tversion={version}\n\t\t\tonMouseEnter={(event) => {\n\t\t\t\tif (canOpenSubMenu) {\n\t\t\t\t\tsetIsSubMenuOpen(true);\n\t\t\t\t\tcalculateSubMenuPosition(event);\n\t\t\t\t}\n\t\t\t}}\n\t\t\tonMouseLeave={() => {\n\t\t\t\tsetIsSubMenuOpen(false);\n\t\t\t}}\n\t\t\tonClick={(e) => {\n\t\t\t\te.stopPropagation();\n\t\t\t\thandleDropdownOptionClick();\n\t\t\t}}\n\t\t\tid=\"menuItemWrapper\"\n\t\t\tstyle={{\n\t\t\t\tcursor: option.disabled ?? false ? 'not-allowed' : 'pointer',\n\t\t\t\tbackgroundColor:\n\t\t\t\t\toption.disabled ?? false ? COLORS.surface.standard : 'transparent',\n\t\t\t}}\n\t\t>\n\t\t\t{option.customComponent ? (\n\t\t\t\toption.customComponent\n\t\t\t) : (\n\t\t\t\t<MenuItemContainer\n\t\t\t\t\tisSelected={option.selected}\n\t\t\t\t\tisSubMenuOpen={isSubMenuOpen}\n\t\t\t\t\tisHovered={isSubMenuHovered}\n\t\t\t\t\tisDisabled={option.disabled ?? false}\n\t\t\t\t\tversion={version}\n\t\t\t\t>\n\t\t\t\t\t<ContentContainer>\n\t\t\t\t\t\t{option.leadingIcon && (\n\t\t\t\t\t\t\t<LeadingIconContainer>{option.leadingIcon}</LeadingIconContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\toption.disabled ?? false\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t: option.selected \|\| isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t\t? version === '3.0'\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.text.primary\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t{option.subText && (\n\t\t\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\toption.disabled ?? false\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t\t: option.selected \|\| isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t\t\t? version === '3.0'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.text.primary\n\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t\t\tmarginTop: '2px',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{option.subText}\n\t\t\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ContentContainer>\n\t\t\t\t\t{hasChildren ? (\n\t\t\t\t\t\t<TrailingIconContainer>\n\t\t\t\t\t\t\t<ChevronRightIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t!canOpenSubMenu \|\| (option.disabled ?? false)\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: option.selected \|\| isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t? version === '3.0'\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.text.primary\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TrailingIconContainer>\n\t\t\t\t\t) : option.trailingIcon ? (\n\t\t\t\t\t\t<TrailingIconContainer>{option.trailingIcon}</TrailingIconContainer>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t</MenuItemContainer>\n\t\t\t)}\n\n\t\t\t{!(option.disabled ?? false) &&\n\t\t\t\toption.children &&\n\t\t\t\toption.children.length > 0 &&\n\t\t\t\tcanOpenSubMenu &&\n\t\t\t\tisSubMenuOpen && (\n\t\t\t\t\t<SubMenuContainer\n\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\tclassName=\"submenu\"\n\t\t\t\t\t\tonMouseEnter={() => setIsSubMenuHovered(true)}\n\t\t\t\t\t\tonMouseLeave={() => setIsSubMenuHovered(false)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StyledSubMenuWrapper\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\ttop={subMenuPosition.top}\n\t\t\t\t\t\t\tleft={subMenuPosition.left}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SubMenuListContainer version={version}>\n\t\t\t\t\t\t\t\t{renderNestedMenu(\n\t\t\t\t\t\t\t\t\toption.children,\n\t\t\t\t\t\t\t\t\t[...parents, option],\n\t\t\t\t\t\t\t\t\tcurrentLevel + 1,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</SubMenuListContainer>\n\t\t\t\t\t\t</StyledSubMenuWrapper>\n\t\t\t\t\t</SubMenuContainer>\n\t\t\t\t)}\n\t\t</MenuItemWrapper>\n\t);\n};\n"],"names":["MenuItem","width","onDropdownItemClick","option","parents","allowParentSelection","maxLevels","currentLevel","renderNestedMenu","version","isSubMenuOpen","setIsSubMenuOpen","React","isSubMenuHovered","setIsSubMenuHovered","subMenuPosition","setSubMenuPosition","positionRef","useRef","hasChildren","canOpenSubMenu","handleDropdownOptionClick","calculateSubMenuPosition","event","rect","jsxs","MenuItemWrapper","e","COLORS","MenuItemContainer","ContentContainer","jsx","LeadingIconContainer","BodyCaption","BodyTiny","TrailingIconContainer","ChevronRightIcon","Fragment","SubMenuContainer","StyledSubMenuWrapper","SubMenuListContainer"],"mappings":"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"}
1	+ {"version":3,"file":"MenuItem.js","sources":["../../../../src/components/multi-level-dropdown/MenuItem.tsx"],"sourcesContent":["import ChevronRightIcon from '@src/assets/icons/chevronRight2.svg';\nimport React, { useRef } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyCaption, BodyTiny } from '../TypographyStyle';\nimport {\n\tContentContainer,\n\tLeadingIconContainer,\n\tMenuItemContainer,\n\tMenuItemWrapper,\n\tStyledSubMenuWrapper,\n\tSubMenuContainer,\n\tSubMenuListContainer,\n\tTrailingIconContainer,\n} from './MultiLevelDropdown.styled';\nimport {\n\tMultiLevelDropdownOption,\n\tRenderNestedMenu,\n\tSingleOption,\n} from './type';\n\nexport const MenuItem: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toption: SingleOption;\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\tcurrentLevel: number;\n\trenderNestedMenu: RenderNestedMenu;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toption,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\tcurrentLevel,\n\trenderNestedMenu,\n\tversion,\n}) => {\n\tconst [isSubMenuOpen, setIsSubMenuOpen] = React.useState(false);\n\tconst [isSubMenuHovered, setIsSubMenuHovered] = React.useState(false);\n\tconst [subMenuPosition, setSubMenuPosition] = React.useState({\n\t\ttop: 0,\n\t\tleft: 0,\n\t});\n\tconst positionRef = useRef<any>({ top: 0, left: 0 });\n\tconst hasChildren = !!option.children && option.children.length > 0;\n\tconst canOpenSubMenu =\n\t\thasChildren && (maxLevels === undefined \|\| currentLevel < maxLevels);\n\n\tconst handleDropdownOptionClick = () => {\n\t\tif (!onDropdownItemClick \|\| (option.disabled ?? false)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!hasChildren \|\| allowParentSelection) {\n\t\t\tonDropdownItemClick(option, parents);\n\t\t}\n\t};\n\n\tconst calculateSubMenuPosition = (event: React.MouseEvent) => {\n\t\tconst rect = (event.currentTarget as HTMLElement).getBoundingClientRect();\n\t\tsetSubMenuPosition({\n\t\t\ttop: rect.top,\n\t\t\tleft: rect.right,\n\t\t});\n\t\tpositionRef.current = {\n\t\t\ttop: rect.top,\n\t\t\tleft: rect.right,\n\t\t};\n\t};\n\n\treturn (\n\t\t<MenuItemWrapper\n\t\t\tversion={version}\n\t\t\tonMouseEnter={(event) => {\n\t\t\t\tif (canOpenSubMenu) {\n\t\t\t\t\tsetIsSubMenuOpen(true);\n\t\t\t\t\tcalculateSubMenuPosition(event);\n\t\t\t\t}\n\t\t\t}}\n\t\t\tonMouseLeave={() => {\n\t\t\t\tsetIsSubMenuOpen(false);\n\t\t\t}}\n\t\t\tonClick={(e) => {\n\t\t\t\te.stopPropagation();\n\t\t\t\thandleDropdownOptionClick();\n\t\t\t}}\n\t\t\tid=\"menuItemWrapper\"\n\t\t\tdata-testid=\"menuItemWrapper\"\n\t\t\tstyle={{\n\t\t\t\tcursor: option.disabled ?? false ? 'not-allowed' : 'pointer',\n\t\t\t\tbackgroundColor:\n\t\t\t\t\toption.disabled ?? false ? COLORS.surface.standard : 'transparent',\n\t\t\t}}\n\t\t>\n\t\t\t{option.customComponent ? (\n\t\t\t\toption.customComponent\n\t\t\t) : (\n\t\t\t\t<MenuItemContainer\n\t\t\t\t\tisSelected={option.selected}\n\t\t\t\t\tisSubMenuOpen={isSubMenuOpen}\n\t\t\t\t\tisHovered={isSubMenuHovered}\n\t\t\t\t\tisDisabled={option.disabled ?? false}\n\t\t\t\t\tversion={version}\n\t\t\t\t>\n\t\t\t\t\t<ContentContainer>\n\t\t\t\t\t\t{option.leadingIcon && (\n\t\t\t\t\t\t\t<LeadingIconContainer>{option.leadingIcon}</LeadingIconContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\toption.disabled ?? false\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t: option.selected \|\| isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t\t? version === '3.0'\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.text.primary\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t{option.subText && (\n\t\t\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\toption.disabled ?? false\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t\t: option.selected \|\| isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t\t\t? version === '3.0'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.text.primary\n\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t\t\tmarginTop: '2px',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{option.subText}\n\t\t\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ContentContainer>\n\t\t\t\t\t{hasChildren ? (\n\t\t\t\t\t\t<TrailingIconContainer>\n\t\t\t\t\t\t\t<ChevronRightIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t!canOpenSubMenu \|\| (option.disabled ?? false)\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: option.selected \|\| isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t? version === '3.0'\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.text.primary\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TrailingIconContainer>\n\t\t\t\t\t) : option.trailingIcon ? (\n\t\t\t\t\t\t<TrailingIconContainer>{option.trailingIcon}</TrailingIconContainer>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t</MenuItemContainer>\n\t\t\t)}\n\n\t\t\t{!(option.disabled ?? false) &&\n\t\t\t\toption.children &&\n\t\t\t\toption.children.length > 0 &&\n\t\t\t\tcanOpenSubMenu &&\n\t\t\t\tisSubMenuOpen && (\n\t\t\t\t\t<SubMenuContainer\n\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\tclassName=\"submenu\"\n\t\t\t\t\t\tonMouseEnter={() => setIsSubMenuHovered(true)}\n\t\t\t\t\t\tonMouseLeave={() => setIsSubMenuHovered(false)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StyledSubMenuWrapper\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\ttop={subMenuPosition.top}\n\t\t\t\t\t\t\tleft={subMenuPosition.left}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SubMenuListContainer version={version}>\n\t\t\t\t\t\t\t\t{renderNestedMenu(\n\t\t\t\t\t\t\t\t\toption.children,\n\t\t\t\t\t\t\t\t\t[...parents, option],\n\t\t\t\t\t\t\t\t\tcurrentLevel + 1,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</SubMenuListContainer>\n\t\t\t\t\t\t</StyledSubMenuWrapper>\n\t\t\t\t\t</SubMenuContainer>\n\t\t\t\t)}\n\t\t</MenuItemWrapper>\n\t);\n};\n"],"names":["MenuItem","width","onDropdownItemClick","option","parents","allowParentSelection","maxLevels","currentLevel","renderNestedMenu","version","isSubMenuOpen","setIsSubMenuOpen","React","isSubMenuHovered","setIsSubMenuHovered","subMenuPosition","setSubMenuPosition","positionRef","useRef","hasChildren","canOpenSubMenu","handleDropdownOptionClick","calculateSubMenuPosition","event","rect","jsxs","MenuItemWrapper","e","COLORS","MenuItemContainer","ContentContainer","jsx","LeadingIconContainer","BodyCaption","BodyTiny","TrailingIconContainer","ChevronRightIcon","Fragment","SubMenuContainer","StyledSubMenuWrapper","SubMenuListContainer"],"mappings":"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"}

package/dist/cjs/components/radioButton/RadioButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),a=require("react"),r=require("./RadioButton.styled.js"),n=require("../TypographyStyle.js"),t=require("../../constants/Theme.js"),O=e=>{const l=a.useMemo(()=>e?.activeColor||t.COLORS.background.positive.vibrant,[e.activeColor]),s=a.useMemo(()=>e.isDisabled?t.COLORS.content.inactive:e.isActive?l:t.COLORS.content.primary,[e.isDisabled,e.isActive,l]);return i.jsxs("svg",{width:e.isSmall?"16":"20",height:e.isSmall?"16":"20",viewBox:e.isSmall?"0 0 16 16":"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[i.jsx("circle",{cx:e.isSmall?"8":"10",cy:e.isSmall?"8":"10",r:e.isSmall?6:9,stroke:s,strokeWidth:e.isSmall?1.5:2}),e.isActive&&i.jsx("circle",{cx:e.isSmall?"8":"10",cy:e.isSmall?"8":"10",r:e.isSmall?3:5,fill:e.isDisabled?t.COLORS.content.inactive:l})]})},b=e=>{const[l,s]=a.useState(e.isActive||!1),[S,c]=a.useState(!1),[u,d]=a.useState(!1),x=()=>{if(!e.skipSelectingOff&&!e.isDisabled){const o=!l;s(o),e.onValueChange?.(o,e.value)}};a.useEffect(()=>{s(e.isActive)},[e.isActive]);const C=()=>e.label?e.boldOnChecked&&l||e.alwaysBold?i.jsx(n.TitleSmall,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label}):e.size==="SMALL"?i.jsx(n.BodyCaption,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label}):e.labelSize==="MEDIUM"?i.jsx(n.BodySecondary,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label}):i.jsx(n.BodyPrimary,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label}):i.jsx(i.Fragment,{});return i.jsxs(r.RadioButtonContainer,{"data-test":e["data-test"],onClick:x,onMouseEnter:()=>c(!e.skipHoverState),onMouseLeave:()=>c(!1),onMouseDown:()=>d(!e.skipHoverState),onMouseUp:()=>d(!1),style:e.caption?{alignItems:"flex-start"}:{},children:[i.jsx(r.RadioButtonIcon,{checked:l,hovered:S,clicked:u,isDisabled:e.isDisabled||!1,size:e.size,style:e.caption?{margin:"2px 0"}:{},children:i.jsx(O,{isSmall:e.size==="SMALL",isActive:l,isDisabled:e.isDisabled||!1,activeColor:e.activeColor})}),i.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:e.gapBetweenBodyAndCaption||"0px"},children:[C(),e.caption&&i.jsx(n.BodyCaption,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.secondary,children:e.caption})]})]})};exports.RadioButton=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),a=require("react"),r=require("./RadioButton.styled.js"),n=require("../TypographyStyle.js"),t=require("../../constants/Theme.js"),O=e=>{const l=a.useMemo(()=>e?.activeColor||t.COLORS.background.positive.vibrant,[e.activeColor]),s=a.useMemo(()=>e.isDisabled?t.COLORS.content.inactive:e.isActive?l:t.COLORS.content.primary,[e.isDisabled,e.isActive,l]);return i.jsxs("svg",{width:e.isSmall?"16":"20",height:e.isSmall?"16":"20",viewBox:e.isSmall?"0 0 16 16":"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[i.jsx("circle",{cx:e.isSmall?"8":"10",cy:e.isSmall?"8":"10",r:e.isSmall?6:9,stroke:s,strokeWidth:e.isSmall?1.5:2}),e.isActive&&i.jsx("circle",{"data-test":"radio-checked-indicator",cx:e.isSmall?"8":"10",cy:e.isSmall?"8":"10",r:e.isSmall?3:5,fill:e.isDisabled?t.COLORS.content.inactive:l})]})},b=e=>{const[l,s]=a.useState(e.isActive||!1),[S,c]=a.useState(!1),[u,d]=a.useState(!1),x=()=>{if(!e.skipSelectingOff&&!e.isDisabled){const o=!l;s(o),e.onValueChange?.(o,e.value)}};a.useEffect(()=>{s(e.isActive)},[e.isActive]);const C=()=>e.label?e.boldOnChecked&&l||e.alwaysBold?i.jsx(n.TitleSmall,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label}):e.size==="SMALL"?i.jsx(n.BodyCaption,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label}):e.labelSize==="MEDIUM"?i.jsx(n.BodySecondary,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label}):i.jsx(n.BodyPrimary,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.primary,children:e.label}):i.jsx(i.Fragment,{});return i.jsxs(r.RadioButtonContainer,{"data-test":e["data-test"],onClick:x,onMouseEnter:()=>c(!e.skipHoverState),onMouseLeave:()=>c(!1),onMouseDown:()=>d(!e.skipHoverState),onMouseUp:()=>d(!1),style:e.caption?{alignItems:"flex-start"}:{},children:[i.jsx(r.RadioButtonIcon,{checked:l,hovered:S,clicked:u,isDisabled:e.isDisabled||!1,size:e.size,style:e.caption?{margin:"2px 0"}:{},children:i.jsx(O,{isSmall:e.size==="SMALL",isActive:l,isDisabled:e.isDisabled||!1,activeColor:e.activeColor})}),i.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:e.gapBetweenBodyAndCaption||"0px"},children:[C(),e.caption&&i.jsx(n.BodyCaption,{color:e.isDisabled?t.COLORS.text.disabled:t.COLORS.text.secondary,children:e.caption})]})]})};exports.RadioButton=b;
 //# sourceMappingURL=RadioButton.js.map

package/dist/cjs/components/radioButton/RadioButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.js","sources":["../../../../src/components/radioButton/RadioButton.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tRadioButtonContainer,\n\tRadioButtonIcon,\n} from '@src/components/radioButton/RadioButton.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type RadioButtonProps = {\n\tisActive: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tlabel?: string;\n\tcaption?: string;\n\tonValueChange: (checked: boolean, value?: string) => void;\n\tskipHoverState?: boolean;\n\tsize?: 'DEFAULT' \| 'SMALL';\n\tskipSelectingOff?: boolean;\n\tlabelSize?: 'DEFAULT' \| 'MEDIUM';\n\tboldOnChecked?: boolean;\n\talwaysBold?: boolean;\n\tactiveColor?: string;\n\tgapBetweenBodyAndCaption?: string;\n\t'data-test'?: string;\n};\n\nconst CheckMark: React.FC<{\n\tisActive: boolean;\n\tisDisabled: boolean;\n\tisSmall: boolean;\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props?.activeColor \|\| COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\tconst strokeColor = useMemo(\n\t\t() =>\n\t\t\tprops.isDisabled\n\t\t\t\t? COLORS.content.inactive\n\t\t\t\t: props.isActive\n\t\t\t\t? fillColor\n\t\t\t\t: COLORS.content.primary,\n\t\t[props.isDisabled, props.isActive, fillColor],\n\t);\n\n\treturn (\n\t\t<svg\n\t\t\twidth={props.isSmall ? '16' : '20'}\n\t\t\theight={props.isSmall ? '16' : '20'}\n\t\t\tviewBox={props.isSmall ? '0 0 16 16' : '0 0 20 20'}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<circle\n\t\t\t\tcx={props.isSmall ? '8' : '10'}\n\t\t\t\tcy={props.isSmall ? '8' : '10'}\n\t\t\t\tr={props.isSmall ? 6 : 9}\n\t\t\t\tstroke={strokeColor}\n\t\t\t\tstrokeWidth={props.isSmall ? 1.5 : 2}\n\t\t\t/>\n\t\t\t{props.isActive && (\n\t\t\t\t<circle\n\t\t\t\t\tcx={props.isSmall ? '8' : '10'}\n\t\t\t\t\tcy={props.isSmall ? '8' : '10'}\n\t\t\t\t\tr={props.isSmall ? 3 : 5}\n\t\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const RadioButton: React.FC<RadioButtonProps> = (props) => {\n\tconst [isActive, setIsActive] = useState(props.isActive \|\| false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst handleCheck = () => {\n\t\tif (props.skipSelectingOff) {\n\t\t\treturn;\n\t\t}\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isActive;\n\t\t\tsetIsActive(newVal);\n\t\t\tprops.onValueChange?.(newVal, props.value);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetIsActive(props.isActive);\n\t}, [props.isActive]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif ((props.boldOnChecked && isActive) \|\| props.alwaysBold) {\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodyCaption>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'MEDIUM') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<RadioButtonContainer\n\t\t\tdata-test={props['data-test']}\n\t\t\tonClick={handleCheck}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tstyle={props.caption ? { alignItems: 'flex-start' } : {}}\n\t\t>\n\t\t\t<RadioButtonIcon\n\t\t\t\tchecked={isActive}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={props.isDisabled \|\| false}\n\t\t\t\tsize={props.size}\n\t\t\t\tstyle={props.caption ? { margin: '2px 0' } : {}}\n\t\t\t>\n\t\t\t\t<CheckMark\n\t\t\t\t\tisSmall={props.size === 'SMALL'}\n\t\t\t\t\tisActive={isActive}\n\t\t\t\t\tisDisabled={props.isDisabled \|\| false}\n\t\t\t\t\tactiveColor={props.activeColor}\n\t\t\t\t/>\n\t\t\t</RadioButtonIcon>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tgap: props.gapBetweenBodyAndCaption \|\| '0px',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{renderLabel()}\n\t\t\t\t{props.caption && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.secondary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.caption}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</RadioButtonContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","strokeColor","jsxs","jsx","RadioButton","isActive","setIsActive","useState","isHovered","setIsHovered","isClicked","setIsClicked","handleCheck","newVal","useEffect","renderLabel","TitleSmall","BodyCaption","BodySecondary","BodyPrimary","Fragment","RadioButtonContainer","RadioButtonIcon"],"mappings":"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"}
1	+ {"version":3,"file":"RadioButton.js","sources":["../../../../src/components/radioButton/RadioButton.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tRadioButtonContainer,\n\tRadioButtonIcon,\n} from '@src/components/radioButton/RadioButton.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type RadioButtonProps = {\n\tisActive: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tlabel?: string;\n\tcaption?: string;\n\tonValueChange: (checked: boolean, value?: string) => void;\n\tskipHoverState?: boolean;\n\tsize?: 'DEFAULT' \| 'SMALL';\n\tskipSelectingOff?: boolean;\n\tlabelSize?: 'DEFAULT' \| 'MEDIUM';\n\tboldOnChecked?: boolean;\n\talwaysBold?: boolean;\n\tactiveColor?: string;\n\tgapBetweenBodyAndCaption?: string;\n\t'data-test'?: string;\n};\n\nconst CheckMark: React.FC<{\n\tisActive: boolean;\n\tisDisabled: boolean;\n\tisSmall: boolean;\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props?.activeColor \|\| COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\tconst strokeColor = useMemo(\n\t\t() =>\n\t\t\tprops.isDisabled\n\t\t\t\t? COLORS.content.inactive\n\t\t\t\t: props.isActive\n\t\t\t\t? fillColor\n\t\t\t\t: COLORS.content.primary,\n\t\t[props.isDisabled, props.isActive, fillColor],\n\t);\n\n\treturn (\n\t\t<svg\n\t\t\twidth={props.isSmall ? '16' : '20'}\n\t\t\theight={props.isSmall ? '16' : '20'}\n\t\t\tviewBox={props.isSmall ? '0 0 16 16' : '0 0 20 20'}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<circle\n\t\t\t\tcx={props.isSmall ? '8' : '10'}\n\t\t\t\tcy={props.isSmall ? '8' : '10'}\n\t\t\t\tr={props.isSmall ? 6 : 9}\n\t\t\t\tstroke={strokeColor}\n\t\t\t\tstrokeWidth={props.isSmall ? 1.5 : 2}\n\t\t\t/>\n\t\t\t{props.isActive && (\n\t\t\t\t<circle\n\t\t\t\t\tdata-test=\"radio-checked-indicator\"\n\t\t\t\t\tcx={props.isSmall ? '8' : '10'}\n\t\t\t\t\tcy={props.isSmall ? '8' : '10'}\n\t\t\t\t\tr={props.isSmall ? 3 : 5}\n\t\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const RadioButton: React.FC<RadioButtonProps> = (props) => {\n\tconst [isActive, setIsActive] = useState(props.isActive \|\| false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst handleCheck = () => {\n\t\tif (props.skipSelectingOff) {\n\t\t\treturn;\n\t\t}\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isActive;\n\t\t\tsetIsActive(newVal);\n\t\t\tprops.onValueChange?.(newVal, props.value);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetIsActive(props.isActive);\n\t}, [props.isActive]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif ((props.boldOnChecked && isActive) \|\| props.alwaysBold) {\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodyCaption>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'MEDIUM') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<RadioButtonContainer\n\t\t\tdata-test={props['data-test']}\n\t\t\tonClick={handleCheck}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tstyle={props.caption ? { alignItems: 'flex-start' } : {}}\n\t\t>\n\t\t\t<RadioButtonIcon\n\t\t\t\tchecked={isActive}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={props.isDisabled \|\| false}\n\t\t\t\tsize={props.size}\n\t\t\t\tstyle={props.caption ? { margin: '2px 0' } : {}}\n\t\t\t>\n\t\t\t\t<CheckMark\n\t\t\t\t\tisSmall={props.size === 'SMALL'}\n\t\t\t\t\tisActive={isActive}\n\t\t\t\t\tisDisabled={props.isDisabled \|\| false}\n\t\t\t\t\tactiveColor={props.activeColor}\n\t\t\t\t/>\n\t\t\t</RadioButtonIcon>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tgap: props.gapBetweenBodyAndCaption \|\| '0px',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{renderLabel()}\n\t\t\t\t{props.caption && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.secondary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.caption}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</RadioButtonContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","strokeColor","jsxs","jsx","RadioButton","isActive","setIsActive","useState","isHovered","setIsHovered","isClicked","setIsClicked","handleCheck","newVal","useEffect","renderLabel","TitleSmall","BodyCaption","BodySecondary","BodyPrimary","Fragment","RadioButtonContainer","RadioButtonIcon"],"mappings":"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"}

package/dist/cjs/components/radioList/RadioList.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("react"),y=require("./RadioList.styled.js"),o=require("../TypographyStyle.js"),h=require("../../constants/Theme.js"),O=require("../radioButton/RadioButton.js"),R=e=>{const[l,n]=d.useState(e.listItems);d.useEffect(()=>{n(e.listItems)},[e.listItems]);const r=(i,u)=>{let c;const a=[...l];a.forEach(s=>{s.value===u?(c=s,s.isActive=i):s.isActive=!i}),n(a),e.onChange(c)};return t.jsxs(y.RadioListStyled,{children:[(e.title||e.subTitle)&&t.jsxs("div",{className:"title__container",children:[e.title&&t.jsx(o.TitleRegular,{children:e.title}),e.subTitle&&t.jsx(o.BodySecondary,{color:h.COLORS.text.secondary,children:e.subTitle})]}),t.jsx("div",{style:e.listContainerStyles??{},className:"list__container",children:l.map(i=>t.jsx(O.RadioButton,{...i,onValueChange:r,boldOnChecked:e.boldOnChecked},i.value))})]})};exports.RadioList=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),d=require("react"),y=require("./RadioList.styled.js"),o=require("../TypographyStyle.js"),h=require("../../constants/Theme.js"),O=require("../radioButton/RadioButton.js"),R=e=>{const[n,l]=d.useState(e.listItems);d.useEffect(()=>{l(e.listItems)},[e.listItems]);const r=(t,u)=>{let a;const c=[...n];c.forEach(s=>{s.value===u?(a=s,s.isActive=t):s.isActive=!t}),l(c),e.onChange(a)};return i.jsxs(y.RadioListStyled,{children:[(e.title||e.subTitle)&&i.jsxs("div",{className:"title__container",children:[e.title&&i.jsx(o.TitleRegular,{children:e.title}),e.subTitle&&i.jsx(o.BodySecondary,{color:h.COLORS.text.secondary,children:e.subTitle})]}),i.jsx("div",{"data-test":"radio-list-container",style:e.listContainerStyles??{},className:"list__container",children:n.map(t=>i.jsx(O.RadioButton,{"data-test":t.value,...t,onValueChange:r,boldOnChecked:e.boldOnChecked},t.value))})]})};exports.RadioList=R;
 //# sourceMappingURL=RadioList.js.map

package/dist/cjs/components/radioList/RadioList.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioList.js","sources":["../../../../src/components/radioList/RadioList.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { RadioButton, RadioButtonProps } from '@src/components/radioButton';\nimport { RadioListStyled } from '@src/components/radioList/RadioList.styled';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\ntype RadioListItem = Omit<RadioButtonProps, 'onValueChange'> & {\n\tvalue: string;\n};\n\nexport type RadioListProps = {\n\ttitle?: string;\n\tsubTitle?: string;\n\tlistItems: RadioListItem[];\n\tonChange: (option: RadioListItem) => void;\n\tlistContainerStyles?: React.CSSProperties;\n\tboldOnChecked?: boolean;\n};\n\nexport const RadioList: React.FC<RadioListProps> = (props) => {\n\tconst [listOptions, setListOptions] = useState<RadioListItem[]>(\n\t\tprops.listItems,\n\t);\n\n\tuseEffect(() => {\n\t\tsetListOptions(props.listItems);\n\t}, [props.listItems]);\n\n\tconst onOptionClicked = (checked: boolean, value: string \| undefined) => {\n\t\tlet selectedOption;\n\t\tconst temptListOptions = [...listOptions];\n\t\ttemptListOptions.forEach((option) => {\n\t\t\tif (option.value === value) {\n\t\t\t\tselectedOption = option;\n\t\t\t\toption['isActive'] = checked;\n\t\t\t} else {\n\t\t\t\toption['isActive'] = !checked;\n\t\t\t}\n\t\t});\n\t\tsetListOptions(temptListOptions);\n\t\tprops.onChange(selectedOption);\n\t};\n\n\treturn (\n\t\t<RadioListStyled>\n\t\t\t{(props.title \|\| props.subTitle) && (\n\t\t\t\t<div className=\"title__container\">\n\t\t\t\t\t{props.title && <TitleRegular>{props.title}</TitleRegular>}\n\t\t\t\t\t{props.subTitle && (\n\t\t\t\t\t\t<BodySecondary color={COLORS.text.secondary}>\n\t\t\t\t\t\t\t{props.subTitle}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div ~~style~~={props.listContainerStyles ?? {}} ~~className~~=\"list__container\">\n\t\t\t\t{listOptions.map((listItem) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<RadioButton\n\t\t\t\t\t\t\tkey={listItem.value}\n\t\t\t\t\t\t\t{...listItem}\n\t\t\t\t\t\t\tonValueChange={onOptionClicked}\n\t\t\t\t\t\t\tboldOnChecked={props.boldOnChecked}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</RadioListStyled>\n\t);\n};\n"],"names":["RadioList","props","listOptions","setListOptions","useState","useEffect","onOptionClicked","checked","value","selectedOption","temptListOptions","option","RadioListStyled","jsxs","jsx","TitleRegular","BodySecondary","COLORS","listItem","RadioButton"],"mappings":"+RAmBaA,EAAuCC,GAAU,CAC7D,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAAAA,SACrCH,EAAM,SAAA,EAGPI,EAAAA,UAAU,IAAM,CACfF,EAAeF,EAAM,SAAS,CAC/B,EAAG,CAACA,EAAM,SAAS,CAAC,EAEpB,MAAMK,EAAkB,CAACC,EAAkBC,IAA8B,CACxE,IAAIC,EACJ,MAAMC,EAAmB,CAAC,GAAGR,CAAW,EACxCQ,EAAiB,QAASC,GAAW,CAChCA,EAAO,QAAUH,GACpBC,EAAiBE,EACjBA,EAAO,SAAcJ,GAErBI,EAAO,SAAc,CAACJ,CAExB,CAAC,EACDJ,EAAeO,CAAgB,EAC/BT,EAAM,SAASQ,CAAc,CAC9B,EAEA,cACEG,kBAAA,CACE,SAAA,EAAAX,EAAM,OAASA,EAAM,WACtBY,OAAC,MAAA,CAAI,UAAU,mBACb,SAAA,CAAAZ,EAAM,OAASa,MAACC,EAAAA,aAAA,CAAc,SAAAd,EAAM,MAAM,EAC1CA,EAAM,UACNa,MAACE,EAAAA,cAAA,CAAc,MAAOC,SAAO,KAAK,UAChC,SAAAhB,EAAM,QAAA,CACR,CAAA,EAEF,EAEDa,EAAAA,IAAC,MAAA,~~CAAI~~,MAAOb,EAAM,qBAAuB,CAAA,~~EAAI~~,UAAU,~~kBACrD~~,SAAAC,EAAY,IAAKgB,GAEhBJ,EAAAA,IAACK,EAAAA,YAAA,~~CAEC~~,~~GAAGD~~,EACJ,cAAeZ,EACf,cAAeL,EAAM,aAAA,~~EAHhBiB~~,EAAS,KAAA,~~CAMhB~~,CAAA,CACF,~~CAAA,~~EACD,CAEF"}
1	+ {"version":3,"file":"RadioList.js","sources":["../../../../src/components/radioList/RadioList.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { RadioButton, RadioButtonProps } from '@src/components/radioButton';\nimport { RadioListStyled } from '@src/components/radioList/RadioList.styled';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\ntype RadioListItem = Omit<RadioButtonProps, 'onValueChange'> & {\n\tvalue: string;\n};\n\nexport type RadioListProps = {\n\ttitle?: string;\n\tsubTitle?: string;\n\tlistItems: RadioListItem[];\n\tonChange: (option: RadioListItem) => void;\n\tlistContainerStyles?: React.CSSProperties;\n\tboldOnChecked?: boolean;\n};\n\nexport const RadioList: React.FC<RadioListProps> = (props) => {\n\tconst [listOptions, setListOptions] = useState<RadioListItem[]>(\n\t\tprops.listItems,\n\t);\n\n\tuseEffect(() => {\n\t\tsetListOptions(props.listItems);\n\t}, [props.listItems]);\n\n\tconst onOptionClicked = (checked: boolean, value: string \| undefined) => {\n\t\tlet selectedOption;\n\t\tconst temptListOptions = [...listOptions];\n\t\ttemptListOptions.forEach((option) => {\n\t\t\tif (option.value === value) {\n\t\t\t\tselectedOption = option;\n\t\t\t\toption['isActive'] = checked;\n\t\t\t} else {\n\t\t\t\toption['isActive'] = !checked;\n\t\t\t}\n\t\t});\n\t\tsetListOptions(temptListOptions);\n\t\tprops.onChange(selectedOption);\n\t};\n\n\treturn (\n\t\t<RadioListStyled>\n\t\t\t{(props.title \|\| props.subTitle) && (\n\t\t\t\t<div className=\"title__container\">\n\t\t\t\t\t{props.title && <TitleRegular>{props.title}</TitleRegular>}\n\t\t\t\t\t{props.subTitle && (\n\t\t\t\t\t\t<BodySecondary color={COLORS.text.secondary}>\n\t\t\t\t\t\t\t{props.subTitle}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tdata-test=\"radio-list-container\"\n\t\t\t\tstyle={props.listContainerStyles ?? {}}\n\t\t\t\tclassName=\"list__container\"\n\t\t\t>\n\t\t\t\t{listOptions.map((listItem) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<RadioButton\n\t\t\t\t\t\t\tkey={listItem.value}\n\t\t\t\t\t\t\tdata-test={listItem.value}\n\t\t\t\t\t\t\t{...listItem}\n\t\t\t\t\t\t\tonValueChange={onOptionClicked}\n\t\t\t\t\t\t\tboldOnChecked={props.boldOnChecked}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</RadioListStyled>\n\t);\n};\n"],"names":["RadioList","props","listOptions","setListOptions","useState","useEffect","onOptionClicked","checked","value","selectedOption","temptListOptions","option","RadioListStyled","jsxs","jsx","TitleRegular","BodySecondary","COLORS","listItem","RadioButton"],"mappings":"+RAmBaA,EAAuCC,GAAU,CAC7D,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAAAA,SACrCH,EAAM,SAAA,EAGPI,EAAAA,UAAU,IAAM,CACfF,EAAeF,EAAM,SAAS,CAC/B,EAAG,CAACA,EAAM,SAAS,CAAC,EAEpB,MAAMK,EAAkB,CAACC,EAAkBC,IAA8B,CACxE,IAAIC,EACJ,MAAMC,EAAmB,CAAC,GAAGR,CAAW,EACxCQ,EAAiB,QAASC,GAAW,CAChCA,EAAO,QAAUH,GACpBC,EAAiBE,EACjBA,EAAO,SAAcJ,GAErBI,EAAO,SAAc,CAACJ,CAExB,CAAC,EACDJ,EAAeO,CAAgB,EAC/BT,EAAM,SAASQ,CAAc,CAC9B,EAEA,cACEG,kBAAA,CACE,SAAA,EAAAX,EAAM,OAASA,EAAM,WACtBY,OAAC,MAAA,CAAI,UAAU,mBACb,SAAA,CAAAZ,EAAM,OAASa,MAACC,EAAAA,aAAA,CAAc,SAAAd,EAAM,MAAM,EAC1CA,EAAM,UACNa,MAACE,EAAAA,cAAA,CAAc,MAAOC,SAAO,KAAK,UAChC,SAAAhB,EAAM,QAAA,CACR,CAAA,EAEF,EAEDa,EAAAA,IAAC,MAAA,CACA,YAAU,uBACV,MAAOb,EAAM,qBAAuB,CAAA,EACpC,UAAU,kBAET,SAAAC,EAAY,IAAKgB,GAEhBJ,EAAAA,IAACK,EAAAA,YAAA,CAEA,YAAWD,EAAS,MACnB,GAAGA,EACJ,cAAeZ,EACf,cAAeL,EAAM,aAAA,EAJhBiB,EAAS,KAAA,CAOhB,CAAA,CAAA,CACF,EACD,CAEF"}

package/dist/cjs/components/searchBar/searchBar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V=require("react/jsx-runtime"),m=require("../../assets/icons/searchIcon.js"),t=require("react"),q=require("../../assets/icons/cross.svg.js"),y=require("../input/Input.js"),B=e=>{const{isEnabled:s,onEnter:d,placeholder:g,width:b,variant:C,validate:v,isActive:i}=e,[h,n]=t.useState("search"),[f,o]=t.useState("default"),[I,a]=t.useState(i?"active":s?"none":"disabled"),[u,l]=t.useState(e.initialValue||e.searchValue||"");t.useEffect(()=>{l(e.searchValue??""),e.searchValue?.trim()?.length?n("cross"):n("search")},[e.searchValue]),t.useEffect(()=>{a(i?"active":s?"none":"disabled")},[s,i]),t.useEffect(()=>{e.reset&&S()},[e?.reset]);const k=(c,r)=>{if(e.onChange(c),l(c),r?.type==="keydown"&&(r.which===13||r.keyCode===13)){E(c);return}c.trim().length?n("cross"):n("search")},E=c=>{s&&d(c)},S=()=>{n("search"),o("default"),l(""),e.onChange(""),a("none"),d("")};return V.jsx(y.Input,{"data-test":e["data-test"],id:"search-bar",validate:v,onFocus:()=>{u.length&&n("cross"),f==="default"&&s&&(o("clicked"),a("active"))},width:b,state:I,leftIcon:h==="search"&&f==="default"?{icon:m.SearchIcon}:void 0,rightIcon:h==="cross"&&!e.suffixButton?{icon:q.default,callback:()=>{S(),e.onClickCross&&e.onClickCross()}}:void 0,onChangeText:k,placeholder:g,variant:C,value:u,onBlur:()=>{u.length||o("default"),a("none")},button:{text:"",buttonProps:e.suffixButton}})};exports.SearchBar=B;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const V=require("react/jsx-runtime"),m=require("../../assets/icons/searchIcon.js"),t=require("react"),q=require("../../assets/icons/cross.svg.js"),y=require("../input/Input.js"),B=e=>{const{isEnabled:s,onEnter:d,placeholder:g,width:b,variant:C,validate:v,isActive:i}=e,[h,n]=t.useState("search"),[f,o]=t.useState("default"),[I,a]=t.useState(i?"active":s?"none":"disabled"),[u,r]=t.useState(e.initialValue||e.searchValue||"");t.useEffect(()=>{r(e.searchValue??""),e.searchValue?.trim()?.length?n("cross"):n("search")},[e.searchValue]),t.useEffect(()=>{a(i?"active":s?"none":"disabled")},[s,i]),t.useEffect(()=>{e.reset&&S()},[e?.reset]);const k=(c,l)=>{if(e.onChange(c),r(c),l?.type==="keydown"&&(l.which===13||l.keyCode===13)){E(c);return}c.trim().length?n("cross"):n("search")},E=c=>{s&&d(c)},S=()=>{n("search"),o("default"),r(""),e.onChange(""),a("none"),d("")};return V.jsx(y.Input,{"data-test":e["data-test"],id:"search-bar",validate:v,onFocus:()=>{u.length&&n("cross"),f==="default"&&s&&(o("clicked"),a("active"))},width:b,state:I,leftIcon:h==="search"&&f==="default"?{icon:m.SearchIcon}:void 0,rightIcon:h==="cross"&&!e.suffixButton?{icon:q.default,callback:()=>{S(),e.onClickCross&&e.onClickCross()},"data-test":"search-clear-icon"}:void 0,onChangeText:k,placeholder:g,variant:C,value:u,onBlur:()=>{u.length||o("default"),a("none")},button:{text:"",buttonProps:e.suffixButton}})};exports.SearchBar=B;
 //# sourceMappingURL=searchBar.js.map

package/dist/cjs/components/searchBar/searchBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"searchBar.js","sources":["../../../../src/components/searchBar/searchBar.tsx"],"sourcesContent":["import { SearchIcon } from '@src/assets/icons/searchIcon';\nimport { useEffect, useState } from 'react';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { ButtonProps } from '../button/model';\nimport { Input } from '../input/Input';\nimport { InputVariant } from '../input/Input.model';\n\nexport interface SearchBarProps {\n\twidth: string;\n\tisEnabled: boolean;\n\tonChange: (searchText: string) => void;\n\tonEnter: (searchText: string) => void;\n\tplaceholder: string;\n\tvariant: InputVariant;\n\tvalidate?: (input?: string \| number) => [boolean, string];\n\tinitialValue?: string;\n\treset?: boolean;\n\tonClickCross?: () => void;\n\tisActive?: boolean;\n\tsuffixButton?: ButtonProps;\n\tsearchValue?: string;\n\t'data-test'?: string;\n}\n\ntype ActiveStates = 'none' \| 'disabled' \| 'active';\ntype Mode = 'default' \| 'clicked';\n\nexport const SearchBar = (props: SearchBarProps) => {\n\tconst {\n\t\tisEnabled,\n\t\tonEnter,\n\t\tplaceholder,\n\t\twidth,\n\t\tvariant,\n\t\tvalidate,\n\t\tisActive,\n\t} = props;\n\tconst [icon, setIcon] = useState<string>('search');\n\tconst [mode, setMode] = useState<Mode>('default');\n\tconst [inputState, setInputState] = useState<ActiveStates>(\n\t\tisActive ? 'active' : isEnabled ? 'none' : 'disabled',\n\t);\n\tconst [value, setValue] = useState<string>(\n\t\tprops.initialValue \|\| props.searchValue \|\| '',\n\t);\n\n\tuseEffect(() => {\n\t\tsetValue(props.searchValue ?? '');\n\t\tif (props.searchValue?.trim()?.length) {\n\t\t\tsetIcon('cross');\n\t\t} else {\n\t\t\tsetIcon('search');\n\t\t}\n\t}, [props.searchValue]);\n\n\tuseEffect(() => {\n\t\tisActive\n\t\t\t? setInputState('active')\n\t\t\t: isEnabled\n\t\t\t? setInputState('none')\n\t\t\t: setInputState('disabled');\n\t}, [isEnabled, isActive]);\n\n\tuseEffect(() => {\n\t\tprops.reset && resetSearch();\n\t}, [props?.reset]);\n\n\tconst handleOnChange = (searchText: string, event: any) => {\n\t\tprops.onChange(searchText);\n\t\tsetValue(searchText);\n\n\t\tif (\n\t\t\tevent?.type === 'keydown' &&\n\t\t\t(event.which === 13 \|\| event.keyCode === 13)\n\t\t) {\n\t\t\thandleEnter(searchText);\n\t\t\treturn;\n\t\t}\n\n\t\tif (searchText.trim().length) {\n\t\t\tsetIcon('cross');\n\t\t} else {\n\t\t\tsetIcon('search');\n\t\t}\n\t};\n\n\tconst handleEnter = (searchText: string) => {\n\t\tisEnabled && onEnter(searchText);\n\t};\n\n\tconst resetSearch = () => {\n\t\tsetIcon('search');\n\t\tsetMode('default');\n\t\tsetValue('');\n\t\tprops.onChange('');\n\t\tsetInputState('none');\n\t\tonEnter('');\n\t};\n\n\treturn (\n\t\t<Input\n\t\t\tdata-test={props['data-test']}\n\t\t\tid=\"search-bar\"\n\t\t\tvalidate={validate}\n\t\t\tonFocus={() => {\n\t\t\t\tif (value.length) setIcon('cross');\n\t\t\t\tif (mode === 'default') {\n\t\t\t\t\tif (isEnabled) {\n\t\t\t\t\t\tsetMode('clicked');\n\t\t\t\t\t\tsetInputState('active');\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}}\n\t\t\twidth={width}\n\t\t\tstate={inputState}\n\t\t\tleftIcon={\n\t\t\t\ticon === 'search' && mode === 'default'\n\t\t\t\t\t? {\n\t\t\t\t\t\t\ticon: SearchIcon,\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\trightIcon={\n\t\t\t\ticon === 'cross' && !props.suffixButton\n\t\t\t\t\t? {\n\t\t\t\t\t\t\ticon: CrossIcon,\n\t\t\t\t\t\t\tcallback: () => {\n\t\t\t\t\t\t\t\tresetSearch();\n\t\t\t\t\t\t\t\tprops.onClickCross && props.onClickCross();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tonChangeText={handleOnChange}\n\t\t\tplaceholder={placeholder}\n\t\t\tvariant={variant}\n\t\t\tvalue={value}\n\t\t\tonBlur={() => {\n\t\t\t\tif (!value.length) {\n\t\t\t\t\tsetMode('default');\n\t\t\t\t}\n\t\t\t\tsetInputState('none');\n\t\t\t}}\n\t\t\tbutton={{ text: '', buttonProps: props.suffixButton }}\n\t\t/>\n\t);\n};\n"],"names":["SearchBar","props","isEnabled","onEnter","placeholder","width","variant","validate","isActive","icon","setIcon","useState","mode","setMode","inputState","setInputState","value","setValue","useEffect","resetSearch","handleOnChange","searchText","event","handleEnter","jsx","Input","SearchIcon","CrossIcon"],"mappings":"kQA2BaA,EAAaC,GAA0B,CACnD,KAAM,CACL,UAAAC,EACA,QAAAC,EACA,YAAAC,EACA,MAAAC,EACA,QAAAC,EACA,SAAAC,EACA,SAAAC,CAAA,EACGP,EACE,CAACQ,EAAMC,CAAO,EAAIC,EAAAA,SAAiB,QAAQ,EAC3C,CAACC,EAAMC,CAAO,EAAIF,EAAAA,SAAe,SAAS,EAC1C,CAACG,EAAYC,CAAa,EAAIJ,EAAAA,SACnCH,EAAW,SAAWN,EAAY,OAAS,UAAA,EAEtC,CAACc,EAAOC,CAAQ,EAAIN,EAAAA,SACzBV,EAAM,cAAgBA,EAAM,aAAe,EAAA,EAG5CiB,EAAAA,UAAU,IAAM,CACfD,EAAShB,EAAM,aAAe,EAAE,EAC5BA,EAAM,aAAa,KAAA,GAAQ,OAC9BS,EAAQ,OAAO,EAEfA,EAAQ,QAAQ,CAElB,EAAG,CAACT,EAAM,WAAW,CAAC,EAEtBiB,EAAAA,UAAU,IAAM,CAEZH,EADHP,EACiB,SACdN,EACc,OACA,UAHQ,CAI1B,EAAG,CAACA,EAAWM,CAAQ,CAAC,EAExBU,EAAAA,UAAU,IAAM,CACfjB,EAAM,OAASkB,EAAA,CAChB,EAAG,CAAClB,GAAO,KAAK,CAAC,EAEjB,MAAMmB,EAAiB,CAACC,EAAoBC,IAAe,CAI1D,GAHArB,EAAM,SAASoB,CAAU,EACzBJ,EAASI,CAAU,EAGlBC,GAAO,OAAS,YACfA,EAAM,QAAU,IAAMA,EAAM,UAAY,IACxC,CACDC,EAAYF,CAAU,EACtB,MACD,CAEIA,EAAW,KAAA,EAAO,OACrBX,EAAQ,OAAO,EAEfA,EAAQ,QAAQ,CAElB,EAEMa,EAAeF,GAAuB,CAC3CnB,GAAaC,EAAQkB,CAAU,CAChC,EAEMF,EAAc,IAAM,CACzBT,EAAQ,QAAQ,EAChBG,EAAQ,SAAS,EACjBI,EAAS,EAAE,EACXhB,EAAM,SAAS,EAAE,EACjBc,EAAc,MAAM,EACpBZ,EAAQ,EAAE,CACX,EAEA,OACCqB,EAAAA,IAACC,EAAAA,MAAA,CACA,YAAWxB,EAAM,WAAW,EAC5B,GAAG,aACH,SAAAM,EACA,QAAS,IAAM,CACVS,EAAM,QAAQN,EAAQ,OAAO,EAC7BE,IAAS,WACRV,IACHW,EAAQ,SAAS,EACjBE,EAAc,QAAQ,EAGzB,EACA,MAAAV,EACA,MAAOS,EACP,SACCL,IAAS,UAAYG,IAAS,UAC3B,CACA,KAAMc,EAAAA,UAAA,EAEN,OAEJ,UACCjB,IAAS,SAAW,CAACR,EAAM,aACxB,CACA,KAAM0B,EAAAA,QACN,SAAU,IAAM,CACfR,EAAA,EACAlB,EAAM,cAAgBA,EAAM,aAAA,CAC7B,~~CAAA~~,~~EAEA~~,OAEJ,aAAcmB,EACd,YAAAhB,EACA,QAAAE,EACA,MAAAU,EACA,OAAQ,IAAM,CACRA,EAAM,QACVH,EAAQ,SAAS,EAElBE,EAAc,MAAM,CACrB,EACA,OAAQ,CAAE,KAAM,GAAI,YAAad,EAAM,YAAA,CAAa,CAAA,CAGvD"}
1	+ {"version":3,"file":"searchBar.js","sources":["../../../../src/components/searchBar/searchBar.tsx"],"sourcesContent":["import { SearchIcon } from '@src/assets/icons/searchIcon';\nimport { useEffect, useState } from 'react';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { ButtonProps } from '../button/model';\nimport { Input } from '../input/Input';\nimport { InputVariant } from '../input/Input.model';\n\nexport interface SearchBarProps {\n\twidth: string;\n\tisEnabled: boolean;\n\tonChange: (searchText: string) => void;\n\tonEnter: (searchText: string) => void;\n\tplaceholder: string;\n\tvariant: InputVariant;\n\tvalidate?: (input?: string \| number) => [boolean, string];\n\tinitialValue?: string;\n\treset?: boolean;\n\tonClickCross?: () => void;\n\tisActive?: boolean;\n\tsuffixButton?: ButtonProps;\n\tsearchValue?: string;\n\t'data-test'?: string;\n}\n\ntype ActiveStates = 'none' \| 'disabled' \| 'active';\ntype Mode = 'default' \| 'clicked';\n\nexport const SearchBar = (props: SearchBarProps) => {\n\tconst {\n\t\tisEnabled,\n\t\tonEnter,\n\t\tplaceholder,\n\t\twidth,\n\t\tvariant,\n\t\tvalidate,\n\t\tisActive,\n\t} = props;\n\tconst [icon, setIcon] = useState<string>('search');\n\tconst [mode, setMode] = useState<Mode>('default');\n\tconst [inputState, setInputState] = useState<ActiveStates>(\n\t\tisActive ? 'active' : isEnabled ? 'none' : 'disabled',\n\t);\n\tconst [value, setValue] = useState<string>(\n\t\tprops.initialValue \|\| props.searchValue \|\| '',\n\t);\n\n\tuseEffect(() => {\n\t\tsetValue(props.searchValue ?? '');\n\t\tif (props.searchValue?.trim()?.length) {\n\t\t\tsetIcon('cross');\n\t\t} else {\n\t\t\tsetIcon('search');\n\t\t}\n\t}, [props.searchValue]);\n\n\tuseEffect(() => {\n\t\tisActive\n\t\t\t? setInputState('active')\n\t\t\t: isEnabled\n\t\t\t? setInputState('none')\n\t\t\t: setInputState('disabled');\n\t}, [isEnabled, isActive]);\n\n\tuseEffect(() => {\n\t\tprops.reset && resetSearch();\n\t}, [props?.reset]);\n\n\tconst handleOnChange = (searchText: string, event: any) => {\n\t\tprops.onChange(searchText);\n\t\tsetValue(searchText);\n\n\t\tif (\n\t\t\tevent?.type === 'keydown' &&\n\t\t\t(event.which === 13 \|\| event.keyCode === 13)\n\t\t) {\n\t\t\thandleEnter(searchText);\n\t\t\treturn;\n\t\t}\n\n\t\tif (searchText.trim().length) {\n\t\t\tsetIcon('cross');\n\t\t} else {\n\t\t\tsetIcon('search');\n\t\t}\n\t};\n\n\tconst handleEnter = (searchText: string) => {\n\t\tisEnabled && onEnter(searchText);\n\t};\n\n\tconst resetSearch = () => {\n\t\tsetIcon('search');\n\t\tsetMode('default');\n\t\tsetValue('');\n\t\tprops.onChange('');\n\t\tsetInputState('none');\n\t\tonEnter('');\n\t};\n\n\treturn (\n\t\t<Input\n\t\t\tdata-test={props['data-test']}\n\t\t\tid=\"search-bar\"\n\t\t\tvalidate={validate}\n\t\t\tonFocus={() => {\n\t\t\t\tif (value.length) setIcon('cross');\n\t\t\t\tif (mode === 'default') {\n\t\t\t\t\tif (isEnabled) {\n\t\t\t\t\t\tsetMode('clicked');\n\t\t\t\t\t\tsetInputState('active');\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}}\n\t\t\twidth={width}\n\t\t\tstate={inputState}\n\t\t\tleftIcon={\n\t\t\t\ticon === 'search' && mode === 'default'\n\t\t\t\t\t? {\n\t\t\t\t\t\t\ticon: SearchIcon,\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\trightIcon={\n\t\t\t\ticon === 'cross' && !props.suffixButton\n\t\t\t\t\t? {\n\t\t\t\t\t\t\ticon: CrossIcon,\n\t\t\t\t\t\t\tcallback: () => {\n\t\t\t\t\t\t\t\tresetSearch();\n\t\t\t\t\t\t\t\tprops.onClickCross && props.onClickCross();\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t'data-test': 'search-clear-icon',\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tonChangeText={handleOnChange}\n\t\t\tplaceholder={placeholder}\n\t\t\tvariant={variant}\n\t\t\tvalue={value}\n\t\t\tonBlur={() => {\n\t\t\t\tif (!value.length) {\n\t\t\t\t\tsetMode('default');\n\t\t\t\t}\n\t\t\t\tsetInputState('none');\n\t\t\t}}\n\t\t\tbutton={{ text: '', buttonProps: props.suffixButton }}\n\t\t/>\n\t);\n};\n"],"names":["SearchBar","props","isEnabled","onEnter","placeholder","width","variant","validate","isActive","icon","setIcon","useState","mode","setMode","inputState","setInputState","value","setValue","useEffect","resetSearch","handleOnChange","searchText","event","handleEnter","jsx","Input","SearchIcon","CrossIcon"],"mappings":"kQA2BaA,EAAaC,GAA0B,CACnD,KAAM,CACL,UAAAC,EACA,QAAAC,EACA,YAAAC,EACA,MAAAC,EACA,QAAAC,EACA,SAAAC,EACA,SAAAC,CAAA,EACGP,EACE,CAACQ,EAAMC,CAAO,EAAIC,EAAAA,SAAiB,QAAQ,EAC3C,CAACC,EAAMC,CAAO,EAAIF,EAAAA,SAAe,SAAS,EAC1C,CAACG,EAAYC,CAAa,EAAIJ,EAAAA,SACnCH,EAAW,SAAWN,EAAY,OAAS,UAAA,EAEtC,CAACc,EAAOC,CAAQ,EAAIN,EAAAA,SACzBV,EAAM,cAAgBA,EAAM,aAAe,EAAA,EAG5CiB,EAAAA,UAAU,IAAM,CACfD,EAAShB,EAAM,aAAe,EAAE,EAC5BA,EAAM,aAAa,KAAA,GAAQ,OAC9BS,EAAQ,OAAO,EAEfA,EAAQ,QAAQ,CAElB,EAAG,CAACT,EAAM,WAAW,CAAC,EAEtBiB,EAAAA,UAAU,IAAM,CAEZH,EADHP,EACiB,SACdN,EACc,OACA,UAHQ,CAI1B,EAAG,CAACA,EAAWM,CAAQ,CAAC,EAExBU,EAAAA,UAAU,IAAM,CACfjB,EAAM,OAASkB,EAAA,CAChB,EAAG,CAAClB,GAAO,KAAK,CAAC,EAEjB,MAAMmB,EAAiB,CAACC,EAAoBC,IAAe,CAI1D,GAHArB,EAAM,SAASoB,CAAU,EACzBJ,EAASI,CAAU,EAGlBC,GAAO,OAAS,YACfA,EAAM,QAAU,IAAMA,EAAM,UAAY,IACxC,CACDC,EAAYF,CAAU,EACtB,MACD,CAEIA,EAAW,KAAA,EAAO,OACrBX,EAAQ,OAAO,EAEfA,EAAQ,QAAQ,CAElB,EAEMa,EAAeF,GAAuB,CAC3CnB,GAAaC,EAAQkB,CAAU,CAChC,EAEMF,EAAc,IAAM,CACzBT,EAAQ,QAAQ,EAChBG,EAAQ,SAAS,EACjBI,EAAS,EAAE,EACXhB,EAAM,SAAS,EAAE,EACjBc,EAAc,MAAM,EACpBZ,EAAQ,EAAE,CACX,EAEA,OACCqB,EAAAA,IAACC,EAAAA,MAAA,CACA,YAAWxB,EAAM,WAAW,EAC5B,GAAG,aACH,SAAAM,EACA,QAAS,IAAM,CACVS,EAAM,QAAQN,EAAQ,OAAO,EAC7BE,IAAS,WACRV,IACHW,EAAQ,SAAS,EACjBE,EAAc,QAAQ,EAGzB,EACA,MAAAV,EACA,MAAOS,EACP,SACCL,IAAS,UAAYG,IAAS,UAC3B,CACA,KAAMc,EAAAA,UAAA,EAEN,OAEJ,UACCjB,IAAS,SAAW,CAACR,EAAM,aACxB,CACA,KAAM0B,EAAAA,QACN,SAAU,IAAM,CACfR,EAAA,EACAlB,EAAM,cAAgBA,EAAM,aAAA,CAC7B,EACA,YAAa,mBAAA,EAEb,OAEJ,aAAcmB,EACd,YAAAhB,EACA,QAAAE,EACA,MAAAU,EACA,OAAQ,IAAM,CACRA,EAAM,QACVH,EAAQ,SAAS,EAElBE,EAAc,MAAM,CACrB,EACA,OAAQ,CAAE,KAAM,GAAI,YAAad,EAAM,YAAA,CAAa,CAAA,CAGvD"}

package/dist/cjs/components/side-modal/SideModal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),a=require("react-dom"),u=require("../../assets/icons/cross.svg.js"),s=require("../TypographyStyle.js"),o=require("./SideModal.style.js"),i=require("../button/Button.js"),h=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},y=h(a),f=e=>{const{closeOnEscapeKey:n,onClose:d}=e;return l.useEffect(()=>{if(!(n??!0))return;const r=c=>{c.key==="Escape"&&d()};return document.addEventListener("keydown",r),()=>{document.removeEventListener("keydown",r)}},[n,d]),y.default.createPortal(t.jsx(o.SideModalStyle,{zIndex:e.zIndex,children:t.jsxs(o.SideModalContainer,{width:e.width,children:[t.jsxs(o.SideModalHeader,{headerStyle:{...e.headerStyle},children:[e?.headerCustomComponent||t.jsx(s.TitleMedium,{children:e.header}),!e.hideCrossButton&&t.jsx(u.default,{width:24,height:24,onClick:e.onClose})," "]}),t.jsxs(o.SideModalBody,{hideFooter:e.hideFooter,bodyStyle:{...e.bodyStyle},children:[e.children," "]}),e.hideFooter===!0?null:t.jsxs(o.SideModalFooter,{footerDirection:e.footerDirection,footerStyle:{...e.footerStyle},children:[(e.saveButtonProps||e.cancelButtonProps)&&t.jsxs(o.FooterButtonWrapper,{footerDirection:e.footerDirection,children:[e.saveButtonProps&&t.jsx(i.Button,{...e.saveButtonProps}),e.cancelButtonProps&&t.jsx(i.Button,{...e.cancelButtonProps})," "]}),e.footerCustomComponent?e.footerCustomComponent:t.jsx(t.Fragment,{})," "]})," "]})}),e.element??document.body)};exports.SideModal=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),a=require("react-dom"),u=require("../../assets/icons/cross.svg.js"),s=require("../TypographyStyle.js"),o=require("./SideModal.style.js"),r=require("../button/Button.js"),h=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},y=h(a),f=e=>{const{closeOnEscapeKey:n,onClose:d}=e;return l.useEffect(()=>{if(!(n??!0))return;const i=c=>{c.key==="Escape"&&d()};return document.addEventListener("keydown",i),()=>{document.removeEventListener("keydown",i)}},[n,d]),y.default.createPortal(t.jsx(o.SideModalStyle,{zIndex:e.zIndex,children:t.jsxs(o.SideModalContainer,{width:e.width,children:[t.jsxs(o.SideModalHeader,{headerStyle:{...e.headerStyle},children:[e?.headerCustomComponent||t.jsx(s.TitleMedium,{children:e.header}),!e.hideCrossButton&&t.jsx(u.default,{width:24,height:24,onClick:e.onClose,"data-test":"side-modal-close-button"})," "]}),t.jsxs(o.SideModalBody,{hideFooter:e.hideFooter,bodyStyle:{...e.bodyStyle},children:[e.children," "]}),e.hideFooter===!0?null:t.jsxs(o.SideModalFooter,{footerDirection:e.footerDirection,footerStyle:{...e.footerStyle},children:[(e.saveButtonProps||e.cancelButtonProps)&&t.jsxs(o.FooterButtonWrapper,{footerDirection:e.footerDirection,children:[e.saveButtonProps&&t.jsx(r.Button,{...e.saveButtonProps}),e.cancelButtonProps&&t.jsx(r.Button,{...e.cancelButtonProps})," "]}),e.footerCustomComponent?e.footerCustomComponent:t.jsx(t.Fragment,{})," "]})," "]})}),e.element??document.body)};exports.SideModal=f;
 //# sourceMappingURL=SideModal.js.map

package/dist/cjs/components/side-modal/SideModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SideModal.js","sources":["../../../../src/components/side-modal/SideModal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\nimport { TitleMedium } from '../TypographyStyle';\nimport {\n\tFooterButtonWrapper,\n\tSideModalBody,\n\tSideModalContainer,\n\tSideModalFooter,\n\tSideModalHeader,\n\tSideModalStyle,\n} from './SideModal.style';\n\nexport interface SideModalProps {\n\theader: string;\n\tchildren: React.ReactNode;\n\theaderCustomComponent?: React.ReactNode;\n\tfooterCustomComponent?: React.ReactNode;\n\tfooterDirection?: 'row' \| 'row-reverse';\n\thideCrossButton?: boolean;\n\twidth?: string;\n\tsaveButtonProps?: ButtonProps;\n\tcancelButtonProps?: ButtonProps;\n\tonClose: () => void;\n\tzIndex?: number;\n\thideFooter?: boolean;\n\tbodyStyle?: React.CSSProperties;\n\telement?: Element \| DocumentFragment;\n\theaderStyle?: React.CSSProperties;\n\tfooterStyle?: React.CSSProperties;\n\tcloseOnEscapeKey?: boolean;\n}\n\nexport const SideModal: React.FC<SideModalProps> = (props) => {\n\tconst { closeOnEscapeKey, onClose } = props;\n\n\t// Escape key handler - enabled by default\n\tuseEffect(() => {\n\t\t// Guard: Escape key must be enabled (default: true)\n\n\t\tconst escapeEnabled = closeOnEscapeKey ?? true;\n\t\tif (!escapeEnabled) return;\n\n\t\tconst handleEscapeKey = (event: KeyboardEvent) => {\n\t\t\tif (event.key !== 'Escape') return;\n\n\t\t\tonClose();\n\t\t};\n\n\t\tdocument.addEventListener('keydown', handleEscapeKey);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', handleEscapeKey);\n\t\t};\n\t}, [closeOnEscapeKey, onClose]);\n\n\treturn ReactDOM.createPortal(\n\t\t<SideModalStyle zIndex={props.zIndex}>\n\t\t\t<SideModalContainer width={props.width}>\n\t\t\t\t<SideModalHeader\n\t\t\t\t\theaderStyle={{\n\t\t\t\t\t\t...props.headerStyle,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props?.headerCustomComponent \|\| (\n\t\t\t\t\t\t<TitleMedium>{props.header}</TitleMedium>\n\t\t\t\t\t)}\n\t\t\t\t\t{!props.hideCrossButton && (\n\t\t\t\t\t\t<CrossIcon ~~width~~={24} ~~height~~={24} ~~onClick~~={props.onClose} />\n\t\t\t\t\t)}{' '}\n\t\t\t\t</SideModalHeader>\n\t\t\t\t<SideModalBody\n\t\t\t\t\thideFooter={props.hideFooter}\n\t\t\t\t\tbodyStyle={{\n\t\t\t\t\t\t...props.bodyStyle,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props.children}{' '}\n\t\t\t\t</SideModalBody>\n\t\t\t\t{props.hideFooter === true ? null : (\n\t\t\t\t\t<SideModalFooter\n\t\t\t\t\t\tfooterDirection={props.footerDirection}\n\t\t\t\t\t\tfooterStyle={{\n\t\t\t\t\t\t\t...props.footerStyle,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{(props.saveButtonProps \|\| props.cancelButtonProps) && (\n\t\t\t\t\t\t\t<FooterButtonWrapper footerDirection={props.footerDirection}>\n\t\t\t\t\t\t\t\t{props.saveButtonProps && <Button {...props.saveButtonProps} />}\n\t\t\t\t\t\t\t\t{props.cancelButtonProps && (\n\t\t\t\t\t\t\t\t\t<Button {...props.cancelButtonProps} />\n\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t</FooterButtonWrapper>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.footerCustomComponent ? props.footerCustomComponent : <></>}{' '}\n\t\t\t\t\t</SideModalFooter>\n\t\t\t\t)}{' '}\n\t\t\t</SideModalContainer>\n\t\t</SideModalStyle>,\n\t\tprops.element ?? document.body,\n\t);\n};\n"],"names":["SideModal","props","closeOnEscapeKey","onClose","useEffect","handleEscapeKey","event","ReactDOM","jsx","SideModalStyle","jsxs","SideModalContainer","SideModalHeader","TitleMedium","CrossIcon","SideModalBody","SideModalFooter","FooterButtonWrapper","Button","Fragment"],"mappings":"iXAmCaA,EAAuCC,GAAU,CAC7D,KAAM,CAAE,iBAAAC,EAAkB,QAAAC,CAAA,EAAYF,EAGtCG,OAAAA,EAAAA,UAAU,IAAM,CAIf,GAAI,EADkBF,GAAoB,IACtB,OAEpB,MAAMG,EAAmBC,GAAyB,CAC7CA,EAAM,MAAQ,UAElBH,EAAA,CACD,EAEA,gBAAS,iBAAiB,UAAWE,CAAe,EAE7C,IAAM,CACZ,SAAS,oBAAoB,UAAWA,CAAe,CACxD,CACD,EAAG,CAACH,EAAkBC,CAAO,CAAC,EAEvBI,EAAAA,QAAS,aACfC,EAAAA,IAACC,EAAAA,gBAAe,OAAQR,EAAM,OAC7B,SAAAS,EAAAA,KAACC,EAAAA,mBAAA,CAAmB,MAAOV,EAAM,MAChC,SAAA,CAAAS,EAAAA,KAACE,EAAAA,gBAAA,CACA,YAAa,CACZ,GAAGX,EAAM,WAAA,EAGT,SAAA,CAAAA,GAAO,uBACPO,MAACK,EAAAA,YAAA,CAAa,SAAAZ,EAAM,OAAO,EAE3B,CAACA,EAAM,iBACPO,~~MAACM~~,EAAAA,QAAA,~~CAAU~~,MAAO,~~GAAI~~,OAAQ,~~GAAI~~,QAASb,EAAM,~~OAAA~~,~~CAAS~~,~~EACxD~~,GAAA,CAAA,CAAA,EAEJS,EAAAA,KAACK,EAAAA,cAAA,CACA,WAAYd,EAAM,WAClB,UAAW,CACV,GAAGA,EAAM,SAAA,EAGT,SAAA,CAAAA,EAAM,SAAU,GAAA,CAAA,CAAA,EAEjBA,EAAM,aAAe,GAAO,KAC5BS,EAAAA,KAACM,EAAAA,gBAAA,CACA,gBAAiBf,EAAM,gBACvB,YAAa,CACZ,GAAGA,EAAM,WAAA,EAGR,SAAA,EAAAA,EAAM,iBAAmBA,EAAM,2BAC/BgB,EAAAA,oBAAA,CAAoB,gBAAiBhB,EAAM,gBAC1C,SAAA,CAAAA,EAAM,iBAAmBO,MAACU,EAAAA,OAAA,CAAQ,GAAGjB,EAAM,gBAAiB,EAC5DA,EAAM,mBACNO,MAACU,EAAAA,OAAA,CAAQ,GAAGjB,EAAM,kBAAmB,EACnC,GAAA,EACJ,EAEAA,EAAM,sBAAwBA,EAAM,sBAAwBO,EAAAA,IAAAW,EAAAA,SAAA,EAAE,EAAK,GAAA,CAAA,CAAA,EAEnE,GAAA,CAAA,CACJ,CAAA,CACD,EACAlB,EAAM,SAAW,SAAS,IAAA,CAE5B"}
1	+ {"version":3,"file":"SideModal.js","sources":["../../../../src/components/side-modal/SideModal.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport ReactDOM from 'react-dom';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\nimport { TitleMedium } from '../TypographyStyle';\nimport {\n\tFooterButtonWrapper,\n\tSideModalBody,\n\tSideModalContainer,\n\tSideModalFooter,\n\tSideModalHeader,\n\tSideModalStyle,\n} from './SideModal.style';\n\nexport interface SideModalProps {\n\theader: string;\n\tchildren: React.ReactNode;\n\theaderCustomComponent?: React.ReactNode;\n\tfooterCustomComponent?: React.ReactNode;\n\tfooterDirection?: 'row' \| 'row-reverse';\n\thideCrossButton?: boolean;\n\twidth?: string;\n\tsaveButtonProps?: ButtonProps;\n\tcancelButtonProps?: ButtonProps;\n\tonClose: () => void;\n\tzIndex?: number;\n\thideFooter?: boolean;\n\tbodyStyle?: React.CSSProperties;\n\telement?: Element \| DocumentFragment;\n\theaderStyle?: React.CSSProperties;\n\tfooterStyle?: React.CSSProperties;\n\tcloseOnEscapeKey?: boolean;\n}\n\nexport const SideModal: React.FC<SideModalProps> = (props) => {\n\tconst { closeOnEscapeKey, onClose } = props;\n\n\t// Escape key handler - enabled by default\n\tuseEffect(() => {\n\t\t// Guard: Escape key must be enabled (default: true)\n\n\t\tconst escapeEnabled = closeOnEscapeKey ?? true;\n\t\tif (!escapeEnabled) return;\n\n\t\tconst handleEscapeKey = (event: KeyboardEvent) => {\n\t\t\tif (event.key !== 'Escape') return;\n\n\t\t\tonClose();\n\t\t};\n\n\t\tdocument.addEventListener('keydown', handleEscapeKey);\n\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', handleEscapeKey);\n\t\t};\n\t}, [closeOnEscapeKey, onClose]);\n\n\treturn ReactDOM.createPortal(\n\t\t<SideModalStyle zIndex={props.zIndex}>\n\t\t\t<SideModalContainer width={props.width}>\n\t\t\t\t<SideModalHeader\n\t\t\t\t\theaderStyle={{\n\t\t\t\t\t\t...props.headerStyle,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props?.headerCustomComponent \|\| (\n\t\t\t\t\t\t<TitleMedium>{props.header}</TitleMedium>\n\t\t\t\t\t)}\n\t\t\t\t\t{!props.hideCrossButton && (\n\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\theight={24}\n\t\t\t\t\t\t\tonClick={props.onClose}\n\t\t\t\t\t\t\tdata-test=\"side-modal-close-button\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}{' '}\n\t\t\t\t</SideModalHeader>\n\t\t\t\t<SideModalBody\n\t\t\t\t\thideFooter={props.hideFooter}\n\t\t\t\t\tbodyStyle={{\n\t\t\t\t\t\t...props.bodyStyle,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props.children}{' '}\n\t\t\t\t</SideModalBody>\n\t\t\t\t{props.hideFooter === true ? null : (\n\t\t\t\t\t<SideModalFooter\n\t\t\t\t\t\tfooterDirection={props.footerDirection}\n\t\t\t\t\t\tfooterStyle={{\n\t\t\t\t\t\t\t...props.footerStyle,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{(props.saveButtonProps \|\| props.cancelButtonProps) && (\n\t\t\t\t\t\t\t<FooterButtonWrapper footerDirection={props.footerDirection}>\n\t\t\t\t\t\t\t\t{props.saveButtonProps && <Button {...props.saveButtonProps} />}\n\t\t\t\t\t\t\t\t{props.cancelButtonProps && (\n\t\t\t\t\t\t\t\t\t<Button {...props.cancelButtonProps} />\n\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t</FooterButtonWrapper>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.footerCustomComponent ? props.footerCustomComponent : <></>}{' '}\n\t\t\t\t\t</SideModalFooter>\n\t\t\t\t)}{' '}\n\t\t\t</SideModalContainer>\n\t\t</SideModalStyle>,\n\t\tprops.element ?? document.body,\n\t);\n};\n"],"names":["SideModal","props","closeOnEscapeKey","onClose","useEffect","handleEscapeKey","event","ReactDOM","jsx","SideModalStyle","jsxs","SideModalContainer","SideModalHeader","TitleMedium","CrossIcon","SideModalBody","SideModalFooter","FooterButtonWrapper","Button","Fragment"],"mappings":"iXAmCaA,EAAuCC,GAAU,CAC7D,KAAM,CAAE,iBAAAC,EAAkB,QAAAC,CAAA,EAAYF,EAGtCG,OAAAA,EAAAA,UAAU,IAAM,CAIf,GAAI,EADkBF,GAAoB,IACtB,OAEpB,MAAMG,EAAmBC,GAAyB,CAC7CA,EAAM,MAAQ,UAElBH,EAAA,CACD,EAEA,gBAAS,iBAAiB,UAAWE,CAAe,EAE7C,IAAM,CACZ,SAAS,oBAAoB,UAAWA,CAAe,CACxD,CACD,EAAG,CAACH,EAAkBC,CAAO,CAAC,EAEvBI,EAAAA,QAAS,aACfC,EAAAA,IAACC,EAAAA,gBAAe,OAAQR,EAAM,OAC7B,SAAAS,EAAAA,KAACC,EAAAA,mBAAA,CAAmB,MAAOV,EAAM,MAChC,SAAA,CAAAS,EAAAA,KAACE,EAAAA,gBAAA,CACA,YAAa,CACZ,GAAGX,EAAM,WAAA,EAGT,SAAA,CAAAA,GAAO,uBACPO,MAACK,EAAAA,YAAA,CAAa,SAAAZ,EAAM,OAAO,EAE3B,CAACA,EAAM,iBACPO,EAAAA,IAACM,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,QAASb,EAAM,QACf,YAAU,yBAAA,CAAA,EAET,GAAA,CAAA,CAAA,EAEJS,EAAAA,KAACK,EAAAA,cAAA,CACA,WAAYd,EAAM,WAClB,UAAW,CACV,GAAGA,EAAM,SAAA,EAGT,SAAA,CAAAA,EAAM,SAAU,GAAA,CAAA,CAAA,EAEjBA,EAAM,aAAe,GAAO,KAC5BS,EAAAA,KAACM,EAAAA,gBAAA,CACA,gBAAiBf,EAAM,gBACvB,YAAa,CACZ,GAAGA,EAAM,WAAA,EAGR,SAAA,EAAAA,EAAM,iBAAmBA,EAAM,2BAC/BgB,EAAAA,oBAAA,CAAoB,gBAAiBhB,EAAM,gBAC1C,SAAA,CAAAA,EAAM,iBAAmBO,MAACU,EAAAA,OAAA,CAAQ,GAAGjB,EAAM,gBAAiB,EAC5DA,EAAM,mBACNO,MAACU,EAAAA,OAAA,CAAQ,GAAGjB,EAAM,kBAAmB,EACnC,GAAA,EACJ,EAEAA,EAAM,sBAAwBA,EAAM,sBAAwBO,EAAAA,IAAAW,EAAAA,SAAA,EAAE,EAAK,GAAA,CAAA,CAAA,EAEnE,GAAA,CAAA,CACJ,CAAA,CACD,EACAlB,EAAM,SAAW,SAAS,IAAA,CAE5B"}

package/dist/cjs/components/star-rating/Star.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),s=require("react"),o=require("../../constants/Theme.js"),g=require("../../assets/icons/starEmpty.svg.js"),S=require("../../assets/icons/starFilled.svg.js"),M=require("../../assets/icons/starFilledV2.svg.js"),b=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},p=b(s),v=e=>e==="v1"?S.default:M.default,O=({size:e,filled:d,emptyColor:E,filledColor:a,onClick:n,asHovered:c,onHover:h,mode:r,version:f="v1"})=>{const[l,t]=s.useState(!1);s.useEffect(()=>{h?.(l)},[l]),s.useEffect(()=>{c||t(!1)},[c]);const i=p.default.useMemo(()=>v(f),[f]);return c?u.jsx(i,{onClick:()=>{n?.("select")},onMouseEnter:()=>t(!0),onMouseLeave:()=>t(!1),style:{cursor:"pointer"},width:e,height:e,color:a??o.COLORS.background.warning.vibrant}):l?u.jsx(i,{onMouseLeave:()=>t(!1),onMouseEnter:()=>t(!0),style:{cursor:"pointer"},onClick:()=>{n?.("select")},width:e,height:e,color:a??o.COLORS.background.warning.vibrant}):d?u.jsx(i,{onMouseEnter:()=>r!=="VIEW"&&t(!0),onMouseLeave:()=>r!=="VIEW"&&t(!1),style:{cursor:r!=="VIEW"?"pointer":"default"},onClick:()=>{r!=="VIEW"&&n?.("de-select")},width:e,height:e,color:a??o.COLORS.background.warning.vibrant}):u.jsx(g.default,{onMouseEnter:()=>r!=="VIEW"&&t(!0),onMouseLeave:()=>r!=="VIEW"&&t(!1),style:{cursor:r!=="VIEW"?"pointer":"default"},onClick:()=>{r!=="VIEW"&&n?.("select")},width:e,height:e,color:E??o.COLORS.surface.standard})};exports.Star=O;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("react"),s=require("../../constants/Theme.js"),S=require("../../assets/icons/starEmpty.svg.js"),M=require("../../assets/icons/starFilled.svg.js"),b=require("../../assets/icons/starFilledV2.svg.js"),p=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},v=p(o),O=t=>t==="v1"?M.default:b.default,V=({size:t,filled:E,emptyColor:h,filledColor:c,onClick:n,asHovered:i,onHover:g,mode:r,version:d="v1","data-testid":u})=>{const[l,e]=o.useState(!1);o.useEffect(()=>{g?.(l)},[l]),o.useEffect(()=>{i||e(!1)},[i]);const f=v.default.useMemo(()=>O(d),[d]);return i?a.jsx(f,{"data-testid":u,onClick:()=>{n?.("select")},onMouseEnter:()=>e(!0),onMouseLeave:()=>e(!1),style:{cursor:"pointer"},width:t,height:t,color:c??s.COLORS.background.warning.vibrant}):l?a.jsx(f,{"data-testid":u,onMouseLeave:()=>e(!1),onMouseEnter:()=>e(!0),style:{cursor:"pointer"},onClick:()=>{n?.("select")},width:t,height:t,color:c??s.COLORS.background.warning.vibrant}):E?a.jsx(f,{"data-testid":u,onMouseEnter:()=>r!=="VIEW"&&e(!0),onMouseLeave:()=>r!=="VIEW"&&e(!1),style:{cursor:r!=="VIEW"?"pointer":"default"},onClick:()=>{r!=="VIEW"&&n?.("de-select")},width:t,height:t,color:c??s.COLORS.background.warning.vibrant}):a.jsx(S.default,{"data-testid":u,onMouseEnter:()=>r!=="VIEW"&&e(!0),onMouseLeave:()=>r!=="VIEW"&&e(!1),style:{cursor:r!=="VIEW"?"pointer":"default"},onClick:()=>{r!=="VIEW"&&n?.("select")},width:t,height:t,color:h??s.COLORS.surface.standard})};exports.Star=V;
 //# sourceMappingURL=Star.js.map

package/dist/cjs/components/star-rating/Star.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Star.js","sources":["../../../../src/components/star-rating/Star.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport StarEmpty from '../../assets/icons/starEmpty.svg';\nimport StarFilledV1 from '../../assets/icons/starFilled.svg';\nimport StarFilledV2 from '../../assets/icons/starFilledV2.svg';\n\nconst GetStar = (version: 'v1' \| 'v2') => {\n\tif (version === 'v1') {\n\t\treturn StarFilledV1;\n\t}\n\treturn StarFilledV2;\n};\n\nexport const Star: React.FC<{\n\tfilled?: boolean;\n\tsize?: number;\n\temptyColor?: string;\n\tfilledColor?: string;\n\tonClick?: (action: 'de-select' \| 'select') => void;\n\tonHover?: (hovered: boolean) => void;\n\t/** this means this star is hovered-active cause there is a star hovered after this */\n\tasHovered?: boolean;\n\tmode?: 'VIEW' \| 'EDIT';\n\tversion?: 'v1' \| 'v2';\n}> = ({\n\tsize,\n\tfilled,\n\temptyColor,\n\tfilledColor,\n\tonClick,\n\tasHovered,\n\tonHover,\n\tmode,\n\tversion = 'v1',\n}) => {\n\tconst [hovered, setHovered] = useState(false);\n\n\tuseEffect(() => {\n\t\tonHover?.(hovered);\n\t}, [hovered]);\n\n\tuseEffect(() => {\n\t\tif (!asHovered) {\n\t\t\tsetHovered(false);\n\t\t}\n\t}, [asHovered]);\n\n\tconst StarFilled = React.useMemo(() => GetStar(version), [version]);\n\n\tif (asHovered) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tonClick={() => {\n\t\t\t\t\tonClick?.('select');\n\t\t\t\t}}\n\t\t\t\tonMouseEnter={() => setHovered(true)}\n\t\t\t\tonMouseLeave={() => setHovered(false)}\n\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (hovered) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tonMouseLeave={() => setHovered(false)}\n\t\t\t\tonMouseEnter={() => setHovered(true)}\n\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tonClick?.('select');\n\t\t\t\t}}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (filled) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tonMouseEnter={() => mode !== 'VIEW' && setHovered(true)}\n\t\t\t\tonMouseLeave={() => mode !== 'VIEW' && setHovered(false)}\n\t\t\t\tstyle={{ cursor: mode !== 'VIEW' ? 'pointer' : 'default' }}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tmode !== 'VIEW' && onClick?.('de-select');\n\t\t\t\t}}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<StarEmpty\n\t\t\tonMouseEnter={() => mode !== 'VIEW' && setHovered(true)}\n\t\t\tonMouseLeave={() => mode !== 'VIEW' && setHovered(false)}\n\t\t\tstyle={{ cursor: mode !== 'VIEW' ? 'pointer' : 'default' }}\n\t\t\tonClick={() => {\n\t\t\t\tmode !== 'VIEW' && onClick?.('select');\n\t\t\t}}\n\t\t\twidth={size}\n\t\t\theight={size}\n\t\t\tcolor={emptyColor ?? COLORS.surface.standard}\n\t\t/>\n\t);\n};\n"],"names":["GetStar","version","StarFilledV1","StarFilledV2","Star","size","filled","emptyColor","filledColor","onClick","asHovered","onHover","mode","hovered","setHovered","useState","useEffect","StarFilled","React","jsx","COLORS","StarEmpty"],"mappings":"oYAMMA,EAAWC,GACZA,IAAY,KACRC,EAAAA,QAEDC,EAAAA,QAGKC,~~EAWR~~,CAAC,CACL,KAAAC,EACA,OAAAC,EACA,WAAAC,EACA,YAAAC,EACA,QAAAC,EACA,UAAAC,EACA,QAAAC,EACA,KAAAC,EACA,QAAAX,EAAU,~~IACX~~,IAAM,CACL,KAAM,~~CAACY~~,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EAE5CC,EAAAA,UAAU,IAAM,~~CACfL~~,~~IAAUE~~,CAAO,CAClB,EAAG,CAACA,CAAO,CAAC,EAEZG,EAAAA,UAAU,IAAM,~~CACVN~~,~~GACJI~~,EAAW,EAAK,CAElB,EAAG,~~CAACJ~~,CAAS,CAAC,EAEd,~~MAAMO~~,EAAaC,EAAAA,QAAM,QAAQ,~~IAAMlB~~,EAAQC,CAAO,EAAG,CAACA,CAAO,CAAC,EAElE,OAAIS,~~EAEFS~~,EAAAA,IAACF,EAAA,CACA,QAAS,IAAM,~~CACdR~~,IAAU,QAAQ,CACnB,EACA,aAAc,~~IAAMK~~,EAAW,EAAI,EACnC,aAAc,IAAMA,EAAW,EAAK,EACpC,MAAO,CAAE,OAAQ,SAAA,EACjB,~~MAAOT~~,EACP,OAAQA,EACR,MAAOG,~~GAAeY~~,SAAO,WAAW,QAAQ,OAAA,CAAA,EAK/CP,EAEFM,EAAAA,IAACF,EAAA,CACA,aAAc,~~IAAMH~~,EAAW,EAAK,EACpC,aAAc,IAAMA,EAAW,EAAI,EACnC,MAAO,CAAE,OAAQ,SAAA,EACjB,QAAS,IAAM,~~CACdL~~,IAAU,QAAQ,CACnB,EACA,MAAOJ,EACP,OAAQA,EACR,MAAOG,~~GAAeY~~,SAAO,WAAW,QAAQ,OAAA,CAAA,EAK/Cd,~~EAEFa~~,EAAAA,IAACF,EAAA,CACA,aAAc,~~IAAML~~,IAAS,~~QAAUE~~,EAAW,EAAI,EACtD,aAAc,~~IAAMF~~,IAAS,~~QAAUE~~,EAAW,EAAK,EACvD,MAAO,CAAE,~~OAAQF~~,IAAS,OAAS,UAAY,SAAA,EAC/C,QAAS,IAAM,CACdA,IAAS,QAAUH,IAAU,WAAW,CACzC,EACA,MAAOJ,EACP,OAAQA,EACR,MAAOG,~~GAAeY~~,SAAO,WAAW,QAAQ,OAAA,CAAA,EAMlDD,EAAAA,IAACE,EAAAA,QAAA,CACA,aAAc,~~IAAMT~~,IAAS,~~QAAUE~~,EAAW,EAAI,EACtD,aAAc,~~IAAMF~~,IAAS,~~QAAUE~~,EAAW,EAAK,EACvD,MAAO,CAAE,~~OAAQF~~,IAAS,OAAS,UAAY,SAAA,EAC/C,QAAS,IAAM,CACdA,IAAS,QAAUH,IAAU,QAAQ,CACtC,EACA,MAAOJ,EACP,OAAQA,EACR,MAAOE,~~GAAca~~,EAAAA,OAAO,QAAQ,QAAA,CAAA,CAGvC"}
1	+ {"version":3,"file":"Star.js","sources":["../../../../src/components/star-rating/Star.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport StarEmpty from '../../assets/icons/starEmpty.svg';\nimport StarFilledV1 from '../../assets/icons/starFilled.svg';\nimport StarFilledV2 from '../../assets/icons/starFilledV2.svg';\n\nconst GetStar = (version: 'v1' \| 'v2') => {\n\tif (version === 'v1') {\n\t\treturn StarFilledV1;\n\t}\n\treturn StarFilledV2;\n};\n\nexport const Star: React.FC<{\n\tfilled?: boolean;\n\tsize?: number;\n\temptyColor?: string;\n\tfilledColor?: string;\n\tonClick?: (action: 'de-select' \| 'select') => void;\n\tonHover?: (hovered: boolean) => void;\n\t/** this means this star is hovered-active cause there is a star hovered after this */\n\tasHovered?: boolean;\n\tmode?: 'VIEW' \| 'EDIT';\n\tversion?: 'v1' \| 'v2';\n\t'data-testid'?: string;\n}> = ({\n\tsize,\n\tfilled,\n\temptyColor,\n\tfilledColor,\n\tonClick,\n\tasHovered,\n\tonHover,\n\tmode,\n\tversion = 'v1',\n\t'data-testid': dataTestId,\n}) => {\n\tconst [hovered, setHovered] = useState(false);\n\n\tuseEffect(() => {\n\t\tonHover?.(hovered);\n\t}, [hovered]);\n\n\tuseEffect(() => {\n\t\tif (!asHovered) {\n\t\t\tsetHovered(false);\n\t\t}\n\t}, [asHovered]);\n\n\tconst StarFilled = React.useMemo(() => GetStar(version), [version]);\n\n\tif (asHovered) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tdata-testid={dataTestId}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tonClick?.('select');\n\t\t\t\t}}\n\t\t\t\tonMouseEnter={() => setHovered(true)}\n\t\t\t\tonMouseLeave={() => setHovered(false)}\n\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (hovered) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tdata-testid={dataTestId}\n\t\t\t\tonMouseLeave={() => setHovered(false)}\n\t\t\t\tonMouseEnter={() => setHovered(true)}\n\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tonClick?.('select');\n\t\t\t\t}}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\tif (filled) {\n\t\treturn (\n\t\t\t<StarFilled\n\t\t\t\tdata-testid={dataTestId}\n\t\t\t\tonMouseEnter={() => mode !== 'VIEW' && setHovered(true)}\n\t\t\t\tonMouseLeave={() => mode !== 'VIEW' && setHovered(false)}\n\t\t\t\tstyle={{ cursor: mode !== 'VIEW' ? 'pointer' : 'default' }}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tmode !== 'VIEW' && onClick?.('de-select');\n\t\t\t\t}}\n\t\t\t\twidth={size}\n\t\t\t\theight={size}\n\t\t\t\tcolor={filledColor ?? COLORS.background.warning.vibrant}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<StarEmpty\n\t\t\tdata-testid={dataTestId}\n\t\t\tonMouseEnter={() => mode !== 'VIEW' && setHovered(true)}\n\t\t\tonMouseLeave={() => mode !== 'VIEW' && setHovered(false)}\n\t\t\tstyle={{ cursor: mode !== 'VIEW' ? 'pointer' : 'default' }}\n\t\t\tonClick={() => {\n\t\t\t\tmode !== 'VIEW' && onClick?.('select');\n\t\t\t}}\n\t\t\twidth={size}\n\t\t\theight={size}\n\t\t\tcolor={emptyColor ?? COLORS.surface.standard}\n\t\t/>\n\t);\n};\n"],"names":["GetStar","version","StarFilledV1","StarFilledV2","Star","size","filled","emptyColor","filledColor","onClick","asHovered","onHover","mode","dataTestId","hovered","setHovered","useState","useEffect","StarFilled","React","jsx","COLORS","StarEmpty"],"mappings":"oYAMMA,EAAWC,GACZA,IAAY,KACRC,EAAAA,QAEDC,EAAAA,QAGKC,EAYR,CAAC,CACL,KAAAC,EACA,OAAAC,EACA,WAAAC,EACA,YAAAC,EACA,QAAAC,EACA,UAAAC,EACA,QAAAC,EACA,KAAAC,EACA,QAAAX,EAAU,KACV,cAAeY,CAChB,IAAM,CACL,KAAM,CAACC,EAASC,CAAU,EAAIC,EAAAA,SAAS,EAAK,EAE5CC,EAAAA,UAAU,IAAM,CACfN,IAAUG,CAAO,CAClB,EAAG,CAACA,CAAO,CAAC,EAEZG,EAAAA,UAAU,IAAM,CACVP,GACJK,EAAW,EAAK,CAElB,EAAG,CAACL,CAAS,CAAC,EAEd,MAAMQ,EAAaC,EAAAA,QAAM,QAAQ,IAAMnB,EAAQC,CAAO,EAAG,CAACA,CAAO,CAAC,EAElE,OAAIS,EAEFU,EAAAA,IAACF,EAAA,CACA,cAAaL,EACb,QAAS,IAAM,CACdJ,IAAU,QAAQ,CACnB,EACA,aAAc,IAAMM,EAAW,EAAI,EACnC,aAAc,IAAMA,EAAW,EAAK,EACpC,MAAO,CAAE,OAAQ,SAAA,EACjB,MAAOV,EACP,OAAQA,EACR,MAAOG,GAAea,SAAO,WAAW,QAAQ,OAAA,CAAA,EAK/CP,EAEFM,EAAAA,IAACF,EAAA,CACA,cAAaL,EACb,aAAc,IAAME,EAAW,EAAK,EACpC,aAAc,IAAMA,EAAW,EAAI,EACnC,MAAO,CAAE,OAAQ,SAAA,EACjB,QAAS,IAAM,CACdN,IAAU,QAAQ,CACnB,EACA,MAAOJ,EACP,OAAQA,EACR,MAAOG,GAAea,SAAO,WAAW,QAAQ,OAAA,CAAA,EAK/Cf,EAEFc,EAAAA,IAACF,EAAA,CACA,cAAaL,EACb,aAAc,IAAMD,IAAS,QAAUG,EAAW,EAAI,EACtD,aAAc,IAAMH,IAAS,QAAUG,EAAW,EAAK,EACvD,MAAO,CAAE,OAAQH,IAAS,OAAS,UAAY,SAAA,EAC/C,QAAS,IAAM,CACdA,IAAS,QAAUH,IAAU,WAAW,CACzC,EACA,MAAOJ,EACP,OAAQA,EACR,MAAOG,GAAea,SAAO,WAAW,QAAQ,OAAA,CAAA,EAMlDD,EAAAA,IAACE,EAAAA,QAAA,CACA,cAAaT,EACb,aAAc,IAAMD,IAAS,QAAUG,EAAW,EAAI,EACtD,aAAc,IAAMH,IAAS,QAAUG,EAAW,EAAK,EACvD,MAAO,CAAE,OAAQH,IAAS,OAAS,UAAY,SAAA,EAC/C,QAAS,IAAM,CACdA,IAAS,QAAUH,IAAU,QAAQ,CACtC,EACA,MAAOJ,EACP,OAAQA,EACR,MAAOE,GAAcc,EAAAA,OAAO,QAAQ,QAAA,CAAA,CAGvC"}

package/dist/cjs/components/star-rating/StarRating.js CHANGED Viewed

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),s=require("react"),q=require("styled-components"),R=require("./Star.js"),_=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},b=_(q),C=b.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),s=require("react"),q=require("styled-components"),R=require("./Star.js"),_=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},b=_(q),C=b.default.div`
 	display: flex;
 	flex-direction: row;
 	gap: 12px;
 	justify-content: start;
 	align-items: center;
-`,H=({emptyColor:t,filledColor:u,onChange:f,value:d,maxValue:l,starSize:S,mode:m,version:p="v1"})=>{const[r,o]=s.useState(d??0),[v,y]=s.useState(!1),[a,i]=s.useState(0),g=s.useMemo(()=>Array(l??5).fill(null).map((n,j)=>j+1),[l]);return s.useEffect(()=>{v&&f(r)},[r]),s.useEffect(()=>{y(!0)},[]),c.jsx(C,{children:g.map(e=>c.jsx(R.Star,{asHovered:a?e<=a:!1,size:S??24,filled:a?void 0:e<=r,emptyColor:t,filledColor:u,onClick:n=>{n==="de-select"?e<r?o(e):o(e-1):o(e)},onHover:n=>{i(n?e:0)},mode:m,version:p},e))})};exports.StarRating=H;
+`,H=({emptyColor:e,filledColor:u,onChange:f,value:d,maxValue:l,starSize:S,mode:m,version:p="v1"})=>{const[r,n]=s.useState(d??0),[v,y]=s.useState(!1),[o,i]=s.useState(0),g=s.useMemo(()=>Array(l??5).fill(null).map((a,j)=>j+1),[l]);return s.useEffect(()=>{v&&f(r)},[r]),s.useEffect(()=>{y(!0)},[]),c.jsx(C,{children:g.map(t=>c.jsx(R.Star,{asHovered:o?t<=o:!1,size:S??24,filled:o?void 0:t<=r,emptyColor:e,filledColor:u,onClick:a=>{a==="de-select"?t<r?n(t):n(t-1):n(t)},onHover:a=>{i(a?t:0)},mode:m,version:p,"data-testid":`star-${t}`},t))})};exports.StarRating=H;
 //# sourceMappingURL=StarRating.js.map

package/dist/cjs/components/star-rating/StarRating.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StarRating.js","sources":["../../../../src/components/star-rating/StarRating.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport styled from 'styled-components';\nimport { Star } from './Star';\n\nconst Container = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 12px;\n\tjustify-content: start;\n\talign-items: center;\n`;\n\nexport const StarRating: React.FC<{\n\temptyColor?: string;\n\tfilledColor?: string;\n\tonChange: (stars: number) => void;\n\tvalue?: number;\n\tmaxValue?: number;\n\tstarSize?: number;\n\tmode?: 'VIEW' \| 'EDIT';\n\tversion?: 'v1' \| 'v2';\n}> = ({\n\temptyColor,\n\tfilledColor,\n\tonChange,\n\tvalue,\n\tmaxValue,\n\tstarSize,\n\tmode,\n\tversion = 'v1',\n}) => {\n\tconst [stars, setStars] = useState(value ?? 0);\n\tconst [mounted, setMountedFlag] = useState(false);\n\tconst [hoveredStar, setHoveredStar] = useState(0);\n\n\tconst arr = useMemo(() => {\n\t\tconst limit = maxValue ?? 5;\n\t\treturn Array(limit)\n\t\t\t.fill(null)\n\t\t\t.map((_, idx) => idx + 1);\n\t}, [maxValue]);\n\n\tuseEffect(() => {\n\t\tif (mounted) {\n\t\t\tonChange(stars);\n\t\t}\n\t}, [stars]);\n\n\tuseEffect(() => {\n\t\tsetMountedFlag(true);\n\t}, []);\n\n\treturn (\n\t\t<Container>\n\t\t\t{arr.map((idx) => (\n\t\t\t\t<Star\n\t\t\t\t\tasHovered={hoveredStar ? idx <= hoveredStar : false}\n\t\t\t\t\tkey={idx}\n\t\t\t\t\tsize={starSize ?? 24}\n\t\t\t\t\tfilled={hoveredStar ? undefined : idx <= stars}\n\t\t\t\t\temptyColor={emptyColor}\n\t\t\t\t\tfilledColor={filledColor}\n\t\t\t\t\tonClick={(action) => {\n\t\t\t\t\t\tif (action === 'de-select') {\n\t\t\t\t\t\t\tif (idx < stars) {\n\t\t\t\t\t\t\t\tsetStars(idx);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tsetStars(idx - 1);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetStars(idx);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonHover={(hovered) => {\n\t\t\t\t\t\tif (hovered) setHoveredStar(idx);\n\t\t\t\t\t\telse {\n\t\t\t\t\t\t\tsetHoveredStar(0);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tmode={mode}\n\t\t\t\t\tversion={version}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</Container>\n\t);\n};\n"],"names":["Container","styled","StarRating","emptyColor","filledColor","onChange","value","maxValue","starSize","mode","version","stars","setStars","useState","mounted","setMountedFlag","hoveredStar","setHoveredStar","arr","useMemo","_","idx","useEffect","jsx","Star","action","hovered"],"mappings":"6PAIMA,EAAYC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQZC,EASR,CAAC,CACL,WAAAC,EACA,YAAAC,EACA,SAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,KAAAC,EACA,QAAAC,EAAU,IACX,IAAM,CACL,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAASP,GAAS,CAAC,EACvC,CAACQ,EAASC,CAAc,EAAIF,EAAAA,SAAS,EAAK,EAC1C,CAACG,EAAaC,CAAc,EAAIJ,EAAAA,SAAS,CAAC,EAE1CK,EAAMC,EAAAA,QAAQ,IAEZ,MADOZ,GAAY,CACR,EAChB,KAAK,IAAI,EACT,IAAI,CAACa,EAAGC,IAAQA,EAAM,CAAC,EACvB,CAACd,CAAQ,CAAC,EAEbe,OAAAA,EAAAA,UAAU,IAAM,CACXR,GACHT,EAASM,CAAK,CAEhB,EAAG,CAACA,CAAK,CAAC,EAEVW,EAAAA,UAAU,IAAM,CACfP,EAAe,EAAI,CACpB,EAAG,CAAA,CAAE,EAGJQ,EAAAA,IAACvB,EAAA,CACC,SAAAkB,EAAI,IAAKG,GACTE,EAAAA,IAACC,EAAAA,KAAA,CACA,UAAWR,EAAcK,GAAOL,EAAc,GAE9C,KAAMR,GAAY,GAClB,OAAQQ,EAAc,OAAYK,GAAOV,EACzC,WAAAR,EACA,YAAAC,EACA,QAAUqB,GAAW,CAChBA,IAAW,YACVJ,EAAMV,EACTC,EAASS,CAAG,EAEZT,EAASS,EAAM,CAAC,EAGjBT,EAASS,CAAG,CAEd,EACA,QAAUK,GAAY,GACjBA,EAAwBL,EAEZ,CAFe,CAIhC,EACA,KAAAZ,EACA,QAAAC,~~CAAA~~,~~EAvBKW~~,CAAA,~~CAyBN~~,EACF,CAEF"}
1	+ {"version":3,"file":"StarRating.js","sources":["../../../../src/components/star-rating/StarRating.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport styled from 'styled-components';\nimport { Star } from './Star';\n\nconst Container = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 12px;\n\tjustify-content: start;\n\talign-items: center;\n`;\n\nexport const StarRating: React.FC<{\n\temptyColor?: string;\n\tfilledColor?: string;\n\tonChange: (stars: number) => void;\n\tvalue?: number;\n\tmaxValue?: number;\n\tstarSize?: number;\n\tmode?: 'VIEW' \| 'EDIT';\n\tversion?: 'v1' \| 'v2';\n}> = ({\n\temptyColor,\n\tfilledColor,\n\tonChange,\n\tvalue,\n\tmaxValue,\n\tstarSize,\n\tmode,\n\tversion = 'v1',\n}) => {\n\tconst [stars, setStars] = useState(value ?? 0);\n\tconst [mounted, setMountedFlag] = useState(false);\n\tconst [hoveredStar, setHoveredStar] = useState(0);\n\n\tconst arr = useMemo(() => {\n\t\tconst limit = maxValue ?? 5;\n\t\treturn Array(limit)\n\t\t\t.fill(null)\n\t\t\t.map((_, idx) => idx + 1);\n\t}, [maxValue]);\n\n\tuseEffect(() => {\n\t\tif (mounted) {\n\t\t\tonChange(stars);\n\t\t}\n\t}, [stars]);\n\n\tuseEffect(() => {\n\t\tsetMountedFlag(true);\n\t}, []);\n\n\treturn (\n\t\t<Container>\n\t\t\t{arr.map((idx) => (\n\t\t\t\t<Star\n\t\t\t\t\tasHovered={hoveredStar ? idx <= hoveredStar : false}\n\t\t\t\t\tkey={idx}\n\t\t\t\t\tsize={starSize ?? 24}\n\t\t\t\t\tfilled={hoveredStar ? undefined : idx <= stars}\n\t\t\t\t\temptyColor={emptyColor}\n\t\t\t\t\tfilledColor={filledColor}\n\t\t\t\t\tonClick={(action) => {\n\t\t\t\t\t\tif (action === 'de-select') {\n\t\t\t\t\t\t\tif (idx < stars) {\n\t\t\t\t\t\t\t\tsetStars(idx);\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tsetStars(idx - 1);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetStars(idx);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonHover={(hovered) => {\n\t\t\t\t\t\tif (hovered) setHoveredStar(idx);\n\t\t\t\t\t\telse {\n\t\t\t\t\t\t\tsetHoveredStar(0);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tmode={mode}\n\t\t\t\t\tversion={version}\n\t\t\t\t\tdata-testid={`star-${idx}`}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</Container>\n\t);\n};\n"],"names":["Container","styled","StarRating","emptyColor","filledColor","onChange","value","maxValue","starSize","mode","version","stars","setStars","useState","mounted","setMountedFlag","hoveredStar","setHoveredStar","arr","useMemo","_","idx","useEffect","jsx","Star","action","hovered"],"mappings":"6PAIMA,EAAYC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQZC,EASR,CAAC,CACL,WAAAC,EACA,YAAAC,EACA,SAAAC,EACA,MAAAC,EACA,SAAAC,EACA,SAAAC,EACA,KAAAC,EACA,QAAAC,EAAU,IACX,IAAM,CACL,KAAM,CAACC,EAAOC,CAAQ,EAAIC,EAAAA,SAASP,GAAS,CAAC,EACvC,CAACQ,EAASC,CAAc,EAAIF,EAAAA,SAAS,EAAK,EAC1C,CAACG,EAAaC,CAAc,EAAIJ,EAAAA,SAAS,CAAC,EAE1CK,EAAMC,EAAAA,QAAQ,IAEZ,MADOZ,GAAY,CACR,EAChB,KAAK,IAAI,EACT,IAAI,CAACa,EAAGC,IAAQA,EAAM,CAAC,EACvB,CAACd,CAAQ,CAAC,EAEbe,OAAAA,EAAAA,UAAU,IAAM,CACXR,GACHT,EAASM,CAAK,CAEhB,EAAG,CAACA,CAAK,CAAC,EAEVW,EAAAA,UAAU,IAAM,CACfP,EAAe,EAAI,CACpB,EAAG,CAAA,CAAE,EAGJQ,EAAAA,IAACvB,EAAA,CACC,SAAAkB,EAAI,IAAKG,GACTE,EAAAA,IAACC,EAAAA,KAAA,CACA,UAAWR,EAAcK,GAAOL,EAAc,GAE9C,KAAMR,GAAY,GAClB,OAAQQ,EAAc,OAAYK,GAAOV,EACzC,WAAAR,EACA,YAAAC,EACA,QAAUqB,GAAW,CAChBA,IAAW,YACVJ,EAAMV,EACTC,EAASS,CAAG,EAEZT,EAASS,EAAM,CAAC,EAGjBT,EAASS,CAAG,CAEd,EACA,QAAUK,GAAY,GACjBA,EAAwBL,EAEZ,CAFe,CAIhC,EACA,KAAAZ,EACA,QAAAC,EACA,cAAa,QAAQW,CAAG,EAAA,EAxBnBA,CAAA,CA0BN,EACF,CAEF"}

package/dist/cjs/components/template-preview/TemplatePreview.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("../template-context-mapper/context/templateModalContext.js"),b=require("../../utils/StringUtils.js"),u=require("../../constants/Theme.js"),E=require("../../assets/icons/aiContentIcon.svg.js"),q=require("../TypographyStyle.js"),H=require("./EmailTemplateThumbnailPreview.js"),l=require("./models/Channels.js"),N=require("./SmsTemplatePreview.js"),S=require("./TemplatePreview.styled.js"),A=require("./webpush/WebpushPreview.js"),w=require("./WhatsAppTemplatePreview.js"),L=({template:r,channel:n,whatsAppSpecificMeta:o,templateCreationsInfo:t,hideHeader:y,size:T,onlyTemplateContent:g,emailSpecificMeta:i,smsSpecificMeta:s,showSampleValues:m,carouselCardIndex:d,isWhatsappCarousel:a,isPreview:h,applyBorderBottom:v,webPushSpecificMeta:C,hidePointerEvents:P})=>{const{setSelectedCarouselIndex:x}=j.useTemplateModalContext();return n===l.CHANNEL_TYPE.SMS?e.jsx("div",{style:{marginTop:t?16:0,border:t?`1px solid ${u.COLORS.stroke.primary}`:"none",borderRadius:4,...s?.templateContainerStyles},children:e.jsx(N.default,{template:r,hideHeader:y,onlyTemplateContent:g,size:T??"large",variableStore:s?.smsVariableStore,display_content:s?.smsDisplayContent,uniqueId:s?.uniqueId})}):n===l.CHANNEL_TYPE.EMAIL?e.jsx("div",{style:{marginTop:t?16:0,...i?.templateContainerStyles},children:e.jsx(H.default,{template:r,handleViewTemplate:()=>{i?.handleViewTemplate?.()},hideHeader:y,hideViewButton:i?.hideViewButtonForEmail,containerStyle:i?.containerStyle,emailDisplayContent:i?.emailDisplayContent,emailHtmlContainerId:i?.emailHtmlContainerId,applyBorderBottom:v,hidePointerEvents:P})}):n===l.CHANNEL_TYPE.WHATSAPP||n===l.CHANNEL_TYPE.RCS?e.jsxs("div",{style:{...o?.templateContainerStyles,...t?W.WhatsAppWrapper:{},position:"relative"},onClick:()=>{if(x&&a){if(d===-1&&!r?.mapping?.body?.length)return;x(d??-1)}},children:[t?e.jsx("div",{style:{padding:16},children:e.jsx(q.TitleRegular,{children:b.default.convertToTitleCase(r?.label??"")})}):e.jsx(e.Fragment,{}),e.jsx(w.default,{showSampleValues:m,showHeader:o?.showWhatsAppHeader,extras:o?.whatsAppExtras,template:r,size:t?"small":T??"large",containerStyle:{borderWidth:t?0:1,borderTopWidth:1,...o?.containerStyle??{},height:"100%"},zeroStateComponent:o?.zeroStateComponent,usePlaceHolderName:o?.usePlaceHolderName,carouselCardIndex:d,isWhatsappCarousel:a,isPreview:h,channel:n}),(!!r?.aiContentConfigId||!!r?.isAiGenerated)&&!a&&e.jsx(S.AiContentBadge,{children:e.jsx(E.default,{width:48,height:48})})]}):n==l.CHANNEL_TYPE.WEBPUSH?e.jsx("div",{style:{...C?.containerStyle},children:e.jsx(A.default,{template:r,extraContainerCss:C?.extraContainerCss})}):e.jsx(e.Fragment,{})},W={WhatsAppWrapper:{backgroundColor:u.COLORS.surface.standard,borderRadius:4,border:`1px solid ${u.COLORS.background.inactive}`,marginTop:16}};exports.TemplatePreview=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("../template-context-mapper/context/templateModalContext.js"),j=require("../../utils/StringUtils.js"),u=require("../../constants/Theme.js"),E=require("../../assets/icons/aiContentIcon.svg.js"),q=require("../TypographyStyle.js"),H=require("./EmailTemplateThumbnailPreview.js"),s=require("./models/Channels.js"),N=require("./SmsTemplatePreview.js"),S=require("./TemplatePreview.styled.js"),p=require("./webpush/WebpushPreview.js"),w=require("./WhatsAppTemplatePreview.js"),A=({template:r,channel:n,whatsAppSpecificMeta:o,templateCreationsInfo:t,hideHeader:y,size:T,onlyTemplateContent:x,emailSpecificMeta:i,smsSpecificMeta:l,showSampleValues:m,carouselCardIndex:d,isWhatsappCarousel:a,isPreview:v,applyBorderBottom:h,webPushSpecificMeta:C,hidePointerEvents:P})=>{const{setSelectedCarouselIndex:g}=b.useTemplateModalContext();return n===s.CHANNEL_TYPE.SMS?e.jsx("div",{"data-test":"template-preview-wrapper",style:{marginTop:t?16:0,border:t?`1px solid ${u.COLORS.stroke.primary}`:"none",borderRadius:4,...l?.templateContainerStyles},children:e.jsx(N.default,{template:r,hideHeader:y,onlyTemplateContent:x,size:T??"large",variableStore:l?.smsVariableStore,display_content:l?.smsDisplayContent,uniqueId:l?.uniqueId})}):n===s.CHANNEL_TYPE.EMAIL?e.jsx("div",{style:{marginTop:t?16:0,...i?.templateContainerStyles},children:e.jsx(H.default,{template:r,handleViewTemplate:()=>{i?.handleViewTemplate?.()},hideHeader:y,hideViewButton:i?.hideViewButtonForEmail,containerStyle:i?.containerStyle,emailDisplayContent:i?.emailDisplayContent,emailHtmlContainerId:i?.emailHtmlContainerId,applyBorderBottom:h,hidePointerEvents:P})}):n===s.CHANNEL_TYPE.WHATSAPP||n===s.CHANNEL_TYPE.RCS?e.jsxs("div",{style:{...o?.templateContainerStyles,...t?L.WhatsAppWrapper:{},position:"relative"},onClick:()=>{if(g&&a){if(d===-1&&!r?.mapping?.body?.length)return;g(d??-1)}},children:[t?e.jsx("div",{style:{padding:16},children:e.jsx(q.TitleRegular,{children:j.default.convertToTitleCase(r?.label??"")})}):e.jsx(e.Fragment,{}),e.jsx(w.default,{showSampleValues:m,showHeader:o?.showWhatsAppHeader,extras:o?.whatsAppExtras,template:r,size:t?"small":T??"large",containerStyle:{borderWidth:t?0:1,borderTopWidth:1,...o?.containerStyle??{},height:"100%"},zeroStateComponent:o?.zeroStateComponent,usePlaceHolderName:o?.usePlaceHolderName,carouselCardIndex:d,isWhatsappCarousel:a,isPreview:v,channel:n}),(!!r?.aiContentConfigId||!!r?.isAiGenerated)&&!a&&e.jsx(S.AiContentBadge,{"data-test":"ai-content-badge",children:e.jsx(E.default,{width:48,height:48})})]}):n==s.CHANNEL_TYPE.WEBPUSH?e.jsx("div",{style:{...C?.containerStyle},children:e.jsx(p.default,{template:r,extraContainerCss:C?.extraContainerCss})}):e.jsx(e.Fragment,{})},L={WhatsAppWrapper:{backgroundColor:u.COLORS.surface.standard,borderRadius:4,border:`1px solid ${u.COLORS.background.inactive}`,marginTop:16}};exports.TemplatePreview=A;
 //# sourceMappingURL=TemplatePreview.js.map

package/dist/cjs/components/template-preview/TemplatePreview.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TemplatePreview.js","sources":["../../../../src/components/template-preview/TemplatePreview.tsx"],"sourcesContent":["import React from 'react';\nimport { useTemplateModalContext } from '@src/components/template-context-mapper/context/templateModalContext';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport AiContentIcon from '../../assets/icons/aiContentIcon.svg';\nimport { TitleRegular } from '../TypographyStyle';\nimport EmailTemplateThumbnailPreview from './EmailTemplateThumbnailPreview';\nimport { CHANNEL_TYPE } from './models/Channels';\nimport { EmailMeta, EmailTemplateType } from './models/EmailTemplate';\nimport { SMSMeta, SMSTemplateType } from './models/SmsTemplate';\nimport { AllTemplateTypes } from './models/types';\nimport { WebpushMetaType, WebpushTemplateType } from './models/WebpushTemplate';\nimport { WhatsappMeta, WhatsAppTemplate } from './models/WhatsAppTemplate';\nimport SmsTemplatePreview from './SmsTemplatePreview';\nimport { AiContentBadge } from './TemplatePreview.styled';\nimport WebpushPreview from './webpush/WebpushPreview';\nimport WhatsappTemplatePreview from './WhatsAppTemplatePreview';\n\nexport interface TemplatePreviewProps {\n\ttemplate?: AllTemplateTypes;\n\tchannel: CHANNEL_TYPE;\n\tonlyTemplateContent?: boolean;\n\toutsidePreview?: boolean;\n\ttemplateCreationsInfo?: boolean;\n\twhatsAppSpecificMeta?: WhatsappMeta;\n\temailSpecificMeta?: EmailMeta;\n\tsmsSpecificMeta?: SMSMeta;\n\thideHeader?: boolean;\n\tsize?: 'small' \| 'large';\n\ttemplateContainerStyles?: React.CSSProperties;\n\tshowSampleValues?: boolean;\n\tcarouselCardIndex?: number;\n\tisWhatsappCarousel?: boolean;\n\tisPreview?: boolean;\n\tapplyBorderBottom?: boolean;\n\twebPushSpecificMeta?: WebpushMetaType;\n\thidePointerEvents?: boolean;\n}\nexport const TemplatePreview = ({\n\ttemplate,\n\tchannel,\n\twhatsAppSpecificMeta,\n\ttemplateCreationsInfo,\n\thideHeader,\n\tsize,\n\tonlyTemplateContent,\n\temailSpecificMeta,\n\tsmsSpecificMeta,\n\tshowSampleValues,\n\tcarouselCardIndex,\n\tisWhatsappCarousel,\n\tisPreview,\n\tapplyBorderBottom,\n\twebPushSpecificMeta,\n\thidePointerEvents,\n}: TemplatePreviewProps) => {\n\tconst { setSelectedCarouselIndex } = useTemplateModalContext();\n\tif (channel === CHANNEL_TYPE.SMS) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tmarginTop: templateCreationsInfo ? 16 : 0,\n\t\t\t\t\tborder: templateCreationsInfo\n\t\t\t\t\t\t? `1px solid ${COLORS.stroke.primary}`\n\t\t\t\t\t\t: 'none',\n\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t...smsSpecificMeta?.templateContainerStyles,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SmsTemplatePreview\n\t\t\t\t\ttemplate={template as SMSTemplateType}\n\t\t\t\t\thideHeader={hideHeader}\n\t\t\t\t\tonlyTemplateContent={onlyTemplateContent}\n\t\t\t\t\tsize={size ?? 'large'}\n\t\t\t\t\tvariableStore={smsSpecificMeta?.smsVariableStore}\n\t\t\t\t\tdisplay_content={smsSpecificMeta?.smsDisplayContent}\n\t\t\t\t\tuniqueId={smsSpecificMeta?.uniqueId}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t} else if (channel === CHANNEL_TYPE.EMAIL) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tmarginTop: templateCreationsInfo ? 16 : 0,\n\t\t\t\t\t...emailSpecificMeta?.templateContainerStyles,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<EmailTemplateThumbnailPreview\n\t\t\t\t\ttemplate={template as EmailTemplateType}\n\t\t\t\t\thandleViewTemplate={() => {\n\t\t\t\t\t\temailSpecificMeta?.handleViewTemplate?.();\n\t\t\t\t\t}}\n\t\t\t\t\thideHeader={hideHeader}\n\t\t\t\t\thideViewButton={emailSpecificMeta?.hideViewButtonForEmail}\n\t\t\t\t\tcontainerStyle={emailSpecificMeta?.containerStyle}\n\t\t\t\t\temailDisplayContent={emailSpecificMeta?.emailDisplayContent}\n\t\t\t\t\temailHtmlContainerId={emailSpecificMeta?.emailHtmlContainerId}\n\t\t\t\t\tapplyBorderBottom={applyBorderBottom}\n\t\t\t\t\thidePointerEvents={hidePointerEvents}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t} else if (\n\t\tchannel === CHANNEL_TYPE.WHATSAPP \|\|\n\t\tchannel === CHANNEL_TYPE.RCS\n\t) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\t...whatsAppSpecificMeta?.templateContainerStyles,\n\t\t\t\t\t...(templateCreationsInfo ? styles.WhatsAppWrapper : {}),\n\t\t\t\t\tposition: 'relative',\n\t\t\t\t}}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tif (setSelectedCarouselIndex && isWhatsappCarousel) {\n\t\t\t\t\t\tif (carouselCardIndex === -1 && !template?.mapping?.body?.length) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tsetSelectedCarouselIndex(carouselCardIndex ?? -1);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{templateCreationsInfo ? (\n\t\t\t\t\t<div style={{ padding: 16 }}>\n\t\t\t\t\t\t<TitleRegular>\n\t\t\t\t\t\t\t{StringUtils.convertToTitleCase(template?.label ?? '')}\n\t\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)}\n\t\t\t\t<WhatsappTemplatePreview\n\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\tshowHeader={whatsAppSpecificMeta?.showWhatsAppHeader}\n\t\t\t\t\textras={whatsAppSpecificMeta?.whatsAppExtras}\n\t\t\t\t\ttemplate={template as WhatsAppTemplate}\n\t\t\t\t\tsize={templateCreationsInfo ? 'small' : size ?? 'large'}\n\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\tborderWidth: templateCreationsInfo ? 0 : 1,\n\t\t\t\t\t\tborderTopWidth: 1,\n\t\t\t\t\t\t...(whatsAppSpecificMeta?.containerStyle ?? {}),\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t}}\n\t\t\t\t\tzeroStateComponent={whatsAppSpecificMeta?.zeroStateComponent}\n\t\t\t\t\tusePlaceHolderName={whatsAppSpecificMeta?.usePlaceHolderName}\n\t\t\t\t\tcarouselCardIndex={carouselCardIndex}\n\t\t\t\t\tisWhatsappCarousel={isWhatsappCarousel}\n\t\t\t\t\tisPreview={isPreview}\n\t\t\t\t\tchannel={channel}\n\t\t\t\t/>\n\t\t\t\t{(!!template?.['aiContentConfigId'] \|\| !!template?.['isAiGenerated']) &&\n\t\t\t\t\t!isWhatsappCarousel && (\n\t\t\t\t\t\t<AiContentBadge>\n\t\t\t\t\t\t\t<AiContentIcon width={48} height={48} />\n\t\t\t\t\t\t</AiContentBadge>\n\t\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t} else if (channel == CHANNEL_TYPE.WEBPUSH) {\n\t\treturn (\n\t\t\t<div style={{ ...webPushSpecificMeta?.containerStyle }}>\n\t\t\t\t<WebpushPreview\n\t\t\t\t\ttemplate={template as WebpushTemplateType}\n\t\t\t\t\textraContainerCss={webPushSpecificMeta?.extraContainerCss}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n\t{\n\t\treturn <></>;\n\t}\n};\n\nconst styles = {\n\tWhatsAppWrapper: {\n\t\tbackgroundColor: COLORS.surface.standard,\n\t\tborderRadius: 4,\n\t\tborder: `1px solid ${COLORS.background.inactive}`,\n\t\tmarginTop: 16,\n\t},\n};\n"],"names":["TemplatePreview","template","channel","whatsAppSpecificMeta","templateCreationsInfo","hideHeader","size","onlyTemplateContent","emailSpecificMeta","smsSpecificMeta","showSampleValues","carouselCardIndex","isWhatsappCarousel","isPreview","applyBorderBottom","webPushSpecificMeta","hidePointerEvents","setSelectedCarouselIndex","useTemplateModalContext","CHANNEL_TYPE","jsx","COLORS","SmsTemplatePreview","EmailTemplateThumbnailPreview","jsxs","styles","TitleRegular","StringUtils","Fragment","WhatsappTemplatePreview","AiContentBadge","AiContentIcon","WebpushPreview"],"mappings":"slBAsCaA,EAAkB,CAAC,CAC/B,SAAAC,EACA,QAAAC,EACA,qBAAAC,EACA,sBAAAC,EACA,WAAAC,EACA,KAAAC,EACA,oBAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,kBAAAC,EACA,mBAAAC,EACA,UAAAC,EACA,kBAAAC,EACA,oBAAAC,EACA,kBAAAC,CACD,IAA4B,CAC3B,KAAM,CAAE,yBAAAC,CAAA,EAA6BC,0BAAA,EACrC,OAAIhB,IAAYiB,EAAAA,aAAa,IAE3BC,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,UAAWhB,EAAwB,GAAK,EACxC,OAAQA,EACL,aAAaiB,EAAAA,OAAO,OAAO,OAAO,GAClC,OACH,aAAc,EACd,GAAGZ,GAAiB,uBAAA,EAGrB,SAAAW,EAAAA,IAACE,EAAAA,QAAA,CACA,SAAArB,EACA,WAAAI,EACA,oBAAAE,EACA,KAAMD,GAAQ,QACd,cAAeG,GAAiB,iBAChC,gBAAiBA,GAAiB,kBAClC,SAAUA,GAAiB,QAAA,CAAA,CAC5B,CAAA,EAGQP,IAAYiB,EAAAA,aAAa,MAElCC,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,UAAWhB,EAAwB,GAAK,EACxC,GAAGI,GAAmB,uBAAA,EAGvB,SAAAY,EAAAA,IAACG,EAAAA,QAAA,CACA,SAAAtB,EACA,mBAAoB,IAAM,CACzBO,GAAmB,qBAAA,CACpB,EACA,WAAAH,EACA,eAAgBG,GAAmB,uBACnC,eAAgBA,GAAmB,eACnC,oBAAqBA,GAAmB,oBACxC,qBAAsBA,GAAmB,qBACzC,kBAAAM,EACA,kBAAAE,CAAA,CAAA,CACD,CAAA,EAIFd,IAAYiB,EAAAA,aAAa,UACzBjB,IAAYiB,EAAAA,aAAa,IAGxBK,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,GAAGrB,GAAsB,wBACzB,GAAIC,EAAwBqB,EAAO,gBAAkB,CAAA,EACrD,SAAU,UAAA,EAEX,QAAS,IAAM,CACd,GAAIR,GAA4BL,EAAoB,CACnD,GAAID,IAAsB,IAAM,CAACV,GAAU,SAAS,MAAM,OACzD,OAGDgB,EAAyBN,GAAqB,EAAE,CACjD,CACD,EAEC,SAAA,CAAAP,QACC,MAAA,CAAI,MAAO,CAAE,QAAS,IACtB,SAAAgB,EAAAA,IAACM,eAAA,CACC,SAAAC,EAAAA,QAAY,mBAAmB1B,GAAU,OAAS,EAAE,EACtD,CAAA,CACD,EAEAmB,EAAAA,IAAAQ,EAAAA,SAAA,EAAE,EAEHR,EAAAA,IAACS,EAAAA,QAAA,CACA,iBAAAnB,EACA,WAAYP,GAAsB,mBAClC,OAAQA,GAAsB,eAC9B,SAAAF,EACA,KAAMG,EAAwB,QAAUE,GAAQ,QAChD,eAAgB,CACf,YAAaF,EAAwB,EAAI,EACzC,eAAgB,EAChB,GAAID,GAAsB,gBAAkB,CAAA,EAC5C,OAAQ,MAAA,EAET,mBAAoBA,GAAsB,mBAC1C,mBAAoBA,GAAsB,mBAC1C,kBAAAQ,EACA,mBAAAC,EACA,UAAAC,EACA,QAAAX,CAAA,CAAA,GAEC,CAAC,CAACD,GAAW,mBAAwB,CAAC,CAACA,GAAW,gBACnD,CAACW,GACAQ,EAAAA,~~IAACU~~,~~EAAAA~~,~~gBACA~~,SAAAV,EAAAA,IAACW,~~UAAA~~,~~CAAc~~,MAAO,GAAI,OAAQ,~~GAAI~~,CAAA,CACvC,CAAA,CAAA,CAAA,EAIM7B,GAAWiB,EAAAA,aAAa,cAEhC,MAAA,CAAI,MAAO,CAAE,GAAGJ,GAAqB,gBACrC,SAAAK,EAAAA,IAACY,EAAAA,QAAA,CACA,SAAA/B,EACA,kBAAmBc,GAAqB,iBAAA,CAAA,EAE1C,EAIMK,EAAAA,IAAAQ,EAAAA,SAAA,EAAE,CAEX,EAEMH,EAAS,CACd,gBAAiB,CAChB,gBAAiBJ,EAAAA,OAAO,QAAQ,SAChC,aAAc,EACd,OAAQ,aAAaA,EAAAA,OAAO,WAAW,QAAQ,GAC/C,UAAW,EAAA,CAEb"}
1	+ {"version":3,"file":"TemplatePreview.js","sources":["../../../../src/components/template-preview/TemplatePreview.tsx"],"sourcesContent":["import React from 'react';\nimport { useTemplateModalContext } from '@src/components/template-context-mapper/context/templateModalContext';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport AiContentIcon from '../../assets/icons/aiContentIcon.svg';\nimport { TitleRegular } from '../TypographyStyle';\nimport EmailTemplateThumbnailPreview from './EmailTemplateThumbnailPreview';\nimport { CHANNEL_TYPE } from './models/Channels';\nimport { EmailMeta, EmailTemplateType } from './models/EmailTemplate';\nimport { SMSMeta, SMSTemplateType } from './models/SmsTemplate';\nimport { AllTemplateTypes } from './models/types';\nimport { WebpushMetaType, WebpushTemplateType } from './models/WebpushTemplate';\nimport { WhatsappMeta, WhatsAppTemplate } from './models/WhatsAppTemplate';\nimport SmsTemplatePreview from './SmsTemplatePreview';\nimport { AiContentBadge } from './TemplatePreview.styled';\nimport WebpushPreview from './webpush/WebpushPreview';\nimport WhatsappTemplatePreview from './WhatsAppTemplatePreview';\n\nexport interface TemplatePreviewProps {\n\ttemplate?: AllTemplateTypes;\n\tchannel: CHANNEL_TYPE;\n\tonlyTemplateContent?: boolean;\n\toutsidePreview?: boolean;\n\ttemplateCreationsInfo?: boolean;\n\twhatsAppSpecificMeta?: WhatsappMeta;\n\temailSpecificMeta?: EmailMeta;\n\tsmsSpecificMeta?: SMSMeta;\n\thideHeader?: boolean;\n\tsize?: 'small' \| 'large';\n\ttemplateContainerStyles?: React.CSSProperties;\n\tshowSampleValues?: boolean;\n\tcarouselCardIndex?: number;\n\tisWhatsappCarousel?: boolean;\n\tisPreview?: boolean;\n\tapplyBorderBottom?: boolean;\n\twebPushSpecificMeta?: WebpushMetaType;\n\thidePointerEvents?: boolean;\n}\nexport const TemplatePreview = ({\n\ttemplate,\n\tchannel,\n\twhatsAppSpecificMeta,\n\ttemplateCreationsInfo,\n\thideHeader,\n\tsize,\n\tonlyTemplateContent,\n\temailSpecificMeta,\n\tsmsSpecificMeta,\n\tshowSampleValues,\n\tcarouselCardIndex,\n\tisWhatsappCarousel,\n\tisPreview,\n\tapplyBorderBottom,\n\twebPushSpecificMeta,\n\thidePointerEvents,\n}: TemplatePreviewProps) => {\n\tconst { setSelectedCarouselIndex } = useTemplateModalContext();\n\tif (channel === CHANNEL_TYPE.SMS) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tdata-test=\"template-preview-wrapper\"\n\t\t\t\tstyle={{\n\t\t\t\t\tmarginTop: templateCreationsInfo ? 16 : 0,\n\t\t\t\t\tborder: templateCreationsInfo\n\t\t\t\t\t\t? `1px solid ${COLORS.stroke.primary}`\n\t\t\t\t\t\t: 'none',\n\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t...smsSpecificMeta?.templateContainerStyles,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SmsTemplatePreview\n\t\t\t\t\ttemplate={template as SMSTemplateType}\n\t\t\t\t\thideHeader={hideHeader}\n\t\t\t\t\tonlyTemplateContent={onlyTemplateContent}\n\t\t\t\t\tsize={size ?? 'large'}\n\t\t\t\t\tvariableStore={smsSpecificMeta?.smsVariableStore}\n\t\t\t\t\tdisplay_content={smsSpecificMeta?.smsDisplayContent}\n\t\t\t\t\tuniqueId={smsSpecificMeta?.uniqueId}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t} else if (channel === CHANNEL_TYPE.EMAIL) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tmarginTop: templateCreationsInfo ? 16 : 0,\n\t\t\t\t\t...emailSpecificMeta?.templateContainerStyles,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<EmailTemplateThumbnailPreview\n\t\t\t\t\ttemplate={template as EmailTemplateType}\n\t\t\t\t\thandleViewTemplate={() => {\n\t\t\t\t\t\temailSpecificMeta?.handleViewTemplate?.();\n\t\t\t\t\t}}\n\t\t\t\t\thideHeader={hideHeader}\n\t\t\t\t\thideViewButton={emailSpecificMeta?.hideViewButtonForEmail}\n\t\t\t\t\tcontainerStyle={emailSpecificMeta?.containerStyle}\n\t\t\t\t\temailDisplayContent={emailSpecificMeta?.emailDisplayContent}\n\t\t\t\t\temailHtmlContainerId={emailSpecificMeta?.emailHtmlContainerId}\n\t\t\t\t\tapplyBorderBottom={applyBorderBottom}\n\t\t\t\t\thidePointerEvents={hidePointerEvents}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t} else if (\n\t\tchannel === CHANNEL_TYPE.WHATSAPP \|\|\n\t\tchannel === CHANNEL_TYPE.RCS\n\t) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\t...whatsAppSpecificMeta?.templateContainerStyles,\n\t\t\t\t\t...(templateCreationsInfo ? styles.WhatsAppWrapper : {}),\n\t\t\t\t\tposition: 'relative',\n\t\t\t\t}}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tif (setSelectedCarouselIndex && isWhatsappCarousel) {\n\t\t\t\t\t\tif (carouselCardIndex === -1 && !template?.mapping?.body?.length) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tsetSelectedCarouselIndex(carouselCardIndex ?? -1);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{templateCreationsInfo ? (\n\t\t\t\t\t<div style={{ padding: 16 }}>\n\t\t\t\t\t\t<TitleRegular>\n\t\t\t\t\t\t\t{StringUtils.convertToTitleCase(template?.label ?? '')}\n\t\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)}\n\t\t\t\t<WhatsappTemplatePreview\n\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\tshowHeader={whatsAppSpecificMeta?.showWhatsAppHeader}\n\t\t\t\t\textras={whatsAppSpecificMeta?.whatsAppExtras}\n\t\t\t\t\ttemplate={template as WhatsAppTemplate}\n\t\t\t\t\tsize={templateCreationsInfo ? 'small' : size ?? 'large'}\n\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\tborderWidth: templateCreationsInfo ? 0 : 1,\n\t\t\t\t\t\tborderTopWidth: 1,\n\t\t\t\t\t\t...(whatsAppSpecificMeta?.containerStyle ?? {}),\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t}}\n\t\t\t\t\tzeroStateComponent={whatsAppSpecificMeta?.zeroStateComponent}\n\t\t\t\t\tusePlaceHolderName={whatsAppSpecificMeta?.usePlaceHolderName}\n\t\t\t\t\tcarouselCardIndex={carouselCardIndex}\n\t\t\t\t\tisWhatsappCarousel={isWhatsappCarousel}\n\t\t\t\t\tisPreview={isPreview}\n\t\t\t\t\tchannel={channel}\n\t\t\t\t/>\n\t\t\t\t{(!!template?.['aiContentConfigId'] \|\| !!template?.['isAiGenerated']) &&\n\t\t\t\t\t!isWhatsappCarousel && (\n\t\t\t\t\t\t<AiContentBadge data-test=\"ai-content-badge\">\n\t\t\t\t\t\t\t<AiContentIcon width={48} height={48} />\n\t\t\t\t\t\t</AiContentBadge>\n\t\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t} else if (channel == CHANNEL_TYPE.WEBPUSH) {\n\t\treturn (\n\t\t\t<div style={{ ...webPushSpecificMeta?.containerStyle }}>\n\t\t\t\t<WebpushPreview\n\t\t\t\t\ttemplate={template as WebpushTemplateType}\n\t\t\t\t\textraContainerCss={webPushSpecificMeta?.extraContainerCss}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t}\n\t{\n\t\treturn <></>;\n\t}\n};\n\nconst styles = {\n\tWhatsAppWrapper: {\n\t\tbackgroundColor: COLORS.surface.standard,\n\t\tborderRadius: 4,\n\t\tborder: `1px solid ${COLORS.background.inactive}`,\n\t\tmarginTop: 16,\n\t},\n};\n"],"names":["TemplatePreview","template","channel","whatsAppSpecificMeta","templateCreationsInfo","hideHeader","size","onlyTemplateContent","emailSpecificMeta","smsSpecificMeta","showSampleValues","carouselCardIndex","isWhatsappCarousel","isPreview","applyBorderBottom","webPushSpecificMeta","hidePointerEvents","setSelectedCarouselIndex","useTemplateModalContext","CHANNEL_TYPE","jsx","COLORS","SmsTemplatePreview","EmailTemplateThumbnailPreview","jsxs","styles","TitleRegular","StringUtils","Fragment","WhatsappTemplatePreview","AiContentBadge","AiContentIcon","WebpushPreview"],"mappings":"slBAsCaA,EAAkB,CAAC,CAC/B,SAAAC,EACA,QAAAC,EACA,qBAAAC,EACA,sBAAAC,EACA,WAAAC,EACA,KAAAC,EACA,oBAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,kBAAAC,EACA,mBAAAC,EACA,UAAAC,EACA,kBAAAC,EACA,oBAAAC,EACA,kBAAAC,CACD,IAA4B,CAC3B,KAAM,CAAE,yBAAAC,CAAA,EAA6BC,0BAAA,EACrC,OAAIhB,IAAYiB,EAAAA,aAAa,IAE3BC,EAAAA,IAAC,MAAA,CACA,YAAU,2BACV,MAAO,CACN,UAAWhB,EAAwB,GAAK,EACxC,OAAQA,EACL,aAAaiB,EAAAA,OAAO,OAAO,OAAO,GAClC,OACH,aAAc,EACd,GAAGZ,GAAiB,uBAAA,EAGrB,SAAAW,EAAAA,IAACE,EAAAA,QAAA,CACA,SAAArB,EACA,WAAAI,EACA,oBAAAE,EACA,KAAMD,GAAQ,QACd,cAAeG,GAAiB,iBAChC,gBAAiBA,GAAiB,kBAClC,SAAUA,GAAiB,QAAA,CAAA,CAC5B,CAAA,EAGQP,IAAYiB,EAAAA,aAAa,MAElCC,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,UAAWhB,EAAwB,GAAK,EACxC,GAAGI,GAAmB,uBAAA,EAGvB,SAAAY,EAAAA,IAACG,EAAAA,QAAA,CACA,SAAAtB,EACA,mBAAoB,IAAM,CACzBO,GAAmB,qBAAA,CACpB,EACA,WAAAH,EACA,eAAgBG,GAAmB,uBACnC,eAAgBA,GAAmB,eACnC,oBAAqBA,GAAmB,oBACxC,qBAAsBA,GAAmB,qBACzC,kBAAAM,EACA,kBAAAE,CAAA,CAAA,CACD,CAAA,EAIFd,IAAYiB,EAAAA,aAAa,UACzBjB,IAAYiB,EAAAA,aAAa,IAGxBK,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,GAAGrB,GAAsB,wBACzB,GAAIC,EAAwBqB,EAAO,gBAAkB,CAAA,EACrD,SAAU,UAAA,EAEX,QAAS,IAAM,CACd,GAAIR,GAA4BL,EAAoB,CACnD,GAAID,IAAsB,IAAM,CAACV,GAAU,SAAS,MAAM,OACzD,OAGDgB,EAAyBN,GAAqB,EAAE,CACjD,CACD,EAEC,SAAA,CAAAP,QACC,MAAA,CAAI,MAAO,CAAE,QAAS,IACtB,SAAAgB,EAAAA,IAACM,eAAA,CACC,SAAAC,EAAAA,QAAY,mBAAmB1B,GAAU,OAAS,EAAE,EACtD,CAAA,CACD,EAEAmB,EAAAA,IAAAQ,EAAAA,SAAA,EAAE,EAEHR,EAAAA,IAACS,EAAAA,QAAA,CACA,iBAAAnB,EACA,WAAYP,GAAsB,mBAClC,OAAQA,GAAsB,eAC9B,SAAAF,EACA,KAAMG,EAAwB,QAAUE,GAAQ,QAChD,eAAgB,CACf,YAAaF,EAAwB,EAAI,EACzC,eAAgB,EAChB,GAAID,GAAsB,gBAAkB,CAAA,EAC5C,OAAQ,MAAA,EAET,mBAAoBA,GAAsB,mBAC1C,mBAAoBA,GAAsB,mBAC1C,kBAAAQ,EACA,mBAAAC,EACA,UAAAC,EACA,QAAAX,CAAA,CAAA,GAEC,CAAC,CAACD,GAAW,mBAAwB,CAAC,CAACA,GAAW,gBACnD,CAACW,GACAQ,MAACU,EAAAA,eAAA,CAAe,YAAU,mBACzB,SAAAV,EAAAA,IAACW,EAAAA,SAAc,MAAO,GAAI,OAAQ,EAAA,CAAI,CAAA,CACvC,CAAA,CAAA,CAAA,EAIM7B,GAAWiB,EAAAA,aAAa,cAEhC,MAAA,CAAI,MAAO,CAAE,GAAGJ,GAAqB,gBACrC,SAAAK,EAAAA,IAACY,EAAAA,QAAA,CACA,SAAA/B,EACA,kBAAmBc,GAAqB,iBAAA,CAAA,EAE1C,EAIMK,EAAAA,IAAAQ,EAAAA,SAAA,EAAE,CAEX,EAEMH,EAAS,CACd,gBAAiB,CAChB,gBAAiBJ,EAAAA,OAAO,QAAQ,SAChC,aAAc,EACd,OAAQ,aAAaA,EAAAA,OAAO,WAAW,QAAQ,GAC/C,UAAW,EAAA,CAEb"}

package/dist/cjs/components/thumbnail/Thumbnail.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),e=require("../avatar/AvatarHelper.js"),h=require("./constants.js"),I=require("./Thumbnail.styled.js");var r=(t=>(t.ONE_ONE="ONE_ONE",t.VERTICAL="VERTICAL",t.HORIZONTAL="HORIZONTAL",t))(r||{});const E={VERTICAL:{[e.SIZE.SMALL]:{width:30,height:40},[e.SIZE.MEDIUM]:{width:48,height:64},[e.SIZE.LARGE]:{width:60,height:80}},HORIZONTAL:{[e.SIZE.SMALL]:{width:40,height:30},[e.SIZE.MEDIUM]:{width:64,height:48},[e.SIZE.LARGE]:{width:80,height:60}},ONE_ONE:{}},n=t=>i.jsx(I.ThumbnailStyle,{size:t.size,children:i.jsx("img",{alt:"",width:E[t.ratio][t.size]?.width||h.THUMBNAIL_SIZE_MAP[t.size],height:E[t.ratio][t.size]?.height||h.THUMBNAIL_SIZE_MAP[t.size],style:{borderRadius:t.ratio==="ONE_ONE"?4:0,objectFit:"cover"},src:t.imageUrl})});exports.RATIO=r;exports.Thumbnail=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),e=require("../avatar/AvatarHelper.js"),h=require("./constants.js"),r=require("./Thumbnail.styled.js");var n=(t=>(t.ONE_ONE="ONE_ONE",t.VERTICAL="VERTICAL",t.HORIZONTAL="HORIZONTAL",t))(n||{});const E={VERTICAL:{[e.SIZE.SMALL]:{width:30,height:40},[e.SIZE.MEDIUM]:{width:48,height:64},[e.SIZE.LARGE]:{width:60,height:80}},HORIZONTAL:{[e.SIZE.SMALL]:{width:40,height:30},[e.SIZE.MEDIUM]:{width:64,height:48},[e.SIZE.LARGE]:{width:80,height:60}},ONE_ONE:{}},a=t=>i.jsx(r.ThumbnailStyle,{"data-test":"thumbnail-container",size:t.size,children:i.jsx("img",{alt:"",width:E[t.ratio][t.size]?.width||h.THUMBNAIL_SIZE_MAP[t.size],height:E[t.ratio][t.size]?.height||h.THUMBNAIL_SIZE_MAP[t.size],style:{borderRadius:t.ratio==="ONE_ONE"?4:0,objectFit:"cover"},src:t.imageUrl})});exports.RATIO=n;exports.Thumbnail=a;
 //# sourceMappingURL=Thumbnail.js.map

package/dist/cjs/components/thumbnail/Thumbnail.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Thumbnail.js","sources":["../../../../src/components/thumbnail/Thumbnail.tsx"],"sourcesContent":["import React from 'react';\nimport { SIZE } from '@src/components/avatar/AvatarHelper';\nimport { THUMBNAIL_SIZE_MAP } from '@src/components/thumbnail/constants';\nimport { ThumbnailStyle } from '@src/components/thumbnail/Thumbnail.styled';\n\nexport enum RATIO {\n\tONE_ONE = 'ONE_ONE',\n\tVERTICAL = 'VERTICAL',\n\tHORIZONTAL = 'HORIZONTAL',\n}\n\nconst IMAGE_ASPECT_RATIO = {\n\t[RATIO.VERTICAL]: {\n\t\t[SIZE.SMALL]: { width: 30, height: 40 },\n\t\t[SIZE.MEDIUM]: { width: 48, height: 64 },\n\t\t[SIZE.LARGE]: { width: 60, height: 80 },\n\t},\n\t[RATIO.HORIZONTAL]: {\n\t\t[SIZE.SMALL]: { width: 40, height: 30 },\n\t\t[SIZE.MEDIUM]: { width: 64, height: 48 },\n\t\t[SIZE.LARGE]: { width: 80, height: 60 },\n\t},\n\t[RATIO.ONE_ONE]: {},\n};\n\nexport type ThumbnailProps = {\n\tsize: SIZE;\n\tratio: RATIO;\n\timageUrl: string;\n};\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n\treturn (\n\t\t<ThumbnailStyle size={props.size}>\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={\n\t\t\t\t\tIMAGE_ASPECT_RATIO[props.ratio][props.size]?.width \|\|\n\t\t\t\t\tTHUMBNAIL_SIZE_MAP[props.size]\n\t\t\t\t}\n\t\t\t\theight={\n\t\t\t\t\tIMAGE_ASPECT_RATIO[props.ratio][props.size]?.height \|\|\n\t\t\t\t\tTHUMBNAIL_SIZE_MAP[props.size]\n\t\t\t\t}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props.ratio === RATIO.ONE_ONE ? 4 : 0,\n\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t}}\n\t\t\t\tsrc={props.imageUrl}\n\t\t\t/>\n\t\t</ThumbnailStyle>\n\t);\n};\n"],"names":["RATIO","IMAGE_ASPECT_RATIO","SIZE","Thumbnail","props","~~jsx~~","~~ThumbnailStyle~~","THUMBNAIL_SIZE_MAP"],"mappings":"2NAKO,IAAKA,GAAAA,IACXA,EAAA,QAAU,UACVA,EAAA,SAAW,WACXA,EAAA,WAAa,aAHFA,IAAAA,GAAA,CAAA,CAAA,EAMZ,MAAMC,EAAqB,CACzB,SAAiB,CACjB,CAACC,EAAAA,KAAK,KAAK,EAAG,CAAE,MAAO,GAAI,OAAQ,EAAA,EACnC,CAACA,EAAAA,KAAK,MAAM,EAAG,CAAE,MAAO,GAAI,OAAQ,EAAA,EACpC,CAACA,EAAAA,KAAK,KAAK,EAAG,CAAE,MAAO,GAAI,OAAQ,EAAA,CAAG,EAEtC,WAAmB,CACnB,CAACA,EAAAA,KAAK,KAAK,EAAG,CAAE,MAAO,GAAI,OAAQ,EAAA,EACnC,CAACA,EAAAA,KAAK,MAAM,EAAG,CAAE,MAAO,GAAI,OAAQ,EAAA,EACpC,CAACA,EAAAA,KAAK,KAAK,EAAG,CAAE,MAAO,GAAI,OAAQ,EAAA,CAAG,EAEtC,QAAgB,CAAA,CAClB,EAQaC,EAAuCC,~~GAElDC~~,~~EAAAA~~,~~IAACC~~,~~EAAAA~~,~~eAAA~~,~~CAAe~~,~~KAAMF,~~EAAM,~~KAC3B~~,~~SAAAC~~,EAAAA,IAAC,MAAA,CACA,IAAI,GACJ,~~MACCJ~~,EAAmBG,EAAM,KAAK,EAAEA,EAAM,IAAI,GAAG,OAC7CG,qBAAmBH,EAAM,IAAI,EAE9B,OACCH,EAAmBG,EAAM,KAAK,EAAEA,EAAM,IAAI,GAAG,QAC7CG,qBAAmBH,EAAM,IAAI,EAE9B,MAAO,CACN,aAAcA,EAAM,QAAU,UAAgB,EAAI,EAClD,UAAW,OAAA,EAEZ,IAAKA,EAAM,QAAA,CAAA,EAEb"}
1	+ {"version":3,"file":"Thumbnail.js","sources":["../../../../src/components/thumbnail/Thumbnail.tsx"],"sourcesContent":["import React from 'react';\nimport { SIZE } from '@src/components/avatar/AvatarHelper';\nimport { THUMBNAIL_SIZE_MAP } from '@src/components/thumbnail/constants';\nimport { ThumbnailStyle } from '@src/components/thumbnail/Thumbnail.styled';\n\nexport enum RATIO {\n\tONE_ONE = 'ONE_ONE',\n\tVERTICAL = 'VERTICAL',\n\tHORIZONTAL = 'HORIZONTAL',\n}\n\nconst IMAGE_ASPECT_RATIO = {\n\t[RATIO.VERTICAL]: {\n\t\t[SIZE.SMALL]: { width: 30, height: 40 },\n\t\t[SIZE.MEDIUM]: { width: 48, height: 64 },\n\t\t[SIZE.LARGE]: { width: 60, height: 80 },\n\t},\n\t[RATIO.HORIZONTAL]: {\n\t\t[SIZE.SMALL]: { width: 40, height: 30 },\n\t\t[SIZE.MEDIUM]: { width: 64, height: 48 },\n\t\t[SIZE.LARGE]: { width: 80, height: 60 },\n\t},\n\t[RATIO.ONE_ONE]: {},\n};\n\nexport type ThumbnailProps = {\n\tsize: SIZE;\n\tratio: RATIO;\n\timageUrl: string;\n};\n\nexport const Thumbnail: React.FC<ThumbnailProps> = (props) => {\n\treturn (\n\t\t<ThumbnailStyle data-test=\"thumbnail-container\" size={props.size}>\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={\n\t\t\t\t\tIMAGE_ASPECT_RATIO[props.ratio][props.size]?.width \|\|\n\t\t\t\t\tTHUMBNAIL_SIZE_MAP[props.size]\n\t\t\t\t}\n\t\t\t\theight={\n\t\t\t\t\tIMAGE_ASPECT_RATIO[props.ratio][props.size]?.height \|\|\n\t\t\t\t\tTHUMBNAIL_SIZE_MAP[props.size]\n\t\t\t\t}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props.ratio === RATIO.ONE_ONE ? 4 : 0,\n\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t}}\n\t\t\t\tsrc={props.imageUrl}\n\t\t\t/>\n\t\t</ThumbnailStyle>\n\t);\n};\n"],"names":["RATIO","IMAGE_ASPECT_RATIO","SIZE","Thumbnail","props","ThumbnailStyle","jsx","THUMBNAIL_SIZE_MAP"],"mappings":"2NAKO,IAAKA,GAAAA,IACXA,EAAA,QAAU,UACVA,EAAA,SAAW,WACXA,EAAA,WAAa,aAHFA,IAAAA,GAAA,CAAA,CAAA,EAMZ,MAAMC,EAAqB,CACzB,SAAiB,CACjB,CAACC,EAAAA,KAAK,KAAK,EAAG,CAAE,MAAO,GAAI,OAAQ,EAAA,EACnC,CAACA,EAAAA,KAAK,MAAM,EAAG,CAAE,MAAO,GAAI,OAAQ,EAAA,EACpC,CAACA,EAAAA,KAAK,KAAK,EAAG,CAAE,MAAO,GAAI,OAAQ,EAAA,CAAG,EAEtC,WAAmB,CACnB,CAACA,EAAAA,KAAK,KAAK,EAAG,CAAE,MAAO,GAAI,OAAQ,EAAA,EACnC,CAACA,EAAAA,KAAK,MAAM,EAAG,CAAE,MAAO,GAAI,OAAQ,EAAA,EACpC,CAACA,EAAAA,KAAK,KAAK,EAAG,CAAE,MAAO,GAAI,OAAQ,EAAA,CAAG,EAEtC,QAAgB,CAAA,CAClB,EAQaC,EAAuCC,SAEjDC,iBAAA,CAAe,YAAU,sBAAsB,KAAMD,EAAM,KAC3D,SAAAE,EAAAA,IAAC,MAAA,CACA,IAAI,GACJ,MACCL,EAAmBG,EAAM,KAAK,EAAEA,EAAM,IAAI,GAAG,OAC7CG,qBAAmBH,EAAM,IAAI,EAE9B,OACCH,EAAmBG,EAAM,KAAK,EAAEA,EAAM,IAAI,GAAG,QAC7CG,qBAAmBH,EAAM,IAAI,EAE9B,MAAO,CACN,aAAcA,EAAM,QAAU,UAAgB,EAAI,EAClD,UAAW,OAAA,EAEZ,IAAKA,EAAM,QAAA,CAAA,EAEb"}