npm - @bikdotai/bik-component-library - Versions diffs - 0.0.808-beta.0 → 0.0.809-beta.0 - Mend

@bikdotai/bik-component-library 0.0.808-beta.0 → 0.0.809-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 (1601) hide show

package/dist/cjs/components/WhatsAppTextEditor/WhatsAppTextEditorHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WhatsAppTextEditorHeader.js","sources":["../../../../src/components/WhatsAppTextEditor/WhatsAppTextEditorHeader.tsx"],"sourcesContent":["import styled from '@emotion/styled';\n// import EmojiPicker from 'emoji-picker-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { useOutside } from '@src/hooks/useOutside';\nimport { COLORS } from '@src/constants/Theme';\nimport BoldIcon from '../../assets/icons/bold.svg';\nimport EmojiIcon from '../../assets/icons/emoji.svg';\nimport ItalicIcon from '../../assets/icons/italic.svg';\nimport StrikeThroughIcon from '../../assets/icons/strikeThrough.svg';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport { AIActionToneOption, AIRephraseButton } from './AIRephraseButton';\n\nlet EmojiPicker: any = () => <></>;\nif (typeof window !== 'undefined') {\n\timport('emoji-picker-react').then((_module) => {\n\t\tEmojiPicker = _module.default;\n\t});\n}\n\nconst getIconColor = (isActive: boolean) => {\n\tif (isActive) return COLORS.background.inverseLight;\n\treturn COLORS.content.placeholder;\n};\n\nconst Container = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tdisplay: flex;\n\tflex-direction: row;\n\tpadding: 8px 12px;\n\talign-items: center;\n\tborder-radius: 0 0 4px 4px;\n\tgap: 6px;\n\tposition: relative;\n`;\nexport const CustomRightBorder = styled.div`\n\twidth: 2px;\n\theight: 12px;\n\tbackground: #e0e0e0;\n`;\n\nconst ButtonHolder = styled.div<{ active: boolean; disabled?: boolean }>`\n\tpadding: 2px 6px;\n\tbackground: ${(props) =>\n\t\tprops.active ? COLORS.background.inactive : 'transparent'};\n\tborder-radius: 4px;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\topacity: ${(props) => (props.disabled ? 0.45 : 1)};\n\tdisplay: flex;\n\t:hover {\n\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\tpadding: 3px 6px;\n\t}\n`;\n\nconst CustomRightSideContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 6px;\n\tmargin-left: auto;\n`;\n\nconst EmojiContainer = styled.div`\n\tposition: absolute;\n\ttop: calc(100% + 8px);\n\tz-index: 1;\n`;\n\nconst AIActionsContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tmargin-left: 8px;\n`;\n\nconst AIButtonGroup = styled.div<{ disabled?: boolean }>`\n\tdisplay: flex;\n\talign-items: center;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 14px;\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n`;\n\nconst AIButton = styled.button<{ highlighted: boolean; disabled?: boolean }>`\n\tborder: 0;\n\tbackground: ${(props) =>\n\t\tprops.highlighted ? '#ffe8ef' : COLORS.surface.standard};\n\tcolor: ${(props) =>\n\t\tprops.highlighted ? '#f53f77' : COLORS.content.secondary};\n\tborder-radius: 14px;\n\tpadding: 4px 6px;\n\tfont-size: 12px;\n\tfont-weight: 400;\n\tline-height: 16px;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\t:hover {\n\t\tbackground: ${(props) =>\n\t\t\tprops.disabled ? undefined : COLORS.surface.subdued};\n\t}\n`;\n\nexport enum EditorActionTypes {\n\t'BOLD' = 'BOLD',\n\t'ITALIC' = 'ITALIC',\n\t'STRIKETHROUGH' = 'STRIKETHROUGH',\n\t'EMOJI' = 'EMOJI',\n}\n\nexport enum AIEditorActionTypes {\n\tREPHRASE = 'rephrase',\n\tSHORTEN = 'shorten',\n\tEXPAND = 'expand',\n\tEMOJIFY = 'emojify',\n}\n\nexport type AIEditorActionType = AIEditorActionTypes;\nexport enum AIActionVariant {\n\tDEFAULT = 'default',\n\tREPHRASE = 'rephrase',\n}\n\nexport type AIHeaderAction = {\n\ttype: AIEditorActionType;\n\tlabel: string;\n\tdisabled?: boolean;\n\tloading?: boolean;\n\thighlighted?: boolean;\n\tshowToneDropdown?: boolean;\n\ttones?: AIActionToneOption[];\n\tselectedToneId?: string;\n\tisPrimary?: boolean;\n};\n\n/** Props passed to optional `RightComponent` (e.g. Add variable). /\nexport type WhatsAppEditorRightSlotProps = {\n\t/\n\t True while an AI suggestion session is open (accept/reject) or while the model is generating.\n\t * Host should disable extra actions like “Add variable”.\n\t */\n\trightActionsDisabled?: boolean;\n};\n\nexport type WhatsAppTextEditorHeaderProps = {\n\tonActionSelect: (actionType: EditorActionTypes) => void;\n\tRightComponent?: React.ComponentType<WhatsAppEditorRightSlotProps>;\n\tonEmojiClick?: (emoji: string) => void;\n\tactions?: EditorActionTypes[];\n\taiActions?: AIHeaderAction[];\n\tonAIActionClick?: (\n\t\tactionType: AIEditorActionType,\n\t\tactionVariant?: AIActionVariant,\n\t) => void;\n\tonAIToneChange?: (actionType: AIEditorActionType, toneId: string) => void;\n\tonAIInstructionsClick?: () => void;\n\tinstructionActive?: boolean;\n\tdisableAllActions?: boolean;\n\trightActionsDisabled?: boolean;\n};\n\nexport const WhatsAppTextEditorHeader = React.forwardRef<\n\tHTMLTextAreaElement,\n\tWhatsAppTextEditorHeaderProps\n>(\n\t(\n\t\t{\n\t\t\tonActionSelect,\n\t\t\tRightComponent,\n\t\t\tonEmojiClick,\n\t\t\tactions,\n\t\t\taiActions,\n\t\t\tonAIActionClick,\n\t\t\tonAIToneChange,\n\t\t\tonAIInstructionsClick,\n\t\t\tinstructionActive,\n\t\t\tdisableAllActions,\n\t\t\trightActionsDisabled,\n\t\t},\n\t\t_ref,\n\t) => {\n\t\tvoid _ref;\n\t\tconst emojiPickerRef = useRef(null);\n\t\tconst [active, setActive] = useState({\n\t\t\t[EditorActionTypes.BOLD]: false,\n\t\t\t[EditorActionTypes.ITALIC]: false,\n\t\t\t[EditorActionTypes.STRIKETHROUGH]: false,\n\t\t\t[EditorActionTypes.EMOJI]: false,\n\t\t});\n\n\t\tconst closeEmojiPicker = useCallback(() => {\n\t\t\tsetActive((prev) => {\n\t\t\t\tif (!prev[EditorActionTypes.EMOJI]) {\n\t\t\t\t\treturn prev;\n\t\t\t\t}\n\t\t\t\treturn {\n\t\t\t\t\t...prev,\n\t\t\t\t\t[EditorActionTypes.EMOJI]: false,\n\t\t\t\t};\n\t\t\t});\n\t\t}, []);\n\n\t\tuseOutside(emojiPickerRef, () => {\n\t\t\tcloseEmojiPicker();\n\t\t});\n\n\t\tuseEffect(() => {\n\t\t\tif (disableAllActions) {\n\t\t\t\tsetActive((prev) => {\n\t\t\t\t\tif (!prev[EditorActionTypes.EMOJI]) {\n\t\t\t\t\t\treturn prev;\n\t\t\t\t\t}\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t[EditorActionTypes.EMOJI]: false,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\t\t}, [disableAllActions]);\n\n\t\tfunction handleClick(\n\t\t\te:\n\t\t\t\t\| React.MouseEvent<HTMLDivElement, MouseEvent>\n\t\t\t\t\| React.MouseEvent<SVGElement, MouseEvent>,\n\t\t\ttype: EditorActionTypes,\n\t\t) {\n\t\t\te.preventDefault?.();\n\n\t\t\tif (type === EditorActionTypes.EMOJI) {\n\t\t\t\tif (disableAllActions) return;\n\t\t\t\tsetActive((prev) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t[EditorActionTypes.EMOJI]: !active.EMOJI,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tonActionSelect(type);\n\t\t}\n\n\t\tif (!actions?.length && !RightComponent && !aiActions?.length) return <></>;\n\n\t\treturn (\n\t\t\t<Container>\n\t\t\t\t{actions?.includes(EditorActionTypes.EMOJI) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Emoji'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmarginLeft: 0,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tactive={!!active.EMOJI}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.EMOJI);\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<EmojiIcon\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.EMOJI)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t{active.EMOJI && (\n\t\t\t\t\t\t\t<EmojiContainer ref={emojiPickerRef}>\n\t\t\t\t\t\t\t\t<EmojiPicker\n\t\t\t\t\t\t\t\t\tonEmojiClick={(data) => {\n\t\t\t\t\t\t\t\t\t\tcloseEmojiPicker();\n\t\t\t\t\t\t\t\t\t\tonEmojiClick?.(data.emoji);\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</EmojiContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\n\t\t\t\t{actions?.includes(EditorActionTypes.BOLD) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Bold'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tactive={!!active.BOLD}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.BOLD);\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<BoldIcon\n\t\t\t\t\t\t\t\t\twidth={10}\n\t\t\t\t\t\t\t\t\theight={17}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.BOLD)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{actions?.includes(EditorActionTypes.ITALIC) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Italics'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.ITALIC);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tactive={!!active.ITALIC}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ItalicIcon\n\t\t\t\t\t\t\t\t\twidth={9}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.ITALIC)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{actions?.includes(EditorActionTypes.STRIKETHROUGH) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Strikethrough'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tactive={!!active.STRIKETHROUGH}\n\t\t\t\t\t\t\t\tstyle={{ borderRight: 0 }}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.STRIKETHROUGH);\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<StrikeThroughIcon\n\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.STRIKETHROUGH)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{aiActions?.length ? (\n\t\t\t\t\t<AIActionsContainer>\n\t\t\t\t\t\t{aiActions.map((action) => {\n\t\t\t\t\t\t\tif (action.type === AIEditorActionTypes.REPHRASE) {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<AIRephraseButton\n\t\t\t\t\t\t\t\t\t\tkey={action.type}\n\t\t\t\t\t\t\t\t\t\tlabel={action.label}\n\t\t\t\t\t\t\t\t\t\tdisabled={disableAllActions \|\| action.disabled}\n\t\t\t\t\t\t\t\t\t\tloading={action.loading}\n\t\t\t\t\t\t\t\t\t\thighlighted={action.highlighted}\n\t\t\t\t\t\t\t\t\t\ttones={action.tones}\n\t\t\t\t\t\t\t\t\t\tselectedToneId={action.selectedToneId}\n\t\t\t\t\t\t\t\t\t\tinstructionActive={instructionActive}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIActionClick?.(action.type, AIActionVariant.DEFAULT);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonToneChange={(toneId) => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIToneChange?.(action.type, toneId);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonInstructionsClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIInstructionsClick?.();\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tshowSecondaryRephraseOption={\n\t\t\t\t\t\t\t\t\t\t\taction.label.toLowerCase() === 'meta safe rewrite'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonSecondaryRephraseClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIActionClick?.(action.type, AIActionVariant.REPHRASE);\n\t\t\t\t\t\t\t\t\t\t}}\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}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div key={action.type}>\n\t\t\t\t\t\t\t\t\t<AIButtonGroup\n\t\t\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\t\t\tdisableAllActions \|\| action.disabled \|\| action.loading\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<AIButton\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\thighlighted={!!action.highlighted \|\| !!action.isPrimary}\n\t\t\t\t\t\t\t\t\t\t\tdisabled={action.disabled \|\| action.loading}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\t\tonAIActionClick?.(action.type, AIActionVariant.DEFAULT);\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\t\t{action.loading ? '...' : action.label}\n\t\t\t\t\t\t\t\t\t\t</AIButton>\n\t\t\t\t\t\t\t\t\t</AIButtonGroup>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</AIActionsContainer>\n\t\t\t\t) : null}\n\t\t\t\t<CustomRightSideContainer>\n\t\t\t\t\t{RightComponent && (\n\t\t\t\t\t\t<RightComponent rightActionsDisabled={!!rightActionsDisabled} />\n\t\t\t\t\t)}\n\t\t\t\t</CustomRightSideContainer>\n\t\t\t</Container>\n\t\t);\n\t},\n);\n\nWhatsAppTextEditorHeader.displayName = 'WhatsAppTextEditorHeader';\n"],"names":["EmojiPicker","_jsx","window","Promise","then","_module","default","getIconColor","isActive","COLORS","background","inverseLight","content","placeholder","Container","_styled","process","env","NODE_ENV","target","label","surface","standard","CustomRightBorder","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","ButtonHolder","props","active","inactive","disabled","CustomRightSideContainer","EmojiContainer","AIActionsContainer","AIButtonGroup","stroke","primary","AIButton","highlighted","secondary","undefined","subdued","EditorActionTypes","AIEditorActionTypes","AIActionVariant","WhatsAppTextEditorHeader","React","forwardRef","onActionSelect","RightComponent","onEmojiClick","actions","aiActions","onAIActionClick","onAIToneChange","onAIInstructionsClick","instructionActive","disableAllActions","rightActionsDisabled","_ref","emojiPickerRef","useRef","setActive","useState","BOLD","ITALIC","STRIKETHROUGH","EMOJI","closeEmojiPicker","useCallback","prev","Object","assign","handleClick","e","type","_a","preventDefault","call","useOutside","useEffect","length","_jsxs","children","includes","jsx","Tooltip","body","placement","style","marginLeft","onClick","EmojiIcon","width","height","color","ref","data","emoji","_Fragment","BoldIcon","ItalicIcon","borderRight","StrikeThroughIcon","action","REPHRASE","AIRephraseButton","loading","tones","selectedToneId","DEFAULT","onToneChange","toneId","onInstructionsClick","showSecondaryRephraseOption","toLowerCase","onSecondaryRephraseClick","isPrimary","displayName"],"mappings":"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"}
1	+ {"version":3,"file":"WhatsAppTextEditorHeader.js","sources":["../../../../src/components/WhatsAppTextEditor/WhatsAppTextEditorHeader.tsx"],"sourcesContent":["import styled from '@emotion/styled';\n// import EmojiPicker from 'emoji-picker-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { useOutside } from '@src/hooks/useOutside';\nimport { COLORS } from '@src/constants/Theme';\nimport BoldIcon from '../../assets/icons/bold.svg';\nimport EmojiIcon from '../../assets/icons/emoji.svg';\nimport ItalicIcon from '../../assets/icons/italic.svg';\nimport StrikeThroughIcon from '../../assets/icons/strikeThrough.svg';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport { AIActionToneOption, AIRephraseButton } from './AIRephraseButton';\n\nlet EmojiPicker: any = () => <></>;\nif (typeof window !== 'undefined') {\n\timport('emoji-picker-react').then((_module) => {\n\t\tEmojiPicker = _module.default;\n\t});\n}\n\nconst getIconColor = (isActive: boolean) => {\n\tif (isActive) return COLORS.background.inverseLight;\n\treturn COLORS.content.placeholder;\n};\n\nconst Container = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tdisplay: flex;\n\tflex-direction: row;\n\tpadding: 8px 12px;\n\talign-items: center;\n\tborder-radius: 0 0 4px 4px;\n\tgap: 6px;\n\tposition: relative;\n`;\nexport const CustomRightBorder = styled.div`\n\twidth: 2px;\n\theight: 12px;\n\tbackground: #e0e0e0;\n`;\n\nconst ButtonHolder = styled.div<{ active: boolean; disabled?: boolean }>`\n\tpadding: 2px 6px;\n\tbackground: ${(props) =>\n\t\tprops.active ? COLORS.background.inactive : 'transparent'};\n\tborder-radius: 4px;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\topacity: ${(props) => (props.disabled ? 0.45 : 1)};\n\tdisplay: flex;\n\t:hover {\n\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\tpadding: 3px 6px;\n\t}\n`;\n\nconst CustomRightSideContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 6px;\n\tmargin-left: auto;\n`;\n\nconst EmojiContainer = styled.div`\n\tposition: absolute;\n\ttop: calc(100% + 8px);\n\tz-index: 1;\n`;\n\nconst AIActionsContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tmargin-left: 8px;\n`;\n\nconst AIButtonGroup = styled.div<{ disabled?: boolean }>`\n\tdisplay: flex;\n\talign-items: center;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 14px;\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n`;\n\nconst AIButton = styled.button<{ highlighted: boolean; disabled?: boolean }>`\n\tborder: 0;\n\tbackground: ${(props) =>\n\t\tprops.highlighted ? '#ffe8ef' : COLORS.surface.standard};\n\tcolor: ${(props) =>\n\t\tprops.highlighted ? '#f53f77' : COLORS.content.secondary};\n\tborder-radius: 14px;\n\tpadding: 4px 6px;\n\tfont-size: 12px;\n\tfont-weight: 400;\n\tline-height: 16px;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\t:hover {\n\t\tbackground: ${(props) =>\n\t\t\tprops.disabled ? undefined : COLORS.surface.subdued};\n\t}\n`;\n\nexport enum EditorActionTypes {\n\t'BOLD' = 'BOLD',\n\t'ITALIC' = 'ITALIC',\n\t'STRIKETHROUGH' = 'STRIKETHROUGH',\n\t'EMOJI' = 'EMOJI',\n}\n\nexport enum AIEditorActionTypes {\n\tREPHRASE = 'rephrase',\n\tSHORTEN = 'shorten',\n\tEXPAND = 'expand',\n\tEMOJIFY = 'emojify',\n}\n\nexport type AIEditorActionType = AIEditorActionTypes;\nexport enum AIActionVariant {\n\tDEFAULT = 'default',\n\tREPHRASE = 'rephrase',\n}\n\nexport type AIHeaderAction = {\n\ttype: AIEditorActionType;\n\tlabel: string;\n\tdisabled?: boolean;\n\tloading?: boolean;\n\thighlighted?: boolean;\n\tshowToneDropdown?: boolean;\n\ttones?: AIActionToneOption[];\n\tselectedToneId?: string;\n\tisPrimary?: boolean;\n};\n\n/** Props passed to optional `RightComponent` (e.g. Add variable). /\nexport type WhatsAppEditorRightSlotProps = {\n\t/\n\t True while an AI suggestion session is open (accept/reject) or while the model is generating.\n\t * Host should disable extra actions like “Add variable”.\n\t */\n\trightActionsDisabled?: boolean;\n};\n\nexport type WhatsAppTextEditorHeaderProps = {\n\tonActionSelect: (actionType: EditorActionTypes) => void;\n\tRightComponent?: React.ComponentType<WhatsAppEditorRightSlotProps>;\n\tonEmojiClick?: (emoji: string) => void;\n\tactions?: EditorActionTypes[];\n\taiActions?: AIHeaderAction[];\n\tonAIActionClick?: (\n\t\tactionType: AIEditorActionType,\n\t\tactionVariant?: AIActionVariant,\n\t) => void;\n\tonAIToneChange?: (actionType: AIEditorActionType, toneId: string) => void;\n\tonAIInstructionsClick?: () => void;\n\tinstructionActive?: boolean;\n\tdisableAllActions?: boolean;\n\trightActionsDisabled?: boolean;\n};\n\nexport const WhatsAppTextEditorHeader = React.forwardRef<\n\tHTMLTextAreaElement,\n\tWhatsAppTextEditorHeaderProps\n>(\n\t(\n\t\t{\n\t\t\tonActionSelect,\n\t\t\tRightComponent,\n\t\t\tonEmojiClick,\n\t\t\tactions,\n\t\t\taiActions,\n\t\t\tonAIActionClick,\n\t\t\tonAIToneChange,\n\t\t\tonAIInstructionsClick,\n\t\t\tinstructionActive,\n\t\t\tdisableAllActions,\n\t\t\trightActionsDisabled,\n\t\t},\n\t\t_ref,\n\t) => {\n\t\tvoid _ref;\n\t\tconst emojiPickerRef = useRef(null);\n\t\tconst [active, setActive] = useState({\n\t\t\t[EditorActionTypes.BOLD]: false,\n\t\t\t[EditorActionTypes.ITALIC]: false,\n\t\t\t[EditorActionTypes.STRIKETHROUGH]: false,\n\t\t\t[EditorActionTypes.EMOJI]: false,\n\t\t});\n\n\t\tconst closeEmojiPicker = useCallback(() => {\n\t\t\tsetActive((prev) => {\n\t\t\t\tif (!prev[EditorActionTypes.EMOJI]) {\n\t\t\t\t\treturn prev;\n\t\t\t\t}\n\t\t\t\treturn {\n\t\t\t\t\t...prev,\n\t\t\t\t\t[EditorActionTypes.EMOJI]: false,\n\t\t\t\t};\n\t\t\t});\n\t\t}, []);\n\n\t\tuseOutside(emojiPickerRef, () => {\n\t\t\tcloseEmojiPicker();\n\t\t});\n\n\t\tuseEffect(() => {\n\t\t\tif (disableAllActions) {\n\t\t\t\tsetActive((prev) => {\n\t\t\t\t\tif (!prev[EditorActionTypes.EMOJI]) {\n\t\t\t\t\t\treturn prev;\n\t\t\t\t\t}\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t[EditorActionTypes.EMOJI]: false,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\t\t}, [disableAllActions]);\n\n\t\tfunction handleClick(\n\t\t\te:\n\t\t\t\t\| React.MouseEvent<HTMLDivElement, MouseEvent>\n\t\t\t\t\| React.MouseEvent<SVGElement, MouseEvent>,\n\t\t\ttype: EditorActionTypes,\n\t\t) {\n\t\t\te.preventDefault?.();\n\n\t\t\tif (type === EditorActionTypes.EMOJI) {\n\t\t\t\tif (disableAllActions) return;\n\t\t\t\tsetActive((prev) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t[EditorActionTypes.EMOJI]: !active.EMOJI,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tonActionSelect(type);\n\t\t}\n\n\t\tif (!actions?.length && !RightComponent && !aiActions?.length) return <></>;\n\n\t\treturn (\n\t\t\t<Container>\n\t\t\t\t{actions?.includes(EditorActionTypes.EMOJI) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Emoji'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmarginLeft: 0,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tactive={!!active.EMOJI}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.EMOJI);\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<EmojiIcon\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.EMOJI)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t{active.EMOJI && (\n\t\t\t\t\t\t\t<EmojiContainer ref={emojiPickerRef}>\n\t\t\t\t\t\t\t\t<EmojiPicker\n\t\t\t\t\t\t\t\t\tonEmojiClick={(data) => {\n\t\t\t\t\t\t\t\t\t\tcloseEmojiPicker();\n\t\t\t\t\t\t\t\t\t\tonEmojiClick?.(data.emoji);\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</EmojiContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\n\t\t\t\t{actions?.includes(EditorActionTypes.BOLD) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Bold'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tactive={!!active.BOLD}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.BOLD);\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<BoldIcon\n\t\t\t\t\t\t\t\t\twidth={10}\n\t\t\t\t\t\t\t\t\theight={17}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.BOLD)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{actions?.includes(EditorActionTypes.ITALIC) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Italics'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.ITALIC);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tactive={!!active.ITALIC}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ItalicIcon\n\t\t\t\t\t\t\t\t\twidth={9}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.ITALIC)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{actions?.includes(EditorActionTypes.STRIKETHROUGH) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Strikethrough'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tactive={!!active.STRIKETHROUGH}\n\t\t\t\t\t\t\t\tstyle={{ borderRight: 0 }}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.STRIKETHROUGH);\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<StrikeThroughIcon\n\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.STRIKETHROUGH)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{aiActions?.length ? (\n\t\t\t\t\t<AIActionsContainer>\n\t\t\t\t\t\t{aiActions.map((action) => {\n\t\t\t\t\t\t\tif (action.type === AIEditorActionTypes.REPHRASE) {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<AIRephraseButton\n\t\t\t\t\t\t\t\t\t\tkey={action.type}\n\t\t\t\t\t\t\t\t\t\tlabel={action.label}\n\t\t\t\t\t\t\t\t\t\tdisabled={disableAllActions \|\| action.disabled}\n\t\t\t\t\t\t\t\t\t\tloading={action.loading}\n\t\t\t\t\t\t\t\t\t\thighlighted={action.highlighted}\n\t\t\t\t\t\t\t\t\t\ttones={action.tones}\n\t\t\t\t\t\t\t\t\t\tselectedToneId={action.selectedToneId}\n\t\t\t\t\t\t\t\t\t\tinstructionActive={instructionActive}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIActionClick?.(action.type, AIActionVariant.DEFAULT);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonToneChange={(toneId) => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIToneChange?.(action.type, toneId);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonInstructionsClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIInstructionsClick?.();\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tshowSecondaryRephraseOption={\n\t\t\t\t\t\t\t\t\t\t\taction.label.toLowerCase() === 'meta safe rewrite'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonSecondaryRephraseClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIActionClick?.(action.type, AIActionVariant.REPHRASE);\n\t\t\t\t\t\t\t\t\t\t}}\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}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div key={action.type}>\n\t\t\t\t\t\t\t\t\t<AIButtonGroup\n\t\t\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\t\t\tdisableAllActions \|\| action.disabled \|\| action.loading\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<AIButton\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\thighlighted={!!action.highlighted \|\| !!action.isPrimary}\n\t\t\t\t\t\t\t\t\t\t\tdisabled={action.disabled \|\| action.loading}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\t\tonAIActionClick?.(action.type, AIActionVariant.DEFAULT);\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\t\t{action.loading ? '...' : action.label}\n\t\t\t\t\t\t\t\t\t\t</AIButton>\n\t\t\t\t\t\t\t\t\t</AIButtonGroup>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</AIActionsContainer>\n\t\t\t\t) : null}\n\t\t\t\t<CustomRightSideContainer>\n\t\t\t\t\t{RightComponent && (\n\t\t\t\t\t\t<RightComponent rightActionsDisabled={!!rightActionsDisabled} />\n\t\t\t\t\t)}\n\t\t\t\t</CustomRightSideContainer>\n\t\t\t</Container>\n\t\t);\n\t},\n);\n\nWhatsAppTextEditorHeader.displayName = 'WhatsAppTextEditorHeader';\n"],"names":["EmojiPicker","_jsx","window","Promise","then","_module","default","getIconColor","isActive","COLORS","background","inverseLight","content","placeholder","Container","_styled","process","env","NODE_ENV","target","label","surface","standard","CustomRightBorder","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","ButtonHolder","props","active","inactive","disabled","CustomRightSideContainer","EmojiContainer","AIActionsContainer","AIButtonGroup","stroke","primary","AIButton","highlighted","secondary","undefined","subdued","EditorActionTypes","AIEditorActionTypes","AIActionVariant","WhatsAppTextEditorHeader","React","forwardRef","_ref2","_ref","onActionSelect","RightComponent","onEmojiClick","actions","aiActions","onAIActionClick","onAIToneChange","onAIInstructionsClick","instructionActive","disableAllActions","rightActionsDisabled","emojiPickerRef","useRef","setActive","useState","BOLD","ITALIC","STRIKETHROUGH","EMOJI","closeEmojiPicker","useCallback","prev","Object","assign","handleClick","e","type","_a","preventDefault","call","useOutside","useEffect","length","_jsxs","children","includes","jsx","Tooltip","body","placement","style","marginLeft","onClick","EmojiIcon","width","height","color","ref","data","emoji","_Fragment","BoldIcon","ItalicIcon","borderRight","StrikeThroughIcon","action","REPHRASE","AIRephraseButton","loading","tones","selectedToneId","DEFAULT","onToneChange","toneId","onInstructionsClick","showSecondaryRephraseOption","toLowerCase","onSecondaryRephraseClick","isPrimary","displayName"],"mappings":"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"}

package/dist/cjs/components/access-token-troubleshoot-dialog/AccessTokenTroubleshootDialog.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/alert.svg.js"),s=require("../../constants/Theme.js"),n=require("../modals/styledModal.js"),l=require("../TypographyStyle.js"),o=require("./AccessTokenTroubleshootDialog.styles.js");const r=({info:t,hideBullet:s,last:n})=>e.jsxs(o.EachStep,Object.assign({last:n},{children:[!s&&e.jsx(o.BulletWrapper,{children:e.jsx(o.Bullet,{})}),e.jsx(l.BodyCaption,{dangerouslySetInnerHTML:{__html:t}})]}));exports.AccessTokenTroubleshootDialog=({onCancel:i,titleIconContainerStyles:a,isModalOpen:c,title:d,desc:h,primaryButton:j,TitleIcon:u,stepsDetails:y,titleIconColor:x,secondaryButtonText:p,content:g})=>e.jsxs(n.StyledModal,Object.assign({open:!!c,primaryButton:j?Object.assign({},j):void 0,secondaryButton:{buttonText:null!=p?p:"Cancel",onClick:i,buttonType:"tertiaryGray"},onClose:i},{children:[e.jsxs(o.Header,{children:[e.jsx(o.IconContainer,Object.assign({style:Object.assign({},a)},{children:u?e.jsx(u,{width:18,height:18,color:x}):e.jsx(t.default,{width:18,height:18,color:s.COLORS.content.negative})})),e.jsx(l.TitleMedium,{children:d})]}),e.jsx(o.Description,{children:e.jsx(l.BodySecondary,{dangerouslySetInnerHTML:{__html:h}})}),e.jsxs(o.StepsContainer,{children:[y&&!!y.length&&e.jsxs(e.Fragment,{children:[e.jsx(l.TitleSmall,{children:"Follow the steps:"}),y.map(((t,s)=>e.jsx(r,{info:t.info,hideBullet:t.hideBullet,last:y.length-1===s},s)))]}),g&&e.jsx(l.BodySecondary,{dangerouslySetInnerHTML:{__html:g}})]})]}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/alert.svg.js"),s=require("../../constants/Theme.js"),n=require("../modals/styledModal.js"),l=require("../TypographyStyle.js"),o=require("./AccessTokenTroubleshootDialog.styles.js");const r=t=>{let{info:s,hideBullet:n,last:r}=t;return e.jsxs(o.EachStep,Object.assign({last:r},{children:[!n&&e.jsx(o.BulletWrapper,{children:e.jsx(o.Bullet,{})}),e.jsx(l.BodyCaption,{dangerouslySetInnerHTML:{__html:s}})]}))};exports.AccessTokenTroubleshootDialog=i=>{let{onCancel:a,titleIconContainerStyles:c,isModalOpen:d,title:u,desc:h,primaryButton:j,TitleIcon:y,stepsDetails:x,titleIconColor:p,secondaryButtonText:g,content:T}=i;return e.jsxs(n.StyledModal,Object.assign({open:!!d,primaryButton:j?Object.assign({},j):void 0,secondaryButton:{buttonText:null!=g?g:"Cancel",onClick:a,buttonType:"tertiaryGray"},onClose:a},{children:[e.jsxs(o.Header,{children:[e.jsx(o.IconContainer,Object.assign({style:Object.assign({},c)},{children:y?e.jsx(y,{width:18,height:18,color:p}):e.jsx(t.default,{width:18,height:18,color:s.COLORS.content.negative})})),e.jsx(l.TitleMedium,{children:u})]}),e.jsx(o.Description,{children:e.jsx(l.BodySecondary,{dangerouslySetInnerHTML:{__html:h}})}),e.jsxs(o.StepsContainer,{children:[x&&!!x.length&&e.jsxs(e.Fragment,{children:[e.jsx(l.TitleSmall,{children:"Follow the steps:"}),x.map(((t,s)=>e.jsx(r,{info:t.info,hideBullet:t.hideBullet,last:x.length-1===s},s)))]}),T&&e.jsx(l.BodySecondary,{dangerouslySetInnerHTML:{__html:T}})]})]}))};
 //# sourceMappingURL=AccessTokenTroubleshootDialog.js.map

package/dist/cjs/components/access-token-troubleshoot-dialog/AccessTokenTroubleshootDialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AccessTokenTroubleshootDialog.js","sources":["../../../../src/components/access-token-troubleshoot-dialog/AccessTokenTroubleshootDialog.tsx"],"sourcesContent":["import AlertIcon from '@src/assets/icons/alert.svg';\nimport React, { CSSProperties } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { ButtonProps } from '../button/model';\nimport { StyledModal } from '../modals';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleMedium,\n\tTitleSmall,\n} from '../TypographyStyle';\nimport {\n\tBullet,\n\tBulletWrapper,\n\tDescription,\n\tEachStep,\n\tHeader,\n\tIconContainer,\n\tStepsContainer,\n} from './AccessTokenTroubleshootDialog.styles';\n\nexport interface StepsDetails {\n\tinfo: string;\n\thideBullet?: boolean;\n}\n\nconst Step: React.FC<{\n\tinfo: string;\n\thideBullet?: boolean;\n\tlast?: boolean;\n}> = ({ info, hideBullet, last }) => {\n\treturn (\n\t\t<EachStep last={last}>\n\t\t\t{!hideBullet && (\n\t\t\t\t<BulletWrapper>\n\t\t\t\t\t<Bullet />\n\t\t\t\t</BulletWrapper>\n\t\t\t)}\n\t\t\t<BodyCaption dangerouslySetInnerHTML={{ __html: info }} />\n\t\t</EachStep>\n\t);\n};\n\nexport const AccessTokenTroubleshootDialog: React.FC<{\n\tonCancel: () => void;\n\ttitleIconContainerStyles?: CSSProperties;\n\ttitle: string;\n\tTitleIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tdesc: string;\n\tprimaryButton: ButtonProps \| undefined;\n\tisModalOpen: boolean;\n\tstepsDetails?: StepsDetails[];\n\ttitleIconColor?: string;\n\tcontent?: string;\n\tsecondaryButtonText?: string;\n}> = ({\n\tonCancel,\n\ttitleIconContainerStyles,\n\tisModalOpen,\n\ttitle,\n\tdesc,\n\tprimaryButton,\n\tTitleIcon,\n\tstepsDetails,\n\ttitleIconColor,\n\tsecondaryButtonText,\n\tcontent,\n}) => {\n\treturn (\n\t\t<StyledModal\n\t\t\topen={!!isModalOpen}\n\t\t\tprimaryButton={\n\t\t\t\tprimaryButton\n\t\t\t\t\t? {\n\t\t\t\t\t\t\t...primaryButton,\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tsecondaryButton={{\n\t\t\t\tbuttonText: secondaryButtonText ?? 'Cancel',\n\t\t\t\tonClick: onCancel,\n\t\t\t\tbuttonType: 'tertiaryGray',\n\t\t\t}}\n\t\t\tonClose={onCancel}\n\t\t>\n\t\t\t<Header>\n\t\t\t\t<IconContainer style={{ ...titleIconContainerStyles }}>\n\t\t\t\t\t{TitleIcon ? (\n\t\t\t\t\t\t<TitleIcon width={18} height={18} color={titleIconColor} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<AlertIcon width={18} height={18} color={COLORS.content.negative} />\n\t\t\t\t\t)}\n\t\t\t\t</IconContainer>\n\t\t\t\t<TitleMedium>{title}</TitleMedium>\n\t\t\t</Header>\n\t\t\t<Description>\n\t\t\t\t<BodySecondary dangerouslySetInnerHTML={{ __html: desc }} />\n\t\t\t</Description>\n\t\t\t<StepsContainer>\n\t\t\t\t{stepsDetails && !!stepsDetails.length && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<TitleSmall>Follow the steps:</TitleSmall>\n\t\t\t\t\t\t{stepsDetails.map((step, ind) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Step\n\t\t\t\t\t\t\t\t\tkey={ind}\n\t\t\t\t\t\t\t\t\tinfo={step.info}\n\t\t\t\t\t\t\t\t\thideBullet={step.hideBullet}\n\t\t\t\t\t\t\t\t\tlast={stepsDetails.length - 1 === ind}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{content && (\n\t\t\t\t\t<BodySecondary dangerouslySetInnerHTML={{ __html: content }} />\n\t\t\t\t)}\n\t\t\t</StepsContainer>\n\t\t</StyledModal>\n\t);\n};\n"],"names":["Step","info","hideBullet","last","_jsxs","EachStep","Object","assign","children","_jsx","BulletWrapper","Bullet","jsx","BodyCaption","dangerouslySetInnerHTML","__html","~~AccessTokenTroubleshootDialog~~","onCancel","titleIconContainerStyles","isModalOpen","title","desc","primaryButton","TitleIcon","stepsDetails","titleIconColor","secondaryButtonText","content","StyledModal","open","undefined","secondaryButton","buttonText","onClick","buttonType","onClose","jsxs","Header","IconContainer","style","width","height","color","AlertIcon","COLORS","negative","TitleMedium","Description","BodySecondary","StepsContainer","length","_Fragment","TitleSmall","map","step","ind"],"mappings":"0TA0BA,MAAMA,~~EAIDA~~,~~EAAGC~~,~~OAAMC~~,~~aAAYC~~,~~UAExBC~~,OAACC,EAAAA,SAAQC,OAAAC,OAAA,CAACJ,KAAMA,GACd,CAAAK,SAAA,EAACN,GACDO,EAAAA,IAACC,EAAAA,wBACAD,EAAAA,IAACE,EAAMA,OAAG,MAGZF,EAACG,IAAAC,eAAYC,wBAAyB,CAAEC,OAAQd~~,+CAiB9Ce~~,~~EACJC~~,~~WACAC~~,~~2BACAC~~,~~cACAC~~,~~QACAC~~,~~OACAC~~,~~gBACAC~~,~~YACAC~~,~~eACAC~~,~~iBACAC~~,~~sBACAC~~,~~aAGCvB~~,OAACwB,EAAAA,YAAWtB,OAAAC,OAAA,CACXsB,OAAQV,EACRG,cACCA,EACEhB,OAAAC,OAAA,CAAA,EACIe,QAEHQ,EAEJC,gBAAiB,CAChBC,WAAYN,QAAAA,EAAuB,SACnCO,QAAShB,EACTiB,WAAY,gBAEbC,QAASlB,GAET,CAAAT,SAAA,CAAAJ,EAAAgC,KAACC,SACA,CAAA7B,SAAA,CAAAC,EAAAG,IAAC0B,gBAAahC,OAAAC,OAAA,CAACgC,MAAKjC,OAAAC,OAAA,CAAA,EAAOW,IACzB,CAAAV,SAAAe,EACAd,MAACc,EAAS,CAACiB,MAAO,GAAIC,OAAQ,GAAIC,MAAOjB,IAEzChB,EAAAG,IAAC+B,UAAU,CAAAH,MAAO,GAAIC,OAAQ,GAAIC,MAAOE,EAAAA,OAAOjB,QAAQkB,cAG1DpC,EAAAG,IAACkC,cAAa,CAAAtC,SAAAY,OAEfX,EAAAG,IAACmC,cACA,CAAAvC,SAAAC,EAAAG,IAACoC,gBAAa,CAAClC,wBAAyB,CAAEC,OAAQM,OAEnDjB,EAACgC,KAAAa,iBACC,CAAAzC,SAAA,CAAAgB,KAAkBA,EAAa0B,QAC/B9C,EAAAgC,KAAAe,WAAA,CAAA3C,SAAA,CACCC,MAAC2C,aAAU,CAAA5C,SAAA,sBACVgB,EAAa6B,KAAI,CAACC,EAAMC,IAEvB9C,EAAAA,~~IAACT~~,EAAI,~~CAEJC~~,KAAMqD,EAAKrD,KACXC,WAAYoD,EAAKpD,WACjBC,KAAMqB,EAAa0B,OAAS,IAAMK,GAH7BA,QAST5B,GACAlB,EAACG,IAAAoC,gBAAc,CAAAlC,wBAAyB,CAAEC,OAAQY"}
1	+ {"version":3,"file":"AccessTokenTroubleshootDialog.js","sources":["../../../../src/components/access-token-troubleshoot-dialog/AccessTokenTroubleshootDialog.tsx"],"sourcesContent":["import AlertIcon from '@src/assets/icons/alert.svg';\nimport React, { CSSProperties } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { ButtonProps } from '../button/model';\nimport { StyledModal } from '../modals';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleMedium,\n\tTitleSmall,\n} from '../TypographyStyle';\nimport {\n\tBullet,\n\tBulletWrapper,\n\tDescription,\n\tEachStep,\n\tHeader,\n\tIconContainer,\n\tStepsContainer,\n} from './AccessTokenTroubleshootDialog.styles';\n\nexport interface StepsDetails {\n\tinfo: string;\n\thideBullet?: boolean;\n}\n\nconst Step: React.FC<{\n\tinfo: string;\n\thideBullet?: boolean;\n\tlast?: boolean;\n}> = ({ info, hideBullet, last }) => {\n\treturn (\n\t\t<EachStep last={last}>\n\t\t\t{!hideBullet && (\n\t\t\t\t<BulletWrapper>\n\t\t\t\t\t<Bullet />\n\t\t\t\t</BulletWrapper>\n\t\t\t)}\n\t\t\t<BodyCaption dangerouslySetInnerHTML={{ __html: info }} />\n\t\t</EachStep>\n\t);\n};\n\nexport const AccessTokenTroubleshootDialog: React.FC<{\n\tonCancel: () => void;\n\ttitleIconContainerStyles?: CSSProperties;\n\ttitle: string;\n\tTitleIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tdesc: string;\n\tprimaryButton: ButtonProps \| undefined;\n\tisModalOpen: boolean;\n\tstepsDetails?: StepsDetails[];\n\ttitleIconColor?: string;\n\tcontent?: string;\n\tsecondaryButtonText?: string;\n}> = ({\n\tonCancel,\n\ttitleIconContainerStyles,\n\tisModalOpen,\n\ttitle,\n\tdesc,\n\tprimaryButton,\n\tTitleIcon,\n\tstepsDetails,\n\ttitleIconColor,\n\tsecondaryButtonText,\n\tcontent,\n}) => {\n\treturn (\n\t\t<StyledModal\n\t\t\topen={!!isModalOpen}\n\t\t\tprimaryButton={\n\t\t\t\tprimaryButton\n\t\t\t\t\t? {\n\t\t\t\t\t\t\t...primaryButton,\n\t\t\t\t\t }\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\tsecondaryButton={{\n\t\t\t\tbuttonText: secondaryButtonText ?? 'Cancel',\n\t\t\t\tonClick: onCancel,\n\t\t\t\tbuttonType: 'tertiaryGray',\n\t\t\t}}\n\t\t\tonClose={onCancel}\n\t\t>\n\t\t\t<Header>\n\t\t\t\t<IconContainer style={{ ...titleIconContainerStyles }}>\n\t\t\t\t\t{TitleIcon ? (\n\t\t\t\t\t\t<TitleIcon width={18} height={18} color={titleIconColor} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<AlertIcon width={18} height={18} color={COLORS.content.negative} />\n\t\t\t\t\t)}\n\t\t\t\t</IconContainer>\n\t\t\t\t<TitleMedium>{title}</TitleMedium>\n\t\t\t</Header>\n\t\t\t<Description>\n\t\t\t\t<BodySecondary dangerouslySetInnerHTML={{ __html: desc }} />\n\t\t\t</Description>\n\t\t\t<StepsContainer>\n\t\t\t\t{stepsDetails && !!stepsDetails.length && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<TitleSmall>Follow the steps:</TitleSmall>\n\t\t\t\t\t\t{stepsDetails.map((step, ind) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Step\n\t\t\t\t\t\t\t\t\tkey={ind}\n\t\t\t\t\t\t\t\t\tinfo={step.info}\n\t\t\t\t\t\t\t\t\thideBullet={step.hideBullet}\n\t\t\t\t\t\t\t\t\tlast={stepsDetails.length - 1 === ind}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{content && (\n\t\t\t\t\t<BodySecondary dangerouslySetInnerHTML={{ __html: content }} />\n\t\t\t\t)}\n\t\t\t</StepsContainer>\n\t\t</StyledModal>\n\t);\n};\n"],"names":["Step","_ref","info","hideBullet","last","_jsxs","EachStep","Object","assign","children","_jsx","BulletWrapper","Bullet","jsx","BodyCaption","dangerouslySetInnerHTML","__html","_ref2","onCancel","titleIconContainerStyles","isModalOpen","title","desc","primaryButton","TitleIcon","stepsDetails","titleIconColor","secondaryButtonText","content","StyledModal","open","undefined","secondaryButton","buttonText","onClick","buttonType","onClose","jsxs","Header","IconContainer","style","width","height","color","AlertIcon","COLORS","negative","TitleMedium","Description","BodySecondary","StepsContainer","length","_Fragment","TitleSmall","map","step","ind"],"mappings":"0TA0BA,MAAMA,EAIDC,IAA+B,IAA9BC,KAAEA,EAAIC,WAAEA,EAAUC,KAAEA,GAAMH,EAC/B,OACCI,OAACC,EAAAA,SAAQC,OAAAC,OAAA,CAACJ,KAAMA,GACd,CAAAK,SAAA,EAACN,GACDO,EAAAA,IAACC,EAAAA,wBACAD,EAAAA,IAACE,EAAMA,OAAG,MAGZF,EAACG,IAAAC,eAAYC,wBAAyB,CAAEC,OAAQd,QACtC,wCAgBRe,IAYA,IAZCC,SACLA,EAAQC,yBACRA,EAAwBC,YACxBA,EAAWC,MACXA,EAAKC,KACLA,EAAIC,cACJA,EAAaC,UACbA,EAASC,aACTA,EAAYC,eACZA,EAAcC,oBACdA,EAAmBC,QACnBA,GACAX,EACA,OACCZ,OAACwB,EAAAA,YAAWtB,OAAAC,OAAA,CACXsB,OAAQV,EACRG,cACCA,EACEhB,OAAAC,OAAA,CAAA,EACIe,QAEHQ,EAEJC,gBAAiB,CAChBC,WAAYN,QAAAA,EAAuB,SACnCO,QAAShB,EACTiB,WAAY,gBAEbC,QAASlB,GAET,CAAAT,SAAA,CAAAJ,EAAAgC,KAACC,SACA,CAAA7B,SAAA,CAAAC,EAAAG,IAAC0B,gBAAahC,OAAAC,OAAA,CAACgC,MAAKjC,OAAAC,OAAA,CAAA,EAAOW,IACzB,CAAAV,SAAAe,EACAd,MAACc,EAAS,CAACiB,MAAO,GAAIC,OAAQ,GAAIC,MAAOjB,IAEzChB,EAAAG,IAAC+B,UAAU,CAAAH,MAAO,GAAIC,OAAQ,GAAIC,MAAOE,EAAAA,OAAOjB,QAAQkB,cAG1DpC,EAAAG,IAACkC,cAAa,CAAAtC,SAAAY,OAEfX,EAAAG,IAACmC,cACA,CAAAvC,SAAAC,EAAAG,IAACoC,gBAAa,CAAClC,wBAAyB,CAAEC,OAAQM,OAEnDjB,EAACgC,KAAAa,iBACC,CAAAzC,SAAA,CAAAgB,KAAkBA,EAAa0B,QAC/B9C,EAAAgC,KAAAe,WAAA,CAAA3C,SAAA,CACCC,MAAC2C,aAAU,CAAA5C,SAAA,sBACVgB,EAAa6B,KAAI,CAACC,EAAMC,IAEvB9C,EAAAA,IAACV,EAAI,CAEJE,KAAMqD,EAAKrD,KACXC,WAAYoD,EAAKpD,WACjBC,KAAMqB,EAAa0B,OAAS,IAAMK,GAH7BA,QAST5B,GACAlB,EAACG,IAAAoC,gBAAc,CAAAlC,wBAAyB,CAAEC,OAAQY,WAGvC"}

package/dist/cjs/components/accordion/Accordion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.js","sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import React, { LegacyRef, useEffect, useRef, useState } from 'react';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { Button } from '../button';\nimport { IconButton } from '../icon-button';\nimport { AccordionProps } from './Accordion.model';\nimport AccordionStyle, {\n\tAccordionHeaderGroup,\n\tAccordionHeaderGroup2,\n} from './Accordion.style';\nimport BikAccordionArrow from './AccordionArrow';\n\nexport const BikAccordion: React.FC<AccordionProps> = (props) => {\n\tconst [isActive, setIsActive] = useState<boolean>(false);\n\tconst accordionArrowRef = useRef<HTMLDivElement>(null);\n\tconst accordionContentRef = useRef<HTMLDivElement>(null);\n\n\tuseEffect(() => {\n\t\tif (props.autoOpen) {\n\t\t\ttoggleAccordion(props.autoOpen, {});\n\t\t}\n\t}, [props.autoOpen]);\n\n\t// Listen to changes in the isOpen prop to control the accordion state\n\tuseEffect(() => {\n\t\tif (props.isOpen !== undefined) {\n\t\t\ttoggleAccordion(props.isOpen, {});\n\t\t}\n\t}, [props.isOpen]);\n\n\tconst toggleAccordion = (state: boolean, event: any) => {\n\t\tif (!accordionContentRef.current \|\| !accordionArrowRef.current) return;\n\t\tif (event.type === 'keydown' && event.key !== 'Enter') {\n\t\t\treturn;\n\t\t}\n\n\t\t// Update state only if it's different from the current state\n\t\tif (state !== isActive) {\n\t\t\tsetIsActive(state);\n\t\t}\n\n\t\tif (state) {\n\t\t\taccordionContentRef.current.style.maxHeight =\n\t\t\t\t(props.childrenMaxHeight ?? accordionContentRef.current.scrollHeight) +\n\t\t\t\t'px';\n\t\t\taccordionArrowRef.current.style.transform = 'rotate(180deg)';\n\t\t\taccordionArrowRef.current.style.transition =\n\t\t\t\t'transform 0.25s ease-in-out';\n\t\t\taccordionContentRef.current.style.transition =\n\t\t\t\t'max-height 0.25s ease-in-out';\n\t\t} else {\n\t\t\taccordionContentRef.current.style.maxHeight = '';\n\t\t\taccordionArrowRef.current.style.transform = 'rotate(0deg)';\n\t\t\taccordionArrowRef.current.style.transition =\n\t\t\t\t'transform 0.25s ease-in-out';\n\t\t\taccordionContentRef.current.style.transition = 'padding 0s';\n\t\t}\n\n\t\tprops.onToggleAccordion?.(state);\n\t};\n\n\t// Monitor changes in accordion content\n\tuseEffect(() => {\n\t\tconst observer = new MutationObserver(() => {\n\t\t\tif (isActive && accordionContentRef.current) {\n\t\t\t\taccordionContentRef.current.style.maxHeight =\n\t\t\t\t\taccordionContentRef.current.scrollHeight + 'px';\n\t\t\t}\n\t\t});\n\n\t\tif (accordionContentRef.current) {\n\t\t\tobserver.observe(accordionContentRef.current, {\n\t\t\t\tchildList: true,\n\t\t\t\tsubtree: true,\n\t\t\t});\n\t\t}\n\n\t\t// Cleanup observer on unmount\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [isActive]);\n\n\tuseEffect(() => {\n\t\tif (\n\t\t\tisActive &&\n\t\t\tprops?.refresh &&\n\t\t\taccordionContentRef?.current?.scrollHeight &&\n\t\t\t!props.childrenMaxHeight\n\t\t) {\n\t\t\tsetTimeout(() => {\n\t\t\t\taccordionContentRef.current!.style.maxHeight =\n\t\t\t\t\taccordionContentRef.current!.scrollHeight + 'px';\n\t\t\t}, 100);\n\t\t}\n\t}, [isActive, props?.refresh, accordionContentRef?.current?.scrollHeight]);\n\n\treturn (\n\t\t<AccordionStyle\n\t\t\tclassName=\"accordion\"\n\t\t\tisActive={isActive}\n\t\t\twidth={props?.width}\n\t\t\tcontentMargin={props?.contentMargin}\n\t\t\theaderPadding={props.headerPadding}\n\t\t\tskipHoverState={props.skipHoverHeader}\n\t\t\tshowBorders={props.showBorders}\n\t\t\tborderColor={props.borderColor}\n\t\t\tbackgroundColor={props.backgroundColor}\n\t\t\topenDirection={props.openDirection}\n\t\t\tborderRadius={props.borderRadius}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={`accordion__overview ${isActive ? 'active' : ''}`}\n\t\t\t\tstyle={props?.containerStyle ?? {}}\n\t\t\t\tonClick={(event) => toggleAccordion(!isActive, event)}\n\t\t\t\tonKeyDown={(event) => toggleAccordion(!isActive, event)}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabIndex={0}\n\t\t\t>\n\t\t\t\t{!props.rightActionComponent && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"accordion__overview__header\"\n\t\t\t\t\t\t\tstyle={props.headerStyles ?? {}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AccordionHeaderGroup>\n\t\t\t\t\t\t\t\t{typeof props.header === 'string' ? (\n\t\t\t\t\t\t\t\t\t<TitleRegular>{props?.header}</TitleRegular>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\tprops.header\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{props.buttonLinkText && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tbuttonText={props.buttonLinkText}\n\t\t\t\t\t\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\t\t\t\t\t\tdarkMode\n\t\t\t\t\t\t\t\t\t\tonClick={props.onButtonLinkClick}\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</AccordionHeaderGroup>\n\t\t\t\t\t\t\t<AccordionHeaderGroup2>\n\t\t\t\t\t\t\t\t{props.headerButtons && (\n\t\t\t\t\t\t\t\t\t<div className=\"accordion__overview__header-buttons\">\n\t\t\t\t\t\t\t\t\t\t{props.headerButtons?.map((button) => (\n\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\tkey={button.title}\n\t\t\t\t\t\t\t\t\t\t\t\tIcon={button.icon}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\t\t\tbutton.onClick();\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={button.style}\n\t\t\t\t\t\t\t\t\t\t\t\ttitle={button.title}\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</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<BikAccordionArrow\n\t\t\t\t\t\t\t\t\tarrowColor={props.arrowColor}\n\t\t\t\t\t\t\t\t\tisNewIcon={true}\n\t\t\t\t\t\t\t\t\tref={accordionArrowRef}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</AccordionHeaderGroup2>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{props?.subHeader ? props?.subHeader : null}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{props.rightActionComponent && (\n\t\t\t\t\t<div className=\"accordion__overview__header\">\n\t\t\t\t\t\t<div className=\"accordion__overview__title-wrapper\">\n\t\t\t\t\t\t\t<BikAccordionArrow\n\t\t\t\t\t\t\t\tarrowColor={props.arrowColor}\n\t\t\t\t\t\t\t\tisNewIcon={true}\n\t\t\t\t\t\t\t\tref={accordionArrowRef}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{typeof props.header === 'string' ? (\n\t\t\t\t\t\t\t\t<TitleRegular>{props?.header}</TitleRegular>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\tprops.header\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\tif (e.key === 'Enter') e.stopPropagation();\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabIndex={0}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{props.rightActionComponent}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{props?.caption && (\n\t\t\t\t\t<div className=\"accordion__overview__caption\">\n\t\t\t\t\t\t<BodySecondary>\n\t\t\t\t\t\t\t<div style={props.captionStyle}>{props.caption}</div>\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tref={accordionContentRef as LegacyRef<HTMLDivElement>}\n\t\t\t\tclassName=\"accordion__content\"\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</div>\n\t\t</AccordionStyle>\n\t);\n};\n"],"names":["props","isActive","setIsActive","useState","accordionArrowRef","useRef","accordionContentRef","useEffect","autoOpen","toggleAccordion","undefined","isOpen","state","event","current","type","key","style","maxHeight","_a","childrenMaxHeight","scrollHeight","transform","transition","_b","onToggleAccordion","call","observer","MutationObserver","observe","childList","subtree","disconnect","refresh","setTimeout","_jsxs","AccordionStyle","Object","assign","className","width","contentMargin","headerPadding","skipHoverState","skipHoverHeader","showBorders","borderColor","backgroundColor","openDirection","borderRadius","children","jsxs","containerStyle","onClick","onKeyDown","role","tabIndex","rightActionComponent","_Fragment","_c","headerStyles","AccordionHeaderGroup","header","_jsx","jsx","TitleRegular","buttonLinkText","Button","buttonText","buttonType","darkMode","onButtonLinkClick","AccordionHeaderGroup2","headerButtons","_d","map","button","IconButton","Icon","icon","e","stopPropagation","height","title","BikAccordionArrow","arrowColor","isNewIcon","ref","subHeader","caption","BodySecondary","captionStyle"],"mappings":"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"}
1	+ {"version":3,"file":"Accordion.js","sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import React, { LegacyRef, useEffect, useRef, useState } from 'react';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { Button } from '../button';\nimport { IconButton } from '../icon-button';\nimport { AccordionProps } from './Accordion.model';\nimport AccordionStyle, {\n\tAccordionHeaderGroup,\n\tAccordionHeaderGroup2,\n} from './Accordion.style';\nimport BikAccordionArrow from './AccordionArrow';\n\nexport const BikAccordion: React.FC<AccordionProps> = (props) => {\n\tconst [isActive, setIsActive] = useState<boolean>(false);\n\tconst accordionArrowRef = useRef<HTMLDivElement>(null);\n\tconst accordionContentRef = useRef<HTMLDivElement>(null);\n\n\tuseEffect(() => {\n\t\tif (props.autoOpen) {\n\t\t\ttoggleAccordion(props.autoOpen, {});\n\t\t}\n\t}, [props.autoOpen]);\n\n\t// Listen to changes in the isOpen prop to control the accordion state\n\tuseEffect(() => {\n\t\tif (props.isOpen !== undefined) {\n\t\t\ttoggleAccordion(props.isOpen, {});\n\t\t}\n\t}, [props.isOpen]);\n\n\tconst toggleAccordion = (state: boolean, event: any) => {\n\t\tif (!accordionContentRef.current \|\| !accordionArrowRef.current) return;\n\t\tif (event.type === 'keydown' && event.key !== 'Enter') {\n\t\t\treturn;\n\t\t}\n\n\t\t// Update state only if it's different from the current state\n\t\tif (state !== isActive) {\n\t\t\tsetIsActive(state);\n\t\t}\n\n\t\tif (state) {\n\t\t\taccordionContentRef.current.style.maxHeight =\n\t\t\t\t(props.childrenMaxHeight ?? accordionContentRef.current.scrollHeight) +\n\t\t\t\t'px';\n\t\t\taccordionArrowRef.current.style.transform = 'rotate(180deg)';\n\t\t\taccordionArrowRef.current.style.transition =\n\t\t\t\t'transform 0.25s ease-in-out';\n\t\t\taccordionContentRef.current.style.transition =\n\t\t\t\t'max-height 0.25s ease-in-out';\n\t\t} else {\n\t\t\taccordionContentRef.current.style.maxHeight = '';\n\t\t\taccordionArrowRef.current.style.transform = 'rotate(0deg)';\n\t\t\taccordionArrowRef.current.style.transition =\n\t\t\t\t'transform 0.25s ease-in-out';\n\t\t\taccordionContentRef.current.style.transition = 'padding 0s';\n\t\t}\n\n\t\tprops.onToggleAccordion?.(state);\n\t};\n\n\t// Monitor changes in accordion content\n\tuseEffect(() => {\n\t\tconst observer = new MutationObserver(() => {\n\t\t\tif (isActive && accordionContentRef.current) {\n\t\t\t\taccordionContentRef.current.style.maxHeight =\n\t\t\t\t\taccordionContentRef.current.scrollHeight + 'px';\n\t\t\t}\n\t\t});\n\n\t\tif (accordionContentRef.current) {\n\t\t\tobserver.observe(accordionContentRef.current, {\n\t\t\t\tchildList: true,\n\t\t\t\tsubtree: true,\n\t\t\t});\n\t\t}\n\n\t\t// Cleanup observer on unmount\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [isActive]);\n\n\tuseEffect(() => {\n\t\tif (\n\t\t\tisActive &&\n\t\t\tprops?.refresh &&\n\t\t\taccordionContentRef?.current?.scrollHeight &&\n\t\t\t!props.childrenMaxHeight\n\t\t) {\n\t\t\tsetTimeout(() => {\n\t\t\t\taccordionContentRef.current!.style.maxHeight =\n\t\t\t\t\taccordionContentRef.current!.scrollHeight + 'px';\n\t\t\t}, 100);\n\t\t}\n\t}, [isActive, props?.refresh, accordionContentRef?.current?.scrollHeight]);\n\n\treturn (\n\t\t<AccordionStyle\n\t\t\tclassName=\"accordion\"\n\t\t\tisActive={isActive}\n\t\t\twidth={props?.width}\n\t\t\tcontentMargin={props?.contentMargin}\n\t\t\theaderPadding={props.headerPadding}\n\t\t\tskipHoverState={props.skipHoverHeader}\n\t\t\tshowBorders={props.showBorders}\n\t\t\tborderColor={props.borderColor}\n\t\t\tbackgroundColor={props.backgroundColor}\n\t\t\topenDirection={props.openDirection}\n\t\t\tborderRadius={props.borderRadius}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={`accordion__overview ${isActive ? 'active' : ''}`}\n\t\t\t\tstyle={props?.containerStyle ?? {}}\n\t\t\t\tonClick={(event) => toggleAccordion(!isActive, event)}\n\t\t\t\tonKeyDown={(event) => toggleAccordion(!isActive, event)}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabIndex={0}\n\t\t\t>\n\t\t\t\t{!props.rightActionComponent && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"accordion__overview__header\"\n\t\t\t\t\t\t\tstyle={props.headerStyles ?? {}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AccordionHeaderGroup>\n\t\t\t\t\t\t\t\t{typeof props.header === 'string' ? (\n\t\t\t\t\t\t\t\t\t<TitleRegular>{props?.header}</TitleRegular>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\tprops.header\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{props.buttonLinkText && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tbuttonText={props.buttonLinkText}\n\t\t\t\t\t\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\t\t\t\t\t\tdarkMode\n\t\t\t\t\t\t\t\t\t\tonClick={props.onButtonLinkClick}\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</AccordionHeaderGroup>\n\t\t\t\t\t\t\t<AccordionHeaderGroup2>\n\t\t\t\t\t\t\t\t{props.headerButtons && (\n\t\t\t\t\t\t\t\t\t<div className=\"accordion__overview__header-buttons\">\n\t\t\t\t\t\t\t\t\t\t{props.headerButtons?.map((button) => (\n\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\tkey={button.title}\n\t\t\t\t\t\t\t\t\t\t\t\tIcon={button.icon}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\t\t\tbutton.onClick();\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={button.style}\n\t\t\t\t\t\t\t\t\t\t\t\ttitle={button.title}\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</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<BikAccordionArrow\n\t\t\t\t\t\t\t\t\tarrowColor={props.arrowColor}\n\t\t\t\t\t\t\t\t\tisNewIcon={true}\n\t\t\t\t\t\t\t\t\tref={accordionArrowRef}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</AccordionHeaderGroup2>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{props?.subHeader ? props?.subHeader : null}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{props.rightActionComponent && (\n\t\t\t\t\t<div className=\"accordion__overview__header\">\n\t\t\t\t\t\t<div className=\"accordion__overview__title-wrapper\">\n\t\t\t\t\t\t\t<BikAccordionArrow\n\t\t\t\t\t\t\t\tarrowColor={props.arrowColor}\n\t\t\t\t\t\t\t\tisNewIcon={true}\n\t\t\t\t\t\t\t\tref={accordionArrowRef}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{typeof props.header === 'string' ? (\n\t\t\t\t\t\t\t\t<TitleRegular>{props?.header}</TitleRegular>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\tprops.header\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\tif (e.key === 'Enter') e.stopPropagation();\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabIndex={0}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{props.rightActionComponent}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{props?.caption && (\n\t\t\t\t\t<div className=\"accordion__overview__caption\">\n\t\t\t\t\t\t<BodySecondary>\n\t\t\t\t\t\t\t<div style={props.captionStyle}>{props.caption}</div>\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tref={accordionContentRef as LegacyRef<HTMLDivElement>}\n\t\t\t\tclassName=\"accordion__content\"\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</div>\n\t\t</AccordionStyle>\n\t);\n};\n"],"names":["props","isActive","setIsActive","useState","accordionArrowRef","useRef","accordionContentRef","useEffect","autoOpen","toggleAccordion","undefined","isOpen","state","event","current","type","key","style","maxHeight","_a","childrenMaxHeight","scrollHeight","transform","transition","_b","onToggleAccordion","call","observer","MutationObserver","observe","childList","subtree","disconnect","refresh","setTimeout","_jsxs","AccordionStyle","Object","assign","className","width","contentMargin","headerPadding","skipHoverState","skipHoverHeader","showBorders","borderColor","backgroundColor","openDirection","borderRadius","children","jsxs","containerStyle","onClick","onKeyDown","role","tabIndex","rightActionComponent","_Fragment","_c","headerStyles","AccordionHeaderGroup","header","_jsx","jsx","TitleRegular","buttonLinkText","Button","buttonText","buttonType","darkMode","onButtonLinkClick","AccordionHeaderGroup2","headerButtons","_d","map","button","IconButton","Icon","icon","e","stopPropagation","height","title","BikAccordionArrow","arrowColor","isNewIcon","ref","subHeader","caption","BodySecondary","captionStyle"],"mappings":"gUAWuDA,gBACtD,MAAOC,EAAUC,GAAeC,EAAQA,UAAU,GAC5CC,EAAoBC,SAAuB,MAC3CC,EAAsBD,SAAuB,MAEnDE,EAAAA,WAAU,KACLP,EAAMQ,UACTC,EAAgBT,EAAMQ,SAAU,CAAA,EAChC,GACC,CAACR,EAAMQ,WAGVD,EAAAA,WAAU,UACYG,IAAjBV,EAAMW,QACTF,EAAgBT,EAAMW,OAAQ,CAAA,EAC9B,GACC,CAACX,EAAMW,SAEV,MAAMF,EAAkBA,CAACG,EAAgBC,aACnCP,EAAoBQ,SAAYV,EAAkBU,UACpC,YAAfD,EAAME,MAAoC,UAAdF,EAAMG,MAKlCJ,IAAUX,GACbC,EAAYU,GAGTA,GACHN,EAAoBQ,QAAQG,MAAMC,WACT,QAAvBC,EAAAnB,EAAMoB,yBAAiB,IAAAD,EAAAA,EAAIb,EAAoBQ,QAAQO,cACxD,KACDjB,EAAkBU,QAAQG,MAAMK,UAAY,iBAC5ClB,EAAkBU,QAAQG,MAAMM,WAC/B,8BACDjB,EAAoBQ,QAAQG,MAAMM,WACjC,iCAEDjB,EAAoBQ,QAAQG,MAAMC,UAAY,GAC9Cd,EAAkBU,QAAQG,MAAMK,UAAY,eAC5ClB,EAAkBU,QAAQG,MAAMM,WAC/B,8BACDjB,EAAoBQ,QAAQG,MAAMM,WAAa,cAGtB,QAA1BC,EAAAxB,EAAMyB,yBAAoB,IAAAD,GAAAA,EAAAE,KAAA1B,EAAAY,IAAM,EAuCjC,OAnCAL,EAAAA,WAAU,KACT,MAAMoB,EAAW,IAAIC,kBAAiB,KACjC3B,GAAYK,EAAoBQ,UACnCR,EAAoBQ,QAAQG,MAAMC,UACjCZ,EAAoBQ,QAAQO,aAAe,KAC5C,IAWF,OARIf,EAAoBQ,SACvBa,EAASE,QAAQvB,EAAoBQ,QAAS,CAC7CgB,WAAW,EACXC,SAAS,IAKJ,KACNJ,EAASK,YAAY,CACrB,GACC,CAAC/B,IAEJM,EAAAA,WAAU,WAERN,IACAD,aAAK,EAALA,EAAOiC,WACuB,QAA9Bd,EAAAb,aAAmB,EAAnBA,EAAqBQ,eAAS,IAAAK,OAAA,EAAAA,EAAAE,gBAC7BrB,EAAMoB,mBAEPc,YAAW,KACV5B,EAAoBQ,QAASG,MAAMC,UAClCZ,EAAoBQ,QAASO,aAAe,IAAI,GAC/C,IACH,GACC,CAACpB,EAAUD,aAAK,EAALA,EAAOiC,QAAuC,UAA9B3B,aAAmB,EAAnBA,EAAqBQ,eAAS,IAAAK,OAAA,EAAAA,EAAAE,eAG3Dc,OAACC,EAAAA,QAAcC,OAAAC,OAAA,CACdC,UAAU,YACVtC,SAAUA,EACVuC,MAAOxC,aAAK,EAALA,EAAOwC,MACdC,cAAezC,aAAK,EAALA,EAAOyC,cACtBC,cAAe1C,EAAM0C,cACrBC,eAAgB3C,EAAM4C,gBACtBC,YAAa7C,EAAM6C,YACnBC,YAAa9C,EAAM8C,YACnBC,gBAAiB/C,EAAM+C,gBACvBC,cAAehD,EAAMgD,cACrBC,aAAcjD,EAAMiD,cAEpB,CAAAC,SAAA,CAAAf,EAAAgB,KAAA,MAAAd,OAAAC,OAAA,CACCC,UAAkC,wBAAAtC,EAAW,SAAW,IACxDgB,MAA4B,QAArBO,EAAAxB,eAAAA,EAAOoD,sBAAc,IAAA5B,EAAAA,EAAI,CAAE,EAClC6B,QAAUxC,GAAUJ,GAAiBR,EAAUY,GAC/CyC,UAAYzC,GAAUJ,GAAiBR,EAAUY,GACjD0C,KAAK,SACLC,SAAU,GAAC,CAAAN,SAAA,EAETlD,EAAMyD,sBACPtB,EAAAA,KACCuB,EAAAA,SAAA,CAAAR,SAAA,CAAAf,EAAAgB,KAAA,MAAAd,OAAAC,OAAA,CACCC,UAAU,8BACVtB,MAA6B,QAAtB0C,EAAA3D,EAAM4D,oBAAgB,IAAAD,EAAAA,EAAA,CAAA,GAE7B,CAAAT,SAAA,CAAAf,EAAAgB,KAACU,uBACC,CAAAX,SAAA,CAAwB,iBAAjBlD,EAAM8D,OACbC,EAAAC,IAACC,eAAY,CAAAf,SAAElD,aAAA,EAAAA,EAAO8D,SAEtB9D,EAAM8D,OAEN9D,EAAMkE,gBACNH,EAAAC,IAACG,SAAM,CACNC,WAAYpE,EAAMkE,eAClBG,WAAW,OACXC,UAAQ,EACRjB,QAASrD,EAAMuE,uBAIlBpC,EAAAgB,KAACqB,wBAAqB,CAAAtB,SAAA,CACpBlD,EAAMyE,eACNV,EAAKC,IAAA,MAAA3B,OAAAC,OAAA,CAAAC,UAAU,uCACb,CAAAW,SAAmB,QAAnBwB,EAAA1E,EAAMyE,qBAAa,IAAAC,OAAA,EAAAA,EAAEC,KAAKC,GAC1Bb,EAAAA,IAACc,EAAAA,WAAU,CAEVC,KAAMF,EAAOG,KACb1B,QAAU2B,IACTA,EAAEC,kBACFL,EAAOvB,SAAS,EAEjBb,MAAO,GACP0C,OAAQ,GACRjE,MAAO2D,EAAO3D,MACdkE,MAAOP,EAAOO,OATTP,EAAOO,YAchBpB,MAACqB,UAAiB,CACjBC,WAAYrF,EAAMqF,WAClBC,WAAW,EACXC,IAAKnF,YAIPJ,aAAK,EAALA,EAAOwF,WAAYxF,aAAK,EAALA,EAAOwF,UAAY,QAGxCxF,EAAMyD,sBACNtB,EAAAgB,KAAA,MAAAd,OAAAC,OAAA,CAAKC,UAAU,+BACd,CAAAW,SAAA,CAAAf,EAAAgB,KAAA,MAAAd,OAAAC,OAAA,CAAKC,UAAU,sCACd,CAAAW,SAAA,CAAAa,EAAAC,IAACoB,UACA,CAAAC,WAAYrF,EAAMqF,WAClBC,WAAW,EACXC,IAAKnF,IAEmB,iBAAjBJ,EAAM8D,OACbC,EAAAA,IAACE,EAAAA,aAAY,CAAAf,SAAElD,aAAA,EAAAA,EAAO8D,SAEtB9D,EAAM8D,WAGRC,EAAAC,IAAA,MAAA3B,OAAAC,OAAA,CACCe,QAAU2B,GAAMA,EAAEC,kBAClB3B,UAAY0B,IACG,UAAVA,EAAEhE,KAAiBgE,EAAEC,iBAAiB,EAE3C1B,KAAK,SACLC,SAAU,GAET,CAAAN,SAAAlD,EAAMyD,6BAITzD,aAAK,EAALA,EAAOyF,UACP1B,EAAAA,IAAA,MAAA1B,OAAAC,OAAA,CAAKC,UAAU,gCACd,CAAAW,SAAAa,EAAAC,IAAC0B,gBAAa,CAAAxC,SACba,EAAKC,IAAA,MAAA3B,OAAAC,OAAA,CAAArB,MAAOjB,EAAM2F,cAAe,CAAAzC,SAAAlD,EAAMyF,oBAK3C1B,EAAAC,IAAA,MAAA3B,OAAAC,OAAA,CACCiD,IAAKjF,EACLiC,UAAU,sBAET,CAAAW,SAAAlD,EAAMkD,eAEQ"}

package/dist/cjs/components/action-button/ActionButton.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionButton.styled.js","sources":["../../../../src/components/action-button/ActionButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BASE_COLORS } from '@src/constants/Theme';\n\nexport const ActionButtonContainer = styled.div<{\n\tisSelected: boolean;\n\tisError: boolean;\n\tborder: string;\n\tisConfigured: boolean;\n\twidth?: string;\n}>`\n\twidth: ${(props) => props.width ?? '100%'};\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 14px 0px;\n\tbox-shadow: ${(props) =>\n\t\tprops.isConfigured \|\| props.isSelected \|\| props.isError\n\t\t\t? '0px 2px 8px 0px #0000001f'\n\t\t\t: ''};\n\tbackground-color: white;\n\tborder-radius: 4px;\n\tborder: ${(props) =>\n\t\tprops.border ?? `1px solid ${BASE_COLORS.grayscale['200']}`};\n\tcursor: pointer;\n\t:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isSelected \|\| props.isError ? '' : BASE_COLORS.grayscale['200']};\n\t\tborder: ${(props) =>\n\t\t\tprops.isSelected \|\| props.isError\n\t\t\t\t? ''\n\t\t\t\t: props.isConfigured\n\t\t\t\t? `1px solid ${BASE_COLORS.grayscale['400']}`\n\t\t\t\t: `1px dashed ${BASE_COLORS.grayscale['400']}`};\n\t}\n\n\t.action__icon {\n\t\theight: 20px;\n\t\twidth: 20px;\n\t}\n`;\n"],"names":["ActionButtonContainer","div","props","_a","width","isConfigured","isSelected","isError","border","BASE_COLORS","grayscale"],"mappings":"qNAGaA,MAAAA,OAA8B,QAACC,GAM1C;UACSC,IAAS,IAAAC,EAAC,OAAW,QAAXA,EAAAD,EAAME,aAAK,IAAAD,EAAAA,EAAI,MAAM;;;;;;;eAO1BD,GACdA,EAAMG,cAAgBH,EAAMI,YAAcJ,EAAMK,QAC7C,4BACA;;;WAGOL,UACV,eAAAC,EAAAD,EAAMM,~~sBAAU~~,~~aAAaC~~,EAAWA,YAACC,UAAU,MAAQ;;;sBAGtCR,GACpBA,EAAMI,YAAcJ,EAAMK,QAAU,GAAKE,EAAWA,YAACC,UAAU;YACrDR,GACVA,EAAMI,YAAcJ,EAAMK,QACvB,GACAL,EAAMG,~~aACN~~,~~aAAaI,~~EAAWA,YAACC,UAAU,~~OACnC~~,~~cAAcD,~~EAAAA,YAAYC,UAAU;;;;;;;"}
1	+ {"version":3,"file":"ActionButton.styled.js","sources":["../../../../src/components/action-button/ActionButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BASE_COLORS } from '@src/constants/Theme';\n\nexport const ActionButtonContainer = styled.div<{\n\tisSelected: boolean;\n\tisError: boolean;\n\tborder: string;\n\tisConfigured: boolean;\n\twidth?: string;\n}>`\n\twidth: ${(props) => props.width ?? '100%'};\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 14px 0px;\n\tbox-shadow: ${(props) =>\n\t\tprops.isConfigured \|\| props.isSelected \|\| props.isError\n\t\t\t? '0px 2px 8px 0px #0000001f'\n\t\t\t: ''};\n\tbackground-color: white;\n\tborder-radius: 4px;\n\tborder: ${(props) =>\n\t\tprops.border ?? `1px solid ${BASE_COLORS.grayscale['200']}`};\n\tcursor: pointer;\n\t:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isSelected \|\| props.isError ? '' : BASE_COLORS.grayscale['200']};\n\t\tborder: ${(props) =>\n\t\t\tprops.isSelected \|\| props.isError\n\t\t\t\t? ''\n\t\t\t\t: props.isConfigured\n\t\t\t\t? `1px solid ${BASE_COLORS.grayscale['400']}`\n\t\t\t\t: `1px dashed ${BASE_COLORS.grayscale['400']}`};\n\t}\n\n\t.action__icon {\n\t\theight: 20px;\n\t\twidth: 20px;\n\t}\n`;\n"],"names":["ActionButtonContainer","div","props","_a","width","isConfigured","isSelected","isError","border","BASE_COLORS","grayscale"],"mappings":"qNAGaA,MAAAA,OAA8B,QAACC,GAM1C;UACSC,IAAS,IAAAC,EAAC,OAAW,QAAXA,EAAAD,EAAME,aAAK,IAAAD,EAAAA,EAAI,MAAM;;;;;;;eAO1BD,GACdA,EAAMG,cAAgBH,EAAMI,YAAcJ,EAAMK,QAC7C,4BACA;;;WAGOL,UACV,eAAAC,EAAAD,EAAMM,sBAAuB,aAAAC,EAAWA,YAACC,UAAU,MAAQ;;;sBAGtCR,GACpBA,EAAMI,YAAcJ,EAAMK,QAAU,GAAKE,EAAWA,YAACC,UAAU;YACrDR,GACVA,EAAMI,YAAcJ,EAAMK,QACvB,GACAL,EAAMG,0BACOI,EAAWA,YAACC,UAAU,qBACrBD,EAAAA,YAAYC,UAAU;;;;;;;"}

package/dist/cjs/components/action-button/ActionButtons.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),o=require("../../assets/icons/similar.svg.js"),s=require("../TypographyStyle.js"),i=require("./ActionButton.styled.js");exports.ActionButtons=({state:t,buttonText:c,icon:l=o.default,isSelected:a,isError:d,onClick:n})=>{const{color:O,border:S}="CONFIGURED"===t?(({isSelected:e,isError:o})=>e&&o?{color:r.BASE_COLORS.negative[700],border:`1px solid ${r.BASE_COLORS.negative[700]}`}:e?{color:r.BASE_COLORS.brand[500],border:`1px solid ${r.BASE_COLORS.brand[500]}`}:o?{color:r.BASE_COLORS.grayscale[900],border:`1px solid ${r.BASE_COLORS.negative[700]}`}:{color:r.BASE_COLORS.grayscale[900],border:`1px solid ${r.BASE_COLORS.grayscale[200]}`})({isSelected:a,isError:d}):(({isSelected:e,isError:o})=>e&&o?{color:r.BASE_COLORS.negative[700],border:`1px solid ${r.BASE_COLORS.negative[700]}`}:e?{color:r.BASE_COLORS.brand[500],border:`1px solid ${r.BASE_COLORS.brand[500]}`}:o?{color:r.BASE_COLORS.grayscale[700],border:`1px solid ${r.BASE_COLORS.negative[700]}`}:{color:r.BASE_COLORS.grayscale[700],border:`1px dashed ${r.BASE_COLORS.grayscale[200]}`})({isSelected:a,isError:d}),E={height:20,width:20,color:O,style:{display:"block"},className:"icon"};return e.jsxs(i.ActionButtonContainer,Object.assign({isSelected:a,isError:d,border:S,isConfigured:"CONFIGURED"===t,onClick:n},{children:[e.jsx("div",Object.assign({className:"action__icon"},{children:e.jsx(l,Object.assign({},E))})),e.jsx(s.BodyPrimary,Object.assign({style:{fontWeight:600,color:O}},{children:c}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),o=require("../../assets/icons/similar.svg.js"),s=require("../TypographyStyle.js"),i=require("./ActionButton.styled.js");exports.ActionButtons=t=>{let{state:l,buttonText:c,icon:a=o.default,isSelected:n,isError:d,onClick:O}=t;const{color:S,border:E}="CONFIGURED"===l?(e=>{let{isSelected:o,isError:s}=e;return o&&s?{color:r.BASE_COLORS.negative[700],border:`1px solid ${r.BASE_COLORS.negative[700]}`}:o?{color:r.BASE_COLORS.brand[500],border:`1px solid ${r.BASE_COLORS.brand[500]}`}:s?{color:r.BASE_COLORS.grayscale[900],border:`1px solid ${r.BASE_COLORS.negative[700]}`}:{color:r.BASE_COLORS.grayscale[900],border:`1px solid ${r.BASE_COLORS.grayscale[200]}`}})({isSelected:n,isError:d}):(e=>{let{isSelected:o,isError:s}=e;return o&&s?{color:r.BASE_COLORS.negative[700],border:`1px solid ${r.BASE_COLORS.negative[700]}`}:o?{color:r.BASE_COLORS.brand[500],border:`1px solid ${r.BASE_COLORS.brand[500]}`}:s?{color:r.BASE_COLORS.grayscale[700],border:`1px solid ${r.BASE_COLORS.negative[700]}`}:{color:r.BASE_COLORS.grayscale[700],border:`1px dashed ${r.BASE_COLORS.grayscale[200]}`}})({isSelected:n,isError:d}),C={height:20,width:20,color:S,style:{display:"block"},className:"icon"};return e.jsxs(i.ActionButtonContainer,Object.assign({isSelected:n,isError:d,border:E,isConfigured:"CONFIGURED"===l,onClick:O},{children:[e.jsx("div",Object.assign({className:"action__icon"},{children:e.jsx(a,Object.assign({},C))})),e.jsx(s.BodyPrimary,Object.assign({style:{fontWeight:600,color:S}},{children:c}))]}))};
 //# sourceMappingURL=ActionButtons.js.map

package/dist/cjs/components/action-button/ActionButtons.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionButtons.js","sources":["../../../../src/components/action-button/ActionButtons.tsx"],"sourcesContent":["import React from 'react';\nimport { BASE_COLORS } from '@src/constants/Theme';\nimport SimilarIcon from '../../assets/icons/similar.svg';\nimport { BodyPrimary } from '../TypographyStyle';\nimport { ActionButtonContainer } from './ActionButton.styled';\n\nexport interface ActionButtonInterface {\n\tstate: 'CONFIGURED' \| 'NOT-CONFIGURED';\n\tbuttonText: string;\n\tisSelected: boolean;\n\tisError: boolean;\n\tonClick: () => void;\n\ticon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n}\n\nconst getColorForConfiguredState = ({\n\tisSelected,\n\tisError,\n}: {\n\tisSelected: boolean;\n\tisError: boolean;\n}) => {\n\tif (isSelected && isError) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.negative['700'],\n\t\t\tborder: `1px solid ${BASE_COLORS.negative['700']}`,\n\t\t};\n\t} else if (isSelected) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.brand['500'],\n\t\t\tborder: `1px solid ${BASE_COLORS.brand['500']}`,\n\t\t};\n\t} else if (isError) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.grayscale['900'],\n\t\t\tborder: `1px solid ${BASE_COLORS.negative['700']}`,\n\t\t};\n\t} else {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.grayscale['900'],\n\t\t\tborder: `1px solid ${BASE_COLORS.grayscale['200']}`,\n\t\t};\n\t}\n};\n\nconst getColorForNotConfiguredState = ({\n\tisSelected,\n\tisError,\n}: {\n\tisSelected: boolean;\n\tisError: boolean;\n}) => {\n\tif (isSelected && isError) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.negative['700'],\n\t\t\tborder: `1px solid ${BASE_COLORS.negative['700']}`,\n\t\t};\n\t} else if (isSelected) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.brand['500'],\n\t\t\tborder: `1px solid ${BASE_COLORS.brand['500']}`,\n\t\t};\n\t} else if (isError) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.grayscale['700'],\n\t\t\tborder: `1px solid ${BASE_COLORS.negative['700']}`,\n\t\t};\n\t} else {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.grayscale['700'],\n\t\t\tborder: `1px dashed ${BASE_COLORS.grayscale['200']}`,\n\t\t};\n\t}\n};\n\nexport const ActionButtons: React.FC<ActionButtonInterface> = ({\n\tstate,\n\tbuttonText,\n\ticon: IconComponent = SimilarIcon,\n\tisSelected,\n\tisError,\n\tonClick,\n}) => {\n\tconst getColor = () => {\n\t\tif (state === 'CONFIGURED') {\n\t\t\treturn getColorForConfiguredState({ isSelected, isError });\n\t\t} else {\n\t\t\treturn getColorForNotConfiguredState({ isSelected, isError });\n\t\t}\n\t};\n\n\tconst { color, border } = getColor();\n\n\tconst iconProps = {\n\t\theight: 20,\n\t\twidth: 20,\n\t\tcolor,\n\t\tstyle: { display: 'block' },\n\t\tclassName: 'icon',\n\t};\n\n\treturn (\n\t\t<ActionButtonContainer\n\t\t\tisSelected={isSelected}\n\t\t\tisError={isError}\n\t\t\tborder={border}\n\t\t\tisConfigured={state === 'CONFIGURED'}\n\t\t\tonClick={onClick}\n\t\t>\n\t\t\t<div className=\"action__icon\">\n\t\t\t\t<IconComponent {...iconProps} />\n\t\t\t</div>\n\t\t\t<BodyPrimary style={{ fontWeight: 600, color }}>{buttonText}</BodyPrimary>\n\t\t</ActionButtonContainer>\n\t);\n};\n"],"names":["~~ActionButtons~~","state","buttonText","icon","IconComponent","SimilarIcon","isSelected","isError","onClick","color","border","~~getColorForConfiguredState~~","BASE_COLORS","negative","brand","grayscale","getColorForNotConfiguredState","iconProps","height","width","style","display","className","_jsxs","ActionButtonContainer","Object","assign","isConfigured","children","_jsx","jsx","BodyPrimary","fontWeight"],"mappings":"2RA2E8DA,~~EAC7DC~~,~~QACAC~~,~~aACAC~~,KAAMC,EAAgBC,EAAW,~~QACjCC~~,~~aACAC~~,~~UACAC~~,~~cAEA~~,~~MAQMC~~,MAAEA,EAAKC,OAAEA,GAPA,eAAVT,EArE6BU,~~GAClCL~~,~~aACAC~~,~~aAKID~~,GAAcC,EACV,CACNE,MAAOG,EAAAA,YAAYC,SAAS,KAC5BH,~~OAAQ~~,~~aAAaE,~~EAAAA,YAAYC,SAAS,QAEjCP,EACH,CACNG,MAAOG,EAAAA,YAAYE,MAAM,KACzBJ,~~OAAQ~~,~~aAAaE,~~EAAAA,YAAYE,MAAM,QAE9BP,EACH,CACNE,MAAOG,EAAAA,YAAYG,UAAU,KAC7BL,~~OAAQ~~,~~aAAaE,~~EAAAA,YAAYC,SAAS,QAGpC,CACNJ,MAAOG,EAAAA,YAAYG,UAAU,KAC7BL,~~OAAQ~~,~~aAAaE,~~EAAAA,YAAYG,UAAU,~~QA6CpCJ~~,CAA2B,~~CAAEL~~,aAAYC,~~YAxCbS~~,~~GACrCV~~,~~aACAC~~,~~aAKID~~,GAAcC,EACV,CACNE,MAAOG,EAAAA,YAAYC,SAAS,KAC5BH,~~OAAQ~~,~~aAAaE,~~EAAAA,YAAYC,SAAS,QAEjCP,EACH,CACNG,MAAOG,EAAAA,YAAYE,MAAM,KACzBJ,~~OAAQ~~,~~aAAaE,~~EAAAA,YAAYE,MAAM,QAE9BP,EACH,CACNE,MAAOG,EAAAA,YAAYG,UAAU,KAC7BL,~~OAAQ~~,~~aAAaE,~~EAAAA,YAAYC,SAAS,QAGpC,CACNJ,MAAOG,EAAAA,YAAYG,UAAU,KAC7BL,~~OAAQ~~,~~cAAcE,~~EAAAA,YAAYG,UAAU,~~QAiBrCC~~,CAA8B,~~CAAEV~~,aAAYC,YAM/CU,EAAY,CACjBC,OAAQ,GACRC,MAAO,~~GACPV~~,~~QACAW~~,MAAO,CAAEC,QAAS,SAClBC,UAAW,QAGZ,OACCC,OAACC,EAAAA,sBACAC,OAAAC,OAAA,~~CAAApB~~,WAAYA,EACZC,QAASA,EACTG,OAAQA,~~EACRiB~~,aAAwB,~~eAAV1B~~,EACdO,QAASA,GAET,~~CAAAoB~~,SAAA,CAAAC,EAAAC,IAAA,MAAAL,OAAAC,OAAA,CAAKJ,UAAU,gBACd,CAAAM,SAAAC,EAAAC,~~IAAC1B~~,~~EAAaqB~~,OAAAC,OAAA,CAAA,EAAKT,OAEpBY,EAACC,IAAAC,cAAYN,OAAAC,OAAA,CAAAN,MAAO,CAAEY,WAAY,~~IAAKvB~~,UAAO,~~CAAAmB~~,~~SAAG1B~~,QAC1B"}
1	+ {"version":3,"file":"ActionButtons.js","sources":["../../../../src/components/action-button/ActionButtons.tsx"],"sourcesContent":["import React from 'react';\nimport { BASE_COLORS } from '@src/constants/Theme';\nimport SimilarIcon from '../../assets/icons/similar.svg';\nimport { BodyPrimary } from '../TypographyStyle';\nimport { ActionButtonContainer } from './ActionButton.styled';\n\nexport interface ActionButtonInterface {\n\tstate: 'CONFIGURED' \| 'NOT-CONFIGURED';\n\tbuttonText: string;\n\tisSelected: boolean;\n\tisError: boolean;\n\tonClick: () => void;\n\ticon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n}\n\nconst getColorForConfiguredState = ({\n\tisSelected,\n\tisError,\n}: {\n\tisSelected: boolean;\n\tisError: boolean;\n}) => {\n\tif (isSelected && isError) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.negative['700'],\n\t\t\tborder: `1px solid ${BASE_COLORS.negative['700']}`,\n\t\t};\n\t} else if (isSelected) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.brand['500'],\n\t\t\tborder: `1px solid ${BASE_COLORS.brand['500']}`,\n\t\t};\n\t} else if (isError) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.grayscale['900'],\n\t\t\tborder: `1px solid ${BASE_COLORS.negative['700']}`,\n\t\t};\n\t} else {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.grayscale['900'],\n\t\t\tborder: `1px solid ${BASE_COLORS.grayscale['200']}`,\n\t\t};\n\t}\n};\n\nconst getColorForNotConfiguredState = ({\n\tisSelected,\n\tisError,\n}: {\n\tisSelected: boolean;\n\tisError: boolean;\n}) => {\n\tif (isSelected && isError) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.negative['700'],\n\t\t\tborder: `1px solid ${BASE_COLORS.negative['700']}`,\n\t\t};\n\t} else if (isSelected) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.brand['500'],\n\t\t\tborder: `1px solid ${BASE_COLORS.brand['500']}`,\n\t\t};\n\t} else if (isError) {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.grayscale['700'],\n\t\t\tborder: `1px solid ${BASE_COLORS.negative['700']}`,\n\t\t};\n\t} else {\n\t\treturn {\n\t\t\tcolor: BASE_COLORS.grayscale['700'],\n\t\t\tborder: `1px dashed ${BASE_COLORS.grayscale['200']}`,\n\t\t};\n\t}\n};\n\nexport const ActionButtons: React.FC<ActionButtonInterface> = ({\n\tstate,\n\tbuttonText,\n\ticon: IconComponent = SimilarIcon,\n\tisSelected,\n\tisError,\n\tonClick,\n}) => {\n\tconst getColor = () => {\n\t\tif (state === 'CONFIGURED') {\n\t\t\treturn getColorForConfiguredState({ isSelected, isError });\n\t\t} else {\n\t\t\treturn getColorForNotConfiguredState({ isSelected, isError });\n\t\t}\n\t};\n\n\tconst { color, border } = getColor();\n\n\tconst iconProps = {\n\t\theight: 20,\n\t\twidth: 20,\n\t\tcolor,\n\t\tstyle: { display: 'block' },\n\t\tclassName: 'icon',\n\t};\n\n\treturn (\n\t\t<ActionButtonContainer\n\t\t\tisSelected={isSelected}\n\t\t\tisError={isError}\n\t\t\tborder={border}\n\t\t\tisConfigured={state === 'CONFIGURED'}\n\t\t\tonClick={onClick}\n\t\t>\n\t\t\t<div className=\"action__icon\">\n\t\t\t\t<IconComponent {...iconProps} />\n\t\t\t</div>\n\t\t\t<BodyPrimary style={{ fontWeight: 600, color }}>{buttonText}</BodyPrimary>\n\t\t</ActionButtonContainer>\n\t);\n};\n"],"names":["_ref3","state","buttonText","icon","IconComponent","SimilarIcon","isSelected","isError","onClick","color","border","_ref","BASE_COLORS","negative","brand","grayscale","getColorForConfiguredState","_ref2","getColorForNotConfiguredState","iconProps","height","width","style","display","className","_jsxs","ActionButtonContainer","Object","assign","isConfigured","children","_jsx","jsx","BodyPrimary","fontWeight"],"mappings":"2RA2E8DA,IAOzD,IAP0DC,MAC9DA,EAAKC,WACLA,EACAC,KAAMC,EAAgBC,EAAW,QAAAC,WACjCA,EAAUC,QACVA,EAAOC,QACPA,GACAR,EACA,MAQMS,MAAEA,EAAKC,OAAEA,GAPA,eAAVT,EArE6BU,KAM9B,IAN+BL,WACnCA,EAAUC,QACVA,GAIAI,EACA,OAAIL,GAAcC,EACV,CACNE,MAAOG,EAAAA,YAAYC,SAAS,KAC5BH,oBAAqBE,EAAAA,YAAYC,SAAS,QAEjCP,EACH,CACNG,MAAOG,EAAAA,YAAYE,MAAM,KACzBJ,oBAAqBE,EAAAA,YAAYE,MAAM,QAE9BP,EACH,CACNE,MAAOG,EAAAA,YAAYG,UAAU,KAC7BL,oBAAqBE,EAAAA,YAAYC,SAAS,QAGpC,CACNJ,MAAOG,EAAAA,YAAYG,UAAU,KAC7BL,oBAAqBE,EAAAA,YAAYG,UAAU,OAE5C,EA2CQC,CAA2B,CAAEV,aAAYC,YAxCbU,KAMjC,IANkCX,WACtCA,EAAUC,QACVA,GAIAU,EACA,OAAIX,GAAcC,EACV,CACNE,MAAOG,EAAAA,YAAYC,SAAS,KAC5BH,oBAAqBE,EAAAA,YAAYC,SAAS,QAEjCP,EACH,CACNG,MAAOG,EAAAA,YAAYE,MAAM,KACzBJ,oBAAqBE,EAAAA,YAAYE,MAAM,QAE9BP,EACH,CACNE,MAAOG,EAAAA,YAAYG,UAAU,KAC7BL,oBAAqBE,EAAAA,YAAYC,SAAS,QAGpC,CACNJ,MAAOG,EAAAA,YAAYG,UAAU,KAC7BL,qBAAsBE,EAAAA,YAAYG,UAAU,OAE7C,EAeQG,CAA8B,CAAEZ,aAAYC,YAM/CY,EAAY,CACjBC,OAAQ,GACRC,MAAO,GACPZ,QACAa,MAAO,CAAEC,QAAS,SAClBC,UAAW,QAGZ,OACCC,OAACC,EAAAA,sBACAC,OAAAC,OAAA,CAAAtB,WAAYA,EACZC,QAASA,EACTG,OAAQA,EACRmB,aAAwB,eAAV5B,EACdO,QAASA,GAET,CAAAsB,SAAA,CAAAC,EAAAC,IAAA,MAAAL,OAAAC,OAAA,CAAKJ,UAAU,gBACd,CAAAM,SAAAC,EAAAC,IAAC5B,EAAauB,OAAAC,OAAA,CAAA,EAAKT,OAEpBY,EAACC,IAAAC,cAAYN,OAAAC,OAAA,CAAAN,MAAO,CAAEY,WAAY,IAAKzB,UAAO,CAAAqB,SAAG5B,QAC1B"}

package/dist/cjs/components/add-variableV2/AddVariableV2.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),a=require("react/jsx-runtime"),s=require("../../assets/icons/back_icon.svg.js"),i=require("../../assets/icons/chevronRightAlt.svg.js"),t=require("../../assets/icons/cross.svg.js"),l=require("../../assets/icons/plus.svg.js"),n=require("../../assets/icons/undo.svg.js"),r=require("react"),c=require("./AddVariableV2.styled.js"),o=require("../button/Button.js"),d=require("../icon-button/IconButton.js"),b=require("../searchBar/searchBar.js"),u=require("../tooltips/Tooltip.js"),j=require("../../constants/Theme.js"),v=require("../modals/modal.styled.js"),g=require("../switch/Switch.js"),h=require("../TypographyStyle.js");const m=r.memo((m=>{const{data:p,hasHeader:y=!0,needsBorder:x=!0,styledCloseBtn:f=!1,readonly:O=!1}=m,[S,N]=r.useState({}),[C,V]=r.useState(),[w,_]=r.useState(""),[T,B]=r.useState(""),[k,q]=r.useState(!0),L=/.*\..*/,[F,I]=r.useState(m.data),[E,A]=r.useState(!0);r.useEffect((()=>{const e={};p.forEach((a=>{e[a.displayName]=[]})),V(e)}),[p]),r.useEffect((()=>{z(!0)}),[]),r.useEffect((()=>{z(E,!w)}),[S,w]),r.useEffect((()=>{A(!0),B(""),R([],w),V((e=>Object.assign(Object.assign({},e),{[w]:[]}))),_("");const e=m.data.map((e=>$(e))).filter((e=>null!==e));I(e),e.length>0?q(!0):q(!1)}),[m.reRender]),r.useEffect((()=>{let e=m.data;w&&(e=[S[w]]);H(e,E).length>0?q(!0):q(!1)}),[T]);const H=(e,a=!1)=>e.flatMap((e=>Object.keys(e.variables).filter((s=>{var i;return(null===(i=e.variables[s].displayName)||void 0===i?void 0:i.toLowerCase().includes(T.toLowerCase()))&&(!a||e.variables[s].isAvailable===a)||P(e.variables[s])})))),R=(e,a)=>{const s=p.find((e=>e.displayName===a));if(s){let i=s;e.forEach(((e,a)=>{i=i.variables[e]})),N((e=>Object.assign(Object.assign({},e),{[a]:i})))}},P=e=>{let a=!1;if(e.isSubHeader&&e.variables){const s=Object.keys(e.variables);for(let i=0;i<s.length;i++){const t=s[i];if(e.variables&&e.variables[t].displayName.toLowerCase().includes(T.toLowerCase())&&e.variables[t].isAvailable===E){a=!0;break}}}return a},z=(e,a=!1)=>{if(A(e),e){let s=[];if(!w||a)s=m.data.map((e=>$(e))).filter((e=>null!==e));else{const e=S[w];s=m.data.filter((e=>e.displayName===w)).map((a=>$(a,e))).filter((e=>null!=e))}I(s),T&&(s=H(s,e)),s.length>0?q(!0):q(!1)}else if(I(m.data),T){H(m.data,e).length>0?q(!0):q(!1)}else q(!0)};function $(e,a,s={}){if(a)for(const i in e.variables)if(e.variables[i].displayName===a.displayName)for(const a in e.variables[i].variables)e.variables[i].variables[a].isAvailable&&(s[a]=e.variables[i].variables[a]);else e.variables[i].isSubHeader&&$(e.variables[i],a,s);else for(const a in e.variables)e.variables[a].isAvailable&&(s[a]=e.variables[a]);return 0===Object.keys(s).length?null:Object.assign(Object.assign({},e),{variables:s})}const M=e=>{const s=e.item.description;return e.readonly?a.jsx("div",{children:a.jsx(W,{item:e.item,readonly:e.readonly})}):a.jsx(a.Fragment,{children:a.jsx(u.Tooltip,Object.assign({body:"",tooltipContent:a.jsx(h.BodyCaption,Object.assign({color:j.COLORS.content.primaryInverse,style:{whiteSpace:"pre-line",padding:8}},{children:e.item.isAvailable?s?`• ${s}\n• Recommended here`:"Recommended here":"Not recommended here"})),width:300,delay:300,placement:"bottom"},{children:a.jsx("div",{children:a.jsx(W,{item:e.item})})}))})},W=e=>a.jsx(o.Button,{darkMode:m.enableVariable?m.enableVariable:e.item.isAvailable,size:"chip",disabled:!!e.readonly&&!e.item.isSubHeader,LeadingIcon:e.item.isSubHeader||e.readonly?void 0:l.default,TrailingIcon:()=>e.item.isSubHeader?a.jsx("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:a.jsx(i.default,{})})):a.jsx(a.Fragment,{}),buttonText:e.item.displayName}),D=(e,s)=>E&&!e.isAvailable?a.jsx(a.Fragment,{}):a.jsx("div",Object.assign({onClick:e.isSubHeader?()=>{H([e],E).length||q(!1),B("");const a=[...C[w],s];R(a,w),V((e=>Object.assign(Object.assign({},e),{[w]:a})))}:()=>{m.customTrigger?(m.customTrigger(e),m.setShowVariable(!1)):m.isEvaluationList?J(e):m.setVariableValue(m.selectWithTypes?{actualValue:e.actualValue,variableType:e.variableType,needsFetching:e.needsFetching}:e.actualValue)}},{children:a.jsx(M,{item:e,readonly:O})})),G=(e,a)=>{const s=[...C[e.displayName],a];R(s,e.displayName),V((a=>Object.assign(Object.assign({},a),{[e.displayName]:s}))),_(e.displayName)},J=e=>{if(e.actualValue.match(L)){const a=e.actualValue.replace("{{","").replace("}}","").split(".");let s=a[0];a.forEach(((e,a)=>{if(0===a)return;const i=(e=>/\w+\[\d+\]/g.test(e))(e);if(i){const a=e.match(/(\w+)\[(\d+)\]/);if(a){const e=a[1],i=a[2];s+=`['${e}'][${i}]`}}else s+=`['${e}']`})),m.setVariableValue(m.selectWithTypes?{actualValue:s,variableType:e.variableType,needsFetching:e.needsFetching}:s)}else{const a=e.actualValueEval?e.actualValueEval:e.actualValue;m.setVariableValue(m.selectWithTypes?{actualValue:a,variableType:e.variableType,needsFetching:e.needsFetching}:a)}},K=(e,a)=>{if(m.customTrigger)m.customTrigger(e.variables[a]),m.setShowVariable(!1);else if(m.isEvaluationList){const s=e.variables[a];J(s)}else m.setVariableValue(m.selectWithTypes?{actualValue:e.variables[a].actualValue,variableType:e.variables[a].variableType,needsFetching:e.variables[a].needsFetching}:e.variables[a].actualValue)},Q=m.isModalState?void 0:{top:`${m.topPosition?m.topPosition:"small"===m.pickerSize?"300px":"60px"}`,left:`${m.leftPosition?m.leftPosition+24:430}px`};return a.jsx("div",Object.assign({id:"varList",tabIndex:-1},{children:a.jsxs(c.AddVariableStyled,Object.assign({style:Q,onClick:e=>{e.stopPropagation()},pickerSize:m.pickerSize||"large",isModalState:m.isModalState,positionStrategy:m.positionStrategy,zIndex:m.zindex,height:m.height,needsBorder:x,width:m.width},{children:[f&&a.jsx(v.CloseButtonContainer,Object.assign({onClick:()=>{m.setShowVariable(!1)},style:{zIndex:300}},{children:a.jsx(t.default,{height:20,width:20,color:j.COLORS.content.secondary})})),m.showVariable&&a.jsxs("div",Object.assign({className:"popup"},{children:[a.jsxs("div",Object.assign({className:"sticky__bar"},{children:[y&&a.jsxs("div",Object.assign({className:"header__bar"},{children:[a.jsx("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),!f&&a.jsx("div",Object.assign({onClick:()=>{m.setShowVariable(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center"}},{children:a.jsx(d.IconButton,{iconButtonType:"default",Icon:t.default})}))]})),a.jsxs("div",Object.assign({className:"search__bar",onBlur:e=>{m.onSearchBlur&&m.onSearchBlur(e)}},{children:[a.jsx(b.SearchBar,{width:"100%",isEnabled:!0,onChange:e=>{B(e)},onEnter:()=>{},reset:!T,placeholder:"Search...",variant:"default"}),a.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",marginTop:8,justifyContent:"space-between"}},{children:[a.jsx(h.BodySecondary,Object.assign({style:{color:j.COLORS.content.secondary}},{children:"Show only recommended variables"})),a.jsx(g.Switch,{value:E,onValueChange:a=>e.__awaiter(void 0,void 0,void 0,(function*(){return yield z(a)}))})]}))]})),w&&C[w].length>0&&a.jsxs("div",Object.assign({className:"nav__bar"},{children:[a.jsxs("div",Object.assign({className:"left__nav"},{children:[a.jsx(d.IconButton,{Icon:s.default,style:{color:"#919191",display:"flex"},onClick:()=>{B("");const e=C[w].slice(0,-1);R(e,w),V((a=>Object.assign(Object.assign({},a),{[w]:e}))),e.length||_("")}}),a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx(h.TitleSmall,{children:S[w].displayName}),S[w].description&&a.jsx(h.BodyCaption,{children:S[w].description})]}))]})),a.jsxs("div",Object.assign({className:"right__nav"},{children:[a.jsx(d.IconButton,{Icon:n.default,style:{display:"flex"},onClick:()=>{B(""),R([],w),V((e=>Object.assign(Object.assign({},e),{[w]:[]}))),_("")}}),a.jsx("div",{children:"First page"})]}))]}))]})),!k&&a.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[a.jsx(h.TitleSmall,{children:"No results found!"}),E?a.jsx(h.BodyCaption,{children:"Sorry we could not find any recommended variables"}):a.jsx(h.BodyCaption,{children:`Sorry we could not find any results for "${T}"`})]})),a.jsx("div",Object.assign({className:"wrapper"},{children:a.jsx("div",Object.assign({className:"list__map"},{children:a.jsxs("div",Object.assign({className:"items"},{children:[!w&&F.map((e=>{let s=[];return T&&(s=Object.keys(e.variables).filter((a=>{var s;return(null===(s=e.variables[a].displayName)||void 0===s?void 0:s.toLowerCase().includes(T.toLowerCase()))||P(e.variables[a])}))),a.jsxs(a.Fragment,{children:[T?s.length>0?a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx("div",Object.assign({className:"heading__font"},{children:null==e?void 0:e.displayName})),a.jsx(h.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})):a.jsx(a.Fragment,{}):a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx("div",Object.assign({className:"heading__font"},{children:null==e?void 0:e.displayName})),a.jsx(h.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})),Object.keys(e.variables).map((s=>{var i;return T?(null===(i=e.variables[s].displayName)||void 0===i?void 0:i.toLowerCase().includes(T.toLowerCase()))||P(e.variables[s])?a.jsx("div",Object.assign({onClick:e.variables[s].isSubHeader?()=>G(e,s):()=>K(e,s)},{children:a.jsx(M,{item:e.variables[s],readonly:O})})):a.jsx(a.Fragment,{}):a.jsx("div",Object.assign({onClick:e.variables[s].isSubHeader?()=>G(e,s):()=>K(e,s)},{children:a.jsx(M,{item:e.variables[s],readonly:O})}))}))]})})),w&&a.jsx("div",Object.assign({className:"list__map"},{children:a.jsx("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(S[w].variables).map(((e,s)=>{var i;return T?(null===(i=S[w].variables[e].displayName)||void 0===i?void 0:i.toLowerCase().includes(T.toLowerCase()))||P(S[w].variables[e])?D(S[w].variables[e],e):a.jsx(a.Fragment,{}):D(S[w].variables[e],e)}))}))}))]}))}))})),a.jsx("div",{className:"bottom__padding"})]}))]}))}))}),((e,a)=>e.enableVariable===a.enableVariable&&(e.leftPosition===a.leftPosition&&e.reRender===a.reRender)));exports.AddVariableV2=m;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),a=require("react/jsx-runtime"),s=require("../../assets/icons/back_icon.svg.js"),i=require("../../assets/icons/chevronRightAlt.svg.js"),t=require("../../assets/icons/cross.svg.js"),l=require("../../assets/icons/plus.svg.js"),n=require("../../assets/icons/undo.svg.js"),r=require("react"),c=require("./AddVariableV2.styled.js"),o=require("../button/Button.js"),d=require("../icon-button/IconButton.js"),b=require("../searchBar/searchBar.js"),u=require("../tooltips/Tooltip.js"),v=require("../../constants/Theme.js"),j=require("../modals/modal.styled.js"),g=require("../switch/Switch.js"),h=require("../TypographyStyle.js");const m=r.memo((m=>{const{data:p,hasHeader:y=!0,needsBorder:x=!0,styledCloseBtn:f=!1,readonly:O=!1}=m,[S,N]=r.useState({}),[C,V]=r.useState(),[w,_]=r.useState(""),[T,B]=r.useState(""),[k,q]=r.useState(!0),L=/.*\..*/,[F,I]=r.useState(m.data),[E,A]=r.useState(!0);r.useEffect((()=>{const e={};p.forEach((a=>{e[a.displayName]=[]})),V(e)}),[p]),r.useEffect((()=>{z(!0)}),[]),r.useEffect((()=>{z(E,!w)}),[S,w]),r.useEffect((()=>{A(!0),B(""),R([],w),V((e=>Object.assign(Object.assign({},e),{[w]:[]}))),_("");const e=m.data.map((e=>$(e))).filter((e=>null!==e));I(e),e.length>0?q(!0):q(!1)}),[m.reRender]),r.useEffect((()=>{let e=m.data;w&&(e=[S[w]]);H(e,E).length>0?q(!0):q(!1)}),[T]);const H=function(e){let a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return e.flatMap((e=>Object.keys(e.variables).filter((s=>{var i;return(null===(i=e.variables[s].displayName)||void 0===i?void 0:i.toLowerCase().includes(T.toLowerCase()))&&(!a||e.variables[s].isAvailable===a)||P(e.variables[s])}))))},R=(e,a)=>{const s=p.find((e=>e.displayName===a));if(s){let i=s;e.forEach(((e,a)=>{i=i.variables[e]})),N((e=>Object.assign(Object.assign({},e),{[a]:i})))}},P=e=>{let a=!1;if(e.isSubHeader&&e.variables){const s=Object.keys(e.variables);for(let i=0;i<s.length;i++){const t=s[i];if(e.variables&&e.variables[t].displayName.toLowerCase().includes(T.toLowerCase())&&e.variables[t].isAvailable===E){a=!0;break}}}return a},z=function(e){let a=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(A(e),e){let s=[];if(!w||a)s=m.data.map((e=>$(e))).filter((e=>null!==e));else{const e=S[w];s=m.data.filter((e=>e.displayName===w)).map((a=>$(a,e))).filter((e=>null!=e))}I(s),T&&(s=H(s,e)),s.length>0?q(!0):q(!1)}else if(I(m.data),T){H(m.data,e).length>0?q(!0):q(!1)}else q(!0)};function $(e,a){let s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(a)for(const i in e.variables)if(e.variables[i].displayName===a.displayName)for(const a in e.variables[i].variables)e.variables[i].variables[a].isAvailable&&(s[a]=e.variables[i].variables[a]);else e.variables[i].isSubHeader&&$(e.variables[i],a,s);else for(const a in e.variables)e.variables[a].isAvailable&&(s[a]=e.variables[a]);return 0===Object.keys(s).length?null:Object.assign(Object.assign({},e),{variables:s})}const M=e=>{const s=e.item.description;return e.readonly?a.jsx("div",{children:a.jsx(W,{item:e.item,readonly:e.readonly})}):a.jsx(a.Fragment,{children:a.jsx(u.Tooltip,Object.assign({body:"",tooltipContent:a.jsx(h.BodyCaption,Object.assign({color:v.COLORS.content.primaryInverse,style:{whiteSpace:"pre-line",padding:8}},{children:e.item.isAvailable?s?`• ${s}\n• Recommended here`:"Recommended here":"Not recommended here"})),width:300,delay:300,placement:"bottom"},{children:a.jsx("div",{children:a.jsx(W,{item:e.item})})}))})},W=e=>a.jsx(o.Button,{darkMode:m.enableVariable?m.enableVariable:e.item.isAvailable,size:"chip",disabled:!!e.readonly&&!e.item.isSubHeader,LeadingIcon:e.item.isSubHeader||e.readonly?void 0:l.default,TrailingIcon:()=>e.item.isSubHeader?a.jsx("div",Object.assign({className:"icon-trailing",style:{display:"flex"}},{children:a.jsx(i.default,{})})):a.jsx(a.Fragment,{}),buttonText:e.item.displayName}),D=(e,s)=>E&&!e.isAvailable?a.jsx(a.Fragment,{}):a.jsx("div",Object.assign({onClick:e.isSubHeader?()=>{H([e],E).length||q(!1),B("");const a=[...C[w],s];R(a,w),V((e=>Object.assign(Object.assign({},e),{[w]:a})))}:()=>{m.customTrigger?(m.customTrigger(e),m.setShowVariable(!1)):m.isEvaluationList?J(e):m.setVariableValue(m.selectWithTypes?{actualValue:e.actualValue,variableType:e.variableType,needsFetching:e.needsFetching}:e.actualValue)}},{children:a.jsx(M,{item:e,readonly:O})})),G=(e,a)=>{const s=[...C[e.displayName],a];R(s,e.displayName),V((a=>Object.assign(Object.assign({},a),{[e.displayName]:s}))),_(e.displayName)},J=e=>{if(e.actualValue.match(L)){const a=e.actualValue.replace("{{","").replace("}}","").split(".");let s=a[0];a.forEach(((e,a)=>{if(0===a)return;const i=(e=>/\w+\[\d+\]/g.test(e))(e);if(i){const a=e.match(/(\w+)\[(\d+)\]/);if(a){const e=a[1],i=a[2];s+=`['${e}'][${i}]`}}else s+=`['${e}']`})),m.setVariableValue(m.selectWithTypes?{actualValue:s,variableType:e.variableType,needsFetching:e.needsFetching}:s)}else{const a=e.actualValueEval?e.actualValueEval:e.actualValue;m.setVariableValue(m.selectWithTypes?{actualValue:a,variableType:e.variableType,needsFetching:e.needsFetching}:a)}},K=(e,a)=>{if(m.customTrigger)m.customTrigger(e.variables[a]),m.setShowVariable(!1);else if(m.isEvaluationList){const s=e.variables[a];J(s)}else m.setVariableValue(m.selectWithTypes?{actualValue:e.variables[a].actualValue,variableType:e.variables[a].variableType,needsFetching:e.variables[a].needsFetching}:e.variables[a].actualValue)},Q=m.isModalState?void 0:{top:`${m.topPosition?m.topPosition:"small"===m.pickerSize?"300px":"60px"}`,left:`${m.leftPosition?m.leftPosition+24:430}px`};return a.jsx("div",Object.assign({id:"varList",tabIndex:-1},{children:a.jsxs(c.AddVariableStyled,Object.assign({style:Q,onClick:e=>{e.stopPropagation()},pickerSize:m.pickerSize||"large",isModalState:m.isModalState,positionStrategy:m.positionStrategy,zIndex:m.zindex,height:m.height,needsBorder:x,width:m.width},{children:[f&&a.jsx(j.CloseButtonContainer,Object.assign({onClick:()=>{m.setShowVariable(!1)},style:{zIndex:300}},{children:a.jsx(t.default,{height:20,width:20,color:v.COLORS.content.secondary})})),m.showVariable&&a.jsxs("div",Object.assign({className:"popup"},{children:[a.jsxs("div",Object.assign({className:"sticky__bar"},{children:[y&&a.jsxs("div",Object.assign({className:"header__bar"},{children:[a.jsx("div",Object.assign({className:"add__variable"},{children:"Add a new variable"})),!f&&a.jsx("div",Object.assign({onClick:()=>{m.setShowVariable(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center"}},{children:a.jsx(d.IconButton,{iconButtonType:"default",Icon:t.default})}))]})),a.jsxs("div",Object.assign({className:"search__bar",onBlur:e=>{m.onSearchBlur&&m.onSearchBlur(e)}},{children:[a.jsx(b.SearchBar,{width:"100%",isEnabled:!0,onChange:e=>{B(e)},onEnter:()=>{},reset:!T,placeholder:"Search...",variant:"default"}),a.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",marginTop:8,justifyContent:"space-between"}},{children:[a.jsx(h.BodySecondary,Object.assign({style:{color:v.COLORS.content.secondary}},{children:"Show only recommended variables"})),a.jsx(g.Switch,{value:E,onValueChange:a=>e.__awaiter(void 0,void 0,void 0,(function*(){return yield z(a)}))})]}))]})),w&&C[w].length>0&&a.jsxs("div",Object.assign({className:"nav__bar"},{children:[a.jsxs("div",Object.assign({className:"left__nav"},{children:[a.jsx(d.IconButton,{Icon:s.default,style:{color:"#919191",display:"flex"},onClick:()=>{B("");const e=C[w].slice(0,-1);R(e,w),V((a=>Object.assign(Object.assign({},a),{[w]:e}))),e.length||_("")}}),a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx(h.TitleSmall,{children:S[w].displayName}),S[w].description&&a.jsx(h.BodyCaption,{children:S[w].description})]}))]})),a.jsxs("div",Object.assign({className:"right__nav"},{children:[a.jsx(d.IconButton,{Icon:n.default,style:{display:"flex"},onClick:()=>{B(""),R([],w),V((e=>Object.assign(Object.assign({},e),{[w]:[]}))),_("")}}),a.jsx("div",{children:"First page"})]}))]}))]})),!k&&a.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16}},{children:[a.jsx(h.TitleSmall,{children:"No results found!"}),E?a.jsx(h.BodyCaption,{children:"Sorry we could not find any recommended variables"}):a.jsx(h.BodyCaption,{children:`Sorry we could not find any results for "${T}"`})]})),a.jsx("div",Object.assign({className:"wrapper"},{children:a.jsx("div",Object.assign({className:"list__map"},{children:a.jsxs("div",Object.assign({className:"items"},{children:[!w&&F.map((e=>{let s=[];return T&&(s=Object.keys(e.variables).filter((a=>{var s;return(null===(s=e.variables[a].displayName)||void 0===s?void 0:s.toLowerCase().includes(T.toLowerCase()))||P(e.variables[a])}))),a.jsxs(a.Fragment,{children:[T?s.length>0?a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx("div",Object.assign({className:"heading__font"},{children:null==e?void 0:e.displayName})),a.jsx(h.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})):a.jsx(a.Fragment,{}):a.jsxs("div",Object.assign({className:"block"},{children:[a.jsx("div",Object.assign({className:"heading__font"},{children:null==e?void 0:e.displayName})),a.jsx(h.BodyCaption,Object.assign({style:{marginBottom:8,color:"#616161"}},{children:null==e?void 0:e.description}))]})),Object.keys(e.variables).map((s=>{var i;return T?(null===(i=e.variables[s].displayName)||void 0===i?void 0:i.toLowerCase().includes(T.toLowerCase()))||P(e.variables[s])?a.jsx("div",Object.assign({onClick:e.variables[s].isSubHeader?()=>G(e,s):()=>K(e,s)},{children:a.jsx(M,{item:e.variables[s],readonly:O})})):a.jsx(a.Fragment,{}):a.jsx("div",Object.assign({onClick:e.variables[s].isSubHeader?()=>G(e,s):()=>K(e,s)},{children:a.jsx(M,{item:e.variables[s],readonly:O})}))}))]})})),w&&a.jsx("div",Object.assign({className:"list__map"},{children:a.jsx("div",Object.assign({className:"items",style:{marginTop:16}},{children:Object.keys(S[w].variables).map(((e,s)=>{var i;return T?(null===(i=S[w].variables[e].displayName)||void 0===i?void 0:i.toLowerCase().includes(T.toLowerCase()))||P(S[w].variables[e])?D(S[w].variables[e],e):a.jsx(a.Fragment,{}):D(S[w].variables[e],e)}))}))}))]}))}))})),a.jsx("div",{className:"bottom__padding"})]}))]}))}))}),((e,a)=>e.enableVariable===a.enableVariable&&(e.leftPosition===a.leftPosition&&e.reRender===a.reRender)));exports.AddVariableV2=m;
 //# sourceMappingURL=AddVariableV2.js.map

package/dist/cjs/components/add-variableV2/AddVariableV2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AddVariableV2.js","sources":["../../../../src/components/add-variableV2/AddVariableV2.tsx"],"sourcesContent":["/* eslint-disable react/display-name /\n\n/ eslint-disable react/prop-types /\nimport BackIcon from '@src/assets/icons/back_icon.svg';\nimport RightFilled from '@src/assets/icons/chevronRightAlt.svg';\nimport CloseIcon from '@src/assets/icons/cross.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport UndoIcon from '@src/assets/icons/undo.svg';\nimport React, { memo, useEffect, useState } from 'react';\nimport { AddVariableStyled } from '@src/components/add-variableV2/AddVariableV2.styled';\nimport { Button } from '@src/components/button';\nimport { IconButton } from '@src/components/icon-button';\nimport { SearchBar } from '@src/components/searchBar';\nimport { Tooltip } from '@src/components/tooltips';\nimport { COLORS } from '@src/constants/Theme';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { CloseButtonContainer } from '../modals/modal.styled';\nimport { Switch } from '../switch';\nimport { BodyCaption, BodySecondary, TitleSmall } from '../TypographyStyle';\n\nexport interface VariableListInterfaceV2 {\n\tdisplayName: string;\n\tdescription: string;\n\torderId: number;\n\tvariables?: any;\n}\n\nexport interface Variable {\n\tdescription?: string;\n\tdefaultValue?: string;\n\tdisplayName: string;\n\tactualValue: string;\n\tvariableType: string;\n\tisAvailable: boolean;\n\tactualValueEval?: string;\n\tisSubHeader?: boolean;\n\tvariables?: { [key: string]: Variable };\n\tneedsFetching?: boolean;\n}\n\nexport interface AddVariableProps {\n\tdata: VariableListInterfaceV2[];\n\tshowVariable: any;\n\tsetShowVariable: any;\n\tvariableValue?: any;\n\tsetVariableValue?: any;\n\tplaceholder: string;\n\tcustomTrigger?: any;\n\tisSearchRequired?: boolean;\n\tisModalState?: boolean;\n\tleftPosition?: number;\n\ttopPosition?: string;\n\tpickerSize?: string;\n\tenableVariable?: boolean;\n\tisEvaluationList?: boolean;\n\tonSearchBlur?: (e: any) => void;\n\tid?: string;\n\tselectWithTypes?: boolean;\n\tpositionStrategy?: 'static' \| 'fixed';\n\tzindex?: number;\n\thasHeader?: boolean;\n\theight?: string;\n\tneedsBorder?: boolean;\n\treRender?: string;\n\tstyledCloseBtn?: boolean;\n\twidth?: string;\n\treadonly?: boolean;\n}\n\ntype Props = AddVariableProps;\n\nexport interface VariableBoxProps {\n\titem: Variable;\n\traw?: string;\n\tparentKey?: string;\n\treadonly?: boolean;\n}\n\nexport const AddVariableV2: React.FC<Props> = memo(\n\t(props) => {\n\t\tconst {\n\t\t\tdata,\n\t\t\thasHeader = true,\n\t\t\tneedsBorder = true,\n\t\t\tstyledCloseBtn = false,\n\t\t\treadonly = false,\n\t\t} = props;\n\t\tconst [payloadVar, setPayloadVar] = useState<any>({});\n\t\tconst [navigationStack, setNavigationStack] = useState<any>();\n\t\tconst [variableKey, setVariableKey] = useState<string>('');\n\t\tconst [searchWord, setSearchWord] = useState<string>('');\n\t\tconst [variableFound, setVariableFound] = useState<boolean>(true);\n\t\tconst variableRegex = /.\\..*/;\n\n\t\tconst [variableList, setVariableList] = useState<VariableListInterfaceV2[]>(\n\t\t\tprops.data,\n\t\t);\n\t\tconst [showOnlyRecommended, setShowOnlyRecommended] =\n\t\t\tuseState<boolean>(true);\n\n\t\tuseEffect(() => {\n\t\t\tconst navStack: any = {};\n\t\t\tdata.forEach((value) => {\n\t\t\t\tnavStack[value.displayName] = [];\n\t\t\t});\n\t\t\tsetNavigationStack(navStack);\n\t\t}, [data]);\n\n\t\tuseEffect(() => {\n\t\t\thandleRecommendedToggle(true);\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tconst isFirstPage = !variableKey;\n\t\t\thandleRecommendedToggle(showOnlyRecommended, isFirstPage);\n\t\t}, [payloadVar, variableKey]);\n\n\t\tuseEffect(() => {\n\t\t\tsetShowOnlyRecommended(true);\n\t\t\tsetSearchWord('');\n\t\t\tupdatePayloadvar([], variableKey);\n\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\treturn {\n\t\t\t\t\t...prev,\n\t\t\t\t\t[variableKey]: [],\n\t\t\t\t};\n\t\t\t});\n\t\t\tsetVariableKey('');\n\n\t\t\t// for recommended variables\n\t\t\tconst newList = props.data\n\t\t\t\t.map((value) => {\n\t\t\t\t\treturn removeUnavailableVariables(value);\n\t\t\t\t})\n\t\t\t\t.filter((value) => value !== null);\n\t\t\tsetVariableList(newList);\n\t\t\tif (newList.length > 0) {\n\t\t\t\tsetVariableFound(true);\n\t\t\t} else {\n\t\t\t\tsetVariableFound(false);\n\t\t\t}\n\t\t}, [props.reRender]);\n\n\t\tuseEffect(() => {\n\t\t\t// For showing empty UI when no results are found\n\t\t\tlet data = props.data;\n\t\t\tif (variableKey) {\n\t\t\t\tdata = [payloadVar[variableKey]];\n\t\t\t}\n\t\t\tconst newList = shouldShowNoResult(data, showOnlyRecommended);\n\t\t\tif (newList.length > 0) {\n\t\t\t\tsetVariableFound(true);\n\t\t\t} else {\n\t\t\t\tsetVariableFound(false);\n\t\t\t}\n\t\t}, [searchWord]);\n\n\t\tconst shouldShowNoResult = (data: any[], showOnlyRecommended = false) => {\n\t\t\treturn data.flatMap((value) => {\n\t\t\t\treturn Object.keys(value.variables).filter(\n\t\t\t\t\t(key) =>\n\t\t\t\t\t\t(value.variables[key].displayName\n\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) &&\n\t\t\t\t\t\t\t(!showOnlyRecommended \|\|\n\t\t\t\t\t\t\t\tvalue.variables[key].isAvailable === showOnlyRecommended)) \|\|\n\t\t\t\t\t\thasVariablesInSubheader(value.variables[key]),\n\t\t\t\t);\n\t\t\t});\n\t\t};\n\n\t\tconst updatePayloadvar = (stack: Array<string>, key: string) => {\n\t\t\tconst variable = data.find((variable) => variable.displayName === key);\n\t\t\tif (variable) {\n\t\t\t\tlet temp = variable;\n\t\t\t\tstack.forEach((level, key) => {\n\t\t\t\t\ttemp = temp.variables[level];\n\t\t\t\t});\n\t\t\t\tsetPayloadVar((prev: any) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t[key]: temp,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tconst hasVariablesInSubheader = (variable: Variable) => {\n\t\t\tlet isAvailable = false;\n\t\t\tif (variable.isSubHeader && variable.variables) {\n\t\t\t\tconst keys = Object.keys(variable.variables);\n\t\t\t\tfor (let i = 0; i < keys.length; i++) {\n\t\t\t\t\tconst key = keys[i];\n\t\t\t\t\tif (\n\t\t\t\t\t\tvariable.variables &&\n\t\t\t\t\t\tvariable.variables[key].displayName\n\t\t\t\t\t\t\t.toLowerCase()\n\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) &&\n\t\t\t\t\t\tvariable.variables[key].isAvailable === showOnlyRecommended\n\t\t\t\t\t) {\n\t\t\t\t\t\tisAvailable = true;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn isAvailable;\n\t\t};\n\n\t\tconst handleRecommendedToggle = (val: boolean, firstPage = false) => {\n\t\t\tsetShowOnlyRecommended(val);\n\t\t\tif (val) {\n\t\t\t\tlet newList: any[] = [];\n\t\t\t\tif (!variableKey \|\| firstPage) {\n\t\t\t\t\tnewList = props.data\n\t\t\t\t\t\t.map((value) => {\n\t\t\t\t\t\t\treturn removeUnavailableVariables(value);\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.filter((value) => value !== null);\n\t\t\t\t} else {\n\t\t\t\t\tconst selectedSubHeader = payloadVar[variableKey];\n\t\t\t\t\tnewList = props.data\n\t\t\t\t\t\t.filter((value) => value.displayName === variableKey)\n\t\t\t\t\t\t.map((value) => {\n\t\t\t\t\t\t\treturn removeUnavailableVariables(value, selectedSubHeader);\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.filter((value) => value !== null && value !== undefined);\n\t\t\t\t}\n\t\t\t\tsetVariableList(newList);\n\t\t\t\tif (searchWord) {\n\t\t\t\t\tnewList = shouldShowNoResult(newList, val);\n\t\t\t\t}\n\t\t\t\tif (newList.length > 0) {\n\t\t\t\t\tsetVariableFound(true);\n\t\t\t\t} else {\n\t\t\t\t\tsetVariableFound(false);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tsetVariableList(props.data);\n\t\t\t\tif (searchWord) {\n\t\t\t\t\tconst newList = shouldShowNoResult(props.data, val);\n\t\t\t\t\tif (newList.length > 0) {\n\t\t\t\t\t\tsetVariableFound(true);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetVariableFound(false);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tsetVariableFound(true);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tfunction removeUnavailableVariables(\n\t\t\tcustomerVariables: any,\n\t\t\tselectedSubHeader?: any,\n\t\t\tnewVariables: any = {},\n\t\t) {\n\t\t\tif (!selectedSubHeader) {\n\t\t\t\tfor (const key in customerVariables.variables) {\n\t\t\t\t\tif (customerVariables.variables[key].isAvailable) {\n\t\t\t\t\t\tnewVariables[key] = customerVariables.variables[key];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tfor (const key in customerVariables.variables) {\n\t\t\t\t\tif (\n\t\t\t\t\t\tcustomerVariables.variables[key].displayName ===\n\t\t\t\t\t\tselectedSubHeader.displayName\n\t\t\t\t\t) {\n\t\t\t\t\t\tfor (const subKey in customerVariables.variables[key].variables) {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tcustomerVariables.variables[key].variables[subKey].isAvailable\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tnewVariables[subKey] =\n\t\t\t\t\t\t\t\t\tcustomerVariables.variables[key].variables[subKey];\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// recursively find the match and available variables if its a subheader\n\t\t\t\t\t\tif (customerVariables.variables[key].isSubHeader) {\n\t\t\t\t\t\t\tremoveUnavailableVariables(\n\t\t\t\t\t\t\t\tcustomerVariables.variables[key],\n\t\t\t\t\t\t\t\tselectedSubHeader,\n\t\t\t\t\t\t\t\tnewVariables,\n\t\t\t\t\t\t\t);\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\tif (Object.keys(newVariables).length === 0) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\treturn { ...customerVariables, variables: newVariables };\n\t\t}\n\n\t\tconst VariableBoxWithToolTip: React.FC<VariableBoxProps> = (props) => {\n\t\t\tconst description = props.item.description;\n\n\t\t\treturn props.readonly ? (\n\t\t\t\t<div>\n\t\t\t\t\t<VariableBox item={props.item} readonly={props.readonly} />\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={''}\n\t\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tcolor={COLORS.content.primaryInverse}\n\t\t\t\t\t\t\t\tstyle={{ whiteSpace: 'pre-line', padding: 8 }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.item.isAvailable\n\t\t\t\t\t\t\t\t\t? description\n\t\t\t\t\t\t\t\t\t\t? `• ${description}\\n• Recommended here`\n\t\t\t\t\t\t\t\t\t\t: 'Recommended here'\n\t\t\t\t\t\t\t\t\t: 'Not recommended here'}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t}\n\t\t\t\t\t\twidth={300}\n\t\t\t\t\t\tdelay={300}\n\t\t\t\t\t\tplacement={'bottom'}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<VariableBox item={props.item} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\tconst VariableBox: React.FC<VariableBoxProps> = (varProps) => {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\tdarkMode={\n\t\t\t\t\t\tprops.enableVariable\n\t\t\t\t\t\t\t? props.enableVariable\n\t\t\t\t\t\t\t: varProps.item.isAvailable\n\t\t\t\t\t}\n\t\t\t\t\tsize=\"chip\"\n\t\t\t\t\tdisabled={\n\t\t\t\t\t\tvarProps.readonly\n\t\t\t\t\t\t\t? varProps.item.isSubHeader\n\t\t\t\t\t\t\t\t? false\n\t\t\t\t\t\t\t\t: true\n\t\t\t\t\t\t\t: false\n\t\t\t\t\t}\n\t\t\t\t\tLeadingIcon={\n\t\t\t\t\t\tvarProps.item.isSubHeader\n\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t: varProps.readonly\n\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t: PlusIcon\n\t\t\t\t\t}\n\t\t\t\t\tTrailingIcon={() =>\n\t\t\t\t\t\tvarProps.item.isSubHeader ? (\n\t\t\t\t\t\t\t<div className=\"icon-trailing\" style={{ display: 'flex' }}>\n\t\t\t\t\t\t\t\t<RightFilled />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\tbuttonText={varProps.item.displayName}\n\t\t\t\t/>\n\t\t\t);\n\t\t};\n\n\t\tconst renderPayloadvars = (variable: Variable, key: string) => {\n\t\t\t// Show only recommended variables\n\t\t\tif (showOnlyRecommended) {\n\t\t\t\tif (!variable.isAvailable) {\n\t\t\t\t\treturn <></>;\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tvariable.isSubHeader\n\t\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t\t// check if subheader has any available variables\n\t\t\t\t\t\t\t\t\tconst isAvailable = shouldShowNoResult(\n\t\t\t\t\t\t\t\t\t\t[variable],\n\t\t\t\t\t\t\t\t\t\tshowOnlyRecommended,\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tif (!isAvailable.length) {\n\t\t\t\t\t\t\t\t\t\tsetVariableFound(false);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t// reset search word when subheader is clicked\n\t\t\t\t\t\t\t\t\tsetSearchWord('');\n\t\t\t\t\t\t\t\t\tconst newStack = [\n\t\t\t\t\t\t\t\t\t\t...(navigationStack as any)[variableKey],\n\t\t\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\tupdatePayloadvar(newStack, variableKey);\n\t\t\t\t\t\t\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t[variableKey]: newStack,\n\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: () => {\n\t\t\t\t\t\t\t\t\tif (props.customTrigger) {\n\t\t\t\t\t\t\t\t\t\tprops.customTrigger(variable);\n\t\t\t\t\t\t\t\t\t\tprops.setShowVariable(false);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tif (props.isEvaluationList) {\n\t\t\t\t\t\t\t\t\t\t\tmatchVariable(variable);\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tprops.setVariableValue(\n\t\t\t\t\t\t\t\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tactualValue: variable.actualValue,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariableType: variable.variableType,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tneedsFetching: variable.needsFetching,\n\t\t\t\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: variable.actualValue,\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}\n\t\t\t\t\t\t\t }\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<VariableBoxWithToolTip item={variable} readonly={readonly} />\n\t\t\t\t</div>\n\t\t\t);\n\t\t};\n\n\t\tconst variableClick = (value: VariableListInterfaceV2, key: string) => {\n\t\t\tconst newStack = [...(navigationStack as any)[value.displayName], key];\n\t\t\tupdatePayloadvar(newStack, value.displayName);\n\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\treturn {\n\t\t\t\t\t...prev,\n\t\t\t\t\t[value.displayName]: newStack,\n\t\t\t\t};\n\t\t\t});\n\t\t\tsetVariableKey(value.displayName);\n\t\t};\n\n\t\tconst checkIfArray = (value: string) => {\n\t\t\tconst regex = /\\w+\\[\\d+\\]/g;\n\t\t\treturn regex.test(value);\n\t\t};\n\n\t\tconst matchVariable = (variable: Variable) => {\n\t\t\tif (variable.actualValue.match(variableRegex)) {\n\t\t\t\tconst path = variable.actualValue\n\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t.split('.');\n\t\t\t\tlet evalVariableValue = path[0];\n\t\t\t\tpath.forEach((value, index) => {\n\t\t\t\t\tif (index === 0) return;\n\t\t\t\t\tconst isArray = checkIfArray(value);\n\t\t\t\t\tif (isArray) {\n\t\t\t\t\t\t// ex: event_memberships[0] -> ['event_memberships'][0]\n\t\t\t\t\t\tconst matches = value.match(/(\\w+)\\[(\\d+)\\]/);\n\t\t\t\t\t\tif (matches) {\n\t\t\t\t\t\t\tconst arrayName = matches[1];\n\t\t\t\t\t\t\tconst index = matches[2];\n\t\t\t\t\t\t\tevalVariableValue =\n\t\t\t\t\t\t\t\tevalVariableValue + `['${arrayName}'][${index}]`;\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tevalVariableValue = evalVariableValue + `['${value}']`;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tprops.setVariableValue(\n\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactualValue: evalVariableValue,\n\t\t\t\t\t\t\t\tvariableType: variable.variableType,\n\t\t\t\t\t\t\t\tneedsFetching: variable.needsFetching,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: evalVariableValue,\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tconst value = variable.actualValueEval\n\t\t\t\t\t? variable.actualValueEval\n\t\t\t\t\t: variable.actualValue;\n\t\t\t\tprops.setVariableValue(\n\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactualValue: value,\n\t\t\t\t\t\t\t\tvariableType: variable.variableType,\n\t\t\t\t\t\t\t\tneedsFetching: variable.needsFetching,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: value,\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tconst variableCustomClick = (\n\t\t\tvariableListInterfaceV2: VariableListInterfaceV2,\n\t\t\tkey: string,\n\t\t) => {\n\t\t\tif (props.customTrigger) {\n\t\t\t\tprops.customTrigger(variableListInterfaceV2.variables[key]);\n\t\t\t\tprops.setShowVariable(false);\n\t\t\t} else {\n\t\t\t\tif (props.isEvaluationList) {\n\t\t\t\t\tconst variable = variableListInterfaceV2.variables[key];\n\t\t\t\t\tmatchVariable(variable);\n\t\t\t\t} else {\n\t\t\t\t\tprops.setVariableValue(\n\t\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tactualValue:\n\t\t\t\t\t\t\t\t\t\tvariableListInterfaceV2.variables[key].actualValue,\n\t\t\t\t\t\t\t\t\tvariableType:\n\t\t\t\t\t\t\t\t\t\tvariableListInterfaceV2.variables[key].variableType,\n\t\t\t\t\t\t\t\t\tneedsFetching:\n\t\t\t\t\t\t\t\t\t\tvariableListInterfaceV2.variables[key].needsFetching,\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: variableListInterfaceV2.variables[key].actualValue,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst getStyle = !props.isModalState\n\t\t\t? {\n\t\t\t\t\ttop: `${\n\t\t\t\t\t\tprops.topPosition\n\t\t\t\t\t\t\t? props.topPosition\n\t\t\t\t\t\t\t: props.pickerSize === 'small'\n\t\t\t\t\t\t\t? '300px'\n\t\t\t\t\t\t\t: '60px'\n\t\t\t\t\t}`,\n\t\t\t\t\tleft: `${props.leftPosition ? props.leftPosition + 24 : 430}px`,\n\t\t\t }\n\t\t\t: undefined;\n\n\t\treturn (\n\t\t\t<div id=\"varList\" tabIndex={-1}>\n\t\t\t\t<AddVariableStyled\n\t\t\t\t\tstyle={getStyle}\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t}}\n\t\t\t\t\tpickerSize={props.pickerSize \|\| 'large'}\n\t\t\t\t\tisModalState={props.isModalState}\n\t\t\t\t\tpositionStrategy={props.positionStrategy}\n\t\t\t\t\tzIndex={props.zindex}\n\t\t\t\t\theight={props.height}\n\t\t\t\t\tneedsBorder={needsBorder}\n\t\t\t\t\twidth={props.width}\n\t\t\t\t>\n\t\t\t\t\t{styledCloseBtn && (\n\t\t\t\t\t\t<CloseButtonContainer\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tprops.setShowVariable(false);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstyle={{ zIndex: 300 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</CloseButtonContainer>\n\t\t\t\t\t)}\n\t\t\t\t\t{props.showVariable && (\n\t\t\t\t\t\t<div className=\"popup\">\n\t\t\t\t\t\t\t<div className=\"sticky__bar\">\n\t\t\t\t\t\t\t\t{hasHeader && (\n\t\t\t\t\t\t\t\t\t<div className=\"header__bar\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"add__variable\">Add a new variable</div>\n\t\t\t\t\t\t\t\t\t\t{!styledCloseBtn && (\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops.setShowVariable(false);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\t\ticonButtonType={'default'}\n\t\t\t\t\t\t\t\t\t\t\t\t\tIcon={CloseIcon}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName=\"search__bar\"\n\t\t\t\t\t\t\t\t\tonBlur={(e) => {\n\t\t\t\t\t\t\t\t\t\tprops.onSearchBlur && props.onSearchBlur(e);\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<SearchBar\n\t\t\t\t\t\t\t\t\t\twidth={'100%'}\n\t\t\t\t\t\t\t\t\t\tisEnabled={true}\n\t\t\t\t\t\t\t\t\t\tonChange={(searchText) => {\n\t\t\t\t\t\t\t\t\t\t\tsetSearchWord(searchText);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonEnter={() => {\n\t\t\t\t\t\t\t\t\t\t\t// Do Nothing\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\treset={!searchWord ? true : false}\n\t\t\t\t\t\t\t\t\t\tplaceholder={'Search...'}\n\t\t\t\t\t\t\t\t\t\tvariant={'default'}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\t\tmarginTop: 8,\n\t\t\t\t\t\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\t\t\tShow only recommended variables\n\t\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t\t\t<Switch\n\t\t\t\t\t\t\t\t\t\t\tvalue={showOnlyRecommended}\n\t\t\t\t\t\t\t\t\t\t\tonValueChange={async (val) =>\n\t\t\t\t\t\t\t\t\t\t\t\tawait handleRecommendedToggle(val)\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</div>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t{variableKey && navigationStack[variableKey].length > 0 && (\n\t\t\t\t\t\t\t\t\t<div className=\"nav__bar\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"left__nav\">\n\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\tIcon={BackIcon}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: '#919191', display: 'flex' }}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// reset search word when back is clicked\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSearchWord('');\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst newStack = navigationStack[variableKey].slice(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t-1,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdatePayloadvar(newStack, variableKey);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[variableKey]: newStack,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (!newStack.length) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetVariableKey('');\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"block\">\n\t\t\t\t\t\t\t\t\t\t\t\t<TitleSmall>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{payloadVar[variableKey].displayName}\n\t\t\t\t\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t\t\t\t\t\t{payloadVar[variableKey].description && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{payloadVar[variableKey].description}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"right__nav\">\n\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\tIcon={UndoIcon}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ display: 'flex' }}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// reset search word when navigating to first page\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSearchWord('');\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdatePayloadvar([], variableKey);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[variableKey]: [],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetVariableKey('');\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<div>First page</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{!variableFound && (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\t\t\tmarginTop: 16,\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<TitleSmall>No results found!</TitleSmall>\n\t\t\t\t\t\t\t\t\t{showOnlyRecommended ? (\n\t\t\t\t\t\t\t\t\t\t<BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t{`Sorry we could not find any recommended variables`}\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t{`Sorry we could not find any results for \"${searchWord}\"`}\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<div className=\"wrapper\">\n\t\t\t\t\t\t\t\t<div className=\"list__map\">\n\t\t\t\t\t\t\t\t\t<div className=\"items\">\n\t\t\t\t\t\t\t\t\t\t{!variableKey &&\n\t\t\t\t\t\t\t\t\t\t\tvariableList.map((value) => {\n\t\t\t\t\t\t\t\t\t\t\t\tlet searchList: any = [];\n\t\t\t\t\t\t\t\t\t\t\t\tif (searchWord) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsearchList = Object.keys(value.variables).filter(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(key) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].displayName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) \|\|\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thasVariablesInSubheader(value.variables[key]),\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{searchWord ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsearchList.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"block\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"heading__font\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.displayName}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmarginBottom: 8,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor: '#616161',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.description}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"block\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"heading__font\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.displayName}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ marginBottom: 8, color: '#616161' }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.description}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{Object.keys(value.variables).map((key) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn searchWord ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].displayName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) \|\|\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thasVariablesInSubheader(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].isSubHeader\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? () => variableClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: () => variableCustomClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<VariableBoxWithToolTip\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem={value.variables[key]}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treadonly={readonly}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].isSubHeader\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? () => variableClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: () => variableCustomClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<VariableBoxWithToolTip\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem={value.variables[key]}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treadonly={readonly}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t{variableKey && (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"list__map\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"items\" style={{ marginTop: 16 }}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{Object.keys(payloadVar[variableKey].variables).map(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(key, _) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn searchWord ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t].displayName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) \|\|\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thasVariablesInSubheader(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trenderPayloadvars(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trenderPayloadvars(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"bottom__padding\"></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</AddVariableStyled>\n\t\t\t</div>\n\t\t);\n\t},\n\t(prev, next) => {\n\t\tif (prev.enableVariable !== next.enableVariable) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif (prev.leftPosition !== next.leftPosition) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif (prev.reRender !== next.reRender) {\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t},\n);\n"],"names":["AddVariableV2","memo","props","data","hasHeader","needsBorder","styledCloseBtn","readonly","payloadVar","setPayloadVar","useState","navigationStack","setNavigationStack","variableKey","setVariableKey","searchWord","setSearchWord","variableFound","setVariableFound","variableRegex","variableList","setVariableList","showOnlyRecommended","setShowOnlyRecommended","useEffect","navStack","forEach","value","displayName","handleRecommendedToggle","updatePayloadvar","prev","Object","assign","newList","map","removeUnavailableVariables","filter","length","reRender","shouldShowNoResult","flatMap","keys","variables","key","_a","toLowerCase","includes","isAvailable","hasVariablesInSubheader","stack","variable","find","temp","level","isSubHeader","i","val","firstPage","selectedSubHeader","customerVariables","newVariables","subKey","VariableBoxWithToolTip","description","item","_jsx","jsx","children","VariableBox","_Fragment","Tooltip","body","tooltipContent","BodyCaption","color","COLORS","content","primaryInverse","style","whiteSpace","padding","width","delay","placement","varProps","Button","darkMode","enableVariable","size","disabled","LeadingIcon","undefined","PlusIcon","TrailingIcon","className","display","RightFilled","buttonText","renderPayloadvars","onClick","newStack","customTrigger","setShowVariable","isEvaluationList","matchVariable","setVariableValue","selectWithTypes","actualValue","variableType","needsFetching","variableClick","match","path","replace","split","evalVariableValue","index","isArray","test","checkIfArray","matches","arrayName","actualValueEval","variableCustomClick","variableListInterfaceV2","getStyle","isModalState","top","topPosition","pickerSize","left","leftPosition","id","tabIndex","_jsxs","AddVariableStyled","e","stopPropagation","positionStrategy","zIndex","zindex","height","CloseButtonContainer","CrossIcon","secondary","showVariable","jsxs","alignItems","justifyContent","IconButton","iconButtonType","Icon","CloseIcon","onBlur","onSearchBlur","SearchBar","isEnabled","onChange","searchText","onEnter","reset","placeholder","variant","marginTop","BodySecondary","Switch","onValueChange","__awaiter","BackIcon","slice","TitleSmall","UndoIcon","flexDirection","searchList","marginBottom","_","next"],"mappings":"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"}
1	+ {"version":3,"file":"AddVariableV2.js","sources":["../../../../src/components/add-variableV2/AddVariableV2.tsx"],"sourcesContent":["/* eslint-disable react/display-name /\n\n/ eslint-disable react/prop-types /\nimport BackIcon from '@src/assets/icons/back_icon.svg';\nimport RightFilled from '@src/assets/icons/chevronRightAlt.svg';\nimport CloseIcon from '@src/assets/icons/cross.svg';\nimport PlusIcon from '@src/assets/icons/plus.svg';\nimport UndoIcon from '@src/assets/icons/undo.svg';\nimport React, { memo, useEffect, useState } from 'react';\nimport { AddVariableStyled } from '@src/components/add-variableV2/AddVariableV2.styled';\nimport { Button } from '@src/components/button';\nimport { IconButton } from '@src/components/icon-button';\nimport { SearchBar } from '@src/components/searchBar';\nimport { Tooltip } from '@src/components/tooltips';\nimport { COLORS } from '@src/constants/Theme';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { CloseButtonContainer } from '../modals/modal.styled';\nimport { Switch } from '../switch';\nimport { BodyCaption, BodySecondary, TitleSmall } from '../TypographyStyle';\n\nexport interface VariableListInterfaceV2 {\n\tdisplayName: string;\n\tdescription: string;\n\torderId: number;\n\tvariables?: any;\n}\n\nexport interface Variable {\n\tdescription?: string;\n\tdefaultValue?: string;\n\tdisplayName: string;\n\tactualValue: string;\n\tvariableType: string;\n\tisAvailable: boolean;\n\tactualValueEval?: string;\n\tisSubHeader?: boolean;\n\tvariables?: { [key: string]: Variable };\n\tneedsFetching?: boolean;\n}\n\nexport interface AddVariableProps {\n\tdata: VariableListInterfaceV2[];\n\tshowVariable: any;\n\tsetShowVariable: any;\n\tvariableValue?: any;\n\tsetVariableValue?: any;\n\tplaceholder: string;\n\tcustomTrigger?: any;\n\tisSearchRequired?: boolean;\n\tisModalState?: boolean;\n\tleftPosition?: number;\n\ttopPosition?: string;\n\tpickerSize?: string;\n\tenableVariable?: boolean;\n\tisEvaluationList?: boolean;\n\tonSearchBlur?: (e: any) => void;\n\tid?: string;\n\tselectWithTypes?: boolean;\n\tpositionStrategy?: 'static' \| 'fixed';\n\tzindex?: number;\n\thasHeader?: boolean;\n\theight?: string;\n\tneedsBorder?: boolean;\n\treRender?: string;\n\tstyledCloseBtn?: boolean;\n\twidth?: string;\n\treadonly?: boolean;\n}\n\ntype Props = AddVariableProps;\n\nexport interface VariableBoxProps {\n\titem: Variable;\n\traw?: string;\n\tparentKey?: string;\n\treadonly?: boolean;\n}\n\nexport const AddVariableV2: React.FC<Props> = memo(\n\t(props) => {\n\t\tconst {\n\t\t\tdata,\n\t\t\thasHeader = true,\n\t\t\tneedsBorder = true,\n\t\t\tstyledCloseBtn = false,\n\t\t\treadonly = false,\n\t\t} = props;\n\t\tconst [payloadVar, setPayloadVar] = useState<any>({});\n\t\tconst [navigationStack, setNavigationStack] = useState<any>();\n\t\tconst [variableKey, setVariableKey] = useState<string>('');\n\t\tconst [searchWord, setSearchWord] = useState<string>('');\n\t\tconst [variableFound, setVariableFound] = useState<boolean>(true);\n\t\tconst variableRegex = /.\\..*/;\n\n\t\tconst [variableList, setVariableList] = useState<VariableListInterfaceV2[]>(\n\t\t\tprops.data,\n\t\t);\n\t\tconst [showOnlyRecommended, setShowOnlyRecommended] =\n\t\t\tuseState<boolean>(true);\n\n\t\tuseEffect(() => {\n\t\t\tconst navStack: any = {};\n\t\t\tdata.forEach((value) => {\n\t\t\t\tnavStack[value.displayName] = [];\n\t\t\t});\n\t\t\tsetNavigationStack(navStack);\n\t\t}, [data]);\n\n\t\tuseEffect(() => {\n\t\t\thandleRecommendedToggle(true);\n\t\t}, []);\n\n\t\tuseEffect(() => {\n\t\t\tconst isFirstPage = !variableKey;\n\t\t\thandleRecommendedToggle(showOnlyRecommended, isFirstPage);\n\t\t}, [payloadVar, variableKey]);\n\n\t\tuseEffect(() => {\n\t\t\tsetShowOnlyRecommended(true);\n\t\t\tsetSearchWord('');\n\t\t\tupdatePayloadvar([], variableKey);\n\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\treturn {\n\t\t\t\t\t...prev,\n\t\t\t\t\t[variableKey]: [],\n\t\t\t\t};\n\t\t\t});\n\t\t\tsetVariableKey('');\n\n\t\t\t// for recommended variables\n\t\t\tconst newList = props.data\n\t\t\t\t.map((value) => {\n\t\t\t\t\treturn removeUnavailableVariables(value);\n\t\t\t\t})\n\t\t\t\t.filter((value) => value !== null);\n\t\t\tsetVariableList(newList);\n\t\t\tif (newList.length > 0) {\n\t\t\t\tsetVariableFound(true);\n\t\t\t} else {\n\t\t\t\tsetVariableFound(false);\n\t\t\t}\n\t\t}, [props.reRender]);\n\n\t\tuseEffect(() => {\n\t\t\t// For showing empty UI when no results are found\n\t\t\tlet data = props.data;\n\t\t\tif (variableKey) {\n\t\t\t\tdata = [payloadVar[variableKey]];\n\t\t\t}\n\t\t\tconst newList = shouldShowNoResult(data, showOnlyRecommended);\n\t\t\tif (newList.length > 0) {\n\t\t\t\tsetVariableFound(true);\n\t\t\t} else {\n\t\t\t\tsetVariableFound(false);\n\t\t\t}\n\t\t}, [searchWord]);\n\n\t\tconst shouldShowNoResult = (data: any[], showOnlyRecommended = false) => {\n\t\t\treturn data.flatMap((value) => {\n\t\t\t\treturn Object.keys(value.variables).filter(\n\t\t\t\t\t(key) =>\n\t\t\t\t\t\t(value.variables[key].displayName\n\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) &&\n\t\t\t\t\t\t\t(!showOnlyRecommended \|\|\n\t\t\t\t\t\t\t\tvalue.variables[key].isAvailable === showOnlyRecommended)) \|\|\n\t\t\t\t\t\thasVariablesInSubheader(value.variables[key]),\n\t\t\t\t);\n\t\t\t});\n\t\t};\n\n\t\tconst updatePayloadvar = (stack: Array<string>, key: string) => {\n\t\t\tconst variable = data.find((variable) => variable.displayName === key);\n\t\t\tif (variable) {\n\t\t\t\tlet temp = variable;\n\t\t\t\tstack.forEach((level, key) => {\n\t\t\t\t\ttemp = temp.variables[level];\n\t\t\t\t});\n\t\t\t\tsetPayloadVar((prev: any) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t[key]: temp,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tconst hasVariablesInSubheader = (variable: Variable) => {\n\t\t\tlet isAvailable = false;\n\t\t\tif (variable.isSubHeader && variable.variables) {\n\t\t\t\tconst keys = Object.keys(variable.variables);\n\t\t\t\tfor (let i = 0; i < keys.length; i++) {\n\t\t\t\t\tconst key = keys[i];\n\t\t\t\t\tif (\n\t\t\t\t\t\tvariable.variables &&\n\t\t\t\t\t\tvariable.variables[key].displayName\n\t\t\t\t\t\t\t.toLowerCase()\n\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) &&\n\t\t\t\t\t\tvariable.variables[key].isAvailable === showOnlyRecommended\n\t\t\t\t\t) {\n\t\t\t\t\t\tisAvailable = true;\n\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn isAvailable;\n\t\t};\n\n\t\tconst handleRecommendedToggle = (val: boolean, firstPage = false) => {\n\t\t\tsetShowOnlyRecommended(val);\n\t\t\tif (val) {\n\t\t\t\tlet newList: any[] = [];\n\t\t\t\tif (!variableKey \|\| firstPage) {\n\t\t\t\t\tnewList = props.data\n\t\t\t\t\t\t.map((value) => {\n\t\t\t\t\t\t\treturn removeUnavailableVariables(value);\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.filter((value) => value !== null);\n\t\t\t\t} else {\n\t\t\t\t\tconst selectedSubHeader = payloadVar[variableKey];\n\t\t\t\t\tnewList = props.data\n\t\t\t\t\t\t.filter((value) => value.displayName === variableKey)\n\t\t\t\t\t\t.map((value) => {\n\t\t\t\t\t\t\treturn removeUnavailableVariables(value, selectedSubHeader);\n\t\t\t\t\t\t})\n\t\t\t\t\t\t.filter((value) => value !== null && value !== undefined);\n\t\t\t\t}\n\t\t\t\tsetVariableList(newList);\n\t\t\t\tif (searchWord) {\n\t\t\t\t\tnewList = shouldShowNoResult(newList, val);\n\t\t\t\t}\n\t\t\t\tif (newList.length > 0) {\n\t\t\t\t\tsetVariableFound(true);\n\t\t\t\t} else {\n\t\t\t\t\tsetVariableFound(false);\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tsetVariableList(props.data);\n\t\t\t\tif (searchWord) {\n\t\t\t\t\tconst newList = shouldShowNoResult(props.data, val);\n\t\t\t\t\tif (newList.length > 0) {\n\t\t\t\t\t\tsetVariableFound(true);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tsetVariableFound(false);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tsetVariableFound(true);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tfunction removeUnavailableVariables(\n\t\t\tcustomerVariables: any,\n\t\t\tselectedSubHeader?: any,\n\t\t\tnewVariables: any = {},\n\t\t) {\n\t\t\tif (!selectedSubHeader) {\n\t\t\t\tfor (const key in customerVariables.variables) {\n\t\t\t\t\tif (customerVariables.variables[key].isAvailable) {\n\t\t\t\t\t\tnewVariables[key] = customerVariables.variables[key];\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tfor (const key in customerVariables.variables) {\n\t\t\t\t\tif (\n\t\t\t\t\t\tcustomerVariables.variables[key].displayName ===\n\t\t\t\t\t\tselectedSubHeader.displayName\n\t\t\t\t\t) {\n\t\t\t\t\t\tfor (const subKey in customerVariables.variables[key].variables) {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tcustomerVariables.variables[key].variables[subKey].isAvailable\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tnewVariables[subKey] =\n\t\t\t\t\t\t\t\t\tcustomerVariables.variables[key].variables[subKey];\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// recursively find the match and available variables if its a subheader\n\t\t\t\t\t\tif (customerVariables.variables[key].isSubHeader) {\n\t\t\t\t\t\t\tremoveUnavailableVariables(\n\t\t\t\t\t\t\t\tcustomerVariables.variables[key],\n\t\t\t\t\t\t\t\tselectedSubHeader,\n\t\t\t\t\t\t\t\tnewVariables,\n\t\t\t\t\t\t\t);\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\tif (Object.keys(newVariables).length === 0) {\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\treturn { ...customerVariables, variables: newVariables };\n\t\t}\n\n\t\tconst VariableBoxWithToolTip: React.FC<VariableBoxProps> = (props) => {\n\t\t\tconst description = props.item.description;\n\n\t\t\treturn props.readonly ? (\n\t\t\t\t<div>\n\t\t\t\t\t<VariableBox item={props.item} readonly={props.readonly} />\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={''}\n\t\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tcolor={COLORS.content.primaryInverse}\n\t\t\t\t\t\t\t\tstyle={{ whiteSpace: 'pre-line', padding: 8 }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.item.isAvailable\n\t\t\t\t\t\t\t\t\t? description\n\t\t\t\t\t\t\t\t\t\t? `• ${description}\\n• Recommended here`\n\t\t\t\t\t\t\t\t\t\t: 'Recommended here'\n\t\t\t\t\t\t\t\t\t: 'Not recommended here'}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t}\n\t\t\t\t\t\twidth={300}\n\t\t\t\t\t\tdelay={300}\n\t\t\t\t\t\tplacement={'bottom'}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<VariableBox item={props.item} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\tconst VariableBox: React.FC<VariableBoxProps> = (varProps) => {\n\t\t\treturn (\n\t\t\t\t<Button\n\t\t\t\t\tdarkMode={\n\t\t\t\t\t\tprops.enableVariable\n\t\t\t\t\t\t\t? props.enableVariable\n\t\t\t\t\t\t\t: varProps.item.isAvailable\n\t\t\t\t\t}\n\t\t\t\t\tsize=\"chip\"\n\t\t\t\t\tdisabled={\n\t\t\t\t\t\tvarProps.readonly\n\t\t\t\t\t\t\t? varProps.item.isSubHeader\n\t\t\t\t\t\t\t\t? false\n\t\t\t\t\t\t\t\t: true\n\t\t\t\t\t\t\t: false\n\t\t\t\t\t}\n\t\t\t\t\tLeadingIcon={\n\t\t\t\t\t\tvarProps.item.isSubHeader\n\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t: varProps.readonly\n\t\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t\t: PlusIcon\n\t\t\t\t\t}\n\t\t\t\t\tTrailingIcon={() =>\n\t\t\t\t\t\tvarProps.item.isSubHeader ? (\n\t\t\t\t\t\t\t<div className=\"icon-trailing\" style={{ display: 'flex' }}>\n\t\t\t\t\t\t\t\t<RightFilled />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\tbuttonText={varProps.item.displayName}\n\t\t\t\t/>\n\t\t\t);\n\t\t};\n\n\t\tconst renderPayloadvars = (variable: Variable, key: string) => {\n\t\t\t// Show only recommended variables\n\t\t\tif (showOnlyRecommended) {\n\t\t\t\tif (!variable.isAvailable) {\n\t\t\t\t\treturn <></>;\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tonClick={\n\t\t\t\t\t\tvariable.isSubHeader\n\t\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t\t// check if subheader has any available variables\n\t\t\t\t\t\t\t\t\tconst isAvailable = shouldShowNoResult(\n\t\t\t\t\t\t\t\t\t\t[variable],\n\t\t\t\t\t\t\t\t\t\tshowOnlyRecommended,\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\tif (!isAvailable.length) {\n\t\t\t\t\t\t\t\t\t\tsetVariableFound(false);\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t// reset search word when subheader is clicked\n\t\t\t\t\t\t\t\t\tsetSearchWord('');\n\t\t\t\t\t\t\t\t\tconst newStack = [\n\t\t\t\t\t\t\t\t\t\t...(navigationStack as any)[variableKey],\n\t\t\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\tupdatePayloadvar(newStack, variableKey);\n\t\t\t\t\t\t\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t[variableKey]: newStack,\n\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: () => {\n\t\t\t\t\t\t\t\t\tif (props.customTrigger) {\n\t\t\t\t\t\t\t\t\t\tprops.customTrigger(variable);\n\t\t\t\t\t\t\t\t\t\tprops.setShowVariable(false);\n\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\tif (props.isEvaluationList) {\n\t\t\t\t\t\t\t\t\t\t\tmatchVariable(variable);\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\tprops.setVariableValue(\n\t\t\t\t\t\t\t\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tactualValue: variable.actualValue,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariableType: variable.variableType,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tneedsFetching: variable.needsFetching,\n\t\t\t\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: variable.actualValue,\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}\n\t\t\t\t\t\t\t }\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<VariableBoxWithToolTip item={variable} readonly={readonly} />\n\t\t\t\t</div>\n\t\t\t);\n\t\t};\n\n\t\tconst variableClick = (value: VariableListInterfaceV2, key: string) => {\n\t\t\tconst newStack = [...(navigationStack as any)[value.displayName], key];\n\t\t\tupdatePayloadvar(newStack, value.displayName);\n\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\treturn {\n\t\t\t\t\t...prev,\n\t\t\t\t\t[value.displayName]: newStack,\n\t\t\t\t};\n\t\t\t});\n\t\t\tsetVariableKey(value.displayName);\n\t\t};\n\n\t\tconst checkIfArray = (value: string) => {\n\t\t\tconst regex = /\\w+\\[\\d+\\]/g;\n\t\t\treturn regex.test(value);\n\t\t};\n\n\t\tconst matchVariable = (variable: Variable) => {\n\t\t\tif (variable.actualValue.match(variableRegex)) {\n\t\t\t\tconst path = variable.actualValue\n\t\t\t\t\t.replace('{{', '')\n\t\t\t\t\t.replace('}}', '')\n\t\t\t\t\t.split('.');\n\t\t\t\tlet evalVariableValue = path[0];\n\t\t\t\tpath.forEach((value, index) => {\n\t\t\t\t\tif (index === 0) return;\n\t\t\t\t\tconst isArray = checkIfArray(value);\n\t\t\t\t\tif (isArray) {\n\t\t\t\t\t\t// ex: event_memberships[0] -> ['event_memberships'][0]\n\t\t\t\t\t\tconst matches = value.match(/(\\w+)\\[(\\d+)\\]/);\n\t\t\t\t\t\tif (matches) {\n\t\t\t\t\t\t\tconst arrayName = matches[1];\n\t\t\t\t\t\t\tconst index = matches[2];\n\t\t\t\t\t\t\tevalVariableValue =\n\t\t\t\t\t\t\t\tevalVariableValue + `['${arrayName}'][${index}]`;\n\t\t\t\t\t\t}\n\t\t\t\t\t} else {\n\t\t\t\t\t\tevalVariableValue = evalVariableValue + `['${value}']`;\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t\tprops.setVariableValue(\n\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactualValue: evalVariableValue,\n\t\t\t\t\t\t\t\tvariableType: variable.variableType,\n\t\t\t\t\t\t\t\tneedsFetching: variable.needsFetching,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: evalVariableValue,\n\t\t\t\t);\n\t\t\t} else {\n\t\t\t\tconst value = variable.actualValueEval\n\t\t\t\t\t? variable.actualValueEval\n\t\t\t\t\t: variable.actualValue;\n\t\t\t\tprops.setVariableValue(\n\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tactualValue: value,\n\t\t\t\t\t\t\t\tvariableType: variable.variableType,\n\t\t\t\t\t\t\t\tneedsFetching: variable.needsFetching,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: value,\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\n\t\tconst variableCustomClick = (\n\t\t\tvariableListInterfaceV2: VariableListInterfaceV2,\n\t\t\tkey: string,\n\t\t) => {\n\t\t\tif (props.customTrigger) {\n\t\t\t\tprops.customTrigger(variableListInterfaceV2.variables[key]);\n\t\t\t\tprops.setShowVariable(false);\n\t\t\t} else {\n\t\t\t\tif (props.isEvaluationList) {\n\t\t\t\t\tconst variable = variableListInterfaceV2.variables[key];\n\t\t\t\t\tmatchVariable(variable);\n\t\t\t\t} else {\n\t\t\t\t\tprops.setVariableValue(\n\t\t\t\t\t\tprops.selectWithTypes\n\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\tactualValue:\n\t\t\t\t\t\t\t\t\t\tvariableListInterfaceV2.variables[key].actualValue,\n\t\t\t\t\t\t\t\t\tvariableType:\n\t\t\t\t\t\t\t\t\t\tvariableListInterfaceV2.variables[key].variableType,\n\t\t\t\t\t\t\t\t\tneedsFetching:\n\t\t\t\t\t\t\t\t\t\tvariableListInterfaceV2.variables[key].needsFetching,\n\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t: variableListInterfaceV2.variables[key].actualValue,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst getStyle = !props.isModalState\n\t\t\t? {\n\t\t\t\t\ttop: `${\n\t\t\t\t\t\tprops.topPosition\n\t\t\t\t\t\t\t? props.topPosition\n\t\t\t\t\t\t\t: props.pickerSize === 'small'\n\t\t\t\t\t\t\t? '300px'\n\t\t\t\t\t\t\t: '60px'\n\t\t\t\t\t}`,\n\t\t\t\t\tleft: `${props.leftPosition ? props.leftPosition + 24 : 430}px`,\n\t\t\t }\n\t\t\t: undefined;\n\n\t\treturn (\n\t\t\t<div id=\"varList\" tabIndex={-1}>\n\t\t\t\t<AddVariableStyled\n\t\t\t\t\tstyle={getStyle}\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t}}\n\t\t\t\t\tpickerSize={props.pickerSize \|\| 'large'}\n\t\t\t\t\tisModalState={props.isModalState}\n\t\t\t\t\tpositionStrategy={props.positionStrategy}\n\t\t\t\t\tzIndex={props.zindex}\n\t\t\t\t\theight={props.height}\n\t\t\t\t\tneedsBorder={needsBorder}\n\t\t\t\t\twidth={props.width}\n\t\t\t\t>\n\t\t\t\t\t{styledCloseBtn && (\n\t\t\t\t\t\t<CloseButtonContainer\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tprops.setShowVariable(false);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tstyle={{ zIndex: 300 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</CloseButtonContainer>\n\t\t\t\t\t)}\n\t\t\t\t\t{props.showVariable && (\n\t\t\t\t\t\t<div className=\"popup\">\n\t\t\t\t\t\t\t<div className=\"sticky__bar\">\n\t\t\t\t\t\t\t\t{hasHeader && (\n\t\t\t\t\t\t\t\t\t<div className=\"header__bar\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"add__variable\">Add a new variable</div>\n\t\t\t\t\t\t\t\t\t\t{!styledCloseBtn && (\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops.setShowVariable(false);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\t\ticonButtonType={'default'}\n\t\t\t\t\t\t\t\t\t\t\t\t\tIcon={CloseIcon}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName=\"search__bar\"\n\t\t\t\t\t\t\t\t\tonBlur={(e) => {\n\t\t\t\t\t\t\t\t\t\tprops.onSearchBlur && props.onSearchBlur(e);\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<SearchBar\n\t\t\t\t\t\t\t\t\t\twidth={'100%'}\n\t\t\t\t\t\t\t\t\t\tisEnabled={true}\n\t\t\t\t\t\t\t\t\t\tonChange={(searchText) => {\n\t\t\t\t\t\t\t\t\t\t\tsetSearchWord(searchText);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonEnter={() => {\n\t\t\t\t\t\t\t\t\t\t\t// Do Nothing\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\treset={!searchWord ? true : false}\n\t\t\t\t\t\t\t\t\t\tplaceholder={'Search...'}\n\t\t\t\t\t\t\t\t\t\tvariant={'default'}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\t\tmarginTop: 8,\n\t\t\t\t\t\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<BodySecondary style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t\t\t\tShow only recommended variables\n\t\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t\t\t<Switch\n\t\t\t\t\t\t\t\t\t\t\tvalue={showOnlyRecommended}\n\t\t\t\t\t\t\t\t\t\t\tonValueChange={async (val) =>\n\t\t\t\t\t\t\t\t\t\t\t\tawait handleRecommendedToggle(val)\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</div>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t{variableKey && navigationStack[variableKey].length > 0 && (\n\t\t\t\t\t\t\t\t\t<div className=\"nav__bar\">\n\t\t\t\t\t\t\t\t\t\t<div className=\"left__nav\">\n\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\tIcon={BackIcon}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: '#919191', display: 'flex' }}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// reset search word when back is clicked\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSearchWord('');\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst newStack = navigationStack[variableKey].slice(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t0,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t-1,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdatePayloadvar(newStack, variableKey);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[variableKey]: newStack,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t\tif (!newStack.length) {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetVariableKey('');\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"block\">\n\t\t\t\t\t\t\t\t\t\t\t\t<TitleSmall>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{payloadVar[variableKey].displayName}\n\t\t\t\t\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t\t\t\t\t\t{payloadVar[variableKey].description && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{payloadVar[variableKey].description}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"right__nav\">\n\t\t\t\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\t\t\t\tIcon={UndoIcon}\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ display: 'flex' }}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t// reset search word when navigating to first page\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSearchWord('');\n\t\t\t\t\t\t\t\t\t\t\t\t\tupdatePayloadvar([], variableKey);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetNavigationStack((prev: any) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t[variableKey]: [],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetVariableKey('');\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<div>First page</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{!variableFound && (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\t\t\tmarginTop: 16,\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<TitleSmall>No results found!</TitleSmall>\n\t\t\t\t\t\t\t\t\t{showOnlyRecommended ? (\n\t\t\t\t\t\t\t\t\t\t<BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t{`Sorry we could not find any recommended variables`}\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t<BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t{`Sorry we could not find any results for \"${searchWord}\"`}\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<div className=\"wrapper\">\n\t\t\t\t\t\t\t\t<div className=\"list__map\">\n\t\t\t\t\t\t\t\t\t<div className=\"items\">\n\t\t\t\t\t\t\t\t\t\t{!variableKey &&\n\t\t\t\t\t\t\t\t\t\t\tvariableList.map((value) => {\n\t\t\t\t\t\t\t\t\t\t\t\tlet searchList: any = [];\n\t\t\t\t\t\t\t\t\t\t\t\tif (searchWord) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsearchList = Object.keys(value.variables).filter(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(key) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].displayName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) \|\|\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thasVariablesInSubheader(value.variables[key]),\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{searchWord ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsearchList.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"block\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"heading__font\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.displayName}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tmarginBottom: 8,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor: '#616161',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.description}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"block\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"heading__font\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.displayName}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ marginBottom: 8, color: '#616161' }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{value?.description}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{Object.keys(value.variables).map((key) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn searchWord ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].displayName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) \|\|\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thasVariablesInSubheader(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].isSubHeader\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? () => variableClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: () => variableCustomClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<VariableBoxWithToolTip\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem={value.variables[key]}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treadonly={readonly}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue.variables[key].isSubHeader\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? () => variableClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: () => variableCustomClick(value, key)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<VariableBoxWithToolTip\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem={value.variables[key]}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treadonly={readonly}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t{variableKey && (\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"list__map\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"items\" style={{ marginTop: 16 }}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{Object.keys(payloadVar[variableKey].variables).map(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t(key, _) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\treturn searchWord ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t].displayName\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t.includes(searchWord.toLowerCase()) \|\|\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thasVariablesInSubheader(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trenderPayloadvars(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\trenderPayloadvars(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tpayloadVar[variableKey].variables[key],\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tkey,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"bottom__padding\"></div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</AddVariableStyled>\n\t\t\t</div>\n\t\t);\n\t},\n\t(prev, next) => {\n\t\tif (prev.enableVariable !== next.enableVariable) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif (prev.leftPosition !== next.leftPosition) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif (prev.reRender !== next.reRender) {\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t},\n);\n"],"names":["AddVariableV2","memo","props","data","hasHeader","needsBorder","styledCloseBtn","readonly","payloadVar","setPayloadVar","useState","navigationStack","setNavigationStack","variableKey","setVariableKey","searchWord","setSearchWord","variableFound","setVariableFound","variableRegex","variableList","setVariableList","showOnlyRecommended","setShowOnlyRecommended","useEffect","navStack","forEach","value","displayName","handleRecommendedToggle","updatePayloadvar","prev","Object","assign","newList","map","removeUnavailableVariables","filter","length","reRender","shouldShowNoResult","arguments","undefined","flatMap","keys","variables","key","_a","toLowerCase","includes","isAvailable","hasVariablesInSubheader","stack","variable","find","temp","level","isSubHeader","i","val","firstPage","selectedSubHeader","customerVariables","newVariables","subKey","VariableBoxWithToolTip","description","item","_jsx","jsx","children","VariableBox","_Fragment","Tooltip","body","tooltipContent","BodyCaption","color","COLORS","content","primaryInverse","style","whiteSpace","padding","width","delay","placement","varProps","Button","darkMode","enableVariable","size","disabled","LeadingIcon","PlusIcon","TrailingIcon","className","display","RightFilled","buttonText","renderPayloadvars","onClick","newStack","customTrigger","setShowVariable","isEvaluationList","matchVariable","setVariableValue","selectWithTypes","actualValue","variableType","needsFetching","variableClick","match","path","replace","split","evalVariableValue","index","isArray","test","checkIfArray","matches","arrayName","actualValueEval","variableCustomClick","variableListInterfaceV2","getStyle","isModalState","top","topPosition","pickerSize","left","leftPosition","id","tabIndex","_jsxs","AddVariableStyled","e","stopPropagation","positionStrategy","zIndex","zindex","height","CloseButtonContainer","CrossIcon","secondary","showVariable","jsxs","alignItems","justifyContent","IconButton","iconButtonType","Icon","CloseIcon","onBlur","onSearchBlur","SearchBar","isEnabled","onChange","searchText","onEnter","reset","placeholder","variant","marginTop","BodySecondary","Switch","onValueChange","__awaiter","BackIcon","slice","TitleSmall","UndoIcon","flexDirection","searchList","marginBottom","_","next"],"mappings":"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"}

package/dist/cjs/components/ai-modals/ActivateBikAI.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../constants/Theme.js"),i=require("../../assets/icons/graph.svg.js"),s=require("../../assets/icons/sparkle.svg.js"),r=require("../button/Button.js"),n=require("../modals/Modal.js"),o=require("../TypographyStyle.js");exports.ActivateBikAi=({open:a,onModalClose:l,onRightBtnClick:c,onLeftBtnClick:d,source:x})=>e.jsx(n.Modal,Object.assign({open:a,centralContainerStyles:{height:"430px",width:"464px",borderRadius:"12px"},zIndex:40,onClose:l,closeOnOutsideClick:!0},{children:e.jsxs("div",{children:[e.jsxs("div",Object.assign({style:{height:"180px",width:"100%",backgroundColor:"rgba(142, 142, 142, 0.2)",display:"flex",justifyContent:"center",alignItems:"center",gap:"18px",padding:"24px"}},{children:[e.jsx("div",{children:e.jsx(i.default,{width:100,height:90})}),e.jsx("div",{children:"CHATBOT"===x?e.jsx(o.TitleMedium,{children:"Unlock higher conversion and ease agent work with BIK.AI"}):e.jsx(o.TitleMedium,{children:"Experience reduced Average Handling Time of your tickets with Bik.AI!"})})]})),e.jsxs("div",Object.assign({style:{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",gap:"16px",padding:"24px"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:"4px"}},{children:[e.jsx(o.TitleLarge,{children:"Activate BIK AI"}),e.jsx(s.default,{width:32,height:32})]})),"CHATBOT"===x?e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"}},{children:[e.jsx(o.BodyPrimary,Object.assign({color:"#888888"},{children:"Sync your Shopify Data to Bik.AI to supercharge it with"})),e.jsx(o.BodyPrimary,Object.assign({color:"#888888"},{children:"your store’s data to start personalizing it to your"})),e.jsx(o.BodyPrimary,Object.assign({color:"#888888"},{children:"customers!"}))]})):e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"}},{children:[e.jsxs(o.BodyPrimary,Object.assign({color:"#888888"},{children:["Sync your Shopify Data to Bik.AI to supercharge it with"," "]})),e.jsx(o.BodyPrimary,Object.assign({color:"#888888"},{children:"your store’s data to start responding to customer"})),e.jsx(o.BodyPrimary,Object.assign({color:"#888888"},{children:"queries right away!"}))]}))]})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:"12px",paddingBottom:"24px",paddingLeft:"24px",paddingRight:"24px"}},{children:[e.jsx(r.Button,{buttonText:"Learn More",buttonType:"text",size:"large",onClick:d}),e.jsx(r.Button,{buttonText:"Sync Shopify Data",size:"large",style:{backgroundColor:t.COLORS.background.brand},onClick:c})]}))]})}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../constants/Theme.js"),i=require("../../assets/icons/graph.svg.js"),s=require("../../assets/icons/sparkle.svg.js"),r=require("../button/Button.js"),n=require("../modals/Modal.js"),o=require("../TypographyStyle.js");exports.ActivateBikAi=a=>{let{open:l,onModalClose:c,onRightBtnClick:d,onLeftBtnClick:x,source:g}=a;return e.jsx(n.Modal,Object.assign({open:l,centralContainerStyles:{height:"430px",width:"464px",borderRadius:"12px"},zIndex:40,onClose:c,closeOnOutsideClick:!0},{children:e.jsxs("div",{children:[e.jsxs("div",Object.assign({style:{height:"180px",width:"100%",backgroundColor:"rgba(142, 142, 142, 0.2)",display:"flex",justifyContent:"center",alignItems:"center",gap:"18px",padding:"24px"}},{children:[e.jsx("div",{children:e.jsx(i.default,{width:100,height:90})}),e.jsx("div",{children:"CHATBOT"===g?e.jsx(o.TitleMedium,{children:"Unlock higher conversion and ease agent work with BIK.AI"}):e.jsx(o.TitleMedium,{children:"Experience reduced Average Handling Time of your tickets with Bik.AI!"})})]})),e.jsxs("div",Object.assign({style:{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",gap:"16px",padding:"24px"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:"4px"}},{children:[e.jsx(o.TitleLarge,{children:"Activate BIK AI"}),e.jsx(s.default,{width:32,height:32})]})),"CHATBOT"===g?e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"}},{children:[e.jsx(o.BodyPrimary,Object.assign({color:"#888888"},{children:"Sync your Shopify Data to Bik.AI to supercharge it with"})),e.jsx(o.BodyPrimary,Object.assign({color:"#888888"},{children:"your store’s data to start personalizing it to your"})),e.jsx(o.BodyPrimary,Object.assign({color:"#888888"},{children:"customers!"}))]})):e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center"}},{children:[e.jsxs(o.BodyPrimary,Object.assign({color:"#888888"},{children:["Sync your Shopify Data to Bik.AI to supercharge it with"," "]})),e.jsx(o.BodyPrimary,Object.assign({color:"#888888"},{children:"your store’s data to start responding to customer"})),e.jsx(o.BodyPrimary,Object.assign({color:"#888888"},{children:"queries right away!"}))]}))]})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:"12px",paddingBottom:"24px",paddingLeft:"24px",paddingRight:"24px"}},{children:[e.jsx(r.Button,{buttonText:"Learn More",buttonType:"text",size:"large",onClick:x}),e.jsx(r.Button,{buttonText:"Sync Shopify Data",size:"large",style:{backgroundColor:t.COLORS.background.brand},onClick:d})]}))]})}))};
 //# sourceMappingURL=ActivateBikAI.js.map