@bikdotai/bik-component-library 0.0.838 → 0.0.839-1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/BikGiftedChat/GiftedChat/GiftedChat.js +1 -1
- package/dist/cjs/components/BikGiftedChat/GiftedChat/GiftedChat.js.map +1 -1
- package/dist/cjs/components/accordion/Accordion.js +1 -1
- package/dist/cjs/components/accordion/Accordion.js.map +1 -1
- package/dist/cjs/components/add-variableV2/AddVariableV2.js +1 -1
- package/dist/cjs/components/add-variableV2/AddVariableV2.js.map +1 -1
- package/dist/cjs/components/alerts/Alert.js +1 -1
- package/dist/cjs/components/alerts/Alert.js.map +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsTrend.js +1 -1
- package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsTrend.js.map +1 -1
- package/dist/cjs/components/avatar/Avatar.js +1 -1
- package/dist/cjs/components/avatar/Avatar.js.map +1 -1
- package/dist/esm/components/BikGiftedChat/GiftedChat/GiftedChat.js +66 -61
- package/dist/esm/components/BikGiftedChat/GiftedChat/GiftedChat.js.map +1 -1
- package/dist/esm/components/accordion/Accordion.js +5 -4
- package/dist/esm/components/accordion/Accordion.js.map +1 -1
- package/dist/esm/components/add-variableV2/AddVariableV2.js +41 -39
- package/dist/esm/components/add-variableV2/AddVariableV2.js.map +1 -1
- package/dist/esm/components/alerts/Alert.js +1 -0
- package/dist/esm/components/alerts/Alert.js.map +1 -1
- package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsTrend.js +51 -43
- package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsTrend.js.map +1 -1
- package/dist/esm/components/avatar/Avatar.js +19 -17
- package/dist/esm/components/avatar/Avatar.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),n=require("react"),_=require("../../../constants/Theme.js"),ee=require("../../../hooks/useWindowSize.js"),te=require("../../TypographyStyle.js"),p=require("../Bubble/types.js"),se=require("./Day.js"),W=require("./messageHelpers.js"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),n=require("react"),_=require("../../../constants/Theme.js"),ee=require("../../../hooks/useWindowSize.js"),te=require("../../TypographyStyle.js"),p=require("../Bubble/types.js"),se=require("./Day.js"),W=require("./messageHelpers.js"),C=require("./scrollHooks.js"),V=require("./types.js"),b=require("./utils.js"),re=require("../../button/Button.js"),ne=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},oe=ne(n),I=204,ie=({text:l,isExpanded:g,onToggle:i})=>{const a=n.useRef(null),[A,R]=n.useState(!1);return n.useEffect(()=>{const y=a.current;if(y){y.style.maxHeight="none";const P=y.scrollHeight>I;y.style.maxHeight=g?"none":`${I}px`,R(P)}},[l,g]),s.jsxs(s.Fragment,{children:[s.jsx("div",{ref:a,style:{maxHeight:g?"none":I,overflow:"hidden"},children:s.jsx(te.BodySecondary,{children:l})}),A&&s.jsx(re.Button,{buttonType:"text",size:"xs",buttonText:g?"Show less":"Read more",onClick:i})]})},le=(l,g)=>{const{messages:i=[],user:a,renderBubble:A,renderAvatar:R,renderDay:y,renderLoading:P,renderChatEmpty:q,listViewProps:O={},renderAvatarOnTop:D=!1,showUserAvatar:j=!1,showAvatarForEveryMessage:L=!1,inverted:ce=!1,messageIdGenerator:B,topThreshold:U=b.TOP_THRESHOLD,appType:u=p.GiftedChatAppType.Bik,maxHeight:E,isActivityMessage:M,...N}=l||{},T=ee.useWindowSize(),Y=n.useRef(null),x=b.normalizeRef(O.ref||g,Y),S=n.useRef({isInitialMount:!0,isUserScrolling:!1,isLoadingOldMessages:!1,isAtBottom:!0,hasTriggeredEndReached:!1,lastMessagesLength:i?.length??0,previousScrollHeight:0,previousScrollTop:0,scrollTimeout:null}),[$,X]=n.useState(new Set),f=n.useMemo(()=>!i||i.length===0?[]:[...i].reverse(),[i]),J=n.useMemo(()=>{const e=[];return f.forEach((o,r)=>{const t=f[r-1];r===0||!b.isSameDay(o,t)?e.push({createdAt:o.createdAt,indices:[r]}):e[e.length-1].indices.push(r)}),e},[f]),G=C.useScrollToBottom(x,S);n.useImperativeHandle(g,()=>x.current),C.useInitialMountScroll(x,S,f.length,G),C.useScrollCleanup(S),C.useRestoreScrollPosition(x,S,f.length),C.useAutoScrollOnNewMessages(x,S,i.length,G),C.useResizeObserverForFirstMessage(i?.[0],S,G,B);const K=C.useScrollHandler(S,O.onEndReached,O.onScroll,U),h=n.useCallback(e=>!!(e&&a&&e.user?._id===a._id),[a]),z=n.useCallback((e,o)=>j?L||h(e)?!0:!o||(M?M(e):!1)||(M?M(o):!1)||o.user._id!==e.user._id:!1,[j,L,M,h]),Q=n.useCallback((e,o,r)=>{const t=h(e)?"right":"left",d=o?.user?._id!==e?.user?._id,m=r?.user?._id!==e?.user?._id,w={currentMessage:e,previousMessage:o,nextMessage:r,position:t,user:a,...N};if(A)return A(w);const c=e._id,k=$.has(c);return s.jsx("div",{style:{maxWidth:u===p.GiftedChatAppType.Manifest?"50%":"70%",width:"fit-content",...u===p.GiftedChatAppType.Manifest?{minWidth:"130px"}:{},padding:"8px 12px",borderTopLeftRadius:t==="left"?d?12:2:12,borderTopRightRadius:12,borderBottomLeftRadius:t==="left"?m?12:2:12,borderBottomRightRadius:12,border:t==="left"&&u===p.GiftedChatAppType.Manifest?"1px solid rgb(224, 224, 224)":"none",backgroundColor:t==="right"?u===p.GiftedChatAppType.Manifest?_.COLORS.background.brandTint:_.COLORS.background.brandLight:u===p.GiftedChatAppType.Manifest?_.COLORS.background.pureWhite:_.COLORS.background.inactive,color:_.COLORS.content.primary,wordBreak:"break-word"},children:s.jsx(ie,{text:e.text??"",isExpanded:k,onToggle:()=>X(H=>{const v=new Set(H);return k?v.delete(c):v.add(c),v})})})},[h,a,A,N,$]),F=n.useCallback((e,o,r)=>{if(!z(e,o))return null;const d=h(e)?"right":"left";return R?R({currentMessage:e,previousMessage:o,nextMessage:r,position:d,user:a,renderAvatarOnTop:D,showUserAvatar:j,showAvatarForEveryMessage:L}):null},[z,h,a,D,j,L,R]);return!i||i.length===0?q?s.jsx(s.Fragment,{children:q()}):null:s.jsxs("div",{ref:x,style:{flex:1,overflowY:"auto",overflowX:"hidden",display:"flex",flexDirection:"column",...E?{maxHeight:E,height:E}:{},...O.style},onScroll:K,children:[s.jsx("div",{style:{flex:"1 0 auto"}}),s.jsx("div",{style:{display:"flex",flexDirection:"column",flex:"0 0 auto"},children:J.map((e,o)=>s.jsxs("div",{children:[y?s.jsx("div",{style:{position:"sticky",top:0,zIndex:2},children:y({createdAt:e.createdAt})}):s.jsx(se.Day,{createdAt:e.createdAt,appType:u,scrollRootRef:x}),e.indices.map(r=>{const t=f[r],d=t?.channelId===V.MESSAGE_CHANNELS.SMTP||t?.channelName===V.MESSAGE_CHANNELS.SMTP,m=d?"left":h(t)?"right":"left",w=f[r-1],c=f[r+1],k=W.getMessagePlacement(t,m),H=W.shouldCenterAlign(t),v=t.category===b.Constants.ChatActivity.Category.ACTIVITY&&t.activityType===b.Constants.ChatActivity.Type.PRIVATE_NOTE,Z=t.category===b.Constants.ChatActivity.Category.ACTIVITY&&!v;return s.jsx(oe.default.Fragment,{children:s.jsxs("div",{style:{...T?{margin:"0 4px"}:{},...H?{}:{display:"flex",alignItems:"flex-start"},...u!==p.GiftedChatAppType.Manifest?!T&&m==="right"?{marginLeft:8}:{marginRight:8}:{},...d&&!v&&T?{marginLeft:8,marginRight:8}:{},...d&&v?{marginRight:16}:{},justifyContent:k,marginBottom:d?c?24:0:c?c?.user?._id===t?.user?._id?h(t)?20:4:20:0,...Z?{marginLeft:0,marginBottom:0}:{}},children:[!T&&m==="left"&&s.jsx("div",{style:{marginRight:"4px",width:"24px",flexShrink:0},children:F(t,w,c)}),s.jsx("div",{id:`message-bubble-${t._id??`${r}-${B?.()??"id"}`}`,style:u===p.GiftedChatAppType.Manifest?{width:"100%"}:T||d?{display:"flex",flexGrow:1,width:"100%"}:{},children:Q(t,w,c)}),!T&&m==="right"&&s.jsx("div",{style:{marginLeft:"4px",width:"24px",flexShrink:0,alignSelf:"flex-start"},children:F(t,w,c)})]})},t._id??`${r}-${B?.()??"id"}`)})]},`day-group-${o}`))})]})},ae=n.forwardRef(le);exports.default=ae;
|
|
2
2
|
//# sourceMappingURL=GiftedChat.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GiftedChat.js","sources":["../../../../../src/components/BikGiftedChat/GiftedChat/GiftedChat.tsx"],"sourcesContent":["import React, {\n\tforwardRef,\n\tuseCallback,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { COLORS } from '../../../constants/Theme';\nimport { useWindowSize } from '../../../hooks/useWindowSize';\nimport { Button } from '../../button';\nimport { BodySecondary } from '../../TypographyStyle';\nimport { BubbleProps, GiftedChatAppType } from '../Bubble/types';\nimport { IMessage } from '../types';\nimport { Day } from './Day';\nimport { getMessagePlacement, shouldCenterAlign } from './messageHelpers';\nimport {\n\tuseAutoScrollOnNewMessages,\n\tuseInitialMountScroll,\n\tuseResizeObserverForFirstMessage,\n\tuseRestoreScrollPosition,\n\tuseScrollCleanup,\n\tuseScrollHandler,\n\tuseScrollToBottom,\n} from './scrollHooks';\nimport { AvatarProps, GiftedChatProps, MESSAGE_CHANNELS } from './types';\nimport { isSameDay, normalizeRef } from './utils';\nimport { Constants, TOP_THRESHOLD } from './utils';\n\nconst COLLAPSED_MAX_HEIGHT = 204;\n\nconst CollapsibleBubbleText: React.FC<{\n\ttext: string;\n\tisExpanded: boolean;\n\tonToggle: () => void;\n}> = ({ text, isExpanded, onToggle }) => {\n\tconst textRef = useRef<HTMLDivElement>(null);\n\tconst [isOverflowing, setIsOverflowing] = useState(false);\n\n\tuseEffect(() => {\n\t\tconst el = textRef.current;\n\t\tif (el) {\n\t\t\t// Temporarily remove max-height to measure true scroll height\n\t\t\tel.style.maxHeight = 'none';\n\t\t\tconst overflows = el.scrollHeight > COLLAPSED_MAX_HEIGHT;\n\t\t\tel.style.maxHeight = isExpanded ? 'none' : `${COLLAPSED_MAX_HEIGHT}px`;\n\t\t\tsetIsOverflowing(overflows);\n\t\t}\n\t}, [text, isExpanded]);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tref={textRef}\n\t\t\t\tstyle={{\n\t\t\t\t\tmaxHeight: isExpanded ? 'none' : COLLAPSED_MAX_HEIGHT,\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<BodySecondary>{text}</BodySecondary>\n\t\t\t</div>\n\t\t\t{isOverflowing && (\n\t\t\t\t<Button\n\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\tbuttonText={isExpanded ? 'Show less' : 'Read more'}\n\t\t\t\t\tonClick={onToggle}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst GiftedChatInner = (\n\tprops: Omit<GiftedChatProps<IMessage>, 'ref'>,\n\tforwardedRef: React.Ref<HTMLDivElement>,\n) => {\n\tconst {\n\t\tmessages = [],\n\t\tuser,\n\t\trenderBubble,\n\t\trenderAvatar,\n\t\trenderDay,\n\t\trenderLoading,\n\t\trenderChatEmpty,\n\t\tlistViewProps = {},\n\t\trenderAvatarOnTop = false,\n\t\tshowUserAvatar = false,\n\t\tshowAvatarForEveryMessage = false,\n\t\tinverted = false,\n\t\tmessageIdGenerator,\n\t\ttopThreshold = TOP_THRESHOLD,\n\t\tappType = GiftedChatAppType.Bik,\n\t\tmaxHeight,\n\t\tisActivityMessage,\n\t\t...extraProps\n\t} = props || {};\n\n\tconst isMobile = useWindowSize();\n\n\tconst internalScrollRef = useRef<HTMLDivElement | null>(null);\n\tconst scrollRef = normalizeRef(\n\t\tlistViewProps.ref || forwardedRef,\n\t\tinternalScrollRef,\n\t);\n\n\tconst scrollState = useRef({\n\t\tisInitialMount: true,\n\t\tisUserScrolling: false,\n\t\tisLoadingOldMessages: false,\n\t\tisAtBottom: true,\n\t\thasTriggeredEndReached: false,\n\t\tlastMessagesLength: messages?.length ?? 0,\n\t\tpreviousScrollHeight: 0,\n\t\tpreviousScrollTop: 0,\n\t\tscrollTimeout: null,\n\t});\n\n\tconst [expandedMessages, setExpandedMessages] = useState<\n\t\tSet<string | number>\n\t>(new Set());\n\n\t// Reverse messages so newest appears last in DOM (natural reading order)\n\tconst reversedMessages = useMemo(() => {\n\t\tif (!messages || messages.length === 0) return [] as IMessage[];\n\t\treturn [...messages].reverse() as IMessage[];\n\t}, [messages]);\n\n\t// Group consecutive same-day messages so each day separator can stick\n\t// within its own section and get pushed out by the next day's separator.\n\tconst dayGroups = useMemo(() => {\n\t\tconst groups: { createdAt: IMessage['createdAt']; indices: number[] }[] =\n\t\t\t[];\n\t\treversedMessages.forEach((message, index) => {\n\t\t\tconst previousMessage = reversedMessages[index - 1];\n\t\t\tif (index === 0 || !isSameDay(message, previousMessage)) {\n\t\t\t\tgroups.push({ createdAt: message.createdAt, indices: [index] });\n\t\t\t} else {\n\t\t\t\tgroups[groups.length - 1].indices.push(index);\n\t\t\t}\n\t\t});\n\t\treturn groups;\n\t}, [reversedMessages]);\n\n\tconst scrollToBottom = useScrollToBottom(scrollRef, scrollState);\n\n\tuseImperativeHandle(forwardedRef, () => scrollRef.current!);\n\n\tuseInitialMountScroll(\n\t\tscrollRef,\n\t\tscrollState,\n\t\treversedMessages.length,\n\t\tscrollToBottom,\n\t);\n\n\tuseScrollCleanup(scrollState);\n\n\tuseRestoreScrollPosition(scrollRef, scrollState, reversedMessages.length);\n\n\tuseAutoScrollOnNewMessages(\n\t\tscrollRef,\n\t\tscrollState,\n\t\tmessages.length,\n\t\tscrollToBottom,\n\t);\n\n\tuseResizeObserverForFirstMessage(\n\t\tmessages?.[0],\n\t\tscrollState,\n\t\tscrollToBottom,\n\t\tmessageIdGenerator,\n\t);\n\n\tconst handleScroll = useScrollHandler(\n\t\tscrollState,\n\t\tlistViewProps.onEndReached,\n\t\tlistViewProps.onScroll,\n\t\ttopThreshold,\n\t);\n\n\t// Check if a message belongs to the current user\n\tconst isUserMessage = useCallback(\n\t\t(message: IMessage) => {\n\t\t\treturn Boolean(message && user && message.user?._id === user._id);\n\t\t},\n\t\t[user],\n\t);\n\n\t// Determine if avatar should be shown for this message\n\tconst shouldShowAvatar = useCallback(\n\t\t(message: IMessage, previousMessage?: IMessage) => {\n\t\t\tif (!showUserAvatar) return false;\n\t\t\tif (showAvatarForEveryMessage) return true;\n\n\t\t\t// Show avatar on the first message in a consecutive sender stack,\n\t\t\t// or when an activity interrupts the stack, or when the current message itself is an activity\n\t\t\treturn (\n\t\t\t\t!previousMessage ||\n\t\t\t\t(isActivityMessage ? isActivityMessage(message) : false) ||\n\t\t\t\t(isActivityMessage ? isActivityMessage(previousMessage) : false) ||\n\t\t\t\tpreviousMessage.user._id !== message.user._id\n\t\t\t);\n\t\t},\n\t\t[showUserAvatar, showAvatarForEveryMessage, isActivityMessage],\n\t);\n\n\t// Render a message bubble (or call custom renderBubble)\n\tconst renderMessageBubble = useCallback(\n\t\t(message: IMessage, previousMessage?: IMessage, nextMessage?: IMessage) => {\n\t\t\tconst position = isUserMessage(message) ? 'right' : 'left';\n\t\t\tconst isTopOfStack = previousMessage?.user?._id !== message?.user?._id;\n\t\t\tconst isBottomOfStack = nextMessage?.user?._id !== message?.user?._id;\n\n\t\t\tconst bubbleProps: BubbleProps<IMessage> = {\n\t\t\t\tcurrentMessage: message,\n\t\t\t\tpreviousMessage,\n\t\t\t\tnextMessage,\n\t\t\t\tposition,\n\t\t\t\tuser,\n\t\t\t\t...extraProps,\n\t\t\t};\n\n\t\t\t// Use custom render function if provided\n\t\t\tif (renderBubble) {\n\t\t\t\treturn renderBubble(bubbleProps);\n\t\t\t}\n\n\t\t\t// Default bubble rendering\n\t\t\tconst messageId = message._id;\n\t\t\tconst isExpanded = expandedMessages.has(messageId);\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tmaxWidth: appType === GiftedChatAppType.Manifest ? '50%' : '70%',\n\t\t\t\t\t\twidth: 'fit-content',\n\t\t\t\t\t\t...(appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t? { minWidth: '130px' }\n\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\tpadding: '8px 12px',\n\t\t\t\t\t\tborderTopLeftRadius:\n\t\t\t\t\t\t\tposition === 'left' ? (isTopOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\t\tposition === 'right' ? (isTopOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\t\tposition === 'left' ? (isBottomOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\t\tposition === 'right' ? (isBottomOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborder:\n\t\t\t\t\t\t\tposition === 'left' && appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t? '1px solid rgb(224, 224, 224)'\n\t\t\t\t\t\t\t\t: 'none',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\tposition === 'right'\n\t\t\t\t\t\t\t\t? appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t? COLORS.background.brandTint\n\t\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t\t: appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t? COLORS.background.pureWhite\n\t\t\t\t\t\t\t\t: COLORS.background.inactive,\n\t\t\t\t\t\tcolor: COLORS.content.primary,\n\t\t\t\t\t\twordBreak: 'break-word',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<CollapsibleBubbleText\n\t\t\t\t\t\ttext={message.text ?? ''}\n\t\t\t\t\t\tisExpanded={isExpanded}\n\t\t\t\t\t\tonToggle={() =>\n\t\t\t\t\t\t\tsetExpandedMessages((prev) => {\n\t\t\t\t\t\t\t\tconst next = new Set(prev);\n\t\t\t\t\t\t\t\tif (isExpanded) next.delete(messageId);\n\t\t\t\t\t\t\t\telse next.add(messageId);\n\t\t\t\t\t\t\t\treturn next;\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</div>\n\t\t\t);\n\t\t},\n\t\t[isUserMessage, user, renderBubble, extraProps, expandedMessages],\n\t);\n\n\t// Render a message avatar (or call custom renderAvatar)\n\tconst renderMessageAvatar = useCallback(\n\t\t(message: IMessage, previousMessage?: IMessage, nextMessage?: IMessage) => {\n\t\t\tconst shouldShow = shouldShowAvatar(message, previousMessage);\n\n\t\t\tif (!shouldShow) return null;\n\n\t\t\tconst position = isUserMessage(message) ? 'right' : 'left';\n\n\t\t\tconst avatarProps: AvatarProps<IMessage> = {\n\t\t\t\tcurrentMessage: message,\n\t\t\t\tpreviousMessage,\n\t\t\t\tnextMessage,\n\t\t\t\tposition,\n\t\t\t\tuser,\n\t\t\t\trenderAvatarOnTop,\n\t\t\t\tshowUserAvatar,\n\t\t\t\tshowAvatarForEveryMessage,\n\t\t\t};\n\n\t\t\treturn renderAvatar ? renderAvatar(avatarProps) : null;\n\t\t},\n\t\t[\n\t\t\tshouldShowAvatar,\n\t\t\tisUserMessage,\n\t\t\tuser,\n\t\t\trenderAvatarOnTop,\n\t\t\tshowUserAvatar,\n\t\t\tshowAvatarForEveryMessage,\n\t\t\trenderAvatar,\n\t\t],\n\t);\n\n\t// Render: Empty State\n\tif (!messages || messages.length === 0) {\n\t\treturn renderChatEmpty ? <>{renderChatEmpty()}</> : null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={scrollRef as React.RefObject<HTMLDivElement>}\n\t\t\tstyle={{\n\t\t\t\tflex: 1,\n\t\t\t\toverflowY: 'auto',\n\t\t\t\toverflowX: 'hidden',\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tflexDirection: 'column',\n\t\t\t\t...(maxHeight ? { maxHeight, height: maxHeight } : {}),\n\t\t\t\t...listViewProps.style,\n\t\t\t}}\n\t\t\tonScroll={handleScroll}\n\t\t>\n\t\t\t{/* Spacer to push messages to bottom (newest appears last in DOM) */}\n\t\t\t<div style={{ flex: '1 0 auto' }} />\n\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tflex: '0 0 auto',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{dayGroups.map((group, groupIndex) => (\n\t\t\t\t\t<div key={`day-group-${groupIndex}`}>\n\t\t\t\t\t\t{/* Day separator — sticks to top while this day scrolls past */}\n\t\t\t\t\t\t{renderDay ? (\n\t\t\t\t\t\t\t<div style={{ position: 'sticky', top: 0, zIndex: 2 }}>\n\t\t\t\t\t\t\t\t{renderDay({ createdAt: group.createdAt })}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Day\n\t\t\t\t\t\t\t\tcreatedAt={group.createdAt}\n\t\t\t\t\t\t\t\tappType={appType}\n\t\t\t\t\t\t\t\tscrollRootRef={scrollRef}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{group.indices.map((index) => {\n\t\t\t\t\t\t\tconst message = reversedMessages[index];\n\t\t\t\t\t\t\tconst isSmtp =\n\t\t\t\t\t\t\t\tmessage?.['channelId'] === MESSAGE_CHANNELS.SMTP ||\n\t\t\t\t\t\t\t\tmessage?.['channelName'] === MESSAGE_CHANNELS.SMTP;\n\t\t\t\t\t\t\tconst position = isSmtp\n\t\t\t\t\t\t\t\t? 'left'\n\t\t\t\t\t\t\t\t: isUserMessage(message)\n\t\t\t\t\t\t\t\t? 'right'\n\t\t\t\t\t\t\t\t: 'left';\n\t\t\t\t\t\t\tconst previousMessage = reversedMessages[index - 1];\n\t\t\t\t\t\t\tconst nextMessage = reversedMessages[index + 1];\n\t\t\t\t\t\t\tconst placement = getMessagePlacement(message, position);\n\t\t\t\t\t\t\tconst isCentered = shouldCenterAlign(message);\n\t\t\t\t\t\t\t// Check if message is a private note\n\t\t\t\t\t\t\tconst isPrivateNote =\n\t\t\t\t\t\t\t\tmessage['category'] ===\n\t\t\t\t\t\t\t\t\tConstants.ChatActivity.Category.ACTIVITY &&\n\t\t\t\t\t\t\t\tmessage['activityType'] ===\n\t\t\t\t\t\t\t\t\tConstants.ChatActivity.Type.PRIVATE_NOTE;\n\t\t\t\t\t\t\tconst isActivity =\n\t\t\t\t\t\t\t\tmessage['category'] ===\n\t\t\t\t\t\t\t\t\tConstants.ChatActivity.Category.ACTIVITY && !isPrivateNote;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<React.Fragment\n\t\t\t\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\t\t\t\tmessage._id ?? `${index}-${messageIdGenerator?.() ?? 'id'}`\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{/* Message container */}\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\t...(isMobile ? { margin: '0 4px' } : {}),\n\t\t\t\t\t\t\t\t\t\t\t...(isCentered\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\t: { display: 'flex', alignItems: 'flex-start' }),\n\t\t\t\t\t\t\t\t\t\t\t...(appType !== GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t\t\t\t? !isMobile && position === 'right'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { marginLeft: 8 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: { marginRight: 8 }\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...(isSmtp && !isPrivateNote && isMobile\n\t\t\t\t\t\t\t\t\t\t\t\t? { marginLeft: 8, marginRight: 8 }\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...(isSmtp && isPrivateNote ? { marginRight: 16 } : {}),\n\t\t\t\t\t\t\t\t\t\t\tjustifyContent: placement,\n\t\t\t\t\t\t\t\t\t\t\tmarginBottom: isSmtp\n\t\t\t\t\t\t\t\t\t\t\t\t? // SMTP: flat 24px between mails, no same/different-user split.\n\t\t\t\t\t\t\t\t\t\t\t\t nextMessage\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 24\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 0\n\t\t\t\t\t\t\t\t\t\t\t\t: nextMessage\n\t\t\t\t\t\t\t\t\t\t\t\t? nextMessage?.user?._id === message?.user?._id\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 4\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 20\n\t\t\t\t\t\t\t\t\t\t\t\t: 0,\n\t\t\t\t\t\t\t\t\t\t\t// Activity cards: no left/bottom margin.\n\t\t\t\t\t\t\t\t\t\t\t...(isActivity ? { marginLeft: 0, marginBottom: 0 } : {}),\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{/* Left avatar or placeholder (for mobile, avatar is hidden) */}\n\t\t\t\t\t\t\t\t\t\t{!isMobile && position === 'left' && (\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\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tmarginRight: '4px',\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\t\t\tflexShrink: 0,\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{renderMessageAvatar(\n\t\t\t\t\t\t\t\t\t\t\t\t\tmessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tpreviousMessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextMessage,\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\n\t\t\t\t\t\t\t\t\t\t{/* Message bubble */}\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tid={`message-bubble-${\n\t\t\t\t\t\t\t\t\t\t\t\tmessage._id ??\n\t\t\t\t\t\t\t\t\t\t\t\t`${index}-${messageIdGenerator?.() ?? 'id'}`\n\t\t\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\t\t\tappType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { width: '100%' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: isMobile || isSmtp\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { display: 'flex', flexGrow: 1, width: '100%' }\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}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{renderMessageBubble(\n\t\t\t\t\t\t\t\t\t\t\t\tmessage,\n\t\t\t\t\t\t\t\t\t\t\t\tpreviousMessage,\n\t\t\t\t\t\t\t\t\t\t\t\tnextMessage,\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t\t\t{/* Right avatar or placeholder (for mobile, avatar is hidden) */}\n\t\t\t\t\t\t\t\t\t\t{!isMobile && position === 'right' && (\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\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tmarginLeft: '4px',\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\talignSelf: 'flex-start',\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{renderMessageAvatar(\n\t\t\t\t\t\t\t\t\t\t\t\t\tmessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tpreviousMessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextMessage,\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</React.Fragment>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default forwardRef<HTMLDivElement, GiftedChatProps<IMessage>>(\n\tGiftedChatInner,\n);\n"],"names":["COLLAPSED_MAX_HEIGHT","CollapsibleBubbleText","text","isExpanded","onToggle","textRef","useRef","isOverflowing","setIsOverflowing","useState","useEffect","el","overflows","jsxs","Fragment","jsx","BodySecondary","Button","GiftedChatInner","props","forwardedRef","messages","user","renderBubble","renderAvatar","renderDay","renderLoading","renderChatEmpty","listViewProps","renderAvatarOnTop","showUserAvatar","showAvatarForEveryMessage","inverted","messageIdGenerator","topThreshold","TOP_THRESHOLD","appType","GiftedChatAppType","maxHeight","isActivityMessage","extraProps","isMobile","useWindowSize","internalScrollRef","scrollRef","normalizeRef","scrollState","expandedMessages","setExpandedMessages","reversedMessages","useMemo","dayGroups","groups","message","index","previousMessage","isSameDay","scrollToBottom","useScrollToBottom","useImperativeHandle","useInitialMountScroll","useScrollCleanup","useRestoreScrollPosition","useAutoScrollOnNewMessages","useResizeObserverForFirstMessage","handleScroll","useScrollHandler","isUserMessage","useCallback","shouldShowAvatar","renderMessageBubble","nextMessage","position","isTopOfStack","isBottomOfStack","bubbleProps","messageId","COLORS","prev","next","renderMessageAvatar","group","groupIndex","Day","isSmtp","MESSAGE_CHANNELS","placement","getMessagePlacement","isCentered","shouldCenterAlign","isPrivateNote","Constants","isActivity","React","GiftedChat","forwardRef"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"GiftedChat.js","sources":["../../../../../src/components/BikGiftedChat/GiftedChat/GiftedChat.tsx"],"sourcesContent":["import React, {\n\tforwardRef,\n\tuseCallback,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { COLORS } from '../../../constants/Theme';\nimport { useWindowSize } from '../../../hooks/useWindowSize';\nimport { Button } from '../../button';\nimport { BodySecondary } from '../../TypographyStyle';\nimport { BubbleProps, GiftedChatAppType } from '../Bubble/types';\nimport { IMessage } from '../types';\nimport { Day } from './Day';\nimport { getMessagePlacement, shouldCenterAlign } from './messageHelpers';\nimport {\n\tuseAutoScrollOnNewMessages,\n\tuseInitialMountScroll,\n\tuseResizeObserverForFirstMessage,\n\tuseRestoreScrollPosition,\n\tuseScrollCleanup,\n\tuseScrollHandler,\n\tuseScrollToBottom,\n} from './scrollHooks';\nimport { AvatarProps, GiftedChatProps, MESSAGE_CHANNELS } from './types';\nimport { isSameDay, normalizeRef } from './utils';\nimport { Constants, TOP_THRESHOLD } from './utils';\n\nconst COLLAPSED_MAX_HEIGHT = 204;\n\nconst CollapsibleBubbleText: React.FC<{\n\ttext: string;\n\tisExpanded: boolean;\n\tonToggle: () => void;\n}> = ({ text, isExpanded, onToggle }) => {\n\tconst textRef = useRef<HTMLDivElement>(null);\n\tconst [isOverflowing, setIsOverflowing] = useState(false);\n\n\tuseEffect(() => {\n\t\tconst el = textRef.current;\n\t\tif (el) {\n\t\t\t// Temporarily remove max-height to measure true scroll height\n\t\t\tel.style.maxHeight = 'none';\n\t\t\tconst overflows = el.scrollHeight > COLLAPSED_MAX_HEIGHT;\n\t\t\tel.style.maxHeight = isExpanded ? 'none' : `${COLLAPSED_MAX_HEIGHT}px`;\n\t\t\tsetIsOverflowing(overflows);\n\t\t}\n\t}, [text, isExpanded]);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tref={textRef}\n\t\t\t\tstyle={{\n\t\t\t\t\tmaxHeight: isExpanded ? 'none' : COLLAPSED_MAX_HEIGHT,\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<BodySecondary>{text}</BodySecondary>\n\t\t\t</div>\n\t\t\t{isOverflowing && (\n\t\t\t\t<Button\n\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\tbuttonText={isExpanded ? 'Show less' : 'Read more'}\n\t\t\t\t\tonClick={onToggle}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst GiftedChatInner = (\n\tprops: Omit<GiftedChatProps<IMessage>, 'ref'>,\n\tforwardedRef: React.Ref<HTMLDivElement>,\n) => {\n\tconst {\n\t\tmessages = [],\n\t\tuser,\n\t\trenderBubble,\n\t\trenderAvatar,\n\t\trenderDay,\n\t\trenderLoading,\n\t\trenderChatEmpty,\n\t\tlistViewProps = {},\n\t\trenderAvatarOnTop = false,\n\t\tshowUserAvatar = false,\n\t\tshowAvatarForEveryMessage = false,\n\t\tinverted = false,\n\t\tmessageIdGenerator,\n\t\ttopThreshold = TOP_THRESHOLD,\n\t\tappType = GiftedChatAppType.Bik,\n\t\tmaxHeight,\n\t\tisActivityMessage,\n\t\t...extraProps\n\t} = props || {};\n\n\tconst isMobile = useWindowSize();\n\n\tconst internalScrollRef = useRef<HTMLDivElement | null>(null);\n\tconst scrollRef = normalizeRef(\n\t\tlistViewProps.ref || forwardedRef,\n\t\tinternalScrollRef,\n\t);\n\n\tconst scrollState = useRef({\n\t\tisInitialMount: true,\n\t\tisUserScrolling: false,\n\t\tisLoadingOldMessages: false,\n\t\tisAtBottom: true,\n\t\thasTriggeredEndReached: false,\n\t\tlastMessagesLength: messages?.length ?? 0,\n\t\tpreviousScrollHeight: 0,\n\t\tpreviousScrollTop: 0,\n\t\tscrollTimeout: null,\n\t});\n\n\tconst [expandedMessages, setExpandedMessages] = useState<\n\t\tSet<string | number>\n\t>(new Set());\n\n\t// Reverse messages so newest appears last in DOM (natural reading order)\n\tconst reversedMessages = useMemo(() => {\n\t\tif (!messages || messages.length === 0) return [] as IMessage[];\n\t\treturn [...messages].reverse() as IMessage[];\n\t}, [messages]);\n\n\t// Group consecutive same-day messages so each day separator can stick\n\t// within its own section and get pushed out by the next day's separator.\n\tconst dayGroups = useMemo(() => {\n\t\tconst groups: { createdAt: IMessage['createdAt']; indices: number[] }[] =\n\t\t\t[];\n\t\treversedMessages.forEach((message, index) => {\n\t\t\tconst previousMessage = reversedMessages[index - 1];\n\t\t\tif (index === 0 || !isSameDay(message, previousMessage)) {\n\t\t\t\tgroups.push({ createdAt: message.createdAt, indices: [index] });\n\t\t\t} else {\n\t\t\t\tgroups[groups.length - 1].indices.push(index);\n\t\t\t}\n\t\t});\n\t\treturn groups;\n\t}, [reversedMessages]);\n\n\tconst scrollToBottom = useScrollToBottom(scrollRef, scrollState);\n\n\tuseImperativeHandle(forwardedRef, () => scrollRef.current!);\n\n\tuseInitialMountScroll(\n\t\tscrollRef,\n\t\tscrollState,\n\t\treversedMessages.length,\n\t\tscrollToBottom,\n\t);\n\n\tuseScrollCleanup(scrollState);\n\n\tuseRestoreScrollPosition(scrollRef, scrollState, reversedMessages.length);\n\n\tuseAutoScrollOnNewMessages(\n\t\tscrollRef,\n\t\tscrollState,\n\t\tmessages.length,\n\t\tscrollToBottom,\n\t);\n\n\tuseResizeObserverForFirstMessage(\n\t\tmessages?.[0],\n\t\tscrollState,\n\t\tscrollToBottom,\n\t\tmessageIdGenerator,\n\t);\n\n\tconst handleScroll = useScrollHandler(\n\t\tscrollState,\n\t\tlistViewProps.onEndReached,\n\t\tlistViewProps.onScroll,\n\t\ttopThreshold,\n\t);\n\n\t// Check if a message belongs to the current user\n\tconst isUserMessage = useCallback(\n\t\t(message: IMessage) => {\n\t\t\treturn Boolean(message && user && message.user?._id === user._id);\n\t\t},\n\t\t[user],\n\t);\n\n\t// Determine if avatar should be shown for this message\n\tconst shouldShowAvatar = useCallback(\n\t\t(message: IMessage, previousMessage?: IMessage) => {\n\t\t\tif (!showUserAvatar) return false;\n\t\t\tif (showAvatarForEveryMessage) return true;\n\n\t\t\tif (isUserMessage(message)) return true;\n\n\t\t\t// Show avatar on the first message in a consecutive sender stack,\n\t\t\t// or when an activity interrupts the stack, or when the current message itself is an activity\n\t\t\treturn (\n\t\t\t\t!previousMessage ||\n\t\t\t\t(isActivityMessage ? isActivityMessage(message) : false) ||\n\t\t\t\t(isActivityMessage ? isActivityMessage(previousMessage) : false) ||\n\t\t\t\tpreviousMessage.user._id !== message.user._id\n\t\t\t);\n\t\t},\n\t\t[\n\t\t\tshowUserAvatar,\n\t\t\tshowAvatarForEveryMessage,\n\t\t\tisActivityMessage,\n\t\t\tisUserMessage,\n\t\t],\n\t);\n\n\t// Render a message bubble (or call custom renderBubble)\n\tconst renderMessageBubble = useCallback(\n\t\t(message: IMessage, previousMessage?: IMessage, nextMessage?: IMessage) => {\n\t\t\tconst position = isUserMessage(message) ? 'right' : 'left';\n\t\t\tconst isTopOfStack = previousMessage?.user?._id !== message?.user?._id;\n\t\t\tconst isBottomOfStack = nextMessage?.user?._id !== message?.user?._id;\n\n\t\t\tconst bubbleProps: BubbleProps<IMessage> = {\n\t\t\t\tcurrentMessage: message,\n\t\t\t\tpreviousMessage,\n\t\t\t\tnextMessage,\n\t\t\t\tposition,\n\t\t\t\tuser,\n\t\t\t\t...extraProps,\n\t\t\t};\n\n\t\t\t// Use custom render function if provided\n\t\t\tif (renderBubble) {\n\t\t\t\treturn renderBubble(bubbleProps);\n\t\t\t}\n\n\t\t\t// Default bubble rendering\n\t\t\tconst messageId = message._id;\n\t\t\tconst isExpanded = expandedMessages.has(messageId);\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tmaxWidth: appType === GiftedChatAppType.Manifest ? '50%' : '70%',\n\t\t\t\t\t\twidth: 'fit-content',\n\t\t\t\t\t\t...(appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t? { minWidth: '130px' }\n\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\tpadding: '8px 12px',\n\t\t\t\t\t\tborderTopLeftRadius:\n\t\t\t\t\t\t\tposition === 'left' ? (isTopOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborderTopRightRadius: 12,\n\t\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\t\tposition === 'left' ? (isBottomOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborderBottomRightRadius: 12,\n\t\t\t\t\t\tborder:\n\t\t\t\t\t\t\tposition === 'left' && appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t? '1px solid rgb(224, 224, 224)'\n\t\t\t\t\t\t\t\t: 'none',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\tposition === 'right'\n\t\t\t\t\t\t\t\t? appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t? COLORS.background.brandTint\n\t\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t\t: appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t? COLORS.background.pureWhite\n\t\t\t\t\t\t\t\t: COLORS.background.inactive,\n\t\t\t\t\t\tcolor: COLORS.content.primary,\n\t\t\t\t\t\twordBreak: 'break-word',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<CollapsibleBubbleText\n\t\t\t\t\t\ttext={message.text ?? ''}\n\t\t\t\t\t\tisExpanded={isExpanded}\n\t\t\t\t\t\tonToggle={() =>\n\t\t\t\t\t\t\tsetExpandedMessages((prev) => {\n\t\t\t\t\t\t\t\tconst next = new Set(prev);\n\t\t\t\t\t\t\t\tif (isExpanded) next.delete(messageId);\n\t\t\t\t\t\t\t\telse next.add(messageId);\n\t\t\t\t\t\t\t\treturn next;\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</div>\n\t\t\t);\n\t\t},\n\t\t[isUserMessage, user, renderBubble, extraProps, expandedMessages],\n\t);\n\n\t// Render a message avatar (or call custom renderAvatar)\n\tconst renderMessageAvatar = useCallback(\n\t\t(message: IMessage, previousMessage?: IMessage, nextMessage?: IMessage) => {\n\t\t\tconst shouldShow = shouldShowAvatar(message, previousMessage);\n\n\t\t\tif (!shouldShow) return null;\n\n\t\t\tconst position = isUserMessage(message) ? 'right' : 'left';\n\n\t\t\tconst avatarProps: AvatarProps<IMessage> = {\n\t\t\t\tcurrentMessage: message,\n\t\t\t\tpreviousMessage,\n\t\t\t\tnextMessage,\n\t\t\t\tposition,\n\t\t\t\tuser,\n\t\t\t\trenderAvatarOnTop,\n\t\t\t\tshowUserAvatar,\n\t\t\t\tshowAvatarForEveryMessage,\n\t\t\t};\n\n\t\t\treturn renderAvatar ? renderAvatar(avatarProps) : null;\n\t\t},\n\t\t[\n\t\t\tshouldShowAvatar,\n\t\t\tisUserMessage,\n\t\t\tuser,\n\t\t\trenderAvatarOnTop,\n\t\t\tshowUserAvatar,\n\t\t\tshowAvatarForEveryMessage,\n\t\t\trenderAvatar,\n\t\t],\n\t);\n\n\t// Render: Empty State\n\tif (!messages || messages.length === 0) {\n\t\treturn renderChatEmpty ? <>{renderChatEmpty()}</> : null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={scrollRef as React.RefObject<HTMLDivElement>}\n\t\t\tstyle={{\n\t\t\t\tflex: 1,\n\t\t\t\toverflowY: 'auto',\n\t\t\t\toverflowX: 'hidden',\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tflexDirection: 'column',\n\t\t\t\t...(maxHeight ? { maxHeight, height: maxHeight } : {}),\n\t\t\t\t...listViewProps.style,\n\t\t\t}}\n\t\t\tonScroll={handleScroll}\n\t\t>\n\t\t\t{/* Spacer to push messages to bottom (newest appears last in DOM) */}\n\t\t\t<div style={{ flex: '1 0 auto' }} />\n\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tflex: '0 0 auto',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{dayGroups.map((group, groupIndex) => (\n\t\t\t\t\t<div key={`day-group-${groupIndex}`}>\n\t\t\t\t\t\t{/* Day separator — sticks to top while this day scrolls past */}\n\t\t\t\t\t\t{renderDay ? (\n\t\t\t\t\t\t\t<div style={{ position: 'sticky', top: 0, zIndex: 2 }}>\n\t\t\t\t\t\t\t\t{renderDay({ createdAt: group.createdAt })}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Day\n\t\t\t\t\t\t\t\tcreatedAt={group.createdAt}\n\t\t\t\t\t\t\t\tappType={appType}\n\t\t\t\t\t\t\t\tscrollRootRef={scrollRef}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{group.indices.map((index) => {\n\t\t\t\t\t\t\tconst message = reversedMessages[index];\n\t\t\t\t\t\t\tconst isSmtp =\n\t\t\t\t\t\t\t\tmessage?.['channelId'] === MESSAGE_CHANNELS.SMTP ||\n\t\t\t\t\t\t\t\tmessage?.['channelName'] === MESSAGE_CHANNELS.SMTP;\n\t\t\t\t\t\t\tconst position = isSmtp\n\t\t\t\t\t\t\t\t? 'left'\n\t\t\t\t\t\t\t\t: isUserMessage(message)\n\t\t\t\t\t\t\t\t? 'right'\n\t\t\t\t\t\t\t\t: 'left';\n\t\t\t\t\t\t\tconst previousMessage = reversedMessages[index - 1];\n\t\t\t\t\t\t\tconst nextMessage = reversedMessages[index + 1];\n\t\t\t\t\t\t\tconst placement = getMessagePlacement(message, position);\n\t\t\t\t\t\t\tconst isCentered = shouldCenterAlign(message);\n\t\t\t\t\t\t\t// Check if message is a private note\n\t\t\t\t\t\t\tconst isPrivateNote =\n\t\t\t\t\t\t\t\tmessage['category'] ===\n\t\t\t\t\t\t\t\t\tConstants.ChatActivity.Category.ACTIVITY &&\n\t\t\t\t\t\t\t\tmessage['activityType'] ===\n\t\t\t\t\t\t\t\t\tConstants.ChatActivity.Type.PRIVATE_NOTE;\n\t\t\t\t\t\t\tconst isActivity =\n\t\t\t\t\t\t\t\tmessage['category'] ===\n\t\t\t\t\t\t\t\t\tConstants.ChatActivity.Category.ACTIVITY && !isPrivateNote;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<React.Fragment\n\t\t\t\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\t\t\t\tmessage._id ?? `${index}-${messageIdGenerator?.() ?? 'id'}`\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{/* Message container */}\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\t...(isMobile ? { margin: '0 4px' } : {}),\n\t\t\t\t\t\t\t\t\t\t\t...(isCentered\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\t: { display: 'flex', alignItems: 'flex-start' }),\n\t\t\t\t\t\t\t\t\t\t\t...(appType !== GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t\t\t\t? !isMobile && position === 'right'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { marginLeft: 8 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: { marginRight: 8 }\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...(isSmtp && !isPrivateNote && isMobile\n\t\t\t\t\t\t\t\t\t\t\t\t? { marginLeft: 8, marginRight: 8 }\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...(isSmtp && isPrivateNote ? { marginRight: 16 } : {}),\n\t\t\t\t\t\t\t\t\t\t\tjustifyContent: placement,\n\t\t\t\t\t\t\t\t\t\t\tmarginBottom: isSmtp\n\t\t\t\t\t\t\t\t\t\t\t\t? // SMTP: flat 24px between mails, no same/different-user split.\n\t\t\t\t\t\t\t\t\t\t\t\t nextMessage\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 24\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 0\n\t\t\t\t\t\t\t\t\t\t\t\t: nextMessage\n\t\t\t\t\t\t\t\t\t\t\t\t? nextMessage?.user?._id === message?.user?._id\n\t\t\t\t\t\t\t\t\t\t\t\t\t? isUserMessage(message)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 4\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 20\n\t\t\t\t\t\t\t\t\t\t\t\t: 0,\n\t\t\t\t\t\t\t\t\t\t\t// Activity cards: no left/bottom margin.\n\t\t\t\t\t\t\t\t\t\t\t...(isActivity ? { marginLeft: 0, marginBottom: 0 } : {}),\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{/* Left avatar or placeholder (for mobile, avatar is hidden) */}\n\t\t\t\t\t\t\t\t\t\t{!isMobile && position === 'left' && (\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\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tmarginRight: '4px',\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\t\t\tflexShrink: 0,\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{renderMessageAvatar(\n\t\t\t\t\t\t\t\t\t\t\t\t\tmessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tpreviousMessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextMessage,\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\n\t\t\t\t\t\t\t\t\t\t{/* Message bubble */}\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tid={`message-bubble-${\n\t\t\t\t\t\t\t\t\t\t\t\tmessage._id ??\n\t\t\t\t\t\t\t\t\t\t\t\t`${index}-${messageIdGenerator?.() ?? 'id'}`\n\t\t\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\t\t\tappType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { width: '100%' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: isMobile || isSmtp\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { display: 'flex', flexGrow: 1, width: '100%' }\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}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{renderMessageBubble(\n\t\t\t\t\t\t\t\t\t\t\t\tmessage,\n\t\t\t\t\t\t\t\t\t\t\t\tpreviousMessage,\n\t\t\t\t\t\t\t\t\t\t\t\tnextMessage,\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t\t\t{/* Right avatar or placeholder (for mobile, avatar is hidden) */}\n\t\t\t\t\t\t\t\t\t\t{!isMobile && position === 'right' && (\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\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tmarginLeft: '4px',\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\talignSelf: 'flex-start',\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{renderMessageAvatar(\n\t\t\t\t\t\t\t\t\t\t\t\t\tmessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tpreviousMessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextMessage,\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</React.Fragment>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default forwardRef<HTMLDivElement, GiftedChatProps<IMessage>>(\n\tGiftedChatInner,\n);\n"],"names":["COLLAPSED_MAX_HEIGHT","CollapsibleBubbleText","text","isExpanded","onToggle","textRef","useRef","isOverflowing","setIsOverflowing","useState","useEffect","el","overflows","jsxs","Fragment","jsx","BodySecondary","Button","GiftedChatInner","props","forwardedRef","messages","user","renderBubble","renderAvatar","renderDay","renderLoading","renderChatEmpty","listViewProps","renderAvatarOnTop","showUserAvatar","showAvatarForEveryMessage","inverted","messageIdGenerator","topThreshold","TOP_THRESHOLD","appType","GiftedChatAppType","maxHeight","isActivityMessage","extraProps","isMobile","useWindowSize","internalScrollRef","scrollRef","normalizeRef","scrollState","expandedMessages","setExpandedMessages","reversedMessages","useMemo","dayGroups","groups","message","index","previousMessage","isSameDay","scrollToBottom","useScrollToBottom","useImperativeHandle","useInitialMountScroll","useScrollCleanup","useRestoreScrollPosition","useAutoScrollOnNewMessages","useResizeObserverForFirstMessage","handleScroll","useScrollHandler","isUserMessage","useCallback","shouldShowAvatar","renderMessageBubble","nextMessage","position","isTopOfStack","isBottomOfStack","bubbleProps","messageId","COLORS","prev","next","renderMessageAvatar","group","groupIndex","Day","isSmtp","MESSAGE_CHANNELS","placement","getMessagePlacement","isCentered","shouldCenterAlign","isPrivateNote","Constants","isActivity","React","GiftedChat","forwardRef"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react"),l=require("../TypographyStyle.js"),s=require("./Accordion.style.js"),u=require("./AccordionArrow.js"),g=require("../button/Button.js"),f=require("../icon-button/IconButton.js"),x=e=>{const[i,h]=c.useState(!1),o=c.useRef(null),n=c.useRef(null);c.useEffect(()=>{e.autoOpen&&a(e.autoOpen,{})},[e.autoOpen]),c.useEffect(()=>{e.isOpen!==void 0&&a(e.isOpen,{})},[e.isOpen]);const a=(t,d)=>{!n.current||!o.current||d.type==="keydown"&&d.key!=="Enter"||(t!==i&&h(t),t?(n.current.style.maxHeight=(e.childrenMaxHeight??n.current.scrollHeight)+"px",o.current.style.transform="rotate(180deg)",o.current.style.transition="transform 0.25s ease-in-out",n.current.style.transition="max-height 0.25s ease-in-out"):(n.current.style.maxHeight="",o.current.style.transform="rotate(0deg)",o.current.style.transition="transform 0.25s ease-in-out",n.current.style.transition="padding 0s"),e.onToggleAccordion?.(t))};return c.useEffect(()=>{const t=new MutationObserver(()=>{i&&n.current&&(n.current.style.maxHeight=n.current.scrollHeight+"px")});return n.current&&t.observe(n.current,{childList:!0,subtree:!0}),()=>{t.disconnect()}},[i]),c.useEffect(()=>{i&&e?.refresh&&n?.current?.scrollHeight&&!e.childrenMaxHeight&&setTimeout(()=>{n.current.style.maxHeight=n.current.scrollHeight+"px"},100)},[i,e?.refresh,n?.current?.scrollHeight]),r.jsxs(s.default,{className:"accordion",isActive:i,width:e?.width,contentMargin:e?.contentMargin,headerPadding:e.headerPadding,skipHoverState:e.skipHoverHeader,showBorders:e.showBorders,borderColor:e.borderColor,backgroundColor:e.backgroundColor,openDirection:e.openDirection,borderRadius:e.borderRadius,children:[r.jsxs("div",{className:`accordion__overview ${i?"active":""}`,style:e?.containerStyle??{},onClick:t=>a(!i,t),onKeyDown:t=>a(!i,t),role:"button",tabIndex:0,children:[!e.rightActionComponent&&r.jsxs(r.Fragment,{children:[r.jsxs("div",{className:"accordion__overview__header",style:e.headerStyles??{},children:[r.jsxs(s.AccordionHeaderGroup,{children:[typeof e.header=="string"?r.jsx(l.TitleRegular,{children:e?.header}):e.header,e.buttonLinkText&&r.jsx(g.Button,{buttonText:e.buttonLinkText,buttonType:"text",darkMode:!0,onClick:e.onButtonLinkClick})]}),r.jsxs(s.AccordionHeaderGroup2,{children:[e.headerButtons&&r.jsx("div",{className:"accordion__overview__header-buttons",children:e.headerButtons?.map(t=>r.jsx(f.IconButton,{Icon:t.icon,onClick:d=>{d.stopPropagation(),t.onClick()},width:16,height:16,style:t.style,title:t.title},t.title))}),r.jsx(u.default,{arrowColor:e.arrowColor,isNewIcon:!0,ref:o})]})]}),e?.subHeader?e?.subHeader:null]}),e.rightActionComponent&&r.jsxs("div",{className:"accordion__overview__header",children:[r.jsxs("div",{className:"accordion__overview__title-wrapper",children:[r.jsx(u.default,{arrowColor:e.arrowColor,isNewIcon:!0,ref:o}),typeof e.header=="string"?r.jsx(l.TitleRegular,{children:e?.header}):e.header]}),r.jsx("div",{onClick:t=>t.stopPropagation(),onKeyDown:t=>{t.key==="Enter"&&t.stopPropagation()},role:"button",tabIndex:0,children:e.rightActionComponent})]}),e?.caption&&r.jsx("div",{className:"accordion__overview__caption",children:r.jsx(l.BodySecondary,{children:r.jsx("div",{style:e.captionStyle,children:e.caption})})})]}),r.jsx("div",{ref:n,className:"accordion__content",children:e.children})]})};exports.BikAccordion=x;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react"),l=require("../TypographyStyle.js"),s=require("./Accordion.style.js"),u=require("./AccordionArrow.js"),g=require("../button/Button.js"),f=require("../icon-button/IconButton.js"),x=e=>{const[i,h]=c.useState(!1),o=c.useRef(null),n=c.useRef(null);c.useEffect(()=>{e.autoOpen&&a(e.autoOpen,{})},[e.autoOpen]),c.useEffect(()=>{e.isOpen!==void 0&&a(e.isOpen,{})},[e.isOpen]);const a=(t,d)=>{!n.current||!o.current||d.type==="keydown"&&d.key!=="Enter"||(t!==i&&h(t),t?(n.current.style.maxHeight=(e.childrenMaxHeight??n.current.scrollHeight)+"px",o.current.style.transform="rotate(180deg)",o.current.style.transition="transform 0.25s ease-in-out",n.current.style.transition="max-height 0.25s ease-in-out"):(n.current.style.maxHeight="",o.current.style.transform="rotate(0deg)",o.current.style.transition="transform 0.25s ease-in-out",n.current.style.transition="padding 0s"),e.onToggleAccordion?.(t))};return c.useEffect(()=>{const t=new MutationObserver(()=>{i&&n.current&&(n.current.style.maxHeight=n.current.scrollHeight+"px")});return n.current&&t.observe(n.current,{childList:!0,subtree:!0}),()=>{t.disconnect()}},[i]),c.useEffect(()=>{i&&e?.refresh&&n?.current?.scrollHeight&&!e.childrenMaxHeight&&setTimeout(()=>{n.current.style.maxHeight=n.current.scrollHeight+"px"},100)},[i,e?.refresh,n?.current?.scrollHeight]),r.jsxs(s.default,{className:"accordion",isActive:i,width:e?.width,contentMargin:e?.contentMargin,headerPadding:e.headerPadding,skipHoverState:e.skipHoverHeader,showBorders:e.showBorders,borderColor:e.borderColor,backgroundColor:e.backgroundColor,openDirection:e.openDirection,borderRadius:e.borderRadius,children:[r.jsxs("div",{"data-test":"bik-accordion-overview",className:`accordion__overview ${i?"active":""}`,style:e?.containerStyle??{},onClick:t=>a(!i,t),onKeyDown:t=>a(!i,t),role:"button",tabIndex:0,children:[!e.rightActionComponent&&r.jsxs(r.Fragment,{children:[r.jsxs("div",{className:"accordion__overview__header",style:e.headerStyles??{},children:[r.jsxs(s.AccordionHeaderGroup,{children:[typeof e.header=="string"?r.jsx(l.TitleRegular,{children:e?.header}):e.header,e.buttonLinkText&&r.jsx(g.Button,{buttonText:e.buttonLinkText,buttonType:"text",darkMode:!0,onClick:e.onButtonLinkClick})]}),r.jsxs(s.AccordionHeaderGroup2,{children:[e.headerButtons&&r.jsx("div",{className:"accordion__overview__header-buttons",children:e.headerButtons?.map(t=>r.jsx(f.IconButton,{Icon:t.icon,onClick:d=>{d.stopPropagation(),t.onClick()},width:16,height:16,style:t.style,title:t.title},t.title))}),r.jsx(u.default,{arrowColor:e.arrowColor,isNewIcon:!0,ref:o})]})]}),e?.subHeader?e?.subHeader:null]}),e.rightActionComponent&&r.jsxs("div",{className:"accordion__overview__header",children:[r.jsxs("div",{className:"accordion__overview__title-wrapper",children:[r.jsx(u.default,{arrowColor:e.arrowColor,isNewIcon:!0,ref:o}),typeof e.header=="string"?r.jsx(l.TitleRegular,{children:e?.header}):e.header]}),r.jsx("div",{onClick:t=>t.stopPropagation(),onKeyDown:t=>{t.key==="Enter"&&t.stopPropagation()},role:"button",tabIndex:0,children:e.rightActionComponent})]}),e?.caption&&r.jsx("div",{className:"accordion__overview__caption",children:r.jsx(l.BodySecondary,{children:r.jsx("div",{style:e.captionStyle,children:e.caption})})})]}),r.jsx("div",{ref:n,className:"accordion__content",children:e.children})]})};exports.BikAccordion=x;
|
|
2
2
|
//# sourceMappingURL=Accordion.js.map
|
|
@@ -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":["BikAccordion","props","isActive","setIsActive","useState","accordionArrowRef","useRef","accordionContentRef","useEffect","toggleAccordion","state","event","observer","jsxs","AccordionStyle","Fragment","AccordionHeaderGroup","jsx","TitleRegular","Button","AccordionHeaderGroup2","button","IconButton","e","BikAccordionArrow","BodySecondary"],"mappings":"yTAWaA,EAA0CC,GAAU,CAChE,KAAM,CAACC,EAAUC,CAAW,EAAIC,EAAAA,SAAkB,EAAK,EACjDC,EAAoBC,EAAAA,OAAuB,IAAI,EAC/CC,EAAsBD,EAAAA,OAAuB,IAAI,EAEvDE,EAAAA,UAAU,IAAM,CACXP,EAAM,UACTQ,EAAgBR,EAAM,SAAU,EAAE,CAEpC,EAAG,CAACA,EAAM,QAAQ,CAAC,EAGnBO,EAAAA,UAAU,IAAM,CACXP,EAAM,SAAW,QACpBQ,EAAgBR,EAAM,OAAQ,EAAE,CAElC,EAAG,CAACA,EAAM,MAAM,CAAC,EAEjB,MAAMQ,EAAkB,CAACC,EAAgBC,IAAe,CACnD,CAACJ,EAAoB,SAAW,CAACF,EAAkB,SACnDM,EAAM,OAAS,WAAaA,EAAM,MAAQ,UAK1CD,IAAUR,GACbC,EAAYO,CAAK,EAGdA,GACHH,EAAoB,QAAQ,MAAM,WAChCN,EAAM,mBAAqBM,EAAoB,QAAQ,cACxD,KACDF,EAAkB,QAAQ,MAAM,UAAY,iBAC5CA,EAAkB,QAAQ,MAAM,WAC/B,8BACDE,EAAoB,QAAQ,MAAM,WACjC,iCAEDA,EAAoB,QAAQ,MAAM,UAAY,GAC9CF,EAAkB,QAAQ,MAAM,UAAY,eAC5CA,EAAkB,QAAQ,MAAM,WAC/B,8BACDE,EAAoB,QAAQ,MAAM,WAAa,cAGhDN,EAAM,oBAAoBS,CAAK,EAChC,EAGAF,OAAAA,EAAAA,UAAU,IAAM,CACf,MAAMI,EAAW,IAAI,iBAAiB,IAAM,CACvCV,GAAYK,EAAoB,UACnCA,EAAoB,QAAQ,MAAM,UACjCA,EAAoB,QAAQ,aAAe,KAE9C,CAAC,EAED,OAAIA,EAAoB,SACvBK,EAAS,QAAQL,EAAoB,QAAS,CAC7C,UAAW,GACX,QAAS,EAAA,CACT,EAIK,IAAM,CACZK,EAAS,WAAA,CACV,CACD,EAAG,CAACV,CAAQ,CAAC,EAEbM,EAAAA,UAAU,IAAM,CAEdN,GACAD,GAAO,SACPM,GAAqB,SAAS,cAC9B,CAACN,EAAM,mBAEP,WAAW,IAAM,CAChBM,EAAoB,QAAS,MAAM,UAClCA,EAAoB,QAAS,aAAe,IAC9C,EAAG,GAAG,CAER,EAAG,CAACL,EAAUD,GAAO,QAASM,GAAqB,SAAS,YAAY,CAAC,EAGxEM,EAAAA,KAACC,EAAAA,QAAA,CACA,UAAU,YACV,SAAAZ,EACA,MAAOD,GAAO,MACd,cAAeA,GAAO,cACtB,cAAeA,EAAM,cACrB,eAAgBA,EAAM,gBACtB,YAAaA,EAAM,YACnB,YAAaA,EAAM,YACnB,gBAAiBA,EAAM,gBACvB,cAAeA,EAAM,cACrB,aAAcA,EAAM,aAEpB,SAAA,CAAAY,EAAAA,KAAC,MAAA,CACA,UAAW,uBAAuBX,EAAW,SAAW,EAAE,GAC1D,MAAOD,GAAO,gBAAkB,CAAA,EAChC,QAAUU,GAAUF,EAAgB,CAACP,EAAUS,CAAK,EACpD,UAAYA,GAAUF,EAAgB,CAACP,EAAUS,CAAK,EACtD,KAAK,SACL,SAAU,EAET,SAAA,CAAA,CAACV,EAAM,sBACPY,EAAAA,KAAAE,EAAAA,SAAA,CACC,SAAA,CAAAF,EAAAA,KAAC,MAAA,CACA,UAAU,8BACV,MAAOZ,EAAM,cAAgB,CAAA,EAE7B,SAAA,CAAAY,OAACG,EAAAA,qBAAA,CACC,SAAA,CAAA,OAAOf,EAAM,QAAW,SACxBgB,EAAAA,IAACC,EAAAA,cAAc,SAAAjB,GAAO,OAAO,EAE7BA,EAAM,OAENA,EAAM,gBACNgB,EAAAA,IAACE,EAAAA,OAAA,CACA,WAAYlB,EAAM,eAClB,WAAW,OACX,SAAQ,GACR,QAASA,EAAM,iBAAA,CAAA,CAChB,EAEF,SACCmB,EAAAA,sBAAA,CACC,SAAA,CAAAnB,EAAM,qBACL,MAAA,CAAI,UAAU,sCACb,SAAAA,EAAM,eAAe,IAAKoB,GAC1BJ,EAAAA,IAACK,EAAAA,WAAA,CAEA,KAAMD,EAAO,KACb,QAAUE,GAAM,CACfA,EAAE,gBAAA,EACFF,EAAO,QAAA,CACR,EACA,MAAO,GACP,OAAQ,GACR,MAAOA,EAAO,MACd,MAAOA,EAAO,KAAA,EATTA,EAAO,KAAA,CAWb,EACF,EAEDJ,EAAAA,IAACO,EAAAA,QAAA,CACA,WAAYvB,EAAM,WAClB,UAAW,GACX,IAAKI,CAAA,CAAA,CACN,CAAA,CACD,CAAA,CAAA,CAAA,EAEAJ,GAAO,UAAYA,GAAO,UAAY,IAAA,EACxC,EAEAA,EAAM,sBACNY,OAAC,MAAA,CAAI,UAAU,8BACd,SAAA,CAAAA,EAAAA,KAAC,MAAA,CAAI,UAAU,qCACd,SAAA,CAAAI,EAAAA,IAACO,EAAAA,QAAA,CACA,WAAYvB,EAAM,WAClB,UAAW,GACX,IAAKI,CAAA,CAAA,EAEL,OAAOJ,EAAM,QAAW,eACvBiB,EAAAA,aAAA,CAAc,SAAAjB,GAAO,MAAA,CAAO,EAE7BA,EAAM,MAAA,EAER,EACAgB,EAAAA,IAAC,MAAA,CACA,QAAUM,GAAMA,EAAE,gBAAA,EAClB,UAAYA,GAAM,CACbA,EAAE,MAAQ,SAASA,EAAE,gBAAA,CAC1B,EACA,KAAK,SACL,SAAU,EAET,SAAAtB,EAAM,oBAAA,CAAA,CACR,EACD,EAEAA,GAAO,SACPgB,EAAAA,IAAC,MAAA,CAAI,UAAU,+BACd,SAAAA,MAACQ,EAAAA,cAAA,CACA,SAAAR,EAAAA,IAAC,MAAA,CAAI,MAAOhB,EAAM,aAAe,SAAAA,EAAM,QAAQ,EAChD,CAAA,CACD,CAAA,CAAA,CAAA,EAGFgB,EAAAA,IAAC,MAAA,CACA,IAAKV,EACL,UAAU,qBAET,SAAAN,EAAM,QAAA,CAAA,CACR,CAAA,CAAA,CAGH"}
|
|
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\tdata-test=\"bik-accordion-overview\"\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":["BikAccordion","props","isActive","setIsActive","useState","accordionArrowRef","useRef","accordionContentRef","useEffect","toggleAccordion","state","event","observer","jsxs","AccordionStyle","Fragment","AccordionHeaderGroup","jsx","TitleRegular","Button","AccordionHeaderGroup2","button","IconButton","e","BikAccordionArrow","BodySecondary"],"mappings":"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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),J=require("../../assets/icons/back_icon.svg.js"),Q=require("../../assets/icons/chevronRightAlt.svg.js"),I=require("../../assets/icons/cross.svg.js"),X=require("../../assets/icons/plus.svg.js"),Y=require("../../assets/icons/undo.svg.js"),d=require("react"),Z=require("./AddVariableV2.styled.js"),B=require("../../constants/Theme.js"),ee=require("../modals/modal.styled.js"),h=require("../TypographyStyle.js"),L=require("../icon-button/IconButton.js"),ae=require("../searchBar/searchBar.js"),te=require("../switch/Switch.js"),ie=require("../tooltips/Tooltip.js"),se=require("../button/Button.js"),le=d.memo(s=>{const{data:m,hasHeader:H=!0,needsBorder:z=!0,styledCloseBtn:F=!1,readonly:w=!1}=s,[o,P]=d.useState({}),[g,b]=d.useState(),[n,j]=d.useState(""),[c,y]=d.useState(""),[W,u]=d.useState(!0),$=/.*\..*/,[M,C]=d.useState(s.data),[f,A]=d.useState(!0);d.useEffect(()=>{const e={};m.forEach(i=>{e[i.displayName]=[]}),b(e)},[m]),d.useEffect(()=>{T(!0)},[]),d.useEffect(()=>{T(f,!n)},[o,n]),d.useEffect(()=>{A(!0),y(""),x([],n),b(i=>({...i,[n]:[]})),j("");const e=s.data.map(i=>N(i)).filter(i=>i!==null);C(e),e.length>0?u(!0):u(!1)},[s.reRender]),d.useEffect(()=>{let e=s.data;n&&(e=[o[n]]),v(e,f).length>0?u(!0):u(!1)},[c]);const v=(e,i=!1)=>e.flatMap(t=>Object.keys(t.variables).filter(l=>t.variables[l].displayName?.toLowerCase().includes(c.toLowerCase())&&(!i||t.variables[l].isAvailable===i)||S(t.variables[l]))),x=(e,i)=>{const t=m.find(l=>l.displayName===i);if(t){let l=t;e.forEach((r,U)=>{l=l.variables[r]}),P(r=>({...r,[i]:l}))}},S=e=>{let i=!1;if(e.isSubHeader&&e.variables){const t=Object.keys(e.variables);for(let l=0;l<t.length;l++){const r=t[l];if(e.variables&&e.variables[r].displayName.toLowerCase().includes(c.toLowerCase())&&e.variables[r].isAvailable===f){i=!0;break}}}return i},T=(e,i=!1)=>{if(A(e),e){let t=[];if(!n||i)t=s.data.map(l=>N(l)).filter(l=>l!==null);else{const l=o[n];t=s.data.filter(r=>r.displayName===n).map(r=>N(r,l)).filter(r=>r!=null)}C(t),c&&(t=v(t,e)),t.length>0?u(!0):u(!1)}else C(s.data),c?v(s.data,e).length>0?u(!0):u(!1):u(!0)};function N(e,i,t={}){if(i)for(const l in e.variables)if(e.variables[l].displayName===i.displayName)for(const r in e.variables[l].variables)e.variables[l].variables[r].isAvailable&&(t[r]=e.variables[l].variables[r]);else e.variables[l].isSubHeader&&N(e.variables[l],i,t);else for(const l in e.variables)e.variables[l].isAvailable&&(t[l]=e.variables[l]);return Object.keys(t).length===0?null:{...e,variables:t}}const V=e=>{const i=e.item.description;return e.readonly?a.jsx("div",{children:a.jsx(q,{item:e.item,readonly:e.readonly})}):a.jsx(a.Fragment,{children:a.jsx(ie.Tooltip,{body:"",tooltipContent:a.jsx(h.BodyCaption,{color:B.COLORS.content.primaryInverse,style:{whiteSpace:"pre-line",padding:8},children:e.item.isAvailable?i?`• ${i}
|
|
2
|
-
• Recommended here`:"Recommended here":"Not recommended here"}),width:300,delay:300,placement:"bottom",children:a.jsx("div",{children:a.jsx(q,{item:e.item})})})})},q=e=>a.jsx(se.Button,{darkMode:s.enableVariable?s.enableVariable:e.item.isAvailable,size:"chip",disabled:e.readonly?!e.item.isSubHeader:!1,LeadingIcon:e.item.isSubHeader||e.readonly?void 0:X.default,TrailingIcon:()=>e.item.isSubHeader?a.jsx("div",{className:"icon-trailing",style:{display:"flex"},children:a.jsx(Q.default,{})}):a.jsx(a.Fragment,{}),buttonText:e.item.displayName}),k=(e,i)=>f&&!e.isAvailable?a.jsx(a.Fragment,{}):a.jsx("div",{onClick:e.isSubHeader?()=>{v([e],f).length||u(!1),y("");const l=[...g[n],i];x(l,n),b(r=>({...r,[n]:l}))}:()=>{s.customTrigger?(s.customTrigger(e),s.setShowVariable(!1)):s.isEvaluationList?E(e):s.setVariableValue(s.selectWithTypes?{actualValue:e.actualValue,variableType:e.variableType,needsFetching:e.needsFetching}:e.actualValue)},children:a.jsx(V,{item:e,readonly:w})}),R=(e,i)=>{const t=[...g[e.displayName],i];x(t,e.displayName),b(l=>({...l,[e.displayName]:t})),j(e.displayName)},K=e=>/\w+\[\d+\]/g.test(e),E=e=>{if(e.actualValue.match($)){const i=e.actualValue.replace("{{","").replace("}}","").split(".");let t=i[0];i.forEach((l,r)=>{if(r===0)return;if(K(l)){const _=l.match(/(\w+)\[(\d+)\]/);if(_){const p=_[1],G=_[2];t=t+`['${p}'][${G}]`}}else t=t+`['${l}']`}),s.setVariableValue(s.selectWithTypes?{actualValue:t,variableType:e.variableType,needsFetching:e.needsFetching}:t)}else{const i=e.actualValueEval?e.actualValueEval:e.actualValue;s.setVariableValue(s.selectWithTypes?{actualValue:i,variableType:e.variableType,needsFetching:e.needsFetching}:i)}},O=(e,i)=>{if(s.customTrigger)s.customTrigger(e.variables[i]),s.setShowVariable(!1);else if(s.isEvaluationList){const t=e.variables[i];E(t)}else s.setVariableValue(s.selectWithTypes?{actualValue:e.variables[i].actualValue,variableType:e.variables[i].variableType,needsFetching:e.variables[i].needsFetching}:e.variables[i].actualValue)},D=s.isModalState?void 0:{top:`${s.topPosition?s.topPosition:s.pickerSize==="small"?"300px":"60px"}`,left:`${s.leftPosition?s.leftPosition+24:430}px`};return a.jsx("div",{id:"varList",tabIndex:-1,children:a.jsxs(Z.AddVariableStyled,{style:D,onClick:e=>{e.stopPropagation()},pickerSize:s.pickerSize||"large",isModalState:s.isModalState,positionStrategy:s.positionStrategy,zIndex:s.zindex,height:s.height,needsBorder:z,width:s.width,children:[F&&a.jsx(ee.CloseButtonContainer,{onClick:()=>{s.setShowVariable(!1)},style:{zIndex:300},children:a.jsx(I.default,{height:20,width:20,color:B.COLORS.content.secondary})}),s.showVariable&&a.jsxs("div",{className:"popup",children:[a.jsxs("div",{className:"sticky__bar",children:[H&&a.jsxs("div",{className:"header__bar",children:[a.jsx("div",{className:"add__variable",children:"Add a new variable"}),!F&&a.jsx("div",{onClick:()=>{s.setShowVariable(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center"},children:a.jsx(L.IconButton,{iconButtonType:"default",Icon:I.default})})]}),a.jsxs("div",{className:"search__bar",onBlur:e=>{s.onSearchBlur&&s.onSearchBlur(e)},children:[a.jsx(ae.SearchBar,{width:"100%",isEnabled:!0,onChange:e=>{y(e)},onEnter:()=>{},reset:!c,placeholder:"Search...",variant:"default"}),a.jsxs("div",{style:{display:"flex",alignItems:"center",marginTop:8,justifyContent:"space-between"},children:[a.jsx(h.BodySecondary,{style:{color:B.COLORS.content.secondary},children:"Show only recommended variables"}),a.jsx(te.Switch,{value:f,onValueChange:async e=>await T(e)})]})]}),n&&g[n].length>0&&a.jsxs("div",{className:"nav__bar",children:[a.jsxs("div",{className:"left__nav",children:[a.jsx(L.IconButton,{Icon:J.default,style:{color:"#919191",display:"flex"},onClick:()=>{y("");const e=g[n].slice(0,-1);x(e,n),b(i=>({...i,[n]:e})),e.length||j("")}}),a.jsxs("div",{className:"block",children:[a.jsx(h.TitleSmall,{children:o[n].displayName}),o[n].description&&a.jsx(h.BodyCaption,{children:o[n].description})]})]}),a.jsxs("div",{className:"right__nav",children:[a.jsx(L.IconButton,{Icon:Y.default,style:{display:"flex"},onClick:()=>{y(""),x([],n),b(e=>({...e,[n]:[]})),j("")}}),a.jsx("div",{children:"First page"})]})]})]}),!W&&a.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16},children:[a.jsx(h.TitleSmall,{children:"No results found!"}),f?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 "${c}"`})]}),a.jsx("div",{className:"wrapper",children:a.jsx("div",{className:"list__map",children:a.jsxs("div",{className:"items",children:[!n&&M.map(e=>{let i=[];return c&&(i=Object.keys(e.variables).filter(t=>e.variables[t].displayName?.toLowerCase().includes(c.toLowerCase())||S(e.variables[t]))),a.jsxs(a.Fragment,{children:[c?i.length>0?a.jsxs("div",{className:"block",children:[a.jsx("div",{className:"heading__font",children:e?.displayName}),a.jsx(h.BodyCaption,{style:{marginBottom:8,color:"#616161"},children:e?.description})]}):a.jsx(a.Fragment,{}):a.jsxs("div",{className:"block",children:[a.jsx("div",{className:"heading__font",children:e?.displayName}),a.jsx(h.BodyCaption,{style:{marginBottom:8,color:"#616161"},children:e?.description})]}),Object.keys(e.variables).map(t=>c?e.variables[t].displayName?.toLowerCase().includes(c.toLowerCase())||S(e.variables[t])?a.jsx("div",{onClick:e.variables[t].isSubHeader?()=>R(e,t):()=>O(e,t),children:a.jsx(V,{item:e.variables[t],readonly:w})}):a.jsx(a.Fragment,{}):a.jsx("div",{onClick:e.variables[t].isSubHeader?()=>R(e,t):()=>O(e,t),children:a.jsx(V,{item:e.variables[t],readonly:w})}))]})}),n&&a.jsx("div",{className:"list__map",children:a.jsx("div",{className:"items",style:{marginTop:16},children:Object.keys(o[n].variables).map((e,i)=>c?o[n].variables[e].displayName?.toLowerCase().includes(c.toLowerCase())||S(o[n].variables[e])?k(o[n].variables[e],e):a.jsx(a.Fragment,{}):k(o[n].variables[e],e))})})]})})}),a.jsx("div",{className:"bottom__padding"})]})]})})},(s,m)=>!(s.enableVariable!==m.enableVariable||s.leftPosition!==m.leftPosition||s.reRender!==m.reRender));exports.AddVariableV2=le;
|
|
2
|
+
• Recommended here`:"Recommended here":"Not recommended here"}),width:300,delay:300,placement:"bottom",children:a.jsx("div",{children:a.jsx(q,{item:e.item})})})})},q=e=>a.jsx(se.Button,{darkMode:s.enableVariable?s.enableVariable:e.item.isAvailable,size:"chip",disabled:e.readonly?!e.item.isSubHeader:!1,LeadingIcon:e.item.isSubHeader||e.readonly?void 0:X.default,TrailingIcon:()=>e.item.isSubHeader?a.jsx("div",{className:"icon-trailing",style:{display:"flex"},children:a.jsx(Q.default,{})}):a.jsx(a.Fragment,{}),buttonText:e.item.displayName}),k=(e,i)=>f&&!e.isAvailable?a.jsx(a.Fragment,{}):a.jsx("div",{onClick:e.isSubHeader?()=>{v([e],f).length||u(!1),y("");const l=[...g[n],i];x(l,n),b(r=>({...r,[n]:l}))}:()=>{s.customTrigger?(s.customTrigger(e),s.setShowVariable(!1)):s.isEvaluationList?E(e):s.setVariableValue(s.selectWithTypes?{actualValue:e.actualValue,variableType:e.variableType,needsFetching:e.needsFetching}:e.actualValue)},children:a.jsx(V,{item:e,readonly:w})}),R=(e,i)=>{const t=[...g[e.displayName],i];x(t,e.displayName),b(l=>({...l,[e.displayName]:t})),j(e.displayName)},K=e=>/\w+\[\d+\]/g.test(e),E=e=>{if(e.actualValue.match($)){const i=e.actualValue.replace("{{","").replace("}}","").split(".");let t=i[0];i.forEach((l,r)=>{if(r===0)return;if(K(l)){const _=l.match(/(\w+)\[(\d+)\]/);if(_){const p=_[1],G=_[2];t=t+`['${p}'][${G}]`}}else t=t+`['${l}']`}),s.setVariableValue(s.selectWithTypes?{actualValue:t,variableType:e.variableType,needsFetching:e.needsFetching}:t)}else{const i=e.actualValueEval?e.actualValueEval:e.actualValue;s.setVariableValue(s.selectWithTypes?{actualValue:i,variableType:e.variableType,needsFetching:e.needsFetching}:i)}},O=(e,i)=>{if(s.customTrigger)s.customTrigger(e.variables[i]),s.setShowVariable(!1);else if(s.isEvaluationList){const t=e.variables[i];E(t)}else s.setVariableValue(s.selectWithTypes?{actualValue:e.variables[i].actualValue,variableType:e.variables[i].variableType,needsFetching:e.variables[i].needsFetching}:e.variables[i].actualValue)},D=s.isModalState?void 0:{top:`${s.topPosition?s.topPosition:s.pickerSize==="small"?"300px":"60px"}`,left:`${s.leftPosition?s.leftPosition+24:430}px`};return a.jsx("div",{id:"varList",tabIndex:-1,children:a.jsxs(Z.AddVariableStyled,{style:D,onClick:e=>{e.stopPropagation()},pickerSize:s.pickerSize||"large",isModalState:s.isModalState,positionStrategy:s.positionStrategy,zIndex:s.zindex,height:s.height,needsBorder:z,width:s.width,children:[F&&a.jsx(ee.CloseButtonContainer,{onClick:()=>{s.setShowVariable(!1)},style:{zIndex:300},children:a.jsx(I.default,{height:20,width:20,color:B.COLORS.content.secondary})}),s.showVariable&&a.jsxs("div",{className:"popup",children:[a.jsxs("div",{className:"sticky__bar",children:[H&&a.jsxs("div",{className:"header__bar",children:[a.jsx("div",{className:"add__variable",children:"Add a new variable"}),!F&&a.jsx("div",{"data-test":"add-variable-close",onClick:()=>{s.setShowVariable(!1)},style:{display:"flex",alignItems:"center",justifyContent:"center"},children:a.jsx(L.IconButton,{iconButtonType:"default",Icon:I.default})})]}),a.jsxs("div",{className:"search__bar",onBlur:e=>{s.onSearchBlur&&s.onSearchBlur(e)},children:[a.jsx(ae.SearchBar,{width:"100%",isEnabled:!0,onChange:e=>{y(e)},onEnter:()=>{},reset:!c,placeholder:"Search...",variant:"default"}),a.jsxs("div",{style:{display:"flex",alignItems:"center",marginTop:8,justifyContent:"space-between"},children:[a.jsx(h.BodySecondary,{style:{color:B.COLORS.content.secondary},children:"Show only recommended variables"}),a.jsx(te.Switch,{"data-test":"add-variable-recommended-toggle",value:f,onValueChange:async e=>await T(e)})]})]}),n&&g[n].length>0&&a.jsxs("div",{className:"nav__bar",children:[a.jsxs("div",{className:"left__nav",children:[a.jsx(L.IconButton,{Icon:J.default,style:{color:"#919191",display:"flex"},onClick:()=>{y("");const e=g[n].slice(0,-1);x(e,n),b(i=>({...i,[n]:e})),e.length||j("")}}),a.jsxs("div",{className:"block",children:[a.jsx(h.TitleSmall,{children:o[n].displayName}),o[n].description&&a.jsx(h.BodyCaption,{children:o[n].description})]})]}),a.jsxs("div",{className:"right__nav",children:[a.jsx(L.IconButton,{Icon:Y.default,style:{display:"flex"},onClick:()=>{y(""),x([],n),b(e=>({...e,[n]:[]})),j("")}}),a.jsx("div",{children:"First page"})]})]})]}),!W&&a.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",marginTop:16},children:[a.jsx(h.TitleSmall,{children:"No results found!"}),f?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 "${c}"`})]}),a.jsx("div",{className:"wrapper",children:a.jsx("div",{className:"list__map",children:a.jsxs("div",{className:"items",children:[!n&&M.map(e=>{let i=[];return c&&(i=Object.keys(e.variables).filter(t=>e.variables[t].displayName?.toLowerCase().includes(c.toLowerCase())||S(e.variables[t]))),a.jsxs(a.Fragment,{children:[c?i.length>0?a.jsxs("div",{className:"block",children:[a.jsx("div",{className:"heading__font",children:e?.displayName}),a.jsx(h.BodyCaption,{style:{marginBottom:8,color:"#616161"},children:e?.description})]}):a.jsx(a.Fragment,{}):a.jsxs("div",{className:"block",children:[a.jsx("div",{className:"heading__font",children:e?.displayName}),a.jsx(h.BodyCaption,{style:{marginBottom:8,color:"#616161"},children:e?.description})]}),Object.keys(e.variables).map(t=>c?e.variables[t].displayName?.toLowerCase().includes(c.toLowerCase())||S(e.variables[t])?a.jsx("div",{onClick:e.variables[t].isSubHeader?()=>R(e,t):()=>O(e,t),children:a.jsx(V,{item:e.variables[t],readonly:w})}):a.jsx(a.Fragment,{}):a.jsx("div",{onClick:e.variables[t].isSubHeader?()=>R(e,t):()=>O(e,t),children:a.jsx(V,{item:e.variables[t],readonly:w})}))]})}),n&&a.jsx("div",{className:"list__map",children:a.jsx("div",{className:"items",style:{marginTop:16},children:Object.keys(o[n].variables).map((e,i)=>c?o[n].variables[e].displayName?.toLowerCase().includes(c.toLowerCase())||S(o[n].variables[e])?k(o[n].variables[e],e):a.jsx(a.Fragment,{}):k(o[n].variables[e],e))})})]})})}),a.jsx("div",{className:"bottom__padding"})]})]})})},(s,m)=>!(s.enableVariable!==m.enableVariable||s.leftPosition!==m.leftPosition||s.reRender!==m.reRender));exports.AddVariableV2=le;
|
|
3
3
|
//# sourceMappingURL=AddVariableV2.js.map
|
|
@@ -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","value","handleRecommendedToggle","updatePayloadvar","prev","newList","removeUnavailableVariables","shouldShowNoResult","key","hasVariablesInSubheader","stack","variable","temp","level","isAvailable","keys","i","val","firstPage","selectedSubHeader","customerVariables","newVariables","subKey","VariableBoxWithToolTip","description","jsx","VariableBox","Fragment","Tooltip","BodyCaption","COLORS","varProps","Button","PlusIcon","RightFilled","renderPayloadvars","newStack","matchVariable","variableClick","checkIfArray","path","evalVariableValue","index","matches","arrayName","variableCustomClick","variableListInterfaceV2","getStyle","jsxs","AddVariableStyled","CloseButtonContainer","CrossIcon","IconButton","CloseIcon","SearchBar","searchText","BodySecondary","Switch","BackIcon","TitleSmall","UndoIcon","searchList","_","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\tdata-test=\"add-variable-close\"\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\tdata-test=\"add-variable-recommended-toggle\"\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","value","handleRecommendedToggle","updatePayloadvar","prev","newList","removeUnavailableVariables","shouldShowNoResult","key","hasVariablesInSubheader","stack","variable","temp","level","isAvailable","keys","i","val","firstPage","selectedSubHeader","customerVariables","newVariables","subKey","VariableBoxWithToolTip","description","jsx","VariableBox","Fragment","Tooltip","BodyCaption","COLORS","varProps","Button","PlusIcon","RightFilled","renderPayloadvars","newStack","matchVariable","variableClick","checkIfArray","path","evalVariableValue","index","matches","arrayName","variableCustomClick","variableListInterfaceV2","getStyle","jsxs","AddVariableStyled","CloseButtonContainer","CrossIcon","IconButton","CloseIcon","SearchBar","searchText","BodySecondary","Switch","BackIcon","TitleSmall","UndoIcon","searchList","_","next"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("../../assets/icons/cross.svg.js"),n=require("./Alert.styled.js"),i=require("./AlertHelper.js"),l=require("../TypographyStyle.js"),o=require("../../constants/Theme.js"),d=e=>{const c=()=>{e.redirectTo&&window.open(e.redirectTo,"_blank")};return t.jsxs(n.AlertStyle,{type:e.type,contentPosition:e.contentPosition,style:e.containerStyle,children:[t.jsxs(n.AlertContentWrapper,{contentPosition:e.contentPosition,children:[e.icon&&t.jsx("div",{style:{...e?.iconStyle,display:e?.iconStyle?.display||"flex",alignSelf:e?.iconStyle?.alignSelf||"flex-start"},children:t.jsx(e.icon,{color:i.COLOR_CONFIG_MAP[e.type].textColor,height:16,width:16})}),t.jsx(l.BodyCaption,{style:{color:e.textColor||i.COLOR_CONFIG_MAP[e.type].textColor,marginLeft:8,marginRight:4},children:e.text}),e.redirectToText&&e.redirectTo&&t.jsx(l.BodyCaption,{style:{color:o.COLORS.text.brand,cursor:"pointer",textDecoration:"underline"},onClick:()=>{e.redirectTo==="INTERNAL"&&e.handleRedirectButtonClick?e.handleRedirectButtonClick():c()},children:e.redirectToText})]}),e.showCrossButton&&t.jsx(n.CloseIconWrapper,{children:t.jsx(r.default,{width:20,height:20,color:o.COLORS.content.secondary,onClick:()=>{e?.handleCrossIconClick&&e.handleCrossIconClick()}})})]})};exports.Alert=d;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("../../assets/icons/cross.svg.js"),n=require("./Alert.styled.js"),i=require("./AlertHelper.js"),l=require("../TypographyStyle.js"),o=require("../../constants/Theme.js"),d=e=>{const c=()=>{e.redirectTo&&window.open(e.redirectTo,"_blank")};return t.jsxs(n.AlertStyle,{type:e.type,contentPosition:e.contentPosition,style:e.containerStyle,children:[t.jsxs(n.AlertContentWrapper,{contentPosition:e.contentPosition,children:[e.icon&&t.jsx("div",{style:{...e?.iconStyle,display:e?.iconStyle?.display||"flex",alignSelf:e?.iconStyle?.alignSelf||"flex-start"},children:t.jsx(e.icon,{color:i.COLOR_CONFIG_MAP[e.type].textColor,height:16,width:16})}),t.jsx(l.BodyCaption,{style:{color:e.textColor||i.COLOR_CONFIG_MAP[e.type].textColor,marginLeft:8,marginRight:4},children:e.text}),e.redirectToText&&e.redirectTo&&t.jsx(l.BodyCaption,{style:{color:o.COLORS.text.brand,cursor:"pointer",textDecoration:"underline"},onClick:()=>{e.redirectTo==="INTERNAL"&&e.handleRedirectButtonClick?e.handleRedirectButtonClick():c()},children:e.redirectToText})]}),e.showCrossButton&&t.jsx(n.CloseIconWrapper,{children:t.jsx(r.default,{"data-test":"alert-close-button",width:20,height:20,color:o.COLORS.content.secondary,onClick:()=>{e?.handleCrossIconClick&&e.handleCrossIconClick()}})})]})};exports.Alert=d;
|
|
2
2
|
//# sourceMappingURL=Alert.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Alert.js","sources":["../../../../src/components/alerts/Alert.tsx"],"sourcesContent":["import CloseIcon from '@src/assets/icons/cross.svg';\nimport React from 'react';\nimport {\n\tAlertContentWrapper,\n\tAlertStyle,\n\tCloseIconWrapper,\n} from '@src/components/alerts/Alert.styled';\nimport {\n\tALERT_TYPES,\n\tCOLOR_CONFIG_MAP,\n\tCONTENT_POSITION,\n} from '@src/components/alerts/AlertHelper';\nimport { BodyCaption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type AlertProps = {\n\ttype: ALERT_TYPES;\n\ttext: string | React.ReactNode;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\ttextColor?: string;\n\tcontentPosition?: CONTENT_POSITION;\n\tcontainerStyle?: React.CSSProperties;\n\tredirectTo?: string;\n\tredirectToText?: string;\n\ticonStyle?: React.CSSProperties;\n\thandleRedirectButtonClick?: () => void;\n\tshowCrossButton?: boolean;\n\thandleCrossIconClick?: () => void;\n};\n\nexport const Alert: React.FC<AlertProps> = (props) => {\n\tconst handleRedirection = () => {\n\t\tif (props.redirectTo) {\n\t\t\twindow.open(props.redirectTo, '_blank');\n\t\t}\n\t};\n\n\treturn (\n\t\t<AlertStyle\n\t\t\ttype={props.type}\n\t\t\tcontentPosition={props.contentPosition}\n\t\t\tstyle={props.containerStyle}\n\t\t>\n\t\t\t<AlertContentWrapper contentPosition={props.contentPosition}>\n\t\t\t\t{props.icon && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t...props?.iconStyle,\n\t\t\t\t\t\t\tdisplay: props?.iconStyle?.display || 'flex',\n\t\t\t\t\t\t\talignSelf: props?.iconStyle?.alignSelf || 'flex-start',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<props.icon\n\t\t\t\t\t\t\tcolor={COLOR_CONFIG_MAP[props.type].textColor}\n\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<BodyCaption\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: props.textColor || COLOR_CONFIG_MAP[props.type].textColor,\n\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\tmarginRight: 4,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props.text}\n\t\t\t\t</BodyCaption>\n\t\t\t\t{props.redirectToText && props.redirectTo && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: COLORS.text.brand,\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tprops.redirectTo === 'INTERNAL' &&\n\t\t\t\t\t\t\t\tprops.handleRedirectButtonClick\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tprops.handleRedirectButtonClick();\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\thandleRedirection();\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\t\t{props.redirectToText}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t\t</AlertContentWrapper>\n\t\t\t{props.showCrossButton && (\n\t\t\t\t<CloseIconWrapper>\n\t\t\t\t\t<CloseIcon\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (props?.handleCrossIconClick) {\n\t\t\t\t\t\t\t\tprops.handleCrossIconClick();\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</CloseIconWrapper>\n\t\t\t)}\n\t\t</AlertStyle>\n\t);\n};\n"],"names":["Alert","props","handleRedirection","jsxs","AlertStyle","AlertContentWrapper","jsx","COLOR_CONFIG_MAP","BodyCaption","COLORS","CloseIconWrapper","CloseIcon"],"mappings":"wSA8BaA,EAA+BC,GAAU,CACrD,MAAMC,EAAoB,IAAM,CAC3BD,EAAM,YACT,OAAO,KAAKA,EAAM,WAAY,QAAQ,CAExC,EAEA,OACCE,EAAAA,KAACC,EAAAA,WAAA,CACA,KAAMH,EAAM,KACZ,gBAAiBA,EAAM,gBACvB,MAAOA,EAAM,eAEb,SAAA,CAAAE,EAAAA,KAACE,EAAAA,oBAAA,CAAoB,gBAAiBJ,EAAM,gBAC1C,SAAA,CAAAA,EAAM,MACNK,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,GAAGL,GAAO,UACV,QAASA,GAAO,WAAW,SAAW,OACtC,UAAWA,GAAO,WAAW,WAAa,YAAA,EAG3C,SAAAK,EAAAA,IAACL,EAAM,KAAN,CACA,MAAOM,EAAAA,iBAAiBN,EAAM,IAAI,EAAE,UACpC,OAAQ,GACR,MAAO,EAAA,CAAA,CACR,CAAA,EAGFK,EAAAA,IAACE,EAAAA,YAAA,CACA,MAAO,CACN,MAAOP,EAAM,WAAaM,EAAAA,iBAAiBN,EAAM,IAAI,EAAE,UACvD,WAAY,EACZ,YAAa,CAAA,EAGb,SAAAA,EAAM,IAAA,CAAA,EAEPA,EAAM,gBAAkBA,EAAM,YAC9BK,EAAAA,IAACE,EAAAA,YAAA,CACA,MAAO,CACN,MAAOC,EAAAA,OAAO,KAAK,MACnB,OAAQ,UACR,eAAgB,WAAA,EAEjB,QAAS,IAAM,CAEbR,EAAM,aAAe,YACrBA,EAAM,0BAENA,EAAM,0BAAA,EAENC,EAAA,CAEF,EAEC,SAAAD,EAAM,cAAA,CAAA,CACR,EAEF,EACCA,EAAM,iBACNK,EAAAA,IAACI,EAAAA,iBAAA,CACA,SAAAJ,EAAAA,IAACK,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOF,EAAAA,OAAO,QAAQ,UACtB,QAAS,IAAM,CACVR,GAAO,sBACVA,EAAM,qBAAA,CAER,CAAA,CAAA,CACD,CACD,CAAA,CAAA,CAAA,CAIJ"}
|
|
1
|
+
{"version":3,"file":"Alert.js","sources":["../../../../src/components/alerts/Alert.tsx"],"sourcesContent":["import CloseIcon from '@src/assets/icons/cross.svg';\nimport React from 'react';\nimport {\n\tAlertContentWrapper,\n\tAlertStyle,\n\tCloseIconWrapper,\n} from '@src/components/alerts/Alert.styled';\nimport {\n\tALERT_TYPES,\n\tCOLOR_CONFIG_MAP,\n\tCONTENT_POSITION,\n} from '@src/components/alerts/AlertHelper';\nimport { BodyCaption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type AlertProps = {\n\ttype: ALERT_TYPES;\n\ttext: string | React.ReactNode;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\ttextColor?: string;\n\tcontentPosition?: CONTENT_POSITION;\n\tcontainerStyle?: React.CSSProperties;\n\tredirectTo?: string;\n\tredirectToText?: string;\n\ticonStyle?: React.CSSProperties;\n\thandleRedirectButtonClick?: () => void;\n\tshowCrossButton?: boolean;\n\thandleCrossIconClick?: () => void;\n};\n\nexport const Alert: React.FC<AlertProps> = (props) => {\n\tconst handleRedirection = () => {\n\t\tif (props.redirectTo) {\n\t\t\twindow.open(props.redirectTo, '_blank');\n\t\t}\n\t};\n\n\treturn (\n\t\t<AlertStyle\n\t\t\ttype={props.type}\n\t\t\tcontentPosition={props.contentPosition}\n\t\t\tstyle={props.containerStyle}\n\t\t>\n\t\t\t<AlertContentWrapper contentPosition={props.contentPosition}>\n\t\t\t\t{props.icon && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t...props?.iconStyle,\n\t\t\t\t\t\t\tdisplay: props?.iconStyle?.display || 'flex',\n\t\t\t\t\t\t\talignSelf: props?.iconStyle?.alignSelf || 'flex-start',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<props.icon\n\t\t\t\t\t\t\tcolor={COLOR_CONFIG_MAP[props.type].textColor}\n\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<BodyCaption\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tcolor: props.textColor || COLOR_CONFIG_MAP[props.type].textColor,\n\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\tmarginRight: 4,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{props.text}\n\t\t\t\t</BodyCaption>\n\t\t\t\t{props.redirectToText && props.redirectTo && (\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: COLORS.text.brand,\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\ttextDecoration: 'underline',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tprops.redirectTo === 'INTERNAL' &&\n\t\t\t\t\t\t\t\tprops.handleRedirectButtonClick\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tprops.handleRedirectButtonClick();\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\thandleRedirection();\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\t\t{props.redirectToText}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t)}\n\t\t\t</AlertContentWrapper>\n\t\t\t{props.showCrossButton && (\n\t\t\t\t<CloseIconWrapper>\n\t\t\t\t\t<CloseIcon\n\t\t\t\t\t\tdata-test=\"alert-close-button\"\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (props?.handleCrossIconClick) {\n\t\t\t\t\t\t\t\tprops.handleCrossIconClick();\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</CloseIconWrapper>\n\t\t\t)}\n\t\t</AlertStyle>\n\t);\n};\n"],"names":["Alert","props","handleRedirection","jsxs","AlertStyle","AlertContentWrapper","jsx","COLOR_CONFIG_MAP","BodyCaption","COLORS","CloseIconWrapper","CloseIcon"],"mappings":"wSA8BaA,EAA+BC,GAAU,CACrD,MAAMC,EAAoB,IAAM,CAC3BD,EAAM,YACT,OAAO,KAAKA,EAAM,WAAY,QAAQ,CAExC,EAEA,OACCE,EAAAA,KAACC,EAAAA,WAAA,CACA,KAAMH,EAAM,KACZ,gBAAiBA,EAAM,gBACvB,MAAOA,EAAM,eAEb,SAAA,CAAAE,EAAAA,KAACE,EAAAA,oBAAA,CAAoB,gBAAiBJ,EAAM,gBAC1C,SAAA,CAAAA,EAAM,MACNK,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,GAAGL,GAAO,UACV,QAASA,GAAO,WAAW,SAAW,OACtC,UAAWA,GAAO,WAAW,WAAa,YAAA,EAG3C,SAAAK,EAAAA,IAACL,EAAM,KAAN,CACA,MAAOM,EAAAA,iBAAiBN,EAAM,IAAI,EAAE,UACpC,OAAQ,GACR,MAAO,EAAA,CAAA,CACR,CAAA,EAGFK,EAAAA,IAACE,EAAAA,YAAA,CACA,MAAO,CACN,MAAOP,EAAM,WAAaM,EAAAA,iBAAiBN,EAAM,IAAI,EAAE,UACvD,WAAY,EACZ,YAAa,CAAA,EAGb,SAAAA,EAAM,IAAA,CAAA,EAEPA,EAAM,gBAAkBA,EAAM,YAC9BK,EAAAA,IAACE,EAAAA,YAAA,CACA,MAAO,CACN,MAAOC,EAAAA,OAAO,KAAK,MACnB,OAAQ,UACR,eAAgB,WAAA,EAEjB,QAAS,IAAM,CAEbR,EAAM,aAAe,YACrBA,EAAM,0BAENA,EAAM,0BAAA,EAENC,EAAA,CAEF,EAEC,SAAAD,EAAM,cAAA,CAAA,CACR,EAEF,EACCA,EAAM,iBACNK,EAAAA,IAACI,EAAAA,iBAAA,CACA,SAAAJ,EAAAA,IAACK,EAAAA,QAAA,CACA,YAAU,qBACV,MAAO,GACP,OAAQ,GACR,MAAOF,EAAAA,OAAO,QAAQ,UACtB,QAAS,IAAM,CACVR,GAAO,sBACVA,EAAM,qBAAA,CAER,CAAA,CAAA,CACD,CACD,CAAA,CAAA,CAAA,CAIJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("react"),F=require("../shimmer/ShimmerComponent/ShimmerStyled.js"),Q=require("../../utils/DateUtils.js"),l=require("../../constants/Theme.js"),X=require("../../assets/icons/arrow_down.svg.js"),Y=require("../../assets/icons/arrow_up.svg.js"),Z=require("../../assets/icons/info.svg.js"),h=require("../TypographyStyle.js"),$=require("./chart/utils/calcPercentage.js"),z=require("./CommonStyles.js"),M=require("../tooltips/Tooltip.js"),T=require("../tag/Tag.js"),P=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},ee=P(x),te=({title:n,value:r,trendPercent:t,type:a="horizontal",timeline:o,customRange:u,tooltip:j,card:y=!0,rightSeparator:v=!1,size:m="big",share:i=!1,formatVal:w,prefixSymbol:c,trailingIcon:C,onTrailIconClick:q,iconTooltipBody:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("react"),F=require("../shimmer/ShimmerComponent/ShimmerStyled.js"),Q=require("../../utils/DateUtils.js"),l=require("../../constants/Theme.js"),X=require("../../assets/icons/arrow_down.svg.js"),Y=require("../../assets/icons/arrow_up.svg.js"),Z=require("../../assets/icons/info.svg.js"),h=require("../TypographyStyle.js"),$=require("./chart/utils/calcPercentage.js"),z=require("./CommonStyles.js"),M=require("../tooltips/Tooltip.js"),T=require("../tag/Tag.js"),P=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},ee=P(x),te=({title:n,value:r,trendPercent:t,type:a="horizontal",timeline:o,customRange:u,tooltip:j,card:y=!0,rightSeparator:v=!1,size:m="big",share:i=!1,formatVal:w,prefixSymbol:c,trailingIcon:C,onTrailIconClick:q,iconTooltipBody:g,funnelPercent:b,isLoading:s,trendRaw:f,trendRawString:d,suffixText:p,trendStyle:N,trendContainerStyle:W,trendIconStyle:I,containerStyle:U,prevTrendDiff:R,relativePercentageDiff:A,isInternationalStore:L,Icon:O,iconContainerStyle:B,tooltipTimelineText:V,customTimelineText:_})=>{const G=m==="big"?h.TitleLarge:h.TitleMedium,k=typeof t<"u"?t<0?"negative":t===0?"neutral":"positive":void 0,S=typeof t<"u"?i?Math.round(t):Math.abs(Math.round(t)):void 0,H=()=>typeof r>"u"?"--":typeof r=="number"&&w?r>999?L?`${c??""}${$.truncateValueForInternationalStore(r)} ${p??""}`:`${c??""}${$.truncateValueForIndianStore(r)} ${p??""}`:`${c??""}${new Intl.NumberFormat("en-IN",{maximumFractionDigits:2}).format(r)} ${p??""}`:`${c??""}${r} ${p??""}`,J=K=>{const D=Math.abs(K);return D%1!==0?`${D.toFixed(1)} %`:`${D} %`};return e.jsx(z.AnalyticsTrendContainer,{card:y,style:{...U},children:e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:O?12:4,borderRightWidth:v?1:0,borderRightColor:l.COLORS.stroke.primary,borderRightStyle:"solid",paddingLeft:y?0:24,paddingRight:y?0:24,height:"100%",justifyContent:O?"flex-start":"space-between",alignItems:"center",...W??{}},children:[!!O&&e.jsx(z.IconContainer,{style:{...B},children:e.jsx(O,{})}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:4,height:"100%",...N??{}},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[e.jsx(h.BodyCaption,{style:{color:l.COLORS.content.secondary},children:n}),j&&e.jsx(M.Tooltip,{body:j,placement:"right",width:300,children:e.jsx("div",{style:{display:"flex",cursor:"pointer",height:"100%"},children:e.jsx(Z.default,{color:l.COLORS.content.primary,height:16,width:16})})})]}),e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:12,alignItems:"center",...i?{justifyContent:"space-between"}:{}},children:[s&&e.jsx(F.ShimmerComponentStyled,{width:108,height:26}),!s&&e.jsx(G,{style:{color:l.COLORS.content.primary},children:H()}),typeof A=="number"&&e.jsx(T.Tag,{tagText:`${A}%`,theme:"light",type:"neutral"}),a==="horizontal"&&!s&&!i&&e.jsx(E,{timeline:o,customRange:u,percent:S,direction:k,trendRaw:f,trendRawString:d,prefixSymbol:c,trendIconStyle:I,isInternationalStore:L,tooltipTimelineText:V,customTimelineText:_}),s&&!i&&a==="horizontal"&&e.jsx(F.ShimmerComponentStyled,{height:20,width:141,marginTop:6}),a==="vertical"&&!s&&typeof b<"u"&&e.jsx(T.Tag,{tagText:`${b} %`,theme:"light",type:"neutral"}),i&&!s&&typeof S<"u"&&e.jsx(T.Tag,{tagText:`${S} %`,theme:"light",type:"neutral"}),!i&&!s&&R&&R!=0?e.jsx(T.Tag,{tagText:J(R),theme:"light",type:"neutral"}):e.jsx(e.Fragment,{})]}),a==="vertical"&&!s&&!i&&e.jsx("div",{style:{marginTop:10},children:e.jsx(E,{timeline:o,customRange:u,percent:S,direction:k,trendRaw:f,trendRawString:d,prefixSymbol:c,trendIconStyle:I,isInternationalStore:L,tooltipTimelineText:V,customTimelineText:_})}),s&&a==="vertical"&&e.jsx(F.ShimmerComponentStyled,{height:20,width:141,marginTop:6})]}),g&&!s&&e.jsx(M.Tooltip,{body:g,placement:"right",children:C&&e.jsx("div",{"data-test":"analytics-trend-trailing-icon",className:"icon--holder",onClick:q,children:ee.default.createElement(C,{height:20,width:20,color:l.COLORS.content.secondary})})})]})})},E=({percent:n,direction:r,timeline:t,customRange:a,trendRaw:o,trendRawString:u,prefixSymbol:j,trendIconStyle:y,isInternationalStore:v,tooltipTimelineText:m,customTimelineText:i})=>{const w=()=>{let d="--";if(o)return v?d=String($.truncateValueForInternationalStore(Math.abs(o))):d=String($.truncateValueForIndianStore(Math.abs(o))),o<0?"-"+d:d},c=()=>{const d=((o??0)>0?"+":"")+(j??"");return typeof o>"u"?"--":`${d??""}${w()}`},[C,q]=x.useState(c()),[g,b]=x.useState(i||"");x.useEffect(()=>{i||b(t==="today"?"vs yesterday":t==="yesterday"?"vs 1 day before":t==="7 days"?"vs last 7 days":t==="30 days"?"vs last 30 days":t==="custom"&&a?Q.default.getAnalyticsCustomDateTimelineText(a):"")},[t,a]),x.useEffect(()=>{q(c())},[o]);const s=r==="negative"?X.default:Y.default,f=r==="negative"?l.COLORS.background.negative.vibrant:r==="positive"?l.COLORS.background.positive.vibrant:l.COLORS.content.placeholder;return e.jsxs("div",{style:{display:"flex",alignItems:"center",flexDirection:"row",flexWrap:"wrap"},children:[typeof n=="number"&&e.jsx(s,{color:f,height:16,width:16,style:{marginRight:2,...y??{}}}),typeof n=="number"&&r&&e.jsxs(h.Caption,{style:{color:f},children:[r==="neutral"?0:n<1e3?n:">999","%"]}),!!o&&e.jsx(h.Caption,{style:{marginLeft:4,color:l.COLORS.content.placeholder},children:`(${C})`}),!o&&(u?.length||0)>0&&e.jsx(h.Caption,{style:{marginLeft:4,color:l.COLORS.content.placeholder},children:`${u}`}),t&&(m?e.jsx(M.Tooltip,{body:m,placement:"bottom",children:e.jsx(h.Caption,{style:{marginLeft:4,color:l.COLORS.content.placeholder},children:i||g})}):e.jsx(h.Caption,{style:{marginLeft:4,color:l.COLORS.content.placeholder},children:i||g}))]})};exports.AnalyticsTrend=te;
|
|
2
2
|
//# sourceMappingURL=AnalyticsTrend.js.map
|