npm - @bikdotai/bik-component-library - Versions diffs - 0.0.836 → 0.0.837-beta.0 - Mend

@bikdotai/bik-component-library 0.0.836 → 0.0.837-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 (104) hide show

package/dist/esm/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":"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"}
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/esm/components/agent-listing/AgentTable.d.ts CHANGED Viewed

@@ -7,5 +7,7 @@ interface AgentTableProps {
     onDeleteAgent?: (agent: AgentListItem) => void;
     onRowClick?: (agent: AgentListItem) => void;
 }
+/** Column header row — shared with the loading shimmer so the two can't drift. */
+export declare const AgentTableHeader: React.FC;
 export declare const AgentTable: React.FC<AgentTableProps>;
 export {};

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

@@ -3,33 +3,34 @@ import { TitleSmall as h } from "../TypographyStyle.js";
 import { COLORS as m } from "../../constants/Theme.js";
 import { TableCard as g, TableScroll as p, HeaderGridRow as s, HeaderCell as e } from "./AgentListing.styled.js";
 import { AgentTableRow as T } from "./AgentTableRow.js";
-const i = ({ children: l }) => /* @__PURE__ */ r(h, { color: m.content.primary, children: l }), C = ({
-  agents: l,
+const l = ({ children: i }) => /* @__PURE__ */ r(h, { color: m.content.primary, children: i }), b = () => /* @__PURE__ */ c(s, { children: [
+  /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(l, { children: "Agent name" }) }),
+  /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(l, { children: "Trigger" }) }),
+  /* @__PURE__ */ r(e, { align: "right", children: /* @__PURE__ */ r(l, { children: "Trigger count" }) }),
+  /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(l, { children: "Status" }) }),
+  /* @__PURE__ */ r(e, { align: "center", children: /* @__PURE__ */ r(l, { children: "Actions" }) })
+] }), C = ({
+  agents: i,
   onRunAgent: o,
-  onEditAgent: d,
-  onDeleteAgent: t,
+  onEditAgent: t,
+  onDeleteAgent: d,
   onRowClick: a
 }) => /* @__PURE__ */ r(g, { children: /* @__PURE__ */ c(p, { children: [
-  /* @__PURE__ */ c(s, { children: [
-    /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(i, { children: "Agent name" }) }),
-    /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(i, { children: "Trigger" }) }),
-    /* @__PURE__ */ r(e, { align: "right", children: /* @__PURE__ */ r(i, { children: "Trigger count" }) }),
-    /* @__PURE__ */ r(e, { children: /* @__PURE__ */ r(i, { children: "Status" }) }),
-    /* @__PURE__ */ r(e, { align: "center", children: /* @__PURE__ */ r(i, { children: "Actions" }) })
-  ] }),
-  l.map((n) => /* @__PURE__ */ r(
+  /* @__PURE__ */ r(b, {}),
+  i.map((n) => /* @__PURE__ */ r(
     T,
     {
       agent: n,
       onRunAgent: o,
-      onEditAgent: d,
-      onDeleteAgent: t,
+      onEditAgent: t,
+      onDeleteAgent: d,
       onRowClick: a
     },
     n.id
   ))
 ] }) });
 export {
-  C as AgentTable
+  C as AgentTable,
+  b as AgentTableHeader
 };
 //# sourceMappingURL=AgentTable.js.map

package/dist/esm/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":";;;;;AAoBA,MAAMA,IAAuD,CAAC,EAAE,UAAAC,EAAA,MAC/D,gBAAAC,EAACC,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAU,UAAAH,EAAA,CAAS,~~GAGzCI~~,~~IAAwC~~,~~CAAC;AAAA~~,~~EACrD,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AACD,MACC,gBAAAR,EAACS,GAAA,EACA,UAAA,~~gBAAAC,EAACC,GAAA,EACA,UAAA;AAAA,EAAA,~~gBAAAD~~,~~EAACE~~,GAAA,EACA,UAAA~~;AAAA~~,~~IAAA~~,~~gBAAAZ,EAACa,GAAA,EACA,UAAA,gBAAAb,~~EAACF,GAAA,EAAY,UAAA,aAAA,CAAU,GACxB;AAAA,~~IACA~~,gBAAAE,~~EAACa~~,GAAA,EACA,UAAA,~~gBAAAb~~,EAACF,GAAA,EAAY,qBAAO,GACrB;AAAA,~~sBACCe~~,GAAA,EAAW,OAAM,SACjB,UAAA,~~gBAAAb~~,EAACF,GAAA,EAAY,2BAAa,EAAA,CAC3B;AAAA,~~IACA~~,gBAAAE,~~EAACa~~,GAAA,EACA,UAAA,~~gBAAAb~~,EAACF,GAAA,EAAY,oBAAM,GACpB;AAAA,~~sBACCe~~,GAAA,EAAW,OAAM,UACjB,UAAA,~~gBAAAb~~,EAACF,GAAA,EAAY,qBAAO,EAAA,CACrB;AAAA,EAAA,~~GACD~~;AAAA,~~EAECM~~,EAAO,IAAI,~~CAACU~~,MACZ,~~gBAAAd~~;AAAA,~~IAACe~~;AAAA,IAAA;AAAA,MAEA,OAAAD;AAAA,MACA,~~YAAAT~~;AAAA,MACA,aAAAC;AAAA,MACA,eAAAC;AAAA,MACA,YAAAC;AAAA,IAAA;AAAA,~~IALKM~~,EAAM;AAAA,EAAA,CAOZ;AAAA,EAAA,CACF,EAAA,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":";;;;;AAoBA,MAAMA,IAAuD,CAAC,EAAE,UAAAC,EAAA,MAC/D,gBAAAC,EAACC,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAU,UAAAH,EAAA,CAAS,GAIzCI,IAA6B,MACzC,gBAAAC,EAACC,GAAA,EACA,UAAA;AAAA,EAAA,gBAAAL,EAACM,GAAA,EACA,UAAA,gBAAAN,EAACF,GAAA,EAAY,UAAA,aAAA,CAAU,GACxB;AAAA,EACA,gBAAAE,EAACM,GAAA,EACA,UAAA,gBAAAN,EAACF,GAAA,EAAY,qBAAO,GACrB;AAAA,oBACCQ,GAAA,EAAW,OAAM,SACjB,UAAA,gBAAAN,EAACF,GAAA,EAAY,2BAAa,EAAA,CAC3B;AAAA,EACA,gBAAAE,EAACM,GAAA,EACA,UAAA,gBAAAN,EAACF,GAAA,EAAY,oBAAM,GACpB;AAAA,oBACCQ,GAAA,EAAW,OAAM,UACjB,UAAA,gBAAAN,EAACF,GAAA,EAAY,qBAAO,EAAA,CACrB;AAAA,EAAA,CACD,GAGYS,IAAwC,CAAC;AAAA,EACrD,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AACD,MACC,gBAAAZ,EAACa,GAAA,EACA,UAAA,gBAAAT,EAACU,GAAA,EACA,UAAA;AAAA,EAAA,gBAAAd,EAACG,GAAA,EAAiB;AAAA,EAEjBK,EAAO,IAAI,CAACO,MACZ,gBAAAf;AAAA,IAACgB;AAAA,IAAA;AAAA,MAEA,OAAAD;AAAA,MACA,YAAAN;AAAA,MACA,aAAAC;AAAA,MACA,eAAAC;AAAA,MACA,YAAAC;AAAA,IAAA;AAAA,IALKG,EAAM;AAAA,EAAA,CAOZ;AAAA,EAAA,CACF,EAAA,CACD;"}

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

@@ -3,10 +3,10 @@ import b from "../../assets/icons/delete.svg.js";
 import v from "../../assets/icons/edit.svg.js";
 import w from "../../assets/icons/playOutline.svg.js";
 import D from "../../assets/icons/vertical_dots.svg.js";
-import { DropdownPopover as T } from "../dropdown/DropdownPopover/index.js";
-import { TitleSmall as g, BodyCaption as x, BodyPrimary as s } from "../TypographyStyle.js";
+import { DropdownPopover as S } from "../dropdown/DropdownPopover/index.js";
+import { TitleSmall as T, BodyCaption as x, BodySecondary as s } from "../TypographyStyle.js";
 import { COLORS as o } from "../../constants/Theme.js";
-import { ActionButton as p, BodyGridRow as S, Cell as n, ActionGroup as C } from "./AgentListing.styled.js";
+import { ActionButton as p, BodyGridRow as g, Cell as n, ActionGroup as C } from "./AgentListing.styled.js";
 import { Tag as L } from "../tag/Tag.js";
 import { Tooltip as O } from "../tooltips/Tooltip.js";
 import { unwrapDropdownValue as P } from "../dropdown/utils.js";
@@ -15,7 +15,7 @@ const R = (e) => {
     case "topic":
       return `Topic: ${e.label ?? ""}`;
     case "phrases":
-      return `Phrases: ${(e.items ?? []).join(", ")}`;
+      return e.items?.length ? `Phrases: ${e.items.join(", ")}` : "Phrases";
     default:
       return e.label ?? "";
   }
@@ -85,14 +85,14 @@ const R = (e) => {
     }
   );
   return /* @__PURE__ */ r(
-    S,
+    g,
     {
       "data-test": `agent-row-${e.id}`,
       clickable: !!l,
       onClick: l ? () => l(e) : void 0,
       children: [
         /* @__PURE__ */ r(n, { children: [
-          /* @__PURE__ */ t(g, { numberOfLines: 1, color: o.content.primary, children: e.name }),
+          /* @__PURE__ */ t(T, { numberOfLines: 1, color: o.content.primary, children: e.name }),
           /* @__PURE__ */ r(x, { numberOfLines: 1, color: o.content.secondary, children: [
             "Created: ",
             e.createdAtLabel
@@ -116,7 +116,7 @@ const R = (e) => {
               style: { display: "flex" },
               onClick: (i) => i.stopPropagation(),
               children: /* @__PURE__ */ t(
-                T,
+                S,
                 {
                   "data-test": `agent-row-menu-${e.id}`,
                   options: f,

package/dist/esm/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":";;;;;;;;;;;;AAwBA,MAAMA,IAAgB,CAACC,MAAyC;AAC/D,UAAQA,EAAQ,MAAA;AAAA,IACf,KAAK;AACJ,aAAO,UAAUA,EAAQ,SAAS,EAAE;AAAA,IACrC,KAAK;~~AACJ~~,~~aAAO~~,~~aAAaA,~~EAAQ,~~SAAS~~,~~CAAA~~,~~GAAI~~,KAAK,IAAI,CAAC;AAAA,~~IAEpD~~;AACC,aAAOA,EAAQ,SAAS;AAAA,EAAA;AAE3B,GAWaC,IAA8C,CAAC;AAAA,EAC3D,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,YAAAC;AACD,MAAM;AACL,QAAMC,IAASL,EAAM,WAAW,QAE1BM,IAAY,CAACC,MAAwB;AAE1C,IADAA,EAAE,gBAAA,GACE,CAAAP,EAAM,iBAGVC,EAAWD,CAAK;AAAA,EACjB,GAGMQ,IAA8B;AAAA,IACnC;AAAA,MACC,OAAO;AAAA,MACP,OAAO;AAAA,MACP,aACC,gBAAAC,EAACC,GAAA,EAAS,OAAO,IAAI,QAAQ,IAAI,OAAOC,EAAO,QAAQ,UAAA,CAAW;AAAA,IAAA;AAAA,IAGpE,GAAIR,IACD;AAAA,MACA;AAAA,QACC,OAAO;AAAA,QACP,OAAO;AAAA;AAAA,QAEP,iBACC,gBAAAS;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,OAAO;AAAA,cACN,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,KAAK;AAAA,cACL,OAAOD,EAAO,QAAQ;AAAA,cACtB,YAAY;AAAA,cACZ,UAAU;AAAA,YAAA;AAAA,YAGX,UAAA;AAAA,cAAA,gBAAAF;AAAA,gBAACI;AAAAA,gBAAA;AAAA,kBACA,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,OAAOF,EAAO,QAAQ;AAAA,gBAAA;AAAA,cAAA;AAAA,cACrB;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAEH;AAAA,IAEF,IAEA,CAAA;AAAA,EAAC,GAGCG,IAAmB,CAACC,MAA8B;AACvD,IAAIA,MAAU,SACbb,EAAYF,CAAK,IACPe,MAAU,YACpBZ,IAAgBH,CAAK;AAAA,EAEvB,GAEMgB,IACL,gBAAAP;AAAA,IAACQ;AAAA,IAAA;AAAA,MACA,aAAW,iBAAiBjB,EAAM,EAAE;AAAA,MACpC,UAAUA,EAAM;AAAA,MAChB,SAASM;AAAA,MACT,cAAW;AAAA,MAEX,UAAA,gBAAAG;AAAA,QAACS;AAAAA,QAAA;AAAA,UACA,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,OAAOP,EAAO,QAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IACvB;AAAA,EAAA;AAIF,SACC,gBAAAC;AAAA,IAACO;AAAA,IAAA;AAAA,MACA,aAAW,aAAanB,EAAM,EAAE;AAAA,MAChC,WAAW,CAAC,CAACI;AAAA,MACb,SAASA,IAAa,MAAMA,EAAWJ,CAAK,IAAI;AAAA,MAEhD,UAAA;AAAA,QAAA,gBAAAY,EAACQ,GAAA,EACA,UAAA;AAAA,UAAA,gBAAAX,EAACY,GAAA,EAAW,eAAe,GAAG,OAAOV,EAAO,QAAQ,SAClD,YAAM,KAAA,CACR;AAAA,4BACCW,GAAA,EAAY,eAAe,GAAG,OAAOX,EAAO,QAAQ,WAAW,UAAA;AAAA,YAAA;AAAA,YACrDX,EAAM;AAAA,UAAA,EAAA,CACjB;AAAA,QAAA,GACD;AAAA,QAEA,gBAAAS,EAACW,GAAA,EACA,UAAA,gBAAAX,EAACc,GAAA,~~EAAY~~,eAAe,GAAG,OAAOZ,EAAO,QAAQ,~~SACnD~~,UAAAd,EAAcG,EAAM,OAAO,GAC7B,GACD;AAAA,QAEA,gBAAAS,EAACW,GAAA,EAAK,OAAM,SACX,UAAA,gBAAAX,EAACc,GAAA,~~EAAY~~,OAAOZ,EAAO,QAAQ,~~SACjC~~,UAAAX,EAAM,aAAA,CACR,GACD;AAAA,0BAECoB,GAAA,EACA,UAAA,gBAAAX;AAAA,UAACe;AAAA,UAAA;AAAA,YACA,SAASnB,IAAS,SAAS;AAAA,YAC3B,MAAMA,IAAS,aAAa;AAAA,YAC5B,SAAQ;AAAA,UAAA;AAAA,QAAA,GAEV;AAAA,QAEA,gBAAAI,EAACW,GAAA,EAAK,OAAM,UACX,4BAACK,GAAA,EACC,UAAA;AAAA,UAAAzB,EAAM,iBAAiBA,EAAM,uCAC5B0B,GAAA,EAAQ,MAAM1B,EAAM,oBAAoB,WAAU,OAClD,UAAA,gBAAAS,EAAC,QAAA,EAAK,OAAO,EAAE,SAAS,UAAW,UAAAO,GAAW,GAC/C,IAEAA;AAAA,UAGD,gBAAAP;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,OAAO,EAAE,SAAS,OAAA;AAAA,cAClB,SAAS,CAACF,MAAMA,EAAE,gBAAA;AAAA,cAElB,UAAA,gBAAAE;AAAA,gBAACkB;AAAA,gBAAA;AAAA,kBACA,aAAW,kBAAkB3B,EAAM,EAAE;AAAA,kBACrC,SAASQ;AAAA,kBACT,WAAU;AAAA,kBACV,OAAM;AAAA,kBACN,UAAU,CAACoB,MAAQd,EAAiBe,EAAoBD,CAAG,CAAC;AAAA,kBAE5D,UAAA,gBAAAnB;AAAA,oBAACQ;AAAA,oBAAA;AAAA,sBACA,aAAW,yBAAyBjB,EAAM,EAAE;AAAA,sBAC5C,cAAW;AAAA,sBAEX,UAAA,gBAAAS;AAAA,wBAACqB;AAAAA,wBAAA;AAAA,0BACA,OAAO;AAAA,0BACP,QAAQ;AAAA,0BACR,OAAOnB,EAAO,QAAQ;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACvB;AAAA,kBAAA;AAAA,gBACD;AAAA,cAAA;AAAA,YACD;AAAA,UAAA;AAAA,QACD,EAAA,CACD,EAAA,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGH;"}
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\treturn `Topic: ${trigger.label ?? ''}`;\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/esm/components/agent-listing/AgentTableShimmer.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+interface AgentTableShimmerProps {
+    /** Shimmer row count — pass the page size so the refetch keeps the page height. */
+    rows?: number;
+}
+/**
+ * Table-shaped loading state: the real column header + shimmer rows matching the
+ * listing grid, so a refetch (page/page-size/sort/search change) shimmers in place
+ * instead of collapsing to the initial full-page loader.
+ */
+export declare const AgentTableShimmer: React.FC<AgentTableShimmerProps>;
+export {};

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

@@ -0,0 +1,20 @@
+import { jsx as r, jsxs as t } from "react/jsx-runtime";
+import { BikShimmer as m } from "../shimmer/ShimmerComponent/BikShimmer.js";
+import { TableCard as a, TableScroll as p, BodyGridRow as d, Cell as e } from "./AgentListing.styled.js";
+import { AgentTableHeader as h } from "./AgentTable.js";
+const i = (l, o = "16px", n = "4px") => /* @__PURE__ */ r(m, { boxes: [{ width: l, height: o, borderRadius: n, marginTop: "0" }] }), b = ({
+  rows: l = 5
+}) => /* @__PURE__ */ r(a, { "data-test": "agent-table-shimmer", children: /* @__PURE__ */ t(p, { children: [
+  /* @__PURE__ */ r(h, {}),
+  Array.from({ length: l }, (o, n) => /* @__PURE__ */ t(d, { children: [
+    /* @__PURE__ */ r(e, { children: i("60%") }),
+    /* @__PURE__ */ r(e, { children: i("70%") }),
+    /* @__PURE__ */ r(e, { align: "right", children: i("48px") }),
+    /* @__PURE__ */ r(e, { children: i("64px", "24px", "999px") }),
+    /* @__PURE__ */ r(e, { align: "center", children: i("72px", "24px") })
+  ] }, n))
+] }) });
+export {
+  b as AgentTableShimmer
+};
+//# sourceMappingURL=AgentTableShimmer.js.map

package/dist/esm/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":";;;;AAeA,MAAMA,IAAM,CAACC,GAAeC,IAAS,QAAQC,IAAe,UAC3D,gBAAAC,EAACC,GAAA,EAAW,OAAO,CAAC,EAAE,OAAAJ,GAAO,QAAAC,GAAQ,cAAAC,GAAc,WAAW,IAAA,CAAK,GAAG,GAQ1DG,IAAsD,CAAC;AAAA,EACnE,MAAAC,IAAO;AACR,MACC,gBAAAH,EAACI,GAAA,EAAU,aAAU,uBACpB,4BAACC,GAAA,EACA,UAAA;AAAA,EAAA,gBAAAL,EAACM,GAAA,EAAiB;AAAA,EAEjB,MAAM,KAAK,EAAE,QAAQH,EAAA,GAAQ,CAACI,GAAGC,MACjC,gBAAAC,EAACC,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAV,EAACW,GAAA,EAAM,UAAAf,EAAI,KAAK,EAAA,CAAE;AAAA,IAClB,gBAAAI,EAACW,GAAA,EAAM,UAAAf,EAAI,KAAK,EAAA,CAAE;AAAA,sBACjBe,GAAA,EAAK,OAAM,SAAS,UAAAf,EAAI,MAAM,GAAE;AAAA,sBAChCe,GAAA,EAAM,UAAAf,EAAI,QAAQ,QAAQ,OAAO,GAAE;AAAA,sBACnCe,GAAA,EAAK,OAAM,UAAU,UAAAf,EAAI,QAAQ,MAAM,EAAA,CAAE;AAAA,EAAA,EAAA,GALzBY,CAMlB,CACA;AAAA,EAAA,CACF,EAAA,CACD;"}

package/dist/esm/components/agent-listing/__fixtures__/agents.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { AgentListItem } from '../AgentListing.model';
+/** Sample listing rows covering every trigger kind + status. */
+export declare const SAMPLE_AGENTS: AgentListItem[];

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

@@ -1,8 +1,8 @@
-import { jsxs as d, Fragment as c, jsx as n } from "react/jsx-runtime";
-import l from "styled-components";
+import { jsxs as c, Fragment as l, jsx as n } from "react/jsx-runtime";
+import r from "styled-components";
 import { COLORS as e } from "../../constants/Theme.js";
-import { getBackgroundColor as r, getPadding as i, getBorder as u, getColor as b, getDashedBorderStyling as o, getClickEffect as a, generateDisabledStyling as g, getDisabledTextColor as y, getHoverButtonBackgroundCustom as h, getHoverButtonBackground as $, getHoverButtonTextDecorationStyle as s, generateInverseHoverBackground as v, getLoadingBorder as x, getLoadingButtonBackgroundCustom as m, getLoadingBackground as z } from "./themes.js";
-const w = l.button`
+import { getBackgroundColor as u, getPadding as i, getBorder as b, getColor as g, getDashedBorderStyling as o, getClickEffect as a, generateDisabledStyling as y, getDisabledTextColor as h, getHoverButtonBackgroundCustom as $, getHoverButtonBackground as s, getHoverButtonTextDecorationStyle as v, generateInverseHoverBackground as x, getLoadingBorder as m, getLoadingBackground as d, getLoadingButtonBackgroundCustom as z } from "./themes.js";
+const C = r.button`
 	all: unset;
 	outline: none;
 	cursor: pointer;
@@ -11,7 +11,7 @@ const w = l.button`
 	border-radius: ${(t) => t.buttonType == "text" ? "0" : "4px"};
 	overflow: hidden;
 	${(t) => t.matchParentWidth ? "flex-grow: 1;" : ""}
-	background-color: ${(t) => r(
+	background-color: ${(t) => u(
   t.buttonType,
   t.size,
   t.inverse,
@@ -28,7 +28,7 @@ const w = l.button`
 					${t.matchParentWidth ? "justify-content: center;" : ""}
 					padding: ${i(t.buttonType, t.size)};
 				}` : `padding: ${i(t.buttonType, t.size)};
-	${u(
+	${b(
   t.version ?? "1.0",
   t.buttonType,
   t.size,
@@ -47,7 +47,7 @@ const w = l.button`
 	}
 	.text {
-		color: ${(t) => b(t.buttonType, t.size, t.inverse, t.darkMode)};
+		color: ${(t) => g(t.buttonType, t.size, t.inverse, t.darkMode)};
 	}
 	.icon-leading {
@@ -91,9 +91,9 @@ const w = l.button`
 			display: none !important;
 		}
 		cursor: ${(t) => t.buttonType === "text" ? "auto" : "not-allowed"};
-		${(t) => g(t.buttonType, t.size, t.inverse)}
+		${(t) => y(t.buttonType, t.size, t.inverse)}
 		.text {
-			color: ${(t) => y(t.inverse)} !important;
+			color: ${(t) => h(t.inverse)} !important;
 		}
 		${(t) => o(
   t.buttonType,
@@ -130,7 +130,13 @@ const w = l.button`
   t.isLoading ? `
 			cursor: not-allowed;
 			padding: 0;
-		${x(t.buttonType, t.size, t.inverse)}
+		${m(t.buttonType, t.size, t.inverse)}
+		${d(
+    t.buttonType,
+    t.size,
+    t.inverse,
+    t.buttonColor
+  )}
 		.button-container {
 			display: flex;
@@ -144,7 +150,7 @@ const w = l.button`
 			.icon-trailing {
 				opacity: 0;
 			}
-			${t.buttonColor ? `background-color: ${m(
+			${t.buttonColor ? `background-color: ${z(
     t.buttonColor,
     15
   )};` : ""}
@@ -159,7 +165,7 @@ const w = l.button`
 				left: 0;
 				width: 100%;
 				height: 100%;
-				${z(
+				${d(
     t.buttonType,
     t.size,
     t.inverse,
@@ -177,7 +183,7 @@ const w = l.button`
 				width: 100%;
 				${t.matchParentWidth ? "justify-content: center;" : ""}
 				padding: ${i(t.buttonType, t.size)};
-				{${t.buttonColor ? `background-color: ${h(
+				{${t.buttonColor ? `background-color: ${$(
     t.buttonColor,
     15
   )}` : ""}}
@@ -189,14 +195,14 @@ const w = l.button`
 					left: 0;
 					width: 100%;
 					height: 100%;
-					${$(t.buttonType, t.inverse)}
+					${s(t.buttonType, t.inverse)}
 				}
 				${t.size === "chip" && t.buttonType !== "text" ? t.darkMode ? `background-color: ${e.stroke.primary};` : `background-color: ${e.surface.hovered};` : ""}
 				${t.buttonType === "special" ? `background-color: ${e.background.brandLight};` : t.buttonType === "secondaryGray" ? `background-color: ${e.surface.hovered};` : ""}
 				${t.buttonType === "primary" && t.size !== "chip" && t.size !== "xs" && !t.inverse && !t.buttonColor ? `background-color: ${e.background.inverse};` : ""}
 			}
-			${t.buttonType === "text" ? s(t.buttonType, t.disabled) : ""}
-			${t.inverse ? v(t.buttonType, t.disabled) : ""}
+			${t.buttonType === "text" ? v(t.buttonType, t.disabled) : ""}
+			${t.inverse ? x(t.buttonType, t.disabled) : ""}
 		}`
 )}
@@ -205,14 +211,14 @@ const w = l.button`
 		gap: 8.33px;
 		${(t) => t.matchParentWidth ? "margin: auto;" : ""}
 	}
-`, C = () => /* @__PURE__ */ d(c, { children: [
+`, w = () => /* @__PURE__ */ c(l, { children: [
   /* @__PURE__ */ n("div", { className: "line-top" }),
   /* @__PURE__ */ n("div", { className: "line-left" }),
   /* @__PURE__ */ n("div", { className: "line-bottom" }),
   /* @__PURE__ */ n("div", { className: "line-right" })
 ] });
 export {
-  w as Button,
-  C as ButtonCustomDashedBorder
+  C as Button,
+  w as ButtonCustomDashedBorder
 };
 //# sourceMappingURL=Button.styled.js.map

package/dist/esm/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/esm/components/dropdown/Dropdown.js CHANGED Viewed

@@ -26,28 +26,28 @@ const H = ({
   showTrailingIconPlaceholder: V = !1,
   showLabelsOnMoreHover: j = !1,
   value: l,
-  showSelected: h = !1,
+  showSelected: f = !1,
   onDropdownVisbilityChange: z,
   ...t
 }) => {
-  const [f, F] = g(!1), [y, I] = g(!1), i = E ?? "default", B = G(), [s, c] = g(
+  const [c, F] = g(!1), [y, I] = g(!1), i = E ?? "default", B = G(), [s, d] = g(
     o ?? []
   );
   function N(e) {
-    Array.isArray(e) ? c([...e]) : c([e]), M?.(e);
+    Array.isArray(e) ? d([...e]) : d([e]), M?.(e);
   }
   p(() => {
     const e = [];
-    t?.options?.forEach((d) => {
-      d.options ? d.options.forEach((u) => {
+    t?.options?.forEach((h) => {
+      h.options ? h.options.forEach((u) => {
         u.selected && e.push({
           ...u,
           label: u.label
         });
-      }) : d.selected && e.push(d);
-    }), c([...e]);
+      }) : h.selected && e.push(h);
+    }), d([...e]);
   }, [t.options]), p(() => {
-    o && c([...o]);
+    o && d([...o]);
   }, [o]);
   const U = Z(s), _ = w ? a : U ?? a ?? "Select an option", m = t.buttonWidth, C = m ?? t.width ?? "100%", q = t.dropdownWidth ?? C;
   return /* @__PURE__ */ n(b, { children: /* @__PURE__ */ n(
@@ -61,14 +61,19 @@ const H = ({
           zIndex: 1,
           cursor: "pointer",
           padding: i === "x-small" ? "4px 8px" : "6px 8px",
-          backgroundColor: t.version === "3.0" ? f || y ? r.surface.hovered : r.surface.standard : h && l !== void 0 ? J.positive[100] : y ? r.background.inactive : r.surface.standard,
+          backgroundColor: t.version === "3.0" ? c || y ? r.surface.hovered : r.surface.standard : f && l !== void 0 ? J.positive[100] : (
+            // The hover wrapper also contains the popover, so while the
+            // dropdown is open, hovering an option would grey the input
+            // — only show hover feedback while closed.
+            y && !c ? r.background.inactive : r.surface.standard
+          ),
           transition: "background-color 0.3s ease",
           ...A
         },
         input: {
           minHeight: "100%",
           maxWidth: "100%",
-          color: h && l !== void 0 ? r.content.positive : "inherit"
+          color: f && l !== void 0 ? r.content.positive : "inherit"
         }
       },
       children: /* @__PURE__ */ n(
@@ -117,12 +122,12 @@ const H = ({
                               K,
                               {
                                 style: {
-                                  transform: f ? "rotate(180deg)" : "rotate(0deg)"
+                                  transform: c ? "rotate(180deg)" : "rotate(0deg)"
                                 },
                                 onClick: O,
                                 width: i === "x-small" ? 16 : i === "small" ? 20 : 24,
                                 height: i === "x-small" ? 16 : i === "small" ? 20 : 24,
-                                color: h ? r.content.positive : r.content.primary
+                                color: f ? r.content.positive : r.content.primary
                               }
                             )
                           ]
@@ -141,7 +146,7 @@ const H = ({
                       R?.(e);
                     },
                     errorMessage: t.error,
-                    isDropdownOpened: f,
+                    isDropdownOpened: c,
                     sizeToUse: i,
                     containerStyle: {
                       width: t.width ?? "100%",