{"version":3,"file":"index.cjs","sources":["../../../../../src/components/erc20-token-picker/manage-lists/index.tsx"],"sourcesContent":["import React, { type MouseEvent, useCallback } from \"react\";\nimport { Typography, type TypographyProps } from \"../../typography\";\nimport X from \"../../../icons/x\";\nimport ChevronLeft from \"../../../icons/chevron-left\";\nimport type { TokenListWithBalance } from \"../types\";\nimport { RemoteLogo, type RemoteLogoProps } from \"../../remote-logo\";\nimport { Divider, type DividerProps } from \"../divider\";\nimport { Skeleton } from \"../../skeleton\";\nimport { mergedCva } from \"../../../utils/components\";\n\nconst rootStyles = mergedCva([\n    \"cui-bg-white\",\n    \"dark:cui-bg-black\",\n    \"cui-rounded-xl\",\n    \"cui-h-[60vh]\",\n    \"sm:cui-w-full\",\n    \"md:cui-min-w-[460px]\",\n    \"md:cui-w-1/3\",\n    \"lg:cui-w-1/4\",\n]);\n\nconst headerStyles = mergedCva([\n    \"cui-p-4\",\n    \"cui-flex\",\n    \"cui-justify-between\",\n    \"cui-items-center\",\n]);\n\nconst iconStyles = mergedCva([\"cui-cursor-pointer\"]);\n\nconst listWrapperStyles = mergedCva([\n    \"cui-flex\",\n    \"cui-w-full\",\n    \"cui-h-96\",\n    \"cui-justify-center\",\n    \"cui-items-center\",\n]);\n\nconst listStyles = mergedCva([\n    \"cui-list-none\",\n    \"cui-w-full\",\n    \"cui-h-full\",\n    \"cui-overflow-y-auto\",\n    \"cui-scrollbar\",\n]);\n\nconst listItemStyles = mergedCva(\n    [\n        \"cui-flex\",\n        \"cui-items-center\",\n        \"cui-gap-3\",\n        \"cui-h-16\",\n        \"cui-p-3\",\n        \"cui-cursor-pointer\",\n    ],\n    {\n        variants: {\n            selected: {\n                true: [\n                    \"cui-bg-gray-200\",\n                    \"hover:cui-bg-gray-200\",\n                    \"dark:cui-bg-gray-600\",\n                    \"dark:hover:cui-bg-gray-600\",\n                ],\n                false: [\"hover:cui-bg-gray-100\", \"dark:hover:cui-bg-gray-700\"],\n            },\n        },\n    },\n);\n\nconst LOADING_SKELETON = new Array(5).fill(null).map((_, index) => {\n    return (\n        <li\n            key={index}\n            className={listItemStyles({ selected: false })}\n            data-index={index}\n        >\n            <Skeleton circular width=\"28px\" />\n            <Skeleton width=\"60px\" />\n        </li>\n    );\n});\n\nexport interface ManageListsProps {\n    onDismiss?: () => void;\n    onSelectedListChange?: (token: TokenListWithBalance) => void;\n    loading?: boolean;\n    selectedList?: TokenListWithBalance | null;\n    lists?: TokenListWithBalance[];\n    chainId?: number;\n    ipfsGatewayURL?: string;\n    onSearch: () => void;\n    className?: {\n        root?: string;\n        header?: string;\n        title?: TypographyProps[\"className\"];\n        closeIcon?: string;\n        backIcon?: string;\n        divider?: DividerProps[\"className\"];\n        listWrapper?: string;\n        list?: string;\n        listItem?: string;\n        listItemIcon?: RemoteLogoProps[\"className\"];\n        listItemText?: TypographyProps[\"className\"];\n        emptyListText?: TypographyProps[\"className\"];\n    };\n    messages: {\n        title: string;\n        noLists: string;\n    };\n    dataTestIds?: {\n        chevronLeftIcon?: string;\n        closeIcon?: string;\n        option?: string;\n    };\n}\n\nexport const ManageLists = ({\n    onDismiss,\n    onSelectedListChange,\n    loading,\n    selectedList,\n    lists,\n    ipfsGatewayURL,\n    onSearch,\n    className,\n    messages,\n    dataTestIds,\n}: ManageListsProps) => {\n    const handleListClick = useCallback(\n        (event: MouseEvent) => {\n            if (!onSelectedListChange || !lists || !event.target) return;\n            const index = (event.target as HTMLLIElement).dataset.index;\n            if (index !== undefined) {\n                const parsedIndex = parseInt(index);\n                if (parsedIndex >= 0) onSelectedListChange(lists[parsedIndex]);\n            }\n        },\n        [lists, onSelectedListChange],\n    );\n\n    return (\n        <div className={rootStyles({ className: className?.root })}>\n            <div\n                className={headerStyles({\n                    className: className?.header,\n                })}\n            >\n                <div className=\"cui-flex cui-items-center cui-gap-3\">\n                    <ChevronLeft\n                        data-testid={dataTestIds?.chevronLeftIcon}\n                        className={iconStyles({\n                            className: className?.backIcon,\n                        })}\n                        onClick={onSearch}\n                    />\n                    <Typography variant=\"h4\" className={className?.title}>\n                        {messages.title}\n                    </Typography>\n                </div>\n                <X\n                    data-testid={dataTestIds?.closeIcon}\n                    className={iconStyles({ className: className?.closeIcon })}\n                    onClick={onDismiss}\n                />\n            </div>\n            <Divider className={className?.divider} />\n            <div\n                className={listWrapperStyles({\n                    className: className?.listWrapper,\n                })}\n            >\n                {loading && (\n                    <ul className={listStyles({ className: className?.list })}>\n                        {LOADING_SKELETON}\n                    </ul>\n                )}\n                {!loading &&\n                    (!!lists && lists.length > 0 ? (\n                        <ul\n                            className={listStyles({\n                                className: className?.list,\n                            })}\n                        >\n                            {lists.map((list, index) => {\n                                const { name, version, logoURI } = list;\n                                const selected =\n                                    !!selectedList &&\n                                    name === selectedList.name &&\n                                    version === selectedList.version;\n                                return (\n                                    <li\n                                        data-testid={\n                                            dataTestIds?.option &&\n                                            `${dataTestIds.option}-${name}`\n                                        }\n                                        key={name + version}\n                                        className={listItemStyles({\n                                            selected,\n                                            className: className?.listItem,\n                                        })}\n                                        data-index={index}\n                                        onClick={handleListClick}\n                                    >\n                                        <RemoteLogo\n                                            src={logoURI}\n                                            defaultText={name}\n                                            ipfsGatewayURL={ipfsGatewayURL}\n                                            className={{\n                                                ...className?.listItemIcon,\n                                                root: `cui-pointer-events-none ${className?.listItemIcon?.root}`,\n                                            }}\n                                        />\n                                        <Typography\n                                            className={{\n                                                ...className?.listItemText,\n                                                root: `cui-pointer-events-none ${className?.listItemText?.root}`,\n                                            }}\n                                        >\n                                            {name}\n                                        </Typography>\n                                    </li>\n                                );\n                            })}\n                        </ul>\n                    ) : (\n                        <Typography className={className?.emptyListText}>\n                            {messages.noLists}\n                        </Typography>\n                    ))}\n            </div>\n        </div>\n    );\n};\n"],"names":["mergedCva","Skeleton","useCallback","ChevronLeft","Typography","X","Divider","RemoteLogo"],"mappings":"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"}