@bikdotai/bik-component-library 0.0.805-beta.34 → 0.0.805-beta.36
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/BikGiftedChat/GiftedChat/GiftedChat.js +1 -1
- package/dist/cjs/components/BikGiftedChat/GiftedChat/GiftedChat.js.map +1 -1
- package/dist/cjs/components/checkBox/CheckBox.js +1 -1
- package/dist/cjs/components/checkBox/CheckBox.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.js +7 -7
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/MenuList.js.map +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.js +1 -1
- package/dist/cjs/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.js.map +1 -1
- package/dist/cjs/components/list-item/ListItem.js +1 -1
- package/dist/cjs/components/list-item/ListItem.js.map +1 -1
- package/dist/cjs/components/list-item/ListItem.styled.js +1 -1
- package/dist/cjs/components/list-item/ListItem.styled.js.map +1 -1
- package/dist/cjs/components/list-item/themes.js +1 -1
- package/dist/cjs/components/list-item/themes.js.map +1 -1
- package/dist/cjs/src/components/checkBox/CheckBox.d.ts +1 -0
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.d.ts +2 -0
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/menu/MenuItem.d.ts +2 -0
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/menu/MenuList.d.ts +2 -0
- package/dist/cjs/src/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.d.ts +2 -0
- package/dist/cjs/src/components/dropdown/type.d.ts +4 -0
- package/dist/cjs/src/components/list-item/List.model.d.ts +1 -0
- package/dist/cjs/src/components/list-item/ListItem.styled.d.ts +1 -0
- package/dist/cjs/src/components/list-item/themes.d.ts +2 -2
- package/dist/esm/components/BikGiftedChat/GiftedChat/GiftedChat.js +1 -1
- package/dist/esm/components/BikGiftedChat/GiftedChat/GiftedChat.js.map +1 -1
- package/dist/esm/components/checkBox/CheckBox.js +1 -1
- package/dist/esm/components/checkBox/CheckBox.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.js +9 -9
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.js.map +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.js +1 -1
- package/dist/esm/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.js.map +1 -1
- package/dist/esm/components/list-item/ListItem.js +1 -1
- package/dist/esm/components/list-item/ListItem.js.map +1 -1
- package/dist/esm/components/list-item/ListItem.styled.js +1 -1
- package/dist/esm/components/list-item/ListItem.styled.js.map +1 -1
- package/dist/esm/components/list-item/themes.js +1 -1
- package/dist/esm/components/list-item/themes.js.map +1 -1
- package/dist/esm/src/components/checkBox/CheckBox.d.ts +1 -0
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.d.ts +2 -0
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/menu/MenuItem.d.ts +2 -0
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/menu/MenuList.d.ts +2 -0
- package/dist/esm/src/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.d.ts +2 -0
- package/dist/esm/src/components/dropdown/type.d.ts +4 -0
- package/dist/esm/src/components/list-item/List.model.d.ts +1 -0
- package/dist/esm/src/components/list-item/ListItem.styled.d.ts +1 -0
- package/dist/esm/src/components/list-item/themes.d.ts +2 -2
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__rest as e}from"../../../_virtual/_tslib.js";import{jsx as t,Fragment as r,jsxs as i}from"react/jsx-runtime";import n,{forwardRef as s,useRef as o,useState as l,useMemo as a,useImperativeHandle as d,useCallback as g,useEffect as u}from"react";import{COLORS as c}from"../../../constants/Theme.js";import{useWindowSize as h}from"../../../hooks/useWindowSize.js";import{Button as v}from"../../button/Button.js";import{BodySecondary as p}from"../../TypographyStyle.js";import{GiftedChatAppType as m}from"../Bubble/types.js";import{Day as f}from"./Day.js";import{getMessagePlacement as b,shouldCenterAlign as
|
|
1
|
+
import{__rest as e}from"../../../_virtual/_tslib.js";import{jsx as t,Fragment as r,jsxs as i}from"react/jsx-runtime";import n,{forwardRef as s,useRef as o,useState as l,useMemo as a,useImperativeHandle as d,useCallback as g,useEffect as u}from"react";import{COLORS as c}from"../../../constants/Theme.js";import{useWindowSize as h}from"../../../hooks/useWindowSize.js";import{Button as v}from"../../button/Button.js";import{BodySecondary as p}from"../../TypographyStyle.js";import{GiftedChatAppType as m}from"../Bubble/types.js";import{Day as f}from"./Day.js";import{getMessagePlacement as b,shouldCenterAlign as y}from"./messageHelpers.js";import{useScrollToBottom as x,useInitialMountScroll as j,useScrollCleanup as T,useRestoreScrollPosition as w,useAutoScrollOnNewMessages as M,useResizeObserverForFirstMessage as O,useScrollHandler as A}from"./scrollHooks.js";import{MESSAGE_CHANNELS as _}from"./types.js";import{TOP_THRESHOLD as S,normalizeRef as k,isSameDay as R,Constants as B}from"./utils.js";const E=e=>{let{text:n,isExpanded:s,onToggle:a}=e;const d=o(null),[g,c]=l(!1);return u((()=>{const e=d.current;if(e){e.style.maxHeight="none";const t=e.scrollHeight>204;e.style.maxHeight=s?"none":"204px",c(t)}}),[n,s]),i(r,{children:[t("div",Object.assign({ref:d,style:{maxHeight:s?"none":204,overflow:"hidden"}},{children:t(p,{children:n})})),g&&t(v,{buttonType:"text",size:"xs",buttonText:s?"Show less":"Read more",onClick:a})]})};var H=s(((s,u)=>{var v;const p=s||{},{messages:H=[],user:L,renderBubble:C,renderAvatar:I,renderDay:D,renderLoading:P,renderChatEmpty:$,listViewProps:F={},renderAvatarOnTop:U=!1,showUserAvatar:V=!1,showAvatarForEveryMessage:W=!1,inverted:G=!1,messageIdGenerator:z,topThreshold:N=S,appType:Y=m.Bik,maxHeight:X,isActivityMessage:q}=p,J=e(p,["messages","user","renderBubble","renderAvatar","renderDay","renderLoading","renderChatEmpty","listViewProps","renderAvatarOnTop","showUserAvatar","showAvatarForEveryMessage","inverted","messageIdGenerator","topThreshold","appType","maxHeight","isActivityMessage"]),K=h(),Q=o(null),Z=k(F.ref||u,Q),ee=o({isInitialMount:!0,isUserScrolling:!1,isLoadingOldMessages:!1,isAtBottom:!0,hasTriggeredEndReached:!1,lastMessagesLength:null!==(v=null==H?void 0:H.length)&&void 0!==v?v:0,previousScrollHeight:0,previousScrollTop:0,scrollTimeout:null}),[te,re]=l(new Set),ie=a((()=>H&&0!==H.length?[...H].reverse():[]),[H]),ne=x(Z,ee);d(u,(()=>Z.current)),j(Z,ee,ie.length,ne),T(ee),w(Z,ee,ie.length),M(Z,ee,H.length,ne),O(null==H?void 0:H[0],ee,ne,z);const se=A(ee,F.onEndReached,F.onScroll,N),oe=g((e=>{var t;return Boolean(e&&L&&(null===(t=e.user)||void 0===t?void 0:t._id)===L._id)}),[L]),le=g(((e,t)=>!!V&&(!!W||(!t||!!q&&q(e)||!!q&&q(t)||t.user._id!==e.user._id))),[V,W,q]),ae=g(((e,r,i)=>{var n,s,o,l,a;const d=oe(e)?"right":"left",g=(null===(n=null==r?void 0:r.user)||void 0===n?void 0:n._id)!==(null===(s=null==e?void 0:e.user)||void 0===s?void 0:s._id),u=(null===(o=null==i?void 0:i.user)||void 0===o?void 0:o._id)!==(null===(l=null==e?void 0:e.user)||void 0===l?void 0:l._id),h=Object.assign({currentMessage:e,previousMessage:r,nextMessage:i,position:d,user:L},J);if(C)return C(h);const v=e._id,p=te.has(v);return t("div",Object.assign({style:Object.assign(Object.assign({maxWidth:Y===m.Manifest?"50%":"70%",width:"fit-content"},Y===m.Manifest?{minWidth:"130px"}:{}),{padding:"8px 12px",borderTopLeftRadius:"left"===d?g?12:2:12,borderTopRightRadius:"right"===d?g?12:2:12,borderBottomLeftRadius:"left"===d?u?12:2:12,borderBottomRightRadius:"right"===d?u?12:2:12,border:"left"===d&&Y===m.Manifest?"1px solid rgb(224, 224, 224)":"none",backgroundColor:"right"===d?Y===m.Manifest?c.background.brandTint:c.background.brandLight:Y===m.Manifest?c.background.pureWhite:c.background.inactive,color:c.content.primary,wordBreak:"break-word"})},{children:t(E,{text:null!==(a=e.text)&&void 0!==a?a:"",isExpanded:p,onToggle:()=>re((e=>{const t=new Set(e);return p?t.delete(v):t.add(v),t}))})}))}),[oe,L,C,J,te]),de=g(((e,t,r)=>{if(!le(e,t))return null;const i=oe(e)?"right":"left";return I?I({currentMessage:e,previousMessage:t,nextMessage:r,position:i,user:L,renderAvatarOnTop:U,showUserAvatar:V,showAvatarForEveryMessage:W}):null}),[le,oe,L,U,V,W,I]);return H&&0!==H.length?i("div",Object.assign({ref:Z,style:Object.assign(Object.assign({flex:1,overflowY:"auto",overflowX:"hidden",display:"flex",flexDirection:"column"},X?{maxHeight:X,height:X}:{}),F.style),onScroll:se},{children:[t("div",{style:{flex:"1 0 auto"}}),t("div",Object.assign({style:{display:"flex",flexDirection:"column",flex:"0 0 auto"}},{children:ie.map(((e,r)=>{var s,o,l,a,d,g;const u=(null==e?void 0:e.channelId)===_.SMTP||(null==e?void 0:e.channelName)===_.SMTP,c=u?"left":oe(e)?"right":"left",h=ie[r-1],v=ie[r+1],p=!R(e,h),x=b(e,c),j=y(e),T=e.category===B.ChatActivity.Category.ACTIVITY&&e.activityType===B.ChatActivity.Type.PRIVATE_NOTE;return i(n.Fragment,{children:[p&&(D?D({createdAt:e.createdAt}):t(f,{createdAt:e.createdAt,appType:Y})),i("div",Object.assign({style:Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},K?{margin:"0 4px"}:{}),j?{}:{display:"flex",alignItems:"flex-start"}),Y!==m.Manifest?K||"right"!==c?{marginRight:8}:{marginLeft:8}:{}),u&&!T&&K?{marginLeft:8,marginRight:8}:{}),{justifyContent:x,marginBottom:v?(null===(s=null==v?void 0:v.user)||void 0===s?void 0:s._id)===(null===(o=null==e?void 0:e.user)||void 0===o?void 0:o._id)?4:20:0})},{children:[!K&&"left"===c&&t("div",Object.assign({style:{marginRight:"4px",width:"24px",flexShrink:0}},{children:de(e,h,v)})),t("div",Object.assign({id:`message-bubble-${null!==(l=e._id)&&void 0!==l?l:`${r}-${null!==(a=null==z?void 0:z())&&void 0!==a?a:"id"}`}`,style:Y===m.Manifest?{width:"100%"}:K||u?{display:"flex",flexGrow:1,width:"100%"}:{}},{children:ae(e,h,v)})),!K&&"right"===c&&t("div",Object.assign({style:{marginLeft:"4px",width:"24px",flexShrink:0,alignSelf:"flex-start"}},{children:de(e,h,v)}))]}))]},null!==(d=e._id)&&void 0!==d?d:`${r}-${null!==(g=null==z?void 0:z())&&void 0!==g?g:"id"}`)}))}))]})):$?t(r,{children:$()}):null}));export{H as default};
|
|
2
2
|
//# sourceMappingURL=GiftedChat.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GiftedChat.js","sources":["../../../../../src/components/BikGiftedChat/GiftedChat/GiftedChat.tsx"],"sourcesContent":["import React, {\n\tforwardRef,\n\tuseCallback,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { COLORS } from '../../../constants/Theme';\nimport { useWindowSize } from '../../../hooks/useWindowSize';\nimport { Button } from '../../button';\nimport { BodySecondary } from '../../TypographyStyle';\nimport { BubbleProps, GiftedChatAppType } from '../Bubble/types';\nimport { IMessage } from '../types';\nimport { Day } from './Day';\nimport { getMessagePlacement, shouldCenterAlign } from './messageHelpers';\nimport {\n\tuseAutoScrollOnNewMessages,\n\tuseInitialMountScroll,\n\tuseResizeObserverForFirstMessage,\n\tuseRestoreScrollPosition,\n\tuseScrollCleanup,\n\tuseScrollHandler,\n\tuseScrollToBottom,\n} from './scrollHooks';\nimport { AvatarProps, GiftedChatProps, MESSAGE_CHANNELS } from './types';\nimport { isSameDay, normalizeRef } from './utils';\nimport { Constants, TOP_THRESHOLD } from './utils';\n\nconst COLLAPSED_MAX_HEIGHT = 204;\n\nconst CollapsibleBubbleText: React.FC<{\n\ttext: string;\n\tisExpanded: boolean;\n\tonToggle: () => void;\n}> = ({ text, isExpanded, onToggle }) => {\n\tconst textRef = useRef<HTMLDivElement>(null);\n\tconst [isOverflowing, setIsOverflowing] = useState(false);\n\n\tuseEffect(() => {\n\t\tconst el = textRef.current;\n\t\tif (el) {\n\t\t\t// Temporarily remove max-height to measure true scroll height\n\t\t\tel.style.maxHeight = 'none';\n\t\t\tconst overflows = el.scrollHeight > COLLAPSED_MAX_HEIGHT;\n\t\t\tel.style.maxHeight = isExpanded ? 'none' : `${COLLAPSED_MAX_HEIGHT}px`;\n\t\t\tsetIsOverflowing(overflows);\n\t\t}\n\t}, [text, isExpanded]);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tref={textRef}\n\t\t\t\tstyle={{\n\t\t\t\t\tmaxHeight: isExpanded ? 'none' : COLLAPSED_MAX_HEIGHT,\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<BodySecondary>{text}</BodySecondary>\n\t\t\t</div>\n\t\t\t{isOverflowing && (\n\t\t\t\t<Button\n\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\tbuttonText={isExpanded ? 'Show less' : 'Read more'}\n\t\t\t\t\tonClick={onToggle}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst GiftedChatInner = (\n\tprops: Omit<GiftedChatProps<IMessage>, 'ref'>,\n\tforwardedRef: React.Ref<HTMLDivElement>,\n) => {\n\tconst {\n\t\tmessages = [],\n\t\tuser,\n\t\trenderBubble,\n\t\trenderAvatar,\n\t\trenderDay,\n\t\trenderLoading,\n\t\trenderChatEmpty,\n\t\tlistViewProps = {},\n\t\trenderAvatarOnTop = false,\n\t\tshowUserAvatar = false,\n\t\tshowAvatarForEveryMessage = false,\n\t\tinverted = false,\n\t\tmessageIdGenerator,\n\t\ttopThreshold = TOP_THRESHOLD,\n\t\tappType = GiftedChatAppType.Bik,\n\t\tmaxHeight,\n\t\tisActivityMessage,\n\t\t...extraProps\n\t} = props || {};\n\n\tconst isMobile = useWindowSize();\n\n\tconst internalScrollRef = useRef<HTMLDivElement | null>(null);\n\tconst scrollRef = normalizeRef(\n\t\tlistViewProps.ref || forwardedRef,\n\t\tinternalScrollRef,\n\t);\n\n\tconst scrollState = useRef({\n\t\tisInitialMount: true,\n\t\tisUserScrolling: false,\n\t\tisLoadingOldMessages: false,\n\t\tisAtBottom: true,\n\t\thasTriggeredEndReached: false,\n\t\tlastMessagesLength: messages?.length ?? 0,\n\t\tpreviousScrollHeight: 0,\n\t\tpreviousScrollTop: 0,\n\t\tscrollTimeout: null,\n\t});\n\n\tconst [expandedMessages, setExpandedMessages] = useState<\n\t\tSet<string | number>\n\t>(new Set());\n\n\t// Reverse messages so newest appears last in DOM (natural reading order)\n\tconst reversedMessages = useMemo(() => {\n\t\tif (!messages || messages.length === 0) return [] as IMessage[];\n\t\treturn [...messages].reverse() as IMessage[];\n\t}, [messages]);\n\n\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{reversedMessages.map((message, index) => {\n\t\t\t\t\tconst isSmtp =\n\t\t\t\t\t\tmessage?.['channelId'] === MESSAGE_CHANNELS.SMTP ||\n\t\t\t\t\t\tmessage?.['channelName'] === MESSAGE_CHANNELS.SMTP;\n\t\t\t\t\tconst position = isSmtp\n\t\t\t\t\t\t? 'left'\n\t\t\t\t\t\t: isUserMessage(message)\n\t\t\t\t\t\t? 'right'\n\t\t\t\t\t\t: 'left';\n\t\t\t\t\tconst previousMessage = reversedMessages[index - 1];\n\t\t\t\t\tconst nextMessage = reversedMessages[index + 1];\n\t\t\t\t\tconst shouldShowDay = !isSameDay(message, previousMessage);\n\t\t\t\t\tconst placement = getMessagePlacement(message, position);\n\t\t\t\t\tconst isCentered = shouldCenterAlign(message);\n\t\t\t\t\t// Check if message is a private note\n\t\t\t\t\tconst isPrivateNote =\n\t\t\t\t\t\tmessage['category'] === Constants.ChatActivity.Category.ACTIVITY &&\n\t\t\t\t\t\tmessage['activityType'] ===\n\t\t\t\t\t\t\tConstants.ChatActivity.Type.PRIVATE_NOTE;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<React.Fragment\n\t\t\t\t\t\t\tkey={message._id ?? `${index}-${messageIdGenerator?.() ?? 'id'}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{/* Day separator */}\n\t\t\t\t\t\t\t{shouldShowDay &&\n\t\t\t\t\t\t\t\t(renderDay ? (\n\t\t\t\t\t\t\t\t\trenderDay({ createdAt: message.createdAt })\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<Day createdAt={message.createdAt} appType={appType} />\n\t\t\t\t\t\t\t\t))}\n\n\t\t\t\t\t\t\t{/* Message container */}\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t...(isMobile ? { margin: '0 4px' } : {}),\n\t\t\t\t\t\t\t\t\t...(isCentered\n\t\t\t\t\t\t\t\t\t\t? {}\n\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...(appType !== GiftedChatAppType.Manifest\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? { marginLeft: 8 }\n\t\t\t\t\t\t\t\t\t\t\t: { marginRight: 8 }\n\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t\t...(isSmtp && !isPrivateNote && isMobile\n\t\t\t\t\t\t\t\t\t\t? { marginLeft: 8, marginRight: 8 }\n\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t\tjustifyContent: placement,\n\t\t\t\t\t\t\t\t\tmarginBottom: nextMessage\n\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? 4\n\t\t\t\t\t\t\t\t\t\t\t: 20\n\t\t\t\t\t\t\t\t\t\t: 0,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{/* Left avatar or placeholder (for mobile, avatar is hidden) */}\n\t\t\t\t\t\t\t\t{!isMobile && position === 'left' && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tmarginRight: isSmtp ? '0px' : '4px',\n\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\tflexShrink: 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{renderMessageAvatar(message, previousMessage, nextMessage)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t{/* Message bubble */}\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tid={`message-bubble-${\n\t\t\t\t\t\t\t\t\t\tmessage._id ?? `${index}-${messageIdGenerator?.() ?? 'id'}`\n\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\tappType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t\t\t? { width: '100%' }\n\t\t\t\t\t\t\t\t\t\t\t: isSmtp\n\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: {}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{renderMessageBubble(message, previousMessage, nextMessage)}\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t{/* Right avatar or placeholder (for mobile, avatar is hidden) */}\n\t\t\t\t\t\t\t\t{!isMobile && position === 'right' && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tmarginLeft: '4px',\n\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\t\t\t\t\t\talignSelf: 'flex-start',\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{renderMessageAvatar(message, previousMessage, nextMessage)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</React.Fragment>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default forwardRef<HTMLDivElement, GiftedChatProps<IMessage>>(\n\tGiftedChatInner,\n);\n"],"names":["CollapsibleBubbleText","_ref","text","isExpanded","onToggle","textRef","useRef","isOverflowing","setIsOverflowing","useState","useEffect","el","current","style","maxHeight","overflows","scrollHeight","_jsxs","_jsx","Object","assign","ref","overflow","children","BodySecondary","Button","buttonType","size","buttonText","onClick","GiftedChat","forwardRef","GiftedChatInner","props","forwardedRef","_b","messages","user","renderBubble","renderAvatar","renderDay","renderLoading","renderChatEmpty","listViewProps","renderAvatarOnTop","showUserAvatar","showAvatarForEveryMessage","inverted","messageIdGenerator","topThreshold","TOP_THRESHOLD","appType","GiftedChatAppType","Bik","isActivityMessage","extraProps","__rest","isMobile","useWindowSize","internalScrollRef","scrollRef","normalizeRef","scrollState","isInitialMount","isUserScrolling","isLoadingOldMessages","isAtBottom","hasTriggeredEndReached","lastMessagesLength","_a","length","previousScrollHeight","previousScrollTop","scrollTimeout","expandedMessages","setExpandedMessages","Set","reversedMessages","useMemo","reverse","scrollToBottom","useScrollToBottom","useImperativeHandle","useInitialMountScroll","useScrollCleanup","useRestoreScrollPosition","useAutoScrollOnNewMessages","useResizeObserverForFirstMessage","handleScroll","useScrollHandler","onEndReached","onScroll","isUserMessage","useCallback","message","Boolean","_id","shouldShowAvatar","previousMessage","renderMessageBubble","nextMessage","position","isTopOfStack","isBottomOfStack","_c","_d","bubbleProps","currentMessage","messageId","has","maxWidth","Manifest","width","minWidth","padding","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","backgroundColor","COLORS","background","brandTint","brandLight","pureWhite","inactive","color","content","primary","wordBreak","_e","prev","next","delete","add","renderMessageAvatar","flex","overflowY","overflowX","display","flexDirection","height","map","index","isSmtp","MESSAGE_CHANNELS","SMTP","shouldShowDay","isSameDay","placement","getMessagePlacement","isCentered","shouldCenterAlign","isPrivateNote","Constants","ChatActivity","Category","ACTIVITY","Type","PRIVATE_NOTE","React","Fragment","createdAt","Day","margin","alignItems","marginRight","marginLeft","justifyContent","marginBottom","flexShrink","id","flexGrow","alignSelf","_f","_Fragment"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"GiftedChat.js","sources":["../../../../../src/components/BikGiftedChat/GiftedChat/GiftedChat.tsx"],"sourcesContent":["import React, {\n\tforwardRef,\n\tuseCallback,\n\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\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{reversedMessages.map((message, index) => {\n\t\t\t\t\tconst isSmtp =\n\t\t\t\t\t\tmessage?.['channelId'] === MESSAGE_CHANNELS.SMTP ||\n\t\t\t\t\t\tmessage?.['channelName'] === MESSAGE_CHANNELS.SMTP;\n\t\t\t\t\tconst position = isSmtp\n\t\t\t\t\t\t? 'left'\n\t\t\t\t\t\t: isUserMessage(message)\n\t\t\t\t\t\t? 'right'\n\t\t\t\t\t\t: 'left';\n\t\t\t\t\tconst previousMessage = reversedMessages[index - 1];\n\t\t\t\t\tconst nextMessage = reversedMessages[index + 1];\n\t\t\t\t\tconst shouldShowDay = !isSameDay(message, previousMessage);\n\t\t\t\t\tconst placement = getMessagePlacement(message, position);\n\t\t\t\t\tconst isCentered = shouldCenterAlign(message);\n\t\t\t\t\t// Check if message is a private note\n\t\t\t\t\tconst isPrivateNote =\n\t\t\t\t\t\tmessage['category'] === Constants.ChatActivity.Category.ACTIVITY &&\n\t\t\t\t\t\tmessage['activityType'] ===\n\t\t\t\t\t\t\tConstants.ChatActivity.Type.PRIVATE_NOTE;\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<React.Fragment\n\t\t\t\t\t\t\tkey={message._id ?? `${index}-${messageIdGenerator?.() ?? 'id'}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{/* Day separator */}\n\t\t\t\t\t\t\t{shouldShowDay &&\n\t\t\t\t\t\t\t\t(renderDay ? (\n\t\t\t\t\t\t\t\t\trenderDay({ createdAt: message.createdAt })\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<Day createdAt={message.createdAt} appType={appType} />\n\t\t\t\t\t\t\t\t))}\n\n\t\t\t\t\t\t\t{/* Message container */}\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t...(isMobile ? { margin: '0 4px' } : {}),\n\t\t\t\t\t\t\t\t\t...(isCentered\n\t\t\t\t\t\t\t\t\t\t? {}\n\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...(appType !== GiftedChatAppType.Manifest\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? { marginLeft: 8 }\n\t\t\t\t\t\t\t\t\t\t\t: { marginRight: 8 }\n\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t\t...(isSmtp && !isPrivateNote && isMobile\n\t\t\t\t\t\t\t\t\t\t? { marginLeft: 8, marginRight: 8 }\n\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t\tjustifyContent: placement,\n\t\t\t\t\t\t\t\t\tmarginBottom: nextMessage\n\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? 4\n\t\t\t\t\t\t\t\t\t\t\t: 20\n\t\t\t\t\t\t\t\t\t\t: 0,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{/* Left avatar or placeholder (for mobile, avatar is hidden) */}\n\t\t\t\t\t\t\t\t{!isMobile && position === 'left' && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tmarginRight: '4px',\n\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\tflexShrink: 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{renderMessageAvatar(message, previousMessage, nextMessage)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t{/* Message bubble */}\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tid={`message-bubble-${\n\t\t\t\t\t\t\t\t\t\tmessage._id ?? `${index}-${messageIdGenerator?.() ?? 'id'}`\n\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\tappType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t\t\t? { width: '100%' }\n\t\t\t\t\t\t\t\t\t\t\t: isMobile || isSmtp\n\t\t\t\t\t\t\t\t\t\t\t? { display: 'flex', flexGrow: 1, width: '100%' }\n\t\t\t\t\t\t\t\t\t\t\t: {}\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{renderMessageBubble(message, previousMessage, nextMessage)}\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t{/* Right avatar or placeholder (for mobile, avatar is hidden) */}\n\t\t\t\t\t\t\t\t{!isMobile && position === 'right' && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tmarginLeft: '4px',\n\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\t\t\t\t\t\talignSelf: 'flex-start',\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{renderMessageAvatar(message, previousMessage, nextMessage)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</React.Fragment>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default forwardRef<HTMLDivElement, GiftedChatProps<IMessage>>(\n\tGiftedChatInner,\n);\n"],"names":["CollapsibleBubbleText","_ref","text","isExpanded","onToggle","textRef","useRef","isOverflowing","setIsOverflowing","useState","useEffect","el","current","style","maxHeight","overflows","scrollHeight","_jsxs","_jsx","Object","assign","ref","overflow","children","BodySecondary","Button","buttonType","size","buttonText","onClick","GiftedChat","forwardRef","GiftedChatInner","props","forwardedRef","_b","messages","user","renderBubble","renderAvatar","renderDay","renderLoading","renderChatEmpty","listViewProps","renderAvatarOnTop","showUserAvatar","showAvatarForEveryMessage","inverted","messageIdGenerator","topThreshold","TOP_THRESHOLD","appType","GiftedChatAppType","Bik","isActivityMessage","extraProps","__rest","isMobile","useWindowSize","internalScrollRef","scrollRef","normalizeRef","scrollState","isInitialMount","isUserScrolling","isLoadingOldMessages","isAtBottom","hasTriggeredEndReached","lastMessagesLength","_a","length","previousScrollHeight","previousScrollTop","scrollTimeout","expandedMessages","setExpandedMessages","Set","reversedMessages","useMemo","reverse","scrollToBottom","useScrollToBottom","useImperativeHandle","useInitialMountScroll","useScrollCleanup","useRestoreScrollPosition","useAutoScrollOnNewMessages","useResizeObserverForFirstMessage","handleScroll","useScrollHandler","onEndReached","onScroll","isUserMessage","useCallback","message","Boolean","_id","shouldShowAvatar","previousMessage","renderMessageBubble","nextMessage","position","isTopOfStack","isBottomOfStack","_c","_d","bubbleProps","currentMessage","messageId","has","maxWidth","Manifest","width","minWidth","padding","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius","border","backgroundColor","COLORS","background","brandTint","brandLight","pureWhite","inactive","color","content","primary","wordBreak","_e","prev","next","delete","add","renderMessageAvatar","flex","overflowY","overflowX","display","flexDirection","height","map","index","isSmtp","MESSAGE_CHANNELS","SMTP","shouldShowDay","isSameDay","placement","getMessagePlacement","isCentered","shouldCenterAlign","isPrivateNote","Constants","ChatActivity","Category","ACTIVITY","Type","PRIVATE_NOTE","React","Fragment","createdAt","Day","margin","alignItems","marginRight","marginLeft","justifyContent","marginBottom","flexShrink","id","flexGrow","alignSelf","_f","_Fragment"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,jsx as i,Fragment as l}from"react/jsx-runtime";import{useState as s,useEffect as
|
|
1
|
+
import{jsxs as e,jsx as i,Fragment as l}from"react/jsx-runtime";import{useState as s,useEffect as a,useMemo as t}from"react";import{CheckboxContainer as r,CheckboxIcon as o}from"./CheckBox.styled.js";import{BodyCaption as d,BodySecondary as n,BodyPrimary as c,TitleSmall as b,TitleRegular as h}from"../TypographyStyle.js";import{COLORS as m}from"../../constants/Theme.js";const p=l=>{const s=t((()=>l.activeColor||m.background.positive.vibrant),[l.activeColor]);return e("svg",Object.assign({width:l.isSmall?"16":"18",height:l.isSmall?"16":"18",viewBox:l.isSmall?"0 0 16 16":"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[i("rect",{x:"0",y:"0",width:l.isSmall?"16":"18",height:l.isSmall?"16":"18",rx:"4",fill:l.isDisabled?m.content.inactive:s}),!l.isPartial&&i("svg",Object.assign({width:l.isSmall?"8":"10",height:l.isSmall?"7":"9",x:"4",y:"4",viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:i("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"})})),l.isPartial&&i("rect",{x:"5",y:l.isSmall?"7":"8",width:l.isSmall?"6":"8",height:"2",rx:"1",fill:m.surface.standard})]}))},v=t=>{var v;const[y,g]=s(t.isChecked||!1),[x,C]=s(t.isPartiallyChecked||!1),[S,u]=s(t.isDisabled||!1),[w,f]=s(!1),[k,D]=s(!1);a((()=>{g(t.isChecked)}),[t.isChecked]),a((()=>{u(t.isDisabled||!1)}),[t.isDisabled]),a((()=>{C(t.isPartiallyChecked||!1)}),[t.isPartiallyChecked]);return e(r,Object.assign({onClick:e=>{var i;if(!t.isDisabled){const l=!y;x?C(!x):g(l),null===(i=t.onValueChange)||void 0===i||i.call(t,l,t.value,e)}},onMouseEnter:()=>f(!t.skipHoverState),onMouseLeave:()=>f(!1),onMouseDown:()=>D(!t.skipHoverState),onMouseUp:()=>D(!1),isDisabled:S,enableHover:t.enableHover,style:null!==(v=t.style)&&void 0!==v?v:{}},{children:[i(o,Object.assign({checked:y,hovered:w,clicked:k,isDisabled:S,size:t.size,borderColor:t.checkboxBorderColor},{children:y&&i(p,{isPartial:x||!1,isDisabled:S,isSmall:"SMALL"===t.size,activeColor:null==t?void 0:t.activeColor})})),(()=>{if(!t.label)return i(l,{});if(t.labelTypography){const e={bodyCaption:d,bodySecondary:n,bodyPrimary:c,titleSmall:b}[t.labelTypography];return i(e,Object.assign({color:t.isDisabled?m.text.disabled:m.text.primary},{children:t.label}))}return t.boldOnChecked&&y||t.bold?"DEFAULT"===t.labelSize?i(h,Object.assign({color:t.isDisabled?m.text.disabled:m.text.primary},{children:t.label})):i(b,Object.assign({color:t.isDisabled?m.text.disabled:m.text.primary},{children:t.label})):"SMALL"===t.size||"SMALL"===t.labelSize?i(n,Object.assign({color:t.isDisabled?m.text.disabled:m.text.primary},{children:t.label})):i(c,Object.assign({color:t.isDisabled?m.text.disabled:m.text.primary},{children:t.label}))})(),t.rightComponent]}))};export{v as CheckBox};
|
|
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\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';\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};\n\nconst CheckMark: React.FC<{\n\tisPartial: boolean;\n\tisDisabled: boolean;\n\tisSmall: boolean;\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\treturn (\n\t\t<svg\n\t\t\twidth={props.isSmall ? '16' : '18'}\n\t\t\theight={props.isSmall ? '16' : '18'}\n\t\t\tviewBox={props.isSmall ? '0 0 16 16' : '0 0 18 18'}\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={props.isSmall ? '16' : '18'}\n\t\t\t\theight={props.isSmall ? '16' : '18'}\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={props.isSmall ? '8' : '10'}\n\t\t\t\t\theight={props.isSmall ? '7' : '9'}\n\t\t\t\t\tx=\"4\"\n\t\t\t\t\ty=\"4\"\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=\"5\"\n\t\t\t\t\ty={props.isSmall ? '7' : '8'}\n\t\t\t\t\twidth={props.isSmall ? '6' : '8'}\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.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\tisSmall={props.size === 'SMALL'}\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","activeColor","COLORS","background","positive","vibrant","_jsxs","Object","assign","width","isSmall","height","viewBox","fill","xmlns","children","_jsx","x","y","rx","isDisabled","content","inactive","isPartial","fillRule","clipRule","d","surface","standard","CheckBox","isChecked","setIsChecked","useState","isPartiallyChecked","setIsPartiallyChecked","setIsDisabled","isHovered","setIsHovered","isClicked","setIsClicked","useEffect","CheckboxContainer","onClick","event","newVal","_a","onValueChange","call","value","onMouseEnter","skipHoverState","onMouseLeave","onMouseDown","onMouseUp","enableHover","style","CheckboxIcon","checked","hovered","clicked","size","borderColor","checkboxBorderColor","label","boldOnChecked","bold","labelSize","TitleRegular","color","text","disabled","primary","TitleSmall","BodySecondary","BodyPrimary","rightComponent"],"mappings":"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"}
|
|
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';\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\tisSmall: boolean;\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\treturn (\n\t\t<svg\n\t\t\twidth={props.isSmall ? '16' : '18'}\n\t\t\theight={props.isSmall ? '16' : '18'}\n\t\t\tviewBox={props.isSmall ? '0 0 16 16' : '0 0 18 18'}\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={props.isSmall ? '16' : '18'}\n\t\t\t\theight={props.isSmall ? '16' : '18'}\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={props.isSmall ? '8' : '10'}\n\t\t\t\t\theight={props.isSmall ? '7' : '9'}\n\t\t\t\t\tx=\"4\"\n\t\t\t\t\ty=\"4\"\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=\"5\"\n\t\t\t\t\ty={props.isSmall ? '7' : '8'}\n\t\t\t\t\twidth={props.isSmall ? '6' : '8'}\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.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\tisSmall={props.size === 'SMALL'}\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","activeColor","COLORS","background","positive","vibrant","_jsxs","Object","assign","width","isSmall","height","viewBox","fill","xmlns","children","_jsx","x","y","rx","isDisabled","content","inactive","isPartial","fillRule","clipRule","d","surface","standard","CheckBox","isChecked","setIsChecked","useState","isPartiallyChecked","setIsPartiallyChecked","setIsDisabled","isHovered","setIsHovered","isClicked","setIsClicked","useEffect","CheckboxContainer","onClick","event","newVal","_a","onValueChange","call","value","onMouseEnter","skipHoverState","onMouseLeave","onMouseDown","onMouseUp","enableHover","style","CheckboxIcon","checked","hovered","clicked","size","borderColor","checkboxBorderColor","renderLabel","label","labelTypography","LabelTypography","bodyCaption","BodyCaption","bodySecondary","BodySecondary","bodyPrimary","BodyPrimary","titleSmall","TitleSmall","color","text","disabled","primary","boldOnChecked","bold","labelSize","TitleRegular","rightComponent"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as t}from"react/jsx-runtime";import o from"../../../../assets/icons/errorInfo.svg.js";import n from"../../../../assets/icons/refresh-purple.svg.js";import{useCallback as r,useState as i,useRef as s,useEffect as l}from"react";import{ZeroState as c}from"../../../zeroState/ZeroState.js";import{useOutside as a}from"../../../../hooks/useOutside.js";import{COLORS as u}from"../../../../constants/Theme.js";import{useDropdown as d}from"../../hooks/useDropdown.js";import{Description as p}from"./description/Description.js";import{FreeFormMenu as h}from"./menu/FreeFormMenu.js";import{MenuList as
|
|
1
|
+
import{jsx as e,jsxs as t}from"react/jsx-runtime";import o from"../../../../assets/icons/errorInfo.svg.js";import n from"../../../../assets/icons/refresh-purple.svg.js";import{useCallback as r,useState as i,useRef as s,useEffect as l}from"react";import{ZeroState as c}from"../../../zeroState/ZeroState.js";import{useOutside as a}from"../../../../hooks/useOutside.js";import{COLORS as u}from"../../../../constants/Theme.js";import{useDropdown as d}from"../../hooks/useDropdown.js";import{Description as p}from"./description/Description.js";import{FreeFormMenu as h}from"./menu/FreeFormMenu.js";import{MenuList as b}from"./menu/MenuList.js";import{SelectAllMenu as g}from"./menu/SelectAllMenu.js";import m from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as f,MenuListContainer as v}from"./OpennedDropdown.styled.js";import{SearchBox as S}from"./searchbox/SearchBox.js";import{SearchZeroState as w}from"./searchbox/SearchZeroState.js";const j=304,O=290,y=y=>{let{options:x,isSearchable:C,isMultiSelect:k,maxSelections:D,width:L,allowFreeForm:I,height:T,onClose:A,onSelect:E,onSearch:M,version:F,skipSorting:R,headerRef:B,hideSelectAll:H,primaryButtonText:q,onInfiniteScroll:z,onMultiSelectClear:P,onDropdownItemClick:V,buttonOptions:W,isSearchLoading:Z,isOptionsLoading:$,optionsErrorState:K,disableSearchOptions:N,disableSearchedOptionExcept:U,useDefaultCursor:G,containerStyle:J={},zeroState:Q,isDraggable:X=!1,onOptionsReorder:Y,hideClearButton:_=!1,showCheckboxForCustomElement:ee=!1,checkboxActiveColor:te,brandSelectedRow:oe}=y;var ne;const re=r((e=>{if(!X||!k)return e;const t=[],o=[];return e.forEach((e=>{if(e.options)o.push(e);else{e.selected?t.push(e):o.push(e)}})),[...t,...o]}),[X,k]),[ie,se]=i((()=>re(x))),le=s(ie),ce=s(!1),ae=s(Y);l((()=>{se(re(x))}),[x,re]),l((()=>{le.current=ie}),[ie]),l((()=>{ae.current=Y}),[Y]),l((()=>()=>{ce.current&&ae.current&&ae.current(le.current)}),[]);const ue=r((e=>{se(e),"2.0"===F?null==Y||Y(e):ce.current=!0}),[Y,F]),de=X?ie:x,{dropdownOptions:pe,search:he,searchedString:be,searchedOptions:ge,searchError:me,retrySearch:fe,onApplyHandler:ve,selectAllHandler:Se,onMultiSelectClear:we,onFreeFormSelect:je,onMultiSelectApply:Oe,latestDropdownOptionsRef:ye,getSelectedOptions:xe,getCurrentSelectionCount:Ce}=d(F,de,E,R||X,k,M,N,U,D),[ke,De]=i(null!=L?L:O),[Le,Ie]=i(null),[Te,Ae]=i(-1),Ee=s(null),Me=s([]),Fe=s(null);a(Ee,(()=>{if(Ie(null),k&&"2.0"===F){const e=xe(ye.current);null==A||A(e)}else null==A||A(pe)}),[B,Me]),l((()=>{const e=setTimeout((()=>{Ee.current&&Ee.current.focus({preventScroll:!0})}),0);return()=>clearTimeout(e)}),[]);l((()=>{const e=e=>{const t=(e=>{const t=[];return e.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||t.push(e)}));else{const o=e;o.disabled||t.push(o)}})),t})(be&&M?ge:pe);if(0!==t.length)if("ArrowDown"===e.key)e.preventDefault(),Ae((e=>{const o=e<t.length-1?e+1:0;return setTimeout((()=>{var e;const t=null===(e=Fe.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("ArrowUp"===e.key)e.preventDefault(),Ae((e=>{const o=e>0?e-1:t.length-1;return setTimeout((()=>{var e;const t=null===(e=Fe.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("Enter"===e.key&&Te>=0){e.preventDefault();const o=t[Te];o&&(ve(Object.assign(Object.assign({},o),{selected:!o.selected})),V&&V(o))}},t=Ee.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}}),[Te,be,ge,pe,M,ve,V]);const Re=null!=T?T:j,Be="number"==typeof Re?C&&k?Re-96:C&&!k||!C&&k?Re-48:Re:Re;l((()=>{const e=null!=L?L:O;if(null===Le)De(e);else if("number"==typeof e)De(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));De(t)}}),[Le]);const He=[],qe=(e=>{if(!k||!D&&0!==D)return e;const t=Ce(pe)>=D;return t?e.map((e=>{if(e.options)return Object.assign(Object.assign({},e),{options:e.options.map((e=>Object.assign(Object.assign({},e),{disabled:e.disabled||!e.selected&&t})))});{const o=e;return Object.assign(Object.assign({},o),{disabled:o.disabled||!o.selected&&t})}})):e})((be&&M?ge:pe).map((e=>{var t,o;if(be&&!M){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(be.toLowerCase()))&&(He.push(!be||e.label===be),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(be.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(be.toLowerCase()))?(He.push(!be||e.label===be),e):null}return e})).filter((e=>null!==e))),ze=!!C&&be&&0===qe.length,Pe=!be&&!!$,Ve=!be&&!!K&&!Pe,We=!(be||qe.length||Pe||Ve),Ze=Pe||Ve||We,$e=(null==Q?void 0:Q.title)||"No results found",Ke=(null==Q?void 0:Q.subTitle)||"Please try again later or contact us at support@bik.ai if you require further assistance.",Ne=(null==K?void 0:K.title)||"Failed to load options",Ue=(null==K?void 0:K.subTitle)||"Something went wrong while fetching the list. Please try again",Ge={buttonText:"Try again",buttonType:"text",size:"small",buttonTextColor:u.background.inverseLight,customIconColor:u.background.inverseLight,LeadingIcon:n},Je=Object.assign({IconHolderStyle:{background:u.background.negative.light},Icon:e(o,{color:u.content.negative,width:24,height:24})},K);Je.actionButton=Object.assign(Object.assign({},Ge),null!==(ne=null==K?void 0:K.actionButton)&&void 0!==ne?ne:{});const Qe=Pe?void 0:Ve?Je:Q;return t(f,Object.assign({version:F,ref:Ee,tabIndex:-1,style:Object.assign(Object.assign({width:ke},J),{outline:"none"})},{children:[t("div",Object.assign({style:{width:Le?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!C&&e(S,{onSearch:he,version:F}),Ze?e("div",Object.assign({style:{height:Re,display:"flex",background:u.background.base}},{children:e(c,Object.assign({},null!=Qe?Qe:{},{isLoading:Pe,title:Ve?Ne:$e,subTitle:Ve?Ue:Ke}))})):t(v,Object.assign({minHeight:Re,maxHeight:Be,ref:Fe},{children:[!!k&&!ze&&!H&&e(g,{version:F,options:be&&M?ge:pe,onSelect:Se,checkboxActiveColor:te,brandSelectedRow:oe}),!I&&ze&&e(w,{isLoading:Z,errorMessage:me,onRetry:fe,height:Be,searchedString:be,containerWidth:L,version:F}),I&&(ze||!!He.length&&He.every((e=>!1===e)))&&e(h,{version:F,isMultiSelect:k,onSelect:je,searchedString:be,checkboxActiveColor:te,brandSelectedRow:oe}),e(b,{onInfiniteScroll:z,onDropdownItemClick:V,version:F,onSelect:ve,showDescription:function(e,t){Ie(e&&t?{title:e,description:t}:null)},isMultiSelect:k,options:qe,useDefaultCursor:G,ref:Me,focusedIndex:Te,isDraggable:X,onOptionsReorder:ue,showCheckboxForCustomElement:ee,checkboxActiveColor:te,brandSelectedRow:oe})]})),!!k&&!Ze&&"2.0"!==F&&e(m,{onClear:()=>{we(),null==P||P()},onApply:Oe,list:be&&M?ge:pe,buttonText:q,buttonOptions:W,hideClearButton:_})]})),!!Le&&e(p,{title:Le.title,description:Le.description,version:F})]}))};export{y as OpenedDropdown};
|
|
2
2
|
//# sourceMappingURL=OpennedDropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OpennedDropdown.js","sources":["../../../../../../src/components/dropdown/OpenedDropdown/components/OpennedDropdown.tsx"],"sourcesContent":["import ErrorInfoIcon from '@src/assets/icons/errorInfo.svg';\nimport RetryIcon from '@src/assets/icons/refresh-purple.svg';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { useOutside } from '@src/hooks/useOutside';\nimport { COLORS } from '@src/constants/Theme';\nimport { useDropdown } from '../../hooks/useDropdown';\nimport {\n\tDropdownOption,\n\tGroupedOption,\n\tMultiSelectOption,\n\tOpenDropdownProps,\n\tSingleOption,\n} from '../../type';\nimport { Description } from './description/Description';\nimport { FreeFormMenu } from './menu/FreeFormMenu';\nimport { MenuList } from './menu/MenuList';\nimport { SelectAllMenu } from './menu/SelectAllMenu';\nimport MultiSelectDropdownBottomBar from './multiSelect/MultiSelectDropdownBottomBar';\nimport {\n\tMenuListContainer,\n\tOpennedDropdownContainer,\n} from './OpennedDropdown.styled';\nimport { SearchBox } from './searchbox/SearchBox';\nimport { SearchZeroState } from './searchbox/SearchZeroState';\n\n/** CONSTANTS */\nconst defaults = {\n\theight: 304,\n\twidth: 290,\n};\n\nexport const OpenedDropdown: React.FC<OpenDropdownProps> = ({\n\toptions,\n\tisSearchable,\n\tisMultiSelect,\n\tmaxSelections,\n\twidth,\n\tallowFreeForm,\n\theight,\n\tonClose,\n\tonSelect,\n\tonSearch,\n\tversion,\n\tskipSorting,\n\theaderRef,\n\thideSelectAll,\n\tprimaryButtonText,\n\tonInfiniteScroll,\n\tonMultiSelectClear: onMultiSelectClearProp,\n\tonDropdownItemClick,\n\tbuttonOptions,\n\tisSearchLoading,\n\tisOptionsLoading,\n\toptionsErrorState,\n\tdisableSearchOptions,\n\tdisableSearchedOptionExcept,\n\tuseDefaultCursor,\n\tcontainerStyle = {},\n\tzeroState = undefined,\n\tisDraggable = false,\n\tonOptionsReorder,\n\thideClearButton = false,\n\tshowCheckboxForCustomElement = false,\n}) => {\n\t// Sort options with selected at top, unselected at bottom, maintaining order within groups\n\tconst sortOptionsWithSelectedOnTop = useCallback(\n\t\t(opts: DropdownOption[]): DropdownOption[] => {\n\t\t\tif (!isDraggable || !isMultiSelect) return opts;\n\n\t\t\tconst selected: DropdownOption[] = [];\n\t\t\tconst unselected: DropdownOption[] = [];\n\n\t\t\topts.forEach((option) => {\n\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t// Handle grouped options - maintain grouping\n\t\t\t\t\tunselected.push(option);\n\t\t\t\t} else {\n\t\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\t\tif (singleOption.selected) {\n\t\t\t\t\t\tselected.push(option);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tunselected.push(option);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\n\t\t\treturn [...selected, ...unselected];\n\t\t},\n\t\t[isDraggable, isMultiSelect],\n\t);\n\n\tconst [localOptions, setLocalOptions] = useState<DropdownOption[]>(() =>\n\t\tsortOptionsWithSelectedOnTop(options),\n\t);\n\tconst localOptionsRef = useRef<DropdownOption[]>(localOptions);\n\tconst hasReorderedRef = useRef(false);\n\tconst onOptionsReorderRef = useRef(onOptionsReorder);\n\n\tuseEffect(() => {\n\t\tsetLocalOptions(sortOptionsWithSelectedOnTop(options));\n\t}, [options, sortOptionsWithSelectedOnTop]);\n\n\tuseEffect(() => {\n\t\tlocalOptionsRef.current = localOptions;\n\t}, [localOptions]);\n\n\tuseEffect(() => {\n\t\tonOptionsReorderRef.current = onOptionsReorder;\n\t}, [onOptionsReorder]);\n\n\t// Fire onOptionsReorder on unmount (dropdown close from Apply or click-outside)\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tif (hasReorderedRef.current && onOptionsReorderRef.current) {\n\t\t\t\tonOptionsReorderRef.current(localOptionsRef.current);\n\t\t\t}\n\t\t};\n\t}, []);\n\n\tconst handleOptionsReorder = useCallback(\n\t\t(reorderedOptions: DropdownOption[]) => {\n\t\t\tsetLocalOptions(reorderedOptions);\n\t\t\t// For version 2.0 (no Apply button), apply reorder immediately\n\t\t\tif (version === '2.0') {\n\t\t\t\tonOptionsReorder?.(reorderedOptions);\n\t\t\t} else {\n\t\t\t\t// For version 1.0, defer until Apply/close (handled by unmount cleanup)\n\t\t\t\thasReorderedRef.current = true;\n\t\t\t}\n\t\t},\n\t\t[onOptionsReorder, version],\n\t);\n\n\tconst optionsToUse = isDraggable ? localOptions : options;\n\tconst {\n\t\tdropdownOptions,\n\t\tsearch,\n\t\tsearchedString,\n\t\tsearchedOptions,\n\t\tsearchError,\n\t\tretrySearch,\n\t\tonApplyHandler,\n\t\tselectAllHandler,\n\t\tonMultiSelectClear,\n\t\tonFreeFormSelect,\n\t\tonMultiSelectApply,\n\t\tlatestDropdownOptionsRef,\n\t\tgetSelectedOptions,\n\t\tgetCurrentSelectionCount,\n\t} = useDropdown(\n\t\tversion,\n\t\toptionsToUse,\n\t\tonSelect,\n\t\tskipSorting || isDraggable,\n\t\tisMultiSelect,\n\t\tonSearch,\n\t\tdisableSearchOptions,\n\t\tdisableSearchedOptionExcept,\n\t\tmaxSelections,\n\t);\n\tconst [widthState, setWidthState] = useState(width ?? defaults.width);\n\tconst [descriptionInfo, setDescription] = useState<{\n\t\ttitle: string;\n\t\tdescription: string;\n\t} | null>(null);\n\tconst [focusedIndex, setFocusedIndex] = useState<number>(-1);\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst childRefs = useRef([]);\n\tconst menuListRef = useRef<HTMLDivElement>(null);\n\tuseOutside(\n\t\tref,\n\t\t() => {\n\t\t\tsetDescription(null);\n\t\t\tif (isMultiSelect && version === '2.0') {\n\t\t\t\tconst optionsToSend = getSelectedOptions(\n\t\t\t\t\tlatestDropdownOptionsRef.current,\n\t\t\t\t);\n\t\t\t\tonClose?.(optionsToSend);\n\t\t\t} else {\n\t\t\t\tonClose?.(dropdownOptions);\n\t\t\t}\n\t\t},\n\t\t[headerRef, childRefs],\n\t);\n\n\t// Auto-focus dropdown when it opens for keyboard navigation while preventing scroll to maintain popper positioning\n\tuseEffect(() => {\n\t\tconst timer = setTimeout(() => {\n\t\t\tif (ref.current) {\n\t\t\t\tref.current.focus({ preventScroll: true });\n\t\t\t}\n\t\t}, 0);\n\t\treturn () => clearTimeout(timer);\n\t}, []);\n\n\t// Get flattened selectable options\n\tconst getFlattenedOptions = (opts: DropdownOption[]): SingleOption[] => {\n\t\tconst flattened: SingleOption[] = [];\n\t\topts.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\tconst groupedOption = option as GroupedOption;\n\t\t\t\tgroupedOption.options.forEach((nestedOption) => {\n\t\t\t\t\tif (!nestedOption.disabled) {\n\t\t\t\t\t\tflattened.push(nestedOption);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\tif (!singleOption.disabled) {\n\t\t\t\t\tflattened.push(singleOption);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\treturn flattened;\n\t};\n\n\t/** Keyboard navigation handler */\n\tuseEffect(() => {\n\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\tconst currentOptions =\n\t\t\t\tsearchedString && onSearch ? searchedOptions : dropdownOptions;\n\t\t\tconst flattenedOptions = getFlattenedOptions(currentOptions);\n\n\t\t\tif (flattenedOptions.length === 0) return;\n\n\t\t\tif (e.key === 'ArrowDown') {\n\t\t\t\te.preventDefault();\n\t\t\t\tsetFocusedIndex((prev) => {\n\t\t\t\t\tconst newIndex = prev < flattenedOptions.length - 1 ? prev + 1 : 0;\n\t\t\t\t\t// Scroll to the focused item\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tconst focusedElement = menuListRef.current?.querySelector(\n\t\t\t\t\t\t\t`[data-option-index=\"${newIndex}\"]`,\n\t\t\t\t\t\t) as HTMLElement;\n\t\t\t\t\t\tif (focusedElement) {\n\t\t\t\t\t\t\tfocusedElement.scrollIntoView({\n\t\t\t\t\t\t\t\tblock: 'nearest',\n\t\t\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}, 0);\n\t\t\t\t\treturn newIndex;\n\t\t\t\t});\n\t\t\t} else if (e.key === 'ArrowUp') {\n\t\t\t\te.preventDefault();\n\t\t\t\tsetFocusedIndex((prev) => {\n\t\t\t\t\tconst newIndex = prev > 0 ? prev - 1 : flattenedOptions.length - 1;\n\t\t\t\t\t// Scroll to the focused item\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tconst focusedElement = menuListRef.current?.querySelector(\n\t\t\t\t\t\t\t`[data-option-index=\"${newIndex}\"]`,\n\t\t\t\t\t\t) as HTMLElement;\n\t\t\t\t\t\tif (focusedElement) {\n\t\t\t\t\t\t\tfocusedElement.scrollIntoView({\n\t\t\t\t\t\t\t\tblock: 'nearest',\n\t\t\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}, 0);\n\t\t\t\t\treturn newIndex;\n\t\t\t\t});\n\t\t\t} else if (e.key === 'Enter' && focusedIndex >= 0) {\n\t\t\t\te.preventDefault();\n\t\t\t\tconst focusedOption = flattenedOptions[focusedIndex];\n\t\t\t\tif (focusedOption) {\n\t\t\t\t\t// onApplyHandler handles the selection state and calls onSelect internally\n\t\t\t\t\tonApplyHandler({\n\t\t\t\t\t\t...focusedOption,\n\t\t\t\t\t\tselected: !focusedOption.selected,\n\t\t\t\t\t});\n\t\t\t\t\t// Also trigger onDropdownItemClick if provided\n\t\t\t\t\tif (onDropdownItemClick) {\n\t\t\t\t\t\tonDropdownItemClick(focusedOption);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst dropdownElement = ref.current;\n\t\tif (dropdownElement) {\n\t\t\tdropdownElement.addEventListener('keydown', handleKeyDown);\n\t\t\treturn () => {\n\t\t\t\tdropdownElement.removeEventListener('keydown', handleKeyDown);\n\t\t\t};\n\t\t}\n\t}, [\n\t\tfocusedIndex,\n\t\tsearchedString,\n\t\tsearchedOptions,\n\t\tdropdownOptions,\n\t\tonSearch,\n\t\tonApplyHandler,\n\t\tonDropdownItemClick,\n\t]);\n\n\t// LOCAL CONSTANTS\n\tconst heightToUse = height ?? defaults.height;\n\tconst menuListMaxHeight =\n\t\ttypeof heightToUse === 'number'\n\t\t\t? isSearchable && isMultiSelect\n\t\t\t\t? heightToUse - 96\n\t\t\t\t: (isSearchable && !isMultiSelect) || (!isSearchable && isMultiSelect)\n\t\t\t\t? heightToUse - 48\n\t\t\t\t: heightToUse\n\t\t\t: heightToUse;\n\n\tfunction showDescription(title?: string, description?: string) {\n\t\tif (title && description) {\n\t\t\tsetDescription({\n\t\t\t\ttitle,\n\t\t\t\tdescription,\n\t\t\t});\n\t\t} else {\n\t\t\tsetDescription(null);\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\tconst widthToUse = width ?? defaults.width;\n\t\tif (descriptionInfo === null) {\n\t\t\tsetWidthState(widthToUse);\n\t\t} else if (typeof widthToUse === 'number') {\n\t\t\tsetWidthState(widthToUse * 2);\n\t\t} else if (typeof widthToUse === 'string') {\n\t\t\tif (widthToUse.endsWith('px')) {\n\t\t\t\tconst newWidth = parseInt(widthToUse.replace('px', '')) * 2;\n\t\t\t\tsetWidthState(newWidth);\n\t\t\t}\n\t\t}\n\t}, [descriptionInfo]);\n\n\t/**\n\t * This is to show the search result in a stateless way\n\t */\n\n\tconst exactMatchFound: boolean[] = [];\n\n\tconst processOptionsWithMaxSelections = (\n\t\toptionsToProcess: DropdownOption[],\n\t) => {\n\t\tif (!isMultiSelect || (!maxSelections && maxSelections !== 0)) {\n\t\t\treturn optionsToProcess;\n\t\t}\n\n\t\t// Count from the full options list (not the filtered subset) so selections\n\t\t// hidden by a search query are still included in the limit check.\n\t\tconst currentSelectionCount = getCurrentSelectionCount(dropdownOptions);\n\t\tconst maxSelectionsReached = currentSelectionCount >= maxSelections;\n\n\t\tif (!maxSelectionsReached) {\n\t\t\treturn optionsToProcess;\n\t\t}\n\n\t\t// Disable unselected options when max selections is reached\n\t\treturn optionsToProcess.map((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\treturn {\n\t\t\t\t\t...option,\n\t\t\t\t\toptions: (option as GroupedOption).options.map((nestedOption) => ({\n\t\t\t\t\t\t...nestedOption,\n\t\t\t\t\t\tdisabled:\n\t\t\t\t\t\t\tnestedOption.disabled ||\n\t\t\t\t\t\t\t(!nestedOption.selected && maxSelectionsReached),\n\t\t\t\t\t})),\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\treturn {\n\t\t\t\t\t...singleOption,\n\t\t\t\t\tdisabled:\n\t\t\t\t\t\tsingleOption.disabled ||\n\t\t\t\t\t\t(!singleOption.selected && maxSelectionsReached),\n\t\t\t\t};\n\t\t\t}\n\t\t});\n\t};\n\n\tconst optionsToShow = processOptionsWithMaxSelections(\n\t\t(searchedString && onSearch ? searchedOptions : dropdownOptions)\n\t\t\t.map((option) => {\n\t\t\t\tif (searchedString && !onSearch) {\n\t\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t\tconst groupedOption = { ...option } as GroupedOption;\n\t\t\t\t\t\tgroupedOption.options = groupedOption.options.filter((op) => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\top.label?.toLowerCase().includes(searchedString.toLowerCase())\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\texactMatchFound.push(\n\t\t\t\t\t\t\t\t\t!searchedString || op.label === searchedString,\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\treturn groupedOption.options.length > 0 ? groupedOption : null;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\toption.label\n\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t.includes(searchedString.toLowerCase()) ||\n\t\t\t\t\t\t\t(option as SingleOption | MultiSelectOption).searchKey\n\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t.includes(searchedString.toLowerCase())\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\texactMatchFound.push(\n\t\t\t\t\t\t\t\t!searchedString || option.label === searchedString,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn option;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn option;\n\t\t\t})\n\t\t\t.filter((option) => option !== null) as DropdownOption[],\n\t);\n\n\tconst noResultForSearch =\n\t\t!!isSearchable && searchedString && optionsToShow.length === 0;\n\tconst showLoadingState = !searchedString && !!isOptionsLoading;\n\tconst showErrorState =\n\t\t!searchedString && !!optionsErrorState && !showLoadingState;\n\tconst showEmptyState =\n\t\t!searchedString &&\n\t\t!optionsToShow.length &&\n\t\t!showLoadingState &&\n\t\t!showErrorState;\n\tconst showTopLevelZeroState =\n\t\tshowLoadingState || showErrorState || showEmptyState;\n\n\tconst emptyStateTitle = zeroState?.title || 'No results found';\n\tconst emptyStateSubTitle =\n\t\tzeroState?.subTitle ||\n\t\t`Please try again later or contact us at support@bik.ai if you require further assistance.`;\n\tconst errorStateTitle = optionsErrorState?.title || 'Failed to load options';\n\tconst errorStateSubTitle =\n\t\toptionsErrorState?.subTitle ||\n\t\t'Something went wrong while fetching the list. Please try again';\n\tconst defaultErrorActionButton = {\n\t\tbuttonText: 'Try again',\n\t\tbuttonType: 'text' as const,\n\t\tsize: 'small' as const,\n\t\tbuttonTextColor: COLORS.background.inverseLight,\n\t\tcustomIconColor: COLORS.background.inverseLight,\n\t\tLeadingIcon: RetryIcon,\n\t};\n\n\tconst mergedErrorState = {\n\t\tIconHolderStyle: {\n\t\t\tbackground: COLORS.background.negative.light,\n\t\t},\n\t\tIcon: (\n\t\t\t<ErrorInfoIcon color={COLORS.content.negative} width={24} height={24} />\n\t\t),\n\t\t...optionsErrorState,\n\t};\n\tmergedErrorState.actionButton = {\n\t\t...defaultErrorActionButton,\n\t\t...(optionsErrorState?.actionButton ?? {}),\n\t};\n\tconst zeroStateProps = showLoadingState\n\t\t? undefined\n\t\t: showErrorState\n\t\t? mergedErrorState\n\t\t: zeroState;\n\n\treturn (\n\t\t<OpennedDropdownContainer\n\t\t\tversion={version}\n\t\t\tref={ref}\n\t\t\ttabIndex={-1}\n\t\t\tstyle={{\n\t\t\t\t// maxWidth: descriptionInfo ? 800 : 400,\n\t\t\t\twidth: widthState,\n\t\t\t\t...containerStyle,\n\t\t\t\toutline: 'none',\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: descriptionInfo ? '50%' : '100%',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tbackground: 'white',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{!!isSearchable && <SearchBox onSearch={search} version={version} />}\n\n\t\t\t\t{showTopLevelZeroState ? (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: heightToUse,\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tbackground: COLORS.background.base,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ZeroState\n\t\t\t\t\t\t\t{...(zeroStateProps ?? {})}\n\t\t\t\t\t\t\tisLoading={showLoadingState}\n\t\t\t\t\t\t\ttitle={showErrorState ? errorStateTitle : emptyStateTitle}\n\t\t\t\t\t\t\tsubTitle={\n\t\t\t\t\t\t\t\tshowErrorState ? errorStateSubTitle : emptyStateSubTitle\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\t\t<MenuListContainer\n\t\t\t\t\t\tminHeight={heightToUse}\n\t\t\t\t\t\tmaxHeight={menuListMaxHeight}\n\t\t\t\t\t\tref={menuListRef}\n\t\t\t\t\t>\n\t\t\t\t\t\t{!!isMultiSelect && !noResultForSearch && !hideSelectAll && (\n\t\t\t\t\t\t\t<SelectAllMenu\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\toptions={\n\t\t\t\t\t\t\t\t\tsearchedString && onSearch ? searchedOptions : dropdownOptions\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonSelect={selectAllHandler}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{!allowFreeForm && noResultForSearch && (\n\t\t\t\t\t\t\t<SearchZeroState\n\t\t\t\t\t\t\t\tisLoading={isSearchLoading}\n\t\t\t\t\t\t\t\terrorMessage={searchError}\n\t\t\t\t\t\t\t\tonRetry={retrySearch}\n\t\t\t\t\t\t\t\theight={menuListMaxHeight as number}\n\t\t\t\t\t\t\t\tsearchedString={searchedString}\n\t\t\t\t\t\t\t\tcontainerWidth={width}\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{allowFreeForm &&\n\t\t\t\t\t\t\t(noResultForSearch ||\n\t\t\t\t\t\t\t\t(!!exactMatchFound.length &&\n\t\t\t\t\t\t\t\t\texactMatchFound.every((val) => val === false))) && (\n\t\t\t\t\t\t\t\t<FreeFormMenu\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\t\t\tonSelect={onFreeFormSelect}\n\t\t\t\t\t\t\t\t\tsearchedString={searchedString}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<MenuList\n\t\t\t\t\t\t\tonInfiniteScroll={onInfiniteScroll}\n\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\tonSelect={onApplyHandler}\n\t\t\t\t\t\t\tshowDescription={showDescription}\n\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\toptions={optionsToShow}\n\t\t\t\t\t\t\tuseDefaultCursor={useDefaultCursor}\n\t\t\t\t\t\t\tref={childRefs}\n\t\t\t\t\t\t\tfocusedIndex={focusedIndex}\n\t\t\t\t\t\t\tisDraggable={isDraggable}\n\t\t\t\t\t\t\tonOptionsReorder={handleOptionsReorder}\n\t\t\t\t\t\t\tshowCheckboxForCustomElement={showCheckboxForCustomElement}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</MenuListContainer>\n\t\t\t\t)}\n\t\t\t\t{!!isMultiSelect && !showTopLevelZeroState && version !== '2.0' && (\n\t\t\t\t\t<MultiSelectDropdownBottomBar\n\t\t\t\t\t\tonClear={() => {\n\t\t\t\t\t\t\tonMultiSelectClear();\n\t\t\t\t\t\t\tonMultiSelectClearProp?.();\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonApply={onMultiSelectApply}\n\t\t\t\t\t\tlist={\n\t\t\t\t\t\t\tsearchedString && onSearch ? searchedOptions : dropdownOptions\n\t\t\t\t\t\t}\n\t\t\t\t\t\tbuttonText={primaryButtonText}\n\t\t\t\t\t\tbuttonOptions={buttonOptions}\n\t\t\t\t\t\thideClearButton={hideClearButton}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{!!descriptionInfo && (\n\t\t\t\t<Description\n\t\t\t\t\ttitle={descriptionInfo.title}\n\t\t\t\t\tdescription={descriptionInfo.description}\n\t\t\t\t\tversion={version}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</OpennedDropdownContainer>\n\t);\n};\n"],"names":["defaults","OpenedDropdown","_ref","options","isSearchable","isMultiSelect","maxSelections","width","allowFreeForm","height","onClose","onSelect","onSearch","version","skipSorting","headerRef","hideSelectAll","primaryButtonText","onInfiniteScroll","onMultiSelectClear","onMultiSelectClearProp","onDropdownItemClick","buttonOptions","isSearchLoading","isOptionsLoading","optionsErrorState","disableSearchOptions","disableSearchedOptionExcept","useDefaultCursor","containerStyle","zeroState","isDraggable","onOptionsReorder","hideClearButton","showCheckboxForCustomElement","sortOptionsWithSelectedOnTop","useCallback","opts","selected","unselected","forEach","option","push","localOptions","setLocalOptions","useState","localOptionsRef","useRef","hasReorderedRef","onOptionsReorderRef","useEffect","current","handleOptionsReorder","reorderedOptions","optionsToUse","dropdownOptions","search","searchedString","searchedOptions","searchError","retrySearch","onApplyHandler","selectAllHandler","onFreeFormSelect","onMultiSelectApply","latestDropdownOptionsRef","getSelectedOptions","getCurrentSelectionCount","useDropdown","widthState","setWidthState","descriptionInfo","setDescription","focusedIndex","setFocusedIndex","ref","childRefs","menuListRef","useOutside","optionsToSend","timer","setTimeout","focus","preventScroll","clearTimeout","handleKeyDown","e","flattenedOptions","flattened","nestedOption","disabled","singleOption","getFlattenedOptions","length","key","preventDefault","prev","newIndex","focusedElement","_a","querySelector","scrollIntoView","block","behavior","focusedOption","Object","assign","dropdownElement","addEventListener","removeEventListener","heightToUse","menuListMaxHeight","widthToUse","endsWith","newWidth","parseInt","replace","exactMatchFound","optionsToShow","optionsToProcess","maxSelectionsReached","map","processOptionsWithMaxSelections","groupedOption","filter","op","label","toLowerCase","includes","_b","searchKey","noResultForSearch","showLoadingState","showErrorState","showEmptyState","showTopLevelZeroState","emptyStateTitle","title","emptyStateSubTitle","subTitle","errorStateTitle","errorStateSubTitle","defaultErrorActionButton","buttonText","buttonType","size","buttonTextColor","COLORS","background","inverseLight","customIconColor","LeadingIcon","RetryIcon","mergedErrorState","IconHolderStyle","negative","light","Icon","_jsx","ErrorInfoIcon","color","content","actionButton","zeroStateProps","undefined","_jsxs","OpennedDropdownContainer","tabIndex","style","outline","children","display","flexDirection","SearchBox","base","ZeroState","isLoading","MenuListContainer","minHeight","maxHeight","SelectAllMenu","SearchZeroState","errorMessage","onRetry","containerWidth","every","val","FreeFormMenu","MenuList","showDescription","description","MultiSelectDropdownBottomBar","onClear","onApply","list","Description"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"OpennedDropdown.js","sources":["../../../../../../src/components/dropdown/OpenedDropdown/components/OpennedDropdown.tsx"],"sourcesContent":["import ErrorInfoIcon from '@src/assets/icons/errorInfo.svg';\nimport RetryIcon from '@src/assets/icons/refresh-purple.svg';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { useOutside } from '@src/hooks/useOutside';\nimport { COLORS } from '@src/constants/Theme';\nimport { useDropdown } from '../../hooks/useDropdown';\nimport {\n\tDropdownOption,\n\tGroupedOption,\n\tMultiSelectOption,\n\tOpenDropdownProps,\n\tSingleOption,\n} from '../../type';\nimport { Description } from './description/Description';\nimport { FreeFormMenu } from './menu/FreeFormMenu';\nimport { MenuList } from './menu/MenuList';\nimport { SelectAllMenu } from './menu/SelectAllMenu';\nimport MultiSelectDropdownBottomBar from './multiSelect/MultiSelectDropdownBottomBar';\nimport {\n\tMenuListContainer,\n\tOpennedDropdownContainer,\n} from './OpennedDropdown.styled';\nimport { SearchBox } from './searchbox/SearchBox';\nimport { SearchZeroState } from './searchbox/SearchZeroState';\n\n/** CONSTANTS */\nconst defaults = {\n\theight: 304,\n\twidth: 290,\n};\n\nexport const OpenedDropdown: React.FC<OpenDropdownProps> = ({\n\toptions,\n\tisSearchable,\n\tisMultiSelect,\n\tmaxSelections,\n\twidth,\n\tallowFreeForm,\n\theight,\n\tonClose,\n\tonSelect,\n\tonSearch,\n\tversion,\n\tskipSorting,\n\theaderRef,\n\thideSelectAll,\n\tprimaryButtonText,\n\tonInfiniteScroll,\n\tonMultiSelectClear: onMultiSelectClearProp,\n\tonDropdownItemClick,\n\tbuttonOptions,\n\tisSearchLoading,\n\tisOptionsLoading,\n\toptionsErrorState,\n\tdisableSearchOptions,\n\tdisableSearchedOptionExcept,\n\tuseDefaultCursor,\n\tcontainerStyle = {},\n\tzeroState = undefined,\n\tisDraggable = false,\n\tonOptionsReorder,\n\thideClearButton = false,\n\tshowCheckboxForCustomElement = false,\n\tcheckboxActiveColor,\n\tbrandSelectedRow,\n}) => {\n\t// Sort options with selected at top, unselected at bottom, maintaining order within groups\n\tconst sortOptionsWithSelectedOnTop = useCallback(\n\t\t(opts: DropdownOption[]): DropdownOption[] => {\n\t\t\tif (!isDraggable || !isMultiSelect) return opts;\n\n\t\t\tconst selected: DropdownOption[] = [];\n\t\t\tconst unselected: DropdownOption[] = [];\n\n\t\t\topts.forEach((option) => {\n\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t// Handle grouped options - maintain grouping\n\t\t\t\t\tunselected.push(option);\n\t\t\t\t} else {\n\t\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\t\tif (singleOption.selected) {\n\t\t\t\t\t\tselected.push(option);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tunselected.push(option);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\n\t\t\treturn [...selected, ...unselected];\n\t\t},\n\t\t[isDraggable, isMultiSelect],\n\t);\n\n\tconst [localOptions, setLocalOptions] = useState<DropdownOption[]>(() =>\n\t\tsortOptionsWithSelectedOnTop(options),\n\t);\n\tconst localOptionsRef = useRef<DropdownOption[]>(localOptions);\n\tconst hasReorderedRef = useRef(false);\n\tconst onOptionsReorderRef = useRef(onOptionsReorder);\n\n\tuseEffect(() => {\n\t\tsetLocalOptions(sortOptionsWithSelectedOnTop(options));\n\t}, [options, sortOptionsWithSelectedOnTop]);\n\n\tuseEffect(() => {\n\t\tlocalOptionsRef.current = localOptions;\n\t}, [localOptions]);\n\n\tuseEffect(() => {\n\t\tonOptionsReorderRef.current = onOptionsReorder;\n\t}, [onOptionsReorder]);\n\n\t// Fire onOptionsReorder on unmount (dropdown close from Apply or click-outside)\n\tuseEffect(() => {\n\t\treturn () => {\n\t\t\tif (hasReorderedRef.current && onOptionsReorderRef.current) {\n\t\t\t\tonOptionsReorderRef.current(localOptionsRef.current);\n\t\t\t}\n\t\t};\n\t}, []);\n\n\tconst handleOptionsReorder = useCallback(\n\t\t(reorderedOptions: DropdownOption[]) => {\n\t\t\tsetLocalOptions(reorderedOptions);\n\t\t\t// For version 2.0 (no Apply button), apply reorder immediately\n\t\t\tif (version === '2.0') {\n\t\t\t\tonOptionsReorder?.(reorderedOptions);\n\t\t\t} else {\n\t\t\t\t// For version 1.0, defer until Apply/close (handled by unmount cleanup)\n\t\t\t\thasReorderedRef.current = true;\n\t\t\t}\n\t\t},\n\t\t[onOptionsReorder, version],\n\t);\n\n\tconst optionsToUse = isDraggable ? localOptions : options;\n\tconst {\n\t\tdropdownOptions,\n\t\tsearch,\n\t\tsearchedString,\n\t\tsearchedOptions,\n\t\tsearchError,\n\t\tretrySearch,\n\t\tonApplyHandler,\n\t\tselectAllHandler,\n\t\tonMultiSelectClear,\n\t\tonFreeFormSelect,\n\t\tonMultiSelectApply,\n\t\tlatestDropdownOptionsRef,\n\t\tgetSelectedOptions,\n\t\tgetCurrentSelectionCount,\n\t} = useDropdown(\n\t\tversion,\n\t\toptionsToUse,\n\t\tonSelect,\n\t\tskipSorting || isDraggable,\n\t\tisMultiSelect,\n\t\tonSearch,\n\t\tdisableSearchOptions,\n\t\tdisableSearchedOptionExcept,\n\t\tmaxSelections,\n\t);\n\tconst [widthState, setWidthState] = useState(width ?? defaults.width);\n\tconst [descriptionInfo, setDescription] = useState<{\n\t\ttitle: string;\n\t\tdescription: string;\n\t} | null>(null);\n\tconst [focusedIndex, setFocusedIndex] = useState<number>(-1);\n\tconst ref = useRef<HTMLDivElement>(null);\n\tconst childRefs = useRef([]);\n\tconst menuListRef = useRef<HTMLDivElement>(null);\n\tuseOutside(\n\t\tref,\n\t\t() => {\n\t\t\tsetDescription(null);\n\t\t\tif (isMultiSelect && version === '2.0') {\n\t\t\t\tconst optionsToSend = getSelectedOptions(\n\t\t\t\t\tlatestDropdownOptionsRef.current,\n\t\t\t\t);\n\t\t\t\tonClose?.(optionsToSend);\n\t\t\t} else {\n\t\t\t\tonClose?.(dropdownOptions);\n\t\t\t}\n\t\t},\n\t\t[headerRef, childRefs],\n\t);\n\n\t// Auto-focus dropdown when it opens for keyboard navigation while preventing scroll to maintain popper positioning\n\tuseEffect(() => {\n\t\tconst timer = setTimeout(() => {\n\t\t\tif (ref.current) {\n\t\t\t\tref.current.focus({ preventScroll: true });\n\t\t\t}\n\t\t}, 0);\n\t\treturn () => clearTimeout(timer);\n\t}, []);\n\n\t// Get flattened selectable options\n\tconst getFlattenedOptions = (opts: DropdownOption[]): SingleOption[] => {\n\t\tconst flattened: SingleOption[] = [];\n\t\topts.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\tconst groupedOption = option as GroupedOption;\n\t\t\t\tgroupedOption.options.forEach((nestedOption) => {\n\t\t\t\t\tif (!nestedOption.disabled) {\n\t\t\t\t\t\tflattened.push(nestedOption);\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\tif (!singleOption.disabled) {\n\t\t\t\t\tflattened.push(singleOption);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t\treturn flattened;\n\t};\n\n\t/** Keyboard navigation handler */\n\tuseEffect(() => {\n\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\tconst currentOptions =\n\t\t\t\tsearchedString && onSearch ? searchedOptions : dropdownOptions;\n\t\t\tconst flattenedOptions = getFlattenedOptions(currentOptions);\n\n\t\t\tif (flattenedOptions.length === 0) return;\n\n\t\t\tif (e.key === 'ArrowDown') {\n\t\t\t\te.preventDefault();\n\t\t\t\tsetFocusedIndex((prev) => {\n\t\t\t\t\tconst newIndex = prev < flattenedOptions.length - 1 ? prev + 1 : 0;\n\t\t\t\t\t// Scroll to the focused item\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tconst focusedElement = menuListRef.current?.querySelector(\n\t\t\t\t\t\t\t`[data-option-index=\"${newIndex}\"]`,\n\t\t\t\t\t\t) as HTMLElement;\n\t\t\t\t\t\tif (focusedElement) {\n\t\t\t\t\t\t\tfocusedElement.scrollIntoView({\n\t\t\t\t\t\t\t\tblock: 'nearest',\n\t\t\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}, 0);\n\t\t\t\t\treturn newIndex;\n\t\t\t\t});\n\t\t\t} else if (e.key === 'ArrowUp') {\n\t\t\t\te.preventDefault();\n\t\t\t\tsetFocusedIndex((prev) => {\n\t\t\t\t\tconst newIndex = prev > 0 ? prev - 1 : flattenedOptions.length - 1;\n\t\t\t\t\t// Scroll to the focused item\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tconst focusedElement = menuListRef.current?.querySelector(\n\t\t\t\t\t\t\t`[data-option-index=\"${newIndex}\"]`,\n\t\t\t\t\t\t) as HTMLElement;\n\t\t\t\t\t\tif (focusedElement) {\n\t\t\t\t\t\t\tfocusedElement.scrollIntoView({\n\t\t\t\t\t\t\t\tblock: 'nearest',\n\t\t\t\t\t\t\t\tbehavior: 'smooth',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}, 0);\n\t\t\t\t\treturn newIndex;\n\t\t\t\t});\n\t\t\t} else if (e.key === 'Enter' && focusedIndex >= 0) {\n\t\t\t\te.preventDefault();\n\t\t\t\tconst focusedOption = flattenedOptions[focusedIndex];\n\t\t\t\tif (focusedOption) {\n\t\t\t\t\t// onApplyHandler handles the selection state and calls onSelect internally\n\t\t\t\t\tonApplyHandler({\n\t\t\t\t\t\t...focusedOption,\n\t\t\t\t\t\tselected: !focusedOption.selected,\n\t\t\t\t\t});\n\t\t\t\t\t// Also trigger onDropdownItemClick if provided\n\t\t\t\t\tif (onDropdownItemClick) {\n\t\t\t\t\t\tonDropdownItemClick(focusedOption);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tconst dropdownElement = ref.current;\n\t\tif (dropdownElement) {\n\t\t\tdropdownElement.addEventListener('keydown', handleKeyDown);\n\t\t\treturn () => {\n\t\t\t\tdropdownElement.removeEventListener('keydown', handleKeyDown);\n\t\t\t};\n\t\t}\n\t}, [\n\t\tfocusedIndex,\n\t\tsearchedString,\n\t\tsearchedOptions,\n\t\tdropdownOptions,\n\t\tonSearch,\n\t\tonApplyHandler,\n\t\tonDropdownItemClick,\n\t]);\n\n\t// LOCAL CONSTANTS\n\tconst heightToUse = height ?? defaults.height;\n\tconst menuListMaxHeight =\n\t\ttypeof heightToUse === 'number'\n\t\t\t? isSearchable && isMultiSelect\n\t\t\t\t? heightToUse - 96\n\t\t\t\t: (isSearchable && !isMultiSelect) || (!isSearchable && isMultiSelect)\n\t\t\t\t? heightToUse - 48\n\t\t\t\t: heightToUse\n\t\t\t: heightToUse;\n\n\tfunction showDescription(title?: string, description?: string) {\n\t\tif (title && description) {\n\t\t\tsetDescription({\n\t\t\t\ttitle,\n\t\t\t\tdescription,\n\t\t\t});\n\t\t} else {\n\t\t\tsetDescription(null);\n\t\t}\n\t}\n\n\tuseEffect(() => {\n\t\tconst widthToUse = width ?? defaults.width;\n\t\tif (descriptionInfo === null) {\n\t\t\tsetWidthState(widthToUse);\n\t\t} else if (typeof widthToUse === 'number') {\n\t\t\tsetWidthState(widthToUse * 2);\n\t\t} else if (typeof widthToUse === 'string') {\n\t\t\tif (widthToUse.endsWith('px')) {\n\t\t\t\tconst newWidth = parseInt(widthToUse.replace('px', '')) * 2;\n\t\t\t\tsetWidthState(newWidth);\n\t\t\t}\n\t\t}\n\t}, [descriptionInfo]);\n\n\t/**\n\t * This is to show the search result in a stateless way\n\t */\n\n\tconst exactMatchFound: boolean[] = [];\n\n\tconst processOptionsWithMaxSelections = (\n\t\toptionsToProcess: DropdownOption[],\n\t) => {\n\t\tif (!isMultiSelect || (!maxSelections && maxSelections !== 0)) {\n\t\t\treturn optionsToProcess;\n\t\t}\n\n\t\t// Count from the full options list (not the filtered subset) so selections\n\t\t// hidden by a search query are still included in the limit check.\n\t\tconst currentSelectionCount = getCurrentSelectionCount(dropdownOptions);\n\t\tconst maxSelectionsReached = currentSelectionCount >= maxSelections;\n\n\t\tif (!maxSelectionsReached) {\n\t\t\treturn optionsToProcess;\n\t\t}\n\n\t\t// Disable unselected options when max selections is reached\n\t\treturn optionsToProcess.map((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\treturn {\n\t\t\t\t\t...option,\n\t\t\t\t\toptions: (option as GroupedOption).options.map((nestedOption) => ({\n\t\t\t\t\t\t...nestedOption,\n\t\t\t\t\t\tdisabled:\n\t\t\t\t\t\t\tnestedOption.disabled ||\n\t\t\t\t\t\t\t(!nestedOption.selected && maxSelectionsReached),\n\t\t\t\t\t})),\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\tconst singleOption = option as SingleOption;\n\t\t\t\treturn {\n\t\t\t\t\t...singleOption,\n\t\t\t\t\tdisabled:\n\t\t\t\t\t\tsingleOption.disabled ||\n\t\t\t\t\t\t(!singleOption.selected && maxSelectionsReached),\n\t\t\t\t};\n\t\t\t}\n\t\t});\n\t};\n\n\tconst optionsToShow = processOptionsWithMaxSelections(\n\t\t(searchedString && onSearch ? searchedOptions : dropdownOptions)\n\t\t\t.map((option) => {\n\t\t\t\tif (searchedString && !onSearch) {\n\t\t\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t\t\tconst groupedOption = { ...option } as GroupedOption;\n\t\t\t\t\t\tgroupedOption.options = groupedOption.options.filter((op) => {\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\top.label?.toLowerCase().includes(searchedString.toLowerCase())\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\texactMatchFound.push(\n\t\t\t\t\t\t\t\t\t!searchedString || op.label === searchedString,\n\t\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn false;\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\treturn groupedOption.options.length > 0 ? groupedOption : null;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\toption.label\n\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t.includes(searchedString.toLowerCase()) ||\n\t\t\t\t\t\t\t(option as SingleOption | MultiSelectOption).searchKey\n\t\t\t\t\t\t\t\t?.toLowerCase()\n\t\t\t\t\t\t\t\t.includes(searchedString.toLowerCase())\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\texactMatchFound.push(\n\t\t\t\t\t\t\t\t!searchedString || option.label === searchedString,\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\treturn option;\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\treturn option;\n\t\t\t})\n\t\t\t.filter((option) => option !== null) as DropdownOption[],\n\t);\n\n\tconst noResultForSearch =\n\t\t!!isSearchable && searchedString && optionsToShow.length === 0;\n\tconst showLoadingState = !searchedString && !!isOptionsLoading;\n\tconst showErrorState =\n\t\t!searchedString && !!optionsErrorState && !showLoadingState;\n\tconst showEmptyState =\n\t\t!searchedString &&\n\t\t!optionsToShow.length &&\n\t\t!showLoadingState &&\n\t\t!showErrorState;\n\tconst showTopLevelZeroState =\n\t\tshowLoadingState || showErrorState || showEmptyState;\n\n\tconst emptyStateTitle = zeroState?.title || 'No results found';\n\tconst emptyStateSubTitle =\n\t\tzeroState?.subTitle ||\n\t\t`Please try again later or contact us at support@bik.ai if you require further assistance.`;\n\tconst errorStateTitle = optionsErrorState?.title || 'Failed to load options';\n\tconst errorStateSubTitle =\n\t\toptionsErrorState?.subTitle ||\n\t\t'Something went wrong while fetching the list. Please try again';\n\tconst defaultErrorActionButton = {\n\t\tbuttonText: 'Try again',\n\t\tbuttonType: 'text' as const,\n\t\tsize: 'small' as const,\n\t\tbuttonTextColor: COLORS.background.inverseLight,\n\t\tcustomIconColor: COLORS.background.inverseLight,\n\t\tLeadingIcon: RetryIcon,\n\t};\n\n\tconst mergedErrorState = {\n\t\tIconHolderStyle: {\n\t\t\tbackground: COLORS.background.negative.light,\n\t\t},\n\t\tIcon: (\n\t\t\t<ErrorInfoIcon color={COLORS.content.negative} width={24} height={24} />\n\t\t),\n\t\t...optionsErrorState,\n\t};\n\tmergedErrorState.actionButton = {\n\t\t...defaultErrorActionButton,\n\t\t...(optionsErrorState?.actionButton ?? {}),\n\t};\n\tconst zeroStateProps = showLoadingState\n\t\t? undefined\n\t\t: showErrorState\n\t\t? mergedErrorState\n\t\t: zeroState;\n\n\treturn (\n\t\t<OpennedDropdownContainer\n\t\t\tversion={version}\n\t\t\tref={ref}\n\t\t\ttabIndex={-1}\n\t\t\tstyle={{\n\t\t\t\t// maxWidth: descriptionInfo ? 800 : 400,\n\t\t\t\twidth: widthState,\n\t\t\t\t...containerStyle,\n\t\t\t\toutline: 'none',\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: descriptionInfo ? '50%' : '100%',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tbackground: 'white',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{!!isSearchable && <SearchBox onSearch={search} version={version} />}\n\n\t\t\t\t{showTopLevelZeroState ? (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\theight: heightToUse,\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tbackground: COLORS.background.base,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ZeroState\n\t\t\t\t\t\t\t{...(zeroStateProps ?? {})}\n\t\t\t\t\t\t\tisLoading={showLoadingState}\n\t\t\t\t\t\t\ttitle={showErrorState ? errorStateTitle : emptyStateTitle}\n\t\t\t\t\t\t\tsubTitle={\n\t\t\t\t\t\t\t\tshowErrorState ? errorStateSubTitle : emptyStateSubTitle\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\t\t<MenuListContainer\n\t\t\t\t\t\tminHeight={heightToUse}\n\t\t\t\t\t\tmaxHeight={menuListMaxHeight}\n\t\t\t\t\t\tref={menuListRef}\n\t\t\t\t\t>\n\t\t\t\t\t\t{!!isMultiSelect && !noResultForSearch && !hideSelectAll && (\n\t\t\t\t\t\t\t<SelectAllMenu\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\toptions={\n\t\t\t\t\t\t\t\t\tsearchedString && onSearch ? searchedOptions : dropdownOptions\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tonSelect={selectAllHandler}\n\t\t\t\t\t\t\t\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{!allowFreeForm && noResultForSearch && (\n\t\t\t\t\t\t\t<SearchZeroState\n\t\t\t\t\t\t\t\tisLoading={isSearchLoading}\n\t\t\t\t\t\t\t\terrorMessage={searchError}\n\t\t\t\t\t\t\t\tonRetry={retrySearch}\n\t\t\t\t\t\t\t\theight={menuListMaxHeight as number}\n\t\t\t\t\t\t\t\tsearchedString={searchedString}\n\t\t\t\t\t\t\t\tcontainerWidth={width}\n\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{allowFreeForm &&\n\t\t\t\t\t\t\t(noResultForSearch ||\n\t\t\t\t\t\t\t\t(!!exactMatchFound.length &&\n\t\t\t\t\t\t\t\t\texactMatchFound.every((val) => val === false))) && (\n\t\t\t\t\t\t\t\t<FreeFormMenu\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\t\t\tonSelect={onFreeFormSelect}\n\t\t\t\t\t\t\t\t\tsearchedString={searchedString}\n\t\t\t\t\t\t\t\t\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<MenuList\n\t\t\t\t\t\t\tonInfiniteScroll={onInfiniteScroll}\n\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\tonSelect={onApplyHandler}\n\t\t\t\t\t\t\tshowDescription={showDescription}\n\t\t\t\t\t\t\tisMultiSelect={isMultiSelect}\n\t\t\t\t\t\t\toptions={optionsToShow}\n\t\t\t\t\t\t\tuseDefaultCursor={useDefaultCursor}\n\t\t\t\t\t\t\tref={childRefs}\n\t\t\t\t\t\t\tfocusedIndex={focusedIndex}\n\t\t\t\t\t\t\tisDraggable={isDraggable}\n\t\t\t\t\t\t\tonOptionsReorder={handleOptionsReorder}\n\t\t\t\t\t\t\tshowCheckboxForCustomElement={showCheckboxForCustomElement}\n\t\t\t\t\t\t\tcheckboxActiveColor={checkboxActiveColor}\n\t\t\t\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</MenuListContainer>\n\t\t\t\t)}\n\t\t\t\t{!!isMultiSelect && !showTopLevelZeroState && version !== '2.0' && (\n\t\t\t\t\t<MultiSelectDropdownBottomBar\n\t\t\t\t\t\tonClear={() => {\n\t\t\t\t\t\t\tonMultiSelectClear();\n\t\t\t\t\t\t\tonMultiSelectClearProp?.();\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonApply={onMultiSelectApply}\n\t\t\t\t\t\tlist={\n\t\t\t\t\t\t\tsearchedString && onSearch ? searchedOptions : dropdownOptions\n\t\t\t\t\t\t}\n\t\t\t\t\t\tbuttonText={primaryButtonText}\n\t\t\t\t\t\tbuttonOptions={buttonOptions}\n\t\t\t\t\t\thideClearButton={hideClearButton}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{!!descriptionInfo && (\n\t\t\t\t<Description\n\t\t\t\t\ttitle={descriptionInfo.title}\n\t\t\t\t\tdescription={descriptionInfo.description}\n\t\t\t\t\tversion={version}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</OpennedDropdownContainer>\n\t);\n};\n"],"names":["defaults","OpenedDropdown","_ref","options","isSearchable","isMultiSelect","maxSelections","width","allowFreeForm","height","onClose","onSelect","onSearch","version","skipSorting","headerRef","hideSelectAll","primaryButtonText","onInfiniteScroll","onMultiSelectClear","onMultiSelectClearProp","onDropdownItemClick","buttonOptions","isSearchLoading","isOptionsLoading","optionsErrorState","disableSearchOptions","disableSearchedOptionExcept","useDefaultCursor","containerStyle","zeroState","isDraggable","onOptionsReorder","hideClearButton","showCheckboxForCustomElement","checkboxActiveColor","brandSelectedRow","sortOptionsWithSelectedOnTop","useCallback","opts","selected","unselected","forEach","option","push","localOptions","setLocalOptions","useState","localOptionsRef","useRef","hasReorderedRef","onOptionsReorderRef","useEffect","current","handleOptionsReorder","reorderedOptions","optionsToUse","dropdownOptions","search","searchedString","searchedOptions","searchError","retrySearch","onApplyHandler","selectAllHandler","onFreeFormSelect","onMultiSelectApply","latestDropdownOptionsRef","getSelectedOptions","getCurrentSelectionCount","useDropdown","widthState","setWidthState","descriptionInfo","setDescription","focusedIndex","setFocusedIndex","ref","childRefs","menuListRef","useOutside","optionsToSend","timer","setTimeout","focus","preventScroll","clearTimeout","handleKeyDown","e","flattenedOptions","flattened","nestedOption","disabled","singleOption","getFlattenedOptions","length","key","preventDefault","prev","newIndex","focusedElement","_a","querySelector","scrollIntoView","block","behavior","focusedOption","Object","assign","dropdownElement","addEventListener","removeEventListener","heightToUse","menuListMaxHeight","widthToUse","endsWith","newWidth","parseInt","replace","exactMatchFound","optionsToShow","optionsToProcess","maxSelectionsReached","map","processOptionsWithMaxSelections","groupedOption","filter","op","label","toLowerCase","includes","_b","searchKey","noResultForSearch","showLoadingState","showErrorState","showEmptyState","showTopLevelZeroState","emptyStateTitle","title","emptyStateSubTitle","subTitle","errorStateTitle","errorStateSubTitle","defaultErrorActionButton","buttonText","buttonType","size","buttonTextColor","COLORS","background","inverseLight","customIconColor","LeadingIcon","RetryIcon","mergedErrorState","IconHolderStyle","negative","light","Icon","_jsx","ErrorInfoIcon","color","content","actionButton","zeroStateProps","undefined","_jsxs","OpennedDropdownContainer","tabIndex","style","outline","children","display","flexDirection","SearchBox","base","ZeroState","isLoading","MenuListContainer","minHeight","maxHeight","SelectAllMenu","SearchZeroState","errorMessage","onRetry","containerWidth","every","val","FreeFormMenu","MenuList","showDescription","description","MultiSelectDropdownBottomBar","onClear","onApply","list","Description"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,Fragment as
|
|
1
|
+
import{jsx as e,Fragment as o}from"react/jsx-runtime";import{useState as t}from"react";import{CheckBox as r}from"../../../../checkBox/CheckBox.js";import{ListItem as i}from"../../../../list-item/ListItem.js";import{BodyCaption as n}from"../../../../TypographyStyle.js";import{COLORS as c}from"../../../../../constants/Theme.js";import{FreeFormContainer as l}from"./FreeFormMenu.styled.js";const s=s=>{let{searchedString:m,onSelect:a,isMultiSelect:d,version:p,checkboxActiveColor:f,brandSelectedRow:h}=s;const[u,j]=t(!1);function S(){j(!u),a(!u)}return e(i,{version:p,brandSelectedRow:h,onClick:e=>{e.preventDefault(),S()},listItem:{label:m,value:m},leadingIcon:d?e(r,{size:"2.0"===p?"SMALL":"DEFAULT",isChecked:u,onValueChange:S,activeColor:f}):e(o,{}),trailingIcon:e(l,{children:e(n,Object.assign({style:{color:c.content.secondary}},{children:"Freeform"}))})})};export{s as FreeFormMenu};
|
|
2
2
|
//# sourceMappingURL=FreeFormMenu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FreeFormMenu.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox';\nimport { ListItem } from '@src/components/list-item';\nimport { BodyCaption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { FreeFormContainer } from './FreeFormMenu.styled';\n\nexport const FreeFormMenu: React.FC<{\n\tisMultiSelect?: boolean;\n\tsearchedString: string;\n\tonSelect: (isChecked: boolean) => void;\n\tversion?: '1.0' | '2.0' | '3.0';\n}> = ({
|
|
1
|
+
{"version":3,"file":"FreeFormMenu.js","sources":["../../../../../../../src/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { CheckBox } from '@src/components/checkBox';\nimport { ListItem } from '@src/components/list-item';\nimport { BodyCaption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { FreeFormContainer } from './FreeFormMenu.styled';\n\nexport const FreeFormMenu: React.FC<{\n\tisMultiSelect?: boolean;\n\tsearchedString: string;\n\tonSelect: (isChecked: boolean) => void;\n\tversion?: '1.0' | '2.0' | '3.0';\n\tcheckboxActiveColor?: string;\n\tbrandSelectedRow?: boolean;\n}> = ({\n\tsearchedString,\n\tonSelect,\n\tisMultiSelect,\n\tversion,\n\tcheckboxActiveColor,\n\tbrandSelectedRow,\n}) => {\n\tconst [isChecked, setChecked] = useState(false);\n\tfunction onCheckHandler() {\n\t\tsetChecked(!isChecked);\n\t\tonSelect(!isChecked);\n\t}\n\n\treturn (\n\t\t<ListItem\n\t\t\tversion={version}\n\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\tonClick={(e) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tonCheckHandler();\n\t\t\t}}\n\t\t\tlistItem={{\n\t\t\t\tlabel: searchedString,\n\t\t\t\tvalue: searchedString,\n\t\t\t}}\n\t\t\tleadingIcon={\n\t\t\t\tisMultiSelect ? (\n\t\t\t\t\t<CheckBox\n\t\t\t\t\t\tsize={version === '2.0' ? 'SMALL' : 'DEFAULT'}\n\t\t\t\t\t\tisChecked={isChecked}\n\t\t\t\t\t\tonValueChange={onCheckHandler}\n\t\t\t\t\t\tactiveColor={checkboxActiveColor}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)\n\t\t\t}\n\t\t\ttrailingIcon={\n\t\t\t\t<FreeFormContainer>\n\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\tFreeform\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t</FreeFormContainer>\n\t\t\t}\n\t\t/>\n\t);\n};\n"],"names":["FreeFormMenu","_ref","searchedString","onSelect","isMultiSelect","version","checkboxActiveColor","brandSelectedRow","isChecked","setChecked","useState","onCheckHandler","_jsx","ListItem","onClick","e","preventDefault","listItem","label","value","leadingIcon","CheckBox","size","onValueChange","activeColor","_Fragment","trailingIcon","FreeFormContainer","children","BodyCaption","Object","assign","style","color","COLORS","content","secondary"],"mappings":"qYAOaA,MAAAA,EAORC,IAOA,IAPCC,eACLA,EAAcC,SACdA,EAAQC,cACRA,EAAaC,QACbA,EAAOC,oBACPA,EAAmBC,iBACnBA,GACAN,EACA,MAAOO,EAAWC,GAAcC,GAAS,GACzC,SAASC,IACRF,GAAYD,GACZL,GAAUK,EACX,CAEA,OACCI,EAACC,EACA,CAAAR,QAASA,EACTE,iBAAkBA,EAClBO,QAAUC,IACTA,EAAEC,iBACFL,GAAgB,EAEjBM,SAAU,CACTC,MAAOhB,EACPiB,MAAOjB,GAERkB,YACChB,EACCQ,EAACS,EAAQ,CACRC,KAAkB,QAAZjB,EAAoB,QAAU,UACpCG,UAAWA,EACXe,cAAeZ,EACfa,YAAalB,IAGdM,EAAKa,EAAA,IAGPC,aACCd,EAACe,EAAiB,CAAAC,SACjBhB,EAACiB,EACAC,OAAAC,OAAA,CAAAC,MAAO,CACNC,MAAOC,EAAOC,QAAQC,YAIV,CAAAR,SAAA,iBAGf"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{jsx as e,Fragment as o,jsxs as n}from"react/jsx-runtime";import t from"../../../../../assets/icons/chevronRight.svg.js";import{forwardRef as r,useState as i}from"react";import
|
|
1
|
+
import{jsx as e,Fragment as o,jsxs as n}from"react/jsx-runtime";import t from"../../../../../assets/icons/chevronRight.svg.js";import{forwardRef as r,useState as i}from"react";import l from"styled-components";import{CheckBox as a}from"../../../../checkBox/CheckBox.js";import{ListItem as s}from"../../../../list-item/ListItem.js";import{Tooltip as d}from"../../../../tooltips/Tooltip.js";import{BodyCaption as c}from"../../../../TypographyStyle.js";import{DEFAULT_THEME as p,COLORS as g}from"../../../../../constants/Theme.js";import{FreeFormContainer as m}from"./FreeFormMenu.styled.js";const u=l(s)`
|
|
2
2
|
padding: ${e=>"3.0"===e.version?"8px":"2.0"===e.version?"8px 12px":"14px 16px"} !important;
|
|
3
3
|
cursor: pointer;
|
|
4
|
-
margin-top: ${e=>"2.0"===e.version?"2px":"0"};
|
|
5
|
-
`,h=
|
|
4
|
+
margin-top: ${e=>e.brandSelectedRow?"0":"2.0"===e.version?"2px":"0"};
|
|
5
|
+
`,h=l.div`
|
|
6
6
|
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
|
|
7
7
|
border-radius: ${e=>{let{version:o}=e;return"1.0"===o?"0":"8px"}};
|
|
8
8
|
padding: ${e=>{let{version:o}=e;return"1.0"===o?"0":"4px"}};
|
|
@@ -10,7 +10,7 @@ import{jsx as e,Fragment as o,jsxs as n}from"react/jsx-runtime";import t from"..
|
|
|
10
10
|
border: ${e=>{let{version:o}=e;return"1.0"===o?`1px solid ${p.colorsV2.stroke.primary}`:"none"}};
|
|
11
11
|
max-height: 248px;
|
|
12
12
|
overflow-y: auto;
|
|
13
|
-
`,v=
|
|
13
|
+
`,v=l.div`
|
|
14
14
|
display: grid;
|
|
15
15
|
grid-template-columns: repeat(2, 2.86px);
|
|
16
16
|
grid-template-rows: repeat(3, 2.86px);
|
|
@@ -22,23 +22,23 @@ import{jsx as e,Fragment as o,jsxs as n}from"react/jsx-runtime";import t from"..
|
|
|
22
22
|
align-self: center;
|
|
23
23
|
height: fit-content;
|
|
24
24
|
min-height: 18px;
|
|
25
|
-
`,b=
|
|
25
|
+
`,b=l.div`
|
|
26
26
|
width: 2.86px;
|
|
27
27
|
height: 2.86px;
|
|
28
28
|
border-radius: 50%;
|
|
29
29
|
background-color: ${g.content.inactive};
|
|
30
30
|
flex-shrink: 0;
|
|
31
|
-
`,x=
|
|
31
|
+
`,x=l.div`
|
|
32
32
|
display: flex;
|
|
33
33
|
align-content: center;
|
|
34
34
|
justify-content: center;
|
|
35
35
|
gap: 8px;
|
|
36
|
-
`,f=
|
|
36
|
+
`,f=l.div`
|
|
37
37
|
margin-right: -4px;
|
|
38
|
-
`,D=
|
|
38
|
+
`,D=l.div`
|
|
39
39
|
display: flex;
|
|
40
40
|
align-items: center;
|
|
41
41
|
flex-direction: column;
|
|
42
42
|
flex: 1;
|
|
43
|
-
`,
|
|
43
|
+
`,C=o=>{let{onDragStart:t,onDragEnd:r}=o;return n(v,Object.assign({draggable:!0,onDragStart:t,onDragEnd:r},{children:[e(b,{}),e(b,{}),e(b,{}),e(b,{}),e(b,{}),e(b,{})]}))},j=r(((r,l)=>{let{option:s,isMultiSelect:v,showDescription:b,onSelect:j,last:y,version:I,onDropdownItemClick:O,useDefaultCursor:w,isFocused:S=!1,dataIndex:k=-1,isDraggable:T=!1,onDragStart:E,onDragOver:$,onDrop:F,onDragEnd:L,isDraggedOver:M=!1,showCheckboxForCustomElement:A=!1,checkboxActiveColor:R,brandSelectedRow:B}=r;var V,z;const[U,q]=i(s.selected),G=(e,o)=>{if(!e.children){H(!e.selected);const n=o?Object.assign(Object.assign({},e),{parent:o}):e;null==O||O(n)}},H=e=>{s.disabled||j(Object.assign(Object.assign({},s),{selected:e}))},J=w?{cursor:"default"}:{};return e(o,{children:e(d,Object.assign({body:"",tooltipContent:s.children?e("div",Object.assign({style:{backgroundColor:p.colorsV2.surface.standard},ref:l,onMouseEnter:()=>q(!0),onMouseLeave:()=>q(!1)},{children:e(h,Object.assign({version:null!=I?I:"2.0"},{children:s.children.map((o=>{var n;return e(u,{version:I,brandSelectedRow:B,style:"1.0"!==I&&(null!==(n=null==s?void 0:s.children)&&void 0!==n?n:[]).length-1?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),G(o,s)},listItem:{value:o.value,label:o.label},subText:o.subText,leadingIcon:o.leadingIcon||void 0,customComponent:o.customComponent,trailingIcon:o.trailingIcon||void 0,variant:s.disabled?"inactive":o.selected?"selected":"default"},o.value)}))}))})):e(o,{}),placement:"right-start",hideArrow:!0},{children:e(u,{version:I,brandSelectedRow:B,style:y?Object.assign(Object.assign({borderBottom:0},J),M?{borderTop:`2px solid ${g.content.brand}`,opacity:.5}:{}):Object.assign(Object.assign({},J),M?{borderTop:`2px solid ${g.content.brand}`,opacity:.5}:{}),onClick:e=>{e.preventDefault(),G(s)},onMouseOver:()=>{s.description?b(s.label,s.description):b()},listItem:{value:s.value,label:s.label},subText:s.subText,"data-option-index":k,role:"option",id:`dropdown-option-${k}`,"aria-selected":!!s.selected,onDragOver:T?$:void 0,onDrop:T?F:void 0,leadingIcon:!v||A&&s.customComponent?T?n(D,{children:[e(C,{onDragStart:E,onDragEnd:L}),s.leadingIcon&&e("div",{children:s.leadingIcon})]}):s.leadingIcon?e(o,{children:s.leadingIcon}):void 0:n(x,{children:[T&&e(C,{onDragStart:E,onDragEnd:L}),e(a,{size:"2.0"===I?"SMALL":"DEFAULT",isDisabled:null!==(V=s.disabled)&&void 0!==V&&V,isChecked:!!s.selected,onValueChange:H,activeColor:R}),e(f,{children:s.leadingIcon})]}),customComponent:v&&A&&s.customComponent?n(x,{children:[T&&e(C,{onDragStart:E,onDragEnd:L}),e(a,{size:"2.0"===I?"SMALL":"DEFAULT",isDisabled:null!==(z=s.disabled)&&void 0!==z&&z,isChecked:!!s.selected,onValueChange:H,activeColor:R}),s.customComponent]}):s.customComponent,trailingIcon:s.isFreeForm?e(m,{children:e(c,Object.assign({style:{color:g.content.secondary}},{children:"Freeform"}))}):s.children?e(t,{width:12,height:12}):s.trailingIcon?e(o,{children:s.trailingIcon}):void 0,variant:s.disabled?"inactive":S||s.selected||!v&&U?"selected":"default"})}))})}));export{j as MenuItem};
|
|
44
44
|
//# sourceMappingURL=MenuItem.js.map
|