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

@bikdotai/bik-component-library 0.0.839 → 0.0.840-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 (185) hide show

package/dist/cjs/components/agent-listing/AgentListing.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),n=require("react"),K=require("../TablePagination/TablePagination.js"),Q=require("../zeroState/ZeroState.js"),C=require("./AgentListing.styled.js"),U=require("./AgentListingFilters.js"),W=require("./AgentListingHeader.js"),X=require("./AgentTable.js"),Y=require("./DeleteAgentModal.js"),ee=require("../dropdown/utils.js"),w=({config:x,onSearchChange:p,onSearchSubmit:r,onFilterChange:g,onSortChange:c,onNewAgent:m,onBrowseTemplates:u,onRunAgent:S,onEditAgent:y,onDeleteAgent:l,onRowClick:d,...q})=>{const[i,h]=n.useState(null),[k,N]=n.useState(!1),{agents:P,isLoading:b,searchValue:L,searchPlaceholder:T="Search",filterOptions:R,filterPlaceholder:D="Filters",sortOptions:v,selectedSort:z,title:F="AI Agents",headerActions:O,pagination:s,emptyState:A,debugLog:f}=x,B=!b&&P.length===0,t=n.useCallback((e,...o)=>{f&&console.log(`[AgentListing] ${e}`,...o)},[f]),E=n.useCallback(e=>{t("onSearchChange",e),p(e)},[t,p]),I=n.useCallback(e=>{t("onSearchSubmit",e),r?.(e)},[t,r]),H=n.useCallback(e=>{t("onFilterChange",e),g?.(e)},[t,g]),M=n.useCallback(e=>{t("onSortChange",e),c?.(e)},[t,c]),j=n.useCallback(()=>{t("onNewAgent"),m()},[t,m]),V=n.useCallback(()=>{t("onBrowseTemplates"),u?.()},[t,u]),Z=n.useCallback(e=>{t("onRunAgent",e.id),S(e)},[t,S]),_=n.useCallback(e=>{t("onEditAgent",e.id),y(e)},[t,y]),$=n.useCallback(e=>{t("onRowClick",e.id),d?.(e)},[t,d]),G=n.useCallback(e=>{t("onDeleteAgent",e.id),h(e)},[t]),J=n.useCallback(async()=>{if(!(!i||!l)){N(!0);try{await l(i),h(null)}finally{N(!1)}}},[i,l]);return a.jsxs(C.Page,{"data-test":q["data-test"]??"agent-listing",children:[a.jsx(W.AgentListingHeader,{title:F,onNewAgent:j,onBrowseTemplates:u?V:void 0,headerActions:O}),a.jsx(U.AgentListingFilters,{searchValue:L,onSearchChange:E,onSearchSubmit:r?I:void 0,searchPlaceholder:T,filterOptions:R,onFilterChange:g?H:void 0,filterPlaceholder:D,sortOptions:v,selectedSort:z,onSortChange:c?M:void 0}),a.jsx(C.Body,{children:b||B?a.jsx(C.EmptyHolder,{children:a.jsx(Q.ZeroState,{isLoading:b,title:A?.title??"No agents yet",subTitle:A?.subTitle??"Create your first AI agent to start automating conversations.",actionButton:A?.actionButton??{buttonText:"New AI agent",buttonType:"primary",size:"small",onClick:j}})}):a.jsxs(a.Fragment,{children:[a.jsx(X.AgentTable,{agents:P,onRunAgent:Z,onEditAgent:_,onDeleteAgent:l?G:void 0,onRowClick:d?$:void 0}),s&&s.totalRows>0&&a.jsx(K.TablePagination,{pageNumber:s.pageNumber,pageSize:s.pageSize,totalRows:s.totalRows,hidePageSizeOptions:s.hidePageSizeOptions,updatePageNumber:s.onPageChange,updatePageSize:e=>{const o=Number(ee.unwrapDropdownValue(e));Number.isNaN(o)||s.onPageSizeChange(o)}})]})}),i&&a.jsx(Y.DeleteAgentModal,{agentName:i.name,isDeleting:k,onClose:()=>k?void 0:h(null),onConfirm:J})]})};w.displayName="AgentListing";exports.AgentListing=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),n=require("react"),K=require("../TablePagination/TablePagination.js"),Q=require("../zeroState/ZeroState.js"),m=require("./AgentListing.styled.js"),U=require("./AgentListingFilters.js"),W=require("./AgentListingHeader.js"),X=require("./AgentTable.js"),Y=require("./AgentTableShimmer.js"),ee=require("./DeleteAgentModal.js"),te=require("../dropdown/utils.js"),P=({config:f,onSearchChange:A,onSearchSubmit:r,onFilterChange:g,onSortChange:c,onNewAgent:C,onBrowseTemplates:u,onRunAgent:p,onEditAgent:S,onDeleteAgent:l,onRowClick:d,...q})=>{const[i,h]=n.useState(null),[y,k]=n.useState(!1),{agents:j,isLoading:w,searchValue:T,searchPlaceholder:L="Search",filterOptions:R,filterPlaceholder:z="Filters",sortOptions:D,selectedSort:v,title:F="AI Agents",headerActions:O,pagination:s,emptyState:b,debugLog:x}=f,B=!w&&j.length===0,t=n.useCallback((e,...o)=>{x&&console.log(`[AgentListing] ${e}`,...o)},[x]),E=n.useCallback(e=>{t("onSearchChange",e),A(e)},[t,A]),I=n.useCallback(e=>{t("onSearchSubmit",e),r?.(e)},[t,r]),M=n.useCallback(e=>{t("onFilterChange",e),g?.(e)},[t,g]),H=n.useCallback(e=>{t("onSortChange",e),c?.(e)},[t,c]),N=n.useCallback(()=>{t("onNewAgent"),C()},[t,C]),V=n.useCallback(()=>{t("onBrowseTemplates"),u?.()},[t,u]),Z=n.useCallback(e=>{t("onRunAgent",e.id),p(e)},[t,p]),_=n.useCallback(e=>{t("onEditAgent",e.id),S(e)},[t,S]),$=n.useCallback(e=>{t("onRowClick",e.id),d?.(e)},[t,d]),G=n.useCallback(e=>{t("onDeleteAgent",e.id),h(e)},[t]),J=n.useCallback(async()=>{if(!(!i||!l)){k(!0);try{await l(i),h(null)}finally{k(!1)}}},[i,l]);return a.jsxs(m.Page,{"data-test":q["data-test"]??"agent-listing",children:[a.jsx(W.AgentListingHeader,{title:F,onNewAgent:N,onBrowseTemplates:u?V:void 0,headerActions:O}),a.jsx(U.AgentListingFilters,{searchValue:T,onSearchChange:E,onSearchSubmit:r?I:void 0,searchPlaceholder:L,filterOptions:R,onFilterChange:g?M:void 0,filterPlaceholder:z,sortOptions:D,selectedSort:v,onSortChange:c?H:void 0}),a.jsx(m.Body,{children:w?a.jsx(Y.AgentTableShimmer,{rows:Math.min(s?.pageSize??5,10)}):B?a.jsx(m.EmptyHolder,{children:a.jsx(Q.ZeroState,{title:b?.title??"No agents yet",subTitle:b?.subTitle??"Create your first AI agent to start automating conversations.",actionButton:b?.actionButton??{buttonText:"New AI agent",buttonType:"primary",size:"small",onClick:N}})}):a.jsxs(a.Fragment,{children:[a.jsx(X.AgentTable,{agents:j,onRunAgent:Z,onEditAgent:_,onDeleteAgent:l?G:void 0,onRowClick:d?$:void 0}),s&&s.totalRows>0&&a.jsx(K.TablePagination,{pageNumber:s.pageNumber,pageSize:s.pageSize,totalRows:s.totalRows,hidePageSizeOptions:s.hidePageSizeOptions,updatePageNumber:s.onPageChange,updatePageSize:e=>{const o=Number(te.unwrapDropdownValue(e));Number.isNaN(o)||s.onPageSizeChange(o)}})]})}),i&&a.jsx(ee.DeleteAgentModal,{agentName:i.name,isDeleting:y,onClose:()=>y?void 0:h(null),onConfirm:J})]})};P.displayName="AgentListing";exports.AgentListing=P;
 //# sourceMappingURL=AgentListing.js.map

package/dist/cjs/components/agent-listing/AgentListing.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AgentListing.js","sources":["../../../../src/components/agent-listing/AgentListing.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { unwrapDropdownValue } from '@src/components/dropdown';\nimport { DropdownOption } from '@src/components/dropdown/type';\nimport { TablePagination } from '@src/components/TablePagination/TablePagination';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { AgentListingProps, AgentListItem } from './AgentListing.model';\nimport { Body, EmptyHolder, Page } from './AgentListing.styled';\nimport { AgentListingFilters } from './AgentListingFilters';\nimport { AgentListingHeader } from './AgentListingHeader';\nimport { AgentTable } from './AgentTable';\nimport { DeleteAgentModal } from './DeleteAgentModal';\n\n/*\n Full body of the \"AI Agents\" listing screen (header + filters + table).\n * Presentational and fully controlled — the consumer owns data, search, sort,\n * pagination and routing. Render it inside your app shell (next to the sidebar).\n \n @example\n * <AgentListing\n * agents={rows}\n * searchValue={search}\n * onSearchChange={setSearch}\n * onNewAgent={() => router.push('/agents/new')}\n * onRunAgent={runAgent}\n * onEditAgent={(a) => router.push(`/agents/${a.id}`)}\n * />\n */\nexport const AgentListing: React.FC<AgentListingProps> = ({\n\tconfig,\n\tonSearchChange,\n\tonSearchSubmit,\n\tonFilterChange,\n\tonSortChange,\n\tonNewAgent,\n\tonBrowseTemplates,\n\tonRunAgent,\n\tonEditAgent,\n\tonDeleteAgent,\n\tonRowClick,\n\t...rest\n}) => {\n\t// Agent pending delete-confirmation (null = dialog closed).\n\tconst [pendingDelete, setPendingDelete] = useState<AgentListItem \| null>(\n\t\tnull,\n\t);\n\tconst [isDeleting, setIsDeleting] = useState(false);\n\tconst {\n\t\tagents,\n\t\tisLoading,\n\t\tsearchValue,\n\t\tsearchPlaceholder = 'Search',\n\t\tfilterOptions,\n\t\tfilterPlaceholder = 'Filters',\n\t\tsortOptions,\n\t\tselectedSort,\n\t\ttitle = 'AI Agents',\n\t\theaderActions,\n\t\tpagination,\n\t\temptyState,\n\t\tdebugLog,\n\t} = config;\n\n\tconst showEmpty = !isLoading && agents.length === 0;\n\n\t// Gated debug logging: each handler logs at its start only when `debugLog`.\n\tconst logAction = useCallback(\n\t\t(action: string, ...args: unknown[]) => {\n\t\t\tif (debugLog) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.log(`[AgentListing] ${action}`, ...args);\n\t\t\t}\n\t\t},\n\t\t[debugLog],\n\t);\n\n\tconst handleSearchChange = useCallback(\n\t\t(v: string) => {\n\t\t\tlogAction('onSearchChange', v);\n\t\t\tonSearchChange(v);\n\t\t},\n\t\t[logAction, onSearchChange],\n\t);\n\tconst handleSearchSubmit = useCallback(\n\t\t(v: string) => {\n\t\t\tlogAction('onSearchSubmit', v);\n\t\t\tonSearchSubmit?.(v);\n\t\t},\n\t\t[logAction, onSearchSubmit],\n\t);\n\tconst handleFilterChange = useCallback(\n\t\t(selected: DropdownOption \| DropdownOption[]) => {\n\t\t\tlogAction('onFilterChange', selected);\n\t\t\tonFilterChange?.(selected);\n\t\t},\n\t\t[logAction, onFilterChange],\n\t);\n\tconst handleSortChange = useCallback(\n\t\t(v: string) => {\n\t\t\tlogAction('onSortChange', v);\n\t\t\tonSortChange?.(v);\n\t\t},\n\t\t[logAction, onSortChange],\n\t);\n\tconst handleNewAgent = useCallback(() => {\n\t\tlogAction('onNewAgent');\n\t\tonNewAgent();\n\t}, [logAction, onNewAgent]);\n\tconst handleBrowseTemplates = useCallback(() => {\n\t\tlogAction('onBrowseTemplates');\n\t\tonBrowseTemplates?.();\n\t}, [logAction, onBrowseTemplates]);\n\tconst handleRunAgent = useCallback(\n\t\t(agent: AgentListItem) => {\n\t\t\tlogAction('onRunAgent', agent.id);\n\t\t\tonRunAgent(agent);\n\t\t},\n\t\t[logAction, onRunAgent],\n\t);\n\tconst handleEditAgent = useCallback(\n\t\t(agent: AgentListItem) => {\n\t\t\tlogAction('onEditAgent', agent.id);\n\t\t\tonEditAgent(agent);\n\t\t},\n\t\t[logAction, onEditAgent],\n\t);\n\tconst handleRowClick = useCallback(\n\t\t(agent: AgentListItem) => {\n\t\t\tlogAction('onRowClick', agent.id);\n\t\t\tonRowClick?.(agent);\n\t\t},\n\t\t[logAction, onRowClick],\n\t);\n\t// Row delete just opens the confirm dialog; the actual delete runs on confirm.\n\tconst handleDeleteRequest = useCallback(\n\t\t(agent: AgentListItem) => {\n\t\t\tlogAction('onDeleteAgent', agent.id);\n\t\t\tsetPendingDelete(agent);\n\t\t},\n\t\t[logAction],\n\t);\n\tconst handleConfirmDelete = useCallback(async () => {\n\t\tif (!pendingDelete \|\| !onDeleteAgent) {\n\t\t\treturn;\n\t\t}\n\t\tsetIsDeleting(true);\n\t\ttry {\n\t\t\tawait onDeleteAgent(pendingDelete);\n\t\t\tsetPendingDelete(null);\n\t\t} finally {\n\t\t\tsetIsDeleting(false);\n\t\t}\n\t}, [pendingDelete, onDeleteAgent]);\n\n\treturn (\n\t\t<Page data-test={rest['data-test'] ?? 'agent-listing'}>\n\t\t\t<AgentListingHeader\n\t\t\t\ttitle={title}\n\t\t\t\tonNewAgent={handleNewAgent}\n\t\t\t\tonBrowseTemplates={\n\t\t\t\t\tonBrowseTemplates ? handleBrowseTemplates : undefined\n\t\t\t\t}\n\t\t\t\theaderActions={headerActions}\n\t\t\t/>\n\n\t\t\t<AgentListingFilters\n\t\t\t\tsearchValue={searchValue}\n\t\t\t\tonSearchChange={handleSearchChange}\n\t\t\t\tonSearchSubmit={onSearchSubmit ? handleSearchSubmit : undefined}\n\t\t\t\tsearchPlaceholder={searchPlaceholder}\n\t\t\t\tfilterOptions={filterOptions}\n\t\t\t\tonFilterChange={onFilterChange ? handleFilterChange : undefined}\n\t\t\t\tfilterPlaceholder={filterPlaceholder}\n\t\t\t\tsortOptions={sortOptions}\n\t\t\t\tselectedSort={selectedSort}\n\t\t\t\tonSortChange={onSortChange ? handleSortChange : undefined}\n\t\t\t/>\n\n\t\t\t<Body>\n\t\t\t\t{isLoading \|\| showEmpty ? (\n\t\t\t\t\t<EmptyHolder>\n\t\t\t\t\t\t<ZeroState\n\t\t\t\t\t\t\tisLoading={isLoading}\n\t\t\t\t\t\t\ttitle={emptyState?.title ?? 'No agents yet'}\n\t\t\t\t\t\t\tsubTitle={\n\t\t\t\t\t\t\t\temptyState?.subTitle ??\n\t\t\t\t\t\t\t\t'Create your first AI agent to start automating conversations.'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tactionButton={\n\t\t\t\t\t\t\t\temptyState?.actionButton ?? {\n\t\t\t\t\t\t\t\t\tbuttonText: 'New AI agent',\n\t\t\t\t\t\t\t\t\tbuttonType: 'primary',\n\t\t\t\t\t\t\t\t\tsize: 'small',\n\t\t\t\t\t\t\t\t\tonClick: handleNewAgent,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</EmptyHolder>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<AgentTable\n\t\t\t\t\t\t\tagents={agents}\n\t\t\t\t\t\t\tonRunAgent={handleRunAgent}\n\t\t\t\t\t\t\tonEditAgent={handleEditAgent}\n\t\t\t\t\t\t\tonDeleteAgent={onDeleteAgent ? handleDeleteRequest : undefined}\n\t\t\t\t\t\t\tonRowClick={onRowClick ? handleRowClick : undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{pagination && pagination.totalRows > 0 && (\n\t\t\t\t\t\t\t<TablePagination\n\t\t\t\t\t\t\t\tpageNumber={pagination.pageNumber}\n\t\t\t\t\t\t\t\tpageSize={pagination.pageSize}\n\t\t\t\t\t\t\t\ttotalRows={pagination.totalRows}\n\t\t\t\t\t\t\t\thidePageSizeOptions={pagination.hidePageSizeOptions}\n\t\t\t\t\t\t\t\tupdatePageNumber={pagination.onPageChange}\n\t\t\t\t\t\t\t\tupdatePageSize={(opt) => {\n\t\t\t\t\t\t\t\t\tconst value = Number(unwrapDropdownValue(opt));\n\t\t\t\t\t\t\t\t\tif (!Number.isNaN(value)) {\n\t\t\t\t\t\t\t\t\t\tpagination.onPageSizeChange(value);\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/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</Body>\n\n\t\t\t{pendingDelete && (\n\t\t\t\t<DeleteAgentModal\n\t\t\t\t\tagentName={pendingDelete.name}\n\t\t\t\t\tisDeleting={isDeleting}\n\t\t\t\t\tonClose={() => (isDeleting ? undefined : setPendingDelete(null))}\n\t\t\t\t\tonConfirm={handleConfirmDelete}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</Page>\n\t);\n};\n\nAgentListing.displayName = 'AgentListing';\n"],"names":["AgentListing","config","onSearchChange","onSearchSubmit","onFilterChange","onSortChange","onNewAgent","onBrowseTemplates","onRunAgent","onEditAgent","onDeleteAgent","onRowClick","rest","pendingDelete","setPendingDelete","useState","isDeleting","setIsDeleting","agents","isLoading","searchValue","searchPlaceholder","filterOptions","filterPlaceholder","sortOptions","selectedSort","title","headerActions","pagination","emptyState","debugLog","showEmpty","logAction","useCallback","action","args","handleSearchChange","v","handleSearchSubmit","handleFilterChange","selected","handleSortChange","handleNewAgent","handleBrowseTemplates","handleRunAgent","agent","handleEditAgent","handleRowClick","handleDeleteRequest","handleConfirmDelete","Page","jsx","AgentListingHeader","AgentListingFilters","Body","EmptyHolder","ZeroState","jsxs","Fragment","AgentTable","TablePagination","opt","value","unwrapDropdownValue","DeleteAgentModal"],"mappings":"sbA2BaA,EAA4C,CAAC,CACzD,OAAAC,EACA,eAAAC,EACA,eAAAC,EACA,eAAAC,EACA,aAAAC,EACA,WAAAC,EACA,kBAAAC,EACA,WAAAC,EACA,YAAAC,EACA,cAAAC,EACA,WAAAC,EACA,GAAGC,CACJ,IAAM,CAEL,KAAM,CAACC,EAAeC,CAAgB,EAAIC,EAAAA,SACzC,IAAA,EAEK,CAACC,EAAYC,CAAa,EAAIF,EAAAA,SAAS,EAAK,EAC5C,CACL,OAAAG,EACA,UAAAC,EACA,YAAAC,EACA,kBAAAC,EAAoB,SACpB,cAAAC,EACA,kBAAAC,EAAoB,UACpB,YAAAC,EACA,aAAAC,EACA,MAAAC,EAAQ,YACR,cAAAC,EACA,WAAAC,EACA,WAAAC,EACA,SAAAC,CAAA,EACG7B,EAEE8B,EAAY,CAACZ,GAAaD,EAAO,SAAW,EAG5Cc,EAAYC,EAAAA,YACjB,CAACC,KAAmBC,IAAoB,CACnCL,GAEH,QAAQ,IAAI,kBAAkBI,CAAM,GAAI,GAAGC,CAAI,CAEjD,EACA,CAACL,CAAQ,CAAA,EAGJM,EAAqBH,EAAAA,YACzBI,GAAc,CACdL,EAAU,iBAAkBK,CAAC,EAC7BnC,EAAemC,CAAC,CACjB,EACA,CAACL,EAAW9B,CAAc,CAAA,EAErBoC,EAAqBL,EAAAA,YACzBI,GAAc,CACdL,EAAU,iBAAkBK,CAAC,EAC7BlC,IAAiBkC,CAAC,CACnB,EACA,CAACL,EAAW7B,CAAc,CAAA,EAErBoC,EAAqBN,EAAAA,YACzBO,GAAgD,CAChDR,EAAU,iBAAkBQ,CAAQ,EACpCpC,IAAiBoC,CAAQ,CAC1B,EACA,CAACR,EAAW5B,CAAc,CAAA,EAErBqC,EAAmBR,EAAAA,YACvBI,GAAc,CACdL,EAAU,eAAgBK,CAAC,EAC3BhC,IAAegC,CAAC,CACjB,EACA,CAACL,EAAW3B,CAAY,CAAA,EAEnBqC,EAAiBT,EAAAA,YAAY,IAAM,CACxCD,EAAU,YAAY,EACtB1B,EAAA,CACD,EAAG,CAAC0B,EAAW1B,CAAU,CAAC,EACpBqC,EAAwBV,EAAAA,YAAY,IAAM,CAC/CD,EAAU,mBAAmB,EAC7BzB,IAAA,CACD,EAAG,CAACyB,EAAWzB,CAAiB,CAAC,EAC3BqC,EAAiBX,EAAAA,YACrBY,GAAyB,CACzBb,EAAU,aAAca,EAAM,EAAE,EAChCrC,EAAWqC,CAAK,CACjB,EACA,CAACb,EAAWxB,CAAU,CAAA,EAEjBsC,EAAkBb,EAAAA,YACtBY,GAAyB,CACzBb,EAAU,cAAea,EAAM,EAAE,EACjCpC,EAAYoC,CAAK,CAClB,EACA,CAACb,EAAWvB,CAAW,CAAA,EAElBsC,EAAiBd,EAAAA,YACrBY,GAAyB,CACzBb,EAAU,aAAca,EAAM,EAAE,EAChClC,IAAakC,CAAK,CACnB,EACA,CAACb,EAAWrB,CAAU,CAAA,EAGjBqC,EAAsBf,EAAAA,YAC1BY,GAAyB,CACzBb,EAAU,gBAAiBa,EAAM,EAAE,EACnC/B,EAAiB+B,CAAK,CACvB,EACA,CAACb,CAAS,CAAA,EAELiB,EAAsBhB,EAAAA,YAAY,SAAY,CACnD,GAAI,GAACpB,GAAiB,CAACH,GAGvB,CAAAO,EAAc,EAAI,EAClB,GAAI,CACH,MAAMP,EAAcG,CAAa,EACjCC,EAAiB,IAAI,CACtB,QAAA,CACCG,EAAc,EAAK,CACpB,EACD,EAAG,CAACJ,EAAeH,CAAa,CAAC,EAEjC,cACEwC,EAAAA,KAAA,CAAK,YAAWtC,EAAK,WAAW,GAAK,gBACrC,SAAA,CAAAuC,EAAAA,IAACC,EAAAA,mBAAA,CACA,MAAA1B,EACA,WAAYgB,EACZ,kBACCnC,EAAoBoC,EAAwB,OAE7C,cAAAhB,CAAA,CAAA,EAGDwB,EAAAA,IAACE,EAAAA,oBAAA,CACA,YAAAjC,EACA,eAAgBgB,EAChB,eAAgBjC,EAAiBmC,EAAqB,OACtD,kBAAAjB,EACA,cAAAC,EACA,eAAgBlB,EAAiBmC,EAAqB,OACtD,kBAAAhB,EACA,YAAAC,EACA,aAAAC,EACA,aAAcpB,EAAeoC,EAAmB,MAAA,CAAA,EAGjDU,MAACG,EAAAA,KAAA,CACC,SAAAnC,GAAaY,QACZwB,EAAAA,YAAA,CACA,SAAAJ,EAAAA,IAACK,EAAAA,UAAA,CACA,UAAArC,EACA,MAAOU,GAAY,OAAS,gBAC5B,SACCA,GAAY,UACZ,gEAED,aACCA,GAAY,cAAgB,CAC3B,WAAY,eACZ,WAAY,UACZ,KAAM,QACN,QAASa,CAAA,CACV,CAAA,CAEF,CACD,EAEAe,EAAAA,KAAAC,EAAAA,SAAA,CACC,SAAA,CAAAP,EAAAA,IAACQ,EAAAA,WAAA,CACA,OAAAzC,EACA,WAAY0B,EACZ,YAAaE,EACb,cAAepC,EAAgBsC,EAAsB,OACrD,WAAYrC,EAAaoC,EAAiB,MAAA,CAAA,EAE1CnB,GAAcA,EAAW,UAAY,GACrCuB,EAAAA,IAACS,EAAAA,gBAAA,CACA,WAAYhC,EAAW,WACvB,SAAUA,EAAW,SACrB,UAAWA,EAAW,UACtB,oBAAqBA,EAAW,oBAChC,iBAAkBA,EAAW,aAC7B,eAAiBiC,GAAQ,CACxB,MAAMC,EAAQ,OAAOC,GAAAA,oBAAoBF,CAAG,CAAC,EACxC,OAAO,MAAMC,CAAK,GACtBlC,EAAW,iBAAiBkC,CAAK,CAEnC,CAAA,CAAA,CACD,CAAA,CAEF,CAAA,CAEF,EAECjD,GACAsC,EAAAA,IAACa,EAAAA,iBAAA,CACA,UAAWnD,EAAc,KACzB,WAAAG,EACA,QAAS,IAAOA,EAAa,OAAYF,EAAiB,IAAI,EAC9D,UAAWmC,CAAA,CAAA,CACZ,EAEF,CAEF,EAEAjD,EAAa,YAAc"}
1	+ {"version":3,"file":"AgentListing.js","sources":["../../../../src/components/agent-listing/AgentListing.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport { unwrapDropdownValue } from '@src/components/dropdown';\nimport { DropdownOption } from '@src/components/dropdown/type';\nimport { TablePagination } from '@src/components/TablePagination/TablePagination';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { AgentListingProps, AgentListItem } from './AgentListing.model';\nimport { Body, EmptyHolder, Page } from './AgentListing.styled';\nimport { AgentListingFilters } from './AgentListingFilters';\nimport { AgentListingHeader } from './AgentListingHeader';\nimport { AgentTable } from './AgentTable';\nimport { AgentTableShimmer } from './AgentTableShimmer';\nimport { DeleteAgentModal } from './DeleteAgentModal';\n\n/*\n Full body of the \"AI Agents\" listing screen (header + filters + table).\n * Presentational and fully controlled — the consumer owns data, search, sort,\n * pagination and routing. Render it inside your app shell (next to the sidebar).\n \n @example\n * <AgentListing\n * agents={rows}\n * searchValue={search}\n * onSearchChange={setSearch}\n * onNewAgent={() => router.push('/agents/new')}\n * onRunAgent={runAgent}\n * onEditAgent={(a) => router.push(`/agents/${a.id}`)}\n * />\n */\nexport const AgentListing: React.FC<AgentListingProps> = ({\n\tconfig,\n\tonSearchChange,\n\tonSearchSubmit,\n\tonFilterChange,\n\tonSortChange,\n\tonNewAgent,\n\tonBrowseTemplates,\n\tonRunAgent,\n\tonEditAgent,\n\tonDeleteAgent,\n\tonRowClick,\n\t...rest\n}) => {\n\t// Agent pending delete-confirmation (null = dialog closed).\n\tconst [pendingDelete, setPendingDelete] = useState<AgentListItem \| null>(\n\t\tnull,\n\t);\n\tconst [isDeleting, setIsDeleting] = useState(false);\n\tconst {\n\t\tagents,\n\t\tisLoading,\n\t\tsearchValue,\n\t\tsearchPlaceholder = 'Search',\n\t\tfilterOptions,\n\t\tfilterPlaceholder = 'Filters',\n\t\tsortOptions,\n\t\tselectedSort,\n\t\ttitle = 'AI Agents',\n\t\theaderActions,\n\t\tpagination,\n\t\temptyState,\n\t\tdebugLog,\n\t} = config;\n\n\tconst showEmpty = !isLoading && agents.length === 0;\n\n\t// Gated debug logging: each handler logs at its start only when `debugLog`.\n\tconst logAction = useCallback(\n\t\t(action: string, ...args: unknown[]) => {\n\t\t\tif (debugLog) {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.log(`[AgentListing] ${action}`, ...args);\n\t\t\t}\n\t\t},\n\t\t[debugLog],\n\t);\n\n\tconst handleSearchChange = useCallback(\n\t\t(v: string) => {\n\t\t\tlogAction('onSearchChange', v);\n\t\t\tonSearchChange(v);\n\t\t},\n\t\t[logAction, onSearchChange],\n\t);\n\tconst handleSearchSubmit = useCallback(\n\t\t(v: string) => {\n\t\t\tlogAction('onSearchSubmit', v);\n\t\t\tonSearchSubmit?.(v);\n\t\t},\n\t\t[logAction, onSearchSubmit],\n\t);\n\tconst handleFilterChange = useCallback(\n\t\t(selected: DropdownOption \| DropdownOption[]) => {\n\t\t\tlogAction('onFilterChange', selected);\n\t\t\tonFilterChange?.(selected);\n\t\t},\n\t\t[logAction, onFilterChange],\n\t);\n\tconst handleSortChange = useCallback(\n\t\t(v: string) => {\n\t\t\tlogAction('onSortChange', v);\n\t\t\tonSortChange?.(v);\n\t\t},\n\t\t[logAction, onSortChange],\n\t);\n\tconst handleNewAgent = useCallback(() => {\n\t\tlogAction('onNewAgent');\n\t\tonNewAgent();\n\t}, [logAction, onNewAgent]);\n\tconst handleBrowseTemplates = useCallback(() => {\n\t\tlogAction('onBrowseTemplates');\n\t\tonBrowseTemplates?.();\n\t}, [logAction, onBrowseTemplates]);\n\tconst handleRunAgent = useCallback(\n\t\t(agent: AgentListItem) => {\n\t\t\tlogAction('onRunAgent', agent.id);\n\t\t\tonRunAgent(agent);\n\t\t},\n\t\t[logAction, onRunAgent],\n\t);\n\tconst handleEditAgent = useCallback(\n\t\t(agent: AgentListItem) => {\n\t\t\tlogAction('onEditAgent', agent.id);\n\t\t\tonEditAgent(agent);\n\t\t},\n\t\t[logAction, onEditAgent],\n\t);\n\tconst handleRowClick = useCallback(\n\t\t(agent: AgentListItem) => {\n\t\t\tlogAction('onRowClick', agent.id);\n\t\t\tonRowClick?.(agent);\n\t\t},\n\t\t[logAction, onRowClick],\n\t);\n\t// Row delete just opens the confirm dialog; the actual delete runs on confirm.\n\tconst handleDeleteRequest = useCallback(\n\t\t(agent: AgentListItem) => {\n\t\t\tlogAction('onDeleteAgent', agent.id);\n\t\t\tsetPendingDelete(agent);\n\t\t},\n\t\t[logAction],\n\t);\n\tconst handleConfirmDelete = useCallback(async () => {\n\t\tif (!pendingDelete \|\| !onDeleteAgent) {\n\t\t\treturn;\n\t\t}\n\t\tsetIsDeleting(true);\n\t\ttry {\n\t\t\tawait onDeleteAgent(pendingDelete);\n\t\t\tsetPendingDelete(null);\n\t\t} finally {\n\t\t\tsetIsDeleting(false);\n\t\t}\n\t}, [pendingDelete, onDeleteAgent]);\n\n\treturn (\n\t\t<Page data-test={rest['data-test'] ?? 'agent-listing'}>\n\t\t\t<AgentListingHeader\n\t\t\t\ttitle={title}\n\t\t\t\tonNewAgent={handleNewAgent}\n\t\t\t\tonBrowseTemplates={\n\t\t\t\t\tonBrowseTemplates ? handleBrowseTemplates : undefined\n\t\t\t\t}\n\t\t\t\theaderActions={headerActions}\n\t\t\t/>\n\n\t\t\t<AgentListingFilters\n\t\t\t\tsearchValue={searchValue}\n\t\t\t\tonSearchChange={handleSearchChange}\n\t\t\t\tonSearchSubmit={onSearchSubmit ? handleSearchSubmit : undefined}\n\t\t\t\tsearchPlaceholder={searchPlaceholder}\n\t\t\t\tfilterOptions={filterOptions}\n\t\t\t\tonFilterChange={onFilterChange ? handleFilterChange : undefined}\n\t\t\t\tfilterPlaceholder={filterPlaceholder}\n\t\t\t\tsortOptions={sortOptions}\n\t\t\t\tselectedSort={selectedSort}\n\t\t\t\tonSortChange={onSortChange ? handleSortChange : undefined}\n\t\t\t/>\n\n\t\t\t<Body>\n\t\t\t\t{isLoading ? (\n\t\t\t\t\t// Table-shaped shimmer: refetches (page/page-size/sort/search) load in\n\t\t\t\t\t// place instead of collapsing to a spinner. Keep the page\n\t\t\t\t\t// height by matching the current page size.\n\t\t\t\t\t<AgentTableShimmer rows={Math.min(pagination?.pageSize ?? 5, 10)} />\n\t\t\t\t) : showEmpty ? (\n\t\t\t\t\t<EmptyHolder>\n\t\t\t\t\t\t<ZeroState\n\t\t\t\t\t\t\ttitle={emptyState?.title ?? 'No agents yet'}\n\t\t\t\t\t\t\tsubTitle={\n\t\t\t\t\t\t\t\temptyState?.subTitle ??\n\t\t\t\t\t\t\t\t'Create your first AI agent to start automating conversations.'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tactionButton={\n\t\t\t\t\t\t\t\temptyState?.actionButton ?? {\n\t\t\t\t\t\t\t\t\tbuttonText: 'New AI agent',\n\t\t\t\t\t\t\t\t\tbuttonType: 'primary',\n\t\t\t\t\t\t\t\t\tsize: 'small',\n\t\t\t\t\t\t\t\t\tonClick: handleNewAgent,\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</EmptyHolder>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<AgentTable\n\t\t\t\t\t\t\tagents={agents}\n\t\t\t\t\t\t\tonRunAgent={handleRunAgent}\n\t\t\t\t\t\t\tonEditAgent={handleEditAgent}\n\t\t\t\t\t\t\tonDeleteAgent={onDeleteAgent ? handleDeleteRequest : undefined}\n\t\t\t\t\t\t\tonRowClick={onRowClick ? handleRowClick : undefined}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{pagination && pagination.totalRows > 0 && (\n\t\t\t\t\t\t\t<TablePagination\n\t\t\t\t\t\t\t\tpageNumber={pagination.pageNumber}\n\t\t\t\t\t\t\t\tpageSize={pagination.pageSize}\n\t\t\t\t\t\t\t\ttotalRows={pagination.totalRows}\n\t\t\t\t\t\t\t\thidePageSizeOptions={pagination.hidePageSizeOptions}\n\t\t\t\t\t\t\t\tupdatePageNumber={pagination.onPageChange}\n\t\t\t\t\t\t\t\tupdatePageSize={(opt) => {\n\t\t\t\t\t\t\t\t\tconst value = Number(unwrapDropdownValue(opt));\n\t\t\t\t\t\t\t\t\tif (!Number.isNaN(value)) {\n\t\t\t\t\t\t\t\t\t\tpagination.onPageSizeChange(value);\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/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</Body>\n\n\t\t\t{pendingDelete && (\n\t\t\t\t<DeleteAgentModal\n\t\t\t\t\tagentName={pendingDelete.name}\n\t\t\t\t\tisDeleting={isDeleting}\n\t\t\t\t\tonClose={() => (isDeleting ? undefined : setPendingDelete(null))}\n\t\t\t\t\tonConfirm={handleConfirmDelete}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</Page>\n\t);\n};\n\nAgentListing.displayName = 'AgentListing';\n"],"names":["AgentListing","config","onSearchChange","onSearchSubmit","onFilterChange","onSortChange","onNewAgent","onBrowseTemplates","onRunAgent","onEditAgent","onDeleteAgent","onRowClick","rest","pendingDelete","setPendingDelete","useState","isDeleting","setIsDeleting","agents","isLoading","searchValue","searchPlaceholder","filterOptions","filterPlaceholder","sortOptions","selectedSort","title","headerActions","pagination","emptyState","debugLog","showEmpty","logAction","useCallback","action","args","handleSearchChange","v","handleSearchSubmit","handleFilterChange","selected","handleSortChange","handleNewAgent","handleBrowseTemplates","handleRunAgent","agent","handleEditAgent","handleRowClick","handleDeleteRequest","handleConfirmDelete","Page","jsx","AgentListingHeader","AgentListingFilters","Body","AgentTableShimmer","EmptyHolder","ZeroState","jsxs","Fragment","AgentTable","TablePagination","opt","value","unwrapDropdownValue","DeleteAgentModal"],"mappings":"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"}

package/dist/cjs/components/agent-listing/AgentTable.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../TypographyStyle.js"),o=require("../../constants/Theme.js"),r=require("./AgentListing.styled.js"),j=require("./AgentTableRow.js"),l=({children:n})=>e.jsx(a.TitleSmall,{color:o.COLORS.content.primary,children:n}),g=({agents:n,onRunAgent:s,onEditAgent:t,onDeleteAgent:c,onRowClick:d})=>e.jsx(r.TableCard,{children:e.jsxs(r.TableScroll,{children:[e.jsxs(r.HeaderGridRow,{children:[e.jsx(r.HeaderCell,{children:e.jsx(l,{children:"Agent name"})}),e.jsx(r.HeaderCell,{children:e.jsx(l,{children:"Trigger"})}),e.jsx(r.HeaderCell,{align:"right",children:e.jsx(l,{children:"Trigger count"})}),e.jsx(r.HeaderCell,{children:e.jsx(l,{children:"Status"})}),e.jsx(r.HeaderCell,{align:"center",children:e.jsx(l,{children:"Actions"})})]}),n.map(i=>e.jsx(j.AgentTableRow,{agent:i,onRunAgent:s,onEditAgent:t,onDeleteAgent:c,onRowClick:d},i.id))]})});exports.AgentTable=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../TypographyStyle.js"),g=require("../../constants/Theme.js"),r=require("./AgentListing.styled.js"),j=require("./AgentTableRow.js"),l=({children:n})=>e.jsx(o.TitleSmall,{color:g.COLORS.content.primary,children:n}),t=()=>e.jsxs(r.HeaderGridRow,{children:[e.jsx(r.HeaderCell,{children:e.jsx(l,{children:"Agent name"})}),e.jsx(r.HeaderCell,{children:e.jsx(l,{children:"Trigger"})}),e.jsx(r.HeaderCell,{align:"right",children:e.jsx(l,{children:"Trigger count"})}),e.jsx(r.HeaderCell,{children:e.jsx(l,{children:"Status"})}),e.jsx(r.HeaderCell,{align:"center",children:e.jsx(l,{children:"Actions"})})]}),x=({agents:n,onRunAgent:s,onEditAgent:c,onDeleteAgent:a,onRowClick:d})=>e.jsx(r.TableCard,{children:e.jsxs(r.TableScroll,{children:[e.jsx(t,{}),n.map(i=>e.jsx(j.AgentTableRow,{agent:i,onRunAgent:s,onEditAgent:c,onDeleteAgent:a,onRowClick:d},i.id))]})});exports.AgentTable=x;exports.AgentTableHeader=t;
 //# sourceMappingURL=AgentTable.js.map

package/dist/cjs/components/agent-listing/AgentTable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AgentTable.js","sources":["../../../../src/components/agent-listing/AgentTable.tsx"],"sourcesContent":["import React from 'react';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentListItem } from './AgentListing.model';\nimport {\n\tHeaderCell,\n\tHeaderGridRow,\n\tTableCard,\n\tTableScroll,\n} from './AgentListing.styled';\nimport { AgentTableRow } from './AgentTableRow';\n\ninterface AgentTableProps {\n\tagents: AgentListItem[];\n\tonRunAgent: (agent: AgentListItem) => void;\n\tonEditAgent: (agent: AgentListItem) => void;\n\tonDeleteAgent?: (agent: AgentListItem) => void;\n\tonRowClick?: (agent: AgentListItem) => void;\n}\n\nconst HeaderLabel: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n\t<TitleSmall color={COLORS.content.primary}>{children}</TitleSmall>\n);\n\nexport const ~~AgentTable~~: React.FC~~<AgentTableProps>~~ = (~~{\n\tagents,\n\tonRunAgent,\n\tonEditAgent,\n\tonDeleteAgent,\n\tonRowClick,\n}~~) => (\n\t<~~TableCard>\n\t\t<TableScroll>\n\t\t\t<~~HeaderGridRow>\n\t\t~~\t\t~~<HeaderCell>\n\t\t\t~~\t\t~~<HeaderLabel>Agent name</HeaderLabel>\n\t\t~~\t\t~~</HeaderCell>\n\t\t~~\t\t~~<HeaderCell>\n\t\t\t~~\t\t~~<HeaderLabel>Trigger</HeaderLabel>\n\t\t~~\t\t~~</HeaderCell>\n\t\t~~\t\t~~<HeaderCell align=\"right\">\n\t\t\t~~\t\t~~<HeaderLabel>Trigger count</HeaderLabel>\n\t\t~~\t\t~~</HeaderCell>\n\t\t~~\t\t~~<HeaderCell>\n\t\t\t~~\t\t~~<HeaderLabel>Status</HeaderLabel>\n\t\t~~\t\t~~</HeaderCell>\n\t\t~~\t\t~~<HeaderCell align=\"center\">\n\t\t\t~~\t\t~~<HeaderLabel>Actions</HeaderLabel>\n\t\t\t\t</~~HeaderCell~~>\n\t\t\t~~</HeaderGridRow~~>\n\n\t\t\t{agents.map((agent) => (\n\t\t\t\t<AgentTableRow\n\t\t\t\t\tkey={agent.id}\n\t\t\t\t\tagent={agent}\n\t\t\t\t\tonRunAgent={onRunAgent}\n\t\t\t\t\tonEditAgent={onEditAgent}\n\t\t\t\t\tonDeleteAgent={onDeleteAgent}\n\t\t\t\t\tonRowClick={onRowClick}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</TableScroll>\n\t</TableCard>\n);\n"],"names":["HeaderLabel","children","jsx","TitleSmall","COLORS","~~AgentTable~~","~~agents~~","~~onRunAgent~~","~~onEditAgent~~","~~onDeleteAgent~~","~~onRowClick~~","~~TableCard~~","~~jsxs~~","~~TableScroll~~","~~HeaderGridRow~~","~~HeaderCell~~","agent","AgentTableRow"],"mappings":"oQAoBMA,EAAuD,CAAC,CAAE,SAAAC,CAAA,IAC/DC,EAAAA,IAACC,EAAAA,WAAA,CAAW,MAAOC,SAAO,QAAQ,QAAU,SAAAH,CAAA,CAAS,~~EAGzCI~~,~~EAAwC~~,~~CAAC~~,~~CACrD,OAAAC,EACA,WAAAC,EACA,YAAAC,EACA,cAAAC,EACA,WAAAC,CACD,IACCR,~~EAAAA,~~IAACS,EAAAA,UAAA,CACA,SAAAC,EAAAA,~~KAACC,EAAAA,~~YAAA,CACA,SAAA,CAAAD,OAACE,EAAAA,~~cAAA,CACA,SAAA,~~CAAAZ~~,~~MAACa~~,EAAAA,WAAA,CACA,~~SAAAb~~,EAAAA,IAACF,EAAA,CAAY,SAAA,YAAA,CAAU,EACxB,EACAE,~~MAACa~~,EAAAA,WAAA,CACA,~~SAAAb~~,EAAAA,IAACF,EAAA,CAAY,mBAAO,EACrB,~~QACCe~~,EAAAA,WAAA,CAAW,MAAM,QACjB,~~SAAAb~~,MAACF,EAAA,CAAY,yBAAa,CAAA,CAC3B,EACAE,~~MAACa~~,EAAAA,WAAA,CACA,~~SAAAb~~,EAAAA,IAACF,EAAA,CAAY,kBAAM,EACpB,~~QACCe~~,EAAAA,WAAA,CAAW,MAAM,SACjB,~~SAAAb~~,EAAAA,IAACF,EAAA,CAAY,mBAAO,CAAA,CACrB,CAAA,~~EACD~~,~~EAECM~~,EAAO,~~IAAKU~~,~~GACZd~~,EAAAA,~~IAACe~~,EAAAA,cAAA,CAEA,MAAAD,EACA,~~WAAAT~~,EACA,YAAAC,EACA,cAAAC,EACA,WAAAC,CAAA,~~EALKM~~,EAAM,EAAA,CAOZ,CAAA,CAAA,CACF,CAAA,CACD"}
1	+ {"version":3,"file":"AgentTable.js","sources":["../../../../src/components/agent-listing/AgentTable.tsx"],"sourcesContent":["import React from 'react';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentListItem } from './AgentListing.model';\nimport {\n\tHeaderCell,\n\tHeaderGridRow,\n\tTableCard,\n\tTableScroll,\n} from './AgentListing.styled';\nimport { AgentTableRow } from './AgentTableRow';\n\ninterface AgentTableProps {\n\tagents: AgentListItem[];\n\tonRunAgent: (agent: AgentListItem) => void;\n\tonEditAgent: (agent: AgentListItem) => void;\n\tonDeleteAgent?: (agent: AgentListItem) => void;\n\tonRowClick?: (agent: AgentListItem) => void;\n}\n\nconst HeaderLabel: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n\t<TitleSmall color={COLORS.content.primary}>{children}</TitleSmall>\n);\n\n/** Column header row — shared with the loading shimmer so the two can't drift. */\nexport const AgentTableHeader: React.FC = () => (\n\t<HeaderGridRow>\n\t\t<HeaderCell>\n\t\t\t<HeaderLabel>Agent name</HeaderLabel>\n\t\t</HeaderCell>\n\t\t<HeaderCell>\n\t\t\t<HeaderLabel>Trigger</HeaderLabel>\n\t\t</HeaderCell>\n\t\t<HeaderCell align=\"right\">\n\t\t\t<HeaderLabel>Trigger count</HeaderLabel>\n\t\t</HeaderCell>\n\t\t<HeaderCell>\n\t\t\t<HeaderLabel>Status</HeaderLabel>\n\t\t</HeaderCell>\n\t\t<HeaderCell align=\"center\">\n\t\t\t<HeaderLabel>Actions</HeaderLabel>\n\t\t</HeaderCell>\n\t</HeaderGridRow>\n);\n\nexport const AgentTable: React.FC<AgentTableProps> = ({\n\tagents,\n\tonRunAgent,\n\tonEditAgent,\n\tonDeleteAgent,\n\tonRowClick,\n}) => (\n\t<TableCard>\n\t\t<TableScroll>\n\t\t\t<AgentTableHeader />\n\n\t\t\t{agents.map((agent) => (\n\t\t\t\t<AgentTableRow\n\t\t\t\t\tkey={agent.id}\n\t\t\t\t\tagent={agent}\n\t\t\t\t\tonRunAgent={onRunAgent}\n\t\t\t\t\tonEditAgent={onEditAgent}\n\t\t\t\t\tonDeleteAgent={onDeleteAgent}\n\t\t\t\t\tonRowClick={onRowClick}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</TableScroll>\n\t</TableCard>\n);\n"],"names":["HeaderLabel","children","jsx","TitleSmall","COLORS","AgentTableHeader","jsxs","HeaderGridRow","HeaderCell","AgentTable","agents","onRunAgent","onEditAgent","onDeleteAgent","onRowClick","TableCard","TableScroll","agent","AgentTableRow"],"mappings":"oQAoBMA,EAAuD,CAAC,CAAE,SAAAC,CAAA,IAC/DC,EAAAA,IAACC,EAAAA,WAAA,CAAW,MAAOC,SAAO,QAAQ,QAAU,SAAAH,CAAA,CAAS,EAIzCI,EAA6B,IACzCC,EAAAA,KAACC,EAAAA,cAAA,CACA,SAAA,CAAAL,MAACM,EAAAA,WAAA,CACA,SAAAN,EAAAA,IAACF,EAAA,CAAY,SAAA,YAAA,CAAU,EACxB,EACAE,MAACM,EAAAA,WAAA,CACA,SAAAN,EAAAA,IAACF,EAAA,CAAY,mBAAO,EACrB,QACCQ,EAAAA,WAAA,CAAW,MAAM,QACjB,SAAAN,MAACF,EAAA,CAAY,yBAAa,CAAA,CAC3B,EACAE,MAACM,EAAAA,WAAA,CACA,SAAAN,EAAAA,IAACF,EAAA,CAAY,kBAAM,EACpB,QACCQ,EAAAA,WAAA,CAAW,MAAM,SACjB,SAAAN,EAAAA,IAACF,EAAA,CAAY,mBAAO,CAAA,CACrB,CAAA,CAAA,CACD,EAGYS,EAAwC,CAAC,CACrD,OAAAC,EACA,WAAAC,EACA,YAAAC,EACA,cAAAC,EACA,WAAAC,CACD,IACCZ,EAAAA,IAACa,EAAAA,UAAA,CACA,SAAAT,EAAAA,KAACU,EAAAA,YAAA,CACA,SAAA,CAAAd,EAAAA,IAACG,EAAA,EAAiB,EAEjBK,EAAO,IAAKO,GACZf,EAAAA,IAACgB,EAAAA,cAAA,CAEA,MAAAD,EACA,WAAAN,EACA,YAAAC,EACA,cAAAC,EACA,WAAAC,CAAA,EALKG,EAAM,EAAA,CAOZ,CAAA,CAAA,CACF,CAAA,CACD"}

package/dist/cjs/components/agent-listing/AgentTableRow.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),y=require("../../assets/icons/delete.svg.js"),j=require("../../assets/icons/edit.svg.js"),m=require("../../assets/icons/playOutline.svg.js"),b=require("../../assets/icons/vertical_dots.svg.js"),O=require("../dropdown/DropdownPopover/index.js"),r=require("../TypographyStyle.js"),i=require("../../constants/Theme.js"),n=require("./AgentListing.styled.js"),C=require("../tag/Tag.js"),f=require("../tooltips/Tooltip.js"),L=require("../dropdown/utils.js"),R=e=>{switch(e.kind){case"topic":return`Topic: ${e.label??""}`;case"phrases":return`Phrases: ${(e.items??[]).join(", ")}`;default:return e.label??""}},S=({agent:e,onRunAgent:d,onEditAgent:u,onDeleteAgent:s,onRowClick:l})=>{const c=e.status==="live",p=o=>{o.stopPropagation(),!e.isRunDisabled&&d(e)},h=[{label:"Edit",value:"edit",leadingIcon:t.jsx(j.default,{width:16,height:16,color:i.COLORS.content.secondary})},...s?[{label:"Delete",value:"delete",customComponent:t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,color:i.COLORS.content.negative,fontFamily:"Inter",fontSize:14},children:[t.jsx(y.default,{width:16,height:16,color:i.COLORS.content.negative}),"Delete"]})}]:[]],x=o=>{o==="edit"?u(e):o==="delete"&&s?.(e)},a=t.jsx(n.ActionButton,{"data-test":`agent-row-run-${e.id}`,disabled:e.isRunDisabled,onClick:p,"aria-label":"Run agent",children:t.jsx(m.default,{width:20,height:20,color:i.COLORS.content.secondary})});return t.jsxs(n.BodyGridRow,{"data-test":`agent-row-${e.id}`,clickable:!!l,onClick:l?()=>l(e):void 0,children:[t.jsxs(n.Cell,{children:[t.jsx(r.TitleSmall,{numberOfLines:1,color:i.COLORS.content.primary,children:e.name}),t.jsxs(r.BodyCaption,{numberOfLines:1,color:i.COLORS.content.secondary,children:["Created: ",e.createdAtLabel]})]}),t.jsx(n.Cell,{children:t.jsx(r.BodyPrimary,{numberOfLines:2,color:i.COLORS.content.primary,children:R(e.trigger)})}),t.jsx(n.Cell,{align:"right",children:t.jsx(r.BodyPrimary,{color:i.COLORS.content.primary,children:e.triggerCount})}),t.jsx(n.Cell,{children:t.jsx(C.Tag,{tagText:c?"Live":"Draft",type:c?"positive":"neutral",variant:"regular"})}),t.jsx(n.Cell,{align:"center",children:t.jsxs(n.ActionGroup,{children:[e.isRunDisabled&&e.runDisabledTooltip?t.jsx(f.Tooltip,{body:e.runDisabledTooltip,placement:"top",children:t.jsx("span",{style:{display:"flex"},children:a})}):a,t.jsx("span",{style:{display:"flex"},onClick:o=>o.stopPropagation(),children:t.jsx(O.DropdownPopover,{"data-test":`agent-row-menu-${e.id}`,options:h,placement:"bottom-end",width:"160px",onSelect:o=>x(L.unwrapDropdownValue(o)),children:t.jsx(n.ActionButton,{"data-test":`agent-row-menu-button-${e.id}`,"aria-label":"More actions",children:t.jsx(b.default,{width:20,height:20,color:i.COLORS.content.secondary})})})})]})})]})};exports.AgentTableRow=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),y=require("../../assets/icons/delete.svg.js"),j=require("../../assets/icons/edit.svg.js"),b=require("../../assets/icons/playOutline.svg.js"),m=require("../../assets/icons/vertical_dots.svg.js"),O=require("../dropdown/DropdownPopover/index.js"),l=require("../TypographyStyle.js"),n=require("../../constants/Theme.js"),i=require("./AgentListing.styled.js"),C=require("../tag/Tag.js"),f=require("../tooltips/Tooltip.js"),S=require("../dropdown/utils.js"),L=e=>{switch(e.kind){case"topic":return`Topic: ${(e.label??"").replace(/_/g," ")}`;case"phrases":return e.items?.length?`Phrases: ${e.items.join(", ")}`:"Phrases";default:return e.label??""}},R=({agent:e,onRunAgent:d,onEditAgent:u,onDeleteAgent:s,onRowClick:r})=>{const c=e.status==="live",h=o=>{o.stopPropagation(),!e.isRunDisabled&&d(e)},p=[{label:"Edit",value:"edit",leadingIcon:t.jsx(j.default,{width:16,height:16,color:n.COLORS.content.secondary})},...s?[{label:"Delete",value:"delete",customComponent:t.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8,color:n.COLORS.content.negative,fontFamily:"Inter",fontSize:14},children:[t.jsx(y.default,{width:16,height:16,color:n.COLORS.content.negative}),"Delete"]})}]:[]],x=o=>{o==="edit"?u(e):o==="delete"&&s?.(e)},a=t.jsx(i.ActionButton,{"data-test":`agent-row-run-${e.id}`,disabled:e.isRunDisabled,onClick:h,"aria-label":"Run agent",children:t.jsx(b.default,{width:20,height:20,color:n.COLORS.content.secondary})});return t.jsxs(i.BodyGridRow,{"data-test":`agent-row-${e.id}`,clickable:!!r,onClick:r?()=>r(e):void 0,children:[t.jsxs(i.Cell,{children:[t.jsx(l.TitleSmall,{numberOfLines:1,color:n.COLORS.content.primary,children:e.name}),t.jsxs(l.BodyCaption,{numberOfLines:1,color:n.COLORS.content.secondary,children:["Created: ",e.createdAtLabel]})]}),t.jsx(i.Cell,{children:t.jsx(l.BodySecondary,{numberOfLines:2,color:n.COLORS.content.primary,children:L(e.trigger)})}),t.jsx(i.Cell,{align:"right",children:t.jsx(l.BodySecondary,{color:n.COLORS.content.primary,children:e.triggerCount})}),t.jsx(i.Cell,{children:t.jsx(C.Tag,{tagText:c?"Live":"Draft",type:c?"positive":"neutral",variant:"regular"})}),t.jsx(i.Cell,{align:"center",children:t.jsxs(i.ActionGroup,{children:[e.isRunDisabled&&e.runDisabledTooltip?t.jsx(f.Tooltip,{body:e.runDisabledTooltip,placement:"top",children:t.jsx("span",{style:{display:"flex"},children:a})}):a,t.jsx("span",{style:{display:"flex"},onClick:o=>o.stopPropagation(),children:t.jsx(O.DropdownPopover,{"data-test":`agent-row-menu-${e.id}`,options:p,placement:"bottom-end",width:"160px",onSelect:o=>x(S.unwrapDropdownValue(o)),children:t.jsx(i.ActionButton,{"data-test":`agent-row-menu-button-${e.id}`,"aria-label":"More actions",children:t.jsx(m.default,{width:20,height:20,color:n.COLORS.content.secondary})})})})]})})]})};exports.AgentTableRow=R;
 //# sourceMappingURL=AgentTableRow.js.map

package/dist/cjs/components/agent-listing/AgentTableRow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AgentTableRow.js","sources":["../../../../src/components/agent-listing/AgentTableRow.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport EditIcon from '@src/assets/icons/edit.svg';\nimport PlayOutlineIcon from '@src/assets/icons/playOutline.svg';\nimport MoreIcon from '@src/assets/icons/vertical_dots.svg';\nimport React from 'react';\nimport { unwrapDropdownValue } from '@src/components/dropdown';\nimport { DropdownPopover } from '@src/components/dropdown/DropdownPopover';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { Tag } from '@src/components/tag';\nimport { Tooltip } from '@src/components/tooltips';\nimport {\n\tBodyCaption,\n\~~tBodyPrimary~~,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentListItem, AgentTriggerSummary } from './AgentListing.model';\nimport {\n\tActionButton,\n\tActionGroup,\n\tBodyGridRow,\n\tCell,\n} from './AgentListing.styled';\n\nconst triggerToText = (trigger: AgentTriggerSummary): string => {\n\tswitch (trigger.kind) {\n\t\tcase 'topic':\n\t\t\treturn `Topic: ${trigger.label ?? ''}`;\n\t\tcase 'phrases':\n\t\t\treturn `Phrases: ${(trigger.items ~~?? [])~~.join(', ')}~~`;\~~n\t\tcase 'custom':\n\t\tdefault:\n\t\t\treturn trigger.label ?? '';\n\t}\n};\n\ninterface AgentTableRowProps {\n\tagent: AgentListItem;\n\tonRunAgent: (agent: AgentListItem) => void;\n\tonEditAgent: (agent: AgentListItem) => void;\n\t/** When set, render a delete action (the listing handles confirmation). /\n\tonDeleteAgent?: (agent: AgentListItem) => void;\n\tonRowClick?: (agent: AgentListItem) => void;\n}\n\nexport const AgentTableRow: React.FC<AgentTableRowProps> = ({\n\tagent,\n\tonRunAgent,\n\tonEditAgent,\n\tonDeleteAgent,\n\tonRowClick,\n}) => {\n\tconst isLive = agent.status === 'live';\n\n\tconst handleRun = (e: React.MouseEvent) => {\n\t\te.stopPropagation();\n\t\tif (agent.isRunDisabled) {\n\t\t\treturn;\n\t\t}\n\t\tonRunAgent(agent);\n\t};\n\n\t// Edit + Delete live in the \"⋮\" menu beside the run button.\n\tconst menuOptions: SingleOption[] = [\n\t\t{\n\t\t\tlabel: 'Edit',\n\t\t\tvalue: 'edit',\n\t\t\tleadingIcon: (\n\t\t\t\t<EditIcon width={16} height={16} color={COLORS.content.secondary} />\n\t\t\t),\n\t\t},\n\t\t...(onDeleteAgent\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: 'Delete',\n\t\t\t\t\t\tvalue: 'delete',\n\t\t\t\t\t\t// Rendered red (icon + label) via customComponent.\n\t\t\t\t\t\tcustomComponent: (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\t\t\tcolor: COLORS.content.negative,\n\t\t\t\t\t\t\t\t\tfontFamily: 'Inter',\n\t\t\t\t\t\t\t\t\tfontSize: 14,\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<DeleteIcon\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t ]\n\t\t\t: []),\n\t];\n\n\tconst handleMenuSelect = (value: string \| undefined) => {\n\t\tif (value === 'edit') {\n\t\t\tonEditAgent(agent);\n\t\t} else if (value === 'delete') {\n\t\t\tonDeleteAgent?.(agent);\n\t\t}\n\t};\n\n\tconst playButton = (\n\t\t<ActionButton\n\t\t\tdata-test={`agent-row-run-${agent.id}`}\n\t\t\tdisabled={agent.isRunDisabled}\n\t\t\tonClick={handleRun}\n\t\t\taria-label=\"Run agent\"\n\t\t>\n\t\t\t<PlayOutlineIcon\n\t\t\t\twidth={20}\n\t\t\t\theight={20}\n\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t/>\n\t\t</ActionButton>\n\t);\n\n\treturn (\n\t\t<BodyGridRow\n\t\t\tdata-test={`agent-row-${agent.id}`}\n\t\t\tclickable={!!onRowClick}\n\t\t\tonClick={onRowClick ? () => onRowClick(agent) : undefined}\n\t\t>\n\t\t\t<Cell>\n\t\t\t\t<TitleSmall numberOfLines={1} color={COLORS.content.primary}>\n\t\t\t\t\t{agent.name}\n\t\t\t\t</TitleSmall>\n\t\t\t\t<BodyCaption numberOfLines={1} color={COLORS.content.secondary}>\n\t\t\t\t\tCreated: {agent.createdAtLabel}\n\t\t\t\t</BodyCaption>\n\t\t\t</Cell>\n\n\t\t\t<Cell>\n\t\t\t\t<~~BodyPrimary~~ numberOfLines={2} color={COLORS.content.primary}>\n\t\t\t\t\t{triggerToText(agent.trigger)}\n\t\t\t\t</~~BodyPrimary~~>\n\t\t\t</Cell>\n\n\t\t\t<Cell align=\"right\">\n\t\t\t\t<~~BodyPrimary~~ color={COLORS.content.primary}>\n\t\t\t\t\t{agent.triggerCount}\n\t\t\t\t</~~BodyPrimary~~>\n\t\t\t</Cell>\n\n\t\t\t<Cell>\n\t\t\t\t<Tag\n\t\t\t\t\ttagText={isLive ? 'Live' : 'Draft'}\n\t\t\t\t\ttype={isLive ? 'positive' : 'neutral'}\n\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t/>\n\t\t\t</Cell>\n\n\t\t\t<Cell align=\"center\">\n\t\t\t\t<ActionGroup>\n\t\t\t\t\t{agent.isRunDisabled && agent.runDisabledTooltip ? (\n\t\t\t\t\t\t<Tooltip body={agent.runDisabledTooltip} placement=\"top\">\n\t\t\t\t\t\t\t<span style={{ display: 'flex' }}>{playButton}</span>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tplayButton\n\t\t\t\t\t)}\n\t\t\t\t\t{/ Stop the row's onClick from firing when interacting with the menu. */}\n\t\t\t\t\t<span\n\t\t\t\t\t\tstyle={{ display: 'flex' }}\n\t\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\t\tdata-test={`agent-row-menu-${agent.id}`}\n\t\t\t\t\t\t\toptions={menuOptions}\n\t\t\t\t\t\t\tplacement=\"bottom-end\"\n\t\t\t\t\t\t\twidth=\"160px\"\n\t\t\t\t\t\t\tonSelect={(opt) => handleMenuSelect(unwrapDropdownValue(opt))}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ActionButton\n\t\t\t\t\t\t\t\tdata-test={`agent-row-menu-button-${agent.id}`}\n\t\t\t\t\t\t\t\taria-label=\"More actions\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<MoreIcon\n\t\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ActionButton>\n\t\t\t\t\t\t</DropdownPopover>\n\t\t\t\t\t</span>\n\t\t\t\t</ActionGroup>\n\t\t\t</Cell>\n\t\t</BodyGridRow>\n\t);\n};\n"],"names":["triggerToText","trigger","AgentTableRow","agent","onRunAgent","onEditAgent","onDeleteAgent","onRowClick","isLive","handleRun","e","menuOptions","jsx","EditIcon","COLORS","jsxs","DeleteIcon","handleMenuSelect","value","playButton","ActionButton","PlayOutlineIcon","BodyGridRow","Cell","TitleSmall","BodyCaption","~~BodyPrimary~~","Tag","ActionGroup","Tooltip","DropdownPopover","opt","unwrapDropdownValue","MoreIcon"],"mappings":"yjBAwBMA,EAAiBC,GAAyC,CAC/D,OAAQA,EAAQ,KAAA,CACf,IAAK,~~QACJ~~,MAAO,~~UAAUA~~,EAAQ,OAAS,~~EAAE~~,~~GACrC~~,IAAK,~~UACJ~~,~~MAAO~~,~~aAAaA,~~EAAQ,~~OAAS~~,~~CAAA~~,~~GAAI~~,KAAK,IAAI,CAAC,~~GAEpD~~,QACC,OAAOA,EAAQ,OAAS,EAAA,CAE3B,EAWaC,EAA8C,CAAC,CAC3D,MAAAC,EACA,WAAAC,EACA,YAAAC,EACA,cAAAC,EACA,WAAAC,CACD,IAAM,CACL,MAAMC,EAASL,EAAM,SAAW,OAE1BM,EAAaC,GAAwB,CAC1CA,EAAE,gBAAA,EACE,CAAAP,EAAM,eAGVC,EAAWD,CAAK,CACjB,EAGMQ,EAA8B,CACnC,CACC,MAAO,OACP,MAAO,OACP,YACCC,EAAAA,IAACC,UAAA,CAAS,MAAO,GAAI,OAAQ,GAAI,MAAOC,SAAO,QAAQ,SAAA,CAAW,CAAA,EAGpE,GAAIR,EACD,CACA,CACC,MAAO,SACP,MAAO,SAEP,gBACCS,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,WAAY,SACZ,IAAK,EACL,MAAOD,EAAAA,OAAO,QAAQ,SACtB,WAAY,QACZ,SAAU,EAAA,EAGX,SAAA,CAAAF,EAAAA,IAACI,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOF,EAAAA,OAAO,QAAQ,QAAA,CAAA,EACrB,QAAA,CAAA,CAAA,CAEH,CAEF,EAEA,CAAA,CAAC,EAGCG,EAAoBC,GAA8B,CACnDA,IAAU,OACbb,EAAYF,CAAK,EACPe,IAAU,UACpBZ,IAAgBH,CAAK,CAEvB,EAEMgB,EACLP,EAAAA,IAACQ,EAAAA,aAAA,CACA,YAAW,iBAAiBjB,EAAM,EAAE,GACpC,SAAUA,EAAM,cAChB,QAASM,EACT,aAAW,YAEX,SAAAG,EAAAA,IAACS,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOP,EAAAA,OAAO,QAAQ,SAAA,CAAA,CACvB,CAAA,EAIF,OACCC,EAAAA,KAACO,EAAAA,YAAA,CACA,YAAW,aAAanB,EAAM,EAAE,GAChC,UAAW,CAAC,CAACI,EACb,QAASA,EAAa,IAAMA,EAAWJ,CAAK,EAAI,OAEhD,SAAA,CAAAY,OAACQ,EAAAA,KAAA,CACA,SAAA,CAAAX,EAAAA,IAACY,EAAAA,WAAA,CAAW,cAAe,EAAG,MAAOV,SAAO,QAAQ,QAClD,WAAM,IAAA,CACR,SACCW,EAAAA,YAAA,CAAY,cAAe,EAAG,MAAOX,SAAO,QAAQ,UAAW,SAAA,CAAA,YACrDX,EAAM,cAAA,CAAA,CACjB,CAAA,EACD,EAEAS,EAAAA,IAACW,EAAAA,KAAA,CACA,SAAAX,EAAAA,IAACc,~~cAAA~~,~~CAAY~~,cAAe,EAAG,MAAOZ,EAAAA,OAAO,QAAQ,~~QACnD~~,SAAAd,EAAcG,EAAM,OAAO,EAC7B,EACD,EAEAS,EAAAA,IAACW,EAAAA,KAAA,CAAK,MAAM,QACX,SAAAX,EAAAA,IAACc,~~cAAA~~,~~CAAY~~,MAAOZ,EAAAA,OAAO,QAAQ,~~QACjC~~,SAAAX,EAAM,YAAA,CACR,EACD,QAECoB,EAAAA,KAAA,CACA,SAAAX,EAAAA,IAACe,EAAAA,IAAA,CACA,QAASnB,EAAS,OAAS,QAC3B,KAAMA,EAAS,WAAa,UAC5B,QAAQ,SAAA,CAAA,EAEV,EAEAI,MAACW,EAAAA,KAAA,CAAK,MAAM,SACX,gBAACK,cAAA,CACC,SAAA,CAAAzB,EAAM,eAAiBA,EAAM,yBAC5B0B,UAAA,CAAQ,KAAM1B,EAAM,mBAAoB,UAAU,MAClD,SAAAS,EAAAA,IAAC,OAAA,CAAK,MAAO,CAAE,QAAS,QAAW,SAAAO,EAAW,EAC/C,EAEAA,EAGDP,EAAAA,IAAC,OAAA,CACA,MAAO,CAAE,QAAS,MAAA,EAClB,QAAUF,GAAMA,EAAE,gBAAA,EAElB,SAAAE,EAAAA,IAACkB,EAAAA,gBAAA,CACA,YAAW,kBAAkB3B,EAAM,EAAE,GACrC,QAASQ,EACT,UAAU,aACV,MAAM,QACN,SAAWoB,GAAQd,EAAiBe,EAAAA,oBAAoBD,CAAG,CAAC,EAE5D,SAAAnB,EAAAA,IAACQ,EAAAA,aAAA,CACA,YAAW,yBAAyBjB,EAAM,EAAE,GAC5C,aAAW,eAEX,SAAAS,EAAAA,IAACqB,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOnB,EAAAA,OAAO,QAAQ,SAAA,CAAA,CACvB,CAAA,CACD,CAAA,CACD,CAAA,CACD,CAAA,CACD,CAAA,CACD,CAAA,CAAA,CAAA,CAGH"}
1	+ {"version":3,"file":"AgentTableRow.js","sources":["../../../../src/components/agent-listing/AgentTableRow.tsx"],"sourcesContent":["import DeleteIcon from '@src/assets/icons/delete.svg';\nimport EditIcon from '@src/assets/icons/edit.svg';\nimport PlayOutlineIcon from '@src/assets/icons/playOutline.svg';\nimport MoreIcon from '@src/assets/icons/vertical_dots.svg';\nimport React from 'react';\nimport { unwrapDropdownValue } from '@src/components/dropdown';\nimport { DropdownPopover } from '@src/components/dropdown/DropdownPopover';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { Tag } from '@src/components/tag';\nimport { Tooltip } from '@src/components/tooltips';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentListItem, AgentTriggerSummary } from './AgentListing.model';\nimport {\n\tActionButton,\n\tActionGroup,\n\tBodyGridRow,\n\tCell,\n} from './AgentListing.styled';\n\nconst triggerToText = (trigger: AgentTriggerSummary): string => {\n\tswitch (trigger.kind) {\n\t\tcase 'topic':\n\t\t\t// Intent keys arrive snake_cased (e.g. \"order_cancellation\"); show them\n\t\t\t// space-separated so the trigger reads as words, not a raw key.\n\t\t\treturn `Topic: ${(trigger.label ?? '').replace(/_/g, ' ')}`;\n\t\tcase 'phrases':\n\t\t\t// No enumerable phrase list (free-text trigger) → just the word.\n\t\t\treturn trigger.items?.length\n\t\t\t\t? `Phrases: ${trigger.items.join(', ')}`\n\t\t\t\t: 'Phrases';\n\t\tcase 'custom':\n\t\tdefault:\n\t\t\treturn trigger.label ?? '';\n\t}\n};\n\ninterface AgentTableRowProps {\n\tagent: AgentListItem;\n\tonRunAgent: (agent: AgentListItem) => void;\n\tonEditAgent: (agent: AgentListItem) => void;\n\t/** When set, render a delete action (the listing handles confirmation). /\n\tonDeleteAgent?: (agent: AgentListItem) => void;\n\tonRowClick?: (agent: AgentListItem) => void;\n}\n\nexport const AgentTableRow: React.FC<AgentTableRowProps> = ({\n\tagent,\n\tonRunAgent,\n\tonEditAgent,\n\tonDeleteAgent,\n\tonRowClick,\n}) => {\n\tconst isLive = agent.status === 'live';\n\n\tconst handleRun = (e: React.MouseEvent) => {\n\t\te.stopPropagation();\n\t\tif (agent.isRunDisabled) {\n\t\t\treturn;\n\t\t}\n\t\tonRunAgent(agent);\n\t};\n\n\t// Edit + Delete live in the \"⋮\" menu beside the run button.\n\tconst menuOptions: SingleOption[] = [\n\t\t{\n\t\t\tlabel: 'Edit',\n\t\t\tvalue: 'edit',\n\t\t\tleadingIcon: (\n\t\t\t\t<EditIcon width={16} height={16} color={COLORS.content.secondary} />\n\t\t\t),\n\t\t},\n\t\t...(onDeleteAgent\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\tlabel: 'Delete',\n\t\t\t\t\t\tvalue: 'delete',\n\t\t\t\t\t\t// Rendered red (icon + label) via customComponent.\n\t\t\t\t\t\tcustomComponent: (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\t\t\tcolor: COLORS.content.negative,\n\t\t\t\t\t\t\t\t\tfontFamily: 'Inter',\n\t\t\t\t\t\t\t\t\tfontSize: 14,\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<DeleteIcon\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\tDelete\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\t},\n\t\t\t ]\n\t\t\t: []),\n\t];\n\n\tconst handleMenuSelect = (value: string \| undefined) => {\n\t\tif (value === 'edit') {\n\t\t\tonEditAgent(agent);\n\t\t} else if (value === 'delete') {\n\t\t\tonDeleteAgent?.(agent);\n\t\t}\n\t};\n\n\tconst playButton = (\n\t\t<ActionButton\n\t\t\tdata-test={`agent-row-run-${agent.id}`}\n\t\t\tdisabled={agent.isRunDisabled}\n\t\t\tonClick={handleRun}\n\t\t\taria-label=\"Run agent\"\n\t\t>\n\t\t\t<PlayOutlineIcon\n\t\t\t\twidth={20}\n\t\t\t\theight={20}\n\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t/>\n\t\t</ActionButton>\n\t);\n\n\treturn (\n\t\t<BodyGridRow\n\t\t\tdata-test={`agent-row-${agent.id}`}\n\t\t\tclickable={!!onRowClick}\n\t\t\tonClick={onRowClick ? () => onRowClick(agent) : undefined}\n\t\t>\n\t\t\t<Cell>\n\t\t\t\t<TitleSmall numberOfLines={1} color={COLORS.content.primary}>\n\t\t\t\t\t{agent.name}\n\t\t\t\t</TitleSmall>\n\t\t\t\t<BodyCaption numberOfLines={1} color={COLORS.content.secondary}>\n\t\t\t\t\tCreated: {agent.createdAtLabel}\n\t\t\t\t</BodyCaption>\n\t\t\t</Cell>\n\n\t\t\t<Cell>\n\t\t\t\t<BodySecondary numberOfLines={2} color={COLORS.content.primary}>\n\t\t\t\t\t{triggerToText(agent.trigger)}\n\t\t\t\t</BodySecondary>\n\t\t\t</Cell>\n\n\t\t\t<Cell align=\"right\">\n\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t{agent.triggerCount}\n\t\t\t\t</BodySecondary>\n\t\t\t</Cell>\n\n\t\t\t<Cell>\n\t\t\t\t<Tag\n\t\t\t\t\ttagText={isLive ? 'Live' : 'Draft'}\n\t\t\t\t\ttype={isLive ? 'positive' : 'neutral'}\n\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t/>\n\t\t\t</Cell>\n\n\t\t\t<Cell align=\"center\">\n\t\t\t\t<ActionGroup>\n\t\t\t\t\t{agent.isRunDisabled && agent.runDisabledTooltip ? (\n\t\t\t\t\t\t<Tooltip body={agent.runDisabledTooltip} placement=\"top\">\n\t\t\t\t\t\t\t<span style={{ display: 'flex' }}>{playButton}</span>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tplayButton\n\t\t\t\t\t)}\n\t\t\t\t\t{/ Stop the row's onClick from firing when interacting with the menu. */}\n\t\t\t\t\t<span\n\t\t\t\t\t\tstyle={{ display: 'flex' }}\n\t\t\t\t\t\tonClick={(e) => e.stopPropagation()}\n\t\t\t\t\t>\n\t\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\t\tdata-test={`agent-row-menu-${agent.id}`}\n\t\t\t\t\t\t\toptions={menuOptions}\n\t\t\t\t\t\t\tplacement=\"bottom-end\"\n\t\t\t\t\t\t\twidth=\"160px\"\n\t\t\t\t\t\t\tonSelect={(opt) => handleMenuSelect(unwrapDropdownValue(opt))}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ActionButton\n\t\t\t\t\t\t\t\tdata-test={`agent-row-menu-button-${agent.id}`}\n\t\t\t\t\t\t\t\taria-label=\"More actions\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<MoreIcon\n\t\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ActionButton>\n\t\t\t\t\t\t</DropdownPopover>\n\t\t\t\t\t</span>\n\t\t\t\t</ActionGroup>\n\t\t\t</Cell>\n\t\t</BodyGridRow>\n\t);\n};\n"],"names":["triggerToText","trigger","AgentTableRow","agent","onRunAgent","onEditAgent","onDeleteAgent","onRowClick","isLive","handleRun","e","menuOptions","jsx","EditIcon","COLORS","jsxs","DeleteIcon","handleMenuSelect","value","playButton","ActionButton","PlayOutlineIcon","BodyGridRow","Cell","TitleSmall","BodyCaption","BodySecondary","Tag","ActionGroup","Tooltip","DropdownPopover","opt","unwrapDropdownValue","MoreIcon"],"mappings":"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"}

package/dist/cjs/components/agent-listing/AgentTableShimmer.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../shimmer/ShimmerComponent/BikShimmer.js"),r=require("./AgentListing.styled.js"),x=require("./AgentTable.js"),l=(i,t="16px",n="4px")=>e.jsx(s.BikShimmer,{boxes:[{width:i,height:t,borderRadius:n,marginTop:"0"}]}),a=({rows:i=5})=>e.jsx(r.TableCard,{"data-test":"agent-table-shimmer",children:e.jsxs(r.TableScroll,{children:[e.jsx(x.AgentTableHeader,{}),Array.from({length:i},(t,n)=>e.jsxs(r.BodyGridRow,{children:[e.jsx(r.Cell,{children:l("60%")}),e.jsx(r.Cell,{children:l("70%")}),e.jsx(r.Cell,{align:"right",children:l("48px")}),e.jsx(r.Cell,{children:l("64px","24px","999px")}),e.jsx(r.Cell,{align:"center",children:l("72px","24px")})]},n))]})});exports.AgentTableShimmer=a;
2	+ //# sourceMappingURL=AgentTableShimmer.js.map

package/dist/cjs/components/agent-listing/AgentTableShimmer.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"AgentTableShimmer.js","sources":["../../../../src/components/agent-listing/AgentTableShimmer.tsx"],"sourcesContent":["import React from 'react';\nimport BikShimmer from '@src/components/shimmer/ShimmerComponent/BikShimmer';\nimport {\n\tBodyGridRow,\n\tCell,\n\tTableCard,\n\tTableScroll,\n} from './AgentListing.styled';\nimport { AgentTableHeader } from './AgentTable';\n\ninterface AgentTableShimmerProps {\n\t/** Shimmer row count — pass the page size so the refetch keeps the page height. */\n\trows?: number;\n}\n\nconst box = (width: string, height = '16px', borderRadius = '4px') => (\n\t<BikShimmer boxes={[{ width, height, borderRadius, marginTop: '0' }]} />\n);\n\n/**\n * Table-shaped loading state: the real column header + shimmer rows matching the\n * listing grid, so a refetch (page/page-size/sort/search change) shimmers in place\n * instead of collapsing to the initial full-page loader.\n */\nexport const AgentTableShimmer: React.FC<AgentTableShimmerProps> = ({\n\trows = 5,\n}) => (\n\t<TableCard data-test=\"agent-table-shimmer\">\n\t\t<TableScroll>\n\t\t\t<AgentTableHeader />\n\n\t\t\t{Array.from({ length: rows }, (_, i) => (\n\t\t\t\t<BodyGridRow key={i}>\n\t\t\t\t\t<Cell>{box('60%')}</Cell>\n\t\t\t\t\t<Cell>{box('70%')}</Cell>\n\t\t\t\t\t<Cell align=\"right\">{box('48px')}</Cell>\n\t\t\t\t\t<Cell>{box('64px', '24px', '999px')}</Cell>\n\t\t\t\t\t<Cell align=\"center\">{box('72px', '24px')}</Cell>\n\t\t\t\t</BodyGridRow>\n\t\t\t))}\n\t\t</TableScroll>\n\t</TableCard>\n);\n"],"names":["box","width","height","borderRadius","jsx","BikShimmer","AgentTableShimmer","rows","TableCard","TableScroll","AgentTableHeader","_","i","jsxs","BodyGridRow","Cell"],"mappings":"+OAeMA,EAAM,CAACC,EAAeC,EAAS,OAAQC,EAAe,QAC3DC,EAAAA,IAACC,EAAAA,WAAA,CAAW,MAAO,CAAC,CAAE,MAAAJ,EAAO,OAAAC,EAAQ,aAAAC,EAAc,UAAW,GAAA,CAAK,EAAG,EAQ1DG,EAAsD,CAAC,CACnE,KAAAC,EAAO,CACR,IACCH,EAAAA,IAACI,YAAA,CAAU,YAAU,sBACpB,gBAACC,cAAA,CACA,SAAA,CAAAL,EAAAA,IAACM,EAAAA,iBAAA,EAAiB,EAEjB,MAAM,KAAK,CAAE,OAAQH,CAAA,EAAQ,CAACI,EAAGC,IACjCC,EAAAA,KAACC,EAAAA,YAAA,CACA,SAAA,CAAAV,EAAAA,IAACW,EAAAA,KAAA,CAAM,SAAAf,EAAI,KAAK,CAAA,CAAE,EAClBI,EAAAA,IAACW,EAAAA,KAAA,CAAM,SAAAf,EAAI,KAAK,CAAA,CAAE,QACjBe,EAAAA,KAAA,CAAK,MAAM,QAAS,SAAAf,EAAI,MAAM,EAAE,QAChCe,EAAAA,KAAA,CAAM,SAAAf,EAAI,OAAQ,OAAQ,OAAO,EAAE,QACnCe,EAAAA,KAAA,CAAK,MAAM,SAAU,SAAAf,EAAI,OAAQ,MAAM,CAAA,CAAE,CAAA,CAAA,EALzBY,CAMlB,CACA,CAAA,CAAA,CACF,CAAA,CACD"}

package/dist/cjs/components/agent-listing/DeleteAgentModal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../TypographyStyle.js"),l=require("../../constants/Theme.js"),s=require("../modals/styledModal.js"),i=require("../button/Button.js"),r=({agentName:a,onClose:t,onConfirm:d,isDeleting:o})=>e.jsx(s.StyledModal,{"data-test":"agent-delete-modal",open:!0,onClose:t,width:"530px",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:12,padding:24,alignItems:"flex-start",textAlign:"left"},children:[e.jsxs(n.TitleRegular,{color:l.COLORS.content.primary,children:["Delete “",a,"”?"]}),e.jsx(n.BodySecondary,{color:l.COLORS.content.secondary,children:"This permanently deletes the agent and its sub-agents. This can’t be undone."}),e.jsxs("div",{style:{display:"flex",gap:12,width:"100%",marginTop:4},children:[e.jsx(i.Button,{"data-test":"agent-delete-cancel",buttonType:"secondary",size:"medium",matchParentWidth:!0,buttonText:"Cancel",onClick:t}),e.jsx(i.Button,{"data-test":"agent-delete-confirm",buttonType:"destructive",size:"medium",matchParentWidth:!0,buttonText:"Delete",isLoading:o,onClick:d})]})]})});exports.DeleteAgentModal=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../TypographyStyle.js"),i=require("../../constants/Theme.js"),o=require("../modals/styledModal.js"),l=require("../button/Button.js"),r=({agentName:a,onClose:t,onConfirm:d,isDeleting:s})=>e.jsx(o.StyledModal,{"data-test":"agent-delete-modal",open:!0,onClose:t,width:"530px",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:12,padding:24,alignItems:"flex-start",textAlign:"left"},children:[e.jsxs(n.TitleMedium,{color:i.COLORS.content.primary,children:["Delete “",a,"”?"]}),e.jsx(n.BodyPrimary,{color:i.COLORS.content.secondary,children:"This permanently deletes the agent and its sub-agents. This can’t be undone."}),e.jsxs("div",{style:{display:"flex",gap:12,width:"100%",marginTop:4},children:[e.jsx(l.Button,{"data-test":"agent-delete-cancel",buttonType:"secondary",size:"medium",matchParentWidth:!0,buttonText:"Cancel",onClick:t}),e.jsx(l.Button,{"data-test":"agent-delete-confirm",buttonType:"destructive",size:"medium",matchParentWidth:!0,buttonText:"Delete",isLoading:s,onClick:d})]})]})});exports.DeleteAgentModal=r;
 //# sourceMappingURL=DeleteAgentModal.js.map

package/dist/cjs/components/agent-listing/DeleteAgentModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DeleteAgentModal.js","sources":["../../../../src/components/agent-listing/DeleteAgentModal.tsx"],"sourcesContent":["import React from 'react';\nimport { Button } from '@src/components/button';\nimport { StyledModal } from '@src/components/modals';\nimport { ~~BodySecondary~~, ~~TitleRegular~~ } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\ninterface DeleteAgentModalProps {\n\t/** Name of the agent being deleted (for the body copy). /\n\tagentName: string;\n\t/* Dismiss without deleting (X / outside click / Cancel). /\n\tonClose: () => void;\n\t/* Confirm deletion. /\n\tonConfirm: () => void;\n\tisDeleting?: boolean;\n}\n\n/\n \"Delete agent?\" confirmation for the listing. Deleting an entry agent also\n * removes its sub-agents (the backend cascades), so the copy warns about it.\n */\nexport const DeleteAgentModal: React.FC<DeleteAgentModalProps> = ({\n\tagentName,\n\tonClose,\n\tonConfirm,\n\tisDeleting,\n}) => (\n\t<StyledModal\n\t\tdata-test=\"agent-delete-modal\"\n\t\topen\n\t\tonClose={onClose}\n\t\twidth=\"530px\"\n\t>\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tflexDirection: 'column',\n\t\t\t\tgap: 12,\n\t\t\t\tpadding: 24,\n\t\t\t\talignItems: 'flex-start',\n\t\t\t\ttextAlign: 'left',\n\t\t\t}}\n\t\t>\n\t\t\t<~~TitleRegular~~ color={COLORS.content.primary}>\n\t\t\t\tDelete “{agentName}”?\n\t\t\t</~~TitleRegular~~>\n\t\t\t<~~BodySecondary~~ color={COLORS.content.secondary}>\n\t\t\t\tThis permanently deletes the agent and its sub-agents. This can’t be\n\t\t\t\tundone.\n\t\t\t</~~BodySecondary~~>\n\n\t\t\t<div style={{ display: 'flex', gap: 12, width: '100%', marginTop: 4 }}>\n\t\t\t\t<Button\n\t\t\t\t\tdata-test=\"agent-delete-cancel\"\n\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\tmatchParentWidth\n\t\t\t\t\tbuttonText=\"Cancel\"\n\t\t\t\t\tonClick={onClose}\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tdata-test=\"agent-delete-confirm\"\n\t\t\t\t\tbuttonType=\"destructive\"\n\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\tmatchParentWidth\n\t\t\t\t\tbuttonText=\"Delete\"\n\t\t\t\t\tisLoading={isDeleting}\n\t\t\t\t\tonClick={onConfirm}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t</StyledModal>\n);\n"],"names":["DeleteAgentModal","agentName","onClose","onConfirm","isDeleting","jsx","StyledModal","jsxs","~~TitleRegular~~","COLORS","~~BodySecondary~~","Button"],"mappings":"qQAoBaA,EAAoD,CAAC,CACjE,UAAAC,EACA,QAAAC,EACA,UAAAC,EACA,WAAAC,CACD,IACCC,EAAAA,IAACC,EAAAA,YAAA,CACA,YAAU,qBACV,KAAI,GACJ,QAAAJ,EACA,MAAM,QAEN,SAAAK,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,SACf,IAAK,GACL,QAAS,GACT,WAAY,aACZ,UAAW,MAAA,EAGZ,SAAA,CAAAA,EAAAA,KAACC,EAAAA,~~aAAA~~,~~CAAa~~,MAAOC,EAAAA,OAAO,QAAQ,QAAS,SAAA,CAAA,~~WACnCR~~,EAAU,IAAA,EACpB,QACCS,EAAAA,~~cAAA~~,~~CAAc~~,MAAOD,EAAAA,OAAO,QAAQ,UAAW,SAAA,+~~EAGhD~~,EAEAF,EAAAA,KAAC,MAAA,CAAI,MAAO,CAAE,QAAS,OAAQ,IAAK,GAAI,MAAO,OAAQ,UAAW,CAAA,EACjE,SAAA,CAAAF,EAAAA,IAACM,EAAAA,OAAA,CACA,YAAU,sBACV,WAAW,YACX,KAAK,SACL,iBAAgB,GAChB,WAAW,SACX,QAAST,CAAA,CAAA,EAEVG,EAAAA,IAACM,EAAAA,OAAA,CACA,YAAU,uBACV,WAAW,cACX,KAAK,SACL,iBAAgB,GAChB,WAAW,SACX,UAAWP,EACX,QAASD,CAAA,CAAA,CACV,CAAA,CACD,CAAA,CAAA,CAAA,CACD,CACD"}
1	+ {"version":3,"file":"DeleteAgentModal.js","sources":["../../../../src/components/agent-listing/DeleteAgentModal.tsx"],"sourcesContent":["import React from 'react';\nimport { Button } from '@src/components/button';\nimport { StyledModal } from '@src/components/modals';\nimport { BodyPrimary, TitleMedium } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\ninterface DeleteAgentModalProps {\n\t/** Name of the agent being deleted (for the body copy). /\n\tagentName: string;\n\t/* Dismiss without deleting (X / outside click / Cancel). /\n\tonClose: () => void;\n\t/* Confirm deletion. /\n\tonConfirm: () => void;\n\tisDeleting?: boolean;\n}\n\n/\n \"Delete agent?\" confirmation for the listing. Deleting an entry agent also\n * removes its sub-agents (the backend cascades), so the copy warns about it.\n */\nexport const DeleteAgentModal: React.FC<DeleteAgentModalProps> = ({\n\tagentName,\n\tonClose,\n\tonConfirm,\n\tisDeleting,\n}) => (\n\t<StyledModal\n\t\tdata-test=\"agent-delete-modal\"\n\t\topen\n\t\tonClose={onClose}\n\t\twidth=\"530px\"\n\t>\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tflexDirection: 'column',\n\t\t\t\tgap: 12,\n\t\t\t\tpadding: 24,\n\t\t\t\talignItems: 'flex-start',\n\t\t\t\ttextAlign: 'left',\n\t\t\t}}\n\t\t>\n\t\t\t<TitleMedium color={COLORS.content.primary}>\n\t\t\t\tDelete “{agentName}”?\n\t\t\t</TitleMedium>\n\t\t\t<BodyPrimary color={COLORS.content.secondary}>\n\t\t\t\tThis permanently deletes the agent and its sub-agents. This can’t be\n\t\t\t\tundone.\n\t\t\t</BodyPrimary>\n\n\t\t\t<div style={{ display: 'flex', gap: 12, width: '100%', marginTop: 4 }}>\n\t\t\t\t<Button\n\t\t\t\t\tdata-test=\"agent-delete-cancel\"\n\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\tmatchParentWidth\n\t\t\t\t\tbuttonText=\"Cancel\"\n\t\t\t\t\tonClick={onClose}\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tdata-test=\"agent-delete-confirm\"\n\t\t\t\t\tbuttonType=\"destructive\"\n\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\tmatchParentWidth\n\t\t\t\t\tbuttonText=\"Delete\"\n\t\t\t\t\tisLoading={isDeleting}\n\t\t\t\t\tonClick={onConfirm}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t</StyledModal>\n);\n"],"names":["DeleteAgentModal","agentName","onClose","onConfirm","isDeleting","jsx","StyledModal","jsxs","TitleMedium","COLORS","BodyPrimary","Button"],"mappings":"qQAoBaA,EAAoD,CAAC,CACjE,UAAAC,EACA,QAAAC,EACA,UAAAC,EACA,WAAAC,CACD,IACCC,EAAAA,IAACC,EAAAA,YAAA,CACA,YAAU,qBACV,KAAI,GACJ,QAAAJ,EACA,MAAM,QAEN,SAAAK,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,SACf,IAAK,GACL,QAAS,GACT,WAAY,aACZ,UAAW,MAAA,EAGZ,SAAA,CAAAA,EAAAA,KAACC,EAAAA,YAAA,CAAY,MAAOC,EAAAA,OAAO,QAAQ,QAAS,SAAA,CAAA,WAClCR,EAAU,IAAA,EACpB,QACCS,EAAAA,YAAA,CAAY,MAAOD,EAAAA,OAAO,QAAQ,UAAW,SAAA,+EAG9C,EAEAF,EAAAA,KAAC,MAAA,CAAI,MAAO,CAAE,QAAS,OAAQ,IAAK,GAAI,MAAO,OAAQ,UAAW,CAAA,EACjE,SAAA,CAAAF,EAAAA,IAACM,EAAAA,OAAA,CACA,YAAU,sBACV,WAAW,YACX,KAAK,SACL,iBAAgB,GAChB,WAAW,SACX,QAAST,CAAA,CAAA,EAEVG,EAAAA,IAACM,EAAAA,OAAA,CACA,YAAU,uBACV,WAAW,cACX,KAAK,SACL,iBAAgB,GAChB,WAAW,SACX,UAAWP,EACX,QAASD,CAAA,CAAA,CACV,CAAA,CACD,CAAA,CAAA,CAAA,CACD,CACD"}

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsChip.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("../../assets/icons/info.svg.js"),t=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),p=require("./AnalyticsChipChannelFooter.js"),x=require("./CommonStyles.js"),S=require("../tooltips/Tooltip.js"),g=n=>{const{title:l,primaryValue:s,titleColor:c,captionColor:a=t.BASE_COLORS.grayscale[700],backgroundColor:y=t.BASE_COLORS.grayscale[50],width:h="224.67px",extraJSX:C,tooltipContent:o,channelConfig:i,style:d}=n;return e.jsxs(x.AnalyticsChipContainer,{style:d??{},backgroundColor:y,width:h,children:[e.jsxs("div",{className:"sub--container",children:[e.jsx(r.BodyCaption,{style:{color:a},children:l}),o&&e.jsx(S.Tooltip,{body:o,children:e.jsx("div",{children:e.jsx(u.default,{height:14.67,width:14.67,color:t.BASE_COLORS.grayscale[500]})})})]}),e.jsx(r.TitleLarge,{style:{color:c},children:s}),i&&e.jsx(p.AnalyticsChipChannelFooter,{channelConfig:i}),C]})};exports.AnalyticsChip=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),p=require("../../assets/icons/info.svg.js"),t=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),u=require("./AnalyticsChipChannelFooter.js"),x=require("./CommonStyles.js"),S=require("../tooltips/Tooltip.js"),g=n=>{const{title:l,primaryValue:s,titleColor:c,captionColor:a=t.BASE_COLORS.grayscale[700],backgroundColor:y=t.BASE_COLORS.grayscale[50],width:h="224.67px",extraJSX:C,tooltipContent:o,channelConfig:i,style:d}=n;return e.jsxs(x.AnalyticsChipContainer,{style:d??{},backgroundColor:y,width:h,children:[e.jsxs("div",{className:"sub--container",children:[e.jsx(r.BodyCaption,{style:{color:a},children:l}),o&&e.jsx(S.Tooltip,{body:o,children:e.jsx("div",{children:e.jsx(p.default,{"data-test":"analytics-chip-tooltip-icon",height:14.67,width:14.67,color:t.BASE_COLORS.grayscale[500]})})})]}),e.jsx(r.TitleLarge,{style:{color:c},children:s}),i&&e.jsx(u.AnalyticsChipChannelFooter,{channelConfig:i}),C]})};exports.AnalyticsChip=g;
 //# sourceMappingURL=AnalyticsChip.js.map

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsChip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AnalyticsChip.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsChip.tsx"],"sourcesContent":["import Info from '@src/assets/icons/info.svg';\nimport React from 'react';\nimport { Tooltip } from '@src/components/tooltips';\nimport { BASE_COLORS } from '@src/constants/Theme';\nimport { BodyCaption, TitleLarge } from '../TypographyStyle';\nimport { AnalyticsChipInterface } from './AnalyticsChip.model';\nimport { AnalyticsChipChannelFooter } from './AnalyticsChipChannelFooter';\nimport { AnalyticsChipContainer } from './CommonStyles';\n\nexport const AnalyticsChip: React.FC<AnalyticsChipInterface> = (props) => {\n\tconst {\n\t\ttitle,\n\t\tprimaryValue,\n\t\ttitleColor,\n\t\tcaptionColor = BASE_COLORS.grayscale[700],\n\t\tbackgroundColor = BASE_COLORS.grayscale[50],\n\t\twidth = '224.67px',\n\t\textraJSX,\n\t\ttooltipContent,\n\t\tchannelConfig,\n\t\tstyle,\n\t} = props;\n\treturn (\n\t\t<AnalyticsChipContainer\n\t\t\tstyle={style ?? {}}\n\t\t\tbackgroundColor={backgroundColor}\n\t\t\twidth={width}\n\t\t>\n\t\t\t<div className=\"sub--container\">\n\t\t\t\t<BodyCaption style={{ color: captionColor }}>{title}</BodyCaption>\n\t\t\t\t{tooltipContent && (\n\t\t\t\t\t<Tooltip body={tooltipContent}>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<Info\n\t\t\t\t\t\t\t\theight={14.67}\n\t\t\t\t\t\t\t\twidth={14.67}\n\t\t\t\t\t\t\t\tcolor={BASE_COLORS.grayscale[500]}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<TitleLarge style={{ color: titleColor }}>{primaryValue}</TitleLarge>\n\t\t\t{channelConfig && (\n\t\t\t\t<AnalyticsChipChannelFooter channelConfig={channelConfig} />\n\t\t\t)}\n\t\t\t{extraJSX}\n\t\t</AnalyticsChipContainer>\n\t);\n};\n"],"names":["AnalyticsChip","props","title","primaryValue","titleColor","captionColor","BASE_COLORS","backgroundColor","width","extraJSX","tooltipContent","channelConfig","style","jsxs","AnalyticsChipContainer","jsx","BodyCaption","Tooltip","Info","TitleLarge","AnalyticsChipChannelFooter"],"mappings":"0VASaA,EAAmDC,GAAU,CACzE,KAAM,CACL,MAAAC,EACA,aAAAC,EACA,WAAAC,EACA,aAAAC,EAAeC,EAAAA,YAAY,UAAU,GAAG,EACxC,gBAAAC,EAAkBD,EAAAA,YAAY,UAAU,EAAE,EAC1C,MAAAE,EAAQ,WACR,SAAAC,EACA,eAAAC,EACA,cAAAC,EACA,MAAAC,CAAA,EACGX,EACJ,OACCY,EAAAA,KAACC,EAAAA,uBAAA,CACA,MAAOF,GAAS,CAAA,EAChB,gBAAAL,EACA,MAAAC,EAEA,SAAA,CAAAK,EAAAA,KAAC,MAAA,CAAI,UAAU,iBACd,SAAA,CAAAE,MAACC,EAAAA,aAAY,MAAO,CAAE,MAAOX,CAAA,EAAiB,SAAAH,EAAM,EACnDQ,GACAK,EAAAA,IAACE,UAAA,CAAQ,KAAMP,EACd,eAAC,MAAA,CACA,SAAAK,EAAAA,IAACG,EAAAA,QAAA,CACA,OAAQ,MACR,MAAO,MACP,MAAOZ,EAAAA,YAAY,UAAU,GAAG,CAAA,CAAA,EAElC,CAAA,CACD,CAAA,EAEF,QACCa,EAAAA,WAAA,CAAW,MAAO,CAAE,MAAOf,CAAA,EAAe,SAAAD,EAAa,EACvDQ,GACAI,EAAAA,IAACK,6BAAA,CAA2B,cAAAT,CAAA,CAA8B,EAE1DF,CAAA,CAAA,CAAA,CAGJ"}
1	+ {"version":3,"file":"AnalyticsChip.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/AnalyticsChip.tsx"],"sourcesContent":["import Info from '@src/assets/icons/info.svg';\nimport React from 'react';\nimport { Tooltip } from '@src/components/tooltips';\nimport { BASE_COLORS } from '@src/constants/Theme';\nimport { BodyCaption, TitleLarge } from '../TypographyStyle';\nimport { AnalyticsChipInterface } from './AnalyticsChip.model';\nimport { AnalyticsChipChannelFooter } from './AnalyticsChipChannelFooter';\nimport { AnalyticsChipContainer } from './CommonStyles';\n\nexport const AnalyticsChip: React.FC<AnalyticsChipInterface> = (props) => {\n\tconst {\n\t\ttitle,\n\t\tprimaryValue,\n\t\ttitleColor,\n\t\tcaptionColor = BASE_COLORS.grayscale[700],\n\t\tbackgroundColor = BASE_COLORS.grayscale[50],\n\t\twidth = '224.67px',\n\t\textraJSX,\n\t\ttooltipContent,\n\t\tchannelConfig,\n\t\tstyle,\n\t} = props;\n\treturn (\n\t\t<AnalyticsChipContainer\n\t\t\tstyle={style ?? {}}\n\t\t\tbackgroundColor={backgroundColor}\n\t\t\twidth={width}\n\t\t>\n\t\t\t<div className=\"sub--container\">\n\t\t\t\t<BodyCaption style={{ color: captionColor }}>{title}</BodyCaption>\n\t\t\t\t{tooltipContent && (\n\t\t\t\t\t<Tooltip body={tooltipContent}>\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<Info\n\t\t\t\t\t\t\t\tdata-test=\"analytics-chip-tooltip-icon\"\n\t\t\t\t\t\t\t\theight={14.67}\n\t\t\t\t\t\t\t\twidth={14.67}\n\t\t\t\t\t\t\t\tcolor={BASE_COLORS.grayscale[500]}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<TitleLarge style={{ color: titleColor }}>{primaryValue}</TitleLarge>\n\t\t\t{channelConfig && (\n\t\t\t\t<AnalyticsChipChannelFooter channelConfig={channelConfig} />\n\t\t\t)}\n\t\t\t{extraJSX}\n\t\t</AnalyticsChipContainer>\n\t);\n};\n"],"names":["AnalyticsChip","props","title","primaryValue","titleColor","captionColor","BASE_COLORS","backgroundColor","width","extraJSX","tooltipContent","channelConfig","style","jsxs","AnalyticsChipContainer","jsx","BodyCaption","Tooltip","Info","TitleLarge","AnalyticsChipChannelFooter"],"mappings":"0VASaA,EAAmDC,GAAU,CACzE,KAAM,CACL,MAAAC,EACA,aAAAC,EACA,WAAAC,EACA,aAAAC,EAAeC,EAAAA,YAAY,UAAU,GAAG,EACxC,gBAAAC,EAAkBD,EAAAA,YAAY,UAAU,EAAE,EAC1C,MAAAE,EAAQ,WACR,SAAAC,EACA,eAAAC,EACA,cAAAC,EACA,MAAAC,CAAA,EACGX,EACJ,OACCY,EAAAA,KAACC,EAAAA,uBAAA,CACA,MAAOF,GAAS,CAAA,EAChB,gBAAAL,EACA,MAAAC,EAEA,SAAA,CAAAK,EAAAA,KAAC,MAAA,CAAI,UAAU,iBACd,SAAA,CAAAE,MAACC,EAAAA,aAAY,MAAO,CAAE,MAAOX,CAAA,EAAiB,SAAAH,EAAM,EACnDQ,GACAK,EAAAA,IAACE,UAAA,CAAQ,KAAMP,EACd,eAAC,MAAA,CACA,SAAAK,EAAAA,IAACG,EAAAA,QAAA,CACA,YAAU,8BACV,OAAQ,MACR,MAAO,MACP,MAAOZ,EAAAA,YAAY,UAAU,GAAG,CAAA,CAAA,EAElC,CAAA,CACD,CAAA,EAEF,QACCa,EAAAA,WAAA,CAAW,MAAO,CAAE,MAAOf,CAAA,EAAe,SAAAD,EAAa,EACvDQ,GACAI,EAAAA,IAACK,6BAAA,CAA2B,cAAAT,CAAA,CAA8B,EAE1DF,CAAA,CAAA,CAAA,CAGJ"}

package/dist/cjs/components/button/Button.styled.js CHANGED Viewed

@@ -105,6 +105,7 @@
 			cursor: not-allowed;
 			padding: 0;
 		${e.getLoadingBorder(t.buttonType,t.size,t.inverse)}
+		${e.getLoadingBackground(t.buttonType,t.size,t.inverse,t.buttonColor)}
 		.button-container {
 			display: flex;

package/dist/cjs/components/button/Button.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n}>`\n\tall: unset;\n\toutline: none;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8.83px;\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' \|\| props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'special'\n\t\t\t\t\t\t? `background-color: ${COLORS.background.brandLight};`\n\t\t\t\t\t\t: props.buttonType === 'secondaryGray'\n\t\t\t\t\t\t? `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\tprops.size !== 'xs' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t.icon-leading,\n\t\t\t.icon-component,\n\t\t\t.icon-trailing {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tline-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: 8.33px;\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","styled","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingButtonBackgroundCustom","getLoadingBackground","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxs","Fragment","jsx"],"mappings":"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"}
1	+ {"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n}>`\n\tall: unset;\n\toutline: none;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8.83px;\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' \|\| props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'special'\n\t\t\t\t\t\t? `background-color: ${COLORS.background.brandLight};`\n\t\t\t\t\t\t: props.buttonType === 'secondaryGray'\n\t\t\t\t\t\t? `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\tprops.size !== 'xs' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\t\t${getLoadingBackground(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.buttonColor,\n\t\t)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t.icon-leading,\n\t\t\t.icon-component,\n\t\t\t.icon-trailing {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tline-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: 8.33px;\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","styled","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingBackground","getLoadingButtonBackgroundCustom","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxs","Fragment","jsx"],"mappings":"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"}

package/dist/cjs/components/dashboard-review-popup/DashboardReviewPopUp.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("react"),j=require("../../assets/icons/cross.svg.js"),q=require("./components/FiveStar.js"),v=require("./components/Form.js"),w=require("./components/ZeroState.js"),n=require("./DashboardReviewPopUp.styled.js"),b=require("../dropShadow/DropShadow.js"),D=({onClose:i,onSubmit:o,quickAnswerOptions:a,titleMap:c,feedbackMap:d,fullStarSubmitText:u,onRatingChange:l,initialText:S,fiveStar:h})=>{const[t,p]=x.useState(0);function r(s){p(s),l?.(s)}return e.jsx(b.DropShadow,{level:"z2",position:"down",children:e.jsxs(n.Container,{children:[e.jsx(n.CrossIconHolder,{onClick:i,children:e.jsx(j.default,{width:24,height:24})}),t===0?e.jsx(w.ZeroState,{handleStarSelection:r,initialText:S}):t===5?e.jsx(q.FiveStar,{fullStarSubmitText:u,onSubmit:o,handleStarSelection:r,subtext:h?.subText}):e.jsx(v.Form,{titleMap:c,feedbackMap:d,stars:t,onStarChange:r,onSubmit:o,quickAnswerOptions:a})]})})};exports.DashboardReviewPopUp=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),x=require("react"),j=require("../../assets/icons/cross.svg.js"),q=require("./components/FiveStar.js"),v=require("./components/Form.js"),w=require("./components/ZeroState.js"),i=require("./DashboardReviewPopUp.styled.js"),b=require("../dropShadow/DropShadow.js"),D=({onClose:a,onSubmit:o,quickAnswerOptions:n,titleMap:c,feedbackMap:d,fullStarSubmitText:u,onRatingChange:l,initialText:h,fiveStar:S})=>{const[t,p]=x.useState(0);function r(s){p(s),l?.(s)}return e.jsx(b.DropShadow,{level:"z2",position:"down",children:e.jsxs(i.Container,{children:[e.jsx(i.CrossIconHolder,{onClick:a,children:e.jsx(j.default,{"data-testid":"dashboard-review-popup-close",width:24,height:24})}),t===0?e.jsx(w.ZeroState,{handleStarSelection:r,initialText:h}):t===5?e.jsx(q.FiveStar,{fullStarSubmitText:u,onSubmit:o,handleStarSelection:r,subtext:S?.subText}):e.jsx(v.Form,{titleMap:c,feedbackMap:d,stars:t,onStarChange:r,onSubmit:o,quickAnswerOptions:n})]})})};exports.DashboardReviewPopUp=D;
 //# sourceMappingURL=DashboardReviewPopUp.js.map

package/dist/cjs/components/dashboard-review-popup/DashboardReviewPopUp.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DashboardReviewPopUp.js","sources":["../../../../src/components/dashboard-review-popup/DashboardReviewPopUp.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { DropShadow } from '../dropShadow';\nimport { FiveStar } from './components/FiveStar';\nimport { Form } from './components/Form';\nimport { ZeroState } from './components/ZeroState';\nimport { Container, CrossIconHolder } from './DashboardReviewPopUp.styled';\n\nexport const DashboardReviewPopUp: React.FC<{\n\tonSubmit: (\n\t\tstars: number,\n\t\tquickAnswers?: string[],\n\t\treviewText?: string,\n\t) => void;\n\tonClose: () => void;\n\tquickAnswerOptions?: string[];\n\ttitleMap?: { [key: number]: string };\n\tfeedbackMap?: { [key: number]: string };\n\tfullStarSubmitText: string;\n\tonRatingChange?: (stars: number) => void;\n\tinitialText?: string;\n\tfiveStar?: { subText: string };\n}> = ({\n\tonClose,\n\tonSubmit,\n\tquickAnswerOptions,\n\ttitleMap,\n\tfeedbackMap,\n\tfullStarSubmitText,\n\tonRatingChange,\n\tinitialText,\n\tfiveStar,\n}) => {\n\tconst [starsSelected, setStartsSelected] = useState<number>(0);\n\n\tfunction handleStarSelection(stars: number) {\n\t\tsetStartsSelected(stars);\n\t\tonRatingChange?.(stars);\n\t}\n\n\treturn (\n\t\t<DropShadow level={'z2'} position={'down'}>\n\t\t\t<Container>\n\t\t\t\t<CrossIconHolder onClick={onClose}>\n\t\t\t\t\t<CrossIcon ~~width~~={24} ~~height~~={24} />\n\t\t\t\t</CrossIconHolder>\n\t\t\t\t{starsSelected === 0 ? (\n\t\t\t\t\t<ZeroState\n\t\t\t\t\t\thandleStarSelection={handleStarSelection}\n\t\t\t\t\t\tinitialText={initialText}\n\t\t\t\t\t/>\n\t\t\t\t) : starsSelected === 5 ? (\n\t\t\t\t\t<FiveStar\n\t\t\t\t\t\tfullStarSubmitText={fullStarSubmitText}\n\t\t\t\t\t\tonSubmit={onSubmit}\n\t\t\t\t\t\thandleStarSelection={handleStarSelection}\n\t\t\t\t\t\tsubtext={fiveStar?.subText}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<Form\n\t\t\t\t\t\ttitleMap={titleMap}\n\t\t\t\t\t\tfeedbackMap={feedbackMap}\n\t\t\t\t\t\tstars={starsSelected}\n\t\t\t\t\t\tonStarChange={handleStarSelection}\n\t\t\t\t\t\tonSubmit={onSubmit}\n\t\t\t\t\t\tquickAnswerOptions={quickAnswerOptions}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Container>\n\t\t</DropShadow>\n\t);\n};\n"],"names":["DashboardReviewPopUp","onClose","onSubmit","quickAnswerOptions","titleMap","feedbackMap","fullStarSubmitText","onRatingChange","initialText","fiveStar","starsSelected","setStartsSelected","useState","handleStarSelection","stars","DropShadow","Container","jsx","CrossIconHolder","CrossIcon","ZeroState","FiveStar","Form"],"mappings":"2XAQaA,EAcR,CAAC,CACL,QAAAC,EACA,SAAAC,EACA,mBAAAC,EACA,SAAAC,EACA,YAAAC,EACA,mBAAAC,EACA,eAAAC,EACA,YAAAC,EACA,SAAAC,CACD,IAAM,CACL,KAAM,CAACC,EAAeC,CAAiB,EAAIC,EAAAA,SAAiB,CAAC,EAE7D,SAASC,EAAoBC,EAAe,CAC3CH,EAAkBG,CAAK,EACvBP,IAAiBO,CAAK,CACvB,CAEA,aACEC,EAAAA,WAAA,CAAW,MAAO,KAAM,SAAU,OAClC,gBAACC,EAAAA,UAAA,CACA,SAAA,CAAAC,EAAAA,IAACC,EAAAA,gBAAA,CAAgB,QAASjB,EACzB,SAAAgB,EAAAA,IAACE,~~WAAU~~,MAAO,~~GAAI~~,OAAQ,EAAA,~~CAAI,~~CAAA,~~CACnC~~,EACCT,IAAkB,EAClBO,EAAAA,IAACG,EAAAA,UAAA,CACA,oBAAAP,EACA,YAAAL,CAAA,CAAA,EAEEE,IAAkB,EACrBO,EAAAA,IAACI,EAAAA,SAAA,CACA,mBAAAf,EACA,SAAAJ,EACA,oBAAAW,EACA,QAASJ,GAAU,OAAA,CAAA,EAGpBQ,EAAAA,IAACK,EAAAA,KAAA,CACA,SAAAlB,EACA,YAAAC,EACA,MAAOK,EACP,aAAcG,EACd,SAAAX,EACA,mBAAAC,CAAA,CAAA,CACD,CAAA,CAEF,CAAA,CACD,CAEF"}
1	+ {"version":3,"file":"DashboardReviewPopUp.js","sources":["../../../../src/components/dashboard-review-popup/DashboardReviewPopUp.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport { DropShadow } from '../dropShadow';\nimport { FiveStar } from './components/FiveStar';\nimport { Form } from './components/Form';\nimport { ZeroState } from './components/ZeroState';\nimport { Container, CrossIconHolder } from './DashboardReviewPopUp.styled';\n\nexport const DashboardReviewPopUp: React.FC<{\n\tonSubmit: (\n\t\tstars: number,\n\t\tquickAnswers?: string[],\n\t\treviewText?: string,\n\t) => void;\n\tonClose: () => void;\n\tquickAnswerOptions?: string[];\n\ttitleMap?: { [key: number]: string };\n\tfeedbackMap?: { [key: number]: string };\n\tfullStarSubmitText: string;\n\tonRatingChange?: (stars: number) => void;\n\tinitialText?: string;\n\tfiveStar?: { subText: string };\n}> = ({\n\tonClose,\n\tonSubmit,\n\tquickAnswerOptions,\n\ttitleMap,\n\tfeedbackMap,\n\tfullStarSubmitText,\n\tonRatingChange,\n\tinitialText,\n\tfiveStar,\n}) => {\n\tconst [starsSelected, setStartsSelected] = useState<number>(0);\n\n\tfunction handleStarSelection(stars: number) {\n\t\tsetStartsSelected(stars);\n\t\tonRatingChange?.(stars);\n\t}\n\n\treturn (\n\t\t<DropShadow level={'z2'} position={'down'}>\n\t\t\t<Container>\n\t\t\t\t<CrossIconHolder onClick={onClose}>\n\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\tdata-testid=\"dashboard-review-popup-close\"\n\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\theight={24}\n\t\t\t\t\t/>\n\t\t\t\t</CrossIconHolder>\n\t\t\t\t{starsSelected === 0 ? (\n\t\t\t\t\t<ZeroState\n\t\t\t\t\t\thandleStarSelection={handleStarSelection}\n\t\t\t\t\t\tinitialText={initialText}\n\t\t\t\t\t/>\n\t\t\t\t) : starsSelected === 5 ? (\n\t\t\t\t\t<FiveStar\n\t\t\t\t\t\tfullStarSubmitText={fullStarSubmitText}\n\t\t\t\t\t\tonSubmit={onSubmit}\n\t\t\t\t\t\thandleStarSelection={handleStarSelection}\n\t\t\t\t\t\tsubtext={fiveStar?.subText}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<Form\n\t\t\t\t\t\ttitleMap={titleMap}\n\t\t\t\t\t\tfeedbackMap={feedbackMap}\n\t\t\t\t\t\tstars={starsSelected}\n\t\t\t\t\t\tonStarChange={handleStarSelection}\n\t\t\t\t\t\tonSubmit={onSubmit}\n\t\t\t\t\t\tquickAnswerOptions={quickAnswerOptions}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</Container>\n\t\t</DropShadow>\n\t);\n};\n"],"names":["DashboardReviewPopUp","onClose","onSubmit","quickAnswerOptions","titleMap","feedbackMap","fullStarSubmitText","onRatingChange","initialText","fiveStar","starsSelected","setStartsSelected","useState","handleStarSelection","stars","DropShadow","Container","jsx","CrossIconHolder","CrossIcon","ZeroState","FiveStar","Form"],"mappings":"2XAQaA,EAcR,CAAC,CACL,QAAAC,EACA,SAAAC,EACA,mBAAAC,EACA,SAAAC,EACA,YAAAC,EACA,mBAAAC,EACA,eAAAC,EACA,YAAAC,EACA,SAAAC,CACD,IAAM,CACL,KAAM,CAACC,EAAeC,CAAiB,EAAIC,EAAAA,SAAiB,CAAC,EAE7D,SAASC,EAAoBC,EAAe,CAC3CH,EAAkBG,CAAK,EACvBP,IAAiBO,CAAK,CACvB,CAEA,aACEC,EAAAA,WAAA,CAAW,MAAO,KAAM,SAAU,OAClC,gBAACC,EAAAA,UAAA,CACA,SAAA,CAAAC,EAAAA,IAACC,EAAAA,gBAAA,CAAgB,QAASjB,EACzB,SAAAgB,EAAAA,IAACE,EAAAA,QAAA,CACA,cAAY,+BACZ,MAAO,GACP,OAAQ,EAAA,CAAA,EAEV,EACCT,IAAkB,EAClBO,EAAAA,IAACG,EAAAA,UAAA,CACA,oBAAAP,EACA,YAAAL,CAAA,CAAA,EAEEE,IAAkB,EACrBO,EAAAA,IAACI,EAAAA,SAAA,CACA,mBAAAf,EACA,SAAAJ,EACA,oBAAAW,EACA,QAASJ,GAAU,OAAA,CAAA,EAGpBQ,EAAAA,IAACK,EAAAA,KAAA,CACA,SAAAlB,EACA,YAAAC,EACA,MAAOK,EACP,aAAcG,EACd,SAAAX,EACA,mBAAAC,CAAA,CAAA,CACD,CAAA,CAEF,CAAA,CACD,CAEF"}

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"),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:f=!1,onDropdownVisbilityChange:A,...e})=>{const[d,F]=r.useState(!1),[m,y]=r.useState(!1),n=j??"default",V=r.useRef(),[a,u]=r.useState(l??[]);function p(t){Array.isArray(t)?u([...t]):u([t]),b?.(t)}r.useEffect(()=>{const t=[];e?.options?.forEach(h=>{h.options?h.options.forEach(g=>{g.selected&&t.push({...g,label:g.label})}):h.selected&&t.push(h)}),u([...t])},[e.options]),r.useEffect(()=>{l&&u([...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"?d||m?s.COLORS.surface.hovered:s.COLORS.surface.standard:f&&o!==void 0?s.BASE_COLORS.positive[100]:m&&!d?s.COLORS.background.inactive:s.COLORS.surface.standard,transition:"background-color 0.3s ease",...W},input:{minHeight:"100%",maxWidth:"100%",color:f&&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:d?"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:f?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:d,sizeToUse:n,containerStyle:{width:e.width??"100%",cursor:"pointer"},showLabelsOnMoreHover:k})]})})})})};R.displayName="Dropdown";exports.Dropdown=R;
 //# 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 { 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: // The hover wrapper also contains the popover, so while the\n\t\t\t\t\t\t\t\t// dropdown is open, hovering an option would grey the input\n\t\t\t\t\t\t\t\t// — only show hover feedback while closed.\n\t\t\t\t\t\t\t\tisHovering && !isDropdownOpened\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":"kbAsCA,SAASA,GAAO,CAEhB,CAEO,MAAMC,EAAoC,CAAC,CACjD,YAAAC,EACA,KAAAC,EACA,SAAAC,EACA,eAAAC,EACA,SAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,4BAAAC,EAA8B,GAC9B,WAAAC,EAAa,CAAA,EACb,UAAAC,EAAY,UACZ,aAAAC,EACA,cAAAC,EACA,6BAAAC,EAA+B,GAC/B,4BAAAC,EAA8B,GAC9B,sBAAAC,EAAwB,GACxB,MAAAC,EACA,aAAAC,EAAe,GACf,0BAAAC,EACA,GAAGC,CACJ,IAAM,CACL,KAAM,CAACC,EAAkBC,CAAmB,EAAIC,EAAAA,SAAS,EAAK,EACxD,CAACC,EAAYC,CAAa,EAAIF,EAAAA,SAAS,EAAK,EAC5CG,EAAYvB,GAAQ,UACpBwB,EAAwBC,EAAAA,OAAA,EAGxB,CAACC,EAAgBC,CAAiB,EAAIP,EAAAA,SAC3ClB,GAAkB,CAAA,CAAC,EAEpB,SAAS0B,EAAgBC,EAA2C,CAC/D,MAAM,QAAQA,CAAM,EACvBF,EAAkB,CAAC,GAAGE,CAAM,CAAC,EAE7BF,EAAkB,CAAKE,CAAO,CAAC,EAEhC5B,IAAW4B,CAAM,CAClB,CAEAC,EAAAA,UAAU,IAAM,CACf,MAAMC,EAAqC,CAAA,EAC3Cd,GAAmB,SAAS,QAASY,GAAW,CAC1CA,EAAyB,QAC5BA,EAAyB,QAAQ,QAASG,GAAO,CAC7CA,EAAG,UACND,EAAmB,KAAK,CACvB,GAAGC,EACH,MAAOA,EAAG,KAAA,CACV,CAEH,CAAC,EAEIH,EAAwB,UAC5BE,EAAmB,KAAKF,CAAsB,CAGjD,CAAC,EAEDF,EAAkB,CAAC,GAAGI,CAAkB,CAAC,CAC1C,EAAG,CAACd,EAAkB,OAAO,CAAC,EAE9Ba,EAAAA,UAAU,IAAM,CACX5B,GACHyB,EAAkB,CAAC,GAAGzB,CAAc,CAAC,CAEvC,EAAG,CAACA,CAAc,CAAC,EAEnB,MAAM+B,EAAUC,EAAAA,yBAAyBR,CAAc,EACjDS,EAAc7B,EACjBP,EACAkC,GAAWlC,GAAe,mBAEvBqC,EAAqBnB,EAAkB,YAGvCoB,EAAaD,GAAsBnB,EAAkB,OAAS,OAG9DqB,EAAgBrB,EAAkB,eAAiBoB,EAEzD,OACCE,MAAAC,EAAAA,SAAA,CACC,SAAAD,EAAAA,IAACE,EAAAA,kBAAkB,SAAlB,CACA,MAAO,CACN,aAAc,CACb,OAAQpC,IAELkB,IAAc,UACd,GACAA,IAAc,QACd,GACA,IACH,MAAOc,EACP,GAAID,EAAqB,CAAE,SAAUA,CAAA,EAAuB,CAAA,EAC5D,OAAQ,EACR,OAAQ,UACR,QAASb,IAAc,UAAY,UAAY,UAC/C,gBACCN,EAAkB,UAAY,MAC3BC,GAAoBG,EACnBqB,EAAAA,OAAO,QAAQ,QACfA,EAAAA,OAAO,QAAQ,SAChB3B,GAAgBD,IAAU,OAC1B6B,EAAAA,YAAY,SAAS,GAAK,EAI5BtB,GAAc,CAACH,EACbwB,EAAAA,OAAO,WAAW,SAClBA,EAAAA,OAAO,QAAQ,SACnB,WAAY,6BACZ,GAAGnC,CAAA,EAEJ,MAAO,CACN,UAAW,OACX,SAAU,OACV,MACCQ,GAAgBD,IAAU,OACvB4B,EAAAA,OAAO,QAAQ,SACf,SAAA,CACL,EAGD,SAAAH,EAAAA,IAAC,MAAA,CACA,aAAc,IAAMjB,EAAc,EAAI,EACtC,aAAc,IAAMA,EAAc,EAAK,EACvC,MACCL,EAAkB,MACf,CAAE,MAAOA,EAAkB,OAC3B,OAGJ,SAAA2B,EAAAA,KAACC,EAAAA,gBAAA,CACA,YAAW5B,EAAkB,WAAW,EACxC,IACCO,EAID,SAAUI,EACV,SAAAzB,EACC,GAAGc,EACJ,0BAA4B6B,GAAW,CAGtC3B,EAAoB2B,CAAM,EAC1B9B,IAA4B8B,CAAM,CACnC,EACA,MAAOR,EAEN,SAAA,CAAA9B,GAAa,WACb+B,EAAAA,IAACQ,EAAAA,MAAA,CACA,QAAS9B,EAAkB,QAC3B,YAAAb,EACA,MAAOD,EAAW,WAAa,OAC/B,MAAOW,IAAU,OAAYqB,EAAcrB,EAC3C,aAAcG,EAAkB,MAChC,QAASM,EACT,YAAaxB,GAAe,mBAC5B,aAAcF,EACd,SACCc,GAAgCe,EAAe,CAAC,GAAG,YAChD,CACA,KAAM,IAAMa,EAAAA,IAAAC,WAAA,CAAG,SAAAd,EAAe,CAAC,GAAG,WAAA,CAAY,CAAA,EAE9C,OAEJ,UAAW,CACV,KAAM,IACLkB,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,MAAA,EAGT,SAAA,CAAAhC,GACCc,EAAe,CAAC,GAAoB,aACtCa,EAAAA,IAACS,EAAAA,QAAA,CACA,MAAO,CACN,UAAW9B,EACR,iBACA,cAAA,EAEJ,QAASrB,EACT,MACC0B,IAAc,UACX,GACAA,IAAc,QACd,GACA,GAEJ,OACCA,IAAc,UACX,GACAA,IAAc,QACd,GACA,GAEJ,MACCR,EACG2B,EAAAA,OAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,OAAA,CAAA,CAEpB,CAAA,CAAA,CACD,EAGF,aAAchC,GAAiB,EAAA,CAAA,EAGhCF,GAAa,QACb+B,EAAAA,IAACU,EAAAA,QAAA,CACA,YAAalD,GAAe,iBAC5B,MAAO2B,EACP,aAAewB,GAAS,CACvBzC,IAAeyC,CAAI,CACpB,EACA,aAAcjC,EAAkB,MAChC,iBAAAC,EACA,UAAAK,EACA,eAAgB,CACf,MAAON,EAAkB,OAAS,OAClC,OAAQ,SAAA,EAET,sBAAAJ,CAAA,CAAA,CACD,CAAA,CAAA,CAEF,CAAA,CACD,CAAA,EAEF,CAEF,EAEAf,EAAS,YAAc"}

package/dist/cjs/components/input/Input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),Me=require("../../assets/icons/info.svg.js"),r=require("react"),y=require("./Input-helper.js"),te=require("../TypographyStyle.js"),ne=require("../../constants/Theme.js"),Ee=require("../../assets/icons/errorInfo.svg.js"),Le=require("./context/InputStyleProvider.js"),l=require("./Input.styled.js"),ie=require("../button/Button.js"),we=require("../tooltips/Tooltip.js"),re=r.forwardRef((e,le)=>{const{placeholder:w,leftIcon:H,rightIcon:R,labelText:v,maxCharLimit:a,isRequired:_,hintText:k,type:c,state:T,validate:se,variant:o,button:h,suffixText:p,prefixText:A,onChangeText:O,value:x,noErrorHint:ae,reset:B,rangeValidation:oe,noKeyDownChange:ce,version:ue,noMaxCharCheck:F,labelElement:q,autoGrow:j,minHeight:b,maxHeight:he,labelTextBold:de,truncateText:fe,maxCharLimitPosition:D,maxCharStyle:P,hightlightInputColor:xe,onKeyDownEvent:z,hideInputHeader:ge,hideBorder:me,inputWrapperStyles:ye,minCharsToTrigger:K,maxCharAlignment:Ie,isDisabled:N=!1,allowUnsafeInput:Ce,leftIconStyle:ve}={maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0,maxCharAlignment:!1,...e},V=H?.icon,W=R?.icon,[S,I]=r.useState(!1),[Te,M]=r.useState(!1),[d,X]=r.useState(),U=o==="x-small"?"12px":o==="small"?"18px":"22px",C=r.useContext(Le.InputStyleContext),[G,E]=r.useState(""),je=r.useRef(null),s=le??je;r.useEffect(()=>{E(x||""),!x&&j&&(s.current.style.height=b||"48px")},[x]),r.useEffect(()=>{s.current&&e.onReferenceInit?.(s.current)},[s]),r.useEffect(()=>{const t=s.current;if(t&&["phonenumber","zip","number"].includes(c))return t.addEventListener("wheel",J,{passive:!1}),()=>{t.removeEventListener("wheel",J)}},[]),r.useEffect(()=>{B&&E("")},[B]),r.useEffect(()=>{M(!!e.isActive),e.isActive&&s.current?.focus()},[e.isActive]),r.useEffect(()=>{X(e.errorMessage)},[e.errorMessage]),r.useEffect(()=>{I(!1),(e.state==="invalid"||d||e.state==="disabled-invalid")&&I(!0),e.state==="active"&&s.current?.focus()},[e.state,d]),r.useEffect(()=>{I(!!d||e.state==="invalid")},[d,e.state]);const f=(t,...i)=>{y.isFunction(t)&&t(...i)},Y=()=>c==="zip"?6:2e3,$=t=>{const i=a!==0?a:Y(),g=[8],m=K,u=t.target.value;z&&(!u.length||u.length>=m)&&z(t),!ce&&(!u.length||u.length>=m)&&O(x||"",t),!F&&!g.includes(t.which)&&i>0&&u.length>=i&&t.preventDefault()},J=t=>{t.preventDefault()},Q=t=>{let i=t.target.value;const g=a!==0?a+1:Y(),m=K;if(!Ce&&y.shouldSanitizeForType(c)&&(i=y.sanitizeUnsafeInput(i)),!F&&g>0&&i.length>=g&&(i=i.substring(0,g-1)),e.textControl||E(i||""),m&&i&&i.length<m)return;O(i,t),j&&(s.current.style.height=`${s.current.scrollHeight}px`,i||(s.current.style.height=b||"48px"));const u=se||y.validateInput;if(!u||!y.isFunction(u))return;const[be,Se]=u(i,c,oe);I(!be),X(e.errorMessage?e.errorMessage:Se)},Z=t=>{e.skipFocus||M(!0),f(e.onFocus?.(t))},ee=t=>{e.skipFocus||M(!1),f(e.onBlur?.(t))},L=()=>n.jsxs(n.Fragment,{children:[c!=="multiline"&&n.jsx("input",{className:fe?"truncate-class":"","data-test":e["data-test"],id:e.id,style:C?.input??{},ref:s,disabled:N,type:["phonenumber","zip","number"].includes(c)?"number":c,value:G,onFocus:t=>Z(t),onBlur:t=>ee(t),placeholder:w||"Enter here",onChange:Q,onClick:t=>f(e.onClick),onKeyDown:t=>$(t)}),c==="multiline"&&n.jsx("textarea",{"data-test":e["data-test"],value:G,ref:s,onFocus:t=>Z(t),onBlur:t=>ee(t),onClick:t=>f(e.onClick),disabled:N,placeholder:w||"Enter here",onChange:Q,onKeyDown:t=>$(t),maxLength:a>0?a:void 0})]});return n.jsxs(l.RootContainer,{width:e.width,height:e.height,state:T,type:c,style:C?.RootContainer??{},children:[n.jsxs("div",{className:"flex-align-center",children:[!ae&&(!!k||!!d)&&n.jsxs(l.InputFooter,{invalid:!!d,children:[!!d&&n.jsx(Ee.default,{width:16,height:16}),d||k]}),a>0&&D==="BOTTOM"&&n.jsxs(l.MaxCharStyle,{position:"BOTTOM",style:P,children:[(x??"").toString()?.length??0,"/",a]})]}),n.jsxs(l.InputWrapper,{variant:o,state:T,width:e.width,isActive:T==="active"||Te,isInvalid:S,style:C?.InputWrapper??ye??{},version:ue,height:e.height,hightlightInputColor:xe,hideBorder:me,children:[!!V&&n.jsx(l.IconHolder,{variant:o,iconSize:U,onClick:()=>f(H?.callback),isLeft:!0,style:{...C?.IconHolder??{},...ve},children:n.jsx(V,{})}),!!A&&n.jsx(l.PrefixHolder,{variant:o,children:A}),o==="default"&&n.jsx(l.InputContainer,{height:e.height,type:e.type,minHeight:b,maxHeight:he,autoGrow:j,children:L()}),o==="small"&&n.jsx(l.InputContainerSmall,{height:e.height,type:e.type,children:L()}),o==="x-small"&&n.jsx(l.InputContainerXSmall,{height:e.height,type:e.type,children:L()}),!!W&&n.jsx(l.IconHolder,{variant:o,iconSize:U,onClick:()=>f(R?.callback),isLeft:!1,children:n.jsx(W,{})}),!!p&&n.jsx(l.SuffixHolder,{variant:o,children:p}),h&&h.text&&n.jsx(ie.Button,{buttonText:h.text,buttonType:h.buttonType,onClick:()=>f(h?.onClick)}),h&&h.buttonProps&&n.jsx(ie.Button,{...h.buttonProps})]}),!ge&&(!!v||!!a)&&n.jsxs(l.InputHeader,{invalid:S,maxCharAlignment:Ie,children:[q&&q,n.jsxs("div",{className:"label__container",children:[de?n.jsxs(te.TitleSmall,{children:[v,_?n.jsx("span",{children:"*"}):""]}):n.jsxs(te.BodySecondary,{children:[v,_?n.jsx("span",{children:"*"}):""]}),e.tooltipText&&n.jsx(we.Tooltip,{body:e.tooltipText,placement:"top",children:n.jsx("span",{children:n.jsx(Me.default,{style:{marginTop:-3},width:18,height:18,color:S?ne.COLORS.content.negative:ne.COLORS.content.primary})})})]}),a>0&&D==="TOP"&&n.jsxs(l.MaxCharStyle,{style:P,children:[(x??"").toString()?.length??0,"/",a]})]})]})});re.displayName="Input";exports.Input=re;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),Me=require("../../assets/icons/info.svg.js"),r=require("react"),y=require("./Input-helper.js"),te=require("../TypographyStyle.js"),ne=require("../../constants/Theme.js"),Ee=require("../../assets/icons/errorInfo.svg.js"),Le=require("./context/InputStyleProvider.js"),l=require("./Input.styled.js"),ie=require("../button/Button.js"),we=require("../tooltips/Tooltip.js"),re=r.forwardRef((e,le)=>{const{placeholder:H,leftIcon:R,rightIcon:v,labelText:T,maxCharLimit:a,isRequired:_,hintText:k,type:c,state:j,validate:se,variant:o,button:h,suffixText:p,prefixText:A,onChangeText:O,value:x,noErrorHint:ae,reset:B,rangeValidation:oe,noKeyDownChange:ce,version:ue,noMaxCharCheck:F,labelElement:q,autoGrow:b,minHeight:S,maxHeight:he,labelTextBold:de,truncateText:fe,maxCharLimitPosition:D,maxCharStyle:P,hightlightInputColor:xe,onKeyDownEvent:z,hideInputHeader:ge,hideBorder:me,inputWrapperStyles:ye,minCharsToTrigger:K,maxCharAlignment:Ie,isDisabled:N=!1,allowUnsafeInput:Ce,leftIconStyle:ve}={maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0,maxCharAlignment:!1,...e},V=R?.icon,W=v?.icon,[M,I]=r.useState(!1),[Te,E]=r.useState(!1),[d,X]=r.useState(),U=o==="x-small"?"12px":o==="small"?"18px":"22px",C=r.useContext(Le.InputStyleContext),[G,L]=r.useState(""),je=r.useRef(null),s=le??je;r.useEffect(()=>{L(x||""),!x&&b&&(s.current.style.height=S||"48px")},[x]),r.useEffect(()=>{s.current&&e.onReferenceInit?.(s.current)},[s]),r.useEffect(()=>{const t=s.current;if(t&&["phonenumber","zip","number"].includes(c))return t.addEventListener("wheel",J,{passive:!1}),()=>{t.removeEventListener("wheel",J)}},[]),r.useEffect(()=>{B&&L("")},[B]),r.useEffect(()=>{E(!!e.isActive),e.isActive&&s.current?.focus()},[e.isActive]),r.useEffect(()=>{X(e.errorMessage)},[e.errorMessage]),r.useEffect(()=>{I(!1),(e.state==="invalid"||d||e.state==="disabled-invalid")&&I(!0),e.state==="active"&&s.current?.focus()},[e.state,d]),r.useEffect(()=>{I(!!d||e.state==="invalid")},[d,e.state]);const f=(t,...i)=>{y.isFunction(t)&&t(...i)},Y=()=>c==="zip"?6:2e3,$=t=>{const i=a!==0?a:Y(),g=[8],m=K,u=t.target.value;z&&(!u.length||u.length>=m)&&z(t),!ce&&(!u.length||u.length>=m)&&O(x||"",t),!F&&!g.includes(t.which)&&i>0&&u.length>=i&&t.preventDefault()},J=t=>{t.preventDefault()},Q=t=>{let i=t.target.value;const g=a!==0?a+1:Y(),m=K;if(!Ce&&y.shouldSanitizeForType(c)&&(i=y.sanitizeUnsafeInput(i)),!F&&g>0&&i.length>=g&&(i=i.substring(0,g-1)),e.textControl||L(i||""),m&&i&&i.length<m)return;O(i,t),b&&(s.current.style.height=`${s.current.scrollHeight}px`,i||(s.current.style.height=S||"48px"));const u=se||y.validateInput;if(!u||!y.isFunction(u))return;const[be,Se]=u(i,c,oe);I(!be),X(e.errorMessage?e.errorMessage:Se)},Z=t=>{e.skipFocus||E(!0),f(e.onFocus?.(t))},ee=t=>{e.skipFocus||E(!1),f(e.onBlur?.(t))},w=()=>n.jsxs(n.Fragment,{children:[c!=="multiline"&&n.jsx("input",{className:fe?"truncate-class":"","data-test":e["data-test"],id:e.id,style:C?.input??{},ref:s,disabled:N,type:["phonenumber","zip","number"].includes(c)?"number":c,value:G,onFocus:t=>Z(t),onBlur:t=>ee(t),placeholder:H||"Enter here",onChange:Q,onClick:t=>f(e.onClick),onKeyDown:t=>$(t)}),c==="multiline"&&n.jsx("textarea",{"data-test":e["data-test"],value:G,ref:s,onFocus:t=>Z(t),onBlur:t=>ee(t),onClick:t=>f(e.onClick),disabled:N,placeholder:H||"Enter here",onChange:Q,onKeyDown:t=>$(t),maxLength:a>0?a:void 0})]});return n.jsxs(l.RootContainer,{width:e.width,height:e.height,state:j,type:c,style:C?.RootContainer??{},children:[n.jsxs("div",{className:"flex-align-center",children:[!ae&&(!!k||!!d)&&n.jsxs(l.InputFooter,{invalid:!!d,children:[!!d&&n.jsx(Ee.default,{width:16,height:16}),d||k]}),a>0&&D==="BOTTOM"&&n.jsxs(l.MaxCharStyle,{position:"BOTTOM",style:P,children:[(x??"").toString()?.length??0,"/",a]})]}),n.jsxs(l.InputWrapper,{variant:o,state:j,width:e.width,isActive:j==="active"||Te,isInvalid:M,style:C?.InputWrapper??ye??{},version:ue,height:e.height,hightlightInputColor:xe,hideBorder:me,children:[!!V&&n.jsx(l.IconHolder,{variant:o,iconSize:U,onClick:()=>f(R?.callback),isLeft:!0,style:{...C?.IconHolder??{},...ve},children:n.jsx(V,{})}),!!A&&n.jsx(l.PrefixHolder,{variant:o,children:A}),o==="default"&&n.jsx(l.InputContainer,{height:e.height,type:e.type,minHeight:S,maxHeight:he,autoGrow:b,children:w()}),o==="small"&&n.jsx(l.InputContainerSmall,{height:e.height,type:e.type,children:w()}),o==="x-small"&&n.jsx(l.InputContainerXSmall,{height:e.height,type:e.type,children:w()}),!!W&&n.jsx(l.IconHolder,{variant:o,iconSize:U,onClick:()=>f(v?.callback),isLeft:!1,"data-test":v?.["data-test"],children:n.jsx(W,{})}),!!p&&n.jsx(l.SuffixHolder,{variant:o,children:p}),h&&h.text&&n.jsx(ie.Button,{buttonText:h.text,buttonType:h.buttonType,onClick:()=>f(h?.onClick)}),h&&h.buttonProps&&n.jsx(ie.Button,{...h.buttonProps})]}),!ge&&(!!T||!!a)&&n.jsxs(l.InputHeader,{invalid:M,maxCharAlignment:Ie,children:[q&&q,n.jsxs("div",{className:"label__container",children:[de?n.jsxs(te.TitleSmall,{children:[T,_?n.jsx("span",{children:"*"}):""]}):n.jsxs(te.BodySecondary,{children:[T,_?n.jsx("span",{children:"*"}):""]}),e.tooltipText&&n.jsx(we.Tooltip,{body:e.tooltipText,placement:"top",children:n.jsx("span",{children:n.jsx(Me.default,{style:{marginTop:-3},width:18,height:18,color:M?ne.COLORS.content.negative:ne.COLORS.content.primary})})})]}),a>0&&D==="TOP"&&n.jsxs(l.MaxCharStyle,{style:P,children:[(x??"").toString()?.length??0,"/",a]})]})]})});re.displayName="Input";exports.Input=re;
 //# sourceMappingURL=Input.js.map