se-design 1.0.62-dev → 1.0.63
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/icons/ai-off.svg +4 -4
- package/dist/assets/icons/center-align.svg +3 -0
- package/dist/assets/icons/left-align.svg +3 -0
- package/dist/assets/icons/right-align.svg +3 -0
- package/dist/assets/style.css +1 -1
- package/dist/components/InfoTooltip/index.d.ts +5 -1
- package/dist/index10.js.map +1 -1
- package/dist/index100.js +2 -2
- package/dist/index100.js.map +1 -1
- package/dist/index101.js +1 -1
- package/dist/index101.js.map +1 -1
- package/dist/index102.js +1 -1
- package/dist/index102.js.map +1 -1
- package/dist/index103.js +2 -2
- package/dist/index103.js.map +1 -1
- package/dist/index104.js +1 -1
- package/dist/index104.js.map +1 -1
- package/dist/index105.js +2 -2
- package/dist/index105.js.map +1 -1
- package/dist/index106.js +1 -1
- package/dist/index106.js.map +1 -1
- package/dist/index107.js +1 -1
- package/dist/index107.js.map +1 -1
- package/dist/index108.js +1 -1
- package/dist/index108.js.map +1 -1
- package/dist/index109.js +2 -2
- package/dist/index109.js.map +1 -1
- package/dist/index11.js.map +1 -1
- package/dist/index110.js +1 -1
- package/dist/index110.js.map +1 -1
- package/dist/index111.js +2 -2
- package/dist/index111.js.map +1 -1
- package/dist/index112.js +2 -2
- package/dist/index112.js.map +1 -1
- package/dist/index113.js +2 -2
- package/dist/index113.js.map +1 -1
- package/dist/index114.js +2 -2
- package/dist/index114.js.map +1 -1
- package/dist/index115.js +1 -1
- package/dist/index115.js.map +1 -1
- package/dist/index116.js +1 -1
- package/dist/index116.js.map +1 -1
- package/dist/index117.js +1 -1
- package/dist/index117.js.map +1 -1
- package/dist/index118.js +2 -2
- package/dist/index118.js.map +1 -1
- package/dist/index119.js +2 -2
- package/dist/index119.js.map +1 -1
- package/dist/index12.js.map +1 -1
- package/dist/index120.js +2 -2
- package/dist/index120.js.map +1 -1
- package/dist/index121.js +1 -1
- package/dist/index121.js.map +1 -1
- package/dist/index122.js +1 -1
- package/dist/index122.js.map +1 -1
- package/dist/index123.js +1 -1
- package/dist/index123.js.map +1 -1
- package/dist/index124.js +1 -1
- package/dist/index124.js.map +1 -1
- package/dist/index125.js +1 -1
- package/dist/index125.js.map +1 -1
- package/dist/index126.js +1 -1
- package/dist/index126.js.map +1 -1
- package/dist/index127.js +1 -1
- package/dist/index127.js.map +1 -1
- package/dist/index128.js +1 -1
- package/dist/index128.js.map +1 -1
- package/dist/index129.js +2 -2
- package/dist/index129.js.map +1 -1
- package/dist/index13.js.map +1 -1
- package/dist/index130.js +2 -2
- package/dist/index130.js.map +1 -1
- package/dist/index131.js +1 -1
- package/dist/index131.js.map +1 -1
- package/dist/index132.js +1 -1
- package/dist/index132.js.map +1 -1
- package/dist/index133.js +1 -1
- package/dist/index133.js.map +1 -1
- package/dist/index134.js +1 -1
- package/dist/index134.js.map +1 -1
- package/dist/index135.js +1 -1
- package/dist/index135.js.map +1 -1
- package/dist/index136.js +1 -1
- package/dist/index136.js.map +1 -1
- package/dist/index137.js +2 -2
- package/dist/index137.js.map +1 -1
- package/dist/index138.js +2 -2
- package/dist/index138.js.map +1 -1
- package/dist/index139.js +2 -2
- package/dist/index139.js.map +1 -1
- package/dist/index140.js +2 -2
- package/dist/index140.js.map +1 -1
- package/dist/index141.js +2 -2
- package/dist/index141.js.map +1 -1
- package/dist/index142.js +2 -2
- package/dist/index142.js.map +1 -1
- package/dist/index143.js +2 -2
- package/dist/index143.js.map +1 -1
- package/dist/index144.js +1 -1
- package/dist/index144.js.map +1 -1
- package/dist/index145.js +1 -1
- package/dist/index145.js.map +1 -1
- package/dist/index146.js +1 -1
- package/dist/index146.js.map +1 -1
- package/dist/index147.js +1 -1
- package/dist/index147.js.map +1 -1
- package/dist/index148.js +1 -1
- package/dist/index148.js.map +1 -1
- package/dist/index149.js +1 -1
- package/dist/index149.js.map +1 -1
- package/dist/index15.js +2 -2
- package/dist/index15.js.map +1 -1
- package/dist/index150.js +1 -1
- package/dist/index150.js.map +1 -1
- package/dist/index151.js +1 -1
- package/dist/index151.js.map +1 -1
- package/dist/index152.js +1 -1
- package/dist/index152.js.map +1 -1
- package/dist/index153.js +1 -1
- package/dist/index153.js.map +1 -1
- package/dist/index154.js +1 -1
- package/dist/index154.js.map +1 -1
- package/dist/index155.js +1 -1
- package/dist/index155.js.map +1 -1
- package/dist/index156.js +1 -1
- package/dist/index156.js.map +1 -1
- package/dist/index157.js +1 -1
- package/dist/index157.js.map +1 -1
- package/dist/index158.js +1 -1
- package/dist/index158.js.map +1 -1
- package/dist/index159.js +1 -1
- package/dist/index159.js.map +1 -1
- package/dist/index16.js.map +1 -1
- package/dist/index160.js +1 -1
- package/dist/index160.js.map +1 -1
- package/dist/index161.js +1 -1
- package/dist/index161.js.map +1 -1
- package/dist/index162.js +1 -1
- package/dist/index162.js.map +1 -1
- package/dist/index163.js +1 -1
- package/dist/index163.js.map +1 -1
- package/dist/index164.js +1 -1
- package/dist/index164.js.map +1 -1
- package/dist/index165.js +1 -1
- package/dist/index165.js.map +1 -1
- package/dist/index166.js +2 -2
- package/dist/index166.js.map +1 -1
- package/dist/index167.js +1 -1
- package/dist/index167.js.map +1 -1
- package/dist/index168.js +1 -1
- package/dist/index168.js.map +1 -1
- package/dist/index169.js +2 -2
- package/dist/index169.js.map +1 -1
- package/dist/index17.js.map +1 -1
- package/dist/index170.js +2 -2
- package/dist/index170.js.map +1 -1
- package/dist/index171.js +1 -1
- package/dist/index171.js.map +1 -1
- package/dist/index172.js +1 -1
- package/dist/index172.js.map +1 -1
- package/dist/index173.js +2 -2
- package/dist/index173.js.map +1 -1
- package/dist/index174.js +1 -1
- package/dist/index174.js.map +1 -1
- package/dist/index175.js +1 -1
- package/dist/index175.js.map +1 -1
- package/dist/index176.js +1 -1
- package/dist/index176.js.map +1 -1
- package/dist/index177.js +1 -1
- package/dist/index177.js.map +1 -1
- package/dist/index178.js +1 -1
- package/dist/index178.js.map +1 -1
- package/dist/index179.js +1 -1
- package/dist/index179.js.map +1 -1
- package/dist/index18.js +1 -1
- package/dist/index18.js.map +1 -1
- package/dist/index180.js +2 -2
- package/dist/index180.js.map +1 -1
- package/dist/index181.js +1 -1
- package/dist/index181.js.map +1 -1
- package/dist/index182.js +2 -2
- package/dist/index182.js.map +1 -1
- package/dist/index183.js +2 -149
- package/dist/index183.js.map +1 -1
- package/dist/index184.js +2 -9
- package/dist/index184.js.map +1 -1
- package/dist/index185.js +2 -6
- package/dist/index185.js.map +1 -1
- package/dist/index186.js +149 -5
- package/dist/index186.js.map +1 -1
- package/dist/index187.js +12 -0
- package/dist/index187.js.map +1 -0
- package/dist/index188.js +9 -0
- package/dist/index188.js.map +1 -0
- package/dist/index189.js +4 -23
- package/dist/index189.js.map +1 -1
- package/dist/index19.js.map +1 -1
- package/dist/index192.js +27 -0
- package/dist/index192.js.map +1 -0
- package/dist/{index191.js → index194.js} +3 -3
- package/dist/{index191.js.map → index194.js.map} +1 -1
- package/dist/{index193.js → index196.js} +1 -1
- package/dist/{index193.js.map → index196.js.map} +1 -1
- package/dist/index20.js.map +1 -1
- package/dist/{index201.js → index204.js} +1 -1
- package/dist/{index201.js.map → index204.js.map} +1 -1
- package/dist/index21.js.map +1 -1
- package/dist/index212.js +1233 -41
- package/dist/index212.js.map +1 -1
- package/dist/{index211.js → index214.js} +1 -1
- package/dist/{index211.js.map → index214.js.map} +1 -1
- package/dist/index215.js +44 -0
- package/dist/index215.js.map +1 -0
- package/dist/index22.js +2 -2
- package/dist/index22.js.map +1 -1
- package/dist/index225.js +3 -53
- package/dist/index225.js.map +1 -1
- package/dist/index227.js +57 -8
- package/dist/index227.js.map +1 -1
- package/dist/index228.js +53 -4
- package/dist/index228.js.map +1 -1
- package/dist/index229.js +9 -169
- package/dist/index229.js.map +1 -1
- package/dist/index23.js.map +1 -1
- package/dist/index230.js +10 -11
- package/dist/index230.js.map +1 -1
- package/dist/index231.js +4 -21
- package/dist/index231.js.map +1 -1
- package/dist/index232.js +169 -18
- package/dist/index232.js.map +1 -1
- package/dist/index233.js +11 -6
- package/dist/index233.js.map +1 -1
- package/dist/index234.js +21 -5
- package/dist/index234.js.map +1 -1
- package/dist/index235.js +18 -37
- package/dist/index235.js.map +1 -1
- package/dist/index236.js +6 -2
- package/dist/index236.js.map +1 -1
- package/dist/index237.js +5 -7
- package/dist/index237.js.map +1 -1
- package/dist/index238.js +36 -325
- package/dist/index238.js.map +1 -1
- package/dist/index239.js +2 -50
- package/dist/index239.js.map +1 -1
- package/dist/index24.js +2 -2
- package/dist/index24.js.map +1 -1
- package/dist/index240.js +8 -2
- package/dist/index240.js.map +1 -1
- package/dist/index241.js +323 -72
- package/dist/index241.js.map +1 -1
- package/dist/index242.js +47 -90
- package/dist/index242.js.map +1 -1
- package/dist/index243.js +2 -52
- package/dist/index243.js.map +1 -1
- package/dist/index244.js +75 -7
- package/dist/index244.js.map +1 -1
- package/dist/index245.js +92 -4
- package/dist/index245.js.map +1 -1
- package/dist/index246.js +48 -48
- package/dist/index246.js.map +1 -1
- package/dist/index247.js +8 -2
- package/dist/index247.js.map +1 -1
- package/dist/index248.js +5 -2
- package/dist/index248.js.map +1 -1
- package/dist/index249.js +55 -0
- package/dist/index249.js.map +1 -0
- package/dist/index25.js.map +1 -1
- package/dist/index250.js +5 -0
- package/dist/index250.js.map +1 -0
- package/dist/index251.js +5 -0
- package/dist/index251.js.map +1 -0
- package/dist/index26.js.map +1 -1
- package/dist/index27.js +1 -1
- package/dist/index27.js.map +1 -1
- package/dist/index28.js.map +1 -1
- package/dist/index29.js +1 -1
- package/dist/index29.js.map +1 -1
- package/dist/index3.js.map +1 -1
- package/dist/index30.js.map +1 -1
- package/dist/index31.js +11 -10
- package/dist/index31.js.map +1 -1
- package/dist/index32.js.map +1 -1
- package/dist/index33.js.map +1 -1
- package/dist/index34.js +1 -1
- package/dist/index34.js.map +1 -1
- package/dist/index35.js.map +1 -1
- package/dist/index36.js.map +1 -1
- package/dist/index37.js +2 -2
- package/dist/index37.js.map +1 -1
- package/dist/index38.js +2 -2
- package/dist/index38.js.map +1 -1
- package/dist/index39.js +1 -1
- package/dist/index39.js.map +1 -1
- package/dist/index4.js.map +1 -1
- package/dist/index40.js.map +1 -1
- package/dist/index41.js +8 -7
- package/dist/index41.js.map +1 -1
- package/dist/index42.js +7 -6
- package/dist/index42.js.map +1 -1
- package/dist/index43.js.map +1 -1
- package/dist/index44.js +2 -2
- package/dist/index44.js.map +1 -1
- package/dist/index45.js +3 -3
- package/dist/index45.js.map +1 -1
- package/dist/index46.js.map +1 -1
- package/dist/index47.js.map +1 -1
- package/dist/index48.js +2 -2
- package/dist/index48.js.map +1 -1
- package/dist/index49.js.map +1 -1
- package/dist/index5.js +164 -158
- package/dist/index5.js.map +1 -1
- package/dist/index50.js +13 -13
- package/dist/index50.js.map +1 -1
- package/dist/index51.js.map +1 -1
- package/dist/index52.js +1 -1
- package/dist/index52.js.map +1 -1
- package/dist/index53.js.map +1 -1
- package/dist/index54.js +22 -21
- package/dist/index54.js.map +1 -1
- package/dist/index55.js.map +1 -1
- package/dist/index56.js +1 -1
- package/dist/index56.js.map +1 -1
- package/dist/index57.js.map +1 -1
- package/dist/index58.js.map +1 -1
- package/dist/index59.js.map +1 -1
- package/dist/index6.js +3 -2
- package/dist/index6.js.map +1 -1
- package/dist/index60.js +45 -39
- package/dist/index60.js.map +1 -1
- package/dist/index61.js.map +1 -1
- package/dist/index62.js +1 -1
- package/dist/index62.js.map +1 -1
- package/dist/index63.js.map +1 -1
- package/dist/index64.js +4 -3
- package/dist/index64.js.map +1 -1
- package/dist/index66.js.map +1 -1
- package/dist/index67.js.map +1 -1
- package/dist/index68.js.map +1 -1
- package/dist/index69.js.map +1 -1
- package/dist/index7.js.map +1 -1
- package/dist/index70.js.map +1 -1
- package/dist/index72.js +1 -1
- package/dist/index72.js.map +1 -1
- package/dist/index73.js.map +1 -1
- package/dist/index74.js.map +1 -1
- package/dist/index75.js.map +1 -1
- package/dist/index76.js.map +1 -1
- package/dist/index77.js.map +1 -1
- package/dist/index78.js.map +1 -1
- package/dist/index79.js.map +1 -1
- package/dist/index8.js +2 -2
- package/dist/index8.js.map +1 -1
- package/dist/index80.js.map +1 -1
- package/dist/index81.js.map +1 -1
- package/dist/index82.js.map +1 -1
- package/dist/index83.js +1 -1
- package/dist/index83.js.map +1 -1
- package/dist/index84.js +1 -1
- package/dist/index84.js.map +1 -1
- package/dist/index85.js +1 -1
- package/dist/index85.js.map +1 -1
- package/dist/index86.js +1 -1
- package/dist/index86.js.map +1 -1
- package/dist/index87.js +1 -1
- package/dist/index87.js.map +1 -1
- package/dist/index88.js +1 -1
- package/dist/index88.js.map +1 -1
- package/dist/index89.js +1 -1
- package/dist/index89.js.map +1 -1
- package/dist/index9.js.map +1 -1
- package/dist/index90.js +1 -1
- package/dist/index90.js.map +1 -1
- package/dist/index91.js +1 -1
- package/dist/index91.js.map +1 -1
- package/dist/index92.js +1 -1
- package/dist/index92.js.map +1 -1
- package/dist/index93.js +1 -1
- package/dist/index93.js.map +1 -1
- package/dist/index94.js +1 -1
- package/dist/index94.js.map +1 -1
- package/dist/index95.js +1 -1
- package/dist/index95.js.map +1 -1
- package/dist/index96.js +1 -1
- package/dist/index96.js.map +1 -1
- package/dist/index97.js +1 -1
- package/dist/index97.js.map +1 -1
- package/dist/index98.js +2 -2
- package/dist/index98.js.map +1 -1
- package/dist/index99.js +1 -1
- package/dist/index99.js.map +1 -1
- package/package.json +1 -1
- package/dist/index209.js +0 -1236
- package/dist/index209.js.map +0 -1
- package/dist/index222.js +0 -7
- package/dist/index222.js.map +0 -1
- package/dist/index224.js +0 -62
- package/dist/index224.js.map +0 -1
- package/dist/index226.js +0 -13
- package/dist/index226.js.map +0 -1
package/dist/index30.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index30.js","sources":["../src/components/Pagination/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from 'components/Icon';\n\ninterface PaginationProps {\n currentPage: number;\n itemsPerPage: number;\n totalItems: number;\n onPageChange: (page: number) => void;\n mobileView?: boolean;\n}\n\nconst paginationClassNames = {\n pageNavigation: \"px-[6px] flex items-center justify-center disabled:opacity-50 hover:cursor-pointer\",\n pageItem: \"px-[6px] text-sm flex items-center justify-center rounded border hover:cursor-pointer\"\n}\n\nexport const Pagination: React.FC<PaginationProps> = ({ currentPage, itemsPerPage, totalItems, onPageChange, mobileView = false }) => {\n const totalPages = Math.ceil(totalItems / itemsPerPage);\n const firstPage = 1;\n const lastPage = totalPages;\n const startItem = (currentPage - 1) * itemsPerPage + 1;\n const endItem = Math.min(currentPage * itemsPerPage, totalItems);\n const hasNextPage = endItem < totalItems;\n const hasPrevPage = currentPage > 1;\n\n const renderPageNumbers = () => {\n const pages = [];\n\n const renderPageNumber = (pageNum: number) => {\n return (\n <span\n key={pageNum}\n onClick={() => onPageChange(pageNum)}\n className={`${paginationClassNames.pageItem} ${currentPage === pageNum ? 'bg-[var(--color-gray-100)] border-[var(--color-gray-300)]' : 'border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]'}`}\n data-automation-id={`page-number-${pageNum}`}\n >\n {pageNum}\n </span>\n );\n };\n\n const renderEllipsis = (key: string) => {\n return (\n <span key={key} className=\"w-5 h-5 text-sm rounded border border-[var(--color-gray-200)] flex items-end justify-center\">\n ...\n </span>\n );\n };\n if(mobileView) {\n pages.push(renderPageNumber(currentPage));\n\n return pages;\n }\n if (currentPage <= 3) {\n for (let i = 1; i <= Math.min(3, totalPages); i++) {\n pages.push(renderPageNumber(i));\n }\n\n if (totalPages > 3) {\n pages.push(renderEllipsis(\"ellipsis-end\"));\n pages.push(renderPageNumber(totalPages));\n }\n } else if (currentPage >= totalPages - 2) {\n pages.push(renderPageNumber(firstPage));\n pages.push(renderEllipsis(\"ellipsis-start\"));\n pages.push(renderPageNumber(totalPages - 2));\n pages.push(renderPageNumber(totalPages - 1));\n pages.push(renderPageNumber(totalPages));\n } else {\n pages.push(renderPageNumber(firstPage));\n pages.push(renderEllipsis(\"ellipsis-start\"));\n pages.push(renderPageNumber(currentPage - 1));\n pages.push(renderPageNumber(currentPage));\n pages.push(renderPageNumber(currentPage + 1));\n pages.push(renderEllipsis(\"ellipsis-end\"));\n pages.push(renderPageNumber(lastPage));\n }\n\n return pages;\n };\n\n return (\n <div className=\"flex items-center gap-1 font-normal\" data-automation-id=\"pagination-container\">\n <span className=\"text-sm text-[var(--color-gray-700)] mr-1\" data-automation-id=\"pagination-items-info\">\n {`${mobileView ? \"\" : \"Showing \"}${startItem}-${endItem} of ${totalItems}`}\n </span>\n <span\n onClick={() => hasPrevPage && onPageChange(currentPage - 1)}\n className={`${paginationClassNames.pageNavigation}`}\n data-automation-id=\"pagination-previous-button\"\n >\n <Icon name=\"next\" className=\"rotate-180 transition-transform stroke-[var(--color-gray-600)]\" />\n </span>\n {/* Render page numbers */}\n <div className=\"flex items-center gap-1\">{renderPageNumbers()}</div>\n <span\n onClick={() => hasNextPage && onPageChange(currentPage + 1)}\n className={`${paginationClassNames.pageNavigation}`}\n data-automation-id=\"pagination-next-button\"\n >\n <Icon name=\"next\" />\n </span>\n </div>\n );\n};\n"],"names":["React__default","Icon","paginationClassNames","pageNavigation","pageItem","Pagination","currentPage","itemsPerPage","totalItems","onPageChange","mobileView","totalPages","Math","ceil","firstPage","lastPage","startItem","endItem","min","hasNextPage","hasPrevPage","renderPageNumbers","pages","renderPageNumber","pageNum","React","createElement","key","onClick","className","renderEllipsis","push","i","name"],"mappings":"AAYA,OAAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,MAAMC,IAAuB;AAAA,EAC3BC,gBAAgB;AAAA,EAChBC,UAAU;AACZ,GAEaC,IAAwCA,CAAC;AAAA,EAAEC,aAAAA;AAAAA,EAAaC,cAAAA;AAAAA,EAAcC,YAAAA;AAAAA,EAAYC,cAAAA;AAAAA,EAAcC,YAAAA,IAAa;AAAM,MAAM;AACpI,QAAMC,IAAaC,KAAKC,KAAKL,IAAaD,CAAY,GAChDO,IAAY,GACZC,IAAWJ,GACXK,KAAaV,IAAc,KAAKC,IAAe,GAC/CU,IAAUL,KAAKM,IAAIZ,IAAcC,GAAcC,CAAU,GACzDW,IAAcF,IAAUT,GACxBY,IAAcd,IAAc,GAE5Be,IAAoBA,MAAM;AAC9B,UAAMC,IAAQ,CAAA,GAERC,IAAmBA,CAACC,MAEtBC,gBAAAA,EAAAC,cAAA,QAAA;AAAA,MACEC,KAAKH;AAAAA,MACLI,SAASA,MAAMnB,EAAae,CAAO;AAAA,MACnCK,WAAW,GAAG3B,EAAqBE,QAAQ,IAAIE,MAAgBkB,IAAU,8DAA8D,gEAAgE;AAAA,MACvM,sBAAoB,eAAeA,CAAO;AAAA,
|
|
1
|
+
{"version":3,"file":"index30.js","sources":["../src/components/Pagination/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Icon } from 'components/Icon';\n\ninterface PaginationProps {\n currentPage: number;\n itemsPerPage: number;\n totalItems: number;\n onPageChange: (page: number) => void;\n mobileView?: boolean;\n}\n\nconst paginationClassNames = {\n pageNavigation: \"px-[6px] flex items-center justify-center disabled:opacity-50 hover:cursor-pointer\",\n pageItem: \"px-[6px] text-sm flex items-center justify-center rounded border hover:cursor-pointer\"\n}\n\nexport const Pagination: React.FC<PaginationProps> = ({ currentPage, itemsPerPage, totalItems, onPageChange, mobileView = false }) => {\n const totalPages = Math.ceil(totalItems / itemsPerPage);\n const firstPage = 1;\n const lastPage = totalPages;\n const startItem = (currentPage - 1) * itemsPerPage + 1;\n const endItem = Math.min(currentPage * itemsPerPage, totalItems);\n const hasNextPage = endItem < totalItems;\n const hasPrevPage = currentPage > 1;\n\n const renderPageNumbers = () => {\n const pages = [];\n\n const renderPageNumber = (pageNum: number) => {\n return (\n <span\n key={pageNum}\n onClick={() => onPageChange(pageNum)}\n className={`${paginationClassNames.pageItem} ${currentPage === pageNum ? 'bg-[var(--color-gray-100)] border-[var(--color-gray-300)]' : 'border-[var(--color-gray-200)] hover:bg-[var(--color-gray-50)]'}`}\n data-automation-id={`page-number-${pageNum}`}\n >\n {pageNum}\n </span>\n );\n };\n\n const renderEllipsis = (key: string) => {\n return (\n <span key={key} className=\"w-5 h-5 text-sm rounded border border-[var(--color-gray-200)] flex items-end justify-center\">\n ...\n </span>\n );\n };\n if(mobileView) {\n pages.push(renderPageNumber(currentPage));\n\n return pages;\n }\n if (currentPage <= 3) {\n for (let i = 1; i <= Math.min(3, totalPages); i++) {\n pages.push(renderPageNumber(i));\n }\n\n if (totalPages > 3) {\n pages.push(renderEllipsis(\"ellipsis-end\"));\n pages.push(renderPageNumber(totalPages));\n }\n } else if (currentPage >= totalPages - 2) {\n pages.push(renderPageNumber(firstPage));\n pages.push(renderEllipsis(\"ellipsis-start\"));\n pages.push(renderPageNumber(totalPages - 2));\n pages.push(renderPageNumber(totalPages - 1));\n pages.push(renderPageNumber(totalPages));\n } else {\n pages.push(renderPageNumber(firstPage));\n pages.push(renderEllipsis(\"ellipsis-start\"));\n pages.push(renderPageNumber(currentPage - 1));\n pages.push(renderPageNumber(currentPage));\n pages.push(renderPageNumber(currentPage + 1));\n pages.push(renderEllipsis(\"ellipsis-end\"));\n pages.push(renderPageNumber(lastPage));\n }\n\n return pages;\n };\n\n return (\n <div className=\"flex items-center gap-1 font-normal\" data-automation-id=\"pagination-container\">\n <span className=\"text-sm text-[var(--color-gray-700)] mr-1\" data-automation-id=\"pagination-items-info\">\n {`${mobileView ? \"\" : \"Showing \"}${startItem}-${endItem} of ${totalItems}`}\n </span>\n <span\n onClick={() => hasPrevPage && onPageChange(currentPage - 1)}\n className={`${paginationClassNames.pageNavigation}`}\n data-automation-id=\"pagination-previous-button\"\n >\n <Icon name=\"next\" className=\"rotate-180 transition-transform stroke-[var(--color-gray-600)]\" />\n </span>\n {/* Render page numbers */}\n <div className=\"flex items-center gap-1\">{renderPageNumbers()}</div>\n <span\n onClick={() => hasNextPage && onPageChange(currentPage + 1)}\n className={`${paginationClassNames.pageNavigation}`}\n data-automation-id=\"pagination-next-button\"\n >\n <Icon name=\"next\" />\n </span>\n </div>\n );\n};\n"],"names":["React__default","Icon","paginationClassNames","pageNavigation","pageItem","Pagination","currentPage","itemsPerPage","totalItems","onPageChange","mobileView","totalPages","Math","ceil","firstPage","lastPage","startItem","endItem","min","hasNextPage","hasPrevPage","renderPageNumbers","pages","renderPageNumber","pageNum","React","createElement","key","onClick","className","renderEllipsis","push","i","name"],"mappings":"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"}
|
package/dist/index31.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import e from "react";
|
|
2
2
|
import { Button as N } from "./index3.js";
|
|
3
3
|
import { Badge as I } from "./index9.js";
|
|
4
|
-
import { Icon as
|
|
4
|
+
import { Icon as d } from "./index5.js";
|
|
5
5
|
/* empty css */
|
|
6
6
|
const t = {
|
|
7
7
|
widgetCtn: "flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]",
|
|
@@ -21,16 +21,16 @@ const t = {
|
|
|
21
21
|
requestFeatureImageCtn: "w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]",
|
|
22
22
|
requestFeatureDescriptionCtn: "flex flex-col"
|
|
23
23
|
}, B = ({
|
|
24
|
-
widgetClassName:
|
|
24
|
+
widgetClassName: g = "",
|
|
25
25
|
widgetType: a = "general",
|
|
26
26
|
widgetTitle: r = "",
|
|
27
27
|
widgetDescription: l = "",
|
|
28
28
|
widgetImage: p,
|
|
29
|
-
hasImage:
|
|
29
|
+
hasImage: f = !1,
|
|
30
30
|
hasButtonCta: n = !1,
|
|
31
31
|
hasLinkCta: i = !1,
|
|
32
32
|
ctaText: o = "",
|
|
33
|
-
hasBadge:
|
|
33
|
+
hasBadge: x = !1,
|
|
34
34
|
badgeText: w = "",
|
|
35
35
|
buttonBgColor: u = "secondary",
|
|
36
36
|
onCtaClick: b,
|
|
@@ -38,7 +38,7 @@ const t = {
|
|
|
38
38
|
webinarDateInfo: c,
|
|
39
39
|
webinarSpeaker: s
|
|
40
40
|
}) => {
|
|
41
|
-
const E =
|
|
41
|
+
const E = x && /* @__PURE__ */ e.createElement(I, {
|
|
42
42
|
label: w,
|
|
43
43
|
className: t.widgetBadge,
|
|
44
44
|
bgColor: "var(--color-yellow-50)",
|
|
@@ -52,14 +52,14 @@ const t = {
|
|
|
52
52
|
label: o,
|
|
53
53
|
className: `${t.widgetButtonCta} mt-[4px]`,
|
|
54
54
|
onClick: b
|
|
55
|
-
})), C =
|
|
55
|
+
})), C = f && /* @__PURE__ */ e.createElement("div", {
|
|
56
56
|
className: `${t.widgetImageCtn} widget-image-ctn`
|
|
57
57
|
}, /* @__PURE__ */ e.createElement("img", {
|
|
58
58
|
src: p,
|
|
59
59
|
alt: "widget-image"
|
|
60
60
|
}));
|
|
61
61
|
return /* @__PURE__ */ e.createElement("div", {
|
|
62
|
-
className: `${t.widgetCtn} ${
|
|
62
|
+
className: `${t.widgetCtn} ${g} widget-ctn`,
|
|
63
63
|
onClick: v
|
|
64
64
|
}, a !== "general" && C, /* @__PURE__ */ e.createElement("div", {
|
|
65
65
|
className: t.descriptionCtn
|
|
@@ -71,14 +71,14 @@ const t = {
|
|
|
71
71
|
className: t.webinarInfoCtn
|
|
72
72
|
}, s && /* @__PURE__ */ e.createElement("div", {
|
|
73
73
|
className: `${t.webinarDescriptionInfo} align-baseline`
|
|
74
|
-
}, /* @__PURE__ */ e.createElement(
|
|
74
|
+
}, /* @__PURE__ */ e.createElement(d, {
|
|
75
75
|
name: "people",
|
|
76
76
|
className: "relative top-[2px]"
|
|
77
77
|
}), /* @__PURE__ */ e.createElement("span", {
|
|
78
78
|
className: t.webinarSpeaker
|
|
79
79
|
}, s)), c && /* @__PURE__ */ e.createElement("div", {
|
|
80
80
|
className: `${t.webinarTimeInfo} align-baseline mb-[4px]`
|
|
81
|
-
}, /* @__PURE__ */ e.createElement(
|
|
81
|
+
}, /* @__PURE__ */ e.createElement(d, {
|
|
82
82
|
name: "clock",
|
|
83
83
|
className: "relative top-[2px]"
|
|
84
84
|
}), /* @__PURE__ */ e.createElement("span", {
|
|
@@ -96,6 +96,7 @@ const t = {
|
|
|
96
96
|
}, l), m)) : m));
|
|
97
97
|
};
|
|
98
98
|
export {
|
|
99
|
-
B as Widget
|
|
99
|
+
B as Widget,
|
|
100
|
+
B as default
|
|
100
101
|
};
|
|
101
102
|
//# sourceMappingURL=index31.js.map
|
package/dist/index31.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index31.js","sources":["../src/components/Widget/index.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Button } from \"../Button\";\nimport { Badge } from \"../Badge\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface WidgetProps {\n widgetClassName?: string;\n widgetType?: \"promotion\" | \"webinar\" | \"request-feature\" | \"general\";\n widgetTitle?: string;\n hasBadge?: boolean;\n webinarSpeaker?: string;\n badgeText?: string;\n widgetDescription?: string;\n webinarDateInfo?: string;\n hasImage?: boolean;\n widgetImage?: string;\n hasButtonCta?: boolean;\n buttonBgColor?: 'primary' | 'secondary';\n hasLinkCta?: boolean;\n ctaText?: string;\n onCtaClick?: () => void;\n onWidgetClick?: () => void;\n}\n\nconst className: Map = {\n widgetCtn: 'flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]',\n widgetImageCtn: 'cursor-pointer',\n descriptionCtn: 'p-4 flex flex-col',\n widgetTitle: 'text-[var(--color-gray-900)] mt-[4px] mb-[8px]',\n widgetDescription: 'text-[var(--color-gray-700)] mb-[4px]',\n widgetLinkCta: 'text-[var(--color-blue-500)] cursor-pointer hover:text-[var(--color-blue-600)]',\n widgetButtonCta: 'self-start',\n widgetBadge: 'w-fit',\n webinarInfoCtn: 'flex flex-col gap-2',\n webinarSpeaker: 'text-[var(--color-gray-700)]',\n webinarDate: 'text-[var(--color-gray-700)]',\n webinarDescriptionInfo: 'flex gap-2',\n webinarTimeInfo: 'flex gap-2',\n requestFeatureCtn: 'flex gap-[12px]',\n requestFeatureImageCtn: 'w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]',\n requestFeatureDescriptionCtn: 'flex flex-col',\n};\n\nexport const Widget: FC<WidgetProps> = ({\n widgetClassName = \"\",\n widgetType = 'general',\n widgetTitle = \"\",\n widgetDescription = \"\",\n widgetImage,\n hasImage = false,\n hasButtonCta = false,\n hasLinkCta = false,\n ctaText = \"\",\n hasBadge = false,\n badgeText = \"\",\n buttonBgColor = 'secondary',\n onCtaClick,\n onWidgetClick,\n webinarDateInfo,\n webinarSpeaker,\n}) => {\n\n const renderBadge = hasBadge && (\n <Badge\n label={badgeText}\n className={className.widgetBadge}\n bgColor=\"var(--color-yellow-50)\"\n textColor=\"var(--color-yellow-400)\"\n fontWeight=\"normal\"\n />\n );\n\n const renderCTA = (hasLinkCta || hasButtonCta) && (\n <React.Fragment>\n {hasLinkCta && <span className={className.widgetLinkCta}>{ctaText}</span>}\n {hasButtonCta && <Button type={buttonBgColor} size=\"md\" label={ctaText} className={`${className.widgetButtonCta} mt-[4px]`} onClick={onCtaClick} />}\n </React.Fragment>\n );\n\n const renderImage = hasImage && (\n <div className={`${className.widgetImageCtn} widget-image-ctn`}>\n <img src={widgetImage} alt=\"widget-image\"/>\n </div>\n );\n\n return (\n <div className={`${className.widgetCtn} ${widgetClassName} widget-ctn`} onClick={onWidgetClick}>\n {widgetType !== \"general\" && renderImage}\n <div className={className.descriptionCtn}>\n {widgetType !== \"general\" && renderBadge}\n {widgetType !== \"request-feature\" && <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>}\n\n {([\"promotion\", \"general\"].includes(widgetType)) && (\n <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n )}\n\n {widgetType === \"webinar\" && (\n <div className={className.webinarInfoCtn}>\n {webinarSpeaker && (\n <div className={`${className.webinarDescriptionInfo} align-baseline`}>\n <Icon name=\"people\" className=\"relative top-[2px]\" />\n <span className={className.webinarSpeaker}>{webinarSpeaker}</span>\n </div>\n )}\n {webinarDateInfo && (\n <div className={`${className.webinarTimeInfo} align-baseline mb-[4px]`}>\n <Icon name=\"clock\" className=\"relative top-[2px]\" />\n <span className={className.webinarDate}>{webinarDateInfo}</span>\n </div>\n )}\n </div>\n )}\n\n {widgetType === \"request-feature\" ? (\n <div className={className.requestFeatureCtn}>\n <div className={className.requestFeatureImageCtn} />\n <div className={className.requestFeatureDescriptionCtn}>\n <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>\n <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n {renderCTA}\n </div>\n </div>\n ) : (\n renderCTA\n )}\n </div>\n </div>\n );\n};\n\nexport default Widget;"],"names":["React__default","Button","Badge","Icon","className","widgetCtn","widgetImageCtn","descriptionCtn","widgetTitle","widgetDescription","widgetLinkCta","widgetButtonCta","widgetBadge","webinarInfoCtn","webinarSpeaker","webinarDate","webinarDescriptionInfo","webinarTimeInfo","requestFeatureCtn","requestFeatureImageCtn","requestFeatureDescriptionCtn","Widget","widgetClassName","widgetType","widgetImage","hasImage","hasButtonCta","hasLinkCta","ctaText","hasBadge","badgeText","buttonBgColor","onCtaClick","onWidgetClick","webinarDateInfo","renderBadge","
|
|
1
|
+
{"version":3,"file":"index31.js","sources":["../src/components/Widget/index.tsx"],"sourcesContent":["import React, { FC } from \"react\";\nimport { Map } from \"../../utils/common.types\";\nimport { Button } from \"../Button\";\nimport { Badge } from \"../Badge\";\nimport { Icon } from \"../Icon\";\nimport \"./style.scss\";\n\nexport interface WidgetProps {\n widgetClassName?: string;\n widgetType?: \"promotion\" | \"webinar\" | \"request-feature\" | \"general\";\n widgetTitle?: string;\n hasBadge?: boolean;\n webinarSpeaker?: string;\n badgeText?: string;\n widgetDescription?: string;\n webinarDateInfo?: string;\n hasImage?: boolean;\n widgetImage?: string;\n hasButtonCta?: boolean;\n buttonBgColor?: 'primary' | 'secondary';\n hasLinkCta?: boolean;\n ctaText?: string;\n onCtaClick?: () => void;\n onWidgetClick?: () => void;\n}\n\nconst className: Map = {\n widgetCtn: 'flex flex-col gap-[2px] align-center border border-[var(--color-gray-200)] rounded-[12px] w-[385px]',\n widgetImageCtn: 'cursor-pointer',\n descriptionCtn: 'p-4 flex flex-col',\n widgetTitle: 'text-[var(--color-gray-900)] mt-[4px] mb-[8px]',\n widgetDescription: 'text-[var(--color-gray-700)] mb-[4px]',\n widgetLinkCta: 'text-[var(--color-blue-500)] cursor-pointer hover:text-[var(--color-blue-600)]',\n widgetButtonCta: 'self-start',\n widgetBadge: 'w-fit',\n webinarInfoCtn: 'flex flex-col gap-2',\n webinarSpeaker: 'text-[var(--color-gray-700)]',\n webinarDate: 'text-[var(--color-gray-700)]',\n webinarDescriptionInfo: 'flex gap-2',\n webinarTimeInfo: 'flex gap-2',\n requestFeatureCtn: 'flex gap-[12px]',\n requestFeatureImageCtn: 'w-[48px] h-[48px] border border-[var(--color-gray-200)] rounded-[50%] flex items-center flex-shrink-0 bg-[var(--color-red-50)]',\n requestFeatureDescriptionCtn: 'flex flex-col',\n};\n\nexport const Widget: FC<WidgetProps> = ({\n widgetClassName = \"\",\n widgetType = 'general',\n widgetTitle = \"\",\n widgetDescription = \"\",\n widgetImage,\n hasImage = false,\n hasButtonCta = false,\n hasLinkCta = false,\n ctaText = \"\",\n hasBadge = false,\n badgeText = \"\",\n buttonBgColor = 'secondary',\n onCtaClick,\n onWidgetClick,\n webinarDateInfo,\n webinarSpeaker,\n}) => {\n\n const renderBadge = hasBadge && (\n <Badge\n label={badgeText}\n className={className.widgetBadge}\n bgColor=\"var(--color-yellow-50)\"\n textColor=\"var(--color-yellow-400)\"\n fontWeight=\"normal\"\n />\n );\n\n const renderCTA = (hasLinkCta || hasButtonCta) && (\n <React.Fragment>\n {hasLinkCta && <span className={className.widgetLinkCta}>{ctaText}</span>}\n {hasButtonCta && <Button type={buttonBgColor} size=\"md\" label={ctaText} className={`${className.widgetButtonCta} mt-[4px]`} onClick={onCtaClick} />}\n </React.Fragment>\n );\n\n const renderImage = hasImage && (\n <div className={`${className.widgetImageCtn} widget-image-ctn`}>\n <img src={widgetImage} alt=\"widget-image\"/>\n </div>\n );\n\n return (\n <div className={`${className.widgetCtn} ${widgetClassName} widget-ctn`} onClick={onWidgetClick}>\n {widgetType !== \"general\" && renderImage}\n <div className={className.descriptionCtn}>\n {widgetType !== \"general\" && renderBadge}\n {widgetType !== \"request-feature\" && <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>}\n\n {([\"promotion\", \"general\"].includes(widgetType)) && (\n <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n )}\n\n {widgetType === \"webinar\" && (\n <div className={className.webinarInfoCtn}>\n {webinarSpeaker && (\n <div className={`${className.webinarDescriptionInfo} align-baseline`}>\n <Icon name=\"people\" className=\"relative top-[2px]\" />\n <span className={className.webinarSpeaker}>{webinarSpeaker}</span>\n </div>\n )}\n {webinarDateInfo && (\n <div className={`${className.webinarTimeInfo} align-baseline mb-[4px]`}>\n <Icon name=\"clock\" className=\"relative top-[2px]\" />\n <span className={className.webinarDate}>{webinarDateInfo}</span>\n </div>\n )}\n </div>\n )}\n\n {widgetType === \"request-feature\" ? (\n <div className={className.requestFeatureCtn}>\n <div className={className.requestFeatureImageCtn} />\n <div className={className.requestFeatureDescriptionCtn}>\n <span className={`${className.widgetTitle} widget-title`}>{widgetTitle}</span>\n <span className={`${className.widgetDescription} widget-description`}>{widgetDescription}</span>\n {renderCTA}\n </div>\n </div>\n ) : (\n renderCTA\n )}\n </div>\n </div>\n );\n};\n\nexport default Widget;"],"names":["React__default","Button","Badge","Icon","className","widgetCtn","widgetImageCtn","descriptionCtn","widgetTitle","widgetDescription","widgetLinkCta","widgetButtonCta","widgetBadge","webinarInfoCtn","webinarSpeaker","webinarDate","webinarDescriptionInfo","webinarTimeInfo","requestFeatureCtn","requestFeatureImageCtn","requestFeatureDescriptionCtn","Widget","widgetClassName","widgetType","widgetImage","hasImage","hasButtonCta","hasLinkCta","ctaText","hasBadge","badgeText","buttonBgColor","onCtaClick","onWidgetClick","webinarDateInfo","renderBadge","createElement","label","bgColor","textColor","fontWeight","renderCTA","React","Fragment","type","size","onClick","renderImage","src","alt","includes","name"],"mappings":"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"}
|
package/dist/index32.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index32.js","sources":["../src/components/Radio/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nexport interface RadioProps {\n label: string;\n value: string;\n checked: boolean;\n disabled: boolean;\n name: string;\n onChange?: (props: RadioProps) => void;\n helperLabel?: string;\n maxWidth?: string;\n width?: string;\n radioLabelClassName?: string;\n radioContainerClassName?: string;\n automationId?: string;\n withBorder?: boolean;\n bgColor?: string;\n content?: () => React.ReactNode;\n}\n\nexport function Radio(props: RadioProps) {\n const {\n label,\n value,\n checked,\n disabled,\n name,\n onChange,\n width,\n radioLabelClassName = '',\n radioContainerClassName = '',\n automationId = '',\n bgColor = 'var(--color-white)',\n withBorder = true,\n content\n } = props;\n const radioRef = useRef<HTMLInputElement>(null);\n\n return (\n <div\n className={`se-design-radio-container flex flex-col justify-center items-start gap-2 ${\n disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n } ${\n withBorder ? `border ${checked ? 'border-[#1088E7]' : 'border-[#C9D4E3]'} p-4` : ''\n } rounded-[6px] transition-colors duration-300 ${disabled ? 'opacity-50' : ''} ${radioContainerClassName}`}\n onClick={() => radioRef.current?.click()}\n style={{ width: width || 'auto', backgroundColor: bgColor }}\n data-automation-id={automationId}\n >\n <div className=\"flex items-center gap-[0.625rem]\" data-automation-id=\"radio-field-content\">\n <input\n ref={radioRef}\n type=\"radio\"\n id={value}\n name={name}\n value={value}\n checked={checked}\n disabled={disabled}\n className=\"radio-field-input cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-blue-500)] w-[14px] h-[14px] p-[3px]\"\n onChange={() => {\n onChange && onChange({ ...props, checked: true });\n }}\n />\n <label\n htmlFor={value}\n className={`${props.helperLabel ? 'flex flex-col gap-[6px]' : ''} ${\n disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n }`}\n data-automation-id=\"radio-field-label\"\n >\n <span\n className={`text-sm text-[var(--color-gray-800)] ${radioLabelClassName} `}\n style={{ fontSize: '16px', fontWeight: '400' }}\n >\n {label}\n </span>\n </label>\n </div>\n {checked && content && <div className=\"radio-child-content pl-[1.5rem] w-full\">{content()}</div>}\n {props.helperLabel && (\n <span\n className={`text-sm font-normal text-[var(--color-gray-600)] ${\n props.maxWidth ? `max-w-[${props.maxWidth}]` : 'max-w-full'\n } break-words whitespace-normal`}\n data-automation-id=\"radio-field-helper-text\"\n >\n {props.helperLabel}\n </span>\n )}\n </div>\n );\n}\n"],"names":["Radio","props","label","value","checked","disabled","name","onChange","width","radioLabelClassName","radioContainerClassName","automationId","bgColor","withBorder","content","radioRef","useRef","React","createElement","className","onClick","current","click","style","backgroundColor","ref","type","id","htmlFor","helperLabel","fontSize","fontWeight","maxWidth"],"mappings":";AAoBO,SAASA,EAAMC,GAAmB;
|
|
1
|
+
{"version":3,"file":"index32.js","sources":["../src/components/Radio/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nexport interface RadioProps {\n label: string;\n value: string;\n checked: boolean;\n disabled: boolean;\n name: string;\n onChange?: (props: RadioProps) => void;\n helperLabel?: string;\n maxWidth?: string;\n width?: string;\n radioLabelClassName?: string;\n radioContainerClassName?: string;\n automationId?: string;\n withBorder?: boolean;\n bgColor?: string;\n content?: () => React.ReactNode;\n}\n\nexport function Radio(props: RadioProps) {\n const {\n label,\n value,\n checked,\n disabled,\n name,\n onChange,\n width,\n radioLabelClassName = '',\n radioContainerClassName = '',\n automationId = '',\n bgColor = 'var(--color-white)',\n withBorder = true,\n content\n } = props;\n const radioRef = useRef<HTMLInputElement>(null);\n\n return (\n <div\n className={`se-design-radio-container flex flex-col justify-center items-start gap-2 ${\n disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n } ${\n withBorder ? `border ${checked ? 'border-[#1088E7]' : 'border-[#C9D4E3]'} p-4` : ''\n } rounded-[6px] transition-colors duration-300 ${disabled ? 'opacity-50' : ''} ${radioContainerClassName}`}\n onClick={() => radioRef.current?.click()}\n style={{ width: width || 'auto', backgroundColor: bgColor }}\n data-automation-id={automationId}\n >\n <div className=\"flex items-center gap-[0.625rem]\" data-automation-id=\"radio-field-content\">\n <input\n ref={radioRef}\n type=\"radio\"\n id={value}\n name={name}\n value={value}\n checked={checked}\n disabled={disabled}\n className=\"radio-field-input cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50 text-[var(--color-blue-500)] w-[14px] h-[14px] p-[3px]\"\n onChange={() => {\n onChange && onChange({ ...props, checked: true });\n }}\n />\n <label\n htmlFor={value}\n className={`${props.helperLabel ? 'flex flex-col gap-[6px]' : ''} ${\n disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n }`}\n data-automation-id=\"radio-field-label\"\n >\n <span\n className={`text-sm text-[var(--color-gray-800)] ${radioLabelClassName} `}\n style={{ fontSize: '16px', fontWeight: '400' }}\n >\n {label}\n </span>\n </label>\n </div>\n {checked && content && <div className=\"radio-child-content pl-[1.5rem] w-full\">{content()}</div>}\n {props.helperLabel && (\n <span\n className={`text-sm font-normal text-[var(--color-gray-600)] ${\n props.maxWidth ? `max-w-[${props.maxWidth}]` : 'max-w-full'\n } break-words whitespace-normal`}\n data-automation-id=\"radio-field-helper-text\"\n >\n {props.helperLabel}\n </span>\n )}\n </div>\n );\n}\n"],"names":["Radio","props","label","value","checked","disabled","name","onChange","width","radioLabelClassName","radioContainerClassName","automationId","bgColor","withBorder","content","radioRef","useRef","React","createElement","className","onClick","current","click","style","backgroundColor","ref","type","id","htmlFor","helperLabel","fontSize","fontWeight","maxWidth"],"mappings":";AAoBO,SAASA,EAAMC,GAAmB;AACjC,QAAA;AAAA,IACJC,OAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,qBAAAA,IAAsB;AAAA,IACtBC,yBAAAA,IAA0B;AAAA,IAC1BC,cAAAA,IAAe;AAAA,IACfC,SAAAA,IAAU;AAAA,IACVC,YAAAA,IAAa;AAAA,IACbC,SAAAA;AAAAA,EACEb,IAAAA,GACEc,IAAWC,EAAyB,IAAI;AAG5CC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,4EACTd,IAAW,uBAAuB,gBAAgB,IAElDQ,IAAa,UAAUT,IAAU,qBAAqB,kBAAkB,SAAS,EAAE,iDACpCC,IAAW,eAAe,EAAE,IAAIK,CAAuB;AAAA,IACxGU,SAASA,MAAML,EAASM,SAASC,MAAM;AAAA,IACvCC,OAAO;AAAA,MAAEf,OAAOA,KAAS;AAAA,MAAQgB,iBAAiBZ;AAAAA,IAAQ;AAAA,IAC1D,sBAAoBD;AAAAA,EAAAA,GAEpBO,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAmC,sBAAmB;AAAA,EAAA,GACnED,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEO,KAAKV;AAAAA,IACLW,MAAK;AAAA,IACLC,IAAIxB;AAAAA,IACJG,MAAAA;AAAAA,IACAH,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAc,WAAU;AAAA,IACVZ,UAAUA,MAAM;AACdA,MAAAA,KAAYA,EAAS;AAAA,QAAE,GAAGN;AAAAA,QAAOG,SAAS;AAAA,MAAA,CAAM;AAAA,IAClD;AAAA,EAAA,CACD,GACDc,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEU,SAASzB;AAAAA,IACTgB,WAAW,GAAGlB,EAAM4B,cAAc,4BAA4B,EAAE,IAC9DxB,IAAW,uBAAuB,gBAAgB;AAAA,IAEpD,sBAAmB;AAAA,EAAA,GAEnBa,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACEC,WAAW,wCAAwCV,CAAmB;AAAA,IACtEc,OAAO;AAAA,MAAEO,UAAU;AAAA,MAAQC,YAAY;AAAA,IAAM;AAAA,EAAA,GAE5C7B,CACG,CACD,CACJ,GACJE,KAAWU,KAAWI,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAA0CL,EAAe,CAAA,GAC9Fb,EAAM4B,eACLZ,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IACEC,WAAW,oDACTlB,EAAM+B,WAAW,UAAU/B,EAAM+B,QAAQ,MAAM,YAAY;AAAA,IAE7D,sBAAmB;AAAA,EAAA,GAElB/B,EAAM4B,WACH,CAEL;AAET;"}
|
package/dist/index33.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index33.js","sources":["../src/components/RadioGroup/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Radio, RadioProps } from '../Radio';\n\nexport interface RadioGroupProps {\n options: RadioProps[];\n onRadioGroupChange: (obj: RadioProps) => void;\n value?: string;\n direction?: 'row' | 'column';\n automationId?: string;\n withBorder?: boolean;\n /**\n * Accessible name for the radio group.\n * Applied to the fieldset element.\n * Prefer ariaLabelledBy when a visible label exists.\n */\n ariaLabel?: string;\n /**\n * ID(s) of element(s) that label this radio group.\n * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n */\n ariaLabelledBy?: string;\n /**\n * Shared name attribute for all radio inputs in the group.\n * Enables arrow-key navigation between options.\n * Must be unique per RadioGroup instance on the page.\n */\n name: string;\n}\n\nexport function RadioGroup(props: RadioGroupProps) {\n const { automationId = '', withBorder = true, ariaLabel, ariaLabelledBy, name } = props;\n const handleRadioChange = (obj: RadioProps) => {\n props.onRadioGroupChange({ ...obj, checked: true });\n };\n \n // Prefer aria-labelledby when provided, fallback to aria-label\n const fieldsetProps = ariaLabelledBy\n ? { 'aria-labelledby': ariaLabelledBy }\n : ariaLabel\n ? { 'aria-label': ariaLabel }\n : {};\n \n return (\n <div data-automation-id={automationId}>\n <fieldset className={`flex flex-wrap gap-2 ${props.direction === 'column' ? 'flex-col' : 'flex-row'}`} {...fieldsetProps}>\n {props.options.map((option) => (\n <Radio key={option.value} {...option} name={name} onChange={handleRadioChange} checked={option.value === props.value} withBorder={withBorder} />\n ))}\n </fieldset>\n </div>\n );\n}\n"],"names":["RadioGroup","props","automationId","withBorder","ariaLabel","ariaLabelledBy","name","handleRadioChange","obj","onRadioGroupChange","checked","fieldsetProps","React","createElement","_extends","className","direction","options","map","option","Radio","key","value","onChange"],"mappings":";;;;;;;;;;;AA6BO,SAASA,EAAWC,GAAwB;
|
|
1
|
+
{"version":3,"file":"index33.js","sources":["../src/components/RadioGroup/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Radio, RadioProps } from '../Radio';\n\nexport interface RadioGroupProps {\n options: RadioProps[];\n onRadioGroupChange: (obj: RadioProps) => void;\n value?: string;\n direction?: 'row' | 'column';\n automationId?: string;\n withBorder?: boolean;\n /**\n * Accessible name for the radio group.\n * Applied to the fieldset element.\n * Prefer ariaLabelledBy when a visible label exists.\n */\n ariaLabel?: string;\n /**\n * ID(s) of element(s) that label this radio group.\n * Preferred over ariaLabel when a visible label exists (keeps SR and visual text in sync).\n */\n ariaLabelledBy?: string;\n /**\n * Shared name attribute for all radio inputs in the group.\n * Enables arrow-key navigation between options.\n * Must be unique per RadioGroup instance on the page.\n */\n name: string;\n}\n\nexport function RadioGroup(props: RadioGroupProps) {\n const { automationId = '', withBorder = true, ariaLabel, ariaLabelledBy, name } = props;\n const handleRadioChange = (obj: RadioProps) => {\n props.onRadioGroupChange({ ...obj, checked: true });\n };\n \n // Prefer aria-labelledby when provided, fallback to aria-label\n const fieldsetProps = ariaLabelledBy\n ? { 'aria-labelledby': ariaLabelledBy }\n : ariaLabel\n ? { 'aria-label': ariaLabel }\n : {};\n \n return (\n <div data-automation-id={automationId}>\n <fieldset className={`flex flex-wrap gap-2 ${props.direction === 'column' ? 'flex-col' : 'flex-row'}`} {...fieldsetProps}>\n {props.options.map((option) => (\n <Radio key={option.value} {...option} name={name} onChange={handleRadioChange} checked={option.value === props.value} withBorder={withBorder} />\n ))}\n </fieldset>\n </div>\n );\n}\n"],"names":["RadioGroup","props","automationId","withBorder","ariaLabel","ariaLabelledBy","name","handleRadioChange","obj","onRadioGroupChange","checked","fieldsetProps","React","createElement","_extends","className","direction","options","map","option","Radio","key","value","onChange"],"mappings":";;;;;;;;;;;AA6BO,SAASA,EAAWC,GAAwB;AAC3C,QAAA;AAAA,IAAEC,cAAAA,IAAe;AAAA,IAAIC,YAAAA,IAAa;AAAA,IAAMC,WAAAA;AAAAA,IAAWC,gBAAAA;AAAAA,IAAgBC,MAAAA;AAAAA,EAASL,IAAAA,GAC5EM,IAAoBA,CAACC,MAAoB;AAC7CP,IAAAA,EAAMQ,mBAAmB;AAAA,MAAE,GAAGD;AAAAA,MAAKE,SAAS;AAAA,IAAA,CAAM;AAAA,EAAA,GAI9CC,IAAgBN,IAClB;AAAA,IAAE,mBAAmBA;AAAAA,MACrBD,IACA;AAAA,IAAE,cAAcA;AAAAA,MAChB;AAGFQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAK,sBAAoBX;AAAAA,EACvBU,GAAAA,gBAAAA,EAAAC,cAAA,YAAAC,EAAA;AAAA,IAAUC,WAAW,wBAAwBd,EAAMe,cAAc,WAAW,aAAa,UAAU;AAAA,EAAG,GAAKL,CAAa,GACrHV,EAAMgB,QAAQC,IAAKC,CAClBP,MAAAA,gBAAAA,EAAAC,cAACO,GAAKN,EAAA;AAAA,IAACO,KAAKF,EAAOG;AAAAA,KAAWH,GAAM;AAAA,IAAEb,MAAAA;AAAAA,IAAYiB,UAAUhB;AAAAA,IAAmBG,SAASS,EAAOG,UAAUrB,EAAMqB;AAAAA,IAAOnB,YAAAA;AAAAA,EAAAA,CAAyB,CAAA,CAChJ,CACO,CACP;AAET;"}
|
package/dist/index34.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import e, { useState as h, useEffect as E } from "react";
|
|
2
2
|
import { Icon as N } from "./index5.js";
|
|
3
|
-
import { useStableId as $ } from "./
|
|
3
|
+
import { useStableId as $ } from "./index188.js";
|
|
4
4
|
import { getRegionAttributes as I } from "./index65.js";
|
|
5
5
|
import { useAccessiblePress as _ } from "./index66.js";
|
|
6
6
|
function r() {
|
package/dist/index34.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index34.js","sources":["../src/components/Accordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { useAccessiblePress } from '../../utils/a11y';\nimport { getRegionAttributes } from '../../utils/a11y/regionAttributes';\n\nexport interface AccordionProps {\n title: string;\n titleTag?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n titleClassName?: string;\n content: React.ReactNode;\n defaultOpen?: boolean;\n showSeparator?: boolean;\n overflow?: 'hidden' | 'visible' | 'scroll' | 'auto' | undefined | string;\n automationId?: string;\n id?: string;\n}\n\nexport const Accordion: FC<AccordionProps> = ({\n title,\n titleTag: TitleTag = 'h4',\n content,\n defaultOpen,\n overflow,\n titleClassName = '',\n showSeparator = true,\n automationId = '',\n id\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n \n useEffect(() => {\n setIsOpen(defaultOpen || false);\n }, [defaultOpen]);\n\n // Generate stable IDs for ARIA relationships\n const titleId = useStableId(id, 'accordion');\n const contentId = `${titleId}-content`; \n\n // Use accessible press hook for keyboard + mouse handling\n const { pressProps, role, tabIndex } = useAccessiblePress({\n onClick: () => setIsOpen(!isOpen),\n isNative: false // Not a native button, so hook adds Enter/Space handling\n });\n\n // Get region attributes for content panel\n const regionAttributes = getRegionAttributes({\n titleId,\n isFocusable: false\n });\n\n const focusVisibleClasses = 'group-focus-visible:[outline:var(--focus-width)_solid_var(--focus-color)] group-focus-visible:[outline-offset:var(--focus-offset)] group-focus-visible:p-[2px]';\n\n return (\n <div>\n <div\n {...pressProps}\n role={role}\n tabIndex={tabIndex}\n aria-expanded={isOpen}\n aria-controls={contentId}\n className=\"se-design-accordion-header flex items-center cursor-pointer group focus-visible:outline-none\"\n data-automation-id={automationId}\n >\n <div className={`flex items-center gap-2 rounded ${focusVisibleClasses}`}>\n <div \n className={`transform transition-transform duration-300 ${isOpen ? 'rotate-90' : ''}`}\n >\n <Icon name=\"rightSide\" />\n </div>\n <TitleTag\n id={titleId}\n className={`se-design-accordion-title text-[var(--color-gray-900)]] font-inter text-[18px] font-semibold leading-[24px] ${titleClassName}`}\n >\n {title}\n </TitleTag>\n </div>\n </div>\n <div\n id={contentId}\n {...regionAttributes}\n className={`\n se-design-accordion-content\n overflow-${overflow || 'hidden'}\n transition-all\n duration-300\n ml-1\n mt-[1vw]\n ${isOpen ? 'max-h-[1000vh] opacity-100 visible h-auto' : 'hidden'}`}\n >\n {content}\n </div>\n {showSeparator && <div className={`h-[1px] bg-[#E5E7EB] mt-[12px] ${!isOpen ? 'block' : 'hidden'}`}></div>}\n </div>\n );\n};\n"],"names":["Accordion","title","titleTag","TitleTag","content","defaultOpen","overflow","titleClassName","showSeparator","automationId","id","isOpen","setIsOpen","useState","useEffect","titleId","useStableId","contentId","pressProps","role","tabIndex","useAccessiblePress","onClick","isNative","regionAttributes","getRegionAttributes","isFocusable","React","createElement","_extends","className","Icon","name"],"mappings":";;;;;;;;;;;;;;AAkBO,MAAMA,IAAgCA,CAAC;AAAA,EAC5CC,OAAAA;AAAAA,EACAC,UAAUC,IAAW;AAAA,EACrBC,SAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,gBAAAA,IAAiB;AAAA,EACjBC,eAAAA,IAAgB;AAAA,EAChBC,cAAAA,IAAe;AAAA,EACfC,IAAAA;AACF,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1CC,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAUP,KAAe,EAAK;AAAA,
|
|
1
|
+
{"version":3,"file":"index34.js","sources":["../src/components/Accordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\nimport { useStableId } from '../../utils/useStableId';\nimport { useAccessiblePress } from '../../utils/a11y';\nimport { getRegionAttributes } from '../../utils/a11y/regionAttributes';\n\nexport interface AccordionProps {\n title: string;\n titleTag?: 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n titleClassName?: string;\n content: React.ReactNode;\n defaultOpen?: boolean;\n showSeparator?: boolean;\n overflow?: 'hidden' | 'visible' | 'scroll' | 'auto' | undefined | string;\n automationId?: string;\n id?: string;\n}\n\nexport const Accordion: FC<AccordionProps> = ({\n title,\n titleTag: TitleTag = 'h4',\n content,\n defaultOpen,\n overflow,\n titleClassName = '',\n showSeparator = true,\n automationId = '',\n id\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n \n useEffect(() => {\n setIsOpen(defaultOpen || false);\n }, [defaultOpen]);\n\n // Generate stable IDs for ARIA relationships\n const titleId = useStableId(id, 'accordion');\n const contentId = `${titleId}-content`; \n\n // Use accessible press hook for keyboard + mouse handling\n const { pressProps, role, tabIndex } = useAccessiblePress({\n onClick: () => setIsOpen(!isOpen),\n isNative: false // Not a native button, so hook adds Enter/Space handling\n });\n\n // Get region attributes for content panel\n const regionAttributes = getRegionAttributes({\n titleId,\n isFocusable: false\n });\n\n const focusVisibleClasses = 'group-focus-visible:[outline:var(--focus-width)_solid_var(--focus-color)] group-focus-visible:[outline-offset:var(--focus-offset)] group-focus-visible:p-[2px]';\n\n return (\n <div>\n <div\n {...pressProps}\n role={role}\n tabIndex={tabIndex}\n aria-expanded={isOpen}\n aria-controls={contentId}\n className=\"se-design-accordion-header flex items-center cursor-pointer group focus-visible:outline-none\"\n data-automation-id={automationId}\n >\n <div className={`flex items-center gap-2 rounded ${focusVisibleClasses}`}>\n <div \n className={`transform transition-transform duration-300 ${isOpen ? 'rotate-90' : ''}`}\n >\n <Icon name=\"rightSide\" />\n </div>\n <TitleTag\n id={titleId}\n className={`se-design-accordion-title text-[var(--color-gray-900)]] font-inter text-[18px] font-semibold leading-[24px] ${titleClassName}`}\n >\n {title}\n </TitleTag>\n </div>\n </div>\n <div\n id={contentId}\n {...regionAttributes}\n className={`\n se-design-accordion-content\n overflow-${overflow || 'hidden'}\n transition-all\n duration-300\n ml-1\n mt-[1vw]\n ${isOpen ? 'max-h-[1000vh] opacity-100 visible h-auto' : 'hidden'}`}\n >\n {content}\n </div>\n {showSeparator && <div className={`h-[1px] bg-[#E5E7EB] mt-[12px] ${!isOpen ? 'block' : 'hidden'}`}></div>}\n </div>\n );\n};\n"],"names":["Accordion","title","titleTag","TitleTag","content","defaultOpen","overflow","titleClassName","showSeparator","automationId","id","isOpen","setIsOpen","useState","useEffect","titleId","useStableId","contentId","pressProps","role","tabIndex","useAccessiblePress","onClick","isNative","regionAttributes","getRegionAttributes","isFocusable","React","createElement","_extends","className","Icon","name"],"mappings":";;;;;;;;;;;;;;AAkBO,MAAMA,IAAgCA,CAAC;AAAA,EAC5CC,OAAAA;AAAAA,EACAC,UAAUC,IAAW;AAAA,EACrBC,SAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,gBAAAA,IAAiB;AAAA,EACjBC,eAAAA,IAAgB;AAAA,EAChBC,cAAAA,IAAe;AAAA,EACfC,IAAAA;AACF,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAE1CC,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAUP,KAAe,EAAK;AAAA,EAAA,GAC7B,CAACA,CAAW,CAAC;AAGVU,QAAAA,IAAUC,EAAYN,GAAI,WAAW,GACrCO,IAAY,GAAGF,CAAO,YAGtB;AAAA,IAAEG,YAAAA;AAAAA,IAAYC,MAAAA;AAAAA,IAAMC,UAAAA;AAAAA,MAAaC,EAAmB;AAAA,IACxDC,SAASA,MAAMV,EAAU,CAACD,CAAM;AAAA,IAChCY,UAAU;AAAA;AAAA,EAAA,CACX,GAGKC,IAAmBC,EAAoB;AAAA,IAC3CV,SAAAA;AAAAA,IACAW,aAAa;AAAA,EAAA,CACd;AAKCC,SAAAA,gBAAAA,EAAAC,cACED,OAAAA,MAAAA,gBAAAA,EAAAC,cAAA,OAAAC,EAAA,CAAA,GACMX,GAAU;AAAA,IACdC,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACA,iBAAeT;AAAAA,IACf,iBAAeM;AAAAA,IACfa,WAAU;AAAA,IACV,sBAAoBrB;AAAAA,EAAAA,CAEpBkB,GAAAC,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKE,WAAW;AAAA,EAAsD,GACpEF,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IACEE,WAAW,+CAA+CnB,IAAS,cAAc,EAAE;AAAA,EAAA,GAEnFiB,gBAAAA,EAAAA,cAACG,GAAI;AAAA,IAACC,MAAK;AAAA,EAAa,CAAA,CACrB,GACLL,gBAAAA,EAAAC,cAACzB,GAAQ;AAAA,IACPO,IAAIK;AAAAA,IACJe,WAAW,+GAA+GvB,CAAc;AAAA,EAAA,GAEvIN,CACO,CACP,CACF,GACL2B,gBAAAA,EAAAA,cAAA,OAAAC,EAAA;AAAA,IACEnB,IAAIO;AAAAA,KACAO,GAAgB;AAAA,IACpBM,WAAW;AAAA;AAAA,mBAEAxB,KAAY,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,UAK7BK,IAAS,8CAA8C,QAAQ;AAAA,EAAA,CAAG,GAEnEP,CACE,GACJI,KAAiBmB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKE,WAAW,kCAAmCnB,IAAmB,WAAV,OAAkB;AAAA,EAAS,CAAA,CACtG;AAET;"}
|
package/dist/index35.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index35.js","sources":["../src/components/CustomAccordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\n\nexport interface CustomAccordionProps {\n renderAccordionContents: (props: { isOpen: boolean }) => React.ReactNode;\n renderAccordionSrcElement: (props: { isOpen: boolean }) => React.ReactNode;\n defaultOpen?: boolean;\n className?: string;\n arrowPosition?: 'left' | 'right';\n contentClassName?: string;\n disabled?: boolean;\n automationId?: string;\n}\n\nexport const CustomAccordion: FC<CustomAccordionProps> = ({\n renderAccordionContents,\n renderAccordionSrcElement,\n defaultOpen,\n className = '',\n arrowPosition = 'left',\n contentClassName = '',\n disabled = false,\n automationId = ''\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n useEffect(() => {\n setIsOpen(defaultOpen || false);\n }, [defaultOpen]);\n\n const getArrowRotation = () => {\n if (disabled) {\n return '';\n }\n if (arrowPosition === 'left') {\n return isOpen ? 'rotate-90' : '';\n }\n return isOpen ? 'rotate-180' : '';\n };\n\n return (\n <div className={`se-design-accordion ${className}`} data-automation-id={automationId}>\n <div className=\"flex flex-col\">\n <div\n className=\"se-design-accordion-src flex items-center cursor-pointer\"\n onClick={() => !disabled && setIsOpen(!isOpen)}\n >\n {arrowPosition === 'left' && (\n <div\n className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()} ${\n disabled ? 'opacity-30 pointer-events-none' : ''\n }`}\n >\n <Icon name=\"rightSide\" />\n </div>\n )}\n <div className=\"se-design-accordion-elements flex-1\">\n <div className=\"se-design-accordion-src-element title\">{renderAccordionSrcElement({ isOpen })}</div>\n </div>\n {arrowPosition === 'right' && (\n <div\n className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()} ${\n disabled ? 'opacity-30 pointer-events-none' : ''\n }`}\n >\n <Icon name=\"chevron\" />\n </div>\n )}\n </div>\n {isOpen && (\n <div className={`se-design-accordion-content transition-all duration-300 mt-1 ${contentClassName}`}>\n {renderAccordionContents({ isOpen })}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["CustomAccordion","renderAccordionContents","renderAccordionSrcElement","defaultOpen","className","arrowPosition","contentClassName","disabled","automationId","isOpen","setIsOpen","useState","useEffect","getArrowRotation","React","createElement","onClick","Icon","name"],"mappings":";;AAcO,MAAMA,IAA4CA,CAAC;AAAA,EACxDC,yBAAAA;AAAAA,EACAC,2BAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,eAAAA,IAAgB;AAAA,EAChBC,kBAAAA,IAAmB;AAAA,EACnBC,UAAAA,IAAW;AAAA,EACXC,cAAAA,IAAe;AACjB,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAC1CC,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAUP,KAAe,EAAK;AAAA,
|
|
1
|
+
{"version":3,"file":"index35.js","sources":["../src/components/CustomAccordion/index.tsx"],"sourcesContent":["import React, { FC, useEffect, useState } from 'react';\nimport { Icon } from '../Icon';\n\nexport interface CustomAccordionProps {\n renderAccordionContents: (props: { isOpen: boolean }) => React.ReactNode;\n renderAccordionSrcElement: (props: { isOpen: boolean }) => React.ReactNode;\n defaultOpen?: boolean;\n className?: string;\n arrowPosition?: 'left' | 'right';\n contentClassName?: string;\n disabled?: boolean;\n automationId?: string;\n}\n\nexport const CustomAccordion: FC<CustomAccordionProps> = ({\n renderAccordionContents,\n renderAccordionSrcElement,\n defaultOpen,\n className = '',\n arrowPosition = 'left',\n contentClassName = '',\n disabled = false,\n automationId = ''\n}) => {\n const [isOpen, setIsOpen] = useState(false);\n useEffect(() => {\n setIsOpen(defaultOpen || false);\n }, [defaultOpen]);\n\n const getArrowRotation = () => {\n if (disabled) {\n return '';\n }\n if (arrowPosition === 'left') {\n return isOpen ? 'rotate-90' : '';\n }\n return isOpen ? 'rotate-180' : '';\n };\n\n return (\n <div className={`se-design-accordion ${className}`} data-automation-id={automationId}>\n <div className=\"flex flex-col\">\n <div\n className=\"se-design-accordion-src flex items-center cursor-pointer\"\n onClick={() => !disabled && setIsOpen(!isOpen)}\n >\n {arrowPosition === 'left' && (\n <div\n className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()} ${\n disabled ? 'opacity-30 pointer-events-none' : ''\n }`}\n >\n <Icon name=\"rightSide\" />\n </div>\n )}\n <div className=\"se-design-accordion-elements flex-1\">\n <div className=\"se-design-accordion-src-element title\">{renderAccordionSrcElement({ isOpen })}</div>\n </div>\n {arrowPosition === 'right' && (\n <div\n className={`se-design-accordion-icon transform transition-transform duration-300 ${getArrowRotation()} ${\n disabled ? 'opacity-30 pointer-events-none' : ''\n }`}\n >\n <Icon name=\"chevron\" />\n </div>\n )}\n </div>\n {isOpen && (\n <div className={`se-design-accordion-content transition-all duration-300 mt-1 ${contentClassName}`}>\n {renderAccordionContents({ isOpen })}\n </div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["CustomAccordion","renderAccordionContents","renderAccordionSrcElement","defaultOpen","className","arrowPosition","contentClassName","disabled","automationId","isOpen","setIsOpen","useState","useEffect","getArrowRotation","React","createElement","onClick","Icon","name"],"mappings":";;AAcO,MAAMA,IAA4CA,CAAC;AAAA,EACxDC,yBAAAA;AAAAA,EACAC,2BAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA,IAAY;AAAA,EACZC,eAAAA,IAAgB;AAAA,EAChBC,kBAAAA,IAAmB;AAAA,EACnBC,UAAAA,IAAW;AAAA,EACXC,cAAAA,IAAe;AACjB,MAAM;AACJ,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK;AAC1CC,EAAAA,EAAU,MAAM;AACdF,IAAAA,EAAUP,KAAe,EAAK;AAAA,EAAA,GAC7B,CAACA,CAAW,CAAC;AAEhB,QAAMU,IAAmBA,MACnBN,IACK,KAELF,MAAkB,SACbI,IAAS,cAAc,KAEzBA,IAAS,eAAe;AAI/BK,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKX,WAAW,uBAAuBA,CAAS;AAAA,IAAI,sBAAoBI;AAAAA,EAAAA,GACtEO,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKX,WAAU;AAAA,EAAA,GACbW,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IACEX,WAAU;AAAA,IACVY,SAASA,MAAM,CAACT,KAAYG,EAAU,CAACD,CAAM;AAAA,EAE5CJ,GAAAA,MAAkB,UACjBS,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEX,WAAW,wEAAwES,EAAkB,CAAA,IACnGN,IAAW,mCAAmC,EAAE;AAAA,EAAA,GAGlDQ,gBAAAA,EAAAA,cAACE,GAAI;AAAA,IAACC,MAAK;AAAA,EAAa,CAAA,CACrB,GAEPJ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKX,WAAU;AAAA,EAAA,GACbW,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKX,WAAU;AAAA,KAAyCF,EAA0B;AAAA,IAAEO,QAAAA;AAAAA,EAAAA,CAAQ,CAAO,CAChG,GACJJ,MAAkB,WACjBS,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEX,WAAW,wEAAwES,EAAkB,CAAA,IACnGN,IAAW,mCAAmC,EAAE;AAAA,EAAA,GAGlDQ,gBAAAA,EAAAA,cAACE,GAAI;AAAA,IAACC,MAAK;AAAA,EAAW,CAAA,CACnB,CAEJ,GACJT,KACCK,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKX,WAAW,gEAAgEE,CAAgB;AAAA,KAC7FL,EAAwB;AAAA,IAAEQ,QAAAA;AAAAA,EAAAA,CAAQ,CAChC,CAEJ,CACF;AAET;"}
|
package/dist/index36.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index36.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\n\nexport interface InputWithTagsProps {\n value: string[];\n onChange?: (tags: string[]) => void;\n placeholder?: string;\n className?: string;\n error?: boolean;\n errorMessage?: string;\n label?: string;\n automationId?: string;\n}\n\nexport function InputWithTags({ \n value, \n onChange, \n placeholder, \n className, \n error, \n errorMessage, \n label,\n automationId = ''\n}: InputWithTagsProps) {\n const [tags, setTags] = useState<string[]>([...value]);\n const [inputValue, setInputValue] = useState('');\n const inputRef = useRef<HTMLInputElement>(null);\n\n const removeTag = (indexToRemove: number) => {\n const newTags = tags.filter((_, i) => i !== indexToRemove);\n setTags(newTags);\n onChange?.(newTags);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && inputValue.trim()) {\n e.preventDefault();\n const newTags = [...tags, inputValue.trim()];\n setTags(newTags);\n setInputValue(\"\");\n onChange?.(newTags);\n } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n removeTag(tags.length - 1);\n }\n };\n\n return (\n <div className=\"input-with-tags-main-container\" data-automation-id={automationId}>\n {label && <div className=\"label-container\">{label}</div>}\n <div \n className={`input-with-tags-container ${error ? 'input-with-tags-error' : ''} ${className}`} \n onClick={() => inputRef.current?.focus()}\n >\n {tags.map((tag, index) => (\n <span key={index} className=\"tag-in-inputwithtags\" data-automation-id={`input-tag-${index}`}>\n {tag} \n <Icon\n name=\"close\"\n className=\"close-icon-in-inputwithtags\"\n ariaLabel={`Remove tag ${tag}`}\n onClick={() => removeTag(index)}\n shouldStopPropagation\n />\n </span>\n ))}\n <input\n className=\"input-with-tags-input\"\n ref={inputRef}\n type=\"text\"\n value={inputValue}\n onChange={(e) => setInputValue(e.target.value)}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n data-automation-id=\"input-with-tags-input-field\"\n />\n </div>\n {error && <div className=\"error-message\">{errorMessage}</div>}\n </div>\n );\n}"],"names":["React__default","useState","useRef","Icon","InputWithTags","value","onChange","placeholder","className","error","errorMessage","label","automationId","tags","setTags","inputValue","setInputValue","inputRef","removeTag","indexToRemove","newTags","filter","_","i","handleKeyDown","e","key","trim","preventDefault","length","React","createElement","onClick","current","focus","map","tag","index","name","ariaLabel","shouldStopPropagation","ref","type","target","onKeyDown"],"mappings":"AAeO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAASC,EAAc;AAAA,EAC1BC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA,IAAe;AACC,GAAG;
|
|
1
|
+
{"version":3,"file":"index36.js","sources":["../src/components/InputWithTags/index.tsx"],"sourcesContent":["import React, { useState, KeyboardEvent, useRef } from \"react\";\nimport './styles.scss';\nimport { Icon } from '../Icon';\n\nexport interface InputWithTagsProps {\n value: string[];\n onChange?: (tags: string[]) => void;\n placeholder?: string;\n className?: string;\n error?: boolean;\n errorMessage?: string;\n label?: string;\n automationId?: string;\n}\n\nexport function InputWithTags({ \n value, \n onChange, \n placeholder, \n className, \n error, \n errorMessage, \n label,\n automationId = ''\n}: InputWithTagsProps) {\n const [tags, setTags] = useState<string[]>([...value]);\n const [inputValue, setInputValue] = useState('');\n const inputRef = useRef<HTMLInputElement>(null);\n\n const removeTag = (indexToRemove: number) => {\n const newTags = tags.filter((_, i) => i !== indexToRemove);\n setTags(newTags);\n onChange?.(newTags);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && inputValue.trim()) {\n e.preventDefault();\n const newTags = [...tags, inputValue.trim()];\n setTags(newTags);\n setInputValue(\"\");\n onChange?.(newTags);\n } else if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n removeTag(tags.length - 1);\n }\n };\n\n return (\n <div className=\"input-with-tags-main-container\" data-automation-id={automationId}>\n {label && <div className=\"label-container\">{label}</div>}\n <div \n className={`input-with-tags-container ${error ? 'input-with-tags-error' : ''} ${className}`} \n onClick={() => inputRef.current?.focus()}\n >\n {tags.map((tag, index) => (\n <span key={index} className=\"tag-in-inputwithtags\" data-automation-id={`input-tag-${index}`}>\n {tag} \n <Icon\n name=\"close\"\n className=\"close-icon-in-inputwithtags\"\n ariaLabel={`Remove tag ${tag}`}\n onClick={() => removeTag(index)}\n shouldStopPropagation\n />\n </span>\n ))}\n <input\n className=\"input-with-tags-input\"\n ref={inputRef}\n type=\"text\"\n value={inputValue}\n onChange={(e) => setInputValue(e.target.value)}\n onKeyDown={handleKeyDown}\n placeholder={placeholder}\n data-automation-id=\"input-with-tags-input-field\"\n />\n </div>\n {error && <div className=\"error-message\">{errorMessage}</div>}\n </div>\n );\n}"],"names":["React__default","useState","useRef","Icon","InputWithTags","value","onChange","placeholder","className","error","errorMessage","label","automationId","tags","setTags","inputValue","setInputValue","inputRef","removeTag","indexToRemove","newTags","filter","_","i","handleKeyDown","e","key","trim","preventDefault","length","React","createElement","onClick","current","focus","map","tag","index","name","ariaLabel","shouldStopPropagation","ref","type","target","onKeyDown"],"mappings":"AAeO,OAAAA,KAAA,YAAAC,GAAA,UAAAC,SAAA;AAAA,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAASC,EAAc;AAAA,EAC1BC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA,IAAe;AACC,GAAG;AACb,QAAA,CAACC,GAAMC,CAAO,IAAIb,EAAmB,CAAC,GAAGI,CAAK,CAAC,GAC/C,CAACU,GAAYC,CAAa,IAAIf,EAAS,EAAE,GACzCgB,IAAWf,EAAyB,IAAI,GAExCgB,IAAYA,CAACC,MAA0B;AACzC,UAAMC,IAAUP,EAAKQ,OAAO,CAACC,GAAGC,MAAMA,MAAMJ,CAAa;AACzDL,IAAAA,EAAQM,CAAO,GACfd,IAAWc,CAAO;AAAA,EAAA,GAGhBI,IAAgBA,CAACC,MAAuC;AAC1D,QAAIA,EAAEC,QAAQ,WAAWX,EAAWY,QAAQ;AACxCF,MAAAA,EAAEG,eAAe;AACjB,YAAMR,IAAU,CAAC,GAAGP,GAAME,EAAWY,KAAM,CAAA;AAC3Cb,MAAAA,EAAQM,CAAO,GACfJ,EAAc,EAAE,GAChBV,IAAWc,CAAO;AAAA,IAAA,MACtB,CAAWK,EAAEC,QAAQ,eAAeX,MAAe,MAAMF,EAAKgB,SAAS,KACzDhB,EAAAA,EAAKgB,SAAS,CAAC;AAAA,EAC7B;AAIAC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,IAAiC,sBAAoBI;AAAAA,EAC/DD,GAAAA,KAASoB,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,EAAmBG,GAAAA,CAAW,GACvDmB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACIvB,WAAW,6BAA6BC,IAAQ,0BAA0B,EAAE,IAAID,CAAS;AAAA,IACzFwB,SAASA,MAAMf,EAASgB,SAASC,MAAM;AAAA,EAAA,GAEtCrB,EAAKsB,IAAI,CAACC,GAAKC,MACZP,gBAAAA,EAAAC,cAAA,QAAA;AAAA,IAAML,KAAKW;AAAAA,IAAO7B,WAAU;AAAA,IAAuB,sBAAoB,aAAa6B,CAAK;AAAA,EACpFD,GAAAA,GACDL,gBAAAA,EAAAA,cAAC5B,GAAI;AAAA,IACDmC,MAAK;AAAA,IACL9B,WAAU;AAAA,IACV+B,WAAW,cAAcH,CAAG;AAAA,IAC5BJ,SAASA,MAAMd,EAAUmB,CAAK;AAAA,IAC9BG,uBAAqB;AAAA,EACxB,CAAA,CACC,CACT,GACDV,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IACIvB,WAAU;AAAA,IACViC,KAAKxB;AAAAA,IACLyB,MAAK;AAAA,IACLrC,OAAOU;AAAAA,IACPT,UAAWmB,CAAAA,MAAMT,EAAcS,EAAEkB,OAAOtC,KAAK;AAAA,IAC7CuC,WAAWpB;AAAAA,IACXjB,aAAAA;AAAAA,IACA,sBAAmB;AAAA,EACtB,CAAA,CACA,GACJE,KAASqB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKvB,WAAU;AAAA,EAAA,GAAiBE,CAAkB,CAC3D;AAEb;"}
|
package/dist/index37.js
CHANGED
|
@@ -3,8 +3,8 @@ import { Popover as ve } from "./index18.js";
|
|
|
3
3
|
import { Icon as we } from "./index5.js";
|
|
4
4
|
import { Checkbox as Ee } from "./index22.js";
|
|
5
5
|
import { Button as G } from "./index3.js";
|
|
6
|
-
import { useCombobox as ke } from "./
|
|
7
|
-
import { useStableId as be } from "./
|
|
6
|
+
import { useCombobox as ke } from "./index194.js";
|
|
7
|
+
import { useStableId as be } from "./index188.js";
|
|
8
8
|
/* empty css */
|
|
9
9
|
function g() {
|
|
10
10
|
return g = Object.assign ? Object.assign.bind() : function(v) {
|
package/dist/index37.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index37.js","sources":["../src/components/DropdownWithInputTags/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, forwardRef, ForwardedRef, useImperativeHandle, KeyboardEvent, useCallback } from 'react';\nimport { Popover, PopoverHandle } from '../Popover';\nimport { Icon } from '../Icon';\nimport { Checkbox } from '../Checkbox';\nimport { Button } from '../Button';\nimport { useCombobox } from '../../utils/a11y';\nimport { useStableId } from '../../utils/useStableId';\nimport './styles.scss';\n\nexport interface DropdownOption {\n id: string | number;\n label: string;\n value: string;\n [key: string]: any; // Allow additional properties\n}\n\nexport interface DropdownWithInputTagsHandle {\n toggleDropdown: () => void;\n}\n\nexport interface DropdownWithInputTagsProps {\n value: string[];\n onChange?: (tags: string[]) => void;\n placeholder?: string;\n className?: string;\n options?: DropdownOption[];\n renderOption?: (\n option: DropdownOption, \n props: { \n id: string; \n role: 'option'; \n 'aria-selected': boolean; \n onMouseEnter: () => void;\n className: string;\n },\n onSelect: (option: DropdownOption) => void\n ) => React.ReactNode;\n label?: string;\n automationId?: string;\n noOptionsMessage?: string;\n allowCustomTags?: boolean;\n disabled?: boolean;\n type?: 'select' | 'multi-select' |'multi-select-without-cta';\n showInput?: boolean;\n displayTagBy?: 'label' | 'value';\n}\n\nexport const DropdownWithInputTags = forwardRef<DropdownWithInputTagsHandle, DropdownWithInputTagsProps>(\n (\n {\n value,\n onChange,\n placeholder = \"Type to search or add custom tags...\",\n className = '',\n options = [],\n renderOption,\n label,\n automationId = '',\n noOptionsMessage = \"No options found\",\n allowCustomTags = true,\n disabled = false,\n type = 'select',\n showInput = true,\n displayTagBy = 'label'\n },\n ref: ForwardedRef<DropdownWithInputTagsHandle>\n ) => {\n // Define initValues at the top, right after props\n const initValues = (values: string[]) => {\n return values.map(val => {\n const found = options.find(opt => opt.value === val);\n return found ? { label: found.label, value: found.value } : { label: val, value: val };\n });\n };\n\n // Now use it in useState\n const [tags, setTags] = useState<{ label: string; value: string }[]>(() => {\n return initValues(value || []);\n });\n const [inputValue, setInputValue] = useState('');\n const [filteredOptions, setFilteredOptions] = useState<DropdownOption[]>(options);\n const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n const popoverRef = useRef<PopoverHandle>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const applyClickedRef = useRef<boolean>(false);\n \n const isMultiSelectWithoutCTA = type === 'multi-select-without-cta';\n const isMultiSelect = type === 'multi-select' ||isMultiSelectWithoutCTA;\n\n // Generate stable ID for listbox\n const listboxId = useStableId(automationId, 'dropdown-input-tags-listbox');\n\n const handleSelectOption = useCallback(\n (option: DropdownOption) => {\n if (disabled) return;\n\n const newTags = [...tags];\n if (!newTags.some((tag) => tag.value === option.value)) {\n newTags.push({ label: option.label, value: option.value });\n setTags(newTags);\n onChange?.(newTags.map((tag) => tag.value));\n }\n setInputValue('');\n setIsDropdownOpen(false);\n },\n [disabled, tags, onChange]\n );\n\n const handleMultiSelectDropdownOptionClick = useCallback(\n (isSelected: boolean, option: DropdownOption) => {\n let newSelectedTags: { label: string; value: string }[] = [];\n if (isSelected) {\n newSelectedTags = [...tags, { label: option.label, value: option.value }];\n } else {\n newSelectedTags = tags.filter((tag) => tag.value !== option.value);\n }\n setTags(newSelectedTags);\n if (isMultiSelectWithoutCTA) {\n onChange?.(newSelectedTags.map((tag) => tag.value));\n }\n },\n [tags, isMultiSelectWithoutCTA, onChange]\n );\n\n const ADD_CUSTOM_TAG_VALUE = '__add_custom_tag__';\n\n const handleSelectFromDropdown = useCallback((option: DropdownOption) => {\n if (disabled) return;\n\n if (option.value === ADD_CUSTOM_TAG_VALUE) {\n const trimmed = inputValue.trim();\n if (!trimmed) return;\n const newTags = [...tags];\n if (!newTags.some((tag) => tag.value === trimmed)) {\n newTags.push({ label: trimmed, value: trimmed });\n setTags(newTags);\n onChange?.(newTags.map((tag) => tag.value));\n }\n setInputValue('');\n setIsDropdownOpen(false);\n return;\n }\n\n if (isMultiSelect) {\n const isSelected = tags.some(tag => tag.value === option.value);\n handleMultiSelectDropdownOptionClick(!isSelected, option);\n } else {\n handleSelectOption(option);\n }\n }, [disabled, isMultiSelect, tags, inputValue, onChange, handleMultiSelectDropdownOptionClick, handleSelectOption]);\n\n const effectiveItems: DropdownOption[] =\n filteredOptions.length > 0\n ? filteredOptions\n : allowCustomTags && inputValue.trim()\n ? [{ id: ADD_CUSTOM_TAG_VALUE, label: `Add \"${inputValue.trim()}\"`, value: ADD_CUSTOM_TAG_VALUE }]\n : [];\n\n // Combobox hook for keyboard navigation and ARIA\n const {\n containerProps,\n inputProps: comboboxInputProps,\n listboxProps,\n getOptionProps,\n highlightedIndex,\n setHighlightedIndex\n } = useCombobox({\n items: effectiveItems,\n isOpen: isDropdownOpen,\n onOpenChange: setIsDropdownOpen,\n onSelect: handleSelectFromDropdown,\n listboxId,\n hasItems: effectiveItems.length > 0\n });\n\n\n useEffect(() => {\n if (applyClickedRef.current) {\n applyClickedRef.current = false;\n return;\n }\n setTags(initValues(value || []));\n }, [value, options, isDropdownOpen]);\n\n\n useEffect(() => {\n // const isInputEmpty = !inputValue.trim();\n const filtered = options.filter(option =>\n option.label.toLowerCase().includes(inputValue.toLowerCase()) ||\n option.value.toLowerCase().includes(inputValue.toLowerCase())\n );\n setFilteredOptions(filtered);\n }, [inputValue, options]);\n\n const handleRemoveTag = (indexToRemove: number) => {\n if (disabled) return;\n \n const newTags = tags.filter((_, index) => index !== indexToRemove);\n setTags(newTags);\n \n //in multiselect if tag removed while dorpdownopen, do not call onchange\n if(!isMultiSelect || isMultiSelectWithoutCTA ||(isMultiSelect && !isDropdownOpen)) {\n onChange?.(newTags.map(tag => tag.value));\n }\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (disabled) return;\n \n // Handle Backspace to remove last tag (preserve existing behavior)\n if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n e.preventDefault();\n const newTags = tags.slice(0, -1);\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n return;\n }\n\n // Handle Enter for custom tags when no options match\n if (e.key === 'Enter' && inputValue.trim() && filteredOptions.length === 0 && allowCustomTags) {\n e.preventDefault();\n const newTags = [...tags];\n if (!newTags.some(tag => tag.value === inputValue.trim())) {\n newTags.push({ label: inputValue.trim(), value: inputValue.trim() });\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n }\n setInputValue('');\n setHighlightedIndex(-1);\n setIsDropdownOpen(false);\n return;\n }\n\n // Let combobox hook handle all other keyboard events (Arrow keys, Enter, Escape, etc.)\n comboboxInputProps.onKeyDown(e);\n };\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (disabled) return;\n \n const newValue = e.target.value;\n setInputValue(newValue);\n setHighlightedIndex(-1); // Reset highlighted index when user types\n \n if (newValue.trim() && !isDropdownOpen) {\n setIsDropdownOpen(true);\n }\n };\n\n const handleInputFocus = () => {\n if (disabled) return;\n \n if (inputValue.trim() || options.length > 0) {\n setIsDropdownOpen(true);\n }\n };\n\n const handleInputContainerClick = (e: React.MouseEvent) => {\n if (disabled) return;\n \n e.stopPropagation();\n inputRef.current?.focus();\n if (!isDropdownOpen && (inputValue.trim() || options.length > 0)) {\n setIsDropdownOpen(true);\n }\n };\n\n const handlePopoverWrapperClick = (e: React.MouseEvent) => {\n if (disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n \n const target = e.target as HTMLElement;\n const isInputArea = target.closest('.input-with-tags-container');\n if (isInputArea) {\n e.stopPropagation();\n }\n };\n\n const toggleDropdown = () => {\n if (disabled) return;\n setIsDropdownOpen(!isDropdownOpen);\n };\n\n useImperativeHandle(ref, () => ({ toggleDropdown }), []);\n\n const defaultRenderOption = (\n option: DropdownOption,\n index: number,\n onSelect: (option: DropdownOption) => void,\n disabled: boolean\n ) => {\n const isSelected = tags.some((tag) => tag.value === option.value);\n const isHighlighted = highlightedIndex === index;\n const optionProps = getOptionProps(index, isSelected);\n \n return (\n <div\n key={option.id}\n {...optionProps}\n className={`dropdown-with-input-tags-option ${isHighlighted ? 'highlighted' : ''}`}\n onClick={() => !disabled && onSelect(option)}\n onMouseEnter={() => setHighlightedIndex(index)}\n data-automation-id={`${automationId}-option-${option.id}`}\n >\n <span className=\"option-label\">{option.label}</span>\n {option.value !== option.label && <span className=\"option-value\">{option.value}</span>}\n </div>\n );\n };\n const handleApplySelectedDropDownValues = () => {\n applyClickedRef.current = true;\n const newTagValues = tags.map(tag => tag.value);\n onChange?.(newTagValues);\n setIsDropdownOpen(false);\n };\n\n const clearSelectedDropDownValues = () => {\n setTags([]);\n };\n const multiSelectRenderOption = (option: DropdownOption, index: number) => {\n const isOptionSelected = tags.some(tag => tag.value === option.value);\n const isHighlighted = highlightedIndex === index;\n const optionProps = getOptionProps(index, isOptionSelected);\n \n return (\n <div\n key={option.id}\n {...optionProps}\n className={`dropdown-with-input-tags-option dropdown-with-input-tags-multi-select-option ${isHighlighted ? 'highlighted' : ''}`}\n aria-checked={isOptionSelected}\n onClick={() => !disabled && handleMultiSelectDropdownOptionClick(!isOptionSelected, option)}\n onMouseEnter={() => setHighlightedIndex(index)}\n data-automation-id={`${automationId}-option-${option.id}`}\n >\n <span onClick={(e) => e.stopPropagation()}>\n <Checkbox\n automationId=\"checkbox\"\n className=\"checkbox\"\n defaultChecked={isOptionSelected}\n onChange={(value) => handleMultiSelectDropdownOptionClick(value, option)}\n label={option.label}\n />\n </span>\n </div>\n );\n };\n\n const multiSelectRenderCTAs = () => {\n return (\n <div className=\"dropdown-with-input-tags-ctas-container\">\n <Button label=\"Clear\" type=\"link\" size=\"sm\" onClick={clearSelectedDropDownValues} automationId={`${automationId}-clear-button`} />\n <Button label=\"Apply\" type=\"primary\" size=\"sm\" onClick={handleApplySelectedDropDownValues} automationId={`${automationId}-apply-button`} />\n </div>\n );\n };\n\n \n\n return (\n <div\n className={`dropdown-with-input-tags-wrapper ${className} ${disabled ? 'disabled-wrapper' : ''}`}\n data-automation-id={automationId}\n {...containerProps}\n >\n {label && <label id={`${automationId}-label`} className=\"dropdown-with-input-tags-label\">{label}</label>}\n\n <div onClick={handlePopoverWrapperClick}>\n <Popover\n ref={popoverRef}\n className=\"dropdown-with-input-tags-popover\"\n contentWidth=\"full\"\n position=\"bottom-left\"\n isPopoverOpen={!disabled && isDropdownOpen}\n onPopoverToggle={disabled ? () => {} : setIsDropdownOpen}\n disableClickToggle={true}\n renderPopoverContents={({ closePopoverCb }) => (\n <>\n <div\n {...listboxProps}\n className=\"dropdown-with-input-tags-content\"\n {...(isMultiSelect && { 'aria-multiselectable': 'true' })}\n >\n {effectiveItems.length > 0 ? (\n effectiveItems.map((option, index) => {\n if (option.value === ADD_CUSTOM_TAG_VALUE) {\n const isHighlighted = highlightedIndex === index;\n const optionProps = getOptionProps(index, false);\n return (\n <div\n key={option.id}\n {...optionProps}\n className={`dropdown-with-input-tags-option dropdown-with-input-tags-custom-option ${isHighlighted ? 'highlighted' : ''}`}\n onClick={() => {\n if (disabled) return;\n handleSelectFromDropdown(option);\n closePopoverCb();\n }}\n onMouseEnter={() => setHighlightedIndex(index)}\n >\n Add \"{inputValue.trim()}\"\n </div>\n );\n }\n if (isMultiSelect) {\n return multiSelectRenderOption(option, index);\n }\n \n const isSelected = tags.some((tag) => tag.value === option.value);\n const isHighlighted = highlightedIndex === index;\n const optionProps = getOptionProps(index, isSelected);\n const optionPropsWithHandlers = {\n ...optionProps,\n onMouseEnter: () => setHighlightedIndex(index),\n className: `dropdown-with-input-tags-option ${isHighlighted ? 'highlighted' : ''}`\n };\n \n return renderOption\n ? renderOption(option, optionPropsWithHandlers, handleSelectOption)\n : defaultRenderOption(option, index, handleSelectOption, disabled);\n })\n ) : (\n <div className=\"dropdown-with-input-tags-no-options\">\n <div className=\"dropdown-with-input-tags-no-options-text\" role=\"status\" aria-live=\"polite\">\n {noOptionsMessage}\n </div>\n </div>\n )}\n </div>\n {isMultiSelect && !isMultiSelectWithoutCTA && multiSelectRenderCTAs()}\n </>\n )}\n renderPopoverSrcElement={() => (\n <div className=\"dropdown-with-input-tags-input-container\">\n <div\n className={`input-with-tags-container ${disabled ? 'disabled-input-with-tags-container' : ''}`}\n onClick={handleInputContainerClick}\n >\n {tags.map((tag, index) => (\n <span key={index} className=\"tag-in-inputwithtags\">\n {tag[displayTagBy]}\n {!disabled && (\n <Icon\n name=\"close\"\n className=\"close-icon-in-inputwithtags\"\n ariaLabel={`Remove tag ${tag[displayTagBy]}`}\n onClick={() => handleRemoveTag(index)}\n shouldStopPropagation\n />\n )}\n </span>\n ))}\n {(showInput ||!tags.length) && (\n <input\n ref={inputRef}\n {...comboboxInputProps}\n type=\"text\"\n value={inputValue}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n onFocus={handleInputFocus}\n placeholder={tags.length === 0 ? placeholder : ''}\n className=\"input-with-tags-input\"\n disabled={disabled}\n aria-label={label || 'Search and select options'}\n />\n )}\n </div>\n </div>\n )}\n automationId={automationId}\n popoverContentAutomationId={`${automationId}-content`}\n />\n </div>\n </div>\n );\n }\n); "],"names":["DropdownWithInputTags","value","onChange","placeholder","className","options","renderOption","label","automationId","noOptionsMessage","allowCustomTags","disabled","type","showInput","displayTagBy","ref","initValues","values","map","val","found","find","opt","tags","setTags","useState","inputValue","setInputValue","filteredOptions","setFilteredOptions","isDropdownOpen","setIsDropdownOpen","popoverRef","useRef","inputRef","applyClickedRef","isMultiSelectWithoutCTA","isMultiSelect","listboxId","useStableId","handleSelectOption","useCallback","option","newTags","some","tag","push","handleMultiSelectDropdownOptionClick","isSelected","newSelectedTags","filter","ADD_CUSTOM_TAG_VALUE","handleSelectFromDropdown","trimmed","trim","effectiveItems","length","id","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","onSelect","hasItems","useEffect","current","filtered","toLowerCase","includes","handleRemoveTag","indexToRemove","_","index","handleKeyDown","e","key","preventDefault","slice","onKeyDown","handleInputChange","newValue","target","handleInputFocus","handleInputContainerClick","stopPropagation","focus","handlePopoverWrapperClick","closest","toggleDropdown","useImperativeHandle","defaultRenderOption","isHighlighted","optionProps","React","createElement","_extends","onClick","onMouseEnter","handleApplySelectedDropDownValues","newTagValues","clearSelectedDropDownValues","multiSelectRenderOption","isOptionSelected","Checkbox","defaultChecked","multiSelectRenderCTAs","Button","size","Popover","contentWidth","position","isPopoverOpen","onPopoverToggle","disableClickToggle","renderPopoverContents","closePopoverCb","Fragment","optionPropsWithHandlers","role","renderPopoverSrcElement","Icon","name","ariaLabel","shouldStopPropagation","onFocus","popoverContentAutomationId"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index37.js","sources":["../src/components/DropdownWithInputTags/index.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, forwardRef, ForwardedRef, useImperativeHandle, KeyboardEvent, useCallback } from 'react';\nimport { Popover, PopoverHandle } from '../Popover';\nimport { Icon } from '../Icon';\nimport { Checkbox } from '../Checkbox';\nimport { Button } from '../Button';\nimport { useCombobox } from '../../utils/a11y';\nimport { useStableId } from '../../utils/useStableId';\nimport './styles.scss';\n\nexport interface DropdownOption {\n id: string | number;\n label: string;\n value: string;\n [key: string]: any; // Allow additional properties\n}\n\nexport interface DropdownWithInputTagsHandle {\n toggleDropdown: () => void;\n}\n\nexport interface DropdownWithInputTagsProps {\n value: string[];\n onChange?: (tags: string[]) => void;\n placeholder?: string;\n className?: string;\n options?: DropdownOption[];\n renderOption?: (\n option: DropdownOption, \n props: { \n id: string; \n role: 'option'; \n 'aria-selected': boolean; \n onMouseEnter: () => void;\n className: string;\n },\n onSelect: (option: DropdownOption) => void\n ) => React.ReactNode;\n label?: string;\n automationId?: string;\n noOptionsMessage?: string;\n allowCustomTags?: boolean;\n disabled?: boolean;\n type?: 'select' | 'multi-select' |'multi-select-without-cta';\n showInput?: boolean;\n displayTagBy?: 'label' | 'value';\n}\n\nexport const DropdownWithInputTags = forwardRef<DropdownWithInputTagsHandle, DropdownWithInputTagsProps>(\n (\n {\n value,\n onChange,\n placeholder = \"Type to search or add custom tags...\",\n className = '',\n options = [],\n renderOption,\n label,\n automationId = '',\n noOptionsMessage = \"No options found\",\n allowCustomTags = true,\n disabled = false,\n type = 'select',\n showInput = true,\n displayTagBy = 'label'\n },\n ref: ForwardedRef<DropdownWithInputTagsHandle>\n ) => {\n // Define initValues at the top, right after props\n const initValues = (values: string[]) => {\n return values.map(val => {\n const found = options.find(opt => opt.value === val);\n return found ? { label: found.label, value: found.value } : { label: val, value: val };\n });\n };\n\n // Now use it in useState\n const [tags, setTags] = useState<{ label: string; value: string }[]>(() => {\n return initValues(value || []);\n });\n const [inputValue, setInputValue] = useState('');\n const [filteredOptions, setFilteredOptions] = useState<DropdownOption[]>(options);\n const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n const popoverRef = useRef<PopoverHandle>(null);\n const inputRef = useRef<HTMLInputElement>(null);\n const applyClickedRef = useRef<boolean>(false);\n \n const isMultiSelectWithoutCTA = type === 'multi-select-without-cta';\n const isMultiSelect = type === 'multi-select' ||isMultiSelectWithoutCTA;\n\n // Generate stable ID for listbox\n const listboxId = useStableId(automationId, 'dropdown-input-tags-listbox');\n\n const handleSelectOption = useCallback(\n (option: DropdownOption) => {\n if (disabled) return;\n\n const newTags = [...tags];\n if (!newTags.some((tag) => tag.value === option.value)) {\n newTags.push({ label: option.label, value: option.value });\n setTags(newTags);\n onChange?.(newTags.map((tag) => tag.value));\n }\n setInputValue('');\n setIsDropdownOpen(false);\n },\n [disabled, tags, onChange]\n );\n\n const handleMultiSelectDropdownOptionClick = useCallback(\n (isSelected: boolean, option: DropdownOption) => {\n let newSelectedTags: { label: string; value: string }[] = [];\n if (isSelected) {\n newSelectedTags = [...tags, { label: option.label, value: option.value }];\n } else {\n newSelectedTags = tags.filter((tag) => tag.value !== option.value);\n }\n setTags(newSelectedTags);\n if (isMultiSelectWithoutCTA) {\n onChange?.(newSelectedTags.map((tag) => tag.value));\n }\n },\n [tags, isMultiSelectWithoutCTA, onChange]\n );\n\n const ADD_CUSTOM_TAG_VALUE = '__add_custom_tag__';\n\n const handleSelectFromDropdown = useCallback((option: DropdownOption) => {\n if (disabled) return;\n\n if (option.value === ADD_CUSTOM_TAG_VALUE) {\n const trimmed = inputValue.trim();\n if (!trimmed) return;\n const newTags = [...tags];\n if (!newTags.some((tag) => tag.value === trimmed)) {\n newTags.push({ label: trimmed, value: trimmed });\n setTags(newTags);\n onChange?.(newTags.map((tag) => tag.value));\n }\n setInputValue('');\n setIsDropdownOpen(false);\n return;\n }\n\n if (isMultiSelect) {\n const isSelected = tags.some(tag => tag.value === option.value);\n handleMultiSelectDropdownOptionClick(!isSelected, option);\n } else {\n handleSelectOption(option);\n }\n }, [disabled, isMultiSelect, tags, inputValue, onChange, handleMultiSelectDropdownOptionClick, handleSelectOption]);\n\n const effectiveItems: DropdownOption[] =\n filteredOptions.length > 0\n ? filteredOptions\n : allowCustomTags && inputValue.trim()\n ? [{ id: ADD_CUSTOM_TAG_VALUE, label: `Add \"${inputValue.trim()}\"`, value: ADD_CUSTOM_TAG_VALUE }]\n : [];\n\n // Combobox hook for keyboard navigation and ARIA\n const {\n containerProps,\n inputProps: comboboxInputProps,\n listboxProps,\n getOptionProps,\n highlightedIndex,\n setHighlightedIndex\n } = useCombobox({\n items: effectiveItems,\n isOpen: isDropdownOpen,\n onOpenChange: setIsDropdownOpen,\n onSelect: handleSelectFromDropdown,\n listboxId,\n hasItems: effectiveItems.length > 0\n });\n\n\n useEffect(() => {\n if (applyClickedRef.current) {\n applyClickedRef.current = false;\n return;\n }\n setTags(initValues(value || []));\n }, [value, options, isDropdownOpen]);\n\n\n useEffect(() => {\n // const isInputEmpty = !inputValue.trim();\n const filtered = options.filter(option =>\n option.label.toLowerCase().includes(inputValue.toLowerCase()) ||\n option.value.toLowerCase().includes(inputValue.toLowerCase())\n );\n setFilteredOptions(filtered);\n }, [inputValue, options]);\n\n const handleRemoveTag = (indexToRemove: number) => {\n if (disabled) return;\n \n const newTags = tags.filter((_, index) => index !== indexToRemove);\n setTags(newTags);\n \n //in multiselect if tag removed while dorpdownopen, do not call onchange\n if(!isMultiSelect || isMultiSelectWithoutCTA ||(isMultiSelect && !isDropdownOpen)) {\n onChange?.(newTags.map(tag => tag.value));\n }\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n if (disabled) return;\n \n // Handle Backspace to remove last tag (preserve existing behavior)\n if (e.key === 'Backspace' && inputValue === \"\" && tags.length > 0) {\n e.preventDefault();\n const newTags = tags.slice(0, -1);\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n return;\n }\n\n // Handle Enter for custom tags when no options match\n if (e.key === 'Enter' && inputValue.trim() && filteredOptions.length === 0 && allowCustomTags) {\n e.preventDefault();\n const newTags = [...tags];\n if (!newTags.some(tag => tag.value === inputValue.trim())) {\n newTags.push({ label: inputValue.trim(), value: inputValue.trim() });\n setTags(newTags);\n onChange?.(newTags.map(tag => tag.value));\n }\n setInputValue('');\n setHighlightedIndex(-1);\n setIsDropdownOpen(false);\n return;\n }\n\n // Let combobox hook handle all other keyboard events (Arrow keys, Enter, Escape, etc.)\n comboboxInputProps.onKeyDown(e);\n };\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (disabled) return;\n \n const newValue = e.target.value;\n setInputValue(newValue);\n setHighlightedIndex(-1); // Reset highlighted index when user types\n \n if (newValue.trim() && !isDropdownOpen) {\n setIsDropdownOpen(true);\n }\n };\n\n const handleInputFocus = () => {\n if (disabled) return;\n \n if (inputValue.trim() || options.length > 0) {\n setIsDropdownOpen(true);\n }\n };\n\n const handleInputContainerClick = (e: React.MouseEvent) => {\n if (disabled) return;\n \n e.stopPropagation();\n inputRef.current?.focus();\n if (!isDropdownOpen && (inputValue.trim() || options.length > 0)) {\n setIsDropdownOpen(true);\n }\n };\n\n const handlePopoverWrapperClick = (e: React.MouseEvent) => {\n if (disabled) {\n e.preventDefault();\n e.stopPropagation();\n return;\n }\n \n const target = e.target as HTMLElement;\n const isInputArea = target.closest('.input-with-tags-container');\n if (isInputArea) {\n e.stopPropagation();\n }\n };\n\n const toggleDropdown = () => {\n if (disabled) return;\n setIsDropdownOpen(!isDropdownOpen);\n };\n\n useImperativeHandle(ref, () => ({ toggleDropdown }), []);\n\n const defaultRenderOption = (\n option: DropdownOption,\n index: number,\n onSelect: (option: DropdownOption) => void,\n disabled: boolean\n ) => {\n const isSelected = tags.some((tag) => tag.value === option.value);\n const isHighlighted = highlightedIndex === index;\n const optionProps = getOptionProps(index, isSelected);\n \n return (\n <div\n key={option.id}\n {...optionProps}\n className={`dropdown-with-input-tags-option ${isHighlighted ? 'highlighted' : ''}`}\n onClick={() => !disabled && onSelect(option)}\n onMouseEnter={() => setHighlightedIndex(index)}\n data-automation-id={`${automationId}-option-${option.id}`}\n >\n <span className=\"option-label\">{option.label}</span>\n {option.value !== option.label && <span className=\"option-value\">{option.value}</span>}\n </div>\n );\n };\n const handleApplySelectedDropDownValues = () => {\n applyClickedRef.current = true;\n const newTagValues = tags.map(tag => tag.value);\n onChange?.(newTagValues);\n setIsDropdownOpen(false);\n };\n\n const clearSelectedDropDownValues = () => {\n setTags([]);\n };\n const multiSelectRenderOption = (option: DropdownOption, index: number) => {\n const isOptionSelected = tags.some(tag => tag.value === option.value);\n const isHighlighted = highlightedIndex === index;\n const optionProps = getOptionProps(index, isOptionSelected);\n \n return (\n <div\n key={option.id}\n {...optionProps}\n className={`dropdown-with-input-tags-option dropdown-with-input-tags-multi-select-option ${isHighlighted ? 'highlighted' : ''}`}\n aria-checked={isOptionSelected}\n onClick={() => !disabled && handleMultiSelectDropdownOptionClick(!isOptionSelected, option)}\n onMouseEnter={() => setHighlightedIndex(index)}\n data-automation-id={`${automationId}-option-${option.id}`}\n >\n <span onClick={(e) => e.stopPropagation()}>\n <Checkbox\n automationId=\"checkbox\"\n className=\"checkbox\"\n defaultChecked={isOptionSelected}\n onChange={(value) => handleMultiSelectDropdownOptionClick(value, option)}\n label={option.label}\n />\n </span>\n </div>\n );\n };\n\n const multiSelectRenderCTAs = () => {\n return (\n <div className=\"dropdown-with-input-tags-ctas-container\">\n <Button label=\"Clear\" type=\"link\" size=\"sm\" onClick={clearSelectedDropDownValues} automationId={`${automationId}-clear-button`} />\n <Button label=\"Apply\" type=\"primary\" size=\"sm\" onClick={handleApplySelectedDropDownValues} automationId={`${automationId}-apply-button`} />\n </div>\n );\n };\n\n \n\n return (\n <div\n className={`dropdown-with-input-tags-wrapper ${className} ${disabled ? 'disabled-wrapper' : ''}`}\n data-automation-id={automationId}\n {...containerProps}\n >\n {label && <label id={`${automationId}-label`} className=\"dropdown-with-input-tags-label\">{label}</label>}\n\n <div onClick={handlePopoverWrapperClick}>\n <Popover\n ref={popoverRef}\n className=\"dropdown-with-input-tags-popover\"\n contentWidth=\"full\"\n position=\"bottom-left\"\n isPopoverOpen={!disabled && isDropdownOpen}\n onPopoverToggle={disabled ? () => {} : setIsDropdownOpen}\n disableClickToggle={true}\n renderPopoverContents={({ closePopoverCb }) => (\n <>\n <div\n {...listboxProps}\n className=\"dropdown-with-input-tags-content\"\n {...(isMultiSelect && { 'aria-multiselectable': 'true' })}\n >\n {effectiveItems.length > 0 ? (\n effectiveItems.map((option, index) => {\n if (option.value === ADD_CUSTOM_TAG_VALUE) {\n const isHighlighted = highlightedIndex === index;\n const optionProps = getOptionProps(index, false);\n return (\n <div\n key={option.id}\n {...optionProps}\n className={`dropdown-with-input-tags-option dropdown-with-input-tags-custom-option ${isHighlighted ? 'highlighted' : ''}`}\n onClick={() => {\n if (disabled) return;\n handleSelectFromDropdown(option);\n closePopoverCb();\n }}\n onMouseEnter={() => setHighlightedIndex(index)}\n >\n Add \"{inputValue.trim()}\"\n </div>\n );\n }\n if (isMultiSelect) {\n return multiSelectRenderOption(option, index);\n }\n \n const isSelected = tags.some((tag) => tag.value === option.value);\n const isHighlighted = highlightedIndex === index;\n const optionProps = getOptionProps(index, isSelected);\n const optionPropsWithHandlers = {\n ...optionProps,\n onMouseEnter: () => setHighlightedIndex(index),\n className: `dropdown-with-input-tags-option ${isHighlighted ? 'highlighted' : ''}`\n };\n \n return renderOption\n ? renderOption(option, optionPropsWithHandlers, handleSelectOption)\n : defaultRenderOption(option, index, handleSelectOption, disabled);\n })\n ) : (\n <div className=\"dropdown-with-input-tags-no-options\">\n <div className=\"dropdown-with-input-tags-no-options-text\" role=\"status\" aria-live=\"polite\">\n {noOptionsMessage}\n </div>\n </div>\n )}\n </div>\n {isMultiSelect && !isMultiSelectWithoutCTA && multiSelectRenderCTAs()}\n </>\n )}\n renderPopoverSrcElement={() => (\n <div className=\"dropdown-with-input-tags-input-container\">\n <div\n className={`input-with-tags-container ${disabled ? 'disabled-input-with-tags-container' : ''}`}\n onClick={handleInputContainerClick}\n >\n {tags.map((tag, index) => (\n <span key={index} className=\"tag-in-inputwithtags\">\n {tag[displayTagBy]}\n {!disabled && (\n <Icon\n name=\"close\"\n className=\"close-icon-in-inputwithtags\"\n ariaLabel={`Remove tag ${tag[displayTagBy]}`}\n onClick={() => handleRemoveTag(index)}\n shouldStopPropagation\n />\n )}\n </span>\n ))}\n {(showInput ||!tags.length) && (\n <input\n ref={inputRef}\n {...comboboxInputProps}\n type=\"text\"\n value={inputValue}\n onChange={handleInputChange}\n onKeyDown={handleKeyDown}\n onFocus={handleInputFocus}\n placeholder={tags.length === 0 ? placeholder : ''}\n className=\"input-with-tags-input\"\n disabled={disabled}\n aria-label={label || 'Search and select options'}\n />\n )}\n </div>\n </div>\n )}\n automationId={automationId}\n popoverContentAutomationId={`${automationId}-content`}\n />\n </div>\n </div>\n );\n }\n); "],"names":["DropdownWithInputTags","value","onChange","placeholder","className","options","renderOption","label","automationId","noOptionsMessage","allowCustomTags","disabled","type","showInput","displayTagBy","ref","initValues","values","map","val","found","find","opt","tags","setTags","useState","inputValue","setInputValue","filteredOptions","setFilteredOptions","isDropdownOpen","setIsDropdownOpen","popoverRef","useRef","inputRef","applyClickedRef","isMultiSelectWithoutCTA","isMultiSelect","listboxId","useStableId","handleSelectOption","useCallback","option","newTags","some","tag","push","handleMultiSelectDropdownOptionClick","isSelected","newSelectedTags","filter","ADD_CUSTOM_TAG_VALUE","handleSelectFromDropdown","trimmed","trim","effectiveItems","length","id","containerProps","inputProps","comboboxInputProps","listboxProps","getOptionProps","highlightedIndex","setHighlightedIndex","useCombobox","items","isOpen","onOpenChange","onSelect","hasItems","useEffect","current","filtered","toLowerCase","includes","handleRemoveTag","indexToRemove","_","index","handleKeyDown","e","key","preventDefault","slice","onKeyDown","handleInputChange","newValue","target","handleInputFocus","handleInputContainerClick","stopPropagation","focus","handlePopoverWrapperClick","closest","toggleDropdown","useImperativeHandle","defaultRenderOption","isHighlighted","optionProps","React","createElement","_extends","onClick","onMouseEnter","handleApplySelectedDropDownValues","newTagValues","clearSelectedDropDownValues","multiSelectRenderOption","isOptionSelected","Checkbox","defaultChecked","multiSelectRenderCTAs","Button","size","Popover","contentWidth","position","isPopoverOpen","onPopoverToggle","disableClickToggle","renderPopoverContents","closePopoverCb","Fragment","optionPropsWithHandlers","role","renderPopoverSrcElement","Icon","name","ariaLabel","shouldStopPropagation","onFocus","popoverContentAutomationId"],"mappings":";;;;;;;;;;;;;;;;;AA+CaA,MAAAA,wBACX,CACE;AAAA,EACEC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA,IAAc;AAAA,EACdC,WAAAA,IAAY;AAAA,EACZC,SAAAA,IAAU,CAAE;AAAA,EACZC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,kBAAAA,IAAmB;AAAA,EACnBC,iBAAAA,IAAkB;AAAA,EAClBC,UAAAA,IAAW;AAAA,EACXC,MAAAA,IAAO;AAAA,EACPC,WAAAA,IAAY;AAAA,EACZC,cAAAA,IAAe;AACjB,GACAC,MACG;AAEGC,QAAAA,IAAaA,CAACC,MACXA,EAAOC,IAAIC,CAAOA,MAAA;AACvB,UAAMC,IAAQf,EAAQgB,KAAKC,CAAOA,MAAAA,EAAIrB,UAAUkB,CAAG;AACnD,WAAOC,IAAQ;AAAA,MAAEb,OAAOa,EAAMb;AAAAA,MAAON,OAAOmB,EAAMnB;AAAAA,IAAAA,IAAU;AAAA,MAAEM,OAAOY;AAAAA,MAAKlB,OAAOkB;AAAAA,IAAAA;AAAAA,EAAI,CACtF,GAIG,CAACI,GAAMC,CAAO,IAAIC,EAA6C,MAC5DT,EAAWf,KAAS,CAAA,CAAE,CAC9B,GACK,CAACyB,GAAYC,CAAa,IAAIF,EAAS,EAAE,GACzC,CAACG,GAAiBC,CAAkB,IAAIJ,EAA2BpB,CAAO,GAC1E,CAACyB,GAAgBC,CAAiB,IAAIN,EAAS,EAAK,GACpDO,IAAaC,EAAsB,IAAI,GACvCC,IAAWD,EAAyB,IAAI,GACxCE,IAAkBF,EAAgB,EAAK,GAEvCG,IAA0BxB,MAAS,4BACnCyB,IAAgBzB,MAAS,kBAAiBwB,GAG1CE,IAAYC,GAAY/B,GAAc,6BAA6B,GAEnEgC,IAAqBC,EACzB,CAACC,MAA2B;AAC1B,QAAI/B,EAAU;AAERgC,UAAAA,IAAU,CAAC,GAAGpB,CAAI;AACpB,IAACoB,EAAQC,KAAMC,CAAAA,MAAQA,EAAI5C,UAAUyC,EAAOzC,KAAK,MACnD0C,EAAQG,KAAK;AAAA,MAAEvC,OAAOmC,EAAOnC;AAAAA,MAAON,OAAOyC,EAAOzC;AAAAA,IAAAA,CAAO,GACzDuB,EAAQmB,CAAO,GACfzC,IAAWyC,EAAQzB,IAAK2B,CAAQA,MAAAA,EAAI5C,KAAK,CAAC,IAE5C0B,EAAc,EAAE,GAChBI,EAAkB,EAAK;AAAA,EAEzB,GAAA,CAACpB,GAAUY,GAAMrB,CAAQ,CAC3B,GAEM6C,IAAuCN,EAC3C,CAACO,GAAqBN,MAA2B;AAC/C,QAAIO,IAAsD,CAAA;AAC1D,IAAID,IACgBC,IAAA,CAAC,GAAG1B,GAAM;AAAA,MAAEhB,OAAOmC,EAAOnC;AAAAA,MAAON,OAAOyC,EAAOzC;AAAAA,IAAAA,CAAO,IAExEgD,IAAkB1B,EAAK2B,OAAQL,CAAAA,MAAQA,EAAI5C,UAAUyC,EAAOzC,KAAK,GAEnEuB,EAAQyB,CAAe,GACnBb,KACFlC,IAAW+C,EAAgB/B,IAAK2B,CAAQA,MAAAA,EAAI5C,KAAK,CAAC;AAAA,EAGtD,GAAA,CAACsB,GAAMa,GAAyBlC,CAAQ,CAC1C,GAEMiD,IAAuB,sBAEvBC,IAA2BX,EAAY,CAACC,MAA2B;AACvE,QAAI/B,CAAAA,GAEA+B;AAAAA,UAAAA,EAAOzC,UAAUkD,GAAsB;AACnCE,cAAAA,IAAU3B,EAAW4B;AAC3B,YAAI,CAACD,EAAS;AACRV,cAAAA,IAAU,CAAC,GAAGpB,CAAI;AACxB,QAAKoB,EAAQC,KAAMC,OAAQA,EAAI5C,UAAUoD,CAAO,MAC9CV,EAAQG,KAAK;AAAA,UAAEvC,OAAO8C;AAAAA,UAASpD,OAAOoD;AAAAA,QAAAA,CAAS,GAC/C7B,EAAQmB,CAAO,GACfzC,IAAWyC,EAAQzB,IAAK2B,CAAQA,MAAAA,EAAI5C,KAAK,CAAC,IAE5C0B,EAAc,EAAE,GAChBI,EAAkB,EAAK;AACvB;AAAA,MACF;AAEA,UAAIM,GAAe;AACjB,cAAMW,IAAazB,EAAKqB,KAAKC,OAAOA,EAAI5C,UAAUyC,EAAOzC,KAAK;AACzB,QAAA8C,EAAA,CAACC,GAAYN,CAAM;AAAA,MAAA;AAExDF,QAAAA,EAAmBE,CAAM;AAAA;AAAA,EAC3B,GACC,CAAC/B,GAAU0B,GAAed,GAAMG,GAAYxB,GAAU6C,GAAsCP,CAAkB,CAAC,GAE5Ge,IACJ3B,EAAgB4B,SAAS,IACrB5B,IACAlB,KAAmBgB,EAAW4B,KAAK,IACjC,CAAC;AAAA,IAAEG,IAAIN;AAAAA,IAAsB5C,OAAO,QAAQmB,EAAW4B,KAAAA,CAAM;AAAA,IAAKrD,OAAOkD;AAAAA,EAAsB,CAAA,IAC/F,CAAA,GAGF;AAAA,IACJO,gBAAAA;AAAAA,IACAC,YAAYC;AAAAA,IACZC,cAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,kBAAAA;AAAAA,IACAC,qBAAAA;AAAAA,MACEC,GAAY;AAAA,IACdC,OAAOX;AAAAA,IACPY,QAAQrC;AAAAA,IACRsC,cAAcrC;AAAAA,IACdsC,UAAUjB;AAAAA,IACVd,WAAAA;AAAAA,IACAgC,UAAUf,EAAeC,SAAS;AAAA,EAAA,CACnC;AAGDe,EAAAA,EAAU,MAAM;AACd,QAAIpC,EAAgBqC,SAAS;AAC3BrC,MAAAA,EAAgBqC,UAAU;AAC1B;AAAA,IACF;AACAhD,IAAAA,EAAQR,EAAWf,KAAS,CAAA,CAAE,CAAC;AAAA,EAC9B,GAAA,CAACA,GAAOI,GAASyB,CAAc,CAAC,GAGnCyC,EAAU,MAAM;AAERE,UAAAA,IAAWpE,EAAQ6C,OAAOR,CAAAA,MAC9BA,EAAOnC,MAAMmE,cAAcC,SAASjD,EAAWgD,aAAa,KAC5DhC,EAAOzC,MAAMyE,YAAAA,EAAcC,SAASjD,EAAWgD,YAAa,CAAA,CAC9D;AACA7C,IAAAA,EAAmB4C,CAAQ;AAAA,EAAA,GAC1B,CAAC/C,GAAYrB,CAAO,CAAC;AAElBuE,QAAAA,KAAkBA,CAACC,MAA0B;AACjD,QAAIlE,EAAU;AAEd,UAAMgC,IAAUpB,EAAK2B,OAAO,CAAC4B,GAAGC,MAAUA,MAAUF,CAAa;AACjErD,IAAAA,EAAQmB,CAAO,IAGZ,CAACN,KAAiBD,KAA2BC,KAAiB,CAACP,MAChE5B,IAAWyC,EAAQzB,IAAI2B,CAAOA,MAAAA,EAAI5C,KAAK,CAAC;AAAA,EAC1C,GAGI+E,KAAgBA,CAACC,MAAuC;AAC5D,QAAItE,CAAAA,GAGJ;AAAA,UAAIsE,EAAEC,QAAQ,eAAexD,MAAe,MAAMH,EAAKiC,SAAS,GAAG;AACjEyB,QAAAA,EAAEE,eAAe;AACjB,cAAMxC,IAAUpB,EAAK6D,MAAM,GAAG,EAAE;AAChC5D,QAAAA,EAAQmB,CAAO,GACfzC,IAAWyC,EAAQzB,IAAI2B,CAAOA,MAAAA,EAAI5C,KAAK,CAAC;AACxC;AAAA,MACF;AAGIgF,UAAAA,EAAEC,QAAQ,WAAWxD,EAAW4B,KAAU1B,KAAAA,EAAgB4B,WAAW,KAAK9C,GAAiB;AAC7FuE,QAAAA,EAAEE,eAAe;AACXxC,cAAAA,IAAU,CAAC,GAAGpB,CAAI;AACpB,QAACoB,EAAQC,KAAKC,CAAAA,MAAOA,EAAI5C,UAAUyB,EAAW4B,KAAK,CAAC,MACtDX,EAAQG,KAAK;AAAA,UAAEvC,OAAOmB,EAAW4B,KAAK;AAAA,UAAGrD,OAAOyB,EAAW4B,KAAK;AAAA,QAAA,CAAG,GACnE9B,EAAQmB,CAAO,GACfzC,IAAWyC,EAAQzB,IAAI2B,CAAOA,MAAAA,EAAI5C,KAAK,CAAC,IAE1C0B,EAAc,EAAE,GAChBqC,EAAoB,EAAE,GACtBjC,EAAkB,EAAK;AACvB;AAAA,MACF;AAGA6B,MAAAA,EAAmByB,UAAUJ,CAAC;AAAA;AAAA,EAAA,GAG1BK,KAAoBA,CAACL,MAA2C;AACpE,QAAItE,EAAU;AAER4E,UAAAA,IAAWN,EAAEO,OAAOvF;AAC1B0B,IAAAA,EAAc4D,CAAQ,GACtBvB,EAAoB,EAAE,GAElBuB,EAASjC,UAAU,CAACxB,KACtBC,EAAkB,EAAI;AAAA,EACxB,GAGI0D,KAAmBA,MAAM;AAC7B,IAAI9E,MAEAe,EAAW4B,KAAAA,KAAUjD,EAAQmD,SAAS,MACxCzB,EAAkB,EAAI;AAAA,EACxB,GAGI2D,KAA4BA,CAACT,MAAwB;AACzD,IAAItE,MAEJsE,EAAEU,gBAAgB,GAClBzD,EAASsC,SAASoB,SACd,CAAC9D,MAAmBJ,EAAW4B,KAAUjD,KAAAA,EAAQmD,SAAS,MAC5DzB,EAAkB,EAAI;AAAA,EACxB,GAGI8D,KAA4BA,CAACZ,MAAwB;AACzD,QAAItE,GAAU;AACZsE,MAAAA,EAAEE,eAAe,GACjBF,EAAEU,gBAAgB;AAClB;AAAA,IACF;AAIA,IAFeV,EAAEO,OACUM,QAAQ,4BAA4B,KAE7Db,EAAEU,gBAAgB;AAAA,EACpB,GAGII,KAAiBA,MAAM;AAC3B,IAAIpF,KACJoB,EAAkB,CAACD,CAAc;AAAA,EAAA;AAGnCkE,EAAAA,GAAoBjF,GAAK,OAAO;AAAA,IAAEgF,gBAAAA;AAAAA,EAAAA,IAAmB,CAAE,CAAA;AAEvD,QAAME,KAAsBA,CAC1BvD,GACAqC,GACAV,GACA1D,MACG;AACH,UAAMqC,IAAazB,EAAKqB,KAAMC,OAAQA,EAAI5C,UAAUyC,EAAOzC,KAAK,GAC1DiG,IAAgBnC,MAAqBgB,GACrCoB,IAAcrC,EAAeiB,GAAO/B,CAAU;AAGlDoD,WAAAA,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,MACEpB,KAAKxC,EAAOe;AAAAA,OACR0C,GAAW;AAAA,MACf/F,WAAW,mCAAmC8F,IAAgB,gBAAgB,EAAE;AAAA,MAChFK,SAASA,MAAM,CAAC5F,KAAY0D,EAAS3B,CAAM;AAAA,MAC3C8D,cAAcA,MAAMxC,EAAoBe,CAAK;AAAA,MAC7C,sBAAoB,GAAGvE,CAAY,WAAWkC,EAAOe,EAAE;AAAA,IAAA,CAEvD2C,GAAAC,gBAAAA,EAAAA,cAAA,QAAA;AAAA,MAAMjG,WAAU;AAAA,IAAA,GAAgBsC,EAAOnC,KAAY,GAClDmC,EAAOzC,UAAUyC,EAAOnC,SAAS8F,gBAAAA,EAAAA,cAAA,QAAA;AAAA,MAAMjG,WAAU;AAAA,IAAA,GAAgBsC,EAAOzC,KAAY,CAClF;AAAA,EAAA,GAGHwG,KAAoCA,MAAM;AAC9CtE,IAAAA,EAAgBqC,UAAU;AAC1B,UAAMkC,IAAenF,EAAKL,IAAI2B,CAAAA,MAAOA,EAAI5C,KAAK;AAC9CC,IAAAA,IAAWwG,CAAY,GACvB3E,EAAkB,EAAK;AAAA,EAAA,GAGnB4E,KAA8BA,MAAM;AACxCnF,IAAAA,EAAQ,CAAE,CAAA;AAAA,EAAA,GAENoF,KAA0BA,CAAClE,GAAwBqC,MAAkB;AACzE,UAAM8B,IAAmBtF,EAAKqB,KAAKC,OAAOA,EAAI5C,UAAUyC,EAAOzC,KAAK,GAC9DiG,IAAgBnC,MAAqBgB,GACrCoB,IAAcrC,EAAeiB,GAAO8B,CAAgB;AAGxDT,WAAAA,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,MACEpB,KAAKxC,EAAOe;AAAAA,OACR0C,GAAW;AAAA,MACf/F,WAAW,gFAAgF8F,IAAgB,gBAAgB,EAAE;AAAA,MAC7H,gBAAcW;AAAAA,MACdN,SAASA,MAAM,CAAC5F,KAAYoC,EAAqC,CAAC8D,GAAkBnE,CAAM;AAAA,MAC1F8D,cAAcA,MAAMxC,EAAoBe,CAAK;AAAA,MAC7C,sBAAoB,GAAGvE,CAAY,WAAWkC,EAAOe,EAAE;AAAA,IAAA,CAEvD2C,GAAAC,gBAAAA,EAAAA,cAAA,QAAA;AAAA,MAAME,SAAUtB,CAAMA,MAAAA,EAAEU,gBAAgB;AAAA,IAAA,GACtCU,gBAAAA,EAAAA,cAACS,IAAQ;AAAA,MACPtG,cAAa;AAAA,MACbJ,WAAU;AAAA,MACV2G,gBAAgBF;AAAAA,MAChB3G,UAAWD,CAAAA,MAAU8C,EAAqC9C,GAAOyC,CAAM;AAAA,MACvEnC,OAAOmC,EAAOnC;AAAAA,IACf,CAAA,CACG,CACH;AAAA,EAAA,GAIHyG,KAAwBA,MAE1BZ,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKjG,WAAU;AAAA,EAAA,GACbiG,gBAAAA,EAAAA,cAACY,GAAM;AAAA,IAAC1G,OAAM;AAAA,IAAQK,MAAK;AAAA,IAAOsG,MAAK;AAAA,IAAKX,SAASI;AAAAA,IAA6BnG,cAAc,GAAGA,CAAY;AAAA,EAAA,CAAkB,GACjI6F,gBAAAA,EAAAA,cAACY,GAAM;AAAA,IAAC1G,OAAM;AAAA,IAAQK,MAAK;AAAA,IAAUsG,MAAK;AAAA,IAAKX,SAASE;AAAAA,IAAmCjG,cAAc,GAAGA,CAAY;AAAA,EAAkB,CAAA,CACvI;AAOP4F,SAAAA,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,IACElG,WAAW,oCAAoCA,CAAS,IAAIO,IAAW,qBAAqB,EAAE;AAAA,IAC9F,sBAAoBH;AAAAA,KAChBkD,EAAc,GAEjBnD,KAAS6F,gBAAAA,EAAAC,cAAA,SAAA;AAAA,IAAO5C,IAAI,GAAGjD,CAAY;AAAA,IAAUJ,WAAU;AAAA,EAAkCG,GAAAA,CAAa,GAEvG6F,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKE,SAASV;AAAAA,EAAAA,GACZQ,gBAAAA,EAAAA,cAACc,IAAO;AAAA,IACNpG,KAAKiB;AAAAA,IACL5B,WAAU;AAAA,IACVgH,cAAa;AAAA,IACbC,UAAS;AAAA,IACTC,eAAe,CAAC3G,KAAYmB;AAAAA,IAC5ByF,iBAAiB5G,IAAW,MAAM;AAAA,IAAA,IAAKoB;AAAAA,IACvCyF,oBAAoB;AAAA,IACpBC,uBAAuBA,CAAC;AAAA,MAAEC,gBAAAA;AAAAA,IACxBtB,MAAAA,gBAAAA,EAAAC,cAAAD,EAAAuB,UAAA,MACEtB,gBAAAA,EAAAA,cAAAC,OAAAA,MACMzC,IAAY;AAAA,MAChBzD,WAAU;AAAA,OACLiC,KAAiB;AAAA,MAAE,wBAAwB;AAAA,IAAA,CAAQ,GAEvDkB,EAAeC,SAAS,IACvBD,EAAerC,IAAI,CAACwB,GAAQqC,MAAU;AAChCrC,UAAAA,EAAOzC,UAAUkD,GAAsB;AACzC,cAAM+C,IAAgBnC,MAAqBgB,GACrCoB,KAAcrC,EAAeiB,GAAO,EAAK;AAE7CqB,eAAAA,gBAAAA,EAAAC,cAAA,OAAAC,EAAA;AAAA,UACEpB,KAAKxC,EAAOe;AAAAA,WACR0C,IAAW;AAAA,UACf/F,WAAW,0EAA0E8F,IAAgB,gBAAgB,EAAE;AAAA,UACvHK,SAASA,MAAM;AACb,YAAI5F,MACJyC,EAAyBV,CAAM,GAChBgF;UACjB;AAAA,UACAlB,cAAcA,MAAMxC,EAAoBe,CAAK;AAAA,QAC9C,CAAA,GAAA,SACOrD,EAAW4B,QAAO,GACrB;AAAA,MAET;AACA,UAAIjB;AACKuE,eAAAA,GAAwBlE,GAAQqC,CAAK;AAG9C,YAAM/B,IAAazB,EAAKqB,KAAMC,OAAQA,EAAI5C,UAAUyC,EAAOzC,KAAK,GAC1DiG,IAAgBnC,MAAqBgB,GAErC6C,IAA0B;AAAA,QAC9B,GAFkB9D,EAAeiB,GAAO/B,CAAU;AAAA,QAGlDwD,cAAcA,MAAMxC,EAAoBe,CAAK;AAAA,QAC7C3E,WAAW,mCAAmC8F,IAAgB,gBAAgB,EAAE;AAAA,MAAA;AAG3E5F,aAAAA,IACHA,EAAaoC,GAAQkF,GAAyBpF,CAAkB,IAChEyD,GAAoBvD,GAAQqC,GAAOvC,GAAoB7B,CAAQ;AAAA,IAAA,CACpE,IAED0F,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MAAKjG,WAAU;AAAA,IAAA,GACbiG,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MAAKjG,WAAU;AAAA,MAA2CyH,MAAK;AAAA,MAAS,aAAU;AAAA,IAAA,GAC/EpH,CACE,CACF,CAEJ,GACJ4B,KAAiB,CAACD,KAA2B4E,IAC9C;AAAA,IAEJc,yBAAyBA,MACvBzB,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MAAKjG,WAAU;AAAA,IAAA,GACbiG,gBAAAA,EAAAA,cAAA,OAAA;AAAA,MACEjG,WAAW,6BAA6BO,IAAW,uCAAuC,EAAE;AAAA,MAC5F4F,SAASb;AAAAA,IAAAA,GAERnE,EAAKL,IAAI,CAAC2B,GAAKkC,MACdqB,gBAAAA,EAAAC,cAAA,QAAA;AAAA,MAAMnB,KAAKH;AAAAA,MAAO3E,WAAU;AAAA,IAAA,GACzByC,EAAI/B,CAAY,GAChB,CAACH,KACAyF,gBAAAA,EAAAC,cAAC0B,IAAI;AAAA,MACHC,MAAK;AAAA,MACL5H,WAAU;AAAA,MACV6H,WAAW,cAAcpF,EAAI/B,CAAY,CAAC;AAAA,MAC1CyF,SAASA,MAAM3B,GAAgBG,CAAK;AAAA,MACpCmD,uBAAqB;AAAA,IAAA,CACtB,CAEC,CACP,IACCrH,KAAY,CAACU,EAAKiC,WAClB4C,gBAAAA,EAAAC,uBAAAC,EAAA;AAAA,MACEvF,KAAKmB;AAAAA,OACD0B,GAAkB;AAAA,MACtBhD,MAAK;AAAA,MACLX,OAAOyB;AAAAA,MACPxB,UAAUoF;AAAAA,MACVD,WAAWL;AAAAA,MACXmD,SAAS1C;AAAAA,MACTtF,aAAaoB,EAAKiC,WAAW,IAAIrD,IAAc;AAAA,MAC/CC,WAAU;AAAA,MACVO,UAAAA;AAAAA,MACA,cAAYJ,KAAS;AAAA,IACtB,CAAA,CAAA,CAEA,CACF;AAAA,IAEPC,cAAAA;AAAAA,IACA4H,4BAA4B,GAAG5H,CAAY;AAAA,EAC5C,CAAA,CACE,CACF;AAET,CACF;"}
|
package/dist/index38.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import e from "react";
|
|
2
|
-
import { useStableId as A } from "./
|
|
3
|
-
import { mergeIds as P } from "./
|
|
2
|
+
import { useStableId as A } from "./index188.js";
|
|
3
|
+
import { mergeIds as P } from "./index189.js";
|
|
4
4
|
import { getA11yNameAttributes as _ } from "./index70.js";
|
|
5
5
|
/* empty css */
|
|
6
6
|
function z({
|
package/dist/index38.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index38.js","sources":["../src/components/Input/index.tsx"],"sourcesContent":["import React from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport { mergeIds } from '../../utils/mergeIds';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport './style.scss';\n\ntype InputTag = 'input' | 'textarea';\n\ntype NativeInputProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n | 'value'\n | 'onChange'\n | 'disabled'\n | 'maxLength'\n | 'id'\n | 'aria-label'\n | 'aria-labelledby'\n | 'aria-describedby'\n | 'children'\n>;\ntype NativeTextareaProps = Omit<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n | 'value'\n | 'onChange'\n | 'disabled'\n | 'maxLength'\n | 'id'\n | 'aria-label'\n | 'aria-labelledby'\n | 'aria-describedby'\n | 'children'\n>;\n\ntype CommonInputProps = {\n value: string;\n disabled?: boolean;\n maxLength?: number;\n onChange: (value: string) => void;\n onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n tag?: InputTag;\n error?: boolean;\n errorMessage?: string;\n label?: string;\n placeholder?: string;\n style?: React.CSSProperties;\n inputStyle?: React.CSSProperties;\n automationId?: string;\n id?: string;\n /**\n * Accessible name when no visible label exists (icon-only / placeholder-only inputs).\n * Prefer ariaLabelledBy when a visible label exists.\n */\n ariaLabel?: string;\n /**\n * ID(s) of visible element(s) that label this input.\n * Useful for external labels outside the Input component.\n */\n ariaLabelledBy?: string;\n /**\n * ID(s) of element(s) that describe this input (hints, helper text, etc.).\n * Will be merged with internal error/counter IDs.\n */\n ariaDescribedBy?: string;\n};\n\n/**\n * Input component with built-in label, error, and counter support.\n * \n * Native HTML input/textarea attributes are passed through, including:\n * - `required`, `readOnly`, `autoFocus`, `name`, `type`\n * - `autoComplete`, `inputMode`, `enterKeyHint`, `pattern`\n * - Note: accessible name/description is provided via ariaLabel/ariaLabelledBy/ariaDescribedBy props.\n * - `min`, `max`, `step` (for number inputs)\n * - `onKeyDown`, `onPaste`, and other event handlers\n */\nexport type InputProps = CommonInputProps & (NativeInputProps | NativeTextareaProps);\n\nexport function Input({\n value,\n onChange,\n onBlur,\n onFocus,\n disabled,\n maxLength,\n tag,\n error,\n errorMessage,\n label,\n placeholder,\n style,\n inputStyle,\n automationId = '',\n id,\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy,\n ...nativeProps\n}: InputProps) {\n const Element: InputTag = tag || 'input';\n\n const inputId = useStableId(id, 'se-input');\n const errorId = `${inputId}-error`;\n const countId = `${inputId}-count`;\n\n const describedBy = mergeIds(\n error && errorMessage ? errorId : undefined,\n maxLength ? countId : undefined,\n ariaDescribedBy\n );\n\n const accessibleNameProps = getA11yNameAttributes({\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy: describedBy\n });\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n onFocus?.(e);\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n const nextValue = e.target.value;\n onChange(nextValue);\n };\n\n const inputPropsBase = {\n ...(nativeProps as Record<string, unknown>),\n id: inputId,\n value,\n onChange: handleChange,\n onBlur,\n onFocus: handleFocus,\n disabled,\n className: `${error ? 'input-container-error' : 'input-container-default'} ${\n disabled ? 'input-container-disabled' : ''\n }`,\n maxLength: maxLength ?? undefined,\n placeholder: placeholder,\n style: inputStyle,\n 'aria-invalid': error ? 'true' : undefined,\n ...accessibleNameProps\n };\n\n return (\n <div className=\"input-main-container\" style={style} data-automation-id={automationId}>\n {label && (\n <label\n className={`label-container ${disabled ? 'label-container-disabled' : ''}`}\n htmlFor={inputId}\n >\n {label}\n </label>\n )}\n {React.createElement(Element, inputPropsBase)}\n {(error || maxLength) &&\n <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\n {error && errorMessage && (\n <div key={errorMessage} id={errorId} className=\"error-message\" role=\"alert\">\n {errorMessage}\n </div>\n )}\n {maxLength && (\n <div id={countId} className=\"max-word\" aria-live=\"polite\" aria-atomic=\"true\">\n <span>{value?.length + '/' + maxLength}</span>\n </div>\n )}\n </div>\n }\n </div>\n );\n}\n"],"names":["React__default","useStableId","mergeIds","getA11yNameAttributes","Input","value","onChange","onBlur","onFocus","disabled","maxLength","tag","error","errorMessage","label","placeholder","style","inputStyle","automationId","id","ariaLabel","ariaLabelledBy","ariaDescribedBy","nativeProps","Element","inputId","errorId","countId","describedBy","undefined","accessibleNameProps","inputPropsBase","handleChange","e","nextValue","target","handleFocus","className","React","createElement","htmlFor","key","role","length"],"mappings":"AA8EO,OAAAA,OAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,SAAA,YAAAC,SAAA;AAAA,SAAA,yBAAAC,SAAA;AAAA,OAAA;AAAA,SAASC,EAAM;AAAA,EACpBC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,IAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACA,GAAGC;AACO,GAAG;AACb,QAAMC,IAAoBb,KAAO,SAE3Bc,IAAUxB,EAAYkB,GAAI,UAAU,GACpCO,IAAU,GAAGD,CAAO,UACpBE,IAAU,GAAGF,CAAO,UAEpBG,IAAc1B,EAClBU,KAASC,IAAea,IAAUG,QAClCnB,IAAYiB,IAAUE,QACtBP,CACF,GAEMQ,IAAsB3B,EAAsB;AAAA,IAChDiB,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,iBAAiBM;AAAAA,EAAAA,CAClB,GAWKG,IAAiB;AAAA,IACrB,GAAIR;AAAAA,IACJJ,IAAIM;AAAAA,IACJpB,OAAAA;AAAAA,IACAC,UATmB0B,CAACC,MAAiE;
|
|
1
|
+
{"version":3,"file":"index38.js","sources":["../src/components/Input/index.tsx"],"sourcesContent":["import React from 'react';\nimport { useStableId } from '../../utils/useStableId';\nimport { mergeIds } from '../../utils/mergeIds';\nimport { getA11yNameAttributes } from '../../utils/a11y';\nimport './style.scss';\n\ntype InputTag = 'input' | 'textarea';\n\ntype NativeInputProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n | 'value'\n | 'onChange'\n | 'disabled'\n | 'maxLength'\n | 'id'\n | 'aria-label'\n | 'aria-labelledby'\n | 'aria-describedby'\n | 'children'\n>;\ntype NativeTextareaProps = Omit<\n React.TextareaHTMLAttributes<HTMLTextAreaElement>,\n | 'value'\n | 'onChange'\n | 'disabled'\n | 'maxLength'\n | 'id'\n | 'aria-label'\n | 'aria-labelledby'\n | 'aria-describedby'\n | 'children'\n>;\n\ntype CommonInputProps = {\n value: string;\n disabled?: boolean;\n maxLength?: number;\n onChange: (value: string) => void;\n onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n tag?: InputTag;\n error?: boolean;\n errorMessage?: string;\n label?: string;\n placeholder?: string;\n style?: React.CSSProperties;\n inputStyle?: React.CSSProperties;\n automationId?: string;\n id?: string;\n /**\n * Accessible name when no visible label exists (icon-only / placeholder-only inputs).\n * Prefer ariaLabelledBy when a visible label exists.\n */\n ariaLabel?: string;\n /**\n * ID(s) of visible element(s) that label this input.\n * Useful for external labels outside the Input component.\n */\n ariaLabelledBy?: string;\n /**\n * ID(s) of element(s) that describe this input (hints, helper text, etc.).\n * Will be merged with internal error/counter IDs.\n */\n ariaDescribedBy?: string;\n};\n\n/**\n * Input component with built-in label, error, and counter support.\n * \n * Native HTML input/textarea attributes are passed through, including:\n * - `required`, `readOnly`, `autoFocus`, `name`, `type`\n * - `autoComplete`, `inputMode`, `enterKeyHint`, `pattern`\n * - Note: accessible name/description is provided via ariaLabel/ariaLabelledBy/ariaDescribedBy props.\n * - `min`, `max`, `step` (for number inputs)\n * - `onKeyDown`, `onPaste`, and other event handlers\n */\nexport type InputProps = CommonInputProps & (NativeInputProps | NativeTextareaProps);\n\nexport function Input({\n value,\n onChange,\n onBlur,\n onFocus,\n disabled,\n maxLength,\n tag,\n error,\n errorMessage,\n label,\n placeholder,\n style,\n inputStyle,\n automationId = '',\n id,\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy,\n ...nativeProps\n}: InputProps) {\n const Element: InputTag = tag || 'input';\n\n const inputId = useStableId(id, 'se-input');\n const errorId = `${inputId}-error`;\n const countId = `${inputId}-count`;\n\n const describedBy = mergeIds(\n error && errorMessage ? errorId : undefined,\n maxLength ? countId : undefined,\n ariaDescribedBy\n );\n\n const accessibleNameProps = getA11yNameAttributes({\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedBy: describedBy\n });\n\n const handleFocus = (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n onFocus?.(e);\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n const nextValue = e.target.value;\n onChange(nextValue);\n };\n\n const inputPropsBase = {\n ...(nativeProps as Record<string, unknown>),\n id: inputId,\n value,\n onChange: handleChange,\n onBlur,\n onFocus: handleFocus,\n disabled,\n className: `${error ? 'input-container-error' : 'input-container-default'} ${\n disabled ? 'input-container-disabled' : ''\n }`,\n maxLength: maxLength ?? undefined,\n placeholder: placeholder,\n style: inputStyle,\n 'aria-invalid': error ? 'true' : undefined,\n ...accessibleNameProps\n };\n\n return (\n <div className=\"input-main-container\" style={style} data-automation-id={automationId}>\n {label && (\n <label\n className={`label-container ${disabled ? 'label-container-disabled' : ''}`}\n htmlFor={inputId}\n >\n {label}\n </label>\n )}\n {React.createElement(Element, inputPropsBase)}\n {(error || maxLength) &&\n <div className={`${error ? 'error-and-max-word' : 'max-word-container'} ${disabled ? 'disabled' : ''}`}>\n {error && errorMessage && (\n <div key={errorMessage} id={errorId} className=\"error-message\" role=\"alert\">\n {errorMessage}\n </div>\n )}\n {maxLength && (\n <div id={countId} className=\"max-word\" aria-live=\"polite\" aria-atomic=\"true\">\n <span>{value?.length + '/' + maxLength}</span>\n </div>\n )}\n </div>\n }\n </div>\n );\n}\n"],"names":["React__default","useStableId","mergeIds","getA11yNameAttributes","Input","value","onChange","onBlur","onFocus","disabled","maxLength","tag","error","errorMessage","label","placeholder","style","inputStyle","automationId","id","ariaLabel","ariaLabelledBy","ariaDescribedBy","nativeProps","Element","inputId","errorId","countId","describedBy","undefined","accessibleNameProps","inputPropsBase","handleChange","e","nextValue","target","handleFocus","className","React","createElement","htmlFor","key","role","length"],"mappings":"AA8EO,OAAAA,OAAA;AAAA,SAAA,eAAAC,SAAA;AAAA,SAAA,YAAAC,SAAA;AAAA,SAAA,yBAAAC,SAAA;AAAA,OAAA;AAAA,SAASC,EAAM;AAAA,EACpBC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,cAAAA,IAAe;AAAA,EACfC,IAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,gBAAAA;AAAAA,EACAC,iBAAAA;AAAAA,EACA,GAAGC;AACO,GAAG;AACb,QAAMC,IAAoBb,KAAO,SAE3Bc,IAAUxB,EAAYkB,GAAI,UAAU,GACpCO,IAAU,GAAGD,CAAO,UACpBE,IAAU,GAAGF,CAAO,UAEpBG,IAAc1B,EAClBU,KAASC,IAAea,IAAUG,QAClCnB,IAAYiB,IAAUE,QACtBP,CACF,GAEMQ,IAAsB3B,EAAsB;AAAA,IAChDiB,WAAAA;AAAAA,IACAC,gBAAAA;AAAAA,IACAC,iBAAiBM;AAAAA,EAAAA,CAClB,GAWKG,IAAiB;AAAA,IACrB,GAAIR;AAAAA,IACJJ,IAAIM;AAAAA,IACJpB,OAAAA;AAAAA,IACAC,UATmB0B,CAACC,MAAiE;AAC/EC,YAAAA,IAAYD,EAAEE,OAAO9B;AAC3BC,MAAAA,EAAS4B,CAAS;AAAA,IAAA;AAAA,IAQlB3B,QAAAA;AAAAA,IACAC,SAfkB4B,CAACH,MAAgE;AACnFzB,MAAAA,IAAUyB,CAAC;AAAA,IAAA;AAAA,IAeXxB,UAAAA;AAAAA,IACA4B,WAAW,GAAGzB,IAAQ,0BAA0B,yBAAyB,IACvEH,IAAW,6BAA6B,EAAE;AAAA,IAE5CC,WAAWA,KAAamB;AAAAA,IACxBd,aAAAA;AAAAA,IACAC,OAAOC;AAAAA,IACP,gBAAgBL,IAAQ,SAASiB;AAAAA,IACjC,GAAGC;AAAAA,EAAAA;AAIHQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKF,WAAU;AAAA,IAAuBrB,OAAAA;AAAAA,IAAc,sBAAoBE;AAAAA,EACrEJ,GAAAA,KACCyB,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEF,WAAW,mBAAmB5B,IAAW,6BAA6B,EAAE;AAAA,IACxE+B,SAASf;AAAAA,EAERX,GAAAA,CACI,GAERwB,gBAAAA,EAAMC,cAAcf,GAASO,CAAc,IAC1CnB,KAASF,MACT6B,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKF,WAAW,GAAGzB,IAAQ,uBAAuB,oBAAoB,IAAIH,IAAW,aAAa,EAAE;AAAA,EACjGG,GAAAA,KAASC,KACRyB,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKE,KAAK5B;AAAAA,IAAcM,IAAIO;AAAAA,IAASW,WAAU;AAAA,IAAgBK,MAAK;AAAA,KACjE7B,CACE,GAENH,KACC4B,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKpB,IAAIQ;AAAAA,IAASU,WAAU;AAAA,IAAW,aAAU;AAAA,IAAS,eAAY;AAAA,EAAM,GAC1EE,gBAAAA,EAAAA,cAAA,QAAA,MAAOlC,GAAOsC,SAAS,MAAMjC,CAAgB,CAC1C,CAEJ,CAEJ;AAET;"}
|
package/dist/index39.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import a, { useState as d, useRef as $, useEffect as r, useMemo as D } from "react";
|
|
2
2
|
import { Icon as g } from "./index5.js";
|
|
3
3
|
import { LabelChip as F } from "./index10.js";
|
|
4
|
-
import { debounce as L } from "./
|
|
4
|
+
import { debounce as L } from "./index204.js";
|
|
5
5
|
/* empty css */
|
|
6
6
|
function z(p) {
|
|
7
7
|
const {
|