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

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

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

Files changed (1549) hide show

package/dist/esm/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":["GiftedChat","forwardRef","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","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","React","Fragment","createdAt","Day","margin","marginRight","marginLeft","justifyContent","marginBottom","id","_c","flexGrow","_d","_e","_Fragment"],"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":["GiftedChat","forwardRef","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","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","React","Fragment","createdAt","Day","margin","marginRight","marginLeft","justifyContent","marginBottom","id","_c","flexGrow","_d","_e","_Fragment"],"mappings":"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"}

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

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

package/dist/esm/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":["useScrollToBottom","scrollRef","scrollState","useCallback","el","current","scrollTop","scrollHeight","isAtBottom","useInitialMountScroll","messagesLength","scrollToBottom","useLayoutEffect","isInitialMount","requestAnimationFrame","useScrollCleanup","useEffect","stateRef","scrollTimeout","window","clearTimeout","useRestoreScrollPosition","state","currentMessagesLength","hasNewMessages","lastMessagesLength","isLoadingOldMessages","heightDifference","previousScrollHeight","previousScrollTop","useAutoScrollOnNewMessages","isNotInitialMount","userIsAtBottom","isScrollAtBottom","useResizeObserverForFirstMessage","firstMessage","messageIdGenerator","id","_a","_id","_b","document","getElementById","resizeObserver","ResizeObserver","observe","disconnect","handleInfiniteScroll","onEndReached","isNearTop","arguments","length","undefined","TOP_THRESHOLD","hasTriggeredEndReached","err","useScrollHandler","onScroll","topThreshold","event","target","currentTarget","isUserScrolling","setTimeout","SCROLL_IDLE_MS"],"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":["useScrollToBottom","scrollRef","scrollState","useCallback","el","current","scrollTop","scrollHeight","isAtBottom","useInitialMountScroll","messagesLength","scrollToBottom","useLayoutEffect","isInitialMount","requestAnimationFrame","useScrollCleanup","useEffect","stateRef","scrollTimeout","window","clearTimeout","useRestoreScrollPosition","state","currentMessagesLength","hasNewMessages","lastMessagesLength","isLoadingOldMessages","heightDifference","previousScrollHeight","previousScrollTop","useAutoScrollOnNewMessages","isNotInitialMount","userIsAtBottom","isScrollAtBottom","useResizeObserverForFirstMessage","firstMessage","messageIdGenerator","id","_a","_id","_b","document","getElementById","resizeObserver","ResizeObserver","observe","disconnect","handleInfiniteScroll","onEndReached","topThreshold","TOP_THRESHOLD","isNearTop","hasTriggeredEndReached","err","useScrollHandler","onScroll","event","target","currentTarget","isUserScrolling","setTimeout","SCROLL_IDLE_MS"],"mappings":"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"}

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

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

package/dist/esm/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","~~_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","Object","assign","ref","style","minHeight"],"mappings":"~~kMAWaA~~,~~MAAAA~~,~~EAAgDC~~,~~IAMxD~~,~~IANyDC~~,~~SAC7DA~~,~~EAAQC~~,~~UACRA,EAASC,iBACTA,EAAmBC,~~EAACC,EAAoB,CAACC,MAAO,~~IAAKC~~,~~aACrDA~~,~~EAAYC~~,~~QACZA~~,~~GACAR,EACA,MAAMS,~~EAAuBC,GAAO,IAC7BC,EAAYC,GAAiBC,GAAkB,GAChDC,EAAaJ,EAAuB,MAEpCK,EAAsBC,IAC3B,MAAOC,GAASD,EAEZC,EAAMC,iBAAmBP,IAC5BC,GAAc,GAEdV,IAAYiB,MAAMC,IACbA,IACHX,EAAqBY,SAAU,GAEhCT,GAAc,EAAM,IAErB,EAuBF,OApBAU,GAAU,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,EAAA,MAAA,CAAA/B,SAAA,CACEA,IACEO,IAAYC,EAAqBY,SACnCjB,EAAK,MAAA6B,OAAAC,OAAA,CAAAC,IAAKrB,EAAYsB,MAAO,CAAEC,UAAW,SAAQ,CAAApC,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":["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","Object","assign","ref","style","minHeight"],"mappings":"kMAWO,MAAMA,EAAgDA,EAC5DC,WACAC,YACAC,mBAAmBC,EAACC,EAAoB,CAACC,MAAO,IAChDC,eACAC,cAEA,MAAMC,EAAuBC,GAAO,IAC7BC,EAAYC,GAAiBC,GAAkB,GAChDC,EAAaJ,EAAuB,MAEpCK,EAAsBC,IAC3B,MAAOC,GAASD,EAEZC,EAAMC,iBAAmBP,IAC5BC,GAAc,GAEdV,IAAYiB,MAAMC,IACbA,IACHX,EAAqBY,SAAU,GAEhCT,GAAc,EAAM,IAErB,EAuBF,OApBAU,GAAU,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,EAAA,MAAA,CAAA/B,SAAA,CACEA,IACEO,IAAYC,EAAqBY,SACnCjB,EAAK,MAAA6B,OAAAC,OAAA,CAAAC,IAAKrB,EAAYsB,MAAO,CAAEC,UAAW,SAAQ,CAAApC,SAChDE,OAGE"}

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

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

package/dist/esm/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","~~_ref","~~item","children","isOpen","onToggle","shouldOpen","isActive","header","_jsx","SimpleChecklistItem","subheader","icon","activeIcon","completedIcon","isCompleted","tag","BikAccordion","Object","assign","headerStyles","height","cursor","onToggleAccordion","skipHoverHeader","showBorders","borderRadius","style","border","padding"],"mappings":"yIAsDMA,MAAAA,~~EAAwDC~~,~~IAKzD~~,~~IAL0DC~~,~~KAC9DA~~,~~EAAIC~~,~~SACJA~~,~~EAAQC~~,~~OACRA,EAAMC,SACNA,GACAJ,EAEA,MAAMK,~~EACa,kBAAXF,EACJA,IACGF,EAAgCK,SACjCC,EACLC,EAACC,GACAF,OAAQN,EAAKM,OACbG,UAAWT,EAAKS,UAChBC,KAAMV,EAAKU,KACXC,WAAYX,EAAKW,WACjBC,cAAeZ,EAAKY,cACpBC,YAAab,EAAKa,YAClBR,SAAUL,EAAKK,SACfS,IAAKd,EAAKc,MAIZ,OACCP,EAACQ,EAAYC,OAAAC,OAAA,CACZX,OAAQA,EACRY,aAAc,CAAEC,OAAQ,OAAQC,OAAQ,WACxCC,kBACClB,GAAQ,MAGP,GAEFD,OAAQE,EACRkB,iBAAiB,EACjBC,aAAa,EACbC,aAAa,OAEZ,CAAAvB,SAAAA,EACAM,EAAK,MAAAS,OAAAC,OAAA,CAAAQ,MAAO,CAAEC,OAAQ,OAAQC,QAAS,KAAO,CAAA1B,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":["MultiChecklistItem","item","children","isOpen","onToggle","shouldOpen","isActive","header","_jsx","SimpleChecklistItem","subheader","icon","activeIcon","completedIcon","isCompleted","tag","BikAccordion","Object","assign","headerStyles","height","cursor","onToggleAccordion","skipHoverHeader","showBorders","borderRadius","style","border","padding"],"mappings":"yIAsDMA,MAAAA,EAAwDA,EAC7DC,OACAC,WACAC,SACAC,eAGA,MAAMC,EACa,kBAAXF,EACJA,IACGF,EAAgCK,SACjCC,EACLC,EAACC,GACAF,OAAQN,EAAKM,OACbG,UAAWT,EAAKS,UAChBC,KAAMV,EAAKU,KACXC,WAAYX,EAAKW,WACjBC,cAAeZ,EAAKY,cACpBC,YAAab,EAAKa,YAClBR,SAAUL,EAAKK,SACfS,IAAKd,EAAKc,MAIZ,OACCP,EAACQ,EAAYC,OAAAC,OAAA,CACZX,OAAQA,EACRY,aAAc,CAAEC,OAAQ,OAAQC,OAAQ,WACxCC,kBACClB,GAAQ,MAGP,GAEFD,OAAQE,EACRkB,iBAAiB,EACjBC,aAAa,EACbC,aAAa,OAEZ,CAAAvB,SAAAA,EACAM,EAAK,MAAAS,OAAAC,OAAA,CAAAQ,MAAO,CAAEC,OAAQ,OAAQC,QAAS,KAAO,CAAA1B,SAAAA,KAC3C,OACU"}

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

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

package/dist/esm/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","_ref","header","subheader","items","progressBarColor","headerAction","showProgressBar","noBorder","checklistItems","setChecklistItems","useState","useEffect","completedCount","filter","item","isCompleted","length","totalCount","progressPercentage","_jsxs","ProgressChecklistContainer","Object","assign","children","HeaderSection","style","display","flexDirection","justifyContent","alignItems","_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":["ProgressChecklist","header","subheader","items","progressBarColor","headerAction","showProgressBar","noBorder","checklistItems","setChecklistItems","useState","useEffect","completedCount","filter","item","isCompleted","length","totalCount","progressPercentage","_jsxs","ProgressChecklistContainer","Object","assign","children","HeaderSection","style","display","flexDirection","justifyContent","alignItems","_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/esm/components/ProgressChecklist/ProgressStepper.js CHANGED Viewed

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

package/dist/esm/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","_ref","steps","onStepClick","isStepperActive","items","length","id","text","selectedId","setSelectedId","useState","_b","_a","_jsx","Object","assign","style","paddingLeft","children","margin","padding","display","flexDirection","gap","map","step","idx","_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","steps","onStepClick","isStepperActive","items","length","id","text","selectedId","setSelectedId","useState","_b","_a","_jsx","Object","assign","style","paddingLeft","children","margin","padding","display","flexDirection","gap","map","step","idx","_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/esm/components/ProgressChecklist/SimpleChecklistItem.js CHANGED Viewed

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

package/dist/esm/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","~~_ref","~~header","subheader","icon","activeIcon","completedIcon","isActive","isCompleted","tag","_jsx","_jsxs","SingleChecklistMainRow","SingleChecklistIconWrapper","CompletedChecklistIcon","ActiveChecklistIcon","InactiveChecklistIcon","SingleChecklistContent","children","Object","assign","style","display","alignItems","gap","SingleChecklistHeader","completed","tagText","tooltip","Tooltip","Tag","variant","type","theme","SingleChecklistSubheader"],"mappings":"4jBA0CMA,MAAAA,~~EAA0DC~~,~~IAS3D~~,~~IAT4DC~~,~~OAChEA~~,~~EAAMC~~,~~UACNA~~,~~EAASC~~,~~KACTA~~,~~EAAIC~~,~~WACJA~~,~~EAAUC,cACVA,EAAaC,SACbA,EAAQC,YACRA,EAAWC,IACXA,GACAR,EACA,OACCS,~~kBACCC,EAACC,aACAF,EAACG,YACCL,EACEF,QAAAA,EAAiBI,EAACI,EAAyB,CAAA,GAC3CP,EACAF,QAAAA,EAAcK,EAACK,EAAsB,CAAA,GACrCX,QAAAA,EAAQM,EAACM,EAAqB,CAAA,KAGlCL,EAACM,EAAsB,CAAAC,SAAA,CACtBP,EAAK,MAAAQ,OAAAC,OAAA,CAAAC,MAAO,CAAEC,QAAS,OAAQC,WAAY,SAAUC,IAAK,KACzD,CAAAN,SAAA,CAAAR,EAACe,EAAsBN,OAAAC,OAAA,CAAAM,UAAWlB,EAAaD,SAAUA,GAAQ,CAAAW,SAC/DhB,MAEDO,aAAG,EAAHA,EAAKkB,WACJlB,EAAImB,QACJlB,EAACmB,EAAYV,OAAAC,OAAA,CAAA,EAAAX,EAAImB,QAAO,CAAAV,SACvBR,EAAM,OAAAS,OAAAC,OAAA,CAAAC,MAAO,CAAEC,QAAS,gBAAe,CAAAJ,SACtCR,EAACoB,GACAH,QAASlB,EAAIkB,QACbI,QAAStB,EAAIsB,QACbC,KAAMvB,EAAIuB,KACVC,MAAOxB,EAAIwB,cAKdvB,EAACoB,EACA,CAAAH,QAASlB,EAAIkB,QACbI,QAAStB,EAAIsB,QACbC,KAAMvB,EAAIuB,KACVC,MAAOxB,EAAIwB,aAId9B,GACAO,EAACwB,iBAAyB3B,SAAUA,GAAQ,CAAAW,SAC1Cf~~,YAKA~~"}
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","SingleChecklistMainRow","SingleChecklistIconWrapper","CompletedChecklistIcon","ActiveChecklistIcon","InactiveChecklistIcon","SingleChecklistContent","children","Object","assign","style","display","alignItems","gap","SingleChecklistHeader","completed","tagText","tooltip","Tooltip","Tag","variant","type","theme","SingleChecklistSubheader"],"mappings":"4jBA0CMA,MAAAA,EAA0DA,EAC/DC,SACAC,YACAC,OACAC,aACAC,gBACAC,WACAC,cACAC,SAGCC,kBACCC,EAACC,aACAF,EAACG,YACCL,EACEF,QAAAA,EAAiBI,EAACI,EAAyB,CAAA,GAC3CP,EACAF,QAAAA,EAAcK,EAACK,EAAsB,CAAA,GACrCX,QAAAA,EAAQM,EAACM,EAAqB,CAAA,KAGlCL,EAACM,EAAsB,CAAAC,SAAA,CACtBP,EAAK,MAAAQ,OAAAC,OAAA,CAAAC,MAAO,CAAEC,QAAS,OAAQC,WAAY,SAAUC,IAAK,KACzD,CAAAN,SAAA,CAAAR,EAACe,EAAsBN,OAAAC,OAAA,CAAAM,UAAWlB,EAAaD,SAAUA,GAAQ,CAAAW,SAC/DhB,MAEDO,aAAG,EAAHA,EAAKkB,WACJlB,EAAImB,QACJlB,EAACmB,EAAYV,OAAAC,OAAA,CAAA,EAAAX,EAAImB,QAAO,CAAAV,SACvBR,EAAM,OAAAS,OAAAC,OAAA,CAAAC,MAAO,CAAEC,QAAS,gBAAe,CAAAJ,SACtCR,EAACoB,GACAH,QAASlB,EAAIkB,QACbI,QAAStB,EAAIsB,QACbC,KAAMvB,EAAIuB,KACVC,MAAOxB,EAAIwB,cAKdvB,EAACoB,EACA,CAAAH,QAASlB,EAAIkB,QACbI,QAAStB,EAAIsB,QACbC,KAAMvB,EAAIuB,KACVC,MAAOxB,EAAIwB,aAId9B,GACAO,EAACwB,iBAAyB3B,SAAUA,GAAQ,CAAAW,SAC1Cf"}

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

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

package/dist/esm/components/QueryBuilder/Filters/CustomField/components/CustomField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CustomField.js","sources":["../../../../../../../src/components/QueryBuilder/Filters/CustomField/components/CustomField.tsx"],"sourcesContent":["import React from 'react';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport AllowedListDropdown from '@src/components/QueryBuilder/components/AllowedListDropdown';\nimport { BaseQueryBuilderNode } from '@src/components/QueryBuilder/components/QueryBuilderNode/Base/BaseQueryBuilderNode';\nimport { PropertyNodeHeadless } from '@src/components/QueryBuilder/components/QueryBuilderNode/Property/PropertyNode';\nimport {\n\tCONTAINS_OPERATORS,\n\tgetContainsFilterError,\n} from '@src/components/QueryBuilder/helpers/SegmentValidator';\nimport { useQueryBuilder } from '@src/components/QueryBuilder/hooks/useQueryBuilder';\nimport { useQueryBuilderCache } from '@src/components/QueryBuilder/hooks/useQueryBuilderCache';\nimport {\n\tQueryBuilderProperty,\n\tQueryBuilderType,\n} from '@src/components/QueryBuilder/types/QueryBuilder.type';\nimport { QueryBuilderAPIData } from '@src/components/QueryBuilder/types/QueryBuilderAPI.type';\nimport { CONNECTOR_VALUE_TYPE } from '@src/components/QueryBuilder/types/QueryBuilderConnector.type';\nimport { QueryBuilderNodeProps } from '@src/components/QueryBuilder/types/QueryBuilderNodeProps.type';\nimport { CONNECTOR_OPERATORS } from '@src/components/QueryBuilder/types/QueryBuilderOperator.type';\n\nconst HasCustomFieldFilter: React.FC<QueryBuilderNodeProps> = ({\n\tnode,\n\tallowedNodes,\n\tapiHandler,\n\tmode,\n\tselectorKey,\n}) => {\n\tconst { selectType, createProperty, updateProperty } =\n\t\tuseQueryBuilder(selectorKey);\n\tconst { cacheWrap } = useQueryBuilderCache();\n\n\t/** DATA LAYER */\n\tconst getCustomFields = () =>\n\t\tcacheWrap(() => apiHandler<undefined>({}), 'CUSTOM_FIELDS');\n\n\tconst getCustomFieldValues = (propertyName: string, rest) =>\n\t\tcacheWrap(\n\t\t\t() =>\n\t\t\t\tapiHandler<{ propertyName: string }>({\n\t\t\t\t\tquery: { propertyName, ...rest },\n\t\t\t\t}),\n\t\t\t`CUSTOM_FIELDS-${propertyName}`,\n\t\t);\n\n\tconst searchCustomFieldsValue = async (\n\t\tpropertyName: string \| number,\n\t\tsearchKey: string,\n\t) =>\n\t\tawait apiHandler<{\n\t\t\tpropertyName: string \| number;\n\t\t\tsearchKey: string;\n\t\t}>({\n\t\t\tquery: { propertyName, searchKey },\n\t\t});\n\n\tasync function handlePropertyNameSelection(\n\t\tpropertyName: QueryBuilderAPIData,\n\t) {\n\t\tconst currentProperty = node.properties?.[0];\n\t\tconst isRetry =\n\t\t\t!!currentProperty &&\n\t\t\tcurrentProperty.name === propertyName.id &&\n\t\t\tcurrentProperty.dataType === propertyName.type;\n\n\t\tif (!currentProperty) {\n\t\t\tcreateProperty(\n\t\t\t\t{\n\t\t\t\t\tname: propertyName.id,\n\t\t\t\t\tdataType: propertyName.type,\n\t\t\t\t} as QueryBuilderProperty,\n\t\t\t\tnode._id,\n\t\t\t);\n\t\t} else if (!isRetry) {\n\t\t\tupdateProperty(\n\t\t\t\t{\n\t\t\t\t\t...currentProperty,\n\t\t\t\t\tname: propertyName.id,\n\t\t\t\t\tdataType: propertyName.type,\n\t\t\t\t\toperator: undefined,\n\t\t\t\t\tvalue: undefined,\n\t\t\t\t\terror: {},\n\t\t\t\t},\n\t\t\t\tnode._id,\n\t\t\t);\n\t\t}\n\n\t\tif (propertyName.needValuesRetrieval) {\n\t\t\tconst response = await getCustomFieldValues(\n\t\t\t\tpropertyName.id as string,\n\t\t\t\tpropertyName,\n\t\t\t);\n\t\t\tif (!response) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t'Something went wrong while fetching the list. Please try again',\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn response;\n\t\t}\n\n\t\treturn [];\n\t}\n\n\tfunction handleOperatorChange(operator: CONNECTOR_OPERATORS) {\n\t\tupdateProperty(\n\t\t\t{\n\t\t\t\t...node.properties![0],\n\t\t\t\toperator,\n\t\t\t\tvalue: undefined,\n\t\t\t\terror: {},\n\t\t\t},\n\t\t\tnode._id,\n\t\t);\n\t}\n\n\tfunction handleValueChange(value: CONNECTOR_VALUE_TYPE) {\n\t\tconst property = node.properties![0];\n\t\tconst isContainsFilter =\n\t\t\tproperty.dataType === 'string' &&\n\t\t\tCONTAINS_OPERATORS.includes(property.operator ?? '');\n\t\tconst error = isContainsFilter ? getContainsFilterError(value) : {};\n\n\t\tupdateProperty(\n\t\t\t{\n\t\t\t\t...property,\n\t\t\t\tvalue: value,\n\t\t\t\terror,\n\t\t\t},\n\t\t\tnode._id,\n\t\t);\n\t}\n\n\tasync function onPropertyValueSearch(\n\t\tsearchKey: string,\n\t\tproperty: QueryBuilderProperty,\n\t) {\n\t\tconst response = await searchCustomFieldsValue(\n\t\t\tproperty.name as string,\n\t\t\tsearchKey,\n\t\t);\n\n\t\tif (response?.error \|\| !response?.data) {\n\t\t\tthrow new Error(\n\t\t\t\tresponse?.error \|\|\n\t\t\t\t\t'Something went wrong while fetching the list. Please try again',\n\t\t\t);\n\t\t}\n\n\t\treturn (response.data as QueryBuilderAPIData[]).map((option) => ({\n\t\t\tlabel: option.name,\n\t\t\tvalue: option.id,\n\t\t\tselected: false,\n\t\t}));\n\t}\n\n\treturn (\n\t\t<BaseQueryBuilderNode node={node} mode={mode}>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tgap: 12,\n\t\t\t\t\talignItems: 'flex-start',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<AllowedListDropdown\n\t\t\t\t\tdisabled={mode === 'view'}\n\t\t\t\t\tselectedType={node.type}\n\t\t\t\t\tallowedList={allowedNodes}\n\t\t\t\t\tonSelect={(option) =>\n\t\t\t\t\t\tselectType(\n\t\t\t\t\t\t\t(option as SingleOption).value as QueryBuilderType,\n\t\t\t\t\t\t\tnode._id,\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t/>\n\n\t\t\t\t<PropertyNodeHeadless\n\t\t\t\t\tmode={mode}\n\t\t\t\t\tproperty={node?.properties?.[0]}\n\t\t\t\t\tfetchPropertyData={getCustomFields}\n\t\t\t\t\tonPropertyNameSelect={handlePropertyNameSelection}\n\t\t\t\t\tonPropertyOperatorChange={handleOperatorChange}\n\t\t\t\t\tonPropertyValueChange={handleValueChange}\n\t\t\t\t\tonPropertyValueSearch={\n\t\t\t\t\t\tonPropertyValueSearch as (\n\t\t\t\t\t\t\tsearchKey: string,\n\t\t\t\t\t\t\tproperty: QueryBuilderProperty,\n\t\t\t\t\t\t) => Promise<DropdownOption[]>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</BaseQueryBuilderNode>\n\t);\n};\n\nexport default HasCustomFieldFilter;\n"],"names":["HasCustomFieldFilter","~~_ref","~~node","allowedNodes","apiHandler","mode","selectorKey","selectType","createProperty","updateProperty","useQueryBuilder","cacheWrap","useQueryBuilderCache","_jsx","BaseQueryBuilderNode","Object","assign","children","_jsxs","style","flexDirection","display","gap","alignItems","AllowedListDropdown","disabled","selectedType","type","allowedList","onSelect","option","value","_id","PropertyNodeHeadless","property","_a","properties","fetchPropertyData","getCustomFields","onPropertyNameSelect","propertyName","currentProperty","isRetry","name","id","dataType","operator","undefined","error","needValuesRetrieval","response","getCustomFieldValues","rest","query","Error","onPropertyOperatorChange","onPropertyValueChange","CONTAINS_OPERATORS","includes","getContainsFilterError","onPropertyValueSearch","searchKey","searchCustomFieldsValue","__awaiter","data","map","label","selected"],"mappings":"gnBAoBMA,MAAAA,~~EAAwDC~~,~~IAMzD~~,~~IAN0DC~~,~~KAC9DA~~,~~EAAIC~~,~~aACJA~~,~~EAAYC~~,~~WACZA~~,~~EAAUC,KACVA,EAAIC,YACJA,GACAL,QACA,MAAMM,~~WAAEA,EAAUC,eAAEA,EAAcC,eAAEA,GACnCC,EAAgBJ,IACXK,UAAEA,GAAcC,IA6HtB,OACCC,EAACC,EAAoBC,OAAAC,OAAA,CAACd,KAAMA,EAAMG,KAAMA,GACvC,CAAAY,SAAAC,EAAA,MAAAH,OAAAC,OAAA,CACCG,MAAO,CACNC,cAAe,MACfC,QAAS,OACTC,IAAK,GACLC,WAAY,eACZ,CAAAN,SAAA,CAEDJ,EAACW,EAAmB,CACnBC,SAAmB,SAATpB,EACVqB,aAAcxB,EAAKyB,KACnBC,YAAazB,EACb0B,SAAWC,GACVvB,EACEuB,EAAwBC,MACzB7B,EAAK8B,OAKRnB,EAACoB,EAAoB,CACpB5B,KAAMA,EACN6B,SAA0B,QAAhBC,EAAAjC,aAAA,EAAAA,EAAMkC,kBAAU,IAAAD,OAAA,EAAAA,EAAG,GAC7BE,kBAnJoBC,IACvB3B,GAAU,IAAMP,EAAsB,CAAE,IAAG,iBAmJxCmC,qBA7HJ,SACCC,kDAEA,MAAMC,EAAiC,QAAfN,EAAAjC,EAAKkC,kBAAU,IAAAD,OAAA,EAAAA,EAAG,GACpCO,IACHD,GACFA,EAAgBE,OAASH,EAAaI,IACtCH,EAAgBI,WAAaL,EAAab,KAwB3C,GAtBKc,EAQOC,GACXjC,EAEKM,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAyB,GACH,CAAAE,KAAMH,EAAaI,GACnBC,SAAUL,EAAab,KACvBmB,cAAUC,EACVhB,WAAOgB,EACPC,MAAO,CAAA,IAER9C,EAAK8B,KAjBNxB,EACC,CACCmC,KAAMH,EAAaI,GACnBC,SAAUL,EAAab,MAExBzB,EAAK8B,KAgBHQ,EAAaS,oBAAqB,CACrC,MAAMC,OApDqBC,EAACX,EAAsBY,IACnDzC,GACC,IACCP,EAAqC,CACpCiD,MAAStC,OAAAC,OAAA,CAAAwB,gBAAiBY,MAE5B,iBAAiBZ,KA8CMW,CACtBX,EAAaI,GACbJ,GAED,IAAKU,EACJ,MAAM,IAAII,MACT,kEAGF,OAAOJ,CACP,CAED,MAAO,KACP,EAiFGK,yBA/EJ,SAA8BT,GAC7BrC,EAAcM,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAETd,EAAKkC,WAAY,IACpB,CAAAU,WACAf,WAAOgB,EACPC,MAAO,CAAA,IAER9C,EAAK8B,IAEP,EAsEIwB,sBApEJ,SAA2BzB,SAC1B,MAAMG,EAAWhC,EAAKkC,WAAY,GAI5BY,EAFiB,WAAtBd,EAASW,UACTY,EAAmBC,SAA0B,QAAjBvB,EAAAD,EAASY,gBAAQ,IAAAX,EAAAA,EAAI,IACjBwB,EAAuB5B,GAAS,CAAA,EAEjEtB,EAEKM,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAkB,GACH,CAAAH,MAAOA,EACPiB,UAED9C,EAAK8B,IAEP,EAsDI4B,sBApDJ,SACCC,EACA3B,4CAEA,MAAMgB,OA3FyBY,EAC/BtB,EACAqB,IACGE,OAAA,OAAA,OAAA,GAAA,YACH,aAAM3D,EAGH,CACFiD,MAAO,CAAEb,eAAcqB,kBAmFDC,CACtB5B,EAASS,KACTkB,GAGD,IAAIX,aAAA,EAAAA,EAAUF,UAAUE,aAAQ,EAARA,EAAUc,MACjC,MAAM,IAAIV,OACTJ,aAAQ,EAARA,EAAUF,QACT,kEAIH,OAAQE,EAASc,KAA+BC,KAAKnC,IAAY,CAChEoC,MAAOpC,EAAOa,KACdZ,MAAOD,EAAOc,GACduB,UAAU,KAEZ,GAAC,UAuCuB"}
1	+ {"version":3,"file":"CustomField.js","sources":["../../../../../../../src/components/QueryBuilder/Filters/CustomField/components/CustomField.tsx"],"sourcesContent":["import React from 'react';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport AllowedListDropdown from '@src/components/QueryBuilder/components/AllowedListDropdown';\nimport { BaseQueryBuilderNode } from '@src/components/QueryBuilder/components/QueryBuilderNode/Base/BaseQueryBuilderNode';\nimport { PropertyNodeHeadless } from '@src/components/QueryBuilder/components/QueryBuilderNode/Property/PropertyNode';\nimport {\n\tCONTAINS_OPERATORS,\n\tgetContainsFilterError,\n} from '@src/components/QueryBuilder/helpers/SegmentValidator';\nimport { useQueryBuilder } from '@src/components/QueryBuilder/hooks/useQueryBuilder';\nimport { useQueryBuilderCache } from '@src/components/QueryBuilder/hooks/useQueryBuilderCache';\nimport {\n\tQueryBuilderProperty,\n\tQueryBuilderType,\n} from '@src/components/QueryBuilder/types/QueryBuilder.type';\nimport { QueryBuilderAPIData } from '@src/components/QueryBuilder/types/QueryBuilderAPI.type';\nimport { CONNECTOR_VALUE_TYPE } from '@src/components/QueryBuilder/types/QueryBuilderConnector.type';\nimport { QueryBuilderNodeProps } from '@src/components/QueryBuilder/types/QueryBuilderNodeProps.type';\nimport { CONNECTOR_OPERATORS } from '@src/components/QueryBuilder/types/QueryBuilderOperator.type';\n\nconst HasCustomFieldFilter: React.FC<QueryBuilderNodeProps> = ({\n\tnode,\n\tallowedNodes,\n\tapiHandler,\n\tmode,\n\tselectorKey,\n}) => {\n\tconst { selectType, createProperty, updateProperty } =\n\t\tuseQueryBuilder(selectorKey);\n\tconst { cacheWrap } = useQueryBuilderCache();\n\n\t/** DATA LAYER */\n\tconst getCustomFields = () =>\n\t\tcacheWrap(() => apiHandler<undefined>({}), 'CUSTOM_FIELDS');\n\n\tconst getCustomFieldValues = (propertyName: string, rest) =>\n\t\tcacheWrap(\n\t\t\t() =>\n\t\t\t\tapiHandler<{ propertyName: string }>({\n\t\t\t\t\tquery: { propertyName, ...rest },\n\t\t\t\t}),\n\t\t\t`CUSTOM_FIELDS-${propertyName}`,\n\t\t);\n\n\tconst searchCustomFieldsValue = async (\n\t\tpropertyName: string \| number,\n\t\tsearchKey: string,\n\t) =>\n\t\tawait apiHandler<{\n\t\t\tpropertyName: string \| number;\n\t\t\tsearchKey: string;\n\t\t}>({\n\t\t\tquery: { propertyName, searchKey },\n\t\t});\n\n\tasync function handlePropertyNameSelection(\n\t\tpropertyName: QueryBuilderAPIData,\n\t) {\n\t\tconst currentProperty = node.properties?.[0];\n\t\tconst isRetry =\n\t\t\t!!currentProperty &&\n\t\t\tcurrentProperty.name === propertyName.id &&\n\t\t\tcurrentProperty.dataType === propertyName.type;\n\n\t\tif (!currentProperty) {\n\t\t\tcreateProperty(\n\t\t\t\t{\n\t\t\t\t\tname: propertyName.id,\n\t\t\t\t\tdataType: propertyName.type,\n\t\t\t\t} as QueryBuilderProperty,\n\t\t\t\tnode._id,\n\t\t\t);\n\t\t} else if (!isRetry) {\n\t\t\tupdateProperty(\n\t\t\t\t{\n\t\t\t\t\t...currentProperty,\n\t\t\t\t\tname: propertyName.id,\n\t\t\t\t\tdataType: propertyName.type,\n\t\t\t\t\toperator: undefined,\n\t\t\t\t\tvalue: undefined,\n\t\t\t\t\terror: {},\n\t\t\t\t},\n\t\t\t\tnode._id,\n\t\t\t);\n\t\t}\n\n\t\tif (propertyName.needValuesRetrieval) {\n\t\t\tconst response = await getCustomFieldValues(\n\t\t\t\tpropertyName.id as string,\n\t\t\t\tpropertyName,\n\t\t\t);\n\t\t\tif (!response) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t'Something went wrong while fetching the list. Please try again',\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn response;\n\t\t}\n\n\t\treturn [];\n\t}\n\n\tfunction handleOperatorChange(operator: CONNECTOR_OPERATORS) {\n\t\tupdateProperty(\n\t\t\t{\n\t\t\t\t...node.properties![0],\n\t\t\t\toperator,\n\t\t\t\tvalue: undefined,\n\t\t\t\terror: {},\n\t\t\t},\n\t\t\tnode._id,\n\t\t);\n\t}\n\n\tfunction handleValueChange(value: CONNECTOR_VALUE_TYPE) {\n\t\tconst property = node.properties![0];\n\t\tconst isContainsFilter =\n\t\t\tproperty.dataType === 'string' &&\n\t\t\tCONTAINS_OPERATORS.includes(property.operator ?? '');\n\t\tconst error = isContainsFilter ? getContainsFilterError(value) : {};\n\n\t\tupdateProperty(\n\t\t\t{\n\t\t\t\t...property,\n\t\t\t\tvalue: value,\n\t\t\t\terror,\n\t\t\t},\n\t\t\tnode._id,\n\t\t);\n\t}\n\n\tasync function onPropertyValueSearch(\n\t\tsearchKey: string,\n\t\tproperty: QueryBuilderProperty,\n\t) {\n\t\tconst response = await searchCustomFieldsValue(\n\t\t\tproperty.name as string,\n\t\t\tsearchKey,\n\t\t);\n\n\t\tif (response?.error \|\| !response?.data) {\n\t\t\tthrow new Error(\n\t\t\t\tresponse?.error \|\|\n\t\t\t\t\t'Something went wrong while fetching the list. Please try again',\n\t\t\t);\n\t\t}\n\n\t\treturn (response.data as QueryBuilderAPIData[]).map((option) => ({\n\t\t\tlabel: option.name,\n\t\t\tvalue: option.id,\n\t\t\tselected: false,\n\t\t}));\n\t}\n\n\treturn (\n\t\t<BaseQueryBuilderNode node={node} mode={mode}>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tgap: 12,\n\t\t\t\t\talignItems: 'flex-start',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<AllowedListDropdown\n\t\t\t\t\tdisabled={mode === 'view'}\n\t\t\t\t\tselectedType={node.type}\n\t\t\t\t\tallowedList={allowedNodes}\n\t\t\t\t\tonSelect={(option) =>\n\t\t\t\t\t\tselectType(\n\t\t\t\t\t\t\t(option as SingleOption).value as QueryBuilderType,\n\t\t\t\t\t\t\tnode._id,\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t/>\n\n\t\t\t\t<PropertyNodeHeadless\n\t\t\t\t\tmode={mode}\n\t\t\t\t\tproperty={node?.properties?.[0]}\n\t\t\t\t\tfetchPropertyData={getCustomFields}\n\t\t\t\t\tonPropertyNameSelect={handlePropertyNameSelection}\n\t\t\t\t\tonPropertyOperatorChange={handleOperatorChange}\n\t\t\t\t\tonPropertyValueChange={handleValueChange}\n\t\t\t\t\tonPropertyValueSearch={\n\t\t\t\t\t\tonPropertyValueSearch as (\n\t\t\t\t\t\t\tsearchKey: string,\n\t\t\t\t\t\t\tproperty: QueryBuilderProperty,\n\t\t\t\t\t\t) => Promise<DropdownOption[]>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</BaseQueryBuilderNode>\n\t);\n};\n\nexport default HasCustomFieldFilter;\n"],"names":["HasCustomFieldFilter","node","allowedNodes","apiHandler","mode","selectorKey","selectType","createProperty","updateProperty","useQueryBuilder","cacheWrap","useQueryBuilderCache","_jsx","BaseQueryBuilderNode","Object","assign","children","_jsxs","style","flexDirection","display","gap","alignItems","AllowedListDropdown","disabled","selectedType","type","allowedList","onSelect","option","value","_id","PropertyNodeHeadless","property","_a","properties","fetchPropertyData","getCustomFields","onPropertyNameSelect","propertyName","currentProperty","isRetry","name","id","dataType","operator","undefined","error","needValuesRetrieval","response","getCustomFieldValues","rest","query","Error","onPropertyOperatorChange","onPropertyValueChange","CONTAINS_OPERATORS","includes","getContainsFilterError","onPropertyValueSearch","searchKey","searchCustomFieldsValue","__awaiter","data","map","label","selected"],"mappings":"gnBAoBMA,MAAAA,EAAwDA,EAC7DC,OACAC,eACAC,aACAC,OACAC,wBAEA,MAAMC,WAAEA,EAAUC,eAAEA,EAAcC,eAAEA,GACnCC,EAAgBJ,IACXK,UAAEA,GAAcC,IA6HtB,OACCC,EAACC,EAAoBC,OAAAC,OAAA,CAACd,KAAMA,EAAMG,KAAMA,GACvC,CAAAY,SAAAC,EAAA,MAAAH,OAAAC,OAAA,CACCG,MAAO,CACNC,cAAe,MACfC,QAAS,OACTC,IAAK,GACLC,WAAY,eACZ,CAAAN,SAAA,CAEDJ,EAACW,EAAmB,CACnBC,SAAmB,SAATpB,EACVqB,aAAcxB,EAAKyB,KACnBC,YAAazB,EACb0B,SAAWC,GACVvB,EACEuB,EAAwBC,MACzB7B,EAAK8B,OAKRnB,EAACoB,EAAoB,CACpB5B,KAAMA,EACN6B,SAA0B,QAAhBC,EAAAjC,aAAA,EAAAA,EAAMkC,kBAAU,IAAAD,OAAA,EAAAA,EAAG,GAC7BE,kBAnJoBC,IACvB3B,GAAU,IAAMP,EAAsB,CAAE,IAAG,iBAmJxCmC,qBA7HJ,SACCC,kDAEA,MAAMC,EAAiC,QAAfN,EAAAjC,EAAKkC,kBAAU,IAAAD,OAAA,EAAAA,EAAG,GACpCO,IACHD,GACFA,EAAgBE,OAASH,EAAaI,IACtCH,EAAgBI,WAAaL,EAAab,KAwB3C,GAtBKc,EAQOC,GACXjC,EAEKM,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAyB,GACH,CAAAE,KAAMH,EAAaI,GACnBC,SAAUL,EAAab,KACvBmB,cAAUC,EACVhB,WAAOgB,EACPC,MAAO,CAAA,IAER9C,EAAK8B,KAjBNxB,EACC,CACCmC,KAAMH,EAAaI,GACnBC,SAAUL,EAAab,MAExBzB,EAAK8B,KAgBHQ,EAAaS,oBAAqB,CACrC,MAAMC,OApDqBC,EAACX,EAAsBY,IACnDzC,GACC,IACCP,EAAqC,CACpCiD,MAAStC,OAAAC,OAAA,CAAAwB,gBAAiBY,MAE5B,iBAAiBZ,KA8CMW,CACtBX,EAAaI,GACbJ,GAED,IAAKU,EACJ,MAAM,IAAII,MACT,kEAGF,OAAOJ,CACP,CAED,MAAO,KACP,EAiFGK,yBA/EJ,SAA8BT,GAC7BrC,EAAcM,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAETd,EAAKkC,WAAY,IACpB,CAAAU,WACAf,WAAOgB,EACPC,MAAO,CAAA,IAER9C,EAAK8B,IAEP,EAsEIwB,sBApEJ,SAA2BzB,SAC1B,MAAMG,EAAWhC,EAAKkC,WAAY,GAI5BY,EAFiB,WAAtBd,EAASW,UACTY,EAAmBC,SAA0B,QAAjBvB,EAAAD,EAASY,gBAAQ,IAAAX,EAAAA,EAAI,IACjBwB,EAAuB5B,GAAS,CAAA,EAEjEtB,EAEKM,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAkB,GACH,CAAAH,MAAOA,EACPiB,UAED9C,EAAK8B,IAEP,EAsDI4B,sBApDJ,SACCC,EACA3B,4CAEA,MAAMgB,OA3FyBY,EAC/BtB,EACAqB,IACGE,OAAA,OAAA,OAAA,GAAA,YACH,aAAM3D,EAGH,CACFiD,MAAO,CAAEb,eAAcqB,kBAmFDC,CACtB5B,EAASS,KACTkB,GAGD,IAAIX,aAAA,EAAAA,EAAUF,UAAUE,aAAQ,EAARA,EAAUc,MACjC,MAAM,IAAIV,OACTJ,aAAQ,EAARA,EAAUF,QACT,kEAIH,OAAQE,EAASc,KAA+BC,KAAKnC,IAAY,CAChEoC,MAAOpC,EAAOa,KACdZ,MAAOD,EAAOc,GACduB,UAAU,KAEZ,GAAC,UAuCuB"}