@bikdotai/bik-component-library 0.0.835-beta.2 → 0.0.835
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/BikGiftedChat/GiftedChat/GiftedChat.js.map +1 -1
- package/dist/cjs/components/button/Button.styled.js +2 -7
- package/dist/cjs/components/button/Button.styled.js.map +1 -1
- package/dist/cjs/components/button/themes.js +3 -3
- package/dist/cjs/components/button/themes.js.map +1 -1
- package/dist/cjs/components/checkBox/CheckBox.js +1 -1
- package/dist/cjs/components/checkBox/CheckBox.js.map +1 -1
- package/dist/cjs/components/checkBox/CheckBox.styled.js +10 -7
- package/dist/cjs/components/checkBox/CheckBox.styled.js.map +1 -1
- package/dist/cjs/components/dropdown/ChipInput.js +1 -1
- package/dist/cjs/components/dropdown/ChipInput.js.map +1 -1
- package/dist/cjs/components/dropdown/Dropdown.js +1 -1
- package/dist/cjs/components/dropdown/Dropdown.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.js.map +1 -1
- package/dist/cjs/components/input/Input.js +1 -1
- package/dist/cjs/components/input/Input.js.map +1 -1
- package/dist/cjs/components/input/Input.styled.js +12 -25
- package/dist/cjs/components/input/Input.styled.js.map +1 -1
- package/dist/cjs/components/tabs/Tabs.js +1 -1
- package/dist/cjs/components/tabs/Tabs.js.map +1 -1
- package/dist/cjs/components/tabs/Tabs.styles.js +8 -22
- package/dist/cjs/components/tabs/Tabs.styles.js.map +1 -1
- package/dist/cjs/components/whats-new/WhatsNew.js +1 -1
- package/dist/cjs/components/whats-new/WhatsNew.js.map +1 -1
- package/dist/cjs/components/whats-new/WhatsNewButton.js +2 -2
- package/dist/cjs/components/whats-new/WhatsNewButton.js.map +1 -1
- package/dist/cjs/editor/extensions/characterLimit/CharacterLimitExtension.js.map +1 -1
- package/dist/esm/components/BikGiftedChat/GiftedChat/GiftedChat.js.map +1 -1
- package/dist/esm/components/button/Button.styled.js +6 -11
- package/dist/esm/components/button/Button.styled.js.map +1 -1
- package/dist/esm/components/button/themes.d.ts +1 -1
- package/dist/esm/components/button/themes.js +1 -1
- package/dist/esm/components/button/themes.js.map +1 -1
- package/dist/esm/components/checkBox/CheckBox.js +16 -17
- package/dist/esm/components/checkBox/CheckBox.js.map +1 -1
- package/dist/esm/components/checkBox/CheckBox.styled.d.ts +0 -1
- package/dist/esm/components/checkBox/CheckBox.styled.js +11 -9
- package/dist/esm/components/checkBox/CheckBox.styled.js.map +1 -1
- package/dist/esm/components/dropdown/ChipInput.d.ts +0 -1
- package/dist/esm/components/dropdown/ChipInput.js +30 -37
- package/dist/esm/components/dropdown/ChipInput.js.map +1 -1
- package/dist/esm/components/dropdown/Dropdown.d.ts +0 -2
- package/dist/esm/components/dropdown/Dropdown.js +88 -95
- package/dist/esm/components/dropdown/Dropdown.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.js.map +1 -1
- package/dist/esm/components/input/Input.js +101 -104
- package/dist/esm/components/input/Input.js.map +1 -1
- package/dist/esm/components/input/Input.model.d.ts +0 -2
- package/dist/esm/components/input/Input.styled.d.ts +0 -2
- package/dist/esm/components/input/Input.styled.js +25 -38
- package/dist/esm/components/input/Input.styled.js.map +1 -1
- package/dist/esm/components/tabs/Tabs.js +73 -93
- package/dist/esm/components/tabs/Tabs.js.map +1 -1
- package/dist/esm/components/tabs/Tabs.model.d.ts +0 -7
- package/dist/esm/components/tabs/Tabs.styles.d.ts +0 -2
- package/dist/esm/components/tabs/Tabs.styles.js +9 -23
- package/dist/esm/components/tabs/Tabs.styles.js.map +1 -1
- package/dist/esm/components/whats-new/WhatsNew.d.ts +0 -1
- package/dist/esm/components/whats-new/WhatsNew.js +17 -19
- package/dist/esm/components/whats-new/WhatsNew.js.map +1 -1
- package/dist/esm/components/whats-new/WhatsNew.types.d.ts +0 -1
- package/dist/esm/components/whats-new/WhatsNewButton.js +32 -37
- package/dist/esm/components/whats-new/WhatsNewButton.js.map +1 -1
- package/dist/esm/editor/extensions/characterLimit/CharacterLimitExtension.js.map +1 -1
- package/dist/esm/icons/index.d.ts +25 -25
- package/package.json +2 -2
- package/dist/cjs/utils/rgba.js +0 -2
- package/dist/cjs/utils/rgba.js.map +0 -1
- package/dist/esm/utils/rgba.js +0 -10
- package/dist/esm/utils/rgba.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GiftedChat.js","sources":["../../../../../src/components/BikGiftedChat/GiftedChat/GiftedChat.tsx"],"sourcesContent":["import React, {\n\tforwardRef,\n\tuseCallback,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { COLORS } from '../../../constants/Theme';\nimport { useWindowSize } from '../../../hooks/useWindowSize';\nimport { Button } from '../../button';\nimport { BodySecondary } from '../../TypographyStyle';\nimport { BubbleProps, GiftedChatAppType } from '../Bubble/types';\nimport { IMessage } from '../types';\nimport { Day } from './Day';\nimport { getMessagePlacement, shouldCenterAlign } from './messageHelpers';\nimport {\n\tuseAutoScrollOnNewMessages,\n\tuseInitialMountScroll,\n\tuseResizeObserverForFirstMessage,\n\tuseRestoreScrollPosition,\n\tuseScrollCleanup,\n\tuseScrollHandler,\n\tuseScrollToBottom,\n} from './scrollHooks';\nimport { AvatarProps, GiftedChatProps, MESSAGE_CHANNELS } from './types';\nimport { isSameDay, normalizeRef } from './utils';\nimport { Constants, TOP_THRESHOLD } from './utils';\n\nconst COLLAPSED_MAX_HEIGHT = 204;\n\nconst CollapsibleBubbleText: React.FC<{\n\ttext: string;\n\tisExpanded: boolean;\n\tonToggle: () => void;\n}> = ({ text, isExpanded, onToggle }) => {\n\tconst textRef = useRef<HTMLDivElement>(null);\n\tconst [isOverflowing, setIsOverflowing] = useState(false);\n\n\tuseEffect(() => {\n\t\tconst el = textRef.current;\n\t\tif (el) {\n\t\t\t// Temporarily remove max-height to measure true scroll height\n\t\t\tel.style.maxHeight = 'none';\n\t\t\tconst overflows = el.scrollHeight > COLLAPSED_MAX_HEIGHT;\n\t\t\tel.style.maxHeight = isExpanded ? 'none' : `${COLLAPSED_MAX_HEIGHT}px`;\n\t\t\tsetIsOverflowing(overflows);\n\t\t}\n\t}, [text, isExpanded]);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tref={textRef}\n\t\t\t\tstyle={{\n\t\t\t\t\tmaxHeight: isExpanded ? 'none' : COLLAPSED_MAX_HEIGHT,\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<BodySecondary>{text}</BodySecondary>\n\t\t\t</div>\n\t\t\t{isOverflowing && (\n\t\t\t\t<Button\n\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\tbuttonText={isExpanded ? 'Show less' : 'Read more'}\n\t\t\t\t\tonClick={onToggle}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst GiftedChatInner = (\n\tprops: Omit<GiftedChatProps<IMessage>, 'ref'>,\n\tforwardedRef: React.Ref<HTMLDivElement>,\n) => {\n\tconst {\n\t\tmessages = [],\n\t\tuser,\n\t\trenderBubble,\n\t\trenderAvatar,\n\t\trenderDay,\n\t\trenderLoading,\n\t\trenderChatEmpty,\n\t\tlistViewProps = {},\n\t\trenderAvatarOnTop = false,\n\t\tshowUserAvatar = false,\n\t\tshowAvatarForEveryMessage = false,\n\t\tinverted = false,\n\t\tmessageIdGenerator,\n\t\ttopThreshold = TOP_THRESHOLD,\n\t\tappType = GiftedChatAppType.Bik,\n\t\tmaxHeight,\n\t\tisActivityMessage,\n\t\t...extraProps\n\t} = props || {};\n\n\tconst isMobile = useWindowSize();\n\n\tconst internalScrollRef = useRef<HTMLDivElement | null>(null);\n\tconst scrollRef = normalizeRef(\n\t\tlistViewProps.ref || forwardedRef,\n\t\tinternalScrollRef,\n\t);\n\n\tconst scrollState = useRef({\n\t\tisInitialMount: true,\n\t\tisUserScrolling: false,\n\t\tisLoadingOldMessages: false,\n\t\tisAtBottom: true,\n\t\thasTriggeredEndReached: false,\n\t\tlastMessagesLength: messages?.length ?? 0,\n\t\tpreviousScrollHeight: 0,\n\t\tpreviousScrollTop: 0,\n\t\tscrollTimeout: null,\n\t});\n\n\tconst [expandedMessages, setExpandedMessages] = useState<\n\t\tSet<string | number>\n\t>(new Set());\n\n\t// Reverse messages so newest appears last in DOM (natural reading order)\n\tconst reversedMessages = useMemo(() => {\n\t\tif (!messages || messages.length === 0) return [] as IMessage[];\n\t\treturn [...messages].reverse() as IMessage[];\n\t}, [messages]);\n\n\t// Group consecutive same-day messages so each day separator can stick\n\t// within its own section and get pushed out by the next day's separator.\n\tconst dayGroups = useMemo(() => {\n\t\tconst groups: { createdAt: IMessage['createdAt']; indices: number[] }[] =\n\t\t\t[];\n\t\treversedMessages.forEach((message, index) => {\n\t\t\tconst previousMessage = reversedMessages[index - 1];\n\t\t\tif (index === 0 || !isSameDay(message, previousMessage)) {\n\t\t\t\tgroups.push({ createdAt: message.createdAt, indices: [index] });\n\t\t\t} else {\n\t\t\t\tgroups[groups.length - 1].indices.push(index);\n\t\t\t}\n\t\t});\n\t\treturn groups;\n\t}, [reversedMessages]);\n\n\tconst scrollToBottom = useScrollToBottom(scrollRef, scrollState);\n\n\tuseImperativeHandle(forwardedRef, () => scrollRef.current!);\n\n\tuseInitialMountScroll(\n\t\tscrollRef,\n\t\tscrollState,\n\t\treversedMessages.length,\n\t\tscrollToBottom,\n\t);\n\n\tuseScrollCleanup(scrollState);\n\n\tuseRestoreScrollPosition(scrollRef, scrollState, reversedMessages.length);\n\n\tuseAutoScrollOnNewMessages(\n\t\tscrollRef,\n\t\tscrollState,\n\t\tmessages.length,\n\t\tscrollToBottom,\n\t);\n\n\tuseResizeObserverForFirstMessage(\n\t\tmessages?.[0],\n\t\tscrollState,\n\t\tscrollToBottom,\n\t\tmessageIdGenerator,\n\t);\n\n\tconst handleScroll = useScrollHandler(\n\t\tscrollState,\n\t\tlistViewProps.onEndReached,\n\t\tlistViewProps.onScroll,\n\t\ttopThreshold,\n\t);\n\n\t// Check if a message belongs to the current user\n\tconst isUserMessage = useCallback(\n\t\t(message: IMessage) => {\n\t\t\treturn Boolean(message && user && message.user?._id === user._id);\n\t\t},\n\t\t[user],\n\t);\n\n\t// Determine if avatar should be shown for this message\n\tconst shouldShowAvatar = useCallback(\n\t\t(message: IMessage, previousMessage?: IMessage) => {\n\t\t\tif (!showUserAvatar) return false;\n\t\t\tif (showAvatarForEveryMessage) return true;\n\n\t\t\t// Show avatar on the first message in a consecutive sender stack,\n\t\t\t// or when an activity interrupts the stack, or when the current message itself is an activity\n\t\t\treturn (\n\t\t\t\t!previousMessage ||\n\t\t\t\t(isActivityMessage ? isActivityMessage(message) : false) ||\n\t\t\t\t(isActivityMessage ? isActivityMessage(previousMessage) : false) ||\n\t\t\t\tpreviousMessage.user._id !== message.user._id\n\t\t\t);\n\t\t},\n\t\t[showUserAvatar, showAvatarForEveryMessage, isActivityMessage],\n\t);\n\n\t// Render a message bubble (or call custom renderBubble)\n\tconst renderMessageBubble = useCallback(\n\t\t(message: IMessage, previousMessage?: IMessage, nextMessage?: IMessage) => {\n\t\t\tconst position = isUserMessage(message) ? 'right' : 'left';\n\t\t\tconst isTopOfStack = previousMessage?.user?._id !== message?.user?._id;\n\t\t\tconst isBottomOfStack = nextMessage?.user?._id !== message?.user?._id;\n\n\t\t\tconst bubbleProps: BubbleProps<IMessage> = {\n\t\t\t\tcurrentMessage: message,\n\t\t\t\tpreviousMessage,\n\t\t\t\tnextMessage,\n\t\t\t\tposition,\n\t\t\t\tuser,\n\t\t\t\t...extraProps,\n\t\t\t};\n\n\t\t\t// Use custom render function if provided\n\t\t\tif (renderBubble) {\n\t\t\t\treturn renderBubble(bubbleProps);\n\t\t\t}\n\n\t\t\t// Default bubble rendering\n\t\t\tconst messageId = message._id;\n\t\t\tconst isExpanded = expandedMessages.has(messageId);\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tmaxWidth: appType === GiftedChatAppType.Manifest ? '50%' : '70%',\n\t\t\t\t\t\twidth: 'fit-content',\n\t\t\t\t\t\t...(appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t? { minWidth: '130px' }\n\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\tpadding: '8px 12px',\n\t\t\t\t\t\tborderTopLeftRadius:\n\t\t\t\t\t\t\tposition === 'left' ? (isTopOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\t\tposition === 'right' ? (isTopOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\t\tposition === 'left' ? (isBottomOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\t\tposition === 'right' ? (isBottomOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborder:\n\t\t\t\t\t\t\tposition === 'left' && appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t? '1px solid rgb(224, 224, 224)'\n\t\t\t\t\t\t\t\t: 'none',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\tposition === 'right'\n\t\t\t\t\t\t\t\t? appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t? COLORS.background.brandTint\n\t\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t\t: appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t? COLORS.background.pureWhite\n\t\t\t\t\t\t\t\t: COLORS.background.inactive,\n\t\t\t\t\t\tcolor: COLORS.content.primary,\n\t\t\t\t\t\twordBreak: 'break-word',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<CollapsibleBubbleText\n\t\t\t\t\t\ttext={message.text ?? ''}\n\t\t\t\t\t\tisExpanded={isExpanded}\n\t\t\t\t\t\tonToggle={() =>\n\t\t\t\t\t\t\tsetExpandedMessages((prev) => {\n\t\t\t\t\t\t\t\tconst next = new Set(prev);\n\t\t\t\t\t\t\t\tif (isExpanded) next.delete(messageId);\n\t\t\t\t\t\t\t\telse next.add(messageId);\n\t\t\t\t\t\t\t\treturn next;\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t);\n\t\t},\n\t\t[isUserMessage, user, renderBubble, extraProps, expandedMessages],\n\t);\n\n\t// Render a message avatar (or call custom renderAvatar)\n\tconst renderMessageAvatar = useCallback(\n\t\t(message: IMessage, previousMessage?: IMessage, nextMessage?: IMessage) => {\n\t\t\tconst shouldShow = shouldShowAvatar(message, previousMessage);\n\n\t\t\tif (!shouldShow) return null;\n\n\t\t\tconst position = isUserMessage(message) ? 'right' : 'left';\n\n\t\t\tconst avatarProps: AvatarProps<IMessage> = {\n\t\t\t\tcurrentMessage: message,\n\t\t\t\tpreviousMessage,\n\t\t\t\tnextMessage,\n\t\t\t\tposition,\n\t\t\t\tuser,\n\t\t\t\trenderAvatarOnTop,\n\t\t\t\tshowUserAvatar,\n\t\t\t\tshowAvatarForEveryMessage,\n\t\t\t};\n\n\t\t\treturn renderAvatar ? renderAvatar(avatarProps) : null;\n\t\t},\n\t\t[\n\t\t\tshouldShowAvatar,\n\t\t\tisUserMessage,\n\t\t\tuser,\n\t\t\trenderAvatarOnTop,\n\t\t\tshowUserAvatar,\n\t\t\tshowAvatarForEveryMessage,\n\t\t\trenderAvatar,\n\t\t],\n\t);\n\n\t// Render: Empty State\n\tif (!messages || messages.length === 0) {\n\t\treturn renderChatEmpty ? <>{renderChatEmpty()}</> : null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={scrollRef as React.RefObject<HTMLDivElement>}\n\t\t\tstyle={{\n\t\t\t\tflex: 1,\n\t\t\t\toverflowY: 'auto',\n\t\t\t\toverflowX: 'hidden',\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tflexDirection: 'column',\n\t\t\t\t...(maxHeight ? { maxHeight, height: maxHeight } : {}),\n\t\t\t\t...listViewProps.style,\n\t\t\t}}\n\t\t\tonScroll={handleScroll}\n\t\t>\n\t\t\t{/* Spacer to push messages to bottom (newest appears last in DOM) */}\n\t\t\t<div style={{ flex: '1 0 auto' }} />\n\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tflex: '0 0 auto',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{dayGroups.map((group, groupIndex) => (\n\t\t\t\t\t<div key={`day-group-${groupIndex}`}>\n\t\t\t\t\t\t{/* Day separator — sticks to top while this day scrolls past */}\n\t\t\t\t\t\t{renderDay ? (\n\t\t\t\t\t\t\t<div style={{ position: 'sticky', top: 0, zIndex: 2 }}>\n\t\t\t\t\t\t\t\t{renderDay({ createdAt: group.createdAt })}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Day\n\t\t\t\t\t\t\t\tcreatedAt={group.createdAt}\n\t\t\t\t\t\t\t\tappType={appType}\n\t\t\t\t\t\t\t\tscrollRootRef={scrollRef}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{group.indices.map((index) => {\n\t\t\t\t\t\t\tconst message = reversedMessages[index];\n\t\t\t\t\t\t\tconst isSmtp =\n\t\t\t\t\t\t\t\tmessage?.['channelId'] === MESSAGE_CHANNELS.SMTP ||\n\t\t\t\t\t\t\t\tmessage?.['channelName'] === MESSAGE_CHANNELS.SMTP;\n\t\t\t\t\t\t\tconst position = isSmtp\n\t\t\t\t\t\t\t\t? 'left'\n\t\t\t\t\t\t\t\t: isUserMessage(message)\n\t\t\t\t\t\t\t\t? 'right'\n\t\t\t\t\t\t\t\t: 'left';\n\t\t\t\t\t\t\tconst previousMessage = reversedMessages[index - 1];\n\t\t\t\t\t\t\tconst nextMessage = reversedMessages[index + 1];\n\t\t\t\t\t\t\tconst placement = getMessagePlacement(message, position);\n\t\t\t\t\t\t\tconst isCentered = shouldCenterAlign(message);\n\t\t\t\t\t\t\t// Check if message is a private note\n\t\t\t\t\t\t\tconst isPrivateNote =\n\t\t\t\t\t\t\t\tmessage['category'] ===\n\t\t\t\t\t\t\t\t\tConstants.ChatActivity.Category.ACTIVITY &&\n\t\t\t\t\t\t\t\tmessage['activityType'] ===\n\t\t\t\t\t\t\t\t\tConstants.ChatActivity.Type.PRIVATE_NOTE;\n\t\t\t\t\t\t\tconst isActivity =\n\t\t\t\t\t\t\t\tmessage['category'] ===\n\t\t\t\t\t\t\t\t\tConstants.ChatActivity.Category.ACTIVITY && !isPrivateNote;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<React.Fragment\n\t\t\t\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\t\t\t\tmessage._id ?? `${index}-${messageIdGenerator?.() ?? 'id'}`\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{/* Message container */}\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t...(isMobile ? { margin: '0 4px' } : {}),\n\t\t\t\t\t\t\t\t\t\t\t...(isCentered\n\t\t\t\t\t\t\t\t\t\t\t\t? {}\n\t\t\t\t\t\t\t\t\t\t\t\t: { display: 'flex', alignItems: 'flex-start' }),\n\t\t\t\t\t\t\t\t\t\t\t...(appType !== GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t\t\t\t? !isMobile && position === 'right'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { marginLeft: 8 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: { marginRight: 8 }\n\t\t\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t\t\t\t...(isSmtp && !isPrivateNote && isMobile\n\t\t\t\t\t\t\t\t\t\t\t\t? { marginLeft: 8, marginRight: 8 }\n\t\t\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t\t\t\t...(isSmtp && isPrivateNote ? { marginRight: 16 } : {}),\n\t\t\t\t\t\t\t\t\t\t\tjustifyContent: placement,\n\t\t\t\t\t\t\t\t\t\t\tmarginBottom: isSmtp\n\t\t\t\t\t\t\t\t\t\t\t\t? // SMTP: flat 24px between mails, no same/different-user split.\n\t\t\t\t\t\t\t\t\t\t\t\t nextMessage\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 24\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 0\n\t\t\t\t\t\t\t\t\t\t\t\t: nextMessage\n\t\t\t\t\t\t\t\t\t\t\t\t? nextMessage?.user?._id === message?.user?._id\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 4\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 20\n\t\t\t\t\t\t\t\t\t\t\t\t: 0,\n\t\t\t\t\t\t\t\t\t\t\t// Activity cards: no left/bottom margin.\n\t\t\t\t\t\t\t\t\t\t\t...(isActivity ? { marginLeft: 0, marginBottom: 0 } : {}),\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{/* Left avatar or placeholder (for mobile, avatar is hidden) */}\n\t\t\t\t\t\t\t\t\t\t{!isMobile && position === 'left' && (\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tmarginRight: '4px',\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{renderMessageAvatar(\n\t\t\t\t\t\t\t\t\t\t\t\t\tmessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tpreviousMessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextMessage,\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t\t\t{/* Message bubble */}\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tid={`message-bubble-${\n\t\t\t\t\t\t\t\t\t\t\t\tmessage._id ??\n\t\t\t\t\t\t\t\t\t\t\t\t`${index}-${messageIdGenerator?.() ?? 'id'}`\n\t\t\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\t\t\tappType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { width: '100%' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: isMobile || isSmtp\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { display: 'flex', flexGrow: 1, width: '100%' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: {}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{renderMessageBubble(\n\t\t\t\t\t\t\t\t\t\t\t\tmessage,\n\t\t\t\t\t\t\t\t\t\t\t\tpreviousMessage,\n\t\t\t\t\t\t\t\t\t\t\t\tnextMessage,\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t\t\t{/* Right avatar or placeholder (for mobile, avatar is hidden) */}\n\t\t\t\t\t\t\t\t\t\t{!isMobile && position === 'right' && (\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tmarginLeft: '4px',\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\talignSelf: 'flex-start',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{renderMessageAvatar(\n\t\t\t\t\t\t\t\t\t\t\t\t\tmessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tpreviousMessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextMessage,\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</React.Fragment>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default forwardRef<HTMLDivElement, GiftedChatProps<IMessage>>(\n\tGiftedChatInner,\n);\n"],"names":["COLLAPSED_MAX_HEIGHT","CollapsibleBubbleText","text","isExpanded","onToggle","textRef","useRef","isOverflowing","setIsOverflowing","useState","useEffect","el","overflows","jsxs","Fragment","jsx","BodySecondary","Button","GiftedChatInner","props","forwardedRef","messages","user","renderBubble","renderAvatar","renderDay","renderLoading","renderChatEmpty","listViewProps","renderAvatarOnTop","showUserAvatar","showAvatarForEveryMessage","inverted","messageIdGenerator","topThreshold","TOP_THRESHOLD","appType","GiftedChatAppType","maxHeight","isActivityMessage","extraProps","isMobile","useWindowSize","internalScrollRef","scrollRef","normalizeRef","scrollState","expandedMessages","setExpandedMessages","reversedMessages","useMemo","dayGroups","groups","message","index","previousMessage","isSameDay","scrollToBottom","useScrollToBottom","useImperativeHandle","useInitialMountScroll","useScrollCleanup","useRestoreScrollPosition","useAutoScrollOnNewMessages","useResizeObserverForFirstMessage","handleScroll","useScrollHandler","isUserMessage","useCallback","shouldShowAvatar","renderMessageBubble","nextMessage","position","isTopOfStack","isBottomOfStack","bubbleProps","messageId","COLORS","prev","next","renderMessageAvatar","group","groupIndex","Day","isSmtp","MESSAGE_CHANNELS","placement","getMessagePlacement","isCentered","shouldCenterAlign","isPrivateNote","Constants","isActivity","React","GiftedChat","forwardRef"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"GiftedChat.js","sources":["../../../../../src/components/BikGiftedChat/GiftedChat/GiftedChat.tsx"],"sourcesContent":["import React, {\n\tforwardRef,\n\tuseCallback,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { COLORS } from '../../../constants/Theme';\nimport { useWindowSize } from '../../../hooks/useWindowSize';\nimport { Button } from '../../button';\nimport { BodySecondary } from '../../TypographyStyle';\nimport { BubbleProps, GiftedChatAppType } from '../Bubble/types';\nimport { IMessage } from '../types';\nimport { Day } from './Day';\nimport { getMessagePlacement, shouldCenterAlign } from './messageHelpers';\nimport {\n\tuseAutoScrollOnNewMessages,\n\tuseInitialMountScroll,\n\tuseResizeObserverForFirstMessage,\n\tuseRestoreScrollPosition,\n\tuseScrollCleanup,\n\tuseScrollHandler,\n\tuseScrollToBottom,\n} from './scrollHooks';\nimport { AvatarProps, GiftedChatProps, MESSAGE_CHANNELS } from './types';\nimport { isSameDay, normalizeRef } from './utils';\nimport { Constants, TOP_THRESHOLD } from './utils';\n\nconst COLLAPSED_MAX_HEIGHT = 204;\n\nconst CollapsibleBubbleText: React.FC<{\n\ttext: string;\n\tisExpanded: boolean;\n\tonToggle: () => void;\n}> = ({ text, isExpanded, onToggle }) => {\n\tconst textRef = useRef<HTMLDivElement>(null);\n\tconst [isOverflowing, setIsOverflowing] = useState(false);\n\n\tuseEffect(() => {\n\t\tconst el = textRef.current;\n\t\tif (el) {\n\t\t\t// Temporarily remove max-height to measure true scroll height\n\t\t\tel.style.maxHeight = 'none';\n\t\t\tconst overflows = el.scrollHeight > COLLAPSED_MAX_HEIGHT;\n\t\t\tel.style.maxHeight = isExpanded ? 'none' : `${COLLAPSED_MAX_HEIGHT}px`;\n\t\t\tsetIsOverflowing(overflows);\n\t\t}\n\t}, [text, isExpanded]);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tref={textRef}\n\t\t\t\tstyle={{\n\t\t\t\t\tmaxHeight: isExpanded ? 'none' : COLLAPSED_MAX_HEIGHT,\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<BodySecondary>{text}</BodySecondary>\n\t\t\t</div>\n\t\t\t{isOverflowing && (\n\t\t\t\t<Button\n\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\tbuttonText={isExpanded ? 'Show less' : 'Read more'}\n\t\t\t\t\tonClick={onToggle}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst GiftedChatInner = (\n\tprops: Omit<GiftedChatProps<IMessage>, 'ref'>,\n\tforwardedRef: React.Ref<HTMLDivElement>,\n) => {\n\tconst {\n\t\tmessages = [],\n\t\tuser,\n\t\trenderBubble,\n\t\trenderAvatar,\n\t\trenderDay,\n\t\trenderLoading,\n\t\trenderChatEmpty,\n\t\tlistViewProps = {},\n\t\trenderAvatarOnTop = false,\n\t\tshowUserAvatar = false,\n\t\tshowAvatarForEveryMessage = false,\n\t\tinverted = false,\n\t\tmessageIdGenerator,\n\t\ttopThreshold = TOP_THRESHOLD,\n\t\tappType = GiftedChatAppType.Bik,\n\t\tmaxHeight,\n\t\tisActivityMessage,\n\t\t...extraProps\n\t} = props || {};\n\n\tconst isMobile = useWindowSize();\n\n\tconst internalScrollRef = useRef<HTMLDivElement | null>(null);\n\tconst scrollRef = normalizeRef(\n\t\tlistViewProps.ref || forwardedRef,\n\t\tinternalScrollRef,\n\t);\n\n\tconst scrollState = useRef({\n\t\tisInitialMount: true,\n\t\tisUserScrolling: false,\n\t\tisLoadingOldMessages: false,\n\t\tisAtBottom: true,\n\t\thasTriggeredEndReached: false,\n\t\tlastMessagesLength: messages?.length ?? 0,\n\t\tpreviousScrollHeight: 0,\n\t\tpreviousScrollTop: 0,\n\t\tscrollTimeout: null,\n\t});\n\n\tconst [expandedMessages, setExpandedMessages] = useState<\n\t\tSet<string | number>\n\t>(new Set());\n\n\t// Reverse messages so newest appears last in DOM (natural reading order)\n\tconst reversedMessages = useMemo(() => {\n\t\tif (!messages || messages.length === 0) return [] as IMessage[];\n\t\treturn [...messages].reverse() as IMessage[];\n\t}, [messages]);\n\n\t// Group consecutive same-day messages so each day separator can stick\n\t// within its own section and get pushed out by the next day's separator.\n\tconst dayGroups = useMemo(() => {\n\t\tconst groups: { createdAt: IMessage['createdAt']; indices: number[] }[] =\n\t\t\t[];\n\t\treversedMessages.forEach((message, index) => {\n\t\t\tconst previousMessage = reversedMessages[index - 1];\n\t\t\tif (index === 0 || !isSameDay(message, previousMessage)) {\n\t\t\t\tgroups.push({ createdAt: message.createdAt, indices: [index] });\n\t\t\t} else {\n\t\t\t\tgroups[groups.length - 1].indices.push(index);\n\t\t\t}\n\t\t});\n\t\treturn groups;\n\t}, [reversedMessages]);\n\n\tconst scrollToBottom = useScrollToBottom(scrollRef, scrollState);\n\n\tuseImperativeHandle(forwardedRef, () => scrollRef.current!);\n\n\tuseInitialMountScroll(\n\t\tscrollRef,\n\t\tscrollState,\n\t\treversedMessages.length,\n\t\tscrollToBottom,\n\t);\n\n\tuseScrollCleanup(scrollState);\n\n\tuseRestoreScrollPosition(scrollRef, scrollState, reversedMessages.length);\n\n\tuseAutoScrollOnNewMessages(\n\t\tscrollRef,\n\t\tscrollState,\n\t\tmessages.length,\n\t\tscrollToBottom,\n\t);\n\n\tuseResizeObserverForFirstMessage(\n\t\tmessages?.[0],\n\t\tscrollState,\n\t\tscrollToBottom,\n\t\tmessageIdGenerator,\n\t);\n\n\tconst handleScroll = useScrollHandler(\n\t\tscrollState,\n\t\tlistViewProps.onEndReached,\n\t\tlistViewProps.onScroll,\n\t\ttopThreshold,\n\t);\n\n\t// Check if a message belongs to the current user\n\tconst isUserMessage = useCallback(\n\t\t(message: IMessage) => {\n\t\t\treturn Boolean(message && user && message.user?._id === user._id);\n\t\t},\n\t\t[user],\n\t);\n\n\t// Determine if avatar should be shown for this message\n\tconst shouldShowAvatar = useCallback(\n\t\t(message: IMessage, previousMessage?: IMessage) => {\n\t\t\tif (!showUserAvatar) return false;\n\t\t\tif (showAvatarForEveryMessage) return true;\n\n\t\t\t// Show avatar on the first message in a consecutive sender stack,\n\t\t\t// or when an activity interrupts the stack, or when the current message itself is an activity\n\t\t\treturn (\n\t\t\t\t!previousMessage ||\n\t\t\t\t(isActivityMessage ? isActivityMessage(message) : false) ||\n\t\t\t\t(isActivityMessage ? isActivityMessage(previousMessage) : false) ||\n\t\t\t\tpreviousMessage.user._id !== message.user._id\n\t\t\t);\n\t\t},\n\t\t[showUserAvatar, showAvatarForEveryMessage, isActivityMessage],\n\t);\n\n\t// Render a message bubble (or call custom renderBubble)\n\tconst renderMessageBubble = useCallback(\n\t\t(message: IMessage, previousMessage?: IMessage, nextMessage?: IMessage) => {\n\t\t\tconst position = isUserMessage(message) ? 'right' : 'left';\n\t\t\tconst isTopOfStack = previousMessage?.user?._id !== message?.user?._id;\n\t\t\tconst isBottomOfStack = nextMessage?.user?._id !== message?.user?._id;\n\n\t\t\tconst bubbleProps: BubbleProps<IMessage> = {\n\t\t\t\tcurrentMessage: message,\n\t\t\t\tpreviousMessage,\n\t\t\t\tnextMessage,\n\t\t\t\tposition,\n\t\t\t\tuser,\n\t\t\t\t...extraProps,\n\t\t\t};\n\n\t\t\t// Use custom render function if provided\n\t\t\tif (renderBubble) {\n\t\t\t\treturn renderBubble(bubbleProps);\n\t\t\t}\n\n\t\t\t// Default bubble rendering\n\t\t\tconst messageId = message._id;\n\t\t\tconst isExpanded = expandedMessages.has(messageId);\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tmaxWidth: appType === GiftedChatAppType.Manifest ? '50%' : '70%',\n\t\t\t\t\t\twidth: 'fit-content',\n\t\t\t\t\t\t...(appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t? { minWidth: '130px' }\n\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\tpadding: '8px 12px',\n\t\t\t\t\t\tborderTopLeftRadius:\n\t\t\t\t\t\t\tposition === 'left' ? (isTopOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\t\tposition === 'right' ? (isTopOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\t\tposition === 'left' ? (isBottomOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\t\tposition === 'right' ? (isBottomOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborder:\n\t\t\t\t\t\t\tposition === 'left' && appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t? '1px solid rgb(224, 224, 224)'\n\t\t\t\t\t\t\t\t: 'none',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\tposition === 'right'\n\t\t\t\t\t\t\t\t? appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t? COLORS.background.brandTint\n\t\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t\t: appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t? COLORS.background.pureWhite\n\t\t\t\t\t\t\t\t: COLORS.background.inactive,\n\t\t\t\t\t\tcolor: COLORS.content.primary,\n\t\t\t\t\t\twordBreak: 'break-word',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<CollapsibleBubbleText\n\t\t\t\t\t\ttext={message.text ?? ''}\n\t\t\t\t\t\tisExpanded={isExpanded}\n\t\t\t\t\t\tonToggle={() =>\n\t\t\t\t\t\t\tsetExpandedMessages((prev) => {\n\t\t\t\t\t\t\t\tconst next = new Set(prev);\n\t\t\t\t\t\t\t\tif (isExpanded) next.delete(messageId);\n\t\t\t\t\t\t\t\telse next.add(messageId);\n\t\t\t\t\t\t\t\treturn next;\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t);\n\t\t},\n\t\t[isUserMessage, user, renderBubble, extraProps, expandedMessages],\n\t);\n\n\t// Render a message avatar (or call custom renderAvatar)\n\tconst renderMessageAvatar = useCallback(\n\t\t(message: IMessage, previousMessage?: IMessage, nextMessage?: IMessage) => {\n\t\t\tconst shouldShow = shouldShowAvatar(message, previousMessage);\n\n\t\t\tif (!shouldShow) return null;\n\n\t\t\tconst position = isUserMessage(message) ? 'right' : 'left';\n\n\t\t\tconst avatarProps: AvatarProps<IMessage> = {\n\t\t\t\tcurrentMessage: message,\n\t\t\t\tpreviousMessage,\n\t\t\t\tnextMessage,\n\t\t\t\tposition,\n\t\t\t\tuser,\n\t\t\t\trenderAvatarOnTop,\n\t\t\t\tshowUserAvatar,\n\t\t\t\tshowAvatarForEveryMessage,\n\t\t\t};\n\n\t\t\treturn renderAvatar ? renderAvatar(avatarProps) : null;\n\t\t},\n\t\t[\n\t\t\tshouldShowAvatar,\n\t\t\tisUserMessage,\n\t\t\tuser,\n\t\t\trenderAvatarOnTop,\n\t\t\tshowUserAvatar,\n\t\t\tshowAvatarForEveryMessage,\n\t\t\trenderAvatar,\n\t\t],\n\t);\n\n\t// Render: Empty State\n\tif (!messages || messages.length === 0) {\n\t\treturn renderChatEmpty ? <>{renderChatEmpty()}</> : null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={scrollRef as React.RefObject<HTMLDivElement>}\n\t\t\tstyle={{\n\t\t\t\tflex: 1,\n\t\t\t\toverflowY: 'auto',\n\t\t\t\toverflowX: 'hidden',\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tflexDirection: 'column',\n\t\t\t\t...(maxHeight ? { maxHeight, height: maxHeight } : {}),\n\t\t\t\t...listViewProps.style,\n\t\t\t}}\n\t\t\tonScroll={handleScroll}\n\t\t>\n\t\t\t{/* Spacer to push messages to bottom (newest appears last in DOM) */}\n\t\t\t<div style={{ flex: '1 0 auto' }} />\n\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tflex: '0 0 auto',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{dayGroups.map((group, groupIndex) => (\n\t\t\t\t\t<div key={`day-group-${groupIndex}`}>\n\t\t\t\t\t\t{/* Day separator — sticks to top while this day scrolls past */}\n\t\t\t\t\t\t{renderDay ? (\n\t\t\t\t\t\t\t<div style={{ position: 'sticky', top: 0, zIndex: 2 }}>\n\t\t\t\t\t\t\t\t{renderDay({ createdAt: group.createdAt })}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Day\n\t\t\t\t\t\t\t\tcreatedAt={group.createdAt}\n\t\t\t\t\t\t\t\tappType={appType}\n\t\t\t\t\t\t\t\tscrollRootRef={scrollRef}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{group.indices.map((index) => {\n\t\t\t\t\t\t\tconst message = reversedMessages[index];\n\t\t\t\t\t\t\tconst isSmtp =\n\t\t\t\t\t\t\t\tmessage?.['channelId'] === MESSAGE_CHANNELS.SMTP ||\n\t\t\t\t\t\t\t\tmessage?.['channelName'] === MESSAGE_CHANNELS.SMTP;\n\t\t\t\t\t\t\tconst position = isSmtp\n\t\t\t\t\t\t\t\t? 'left'\n\t\t\t\t\t\t\t\t: isUserMessage(message)\n\t\t\t\t\t\t\t\t? 'right'\n\t\t\t\t\t\t\t\t: 'left';\n\t\t\t\t\t\t\tconst previousMessage = reversedMessages[index - 1];\n\t\t\t\t\t\t\tconst nextMessage = reversedMessages[index + 1];\n\t\t\t\t\t\t\tconst placement = getMessagePlacement(message, position);\n\t\t\t\t\t\t\tconst isCentered = shouldCenterAlign(message);\n\t\t\t\t\t\t\t// Check if message is a private note\n\t\t\t\t\t\t\tconst isPrivateNote =\n\t\t\t\t\t\t\t\tmessage['category'] ===\n\t\t\t\t\t\t\t\t\tConstants.ChatActivity.Category.ACTIVITY &&\n\t\t\t\t\t\t\t\tmessage['activityType'] ===\n\t\t\t\t\t\t\t\t\tConstants.ChatActivity.Type.PRIVATE_NOTE;\n\t\t\t\t\t\t\tconst isActivity =\n\t\t\t\t\t\t\t\tmessage['category'] ===\n\t\t\t\t\t\t\t\t\tConstants.ChatActivity.Category.ACTIVITY && !isPrivateNote;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<React.Fragment\n\t\t\t\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\t\t\t\tmessage._id ?? `${index}-${messageIdGenerator?.() ?? 'id'}`\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{/* Message container */}\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t...(isMobile ? { margin: '0 4px' } : {}),\n\t\t\t\t\t\t\t\t\t\t\t...(isCentered\n\t\t\t\t\t\t\t\t\t\t\t\t? {}\n\t\t\t\t\t\t\t\t\t\t\t\t: { display: 'flex', alignItems: 'flex-start' }),\n\t\t\t\t\t\t\t\t\t\t\t...(appType !== GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t\t\t\t? !isMobile && position === 'right'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { marginLeft: 8 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: { marginRight: 8 }\n\t\t\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t\t\t\t...(isSmtp && !isPrivateNote && isMobile\n\t\t\t\t\t\t\t\t\t\t\t\t? { marginLeft: 8, marginRight: 8 }\n\t\t\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t\t\t\t...(isSmtp && isPrivateNote\n\t\t\t\t\t\t\t\t\t\t\t\t? { marginRight: 16 }\n\t\t\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t\t\t\tjustifyContent: placement,\n\t\t\t\t\t\t\t\t\t\t\tmarginBottom: isSmtp\n\t\t\t\t\t\t\t\t\t\t\t\t? // SMTP: flat 24px between mails, no same/different-user split.\n\t\t\t\t\t\t\t\t\t\t\t\t nextMessage\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 24\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 0\n\t\t\t\t\t\t\t\t\t\t\t\t: nextMessage\n\t\t\t\t\t\t\t\t\t\t\t\t? nextMessage?.user?._id === message?.user?._id\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 4\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 20\n\t\t\t\t\t\t\t\t\t\t\t\t: 0,\n\t\t\t\t\t\t\t\t\t\t\t// Activity cards: no left/bottom margin.\n\t\t\t\t\t\t\t\t\t\t\t...(isActivity ? { marginLeft: 0, marginBottom: 0 } : {}),\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{/* Left avatar or placeholder (for mobile, avatar is hidden) */}\n\t\t\t\t\t\t\t\t\t\t{!isMobile && position === 'left' && (\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tmarginRight: '4px',\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{renderMessageAvatar(\n\t\t\t\t\t\t\t\t\t\t\t\t\tmessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tpreviousMessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextMessage,\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t\t\t{/* Message bubble */}\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tid={`message-bubble-${\n\t\t\t\t\t\t\t\t\t\t\t\tmessage._id ??\n\t\t\t\t\t\t\t\t\t\t\t\t`${index}-${messageIdGenerator?.() ?? 'id'}`\n\t\t\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\t\t\tappType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { width: '100%' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: isMobile || isSmtp\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { display: 'flex', flexGrow: 1, width: '100%' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: {}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{renderMessageBubble(\n\t\t\t\t\t\t\t\t\t\t\t\tmessage,\n\t\t\t\t\t\t\t\t\t\t\t\tpreviousMessage,\n\t\t\t\t\t\t\t\t\t\t\t\tnextMessage,\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t\t\t{/* Right avatar or placeholder (for mobile, avatar is hidden) */}\n\t\t\t\t\t\t\t\t\t\t{!isMobile && position === 'right' && (\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tmarginLeft: '4px',\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\talignSelf: 'flex-start',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{renderMessageAvatar(\n\t\t\t\t\t\t\t\t\t\t\t\t\tmessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tpreviousMessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextMessage,\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</React.Fragment>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default forwardRef<HTMLDivElement, GiftedChatProps<IMessage>>(\n\tGiftedChatInner,\n);\n"],"names":["COLLAPSED_MAX_HEIGHT","CollapsibleBubbleText","text","isExpanded","onToggle","textRef","useRef","isOverflowing","setIsOverflowing","useState","useEffect","el","overflows","jsxs","Fragment","jsx","BodySecondary","Button","GiftedChatInner","props","forwardedRef","messages","user","renderBubble","renderAvatar","renderDay","renderLoading","renderChatEmpty","listViewProps","renderAvatarOnTop","showUserAvatar","showAvatarForEveryMessage","inverted","messageIdGenerator","topThreshold","TOP_THRESHOLD","appType","GiftedChatAppType","maxHeight","isActivityMessage","extraProps","isMobile","useWindowSize","internalScrollRef","scrollRef","normalizeRef","scrollState","expandedMessages","setExpandedMessages","reversedMessages","useMemo","dayGroups","groups","message","index","previousMessage","isSameDay","scrollToBottom","useScrollToBottom","useImperativeHandle","useInitialMountScroll","useScrollCleanup","useRestoreScrollPosition","useAutoScrollOnNewMessages","useResizeObserverForFirstMessage","handleScroll","useScrollHandler","isUserMessage","useCallback","shouldShowAvatar","renderMessageBubble","nextMessage","position","isTopOfStack","isBottomOfStack","bubbleProps","messageId","COLORS","prev","next","renderMessageAvatar","group","groupIndex","Day","isSmtp","MESSAGE_CHANNELS","placement","getMessagePlacement","isCentered","shouldCenterAlign","isPrivateNote","Constants","isActivity","React","GiftedChat","forwardRef"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("styled-components"),n=require("../../constants/Theme.js"),e=require("./themes.js"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},d=a(o),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("styled-components"),n=require("../../constants/Theme.js"),e=require("./themes.js"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},d=a(o),l=d.default.button`
|
|
2
2
|
all: unset;
|
|
3
3
|
outline: none;
|
|
4
4
|
cursor: pointer;
|
|
@@ -113,11 +113,6 @@
|
|
|
113
113
|
.text {
|
|
114
114
|
opacity: 0;
|
|
115
115
|
}
|
|
116
|
-
.icon-leading,
|
|
117
|
-
.icon-component,
|
|
118
|
-
.icon-trailing {
|
|
119
|
-
opacity: 0;
|
|
120
|
-
}
|
|
121
116
|
${t.buttonColor?`background-color: ${e.getLoadingButtonBackgroundCustom(t.buttonColor,15)};`:""}
|
|
122
117
|
padding: ${e.getPadding(t.buttonType,t.size)};
|
|
123
118
|
.overlay-container {
|
|
@@ -167,5 +162,5 @@
|
|
|
167
162
|
gap: 8.33px;
|
|
168
163
|
${t=>t.matchParentWidth?"margin: auto;":""}
|
|
169
164
|
}
|
|
170
|
-
`,
|
|
165
|
+
`,r=()=>i.jsxs(i.Fragment,{children:[i.jsx("div",{className:"line-top"}),i.jsx("div",{className:"line-left"}),i.jsx("div",{className:"line-bottom"}),i.jsx("div",{className:"line-right"})]});exports.Button=l;exports.ButtonCustomDashedBorder=r;
|
|
171
166
|
//# sourceMappingURL=Button.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' | '2.0' | '3.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n}>`\n\tall: unset;\n\toutline: none;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8.83px;\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' || props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'special'\n\t\t\t\t\t\t? `background-color: ${COLORS.background.brandLight};`\n\t\t\t\t\t\t: props.buttonType === 'secondaryGray'\n\t\t\t\t\t\t? `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\tprops.size !== 'xs' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t.icon-leading,\n\t\t\t.icon-component,\n\t\t\t.icon-trailing {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tline-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: 8.33px;\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","styled","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingButtonBackgroundCustom","getLoadingBackground","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxs","Fragment","jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' | '2.0' | '3.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n}>`\n\tall: unset;\n\toutline: none;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8.83px;\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' || props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' || props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'special'\n\t\t\t\t\t\t? `background-color: ${COLORS.background.brandLight};`\n\t\t\t\t\t\t: props.buttonType === 'secondaryGray'\n\t\t\t\t\t\t? `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\tprops.size !== 'xs' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tline-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: 8.33px;\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","styled","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingButtonBackgroundCustom","getLoadingBackground","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxs","Fragment","jsx"],"mappings":"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"}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),O=(t,n,e,o,a)=>{if(t==="special")return r.COLORS.background.brandVeryLight;if(t==="secondaryGray")return"transparent";if(n==="chip")return t==="text"?"transparent":o?r.COLORS.surface.hovered:r.COLORS.surface.subdued;switch(t){case"primary":return a||(e?r.COLORS.background.warning.vibrant:r.COLORS.background.inverseLight);case"destructive":return r.COLORS.background.negative.vibrant;case"tertiary":return"transparent";default:return"transparent"}},l=(t,n,e,o)=>{if(t==="special")return r.COLORS.background.inverseLight;if(t==="secondaryGray")return r.COLORS.content.secondary;if(n==="chip")return t==="text"?e?r.COLORS.content.inactive:r.COLORS.content.brand:o?r.COLORS.content.primary:r.COLORS.content.secondary;switch(t){case"primary":return e?r.COLORS.content.primary:r.COLORS.content.primaryInverse;case"tertiaryGray":return r.COLORS.content.secondary;case"destructive":return r.COLORS.content.primaryInverse;case"dashBold":return r.COLORS.content.secondary;case"dashRegular":return r.COLORS.content.secondary;case"ai":return r.COLORS.content.ai;default:return e?r.COLORS.content.primaryInverse:r.COLORS.stroke.brand}},L=t=>t?"rgba(255, 255, 255, 0.5)":r.COLORS.content.inactive,f=(t,n)=>{if(t==="text")return"0px";if(n==="xs")return"4px 6px";if(n==="chip")return"4px 8px";if(n==="small")switch(t){case"tertiary":return"6px 4px";case"tertiaryGray":return"6px 4px";default:return"6px 12px"}else if(n==="medium")switch(t){case"tertiary":return"10px 4px";case"tertiaryGray":return"10px 4px";default:return"10px 12px"}else if(n==="large")switch(t){case"tertiary":return"14px 4px";case"tertiaryGray":return"14px 4px";default:return"14px 12px"}},b=(t,n,e)=>!e&&n==="ai"?t==="small"?i.ButtonRegularAI:i.ButtonLargeAI:n==="dashRegular"?i.BodySecondary:t==="chip"||t==="xs"?i.BodyCaption:t==="small"?i.ButtonRegular:i.ButtonLarge,d=(t,n,e)=>e?r.COLORS.stroke.negative.vibrant:n?r.COLORS.surface.standard:t=="secondary"?r.COLORS.stroke.brand:r.COLORS.content.placeholder,p=(t,n,e,o,a)=>n=="text"?"border: none;":n==="special"?`border: 1px solid ${r.COLORS.stroke.brandLightAlt};`:n==="secondaryGray"?`border: 1px solid ${r.COLORS.stroke.primary};`:e==="chip"?`border: ${t==="2.0"?.5:1}px solid ${r.COLORS.stroke.primary};`:o?n==="secondary"?`border: ${t==="2.0"?.5:1}px solid ${d(n,o,a)};`:"border: none;":n==="secondary"?`border: ${t==="2.0"?.5:1}px solid ${d(n,!1,a)};`:"border: none;",u=t=>t==="medium"?`5px,
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),O=(t,n,e,o,a)=>{if(t==="special")return r.COLORS.background.brandVeryLight;if(t==="secondaryGray")return"transparent";if(n==="chip")return t==="text"?"transparent":o?r.COLORS.surface.hovered:r.COLORS.surface.subdued;switch(t){case"primary":return a||(e?r.COLORS.background.warning.vibrant:r.COLORS.background.inverseLight);case"destructive":return r.COLORS.background.negative.vibrant;case"tertiary":return"transparent";default:return"transparent"}},l=(t,n,e,o)=>{if(t==="special")return r.COLORS.background.inverseLight;if(t==="secondaryGray")return r.COLORS.content.secondary;if(n==="chip")return t==="text"?e?r.COLORS.content.inactive:r.COLORS.content.brand:o?r.COLORS.content.primary:r.COLORS.content.secondary;switch(t){case"primary":return e?r.COLORS.content.primary:r.COLORS.content.primaryInverse;case"tertiaryGray":return r.COLORS.content.secondary;case"destructive":return r.COLORS.content.primaryInverse;case"dashBold":return r.COLORS.content.secondary;case"dashRegular":return r.COLORS.content.secondary;case"ai":return r.COLORS.content.ai;default:return e?r.COLORS.content.primaryInverse:r.COLORS.stroke.brand}},L=t=>t?"rgba(255, 255, 255, 0.5)":r.COLORS.content.inactive,f=(t,n)=>{if(t==="text")return"0px";if(n==="xs")return t==="secondary"||t==="special"||t==="secondaryGray"?"3px 6px":"4px 6px";if(n==="chip")return"4px 8px";if(n==="small")switch(t){case"tertiary":return"6px 4px";case"tertiaryGray":return"6px 4px";default:return"6px 12px"}else if(n==="medium")switch(t){case"tertiary":return"10px 4px";case"tertiaryGray":return"10px 4px";default:return"10px 12px"}else if(n==="large")switch(t){case"tertiary":return"14px 4px";case"tertiaryGray":return"14px 4px";default:return"14px 12px"}},b=(t,n,e)=>!e&&n==="ai"?t==="small"?i.ButtonRegularAI:i.ButtonLargeAI:n==="dashRegular"?i.BodySecondary:t==="chip"||t==="xs"?i.BodyCaption:t==="small"?i.ButtonRegular:i.ButtonLarge,d=(t,n,e)=>e?r.COLORS.stroke.negative.vibrant:n?r.COLORS.surface.standard:t=="secondary"?r.COLORS.stroke.brand:r.COLORS.content.placeholder,p=(t,n,e,o,a)=>n=="text"?"border: none;":n==="special"?`border: 1px solid ${r.COLORS.stroke.brandLightAlt};`:n==="secondaryGray"?`border: 1px solid ${r.COLORS.stroke.primary};`:e==="chip"?`border: ${t==="2.0"?.5:1}px solid ${r.COLORS.stroke.primary};`:o?n==="secondary"?`border: ${t==="2.0"?.5:1}px solid ${d(n,o,a)};`:"border: none;":n==="secondary"?`border: ${t==="2.0"?.5:1}px solid ${d(n,!1,a)};`:"border: none;",u=t=>t==="medium"?`5px,
|
|
2
2
|
transparent 5px,
|
|
3
3
|
transparent 10px`:`6px,
|
|
4
4
|
transparent 6px,
|
|
5
5
|
transparent 12px`,S=(t,n)=>{const e=parseInt(t.replace("#",""),16),o=Math.round(2.55*n),a=(e>>16)-o,c=(e>>8&255)-o,s=(e&255)-o;return`#${(16777216+(Math.max(a,0)<<16)+(Math.max(c,0)<<8)+Math.max(s,0)).toString(16).slice(1)}`},g=(t,n)=>{const e=parseInt(t.replace("#",""),16),o=Math.round(2.55*n),a=(e>>16)+o,c=(e>>8&255)+o,s=(e&255)+o;return`#${(16777216+(Math.min(a,255)<<16)+(Math.min(c,255)<<8)+Math.min(s,255)).toString(16).slice(1)}`},C=(t,n)=>t==="ai"?`background: ${r.COLORS.surface.aiLight};`:t==="text"?"background-color:transparent;":t==="special"||t==="secondaryGray"?"":!n&&t!=="primary"?`background-color: #000000;
|
|
6
6
|
opacity: 0.03;`:"",R=(t,n)=>n?"":`text-decoration-line: underline;
|
|
7
|
-
text-decoration-color: ${r.COLORS.content.brand};`,x=(t,n)=>n?"":t==="primary"?`background-color: ${r.COLORS.stroke.warning.lightAlt};`:"background-color: rgba(255, 255, 255, 0.1)",
|
|
7
|
+
text-decoration-color: ${r.COLORS.content.brand};`,x=(t,n)=>n?"":t==="primary"?`background-color: ${r.COLORS.stroke.warning.lightAlt};`:"background-color: rgba(255, 255, 255, 0.1)",h=(t,n,e)=>t==="special"?`background-color: ${r.COLORS.background.base}; border: 1px solid ${r.COLORS.stroke.primary};`:t==="secondaryGray"?`border: 1px solid ${r.COLORS.stroke.primary};`:n==="chip"?"background-color: transparent;":t==="primary"||t==="destructive"?e?"background-color: rgba(255,255,255,0.3);":`background-color: ${r.COLORS.background.inactive};`:t==="secondary"?e?"border: 1px solid rgba(255, 255, 255, 0.5);":`border: 1px solid ${r.COLORS.stroke.primary};`:"",k=(t,n,e=d(t,!1))=>`
|
|
8
8
|
.line-top {
|
|
9
9
|
position: absolute;
|
|
10
10
|
left: 0;
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
text-decoration-color: ${r.COLORS.content.brand};`;if(t==="special")return`background-color: ${r.COLORS.background.brandLight}; border: 1px solid ${r.COLORS.stroke.brandLightAlt};`;if(t==="secondaryGray")return`background-color: ${r.COLORS.surface.hovered}; border: 1px solid ${r.COLORS.stroke.primary};`;if(n==="chip")return`border: 1px solid ${r.COLORS.stroke.brandLightAlt};
|
|
63
63
|
background-color: ${r.COLORS.background.brandLight};`;if(t==="primary"||t==="destructive")return e?`background-color: ${r.COLORS.background.warning.vibrant} !important;
|
|
64
64
|
box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);
|
|
65
|
-
`:"box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);";if(t==="secondary"||t==="tertiary"||t==="tertiaryGray"||t.startsWith("dash"))return e?`background-color: ${r.COLORS.background.inverseLight} !important;`:`background-color: ${r.COLORS.background.brandLight};`},y=(t,n,e,o)=>t==="special"?`background-color: ${r.COLORS.background.brandVeryLight};`:t==="secondaryGray"?`background-color: ${r.COLORS.surface.subdued};`:n==="chip"?`background-color: ${r.COLORS.background.base};`:t==="primary"?o?`background-color: ${g(o,50)};`:`background-color: ${e?r.COLORS.background.warning.vibrant:r.COLORS.background.brandLight};`:t==="destructive"?`background-color: ${r.COLORS.background.negative.light};`:"background-color: transparent;",$=(t,n,e)=>t==="special"?`border: 1px solid ${r.COLORS.stroke.brandLightAlt};`:t==="secondaryGray"?`border: 1px solid ${r.COLORS.stroke.primary};`:n==="chip"?"border: none;":t==="secondary"?e?`border: 1px solid ${r.COLORS.content.secondary};`:`border: 1px solid ${r.COLORS.stroke.brandLightAlt};`:"",
|
|
65
|
+
`:"box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);";if(t==="secondary"||t==="tertiary"||t==="tertiaryGray"||t.startsWith("dash"))return e?`background-color: ${r.COLORS.background.inverseLight} !important;`:`background-color: ${r.COLORS.background.brandLight};`},y=(t,n,e,o)=>t==="special"?`background-color: ${r.COLORS.background.brandVeryLight};`:t==="secondaryGray"?`background-color: ${r.COLORS.surface.subdued};`:n==="chip"?`background-color: ${r.COLORS.background.base};`:t==="primary"?o?`background-color: ${g(o,50)};`:`background-color: ${e?r.COLORS.background.warning.vibrant:r.COLORS.background.brandLight};`:t==="destructive"?`background-color: ${r.COLORS.background.negative.light};`:"background-color: transparent;",$=(t,n,e)=>t==="special"?`border: 1px solid ${r.COLORS.stroke.brandLightAlt};`:t==="secondaryGray"?`border: 1px solid ${r.COLORS.stroke.primary};`:n==="chip"?"border: none;":t==="secondary"?e?`border: 1px solid ${r.COLORS.content.secondary};`:`border: 1px solid ${r.COLORS.stroke.brandLightAlt};`:"",B=(t,n)=>t==="secondaryGray"?r.COLORS.content.secondary:n?t==="primary"?r.COLORS.content.primary:r.COLORS.content.primaryInverse:t==="destructive"?r.COLORS.content.negative:r.COLORS.content.brand,v=(t,n,e,o,a,c)=>{if(t==="chip")return o?r.COLORS.content.inactive:c?r.COLORS.content.primary:r.COLORS.content.secondary;if(a)return"transparent";if(n==="special")return o?r.COLORS.content.inactive:r.COLORS.background.inverseLight;if(n==="secondaryGray")return o?r.COLORS.content.inactive:r.COLORS.content.secondary;if(n==="primary"||n==="destructive")return e?o?"rgba(255, 255, 255, 0.5)":r.COLORS.content.primary:o?r.COLORS.content.inactive:r.COLORS.content.primaryInverse;if(n==="secondary")return e?o?"rgba(255, 255, 255, 0.5)":r.COLORS.content.primaryInverse:o?r.COLORS.content.inactive:r.COLORS.content.brand;if(n==="tertiary")return e?o?"rgba(255, 255, 255, 0.5)":r.COLORS.content.primaryInverse:o?r.COLORS.content.inactive:r.COLORS.content.brand;if(n==="tertiaryGray"||n.startsWith("dash"))return o?r.COLORS.content.inactive:r.COLORS.content.secondary};exports.GetButtonTextComponent=b;exports.SpinnerColorMap=B;exports.generateDisabledStyling=h;exports.generateInverseHoverBackground=x;exports.getBackgroundColor=O;exports.getBorder=p;exports.getBorderColor=d;exports.getButtonIconColor=v;exports.getClickEffect=m;exports.getColor=l;exports.getDashedBorderStyling=k;exports.getDisabledTextColor=L;exports.getHoverButtonBackground=C;exports.getHoverButtonBackgroundCustom=S;exports.getHoverButtonTextDecorationStyle=R;exports.getLinearGradientValue=u;exports.getLoadingBackground=y;exports.getLoadingBorder=$;exports.getLoadingButtonBackgroundCustom=g;exports.getPadding=f;
|
|
66
66
|
//# sourceMappingURL=themes.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themes.js","sources":["../../../../src/components/button/themes.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tButtonLarge,\n\tButtonLargeAI,\n\tButtonRegular,\n\tButtonRegularAI,\n} from '../TypographyStyle';\nimport { Size, Type } from './model';\n\nexport const getBackgroundColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n\tbuttonColor?: string,\n): string => {\n\tif (type === 'special') return COLORS.background.brandVeryLight;\n\tif (type === 'secondaryGray') return 'transparent';\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn 'transparent';\n\t\t}\n\t\treturn darkMode ? COLORS.surface.hovered : COLORS.surface.subdued;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn buttonColor\n\t\t\t\t? buttonColor\n\t\t\t\t: inverse\n\t\t\t\t? COLORS.background.warning.vibrant\n\t\t\t\t: COLORS.background.inverseLight;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.background.negative.vibrant;\n\t\tcase 'tertiary':\n\t\t\treturn 'transparent';\n\t\tdefault:\n\t\t\treturn 'transparent';\n\t}\n};\n\nexport const getColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n): string => {\n\tif (type === 'special') return COLORS.background.inverseLight;\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn inverse ? COLORS.content.inactive : COLORS.content.brand;\n\t\t}\n\t\treturn darkMode ? COLORS.content.primary : COLORS.content.secondary;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn inverse ? COLORS.content.primary : COLORS.content.primaryInverse;\n\t\tcase 'tertiaryGray':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.content.primaryInverse;\n\t\tcase 'dashBold':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'dashRegular':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'ai':\n\t\t\treturn COLORS.content.ai;\n\t\tdefault:\n\t\t\treturn inverse ? COLORS.content.primaryInverse : COLORS.stroke.brand;\n\t}\n};\n\nexport const getDisabledTextColor = (inverse?: boolean) => {\n\tif (inverse) {\n\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t}\n\treturn COLORS.content.inactive;\n};\n\nexport const getPadding = (type: Type, size: Size) => {\n\tif (type === 'text') {\n\t\treturn '0px';\n\t} else if (size === 'xs') {\n\t\treturn '4px 6px';\n\t} else if (size === 'chip') {\n\t\treturn '4px 8px';\n\t} else if (size === 'small') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '6px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '6px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '6px 12px';\n\t\t}\n\t} else if (size === 'medium') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '10px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '10px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '10px 12px';\n\t\t}\n\t} else if (size === 'large') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '14px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '14px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '14px 12px';\n\t\t}\n\t}\n};\nexport const GetButtonTextComponent = (\n\tsize: Size,\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (!disabled && type === 'ai') {\n\t\tif (size === 'small') {\n\t\t\treturn ButtonRegularAI;\n\t\t} else {\n\t\t\treturn ButtonLargeAI;\n\t\t}\n\t}\n\n\tif (type === 'dashRegular') {\n\t\treturn BodySecondary;\n\t}\n\tif (size === 'chip' || size === 'xs') {\n\t\treturn BodyCaption;\n\t} else if (size === 'small') {\n\t\treturn ButtonRegular;\n\t}\n\treturn ButtonLarge;\n};\n\nexport const getBorderColor = (\n\ttype: Type,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (error) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\n\tif (inverse) {\n\t\treturn COLORS.surface.standard;\n\t}\n\tif (type == 'secondary') {\n\t\treturn COLORS.stroke.brand;\n\t}\n\treturn COLORS.content.placeholder;\n};\n\nexport const getBorder = (\n\tversion: '1.0' | '2.0' | '3.0',\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (type == 'text') {\n\t\treturn 'border: none;';\n\t}\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${\n\t\t\tCOLORS.stroke.primary\n\t\t};`;\n\t}\n\tif (inverse) {\n\t\tif (type === 'secondary') {\n\t\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\t\ttype,\n\t\t\t\tinverse,\n\t\t\t\terror,\n\t\t\t)};`;\n\t\t}\n\t\treturn 'border: none;';\n\t}\n\n\tif (type === 'secondary') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\ttype,\n\t\t\tfalse,\n\t\t\terror,\n\t\t)};`;\n\t}\n\treturn 'border: none;';\n};\n\nexport const getLinearGradientValue = (size: Size): string => {\n\tif (size === 'medium') {\n\t\treturn `5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px`;\n\t}\n\treturn `6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px`;\n};\n\n/**\n * Adjusts the brightness of a given hex color by a specified percentage.\n * Below function is used to generate a hover effect for button backgrounds.\n *\n * @param {string} color - The hex color code to be adjusted (e.g., \"#ff0000\").\n * @param {number} percent - The percentage by which to darken the color. Positive values darken the color.\n * @returns {string} - The adjusted hex color code.\n *\n * @example\n * // Darken the color #ff0000 (red) by 10%\n * const darkerRed = getHoverButtonBackgroundCustom(\"#ff0000\", 10);\n * console.log(darkerRed); // Output might be \"#e60000\"\n */\n\nexport const getHoverButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 * percent),\n\t\tR = (num >> 16) - amt,\n\t\tG = ((num >> 8) & 0x00ff) - amt,\n\t\tB = (num & 0x0000ff) - amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.max(R, 0) << 16) +\n\t\t(Math.max(G, 0) << 8) +\n\t\tMath.max(B, 0)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\n/**\n * Generates a new color by adjusting the brightness of the given color by a specified percentage.\n *\n * @param color - The original color in hexadecimal format (e.g., \"#RRGGBB\").\n * @param percent - The percentage to adjust the brightness. Positive values will lighten the color, while negative values will darken it.\n * @returns The new color in hexadecimal format after adjusting the brightness.\n *\n * @example\n * // Lighten the color by 20%\n * const newColor = getLoadingButtonBackgroundCustom(\"#ff0000\", 20); // \"#ff3333\"\n *\n * @example\n * // Darken the color by 10%\n * const newColor = getLoadingButtonBackgroundCustom(\"#00ff00\", -10); // \"#00e600\"\n */\nexport const getLoadingButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 * percent),\n\t\tR = (num >> 16) + amt,\n\t\tG = ((num >> 8) & 0x00ff) + amt,\n\t\tB = (num & 0x0000ff) + amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.min(R, 255) << 16) +\n\t\t(Math.min(G, 255) << 8) +\n\t\tMath.min(B, 255)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\nexport const getHoverButtonBackground = (type: Type, inverse?: boolean) => {\n\tif (type === 'ai') {\n\t\treturn `background: ${COLORS.surface.aiLight};`;\n\t}\n\n\tif (type === 'text') {\n\t\treturn `background-color:transparent;`;\n\t}\n\tif (type === 'special' || type === 'secondaryGray') {\n\t\treturn '';\n\t}\n\tif (!inverse && type !== 'primary') {\n\t\treturn `background-color: #000000;\n\t\t\t\topacity: 0.03;`;\n\t}\n\n\treturn ``;\n};\n\nexport const getHoverButtonTextDecorationStyle = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\treturn `text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n};\n\nexport const generateInverseHoverBackground = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\tif (type === 'primary') {\n\t\treturn `background-color: ${COLORS.stroke.warning.lightAlt};`;\n\t}\n\treturn `background-color: rgba(255, 255, 255, 0.1)`;\n};\n\nexport const generateDisabledStyling = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.base}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: transparent;`;\n\t}\n\tif (type === 'primary' || type === 'destructive') {\n\t\treturn inverse\n\t\t\t? 'background-color: rgba(255,255,255,0.3);'\n\t\t\t: `background-color: ${COLORS.background.inactive};`;\n\t} else if (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid rgba(255, 255, 255, 0.5);`\n\t\t\t: `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\treturn '';\n};\n\nexport const getDashedBorderStyling = (\n\ttype: Type,\n\tsize: Size,\n\tborderColor: string = getBorderColor(type, false),\n) => {\n\treturn `\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t`;\n};\n\nexport const getClickEffect = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'text') {\n\t\treturn `background-color: ${COLORS.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n\t}\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandLight}; border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.hovered}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};\n\t\tbackground-color: ${COLORS.background.brandLight};`;\n\t}\n\tif (type === 'primary' || type === 'destructive') {\n\t\tif (inverse) {\n\t\t\treturn `background-color: ${COLORS.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`;\n\t\t}\n\t\treturn 'box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);';\n\t} else if (\n\t\ttype === 'secondary' ||\n\t\ttype === 'tertiary' ||\n\t\ttype === 'tertiaryGray' ||\n\t\ttype.startsWith('dash')\n\t) {\n\t\treturn inverse\n\t\t\t? `background-color: ${COLORS.background.inverseLight} !important;`\n\t\t\t: `background-color: ${COLORS.background.brandLight};`;\n\t}\n};\nexport const getLoadingBackground = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tbuttonColor?: string,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandVeryLight};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.subdued};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: ${COLORS.background.base};`;\n\t}\n\tif (type === 'primary') {\n\t\tif (buttonColor) {\n\t\t\treturn `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\tbuttonColor,\n\t\t\t\t50,\n\t\t\t)};`;\n\t\t}\n\t\treturn `background-color: ${\n\t\t\tinverse ? COLORS.background.warning.vibrant : COLORS.background.brandLight\n\t\t};`;\n\t}\n\tif (type === 'destructive') {\n\t\treturn `background-color: ${COLORS.background.negative.light};`;\n\t}\n\treturn 'background-color: transparent;';\n};\n\nexport const getLoadingBorder = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: none;`;\n\t}\n\tif (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid ${COLORS.content.secondary};`\n\t\t\t: `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\treturn '';\n};\n\nexport const SpinnerColorMap = (type: Type, inverse?: boolean) => {\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\tif (inverse) {\n\t\tif (type === 'primary') {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t}\n\tif (type === 'destructive') {\n\t\treturn COLORS.content.negative;\n\t}\n\treturn COLORS.content.brand;\n};\n\nexport const getButtonIconColor = (\n\tsize: Size,\n\ttype: Type,\n\tinverse?: boolean,\n\tdisabled?: boolean,\n\tisLoading?: boolean,\n\tdarkMode?: boolean,\n) => {\n\tif (size === 'chip') {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t} else if (darkMode) {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n\tif (isLoading) {\n\t\treturn 'transparent';\n\t}\n\tif (type === 'special') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.background.inverseLight;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.content.secondary;\n\t}\n\tif (type === 'primary' || type === 'destructive') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t} else if (type === 'secondary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiaryGray' || type.startsWith('dash')) {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n};\n"],"names":["getBackgroundColor","type","size","inverse","darkMode","buttonColor","COLORS","getColor","getDisabledTextColor","getPadding","GetButtonTextComponent","disabled","ButtonRegularAI","ButtonLargeAI","BodySecondary","BodyCaption","ButtonRegular","ButtonLarge","getBorderColor","error","getBorder","version","getLinearGradientValue","getHoverButtonBackgroundCustom","color","percent","num","amt","R","G","B","getLoadingButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","generateDisabledStyling","getDashedBorderStyling","borderColor","getClickEffect","getLoadingBackground","getLoadingBorder","SpinnerColorMap","getButtonIconColor","isLoading"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"themes.js","sources":["../../../../src/components/button/themes.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tButtonLarge,\n\tButtonLargeAI,\n\tButtonRegular,\n\tButtonRegularAI,\n} from '../TypographyStyle';\nimport { Size, Type } from './model';\n\nexport const getBackgroundColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n\tbuttonColor?: string,\n): string => {\n\tif (type === 'special') return COLORS.background.brandVeryLight;\n\tif (type === 'secondaryGray') return 'transparent';\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn 'transparent';\n\t\t}\n\t\treturn darkMode ? COLORS.surface.hovered : COLORS.surface.subdued;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn buttonColor\n\t\t\t\t? buttonColor\n\t\t\t\t: inverse\n\t\t\t\t? COLORS.background.warning.vibrant\n\t\t\t\t: COLORS.background.inverseLight;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.background.negative.vibrant;\n\t\tcase 'tertiary':\n\t\t\treturn 'transparent';\n\t\tdefault:\n\t\t\treturn 'transparent';\n\t}\n};\n\nexport const getColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n): string => {\n\tif (type === 'special') return COLORS.background.inverseLight;\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn inverse ? COLORS.content.inactive : COLORS.content.brand;\n\t\t}\n\t\treturn darkMode ? COLORS.content.primary : COLORS.content.secondary;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn inverse ? COLORS.content.primary : COLORS.content.primaryInverse;\n\t\tcase 'tertiaryGray':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.content.primaryInverse;\n\t\tcase 'dashBold':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'dashRegular':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'ai':\n\t\t\treturn COLORS.content.ai;\n\t\tdefault:\n\t\t\treturn inverse ? COLORS.content.primaryInverse : COLORS.stroke.brand;\n\t}\n};\n\nexport const getDisabledTextColor = (inverse?: boolean) => {\n\tif (inverse) {\n\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t}\n\treturn COLORS.content.inactive;\n};\n\nexport const getPadding = (type: Type, size: Size) => {\n\tif (type === 'text') {\n\t\treturn '0px';\n\t} else if (size === 'xs') {\n\t\tconst hasBorder =\n\t\t\ttype === 'secondary' || type === 'special' || type === 'secondaryGray';\n\t\treturn hasBorder ? '3px 6px' : '4px 6px';\n\t} else if (size === 'chip') {\n\t\treturn '4px 8px';\n\t} else if (size === 'small') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '6px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '6px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '6px 12px';\n\t\t}\n\t} else if (size === 'medium') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '10px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '10px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '10px 12px';\n\t\t}\n\t} else if (size === 'large') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '14px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '14px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '14px 12px';\n\t\t}\n\t}\n};\nexport const GetButtonTextComponent = (\n\tsize: Size,\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (!disabled && type === 'ai') {\n\t\tif (size === 'small') {\n\t\t\treturn ButtonRegularAI;\n\t\t} else {\n\t\t\treturn ButtonLargeAI;\n\t\t}\n\t}\n\n\tif (type === 'dashRegular') {\n\t\treturn BodySecondary;\n\t}\n\tif (size === 'chip' || size === 'xs') {\n\t\treturn BodyCaption;\n\t} else if (size === 'small') {\n\t\treturn ButtonRegular;\n\t}\n\treturn ButtonLarge;\n};\n\nexport const getBorderColor = (\n\ttype: Type,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (error) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\n\tif (inverse) {\n\t\treturn COLORS.surface.standard;\n\t}\n\tif (type == 'secondary') {\n\t\treturn COLORS.stroke.brand;\n\t}\n\treturn COLORS.content.placeholder;\n};\n\nexport const getBorder = (\n\tversion: '1.0' | '2.0' | '3.0',\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (type == 'text') {\n\t\treturn 'border: none;';\n\t}\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${\n\t\t\tCOLORS.stroke.primary\n\t\t};`;\n\t}\n\tif (inverse) {\n\t\tif (type === 'secondary') {\n\t\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\t\ttype,\n\t\t\t\tinverse,\n\t\t\t\terror,\n\t\t\t)};`;\n\t\t}\n\t\treturn 'border: none;';\n\t}\n\n\tif (type === 'secondary') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\ttype,\n\t\t\tfalse,\n\t\t\terror,\n\t\t)};`;\n\t}\n\treturn 'border: none;';\n};\n\nexport const getLinearGradientValue = (size: Size): string => {\n\tif (size === 'medium') {\n\t\treturn `5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px`;\n\t}\n\treturn `6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px`;\n};\n\n/**\n * Adjusts the brightness of a given hex color by a specified percentage.\n * Below function is used to generate a hover effect for button backgrounds.\n *\n * @param {string} color - The hex color code to be adjusted (e.g., \"#ff0000\").\n * @param {number} percent - The percentage by which to darken the color. Positive values darken the color.\n * @returns {string} - The adjusted hex color code.\n *\n * @example\n * // Darken the color #ff0000 (red) by 10%\n * const darkerRed = getHoverButtonBackgroundCustom(\"#ff0000\", 10);\n * console.log(darkerRed); // Output might be \"#e60000\"\n */\n\nexport const getHoverButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 * percent),\n\t\tR = (num >> 16) - amt,\n\t\tG = ((num >> 8) & 0x00ff) - amt,\n\t\tB = (num & 0x0000ff) - amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.max(R, 0) << 16) +\n\t\t(Math.max(G, 0) << 8) +\n\t\tMath.max(B, 0)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\n/**\n * Generates a new color by adjusting the brightness of the given color by a specified percentage.\n *\n * @param color - The original color in hexadecimal format (e.g., \"#RRGGBB\").\n * @param percent - The percentage to adjust the brightness. Positive values will lighten the color, while negative values will darken it.\n * @returns The new color in hexadecimal format after adjusting the brightness.\n *\n * @example\n * // Lighten the color by 20%\n * const newColor = getLoadingButtonBackgroundCustom(\"#ff0000\", 20); // \"#ff3333\"\n *\n * @example\n * // Darken the color by 10%\n * const newColor = getLoadingButtonBackgroundCustom(\"#00ff00\", -10); // \"#00e600\"\n */\nexport const getLoadingButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 * percent),\n\t\tR = (num >> 16) + amt,\n\t\tG = ((num >> 8) & 0x00ff) + amt,\n\t\tB = (num & 0x0000ff) + amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.min(R, 255) << 16) +\n\t\t(Math.min(G, 255) << 8) +\n\t\tMath.min(B, 255)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\nexport const getHoverButtonBackground = (type: Type, inverse?: boolean) => {\n\tif (type === 'ai') {\n\t\treturn `background: ${COLORS.surface.aiLight};`;\n\t}\n\n\tif (type === 'text') {\n\t\treturn `background-color:transparent;`;\n\t}\n\tif (type === 'special' || type === 'secondaryGray') {\n\t\treturn '';\n\t}\n\tif (!inverse && type !== 'primary') {\n\t\treturn `background-color: #000000;\n\t\t\t\topacity: 0.03;`;\n\t}\n\n\treturn ``;\n};\n\nexport const getHoverButtonTextDecorationStyle = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\treturn `text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n};\n\nexport const generateInverseHoverBackground = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\tif (type === 'primary') {\n\t\treturn `background-color: ${COLORS.stroke.warning.lightAlt};`;\n\t}\n\treturn `background-color: rgba(255, 255, 255, 0.1)`;\n};\n\nexport const generateDisabledStyling = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.base}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: transparent;`;\n\t}\n\tif (type === 'primary' || type === 'destructive') {\n\t\treturn inverse\n\t\t\t? 'background-color: rgba(255,255,255,0.3);'\n\t\t\t: `background-color: ${COLORS.background.inactive};`;\n\t} else if (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid rgba(255, 255, 255, 0.5);`\n\t\t\t: `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\treturn '';\n};\n\nexport const getDashedBorderStyling = (\n\ttype: Type,\n\tsize: Size,\n\tborderColor: string = getBorderColor(type, false),\n) => {\n\treturn `\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t`;\n};\n\nexport const getClickEffect = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'text') {\n\t\treturn `background-color: ${COLORS.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n\t}\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandLight}; border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.hovered}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};\n\t\tbackground-color: ${COLORS.background.brandLight};`;\n\t}\n\tif (type === 'primary' || type === 'destructive') {\n\t\tif (inverse) {\n\t\t\treturn `background-color: ${COLORS.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`;\n\t\t}\n\t\treturn 'box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);';\n\t} else if (\n\t\ttype === 'secondary' ||\n\t\ttype === 'tertiary' ||\n\t\ttype === 'tertiaryGray' ||\n\t\ttype.startsWith('dash')\n\t) {\n\t\treturn inverse\n\t\t\t? `background-color: ${COLORS.background.inverseLight} !important;`\n\t\t\t: `background-color: ${COLORS.background.brandLight};`;\n\t}\n};\nexport const getLoadingBackground = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tbuttonColor?: string,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandVeryLight};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.subdued};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: ${COLORS.background.base};`;\n\t}\n\tif (type === 'primary') {\n\t\tif (buttonColor) {\n\t\t\treturn `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\tbuttonColor,\n\t\t\t\t50,\n\t\t\t)};`;\n\t\t}\n\t\treturn `background-color: ${\n\t\t\tinverse ? COLORS.background.warning.vibrant : COLORS.background.brandLight\n\t\t};`;\n\t}\n\tif (type === 'destructive') {\n\t\treturn `background-color: ${COLORS.background.negative.light};`;\n\t}\n\treturn 'background-color: transparent;';\n};\n\nexport const getLoadingBorder = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: none;`;\n\t}\n\tif (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid ${COLORS.content.secondary};`\n\t\t\t: `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\treturn '';\n};\n\nexport const SpinnerColorMap = (type: Type, inverse?: boolean) => {\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\tif (inverse) {\n\t\tif (type === 'primary') {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t}\n\tif (type === 'destructive') {\n\t\treturn COLORS.content.negative;\n\t}\n\treturn COLORS.content.brand;\n};\n\nexport const getButtonIconColor = (\n\tsize: Size,\n\ttype: Type,\n\tinverse?: boolean,\n\tdisabled?: boolean,\n\tisLoading?: boolean,\n\tdarkMode?: boolean,\n) => {\n\tif (size === 'chip') {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t} else if (darkMode) {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n\tif (isLoading) {\n\t\treturn 'transparent';\n\t}\n\tif (type === 'special') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.background.inverseLight;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.content.secondary;\n\t}\n\tif (type === 'primary' || type === 'destructive') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t} else if (type === 'secondary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiaryGray' || type.startsWith('dash')) {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n};\n"],"names":["getBackgroundColor","type","size","inverse","darkMode","buttonColor","COLORS","getColor","getDisabledTextColor","getPadding","GetButtonTextComponent","disabled","ButtonRegularAI","ButtonLargeAI","BodySecondary","BodyCaption","ButtonRegular","ButtonLarge","getBorderColor","error","getBorder","version","getLinearGradientValue","getHoverButtonBackgroundCustom","color","percent","num","amt","R","G","B","getLoadingButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","generateDisabledStyling","getDashedBorderStyling","borderColor","getClickEffect","getLoadingBackground","getLoadingBorder","SpinnerColorMap","getButtonIconColor","isLoading"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),c=require("react"),C=require("./CheckBox.styled.js"),a=require("../TypographyStyle.js"),i=require("../../constants/Theme.js"),f=e=>{const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),c=require("react"),C=require("./CheckBox.styled.js"),a=require("../TypographyStyle.js"),i=require("../../constants/Theme.js"),f=e=>{const s=c.useMemo(()=>e.activeColor||i.COLORS.background.positive.vibrant,[e.activeColor]),t=e.size==="XS"?{box:12,check:{w:6,h:5,x:3,y:3.5},partial:{x:3,y:5,w:6}}:e.size==="SMALL"?{box:16,check:{w:8,h:7,x:4,y:4},partial:{x:5,y:7,w:6}}:{box:18,check:{w:10,h:9,x:4,y:4},partial:{x:5,y:8,w:8}};return l.jsxs("svg",{width:t.box,height:t.box,viewBox:`0 0 ${t.box} ${t.box}`,fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[l.jsx("rect",{x:"0",y:"0",width:t.box,height:t.box,rx:"4",fill:e.isDisabled?i.COLORS.content.inactive:s}),!e.isPartial&&l.jsx("svg",{width:t.check.w,height:t.check.h,x:t.check.x,y:t.check.y,viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z",fill:"white"})}),e.isPartial&&l.jsx("rect",{x:t.partial.x,y:t.partial.y,width:t.partial.w,height:"2",rx:"1",fill:i.COLORS.surface.standard})]})},L=e=>{const[s,t]=c.useState(e.isChecked||!1),[d,o]=c.useState(e.isPartiallyChecked||!1),[n,y]=c.useState(e.isDisabled||!1),[S,h]=c.useState(!1),[u,x]=c.useState(!1),O=r=>{if(!e.isDisabled){const b=!s;d?o(!d):t(b),e.onValueChange?.(b,e.value,r)}};c.useEffect(()=>{t(e.isChecked)},[e.isChecked]),c.useEffect(()=>{y(e.isDisabled||!1)},[e.isDisabled]),c.useEffect(()=>{o(e.isPartiallyChecked||!1)},[e.isPartiallyChecked]);const k=()=>{if(!e.label)return l.jsx(l.Fragment,{});if(e.labelTypography){const r={bodyCaption:a.BodyCaption,bodySecondary:a.BodySecondary,bodyPrimary:a.BodyPrimary,titleSmall:a.TitleSmall}[e.labelTypography];return l.jsx(r,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label})}return e.size==="XS"?l.jsx(a.BodyCaption,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):e.boldOnChecked&&s||e.bold?e.labelSize==="DEFAULT"?l.jsx(a.TitleRegular,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):l.jsx(a.TitleSmall,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):e.size==="SMALL"?l.jsx(a.BodySecondary,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):e.labelSize==="SMALL"?l.jsx(a.BodySecondary,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):l.jsx(a.BodyPrimary,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label})};return l.jsxs(C.CheckboxContainer,{onClick:O,onMouseEnter:()=>h(!e.skipHoverState),onMouseLeave:()=>h(!1),onMouseDown:()=>x(!e.skipHoverState),onMouseUp:()=>x(!1),isDisabled:n,enableHover:e.enableHover,style:e.style??{},children:[l.jsx(C.CheckboxIcon,{checked:s,hovered:S,clicked:u,isDisabled:n,size:e.size,borderColor:e.checkboxBorderColor,children:s&&l.jsx(f,{isPartial:d||!1,isDisabled:n,size:e.size,activeColor:e?.activeColor})}),k(),e.rightComponent]})};exports.CheckBox=L;
|
|
2
2
|
//# sourceMappingURL=CheckBox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckBox.js","sources":["../../../../src/components/checkBox/CheckBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tCheckboxContainer,\n\tCheckboxIcon,\n} from '@src/components/checkBox/CheckBox.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type CheckBoxProps = {\n\tisChecked: boolean;\n\tisPartiallyChecked?: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tonValueChange: (\n\t\tchecked: boolean,\n\t\tvalue?: string,\n\t\tevent?: React.MouseEvent,\n\t) => void;\n\tlabel?: string;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tskipHoverState?: boolean;\n\tlabelSize?: 'DEFAULT' | 'SMALL';\n\trightComponent?: JSX.Element;\n\tcheckboxBorderColor?: string;\n\tboldOnChecked?: boolean;\n\tbold?: boolean;\n\tstyle?: React.CSSProperties;\n\tenableHover?: boolean;\n\tactiveColor?: string;\n\tlabelTypography?:\n\t\t| 'bodyCaption'\n\t\t| 'bodySecondary'\n\t\t| 'bodyPrimary'\n\t\t| 'titleSmall';\n};\n\nconst CheckMark: React.FC<{\n\tisPartial: boolean;\n\tisDisabled: boolean;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props.activeColor || COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\t// Box (and inner check) dimensions per size — XS renders a 12x12 mark.\n\tconst dims =\n\t\tprops.size === 'XS'\n\t\t\t? {\n\t\t\t\t\tbox: 12,\n\t\t\t\t\tcheck: { w: 6, h: 5, x: 3, y: 3.5 },\n\t\t\t\t\tpartial: { x: 3, y: 5, w: 6 },\n\t\t\t }\n\t\t\t: props.size === 'SMALL'\n\t\t\t? {\n\t\t\t\t\tbox: 16,\n\t\t\t\t\tcheck: { w: 8, h: 7, x: 4, y: 4 },\n\t\t\t\t\tpartial: { x: 5, y: 7, w: 6 },\n\t\t\t }\n\t\t\t: {\n\t\t\t\t\tbox: 18,\n\t\t\t\t\tcheck: { w: 10, h: 9, x: 4, y: 4 },\n\t\t\t\t\tpartial: { x: 5, y: 8, w: 8 },\n\t\t\t };\n\n\treturn (\n\t\t<svg\n\t\t\twidth={dims.box}\n\t\t\theight={dims.box}\n\t\t\tviewBox={`0 0 ${dims.box} ${dims.box}`}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tx=\"0\"\n\t\t\t\ty=\"0\"\n\t\t\t\twidth={dims.box}\n\t\t\t\theight={dims.box}\n\t\t\t\trx=\"4\"\n\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t/>\n\t\t\t{!props.isPartial && (\n\t\t\t\t<svg\n\t\t\t\t\twidth={dims.check.w}\n\t\t\t\t\theight={dims.check.h}\n\t\t\t\t\tx={dims.check.x}\n\t\t\t\t\ty={dims.check.y}\n\t\t\t\t\tviewBox=\"0 0 10 9\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\td=\"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z\"\n\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t\t{props.isPartial && (\n\t\t\t\t<rect\n\t\t\t\t\tx={dims.partial.x}\n\t\t\t\t\ty={dims.partial.y}\n\t\t\t\t\twidth={dims.partial.w}\n\t\t\t\t\theight=\"2\"\n\t\t\t\t\trx=\"1\"\n\t\t\t\t\tfill={COLORS.surface.standard}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const CheckBox: React.FC<CheckBoxProps> = (props) => {\n\tconst [isChecked, setIsChecked] = useState(props.isChecked || false);\n\tconst [isPartiallyChecked, setIsPartiallyChecked] = useState(\n\t\tprops.isPartiallyChecked || false,\n\t);\n\tconst [isDisabled, setIsDisabled] = useState(props.isDisabled || false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst handleCheck = (event: React.MouseEvent) => {\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isChecked;\n\t\t\tif (isPartiallyChecked) {\n\t\t\t\tsetIsPartiallyChecked(!isPartiallyChecked);\n\t\t\t} else {\n\t\t\t\tsetIsChecked(newVal);\n\t\t\t}\n\t\t\tprops.onValueChange?.(newVal, props.value, event);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetIsChecked(props.isChecked);\n\t}, [props.isChecked]);\n\n\tuseEffect(() => {\n\t\tsetIsDisabled(props.isDisabled || false);\n\t}, [props.isDisabled]);\n\n\tuseEffect(() => {\n\t\tsetIsPartiallyChecked(props.isPartiallyChecked || false);\n\t}, [props.isPartiallyChecked]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif (props.labelTypography) {\n\t\t\tconst LabelTypography = {\n\t\t\t\tbodyCaption: BodyCaption,\n\t\t\t\tbodySecondary: BodySecondary,\n\t\t\t\tbodyPrimary: BodyPrimary,\n\t\t\t\ttitleSmall: TitleSmall,\n\t\t\t}[props.labelTypography];\n\t\t\treturn (\n\t\t\t\t<LabelTypography\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</LabelTypography>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'XS') {\n\t\t\treturn (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodyCaption>\n\t\t\t);\n\t\t}\n\n\t\tif ((props.boldOnChecked && isChecked) || props.bold) {\n\t\t\tif (props.labelSize === 'DEFAULT') {\n\t\t\t\treturn (\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.primary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.label}\n\t\t\t\t\t</TitleRegular>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<CheckboxContainer\n\t\t\tonClick={handleCheck}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tisDisabled={isDisabled}\n\t\t\tenableHover={props.enableHover}\n\t\t\tstyle={props.style ?? {}}\n\t\t>\n\t\t\t<CheckboxIcon\n\t\t\t\tchecked={isChecked}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={isDisabled}\n\t\t\t\tsize={props.size}\n\t\t\t\tborderColor={props.checkboxBorderColor}\n\t\t\t\tactiveColor={props.activeColor}\n\t\t\t>\n\t\t\t\t{isChecked && (\n\t\t\t\t\t<CheckMark\n\t\t\t\t\t\tisPartial={isPartiallyChecked || false}\n\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\tsize={props.size}\n\t\t\t\t\t\tactiveColor={props?.activeColor}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</CheckboxIcon>\n\t\t\t{renderLabel()}\n\t\t\t{props.rightComponent}\n\t\t</CheckboxContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","dims","jsxs","jsx","CheckBox","isChecked","setIsChecked","useState","isPartiallyChecked","setIsPartiallyChecked","isDisabled","setIsDisabled","isHovered","setIsHovered","isClicked","setIsClicked","handleCheck","event","newVal","useEffect","renderLabel","Fragment","LabelTypography","BodyCaption","BodySecondary","BodyPrimary","TitleSmall","TitleRegular","CheckboxContainer","CheckboxIcon"],"mappings":"mPA0CMA,EAKAC,GAAU,CACf,MAAMC,EAAYC,EAAAA,QACjB,IAAMF,EAAM,aAAeG,EAAAA,OAAO,WAAW,SAAS,QACtD,CAACH,EAAM,WAAW,CAAA,EAIbI,EACLJ,EAAM,OAAS,KACZ,CACA,IAAK,GACL,MAAO,CAAE,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,GAAA,EAC9B,QAAS,CAAE,EAAG,EAAG,EAAG,EAAG,EAAG,CAAA,CAAE,EAE5BA,EAAM,OAAS,QACf,CACA,IAAK,GACL,MAAO,CAAE,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,EAAG,CAAA,EAC9B,QAAS,CAAE,EAAG,EAAG,EAAG,EAAG,EAAG,CAAA,CAAE,EAE5B,CACA,IAAK,GACL,MAAO,CAAE,EAAG,GAAI,EAAG,EAAG,EAAG,EAAG,EAAG,CAAA,EAC/B,QAAS,CAAE,EAAG,EAAG,EAAG,EAAG,EAAG,CAAA,CAAE,EAGhC,OACCK,EAAAA,KAAC,MAAA,CACA,MAAOD,EAAK,IACZ,OAAQA,EAAK,IACb,QAAS,OAAOA,EAAK,GAAG,IAAIA,EAAK,GAAG,GACpC,KAAK,OACL,MAAM,6BAEN,SAAA,CAAAE,EAAAA,IAAC,OAAA,CACA,EAAE,IACF,EAAE,IACF,MAAOF,EAAK,IACZ,OAAQA,EAAK,IACb,GAAG,IACH,KAAMJ,EAAM,WAAaG,EAAAA,OAAO,QAAQ,SAAWF,CAAA,CAAA,EAEnD,CAACD,EAAM,WACPM,EAAAA,IAAC,MAAA,CACA,MAAOF,EAAK,MAAM,EAClB,OAAQA,EAAK,MAAM,EACnB,EAAGA,EAAK,MAAM,EACd,EAAGA,EAAK,MAAM,EACd,QAAQ,WACR,KAAK,OACL,MAAM,6BAEN,SAAAE,EAAAA,IAAC,OAAA,CACA,SAAS,UACT,SAAS,UACT,EAAE,yUACF,KAAK,OAAA,CAAA,CACN,CAAA,EAGDN,EAAM,WACNM,EAAAA,IAAC,OAAA,CACA,EAAGF,EAAK,QAAQ,EAChB,EAAGA,EAAK,QAAQ,EAChB,MAAOA,EAAK,QAAQ,EACpB,OAAO,IACP,GAAG,IACH,KAAMD,EAAAA,OAAO,QAAQ,QAAA,CAAA,CACtB,CAAA,CAAA,CAIJ,EAEaI,EAAqCP,GAAU,CAC3D,KAAM,CAACQ,EAAWC,CAAY,EAAIC,EAAAA,SAASV,EAAM,WAAa,EAAK,EAC7D,CAACW,EAAoBC,CAAqB,EAAIF,EAAAA,SACnDV,EAAM,oBAAsB,EAAA,EAEvB,CAACa,EAAYC,CAAa,EAAIJ,EAAAA,SAASV,EAAM,YAAc,EAAK,EAChE,CAACe,EAAWC,CAAY,EAAIN,EAAAA,SAAS,EAAK,EAC1C,CAACO,EAAWC,CAAY,EAAIR,EAAAA,SAAS,EAAK,EAE1CS,EAAeC,GAA4B,CAChD,GAAI,CAACpB,EAAM,WAAY,CACtB,MAAMqB,EAAS,CAACb,EACZG,EACHC,EAAsB,CAACD,CAAkB,EAEzCF,EAAaY,CAAM,EAEpBrB,EAAM,gBAAgBqB,EAAQrB,EAAM,MAAOoB,CAAK,CACjD,CACD,EAEAE,EAAAA,UAAU,IAAM,CACfb,EAAaT,EAAM,SAAS,CAC7B,EAAG,CAACA,EAAM,SAAS,CAAC,EAEpBsB,EAAAA,UAAU,IAAM,CACfR,EAAcd,EAAM,YAAc,EAAK,CACxC,EAAG,CAACA,EAAM,UAAU,CAAC,EAErBsB,EAAAA,UAAU,IAAM,CACfV,EAAsBZ,EAAM,oBAAsB,EAAK,CACxD,EAAG,CAACA,EAAM,kBAAkB,CAAC,EAE7B,MAAMuB,EAAc,IAAM,CACzB,GAAI,CAACvB,EAAM,MACV,OAAOM,EAAAA,IAAAkB,EAAAA,SAAA,EAAE,EAGV,GAAIxB,EAAM,gBAAiB,CAC1B,MAAMyB,EAAkB,CACvB,YAAaC,EAAAA,YACb,cAAeC,EAAAA,cACf,YAAaC,EAAAA,YACb,WAAYC,EAAAA,UAAA,EACX7B,EAAM,eAAe,EACvB,OACCM,EAAAA,IAACmB,EAAA,CACA,MAAOzB,EAAM,WAAaG,EAAAA,OAAO,KAAK,SAAWA,EAAAA,OAAO,KAAK,QAE5D,SAAAH,EAAM,KAAA,CAAA,CAGV,CAEA,OAAIA,EAAM,OAAS,KAEjBM,EAAAA,IAACoB,EAAAA,YAAA,CACA,MAAO1B,EAAM,WAAaG,EAAAA,OAAO,KAAK,SAAWA,EAAAA,OAAO,KAAK,QAE5D,SAAAH,EAAM,KAAA,CAAA,EAKLA,EAAM,eAAiBQ,GAAcR,EAAM,KAC3CA,EAAM,YAAc,UAEtBM,EAAAA,IAACwB,EAAAA,aAAA,CACA,MACC9B,EAAM,WAAaG,EAAAA,OAAO,KAAK,SAAWA,EAAAA,OAAO,KAAK,QAGtD,SAAAH,EAAM,KAAA,CAAA,EAKTM,EAAAA,IAACuB,EAAAA,WAAA,CACA,MAAO7B,EAAM,WAAaG,EAAAA,OAAO,KAAK,SAAWA,EAAAA,OAAO,KAAK,QAE5D,SAAAH,EAAM,KAAA,CAAA,EAKNA,EAAM,OAAS,QAEjBM,EAAAA,IAACqB,EAAAA,cAAA,CACA,MAAO3B,EAAM,WAAaG,EAAAA,OAAO,KAAK,SAAWA,EAAAA,OAAO,KAAK,QAE5D,SAAAH,EAAM,KAAA,CAAA,EAKNA,EAAM,YAAc,QAEtBM,EAAAA,IAACqB,EAAAA,cAAA,CACA,MAAO3B,EAAM,WAAaG,EAAAA,OAAO,KAAK,SAAWA,EAAAA,OAAO,KAAK,QAE5D,SAAAH,EAAM,KAAA,CAAA,EAMTM,EAAAA,IAACsB,EAAAA,YAAA,CACA,MAAO5B,EAAM,WAAaG,EAAAA,OAAO,KAAK,SAAWA,EAAAA,OAAO,KAAK,QAE5D,SAAAH,EAAM,KAAA,CAAA,CAGV,EAEA,OACCK,EAAAA,KAAC0B,EAAAA,kBAAA,CACA,QAASZ,EACT,aAAc,IAAMH,EAAa,CAAChB,EAAM,cAAc,EACtD,aAAc,IAAMgB,EAAa,EAAK,EACtC,YAAa,IAAME,EAAa,CAAClB,EAAM,cAAc,EACrD,UAAW,IAAMkB,EAAa,EAAK,EACnC,WAAAL,EACA,YAAab,EAAM,YACnB,MAAOA,EAAM,OAAS,CAAA,EAEtB,SAAA,CAAAM,EAAAA,IAAC0B,EAAAA,aAAA,CACA,QAASxB,EACT,QAASO,EACT,QAASE,EACT,WAAAJ,EACA,KAAMb,EAAM,KACZ,YAAaA,EAAM,oBACnB,YAAaA,EAAM,YAElB,SAAAQ,GACAF,EAAAA,IAACP,EAAA,CACA,UAAWY,GAAsB,GACjC,WAAAE,EACA,KAAMb,EAAM,KACZ,YAAaA,GAAO,WAAA,CAAA,CACrB,CAAA,EAGDuB,EAAA,EACAvB,EAAM,cAAA,CAAA,CAAA,CAGV"}
|
|
1
|
+
{"version":3,"file":"CheckBox.js","sources":["../../../../src/components/checkBox/CheckBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tCheckboxContainer,\n\tCheckboxIcon,\n} from '@src/components/checkBox/CheckBox.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type CheckBoxProps = {\n\tisChecked: boolean;\n\tisPartiallyChecked?: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tonValueChange: (\n\t\tchecked: boolean,\n\t\tvalue?: string,\n\t\tevent?: React.MouseEvent,\n\t) => void;\n\tlabel?: string;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tskipHoverState?: boolean;\n\tlabelSize?: 'DEFAULT' | 'SMALL';\n\trightComponent?: JSX.Element;\n\tcheckboxBorderColor?: string;\n\tboldOnChecked?: boolean;\n\tbold?: boolean;\n\tstyle?: React.CSSProperties;\n\tenableHover?: boolean;\n\tactiveColor?: string;\n\tlabelTypography?:\n\t\t| 'bodyCaption'\n\t\t| 'bodySecondary'\n\t\t| 'bodyPrimary'\n\t\t| 'titleSmall';\n};\n\nconst CheckMark: React.FC<{\n\tisPartial: boolean;\n\tisDisabled: boolean;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props.activeColor || COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\t// Box (and inner check) dimensions per size — XS renders a 12x12 mark.\n\tconst dims =\n\t\tprops.size === 'XS'\n\t\t\t? {\n\t\t\t\t\tbox: 12,\n\t\t\t\t\tcheck: { w: 6, h: 5, x: 3, y: 3.5 },\n\t\t\t\t\tpartial: { x: 3, y: 5, w: 6 },\n\t\t\t }\n\t\t\t: props.size === 'SMALL'\n\t\t\t? {\n\t\t\t\t\tbox: 16,\n\t\t\t\t\tcheck: { w: 8, h: 7, x: 4, y: 4 },\n\t\t\t\t\tpartial: { x: 5, y: 7, w: 6 },\n\t\t\t }\n\t\t\t: {\n\t\t\t\t\tbox: 18,\n\t\t\t\t\tcheck: { w: 10, h: 9, x: 4, y: 4 },\n\t\t\t\t\tpartial: { x: 5, y: 8, w: 8 },\n\t\t\t };\n\n\treturn (\n\t\t<svg\n\t\t\twidth={dims.box}\n\t\t\theight={dims.box}\n\t\t\tviewBox={`0 0 ${dims.box} ${dims.box}`}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tx=\"0\"\n\t\t\t\ty=\"0\"\n\t\t\t\twidth={dims.box}\n\t\t\t\theight={dims.box}\n\t\t\t\trx=\"4\"\n\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t/>\n\t\t\t{!props.isPartial && (\n\t\t\t\t<svg\n\t\t\t\t\twidth={dims.check.w}\n\t\t\t\t\theight={dims.check.h}\n\t\t\t\t\tx={dims.check.x}\n\t\t\t\t\ty={dims.check.y}\n\t\t\t\t\tviewBox=\"0 0 10 9\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\td=\"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z\"\n\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t\t{props.isPartial && (\n\t\t\t\t<rect\n\t\t\t\t\tx={dims.partial.x}\n\t\t\t\t\ty={dims.partial.y}\n\t\t\t\t\twidth={dims.partial.w}\n\t\t\t\t\theight=\"2\"\n\t\t\t\t\trx=\"1\"\n\t\t\t\t\tfill={COLORS.surface.standard}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const CheckBox: React.FC<CheckBoxProps> = (props) => {\n\tconst [isChecked, setIsChecked] = useState(props.isChecked || false);\n\tconst [isPartiallyChecked, setIsPartiallyChecked] = useState(\n\t\tprops.isPartiallyChecked || false,\n\t);\n\tconst [isDisabled, setIsDisabled] = useState(props.isDisabled || false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst handleCheck = (event: React.MouseEvent) => {\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isChecked;\n\t\t\tif (isPartiallyChecked) {\n\t\t\t\tsetIsPartiallyChecked(!isPartiallyChecked);\n\t\t\t} else {\n\t\t\t\tsetIsChecked(newVal);\n\t\t\t}\n\t\t\tprops.onValueChange?.(newVal, props.value, event);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetIsChecked(props.isChecked);\n\t}, [props.isChecked]);\n\n\tuseEffect(() => {\n\t\tsetIsDisabled(props.isDisabled || false);\n\t}, [props.isDisabled]);\n\n\tuseEffect(() => {\n\t\tsetIsPartiallyChecked(props.isPartiallyChecked || false);\n\t}, [props.isPartiallyChecked]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif (props.labelTypography) {\n\t\t\tconst LabelTypography = {\n\t\t\t\tbodyCaption: BodyCaption,\n\t\t\t\tbodySecondary: BodySecondary,\n\t\t\t\tbodyPrimary: BodyPrimary,\n\t\t\t\ttitleSmall: TitleSmall,\n\t\t\t}[props.labelTypography];\n\t\t\treturn (\n\t\t\t\t<LabelTypography\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</LabelTypography>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'XS') {\n\t\t\treturn (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodyCaption>\n\t\t\t);\n\t\t}\n\n\t\tif ((props.boldOnChecked && isChecked) || props.bold) {\n\t\t\tif (props.labelSize === 'DEFAULT') {\n\t\t\t\treturn (\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.primary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.label}\n\t\t\t\t\t</TitleRegular>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<CheckboxContainer\n\t\t\tonClick={handleCheck}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tisDisabled={isDisabled}\n\t\t\tenableHover={props.enableHover}\n\t\t\tstyle={props.style ?? {}}\n\t\t>\n\t\t\t<CheckboxIcon\n\t\t\t\tchecked={isChecked}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={isDisabled}\n\t\t\t\tsize={props.size}\n\t\t\t\tborderColor={props.checkboxBorderColor}\n\t\t\t>\n\t\t\t\t{isChecked && (\n\t\t\t\t\t<CheckMark\n\t\t\t\t\t\tisPartial={isPartiallyChecked || false}\n\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\tsize={props.size}\n\t\t\t\t\t\tactiveColor={props?.activeColor}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</CheckboxIcon>\n\t\t\t{renderLabel()}\n\t\t\t{props.rightComponent}\n\t\t</CheckboxContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","dims","jsxs","jsx","CheckBox","isChecked","setIsChecked","useState","isPartiallyChecked","setIsPartiallyChecked","isDisabled","setIsDisabled","isHovered","setIsHovered","isClicked","setIsClicked","handleCheck","event","newVal","useEffect","renderLabel","Fragment","LabelTypography","BodyCaption","BodySecondary","BodyPrimary","TitleSmall","TitleRegular","CheckboxContainer","CheckboxIcon"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),t=require("../../constants/Theme.js"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=s(i),d=o.default.div`
|
|
2
2
|
display: inline-flex;
|
|
3
3
|
gap: 8px;
|
|
4
4
|
align-items: center;
|
|
@@ -8,15 +8,16 @@
|
|
|
8
8
|
background: ${t.COLORS.surface.subdued};
|
|
9
9
|
}
|
|
10
10
|
`}
|
|
11
|
-
`,
|
|
12
|
-
width: ${e=>e.size==="
|
|
13
|
-
height: ${e=>e.size==="
|
|
11
|
+
`,c=o.default.div`
|
|
12
|
+
width: ${e=>e.size==="DEFAULT"?14:12}px;
|
|
13
|
+
height: ${e=>e.size==="DEFAULT"?14:12}px;
|
|
14
14
|
border-radius: 4px;
|
|
15
15
|
border: 2px solid black;
|
|
16
16
|
display: flex;
|
|
17
17
|
justify-content: center;
|
|
18
18
|
align-items: center;
|
|
19
|
-
box
|
|
19
|
+
/* XS is a true 12x12 box (border drawn inside); other sizes keep content-box. */
|
|
20
|
+
box-sizing: ${e=>e.size==="XS"?"border-box":"content-box"};
|
|
20
21
|
${e=>e.isDisabled?i.css`
|
|
21
22
|
border: ${e.size==="DEFAULT"?2:1.5}px solid
|
|
22
23
|
${t.COLORS.content.inactive};
|
|
@@ -26,14 +27,16 @@
|
|
|
26
27
|
`}
|
|
27
28
|
${e=>e.checked&&i.css`
|
|
28
29
|
border: 0px;
|
|
30
|
+
width: ${e.size==="XS"?12:18}px;
|
|
31
|
+
height: ${e.size==="XS"?12:18}px;
|
|
29
32
|
`}
|
|
30
33
|
${e=>e.hovered&&i.css`
|
|
31
34
|
outline: 3px solid ${t.COLORS.surface.hovered};
|
|
32
35
|
`}
|
|
33
36
|
${e=>e.clicked&&!e.isDisabled&&i.css`
|
|
34
37
|
outline: 3px solid
|
|
35
|
-
${e.checked?
|
|
38
|
+
${e.checked?t.COLORS.stroke.positive.lightAlt:t.COLORS.surface.hovered};
|
|
36
39
|
outline-offset: 2px;
|
|
37
40
|
`}
|
|
38
|
-
`;exports.CheckboxContainer=d;exports.CheckboxIcon=
|
|
41
|
+
`;exports.CheckboxContainer=d;exports.CheckboxIcon=c;
|
|
39
42
|
//# sourceMappingURL=CheckBox.styled.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {
|
|
1
|
+
{"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CheckboxContainer = styled.div<{\n\tisDisabled?: boolean;\n\tenableHover?: boolean;\n}>`\n\tdisplay: inline-flex;\n\tgap: 8px;\n\talign-items: center;\n\tcursor: ${(props) => (props.isDisabled ? 'default' : 'pointer')};\n\t${(props) =>\n\t\tprops.enableHover &&\n\t\tcss`\n\t\t\t:hover {\n\t\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t\t}\n\t\t`}\n`;\n\nexport const CheckboxIcon = styled.div<{\n\tchecked: boolean;\n\thovered: boolean;\n\tclicked: boolean;\n\tisDisabled: boolean;\n\tsize?: 'SMALL' | 'DEFAULT' | 'XS';\n\tborderColor?: string;\n}>`\n\twidth: ${(props) => (props.size === 'DEFAULT' ? 14 : 12)}px;\n\theight: ${(props) => (props.size === 'DEFAULT' ? 14 : 12)}px;\n\tborder-radius: 4px;\n\tborder: 2px solid black;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\t/* XS is a true 12x12 box (border drawn inside); other sizes keep content-box. */\n\tbox-sizing: ${(props) => (props.size === 'XS' ? 'border-box' : 'content-box')};\n\t${(props) =>\n\t\tprops.isDisabled\n\t\t\t? css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${COLORS.content.inactive};\n\t\t\t `\n\t\t\t: css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${props.borderColor ?? 'black'};\n\t\t\t `}\n\t${(props) =>\n\t\tprops.checked &&\n\t\tcss`\n\t\t\tborder: 0px;\n\t\t\twidth: ${props.size === 'XS' ? 12 : 18}px;\n\t\t\theight: ${props.size === 'XS' ? 12 : 18}px;\n\t\t`}\n\t${(props) =>\n\t\tprops.hovered &&\n\t\tcss`\n\t\t\toutline: 3px solid ${COLORS.surface.hovered};\n\t\t`}\n\t${(props) =>\n\t\tprops.clicked &&\n\t\t!props.isDisabled &&\n\t\tcss`\n\t\t\toutline: 3px solid\n\t\t\t\t${props.checked\n\t\t\t\t\t? COLORS.stroke.positive.lightAlt\n\t\t\t\t\t: COLORS.surface.hovered};\n\t\t\toutline-offset: 2px;\n\t\t`}\n`;\n"],"names":["CheckboxContainer","styled","props","css","COLORS","CheckboxIcon"],"mappings":"0NAGaA,EAAoBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,WAO5BC,GAAWA,EAAM,WAAa,UAAY,SAAU;AAAA,GAC5DA,GACFA,EAAM,aACNC,EAAAA;AAAAA;AAAAA,kBAEgBC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,GAErC;AAAA,EAGUC,EAAeJ,EAAAA,QAAO;AAAA,UAQxBC,GAAWA,EAAM,OAAS,UAAY,GAAK,EAAG;AAAA,WAC7CA,GAAWA,EAAM,OAAS,UAAY,GAAK,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAO1CA,GAAWA,EAAM,OAAS,KAAO,aAAe,aAAc;AAAA,GAC1EA,GACFA,EAAM,WACHC,EAAAA;AAAAA,eACUD,EAAM,OAAS,UAAY,EAAI,GAAG;AAAA,QACzCE,EAAAA,OAAO,QAAQ,QAAQ;AAAA,OAE1BD,EAAAA;AAAAA,eACUD,EAAM,OAAS,UAAY,EAAI,GAAG;AAAA,QACzCA,EAAM,aAAe,OAAO;AAAA,MAC9B;AAAA,GACFA,GACFA,EAAM,SACNC,EAAAA;AAAAA;AAAAA,YAEUD,EAAM,OAAS,KAAO,GAAK,EAAE;AAAA,aAC5BA,EAAM,OAAS,KAAO,GAAK,EAAE;AAAA,GACvC;AAAA,GACCA,GACFA,EAAM,SACNC,EAAAA;AAAAA,wBACsBC,EAAAA,OAAO,QAAQ,OAAO;AAAA,GAC3C;AAAA,GACCF,GACFA,EAAM,SACN,CAACA,EAAM,YACPC,EAAAA;AAAAA;AAAAA,MAEID,EAAM,QACLE,EAAAA,OAAO,OAAO,SAAS,SACvBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,GAE1B;AAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),a=require("react"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),a=require("react"),v=require("../../utils/StringUtils.js"),d=require("../../constants/Theme.js"),q=require("../../assets/icons/chevronDown.svg.js"),S=require("../../assets/icons/cross.svg.js"),R=require("../../assets/icons/errorInfo.svg.js"),I=require("../input/Input.styled.js"),h=require("../TypographyStyle.js"),L=require("./Common.styled.js"),T=require("../tag/Tag.js"),w=require("../tooltips/Tooltip.js"),_=t=>t.length===1?100:t.length===2?40:34,A=({chips:t,onDeleteChip:g,containerStyle:m={},sizeToUse:i="default",isDropdownOpened:p,placeholder:x="Select..",errorMessage:s="",showLabelsOnMoreHover:C=!1})=>{const[f,j]=a.useState(),[c,y]=a.useState(0),[u,b]=a.useState([]);return a.useEffect(()=>{if(!t)return;let n=0;const l=_(t);let r=t.filter(o=>(n+=o.label.length,n<=l));r.length===0&&t.length>0&&(r=[t[0]]),j(r);const O=t.filter(o=>!r.includes(o)).map(o=>o.label);b(O),y(t.length-r.length)},[t]),e.jsxs(e.Fragment,{children:[e.jsxs(L.ChipInputWrapper,{style:{...m},error:!!s,children:[e.jsxs("div",{className:"chips-container",children:[f?.map((n,l)=>e.jsx("div",{style:{zIndex:2},children:e.jsx(T.Tag,{tagText:v.default.truncateText(n.selectedLabel||n.label,40),TrailingIcon:()=>e.jsx(S.default,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>{g(n)}}),children:n.selectedLabel||n.label})},l)),!!c&&e.jsx("div",{style:{position:"relative",zIndex:2,pointerEvents:"auto"},children:e.jsx(w.Tooltip,{body:"",placement:"bottom",tooltipContent:C&&u.length>0?e.jsx("div",{style:{padding:"4px"},children:u.map((n,l)=>e.jsx(h.BodyCaption,{style:{color:d.COLORS.text.white},children:n},l))}):void 0,children:e.jsx(h.BodyCaption,{color:d.COLORS.content.placeholder,children:`+${c} more`})})}),t.length===0&&e.jsx("div",{style:{color:d.COLORS.content.placeholder},children:x})]}),e.jsx("div",{children:e.jsx(q.default,{style:{transform:p?"rotate(180deg)":"rotate(0deg)"},width:i==="x-small"?16:i==="small"?20:24,height:i==="x-small"?16:i==="small"?20:24,color:d.COLORS.content.primary})})]}),!!s&&e.jsxs(I.InputFooter,{invalid:!0,children:[!!s&&e.jsx(R.default,{width:16,height:16}),s]})]})};exports.default=A;
|
|
2
2
|
//# sourceMappingURL=ChipInput.js.map
|