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

@bikdotai/bik-component-library 0.0.825-5 → 0.0.825-beta.0

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

Files changed (320) hide show

package/dist/cjs/components/connected-app-dialog/ConnectedAppDialog.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),W=require("../dropdown/DropdownPopover/index.js"),$=require("../modals/Modal.js"),s=require("../TypographyStyle.js"),i=require("../../constants/Theme.js"),n=require("./ConnectedAppDialog.styled.js"),_=require("./ConnectedAppSkeleton.js"),G=require("../tag/Tag.js"),V=require("../../icons/Informational/Common UI/Placeholder.js"),Y=require("../../icons/Informational/General/Info.js"),H=require("../icon-button/IconButton.js"),J=require("../../icons/Informational/Common UI/MoreVertical.js"),l=require("../states/StateComponent.js"),Q=require("../button/Button.js"),U=({open:x,onClose:O,name:a,logoUrl:m,description:w,supportEmail:b,supportLink:d,menuOptions:u,credentials:h,fetchCredentials:S,connectedMessage:T,statusSection:k,footerButton:g,width:v="70%",height:L="71%","data-test":c})=>{const R=!!(h&&h.length>0),y=(h??[]).map(t=>t.key).join("\|"),j=R&&!!S,[I,C]=o.useState({}),[M,f]=o.useState(!1),[q,A]=o.useState(!1),[E,F]=o.useState(null),[N,z]=o.useState(0),B=o.useRef(S);B.current=S,o.useEffect(()=>{if(!x\|\|!j)return;const t=B.current;if(!t)return;let r=!0;return f(!0),A(!1),C({}),t().then(p=>{r&&(C(p\|\|{}),F(y),f(!1))}).catch(()=>{r&&(C({}),A(!0),f(!1))}),()=>{r=!1}},[x,y,N,j]);const D=j&&(M\|\|E!==y&&!q),P=(u??[]).map((t,r)=>({label:t.label,value:String(r),"data-test":t["data-test"]})),K=t=>{const r=Array.isArray(t)?t[0]:t,p=Number(r?.value);Number.isNaN(p)\|\|u?.[p]?.onClick()};return e.jsx($.Modal,{open:x,onClose:O,closeOnOutsideClick:!0,centralContainerStyles:{width:v,height:L},"data-test":c,children:D?e.jsx(_.ConnectedAppSkeleton,{}):e.jsxs(n.OverviewContainer,{children:[e.jsx(n.ConnectedBadge,{children:e.jsx(G.Tag,{type:"positive",tagText:"Connected"})}),e.jsxs(n.AboutApp,{children:[e.jsxs(n.IconAndText,{children:[e.jsx(n.IconBg,{children:m?e.jsx("img",{style:{height:"64px",width:"64px",objectFit:"cover",borderRadius:"8px"},src:m,alt:a+" logo"}):e.jsx(V.default,{size:40,color:i.COLORS.content.placeholder})}),e.jsx(s.TitleMedium,{style:{marginTop:20},children:a}),e.jsx(s.BodySecondary,{style:{marginTop:8,textAlign:"center",width:"50%"},children:w})]}),(b\|\|d)&&e.jsxs(n.ContactSupport,{children:[e.jsx(Y.default,{size:16,color:i.COLORS.content.secondary}),e.jsxs(s.Caption,{style:{marginLeft:8,color:i.COLORS.content.secondary},children:["For ",a," support contact -"," ",d?e.jsx(n.SupportLink,{href:d.url,target:"_blank",rel:"noopener noreferrer",children:d.text}):b]})]})]}),e.jsxs(n.StepstoAdd,{children:[u&&u.length>0&&e.jsx(n.PopOverContainer,{children:e.jsx(W.DropdownPopover,{options:P,onSelect:K,placement:"bottom-end",width:"220px","data-test":c?c+"-menu":"connected-app-menu",children:e.jsx(H.IconButton,{Icon:J.default,iconColor:i.COLORS.content.secondary,"data-test":c?c+"-menu-trigger":"connected-app-menu-trigger"})})}),e.jsx(n.RightBody,{children:q?e.jsx(n.SuccessStateWrapper,{children:e.jsx(l.StateComponent,{width:400,states:l.StateInterface.ERROR,heading:"Couldn't load account details",subline:"Something went wrong while fetching your credentials.",size:"SMALL",isButtonEnabled:!0,type:l.ButtonTypes.SINGLE,buttonText:"Retry",onButtonClick:()=>z(t=>t+1)})}):R?e.jsxs(e.Fragment,{children:[e.jsx(s.TitleSmall,{style:{marginBottom:"16px"},children:"Account details"}),e.jsx(n.CredsWrapper,{children:(h??[]).map((t,r)=>e.jsxs(n.CredentialsContainer,{children:[e.jsx(s.BodySecondary,{style:{marginBottom:4},color:i.COLORS.content.secondary,children:t.label}),e.jsx(s.Caption,{style:{marginBottom:16},children:I?.[t.key]})]},`${t.key}-${r}`))})]}):e.jsxs(n.SuccessStateWrapper,{children:[e.jsx(l.StateComponent,{width:400,states:l.StateInterface.SUCCESS,heading:T??`Your account is connected to ${a}`,subline:"",isButtonEnabled:!1,size:"SMALL"}),k]})}),g&&e.jsx(Q.Button,{buttonType:"text",buttonText:g.text,onClick:g.onClick,style:{alignSelf:"center",marginTop:"12px"}})]})]})})};exports.ConnectedAppDialog=U;
2	+ //# sourceMappingURL=ConnectedAppDialog.js.map

package/dist/cjs/components/connected-app-dialog/ConnectedAppDialog.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ConnectedAppDialog.js","sources":["../../../../src/components/connected-app-dialog/ConnectedAppDialog.tsx"],"sourcesContent":["import { Info, MoreVertical, Placeholder } from '@src/icons';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Button } from '@src/components/button';\nimport { DropdownPopover } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { IconButton } from '@src/components/icon-button';\nimport { Modal } from '@src/components/modals/Modal';\nimport {\n\tButtonTypes,\n\tStateComponent,\n\tStateInterface,\n} from '@src/components/states';\nimport { Tag } from '@src/components/tag';\nimport {\n\tBodySecondary,\n\tCaption,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport * as Sc from './ConnectedAppDialog.styled';\nimport { ConnectedAppSkeleton } from './ConnectedAppSkeleton';\nimport { ConnectedAppDialogProps } from './model';\n\nexport const ConnectedAppDialog: React.FC<ConnectedAppDialogProps> = ({\n\topen,\n\tonClose,\n\tname,\n\tlogoUrl,\n\tdescription,\n\tsupportEmail,\n\tsupportLink,\n\tmenuOptions,\n\tcredentials,\n\tfetchCredentials,\n\tconnectedMessage,\n\tstatusSection,\n\tfooterButton,\n\twidth = '70%',\n\theight = '71%',\n\t'data-test': dataTest,\n}) => {\n\tconst areCredsRequired = !!(credentials && credentials.length > 0);\n\t// Signature of the credential set — changes when the app (and thus its keys) changes,\n\t// which is what should trigger a refetch (not the unstable fetchCredentials identity).\n\tconst credKeySig = (credentials ?? []).map((c) => c.key).join('|');\n\tconst willFetch = areCredsRequired && !!fetchCredentials;\n\n\tconst [creds, setCreds] = useState<Record<string, string>>({});\n\tconst [loading, setLoading] = useState(false);\n\tconst [credsError, setCredsError] = useState(false);\n\tconst [fetchedSig, setFetchedSig] = useState<string | null>(null);\n\tconst [reloadKey, setReloadKey] = useState(0);\n\n\t// Hold the latest callback in a ref so the effect need not depend on its (usually inline,\n\t// unstable) identity — avoids a refetch-every-render loop without disabling exhaustive-deps.\n\tconst fetchRef = useRef(fetchCredentials);\n\tfetchRef.current = fetchCredentials;\n\n\tuseEffect(() => {\n\t\tif (!open || !willFetch) {\n\t\t\treturn;\n\t\t}\n\t\tconst fetcher = fetchRef.current;\n\t\tif (!fetcher) {\n\t\t\treturn;\n\t\t}\n\t\tlet active = true;\n\t\tsetLoading(true);\n\t\tsetCredsError(false);\n\t\tsetCreds({});\n\t\tfetcher()\n\t\t\t.then((res) => {\n\t\t\t\tif (!active) return;\n\t\t\t\tsetCreds(res || {});\n\t\t\t\tsetFetchedSig(credKeySig);\n\t\t\t\tsetLoading(false);\n\t\t\t})\n\t\t\t.catch(() => {\n\t\t\t\tif (!active) return;\n\t\t\t\tsetCreds({});\n\t\t\t\tsetCredsError(true);\n\t\t\t\tsetLoading(false);\n\t\t\t});\n\t\treturn () => {\n\t\t\tactive = false;\n\t\t};\n\t}, [open, credKeySig, reloadKey, willFetch]);\n\n\t// Show the skeleton whenever a fetch is pending OR the data on hand isn't for the current\n\t// app yet — the latter prevents a first-frame flash of empty/previous-app values on (re)open.\n\tconst showSkeleton =\n\t\twillFetch && (loading || (fetchedSig !== credKeySig && !credsError));\n\n\tconst dropdownOptions: DropdownOption[] = (menuOptions ?? []).map(\n\t\t(opt, idx) => ({\n\t\t\tlabel: opt.label,\n\t\t\tvalue: String(idx),\n\t\t\t'data-test': opt['data-test'],\n\t\t}),\n\t);\n\n\tconst handleMenuSelect = (selected: DropdownOption | DropdownOption[]) => {\n\t\tconst option = (\n\t\t\tArray.isArray(selected) ? selected[0] : selected\n\t\t) as SingleOption;\n\t\tconst idx = Number(option?.value);\n\t\tif (!Number.isNaN(idx)) {\n\t\t\tmenuOptions?.[idx]?.onClick();\n\t\t}\n\t};\n\n\treturn (\n\t\t<Modal\n\t\t\topen={open}\n\t\t\tonClose={onClose}\n\t\t\tcloseOnOutsideClick\n\t\t\tcentralContainerStyles={{ width, height }}\n\t\t\tdata-test={dataTest}\n\t\t>\n\t\t\t{showSkeleton ? (\n\t\t\t\t<ConnectedAppSkeleton />\n\t\t\t) : (\n\t\t\t\t<Sc.OverviewContainer>\n\t\t\t\t\t<Sc.ConnectedBadge>\n\t\t\t\t\t\t<Tag type=\"positive\" tagText=\"Connected\" />\n\t\t\t\t\t</Sc.ConnectedBadge>\n\t\t\t\t\t<Sc.AboutApp>\n\t\t\t\t\t\t<Sc.IconAndText>\n\t\t\t\t\t\t\t<Sc.IconBg>\n\t\t\t\t\t\t\t\t{logoUrl ? (\n\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\theight: '64px',\n\t\t\t\t\t\t\t\t\t\t\twidth: '64px',\n\t\t\t\t\t\t\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t\t\t\t\t\t\t\tborderRadius: '8px',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tsrc={logoUrl}\n\t\t\t\t\t\t\t\t\t\talt={name + ' logo'}\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<Placeholder size={40} color={COLORS.content.placeholder} />\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</Sc.IconBg>\n\t\t\t\t\t\t\t<TitleMedium style={{ marginTop: 20 }}>{name}</TitleMedium>\n\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\tstyle={{ marginTop: 8, textAlign: 'center', width: '50%' }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{description}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</Sc.IconAndText>\n\t\t\t\t\t\t{(supportEmail || supportLink) && (\n\t\t\t\t\t\t\t<Sc.ContactSupport>\n\t\t\t\t\t\t\t\t<Info size={16} color={COLORS.content.secondary} />\n\t\t\t\t\t\t\t\t<Caption\n\t\t\t\t\t\t\t\t\tstyle={{ marginLeft: 8, color: COLORS.content.secondary }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tFor {name} support contact -{' '}\n\t\t\t\t\t\t\t\t\t{supportLink ? (\n\t\t\t\t\t\t\t\t\t\t<Sc.SupportLink\n\t\t\t\t\t\t\t\t\t\t\thref={supportLink.url}\n\t\t\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{supportLink.text}\n\t\t\t\t\t\t\t\t\t\t</Sc.SupportLink>\n\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\tsupportEmail\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</Caption>\n\t\t\t\t\t\t\t</Sc.ContactSupport>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Sc.AboutApp>\n\n\t\t\t\t\t<Sc.StepstoAdd>\n\t\t\t\t\t\t{menuOptions && menuOptions.length > 0 && (\n\t\t\t\t\t\t\t<Sc.PopOverContainer>\n\t\t\t\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\t\t\t\toptions={dropdownOptions}\n\t\t\t\t\t\t\t\t\tonSelect={handleMenuSelect}\n\t\t\t\t\t\t\t\t\tplacement={'bottom-end'}\n\t\t\t\t\t\t\t\t\twidth={'220px'}\n\t\t\t\t\t\t\t\t\tdata-test={\n\t\t\t\t\t\t\t\t\t\tdataTest ? dataTest + '-menu' : 'connected-app-menu'\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<IconButton\n\t\t\t\t\t\t\t\t\t\tIcon={MoreVertical}\n\t\t\t\t\t\t\t\t\t\ticonColor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\t\tdata-test={\n\t\t\t\t\t\t\t\t\t\t\tdataTest\n\t\t\t\t\t\t\t\t\t\t\t\t? dataTest + '-menu-trigger'\n\t\t\t\t\t\t\t\t\t\t\t\t: 'connected-app-menu-trigger'\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</DropdownPopover>\n\t\t\t\t\t\t\t</Sc.PopOverContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<Sc.RightBody>\n\t\t\t\t\t\t\t{credsError ? (\n\t\t\t\t\t\t\t\t<Sc.SuccessStateWrapper>\n\t\t\t\t\t\t\t\t\t<StateComponent\n\t\t\t\t\t\t\t\t\t\twidth={400}\n\t\t\t\t\t\t\t\t\t\tstates={StateInterface.ERROR}\n\t\t\t\t\t\t\t\t\t\theading={\"Couldn't load account details\"}\n\t\t\t\t\t\t\t\t\t\tsubline={\n\t\t\t\t\t\t\t\t\t\t\t'Something went wrong while fetching your credentials.'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsize={'SMALL'}\n\t\t\t\t\t\t\t\t\t\tisButtonEnabled\n\t\t\t\t\t\t\t\t\t\ttype={ButtonTypes.SINGLE}\n\t\t\t\t\t\t\t\t\t\tbuttonText={'Retry'}\n\t\t\t\t\t\t\t\t\t\tonButtonClick={() => setReloadKey((k) => k + 1)}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Sc.SuccessStateWrapper>\n\t\t\t\t\t\t\t) : areCredsRequired ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<TitleSmall style={{ marginBottom: '16px' }}>\n\t\t\t\t\t\t\t\t\t\tAccount details\n\t\t\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t\t\t\t<Sc.CredsWrapper>\n\t\t\t\t\t\t\t\t\t\t{(credentials ?? []).map((cred, idx) => (\n\t\t\t\t\t\t\t\t\t\t\t<Sc.CredentialsContainer key={`${cred.key}-${idx}`}>\n\t\t\t\t\t\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ marginBottom: 4 }}\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{cred.label}\n\t\t\t\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t\t\t\t\t<Caption style={{ marginBottom: 16 }}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{creds?.[cred.key]}\n\t\t\t\t\t\t\t\t\t\t\t\t</Caption>\n\t\t\t\t\t\t\t\t\t\t\t</Sc.CredentialsContainer>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</Sc.CredsWrapper>\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<Sc.SuccessStateWrapper>\n\t\t\t\t\t\t\t\t\t<StateComponent\n\t\t\t\t\t\t\t\t\t\twidth={400}\n\t\t\t\t\t\t\t\t\t\tstates={StateInterface.SUCCESS}\n\t\t\t\t\t\t\t\t\t\theading={\n\t\t\t\t\t\t\t\t\t\t\tconnectedMessage ?? `Your account is connected to ${name}`\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tsubline={''}\n\t\t\t\t\t\t\t\t\t\tisButtonEnabled={false}\n\t\t\t\t\t\t\t\t\t\tsize={'SMALL'}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t{statusSection}\n\t\t\t\t\t\t\t\t</Sc.SuccessStateWrapper>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Sc.RightBody>\n\t\t\t\t\t\t{footerButton && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\t\t\t\tbuttonText={footerButton.text}\n\t\t\t\t\t\t\t\tonClick={footerButton.onClick}\n\t\t\t\t\t\t\t\tstyle={{ alignSelf: 'center', marginTop: '12px' }}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</Sc.StepstoAdd>\n\t\t\t\t</Sc.OverviewContainer>\n\t\t\t)}\n\t\t</Modal>\n\t);\n};\n"],"names":["ConnectedAppDialog","open","onClose","name","logoUrl","description","supportEmail","supportLink","menuOptions","credentials","fetchCredentials","connectedMessage","statusSection","footerButton","width","height","dataTest","areCredsRequired","credKeySig","c","willFetch","creds","setCreds","useState","loading","setLoading","credsError","setCredsError","fetchedSig","setFetchedSig","reloadKey","setReloadKey","fetchRef","useRef","useEffect","fetcher","active","res","showSkeleton","dropdownOptions","opt","idx","handleMenuSelect","selected","option","jsx","Modal","ConnectedAppSkeleton","jsxs","Sc.OverviewContainer","Sc.ConnectedBadge","Tag","Sc.AboutApp","Sc.IconAndText","Sc.IconBg","Placeholder","COLORS","TitleMedium","BodySecondary","Sc.ContactSupport","Info","Caption","Sc.SupportLink","Sc.StepstoAdd","Sc.PopOverContainer","DropdownPopover","IconButton","MoreVertical","Sc.RightBody","Sc.SuccessStateWrapper","StateComponent","StateInterface","ButtonTypes","k","Fragment","TitleSmall","Sc.CredsWrapper","cred","Sc.CredentialsContainer","Button"],"mappings":"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"}

package/dist/cjs/components/connected-app-dialog/ConnectedAppDialog.styled.js ADDED Viewed

@@ -0,0 +1,123 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),t=require("../../constants/Theme.js"),o=i=>i&&typeof i=="object"&&"default"in i?i:{default:i},e=o(n),d=e.default.div`
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	height: 100%;
+	cursor: default;
+	overflow: hidden;
+	border-radius: 4px;
+	box-sizing: border-box;
+`,r=e.default.div`
+	display: flex;
+	height: 100%;
+	width: 45%;
+	box-sizing: border-box;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	padding-top: 74px;
+	background: ${t.COLORS.surface.subdued};
+`,l=e.default.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+`,a=e.default.div`
+	height: 80px;
+	width: 80px;
+	background: ${t.COLORS.surface.hovered};
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 8px;
+	padding: 8px;
+`,c=e.default.div`
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	background: ${t.COLORS.surface.hovered};
+	min-height: 40px;
+	width: 100%;
+	box-sizing: border-box;
+	padding: 12px;
+	margin-top: auto;
+`,s=e.default.div`
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	width: 55%;
+	box-sizing: border-box;
+	background: ${t.COLORS.surface.standard};
+	padding: 18px 28px 18px 18px;
+	overflow: hidden;
+`,p=e.default.div`
+	flex: 1 1 auto;
+	min-height: 0;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	overflow-x: hidden;
+	overflow-y: auto;
+`,f=e.default.div`
+	position: absolute;
+	margin-top: 20px;
+	margin-left: 24px;
+	z-index: 1;
+`,u=e.default.div`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-end;
+	z-index: 2;
+	width: 100%;
+	padding-right: 24px;
+`,x=e.default.div`
+	display: flex;
+	flex-direction: column;
+	margin-bottom: 16px;
+`,g=e.default.div`
+	display: flex;
+	flex-direction: column;
+	margin-top: 24px;
+	width: 100%;
+`,h=e.default.a`
+	color: inherit;
+	text-decoration: underline;
+`,b=e.default.div`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+	flex: 1;
+	width: 100%;
+`,v=e.default.div`
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	border-radius: 4px;
+	box-sizing: border-box;
+`,y=e.default.div`
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	width: 45%;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 24px;
+	background: ${t.COLORS.surface.subdued};
+`,m=e.default.div`
+	display: flex;
+	flex-direction: column;
+	width: 55%;
+	height: 100%;
+	box-sizing: border-box;
+	padding: 24px;
+	background: ${t.COLORS.surface.standard};
+`;exports.AboutApp=r;exports.ConnectedBadge=f;exports.ContactSupport=c;exports.CredentialsContainer=x;exports.CredsWrapper=g;exports.IconAndText=l;exports.IconBg=a;exports.OverviewContainer=d;exports.PopOverContainer=u;exports.RightBody=p;exports.SkeletonAppInfo=y;exports.SkeletonCredsInfo=m;exports.SkeletonMain=v;exports.StepstoAdd=s;exports.SuccessStateWrapper=b;exports.SupportLink=h;
+//# sourceMappingURL=ConnectedAppDialog.styled.js.map

package/dist/cjs/components/connected-app-dialog/ConnectedAppDialog.styled.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ConnectedAppDialog.styled.js","sources":["../../../../src/components/connected-app-dialog/ConnectedAppDialog.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const OverviewContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\twidth: 100%;\n\theight: 100%;\n\tcursor: default;\n\toverflow: hidden;\n\tborder-radius: 4px;\n\tbox-sizing: border-box;\n`;\n\nexport const AboutApp = styled.div`\n\tdisplay: flex;\n\theight: 100%;\n\twidth: 45%;\n\tbox-sizing: border-box;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tpadding-top: 74px;\n\tbackground: ${COLORS.surface.subdued};\n`;\n\nexport const IconAndText = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n`;\n\nexport const IconBg = styled.div`\n\theight: 80px;\n\twidth: 80px;\n\tbackground: ${COLORS.surface.hovered};\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 8px;\n\tpadding: 8px;\n`;\n\nexport const ContactSupport = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\talign-items: center;\n\ttext-align: center;\n\tbackground: ${COLORS.surface.hovered};\n\tmin-height: 40px;\n\twidth: 100%;\n\tbox-sizing: border-box;\n\tpadding: 12px;\n\tmargin-top: auto;\n`;\n\nexport const StepstoAdd = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\twidth: 55%;\n\tbox-sizing: border-box;\n\tbackground: ${COLORS.surface.standard};\n\tpadding: 18px 28px 18px 18px;\n\toverflow: hidden;\n`;\n\n/** Scrollable content region between the kebab row and the pinned footer. */\nexport const RightBody = styled.div`\n\tflex: 1 1 auto;\n\tmin-height: 0;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-start;\n\toverflow-x: hidden;\n\toverflow-y: auto;\n`;\n\n/** Absolute-positioned wrapper for the \"Connected\" Tag in the top-left of the card. */\nexport const ConnectedBadge = styled.div`\n\tposition: absolute;\n\tmargin-top: 20px;\n\tmargin-left: 24px;\n\tz-index: 1;\n`;\n\nexport const PopOverContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: flex-end;\n\tz-index: 2;\n\twidth: 100%;\n\tpadding-right: 24px;\n`;\n\nexport const CredentialsContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-bottom: 16px;\n`;\n\nexport const CredsWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-top: 24px;\n\twidth: 100%;\n`;\n\nexport const SupportLink = styled.a`\n\tcolor: inherit;\n\ttext-decoration: underline;\n`;\n\nexport const SuccessStateWrapper = styled.div`\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tflex-direction: column;\n\tflex: 1;\n\twidth: 100%;\n`;\n\n// Skeleton layout ---------------------------------------------------------\n\nexport const SkeletonMain = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n\tborder-radius: 4px;\n\tbox-sizing: border-box;\n`;\n\nexport const SkeletonAppInfo = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 45%;\n\theight: 100%;\n\tbox-sizing: border-box;\n\tpadding: 24px;\n\tbackground: ${COLORS.surface.subdued};\n`;\n\nexport const SkeletonCredsInfo = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 55%;\n\theight: 100%;\n\tbox-sizing: border-box;\n\tpadding: 24px;\n\tbackground: ${COLORS.surface.standard};\n`;\n"],"names":["OverviewContainer","styled","AboutApp","COLORS","IconAndText","IconBg","ContactSupport","StepstoAdd","RightBody","ConnectedBadge","PopOverContainer","CredentialsContainer","CredsWrapper","SupportLink","SuccessStateWrapper","SkeletonMain","SkeletonAppInfo","SkeletonCredsInfo"],"mappings":"0NAGaA,EAAoBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAW3BC,EAAWD,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAShBE,EAAAA,OAAO,QAAQ,OAAO;AAAA,EAGxBC,EAAcH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAOrBI,EAASJ,EAAAA,QAAO;AAAA;AAAA;AAAA,eAGdE,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQxBG,EAAiBL,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMtBE,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQxBI,EAAaN,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMlBE,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA,EAMzBK,EAAYP,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYnBQ,EAAiBR,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAOxBS,EAAmBT,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU1BU,EAAuBV,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAM9BW,EAAeX,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAOtBY,EAAcZ,EAAAA,QAAO;AAAA;AAAA;AAAA,EAKrBa,EAAsBb,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAW7Bc,EAAed,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUtBe,EAAkBf,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eASvBE,EAAAA,OAAO,QAAQ,OAAO;AAAA,EAGxBc,EAAoBhB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAOzBE,EAAAA,OAAO,QAAQ,QAAQ;AAAA"}

package/dist/cjs/components/connected-app-dialog/ConnectedAppSkeleton.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("./ConnectedAppDialog.styled.js"),i=require("../shimmer/ShimmerComponent/BikShimmer.js"),t=()=>e.jsxs(p.SkeletonMain,{children:[e.jsx(p.SkeletonAppInfo,{children:e.jsx(i.BikShimmer,{boxes:[{height:"80px",width:"80px",marginTop:"0px",borderRadius:"8px"},{height:"20px",width:"140px",marginTop:"20px"},{height:"14px",width:"220px",marginTop:"12px"},{height:"14px",width:"180px",marginTop:"6px"},{height:"14px",width:"200px",marginTop:"48px"}]})}),e.jsx(p.SkeletonCredsInfo,{children:e.jsx(i.BikShimmer,{boxes:[{height:"18px",width:"120px",marginTop:"8px"},{height:"12px",width:"90px",marginTop:"32px"},{height:"16px",width:"180px",marginTop:"8px"},{height:"12px",width:"90px",marginTop:"24px"},{height:"16px",width:"180px",marginTop:"8px"}]})})]});exports.ConnectedAppSkeleton=t;
2	+ //# sourceMappingURL=ConnectedAppSkeleton.js.map

package/dist/cjs/components/connected-app-dialog/ConnectedAppSkeleton.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ConnectedAppSkeleton.js","sources":["../../../../src/components/connected-app-dialog/ConnectedAppSkeleton.tsx"],"sourcesContent":["import React from 'react';\nimport { BikShimmer } from '@src/components/shimmer';\nimport {\n\tSkeletonAppInfo,\n\tSkeletonCredsInfo,\n\tSkeletonMain,\n} from './ConnectedAppDialog.styled';\n\n/** Two-column loading skeleton shown while credentials are being fetched. */\nexport const ConnectedAppSkeleton: React.FC = () => {\n\treturn (\n\t\t<SkeletonMain>\n\t\t\t<SkeletonAppInfo>\n\t\t\t\t<BikShimmer\n\t\t\t\t\tboxes={[\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\theight: '80px',\n\t\t\t\t\t\t\twidth: '80px',\n\t\t\t\t\t\t\tmarginTop: '0px',\n\t\t\t\t\t\t\tborderRadius: '8px',\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{ height: '20px', width: '140px', marginTop: '20px' },\n\t\t\t\t\t\t{ height: '14px', width: '220px', marginTop: '12px' },\n\t\t\t\t\t\t{ height: '14px', width: '180px', marginTop: '6px' },\n\t\t\t\t\t\t{ height: '14px', width: '200px', marginTop: '48px' },\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t</SkeletonAppInfo>\n\t\t\t<SkeletonCredsInfo>\n\t\t\t\t<BikShimmer\n\t\t\t\t\tboxes={[\n\t\t\t\t\t\t{ height: '18px', width: '120px', marginTop: '8px' },\n\t\t\t\t\t\t{ height: '12px', width: '90px', marginTop: '32px' },\n\t\t\t\t\t\t{ height: '16px', width: '180px', marginTop: '8px' },\n\t\t\t\t\t\t{ height: '12px', width: '90px', marginTop: '24px' },\n\t\t\t\t\t\t{ height: '16px', width: '180px', marginTop: '8px' },\n\t\t\t\t\t]}\n\t\t\t\t/>\n\t\t\t</SkeletonCredsInfo>\n\t\t</SkeletonMain>\n\t);\n};\n"],"names":["ConnectedAppSkeleton","SkeletonMain","jsx","SkeletonAppInfo","BikShimmer","SkeletonCredsInfo"],"mappings":"wNASaA,EAAiC,WAE3CC,eAAA,CACA,SAAA,CAAAC,MAACC,EAAAA,gBAAA,CACA,SAAAD,EAAAA,IAACE,EAAAA,WAAA,CACA,MAAO,CACN,CACC,OAAQ,OACR,MAAO,OACP,UAAW,MACX,aAAc,KAAA,EAEf,CAAE,OAAQ,OAAQ,MAAO,QAAS,UAAW,MAAA,EAC7C,CAAE,OAAQ,OAAQ,MAAO,QAAS,UAAW,MAAA,EAC7C,CAAE,OAAQ,OAAQ,MAAO,QAAS,UAAW,KAAA,EAC7C,CAAE,OAAQ,OAAQ,MAAO,QAAS,UAAW,MAAA,CAAO,CACrD,CAAA,EAEF,QACCC,EAAAA,kBAAA,CACA,SAAAH,EAAAA,IAACE,EAAAA,WAAA,CACA,MAAO,CACN,CAAE,OAAQ,OAAQ,MAAO,QAAS,UAAW,KAAA,EAC7C,CAAE,OAAQ,OAAQ,MAAO,OAAQ,UAAW,MAAA,EAC5C,CAAE,OAAQ,OAAQ,MAAO,QAAS,UAAW,KAAA,EAC7C,CAAE,OAAQ,OAAQ,MAAO,OAAQ,UAAW,MAAA,EAC5C,CAAE,OAAQ,OAAQ,MAAO,QAAS,UAAW,KAAA,CAAM,CACpD,CAAA,CACD,CACD,CAAA,EACD"}

package/dist/cjs/components/country-code-picker/CountryCodePicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CountryCodePicker.js","sources":["../../../../src/components/country-code-picker/CountryCodePicker.tsx"],"sourcesContent":["import { Placement, PositioningStrategy } from '@popperjs/core';\nimport DownIcon from '@src/assets/icons/chevronDown.svg';\nimport React, { useEffect, useState } from 'react';\nimport {\n\tCountriesData,\n\tCountryCode,\n} from '@src/components/country-code-picker/CountryCodePicker.modal';\nimport {\n\tStyledCountryPickerOption,\n\tStyledCountryPickerWrapper,\n} from '@src/components/country-code-picker/CountryCodePicker.styled';\nimport { DropdownPopover } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CountryCodePicker: React.FC<{\n\tversion: '1.0' \| '2.0' ~~\| '3.0'~~;\n\tonCountrySelect: (country: CountryCode) => void;\n\tselectedCountry: CountryCode;\n\tpopoverWidth?: string;\n\theight?: string;\n\tplacement?: Placement;\n\tplacementStrategy?: PositioningStrategy;\n\tdisabled?: boolean;\n\thideFlagImage?: boolean;\n\tcontainerStyles?: React.CSSProperties;\n\tcodeColor?: string;\n\tdialColor?: string;\n\tcountryTextStyle?: React.CSSProperties;\n\tonDropdownClick?: () => void;\n}> = (props) => {\n\tconst [selectedCountry, setSelectedCountry] = useState<{\n\t\tname: string;\n\t\tdial: string;\n\t\tcode: string;\n\t}>(\n\t\tprops.selectedCountry ?? {\n\t\t\tname: 'India',\n\t\t\tdial: '+91',\n\t\t\tcode: 'IN',\n\t\t},\n\t);\n\tconst selectedFlag = `https://flagcdn.com/${selectedCountry.code?.toLowerCase()}.svg`;\n\n\tuseEffect(() => {\n\t\tif (props.selectedCountry) {\n\t\t\tsetSelectedCountry(props.selectedCountry);\n\t\t}\n\t}, [props.selectedCountry?.code]);\n\n\tconst getCountryOptions = (): DropdownOption[] => {\n\t\treturn CountriesData.map((country) => {\n\t\t\tconst flag = `https://flagcdn.com/${country.code?.toLowerCase()}.svg`;\n\t\t\treturn {\n\t\t\t\tvalue: country.code,\n\t\t\t\tlabel: country.dial,\n\t\t\t\tsearchKey: country.name,\n\t\t\t\tcustomComponent: (\n\t\t\t\t\t<StyledCountryPickerOption>\n\t\t\t\t\t\t{!props.hideFlagImage && (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc={flag}\n\t\t\t\t\t\t\t\tclassName=\"country-flag__option\"\n\t\t\t\t\t\t\t\talt={country.name}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<BodySecondary style={props.countryTextStyle ?? {}}>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.codeColor ?? COLORS.text.primary,\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{country.code}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.dialColor ?? COLORS.text.primary,\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{country.dial}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</StyledCountryPickerOption>\n\t\t\t\t),\n\t\t\t\tselected: selectedCountry.code === country.code,\n\t\t\t};\n\t\t});\n\t};\n\n\treturn (\n\t\t<DropdownPopover\n\t\t\tversion={props.version}\n\t\t\tisSearchable\n\t\t\twidth={props.popoverWidth ?? '200px'}\n\t\t\tplacement={props.placement ?? 'bottom-start'}\n\t\t\tstrategy={props.placementStrategy ?? 'absolute'}\n\t\t\toptions={getCountryOptions()}\n\t\t\tdisabled={props.disabled}\n\t\t\tonSelect={(option) => {\n\t\t\t\tconst matchingOption = CountriesData.filter(\n\t\t\t\t\t(country) => country.code === (option as SingleOption).value,\n\t\t\t\t);\n\t\t\t\tsetSelectedCountry(matchingOption[0]);\n\t\t\t\tprops.onCountrySelect(matchingOption[0]);\n\t\t\t}}\n\t\t>\n\t\t\t<StyledCountryPickerWrapper\n\t\t\t\theight={props.height}\n\t\t\t\tstyle={props.containerStyles}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tconsole.log('hello');\n\t\t\t\t\tprops.onDropdownClick?.();\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className=\"content__wrapper\">\n\t\t\t\t\t{!props.hideFlagImage && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={selectedFlag}\n\t\t\t\t\t\t\tclassName=\"country-flag__selected-option\"\n\t\t\t\t\t\t\talt={selectedCountry.name}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<BodySecondary style={props.countryTextStyle ?? {}}>\n\t\t\t\t\t\t{selectedCountry.dial}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</div>\n\t\t\t\t<DownIcon width={24} height={24} color={COLORS.content.primary} />\n\t\t\t</StyledCountryPickerWrapper>\n\t\t</DropdownPopover>\n\t);\n};\n"],"names":["CountryCodePicker","props","selectedCountry","setSelectedCountry","useState","selectedFlag","useEffect","getCountryOptions","CountriesData","country","flag","StyledCountryPickerOption","jsx","BodySecondary","COLORS","DropdownPopover","option","matchingOption","jsxs","StyledCountryPickerWrapper","DownIcon"],"mappings":"2YAgBaA,EAePC,GAAU,CACf,KAAM,CAACC,EAAiBC,CAAkB,EAAIC,EAAAA,SAK7CH,EAAM,iBAAmB,CACxB,KAAM,QACN,KAAM,MACN,KAAM,IAAA,CACP,EAEKI,EAAe,uBAAuBH,EAAgB,MAAM,aAAa,OAE/EI,EAAAA,UAAU,IAAM,CACXL,EAAM,iBACTE,EAAmBF,EAAM,eAAe,CAE1C,EAAG,CAACA,EAAM,iBAAiB,IAAI,CAAC,EAEhC,MAAMM,EAAoB,IAClBC,EAAAA,cAAc,IAAKC,GAAY,CACrC,MAAMC,EAAO,uBAAuBD,EAAQ,MAAM,aAAa,OAC/D,MAAO,CACN,MAAOA,EAAQ,KACf,MAAOA,EAAQ,KACf,UAAWA,EAAQ,KACnB,uBACEE,4BAAA,CACC,SAAA,CAAA,CAACV,EAAM,eACPW,EAAAA,IAAC,MAAA,CACA,IAAKF,EACL,UAAU,uBACV,IAAKD,EAAQ,IAAA,CAAA,SAIdI,EAAAA,cAAA,CAAc,MAAOZ,EAAM,kBAAoB,CAAA,EAC/C,SAAA,CAAAW,EAAAA,IAAC,OAAA,CACA,MAAO,CACN,MAAOX,EAAM,WAAaa,EAAAA,OAAO,KAAK,OAAA,EAGtC,SAAAL,EAAQ,IAAA,CAAA,EAET,KACDG,EAAAA,IAAC,OAAA,CACA,MAAO,CACN,MAAOX,EAAM,WAAaa,EAAAA,OAAO,KAAK,OAAA,EAGtC,SAAAL,EAAQ,IAAA,CAAA,CACV,CAAA,CACD,CAAA,EACD,EAED,SAAUP,EAAgB,OAASO,EAAQ,IAAA,CAE7C,CAAC,EAGF,OACCG,EAAAA,IAACG,EAAAA,gBAAA,CACA,QAASd,EAAM,QACf,aAAY,GACZ,MAAOA,EAAM,cAAgB,QAC7B,UAAWA,EAAM,WAAa,eAC9B,SAAUA,EAAM,mBAAqB,WACrC,QAASM,EAAA,EACT,SAAUN,EAAM,SAChB,SAAWe,GAAW,CACrB,MAAMC,EAAiBT,EAAAA,cAAc,OACnCC,GAAYA,EAAQ,OAAUO,EAAwB,KAAA,EAExDb,EAAmBc,EAAe,CAAC,CAAC,EACpChB,EAAM,gBAAgBgB,EAAe,CAAC,CAAC,CACxC,EAEA,SAAAC,EAAAA,KAACC,EAAAA,2BAAA,CACA,OAAQlB,EAAM,OACd,MAAOA,EAAM,gBACb,QAAS,IAAM,CACd,QAAQ,IAAI,OAAO,EACnBA,EAAM,kBAAA,CACP,EAEA,SAAA,CAAAiB,EAAAA,KAAC,MAAA,CAAI,UAAU,mBACb,SAAA,CAAA,CAACjB,EAAM,eACPW,EAAAA,IAAC,MAAA,CACA,IAAKP,EACL,UAAU,gCACV,IAAKH,EAAgB,IAAA,CAAA,EAGvBU,MAACC,EAAAA,eAAc,MAAOZ,EAAM,kBAAoB,GAC9C,WAAgB,IAAA,CAClB,CAAA,EACD,EACAW,EAAAA,IAACQ,EAAAA,SAAS,MAAO,GAAI,OAAQ,GAAI,MAAON,EAAAA,OAAO,QAAQ,OAAA,CAAS,CAAA,CAAA,CAAA,CACjE,CAAA,CAGH"}
1	+ {"version":3,"file":"CountryCodePicker.js","sources":["../../../../src/components/country-code-picker/CountryCodePicker.tsx"],"sourcesContent":["import { Placement, PositioningStrategy } from '@popperjs/core';\nimport DownIcon from '@src/assets/icons/chevronDown.svg';\nimport React, { useEffect, useState } from 'react';\nimport {\n\tCountriesData,\n\tCountryCode,\n} from '@src/components/country-code-picker/CountryCodePicker.modal';\nimport {\n\tStyledCountryPickerOption,\n\tStyledCountryPickerWrapper,\n} from '@src/components/country-code-picker/CountryCodePicker.styled';\nimport { DropdownPopover } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CountryCodePicker: React.FC<{\n\tversion: '1.0' \| '2.0';\n\tonCountrySelect: (country: CountryCode) => void;\n\tselectedCountry: CountryCode;\n\tpopoverWidth?: string;\n\theight?: string;\n\tplacement?: Placement;\n\tplacementStrategy?: PositioningStrategy;\n\tdisabled?: boolean;\n\thideFlagImage?: boolean;\n\tcontainerStyles?: React.CSSProperties;\n\tcodeColor?: string;\n\tdialColor?: string;\n\tcountryTextStyle?: React.CSSProperties;\n\tonDropdownClick?: () => void;\n}> = (props) => {\n\tconst [selectedCountry, setSelectedCountry] = useState<{\n\t\tname: string;\n\t\tdial: string;\n\t\tcode: string;\n\t}>(\n\t\tprops.selectedCountry ?? {\n\t\t\tname: 'India',\n\t\t\tdial: '+91',\n\t\t\tcode: 'IN',\n\t\t},\n\t);\n\tconst selectedFlag = `https://flagcdn.com/${selectedCountry.code?.toLowerCase()}.svg`;\n\n\tuseEffect(() => {\n\t\tif (props.selectedCountry) {\n\t\t\tsetSelectedCountry(props.selectedCountry);\n\t\t}\n\t}, [props.selectedCountry?.code]);\n\n\tconst getCountryOptions = (): DropdownOption[] => {\n\t\treturn CountriesData.map((country) => {\n\t\t\tconst flag = `https://flagcdn.com/${country.code?.toLowerCase()}.svg`;\n\t\t\treturn {\n\t\t\t\tvalue: country.code,\n\t\t\t\tlabel: country.dial,\n\t\t\t\tsearchKey: country.name,\n\t\t\t\tcustomComponent: (\n\t\t\t\t\t<StyledCountryPickerOption>\n\t\t\t\t\t\t{!props.hideFlagImage && (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc={flag}\n\t\t\t\t\t\t\t\tclassName=\"country-flag__option\"\n\t\t\t\t\t\t\t\talt={country.name}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<BodySecondary style={props.countryTextStyle ?? {}}>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.codeColor ?? COLORS.text.primary,\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{country.code}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.dialColor ?? COLORS.text.primary,\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{country.dial}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</StyledCountryPickerOption>\n\t\t\t\t),\n\t\t\t\tselected: selectedCountry.code === country.code,\n\t\t\t};\n\t\t});\n\t};\n\n\treturn (\n\t\t<DropdownPopover\n\t\t\tversion={props.version}\n\t\t\tisSearchable\n\t\t\twidth={props.popoverWidth ?? '200px'}\n\t\t\tplacement={props.placement ?? 'bottom-start'}\n\t\t\tstrategy={props.placementStrategy ?? 'absolute'}\n\t\t\toptions={getCountryOptions()}\n\t\t\tdisabled={props.disabled}\n\t\t\tonSelect={(option) => {\n\t\t\t\tconst matchingOption = CountriesData.filter(\n\t\t\t\t\t(country) => country.code === (option as SingleOption).value,\n\t\t\t\t);\n\t\t\t\tsetSelectedCountry(matchingOption[0]);\n\t\t\t\tprops.onCountrySelect(matchingOption[0]);\n\t\t\t}}\n\t\t>\n\t\t\t<StyledCountryPickerWrapper\n\t\t\t\theight={props.height}\n\t\t\t\tstyle={props.containerStyles}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tconsole.log('hello');\n\t\t\t\t\tprops.onDropdownClick?.();\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className=\"content__wrapper\">\n\t\t\t\t\t{!props.hideFlagImage && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={selectedFlag}\n\t\t\t\t\t\t\tclassName=\"country-flag__selected-option\"\n\t\t\t\t\t\t\talt={selectedCountry.name}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<BodySecondary style={props.countryTextStyle ?? {}}>\n\t\t\t\t\t\t{selectedCountry.dial}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</div>\n\t\t\t\t<DownIcon width={24} height={24} color={COLORS.content.primary} />\n\t\t\t</StyledCountryPickerWrapper>\n\t\t</DropdownPopover>\n\t);\n};\n"],"names":["CountryCodePicker","props","selectedCountry","setSelectedCountry","useState","selectedFlag","useEffect","getCountryOptions","CountriesData","country","flag","StyledCountryPickerOption","jsx","BodySecondary","COLORS","DropdownPopover","option","matchingOption","jsxs","StyledCountryPickerWrapper","DownIcon"],"mappings":"2YAgBaA,EAePC,GAAU,CACf,KAAM,CAACC,EAAiBC,CAAkB,EAAIC,EAAAA,SAK7CH,EAAM,iBAAmB,CACxB,KAAM,QACN,KAAM,MACN,KAAM,IAAA,CACP,EAEKI,EAAe,uBAAuBH,EAAgB,MAAM,aAAa,OAE/EI,EAAAA,UAAU,IAAM,CACXL,EAAM,iBACTE,EAAmBF,EAAM,eAAe,CAE1C,EAAG,CAACA,EAAM,iBAAiB,IAAI,CAAC,EAEhC,MAAMM,EAAoB,IAClBC,EAAAA,cAAc,IAAKC,GAAY,CACrC,MAAMC,EAAO,uBAAuBD,EAAQ,MAAM,aAAa,OAC/D,MAAO,CACN,MAAOA,EAAQ,KACf,MAAOA,EAAQ,KACf,UAAWA,EAAQ,KACnB,uBACEE,4BAAA,CACC,SAAA,CAAA,CAACV,EAAM,eACPW,EAAAA,IAAC,MAAA,CACA,IAAKF,EACL,UAAU,uBACV,IAAKD,EAAQ,IAAA,CAAA,SAIdI,EAAAA,cAAA,CAAc,MAAOZ,EAAM,kBAAoB,CAAA,EAC/C,SAAA,CAAAW,EAAAA,IAAC,OAAA,CACA,MAAO,CACN,MAAOX,EAAM,WAAaa,EAAAA,OAAO,KAAK,OAAA,EAGtC,SAAAL,EAAQ,IAAA,CAAA,EAET,KACDG,EAAAA,IAAC,OAAA,CACA,MAAO,CACN,MAAOX,EAAM,WAAaa,EAAAA,OAAO,KAAK,OAAA,EAGtC,SAAAL,EAAQ,IAAA,CAAA,CACV,CAAA,CACD,CAAA,EACD,EAED,SAAUP,EAAgB,OAASO,EAAQ,IAAA,CAE7C,CAAC,EAGF,OACCG,EAAAA,IAACG,EAAAA,gBAAA,CACA,QAASd,EAAM,QACf,aAAY,GACZ,MAAOA,EAAM,cAAgB,QAC7B,UAAWA,EAAM,WAAa,eAC9B,SAAUA,EAAM,mBAAqB,WACrC,QAASM,EAAA,EACT,SAAUN,EAAM,SAChB,SAAWe,GAAW,CACrB,MAAMC,EAAiBT,EAAAA,cAAc,OACnCC,GAAYA,EAAQ,OAAUO,EAAwB,KAAA,EAExDb,EAAmBc,EAAe,CAAC,CAAC,EACpChB,EAAM,gBAAgBgB,EAAe,CAAC,CAAC,CACxC,EAEA,SAAAC,EAAAA,KAACC,EAAAA,2BAAA,CACA,OAAQlB,EAAM,OACd,MAAOA,EAAM,gBACb,QAAS,IAAM,CACd,QAAQ,IAAI,OAAO,EACnBA,EAAM,kBAAA,CACP,EAEA,SAAA,CAAAiB,EAAAA,KAAC,MAAA,CAAI,UAAU,mBACb,SAAA,CAAA,CAACjB,EAAM,eACPW,EAAAA,IAAC,MAAA,CACA,IAAKP,EACL,UAAU,gCACV,IAAKH,EAAgB,IAAA,CAAA,EAGvBU,MAACC,EAAAA,eAAc,MAAOZ,EAAM,kBAAoB,GAC9C,WAAgB,IAAA,CAClB,CAAA,EACD,EACAW,EAAAA,IAACQ,EAAAA,SAAS,MAAO,GAAI,OAAQ,GAAI,MAAON,EAAAA,OAAO,QAAQ,OAAA,CAAS,CAAA,CAAA,CAAA,CACjE,CAAA,CAGH"}

package/dist/cjs/components/country-code-picker/CountryPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CountryPicker.js","sources":["../../../../src/components/country-code-picker/CountryPicker.tsx"],"sourcesContent":["import { Placement, PositioningStrategy } from '@popperjs/core';\nimport DownIcon from '@src/assets/icons/chevronDown.svg';\nimport React, { useMemo, useState } from 'react';\nimport {\n\tCountriesData,\n\tCountryCode,\n} from '@src/components/country-code-picker/CountryCodePicker.modal';\nimport {\n\tStyledCountryOption,\n\tStyledCountryPickerContainer,\n} from '@src/components/country-code-picker/CountryPicker.styled';\nimport { DropdownPopover } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\n/*\n Props for the CountryPicker component\n /\nexport interface CountryPickerProps {\n\t/\n\t Version of the dropdown popover to use\n\t /\n\tversion: '1.0' \| '2.0' ~~\| '3.0'~~;\n\t/\n\t Callback function when a country is selected\n\t /\n\tonCountrySelect: (country: CountryCode) => void;\n\t/\n\t Currently selected country\n\t /\n\tselectedCountry?: CountryCode;\n\t/\n\t Width of the popover dropdown\n\t * @default \"300px\"\n\t /\n\tpopoverWidth?: string;\n\t/\n\t Height of the picker container\n\t /\n\theight?: string;\n\t/\n\t Placement of the dropdown relative to the trigger\n\t * @default \"bottom-start\"\n\t /\n\tplacement?: Placement;\n\t/\n\t Positioning strategy for the dropdown\n\t * @default \"absolute\"\n\t /\n\tplacementStrategy?: PositioningStrategy;\n\t/\n\t Whether the picker is disabled\n\t * @default false\n\t /\n\tdisabled?: boolean;\n\t/\n\t Whether to hide the flag image\n\t * @default false\n\t /\n\thideFlagImage?: boolean;\n\t/\n\t Custom styles for the container\n\t /\n\tcontainerStyles?: React.CSSProperties;\n\t/\n\t Placeholder text when no country is selected\n\t * @default \"Select a country\"\n\t /\n\tplaceholder?: string;\n\t/\n\t Whether to show country code alongside name\n\t * @default true\n\t /\n\tshowCountryCode?: boolean;\n\t/\n\t Custom text style for the country name\n\t /\n\tcountryTextStyle?: React.CSSProperties;\n\t/\n\t Callback when dropdown is clicked\n\t */\n\tonDropdownClick?: () => void;\n}\n\nexport const CountryPicker: React.FC<CountryPickerProps> = ({\n\tversion,\n\tonCountrySelect,\n\tselectedCountry,\n\tpopoverWidth = '300px',\n\theight,\n\tplacement = 'bottom-start',\n\tplacementStrategy = 'absolute',\n\tdisabled = false,\n\thideFlagImage = false,\n\tcontainerStyles,\n\tplaceholder = 'Select a country',\n\tshowCountryCode = true,\n\tcountryTextStyle,\n\tonDropdownClick,\n}) => {\n\tconst [internalSelectedCountry, setInternalSelectedCountry] = useState<\n\t\tCountryCode \| undefined\n\t>(selectedCountry);\n\n\t// Derive the current selected country (controlled vs uncontrolled)\n\tconst currentCountry = selectedCountry ?? internalSelectedCountry;\n\n\tconst selectedFlag = currentCountry\n\t\t? `https://flagcdn.com/${currentCountry.code?.toLowerCase()}.svg`\n\t\t: undefined;\n\n\tconst getCountryOptions = useMemo((): DropdownOption[] => {\n\t\treturn CountriesData.map((country) => {\n\t\t\tconst flag = `https://flagcdn.com/${country.code?.toLowerCase()}.svg`;\n\t\t\treturn {\n\t\t\t\tvalue: country.code,\n\t\t\t\tlabel: country.name,\n\t\t\t\tsearchKey: country.name,\n\t\t\t\tcustomComponent: (\n\t\t\t\t\t<StyledCountryOption>\n\t\t\t\t\t\t{!hideFlagImage && (\n\t\t\t\t\t\t\t<img src={flag} className=\"country-flag\" alt={country.name} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className=\"country-info\">\n\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: COLORS.text.primary,\n\t\t\t\t\t\t\t\t\t...countryTextStyle,\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{country.name}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t{showCountryCode && (\n\t\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor: COLORS.text.secondary,\n\t\t\t\t\t\t\t\t\t\tfontSize: '12px',\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{country.code}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</StyledCountryOption>\n\t\t\t\t),\n\t\t\t\tselected: currentCountry?.code === country.code,\n\t\t\t};\n\t\t});\n\t}, [currentCountry?.code, hideFlagImage, showCountryCode, countryTextStyle]);\n\n\tconst handleCountrySelect = (option: SingleOption) => {\n\t\tconst matchingCountry = CountriesData.find(\n\t\t\t(country) => country.code === option.value,\n\t\t);\n\t\tif (matchingCountry) {\n\t\t\t// Only update internal state if in uncontrolled mode\n\t\t\tif (selectedCountry === undefined) {\n\t\t\t\tsetInternalSelectedCountry(matchingCountry);\n\t\t\t}\n\t\t\tonCountrySelect(matchingCountry);\n\t\t}\n\t};\n\n\treturn (\n\t\t<DropdownPopover\n\t\t\tversion={version}\n\t\t\tisSearchable\n\t\t\twidth={popoverWidth}\n\t\t\tplacement={placement}\n\t\t\tstrategy={placementStrategy}\n\t\t\toptions={getCountryOptions}\n\t\t\tdisabled={disabled}\n\t\t\tonSelect={(option) => handleCountrySelect(option as SingleOption)}\n\t\t>\n\t\t\t<StyledCountryPickerContainer\n\t\t\t\theight={height}\n\t\t\t\tstyle={containerStyles}\n\t\t\t\tonClick={onDropdownClick}\n\t\t\t\tdisabled={disabled}\n\t\t\t>\n\t\t\t\t<div className=\"content__wrapper\">\n\t\t\t\t\t{currentCountry ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{!hideFlagImage && selectedFlag && (\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc={selectedFlag}\n\t\t\t\t\t\t\t\t\tclassName=\"country-flag\"\n\t\t\t\t\t\t\t\t\talt={currentCountry.name}\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<BodySecondary style={countryTextStyle}>\n\t\t\t\t\t\t\t\t{currentCountry.name}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: COLORS.text.disabled,\n\t\t\t\t\t\t\t\t...countryTextStyle,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<DownIcon\n\t\t\t\t\twidth={24}\n\t\t\t\t\theight={24}\n\t\t\t\t\tcolor={disabled ? COLORS.text.disabled : COLORS.content.primary}\n\t\t\t\t/>\n\t\t\t</StyledCountryPickerContainer>\n\t\t</DropdownPopover>\n\t);\n};\n"],"names":["CountryPicker","version","onCountrySelect","selectedCountry","popoverWidth","height","placement","placementStrategy","disabled","hideFlagImage","containerStyles","placeholder","showCountryCode","countryTextStyle","onDropdownClick","internalSelectedCountry","setInternalSelectedCountry","useState","currentCountry","selectedFlag","getCountryOptions","useMemo","CountriesData","country","flag","StyledCountryOption","jsxs","jsx","BodySecondary","COLORS","handleCountrySelect","option","matchingCountry","DropdownPopover","StyledCountryPickerContainer","Fragment","DownIcon"],"mappings":"uYAqFaA,EAA8C,CAAC,CAC3D,QAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,aAAAC,EAAe,QACf,OAAAC,EACA,UAAAC,EAAY,eACZ,kBAAAC,EAAoB,WACpB,SAAAC,EAAW,GACX,cAAAC,EAAgB,GAChB,gBAAAC,EACA,YAAAC,EAAc,mBACd,gBAAAC,EAAkB,GAClB,iBAAAC,EACA,gBAAAC,CACD,IAAM,CACL,KAAM,CAACC,EAAyBC,CAA0B,EAAIC,EAAAA,SAE5Dd,CAAe,EAGXe,EAAiBf,GAAmBY,EAEpCI,EAAeD,EAClB,uBAAuBA,EAAe,MAAM,YAAA,CAAa,OACzD,OAEGE,EAAoBC,EAAAA,QAAQ,IAC1BC,EAAAA,cAAc,IAAKC,GAAY,CACrC,MAAMC,EAAO,uBAAuBD,EAAQ,MAAM,aAAa,OAC/D,MAAO,CACN,MAAOA,EAAQ,KACf,MAAOA,EAAQ,KACf,UAAWA,EAAQ,KACnB,uBACEE,sBAAA,CACC,SAAA,CAAA,CAAChB,SACA,MAAA,CAAI,IAAKe,EAAM,UAAU,eAAe,IAAKD,EAAQ,IAAA,CAAM,EAE7DG,EAAAA,KAAC,MAAA,CAAI,UAAU,eACd,SAAA,CAAAC,EAAAA,IAACC,EAAAA,cAAA,CACA,MAAO,CACN,MAAOC,EAAAA,OAAO,KAAK,QACnB,GAAGhB,CAAA,EAGH,SAAAU,EAAQ,IAAA,CAAA,EAETX,GACAe,EAAAA,IAACC,EAAAA,cAAA,CACA,MAAO,CACN,MAAOC,EAAAA,OAAO,KAAK,UACnB,SAAU,MAAA,EAGV,SAAAN,EAAQ,IAAA,CAAA,CACV,CAAA,CAEF,CAAA,EACD,EAED,SAAUL,GAAgB,OAASK,EAAQ,IAAA,CAE7C,CAAC,EACC,CAACL,GAAgB,KAAMT,EAAeG,EAAiBC,CAAgB,CAAC,EAErEiB,EAAuBC,GAAyB,CACrD,MAAMC,EAAkBV,EAAAA,cAAc,KACpCC,GAAYA,EAAQ,OAASQ,EAAO,KAAA,EAElCC,IAEC7B,IAAoB,QACvBa,EAA2BgB,CAAe,EAE3C9B,EAAgB8B,CAAe,EAEjC,EAEA,OACCL,EAAAA,IAACM,EAAAA,gBAAA,CACA,QAAAhC,EACA,aAAY,GACZ,MAAOG,EACP,UAAAE,EACA,SAAUC,EACV,QAASa,EACT,SAAAZ,EACA,SAAWuB,GAAWD,EAAoBC,CAAsB,EAEhE,SAAAL,EAAAA,KAACQ,EAAAA,6BAAA,CACA,OAAA7B,EACA,MAAOK,EACP,QAASI,EACT,SAAAN,EAEA,SAAA,CAAAmB,MAAC,MAAA,CAAI,UAAU,mBACb,SAAAT,EACAQ,EAAAA,KAAAS,WAAA,CACE,SAAA,CAAA,CAAC1B,GAAiBU,GAClBQ,EAAAA,IAAC,MAAA,CACA,IAAKR,EACL,UAAU,eACV,IAAKD,EAAe,IAAA,CAAA,EAGtBS,EAAAA,IAACC,EAAAA,cAAA,CAAc,MAAOf,EACpB,WAAe,IAAA,CACjB,CAAA,CAAA,CACD,EAEAc,EAAAA,IAACC,EAAAA,cAAA,CACA,MAAO,CACN,MAAOC,EAAAA,OAAO,KAAK,SACnB,GAAGhB,CAAA,EAGH,SAAAF,CAAA,CAAA,EAGJ,EACAgB,EAAAA,IAACS,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAO5B,EAAWqB,EAAAA,OAAO,KAAK,SAAWA,EAAAA,OAAO,QAAQ,OAAA,CAAA,CACzD,CAAA,CAAA,CACD,CAAA,CAGH"}
1	+ {"version":3,"file":"CountryPicker.js","sources":["../../../../src/components/country-code-picker/CountryPicker.tsx"],"sourcesContent":["import { Placement, PositioningStrategy } from '@popperjs/core';\nimport DownIcon from '@src/assets/icons/chevronDown.svg';\nimport React, { useMemo, useState } from 'react';\nimport {\n\tCountriesData,\n\tCountryCode,\n} from '@src/components/country-code-picker/CountryCodePicker.modal';\nimport {\n\tStyledCountryOption,\n\tStyledCountryPickerContainer,\n} from '@src/components/country-code-picker/CountryPicker.styled';\nimport { DropdownPopover } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\n/*\n Props for the CountryPicker component\n /\nexport interface CountryPickerProps {\n\t/\n\t Version of the dropdown popover to use\n\t /\n\tversion: '1.0' \| '2.0';\n\t/\n\t Callback function when a country is selected\n\t /\n\tonCountrySelect: (country: CountryCode) => void;\n\t/\n\t Currently selected country\n\t /\n\tselectedCountry?: CountryCode;\n\t/\n\t Width of the popover dropdown\n\t * @default \"300px\"\n\t /\n\tpopoverWidth?: string;\n\t/\n\t Height of the picker container\n\t /\n\theight?: string;\n\t/\n\t Placement of the dropdown relative to the trigger\n\t * @default \"bottom-start\"\n\t /\n\tplacement?: Placement;\n\t/\n\t Positioning strategy for the dropdown\n\t * @default \"absolute\"\n\t /\n\tplacementStrategy?: PositioningStrategy;\n\t/\n\t Whether the picker is disabled\n\t * @default false\n\t /\n\tdisabled?: boolean;\n\t/\n\t Whether to hide the flag image\n\t * @default false\n\t /\n\thideFlagImage?: boolean;\n\t/\n\t Custom styles for the container\n\t /\n\tcontainerStyles?: React.CSSProperties;\n\t/\n\t Placeholder text when no country is selected\n\t * @default \"Select a country\"\n\t /\n\tplaceholder?: string;\n\t/\n\t Whether to show country code alongside name\n\t * @default true\n\t /\n\tshowCountryCode?: boolean;\n\t/\n\t Custom text style for the country name\n\t /\n\tcountryTextStyle?: React.CSSProperties;\n\t/\n\t Callback when dropdown is clicked\n\t */\n\tonDropdownClick?: () => void;\n}\n\nexport const CountryPicker: React.FC<CountryPickerProps> = ({\n\tversion,\n\tonCountrySelect,\n\tselectedCountry,\n\tpopoverWidth = '300px',\n\theight,\n\tplacement = 'bottom-start',\n\tplacementStrategy = 'absolute',\n\tdisabled = false,\n\thideFlagImage = false,\n\tcontainerStyles,\n\tplaceholder = 'Select a country',\n\tshowCountryCode = true,\n\tcountryTextStyle,\n\tonDropdownClick,\n}) => {\n\tconst [internalSelectedCountry, setInternalSelectedCountry] = useState<\n\t\tCountryCode \| undefined\n\t>(selectedCountry);\n\n\t// Derive the current selected country (controlled vs uncontrolled)\n\tconst currentCountry = selectedCountry ?? internalSelectedCountry;\n\n\tconst selectedFlag = currentCountry\n\t\t? `https://flagcdn.com/${currentCountry.code?.toLowerCase()}.svg`\n\t\t: undefined;\n\n\tconst getCountryOptions = useMemo((): DropdownOption[] => {\n\t\treturn CountriesData.map((country) => {\n\t\t\tconst flag = `https://flagcdn.com/${country.code?.toLowerCase()}.svg`;\n\t\t\treturn {\n\t\t\t\tvalue: country.code,\n\t\t\t\tlabel: country.name,\n\t\t\t\tsearchKey: country.name,\n\t\t\t\tcustomComponent: (\n\t\t\t\t\t<StyledCountryOption>\n\t\t\t\t\t\t{!hideFlagImage && (\n\t\t\t\t\t\t\t<img src={flag} className=\"country-flag\" alt={country.name} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className=\"country-info\">\n\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: COLORS.text.primary,\n\t\t\t\t\t\t\t\t\t...countryTextStyle,\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{country.name}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t{showCountryCode && (\n\t\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor: COLORS.text.secondary,\n\t\t\t\t\t\t\t\t\t\tfontSize: '12px',\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{country.code}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</StyledCountryOption>\n\t\t\t\t),\n\t\t\t\tselected: currentCountry?.code === country.code,\n\t\t\t};\n\t\t});\n\t}, [currentCountry?.code, hideFlagImage, showCountryCode, countryTextStyle]);\n\n\tconst handleCountrySelect = (option: SingleOption) => {\n\t\tconst matchingCountry = CountriesData.find(\n\t\t\t(country) => country.code === option.value,\n\t\t);\n\t\tif (matchingCountry) {\n\t\t\t// Only update internal state if in uncontrolled mode\n\t\t\tif (selectedCountry === undefined) {\n\t\t\t\tsetInternalSelectedCountry(matchingCountry);\n\t\t\t}\n\t\t\tonCountrySelect(matchingCountry);\n\t\t}\n\t};\n\n\treturn (\n\t\t<DropdownPopover\n\t\t\tversion={version}\n\t\t\tisSearchable\n\t\t\twidth={popoverWidth}\n\t\t\tplacement={placement}\n\t\t\tstrategy={placementStrategy}\n\t\t\toptions={getCountryOptions}\n\t\t\tdisabled={disabled}\n\t\t\tonSelect={(option) => handleCountrySelect(option as SingleOption)}\n\t\t>\n\t\t\t<StyledCountryPickerContainer\n\t\t\t\theight={height}\n\t\t\t\tstyle={containerStyles}\n\t\t\t\tonClick={onDropdownClick}\n\t\t\t\tdisabled={disabled}\n\t\t\t>\n\t\t\t\t<div className=\"content__wrapper\">\n\t\t\t\t\t{currentCountry ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{!hideFlagImage && selectedFlag && (\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc={selectedFlag}\n\t\t\t\t\t\t\t\t\tclassName=\"country-flag\"\n\t\t\t\t\t\t\t\t\talt={currentCountry.name}\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<BodySecondary style={countryTextStyle}>\n\t\t\t\t\t\t\t\t{currentCountry.name}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: COLORS.text.disabled,\n\t\t\t\t\t\t\t\t...countryTextStyle,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<DownIcon\n\t\t\t\t\twidth={24}\n\t\t\t\t\theight={24}\n\t\t\t\t\tcolor={disabled ? COLORS.text.disabled : COLORS.content.primary}\n\t\t\t\t/>\n\t\t\t</StyledCountryPickerContainer>\n\t\t</DropdownPopover>\n\t);\n};\n"],"names":["CountryPicker","version","onCountrySelect","selectedCountry","popoverWidth","height","placement","placementStrategy","disabled","hideFlagImage","containerStyles","placeholder","showCountryCode","countryTextStyle","onDropdownClick","internalSelectedCountry","setInternalSelectedCountry","useState","currentCountry","selectedFlag","getCountryOptions","useMemo","CountriesData","country","flag","StyledCountryOption","jsxs","jsx","BodySecondary","COLORS","handleCountrySelect","option","matchingCountry","DropdownPopover","StyledCountryPickerContainer","Fragment","DownIcon"],"mappings":"uYAqFaA,EAA8C,CAAC,CAC3D,QAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,aAAAC,EAAe,QACf,OAAAC,EACA,UAAAC,EAAY,eACZ,kBAAAC,EAAoB,WACpB,SAAAC,EAAW,GACX,cAAAC,EAAgB,GAChB,gBAAAC,EACA,YAAAC,EAAc,mBACd,gBAAAC,EAAkB,GAClB,iBAAAC,EACA,gBAAAC,CACD,IAAM,CACL,KAAM,CAACC,EAAyBC,CAA0B,EAAIC,EAAAA,SAE5Dd,CAAe,EAGXe,EAAiBf,GAAmBY,EAEpCI,EAAeD,EAClB,uBAAuBA,EAAe,MAAM,YAAA,CAAa,OACzD,OAEGE,EAAoBC,EAAAA,QAAQ,IAC1BC,EAAAA,cAAc,IAAKC,GAAY,CACrC,MAAMC,EAAO,uBAAuBD,EAAQ,MAAM,aAAa,OAC/D,MAAO,CACN,MAAOA,EAAQ,KACf,MAAOA,EAAQ,KACf,UAAWA,EAAQ,KACnB,uBACEE,sBAAA,CACC,SAAA,CAAA,CAAChB,SACA,MAAA,CAAI,IAAKe,EAAM,UAAU,eAAe,IAAKD,EAAQ,IAAA,CAAM,EAE7DG,EAAAA,KAAC,MAAA,CAAI,UAAU,eACd,SAAA,CAAAC,EAAAA,IAACC,EAAAA,cAAA,CACA,MAAO,CACN,MAAOC,EAAAA,OAAO,KAAK,QACnB,GAAGhB,CAAA,EAGH,SAAAU,EAAQ,IAAA,CAAA,EAETX,GACAe,EAAAA,IAACC,EAAAA,cAAA,CACA,MAAO,CACN,MAAOC,EAAAA,OAAO,KAAK,UACnB,SAAU,MAAA,EAGV,SAAAN,EAAQ,IAAA,CAAA,CACV,CAAA,CAEF,CAAA,EACD,EAED,SAAUL,GAAgB,OAASK,EAAQ,IAAA,CAE7C,CAAC,EACC,CAACL,GAAgB,KAAMT,EAAeG,EAAiBC,CAAgB,CAAC,EAErEiB,EAAuBC,GAAyB,CACrD,MAAMC,EAAkBV,EAAAA,cAAc,KACpCC,GAAYA,EAAQ,OAASQ,EAAO,KAAA,EAElCC,IAEC7B,IAAoB,QACvBa,EAA2BgB,CAAe,EAE3C9B,EAAgB8B,CAAe,EAEjC,EAEA,OACCL,EAAAA,IAACM,EAAAA,gBAAA,CACA,QAAAhC,EACA,aAAY,GACZ,MAAOG,EACP,UAAAE,EACA,SAAUC,EACV,QAASa,EACT,SAAAZ,EACA,SAAWuB,GAAWD,EAAoBC,CAAsB,EAEhE,SAAAL,EAAAA,KAACQ,EAAAA,6BAAA,CACA,OAAA7B,EACA,MAAOK,EACP,QAASI,EACT,SAAAN,EAEA,SAAA,CAAAmB,MAAC,MAAA,CAAI,UAAU,mBACb,SAAAT,EACAQ,EAAAA,KAAAS,WAAA,CACE,SAAA,CAAA,CAAC1B,GAAiBU,GAClBQ,EAAAA,IAAC,MAAA,CACA,IAAKR,EACL,UAAU,eACV,IAAKD,EAAe,IAAA,CAAA,EAGtBS,EAAAA,IAACC,EAAAA,cAAA,CAAc,MAAOf,EACpB,WAAe,IAAA,CACjB,CAAA,CAAA,CACD,EAEAc,EAAAA,IAACC,EAAAA,cAAA,CACA,MAAO,CACN,MAAOC,EAAAA,OAAO,KAAK,SACnB,GAAGhB,CAAA,EAGH,SAAAF,CAAA,CAAA,EAGJ,EACAgB,EAAAA,IAACS,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAO5B,EAAWqB,EAAAA,OAAO,KAAK,SAAWA,EAAAA,OAAO,QAAQ,OAAA,CAAA,CACzD,CAAA,CAAA,CACD,CAAA,CAGH"}

package/dist/cjs/components/dropdown/Dropdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),r=require("react"),s=require("../../constants/Theme.js"),U=require("../../assets/icons/chevronDown.svg.js"),_=require("../input/context/InputStyleProvider.js"),G=require("./ChipInput.js"),J=require("./DropdownPopover/index.js"),K=require("./OpenedDropdown/utils/iterationOnOptions.js"),Q=require("../input/Input.js");function I(){}const R=({placeHolder:c,size:j,onSelect:b,defaultOptions:l,disabled:v,noErrorHint:q,placeHolderHeight:S,showPlaceholderWhenSelected:L=!1,inputStyle:W={},inputType:O="default",onDeleteChip:E,truncatedText:M,showLeadingIconInPlaceholder:T=!1,showTrailingIconPlaceholder:w=!1,showLabelsOnMoreHover:k=!1,value:o,showSelected:h=!1,onDropdownVisbilityChange:A,...e})=>{const[f,F]=r.useState(!1),[m,y]=r.useState(!1),n=j??"default",V=r.useRef(),[a,d]=r.useState(l??[]);function p(t){Array.isArray(t)?d([...t]):d([t]),b?.(t)}r.useEffect(()=>{const t=[];e?.options?.forEach(u=>{u.options?u.options.forEach(g=>{g.selected&&t.push({...g,label:g.label})}):u.selected&&t.push(u)}),d([...t])},[e.options]),r.useEffect(()=>{l&&d([...l])},[l]);const z=K.getSelectedOptionsAsText(a),B=L?c:z??c??"Select an option",x=e.buttonWidth,C=x??e.width??"100%",N=e.dropdownWidth??C;return i.jsx(i.Fragment,{children:i.jsx(_.InputStyleContext.Provider,{value:{InputWrapper:{height:S||(n==="x-small"?24:n==="small"?32:48),width:C,...x?{maxWidth:x}:{},zIndex:1,cursor:"pointer",padding:n==="x-small"?"4px 8px":"6px 8px",backgroundColor:e.version==="3.0"?f||m?s.COLORS.surface.hovered:s.COLORS.surface.standard:h&&o!==void 0?s.BASE_COLORS.positive[100]:m?s.COLORS.background.inactive:s.COLORS.surface.standard,transition:"background-color 0.3s ease",...W},input:{minHeight:"100%",maxWidth:"100%",color:h&&o!==void 0?s.COLORS.content.positive:"inherit"}},children:i.jsx("div",{onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1),style:e.width?{width:e.width}:void 0,children:i.jsxs(J.DropdownPopover,{"data-test":e["data-test"],ref:V,onSelect:p,disabled:v,...e,onDropdownVisbilityChange:t=>{F(t),A?.(t)},width:N,children:[O=="default"&&i.jsx(Q.Input,{version:e.version,noErrorHint:q,state:v?"disabled":"none",value:o===void 0?B:o,errorMessage:e.error,variant:n,placeholder:c??"Select an option",onChangeText:I,leftIcon:T&&a[0]?.leadingIcon?{icon:()=>i.jsx(i.Fragment,{children:a[0]?.leadingIcon})}:void 0,rightIcon:{icon:()=>i.jsxs("div",{style:{display:"flex"},children:[w&&a[0]?.trailingIcon,i.jsx(U.default,{style:{transform:f?"rotate(180deg)":"rotate(0deg)"},onClick:I,width:n==="x-small"?16:n==="small"?20:24,height:n==="x-small"?16:n==="small"?20:24,color:h?s.COLORS.content.positive:s.COLORS.content.primary})]})},truncateText:M??!0}),O=="chip"&&i.jsx(G.default,{placeholder:c??"Select options",chips:a,onDeleteChip:t=>{E?.(t)},errorMessage:e.error,isDropdownOpened:f,sizeToUse:n,containerStyle:{width:e.width??"100%",cursor:"pointer"},showLabelsOnMoreHover:k})]})})})})};R.displayName="Dropdown";exports.Dropdown=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),s=require("react"),u=require("../../constants/Theme.js"),U=require("../../assets/icons/chevronDown.svg.js"),B=require("../input/context/InputStyleProvider.js"),G=require("./ChipInput.js"),J=require("./DropdownPopover/index.js"),K=require("./OpenedDropdown/utils/iterationOnOptions.js"),Q=require("../input/Input.js");function I(){}const j=({placeHolder:a,size:C,onSelect:b,defaultOptions:l,disabled:g,noErrorHint:q,placeHolderHeight:v,showPlaceholderWhenSelected:E=!1,inputStyle:R={},inputType:m="default",onDeleteChip:W,truncatedText:p,showLeadingIconInPlaceholder:w=!1,showTrailingIconPlaceholder:M=!1,showLabelsOnMoreHover:T=!1,value:o,showSelected:h=!1,...e})=>{const[S,L]=s.useState(!1),[k,y]=s.useState(!1),n=C??"default",A=s.useRef(),[r,c]=s.useState(l??[]);function F(t){Array.isArray(t)?c([...t]):c([t]),b?.(t)}s.useEffect(()=>{const t=[];e?.options?.forEach(d=>{d.options?d.options.forEach(x=>{x.selected&&t.push({...x,label:x.label})}):d.selected&&t.push(d)}),c([...t])},[e.options]),s.useEffect(()=>{l&&c([...l])},[l]);const V=K.getSelectedOptionsAsText(r),z=E?a:V??a??"Select an option",f=e.buttonWidth,O=f??e.width??"100%",N=e.dropdownWidth??O;return i.jsx(i.Fragment,{children:i.jsx(B.InputStyleContext.Provider,{value:{InputWrapper:{height:v||(n==="x-small"?24:n==="small"?32:48),width:O,...f?{maxWidth:f}:{},zIndex:1,cursor:"pointer",padding:n==="x-small"?"4px 8px":"6px 8px",backgroundColor:h&&o!==void 0?u.COLORS.background.positive.light:k?"#E0E0E0":"#ffffff",transition:"background-color 0.3s ease",...R},input:{minHeight:"100%",maxWidth:"100%",color:h&&o!==void 0?u.COLORS.content.positive:"inherit"}},children:i.jsx("div",{onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1),style:e.width?{width:e.width}:void 0,children:i.jsxs(J.DropdownPopover,{"data-test":e["data-test"],ref:A,onSelect:F,disabled:g,onDropdownVisbilityChange:t=>L(t),...e,width:N,children:[m=="default"&&i.jsx(Q.Input,{version:e.version,noErrorHint:q,state:g?"disabled":"none",value:o===void 0?z:o,errorMessage:e.error,variant:n,placeholder:a??"Select an option",onChangeText:I,leftIcon:w&&r[0]?.leadingIcon?{icon:()=>i.jsx(i.Fragment,{children:r[0]?.leadingIcon})}:void 0,rightIcon:{icon:()=>i.jsxs("div",{style:{display:"flex"},children:[M&&r[0]?.trailingIcon,i.jsx(U.default,{style:{transform:S?"rotate(180deg)":"rotate(0deg)"},onClick:I,width:n==="x-small"?16:n==="small"?20:24,height:n==="x-small"?16:n==="small"?20:24,color:h?u.COLORS.content.positive:u.COLORS.content.primary})]})},truncateText:p??!0}),m=="chip"&&i.jsx(G.default,{placeholder:a??"Select options",chips:r,onDeleteChip:t=>{W?.(t)},errorMessage:e.error,isDropdownOpened:S,sizeToUse:n,containerStyle:{width:e.width??"100%",cursor:"pointer"},showLabelsOnMoreHover:T})]})})})})};j.displayName="Dropdown";exports.Dropdown=j;
 //# sourceMappingURL=Dropdown.js.map

package/dist/cjs/components/dropdown/Dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dropdown.js","sources":["../../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import React, { Ref, useEffect, useRef, useState } from 'react';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport { Input } from '../input';\nimport { InputStyleContext } from '../input/context/InputStyleProvider';\nimport ChipInput from './ChipInput';\nimport { DropdownPopover } from './DropdownPopover';\nimport { getSelectedOptionsAsText } from './OpenedDropdown/utils/iterationOnOptions';\nimport {\n\tDropdownOption,\n\tGroupedOption,\n\tOpenDropdownProps,\n\tSingleOption,\n} from './type';\n\nexport type DropdownProps = OpenDropdownProps & {\n\tplaceHolder?: string;\n\tsize?: 'default' \| 'small' \| 'x-small';\n\tdisabled?: boolean;\n\tnoErrorHint?: boolean;\n\tbuttonWidth?: string;\n\tplaceHolderHeight?: string;\n\tshowPlaceholderWhenSelected?: boolean;\n\tinputStyle?: React.CSSProperties;\n\tinputType?: 'chip' \| 'default';\n\tonDeleteChip?: (chip: SingleOption) => void;\n\ttruncatedText?: boolean;\n\t'data-test'?: string;\n\tshowLeadingIconInPlaceholder?: boolean;\n\tshowTrailingIconPlaceholder?: boolean;\n\tshowLabelsOnMoreHover?: boolean;\n\tbackgroundColor?: string;\n\tvalue?: string;\n\tshowSelected?: boolean;\n\t/** Fired when the dropdown opens/closes. Runs alongside internal open state. /\n\tonDropdownVisbilityChange?: (isOpen: boolean) => void;\n};\n\nfunction noop() {\n\t/* empty */\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n\tplaceHolder,\n\tsize,\n\tonSelect,\n\tdefaultOptions,\n\tdisabled,\n\tnoErrorHint,\n\tplaceHolderHeight,\n\tshowPlaceholderWhenSelected = false,\n\tinputStyle = {},\n\tinputType = 'default',\n\tonDeleteChip,\n\ttruncatedText,\n\tshowLeadingIconInPlaceholder = false,\n\tshowTrailingIconPlaceholder = false,\n\tshowLabelsOnMoreHover = false,\n\tvalue,\n\tshowSelected = false,\n\tonDropdownVisbilityChange,\n\t...openDropdownProps\n}) => {\n\tconst [isDropdownOpened, setDropdownOpenFlag] = useState(false);\n\tconst [isHovering, setIsHovering] = useState(false);\n\tconst sizeToUse = size ?? 'default';\n\tconst dropdownVisibilityRef = useRef<{\n\t\topenDropdown: boolean;\n\t}>();\n\tconst [selectedOption, setSelectedOption] = useState<DropdownOption[]>(\n\t\tdefaultOptions ?? [],\n\t);\n\tfunction handleSelection(option: DropdownOption \| DropdownOption[]) {\n\t\tif (Array.isArray(option)) {\n\t\t\tsetSelectedOption([...option]);\n\t\t} else {\n\t\t\tsetSelectedOption([...[option]]);\n\t\t}\n\t\tonSelect?.(option);\n\t}\n\n\tuseEffect(() => {\n\t\tconst flatSelectedOption: SingleOption[] = [];\n\t\topenDropdownProps?.options?.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t(option as GroupedOption).options.forEach((op) => {\n\t\t\t\t\tif (op.selected) {\n\t\t\t\t\t\tflatSelectedOption.push({\n\t\t\t\t\t\t\t...op,\n\t\t\t\t\t\t\tlabel: op.label,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tif ((option as SingleOption).selected) {\n\t\t\t\t\tflatSelectedOption.push(option as SingleOption);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tsetSelectedOption([...flatSelectedOption]);\n\t}, [openDropdownProps.options]);\n\n\tuseEffect(() => {\n\t\tif (defaultOptions) {\n\t\t\tsetSelectedOption([...defaultOptions]);\n\t\t}\n\t}, [defaultOptions]);\n\n\tconst textVal = getSelectedOptionsAsText(selectedOption);\n\tconst displayText = showPlaceholderWhenSelected\n\t\t? placeHolder\n\t\t: textVal ?? placeHolder ?? 'Select an option';\n\n\tconst configuredMaxWidth = openDropdownProps.buttonWidth;\n\n\t// Shared width for the input wrapper and dropdown popover\n\tconst inputWidth = configuredMaxWidth ?? openDropdownProps.width ?? '100%';\n\n\t// Width passed to dropdown popover — matches input box width\n\tconst dropdownWidth = openDropdownProps.dropdownWidth ?? inputWidth;\n\n\treturn (\n\t\t<>\n\t\t\t<InputStyleContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\tInputWrapper: {\n\t\t\t\t\t\theight: placeHolderHeight\n\t\t\t\t\t\t\t? placeHolderHeight\n\t\t\t\t\t\t\t: sizeToUse === 'x-small'\n\t\t\t\t\t\t\t? 24\n\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t? 32\n\t\t\t\t\t\t\t: 48,\n\t\t\t\t\t\twidth: inputWidth,\n\t\t\t\t\t\t...(configuredMaxWidth ? { maxWidth: configuredMaxWidth } : {}),\n\t\t\t\t\t\tzIndex: 1,\n\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\tpadding: sizeToUse === 'x-small' ? '4px 8px' : '6px 8px',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\topenDropdownProps.version === '3.0'\n\t\t\t\t\t\t\t\t? isDropdownOpened \|\| isHovering\n\t\t\t\t\t\t\t\t\t? COLORS.surface.hovered\n\t\t\t\t\t\t\t\t\t: COLORS.surface.standard\n\t\t\t\t\t\t\t\t: showSelected && value !== undefined\n\t\t\t\t\t\t\t\t? BASE_COLORS.positive['100']\n\t\t\t\t\t\t\t\t: isHovering\n\t\t\t\t\t\t\t\t? COLORS.background.inactive\n\t\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t...inputStyle,\n\t\t\t\t\t},\n\t\t\t\t\tinput: {\n\t\t\t\t\t\tminHeight: '100%',\n\t\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\tshowSelected && value !== undefined\n\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t: 'inherit',\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tonMouseEnter={() => setIsHovering(true)}\n\t\t\t\t\tonMouseLeave={() => setIsHovering(false)}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\topenDropdownProps.width\n\t\t\t\t\t\t\t? { width: openDropdownProps.width }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\tref={\n\t\t\t\t\t\t\tdropdownVisibilityRef as Ref<{\n\t\t\t\t\t\t\t\topenDropdown: boolean;\n\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={handleSelection}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\tonDropdownVisbilityChange={(isOpen) => {\n\t\t\t\t\t\t\t// Keep the internal open flag (carat/open styling) AND forward\n\t\t\t\t\t\t\t// to a consumer-provided handler so callers can react to open state.\n\t\t\t\t\t\t\tsetDropdownOpenFlag(isOpen);\n\t\t\t\t\t\t\tonDropdownVisbilityChange?.(isOpen);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={dropdownWidth}\n\t\t\t\t\t>\n\t\t\t\t\t\t{inputType == 'default' && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tversion={openDropdownProps.version}\n\t\t\t\t\t\t\t\tnoErrorHint={noErrorHint}\n\t\t\t\t\t\t\t\tstate={disabled ? 'disabled' : 'none'}\n\t\t\t\t\t\t\t\tvalue={value === undefined ? displayText : value}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tvariant={sizeToUse}\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select an option'}\n\t\t\t\t\t\t\t\tonChangeText={noop}\n\t\t\t\t\t\t\t\tleftIcon={\n\t\t\t\t\t\t\t\t\tshowLeadingIconInPlaceholder && selectedOption[0]?.leadingIcon\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\ticon: () => <>{selectedOption[0]?.leadingIcon}</>,\n\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\trightIcon={{\n\t\t\t\t\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{showTrailingIconPlaceholder &&\n\t\t\t\t\t\t\t\t\t\t\t\t(selectedOption[0] as SingleOption)?.trailingIcon}\n\t\t\t\t\t\t\t\t\t\t\t<DownIcon\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransform: isDropdownOpened\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'rotate(180deg)'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'rotate(0deg)',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={noop}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\theight={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowSelected\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\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\ttruncateText={truncatedText ?? true}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{inputType == 'chip' && (\n\t\t\t\t\t\t\t<ChipInput\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select options'}\n\t\t\t\t\t\t\t\tchips={selectedOption as SingleOption[]}\n\t\t\t\t\t\t\t\tonDeleteChip={(chip) => {\n\t\t\t\t\t\t\t\t\tonDeleteChip?.(chip);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tisDropdownOpened={isDropdownOpened}\n\t\t\t\t\t\t\t\tsizeToUse={sizeToUse}\n\t\t\t\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\t\t\t\twidth: openDropdownProps.width ?? '100%',\n\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowLabelsOnMoreHover={showLabelsOnMoreHover}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownPopover>\n\t\t\t\t</div>\n\t\t\t</InputStyleContext.Provider>\n\t\t</>\n\t);\n};\n\nDropdown.displayName = 'Dropdown';\n"],"names":["noop","Dropdown","placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected","onDropdownVisbilityChange","openDropdownProps","isDropdownOpened","setDropdownOpenFlag","useState","isHovering","setIsHovering","sizeToUse","dropdownVisibilityRef","useRef","selectedOption","setSelectedOption","handleSelection","option","useEffect","flatSelectedOption","op","textVal","getSelectedOptionsAsText","displayText","configuredMaxWidth","inputWidth","dropdownWidth","jsx","Fragment","InputStyleContext","COLORS","BASE_COLORS","jsxs","DropdownPopover","isOpen","Input","DownIcon","ChipInput","chip"],"mappings":"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"}
1	+ {"version":3,"file":"Dropdown.js","sources":["../../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import React, { Ref, useEffect, useRef, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport { Input } from '../input';\nimport { InputStyleContext } from '../input/context/InputStyleProvider';\nimport ChipInput from './ChipInput';\nimport { DropdownPopover } from './DropdownPopover';\nimport { getSelectedOptionsAsText } from './OpenedDropdown/utils/iterationOnOptions';\nimport {\n\tDropdownOption,\n\tGroupedOption,\n\tOpenDropdownProps,\n\tSingleOption,\n} from './type';\n\nexport type DropdownProps = OpenDropdownProps & {\n\tplaceHolder?: string;\n\tsize?: 'default' \| 'small' \| 'x-small';\n\tdisabled?: boolean;\n\tnoErrorHint?: boolean;\n\tbuttonWidth?: string;\n\tplaceHolderHeight?: string;\n\tshowPlaceholderWhenSelected?: boolean;\n\tinputStyle?: React.CSSProperties;\n\tinputType?: 'chip' \| 'default';\n\tonDeleteChip?: (chip: SingleOption) => void;\n\ttruncatedText?: boolean;\n\t'data-test'?: string;\n\tshowLeadingIconInPlaceholder?: boolean;\n\tshowTrailingIconPlaceholder?: boolean;\n\tshowLabelsOnMoreHover?: boolean;\n\tbackgroundColor?: string;\n\tvalue?: string;\n\tshowSelected?: boolean;\n};\n\nfunction noop() {\n\t/** empty */\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n\tplaceHolder,\n\tsize,\n\tonSelect,\n\tdefaultOptions,\n\tdisabled,\n\tnoErrorHint,\n\tplaceHolderHeight,\n\tshowPlaceholderWhenSelected = false,\n\tinputStyle = {},\n\tinputType = 'default',\n\tonDeleteChip,\n\ttruncatedText,\n\tshowLeadingIconInPlaceholder = false,\n\tshowTrailingIconPlaceholder = false,\n\tshowLabelsOnMoreHover = false,\n\tvalue,\n\tshowSelected = false,\n\t...openDropdownProps\n}) => {\n\tconst [isDropdownOpened, setDropdownOpenFlag] = useState(false);\n\tconst [isHovering, setIsHovering] = useState(false);\n\tconst sizeToUse = size ?? 'default';\n\tconst dropdownVisibilityRef = useRef<{\n\t\topenDropdown: boolean;\n\t}>();\n\tconst [selectedOption, setSelectedOption] = useState<DropdownOption[]>(\n\t\tdefaultOptions ?? [],\n\t);\n\tfunction handleSelection(option: DropdownOption \| DropdownOption[]) {\n\t\tif (Array.isArray(option)) {\n\t\t\tsetSelectedOption([...option]);\n\t\t} else {\n\t\t\tsetSelectedOption([...[option]]);\n\t\t}\n\t\tonSelect?.(option);\n\t}\n\n\tuseEffect(() => {\n\t\tconst flatSelectedOption: SingleOption[] = [];\n\t\topenDropdownProps?.options?.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t(option as GroupedOption).options.forEach((op) => {\n\t\t\t\t\tif (op.selected) {\n\t\t\t\t\t\tflatSelectedOption.push({\n\t\t\t\t\t\t\t...op,\n\t\t\t\t\t\t\tlabel: op.label,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tif ((option as SingleOption).selected) {\n\t\t\t\t\tflatSelectedOption.push(option as SingleOption);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tsetSelectedOption([...flatSelectedOption]);\n\t}, [openDropdownProps.options]);\n\n\tuseEffect(() => {\n\t\tif (defaultOptions) {\n\t\t\tsetSelectedOption([...defaultOptions]);\n\t\t}\n\t}, [defaultOptions]);\n\n\tconst textVal = getSelectedOptionsAsText(selectedOption);\n\tconst displayText = showPlaceholderWhenSelected\n\t\t? placeHolder\n\t\t: textVal ?? placeHolder ?? 'Select an option';\n\n\tconst configuredMaxWidth = openDropdownProps.buttonWidth;\n\n\t// Shared width for the input wrapper and dropdown popover\n\tconst inputWidth = configuredMaxWidth ?? openDropdownProps.width ?? '100%';\n\n\t// Width passed to dropdown popover — matches input box width\n\tconst dropdownWidth = openDropdownProps.dropdownWidth ?? inputWidth;\n\n\treturn (\n\t\t<>\n\t\t\t<InputStyleContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\tInputWrapper: {\n\t\t\t\t\t\theight: placeHolderHeight\n\t\t\t\t\t\t\t? placeHolderHeight\n\t\t\t\t\t\t\t: sizeToUse === 'x-small'\n\t\t\t\t\t\t\t? 24\n\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t? 32\n\t\t\t\t\t\t\t: 48,\n\t\t\t\t\t\twidth: inputWidth,\n\t\t\t\t\t\t...(configuredMaxWidth ? { maxWidth: configuredMaxWidth } : {}),\n\t\t\t\t\t\tzIndex: 1,\n\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\tpadding: sizeToUse === 'x-small' ? '4px 8px' : '6px 8px',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\tshowSelected && value !== undefined\n\t\t\t\t\t\t\t\t? COLORS.background.positive.light\n\t\t\t\t\t\t\t\t: isHovering\n\t\t\t\t\t\t\t\t? '#E0E0E0'\n\t\t\t\t\t\t\t\t: '#ffffff',\n\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t...inputStyle,\n\t\t\t\t\t},\n\t\t\t\t\tinput: {\n\t\t\t\t\t\tminHeight: '100%',\n\t\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\tshowSelected && value !== undefined\n\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t: 'inherit',\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tonMouseEnter={() => setIsHovering(true)}\n\t\t\t\t\tonMouseLeave={() => setIsHovering(false)}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\topenDropdownProps.width\n\t\t\t\t\t\t\t? { width: openDropdownProps.width }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\tref={\n\t\t\t\t\t\t\tdropdownVisibilityRef as Ref<{\n\t\t\t\t\t\t\t\topenDropdown: boolean;\n\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={handleSelection}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tonDropdownVisbilityChange={(isOpen) => setDropdownOpenFlag(isOpen)}\n\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\twidth={dropdownWidth}\n\t\t\t\t\t>\n\t\t\t\t\t\t{inputType == 'default' && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tversion={openDropdownProps.version}\n\t\t\t\t\t\t\t\tnoErrorHint={noErrorHint}\n\t\t\t\t\t\t\t\tstate={disabled ? 'disabled' : 'none'}\n\t\t\t\t\t\t\t\tvalue={value === undefined ? displayText : value}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tvariant={sizeToUse}\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select an option'}\n\t\t\t\t\t\t\t\tonChangeText={noop}\n\t\t\t\t\t\t\t\tleftIcon={\n\t\t\t\t\t\t\t\t\tshowLeadingIconInPlaceholder && selectedOption[0]?.leadingIcon\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\ticon: () => <>{selectedOption[0]?.leadingIcon}</>,\n\t\t\t\t\t\t\t\t\t\t }\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\trightIcon={{\n\t\t\t\t\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{showTrailingIconPlaceholder &&\n\t\t\t\t\t\t\t\t\t\t\t\t(selectedOption[0] as SingleOption)?.trailingIcon}\n\t\t\t\t\t\t\t\t\t\t\t<DownIcon\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransform: isDropdownOpened\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'rotate(180deg)'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'rotate(0deg)',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={noop}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\theight={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowSelected\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\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\ttruncateText={truncatedText ?? true}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{inputType == 'chip' && (\n\t\t\t\t\t\t\t<ChipInput\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select options'}\n\t\t\t\t\t\t\t\tchips={selectedOption as SingleOption[]}\n\t\t\t\t\t\t\t\tonDeleteChip={(chip) => {\n\t\t\t\t\t\t\t\t\tonDeleteChip?.(chip);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tisDropdownOpened={isDropdownOpened}\n\t\t\t\t\t\t\t\tsizeToUse={sizeToUse}\n\t\t\t\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\t\t\t\twidth: openDropdownProps.width ?? '100%',\n\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowLabelsOnMoreHover={showLabelsOnMoreHover}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownPopover>\n\t\t\t\t</div>\n\t\t\t</InputStyleContext.Provider>\n\t\t</>\n\t);\n};\n\nDropdown.displayName = 'Dropdown';\n"],"names":["noop","Dropdown","placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected","openDropdownProps","isDropdownOpened","setDropdownOpenFlag","useState","isHovering","setIsHovering","sizeToUse","dropdownVisibilityRef","useRef","selectedOption","setSelectedOption","handleSelection","option","useEffect","flatSelectedOption","op","textVal","getSelectedOptionsAsText","displayText","configuredMaxWidth","inputWidth","dropdownWidth","jsx","Fragment","InputStyleContext","COLORS","jsxs","DropdownPopover","isOpen","Input","DownIcon","ChipInput","chip"],"mappings":"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"}

package/dist/cjs/components/dropdown/DropdownPopover/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),H=require("react-popper"),I=require("../../../constants/Theme.js"),m=require("../Common.styled.js"),T=require("../../tooltips/Tooltip.js"),_=require("../../dropShadow/DropShadow.js"),k=require("../OpenedDropdown/components/OpennedDropdown.js"),w=a=>a&&typeof a=="object"&&"default"in a?a:{default:a},L=w(s),S=L.default.forwardRef(({children:a,onDropdownVisbilityChange:v,version:r="1.0",tooltipContent:u,tooltipDirection:g,showTooltipArrow:x,isChildLoading:h,forceOpen:d,...e},y)=>{const c=y,[l,i]=s.useState(!1),[j,o]=s.useState(!1),[R,E]=s.useState(null),[C,O]=s.useState(null),f=s.useRef(null),{styles:q,attributes:M}=H.usePopper(R,C,{placement:e.placement,strategy:e.strategy}),z=n=>{r==="2.0"&&e.isMultiSelect&&n&&e.onSelect?.([...n]),i(!1),e?.onClose?.()};s.useImperativeHandle(c,()=>({openDropdown:l}),[]),s.useEffect(()=>{c?.current&&(c.current.openDropdown=l)},[l]),s.useEffect(()=>{v?.(l)},[l]);const b=()=>t.jsxs(t.Fragment,{children:[t.jsxs("div",{style:{position:"relative",...r==="3.0"&&{backgroundColor:l||j?I.COLORS.surface.hovered:"transparent",transition:"background-color 0.3s ease",borderRadius:4}},ref:E,onMouseEnter:r==="3.0"?()=>o(!0):void 0,onMouseLeave:r==="3.0"?()=>o(!1):void 0,children:[t.jsx(m.OverLapAbs,{ref:f,allowEvents:e.allowEvents,disabled:e.disabled,onClick:n=>{e.onDropdownOpen?.(),l?(i(!1),n.preventDefault()):e.disabled||i(!0)},isChildLoading:h,children:e.allowEvents?a:null}),e.allowEvents?null:a]}),(l||d)&&t.jsx(m.OpenDropdownContainer,{ref:O,style:{...q.popper,zIndex:e.dropdownZIndex??3},...M.popper,"data-test":e["data-test"],children:t.jsx(_.DropShadow,{level:"z2",position:"down",style:{borderRadius:r==="3.0"?4:8,boxShadow:"0 2px 8px 0 rgba(0, 0, 0, 0.12)"},children:t.jsx(k.OpenedDropdown,{...e,onSelect:n=>{r==="2.0"&&e.isMultiSelect||(e.onSelect?.(n),i(!1))},onClose:z,version:r,headerRef:f,zeroState:e?.zeroState,isDraggable:e.isDraggable,onOptionsReorder:e.onOptionsReorder})})})]});return t.jsx(t.Fragment,{children:!l&&!d&&u!==void 0?t.jsx(T.Tooltip,{body:u,placement:g,hideArrow:!x,children:t.jsx("div",{"data-test":e["data-test"],children:b()})}):b()})});S.displayName="DropdownPopover";exports.DropdownPopover=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),z=require("react-popper"),m=require("../Common.styled.js"),_=require("../../tooltips/Tooltip.js"),I=require("../../dropShadow/DropShadow.js"),M=require("../OpenedDropdown/components/OpennedDropdown.js"),T=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},w=T(a),v=w.default.forwardRef(({children:l,onDropdownVisbilityChange:S,version:r="1.0",tooltipContent:u,tooltipDirection:b,showTooltipArrow:y,isChildLoading:j,forceOpen:d,...e},x)=>{const c=x,[s,i]=a.useState(!1),[h,g]=a.useState(null),[E,R]=a.useState(null),f=a.useRef(null),{styles:q,attributes:C}=z.usePopper(h,E,{placement:e.placement,strategy:e.strategy}),O=n=>{r==="2.0"&&e.isMultiSelect&&n&&e.onSelect?.([...n]),i(!1),e?.onClose?.()};a.useImperativeHandle(c,()=>({openDropdown:s}),[]),a.useEffect(()=>{c?.current&&(c.current.openDropdown=s)},[s]),a.useEffect(()=>{S?.(s)},[s]);const o=()=>t.jsxs(t.Fragment,{children:[t.jsxs("div",{style:{position:"relative"},ref:g,children:[t.jsx(m.OverLapAbs,{ref:f,allowEvents:e.allowEvents,disabled:e.disabled,onClick:n=>{e.onDropdownOpen?.(),s?(i(!1),n.preventDefault()):e.disabled||i(!0)},isChildLoading:j,children:e.allowEvents?l:null}),e.allowEvents?null:l]}),(s||d)&&t.jsx(m.OpenDropdownContainer,{ref:R,style:{...q.popper,zIndex:e.dropdownZIndex??3},...C.popper,"data-test":e["data-test"],children:t.jsx(I.DropShadow,{level:"z2",position:"down",style:{borderRadius:8},children:t.jsx(M.OpenedDropdown,{...e,onSelect:n=>{r==="2.0"&&e.isMultiSelect||(e.onSelect?.(n),i(!1))},onClose:O,version:r,headerRef:f,zeroState:e?.zeroState,isDraggable:e.isDraggable,onOptionsReorder:e.onOptionsReorder})})})]});return t.jsx(t.Fragment,{children:!s&&!d&&u!==void 0?t.jsx(_.Tooltip,{body:u,placement:b,hideArrow:!y,children:t.jsx("div",{"data-test":e["data-test"],children:o()})}):o()})});v.displayName="DropdownPopover";exports.DropdownPopover=v;
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/dropdown/DropdownPopover/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../../../src/components/dropdown/DropdownPopover/index.tsx"],"sourcesContent":["import React, {\n\tLegacyRef,\n\tRef,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { usePopper } from 'react-popper';\nimport { DropShadow } from '@src/components/dropShadow';\nimport { Placement, Tooltip } from '@src/components/tooltips';\nimport { ~~COLORS } from '@src/constants/Theme';\nimport {~~ OpenDropdownContainer, OverLapAbs } from '../Common.styled';\nimport { OpenedDropdown } from '../OpenedDropdown';\nimport { OpenDropdownProps } from '../type';\n\ntype DropdownProps = OpenDropdownProps & {\n\tisLoading?: boolean;\n\tchildren?: React.ReactNode;\n\tdisabled?: boolean;\n\tonDropdownOpen?: () => void;\n\tonDropdownVisbilityChange?: (isOpen: boolean) => void;\n\ttooltipContent?: string;\n\ttooltipDirection?: Placement;\n\tshowTooltipArrow?: boolean;\n\tallowEvents?: boolean;\n\t'data-test'?: string;\n\tisChildLoading?: boolean;\n\t/*\n\t If true, forces the dropdown to remain open regardless of user interaction or internal state.\n\t * This prop overrides the internal openDropdown state, ensuring the dropdown stays open.\n\t * Use this prop when you need to programmatically control the dropdown's visibility from a parent component.\n\t /\n\tforceOpen?: boolean;\n};\n\nexport const DropdownPopover = React.forwardRef<\n\t{\n\t\topenDropdown: boolean;\n\t},\n\tDropdownProps\n>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tonDropdownVisbilityChange,\n\t\t\tversion = '1.0',\n\t\t\ttooltipContent,\n\t\t\ttooltipDirection,\n\t\t\tshowTooltipArrow,\n\t\t\tisChildLoading,\n\t\t\tforceOpen,\n\t\t\t...openDropdownProps\n\t\t},\n\t\tunTypedRef,\n\t) => {\n\t\tconst ref = unTypedRef as React.RefObject<{ openDropdown: boolean }>;\n\t\tconst [openDropdown, setDropdownVisibility] = useState(false);\n\t\tconst [~~isHovering, setIsHovering] = useState(false);\n\t\tconst [~~referenceElement, setReferenceElement] = useState(null);\n\t\tconst [popperElement, setPopperElement] = useState(null);\n\t\tconst headerRef = useRef(null);\n\n\t\tconst { styles, attributes } = usePopper(referenceElement, popperElement, {\n\t\t\tplacement: openDropdownProps.placement,\n\t\t\tstrategy: openDropdownProps.strategy,\n\t\t});\n\n\t\tconst onCloseHandle = (data) => {\n\t\t\tif (version === '2.0' && openDropdownProps.isMultiSelect && data) {\n\t\t\t\topenDropdownProps.onSelect?.([...data]);\n\t\t\t}\n\t\t\tsetDropdownVisibility(false);\n\t\t\topenDropdownProps?.onClose?.();\n\t\t};\n\n\t\tuseImperativeHandle(\n\t\t\tref,\n\t\t\t() => {\n\t\t\t\treturn {\n\t\t\t\t\topenDropdown: openDropdown,\n\t\t\t\t};\n\t\t\t},\n\t\t\t[],\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tif (ref?.current) ref.current.openDropdown = openDropdown;\n\t\t}, [openDropdown]);\n\n\t\tuseEffect(() => {\n\t\t\tonDropdownVisbilityChange?.(openDropdown);\n\t\t}, [openDropdown]);\n\n\t\tconst dropDownComponent = () => {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{~~\n\t\t\t\t\t\t\tposition~~: 'relative'~~,\n\t\t\t\t\t\t\t...(version~~ === '3.0' && {\n\t\t\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\t\t\topenDropdown \|\| isHovering\n\t\t\t\t\t\t\t\t\t\t? COLORS.surface.hovered\n\t\t\t\t\t\t\t\t\t\t: 'transparent',\n\t\t\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t}~~),\n\t\t\t\t\t\t~~}}\n\t\t\t\t\t\t/* This assigment is mentioned as per react-popper's docs, so typecasting /\n\t\t\t\t\t\tref={setReferenceElement as LegacyRef<HTMLDivElement>}\n\t\t\t\t\t\tonMouseEnter={\n\t\t\t\t\t\t\tversion === '3.0' ? () => setIsHovering(true) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonMouseLeave={\n\t\t\t\t\t\t\tversion === '3.0' ? () => setIsHovering(false) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<OverLapAbs\n\t\t\t\t\t\t\tref={headerRef}\n\t\t\t\t\t\t\tallowEvents={openDropdownProps.allowEvents}\n\t\t\t\t\t\t\tdisabled={openDropdownProps.disabled}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\topenDropdownProps.onDropdownOpen?.();\n\t\t\t\t\t\t\t\tif (!openDropdown) {\n\t\t\t\t\t\t\t\t\tif (!openDropdownProps.disabled) setDropdownVisibility(true);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\n\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tisChildLoading={isChildLoading}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{openDropdownProps.allowEvents ? children : null}\n\t\t\t\t\t\t</OverLapAbs>\n\t\t\t\t\t\t{openDropdownProps.allowEvents ? null : children}\n\t\t\t\t\t</div>\n\t\t\t\t\t{(openDropdown \|\| forceOpen) && (\n\t\t\t\t\t\t<OpenDropdownContainer\n\t\t\t\t\t\t\t/* This assigment is mentioned as per react-popper's docs, so typecasting */\n\t\t\t\t\t\t\tref={setPopperElement as Ref<HTMLDivElement>}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t...styles['popper'],\n\t\t\t\t\t\t\t\tzIndex: openDropdownProps.dropdownZIndex ?? 3,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t{...attributes['popper']}\n\t\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DropShadow\n\t\t\t\t\t\t\t\tlevel={'z2'}\n\t\t\t\t\t\t\t\tposition={'down'}\n\t\t\t\t\t\t\t\tstyle={{~~\n\t\t\t\t\t\t\t\t\tborderRadius:~~ ~~version === '3.0' ? 4~~ : 8~~,\n\t\t\t\t\t\t\t\t\tboxShadow:~~ ~~'0 2px 8px 0 rgba(0, 0, 0, 0.12)',\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<OpenedDropdown\n\t\t\t\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\t\t\t\tonSelect={(options) => {\n\t\t\t\t\t\t\t\t\t\tif (version === '2.0' && openDropdownProps.isMultiSelect) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\topenDropdownProps.onSelect?.(options);\n\t\t\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\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\tonClose={onCloseHandle}\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\theaderRef={headerRef}\n\t\t\t\t\t\t\t\t\tzeroState={openDropdownProps?.zeroState}\n\t\t\t\t\t\t\t\t\tisDraggable={openDropdownProps.isDraggable}\n\t\t\t\t\t\t\t\t\tonOptionsReorder={openDropdownProps.onOptionsReorder}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DropShadow>\n\t\t\t\t\t\t</OpenDropdownContainer>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{!openDropdown && !forceOpen && tooltipContent !== undefined ? (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={tooltipContent}\n\t\t\t\t\t\tplacement={tooltipDirection}\n\t\t\t\t\t\thideArrow={!showTooltipArrow}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div data-test={openDropdownProps['data-test']}>\n\t\t\t\t\t\t\t{dropDownComponent()}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\tdropDownComponent()\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t},\n);\n\nDropdownPopover.displayName = 'DropdownPopover';\n"],"names":["DropdownPopover","React","children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen","openDropdownProps","unTypedRef","ref","openDropdown","setDropdownVisibility","useState","~~isHovering","setIsHovering","~~referenceElement","setReferenceElement","popperElement","setPopperElement","headerRef","useRef","styles","attributes","usePopper","onCloseHandle","data","useImperativeHandle","useEffect","dropDownComponent","jsxs","Fragment","~~COLORS","~~jsx","OverLapAbs","e","OpenDropdownContainer","DropShadow","OpenedDropdown","options","Tooltip"],"mappings":"~~2bAoCaA~~,EAAkBC,EAAAA,QAAM,WAMpC,CACC,CACC,SAAAC,EACA,0BAAAC,EACA,QAAAC,EAAU,MACV,eAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,UAAAC,EACA,GAAGC,CAAA,EAEJC,IACI,CACJ,MAAMC,EAAMD,EACN,CAACE,EAAcC,CAAqB,EAAIC,EAAAA,SAAS,EAAK,EACtD,CAACC,~~EAAYC,CAAa,EAAIF,EAAAA,SAAS,EAAK,EAC5C,CAACG,~~EAAkBC,CAAmB,~~EAAIJ~~,EAAAA,SAAS,IAAI,EACvD,~~CAACK~~,EAAeC,CAAgB,~~EAAIN~~,EAAAA,SAAS,IAAI,~~EACjDO~~,EAAYC,EAAAA,OAAO,IAAI,EAEvB,CAAE,OAAAC,EAAQ,WAAAC,CAAA,EAAeC,EAAAA,UAAUR,EAAkBE,EAAe,CACzE,~~UAAWV~~,EAAkB,UAC7B,SAAUA,EAAkB,QAAA,CAC5B,~~EAEKiB~~,EAAiBC,GAAS,~~CAC3BxB~~,IAAY,OAASM,EAAkB,~~eAAiBkB~~,~~GAC3DlB~~,EAAkB,WAAW,CAAC,~~GAAGkB~~,CAAI,CAAC,~~EAEvCd~~,EAAsB,EAAK,EAC3BJ,GAAmB,UAAA,CACpB,~~EAEAmB~~,EAAAA,~~oBACCjB~~,EACA,KACQ,CACN,aAAAC,CAAA,GAGF,CAAA,CAAC,~~EAGFiB~~,EAAAA,UAAU,IAAM,~~CACXlB~~,GAAK,UAASA,EAAI,QAAQ,aAAeC,EAC9C,EAAG,CAACA,CAAY,CAAC,~~EAEjBiB~~,EAAAA,UAAU,IAAM,~~CACf3B~~,IAA4BU,CAAY,CACzC,EAAG,CAACA,CAAY,CAAC,EAEjB,~~MAAMkB~~,EAAoB,IAExBC,EAAAA,KAAAC,WAAA,CACC,SAAA,CAAAD,EAAAA,KAAC,MAAA,CACA,MAAO,~~CACN~~,SAAU,~~WACV~~,~~GAAI5B~~,~~IAAY~~,~~OAAS~~,~~CACxB,gBACCS,GAAgBG,EACbkB,EAAAA,OAAO,QAAQ,QACf,cACJ,WAAY,6BACZ,aAAc,CAAA,CACf,EAGD,IAAKf,EACL,aACCf,IAAY,MAAQ,IAAMa,EAAc,EAAI,EAAI,OAEjD,aACCb,IAAY,MAAQ,IAAMa,EAAc,EAAK,EAAI,OAGlD,~~SAAA,~~CAAAkB~~,EAAAA,IAACC,EAAAA,WAAA,CACA,~~IAAKd~~,EACL,~~YAAaZ~~,EAAkB,YAC/B,SAAUA,EAAkB,SAC5B,~~QAAU2B~~,GAAM,~~CACf3B~~,EAAkB,iBAAA,EACbG,GAGJC,EAAsB,EAAK,~~EAC3BuB~~,EAAE,eAAA,~~GAHG3B~~,EAAkB,UAAUI,EAAsB,EAAI,CAK7D,EACA,eAAAN,EAEC,SAAAE,EAAkB,YAAcR,EAAW,IAAA,CAAA,EAE5CQ,EAAkB,YAAc,KAAOR,CAAA,CAAA,CAAA,GAEvCW,GAAgBJ,~~IACjB0B~~,EAAAA,IAACG,EAAAA,sBAAA,CAEA,~~IAAKjB~~,EACL,MAAO,CACN,GAAGG,EAAO,OACV,~~OAAQd~~,EAAkB,gBAAkB,CAAA,EAE5C,~~GAAGe~~,EAAW,OACf,~~YAAWf~~,EAAkB,WAAW,EAExC,~~SAAAyB~~,EAAAA,IAACI,EAAAA,WAAA,CACA,MAAO,KACP,SAAU,OACV,MAAO,~~CACN~~,~~aAAcnC~~,~~IAAY~~,~~MAAQ~~,~~EAAI~~,~~EACtC,UAAW,iCAAA,EAGZ,SAAA+B,~~EAAAA,IAACK,EAAAA,eAAA,CACC,~~GAAG9B~~,EACJ,~~SAAW+B~~,GAAY,~~CAClBrC~~,IAAY,OAASM,EAAkB,gBAG1CA,EAAkB,~~WAAW+B~~,CAAO,~~EACpC3B~~,EAAsB,EAAK,EAE7B,EACA,~~QAASa~~,EACT,~~QAAAvB~~,EACA,~~UAAAkB~~,EACA,~~UAAWZ~~,GAAmB,UAC9B,YAAaA,EAAkB,YAC/B,iBAAkBA,EAAkB,gBAAA,CAAA,CACrC,CAAA,CACD,CAAA,CACD,EAEF,EAIF,yBAEG,SAAA,CAACG,GAAgB,CAACJ,GAAaJ,IAAmB,~~OAClD8B~~,EAAAA,IAACO,EAAAA,QAAA,CACA,~~KAAMrC~~,EACN,UAAWC,EACX,UAAW,CAACC,EAEZ,eAAC,MAAA,CAAI,YAAWG,EAAkB,WAAW,EAC3C,YAAkB,CACpB,CAAA,CAAA,~~EAGDqB~~,GAAkB,CAEpB,CAEF,CACD,~~EAEA/B~~,EAAgB,YAAc"}
1	+ {"version":3,"file":"index.js","sources":["../../../../../src/components/dropdown/DropdownPopover/index.tsx"],"sourcesContent":["import React, {\n\tLegacyRef,\n\tRef,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { usePopper } from 'react-popper';\nimport { DropShadow } from '@src/components/dropShadow';\nimport { Placement, Tooltip } from '@src/components/tooltips';\nimport { OpenDropdownContainer, OverLapAbs } from '../Common.styled';\nimport { OpenedDropdown } from '../OpenedDropdown';\nimport { OpenDropdownProps } from '../type';\n\ntype DropdownProps = OpenDropdownProps & {\n\tisLoading?: boolean;\n\tchildren?: React.ReactNode;\n\tdisabled?: boolean;\n\tonDropdownOpen?: () => void;\n\tonDropdownVisbilityChange?: (isOpen: boolean) => void;\n\ttooltipContent?: string;\n\ttooltipDirection?: Placement;\n\tshowTooltipArrow?: boolean;\n\tallowEvents?: boolean;\n\t'data-test'?: string;\n\tisChildLoading?: boolean;\n\t/*\n\t If true, forces the dropdown to remain open regardless of user interaction or internal state.\n\t * This prop overrides the internal openDropdown state, ensuring the dropdown stays open.\n\t * Use this prop when you need to programmatically control the dropdown's visibility from a parent component.\n\t /\n\tforceOpen?: boolean;\n};\n\nexport const DropdownPopover = React.forwardRef<\n\t{\n\t\topenDropdown: boolean;\n\t},\n\tDropdownProps\n>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tonDropdownVisbilityChange,\n\t\t\tversion = '1.0',\n\t\t\ttooltipContent,\n\t\t\ttooltipDirection,\n\t\t\tshowTooltipArrow,\n\t\t\tisChildLoading,\n\t\t\tforceOpen,\n\t\t\t...openDropdownProps\n\t\t},\n\t\tunTypedRef,\n\t) => {\n\t\tconst ref = unTypedRef as React.RefObject<{ openDropdown: boolean }>;\n\t\tconst [openDropdown, setDropdownVisibility] = useState(false);\n\t\tconst [referenceElement, setReferenceElement] = useState(null);\n\t\tconst [popperElement, setPopperElement] = useState(null);\n\t\tconst headerRef = useRef(null);\n\n\t\tconst { styles, attributes } = usePopper(referenceElement, popperElement, {\n\t\t\tplacement: openDropdownProps.placement,\n\t\t\tstrategy: openDropdownProps.strategy,\n\t\t});\n\n\t\tconst onCloseHandle = (data) => {\n\t\t\tif (version === '2.0' && openDropdownProps.isMultiSelect && data) {\n\t\t\t\topenDropdownProps.onSelect?.([...data]);\n\t\t\t}\n\t\t\tsetDropdownVisibility(false);\n\t\t\topenDropdownProps?.onClose?.();\n\t\t};\n\n\t\tuseImperativeHandle(\n\t\t\tref,\n\t\t\t() => {\n\t\t\t\treturn {\n\t\t\t\t\topenDropdown: openDropdown,\n\t\t\t\t};\n\t\t\t},\n\t\t\t[],\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tif (ref?.current) ref.current.openDropdown = openDropdown;\n\t\t}, [openDropdown]);\n\n\t\tuseEffect(() => {\n\t\t\tonDropdownVisbilityChange?.(openDropdown);\n\t\t}, [openDropdown]);\n\n\t\tconst dropDownComponent = () => {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{ position: 'relative' }}\n\t\t\t\t\t\t/* This assigment is mentioned as per react-popper's docs, so typecasting /\n\t\t\t\t\t\tref={setReferenceElement as LegacyRef<HTMLDivElement>}\n\t\t\t\t\t>\n\t\t\t\t\t\t<OverLapAbs\n\t\t\t\t\t\t\tref={headerRef}\n\t\t\t\t\t\t\tallowEvents={openDropdownProps.allowEvents}\n\t\t\t\t\t\t\tdisabled={openDropdownProps.disabled}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\topenDropdownProps.onDropdownOpen?.();\n\t\t\t\t\t\t\t\tif (!openDropdown) {\n\t\t\t\t\t\t\t\t\tif (!openDropdownProps.disabled) setDropdownVisibility(true);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\n\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tisChildLoading={isChildLoading}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{openDropdownProps.allowEvents ? children : null}\n\t\t\t\t\t\t</OverLapAbs>\n\t\t\t\t\t\t{openDropdownProps.allowEvents ? null : children}\n\t\t\t\t\t</div>\n\t\t\t\t\t{(openDropdown \|\| forceOpen) && (\n\t\t\t\t\t\t<OpenDropdownContainer\n\t\t\t\t\t\t\t/* This assigment is mentioned as per react-popper's docs, so typecasting */\n\t\t\t\t\t\t\tref={setPopperElement as Ref<HTMLDivElement>}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t...styles['popper'],\n\t\t\t\t\t\t\t\tzIndex: openDropdownProps.dropdownZIndex ?? 3,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t{...attributes['popper']}\n\t\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DropShadow\n\t\t\t\t\t\t\t\tlevel={'z2'}\n\t\t\t\t\t\t\t\tposition={'down'}\n\t\t\t\t\t\t\t\tstyle={{ borderRadius: 8 }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<OpenedDropdown\n\t\t\t\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\t\t\t\tonSelect={(options) => {\n\t\t\t\t\t\t\t\t\t\tif (version === '2.0' && openDropdownProps.isMultiSelect) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\topenDropdownProps.onSelect?.(options);\n\t\t\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\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\tonClose={onCloseHandle}\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\theaderRef={headerRef}\n\t\t\t\t\t\t\t\t\tzeroState={openDropdownProps?.zeroState}\n\t\t\t\t\t\t\t\t\tisDraggable={openDropdownProps.isDraggable}\n\t\t\t\t\t\t\t\t\tonOptionsReorder={openDropdownProps.onOptionsReorder}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DropShadow>\n\t\t\t\t\t\t</OpenDropdownContainer>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{!openDropdown && !forceOpen && tooltipContent !== undefined ? (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={tooltipContent}\n\t\t\t\t\t\tplacement={tooltipDirection}\n\t\t\t\t\t\thideArrow={!showTooltipArrow}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div data-test={openDropdownProps['data-test']}>\n\t\t\t\t\t\t\t{dropDownComponent()}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\tdropDownComponent()\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t},\n);\n\nDropdownPopover.displayName = 'DropdownPopover';\n"],"names":["DropdownPopover","React","children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen","openDropdownProps","unTypedRef","ref","openDropdown","setDropdownVisibility","useState","referenceElement","setReferenceElement","popperElement","setPopperElement","headerRef","useRef","styles","attributes","usePopper","onCloseHandle","data","useImperativeHandle","useEffect","dropDownComponent","jsxs","Fragment","jsx","OverLapAbs","e","OpenDropdownContainer","DropShadow","OpenedDropdown","options","Tooltip"],"mappings":"kZAmCaA,EAAkBC,EAAAA,QAAM,WAMpC,CACC,CACC,SAAAC,EACA,0BAAAC,EACA,QAAAC,EAAU,MACV,eAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,UAAAC,EACA,GAAGC,CAAA,EAEJC,IACI,CACJ,MAAMC,EAAMD,EACN,CAACE,EAAcC,CAAqB,EAAIC,EAAAA,SAAS,EAAK,EACtD,CAACC,EAAkBC,CAAmB,EAAIF,EAAAA,SAAS,IAAI,EACvD,CAACG,EAAeC,CAAgB,EAAIJ,EAAAA,SAAS,IAAI,EACjDK,EAAYC,EAAAA,OAAO,IAAI,EAEvB,CAAE,OAAAC,EAAQ,WAAAC,CAAA,EAAeC,EAAAA,UAAUR,EAAkBE,EAAe,CACzE,UAAWR,EAAkB,UAC7B,SAAUA,EAAkB,QAAA,CAC5B,EAEKe,EAAiBC,GAAS,CAC3BtB,IAAY,OAASM,EAAkB,eAAiBgB,GAC3DhB,EAAkB,WAAW,CAAC,GAAGgB,CAAI,CAAC,EAEvCZ,EAAsB,EAAK,EAC3BJ,GAAmB,UAAA,CACpB,EAEAiB,EAAAA,oBACCf,EACA,KACQ,CACN,aAAAC,CAAA,GAGF,CAAA,CAAC,EAGFe,EAAAA,UAAU,IAAM,CACXhB,GAAK,UAASA,EAAI,QAAQ,aAAeC,EAC9C,EAAG,CAACA,CAAY,CAAC,EAEjBe,EAAAA,UAAU,IAAM,CACfzB,IAA4BU,CAAY,CACzC,EAAG,CAACA,CAAY,CAAC,EAEjB,MAAMgB,EAAoB,IAExBC,EAAAA,KAAAC,WAAA,CACC,SAAA,CAAAD,EAAAA,KAAC,MAAA,CACA,MAAO,CAAE,SAAU,UAAA,EAEnB,IAAKb,EAEL,SAAA,CAAAe,EAAAA,IAACC,EAAAA,WAAA,CACA,IAAKb,EACL,YAAaV,EAAkB,YAC/B,SAAUA,EAAkB,SAC5B,QAAUwB,GAAM,CACfxB,EAAkB,iBAAA,EACbG,GAGJC,EAAsB,EAAK,EAC3BoB,EAAE,eAAA,GAHGxB,EAAkB,UAAUI,EAAsB,EAAI,CAK7D,EACA,eAAAN,EAEC,SAAAE,EAAkB,YAAcR,EAAW,IAAA,CAAA,EAE5CQ,EAAkB,YAAc,KAAOR,CAAA,CAAA,CAAA,GAEvCW,GAAgBJ,IACjBuB,EAAAA,IAACG,EAAAA,sBAAA,CAEA,IAAKhB,EACL,MAAO,CACN,GAAGG,EAAO,OACV,OAAQZ,EAAkB,gBAAkB,CAAA,EAE5C,GAAGa,EAAW,OACf,YAAWb,EAAkB,WAAW,EAExC,SAAAsB,EAAAA,IAACI,EAAAA,WAAA,CACA,MAAO,KACP,SAAU,OACV,MAAO,CAAE,aAAc,CAAA,EAEvB,SAAAJ,EAAAA,IAACK,EAAAA,eAAA,CACC,GAAG3B,EACJ,SAAW4B,GAAY,CAClBlC,IAAY,OAASM,EAAkB,gBAG1CA,EAAkB,WAAW4B,CAAO,EACpCxB,EAAsB,EAAK,EAE7B,EACA,QAASW,EACT,QAAArB,EACA,UAAAgB,EACA,UAAWV,GAAmB,UAC9B,YAAaA,EAAkB,YAC/B,iBAAkBA,EAAkB,gBAAA,CAAA,CACrC,CAAA,CACD,CAAA,CACD,EAEF,EAIF,yBAEG,SAAA,CAACG,GAAgB,CAACJ,GAAaJ,IAAmB,OAClD2B,EAAAA,IAACO,EAAAA,QAAA,CACA,KAAMlC,EACN,UAAWC,EACX,UAAW,CAACC,EAEZ,eAAC,MAAA,CAAI,YAAWG,EAAkB,WAAW,EAC3C,YAAkB,CACpB,CAAA,CAAA,EAGDmB,GAAkB,CAEpB,CAEF,CACD,EAEA7B,EAAgB,YAAc"}

package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),Ue=require("../../../../assets/icons/errorInfo.svg.js"),Pe=require("../../../../assets/icons/refresh-purple.svg.js"),r=require("react"),Ke=require("../../../zeroState/ZeroState.js"),Ve=require("../../../../hooks/useOutside.js"),R=require("../../../../constants/Theme.js"),$e=require("../../hooks/useDropdown.js"),Ne=require("./description/Description.js"),_e=require("./menu/FreeFormMenu.js"),ze=require("./menu/MenuList.js"),Ge=require("./menu/SelectAllMenu.js"),Je=require("./multiSelect/MultiSelectDropdownBottomBar.js"),te=require("./OpennedDropdown.styled.js"),Qe=require("./searchbox/SearchBox.js"),Xe=require("./searchbox/SearchZeroState.js"),V={height:304,width:290},Ye=({options:q,isSearchable:g,isMultiSelect:i,maxSelections:C,width:I,allowFreeForm:$,height:ne,onClose:N,onSelect:se,onSearch:d,version:l,skipSorting:re,headerRef:oe,hideSelectAll:ue,primaryButtonText:ce,onInfiniteScroll:ie,onMultiSelectClear:le,onDropdownItemClick:E,buttonOptions:ae,isSearchLoading:de,isOptionsLoading:fe,optionsErrorState:w,disableSearchOptions:he,disableSearchedOptionExcept:pe,useDefaultCursor:ge,containerStyle:we={},zeroState:F=void 0,isDraggable:y=!1,onOptionsReorder:O,hideClearButton:ye=!1,showCheckboxForCustomElement:Oe=!1,checkboxActiveColor:A,brandSelectedRow:B})=>{const W=r.useCallback(e=>{if(!y||!i)return e;const t=[],n=[];return e.forEach(u=>{u.options?n.push(u):u.selected?t.push(u):n.push(u)}),[...t,...n]},[y,i]),[j,_]=r.useState(()=>W(q)),z=r.useRef(j),G=r.useRef(!1),H=r.useRef(O);r.useEffect(()=>{_(W(q))},[q,W]),r.useEffect(()=>{z.current=j},[j]),r.useEffect(()=>{H.current=O},[O]),r.useEffect(()=>()=>{G.current&&H.current&&H.current(z.current)},[]);const xe=r.useCallback(e=>{_(e),l==="2.0"?O?.(e):G.current=!0},[O,l]),Se=y?j:q,{dropdownOptions:f,search:me,searchedString:s,searchedOptions:x,searchError:be,retrySearch:Le,onApplyHandler:M,selectAllHandler:Te,onMultiSelectClear:Re,onFreeFormSelect:qe,onMultiSelectApply:Ce,latestDropdownOptionsRef:Ee,getSelectedOptions:je,getCurrentSelectionCount:ke}=$e.useDropdown(l,Se,se,re||y,i,d,he,pe,C),[De,v]=r.useState(I??V.width),[p,Z]=r.useState(null),[k,J]=r.useState(-1),S=r.useRef(null),Q=r.useRef([]),U=r.useRef(null);Ve.useOutside(S,()=>{if(Z(null),i&&l==="2.0"){const e=je(Ee.current);N?.(e)}else N?.(f)},[oe,Q]),r.useEffect(()=>{const e=setTimeout(()=>{S.current&&S.current.focus({preventScroll:!0})},0);return()=>clearTimeout(e)},[]);const Ie=e=>{const t=[];return e.forEach(n=>{if(n.options)n.options.forEach(o=>{o.disabled||t.push(o)});else{const u=n;u.disabled||t.push(u)}}),t};r.useEffect(()=>{const e=n=>{const o=Ie(s&&d?x:f);if(o.length!==0){if(n.key==="ArrowDown")n.preventDefault(),J(a=>{const L=a<o.length-1?a+1:0;return setTimeout(()=>{const T=U.current?.querySelector(`[data-option-index="${L}"]`);T&&T.scrollIntoView({block:"nearest",behavior:"smooth"})},0),L});else if(n.key==="ArrowUp")n.preventDefault(),J(a=>{const L=a>0?a-1:o.length-1;return setTimeout(()=>{const T=U.current?.querySelector(`[data-option-index="${L}"]`);T&&T.scrollIntoView({block:"nearest",behavior:"smooth"})},0),L});else if(n.key==="Enter"&&k>=0){n.preventDefault();const a=o[k];a&&(M({...a,selected:!a.selected}),E&&E(a))}}},t=S.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}},[k,s,x,f,d,M,E]);const h=ne??V.height,X=typeof h=="number"?g&&i?h-96:g&&!i||!g&&i?h-48:h:h;function Fe(e,t){Z(e&&t?{title:e,description:t}:null)}r.useEffect(()=>{const e=I??V.width;if(p===null)v(e);else if(typeof e=="number")v(e*2);else if(typeof e=="string"&&e.endsWith("px")){const t=parseInt(e.replace("px",""))*2;v(t)}},[p]);const D=[],P=(e=>{if(!i||!C&&C!==0)return e;const n=ke(f)>=C;return n?e.map(u=>{if(u.options)return{...u,options:u.options.map(o=>({...o,disabled:o.disabled||!o.selected&&n}))};{const o=u;return{...o,disabled:o.disabled||!o.selected&&n}}}):e})((s&&d?x:f).map(e=>{if(s&&!d)if(e.options){const t={...e};return t.options=t.options.filter(n=>n.label?.toLowerCase().includes(s.toLowerCase())?(D.push(!s||n.label===s),!0):!1),t.options.length>0?t:null}else return e.label?.toLowerCase().includes(s.toLowerCase())||e.searchKey?.toLowerCase().includes(s.toLowerCase())?(D.push(!s||e.label===s),e):null;return e}).filter(e=>e!==null)),K=!!g&&s&&P.length===0,m=!s&&!!fe,b=!s&&!!w&&!m,Ae=!s&&!P.length&&!m&&!b,Y=m||b||Ae,Be=F?.title||"No results found",We=F?.subTitle||"Please try again later or contact us at support@bik.ai if you require further assistance.",He=w?.title||"Failed to load options",Me=w?.subTitle||"Something went wrong while fetching the list. Please try again",ve={buttonText:"Try again",buttonType:"text",size:"small",buttonTextColor:R.COLORS.background.inverseLight,customIconColor:R.COLORS.background.inverseLight,LeadingIcon:Pe.default},ee={IconHolderStyle:{background:R.COLORS.background.negative.light},Icon:c.jsx(Ue.default,{color:R.COLORS.content.negative,width:24,height:24}),...w};ee.actionButton={...ve,...w?.actionButton??{}};const Ze=m?void 0:b?ee:F;return c.jsxs(te.OpennedDropdownContainer,{version:l,ref:S,tabIndex:-1,style:{width:De,...we,outline:"none"},children:[c.jsxs("div",{style:{width:p?"50%":"100%",display:"flex",flexDirection:"column",background:"white"},children:[!!g&&c.jsx(Qe.SearchBox,{onSearch:me,version:l}),Y?c.jsx("div",{style:{height:h,display:"flex",background:R.COLORS.background.base},children:c.jsx(Ke.ZeroState,{...Ze??{},isLoading:m,title:b?He:Be,subTitle:b?Me:We})}):c.jsxs(te.MenuListContainer,{minHeight:h,maxHeight:X,ref:U,children:[!!i&&!K&&!ue&&c.jsx(Ge.SelectAllMenu,{version:l,options:s&&d?x:f,onSelect:Te,checkboxActiveColor:A,brandSelectedRow:B}),!$&&K&&c.jsx(Xe.SearchZeroState,{isLoading:de,errorMessage:be,onRetry:Le,height:X,searchedString:s,containerWidth:I,version:l}),$&&(K||!!D.length&&D.every(e=>e===!1))&&c.jsx(_e.FreeFormMenu,{version:l,isMultiSelect:i,onSelect:qe,searchedString:s,checkboxActiveColor:A,brandSelectedRow:B}),c.jsx(ze.MenuList,{onInfiniteScroll:ie,onDropdownItemClick:E,version:l,onSelect:M,showDescription:Fe,isMultiSelect:i,options:P,useDefaultCursor:ge,ref:Q,focusedIndex:k,isDraggable:y,onOptionsReorder:xe,showCheckboxForCustomElement:Oe,checkboxActiveColor:A,brandSelectedRow:B})]}),!!i&&!Y&&l!=="2.0"&&c.jsx(Je.default,{onClear:()=>{Re(),le?.()},onApply:Ce,list:s&&d?x:f,buttonText:ce,buttonOptions:ae,hideClearButton:ye})]}),!!p&&c.jsx(Ne.Description,{title:p.title,description:p.description,version:l})]})};exports.OpenedDropdown=Ye;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),Me=require("../../../../assets/icons/errorInfo.svg.js"),Ze=require("../../../../assets/icons/refresh-purple.svg.js"),o=require("react"),Ue=require("../../../zeroState/ZeroState.js"),Pe=require("../../../../hooks/useOutside.js"),R=require("../../../../constants/Theme.js"),Ke=require("../../hooks/useDropdown.js"),Ve=require("./description/Description.js"),$e=require("./menu/FreeFormMenu.js"),Ne=require("./menu/MenuList.js"),_e=require("./menu/SelectAllMenu.js"),ze=require("./multiSelect/MultiSelectDropdownBottomBar.js"),Y=require("./OpennedDropdown.styled.js"),Ge=require("./searchbox/SearchBox.js"),Je=require("./searchbox/SearchZeroState.js"),P={height:304,width:290},Qe=({options:C,isSearchable:g,isMultiSelect:l,maxSelections:q,width:I,allowFreeForm:K,height:ee,onClose:V,onSelect:te,onSearch:d,version:i,skipSorting:ne,headerRef:se,hideSelectAll:oe,primaryButtonText:re,onInfiniteScroll:ce,onMultiSelectClear:ue,onDropdownItemClick:E,buttonOptions:le,isSearchLoading:ie,isOptionsLoading:ae,optionsErrorState:w,disableSearchOptions:de,disableSearchedOptionExcept:fe,useDefaultCursor:he,containerStyle:pe={},zeroState:A=void 0,isDraggable:x=!1,onOptionsReorder:y,hideClearButton:ge=!1,showCheckboxForCustomElement:we=!1})=>{const F=o.useCallback(e=>{if(!x||!l)return e;const t=[],n=[];return e.forEach(c=>{c.options?n.push(c):c.selected?t.push(c):n.push(c)}),[...t,...n]},[x,l]),[j,$]=o.useState(()=>F(C)),N=o.useRef(j),_=o.useRef(!1),v=o.useRef(y);o.useEffect(()=>{$(F(C))},[C,F]),o.useEffect(()=>{N.current=j},[j]),o.useEffect(()=>{v.current=y},[y]),o.useEffect(()=>()=>{_.current&&v.current&&v.current(N.current)},[]);const xe=o.useCallback(e=>{$(e),i==="2.0"?y?.(e):_.current=!0},[y,i]),ye=x?j:C,{dropdownOptions:f,search:Oe,searchedString:s,searchedOptions:O,searchError:Se,retrySearch:be,onApplyHandler:B,selectAllHandler:me,onMultiSelectClear:Le,onFreeFormSelect:Te,onMultiSelectApply:Re,latestDropdownOptionsRef:Ce,getSelectedOptions:qe,getCurrentSelectionCount:Ee}=Ke.useDropdown(i,ye,te,ne||x,l,d,de,fe,q),[je,W]=o.useState(I??P.width),[p,H]=o.useState(null),[k,z]=o.useState(-1),S=o.useRef(null),G=o.useRef([]),M=o.useRef(null);Pe.useOutside(S,()=>{if(H(null),l&&i==="2.0"){const e=qe(Ce.current);V?.(e)}else V?.(f)},[se,G]),o.useEffect(()=>{const e=setTimeout(()=>{S.current&&S.current.focus({preventScroll:!0})},0);return()=>clearTimeout(e)},[]);const ke=e=>{const t=[];return e.forEach(n=>{if(n.options)n.options.forEach(r=>{r.disabled||t.push(r)});else{const c=n;c.disabled||t.push(c)}}),t};o.useEffect(()=>{const e=n=>{const r=ke(s&&d?O:f);if(r.length!==0){if(n.key==="ArrowDown")n.preventDefault(),z(a=>{const L=a<r.length-1?a+1:0;return setTimeout(()=>{const T=M.current?.querySelector(`[data-option-index="${L}"]`);T&&T.scrollIntoView({block:"nearest",behavior:"smooth"})},0),L});else if(n.key==="ArrowUp")n.preventDefault(),z(a=>{const L=a>0?a-1:r.length-1;return setTimeout(()=>{const T=M.current?.querySelector(`[data-option-index="${L}"]`);T&&T.scrollIntoView({block:"nearest",behavior:"smooth"})},0),L});else if(n.key==="Enter"&&k>=0){n.preventDefault();const a=r[k];a&&(B({...a,selected:!a.selected}),E&&E(a))}}},t=S.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}},[k,s,O,f,d,B,E]);const h=ee??P.height,J=typeof h=="number"?g&&l?h-96:g&&!l||!g&&l?h-48:h:h;function De(e,t){H(e&&t?{title:e,description:t}:null)}o.useEffect(()=>{const e=I??P.width;if(p===null)W(e);else if(typeof e=="number")W(e*2);else if(typeof e=="string"&&e.endsWith("px")){const t=parseInt(e.replace("px",""))*2;W(t)}},[p]);const D=[],Z=(e=>{if(!l||!q&&q!==0)return e;const n=Ee(f)>=q;return n?e.map(c=>{if(c.options)return{...c,options:c.options.map(r=>({...r,disabled:r.disabled||!r.selected&&n}))};{const r=c;return{...r,disabled:r.disabled||!r.selected&&n}}}):e})((s&&d?O:f).map(e=>{if(s&&!d)if(e.options){const t={...e};return t.options=t.options.filter(n=>n.label?.toLowerCase().includes(s.toLowerCase())?(D.push(!s||n.label===s),!0):!1),t.options.length>0?t:null}else return e.label?.toLowerCase().includes(s.toLowerCase())||e.searchKey?.toLowerCase().includes(s.toLowerCase())?(D.push(!s||e.label===s),e):null;return e}).filter(e=>e!==null)),U=!!g&&s&&Z.length===0,b=!s&&!!ae,m=!s&&!!w&&!b,Ie=!s&&!Z.length&&!b&&!m,Q=b||m||Ie,Ae=A?.title||"No results found",Fe=A?.subTitle||"Please try again later or contact us at support@bik.ai if you require further assistance.",ve=w?.title||"Failed to load options",Be=w?.subTitle||"Something went wrong while fetching the list. Please try again",We={buttonText:"Try again",buttonType:"text",size:"small",buttonTextColor:R.COLORS.background.inverseLight,customIconColor:R.COLORS.background.inverseLight,LeadingIcon:Ze.default},X={IconHolderStyle:{background:R.COLORS.background.negative.light},Icon:u.jsx(Me.default,{color:R.COLORS.content.negative,width:24,height:24}),...w};X.actionButton={...We,...w?.actionButton??{}};const He=b?void 0:m?X:A;return u.jsxs(Y.OpennedDropdownContainer,{version:i,ref:S,tabIndex:-1,style:{width:je,...pe,outline:"none"},children:[u.jsxs("div",{style:{width:p?"50%":"100%",display:"flex",flexDirection:"column",background:"white"},children:[!!g&&u.jsx(Ge.SearchBox,{onSearch:Oe,version:i}),Q?u.jsx("div",{style:{height:h,display:"flex",background:R.COLORS.background.base},children:u.jsx(Ue.ZeroState,{...He??{},isLoading:b,title:m?ve:Ae,subTitle:m?Be:Fe})}):u.jsxs(Y.MenuListContainer,{minHeight:h,maxHeight:J,ref:M,children:[!!l&&!U&&!oe&&u.jsx(_e.SelectAllMenu,{version:i,options:s&&d?O:f,onSelect:me}),!K&&U&&u.jsx(Je.SearchZeroState,{isLoading:ie,errorMessage:Se,onRetry:be,height:J,searchedString:s,containerWidth:I}),K&&(U||!!D.length&&D.every(e=>e===!1))&&u.jsx($e.FreeFormMenu,{version:i,isMultiSelect:l,onSelect:Te,searchedString:s}),u.jsx(Ne.MenuList,{onInfiniteScroll:ce,onDropdownItemClick:E,version:i,onSelect:B,showDescription:De,isMultiSelect:l,options:Z,useDefaultCursor:he,ref:G,focusedIndex:k,isDraggable:x,onOptionsReorder:xe,showCheckboxForCustomElement:we})]}),!!l&&!Q&&i!=="2.0"&&u.jsx(ze.default,{onClear:()=>{Le(),ue?.()},onApply:Re,list:s&&d?O:f,buttonText:re,buttonOptions:le,hideClearButton:ge})]}),!!p&&u.jsx(Ve.Description,{title:p.title,description:p.description,version:i})]})};exports.OpenedDropdown=Qe;
 //# sourceMappingURL=OpennedDropdown.js.map