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

@bikdotai/bik-component-library 0.0.808-beta.0 → 0.0.808

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

Files changed (1557) hide show

package/dist/cjs/components/BikGiftedChat/GiftedChat/Day.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Day.js","sources":["../../../../../src/components/BikGiftedChat/GiftedChat/Day.tsx"],"sourcesContent":["import { differenceInDays, format, isSameYear, startOfDay } from 'date-fns';\nimport React, { useMemo } from 'react';\nimport { COLORS } from '../../../constants/Theme';\nimport { BodyCaption } from '../../TypographyStyle';\nimport { GiftedChatAppType } from '../Bubble/types';\n\n// Props for Day component\nexport interface DayProps {\n\tcreatedAt?: Date \| number \| string;\n\tdateFormat?: string;\n\tdateFormatCalendar?: {\n\t\tsameDay?: string;\n\t\tnextDay?: string;\n\t\tnextWeek?: string;\n\t\tlastDay?: string;\n\t\tlastWeek?: string;\n\t\tsameElse?: string;\n\t};\n\tappType?: GiftedChatAppType;\n}\n\n// Day component - renders date separator in chat\n// Shows formatted date with smart labeling (Today, Yesterday, etc.)\nconst DayComponent: React.FC<DayProps> = ({\n\tcreatedAt,\n\tdateFormat = 'D MMMM YY',\n\tdateFormatCalendar,\n\tappType = GiftedChatAppType.Bik,\n}) => {\n\t// Format date for display with smart labeling\n\tconst dateStr = useMemo(() => {\n\t\tif (createdAt == null) return null;\n\n\t\tlet date: Date;\n\t\tif (typeof createdAt === 'number') {\n\t\t\tdate = startOfDay(new Date(createdAt));\n\t\t} else if (createdAt instanceof Date) {\n\t\t\tdate = startOfDay(createdAt);\n\t\t} else if (typeof createdAt === 'string') {\n\t\t\tdate = startOfDay(new Date(createdAt));\n\t\t} else {\n\t\t\treturn null;\n\t\t}\n\n\t\t// For manifest, always show 'Jan 9, 2026' format\n\t\tif (appType === GiftedChatAppType.Manifest) {\n\t\t\treturn format(date, 'MMM d, yyyy');\n\t\t}\n\n\t\tconst now = startOfDay(new Date());\n\t\t// If not same year, show full date with day of week\n\t\tif (!isSameYear(now, date)) {\n\t\t\treturn format(date, 'EEEE, d MMMM yy');\n\t\t}\n\n\t\tconst daysDiff = differenceInDays(now, date);\n\n\t\t// If today\n\t\tif (daysDiff < 1) {\n\t\t\tif (dateFormatCalendar?.sameDay) {\n\t\t\t\treturn dateFormatCalendar.sameDay.replace(/\\[\|\\]/g, '');\n\t\t\t}\n\t\t\treturn 'Today';\n\t\t}\n\n\t\t// If yesterday\n\t\tif (daysDiff === 1) {\n\t\t\treturn 'Yesterday';\n\t\t}\n\n\t\t// Format: \"Friday, 7 November 25\"\n\t\treturn format(date, 'EEEE, d MMMM yy');\n\t}, [createdAt, dateFormat, dateFormatCalendar, appType]);\n\n\tif (!dateStr) return null;\n\n\tif (appType === GiftedChatAppType.Manifest) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\tmarginTop: 5,\n\t\t\t\t\tmarginBottom: 10,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<span\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackground: 'transparent',\n\t\t\t\t\t\tcolor: '#b2b2b2',\n\t\t\t\t\t\tfontSize: 12,\n\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\tpadding: '2px 8px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{dateStr}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\talignItems: 'center',\n\t\t\t\tjustifyContent: 'center',\n\t\t\t\tmargin: '12px 0px 12px 8px',\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tflex: 1,\n\t\t\t\t\theight: '1px',\n\t\t\t\t\tbackgroundColor: COLORS.stroke.primary,\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tborder: `1px solid ${COLORS.stroke.primary}`,\n\t\t\t\t\tborderRadius: '16px',\n\t\t\t\t\tpadding: '4px 12px',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<BodyCaption style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t{dateStr}\n\t\t\t\t</BodyCaption>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tflex: 1,\n\t\t\t\t\theight: '1px',\n\t\t\t\t\tbackgroundColor: COLORS.stroke.primary,\n\t\t\t\t}}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\n// Export memoized version for performance\nexport const Day = React.memo(DayComponent);\n\nexport default Day;\n"],"names":["DayComponent","createdAt","dateFormat","dateFormatCalendar","appType","GiftedChatAppType","Bik","dateStr","useMemo","date","startOfDay","Date","Manifest","format","now","isSameYear","daysDiff","differenceInDays","sameDay","replace","_jsx","Object","assign","style","display","alignItems","justifyContent","marginTop","marginBottom","children","jsx","background","color","fontSize","fontWeight","padding","_jsxs","margin","flex","height","backgroundColor","COLORS","stroke","primary","border","borderRadius","BodyCaption","content","secondary","Day","React","memo"],"mappings":"uUAuBA,MAAMA,~~EAAmCA~~,~~EACxCC~~,~~YACAC~~,~~aAAa~~,~~YACbC~~,~~qBACAC~~,~~UAAUC~~,EAAiBA,kBAACC,~~QAG5B~~,~~MAAMC~~,EAAUC,EAAAA,SAAQ,KACvB,GAAiB,MAAbP,EAAmB,OAAO,KAE9B,IAAIQ,EACJ,GAAyB,iBAAdR,EACVQ,EAAOC,EAAAA,WAAW,IAAIC,KAAKV,SACrB,GAAIA,aAAqBU,KAC/BF,EAAOC,EAAAA,WAAWT,OACZ,IAAyB,iBAAdA,EAGjB,OAAO,KAFPQ,EAAOC,EAAAA,WAAW,IAAIC,KAAKV,GAG3B,CAGD,GAAIG,IAAYC,EAAiBA,kBAACO,SACjC,OAAOC,EAAMA,OAACJ,EAAM,eAGrB,MAAMK,EAAMJ,EAAAA,WAAW,IAAIC,MAE3B,IAAKI,EAAUA,WAACD,EAAKL,GACpB,OAAOI,EAAMA,OAACJ,EAAM,mBAGrB,MAAMO,EAAWC,EAAAA,iBAAiBH,EAAKL,GAGvC,OAAIO,EAAW,GACVb,eAAAA,EAAoBe,SAChBf,EAAmBe,QAAQC,QAAQ,SAAU,IAE9C,QAIS,IAAbH,EACI,YAIDH,EAAMA,OAACJ,EAAM,kBAAkB,GACpC,CAACR,EAAWC,EAAYC,EAAoBC,IAE/C,OAAKG,EAEDH,IAAYC,EAAiBA,kBAACO,SAEhCQ,MACC,MAAAC,OAAAC,OAAA,CAAAC,MAAO,CACNC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,UAAW,EACXC,aAAc,KAGf,CAAAC,SAAAT,EAAAU,IAAA,OAAAT,OAAAC,OAAA,CACCC,MAAO,CACNQ,WAAY,cACZC,MAAO,UACPC,SAAU,GACVC,WAAY,IACZC,QAAS,YACT,CAAAN,SAEAtB,QAOJ6B,OACC,MAAAf,OAAAC,OAAA,CAAAC,MAAO,CACNC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBW,OAAQ,sBAGT,CAAAR,SAAA,CAAAT,EAAAU,IAAA,MAAA,CACCP,MAAO,CACNe,KAAM,EACNC,OAAQ,MACRC,gBAAiBC,EAAAA,OAAOC,OAAOC,WAGjCvB,EACCU,IAAA,MAAAT,OAAAC,OAAA,CAAAC,MAAO,CACNqB,~~OAAQ~~,~~aAAaH~~,EAAMA,OAACC,OAAOC,UACnCE,aAAc,OACdV,QAAS,aAGV,CAAAN,SAAAT,EAAAU,IAACgB,cAAYzB,OAAAC,OAAA,CAAAC,MAAO,CAAES,MAAOS,EAAAA,OAAOM,QAAQC,YAC1C,CAAAnB,SAAAtB,QAGHa,EACCU,IAAA,MAAA,CAAAP,MAAO,CACNe,KAAM,EACNC,OAAQ,MACRC,gBAAiBC,EAAAA,OAAOC,OAAOC,eA3Dd,IA8Dd,EAKKM,OAAMC,QAAMC,~~KAAKnD~~"}
1	+ {"version":3,"file":"Day.js","sources":["../../../../../src/components/BikGiftedChat/GiftedChat/Day.tsx"],"sourcesContent":["import { differenceInDays, format, isSameYear, startOfDay } from 'date-fns';\nimport React, { useMemo } from 'react';\nimport { COLORS } from '../../../constants/Theme';\nimport { BodyCaption } from '../../TypographyStyle';\nimport { GiftedChatAppType } from '../Bubble/types';\n\n// Props for Day component\nexport interface DayProps {\n\tcreatedAt?: Date \| number \| string;\n\tdateFormat?: string;\n\tdateFormatCalendar?: {\n\t\tsameDay?: string;\n\t\tnextDay?: string;\n\t\tnextWeek?: string;\n\t\tlastDay?: string;\n\t\tlastWeek?: string;\n\t\tsameElse?: string;\n\t};\n\tappType?: GiftedChatAppType;\n}\n\n// Day component - renders date separator in chat\n// Shows formatted date with smart labeling (Today, Yesterday, etc.)\nconst DayComponent: React.FC<DayProps> = ({\n\tcreatedAt,\n\tdateFormat = 'D MMMM YY',\n\tdateFormatCalendar,\n\tappType = GiftedChatAppType.Bik,\n}) => {\n\t// Format date for display with smart labeling\n\tconst dateStr = useMemo(() => {\n\t\tif (createdAt == null) return null;\n\n\t\tlet date: Date;\n\t\tif (typeof createdAt === 'number') {\n\t\t\tdate = startOfDay(new Date(createdAt));\n\t\t} else if (createdAt instanceof Date) {\n\t\t\tdate = startOfDay(createdAt);\n\t\t} else if (typeof createdAt === 'string') {\n\t\t\tdate = startOfDay(new Date(createdAt));\n\t\t} else {\n\t\t\treturn null;\n\t\t}\n\n\t\t// For manifest, always show 'Jan 9, 2026' format\n\t\tif (appType === GiftedChatAppType.Manifest) {\n\t\t\treturn format(date, 'MMM d, yyyy');\n\t\t}\n\n\t\tconst now = startOfDay(new Date());\n\t\t// If not same year, show full date with day of week\n\t\tif (!isSameYear(now, date)) {\n\t\t\treturn format(date, 'EEEE, d MMMM yy');\n\t\t}\n\n\t\tconst daysDiff = differenceInDays(now, date);\n\n\t\t// If today\n\t\tif (daysDiff < 1) {\n\t\t\tif (dateFormatCalendar?.sameDay) {\n\t\t\t\treturn dateFormatCalendar.sameDay.replace(/\\[\|\\]/g, '');\n\t\t\t}\n\t\t\treturn 'Today';\n\t\t}\n\n\t\t// If yesterday\n\t\tif (daysDiff === 1) {\n\t\t\treturn 'Yesterday';\n\t\t}\n\n\t\t// Format: \"Friday, 7 November 25\"\n\t\treturn format(date, 'EEEE, d MMMM yy');\n\t}, [createdAt, dateFormat, dateFormatCalendar, appType]);\n\n\tif (!dateStr) return null;\n\n\tif (appType === GiftedChatAppType.Manifest) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\tmarginTop: 5,\n\t\t\t\t\tmarginBottom: 10,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<span\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackground: 'transparent',\n\t\t\t\t\t\tcolor: '#b2b2b2',\n\t\t\t\t\t\tfontSize: 12,\n\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\tpadding: '2px 8px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{dateStr}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\talignItems: 'center',\n\t\t\t\tjustifyContent: 'center',\n\t\t\t\tmargin: '12px 0px 12px 8px',\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tflex: 1,\n\t\t\t\t\theight: '1px',\n\t\t\t\t\tbackgroundColor: COLORS.stroke.primary,\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tborder: `1px solid ${COLORS.stroke.primary}`,\n\t\t\t\t\tborderRadius: '16px',\n\t\t\t\t\tpadding: '4px 12px',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<BodyCaption style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t{dateStr}\n\t\t\t\t</BodyCaption>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tflex: 1,\n\t\t\t\t\theight: '1px',\n\t\t\t\t\tbackgroundColor: COLORS.stroke.primary,\n\t\t\t\t}}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\n// Export memoized version for performance\nexport const Day = React.memo(DayComponent);\n\nexport default Day;\n"],"names":["DayComponent","_ref","createdAt","dateFormat","dateFormatCalendar","appType","GiftedChatAppType","Bik","dateStr","useMemo","date","startOfDay","Date","Manifest","format","now","isSameYear","daysDiff","differenceInDays","sameDay","replace","_jsx","Object","assign","style","display","alignItems","justifyContent","marginTop","marginBottom","children","jsx","background","color","fontSize","fontWeight","padding","_jsxs","margin","flex","height","backgroundColor","COLORS","stroke","primary","border","borderRadius","BodyCaption","content","secondary","Day","React","memo"],"mappings":"uUAuBA,MAAMA,EAAmCC,IAKpC,IALqCC,UACzCA,EAASC,WACTA,EAAa,YAAWC,mBACxBA,EAAkBC,QAClBA,EAAUC,EAAiBA,kBAACC,KAC5BN,EAEA,MAAMO,EAAUC,EAAAA,SAAQ,KACvB,GAAiB,MAAbP,EAAmB,OAAO,KAE9B,IAAIQ,EACJ,GAAyB,iBAAdR,EACVQ,EAAOC,EAAAA,WAAW,IAAIC,KAAKV,SACrB,GAAIA,aAAqBU,KAC/BF,EAAOC,EAAAA,WAAWT,OACZ,IAAyB,iBAAdA,EAGjB,OAAO,KAFPQ,EAAOC,EAAAA,WAAW,IAAIC,KAAKV,GAG3B,CAGD,GAAIG,IAAYC,EAAiBA,kBAACO,SACjC,OAAOC,EAAMA,OAACJ,EAAM,eAGrB,MAAMK,EAAMJ,EAAAA,WAAW,IAAIC,MAE3B,IAAKI,EAAUA,WAACD,EAAKL,GACpB,OAAOI,EAAMA,OAACJ,EAAM,mBAGrB,MAAMO,EAAWC,EAAAA,iBAAiBH,EAAKL,GAGvC,OAAIO,EAAW,GACVb,eAAAA,EAAoBe,SAChBf,EAAmBe,QAAQC,QAAQ,SAAU,IAE9C,QAIS,IAAbH,EACI,YAIDH,EAAMA,OAACJ,EAAM,kBAAkB,GACpC,CAACR,EAAWC,EAAYC,EAAoBC,IAE/C,OAAKG,EAEDH,IAAYC,EAAiBA,kBAACO,SAEhCQ,MACC,MAAAC,OAAAC,OAAA,CAAAC,MAAO,CACNC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBC,UAAW,EACXC,aAAc,KAGf,CAAAC,SAAAT,EAAAU,IAAA,OAAAT,OAAAC,OAAA,CACCC,MAAO,CACNQ,WAAY,cACZC,MAAO,UACPC,SAAU,GACVC,WAAY,IACZC,QAAS,YACT,CAAAN,SAEAtB,QAOJ6B,OACC,MAAAf,OAAAC,OAAA,CAAAC,MAAO,CACNC,QAAS,OACTC,WAAY,SACZC,eAAgB,SAChBW,OAAQ,sBAGT,CAAAR,SAAA,CAAAT,EAAAU,IAAA,MAAA,CACCP,MAAO,CACNe,KAAM,EACNC,OAAQ,MACRC,gBAAiBC,EAAAA,OAAOC,OAAOC,WAGjCvB,EACCU,IAAA,MAAAT,OAAAC,OAAA,CAAAC,MAAO,CACNqB,OAAqB,aAAAH,EAAMA,OAACC,OAAOC,UACnCE,aAAc,OACdV,QAAS,aAGV,CAAAN,SAAAT,EAAAU,IAACgB,cAAYzB,OAAAC,OAAA,CAAAC,MAAO,CAAES,MAAOS,EAAAA,OAAOM,QAAQC,YAC1C,CAAAnB,SAAAtB,QAGHa,EACCU,IAAA,MAAA,CAAAP,MAAO,CACNe,KAAM,EACNC,OAAQ,MACRC,gBAAiBC,EAAAA,OAAOC,OAAOC,eA3Dd,IA8Dd,EAKKM,OAAMC,QAAMC,KAAKpD"}

package/dist/cjs/components/BikGiftedChat/GiftedChat/GiftedChat.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GiftedChat.js","sources":["../../../../../src/components/BikGiftedChat/GiftedChat/GiftedChat.tsx"],"sourcesContent":["import React, {\n\tforwardRef,\n\tuseCallback,\n\tuseImperativeHandle,\n\tuseMemo,\n\tuseRef,\n} from 'react';\nimport { COLORS } from '../../../constants/Theme';\nimport { useWindowSize } from '../../../hooks/useWindowSize';\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 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\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\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\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, nextMessage?: IMessage) => {\n\t\t\tif (!showUserAvatar) return false;\n\t\t\tif (showAvatarForEveryMessage) return true;\n\n\t\t\t// Show avatar only when next message is from different user\n\t\t\treturn !nextMessage \|\| nextMessage.user._id !== message.user._id;\n\t\t},\n\t\t[showUserAvatar, showAvatarForEveryMessage],\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\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\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\tborderRadius: appType === GiftedChatAppType.Manifest ? 16 : 4,\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<BodySecondary>{message.text}</BodySecondary>\n\t\t\t\t</div>\n\t\t\t);\n\t\t},\n\t\t[isUserMessage, user, renderBubble, extraProps],\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, nextMessage);\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...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{reversedMessages.map((message, index) => {\n\t\t\t\t\tconst position = isUserMessage(message) ? 'right' : 'left';\n\t\t\t\t\tconst previousMessage = reversedMessages[index - 1];\n\t\t\t\t\tconst nextMessage = reversedMessages[index + 1];\n\t\t\t\t\tconst shouldShowDay = !isSameDay(message, previousMessage);\n\t\t\t\t\tconst placement = getMessagePlacement(message, position);\n\t\t\t\t\tconst isCentered = shouldCenterAlign(message);\n\t\t\t\t\tconst isSmtp =\n\t\t\t\t\t\tmessage?.['channelId'] === MESSAGE_CHANNELS.SMTP \|\|\n\t\t\t\t\t\tmessage?.['channelName'] === MESSAGE_CHANNELS.SMTP;\n\t\t\t\t\t// Check if message is a private note\n\t\t\t\t\tconst isPrivateNote =\n\t\t\t\t\t\tmessage['category'] === Constants.ChatActivity.Category.ACTIVITY &&\n\t\t\t\t\t\tmessage['activityType'] ===\n\t\t\t\t\t\t\tConstants.ChatActivity.Type.PRIVATE_NOTE;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<React.Fragment\n\t\t\t\t\t\t\tkey={message._id ?? `${index}-${messageIdGenerator?.() ?? 'id'}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{/ Day separator /}\n\t\t\t\t\t\t\t{shouldShowDay &&\n\t\t\t\t\t\t\t\t(renderDay ? (\n\t\t\t\t\t\t\t\t\trenderDay({ createdAt: message.createdAt })\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<Day createdAt={message.createdAt} appType={appType} />\n\t\t\t\t\t\t\t\t))}\n\n\t\t\t\t\t\t\t{/ Message container /}\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t...(isMobile ? { margin: '0 4px' } : {}),\n\t\t\t\t\t\t\t\t\t...(isCentered ? {} : { display: 'flex' }),\n\t\t\t\t\t\t\t\t\t...(appType !== GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t\t? !isMobile && message?.user?._id === 2\n\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: { marginRight: 8 }\n\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t\t...(isSmtp && !isPrivateNote && isMobile\n\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: {}),\n\t\t\t\t\t\t\t\t\tjustifyContent: placement,\n\t\t\t\t\t\t\t\t\tmarginBottom: 8,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{/ Left avatar (for mobile, avatar is hidden) /}\n\t\t\t\t\t\t\t\t{!isMobile && position === 'left' && (\n\t\t\t\t\t\t\t\t\t<div style={{ margin: '0 8px' }}>\n\t\t\t\t\t\t\t\t\t\t{renderMessageAvatar(message, previousMessage, nextMessage)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t{/ Message bubble /}\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tid={`message-bubble-${\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\tstyle={\n\t\t\t\t\t\t\t\t\t\tappType === GiftedChatAppType.Manifest\n\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: isMobile && isSmtp\n\t\t\t\t\t\t\t\t\t\t\t? { display: 'flex', flexGrow: 1 }\n\t\t\t\t\t\t\t\t\t\t\t: {}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{renderMessageBubble(message, previousMessage, nextMessage)}\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t{/ Right avatar (for mobile, avatar is hidden) */}\n\t\t\t\t\t\t\t\t{!isMobile && position === 'right' && (\n\t\t\t\t\t\t\t\t\t<div style={{ margin: '0 8px' }}>\n\t\t\t\t\t\t\t\t\t\t{renderMessageAvatar(message, previousMessage, nextMessage)}\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</React.Fragment>\n\t\t\t\t\t);\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":["GiftedChatInner","props","forwardedRef","_b","messages","user","renderBubble","renderAvatar","renderDay","renderLoading","renderChatEmpty","listViewProps","renderAvatarOnTop","showUserAvatar","showAvatarForEveryMessage","inverted","messageIdGenerator","topThreshold","TOP_THRESHOLD","appType","GiftedChatAppType","Bik","extraProps","__rest","isMobile","useWindowSize","internalScrollRef","useRef","scrollRef","normalizeRef","ref","scrollState","isInitialMount","isUserScrolling","isLoadingOldMessages","isAtBottom","hasTriggeredEndReached","lastMessagesLength","_a","length","previousScrollHeight","previousScrollTop","scrollTimeout","reversedMessages","useMemo","reverse","scrollToBottom","useScrollToBottom","useImperativeHandle","current","useInitialMountScroll","useScrollCleanup","useRestoreScrollPosition","useAutoScrollOnNewMessages","useResizeObserverForFirstMessage","handleScroll","useScrollHandler","onEndReached","onScroll","isUserMessage","useCallback","message","Boolean","_id","shouldShowAvatar","nextMessage","renderMessageBubble","previousMessage","position","bubbleProps","Object","assign","currentMessage","_jsx","style","maxWidth","Manifest","width","minWidth","padding","borderRadius","border","backgroundColor","COLORS","background","brandTint","brandLight","pureWhite","inactive","color","content","primary","wordBreak","children","jsx","BodySecondary","text","renderMessageAvatar","_jsxs","flex","overflowY","overflowX","display","flexDirection","map","index","shouldShowDay","isSameDay","placement","getMessagePlacement","isCentered","shouldCenterAlign","isSmtp","MESSAGE_CHANNELS","SMTP","isPrivateNote","Constants","ChatActivity","Category","ACTIVITY","Type","PRIVATE_NOTE","jsxs","React","Fragment","createdAt","Day","margin","marginRight","marginLeft","justifyContent","marginBottom","id","_c","flexGrow","_d","_e","_Fragment","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\tuseImperativeHandle,\n\tuseMemo,\n\tuseRef,\n} from 'react';\nimport { COLORS } from '../../../constants/Theme';\nimport { useWindowSize } from '../../../hooks/useWindowSize';\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 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\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\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\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, nextMessage?: IMessage) => {\n\t\t\tif (!showUserAvatar) return false;\n\t\t\tif (showAvatarForEveryMessage) return true;\n\n\t\t\t// Show avatar only when next message is from different user\n\t\t\treturn !nextMessage \|\| nextMessage.user._id !== message.user._id;\n\t\t},\n\t\t[showUserAvatar, showAvatarForEveryMessage],\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\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\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\tborderRadius: appType === GiftedChatAppType.Manifest ? 16 : 4,\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<BodySecondary>{message.text}</BodySecondary>\n\t\t\t\t</div>\n\t\t\t);\n\t\t},\n\t\t[isUserMessage, user, renderBubble, extraProps],\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, nextMessage);\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...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{reversedMessages.map((message, index) => {\n\t\t\t\t\tconst position = isUserMessage(message) ? 'right' : 'left';\n\t\t\t\t\tconst previousMessage = reversedMessages[index - 1];\n\t\t\t\t\tconst nextMessage = reversedMessages[index + 1];\n\t\t\t\t\tconst shouldShowDay = !isSameDay(message, previousMessage);\n\t\t\t\t\tconst placement = getMessagePlacement(message, position);\n\t\t\t\t\tconst isCentered = shouldCenterAlign(message);\n\t\t\t\t\tconst isSmtp =\n\t\t\t\t\t\tmessage?.['channelId'] === MESSAGE_CHANNELS.SMTP \|\|\n\t\t\t\t\t\tmessage?.['channelName'] === MESSAGE_CHANNELS.SMTP;\n\t\t\t\t\t// Check if message is a private note\n\t\t\t\t\tconst isPrivateNote =\n\t\t\t\t\t\tmessage['category'] === Constants.ChatActivity.Category.ACTIVITY &&\n\t\t\t\t\t\tmessage['activityType'] ===\n\t\t\t\t\t\t\tConstants.ChatActivity.Type.PRIVATE_NOTE;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<React.Fragment\n\t\t\t\t\t\t\tkey={message._id ?? `${index}-${messageIdGenerator?.() ?? 'id'}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{/ Day separator /}\n\t\t\t\t\t\t\t{shouldShowDay &&\n\t\t\t\t\t\t\t\t(renderDay ? (\n\t\t\t\t\t\t\t\t\trenderDay({ createdAt: message.createdAt })\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<Day createdAt={message.createdAt} appType={appType} />\n\t\t\t\t\t\t\t\t))}\n\n\t\t\t\t\t\t\t{/ Message container /}\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t...(isMobile ? { margin: '0 4px' } : {}),\n\t\t\t\t\t\t\t\t\t...(isCentered ? {} : { display: 'flex' }),\n\t\t\t\t\t\t\t\t\t...(appType !== GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t\t? !isMobile && message?.user?._id === 2\n\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: { marginRight: 8 }\n\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t\t...(isSmtp && !isPrivateNote && isMobile\n\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: {}),\n\t\t\t\t\t\t\t\t\tjustifyContent: placement,\n\t\t\t\t\t\t\t\t\tmarginBottom: 8,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{/ Left avatar (for mobile, avatar is hidden) /}\n\t\t\t\t\t\t\t\t{!isMobile && position === 'left' && (\n\t\t\t\t\t\t\t\t\t<div style={{ margin: '0 8px' }}>\n\t\t\t\t\t\t\t\t\t\t{renderMessageAvatar(message, previousMessage, nextMessage)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t{/ Message bubble /}\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tid={`message-bubble-${\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\tstyle={\n\t\t\t\t\t\t\t\t\t\tappType === GiftedChatAppType.Manifest\n\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: isMobile && isSmtp\n\t\t\t\t\t\t\t\t\t\t\t? { display: 'flex', flexGrow: 1 }\n\t\t\t\t\t\t\t\t\t\t\t: {}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{renderMessageBubble(message, previousMessage, nextMessage)}\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t{/ Right avatar (for mobile, avatar is hidden) */}\n\t\t\t\t\t\t\t\t{!isMobile && position === 'right' && (\n\t\t\t\t\t\t\t\t\t<div style={{ margin: '0 8px' }}>\n\t\t\t\t\t\t\t\t\t\t{renderMessageAvatar(message, previousMessage, nextMessage)}\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</React.Fragment>\n\t\t\t\t\t);\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":["GiftedChatInner","props","forwardedRef","_b","messages","user","renderBubble","renderAvatar","renderDay","renderLoading","renderChatEmpty","listViewProps","renderAvatarOnTop","showUserAvatar","showAvatarForEveryMessage","inverted","messageIdGenerator","topThreshold","TOP_THRESHOLD","appType","GiftedChatAppType","Bik","extraProps","__rest","isMobile","useWindowSize","internalScrollRef","useRef","scrollRef","normalizeRef","ref","scrollState","isInitialMount","isUserScrolling","isLoadingOldMessages","isAtBottom","hasTriggeredEndReached","lastMessagesLength","_a","length","previousScrollHeight","previousScrollTop","scrollTimeout","reversedMessages","useMemo","reverse","scrollToBottom","useScrollToBottom","useImperativeHandle","current","useInitialMountScroll","useScrollCleanup","useRestoreScrollPosition","useAutoScrollOnNewMessages","useResizeObserverForFirstMessage","handleScroll","useScrollHandler","onEndReached","onScroll","isUserMessage","useCallback","message","Boolean","_id","shouldShowAvatar","nextMessage","renderMessageBubble","previousMessage","position","bubbleProps","Object","assign","currentMessage","_jsx","style","maxWidth","Manifest","width","minWidth","padding","borderRadius","border","backgroundColor","COLORS","background","brandTint","brandLight","pureWhite","inactive","color","content","primary","wordBreak","children","jsx","BodySecondary","text","renderMessageAvatar","_jsxs","flex","overflowY","overflowX","display","flexDirection","map","index","shouldShowDay","isSameDay","placement","getMessagePlacement","isCentered","shouldCenterAlign","isSmtp","MESSAGE_CHANNELS","SMTP","isPrivateNote","Constants","ChatActivity","Category","ACTIVITY","Type","PRIVATE_NOTE","jsxs","React","Fragment","createdAt","Day","margin","marginRight","marginLeft","justifyContent","marginBottom","id","_c","flexGrow","_d","_e","_Fragment","GiftedChat","forwardRef"],"mappings":"uhBA2BA,MAAMA,EAAkBA,CACvBC,EACAC,WAEA,MAAMC,EAiBFF,GAAS,CAAE,GAjBTG,SACLA,EAAW,GAAEC,KACbA,EAAIC,aACJA,EAAYC,aACZA,EAAYC,UACZA,EAASC,cACTA,EAAaC,gBACbA,EAAeC,cACfA,EAAgB,CAAE,EAAAC,kBAClBA,GAAoB,EAAKC,eACzBA,GAAiB,EAAKC,0BACtBA,GAA4B,EAAKC,SACjCA,GAAW,EAAKC,mBAChBA,EAAkBC,aAClBA,EAAeC,EAAaA,cAAAC,QAC5BA,EAAUC,EAAiBA,kBAACC,KAEdlB,EADXmB,EAAUC,EAAAA,OAAApB,EAhBR,CAiBL,WAAA,OAAA,eAAA,eAAA,YAAA,gBAAA,kBAAA,gBAAA,oBAAA,iBAAA,4BAAA,WAAA,qBAAA,eAAA,YAEKqB,EAAWC,EAAAA,gBAEXC,EAAoBC,SAA8B,MAClDC,EAAYC,EAAAA,aACjBlB,EAAcmB,KAAO5B,EACrBwB,GAGKK,EAAcJ,EAAAA,OAAO,CAC1BK,gBAAgB,EAChBC,iBAAiB,EACjBC,sBAAsB,EACtBC,YAAY,EACZC,wBAAwB,EACxBC,mBAAoC,QAAhBC,EAAAlC,eAAAA,EAAUmC,cAAM,IAAAD,EAAAA,EAAI,EACxCE,qBAAsB,EACtBC,kBAAmB,EACnBC,cAAe,OAIVC,EAAmBC,EAAAA,SAAQ,IAC3BxC,GAAgC,IAApBA,EAASmC,OACnB,IAAInC,GAAUyC,UAD0B,IAE7C,CAACzC,IAEE0C,EAAiBC,EAAAA,kBAAkBnB,EAAWG,GAEpDiB,EAAAA,oBAAoB9C,GAAc,IAAM0B,EAAUqB,UAElDC,EAAqBA,sBACpBtB,EACAG,EACAY,EAAiBJ,OACjBO,GAGDK,EAAgBA,iBAACpB,GAEjBqB,EAAAA,yBAAyBxB,EAAWG,EAAaY,EAAiBJ,QAElEc,EAA0BA,2BACzBzB,EACAG,EACA3B,EAASmC,OACTO,GAGDQ,EAAAA,iCACClD,aAAQ,EAARA,EAAW,GACX2B,EACAe,EACA9B,GAGD,MAAMuC,EAAeC,EAAgBA,iBACpCzB,EACApB,EAAc8C,aACd9C,EAAc+C,SACdzC,GAIK0C,EAAgBC,EAAWA,aAC/BC,UACA,OAAOC,QAAQD,GAAWxD,YAAQiC,EAAAuB,EAAQxD,2BAAM0D,OAAQ1D,EAAK0D,IAAI,GAElE,CAAC1D,IAII2D,EAAmBJ,EAAAA,aACxB,CAACC,EAAmBI,MACdpD,MACDC,KAGImD,GAAeA,EAAY5D,KAAK0D,MAAQF,EAAQxD,KAAK0D,OAE9D,CAAClD,EAAgBC,IAIZoD,EAAsBN,EAAWA,aACtC,CAACC,EAAmBM,EAA4BF,KAC/C,MAAMG,EAAWT,EAAcE,GAAW,QAAU,OAE9CQ,EACLC,OAAAC,OAAA,CAAAC,eAAgBX,EAChBM,kBACAF,cACAG,WACA/D,QACGiB,GAIJ,OAAIhB,EACIA,EAAa+D,GAKpBI,MAAA,MAAAH,OAAAC,OAAA,CACCG,MAAKJ,OAAAC,OAAAD,OAAAC,OAAA,CACJI,SAAUxD,IAAYC,EAAAA,kBAAkBwD,SAAW,MAAQ,MAC3DC,MAAO,eACH1D,IAAYC,EAAiBA,kBAACwD,SAC/B,CAAEE,SAAU,SACZ,CAAG,GAAA,CACNC,QAAS,WACTC,aAAc7D,IAAYC,EAAAA,kBAAkBwD,SAAW,GAAK,EAC5DK,OACc,SAAbb,GAAuBjD,IAAYC,EAAAA,kBAAkBwD,SAClD,+BACA,OACJM,gBACc,UAAbd,EACGjD,IAAYC,EAAAA,kBAAkBwD,SAC7BO,EAAMA,OAACC,WAAWC,UAClBF,EAAMA,OAACC,WAAWE,WACnBnE,IAAYC,EAAiBA,kBAACwD,SAC9BO,EAAAA,OAAOC,WAAWG,UAClBJ,SAAOC,WAAWI,SACtBC,MAAON,EAAAA,OAAOO,QAAQC,QACtBC,UAAW,gBAGZ,CAAAC,SAAApB,EAAAqB,IAACC,gBAAa,CAAAF,SAAEhC,EAAQmC,SACnB,GAGR,CAACrC,EAAetD,EAAMC,EAAcgB,IAI/B2E,EAAsBrC,EAAWA,aACtC,CAACC,EAAmBM,EAA4BF,KAG/C,IAFmBD,EAAiBH,EAASI,GAE5B,OAAO,KAExB,MAAMG,EAAWT,EAAcE,GAAW,QAAU,OAapD,OAAOtD,EAAeA,EAXqB,CAC1CiE,eAAgBX,EAChBM,kBACAF,cACAG,WACA/D,OACAO,oBACAC,iBACAC,8BAGiD,IAAI,GAEvD,CACCkD,EACAL,EACAtD,EACAO,EACAC,EACAC,EACAP,IAKF,OAAKH,GAAgC,IAApBA,EAASmC,OAKzB2D,4BACCpE,IAAKF,EACL8C,MACCJ,OAAAC,OAAA,CAAA4B,KAAM,EACNC,UAAW,OACXC,UAAW,SACXC,QAAS,OACTC,cAAe,UACZ5F,EAAc+D,OAElBhB,SAAUH,GAGV,CAAAsC,SAAA,CAAApB,EAAAqB,IAAA,MAAA,CAAKpB,MAAO,CAAEyB,KAAM,cAEpB1B,EACCqB,IAAA,MAAAxB,OAAAC,OAAA,CAAAG,MAAO,CACN4B,QAAS,OACTC,cAAe,SACfJ,KAAM,aAGN,CAAAN,SAAAlD,EAAiB6D,KAAI,CAAC3C,EAAS4C,mBAC/B,MAAMrC,EAAWT,EAAcE,GAAW,QAAU,OAC9CM,EAAkBxB,EAAiB8D,EAAQ,GAC3CxC,EAActB,EAAiB8D,EAAQ,GACvCC,GAAiBC,EAAAA,UAAU9C,EAASM,GACpCyC,EAAYC,EAAAA,oBAAoBhD,EAASO,GACzC0C,EAAaC,oBAAkBlD,GAC/BmD,GACLnD,aAAO,EAAPA,EAAqB,aAAMoD,EAAgBA,iBAACC,OAC5CrD,aAAO,EAAPA,EAAuB,eAAMoD,EAAAA,iBAAiBC,KAEzCC,EACLtD,EAAkB,WAAMuD,EAASA,UAACC,aAAaC,SAASC,UACxD1D,EAAsB,eACrBuD,EAAAA,UAAUC,aAAaG,KAAKC,aAC9B,OACCvB,EAACwB,KAAAC,EAAK,QAACC,oBAILlB,IACClG,EACAA,EAAU,CAAEqH,UAAWhE,EAAQgE,YAE/BpD,MAACqD,MAAG,CAACD,UAAWhE,EAAQgE,UAAW1G,QAASA,KAI9C+E,EACCwB,KAAA,MAAApD,OAAAC,OAAA,CAAAG,MACIJ,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAC/C,EAAW,CAAEuG,OAAQ,SAAY,CAAG,GACpCjB,EAAa,GAAK,CAAER,QAAS,SAC7BnF,IAAYC,oBAAkBwD,SAC9BpD,GAAmC,KAAR,UAAfqC,aAAO,EAAPA,EAASxD,YAAM,IAAAiC,OAAA,EAAAA,EAAAyB,KAE3B,CAAEiE,YAAa,GADf,CAAEC,WAAY,GAEf,CAAG,GACFjB,IAAWG,GAAiB3F,EAC7B,CAAEyG,WAAY,EAAGD,YAAa,GAC9B,CAAG,GAAA,CACNE,eAAgBtB,EAChBuB,aAAc,KAId,CAAAtC,SAAA,EAACrE,GAAyB,SAAb4C,GACbK,MAAK,MAAAH,OAAAC,OAAA,CAAAG,MAAO,CAAEqD,OAAQ,UACpB,CAAAlC,SAAAI,EAAoBpC,EAASM,EAAiBF,MAKjDQ,EAAAqB,IAAA,MAAAxB,OAAAC,OAAA,CACC6D,GAAI,kBACY,QAAfjI,EAAA0D,EAAQE,WAAO,IAAA5D,EAAAA,EAAA,GAAGsG,aAAS4B,EAAArH,aAAkB,EAAlBA,mBAA0B,SAEtD0D,MACCvD,IAAYC,EAAiBA,kBAACwD,SAC3B,CAAEC,MAAO,QACTrD,GAAYwF,EACZ,CAAEV,QAAS,OAAQgC,SAAU,GAC7B,CAAA,GAGH,CAAAzC,SAAA3B,EAAoBL,EAASM,EAAiBF,OAI9CzC,GAAyB,UAAb4C,GACbK,MAAA,MAAAH,OAAAC,OAAA,CAAKG,MAAO,CAAEqD,OAAQ,UACpB,CAAAlC,SAAAI,EAAoBpC,EAASM,EAAiBF,YArDlC,QAAXsE,EAAA1E,EAAQE,WAAG,IAAAwE,EAAAA,EAAO,GAAA9B,KAAmC,QAA1B+B,EAAAxH,aAAkB,EAAlBA,WAA0B,IAAAwH,EAAAA,EAAA,OAyD1C,WApGd9H,EAAkB+D,EAAGqB,IAAA2C,WAAA,CAAA5C,SAAAnF,MAAwB,IAwG9C,EAIR,IAAAgI,EAAeC,EAAAA,WACd3I"}

package/dist/cjs/components/BikGiftedChat/GiftedChat/scrollHooks.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("./utils.js");const s=(e,s,o,t,l=r.TOP_THRESHOLD)=>{if(!t)return;const i=e<=l;if(i&&!o.hasTriggeredEndReached){o.previousScrollHeight=s,o.previousScrollTop=e,o.hasTriggeredEndReached=!0,o.isLoadingOldMessages=!0;try{t()}catch(e){}}else!i&&o.hasTriggeredEndReached&&(o.hasTriggeredEndReached=!1)};exports.handleInfiniteScroll=s,exports.useAutoScrollOnNewMessages=(s,o,t,l)=>{e.useEffect((()=>{const e=!o.current.isInitialMount,t=r.isScrollAtBottom(s.current);e&&t&&l()}),[t])},exports.useInitialMountScroll=(r,s,o,t)=>{e.useLayoutEffect((()=>{r.current&&0!==o&&s.current.isInitialMount&&requestAnimationFrame((()=>{requestAnimationFrame((()=>{t(),s.current.isInitialMount=!1}))}))}),[o])},exports.useResizeObserverForFirstMessage=(r,s,o,t)=>{e.useEffect((()=>{var e,l;if(!r)return;const i=`message-bubble-${null!==(e=r._id)&&void 0!==e?e:`0-${null!==(l=null==t?void 0:t(r))&&void 0!==l?l:"id"}`}`,c=document.getElementById(i);if(!c)return;const n=new ResizeObserver((()=>{s.current.isAtBottom&&o()}));return n.observe(c),()=>{n.disconnect()}}),[null==r?void 0:r._id])},exports.useRestoreScrollPosition=(r,s,o)=>{e.useEffect((()=>{const e=s.current,t=o,l=r.current,i=t>e.lastMessagesLength;if(e.isLoadingOldMessages&&i&&l){const r=l.scrollHeight-e.previousScrollHeight;r>0&&(l.scrollTop=e.previousScrollTop+r),e.isLoadingOldMessages=!1}e.lastMessagesLength=t}),[o])},exports.useScrollCleanup=r=>{e.useEffect((()=>{const e=r.current;return()=>{e.scrollTimeout&&(window.clearTimeout(e.scrollTimeout),e.scrollTimeout=null)}}),[])},exports.useScrollHandler=(o,t,l,i=r.TOP_THRESHOLD)=>e.useCallback((e=>{const c=e.currentTarget,{scrollTop:n,scrollHeight:u}=c,a=o.current;a.isUserScrolling=!0,a.scrollTimeout&&window.clearTimeout(a.scrollTimeout),a.scrollTimeout=window.setTimeout((()=>{a.isUserScrolling=!1,a.scrollTimeout=null}),r.SCROLL_IDLE_MS),a.previousScrollTop=n,a.previousScrollHeight=u,a.isAtBottom=r.isScrollAtBottom(c),s(n,u,a,t,i),l&&l(e)}),[o,t,l,i]),exports.useScrollToBottom=(r,s)=>e.useCallback((()=>{const e=r.current;e&&(e.scrollTop=e.scrollHeight,s.current.isAtBottom=!0)}),[]);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("./utils.js");const t=function(e,t,o,s){let l=arguments.length>4&&void 0!==arguments[4]?arguments[4]:r.TOP_THRESHOLD;if(!s)return;const i=e<=l;if(i&&!o.hasTriggeredEndReached){o.previousScrollHeight=t,o.previousScrollTop=e,o.hasTriggeredEndReached=!0,o.isLoadingOldMessages=!0;try{s()}catch(e){}}else!i&&o.hasTriggeredEndReached&&(o.hasTriggeredEndReached=!1)};exports.handleInfiniteScroll=t,exports.useAutoScrollOnNewMessages=(t,o,s,l)=>{e.useEffect((()=>{const e=!o.current.isInitialMount,s=r.isScrollAtBottom(t.current);e&&s&&l()}),[s])},exports.useInitialMountScroll=(r,t,o,s)=>{e.useLayoutEffect((()=>{r.current&&0!==o&&t.current.isInitialMount&&requestAnimationFrame((()=>{requestAnimationFrame((()=>{s(),t.current.isInitialMount=!1}))}))}),[o])},exports.useResizeObserverForFirstMessage=(r,t,o,s)=>{e.useEffect((()=>{var e,l;if(!r)return;const i=`message-bubble-${null!==(e=r._id)&&void 0!==e?e:`0-${null!==(l=null==s?void 0:s(r))&&void 0!==l?l:"id"}`}`,n=document.getElementById(i);if(!n)return;const c=new ResizeObserver((()=>{t.current.isAtBottom&&o()}));return c.observe(n),()=>{c.disconnect()}}),[null==r?void 0:r._id])},exports.useRestoreScrollPosition=(r,t,o)=>{e.useEffect((()=>{const e=t.current,s=o,l=r.current,i=s>e.lastMessagesLength;if(e.isLoadingOldMessages&&i&&l){const r=l.scrollHeight-e.previousScrollHeight;r>0&&(l.scrollTop=e.previousScrollTop+r),e.isLoadingOldMessages=!1}e.lastMessagesLength=s}),[o])},exports.useScrollCleanup=r=>{e.useEffect((()=>{const e=r.current;return()=>{e.scrollTimeout&&(window.clearTimeout(e.scrollTimeout),e.scrollTimeout=null)}}),[])},exports.useScrollHandler=function(o,s,l){let i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:r.TOP_THRESHOLD;return e.useCallback((e=>{const n=e.currentTarget,{scrollTop:c,scrollHeight:u}=n,a=o.current;a.isUserScrolling=!0,a.scrollTimeout&&window.clearTimeout(a.scrollTimeout),a.scrollTimeout=window.setTimeout((()=>{a.isUserScrolling=!1,a.scrollTimeout=null}),r.SCROLL_IDLE_MS),a.previousScrollTop=c,a.previousScrollHeight=u,a.isAtBottom=r.isScrollAtBottom(n),t(c,u,a,s,i),l&&l(e)}),[o,s,l,i])},exports.useScrollToBottom=(r,t)=>e.useCallback((()=>{const e=r.current;e&&(e.scrollTop=e.scrollHeight,t.current.isAtBottom=!0)}),[]);
 //# sourceMappingURL=scrollHooks.js.map

package/dist/cjs/components/BikGiftedChat/GiftedChat/scrollHooks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"scrollHooks.js","sources":["../../../../../src/components/BikGiftedChat/GiftedChat/scrollHooks.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect } from 'react';\nimport { IMessage } from '../types';\nimport { ScrollState } from './types';\nimport { isScrollAtBottom, SCROLL_IDLE_MS, TOP_THRESHOLD } from './utils';\n\n// Hook to scroll to bottom\nexport const useScrollToBottom = (\n\tscrollRef: React.MutableRefObject<HTMLDivElement \| null>,\n\tscrollState: React.MutableRefObject<ScrollState>,\n) => {\n\treturn useCallback(() => {\n\t\tconst el = scrollRef.current;\n\t\tif (!el) return;\n\n\t\tel.scrollTop = el.scrollHeight;\n\t\tscrollState.current.isAtBottom = true;\n\t\t// scrollRef and scrollState are stable refs\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n};\n\n// Hook for initial mount scroll behavior\nexport const useInitialMountScroll = (\n\tscrollRef: React.MutableRefObject<HTMLDivElement \| null>,\n\tscrollState: React.MutableRefObject<ScrollState>,\n\tmessagesLength: number,\n\tscrollToBottom: () => void,\n) => {\n\tuseLayoutEffect(() => {\n\t\tif (!scrollRef.current \|\| messagesLength === 0) return;\n\n\t\tif (scrollState.current.isInitialMount) {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\tscrollToBottom();\n\t\t\t\t\tscrollState.current.isInitialMount = false;\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\t\t// Only trigger on messages length change\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [messagesLength]);\n};\n\n// Hook for cleanup on unmount\nexport const useScrollCleanup = (\n\tscrollState: React.MutableRefObject<ScrollState>,\n) => {\n\tuseEffect(() => {\n\t\tconst stateRef = scrollState.current;\n\t\treturn () => {\n\t\t\tif (stateRef.scrollTimeout) {\n\t\t\t\twindow.clearTimeout(stateRef.scrollTimeout);\n\t\t\t\tstateRef.scrollTimeout = null;\n\t\t\t}\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []); // Only cleanup on unmount\n};\n\n// Hook for restoring scroll position after loading old messages\nexport const useRestoreScrollPosition = (\n\tscrollRef: React.MutableRefObject<HTMLDivElement \| null>,\n\tscrollState: React.MutableRefObject<ScrollState>,\n\tmessagesLength: number,\n) => {\n\tuseEffect(() => {\n\t\tconst state = scrollState.current;\n\t\tconst currentMessagesLength = messagesLength;\n\t\tconst el = scrollRef.current;\n\n\t\tconst hasNewMessages = currentMessagesLength > state.lastMessagesLength;\n\t\tconst isLoadingOld = state.isLoadingOldMessages;\n\n\t\tif (isLoadingOld && hasNewMessages && el) {\n\t\t\tconst newScrollHeight = el.scrollHeight;\n\t\t\tconst heightDifference = newScrollHeight - state.previousScrollHeight;\n\n\t\t\t// Adjust scroll position to compensate for new content added at top\n\t\t\tif (heightDifference > 0) {\n\t\t\t\tel.scrollTop = state.previousScrollTop + heightDifference;\n\t\t\t}\n\n\t\t\tstate.isLoadingOldMessages = false;\n\t\t}\n\n\t\tstate.lastMessagesLength = currentMessagesLength;\n\t\t// Only depend on messagesLength changes\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [messagesLength]);\n};\n\n// Hook for auto-scrolling on new messages\nexport const useAutoScrollOnNewMessages = (\n\tscrollRef: React.MutableRefObject<HTMLDivElement \| null>,\n\tscrollState: React.MutableRefObject<ScrollState>,\n\tmessagesLength: number,\n\tscrollToBottom: () => void,\n) => {\n\tuseEffect(() => {\n\t\tconst isNotInitialMount = !scrollState.current.isInitialMount;\n\t\tconst userIsAtBottom = isScrollAtBottom(scrollRef.current);\n\n\t\tif (isNotInitialMount && userIsAtBottom) {\n\t\t\tscrollToBottom();\n\t\t}\n\t\t// Only depend on messagesLength changes\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [messagesLength]);\n};\n\n// Hook for observing first message resize and auto-scrolling\nexport const useResizeObserverForFirstMessage = (\n\tfirstMessage: IMessage \| undefined,\n\tscrollState: React.MutableRefObject<ScrollState>,\n\tscrollToBottom: () => void,\n\tmessageIdGenerator?: (message?: IMessage) => string,\n) => {\n\tuseEffect(() => {\n\t\tif (!firstMessage) return;\n\n\t\tconst messageId =\n\t\t\tfirstMessage._id ?? `0-${messageIdGenerator?.(firstMessage) ?? 'id'}`;\n\t\tconst id = `message-bubble-${messageId}`;\n\t\tconst el = document.getElementById(id);\n\n\t\tif (!el) return;\n\n\t\t// Create a ResizeObserver to watch for height changes\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\t// Check if scroll is at bottom before triggering scroll\n\t\t\tif (scrollState.current.isAtBottom) {\n\t\t\t\tscrollToBottom();\n\t\t\t}\n\t\t});\n\n\t\tresizeObserver.observe(el);\n\n\t\t// Cleanup observer on unmount or when message changes\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t\t// Only re-run when the message ID changes, not the entire object\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [firstMessage?._id]);\n};\n\n// Handle infinite scroll logic\nexport const handleInfiniteScroll = (\n\tscrollTop: number,\n\tscrollHeight: number,\n\tstate: ScrollState,\n\tonEndReached?: () => void,\n\ttopThreshold: number = TOP_THRESHOLD,\n) => {\n\tif (!onEndReached) return;\n\n\tconst isNearTop = scrollTop <= topThreshold;\n\n\tif (isNearTop && !state.hasTriggeredEndReached) {\n\t\t// Store current position to restore later\n\t\tstate.previousScrollHeight = scrollHeight;\n\t\tstate.previousScrollTop = scrollTop;\n\t\tstate.hasTriggeredEndReached = true;\n\t\tstate.isLoadingOldMessages = true;\n\n\t\t// Trigger loading (don't await, let parent handle loading state)\n\t\ttry {\n\t\t\tonEndReached();\n\t\t} catch (err) {\n\t\t\t// Parent's onEndReached should handle its own errors\n\t\t}\n\t} else if (!isNearTop && state.hasTriggeredEndReached) {\n\t\t// Reset trigger flag when scrolled away from top\n\t\tstate.hasTriggeredEndReached = false;\n\t}\n};\n\n// Create scroll event handler hook\nexport const useScrollHandler = (\n\tscrollState: React.MutableRefObject<ScrollState>,\n\tonEndReached?: () => void,\n\tonScroll?: (event: React.UIEvent<HTMLDivElement>) => void,\n\ttopThreshold: number = TOP_THRESHOLD,\n) => {\n\treturn useCallback(\n\t\t(event: React.UIEvent<HTMLDivElement>) => {\n\t\t\tconst target = event.currentTarget as HTMLDivElement;\n\t\t\tconst { scrollTop, scrollHeight } = target;\n\t\t\tconst state = scrollState.current;\n\n\t\t\t// Mark as user-initiated scroll\n\t\t\tstate.isUserScrolling = true;\n\n\t\t\t// Debounce: clear existing timeout and set new one\n\t\t\tif (state.scrollTimeout) {\n\t\t\t\twindow.clearTimeout(state.scrollTimeout);\n\t\t\t}\n\n\t\t\tstate.scrollTimeout = window.setTimeout(() => {\n\t\t\t\tstate.isUserScrolling = false;\n\t\t\t\tstate.scrollTimeout = null;\n\t\t\t}, SCROLL_IDLE_MS);\n\n\t\t\t// Update scroll position tracking\n\t\t\tstate.previousScrollTop = scrollTop;\n\t\t\tstate.previousScrollHeight = scrollHeight;\n\t\t\tstate.isAtBottom = isScrollAtBottom(target);\n\n\t\t\t// Handle infinite scroll (load older messages when near top)\n\t\t\thandleInfiniteScroll(\n\t\t\t\tscrollTop,\n\t\t\t\tscrollHeight,\n\t\t\t\tstate,\n\t\t\t\tonEndReached,\n\t\t\t\ttopThreshold,\n\t\t\t);\n\n\t\t\t// Call parent's onScroll if provided\n\t\t\tif (onScroll) {\n\t\t\t\tonScroll(event);\n\t\t\t}\n\t\t},\n\t\t[scrollState, onEndReached, onScroll, topThreshold],\n\t);\n};\n"],"names":["handleInfiniteScroll","scrollTop","scrollHeight","state","onEndReached","topThreshold","TOP_THRESHOLD","isNearTop","hasTriggeredEndReached","previousScrollHeight","previousScrollTop","isLoadingOldMessages","err","useAutoScrollOnNewMessages","scrollRef","scrollState","messagesLength","scrollToBottom","useEffect","isNotInitialMount","current","isInitialMount","userIsAtBottom","isScrollAtBottom","useInitialMountScroll","useLayoutEffect","requestAnimationFrame","useResizeObserverForFirstMessage","firstMessage","messageIdGenerator","id","_a","_id","_b","el","document","getElementById","resizeObserver","ResizeObserver","isAtBottom","observe","disconnect","useRestoreScrollPosition","currentMessagesLength","hasNewMessages","lastMessagesLength","heightDifference","stateRef","scrollTimeout","window","clearTimeout","useScrollHandler","onScroll","useCallback","event","target","currentTarget","isUserScrolling","setTimeout","SCROLL_IDLE_MS","useScrollToBottom"],"mappings":"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"}
1	+ {"version":3,"file":"scrollHooks.js","sources":["../../../../../src/components/BikGiftedChat/GiftedChat/scrollHooks.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect } from 'react';\nimport { IMessage } from '../types';\nimport { ScrollState } from './types';\nimport { isScrollAtBottom, SCROLL_IDLE_MS, TOP_THRESHOLD } from './utils';\n\n// Hook to scroll to bottom\nexport const useScrollToBottom = (\n\tscrollRef: React.MutableRefObject<HTMLDivElement \| null>,\n\tscrollState: React.MutableRefObject<ScrollState>,\n) => {\n\treturn useCallback(() => {\n\t\tconst el = scrollRef.current;\n\t\tif (!el) return;\n\n\t\tel.scrollTop = el.scrollHeight;\n\t\tscrollState.current.isAtBottom = true;\n\t\t// scrollRef and scrollState are stable refs\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n};\n\n// Hook for initial mount scroll behavior\nexport const useInitialMountScroll = (\n\tscrollRef: React.MutableRefObject<HTMLDivElement \| null>,\n\tscrollState: React.MutableRefObject<ScrollState>,\n\tmessagesLength: number,\n\tscrollToBottom: () => void,\n) => {\n\tuseLayoutEffect(() => {\n\t\tif (!scrollRef.current \|\| messagesLength === 0) return;\n\n\t\tif (scrollState.current.isInitialMount) {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\trequestAnimationFrame(() => {\n\t\t\t\t\tscrollToBottom();\n\t\t\t\t\tscrollState.current.isInitialMount = false;\n\t\t\t\t});\n\t\t\t});\n\t\t}\n\t\t// Only trigger on messages length change\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [messagesLength]);\n};\n\n// Hook for cleanup on unmount\nexport const useScrollCleanup = (\n\tscrollState: React.MutableRefObject<ScrollState>,\n) => {\n\tuseEffect(() => {\n\t\tconst stateRef = scrollState.current;\n\t\treturn () => {\n\t\t\tif (stateRef.scrollTimeout) {\n\t\t\t\twindow.clearTimeout(stateRef.scrollTimeout);\n\t\t\t\tstateRef.scrollTimeout = null;\n\t\t\t}\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []); // Only cleanup on unmount\n};\n\n// Hook for restoring scroll position after loading old messages\nexport const useRestoreScrollPosition = (\n\tscrollRef: React.MutableRefObject<HTMLDivElement \| null>,\n\tscrollState: React.MutableRefObject<ScrollState>,\n\tmessagesLength: number,\n) => {\n\tuseEffect(() => {\n\t\tconst state = scrollState.current;\n\t\tconst currentMessagesLength = messagesLength;\n\t\tconst el = scrollRef.current;\n\n\t\tconst hasNewMessages = currentMessagesLength > state.lastMessagesLength;\n\t\tconst isLoadingOld = state.isLoadingOldMessages;\n\n\t\tif (isLoadingOld && hasNewMessages && el) {\n\t\t\tconst newScrollHeight = el.scrollHeight;\n\t\t\tconst heightDifference = newScrollHeight - state.previousScrollHeight;\n\n\t\t\t// Adjust scroll position to compensate for new content added at top\n\t\t\tif (heightDifference > 0) {\n\t\t\t\tel.scrollTop = state.previousScrollTop + heightDifference;\n\t\t\t}\n\n\t\t\tstate.isLoadingOldMessages = false;\n\t\t}\n\n\t\tstate.lastMessagesLength = currentMessagesLength;\n\t\t// Only depend on messagesLength changes\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [messagesLength]);\n};\n\n// Hook for auto-scrolling on new messages\nexport const useAutoScrollOnNewMessages = (\n\tscrollRef: React.MutableRefObject<HTMLDivElement \| null>,\n\tscrollState: React.MutableRefObject<ScrollState>,\n\tmessagesLength: number,\n\tscrollToBottom: () => void,\n) => {\n\tuseEffect(() => {\n\t\tconst isNotInitialMount = !scrollState.current.isInitialMount;\n\t\tconst userIsAtBottom = isScrollAtBottom(scrollRef.current);\n\n\t\tif (isNotInitialMount && userIsAtBottom) {\n\t\t\tscrollToBottom();\n\t\t}\n\t\t// Only depend on messagesLength changes\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [messagesLength]);\n};\n\n// Hook for observing first message resize and auto-scrolling\nexport const useResizeObserverForFirstMessage = (\n\tfirstMessage: IMessage \| undefined,\n\tscrollState: React.MutableRefObject<ScrollState>,\n\tscrollToBottom: () => void,\n\tmessageIdGenerator?: (message?: IMessage) => string,\n) => {\n\tuseEffect(() => {\n\t\tif (!firstMessage) return;\n\n\t\tconst messageId =\n\t\t\tfirstMessage._id ?? `0-${messageIdGenerator?.(firstMessage) ?? 'id'}`;\n\t\tconst id = `message-bubble-${messageId}`;\n\t\tconst el = document.getElementById(id);\n\n\t\tif (!el) return;\n\n\t\t// Create a ResizeObserver to watch for height changes\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\t// Check if scroll is at bottom before triggering scroll\n\t\t\tif (scrollState.current.isAtBottom) {\n\t\t\t\tscrollToBottom();\n\t\t\t}\n\t\t});\n\n\t\tresizeObserver.observe(el);\n\n\t\t// Cleanup observer on unmount or when message changes\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t\t// Only re-run when the message ID changes, not the entire object\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [firstMessage?._id]);\n};\n\n// Handle infinite scroll logic\nexport const handleInfiniteScroll = (\n\tscrollTop: number,\n\tscrollHeight: number,\n\tstate: ScrollState,\n\tonEndReached?: () => void,\n\ttopThreshold: number = TOP_THRESHOLD,\n) => {\n\tif (!onEndReached) return;\n\n\tconst isNearTop = scrollTop <= topThreshold;\n\n\tif (isNearTop && !state.hasTriggeredEndReached) {\n\t\t// Store current position to restore later\n\t\tstate.previousScrollHeight = scrollHeight;\n\t\tstate.previousScrollTop = scrollTop;\n\t\tstate.hasTriggeredEndReached = true;\n\t\tstate.isLoadingOldMessages = true;\n\n\t\t// Trigger loading (don't await, let parent handle loading state)\n\t\ttry {\n\t\t\tonEndReached();\n\t\t} catch (err) {\n\t\t\t// Parent's onEndReached should handle its own errors\n\t\t}\n\t} else if (!isNearTop && state.hasTriggeredEndReached) {\n\t\t// Reset trigger flag when scrolled away from top\n\t\tstate.hasTriggeredEndReached = false;\n\t}\n};\n\n// Create scroll event handler hook\nexport const useScrollHandler = (\n\tscrollState: React.MutableRefObject<ScrollState>,\n\tonEndReached?: () => void,\n\tonScroll?: (event: React.UIEvent<HTMLDivElement>) => void,\n\ttopThreshold: number = TOP_THRESHOLD,\n) => {\n\treturn useCallback(\n\t\t(event: React.UIEvent<HTMLDivElement>) => {\n\t\t\tconst target = event.currentTarget as HTMLDivElement;\n\t\t\tconst { scrollTop, scrollHeight } = target;\n\t\t\tconst state = scrollState.current;\n\n\t\t\t// Mark as user-initiated scroll\n\t\t\tstate.isUserScrolling = true;\n\n\t\t\t// Debounce: clear existing timeout and set new one\n\t\t\tif (state.scrollTimeout) {\n\t\t\t\twindow.clearTimeout(state.scrollTimeout);\n\t\t\t}\n\n\t\t\tstate.scrollTimeout = window.setTimeout(() => {\n\t\t\t\tstate.isUserScrolling = false;\n\t\t\t\tstate.scrollTimeout = null;\n\t\t\t}, SCROLL_IDLE_MS);\n\n\t\t\t// Update scroll position tracking\n\t\t\tstate.previousScrollTop = scrollTop;\n\t\t\tstate.previousScrollHeight = scrollHeight;\n\t\t\tstate.isAtBottom = isScrollAtBottom(target);\n\n\t\t\t// Handle infinite scroll (load older messages when near top)\n\t\t\thandleInfiniteScroll(\n\t\t\t\tscrollTop,\n\t\t\t\tscrollHeight,\n\t\t\t\tstate,\n\t\t\t\tonEndReached,\n\t\t\t\ttopThreshold,\n\t\t\t);\n\n\t\t\t// Call parent's onScroll if provided\n\t\t\tif (onScroll) {\n\t\t\t\tonScroll(event);\n\t\t\t}\n\t\t},\n\t\t[scrollState, onEndReached, onScroll, topThreshold],\n\t);\n};\n"],"names":["handleInfiniteScroll","scrollTop","scrollHeight","state","onEndReached","topThreshold","arguments","length","undefined","TOP_THRESHOLD","isNearTop","hasTriggeredEndReached","previousScrollHeight","previousScrollTop","isLoadingOldMessages","err","useAutoScrollOnNewMessages","scrollRef","scrollState","messagesLength","scrollToBottom","useEffect","isNotInitialMount","current","isInitialMount","userIsAtBottom","isScrollAtBottom","useInitialMountScroll","useLayoutEffect","requestAnimationFrame","useResizeObserverForFirstMessage","firstMessage","messageIdGenerator","id","_a","_id","_b","el","document","getElementById","resizeObserver","ResizeObserver","isAtBottom","observe","disconnect","useRestoreScrollPosition","currentMessagesLength","hasNewMessages","lastMessagesLength","heightDifference","stateRef","scrollTimeout","window","clearTimeout","onScroll","useCallback","event","target","currentTarget","isUserScrolling","setTimeout","SCROLL_IDLE_MS","useScrollToBottom"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../product-picker-v2/ProductPickerShimmer.js");exports.InfiniteScroll=({children:n,fetchMore:c,loadingComponent:s=e.jsx(t.ProductPickerShimmer,{limit:2}),containerRef:i,hasData:o})=>{const u=r.useRef(!1),[a,l]=r.useState(!1),d=r.useRef(null),h=e=>{const[r]=e;r.isIntersecting&&!a&&(l(!0),c().then((e=>{e&&(u.current=!0),l(!1)})))};return r.useEffect((()=>{if(!i.current||!d.current)return;const e=new IntersectionObserver(h,{root:i.current,rootMargin:"0px",threshold:.1});return e.observe(d.current),()=>{d.current&&e.unobserve(d.current)}}),[c,a,i]),console.log({hasData:o,hasAllProductsLoaded:u}),e.jsxs("div",{children:[n,!!o&&!u.current&&e.jsx("div",Object.assign({ref:d,style:{minHeight:"10px"}},{children:s}))]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("../product-picker-v2/ProductPickerShimmer.js");exports.InfiniteScroll=n=>{let{children:c,fetchMore:s,loadingComponent:i=e.jsx(t.ProductPickerShimmer,{limit:2}),containerRef:o,hasData:u}=n;const l=r.useRef(!1),[a,d]=r.useState(!1),h=r.useRef(null),f=e=>{const[r]=e;r.isIntersecting&&!a&&(d(!0),s().then((e=>{e&&(l.current=!0),d(!1)})))};return r.useEffect((()=>{if(!o.current||!h.current)return;const e=new IntersectionObserver(f,{root:o.current,rootMargin:"0px",threshold:.1});return e.observe(h.current),()=>{h.current&&e.unobserve(h.current)}}),[s,a,o]),console.log({hasData:u,hasAllProductsLoaded:l}),e.jsxs("div",{children:[c,!!u&&!l.current&&e.jsx("div",Object.assign({ref:h,style:{minHeight:"10px"}},{children:i}))]})};
 //# sourceMappingURL=InfiniteScroll.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InfiniteScroll.js","sources":["../../../../src/components/InfiniteScroll/InfiniteScroll.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { ProductPickerShimmer } from '../product-picker-v2/ProductPickerShimmer';\n\nexport interface InfiniteScrollProps {\n\tchildren: React.ReactNode;\n\tfetchMore: () => Promise<boolean>;\n\tloadingComponent?: React.ReactNode;\n\tcontainerRef: React.RefObject<HTMLDivElement>;\n\thasData: boolean;\n}\n\nexport const InfiniteScroll: React.FC<InfiniteScrollProps> = ({\n\tchildren,\n\tfetchMore,\n\tloadingComponent = <ProductPickerShimmer limit={2} />,\n\tcontainerRef,\n\thasData,\n}) => {\n\tconst hasAllProductsLoaded = useRef(false);\n\tconst [isFetching, setIsFetching] = useState<boolean>(false);\n\tconst shimmerRef = useRef<HTMLDivElement>(null);\n\n\tconst handleIntersection = (entries: IntersectionObserverEntry[]) => {\n\t\tconst [entry] = entries;\n\n\t\tif (entry.isIntersecting && !isFetching) {\n\t\t\tsetIsFetching(true);\n\n\t\t\tfetchMore().then((allProductsLoaded) => {\n\t\t\t\tif (allProductsLoaded) {\n\t\t\t\t\thasAllProductsLoaded.current = true;\n\t\t\t\t}\n\t\t\t\tsetIsFetching(false);\n\t\t\t});\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (!containerRef.current \|\| !shimmerRef.current) return;\n\n\t\tconst observer = new IntersectionObserver(handleIntersection, {\n\t\t\troot: containerRef.current,\n\t\t\trootMargin: '0px',\n\t\t\tthreshold: 0.1, // Adjust threshold as needed\n\t\t});\n\n\t\tobserver.observe(shimmerRef.current);\n\n\t\treturn () => {\n\t\t\tif (shimmerRef.current) {\n\t\t\t\tobserver.unobserve(shimmerRef.current);\n\t\t\t}\n\t\t};\n\t}, [fetchMore, isFetching, containerRef]);\n\n\tconsole.log({ hasData, hasAllProductsLoaded });\n\n\treturn (\n\t\t<div>\n\t\t\t{children}\n\t\t\t{!!hasData && !hasAllProductsLoaded.current && (\n\t\t\t\t<div ref={shimmerRef} style={{ minHeight: '10px' }}>\n\t\t\t\t\t{loadingComponent}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["~~InfiniteScroll~~","children","fetchMore","loadingComponent","_jsx","ProductPickerShimmer","limit","containerRef","hasData","hasAllProductsLoaded","useRef","isFetching","setIsFetching","useState","shimmerRef","handleIntersection","entries","entry","isIntersecting","then","allProductsLoaded","current","useEffect","observer","IntersectionObserver","root","rootMargin","threshold","observe","unobserve","console","log","_jsxs","jsx","Object","assign","ref","style","minHeight"],"mappings":"2MAW6DA,~~EAC5DC~~,~~WACAC~~,~~YACAC~~,~~mBAAmBC~~,MAACC,uBAAoB,CAACC,MAAO,~~IAChDC~~,~~eACAC~~,~~cAEA~~,~~MAAMC~~,EAAuBC,UAAO,IAC7BC,EAAYC,GAAiBC,EAAQA,UAAU,GAChDC,EAAaJ,SAAuB,MAEpCK,EAAsBC,IAC3B,MAAOC,GAASD,EAEZC,EAAMC,iBAAmBP,IAC5BC,GAAc,GAEdV,IAAYiB,MAAMC,IACbA,IACHX,EAAqBY,SAAU,GAEhCT,GAAc,EAAM,IAErB,EAuBF,OApBAU,EAAAA,WAAU,KACT,IAAKf,EAAac,UAAYP,EAAWO,QAAS,OAElD,MAAME,EAAW,IAAIC,qBAAqBT,EAAoB,CAC7DU,KAAMlB,EAAac,QACnBK,WAAY,MACZC,UAAW,KAKZ,OAFAJ,EAASK,QAAQd,EAAWO,SAErB,KACFP,EAAWO,SACdE,EAASM,UAAUf,EAAWO,QAC9B,CACD,GACC,CAACnB,EAAWS,EAAYJ,IAE3BuB,QAAQC,IAAI,CAAEvB,UAASC,yBAGtBuB,EAAAA,KAAA,MAAA,CAAA/B,SAAA,CACEA,IACEO,IAAYC,EAAqBY,SACnCjB,EAAK6B,IAAA,MAAAC,OAAAC,OAAA,CAAAC,IAAKtB,EAAYuB,MAAO,CAAEC,UAAW,SAAQ,CAAArC,SAChDE,OAGE"}
1	+ {"version":3,"file":"InfiniteScroll.js","sources":["../../../../src/components/InfiniteScroll/InfiniteScroll.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { ProductPickerShimmer } from '../product-picker-v2/ProductPickerShimmer';\n\nexport interface InfiniteScrollProps {\n\tchildren: React.ReactNode;\n\tfetchMore: () => Promise<boolean>;\n\tloadingComponent?: React.ReactNode;\n\tcontainerRef: React.RefObject<HTMLDivElement>;\n\thasData: boolean;\n}\n\nexport const InfiniteScroll: React.FC<InfiniteScrollProps> = ({\n\tchildren,\n\tfetchMore,\n\tloadingComponent = <ProductPickerShimmer limit={2} />,\n\tcontainerRef,\n\thasData,\n}) => {\n\tconst hasAllProductsLoaded = useRef(false);\n\tconst [isFetching, setIsFetching] = useState<boolean>(false);\n\tconst shimmerRef = useRef<HTMLDivElement>(null);\n\n\tconst handleIntersection = (entries: IntersectionObserverEntry[]) => {\n\t\tconst [entry] = entries;\n\n\t\tif (entry.isIntersecting && !isFetching) {\n\t\t\tsetIsFetching(true);\n\n\t\t\tfetchMore().then((allProductsLoaded) => {\n\t\t\t\tif (allProductsLoaded) {\n\t\t\t\t\thasAllProductsLoaded.current = true;\n\t\t\t\t}\n\t\t\t\tsetIsFetching(false);\n\t\t\t});\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (!containerRef.current \|\| !shimmerRef.current) return;\n\n\t\tconst observer = new IntersectionObserver(handleIntersection, {\n\t\t\troot: containerRef.current,\n\t\t\trootMargin: '0px',\n\t\t\tthreshold: 0.1, // Adjust threshold as needed\n\t\t});\n\n\t\tobserver.observe(shimmerRef.current);\n\n\t\treturn () => {\n\t\t\tif (shimmerRef.current) {\n\t\t\t\tobserver.unobserve(shimmerRef.current);\n\t\t\t}\n\t\t};\n\t}, [fetchMore, isFetching, containerRef]);\n\n\tconsole.log({ hasData, hasAllProductsLoaded });\n\n\treturn (\n\t\t<div>\n\t\t\t{children}\n\t\t\t{!!hasData && !hasAllProductsLoaded.current && (\n\t\t\t\t<div ref={shimmerRef} style={{ minHeight: '10px' }}>\n\t\t\t\t\t{loadingComponent}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["_ref","children","fetchMore","loadingComponent","_jsx","ProductPickerShimmer","limit","containerRef","hasData","hasAllProductsLoaded","useRef","isFetching","setIsFetching","useState","shimmerRef","handleIntersection","entries","entry","isIntersecting","then","allProductsLoaded","current","useEffect","observer","IntersectionObserver","root","rootMargin","threshold","observe","unobserve","console","log","_jsxs","jsx","Object","assign","ref","style","minHeight"],"mappings":"2MAW6DA,IAMxD,IANyDC,SAC7DA,EAAQC,UACRA,EAASC,iBACTA,EAAmBC,MAACC,uBAAoB,CAACC,MAAO,IAAKC,aACrDA,EAAYC,QACZA,GACAR,EACA,MAAMS,EAAuBC,UAAO,IAC7BC,EAAYC,GAAiBC,EAAQA,UAAU,GAChDC,EAAaJ,SAAuB,MAEpCK,EAAsBC,IAC3B,MAAOC,GAASD,EAEZC,EAAMC,iBAAmBP,IAC5BC,GAAc,GAEdV,IAAYiB,MAAMC,IACbA,IACHX,EAAqBY,SAAU,GAEhCT,GAAc,EAAM,IAErB,EAuBF,OApBAU,EAAAA,WAAU,KACT,IAAKf,EAAac,UAAYP,EAAWO,QAAS,OAElD,MAAME,EAAW,IAAIC,qBAAqBT,EAAoB,CAC7DU,KAAMlB,EAAac,QACnBK,WAAY,MACZC,UAAW,KAKZ,OAFAJ,EAASK,QAAQd,EAAWO,SAErB,KACFP,EAAWO,SACdE,EAASM,UAAUf,EAAWO,QAC9B,CACD,GACC,CAACnB,EAAWS,EAAYJ,IAE3BuB,QAAQC,IAAI,CAAEvB,UAASC,yBAGtBuB,EAAAA,KAAA,MAAA,CAAA/B,SAAA,CACEA,IACEO,IAAYC,EAAqBY,SACnCjB,EAAK6B,IAAA,MAAAC,OAAAC,OAAA,CAAAC,IAAKtB,EAAYuB,MAAO,CAAEC,UAAW,SAAQ,CAAArC,SAChDE,OAGE"}

package/dist/cjs/components/ProgressChecklist/MultiChecklistItem.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../accordion/Accordion.js"),i=require("./SimpleChecklistItem.js");exports.default=({item:o,children:t,isOpen:s,onToggle:c})=>{const d="boolean"==typeof s?s:!!o.isActive,n=e.jsx(i.default,{header:o.header,subheader:o.subheader,icon:o.icon,activeIcon:o.activeIcon,completedIcon:o.completedIcon,isCompleted:o.isCompleted,isActive:o.isActive,tag:o.tag});return e.jsx(r.BikAccordion,Object.assign({header:n,headerStyles:{height:"auto",cursor:"pointer"},onToggleAccordion:c||(()=>{}),isOpen:d,skipHoverHeader:!0,showBorders:!0,borderRadius:"8px"},{children:t?e.jsx("div",Object.assign({style:{border:"none",padding:16}},{children:t})):null}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../accordion/Accordion.js"),i=require("./SimpleChecklistItem.js");exports.default=o=>{let{item:t,children:s,isOpen:c,onToggle:d}=o;const n="boolean"==typeof c?c:!!t.isActive,a=e.jsx(i.default,{header:t.header,subheader:t.subheader,icon:t.icon,activeIcon:t.activeIcon,completedIcon:t.completedIcon,isCompleted:t.isCompleted,isActive:t.isActive,tag:t.tag});return e.jsx(r.BikAccordion,Object.assign({header:a,headerStyles:{height:"auto",cursor:"pointer"},onToggleAccordion:d||(()=>{}),isOpen:n,skipHoverHeader:!0,showBorders:!0,borderRadius:"8px"},{children:s?e.jsx("div",Object.assign({style:{border:"none",padding:16}},{children:s})):null}))};
 //# sourceMappingURL=MultiChecklistItem.js.map

package/dist/cjs/components/ProgressChecklist/MultiChecklistItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiChecklistItem.js","sources":["../../../../src/components/ProgressChecklist/MultiChecklistItem.tsx"],"sourcesContent":["import React from 'react';\nimport { BikAccordion } from '../accordion/Accordion';\nimport { ALERT_TYPES } from '../alerts';\nimport { TooltipProps } from '../tooltips/Tooltip';\nimport SimpleChecklistItem from './SimpleChecklistItem';\n\ninterface MultiChecklistItemProps {\n\titem: MultiChecklistItemType;\n\tchildren?: React.ReactNode;\n\tisOpen?: boolean;\n\tonToggle?: (open: boolean) => void;\n}\n\n// A lightweight interface for items that will appear in the accordion (multiple) list.\n// It intentionally overlaps with SingleChecklistItemType so both kinds can live in the same\n// default array and be rendered by the same single-item renderer when needed.\nexport interface MultiChecklistItemType {\n\tid: string;\n\theader: string;\n\tsubheader?: string;\n\ticon?: React.ReactNode;\n\tactiveIcon?: React.ReactNode;\n\tcompletedIcon?: React.ReactNode;\n\tisActive?: boolean;\n\tisCompleted?: boolean;\n\tonSetup?: () => void;\n\ttag?: {\n\t\ttagText: string \| number;\n\t\tvariant?: 'regular' \| 'circle' \| 'compressed';\n\t\ttype?:\n\t\t\t\| 'negative'\n\t\t\t\| 'warning'\n\t\t\t\| 'positive'\n\t\t\t\| 'neutral'\n\t\t\t\| 'white'\n\t\t\t\| 'purple'\n\t\t\t\| 'blue'\n\t\t\t\| 'grey'\n\t\t\t\| 'ai';\n\t\ttheme?: 'light' \| 'dark';\n\t\ttooltip?: Omit<TooltipProps, 'children'>;\n\t};\n\ttype: 'multiple';\n\talertType?: ALERT_TYPES;\n\t// Steps for the multi checklist item. Each step has text, optional onClick and completion state.\n\tsteps?: Array<{\n\t\tid?: string;\n\t\ttext: string; // displayed text for the step\n\t\tonClick?: () => void; // handler when the step is clicked\n\t\tisCompleted?: boolean; // whether the step is completed\n\t}>;\n\tbuttonType?: 'primary' \| 'secondary' \| 'tertiary';\n}\n\nconst MultiChecklistItem: React.FC<MultiChecklistItemProps> = ({\n\titem,\n\tchildren,\n\tisOpen,\n\tonToggle,\n}) => {\n\t// If caller didn't explicitly control `isOpen`, default to open when the item is active\n\tconst shouldOpen =\n\t\ttypeof isOpen === 'boolean'\n\t\t\t? isOpen\n\t\t\t: !!(item as MultiChecklistItemType).isActive;\n\tconst header = (\n\t\t<SimpleChecklistItem\n\t\t\theader={item.header}\n\t\t\tsubheader={item.subheader}\n\t\t\ticon={item.icon}\n\t\t\tactiveIcon={item.activeIcon}\n\t\t\tcompletedIcon={item.completedIcon}\n\t\t\tisCompleted={item.isCompleted}\n\t\t\tisActive={item.isActive}\n\t\t\ttag={item.tag}\n\t\t/>\n\t);\n\n\treturn (\n\t\t<BikAccordion\n\t\t\theader={header}\n\t\t\theaderStyles={{ height: 'auto', cursor: 'pointer' }}\n\t\t\tonToggleAccordion={\n\t\t\t\tonToggle \|\|\n\t\t\t\t(() => {\n\t\t\t\t\t/* no-op */\n\t\t\t\t})\n\t\t\t}\n\t\t\tisOpen={shouldOpen}\n\t\t\tskipHoverHeader={true}\n\t\t\tshowBorders={true}\n\t\t\tborderRadius=\"8px\"\n\t\t>\n\t\t\t{children ? (\n\t\t\t\t<div style={{ border: 'none', padding: 16 }}>{children}</div>\n\t\t\t) : null}\n\t\t</BikAccordion>\n\t);\n};\n\nexport default MultiChecklistItem;\n"],"names":["~~MultiChecklistItem~~","item","children","isOpen","onToggle","shouldOpen","isActive","header","_jsx","jsx","SimpleChecklistItem","subheader","icon","activeIcon","completedIcon","isCompleted","tag","BikAccordion","Object","assign","headerStyles","height","cursor","onToggleAccordion","skipHoverHeader","showBorders","borderRadius","style","border","padding"],"mappings":"oMAsD8DA,~~EAC7DC~~,~~OACAC~~,~~WACAC~~,~~SACAC~~,~~eAGA~~,~~MAAMC~~,EACa,kBAAXF,EACJA,IACGF,EAAgCK,SACjCC,EACLC,EAACC,IAAAC,WACAH,OAAQN,EAAKM,OACbI,UAAWV,EAAKU,UAChBC,KAAMX,EAAKW,KACXC,WAAYZ,EAAKY,WACjBC,cAAeb,EAAKa,cACpBC,YAAad,EAAKc,YAClBT,SAAUL,EAAKK,SACfU,IAAKf,EAAKe,MAIZ,OACCR,MAACS,EAAAA,aAAYC,OAAAC,OAAA,CACZZ,OAAQA,EACRa,aAAc,CAAEC,OAAQ,OAAQC,OAAQ,WACxCC,kBACCnB,GAAQ,MAGP,GAEFD,OAAQE,EACRmB,iBAAiB,EACjBC,aAAa,EACbC,aAAa,OAEZ,CAAAxB,SAAAA,EACAM,EAAAA,IAAK,MAAAU,OAAAC,OAAA,CAAAQ,MAAO,CAAEC,OAAQ,OAAQC,QAAS,KAAO,CAAA3B,SAAAA,KAC3C,OACU"}
1	+ {"version":3,"file":"MultiChecklistItem.js","sources":["../../../../src/components/ProgressChecklist/MultiChecklistItem.tsx"],"sourcesContent":["import React from 'react';\nimport { BikAccordion } from '../accordion/Accordion';\nimport { ALERT_TYPES } from '../alerts';\nimport { TooltipProps } from '../tooltips/Tooltip';\nimport SimpleChecklistItem from './SimpleChecklistItem';\n\ninterface MultiChecklistItemProps {\n\titem: MultiChecklistItemType;\n\tchildren?: React.ReactNode;\n\tisOpen?: boolean;\n\tonToggle?: (open: boolean) => void;\n}\n\n// A lightweight interface for items that will appear in the accordion (multiple) list.\n// It intentionally overlaps with SingleChecklistItemType so both kinds can live in the same\n// default array and be rendered by the same single-item renderer when needed.\nexport interface MultiChecklistItemType {\n\tid: string;\n\theader: string;\n\tsubheader?: string;\n\ticon?: React.ReactNode;\n\tactiveIcon?: React.ReactNode;\n\tcompletedIcon?: React.ReactNode;\n\tisActive?: boolean;\n\tisCompleted?: boolean;\n\tonSetup?: () => void;\n\ttag?: {\n\t\ttagText: string \| number;\n\t\tvariant?: 'regular' \| 'circle' \| 'compressed';\n\t\ttype?:\n\t\t\t\| 'negative'\n\t\t\t\| 'warning'\n\t\t\t\| 'positive'\n\t\t\t\| 'neutral'\n\t\t\t\| 'white'\n\t\t\t\| 'purple'\n\t\t\t\| 'blue'\n\t\t\t\| 'grey'\n\t\t\t\| 'ai';\n\t\ttheme?: 'light' \| 'dark';\n\t\ttooltip?: Omit<TooltipProps, 'children'>;\n\t};\n\ttype: 'multiple';\n\talertType?: ALERT_TYPES;\n\t// Steps for the multi checklist item. Each step has text, optional onClick and completion state.\n\tsteps?: Array<{\n\t\tid?: string;\n\t\ttext: string; // displayed text for the step\n\t\tonClick?: () => void; // handler when the step is clicked\n\t\tisCompleted?: boolean; // whether the step is completed\n\t}>;\n\tbuttonType?: 'primary' \| 'secondary' \| 'tertiary';\n}\n\nconst MultiChecklistItem: React.FC<MultiChecklistItemProps> = ({\n\titem,\n\tchildren,\n\tisOpen,\n\tonToggle,\n}) => {\n\t// If caller didn't explicitly control `isOpen`, default to open when the item is active\n\tconst shouldOpen =\n\t\ttypeof isOpen === 'boolean'\n\t\t\t? isOpen\n\t\t\t: !!(item as MultiChecklistItemType).isActive;\n\tconst header = (\n\t\t<SimpleChecklistItem\n\t\t\theader={item.header}\n\t\t\tsubheader={item.subheader}\n\t\t\ticon={item.icon}\n\t\t\tactiveIcon={item.activeIcon}\n\t\t\tcompletedIcon={item.completedIcon}\n\t\t\tisCompleted={item.isCompleted}\n\t\t\tisActive={item.isActive}\n\t\t\ttag={item.tag}\n\t\t/>\n\t);\n\n\treturn (\n\t\t<BikAccordion\n\t\t\theader={header}\n\t\t\theaderStyles={{ height: 'auto', cursor: 'pointer' }}\n\t\t\tonToggleAccordion={\n\t\t\t\tonToggle \|\|\n\t\t\t\t(() => {\n\t\t\t\t\t/* no-op */\n\t\t\t\t})\n\t\t\t}\n\t\t\tisOpen={shouldOpen}\n\t\t\tskipHoverHeader={true}\n\t\t\tshowBorders={true}\n\t\t\tborderRadius=\"8px\"\n\t\t>\n\t\t\t{children ? (\n\t\t\t\t<div style={{ border: 'none', padding: 16 }}>{children}</div>\n\t\t\t) : null}\n\t\t</BikAccordion>\n\t);\n};\n\nexport default MultiChecklistItem;\n"],"names":["_ref","item","children","isOpen","onToggle","shouldOpen","isActive","header","_jsx","jsx","SimpleChecklistItem","subheader","icon","activeIcon","completedIcon","isCompleted","tag","BikAccordion","Object","assign","headerStyles","height","cursor","onToggleAccordion","skipHoverHeader","showBorders","borderRadius","style","border","padding"],"mappings":"oMAsD8DA,IAKzD,IAL0DC,KAC9DA,EAAIC,SACJA,EAAQC,OACRA,EAAMC,SACNA,GACAJ,EAEA,MAAMK,EACa,kBAAXF,EACJA,IACGF,EAAgCK,SACjCC,EACLC,EAACC,IAAAC,WACAH,OAAQN,EAAKM,OACbI,UAAWV,EAAKU,UAChBC,KAAMX,EAAKW,KACXC,WAAYZ,EAAKY,WACjBC,cAAeb,EAAKa,cACpBC,YAAad,EAAKc,YAClBT,SAAUL,EAAKK,SACfU,IAAKf,EAAKe,MAIZ,OACCR,MAACS,EAAAA,aAAYC,OAAAC,OAAA,CACZZ,OAAQA,EACRa,aAAc,CAAEC,OAAQ,OAAQC,OAAQ,WACxCC,kBACCnB,GAAQ,MAGP,GAEFD,OAAQE,EACRmB,iBAAiB,EACjBC,aAAa,EACbC,aAAa,OAEZ,CAAAxB,SAAAA,EACAM,EAAAA,IAAK,MAAAU,OAAAC,OAAA,CAAAQ,MAAO,CAAEC,OAAQ,OAAQC,QAAS,KAAO,CAAA3B,SAAAA,KAC3C,OACU"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/ActiveChecklistIcon.js"),s=require("../../assets/icons/CompletedChecklistIcon.js"),i=require("../../assets/icons/InactiveChecklistIcon.js");require("../../_virtual/_tslib.js");var r=require("../../assets/icons/chevronRight.svg.js"),l=require("../../assets/icons/info.svg.js"),n=require("react"),o=require("../../constants/Theme.js"),c=require("../alerts/Alert.js"),a=require("../alerts/AlertHelper.js"),d=require("../button/Button.js"),u=require("../progress-bar-v2/ProgressBarV2.js"),p=require("../tag/Tag.js"),g=require("../tooltips/Tooltip.js"),j=require("../TypographyStyle.js"),h=require("./MultiChecklistItem.js"),x=require("./ProgressChecklist.style.js"),C=require("./ProgressStepper.js");exports.default=({header:v,subheader:y,items:b=[],progressBarColor:m,headerAction:T,showProgressBar:S=!0,noBorder:f=!1})=>{const[O,k]=n.useState(b);n.useEffect((()=>{k(b)}),[b]);const A=O.filter((e=>e.isCompleted)).length,I=O.length,q=I>0?A/I*100:0;return e.jsxs(x.ProgressChecklistContainer,Object.assign({noBorder:f},{children:[e.jsxs(x.HeaderSection,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}},{children:[e.jsx(j.TitleMedium,{children:v}),T&&e.jsx("div",{children:T})]})),e.jsx(j.BodySecondary,Object.assign({color:o.COLORS.content.secondary},{children:y}))]}),S&&e.jsxs(x.ProgressBarSection,Object.assign({style:{display:"flex",alignItems:"center",gap:"16px"}},{children:[e.jsx("div",Object.assign({style:{flex:1}},{children:e.jsx(u.ProgressBarV2,{progress:Math.round(q),type:u.ProgressBarType.LINE,matchParentWidth:!0,showProgress:!1,color:null!=m?m:o.COLORS.background.positive.vibrant,progressBarThickness:12})})),e.jsx("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",alignItems:"center",minWidth:12}},{children:e.jsxs(j.TitleSmall,Object.assign({style:{color:o.COLORS.content.secondary,textAlign:"right"}},{children:[A," / ",I]}))}))]})),e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:O.map((n=>{var u,j,v,y,b,m,T,S;if("single"===n.type)return e.jsxs(x.SingleChecklistItem,Object.assign({isActive:n.isActive||!1},{children:[e.jsxs(x.SingleChecklistMainRow,{children:[e.jsx(x.SingleChecklistIconWrapper,{children:n.isCompleted?null!==(u=n.completedIcon)&&void 0!==u?u:e.jsx(s.CompletedChecklistIcon,{}):n.isActive?null!==(j=n.activeIcon)&&void 0!==j?j:e.jsx(t.ActiveChecklistIcon,{}):null!==(v=n.icon)&&void 0!==v?v:e.jsx(i.InactiveChecklistIcon,{})}),e.jsxs(x.SingleChecklistContent,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[e.jsx(x.SingleChecklistHeader,Object.assign({completed:!!n.isCompleted,isActive:!!n.isActive},{children:n.header})),(null===(y=n.tag)||void 0===y?void 0:y.tagText)&&(n.tag.tooltip?e.jsx(g.Tooltip,Object.assign({},n.tag.tooltip,{children:e.jsx("span",Object.assign({style:{display:"inline-flex"}},{children:e.jsx(p.Tag,{tagText:n.tag.tagText,variant:n.tag.variant,type:n.tag.type,theme:n.tag.theme})}))})):e.jsx(p.Tag,{tagText:n.tag.tagText,variant:n.tag.variant,type:n.tag.type,theme:n.tag.theme}))]})),e.jsx(x.SingleChecklistSubheader,{children:n.subheader})]}),n.isCompleted&&!n.hideRedirectButton&&e.jsx("div",Object.assign({onClick:n.onSetup,style:{cursor:"pointer"}},{children:e.jsx(r.default,{style:{marginLeft:"12px"},width:12,height:12,color:o.COLORS.content.secondary})})),!n.isCompleted&&n.isActive&&!n.hideSetupButton&&(n.customSetupButton?n.customSetupButton:e.jsx(x.SingleChecklistActionWrapper,{children:e.jsx(d.Button,{buttonText:null!==(b=n.buttonText)&&void 0!==b?b:"Setup",buttonType:null!==(m=n.buttonType)&&void 0!==m?m:"primary",onClick:n.onSetup,disabled:null!==(T=n.buttonDisabled)&&void 0!==T&&T})}))]}),n.alertText&&e.jsx(x.SingleChecklistAlertRow,{children:e.jsx(c.Alert,{text:n.alertText,type:null!==(S=n.alertType)&&void 0!==S?S:a.ALERT_TYPES.WARNING,contentPosition:a.CONTENT_POSITION.START,textColor:n.alertType===a.ALERT_TYPES.BRAND?"#4B1583":"",icon:t=>e.jsx(l.default,Object.assign({},t))})})]}),n.id);if("multiple"===n.type){const t=n.steps&&n.steps.length>0?n.steps.map(((e,t)=>{var s;return{id:null!==(s=e.id)&&void 0!==s?s:`${n.id}-sub-${t+1}`,text:e.text,label:e.text,onClick:e.onClick,isCompleted:!!e.isCompleted}})):[{id:`${n.id}-sub-1`,text:"Connect",label:"Connect",isCompleted:!1},{id:`${n.id}-sub-2`,text:"Configure",label:"Configure",isCompleted:!1},{id:`${n.id}-sub-3`,text:"Verify",label:"Verify",isCompleted:!1}];return e.jsx(h.default,Object.assign({item:n},{children:e.jsx(C.default,{steps:t,isStepperActive:n.isActive})}),n.id)}}))}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/ActiveChecklistIcon.js"),s=require("../../assets/icons/CompletedChecklistIcon.js"),i=require("../../assets/icons/InactiveChecklistIcon.js");require("../../_virtual/_tslib.js");var r=require("../../assets/icons/chevronRight.svg.js"),l=require("../../assets/icons/info.svg.js"),n=require("react"),o=require("../../constants/Theme.js"),c=require("../alerts/Alert.js"),a=require("../alerts/AlertHelper.js"),d=require("../button/Button.js"),u=require("../progress-bar-v2/ProgressBarV2.js"),p=require("../tag/Tag.js"),g=require("../tooltips/Tooltip.js"),j=require("../TypographyStyle.js"),h=require("./MultiChecklistItem.js"),x=require("./ProgressChecklist.style.js"),C=require("./ProgressStepper.js");exports.default=v=>{let{header:y,subheader:b,items:m=[],progressBarColor:T,headerAction:S,showProgressBar:f=!0,noBorder:O=!1}=v;const[k,A]=n.useState(m);n.useEffect((()=>{A(m)}),[m]);const I=k.filter((e=>e.isCompleted)).length,q=k.length,B=q>0?I/q*100:0;return e.jsxs(x.ProgressChecklistContainer,Object.assign({noBorder:O},{children:[e.jsxs(x.HeaderSection,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}},{children:[e.jsx(j.TitleMedium,{children:y}),S&&e.jsx("div",{children:S})]})),e.jsx(j.BodySecondary,Object.assign({color:o.COLORS.content.secondary},{children:b}))]}),f&&e.jsxs(x.ProgressBarSection,Object.assign({style:{display:"flex",alignItems:"center",gap:"16px"}},{children:[e.jsx("div",Object.assign({style:{flex:1}},{children:e.jsx(u.ProgressBarV2,{progress:Math.round(B),type:u.ProgressBarType.LINE,matchParentWidth:!0,showProgress:!1,color:null!=T?T:o.COLORS.background.positive.vibrant,progressBarThickness:12})})),e.jsx("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",alignItems:"center",minWidth:12}},{children:e.jsxs(j.TitleSmall,Object.assign({style:{color:o.COLORS.content.secondary,textAlign:"right"}},{children:[I," / ",q]}))}))]})),e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:k.map((n=>{var u,j,v,y,b,m,T,S;if("single"===n.type)return e.jsxs(x.SingleChecklistItem,Object.assign({isActive:n.isActive||!1},{children:[e.jsxs(x.SingleChecklistMainRow,{children:[e.jsx(x.SingleChecklistIconWrapper,{children:n.isCompleted?null!==(u=n.completedIcon)&&void 0!==u?u:e.jsx(s.CompletedChecklistIcon,{}):n.isActive?null!==(j=n.activeIcon)&&void 0!==j?j:e.jsx(t.ActiveChecklistIcon,{}):null!==(v=n.icon)&&void 0!==v?v:e.jsx(i.InactiveChecklistIcon,{})}),e.jsxs(x.SingleChecklistContent,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[e.jsx(x.SingleChecklistHeader,Object.assign({completed:!!n.isCompleted,isActive:!!n.isActive},{children:n.header})),(null===(y=n.tag)||void 0===y?void 0:y.tagText)&&(n.tag.tooltip?e.jsx(g.Tooltip,Object.assign({},n.tag.tooltip,{children:e.jsx("span",Object.assign({style:{display:"inline-flex"}},{children:e.jsx(p.Tag,{tagText:n.tag.tagText,variant:n.tag.variant,type:n.tag.type,theme:n.tag.theme})}))})):e.jsx(p.Tag,{tagText:n.tag.tagText,variant:n.tag.variant,type:n.tag.type,theme:n.tag.theme}))]})),e.jsx(x.SingleChecklistSubheader,{children:n.subheader})]}),n.isCompleted&&!n.hideRedirectButton&&e.jsx("div",Object.assign({onClick:n.onSetup,style:{cursor:"pointer"}},{children:e.jsx(r.default,{style:{marginLeft:"12px"},width:12,height:12,color:o.COLORS.content.secondary})})),!n.isCompleted&&n.isActive&&!n.hideSetupButton&&(n.customSetupButton?n.customSetupButton:e.jsx(x.SingleChecklistActionWrapper,{children:e.jsx(d.Button,{buttonText:null!==(b=n.buttonText)&&void 0!==b?b:"Setup",buttonType:null!==(m=n.buttonType)&&void 0!==m?m:"primary",onClick:n.onSetup,disabled:null!==(T=n.buttonDisabled)&&void 0!==T&&T})}))]}),n.alertText&&e.jsx(x.SingleChecklistAlertRow,{children:e.jsx(c.Alert,{text:n.alertText,type:null!==(S=n.alertType)&&void 0!==S?S:a.ALERT_TYPES.WARNING,contentPosition:a.CONTENT_POSITION.START,textColor:n.alertType===a.ALERT_TYPES.BRAND?"#4B1583":"",icon:t=>e.jsx(l.default,Object.assign({},t))})})]}),n.id);if("multiple"===n.type){const t=n.steps&&n.steps.length>0?n.steps.map(((e,t)=>{var s;return{id:null!==(s=e.id)&&void 0!==s?s:`${n.id}-sub-${t+1}`,text:e.text,label:e.text,onClick:e.onClick,isCompleted:!!e.isCompleted}})):[{id:`${n.id}-sub-1`,text:"Connect",label:"Connect",isCompleted:!1},{id:`${n.id}-sub-2`,text:"Configure",label:"Configure",isCompleted:!1},{id:`${n.id}-sub-3`,text:"Verify",label:"Verify",isCompleted:!1}];return e.jsx(h.default,Object.assign({item:n},{children:e.jsx(C.default,{steps:t,isStepperActive:n.isActive})}),n.id)}}))}))]}))};
 //# sourceMappingURL=ProgressChecklist.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressChecklist.js","sources":["../../../../src/components/ProgressChecklist/ProgressChecklist.tsx"],"sourcesContent":["import { ChevronRight } from '@src/assets/icons';\nimport React, { useEffect, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport ActiveChecklistIcon from '../../assets/icons/ActiveChecklistIcon';\nimport CompletedChecklistIcon from '../../assets/icons/CompletedChecklistIcon';\nimport InactiveChecklistIcon from '../../assets/icons/InactiveChecklistIcon';\nimport InfoIcon from '../../assets/icons/info.svg';\nimport { Alert, ALERT_TYPES, CONTENT_POSITION } from '../alerts';\nimport { Button } from '../button';\nimport { ProgressBarType, ProgressBarV2 } from '../progress-bar-v2';\nimport { Tag } from '../tag';\nimport { Tooltip, TooltipProps } from '../tooltips/Tooltip';\nimport { BodySecondary, TitleMedium, TitleSmall } from '../TypographyStyle';\nimport MultiChecklistItem, {\n\ttype MultiChecklistItemType,\n} from './MultiChecklistItem';\nimport {\n\tHeaderSection,\n\tProgressBarSection,\n\tProgressChecklistContainer,\n\tSingleChecklistActionWrapper,\n\tSingleChecklistAlertRow,\n\tSingleChecklistContent,\n\tSingleChecklistHeader,\n\tSingleChecklistIconWrapper,\n\tSingleChecklistItem,\n\tSingleChecklistMainRow,\n\tSingleChecklistSubheader,\n} from './ProgressChecklist.style';\nimport ProgressStepper from './ProgressStepper';\n\nexport interface ChecklistItemType {\n\tid: string;\n\tlabel: string;\n\tdescription?: string;\n\tcompleted?: boolean;\n}\n\nexport interface SingleChecklistItemType {\n\tid: string;\n\theader: string;\n\tsubheader: string;\n\t// make icons optional so multi-style entries can be mixed in the same array\n\ticon?: React.ReactNode;\n\tactiveIcon?: React.ReactNode;\n\tcompletedIcon?: React.ReactNode;\n\tisActive?: boolean;\n\tisCompleted?: boolean;\n\tonSetup?: () => void;\n\talertText?: string \| React.ReactNode;\n\talertType?: ALERT_TYPES;\n\ttag?: {\n\t\ttagText: string \| number;\n\t\tvariant?: 'regular' \| 'circle' \| 'compressed';\n\t\ttype?:\n\t\t\t\| 'negative'\n\t\t\t\| 'warning'\n\t\t\t\| 'positive'\n\t\t\t\| 'neutral'\n\t\t\t\| 'white'\n\t\t\t\| 'purple'\n\t\t\t\| 'blue'\n\t\t\t\| 'grey'\n\t\t\t\| 'ai';\n\t\ttheme?: 'light' \| 'dark';\n\t\ttooltip?: Omit<TooltipProps, 'children'>;\n\t};\n\ttype: 'single';\n\tbuttonType?: 'primary' \| 'secondary' \| 'tertiary';\n\tbuttonText?: string;\n\tbuttonDisabled?: boolean;\n\thideRedirectButton?: boolean;\n\thideSetupButton?: boolean;\n\t/** Custom node to render in place of the default setup button. /\n\tcustomSetupButton?: React.ReactNode;\n}\n\nexport interface ProgressChecklistProps {\n\theader?: string;\n\tsubheader?: string;\n\titems?: Array<SingleChecklistItemType \| MultiChecklistItemType>;\n\tprogressBarColor?: string;\n\theaderAction?: React.ReactNode;\n\t/* Whether to render the progress bar. Defaults to true. /\n\tshowProgressBar?: boolean;\n\t/* Whether to remove border, border-radius, and padding. Defaults to false. /\n\tnoBorder?: boolean;\n}\n\nconst ProgressChecklist: React.FC<ProgressChecklistProps> = ({\n\theader,\n\tsubheader,\n\titems = [],\n\tprogressBarColor,\n\theaderAction,\n\tshowProgressBar = true,\n\tnoBorder = false,\n}) => {\n\t// keep local state but sync it with incoming `items` prop so updates from\n\t// parent re-render this component. Previously we only read the initial\n\t// value and ignored subsequent prop changes.\n\tconst [checklistItems, setChecklistItems] =\n\t\tuseState<Array<SingleChecklistItemType \| MultiChecklistItemType>>(items);\n\n\tuseEffect(() => {\n\t\tsetChecklistItems(items);\n\t}, [items]);\n\n\t// Prepare multiple-source: prefer `items` prop, otherwise use entries from defaultSingleItems that do not have `icon` (i.e., multi-style defaults)\n\tconst completedCount = checklistItems.filter(\n\t\t(item) => item.isCompleted,\n\t).length;\n\tconst totalCount = checklistItems.length;\n\tconst progressPercentage =\n\t\ttotalCount > 0 ? (completedCount / totalCount) 100 : 0;\n\n\treturn (\n\t\t<ProgressChecklistContainer noBorder={noBorder}>\n\t\t\t{/* Header and Subheader Section /}\n\t\t\t<HeaderSection>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TitleMedium>{header}</TitleMedium>\n\t\t\t\t\t{headerAction && <div>{headerAction}</div>}\n\t\t\t\t</div>\n\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t{subheader}\n\t\t\t\t</BodySecondary>\n\t\t\t</HeaderSection>\n\n\t\t\t{/ Progress Bar Section /}\n\t\t\t{showProgressBar && (\n\t\t\t\t<ProgressBarSection\n\t\t\t\t\tstyle={{ display: 'flex', alignItems: 'center', gap: '16px' }}\n\t\t\t\t>\n\t\t\t\t\t<div style={{ flex: 1 }}>\n\t\t\t\t\t\t<ProgressBarV2\n\t\t\t\t\t\t\tprogress={Math.round(progressPercentage)}\n\t\t\t\t\t\t\ttype={ProgressBarType.LINE}\n\t\t\t\t\t\t\tmatchParentWidth={true}\n\t\t\t\t\t\t\tshowProgress={false}\n\t\t\t\t\t\t\tcolor={progressBarColor ?? COLORS.background.positive.vibrant}\n\t\t\t\t\t\t\tprogressBarThickness={12}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tminWidth: 12,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TitleSmall\n\t\t\t\t\t\t\tstyle={{ color: COLORS.content.secondary, textAlign: 'right' }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{completedCount} / {totalCount}\n\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t</div>\n\t\t\t\t</ProgressBarSection>\n\t\t\t)}\n\n\t\t\t{/ Single-style checklist items (original form) /}\n\t\t\t<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n\t\t\t\t{checklistItems.map((item) => {\n\t\t\t\t\tif (item.type === 'single') {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<SingleChecklistItem\n\t\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\t\tisActive={item.isActive \|\| false}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<SingleChecklistMainRow>\n\t\t\t\t\t\t\t\t\t<SingleChecklistIconWrapper>\n\t\t\t\t\t\t\t\t\t\t{item.isCompleted\n\t\t\t\t\t\t\t\t\t\t\t? item.completedIcon ?? <CompletedChecklistIcon />\n\t\t\t\t\t\t\t\t\t\t\t: item.isActive\n\t\t\t\t\t\t\t\t\t\t\t? item.activeIcon ?? <ActiveChecklistIcon />\n\t\t\t\t\t\t\t\t\t\t\t: item.icon ?? <InactiveChecklistIcon />}\n\t\t\t\t\t\t\t\t\t</SingleChecklistIconWrapper>\n\t\t\t\t\t\t\t\t\t<SingleChecklistContent>\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ display: 'flex', alignItems: 'center', gap: 12 }}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<SingleChecklistHeader\n\t\t\t\t\t\t\t\t\t\t\t\tcompleted={!!item.isCompleted}\n\t\t\t\t\t\t\t\t\t\t\t\tisActive={!!item.isActive}\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{item.header}\n\t\t\t\t\t\t\t\t\t\t\t</SingleChecklistHeader>\n\t\t\t\t\t\t\t\t\t\t\t{item.tag?.tagText &&\n\t\t\t\t\t\t\t\t\t\t\t\t(item.tag.tooltip ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Tooltip {...item.tag.tooltip}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style={{ display: 'inline-flex' }}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttagText={item.tag.tagText}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariant={item.tag.variant}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype={item.tag.type}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttheme={item.tag.theme}\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</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Tooltip>\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\t<Tag\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttagText={item.tag.tagText}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariant={item.tag.variant}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype={item.tag.type}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttheme={item.tag.theme}\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</div>\n\t\t\t\t\t\t\t\t\t\t<SingleChecklistSubheader>\n\t\t\t\t\t\t\t\t\t\t\t{item.subheader}\n\t\t\t\t\t\t\t\t\t\t</SingleChecklistSubheader>\n\t\t\t\t\t\t\t\t\t</SingleChecklistContent>\n\t\t\t\t\t\t\t\t\t{item.isCompleted && !item.hideRedirectButton && (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tonClick={item.onSetup}\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tcursor: 'pointer',\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<ChevronRight\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ marginLeft: '12px' }}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\t\t\t\theight={12}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\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\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{!item.isCompleted &&\n\t\t\t\t\t\t\t\t\t\titem.isActive &&\n\t\t\t\t\t\t\t\t\t\t!item.hideSetupButton &&\n\t\t\t\t\t\t\t\t\t\t(item.customSetupButton ? (\n\t\t\t\t\t\t\t\t\t\t\titem.customSetupButton\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t<SingleChecklistActionWrapper>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tbuttonText={item.buttonText ?? 'Setup'}\n\t\t\t\t\t\t\t\t\t\t\t\t\tbuttonType={item.buttonType ?? 'primary'}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={item.onSetup}\n\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled={item.buttonDisabled ?? 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</SingleChecklistActionWrapper>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</SingleChecklistMainRow>\n\n\t\t\t\t\t\t\t\t{item.alertText && (\n\t\t\t\t\t\t\t\t\t<SingleChecklistAlertRow>\n\t\t\t\t\t\t\t\t\t\t<Alert\n\t\t\t\t\t\t\t\t\t\t\ttext={item.alertText}\n\t\t\t\t\t\t\t\t\t\t\ttype={item.alertType ?? ALERT_TYPES.WARNING}\n\t\t\t\t\t\t\t\t\t\t\tcontentPosition={CONTENT_POSITION.START}\n\t\t\t\t\t\t\t\t\t\t\ttextColor={\n\t\t\t\t\t\t\t\t\t\t\t\titem.alertType === ALERT_TYPES.BRAND ? '#4B1583' : ''\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\ticon={(props) => <InfoIcon {...props} />}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</SingleChecklistAlertRow>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</SingleChecklistItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} else if (item.type === 'multiple') {\n\t\t\t\t\t\t// Build a normalized steps array for the ProgressStepper. Prefer steps from props,\n\t\t\t\t\t\t// otherwise fall back to a sensible default.\n\t\t\t\t\t\tconst normalizedSteps =\n\t\t\t\t\t\t\titem.steps && item.steps.length > 0\n\t\t\t\t\t\t\t\t? item.steps.map((s, idx) => ({\n\t\t\t\t\t\t\t\t\t\tid: s.id ?? `${item.id}-sub-${idx + 1}`,\n\t\t\t\t\t\t\t\t\t\ttext: s.text,\n\t\t\t\t\t\t\t\t\t\tlabel: s.text,\n\t\t\t\t\t\t\t\t\t\tonClick: s.onClick,\n\t\t\t\t\t\t\t\t\t\tisCompleted: !!s.isCompleted,\n\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\t{\n\t\t\t\t\t\t\t\t\t\t\tid: `${item.id}-sub-1`,\n\t\t\t\t\t\t\t\t\t\t\ttext: 'Connect',\n\t\t\t\t\t\t\t\t\t\t\tlabel: 'Connect',\n\t\t\t\t\t\t\t\t\t\t\tisCompleted: false,\n\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\tid: `${item.id}-sub-2`,\n\t\t\t\t\t\t\t\t\t\t\ttext: 'Configure',\n\t\t\t\t\t\t\t\t\t\t\tlabel: 'Configure',\n\t\t\t\t\t\t\t\t\t\t\tisCompleted: false,\n\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\tid: `${item.id}-sub-3`,\n\t\t\t\t\t\t\t\t\t\t\ttext: 'Verify',\n\t\t\t\t\t\t\t\t\t\t\tlabel: 'Verify',\n\t\t\t\t\t\t\t\t\t\t\tisCompleted: false,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t ];\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<MultiChecklistItem key={item.id} item={item}>\n\t\t\t\t\t\t\t\t{/ sample stepper rendered as children of the accordion item */}\n\t\t\t\t\t\t\t\t<ProgressStepper\n\t\t\t\t\t\t\t\t\tsteps={normalizedSteps}\n\t\t\t\t\t\t\t\t\tisStepperActive={item.isActive}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</MultiChecklistItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</ProgressChecklistContainer>\n\t);\n};\n\nexport default ProgressChecklist;\n"],"names":["ProgressChecklist","header","subheader","items","progressBarColor","headerAction","showProgressBar","noBorder","checklistItems","setChecklistItems","useState","useEffect","completedCount","filter","item","isCompleted","length","totalCount","progressPercentage","_jsxs","ProgressChecklistContainer","Object","assign","children","jsxs","HeaderSection","style","display","flexDirection","justifyContent","alignItems","_jsx","jsx","TitleMedium","BodySecondary","color","COLORS","content","secondary","ProgressBarSection","gap","flex","ProgressBarV2","progress","Math","round","type","ProgressBarType","LINE","matchParentWidth","showProgress","background","positive","vibrant","progressBarThickness","minWidth","TitleSmall","textAlign","map","SingleChecklistItem","isActive","SingleChecklistMainRow","SingleChecklistIconWrapper","completedIcon","_a","CompletedChecklistIcon","activeIcon","_b","ActiveChecklistIcon","_c","icon","InactiveChecklistIcon","SingleChecklistContent","SingleChecklistHeader","completed","_d","tag","tagText","tooltip","Tooltip","Tag","variant","theme","SingleChecklistSubheader","hideRedirectButton","onClick","onSetup","cursor","ChevronRight","marginLeft","width","height","hideSetupButton","customSetupButton","SingleChecklistActionWrapper","Button","buttonText","_e","buttonType","_f","disabled","_g","buttonDisabled","alertText","SingleChecklistAlertRow","Alert","text","_h","alertType","ALERT_TYPES","WARNING","contentPosition","CONTENT_POSITION","START","textColor","BRAND","props","InfoIcon","id","normalizedSteps","steps","s","idx","label","MultiChecklistItem","ProgressStepper","isStepperActive"],"mappings":"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"}
1	+ {"version":3,"file":"ProgressChecklist.js","sources":["../../../../src/components/ProgressChecklist/ProgressChecklist.tsx"],"sourcesContent":["import { ChevronRight } from '@src/assets/icons';\nimport React, { useEffect, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport ActiveChecklistIcon from '../../assets/icons/ActiveChecklistIcon';\nimport CompletedChecklistIcon from '../../assets/icons/CompletedChecklistIcon';\nimport InactiveChecklistIcon from '../../assets/icons/InactiveChecklistIcon';\nimport InfoIcon from '../../assets/icons/info.svg';\nimport { Alert, ALERT_TYPES, CONTENT_POSITION } from '../alerts';\nimport { Button } from '../button';\nimport { ProgressBarType, ProgressBarV2 } from '../progress-bar-v2';\nimport { Tag } from '../tag';\nimport { Tooltip, TooltipProps } from '../tooltips/Tooltip';\nimport { BodySecondary, TitleMedium, TitleSmall } from '../TypographyStyle';\nimport MultiChecklistItem, {\n\ttype MultiChecklistItemType,\n} from './MultiChecklistItem';\nimport {\n\tHeaderSection,\n\tProgressBarSection,\n\tProgressChecklistContainer,\n\tSingleChecklistActionWrapper,\n\tSingleChecklistAlertRow,\n\tSingleChecklistContent,\n\tSingleChecklistHeader,\n\tSingleChecklistIconWrapper,\n\tSingleChecklistItem,\n\tSingleChecklistMainRow,\n\tSingleChecklistSubheader,\n} from './ProgressChecklist.style';\nimport ProgressStepper from './ProgressStepper';\n\nexport interface ChecklistItemType {\n\tid: string;\n\tlabel: string;\n\tdescription?: string;\n\tcompleted?: boolean;\n}\n\nexport interface SingleChecklistItemType {\n\tid: string;\n\theader: string;\n\tsubheader: string;\n\t// make icons optional so multi-style entries can be mixed in the same array\n\ticon?: React.ReactNode;\n\tactiveIcon?: React.ReactNode;\n\tcompletedIcon?: React.ReactNode;\n\tisActive?: boolean;\n\tisCompleted?: boolean;\n\tonSetup?: () => void;\n\talertText?: string \| React.ReactNode;\n\talertType?: ALERT_TYPES;\n\ttag?: {\n\t\ttagText: string \| number;\n\t\tvariant?: 'regular' \| 'circle' \| 'compressed';\n\t\ttype?:\n\t\t\t\| 'negative'\n\t\t\t\| 'warning'\n\t\t\t\| 'positive'\n\t\t\t\| 'neutral'\n\t\t\t\| 'white'\n\t\t\t\| 'purple'\n\t\t\t\| 'blue'\n\t\t\t\| 'grey'\n\t\t\t\| 'ai';\n\t\ttheme?: 'light' \| 'dark';\n\t\ttooltip?: Omit<TooltipProps, 'children'>;\n\t};\n\ttype: 'single';\n\tbuttonType?: 'primary' \| 'secondary' \| 'tertiary';\n\tbuttonText?: string;\n\tbuttonDisabled?: boolean;\n\thideRedirectButton?: boolean;\n\thideSetupButton?: boolean;\n\t/** Custom node to render in place of the default setup button. /\n\tcustomSetupButton?: React.ReactNode;\n}\n\nexport interface ProgressChecklistProps {\n\theader?: string;\n\tsubheader?: string;\n\titems?: Array<SingleChecklistItemType \| MultiChecklistItemType>;\n\tprogressBarColor?: string;\n\theaderAction?: React.ReactNode;\n\t/* Whether to render the progress bar. Defaults to true. /\n\tshowProgressBar?: boolean;\n\t/* Whether to remove border, border-radius, and padding. Defaults to false. /\n\tnoBorder?: boolean;\n}\n\nconst ProgressChecklist: React.FC<ProgressChecklistProps> = ({\n\theader,\n\tsubheader,\n\titems = [],\n\tprogressBarColor,\n\theaderAction,\n\tshowProgressBar = true,\n\tnoBorder = false,\n}) => {\n\t// keep local state but sync it with incoming `items` prop so updates from\n\t// parent re-render this component. Previously we only read the initial\n\t// value and ignored subsequent prop changes.\n\tconst [checklistItems, setChecklistItems] =\n\t\tuseState<Array<SingleChecklistItemType \| MultiChecklistItemType>>(items);\n\n\tuseEffect(() => {\n\t\tsetChecklistItems(items);\n\t}, [items]);\n\n\t// Prepare multiple-source: prefer `items` prop, otherwise use entries from defaultSingleItems that do not have `icon` (i.e., multi-style defaults)\n\tconst completedCount = checklistItems.filter(\n\t\t(item) => item.isCompleted,\n\t).length;\n\tconst totalCount = checklistItems.length;\n\tconst progressPercentage =\n\t\ttotalCount > 0 ? (completedCount / totalCount) 100 : 0;\n\n\treturn (\n\t\t<ProgressChecklistContainer noBorder={noBorder}>\n\t\t\t{/* Header and Subheader Section /}\n\t\t\t<HeaderSection>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<TitleMedium>{header}</TitleMedium>\n\t\t\t\t\t{headerAction && <div>{headerAction}</div>}\n\t\t\t\t</div>\n\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t{subheader}\n\t\t\t\t</BodySecondary>\n\t\t\t</HeaderSection>\n\n\t\t\t{/ Progress Bar Section /}\n\t\t\t{showProgressBar && (\n\t\t\t\t<ProgressBarSection\n\t\t\t\t\tstyle={{ display: 'flex', alignItems: 'center', gap: '16px' }}\n\t\t\t\t>\n\t\t\t\t\t<div style={{ flex: 1 }}>\n\t\t\t\t\t\t<ProgressBarV2\n\t\t\t\t\t\t\tprogress={Math.round(progressPercentage)}\n\t\t\t\t\t\t\ttype={ProgressBarType.LINE}\n\t\t\t\t\t\t\tmatchParentWidth={true}\n\t\t\t\t\t\t\tshowProgress={false}\n\t\t\t\t\t\t\tcolor={progressBarColor ?? COLORS.background.positive.vibrant}\n\t\t\t\t\t\t\tprogressBarThickness={12}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tminWidth: 12,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TitleSmall\n\t\t\t\t\t\t\tstyle={{ color: COLORS.content.secondary, textAlign: 'right' }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{completedCount} / {totalCount}\n\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t</div>\n\t\t\t\t</ProgressBarSection>\n\t\t\t)}\n\n\t\t\t{/ Single-style checklist items (original form) /}\n\t\t\t<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n\t\t\t\t{checklistItems.map((item) => {\n\t\t\t\t\tif (item.type === 'single') {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<SingleChecklistItem\n\t\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\t\tisActive={item.isActive \|\| false}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<SingleChecklistMainRow>\n\t\t\t\t\t\t\t\t\t<SingleChecklistIconWrapper>\n\t\t\t\t\t\t\t\t\t\t{item.isCompleted\n\t\t\t\t\t\t\t\t\t\t\t? item.completedIcon ?? <CompletedChecklistIcon />\n\t\t\t\t\t\t\t\t\t\t\t: item.isActive\n\t\t\t\t\t\t\t\t\t\t\t? item.activeIcon ?? <ActiveChecklistIcon />\n\t\t\t\t\t\t\t\t\t\t\t: item.icon ?? <InactiveChecklistIcon />}\n\t\t\t\t\t\t\t\t\t</SingleChecklistIconWrapper>\n\t\t\t\t\t\t\t\t\t<SingleChecklistContent>\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ display: 'flex', alignItems: 'center', gap: 12 }}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<SingleChecklistHeader\n\t\t\t\t\t\t\t\t\t\t\t\tcompleted={!!item.isCompleted}\n\t\t\t\t\t\t\t\t\t\t\t\tisActive={!!item.isActive}\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{item.header}\n\t\t\t\t\t\t\t\t\t\t\t</SingleChecklistHeader>\n\t\t\t\t\t\t\t\t\t\t\t{item.tag?.tagText &&\n\t\t\t\t\t\t\t\t\t\t\t\t(item.tag.tooltip ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Tooltip {...item.tag.tooltip}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span style={{ display: 'inline-flex' }}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttagText={item.tag.tagText}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariant={item.tag.variant}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype={item.tag.type}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttheme={item.tag.theme}\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</span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Tooltip>\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\t<Tag\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttagText={item.tag.tagText}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvariant={item.tag.variant}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttype={item.tag.type}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttheme={item.tag.theme}\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</div>\n\t\t\t\t\t\t\t\t\t\t<SingleChecklistSubheader>\n\t\t\t\t\t\t\t\t\t\t\t{item.subheader}\n\t\t\t\t\t\t\t\t\t\t</SingleChecklistSubheader>\n\t\t\t\t\t\t\t\t\t</SingleChecklistContent>\n\t\t\t\t\t\t\t\t\t{item.isCompleted && !item.hideRedirectButton && (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tonClick={item.onSetup}\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tcursor: 'pointer',\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<ChevronRight\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ marginLeft: '12px' }}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\t\t\t\theight={12}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\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\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{!item.isCompleted &&\n\t\t\t\t\t\t\t\t\t\titem.isActive &&\n\t\t\t\t\t\t\t\t\t\t!item.hideSetupButton &&\n\t\t\t\t\t\t\t\t\t\t(item.customSetupButton ? (\n\t\t\t\t\t\t\t\t\t\t\titem.customSetupButton\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t<SingleChecklistActionWrapper>\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tbuttonText={item.buttonText ?? 'Setup'}\n\t\t\t\t\t\t\t\t\t\t\t\t\tbuttonType={item.buttonType ?? 'primary'}\n\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={item.onSetup}\n\t\t\t\t\t\t\t\t\t\t\t\t\tdisabled={item.buttonDisabled ?? 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</SingleChecklistActionWrapper>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</SingleChecklistMainRow>\n\n\t\t\t\t\t\t\t\t{item.alertText && (\n\t\t\t\t\t\t\t\t\t<SingleChecklistAlertRow>\n\t\t\t\t\t\t\t\t\t\t<Alert\n\t\t\t\t\t\t\t\t\t\t\ttext={item.alertText}\n\t\t\t\t\t\t\t\t\t\t\ttype={item.alertType ?? ALERT_TYPES.WARNING}\n\t\t\t\t\t\t\t\t\t\t\tcontentPosition={CONTENT_POSITION.START}\n\t\t\t\t\t\t\t\t\t\t\ttextColor={\n\t\t\t\t\t\t\t\t\t\t\t\titem.alertType === ALERT_TYPES.BRAND ? '#4B1583' : ''\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\ticon={(props) => <InfoIcon {...props} />}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</SingleChecklistAlertRow>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</SingleChecklistItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} else if (item.type === 'multiple') {\n\t\t\t\t\t\t// Build a normalized steps array for the ProgressStepper. Prefer steps from props,\n\t\t\t\t\t\t// otherwise fall back to a sensible default.\n\t\t\t\t\t\tconst normalizedSteps =\n\t\t\t\t\t\t\titem.steps && item.steps.length > 0\n\t\t\t\t\t\t\t\t? item.steps.map((s, idx) => ({\n\t\t\t\t\t\t\t\t\t\tid: s.id ?? `${item.id}-sub-${idx + 1}`,\n\t\t\t\t\t\t\t\t\t\ttext: s.text,\n\t\t\t\t\t\t\t\t\t\tlabel: s.text,\n\t\t\t\t\t\t\t\t\t\tonClick: s.onClick,\n\t\t\t\t\t\t\t\t\t\tisCompleted: !!s.isCompleted,\n\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\t{\n\t\t\t\t\t\t\t\t\t\t\tid: `${item.id}-sub-1`,\n\t\t\t\t\t\t\t\t\t\t\ttext: 'Connect',\n\t\t\t\t\t\t\t\t\t\t\tlabel: 'Connect',\n\t\t\t\t\t\t\t\t\t\t\tisCompleted: false,\n\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\tid: `${item.id}-sub-2`,\n\t\t\t\t\t\t\t\t\t\t\ttext: 'Configure',\n\t\t\t\t\t\t\t\t\t\t\tlabel: 'Configure',\n\t\t\t\t\t\t\t\t\t\t\tisCompleted: false,\n\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\tid: `${item.id}-sub-3`,\n\t\t\t\t\t\t\t\t\t\t\ttext: 'Verify',\n\t\t\t\t\t\t\t\t\t\t\tlabel: 'Verify',\n\t\t\t\t\t\t\t\t\t\t\tisCompleted: false,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t ];\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<MultiChecklistItem key={item.id} item={item}>\n\t\t\t\t\t\t\t\t{/ sample stepper rendered as children of the accordion item */}\n\t\t\t\t\t\t\t\t<ProgressStepper\n\t\t\t\t\t\t\t\t\tsteps={normalizedSteps}\n\t\t\t\t\t\t\t\t\tisStepperActive={item.isActive}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</MultiChecklistItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</ProgressChecklistContainer>\n\t);\n};\n\nexport default ProgressChecklist;\n"],"names":["_ref","header","subheader","items","progressBarColor","headerAction","showProgressBar","noBorder","checklistItems","setChecklistItems","useState","useEffect","completedCount","filter","item","isCompleted","length","totalCount","progressPercentage","_jsxs","ProgressChecklistContainer","Object","assign","children","jsxs","HeaderSection","style","display","flexDirection","justifyContent","alignItems","_jsx","jsx","TitleMedium","BodySecondary","color","COLORS","content","secondary","ProgressBarSection","gap","flex","ProgressBarV2","progress","Math","round","type","ProgressBarType","LINE","matchParentWidth","showProgress","background","positive","vibrant","progressBarThickness","minWidth","TitleSmall","textAlign","map","SingleChecklistItem","isActive","SingleChecklistMainRow","SingleChecklistIconWrapper","completedIcon","_a","CompletedChecklistIcon","activeIcon","_b","ActiveChecklistIcon","_c","icon","InactiveChecklistIcon","SingleChecklistContent","SingleChecklistHeader","completed","_d","tag","tagText","tooltip","Tooltip","Tag","variant","theme","SingleChecklistSubheader","hideRedirectButton","onClick","onSetup","cursor","ChevronRight","marginLeft","width","height","hideSetupButton","customSetupButton","SingleChecklistActionWrapper","Button","buttonText","_e","buttonType","_f","disabled","_g","buttonDisabled","alertText","SingleChecklistAlertRow","Alert","text","_h","alertType","ALERT_TYPES","WARNING","contentPosition","CONTENT_POSITION","START","textColor","BRAND","props","InfoIcon","id","normalizedSteps","steps","s","idx","label","MultiChecklistItem","ProgressStepper","isStepperActive"],"mappings":"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"}

package/dist/cjs/components/ProgressChecklist/ProgressStepper.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/Redirect2Icon.js"),i=require("../../assets/icons/SmallCheckIcon.js");require("../../_virtual/_tslib.js");var n=require("react"),l=require("../../constants/Theme.js"),s=require("../button/Button.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=d(n);const r=({steps:d=[],onStepClick:r,isStepperActive:a})=>{var c,u;const p=d.length>0?d:[{id:"step-1",text:"Step One"},{id:"step-2",text:"Step Two"},{id:"step-3",text:"Step Three"}],[x,v]=n.useState(null!==(u=null===(c=p[0])||void 0===c?void 0:c.id)&&void 0!==u?u:null);return e.jsx("div",Object.assign({style:{paddingLeft:52}},{children:e.jsx("div",Object.assign({style:{margin:0,padding:0,display:"flex",flexDirection:"column",gap:12}},{children:p.map(((n,d)=>{var c,u,h,g,j,m,f;return e.jsxs(o.default.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:8}},{children:[(()=>{var t;const l=(0===d||(null===(t=p[d-1])||void 0===t?void 0:t.isCompleted))&&!0===a;return!0===n.isCompleted?e.jsx("div",Object.assign({style:{width:24,height:24,flex:"0 0 24px"},"aria-hidden":!0},{children:e.jsx(i.SmallCheckIcon,{})})):e.jsx("div",Object.assign({style:{width:24,height:24,borderRadius:30,padding:4,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",background:l?"#4B1583":"transparent",color:l?"#FFFFFF":"#BDBDBD",border:"1px solid "+(l?"#4B1583":"#E0E0E0"),fontSize:12,lineHeight:"12px",flex:"0 0 24px"},"aria-hidden":!0},{children:e.jsx("span",Object.assign({style:{fontSize:12,fontWeight:500}},{children:d+1}))}))})(),e.jsx("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"flex-start",minWidth:0},"aria-label":`Open ${null!==(u=null!==(c=n.label)&&void 0!==c?c:n.text)&&void 0!==u?u:`step ${d+1}`}`},{children:e.jsx(s.Button,{buttonText:null!==(g=null!==(h=n.label)&&void 0!==h?h:n.text)&&void 0!==g?g:`Step ${d+1}`,buttonType:"text",buttonTextColor:n.isCompleted?l.COLORS.text.secondary:0!==d&&!0!==(null===(j=p[d-1])||void 0===j?void 0:j.isCompleted)||!a?l.COLORS.content.inactive:"#4B1583",matchParentWidth:!1,size:"small",style:{width:"fit-content",paddingLeft:0,textDecoration:"none",textDecorationLine:"none"},onClick:()=>{var e,t;v(null!==(e=n.id)&&void 0!==e?e:x),(!n.isCompleted&&a&&(0===d||!0===(null===(t=p[d-1])||void 0===t?void 0:t.isCompleted))||n.isCompleted)&&(n.onClick?n.onClick():n.id&&(null==r||r(n.id)))}})})),!n.isCompleted&&(0===d||!0===(null===(m=p[d-1])||void 0===m?void 0:m.isCompleted))&&a&&e.jsx("div",Object.assign({style:{width:20,height:20,display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer"},"aria-hidden":!0,onClick:e=>{var t,i;v(null!==(t=n.id)&&void 0!==t?t:x),n.isCompleted||!a||0!==d&&!0!==(null===(i=p[d-1])||void 0===i?void 0:i.isCompleted)||(n.onClick?n.onClick():n.id&&(null==r||r(n.id)))}},{children:e.jsx(t.Redirect2Icon,{})}))]})),d!==p.length-1&&e.jsx("div",{"aria-hidden":!0,style:{width:8,height:1,borderRadius:2,background:"#BDBDBD",transform:"rotate(90deg)",marginLeft:8}})]},null!==(f=n.id)&&void 0!==f?f:`step-${d}`)}))}))}))};var a=o.default.memo(r);exports.default=a;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/Redirect2Icon.js"),i=require("../../assets/icons/SmallCheckIcon.js");require("../../_virtual/_tslib.js");var n=require("react"),l=require("../../constants/Theme.js"),s=require("../button/Button.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=d(n);const r=d=>{let{steps:r=[],onStepClick:a,isStepperActive:c}=d;var u,p;const x=r.length>0?r:[{id:"step-1",text:"Step One"},{id:"step-2",text:"Step Two"},{id:"step-3",text:"Step Three"}],[v,h]=n.useState(null!==(p=null===(u=x[0])||void 0===u?void 0:u.id)&&void 0!==p?p:null);return e.jsx("div",Object.assign({style:{paddingLeft:52}},{children:e.jsx("div",Object.assign({style:{margin:0,padding:0,display:"flex",flexDirection:"column",gap:12}},{children:x.map(((n,d)=>{var r,u,p,g,j,m,f;return e.jsxs(o.default.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:8}},{children:[(()=>{var t;const l=(0===d||(null===(t=x[d-1])||void 0===t?void 0:t.isCompleted))&&!0===c;return!0===n.isCompleted?e.jsx("div",Object.assign({style:{width:24,height:24,flex:"0 0 24px"},"aria-hidden":!0},{children:e.jsx(i.SmallCheckIcon,{})})):e.jsx("div",Object.assign({style:{width:24,height:24,borderRadius:30,padding:4,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",background:l?"#4B1583":"transparent",color:l?"#FFFFFF":"#BDBDBD",border:"1px solid "+(l?"#4B1583":"#E0E0E0"),fontSize:12,lineHeight:"12px",flex:"0 0 24px"},"aria-hidden":!0},{children:e.jsx("span",Object.assign({style:{fontSize:12,fontWeight:500}},{children:d+1}))}))})(),e.jsx("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"flex-start",minWidth:0},"aria-label":`Open ${null!==(u=null!==(r=n.label)&&void 0!==r?r:n.text)&&void 0!==u?u:`step ${d+1}`}`},{children:e.jsx(s.Button,{buttonText:null!==(g=null!==(p=n.label)&&void 0!==p?p:n.text)&&void 0!==g?g:`Step ${d+1}`,buttonType:"text",buttonTextColor:n.isCompleted?l.COLORS.text.secondary:0!==d&&!0!==(null===(j=x[d-1])||void 0===j?void 0:j.isCompleted)||!c?l.COLORS.content.inactive:"#4B1583",matchParentWidth:!1,size:"small",style:{width:"fit-content",paddingLeft:0,textDecoration:"none",textDecorationLine:"none"},onClick:()=>{var e,t;h(null!==(e=n.id)&&void 0!==e?e:v),(!n.isCompleted&&c&&(0===d||!0===(null===(t=x[d-1])||void 0===t?void 0:t.isCompleted))||n.isCompleted)&&(n.onClick?n.onClick():n.id&&(null==a||a(n.id)))}})})),!n.isCompleted&&(0===d||!0===(null===(m=x[d-1])||void 0===m?void 0:m.isCompleted))&&c&&e.jsx("div",Object.assign({style:{width:20,height:20,display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer"},"aria-hidden":!0,onClick:e=>{var t,i;h(null!==(t=n.id)&&void 0!==t?t:v),n.isCompleted||!c||0!==d&&!0!==(null===(i=x[d-1])||void 0===i?void 0:i.isCompleted)||(n.onClick?n.onClick():n.id&&(null==a||a(n.id)))}},{children:e.jsx(t.Redirect2Icon,{})}))]})),d!==x.length-1&&e.jsx("div",{"aria-hidden":!0,style:{width:8,height:1,borderRadius:2,background:"#BDBDBD",transform:"rotate(90deg)",marginLeft:8}})]},null!==(f=n.id)&&void 0!==f?f:`step-${d}`)}))}))}))};var a=o.default.memo(r);exports.default=a;
 //# sourceMappingURL=ProgressStepper.js.map

package/dist/cjs/components/ProgressChecklist/ProgressStepper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressStepper.js","sources":["../../../../src/components/ProgressChecklist/ProgressStepper.tsx"],"sourcesContent":["import { Redirect2Icon, SmallCheckIcon } from '@src/assets/icons';\nimport React, { useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { Button } from '../button';\n\ninterface StepItem {\n\tid?: string;\n\t// New step shape used across the onboarding checklist\n\t// `text` is the primary content shown on the small button.\n\ttext: string;\n\tlabel?: string; // kept for backward-compatibility\n\tonClick?: () => void;\n\tisCompleted?: boolean;\n}\n\ninterface ProgressStepperProps {\n\tsteps?: StepItem[];\n\tonStepClick?: (id: string) => void;\n\tisStepperActive?: boolean;\n}\n\n// Render a lightweight stepper list. Each item has: left-number-icon (placeholder), a small content button, and the provided right icon.\nconst ProgressStepper: React.FC<ProgressStepperProps> = ({\n\tsteps = [],\n\tonStepClick,\n\tisStepperActive,\n}) => {\n\tconst items =\n\t\tsteps.length > 0\n\t\t\t? steps\n\t\t\t: [\n\t\t\t\t\t{ id: 'step-1', text: 'Step One' },\n\t\t\t\t\t{ id: 'step-2', text: 'Step Two' },\n\t\t\t\t\t{ id: 'step-3', text: 'Step Three' },\n\t\t\t ];\n\n\t// Track locally selected/active step so we can render the active state for the number icon\n\tconst [selectedId, setSelectedId] = useState<string \| null>(\n\t\titems[0]?.id ?? null,\n\t);\n\n\treturn (\n\t\t<div style={{ paddingLeft: 52 }}>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tmargin: 0,\n\t\t\t\t\tpadding: 0,\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tgap: 12,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{items.map((step, idx) => (\n\t\t\t\t\t<React.Fragment key={step.id ?? `step-${idx}`}>\n\t\t\t\t\t\t<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n\t\t\t\t\t\t\t{/* Left: number icon /}\n\t\t\t\t\t\t\t{(() => {\n\t\t\t\t\t\t\t\t// Step is active if it's the first step OR if the previous step is completed\n\t\t\t\t\t\t\t\tconst isActive =\n\t\t\t\t\t\t\t\t\t(idx === 0 \|\| items[idx - 1]?.isCompleted) &&\n\t\t\t\t\t\t\t\t\tisStepperActive === true;\n\t\t\t\t\t\t\t\tconst isCompleted = step.isCompleted === true;\n\n\t\t\t\t\t\t\t\t// If completed, show checkmark icon\n\t\t\t\t\t\t\t\tif (isCompleted) {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\twidth: 24,\n\t\t\t\t\t\t\t\t\t\t\t\theight: 24,\n\t\t\t\t\t\t\t\t\t\t\t\tflex: '0 0 24px',\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<SmallCheckIcon />\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t// Otherwise show numbered circle\n\t\t\t\t\t\t\t\treturn (\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\twidth: 24,\n\t\t\t\t\t\t\t\t\t\t\theight: 24,\n\t\t\t\t\t\t\t\t\t\t\tborderRadius: 30,\n\t\t\t\t\t\t\t\t\t\t\tpadding: 4,\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\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t\t\t\t\t\tbackground: isActive ? '#4B1583' : 'transparent',\n\t\t\t\t\t\t\t\t\t\t\tcolor: isActive ? '#FFFFFF' : '#BDBDBD',\n\t\t\t\t\t\t\t\t\t\t\tborder: `1px solid ${isActive ? '#4B1583' : '#E0E0E0'}`,\n\t\t\t\t\t\t\t\t\t\t\tfontSize: 12,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight: '12px',\n\t\t\t\t\t\t\t\t\t\t\tflex: '0 0 24px',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span style={{ fontSize: 12, fontWeight: 500 }}>\n\t\t\t\t\t\t\t\t\t\t\t{idx + 1}\n\t\t\t\t\t\t\t\t\t\t</span>\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})()}\n\n\t\t\t\t\t\t\t{/ Center: small content button (do not grow) /}\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tjustifyContent: 'flex-start',\n\t\t\t\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\taria-label={`Open ${\n\t\t\t\t\t\t\t\t\tstep.label ?? step.text ?? `step ${idx + 1}`\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tbuttonText={step.label ?? step.text ?? `Step ${idx + 1}`}\n\t\t\t\t\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\t\t\t\t\tbuttonTextColor={\n\t\t\t\t\t\t\t\t\t\tstep.isCompleted\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.text.secondary\n\t\t\t\t\t\t\t\t\t\t\t: (idx === 0 \|\| items[idx - 1]?.isCompleted === true) &&\n\t\t\t\t\t\t\t\t\t\t\t isStepperActive\n\t\t\t\t\t\t\t\t\t\t\t? '#4B1583'\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tmatchParentWidth={false}\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\twidth: 'fit-content',\n\t\t\t\t\t\t\t\t\t\tpaddingLeft: 0,\n\t\t\t\t\t\t\t\t\t\ttextDecoration: 'none',\n\t\t\t\t\t\t\t\t\t\ttextDecorationLine: 'none',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tsetSelectedId(step.id ?? selectedId);\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t(!step.isCompleted &&\n\t\t\t\t\t\t\t\t\t\t\t\tisStepperActive &&\n\t\t\t\t\t\t\t\t\t\t\t\t(idx === 0 \|\| items[idx - 1]?.isCompleted === true)) \|\|\n\t\t\t\t\t\t\t\t\t\t\tstep.isCompleted\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tif (step.onClick) step.onClick();\n\t\t\t\t\t\t\t\t\t\t\telse if (step.id) onStepClick?.(step.id);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t{/ Rightmost icon (provided SVG) */}\n\t\t\t\t\t\t\t{!step.isCompleted &&\n\t\t\t\t\t\t\t\t(idx === 0 \|\| items[idx - 1]?.isCompleted === true) &&\n\t\t\t\t\t\t\t\tisStepperActive && (\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\twidth: 20,\n\t\t\t\t\t\t\t\t\t\t\theight: 20,\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\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tsetSelectedId(step.id ?? selectedId);\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t!step.isCompleted &&\n\t\t\t\t\t\t\t\t\t\t\t\tisStepperActive &&\n\t\t\t\t\t\t\t\t\t\t\t\t(idx === 0 \|\| items[idx - 1]?.isCompleted === true)\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\tif (step.onClick) step.onClick();\n\t\t\t\t\t\t\t\t\t\t\t\telse if (step.id) onStepClick?.(step.id);\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\t\t\t<Redirect2Icon />\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</div>\n\t\t\t\t\t\t{idx !== items.length - 1 && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\twidth: 8,\n\t\t\t\t\t\t\t\t\theight: 1,\n\t\t\t\t\t\t\t\t\tborderRadius: 2,\n\t\t\t\t\t\t\t\t\tbackground: '#BDBDBD',\n\t\t\t\t\t\t\t\t\ttransform: 'rotate(90deg)',\n\t\t\t\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</React.Fragment>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default React.memo(ProgressStepper);\n"],"names":["ProgressStepper","steps","onStepClick","isStepperActive","items","length","id","text","selectedId","setSelectedId","useState","_b","_a","_jsx","Object","assign","style","paddingLeft","children","jsx","margin","padding","display","flexDirection","gap","map","step","idx","_jsxs","jsxs","React","Fragment","alignItems","isActive","isCompleted","width","height","flex","SmallCheckIcon","borderRadius","justifyContent","boxSizing","background","color","border","fontSize","lineHeight","fontWeight","minWidth","label","Button","buttonText","_c","_d","buttonType","buttonTextColor","COLORS","secondary","_e","content","inactive","matchParentWidth","size","textDecoration","textDecorationLine","onClick","_f","cursor","e","Redirect2Icon","transform","marginLeft","_g","ProgressStepper$1","memo"],"mappings":"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"}
1	+ {"version":3,"file":"ProgressStepper.js","sources":["../../../../src/components/ProgressChecklist/ProgressStepper.tsx"],"sourcesContent":["import { Redirect2Icon, SmallCheckIcon } from '@src/assets/icons';\nimport React, { useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { Button } from '../button';\n\ninterface StepItem {\n\tid?: string;\n\t// New step shape used across the onboarding checklist\n\t// `text` is the primary content shown on the small button.\n\ttext: string;\n\tlabel?: string; // kept for backward-compatibility\n\tonClick?: () => void;\n\tisCompleted?: boolean;\n}\n\ninterface ProgressStepperProps {\n\tsteps?: StepItem[];\n\tonStepClick?: (id: string) => void;\n\tisStepperActive?: boolean;\n}\n\n// Render a lightweight stepper list. Each item has: left-number-icon (placeholder), a small content button, and the provided right icon.\nconst ProgressStepper: React.FC<ProgressStepperProps> = ({\n\tsteps = [],\n\tonStepClick,\n\tisStepperActive,\n}) => {\n\tconst items =\n\t\tsteps.length > 0\n\t\t\t? steps\n\t\t\t: [\n\t\t\t\t\t{ id: 'step-1', text: 'Step One' },\n\t\t\t\t\t{ id: 'step-2', text: 'Step Two' },\n\t\t\t\t\t{ id: 'step-3', text: 'Step Three' },\n\t\t\t ];\n\n\t// Track locally selected/active step so we can render the active state for the number icon\n\tconst [selectedId, setSelectedId] = useState<string \| null>(\n\t\titems[0]?.id ?? null,\n\t);\n\n\treturn (\n\t\t<div style={{ paddingLeft: 52 }}>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tmargin: 0,\n\t\t\t\t\tpadding: 0,\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tgap: 12,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{items.map((step, idx) => (\n\t\t\t\t\t<React.Fragment key={step.id ?? `step-${idx}`}>\n\t\t\t\t\t\t<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>\n\t\t\t\t\t\t\t{/* Left: number icon /}\n\t\t\t\t\t\t\t{(() => {\n\t\t\t\t\t\t\t\t// Step is active if it's the first step OR if the previous step is completed\n\t\t\t\t\t\t\t\tconst isActive =\n\t\t\t\t\t\t\t\t\t(idx === 0 \|\| items[idx - 1]?.isCompleted) &&\n\t\t\t\t\t\t\t\t\tisStepperActive === true;\n\t\t\t\t\t\t\t\tconst isCompleted = step.isCompleted === true;\n\n\t\t\t\t\t\t\t\t// If completed, show checkmark icon\n\t\t\t\t\t\t\t\tif (isCompleted) {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\twidth: 24,\n\t\t\t\t\t\t\t\t\t\t\t\theight: 24,\n\t\t\t\t\t\t\t\t\t\t\t\tflex: '0 0 24px',\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<SmallCheckIcon />\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t// Otherwise show numbered circle\n\t\t\t\t\t\t\t\treturn (\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\twidth: 24,\n\t\t\t\t\t\t\t\t\t\t\theight: 24,\n\t\t\t\t\t\t\t\t\t\t\tborderRadius: 30,\n\t\t\t\t\t\t\t\t\t\t\tpadding: 4,\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\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t\t\t\t\t\tbackground: isActive ? '#4B1583' : 'transparent',\n\t\t\t\t\t\t\t\t\t\t\tcolor: isActive ? '#FFFFFF' : '#BDBDBD',\n\t\t\t\t\t\t\t\t\t\t\tborder: `1px solid ${isActive ? '#4B1583' : '#E0E0E0'}`,\n\t\t\t\t\t\t\t\t\t\t\tfontSize: 12,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight: '12px',\n\t\t\t\t\t\t\t\t\t\t\tflex: '0 0 24px',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span style={{ fontSize: 12, fontWeight: 500 }}>\n\t\t\t\t\t\t\t\t\t\t\t{idx + 1}\n\t\t\t\t\t\t\t\t\t\t</span>\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})()}\n\n\t\t\t\t\t\t\t{/ Center: small content button (do not grow) /}\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tjustifyContent: 'flex-start',\n\t\t\t\t\t\t\t\t\tminWidth: 0,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\taria-label={`Open ${\n\t\t\t\t\t\t\t\t\tstep.label ?? step.text ?? `step ${idx + 1}`\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tbuttonText={step.label ?? step.text ?? `Step ${idx + 1}`}\n\t\t\t\t\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\t\t\t\t\tbuttonTextColor={\n\t\t\t\t\t\t\t\t\t\tstep.isCompleted\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.text.secondary\n\t\t\t\t\t\t\t\t\t\t\t: (idx === 0 \|\| items[idx - 1]?.isCompleted === true) &&\n\t\t\t\t\t\t\t\t\t\t\t isStepperActive\n\t\t\t\t\t\t\t\t\t\t\t? '#4B1583'\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tmatchParentWidth={false}\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\twidth: 'fit-content',\n\t\t\t\t\t\t\t\t\t\tpaddingLeft: 0,\n\t\t\t\t\t\t\t\t\t\ttextDecoration: 'none',\n\t\t\t\t\t\t\t\t\t\ttextDecorationLine: 'none',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tsetSelectedId(step.id ?? selectedId);\n\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t(!step.isCompleted &&\n\t\t\t\t\t\t\t\t\t\t\t\tisStepperActive &&\n\t\t\t\t\t\t\t\t\t\t\t\t(idx === 0 \|\| items[idx - 1]?.isCompleted === true)) \|\|\n\t\t\t\t\t\t\t\t\t\t\tstep.isCompleted\n\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\tif (step.onClick) step.onClick();\n\t\t\t\t\t\t\t\t\t\t\telse if (step.id) onStepClick?.(step.id);\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t{/ Rightmost icon (provided SVG) */}\n\t\t\t\t\t\t\t{!step.isCompleted &&\n\t\t\t\t\t\t\t\t(idx === 0 \|\| items[idx - 1]?.isCompleted === true) &&\n\t\t\t\t\t\t\t\tisStepperActive && (\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\twidth: 20,\n\t\t\t\t\t\t\t\t\t\t\theight: 20,\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\tjustifyContent: 'center',\n\t\t\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\tsetSelectedId(step.id ?? selectedId);\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t!step.isCompleted &&\n\t\t\t\t\t\t\t\t\t\t\t\tisStepperActive &&\n\t\t\t\t\t\t\t\t\t\t\t\t(idx === 0 \|\| items[idx - 1]?.isCompleted === true)\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\tif (step.onClick) step.onClick();\n\t\t\t\t\t\t\t\t\t\t\t\telse if (step.id) onStepClick?.(step.id);\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\t\t\t<Redirect2Icon />\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</div>\n\t\t\t\t\t\t{idx !== items.length - 1 && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\twidth: 8,\n\t\t\t\t\t\t\t\t\theight: 1,\n\t\t\t\t\t\t\t\t\tborderRadius: 2,\n\t\t\t\t\t\t\t\t\tbackground: '#BDBDBD',\n\t\t\t\t\t\t\t\t\ttransform: 'rotate(90deg)',\n\t\t\t\t\t\t\t\t\tmarginLeft: 8,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</React.Fragment>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default React.memo(ProgressStepper);\n"],"names":["ProgressStepper","_ref","steps","onStepClick","isStepperActive","items","length","id","text","selectedId","setSelectedId","useState","_b","_a","_jsx","Object","assign","style","paddingLeft","children","jsx","margin","padding","display","flexDirection","gap","map","step","idx","_jsxs","jsxs","React","Fragment","alignItems","isActive","isCompleted","width","height","flex","SmallCheckIcon","borderRadius","justifyContent","boxSizing","background","color","border","fontSize","lineHeight","fontWeight","minWidth","label","Button","buttonText","_c","_d","buttonType","buttonTextColor","COLORS","secondary","_e","content","inactive","matchParentWidth","size","textDecoration","textDecorationLine","onClick","_f","cursor","e","Redirect2Icon","transform","marginLeft","_g","ProgressStepper$1","memo"],"mappings":"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"}

package/dist/cjs/components/ProgressChecklist/SimpleChecklistItem.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/ActiveChecklistIcon.js"),s=require("../../assets/icons/CompletedChecklistIcon.js"),i=require("../../assets/icons/InactiveChecklistIcon.js"),l=require("../tag/Tag.js"),c=require("../tooltips/Tooltip.js"),n=require("./ProgressChecklist.style.js");exports.default=({header:a,subheader:r,icon:o,activeIcon:h,completedIcon:j,isActive:d,isCompleted:x,tag:g})=>e.jsx("div",{children:e.jsxs(n.SingleChecklistMainRow,{children:[e.jsx(n.SingleChecklistIconWrapper,{children:x?null!=j?j:e.jsx(s.CompletedChecklistIcon,{}):d?null!=h?h:e.jsx(t.ActiveChecklistIcon,{}):null!=o?o:e.jsx(i.InactiveChecklistIcon,{})}),e.jsxs(n.SingleChecklistContent,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[e.jsx(n.SingleChecklistHeader,Object.assign({completed:x,isActive:d},{children:a})),(null==g?void 0:g.tagText)&&(g.tooltip?e.jsx(c.Tooltip,Object.assign({},g.tooltip,{children:e.jsx("span",Object.assign({style:{display:"inline-flex"}},{children:e.jsx(l.Tag,{tagText:g.tagText,variant:g.variant,type:g.type,theme:g.theme})}))})):e.jsx(l.Tag,{tagText:g.tagText,variant:g.variant,type:g.type,theme:g.theme}))]})),r&&e.jsx(n.SingleChecklistSubheader,Object.assign({isActive:d},{children:r}))]})]})});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/ActiveChecklistIcon.js"),s=require("../../assets/icons/CompletedChecklistIcon.js"),i=require("../../assets/icons/InactiveChecklistIcon.js"),l=require("../tag/Tag.js"),c=require("../tooltips/Tooltip.js"),n=require("./ProgressChecklist.style.js");exports.default=r=>{let{header:a,subheader:o,icon:h,activeIcon:j,completedIcon:d,isActive:x,isCompleted:g,tag:p}=r;return e.jsx("div",{children:e.jsxs(n.SingleChecklistMainRow,{children:[e.jsx(n.SingleChecklistIconWrapper,{children:g?null!=d?d:e.jsx(s.CompletedChecklistIcon,{}):x?null!=j?j:e.jsx(t.ActiveChecklistIcon,{}):null!=h?h:e.jsx(i.InactiveChecklistIcon,{})}),e.jsxs(n.SingleChecklistContent,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[e.jsx(n.SingleChecklistHeader,Object.assign({completed:g,isActive:x},{children:a})),(null==p?void 0:p.tagText)&&(p.tooltip?e.jsx(c.Tooltip,Object.assign({},p.tooltip,{children:e.jsx("span",Object.assign({style:{display:"inline-flex"}},{children:e.jsx(l.Tag,{tagText:p.tagText,variant:p.variant,type:p.type,theme:p.theme})}))})):e.jsx(l.Tag,{tagText:p.tagText,variant:p.variant,type:p.type,theme:p.theme}))]})),o&&e.jsx(n.SingleChecklistSubheader,Object.assign({isActive:x},{children:o}))]})]})})};
 //# sourceMappingURL=SimpleChecklistItem.js.map

package/dist/cjs/components/ProgressChecklist/SimpleChecklistItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SimpleChecklistItem.js","sources":["../../../../src/components/ProgressChecklist/SimpleChecklistItem.tsx"],"sourcesContent":["import React from 'react';\nimport ActiveChecklistIcon from '../../assets/icons/ActiveChecklistIcon';\nimport CompletedChecklistIcon from '../../assets/icons/CompletedChecklistIcon';\nimport InactiveChecklistIcon from '../../assets/icons/InactiveChecklistIcon';\nimport { Tag } from '../tag';\nimport { Tooltip, TooltipProps } from '../tooltips/Tooltip';\nimport {\n\tSingleChecklistContent,\n\tSingleChecklistHeader,\n\tSingleChecklistIconWrapper,\n\tSingleChecklistMainRow,\n\tSingleChecklistSubheader,\n} from './ProgressChecklist.style';\n\ninterface TagProps {\n\ttagText: string \| number;\n\tvariant?: 'regular' \| 'circle' \| 'compressed';\n\ttype?:\n\t\t\| 'negative'\n\t\t\| 'warning'\n\t\t\| 'positive'\n\t\t\| 'neutral'\n\t\t\| 'white'\n\t\t\| 'purple'\n\t\t\| 'blue'\n\t\t\| 'grey'\n\t\t\| 'ai';\n\ttheme?: 'light' \| 'dark';\n\ttooltip?: Omit<TooltipProps, 'children'>;\n}\n\ninterface SimpleChecklistItemProps {\n\theader: string;\n\tsubheader?: string;\n\ticon?: React.ReactNode;\n\tactiveIcon?: React.ReactNode;\n\tcompletedIcon?: React.ReactNode;\n\tisActive?: boolean;\n\tisCompleted?: boolean;\n\ttag?: TagProps;\n}\n\nconst SimpleChecklistItem: React.FC<SimpleChecklistItemProps> = ({\n\theader,\n\tsubheader,\n\ticon,\n\tactiveIcon,\n\tcompletedIcon,\n\tisActive,\n\tisCompleted,\n\ttag,\n}) => {\n\treturn (\n\t\t<div>\n\t\t\t<SingleChecklistMainRow>\n\t\t\t\t<SingleChecklistIconWrapper>\n\t\t\t\t\t{isCompleted\n\t\t\t\t\t\t? completedIcon ?? <CompletedChecklistIcon />\n\t\t\t\t\t\t: isActive\n\t\t\t\t\t\t? activeIcon ?? <ActiveChecklistIcon />\n\t\t\t\t\t\t: icon ?? <InactiveChecklistIcon />}\n\t\t\t\t</SingleChecklistIconWrapper>\n\n\t\t\t\t<SingleChecklistContent>\n\t\t\t\t\t<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>\n\t\t\t\t\t\t<SingleChecklistHeader completed={isCompleted} isActive={isActive}>\n\t\t\t\t\t\t\t{header}\n\t\t\t\t\t\t</SingleChecklistHeader>\n\t\t\t\t\t\t{tag?.tagText &&\n\t\t\t\t\t\t\t(tag.tooltip ? (\n\t\t\t\t\t\t\t\t<Tooltip {...tag.tooltip}>\n\t\t\t\t\t\t\t\t\t<span style={{ display: 'inline-flex' }}>\n\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\ttagText={tag.tagText}\n\t\t\t\t\t\t\t\t\t\t\tvariant={tag.variant}\n\t\t\t\t\t\t\t\t\t\t\ttype={tag.type}\n\t\t\t\t\t\t\t\t\t\t\ttheme={tag.theme}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\ttagText={tag.tagText}\n\t\t\t\t\t\t\t\t\tvariant={tag.variant}\n\t\t\t\t\t\t\t\t\ttype={tag.type}\n\t\t\t\t\t\t\t\t\ttheme={tag.theme}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t\t{subheader && (\n\t\t\t\t\t\t<SingleChecklistSubheader isActive={isActive}>\n\t\t\t\t\t\t\t{subheader}\n\t\t\t\t\t\t</SingleChecklistSubheader>\n\t\t\t\t\t)}\n\t\t\t\t</SingleChecklistContent>\n\t\t\t</SingleChecklistMainRow>\n\t\t</div>\n\t);\n};\n\nexport default SimpleChecklistItem;\n"],"names":["~~SimpleChecklistItem~~","header","subheader","icon","activeIcon","completedIcon","isActive","isCompleted","tag","_jsx","_jsxs","jsxs","SingleChecklistMainRow","jsx","SingleChecklistIconWrapper","CompletedChecklistIcon","ActiveChecklistIcon","InactiveChecklistIcon","SingleChecklistContent","children","Object","assign","style","display","alignItems","gap","SingleChecklistHeader","completed","tagText","tooltip","Tooltip","Tag","variant","type","theme","SingleChecklistSubheader"],"mappings":"0YA0CgEA,~~EAC/DC~~,~~SACAC~~,~~YACAC~~,~~OACAC~~,~~aACAC~~,~~gBACAC~~,~~WACAC~~,~~cACAC~~,~~SAGCC~~,EAAAA,oBACCC,EAACC,KAAAC,oCACAH,EAACI,IAAAC,uCACCP,EACEF,QAAAA,EAAiBI,EAACI,IAAAE,EAAsBA,uBAAG,CAAA,GAC3CT,EACAF,QAAAA,EAAcK,EAAAA,IAACO,EAAAA,oBAAsB,CAAA,GACrCb,QAAAA,EAAQM,EAAAA,IAACQ,EAAAA,sBAAqB,CAAA,KAGlCP,OAACQ,yBAAsB,CAAAC,SAAA,CACtBT,EAAKC,KAAA,MAAAS,OAAAC,OAAA,CAAAC,MAAO,CAAEC,QAAS,OAAQC,WAAY,SAAUC,IAAK,KACzD,CAAAN,SAAA,CAAAV,EAAAI,IAACa,wBAAsBN,OAAAC,OAAA,CAAAM,UAAWpB,EAAaD,SAAUA,GAAQ,CAAAa,SAC/DlB,MAEDO,aAAG,EAAHA,EAAKoB,WACJpB,EAAIqB,QACJpB,EAAAA,IAACqB,EAAOA,QAAKV,OAAAC,OAAA,CAAA,EAAAb,EAAIqB,QAAO,CAAAV,SACvBV,EAAMI,IAAA,OAAAO,OAAAC,OAAA,CAAAC,MAAO,CAAEC,QAAS,gBAAe,CAAAJ,SACtCV,EAACI,IAAAkB,OACAH,QAASpB,EAAIoB,QACbI,QAASxB,EAAIwB,QACbC,KAAMzB,EAAIyB,KACVC,MAAO1B,EAAI0B,cAKdzB,EAAAI,IAACkB,MACA,CAAAH,QAASpB,EAAIoB,QACbI,QAASxB,EAAIwB,QACbC,KAAMzB,EAAIyB,KACVC,MAAO1B,EAAI0B,aAIdhC,GACAO,EAAAA,IAAC0B,EAAAA,wCAAyB7B,SAAUA,GAAQ,CAAAa,SAC1CjB"}
1	+ {"version":3,"file":"SimpleChecklistItem.js","sources":["../../../../src/components/ProgressChecklist/SimpleChecklistItem.tsx"],"sourcesContent":["import React from 'react';\nimport ActiveChecklistIcon from '../../assets/icons/ActiveChecklistIcon';\nimport CompletedChecklistIcon from '../../assets/icons/CompletedChecklistIcon';\nimport InactiveChecklistIcon from '../../assets/icons/InactiveChecklistIcon';\nimport { Tag } from '../tag';\nimport { Tooltip, TooltipProps } from '../tooltips/Tooltip';\nimport {\n\tSingleChecklistContent,\n\tSingleChecklistHeader,\n\tSingleChecklistIconWrapper,\n\tSingleChecklistMainRow,\n\tSingleChecklistSubheader,\n} from './ProgressChecklist.style';\n\ninterface TagProps {\n\ttagText: string \| number;\n\tvariant?: 'regular' \| 'circle' \| 'compressed';\n\ttype?:\n\t\t\| 'negative'\n\t\t\| 'warning'\n\t\t\| 'positive'\n\t\t\| 'neutral'\n\t\t\| 'white'\n\t\t\| 'purple'\n\t\t\| 'blue'\n\t\t\| 'grey'\n\t\t\| 'ai';\n\ttheme?: 'light' \| 'dark';\n\ttooltip?: Omit<TooltipProps, 'children'>;\n}\n\ninterface SimpleChecklistItemProps {\n\theader: string;\n\tsubheader?: string;\n\ticon?: React.ReactNode;\n\tactiveIcon?: React.ReactNode;\n\tcompletedIcon?: React.ReactNode;\n\tisActive?: boolean;\n\tisCompleted?: boolean;\n\ttag?: TagProps;\n}\n\nconst SimpleChecklistItem: React.FC<SimpleChecklistItemProps> = ({\n\theader,\n\tsubheader,\n\ticon,\n\tactiveIcon,\n\tcompletedIcon,\n\tisActive,\n\tisCompleted,\n\ttag,\n}) => {\n\treturn (\n\t\t<div>\n\t\t\t<SingleChecklistMainRow>\n\t\t\t\t<SingleChecklistIconWrapper>\n\t\t\t\t\t{isCompleted\n\t\t\t\t\t\t? completedIcon ?? <CompletedChecklistIcon />\n\t\t\t\t\t\t: isActive\n\t\t\t\t\t\t? activeIcon ?? <ActiveChecklistIcon />\n\t\t\t\t\t\t: icon ?? <InactiveChecklistIcon />}\n\t\t\t\t</SingleChecklistIconWrapper>\n\n\t\t\t\t<SingleChecklistContent>\n\t\t\t\t\t<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>\n\t\t\t\t\t\t<SingleChecklistHeader completed={isCompleted} isActive={isActive}>\n\t\t\t\t\t\t\t{header}\n\t\t\t\t\t\t</SingleChecklistHeader>\n\t\t\t\t\t\t{tag?.tagText &&\n\t\t\t\t\t\t\t(tag.tooltip ? (\n\t\t\t\t\t\t\t\t<Tooltip {...tag.tooltip}>\n\t\t\t\t\t\t\t\t\t<span style={{ display: 'inline-flex' }}>\n\t\t\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\t\t\ttagText={tag.tagText}\n\t\t\t\t\t\t\t\t\t\t\tvariant={tag.variant}\n\t\t\t\t\t\t\t\t\t\t\ttype={tag.type}\n\t\t\t\t\t\t\t\t\t\t\ttheme={tag.theme}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\ttagText={tag.tagText}\n\t\t\t\t\t\t\t\t\tvariant={tag.variant}\n\t\t\t\t\t\t\t\t\ttype={tag.type}\n\t\t\t\t\t\t\t\t\ttheme={tag.theme}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t\t{subheader && (\n\t\t\t\t\t\t<SingleChecklistSubheader isActive={isActive}>\n\t\t\t\t\t\t\t{subheader}\n\t\t\t\t\t\t</SingleChecklistSubheader>\n\t\t\t\t\t)}\n\t\t\t\t</SingleChecklistContent>\n\t\t\t</SingleChecklistMainRow>\n\t\t</div>\n\t);\n};\n\nexport default SimpleChecklistItem;\n"],"names":["_ref","header","subheader","icon","activeIcon","completedIcon","isActive","isCompleted","tag","_jsx","_jsxs","jsxs","SingleChecklistMainRow","jsx","SingleChecklistIconWrapper","CompletedChecklistIcon","ActiveChecklistIcon","InactiveChecklistIcon","SingleChecklistContent","children","Object","assign","style","display","alignItems","gap","SingleChecklistHeader","completed","tagText","tooltip","Tooltip","Tag","variant","type","theme","SingleChecklistSubheader"],"mappings":"0YA0CgEA,IAS3D,IAT4DC,OAChEA,EAAMC,UACNA,EAASC,KACTA,EAAIC,WACJA,EAAUC,cACVA,EAAaC,SACbA,EAAQC,YACRA,EAAWC,IACXA,GACAR,EACA,OACCS,EAAAA,oBACCC,EAACC,KAAAC,oCACAH,EAACI,IAAAC,uCACCP,EACEF,QAAAA,EAAiBI,EAACI,IAAAE,EAAsBA,uBAAG,CAAA,GAC3CT,EACAF,QAAAA,EAAcK,EAAAA,IAACO,EAAAA,oBAAsB,CAAA,GACrCb,QAAAA,EAAQM,EAAAA,IAACQ,EAAAA,sBAAqB,CAAA,KAGlCP,OAACQ,yBAAsB,CAAAC,SAAA,CACtBT,EAAKC,KAAA,MAAAS,OAAAC,OAAA,CAAAC,MAAO,CAAEC,QAAS,OAAQC,WAAY,SAAUC,IAAK,KACzD,CAAAN,SAAA,CAAAV,EAAAI,IAACa,wBAAsBN,OAAAC,OAAA,CAAAM,UAAWpB,EAAaD,SAAUA,GAAQ,CAAAa,SAC/DlB,MAEDO,aAAG,EAAHA,EAAKoB,WACJpB,EAAIqB,QACJpB,EAAAA,IAACqB,EAAOA,QAAKV,OAAAC,OAAA,CAAA,EAAAb,EAAIqB,QAAO,CAAAV,SACvBV,EAAMI,IAAA,OAAAO,OAAAC,OAAA,CAAAC,MAAO,CAAEC,QAAS,gBAAe,CAAAJ,SACtCV,EAACI,IAAAkB,OACAH,QAASpB,EAAIoB,QACbI,QAASxB,EAAIwB,QACbC,KAAMzB,EAAIyB,KACVC,MAAO1B,EAAI0B,cAKdzB,EAAAI,IAACkB,MACA,CAAAH,QAASpB,EAAIoB,QACbI,QAASxB,EAAIwB,QACbC,KAAMzB,EAAIyB,KACVC,MAAO1B,EAAI0B,aAIdhC,GACAO,EAAAA,IAAC0B,EAAAA,wCAAyB7B,SAAUA,GAAQ,CAAAa,SAC1CjB,YAKA"}

package/dist/cjs/components/QueryBuilder/Filters/CustomField/components/CustomField.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("../../../components/AllowedListDropdown.js"),o=require("../../../components/QueryBuilderNode/Base/BaseQueryBuilderNode.js"),i=require("../../../components/QueryBuilderNode/Property/PropertyNode.js"),a=require("../../../helpers/SegmentValidator.js"),n=require("../../../hooks/useQueryBuilder.js"),s=require("../../../hooks/useQueryBuilderCache.js");exports.default=({node:d,allowedNodes:l,apiHandler:u,mode:p,selectorKey:c})=>{var y;const{selectType:v,createProperty:h,updateProperty:g}=n.useQueryBuilder(c),{cacheWrap:j}=s.useQueryBuilderCache();return r.jsx(o.BaseQueryBuilderNode,Object.assign({node:d,mode:p},{children:r.jsxs("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12,alignItems:"flex-start"}},{children:[r.jsx(t.default,{disabled:"view"===p,selectedType:d.type,allowedList:l,onSelect:e=>v(e.value,d._id)}),r.jsx(i.PropertyNodeHeadless,{mode:p,property:null===(y=null==d?void 0:d.properties)||void 0===y?void 0:y[0],fetchPropertyData:()=>j((()=>u({})),"CUSTOM_FIELDS"),onPropertyNameSelect:function(r){var t;return e.__awaiter(this,void 0,void 0,(function*(){const e=null===(t=d.properties)||void 0===t?void 0:t[0],o=!!e&&e.name===r.id&&e.dataType===r.type;if(e?o||g(Object.assign(Object.assign({},e),{name:r.id,dataType:r.type,operator:void 0,value:void 0,error:{}}),d._id):h({name:r.id,dataType:r.type},d._id),r.needValuesRetrieval){const e=yield((e,r)=>j((()=>u({query:Object.assign({propertyName:e},r)})),`CUSTOM_FIELDS-${e}`))(r.id,r);if(!e)throw new Error("Something went wrong while fetching the list. Please try again");return e}return[]}))},onPropertyOperatorChange:function(e){g(Object.assign(Object.assign({},d.properties[0]),{operator:e,value:void 0,error:{}}),d._id)},onPropertyValueChange:function(e){var r;const t=d.properties[0],o="string"===t.dataType&&a.CONTAINS_OPERATORS.includes(null!==(r=t.operator)&&void 0!==r?r:"")?a.getContainsFilterError(e):{};g(Object.assign(Object.assign({},t),{value:e,error:o}),d._id)},onPropertyValueSearch:function(r,t){return e.__awaiter(this,void 0,void 0,(function*(){const o=yield((r,t)=>e.__awaiter(void 0,void 0,void 0,(function*(){return yield u({query:{propertyName:r,searchKey:t}})})))(t.name,r);if((null==o?void 0:o.error)||!(null==o?void 0:o.data))throw new Error((null==o?void 0:o.error)||"Something went wrong while fetching the list. Please try again");return o.data.map((e=>({label:e.name,value:e.id,selected:!1})))}))}})]}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("../../../components/AllowedListDropdown.js"),o=require("../../../components/QueryBuilderNode/Base/BaseQueryBuilderNode.js"),i=require("../../../components/QueryBuilderNode/Property/PropertyNode.js"),a=require("../../../helpers/SegmentValidator.js"),n=require("../../../hooks/useQueryBuilder.js"),s=require("../../../hooks/useQueryBuilderCache.js");exports.default=d=>{let{node:l,allowedNodes:u,apiHandler:p,mode:c,selectorKey:y}=d;var v;const{selectType:h,createProperty:g,updateProperty:j}=n.useQueryBuilder(y),{cacheWrap:m}=s.useQueryBuilderCache();return r.jsx(o.BaseQueryBuilderNode,Object.assign({node:l,mode:c},{children:r.jsxs("div",Object.assign({style:{flexDirection:"row",display:"flex",gap:12,alignItems:"flex-start"}},{children:[r.jsx(t.default,{disabled:"view"===c,selectedType:l.type,allowedList:u,onSelect:e=>h(e.value,l._id)}),r.jsx(i.PropertyNodeHeadless,{mode:c,property:null===(v=null==l?void 0:l.properties)||void 0===v?void 0:v[0],fetchPropertyData:()=>m((()=>p({})),"CUSTOM_FIELDS"),onPropertyNameSelect:function(r){var t;return e.__awaiter(this,void 0,void 0,(function*(){const e=null===(t=l.properties)||void 0===t?void 0:t[0],o=!!e&&e.name===r.id&&e.dataType===r.type;if(e?o||j(Object.assign(Object.assign({},e),{name:r.id,dataType:r.type,operator:void 0,value:void 0,error:{}}),l._id):g({name:r.id,dataType:r.type},l._id),r.needValuesRetrieval){const e=yield((e,r)=>m((()=>p({query:Object.assign({propertyName:e},r)})),`CUSTOM_FIELDS-${e}`))(r.id,r);if(!e)throw new Error("Something went wrong while fetching the list. Please try again");return e}return[]}))},onPropertyOperatorChange:function(e){j(Object.assign(Object.assign({},l.properties[0]),{operator:e,value:void 0,error:{}}),l._id)},onPropertyValueChange:function(e){var r;const t=l.properties[0],o="string"===t.dataType&&a.CONTAINS_OPERATORS.includes(null!==(r=t.operator)&&void 0!==r?r:"")?a.getContainsFilterError(e):{};j(Object.assign(Object.assign({},t),{value:e,error:o}),l._id)},onPropertyValueSearch:function(r,t){return e.__awaiter(this,void 0,void 0,(function*(){const o=yield((r,t)=>e.__awaiter(void 0,void 0,void 0,(function*(){return yield p({query:{propertyName:r,searchKey:t}})})))(t.name,r);if((null==o?void 0:o.error)||!(null==o?void 0:o.data))throw new Error((null==o?void 0:o.error)||"Something went wrong while fetching the list. Please try again");return o.data.map((e=>({label:e.name,value:e.id,selected:!1})))}))}})]}))}))};
 //# sourceMappingURL=CustomField.js.map